/* ==========================================================================
   LE ROSÈA - Prêt-Couture Womenswear
   Design tokens + shared styles
   ========================================================================== */

:root{
  /* Off-white + gold palette (crisp light scheme) */
  --ivory: #F4F1E9;
  --espresso: #12100E;
  --gold: #B6944D;
  --gold-ink: #8A6A2C;   /* AA-safe gold for text on light surfaces */
  --taupe: #6F5E4F;      /* darkened for AA as secondary text */
  --white: #FDFCF9;
  --black: #070605;

  --paper: #F5F2EA;      /* page background */
  --sand: #EFE8DA;       /* alternate light band */
  --champagne: #F2ECDD;  /* soft accent band */
  --ink-soft: #574E45;   /* AA-safe body/secondary text on light */

  --gold-soft: rgba(182,148,77,0.18);
  --taupe-soft: rgba(141,119,100,0.28);
  --border-hair: 1px solid rgba(18, 16, 14, 0.12);

  --serif: "Iowan Old Style", "Baskerville", "Bodoni 72", "Didot", "Palatino Linotype", "Times New Roman", serif;
  --sans: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 64px);

  --radius: 8px;
  --speed: 320ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .motion-reveal,
  .hero-emblem,
  .hero-art,
  .art.tall{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .main-nav a::after,
  .text-link::after{
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .btn:hover,
  .product-card:hover .art,
  .cat-tile:hover .art{
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  .hero-emblem svg path{
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

body{
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 500;
  margin: 0 0 0.5em;
  line-height: 1.15;
  color: var(--espresso);
  letter-spacing: 0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
h4{ font-size: 1.15rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0.04em; }

p{ margin: 0 0 1em; max-width: 62ch; }
p.lede{ font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--espresso); max-width: 46ch; }

a{ color: inherit; text-decoration: none; }

img, svg{ max-width: 100%; display: block; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.center{ text-align: center; margin-left: auto; margin-right: auto; }

/* Eyebrow - used only functionally (section kickers that are short, not decorative meta-strings) */
.eyebrow{
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--taupe);
  font-weight: 500;
}

.rule{
  border: none;
  border-top: var(--border-hair);
  margin: 0;
}
.rule-gold{
  border: none;
  border-top: 1px solid var(--gold);
  width: 56px;
  margin: 18px 0;
}
.rule-gold.center{ margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--espresso);
  background: transparent;
  color: var(--espresso);
  cursor: pointer;
  transition:
    transform 400ms var(--ease-premium),
    box-shadow 400ms var(--ease-premium),
    background var(--speed) var(--ease),
    color var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
  white-space: nowrap;
}
.btn:hover{ background: var(--espresso); color: var(--white); }
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(36, 28, 24, 0.12);
}
.btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.btn-primary{
  background: var(--espresso);
  color: var(--white);
  border-color: var(--espresso);
}
.btn-primary:hover{ background: var(--black); border-color: var(--black); }

.btn-light{
  border-color: var(--white);
  color: var(--white);
}
.btn-light:hover{ background: var(--white); color: var(--espresso); }

.btn-gold{
  border-color: var(--gold);
  color: var(--espresso);
  background: var(--gold);
}
.btn-gold:hover{ background: var(--espresso); border-color: var(--espresso); color: var(--white); }

.btn-block{ width: 100%; }
.btn-sm{ padding: 10px 20px; font-size: 0.72rem; }

.text-link{
  position: relative;
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding-bottom: 4px;
  transition: color var(--speed) var(--ease);
}
.text-link::after,
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--ease-premium);
}
.text-link:hover::after,
.main-nav a:hover::after,
.main-nav a.active::after{ transform: scaleX(1); }

/* ---------- Header ---------- */
#site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ivory);
  border-bottom: var(--border-hair);
}
body.homepage #site-header{
  position: relative;
  top: auto;
  border-bottom: none;
  background: var(--ivory);
}
.header-bar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px var(--gutter);
  gap: 12px;
}
.header-side{ display: flex; align-items: center; gap: 22px; }
.header-side.left{ justify-content: flex-start; }
.header-side.right{ justify-content: flex-end; }

.logo{
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  text-align: center;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.logo .rose-mark{ width: 22px; height: 22px; color: var(--gold); }

/* Real rose logo (transparent gold PNG) - reads on the dark header + footer. */
.logo-img{ height: 40px; width: auto; display: block; }
.home-logo .logo-img{ height: 58px; }
.footer-brand .logo-img{ height: 44px; }
@media (max-width: 620px){
  .home-logo .logo-img{ height: 44px; }
}

.home-header{
  max-width: 1450px;
  margin: 0 auto;
  padding: 24px var(--gutter) 18px;
}
.home-header-top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.home-header-top .home-icon-link,
.home-header-top .home-icon-btn{
  color: var(--gold);
}
.home-icon-link{
  width: 30px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.home-icon-link svg,
.home-icon-btn svg{
  width: 28px;
  height: 28px;
}
.home-header-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.home-logo{
  flex-direction: column;
  gap: 8px;
  color: var(--gold);
  letter-spacing: 0.16em;
  line-height: 1;
}
.home-logo .rose-mark{
  width: 48px;
  height: 48px;
  color: var(--gold);
}
.home-header-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(26px, 3vw, 48px);
  margin-top: 20px;
  flex-wrap: wrap;
}
.home-header-nav a{
  position: relative;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
  padding-bottom: 8px;
}
.home-header-nav a::after,
.home-collections-toggle::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--ease-premium);
}
.home-header-nav a.active::after,
.home-collections-toggle::after{
  transform: scaleX(1);
}
.home-collections-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
}
.home-collections-toggle span{
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--gold);
}
.home-collections-panel{
  margin: 18px auto 0;
  max-width: 1440px;
  background: rgba(252,250,246,0.88);
  border: 1px solid rgba(176,138,60,0.18);
  box-shadow: 0 12px 28px rgba(36, 28, 24, 0.08);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  padding: 28px 38px;
}
.home-collections-col{
  text-align: center;
}
.home-collections-col h3{
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: 0.12em;
  margin: 0 0 12px;
  color: var(--gold);
}
.home-collections-divider{
  background: rgba(176,138,60,0.34);
  width: 1px;
}
.home-collections-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-collections-links span{
  width: 1px;
  height: 18px;
  background: rgba(176,138,60,0.38);
}

.main-nav{ display: flex; gap: 26px; }
.main-nav a{
  position: relative;
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--espresso);
  padding-bottom: 6px;
  transition: color var(--speed) var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color: var(--espresso); }

.icon-btn{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 4px;
}
.icon-btn svg{ width: 19px; height: 19px; }
.icon-btn .count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-size: 0.62rem;
  padding: 0 4px;
}

.nav-toggle{ display: none; background: none; border: none; cursor: pointer; }
.nav-toggle svg{ width: 22px; height: 22px; }

.announce-bar{
  background: var(--espresso);
  color: var(--ivory);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 9px var(--gutter);
}

@media (max-width: 880px){
  .main-nav{
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    background: var(--ivory);
    flex-direction: column;
    padding: 90px 34px 34px;
    gap: 22px;
    transform: translateX(100%);
    transition: transform 500ms var(--ease-premium);
    box-shadow: -14px 0 40px rgba(21,19,18,0.12);
  }
  .main-nav.open{ transform: translateX(0); }
  .nav-toggle{ display: block; }
  .header-side.left .main-nav-label{ display:none; }
  .logo{ font-size: 1.2rem; }
  .header-bar{ grid-template-columns: auto 1fr auto; }
}

/* ---------- Footer ---------- */
#site-footer{
  background: var(--espresso);
  color: var(--ivory);
  padding: 70px var(--gutter) 26px;
  margin-top: 100px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
}
.footer-grid h4{ color: var(--ivory); font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 18px; }
.footer-grid ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-grid a{ font-size: 0.85rem; color: #E7DDCB; transition: color var(--speed) var(--ease); }
.footer-grid a:hover{ color: var(--gold); }
.footer-brand p{ color: #C9BBA4; font-size: 0.88rem; max-width: 32ch; }
.footer-bottom{
  max-width: var(--container);
  margin: 50px auto 0;
  padding-top: 22px;
  border-top: 1px solid #ffffff22;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.72rem;
  color: #B7A98F;
  letter-spacing: 0.04em;
}
.social-row{ display: flex; gap: 16px; margin-top: 6px; }
.social-row a{ color: #E7DDCB; }
.social-row a:hover{ color: var(--gold); }

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

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--espresso);
}
.hero-art{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
}
.hero-emblem{
  display: inline-flex;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  color: var(--gold);
  opacity: 0;
  will-change: opacity, transform;
}
.hero-emblem svg{
  width: 100%;
  height: 100%;
}
.hero-emblem svg path{
  transition: stroke-dashoffset 1200ms var(--ease-premium);
}
.hero-emblem.is-ready{ opacity: 1; }
.hero-content{
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 0 var(--gutter) 70px;
  width: 100%;
  text-align: center;
}

.opening-hero{
  position: relative;
  padding: 56px 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(247,241,232,0.94) 100%);
}
.opening-hero-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.opening-hero-layout{
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
  gap: clamp(34px, 5vw, 90px);
  align-items: center;
  padding: clamp(44px, 6vw, 84px) 0 34px;
}
.opening-hero-copy{
  max-width: 560px;
  padding-top: 12px;
}
.opening-hero-copy h1{
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  line-height: 1.04;
  max-width: 9ch;
  margin: 14px 0 16px;
  color: var(--gold);
}
.opening-hero-copy .lede{
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-style: normal;
  color: #8d6d32;
  margin-bottom: 26px;
}
.opening-hero-copy .btn{
  padding-inline: 28px;
}
.opening-hero-visual-wrap{
  position: relative;
  min-height: clamp(480px, 62vw, 760px);
}
.opening-hero-visual{
  position: absolute;
  inset: 0;
  border: 1px solid rgba(176,138,60,0.12);
  /* Neutral gradient fallback only - shown before the video loads. No stray
     image layer behind the video, so nothing can bleed at the edges. */
  background: linear-gradient(140deg, #f7efe1 0%, #e9d4b8 100%);
  box-shadow: 0 26px 62px rgba(36, 28, 24, 0.12);
  overflow: hidden;
  border-radius: var(--radius);
}
.opening-hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.98) contrast(1.02);
}
.opening-hero-visual::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247,241,232,0.84) 0%, rgba(247,241,232,0.12) 44%, rgba(247,241,232,0.02) 100%),
    linear-gradient(180deg, rgba(247,241,232,0.08), rgba(176,138,60,0.08));
}
.opening-features{
  border-top: 1px solid rgba(176,138,60,0.2);
  background: rgba(252,250,246,0.82);
}
.feature-grid{
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.feature-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 20px 18px 24px;
}
.feature-card + .feature-card{
  border-left: 1px solid rgba(176,138,60,0.2);
}
.feature-icon{
  width: 34px;
  height: 34px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feature-icon svg{ width: 100%; height: 100%; }
.feature-card h4{
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.feature-card p{
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #6e5940;
}
@media (max-width: 980px){
  .home-header-top{
    grid-template-columns: auto 1fr auto;
  }
  .home-header-top .home-icon-link{
    width: auto;
  }
  .opening-hero-layout{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .opening-hero-copy{
    max-width: 46rem;
  }
  .opening-hero-visual-wrap{
    min-height: clamp(360px, 74vw, 560px);
  }
  .home-collections-panel{
    grid-template-columns: 1fr;
    padding: 26px 24px;
  }
  .home-collections-divider{
    display: none;
  }
  .feature-grid{
    grid-template-columns: repeat(2, 1fr);
    padding-top: 8px;
  }
  .feature-card:nth-child(2n){
    border-left: 1px solid rgba(176,138,60,0.2);
  }
  .feature-card:nth-child(n+3){
    border-top: 1px solid rgba(176,138,60,0.2);
  }
}
@media (max-width: 620px){
  .home-header{
    padding-inline: 16px;
  }
  .home-header-top{
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .home-logo{
    font-size: 1.05rem;
    letter-spacing: 0.12em;
  }
  .home-logo .rose-mark{
    width: 38px;
    height: 38px;
  }
  .home-header-nav{
    gap: 14px 20px;
  }
  .home-header-nav a{
    font-size: 0.72rem;
  }
  .opening-hero{
    padding-top: 28px;
  }
  .opening-hero-layout{
    padding-top: 28px;
  }
  .opening-hero-copy h1{
    max-width: 100%;
    font-size: clamp(2.35rem, 11vw, 3.2rem);
  }
  .opening-hero-copy .lede{
    font-size: 1rem;
  }
  .feature-grid{
    grid-template-columns: 1fr;
  }
  .feature-card{
    padding: 18px 0 20px;
  }
  .feature-card + .feature-card{
    border-left: none;
  }
  .feature-card:nth-child(n+2){
    border-top: 1px solid rgba(176,138,60,0.2);
  }
}
.hero-content .eyebrow{ color: var(--gold); }
.hero-content h1{
  color: var(--white);
  max-width: 16ch;
  margin: 14px auto 20px;
}
.hero-content .lede{ color: #F1E7D6; margin: 0 auto 30px; }
.hero-actions{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.runway-hero{
  min-height: 92vh;
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 42%;
  background:
    linear-gradient(180deg, rgba(9,8,7,0.12) 0%, rgba(9,8,7,0.78) 72%, rgba(9,8,7,0.92) 100%),
    url("../assets/runway-hero.png") center / cover no-repeat,
    linear-gradient(180deg, #14100f 0%, #241c18 44%, #090807 100%);
}
.runway-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 74px 74px, 74px 74px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 72%);
  pointer-events: none;
}
.runway-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(9,8,7,0.9) 0%, transparent 18%, transparent 82%, rgba(9,8,7,0.9) 100%),
    linear-gradient(180deg, rgba(9,8,7,0.1) 0%, rgba(9,8,7,0.86) 100%);
  pointer-events: none;
}
.runway-hero .hero-art{
  opacity: 0.12;
  filter: contrast(1.2) saturate(1.25);
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.08);
  animation: showPulse 8s var(--ease) infinite alternate;
}
.stage-lights,
.flash-wall,
.runway-perspective,
.runway-ticker,
.cursor-spotlight{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cursor-spotlight{
  z-index: 4;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(252,250,246,0.24) 0%, rgba(176,138,60,0.13) 15%, transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.9;
  transition: background-position 120ms linear;
}
.stage-lights{ z-index: 2; overflow: hidden; }
.beam{
  position: absolute;
  top: -18vh;
  width: 24vw;
  height: 118vh;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(252,250,246,0.58), rgba(176,138,60,0.16) 54%, transparent 84%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: 0.48;
  filter: blur(0.5px);
}
.beam-a{ left: 7vw; transform: rotate(-20deg); animation: sweepA 7s ease-in-out infinite alternate; }
.beam-b{ left: 38vw; width: 28vw; opacity: 0.34; animation: sweepB 8.5s ease-in-out infinite alternate; }
.beam-c{ right: 6vw; transform: rotate(18deg); animation: sweepC 6.5s ease-in-out infinite alternate; }
.flash-wall{ z-index: 4; }
.flash-wall span{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  border: 1px solid rgba(252,250,246,0.72);
  box-shadow: 0 0 24px rgba(252,250,246,0.95), inset 0 0 10px rgba(252,250,246,0.7);
  animation: cameraFlash 3.4s linear infinite;
  animation-delay: var(--d);
}
.runway-perspective{
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 760px;
  overflow: hidden;
}
.runway-strip{
  position: absolute;
  bottom: -18vh;
  width: min(44vw, 540px);
  height: 78vh;
  transform: rotateX(64deg);
  transform-origin: bottom center;
  background:
    linear-gradient(90deg, transparent 0%, rgba(176,138,60,0.28) 11%, transparent 12%, transparent 88%, rgba(176,138,60,0.28) 89%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(252,250,246,0.14) 0 1px, transparent 1px 58px),
    linear-gradient(180deg, rgba(247,241,232,0.11), rgba(176,138,60,0.34) 52%, rgba(252,250,246,0.9));
  box-shadow: 0 -28px 80px rgba(176,138,60,0.38);
}
.runway-strip::before,
.runway-strip::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(252,250,246,0.75), transparent);
}
.runway-strip::before{ left: 18%; }
.runway-strip::after{ right: 18%; }
.audience-row{
  position: absolute;
  bottom: 7vh;
  display: flex;
  gap: clamp(9px, 1.2vw, 20px);
  align-items: flex-end;
  opacity: 0.62;
}
.audience-left{ left: 3vw; transform: skewY(6deg); }
.audience-right{ right: 3vw; transform: skewY(-6deg); }
.audience-row span{
  width: clamp(18px, 3.4vw, 50px);
  height: clamp(54px, 12vw, 148px);
  background:
    linear-gradient(180deg, rgba(21,19,18,0.8), rgba(21,19,18,0.98)),
    linear-gradient(90deg, rgba(176,138,60,0.35), transparent);
  clip-path: polygon(34% 0, 66% 0, 76% 28%, 100% 100%, 0 100%, 24% 28%);
}
.audience-row span:nth-child(even){ height: clamp(44px, 10vw, 126px); opacity: 0.82; }
.model-walk{
  position: absolute;
  bottom: 19vh;
  width: clamp(34px, 5vw, 70px);
  height: clamp(120px, 18vw, 230px);
  opacity: 0.92;
  filter: drop-shadow(0 22px 22px rgba(0,0,0,0.34));
  clip-path: polygon(45% 0, 56% 0, 63% 15%, 72% 38%, 61% 51%, 75% 100%, 55% 100%, 50% 68%, 43% 100%, 22% 100%, 37% 51%, 27% 38%, 37% 15%);
  background:
    linear-gradient(90deg, rgba(176,138,60,0.92), rgba(247,241,232,0.82) 48%, rgba(80,12,28,0.92)),
    #241c18;
  transform-origin: bottom center;
}
.model-a{ animation: walkRunway 8s ease-in-out infinite; }
.model-b{ animation: walkRunway 8s ease-in-out infinite 2.2s; transform: translateX(-180px) scale(0.56); opacity: 0; }
.model-c{ animation: walkRunway 8s ease-in-out infinite 4.4s; transform: translateX(180px) scale(0.56); opacity: 0; }
.runway-hero .hero-content{
  z-index: 5;
  padding-bottom: clamp(92px, 12vh, 132px);
  text-shadow: 0 18px 34px rgba(0,0,0,0.4);
}
.runway-hero .hero-content h1{
  font-size: clamp(3rem, 7vw, 6.8rem);
  max-width: 12ch;
}
.runway-hero .hero-content .lede{ max-width: 50ch; }
.runway-ticker{
  top: auto;
  z-index: 6;
  height: 44px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(252,250,246,0.16);
  background: rgba(9,8,7,0.72);
  color: var(--ivory);
}
.runway-ticker div{
  display: flex;
  min-width: max-content;
  animation: tickerSlide 24s linear infinite;
}
.runway-ticker span{
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 28px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f2e8d8;
}
.runway-ticker span:nth-child(3n){ color: var(--gold); }

.runway-showcase{
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 11vw, 140px) 0;
  background:
    linear-gradient(120deg, #100d0c 0%, #241c18 42%, #4a0c1c 100%);
  color: var(--ivory);
}
.show-backdrop{
  position: absolute;
  inset: 0;
  opacity: 0.36;
  background:
    repeating-linear-gradient(90deg, rgba(252,250,246,0.09) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(176,138,60,0.16) 0 1px, transparent 1px 92px);
  transform: skewY(-4deg) scale(1.08);
}
.show-grid{
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(34px, 6vw, 80px);
  align-items: center;
}
.show-copy h2{
  color: var(--ivory);
  max-width: 12ch;
  font-size: clamp(2.2rem, 4.7vw, 5rem);
}
.show-copy .lede{ color: #f1e7d6; margin-bottom: 28px; }
.show-stage{
  position: relative;
  min-height: clamp(520px, 58vw, 680px);
  perspective: 900px;
}
.show-stage::before{
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  height: 34%;
  background: linear-gradient(180deg, rgba(252,250,246,0.22), rgba(176,138,60,0.5));
  transform: rotateX(68deg);
  transform-origin: bottom center;
  box-shadow: 0 -26px 80px rgba(176,138,60,0.32);
}
.show-stage-lights{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.show-stage-lights span{
  position: absolute;
  top: -8%;
  width: 22%;
  height: 95%;
  background: linear-gradient(180deg, rgba(252,250,246,0.46), rgba(176,138,60,0.14) 55%, transparent);
  clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  animation: showLightDance 5.6s ease-in-out infinite alternate;
}
.show-stage-lights span:nth-child(1){ left: 8%; transform: rotate(-18deg); }
.show-stage-lights span:nth-child(2){ left: 39%; animation-delay: 1.4s; opacity: 0.7; }
.show-stage-lights span:nth-child(3){ right: 8%; transform: rotate(18deg); animation-delay: .7s; }
.show-look{
  position: absolute;
  width: clamp(150px, 19vw, 240px);
  transform-style: preserve-3d;
  animation: lookFloat 5.4s ease-in-out infinite alternate;
}
.show-look .art{
  aspect-ratio: 3 / 4.7;
  border-color: rgba(252,250,246,0.24);
  box-shadow: 0 30px 70px rgba(0,0,0,0.34);
}
.show-look span{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  color: var(--ivory);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(21,19,18,0.72);
  padding: 6px 9px;
}
.look-one{
  left: 3%;
  bottom: 17%;
  transform: rotateY(18deg) rotateZ(-4deg);
}
.look-two{
  left: 36%;
  bottom: 8%;
  width: clamp(190px, 24vw, 310px);
  z-index: 2;
  animation-delay: .6s;
}
.look-three{
  right: 4%;
  bottom: 21%;
  transform: rotateY(-18deg) rotateZ(4deg);
  animation-delay: 1.1s;
}

@keyframes showPulse{
  from{ transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.06); opacity: 0.08; }
  to{ transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.14); opacity: 0.18; }
}
@keyframes sweepA{
  from{ transform: rotate(-26deg) translateX(-4vw); }
  to{ transform: rotate(9deg) translateX(8vw); }
}
@keyframes sweepB{
  from{ transform: rotate(13deg) translateX(-6vw); }
  to{ transform: rotate(-13deg) translateX(6vw); }
}
@keyframes sweepC{
  from{ transform: rotate(24deg) translateX(4vw); }
  to{ transform: rotate(-8deg) translateX(-8vw); }
}
@keyframes cameraFlash{
  0%, 18%, 21%, 100%{ opacity: 0; transform: rotate(45deg) scale(0.4); }
  19%{ opacity: 1; transform: rotate(45deg) scale(1.35); }
  20%{ opacity: 0.2; transform: rotate(45deg) scale(0.8); }
}
@keyframes walkRunway{
  0%{ opacity: 0; transform: translateY(-120px) scale(0.28); }
  18%{ opacity: 0.42; }
  58%{ opacity: 0.95; transform: translateY(42px) scale(0.86); }
  78%{ opacity: 1; transform: translateY(98px) scale(1.08); }
  100%{ opacity: 0; transform: translateY(160px) scale(1.34); }
}
@keyframes tickerSlide{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes showLightDance{
  from{ transform: rotate(-18deg) translateX(-3vw); opacity: 0.42; }
  to{ transform: rotate(18deg) translateX(4vw); opacity: 0.78; }
}
@keyframes lookFloat{
  from{ translate: 0 0; }
  to{ translate: 0 -18px; }
}

@media (max-width: 880px){
  .runway-hero{ min-height: 88vh; }
  .runway-strip{ width: 64vw; }
  .audience-row{ opacity: 0.36; }
  .audience-left{ left: -8vw; }
  .audience-right{ right: -8vw; }
  .model-walk{ bottom: 17vh; }
  .runway-hero .hero-content h1{ font-size: clamp(2.7rem, 15vw, 4.6rem); }
  .show-grid{ grid-template-columns: 1fr; }
  .show-copy h2{ max-width: 13ch; }
  .show-stage{ min-height: 540px; }
  .look-one{ left: 0; bottom: 25%; }
  .look-two{ left: 24%; bottom: 8%; }
  .look-three{ right: 0; bottom: 28%; }
}
@media (max-width: 560px){
  .beam{ width: 40vw; }
  .flash-wall span{ width: 14px; height: 14px; }
  .runway-ticker span{ padding: 0 18px; font-size: 0.64rem; }
  .show-stage{ min-height: 460px; }
  .show-look{ width: 132px; }
  .look-two{ width: 176px; left: 22%; }
}

.fade-in{ animation: fadeUp 900ms var(--ease) both; }
.fade-in.d1{ animation-delay: 120ms; }
.fade-in.d2{ animation-delay: 260ms; }
.fade-in.d3{ animation-delay: 400ms; }
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

.motion-reveal{
  opacity: 0;
  --motion-y: 8px;
  transform: translate3d(0, calc(var(--motion-y, 0px) + var(--parallax-y, 0px)), 0);
  transition:
    opacity 650ms var(--ease-premium),
    transform 650ms var(--ease-premium);
  transition-delay: var(--motion-delay, 0ms);
  /* will-change is applied transiently by js/motion.js only while a card is
     actually revealing, then released - so revealed cards don't each keep a
     permanent GPU layer (which stutters scrolling on card-heavy pages). */
}
.motion-reveal.is-visible{
  opacity: 1;
  --motion-y: 0px;
}

/* ---------- Section scaffolding ---------- */
.section{ padding: 96px 0; }
.section-tight{ padding: 56px 0; }
.section-head{ margin-bottom: 44px; }
.section-head.center{ text-align: center; }
.section-head .eyebrow{ display:block; margin-bottom: 10px; }

.section-dark{ background: var(--espresso); color: var(--ivory); }
.section-dark h2, .section-dark h3{ color: var(--ivory); }
.section-dark p{ color: #E4D8C4; }

/* ---------- Split / story block ---------- */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
@media (max-width: 880px){
  .split{ grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Art placeholders (stand-in for campaign photography) ---------- */
.art{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #EDE3D2 0%, #E4D8C1 55%, #D8C7A8 100%);
  overflow: hidden;
  border: var(--border-hair);
  border-radius: var(--radius);
}
.art.tall,
.hero-art{
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.art.wide{ aspect-ratio: 16 / 10; }
.art.square{ aspect-ratio: 1 / 1; }
.art.tall{ aspect-ratio: 3 / 4.4; }
.art svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.art img, .art video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art.has-photo{ background: #efe9e0; }
.art .art-caption{
  position: absolute;
  bottom: 14px; left: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--espresso);
  background: #FCFAF6cc;
  padding: 5px 10px;
}
.art.on-dark{ background: linear-gradient(160deg, #2E241E 0%, #241C18 60%, #1B1512 100%); }

/* ---------- Category tiles ---------- */
.cat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: transparent;
}
.cat-tile{
  position: relative;
  background: var(--espresso);
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  overflow: hidden;
  border-radius: var(--radius);
}
.cat-tile .art{ position: absolute; inset: 0; border: none; border-radius: var(--radius); aspect-ratio: auto; }
.cat-tile .art{ transition: opacity 400ms var(--ease-premium); }
.cat-tile:hover .art{ opacity: 0.7; }
.cat-tile span{
  position: relative; z-index: 2;
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.3rem;
}
@media (max-width: 880px){
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Product grid & cards ---------- */
.filter-bar{
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
  margin-bottom: 40px;
  border-bottom: var(--border-hair);
}
.filter-group{ display: flex; gap: 18px; flex-wrap: wrap; }
.filter-group select, .filter-group input[type="text"]{
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border: var(--border-hair);
  background: var(--white);
  color: var(--espresso);
  border-radius: var(--radius);
}
.result-count{ font-size: 0.78rem; color: var(--taupe); letter-spacing: 0.04em; }

.product-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 26px;
}
@media (max-width: 1040px){ .product-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } }

.scroll-row{
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--taupe) transparent;
}
.scroll-row .product-card{ min-width: 250px; flex: 0 0 250px; }

.product-card{ display: block; }
.product-card-media{
  position: relative;
  margin-bottom: 14px;
  aspect-ratio: 3 / 4.4;
  overflow: hidden;
  border: var(--border-hair);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #EDE3D2 0%, #E4D8C1 55%, #D8C7A8 100%);
}
.product-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-card .art{
  margin-bottom: 14px;
  transition: transform 400ms ease, opacity 400ms ease;
}
.product-card:hover .art{
  transform: scale(1.04);
  opacity: 0.92;
}
/* Runway clip that plays inside a card after a 1.2s hover dwell. It sits over
   the still (which shares .art img/video absolute-cover styling) and fades in;
   the badge (z-index 3) stays above it. Injected/removed by js/motion.js. */
.card-hover-video{
  z-index: 1;
  opacity: 0;
  transition: opacity 380ms var(--ease);
}
.card-hover-video.is-playing{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .card-hover-video{ transition: none; }
}
.product-card .p-name{ font-family: var(--serif); font-size: 1.08rem; margin-bottom: 2px; }
.product-card .p-cat{ font-size: 0.7rem; letter-spacing: 0.06em; color: var(--taupe); margin-bottom: 6px; }
.product-card .p-price{ font-size: 0.86rem; color: var(--gold); letter-spacing: 0.03em; }

.badge{
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--white); color: var(--espresso);
  font-size: 0.62rem; letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: var(--radius);
}

/* ---------- Product detail ---------- */
.pdp{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; }
@media (max-width: 940px){ .pdp{ grid-template-columns: 1fr; gap: 34px; } }
.pdp-gallery-main{ margin-bottom: 14px; }
.media-stage{
  border: var(--border-hair);
  background: linear-gradient(160deg, #f2e8d8, #dcc8a6);
  overflow: hidden;
  aspect-ratio: 3 / 4.25;
  border-radius: var(--radius);
}
.media-image,
.media-video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-caption{
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--taupe);
  text-transform: uppercase;
}
.pdp-thumbs{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 720px){
  .pdp-thumbs{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px){
  .pdp-thumbs{ grid-template-columns: repeat(2, 1fr); }
}
.media-thumb{
  display: block;
  width: 100%;
  appearance: none;
  border: 1px solid rgba(169,155,139,0.38);
  background: var(--white);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 360ms var(--ease-premium), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.media-thumb:hover{
  transform: translateY(-2px);
  border-color: rgba(176,138,60,0.6);
  box-shadow: 0 12px 26px rgba(36, 28, 24, 0.08);
}
.media-thumb.active{
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.media-thumb-preview{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.media-thumb-preview img,
.media-thumb-preview video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94);
}
.media-thumb-label{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
  background: rgba(252,250,246,0.84);
  color: var(--espresso);
  font-size: 0.6rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.media-thumb.is-video .media-thumb-label,
.media-thumb[data-media-index="4"] .media-thumb-label{
  background: rgba(36,28,24,0.72);
  color: var(--white);
}

.pdp-info .p-cat{ font-size: 0.76rem; letter-spacing: 0.08em; color: var(--taupe); margin-bottom: 10px; }
.pdp-info .p-price{ font-family: var(--sans); font-size: 1.3rem; color: var(--gold); margin: 10px 0 22px; }
.pdp-info .lede{ margin-bottom: 26px; }

.spec-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
}
.spec-grid div{
  padding: 12px 14px;
  border: var(--border-hair);
  background: rgba(252,250,246,0.7);
  border-radius: var(--radius);
}
.spec-grid span{
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 6px;
}
.spec-grid strong{
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.45;
}
@media (max-width: 560px){
  .spec-grid{ grid-template-columns: 1fr; }
}

.size-row{ display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 26px; }
.size-opt{
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-hair);
  border-radius: var(--radius);
  font-size: 0.82rem;
  cursor: pointer;
  background: var(--white);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.size-opt:hover{ border-color: var(--espresso); }
.size-opt.selected{ background: var(--espresso); color: var(--white); border-color: var(--espresso); }
.size-opt-custom{ width: auto; padding: 0 16px; letter-spacing: 0.06em; }

/* ---------- Colour swatches (merged multi-colour products) ---------- */
.pdp-colors{ margin: 4px 0 22px; }
.pdp-colors-label{ font-size: 0.78rem; letter-spacing: 0.06em; display: block; margin-bottom: 10px; }
.pdp-colors-label strong{ font-weight: 500; }
.swatch-row{ display: flex; gap: 12px; flex-wrap: wrap; }
.color-swatch{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(18,16,14,0.22);
  background: var(--sw, #ccc);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.color-swatch:hover{ transform: translateY(-1px); }
.color-swatch.selected{
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--gold);
  border-color: var(--gold);
}
.color-swatch:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Model size note ---------- */
.model-note{
  font-size: 0.76rem;
  color: var(--taupe);
  letter-spacing: 0.03em;
  margin: 10px 0 0;
}

/* ---------- Custom-size measurement form ---------- */
.custom-size{
  margin-top: 18px;
  padding: 18px;
  border: var(--border-hair);
  background: rgba(252,250,246,0.7);
}
.custom-size-head{
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 14px;
}
.custom-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.custom-grid .field{ margin-bottom: 0; }
.custom-hint{ margin: 12px 0 0; font-size: 0.78rem; color: #A23B3B; }
.pdp-actions .btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.cart-line-measure{ font-style: italic; }
@media (max-width: 400px){
  .custom-grid{ grid-template-columns: 1fr; }
}

.qty-row{ display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.qty-control{ display: flex; align-items: center; border: var(--border-hair); border-radius: var(--radius); overflow: hidden; }
.qty-control button{ width: 38px; height: 40px; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--espresso); }
.qty-control span{ width: 34px; text-align: center; font-size: 0.9rem; }

.pdp-actions{ display: flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.pdp-actions .btn{ flex: 1; min-width: 180px; }

.accordion{ border-top: var(--border-hair); }
.accordion-item{ border-bottom: var(--border-hair); }
.accordion-item button{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--espresso);
}
.accordion-item .accordion-icon{ font-size: 1.1rem; color: var(--gold); transition: transform var(--speed) var(--ease); }
.accordion-item.open .accordion-icon{ transform: rotate(45deg); }
.accordion-body{
  max-height: 0; overflow: hidden;
  transition: max-height var(--speed) var(--ease);
  font-size: 0.88rem; color: var(--taupe-text, #6b5d4d);
}
.accordion-item.open .accordion-body{ max-height: 480px; }
.accordion-body-inner{ padding: 0 2px 18px; color: #5a4d3f; font-size: 0.88rem; line-height: 1.7; }

.delivery-note{
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.8rem; color: #5a4d3f;
  border: var(--border-hair); padding: 14px 16px; margin-bottom: 22px;
  background: var(--white);
  border-radius: var(--radius);
}

/* ---------- Cart drawer ---------- */
.cart-overlay{
  position: fixed; inset: 0; background: rgba(21,19,18,0.42);
  opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease-premium);
  z-index: 90;
}
.cart-overlay.open{ opacity: 1; pointer-events: auto; }

.cart-drawer{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--white);
  z-index: 95;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 500ms var(--ease-premium);
  box-shadow: -18px 0 50px rgba(21,19,18,0.18);
}
.cart-drawer.open{ transform: translateX(0); }
.cart-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: var(--border-hair);
}
.cart-head h3{ margin: 0; font-size: 1.3rem; }
.cart-close{ background: none; border: none; cursor: pointer; color: var(--espresso); padding: 6px; margin: -6px; line-height: 0; }
.cart-close svg{ width: 22px; height: 22px; }
.cart-items{ flex: 1; overflow-y: auto; padding: 10px 24px; }
.cart-line{ display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid #A99B8B33; }
.cart-line .art{ width: 78px; flex: 0 0 78px; aspect-ratio: 3/4; }
.cart-line-info{ flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cart-line-info .name{ font-family: var(--serif); font-size: 1rem; }
.cart-line-info .meta{ font-size: 0.74rem; color: var(--taupe); }
.cart-line-info .row{ display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cart-line-info .remove{ font-size: 0.72rem; letter-spacing: 0.04em; color: var(--taupe); text-decoration: underline; cursor: pointer; background:none; border:none; padding:0; }
.cart-empty{ padding: 60px 20px; text-align: center; color: var(--taupe); }
.cart-foot{ padding: 20px 24px 26px; border-top: var(--border-hair); }
.cart-subtotal{ display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 16px; }
.cart-subtotal strong{ font-family: var(--serif); font-size: 1.15rem; }

/* ---------- Forms ---------- */
.field{ margin-bottom: 20px; }
.field label{ display: block; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--espresso); margin-bottom: 8px; }
.field input, .field select, .field textarea{
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  padding: 13px 14px;
  border: var(--border-hair);
  background: var(--white);
  color: var(--espresso);
  border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--gold);
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }

/* Phone field: fixed-width dial-code select + flexible number input.
   Shared by checkout.html and appointment.html. */
.phone-input{ display: flex; gap: 8px; }
.phone-input select{ width: auto; flex: 0 0 auto; max-width: 42%; }
.phone-input input{ flex: 1 1 auto; }

/* Reviews stub (product.html) - placeholder until a reviews app is chosen. */
.reviews-placeholder{
  border: var(--border-hair);
  border-radius: var(--radius);
  padding: 28px 30px;
  background: var(--white);
  color: var(--taupe);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 720px;
}
.reviews-placeholder .reviews-note{ margin-bottom: 0; }

/* ---- Account area (account.html) ---- */
.account-preview-note{
  border: var(--border-hair);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--sand);
  padding: 14px 18px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--espresso);
  margin-bottom: 30px;
}
.account-layout{ display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start; }
@media (max-width: 760px){ .account-layout{ grid-template-columns: 1fr; gap: 24px; } }
.account-nav{ display: flex; flex-direction: column; gap: 4px; position: sticky; top: 100px; }
@media (max-width: 760px){ .account-nav{ position: static; } }
.account-nav button,
.account-nav .account-nav-link{
  text-align: left; background: transparent; border: none;
  border-left: 2px solid transparent; padding: 11px 14px;
  font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0.04em;
  color: var(--taupe); cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0; text-decoration: none;
}
.account-nav button:hover,
.account-nav .account-nav-link:hover{ color: var(--espresso); background: var(--sand); }
.account-nav button.active{ color: var(--espresso); border-left-color: var(--gold); background: var(--sand); font-weight: 600; }
.account-panels [data-panel]{ max-width: 640px; }
.account-hint{ font-size: 0.8rem; color: var(--taupe); line-height: 1.6; }
.account-empty{ color: var(--taupe); font-size: 0.9rem; }
.account-inline-msg{ margin-top: 14px; font-size: 0.82rem; color: var(--gold-ink); line-height: 1.6; }

.address-list{ display: flex; flex-direction: column; gap: 14px; }
.address-card{
  display: flex; justify-content: space-between; gap: 16px;
  border: var(--border-hair); border-radius: var(--radius);
  padding: 16px 18px; background: var(--white); font-size: 0.85rem; line-height: 1.6;
}
.address-card strong{ display: block; margin-bottom: 4px; }
.address-actions{ display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.address-actions button{
  background: transparent; border: var(--border-hair); border-radius: var(--radius);
  padding: 6px 14px; font-size: 0.74rem; cursor: pointer; color: var(--espresso);
}
.address-actions button:hover{ border-color: var(--gold); }

.order-history{ display: flex; flex-direction: column; gap: 16px; margin: 18px 0; }
.order-hist-card{ border: var(--border-hair); border-radius: var(--radius); padding: 18px 20px; background: var(--white); }
.order-hist-card.is-sample{ border-style: dashed; }
.order-hist-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.order-hist-meta{ display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 0.82rem; }
.order-status{ font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.status-fulfilled{ background: rgba(63,131,116,0.14); color: #2f6558; }
.order-hist-lines{ display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; border-top: var(--border-hair); padding-top: 12px; }
.order-hist-line{ display: flex; justify-content: space-between; gap: 12px; }
.refund-line{ color: var(--gold-ink); }
.order-detail-link{ display: inline-block; margin-top: 14px; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--taupe); }

.danger-zone{ margin-top: 40px; border: 1px solid rgba(155,27,46,0.28); border-radius: var(--radius); padding: 20px 22px; background: rgba(155,27,46,0.03); }
.danger-zone h3{ margin-top: 0; color: #9b1b2e; }
.btn-ghost{ background: transparent; margin-left: 10px; }
.btn-danger{ background: #9b1b2e; border-color: #9b1b2e; color: #fff; }
.btn-danger:hover{ background: #7d1525; border-color: #7d1525; color: #fff; }
.btn-danger:disabled{ opacity: 0.4; cursor: not-allowed; }
.btn-danger:disabled:hover{ transform: none; box-shadow: none; background: #9b1b2e; }

.pay-options{ display: grid; gap: 10px; margin-bottom: 26px; }
.pay-opt{ display: flex; align-items: center; gap: 12px; border: var(--border-hair); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; font-size: 0.88rem; }
.pay-opt input{ accent-color: var(--espresso); }
.pay-opt.selected{ border-color: var(--gold); }

/* ---------- Checkout layout ---------- */
.checkout-grid{ display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 70px; align-items: start; }
@media (max-width: 940px){ .checkout-grid{ grid-template-columns: 1fr; gap: 40px; } }
.order-summary{ background: var(--white); border: var(--border-hair); padding: 28px; position: sticky; top: 110px; border-radius: var(--radius); }
.order-line{ display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #A99B8B33; }
.order-line .art{ width: 60px; flex: 0 0 60px; aspect-ratio: 3/4; }
.order-totals{ margin-top: 18px; padding-top: 16px; border-top: var(--border-hair); }
.order-totals .row{ display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 8px; color: #5a4d3f; }
.order-totals .row.total{ font-size: 1.15rem; color: var(--espresso); font-family: var(--serif); margin-top: 10px; }

.confirm-panel{ text-align: center; padding: 90px 20px; }
.confirm-panel .rose-mark{ width: 46px; height: 46px; color: var(--gold); margin: 0 auto 20px; }

/* ---------- Info / policy pages ---------- */
.prose h2{ margin-top: 2em; }
.prose h3{ margin-top: 1.6em; font-size: 1.2rem; }
.prose ul{ padding-left: 1.2em; }
.prose li{ margin-bottom: 0.5em; }
.prose{ max-width: 74ch; }

.two-col-list{ columns: 2; column-gap: 40px; }
@media (max-width: 700px){ .two-col-list{ columns: 1; } }

table.size-table{ width: 100%; border-collapse: collapse; margin: 20px 0 36px; }
table.size-table th, table.size-table td{
  border: var(--border-hair); padding: 12px 14px; text-align: left; font-size: 0.88rem;
}
table.size-table th{ background: var(--white); font-family: var(--sans); letter-spacing: 0.04em; font-size: 0.76rem; }

/* ---------- Journal ---------- */
.journal-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 880px){ .journal-grid{ grid-template-columns: 1fr; } }
.journal-card .art{ margin-bottom: 16px; }
.journal-card .eyebrow{ margin-bottom: 8px; display:block; }

/* ---------- Newsletter band ---------- */
.newsletter{
  background: var(--espresso); color: var(--ivory);
  padding: 60px var(--gutter);
  text-align: center;
}
.newsletter form{ display: flex; gap: 10px; max-width: 420px; margin: 26px auto 0; }
.newsletter input[type="email"]{
  flex: 1; padding: 14px 16px; border: 1px solid #ffffff44; background: transparent; color: var(--ivory); border-radius: var(--radius);
  font-family: var(--sans);
}
.newsletter input::placeholder{ color: #C9BBA4; }

/* ---------- Utility ---------- */
.mt-0{ margin-top: 0; }
.mb-0{ margin-bottom: 0; }
.hidden{ display: none !important; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Dark Luxury Theme Overrides ---------- */
body{
  background:
    radial-gradient(circle at top, rgba(182,148,77,0.08), transparent 36%),
    linear-gradient(180deg, #0c0a09 0%, #120f0d 48%, #16100e 100%);
  color: var(--ivory);
}

h1, h2, h3, h4,
.pdp-info h1,
.pdp-info h2,
.pdp-info h3{
  color: var(--ivory);
}

p,
.accordion-body-inner,
.cart-line-info .meta,
.footer-brand p,
.feature-card p,
.delivery-note{
  color: rgba(242,230,214,0.82);
}

#site-header,
body.homepage #site-header{
  background: rgba(10,8,7,0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(182,148,77,0.14);
}

.header-bar,
.home-header{
  background: transparent;
}

.logo,
.home-logo,
.main-nav a,
.home-header-nav a,
.icon-btn,
.home-icon-link,
.nav-toggle,
.cart-close{
  color: var(--ivory);
}

.logo .rose-mark,
.home-logo .rose-mark,
.home-header-top .home-icon-link,
.home-header-top .home-icon-btn,
.home-collections-toggle,
.text-link,
.footer-grid a:hover,
.social-row a:hover{
  color: var(--gold);
}

.main-nav a::after,
.text-link::after,
.home-header-nav a::after,
.home-collections-toggle::after{
  height: 1px;
  background: var(--gold);
}

.announce-bar{
  background: rgba(7,6,5,0.95);
  color: rgba(242,230,214,0.72);
  border-bottom: 1px solid rgba(182,148,77,0.12);
}

.opening-hero{
  padding-top: 30px;
  background:
    radial-gradient(circle at 75% 30%, rgba(182,148,77,0.12), transparent 18%),
    linear-gradient(180deg, #0b0908 0%, #140f0d 100%);
}
.opening-hero-copy .lede{
  color: rgba(242,230,214,0.8);
}
.opening-hero-copy h1{
  color: var(--ivory);
  text-shadow: 0 10px 36px rgba(0,0,0,0.4);
}
.opening-hero-visual{
  border: 1px solid rgba(182,148,77,0.18);
  box-shadow: 0 28px 80px rgba(0,0,0,0.45);
}
.opening-hero-visual::before{
  background:
    linear-gradient(90deg, rgba(8,7,6,0.86) 0%, rgba(8,7,6,0.3) 38%, rgba(8,7,6,0.08) 100%),
    linear-gradient(180deg, rgba(8,7,6,0.08), rgba(182,148,77,0.12));
}
.opening-features{
  border-top: 1px solid rgba(182,148,77,0.12);
  background: rgba(11,9,8,0.94);
}
.feature-card + .feature-card{
  border-left: 1px solid rgba(182,148,77,0.14);
}
.feature-card h4{
  color: var(--gold);
}
.feature-card p{
  color: rgba(242,230,214,0.72);
}

body > section{
  position: relative;
  isolation: isolate;
}
body > section:nth-of-type(odd){
  background:
    radial-gradient(circle at top left, rgba(182,148,77,0.05), transparent 28%),
    linear-gradient(180deg, #120f0d 0%, #161210 100%);
  color: var(--ivory);
}
body > section:nth-of-type(even){
  background:
    radial-gradient(circle at top right, rgba(182,148,77,0.08), transparent 24%),
    linear-gradient(180deg, #f5ecdf 0%, #ede2d2 100%);
  color: var(--espresso);
}
body > section:nth-of-type(even) h1,
body > section:nth-of-type(even) h2,
body > section:nth-of-type(even) h3,
body > section:nth-of-type(even) h4,
body > section:nth-of-type(even) .p-name,
body > section:nth-of-type(even) .text-link{
  color: var(--espresso);
}
body > section:nth-of-type(even) .eyebrow,
body > section:nth-of-type(even) .section-head .eyebrow{
  color: var(--gold);
}

.section-dark{
  background:
    radial-gradient(circle at center top, rgba(182,148,77,0.05), transparent 26%),
    linear-gradient(180deg, #0c0a09 0%, #090807 100%);
  color: var(--ivory);
}
.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark .lede{
  color: inherit;
}

.newsletter{
  background:
    linear-gradient(180deg, #0c0a09 0%, #16100e 100%);
  color: var(--ivory);
}
.newsletter h2,
.newsletter p{
  color: var(--ivory);
}
.newsletter input{
  background: rgba(255,244,232,0.04);
  border: 1px solid rgba(242,230,214,0.16);
  color: var(--ivory);
}
.newsletter input::placeholder{
  color: rgba(242,230,214,0.44);
}

.home-collections-panel{
  background: rgba(12,10,9,0.92);
  border: 1px solid rgba(182,148,77,0.16);
  box-shadow: 0 18px 48px rgba(0,0,0,0.32);
}
.home-collections-col h3{
  color: var(--gold);
}
.home-collections-links,
.home-collections-links a{
  color: rgba(242,230,214,0.88);
}
.home-collections-links span{
  background: rgba(182,148,77,0.28);
}

.product-grid .product-card,
.scroll-row .product-card,
.journal-card,
.cat-tile,
.product-card-media,
.media-stage{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)), #161110;
  border-color: rgba(242,230,214,0.1);
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
}
.product-card .p-cat,
.result-count,
.pdp-info .p-cat{
  color: rgba(242,230,214,0.56);
}
.product-card .p-price,
.pdp-info .p-price{
  color: var(--gold);
}
.badge{
  background: rgba(7,6,5,0.82);
  color: var(--ivory);
  border: 1px solid rgba(182,148,77,0.22);
}
.cat-tile{
  background: #120f0d;
}
.cat-tile span{
  color: var(--ivory);
}
.cat-tile .art{ opacity: 0.92; }
.cat-tile:hover .art{ opacity: 0.72; }

.art{
  background: linear-gradient(160deg, #171210 0%, #241b17 55%, #0f0d0c 100%);
  border-color: rgba(242,230,214,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.art .art-caption{
  background: rgba(7,6,5,0.76);
  color: var(--ivory);
}
.art.on-dark{
  background: linear-gradient(160deg, #251c17 0%, #140f0d 60%, #0c0a09 100%);
}

.pdp-info .lede,
.pdp-info .delivery-note,
.accordion-body-inner{
  color: rgba(242,230,214,0.78);
}
.spec-grid div,
.delivery-note,
.field input,
.field select,
.field textarea,
.qty-control,
.size-opt,
.cart-line,
.cart-foot,
.cart-head,
.cart-drawer,
.checkout-summary,
.checkout-card,
.contact-card,
.journal-card,
.home-collections-panel,
.media-stage{
  background: rgba(13,10,9,0.72);
  border-color: rgba(242,230,214,0.09);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}

.field input,
.field select,
.field textarea{
  background: rgba(255,244,232,0.04);
  color: var(--ivory);
}
.field label{
  color: rgba(242,230,214,0.82);
}

.cart-overlay{
  background: rgba(0,0,0,0.72);
}
.cart-drawer{
  background: linear-gradient(180deg, #0d0b0a 0%, #120f0d 100%);
  color: var(--ivory);
}
.cart-head,
.cart-foot{
  border-color: rgba(242,230,214,0.08);
}
.cart-line .name,
.cart-subtotal strong,
.cart-close,
.cart-line-info .meta,
.cart-empty{
  color: var(--ivory);
}

#site-footer{
  background:
    radial-gradient(circle at top, rgba(182,148,77,0.08), transparent 22%),
    linear-gradient(180deg, #090807 0%, #120e0d 100%);
  color: var(--ivory);
}
.footer-grid h4,
.footer-bottom,
.footer-grid a,
.footer-brand p{
  color: rgba(242,230,214,0.76);
}

.btn{
  border-color: rgba(242,230,214,0.16);
  color: var(--ivory);
  background: rgba(255,255,255,0.02);
}
.btn:hover{
  background: rgba(255,255,255,0.04);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24);
}
.btn-primary{
  background: linear-gradient(180deg, #1d1714 0%, #0d0b0a 100%);
  border-color: rgba(182,148,77,0.24);
  color: var(--ivory);
}
.btn-primary:hover{
  background: linear-gradient(180deg, #241d18 0%, #0c0a09 100%);
  border-color: rgba(182,148,77,0.38);
}
.btn-gold{
  background: linear-gradient(180deg, #c8a55c 0%, #b08b44 100%);
  color: #120e0c;
  border-color: rgba(255,255,255,0.08);
}
.btn-gold:hover{
  background: linear-gradient(180deg, #d1b26d 0%, #b89348 100%);
  color: #120e0c;
}

/* Off-canvas drawer background only - must not paint behind the desktop inline nav. */
@media (max-width: 880px){
  .main-nav{ background: rgba(10,8,7,0.96); }
}
.main-nav a,
.home-header-nav a{
  color: var(--ivory);
}
.main-nav a.active,
.home-header-nav a.active{
  color: var(--gold);
}
.main-nav a:hover,
.home-header-nav a:hover{
  color: var(--gold);
}

.opening-hero .text-link,
body > section:nth-of-type(even) .text-link{
  color: var(--gold);
}

/* ---------- Boutique Opening Screen ---------- */
.splash-screen{
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(182,148,77,0.1), transparent 36%),
    linear-gradient(180deg, #050404 0%, #120e0c 100%);
  color: var(--ivory);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 900ms var(--ease-premium), visibility 900ms var(--ease-premium);
}
.splash-screen.is-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-screen-inner{
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: 24px;
  transform: translateY(8px);
  opacity: 0;
  animation: splashReveal 1.2s var(--ease-premium) forwards;
}
.splash-mark{
  width: 68px;
  height: 68px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.splash-mark svg{
  width: 100%;
  height: 100%;
}
.splash-logo{
  height: 72px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.splash-title{
  font-family: var(--serif);
  letter-spacing: 0.18em;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ivory);
}
.splash-subtitle{
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,230,214,0.66);
}

@keyframes splashReveal{
  0%{ opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(6px); }
  35%{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100%{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ---- anime.js-driven intro: rings, letter cascade, gold rule ---- */
.splash-stage{
  position: relative;
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
  margin-bottom: 6px;
}
.splash-stage .splash-logo{ position: relative; z-index: 2; margin: 0; }
.splash-ring{
  position: absolute;
  width: 118px; height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(182,148,77,0.6);
  box-shadow: 0 0 34px rgba(182,148,77,0.30), inset 0 0 22px rgba(182,148,77,0.12);
  pointer-events: none;
  transform-origin: center;
}
.splash-ring-2{
  width: 150px; height: 150px;
  border-style: dashed;
  border-color: rgba(182,148,77,0.34);
  box-shadow: none;
}
.splash-letter{ display: inline-block; transform-origin: center bottom; }
.splash-letter.is-space{ width: 0.34em; }
.splash-rule{
  display: block;
  width: 148px; height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, #E7CE92 50%, var(--gold) 78%, transparent);
}

/* While anime.js drives the intro, suspend the CSS fallback reveal and start
   each animated element hidden so the timeline controls it with no flash. */
.splash-screen.anime-on .splash-screen-inner{
  animation: none;
  opacity: 1;
  transform: none;
}
.splash-screen.anime-on .splash-ring,
.splash-screen.anime-on .splash-logo,
.splash-screen.anime-on .splash-letter,
.splash-screen.anime-on .splash-rule,
.splash-screen.anime-on .splash-subtitle{ opacity: 0; }

@media (prefers-reduced-motion: reduce){
  .splash-screen,
  .splash-screen-inner{
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Art Direction Refinement Pass ---------- */
body{
  background:
    radial-gradient(circle at top, rgba(182,148,77,0.07), transparent 28%),
    linear-gradient(180deg, #090807 0%, #120f0d 46%, #171210 100%);
  color: var(--ivory);
  font-size: 15.25px;
  line-height: 1.74;
}

h1, h2, h3, h4,
.pdp-info h1,
.pdp-info h2,
.pdp-info h3{
  color: var(--ivory);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1{
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  line-height: 0.92;
}
h2{
  font-size: clamp(2.05rem, 3.6vw, 3.25rem);
  line-height: 0.96;
}
h3{
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.02;
}
h4{
  font-size: 0.68rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

p{
  color: rgba(242,230,214,0.84);
  max-width: 60ch;
}
p.lede{
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  font-style: normal;
  line-height: 1.72;
  color: rgba(242,230,214,0.92);
  max-width: 44ch;
}

.eyebrow{
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  color: rgba(182,148,77,0.9);
}

.section{
  padding: 120px 0;
}
.section-tight{
  padding: 72px 0;
}
.section-head{
  margin-bottom: 50px;
}
.section-head.center{
  text-align: left;
  max-width: 720px;
}
.section-head.center .lede{
  margin-left: 0;
}

.btn{
  border-radius: var(--radius);
  letter-spacing: 0.18em;
  padding: 13px 26px;
  border-color: rgba(242,230,214,0.18);
  box-shadow: none;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.btn-primary{
  background: linear-gradient(180deg, #171210 0%, #0c0a09 100%);
  border-color: rgba(182,148,77,0.28);
}
.btn-gold{
  background: linear-gradient(180deg, #c7a25a 0%, #a7813d 100%);
  color: #120f0d;
}
.btn-gold:hover{
  background: linear-gradient(180deg, #d0ad68 0%, #ad8844 100%);
  color: #120f0d;
}

.text-link{
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: rgba(242,230,214,0.94);
}
.text-link::after,
.main-nav a::after,
.home-header-nav a::after,
.home-collections-toggle::after{
  height: 1px;
  background: currentColor;
}

#site-header,
body.homepage #site-header{
  background: rgba(9,8,7,0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(182,148,77,0.12);
}
.announce-bar{
  background: rgba(7,6,5,0.98);
  color: rgba(242,230,214,0.68);
  border-bottom: 1px solid rgba(182,148,77,0.1);
  letter-spacing: 0.2em;
}
.logo,
.home-logo{
  letter-spacing: 0.2em;
}
.logo{
  font-size: 1.28rem;
}
.home-logo{
  gap: 12px;
}
.main-nav a,
.home-header-nav a{
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}
.icon-btn{
  letter-spacing: 0.12em;
}
.icon-btn svg,
.home-icon-link svg,
.home-icon-btn svg{
  width: 18px;
  height: 18px;
}

.opening-hero{
  padding-top: 24px;
  background:
    radial-gradient(circle at 80% 28%, rgba(182,148,77,0.08), transparent 18%),
    linear-gradient(180deg, #0b0908 0%, #140f0d 100%);
}
.opening-hero-copy h1{
  color: var(--ivory);
  letter-spacing: -0.03em;
  max-width: 7.8ch;
}
.opening-hero-copy .lede{
  color: rgba(242,230,214,0.76);
  font-style: normal;
}
.opening-hero-visual{
  border: 1px solid rgba(182,148,77,0.16);
  box-shadow: 0 30px 72px rgba(0,0,0,0.42);
}
.opening-hero-visual::before{
  background:
    linear-gradient(90deg, rgba(8,7,6,0.9) 0%, rgba(8,7,6,0.28) 44%, rgba(8,7,6,0.02) 100%),
    linear-gradient(180deg, rgba(182,148,77,0.1), rgba(255,255,255,0.02));
}
.opening-features{
  background: rgba(11,9,8,0.94);
  border-top: 1px solid rgba(182,148,77,0.1);
}
.feature-grid{
  padding-top: 8px;
}
.feature-card{
  padding: 22px 20px 26px;
}
.feature-card h4{
  font-size: 0.62rem;
  letter-spacing: 0.28em;
}
.feature-card p{
  font-size: 0.78rem;
  line-height: 1.8;
  color: rgba(242,230,214,0.76);
}

body > section{
  position: relative;
}
body > section:nth-of-type(odd){
  background:
    radial-gradient(circle at top left, rgba(182,148,77,0.05), transparent 26%),
    linear-gradient(180deg, #11100e 0%, #16110f 100%);
}
body > section:nth-of-type(even){
  background:
    radial-gradient(circle at top right, rgba(182,148,77,0.08), transparent 24%),
    linear-gradient(180deg, #f3eadb 0%, #ece0cf 100%);
  color: var(--espresso);
}
body > section:nth-of-type(even) h1,
body > section:nth-of-type(even) h2,
body > section:nth-of-type(even) h3,
body > section:nth-of-type(even) h4,
body > section:nth-of-type(even) p,
body > section:nth-of-type(even) .lede,
body > section:nth-of-type(even) .p-name,
body > section:nth-of-type(even) .product-card .p-cat,
body > section:nth-of-type(even) .product-card .p-price,
body > section:nth-of-type(even) .text-link{
  color: var(--espresso);
}
body > section:nth-of-type(even) .eyebrow{
  color: var(--gold);
}

.home-header{
  padding-top: 22px;
}
.home-header-top{
  gap: 14px;
}
.home-header-nav{
  gap: clamp(20px, 2.8vw, 38px);
}
.home-collections-panel{
  background: rgba(9,8,7,0.9);
  border: 1px solid rgba(182,148,77,0.12);
  box-shadow: 0 18px 42px rgba(0,0,0,0.22);
}
.home-collections-col h3{
  color: var(--gold);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  letter-spacing: 0.16em;
}
.home-collections-links{
  color: rgba(242,230,214,0.8);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.product-grid,
.scroll-row,
.journal-grid,
.cat-grid,
.checkout-grid,
.pdp{
  align-items: start;
}

.product-card .art,
.journal-card .art,
.cat-tile .art,
.cat-tile,
.media-stage,
.spec-grid div,
.delivery-note,
.pay-opt,
.field input,
.field select,
.field textarea,
.cart-drawer,
.cart-head,
.cart-foot,
.checkout-summary,
.checkout-card,
.order-summary{
  border-color: rgba(242,230,214,0.1);
  border-radius: var(--radius);
}

.product-grid{
  gap: 44px 30px;
}
.product-card .art{
  margin-bottom: 16px;
  transition: transform 420ms var(--ease-premium), opacity 420ms var(--ease-premium);
}
.product-grid .product-card:nth-child(6n+1) .art,
.scroll-row .product-card:nth-child(4n+1) .art{
  aspect-ratio: 3 / 4.95;
}
.product-grid .product-card:nth-child(6n+3) .art,
.scroll-row .product-card:nth-child(4n+2) .art{
  aspect-ratio: 3 / 4.2;
}
.product-card:hover .art{
  transform: scale(1.035);
  opacity: 0.94;
}
.product-card .p-cat{
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,230,214,0.58);
}
.product-card .p-name{
  font-size: 1.02rem;
  line-height: 1.05;
}
.product-card .p-price{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.badge{
  background: rgba(7,6,5,0.78);
  color: var(--ivory);
  border: 1px solid rgba(182,148,77,0.2);
  letter-spacing: 0.16em;
}

.filter-bar{
  padding-bottom: 22px;
  margin-bottom: 44px;
}
.filter-group select,
.filter-group input[type="text"]{
  background: rgba(255,244,232,0.02);
  color: var(--ivory);
  border: 1px solid rgba(242,230,214,0.16);
  letter-spacing: 0.14em;
  font-size: 0.66rem;
}
.result-count{
  color: rgba(242,230,214,0.56);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pdp{
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(34px, 5vw, 88px);
}
.pdp-gallery-main{
  margin-bottom: 18px;
}
.pdp-gallery-main .art.tall,
.media-stage{
  aspect-ratio: 3 / 4.8;
}
.pdp-info{
  position: sticky;
  top: 116px;
}
.pdp-info .p-cat{
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,230,214,0.54);
}
.pdp-info .p-price{
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.spec-grid{
  gap: 12px;
}
.spec-grid div{
  background: rgba(255,244,232,0.03);
}
.spec-grid span{
  font-size: 0.6rem;
  letter-spacing: 0.18em;
}
.spec-grid strong{
  font-size: 0.84rem;
}
.size-opt{
  background: rgba(255,244,232,0.03);
  color: var(--ivory);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}
.size-opt.selected{
  background: var(--ivory);
  color: var(--espresso);
}
.qty-control,
.delivery-note{
  background: rgba(255,244,232,0.03);
}
.accordion-item button{
  font-size: 0.66rem;
  letter-spacing: 0.2em;
}
.accordion-body-inner{
  color: rgba(242,230,214,0.76);
}

.checkout-grid{
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: clamp(34px, 5vw, 80px);
}
.order-summary{
  background: rgba(255,244,232,0.03);
  position: sticky;
  top: 112px;
}
.order-totals .row{
  color: rgba(242,230,214,0.72);
}
.confirm-panel{
  padding: 96px 20px;
}

.field label{
  color: rgba(242,230,214,0.76);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.field input,
.field select,
.field textarea{
  background: rgba(255,244,232,0.03);
  color: var(--ivory);
  font-size: 0.84rem;
}
.pay-opt{
  background: rgba(255,244,232,0.03);
  font-size: 0.82rem;
}
.pay-opt.selected{
  border-color: rgba(182,148,77,0.46);
}

.journal-grid{
  grid-template-columns: 1.1fr 0.92fr 0.92fr;
}
.journal-card{
  background: transparent;
}
.journal-card:nth-child(1){
  grid-column: span 2;
}
.journal-card .art{
  margin-bottom: 18px;
}
.journal-card h3{
  margin-bottom: 8px;
}
.journal-card p{
  font-size: 0.84rem;
  line-height: 1.75;
}

.page-about-hero{
  position: relative;
  min-height: 72vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--espresso);
  overflow: hidden;
  align-items: stretch;
}
.page-about-hero .hero-media{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 72vh;
  border-radius: 0;
  border: none;
  aspect-ratio: auto;
  overflow: hidden;
}
.page-about-hero .hero-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.page-about-hero .hero-pane{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(48px, 6vw, 96px);
  background: var(--espresso);
  color: var(--white);
  z-index: 2;
}
.page-about-hero .hero-pane .eyebrow{
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
}
.page-about-hero .hero-pane h1{
  color: var(--white);
  font-size: clamp(2.3rem, 3.8vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin: 0;
}
@media (max-width: 880px){
  .page-about-hero{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .page-about-hero .hero-media{
    min-height: 52vh;
    aspect-ratio: 4 / 5;
  }
  .page-about-hero .hero-pane{
    padding: 44px 24px 56px;
    align-items: flex-start;
    text-align: left;
  }
  .page-about-hero .hero-pane h1{
    font-size: clamp(2.2rem, 8vw, 3rem);
  }
}

.page-about .section-head,
.page-about .section-head.center{
  margin: 0 0 44px 0;
  text-align: left;
  max-width: 800px;
}
.page-about .section-head .eyebrow{
  display: block;
  margin-bottom: 12px;
}
.page-about .section-head h2{
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}

.page-about .product-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(18,16,14,0.12);
  border-bottom: 1px solid rgba(18,16,14,0.12);
  align-items: stretch;
}
.page-about .product-grid > div{
  padding: 28px 20px 32px;
  min-height: 170px;
  border-right: 1px solid rgba(18,16,14,0.1);
  display: flex;
  flex-direction: column;
}
.page-about .product-grid > div:last-child{
  border-right: none;
}
.page-about .product-grid h4{
  font-size: clamp(0.68rem, 0.82vw, 0.76rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
  margin-bottom: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.page-about .product-grid p{
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

.founder-signoff{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--taupe);
  font-size: 0.95rem;
  line-height: 1.6;
}

.page-customization .product-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(242,230,214,0.1);
  border-bottom: 1px solid rgba(242,230,214,0.1);
}
.page-customization .product-grid > div{
  padding: 22px 16px 26px;
  border-right: 1px solid rgba(242,230,214,0.1);
}
.page-customization .product-grid > div:last-child{
  border-right: none;
}
.page-customization .product-grid p{
  font-size: 0.82rem;
  line-height: 1.8;
}
.page-customization .split{
  align-items: start;
}

.page-shop .section-head.center,
.page-contact .section-head.center,
.page-journal .section-head.center,
.page-size-guide .section-head.center,
.page-shipping .section-head.center,
.page-policies .section-head.center{
  max-width: 760px;
}

.page-journal .journal-grid{
  gap: 24px;
}
.page-journal .journal-card:nth-child(1){
  grid-column: span 2;
}
.page-journal .journal-card:nth-child(4){
  grid-column: span 2;
}

.page-contact .split{
  align-items: start;
}
.page-contact form{
  background: rgba(255,244,232,0.03);
  border: 1px solid rgba(242,230,214,0.1);
  padding: 28px;
}

.page-size-guide .prose,
.page-shipping .prose,
.page-policies .prose{
  max-width: 72ch;
}
.page-size-guide .size-table{
  background: rgba(255,244,232,0.02);
}
.page-size-guide .size-table th{
  background: rgba(255,244,232,0.05);
  letter-spacing: 0.16em;
  font-size: 0.64rem;
}

.page-shipping .prose h2,
.page-policies .prose h2,
.page-size-guide .prose h2,
.page-contact h3{
  margin-top: 1.9em;
}

.page-checkout .section-head{
  max-width: 760px;
}
.page-checkout .checkout-grid{
  align-items: start;
}
.page-checkout .order-summary{
  padding: 30px;
}
.page-checkout .confirm-panel .lede{
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 960px){
  .page-shop .section-head.center,
  .page-contact .section-head.center,
  .page-journal .section-head.center,
  .page-size-guide .section-head.center,
  .page-shipping .section-head.center,
  .page-policies .section-head.center,
  .page-customization .section-head.center,
  .page-checkout .section-head{
    text-align: left;
  }
}

@media (max-width: 960px){
  .section{
    padding: 96px 0;
  }
  .section-tight{
    padding: 62px 0;
  }
  .section-head.center{
    max-width: none;
  }
  .pdp,
  .checkout-grid,
  .journal-grid,
  .page-about .product-grid,
  .page-customization .product-grid{
    grid-template-columns: 1fr;
  }
  .journal-card:nth-child(1),
  .journal-card:nth-child(4){
    grid-column: auto;
  }
  .page-about .product-grid > div,
  .page-customization .product-grid > div{
    border-right: none;
    border-bottom: 1px solid rgba(242,230,214,0.1);
  }
  .page-about .product-grid > div:last-child,
  .page-customization .product-grid > div:last-child{
    border-bottom: none;
  }
  .page-about .product-grid h4{
    white-space: normal;
  }
  .pdp-info,
  .order-summary{
    position: static;
  }
  .product-grid{
    gap: 34px 20px;
  }
}

@media (max-width: 620px){
  h1{
    font-size: clamp(2.4rem, 12vw, 3.4rem);
  }
  h2{
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }
  .opening-hero-copy h1{
    max-width: 100%;
  }
  .feature-grid{
    padding-inline: 0;
  }
  .feature-card{
    padding: 18px 0 20px;
  }
  .product-grid{
    grid-template-columns: 1fr 1fr;
  }
  .page-about .product-grid,
  .page-customization .product-grid{
    grid-template-columns: 1fr;
  }
  .page-about .hero{
    min-height: 56vh;
  }
}

/* ==========================================================================
   OFF-WHITE + GOLD PALETTE PASS
   Lightens the earlier dark "Art Direction" layers so the site reads light
   overall, with gold as the primary accent. Layout, copy and JS are untouched.
   Placed last so equal-specificity selectors win by source order.
   Body text meets WCAG AA (>=4.5:1) on the new light surfaces.
   ========================================================================== */

/* ---- Global surface + typography ---- */
body{
  background:
    radial-gradient(circle at top, rgba(182,148,77,0.06), transparent 30%),
    linear-gradient(180deg, #F7F4ED 0%, #F3EFE6 58%, #EFE9DC 100%);
  color: var(--espresso);
}
h1, h2, h3, h4,
.pdp-info h1, .pdp-info h2, .pdp-info h3{ color: var(--espresso); }
p{ color: var(--ink-soft); }
p.lede{ color: #443C34; }
.eyebrow{ color: var(--gold-ink); }
.text-link{ color: var(--gold-ink); }

/* ---- Sections: both parities light, subtle alternation ---- */
body > section:nth-of-type(odd){
  background:
    radial-gradient(circle at top left, rgba(182,148,77,0.05), transparent 26%),
    linear-gradient(180deg, #F7F4ED 0%, #F2EEE4 100%);
  color: var(--espresso);
}
body > section:nth-of-type(even){
  background:
    radial-gradient(circle at top right, rgba(182,148,77,0.07), transparent 24%),
    linear-gradient(180deg, #F1EADB 0%, #EBE2D0 100%);
  color: var(--espresso);
}
body > section:nth-of-type(odd) h1,
body > section:nth-of-type(odd) h2,
body > section:nth-of-type(odd) h3,
body > section:nth-of-type(odd) h4,
body > section:nth-of-type(odd) .p-name,
body > section:nth-of-type(even) h1,
body > section:nth-of-type(even) h2,
body > section:nth-of-type(even) h3,
body > section:nth-of-type(even) h4,
body > section:nth-of-type(even) .p-name{ color: var(--espresso); }
body > section:nth-of-type(odd) p,
body > section:nth-of-type(odd) .lede,
body > section:nth-of-type(even) p,
body > section:nth-of-type(even) .lede{ color: var(--ink-soft); }
body > section:nth-of-type(odd) .eyebrow,
body > section:nth-of-type(even) .eyebrow,
body > section:nth-of-type(odd) .text-link,
body > section:nth-of-type(even) .text-link{ color: var(--gold-ink); }

/* ---- Formerly-dark full-bleed bands ---- */
.section-dark{
  background:
    radial-gradient(circle at center top, rgba(182,148,77,0.10), transparent 32%),
    linear-gradient(180deg, #F2ECDD 0%, #ECE3D1 100%);
  color: var(--espresso);
}
.section-dark h2, .section-dark h3{ color: var(--espresso); }
.section-dark p, .section-dark .lede{ color: var(--ink-soft); }

.newsletter{
  background:
    radial-gradient(circle at top, rgba(182,148,77,0.10), transparent 32%),
    linear-gradient(180deg, #F1EADB 0%, #EAE0CE 100%);
  color: var(--espresso);
}
.newsletter h2{ color: var(--espresso); }
.newsletter p{ color: var(--ink-soft); }
.newsletter input,
.newsletter input[type="email"]{
  background: #FFFFFF;
  border: 1px solid rgba(18,16,14,0.18);
  color: var(--espresso);
}
.newsletter input::placeholder{ color: #8A8073; }

/* ---- Footer ---- */
#site-footer{
  background:
    radial-gradient(circle at top, rgba(182,148,77,0.08), transparent 24%),
    linear-gradient(180deg, #EFE8DA 0%, #E8DFCD 100%);
  color: var(--espresso);
  border-top: 1px solid rgba(18,16,14,0.10);
}
.footer-grid h4{ color: var(--espresso); }
.footer-grid a,
.footer-brand p,
.footer-bottom,
.social-row a{ color: var(--ink-soft); }
.footer-grid a:hover,
.social-row a:hover{ color: var(--gold-ink); }
.footer-bottom{ border-top: 1px solid rgba(18,16,14,0.12); }

/* ---- Header + navigation ---- */
#site-header,
body.homepage #site-header{
  background: rgba(250,247,240,0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(182,148,77,0.22);
}
.announce-bar{
  background: #EFE7D6;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(182,148,77,0.20);
}
.logo, .home-logo,
.home-collections-toggle,
.icon-btn, .home-icon-btn, .home-icon-link{ color: var(--espresso); }
.main-nav a,
.home-header-nav a{ color: var(--espresso); }
.main-nav a.active, .home-header-nav a.active,
.main-nav a:hover, .home-header-nav a:hover,
.home-collections-toggle:hover{ color: var(--gold-ink); }
@media (max-width: 880px){ .main-nav{ background: rgba(250,247,240,0.98); } }
.home-collections-panel{
  background: rgba(250,247,240,0.97);
  border: 1px solid rgba(182,148,77,0.24);
  box-shadow: 0 18px 42px rgba(60,45,25,0.14);
}
.home-collections-col h3{ color: var(--gold-ink); }
.home-collections-links,
.home-collections-links a{ color: var(--espresso); }
.home-collections-links span{ background: rgba(182,148,77,0.30); }

/* ---- Home hero ---- */
.opening-hero{
  background:
    radial-gradient(circle at 80% 28%, rgba(182,148,77,0.10), transparent 24%),
    linear-gradient(180deg, #F7F4ED 0%, #F1EBDE 100%);
}
.opening-hero-copy h1{ color: var(--espresso); }
.opening-hero-copy .lede{ color: var(--ink-soft); }
.opening-hero-visual{
  border: 1px solid rgba(182,148,77,0.22);
  box-shadow: 0 30px 72px rgba(60,45,25,0.16);
}
.opening-hero-visual::before{
  background:
    linear-gradient(90deg, rgba(247,244,237,0.80) 0%, rgba(247,244,237,0.18) 44%, rgba(247,244,237,0.0) 100%),
    linear-gradient(180deg, rgba(182,148,77,0.05), rgba(255,255,255,0.0));
}
.opening-features{
  background: rgba(250,247,240,0.90);
  border-top: 1px solid rgba(182,148,77,0.18);
}
.feature-card h4{ color: var(--gold-ink); }
.feature-card p{ color: var(--ink-soft); }

/* ---- Product cards, journal, media, placeholder art ---- */
/* Cards blend into the page: the name/price info panel inherits the page
   background instead of sitting on a hard white square. The photo keeps its
   own hairline border, so there is a subtle edge rather than a color break. */
.product-grid .product-card,
.scroll-row .product-card,
.journal-card{
  background: transparent;
  border-color: rgba(18,16,14,0.08);
  box-shadow: none;
}
/* Image containers sit behind a cover photo - a soft ivory fill (never pure
   white) avoids a flash-of-white before the photo loads. */
.product-card-media,
.media-stage{
  background: var(--ivory);
  border-color: rgba(18,16,14,0.08);
  box-shadow: 0 20px 44px rgba(60,45,25,0.08);
}
.product-card .p-cat,
.pdp-info .p-cat,
.result-count,
body > section:nth-of-type(even) .product-card .p-cat{ color: var(--ink-soft); }
.product-card .p-name{ color: var(--espresso); }
.product-card .p-price,
.pdp-info .p-price,
body > section:nth-of-type(even) .product-card .p-price{ color: var(--gold-ink); }
.art{
  background: linear-gradient(160deg, #EFE7D6 0%, #E7DBC4 55%, #D9CBAE 100%);
  border-color: rgba(18,16,14,0.08);
  box-shadow: none;
}
.art .art-caption{
  background: rgba(255,255,255,0.84);
  color: var(--espresso);
}
/* .art.on-dark + .cat-tile stay dark: they render as image tiles */
/* Scrim under the white category label so it stays legible over a real photo. */
.cat-tile .art.has-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,14,10,0) 42%, rgba(18,14,10,0.55) 100%);
  pointer-events: none;
}

/* ---- Buttons ---- */
.btn{
  color: var(--espresso);
  border: 1px solid rgba(18,16,14,0.30);
  background: transparent;
}
.btn:hover{
  background: var(--espresso);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(60,45,25,0.14);
}
.btn-primary{
  background: linear-gradient(180deg, #26201B 0%, #17120F 100%);
  border-color: rgba(138,106,44,0.5);
  color: var(--white);
}
.btn-primary:hover{
  background: linear-gradient(180deg, #2E2620 0%, #1B1512 100%);
  border-color: var(--gold-ink);
  color: var(--white);
}
.btn-gold{
  background: linear-gradient(180deg, #C7A25A 0%, #A7813D 100%);
  color: #17120F;
  border-color: rgba(18,16,14,0.10);
}

/* ---- Shop filters ---- */
.filter-group select,
.filter-group input[type="text"]{
  background: #FFFFFF;
  color: var(--espresso);
  border: 1px solid rgba(18,16,14,0.18);
}

/* ---- Forms, PDP, cart, checkout surfaces ---- */
.spec-grid div,
.delivery-note,
.qty-control,
.size-opt,
.pay-opt,
.field input, .field select, .field textarea,
.order-summary{
  background: #FFFFFF;
  border-color: rgba(18,16,14,0.12);
  color: var(--espresso);
}
.field label{ color: var(--ink-soft); }
.size-opt{ color: var(--espresso); }
.size-opt.selected{ background: var(--espresso); color: var(--white); }
.order-totals .row{ color: var(--ink-soft); }
.pdp-info .lede,
.pdp-info .delivery-note,
.accordion-body-inner{ color: var(--ink-soft); }

.cart-overlay{ background: rgba(30,24,18,0.42); }
.cart-drawer{
  background: linear-gradient(180deg, #FBF8F2 0%, #F4EFE5 100%);
  color: var(--espresso);
}
/* The dark-theme block above gave these inner drawer sections a dark
   background + shadow; reset them so they inherit the drawer's cream gradient
   (otherwise the "Your Bag" header renders as a dark bar over a light body). */
.cart-head, .cart-foot, .cart-line{
  background: transparent;
  box-shadow: none;
  border-color: rgba(18,16,14,0.10);
}
.cart-line .name,
.cart-subtotal strong,
.cart-close,
.cart-empty{ color: var(--espresso); }
.cart-line-info .meta{ color: var(--ink-soft); }

/* ---- Splash intro screen ---- */
.splash-screen{
  background:
    radial-gradient(circle at center, rgba(182,148,77,0.12), transparent 42%),
    linear-gradient(180deg, #FAF7F0 0%, #F2ECDF 100%);
  color: var(--espresso);
}
.splash-title{ color: var(--espresso); }
.splash-subtitle{ color: var(--ink-soft); }
.splash-mark{ color: var(--gold-ink); }

/* ---- Keep the About page hero as a dark image banner (white text) ---- */
body > section.hero{
  background: var(--espresso);
  color: var(--white);
}
body > section.hero h1,
body > section.hero h2,
body > section.hero .lede,
body > section.hero p{ color: var(--white); }
body > section.hero .eyebrow{ color: var(--gold); }

/* ---- Light borders on bordered grids ---- */
.page-about .product-grid,
.page-customization .product-grid,
.page-about .product-grid > div,
.page-customization .product-grid > div{
  border-color: rgba(18,16,14,0.12);
}

/* ==========================================================================
   PERFORMANCE + LAYOUT FIXES
   Uniform card image boxes, mobile touch targets, mobile mega-menu accordion.
   ========================================================================== */

/* ---- Uniform product-card image boxes (constant 3/4 regardless of photo) ---- */
/* Re-declares the earlier per-nth-child aspect variations so every card matches. */
.product-grid .product-card .art,
.scroll-row .product-card .art,
.product-grid .product-card:nth-child(6n+1) .art,
.scroll-row .product-card:nth-child(4n+1) .art,
.product-grid .product-card:nth-child(6n+3) .art,
.scroll-row .product-card:nth-child(4n+2) .art{
  aspect-ratio: 3 / 4;
}
.product-card .art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Mobile touch targets (>= ~44px) ---- */
@media (max-width: 880px){
  .qty-control button{ width: 44px; height: 44px; }
  .qty-control span{ width: 40px; }
  .size-opt{ width: 48px; height: 48px; }
  .main-nav a{ padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
  .home-header-nav a,
  .home-collections-toggle{ padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; }
  .icon-btn,
  .home-icon-btn,
  .home-icon-link,
  .nav-toggle{ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- Mobile: collapse the home collections mega-menu into a tap accordion ---- */
@media (max-width: 980px){
  .home-collections-panel.is-collapsible{ display: none; }
  .home-collections-panel.is-collapsible.is-open{ display: grid; }
  .home-collections-toggle span{ transition: transform 300ms var(--ease-premium); }
  .home-collections-toggle[aria-expanded="true"] span{ transform: rotate(180deg); }
}

/* ---- Prevent horizontal overflow from large display headings on phones ---- */
html, body{ overflow-x: hidden; max-width: 100%; }
@media (max-width: 620px){
  h1,
  .opening-hero-copy h1{ font-size: clamp(1.9rem, 9vw, 3rem); overflow-wrap: break-word; }
  h2{ font-size: clamp(1.55rem, 7.4vw, 2.3rem); overflow-wrap: break-word; }
  .home-header{ max-width: 100%; }
  .home-header-nav{ width: 100%; max-width: 100%; flex-wrap: wrap; gap: 4px 12px; }
  .home-header-nav a,
  .home-collections-toggle{ font-size: 0.62rem; letter-spacing: 0.06em; padding: 8px 2px; }
}

/* ==========================================================================
   PDP GALLERY - full-garment visibility, next/prev, thumbnails, lightbox
   ========================================================================== */

/* Main image: object-fit: contain in a tall 2/3 box so heads/hems are never
   cropped; a soft fill covers any letterboxing. Capped so it can't dominate. */
.pdp-stage{
  position: relative;
  aspect-ratio: 2 / 3;
  max-height: 80vh;
  margin: 0 auto;
  border: var(--border-hair);
  background: linear-gradient(160deg, #F2ECDD 0%, #E8DCC6 100%);
  overflow: hidden;
  outline: none;
  border-radius: var(--radius);
}
.pdp-stage:focus-visible{ box-shadow: 0 0 0 2px var(--gold-ink); }
.pdp-main-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}
.pdp-main-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Overlaid next/prev arrows + expand control */
.pdp-nav,
.pdp-expand{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(252,250,246,0.88);
  color: var(--espresso);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(36,28,24,0.18);
  opacity: 0;
  transition: opacity .25s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  z-index: 3;
}
.pdp-nav{ top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.pdp-nav svg{ width: 22px; height: 22px; }
.pdp-prev{ left: 12px; }
.pdp-next{ right: 12px; }
.pdp-prev svg{ transform: rotate(180deg); }
.pdp-expand{ bottom: 12px; right: 12px; width: 42px; height: 42px; }
.pdp-expand svg{ width: 18px; height: 18px; }
.pdp-nav:hover,
.pdp-expand:hover{ background: #fff; }
.pdp-nav:focus-visible,
.pdp-expand:focus-visible{ opacity: 1; outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.pdp-stage:hover .pdp-nav,
.pdp-stage:hover .pdp-expand,
.pdp-stage:focus-within .pdp-nav,
.pdp-stage:focus-within .pdp-expand{ opacity: 1; }
@media (hover: none){
  .pdp-nav,
  .pdp-expand{ opacity: 1; }   /* always visible on touch devices */
}

/* Thumbnail strip: one per image, adaptive count (no hardcoded slots) */
.pdp-thumbs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 78px));
  gap: 10px;
  margin-top: 14px;
}
.pdp-thumbs:empty{ display: none; }
.pdp-thumb{
  padding: 0;
  appearance: none;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(18,16,14,0.14);
  background: var(--ivory);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .3s var(--ease-premium);
}
.pdp-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover{ transform: translateY(-2px); border-color: rgba(176,138,60,0.6); }
.pdp-thumb.active{ border-color: var(--gold-ink); box-shadow: 0 0 0 2px var(--gold-ink); }
.pdp-thumb:focus-visible{ outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.pdp-thumb-video{ position: relative; }
.pdp-thumb-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18,16,14,0.4);
  color: #fff;
  transition: background .2s var(--ease);
  pointer-events: none;
}
.pdp-thumb-play svg{
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.pdp-thumb-video:hover .pdp-thumb-play{
  background: rgba(18,16,14,0.22);
}
@media (max-width: 540px){
  .pdp-thumbs{ grid-template-columns: repeat(auto-fill, minmax(52px, 70px)); }
}

/* Fullscreen lightbox */
.pdp-lightbox{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(12,10,9,0.93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.pdp-lightbox.is-open{ opacity: 1; visibility: visible; }
.pdp-lb-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  user-select: none;
  -webkit-user-drag: none;
}
.pdp-lb-video{
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  border-radius: var(--radius);
  outline: none;
}

/* Fabric & Craftsmanship divided specifications */
.fabric-specs{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.fabric-spec-item{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.fabric-spec-label{
  font-weight: 600;
  color: var(--espresso);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.fabric-spec-val{
  color: var(--espresso-soft, #4a4038);
}
.pdp-lb-close,
.pdp-lb-nav{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease);
  z-index: 2;
}
.pdp-lb-close:hover,
.pdp-lb-nav:hover{ background: rgba(255,255,255,0.28); }
.pdp-lb-close:focus-visible,
.pdp-lb-nav:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.pdp-lb-close{ top: 18px; right: 20px; width: 46px; height: 46px; }
.pdp-lb-close svg{ width: 24px; height: 24px; }
.pdp-lb-nav{ top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.pdp-lb-nav svg{ width: 26px; height: 26px; }
.pdp-lb-prev{ left: clamp(10px, 3vw, 34px); }
.pdp-lb-next{ right: clamp(10px, 3vw, 34px); }
.pdp-lb-prev svg{ transform: rotate(180deg); }
.pdp-lb-counter{
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.82);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}
body.pdp-lb-open{ overflow: hidden; }
@media (max-width: 540px){
  .pdp-lb-close{ width: 42px; height: 42px; top: 12px; right: 12px; }
  .pdp-lb-nav{ width: 44px; height: 44px; }
}

/* ==========================================================================
   Polish overrides (placed last so equal-specificity selectors win)
   ========================================================================== */

/* ---- Compact PDP spec tiles: CRAFT / MADE TO ORDER / LEAD TIME / CARE ----
   Reads as a tight spec sheet, not a headline block. */
.spec-grid{ gap: 10px; margin: 16px 0 24px; }
.spec-grid div{ padding: 10px 12px; border-radius: var(--radius); }
.spec-grid span{
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
  margin-bottom: 4px;
}
.spec-grid strong{
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--espresso);
}

/* ---- Non-home header: robust mobile layout ----
   The earlier `auto 1fr auto` grid could overflow at narrow widths and push the
   cart cell off-screen (logo also drifted off-centre). Flex keeps the logo
   centred and the cart visible at every width. */
.nav-toggle{ color: var(--espresso); }   /* hamburger was inheriting a faint tone */
@media (max-width: 880px){
  /* Sides are fixed-size; the logo flexes to absorb width so the right-hand
     icons can never be pushed off the edge and clipped. */
  .header-bar{ display: flex; align-items: center; gap: 8px; overflow: visible; }
  .header-side{ flex: 0 0 auto; gap: 6px; }
  .header-bar > .logo{ flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; }
  .logo{ font-size: 1.05rem; white-space: nowrap; }
  .header-bar .logo-img{ height: 30px; flex: 0 0 auto; }
  .header-side .icon-btn,
  .header-side .header-search-btn,
  .header-side .nav-toggle{ padding: 4px; min-width: 40px; }
}

/* The off-canvas mobile nav is translated off-screen; clip the resulting
   horizontal overflow so it can't widen the document and push the sticky
   header's right-hand icons out of the visible viewport. */
html, body{ overflow-x: clip; }
@media (max-width: 880px){
  /* backdrop-filter turns #site-header into the containing block for the
     fixed off-canvas nav (confining + overflowing it). Drop it on mobile so
     the drawer is viewport-fixed and full-height. */
  #site-header,
  body.homepage #site-header{ -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- Floating WhatsApp contact ---- */
.whatsapp-float{
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 28px);
  z-index: 80;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #25d366;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.32), 0 6px 18px rgba(36, 28, 24, 0.18);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(37, 211, 102, 0.38), 0 8px 22px rgba(36, 28, 24, 0.20);
}
.whatsapp-float:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.whatsapp-float svg{
  width: 31px;
  height: 31px;
}
@media (max-width: 640px){
  .whatsapp-float{
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg{
    width: 29px;
    height: 29px;
  }
}

/* ---- First-order coupon toast (bottom-left, opposite the WhatsApp float) ---- */
.promo-toast{
  position: fixed;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 28px);
  z-index: 80;
  width: min(322px, calc(100vw - 32px));
  padding: 20px 22px 22px;
  background: linear-gradient(180deg, #ffffff 0%, var(--white) 100%);
  border: 1px solid rgba(182, 148, 77, 0.55);
  border-radius: 14px;
  box-shadow:
    0 24px 52px -14px rgba(36, 28, 24, 0.30),
    0 6px 18px rgba(36, 28, 24, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  color: var(--espresso);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  transition:
    opacity 520ms var(--ease-premium),
    transform 520ms var(--ease-premium);
}
/* Gold hairline accent sweeping across the very top of the card. */
.promo-toast::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, #E7CE92 50%, var(--gold) 80%, transparent);
}
.promo-toast.is-visible{ opacity: 1; transform: translateY(0) scale(1); }

.promo-toast-close{
  position: absolute; top: 8px; right: 9px;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--taupe);
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.promo-toast-close:hover{ color: var(--espresso); background: var(--gold-soft); transform: rotate(90deg); }

.promo-toast-eyebrow{
  display: block; margin: 0 0 7px; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink);
}
.promo-toast-text{ margin: 0 18px 15px 0; font-family: var(--serif); font-size: 1.14rem; line-height: 1.3; }
.promo-toast-text strong{ color: var(--gold-ink); font-style: italic; font-weight: 600; }

.promo-toast-code{ display: flex; align-items: stretch; gap: 10px; }
.promo-toast-code-value{
  position: relative; flex: 1 1 auto; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600; letter-spacing: 0.18em;
  color: var(--espresso);
  background: var(--gold-soft);
  border: 1px dashed rgba(182, 148, 77, 0.7);
  border-radius: 8px; padding: 9px 12px;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
/* Slow shimmer sweeping across the code chip. */
.promo-toast-code-value::after{
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: skewX(-18deg);
  animation: promoShimmer 3.6s var(--ease) 1.4s infinite;
}
.promo-toast-copy{ flex: 0 0 auto; }

/* Copy confirmation: chip flushes to a soft sage and gives a gentle pop. */
.promo-toast.is-copied .promo-toast-code-value{
  background: rgba(47, 101, 88, 0.14);
  border-color: rgba(47, 101, 88, 0.5);
  animation: promoPop 440ms var(--ease-premium);
}
.promo-toast.is-copied .promo-toast-code-value::after{ animation: none; opacity: 0; }

@keyframes promoShimmer{
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes promoPop{
  0%   { transform: scale(1); }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  /* No movement - a plain fade only, and no looping shimmer/pop. */
  .promo-toast{ transition: opacity 220ms linear; transform: none; }
  .promo-toast.is-visible{ transform: none; }
  .promo-toast-close:hover{ transform: none; }
  .promo-toast-code-value::after{ display: none; animation: none; }
  .promo-toast.is-copied .promo-toast-code-value{ animation: none; }
}

/* ---- Header search overlay (translucent, frosted) ---- */
.header-search-btn{
  background: none; border: none; cursor: pointer;
  color: var(--espresso);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px;
}
.header-search-btn svg{ width: 19px; height: 19px; }
.search-overlay{
  position: fixed; inset: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: clamp(70px, 12vh, 150px) 20px 20px;
  background: rgba(18,16,14,0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--ease-premium);
}
.search-overlay.open{ opacity: 1; pointer-events: auto; }
.search-panel{
  width: min(600px, 100%);
  align-self: flex-start;
  background: rgba(250,247,240,0.97);
  border: 1px solid rgba(182,148,77,0.28);
  box-shadow: 0 24px 60px rgba(36,28,24,0.28);
  border-radius: var(--radius);
  overflow: hidden;
  transform: translateY(-12px);
  transition: transform 320ms var(--ease-premium);
}
.search-overlay.open .search-panel{ transform: translateY(0); }
.search-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(182,148,77,0.20);
}
.search-bar .search-ico{ color: var(--gold-ink); display: inline-flex; }
.search-bar .search-ico svg{ width: 20px; height: 20px; }
.search-bar input{
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-family: var(--serif); font-size: 1.15rem; color: var(--espresso);
}
.search-bar input::placeholder{ color: var(--taupe); }
.search-close{
  background: none; border: none; cursor: pointer; color: var(--taupe);
  display: inline-flex; padding: 4px;
}
.search-close svg{ width: 20px; height: 20px; }
.search-results{ max-height: min(52vh, 460px); overflow-y: auto; }
.search-result{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(18,16,14,0.06);
  transition: background var(--speed) var(--ease);
}
.search-result:hover{ background: rgba(182,148,77,0.10); }
.search-result-name{ font-family: var(--serif); font-size: 1rem; color: var(--espresso); }
.search-result-meta{ font-size: 0.74rem; letter-spacing: 0.04em; color: var(--gold-ink); white-space: nowrap; }
.search-empty{ padding: 22px 18px; color: var(--taupe); font-size: 0.9rem; margin: 0; }

/* ============================================================
   PAGE HEADERS - one shared, moderate scale for content/utility
   pages (checkout, contact, size guide, shipping, policies,
   customization). Distinct from the homepage hero: smaller, and
   left-aligned to the .container gutter, so every page's heading
   starts at the same X position and reads at a consistent size.
   ============================================================ */
.page-header{
  text-align: left;
  max-width: 760px;
  margin: 0 0 40px;            /* left edge = .container gutter (never auto-centered) */
}
.page-header .eyebrow{ display: block; margin-bottom: 12px; }
.page-header h1{
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.page-header .lede{ margin: 0; }
@media (max-width: 640px){
  .page-header{ margin-bottom: 30px; }
  .page-header h1{ font-size: clamp(1.85rem, 7.5vw, 2.25rem); }
}

/* Product page: name sized proportionate to the info column (NOT the
   hero scale), with tightened vertical rhythm between the category
   label, name, price and colour swatches so the block reads as one
   cohesive unit at any name length. */
.pdp-info h1{
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.pdp-info .p-cat{ margin-bottom: 8px; }
.pdp-info .p-price{ margin: 0 0 18px; }
.pdp-info .pdp-colors{ margin: 0 0 20px; }
.pdp-info .lede{ margin: 0 0 22px; }
@media (max-width: 640px){
  .pdp-info h1{ font-size: clamp(1.75rem, 8vw, 2.1rem); }
}

/* Editorial split copy (e.g. index.html "Pret Edition"): deliberate, generous
   spacing between the eyebrow, heading and lede so the three read as an
   intentional editorial block rather than cramped stacked text. */
.split-copy .eyebrow{ display: block; margin-bottom: 16px; }
.split-copy h2{ margin: 0 0 20px; }
.split-copy .lede{ margin: 0; }