/* ============================================================================
   ShopHatke — "Souled" redesign
   Style: clean minimal streetwear retail — matched to thesouledstore.com's
   real captured tokens (brand red rgb(231,19,24), near-black text, white
   surfaces, Montserrat headings + Source Sans Pro body, sharp/near-square
   corners, no glass/blur effects).
   ========================================================================== */

:root{
  --red:#ED1C24;
  --red-dark:#C4141B;
  --ink:#292B2C;
  --ink-soft:#58595B;
  --ink-faint:#8B8D8F;
  --paper:#FFFFFF;
  --surface:#F5F5F5;
  --line:#E5E5E5;
  --yellow:#F9D923;
  --ok:#1E9E5A;

  --fg:var(--ink);
  --bg:var(--paper);

  --f-head:'Montserrat',system-ui,sans-serif;
  --f-body:'Source Sans Pro',system-ui,sans-serif;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl:1.375rem; --t-2xl:clamp(1.5rem,3vw,2rem); --t-3xl:clamp(2rem,5vw,2.75rem);

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem;

  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-pill:999px;

  --sh-1:0 1px 3px rgba(0,0,0,.08);
  --sh-2:0 4px 14px rgba(0,0,0,.1);
  --sh-3:0 10px 32px rgba(0,0,0,.14);

  --d-fast:150ms; --d-mid:220ms; --d-slow:320ms;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  --nav-h:76px;
  --wrap:1360px;
  --z-hd:100; --z-drw:400; --z-srch:500; --z-toast:600;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#121213; --surface:#1B1B1D; --line:#2C2C2F;
    --ink:#F2F2F2; --ink-soft:#B7B8BA; --ink-faint:#87888B;
    --sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.5); --sh-3:0 10px 32px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 60px)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-base)/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--f-head)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:var(--red);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:0}

/* ── promo strip ─────────────────────────────────────────────────────────── */
.promo{background:var(--red);color:#fff;text-align:center;padding:9px var(--s-4);font-size:var(--t-sm)}
.promo strong{font-weight:700}

/* ── header ──────────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:var(--z-hd);background:var(--paper);border-bottom:1px solid var(--line)}
.hd__in{max-width:var(--wrap);margin:0 auto;height:var(--nav-h);padding:0 var(--s-5);display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:var(--s-5)}
.hd__nav{display:flex;gap:var(--s-5)}
.hd__nav a{font-family:var(--f-head);font-size:var(--t-sm);font-weight:700;letter-spacing:.03em;padding:8px 0;position:relative;transition:color var(--d-fast) linear}
.hd__nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width var(--d-mid) var(--e-out)}
.hd__nav a:hover::after{width:100%}
.hd__logo{display:flex;align-items:center;gap:.5rem;justify-self:center;font-family:'Segoe Script',var(--f-head);font-weight:700;font-size:1.1rem;color:var(--red);white-space:nowrap}
.hd__logo img{width:38px;height:38px;object-fit:contain}
.hd__logo span{display:flex;flex-direction:column;line-height:1.05;font-family:var(--f-head);font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.hd__logo b{color:var(--red);font-size:1rem;font-weight:800}
.hd__search{display:flex;align-items:center;gap:.6rem;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 var(--s-4);height:44px;transition:border-color var(--d-fast) linear,box-shadow var(--d-fast) linear}
.hd__search:focus-within{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent)}
.hd__search svg{width:18px;height:18px;color:var(--ink-faint);flex:none}
.hd__search input{flex:1;border:0;outline:none;background:none;color:var(--fg);font-size:var(--t-sm)}
.hd__mic{width:24px;height:24px;flex:none;color:var(--ink-faint);transition:color var(--d-fast) linear}
.hd__mic:hover{color:var(--red)}
.hd__act{display:flex;align-items:center;gap:2px;justify-self:end}
.hd__burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.hd__burger span{display:block;width:20px;height:2px;background:currentColor;transition:transform var(--d-mid) var(--e-out),opacity var(--d-fast) linear}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ibtn.hd__search-mobile{display:none}

.ibtn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);transition:background var(--d-fast) linear,transform var(--d-fast) var(--e-out)}
.ibtn svg{width:21px;height:21px}
.ibtn:hover{background:var(--surface)}
.ibtn:active{transform:scale(.9)}
.ibtn__dot{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:var(--r-pill);background:var(--red);color:#fff;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;animation:dotIn var(--d-mid) var(--e-spring)}
.ibtn__dot[hidden]{display:none}
@keyframes dotIn{from{transform:scale(0)}}

/* signed-in indicator on the header account icon */
a.ibtn[data-account-link].on{color:var(--red)}
a.ibtn[data-account-link].on::after{content:'';position:absolute;bottom:6px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--ok);border:1.5px solid var(--paper)}

.mnu{position:fixed;inset:var(--nav-h) 0 auto;z-index:calc(var(--z-hd) - 1);background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s-4);max-height:75vh;overflow:auto;animation:mnuIn var(--d-mid) var(--e-out)}
.mnu[hidden]{display:none}
.mnu nav{display:flex;flex-direction:column}
.mnu a{padding:14px 8px;border-bottom:1px solid var(--line);font-family:var(--f-head);font-weight:600;font-size:var(--t-lg);transition:padding-left var(--d-fast) var(--e-out),color var(--d-fast) linear}
.mnu a:hover{padding-left:16px;color:var(--red)}
@keyframes mnuIn{from{opacity:0;transform:translateY(-8px)}}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{background:var(--ink)}
.hero__stage{position:relative;max-width:1800px;margin:0 auto;aspect-ratio:16/7.4;overflow:hidden;background:var(--surface)}
.hero__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--e-out)}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.hero__pill{position:absolute;top:50%;padding:.9rem 2rem;border:2px solid var(--yellow);border-radius:var(--r-sm);color:var(--yellow);font-family:var(--f-head);font-weight:800;font-size:clamp(.95rem,1.6vw,1.4rem);letter-spacing:.04em;background:rgba(10,10,10,.14);transition:background var(--d-fast) linear,transform var(--d-fast) var(--e-out),color var(--d-fast) linear}
.hero__pill--l{left:6%;transform:translateY(-50%)}
.hero__pill--r{right:6%;transform:translateY(-50%)}
.hero__pill:hover{background:var(--yellow);color:var(--ink);transform:translateY(-50%) scale(1.05)}
.hero__pill:active{transform:translateY(-50%) scale(.97)}
.hero__dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px}
.hero__dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:background var(--d-fast) linear,transform var(--d-fast) var(--e-out)}
.hero__dots [aria-selected="true"]{background:#fff;transform:scale(1.3)}

.band{background:var(--red);color:#fff;text-align:center;padding:12px}
.band p{font-family:var(--f-head);font-weight:700;font-size:var(--t-lg);letter-spacing:.06em}
.stat{text-align:center;padding:var(--s-6) var(--s-4);font-family:var(--f-body);font-size:var(--t-2xl);font-weight:400}
.stat b{font-weight:800;font-variant-numeric:tabular-nums}

/* ── category tiles ─────────────────────────────────────────────────────────
   A real category rail, not oversized circles: fixed tile width, horizontal
   scroll on narrow screens (matches how SoulEdStore/most retail sites present
   8-10 categories), portrait image with a controlled focal point so faces
   aren't cropped out. ────────────────────────────────────────────────────── */
.cats{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-5) var(--s-6)}
.cats__grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);
  gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none;
}
.cats__grid::-webkit-scrollbar{display:none}
.cat{display:flex;flex-direction:column;align-items:center;gap:.55rem;scroll-snap-align:start;transition:transform var(--d-mid) var(--e-out)}
.cat:hover{transform:translateY(-3px)}
.cat__img{display:block;width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.cat__img img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .5s var(--e-out)}
.cat:hover .cat__img img{transform:scale(1.08)}
.cat__name{font-family:var(--f-head);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;text-align:center;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── rails ───────────────────────────────────────────────────────────────── */
.rail{max-width:var(--wrap);margin:0 auto;padding:var(--s-6) 0}
.rail__head{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--s-5);margin-bottom:var(--s-4)}
.rail__head h2{font-size:var(--t-xl);font-weight:800;letter-spacing:.01em;text-transform:uppercase}
.rail__all{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-head);font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;color:var(--red)}
.rail__all svg{width:13px;height:13px;transition:transform var(--d-fast) var(--e-out)}
.rail__all:hover svg{transform:translateX(3px)}
.rail__scroller{position:relative}
.rail__track{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px var(--s-5) var(--s-3);scrollbar-width:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__arrow{position:absolute;top:38%;z-index:2;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);transition:background var(--d-fast) linear,transform var(--d-fast) var(--e-out),opacity var(--d-fast) linear}
.rail__arrow svg{width:16px;height:16px}
.rail__arrow:hover{background:var(--ink);color:#fff}
.rail__arrow:active{transform:translateY(-50%) scale(.9)}
.rail__arrow--l{left:6px;transform:translateY(-50%)}
.rail__arrow--r{right:6px;transform:translateY(-50%)}
.rail__arrow[disabled]{opacity:0;pointer-events:none}
.rail--deal{background:var(--surface);max-width:none;padding-block:var(--s-6)}
.rail--deal>*{max-width:var(--wrap);margin-inline:auto}

/* ── product card ────────────────────────────────────────────────────────── */
.pc{width:clamp(168px,21vw,240px);flex:none;scroll-snap-align:start}
.pc__img{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--surface);border-radius:var(--r-sm)}
.pc__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e-out)}
.pc:hover .pc__img img{transform:scale(1.05)}
.pc__off,.pc__new{position:absolute;top:8px;font-size:10px;font-weight:800;letter-spacing:.03em;padding:4px 8px;border-radius:var(--r-xs)}
.pc__off{left:8px;background:var(--red);color:#fff}
.pc__new{right:8px;background:var(--ink);color:#fff}
.pc__wish{position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink-soft);box-shadow:var(--sh-1);opacity:0;transform:translateY(-6px);transition:opacity var(--d-mid) linear,transform var(--d-mid) var(--e-out),color var(--d-fast) linear}
.pc__wish svg{width:16px;height:16px}
.pc:hover .pc__wish,.pc__wish:focus-visible{opacity:1;transform:none}
.pc__new ~ .pc__wish{top:44px}
.pc__wish.on{opacity:1;transform:none;color:var(--red)}
.pc__wish.on svg{fill:currentColor}
.pc__wish.pop{animation:wish .4s var(--e-spring)}
@keyframes wish{0%{transform:scale(1)}35%{transform:scale(1.35)}65%{transform:scale(.9)}100%{transform:scale(1)}}
.pc__add{position:absolute;left:0;right:0;bottom:0;height:38px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0;transform:translateY(100%);transition:opacity var(--d-fast) linear,transform var(--d-mid) var(--e-out)}
.pc:hover .pc__add,.pc__img:focus-visible .pc__add{opacity:1;transform:none}
.pc__add:hover{background:var(--red)}
.pc__meta{padding:var(--s-3) 2px 0}
.pc__name{font-size:var(--t-sm);font-weight:600;line-height:1.35;margin-bottom:.35rem;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pc__price{font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.pc__price b{font-weight:700}
.pc__price s{color:var(--ink-faint);font-weight:400}
.pc__price i{color:var(--ok);font-style:normal;font-weight:600;font-size:var(--t-xs)}

/* ── mid banner ──────────────────────────────────────────────────────────── */
.mid{max-width:var(--wrap);margin:var(--s-6) auto;padding:0 var(--s-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.mid__card{position:relative;aspect-ratio:4/3.6;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1)}
.mid__card img{width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform .6s var(--e-out)}
.mid__card:hover img{transform:scale(1.06)}
.mid__label{position:absolute;left:var(--s-4);bottom:var(--s-4);background:#fff;color:var(--ink);font-family:var(--f-head);font-weight:800;font-size:var(--t-lg);padding:.5rem 1.1rem;border-radius:var(--r-xs);text-transform:uppercase;letter-spacing:.02em}

/* ── trust ───────────────────────────────────────────────────────────────── */
.trust{max-width:var(--wrap);margin:var(--s-7) auto;padding:var(--s-6) var(--s-5);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__i{text-align:center}
.trust__i svg{width:30px;height:30px;color:var(--red);margin-bottom:var(--s-3)}
.trust__i h3{font-size:var(--t-base);font-weight:700;margin-bottom:.3rem;font-family:var(--f-head)}
.trust__i p{font-size:var(--t-sm);color:var(--ink-faint)}

/* ── newsletter ──────────────────────────────────────────────────────────── */
.news{max-width:640px;margin:0 auto;padding:var(--s-7) var(--s-5);text-align:center}
.news h2{font-size:var(--t-2xl);font-weight:800;margin-bottom:var(--s-3);text-transform:uppercase}
.news>p{color:var(--ink-faint);margin-bottom:var(--s-5)}
.news__form{display:flex;flex-wrap:wrap;gap:0;max-width:460px;margin:0 auto}
.news__form input{flex:1;height:50px;padding:0 1rem;border:1.5px solid var(--line);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--paper);color:var(--fg);font-size:var(--t-base)}
.news__form input:focus{outline:none;border-color:var(--red)}
.news__form input[aria-invalid="true"]{border-color:var(--red)}
.news__err{width:100%;min-height:1.2rem;margin-top:8px;font-size:var(--t-xs);color:var(--red);text-align:left}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:700;letter-spacing:.03em;font-size:var(--t-sm);transition:background var(--d-fast) linear,transform var(--d-fast) var(--e-out)}
.btn--solid{background:var(--ink);color:#fff;height:50px;padding:0 1.6rem;border-radius:0 var(--r-sm) var(--r-sm) 0}
.btn--solid:hover{background:var(--red)}
.btn--solid:active{transform:scale(.98)}
.btn--full{width:100%;border-radius:var(--r-sm)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.ft{background:var(--surface);border-top:1px solid var(--line);margin-top:var(--s-7)}
.ft__top{max-width:var(--wrap);margin:0 auto;padding:var(--s-7) var(--s-5);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.ft__col h3{font-size:var(--t-sm);font-weight:800;color:var(--red);letter-spacing:.03em;margin-bottom:var(--s-4)}
.ft__col li{margin-bottom:.7rem}
.ft__col a{font-size:var(--t-sm);color:var(--ink-soft);transition:color var(--d-fast) linear}
.ft__col a:hover{color:var(--red)}
.ft__mid{border-top:1px solid var(--line);padding:var(--s-4) var(--s-5);max-width:var(--wrap);margin:0 auto}
.ft__social{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-sm)}
.soc{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:background var(--d-fast) linear,transform var(--d-fast) var(--e-out)}
.soc svg{width:16px;height:16px}
.soc:hover{background:var(--red);transform:translateY(-2px)}
.ft__bot{border-top:1px solid var(--line);padding:var(--s-4) var(--s-5);max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);font-size:var(--t-xs);color:var(--ink-faint)}
.ft__bot ul{display:flex;gap:var(--s-4)}
.ft__bot a:hover{color:var(--red)}

/* ── drawer ──────────────────────────────────────────────────────────────── */
.drw[hidden],.srch[hidden],.mnu[hidden]{display:none}
.drw{position:fixed;inset:0;z-index:var(--z-drw)}
.drw__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity var(--d-slow) linear}
.drw.in .drw__scrim{opacity:1}
.drw__panel{position:absolute;top:0;right:0;height:100%;width:min(410px,100%);display:flex;flex-direction:column;background:var(--paper);box-shadow:var(--sh-3);transform:translateX(100%);transition:transform var(--d-slow) var(--e-out)}
.drw.in .drw__panel{transform:none}
.drw__head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.drw__head h2{font-size:var(--t-lg);font-weight:800}
.drw__head span{color:var(--ink-faint);font-weight:400;font-size:var(--t-sm)}
.drw__ship{padding:var(--s-4) var(--s-5) var(--s-3);font-size:var(--t-sm)}
.drw__ship p{margin-bottom:8px;color:var(--ink-soft)}
.drw__ship b{color:var(--fg);font-weight:700}
.drw__bar{height:4px;border-radius:2px;background:var(--surface);overflow:hidden}
.drw__bar i{display:block;height:100%;width:0;background:var(--ok);transition:width var(--d-slow) var(--e-out)}
.drw__body{flex:1;overflow-y:auto;padding:var(--s-3) var(--s-5)}
.drw__empty{display:grid;place-items:center;gap:.4rem;padding:var(--s-8) 0;text-align:center;color:var(--ink-faint)}
.drw__empty svg{width:44px;height:44px;opacity:.4}
.drw__empty p{font-weight:700;color:var(--fg)}
.drw__empty span{font-size:var(--t-sm)}
.ci{display:grid;grid-template-columns:66px 1fr;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line);animation:ciIn var(--d-slow) var(--e-out)}
@keyframes ciIn{from{opacity:0;transform:translateX(16px)}}
.ci img{width:66px;height:86px;object-fit:cover;border-radius:var(--r-xs);background:var(--surface)}
.ci__n{font-size:var(--t-sm);font-weight:600;line-height:1.35;margin-bottom:2px}
.ci__size{font-size:var(--t-xs);color:var(--ink-faint);margin-bottom:2px}
.ci__size b{color:var(--fg);font-weight:600}
.ci__p{font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums}
.ci__row{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-3)}
.ci__q{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--r-pill);padding:2px}
.ci__q button{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-pill);font-size:1rem;transition:background var(--d-fast) linear}
.ci__q button:hover{background:var(--surface)}
.ci__q span{min-width:24px;text-align:center;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.ci__rm{font-size:var(--t-xs);color:var(--ink-faint);text-decoration:underline;transition:color var(--d-fast) linear}
.ci__rm:hover{color:var(--red)}
.drw__foot{padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);background:var(--paper)}
.drw__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s-3)}
.drw__sum b{font-size:var(--t-lg);font-weight:800;font-variant-numeric:tabular-nums}
.drw__foot .btn--solid{border-radius:var(--r-sm)}

/* ── search overlay ──────────────────────────────────────────────────────── */
.srch{position:fixed;inset:0;z-index:var(--z-srch)}
.srch__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity var(--d-mid) linear}
.srch.in .srch__scrim{opacity:1}
.srch__box{position:relative;max-width:640px;margin:9vh auto 0;background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-3);overflow:hidden;opacity:0;transform:translateY(-14px);transition:opacity var(--d-mid) linear,transform var(--d-mid) var(--e-out)}
.srch.in .srch__box{opacity:1;transform:none}
.srch__in{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.srch__in>svg{width:20px;height:20px;color:var(--ink-faint);flex:none}
.srch__in input{flex:1;border:0;outline:none;background:none;color:var(--fg);font-size:var(--t-lg)}
.srch__res{max-height:52vh;overflow-y:auto;padding:var(--s-2)}
.sr{display:grid;grid-template-columns:46px 1fr auto;gap:var(--s-3);align-items:center;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);transition:background var(--d-fast) linear}
.sr:hover{background:var(--surface)}
.sr img{width:46px;height:58px;object-fit:cover;border-radius:4px;background:var(--surface)}
.sr__n{font-size:var(--t-sm);font-weight:600}
.sr__c{font-size:var(--t-xs);color:var(--ink-faint)}
.sr__p{font-weight:700;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.srch__none{padding:var(--s-6);text-align:center;color:var(--ink-faint);font-size:var(--t-sm)}

/* ── size select modal ─────────────────────────────────────────────────────
   Opens on every "Add to Bag" / quick-add click — an item never enters the
   cart without a size chosen first. ────────────────────────────────────── */
.szm[hidden]{display:none}
.szm{position:fixed;inset:0;z-index:var(--z-srch)}
.szm__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity var(--d-mid) linear}
.szm.in .szm__scrim{opacity:1}
.szm__box{position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);width:min(420px,100%);background:var(--paper);border-radius:var(--r-md) var(--r-md) 0 0;padding:var(--s-5);box-shadow:var(--sh-3);transition:transform var(--d-slow) var(--e-out)}
.szm.in .szm__box{transform:translate(-50%,0)}
.szm__x{position:absolute;top:10px;right:10px}
.szm__prod{display:flex;gap:var(--s-3);align-items:center;margin-bottom:var(--s-4);padding-right:36px}
.szm__prod img{width:60px;height:78px;object-fit:cover;border-radius:var(--r-xs);background:var(--surface)}
.szm__name{font-size:var(--t-sm);font-weight:600;line-height:1.3;margin-bottom:2px}
.szm__price{font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums}
.szm__label{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:var(--s-3)}
.szm__sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:var(--s-2)}
.szm__size{height:44px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:var(--f-head);font-weight:700;font-size:var(--t-sm);transition:border-color var(--d-fast) linear,background var(--d-fast) linear,color var(--d-fast) linear,transform var(--d-fast) var(--e-out)}
.szm__size:hover{border-color:var(--ink)}
.szm__size[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.szm__size:active{transform:scale(.94)}
.szm__err{min-height:1.2rem;font-size:var(--t-xs);color:var(--red);margin-bottom:var(--s-2)}
.szm__box .btn--full{margin-top:6px}
@media (min-width:520px){
  .szm__box{left:50%;top:50%;bottom:auto;transform:translate(-50%,-46%);border-radius:var(--r-md);opacity:0;transition:opacity var(--d-mid) linear,transform var(--d-slow) var(--e-out)}
  .szm.in .szm__box{transform:translate(-50%,-50%);opacity:1}
}

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:26px;z-index:var(--z-toast);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;box-shadow:var(--sh-2);transition:opacity var(--d-mid) linear,transform var(--d-mid) var(--e-out)}
.toast.in{opacity:1;transform:translate(-50%,0)}

/* ── reveal ──────────────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
[data-reveal].in{opacity:1;transform:none}

/* ── responsive ────────────────────────────────────────────────────────────
   Seven checkpoints, mobile-first cascade (each media query narrows further
   down from the desktop base defined above):
     ≤1550  large desktop / wrap starts shrinking
     ≤1190  small desktop / laptop
     ≤920   tablet landscape
     ≤720   tablet portrait / phablet
     ≤620   large phone
     ≤420   standard phone
     ≤320   smallest phones
   ────────────────────────────────────────────────────────────────────────── */

/* ≤1550px — wrap can no longer sit at full max-width with side margins */
@media (max-width:1550px){
  :root{--wrap:calc(100% - 64px)}
}

/* ≤1190px — laptop: still a full desktop nav, slightly denser */
@media (max-width:1190px){
  :root{--wrap:calc(100% - 48px)}
  .hd__in{gap:var(--s-4)}
  .hero__pill{font-size:1.05rem;padding:.75rem 1.6rem}
  .ft__top{grid-template-columns:1.4fr 1fr 1fr 1fr}
}

/* ≤920px — tablet landscape: nav still fits, tighten grids */
@media (max-width:920px){
  :root{--wrap:calc(100% - 32px);--nav-h:68px}
  .hd__nav{gap:var(--s-4)}
  .hd__search{max-width:280px}
  .cats__grid{grid-auto-columns:minmax(96px,1fr)}
  .pc{width:clamp(150px,26vw,210px)}
  .trust{grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
  .ft__top{grid-template-columns:1fr 1fr;gap:var(--s-5)}
}

/* ≤720px — switch to the mobile chrome: burger nav, icon-only search trigger */
@media (max-width:720px){
  :root{--nav-h:60px}
  .promo{font-size:12px;padding:8px var(--s-3)}
  .promo p{display:flex;flex-direction:column;gap:1px}
  .hd__in{grid-template-columns:auto 1fr auto;padding:0 var(--s-3);gap:var(--s-2)}
  .hd__nav,.hd__search{display:none}
  .hd__burger{display:flex}
  .ibtn.hd__search-mobile{display:grid}
  .hd__logo{gap:.4rem}
  .hd__logo span{display:none}
  .hd__logo img{width:32px;height:32px}
  .hero__stage{aspect-ratio:3/4}
  .hero__pill{padding:.55rem 1.1rem;font-size:.8rem;border-width:1.5px}
  .band p{font-size:var(--t-base)}
  .stat{font-size:var(--t-lg);padding:var(--s-5) var(--s-3)}
  .cats{padding-inline:var(--s-3)}
  .cats__grid{grid-auto-columns:minmax(88px,1fr);gap:var(--s-2)}
  .cat__name{font-size:10px}
  .rail__head{padding-inline:var(--s-3)}
  .rail__track{padding-inline:var(--s-3)}
  .rail__head h2{font-size:var(--t-base)}
  .rail__arrow{width:34px;height:34px}
  .mid{grid-template-columns:1fr;padding-inline:var(--s-3);gap:var(--s-3)}
  .trust{grid-template-columns:1fr 1fr;padding-inline:var(--s-3);gap:var(--s-4)}
  .ft__top{grid-template-columns:1fr 1fr;padding-inline:var(--s-3);gap:var(--s-4)}
  .ft__bot{flex-direction:column;align-items:flex-start;padding-inline:var(--s-3)}
  .news{padding-inline:var(--s-3)}
  .drw__panel{width:100%}
  .srch__box{margin:0;border-radius:0;height:100%;max-width:none}
  .srch__res{max-height:calc(100% - 76px)}
}

/* ≤620px — large phones: single-column footer starts, denser cards */
@media (max-width:620px){
  .pc{width:clamp(132px,42vw,178px)}
  .pc__name{font-size:13px}
  .trust__i svg{width:26px;height:26px}
  .trust__i h3{font-size:var(--t-sm)}
  .trust__i p{font-size:12px}
}

/* ≤420px — standard phones */
@media (max-width:420px){
  .promo p{font-size:11px}
  .hero__pill--l{left:4%}
  .hero__pill--r{right:4%}
  .hero__pill{font-size:.72rem;padding:.45rem .85rem}
  .stat{font-size:var(--t-base)}
  .cats__grid{grid-auto-columns:minmax(78px,1fr)}
  .cat__name{font-size:9.5px}
  .pc{width:clamp(122px,40vw,160px)}
  .rail__arrow--l{left:2px}
  .rail__arrow--r{right:2px}
  .ft__top{grid-template-columns:1fr;gap:var(--s-5)}
  .news__form{flex-direction:column}
  .news__form input{border-right:1.5px solid var(--line);border-radius:var(--r-sm)}
  .news__form .btn--solid{border-radius:var(--r-sm);width:100%;margin-top:8px}
  .szm__sizes{grid-template-columns:repeat(3,1fr)}
}

/* ≤320px — smallest phones: everything at its tightest */
@media (max-width:320px){
  .hd__in{padding-inline:10px}
  .hd__logo img{width:28px;height:28px}
  .ibtn{width:38px;height:38px}
  .ibtn svg{width:18px;height:18px}
  .hero__pill{font-size:.62rem;padding:.35rem .65rem;letter-spacing:.02em}
  .band p{font-size:.85rem}
  .stat{font-size:.9rem;padding:var(--s-4) var(--s-2)}
  .cats{padding-inline:10px}
  .cats__grid{grid-auto-columns:minmax(70px,1fr);gap:6px}
  .cat__name{font-size:8.5px}
  .rail__head,.rail__track{padding-inline:10px}
  .rail__head h2{font-size:13px}
  .pc{width:132px}
  .pc__name{font-size:12px}
  .mid{padding-inline:10px}
  .mid__label{font-size:13px;padding:.4rem .8rem}
  .trust{padding-inline:10px;gap:var(--s-3)}
  .news{padding-inline:10px}
  .ft__top{padding-inline:10px}
  .ft__bot{padding-inline:10px}
  .szm__sizes{grid-template-columns:repeat(3,1fr);gap:6px}
  .szm__size{height:40px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}