/* =========================================================
   PERMANENT KITS — design system
   Brand: #F77B2A orange, #010101 black, #FFFFFF white
   Display: Manrope. Body and UI: Inter.
   Spacing: 4px base.
   ========================================================= */

:root{
  /* colour */
  --white:#FFFFFF;
  --off-white:#FAFAFA;
  --light:#F5F5F5;
  --rule:#EAEAEA;
  --rule-strong:#D6D6D6;

  --ink:#010101;
  --ink-2:#4A4A4A;
  --ink-3:#7C7C7C;
  --ink-4:#9A9A9A;

  --accent:#F77B2A;
  --accent-deep:#D9600F;
  --accent-wash:#FEF2E8;
  --accent-edge:#F3DDC9;

  --ok:#1C7A4E;
  --ok-wash:#E9F5EE;

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

  /* radius */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* elevation, used sparingly */
  --sh-card:0 1px 2px rgba(1,1,1,.04), 0 8px 24px rgba(1,1,1,.05);
  --sh-lift:0 2px 4px rgba(1,1,1,.05), 0 18px 44px rgba(1,1,1,.10);
  --sh-pop:0 20px 50px rgba(1,1,1,.09);

  /* type */
  --font-display:"Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* layout */
  --shell:1200px;
  --gutter:clamp(16px, 4vw, 40px);
  --header-h:64px;

  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

/* Must come before any component sets `display`. An author `display`
   declaration beats the user-agent [hidden] rule regardless of
   specificity, so every JS-toggled panel needs this guard. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}

.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:var(--s4);top:-60px;z-index:200;
  background:var(--ink);color:var(--white);padding:var(--s3) var(--s4);
  border-radius:var(--r-sm);font-size:14px;font-weight:600;transition:top .18s var(--ease);
}
.skip-link:focus{top:var(--s4)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell-narrow{max-width:820px}
.muted{color:var(--ink-3)}

/* ---------- prototype banner ---------- */
.dev-note{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  background:var(--light);border-bottom:1px solid var(--rule);
  padding:var(--s2) var(--gutter);font-size:12px;color:var(--ink-3);line-height:1.5;
}
.dev-note b{
  background:var(--ink);color:var(--white);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-xs);flex:0 0 auto;
}

/* =========================================================
   TYPE SCALE
   ========================================================= */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--s2);
}
.eyebrow-deep{color:var(--accent-deep)}
.eyebrow-xs{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);margin:0;
}

.price{
  font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.price-free{color:var(--ok)}

/* =========================================================
   BUTTONS — four levels only
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border-radius:var(--r-pill);font-size:14px;font-weight:600;line-height:1;
  padding:14px 24px;min-height:44px;white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-primary{background:var(--accent);color:var(--white);box-shadow:0 6px 16px rgba(247,123,42,.26)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 8px 20px rgba(247,123,42,.32)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:#262626;transform:translateY(-1px)}
.btn-outline{background:var(--white);color:var(--ink);border-color:var(--rule)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-1px)}
/* Black, inverting to white on hover. Both states are well past AA:
   white on #010101 and black on #FFFFFF are each about 20:1. */
.btn-flip{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-flip:hover,
.btn-flip:focus-visible{
  background:var(--white);color:var(--ink);border-color:var(--ink);
  transform:translateY(-1px);box-shadow:0 8px 20px rgba(1,1,1,.12);
}
.btn-flip:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-sm{padding:10px 18px;min-height:38px;font-size:13px}
.btn-xs{padding:8px 14px;min-height:34px;font-size:12.5px}
.btn-block{width:100%}
/* A button is a flex row, so an icon inside one with no size of its own
   would be stretched by the stretch default. Sized once here rather
   than per button. */
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.link-more{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:13.5px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.link-more:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
.link-more.as-text{border-color:currentColor}

/* =========================================================
   BADGES
   ========================================================= */
.badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-xs);
}
.badge-ink{background:var(--ink);color:var(--white)}
.badge-accent{background:var(--accent);color:var(--white)}
.badge-free{background:var(--ok);color:var(--white)}

.tag-free{
  margin-left:auto;flex:0 0 auto;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ok);background:var(--ok-wash);border-radius:var(--r-xs);padding:4px 8px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .2s var(--ease);
}
.site-header.is-stuck{box-shadow:0 1px 0 var(--rule), 0 8px 24px rgba(1,1,1,.05)}

.header-inner{
  display:flex;align-items:center;gap:var(--s5);
  height:var(--header-h);
}

.logo{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.logo-glyph{
  width:30px;height:30px;border-radius:var(--r-sm);background:var(--accent);color:var(--white);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1;
}
.logo-word{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.03em}
.logo-word em{font-style:normal;color:var(--accent)}

.primary-nav ul{display:flex;align-items:center;gap:var(--s5)}
.primary-nav a,
.mega-trigger{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:14px;font-weight:500;padding-block:var(--s2);position:relative;
  transition:color .18s var(--ease);
}
.primary-nav a:hover,.mega-trigger:hover{color:var(--accent-deep)}
.primary-nav a::after,
.mega-trigger::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(var(--s2) * -1 - 1px);
  height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .2s var(--ease);
}
.primary-nav a.is-active::after{transform:scaleX(1)}
.primary-nav a:hover::after,
.mega-trigger:hover::after,
.mega-trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.mega-trigger[aria-expanded="true"]{color:var(--accent)}
.mega-trigger .chev{width:10px;height:6px;transition:transform .2s var(--ease)}
.mega-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}

.header-utils{margin-left:auto;display:flex;align-items:center;gap:var(--s1)}
.icon-btn{
  width:40px;height:40px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--ink-2);position:relative;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover{background:var(--light);color:var(--ink)}
.icon-btn svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding-inline:4px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--white);
  font-size:10px;font-weight:700;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
}
.menu-btn{display:none}

@media (max-width:1020px){
  .primary-nav{display:none}
  .menu-btn{display:grid}
  .header-inner{gap:var(--s3)}
}
@media (max-width:420px){
  .hide-sm{display:none}
}

/* ---------- mega menu ---------- */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--white);border-top:2px solid var(--accent);
  border-bottom:1px solid var(--rule);box-shadow:var(--sh-pop);
  animation:megaIn .18s var(--ease);
}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.mega-grid{
  display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;
  padding-block:var(--s6);gap:0;
}
.mega-col{padding-inline:var(--s5);border-right:1px solid var(--rule)}
.mega-col:first-child{padding-left:0}
.mega-col:last-child{border-right:0;padding-right:0}
.mega-head{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 var(--s3);
}
.mega-col ul{display:grid;gap:var(--s3)}
.mega-col ul a{
  font-size:13.5px;color:var(--ink-2);display:inline-block;
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.mega-col ul a:hover{color:var(--accent-deep);transform:translateX(2px)}

.promo-card{
  display:block;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.promo-card:hover{border-color:var(--accent);box-shadow:var(--sh-card)}
.promo-art{
  display:grid;place-items:center;height:92px;background:var(--accent-wash);
}
.promo-art span{
  font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.025em;
  line-height:1.15;text-align:center;color:var(--ink);
}
.promo-body{display:block;padding:var(--s3);position:relative}
.promo-body .badge{position:static;display:inline-block;margin-bottom:var(--s2)}
.promo-body b{display:block;font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:-.015em}
.promo-meta{display:block;font-size:11.5px;color:var(--ink-3);margin-top:var(--s1)}

.mega-promo{background:var(--off-white);margin-block:calc(var(--s6) * -1);padding-block:var(--s6)}

@media (max-width:1100px){
  .mega-grid{grid-template-columns:repeat(2,1fr);gap:var(--s5) 0}
  .mega-col,
  .mega-col:first-child,
  .mega-col:last-child{border-right:0;padding-inline:var(--s4)}
  .mega-promo{margin-block:0;padding-block:var(--s4);border-radius:var(--r-md)}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding-block:clamp(48px,7vw,88px) 0;
  text-align:center;position:relative;isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, #FFF6EF 0%, rgba(255,246,239,0) 62%),
    linear-gradient(180deg, #FFFCFA 0%, var(--white) 46%);
}
/* The hero content sits above the wash */
.hero > .shell{position:relative;z-index:1}

/* ---------- drifting colour wash ----------
   Three large blurred blobs. They are the only moving part of the
   background, they never touch the pointer, and the whole thing is
   parked below for reduced motion. */
.hero-aura{position:absolute;inset:-12% -6% auto;height:124%;z-index:0;pointer-events:none}
.hero-aura .aura{
  position:absolute;display:block;border-radius:50%;
  filter:blur(68px);opacity:.5;will-change:transform;
}
.hero-aura .a1{
  width:42vw;max-width:560px;aspect-ratio:1;left:-6%;top:2%;
  background:radial-gradient(circle, rgba(247,123,42,.46) 0%, rgba(247,123,42,0) 70%);
  animation:auraDriftA 24s var(--ease) infinite alternate;
}
.hero-aura .a2{
  width:38vw;max-width:500px;aspect-ratio:1;right:-5%;top:-4%;
  background:radial-gradient(circle, rgba(255,176,97,.44) 0%, rgba(255,176,97,0) 70%);
  animation:auraDriftB 29s var(--ease) infinite alternate;
}
.hero-aura .a3{
  width:52vw;max-width:680px;aspect-ratio:1;left:28%;bottom:-18%;
  background:radial-gradient(circle, rgba(247,123,42,.26) 0%, rgba(247,123,42,0) 68%);
  animation:auraDriftC 34s var(--ease) infinite alternate;
  opacity:.42;
}
@keyframes auraDriftA{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(7vw,4vh,0) scale(1.12)}
  100%{transform:translate3d(2vw,-3vh,0) scale(.96)}
}
@keyframes auraDriftB{
  0%{transform:translate3d(0,0,0) scale(1.04)}
  50%{transform:translate3d(-6vw,5vh,0) scale(.94)}
  100%{transform:translate3d(-2vw,-2vh,0) scale(1.1)}
}
@keyframes auraDriftC{
  0%{transform:translate3d(-50%,0,0) scale(1)}
  50%{transform:translate3d(-56%,-5vh,0) scale(1.14)}
  100%{transform:translate3d(-44%,3vh,0) scale(.98)}
}
/* Three large blurred layers are the most expensive thing on the
   page to composite, so the phone gets a cheaper version of it. */
@media (max-width:760px){
  .hero-aura .aura{filter:blur(44px);opacity:.42}
  .hero-aura .a3{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-aura .aura{animation:none;will-change:auto}
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:5px 14px 5px 6px;font-size:12px;color:var(--ink-2);background:var(--white);
}
.hero-kicker b{
  background:var(--accent);color:var(--white);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);
}

.hero h1{
  font-size:clamp(2.25rem,6.2vw,4.25rem);
  font-weight:800;line-height:1.02;letter-spacing:-.042em;
  margin:var(--s5) auto 0;max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--accent)}

.hero-sub{
  margin:var(--s5) auto 0;max-width:54ch;
  font-size:clamp(.9375rem,1.5vw,1.0625rem);color:var(--ink-2);line-height:1.6;
}

.hero-search{
  margin:var(--s6) auto 0;max-width:540px;
  display:flex;align-items:center;gap:var(--s2);
  border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:6px 6px 6px var(--s4);background:var(--white);
  box-shadow:0 2px 3px rgba(1,1,1,.03), 0 12px 30px rgba(1,1,1,.06);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.hero-search:focus-within{border-color:var(--accent);box-shadow:0 2px 3px rgba(1,1,1,.03), 0 14px 34px rgba(247,123,42,.14)}
.hero-search-ico{width:17px;height:17px;color:var(--ink-3);flex:0 0 auto}
.hero-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:14px;padding-block:10px;
}
.hero-search input::placeholder{color:var(--ink-4)}

.hero-ctas{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}

/* ---------- card stage ---------- */
.stage{
  margin-top:clamp(36px,5vw,64px);
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,1.6vw,18px);padding-bottom:var(--s1);
}
.stage-card{
  /* Tilt and offset are variables so each state sets only what it
     changes, rather than restating the whole transform and silently
     dropping whatever it forgot. */
  --tilt:0deg;
  --lift:0px;
  flex:0 0 auto;width:clamp(120px,15.5vw,186px);
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);
  overflow:hidden;text-align:left;box-shadow:var(--sh-card);
  transform:rotate(var(--tilt)) translateY(var(--lift));
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stage-card:hover{box-shadow:var(--sh-lift)}
.stage-art{
  display:grid;place-items:center;height:clamp(76px,10vw,114px);background:var(--tint,var(--light));
}
.stage-art span{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(.8rem,1.5vw,1.05rem);letter-spacing:-.03em;line-height:1.12;
  text-align:center;padding-inline:var(--s3);color:var(--ink);
}
.stage-body{display:block;padding:var(--s2) var(--s3) var(--s3);border-top:1px solid var(--rule)}
.stage-body b{display:block;font-size:12px;font-weight:600;line-height:1.3;margin-top:3px}
.stage-body .price{font-size:12.5px;display:block;margin-top:var(--s2)}

