/* ==========================================================================
   ARBORYTH — main.css
   Implements ARBORYTH Design System v1.0 (09/09/2026).
   Mobile-first. Breakpoints 750 / 990 match Shopify Dawn.
   No preprocessor, no framework, no reset library.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand core — locked by Brand Platform 1.0 until 2028-09-08 */
  --arb-navy:#16293D;
  --arb-sand:#DCC7A6;
  --arb-oak:#C08B4F;
  --arb-cream:#F6F2EB;
  --arb-walnut:#6B4429;
  --arb-green:#3D5646;
  --arb-copper:#B08243;

  /* Surfaces */
  --surface-canvas:#F6F2EB;
  --surface-raised:#FFFFFF;
  --surface-sunken:#EFE9DE;
  --surface-inverse:#16293D;
  --surface-inverse-2:#1E3450;

  /* Text — ratios measured against #F6F2EB */
  --text-primary:#16293D;      /* 13.27:1  AAA */
  --text-secondary:#3A4B5C;    /*  8.04:1  AAA */
  --text-muted:#5C6A77;        /*  4.97:1  AA — never below 14px */
  --text-on-dark:#F6F2EB;      /* 13.27:1 on navy */
  --text-muted-dark:#A9B6C2;   /*  7.16:1 on navy */

  /* Lines */
  --border-hairline:#E3DACB;
  --border-default:#D8CCB6;
  --border-control:#8C8471;    /*  3.71:1 — the only line colour that clears UI 3:1 */
  --border-strong:#16293D;

  /* Semantic */
  --ok:#3D5646;
  --warn:#B08243;
  --danger:#8C3A2E;

  /* Focus */
  --focus-ring:#16293D;
  --focus-halo:rgba(192,139,79,.35);

  /* Shadow — navy-tinted, never black */
  --sh-xs:0 1px 2px rgba(22,41,61,.06);
  --sh-sm:0 2px 6px rgba(22,41,61,.07);
  --sh-md:0 8px 24px rgba(22,41,61,.09);
  --sh-lg:0 20px 48px rgba(22,41,61,.12);
  --sh-focus:0 0 0 5px var(--focus-halo);

  /* Radius */
  --r-none:0; --r-sm:4px; --r-md:8px; --r-pill:999px;

  /* Spacing — 4px base */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:40px; --sp-8:48px; --sp-9:64px; --sp-10:80px; --sp-11:96px; --sp-12:128px;

  /* Layout */
  --container-max:1280px;
  --container-wide:1440px;
  --container-text:720px;
  --page-pad:20px;
  --gutter:16px;

  /* Motion */
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:240ms; --dur-drawer:280ms;
  --ease:cubic-bezier(.22,.72,.28,1);
  --ease-inout:cubic-bezier(.6,.02,.28,1);

  /* Type */
  --display:"Gilroy","Poppins","Segoe UI",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --editorial:"Lora",Georgia,"Times New Roman",serif;

  --fs-display-xl:clamp(2.5rem,1.5rem + 4vw,4.25rem);
  --fs-display-l:clamp(2rem,1.4rem + 2.6vw,3rem);
  --fs-h2:clamp(1.625rem,1.3rem + 1.4vw,2.125rem);
  --fs-h3:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --fs-h4:1.125rem;
  --fs-body-l:1.125rem;
  --fs-body:1rem;
  --fs-body-s:.9375rem;
  --fs-caption:.875rem;      /* smallest type on the site */
  --fs-overline:.75rem;
  --fs-price:clamp(1.25rem,1.1rem + .6vw,1.5rem);

  /* Chrome heights */
  --h-announce:36px;
  --h-header:60px;
}
@media (min-width:750px){
  :root{ --page-pad:40px; --gutter:20px; }
}
@media (min-width:990px){
  :root{ --page-pad:64px; --gutter:24px; --h-announce:40px; --h-header:72px; }
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--surface-canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:700;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--fs-display-l);line-height:1.06;letter-spacing:-.025em}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em}
h4{font-size:var(--fs-h4);line-height:1.35;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--arb-sand);text-underline-offset:3px}
ul,ol{margin:0;padding:0}
li{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* Focus — never removed. Navy ring (13.27:1) + oak halo. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  box-shadow:var(--sh-focus);
  border-radius:var(--r-sm);
}

.skip-link{
  position:absolute;left:var(--sp-4);top:-100px;z-index:200;
  background:var(--arb-navy);color:var(--arb-cream);
  padding:var(--sp-3) var(--sp-5);border-radius:0 0 var(--r-sm) var(--r-sm);
  font-family:var(--display);font-weight:700;text-decoration:none;
  transition:top var(--dur-base) var(--ease);
}
.skip-link:focus{top:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--page-pad)}
.wrap--wide{max-width:var(--container-wide)}
.wrap--text{max-width:var(--container-text)}

