/* ============================================================================
   SAVAGEARS · "גלריה שקטה" — the quiet-gallery layer.

   Loaded after app.css and theme.css, so it restates the design without
   editing the two files underneath it. Drop the enqueue line in inc/enqueue.php
   and the site returns to what it was.

   The palette and the type live in app.css :root. What lives HERE is
   everything the old design's markup fights us on:
     1. the living ground (drifting light + film grain)
     2. motion — slow, decelerating, never bouncing
     3. the shape sweep that squares 81 inline pills
     4. the decorations that read as machine-made, switched off
   ============================================================================ */

/* ── 1 · the ground moves ────────────────────────────────────────────────────
   Three pools of light and shade behind everything, on cycles of 54 / 68 / 82
   seconds. The numbers do not divide into one another on purpose, so the loop
   never repeats anywhere the eye can catch it. Radial gradients rather than
   blurred layers: a blur this size costs real frames on a phone, a gradient
   costs none. */
.sg-aura {
	position: fixed; inset: -20%; z-index: 0; pointer-events: none;
	opacity: 0; transition: opacity 1.1s ease;
	--glow-hi: rgba(255,255,255,.9);
	--glow-mid: rgba(255,252,244,.55);
	--glow-lo: rgba(40,34,22,.10);
}
body.sg-motion .sg-aura { opacity: 1; }
.sg-aura b { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.sg-aura .a1 { width: 74vmax; height: 74vmax; top: -20%; inset-inline-end: -14%; background: radial-gradient(closest-side, var(--glow-hi), transparent 72%); animation: sgDrift1 54s var(--sg-ease-io) infinite alternate; }
.sg-aura .a2 { width: 64vmax; height: 64vmax; bottom: -18%; inset-inline-start: -16%; background: radial-gradient(closest-side, var(--glow-lo), transparent 70%); animation: sgDrift2 68s var(--sg-ease-io) infinite alternate; }
.sg-aura .a3 { width: 48vmax; height: 48vmax; top: 34%; inset-inline-start: 24%; background: radial-gradient(closest-side, var(--glow-mid), transparent 74%); animation: sgDrift3 82s var(--sg-ease-io) infinite alternate; }
@keyframes sgDrift1 { to { transform: translate3d(-7vw, 7vh, 0) scale(1.16); } }
@keyframes sgDrift2 { to { transform: translate3d(8vw, -6vh, 0) scale(1.12); } }
@keyframes sgDrift3 { to { transform: translate3d(-5vw, -8vh, 0) scale(.88); } }

/* Film grain. Real grain re-scatters every frame; a frozen noise tile just
   reads as a dirty screen. The layer overhangs the viewport so the jitter can
   never slide an edge into view. One composited transform, ~5fps, free. */
.sg-grain {
	position: fixed; inset: -6%; z-index: 1; pointer-events: none; opacity: .055;
	mix-blend-mode: multiply; will-change: transform;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.sg-motion .sg-grain { animation: sgGrain 1.1s steps(5) infinite; }
@keyframes sgGrain {
	0%   { transform: translate3d(0,0,0); }
	20%  { transform: translate3d(-2.5%,1.8%,0); }
	40%  { transform: translate3d(1.9%,-2.2%,0); }
	60%  { transform: translate3d(-1.4%,-1.6%,0); }
	80%  { transform: translate3d(2.3%,1.2%,0); }
	100% { transform: translate3d(0,0,0); }
}
/* ⚠️ ONLY the page wrapper. An earlier version of this rule also named the
   nav, the drawer, the overlay, the buy bar and the consent banner — every one
   of which is position:fixed. Restating `position:relative` on them dropped
   them into the document flow, and the closed cart drawer (a 359px panel
   parked off-screen) started occupying layout at the top of the body: at 390px
   the whole page was pushed sideways and the phone showed a blank column.
   Fixed chrome already sits above the ground on its own z-index; it needs
   nothing from here. */
.sg-root { position: relative; z-index: 1; }
/* Grain sits ABOVE the content, the way film grain sits over a photograph —
   it is what stops the flat colour reading as a screen. Light drifts BELOW. */
.sg-grain { z-index: 9; }
.sg-aura { z-index: 0; }

/* ── 2 · shape ───────────────────────────────────────────────────────────────
   The prototype set border-radius:9999px inline in 81 places, so no stylesheet
   rule can reach them — but an attribute substring match can. (This is the very
   trick WordPress core uses on [style*=border-color], which once painted a 3px
   border around our header.) The cart count keeps its circle: a numeric badge
   is round everywhere, and squaring it just looks broken. */
body.sg [style*="border-radius:9999px"]:not(.sg-cart-count),
body.sg [style*="border-radius: 9999px"]:not(.sg-cart-count) { border-radius: 0 !important; }
body.sg .lum-press, body.sg .sg-add,
body.sg button:not(.sg-cart-count), body.sg .sg-btn { border-radius: 0; }
.sg-pdp-cta, .sg-pdp-bar-cta, .sg-pdp-comp-cta, .sg-off-close-cta,
.sg-offer-card-cta, .sg-offers-pair-cta, .sg-shop-card-cta, .sg-pdp-bundle-cta,
.sg-nav-dropitem, .sg-nav-dropmenu, .sg-nav-dropall, .sg-nav-dropthumb,
.sg-off-line, .sg-off-other, .sg-off-sum, .sg-offer-card, .sg-shop-card,
.sg-off-line-thumb, .sg-off-stage, .sg-pdp-stage, .sg-pdp-thumb,
.sg-offer-card-media, .sg-shop-card-media, .sg-pdp-shots img, .sg-pdp-revs img,
.sg-offers-pair, .sg-offers-pair-thumbs img, .sg-pdp-comp, .sg-pdp-comp > img,
.sg-pdp-other, .sg-off-other > img, .sg-macro img { border-radius: 0 !important; }

/* Filled buttons are ink on chalk now, and they do not glow. */
body.sg .sg-pdp-cta, body.sg .sg-pdp-bar-cta, body.sg .sg-off-close-cta,
body.sg .sg-offer-card-cta, body.sg .sg-shop-card-cta, body.sg .sg-pdp-bundle-cta,
body.sg .sg-offers-pair-cta {
	background: var(--sg-accent); color: var(--sg-on-accent);
	box-shadow: none; font-weight: 600; letter-spacing: 0;
}
body.sg [style*="box-shadow:0 14px 34px"], body.sg [style*="box-shadow:0 16px 40px"] { box-shadow: none !important; }

/* ── 3 · motion ──────────────────────────────────────────────────────────────
   A rule that draws itself from the reading edge, and a label that steps
   forward. In RTL forward is left, so the origin is the right. */
body.sg a[href], body.sg button, body.sg .lum-press, body.sg .lum-focus {
	transition: transform .5s var(--sg-ease), color .3s ease,
	            background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
body.sg .lum-press:hover { transform: translateY(-2px); filter: none; }
body.sg .lum-press:active, body.sg button:active { transform: translateY(0) scale(.985); filter: none; }
body.sg button:not(.lum-press):not(:disabled):hover { filter: none; }

/* ⚠️ REMOVED: a hover underline that swept in under each nav item.
   It was written as `bottom: 8px` on the assumption that the links carry the
   documented min-height:44px box, which would have put the line clear below the
   glyphs. They don't — the measured box is 18px tall (24–42), so the line landed
   at y=34, straight THROUGH the text. Every one of the six items read as struck
   out on hover, not underlined. If an underline ever comes back it must be
   `text-decoration` or an ::after positioned off the text baseline — never a
   fixed offset from a box whose height is not pinned.

   ⚠️ Deleting it left the four plain links with NO hover response, because the
   `header nav a:hover{color:…}` rule in app.css never applied: those anchors
   carry colour and opacity in a style="" attribute, and inline wins regardless
   of selector weight. Hence !important here — it is the only thing that reaches
   them. The cue is the item coming up to full strength in the brand red, which
   is what the underline was decorating in the first place. */
#sg-nav nav > ul > li > a:hover, #sg-nav nav > ul > li > a:focus-visible,
.sg-nav-droptoggle:hover, .sg-nav-droptoggle:focus-visible {
	opacity: 1 !important;
	color: var(--sg-accent-ink) !important;
}
/* סיטונאות already sits at full strength in the brand red, so the rule above is
   a no-op for it and it alone would answer hover with nothing. It deepens
   instead — still red, visibly darker, and darker than #ab1919 means its
   contrast can only improve. */
#sg-nav nav > ul > li.sg-nav-ws > a:hover,
#sg-nav nav > ul > li.sg-nav-ws > a:focus-visible { color: #8c1414 !important; }

/* The piece breathes, and the shadow under it tightens at the same time. That
   second half is what makes it read as weight rather than as a floating cut-out. */
body.sg-motion .sg-pdp-stage img, body.sg-motion .sg-off-stage img { animation: sgHover 9s var(--sg-ease-io) infinite alternate; }
@keyframes sgHover { to { transform: translate3d(0, -10px, 0); } }
body.sg .sg-pdp-other img, body.sg .sg-shop-card-media img, body.sg .sg-off-line-thumb img { transition: transform .75s var(--sg-ease); }
body.sg-motion .sg-pdp-other:hover img, body.sg-motion .sg-shop-card:hover .sg-shop-card-media img { transform: translate3d(0,-10px,0) scale(1.03); }
body.sg .sg-pdp-shots img, body.sg .sg-pdp-revs img { transition: transform 1.1s var(--sg-ease); }
body.sg-motion .sg-pdp-shots figure:hover img { transform: scale(1.045); }

/* Arrival. app.js already owns this — it adds .sg-rv-init only once the script
   is actually running (so a page without JS is simply visible) and .sg-rv-in on
   intersection. All that is retuned here is the feel: shorter travel, slower
   settle, and an easing that decelerates hard instead of gliding linearly.
   Do NOT add a second observer for this; there is one already. */
body.sg .sg-rv-init {
	transform: translate3d(0, 20px, 0);
	transition: opacity 1s var(--sg-ease), transform 1s var(--sg-ease);
}

/* ── 4 · the machine-made decorations, switched off ──────────────────────────
   Each of these is a tell on its own; together they were the whole diagnosis.
   Switched off here rather than deleted from the templates so the change stays
   in one file and stays reversible. */
.dchar-num,                       /* the ghost outline numerals 01 / 02 / 03 */
.sg-scrollcue,                    /* "גלילה למטה" + its chevron */
.sg-corner,                       /* decorative corner brackets around photos */
.sg-sparkle { display: none !important; }

/* Letter-spaced mono eyebrows: the single most repeated pattern on the site.
   The label stays — it carries real information — it just stops shouting. */
body.sg [style*="letter-spacing:.16em"], body.sg [style*="letter-spacing:.18em"],
body.sg [style*="letter-spacing:.2em"], body.sg [style*="letter-spacing:.22em"],
body.sg [style*="letter-spacing: .16em"], body.sg [style*="letter-spacing: .18em"],
body.sg [style*="letter-spacing: .2em"], body.sg [style*="letter-spacing: .22em"],
body.sg .sg-shop-eyebrow, body.sg .sg-pdp-eyebrow, body.sg .sg-off-eyebrow,
body.sg .dchar-series, body.sg .sg-offer-card-eyebrow {
	letter-spacing: .01em !important; font-weight: 400;
}

/* Tick bullets. A ✓ before every line is the clearest sign nobody wrote the
   list — the quiet version is a hairline and a label. */
body.sg .sg-pdp-feats svg, body.sg .sg-pdp-trust svg { display: none; }
body.sg .sg-pdp-feats li, body.sg .sg-pdp-trust li {
	padding-block: 10px; border-top: 1px solid var(--sg-line); gap: 0;
}
body.sg .sg-pdp-feats { gap: 0; }
body.sg .sg-pdp-trust { gap: 0; margin-top: 22px; }

/* Gold pills that announced a discount become quiet red text. */
body.sg .sg-off-save, body.sg .sg-offer-card-save {
	background: none !important; color: var(--sg-accent-ink) !important;
	padding: 0 !important; font-weight: 600;
}
body.sg .sg-offer-card-badge, body.sg .sg-off-badge {
	background: none !important; color: var(--sg-accent-ink) !important;
	padding: 0 !important; border: 0 !important; position: static !important;
	font-weight: 600; letter-spacing: .01em !important;
}
body.sg .sg-offer-card.is-hero { background: var(--sg-surface); border-color: var(--sg-line-strong); }
body.sg .sg-offer-card.is-hero, body.sg [style*="animation:sgpulse"] { animation: none !important; }

/* ── 5 · reduced motion is not optional here ─────────────────────────────────
   The site is bound by IS 5568. If the user asked the system to stop moving
   things, everything above stops — and the content stays visible. */
@media (prefers-reduced-motion: reduce) {
	.sg-aura { opacity: 0 !important; }
	.sg-grain, .sg-pdp-stage img, .sg-off-stage img { animation: none !important; }
	*, *::before, *::after { transition-duration: .01ms !important; }
	[data-rv] { opacity: 1 !important; transform: none !important; }
}

/* ── 6 · the hero, as a wall label ───────────────────────────────────────────
   The series sits above the piece and the piece's name is the headline. What
   used to be here was a letter-spaced brand tagline over a poetic two-line
   claim — the exact shape of every generated landing page. */
.sg-hero-series { display: block; font-size: 13.5px; color: var(--sg-muted); letter-spacing: 0; }
#sg-hero-word { color: var(--sg-text) !important; font-weight: 200; }
.sg-hero-facts { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 28px; color: var(--sg-muted); font-size: 13px; }
.sg-hero-facts span + span { padding-inline-start: 16px; border-inline-start: 1px solid var(--sg-line); }
/* The hero was a full viewport tall to make room for a scroll cue that is now
   gone. Without it the fold is just empty. */
#top { min-height: auto !important; }

/* ── 6b · "במה" — the opening stands on something ────────────────────────────
   Chosen from six grounds previewed on the real hero. The section read as empty
   because the bag was a cut-out with nothing under it: no surface, no room. A
   gallery answers that by putting the object on a plinth, not by adding pattern.

   TWO PIECES, AND THE SPLIT IS THE WHOLE POINT:

   .sg-hero-ground  a full-width fall-off toward the foot of the section. It is
                    a 2–6% wash of ink, so it can pass behind copy without ever
                    touching it — it only deepens the ground the text sits on,
                    which if anything helps contrast.
   .sg-hero-plinth  the horizon hairline, scoped INSIDE the media column.
                    ⚠️ A full-width rule crosses the trust row (רישיון רשמי ·
                    משלוח חינם · מלאי בישראל) at some viewport height, because
                    the copy column's height moves with the viewport and no
                    fixed percentage is safe at every size. Inside its own grid
                    cell it CANNOT reach the copy at any width — separate tracks
                    on desktop, separate stacked items on a phone. Geometry does
                    the work, not a number that happens to clear today. */
.sg-hero-ground {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(to bottom,
		transparent 0 46%, rgba(21,21,26,0.018) 64%, rgba(21,21,26,0.055) 100%);
}
.sg-hero-plinth {
	position: absolute; z-index: 0; pointer-events: none;
	inset-inline: -6%; bottom: 4%; height: 1px;
	background: linear-gradient(to left, transparent,
		var(--sg-line-strong) 18%, var(--sg-line-strong) 82%, transparent);
}
/* The haze where the surface meets the object — wider than the bag, so the bag
   reads as standing in a space rather than pasted onto a line. */
.sg-hero-plinth::before {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 116%; height: 92px;
	background: radial-gradient(ellipse 52% 100% at 50% 100%,
		rgba(21,21,26,0.05), transparent 72%);
}

/* ── 7 · repairs where removing the decoration left a hole ──────────────────
   The companion-wallet band was built on a tinted plate and a coloured ring;
   with the tint neutralised it read as an empty white slab. It becomes what it
   actually is: a line of goods on the lifted plane, with a hairline. */
body.sg .compcard {
	background: var(--sg-surface) !important;
	border: 1px solid var(--sg-line) !important;
	box-shadow: none !important;
}
body.sg .compcard [style*="background:var(--ca)"],
body.sg .compcard button { background: var(--sg-accent) !important; color: var(--sg-on-accent) !important; }

/* The hero glow and the per-product spotlight were built to melt a studio
   photograph into a black page. On chalk they are a smudge. */
#sg-hero-glow { opacity: .35; }
body.sg [style*="mix-blend-mode:screen"] { mix-blend-mode: multiply !important; opacity: .12 !important; }

/* Carousel controls: squared, hairline, no fill. */
body.sg #sg-hero-prev, body.sg #sg-hero-next {
	border-radius: 0 !important; background: none !important;
	border: 1px solid var(--sg-line-strong) !important;
}
body.sg [data-sg-hero-dot] { border-radius: 0 !important; height: 2px !important; }

/* The gold progress hairline at the top of the window becomes ink. */
#sg-progress { background: var(--sg-text) !important; }

/* ── 8 · filled CTAs that are links, not buttons ─────────────────────────────
   theme.css carries `body.sg a { color: inherit }` at (0,1,1), which outranks
   any single-class rule — so a link-button's own `color` never applied. It went
   unnoticed for as long as the fill was gold and inheriting ink happened to
   look right. The moment the fill became ink, the mobile buy bar rendered ink
   on ink: an invisible purchase button on the device most customers use.
   Anything filled that is an <a> needs its colour restated above that rule. */
body.sg a.sg-buybar-cta,
body.sg a.sg-pdp-bundle-cta,
body.sg a.sg-offer-card-cta,
body.sg a.sg-shop-card-cta { color: var(--sg-on-accent); }
body.sg a.sg-buybar-cta { box-shadow: none; }

/* The wave section's outline wordmark is the last of the ghost lettering. */
body.sg .sg-wave-ghost, body.sg [style*="-webkit-text-stroke"] { display: none !important; }

/* ── 9 · the opening ─────────────────────────────────────────────────────────
   The first screen was one bag and a great deal of air. A quiet system governs
   the site; the entrance wall of a gallery is still a poster. Weight, price and
   a real action come back — the energy comes from goods and density, never from
   ornament. */
.sg-hero-title {
	font-family: var(--sg-display); font-weight: 800;
	font-size: clamp(44px, 8.4vw, 96px); line-height: .95; letter-spacing: -0.045em;
	margin: 6px 0 0; color: var(--sg-text);
}
#sg-hero-word { font-weight: 800; }
.sg-hero-buy { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.sg-hero-price { font-size: clamp(26px, 4vw, 34px); font-weight: 300; letter-spacing: -.01em; }
.sg-hero-pricenote { font-size: 13.5px; color: var(--sg-dim); }
/* The three-bag offer, on its own plate.
   It was 13.5px of underlined text beside the price and read as a footnote. It
   takes the full width of the buy row (flex-basis 100% in a wrapping row), so
   it always lands on its own line under the price rather than competing with it. */
.sg-hero-deal {
	width: 100%; max-width: 420px; box-sizing: border-box;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: 4px; padding: 11px 14px; text-decoration: none;
	background: var(--sg-surface); border: 1px solid var(--sg-line);
	transition: border-color .3s var(--sg-ease), transform .5s var(--sg-ease);
}
.sg-hero-deal:hover { border-color: var(--sg-accent-ink); transform: translateY(-2px); }
.sg-hero-deal-lab { font-size: 13px; font-weight: 700; color: var(--sg-text); }
.sg-hero-deal-p { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sg-hero-deal-p s { font-size: 13px; color: var(--sg-dim); }
.sg-hero-deal-p svg { color: var(--sg-dim); flex: none; }
.sg-hero-deal-p b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--sg-text); }
/* ⚠️ The chip is a filled <span> inside an <a>, and `body.sg a{color:inherit}`
   is (0,1,1) — it sets the colour on the anchor and the span inherits it, so a
   plain class rule here does win. Stated explicitly all the same: this is the
   exact pattern that made the mobile buy bar ink-on-ink. */
.sg-hero-deal-save {
	font-size: 12px; font-weight: 700; padding: 4px 9px;
	background: var(--sg-accent-ink); color: #fff;
}
.sg-hero-deal-go { display: flex; color: var(--sg-dim); margin-inline-start: auto; }
.sg-hero-deal:hover .sg-hero-deal-go { color: var(--sg-accent-ink); }
.sg-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.sg-hero-add {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	background: var(--sg-accent); color: var(--sg-on-accent); border: 0; border-radius: 0;
	font-family: var(--sg-body); font-weight: 700; font-size: 16px;
	padding: 16px 34px; cursor: pointer; min-height: 54px;
}
.sg-hero-more { font-size: 14.5px; font-weight: 600; color: var(--sg-text); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--sg-line-strong); }
.sg-hero-more:hover { border-color: var(--sg-accent-ink); color: var(--sg-accent-ink); }
/* The hero no longer needs a whole viewport: there is a catalogue directly
   under it now, and letting it peek is the point. */
#top { padding-block: clamp(84px, 10vw, 104px) clamp(30px, 4vw, 46px) !important; }

/* Mobile running order. app.css sequences the hero's children by :nth-child,
   which broke the moment the block was rebuilt — restated by class, at equal
   specificity from a later file, so it wins and stays readable. */
@media (max-width: 760px) {
	body.sg .sg-hero-copy > .sg-hero-series { order: 1; }
	body.sg .sg-hero-copy > .sg-hero-title  { order: 2; }
	body.sg .sg-hero-copy > .sg-hero-facts  { order: 3; margin-top: 14px !important; font-size: 12.5px !important; }
	body.sg .sg-hero-copy > .sg-hero-buy    { order: 6; margin-top: 16px !important; }
	body.sg .sg-hero-copy > .sg-hero-cta    { order: 7; margin-top: 14px !important; }
	body.sg .sg-hero-copy > .sg-hero-deal   { order: 8; margin-top: 12px !important; }
	body.sg .sg-hero-copy > a               { order: 9; }
	body.sg .sg-hero-add { width: 100%; }
	body.sg .sg-hero-cta { gap: 12px; }
}

/* ── the catalogue strip ─────────────────────────────────────────────────── */
.sg-series { max-width: 1240px; margin: 0 auto; padding: 0 24px clamp(46px, 6vw, 76px); }
.sg-series-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sg-series-head h2 { font-family: var(--sg-display); font-weight: 700; font-size: clamp(21px, 3.4vw, 30px); margin: 0; letter-spacing: -.02em; }
.sg-series-head a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--sg-accent-ink); text-decoration: none; }

