/* ============================================================
   SELF-HOSTED FONTS
   Served from /fonts instead of Google Fonts: one less third-party
   dependency, no render-blocking cross-origin request, works offline,
   and no visitor data leaves the site to load type. Two variable fonts (~140 KB, latin only): Archivo for headlines, Inter for everything else.
   ============================================================ */
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;}

/* ============================================================
   ZYVRO — "TRUE MONO"
   Brand Book 02: true Black / White / Grey, high-contrast streetwear
   palette (Essentials / Off-White territory) — replaces the earlier warm
   Asphalt/Bone book. Signal Red kept, but now only on badges, sale/
   low-stock accents and the odd underline; never a background or headline
   color, same restraint as before.
   Type: Archivo (expanded, display) + Inter (body / UI).
   ============================================================ */

:root{
  /* surfaces — true black / white, high contrast */
  --ink:#0A0A0A;
  --ink-2:#1A1A1A;
  --bone:#FFFFFF;
  --bone-2:#F2F2F0;
  --bone-3:#E6E5E2;
  --concrete:#6B6B68;         /* kept readable as body/meta text — the
                                  paler --surface-concrete reads as a surface
                                  tone, not body copy */
  --surface-concrete:#A8A8A5;
  --graphite:#2B2B29;

  /* brand atmosphere — used sparingly: dividers, the manifesto section,
     the odd background wash. Not for body text (contrast). Olive/Steel
     repurposed as two neutral greys so the palette stays monochrome. */
  --olive:#5C5C59;
  --steel:#86827c;

  /* the one signal color — badges, sale/low-stock accents, underlines.
     Never a headline, never a background field. */
  --accent:#C8281E;
  --accent-dark:#A32019;

  /* legacy aliases — admin.html still references these */
  --voltage:var(--accent);
  --voltage-dim:var(--accent-dark);
  --hazard:#E3C700;

  --line:rgba(10,10,10,0.14);
  --line-strong:rgba(10,10,10,0.30);
  --line-ink:rgba(255,255,255,0.18);

  --radius:12px;           /* buttons, inputs, chips — smooth curved corners */
  --card-radius:16px;
  --shadow:0 18px 44px rgba(17,18,17,0.16);

  /* Archivo (expanded width) for headlines, Inter for body and UI labels —
     both self-hosted variable fonts, see @font-face above. --mono is the
     label/meta face (codes, eyebrows, buttons); it is Inter now, with
     tabular numerals so prices and SKUs still line up. */
  --display:'Archivo','Inter',system-ui,sans-serif;
  --display-weight:800;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --nav-h:72px;
  --tick-h:34px;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* The browser's own [hidden] style is the lowest-priority UA rule, so any
   class on the same element that sets `display` (e.g. .btn, .catcard__label)
   silently overrides it and the "hidden" element still renders as an empty
   box. This guarantees hidden always wins, site-wide. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  background:var(--bone); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  /* clip (not hidden) so the sticky header keeps working */
  overflow-x:clip;
}
body.no-scroll{overflow:hidden;}
img,svg,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
ul,ol{list-style:none;}

h1,h2,h3{font-family:var(--display); font-weight:var(--display-weight); font-stretch:110%; letter-spacing:-0.012em; line-height:1.12; text-wrap:balance;}
h1{font-size:clamp(28px,4.2vw,46px); text-transform:uppercase;}
h2{font-size:clamp(21px,2.6vw,30px); text-transform:uppercase;}
h3{font-size:clamp(16px,1.5vw,19px);}

.wrap{max-width:1280px; margin:0 auto; padding:0 clamp(18px,4vw,40px);}
.view{display:none;}
.view.active{display:block;}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.skip-link{position:absolute; left:8px; top:-60px; z-index:200; background:var(--ink); color:var(--bone); padding:10px 16px; font-weight:600; font-size:13px; transition:top .15s;}
.skip-link:focus{top:8px;}
.muted{color:var(--concrete); font-size:14px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .ticker__track{animation:none !important; transform:none !important;}
}

/* ---------- eyebrow / small type ---------- */
.eyebrow{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--concrete); margin-bottom:14px;}
.eyebrow--light{color:rgba(237,232,222,0.6);}
.link-arrow{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line-strong); padding-bottom:3px; white-space:nowrap; transition:border-color .18s, color .18s;}
.link-arrow::after{content:" →";}
.link-arrow:hover{color:var(--accent); border-color:var(--accent);}
.link-arrow--light{color:var(--bone); border-color:var(--line-ink);}
.link-arrow--light:hover{color:var(--accent); border-color:var(--accent);}
.linkbtn{font-weight:600; font-size:inherit; color:var(--accent-dark); border-bottom:1px solid currentColor; padding-bottom:1px;}
.linkbtn:hover{color:var(--ink);}
.section__h3{font-family:var(--display); font-stretch:110%; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.02em; margin:26px 0 14px;}
.section__h3:first-child{margin-top:0;}
.section__sub{font-size:14px; color:var(--graphite); max-width:52ch; margin-top:8px;}
.form-hint{font-size:12px; color:var(--concrete); margin-top:6px;}
.req{font-family:var(--body); font-size:10px; color:var(--accent-dark); letter-spacing:.04em; text-transform:uppercase;}

/* ============ TICKER ============ */
.ticker{
  background:var(--ink); color:var(--bone);
  height:var(--tick-h); display:flex; align-items:center;
  overflow:hidden; position:relative;
}
.ticker__viewport{width:100%; overflow:hidden;}
.ticker__track{
  display:flex; width:max-content;
  animation:ticker-scroll 38s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused;}
.ticker__chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:0 22px; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.ticker__chip::before{content:""; width:4px; height:4px; background:var(--accent); flex:none;}
/* Track renders the chip set twice, so -50% lands exactly on the repeat. */
@keyframes ticker-scroll{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}

/* ============ NAV ============ */
.nav{position:sticky; top:0; z-index:70; background:var(--bone); border-bottom:1px solid var(--line);}
.nav__wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(12px,2vw,28px); height:var(--nav-h);}
.nav__left{display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); min-width:0;}
.nav__logo{flex:none; justify-self:center;}
.nav__logo img{height:22px; width:auto; max-width:none;}
.nav__links{display:flex; gap:clamp(16px,2.2vw,30px); font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;}
.nav__links a{position:relative; padding:6px 0; white-space:nowrap;}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--accent); transition:right .22s ease;}
.nav__links a:hover::after, .nav__links a.active::after{right:0;}
.nav__icons{display:flex; gap:clamp(4px,1vw,10px); align-items:center; flex:none; justify-self:end;}
.nav__icons > a, .nav__icons > button{
  position:relative; display:flex; align-items:center; justify-content:center; flex:none;
  /* the visible icon stays 21px, but padding + a matching negative margin
     give it a ~45px tappable box without disturbing the row's spacing */
  padding:12px; margin:-12px;
}
.nav__icons svg{width:21px; height:21px; flex:none;}
.bag-count{
  position:absolute; top:5px; right:3px; background:var(--accent); color:var(--bone);
  font-family:var(--mono); font-size:9.5px; font-weight:600; min-width:16px; height:16px; padding:0 3px;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.nav__account-name{font-family:var(--mono); font-size:11px; letter-spacing:.06em; white-space:nowrap; color:var(--concrete);}
.hamburger{
  display:none; width:24px; height:18px; flex-direction:column; justify-content:space-between; flex:none;
  padding:13px; margin:-13px; box-sizing:content-box;
}
.hamburger span{display:block; height:1.6px; background:var(--ink); width:100%; transition:transform .2s;}

/* inline search */
.navsearch{display:none; border-top:1px solid var(--line); background:var(--bone-2);}
.navsearch.open{display:block;}
.navsearch > .wrap{display:flex; align-items:center; gap:12px; height:60px;}
.navsearch input{flex:1; border:none; background:none; font-family:var(--body); font-size:16px; outline:none; padding:0;}
.navsearch__clear, .navsearch__close{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--concrete); flex:none;}
.navsearch__clear:hover, .navsearch__close:hover{color:var(--ink);}
.navsearch__results{border-top:1px solid var(--line); max-height:min(420px,60vh); overflow-y:auto; background:var(--bone);}
.navsearch__msg{padding:20px clamp(18px,4vw,40px); font-size:13.5px; color:var(--concrete); max-width:1280px; margin:0 auto;}
.navsearch__hit{display:flex; gap:14px; align-items:center; padding:12px clamp(18px,4vw,40px); border-bottom:1px solid var(--line); max-width:1280px; margin:0 auto;}
.navsearch__hit:hover{background:var(--bone-2);}
.navsearch__hit img{width:48px; height:58px; object-fit:contain; padding:2px; background:var(--bone-3); flex:none;}
.navsearch__hit-ph{width:48px; height:58px; background:var(--bone-3); flex:none;}
.navsearch__hit-text b{display:block; font-size:14px; font-weight:600;}
.navsearch__hit-text small{font-family:var(--mono); font-size:11px; color:var(--concrete); letter-spacing:.04em;}
.navsearch__all{display:block; padding:14px clamp(18px,4vw,40px); font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark); max-width:1280px; margin:0 auto;}

