/* ============================================================
   SAVAGEARS — foundation styles.
   Ported verbatim from the Claude Design prototype helmet <style>
   (SAVAGEARS Store.dc.html). Tokens + keyframes + interaction FX.
   ============================================================ */

    /* ============================================================
       WARM PAPER — the light ground (2026-08-01).
       The dark palette lives in checkpoints/2026-08-01-dark-design/.

       Two golds, and the difference matters:
         --sg-accent      bright brand gold. FILLS ONLY (buttons, pills,
                          badges), always with --sg-on-accent text on top.
                          As text on paper it is 1.77:1 — unreadable.
         --sg-accent-ink  the same hue burnt down until it passes 4.5:1 on
                          both the page and a white card. Text, icons,
                          hairlines, rules, focus rings, progress fills.
       Using --sg-accent where ink belongs is the one mistake that silently
       breaks IS 5568 / WCAG AA on a light ground.
       ============================================================ */
    /* ============================================================
       "גלריה שקטה" · CHALK — 2026-08-29.
       The warm-cream-and-gold palette that stood here is the single most
       over-produced combination in machine-made design right now, and the
       type stack under it (Heebo + Space Grotesk) is the pair a model
       reaches for when it is not choosing. Both are gone.
       Ground is chalk: a near-neutral off-white with the barest warm bias,
       carrying a *lifted* plane above it, because one flat value is what
       makes minimalism read as unfinished rather than quiet.
       ⚠️ The gold is retired as a FILL. --sg-accent is now ink, so every
       filled button is black on chalk; --sg-accent-ink is the brand red
       from the woven patch, and it is the only colour on the page that is
       not either ink or a product's own series hue.
       ============================================================ */
    :root{
      --sg-bg:#f7f6f3; --sg-bg-2:#efeeea; --sg-surface:#fffffe; --sg-surface-2:#faf9f7;
      --sg-line:rgba(21,21,26,0.12); --sg-line-strong:rgba(21,21,26,0.24);
      --sg-text:#15151a; --sg-muted:#5c5c61; --sg-dim:#6b6a67; /* verified on ground, bg-2 and plate */
      --sg-accent:#15151a; --sg-accent-ink:#ab1919; --sg-accent-soft:rgba(171,25,25,0.09);
      --sg-on-accent:#f7f6f3;
      --ca:#15151a; --ca-ink:#ab1919; --ca-soft:rgba(21,21,26,0.06);
      /* surface washes + depth. On dark these were white at 3%; on paper they
         must be ink, or they read as a lighter patch instead of a recess. */
      --sg-tint:rgba(21,21,26,0.035); --sg-tint-2:rgba(21,21,26,0.06);
      --sg-shadow:rgba(30,26,18,0.13); --sg-shadow-strong:rgba(26,24,18,0.28);
      --sg-veil:rgba(21,21,26,0.5);          /* drawer / modal scrim */
      --sg-glass:rgba(247,246,243,0.88);     /* sticky nav + buy bar */
      --sg-sel:#eae8e3;
      /* motion: everything decelerates, nothing overshoots. A spring bounce
         or a pulsing glow is itself one of the loudest machine-made tells. */
      --sg-ease:cubic-bezier(.16,1,.3,1); --sg-ease-io:cubic-bezier(.62,0,.38,1);
      /* semantic */
      --sg-ok:#1c6b38; --sg-ok-bg:rgba(28,107,56,0.09); --sg-ok-line:rgba(28,107,56,0.3);
      --sg-err:#b3261e; --sg-err-bg:rgba(179,38,30,0.08); --sg-err-line:rgba(179,38,30,0.45);
      /* series accents — burnt for a light ground (the bright originals ran
         1.8–2.6:1 on paper). Kept as fills where they sit on a dark plate. */
      /* ⚠️ --sg-db and --sg-op held each other's colours: Dragon Ball was purple
         and One Piece was orange. The only consumer is the series row on "מי
         אנחנו", so the dot beside דרגון בול rendered purple and nobody looking
         at the products would have guessed the token was to blame. The names now
         mean what they say. These are DOTS — decoration with the label beside
         them — so Dragon Ball takes the bag's own marigold, not its text ink. */
      --sg-db:#e07c10;  --sg-db-soft:rgba(224,124,16,0.20);
      --sg-nar:#b3201e; --sg-nar-soft:rgba(179,32,30,0.20);
      --sg-op:#6d3fd4;  --sg-op-soft:rgba(109,63,212,0.20);
      /* One family across the whole site, worked across its full weight range
         (200 → 800). Three families were doing the job of size and weight,
         and two of them were the defaults. --sg-mono is kept as a NAME because
         forty files reference it; it no longer means a different typeface, it
         means "figures that line up in a column". */
      --sg-display:"Assistant",system-ui,sans-serif; --sg-body:"Assistant",system-ui,sans-serif;
      --sg-mono:"Assistant",system-ui,sans-serif; --sg-anton:"Assistant",system-ui,sans-serif;
      --sg-brand-red:#ab1919;   /* sampled from the supplied logo patch */
      --plate:#f1f0ed;
      --color-primary:#15151a; --color-on-primary:#f7f6f3; --color-primary-on-dark:#f7f6f3; --color-primary-focus:#ab1919;
      --color-ink:#15151a; --color-body:#15151a; --color-hairline:rgba(21,21,26,0.13);
      --font-display:"Assistant",system-ui,sans-serif; --font-text:"Assistant",system-ui,sans-serif;
      color-scheme: light;
    }
    /* Figures line up wherever they stack: prices, totals, tables, the cart. */
    table,.woocommerce-Price-amount,[class*="price"],[class*="Price"],
    .sg-off-price,.sg-off-was,.sg-offer-card-price,.sg-pdp-price,.sg-pdp-bar-price{
      font-variant-numeric:tabular-nums;
    }
    html{scroll-behavior:smooth;}
    body{margin:0;background:var(--sg-bg);color:var(--sg-text);font-family:var(--sg-body);-webkit-font-smoothing:antialiased;}
    ::selection{background:var(--sg-accent);color:var(--sg-on-accent);}
    @keyframes sgcue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}
    @keyframes sgbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2%)}}
    @keyframes sgcycle{0%,100%{background:radial-gradient(circle,rgba(224,124,16,0.18),transparent 60%)}33%{background:radial-gradient(circle,rgba(109,63,212,0.17),transparent 60%)}66%{background:radial-gradient(circle,rgba(179,32,30,0.16),transparent 60%)}}
    a[href], button { cursor: pointer; }
    a[href], button, .lum-press, .lum-focus { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .22s ease, border-color .22s ease, color .2s ease, filter .2s ease, opacity .2s ease; }
    .lum-press:hover { transform: translateY(-2px); filter: brightness(1.06); }
    .lum-press:active, button:active { transform: translateY(0) scale(.96); filter: brightness(.98); }
    button:not(.lum-press):not(:disabled):hover { filter: brightness(1.14); }
    header nav a[href]:hover { color: var(--sg-accent-ink); }
    /* (legacy wallet flip/zoom styles removed in 2026 wallets redesign — see block below) */
    @keyframes sgpulse{0%,100%{box-shadow:0 0 0 1px var(--sg-accent),0 28px 70px -40px var(--sg-shadow-strong),0 0 60px -26px var(--sg-accent);}50%{box-shadow:0 0 0 1px var(--sg-accent),0 28px 70px -40px var(--sg-shadow-strong),0 0 96px -14px var(--sg-accent);}}
    .lgood:hover{transform:translateY(-1px);border-color:var(--sg-line-strong)!important;}
    @media (prefers-reduced-motion: reduce){.lgood:hover{transform:none;}}
    @keyframes sgfloat{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-14px);opacity:.7}}
    @keyframes sgspark{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.55);opacity:.9}}
    @media (prefers-reduced-motion: reduce){[style*="sgfloat"],[style*="sgspark"],[style*="sgpulse"],[style*="sgbob"],[style*="sgcycle"]{animation:none!important;}}
    #qgrid>div{position:relative;transition:background .25s ease, box-shadow .25s ease;}
    #qgrid>div:hover{background:var(--sg-surface);box-shadow:inset 0 0 54px -12px var(--sg-accent-soft);}
    #qgrid>div::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--sg-accent),transparent);opacity:0;transition:opacity .25s ease;}
    #qgrid>div:hover::after{opacity:.7;}
    /* ============================================================
       Wallets — premium paired-wallet showcase (2026 redesign).
       Light studio photos spotlit into the dark theme via vignette;
       hero + detail thumbs open the shared cinematic lightbox (#sg-dlb).
       Per-card accent via --c / --c-soft / --c-on.
       ============================================================ */
    .wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(338px,1fr));gap:clamp(20px,3vw,34px);}
    .wcard{position:relative;border:1px solid var(--sg-line);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,var(--sg-surface),var(--sg-bg-2));display:flex;flex-direction:column;box-shadow:0 10px 26px -22px var(--sg-shadow);transition:border-color .4s ease,box-shadow .4s ease,transform .45s cubic-bezier(.2,.7,.2,1);}
    .wcard:hover{border-color:var(--sg-line-strong);box-shadow:0 34px 80px -46px var(--sg-shadow-strong),0 0 64px -34px var(--c);transform:translateY(-4px);}
    .whero{position:relative;padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,30px) clamp(8px,1.2vw,14px);}
    .whero-glow{position:absolute;top:-8%;left:50%;transform:translateX(-50%);width:94%;height:84%;background:radial-gradient(circle at 50% 26%,var(--c-soft),transparent 60%);pointer-events:none;}
    .wpair{position:relative;z-index:3;display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(12px,1.6vw,18px);background:var(--sg-tint);border:1px solid var(--sg-line);padding:5px 13px 5px 5px;border-radius:9999px;}
    .wpair-bag{width:30px;height:30px;border-radius:8px;flex:none;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--sg-line),0 0 16px -3px var(--c);}
    .wpair span{font-family:var(--sg-mono);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--sg-text);}
    .wpair b{color:var(--c);}
    .whero-shot{position:relative;z-index:2;display:block;width:100%;padding:0;margin:0;border:1px solid rgba(255,255,255,.08);background:var(--sg-surface-2);border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:16/11;box-shadow:0 24px 48px -30px var(--sg-shadow-strong);animation:wbob 6s ease-in-out infinite;-webkit-tap-highlight-color:transparent;}
    .whero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease;}
    .whero-shot:hover .whero-img{transform:scale(1.05);filter:contrast(1.05) saturate(1.06);}
    .whero-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 78% 84% at 50% 42%,transparent 46%,rgba(255,255,255,.34) 78%,rgba(255,255,255,.72) 100%);}
    .whero-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,.38) 50%,transparent 58%);transform:translateX(130%);}
    .whero-shot:hover .whero-sheen{transform:translateX(-130%);transition:transform 1s ease;}
    /* light-on-dark ON PURPOSE: this chip sits on top of a photograph, so it
       carries its own scrim rather than the page tokens. */
    .whero-zoom{position:absolute;z-index:4;bottom:11px;inset-inline-start:11px;display:inline-flex;align-items:center;gap:5px;font-family:var(--sg-mono);font-size:10px;letter-spacing:.04em;color:#f5f4f0;background:rgba(20,17,10,.6);border:1px solid rgba(255,255,255,.2);padding:5px 11px;border-radius:9999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.82;transition:opacity .3s ease;}
    .whero-shot:hover .whero-zoom{opacity:1;}
    .wthumbs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:clamp(12px,1.6vw,16px) clamp(18px,2.2vw,24px) 0;}
    .wthumb{position:relative;padding:0;margin:0;aspect-ratio:1/1;border-radius:11px;overflow:hidden;cursor:pointer;background:var(--sg-surface-2);border:1px solid var(--sg-line);-webkit-tap-highlight-color:transparent;}
    .wthumb img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease;}
    .wthumb::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 86% 86% at 50% 44%,transparent 52%,rgba(255,255,255,.5) 100%);box-shadow:inset 0 0 0 1px var(--sg-line);transition:box-shadow .3s ease;pointer-events:none;}
    .wthumb:hover img,.wthumb:focus-visible img{transform:scale(1.09);filter:contrast(1.05);}
    .wthumb:hover::after,.wthumb:focus-visible::after{box-shadow:inset 0 0 0 1px var(--c),0 0 26px -10px var(--c);}
    .whero-shot:focus-visible,.wthumb:focus-visible{outline:2px solid var(--c);outline-offset:3px;}
    .winfo{position:relative;z-index:2;padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,24px) clamp(20px,2.4vw,24px);display:flex;flex-direction:column;flex:1;}
    .wname{font-family:var(--sg-display);font-weight:800;font-size:clamp(22px,2.6vw,28px);margin:0;letter-spacing:-0.01em;color:var(--sg-text);}
    .wspec{color:var(--sg-muted);font-size:13.5px;line-height:1.55;margin:9px 0 0;}
    .wgrow{flex:1;}
    .wdeal{position:relative;overflow:hidden;margin-top:16px;border:1px solid var(--sg-line);border-radius:16px;padding:15px 16px;background:var(--sg-tint);}
    .wdeal-glow{position:absolute;inset:0;background:radial-gradient(120% 130% at 100% 0,var(--c-soft),transparent 56%);pointer-events:none;}
    .wdeal-row{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
    .wdeal-k{font-family:var(--sg-mono);font-size:10.5px;letter-spacing:.1em;color:var(--c);}
    .wdeal-price{display:flex;align-items:baseline;gap:8px;margin-top:5px;}
    .wdeal-price b{font-family:var(--sg-display);font-weight:900;font-size:27px;color:var(--sg-text);line-height:1;}
    .wdeal-price s{color:var(--sg-dim);font-size:13px;}
    .wdeal-save{font-family:var(--sg-mono);font-size:11.5px;font-weight:700;color:var(--c-on);background:var(--c);padding:4px 10px;border-radius:9999px;white-space:nowrap;}
    .wbtns{position:relative;display:flex;gap:9px;margin-top:13px;flex-wrap:wrap;}
    .wbtn-set{flex:2;min-width:158px;background:var(--c);color:var(--c-on);border:none;border-radius:9999px;padding:13px 16px;font-family:var(--sg-body);font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 14px 34px -16px var(--c);}
    .wbtn-one{flex:1;min-width:120px;background:transparent;color:var(--sg-text);border:1px solid var(--sg-line-strong);border-radius:9999px;padding:13px 14px;font-family:var(--sg-body);font-weight:600;font-size:13.5px;cursor:pointer;}
    .wfeats{display:flex;flex-wrap:wrap;gap:7px 13px;margin-top:14px;}
    .wfeats span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--sg-dim);}
    .wfeats span::before{content:"";width:4px;height:4px;border-radius:9999px;background:var(--c);flex:none;}
    @keyframes wbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    @media (prefers-reduced-motion: reduce){.whero-shot{animation:none!important;}.whero-img,.wthumb img{transition:none!important;}}
    @keyframes upin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
    .up-card{animation:upin .45s cubic-bezier(.2,.7,.2,1);}
    @media (prefers-reduced-motion: reduce){.up-card{animation:none!important;}}
    @keyframes herofloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.4%);}}
    .hero-float{animation:herofloat 6s ease-in-out infinite;}
    @media (prefers-reduced-motion: reduce){.hero-float{animation:none!important;}}
    .hero-mist{position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;mix-blend-mode:multiply;filter:blur(40px);}
    .hero-mist span{position:absolute;border-radius:50%;background:radial-gradient(circle, var(--mist) 0%, transparent 68%);}
    .mist-a{width:62%;height:58%;left:16%;top:16%;opacity:.075;animation:mistdrift 15s ease-in-out infinite;}
    .mist-b{width:46%;height:50%;left:38%;top:34%;opacity:.055;animation:mistdrift 19s ease-in-out infinite reverse;}
    .mist-c{width:40%;height:44%;left:24%;top:46%;opacity:.06;animation:mistdrift2 23s ease-in-out infinite;}
    @keyframes mistdrift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6%,-5%) scale(1.12);}}
    @keyframes mistdrift2{0%,100%{transform:translate(0,0) scale(1.06);}50%{transform:translate(-7%,5%) scale(.94);}}
    @media (prefers-reduced-motion: reduce){.mist-a,.mist-b,.mist-c{animation:none!important;}}
    @keyframes cglow{0%,100%{box-shadow:0 16px 34px -26px var(--sg-shadow-strong),0 0 0 0 var(--ca-soft);}50%{box-shadow:0 16px 34px -26px var(--sg-shadow-strong),0 0 0 8px var(--ca-soft);}}
    .compcard{animation:cglow 2.3s ease-in-out infinite;}
    @media (prefers-reduced-motion: reduce){.compcard{animation:none!important;}}
    .hero-halo{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:84%;height:80%;background:radial-gradient(ellipse at center, rgba(120,98,52,0.16) 0%, rgba(120,98,52,0.07) 46%, transparent 74%);mix-blend-mode:multiply;filter:blur(20px);pointer-events:none;z-index:0;}
    @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