.section{padding-block:var(--sp-8)}
.section--tight{padding-block:var(--sp-6)}
.section--inverse{background:var(--surface-inverse);color:var(--text-on-dark);padding-block:56px}
.section--sunken{background:var(--surface-sunken)}
@media (min-width:750px){
  .section{padding-block:var(--sp-9)}
  .section--inverse{padding-block:72px}
}
@media (min-width:990px){
  .section{padding-block:var(--sp-11)}
  .section--inverse{padding-block:104px}
}

.section__head{margin-bottom:var(--sp-5)}
@media (min-width:750px){.section__head{margin-bottom:var(--sp-6)}}
.section__head p{color:var(--text-secondary);max-width:64ch;margin-top:var(--sp-3)}
.section--inverse .section__head p{color:var(--text-on-dark);opacity:.9}

.overline{
  font-family:var(--body);font-size:var(--fs-overline);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--arb-walnut);
  display:block;margin-bottom:var(--sp-3);
}
.section--inverse .overline{color:var(--arb-sand)}

.lede{font-size:var(--fs-body-l);color:var(--text-secondary);max-width:62ch;line-height:1.6}
.section--inverse .lede{color:var(--text-on-dark);opacity:.92}
.prose p{max-width:66ch}
.prose p + p{margin-top:var(--sp-4)}
.prose h2{margin-top:var(--sp-8)}
.prose h3{margin-top:var(--sp-6);margin-bottom:var(--sp-3)}
.prose h2 + p,.prose h3 + p{margin-top:var(--sp-3)}