.stage-card.s1{--tilt:-4deg;--lift:16px}
.stage-card.s1:hover{--lift:9px}
.stage-card.s2{--tilt:-1.5deg;--lift:4px}
.stage-card.s2:hover{--lift:-3px}
.stage-card.s3{z-index:2;width:clamp(136px,17.5vw,210px)}
.stage-card.s3:hover{--lift:-7px}
.stage-card.s4{--tilt:1.5deg;--lift:4px}
.stage-card.s4:hover{--lift:-3px}
.stage-card.s5{--tilt:4deg;--lift:16px}
.stage-card.s5:hover{--lift:9px}

@media (max-width:760px){
  .stage{
    justify-content:flex-start;overflow-x:auto;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:var(--s3);scroll-snap-type:x proximity;
  }
  .stage-card,
  .stage-card.s1,.stage-card.s2,.stage-card.s3,.stage-card.s4,.stage-card.s5{
    transform:none;width:150px;scroll-snap-align:start;
  }
  .stage-card:hover,
  .stage-card.s1:hover,.stage-card.s2:hover,.stage-card.s3:hover,
  .stage-card.s4:hover,.stage-card.s5:hover{transform:none}
}

/* ---------- reassurance strip ---------- */
.reassure{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s3) clamp(16px,3vw,32px);
  margin:var(--s6) auto 0;padding-top:var(--s5);
  border-top:1px solid var(--rule);max-width:760px;
}
.reassure li{display:flex;align-items:center;gap:var(--s2);font-size:12.5px;color:var(--ink-2)}
.reassure svg{width:14px;height:14px;color:var(--accent);flex:0 0 auto}

/* =========================================================
   BANDS
   ========================================================= */
.band{padding-block:clamp(48px,6.5vw,96px)}
.band-alt{background:var(--off-white);border-block:1px solid var(--rule)}

.band-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6);
}
.band-head-center{justify-content:center;text-align:center}
.band-head h2{
  font-size:clamp(1.5rem,3.1vw,2.25rem);font-weight:800;line-height:1.1;
  letter-spacing:-.032em;max-width:22ch;
}
.band-sub{margin-top:var(--s2);font-size:14px;color:var(--ink-3);max-width:50ch}

/* =========================================================
   CATEGORY CARDS
   ========================================================= */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cat-card{
  display:flex;flex-direction:column;gap:var(--s2);height:100%;
  border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s5);background:var(--white);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cat-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-card)}
.cat-ico{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--accent-wash);color:var(--accent-deep);
  display:grid;place-items:center;margin-bottom:var(--s1);
}
.cat-ico svg{width:18px;height:18px}
.cat-card b{font-size:14.5px;font-weight:600;line-height:1.25}
.cat-desc{font-size:12.5px;color:var(--ink-4);line-height:1.45}
.cat-arr{margin-top:auto;padding-top:var(--s3);color:var(--rule-strong);font-size:15px;transition:color .2s var(--ease)}
.cat-card:hover .cat-arr{color:var(--accent)}

@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){
  .cat-card{padding:var(--s4)}
  .cat-desc{display:none}
}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.prod-card{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);overflow:hidden;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.prod-card:hover{box-shadow:var(--sh-lift);transform:translateY(-3px);border-color:var(--rule-strong)}
.prod-art{
  position:relative;display:grid;place-items:center;
  aspect-ratio:4/3;background:var(--tint,var(--light));border-bottom:1px solid var(--rule);
}
.prod-art-type{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(.9rem,1.7vw,1.15rem);letter-spacing:-.03em;line-height:1.14;
  text-align:center;padding-inline:var(--s4);color:var(--ink);
}
.prod-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);flex:1}
.prod-name{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.012em}
.prod-name a{display:block}
.prod-card:hover .prod-name a{color:var(--accent-deep)}
.prod-meta{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.prod-foot{
  margin-top:auto;padding-top:var(--s3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}

@media (max-width:900px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){
  .prod-grid{gap:var(--s2)}
  .prod-body{padding:var(--s3);gap:6px}
  .prod-meta{display:none}
  .prod-name{
    font-size:13px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .prod-foot{flex-direction:column;align-items:stretch;gap:var(--s2)}
}

/* =========================================================
   EDITORIAL COLLECTIONS
   ========================================================= */
.coll{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s4)}
.coll-lead{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.coll-lead:hover{border-color:var(--accent);box-shadow:var(--sh-card)}
.coll-art{
  flex:1;min-height:196px;display:grid;place-items:center;
  background:var(--accent-wash);padding:var(--s6);
}
.coll-art span{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(1.35rem,3vw,2.1rem);text-align:center;color:var(--ink);
}
.coll-cap{display:block;padding:var(--s5);border-top:1px solid var(--rule)}
.coll-cap b{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.02em}
.coll-text{display:block;margin-top:var(--s2);font-size:13.5px;color:var(--ink-3);line-height:1.55;max-width:44ch}
.coll-cap .link-more{margin-top:var(--s3)}

.coll-rows{display:grid;gap:var(--s4);grid-template-rows:repeat(3,1fr)}
.coll-row{
  display:flex;align-items:center;gap:var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);
  padding:var(--s4) var(--s5);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.coll-row:hover{border-color:var(--accent);transform:translateX(2px)}
.coll-sq{
  width:56px;height:56px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--tint,var(--light));
  display:grid;place-items:center;text-align:center;padding:var(--s1);
  font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:-.02em;line-height:1.1;
}
.coll-tx{min-width:0}
.coll-tx b{display:block;font-size:14.5px;font-weight:600}
.coll-tx span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.coll-arr{margin-left:auto;flex:0 0 auto;color:var(--rule-strong);font-size:16px;transition:color .2s var(--ease)}
.coll-row:hover .coll-arr{color:var(--accent)}

@media (max-width:860px){
  .coll{grid-template-columns:1fr}
  .coll-rows{grid-template-rows:none}
}

/* =========================================================
   SCROLL ROW
   ========================================================= */
.scroll-row{
  display:flex;gap:var(--s4);overflow-x:auto;
  padding-bottom:var(--s3);scroll-snap-type:x proximity;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
}
.scroll-row::-webkit-scrollbar{height:6px}
.scroll-row::-webkit-scrollbar-track{background:var(--rule);border-radius:var(--r-pill)}
.scroll-row::-webkit-scrollbar-thumb{background:#C9C9C9;border-radius:var(--r-pill)}
.scroll-row > li{flex:0 0 auto;scroll-snap-align:start}
.mini-card{
  width:clamp(160px,19vw,200px);
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.mini-card:hover{border-color:var(--rule-strong);box-shadow:var(--sh-card);transform:translateY(-3px)}
.mini-art{
  display:grid;place-items:center;aspect-ratio:4/3;background:var(--tint,var(--light));
  border-bottom:1px solid var(--rule);
}
.mini-art span{
  font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:-.028em;
  line-height:1.15;text-align:center;padding-inline:var(--s3);color:var(--ink);
}
.mini-body{padding:var(--s3);display:grid;gap:var(--s1)}
.mini-body h3{font-size:12.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.mini-body .price{font-size:13.5px;margin-top:var(--s1)}

/* =========================================================
   FREE RESOURCES PANEL
   ========================================================= */
.free-panel{
  background:var(--accent-wash);border-radius:var(--r-xl);
  padding:clamp(28px,4.5vw,56px);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,48px);align-items:center;
}
.free-copy h2{
  font-size:clamp(1.5rem,3.1vw,2.25rem);font-weight:800;line-height:1.08;letter-spacing:-.032em;
  max-width:16ch;
}
.free-copy p{margin-top:var(--s4);font-size:14.5px;color:#6B5E54;line-height:1.6;max-width:44ch}
.free-copy .btn{margin-top:var(--s5)}

.free-list{display:grid;gap:var(--s2)}
.free-item{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--white);border:1px solid var(--accent-edge);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.free-item:hover{border-color:var(--accent);transform:translateX(2px)}
.free-ico{
  width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-xs);
  background:var(--tint,var(--light));color:var(--ink,var(--ink-2));
  display:grid;place-items:center;font-size:15px;
}
.free-tx{min-width:0}
.free-tx b{display:block;font-size:13.5px;font-weight:600}
.free-tx span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:1px}

@media (max-width:860px){.free-panel{grid-template-columns:1fr}}

/* =========================================================
   WHY
   ========================================================= */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.why-item{display:grid;gap:var(--s2);align-content:start}
.why-ico{
  width:42px;height:42px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--rule);color:var(--accent-deep);
  display:grid;place-items:center;margin-bottom:var(--s2);
}
.why-ico svg{width:21px;height:21px}
.why-item h3{font-size:15px;font-weight:700;letter-spacing:-.015em}
.why-item p{font-size:13.5px;color:var(--ink-3);line-height:1.6}

@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)}}
@media (max-width:480px){.why-grid{grid-template-columns:1fr}}

/* =========================================================
   BLOG
   ========================================================= */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.blog-card{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);overflow:hidden;
  transition:box-shadow .22s var(--ease), transform .22s var(--ease);
}
.blog-card:hover{box-shadow:var(--sh-card);transform:translateY(-3px)}
.blog-art{
  display:grid;place-items:center;aspect-ratio:16/9;background:var(--tint,var(--light));
  border-bottom:1px solid var(--rule);
}
.blog-art span{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1rem,2vw,1.4rem);
  letter-spacing:-.03em;text-align:center;padding-inline:var(--s4);color:var(--ink);
}
.blog-body{padding:var(--s5);display:grid;gap:var(--s2);align-content:start;flex:1}
.blog-body h3{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.018em}
.blog-card:hover .blog-body h3 a{color:var(--accent-deep)}
.blog-excerpt{font-size:13.5px;color:var(--ink-3);line-height:1.6}
.blog-meta{font-size:11.5px;color:var(--ink-4);margin-top:var(--s2)}

@media (max-width:900px){.blog-grid{grid-template-columns:1fr;gap:var(--s4)}}

/* =========================================================
   FAQ
   ========================================================= */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) 0;cursor:pointer;list-style:none;
  font-size:15px;font-weight:600;letter-spacing:-.012em;
  transition:color .18s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-deep)}
.faq-sign{
  position:relative;width:14px;height:14px;flex:0 0 auto;color:var(--ink-3);
}
.faq-sign::before,.faq-sign::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.faq-sign::before{left:0;top:6px;width:14px;height:1.8px}
.faq-sign::after{left:6px;top:0;width:1.8px;height:14px}
.faq-item[open] .faq-sign,
.drawer-acc[open] .faq-sign{color:var(--accent)}
.faq-item[open] .faq-sign::after,
.drawer-acc[open] .faq-sign::after{transform:rotate(90deg);opacity:0}
.faq-body{padding-bottom:var(--s5);max-width:68ch}
.faq-body p{font-size:14.5px;color:var(--ink-2);line-height:1.65}
.faq-item[open] .faq-body{animation:faqIn .22s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,72px) var(--s6)}
.foot-grid{
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s7) var(--s5);
}
.foot-brand p{margin-top:var(--s4);font-size:13px;color:var(--ink-3);line-height:1.6;max-width:36ch}
.foot-col h2{
  font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s4);
}
.foot-col ul{display:grid;gap:var(--s3)}
.foot-col a{font-size:13px;color:var(--ink-2);transition:color .15s var(--ease)}
.foot-col a:hover{color:var(--accent-deep)}