/* ============================================================
   Details / macro gallery — minimal filmstrip + cinematic lightbox.
   2026 redesign: giant Anton banner, quiet thumbnails, emphasis on click.
   Per-block accent via --cca; lightbox accent via --lbc (set in JS).
   ============================================================ */
    .dgwrap{max-width:1180px;margin:0 auto;}

    /* per-character block ----------------------------------- */
    .dchar{margin-top:clamp(46px,7vw,90px);}
    .dchar-head{display:flex;align-items:center;justify-content:space-between;gap:18px;}
    .dchar-id{min-width:0;}
    .dchar-series{display:block;font-family:var(--sg-mono);font-size:clamp(11px,1.1vw,13px);letter-spacing:.22em;color:var(--cca);}
    /* .dchar-name removed — giant Latin names dropped per request */
    .dchar-sub{display:block;font-family:var(--sg-display);font-weight:900;letter-spacing:-0.01em;font-size:clamp(26px,4.2vw,48px);line-height:1;color:var(--sg-text);margin:0;}
    .dchar-num{flex:none;font-family:var(--sg-anton);font-size:clamp(54px,9vw,150px);line-height:.66;color:transparent;-webkit-text-stroke:1.5px var(--cca);opacity:.4;}
    .dchar-rule{height:2px;margin-top:clamp(14px,1.7vw,24px);background:linear-gradient(to left,var(--cca),var(--cca) 20%,var(--sg-line) 62%,transparent);}

    /* quiet filmstrip --------------------------------------- */
    .dfilm{display:flex;gap:clamp(10px,1.1vw,15px);margin-top:clamp(20px,2.4vw,34px);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .dfilm::-webkit-scrollbar{display:none;}
    .dshot{flex:0 0 auto;width:clamp(146px,21vw,210px);aspect-ratio:5/6;padding:0;border:0;margin:0;background:var(--sg-surface);border-radius:14px;overflow:hidden;position:relative;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;}
    .dshot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--sg-line);transition:box-shadow .35s ease;pointer-events:none;z-index:2;}
    .dshot img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;filter:saturate(.96) contrast(1.02);transform:scale(1.001);transition:opacity .45s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .45s ease;}
    .dshot:hover img,.dshot:focus-visible img{opacity:1;filter:none;transform:scale(1.06);}
    .dshot:hover::after,.dshot:focus-visible::after{box-shadow:inset 0 0 0 1px var(--cca),0 0 32px -10px var(--cca);}
    .dshot:focus-visible{outline:2px solid var(--cca);outline-offset:3px;}

    /* (giant-title reveal removed with .dchar-name; .dchar-id uses the generic reveal) */

    /* cinematic lightbox ------------------------------------ */
    body.dlb-open{overflow:hidden;}
    .dlb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);background:rgba(247,244,237,.93);-webkit-backdrop-filter:blur(15px) saturate(1.05);backdrop-filter:blur(15px) saturate(1.05);opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s ease;}
    .dlb.is-open{opacity:1;visibility:visible;}
    .dlb-stage{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(620px,90vw);}
    .dlb-imgwrap{position:relative;border-radius:16px;overflow:hidden;background:var(--sg-surface);box-shadow:0 40px 100px -40px var(--sg-shadow-strong),0 0 0 1px var(--lbc,var(--sg-line)),0 0 90px -16px var(--lbc,transparent);}
    .dlb-imgwrap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--sg-line);}
    .dlb-img{display:block;max-width:100%;max-height:74vh;object-fit:contain;}
    .dlb.is-open .dlb-img{animation:dlbzoom .6s cubic-bezier(.2,.7,.2,1);}
    @keyframes dlbzoom{from{transform:scale(1.07);opacity:.35;}to{transform:scale(1);opacity:1;}}
    .dlb-cap{margin-top:16px;font-family:var(--sg-mono);font-size:13px;letter-spacing:.04em;color:var(--sg-muted);text-align:center;}
    .dlb-cap b{color:var(--lbc,var(--sg-accent-ink));font-weight:700;margin-inline-end:8px;}
    .dlb-close,.dlb-nav{display:inline-flex;align-items:center;justify-content:center;background:var(--sg-surface);border:1px solid var(--sg-line-strong);color:var(--sg-text);border-radius:9999px;cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease;z-index:3;}
    .dlb-close{position:absolute;top:clamp(12px,2.4vw,24px);left:clamp(12px,2.4vw,24px);width:46px;height:46px;}
    .dlb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;}
    .dlb-prev{right:clamp(8px,2vw,26px);}
    .dlb-next{left:clamp(8px,2vw,26px);}
    .dlb-close:hover,.dlb-nav:hover{background:var(--sg-bg-2);border-color:var(--lbc,var(--sg-line-strong));}
    .dlb-nav:hover{transform:translateY(-50%) scale(1.06);}
    @media (prefers-reduced-motion:reduce){.dlb.is-open .dlb-img{animation:none;}}
    @media (max-width:680px){
      .dchar-num{display:none;}
      .dlb-nav{width:44px;height:44px;}
      .dlb-prev{right:6px;}
      .dlb-next{left:6px;}
    }

