/* ═══════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════ */
:root{
  --white:#FFFFFF;
  --paper:#F7F6F3;
  --silver:#EDEBE6;
  --line:#DFDCD5;
  --grey:#747169;        /* body copy on light — 4.87:1 white, 4.51:1 paper */
  --grey-on-dark:#8C8880;/* body copy on black — 5.58:1 (too light for white) */
  --ink:#151515;
  --black:#0B0B0B;
  --gold:#B9954F;
  --gold-lt:#D3B478;
  --gold-dk:#8A6D2B;     /* gold TEXT on light bg, and gold behind white text — 4.88:1 */

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:64px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
::selection{background:var(--gold);color:#fff;}

/* ── keyboard focus — there was no focus style anywhere on the site ──
   :focus-visible only fires for keyboard/AT navigation, so pointer users
   see no change. */
:focus-visible{
  outline:2px solid var(--gold-dk);
  outline-offset:3px;
}
.vid-sec :focus-visible,
.foot :focus-visible,
.strip :focus-visible{outline-color:var(--gold-lt);} /* on black, gold-lt is 9.91:1 */

/* visually hidden, still announced — for headings that the layout omits */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,5vw,72px);}
.narrow{max-width:900px;margin:0 auto;}

/* micro type — the LV/Gucci signature */
.micro{
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  line-height:1.6;
}
/* Container p rules (.hero p, .sec-head p, .split-body p — all 0,1,1) outrank
   a lone .micro-gold (0,1,0), so 6 of the 7 gold eyebrows on the homepage were
   rendering grey. Raised to 0,2,0 so the signature gold actually appears. */
.micro.micro-gold,
.micro-gold{color:var(--gold-dk);}

.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.015em;
}


/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ═══════════════════════════════════════════════
   TICKER BAR (rotating)
   ═══════════════════════════════════════════════ */
