/* ============================================================
   CHECKMATELA — Design System v2
   Light chessboard theme — Pine / Brass / Burgundy jewel tones
============================================================ */

/* Heritage crest is the only identity change; the prior design is retained. */
.footer-brand .brand{ background:transparent; }
.featured-departments .section-head{max-width:800px;text-align:center;margin:0 auto 28px}
.featured-departments .section-head p{max-width:65ch;margin:16px auto 0}
.featured-tabs{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
.featured-tabs button{padding:12px 30px;border:1px solid var(--paper-dim);background:var(--paper-dim);color:var(--ink);font-size:1.1rem;border-radius:4px}
.featured-tabs button[aria-selected="true"]{background:var(--pine-deep);color:var(--paper);border-color:var(--pine-deep)}
.featured-tabs button:focus-visible,.featured-card:focus-visible{outline:2px solid var(--brass);outline-offset:5px}
.featured-note{text-align:center;color:var(--slate);font-size:.9rem;margin-bottom:28px}
.featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.featured-card__image{aspect-ratio:3/4;overflow:hidden;background:#fff;border-radius:4px}
.featured-card img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.featured-card:hover img{transform:scale(1.025)}
.featured-card h3{font-size:1.25rem;margin:15px 0 4px}
.featured-card p{color:var(--slate);font-size:.9rem;margin-bottom:10px}
.featured-card>span{color:var(--burgundy);font-size:1.1rem}
.featured-departments [hidden]{display:none!important}
.featured-coming{padding:48px 24px;text-align:center;background:var(--paper-dim)}
.featured-coming .glyph{display:block;width:64px;height:84px;margin:0 auto 20px;color:var(--brass-deep)}
.featured-coming h3{font-size:2rem;margin:12px 0}
.featured-coming p{max-width:50ch;margin:0 auto 24px;color:var(--slate)}
@media(max-width:760px){.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.featured-tabs button{padding:10px 22px}.featured-card h3{font-size:1.1rem}}
:root{
  --ink: #15181a;
  --board-black: #17191b;
  --paper: #faf8f2;
  --paper-dim: #f0ebdd;
  --card: #ffffff;
  --slate: #5c6058;

  --pine: #1e4d3b;
  --pine-deep: #0f2e22;
  --pine-light: #4f8b71;
  --pine-mist: #e7efe8;

  --brass: #ad7f3c;
  --brass-light: #d9b876;
  --brass-deep: #8a6528;

  --burgundy: #7a2036;
  --burgundy-light: #a4425a;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: var(--serif);   /* one typeface site-wide: --sans and --mono are aliases of --serif */

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; font-size: 112.5%; }   /* Cormorant runs small — scale rem up so it reads like the old sans */
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight:600; margin:0; letter-spacing:.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width: var(--container); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--sans); font-size:.82rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--pine); font-weight:500;
}
.eyebrow::before{ content:""; width:22px; height:1px; background: var(--pine); display:inline-block; }
.eyebrow.on-dark{ color: var(--brass-light); }
.eyebrow.on-dark::before{ background: var(--brass-light); }

.section{ padding: clamp(64px, 10vw, 128px) 0; position:relative; }
.section-head{ max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2{ font-size: clamp(2.1rem, 4vw, 3.2rem); margin-top:.4em; line-height:1.05; }
.section-head p{ margin-top:1em; color: var(--slate); font-size:1.05rem; max-width:46ch; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Checkerboard utilities ---------- */
.checker-bg{
  background-image:
    repeating-conic-gradient(var(--board-black) 0% 25%, var(--paper) 0% 50%);
  background-size: 64px 64px;
}
.checker-bg.dark{
  background-image:
    repeating-conic-gradient(var(--board-black) 0% 25%, var(--pine-deep) 0% 50%);
  background-size: 56px 56px;
}
.checker-strip{
  height: 14px;
  background-image: repeating-conic-gradient(var(--board-black) 0% 25%, var(--paper) 0% 50%);
  background-size: 14px 14px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1em 2.1em;
  font-family: var(--sans); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  border: 1px solid var(--pine);
  border-radius: 2px;
  background: var(--pine);
  color: var(--paper);
  transition: transform .45s var(--ease), background .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.btn:hover{ background: var(--brass); border-color: var(--brass); color: var(--ink); transform: translateY(-2px); }
.btn.ghost{ background: transparent; color: var(--paper); border-color: rgba(250,248,242,.55); }
.btn.ghost:hover{ background: var(--paper); color: var(--pine-deep); border-color: var(--paper); }
.btn.dark-ghost{ background: transparent; color: var(--pine); border-color: var(--pine); }
.btn.dark-ghost:hover{ background: var(--pine); color: var(--paper); }
.btn.small{ padding: .8em 1.5em; font-size:.82rem; }

/* ============================================================
   ANNOUNCEMENT BAR — rotating promise on the left, service links on the right
============================================================ */
.announce{
  background: var(--pine-deep); color: rgba(250,248,242,.86);
  font-size:.80rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; z-index: 60;
}
.announce__inner{
  max-width: var(--container); margin:0 auto; padding: 0 var(--gutter);
  min-height: 38px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.announce__msgs{ display:grid; flex:1; min-width:0; }
.announce__msgs > *{
  grid-area:1/1; display:flex; align-items:center; gap:.7em; opacity:0; transform: translateY(6px);
  animation: announceCycle 20s infinite; animation-delay: calc(var(--n) * 5s);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit;
}
.announce__msgs > *::before{ content:""; width:6px; height:6px; background: var(--brass-light); transform: rotate(45deg); flex:none; }
.announce__msgs a:hover{ color: var(--brass-light); }
@keyframes announceCycle{
  0%{ opacity:0; transform: translateY(6px); } 4%,30%{ opacity:1; transform:none; }
  34%,100%{ opacity:0; transform: translateY(-6px); }
}
.announce__links{ display:flex; align-items:center; gap: 22px; flex:none; }
.announce__links a{ color: var(--brass-light); transition: color .3s; }
.announce__links a:hover{ color:#fff; }
.announce__links a + a{ position:relative; padding-left:22px; }
.announce__links a + a::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:11px; background: rgba(250,248,242,.25); transform: translateY(-50%); }
@media (max-width: 820px){ .announce__links a:not(:first-child){ display:none; } .announce__links a:first-child{ display:none; } .announce__inner{ justify-content:center; } .announce__msgs > *{ justify-content:center; } }
@media (max-width: 480px){ .announce{ font-size:.74rem; letter-spacing:.07em; } }
@media (prefers-reduced-motion: reduce){ .announce__msgs > *{ animation:none; } .announce__msgs > *:first-child{ opacity:1; transform:none; } }

/* ============================================================
   HEADER
============================================================ */
.site-header{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--gutter);
  border-bottom: 1px solid rgba(21,24,26,.08);
  color: var(--ink);
  transition: box-shadow .4s ease, padding .4s var(--ease);
  isolation: isolate;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(250,248,242,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.solid{ box-shadow: 0 10px 30px rgba(15,46,34,.08); padding: 13px var(--gutter); }
.brand{
  display:flex; align-items:center; gap:.6em;
  font-family: var(--serif); font-size: 1.5rem; font-weight:600; letter-spacing:.02em;
  color: var(--ink);
}
.brand img{ display:block; width:clamp(190px,18vw,235px); height:auto; }
.footer-brand .brand img{ width:250px; }
.brand .glyph{ display:block; width:26px; height:26px; color: var(--pine); }
.brand .glyph svg{ width:100%; height:100%; display:block; }
.brand small{ display:block; font-family: var(--sans); font-size:.68rem; letter-spacing:.32em; color: var(--brass-deep); font-weight:400; margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap: clamp(18px,2.6vw,36px); }
.main-nav a{
  font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  position:relative; padding-bottom:4px; color: var(--ink);
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--pine);
  transition: width .35s var(--ease);
}
.main-nav a:hover::after{ width:100%; }
.main-nav a:hover{ color: var(--pine); }

.main-nav a{ white-space:nowrap; }
@media (max-width: 1240px){ .main-nav{ gap:18px; } .main-nav a{ letter-spacing:.1em; font-size:.82rem; } .brand small{ display:none; } }
.header-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{ width:20px; height:20px; color: var(--ink); opacity:.85; transition:opacity .3s, color .3s; background:none; border:0; padding:0; }
.icon-btn:hover{ opacity:1; color: var(--pine); }
.nav-toggle{ display:none; }

/* ============================================================
   HOMEPAGE SHOWCASE — rotating product hero on the board
   (markup is generated by tools/gen_home_showcase.py, behaviour in js/showcase.js)
============================================================ */
.showcase{ position:relative; background: var(--paper); overflow:hidden; --dur: 7.5s; --wipe: 84px; }
.showcase__bg{
  position:absolute; inset:0;
  background-image: repeating-conic-gradient(var(--board-black) 0% 25%, var(--paper) 0% 50%);
  background-size: 84px 84px; opacity:.3;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 64%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 64%);
}
.showcase__bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, var(--paper) 0%, rgba(250,248,242,0) 12%); }
.showcase__inner{
  position:relative; z-index:2;
  max-width: var(--container); margin:0 auto; padding: 0 var(--gutter);
  display:grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(12px,3vw,48px);
  height: clamp(500px, calc(100vh - 210px), 660px);
}

/* copy column: every slide's copy sits in the same grid cell */
.sc-copies{ display:grid; align-self:center; position:relative; z-index:3; }
.sc-copy{ grid-area:1/1; align-self:center; min-width:0; visibility:hidden; transition: visibility 0s .35s; }
.sc-copy.is-active{ visibility:visible; transition-delay:0s; }
.sc-copy > *{ opacity:0; transform: translateY(18px); transition: opacity .3s ease, transform .3s ease; }
.sc-copy.is-active > *{ opacity:1; transform:none; transition: opacity .7s ease, transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 380ms); }
.sc-copy > *:nth-child(1){ --i:0; } .sc-copy > *:nth-child(2){ --i:1; } .sc-copy > *:nth-child(3){ --i:2; }
.sc-copy > *:nth-child(4){ --i:3; } .sc-copy > *:nth-child(5){ --i:4; } .sc-copy > *:nth-child(6){ --i:5; }
.sc-eyebrow{
  display:inline-flex; align-items:center; gap:.7em; width:fit-content;
  font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500; color: var(--brass-deep);
}
.sc-eyebrow svg{ width:20px; height:20px; color: var(--pine); flex:none; }
.sc-copy--welcome .sc-eyebrow{ max-width:100%; text-decoration:none; }
.sc-welcome-line{ min-width:0; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.sc-title{ font-size: clamp(2.5rem, 4.9vw, 4.4rem); line-height:1; margin-top:.28em; text-wrap:balance; }
.sc-title em{ font-style:italic; color: var(--pine); }
.sc-sub{ margin-top:1em; max-width:40ch; color: var(--slate); font-size:1.08rem; }
.sc-meta{
  margin-top:1.1em; display:flex; align-items:center; gap:.9em; flex-wrap:wrap;
  font-family: var(--serif); font-size:1.5rem; font-weight:600; color: var(--burgundy);
}
.sc-meta i{ width:5px; height:5px; background: var(--brass); transform: rotate(45deg); }
.sc-meta:empty{ display:none; }
.sc-copy--welcome .sc-meta{ display:none; }
.sc-cta{ display:flex; gap:14px; margin-top:1.7em; flex-wrap:wrap; }
.sc-cta .btn:hover{ color: var(--ink); }
.sc-cta .btn.dark-ghost:hover{ color: var(--paper); background: var(--pine); border-color: var(--pine); }
.sc-colors{ margin-top:1em; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sc-colorname{ font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color: var(--slate); min-width:9.5em; }
.sc-dots{ display:flex; flex-wrap:wrap; gap:7px; max-width: 320px; }
.sc-dot{
  width:20px; height:20px; border-radius:50%; background: var(--c); padding:0;
  border:1px solid rgba(21,24,26,.28); box-shadow: 0 0 0 0 var(--brass);
  transition: box-shadow .3s, transform .3s;
}
.sc-dot:hover{ transform: scale(1.15); }
.sc-dot.is-on{ box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--brass); }

/* stage column: figures stand on the bar below */
.sc-stage{ position:relative; }
.sc-figs{ position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity .25s ease, visibility 0s .25s; }
.sc-figs.is-active{ opacity:1; visibility:visible; transition-delay:0s; }
.sc-glyph{
  position:absolute; right:-2%; bottom:4%; width: min(62%, 420px); aspect-ratio:1; color: rgba(30,77,59,.09);
  transform: translateX(40px) rotate(-6deg); opacity:0; transition: transform 1.4s var(--ease) .2s, opacity 1s ease .2s;
}
.sc-glyph svg{ width:100%; height:100%; display:block; }
.sc-figs.is-active .sc-glyph{ transform:none; opacity:1; }
.sc-fig{
  position:absolute; left:var(--x); bottom: var(--b, 0%); height: var(--h, auto); width: var(--w, auto);
  z-index: var(--z,1);
  transform: translate(calc(-50% + 56px), 36px); opacity:0;
  transition: transform .9s var(--ease), opacity .7s ease;
  transition-delay: calc(var(--d,0ms) + 200ms);
}
.sc-figs.is-active .sc-fig{ transform: translateX(-50%); opacity: var(--op,1); }
.sc-fig img{ display:block; height:100%; width:auto; max-width:none; filter: drop-shadow(0 18px 22px rgba(15,24,20,.2)); transition: opacity .35s ease; }
.sc-fig.is-obj img{ width:100%; height:auto; }
.sc-fig.is-obj{ height:auto; }
.sc-figs--obj .sc-fig.is-focal{ animation: scFloat 6s ease-in-out 1.4s infinite; }
@keyframes scFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
.sc-fig.is-swap img{ opacity:0; }

/* board wipe between slides */
.sc-wipe{ position:absolute; z-index:6; pointer-events:none; display:grid; }
.sc-wipe i{
  background: var(--board-black); transform: scale(0); will-change: transform;
  transition: transform .3s cubic-bezier(.65,0,.35,1); transition-delay: var(--d);
}
.sc-wipe i.l{ background: var(--paper); }
.sc-wipe.cover i{ transform: scale(1.03); }

/* bottom bar: collection chips + controls */
.showcase__bar{ position:relative; z-index:4; background: rgba(250,248,242,.94); border-top: 1px solid rgba(21,24,26,.1); }
.showcase__bar-inner{
  max-width: var(--container); margin:0 auto; padding: 0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px;
}
.sc-chips{ display:flex; gap: clamp(4px,1.6vw,22px); }
.sc-chip{
  position:relative; display:inline-flex; align-items:center; gap:.65em; background:none; border:0;
  padding: 19px 10px; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color: var(--slate);
  transition: color .3s;
}
.sc-chip svg{ width:17px; height:17px; }
.sc-chip:hover, .sc-chip.is-active{ color: var(--pine); }
.sc-chip::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background: var(--pine); transform: scaleX(0); transition: transform .4s var(--ease); }
.sc-chip.is-active::after{ transform: scaleX(1); }
.sc-progress{ position:absolute; left:0; top:-1px; height:2px; width:100%; background: var(--brass); transform: scaleX(0); transform-origin:left; z-index:2; }
.showcase.is-running .sc-progress{ animation: scProgress var(--dur) linear forwards; }
.showcase.is-paused .sc-progress{ animation-play-state: paused; }
@keyframes scProgress{ to{ transform: scaleX(1); } }
.sc-nav{ display:flex; align-items:center; gap:14px; }
.sc-count{ font-size:.82rem; letter-spacing:.16em; color: var(--slate); font-variant-numeric: tabular-nums; min-width:5.2em; text-align:center; }
.sc-count b{ font-family: var(--serif); font-size:1.15rem; color: var(--ink); font-weight:600; }
.sc-arrow{
  width:38px; height:38px; border:1px solid rgba(21,24,26,.25); background: transparent; color: var(--ink);
  display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:50%;
  transition: background .3s, color .3s, border-color .3s;
}
.sc-arrow:hover{ background: var(--pine); border-color: var(--pine); color: var(--paper); }

