/* ============================================================================
   NVY — multi-page shell (v16)
   ----------------------------------------------------------------------------
   Loaded AFTER css/site.css. That file keeps the verified v15 token system
   (light/dark x four accent variants) and the one-pager components; this file
   adds only what a multi-page, shopable site needs on top: site nav, page
   heroes, product cards, the product gallery, the bag, and the footer/legal
   additions. No colour is written outside a token block — every value here
   comes from a custom property defined in :root / [data-theme] / [data-accent]
   in site.css, or from the small set of shell tokens declared below.
   ========================================================================== */

/* --- shell tokens --------------------------------------------------------- */
:root{
  /* finish chip (a real control: name + colour, never colour alone) */
  --chip-bg:transparent;
  --chip-ink:var(--ink-2);
  --chip-line:var(--line-strong);
  --chip-on-bg:#14171b;
  --chip-on-ink:#ffffff;

  /* badge / availability pill */
  --badge-bg:var(--panel-2);
  --badge-ink:var(--ink-2);

  /* bag summary row */
  --sum-bg:var(--panel);
}
[data-theme="dark"]{
  --chip-bg:transparent;
  --chip-ink:#c6ccd4;
  --chip-line:#3a414a;
  --chip-on-bg:#f1f3f6;
  --chip-on-ink:#0e1013;

  --badge-bg:#1f2429;
  --badge-ink:#c6ccd4;

  --sum-bg:#171a1f;
}

/* reveal-by-script needs an explicit rule: .btn and .fig__frame set display,
   which beats the user-agent [hidden] rule (same specificity, later wins) */
[hidden]{display:none}