.ticker{
  background:var(--black);
  color:var(--gold-lt);
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.ticker span{
  position:absolute;
  opacity:0;
  transition:opacity .7s ease;
  white-space:nowrap;
  padding:0 16px;
  text-align:center;
  font-size:.55rem;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.ticker span.on{opacity:1;}

/* ═══════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease;
}
.nav.stuck{border-bottom-color:var(--line);}
.nav-in{
  height:var(--nav-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.nav-left{display:flex;align-items:center;gap:28px;}
.nav-right{display:flex;align-items:center;gap:24px;justify-content:flex-end;}

.logo{
  font-family:var(--serif);
  font-size:clamp(.95rem,2.4vw,1.3rem);
  font-weight:400;
  letter-spacing:.2em;
  white-space:nowrap;
  text-align:center;
  color:var(--black);
}
.logo b{color:var(--gold-dk);font-weight:400;}
.logo-full{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.logo-mark{
  height:clamp(22px,4vw,30px);
  width:auto;
  flex:0 0 auto;
}

.nav-link{
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  position:relative;
  padding:4px 0;
  white-space:nowrap;
  transition:color .3s ease;
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--gold);
  transition:width .45s var(--ease);
}
.nav-link:hover{color:var(--gold-dk);}
.nav-link:hover::after{width:100%;}

.icon-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  transition:color .3s ease;
}
.icon-btn:hover{color:var(--gold-dk);}

.burger{display:none;flex-direction:column;gap:5px;padding:8px 0;}
.burger i{display:block;width:20px;height:1px;background:var(--ink);transition:transform .35s var(--ease),opacity .25s;}
.burger.x i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.x i:nth-child(2){opacity:0;}
.burger.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* drawer */
.drawer{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:880;
  background:var(--white);
  transform:translateX(-100%);
  transition:transform .5s var(--ease);
  padding:40px clamp(20px,6vw,48px);
  overflow-y:auto;
  display:flex;flex-direction:column;
}
.drawer.open{transform:none;}
.drawer a{
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:300;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  display:block;
}
.drawer .micro{margin-top:auto;padding-top:40px;color:var(--grey);}
body.locked{overflow:hidden;}

/* ═══════════════════════════════════════════════
   HERO — full-bleed, LV style
   ═══════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h) - 34px);
  display:flex;align-items:flex-end;
  background:
    radial-gradient(110% 80% at 72% 18%, rgba(185,149,79,.13) 0%, transparent 58%),
    linear-gradient(172deg,var(--white) 0%,var(--paper) 44%,var(--silver) 100%);
  overflow:hidden;
  padding-bottom:clamp(44px,7vh,88px);
}
/* hairline frame */
.hero::after{
  content:'';position:absolute;
  inset:clamp(14px,2.2vw,34px);
  border:1px solid rgba(185,149,79,.2);
  pointer-events:none;
}
.hero-media{
  position:absolute;
  right:clamp(14px,2.2vw,34px);
  top:clamp(14px,2.2vw,34px);
  bottom:clamp(14px,2.2vw,34px);
  width:min(48%,620px);
  background:linear-gradient(150deg,var(--paper),var(--silver));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-media img{width:100%;height:100%;object-fit:contain;background:var(--paper);}
.hero-in{position:relative;z-index:3;width:100%;}
.hero-copy{max-width:min(560px,92%);}
.hero-emblem{
  height:clamp(44px,7vw,64px);
  width:auto;
  margin-bottom:20px;
}
.hero h1{
  font-size:clamp(2.6rem,7.4vw,5.6rem);
  margin:18px 0 20px;
}
.hero h1 em{font-style:italic;color:var(--gold-dk);}
.hero p{
  color:var(--grey);
  font-size:clamp(.92rem,2.4vw,1.05rem);
  max-width:42ch;
  margin-bottom:34px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:15px 34px;
  font-size:.62rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;
  border:1px solid var(--black);
  background:var(--black);color:var(--white);
  position:relative;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease);
  min-height:48px;
}
.btn i{position:absolute;inset:0;background:var(--gold-dk);transform:translateX(-101%);transition:transform .5s var(--ease);}
.btn span,.btn svg{position:relative;z-index:2;}
.btn:hover{border-color:var(--gold-dk);}
.btn:hover i{transform:none;}

.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;min-height:48px;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--ink);
  transition:border-color .35s ease,color .35s ease;
}
.btn-line:hover{border-color:var(--gold);color:var(--gold-dk);}

.btn-block{width:100%;}

/* ═══════════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════════ */
.strip{background:var(--black);padding:14px 0;overflow:hidden;}
.strip-track{display:flex;width:max-content;animation:slide 34s linear infinite;}
.strip-track > div{display:flex;}
.strip-item{
  display:inline-flex;align-items:center;gap:26px;padding:0 26px;
  color:var(--gold-lt);
  font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap;
}
.strip-item::after{content:'';width:3px;height:3px;background:var(--gold);border-radius:50%;}
@keyframes slide{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none;}}

/* ═══════════════════════════════════════════════
   SECTION SCAFFOLD
   ═══════════════════════════════════════════════ */
.sec{padding:clamp(64px,10vw,132px) 0;}
.sec-head{margin-bottom:clamp(36px,5vw,64px);}
.sec-head.mid{text-align:center;}
.sec-head h2{font-size:clamp(1.9rem,5.4vw,3.4rem);margin:14px 0 0;}
.sec-head p{color:var(--grey);margin-top:16px;max-width:56ch;font-size:.95rem;}
.sec-head.mid p{margin-left:auto;margin-right:auto;}

/* ═══════════════════════════════════════════════
   EDITORIAL SPLIT (Gucci-ish alternating blocks)
   ═══════════════════════════════════════════════ */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);
  align-items:center;
}
.split-media{
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(158deg,var(--paper),var(--silver));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.split-media img{width:100%;height:100%;object-fit:contain;background:var(--paper);padding:26px;}
.split-media::after{content:'';position:absolute;inset:12px;border:1px solid rgba(185,149,79,.18);pointer-events:none;}
.split.flip .split-media{order:2;}
.split-body p{color:var(--grey);margin:22px 0;}

.figures{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:36px;padding-top:32px;border-top:1px solid var(--line);
}
.fig b{display:block;font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:300;color:var(--gold-dk);line-height:1;}
.fig span{display:block;margin-top:8px;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);}

