/* ==========================================================================
   NITO SPORTS — Stylesheet
   --------------------------------------------------------------------------
   Light trade-catalogue theme: white ground, #0e0d0d dark bars, one gold
   accent (#f9b20a). PT Sans for body copy, Poppins for headings and UI.
   Container is 1170px so it matches the reference layout grid.

   Sections
     1  Tokens            12  Why-choose band     23  Markets / payments
     2  Reset             13  Stats / marquee     24  FAQ
     3  Type              14  Sidebar category    25  CTA band
     4  Layout/utilities  15  Breadcrumb bar      26  Newsletter band
     5  Buttons           16  Filters             27  Footer + copyright
     6  Tags              17  Product detail      28  Floating actions
     7  Header + nav      18  Quote table         29  Search panel
     8  Banner slider     19  Forms               30  Lightbox / toast / qty
     9  Category tiles    20  Cards & notes       31  Animation
    10  Product block     21  Process steps       32  Responsive
    11  Featured rail     22  Media / gallery     33  Print
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Brand */
  --gold:#f9b20a;
  --gold-2:#efab09;
  --gold-3:#e9a608;
  --gold-4:#e3a209;
  --gold-dk:#d99e06;
  --gold-soft:#fdf4e0;

  /* Dark bars */
  --dark:#0e0d0d;
  --dark-2:#131313;
  --dark-3:#1d1b1b;

  /* Surfaces */
  --white:#fff;
  --bg-2:#e8e8e8;
  --bg-3:#f7f7f7;
  --bg-4:#f2f2f2;
  --bg-5:#fafafa;

  /* Borders */
  --line:#ccc;
  --line-2:#ddd;
  --line-3:#eee;
  --line-dark:#212121;
  --line-dark-2:#292929;

  /* Text */
  --t1:#0e0d0d;
  --t2:#222;
  --t3:#666;
  --t4:#888;
  --t5:#999;
  --t-inv:#fff;
  --t-inv-2:#ccc;

  /* Type */
  --font:'PT Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-head:'Poppins','PT Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SFMono-Regular','JetBrains Mono',Menlo,Consolas,monospace;

  /* Space — 8px base */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radius */
  --r-xs:3px; --r-sm:3px; --r:5px; --r-lg:5px; --r-full:999px;

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms; --t:240ms; --t-slow:420ms;

  --nav-h:70px;
  --maxw:1170px;
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip on both the root and body stops any stray horizontal
   overflow without the two side effects of `hidden`: it creates no scroll
   container (so position:sticky descendants still stick) and it leaves
   overflow-y:visible alone (so vertical scrolling is untouched). `hidden` on
   body only worked here by propagating to the viewport, which iOS Safari does
   not honour reliably. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--white);color:var(--t2);
  font-family:var(--font);font-size:14px;line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease-io)}
a:hover{color:var(--gold)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,h5,p,figure,dl,dd,dt{margin:0}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- 3. TYPE ------------------------------------------------------ */
.display-xl{font-family:var(--font-head);font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.1;font-weight:700;letter-spacing:-.01em;color:var(--t1)}
.display-l{font-family:var(--font-head);font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.15;font-weight:700;color:var(--t1)}
.h-sec{font-family:var(--font-head);font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.25;font-weight:700;color:var(--t1)}
.h-card{font-family:var(--font-head);font-size:1rem;line-height:1.35;font-weight:600;color:var(--t1)}
.lead{font-size:1rem;line-height:1.75;color:var(--t3);max-width:70ch}
.small{font-size:.8125rem;line-height:1.6}
.mono{font-family:var(--mono);letter-spacing:.02em}
.accent{color:var(--gold)}
.eyebrow{
  display:inline-block;font-family:var(--font-head);font-size:.6875rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.eyebrow--plain{color:var(--t3)}
.eyebrow--muted{color:var(--t4)}
.divider{height:1px;background:var(--line-3);border:0}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* section headings — the reference centres them in caps */
.sec-head{max-width:78ch;margin-bottom:var(--s6)}
.sec-head--center{max-width:78ch;margin-inline:auto;text-align:center}
.sec-head .h-sec{margin-top:var(--s2)}
.sec-head .lead{margin-top:var(--s3)}
.sec-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);
  flex-wrap:wrap;max-width:none;margin-bottom:0;
}

/* ---------- 4. LAYOUT / UTILITIES ---------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s4)}
.container--narrow{max-width:860px}
/* Available to screen readers and to the heading outline, invisible on screen. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.section{padding-block:var(--s8)}
.section--tight{padding-block:var(--s7)}
.section--alt{background:var(--bg-5);border-block:1px solid var(--line-3)}
.section--band{background:var(--bg-2)}

.grid{display:grid;gap:var(--s5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.g-auto-lg{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* minmax(0,…) lets a track shrink below its content's min-content width. With
   a bare 1fr the track keeps that floor, so a wide replaced element (the
   WhatsApp QR card) used to push the column past the viewport. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.split--wide{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.split--narrow{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
.split > *{min-width:0}
.stack{display:flex;flex-direction:column}
.gap-2{gap:var(--s2)} .gap-3{gap:var(--s3)} .gap-4{gap:var(--s4)}
.gap-5{gap:var(--s5)} .gap-6{gap:var(--s6)}
.flex{display:flex}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)}
.mt-7{margin-top:var(--s7)} .mt-8{margin-top:var(--s8)}
.mb-6{margin-bottom:var(--s6)} .mb-7{margin-bottom:var(--s7)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.btn-row.justify-center{justify-content:center}

/* ---------- 5. BUTTONS --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 26px;border:1px solid transparent;border-radius:var(--r);
  font-family:var(--font-head);font-size:.8125rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t) var(--ease-io),color var(--t) var(--ease-io),border-color var(--t) var(--ease-io);
}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.btn--primary:hover{background:var(--dark);color:var(--t-inv);border-color:var(--dark)}
.btn--ghost{background:transparent;color:var(--t1);border-color:var(--line)}
.btn--ghost:hover{background:var(--dark);color:var(--t-inv);border-color:var(--dark)}
.btn--dark{background:var(--dark);color:var(--t-inv);border-color:var(--dark)}
.btn--dark:hover{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--light:hover{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.btn--wa{background:#25D366;color:#062e17;border-color:#25D366}
.btn--wa:hover{background:var(--dark);color:var(--t-inv);border-color:var(--dark)}
.btn--sm{padding:9px 16px;font-size:.6875rem}
.btn--lg{padding:15px 32px;font-size:.875rem}
.btn--block{display:flex;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 6. TAGS ------------------------------------------------------ */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:var(--bg-3);font-size:.6875rem;font-weight:600;color:var(--t3);
  letter-spacing:.03em;line-height:1.5;
}
.tag--blue{background:var(--gold-soft);border-color:var(--gold);color:#8a6100}
.tag--outline{background:transparent;border-color:var(--line);color:var(--t3)}

/* ---------- 7. HEADER + NAV ---------------------------------------------- */
/* dark contact strip across the very top */
.topbar{background:var(--dark);color:var(--t-inv);font-size:.8125rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:40px}
.topbar a{color:var(--t-inv)}
.topbar a:hover{color:var(--gold)}
.topbar__meta{display:flex;align-items:center;gap:var(--s5)}
.topbar__item{display:inline-flex;align-items:center;gap:7px;line-height:40px;white-space:nowrap}
.topbar__item svg{width:15px;height:15px;color:var(--gold);flex:none}
.topbar__flag{display:inline-flex;align-items:center;gap:8px;line-height:40px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

/* #site-header is only a JS mount point (site.js fills it via innerHTML), and no
   rule targets its box. Rendering it with display:contents removes its box
   without removing it from the DOM, which matters because a sticky element can
   only stick while its containing block is on screen: with the wrapper's box in
   place the nav was stuck inside a 111px-tall parent and scrolled away after
   the first few pixels. With no wrapper box the nav's containing block becomes
   body, so it sticks for the whole page and the utility topbar scrolls off. */
#site-header{display:contents}

/* white nav bar */
.nav{
  position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:1px solid var(--line-3);
  transition:box-shadow var(--t) var(--ease-io);
}
.nav.is-stuck{box-shadow:0 6px 22px -12px rgba(0,0,0,.28)}
.nav__in{display:flex;align-items:center;gap:var(--s5);min-height:var(--nav-h)}
.nav__links{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:10px 13px;font-family:var(--font-head);font-size:.8125rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--t1);border-radius:var(--r-xs);
}
.nav__link:hover,.nav__link.is-active{color:var(--gold)}
.nav__link.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--gold)}
.nav__link svg{width:13px;height:13px;opacity:.6}