/* mobile menu — slide-down panel: primary links, categories, account, help, social.
   Rows share one rhythm (56px tap targets, hairline dividers) with the rest of the site. */
.mobile-menu{
  position:fixed; inset:calc(var(--nav-h) + var(--tick-h)) 0 0 0;
  background:var(--bone); z-index:65; display:none; flex-direction:column; gap:26px;
  padding:8px clamp(18px,5vw,32px) calc(28px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{display:flex;}
.mm__primary{display:flex; flex-direction:column;}
.mm__primary a{
  display:flex; align-items:center; justify-content:space-between; min-height:60px;
  font-family:var(--display); font-stretch:110%; font-weight:800; font-size:clamp(20px,5.6vw,26px); text-transform:uppercase; letter-spacing:-0.005em;
  border-bottom:1px solid var(--line);
}
.mm__primary a:active{color:var(--accent);}
.mm__chev{color:var(--concrete); flex:none;}
.mm__section[hidden]{display:none;}
.mm__label{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--concrete); margin-bottom:12px;}
.mm__chips{display:flex; flex-wrap:wrap; gap:8px;}
.mm__chip{
  display:inline-flex; align-items:center; min-height:42px; padding:0 16px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.mm__chip:active{background:var(--ink); color:var(--bone); border-color:var(--ink);}
.mm__list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.mm__list a{display:flex; align-items:center; gap:14px; min-height:54px; padding:0 16px; font-size:15px; font-weight:500; border-top:1px solid var(--line);}
.mm__list a:first-child{border-top:none;}
.mm__list a svg{flex:none; color:var(--concrete);}
.mm__list a:active{background:var(--bone-2);}
.mm__social{display:flex; gap:12px; margin-top:auto;}
.mm__social a{width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.mm__social a:active{background:var(--ink); color:var(--bone);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 24px; border:1.5px solid var(--ink); border-radius:var(--radius);
  min-height:46px; text-align:center;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover{background:var(--accent); border-color:var(--accent); color:var(--bone);}
.btn--light{background:var(--bone); color:var(--ink); border-color:var(--bone);}
.btn--light:hover{background:var(--accent); border-color:var(--accent); color:var(--bone);}
.btn--outline-light{background:rgba(17,18,17,0.35); color:var(--bone); border-color:var(--bone); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.btn--outline-light:hover{background:var(--bone); border-color:var(--bone); color:var(--ink);}

.btn[disabled], .btn[aria-disabled="true"]{background:var(--bone-3); border-color:var(--bone-3); color:var(--concrete); cursor:not-allowed;}
.btn--lg{padding:16px 26px; font-size:12.5px; min-height:52px;}
.btn--block{width:100%;}
.btn--ghost{background:transparent; color:var(--ink);}
.btn--ghost:hover{background:var(--ink); border-color:var(--ink); color:var(--bone);}
.btn--text{background:none; border-color:transparent; color:var(--ink); padding:13px 0; min-height:auto;}
.btn--text:hover{background:none; border-color:transparent; color:var(--accent);}
.iconbtn{width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--concrete);}
.iconbtn:hover{color:var(--ink);}

/* ============ MESSAGES ============ */
.error-msg{background:#FBE9E6; color:#8E2B1E; border:1px solid #E9BFB7; padding:11px 15px; font-size:13.5px; margin:14px 0; display:none;}
.error-msg.show{display:block;}
.form-note{font-size:13px; margin-top:10px; color:var(--graphite);}
.form-note--error{color:#8E2B1E;}
.form-note--ok{color:#1F6B3C;}
.form-note--warn{color:#7A5A12;}
.form-note--success{color:#1f6b3a;}
.sim-note{font-size:12px; color:var(--graphite); background:var(--bone-2); padding:11px 14px; margin:14px 0 20px; line-height:1.55; border-left:2px solid var(--concrete);}

.toasts{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:calc(100% - 32px); max-width:420px;}
/* Two different toast patterns share this class: dynamically-created ones
   inside .toasts (storefront) are fine as-is; static ones sitting in the
   admin markup (e.g. #addProductToast) need to start hidden and only
   appear once JS adds .show — otherwise they render as a permanent banner. */
.toast{
  display:none;
  background:var(--ink); color:var(--bone); padding:13px 18px; font-size:13.5px; font-weight:500;
  box-shadow:var(--shadow); width:100%; text-align:center;
}
.toasts .toast, .toast.show{
  display:block;
  animation:toast-in .22s ease;
}
.toast--err{background:#8E2B1E;}
.toast--out{opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s;}
@keyframes toast-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ============ PAGE HEAD ============ */
.pagehead{padding:clamp(32px,5vw,56px) 0 clamp(24px,3vw,34px); border-bottom:1px solid var(--line);}
.pagehead p{color:var(--graphite); max-width:56ch; margin-top:14px; font-size:15px;}
.crumbs{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--concrete); padding:20px 0 0;}
.crumbs a:hover{color:var(--accent);}
.crumbs span[aria-current]{color:var(--ink);}

/* ============ HOME HERO ============ */
/* ---- HERO — the category dock IS the hero now, no headline/CTA copy ---- */
.hero{border-bottom:1px solid var(--line); margin-top:clamp(14px,2.4vw,24px);}

/* ---- CATEGORY DOCK ---- */

/* ============ HERO — ARTICLES ON SALE ============
   Hidden by default (JS un-hides it only when there's something on sale).
   Image-forward by design per spec — the whole slide IS the photo, with
   name/price/CTA on a gradient scrim rather than a separate text panel,
   so it never grows "excessively tall". */
.sale-hero{border-bottom:1px solid var(--line); padding-top:clamp(14px,2.2vw,22px);}
.sale-hero__eyebrow{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:10px; padding:0 clamp(18px,4vw,40px);}
.sale-hero__rail-wrap{position:relative;}
.sale-hero__rail{
  display:flex; gap:clamp(14px,2.2vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:0 clamp(18px,4vw,40px) 4px; scroll-padding-left:clamp(18px,4vw,40px);
}
.sale-hero__rail::-webkit-scrollbar{display:none;}
/* Same rounded-corner, image-above/caption-below card language used by the
   hero carousel and every product grid on the site (see .catcard / .card) —
   a portrait photo with the badge overlaid on it, and plain-text details
   underneath instead of a dark gradient banner. */
.sale-card{
  flex:0 0 clamp(190px,22vw,280px); scroll-snap-align:start; position:relative;
  display:flex; flex-direction:column; gap:12px; background:none;
}
.sale-card__media{position:relative; display:block; width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:18px; background:var(--bone-3);}
.sale-card__media img{width:100%; height:100%; object-fit:cover; display:block;}
.sale-card__badge{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--accent); color:var(--bone);
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px;
}
.sale-card__info{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:0 2px;
}
.sale-card__info > span:first-child{display:block; min-width:0;}
.sale-card__name{display:block; font-family:var(--display); font-stretch:110%; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.01em; margin-bottom:5px; line-height:1.2; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sale-card__price{display:block; font-family:var(--mono); font-size:12.5px; color:var(--ink);}
.sale-card__price s{color:var(--concrete); margin-right:6px;}
.sale-card__pct{color:var(--accent-dark); font-weight:700; margin-left:6px;}
.sale-card__cta{
  flex:none; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); text-decoration:underline; text-underline-offset:3px; padding-top:2px;
}
.sale-hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:38px; height:38px; border-radius:50%;
  background:var(--bone); border:1px solid var(--line-strong); font-size:17px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.sale-hero__arrow--prev{left:8px;} .sale-hero__arrow--next{right:8px;}
@media (max-width:640px){ .sale-hero__arrow{display:none;} }
.sale-hero__dots{display:flex; gap:6px; justify-content:center; padding:12px 0 2px;}
.sale-hero__dot{width:6px; height:6px; border-radius:50%; background:var(--line-strong); transition:all .15s;}
.sale-hero__dot.active{background:var(--ink); width:18px; border-radius:3px;}

/* ============ OPTIONAL HERO BANNER (admin-controlled) ============ */
.hero-banner{position:relative; min-height:clamp(320px,52vw,560px); overflow:hidden; display:flex; align-items:flex-end;}
.hero-banner__media{position:absolute; inset:0;}
.hero-banner__media img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-banner__scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(15,14,11,0.78) 0%, rgba(15,14,11,0.2) 48%, rgba(15,14,11,0.05) 100%);}
.hero-banner__content{position:relative; z-index:2; padding:clamp(24px,4vw,56px); color:var(--bone); max-width:620px;}
.hero-banner__content .eyebrow--light{margin-bottom:10px;}
.hero-banner__content h1{color:var(--bone); font-size:clamp(28px,4.5vw,52px); line-height:1.05; margin-bottom:12px;}
.hero-banner__content p{color:rgba(237,232,222,0.85); font-size:clamp(13px,1.3vw,16px); max-width:42ch; margin-bottom:20px; line-height:1.55;}
@media (max-width:640px){
  .hero-banner{min-height:62vw;}
  .hero-banner__content{padding:20px;}
}

.catdock{padding:0 0 clamp(26px,3.5vw,40px); border-bottom:1px solid var(--line);}
.catdock__rail-wrap{position:relative;}
.catdock__arrow{
  position:absolute; top:40%; z-index:3; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--bone); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, opacity .15s;
  box-shadow:0 4px 14px rgba(20,19,15,0.12);
}
.catdock__arrow--prev{left:clamp(10px,2vw,26px);}
.catdock__arrow--next{right:clamp(10px,2vw,26px);}
.catdock__arrow:hover:not([disabled]){background:var(--ink); color:var(--bone); border-color:var(--ink);}
.catdock__arrow[disabled]{opacity:0; pointer-events:none;}
.catdock__rail{
  display:flex; gap:clamp(14px,2.2vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:4px 2px 10px;
}
.catdock__rail::-webkit-scrollbar{display:none;}
.catdock__rail > .empty-state, .catdock__rail > .loading-state{flex:1; padding:clamp(60px,10vw,120px) 20px;}
@media (max-width:640px){ .catdock__arrow{display:none;} }
/* Groovy-style hero tiles: rectangular cards with curved corners and clear
   gutters between them, caption set below the image (not overlaid on it). */
.catcard{
  position:relative; flex:0 0 clamp(190px,22vw,280px); scroll-snap-align:start;
  display:flex; flex-direction:column; gap:12px; background:none;
}
.catcard__media{
  display:block; width:100%; aspect-ratio:3/4; position:relative;
  overflow:hidden; border-radius:18px; background:var(--bone-3);
}
.catcard__media img{width:100%; height:100%; object-fit:cover;}
.catcard__media img.front, .catcard__media img.back{position:absolute; inset:0; transition:opacity .3s ease;}
.catcard__media img.back{opacity:0;}
@media (hover:hover){
  .catcard:hover .catcard__media{box-shadow:0 10px 28px rgba(20,19,15,0.18);}
  .catcard:hover .catcard__media img.front{opacity:0;}
  .catcard:hover .catcard__media img.back{opacity:1;}
}
.catcard__media svg{width:58%; height:58%; margin:auto; position:absolute; inset:0;}
/* Bigger, bolder tiles on phones — one dominant card plus a peek of the
   next, rather than the squeezed ~190px tiles the generic clamp() gave
   small screens. */
@media (max-width:640px){
  .catcard{flex:0 0 min(70vw,300px);}
  .catcard__label b{font-size:16px;}
}
/* caption sits below the card, like the groovypakistan.com reference —
   bold caps title, lighter subtext underneath. */
.catcard__label{
  display:flex; flex-direction:column; gap:4px; padding:2px 3px 0;
  color:var(--ink);
}
.catcard__label b{font-family:var(--display); font-stretch:110%; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.01em;}
.catcard__label small{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--concrete);}

/* ============ SECTION / GRID ============ */
.section{padding:clamp(40px,5.5vw,76px) 0;}
.section__head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,32px);}

/* Matches the hero carousel's card language: rounded corners and a real
   gutter between cards, rather than the old hairline/1px-grid look. */
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); background:none; border:none;}
/* A single, centred recommendation card — used on the product page's
   "Recommended for you" pick, which (unlike the 3-up "You might also
   like" row) always shows exactly one product. */
.grid--single{grid-template-columns:minmax(0,340px); justify-content:center;}
.grid > .empty-state, .grid > .loading-state{grid-column:1 / -1; background:var(--bone);}

.card{background:var(--bone); display:flex; flex-direction:column; min-width:0; position:relative; border-radius:18px; overflow:hidden; box-shadow:0 1px 3px rgba(20,19,15,0.08);}
.card__quick-actions{position:absolute; top:10px; right:10px; z-index:5; display:flex; flex-direction:column; gap:8px;}
.card__wish, .card__quickadd{
  width:34px; height:34px; min-height:0; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(237,232,222,.92); color:var(--ink); border:none;
}
.card__wish svg, .card__quickadd svg{width:17px; height:17px; fill:none; transition:fill .15s;}
.card__wish.active{color:var(--accent-dark);}
.card__wish.active svg{fill:currentColor;}
.card__wish:hover, .card__quickadd:hover{color:var(--accent-dark);}
.card__media{position:relative; display:block; overflow:hidden; background:var(--bone-3);}
/* One frame for every card so the grid stays even, and object-fit:contain so
   no garment ever loses a head or a pair of feet to a crop. */
.card__media.type-top, .card__media.type-full, .card__media.schematic{aspect-ratio:1/1;}
.card__media.schematic{background:var(--bone-2); display:flex; align-items:center; justify-content:center;}
.card__media.schematic svg{width:60%; height:60%;}
.card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .3s ease;}
.card__media img.back{opacity:0;}
@media (hover:hover){
  .card__media:hover img.front{opacity:0;}
  .card__media:hover img.back{opacity:1;}
}
/* Status badge (preorder/sold out/low stock) and merchandising tags
   (Sale/New/Hot) share one top-left stack so neither ever collides with the
   wishlist/quick-add icons pinned top-right. */
.card__badges{position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.card__badge{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; background:var(--ink); color:var(--bone);
}
.card__badge--low{background:var(--accent); color:var(--bone);}
.card__badge--out{background:var(--bone); color:var(--concrete); border:1px solid var(--line-strong);}
.card__badge--preorder{background:var(--accent); color:var(--bone);}
.card__badge--soon{background:var(--ink); color:var(--bone);}
.card__tags{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.card__badge--new{background:var(--ink); color:var(--bone);}
.card__badge--sale{background:var(--accent); color:var(--bone);}
.card__badge--hot{background:var(--hazard); color:var(--ink);}
.card__body{padding:18px clamp(16px,1.6vw,22px) 22px; display:flex; flex-direction:column; gap:7px; flex:1;}
.card__code{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--concrete);}
.card__name{font-family:var(--body); font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.3;}
.card__name a:hover{color:var(--accent-dark);}
.card__rating{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--concrete);}
.card__rating .stars{font-size:11px; letter-spacing:1px; color:var(--accent);}
/* Price and the colour swatches share one row — price on the left,
   round swatches on the right, same row (not stacked below). */
.card__price-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.card__price{font-family:var(--mono); font-size:13px; letter-spacing:.02em;}
.price--was{color:var(--concrete); font-weight:400; margin-left:4px;}
.price--pct{color:var(--accent-dark); margin-left:4px; font-size:11px;}
.card__swatches{display:flex; gap:6px; flex-wrap:wrap; flex:none;}
.card__swatch{
  width:16px; height:16px; min-height:0; padding:0; border-radius:50%;
  border:1.5px solid var(--line-strong); box-shadow:0 0 0 1px var(--bone) inset;
}
.card__swatch.active{border-color:var(--ink); box-shadow:0 0 0 2px var(--bone) inset, 0 0 0 1px var(--ink);}
.card__swatch:hover{border-color:var(--ink);}
.card__actions{margin-top:auto; padding-top:14px; display:flex; flex-direction:column; gap:8px;}
.card__view{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  text-align:center; color:var(--concrete); padding:4px 0; min-height:24px;
}
.card__view:hover{color:var(--ink);}
.empty-state, .loading-state{padding:clamp(40px,7vw,80px) 20px; text-align:center; color:var(--concrete); font-size:14px;}
.retry-link{color:var(--accent-dark); text-decoration:underline; font-weight:600; margin-left:2px;}
.retry-link:hover{color:var(--ink);}

/* ============ WOMEN'S HERO ============ */
.whero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4vw,56px) clamp(18px,4vw,40px); max-width:1280px; margin:0 auto; border-bottom:1px solid var(--line);}
.whero__media{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.whero__media img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; background:var(--bone-3);}
.whero__text h1{margin-bottom:18px;}
.whero__text p{color:var(--graphite); font-size:15.5px; max-width:44ch; margin-bottom:24px;}
@media (max-width:860px){
  .whero{grid-template-columns:1fr; padding-top:24px;}
  .whero__media--second{display:none;}
  .whero__media{grid-template-columns:1fr;}
  .whero__media img{aspect-ratio:4/3; object-position:center 18%;}
}