.grid{display:grid;gap:var(--gutter)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}
@media (min-width:750px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-h:48px;
  font-family:var(--display);font-weight:700;font-size:var(--fs-body);
  letter-spacing:.01em;line-height:1;
  min-height:var(--btn-h);padding-inline:var(--sp-5);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  border:1px solid transparent;border-radius:var(--r-sm);
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

.btn--primary{background:var(--arb-navy);color:var(--arb-cream)}
.btn--primary:hover{background:#22394F}

.btn--secondary{background:transparent;color:var(--arb-navy);border-color:var(--arb-navy)}
.btn--secondary:hover{background:rgba(22,41,61,.06)}

/* Oak fill NEVER carries white text: white/oak is 2.98:1 (fail).
   Navy on oak is 4.97:1 (AA). */
.btn--accent{background:var(--arb-oak);color:var(--arb-navy)}
.btn--accent:hover{background:#CE9A5E}

.btn--ghost{
  background:transparent;color:var(--arb-navy);padding-inline:var(--sp-2);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;text-decoration-color:var(--arb-sand);
}
.btn--ghost:hover{text-decoration-color:var(--arb-oak)}

.btn--sm{--btn-h:40px;font-size:var(--fs-caption);padding-inline:var(--sp-4)}
.btn--lg{--btn-h:56px;padding-inline:var(--sp-6)}
.btn--full{width:100%}

/* On navy: primary inverts to oak, secondary to cream outline */
.section--inverse .btn--primary,.on-navy .btn--primary{background:var(--arb-oak);color:var(--arb-navy)}
.section--inverse .btn--secondary,.on-navy .btn--secondary{color:var(--arb-cream);border-color:var(--arb-cream)}
.section--inverse .btn--secondary:hover,.on-navy .btn--secondary:hover{background:rgba(246,242,235,.1)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.announce{
  background:var(--surface-inverse);color:var(--text-on-dark);
  min-height:var(--h-announce);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-caption);text-align:center;padding:var(--sp-2) var(--sp-4);
}
.announce__item{display:none}
.announce__item.is-on{display:block}

.header{
  position:sticky;top:0;z-index:60;
  background:var(--surface-raised);
  border-bottom:1px solid var(--border-hairline);
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),
             height var(--dur-base) var(--ease);
}
.header.is-hidden{transform:translateY(-100%)}
.header.is-scrolled{box-shadow:var(--sh-sm)}
.header__inner{
  height:var(--h-header);display:flex;align-items:center;gap:var(--sp-4);
  max-width:var(--container-max);margin-inline:auto;padding-inline:var(--page-pad);
}
@media (min-width:990px){.header.is-scrolled .header__inner{height:64px}}

.wordmark{display:block;flex:none;line-height:0}
.wordmark img{width:124px;height:auto}
@media (min-width:990px){.wordmark img{width:156px}}

.footer__mark{display:block;margin-bottom:var(--sp-6);line-height:0}
.footer__mark img{width:132px;height:auto}
@media (min-width:750px){.footer__mark img{width:168px}}

.nav{display:none}
@media (min-width:990px){
  .nav{display:flex;align-items:center;gap:var(--sp-6);margin-inline:auto}
  .nav__link{
    font-size:var(--fs-body-s);font-weight:500;text-decoration:none;
    padding-block:var(--sp-2);border-bottom:1px solid transparent;
    transition:border-color var(--dur-fast) var(--ease);background:none;border-inline:0;border-top:0;cursor:pointer;
  }
  .nav__link:hover{border-bottom-color:var(--arb-oak)}
  .nav__link[aria-current="page"]{border-bottom:2px solid var(--arb-navy)}
}

.header__util{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
@media (min-width:990px){.header__util{margin-left:0}}
.iconbtn{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;border-radius:var(--r-sm);position:relative;
}
.iconbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cart-count{
  position:absolute;top:5px;right:3px;min-width:18px;height:18px;padding:0 5px;
  background:var(--arb-navy);color:var(--arb-cream);border-radius:var(--r-pill);
  font-size:11px;font-weight:600;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.cart-count[hidden]{display:none}
@media (min-width:990px){.iconbtn--menu{display:none}}

/* Mega menu */
.mega{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--surface-raised);border-top:1px solid var(--border-hairline);
  box-shadow:var(--sh-lg);padding-block:var(--sp-6);
}
.mega.is-open{display:block}
.mega__grid{
  max-width:var(--container-max);margin-inline:auto;padding-inline:var(--page-pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);
}
.mega__col b{
  display:block;font-family:var(--body);font-size:var(--fs-overline);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--arb-walnut);margin-bottom:var(--sp-3);
}
.mega__col a{display:block;padding-block:var(--sp-2);text-decoration:none;font-size:var(--fs-body-s)}
.mega__col a:hover{text-decoration:underline;text-decoration-color:var(--arb-oak)}
.mega__feature{
  background:var(--surface-sunken);border-radius:var(--r-md);padding:var(--sp-5);
}
.mega__feature h4{margin-bottom:var(--sp-2)}
.mega__feature p{font-size:var(--fs-caption);color:var(--text-secondary);margin-bottom:var(--sp-3)}

/* Mobile drawer nav */
.mobilenav{
  position:fixed;inset:0;z-index:90;display:none;
}
.mobilenav.is-open{display:block}
.mobilenav__scrim{position:absolute;inset:0;background:rgba(22,41,61,.45)}
.mobilenav__panel{
  position:absolute;inset-block:0;left:0;width:min(88vw,380px);
  background:var(--surface-raised);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform var(--dur-drawer) var(--ease);
  overflow-y:auto;
}
.mobilenav.is-open .mobilenav__panel{transform:translateX(0)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border-hairline);
  position:sticky;top:0;background:var(--surface-raised);z-index:1;
}
.drawer__head h2{font-size:1.0625rem}
.mobilenav__list{padding:var(--sp-4) var(--sp-5) var(--sp-8)}
.mobilenav__list a{
  display:block;padding:var(--sp-3) 0;text-decoration:none;font-size:1.0625rem;
  font-family:var(--display);font-weight:700;border-bottom:1px solid var(--border-hairline);
}
.mobilenav__list a.sub{font-family:var(--body);font-weight:400;font-size:var(--fs-body);padding-left:var(--sp-4)}
.mobilenav__list .group-label{
  font-size:var(--fs-overline);letter-spacing:.12em;text-transform:uppercase;
  color:var(--arb-walnut);font-weight:600;margin-top:var(--sp-5);margin-bottom:var(--sp-2);
}

/* --------------------------------------------------------------------------
   6. CART DRAWER
   -------------------------------------------------------------------------- */
.cart{position:fixed;inset:0;z-index:95;display:none}
.cart.is-open{display:block}
.cart__scrim{position:absolute;inset:0;background:rgba(22,41,61,.45)}
.cart__panel{
  position:absolute;inset-block:0;right:0;width:min(100vw,400px);
  background:var(--surface-raised);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--dur-drawer) var(--ease);
}
.cart.is-open .cart__panel{transform:translateX(0)}
.cart__body{flex:1;overflow-y:auto;padding:var(--sp-5)}
.cart__foot{border-top:1px solid var(--border-hairline);padding:var(--sp-5);background:var(--surface-raised)}

.shipbar{margin-bottom:var(--sp-5)}
.shipbar__text{font-size:var(--fs-caption);color:var(--text-secondary);margin-bottom:var(--sp-2)}
.shipbar__track{height:6px;background:var(--surface-sunken);border-radius:var(--r-pill);overflow:hidden}
.shipbar__fill{height:100%;background:var(--arb-green);border-radius:var(--r-pill);
  transition:width var(--dur-slow) var(--ease)}