.foot-base{
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
.foot-base p{font-size:12px;color:var(--ink-4)}
.foot-base b{color:var(--ink-3);font-weight:500}

@media (max-width:1000px){
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr;gap:var(--s6)}
}

/* =========================================================
   OVERLAYS
   ========================================================= */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(1,1,1,.42);
  backdrop-filter:blur(2px);animation:fadeIn .2s var(--ease);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.drawer{
  position:fixed;top:0;bottom:0;z-index:90;width:min(380px,88vw);
  background:var(--white);display:flex;flex-direction:column;
  box-shadow:0 0 60px rgba(1,1,1,.2);
}
.drawer-left{left:0;animation:slideL .26s var(--ease)}
.drawer-right{right:0;animation:slideR .26s var(--ease)}
@keyframes slideL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes slideR{from{transform:translateX(100%)}to{transform:none}}

.drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4);border-bottom:1px solid var(--rule);flex:0 0 auto;
}
.drawer-top h2{font-size:16px;font-weight:700}

.drawer-search{
  display:flex;align-items:center;gap:var(--s2);margin:var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:10px var(--s4);flex:0 0 auto;
}
.drawer-search svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.drawer-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px}

.drawer-nav{flex:1;overflow-y:auto;padding:0 var(--s4) var(--s4)}
.drawer-nav > a,
.drawer-acc > summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) 0;border-bottom:1px solid var(--rule);
  font-size:15px;font-weight:600;cursor:pointer;list-style:none;
}
.drawer-acc > summary::-webkit-details-marker{display:none}
.drawer-acc[open] > summary{color:var(--accent)}
.drawer-acc > div{display:grid;gap:0;padding:var(--s2) 0 var(--s3) var(--s4)}
.drawer-acc > div a{
  padding:10px 0;font-size:13.5px;color:var(--ink-2);
}
.drawer-acc > div a:hover{color:var(--accent-deep)}
.drawer-foot{padding:var(--s4);border-top:1px solid var(--rule);flex:0 0 auto}

/* cart */
.cart-body{flex:1;overflow-y:auto;padding:var(--s5) var(--s4)}
.empty-state{text-align:center;padding-block:var(--s8) var(--s5);display:grid;gap:var(--s2);justify-items:center}
.empty-ico{
  width:60px;height:60px;border-radius:50%;background:var(--light);color:var(--ink-3);
  display:grid;place-items:center;margin-bottom:var(--s3);
}
.empty-ico svg{width:28px;height:28px}
.empty-state p{font-size:14px}
.empty-state .btn{margin-top:var(--s5);max-width:240px}

.cart-lines{display:grid;gap:var(--s3)}
.cart-line{
  display:flex;align-items:center;gap:var(--s3);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:var(--s3);
}
.cart-line-art{
  width:48px;height:48px;flex:0 0 auto;border-radius:var(--r-xs);background:var(--accent-wash);
}
.cart-line-tx{min-width:0;flex:1}
.cart-line-tx b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.cart-line-tx .price{font-size:13px;margin-top:var(--s1);display:block}
.cart-remove{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-xs);display:grid;place-items:center;
  color:var(--ink-4);transition:background-color .15s var(--ease), color .15s var(--ease);
}
.cart-remove:hover{background:var(--light);color:var(--ink)}
.cart-remove svg{width:15px;height:15px}

.cart-foot{padding:var(--s4);border-top:1px solid var(--rule);flex:0 0 auto}
.cart-sum{display:flex;align-items:baseline;justify-content:space-between;font-size:14px}
.cart-sum b{font-family:var(--font-display);font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cart-note{font-size:11.5px;margin:var(--s2) 0 var(--s4);line-height:1.5}

/* search overlay */
.search-overlay{
  position:fixed;inset:0;z-index:95;background:rgba(1,1,1,.42);
  backdrop-filter:blur(3px);padding:clamp(60px,12vh,140px) var(--gutter) var(--gutter);
  animation:fadeIn .18s var(--ease);
}
.search-panel{
  max-width:620px;margin-inline:auto;background:var(--white);
  border-radius:var(--r-lg);box-shadow:var(--sh-pop);overflow:hidden;
  animation:panelIn .22s var(--ease);
}
@keyframes panelIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.search-field{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border-bottom:1px solid var(--rule);
}
.search-field > svg{width:19px;height:19px;color:var(--ink-3);flex:0 0 auto}
.search-field input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;padding-block:var(--s2)}
.search-suggest{padding:var(--s5)}
.search-suggest ul{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.search-suggest a{
  display:inline-block;border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:7px 14px;font-size:13px;color:var(--ink-2);
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.search-suggest a:hover{border-color:var(--accent);color:var(--accent-deep)}
.search-note{font-size:11.5px;margin-top:var(--s4)}

/* live results */
.search-results{max-height:min(52vh,420px);overflow-y:auto;border-top:1px solid var(--rule)}
.search-results-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5) var(--s2);
}
.search-results-head .eyebrow-xs{margin:0}
.search-results-head .count{font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.search-results ul{padding:0 var(--s3) var(--s3)}
.result-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  transition:background-color .14s var(--ease);
}
.result-item:hover,.result-item:focus-visible{background:var(--light)}
.result-art{
  width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-xs);
  background:var(--tint,var(--light));display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:9.5px;letter-spacing:-.02em;
  line-height:1.1;text-align:center;padding:3px;color:var(--ink);
}
.result-tx{min-width:0;flex:1}
.result-tx b{
  display:block;font-size:13.5px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.result-tx span{display:block;font-size:11px;color:var(--ink-4);margin-top:1px}
.result-item .price{font-size:13px;flex:0 0 auto}
.search-empty{padding:var(--s7) var(--s5);text-align:center}
.search-empty b{display:block;font-size:14px;margin-bottom:var(--s2)}
.search-empty p{font-size:12.5px;color:var(--ink-3)}

/* =========================================================
   404
   ========================================================= */
.page-404{
  min-height:62vh;display:grid;place-items:center;
  padding-block:clamp(56px,9vw,112px);text-align:center;
}
.page-404 .code{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(4.5rem,16vw,10rem);color:var(--accent);
}
.page-404 h1{
  font-size:clamp(1.5rem,3.4vw,2.35rem);font-weight:800;letter-spacing:-.035em;
  margin-top:var(--s5);max-width:18ch;
}
.page-404 .lede{
  margin:var(--s4) auto 0;max-width:52ch;font-size:15px;color:var(--ink-2);line-height:1.65;
}
.page-404 .btns{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}
.phase-note{
  margin:var(--s7) auto 0;max-width:600px;text-align:left;
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--off-white);
  padding:var(--s5);
}
.phase-note h2{font-size:14px;font-weight:700;margin-bottom:var(--s2)}
.phase-note p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.phase-note ul{margin-top:var(--s3);display:grid;gap:var(--s2)}
.phase-note li{font-size:13px;color:var(--ink-3);padding-left:var(--s4);position:relative}
.phase-note li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:120;
  background:var(--ink);color:var(--white);border-radius:var(--r-pill);
  padding:var(--s3) var(--s5);font-size:13.5px;font-weight:500;
  box-shadow:0 12px 32px rgba(1,1,1,.25);animation:toastIn .22s var(--ease);
  max-width:calc(100vw - var(--s8));text-align:center;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* =========================================================
   SCROLL REVEAL
   Sections are visible by default. The dimmed start state is
   only applied once JS confirms it can observe and restore
   them, so no-JS and failed-JS both render the full page.
   ========================================================= */
.js-reveal .reveal{opacity:0;transform:translateY(14px)}
.js-reveal .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .stage-card:hover,.prod-card:hover,.cat-card:hover,
  .blog-card:hover,.mini-card:hover,.coll-row:hover,.free-item:hover,
  .btn:hover{transform:none !important}
}


/* =========================================================
   PAGE TEMPLATES
   Collection, product, blog, prose, commerce, account.
   Concatenated after styles.css at build time.
   ========================================================= */

/* ---------- breadcrumbs ---------- */
.crumbs{padding-block:var(--s4) 0}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1)}
.crumbs li{display:flex;align-items:center;gap:var(--s1);font-size:12.5px;color:var(--ink-3)}
.crumbs li:not(:last-child)::after{content:"/";color:var(--rule-strong);margin-left:var(--s1)}
.crumbs a{transition:color .15s var(--ease)}
.crumbs a:hover{color:var(--accent-deep)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- collection head ---------- */
.coll-head{padding-block:var(--s6) var(--s5)}

/* ---------- marker band behind a category heading ----------
   A gradient on the inline span, so the band sits behind the words
   and stops where they stop. Percentages are of the line box, so it
   keeps its proportions as the heading clamps down to phone sizes,
   and box-decoration-break repeats it on each line of a heading that
   wraps instead of stretching one band across the lot. */
.coll-head h1 .hl{
  /* With line-height 1.1 the baseline sits about 26% up the line box,
     so 12% puts the band's bottom edge just into the descenders and
     55% puts its top a little above the x-height: a pen stroke through
     the lower half of the words rather than a block behind them. */
  background-image:linear-gradient(to top,
    transparent 0,
    transparent 12%,
    var(--accent) 12%,
    var(--accent) 55%,
    transparent 55%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding-inline:.1em;
  /* the band is decoration; the words stay black on white above it
     and black on orange through it, which is 7.77:1 either way */
  color:var(--ink);
}
.coll-head h1{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;letter-spacing:-.038em;line-height:1.06;max-width:20ch}
.coll-intro{margin-top:var(--s4);max-width:68ch;font-size:15.5px;color:var(--ink-2);line-height:1.65}

.subnav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.subnav a{
  display:inline-block;border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:7px 15px;font-size:13px;color:var(--ink-2);background:var(--white);
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.subnav a:hover{border-color:var(--ink);color:var(--ink)}
.subnav a.is-active{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- collection layout ---------- */
.coll-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s7);padding-bottom:var(--s8)}
@media (max-width:1000px){.coll-layout{grid-template-columns:1fr;gap:var(--s5)}}

.coll-aside{align-self:start;position:sticky;top:calc(var(--header-h) + var(--s4))}
.filters-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.filters-top h2{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.02em}
.filter-clear{font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.filter-clear:hover{color:var(--accent-deep)}
.filters-close{display:none}
.filters-done{display:none}

.filter-group{padding-block:var(--s4);border-bottom:1px solid var(--rule)}
.filter-group:last-of-type{border-bottom:0}
.filter-head{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s3)}
.filter-group ul{display:grid;gap:var(--s2)}

.check{display:flex;align-items:flex-start;gap:var(--s2);cursor:pointer;font-size:13px;color:var(--ink-2);line-height:1.4;position:relative}
.check input{position:absolute;opacity:0;width:0;height:0}
.check-box{
  width:17px;height:17px;flex:0 0 auto;border:1px solid var(--rule-strong);border-radius:var(--r-xs);
  background:var(--white);position:relative;margin-top:1px;
  transition:background-color .14s var(--ease), border-color .14s var(--ease);
}
.check-box::after{
  content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);
  opacity:0;transition:opacity .14s var(--ease), transform .14s var(--ease);
}
.check input:checked + .check-box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .check-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.check input:focus-visible + .check-box{outline:2px solid var(--accent);outline-offset:2px}
.check:hover .check-label{color:var(--ink)}
.check-block{padding:var(--s3) 0;align-items:flex-start}
.check-block .check-label{font-size:13.5px;line-height:1.55}
.check-block a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

.coll-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.result-count{font-size:13.5px;color:var(--ink-3)}
.result-count b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sort{
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--white);
  padding:9px 34px 9px 15px;font-size:13px;font-weight:500;cursor:pointer;appearance:none;
}
.sort-wrap{position:relative}
.sort-wrap::after{
  content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.sort:hover{border-color:var(--ink)}

.applied{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s4)}
.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--white);
  padding:6px 13px;font-size:12.5px;color:var(--ink-2);
}
.chip-remove{cursor:pointer;transition:border-color .15s var(--ease), color .15s var(--ease)}
.chip-remove:hover{border-color:var(--accent);color:var(--accent-deep)}
.chip-remove span[aria-hidden]{font-size:15px;line-height:1;color:var(--ink-4)}
.chip-clear{cursor:pointer;background:var(--ink);border-color:var(--ink);color:var(--white)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}