/* ═══════════════════════════════════════════════
   PRODUCTS
   ═══════════════════════════════════════════════ */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.4vw,32px);
}
.card{
  background:var(--white);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,.07);}
.card-media{
  position:relative;aspect-ratio:4/5;
  background:linear-gradient(148deg,var(--paper),var(--silver));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.card-media img{width:100%;height:100%;object-fit:contain;background:var(--paper);padding:16px;transition:transform .6s var(--ease);}
.card:hover .card-media img{transform:scale(1.04);}
.tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--black);color:var(--gold-lt);
  padding:6px 13px;
  font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
}
.tag.gold{background:var(--gold-dk);color:#fff;}
.peek{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:rgba(11,11,11,.9);
  backdrop-filter:blur(6px);
  color:#fff;text-align:center;padding:13px;
  font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  transform:translateY(100%);
  transition:transform .45s var(--ease);
}
.card:hover .peek{transform:none;}
.card-body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1;}
.card-body h3{font-family:var(--serif);font-size:1.32rem;font-weight:400;line-height:1.2;}
.card-body .meta{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin:7px 0 14px;}
.price{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--gold-dk);}
.card-actions{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:9px;}

/* bundle emphasis */
.card.feature{grid-column:span 2;}
.card.feature .card-media{aspect-ratio:16/7;}
@media(min-width:900px){
  .card.feature{
    grid-column:span 2;
    display:grid;grid-template-columns:1.15fr 1fr;
  }
  .card.feature .card-media{aspect-ratio:auto;height:100%;min-height:420px;}
  .card.feature .card-body{justify-content:center;padding:clamp(28px,4vw,56px);}
  .card.feature h3{font-size:clamp(1.7rem,3vw,2.4rem);}
  .card.feature .card-actions{flex-direction:row;flex-wrap:wrap;}
  .card.feature .card-actions .btn,
  .card.feature .card-actions .btn-line{flex:1 1 200px;}
}

/* ═══════════════════════════════════════════════
   LOOKBOOK RAIL (horizontal scroll — custom feature)
   ═══════════════════════════════════════════════ */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.rail-nav{display:flex;gap:8px;}
.rail-nav button{
  width:42px;height:42px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s,color .3s;
}
.rail-nav button:hover{border-color:var(--gold);color:var(--gold-dk);}
.rail{
  display:flex;gap:clamp(12px,2vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:32px 0 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none;}
.rail figure{
  flex:0 0 clamp(230px,64vw,380px);
  scroll-snap-align:start;
}
.rail .frame{
  aspect-ratio:3/4;
  background:linear-gradient(150deg,var(--paper),var(--silver));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.rail .frame img{width:100%;height:100%;object-fit:contain;background:var(--paper);padding:10px;}
.rail figcaption{margin-top:14px;}
.rail figcaption b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:400;}
.rail figcaption span{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);}