.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:290px;
  background:var(--white);border:1px solid var(--line-3);border-radius:var(--r);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.28);padding:var(--s2);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t) var(--ease-io),transform var(--t) var(--ease-io),visibility var(--t);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop__item{display:flex;align-items:center;gap:var(--s3);padding:9px 10px;border-radius:var(--r-xs)}
.drop__item:hover{background:var(--bg-3)}
.drop__icon{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--line-3);border-radius:var(--r-xs);background:var(--bg-5)}
.drop__icon svg.flat{width:70%;height:auto;color:var(--t4)}
.drop__t{display:block;font-size:.8125rem;font-weight:600;color:var(--t1)}
.drop__d{display:block;font-size:.6875rem;color:var(--t4)}

.nav__tools{display:flex;align-items:center;gap:var(--s2);margin-left:var(--s4)}
.nav__icon{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-xs);
  color:var(--t2);border:1px solid transparent;
}
.nav__icon:hover{color:var(--gold);background:var(--bg-3);border-color:var(--line-3)}
.nav__icon svg{width:18px;height:18px}
.nav__cta{margin-left:var(--s2)}

.basket{
  position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-xs);color:var(--t2);
  font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.basket:hover{color:var(--dark);border-color:var(--gold);background:var(--gold-soft)}
.basket svg{width:17px;height:17px}
.basket__n{
  position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--gold);color:var(--dark);font-size:.625rem;font-weight:700;line-height:1;
}

/* brand lockup */
/* brand lockup — the owner's own artwork, exported at 2x for retina */
.brand{display:inline-flex;align-items:center;flex:none}
.brand__logo{display:block;width:auto;height:36px;flex:none}
.footer .brand__logo{height:46px}
.drawer__top .brand__logo{height:34px}

/* burger + drawer */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:10px}
.burger span{display:block;width:20px;height:2px;background:var(--t1);transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(14,13,13,.55);opacity:0;transition:opacity var(--t) var(--ease-io)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:340px;max-width:92vw;
  background:var(--white);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease);overflow-y:auto;
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:var(--s4);border-bottom:1px solid var(--line-3)}
.drawer__close{width:40px;height:40px;display:grid;place-items:center;color:var(--t2);border-radius:var(--r-xs)}
.drawer__close:hover{color:var(--gold);background:var(--bg-3)}
.drawer__close svg{width:20px;height:20px}
.drawer__nav{display:flex;flex-direction:column;padding:var(--s3)}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:13px 10px;border-bottom:1px solid var(--line-3);
  font-family:var(--font-head);font-size:.875rem;font-weight:600;color:var(--t1);
}
.drawer__link svg{width:15px;height:15px;color:var(--gold)}
.drawer__sub{display:flex;flex-direction:column;padding:var(--s2) 0 var(--s3) var(--s4)}
.drawer__sub a{padding:7px 0;font-size:.8125rem;color:var(--t3)}
.drawer__sub a:hover{color:var(--gold);padding-left:4px}
.drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border-top:1px solid var(--line-3)}

/* ---------- 8. BANNER SLIDER --------------------------------------------- */
.hero{position:relative;background:var(--dark)}
.slider{position:relative;width:100%;aspect-ratio:21/8;min-height:320px;max-height:620px;overflow:hidden}
.slider__track{position:absolute;inset:0}
.slider__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 700ms var(--ease),visibility 700ms var(--ease)}
.slider__slide.is-active{opacity:1;visibility:visible}
/* The supplied factory photo is portrait (1200x1600) and its upper-middle band
   is the printed showroom banner — dense with small wall text that fights the
   headline. Focusing lower puts the packed export orders and finished kit in
   frame instead. On narrow screens the cover crop barely offsets, so this only
   changes the wide layout. */