.coll-main > .prod-grid{padding-top:var(--s5)}
.grid-cell{display:grid}  /* a real grid item, so the sorter can set order on it */
.prod-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.prod-grid-3{grid-template-columns:repeat(2,1fr)}}
.coll-layout .prod-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1240px){.coll-layout .prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1000px){.coll-layout .prod-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.coll-layout .prod-grid{grid-template-columns:repeat(2,1fr)}}

.load-more-wrap{display:flex;justify-content:center;padding-top:var(--s6)}
.empty-inline{padding-block:var(--s8);border:1px dashed var(--rule-strong);border-radius:var(--r-md);margin-top:var(--s5)}

.coll-body{padding-block:var(--s7)}
.coll-body h2{font-size:1.25rem;font-weight:700;margin-bottom:var(--s3)}
.coll-body p{font-size:15px;color:var(--ink-2);line-height:1.7;max-width:68ch}
.coll-links{margin-top:var(--s4);font-size:14px}
.coll-links a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

/* mobile filter drawer */
.mobile-bar{display:none}
@media (max-width:1000px){
  .coll-aside{
    position:fixed;inset:0 auto 0 0;z-index:90;width:min(340px,86vw);
    background:var(--white);box-shadow:0 0 60px rgba(1,1,1,.2);
    transform:translateX(-100%);transition:transform .26s var(--ease);
    overflow-y:auto;padding:var(--s4);
  }
  .coll-aside.is-open{transform:none}
  .filters-close{display:grid}
  .filters-done{display:block;position:sticky;bottom:0;background:var(--white);padding-top:var(--s4);border-top:1px solid var(--rule);margin-top:var(--s4)}
  .mobile-bar{
    display:flex;gap:var(--s2);position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--white);border-top:1px solid var(--rule);padding:var(--s3) var(--gutter);
    box-shadow:0 -4px 20px rgba(1,1,1,.06);
  }
  .mobile-bar-btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
    border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--white);
    padding:12px;font-size:13.5px;font-weight:600;min-height:44px;
  }
  .mobile-bar-btn svg{width:17px;height:17px}
  .filter-badge{
    min-width:18px;height:18px;border-radius:var(--r-pill);background:var(--accent);color:var(--white);
    font-size:11px;font-weight:700;display:grid;place-items:center;padding-inline:5px;
  }
  body.is-collection{padding-bottom:72px}
}

/* ---------- categories index ---------- */
.cat-grid-wide{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cat-grid-wide{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.cat-grid-wide{grid-template-columns:repeat(2,1fr)}}
.subcat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s5)}
@media (max-width:900px){.subcat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.subcat-grid{grid-template-columns:1fr}}
.subcat-col h3{font-size:14px;font-weight:700;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.subcat-col h3 a:hover{color:var(--accent-deep)}
.subcat-col ul{display:grid;gap:var(--s2)}
.subcat-col a{font-size:13px;color:var(--ink-2)}
.subcat-col ul a:hover{color:var(--accent-deep)}

/* ---------- product page ---------- */
.pd-top{padding-block:var(--s5) var(--s7)}
.pd-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7)}
@media (max-width:980px){.pd-grid{grid-template-columns:1fr;gap:var(--s6)}}

.gallery-main{
  aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--tint,var(--light));display:grid;place-items:center;
}
.gallery-main span{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1.08;
  font-size:clamp(1.4rem,3.6vw,2.6rem);text-align:center;padding-inline:var(--s6);color:var(--ink);
}
.gallery-main em{display:block;font-style:normal;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink-3);margin-top:var(--s3);letter-spacing:0}
.gallery-thumbs{display:flex;gap:var(--s3);margin-top:var(--s3)}
.thumb{
  width:84px;height:64px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--tint,var(--light));display:grid;place-items:center;cursor:pointer;
  font-size:10.5px;font-weight:600;color:var(--ink-2);transition:border-color .16s var(--ease);
}
.thumb:hover{border-color:var(--ink-3)}
.thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.gallery-note{margin-top:var(--s3);font-size:11.5px;color:var(--ink-4)}

.pd-buy .eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pd-buy h1{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-.034em;line-height:1.12;margin-top:var(--s2)}
.pd-short{margin-top:var(--s3);font-size:15px;color:var(--ink-2);line-height:1.6}
.pd-price{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s5)}
.pd-price .price{font-size:30px}
.pd-price-note{font-size:12.5px;color:var(--ink-4)}
.price-ext{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--ink-2)}
.buy-sub{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin:var(--s5) 0 var(--s3)}
.file-list{display:grid;gap:var(--s2);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4)}
.file-list li{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);font-size:13px;padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.file-list li:last-child{border-bottom:0;padding-bottom:0}
.file-name{font-weight:600;word-break:break-word}
.file-meta{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.file-note{grid-column:1 / -1;font-size:11.5px;color:var(--ink-4)}

.spec{display:grid;gap:var(--s3);margin-top:var(--s5)}
.spec > div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--s3);font-size:13.5px;padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.spec > div:last-child{border-bottom:0;padding-bottom:0}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;font-weight:500}
.spec-tight > div{grid-template-columns:120px minmax(0,1fr);font-size:12.5px}
@media (max-width:480px){.spec > div{grid-template-columns:1fr;gap:2px}}

.pd-actions{margin-top:var(--s5);display:grid;gap:var(--s2)}
.buy-note{font-size:12px;color:var(--ink-3);text-align:center;margin-top:var(--s1)}
.btn-lg{padding:16px 28px;font-size:15px;min-height:52px}

.notice{border:1px solid var(--rule);border-left:3px solid var(--ink-3);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s4);margin-top:var(--s5)}
.notice b{display:block;font-size:13.5px;margin-bottom:var(--s1)}
.notice p{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.notice p + p{margin-top:var(--s2)}
.notice-warn{border-left-color:var(--accent);background:var(--accent-wash)}
.notice-ext{border-left-color:var(--ink);background:var(--off-white)}
.notice-stop{border-left-color:#B3261E;background:#FBECEB}
.notice-stop b{color:#8F1D17}

.pd-detail{padding-block:var(--s7)}
.pd-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start}
@media (max-width:980px){.pd-detail-grid{grid-template-columns:1fr}}
.pd-block + .pd-block{margin-top:var(--s7)}
.pd-block h2{font-size:1.1rem;font-weight:700;letter-spacing:-.015em;padding-bottom:var(--s3);border-bottom:1px solid var(--rule);margin-bottom:var(--s4)}
.pd-block p{font-size:14.5px;color:var(--ink-2);line-height:1.7;max-width:68ch}
.pd-block p + p{margin-top:var(--s3)}
.pd-licence-link{margin-top:var(--s3);font-size:13px}
.pd-licence-link a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

.ticks{display:grid;gap:var(--s3)}
.ticks li{display:flex;gap:var(--s3);font-size:14px;color:var(--ink-2);line-height:1.6}
.ticks svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent);margin-top:2px}

.steps{display:grid;gap:var(--s3);counter-reset:step}
.steps li{position:relative;padding-left:var(--s7);font-size:14px;color:var(--ink-2);line-height:1.6;counter-increment:step;list-style:none}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--accent-wash);color:var(--accent-deep);
  display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--font-display);
}

.bundle-list{display:grid;gap:var(--s2)}
.bundle-list li{display:flex;align-items:center;gap:var(--s4);border:1px solid var(--rule);border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.bundle-list a{flex:1;min-width:0}
.bundle-list b{display:block;font-size:13.5px;font-weight:600}
.bundle-list a:hover b{color:var(--accent-deep)}
.bundle-list span{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.bundle-list .price{font-size:14px;flex:0 0 auto}

.side-card{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s5);background:var(--white)}
.side-card h2{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);font-family:var(--font-body);margin-bottom:var(--s3)}
.side-sticky{position:sticky;top:calc(var(--header-h) + var(--s4))}

/* ---------- free resources ---------- */
.free-hero{padding-block:var(--s6) var(--s7);text-align:center;background:var(--accent-wash);border-bottom:1px solid var(--accent-edge)}
.free-hero h1{font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;margin-top:var(--s2)}
.free-hero-sub{margin:var(--s4) auto 0;max-width:60ch;font-size:15.5px;color:#6B5E54;line-height:1.65}
.free-hero .hero-search{margin-top:var(--s5)}

/* ---------- blog ---------- */
.feature-post{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.feature-post:hover{border-color:var(--accent);box-shadow:var(--sh-card)}
@media (max-width:820px){.feature-post{grid-template-columns:1fr}}
.feature-art{display:grid;place-items:center;min-height:260px;background:var(--tint,var(--light))}
.feature-art span{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:clamp(1.5rem,3.4vw,2.4rem);text-align:center;padding-inline:var(--s5);color:var(--ink);line-height:1.08}
.feature-cap{display:block;padding:var(--s6);align-self:center}
.feature-cap b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.028em;line-height:1.2;margin-top:var(--s2)}
.feature-ex{display:block;margin-top:var(--s3);font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:52ch}
.feature-cap .blog-meta{margin-top:var(--s4)}

.post-head{padding-block:var(--s6) var(--s5)}
.post-head h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.06;max-width:22ch}
.post-standfirst{margin-top:var(--s4);font-size:17px;color:var(--ink-2);line-height:1.6;max-width:62ch}
.post-meta{margin-top:var(--s5);font-size:12.5px;color:var(--ink-4);padding-top:var(--s4);border-top:1px solid var(--rule)}
.post-art{aspect-ratio:21/9;border-radius:var(--r-lg);background:var(--tint,var(--light));display:grid;place-items:center;margin-bottom:var(--s7)}
.post-art span{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,4.4vw,3rem);letter-spacing:-.04em;color:var(--ink);text-align:center;padding-inline:var(--s5)}
@media (max-width:700px){.post-art{aspect-ratio:16/9}}

.post-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s8);padding-bottom:var(--s8)}
@media (max-width:980px){.post-layout{grid-template-columns:1fr;gap:var(--s5)}}
.post-rail{align-self:start}
.toc{position:sticky;top:calc(var(--header-h) + var(--s5));border-left:2px solid var(--rule);padding-left:var(--s4)}
.toc h2{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s3)}
.toc ol{display:grid;gap:var(--s2)}
.toc a{font-size:12.5px;color:var(--ink-3);line-height:1.45;display:block;transition:color .15s var(--ease)}
.toc a:hover,.toc a.is-active{color:var(--accent-deep);font-weight:500}
@media (max-width:980px){
  .toc{position:static;border-left:0;border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4)}
}

/* ---------- prose ---------- */
.prose-head{padding-block:var(--s6) var(--s4)}
.prose-head h1{font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;letter-spacing:-.038em;line-height:1.08;max-width:20ch}
.prose-standfirst{margin-top:var(--s4);font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:60ch}
.prose-updated{margin-top:var(--s4);font-size:12.5px;color:var(--ink-4)}

.prose{padding-bottom:var(--s8);max-width:68ch}
.prose > * + *{margin-top:var(--s4)}
.prose h2{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-top:var(--s7);padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.prose h3{font-size:1.0625rem;font-weight:700;margin-top:var(--s6)}
.prose p{font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.prose ul,.prose ol{display:grid;gap:var(--s2);padding-left:var(--s5)}
.prose ul li{list-style:disc;font-size:15px;line-height:1.7;color:var(--ink-2)}
.prose ol li{list-style:decimal;font-size:15px;line-height:1.7;color:var(--ink-2)}
.prose li::marker{color:var(--ink-4)}
.prose a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.prose b,.prose strong{font-weight:600;color:var(--ink)}
.prose .faq{margin-top:var(--s5)}

/* ---------- FAQ page jump links ----------
   Long enough now that landing at the top of 49 questions and
   scrolling is the wrong first move. */
.faq-jump{
  background:var(--off-white);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:var(--s5);margin-bottom:var(--s6);
}
.faq-jump h2{
  font-family:var(--font-body);font-size:10.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);
  margin:0 0 var(--s3);padding:0;border:0;
}
.faq-jump ul{display:flex;flex-wrap:wrap;gap:var(--s2)}
.faq-jump a{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:7px 14px;font-size:13px;font-weight:500;color:var(--ink);
  transition:border-color .16s var(--ease), color .16s var(--ease);
}
.faq-jump a:hover{border-color:var(--ink);color:var(--accent-deep)}
.faq-jump a span{
  font-size:11px;font-weight:600;color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.faq-jump a:hover span{color:var(--accent-deep)}
/* the sticky header must not cover a heading jumped to */
.prose h2[id]{scroll-margin-top:calc(var(--header-h) + var(--s5))}
.prose .notice{margin-bottom:var(--s5)}
.ph{background:var(--accent-wash);color:var(--accent-deep);font-weight:600;padding:1px 6px;border-radius:var(--r-xs);font-size:.94em}

.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s6);background:var(--white)}
.cta-strip h2{font-size:1.2rem;font-weight:700}
.cta-strip p{font-size:14px;color:var(--ink-3);margin-top:var(--s1)}