/* ============ STUDIO ============ */
.studio{background:var(--ink); color:var(--bone); padding:clamp(44px,6vw,84px) 0;}
.studio .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(28px,4vw,64px);}
.studio h2{color:var(--bone); margin-bottom:20px;}
.studio p{color:rgba(237,232,222,0.72); font-size:15.5px; max-width:48ch; margin-bottom:16px;}
.studio__stats{display:grid; gap:22px; border-top:1px solid var(--line-ink); padding-top:26px; align-content:start;}
.studio__stat b{font-family:var(--display); font-stretch:110%; font-size:clamp(28px,3.4vw,40px); color:var(--accent); display:block; line-height:1;}
.studio__stat span{font-size:13px; color:rgba(237,232,222,0.6); display:block; margin-top:8px;}

/* ============ MANIFESTO — brand book §37 ============
   Deliberately quiet: olive-tinted dark ground (not pure ink, so it reads
   as a distinct, calmer beat after the Studio stats), generous line-height,
   no bullet points, no CTA. This is the one section on the site that
   isn't trying to sell anything. */
.manifesto{background:var(--olive); color:var(--bone); padding:clamp(56px,9vw,120px) 0;}
.manifesto .wrap{max-width:640px;}
.manifesto__eyebrow{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,227,217,0.6); margin-bottom:28px;}
.manifesto blockquote{font-family:var(--display); font-stretch:110%; font-size:clamp(19px,2.6vw,27px); line-height:1.55; font-weight:500;}
.manifesto blockquote p{margin-bottom:22px;}
.manifesto__line{margin-top:32px !important; font-weight:700; color:var(--bone);}