/* ═══════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════ */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);}
.svc-item{text-align:center;}
.svc-ico{
  width:46px;height:46px;margin:0 auto 18px;
  border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.svc-item h3{font-family:var(--serif);font-size:1.1rem;font-weight:500;margin-bottom:7px;}
.svc-item p{font-size:.84rem;color:var(--grey);line-height:1.7;}


/* ═══════════════════════════════════════════════
   FAQ ACCORDION (custom feature)
   ═══════════════════════════════════════════════ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;
  padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1rem,2.6vw,1.22rem);font-weight:400;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;
  width:11px;height:11px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq .ans{padding:0 0 24px;color:var(--grey);font-size:.92rem;max-width:70ch;}

/* ═══════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════ */
.news{text-align:center;}
.news form{
  display:flex;max-width:520px;margin:32px auto 0;
  border:1px solid var(--line);transition:border-color .3s;
}
.news form:focus-within{border-color:var(--gold);}
.news input{
  flex:1;min-width:0;padding:16px 20px;border:0;background:none;
  font:inherit;font-size:.92rem;color:var(--ink);outline:none;
}
.news input::placeholder{color:#767065;}
.news button{
  padding:16px 26px;background:var(--black);color:var(--gold-lt);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  transition:background .35s,color .35s;white-space:nowrap;
}
.news button:hover{background:var(--gold-dk);color:#fff;}
.news .fine{font-size:.7rem;color:#767065;margin-top:14px;}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.foot{background:var(--black);color:var(--silver);padding:clamp(56px,8vw,90px) 0 34px;}
.foot-grid{
  display:grid;grid-template-columns:1.7fr repeat(3,1fr);
  gap:clamp(28px,4vw,56px);margin-bottom:clamp(40px,6vw,64px);
}
.foot-name{
  font-family:var(--serif);font-size:1.3rem;font-weight:400;
  letter-spacing:.16em;color:#fff;margin-bottom:16px;
}
.foot-name b{color:var(--gold);font-weight:400;}
.foot-name-full{display:flex;align-items:center;gap:12px;}
.foot-mark{height:28px;width:auto;flex:0 0 auto;}
.foot-desc{font-size:.86rem;color:var(--grey-on-dark);max-width:34ch;line-height:1.8;}
.foot h2{
  font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:20px;font-weight:400;
}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.foot ul a{font-size:.86rem;color:var(--grey-on-dark);transition:color .3s;}
.foot ul a:hover{color:var(--gold-lt);}
.foot-btm{
  border-top:1px solid rgba(255,255,255,.07);padding-top:26px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.7rem;color:var(--grey-on-dark);
}

/* ═══════════════════════════════════════════════
   STICKY MOBILE BUY BAR (custom feature)
   ═══════════════════════════════════════════════ */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:850;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:12px;
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.sticky-buy.show{transform:none;}
.sticky-buy .sb-txt{flex:1;min-width:0;}
.sticky-buy .sb-txt b{display:block;font-family:var(--serif);font-size:.98rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sticky-buy .sb-txt span{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk);}
.sticky-buy .btn{padding:13px 22px;min-height:44px;flex:0 0 auto;}

/* ═══════════════════════════════════════════════
   COLOR SWATCHES
   ═══════════════════════════════════════════════ */
.swatches{margin-top:14px;}
.sw-label{color:var(--grey);display:block;margin-bottom:9px;}
.sw-row{display:flex;gap:10px;}
/* .pdp-swatch MUST be listed alongside .swatch on every rule below.
   The PDP markup uses class="pdp-swatch" (singular) while these rules
   originally matched only .swatch — so the PDP colour buttons rendered
   0x0, transparent and unclickable, and the Stripe buy button could
   never leave its hardcoded Black default. site.js queries .pdp-swatch,
   so the class is NOT interchangeable: do not "fix" this by adding
   .swatch to the PDP markup, because site.js's separate .swatch handler
   would then also fire on PDP swatches and corrupt the gallery image. */
.swatch,
.pdp-swatch{
  width:26px;height:26px;border-radius:50%;
  background:var(--sc);
  border:2px solid transparent;
  transition:border-color .25s,transform .25s;
  cursor:pointer;
}
.swatch:hover,
.pdp-swatch:hover{transform:scale(1.15);}
.swatch.active,
.pdp-swatch.active{border-color:var(--gold-dk);}

/* ═══════════════════════════════════════════════
   VIDEO SECTION
   ═══════════════════════════════════════════════ */
.vid-sec{background:var(--black);padding:clamp(56px,8vw,100px) 0;text-align:center;}
.vid-sec .sec-head h2{color:#fff;}
.vid-sec .micro.micro-gold,
.vid-sec .micro-gold{color:var(--gold);} /* on black: --gold is 7.01:1, --gold-dk only 4.03:1 */
.vid-sec .sec-head p{color:var(--grey-on-dark);}
.vid-wrap{
  position:relative;width:100%;max-width:900px;margin:40px auto 0;
  aspect-ratio:16/9;background:#111;overflow:hidden;
}
.vid-wrap video{width:100%;height:100%;object-fit:contain;background:#000;}

.vid-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  max-width:900px;margin:36px auto 0;
}
.vid-sub video{
  width:100%;aspect-ratio:4/5;object-fit:contain;background:#111;
  border:1px solid rgba(185,149,79,.2);
}
.vid-sub p{color:var(--grey-on-dark);margin-top:12px;}
/* ═══════════════════════════════════════════════
   PRODUCT PAGE (duffle.html / toiletries.html / bundle.html)
   ═══════════════════════════════════════════════ */
.breadcrumb{
  /* padding-top as LONGHAND. The shorthand `padding:20px 0 0` set left/right
     to 0, wiping the horizontal padding .wrap supplies — .breadcrumb and .wrap
     are the same element (class="wrap breadcrumb") and .breadcrumb wins on
     source order, so the trail sat flush against the viewport edge while the
     nav and gallery above/below it were correctly inset.
     Same failure mode as the .pdp padding shorthand fixed earlier. */
  padding-top:20px;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.breadcrumb a{color:var(--grey);transition:color .3s;}
.breadcrumb a:hover{color:var(--gold-dk);}
.breadcrumb span{color:var(--ink);}

.pdp{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(40px,6vw,104px);
  /* padding-top/bottom as LONGHAND. The shorthand form
     `padding: <top> 0 <bottom>` was resetting left/right to 0, which wiped
     out the horizontal padding .wrap supplies — .pdp and .wrap are the same
     element (class="wrap pdp") and .pdp wins on source order. That is why
     the gallery and buy column sat flush against the viewport edges. */
  padding-top:clamp(36px,5vw,72px);
  padding-bottom:clamp(64px,9vw,120px);
  align-items:flex-start;
}
/* Extra breathing room on wide screens. NOTE this REPLACES .wrap's
   horizontal padding rather than adding to it (same element, later rule),
   so the value must be larger than .wrap's clamp(20px,5vw,72px) — not a
   delta on top of it. At 1440px this yields ~101px per side vs .wrap's 72px. */
@media(min-width:1100px){
  .pdp{
    padding-left:clamp(48px,7vw,112px);
    padding-right:clamp(48px,7vw,112px);
  }
}
.pdp-gallery{
  position:sticky;top:calc(var(--nav-h) + 28px);
  display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);
}
.pdp-main{
  /* Every gallery photo is landscape: aspect 1.21-1.75, median 1.505. The old
     4/5 (0.800) portrait box letterboxed each one by 43-54% and ate half the
     mobile viewport. 3/2 tracks the median, cutting average letterbox to ~7%.
     A fixed ratio is kept (rather than height:auto per photo) so the frame does
     not resize as the gallery cycles — that would shift everything below it. */
  aspect-ratio:3/2;background:linear-gradient(148deg,var(--paper),var(--silver));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;border:1px solid var(--line);
}
.pdp-main img,.pdp-main video{width:100%;height:100%;object-fit:contain;background:var(--paper);padding:clamp(10px,1.6vw,20px);}

/* image cycling slideshow */
.pdp-slideshow{position:relative;}
.pdp-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.88);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:1.3rem;line-height:1;
  opacity:0;transition:opacity .3s ease,background .3s ease;
  z-index:3;
}
.pdp-slideshow:hover .pdp-arrow{opacity:1;}
.pdp-arrow:focus-visible{opacity:1;}
.pdp-arrow:hover{background:var(--gold);color:#fff;}
.pdp-arrow-prev{left:14px;}
.pdp-arrow-next{right:14px;}
@media(max-width:900px){
  .pdp-arrow{opacity:1;} /* always visible on touch devices */
}

.pdp-thumbs{display:flex;gap:12px;flex-wrap:wrap;}
.pdp-thumb{
  /* match the main frame's 3/2 so thumbs are not letterboxed either */
  width:78px;height:52px;flex:0 0 auto;cursor:pointer;
  background:linear-gradient(148deg,var(--paper),var(--silver));
  border:1px solid var(--line);overflow:hidden;
  transition:border-color .3s;
}
.pdp-thumb.active{border-color:var(--gold-dk);}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;}

/* clean click-to-toggle video (no native browser controls) */
.cv-wrap{position:relative;cursor:pointer;}
.cv-wrap:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;}
.cv-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(11,11,11,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  opacity:0;transition:opacity .35s ease;
  pointer-events:none;
}
.cv-icon.show{opacity:1;}

.pdp-info h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:14px 0 10px;}
.pdp-meta{color:var(--grey);font-size:.9rem;margin-bottom:28px;}
.pdp-price{font-family:var(--serif);font-size:1.5rem;color:var(--gold-dk);font-weight:500;margin:22px 0 34px;}

.pdp-swatches{margin-bottom:40px;}
.pdp-swatches .sw-label{display:block;margin-bottom:10px;color:var(--grey);}
.pdp-swatches .sw-row{display:flex;gap:12px;}
.pdp-swatches .swatch,
.pdp-swatches .pdp-swatch{width:32px;height:32px;}

.pdp-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:42px;}