/* ============================================================
   Proof / credibility band + reviews scaffold (CRO).
   ============================================================ */
    .sg-proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:clamp(14px,1.8vw,20px);}
    .sg-proof{position:relative;display:block;text-decoration:none;color:inherit;border:1px solid var(--sg-line);border-radius:18px;padding:24px 22px;background:var(--sg-surface);transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;}
    .sg-proof:hover{border-color:var(--sg-line-strong);transform:translateY(-3px);box-shadow:0 22px 46px -28px var(--sg-shadow-strong),inset 0 0 46px -20px var(--sg-accent-soft);}
    .sg-proof-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--sg-accent-soft);color:var(--sg-accent-ink);margin-bottom:14px;}
    .sg-proof h3{font-family:var(--sg-display);font-weight:700;font-size:18px;margin:0;color:var(--sg-text);}
    .sg-proof p{color:var(--sg-muted);font-size:14px;line-height:1.55;margin:8px 0 0;}
    .sg-proof-link:hover .sg-proof-ic{background:var(--sg-accent);color:var(--sg-on-accent);}

    .sg-rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2vw,22px);}
    .sg-rev{margin:0;border:1px solid var(--sg-line);border-radius:18px;padding:24px 22px;background:var(--sg-surface);display:flex;flex-direction:column;gap:12px;}
    .sg-rev-stars{display:flex;gap:2px;color:var(--sg-accent-ink);}
    .sg-rev blockquote{margin:0;color:var(--sg-text);font-size:15.5px;line-height:1.6;}
    .sg-rev figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;}
    .sg-rev-name{font-family:var(--sg-display);font-weight:700;font-size:14px;color:var(--sg-text);}
    .sg-rev-verified{display:inline-flex;align-items:center;gap:4px;font-family:var(--sg-mono);font-size:11px;color:var(--sg-accent-ink);}
    .sg-rev-cta{max-width:560px;margin:0 auto;text-align:center;border:1px solid var(--sg-line);border-radius:22px;padding:clamp(30px,4vw,46px) 26px;background:radial-gradient(120% 130% at 50% 0,var(--sg-accent-soft),transparent 60%),var(--sg-surface);}
    .sg-rev-cta-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--sg-accent-soft);color:var(--sg-accent-ink);margin-bottom:16px;}
    .sg-rev-cta h3{font-family:var(--sg-display);font-weight:800;font-size:clamp(20px,2.4vw,26px);margin:0;color:var(--sg-text);}
    .sg-rev-cta p{color:var(--sg-muted);font-size:15px;line-height:1.6;margin:10px auto 22px;max-width:420px;}
    @media (prefers-reduced-motion:reduce){.sg-proof:hover{transform:none;}}

