@font-face {
  font-family: "Stencil PTx Sprayed";
  src: url("fonts/StencilPtxSprayedDemo-j9MAM.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0f0e0e;
  --surface:#1a1616;
  --surface-2:#231d1d;
  --ink:#f1eae6;
  --ink-soft:#a99e98;
  --line:#332b2b;
  --maroon:#541212;
  --maroon-light:#7d2323;
  --maroon-ink:#f7e9e7;
  --danger:#b3564a;
  --cream:#F3E6D5;
  color-scheme: dark;
}

/* ---------- cross-document view transitions ---------- */
/* Opts every same-origin navigation between index/shop/about/contact into a
   transition. Unsupported browsers (and reduced-motion users, who never even
   opt in below) just get a normal instant navigation — no broken states. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}
@keyframes mw-page-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes mw-page-in{ from{ opacity:0; transform:translateY(10px); } }
::view-transition-old(root){ animation:.32s cubic-bezier(.22,.61,.36,1) both mw-page-out; }
::view-transition-new(root){ animation:.42s cubic-bezier(.22,.61,.36,1) both mw-page-in; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:500;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%;}
:root{--container:min(1800px,max(1180px,92vw)); --gutter:clamp(20px,2.5vw,48px);}
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.mono{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.display{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; color:#F3E6D5;}
.eyebrow{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--maroon-light);}
.btn{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.85em 1.7em; border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink);
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
}
.btn:hover{background:var(--ink); color:var(--bg); transform:translateY(-.15rem);}
.btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible{
  outline:2px solid var(--maroon-light); outline-offset:2px;
}
.btn.solid{background:var(--maroon); border-color:var(--maroon); color:var(--maroon-ink);}
.btn.solid:hover{background:var(--maroon-light); border-color:var(--maroon-light); color:var(--maroon-ink); transform:translateY(-.15rem);}
.btn.small{padding:.55em 1.3em; font-size:.7rem;}
.btn[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none; transform:none;}
/* arrow icon on "going somewhere" buttons only (real <a> navigation links) —
   action buttons (Add to bag, form submits, tabs) never get this markup */
.btn-arrow{flex:none; transition:transform .18s ease;}
.btn:hover .btn-arrow{transform:translate(2px,-2px);}
@media (prefers-reduced-motion: reduce){
  .btn:hover, .btn.solid:hover{transform:none;}
  .btn:hover .btn-arrow{transform:none;}
}
.hero-cta .btn{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:400; text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40; width:100%; margin-inline:auto;
  padding-top:env(safe-area-inset-top,0px);
  border-style:solid; border-color:var(--line); border-width:0; border-radius:0;
  box-shadow:none;
  /* names the scroll-state container so descendants (.header-bg) can query
     whether the header is actually "stuck" at the top */
  container-name:site-header;
  container-type:scroll-state;
}
/* full-bleed background layer: a separate descendant is required because a
   scroll-state container cannot style itself, only its children */
.header-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; /* follows the GSAP pill-shrink border-radius on header */
  background-color:rgba(15,14,14,0);
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:background-color .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;
}
@supports (container-type:scroll-state){
  @container site-header scroll-state(stuck:top){
    .header-bg{
      background-color:rgba(15,14,14,.72);
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    }
  }
}
/* Firefox/Safari (no scroll-state support yet): skip the frosted-glass
   toggle entirely and keep a plain, always-on solid bar instead of leaving
   the header permanently transparent */
@supports not (container-type:scroll-state){
  .header-bg{ background-color:rgba(15,14,14,.92); }
}
@media (prefers-reduced-motion: reduce){ .header-bg{ transition:none; } }
.headbar{display:flex; align-items:center; justify-content:space-between; padding-block:9px; padding-inline:var(--gutter); gap:16px;}
.wordmark{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size:clamp(.95rem,2.2vw,1.2rem); letter-spacing:.02em; text-transform:uppercase; background:none; border:none; color:var(--ink); cursor:pointer; padding:0; display:inline-block;}
.wordmark span{color:var(--maroon-light);}
nav.primary{display:flex; align-items:center; gap:8px; font-size:.85rem;}
nav.primary a{
  background:none; border:none; color:var(--ink-soft); cursor:pointer; position:relative; display:inline-block;
  padding:5px 10px;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
}
.nav-underline{
  position:absolute; left:10px; right:10px; bottom:2px; height:1px; background:var(--maroon-light);
  transform:scaleX(0); transform-origin:50% 50%; pointer-events:none;
}
nav.primary a:hover{color:var(--ink);}
nav.primary a[aria-current="page"]{color:var(--ink);}
.head-actions{display:flex; align-items:center; gap:18px;}
.cart-btn{position:relative; background:none; border:none; cursor:pointer; color:var(--ink); display:flex; align-items:center; padding:4px;}
.cart-btn svg{width:19px; height:19px;}
.cart-count{
  position:absolute; top:-2px; right:-2px; background:var(--maroon-light); color:var(--maroon-ink);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; font-variant-numeric:tabular-nums; font-size:.62rem; min-width:16px; height:16px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding-inline:3px;
  animation:pop .28s ease;
}
@keyframes pop{ from{ transform:scale(0);} 60%{ transform:scale(1.25);} to{ transform:scale(1);} }

/* invisible tap-target expansion: keeps the visual icon/button small while
   the clickable area stays >=44px, without growing the (now shorter) bar */
.menu-btn::before, .cart-btn::before{
  content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%);
}
.menu-btn{display:none; position:relative; background:none; border:none; color:var(--ink); cursor:pointer; padding:4px; align-items:center; justify-content:center;}
.menu-btn svg{width:19px; height:19px;}
@media (max-width:760px){
  nav.primary{display:none;}
  .menu-btn{display:flex;}
}
.mobile-nav{
  position:fixed; top:0; left:0; right:0; z-index:65; background:var(--bg); border-bottom:1px solid var(--line);
  transform:translateY(-100%); visibility:hidden;
  padding-top:env(safe-area-inset-top,0px);
}
.mobile-nav.open{transform:translateY(0); visibility:visible;}
.mobile-nav-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
.mobile-nav ul{list-style:none; margin:0; padding:8px 20px 24px; display:flex; flex-direction:column;}
.mobile-nav ul a{
  font:inherit; font-size:1.1rem; text-align:left; background:none; border:none; color:var(--ink-soft); cursor:pointer;
  padding:14px 0; border-bottom:1px solid var(--line); min-height:48px; display:block;
}
.mobile-nav ul a[aria-current="page"], .mobile-nav ul a:hover{color:var(--ink);}