/* ---------- forms ---------- */
.field{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.field label{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--white);color:var(--ink);
  padding:12px var(--s4);font-size:14.5px;width:100%;min-height:46px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(247,123,42,.14);
}
.field input:disabled{background:var(--light);color:var(--ink-3);cursor:not-allowed}
.field input.is-invalid,.field textarea.is-invalid,.field select.is-invalid{border-color:#B3261E}
.field-hint{font-size:12px;color:var(--ink-4)}
.field-hint.is-err{color:#B3261E}
.field-hint.is-ok{color:var(--ok)}
.field-err{font-size:12px;color:#B3261E;font-weight:500}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:560px){.field-row{grid-template-columns:1fr;gap:0}}
fieldset{border:0;padding:0;margin:0 0 var(--s7)}
legend{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s4);padding:0}
.form-status{margin-top:var(--s4);font-size:13.5px;padding:var(--s3) var(--s4);border-radius:var(--r-sm);line-height:1.55}
.form-status.is-err{background:#FBECEB;color:#8F1D17}
.form-status.is-warn{background:var(--accent-wash);color:var(--accent-deep)}
.form-status.is-ok{background:var(--ok-wash);color:var(--ok)}

/* ---------- cart page ---------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);padding-bottom:var(--s8)}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr}}
.cart-page-lines{display:grid;gap:var(--s3)}
.cart-page-line{display:flex;align-items:center;gap:var(--s4);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4)}
.cart-page-art{
  width:84px;height:64px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--tint,var(--light));
  display:grid;place-items:center;
}
.cart-page-art span{font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:-.02em;line-height:1.15;text-align:center;padding:4px;color:var(--ink)}
.cart-page-tx{flex:1;min-width:0}
.cart-page-tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.cart-page-tx b a:hover{color:var(--accent-deep)}
.cart-line-meta{display:block;font-size:12px;color:var(--ink-4);margin-top:2px}
.cart-page-line .price{flex:0 0 auto;font-size:16px}
@media (max-width:520px){
  .cart-page-line{flex-wrap:wrap}
  .cart-page-art{width:56px;height:44px}
  .cart-page-line .price{order:3}
}
.sum{display:grid;gap:var(--s3);padding-block:var(--s4);border-top:1px solid var(--rule);margin-top:var(--s4)}
.sum > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);font-size:13.5px}
.sum dt{color:var(--ink-3)}
.sum dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500}
.sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--rule);margin-bottom:var(--s4)}
.sum-total span{font-size:14px;font-weight:600}
.sum-total b{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.cart-view{margin-top:var(--s2)}

/* ---------- checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);padding-bottom:var(--s8)}
@media (max-width:900px){.checkout-layout{grid-template-columns:1fr}}
.pay-placeholder{border:1px dashed var(--rule-strong);border-radius:var(--r-md);padding:var(--s6);text-align:center;background:var(--off-white)}
.pay-placeholder p{font-size:14px}
.pay-placeholder .muted{font-size:12.5px;margin-top:var(--s2);line-height:1.6}
.co-lines{display:grid;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.co-lines li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);font-size:13.5px}
.co-lines a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.co-name{flex:1;min-width:0;line-height:1.4}
.co-price{flex:0 0 auto;font-weight:600;font-variant-numeric:tabular-nums}
.coupon{margin-top:var(--s4);margin-bottom:0}
.coupon-row{display:flex;gap:var(--s2)}
.coupon-row input{flex:1;min-width:0}

/* ---------- confirmation ---------- */
.confirm{padding-block:var(--s8);text-align:center}
.confirm-tick{width:56px;height:56px;border-radius:50%;background:var(--ok-wash);color:var(--ok);display:inline-grid;place-items:center;margin-bottom:var(--s5)}
.confirm-tick svg{width:28px;height:28px}
.confirm h1{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.confirm-sub{margin:var(--s4) auto 0;max-width:52ch;font-size:15px;color:var(--ink-2);line-height:1.65}
.confirm .notice{text-align:left;margin-top:var(--s6)}
.confirm-card{margin-top:var(--s6);text-align:left}
.confirm-next{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}

/* ---------- account ---------- */
.account-layout{padding-bottom:var(--s8)}
.account-main{max-width:860px}
.account-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
@media (max-width:760px){.account-cards{grid-template-columns:1fr}}
.account-card{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s5);display:grid;gap:var(--s2);align-content:start;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.account-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.account-ico{width:36px;height:36px;border-radius:var(--r-sm);background:var(--accent-wash);color:var(--accent-deep);display:grid;place-items:center;margin-bottom:var(--s2)}
.account-ico svg{width:19px;height:19px}
.account-card b{font-size:14.5px;font-weight:600}
.account-card > span:not(.account-ico){font-size:12.5px;color:var(--ink-3);line-height:1.5}
.account-h2{font-size:1.15rem;font-weight:700;margin-top:var(--s8);padding-bottom:var(--s3);border-bottom:1px solid var(--rule);margin-bottom:var(--s5)}
.sample-label{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin:var(--s6) 0 var(--s3)}

.download-list{display:grid;gap:var(--s3)}
.download-row{display:flex;align-items:center;gap:var(--s4);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4)}
.download-row-sm{padding:var(--s3) var(--s4)}
.dl-art{width:72px;height:56px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--tint,var(--light));display:grid;place-items:center}
.dl-art span{font-family:var(--font-display);font-weight:800;font-size:9.5px;line-height:1.15;text-align:center;padding:3px;color:var(--ink)}
.dl-tx{flex:1;min-width:0}
.dl-tx b{display:block;font-size:14px;font-weight:600}
.dl-tx b a:hover{color:var(--accent-deep)}
.dl-meta{display:block;font-size:12px;color:var(--ink-4);margin-top:2px}
.dl-files{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.dl-file{font-size:11.5px;color:var(--ink-2);background:var(--light);border-radius:var(--r-xs);padding:3px 8px}
.dl-file em{font-style:normal;color:var(--ink-4)}
@media (max-width:620px){
  .download-row{flex-wrap:wrap}
  .dl-art{display:none}
}

.table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-md)}
.data-table{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px}
.data-table th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding:var(--s3) var(--s4);background:var(--off-white);border-bottom:1px solid var(--rule)}
.data-table td{padding:var(--s4);border-bottom:1px solid var(--rule)}
.data-table tr:last-child td{border-bottom:0}
.data-table .num{font-variant-numeric:tabular-nums}
.data-table a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

/* ---------- search page ---------- */
.search-page-field{margin:var(--s5) 0 0;max-width:560px}
.search-all{display:block;padding:var(--s3) var(--s5);border-top:1px solid var(--rule);font-size:12.5px;font-weight:600;color:var(--ink)}
.search-all:hover{color:var(--accent-deep)}