/* ============================================================
   Product section grid — two columns by design.
   Was inline `repeat(auto-fit,minmax(300px,1fr))`, which lays down three
   tracks at 1180px. Sections WITH a companion wallet card (goku, itachi)
   filled the third track via `grid-column:1/-1`, so auto-fit kept it and
   every column shrank to 345px; luffy has no companion, its third track
   collapsed, and its columns got 554px. Same markup, two different bag
   sizes. Explicit columns + a breakpoint instead.
   ============================================================ */
    .sg-prodgrid{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,84px);align-items:center;}
    @media (min-width:900px){ .sg-prodgrid{grid-template-columns:1fr 1fr;} }

/* ============================================================
   Logo lockup — the red woven patch + the IL locale tag.
   The patch is the official artwork and stays untouched; "IL" is set in
   type beside it so it stays crisp at any size and carries the brand red
   (6.6:1 on paper, so it passes as text rather than being decoration).
   ============================================================ */
    .sg-logo{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none;}
    .sg-logo img{display:block;height:26px;width:auto;}
    .sg-logo-il{position:relative;font-family:var(--sg-mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;color:var(--sg-brand-red);padding-inline-end:10px;line-height:1;order:-1;}
    .sg-logo-il::before{content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--sg-brand-red);opacity:.6;}
    @media (max-width:760px){
      .sg-logo{gap:6px;}
      .sg-logo img{height:22px;}
      .sg-logo-il{font-size:11px;padding-inline-end:8px;}
    }