.slider__slide img{width:100%;height:100%;object-fit:cover;object-position:center 72%}
.slider__slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(6,6,6,.975) 0%,
    rgba(6,6,6,.94) 34%,
    rgba(6,6,6,.72) 52%,
    rgba(6,6,6,.3) 80%,
    rgba(6,6,6,.2) 100%);
}
.slider__cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.slider__cap .container{width:100%}
.slider__cap-in{max-width:660px;display:flex;flex-direction:column;gap:var(--s4);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.slider__eyebrow{
  font-family:var(--font-head);font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
}
.slider__title{
  font-family:var(--font-head);font-size:clamp(1.7rem,4vw,3rem);line-height:1.12;
  font-weight:700;color:var(--t-inv);text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.slider__title .accent{color:var(--gold)}
.slider__lead{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.9);max-width:56ch}
.slider__cap .btn-row{margin-top:var(--s2)}

/* graphic slides (no photo) */
.slider__slide--brand{background:linear-gradient(135deg,var(--dark) 0%,#241f14 100%)}
.slider__slide--brand::after{background:linear-gradient(90deg,rgba(6,6,6,.9),rgba(6,6,6,.35))}
.slider__slide--brand2{background:radial-gradient(circle at 76% 42%,#3b2d07 0%,#18140a 46%,var(--dark) 100%)}
.slider__slide--brand2::after{background:linear-gradient(90deg,rgba(6,6,6,.93),rgba(6,6,6,.4))}
.slider__slide--brand2 .slider__flat{background:rgba(249,178,10,.07);border-color:rgba(249,178,10,.24)}
.slider__slide--brand2 .slider__flat svg.flat{color:rgba(249,178,10,.85)}
.slider__flats{
  position:absolute;right:clamp(16px,5vw,90px);top:50%;transform:translateY(-50%);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);width:min(380px,36vw);z-index:2;
}
.slider__flat{
  aspect-ratio:1/1;display:grid;place-items:center;border-radius:var(--r);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.slider__flat svg.flat{width:66%;height:auto;color:rgba(255,255,255,.72)}

.slider__ui{position:absolute;left:0;right:0;bottom:var(--s5);z-index:3}
.slider__ui-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.slider__dots{display:flex;gap:8px}
.slider__dot{
  width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);
  transition:background var(--t) var(--ease-io),transform var(--t) var(--ease-io);
}
.slider__dot.is-active{background:var(--gold);transform:scale(1.3)}
.slider__nav{display:flex;gap:var(--s2)}
.slider__b{
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-xs);
  background:rgba(14,13,13,.6);border:1px solid rgba(255,255,255,.25);color:var(--t-inv);
}
.slider__b:hover{background:var(--gold);border-color:var(--gold);color:var(--dark)}
.slider__b svg{width:18px;height:18px}

/* ---------- 9. CATEGORY TILES -------------------------------------------- */
.main-cats{background:var(--bg-2);padding-block:var(--s7) var(--s2)}
.cat-block{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--white);border:1px solid var(--line)}
.cat-block__img{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;background:var(--white)}
.cat-block__img svg.flat{width:58%;height:auto;color:var(--t4);transition:transform var(--t-slow) var(--ease)}
.cat-block:hover .cat-block__img svg.flat{transform:scale(1.06)}
.cat-block__img img{width:100%;height:100%;object-fit:cover}
/* the white flash that sweeps in on hover */
.cat-block__img::before,.cat-block__img::after{content:"";position:absolute;z-index:1;background:rgba(255,255,255,.5);transition:all .45s var(--ease-io)}
.cat-block__img::before{top:0;bottom:0;left:0;right:0}
.cat-block__img::after{top:0;bottom:0;left:0;right:0}
.cat-block:hover .cat-block__img::before{right:50%;left:50%}
.cat-block:hover .cat-block__img::after{top:50%;bottom:50%}
.cat-block__name{
  position:absolute;left:0;right:0;bottom:18px;z-index:2;
  display:flex;justify-content:center;pointer-events:none;
}
.cat-block__name span{
  background:rgba(0,0,0,.62);padding:11px 34px;border-radius:var(--r-xs);
  font-family:var(--font-head);font-size:.9375rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-inv);text-align:center;
}
.cat-block__count{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--gold);color:var(--dark);padding:4px 10px;border-radius:var(--r-xs);
  font-family:var(--font-head);font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.cat-block__body{padding:var(--s4)}
.cat-block__body p{font-size:.8125rem;color:var(--t3);line-height:1.6}
.cat-block__list{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.cat-block__list li{
  font-size:.6875rem;color:var(--t4);background:var(--bg-3);
  border:1px solid var(--line-3);border-radius:var(--r-xs);padding:2px 8px;
}

/* ---------- 10. PRODUCT BLOCK -------------------------------------------- */
.pcard{
  position:relative;display:flex;flex-direction:column;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);transition:border-color var(--t) var(--ease-io),box-shadow var(--t) var(--ease-io);
}
.pcard:hover{border-color:var(--dark);box-shadow:0 12px 30px -18px rgba(0,0,0,.3)}
.pcard__media{
  position:relative;display:grid;place-items:center;aspect-ratio:1/1;
  background:var(--bg-5);border-radius:var(--r-xs);overflow:hidden;margin-bottom:var(--s3);
}
.pcard__media svg.flat{width:66%;height:auto;color:var(--t4);transition:transform var(--t-slow) var(--ease)}
.pcard:hover .pcard__media svg.flat{transform:scale(1.05)}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__code{
  position:absolute;top:8px;left:8px;z-index:2;
  background:var(--gold);color:var(--dark);padding:3px 8px;border-radius:var(--r-xs);
  font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.06em;
}
.pcard__body{display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__cat{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.pcard__name{font-family:var(--font-head);font-size:.875rem;font-weight:600;line-height:1.35;color:var(--t1)}
.pcard__name a{color:inherit}
.pcard__name a:hover{color:var(--gold)}
.pcard__blurb{font-size:.75rem;color:var(--t3);line-height:1.5}
.pcard__spec{display:flex;justify-content:center;gap:var(--s4);margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line-3)}
.pcard__spec dt{font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.pcard__spec dd{font-family:var(--mono);font-size:.75rem;font-weight:600;color:var(--t1)}

/* quantity + actions revealed on hover, as on the reference grid */
.pcard__hover{
  position:absolute;left:0;right:0;top:38%;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:6px;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t) var(--ease-io),transform var(--t) var(--ease-io);
}
.pcard:hover .pcard__hover,.pcard:focus-within .pcard__hover{opacity:1;transform:none;pointer-events:auto}
.pcard__ib{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--gold);color:var(--dark);
}
.pcard__ib:hover{background:var(--dark);color:var(--t-inv)}
.pcard__ib svg{width:17px;height:17px}
.pcard__ib.is-added{background:#25C55E;color:#062e17}
.pcard__qty{
  display:flex;align-items:center;background:var(--white);border:1px solid var(--dark);
  border-radius:var(--r-xs);overflow:hidden;
}
.pcard__qty input{
  width:52px;height:38px;text-align:center;border:0;background:transparent;
  font-family:var(--mono);font-size:.8125rem;font-weight:600;color:var(--t1);-moz-appearance:textfield;
}
.pcard__qty input::-webkit-outer-spin-button,.pcard__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pcard__qty input:focus{outline:none;background:var(--gold-soft)}
.pcard__foot{display:flex;gap:var(--s2);margin-top:var(--s3)}
.pcard__foot .btn{flex:1;padding:10px 12px;font-size:.6875rem}

/* ---------- 11. FEATURED RAIL -------------------------------------------- */
.rail{position:relative}
.rail__track{display:flex;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s4)}
.rail__track::-webkit-scrollbar{height:6px}
.rail__track::-webkit-scrollbar-track{background:var(--line-3)}
.rail__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-full)}
.rail__track > .pcard{flex:0 0 clamp(230px,24vw,278px);scroll-snap-align:start}
.rail__nav{display:flex;gap:var(--s2)}
.rail__b{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--white);color:var(--t2);
}
.rail__b:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--dark)}
.rail__b:disabled{opacity:.35;cursor:not-allowed}
.rail__b svg{width:18px;height:18px}

/* ---------- 12. WHY-CHOOSE BAND ------------------------------------------ */
.why-choose{display:grid;grid-template-columns:repeat(4,1fr)}
.why-choose__i{padding:var(--s6) var(--s5);text-align:center;color:var(--t-inv)}
.why-choose__i:nth-child(1){background:var(--gold)}
.why-choose__i:nth-child(2){background:var(--gold-2)}
.why-choose__i:nth-child(3){background:var(--gold-3)}
.why-choose__i:nth-child(4){background:var(--gold-4)}
.why-choose__i svg{width:30px;height:30px;margin:0 auto var(--s2);color:var(--dark)}
.why-choose__t{font-family:var(--font-head);font-size:1.0625rem;font-weight:700;color:var(--t-inv);margin-bottom:4px}
.why-choose__d{font-size:.75rem;line-height:1.55;color:rgba(255,255,255,.92)}