/* --- site nav (replaces the one-pager header layout) ---------------------- */
.nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav__link{
  font-family:var(--font-display);font-stretch:74%;font-weight:500;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  padding:6px 0;
}
.nav__link:hover{color:var(--accent-txt);text-decoration:none}
.nav__link[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.top__right{display:flex;align-items:center;gap:12px;margin-left:auto}
.top__right .nav{margin-left:0}
.bagbtn{
  display:inline-flex;align-items:center;gap:9px;background:var(--accent-2);color:var(--accent-2-ink);
  border:var(--hair) solid transparent;border-radius:var(--r);padding:11px 15px;cursor:pointer;
  font-family:var(--font-display);font-stretch:74%;font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.bagbtn:hover{text-decoration:none;transform:translateY(-1px)}
.bagbtn__n{
  font-variant-numeric:tabular-nums;background:var(--bg);color:var(--ink);
  border-radius:999px;padding:1px 7px;font-size:.68rem;
}
.bagbtn__n[data-empty="true"]{opacity:.55}
/* the mobile menu is a <details>, so it works with no JavaScript at all */
.menu{display:none;position:relative}
.menu summary{
  list-style:none;cursor:pointer;border:var(--hair) solid var(--line-strong);border-radius:var(--r);
  padding:10px 13px;font-family:var(--font-display);font-stretch:74%;font-weight:600;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.menu summary::-webkit-details-marker{display:none}
.menu__panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:50;background:var(--bg);
  border:var(--hair) solid var(--line-strong);border-radius:var(--r);padding:8px;min-width:216px;
  box-shadow:0 14px 34px rgba(20,23,27,.16);
}
[data-theme="dark"] .menu__panel{box-shadow:0 14px 34px rgba(0,0,0,.6)}
.menu__panel a{
  display:block;padding:11px 12px;border-radius:var(--r);color:var(--ink);
  font-family:var(--font-display);font-stretch:74%;font-weight:500;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.menu__panel a:hover{background:var(--panel);text-decoration:none}
@media (max-width:1080px){.top__right .nav{display:none}.menu{display:block}}
@media (max-width:640px){.bagbtn__label{display:none}}

/* --- interior page hero --------------------------------------------------- */
.page-hero{padding:clamp(26px,3.4vw,52px) 0 clamp(30px,3.6vw,52px)}
.page-hero h1{max-width:24ch}
/* Shop landing only: the title was sitting a section away from the clubs, so
   the photographs were below the fold. Tucked up and scaled down — Katie,
   2026-09-24: "wayyy closer together … you don't even need to scroll". */
.page-hero--shop{padding:clamp(10px,1.3vw,20px) 0 clamp(2px,.4vw,8px)}
.page-hero--shop .crumb{margin:0 0 8px}
.page-hero--shop h1{font-size:clamp(1.75rem,3.45vw,2.8125rem);margin:0;max-width:24ch}  /* 45px on a laptop — Katie, 2026-09-24 */
.band--shop{padding-top:clamp(8px,1.1vw,14px)}
.band--shop .shop-grid{margin-top:clamp(8px,1.1vw,14px)}
.crumb{
  font-family:var(--font-display);font-stretch:72%;font-weight:500;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;
}
.crumb a{color:var(--muted)}
.crumb span{margin:0 8px;opacity:.6}

/* --- product cards (shop grid) ------------------------------------------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
@media (max-width:980px){.shop-grid{grid-template-columns:1fr}}
.pcard{
  background:var(--bg);border:var(--hair) solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
}
.pcard__shot{
  background:linear-gradient(180deg,var(--studio-1),var(--studio-2));
  border-bottom:var(--hair) solid var(--line);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
[data-theme="dark"] .pcard__shot{background:radial-gradient(80% 70% at 50% 45%,var(--studio-1),var(--studio-2) 74%)}
.pcard__shot img{max-width:100%;max-height:100%;width:auto;height:auto}
[data-theme="dark"] .pcard__shot img{filter:brightness(1.24) contrast(1.02)}
/* --- picture-first card (Katie's call, 2026-09-24) -------------------------
   The picture is the shop button: no price, no button underneath, just the name
   and one line under the club. Hover — or keyboard focus — swaps the address
   view for the slot-out render. Both shots sit in one grid cell inside the fixed
   4/3 frame, so the swap cannot move the layout.
   Katie, 2026-09-24: the swap is a hard cut on purpose. These are two renders of
   the same club, so a cross-fade paints both at once and the address view shows
   through the slot-out shot. She wants one club or the other, never both. */
.pcard--style .pcard__shot{display:grid;place-items:center}
.pcard--style .pcard__shot img{grid-area:1/1;max-width:100%;max-height:100%;width:auto;height:auto}
.pcard--style .pcard__shot .shot-b{opacity:0}
.pcard--style .pcard__shot:hover .shot-a,
.pcard--style .pcard__shot:focus-visible .shot-a,
.pcard--style:focus-within .pcard__shot .shot-a{opacity:0}
.pcard--style .pcard__shot:hover .shot-b,
.pcard--style .pcard__shot:focus-visible .shot-b,
.pcard--style:focus-within .pcard__shot .shot-b{opacity:1}
.pcard.pcard--style h3{font-size:1.56rem;letter-spacing:-.02em}
.pcard.pcard--style h3 a{color:inherit}
.pcard.pcard--style p{max-width:44ch;margin:0}
/* Katie, 2026-09-24 — hero headline a size down from the page H1 scale. */
.hero h1.display{font-size:clamp(1.9rem,4vw,3.85rem)}

/* Katie, 2026-09-24 — the "what comes with it" and "where it's made" headlines
   each read as one line, and both sections sit tighter. Scoped to those two so the
   other section headlines keep their size. The measure is fixed in ch while the
   size scales with the viewport, so the line holds at laptop width and only wraps
   on a narrow phone, where wrapping is right. */
#box .band__head,#built .band__head{max-width:min(100%,96ch)}
#box .band__head h2.display,#built .band__head h2.display{
  max-width:none;font-size:clamp(1.3rem,2.1vw,1.8rem);margin-bottom:10px}

.pcard__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pcard h3{margin:0 0 4px;font-size:1.3rem}
.pcard__cat{
  font-family:var(--font-display);font-stretch:74%;font-weight:600;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-txt);margin:0 0 12px;
}
.pcard p{font-size:.94rem;color:var(--ink-2);max-width:40ch;margin:0 0 16px}
.pcard__foot{margin-top:auto;padding-top:16px;border-top:var(--hair) solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.price{
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.94rem;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.005em;
}
.price small{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;font-weight:500;margin-top:3px}
.btn--sm{padding:11px 16px;font-size:.68rem}

/* --- finish chips --------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.chips__label{
  width:100%;font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.chip{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--chip-bg);color:var(--chip-ink);border:var(--hair) solid var(--chip-line);
  border-radius:var(--r);padding:9px 12px;font-family:var(--font-body);font-size:.82rem;
}
.chip[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:var(--chip-on-bg);font-weight:600}
.chip__sw{width:11px;height:11px;border-radius:50%;border:var(--hair) solid var(--chip-line);flex:none}
.chip[aria-pressed="true"] .chip__sw{border-color:var(--chip-on-ink)}
/* the swatch colours are the real finish colours, declared as tokens */
:root{--fin-black:#14161a;--fin-blue:#00b8e6;--fin-white:#f3f4f6}
[data-theme="dark"]{--fin-black:#0b0d10;--fin-blue:#00b8e6;--fin-white:#f3f4f6}

/* --- product page --------------------------------------------------------- */
.product{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,3.6vw,58px);align-items:start;padding-top:clamp(22px,2.6vw,40px)}
@media (max-width:980px){.product{grid-template-columns:1fr}}
.gallery__main{
  background:linear-gradient(180deg,var(--studio-1),var(--studio-2));
  border:var(--hair) solid var(--line);border-radius:var(--r);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;padding:26px;
}
[data-theme="dark"] .gallery__main{background:radial-gradient(78% 68% at 50% 44%,var(--studio-1),var(--studio-2) 74%)}
.gallery__main img{max-width:100%;max-height:100%;width:auto;height:auto}
[data-theme="dark"] .gallery__main img{filter:brightness(1.24) contrast(1.02)}
.gallery__thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.thumb{
  cursor:pointer;background:linear-gradient(180deg,var(--studio-1),var(--studio-2));
  border:var(--hair) solid var(--line);border-radius:var(--r);padding:7px;
  width:86px;height:66px;display:flex;align-items:center;justify-content:center;
}
.thumb img{max-width:100%;max-height:100%;width:auto;height:auto}
[data-theme="dark"] .thumb img{filter:brightness(1.24) contrast(1.02)}
.thumb[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.gallery__cap{font-size:.8rem;color:var(--muted);margin:12px 0 0;max-width:56ch}

.buy{
  border:var(--hair) solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:clamp(22px,2.6vw,30px);
}
@media (min-width:981px){.buy{position:sticky;top:80px}}
.buy h2{margin:0 0 4px;font-family:var(--font-display);font-weight:560;font-size:1.5rem;letter-spacing:-.02em}
.buy__cat{
  font-family:var(--font-display);font-stretch:74%;font-weight:600;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-txt);margin:0 0 16px;
}
.buy__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 0;border-top:var(--hair) solid var(--line)}
.buy__row:first-of-type{border-top:0}
.buy__row dt{
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;
}
.buy__row dd{margin:0;font-size:.94rem;color:var(--ink);text-align:right}
.buy__field{margin:16px 0 0}
.buy__actions{margin:20px 0 0;display:grid;gap:10px}
.buy__actions .btn{justify-content:center;width:100%}
.buy__note{margin:14px 0 0;font-size:.82rem;color:var(--muted);max-width:44ch}
.buy[data-bag="added"] .buy__note{color:var(--accent-txt)}
.inc{list-style:none;margin:16px 0 0;padding:0;border-top:var(--hair) solid var(--line)}
.inc--stack{max-width:76ch;margin-top:14px}
.kit__sub{margin:16px 0 0}
.inc li{padding:11px 0 11px 22px;position:relative;border-bottom:var(--hair) solid var(--line);
  font-size:.9rem;color:var(--ink-2)}
.inc li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;
  background:var(--accent)}
.inc b{color:var(--ink);font-weight:600}

/* --- spec table (two-column definition list) ------------------------------ */
.dl{display:grid;grid-template-columns:1fr;margin:26px 0 0;border-top:var(--hair) solid var(--line)}
.dl__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;
  padding:14px 0;border-bottom:var(--hair) solid var(--line)}