/* ============ SIGNUP ============ */
.signup{background:var(--bone-2); border-block:1px solid var(--line);}
.signup__inner{display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(20px,4vw,48px); flex-wrap:wrap;}
.signup__inner p{color:var(--graphite); font-size:14.5px; margin-top:12px; max-width:44ch;}
.signup__form{display:flex; gap:12px; min-width:min(100%,380px); flex:1;}
.signup__form input{flex:1; border:1.5px solid var(--ink); background:var(--bone); min-width:0; min-height:48px;}
.signup__form .btn{flex:none; min-height:48px;}

/* ============ FILTERS ============ */

.filter-bar{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.tabs{display:flex; gap:7px; flex-wrap:wrap;}
.tab{
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:9px 15px; border:1px solid var(--line-strong); background:transparent; min-height:38px; border-radius:var(--radius);
  transition:background .15s, color .15s, border-color .15s;
}
.tab:hover{border-color:var(--ink);}
.tab.active{background:var(--ink); color:var(--bone); border-color:var(--ink);}
.filter-toggle{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line-strong); padding:9px 15px; min-height:38px; border-radius:var(--radius);}
.filter-toggle[aria-expanded="true"]{background:var(--ink); color:var(--bone); border-color:var(--ink);}
.filter-panel{display:none; padding:18px 0 4px; border-top:1px solid var(--line); margin-bottom:14px;}
.filter-panel.open{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,3vw,36px);}
.filter-group{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.filter-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--concrete);}
.filter-empty{font-size:12.5px; color:var(--concrete);}
.clear-filters{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-dark); border-bottom:1px solid currentColor; padding-bottom:2px;}
.shop__count{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--concrete); margin-bottom:0;}
.shop__toolbar{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.sort-control select{
  width:auto; min-height:0; padding:9px 30px 9px 14px; font-family:var(--mono); font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line-strong); background:var(--bone);
  appearance:none; -webkit-appearance:none; border-radius:var(--radius);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315140F' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:13px;
}