/* ---------- 404 ---------- */
.four-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s8);text-align:left}
@media (max-width:760px){.four-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- misc ---------- */
.faq-more{text-align:center;margin-top:var(--s6)}
.mega-all{display:block;margin-top:var(--s4);font-size:12.5px;font-weight:600;color:var(--ink)}
.mega-all:hover{color:var(--accent-deep)}
.foot-cats ul{columns:2;column-gap:var(--s4)}


/* =========================================================
   BUNDLES, FREQUENTLY BOUGHT TOGETHER, ORDER BUMP
   Concatenated after pages.css at build time.
   ========================================================= */

/* ---------- bundles index hero ---------- */
.bk-hero{padding-block:var(--s6) var(--s5)}
.bk-hero h1{
  font-size:clamp(2rem,5.2vw,3.4rem);font-weight:800;letter-spacing:-.042em;
  line-height:1.04;margin-top:var(--s2);
}
.bk-intro{margin-top:var(--s4);max-width:62ch;font-size:15.5px;color:var(--ink-2);line-height:1.65}
.bk-band{padding-top:var(--s5)}

/* ---------- bundle card ---------- */
.bk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media (max-width:900px){.bk-grid{grid-template-columns:1fr}}

.bk-card{
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bk-card:hover{border-color:var(--accent);box-shadow:var(--sh-card)}
.bk-card.is-popular{border-color:var(--rule-strong)}

.bk-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:var(--s5);background:var(--off-white);border-bottom:1px solid var(--rule);
}
.bk-head h3{font-size:16px;font-weight:700;letter-spacing:-.015em}
.bk-head h3 a:hover{color:var(--accent-deep)}
.bk-count{font-size:12.5px;color:var(--ink-3);margin-top:var(--s1)}
.bk-badge{
  flex:0 0 auto;background:var(--accent);color:var(--white);
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:6px 12px;border-radius:var(--r-xs);white-space:nowrap;
}

.bk-body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.bk-tagline{font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:52ch}

.bk-thumbs{display:flex;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.bk-thumb{
  width:86px;height:64px;flex:0 0 auto;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--white);padding:7px 8px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;gap:4px;
}
.bk-thumb::before{
  content:"";display:block;width:18px;height:3px;border-radius:2px;background:var(--accent);
}
.bk-thumb b{
  font-size:7.5px;font-weight:700;line-height:1.2;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bk-thumb-bar{display:none}
.bk-thumb-line{display:block;height:2px;border-radius:1px;background:var(--rule);width:100%}
.bk-thumb-line.short{width:62%}
.bk-more{
  display:grid;place-items:center;background:var(--off-white);
  font-size:12.5px;font-weight:600;color:var(--ink-3);padding:0;
}
.bk-more::before{display:none}
@media (max-width:420px){
  .bk-thumb{width:68px;height:54px}
}

.bk-foot{
  margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
.bk-price{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.bk-price b{
  font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.bk-price s{font-size:13px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.bk-price span{font-size:12.5px;color:var(--ink-3)}
.bk-foot .link-more{margin-top:var(--s2)}

.steps-wide li{font-size:15px}
.steps-wide b{color:var(--ink);font-weight:600}
.bk-upgrade{margin-top:var(--s5);font-size:13.5px;color:var(--ink-3);line-height:1.6;text-align:center}

/* ---------- bundle detail ---------- */
.bi-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);
  padding-block:var(--s5) var(--s8);align-items:start;
}
@media (max-width:980px){.bi-layout{grid-template-columns:1fr;gap:var(--s6)}}

.bi-main h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.bi-tagline{margin-top:var(--s4);font-size:16px;color:var(--ink-2);line-height:1.6;max-width:58ch}
.bi-h2{font-size:1.4rem;font-weight:800;letter-spacing:-.025em;margin-top:var(--s7)}
.bi-sub{margin-top:var(--s2);font-size:13.5px;color:var(--ink-3)}

.bi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5)}
@media (max-width:1100px){.bi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.bi-grid{grid-template-columns:1fr}}

.bi-card{
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bi-card:hover{border-color:var(--rule-strong);box-shadow:var(--sh-card)}
.bi-art{
  position:relative;display:grid;place-items:center;aspect-ratio:4/3;
  background:var(--tint,var(--light));border-bottom:1px solid var(--rule);
}
.bi-art-type{
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.03em;
  line-height:1.15;text-align:center;padding-inline:var(--s4);color:var(--ink);
}
.bi-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.bi-body h3{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.012em}
.bi-body h3 a:hover{color:var(--accent-deep)}
.bi-short{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.bi-body .price{margin-top:var(--s1)}
.bi-body .btn{margin-top:auto}

/* buy box */
.bi-buy .eyebrow-xs{margin-bottom:var(--s3)}
.bi-price{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.bi-price b{
  font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.bi-price s{font-size:15px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.bi-saving{margin-top:var(--s3);font-size:13px;font-weight:600;color:var(--accent-deep)}
.bi-buy .btn{margin-top:var(--s4)}
.bi-buy .btn svg{width:17px;height:17px}
.bi-note{
  display:flex;align-items:flex-start;gap:var(--s2);
  margin-top:var(--s4);font-size:12px;color:var(--ink-3);line-height:1.55;
}
.bi-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--ink-4)}

.bi-upsell{margin-top:var(--s4)}
.bi-upsell-row{
  display:block;border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);transition:border-color .18s var(--ease);
}
.bi-upsell-row + .bi-upsell-row{margin-top:var(--s2)}
.bi-upsell-row:hover{border-color:var(--accent)}
.bi-upsell-row b{display:block;font-size:13.5px;font-weight:600}
.bi-upsell-row span{display:block;font-size:12px;color:var(--ink-3);margin-top:1px;font-variant-numeric:tabular-nums}

/* ---------- frequently bought together ---------- */
.fbt{margin-bottom:var(--s4)}
.fbt-title{
  font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin-bottom:var(--s4);
}
.fbt-list{display:grid;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.fbt-row{align-items:flex-start;gap:var(--s3)}
.fbt-row input:disabled + .check-box{background:var(--ink);border-color:var(--ink);cursor:default}
.fbt-row input:disabled ~ .fbt-tx{opacity:.85}
.fbt-tx{flex:1;min-width:0}
.fbt-tx b{display:block;font-size:13px;font-weight:600;line-height:1.35;color:var(--ink)}
.fbt-tx b a:hover{color:var(--accent-deep)}
.fbt-price{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;font-variant-numeric:tabular-nums}
.fbt-total{
  padding-block:var(--s4);font-size:13.5px;color:var(--ink-3);
  display:flex;align-items:baseline;gap:var(--s2);
}
.fbt-total b{
  font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.fbt .btn{margin-top:0}

/* ---------- order bump ---------- */
.bump{
  border:1px dashed var(--accent);border-radius:var(--r-md);background:var(--accent-wash);
  padding:var(--s4) var(--s5);margin-bottom:var(--s8);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
}
.bump .check{padding:0;flex:1;min-width:260px}
.bump .check-label b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.bump-note{display:block;font-size:12.5px;color:#6B5E54;margin-top:2px;line-height:1.5}
.bump-link{font-size:12.5px;font-weight:600;color:var(--accent-deep);white-space:nowrap}
.bump-link:hover{text-decoration:underline;text-underline-offset:2px}
.bump.is-added{border-style:solid;background:var(--ok-wash);border-color:var(--ok)}
.bump.is-added .bump-note{color:var(--ok)}

/* ---------- bundle card inside a scroll row ---------- */
.scroll-row .mini-card .price{font-variant-numeric:tabular-nums}


/* =========================================================
   RATINGS, REVIEWS, FREE-RESOURCE GATE, AUTH
   Concatenated after bundles.css at build time.
   ========================================================= */

/* ---------------------------------------------------------
   NAV: the active item is underlined in the primary colour,
   flush with the header's bottom edge so it reads as a tab.
   The base rule in styles.css animates on hover; these
   override position, weight and colour for the active state.
   --------------------------------------------------------- */
.primary-nav a::after,
.mega-trigger::after{
  bottom:calc((var(--header-h) - 100%) / -2);
  height:3px;border-radius:3px 3px 0 0;
  background:var(--accent);
}
.primary-nav a.is-active,
.mega-trigger.is-active{color:var(--accent);font-weight:600}
.primary-nav a.is-active::after,
.mega-trigger.is-active::after{transform:scaleX(1)}
.primary-nav a.is-active:hover,
.mega-trigger.is-active:hover{color:var(--accent-deep)}

/* ---------------------------------------------------------
   STARS
   --------------------------------------------------------- */
.stars{
  position:relative;display:inline-block;line-height:0;
  white-space:nowrap;vertical-align:middle;
}
.stars svg{width:15px;height:15px;display:inline-block}
.stars-sm svg{width:12px;height:12px}
.stars-empty{display:block;color:var(--rule-strong)}
.stars-full{
  display:block;position:absolute;inset:0;overflow:hidden;
  color:var(--accent);white-space:nowrap;
}
.stars-empty svg,.stars-full svg{fill:currentColor}

.rating-inline{display:inline-flex;align-items:center;gap:6px;line-height:1}
.rating-num{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rating-count{font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}

.prod-card .rating-inline{margin-top:-2px}
.pd-rating{
  display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s3);
  text-decoration:none;
}
.pd-rating .rating-num{font-size:13.5px}
.pd-rating .rating-count{font-size:12.5px}
.pd-rating-link{
  font-size:12.5px;font-weight:600;color:var(--ink-3);
  border-bottom:1px solid var(--rule-strong);padding-bottom:1px;
}
.pd-rating:hover .pd-rating-link{color:var(--accent-deep);border-color:var(--accent-deep)}

/* ---------------------------------------------------------
   REVIEW SUMMARY
   --------------------------------------------------------- */
.rv-summary{
  display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s7);
  align-items:center;border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);background:var(--white);
}
@media (max-width:760px){
  .rv-summary{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)}
}
.rv-score{text-align:center}
.rv-average{
  font-family:var(--font-display);font-size:48px;font-weight:800;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);
}
.rv-average span{font-size:20px;color:var(--ink-4);font-weight:600;letter-spacing:-.02em}
.rv-score .stars{margin-top:var(--s3)}
.rv-count{margin-top:var(--s2);font-size:13px;color:var(--ink-3)}
.rv-verified{
  display:inline-flex;align-items:center;gap:5px;margin-top:var(--s3);
  font-size:11.5px;font-weight:600;color:var(--ok);
}
.rv-verified svg{width:13px;height:13px}

.rv-bars{display:grid;gap:var(--s2)}
.rv-bars li{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;gap:var(--s3);align-items:center}
.rv-bar-label{font-size:12px;color:var(--ink-3);white-space:nowrap}
.rv-bar{height:8px;border-radius:var(--r-pill);background:var(--light);overflow:hidden}
.rv-bar-fill{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.rv-bar-count{font-size:12px;color:var(--ink-4);text-align:right;font-variant-numeric:tabular-nums}

.rv-empty{
  border:1px dashed var(--rule-strong);border-radius:var(--r-lg);
  padding:var(--s7);text-align:center;
}
.rv-empty p{font-size:14px}
.rv-empty .muted{margin-top:var(--s2);font-size:13px;max-width:46ch;margin-inline:auto;line-height:1.6}
.rv-sample{color:var(--accent-deep)}

/* ---------------------------------------------------------
   REVIEW LIST
   --------------------------------------------------------- */
.rv-bar-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s6);padding-bottom:var(--s4);
  border-bottom:1px solid var(--rule);
}
.rv-filters{display:flex;flex-wrap:wrap;gap:var(--s2)}
.rv-filters .chip{cursor:pointer}
.rv-filters .chip:hover{border-color:var(--ink)}
.rv-filters .chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--white)}

.rv-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);
  margin-top:var(--s5);
}
@media (max-width:860px){.rv-list{grid-template-columns:1fr}}

.rv-card{
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
}
.rv-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.rv-avatar{
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;
  background:var(--accent-wash);color:var(--accent-deep);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;
  font-family:var(--font-display);letter-spacing:-.01em;
}
.rv-who{min-width:0}
.rv-who b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.rv-role{display:block;font-size:11.5px;color:var(--ink-4);margin-top:1px}
.rv-badge{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:600;color:var(--ok);background:var(--ok-wash);
  border-radius:var(--r-xs);padding:4px 8px;white-space:nowrap;
}
.rv-badge svg{width:12px;height:12px}
.rv-rating{display:flex;align-items:center;gap:var(--s3)}
.rv-rating time{font-size:11.5px;color:var(--ink-4)}
.rv-title{font-size:14.5px;font-weight:700;letter-spacing:-.012em;line-height:1.35;margin:0}
.rv-body{font-size:13.5px;color:var(--ink-2);line-height:1.65}
.rv-none{margin-top:var(--s6);text-align:center;font-size:14px;color:var(--ink-3)}

/* ---------------------------------------------------------
   WRITE A REVIEW
   --------------------------------------------------------- */
.rv-write{
  margin-top:var(--s7);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);background:var(--off-white);max-width:620px;
}
.rv-write h3{font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
.rv-write-note{margin-top:var(--s2);font-size:12.5px;color:var(--ink-3);line-height:1.55}
.rv-form{margin-top:var(--s5)}
.rv-stars-field{margin-bottom:var(--s5)}
.rv-stars-field legend{margin-bottom:var(--s3)}

/* reversed order so :hover and :checked can style preceding siblings */
.rv-star-input{display:inline-flex;flex-direction:row-reverse;gap:var(--s1)}
.rv-star-input input{position:absolute;opacity:0;width:0;height:0}
.rv-star-input label{
  cursor:pointer;line-height:0;color:var(--rule-strong);
  transition:color .12s var(--ease), transform .12s var(--ease);
}
.rv-star-input svg{width:30px;height:30px;fill:currentColor}
.rv-star-input label:hover,
.rv-star-input label:hover ~ label,
.rv-star-input input:checked ~ label{color:var(--accent)}
.rv-star-input label:hover{transform:scale(1.08)}
.rv-star-input input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

/* ---------------------------------------------------------
   FREE RESOURCE GATE
   --------------------------------------------------------- */
.gate{
  position:fixed;inset:0;z-index:95;background:rgba(1,1,1,.5);
  backdrop-filter:blur(3px);overflow-y:auto;
  padding:clamp(24px,6vh,80px) var(--gutter);
  animation:fadeIn .18s var(--ease);
}
.gate-panel{
  position:relative;max-width:460px;margin-inline:auto;background:var(--white);
  border-radius:var(--r-xl);box-shadow:var(--sh-pop);padding:clamp(24px,4vw,40px);
  animation:panelIn .24s var(--ease);
}
.gate-close{position:absolute;top:var(--s3);right:var(--s3)}
.gate-panel h2{
  font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;margin-top:var(--s2);
}
.gate-product{
  margin-top:var(--s3);font-size:13px;font-weight:600;color:var(--ink);
  background:var(--light);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
}
.gate-body{margin-top:var(--s4);font-size:13.5px;color:var(--ink-2);line-height:1.6}
.gate-points{display:grid;gap:var(--s2);margin-top:var(--s4)}
.gate-points li{display:flex;gap:var(--s2);font-size:12.5px;color:var(--ink-2);line-height:1.5}
.gate-points svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent);margin-top:1px}
.gate-form{margin-top:var(--s5)}
.gate-form .field{margin-bottom:var(--s4)}
.gate-form .check-block{padding-block:var(--s2) var(--s4)}
.gate-alt{margin-top:var(--s4);font-size:12.5px;color:var(--ink-3);text-align:center}
.gate-alt a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------
   AUTH PAGES
   --------------------------------------------------------- */
.auth-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);
  padding-block:var(--s6) var(--s8);align-items:start;
}
@media (max-width:900px){.auth-layout{grid-template-columns:1fr}}
.auth-card{max-width:560px}
.auth-card h1{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.auth-sub{margin-top:var(--s4);font-size:15px;color:var(--ink-2);line-height:1.6;max-width:52ch}
.auth-form{margin-top:var(--s6)}
.auth-forgot{margin:calc(var(--s3) * -1) 0 var(--s5);font-size:12.5px}
.auth-forgot a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.auth-alt{margin-top:var(--s5);font-size:13.5px;color:var(--ink-3)}
.auth-alt a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.auth-side .ticks li{font-size:13px}
.auth-side .ticks b{color:var(--ink);font-weight:600}


/* =========================================================
   HEADER LAYOUT, MEGA MENU, PRODUCT COVER, REGION PICKER
   Concatenated last, so it overrides the earlier sheets.
   ========================================================= */

/* ---------------------------------------------------------
   HEADER: logo left, nav centred, utilities right.
   The 1fr / auto / 1fr grid centres the nav against the
   header rather than against the logo, so it stays centred
   whatever the logo or the utility row weigh.
   --------------------------------------------------------- */
.header-inner{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--s4);height:var(--header-h);
}
.header-left{display:flex;align-items:center;gap:var(--s3);justify-self:start;min-width:0}
.primary-nav{justify-self:center}
.header-utils{justify-self:end;margin-left:0}