/* ---------- scroll reveal ---------- */
/* Native path: CSS scroll-driven animations (animation-timeline: view()).
   Runs on the compositor, no scroll listeners. Gated behind both a feature
   check (the animation-range check is required to exclude browsers with only
   partial support) and prefers-reduced-motion, per the modern-web-guidance
   scroll-entry-exit-effects / parallax-scroll-effects guides. */
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    @keyframes mw-reveal-up{ from{ opacity:0; transform:translateY(22px); } }
    @keyframes mw-reveal-scale{ from{ opacity:0; transform:scale(.96); } }
    @keyframes mw-reveal-child{ from{ opacity:0; transform:translateY(18px); } }
    @keyframes mw-reveal-card{ from{ opacity:0; transform:translateY(16px); } }

    .reveal{
      animation:mw-reveal-up .6s ease both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    .reveal.scale-in{ animation-name:mw-reveal-scale; }

    .reveal.stagger-children > *{
      animation:mw-reveal-child .5s ease both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    .reveal.stagger-children > *:nth-child(1){animation-delay:0ms;}
    .reveal.stagger-children > *:nth-child(2){animation-delay:90ms;}
    .reveal.stagger-children > *:nth-child(3){animation-delay:180ms;}
    .reveal.stagger-children > *:nth-child(4){animation-delay:270ms;}
    .reveal.stagger-children > *:nth-child(5){animation-delay:360ms;}
    .reveal.stagger-children > *:nth-child(6){animation-delay:450ms;}

    /* product/lookbook cards render dynamically, so the stagger is done with
       plain nth-child offsets in CSS rather than JS-computed inline delays */
    .card, .plate{
      animation:mw-reveal-card .5s cubic-bezier(.22,.61,.36,1) both;
      animation-timeline:view();
      animation-range:entry 0% entry 35%;
    }
    .card:nth-child(1), .plate:nth-child(1){animation-delay:0ms;}
    .card:nth-child(2), .plate:nth-child(2){animation-delay:80ms;}
    .card:nth-child(3), .plate:nth-child(3){animation-delay:160ms;}
    .card:nth-child(4){animation-delay:240ms;}
    .card:nth-child(5){animation-delay:320ms;}
    .card:nth-child(n+6){animation-delay:400ms;}
  }
}

/* Fallback path: browsers without native scroll-driven animation support
   (currently Firefox) get the classic IntersectionObserver + .in toggle
   version, wired up in script.js only when the feature check above fails. */
@supports not ((animation-timeline: view()) and (animation-range: entry)){
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal.stagger-children{opacity:1; transform:none; transition:none;}
  .reveal.stagger-children > *{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
  .reveal.stagger-children.in > *{opacity:1; transform:translateY(0);}
  .reveal.stagger-children.in > *:nth-child(1){transition-delay:0ms;}
  .reveal.stagger-children.in > *:nth-child(2){transition-delay:.09s;}
  .reveal.stagger-children.in > *:nth-child(3){transition-delay:.18s;}
  .reveal.stagger-children.in > *:nth-child(4){transition-delay:.27s;}
  .reveal.stagger-children.in > *:nth-child(5){transition-delay:.36s;}
  .reveal.stagger-children.in > *:nth-child(6){transition-delay:.45s;}
  .reveal.scale-in{transform:scale(.96); transition:opacity .6s ease, transform .6s ease;}
  .reveal.scale-in.in{transform:scale(1);}

  .card{opacity:0; transform:translateY(16px); transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);}
  .card.in{opacity:1; transform:translateY(0);}
  .plate{opacity:0; transform:translateY(18px); transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);}
  .plate.in{opacity:1; transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; width:100%; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);}
.hero-video{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.hero-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(15,14,14,.3) 0%, rgba(15,14,14,.42) 45%, rgba(15,14,14,.82) 100%); pointer-events:none;}
.hero-copy{
  position:absolute; left:0; right:0; bottom:clamp(32px,8vw,64px); z-index:2;
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-direction:column; align-items:flex-start; gap:22px; text-align:left;
}
.hero-copy h1{font-size:clamp(2rem,5vw,4rem); line-height:.92; margin:0;}
.hero-copy h1 .line{display:block; overflow:hidden;}
.hero-copy h1 .line span{display:block;}
.hero-copy p{max-width:46ch; color:var(--ink-soft); font-size:1.02rem; line-height:1.6; margin:0;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
@media (max-width:520px){ .hero-copy{max-width:100%;} .hero-copy p{max-width:none;} }
@media (prefers-reduced-motion: reduce){ .hero-video{display:none;} .hero{background-image:url('media/hero-spotlight-v2-poster.jpg'); background-size:cover; background-position:center;} }

/* ---------- product spotlight ---------- */
.spotlight{position:relative; min-height:clamp(600px,90vh,860px); width:100%; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);}
.spotlight-video{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.spotlight-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(15,14,14,.28) 0%, rgba(15,14,14,.4) 45%, rgba(15,14,14,.8) 100%); pointer-events:none;}
.spotlight-copy{
  position:absolute; left:0; right:0; bottom:clamp(24px,6vw,44px); z-index:2;
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left;
}
.spotlight-copy h2{font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.08; margin:0;}
.spotlight-copy .eyebrow{font-size:1.05rem; line-height:1; margin-bottom:-4px;}
@media (max-width:760px){ .spotlight{min-height:clamp(620px,92vh,820px);} }
@media (prefers-reduced-motion: reduce){ .spotlight-video{display:none;} .spotlight{background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);} }

/* ---------- section scaffolding ---------- */
section{padding-block:64px; border-bottom:1px solid var(--line);}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap;}
.section-head h1, .section-head h2{margin:6px 0 0; font-size:clamp(1.7rem,3.4vw,2.3rem); font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em;}
.tabs{display:flex; gap:8px; flex-wrap:wrap;}
.tab{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5em 1em; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.tab[aria-pressed="true"]{border-color:var(--maroon-light); color:var(--ink); background:var(--surface-2);}
.tab:hover{color:var(--ink);}

/* ---------- shop filter sidebar (shop.html) ---------- */
.shop-layout{display:grid; grid-template-columns:minmax(200px,22%) 1fr; gap:40px; align-items:start;}
.shop-main{min-width:0;}
.filters-open-btn{display:none; align-items:center; gap:8px; margin-bottom:20px;}

.filter-sidebar{
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--line); padding:18px 20px; position:sticky; top:90px;
}
.filter-sidebar-head{display:none;}

.filter-group{border-top:1px solid var(--line); padding-block:14px;}
.filter-group:first-of-type{border-top:none; padding-top:0;}
.filter-group summary{
  display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink); list-style:none;
}
.filter-group summary::-webkit-details-marker{display:none;}
.filter-group summary::marker{content:"";}
.filter-group .chev{flex:none; transition:transform .18s ease;}
.filter-group[open] > summary .chev{transform:rotate(90deg);}
.filter-options{display:flex; flex-direction:column; gap:11px; margin-top:14px;}
.filter-check{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink-soft); cursor:pointer; transition:color .15s ease;}
.filter-check:hover{color:var(--ink);}
.filter-check input[type="checkbox"]{width:15px; height:15px; flex:none; accent-color:var(--maroon-light); cursor:pointer;}
.filter-check .swatch-dot{width:14px; height:14px; border-radius:50%; border:1px solid var(--line); flex:none;}
.filter-reset-btn{margin-top:16px; align-self:flex-start;}
.filter-empty{grid-column:1/-1; text-align:center; color:var(--ink-soft); padding-block:48px; font-size:.9rem;}