/* ============ PRODUCT DETAIL ============ */
.pd{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:clamp(26px,4vw,64px); padding:24px 0 20px; align-items:start;}
.pd__gallery{position:sticky; top:calc(var(--nav-h) + 20px);}
.pd__main{overflow:hidden; background:var(--bone-3);}
.pd__main.type-top, .pd__main.type-full, .pd__main.schematic{aspect-ratio:4/5;}
.pd__main.schematic{background:var(--bone-2); display:flex; align-items:center; justify-content:center;}
.pd__main.schematic svg{width:52%; height:52%;}
.pd__main img{width:100%; height:100%; object-fit:contain; padding:10px;}
.pd__thumbs{display:flex; gap:7px; margin-top:8px; flex-wrap:wrap;}
.pd__thumb{width:62px; height:76px; padding:0; border:1.5px solid transparent; border-radius:10px; overflow:hidden; opacity:.6; background:var(--bone-3); transition:opacity .15s, border-color .15s;}
.pd__thumb img{width:100%; height:100%; object-fit:contain; padding:3px;}
.pd__thumb:hover{opacity:.9;}
.pd__thumb.active{border-color:var(--ink); opacity:1;}

.pd__info .code{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete); margin-bottom:12px;}
.pd__info h1{font-size:clamp(26px,3.4vw,42px); margin-bottom:12px;}
.pd__price{font-family:var(--mono); font-size:18px; letter-spacing:.02em; margin-bottom:20px;}
.pd__desc{font-size:15px; color:var(--graphite); margin-bottom:26px; max-width:52ch;}
.pd__rating{margin:-6px 0 16px;}
.pd__rating a{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--graphite); text-decoration:none;}
.pd__rating .stars{color:var(--accent); letter-spacing:1px;}
.wish-toggle{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  background:none; border:none; padding:0; font-family:var(--mono); font-size:12px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--graphite); min-height:0; width:auto;
}
.wish-toggle svg{width:18px; height:18px; fill:none; transition:fill .15s;}
.wish-toggle.active{color:var(--accent-dark);}
.wish-toggle.active svg{fill:currentColor;}
.wish-toggle:hover{color:var(--accent-dark);}
.pd__model{font-size:12.5px; color:var(--concrete); font-style:italic; margin:-8px 0 20px;}
.pd__note{font-size:12.5px; color:var(--concrete); margin:12px 0 24px; max-width:50ch;}
.pd__actions{display:flex; gap:10px; margin-top:20px;}
.pd__actions--two{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pd__trust{display:grid; gap:9px; padding:20px 0; border-top:1px solid var(--line); margin-top:8px;}
.pd__trust li{font-size:13px; color:var(--graphite); padding-left:18px; position:relative;}
.pd__trust li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; background:var(--accent);}
.pd__specs{border-top:1px solid var(--line); padding-top:6px;}
.pd__specs > div{display:grid; grid-template-columns:110px 1fr; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:13.5px;}
.pd__specs dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete); padding-top:2px;}
.pd__specs dd{color:var(--graphite);}
.pd__links{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--concrete); margin-top:22px;}
.pd__links a{border-bottom:1px solid var(--line-strong); padding-bottom:2px;}
.pd__links a:hover{color:var(--accent);}

/* ============ REVIEWS ============ */
.stars{color:var(--accent); letter-spacing:1px; font-size:14px;}
.reviews{border-top:1px solid var(--line); padding-top:26px;}
.reviews__summary{display:flex; flex-wrap:wrap; align-items:center; gap:28px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line);}
.reviews__avg{display:flex; align-items:center; gap:10px; font-family:var(--display); font-stretch:110%;}
.reviews__avg b{font-size:28px;}
.reviews__bars{display:grid; gap:5px; min-width:220px; flex:1; max-width:340px;}
.rating-bar{display:grid; grid-template-columns:26px 1fr 22px; align-items:center; gap:8px; font-size:11px; color:var(--concrete);}
.rating-bar__track{height:6px; background:var(--bone-2); border-radius:3px; overflow:hidden;}
.rating-bar__fill{display:block; height:100%; background:var(--accent);}
.reviews__body{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(26px,4vw,56px); align-items:start;}
.reviews__list{display:grid; gap:20px;}
.review{border-bottom:1px dashed var(--line); padding-bottom:18px;}
.review__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; margin-bottom:6px;}
.review__title{font-size:14px; font-weight:600; margin-bottom:4px;}
.review__body{font-size:13.5px; color:var(--graphite); line-height:1.55;}
.review-form{background:var(--bone-2); padding:clamp(20px,2.5vw,28px);}
.review-form .field{margin-bottom:16px;}
.star-input{display:flex; gap:4px;}
.star-input button{
  width:auto; min-height:auto; border:none; background:none; padding:2px 3px;
  font-size:24px; line-height:1; color:var(--line-strong); cursor:pointer; transition:color .12s;
}
.star-input button.active, .star-input button:hover, .star-input button:focus-visible{color:var(--accent);}
.form-hint--err{color:#C0553F;}
@media (max-width:768px){ .reviews__body{grid-template-columns:1fr;} }


.field-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--concrete); display:block; margin-bottom:10px;}
.swatches{display:flex; gap:9px; margin-bottom:22px; flex-wrap:wrap;}
.swatch{width:32px; height:32px; border:1.5px solid var(--line-strong); border-radius:50%; padding:0; box-shadow:inset 0 0 0 2px var(--bone); transition:box-shadow .15s, border-color .15s;}
.swatch.active{border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--bone), 0 0 0 1px var(--ink);}
.swatch--out{opacity:.4; cursor:not-allowed;}
.sizes{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px;}
.size-btn{
  min-width:48px; height:44px; padding:0 10px; border:1px solid var(--line-strong); border-radius:var(--radius); background:transparent;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  transition:background .15s, color .15s, border-color .15s;
}
.size-btn:hover:not([disabled]){border-color:var(--ink);}
.size-btn.active{background:var(--ink); color:var(--bone); border-color:var(--ink);}
.size-btn[disabled]{opacity:.4; cursor:not-allowed; text-decoration:line-through;}
.sizeguide-row{font-size:12.5px; color:var(--concrete); margin-bottom:22px;}
.qty-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px;}
.qty-row .field-label{margin:0;}
.qty-ctrl{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden;}
.qty-ctrl button{width:40px; height:40px; font-size:16px; font-weight:600;}
.qty-ctrl button[disabled]{opacity:.35; cursor:not-allowed;}
.qty-ctrl span{min-width:40px; text-align:center; font-family:var(--mono); font-size:13px;}
.stock-hint{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-dark);}