/* ---------- 13. STATS / MARQUEE ------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);text-align:center}
.stat__n{font-family:var(--font-head);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;color:var(--gold);line-height:1}
.stat__l{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);margin-top:6px}
.marquee{
  overflow:hidden;background:var(--dark);padding-block:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  display:inline-flex;align-items:center;gap:var(--s5);padding-inline:var(--s5);
  font-family:var(--font-head);font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;
}
.marquee__item::after{content:"";width:5px;height:5px;background:var(--gold);flex:none;transform:rotate(45deg)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 14. SIDEBAR CATEGORY MENU ------------------------------------ */
.catalog{display:grid;grid-template-columns:262px 1fr;gap:var(--s7);align-items:start}
.side{position:sticky;top:calc(var(--nav-h) + 16px)}
.side__head{
  background:var(--dark);color:var(--t-inv);padding:14px var(--s4);border-radius:var(--r) var(--r) 0 0;
  font-family:var(--font-head);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.side__list{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.side__cat{display:block}
.side__cat > a{
  display:flex;align-items:center;gap:8px;min-height:50px;padding:0 13px;border-radius:var(--r);
  background:var(--gold);color:var(--t-inv);
  font-family:var(--font-head);font-size:.8125rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  line-height:1.25;
}
.side__cat > a:hover,.side__cat > a.is-active{background:var(--dark);color:var(--t-inv)}
.side__cat > a svg{width:16px;height:16px;flex:none}
.side__cat.is-open > a{background:var(--dark)}
.side__sub{padding:var(--s2) 0 var(--s3) 4px}
.side__sub a{
  display:block;padding:7px 0;border-bottom:1px solid var(--line-3);
  font-size:.8125rem;color:var(--t2);
}
.side__sub li:last-child a{border-bottom:0}
.side__sub a:hover,.side__sub a.is-active{color:var(--gold);padding-left:5px}
.side__count{font-family:var(--mono);font-size:.6875rem;color:var(--t4);margin-left:auto;flex:none;padding-left:6px}
.side__sub a:hover .side__count{color:var(--gold)}

.side__card{margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);text-align:center;background:var(--bg-5)}
.side__card h4,.side__card h2{font-family:var(--font-head);font-size:.875rem;font-weight:700;color:var(--t1);margin-bottom:6px}
.side__card p{font-size:.75rem;color:var(--t3);margin-bottom:var(--s3)}

/* ---------- 15. BREADCRUMB BAR ------------------------------------------- */
.phead{background:var(--dark);color:var(--t-inv);padding-block:var(--s5)}
.phead__in{display:flex;flex-direction:column;gap:var(--s3)}
.phead h1{font-family:var(--font-head);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;color:var(--t-inv);line-height:1.2}
.phead .lead{color:rgba(255,255,255,.72);font-size:.9375rem}
.phead .eyebrow{color:var(--gold)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--font-head);font-size:.8125rem}
.crumbs a{color:var(--t2)}
.crumbs a:hover{color:var(--gold-dk)}
.crumbs svg{width:14px;height:14px;color:var(--t4);flex:none}
.crumbs span{color:var(--t3)}
/* inside the dark page-header bar */
.phead .crumbs a{color:rgba(255,255,255,.8)}
.phead .crumbs a:hover{color:var(--gold)}
.phead .crumbs svg{color:currentColor;opacity:.55}
.phead .crumbs span{color:var(--t-inv-2)}

/* ---------- 16. FILTERS -------------------------------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  padding:var(--s3);background:var(--bg-5);border:1px solid var(--line-3);
  border-radius:var(--r);margin-bottom:var(--s6);
}
.fbtn{
  padding:9px 15px;border:1px solid transparent;border-radius:var(--r-xs);
  font-family:var(--font-head);font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t3);white-space:nowrap;
}
.fbtn:hover{color:var(--t1);background:var(--bg-4)}
.fbtn.is-active{background:var(--gold);border-color:var(--gold);color:var(--dark)}
.filters__search{margin-left:auto;position:relative;min-width:200px;flex:1;max-width:280px}
.filters__search input{
  width:100%;padding:9px 14px 9px 36px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-xs);font-size:.8125rem;color:var(--t1);min-height:38px;
}
.filters__search input:focus{outline:none;border-color:var(--gold)}
.filters__search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--t4)}

.result-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}

.pagination{display:flex;justify-content:center;gap:6px;margin-top:var(--s7);flex-wrap:wrap}
.pagination button{
  min-width:34px;height:34px;padding:0 10px;border-radius:var(--r-xs);
  background:var(--gold);color:var(--dark);
  font-family:var(--font-head);font-size:.75rem;font-weight:600;
}
.pagination button:hover{background:var(--dark);color:var(--t-inv)}
.pagination button.is-active{background:var(--dark);color:var(--t-inv)}
.pagination button:disabled{opacity:.35;cursor:not-allowed}

/* ---------- 17. PRODUCT DETAIL ------------------------------------------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.pdp__gallery{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:calc(var(--nav-h) + 16px)}
.pdp__main{
  position:relative;width:100%;aspect-ratio:1/1;background:var(--bg-5);
  border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;
  overflow:hidden;padding:0;cursor:default;
}
.pdp__main svg.flat{width:62%;height:auto;color:var(--t4)}
.pdp__main img{width:100%;height:100%;object-fit:cover}
.pdp__main.is-zoomable{cursor:zoom-in}
.pdp__zoom{
  position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--r-xs);background:rgba(14,13,13,.75);color:var(--t-inv);
  font-family:var(--font-head);font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.pdp__zoom svg{width:13px;height:13px}
.pdp__thumbs{display:flex;gap:var(--s3);flex-wrap:wrap}
.pdp__thumb{
  width:80px;height:80px;padding:0;border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--bg-5);display:grid;place-items:center;overflow:hidden;cursor:pointer;
}
.pdp__thumb:hover{border-color:var(--gold)}
.pdp__thumb.is-active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pdp__thumb img{width:100%;height:100%;object-fit:cover}

.pdp__info{display:flex;flex-direction:column;gap:var(--s5)}
.pdp__code{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.pdp__title{font-family:var(--font-head);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;color:var(--t1);line-height:1.2}
.pdp__buy{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.pdp__buy .btn{flex:1;min-width:210px}

.spec-table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec-table__row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line-3)}
.spec-table__row:last-child{border-bottom:0}
.spec-table__k{
  padding:11px var(--s4);background:var(--bg-5);
  font-family:var(--font-head);font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t4);border-right:1px solid var(--line-3);
}
.spec-table__v{padding:11px var(--s4);font-size:.875rem;color:var(--t1);background:var(--white)}
.spec-table__v.mono{font-family:var(--mono);font-size:.8125rem}

/* ---------- 18. QUOTE TABLE ---------------------------------------------- */
.quote-layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(24px,4vw,44px);align-items:start}
.quote-layout > .empty{grid-column:1/-1}
.quote-list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qhead{
  display:grid;grid-template-columns:88px 1fr 190px 60px;gap:var(--s4);
  background:var(--dark);color:var(--t-inv);padding:12px var(--s4);
  font-family:var(--font-head);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.qhead span:first-child{grid-column:1/3}
.qrow{
  position:relative;display:grid;grid-template-columns:88px 1fr 190px 60px;gap:var(--s4);
  align-items:center;padding:var(--s4);border-bottom:1px solid var(--line-3);background:var(--white);
}
.qrow:last-child{border-bottom:0}
.qrow:hover{background:var(--bg-5)}
.qrow__media{
  width:88px;height:88px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line-3);border-radius:var(--r-xs);background:var(--bg-5);
}
.qrow__media svg.flat{width:70%;height:auto;color:var(--t4)}
.qrow__media img{width:100%;height:100%;object-fit:cover}
.qrow__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.qrow__code{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.qrow__name{font-family:var(--font-head);font-size:.9375rem;font-weight:600;color:var(--t1);line-height:1.3}
.qrow__name a{color:inherit}
.qrow__name a:hover{color:var(--gold)}
.qrow__meta{font-size:.6875rem;color:var(--t4)}
.qrow__qty{display:flex;flex-direction:column;gap:5px}
.qrow__lbl{font-family:var(--font-head);font-size:.5625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)}
.qrow__x{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-xs);color:var(--t4)}
.qrow__x:hover{color:#F00;background:#fdecec}
.qrow__x svg{width:16px;height:16px}
.quote-main__foot{margin-top:var(--s5)}
.quote-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:.8125rem;font-weight:600;color:var(--t3)}
.quote-back:hover{color:var(--gold)}
.quote-back svg{width:16px;height:16px}
.quote-side{position:sticky;top:calc(var(--nav-h) + 16px)}
.qsum{
  display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5);
  border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r);background:var(--bg-5);
}
.qsum__rows{display:flex;flex-direction:column;gap:var(--s2);border-block:1px solid var(--line-3);padding-block:var(--s4)}
.qsum__rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.qsum__rows span{font-size:.75rem;color:var(--t3)}
.qsum__rows strong{font-family:var(--font-head);font-size:1.25rem;font-weight:700;color:var(--t1)}
.qsum__total{display:flex;align-items:baseline;justify-content:space-between;border-top:2px solid var(--line);padding-top:var(--s3)}
.qsum__total span{font-family:var(--font-head);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t1)}
.qsum__total strong{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--gold)}
.basket-actions{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}