.lineitem{display:grid;grid-template-columns:72px 1fr;gap:var(--sp-3);
  padding-block:var(--sp-4);border-bottom:1px solid var(--border-hairline)}
.lineitem:first-child{padding-top:0}
.lineitem__img{aspect-ratio:1;background:var(--surface-sunken);border-radius:var(--r-sm);overflow:hidden}
.lineitem__title{font-family:var(--display);font-weight:700;font-size:var(--fs-body-s);line-height:1.3}
.lineitem__variant{font-size:var(--fs-caption);color:var(--text-muted);margin-top:2px}
.lineitem__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-3)}
.lineitem__price{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border-control);border-radius:var(--r-sm)}
.qty button{width:34px;height:34px;background:none;border:0;cursor:pointer;font-size:1rem;line-height:1}
.qty span{min-width:28px;text-align:center;font-size:var(--fs-body-s);font-variant-numeric:tabular-nums}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;font-size:var(--fs-caption);
  color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--danger)}

.cart__empty{text-align:center;padding-block:var(--sp-9)}
.cart__empty h3{margin-bottom:var(--sp-2)}
.cart__empty p{color:var(--text-secondary);margin-bottom:var(--sp-5);font-size:var(--fs-body-s)}
.cart__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-2)}
.cart__total b{font-family:var(--display);font-size:1.25rem;font-variant-numeric:tabular-nums}
.cart__note{font-size:var(--fs-caption);color:var(--text-muted);margin-bottom:var(--sp-4)}

/* --------------------------------------------------------------------------
   6b. PLACEHOLDER ART
   No photography exists yet. Every image slot is a labelled ratio box naming
   the shot from the 84-image shot list. Replace each .ph with a real <img>
   plus srcset when the photos land — the label is the brief.
   -------------------------------------------------------------------------- */
.ph{position:relative;display:block;width:100%;height:100%}
/* real photographs fill their slot the same way the placeholder does */
.pcard__media img,.tile__media img,.ecard__media img,
.gallery__main img,.gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__media img{object-fit:cover}
.ph svg{width:100%;height:100%;object-fit:cover;display:block}
.ph__tag{
  position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);z-index:2;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.35;
  background:rgba(22,41,61,.78);color:#F6F2EB;padding:3px 7px;border-radius:3px;
  letter-spacing:.01em;
}
.gallery__thumb .ph__tag{display:none}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{position:relative;background:var(--surface-sunken)}
.hero__media{aspect-ratio:4/5;position:relative;overflow:hidden}
.hero__media picture,.hero__media img,.hero__media svg{width:100%;height:100%;object-fit:cover;display:block}
.hero__body{padding:var(--sp-6) var(--page-pad) var(--sp-8);max-width:var(--container-max);margin-inline:auto}
.hero h1{font-size:var(--fs-display-xl);line-height:1.02;letter-spacing:-.03em}
.hero__sub{font-family:var(--editorial);font-style:italic;font-size:var(--fs-body-l);
  color:var(--arb-walnut);margin-top:var(--sp-4)}
.hero .btn-row{margin-top:var(--sp-6)}

@media (min-width:750px){
  .hero{display:grid}
  .hero__media{aspect-ratio:16/9;grid-area:1/1}
  .hero__body{
    grid-area:1/1;align-self:end;width:100%;
    padding-block:var(--sp-9);color:#FFFFFF;position:relative;
  }
  /* Scrim: white hero type has to clear 4.5:1 over any photograph, including
     a bright one. Measured against the lightest tint in the placeholder set. */
  .hero::after{
    content:"";grid-area:1/1;pointer-events:none;position:relative;
    background:linear-gradient(to top,rgba(22,41,61,.86) 0%,rgba(22,41,61,.62) 45%,rgba(22,41,61,.38) 100%);
  }
  .hero__body{z-index:1}
  .hero__sub{color:var(--arb-sand)}
  .hero .btn--secondary{color:#fff;border-color:#fff}
  .hero .btn--secondary:hover{background:rgba(255,255,255,.12)}
}
@media (min-width:990px){
  .hero__body{padding-block:120px;max-width:min(var(--container-max),100%)}
  .hero__inner{max-width:56ch}
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface-raised);border:1px solid var(--border-hairline);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);overflow:hidden;
  transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
@media (min-width:990px){
  .card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
}