@media (max-width:520px){.dl__row{grid-template-columns:1fr;gap:4px}}
.dl dt{
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;
}
.dl dd{margin:0;font-size:.96rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* --- the bag -------------------------------------------------------------- */
.bag{margin:32px 0 0;border-top:var(--hair) solid var(--line)}
.bag__row{display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;gap:20px;align-items:center;
  padding:20px 0;border-bottom:var(--hair) solid var(--line)}
@media (max-width:760px){.bag__row{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .bag__qty,.bag__amt{grid-column:2;justify-self:start}}
.bag__thumb{background:linear-gradient(180deg,var(--studio-1),var(--studio-2));
  border:var(--hair) solid var(--line);border-radius:var(--r);padding:8px;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center}
.bag__thumb img{max-width:100%;max-height:100%;width:auto;height:auto}
[data-theme="dark"] .bag__thumb img{filter:brightness(1.24) contrast(1.02)}
.bag__name{font-family:var(--font-display);font-weight:560;font-size:1.06rem;margin:0 0 5px}
.bag__meta{font-size:.84rem;color:var(--muted);margin:0}
.bag__qty{display:flex;align-items:center;gap:8px}
.bag__qty button{
  cursor:pointer;width:34px;height:34px;border:var(--hair) solid var(--line-strong);
  background:var(--bg);color:var(--ink);border-radius:var(--r);font-size:1rem;
  font-family:var(--font-body);line-height:1;
}
.bag__qty span{font-variant-numeric:tabular-nums;min-width:26px;text-align:center;
  font-family:var(--font-display);font-weight:600}
.bag__amt{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--ink)}
.bag__empty{margin:26px 0 0;padding:26px;background:var(--panel);border:var(--hair) solid var(--line);
  border-radius:var(--r);color:var(--ink-2)}
.sum{margin:24px 0 0;background:var(--sum-bg);border:var(--hair) solid var(--line);
  border-radius:var(--r);padding:22px}
.sum__line{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:.94rem;color:var(--ink-2)}
.sum__line--total{
  border-top:var(--hair) solid var(--line);margin-top:10px;padding-top:16px;
  font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.12rem;
  font-variant-numeric:tabular-nums;
}
.sum__actions{margin:20px 0 0;display:grid;gap:10px}
.sum__actions .btn{justify-content:center;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{transform:none}
.checkout-note{margin:14px 0 0;font-size:.84rem;color:var(--muted);max-width:52ch}

/* --- thin info strip ------------------------------------------------------ */
.strip{background:var(--foot-bg);color:var(--foot-ink);padding:13px 0}
.strip .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:center}
.strip p{
  margin:0;max-width:none;font-family:var(--font-display);font-stretch:74%;font-weight:500;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--foot-muted);
}
.strip b{color:var(--foot-ink);font-weight:600}
.strip a{color:var(--foot-ink)}