@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;}
  .filters-open-btn{display:inline-flex;}
  .filter-sidebar{
    position:fixed; top:0; left:0; z-index:66; height:100%; width:min(340px,86vw);
    background:var(--bg); border:none; border-right:1px solid var(--line);
    transform:translateX(-100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto; padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .filter-sidebar.open{transform:translateX(0);}
  .filter-sidebar-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);
  }
  .filter-close-btn{background:none; border:none; cursor:pointer; color:var(--ink); padding:4px;}
}
@media (prefers-reduced-motion: reduce){ .filter-sidebar{transition:none;} }

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr);} }
.card{
  display:flex; flex-direction:column; gap:12px; position:relative;
}
.swatch{
  aspect-ratio:4/5; background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover .swatch{border-color:var(--maroon-light); transform:translateY(-5px); box-shadow:0 14px 28px rgba(0,0,0,.35);}
.swatch svg{width:52%; height:52%; transition:transform .35s cubic-bezier(.22,.61,.36,1);}
.card:hover .swatch svg{transform:scale(1.06) rotate(-2deg);}
.swatch-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:1;
  background:var(--surface); visibility:visible;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
.swatch-photo-back{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:2;
  background:var(--surface); opacity:0;
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .card:hover .swatch-photo{transform:scale(1.06);}
  .card:hover .swatch-photo:has(+ .swatch-photo-back){visibility:hidden;}
  .card:hover .swatch-photo-back{opacity:1; transform:scale(1.06);}
}
@media (prefers-reduced-motion: reduce){
  .swatch-photo-back{transition:none;}
}
.swatch-tint{position:absolute; inset:0; z-index:1; pointer-events:none;}
.code{position:absolute; top:10px; left:10px; font-size:.66rem; z-index:2;}
.code.right{left:auto; right:10px; color:var(--ink-soft);}
.card h3{
  margin:0; font-size:1rem; font-weight:500; line-height:1.3; min-height:2.6em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.card .meta{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.price{font-size:.95rem;}
.sizes{display:flex; gap:6px; flex-wrap:wrap;}
.size-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.size-guide-link{background:none; border:none; padding:0; cursor:pointer; font-family:inherit; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; transition:color .2s;}
.size-guide-link:hover, .size-guide-link:focus-visible{color:var(--ink);}
.size-chip{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; font-size:.68rem; width:34px; height:28px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
}
.size-chip[aria-pressed="true"]{border-color:var(--maroon-light); color:var(--ink); background:var(--surface-2);}
@media (max-width:520px){ .size-chip{width:42px; height:40px;} }
.card .row-actions{display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:2px;}
.card .row-actions .btn.small{flex:1; padding-inline:.6em; white-space:nowrap;}

/* shop.html product cards only — colour-differentiated Add to Cart / Buy now */
.shop-actions .add-btn{background:transparent; border-color:var(--cream); color:var(--cream);}
.shop-actions .add-btn:hover{background:var(--cream); border-color:var(--cream); color:#1a1616;}
.shop-actions .buy-btn{background:var(--maroon); border-color:var(--maroon); color:var(--maroon-ink);}
.shop-actions .buy-btn:hover{background:var(--maroon-light); border-color:var(--maroon-light); color:var(--maroon-ink);}

/* ---------- card spotlight (pointer-follow glow, Featured + Shop grids) ---------- */
/* Registered so the browser can smoothly interpolate the gradient stops;
   unregistered browsers still show the glow, it just jumps instead of easing. */
@property --inner-size{ syntax:"<length-percentage>"; inherits:true; initial-value:0px; }
@property --outer-size{ syntax:"<length-percentage>"; inherits:true; initial-value:0px; }
.card-spotlight{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(circle, rgba(247,233,231,.16), rgba(247,233,231,0) 68%);
  mask-image:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), black var(--inner-size,0px), transparent var(--outer-size,0px));
  -webkit-mask-image:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), black var(--inner-size,0px), transparent var(--outer-size,0px));
  mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  opacity:0;
  transition:opacity .25s ease, --inner-size .25s ease-in-out, --outer-size .25s ease-in-out;
}
@media (hover:hover) and (pointer:fine){
  .card:hover .card-spotlight, .card:focus-within .card-spotlight{
    opacity:1; --inner-size:60px; --outer-size:260px;
  }
}
@media (prefers-reduced-motion: reduce){
  .card-spotlight{ transition:none; }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--maroon) 0%, #2c0a0a 100%); border-bottom:1px solid var(--line);
  padding-block:0; text-align:center;
}
.cta-banner .wrap{padding-block:68px 60px;}
.cta-banner h2{margin:0 0 24px; font-size:clamp(1.8rem,4vw,2.8rem); color:#F3E6D5;}
.cta-banner p{margin:0; color:#F3E6D5;}

/* ---------- marquee strip (cta-banner) ---------- */
.marquee{width:100%; overflow:hidden;}
.marquee--top{border-bottom:1px solid rgba(247,233,231,.16);}
.marquee--bottom{border-top:1px solid rgba(247,233,231,.16);}
.marquee-track{display:flex; width:max-content; animation:marqueeScroll 34s linear infinite;}
.marquee-track--reverse{animation-direction:reverse;}
.marquee-set{display:flex; align-items:center; flex-shrink:0;}
.marquee-item{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; font-size:clamp(.62rem,1vw,.75rem); line-height:1.5; color:#F3E6D5; white-space:nowrap; padding-block:5px;
}
.marquee-dot{color:#F3E6D5; font-size:.9em; margin-inline:1.4em; white-space:nowrap;}
@keyframes marqueeScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ---------- photo + copy split section ---------- */
.photo-split{padding-block:64px;}
.photo-split .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.photo-split .photo-box{
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--surface);
  aspect-ratio:1412/1114;
}
.photo-split .photo-box.reveal{transition-delay:.12s;}
.photo-split .photo-box img{display:block; width:100%; height:100%; object-fit:contain;}
.photo-split .copy{text-align:center; display:flex; flex-direction:column; align-items:center;}
.photo-split .copy .eyebrow{margin:0 0 16px; font-size:.9rem;}
.photo-split .copy h2{margin:0 0 30px; font-size:clamp(1.5rem,2.8vw,2rem); line-height:1.3;}
.photo-split .copy p{margin:0 0 16px; color:var(--ink-soft); line-height:1.5; max-width:38ch;}
.photo-split .copy .btn{margin:0 auto;}
@media (max-width:760px){
  .photo-split .wrap{grid-template-columns:1fr; gap:28px;}
}

/* ---------- lookbook ---------- */
.lookbook-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:860px){ .lookbook-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .lookbook-grid{grid-template-columns:1fr;} }
.plate{
  position:relative; overflow:hidden; border:1px solid var(--line); min-height:220px; aspect-ratio:4/5;
}
.plate .texture{position:absolute; inset:0; transition:transform .5s ease;}
.plate:hover .texture{transform:scale(1.06);}
.plate .photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0;}
.plate .tint{position:absolute; inset:0; z-index:0; pointer-events:none;}
.plate .cap{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(to top, rgba(0,0,0,.6), transparent); color:#f2efe8;}
.plate .cap .eyebrow{color:#e0b8b2;}

/* ---------- about ---------- */
.about-open{padding-block:clamp(64px,12vw,120px) 52px;}
.about-open .wrap{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;}
.about-open-h{margin:6px 0 0; font-size:clamp(2.1rem,6vw,4.2rem); line-height:.96;}
.about-rule{width:64px; height:3px; border-radius:2px; background:var(--maroon-light); margin-top:4px;}
.about-open-sub{margin:0; color:var(--ink-soft); font-size:.95rem; letter-spacing:.05em; text-transform:uppercase;}

.story-block{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.story-media{margin:0;}
.story-frame{
  background:var(--cream); border-radius:6px; padding:clamp(18px,4vw,40px);
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.story-frame img{width:100%; height:100%; object-fit:contain; display:block;}
.story-cap{display:block; margin-top:14px; color:var(--ink-soft); font-size:.76rem; letter-spacing:.04em;}
.story-copy h2{margin:8px 0 20px; font-size:clamp(1.6rem,3.2vw,2.3rem);}
.story-copy p{color:var(--ink-soft); line-height:1.7; margin:0 0 16px; max-width:52ch;}
.material-note{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:.85rem; color:var(--ink-soft);}
.material-swatch{width:16px; height:16px; border-radius:50%; flex:none; display:inline-block; background:var(--maroon);}
@media (max-width:820px){ .story-block{grid-template-columns:1fr; gap:28px;} }

.stats-strip{
  background:var(--maroon); padding-block:56px; border-bottom:1px solid var(--line);
  --ink-soft:#e3b4ac; --line:rgba(247,233,231,.28);
}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.stat-block{text-align:center; padding-inline:16px; border-left:1px solid var(--line);}
.stat-block:first-child{border-left:none;}
.stat-num{display:block; margin-bottom:8px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size:clamp(1.5rem,3.2vw,2.3rem); text-transform:uppercase; color:var(--cream); font-variant-numeric:tabular-nums;}
.stat-block span{color:var(--ink-soft); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;}
@media (max-width:820px){
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:28px;}
  .stat-block:nth-child(3){border-left:none;}
}

.about-quote{position:relative; overflow:hidden; background:#0a0909; padding-block:clamp(80px,14vw,140px); text-align:center;}
.quote-wordmark{
  position:absolute; right:-4vw; bottom:-12%; z-index:0; pointer-events:none;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(9rem,32vw,26rem); line-height:1; letter-spacing:-.02em; white-space:nowrap;
  color:var(--ink); opacity:.04;
}
.about-quote .wrap{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px;}
.quote-text{margin:0; font-style:italic; font-weight:600; font-size:clamp(1.6rem,4.2vw,3rem); line-height:1.25; max-width:18ch; color:var(--cream);}

.about-cta{max-width:640px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px;}
.about-cta p:not(.eyebrow){color:var(--ink-soft); max-width:46ch;}

/* ---------- contact (checkout modal fields reuse these) ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.field input, .field textarea, .field select{
  font:inherit; padding:.7em .8em; background:var(--surface); border:1px solid var(--line); color:var(--ink);
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--maroon-light); outline-offset:1px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:420px){ .field-row{grid-template-columns:1fr;} }
.copy-line{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); padding:.4em .7em; font-size:.78rem;}
.copy-line button{border:none; background:none; cursor:pointer; color:var(--maroon-light); font:inherit;}

/* ---------- contact page ---------- */
.contact-hero{padding-block:clamp(64px,12vw,112px) 48px; border-bottom:none;}
.contact-hero .wrap{max-width:760px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;}
.contact-hero .eyebrow{font-size:1rem; font-weight:700; letter-spacing:.2em; color:var(--maroon-light); margin-bottom:6px;}
.contact-hero-h{margin:2px 0 0; font-size:clamp(2.2rem,7vw,4.4rem); line-height:.96;}
.contact-hero-sub{margin:0; color:var(--ink-soft); font-size:1.05rem; line-height:1.6; max-width:44ch;}
@media (max-width:820px){ .contact-hero{padding-top:44px;} }

.contact-main{background:var(--surface); border-block:1px solid var(--line);}
.contact-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:820px){ .contact-split{grid-template-columns:1fr; gap:36px;} }

.contact-info h2{margin:8px 0 14px; font-size:clamp(1.6rem,3.2vw,2.2rem);}
.contact-intro{margin:0 0 28px; color:var(--ink-soft); line-height:1.6; max-width:42ch;}
.contact-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 20px;}
@media (max-width:420px){ .contact-detail-grid{grid-template-columns:1fr;} }
.cd-item h3{margin:0 0 8px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.cd-link{font-size:1rem; color:var(--ink); border-bottom:1px solid transparent; transition:border-color .18s ease, color .18s ease;}
.cd-link:hover{color:var(--maroon-light); border-color:var(--maroon-light);}
.cd-social{display:flex; align-items:center; gap:8px; border-bottom:none;}
.cd-social:hover{border-color:transparent;}
.cd-social + .cd-social{margin-top:8px;}
.cd-icon{flex:none; color:var(--ink-soft); transition:color .18s ease;}
.cd-social:hover .cd-icon{color:var(--maroon-light);}

.contact-form-wrap{
  background:var(--surface-2); border:1px solid var(--cream); border-radius:8px;
  padding:clamp(24px,4vw,40px);
}
.underline-form{display:flex; flex-direction:column;}
.uf-field{display:flex; flex-direction:column; gap:6px; margin-bottom:22px;}
.uf-field label{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cream);}
.uf-field input, .uf-field textarea{
  font:inherit; font-size:1rem; padding:.5em 0; background:transparent; color:var(--cream);
  border:none; border-bottom:1px solid rgba(243,230,213,.4); border-radius:0; transition:border-color .2s ease;
}
.uf-field input::placeholder, .uf-field textarea::placeholder{color:var(--ink-soft); opacity:1;}
.uf-field textarea{resize:vertical; min-height:90px;}
.uf-field input:focus, .uf-field textarea:focus{outline:none; border-color:var(--maroon-light);}
.underline-form > .btn{align-self:flex-start; margin-top:6px;}
.form-success{
  font-size:.85rem; color:var(--maroon-light); margin:14px 0 0; min-height:1em;
  opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease;
}
.form-success.show{opacity:1; transform:translateY(0);}

/* ---------- FAQ ---------- */
.faq-section{padding-block:clamp(64px,10vw,96px);}
.faq-layout{display:grid; grid-template-columns:300px 1fr; gap:48px;}
@media (max-width:820px){ .faq-layout{grid-template-columns:1fr; gap:24px;} }
.faq-head{position:sticky; top:100px; align-self:start;}
.faq-head h2{margin:8px 0 0; font-size:clamp(1.7rem,3.4vw,2.4rem);}
@media (max-width:820px){ .faq-head{position:static;} }

.faq-list{display:flex; flex-direction:column;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  display:flex; align-items:center; gap:18px; padding-block:22px; cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:"";}
.faq-num{color:var(--ink-soft); font-size:.8rem; flex:none;}
.faq-q{flex:1; font-size:1.02rem; font-weight:500;}
.faq-icon{width:14px; height:14px; position:relative; flex:none; color:var(--ink-soft); transition:color .18s ease;}
.faq-icon::before, .faq-icon::after{content:""; position:absolute; background:currentColor;}
.faq-icon::before{top:50%; left:0; width:100%; height:1px; transform:translateY(-50%);}
.faq-icon::after{left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); transition:transform .25s ease;}
.faq-item[open] .faq-icon{color:var(--maroon-light);}
.faq-item[open] .faq-icon::after{transform:translateX(-50%) rotate(90deg);}
.faq-item[open] summary .faq-q{color:var(--ink);}
.faq-a{padding:0 0 24px 32px; max-width:62ch;}
.faq-a p{margin:0; color:var(--ink-soft); line-height:1.7;}
@media (max-width:520px){ .faq-a{padding-left:0;} }

/* ---------- closing CTA banner (contact.html only — black, not maroon) ---------- */
.contact-cta-banner{
  background:linear-gradient(120deg, var(--bg) 0%, #000 100%);
  padding-block:clamp(64px,12vw,96px); text-align:center;
}
.contact-cta-banner .eyebrow{color:var(--cream);}
.contact-cta-banner h2{margin:10px 0 30px; font-size:clamp(1.9rem,4.4vw,3rem); color:var(--cream); max-width:20ch; margin-inline:auto;}
.btn.btn-inverse{background:var(--cream); border-color:var(--cream); color:#1a1616;}
.btn.btn-inverse:hover{background:var(--maroon-light); border-color:var(--maroon-light); color:var(--cream);}

/* ---------- footer ---------- */
footer{
  background:var(--maroon); padding-block:44px 60px;
  --ink-soft:#e3b4ac; --line:rgba(247,233,231,.28); --maroon-light:#f3d0c8;
}
footer .newsletter button:hover{background:var(--ink); color:var(--maroon);}
footer .newsletter input::placeholder{color:#e3b4ac; opacity:1;}

/* contact.html only — black footer instead of maroon */
footer.footer-dark{
  background:var(--bg);
  --ink-soft:#a99e98; --line:#332b2b; --maroon-light:#7d2323;
}
footer.footer-dark .newsletter button:hover{background:var(--cream); color:var(--bg);}
footer.footer-dark .newsletter input::placeholder{color:#a99e98;}
.foot-grid{display:grid; grid-template-columns:1.57fr .63fr 1fr 1.4fr; gap:32px;}
@media (max-width:820px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .foot-grid > div:first-child, .foot-grid > div:last-child{grid-column:1 / -1;} }
@media (max-width:520px){ .foot-grid{grid-template-columns:minmax(0,1fr);} }
.foot-grid h3{margin:0 0 12px; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#F3E6D5;}
.footer-logo{display:block; width:115px; max-width:100%; height:auto; margin:0 0 4px;}
.foot-brand p{max-width:272px; color:#fff;}
.foot-news-copy{color:#fff;}
.foot-grid h4{margin:26px 0 10px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400; color:#F3E6D5; opacity:.75;}
.foot-social{display:flex; gap:14px;}
.foot-social a{color:#fff; display:inline-flex; transition:color .2s;}
.foot-social a:hover, .foot-social a:focus-visible{color:#F3E6D5;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.88rem;}
.foot-grid ul a, .foot-grid ul button{text-decoration:none; background:none; border:none; color:inherit; font:inherit; padding:0; text-align:left; cursor:pointer; display:inline-block;}
.foot-grid ul a:hover, .foot-grid ul button:hover{text-decoration:underline;}
.newsletter{display:flex; gap:0; border:1px solid var(--ink); border-radius:999px; overflow:hidden;}
.newsletter input{flex:1; min-width:0; border:none; background:transparent; padding:.75em 1.1em; font:inherit; color:var(--ink);}
.newsletter input:focus{outline:none;}
.newsletter button{border:none; border-left:1px solid var(--ink); background:transparent; color:var(--ink); padding:.75em 1.4em; cursor:pointer; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; font-size:.72rem; text-transform:uppercase;}
.newsletter button:hover{background:var(--maroon); color:var(--maroon-ink);}
.foot-note{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--ink-soft); font-size:.78rem;}
.foot-note a{color:inherit; text-decoration:underline; text-underline-offset:3px; transition:color .2s;}
.foot-note a:hover, .foot-note a:focus-visible{color:#F3E6D5;}
.toast-inline{font-size:.78rem; color:var(--maroon-light); margin-top:8px; min-height:1em;}

/* ---------- cart drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60;}
.scrim.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--bg); z-index:61;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
  border-left:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--line);}
.drawer-head button{background:none; border:none; cursor:pointer; color:var(--ink);}
.drawer-body{flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:16px;}
.drawer-empty{color:var(--ink-soft); font-size:.9rem; padding-block:30px; text-align:center;}
.line-item{display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;}
.li-swatch{width:56px; height:66px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.li-swatch svg{width:60%; height:60%;}
.li-swatch img{width:100%; height:100%; object-fit:cover; display:block;}
.li-name{font-size:.9rem; font-weight:500; margin:0;}
.li-meta{color:var(--ink-soft); font-size:.75rem; margin:2px 0 0;}
.li-qty{display:flex; align-items:center; gap:6px; margin-top:8px;}
.li-qty button{width:30px; height:30px; border:1px solid var(--line); background:none; color:var(--ink); cursor:pointer; font-size:.85rem; line-height:1; transition:border-color .15s ease;}
.li-qty button:hover{border-color:var(--maroon-light);}
.li-remove{grid-column:1/-1; justify-self:end; background:none; border:none; color:var(--danger); font-size:.72rem; cursor:pointer; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.05em;}
.drawer-foot{border-top:1px solid var(--line); padding:18px 20px 22px; display:flex; flex-direction:column; gap:12px;}
.subtotal-row{display:flex; justify-content:space-between; font-size:.95rem;}
.subtotal-row .mono{font-size:1.05rem;}
.drawer-actions{display:flex; flex-direction:column; gap:10px;}
.drawer-actions .btn{width:100%;}

/* ---------- checkout modal ---------- */
.modal-scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:flex-start; justify-content:center; z-index:70; overflow-y:auto; padding:40px 16px;}
.modal-scrim.open{display:flex;}
.modal{background:var(--bg); border:1px solid var(--line); max-width:520px; width:100%; padding:32px; margin-block:auto; position:relative; animation:modalIn .25s cubic-bezier(.22,.61,.36,1);}
@keyframes modalIn{ from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
.modal h3{margin:0 0 6px; font-size:1.5rem;}
.modal p.lead{color:var(--ink-soft); font-size:.88rem; margin:0 0 24px;}
.modal-close{position:absolute; top:14px; right:14px; background:none; border:none; cursor:pointer; color:var(--ink);}
.order-summary{background:var(--surface); border:1px solid var(--line); padding:14px 16px; margin-bottom:20px; font-size:.85rem; display:flex; flex-direction:column; gap:6px;}
.order-summary .os-row{display:flex; justify-content:space-between;}
.confirm-state{display:none; flex-direction:column; gap:14px; text-align:left;}
.confirm-state.show{display:flex;}
.confirm-state .eyebrow{color:var(--maroon-light);}
.confirm-note{font-size:.76rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:14px;}

/* ---------- checkout page ---------- */
.checkout-section{padding-block:48px clamp(64px,10vw,96px);}
.checkout-layout{display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start;}
@media (max-width:900px){ .checkout-layout{grid-template-columns:1fr; gap:36px;} }

.checkout-title{margin:6px 0 32px; font-size:clamp(1.8rem,3.6vw,2.6rem);}

.co-block{border-top:1px solid var(--line); padding-block:26px;}
.co-block:first-of-type{border-top:none; padding-top:0;}
.co-block h2{margin:0 0 18px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream);}
.uf-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:480px){ .uf-row{grid-template-columns:1fr;} }
.uf-hint{display:block; margin-top:6px; font-size:.76rem; color:var(--ink-soft);}

.co-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid rgba(243,230,213,.4); border-radius:6px; padding:14px 16px; color:var(--cream);
}
.co-option-left{display:flex; align-items:center; gap:10px; font-size:.92rem;}
.co-option-left input[type="radio"]{accent-color:var(--maroon-light); width:16px; height:16px; opacity:1;}
.co-payment-note{margin:12px 2px 0; color:var(--ink-soft); font-size:.82rem;}

#placeOrderBtn{margin-top:30px; width:100%;}

.checkout-summary-col{position:sticky; top:90px;}
.checkout-summary-box{
  background:var(--surface-2); border:1px solid var(--cream); border-radius:8px;
  padding:clamp(20px,3vw,28px); display:flex; flex-direction:column; gap:20px;
}
.cs-lines{display:flex; flex-direction:column; gap:18px;}
.cs-lines .cs-line + .cs-line{border-top:1px solid var(--line); padding-top:18px;}
.cs-line{display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center;}
.cs-thumb{width:64px; height:76px; background:var(--surface); border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; flex:none;}
.cs-thumb img{width:100%; height:100%; object-fit:cover;}
.cs-name{margin:0 0 4px; font-size:.92rem; font-weight:500;}
.cs-meta{margin:0; color:var(--ink-soft); font-size:.78rem;}
.cs-price{font-size:.9rem; white-space:nowrap;}
.cs-totals{display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:18px;}
.cs-row{display:flex; justify-content:space-between; font-size:.88rem; color:var(--ink-soft);}
.cs-row.cs-total{color:var(--ink); font-size:1.05rem; font-weight:500; border-top:1px solid var(--line); padding-top:12px; margin-top:4px;}

.co-confirm{border-top:1px solid var(--line); margin-top:32px; padding-top:32px; display:flex; flex-direction:column; gap:6px;}
.co-confirm-sub{margin:0 0 20px; color:var(--ink-soft); line-height:1.6; max-width:52ch;}
.co-confirm-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; margin-bottom:26px;}
.co-confirm-wide{grid-column:1/-1;}
.co-confirm-item{display:flex; flex-direction:column; gap:4px; font-size:.92rem;}
.co-confirm-label{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.co-confirm-product-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
#coWhatsappBtn{align-self:flex-start;}

.co-empty{padding-block:20px; display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
.co-empty .co-confirm-sub{margin:0;}

/* ---------- policy pages (shipping/return/privacy) ---------- */
.policy-page .wrap{max-width:760px; padding-bottom:64px;}
.policy-page h2{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  color:var(--cream); font-size:clamp(1.15rem,2.4vw,1.5rem); margin:40px 0 14px;
}
.policy-page h2:first-of-type{margin-top:8px;}
.policy-page p{color:var(--ink-soft); line-height:1.7; margin:0 0 16px; max-width:70ch;}
.policy-page ul{color:var(--ink-soft); line-height:1.7; margin:0 0 16px; padding-left:1.2em; max-width:70ch;}
.policy-page ul li{margin-bottom:6px;}
.policy-page ul li::marker{color:var(--maroon-light);}

[hidden]{display:none !important;}

/* ---------- size guide ---------- */
.size-page{padding-top:64px;}
.size-page .wrap{padding-bottom:64px;}
.size-fit{margin:0; color:var(--ink-soft); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;}
.size-layout{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.size-table{width:100%; border-collapse:collapse; margin:0 0 36px; border:1px solid var(--line);}
.size-table th, .size-table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;}
.size-table thead th{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--maroon-light); background:var(--surface);}
.size-table tbody th{font-weight:700; color:#F3E6D5;}
.size-table td{color:var(--ink);}
.size-table tbody tr:last-child th, .size-table tbody tr:last-child td{border-bottom:none;}
.size-steps{display:flex; flex-direction:column; gap:22px;}
.size-steps h2{margin:0 0 6px;}
.size-steps p{margin:0; color:var(--ink-soft); line-height:1.7; font-size:.92rem; max-width:60ch;}
.size-diagram{margin:0; padding:24px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);}
.size-diagram svg{display:block; width:100%; height:auto; max-width:460px; margin:0 auto;}
.size-diagram .sd-dim, .size-diagram .sd-label{color:#F3E6D5;}
.size-diagram .sd-label text{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px; letter-spacing:.14em; font-weight:500;}
.size-note{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:.78rem;}
@media (max-width:820px){ .size-layout{grid-template-columns:1fr; gap:32px;} }

/* ---------- product page ---------- */
a.swatch{color:inherit; text-decoration:none;}
.card-title-link{color:inherit; text-decoration:none;}
.card-title-link:hover, .card-title-link:focus-visible{text-decoration:underline; text-underline-offset:3px;}
.pdp-wrap{padding-top:64px; padding-bottom:72px;}
.pdp{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.pdp-gallery{display:flex; gap:14px; position:sticky; top:96px;}
.pdp-thumbs{display:flex; flex-direction:column; gap:10px; flex:0 0 76px;}
.pdp-thumb{padding:0; width:76px; height:76px; border:1px solid var(--line); background:var(--surface); cursor:pointer; overflow:hidden; transition:border-color .2s ease;}
.pdp-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.pdp-thumb:hover{border-color:var(--ink-soft);}
.pdp-thumb[aria-pressed="true"]{border-color:var(--maroon-light);}
.pdp-main{flex:1; min-width:0; border:1px solid var(--line); background:var(--surface); aspect-ratio:1/1; overflow:hidden;}
.pdp-main img{width:100%; height:100%; object-fit:cover; display:block;}
.pdp-info{display:flex; flex-direction:column; gap:14px; min-width:0;}
.pdp-title-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
.pdp-name{margin:0; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.15; font-weight:700; text-transform:uppercase; letter-spacing:.01em; color:#F3E6D5;}
.pdp-price{font-size:1.15rem; white-space:nowrap;}
.pdp-chart{background:none; border:none; padding:0; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:color .2s;}
.pdp-chart:hover, .pdp-chart:focus-visible{color:var(--ink);}
.pdp-field{display:flex; align-items:center; gap:14px;}
.pdp-label{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); min-width:48px;}
.pdp-color{display:inline-flex; align-items:center; gap:10px; font-size:.9rem;}
.pdp-swatch{width:18px; height:18px; border-radius:50%; border:1px solid var(--ink-soft);}
.pdp-stock{display:flex; align-items:center; gap:8px; margin:2px 0 0; font-size:.82rem; color:var(--ink-soft);}
.pdp-stock .dot{width:8px; height:8px; border-radius:50%; background:#6fae7a;}
.pdp-stock .dot.out{background:#b5564d;}
.pdp-h{margin:18px 0 0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#F3E6D5;}
.pdp-desc{margin:0; color:var(--ink-soft); line-height:1.7; font-size:.92rem;}
.pdp-specs strong{color:var(--ink); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;}
.pdp-list{margin:0; padding-left:1.2em; color:var(--ink-soft); line-height:1.7; font-size:.9rem;}
.pdp-list li::marker{color:var(--maroon-light);}
.pdp-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.pdp-actions .btn{width:100%; justify-content:center; text-align:center;}
.pdp-actions .btn[disabled]{opacity:.45; cursor:not-allowed;}
.pdp-help{margin:6px 0 0; font-size:.8rem; color:var(--ink-soft);}
.pdp-help a{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
.pdp-missing{padding:40px 0; max-width:560px;}
.pdp-missing p{color:var(--ink-soft);}
.pdp-missing a{color:var(--ink); text-decoration:underline;}
.stars{display:inline-block; font-size:1.05rem; letter-spacing:.12em; line-height:1; background:linear-gradient(90deg,var(--maroon-light) var(--pct),#4a3f3f var(--pct)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}
.pdp-reviews{margin-top:72px; padding-top:40px; border-top:1px solid var(--line);}
.pdp-reviews .pdp-h{margin:0 0 28px;}
.rv-layout{display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:start;}
.rv-avg{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;}
.rv-avg-num{font-size:3rem; font-weight:700; line-height:1; color:#F3E6D5;}
.rv-total{font-size:.78rem; color:var(--ink-soft);}
.rv-bars{display:flex; flex-direction:column; gap:10px;}
.rv-bar-row{display:grid; grid-template-columns:52px 1fr 24px; align-items:center; gap:12px; font-size:.76rem; color:var(--ink-soft);}
.rv-bar{height:6px; background:var(--line); display:block; overflow:hidden;}
.rv-bar-fill{display:block; height:100%; background:var(--maroon-light);}
.rv-bar-count{text-align:right;}
.rv-list{display:flex; flex-direction:column;}
.rv-item{padding:0 0 24px; margin:0 0 24px; border-bottom:1px solid var(--line);}
.rv-item:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.rv-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px;}
.rv-verified{display:inline-flex; align-items:center; gap:5px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:2px 8px;}
.rv-date{margin-left:auto; font-size:.74rem; color:var(--ink-soft);}
.rv-item p{margin:10px 0 0; color:var(--ink-soft); line-height:1.7; font-size:.92rem; max-width:64ch;}
.pdp-more{margin-top:80px;}
@media (max-width:980px){
  .pdp{grid-template-columns:1fr; gap:36px;}
  .pdp-gallery{position:static; flex-direction:column-reverse;}
  .pdp-thumbs{flex-direction:row; flex:none;}
  .rv-layout{grid-template-columns:1fr; gap:32px;}
}

/* ---------- size guide popup ---------- */
.modal.size-modal{max-width:880px; padding:36px;}
.size-modal-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 36px 26px 0;}
.size-modal-head h3{margin:0; font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.05;}
.size-modal-head .eyebrow{margin:8px 0 0;}
.size-modal .size-layout{gap:32px;}
.size-modal .size-table{margin-bottom:24px;}
.size-modal .size-table th, .size-modal .size-table td{padding:12px 16px;}
.size-modal .size-steps{gap:16px;}
.size-modal .size-steps h4{margin:0 0 4px;}
.size-modal .size-steps p{font-size:.86rem; line-height:1.6;}
.size-modal .size-diagram{padding:16px;}
.size-modal .size-note{margin-top:28px;}
@media (max-width:820px){ .modal.size-modal{padding:28px 20px;} }
#sizeModalScrim{padding-top:92px;}

/* ---------- checkout: field + block visibility, order confirmation ---------- */
#checkoutOrderForm .co-block,
#checkoutOrderForm .co-block:first-of-type{border:1px solid rgba(243,230,213,.25); border-radius:8px; padding:24px; margin-bottom:18px;}
#checkoutOrderForm .uf-field input{
  padding:.7em .85em; background:rgba(243,230,213,.04);
  border:1px solid rgba(243,230,213,.4); border-radius:6px;
}
#checkoutOrderForm .uf-field input:hover{border-color:rgba(243,230,213,.6);}
#checkoutOrderForm .uf-field input:focus{border-color:var(--maroon-light); box-shadow:0 0 0 3px rgba(125,35,35,.55); background:rgba(243,230,213,.07);}
.co-confirm{
  margin-top:0; padding:clamp(24px,4vw,36px); gap:8px;
  border:1px solid var(--cream); border-left:5px solid var(--maroon-light); border-radius:8px; background:var(--surface-2);
  scroll-margin-top:96px;
}
.co-confirm:focus{outline:none;}
.co-confirm-badge{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--cream); color:var(--cream); display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.co-confirm .eyebrow{color:var(--cream);}
.co-confirm > h2{margin:0 0 6px; font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.1;}
.co-error{margin:22px 0 0; padding:14px 16px; border:1px solid #b5564d; border-left:5px solid #b5564d; border-radius:6px; background:rgba(181,86,77,.12); color:var(--cream); font-size:.9rem; line-height:1.5;}

/* ---------- large / wide monitors ---------- */
@media (min-width:1600px){
  .hero{min-height:max(100svh,780px);}
  .hero-copy h1{font-size:clamp(4rem,4.2vw,6rem);}
  .hero-copy p{font-size:clamp(1.02rem,1.05vw,1.3rem); max-width:52ch;}
  .spotlight-copy h2{font-size:clamp(2.4rem,2.6vw,3.6rem);}
  .spotlight{min-height:clamp(860px,80vh,1100px);}
}

/* hero text: pinned to the left edge of the wide hero, scaled to the viewport */
@media (min-width:1600px){
  .hero-copy{
    left:0; right:auto; margin-inline:0; max-width:min(100%,60vw);
    padding-inline:calc(max(0px,(100% - var(--container)) / 2) + var(--gutter)) 0;
    align-items:flex-start; justify-content:flex-end; text-align:left;
    bottom:clamp(88px,10vh,150px); gap:clamp(22px,1.6vw,34px);
  }
  .hero-copy .eyebrow{font-size:clamp(.8rem,.75vw,1rem);}
  .hero-copy h1{font-size:clamp(3.5rem,min(6vw,11vh),9rem);}
  .hero-copy p{max-width:clamp(46ch,34vw,64ch);}
  .hero-cta{justify-content:flex-start; align-self:flex-start; gap:clamp(14px,1vw,22px);}
}

/* header: 3-zone grid (logo | nav | icons) so left/right zones are always equal.
   Desktop only; the mobile (<=760px) flex layout with the hamburger is untouched. */
@media (min-width:761px){
  .headbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:24px;}
  .headbar > .wordmark{justify-self:start;}
  .headbar > nav.primary{justify-self:center;}
  .headbar > .head-actions{justify-self:end; gap:16px;}
}
@media (min-width:1600px){
  .headbar{padding-block:14px;}
  .wordmark{font-size:clamp(1.2rem,1.15vw,1.6rem);}
  nav.primary{gap:clamp(8px,.8vw,18px);}
  nav.primary a{font-size:clamp(12px,.75vw,15px); padding:6px clamp(10px,.8vw,16px);}
  .cart-btn svg{width:clamp(19px,1.2vw,24px); height:clamp(19px,1.2vw,24px);}
}
}

/* ---------- review form / states ---------- */
.rv-main{display:flex; flex-direction:column; gap:40px; min-width:0;}
.rv-status,.rv-empty p{margin:0; color:var(--ink-soft); line-height:1.6; font-size:.92rem;}
.rv-form{display:flex; flex-direction:column; gap:16px; padding-top:28px; border-top:1px solid var(--line); max-width:560px;}
.rv-list:empty{display:none;}
.rv-form-title{margin:0; font-size:1.05rem; text-transform:uppercase; letter-spacing:.04em; color:#F3E6D5;}
.rv-label{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:6px;}
.rv-stars-input{display:flex; gap:4px;}
.rv-star{background:none; border:none; padding:2px 4px; font-size:1.7rem; line-height:1; color:#4a3f3f; cursor:pointer; transition:color .15s ease, transform .15s ease;}
.rv-star.on{color:var(--maroon-light);}
.rv-star:hover{transform:scale(1.12);}
.rv-star:focus-visible{outline:2px solid var(--maroon-light); outline-offset:2px;}
.rv-form textarea{width:100%; resize:vertical; font:inherit;}
.rv-form .btn{align-self:flex-start;}
.rv-msg{margin:0; min-height:1.2em; font-size:.88rem;}
.rv-msg.ok{color:#9fd3a8;}
.rv-msg.err{color:#e58a8a;}

/* ---------- mobile product grid: 2 cards per row ---------- */
@media (max-width:520px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px;}
  .card{gap:8px; min-width:0;}
  .card .meta{flex-direction:column; align-items:flex-start; gap:2px;}
  .card h3{font-size:.86rem; line-height:1.3; min-height:2.6em; overflow-wrap:anywhere;}
  .price{font-size:.82rem;}
  .code{top:6px; left:6px; font-size:.58rem;}
  .code.right{left:auto; right:6px;}
  .size-row{gap:6px;}
  .sizes{gap:4px; width:100%;}
  .size-chip{flex:1 1 0; min-width:0; width:auto; height:34px; font-size:.66rem;}
  .size-guide-link{font-size:.6rem; letter-spacing:.08em;}
  .card .row-actions{flex-direction:column; align-items:stretch; gap:6px;}
  .card .row-actions .btn.small{flex:none; width:100%; padding:.7em .4em; font-size:.64rem; letter-spacing:.06em;}
}

/* ---------- mobile hero: whole hero (incl. CTA) inside the first screen ---------- */
@media (max-width:760px){
  :root{--header-h:53px;}
  /* sticky header is in normal flow above the hero, so subtract it; vh first as the fallback */
  .hero{min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h));}
  .hero-video{object-fit:cover; object-position:center;}
  .hero-copy{bottom:clamp(24px,5svh,44px); gap:clamp(12px,2.2svh,18px);}
  .hero-copy h1{font-size:clamp(2rem,min(11vw,7.5svh),3rem);}
  .hero-copy p{font-size:.95rem; line-height:1.5;}
}
@media (max-width:760px) and (max-height:700px){
  .hero-copy p{font-size:.88rem; line-height:1.45;}
}

/* ---------- reviews: stacked order (summary -> form -> list) + outlined cards ---------- */
.rv-layout{grid-template-columns:minmax(0,1fr); gap:36px;}
.rv-main{gap:36px;}
.rv-form{border-top:none; padding-top:0;}
.rv-list{display:flex; flex-direction:column; gap:16px;}
.rv-item,.rv-item:last-child{
  border:1px solid rgba(243,230,213,.25); border-radius:8px; padding:18px 20px; margin:0;
}
.rv-item p{margin:10px 0 0;}
@media (max-width:520px){ .rv-item,.rv-item:last-child{padding:16px;} }

/* ---------- reviews: summary full width, then form | list side by side (760px+) ---------- */
.rv-list-col{display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:0;}
.rv-list-col .rv-list{width:100%;}
.rv-more[hidden]{display:none;}
@media (min-width:761px){
  .rv-main{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4vw,56px); align-items:start;}
  .rv-form{max-width:none;}
}

/* product photos are wide (4:3) on a black backdrop: show the whole garment instead of cropping the sides */
.pdp-main{background:#000;}
.pdp-main img{object-fit:contain;}

/* ---------- 404 page ---------- */
.notfound{display:flex; align-items:center; justify-content:center; min-height:max(62svh,440px); padding-block:clamp(48px,9vw,120px);}
.notfound-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(14px,2vw,22px);}
.notfound-code{margin:0; font-size:clamp(5.5rem,22vw,13rem); line-height:.9; letter-spacing:.02em; color:#F3E6D5;}
.notfound-msg{margin:0; max-width:34ch; color:var(--ink-soft); font-size:clamp(1rem,1.2vw,1.2rem); line-height:1.6;}
.notfound-actions{display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:clamp(6px,1.5vw,14px);}
.notfound-link{color:var(--ink-soft); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--maroon-light); padding-bottom:3px; transition:color .2s ease;}
.notfound-link:hover, .notfound-link:focus-visible{color:var(--ink);}