.sg-series-row {
	display: grid; grid-auto-flow: column; grid-auto-columns: 64vw; gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory;
	margin-inline: -24px; padding-inline: 24px; padding-bottom: 6px;
	scrollbar-width: none;
}
.sg-series-row::-webkit-scrollbar { display: none; }
.sg-series-card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--sg-surface); border: 1px solid var(--sg-line); min-width: 0; }
.sg-series-link { display: flex; flex-direction: column; text-decoration: none; color: var(--sg-text); padding: 0 14px 12px; }
/* Pure colour, no type on it — so it takes the product's own hue. The fallback
   is the element's own --ca, so a card that never got --ca-hue keeps its ink
   rather than inheriting a stranger's colour. */
.sg-series-rule { display: block; height: 2px; background: var(--ca-hue, var(--ca)); margin: 0 -14px 16px; }
.sg-series-media { display: grid; place-items: center; padding: 4px 0 14px; }
/* min-width:0 + explicit height — a bag cutout is tall and narrow, and left to
   its intrinsic size it sets the column's min-content floor. */
.sg-series-media img { height: 190px; width: auto; max-width: 100%; filter: drop-shadow(0 16px 20px var(--sg-shadow)); transition: transform .75s var(--sg-ease); }
.sg-series-card:hover .sg-series-media img { transform: translate3d(0, -8px, 0); }
.sg-series-name { font-weight: 700; font-size: 17px; }
.sg-series-sub { font-size: 13px; color: var(--sg-muted); margin-top: 2px; }
.sg-series-price { font-size: 17px; font-weight: 300; margin-top: 8px; }
.sg-series-add {
	margin: 0 14px 14px; padding: 13px 16px; border: 1px solid var(--sg-text); border-radius: 0;
	background: none; color: var(--sg-text); font-family: var(--sg-body); font-weight: 600;
	font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	transition: background .3s ease, color .3s ease;
}
.sg-series-add:hover { background: var(--sg-text); color: var(--sg-bg); }