/* Product card */
.pcard{display:flex;flex-direction:column}
.pcard__media{position:relative;aspect-ratio:1;background:var(--surface-sunken)}
.pcard__media img,.pcard__media svg{width:100%;height:100%;object-fit:cover}
.pcard__alt{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-slow) var(--ease)}
@media (min-width:990px){.pcard:hover .pcard__alt{opacity:1}}
.pcard__badge{
  position:absolute;top:var(--sp-3);left:var(--sp-3);
  background:var(--arb-green);color:#fff;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-pill);box-shadow:var(--sh-xs);letter-spacing:.02em;
}
.pcard__body{padding:var(--sp-3) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;flex:1;gap:var(--sp-1)}
.pcard__title{font-size:var(--fs-body-s);line-height:1.3}
@media (min-width:750px){.pcard__title{font-size:var(--fs-h4)}}
.pcard__title a{text-decoration:none}
.pcard__title a::after{content:"";position:absolute;inset:0}
.pcard{position:relative}
.stars{font-size:var(--fs-caption);color:var(--arb-oak);letter-spacing:.04em}
.stars span{color:var(--text-muted)}
.pcard__price{font-family:var(--display);font-weight:700;font-size:1.125rem;
  font-variant-numeric:tabular-nums;margin-top:auto;padding-top:var(--sp-2)}
.pcard__was{font-family:var(--body);font-weight:400;font-size:var(--fs-caption);
  color:var(--text-muted);text-decoration:line-through;margin-left:var(--sp-2)}
.pcard__add{position:relative;z-index:1;margin-top:var(--sp-3)}