@media (max-width: 900px){
  .showcase__inner{ grid-template-columns: minmax(0,1fr); height:auto; gap:0; padding-top: 26px; }
  .sc-copies{ align-self:start; }
  .sc-copy{ align-self:start; }
  .sc-title{ font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .sc-sub{ font-size:.98rem; margin-top:.8em; }
  .sc-copy:not(.sc-copy--welcome) .sc-sub{ display:none; }
  .sc-meta{ margin-top:.7em; font-size:1.25rem; }
  .sc-cta{ margin-top:1.3em; flex-wrap:nowrap; gap:10px; }
  .sc-cta .btn{ padding: .95em 1.15em; font-size:.80rem; letter-spacing:.11em; white-space:nowrap; }
  .sc-colors{ margin-top:.7em; }
  .showcase{ --wipe: 64px; }
  .sc-stage{ height: clamp(300px, 86vw, 440px); margin-top: 8px; }
  .showcase__bg{ -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, #000 70%); }
  .sc-count{ display:none; }
  .sc-chip{ padding: 17px 6px; letter-spacing:.14em; }
  .sc-chip svg{ display:none; }
}
@media (max-width: 480px){ .sc-arrow{ width:34px; height:34px; } .sc-chip{ font-size:.76rem; } .sc-hide-sm{ display:none; } .sc-eyebrow{ font-size:.78rem; letter-spacing:.2em; } .sc-copy--welcome .sc-cta{ flex-wrap:wrap; } .sc-copy--welcome .sc-cta .btn{ white-space:normal; } }
@media (prefers-reduced-motion: reduce){
  .sc-fig, .sc-glyph{ transform: translateX(-50%); transition: opacity .4s ease !important; }
  .sc-glyph{ transform:none; }
  .sc-copy > *{ transform:none; transition: opacity .4s ease !important; }
  .sc-figs--obj .sc-fig.is-focal{ animation:none; }
}

/* ============================================================
   SHOP BY PIECE — compact category row under the hero
============================================================ */
.categories{ background: var(--paper); padding: clamp(36px,5vw,64px) 0 clamp(40px,5vw,68px); }
.categories__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom: clamp(20px,3vw,32px); }
.categories__head h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-top:.3em; line-height:1.05; }
.categories__head p{ color: var(--slate); font-size:1rem; max-width:38ch; }
.categories .board-grid{ padding:0; gap:6px; }
.categories .piece-card{ aspect-ratio: 4 / 6; background: var(--pine-deep); }
.categories .piece-card img{ -webkit-mask-image:none; mask-image:none; filter:none; transform:scale(1.02); }
.categories .piece-card:hover img{ filter:brightness(.95); transform:scale(1.08); }
.categories .piece-card.soon{ background:var(--pine-deep); }
.categories .piece-card::before{ background:linear-gradient(180deg, rgba(9,26,20,0) 30%, rgba(9,26,20,.8) 72%, rgba(9,26,20,.98) 100%); }
.categories .piece-card__glyph{ color:var(--pine-deep); }
.categories .piece-card__soon-badge{ background:rgba(250,248,242,.9); border-color:rgba(15,46,34,.35); color:var(--pine-deep); }
.categories .piece-card__body{ display:grid; justify-items:start; gap:7px; padding:18px 18px 22px; }
.categories .piece-card__body h3{ margin:0; font-size:clamp(1.3rem,2vw,1.55rem); line-height:1.05; }
.categories .piece-card__body p{ margin:0; max-width:24ch; font-size:.88rem; line-height:1.35; color:rgba(250,248,242,.92); }
.categories .piece-card__link{ margin-top:4px; }

/* ============================================================
   TRUST STRIP
============================================================ */
.strip{
  background: var(--card);
  border-bottom: 1px solid rgba(21,24,26,.08);
  padding: 18px 0;
}
.strip .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.strip__item{ display:flex; align-items:center; gap:10px; font-size:.88rem; letter-spacing:.08em; color: var(--slate); }
.strip__item b{ color: var(--pine); font-family: var(--serif); font-size:1rem; }

.fit-check-promo{ background:var(--pine-deep); color:var(--paper); padding:clamp(28px,4vw,46px) 0; }
.fit-check-promo__inner{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; }
.fit-check-promo .eyebrow{ color:var(--brass); }
.fit-check-promo h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); margin:.22em 0; line-height:1.05; }
.fit-check-promo p{ max-width:64ch; color:rgba(250,248,242,.82); }
.fit-check-promo .btn{ background:var(--brass); border-color:var(--brass); color:var(--ink); white-space:nowrap; }
.fit-check-promo .btn:hover{ background:var(--paper); border-color:var(--paper); }
@media (max-width:760px){ .fit-check-promo__inner{ grid-template-columns:1fr; gap:20px; } .fit-check-promo .btn{ justify-self:start; white-space:normal; } }

/* ============================================================
   EXPLODING SUIT DIAGRAM — real photography, triggers on view
============================================================ */
.diagram-section{
  background: var(--paper);
  color: var(--ink);
  position: relative;
  border-top: 1px solid rgba(21,24,26,.08);
  border-bottom: 1px solid rgba(21,24,26,.08);
}
.diagram-head{
  padding: clamp(56px,8vw,88px) 20px 0;
  text-align:center;
}
.diagram-head .eyebrow{ margin:0 auto; }
.diagram-head h2{ font-size: clamp(2.1rem,4vw,3.2rem); margin-top:.35em; }
.diagram-head p{ margin: .9em auto 0; max-width:56ch; color: var(--slate); font-size:1.02rem; }

.explode-wrap{ padding: clamp(12px,3vw,24px) 0 clamp(44px,6vw,64px); }
.explode-stage{
  position:relative;
  height: 675px;
  max-width: 700px; margin: 0 auto;
  background:
    radial-gradient(ellipse 58% 58% at 50% 50%, var(--pine-mist) 0%, rgba(231,239,232,0) 72%);
  overflow:hidden;
}
.explode-track{ position:absolute; inset:0; }

.xpiece{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%) translate(var(--hx),var(--hy));
  transition: transform 1.15s var(--ease), filter .3s ease;
  transition-delay: var(--delay, 0s);
  cursor:pointer;
  filter: drop-shadow(0 16px 20px rgba(15,24,20,.22));
  z-index: var(--z, 1);
}
.explode-stage.exploded .xpiece{
  transform: translate(-50%,-50%) translate(var(--ox),var(--oy));
}

.xpiece img{ display:block; }
.xpiece:hover{ filter: drop-shadow(0 20px 26px rgba(15,24,20,.3)); }
.xpiece:hover img{ outline: none; }
.xpiece:focus-visible{ outline: 2px solid var(--pine); outline-offset:8px; }

.xpiece--bowtie{ --hx:0px; --hy:-225px; --ox:0px; --oy:-260px; --delay:.02s; --z:6; }
.xpiece--jacket{ --hx:0px; --hy:-115px; --ox:-155px; --oy:-115px; --delay:.09s; --z:4; }
.xpiece--shirt{ --hx:0px; --hy:-115px; --ox:155px; --oy:-115px; --delay:.16s; --z:2; }
.xpiece--vest{ --hx:0px; --hy:-115px; --ox:0px; --oy:-115px; --delay:.2s; --z:3; }
.xpiece--pocketsquare{ --hx:40px; --hy:-155px; --ox:275px; --oy:-183px; --delay:.23s; --z:5; }
.xpiece--cufflinks{ --hx:-65px; --hy:-16px; --ox:-263px; --oy:-15px; --delay:.36s; --z:5; }
.xpiece--trousers{ --hx:0px; --hy:90px; --ox:0px; --oy:110px; --delay:.13s; --z:3; }
.xpiece--shoes{ --hx:0px; --hy:225px; --ox:0px; --oy:257px; --delay:.42s; --z:5; }

.xpiece--jacket img{ width:130px; }
.xpiece--shirt img{ width:118px; }
.xpiece--vest img{ width:100px; }
.xpiece--trousers img{ width:80px; }
.xpiece--shoes img{ width:105px; }
.xpiece--bowtie img{ width:66px; }
.xpiece--pocketsquare img{ width:42px; }
.xpiece--cufflinks img{ width:45px; }

.xpiece__label{
  position:absolute; left:50%; top:100%;
  transform: translate(-50%, 8px);
  white-space:nowrap; text-align:center;
  opacity:0; transition: opacity .5s ease .3s;
  pointer-events:none;
}
.explode-stage.exploded .xpiece__label{ opacity:1; pointer-events:auto; }
.xpiece__label .name{ display:block; font-family: var(--serif); font-size:1.05rem; color: var(--ink); }
.xpiece--trousers .xpiece__label{ top:38%; left:100%; transform:translate(10px,-50%); text-align:left; }

@media (max-width: 640px){
  .explode-stage{ height:570px; max-width:440px; }
  .explode-track{ --splay:min(100px,24vw); --edge:min(165px,39vw); }
  .xpiece__label{ width:70px; white-space:normal; line-height:1; transform:translate(-50%,6px); }
  .xpiece__label .name{ font-size:.88rem; }
  .xpiece--trousers .xpiece__label{ transform:translate(8px,-50%); }
  .xpiece--bowtie{ --hx:0px; --hy:-205px; --ox:0px; --oy:-220px; }
  .xpiece--jacket{ --hx:0px; --hy:-98px; --ox:calc(0px - var(--splay)); --oy:-98px; }
  .xpiece--shirt{ --hx:0px; --hy:-98px; --ox:var(--splay); --oy:-98px; }
  .xpiece--vest{ --hx:0px; --hy:-98px; --ox:0px; --oy:-98px; }
  .xpiece--pocketsquare{ --hx:28px; --hy:-145px; --ox:var(--edge); --oy:-205px; }
  .xpiece--cufflinks{ --hx:-50px; --hy:-8px; --ox:calc(0px - var(--edge)); --oy:10px; }
  .xpiece--trousers{ --hx:0px; --hy:70px; --ox:0px; --oy:75px; }
  .xpiece--shoes{ --hx:0px; --hy:176px; --ox:0px; --oy:217px; }
  .xpiece--jacket img{ width:88px; }
  .xpiece--shirt img{ width:80px; }
  .xpiece--vest img{ width:65px; }
  .xpiece--trousers img{ width:58px; }
  .xpiece--shoes img{ width:82px; }
  .xpiece--bowtie img{ width:50px; }
  .xpiece--pocketsquare img{ width:30px; }
  .xpiece--cufflinks img{ width:32px; }
}

@media (prefers-reduced-motion: reduce){
  .xpiece, .xpiece__label{ transition:none; }
}

.explode-foot{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top: 28px;
  font-size:.88rem; color: var(--slate);
}
.explode-foot svg{ color: var(--pine); }

/* ============================================================
   CATEGORY GRID (The Board)
============================================================ */
.board-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:4px;
  background: transparent;
  padding: 4px;
}
.piece-card{
  position:relative; aspect-ratio: 3/4.4; overflow:hidden; color: var(--paper);
  background: transparent;
  display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate;
}
.piece-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.05); transition: transform 1s var(--ease), filter .6s ease;
  filter: grayscale(.1) brightness(.85);
  z-index:-2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%);
}
.piece-card:hover img{ transform: scale(1.14); filter: grayscale(0) brightness(.72); }
.piece-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(15,46,34,0) 20%, rgba(9,26,20,.94) 92%);
}
.piece-card.soon{
  background: linear-gradient(180deg, rgba(15,46,34,0) 0%, var(--pine-deep) 38%, var(--pine-deep) 100%);
}
.piece-card__glyph{ display:block; position:absolute; top:20px; left:20px; width:30px; height:30px; color: var(--brass-light); opacity:.95; }
.piece-card__body{ padding: 22px 20px 26px; }
.piece-card__rank{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color: var(--brass-light); }
.piece-card__body h3{ font-size: 1.7rem; margin-top:.25em; }
.piece-card__body p{ font-size:.8rem; color: rgba(250,248,242,.75); margin-top:.5em; }
.piece-card__link{
  margin-top:14px; display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color: var(--paper);
  border-bottom: 1px solid rgba(250,248,242,.4); padding-bottom:4px;
  transition: border-color .3s, color .3s, gap .3s;
}
.piece-card:hover .piece-card__link{ border-color: var(--brass-light); color: var(--brass-light); gap:12px; }
.piece-card.soon .piece-card__body{ opacity:.95; }
.piece-card__soon-badge{
  position:absolute; top:20px; right:20px; font-size:.70rem; letter-spacing:.18em; text-transform:uppercase;
  padding: 6px 10px; border:1px solid rgba(250,248,242,.5); color: var(--paper);
}

@media (max-width: 980px){
  .board-grid{ grid-template-columns: repeat(2, 1fr); }
  .piece-card:nth-child(5){ grid-column: span 2; aspect-ratio: 16/9; }
  .categories .piece-card:nth-child(5){ aspect-ratio: 16/8; }
  .categories .piece-card{ aspect-ratio: 4/4.4; }
}
@media (max-width: 560px){
  .categories .board-grid{ grid-template-columns:1fr; }
  .categories .piece-card,.categories .piece-card:nth-child(5){ grid-column:auto; aspect-ratio:4/4.5; }
}

/* ============================================================
   PRODUCT GRID (Featured Openings)
============================================================ */
.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px,2.4vw,30px); }
.product-card{ display:block; }
.product-card__frame{
  position:relative; overflow:hidden; background: var(--card); border: 1px solid rgba(21,24,26,.08);
  aspect-ratio: 2/3;
}
.product-card__frame img{
  width:100%; height:100%; object-fit:cover; object-position: top center;
  transition: transform .8s var(--ease);
}
.product-card:hover .product-card__frame img{ transform: scale(1.06); }
.product-card__notation{
  position:absolute; top:12px; left:12px;
  font-family: var(--serif); font-style:italic; font-size:.88rem;
  color: var(--pine-deep); background: rgba(250,248,242,.9); padding: 3px 9px;
  letter-spacing:.02em;
}
.product-card__quick{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; justify-content:center;
  opacity:0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.product-card:hover .product-card__quick{ opacity:1; transform:translateY(0); }
.product-card__meta{ padding: 16px 2px 0; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.product-card__meta h4{ font-size:1.15rem; }
.product-card__meta .piece-tag{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--pine); margin-top:.35em; display:block; }
.product-card__price{ font-family: var(--serif); font-size:1.1rem; white-space:nowrap; color: var(--burgundy); }

.grid-foot{ display:flex; justify-content:center; margin-top: clamp(36px,5vw,56px); }

@media (max-width: 1100px){ .product-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px){ .product-grid{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   GALLERY GRID (product cards with a model + plain-shot thumbnail strip)
============================================================ */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px,2.4vw,30px); }
.gallery-card__frame{
  position:relative; overflow:hidden; background: var(--paper-dim); border: 1px solid rgba(21,24,26,.08);
  aspect-ratio: 2/3;
}
.gallery-card__main-img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.gallery-card__thumbs{ display:grid; grid-template-columns: repeat(6,1fr); gap:4px; margin-top:6px; }
.gallery-thumb{
  padding:0; border:1.5px solid transparent; background: var(--paper-dim);
  aspect-ratio:1; overflow:hidden; cursor:pointer; border-radius:1px;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb:hover{ border-color: var(--brass); }
.gallery-thumb.is-active{ border-color: var(--pine); }

@media (max-width: 1100px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-grid .gallery-card{ max-width: 380px; margin: 0 auto; }
}

/* ============================================================
   NAV DROPDOWN (hover categories, e.g. Pawn subcategories)
============================================================ */
.nav-item{ position:relative; }
.nav-item > a{ display:inline-block; }
.nav-dropdown{
  position:absolute; top:100%; left:50%; transform: translateX(-50%) translateY(4px);
  min-width: 200px; padding: 10px 0; margin-top: 14px;
  background: var(--card); border:1px solid rgba(21,24,26,.1); box-shadow: 0 18px 34px rgba(15,24,20,.14);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 60;
}
.nav-dropdown::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a{
  padding: 10px 20px; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink); white-space:nowrap; text-align:center;
}
.nav-dropdown a:hover{ background: var(--paper-dim); color: var(--pine); }
.nav-dropdown a::after{ display:none; }

@media (max-width: 980px){
  .nav-item{ display:flex; flex-direction:column; align-items:center; }
  .nav-dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent; margin-top:6px; padding:0;
    gap:10px; align-items:center;
  }
  .nav-dropdown a{ color: rgba(250,248,242,.72); font-size:.80rem; padding:0; }
  .nav-dropdown a:hover{ background:transparent; color: var(--brass-light); }
}