.empty{
  padding:var(--s9) var(--s5);text-align:center;border:1px dashed var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;align-items:center;gap:var(--s3);background:var(--bg-5);
}
.empty svg{width:36px;height:36px;color:var(--t4)}
.empty--lg{padding-block:var(--s10)}
.empty--lg .btn-row{margin-top:var(--s4)}

/* ---------- 19. FORMS ---------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t1)}
.req{color:#F00}
.hint{font-size:.75rem;color:var(--t4);font-weight:400;text-transform:none;letter-spacing:0}
.input,.select,.textarea{
  width:100%;padding:12px 14px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r);font-size:.875rem;color:var(--t1);min-height:46px;
  transition:border-color var(--t-fast) var(--ease-io),background var(--t-fast) var(--ease-io);
}
.textarea{min-height:130px;resize:vertical;line-height:1.65}
.input:hover,.select:hover,.textarea:hover{border-color:var(--gold)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold);background:var(--white)}
.input::placeholder,.textarea::placeholder{color:var(--t5)}
.input[readonly]{background:var(--bg-4);color:var(--t3)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px;padding-right:38px}
.field__err{font-size:.75rem;color:#F00;display:none}
.field.is-error .input,.field.is-error .select,.field.is-error .textarea{border-color:#F00;background:#fdecec}
.field.is-error .field__err{display:block}

.drop-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:var(--s6) var(--s5);border:2px dashed var(--line);border-radius:var(--r);
  background:var(--bg-3);text-align:center;cursor:pointer;transition:border-color var(--t-fast) var(--ease-io),background var(--t-fast) var(--ease-io);
}
.drop-zone:hover,.drop-zone.is-drag{border-color:var(--gold);background:var(--gold-soft)}
.drop-zone svg{width:30px;height:30px;color:var(--gold)}
.drop-zone__t{font-family:var(--font-head);font-size:.875rem;font-weight:600;color:var(--t1)}
.drop-zone__d{font-size:.75rem;color:var(--t4)}
input[type="file"]{display:none}
.file-list{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.file-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 10px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xs);font-size:.75rem;
}
.file-chip svg{width:14px;height:14px;color:var(--gold);flex:none}
.file-chip__n{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}
.file-chip__s{font-family:var(--mono);font-size:.6875rem;color:var(--t4)}
.file-chip button{color:var(--t4);display:grid;place-items:center}
.file-chip button:hover{color:#F00}
.file-chip button svg{width:13px;height:13px}

.checkbox{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;color:var(--t3);text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer}
.checkbox input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--gold)}
.form-status{display:none;grid-column:1/-1;gap:var(--s3);padding:var(--s4);border-radius:var(--r);border:1px solid var(--line);background:var(--bg-5)}
.form-status.is-on{display:flex}
.form-status svg{width:22px;height:22px;flex:none;margin-top:2px}
.form-status--ok{border-color:#25C55E;background:#f0fbf4}
.form-status--ok svg{color:#1a9c47}
.form-status--err{border-color:#F00;background:#fdecec}
.form-status--err svg{color:#F00}
.form-status__t{font-family:var(--font-head);font-weight:600;color:var(--t1)}
.form-status__d{font-size:.8125rem;color:var(--t3);margin-top:4px}

/* What actually happened to this enquiry, listed plainly. A buyer who sees
   "logged in our console" as well as "WhatsApp opened" knows the request is
   safe even if they close the WhatsApp tab — which is the whole point of
   recording it before opening the chat. */
.form-status__ch{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.form-status__ch-i{
  display:flex;align-items:center;gap:6px;
  font-size:.75rem;color:#1a9c47;font-weight:600;
}
.form-status__ch-i svg{width:13px;height:13px;margin:0;flex:none}
.form-status__note{
  margin-top:8px;padding:8px 10px;border-radius:var(--r-xs);
  background:#fff8e6;border:1px solid #f0d48a;
  font-size:.75rem;color:#7a5a10;
}
/* the per-enquiry order reference — click once to select the whole code */
.ref-chip{
  display:inline-block;padding:3px 10px;border-radius:var(--r-xs);
  background:var(--dark);color:var(--gold);
  font-family:var(--mono);font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  white-space:nowrap;user-select:all;-webkit-user-select:all;cursor:text;
}
.form__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;padding-top:var(--s4);border-top:1px solid var(--line-3)}
.form__note{font-size:.75rem;color:var(--t4);max-width:48ch}

/* ---------- 20. CARDS & NOTES -------------------------------------------- */
.card{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.card__rule{height:2px;width:44px;background:var(--gold);margin:var(--s3) 0 var(--s4)}
.card h4,.card .eyebrow{display:block}

.feat{padding:var(--s5);border:1px solid var(--line-3);border-radius:var(--r);background:var(--white)}
.feat__icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--gold-soft);border:1px solid var(--gold);margin-bottom:var(--s3);
}
.feat__icon svg{width:22px;height:22px;color:var(--gold-dk)}
.feat h3{font-family:var(--font-head);font-size:.9375rem;font-weight:600;color:var(--t1);margin-bottom:6px}
.feat p{font-size:.8125rem;color:var(--t3);line-height:1.65}

.cred{display:flex;gap:var(--s4);padding:var(--s5);border:1px solid var(--line-3);border-radius:var(--r);background:var(--white)}
.cred__icon{width:30px;height:30px;flex:none;color:var(--gold);margin-top:2px}
.cred__t{font-family:var(--font-head);font-size:.9375rem;font-weight:600;color:var(--t1)}
.cred__d{font-size:.8125rem;color:var(--t3);margin-top:5px;line-height:1.6}
.cred__v{font-family:var(--mono);font-size:.75rem;color:var(--gold-dk);margin-top:8px;font-weight:600}

/* ---------- credential marks (real logos, not drawn) --------------------- */
/* Both logos are wide lockups (SCCI 411x92, FBR 532x77) on transparent
   ground, so they are height-capped and allowed to size by aspect ratio.
   `align-items:flex-start` keeps the taller of the two from stretching the
   other, and `max-width:100%` stops either escaping a narrow column. */