/* --- two-up detail band --------------------------------------------------- */
.band__head{max-width:70ch}
.band__head .lead{margin-bottom:0}
.note{
  background:var(--panel);border-left:3px solid var(--accent-2);border-radius:var(--r);
  padding:18px 20px;font-size:.9rem;color:var(--ink-2);max-width:64ch;
}
.note b{color:var(--ink)}

/* --- palette comparison page (draft scaffolding) -------------------------- */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0 0}
@media (max-width:860px){.cmp-grid{grid-template-columns:1fr}}
.cmp{
  border:var(--hair) solid var(--line-strong);border-radius:var(--r);overflow:hidden;
  background:var(--bg);color:var(--ink);
}
.cmp__head{
  padding:12px 16px;border-bottom:var(--hair) solid var(--line);background:var(--panel);
  font-family:var(--font-display);font-stretch:72%;font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.cmp__in{padding:20px}
.cmp__in h3{margin:0 0 6px;font-size:1.34rem;max-width:22ch}
.cmp__in p{font-size:.92rem;color:var(--ink-2);margin:0 0 14px}
.cmp__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding-top:12px;
  border-top:var(--hair) solid var(--line)}
.cmp__meta span{font-family:var(--font-display);font-stretch:74%;font-weight:500;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cmp__meta b{color:var(--ink);font-weight:600}
/* a forced mode inside a forced accent: both attributes live on .cmp */
.cmp[data-theme]{background:var(--bg);color:var(--ink)}

/* --- the small gap under the header bar (Katie, 2026-09-24) ----------------
   "Change the gap between the top bar and the Home/Shop/NVY — make it a real
   small gap." The breadcrumb that opens every page now sits this same small
   distance under the header bar, on every page, at every width. Value taken
   from the Shop page, which she already approved.
   Why it was big: `.band--tight` had no rule of its own, so the pages that use
   it (about, the bag, all three model pages, the palette lab) fell back to the
   full `.band` padding — clamp(56px,6.4vw,100px) — and the crumb floated. The
   interior pages (`page-hero`) were 26-52px. Both are 10-20px now. */
.band--tight{padding-top:clamp(10px,1.3vw,20px)}
.page-hero{padding-top:clamp(10px,1.3vw,20px)}

/* --- the Technology page (Katie, 2026-09-25) ------------------------------
   One pass, four notes: the weight-kit band "goes all the way across" instead
   of sitting inside the 70ch column, its three kit lines spread across that
   width rather than stacking in a narrow stack, the closing headline sits on
   one line ("Our clubs carry it and the fitting sets it to your perfect
   combo."), and the space between the bands comes down ("just fix the gapping
   between sections to make it less"). The closing headline is set smaller than
   the page's other h2s on purpose — that is what buys the single line. */
/* .page-technology .band padding removed 2026-09-25: `.band` in site.css
   carries this padding for every page now, so a per-page copy would be a place for the two
   to drift apart. */
.page-technology #kit .band__head{max-width:none}
.page-technology #kit h2.display{max-width:none}
.page-technology #kit .lead{max-width:88ch}
.page-technology #kit .inc--stack{max-width:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));column-gap:34px}
.page-technology #next .band__head{max-width:none}
.page-technology #next h2.display{max-width:none;font-size:clamp(1.05rem,2.15vw,1.72rem)}

/* --- the Fitting page (Katie, 2026-09-25) ---------------------------------
   Her pass, in order: "first let's fix the gapping on the page. Then let's go
   ahead and move the diagram to be right under the title section." So the page
   is hero -> the fitting diagram -> the three stages -> the fitting system, and
   the space between the blocks comes down the way it did on Technology. The
   diagram follows the hero directly, so the hero's own bottom padding is what
   sets that gap; the stages carry a hairline of their own, so they need no top
   margin. */
/* .page-fitting .band padding removed 2026-09-25: `.band` in site.css
   carries this padding for every page now, so a per-page copy would be a place for the two
   to drift apart. */
.page-fitting .page-hero{padding-bottom:40px}
/* The lead paragraph is gone (Katie, 2026-09-25: "change the title to 'Built to Perform for
   YOUR Swing'. Then make the gap between that and the diagram smaller"), so the title's own
   bottom margin is the last thing between it and the diagram: it is zeroed here and the hero's
   padding is the whole gap. **40px is the value that renders as 50px of visible gap** (Katie
   settled on 50px on 2026-09-25) because the cropped diagram frame carries ~10px of its own
   air above the "01 02 03" row at laptop width — 11 viewBox units at 1366px wide. Change this
   number, not the viewBox, if she wants the gap different. */
.page-fitting .page-hero h1{margin-bottom:0}
.page-fitting #fitting .stages{margin-top:0}