/* ── the offers, as goods ─────────────────────────────────────────────────────
   This was a 51px line of 14px text carrying the three best offers in the shop.
   It is now three cards that show the actual bags, state the saving as its own
   number, and mark the best value. Mobile stacks them as wide rows rather than
   a second snap-row — one carousel under another reads as the same thing twice. */
.sg-series-deals { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--sg-line); }
.sg-series-deals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sg-series-deals-head h3 { margin: 0; font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; letter-spacing: -.02em; }
.sg-series-deals-all { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 13.5px; color: var(--sg-muted); text-decoration: none; white-space: nowrap; }
.sg-series-deals-all:hover { color: var(--sg-accent-ink); }
.sg-series-deals-row, .sg-pdp-offers { display: grid; gap: 12px; }
/* auto-fit, not repeat(3): the Luffy page shows two offers (the duo is
   Goku × Itachi), and a fixed three-column track would leave a hole where the
   third card is not. ⚠️ minmax's MAX is what auto-fit counts tracks by — the
   documented trap — so the floor is written as min(100%, …) to survive 320px. */
@media (min-width: 860px) {
	.sg-pdp-offers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
}

body.sg .sg-pdp-bundle {
	background: var(--sg-bg-2); border-block: 1px solid var(--sg-line);
	padding-block: clamp(30px, 5vw, 46px); margin-top: clamp(30px, 5vw, 46px);
	max-width: none; padding-inline: 18px;
}
body.sg .sg-pdp-bundle > * { max-width: var(--pdp-max); margin-inline: auto; }
body.sg .sg-pdp-bundle .sg-pdp-lead strong { color: var(--sg-accent-ink); font-weight: 800; }
body.sg .sg-pdp-bundle .sg-deal { background: var(--sg-surface); }