/* ============================================================
   Mobile comfort — product section.

   `grid-template-columns: 1fr` is minmax(AUTO,1fr), and that auto floor equals
   the widest item's min-content. The companion wallet card is a flex row of a
   78px thumbnail + nowrap price + a nowrap CTA, i.e. 391px of min-content — so
   at 375px the track refused to shrink and the ENTIRE column hung 40px off the
   left edge, taking the "הוסיפו ארנק ב-50%" button with it. minmax(0,1fr) lets
   the track shrink; the card is then restacked so the CTA is full-width.
   ============================================================ */
    .sg-prodgrid{grid-template-columns:minmax(0,1fr);}
    @media (min-width:900px){ .sg-prodgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }

    @media (max-width:760px){
      .compcard{flex-wrap:wrap;gap:12px 14px;padding:16px 18px !important;}
      .compcard > img{width:88px !important;height:60px !important;}
      .compcard > div:not([aria-hidden]){flex:1 1 140px;min-width:0;}
      .compcard > button{flex:1 1 100% !important;width:100%;white-space:normal !important;min-height:48px;}
      /* the corner ticks around the image frame sat under the thumb */
      .sg-prodgrid .dchar-num{display:none;}
    }

/* ============================================================
   Hero on mobile — put the bag next to the headline.

   Stacked, the source order runs: eyebrow, H1, copy, CTAs, wholesale link,
   trust row, carousel controls … and only THEN the bag. That left 548px
   between the headline and the product it names, and the carousel dots
   appeared before the thing they page through.

   `display:contents` on the copy column lifts its children into the same flex
   flow as the media column, so all of them can be ordered as one list:
       eyebrow → H1 → BAG → controls → copy → CTAs → link → trust
   Desktop is untouched: it keeps the two-column grid.
   ============================================================ */
    @media (max-width:760px){
      .sg-hero-grid{display:flex;flex-direction:column;gap:0;}
      .sg-hero-copy{display:contents;}
      .sg-hero-copy > *:nth-child(1){order:1;}              /* eyebrow      */
      .sg-hero-copy > *:nth-child(2){order:2;}              /* headline     */
      .sg-hero-copy > *:nth-child(6){order:3;margin-top:16px !important;gap:8px 11px !important;font-size:12.5px !important;}  /* trust — qualifies the product BEFORE it is shown; tightened so the three badges hold one line at 375px */
      .sg-hero-media{order:4;margin-top:10px;}             /* the bag      */
      .sg-hero-ctrl{order:5;margin-top:6px !important;justify-content:center;}
      .sg-hero-copy > *:nth-child(3){order:6;margin-top:12px !important;}  /* subline */
      .sg-hero-copy > *:nth-child(4){order:7;margin-top:22px !important;}  /* CTAs    */
      .sg-hero-copy > *:nth-child(5){order:8;margin-top:18px !important;}  /* B2B link*/
      /* The stage carries height inline, which outranks any stylesheet — hence
         !important. It no longer has to hold the eye on its own, so it gives back
         40px and the CTA row climbs toward the fold. */
      .sg-hero-media .hero-stage{height:clamp(300px,82vw,320px) !important;}
      /* 64px of that top padding is just clearance for the fixed header */
      #top{padding-top:78px !important;}
      .sg-hero-media{margin-top:4px;}
    }

/* the nav label has two lengths — see the 760px block in theme.css */
    .sg-nav-short{display:none;}