.cred--marks{align-items:flex-start;flex-wrap:wrap}
.cred__marks{display:flex;flex-direction:column;gap:var(--s3);flex:none;align-items:flex-start}
.cred__marks img{display:block;height:34px;width:auto;max-width:100%;object-fit:contain}
.note{display:flex;gap:var(--s4);padding:var(--s5);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);background:var(--gold-soft)}
.note svg{width:22px;height:22px;flex:none;color:var(--gold-dk);margin-top:2px}
.note__t{font-family:var(--font-head);font-weight:600;color:var(--t1);margin-bottom:5px}
.note p{font-size:.8125rem;color:var(--t3);line-height:1.7}
.note--warn{background:#fff8e8;border-color:var(--gold);border-left-color:var(--gold-dk)}
.note--warn svg{color:var(--gold-dk)}

.list-check{display:flex;flex-direction:column;gap:var(--s3)}
.list-check li{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;color:var(--t3)}
.list-check svg{width:17px;height:17px;flex:none;color:var(--gold);margin-top:3px}
.list-num{display:flex;flex-direction:column;gap:var(--s3);counter-reset:n}
.list-num li{display:flex;gap:var(--s3);align-items:flex-start;font-size:.875rem;color:var(--t3);counter-increment:n}
.list-num li::before{
  content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:.75rem;
  font-weight:700;color:var(--gold);flex:none;margin-top:2px;
}

/* ---------- 21. PROCESS STEPS -------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.step{padding-right:var(--s5)}
.step__top{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.step__n{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1}
.step__line{flex:1;height:1px;background:var(--line)}
.step h3{font-family:var(--font-head);font-size:.9375rem;font-weight:600;color:var(--t1);margin-bottom:6px}
.step p{font-size:.8125rem;color:var(--t3);line-height:1.65}

/* ---------- 22. MEDIA / GALLERY ------------------------------------------ */
.gallery-strip{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.media-frame{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-5)}
.media-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* The strip holds one real photo, so it is a single wide frame. The source is
   portrait (1200x1600) with a printed banner wall across the upper half, so the
   crop is weighted downward to show the bagged orders and the ball — the same
   framing the hero uses. Scoped to the gallery on purpose: about.html shares
   .media-frame and sets its own ratio inline. */
.gallery-strip .media-frame img{aspect-ratio:16/9;object-position:center 72%}
.media-cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s5) var(--s4) var(--s4);background:linear-gradient(180deg,transparent,rgba(6,6,6,.85))}
.media-cap__t{font-family:var(--font-head);font-size:.8125rem;font-weight:600;color:var(--t-inv)}
.media-cap__d{font-size:.6875rem;color:rgba(255,255,255,.7);margin-top:2px}

/* ---------- 23. MARKETS / PAYMENTS --------------------------------------- */
.market-grid{display:flex;flex-wrap:wrap;gap:var(--s2)}
.market{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  border:1px solid var(--line-3);border-radius:var(--r-xs);background:var(--white);
  font-size:.75rem;color:var(--t3);
}
.market svg{width:14px;height:14px;color:var(--gold);flex:none}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:var(--s4)}
/* Six methods: an even 3x2 beats auto-fill's 4+2, which leaves a dead slot. */
@media (min-width:1000px){.pay-grid{grid-template-columns:repeat(3,1fr)}}
.pay{min-width:0;padding:var(--s4);border:1px solid var(--line-3);border-radius:var(--r);background:var(--white)}
/* The mark slot holds a provider's own logo, or — for a method with no brand
   mark — its name as text. A fixed logo height normalises six very different
   aspect ratios (2.8:1 to 4.7:1) so the row reads evenly.
   NOTE: the logo is sized with an explicit px height, not `max-height:100%`.
   A percentage max-height on a grid item does not resolve against the grid
   area here — the image rendered 212x49 inside a 36px content box and was
   clipped by `overflow:hidden`. Flex + px height is deterministic. */
.pay__logo{
  display:flex;align-items:center;justify-content:center;
  height:56px;margin-bottom:var(--s3);padding:10px 12px;
  border:1px solid var(--line-3);border-radius:var(--r-xs);background:var(--bg-5);
  overflow:hidden;text-align:center;line-height:1.15;
  font-family:var(--font-head);font-size:.875rem;font-weight:700;color:var(--t1);
}
.pay__logo img{display:block;height:34px;width:auto;max-width:100%;object-fit:contain}
.pay__d{display:block;font-size:.6875rem;color:var(--t4)}
.pay-attr{margin-top:var(--s4);font-size:.6875rem;color:var(--t5);max-width:820px}

/* ---------- 24. FAQ ------------------------------------------------------ */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.faq__item{border-bottom:1px solid var(--line-3)}
.faq__item:last-child{border-bottom:0}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);text-align:left;
  font-family:var(--font-head);font-size:.9375rem;font-weight:600;color:var(--t1);
}
.faq__q:hover{color:var(--gold)}
.faq__ico{position:relative;width:18px;height:18px;flex:none}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--gold);transition:transform var(--t) var(--ease-io)}
.faq__ico::before{top:8px;left:0;width:18px;height:2px}
.faq__ico::after{left:8px;top:0;width:2px;height:18px}
.faq__item.is-open .faq__ico::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease-io)}
.faq__a-in{padding:0 var(--s5) var(--s5);font-size:.875rem;color:var(--t3);line-height:1.75;max-width:80ch}
.faq__a-in strong{color:var(--t1)}

/* ---------- 25. CTA BAND ------------------------------------------------- */
.cta-band{background:var(--dark);color:var(--t-inv);padding-block:var(--s8)}
.cta-band__in{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center}
.cta-band .display-l{color:var(--t-inv)}
.cta-band .lead{color:rgba(255,255,255,.74)}
.cta-band .eyebrow{color:var(--gold)}

/* ---------- 26. NEWSLETTER BAND ------------------------------------------ */
.signup{background:var(--dark);padding-block:var(--s7);text-align:center}
.signup h2{font-family:var(--font-head);font-size:1.25rem;font-weight:700;color:var(--t-inv);margin-bottom:6px}
.signup p{color:var(--t4);font-size:.875rem;max-width:62ch;margin-inline:auto}
.signup__form{
  display:flex;align-items:center;gap:var(--s3);max-width:560px;margin:var(--s5) auto 0;
  background:var(--dark-2);border:1px solid var(--line-dark-2);border-radius:var(--r);padding:10px 12px;
}
.signup__form svg{width:20px;height:20px;color:var(--gold);flex:none}
.signup__form input{
  flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line-dark-2);
  padding:8px 2px;color:var(--t-inv);font-size:.875rem;
}
.signup__form input::placeholder{color:#5c5c5c}
.signup__form input:focus{outline:none;border-bottom-color:var(--gold)}
.signup__form button{flex:none}
.signup__status{display:block;margin-top:var(--s3);font-size:.8125rem;min-height:1.2em}
.signup__status.is-ok{color:#4ade80}
.signup__status.is-err{color:#f87171}

/* ---------- 27. FOOTER + COPYRIGHT --------------------------------------- */
.footer{background:var(--dark-2);color:var(--t-inv);padding-block:var(--s7) var(--s6)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:var(--s7) var(--s6)}
.footer h4,.footer h2{
  font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--t-inv);
  margin-bottom:var(--s4);letter-spacing:.02em;
}
.footer__desc{font-size:.8125rem;color:#b9b9b9;line-height:1.75;margin-top:var(--s4)}
.footer__list{display:flex;flex-direction:column;gap:9px}
.footer__list a{font-size:.8125rem;color:#d8d8d8}
.footer__list a:hover{color:var(--gold);padding-left:4px}
.footer__contact{display:flex;flex-direction:column}
.footer__ci{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--line-dark);font-size:.8125rem;color:#d8d8d8}
.footer__ci:last-child{border-bottom:0}
.footer__ci svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:2px}
.footer__ci span{display:block;font-family:var(--font-head);font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a;margin-bottom:2px}
.footer__ci a{color:#d8d8d8}
.footer__ci a:hover{color:var(--gold)}
.footer .tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#d8d8d8}
.footer .tag--blue{background:rgba(249,178,10,.14);border-color:var(--gold);color:var(--gold)}

.footer__news{border-bottom:1px solid var(--line-dark);padding-bottom:var(--s6);margin-bottom:var(--s6)}
.footer__news-t{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--t-inv);margin-top:6px}
.footer__news-d{font-size:.8125rem;color:#b9b9b9;margin-top:6px;max-width:62ch}
.footer__news-form{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s4);max-width:560px}
.footer__news-form .input{flex:1;min-width:200px;background:var(--dark);border-color:var(--line-dark-2);color:var(--t-inv)}
.footer__news-form .input::placeholder{color:#5c5c5c}
.footer__news-status{font-size:.75rem;flex-basis:100%}
.footer__news-status.is-ok{color:#4ade80}
.footer__news-status.is-err{color:#f87171}

.social{margin-top:var(--s5)}
.social__label{display:block;font-family:var(--font-head);font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin-bottom:var(--s3)}
.social__row{display:flex;gap:var(--s2);flex-wrap:wrap}
.social__a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--dark);color:var(--t-inv);
  transition:background var(--t) var(--ease-io),color var(--t) var(--ease-io),transform var(--t-slow) var(--ease);
}
.social__a:hover{background:var(--gold);color:var(--dark);transform:rotate(360deg)}
.social__a svg{width:17px;height:17px}

.copy{background:var(--dark);padding-block:var(--s4)}
/* The WhatsApp float is position:fixed bottom-right (24px from each edge), so
   it hovers over whatever sits in the bottom-right of the VIEWPORT — and at the
   end of a page that is the copy bar. Two earlier attempts failed because they
   tried to reason about it one axis at a time:
     - right-padding the bar worked while the staff link sat on the right of a
       single row, and broke the moment the bar reflowed and the link moved left;
     - bottom-padding only below 900px fixed the narrow band and broke desktop.
   The float occupies a band roughly 71px tall in the bottom-right corner, so
   the reliable rule is: on a single-row bar give the right edge room, on a
   wrapped bar give the bottom room. A wrapped bar already stacks the link away
   from the right edge at narrow widths, which is why the bottom padding there
   only needs to clear the float's height. */
@media (min-width:901px){
  .copy__in{padding-right:200px}
}
@media (max-width:900px){
  .copy{padding-bottom:84px}
}
.copy__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.copy p{font-size:.8125rem;color:#c9c9c9;text-align:center}
.copy a{color:var(--gold)}
.copy a:hover{text-decoration:underline}
.copy__pay{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:.75rem;color:#8a8a8a}
.copy__pay span{color:#c9c9c9}

/* Staff sign-in entry point. Deliberately understated — it must be findable by
   staff without reading as a call to action for a buyer, so it is quiet grey,
   not gold, and sits after the payment chips rather than competing with them. */
.copy__right{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.copy__staff{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.75rem;color:#8a8a8a;letter-spacing:.02em;
  padding:6px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  transition:color var(--t) var(--ease-io),border-color var(--t) var(--ease-io),background var(--t) var(--ease-io);
}
.copy__staff svg{width:14px;height:14px}
.copy__staff:hover{color:var(--gold);border-color:rgba(249,178,10,.5);background:rgba(249,178,10,.08);text-decoration:none}

/* ---------- 28. FLOATING ACTIONS ----------------------------------------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border-radius:var(--r);
  background:#25D366;color:#062e17;font-family:var(--font-head);font-size:.8125rem;font-weight:600;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45);
}
.wa-float:hover{background:var(--dark);color:var(--t-inv)}
.wa-float svg{width:19px;height:19px;flex:none}
.wa-float__ring{position:absolute;inset:0;border-radius:inherit;border:2px solid #25D366;animation:ring 2.4s var(--ease) infinite;pointer-events:none}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.to-top{
  position:fixed;right:24px;bottom:88px;z-index:70;
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--gold);color:var(--dark);opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease-io),visibility var(--t),background var(--t) var(--ease-io);
}
.to-top.is-on{opacity:1;visibility:visible}
.to-top:hover{background:var(--dark);color:var(--t-inv)}
.to-top svg{width:18px;height:18px}

/* ---------- 29. SEARCH PANEL --------------------------------------------- */
.search-panel{
  position:fixed;left:0;right:0;top:0;z-index:90;background:var(--white);
  border-bottom:3px solid var(--gold);box-shadow:0 24px 50px -24px rgba(0,0,0,.35);
  animation:spIn 240ms var(--ease);
}
@keyframes spIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.search-panel__in{padding-block:var(--s5)}
.search-panel__form{display:flex;align-items:center;gap:var(--s3)}
.search-panel__form > svg{width:20px;height:20px;color:var(--gold);flex:none}
.search-panel__input{
  flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;font-family:var(--font-head);font-size:1.0625rem;color:var(--t1);
}
.search-panel__input:focus{outline:none;border-bottom-color:var(--gold)}
.search-panel__input::placeholder{color:var(--t5)}
.search-panel__close{width:38px;height:38px;flex:none;display:grid;place-items:center;color:var(--t3);border-radius:var(--r-xs)}
.search-panel__close:hover{color:var(--dark);background:var(--bg-4)}
.search-panel__close svg{width:19px;height:19px}
.search-panel__results{margin-top:var(--s5);max-height:min(58vh,480px);overflow-y:auto}
.search-hint .tag-row{margin-top:var(--s3)}
.search-chip{cursor:pointer;font-family:var(--font-head)}
.search-chip:hover{border-color:var(--gold);color:var(--dark);background:var(--gold-soft)}
.search-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.sres{
  display:flex;align-items:center;gap:var(--s3);padding:10px 12px;
  border:1px solid var(--line-3);border-radius:var(--r-xs);background:var(--white);
}
.sres:hover{border-color:var(--gold);background:var(--gold-soft)}
.sres__media{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--bg-5);border-radius:var(--r-xs);overflow:hidden}
.sres__media svg.flat{width:72%;height:auto;color:var(--t4)}
.sres__body{display:flex;flex-direction:column;min-width:0;flex:1}
.sres__code{font-family:var(--mono);font-size:.5625rem;font-weight:700;letter-spacing:.08em;color:var(--gold)}
.sres__name{font-family:var(--font-head);font-size:.8125rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres__cat{font-size:.6875rem;color:var(--t4)}
.sres > svg{width:15px;height:15px;color:var(--t4);flex:none}
.search-all{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s4);font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dk)}
.search-all svg{width:15px;height:15px}
.search-none{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;padding:var(--s6) 0}
.search-none svg{width:26px;height:26px;color:var(--t4)}
.search-none p{color:var(--t3);font-size:.875rem;max-width:56ch}
html.is-searching{overflow:hidden}

/* ---------- 30. QUANTITY / LIGHTBOX / TOAST ------------------------------ */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--white);overflow:hidden}
.qty__b{width:40px;height:44px;display:grid;place-items:center;color:var(--t3)}
.qty__b:hover{color:var(--dark);background:var(--gold-soft)}
.qty__b svg{width:15px;height:15px}
.qty__i{
  width:78px;height:44px;text-align:center;background:transparent;border:0;
  border-inline:1px solid var(--line);color:var(--t1);
  font-family:var(--mono);font-size:.875rem;font-weight:600;-moz-appearance:textfield;
}
.qty__i::-webkit-outer-spin-button,.qty__i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty__i:focus{outline:none;background:var(--gold-soft)}
.qty--lg .qty__b{width:48px;height:50px}
.qty--lg .qty__i{height:50px;width:96px;font-size:1rem}

.lightbox{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:rgba(6,6,6,.94);padding:clamp(16px,4vw,56px);
  opacity:0;transition:opacity var(--t) var(--ease-io);
}
.lightbox.is-open{opacity:1}
.lightbox__body img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--r);background:var(--white)}
.lightbox__x{
  position:absolute;top:var(--s5);right:var(--s5);width:46px;height:46px;
  display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--gold);color:var(--dark);
}
.lightbox__x:hover{background:var(--t-inv)}
.lightbox__x svg{width:20px;height:20px}

.toast-wrap{
  position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:95;
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;
  pointer-events:none;width:min(440px,calc(100% - 32px));
}
.toast{
  display:flex;align-items:center;gap:10px;width:100%;padding:13px 15px;
  border-radius:var(--r);background:var(--dark);color:var(--t-inv);
  border-left:4px solid var(--gold);box-shadow:0 20px 44px -18px rgba(0,0,0,.5);
  font-size:.8125rem;pointer-events:auto;
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.toast.is-in{opacity:1;transform:none}
.toast > svg{width:16px;height:16px;color:#4ade80;flex:none}
.toast span{flex:1;min-width:0}
.toast__a{font-family:var(--font-head);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);white-space:nowrap}

/* ---------- 31. ANIMATION ------------------------------------------------ */
/* The horizontal reveal offsets are capped at one container gutter (--s4).
   A revealed element starts inside the container's padding box and slides in,
   so it can never reach past the container's border box — which means an
   un-revealed element below the fold cannot widen the document. Anything
   larger than the gutter (24px used to be) pushed the right edge past the
   viewport on every page and made the whole document scrollable sideways. */
[data-reveal]{opacity:0;transform:translateY(20px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
[data-reveal="left"]{transform:translateX(calc(var(--s4) * -1))}
[data-reveal="right"]{transform:translateX(var(--s4))}
[data-reveal="scale"]{transform:scale(.97)}
[data-reveal].is-in[data-reveal="left"],[data-reveal].is-in[data-reveal="right"],[data-reveal].is-in[data-reveal="scale"]{transform:none}
[data-stagger] > *{opacity:0;transform:translateY(18px)}
[data-stagger].is-in > *{opacity:1;transform:none;transition:opacity 560ms var(--ease),transform 560ms var(--ease)}
[data-stagger].is-in > *:nth-child(1){transition-delay:0ms}
[data-stagger].is-in > *:nth-child(2){transition-delay:70ms}
[data-stagger].is-in > *:nth-child(3){transition-delay:140ms}
[data-stagger].is-in > *:nth-child(4){transition-delay:210ms}
[data-stagger].is-in > *:nth-child(5){transition-delay:280ms}
[data-stagger].is-in > *:nth-child(6){transition-delay:350ms}
[data-stagger].is-in > *:nth-child(n+7){transition-delay:400ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal],[data-stagger] > *{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}

/* ---------- 32. RESPONSIVE ----------------------------------------------- */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .footer__about{grid-column:1/-1}
  .catalog{grid-template-columns:210px 1fr;gap:var(--s6)}
  .quote-layout{grid-template-columns:1fr}
  .quote-side{position:relative;top:auto}
  .slider__flats{display:none}
}
@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__tools{margin-left:auto}
  .nav__cta{display:none}
  .basket__t{display:none}
  .topbar__meta{display:none}
  .topbar__in{justify-content:center}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .why-choose{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split,.split--wide,.split--narrow{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .gallery-strip{grid-template-columns:1fr}
  .cta-band__in{grid-template-columns:1fr;gap:var(--s6)}
  .catalog{grid-template-columns:1fr}
  .side{position:relative;top:auto}
  .pdp{grid-template-columns:1fr;gap:var(--s7)}
  .pdp__gallery{position:relative;top:auto}
  .form{grid-template-columns:1fr}
  .search-list{grid-template-columns:1fr}
  .slider{aspect-ratio:16/9;min-height:300px}
  .qhead{display:none}
  .qrow{grid-template-columns:76px 1fr auto;row-gap:var(--s4)}
  .qrow__media{width:76px;height:76px}
  .qrow__qty{grid-column:2 / span 2}
}
@media (max-width:640px){
  body{font-size:13px}
  .container{padding-inline:var(--s4)}
  .section{padding-block:var(--s7)}
  .section--tight{padding-block:var(--s6)}
  .g-2,.g-3,.g-4,.g-auto,.g-auto-lg{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:var(--s6)}
  .step{padding-right:0}
  .step__line{display:none}
  .why-choose{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .pcard__foot{flex-direction:column}
  .form__foot{flex-direction:column;align-items:stretch}
  .slider{aspect-ratio:4/5;min-height:420px;max-height:none}
  .slider__slide::after{background:linear-gradient(180deg,rgba(6,6,6,.62) 0%,rgba(6,6,6,.88) 55%,rgba(6,6,6,.95) 100%)}
  .slider__cap{align-items:flex-end;padding-bottom:84px}
  .slider__ui{bottom:var(--s4)}
  .slider__ui-in{flex-direction:column;gap:var(--s3)}
  .spec-table__row{grid-template-columns:1fr}
  .spec-table__k{border-right:0;border-bottom:1px solid var(--line-3)}
  .pdp__buy{flex-direction:column;align-items:stretch}
  .pdp__buy .btn{min-width:0}
  .pdp__buy .qty{justify-content:space-between}
  .pdp__buy .qty__i{flex:1;width:auto}
  .qrow{grid-template-columns:1fr;gap:var(--s3);padding-top:var(--s6)}
  .qrow__media{width:100%;height:150px}
  .qrow__qty{grid-column:auto}
  .qrow__x{position:absolute;top:10px;right:10px}
  .qty{width:100%}
  .qty__i{flex:1;width:auto}
  .faq__q{padding:var(--s4);font-size:.875rem}
  .faq__a-in{padding:0 var(--s4) var(--s4)}
  .signup__form{flex-wrap:wrap}
  .signup__form input{flex-basis:100%}
  .signup__form button{width:100%}
  .wa-float{padding:14px;border-radius:50%}
  .wa-float span{display:none}
  .wa-float__ring{display:none}
  .to-top{bottom:80px}
  .toast-wrap{bottom:var(--s5)}
  .copy__in{justify-content:center;text-align:center}
  .copy__right{justify-content:center;width:100%}
}

/* ---------- 33. PRINT ---------------------------------------------------- */
@media print{
  .nav,.topbar,.wa-float,.to-top,.copy,.btn,.search-panel{display:none !important}
  body{background:#fff;color:#000}
  .phead,.cta-band,.signup{background:#fff !important;color:#000 !important}
}