.sg-deal {
	display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center;
	gap: 14px; text-decoration: none;
	background: var(--sg-surface); border: 1px solid var(--sg-line);
	transition: border-color .3s var(--sg-ease), transform .5s var(--sg-ease);
}
.sg-deal:hover { border-color: var(--ca); transform: translateY(-2px); }
.sg-deal.is-best { border-color: var(--ca); }
/* A fixed frame with contain, because the three composites have genuinely
   different shapes: three bags in a row is 2.3:1, two bags with their wallets
   is 1.4:1. Letting each set its own height would stagger the card grid. */
/* ⚠️ NOT align-self:stretch. With `stretch` the row's height drives the box and
   `aspect-ratio` then derives the WIDTH from it — which blew past the 132px
   track and laid the composite straight over the card's text on a phone. Width
   comes from the track, height from the ratio, never the other way round. */
.sg-deal-media {
	display: grid; place-items: stretch; align-self: center; width: 100%;
	grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
	/* ⚠️ box-sizing is NOT border-box globally in this theme (documented: a card
	   with max-width:240 measured 266). width:100% + padding ran the frame 24px
	   past the card edge on every desktop width. */
	box-sizing: border-box; padding: 8px 6px; overflow: hidden;
	background: var(--plate); aspect-ratio: 5 / 4;
}
/* ⚠️ height:auto — the width/height attributes on the <img> are presentational
   hints and would otherwise beat the CSS box, rendering a 900×560 composite at
   its natural size. Caught before on the PDP close-ups. */