/* sticky mobile purchase bar */
.buybar{
  position:fixed; bottom:0; left:0; right:0; z-index:60; display:none;
  align-items:center; justify-content:space-between; gap:14px;
  background:var(--bone); border-top:1px solid var(--line-strong);
  padding:10px clamp(14px,4vw,20px); padding-bottom:max(10px, env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(20,19,15,0.08);
}
.buybar__info{display:flex; flex-direction:column; min-width:0;}
.buybar__info b{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.buybar__info span{font-family:var(--mono); font-size:11.5px; color:var(--concrete);}
.buybar .btn{flex:none;}

/* ============ CART ============ */
.cart-page{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(24px,4vw,52px); padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,90px); align-items:start;}
.cart-line{display:grid; grid-template-columns:70px 1fr auto; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start;}
.cart-line img, .cart-line__ph{width:70px; height:88px; object-fit:contain; padding:3px; background:var(--bone-3);}
.cart-line__name{font-family:var(--body); font-size:14.5px; font-weight:600; text-transform:none; letter-spacing:0;}
.cart-line__meta{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--concrete); margin-top:5px;}
.cart-line__bottom{display:flex; gap:18px; align-items:center; margin-top:12px; flex-wrap:wrap;}
.cart-line__remove{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark); border-bottom:1px solid currentColor;}
.cart-line__total{font-family:var(--mono); font-size:13.5px; white-space:nowrap;}
.cart-empty{padding:clamp(48px,8vw,90px) 20px; text-align:center;}
.cart-empty p{color:var(--concrete); margin-bottom:22px;}
.promo-row{display:flex; gap:0; margin:24px 0 0; max-width:400px;}
.promo-row input{border-right:none; min-height:46px;}
.promo-row .btn{min-height:46px; flex:none;}
.summary-box{background:var(--bone-2); padding:clamp(20px,2.5vw,28px); position:sticky; top:calc(var(--nav-h) + 20px);}
.summary-box__cont{display:block; text-align:center; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--concrete);}
.summary-line{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:11px 0; border-top:1px dashed var(--line);}
.summary-line.total{font-family:var(--mono); font-weight:600; font-size:16px; border-top:1.5px solid var(--ink); margin-top:6px; padding-top:16px;}
.summary-line .linkbtn{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;}
.ship-note{font-size:12px; color:var(--concrete); padding:10px 10px 12px; background:var(--bone-2); border-radius:4px; margin:8px 0;}
.ship-note p{margin:0 0 8px;}
.ship-note b{color:var(--ink); font-weight:600;}
.ship-note__bar{display:block; height:5px; background:var(--bone-3); border-radius:3px; overflow:hidden;}
.ship-note__fill{display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .3s ease;}
.ship-note--unlocked{color:var(--accent-dark); background:none; padding:8px 0; font-weight:600;}
.ship-note--unlocked p{margin:0 0 6px;}
.ship-note--unlocked .ship-note__fill{background:var(--accent-dark);}
.summary-box .btn{margin-top:18px;}

/* ============ FORMS / CHECKOUT ============ */
.checkout-body{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(26px,4vw,60px); padding:clamp(28px,4vw,48px) 0 clamp(56px,8vw,100px); align-items:start;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.form-row.full{grid-template-columns:1fr;}
label{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete); display:block; margin-bottom:7px;}
input, select, textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line-strong); background:var(--bone);
  font-family:var(--body); font-size:16px; color:var(--ink); border-radius:var(--radius); min-height:48px;
}
textarea{min-height:auto; line-height:1.55;}
input:focus, select:focus, textarea:focus{border-color:var(--ink); outline:none;}
input:user-invalid{border-color:#C0553F;}
input::placeholder, textarea::placeholder{color:#A39C8D;}

.pay-options{display:grid; gap:10px; margin:14px 0 8px;}
.pay-opt{display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--line-strong); padding:14px; font-size:14px; cursor:pointer; transition:border-color .15s;}
.pay-opt:hover{border-color:var(--ink);}
.pay-opt:has(input:checked){border-color:var(--ink); background:var(--bone-2);}
.pay-opt input{width:auto; min-height:auto; margin-top:3px; accent-color:var(--accent); flex:none;}
.pay-opt span{display:block;}
.pay-opt b{display:block; font-size:14px; font-weight:600;}
.pay-opt small{display:block; font-size:12.5px; color:var(--concrete); margin-top:3px;}
.card-fields{display:none; margin-top:14px;}
.card-fields.show{display:block;}
#stripeCardElement{padding:14px 15px; border:1.5px solid var(--line-strong); background:var(--bone);}

.summary{background:var(--bone-2); padding:clamp(20px,2.5vw,28px); position:sticky; top:calc(var(--nav-h) + 20px);}
.summary-mode{font-size:12.5px; color:var(--graphite); background:var(--bone); padding:10px 12px; margin-bottom:14px;}
.summary-mode a{color:var(--accent-dark); border-bottom:1px solid currentColor;}
.summary-item{display:grid; grid-template-columns:46px 1fr auto; gap:12px; margin-bottom:14px; align-items:center;}
.summary-item img, .summary-item__ph{width:46px; height:56px; object-fit:contain; padding:2px; background:var(--bone-3);}
.summary-item b{display:block; font-size:13px; font-weight:600;}
.summary-item small{display:block; font-family:var(--mono); font-size:10.5px; color:var(--concrete); margin-top:3px;}
.summary-item > span{font-family:var(--mono); font-size:12.5px; white-space:nowrap;}
.trust-list{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:8px;}
.trust-list li{font-size:12.5px; color:var(--graphite); padding-left:16px; position:relative;}
.trust-list li::before{content:""; position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--accent);}

/* ============ CONFIRMATION ============ */
.confirm-wrap{max-width:520px; margin:0 auto; text-align:center; padding:clamp(48px,8vw,90px) 24px clamp(60px,9vw,110px);}
.confirm-wrap .check{width:56px; height:56px; background:var(--accent); color:var(--bone); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; font-size:26px;}
.confirm-wrap h1{font-size:clamp(26px,4vw,40px); margin-bottom:14px;}
.confirm-wrap p{color:var(--graphite); font-size:14.5px; margin-bottom:14px;}
.confirm-order{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; background:var(--bone-2); display:inline-block; padding:9px 16px; margin-bottom:22px;}
.confirm-items{display:grid; gap:7px; margin:18px 0; font-size:13.5px; color:var(--graphite);}
.confirm-total{font-family:var(--mono); font-weight:600; font-size:16px; color:var(--ink) !important;}
.confirm-wrap .btn{margin-top:14px;}

/* ============ SIZE GUIDE / TABLES ============ */
.sizeguide-wrap{max-width:820px;}
.sg-intro{font-size:14.5px; color:var(--graphite); max-width:60ch; margin-bottom:30px;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:30px;}
.sg-table{width:100%; min-width:420px; border-collapse:collapse; font-size:13.5px;}
.sg-table th, .sg-table td{border:1px solid var(--line); padding:12px 14px; text-align:left;}
.sg-table thead th{background:var(--ink); color:var(--bone); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;}
.sg-table tbody th{font-family:var(--mono); font-weight:600; background:var(--bone-2); width:80px;}
.sg-list{display:grid; gap:10px; margin-bottom:24px; font-size:14px; color:var(--graphite); max-width:60ch;}
.sg-list li{padding-left:18px; position:relative;}
.sg-list li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--accent);}
.sg-note{font-size:13px; color:var(--concrete); max-width:60ch; border-left:2px solid var(--line-strong); padding-left:14px;}
/* Briefly flashes the size table that matches the article the guide was
   opened from, so the person lands on the right numbers instead of having
   to scroll and hunt for them. */
.sg-highlight{animation:sg-flash 1.6s ease;}
@keyframes sg-flash{
  0%{background:var(--accent); color:var(--bone); border-radius:4px;}
  100%{background:transparent;}
}
/* Size chart must never force horizontal scrolling on a phone — shrink the
   table itself to fit instead of relying on .table-scroll's overflow. */
@media (max-width:480px){
  .sg-table{min-width:0; width:100%; font-size:11px;}
  .sg-table th, .sg-table td{padding:8px 5px;}
  .sg-table tbody th{width:auto;}
}

/* ---- Per-size measurements panel ----
   Opens IN the page flow, directly under the size row, so it pushes the
   quantity / checkout controls down instead of floating over them. */