/* Editorial card */
.ecard{display:flex;flex-direction:column;position:relative}
.ecard__media{aspect-ratio:3/2;background:var(--surface-sunken)}
.ecard__media img,.ecard__media svg{width:100%;height:100%;object-fit:cover}
.ecard__body{padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.ecard h3{font-size:var(--fs-h4);margin-block:var(--sp-2)}
.ecard h3 a{text-decoration:none}
.ecard h3 a::after{content:"";position:absolute;inset:0}
.ecard p{font-size:var(--fs-caption);color:var(--text-secondary)}
.ecard__more{font-size:var(--fs-caption);font-weight:600;margin-top:var(--sp-3);display:block}

/* Category tile */
.tile{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--surface-sunken);display:block;text-decoration:none}
.tile__media{aspect-ratio:4/5}
@media (min-width:750px){.tile__media{aspect-ratio:3/2}}
.tile__media img,.tile__media svg{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
@media (min-width:990px){.tile:hover .tile__media img,.tile:hover .tile__media svg{transform:scale(1.03)}}
.tile__body{position:absolute;inset-inline:0;bottom:0;padding:var(--sp-5) var(--sp-5) var(--sp-5);color:#fff;
  /* the overline sits high in this block, so the scrim has to still be strong at its baseline */
  background:linear-gradient(to top,rgba(22,41,61,.94) 0%,rgba(22,41,61,.86) 55%,rgba(22,41,61,.55) 85%,rgba(22,41,61,0) 100%);
  padding-top:var(--sp-8)}
.tile__body .overline{color:var(--arb-sand)}
.tile__body h3{color:#fff;max-width:22ch}
.tile__price{font-size:var(--fs-caption);margin-top:var(--sp-2);opacity:.92}

/* Bundle card */
.bundlecard{background:var(--surface-sunken);border:2px dashed var(--arb-sand);
  border-radius:var(--r-md);padding:var(--sp-5)}
.bundlecard h3{margin-block:var(--sp-2) var(--sp-3)}
.bundlecard p{font-size:var(--fs-body-s);color:var(--text-secondary)}
.pricerow{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}
.pricerow .was{color:var(--text-muted);text-decoration:line-through;font-size:var(--fs-body-s)}
.pricerow .now{font-family:var(--display);font-weight:700;font-size:1.375rem;font-variant-numeric:tabular-nums}
.badge-save{background:var(--arb-green);color:#fff;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill)}

/* Trust row — deliberately no border, no shadow */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
@media (min-width:750px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust__item .ic{
  width:56px;height:56px;border-radius:var(--r-pill);background:var(--surface-sunken);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3);
}
.section--inverse .trust__item .ic{background:var(--surface-inverse-2)}
.trust__item svg{width:26px;height:26px;stroke:var(--arb-oak);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.trust__item h4{font-size:var(--fs-body-s)}
.trust__item p{font-size:var(--fs-caption);color:var(--text-secondary);margin-top:var(--sp-1)}
.section--inverse .trust__item p{color:var(--text-muted-dark)}

/* Pillar row */
.pillars{display:grid;gap:var(--sp-6)}
@media (min-width:750px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar h3{font-size:var(--fs-h4);letter-spacing:.1em;text-transform:uppercase;
  font-size:var(--fs-overline);color:var(--arb-walnut);margin-bottom:var(--sp-2)}
.pillar p{font-size:var(--fs-body-l);line-height:1.45;font-family:var(--display);font-weight:700;
  letter-spacing:-.015em}

/* Split CTA band */
.split{display:grid;gap:var(--sp-6)}
@media (min-width:750px){.split{grid-template-columns:repeat(2,1fr);gap:var(--sp-8)}}

/* --------------------------------------------------------------------------
   9. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.pdp{display:grid;gap:var(--sp-6);padding-block:var(--sp-6)}
@media (min-width:990px){
  .pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-9);
       padding-block:var(--sp-8);align-items:start}
  .pdp__buy{position:sticky;top:calc(var(--h-header) + var(--sp-5))}
}

.gallery__main{aspect-ratio:1;background:var(--surface-sunken);border-radius:var(--r-md);overflow:hidden}
.gallery__main img,.gallery__main svg{width:100%;height:100%;object-fit:cover}
.gallery__thumbs{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);overflow-x:auto;padding-bottom:var(--sp-1)}
.gallery__thumb{
  flex:0 0 64px;aspect-ratio:1;background:var(--surface-sunken);border-radius:var(--r-sm);
  border:2px solid transparent;cursor:pointer;overflow:hidden;padding:0;
}
.gallery__thumb[aria-current="true"]{border-color:var(--arb-navy)}
.gallery__thumb img,.gallery__thumb svg{width:100%;height:100%;object-fit:cover}
@media (min-width:990px){
  .gallery__thumbs{flex-wrap:wrap;overflow:visible}
  .gallery__thumb{flex:0 0 72px}
}

.pdp h1{font-size:var(--fs-display-l)}
.pdp__meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3)}
.price{font-family:var(--display);font-weight:700;font-size:var(--fs-price);font-variant-numeric:tabular-nums}
.price__was{font-family:var(--body);font-weight:400;font-size:var(--fs-body-s);
  color:var(--text-muted);text-decoration:line-through}

.variants{margin-top:var(--sp-5)}
.variants__label{font-size:var(--fs-caption);font-weight:600;display:block;margin-bottom:var(--sp-2)}
.swatches{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.swatch{
  min-height:44px;padding:var(--sp-2) var(--sp-4);background:var(--surface-raised);
  border:1px solid var(--border-control);border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--fs-body-s);transition:border-color var(--dur-fast) var(--ease);
}
.swatch[aria-pressed="true"]{border:2px solid var(--arb-navy);font-weight:600}

.valueprops{margin-top:var(--sp-5);display:grid;gap:var(--sp-2)}
.valueprops li{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-2);
  font-size:var(--fs-body-s);color:var(--text-secondary);align-items:start}
.valueprops svg{width:16px;height:16px;stroke:var(--arb-green);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:5px}

.spec-table{margin-top:var(--sp-4);font-size:var(--fs-body-s)}
.spec-table th,.spec-table td{text-align:left;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--border-hairline);vertical-align:top}
.spec-table th{font-family:var(--display);font-weight:600;width:44%;padding-right:var(--sp-4)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.todo{background:#F3EADA;color:var(--arb-walnut);font-size:12px;padding:2px 7px;
  border-radius:var(--r-sm);font-weight:600;white-space:nowrap}

/* Sticky mobile add-to-cart */
.stickyatc{
  position:fixed;inset-inline:0;bottom:0;z-index:70;
  background:var(--surface-raised);box-shadow:0 -2px 12px rgba(22,41,61,.10);
  padding:var(--sp-3) var(--page-pad);padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:var(--sp-4);
  transform:translateY(110%);transition:transform 200ms var(--ease);
}
.stickyatc.is-on{transform:translateY(0)}
.stickyatc__info{min-width:0;flex:1}
.stickyatc__name{font-family:var(--display);font-weight:700;font-size:var(--fs-caption);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickyatc__price{font-size:var(--fs-caption);color:var(--text-secondary);font-variant-numeric:tabular-nums}
@media (min-width:990px){.stickyatc{display:none}}

/* --------------------------------------------------------------------------
   10. ACCORDION (native details)
   -------------------------------------------------------------------------- */
.acc{border-top:1px solid var(--border-hairline)}
.acc__item{border-bottom:1px solid var(--border-hairline)}
.acc__item summary{
  list-style:none;cursor:pointer;padding:var(--sp-4) 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  font-family:var(--display);font-weight:700;font-size:var(--fs-body);min-height:48px;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary::after{
  content:"";flex:0 0 14px;width:14px;height:14px;margin-top:5px;
  background:currentColor;transition:transform var(--dur-base) var(--ease);
  clip-path:polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%);
}
.acc__item[open] summary::after{transform:rotate(135deg)}
.acc__body{padding-bottom:var(--sp-4);color:var(--text-secondary);font-size:var(--fs-body-s);max-width:70ch}
.acc__body p + p{margin-top:var(--sp-3)}

/* --------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */
.formcard{background:var(--surface-raised);border-radius:var(--r-md);box-shadow:var(--sh-md);
  padding:var(--sp-5)}
@media (min-width:750px){.formcard{padding:var(--sp-6)}}

.form{display:grid;gap:var(--sp-4)}
@media (min-width:990px){
  .form--2col{grid-template-columns:repeat(2,1fr)}
  .form--2col .field--wide{grid-column:1/-1}
}
.field{display:grid;gap:var(--sp-2)}
.field label{font-size:var(--fs-caption);font-weight:600}
.field .req{color:var(--danger)}
.field input,.field select,.field textarea{
  min-height:48px;padding:var(--sp-3);background:var(--surface-raised);
  border:1px solid var(--border-control);border-radius:var(--r-sm);width:100%;
  transition:border-color var(--dur-fast) var(--ease);
}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--arb-navy)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border:2px solid var(--danger)}
.field__error{font-size:var(--fs-caption);color:var(--danger);display:none;
  align-items:center;gap:var(--sp-2)}
.field.has-error .field__error{display:flex}
.field__hint{font-size:var(--fs-caption);color:var(--text-muted)}

.checkgroup{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.checkgroup label{
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;
  padding:var(--sp-2) var(--sp-4);border:1px solid var(--border-control);
  border-radius:var(--r-pill);cursor:pointer;font-weight:400;font-size:var(--fs-body-s);
}
.checkgroup input{width:16px;height:16px;min-height:0;accent-color:var(--arb-navy)}
.checkgroup label:has(input:checked){border:2px solid var(--arb-navy);font-weight:600}

.checkline{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-body-s)}
.checkline input{width:18px;height:18px;min-height:0;margin-top:3px;accent-color:var(--arb-navy)}

.finewrap{font-size:var(--fs-caption);color:var(--text-muted)}

/* Email capture band */
.emailband{background:var(--surface-inverse);color:var(--text-on-dark);border-radius:var(--r-md);
  padding:var(--sp-6) var(--sp-5)}
@media (min-width:750px){.emailband{padding:var(--sp-8)}}
.emailband h2{max-width:18ch}
.emailband p{color:var(--text-on-dark);opacity:.92;max-width:56ch;margin-top:var(--sp-3)}
.emailband .field label{color:var(--text-on-dark)}
.emailband .field input{background:var(--surface-inverse-2);border-color:#3E5872;color:#fff}
.emailband .field input::placeholder{color:#8398AD}
.emailband .finewrap{color:var(--text-muted-dark)}
.emailform{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);max-width:520px}
@media (min-width:750px){.emailform{grid-template-columns:1fr auto;align-items:end}
  .emailform .checkline,.emailform .finewrap{grid-column:1/-1}}

/* Form success panel */
.formdone{display:none;background:var(--surface-sunken);border-radius:var(--r-md);padding:var(--sp-6);
  border:1px solid var(--border-hairline)}
.formdone.is-on{display:block}
.formdone h3{margin-bottom:var(--sp-3)}
.formdone p{color:var(--text-secondary);font-size:var(--fs-body-s);max-width:60ch}

/* --------------------------------------------------------------------------
   12. COLLECTION TOOLBAR
   -------------------------------------------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  padding-block:var(--sp-4);border-block:1px solid var(--border-hairline);margin-bottom:var(--sp-6)}
.toolbar__count{font-size:var(--fs-caption);color:var(--text-muted);margin-right:auto}
.toolbar select{min-height:44px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-control);
  border-radius:var(--r-sm);background:var(--surface-raised);font-size:var(--fs-body-s)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{
  min-height:40px;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);
  border:1px solid var(--border-control);background:var(--surface-raised);
  cursor:pointer;font-size:var(--fs-caption);
}
.chip[aria-pressed="true"]{background:var(--arb-navy);color:var(--arb-cream);border-color:var(--arb-navy)}

.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
@media (min-width:750px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:990px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pgrid__note{
  grid-column:1/-1;background:var(--surface-sunken);border-radius:var(--r-md);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;
}
@media (min-width:750px){
  .pgrid__note{flex-direction:row;align-items:center;justify-content:space-between}
}
.emptystate{grid-column:1/-1;text-align:center;padding-block:var(--sp-9);color:var(--text-secondary)}

/* --------------------------------------------------------------------------
   13. STEPS / RULES / TABLES
   -------------------------------------------------------------------------- */
.steps{display:grid;gap:var(--sp-5);counter-reset:step}
@media (min-width:750px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:step}
.step::before{
  content:counter(step);display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-pill);
  background:var(--arb-navy);color:var(--arb-cream);
  font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:var(--sp-3);
}
.step h3{font-size:var(--fs-h4);margin-bottom:var(--sp-2)}
.step p{font-size:var(--fs-body-s);color:var(--text-secondary)}

.datatable{font-size:var(--fs-body-s)}
.tablewrap{overflow-x:auto;border:1px solid var(--border-hairline);border-radius:var(--r-md);
  background:var(--surface-raised)}
.datatable th,.datatable td{text-align:left;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border-hairline);vertical-align:top}
.datatable thead th{background:var(--surface-sunken);font-family:var(--display);font-weight:600;
  font-size:var(--fs-caption);white-space:nowrap}
.datatable tbody tr:last-child td{border-bottom:0}
.datatable .num{font-variant-numeric:tabular-nums;white-space:nowrap}

.rulebox{background:var(--surface-raised);border:1px solid var(--border-hairline);
  border-radius:var(--r-md);padding:var(--sp-5)}
.rulebox h3{margin-bottom:var(--sp-3)}
.rulebox dl{display:grid;gap:var(--sp-2);font-size:var(--fs-body-s)}
.rulebox dt{font-weight:600}
.rulebox dd{margin:0;color:var(--text-secondary)}
.scoreline{display:flex;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-2);border-bottom:1px dotted var(--border-default);font-size:var(--fs-body-s)}
.scoreline b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Gift finder */
.quiz{background:var(--surface-raised);border:1px solid var(--border-hairline);
  border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--sh-sm)}
@media (min-width:750px){.quiz{padding:var(--sp-6)}}
.quiz__step{display:none}
.quiz__step.is-on{display:block}
.quiz__q{font-family:var(--display);font-weight:700;font-size:var(--fs-h3);margin-bottom:var(--sp-4)}
.quiz__opts{display:grid;gap:var(--sp-2)}
@media (min-width:750px){.quiz__opts{grid-template-columns:repeat(2,1fr)}}
.quiz__opt{
  text-align:left;min-height:56px;padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border-control);border-radius:var(--r-sm);
  background:var(--surface-raised);cursor:pointer;font-size:var(--fs-body-s);
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.quiz__opt:hover{border-color:var(--arb-navy);background:var(--surface-sunken)}
.quiz__progress{font-size:var(--fs-caption);color:var(--text-muted);margin-bottom:var(--sp-3)}

/* Deadline banner */
.deadline{background:var(--arb-oak);color:var(--arb-navy);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);font-weight:600;font-size:var(--fs-body-s);
  display:inline-flex;align-items:center;gap:var(--sp-2)}