.sg-deal-media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; display: block; }
.sg-deal-body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 0 14px 14px; min-width: 0; }
.sg-deal-badge {
	font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
	background: var(--ca); color: #fff; padding: 3px 8px; margin-bottom: 3px;
}
.sg-deal-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--sg-text); }
.sg-deal-what { font-size: 12.5px; color: var(--sg-muted); }
.sg-deal-price { display: flex; align-items: center; gap: 7px; margin-top: 6px; white-space: nowrap; }
.sg-deal-price s { font-size: 13.5px; color: var(--sg-dim); }
.sg-deal-price svg { color: var(--sg-dim); flex: none; }
.sg-deal-price b { font-size: clamp(23px, 3vw, 27px); font-weight: 800; letter-spacing: -.02em; color: var(--sg-text); }
/* The saving is the offer. It was the one number the old strip never printed. */
.sg-deal-save { font-size: 12.5px; font-weight: 700; color: var(--ca); }
.sg-deal-hook { font-size: 12px; color: var(--sg-dim); margin-top: 2px; }

@media (min-width: 620px) { .sg-series-row { grid-auto-columns: 40vw; } }
@media (min-width: 860px) {
	.sg-series-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 18px; }
	.sg-series-media img { height: 230px; }
	/* Three columns, and the card turns vertical: the composite gets the full
	   card width, which is the whole reason it was made at 900px. */
	.sg-series-deals-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.sg-deal { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; }
	/* Wide frame once the card is vertical and the composite has the full width. */
	.sg-deal-media { padding: 10px 12px 4px; aspect-ratio: 16 / 10; }
	.sg-deal-body { padding: 16px 18px 20px; gap: 4px; }
	.sg-deal-name { font-size: 19px; }
}