.sizes{position:relative;}
.size-popover{
  position:relative; margin:-4px 0 18px; padding:12px 14px 12px;
  background:var(--bone-2); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); animation:sg-pop-in .14s ease;
}
@keyframes sg-pop-in{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }
.size-popover b{display:block; font-family:var(--display); font-stretch:110%; font-size:12.5px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; padding-right:28px;}
.size-popover__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:8px 14px; margin:0;}
.size-popover__grid > div{display:flex; flex-direction:column; gap:2px; min-width:0;}
.size-popover__grid dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--concrete);}
.size-popover__grid dd{margin:0; font-family:var(--mono); font-size:14px; font-weight:700;}
.size-popover__x{
  position:absolute; top:6px; right:6px; width:28px; height:28px; min-height:0; padding:0; border-radius:50%;
  background:none; color:var(--ink); opacity:.6; font-size:12px; line-height:1;
}
.size-popover__x:hover{opacity:1; background:var(--bone-3);}

/* ============ FAQ ============ */
.faq-wrap{max-width:780px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item h2{margin:0; font-size:inherit;}
.faq-q{
  width:100%; text-align:left; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--body); font-size:15px; font-weight:600; text-transform:none; letter-spacing:0; min-height:56px;
}
.faq-q:hover{color:var(--accent-dark);}
.faq-a{padding:0 0 20px; font-size:14.5px; color:var(--graphite); max-width:66ch;}
.chev{font-size:20px; color:var(--accent); flex:none; transition:transform .18s ease; line-height:1;}
.faq-item.open .chev{transform:rotate(45deg);}

/* ============ CONTACT / ACCOUNT ============ */
.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.8fr); gap:clamp(26px,4vw,56px); padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,90px); align-items:start;}
.info-block{background:var(--bone-2); padding:clamp(20px,2.5vw,28px);}
.info-block p{font-size:13.5px; color:var(--graphite); margin-bottom:10px;}
.info-block strong{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete); display:block;}
.info-block a{border-bottom:1px solid var(--line-strong);}
.account-wrap{padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,90px);}
.auth-tabs{display:flex; gap:26px; margin-bottom:26px; border-bottom:1px solid var(--line);}
.auth-tabs button{font-family:var(--display); font-stretch:110%; font-weight:700; font-size:14px; text-transform:uppercase; padding:0 0 12px; color:var(--concrete); border-bottom:2px solid transparent; margin-bottom:-1px;}
.auth-tabs button.active{color:var(--ink); border-color:var(--accent);}
.auth-panel{display:none; max-width:400px;}
.auth-panel.active{display:block;}
.account-summary{max-width:560px;}
.account-summary__actions{display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap;}
.account-summary__actions .btn{margin-bottom:0;}
.order-list{display:grid; gap:0;}
.order-row{border-bottom:1px solid var(--line);}
.order-row__summary{
  display:flex; justify-content:space-between; gap:16px; padding:15px 0; font-size:13.5px;
  background:none; border:none; width:100%; text-align:left; cursor:pointer; min-height:0;
}
.order-row__summary small{display:block; font-family:var(--mono); font-size:10.5px; color:var(--concrete); margin-top:3px; text-transform:uppercase; letter-spacing:.06em;}
.order-row__summary > span:last-child{text-align:right; font-family:var(--mono);}
.order-row__summary:hover{color:var(--accent-dark);}
.order-row__detail{padding:4px 0 22px;}

/* ---- Order detail (shared by account history + order tracker) ---- */
.order-detail__head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px;}
.order-detail__head h2{font-size:22px; margin:2px 0;}
.order-detail__total{font-family:var(--mono); font-size:18px; font-weight:600;}
.order-detail__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); margin-top:22px;}
.order-detail__addr{font-size:13.5px; color:var(--graphite); line-height:1.6; margin-bottom:16px;}

.order-timeline{display:flex; justify-content:space-between; gap:4px; list-style:none; padding:18px 0 4px; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);}
.order-timeline li{flex:1; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--concrete); position:relative;}
.order-timeline li::before{content:''; position:absolute; top:5px; left:-50%; width:100%; height:2px; background:var(--line-strong); z-index:0;}
.order-timeline li:first-child::before{display:none;}
.order-timeline li.done::before{background:var(--ink);}
.order-timeline__dot{display:block; width:12px; height:12px; border-radius:50%; background:var(--bone); border:2px solid var(--line-strong); margin:0 auto 8px; position:relative; z-index:1;}
.order-timeline li.done .order-timeline__dot{background:var(--ink); border-color:var(--ink);}
.order-timeline li.current .order-timeline__dot{background:var(--accent); border-color:var(--accent);}
.order-timeline li.current{color:var(--ink); font-weight:600;}
.order-timeline--cancelled{display:flex; align-items:center; gap:10px; padding:14px 0; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-dark);}
.order-timeline--cancelled .order-timeline__dot{width:10px; height:10px; border-radius:50%; background:var(--accent-dark);}

/* ---- Order tracker ---- */
.track-wrap{max-width:640px;}
.track-form{margin-bottom:8px;}
.track-form .btn{margin-top:4px;}
.confirm-track{margin-top:10px;}
@media (max-width:640px){
  .order-detail__grid{grid-template-columns:1fr;}
  .order-timeline{overflow-x:auto; justify-content:flex-start; gap:18px; padding-left:2px;}
  .order-timeline li{flex:none; min-width:64px;}
}

/* ============ OVERLAY / DRAWER / MODAL ============ */
.overlay{position:fixed; inset:0; background:rgba(20,19,15,0.58); z-index:80; opacity:0; transition:opacity .2s ease;}
.overlay.open{opacity:1;}

.drawer{
  position:fixed; top:0; right:0; width:440px; max-width:94vw; height:100%;
  background:var(--bone); z-index:90; box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.open{transform:none;}
.drawer__head{display:flex; justify-content:space-between; align-items:center; padding:20px clamp(18px,3vw,26px); border-bottom:1px solid var(--line); flex:none;}
.drawer__head h2{font-size:16px;}
.drawer__head h2 span{font-family:var(--mono); font-size:12px; font-weight:400; color:var(--concrete); margin-left:4px;}
.drawer__body{padding:24px clamp(18px,3vw,26px) 40px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.drawer__foot{flex:none; padding:16px clamp(18px,3vw,26px) clamp(20px,3vw,26px); border-top:1px solid var(--line); background:var(--bone);}
.drawer__foot .summary-line{padding:8px 0;}
.drawer__foot .btn{margin-top:10px;}
.drawer__ship-note{font-size:11.5px; color:var(--concrete); margin-top:2px;}
#cartDrawer .cart-lines{display:grid; gap:4px;}
#cartDrawer .cart-line img, #cartDrawer .cart-line__ph{width:60px; height:76px;}

.modal{
  position:fixed; z-index:90; background:var(--bone); box-shadow:var(--shadow);
  left:50%; top:50%; transform:translate(-50%,-46%) scale(.98);
  width:min(460px, calc(100vw - 32px)); max-height:min(88vh, 860px); overflow-y:auto;
  padding:clamp(24px,4vw,34px); opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  -webkit-overflow-scrolling:touch;
}
.modal.open{opacity:1; transform:translate(-50%,-50%) scale(1);}
.modal__close{position:absolute; top:10px; right:10px;}
.modal__eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:10px;}
.modal h2{font-size:clamp(20px,2.4vw,26px); margin-bottom:18px; padding-right:32px;}
.modal .btn{margin-top:14px;}
.modal .sizes{margin-bottom:16px;}

/* lead modal */
.lead__product{display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center; background:var(--bone-2); padding:12px; margin-bottom:18px;}
.lead__product img, .lead__ph{width:88px; height:110px; object-fit:contain; padding:3px; background:var(--bone-3);}
.lead__ph{display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--concrete);}
.lead__product b{display:block; font-size:14.5px; font-weight:600; line-height:1.3;}
.lead__product small{display:block; font-family:var(--mono); font-size:10.5px; color:var(--concrete); margin-top:4px; letter-spacing:.04em;}
.lead__blurb{font-size:14.5px; color:var(--graphite); margin-bottom:20px;}
.lead__consent{font-size:12px; color:var(--concrete); margin-top:14px; line-height:1.5;}
.lead__success{text-align:center;}
.lead__tick{width:50px; height:50px; background:var(--accent); color:var(--bone); display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 20px;}
.lead__success p{font-size:14.5px; color:var(--graphite); margin-bottom:12px;}
.lead__small{font-size:12.5px; color:var(--concrete);}
.phone-field{display:flex; align-items:stretch; border:1.5px solid var(--line-strong); background:var(--bone);}
.phone-field:focus-within{border-color:var(--ink);}
.phone-field__prefix{display:flex; align-items:center; padding:0 13px; font-family:var(--mono); font-size:13px; color:var(--concrete); background:var(--bone-2); border-right:1.5px solid var(--line-strong); flex:none;}
.phone-field input{border:none; background:none; flex:1; min-width:0;}
.phone-field input:focus{outline:none;}