/* ============================================================
   BRAND STORY
============================================================ */
.story{
  background: var(--pine-deep); color: var(--paper);
  display:grid; grid-template-columns: 1fr 1fr; align-items:stretch;
}
.story__media{ position:relative; overflow:hidden; min-height: 480px; }
.story__media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.1) contrast(1.05); }
.story__media::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 120px rgba(9,26,20,.5); }
.story__copy{ padding: clamp(40px, 6vw, 96px) clamp(28px,6vw,80px); display:flex; flex-direction:column; justify-content:center; }
.story__copy h2{ font-size: clamp(2rem,3.4vw,2.8rem); margin-top:.4em; line-height:1.08; }
.story__copy p{ margin-top:1.1em; color: rgba(250,248,242,.75); max-width:52ch; }
.story__stats{ display:flex; gap: clamp(24px,4vw,48px); margin-top: 2.4em; flex-wrap:wrap; }
.story__stats div b{ display:block; font-family: var(--serif); font-size: 2.1rem; color: var(--brass-light); }
.story__stats div span{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(250,248,242,.65); }

@media (max-width: 860px){ .story{ grid-template-columns: 1fr; } .story__media{ min-height: 320px; } }

/* ============================================================
   QUOTES
============================================================ */
.quotes{ background: var(--paper-dim); }
.quotes-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); }
.quote-card{ padding: 32px 28px; background: var(--card); border:1px solid rgba(21,24,26,.08); position:relative; }
.quote-card .mark{ font-family: var(--serif); font-size:3rem; color: var(--brass); line-height:1; }
.quote-card p{ font-family: var(--serif); font-size:1.18rem; line-height:1.5; margin-top:.2em; }
.quote-card__by{ margin-top:1.4em; display:flex; align-items:center; gap:10px; font-size:.88rem; color: var(--slate); }
.quote-card__by b{ color: var(--pine); }
.stars{ color: var(--brass); letter-spacing:2px; font-size:.85rem; }

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

/* ============================================================
   NEWSLETTER
============================================================ */
.newsletter{
  position:relative; overflow:hidden;
  background: var(--pine-deep); color: var(--paper); text-align:center;
}
.newsletter .checker-bg{ position:absolute; inset:0; opacity:.08; }
.newsletter__inner{ position:relative; max-width: 640px; margin:0 auto; padding: clamp(56px,8vw,96px) var(--gutter); }
.newsletter h2{ font-size: clamp(2rem,3.6vw,3rem); }
.newsletter p{ margin-top:1em; color: rgba(250,248,242,.72); }
.newsletter-form{ margin-top: 2.2em; display:flex; gap:0; border-bottom: 1px solid rgba(250,248,242,.35); padding-bottom: 14px; }
.newsletter-form input{
  flex:1; background:transparent; border:0; color: var(--paper); font-family: var(--serif); font-size:1.2rem; padding:6px 4px; outline:none;
}
.newsletter-form input::placeholder{ color: rgba(250,248,242,.45); }
.newsletter-form button{
  background:transparent; border:0; color: var(--brass-light);
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:8px;
}
.newsletter-note{ margin-top:16px; font-size:.78rem; letter-spacing:.1em; color: rgba(250,248,242,.45); }
.newsletter-form.sent input, .newsletter-form.sent button{ opacity:.4; pointer-events:none; }
.form-success{ display:none; margin-top:1.4em; color: var(--brass-light); font-size:.85rem; letter-spacing:.05em; }
.newsletter-form.sent + .form-success{ display:block; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer{ background: var(--pine-deep); color: rgba(250,248,242,.7); }
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(24px,4vw,40px); padding: clamp(48px,6vw,80px) 0 48px; }
.footer-brand .brand{ color: var(--paper); }
.footer-brand .brand .glyph{ color: var(--brass-light); }
.footer-brand p{ margin-top:1.2em; font-size:.88rem; max-width:34ch; color: rgba(250,248,242,.55); }
.footer-social{ display:flex; gap:14px; margin-top:1.6em; }
.footer-social a{ width:34px; height:34px; border:1px solid rgba(250,248,242,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color: var(--brass-light); color: var(--brass-light); }
.footer-social svg{ width:15px; height:15px; }
.footer-col h5{ font-family: var(--sans); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color: var(--brass-light); margin-bottom: 1.2em; font-weight:600; }
.footer-col ul li{ margin-bottom:.85em; font-size:.88rem; }
.footer-col ul li a:hover{ color: var(--paper); }
.footer-bottom{
  border-top: 1px solid rgba(250,248,242,.12);
  padding: 22px 0 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.84rem; color: rgba(250,248,242,.45);
}
.footer-bottom .legal{ display:flex; gap:20px; flex-wrap:wrap; }

@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column: 1/-1; } }

/* ============================================================
   CATEGORY / SIMPLE PAGE TEMPLATE
============================================================ */
.page-banner{
  position:relative; min-height: 58svh; display:flex; align-items:flex-end;
  background: var(--pine-deep); color: var(--paper); overflow:hidden; margin-top:calc(0px - var(--hdr-h,73px)); padding-top:var(--hdr-h,73px);
}
.page-banner__img{ position:absolute; inset:0; }
.page-banner__img img{ width:100%; height:100%; object-fit:cover; opacity:.6; }
.page-banner__img::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(9,26,20,.7) 0%, rgba(9,26,20,.3) 40%, rgba(9,26,20,.95) 100%); }
.page-banner__inner{ position:relative; z-index:2; padding: 90px var(--gutter) 52px; max-width: var(--container); margin:0 auto; width:100%; }
.page-banner__glyph{ display:block; width:52px; height:52px; color: var(--brass-light); margin-bottom: 18px; }
.page-banner h1{ font-size: clamp(2.4rem,5.6vw,4.2rem); }
.page-banner p{ margin-top:.8em; max-width:56ch; color: rgba(250,248,242,.78); font-size:1.05rem; }
.crumbs{ font-size:.80rem; letter-spacing:.16em; text-transform:uppercase; color: var(--brass-light); display:flex; gap:8px; align-items:center; margin-bottom:18px; }
.crumbs a:hover{ color: var(--paper); }
.page-banner__glyph svg, .coming-soon .glyph-lg svg, .piece-card__glyph svg{ width:100%; height:100%; display:block; }

/* ============================================================
   CATEGORY HERO — light checkerboard, full-figure cutouts standing on the bottom edge
============================================================ */
.cat-hero{
  position:relative; overflow:hidden; background: var(--paper);
  margin-top:calc(0px - var(--hdr-h,73px)); padding-top:var(--hdr-h,73px);
  border-bottom: 1px solid rgba(21,24,26,.16);
}
.cat-hero__bg{
  position:absolute; inset:0; opacity:.38;
  background-image: repeating-conic-gradient(var(--board-black) 0% 25%, var(--paper) 0% 50%);
  background-size: 84px 84px;
}
.cat-hero__fade{ position:absolute; inset:0; background: linear-gradient(180deg, var(--paper) 0%, rgba(250,248,242,0) 16%); }
.cat-hero__inner{
  position:relative; z-index:2; max-width: var(--container); margin:0 auto; padding: 0 var(--gutter);
  display:grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); align-items:end; gap: clamp(16px,3vw,48px);
  padding-top: clamp(20px,3vw,36px);
}
.cat-hero__copy{ position:relative; align-self:center; padding: clamp(36px,5vw,64px) 0; max-width: 520px; }
.cat-hero__copy::before{
  content:""; position:absolute; left:-24px; right:-16px; top:8px; bottom:8px; z-index:-1;
  background: rgba(250,248,242,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cat-hero .crumbs{ color: var(--pine); margin-bottom:14px; }
.cat-hero .crumbs a:hover{ color: var(--brass-deep); }
.cat-hero__glyph{ display:block; width:44px; height:44px; color: var(--pine); margin-bottom:14px; }
.cat-hero__glyph svg{ width:100%; height:100%; display:block; }
.cat-hero h1{ font-size: clamp(2.4rem, 5vw, 4rem); line-height:1; }
.cat-hero__copy p{ margin-top:.9em; max-width:46ch; color: var(--slate); font-size:1.02rem; }

.cat-hero__figures{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  gap: clamp(8px,1.6vw,22px);
  height: clamp(360px, 42vw, 540px);
}
.cat-hero__figures::after{
  content:""; position:absolute; left:2%; right:2%; bottom:-8px; height:24px; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 50%, rgba(15,24,20,.26), rgba(15,24,20,0) 68%);
}
.cat-hero__figures img{
  position:relative; z-index:1; flex:0 1 auto; min-width:0; height:100%; width:auto; max-width:none;
  object-fit:contain; object-position:center bottom;
  filter: drop-shadow(0 14px 16px rgba(15,24,20,.2));
}
.cat-hero__figures--objects{
  display:grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px 26px;
  align-items:center; justify-items:center; padding: 28px 0;
}
.cat-hero__figures--objects::after{ display:none; }
.cat-hero__figures--objects img{ height:auto; max-height:100%; width:100%; max-width:100%; object-fit:contain; }
.cat-hero__figures--objects img:first-child{ grid-row: 1 / span 2; }
.cat-hero__figures--single img{ height:auto; width:min(100%, 640px); }
.cat-hero__figures--glyph{ align-items:center; color: var(--pine); }
.cat-hero__figures--glyph::after{ display:none; }
.cat-hero__figures--glyph svg{ height:88%; width:auto; opacity:.14; }

@media (max-width: 900px){
  .cat-hero__inner{ grid-template-columns: minmax(0,1fr); gap:0; }
  .cat-hero__figures{ min-width:0; }
  .cat-hero__copy{ max-width:none; padding-bottom: 24px; }
  .cat-hero__figures{ height: clamp(300px, 78vw, 460px); }
}

.filter-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding: 30px 0; border-bottom:1px solid rgba(21,24,26,.1); }
.filter-bar__count{ font-size:.8rem; color: var(--slate); }
.filter-bar__sort{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color: var(--slate); display:flex; gap:10px; align-items:center; }
.filter-bar__sort select{ border:1px solid rgba(21,24,26,.2); background:transparent; padding:8px 10px; font-family:var(--sans); font-size:.88rem; }

.coming-soon{
  text-align:center; padding: clamp(60px,10vw,120px) var(--gutter);
  max-width: 720px; margin: 0 auto;
}
.coming-soon .glyph-lg{ display:block; width:80px; height:80px; margin:0 auto 24px; color: var(--pine); }
.coming-soon h2{ font-size: clamp(2rem,4vw,3rem); }
.coming-soon p{ margin-top:1em; color: var(--slate); font-size:1.05rem; }
.coming-soon .newsletter-form{ border-color: rgba(21,24,26,.25); max-width:420px; margin: 2.4em auto 0; }
.coming-soon .newsletter-form input{ color: var(--ink); }
.coming-soon .newsletter-form input::placeholder{ color: rgba(21,24,26,.4); }
.coming-soon .newsletter-form button{ color: var(--pine); }
.coming-soon .form-success{ color: var(--pine); }

/* ============================================================
   STYLE SUBCATEGORIES (e.g. Pawn — Slim Fit / Vest Set / Tuxedo / Tuxedo Vest Set)
============================================================ */
.style-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-top: clamp(20px,3vw,32px);
  padding-bottom: 22px; border-bottom: 1px solid rgba(21,24,26,.1);
}
.style-bar__label{ font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color: var(--slate); }
.style-select{
  border:1px solid rgba(21,24,26,.22); background: var(--card); color: var(--ink);
  padding:10px 14px; font-family: var(--sans); font-size:.82rem; border-radius:2px; min-width:220px;
}

.style-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: clamp(14px,2vw,20px); margin: clamp(24px,3.5vw,36px) 0 clamp(56px,7vw,88px); }
.style-card{
  background: var(--card); border:1px solid rgba(21,24,26,.1);
  padding: clamp(24px,3vw,32px) 22px; text-align:center;
  scroll-margin-top: 120px;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.style-card:hover{ border-color: var(--pine); transform: translateY(-4px); }
.style-card.is-highlighted{ border-color: var(--pine); box-shadow: 0 0 0 3px rgba(30,77,59,.14); }
.style-card__glyph{ display:block; width:34px; height:34px; margin:0 auto 16px; color: var(--pine); }
.style-card__glyph svg{ width:100%; height:100%; display:block; }
.style-card h4{ font-size:1.3rem; }
.style-card p{ font-size:.84rem; color: var(--slate); margin-top:.7em; line-height:1.5; }
.style-card__badge{
  display:inline-block; margin-top:16px; font-size:.70rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--brass-deep); border:1px solid rgba(173,127,60,.4); padding:5px 11px;
}

.style-card--live{ display:block; padding-top:0; overflow:hidden; }
.style-card__photo{ display:block; aspect-ratio: 3/4; overflow:hidden; margin: 0 -22px 20px; background: var(--paper-dim); }
.style-card__photo img{ width:100%; height:100%; object-fit:cover; object-position: top center; transition: transform .7s var(--ease); }
.style-card--live:hover .style-card__photo img{ transform: scale(1.06); }
.style-card__badge--live{ color: var(--pine); border-color: var(--pine); }
.style-card--live:hover .style-card__badge--live{ background: var(--pine); color: var(--paper); }

@media (max-width: 760px){ .style-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .style-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   REVEAL ON SCROLL
============================================================ */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-group] > *{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal-group].in > *{ opacity:1; transform:none; }
[data-reveal-group].in > *:nth-child(1){ transition-delay:.03s; }
[data-reveal-group].in > *:nth-child(2){ transition-delay:.09s; }
[data-reveal-group].in > *:nth-child(3){ transition-delay:.15s; }
[data-reveal-group].in > *:nth-child(4){ transition-delay:.21s; }
[data-reveal-group].in > *:nth-child(5){ transition-delay:.27s; }
[data-reveal-group].in > *:nth-child(n+6){ transition-delay:.3s; }