/* Note / editorial callout */
.note{background:var(--surface-sunken);border-radius:var(--r-md);padding:var(--sp-5);
  font-size:var(--fs-body-s);color:var(--text-secondary)}
.note strong{color:var(--text-primary)}
.pullquote{font-family:var(--editorial);font-style:italic;font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);
  line-height:1.45;color:var(--arb-walnut);max-width:26ch;margin-block:var(--sp-6)}

.breadcrumb{font-size:var(--fs-caption);color:var(--text-muted);padding-block:var(--sp-4)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin-inline:var(--sp-2)}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer{background:var(--surface-inverse);color:var(--text-on-dark);padding-block:var(--sp-8)}
.footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
@media (min-width:750px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
.footer__col b{display:block;font-size:var(--fs-overline);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--arb-sand);margin-bottom:var(--sp-3)}
.footer__col a{display:block;padding-block:var(--sp-1);text-decoration:none;
  font-size:var(--fs-body-s);opacity:.88}
.footer__col a:hover{opacity:1;text-decoration:underline}
.footer__bottom{
  margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid rgba(246,242,235,.15);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  font-size:var(--fs-caption);color:var(--text-muted-dark);align-items:center;
}
.footer__bottom a{color:var(--text-muted-dark);text-decoration:none}
.footer__bottom a:hover{color:var(--text-on-dark);text-decoration:underline}
.footer__legal{width:100%;order:9}

/* --------------------------------------------------------------------------
   15. TOAST
   -------------------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:120;
  transform:translateX(-50%) translateY(12px);
  background:var(--arb-navy);color:var(--arb-cream);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
  box-shadow:var(--sh-lg);font-size:var(--fs-body-s);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
  max-width:calc(100vw - 32px);text-align:center;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* --------------------------------------------------------------------------
   16. SCROLL REVEAL — starts visible, animates only when JS says so
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity 320ms var(--ease),transform 320ms var(--ease)}

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

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
.stack > * + *{margin-top:var(--sp-4)}
.stack-lg > * + *{margin-top:var(--sp-6)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mt-8{margin-top:var(--sp-8)}
.muted{color:var(--text-muted)}
.center{text-align:center}
.nowrap{white-space:nowrap}
[hidden]{display:none!important}