.pdp-facts{border-top:1px solid var(--line);padding-top:32px;display:flex;flex-direction:column;gap:18px;}
.pdp-fact{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--grey);}
.pdp-fact svg{flex:0 0 auto;margin-top:2px;color:var(--gold);}

.pdp-related{padding:clamp(40px,6vw,72px) 0;background:var(--paper);}

@media(max-width:900px){
  .pdp{grid-template-columns:1fr;}
  .pdp-gallery{position:static;}
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .card.feature{grid-column:span 2;}
  .svc{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:820px){
  .nav-left .nav-link,
  .nav-right .nav-link{display:none;}
  .burger{display:flex;}
  .nav-in{grid-template-columns:auto 1fr auto;}
  .logo{text-align:center;letter-spacing:.14em;}

  .hero{
    min-height:0;
    align-items:stretch;
    padding:0 0 clamp(36px,6vh,60px);
    display:block;
  }
  .hero::after{inset:12px;}
  .hero-media{
    position:relative;right:auto;top:auto;bottom:auto;
    width:auto;margin:12px 12px 0;
    aspect-ratio:4/5;
  }
  .hero-in{padding-top:32px;}
  .hero-copy{max-width:100%;}
  .hero p{max-width:100%;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn,.hero-cta .btn-line{width:100%;}

  .split{grid-template-columns:1fr;}
  .split.flip .split-media{order:0;}
  .split-media{aspect-ratio:3/4;}

  .sticky-buy{display:flex;}
  body{padding-bottom:0;}
}

@media(max-width:560px){
  .grid{grid-template-columns:1fr;}
  .card.feature{grid-column:span 1;}
  .card.feature .card-media{aspect-ratio:4/5;}
  .svc{grid-template-columns:1fr;gap:26px;}
  .foot-grid{grid-template-columns:1fr;gap:32px;}
  .news form{flex-direction:column;}
  .news button{width:100%;}
  .figures{grid-template-columns:1fr;gap:22px;text-align:left;}
  .foot-btm{flex-direction:column;text-align:center;align-items:center;}
}
/* ═══════════════════════════════════════════════
   PDP EDITORIAL BLOCKS — care & material story
   ═══════════════════════════════════════════════ */
.pdp-editorial{
  border-top:1px solid var(--line);
  padding:clamp(48px,7vw,88px) 0;
}
.pdp-editorial .wrap{max-width:1080px;}
.pdp-ed-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,88px);
  align-items:start;
}
.pdp-ed h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  line-height:1.15;letter-spacing:-.015em;
  margin:12px 0 22px;
}
.pdp-ed p{color:var(--grey);font-size:.92rem;line-height:1.85;max-width:46ch;}
.pdp-ed p + p{margin-top:16px;}