/* ============================================================
   MOBILE NAV
============================================================ */
@media (max-width: 980px){
  .main-nav{
    position:fixed; inset:0; top:0; z-index:70;
    background: var(--pine-deep); color: var(--paper);
    flex-direction:column; justify-content:center; align-items:center; gap: 26px;
    transform: translateY(-100%); transition: transform .5s var(--ease);
  }
  .main-nav.open{ transform: translateY(0); }
  .main-nav a{ font-size:1.1rem; color: var(--paper); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; width:26px; z-index:80; background:none; border:0; padding:4px;
  }
  .nav-toggle span{ height:1px; background: var(--ink); display:block; transition: transform .3s ease, opacity .3s ease; }
  .nav-toggle.open span{ background: var(--paper); }
  .nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  .header-actions .icon-btn.search-ic{ display:none; }
  .story{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-brand{ grid-column: auto; }
}


/* ============================================================
   TYPOGRAPHY — labels & fonts borrowed from stripe.press
   IBM Plex Mono for small UI labels ([ bracketed ] calls to action), underlined small-caps serif
   section labels, and tighter display serif. Layout and colours are unchanged.
============================================================ */
:root{ --mono: var(--serif); }
h1, h2{ letter-spacing:-.03em; }
h1 em, h2 em{ font-weight:400; }

/* small underlined caps labels */
.eyebrow, .sc-eyebrow{
  font-family: var(--serif); font-size:.95rem; letter-spacing:.02em; text-transform:uppercase; font-weight:500;
  text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.eyebrow::before{ display:none; }
.sc-eyebrow svg{ width:16px; height:16px; }
@media (max-width:480px){ .sc-copy--welcome .sc-eyebrow{ font-size:.71rem; letter-spacing:.04em; } }

/* mono UI text */
.announce, .main-nav a, .btn, .piece-tag, .product-card__notation, .product-card__price, .piece-card__rank, .piece-card__link,
.sc-meta, .sc-chip, .sc-count, .sc-colorname, .strip__item, .footer-col h5, .footer-bottom, .crumbs, .swatch-label{
  font-family: var(--mono);
}
.announce{ font-size:.68rem; letter-spacing:.06em; }
.main-nav a{ font-size:.66rem; letter-spacing:.05em; font-weight:400; }
@media (max-width: 1240px){ .main-nav a{ font-size:.6rem; letter-spacing:.02em; } .main-nav{ gap:14px; } }
.btn{ font-size:.74rem; letter-spacing:.08em; font-weight:400; }
.piece-tag, .product-card__notation, .piece-card__rank, .piece-card__link{ letter-spacing:.06em; }
.product-card__price{ font-size:.95rem; letter-spacing:.02em; }
.strip__item{ font-size:.7rem; letter-spacing:.04em; }
.strip__item b{ font-family: var(--serif); }
.footer-col h5{ font-size:.72rem; letter-spacing:.08em; font-weight:500; text-transform:uppercase; }
.footer-bottom{ font-size:.7rem; letter-spacing:.04em; }

/* announce links in [ brackets ] */
.announce__links a::before{ content:"[ "; }
.announce__links a::after{ content:" ]"; }
.announce__links a + a{ padding-left:0; }
.announce__links a + a::before{ position:static; width:auto; height:auto; background:none; transform:none; }

/* showcase */
.sc-title{ font-weight:500; letter-spacing:-.04em; line-height:.92; }
.sc-title em{ font-weight:400; }
.sc-meta{ font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; font-weight:400; color: var(--ink); }
.sc-meta i{ width:3px; height:3px; transform:none; border-radius:50%; background: var(--ink); opacity:.5; }
.sc-cta .btn{
  background:none; border:0; padding:.2em 0; border-radius:0; color: var(--ink);
  font-size:.8rem; letter-spacing:.03em; text-transform:uppercase;
}
.sc-cta .btn svg{ display:none; }
.sc-cta .btn::before{ content:"[\00a0"; }
.sc-cta .btn::after{ content:"\00a0\2192\00a0]"; }
.sc-cta .btn:hover{ background:none; color: var(--pine); transform:none; text-decoration:underline; text-underline-offset:5px; }
.sc-cta .btn.dark-ghost:hover{ background:none; color: var(--pine); }
.sc-chip{ font-size:.68rem; letter-spacing:.06em; }
.sc-count{ font-size:.68rem; letter-spacing:.03em; min-width:8em; white-space:nowrap; }
.sc-count b{ font-family: inherit; font-size:inherit; font-weight:500; }
.sc-colorname{ font-size:.68rem; letter-spacing:.05em; }


/* ============================================================
   INFO PAGES — Our Story, Master Tailors, Sustainability, Press, Book a Fitting, Size Guide, Alterations, Shipping
   (generated by tools/gen_info_pages.py; hero reuses .cat-hero--glyph)
============================================================ */
.info-section{ padding: clamp(44px,6vw,84px) 0; background: var(--paper); }
.info-section--alt{ background: var(--paper-dim); }
.info-section .section-head{ margin-bottom: clamp(24px,3.5vw,44px); }
.prose{ max-width: 66ch; }
.prose p{ margin-top:1.1em; color: var(--slate); font-size:1.08rem; }
.prose p:first-child{ margin-top:0; }
.prose strong{ color: var(--ink); font-weight:500; }
.link{ color: var(--pine); border-bottom:1px solid currentColor; }
.link:hover{ color: var(--brass-deep); }
.info-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.info-card{ background: var(--card); border:1px solid rgba(21,24,26,.1); padding: 28px 26px 30px; }
.info-card__n{ font-family: var(--mono); font-size:.72rem; letter-spacing:.06em; color: var(--brass-deep); }
.info-card h3{ font-size:1.55rem; margin-top:.6em; letter-spacing:-.01em; }
.info-card p{ margin-top:.7em; color: var(--slate); font-size:.98rem; }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px 28px; counter-reset: step; }
.steps li{ counter-increment: step; border-top:1px solid rgba(21,24,26,.2); padding-top:16px; }
.steps li::before{ content: "0" counter(step); font-family: var(--mono); font-size:.72rem; letter-spacing:.06em; color: var(--brass-deep); }
.steps h3{ font-size:1.4rem; margin-top:.4em; }
.steps p{ margin-top:.5em; color: var(--slate); font-size:.98rem; }
.faq{ max-width: 780px; }
.faq details{ border-top:1px solid rgba(21,24,26,.18); padding: 18px 0; }
.faq details:last-child{ border-bottom:1px solid rgba(21,24,26,.18); }
.faq summary{ cursor:pointer; font-family: var(--serif); font-size:1.3rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family: var(--mono); font-weight:400; color: var(--pine); }
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ margin-top:.8em; color: var(--slate); max-width:62ch; }
.table-wrap{ overflow-x:auto; border:1px solid rgba(21,24,26,.12); background: var(--card); }
.size-table{ width:100%; border-collapse:collapse; font-family: var(--mono); font-size:.82rem; min-width:480px; }
.size-table caption{ text-align:left; padding:14px 16px; font-size:.72rem; letter-spacing:.04em; color: var(--slate); caption-side:bottom; border-top:1px dashed rgba(21,24,26,.2); }
.size-table th, .size-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid rgba(21,24,26,.08); }
.size-table thead th{ background: var(--pine-deep); color: var(--paper); font-weight:500; letter-spacing:.05em; text-transform:uppercase; font-size:.7rem; }
.size-table tbody tr:nth-child(even){ background: rgba(21,24,26,.025); }
.info-cta{ background: var(--pine-deep); color: var(--paper); text-align:center; padding: clamp(48px,6vw,80px) 0; }
.info-cta h2{ font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom:1.1em; }
.info-cta .btn{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
.info-cta .btn:hover{ background: var(--paper); border-color: var(--paper); }
.shop-status{ margin:0 0 24px; padding:14px 18px; border-left:3px solid var(--brass); background:var(--paper-dim); color:var(--slate); line-height:1.5; }
.shop-status strong{ color:var(--ink); }
.shop-status a{ color:var(--pine); text-decoration:underline; text-underline-offset:3px; }
.look-finder{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:end; padding:clamp(22px,4vw,40px); background:var(--card); border:1px solid rgba(21,24,26,.14); border-top:5px solid var(--brass); box-shadow:0 16px 44px rgba(21,24,26,.07); }
.look-finder label{ display:grid; gap:8px; font-weight:600; color:var(--ink); }
.look-finder select,.look-finder input{ width:100%; min-height:48px; padding:10px 12px; border:1px solid rgba(21,24,26,.3); border-radius:0; background:var(--card); color:var(--ink); font:inherit; }
.look-finder__measurements{ grid-column:1/-1; border:0; border-top:1px solid rgba(21,24,26,.16); margin:8px 0 0; padding:22px 0 0; min-width:0; }
.look-finder__measurements legend{ padding:0 12px 0 0; font-weight:700; color:var(--pine-deep); }
.look-finder__measurements legend small{ font-weight:400; color:var(--slate); }
.look-finder__measurements p{ margin:0 0 16px; color:var(--slate); font-size:.92rem; }
.look-finder__measurements>div{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.look-finder button{ grid-column:1/-1; justify-self:start; }
.look-result{ margin-top:28px; padding:28px; background:var(--paper-dim); border-left:4px solid var(--pine); }
.look-result h3{ font-size:clamp(1.5rem,2.5vw,2rem); margin:.35em 0; }
.look-result p{ max-width:70ch; margin:.7em 0; color:var(--slate); }
.look-result__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:22px; }
.look-result__grid>div{ padding:18px; background:var(--card); }
.look-result__grid strong{ color:var(--pine-deep); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.look-result__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.look-note{ max-width:75ch; margin-top:18px; color:var(--slate); font-size:.92rem; }
@media (max-width:1080px){ .look-finder{ grid-template-columns:repeat(2,minmax(0,1fr)); } .look-result__grid{ grid-template-columns:1fr; } }
@media (max-width:700px){ .look-finder,.look-finder__measurements>div{ grid-template-columns:1fr; } }
.fit-layout{ display:grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(28px,5vw,64px); align-items:start; }
.fit-form{ display:grid; grid-template-columns: 1fr 1fr; gap:18px 20px; }
.fit-form label{ display:flex; flex-direction:column; gap:8px; font-family: var(--mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color: var(--slate); }
.fit-form .wide, .fit-form .btn, .fit-form__ok{ grid-column: 1 / -1; }
.fit-form input, .fit-form select, .fit-form textarea{
  font: inherit; font-family: var(--sans); font-size:1rem; letter-spacing:0; text-transform:none; color: var(--ink);
  padding: .85em 1em; border:1px solid rgba(21,24,26,.25); background: var(--card); border-radius:2px;
}
.fit-form input:focus, .fit-form select:focus, .fit-form textarea:focus{ outline:2px solid var(--pine-light); outline-offset:1px; border-color: var(--pine); }
.fit-form .btn{ justify-self:start; }
.fit-form__ok{ color: var(--pine); font-size:.92rem; }
.fit-side{ background: var(--card); border:1px solid rgba(21,24,26,.1); padding: 28px; }
.fit-side h3{ font-size:1.3rem; margin-top:1.2em; }
.fit-side h3:first-child{ margin-top:0; }
.fit-side p{ margin-top:.5em; color: var(--slate); }
@media (max-width: 860px){ .fit-layout{ grid-template-columns: 1fr; } }
@media (max-width: 560px){ .fit-form{ grid-template-columns: 1fr; } }


/* ============================================================
   ONE TYPEFACE — Cormorant Garamond everywhere. Small UI text gets a heavier weight and a larger size
   so it stays legible (Cormorant is light and small on the page compared with a sans).
============================================================ */
.announce{ font-size:.82rem; font-weight:600; letter-spacing:.05em; }
.main-nav a{ font-size:.82rem; font-weight:600; letter-spacing:.08em; }
@media (max-width: 1240px){ .main-nav a{ font-size:.76rem; letter-spacing:.04em; } .main-nav{ gap:14px; } }
.brand small{ font-weight:600; }
.btn{ font-size:.86rem; font-weight:700; letter-spacing:.1em; }
.eyebrow, .sc-eyebrow{ font-weight:700; }
.sc-chip, .sc-count, .sc-colorname{ font-size:.82rem; font-weight:600; letter-spacing:.06em; }
.sc-meta{ font-size:1rem; font-weight:600; }
.sc-sub{ font-size:1.15rem; }
.sc-cta .btn{ font-size:.95rem; font-weight:700; }
.strip__item{ font-size:.88rem; font-weight:600; }
.piece-tag, .product-card__notation, .piece-card__rank, .piece-card__link{ font-size:.78rem; font-weight:600; }
.product-card__price{ font-size:1.05rem; font-weight:700; }
.footer-col h5{ font-size:.85rem; font-weight:700; }
.footer-bottom, .footer-col li, .footer-brand p{ font-size:.92rem; }
.crumbs{ font-weight:600; }
.info-card__n, .steps li::before{ font-size:.85rem; font-weight:700; }
.size-table{ font-size:.98rem; font-weight:500; }
.size-table thead th{ font-size:.8rem; font-weight:700; }
.size-table caption{ font-size:.85rem; }
.fit-form label{ font-size:.82rem; font-weight:700; }
.fit-form input, .fit-form select, .fit-form textarea{ font-size:1.05rem; font-weight:500; }
.newsletter-form input, .newsletter-form button, .newsletter-note{ font-weight:600; }
.faq summary{ font-size:1.35rem; }


/* ============================================================
   MASCOT — "Sir Checkmate" drifts freely around the homepage (js/mascot.js). Small, click-through, under the header.
   Size here must match SIZE() in the script; the script moves the canvas with a transform.
============================================================ */
.mascot-canvas{ position:fixed; left:0; top:0; z-index:45; pointer-events:none; visibility:hidden; will-change:transform; filter: drop-shadow(0 14px 14px rgba(15,24,20,.18)); }


/* ============================================================
   SHOP — sidebar filters, sort, compare tray, quick view + reviews, compare tables  (js/shop.js, tools/shoplib.py)
============================================================ */
[hidden]{ display:none !important; }
.muted{ color: var(--slate); }
.stars{ color: var(--brass); letter-spacing:.06em; }
.shop-bar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding: 6px 0 20px; border-bottom:1px solid rgba(21,24,26,.1); }
.shop-count{ flex:1; font-size:.98rem; color: var(--slate); min-width:12ch; }
.shop-bar .filter-bar__sort{ display:flex; align-items:center; gap:10px; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; color: var(--slate); }
.shop-bar select{ font: inherit; font-size:1rem; letter-spacing:0; text-transform:none; color: var(--ink); background:transparent; border:1px solid rgba(21,24,26,.25); padding:.45em .7em; }
.shop-filter-btn{ display:none; align-items:center; gap:.5em; font: inherit; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.86rem; padding:.7em 1.2em; border:1px solid var(--pine); background:transparent; color: var(--pine); }
.shop-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding: 14px 0 0; min-height:0; }
.shop-chips:empty{ padding:0; }
.chip-btn{ font: inherit; font-size:.95rem; font-weight:600; padding:.35em .9em; border:1px solid rgba(21,24,26,.28); background: var(--card); color: var(--ink); border-radius:99px; transition: background .2s, color .2s, border-color .2s; }
.chip-btn:hover{ border-color: var(--pine); }
.chip-btn.is-on, .chip-btn[aria-pressed="true"]{ background: var(--pine); border-color: var(--pine); color: var(--paper); }
.shop-clear{ font: inherit; font-size:.95rem; font-weight:600; background:none; border:0; color: var(--pine); text-decoration:underline; text-underline-offset:3px; padding:.3em .4em; }
.shop-layout{ display:grid; grid-template-columns: 250px minmax(0,1fr); gap: clamp(24px,3.5vw,52px); padding-top: 26px; align-items:start; }
.shop-filters{ position:sticky; top: 92px; max-height: calc(100vh - 110px); overflow:auto; padding-right:8px; }
.shop-filters__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(21,24,26,.18); font-family: var(--serif); font-size:1.25rem; }
.shop-filters__close, .shop-filters__apply{ display:none; }
.f-group{ border-bottom:1px solid rgba(21,24,26,.12); padding: 14px 0; }
.f-group summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.84rem; }
.f-group summary::-webkit-details-marker{ display:none; }
.f-group summary::after{ content:"+"; color: var(--pine); font-size:1.1rem; line-height:1; }
.f-group[open] summary::after{ content:"\2212"; }
.f-group ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.f-opt{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:1.02rem; }
.f-opt input{ width:16px; height:16px; accent-color: var(--pine); }
.f-opt em{ margin-left:auto; font-style:normal; color: var(--slate); font-size:.9rem; }
.f-opt.is-zero{ opacity:.4; }
.f-dot{ width:18px; height:18px; border-radius:50%; background: var(--c); border:1px solid rgba(21,24,26,.3); flex:none; }
.f-opt--sw input{ position:absolute; opacity:0; pointer-events:none; }
.f-opt--sw input:checked + .f-dot{ box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--pine); }
.f-opt--sw input:focus-visible + .f-dot{ outline:2px solid var(--pine-light); outline-offset:3px; }
.f-opt--sw input:checked ~ span{ font-weight:700; }
.f-price{ display:flex; align-items:end; gap:8px; margin-top:12px; }
.f-price label{ display:grid; gap:4px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); flex:1; }
.f-price input{ width:100%; font: inherit; font-size:1rem; padding:.5em .6em; border:1px solid rgba(21,24,26,.25); background: var(--card); }
.shop-results .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.shop-results .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.shop-empty{ padding: 60px 0; text-align:center; font-size:1.2rem; color: var(--slate); }

