/* ═══════════════════════════════════════════════════════
   VAYU — Himalayan sport gear
   Palette from reference: SW6965 Hyper Blue · SW6795 Major Blue
   · SW7006 Extra White · petal yellow · sage grey
   Mobile-first. No build step.
   ═══════════════════════════════════════════════════════ */

:root{
  --blue:#0E5FA8;        /* SW6965 Hyper Blue   */
  --blue-d:#08406F;
  --blue-l:#4E9DC6;      /* SW6795 Major Blue   */
  --blue-p:#A8D2E8;
  --white:#F7F7F5;       /* SW7006 Extra White  */
  --paper:#FFFFFF;
  --yellow:#FFD200;
  --yellow-s:#FFE87A;
  --sage:#C3D2D0;
  --grey:#B9C0C2;
  --ink:#0B2438;
  --ink-2:#4A6377;

  --r-sm:10px; --r:18px; --r-lg:28px; --r-xl:40px;
  --pad:20px;
  --max:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 2px 4px rgba(11,36,56,.04), 0 12px 28px -12px rgba(11,36,56,.18);
  --shadow-lg:0 4px 8px rgba(11,36,56,.05), 0 28px 60px -20px rgba(11,36,56,.28);
  --font:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* class rules like `.cart{display:flex}` outrank the UA's [hidden] rule,
   so the hidden attribute needs teeth. */
[hidden]{ display:none !important; }
/* overflow-x:clip — NOT hidden. `hidden` makes the element a scroll
   container, which kills position:sticky on the header. `clip` does not. */
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  overflow-x:clip;
}
html.locked{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3{ margin:0; line-height:1.05; letter-spacing:-.02em; font-weight:800; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.sronly{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:0; z-index:200; background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-sm) 0; }
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; border-radius:6px; }

/* ── ticker ─────────────────────────────────────────── */
.ticker{
  background:var(--blue); color:#fff; overflow:hidden;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.ticker__track{
  display:flex; align-items:center; gap:22px; white-space:nowrap;
  padding:9px 0; width:max-content;
  animation:slide 34s linear infinite;
}
.ticker .dot{ width:5px; height:5px; border-radius:50%; background:var(--yellow); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── header ─────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(247,247,245,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:rgba(11,36,56,.10); background:rgba(247,247,245,.94); }
.hdr__in{ display:flex; align-items:center; gap:14px; height:64px; }

.logo{ display:flex; align-items:center; gap:9px; margin-right:auto; }
.logo__mark{ width:32px; height:32px; flex:none; }
.logo__mark .logo__petals path{ transform-origin:20px 20px; }
.logo:hover .logo__mark{ transform:rotate(36deg); }
.logo__mark{ transition:transform .55s var(--ease); }
.logo__word{
  font-family:var(--serif); font-weight:800; font-size:22px;
  letter-spacing:.16em; color:var(--blue-d);
}

.nav{ display:none; gap:26px; font-weight:600; font-size:15px; }
.nav a{ position:relative; padding:6px 0; color:var(--ink-2); }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--yellow); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

.hdr__act{ display:flex; align-items:center; gap:4px; }
.icobtn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink); transition:background .2s var(--ease), transform .2s var(--ease);
}
.icobtn:hover{ background:rgba(14,95,168,.09); }
.icobtn:active{ transform:scale(.92); }
.icobtn svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cartbtn{ position:relative; }
.badge{
  position:absolute; top:2px; right:1px; min-width:19px; height:19px; padding:0 5px;
  border-radius:99px; background:var(--yellow); color:var(--ink);
  font-size:11px; font-weight:800; display:grid; place-items:center;
  border:2px solid var(--white); transition:transform .25s var(--ease);
}
.badge[data-empty="true"]{ transform:scale(0); }
.badge.pop{ animation:pop .4s var(--ease); }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.45)} 100%{transform:scale(1)} }

.burger{ flex-direction:column; gap:4px; display:flex; align-items:center; justify-content:center; }
.burger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mnav{
  display:flex; flex-direction:column; gap:2px;
  padding:8px var(--pad) 20px; border-top:1px solid rgba(11,36,56,.08);
  background:var(--white);
  animation:drop .3s var(--ease);
}
@keyframes drop{ from{ opacity:0; transform:translateY(-8px);} }
.mnav a{ padding:13px 4px; font-size:19px; font-weight:700; border-bottom:1px solid rgba(11,36,56,.06); }
.mnav__cta{ margin-top:12px; border:0 !important; color:var(--blue); }

/* ── hero ───────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; background:var(--white); isolation:isolate; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(168,210,232,.55), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(195,210,208,.5), transparent 55%);
}
.hero__art{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero__art svg{ position:absolute; overflow:visible; }
.hero__in{ padding:46px 20px 56px; position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid rgba(11,36,56,.09);
  padding:7px 14px 7px 10px; border-radius:99px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-d); box-shadow:var(--shadow);
}
.pip{ width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(255,210,0,.28); animation:pulse 2.4s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(255,210,0,0);} }

.hero__h1{
  margin:20px 0 0;
  font-family:var(--serif);
  font-size:clamp(40px, 12.5vw, 78px);
  font-weight:800; letter-spacing:-.035em;
  color:var(--blue-d);
}
.hero__h1 em{
  font-style:italic; color:var(--blue);
  background:linear-gradient(transparent 66%, var(--yellow-s) 0);
  padding-inline:2px;
}
.hero__p{ margin-top:18px; max-width:44ch; font-size:17px; color:var(--ink-2); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border-radius:99px;
  font-weight:700; font-size:15.5px; letter-spacing:.01em;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn--pri{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(14,95,168,.85); }
.btn--pri:hover{ background:var(--blue-d); box-shadow:0 16px 32px -12px rgba(14,95,168,.9); }
.btn--gho{ background:var(--paper); color:var(--blue-d); box-shadow:inset 0 0 0 1.5px rgba(11,36,56,.14); }
.btn--gho:hover{ box-shadow:inset 0 0 0 1.5px var(--blue); }
.btn--full{ width:100%; }

.hero__stats{
  list-style:none; margin:34px 0 0; padding:0;
  display:flex; gap:10px; flex-wrap:wrap;
}
.hero__stats li{
  flex:1 1 92px; background:var(--paper); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.hero__stats b{ font-family:var(--serif); font-size:26px; color:var(--blue); line-height:1; }
.hero__stats span{ font-size:12px; color:var(--ink-2); margin-top:4px; }

/* ── section heads ──────────────────────────────────── */
.sec__head{ padding:52px 0 22px; }
.sec__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sec__h2{ font-family:var(--serif); font-size:clamp(28px,7.5vw,46px); color:var(--blue-d); }
.sec__sub{ margin-top:8px; color:var(--ink-2); font-size:15px; }

/* ── categories rail ────────────────────────────────── */
.cats__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px var(--pad) 26px; margin-inline:calc(var(--pad) * -1);
  scrollbar-width:none;
}
.cats__rail::-webkit-scrollbar{ display:none; }
.cat{
  scroll-snap-align:center; position:relative; overflow:hidden;
  border-radius:var(--r-lg); min-height:210px; padding:20px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.cat__bg{ position:absolute; inset:0; z-index:-1; }
.cat h3{ font-family:var(--serif); font-size:27px; }
.cat p{ font-size:13.5px; opacity:.92; margin-top:4px; }
.cat__n{
  position:absolute; top:16px; right:18px; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.22); backdrop-filter:blur(6px);
  padding:5px 11px; border-radius:99px;
}

/* ── chips ──────────────────────────────────────────── */
.chips{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:18px;
  margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; height:40px; padding:0 17px; border-radius:99px;
  background:var(--paper); box-shadow:inset 0 0 0 1.5px rgba(11,36,56,.10);
  font-weight:600; font-size:14px; color:var(--ink-2); white-space:nowrap;
  transition:all .22s var(--ease);
}
.chip:hover{ box-shadow:inset 0 0 0 1.5px var(--blue-l); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--blue); color:#fff; box-shadow:0 8px 18px -8px rgba(14,95,168,.9); }

.sortwrap{ position:relative; }
.sortwrap::after{
  content:""; position:absolute; right:16px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
#sort{
  appearance:none; height:44px; padding:0 40px 0 16px; border-radius:99px;
  background:var(--paper); border:1.5px solid rgba(11,36,56,.10);
  font-weight:600; font-size:14px;
}

/* ── product grid ───────────────────────────────────── */
.grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  padding-bottom:20px;
}
.card{
  background:var(--paper); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:rise .5s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.card__media svg{ position:absolute; inset:0; width:100%; height:100%; }
.card__glyph{ transition:transform .5s var(--ease); }
.card:hover .card__glyph{ transform:scale(1.07) rotate(-3deg); }
.tag{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 9px; border-radius:99px; background:var(--yellow); color:var(--ink);
}
.tag--sale{ background:var(--ink); color:#fff; }
.card__body{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:3px; flex:1; }
.card__cat{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-l); }
.card__name{ font-size:15px; font-weight:700; line-height:1.25; }
.card__rate{ font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:4px; }
.star{ color:var(--yellow); }
.card__foot{ margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px; }
.price{ font-family:var(--serif); font-weight:800; font-size:17px; color:var(--blue-d); }
.price s{ font-family:var(--font); font-size:12.5px; color:var(--grey); font-weight:600; margin-left:5px; }
.add{
  margin-left:auto; width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  transition:transform .2s var(--ease), background .2s;
}
.add svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.add:hover{ background:var(--blue-d); transform:rotate(90deg) scale(1.06); }
.add.done{ background:#1E9E62; }

/* ── story strip ────────────────────────────────────── */
.strip{ position:relative; margin-top:36px; background:var(--blue-d); color:#fff; overflow:hidden; }
.strip__art{
  position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(60% 60% at 12% 18%, rgba(78,157,198,.75), transparent 62%),
    radial-gradient(52% 52% at 88% 82%, rgba(255,210,0,.30), transparent 60%);
}
.strip__in{ position:relative; padding:58px 20px 62px; }
.strip__h2{ font-family:var(--serif); font-size:clamp(28px,8vw,48px); max-width:16ch; }
.strip p{ margin-top:16px; max-width:52ch; color:rgba(255,255,255,.82); font-size:16px; }
.strip__grid{ display:grid; gap:12px; margin-top:30px; }
.strip__grid > div{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:3px;
  backdrop-filter:blur(6px);
}
.strip__grid b{ font-size:16px; }
.strip__grid span{ font-size:13.5px; color:rgba(255,255,255,.72); }

/* ── journal ────────────────────────────────────────── */
.jrnl__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:80%;
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px var(--pad) 30px; margin-inline:calc(var(--pad) * -1);
  scrollbar-width:none;
}
.jrnl__rail::-webkit-scrollbar{ display:none; }
.post{
  scroll-snap-align:center; background:var(--paper); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.post__media{ aspect-ratio:16/10; position:relative; }
.post__media svg{ position:absolute; inset:0; width:100%; height:100%; }
.post__body{ padding:16px 18px 20px; }
.post__kick{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-l); }
.post h3{ font-family:var(--serif); font-size:20px; margin-top:6px; }
.post p{ font-size:14px; color:var(--ink-2); margin-top:7px; }

/* ── newsletter ─────────────────────────────────────── */
.news{ padding:10px 0 64px; }
.news__in{
  position:relative; overflow:hidden;
  background:var(--paper); border-radius:var(--r-xl);
  padding:44px 24px 40px; box-shadow:var(--shadow-lg); text-align:center;
}
.news__art{
  position:absolute; inset:0; opacity:.85;
  background:
    radial-gradient(46% 46% at 0% 0%, rgba(168,210,232,.7), transparent 62%),
    radial-gradient(40% 40% at 100% 100%, rgba(255,210,0,.35), transparent 62%);
}
.news h2, .news p, .news__form{ position:relative; }
.news h2{ font-family:var(--serif); font-size:clamp(26px,7vw,40px); color:var(--blue-d); }
.news > .wrap > p, .news p{ margin-top:10px; color:var(--ink-2); }
.news__form{ margin-top:22px; display:flex; flex-direction:column; gap:9px; max-width:440px; margin-inline:auto; }
.news__form input{
  height:52px; padding:0 20px; border-radius:99px;
  border:1.5px solid rgba(11,36,56,.14); background:var(--white);
}
.news__form input:focus{ border-color:var(--blue); outline:none; }
.news__msg{ min-height:20px; font-size:13.5px; font-weight:600; color:#1E9E62; }
.news__msg[data-err="true"]{ color:#C2374B; }

/* ── footer ─────────────────────────────────────────── */
.ftr{ background:var(--ink); color:rgba(255,255,255,.72); padding-top:46px; }
.ftr__in{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 20px; }
.ftr__brand{ grid-column:1/-1; }
.ftr__brand .logo__word{ color:#fff; }
.ftr__brand p{ margin-top:10px; font-size:14px; max-width:34ch; }
.ftr h3{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:12px; }
.ftr nav{ display:flex; flex-direction:column; gap:9px; font-size:14.5px; }
.ftr nav a:hover{ color:var(--yellow); }
.ftr__base{
  margin-top:40px; padding-block:20px; display:flex; flex-wrap:wrap; gap:8px;
  justify-content:space-between; font-size:12.5px;
  border-top:1px solid rgba(255,255,255,.12);
}

/* ── cart drawer ────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; z-index:80; background:rgba(8,32,52,.5);
  backdrop-filter:blur(3px); animation:fade .3s var(--ease);
}
@keyframes fade{ from{ opacity:0; } }
.cart{
  position:fixed; z-index:90; background:var(--white);
  display:flex; flex-direction:column;
  inset:auto 0 0 0; max-height:88vh; border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -20px 60px -20px rgba(8,32,52,.5);
  animation:up .38s var(--ease);
}
@keyframes up{ from{ transform:translateY(100%); } }
.cart__hd{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 12px; border-bottom:1px solid rgba(11,36,56,.08);
}
.cart__hd::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:44px; height:4px; border-radius:99px; background:rgba(11,36,56,.16);
}
.cart__hd h2{ font-family:var(--serif); font-size:22px; color:var(--blue-d); }
.cart__body{ flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.citem{ display:flex; gap:10px; align-items:center; }
.citem__rm{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-2);
  transition:background .2s var(--ease), color .2s;
}
.citem__rm svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.citem__rm:hover{ background:rgba(194,55,75,.12); color:#C2374B; }
.cart__clear{
  align-self:center; margin-top:4px; font-size:13px; font-weight:600;
  color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;
}
.cart__clear:hover{ color:#C2374B; }
.citem__img{ width:64px; height:64px; border-radius:14px; overflow:hidden; flex:none; position:relative; }
.citem__img svg{ position:absolute; inset:0; width:100%; height:100%; }
.citem__nm{ font-size:14px; font-weight:700; line-height:1.3; }
.citem__pr{ font-size:13px; color:var(--ink-2); margin-top:2px; }
.qty{ margin-left:auto; display:flex; align-items:center; gap:2px; background:var(--paper); border-radius:99px; box-shadow:inset 0 0 0 1.5px rgba(11,36,56,.1); }
.qty button{ width:30px; height:32px; font-size:16px; font-weight:700; color:var(--blue-d); border-radius:99px; }
.qty button:hover{ background:rgba(14,95,168,.09); }
.qty span{ min-width:20px; text-align:center; font-weight:700; font-size:14px; }
.cart__empty{ text-align:center; padding:44px 20px; color:var(--ink-2); }
.cart__empty b{ display:block; font-family:var(--serif); font-size:20px; color:var(--blue-d); margin-bottom:6px; }
.cart__ft{ padding:16px 18px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid rgba(11,36,56,.08); background:var(--paper); }
.cart__row{ display:flex; justify-content:space-between; align-items:baseline; }
.cart__row b{ font-family:var(--serif); font-size:22px; color:var(--blue-d); }
.cart__note{ font-size:12.5px; color:var(--ink-2); margin:6px 0 12px; }

/* ── toast ──────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%);
  z-index:120; background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:99px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-lg); transition:transform .4s var(--ease);
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.show{ transform:translate(-50%,0); }

/* ═══ tablet ════════════════════════════════════════ */
@media (min-width:640px){
  :root{ --pad:28px; }
  .grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .cats__rail{ grid-auto-columns:46%; }
  .jrnl__rail{ grid-auto-columns:52%; }
  .strip__grid{ grid-template-columns:repeat(3,1fr); }
  .ftr__in{ grid-template-columns:repeat(4,1fr); }
  .ftr__brand{ grid-column:auto; }
  .news__form{ flex-direction:row; }
  .news__form input{ flex:1; }
  .news__msg{ position:absolute; bottom:-26px; left:0; right:0; }
  .hero__in{ padding:64px 28px 74px; }
}

/* ═══ desktop ═══════════════════════════════════════ */
@media (min-width:980px){
  :root{ --pad:32px; }
  .nav{ display:flex; }
  .burger{ display:none; }
  .hdr__in{ height:74px; }
  .hero__in{ padding:82px 32px 96px; max-width:var(--max); }
  .hero__h1{ font-size:clamp(58px,6.2vw,86px); }
  .hero__p{ font-size:18.5px; }
  .hero__stats{ max-width:520px; }
  .grid{ grid-template-columns:repeat(4,1fr); gap:18px; }
  .cats__rail{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; margin-inline:0; padding-inline:0; }
  .jrnl__rail{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; margin-inline:0; padding-inline:0; }
  .cat{ min-height:270px; }
  .card__name{ font-size:16px; }
  .strip__in{ padding:88px 32px 92px; }
  .news__in{ padding:64px 40px 58px; }
  .cart{
    inset:0 0 0 auto; width:420px; max-height:none;
    border-radius:var(--r-xl) 0 0 var(--r-xl);
    animation:slidein .38s var(--ease);
  }
  @keyframes slidein{ from{ transform:translateX(100%);} }
  .cart__hd::before{ display:none; }
}