/* quick buy modal */
.qb__top{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; margin-bottom:22px;}
.qb__img{width:120px; height:150px; object-fit:contain; padding:4px; background:var(--bone-3);}
.qb__price{font-family:var(--mono); font-size:17px; margin-bottom:6px;}
.qb__meta{font-size:12.5px; color:var(--concrete);}

/* ============ FOOTER ============ */

footer{background:var(--ink); color:var(--bone); padding:clamp(44px,6vw,72px) 0 26px; margin-top:0;}
.foot__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,3vw,44px); padding-bottom:clamp(28px,4vw,44px); border-bottom:1px solid var(--line-ink);}
.foot__brand img{height:26px; width:auto; max-width:none; margin-bottom:18px;}
.foot__brand p{color:rgba(237,232,222,0.6); font-size:13.5px; max-width:30ch;}
.foot__social{display:flex; gap:12px; margin-top:20px;}
.foot__social a{width:38px; height:38px; border:1px solid var(--line-ink); display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s;}
.foot__social a:hover{border-color:var(--accent); color:var(--accent);}
.foot__col h2{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,232,222,0.5); margin-bottom:18px;}
.foot__col a{display:block; font-size:14px; color:rgba(237,232,222,0.86); margin-bottom:12px; min-height:22px;}
.foot__col a:hover{color:var(--accent);}
.foot__bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:14px;}
.foot__bottom p{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:rgba(237,232,222,0.45);}
.pay-icons{display:flex; gap:10px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.pay-icons li{width:44px; height:32px; display:flex; align-items:center; justify-content:center; color:rgba(237,232,222,0.7); border:1px solid var(--line-ink); border-radius:8px;}
.foot__credit{text-align:center; font-size:11.5px; color:rgba(237,232,222,0.4); padding-top:20px;}
.foot__credit a{color:rgba(237,232,222,0.65); border-bottom:1px solid var(--line-ink);}
.foot__credit a:hover{color:var(--accent);}

/* ============================================================
   RESPONSIVE
   Audited at 320 / 360 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ============================================================ */

@media (min-width:1600px){
  .wrap{max-width:1400px;}
  .navsearch__hit, .navsearch__msg, .navsearch__all{max-width:1400px;}
  .whero{max-width:1400px;}
}

/* --- tablet / small laptop --- */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr;}
  .foot__brand{grid-column:1 / -1;}
}

@media (max-width:960px){
  .nav__links{display:none;}
  .hamburger{display:flex;}
  .nav__account-name{display:none;}
  .nav__wrap{gap:14px;}
  .editorial .wrap{grid-template-columns:1fr;}
  .editorial__media img{aspect-ratio:4/3; object-position:center 15%;}
  .studio .wrap{grid-template-columns:1fr;}
  .studio__stats{grid-template-columns:1fr 1fr;}
  .pd{grid-template-columns:1fr;}
  .pd__gallery{position:static;}
  .cart-page, .checkout-body, .two-col{grid-template-columns:1fr;}
  .summary-box, .summary{position:static;}
  /* Purchase controls come before the long spec list on narrow screens. */
  .buybar{display:flex;}
  .pd__info{padding-bottom:8px;}
  .view[data-view="product"].active{padding-bottom:78px;}
  .reviews__summary{gap:20px;}
  .reviews__avg b{font-size:24px;}
}

@media (max-width:768px){
  :root{--nav-h:62px;}
  .signup__inner{flex-direction:column; align-items:stretch;}
  .signup__form{min-width:0;}
    .filter-bar .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:4px; margin-right:-8px;}
  .filter-bar .tab{white-space:nowrap; flex:none;}
  .pd__specs > div{grid-template-columns:96px 1fr; gap:10px;}
  .foot__grid{grid-template-columns:1fr 1fr;}
  .foot__brand{grid-column:1 / -1;}
  .modal{padding:24px 20px;}
  .review-form{padding:18px;}
}

/* --- phones --- */
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
  .card__actions{flex-direction:row; align-items:center; gap:12px;}
  .card__actions .btn{flex:1;}
  .card__view{flex:none; text-align:right;}
  .pd__actions--two{grid-template-columns:1fr;}
  .cart-line{grid-template-columns:62px 1fr; gap:12px;}
  .cart-line img, .cart-line__ph{width:62px; height:78px;}
  .cart-line__total{grid-column:2; font-size:13px; margin-top:4px;}
  .studio__stats{grid-template-columns:1fr;}
  .foot__bottom{flex-direction:column; align-items:flex-start;}
  .qb__top{grid-template-columns:96px 1fr; gap:12px;}
  .qb__img{width:96px; height:120px;}
  .lead__product{grid-template-columns:70px 1fr;}
  .lead__product img, .lead__ph{width:70px; height:88px;}
  .toasts{bottom:88px;}
  .form-row{grid-template-columns:1fr;}
  .star-input button{padding:6px 5px; font-size:26px;}
  .shop__toolbar{flex-direction:column; align-items:stretch;}
  .sort-control select{width:100%;}
  .wish-toggle{min-height:40px;}
  .card__wish, .card__quickadd{width:36px; height:36px;}
}

/* --- very narrow (320px) --- */
@media (max-width:380px){
  .wrap{padding:0 14px;}
  .catcard{flex:0 0 76vw;}
  h1{font-size:28px;}
  h2{font-size:21px;}
  .btn{font-size:11px; letter-spacing:.07em; padding:12px 16px;}
  .btn--lg{padding:14px 18px; font-size:11.5px;}
  .size-btn{min-width:44px; height:42px;}
  .qty-ctrl button{width:38px; height:38px;}
  .card__actions{flex-direction:column; align-items:stretch;}
  .card__view{text-align:center;}
  .buybar{gap:10px; padding:8px 12px;}
  .buybar__info b{font-size:12px; max-width:36vw;}
  .modal{padding:22px 16px; width:calc(100vw - 20px);}
  .foot__grid{grid-template-columns:1fr;}
  .nav__icons{gap:10px;}
  .nav__logo img{height:18px;}
}