/* card additions */
.product-card__frame, .gallery-card__frame{ position:relative; }
.product-card__quick{ background:none; border:0; padding:0; }
.product-card__frame{ cursor:pointer; }
.cmp-toggle{ position:absolute; top:10px; right:10px; z-index:3; font: inherit; font-size:.82rem; font-weight:700; letter-spacing:.06em; padding:.4em .8em; background: rgba(250,248,242,.94); border:1px solid rgba(21,24,26,.25); color: var(--ink); cursor:pointer; transition: background .2s, color .2s; }
.cmp-toggle:hover{ border-color: var(--pine); }
.cmp-toggle[aria-pressed="true"]{ background: var(--pine); color: var(--paper); border-color: var(--pine); }
.is-picked .product-card__frame, .is-picked .gallery-card__frame{ outline:2px solid var(--pine); outline-offset:2px; }
.card-reviews{ margin-top:10px; font: inherit; font-size:.95rem; font-weight:700; color: var(--pine); background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.card-reviews:hover{ color: var(--brass-deep); }

/* compare tray */
.cmp-tray{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:70; width:min(860px, calc(100vw - 24px)); background: var(--pine-deep); color: var(--paper); box-shadow: 0 16px 40px rgba(15,24,20,.35); }
.cmp-tray__in{ display:flex; align-items:center; gap:14px; padding:10px 16px; flex-wrap:wrap; }
.cmp-tray__t{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.84rem; }
.cmp-tray__items{ display:flex; gap:8px; flex:1; flex-wrap:wrap; }
.cmp-chip{ display:inline-flex; align-items:center; gap:8px; background: rgba(250,248,242,.1); padding:4px 8px 4px 4px; font-size:.9rem; }
.cmp-chip img{ width:28px; height:36px; object-fit:cover; object-position:top; }
.cmp-chip em{ font-style:normal; max-width:12ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-chip button{ background:none; border:0; color: inherit; font-size:1.1rem; line-height:1; cursor:pointer; }
.cmp-tray .btn{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
.cmp-tray .btn:disabled{ opacity:.45; pointer-events:none; }
.cmp-clear{ background:none; border:0; color: var(--brass-light); font: inherit; font-size:.9rem; text-decoration:underline; cursor:pointer; }

/* dialogs */
.shop-dialog{ border:0; padding:0; width:min(1040px, 94vw); max-height:92vh; overflow:auto; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(9,26,20,.5); }
.shop-dialog::backdrop{ background: rgba(15,46,34,.6); backdrop-filter: blur(3px); }
.shop-dialog__x{ position:sticky; top:8px; float:right; margin:8px 8px 0 0; z-index:5; width:40px; height:40px; border-radius:50%; border:1px solid rgba(21,24,26,.25); background: var(--card); font-size:1.5rem; line-height:1; cursor:pointer; color: var(--ink); }
.shop-dialog__x:hover{ background: var(--pine); color: var(--paper); border-color: var(--pine); }
.qv{ display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(20px,3vw,44px); padding: clamp(20px,3vw,40px); }
.qv__main{ width:100%; aspect-ratio: 3/4; object-fit:cover; object-position: top; background:#fff; }
.qv__thumbs{ display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; margin-top:8px; }
.qv__thumbs button{ padding:0; border:2px solid transparent; background:none; cursor:pointer; aspect-ratio:1; }
.qv__thumbs button.is-active{ border-color: var(--pine); }
.qv__thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.qv__info h2{ font-size: clamp(2rem, 3.4vw, 3rem); line-height:1; margin-top:.3em; }
.qv__price{ font-family: var(--serif); font-size:1.7rem; font-weight:700; color: var(--burgundy); margin-top:.4em; }
.qv__rating{ margin-top:.4em; font-size:1.05rem; }
.qv__attrs{ margin: 1.2em 0 0; display:grid; gap:0; }
.qv__attrs div{ display:flex; gap:16px; padding:10px 0; border-top:1px solid rgba(21,24,26,.12); }
.qv__attrs dt{ width:7.5em; flex:none; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color: var(--slate); padding-top:.2em; }
.qv__attrs dd{ margin:0; }
.qv__size{ margin-top:1em; color: var(--slate); }
.qv__cta{ margin-top:1.4em; }
.reviews{ grid-column: 1 / -1; border-top:1px solid rgba(21,24,26,.18); padding-top:24px; }
.reviews h3{ font-size:1.8rem; margin-bottom:.6em; }
.rv-summary{ display:grid; grid-template-columns: auto minmax(180px, 280px) 1fr; gap: 28px 40px; align-items:center; }
.rv-score{ display:grid; gap:2px; text-align:center; }
.rv-score b{ font-family: var(--serif); font-size:3.4rem; line-height:1; }
.rv-score small{ color: var(--slate); }
.rv-dist{ display:grid; gap:4px; font-size:.88rem; color: var(--slate); }
.rv-dist div{ display:grid; grid-template-columns: 2.2em 1fr 1.6em; gap:8px; align-items:center; }
.rv-dist i{ height:6px; background: rgba(21,24,26,.1); display:block; }
.rv-dist u{ display:block; height:100%; background: var(--brass); }
.rv-fit h4, .rv-filters h4{ font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; font-family: var(--sans); font-weight:700; }
.rv-fit__bar{ display:flex; height:8px; background: rgba(21,24,26,.1); }
.rv-fit__bar u{ display:block; }
.rv-fit__bar .f0{ background: var(--brass); } .rv-fit__bar .f1{ background: var(--pine); } .rv-fit__bar .f2{ background: var(--burgundy); }
.rv-fit__lbl{ display:flex; justify-content:space-between; gap:8px; font-size:.86rem; color: var(--slate); margin-top:6px; }
.rv-fit__lbl em{ font-style:normal; color: var(--ink); font-weight:700; }
.rv-filters{ margin-top:24px; padding:16px 18px; background: var(--paper-dim); display:grid; gap:10px; }
.rv-fgroup{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rv-fgroup > span{ width:7em; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--slate); }
.rv-bar{ display:flex; justify-content:space-between; align-items:center; margin: 22px 0 6px; padding-bottom:10px; border-bottom:1px solid rgba(21,24,26,.14); font-weight:600; }
.rv-bar select{ font: inherit; margin-left:8px; padding:.3em .5em; border:1px solid rgba(21,24,26,.25); background:transparent; }
.rv-list{ list-style:none; margin:0 0 20px; padding:0; }
.rv{ padding:18px 0; border-bottom:1px solid rgba(21,24,26,.1); }
.rv__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rv__head b{ font-family: var(--serif); font-size:1.25rem; }
.rv__sample{ font-style:normal; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; border:1px dashed rgba(21,24,26,.35); padding:.1em .6em; color: var(--slate); }
.rv p{ margin-top:.5em; max-width:70ch; }
.rv__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:.7em; font-size:.88rem; color: var(--slate); }
.rv__meta span:first-child{ font-weight:700; color: var(--ink); }
.rv__meta time{ margin-left:auto; }
.cmp-title{ padding: 24px clamp(20px,3vw,40px) 0; font-size:2rem; }
.cmp-dialog .table-wrap{ margin: 16px clamp(20px,3vw,40px) 30px; }

/* compare tables (Pawn landing + compare dialog) */
.compare-section{ background: var(--paper-dim); }
.compare-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:1.02rem; }
.compare-table th, .compare-table td{ padding:14px 16px; text-align:center; border-bottom:1px solid rgba(21,24,26,.1); vertical-align:middle; }
.compare-table tbody th[scope="row"]{ text-align:left; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color: var(--slate); white-space:nowrap; }
.compare-table thead th a, .cmp-col{ display:grid; justify-items:center; gap:6px; font-weight:500; }
.compare-table thead img{ width:110px; aspect-ratio: 3/4; object-fit:cover; object-position: top; background:#fff; }
.compare-table thead b{ font-family: var(--serif); font-size:1.3rem; }
.compare-table thead span{ color: var(--burgundy); font-weight:700; }
.compare-table--cards thead span{ color: var(--slate); font-weight:500; font-size:.9rem; }
.cmp-yes{ color: var(--pine); font-weight:700; font-size:1.2rem; }
.cmp-no{ color: rgba(21,24,26,.35); }
.compare-cta td{ border-bottom:0; }
.compare-section .table-wrap{ background: var(--card); }

@media (max-width: 1100px){ .shop-results .product-grid, .shop-results .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px){
  .shop-filter-btn{ display:inline-flex; }
  .shop-layout{ grid-template-columns: minmax(0,1fr); }
  .shop-filters{ position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(88vw, 380px); max-height:none; background: var(--paper); padding:16px 20px 90px; transform: translateX(105%); transition: transform .35s var(--ease); box-shadow: -20px 0 50px rgba(15,24,20,.25); }
  .shop.filters-open .shop-filters{ transform:none; }
  .shop.filters-open::before{ content:""; position:fixed; inset:0; background: rgba(15,46,34,.5); z-index:89; }
  .shop-filters__close{ display:block; background:none; border:0; font-size:1.8rem; line-height:1; cursor:pointer; }
  .shop-filters__apply{ display:block; position:fixed; right:20px; bottom:20px; width: calc(min(88vw, 380px) - 40px); }
  .qv{ grid-template-columns: minmax(0,1fr); }
  .rv-summary{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .shop-results .product-grid, .shop-results .gallery-grid{ grid-template-columns: minmax(0,1fr); }
  .rv-fgroup > span{ width:100%; }
}


/* ============================================================
   DARK HERO — category/product pages match the homepage board hero: dark studio, glossy black-and-white floor,
   ivory + brass type, spotlight and reflection under the figures. (Rest of each page stays ivory for now.)
============================================================ */
.cat-hero{
  color: var(--paper); border-bottom: 1px solid rgba(250,248,242,.1);
  background: radial-gradient(90% 75% at 64% 52%, #15171a 0%, #08090a 58%, #050506 100%);
}
.cat-hero__bg{
  /* the stage: a brightly lit black-and-white chessboard platform in front of the dark room */
  inset:auto -12% 0 -12%; height: 84%; opacity:1;
  background-image: repeating-conic-gradient(#0b0b0c 0% 25%, #f4f0e6 0% 50%); background-size: 120px 120px;
  transform: perspective(820px) rotateX(63deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 62%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to top, #000 62%, rgba(0,0,0,0) 100%);
  filter: brightness(1.08) contrast(1.05);
}
/* spotlight pool on the stage + a cone of light from above onto the models */
.cat-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 40% at 62% 96%, rgba(255,246,226,.42), rgba(255,246,226,0) 72%),
    radial-gradient(38% 100% at 62% -8%, rgba(255,240,214,.2), rgba(255,240,214,0) 70%);
}
/* front lip of the stage: walnut edge with a brass line */
.cat-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14px; z-index:3; pointer-events:none;
  background: linear-gradient(#3a271a, #120b07); border-top:2px solid #d8aa52; box-shadow: 0 -10px 40px rgba(255,236,200,.18);
}
.cat-hero__fade{ background: linear-gradient(180deg, rgba(3,3,4,.6) 0%, rgba(3,3,4,0) 30%), radial-gradient(130% 100% at 60% 55%, transparent 55%, rgba(3,3,4,.5) 100%); }
.cat-hero__inner{ padding-bottom: clamp(74px, 9vw, 124px); }
.cat-hero__copy::before{ background: rgba(6,7,8,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(250,248,242,.08); }
.cat-hero .crumbs{ color: var(--brass-light); }
.cat-hero .crumbs a:hover{ color: var(--paper); }
.cat-hero__glyph{ color: var(--brass-light); }
.cat-hero h1{ color: var(--paper); letter-spacing:-.03em; text-shadow: 0 2px 26px rgba(0,0,0,.6); }
.cat-hero__copy p{ color: rgba(250,248,242,.76); }
.cat-hero__figures::before{ content:""; position:absolute; inset:-6% -4% 0; z-index:0; pointer-events:none; background: radial-gradient(closest-side at 50% 58%, rgba(255,240,214,.2), rgba(255,240,214,0) 72%); }
.cat-hero__figures::after{ background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.6), rgba(0,0,0,0) 68%); bottom:-10px; height:28px; }
.cat-hero__figures img{
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(255,240,214,.07));
  -webkit-box-reflect: below 0 linear-gradient(transparent 58%, rgba(255,255,255,.22));
}
.cat-hero__figures--single, .cat-hero__figures--objects{ margin-bottom: -52px; }
.cat-hero__figures--objects{ padding-bottom: 6px; padding-top: 0; }
.cat-hero__figures--glyph{ color: var(--paper); }
.cat-hero__figures--glyph svg{ opacity:.1; }
.cat-hero__figures--glyph::before{ display:none; }
@media (max-width: 900px){ .cat-hero__inner{ padding-bottom: 70px; } .cat-hero__bg{ height:40%; } }

/* The film is the entire opening scene; category copy lives immediately below it. */
.cat-hero--film{
  height:calc(100svh - 36px); min-height:580px; margin-top:calc(0px - var(--hdr-h,73px)); padding:0;
  background:var(--paper); border:0;
}
.cat-hero--film::before,.cat-hero--film::after{ display:none; }
.cat-hero--film .cat-hero__film{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.cat-hero--film video{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; background:var(--paper); }
.cat-hero__film-toggle{
  position:absolute; right:clamp(20px,5vw,64px); bottom:clamp(20px,4vw,42px); z-index:2; min-height:42px;
  padding:9px 16px; border:1px solid rgba(15,46,34,.26);
  background:rgba(250,248,242,.92); color:var(--pine); font-family:"Jost",sans-serif;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
}
.cat-hero__film-toggle:hover,.cat-hero__film-toggle:focus-visible{ background:var(--paper); border-color:var(--pine); }
.cat-hero__film-toggle[hidden]{ display:none; }
.cat-intro{ background:var(--paper); border-bottom:1px solid rgba(21,24,26,.12); }
.cat-intro__inner{
  max-width:var(--container); margin:auto; padding:clamp(50px,6vw,86px) var(--gutter);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(36px,8vw,124px); align-items:end;
}
.cat-intro .crumbs{
  margin:0 0 22px; color:var(--pine); font-family:"Jost",sans-serif;
  font-size:.68rem; font-weight:500; letter-spacing:.18em;
}
.cat-intro .crumbs a:hover{ color:var(--brass-deep); }
.cat-intro__eyebrow{
  display:block; margin-bottom:12px; color:var(--brass-deep);
  font-family:"Jost",sans-serif; font-size:.7rem; font-weight:600;
  letter-spacing:.23em; text-transform:uppercase;
}
.cat-intro h1{
  max-width:11ch; color:var(--pine-deep); font-family:var(--serif);
  font-size:clamp(3.2rem,6.5vw,6rem); font-weight:500;
  letter-spacing:-.055em; line-height:.94;
}
.cat-intro__aside{ padding-bottom:5px; }
.cat-intro__aside p{
  max-width:42ch; color:var(--slate); font-family:"Jost",sans-serif;
  font-size:clamp(.95rem,1.25vw,1.08rem); font-weight:400; line-height:1.7;
}
.cat-intro__aside a{
  display:inline-flex; gap:20px; align-items:center; margin-top:26px; padding-bottom:7px;
  border-bottom:1px solid var(--pine); color:var(--pine);
  font-family:"Jost",sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.cat-intro__aside a:hover{ color:var(--brass-deep); border-color:var(--brass-deep); }
@media (min-width:901px){ .cat-hero--film video{ transform:scale(1.06); transform-origin:left center; } }
@media (max-width:900px){
  .cat-intro__inner{ grid-template-columns:1fr; gap:24px; }
  .cat-intro h1{ max-width:15ch; }
}
@media (max-width:600px){
  .cat-hero--film{ min-height:520px; }
  .cat-intro__inner{ padding-top:44px; padding-bottom:50px; }
  .cat-intro h1{ font-size:clamp(3.1rem,12vw,4.2rem); }
}


/* ============================================================
   BAG + CHECKOUT — header badge, slide-out bag, size options, quick add, checkout preview (js/cart.js, js/checkout.js)
============================================================ */
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.bag-count{
  position:absolute; top:-8px; right:-10px; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background: var(--pine); color: var(--paper);
  font-size:.66rem; font-weight:700; line-height:17px; text-align:center; letter-spacing:0; pointer-events:none;
}
.bag-count[hidden]{ display:none; }
body.bag-open{ overflow:hidden; }
.bag-overlay{ position:fixed; inset:0; z-index:400; background: rgba(6,7,8,.55); opacity:0; transition: opacity .3s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.bag-overlay.is-on{ opacity:1; }
.bag{
  position:fixed; top:0; right:0; bottom:0; z-index:401; width:min(440px, 100vw); background: var(--paper); color: var(--ink);
  display:flex; flex-direction:column; transform: translateX(104%); visibility:hidden; box-shadow:none;
  transition: transform .38s var(--ease), visibility 0s linear .38s, box-shadow .38s;
}
.bag.is-open{ transform:none; visibility:visible; box-shadow: -24px 0 60px rgba(0,0,0,.35); transition-delay: 0s; }
.bag__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid rgba(21,24,26,.12); }
.bag__head h2{ font-size:1.7rem; }
.bag__n{ color: var(--slate); font-weight:500; }
.bag__x{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(21,24,26,.25); background:transparent; font-size:1.5rem; line-height:1; cursor:pointer; color: var(--ink); }
.bag__x:hover{ background: var(--pine); color: var(--paper); border-color: var(--pine); }
.bag__ship{ padding:14px 24px 12px; font-size:.98rem; background: var(--paper-dim); }
.bag__ship b{ color: var(--pine); }
.bag__meter{ display:block; height:4px; margin-top:8px; background: rgba(21,24,26,.12); }
.bag__meter u{ display:block; height:100%; background: var(--brass); transition: width .4s var(--ease); }
.bag__list{ list-style:none; margin:0; padding:6px 24px; overflow:auto; flex:1; }
.bag__item{ display:grid; grid-template-columns: 72px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid rgba(21,24,26,.1); }
.bag__item.is-new{ animation: bagNew 1.1s ease; }
@keyframes bagNew{ 0%{ background: rgba(216,170,82,.28); } 100%{ background: transparent; } }
.bag__item img{ width:72px; height:96px; object-fit:cover; object-position: top; background:#fff; }
.bag__info b{ display:block; font-family: var(--serif); font-size:1.2rem; line-height:1.1; }
.bag__info span, .bag__info em{ display:block; font-size:.9rem; color: var(--slate); font-style:normal; }
.bag__qty{ display:inline-flex; align-items:center; margin-top:8px; border:1px solid rgba(21,24,26,.22); }
.bag__qty button{ width:30px; height:30px; border:0; background:transparent; font-size:1.1rem; cursor:pointer; color: var(--ink); }
.bag__qty button:hover{ background: var(--pine); color: var(--paper); }
.bag__qty span{ min-width:28px; text-align:center; font-weight:700; }
.bag__side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.bag__side b{ font-size:1.05rem; }
.bag__rm, .co-rm{ background:none; border:0; padding:0; font: inherit; font-size:.88rem; color: var(--slate); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.bag__rm:hover, .co-rm:hover{ color: var(--burgundy); }
.bag__empty{ padding:40px 24px; }
.bag__empty p:first-child{ font-family: var(--serif); font-size:1.7rem; }
.bag__links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.bag__foot{ padding:18px 24px 22px; border-top:1px solid rgba(21,24,26,.14); background: var(--card); }
.bag__row{ display:flex; justify-content:space-between; font-size:1.15rem; }
.bag__row--disc{ font-size:.98rem; color: var(--burgundy); margin-top:2px; }
.bag__note{ margin:.4em 0 1em; font-size:.88rem; color: var(--slate); }
.bag__enquire{ width:100%; text-align:center; }
.bag__checkout{ display:block; width:100%; margin-top:12px; text-align:center; color:var(--pine); text-decoration:underline; text-underline-offset:3px; }
.bag__continue{ display:block; margin:12px auto 0; background:none; border:0; font: inherit; color: var(--pine); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.bag[hidden], .bag__foot[hidden], .bag__list[hidden], .bag__ship[hidden], .bag__empty[hidden], .bag__promo[hidden]{ display:none; }
.bag__promo{ padding:12px 24px; font-size:.92rem; background: var(--paper-dim); border-top:1px solid rgba(21,24,26,.08); display:flex; flex-direction:column; gap:6px; }
.bag__promo b{ color: var(--pine); }

/* quick add (Bishop / Rook cards) + Quick View options */
.quick-add{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 2px 0; }
.quick-add__size{ font: inherit; font-size:.98rem; padding:.45em .6em; border:1px solid rgba(21,24,26,.25); background: var(--card); color: var(--ink); }
.quick-add__msg{ font-size:.86rem; color: var(--burgundy); }
.qv__opts{ margin-top:1.1em; display:grid; gap:14px; }
.qv-opt{ border:0; padding:0; margin:0; min-width:0; }
.qv-opt legend{ padding:0; margin-bottom:8px; font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); }
.qv-opt__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.qv-opt .chip-btn{ min-width:46px; border-radius:2px; }
.qv-opt.shake{ animation: coShake .4s ease; }
@keyframes coShake{ 0%,100%{ transform:none; } 25%{ transform: translateX(-5px); } 75%{ transform: translateX(5px); } }
.qv__msg{ min-height:1.3em; margin-top:.8em; color: var(--burgundy); font-weight:600; }
.qv__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* checkout */
.co{ background: var(--paper); padding: clamp(28px,4vw,56px) 0 clamp(50px,7vw,90px); }
.co-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.co h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height:1; margin-top:.25em; letter-spacing:-.03em; }
.co-steps{ list-style:none; margin:0; padding:0; display:flex; gap:6px 18px; flex-wrap:wrap; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color: rgba(21,24,26,.4); }
.co-steps li{ display:flex; align-items:center; gap:8px; }
.co-steps li::before{ content:""; width:9px; height:9px; border:1px solid currentColor; transform: rotate(45deg); }
.co-steps li.is-on{ color: var(--ink); } .co-steps li.is-on::before{ background: var(--brass); border-color: var(--brass); }
.co-steps li.is-done{ color: var(--pine); } .co-steps li.is-done::before{ background: var(--pine); border-color: var(--pine); }
.co-steps a:hover{ text-decoration:underline; }
.co-banner{ background: var(--pine-mist); border:1px solid rgba(30,77,59,.25); padding:12px 16px; margin: 0 0 26px; font-size:1rem; }
.co-grid{ display:grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,1fr); gap: clamp(24px,4vw,56px); align-items:start; }
.co-grid[hidden], .co-empty[hidden], .co-done[hidden]{ display:none; }
.co-card{ background: var(--card); border:1px solid rgba(21,24,26,.1); padding: clamp(18px,2.4vw,30px); margin-bottom:18px; }
.co-card h2{ font-size:1.6rem; display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.co-card h2 span{ width:28px; height:28px; border-radius:50%; background: var(--ink); color: var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; font-family: var(--sans); font-weight:700; }
.co-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.co-row--3{ grid-template-columns: 1.4fr .8fr 1fr; }
.co-field{ margin-bottom:14px; position:relative; }
.co-field label{ display:block; margin-bottom:6px; font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color: var(--slate); }
.co-field label em{ font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; }
.co-field input, .co-field select{
  width:100%; font: inherit; font-size:1.08rem; padding:.8em .9em; border:1px solid rgba(21,24,26,.28); background: var(--paper); color: var(--ink); border-radius:2px;
  transition: border-color .2s, box-shadow .2s;
}
.co-field input:focus, .co-field select:focus{ outline:none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(79,139,113,.25); }
.co-field.is-bad input, .co-field.is-bad select{ border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(122,32,54,.12); }
.co-field.is-ok input, .co-field.is-ok select{ border-color: rgba(30,77,59,.6); }
.co-err{ display:block; min-height:0; margin-top:5px; color: var(--burgundy); font-size:.9rem; font-weight:600; }
.co-hint{ display:block; margin-top:5px; color: var(--slate); font-size:.86rem; }
.co-wide{ grid-column: 1 / -1; }
.co-options{ display:grid; gap:10px; }
.co-opt{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid rgba(21,24,26,.25); cursor:pointer; background: var(--paper); transition: border-color .2s, background .2s; }
.co-opt:has(input:checked){ border-color: var(--pine); background: var(--pine-mist); }
.co-opt input{ accent-color: var(--pine); width:18px; height:18px; flex:none; }
.co-opt span{ flex:1; } .co-opt b{ display:block; font-size:1.08rem; } .co-opt small{ display:block; color: var(--slate); font-size:.9rem; } .co-opt em{ font-style:normal; font-weight:700; }
.co-note{ margin-top:14px; padding:12px 14px; background: var(--paper-dim); border-left:3px solid var(--brass); font-size:.98rem; }
.co-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; }
.co-place{ min-width:260px; }
.co-error-summary{ margin-top:14px; color: var(--burgundy); font-weight:700; }
.co-summary{ position:sticky; top:96px; background: var(--card); border:1px solid rgba(21,24,26,.12); padding: clamp(18px,2.4vw,28px); }
.co-summary h2{ font-size:1.6rem; margin-bottom:14px; }
.co-items{ list-style:none; margin:0; padding:0; }
.co-items li{ display:grid; grid-template-columns: 64px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid rgba(21,24,26,.1); align-items:start; }
.co-thumb{ position:relative; }
.co-thumb img{ width:64px; height:84px; object-fit:cover; object-position:top; background:#fff; display:block; }
.co-thumb span{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background: var(--ink); color: var(--paper); font-size:.72rem; font-weight:700; line-height:20px; text-align:center; }
.co-item b{ display:block; font-family: var(--serif); font-size:1.15rem; line-height:1.1; } .co-item small{ display:block; color: var(--slate); font-size:.88rem; }
.co-qty{ display:flex; align-items:center; gap:2px; margin-top:8px; }
.co-qty button:not(.co-rm){ width:26px; height:26px; border:1px solid rgba(21,24,26,.22); background:transparent; cursor:pointer; color: var(--ink); }
.co-qty button:not(.co-rm):hover{ background: var(--pine); color: var(--paper); border-color: var(--pine); }
.co-qty span{ min-width:26px; text-align:center; font-weight:700; } .co-qty .co-rm{ margin-left:12px; }
.co-price{ font-size:1.05rem; }
.co-promo{ display:flex; gap:8px; margin-top:16px; }
.co-promo input{ flex:1; min-width:0; font: inherit; font-size:1rem; padding:.65em .8em; border:1px solid rgba(21,24,26,.28); background: var(--paper); text-transform:uppercase; }
.co-promo-msg{ min-height:1.2em; margin-top:6px; font-size:.9rem; } .co-promo-msg.is-ok{ color: var(--pine); font-weight:700; } .co-promo-msg.is-bad{ color: var(--burgundy); font-weight:700; }
.co-totals{ margin:14px 0 0; }
.co-totals div{ display:flex; justify-content:space-between; padding:6px 0; }
.co-totals dt{ color: var(--slate); } .co-totals dd{ margin:0; font-weight:600; }
.co-total{ margin-top:6px; padding-top:12px !important; border-top:1px solid rgba(21,24,26,.2); font-size:1.35rem; } .co-total dt, .co-total dd{ color: var(--ink); font-weight:700; }
.co-fine{ margin-top:12px; font-size:.82rem; color: var(--slate); }
.co-empty{ text-align:center; padding: clamp(50px,9vw,110px) 0; } .co-empty h2{ font-size:2.4rem; } .co-empty p{ margin-top:.8em; }
.co-done__card{ max-width:900px; margin:0 auto; background: var(--card); border:1px solid rgba(21,24,26,.12); padding: clamp(22px,4vw,48px); }
.co-done__card h2{ font-size: clamp(1.8rem,3.2vw,2.6rem); margin-top:.3em; }
.co-done__no{ margin-top:12px; letter-spacing:.06em; }
.co-done__cols{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,4vw,48px); margin-top:24px; }
.co-done__cols h3{ font-size:1.25rem; margin:16px 0 6px; } .co-done__cols h3:first-child{ margin-top:0; }
.co-done__list{ list-style:none; margin:0; padding:0; } .co-done__list li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(21,24,26,.1); } .co-done__list small{ color: var(--slate); }
.co-done__actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
@media (max-width: 900px){
  .co-grid{ grid-template-columns: minmax(0,1fr); }
  .co-summary{ position:static; order:-1; }
  .co-done__cols{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){ .co-row, .co-row--3{ grid-template-columns: 1fr; } .co-place{ width:100%; } .bag__item{ grid-template-columns: 60px 1fr auto; } }

/* ============================================================
   HEADER + CATEGORY MEGA MENU + MOBILE MENU + SEARCH  (js/nav.js — data from js/search-index.js)
============================================================ */
:root{ --hdr-h:73px; }
@media (max-width:640px){ :root{ --hdr-h:64px; } }
.site-header, .site-header.solid{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  height:var(--hdr-h); padding:0 var(--gutter);
}
.hdr-left{ display:flex; align-items:center; gap:4px; justify-self:start; cursor:pointer; }
.hdr-menu-label{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; min-width:3.7em; user-select:none; }
.site-header .brand{ justify-self:center; }
.site-header .brand img{ width:clamp(150px,15vw,214px); }
.header-actions{ justify-self:end; display:flex; align-items:center; gap:2px; }
.icon-btn{ width:44px; height:44px; display:grid; place-items:center; opacity:1; border-radius:50%; position:relative; transition:background .25s, color .25s; }
.icon-btn svg{ width:22px; height:22px; display:block; }
.icon-btn:hover{ background:rgba(30,77,59,.09); color:var(--pine); }
.icon-btn:focus-visible, .McButton:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.header-actions .icon-btn.search-ic{ display:grid; }
.bag-count{ top:3px; right:1px; }
.hdr-cta{
  margin-right:12px; padding:.62em 1.15em; background:var(--pine-deep); color:var(--paper); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--pine-deep); transition:background .3s, color .3s, border-color .3s; white-space:nowrap;
}
.hdr-cta:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
@media (max-width:860px){ .hdr-cta{ display:none; } }
@media (max-width:480px){ .hdr-menu-label{ display:none; } .site-header .brand img{ width:142px; } .site-header, .site-header.solid{ padding:0 10px; gap:4px; } }

/* hamburger — three bars become an X, the middle bar slides out */
.McButton{ display:block; position:relative; width:44px; height:44px; cursor:pointer; border-radius:50%; -webkit-tap-highlight-color:transparent; color:var(--ink); }
.McButton::before{ content:""; position:absolute; inset:3px; border:1px solid var(--brass); border-radius:50%; transform:scale(.4); opacity:0; transition:transform .45s var(--ease), opacity .3s; }
.McButton b{ position:absolute; left:11px; height:2px; border-radius:2px; background:currentColor; transform-origin:center; transition:transform .45s var(--ease), width .35s var(--ease), top .35s var(--ease), opacity .25s, background .3s; }
.McButton b:nth-child(1){ top:15px; width:22px; }
.McButton b:nth-child(2){ top:21px; width:14px; }
.McButton b:nth-child(3){ top:27px; width:22px; }
.McButton:hover b:nth-child(2), .hdr-left:hover .McButton b:nth-child(2){ width:22px; }
.McButton:hover b:nth-child(1), .hdr-left:hover .McButton b:nth-child(1){ width:14px; }
.McButton.is-open::before{ transform:scale(1); opacity:1; }
.McButton.is-open b:nth-child(1){ top:21px; width:22px; transform:rotate(45deg); }
.McButton.is-open b:nth-child(2){ width:0; opacity:0; transform:translateX(10px); }
.McButton.is-open b:nth-child(3){ top:21px; width:22px; transform:rotate(-45deg); }


body.nav-open, body.search-open{ overflow:hidden; }
body.nav-open .site-header{ z-index:95; }
.visually-hidden-nav{ position:absolute; }

/* category links across the header (desktop) */
.hdr-left{ height:100%; }
.main-nav{ display:none; }
.McButton, .hdr-menu-label{ display:block; }
@media (min-width:1240px){
  .McButton, .hdr-menu-label{ display:none; }
  .main-nav{ display:flex; align-self:stretch; gap:clamp(14px,1.5vw,26px); }
  .site-header .brand img{ width:clamp(150px,12vw,190px); }
}
.main-nav a{
  position:relative; display:flex; align-items:center; height:100%; padding:0 1px; border-bottom:3px solid transparent;
  font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:var(--ink); white-space:nowrap; transition:border-color .2s;
}
.main-nav a::after{ display:none; }
.main-nav a:hover, .main-nav a.is-hover, .main-nav a:focus-visible, .main-nav a[aria-current="page"]{ border-bottom-color:var(--ink); color:var(--ink); outline:none; }

/* the hover panel */
.mega-scrim{ position:fixed; left:0; right:0; bottom:0; top:73px; z-index:40; background:rgba(15,20,18,.34); opacity:0; pointer-events:none; transition:opacity .25s; }
.mega-scrim.is-on{ opacity:1; }
.mega{
  position:absolute; left:0; right:0; top:100%; z-index:60; background:#fff; color:var(--ink); border-top:1px solid #e4e1d8;
  box-shadow:0 30px 40px -24px rgba(15,20,18,.28); max-height:calc(100vh - var(--hdr-h) - 12px); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .28s var(--ease), visibility 0s linear .28s;
}
.mega.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mega[hidden], .mega-scrim[hidden]{ display:none; }
.mega__in{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); padding-left:var(--gutter); }
.mega__in--swap{ animation:megaSwap .3s var(--ease) both; }
@keyframes megaSwap{ from{ opacity:.0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.mega__cols{ display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); }
.mega__col{ padding:34px 22px 26px; border-right:1px solid #e4e1d8; }
.mega__col:first-child{ padding-left:0; }
.mega__col h4{ margin:0 0 18px; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink); }
.mega__list a{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:1.08rem; font-weight:600; line-height:1.25; color:var(--ink); }
.mega__list a:hover span, .mega__list a:hover b{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.mega__list em, .tag{ margin-left:auto; flex:none; white-space:nowrap; font-style:normal; font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--slate); }
.tag--deal, .tag--soon{ margin-left:8px; text-transform:uppercase; font-size:.68rem; letter-spacing:.12em; }
.tag--deal{ color:var(--burgundy); } .tag--soon{ padding:.15em .6em; border-radius:99px; background:var(--paper-dim); color:var(--slate); border:1px solid rgba(21,24,26,.2); }
.mega__item{ align-items:flex-start !important; gap:10px !important; padding:6px 0 !important; }
.mega__item img{ width:38px; height:44px; object-fit:contain; background:var(--paper-dim); flex:none; }
.mega__item span{ display:flex; flex-direction:column; line-height:1.2; min-width:0; } .mega__item b{ font-size:1.02rem; font-weight:700; } .mega__item i{ font-style:normal; font-size:.88rem; font-weight:500; color:var(--slate); }
.mega__item em{ margin:2px 0 0; color:var(--burgundy); font-size:.9rem; }
.mega__sw{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px 8px; }
.mega__sw a{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.95rem; font-weight:600; color:var(--ink); }
.mega__sw i{ display:block; width:42px; height:42px; border-radius:50%; background:var(--c); border:1px solid rgba(21,24,26,.22); box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); transition:transform .25s var(--ease), box-shadow .25s; }
.mega__sw a:hover i{ transform:scale(1.1); box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--ink); } .mega__sw a:hover span{ text-decoration:underline; text-underline-offset:3px; }
.mega__wait{ font-size:.95rem; color:var(--slate); }
.mega__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:34px var(--gutter) 26px 26px; align-content:start; }
.mega__tile{ display:flex; flex-direction:column; color:var(--ink); }
.mega__img{ display:block; aspect-ratio:1/1; overflow:hidden; background:var(--paper-dim); }
.mega__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; transition:transform .7s var(--ease); }
.mega__tile:hover .mega__img img{ transform:scale(1.05); }
.mega__tile b{ margin-top:12px; font-size:1.2rem; font-weight:700; line-height:1.2; }
.mega__tile > span:not(.mega__img):not(.mega__note){ margin-top:4px; font-size:1.02rem; font-weight:500; line-height:1.35; color:#3b3f37; }
.mega__tile u{ margin-top:auto; padding-top:12px; font-size:1rem; font-weight:700; text-underline-offset:4px; }
.mega__tile:hover u{ color:var(--pine); }
.mega__tile--note{ border:1px solid #d9d6cd; padding:22px 20px; background:var(--paper); justify-content:flex-start; }
.mega__note{ display:flex; flex-direction:column; gap:8px; } .mega__tile--note b{ margin-top:0; font-size:1.35rem; } .mega__note span{ font-size:1.05rem; font-weight:500; line-height:1.4; color:#3b3f37; }
.mega__help{ display:flex; align-items:center; gap:10px 26px; flex-wrap:wrap; padding:15px var(--gutter); border-top:1px solid #e4e1d8; background:var(--paper); font-size:1.02rem; font-weight:600; }
.mega__brand{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--brass-deep); }
.mega__help a{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; } .mega__help a:hover{ color:var(--pine); }
.mega__all{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; text-decoration:none !important; } .mega__all svg{ transition:transform .25s var(--ease); } .mega__all:hover svg{ transform:translateX(4px); }
@media (min-width:1240px) and (max-height:760px){ .mega__img{ aspect-ratio:4/3; } .mega__col{ padding-top:26px; } .mega__tiles{ padding-top:26px; } }
@media (max-width:1239px){ .mega, .mega-scrim{ display:none !important; } }
.product-card{ scroll-margin-top:calc(var(--hdr-h) + 24px); }

/* hamburger menu (phones + tablets) */
.menu-scrim{ position:fixed; left:0; right:0; bottom:0; top:var(--menu-top,64px); z-index:85; background:rgba(15,20,18,.45); opacity:0; transition:opacity .35s; }
.menu-scrim.is-on{ opacity:1; }
.menu{
  position:fixed; left:0; right:0; top:var(--menu-top,64px); bottom:0; z-index:90; display:flex; flex-direction:column; outline:none; background:#fff; color:var(--ink);
  border-top:1px solid #e4e1d8; transform:translateY(-14px); opacity:0; transition:transform .38s var(--ease), opacity .3s;
}
.menu.is-open{ transform:none; opacity:1; }
.menu[hidden], .menu-scrim[hidden], .search[hidden], .menu [hidden]{ display:none; }
@media (min-width:1240px){ .menu, .menu-scrim{ display:none !important; } }
.menu__scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.menu-search{ display:flex; align-items:center; gap:10px; margin:16px var(--gutter); padding:0 18px; height:50px; background:#fff; border:1.5px solid var(--ink); border-radius:999px; transition:box-shadow .25s; }
.menu-search:focus-within{ box-shadow:0 0 0 4px rgba(173,127,60,.28); } .menu-search svg{ flex:none; color:var(--ink); }
.menu-search input{ flex:1; min-width:0; height:100%; border:0; background:none; outline:none; font:inherit; font-size:1.1rem; font-weight:600; color:var(--ink); }
.menu-search input::placeholder{ color:#6a6e66; font-weight:500; } .menu-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.acc{ list-style:none; margin:0; padding:0; border-top:1px solid #e4e1d8; }
.acc-row{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; padding:0 var(--gutter); background:none; border:0; border-bottom:1px solid #e4e1d8; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.acc-row b{ font-size:1.12rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; } .acc-row i{ display:block; margin-top:1px; font-style:normal; font-size:.9rem; font-weight:500; color:var(--slate); }
.acc-row svg{ flex:none; transition:transform .3s var(--ease); } .acc-row[aria-expanded="true"] svg{ transform:rotate(45deg); }
.acc-row[aria-expanded="true"]{ background:var(--paper); }
.acc-panel{ padding:4px var(--gutter) 20px; background:var(--paper); border-bottom:1px solid #e4e1d8; }
.acc-all{ display:flex; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid #e4e1d8; font-size:1.15rem; font-weight:700; }
.acc-all em{ margin-left:auto; font-style:normal; font-size:.9rem; font-weight:600; color:var(--slate); }
.acc-sec .mega__list em{ font-size:.9rem; font-weight:600; color:var(--slate); text-align:right; }
.acc-sec h4{ margin:18px 0 6px; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.acc-sec .mega__list a{ min-height:42px; font-size:1.1rem; } .acc-sec .mega__list i{ font-style:normal; font-weight:500; color:var(--slate); font-size:.95rem; }
.acc-sec .mega__sw{ grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); }
.menu__help{ margin:22px var(--gutter) 28px; padding:20px; background:var(--paper); border:1px solid #e4e1d8; }
.menu__help b{ font-size:1.2rem; } .menu__help p{ margin:4px 0 14px; font-size:1.05rem; color:#3b3f37; }
.menu__help div{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; } .menu__help a:not(.menu__cta){ font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.menu__cta{ padding:.7em 1.3em; background:var(--ink); color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; }
.menu__results{ padding:6px var(--gutter) 30px; }
/* search results (shared by the menu and the overlay) */
.sr-h{ margin:22px 0 10px; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--brass-deep); } .sr-h:first-child{ margin-top:0; } .sr-h em{ font-style:normal; color:var(--slate); }
.sr-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.sr-item{ display:flex; align-items:center; gap:14px; padding:10px 14px 10px 10px; background:#fff; border:1.5px solid rgba(21,24,26,.14); transition:border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.sr-item:hover, .sr-item.is-active{ border-color:var(--pine); transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,46,34,.12); }
.sr-item img{ width:56px; height:64px; object-fit:cover; object-position:50% 12%; background:var(--paper-dim); flex:none; }
.sr-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; } .sr-txt b{ font-size:1.12rem; } .sr-txt i{ font-style:normal; font-size:.95rem; font-weight:500; color:var(--slate); }
.sr-price{ margin-left:auto; font-weight:700; color:var(--burgundy); }
.sr-item--page{ padding:14px; } .sr-ic{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--pine-mist); color:var(--pine); flex:none; }
.sr-item mark, .sr-txt mark{ background:rgba(217,184,118,.5); color:inherit; padding:0 1px; }
.sr-more{ margin-top:10px; font-size:.95rem; color:var(--slate); }
.sr-empty{ padding:10px 0; font-size:1.15rem; } .sr-empty p + p{ margin-top:8px; } .sr-empty button{ background:none; border:0; font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; color:var(--pine); padding:0; } .sr-empty a{ font-weight:700; color:var(--pine); text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:4px; }
.sr-chips{ display:flex; flex-wrap:wrap; gap:8px; } .sr-chips button, .sr-chips a{ min-height:40px; display:inline-flex; align-items:center; gap:6px; padding:.45em 1em; background:#fff; border:1.5px solid rgba(21,24,26,.8); border-radius:999px; font:inherit; font-size:1rem; font-weight:700; transition:background .2s, color .2s; } .sr-chips button:hover, .sr-chips a:hover{ background:var(--pine-deep); color:var(--paper); border-color:var(--pine-deep); } .sr-chips i{ font-style:normal; font-weight:500; opacity:.7; }

/* search overlay */
.search{ position:fixed; inset:0; z-index:300; }
.search__scrim{ position:absolute; inset:0; background:rgba(9,26,20,.62); opacity:0; transition:opacity .35s; }
.search__sheet{ position:relative; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; background:var(--paper); padding:22px var(--gutter) 34px; transform:translateY(-102%); transition:transform .45s var(--ease); box-shadow:0 30px 70px rgba(9,26,20,.4); border-bottom:14px solid transparent; border-image:repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%) 0 0 14 0 / 0 0 14px 0 / 0 round; }
.search.is-open .search__scrim{ opacity:1; } .search.is-open .search__sheet{ transform:none; }
.search__form{ display:flex; align-items:center; gap:14px; max-width:980px; margin:0 auto; padding-bottom:14px; border-bottom:2px solid var(--ink); }
.search__form svg{ color:var(--pine); flex:none; width:28px; height:28px; }
.search__form input{ flex:1; min-width:0; border:0; background:none; outline:none; font:inherit; font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:600; color:var(--ink); }
.search__form input::placeholder{ color:#7a7e75; font-weight:500; } .search__form input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.search__x{ background:none; border:0; padding:8px; cursor:pointer; }
.search__res{ max-width:980px; margin:22px auto 0; }


@media (prefers-reduced-motion:reduce){ .menu, .mega, .search__sheet, .McButton b, .McButton::before{ transition-duration:.01s; } .mega__in--swap{ animation:none; } }
@media (max-width:980px){ .sr-list{ grid-template-columns:1fr; } }
@media (max-width:560px){ .search__sheet{ padding-top:14px; } }
@media (max-width:480px){ .hdr-menu-label{ display:none; } }

/* ============================================================
   ANTONIO UOMO SECTION — brand page, product-type pages, product detail pages (tools/gen_antonio.py, js/product.js)
============================================================ */
.au-card{ display:block; color:inherit; }
.au-card__img{ display:block; aspect-ratio:2/3; overflow:hidden; background:var(--paper-dim); border:1px solid rgba(21,24,26,.08); }
.au-card__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 10%; transition:transform .6s var(--ease); }
.au-card:hover .au-card__img img{ transform:scale(1.05); }
.au-card:hover h4{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.au-types{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:clamp(16px,2vw,26px); margin:30px 0 clamp(48px,6vw,80px); }
.au-type{ display:flex; flex-direction:column; gap:6px; color:inherit; }
.au-type__img{ display:block; aspect-ratio:2/3; overflow:hidden; background:var(--paper-dim); border:1px solid rgba(21,24,26,.08); margin-bottom:6px; }
.au-type__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 10%; transition:transform .6s var(--ease); }
.au-type:hover .au-type__img img{ transform:scale(1.05); }
.au-type b{ font-size:1.25rem; font-family:var(--serif); line-height:1.2; }
.au-type span:not(.au-type__img){ font-size:1rem; font-weight:500; line-height:1.35; color:#3b3f37; }
.au-type em{ font-style:normal; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--pine); margin-top:auto; padding-top:4px; }

/* simple size chart */
.au-size{ width:100%; border-collapse:collapse; font-size:1rem; min-width:620px; background:#fff; }
.au-size caption{ caption-side:bottom; text-align:left; padding:12px 14px; font-size:.85rem; color:var(--slate); border-top:1px dashed rgba(21,24,26,.2); }
.au-size th, .au-size td{ padding:10px 12px; text-align:center; border-bottom:1px solid rgba(21,24,26,.08); }
.au-size thead th{ background:var(--pine-deep); color:var(--paper); font-weight:700; line-height:1.15; }
.au-size thead th b{ display:block; font-size:1rem; letter-spacing:.06em; } .au-size thead th span{ display:block; font-size:.8rem; font-weight:500; opacity:.8; }
.au-size tbody th[scope="row"]{ text-align:left; font-weight:700; }
.au-size__group th{ text-align:left; background:var(--pine-mist); color:var(--pine-deep); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; padding:7px 12px; }
.au-size tbody tr:not(.au-size__group):nth-child(even){ background:rgba(21,24,26,.025); }
.au-size__note{ margin-top:14px; padding:12px 14px; background:#fff; border-left:3px solid var(--brass); font-size:1rem; }
.au-how{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 22px; }
.au-how li{ display:flex; flex-direction:column; font-size:1rem; line-height:1.35; } .au-how b{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; }
.au-size__note + p, p.au-size__note{ font-size:1rem; }

/* product detail page */
.pdp{ padding:20px 0 30px; background:var(--paper); }
.crumbs--light{ color:var(--slate); margin-bottom:16px; flex-wrap:wrap; }
.crumbs--light a:hover{ color:var(--pine); text-decoration:underline; text-underline-offset:3px; }
.crumbs--light span:last-child{ color:var(--ink); }
.pdp__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,64px); align-items:start; }
.pdp-gallery{ position:sticky; top:calc(var(--hdr-h) + 20px); }
.pdp-main{ --r:.667; aspect-ratio:var(--r); width:min(100%, calc((100vh - var(--hdr-h) - 175px) * var(--r))); margin:0 auto; overflow:hidden; background:none; }
.pdp-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumbs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.pdp-thumb{ width:64px; height:64px; padding:0; border:2px solid transparent; background:var(--paper-dim); cursor:pointer; opacity:.75; transition:opacity .2s, border-color .2s; }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumb:hover, .pdp-thumb.is-active{ opacity:1; } .pdp-thumb.is-active{ border-color:var(--ink); }
.pdp-info h1{ font-size:clamp(1.9rem,3.2vw,2.8rem); letter-spacing:-.02em; line-height:1.08; margin-top:8px; }
.pdp-code{ margin-top:6px; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--slate); }
.pdp-price{ margin-top:14px; font-family:var(--serif); font-size:1.9rem; font-weight:700; color:var(--burgundy); }
.pdp-lede{ margin-top:12px; font-size:1.1rem; line-height:1.45; color:#33372f; max-width:52ch; }
.pdp-opt{ border:0; padding:0; margin:20px 0 0; min-width:0; }
.pdp-opt legend{ padding:0; margin-bottom:8px; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.pdp-opt.is-missing legend{ color:var(--burgundy); }
.pdp-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.pdp .chip-btn{ min-width:46px; min-height:42px; padding:.35em .8em; background:#fff; color:var(--ink); border:1.5px solid rgba(21,24,26,.75); border-radius:0; font:inherit; font-size:1rem; font-weight:700; cursor:pointer; transition:background .2s, color .2s; }
.pdp .chip-btn:hover{ background:var(--pine-mist); }
.pdp .chip-btn[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pdp-msg{ min-height:1.4em; margin-top:10px; font-size:1rem; font-weight:600; color:var(--burgundy); }
.pdp-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; } .pdp-cta .btn{ flex:1 1 200px; text-align:center; justify-content:center; }
.pdp-assure{ margin-top:14px; font-size:1rem; font-weight:600; } .pdp-assure a{ text-decoration:underline; text-underline-offset:3px; }
.pdp-fine{ margin-top:6px; font-size:.9rem; color:var(--slate); }
.pdp-accs{ margin-top:22px; border-top:1px solid rgba(21,24,26,.16); }
.pdp-acc{ border-bottom:1px solid rgba(21,24,26,.16); }
.pdp-acc summary{ list-style:none; cursor:pointer; padding:16px 0; display:flex; align-items:center; justify-content:space-between; font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.pdp-acc summary::-webkit-details-marker{ display:none; }
.pdp-acc summary::after{ content:"+"; font-size:1.4rem; font-weight:500; transition:transform .3s var(--ease); } .pdp-acc[open] summary::after{ transform:rotate(45deg); }
.pdp-acc__body{ padding:0 0 20px; font-size:1.05rem; line-height:1.5; } .pdp-acc__body p + p{ margin-top:.7em; }
.pdp-acc__body h4{ margin:16px 0 4px; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-family:var(--serif); }
.pdp-list{ list-style:disc; padding-left:1.2em; } .pdp-list li + li{ margin-top:4px; }
.pdp-acc .table-wrap{ margin-top:10px; }
.pdp-related{ background:var(--paper); padding-top:20px; }
@media (max-width:860px){ .pdp__grid{ grid-template-columns:1fr; } .pdp-gallery{ position:static; } .pdp-main{ width:100%; } }

/* "Shop by brand" banner on king.html */
.brand-banner__card{ display:flex; align-items:center; gap:clamp(16px,3vw,36px); padding:18px clamp(16px,2.4vw,28px); background:#fff; border:1px solid rgba(21,24,26,.14); color:inherit; transition:border-color .25s, box-shadow .25s; }
.brand-banner__card:hover{ border-color:var(--ink); box-shadow:0 14px 30px rgba(15,24,20,.08); }
.brand-banner__thumbs{ display:flex; gap:6px; flex:none; } .brand-banner__thumbs img{ width:62px; height:92px; object-fit:cover; object-position:50% 10%; background:var(--paper-dim); }
.brand-banner__copy{ display:flex; flex-direction:column; gap:3px; min-width:0; } .brand-banner__copy b{ font-family:var(--serif); font-size:1.7rem; line-height:1.1; } .brand-banner__copy span:last-child{ font-size:1.05rem; font-weight:500; color:#3b3f37; }
.brand-banner__go{ margin-left:auto; flex:none; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; border-bottom:2px solid var(--brass); padding-bottom:3px; }
@media (max-width:720px){ .brand-banner__thumbs img:nth-child(n+3){ display:none; } .brand-banner__go{ display:none; } }
.mega__list .is-child a{ padding-left:14px; font-weight:500; font-size:1rem; } .mega__list .is-child a::before{ content:"–"; margin-right:-2px; color:var(--slate); }
.acc-sec .mega__list .is-child a{ padding-left:18px; font-weight:500; min-height:38px; }

/* size chart pop-up (per product) */
.pdp-chart-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:6px 0; background:none; border:0; font:inherit; font-size:1rem; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer; }
.pdp-chart-btn:hover{ color:var(--pine); }
.au-chart{ width:min(820px,94vw); }
.au-chart__body{ padding:clamp(22px,3.4vw,38px); }
.au-chart__title{ font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.01em; line-height:1.1; padding-right:40px; }
.au-chart__unit{ margin:6px 0 16px; font-size:1.05rem; color:var(--slate); }
.au-chart__sub{ margin:24px 0 8px; font-family:var(--serif); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
.au-chart .au-size{ min-width:640px; }
.au-chart .au-size tbody td{ font-variant-numeric:tabular-nums; }
.au-chart .au-size tbody th[scope="row"]{ white-space:nowrap; }
.au-chart .au-size__note{ background:var(--paper); }
.au-size-tall{ display:none; }
@media (max-width:640px){
  .au-size-wide{ display:none; } .au-size-tall{ display:block; }
  .au-chart .au-size--tall{ min-width:0; font-size:.88rem; }
  .au-size--tall th, .au-size--tall td{ padding:8px 3px; }
  .au-size--tall thead th{ font-size:.72rem; letter-spacing:.02em; line-height:1.1; }
  .au-size--tall tbody th[scope="row"]{ text-align:left; padding-left:8px; background:var(--pine-mist); }
  .au-size--tall tbody th b{ display:block; font-size:.95rem; } .au-size--tall tbody th span{ display:block; font-size:.72rem; font-weight:500; color:var(--slate); }
  .au-size--tall thead tr:first-child th + th{ border-left:1px solid rgba(250,248,242,.3); }
}
@media (max-width:640px){
  .au-chart__body{ padding:20px 14px 24px; }
  .au-size--tall th, .au-size--tall td{ padding:8px 1px; } .au-size--tall{ font-size:.82rem; }
  .au-size--tall tbody th[scope="row"]{ padding-left:6px; min-width:48px; }
  .au-size--tall thead th{ font-size:.68rem; letter-spacing:0; }
}
.qv__details{ list-style:disc; padding-left:1.2em; margin:6px 0 4px; font-size:.98rem; color:#33372f; } .qv__details li + li{ margin-top:2px; }

/* compact header for subcategory pages (hero banners are only for the main categories: Men, Women, Kids, Accessories, Shoes) */
.page-head{ padding:26px 0 8px; background:var(--paper); }
.page-head .crumbs{ color:var(--slate); margin-bottom:10px; flex-wrap:wrap; } .page-head .crumbs a:hover{ color:var(--pine); text-decoration:underline; text-underline-offset:3px; } .page-head .crumbs span:last-child{ color:var(--ink); }
.page-head h1{ font-size:clamp(2rem,3.6vw,3rem); letter-spacing:-.02em; line-height:1.05; }
.page-head p{ margin-top:8px; font-size:1.1rem; line-height:1.4; color:#3b3f37; max-width:62ch; }
.page-head + .shop-section, .au-cats + .shop-section{ padding-top:20px !important; }
/* Antonio Uomo category pills (same labels as the menu) */
.au-cats{ background:var(--paper); padding:6px 0 0; border-bottom:1px solid rgba(21,24,26,.12); }
.au-cats .container{ display:flex; flex-wrap:wrap; gap:6px 6px; padding-bottom:14px; }
.au-cats a{ display:inline-flex; align-items:center; min-height:38px; padding:.35em 1em; border:1.5px solid rgba(21,24,26,.75); border-radius:999px; background:#fff; font-size:1rem; font-weight:700; color:var(--ink); transition:background .2s, color .2s; }
.au-cats a:hover{ background:var(--pine-mist); } .au-cats a.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
@media (max-width:700px){ .au-cats .container{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .au-cats .container::-webkit-scrollbar{ display:none; } .au-cats a{ white-space:nowrap; flex:none; } }
/* brand dropdown inside the menus */
.brand-dd{ border-bottom:1px solid #e4e1d8; } .brand-dd summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px 0; font-size:1.12rem; font-weight:700; } .brand-dd summary::-webkit-details-marker{ display:none; }
.brand-dd summary::after{ content:""; width:8px; height:8px; margin-left:auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--ease); }
.brand-dd[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.brand-dd summary em{ font-style:normal; font-size:.78rem; font-weight:700; color:var(--slate); letter-spacing:.06em; }
.brand-dd .mega__list{ padding:0 0 8px 12px; border-left:2px solid var(--brass); margin-left:2px; }
.acc-sec .brand-dd summary{ min-height:46px; }
.mega__col .brand-dd summary em{ display:none; }
.page-head + .info-section{ padding-top:clamp(28px,4vw,48px); }

/* Discover pages: style guide (blog), lookbook, FAQ */
.mega__in--solo{ grid-template-columns:1fr; }
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; }
.post-card{ display:flex; flex-direction:column; color:inherit; background:#fff; border:1px solid rgba(21,24,26,.12); transition:border-color .25s, box-shadow .25s, transform .3s var(--ease); }
.post-card:hover{ border-color:var(--ink); box-shadow:0 14px 30px rgba(15,24,20,.08); transform:translateY(-3px); }
.post-card__img{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--paper-dim); }
.post-card__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; transition:transform .6s var(--ease); } .post-card:hover .post-card__img img{ transform:scale(1.05); }
.post-card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 22px; flex:1; }
.post-card__body b{ font-family:var(--serif); font-size:1.4rem; line-height:1.15; } .post-card__body span{ font-size:1.05rem; line-height:1.4; color:#3b3f37; }
.post-card__body em{ margin-top:auto; padding-top:6px; font-style:normal; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--pine); }
.prose-list{ margin:1em 0 0; padding-left:1.2em; list-style:disc; max-width:66ch; color:var(--slate); font-size:1.08rem; } .prose-list li + li{ margin-top:.55em; } .prose-list b{ color:var(--ink); }
.look-note{ margin:0 0 20px; font-size:1.1rem; color:var(--slate); max-width:62ch; }
.look-grid{ grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); } @media (max-width:560px){ .look-grid{ grid-template-columns:repeat(2,1fr); } }
.look-more{ margin-top:28px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:1.4em; }
.faq{ max-width:820px; border-top:1px solid rgba(21,24,26,.16); }
.faq details{ border-bottom:1px solid rgba(21,24,26,.16); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; font-size:1.2rem; font-weight:700; line-height:1.25; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; font-size:1.6rem; font-weight:500; transition:transform .3s var(--ease); } .faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 0 20px; max-width:66ch; font-size:1.1rem; line-height:1.5; color:#33372f; }

/* ---- WEDDING PARTY (Kids: ring bearer / flower girl cards) ---- */
.style-grid--two{ grid-template-columns:repeat(2,minmax(0,380px)); margin-bottom:clamp(32px,4vw,48px); }
@media (max-width:460px){ .style-grid--two{ grid-template-columns:1fr; } }