.primary-nav ul{gap:var(--s5)}
@media (max-width:1180px){.primary-nav ul{gap:var(--s4)}}
@media (max-width:1060px){
  .primary-nav{display:none}
  .menu-btn{display:grid}
  .header-inner{grid-template-columns:1fr auto;gap:var(--s3)}
  .header-utils{grid-column:2}
}

/* ---------------------------------------------------------
   REGION AND CURRENCY BUTTON
   --------------------------------------------------------- */
.region-btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:5px 11px 5px 5px;min-height:36px;background:var(--white);
  transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.region-btn:hover{border-color:var(--ink);background:var(--paper,var(--white))}
.region-btn .chev{width:9px;height:6px;color:var(--ink-3)}
.region-btn[aria-expanded="true"]{border-color:var(--accent)}
.region-cur{font-size:12.5px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .region-cur{display:none}
  .region-btn{padding:5px 8px 5px 5px}
}

/* ---------------------------------------------------------
   REGION PANEL
   --------------------------------------------------------- */
.region{
  position:fixed;inset:0;z-index:96;background:rgba(1,1,1,.45);
  backdrop-filter:blur(3px);padding:clamp(16px,8vh,96px) var(--gutter);
  animation:fadeIn .16s var(--ease);
}
.region-panel{
  max-width:430px;margin-inline:auto;background:var(--white);
  border-radius:var(--r-xl);box-shadow:var(--sh-pop);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(640px,82vh);
  animation:panelIn .22s var(--ease);
}
.region-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s5) var(--s5) var(--s3);flex:0 0 auto;
}
.region-top h2{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.region-search{
  display:flex;align-items:center;gap:var(--s2);margin:0 var(--s5) var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:9px var(--s4);flex:0 0 auto;
}
.region-search svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.region-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px}

.region-list{flex:1;overflow-y:auto;padding:0 var(--s3) var(--s3);display:grid;gap:2px}
.region-row{
  width:100%;display:flex;align-items:center;gap:var(--s3);
  padding:9px var(--s3);border-radius:var(--r-sm);text-align:left;
  transition:background-color .13s var(--ease);
}
.region-row:hover{background:var(--light)}
.region-row.is-on{background:var(--accent-wash)}
.region-name{flex:1;min-width:0}
.region-name b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.region-name span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:1px}
.region-money{
  flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ink-3);
  background:var(--light);border-radius:var(--r-xs);padding:4px 8px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.region-none{padding:var(--s7) var(--s5);text-align:center;font-size:13.5px;color:var(--ink-3)}
.region-note{
  flex:0 0 auto;margin:0;padding:var(--s4) var(--s5);
  border-top:1px solid var(--rule);background:var(--off-white);
  font-size:11.5px;color:var(--ink-3);line-height:1.55;
}


/* ---------------------------------------------------------
   MEGA MENU: category blocks flowing into columns
   --------------------------------------------------------- */
.mega-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;
  gap:var(--s7);padding-block:var(--s6) var(--s7);
}
.mega-cats{columns:4;column-gap:var(--s6)}
@media (max-width:1180px){.mega-cats{columns:3}}

.mega-cat{break-inside:avoid;page-break-inside:avoid;margin-bottom:var(--s6)}
.mega-cat:last-child{margin-bottom:0}
.mega-cat-head{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--font-body);font-size:13.5px;font-weight:700;letter-spacing:-.008em;
  margin-bottom:var(--s3);
}
.mega-cat-head a{color:var(--ink)}
.mega-cat-head a:hover{color:var(--accent-deep)}
.mega-ico{
  width:20px;height:20px;flex:0 0 auto;color:var(--accent);
  display:grid;place-items:center;
}
.mega-ico svg{width:16px;height:16px}
.mega-cat ul{display:grid;gap:7px;padding-left:28px}
.mega-cat ul a{
  font-size:12.5px;color:var(--ink-3);display:inline-block;
  transition:color .14s var(--ease), transform .14s var(--ease);
}
.mega-cat ul a:hover{color:var(--accent-deep);transform:translateX(2px)}

.mega-rail{display:grid;gap:var(--s3);align-content:start}
.mega-promo-card{
  display:block;border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s4);background:var(--white);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.mega-promo-card:hover{border-color:var(--accent);box-shadow:var(--sh-card)}
.mega-promo-card b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.012em}
.mega-promo-card span{display:block;margin-top:var(--s2);font-size:11.5px;color:var(--ink-3);line-height:1.5}
.mega-promo-card.is-free{background:var(--accent-wash);border-color:var(--accent-edge)}
.mega-promo-card.is-free b{color:var(--ink)}
.mega-promo-card.is-free span{color:#6B5E54}
.mega-promo-card.is-free:hover{border-color:var(--accent)}

@media (max-width:1060px){
  .mega-grid{grid-template-columns:1fr;gap:var(--s5)}
  .mega-cats{columns:2}
}

/* ---------------------------------------------------------
   PRODUCT COVER: a document mockup rather than a photograph
   --------------------------------------------------------- */
.prod-art,.mini-art,.bi-art{background:var(--tint,var(--light))}
.dp{
  display:block;width:100%;height:100%;
  background:var(--tint,var(--light));
  padding:clamp(10px,4%,16px) clamp(10px,4%,16px) 0;
  display:flex;align-items:flex-end;justify-content:center;
}
.dp-sheet{
  display:flex;flex-direction:column;gap:5px;
  width:100%;height:100%;
  background:var(--white);border:1px solid rgba(1,1,1,.06);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  box-shadow:0 1px 2px rgba(1,1,1,.04), 0 8px 20px rgba(1,1,1,.06);
  padding:clamp(9px,5%,15px);overflow:hidden;
}
.dp-rule{
  display:block;width:24px;height:4px;border-radius:2px;
  background:var(--accent);flex:0 0 auto;margin-bottom:3px;
}
.dp-line{display:block;height:3px;border-radius:2px;background:var(--rule);flex:0 0 auto}
.dp-line-top{opacity:.85}
.dp-title{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(10px,3.4cqw,13px);letter-spacing:-.022em;line-height:1.2;
  color:var(--ink);margin-block:7px 4px;flex:0 0 auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dp-lines{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;overflow:hidden}
.dp-foot{
  display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:6px;
  font-size:7.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-4);
  flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dp-dot{width:7px;height:7px;border-radius:2px;background:var(--accent);flex:0 0 auto}

/* the sheet scales its type to the card it is in */
.prod-art,.mini-art,.bi-art{container-type:inline-size}
.prod-art .dp-title{font-size:clamp(11px,6.5cqw,15px)}
.mini-art .dp-title{font-size:clamp(9px,7cqw,12px)}
.bi-art .dp-title{font-size:clamp(11px,6.5cqw,15px)}

.mini-art .dp{padding:8px 8px 0}
.mini-art .dp-sheet{padding:8px;gap:4px}
.mini-art .dp-lines{gap:4px}
.mini-art .dp-foot{font-size:6.5px}

/* ---------------------------------------------------------
   CARD: full-width action, roomier body
   --------------------------------------------------------- */
.prod-card .prod-art{aspect-ratio:4/3;border-bottom:1px solid var(--rule);display:block}
.prod-card .prod-body{padding:var(--s4);gap:var(--s2)}
.prod-card .prod-name{font-size:14.5px;line-height:1.3}
.prod-card .prod-meta{
  font-size:12.5px;color:var(--ink-3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prod-card .prod-foot{
  margin-top:auto;padding-top:var(--s3);display:block;
}
.prod-card .price{font-size:18px}
.btn-card{margin-top:var(--s3);min-height:42px;font-size:13px;border-radius:var(--r-sm)}
.prod-card .btn-card{width:100%}

@media (max-width:420px){
  .prod-card .prod-meta{display:none}
  .prod-card .prod-body{padding:var(--s3)}
  .btn-card{min-height:40px;font-size:12.5px}
}

/* mini card keeps its compact shape */
.mini-card .mini-art{aspect-ratio:4/3;display:block}

/* bundle "what is inside" cards use the same cover */
.bi-card .bi-art{aspect-ratio:4/3;display:block}

/* ---------------------------------------------------------
   FLAGS
   Drawn as inline SVG and cropped to a circle here, so no
   image requests and no reliance on emoji flag glyphs, which
   Windows does not ship.
   --------------------------------------------------------- */
.flag{
  display:block;width:28px;height:28px;flex:0 0 auto;
  border-radius:50%;overflow:hidden;position:relative;
  background:var(--light);
  box-shadow:inset 0 0 0 1px rgba(1,1,1,.10);
}
.flag-svg{display:block;width:100%;height:100%}
.flag-code{
  display:grid;place-items:center;width:100%;height:100%;
  background:var(--ink);color:var(--white);
  font-size:10px;font-weight:700;letter-spacing:.02em;
}
.region-flag{width:28px;height:28px}
.region-flag-wrap{display:block;flex:0 0 auto}
.region-flag-wrap .flag{width:24px;height:24px}
.region-row.is-on .flag{box-shadow:inset 0 0 0 1px rgba(1,1,1,.10), 0 0 0 2px var(--accent)}

/* ---------------------------------------------------------
   AFFILIATE PROGRAMME
   --------------------------------------------------------- */
.aff-hero{
  padding-block:var(--s6) var(--s7);
  background:
    radial-gradient(58% 44% at 50% 0%, rgba(247,123,42,.08) 0%, rgba(247,123,42,0) 70%),
    var(--white);
}
.aff-hero h1{
  font-size:clamp(2rem,5.4vw,3.5rem);font-weight:800;letter-spacing:-.042em;
  line-height:1.03;margin-top:var(--s2);
}
.aff-lede{margin-top:var(--s5);max-width:56ch;font-size:16.5px;color:var(--ink-2);line-height:1.6}
.aff-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

.aff-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule);
}
@media (max-width:760px){.aff-stats{grid-template-columns:repeat(2,1fr);gap:var(--s5)}}
.aff-stats li{display:grid;gap:var(--s1)}
.aff-stats b{
  font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:800;
  letter-spacing:-.025em;color:var(--ink);
}
.aff-stats b .ph{font-size:.72em}
.aff-stats span{font-size:12px;color:var(--ink-3)}
.aff-stat-note{
  margin-top:var(--s5);max-width:72ch;font-size:12.5px;color:var(--ink-3);line-height:1.6;
}

.aff-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);counter-reset:none;
}
@media (max-width:900px){.aff-steps{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)}}
@media (max-width:520px){.aff-steps{grid-template-columns:1fr}}
.aff-steps li{display:grid;gap:var(--s2);align-content:start;list-style:none}
.aff-step-n{
  width:32px;height:32px;border-radius:50%;background:var(--accent-wash);color:var(--accent-deep);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:14px;
  margin-bottom:var(--s2);
}
.aff-steps b{font-size:15px;font-weight:700;letter-spacing:-.015em}
.aff-steps span{font-size:13.5px;color:var(--ink-3);line-height:1.6}