/* Both of these render ~22px tall: fine with a mouse, a coin-toss with a thumb.
   Padding grows the hit area without moving anything visually. */
.sg-hero-more { display: inline-flex; align-items: center; min-height: 44px; }

/* ── 10 · the campaign photography ───────────────────────────────────────── */
.sg-life { max-width: 1240px; margin: 0 auto; padding: 0 24px clamp(46px, 6vw, 76px); }
.sg-life-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sg-life-head h2 { font-family: var(--sg-display); font-weight: 700; font-size: clamp(21px, 3.4vw, 30px); margin: 0; letter-spacing: -.02em; }
.sg-life-head span { font-size: 12.5px; color: var(--sg-muted); }
.sg-life-row {
	display: grid; grid-auto-flow: column; grid-auto-columns: 78vw; gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin-inline: -24px; padding-inline: 24px;
}
.sg-life-row::-webkit-scrollbar { display: none; }
.sg-life-shot { position: relative; display: block; scroll-snap-align: start; overflow: hidden; background: var(--plate); text-decoration: none; }
/* height:auto — the width/height attributes hold the space against layout shift,
   and as a presentational hint they would otherwise beat the aspect-ratio. */
.sg-life-shot img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; transition: transform 1.2s var(--sg-ease); }
body.sg-motion .sg-life-shot:hover img { transform: scale(1.035); }
.sg-life-cap {
	position: absolute; inset-inline-start: 12px; bottom: 12px;
	background: var(--sg-bg); color: var(--sg-text);
	font-size: 12px; font-weight: 600; padding: 7px 12px;
}
@media (min-width: 760px) {
	.sg-life-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 16px; }
}