/* care: hairline-separated definition rows */
.care-list{margin-top:6px;}
.care-item{
  padding:16px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(96px,148px) 1fr;
  gap:clamp(14px,2.5vw,28px);align-items:baseline;
}
.care-item:first-child{border-top:0;padding-top:0;}
.care-item dt{
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dk);
}
.care-item dd{color:var(--grey);font-size:.9rem;line-height:1.8;}

@media(max-width:820px){
  .pdp-ed-grid{grid-template-columns:1fr;gap:clamp(36px,8vw,56px);}
  .care-item{grid-template-columns:1fr;gap:6px;}
}

/* ═══════════════════════════════════════════════
   TRUST ROW — sits directly under the buy button
   Claims are restricted to what the site already
   states elsewhere: Stripe is the actual processor,
   shipping is complimentary, and issues are made right.
   ═══════════════════════════════════════════════ */
.trust-row{
  display:flex;flex-wrap:wrap;
  gap:clamp(10px,2vw,18px);
  margin:22px 0 6px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.trust-item{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);
  white-space:nowrap;
}
.trust-item svg{flex:0 0 auto;color:var(--gold-dk);}
@media(max-width:400px){
  .trust-row{gap:10px;}
  .trust-item{font-size:.52rem;letter-spacing:.12em;}
}

/* ═══════════════════════════════════════════════
   CONTACT FORM
   Built on the existing tokens — Cormorant heads,
   Jost body, hairline --line borders, gold focus.
   Layout mirrors the FAQ block's narrow measure.
   ═══════════════════════════════════════════════ */
.contact-form{
  max-width:640px;margin:0 auto;
  border-top:1px solid var(--line);
  padding-top:clamp(28px,4vw,40px);
}
.cf-field{margin-bottom:clamp(20px,3vw,28px);}
.cf-field label{
  display:block;margin-bottom:9px;
  font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey);
}
.cf-field input,
.cf-field textarea{
  width:100%;
  font:inherit;font-size:.95rem;
  color:var(--ink);
  background:none;
  border:0;border-bottom:1px solid var(--line);
  padding:10px 2px;
  outline:none;
  transition:border-color .3s ease;
  border-radius:0;
}
.cf-field textarea{
  resize:vertical;min-height:132px;line-height:1.7;
}
.cf-field input:focus,
.cf-field textarea:focus{border-bottom-color:var(--gold-dk);}
.cf-field input::placeholder,
.cf-field textarea::placeholder{color:#9C978D;}
.cf-field.invalid input,
.cf-field.invalid textarea{border-bottom-color:#9B2C2C;}

.cf-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;}
.cf-note{
  font-size:.72rem;color:var(--grey);margin-top:18px;line-height:1.7;
}
.cf-status{
  margin-top:16px;font-size:.82rem;line-height:1.7;min-height:1.2em;
}
.cf-status.err{color:#9B2C2C;}
.cf-status.ok{color:var(--gold-dk);}

@media(max-width:560px){
  .cf-actions .btn{width:100%;}
}

/* ═══════════════════════════════════════════════
   MOBILE FIXES
   ═══════════════════════════════════════════════ */

/* iOS Safari auto-zooms the whole page when a focused input's font-size is
   under 16px. The contact fields computed to 15.2px and the newsletter input
   to 14.72px, so tapping either yanked the layout. 16px is visually
   indistinguishable here and stops the zoom. Touch pointers only, so desktop
   type is untouched. */
@media (pointer:coarse){
  .cf-field input,
  .cf-field textarea,
  .news input{font-size:16px;}
}

/* The <=400px rule shrank the trust badges to 8.32px — smaller than any other
   text on the site. Hold them at the standard micro size instead; the row
   still fits without overflow at 375px. */
@media(max-width:400px){
  .trust-item{font-size:.55rem;letter-spacing:.14em;}
}

/* ═══════════════════════════════════════════════
   CONTACT FORM — Formspree states
   ═══════════════════════════════════════════════ */
/* Formspree writes its own markup into these; the on-brand copy is mirrored
   into #cf-status instead, so the raw defaults never render.
   !important is required: the library injects its own stylesheet containing
   [data-fs-success][data-fs-active]{display:block} at specificity (0,2,0),
   which outranks a plain .fs-sink class rule and would otherwise leave its
   raw "Thank you!" visible above our own confirmation. */
.fs-sink{display:none !important;}

/* field-level errors from data-fs-error, matched to .cf-status.err */
.cf-field-err{
  display:block;margin-top:8px;
  font-size:.72rem;line-height:1.6;color:#9B2C2C;
}
.cf-field-err:empty{display:none;}

/* pending state — the gold sweep is suppressed so a disabled button
   never looks hoverable */
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  border-color:var(--black);
}
.btn:disabled i{transform:translateX(-101%);}

/* ═══════════════════════════════════════════════
   CONTACT FORM — reason select, optional field,
   response-time line, success button state
   ═══════════════════════════════════════════════ */

/* Response-time line, sits under the section intro.
   Scoped to .sec-head (0,2,0) because the bare class loses to .sec-head p
   (0,1,1) and would render grey instead of gold — same specificity trap that
   left the micro-gold eyebrows grey site-wide. */
.sec-head .cf-response{
  margin-top:14px;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dk);
}

/* "(optional)" qualifier inside a label */
.cf-optional{
  letter-spacing:.14em;
  color:#8E8A81;
}

/* Select matches the input/textarea treatment exactly: no box, hairline
   underline, gold on focus. appearance:none strips the OS control so the
   chevron below is the only affordance. */
.cf-field select{
  width:100%;
  font:inherit;font-size:.95rem;
  color:var(--ink);
  background:none;
  border:0;border-bottom:1px solid var(--line);
  padding:10px 28px 10px 2px;
  outline:none;
  border-radius:0;
  transition:border-color .3s ease;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A6D2B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
}
.cf-field select:focus{border-bottom-color:var(--gold-dk);}
.cf-field.invalid select{border-bottom-color:#9B2C2C;}
/* the placeholder option reads as placeholder text until a real choice is made */
.cf-field select:invalid{color:#8E8A81;}

/* ── Submit button success state ──
   Uses --gold-dk, the site's existing "gold behind white text" token (same
   value as the .btn hover sweep and .tag.gold), which holds 4.88:1 against
   white. --gold itself is only 2.81:1 with white and would fail AA. */
.btn.is-sent{
  background:var(--gold-dk);
  border-color:var(--gold-dk);
  color:#fff;
  cursor:default;
}
.btn.is-sent i{display:none;}          /* no hover sweep once sent */
.btn.is-sent:hover{border-color:var(--gold-dk);}

/* iOS zoom guard has to cover the select too */
@media (pointer:coarse){
  .cf-field select{font-size:16px;}
}

/* Field hint — explanation that would truncate inside a placeholder on mobile */
.cf-hint{
  display:block;margin-top:8px;
  font-size:.72rem;line-height:1.6;color:var(--grey);
}

/* A single-photo colourway hides its arrows and thumb strip via the hidden
   attribute. The UA's [hidden]{display:none} loses to .pdp-arrow{display:flex}
   and .pdp-thumbs{display:flex}, so state it explicitly at (0,1,1). */
.pdp-arrow[hidden],
.pdp-thumbs[hidden]{display:none;}

/* ═══════════════════════════════════════════════
   PDP — mobile gallery sizing + description accordion
   ═══════════════════════════════════════════════ */

/* On phones the frame is the first thing between the visitor and the product
   details, so cap it as a share of the viewport as well as by ratio. */
@media(max-width:900px){
  .pdp-main{max-height:46svh;}
  .pdp-thumb{width:66px;height:44px;}
  .pdp-thumbs{gap:10px;}
}

/* Description disclosure — reuses the FAQ pattern verbatim (.faq details/
   summary/.ans) so the arrow, type and interaction match the FAQ exactly.
   Only the surrounding spacing is scoped here. */
.pdp-disclosure{
  border-top:1px solid var(--line);
  margin-bottom:clamp(28px,4vw,40px);
}
.pdp-disclosure details{border-bottom:1px solid var(--line);}
.pdp-disclosure summary{padding:18px 40px 18px 0;}
.pdp-disclosure .ans{padding-bottom:20px;max-width:52ch;}