.aff-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:900px){.aff-lanes{grid-template-columns:1fr}}
.aff-lane{
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);
  padding:var(--s5);display:grid;gap:var(--s2);align-content:start;
}
.aff-lane.is-yes{border-left:3px solid var(--ok)}
.aff-lane.is-no{border-left:3px solid var(--ink-3);background:var(--off-white)}
.aff-lane-tag{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ok);
}
.aff-lane.is-no .aff-lane-tag{color:var(--ink-3)}
.aff-lane b{font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.aff-lane p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.aff-lane-count{
  margin-top:var(--s2);font-size:11.5px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.aff-form{margin-top:var(--s6)}
.aff-form .check-block{padding-block:var(--s3) var(--s4)}


/* =========================================================
   ANNOUNCEMENT BAR, SALE PRICES, SLIDER, BORDERED BUTTON,
   AND THE RESPONSIVE TYPE PASS
   Concatenated last, so it settles the cascade.
   ========================================================= */

/* ---------------------------------------------------------
   ANNOUNCEMENT BAR
   --------------------------------------------------------- */
.announce{background:var(--ink);color:var(--white)}
.announce-in{
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:40px;padding-block:7px;position:relative;
}
.announce-text{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:center;
  font-size:13px;line-height:1.45;text-align:center;
}
.announce-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;
}
.announce-text a{
  font-weight:600;color:var(--accent);white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .16s var(--ease);
}
.announce-text a:hover{border-bottom-color:var(--accent)}
.announce-close{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:rgba(255,255,255,.6);
  transition:color .16s var(--ease), background-color .16s var(--ease);
}
.announce-close:hover{color:var(--white);background:rgba(255,255,255,.12)}
.announce-close svg{width:15px;height:15px}
@media (max-width:620px){
  .announce-in{padding-right:34px}
  .announce-text{font-size:12px;justify-content:flex-start;text-align:left}
}

/* ---------------------------------------------------------
   SALE PRICES
   The former price is struck through in red; the price you
   actually pay stays black and heaviest, so the eye lands on
   what it costs rather than on the discount.
   --------------------------------------------------------- */
.price-group{display:inline-flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.price-was{
  font-family:var(--font-body);font-size:.72em;font-weight:500;
  color:#C62828;text-decoration:line-through;text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums;
}
.price-off{
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:#C62828;background:#FBECEB;border-radius:var(--r-xs);
  padding:3px 6px;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pd-price .price-was{font-size:17px}
.pd-price .price-off{font-size:12px;padding:4px 9px}
.bk-price .price-was,.bi-price .price-was{font-size:14px}

/* the bundle "bought separately" figure is a comparison, not a
   former price, so it stays grey and must not read as a discount */
.bk-price s,.bi-price s{color:var(--ink-4);text-decoration-thickness:1px}

/* ---------------------------------------------------------
   BORDERED BUTTON
   --------------------------------------------------------- */
.btn-bordered{
  background:var(--white);color:var(--ink);border-color:var(--rule-strong);
  font-weight:600;
}
.btn-bordered:hover{
  border-color:var(--ink);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(1,1,1,.07);
}
.btn-arrow{
  display:inline-block;margin-left:2px;
  transition:transform .18s var(--ease);
}
.btn-bordered:hover .btn-arrow{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .btn-bordered:hover,.btn-bordered:hover .btn-arrow{transform:none}
}

/* ---------------------------------------------------------
   SLIDER
   A scroll-snap track, so a trackpad, a swipe and the arrow
   buttons all drive the same thing.
   --------------------------------------------------------- */
.slider{position:relative}
.slider-track{
  display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:var(--s3);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:thin;
}
.slider-track::-webkit-scrollbar{height:6px}
.slider-track::-webkit-scrollbar-track{background:var(--rule);border-radius:var(--r-pill)}
.slider-track::-webkit-scrollbar-thumb{background:#C9C9C9;border-radius:var(--r-pill)}
.slider-item{
  flex:0 0 auto;width:clamp(210px,24vw,266px);scroll-snap-align:start;
  display:flex;
}
.slider-item > *{width:100%}

.slider-btn{
  position:absolute;top:38%;width:40px;height:40px;border-radius:50%;
  background:var(--white);border:1px solid var(--rule);color:var(--ink);
  display:grid;place-items:center;z-index:2;
  box-shadow:0 2px 6px rgba(1,1,1,.08), 0 10px 24px rgba(1,1,1,.08);
  transition:border-color .16s var(--ease), transform .16s var(--ease), opacity .16s var(--ease);
}
.slider-btn:hover{border-color:var(--ink);transform:scale(1.06)}
.slider-btn svg{width:18px;height:18px}
.slider-prev{left:calc(var(--gutter) * -1 + 4px)}
.slider-next{right:calc(var(--gutter) * -1 + 4px)}
.slider-btn[disabled]{opacity:.3;pointer-events:none}
@media (max-width:1300px){
  .slider-prev{left:4px}
  .slider-next{right:4px}
}
@media (max-width:760px){
  .slider-btn{display:none}
  .slider-item{width:clamp(180px,62vw,230px)}
}
@media (prefers-reduced-motion:reduce){
  .slider-track{scroll-behavior:auto}
  .slider-btn:hover{transform:none}
}

/* ---------------------------------------------------------
   TYPE: shorter measures, tighter steps, no heading that
   runs past two lines at any width
   --------------------------------------------------------- */
.band-head h2{
  font-size:clamp(1.4rem,1.05rem + 1.5vw,2.05rem);
  line-height:1.14;letter-spacing:-.028em;max-width:18ch;
}
.band-sub{font-size:14px;line-height:1.6;max-width:54ch}
.coll-head h1,.prose-head h1{
  font-size:clamp(1.6rem,1.2rem + 1.9vw,2.5rem);
  line-height:1.1;letter-spacing:-.034em;max-width:18ch;
}
.coll-intro,.prose-standfirst{font-size:15px;line-height:1.65;max-width:62ch}
.hero h1{font-size:clamp(2rem,1.3rem + 3.4vw,3.9rem);max-width:15ch}
.hero-sub{font-size:clamp(.9375rem,.88rem + .3vw,1.0625rem);max-width:50ch}
.post-head h1{font-size:clamp(1.7rem,1.2rem + 2.3vw,2.7rem);max-width:20ch}
.post-standfirst{font-size:16px;max-width:58ch}
.bi-main h1,.aff-hero h1,.bk-hero h1{
  font-size:clamp(1.8rem,1.3rem + 2.4vw,3rem);line-height:1.06;max-width:16ch;
}
.pd-buy h1{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem);line-height:1.15;max-width:20ch}

.why-item h3,.aff-steps b{font-size:14.5px}
.why-item p,.aff-steps span{font-size:13px;line-height:1.6;max-width:36ch}

/* nothing may push the page sideways */
.band-head h2,.coll-head h1,.prose-head h1,.hero h1,.post-head h1,
.bi-main h1,.aff-hero h1,.bk-hero h1,.pd-buy h1,.free-copy h2{
  overflow-wrap:break-word;
}

/* the four-up benefit row wraps earlier, so it never clips */
@media (max-width:1040px){
  .why-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)}
}
@media (max-width:560px){
  .why-grid{grid-template-columns:1fr}
  .aff-stats{grid-template-columns:1fr}
}


/* =========================================================
   CATEGORY IMAGE CARDS, SALE FLASHES, LABEL COLOUR
   The last sheet in the bundle, so it settles the cascade.
   ========================================================= */

/* ---------------------------------------------------------
   LABELS IN THE PRIMARY COLOUR
   Every uppercase micro-label across the site, one rule.
   Body copy, metadata and prices stay neutral, so the orange
   still marks something rather than being everywhere.
   --------------------------------------------------------- */
.eyebrow-xs,
.filter-head,
.mega-head,
.foot-col h2,
.side-card h2,
.sample-label,
legend,
.wf-title,
.search-results-head .eyebrow-xs,
.aff-lane-tag,
.bk-head .bk-count{
  color:var(--accent-deep);
}
.prod-card .eyebrow-xs,
.mini-body .eyebrow-xs,
.bi-body .eyebrow-xs,
.blog-body .eyebrow-xs{
  color:var(--accent-deep);font-weight:600;
}
/* on the dark announcement and on orange grounds, fall back */
.free-panel .eyebrow-xs,
.announce .eyebrow-xs{color:var(--ink)}
.aff-lane.is-no .aff-lane-tag{color:var(--ink-3)}

/* ---------------------------------------------------------
   CATEGORY IMAGE CARD
   --------------------------------------------------------- */
.cat-card{
  display:flex;flex-direction:column;gap:0;height:100%;padding:0;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cat-card:hover{
  border-color:var(--rule-strong);box-shadow:var(--sh-lift);transform:translateY(-3px);
}
.cat-art{
  display:block;aspect-ratio:16/10;background:var(--tint,var(--light));
  border-bottom:1px solid var(--rule);overflow:hidden;position:relative;
}
.cat-art-svg{
  display:block;width:100%;height:100%;
  transition:transform .35s var(--ease);
}
.cat-card:hover .cat-art-svg{transform:scale(1.035)}
.cat-art-fallback{
  display:grid;place-items:center;width:100%;height:100%;color:var(--accent-deep);
}
.cat-art-fallback svg{width:38px;height:38px}

.cat-body{
  display:flex;flex-direction:column;gap:var(--s2);flex:1;
  padding:var(--s4) var(--s5) var(--s5);
}
.cat-card b{
  font-family:var(--font-display);font-size:15.5px;font-weight:700;
  letter-spacing:-.018em;line-height:1.25;color:var(--ink);
}
.cat-desc{font-size:12.5px;color:var(--ink-3);line-height:1.5;display:block}
.cat-go{
  margin-top:auto;padding-top:var(--s3);
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--ink);
}
.cat-arr{color:var(--rule-strong);transition:color .2s var(--ease), transform .2s var(--ease)}
.cat-card:hover .cat-go{color:var(--accent-deep)}
.cat-card:hover .cat-arr{color:var(--accent);transform:translateX(3px)}

@media (max-width:480px){
  .cat-body{padding:var(--s3) var(--s4) var(--s4)}
  .cat-card b{font-size:14px}
  .cat-desc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cat-card:hover,.cat-card:hover .cat-art-svg,.cat-card:hover .cat-arr{transform:none}
}

/* ---------------------------------------------------------
   SALE FLASH on the product cover
   --------------------------------------------------------- */
.sale-flash{
  position:absolute;top:10px;right:10px;z-index:2;
  background:#C62828;color:var(--white);
  font-size:11px;font-weight:700;letter-spacing:.01em;
  padding:5px 9px;border-radius:var(--r-xs);
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(198,40,40,.3);
}
.mini-art .sale-flash{top:7px;right:7px;font-size:10px;padding:4px 7px}
.prod-art,.mini-art,.bi-art{position:relative}

/* ---------------------------------------------------------
   BUNDLE CARDS carry the same was / now / off treatment
   --------------------------------------------------------- */
.bk-price{align-items:baseline;gap:var(--s2)}
.bk-was{
  font-size:13px;font-weight:500;color:#C62828;
  text-decoration:line-through;text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums;
}
.bk-off{
  font-size:10.5px;font-weight:700;color:#C62828;background:#FBECEB;
  border-radius:var(--r-xs);padding:3px 6px;font-variant-numeric:tabular-nums;
}
.bk-sep{
  display:block;width:100%;margin-top:var(--s2);
  font-size:11.5px;color:var(--ink-4);
}
.bk-sep s{text-decoration-thickness:1px}

/* ---------------------------------------------------------
   A FEW PROPORTION FIXES
   --------------------------------------------------------- */
.cat-grid{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:1000px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:var(--s3)}}
.cat-grid-wide{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.cat-grid-wide{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.cat-grid-wide{grid-template-columns:repeat(2,1fr)}}

.four-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.four-grid{grid-template-columns:repeat(2,1fr)}}

/* the subcategory index reads as a list, not as cards */
.subcat-col h3{font-size:13.5px}
.subcat-col h3 a{color:var(--ink)}

/* =========================================================
   THE PRIMARY ORANGE CARRIES BLACK TEXT

   White on #F77B2A is 2.68:1, which fails WCAG AA, and on the
   hover orange #D9600F it is 3.73:1, which also fails. Black on
   the same two is 7.77:1 and 5.60:1, both passing comfortably.

   So the brand orange stays exactly #F77B2A and the text on it
   goes black. This is the one change that keeps the colour and
   the contrast requirement at the same time.
   ========================================================= */
.btn-primary{
  background:var(--accent);color:var(--ink);
  box-shadow:0 6px 16px rgba(247,123,42,.26);
}
.btn-primary:hover{background:var(--accent-deep);color:var(--ink)}
.btn-primary:disabled{background:var(--accent);color:var(--ink)}

/* the same correction everywhere else orange sits behind text */
.badge-accent,
.bk-badge,
.cart-count,
.filter-badge,
.logo-glyph,
.hero-kicker b{
  background:var(--accent);color:var(--ink);
}

/* the add-to-cart on a card: full width, unmistakable, and the
   one thing on the card that is orange */
.prod-card .btn-card.btn-primary,
.bi-body .btn-primary{
  font-weight:700;letter-spacing:.005em;
}
.prod-card .btn-card.btn-bordered{font-weight:600}

/* keep a hierarchy on the product page: add to cart is orange,
   buy now stays black, so they do not compete */
.pd-actions .btn-ink{background:var(--ink);color:var(--white)}