/* Squaring the carousel dots turned them into 2px slivers — visually right,
   but a 2px-tall tap target is not a target. The line stays thin; the hit area
   grows around it. */
body.sg #sg-hero-dots { gap: 4px; }
body.sg [data-sg-hero-dot] {
	height: 2px !important; background-clip: content-box !important;
	padding-block: 15px !important; padding-inline: 12px !important;
	box-sizing: content-box !important;
}
body.sg .sg-hero-copy > a { display: inline-flex; align-items: center; min-height: 44px; }
/* ⚠️ …but the offer strip is also a direct <a> child, and that rule is (0,2,1)
   while .sg-hero-deal is (0,1,0) — so the strip was forced inline and the
   wholesale link flowed up beside it, 3px away. Same specificity family as
   `body.sg a{color:inherit}`. It needs its own line. */
body.sg .sg-hero-copy > a.sg-hero-deal { display: flex; }

/* ⚠️ The hero grid is `repeat(auto-fit,minmax(300px,1fr))` — inline, from the
   prototype. At 320px the viewport leaves 272px after padding, the track floor
   is 300, and the whole copy column sat 4px off the screen. minmax(0,1fr) is
   the fix, and it needs !important because the declaration it beats is inline. */
@media (max-width: 760px) {
	body.sg .sg-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 6 · section labels — a rubric, not a terminal (2026-09-24) ─────────────
   Adir: "SAVAGEARS // האיכות" reads as an AI font. It was three things at once:
   a brand prefix nobody needs above a heading on the brand's own site, a `//`
   glyph borrowed from code, and mono at .24em tracking (which the letter-spacing
   sweep above never caught — it stops at .22em). The replacement is what a
   newspaper does above a headline: one plain Hebrew word, body face, 13px/600,
   no tracking. Every eyebrow in the templates now carries this class instead of
   an inline style, so a future change is one rule and not sixty edits. */
body.sg .sg-kicker {
	display: block; font-family: var(--sg-body); font-size: 13px; font-weight: 600;
	letter-spacing: 0 !important; color: var(--sg-accent-ink); line-height: 1.3;
}
body.sg span.sg-kicker { display: inline-block; }
body.sg .sg-kicker-muted { color: var(--sg-muted); font-weight: 500; }

/* The class-based eyebrows (shop / PDP / offers / legal / details) get the same
   treatment; they keep their own colour (the PDP one is the series ink). */
body.sg .sg-shop-eyebrow, body.sg .sg-pdp-eyebrow, body.sg .sg-off-eyebrow,
body.sg .dchar-series, body.sg .sg-legal .sg-legal-eyebrow {
	font-family: var(--sg-body); font-size: 13px; font-weight: 600; letter-spacing: 0 !important;
}
body.sg .sg-offer-card-eyebrow { font-family: var(--sg-body); font-size: 12px; font-weight: 600; letter-spacing: 0 !important; }

/* Belt and braces for any inline eyebrow this round did not convert. */
body.sg [style*="letter-spacing:.24em"], body.sg [style*="letter-spacing:.26em"],
body.sg [style*="letter-spacing: .24em"], body.sg [style*="letter-spacing: .26em"] {
	letter-spacing: .01em !important; font-weight: 400;
}

/* "מי אנחנו": the three series used to be pills with a coloured dot in front —
   the same tell the nav menu shed in 1.10.5. Now they are the real product
   thumbnails the menu already uses, and each one links to its bag. */
.sg-about-series { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
body.sg .sg-about-series a {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
	padding-block: 5px; padding-inline: 6px 16px;
	border: 1px solid var(--sg-line); background: var(--sg-surface);
	color: var(--sg-text); text-decoration: none; font-size: 14.5px; font-weight: 600;
	transition: border-color .2s ease;
}
body.sg .sg-about-series a:hover { border-color: var(--sg-line-strong); }
.sg-about-series img { width: 34px; height: 34px; object-fit: contain; display: block; }

/* ── 7 · wholesale "why us": the line-up (2026-09-24) ───────────────────────
   Three bags in a row, each with a hairline in its series colour and the middle
   one lifted a touch — a shop window, not a card grid. The reasons sit beside
   them as a hairline list; five short facts do not need five boxes. */
.ws-why { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.ws-why-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); align-items: end; padding-top: 18px; }
.ws-why-bag { margin: 0; min-width: 0; }
.ws-why-bag:nth-child(2) { transform: translateY(-18px); }
.ws-why-frame {
	aspect-ratio: 5 / 6; background: var(--plate); border: 1px solid var(--sg-line);
	border-top: 3px solid var(--hue, var(--sg-accent-ink));
	display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden;
}
.ws-why-frame img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
.ws-why-bag figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 2px 0; }
.ws-why-bag figcaption b { font-size: 15px; font-weight: 700; color: var(--sg-text); }
.ws-why-bag figcaption span { font-size: 12.5px; color: var(--sg-muted); }
.ws-why-list { list-style: none; margin: 0; padding: 0; }
.ws-why-list li { display: grid; gap: 3px; padding: 13px 0; border-top: 1px solid var(--sg-line); }
.ws-why-list li:last-child { border-bottom: 1px solid var(--sg-line); }
.ws-why-list b { font-size: 16.5px; font-weight: 700; color: var(--sg-text); }
.ws-why-list span { font-size: 14.5px; line-height: 1.55; color: var(--sg-muted); }
@media (max-width: 900px) {
	.ws-why { grid-template-columns: minmax(0, 1fr); }
	.ws-why-bag:nth-child(2) { transform: none; }
	.ws-why-lineup { padding-top: 0; }
}
@media (max-width: 430px) {
	.ws-why-lineup { gap: 8px; }
	.ws-why-bag figcaption b { font-size: 13px; }
	.ws-why-bag figcaption span { font-size: 11px; }
}

/* Wholesale lead form honeypot: off-screen for people, present for bots. */
.ws-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }