/* ==========================================================================
   DRISHTAL
   Cool ivory, cool metal, and the only colour on any page comes from the
   stone being looked at. Gold and plum are deliberately absent.
   ========================================================================== */

:root{
  /* Drishtal brand book. Imperial Plum and Champagne Gold carry the brand;
     Ivory Cream gives it room to breathe. */
  --plum:       #1B081C;   /* Imperial Plum — primary ground */
  --cream:      #F4EFE6;   /* Ivory Cream — always cream, for text
                              and surfaces on the dark ground */
  --plum-deep:  #140614;   /* deeper plum, for layering */
  --ink:        #241220;   /* Ink — headings on cream */
  --gold:       #C6A567;   /* Champagne Gold — accent */
  --gold-deep:  #A48456;   /* Deep Gold — hover, rules */
  --pearl:      #F4EFE6;   /* Ivory Cream — page ground */
  --paper:      #FBF8F2;   /* raised surfaces */

  /* Text. Deliberately dark: the previous grey read as washed out. */
  --graphite:   #4A3540;
  --silver:     #7C6A73;
  --halo:       #E4DACA;   /* warm hairline */
  --midnight:   #1B081C;

  /* Stone accents. Set per page from the stone in view. */
  --moonstone:  #A3BCD4;
  --labradorite:#37666B;
  --aquamarine: #7CB0C2;
  --amethyst:   #6A4A8C;
  --citrine:    #C1913C;
  --rosequartz: #D5A4A4;
  --onyx:       #1B1B1D;
  --lapis:      #26407A;
  --carnelian:  #B0532D;
  --tigereye:   #856022;
  --garnet:     #77202B;

  --accent:     var(--gold-deep);
  --whatsapp:   #25D366;

  /* 8px scale. Nothing off-scale anywhere. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px; --s11: 192px;

  --gutter: var(--s5);
  --max: 1440px;
  --header-h: 68px;
  --section-y: var(--s9);

  /* Lora replaces Bodoni Moda. Bodoni is a didone: its thin strokes reduce to
     near-invisible hairlines at display sizes, which is why the headings read
     as blurred rather than sharp. Lora holds weight at every size. */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, sans-serif;

  --ease: cubic-bezier(.16,.68,.24,1);
}

@media (min-width: 768px){
  :root{ --gutter: var(--s7); --section-y: var(--s10); --header-h: 78px; }
}
@media (min-width: 1100px){
  :root{ --gutter: var(--s8); --section-y: var(--s10); }
}

/* ------------------------------------------------------------------ reset */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--pearl);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-weight:500; }
p{ margin:0 0 var(--s4); }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 var(--s4); padding-left:1.2em; }
img,svg,picture{ display:block; max-width:100%; }
/* Without height:auto the HTML height attribute survives as a fixed
   pixel height and stretches any image sized with width:100%. */
img{ height:auto; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select{ font:inherit; }
hr{ border:0; border-top:1px solid var(--halo); margin:var(--s7) 0; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}
.skip{
  position:absolute; left:var(--s4); top:-100px; z-index:300;
  background:var(--ink); color:var(--cream);
  padding:var(--s3) var(--s4); font-size:.8125rem;
}
.skip:focus{ top:var(--s4); }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------- typography */

.d-xl{ font-family:var(--font-display); font-weight:500;
       font-size:clamp(2.25rem,5.6vw,4rem);
       line-height:1.1; letter-spacing:-.015em; }
.d-l{ font-family:var(--font-display); font-weight:500;
      font-size:clamp(1.75rem,3.6vw,2.75rem);
      line-height:1.16; letter-spacing:-.012em; }
.d-m{ font-family:var(--font-display); font-weight:500;
      font-size:clamp(1.3125rem,2.4vw,1.875rem);
      line-height:1.22; letter-spacing:-.008em; }
.d-s{ font-family:var(--font-display); font-weight:500;
      font-size:clamp(1.0625rem,1.6vw,1.3125rem);
      line-height:1.3; }
.emo{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.0625rem,1.7vw,1.375rem); line-height:1.5;
  color:var(--ink);
}
.lede{ font-size:1.0625rem; line-height:1.72; color:var(--graphite); }
.small{ font-size:.875rem; line-height:1.55; color:var(--graphite); }
.label{
  font-family:var(--font-body); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; line-height:1.4;
}
.eyebrow{ color:var(--accent); margin:0 0 var(--s3); }
.price{ font-size:1.125rem; font-weight:400; font-variant-numeric:tabular-nums; }
.price--enquire{ font-size:1rem; color:var(--graphite); font-style:italic;
  font-family:var(--font-display); }
.muted{ color:var(--silver); }

/* ------------------------------------------------------------------ layout */

.wrap{
  max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:760px; }
.wrap--mid{ max-width:1040px; }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:var(--s8); }
.section--dark{ background:var(--plum); color:var(--cream); }
.section--deep{ background:var(--plum-deep); color:var(--cream); }
.section--dark .lede,.section--dark .small,
.section--deep .lede,.section--deep .small{ color:rgba(244,239,230,.82); }
.section--dark .eyebrow,.section--deep .eyebrow{ color:var(--gold); }
.section--dark .emo,.section--deep .emo{ color:rgba(244,239,230,.92); }
.section--dark .prose p,.section--deep .prose p,
.section--dark .prose li,.section--deep .prose li{ color:rgba(244,239,230,.82); }
.section--dark .d-xl,.section--dark .d-l,.section--dark .d-m,.section--dark .d-s,
.section--deep .d-xl,.section--deep .d-l,.section--deep .d-m,
.section--deep .d-s{ color:var(--cream); }
.section--deep .rule{ background:rgba(198,165,103,.24); }
.section--deep .link-more{ border-color:rgba(198,165,103,.45); color:var(--gold); }
.section--deep .link-more:hover{ border-color:var(--gold); }
.section--deep .dl dt,.section--dark .dl dt{ color:rgba(198,165,103,.85); }
.section--deep .dl dd,.section--dark .dl dd{ color:rgba(244,239,230,.88); }
.section--deep .dl,.section--dark .dl,
.section--deep .dl__row,.section--dark .dl__row{
  border-color:rgba(198,165,103,.22); }
.section--paper{ background:var(--paper); }
.rule{ height:1px; background:var(--halo); border:0; }
.section--dark .rule{ background:rgba(198,165,103,.24); }

.head{ max-width:640px; margin-bottom:var(--s7); }
.head--center{ margin-inline:auto; text-align:center; }
.head__more{ margin-top:var(--s4); }

.link-more{
  display:inline-block; font-family:var(--font-body); font-size:.8125rem;
  font-weight:500; letter-spacing:.06em; padding-bottom:2px;
  border-bottom:1px solid var(--halo);
  transition:border-color .25s var(--ease);
}
.link-more:hover{ border-color:var(--ink); }
.section--dark .link-more{ border-color:rgba(198,165,103,.45);
  color:var(--gold); }
.section--dark .link-more:hover{ border-color:var(--gold); }

/* ----------------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:0 var(--s5);
  font-family:var(--font-body); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--ink); background:var(--ink); color:var(--cream);
  border-radius:0; text-align:center;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.btn--light{ border-color:var(--cream); background:var(--cream); color:var(--plum); }
.btn--light:hover{ background:transparent; color:var(--cream); }
.btn--ghost-light{ background:transparent; border-color:var(--gold);
  color:var(--gold); }
.btn--ghost-light:hover{ background:var(--gold); color:var(--plum);
  border-color:var(--gold); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--plum); }
.btn--gold:hover{ background:transparent; color:var(--gold); }
.btn--wa{
  background:var(--whatsapp); border-color:var(--whatsapp); color:#08351D;
  border-radius:999px;
}
.btn--wa:hover{ background:#1EB958; border-color:#1EB958; color:#08351D; }
.btn--block{ width:100%; }
.btn svg{ width:17px; height:17px; flex:none; }

/* ------------------------------------------------------------------ header */

.hdr{
  position:sticky; top:0; z-index:120;
  background:#1B081C;
  border-bottom:1px solid rgba(198,165,103,.22);
  color:var(--cream);
}
.hdr__bar{
  position:relative;
  max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
  display:flex; align-items:center; gap:var(--s4);
}
.hdr__logo{ display:flex; align-items:center; gap:var(--s3); flex:none; }
.hdr__logo img{ height:38px; width:auto; }
.hdr__word{
  font-family:var(--font-display); font-weight:500; font-size:1.125rem;
  letter-spacing:.2em; line-height:1; padding-top:2px; white-space:nowrap;
  color:var(--gold);
}
@media (max-width:400px){
  :root{ --gutter: var(--s4); }
  .hdr__logo img{ height:30px; }
  .hdr__word{ font-size:.875rem; letter-spacing:.1em; }
  .hdr__icon,.hdr__burger{ width:36px; height:36px; }
  .hdr__bar{ gap:var(--s2); }
}
@media (max-width:340px){
  .hdr__word{ display:none; }
}
.hdr__nav{ display:none; margin-left:auto; }
.hdr__tools{ display:flex; align-items:center; gap:var(--s2); margin-left:auto; }
.hdr__icon{
  width:40px; height:40px; display:grid; place-items:center;
  color:var(--cream);
}
.hdr__icon:hover{ color:var(--gold); }
.hdr__icon svg{ width:19px; height:19px; }
.hdr__burger{ width:40px; height:40px; display:grid; place-items:center; }
.hdr__burger svg{ width:20px; height:20px; }

@media (min-width:1024px){
  .hdr__nav{ display:flex; align-items:center; gap:var(--s6); }
  .hdr__tools{ margin-left:var(--s6); }
  .hdr__burger{ display:none; }
}

.nav__item{ position:static; }
.nav__link{
  font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; padding:var(--s3) 0; display:inline-block;
  color:var(--cream);
  transition:color .2s var(--ease);
}
.nav__link:hover{ color:var(--gold); }

.nav__panel{
  position:absolute; top:100%;
  left:var(--gutter); right:var(--gutter);
  transform:translateY(-6px);
  background:var(--plum-deep); border:1px solid rgba(198,165,103,.22);
  border-top:0; color:var(--cream);
  padding:var(--s7) var(--s6); display:grid; gap:var(--s7);
  grid-template-columns:repeat(4,minmax(0,1fr));
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  box-shadow:0 24px 44px -30px rgba(20,22,26,.28);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
}
.nav__col h3{ margin-bottom:var(--s3); color:var(--gold); }
.nav__col a{
  display:block; padding:var(--s1) 0; font-size:.875rem;
  color:rgba(244,239,230,.82);
  transition:color .18s var(--ease);
}
.nav__col a:hover{ color:var(--gold); }
.nav__swatch{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:var(--s2); vertical-align:baseline;
}

/* mobile drawer */
.drawer{
  position:fixed; inset:var(--header-h) 0 0; z-index:110;
  background:var(--plum); color:var(--cream); overflow-y:auto;
  padding:var(--s5) var(--gutter) var(--s9);
  transform:translateY(-101%);
  transition:transform .32s var(--ease);
  visibility:hidden;
}
.drawer[data-open="true"]{ transform:translateY(0); visibility:visible; }
.drawer__group{ border-bottom:1px solid rgba(198,165,103,.2); }
.drawer__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) 0; font-size:.8125rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-align:left;
}
.drawer__toggle svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.drawer__toggle[aria-expanded="true"] svg{ transform:rotate(45deg); }
.drawer__body{ display:none; padding-bottom:var(--s4); }
.drawer__body[data-open="true"]{ display:block; }
.drawer__body a{ display:block; padding:var(--s3) 0; font-size:.9375rem;
  color:rgba(244,239,230,.84); }
.drawer__foot{ margin-top:var(--s6); display:grid; gap:var(--s3); }
@media (min-width:1024px){ .drawer{ display:none; } }

/* search overlay */
.search{
  position:fixed; inset:0; z-index:200; background:#F4EFE6;
  display:none;
  padding:var(--s8) var(--gutter);
}
.search[data-open="true"]{ display:block; }
.search__inner{ max-width:720px; margin-inline:auto; }
.search__row{ display:flex; align-items:center; gap:var(--s3);
  border-bottom:1px solid var(--ink); padding-bottom:var(--s3); }
.search__input{
  flex:1; border:0; background:none; font-family:var(--font-display);
  font-size:clamp(1.5rem,4vw,2.25rem); padding:var(--s2) 0;
}
.search__input:focus{ outline:none; }
.search__hint{ margin-top:var(--s4); }
.search__results{ margin-top:var(--s6); display:grid; gap:var(--s1); }
.search__hit{
  display:flex; gap:var(--s4); align-items:center; padding:var(--s3);
  border:1px solid transparent;
}
.search__hit:hover{ border-color:var(--halo); background:var(--paper); }
.search__hit img{ width:56px; height:56px; object-fit:cover; flex:none; }
.search__hit-meta{ display:block; min-width:0; }
.search__hit-name{ display:block; }
.search__hit-name{ font-family:var(--font-display); font-size:1.0625rem; }
.search__close{ position:absolute; top:var(--s5); right:var(--gutter);
  width:44px; height:44px; display:grid; place-items:center; }

/* -------------------------------------------------------------------- hero */

.hero{
  display:grid; gap:0;
  border-bottom:1px solid var(--halo);
}
.hero__media{ position:relative; overflow:hidden; background:var(--paper); }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__copy{
  padding:var(--s8) var(--gutter);
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--s5);
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.hero__ctas .btn{ flex:1 1 auto; min-width:200px; }
@media (min-width:900px){
  .hero{ grid-template-columns:1.02fr .98fr; align-items:stretch;
    min-height:calc(100svh - var(--header-h)); }
  .hero__media{ order:2; }
  .hero__copy{ order:1; padding:var(--s9) var(--s7) var(--s9) var(--gutter);
    max-width:720px; margin-left:auto; }
  .hero__ctas .btn{ flex:0 0 auto; }
  /* Held below .d-xl so the headline holds its intended three lines. */
  .hero h1{ font-size:clamp(2.5rem, 4.6vw, 3.75rem); }
}

/* Signature: The Light Shift.
   A single low-opacity sheen that tracks the pointer across the stone, the way
   adularescence moves in a moonstone. Pointer-driven on desktop,
   scroll-driven on touch. Disabled entirely under reduced motion. */
.shift{ position:relative; overflow:hidden; }
.shift::after{
  content:""; position:absolute; inset:-30%;
  pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,252,244,.5) 0%, rgba(198,165,103,.26) 32%,
    rgba(255,255,255,0) 62%);
  transform:translate3d(var(--x,0px), var(--y,0px), 0);
  transition:opacity .5s var(--ease);
}
.shift[data-lit="true"]::after{ opacity:.14; }
@media (prefers-reduced-motion:reduce){
  .shift::after{ display:none; }
}

/* --------------------------------------------------------- editorial split */

.split{ display:grid; gap:var(--s7); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1.05fr .95fr; gap:var(--s9); }
  .split--flip .split__media{ order:2; }
  .split--wide-media{ grid-template-columns:.85fr 1.15fr; }
}
.split__body{ max-width:520px; }
.split__media img{ width:100%; }

/* ------------------------------------------------------------ product grid */

.pgrid{
  display:grid; gap:var(--s5) var(--s4);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){ .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .pgrid{ grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s7) var(--s5); } }
.pgrid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){ .pgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.pcard{ display:block; }
.pcard__media,.pcard__body,.pcard__name,.pcard__stone,
.pcard__price,.pcard__cta{ display:block; }
.pcard__media{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--paper); margin-bottom:var(--s3);
}
.pcard__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), opacity .45s var(--ease);
}
.pcard__media img+img{ position:absolute; inset:0; opacity:0; }
.pcard:hover .pcard__media img{ transform:scale(1.035); }
.pcard:hover .pcard__media img+img{ opacity:1; }
.pcard__body{ border-top:1px solid var(--halo); padding-top:var(--s3); }
.pcard__name{
  font-family:var(--font-display); font-size:1.0625rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.pcard__stone{ margin-top:var(--s1); color:var(--silver); }
.pcard__price{ margin-top:var(--s2); }
.pcard__cta{
  margin-top:var(--s2); font-size:.75rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite);
  opacity:0; transform:translateY(-3px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.pcard:hover .pcard__cta,.pcard:focus-visible .pcard__cta{
  opacity:1; transform:translateY(0);
}
@media (hover:none){ .pcard__cta{ opacity:1; transform:none; } }

/* --------------------------------------------------------------- tile grids */

.tiles{ display:grid; gap:var(--s4); grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .tiles--5{ grid-template-columns:repeat(5,1fr); } }
@media (min-width:1024px){ .tiles--4{ grid-template-columns:repeat(4,1fr); } }

.mtile{
  border:1px solid var(--halo); background:var(--paper);
  padding:var(--s5) var(--s4); min-height:150px;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s3);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.mtile:hover{ border-color:var(--ink); transform:translateY(-2px); }
.mtile__name{ font-family:var(--font-display); font-size:1.25rem; }
.mtile__line{ font-size:.8125rem; color:var(--graphite); line-height:1.5; }
.mtile__bar{ height:2px; width:28px; background:var(--accent); }

/* three-column text block, used by the 925 section */
.three-up{ display:grid; gap:var(--s7); }
@media (min-width:768px){
  .three-up{ grid-template-columns:repeat(3,1fr); gap:var(--s7); }
}
.three-up > div{ border-top:1px solid var(--halo); padding-top:var(--s4); }

/* stone strip */
.strip{
  display:flex; gap:var(--s5); overflow-x:auto; padding-bottom:var(--s4);
  scroll-snap-type:x proximity; scrollbar-width:none;
  scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  overscroll-behavior-x:contain;
}
.strip::-webkit-scrollbar{ display:none; }
.stile{ display:block; flex:none; width:104px; text-align:center;
  scroll-snap-align:start; }
.stile picture{ display:block; }
.stile img{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  margin-bottom:var(--s3); background:var(--paper);
  transition:transform .35s var(--ease);
}
.stile:hover img{ transform:scale(1.05); }
.stile__name{ display:block; font-size:.8125rem; line-height:1.35; }
@media (min-width:768px){
  .strip{ justify-content:flex-start; gap:var(--s7); }
  .stile,.stile img{ width:124px; }
  .stile img{ height:124px; }
}

/* ------------------------------------------------------------ product page */

.crumb{ padding-block:var(--s4); font-size:.75rem; color:var(--silver); }
.crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:var(--s2); align-items:center; }
.crumb a:hover{ color:var(--ink); }
.crumb li+li::before{ content:"/"; margin-right:var(--s2); color:var(--halo); }

.pdp{ display:grid; gap:var(--s7); }
@media (min-width:900px){
  .pdp{ grid-template-columns:1.12fr .88fr; gap:var(--s8);
    align-items:start; }
  .pdp__aside{ position:sticky; top:calc(var(--header-h) + var(--s5)); }
}

.gal__main{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper);
  border:1px solid var(--halo);
}
.gal__main img{ width:100%; height:100%; object-fit:cover; }
.gal__thumbs{ display:flex; gap:var(--s2); margin-top:var(--s2); flex-wrap:wrap; }
.gal__thumb{
  width:72px; aspect-ratio:1/1; border:1px solid var(--halo);
  background:var(--paper); overflow:hidden; padding:0;
}
.gal__thumb[aria-current="true"]{ border-color:var(--ink); }
.gal__thumb img{ width:100%; height:100%; object-fit:cover; }
.gal__pending{
  display:grid; place-items:center; text-align:center;
  color:var(--silver); font-size:.5rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.25; padding:3px;
  overflow:hidden;
  background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 6px,
    #F4F4F1 6px,#F4F4F1 12px);
}

.pdp__title{ margin-bottom:var(--s3); }
.pdp__emo{ margin-bottom:var(--s5); }
.pdp__price{ margin-bottom:var(--s2); }
.pdp__tax{ margin-bottom:var(--s5); }

.dl{ margin:0; border-top:1px solid var(--halo); }
.dl__row{
  display:grid; grid-template-columns:38% 1fr; gap:var(--s4);
  padding:var(--s3) 0; border-bottom:1px solid var(--halo);
}
.dl dt{ color:var(--silver); font-size:.8125rem; }
.dl dd{ margin:0; font-size:.9375rem; }

.sizes{ margin-block:var(--s5); }
.sizes__row{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.sizes__opt{ position:relative; }
.sizes__opt input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.sizes__opt span{
  display:grid; place-items:center; min-width:48px; height:48px;
  border:1px solid var(--halo); font-size:.875rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.sizes__opt input:checked+span{ border-color:var(--ink); background:var(--ink);
  color:var(--cream); }
.sizes__opt input:focus-visible+span{ outline:2px solid var(--accent);
  outline-offset:2px; }
.sizes__warn{ display:none; margin-top:var(--s3); font-size:.8125rem;
  color:var(--carnelian); }
.sizes__warn[data-show="true"]{ display:block; }

.pdp__actions{ display:grid; gap:var(--s3); margin-block:var(--s5); }
.pdp__reassure{ display:grid; gap:var(--s2); font-size:.8125rem;
  color:var(--graphite); border-top:1px solid var(--halo); padding-top:var(--s4); }
.pdp__reassure div{ display:flex; gap:var(--s3); }
.pdp__reassure svg{ width:15px; height:15px; flex:none; margin-top:3px;
  color:var(--silver); }
.pdp__reassure a{ border-bottom:1px solid var(--halo); padding-bottom:1px; }
.pdp__reassure a:hover{ border-color:var(--ink); }

/* sticky mobile buy bar */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  background:#F4EFE6;
  border-top:1px solid var(--halo);
  padding:var(--s3) var(--gutter);
  display:flex; align-items:center; gap:var(--s4);
  transform:translateY(101%); transition:transform .3s var(--ease);
}
.buybar[data-show="true"]{ transform:translateY(0); }
.buybar__meta{ flex:1; min-width:0; }
.buybar__meta .price{ font-size:1rem; }
.buybar .btn{ flex:none; }
@media (min-width:900px){ .buybar{ display:none; } }
/* Set by the product template so the sticky bar never sits over content. */
body[data-has-buybar]{ padding-bottom:88px; }
@media (min-width:900px){ body[data-has-buybar]{ padding-bottom:0; } }

/* disclosure block */
.disclose{
  border-left:2px solid var(--accent); padding:var(--s2) 0 var(--s2) var(--s5);
  font-size:.875rem; color:var(--graphite); line-height:1.6;
}
.disclose strong{ font-weight:500; color:var(--ink); }

/* accordions */
.acc{ border-top:1px solid var(--halo); }
.acc__item{ border-bottom:1px solid var(--halo); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s4) 0; text-align:left;
  font-size:.9375rem; min-height:56px;
}
.acc__btn svg{ width:14px; height:14px; flex:none;
  transition:transform .25s var(--ease); color:var(--silver); }
.acc__btn[aria-expanded="true"] svg{ transform:rotate(45deg); }
.acc__panel{ padding:0 0 var(--s5); max-width:64ch; }
.acc__panel[hidden]{ display:none; }

/* ------------------------------------------------------------------ prose */

.prose{ max-width:68ch; }
.prose h2{ font-family:var(--font-display); font-size:clamp(1.375rem,2.6vw,1.875rem);
  line-height:1.2; margin:var(--s8) 0 var(--s4); }
.prose h3{ font-family:var(--font-display); font-size:1.25rem;
  margin:var(--s6) 0 var(--s3); }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose p,.prose li{ font-size:1.0625rem; line-height:1.75; color:var(--graphite); }
.prose li{ margin-bottom:var(--s2); }
.prose strong{ color:var(--ink); font-weight:500; }
.prose a{ border-bottom:1px solid var(--halo); }
.prose a:hover{ border-color:var(--ink); }
.prose blockquote{
  margin:var(--s6) 0; padding-left:var(--s5);
  border-left:2px solid var(--accent);
  font-family:var(--font-display); font-style:italic; font-size:1.25rem;
  line-height:1.5; color:var(--ink);
}
.prose table{ width:100%; border-collapse:collapse; margin:var(--s5) 0;
  font-size:.9375rem; }
.prose th,.prose td{ text-align:left; padding:var(--s3) var(--s3) var(--s3) 0;
  border-bottom:1px solid var(--halo); vertical-align:top; }
.prose th{ font-weight:500; color:var(--ink); font-size:.8125rem;
  letter-spacing:.04em; text-transform:uppercase; }
.prose td{ color:var(--graphite); }
.prose hr{ margin:var(--s7) 0; }

/* ---------------------------------------------------------------- filters */

.filters{ margin-bottom:var(--s6); }
.filters__open{
  display:flex; align-items:center; gap:var(--s2);
  border:1px solid var(--ink); min-height:44px; padding:0 var(--s4);
  font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
}
.filters__count{ background:var(--ink); color:var(--cream);
  border-radius:999px; min-width:19px; height:19px; display:grid;
  place-items:center; font-size:.625rem; }
.filters__panel{ display:none; }
.filters__panel[data-open="true"]{ display:block; }
.filters__grid{ display:grid; gap:var(--s5); margin-top:var(--s5);
  padding-block:var(--s5); border-block:1px solid var(--halo); }
@media (min-width:768px){
  .filters__grid{ grid-template-columns:repeat(3,1fr); gap:var(--s6); }
}
.filters__group h3{ margin-bottom:var(--s3); color:var(--silver); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:100%; height:100%; margin:0;
  cursor:pointer; }
.chip span{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:36px; padding:0 var(--s3);
  border:1px solid var(--halo); border-radius:999px;
  font-size:.8125rem; transition:border-color .2s var(--ease),
  background .2s var(--ease), color .2s var(--ease);
}
.chip input:checked+span{ border-color:var(--ink); background:var(--ink);
  color:var(--cream); }
.chip input:focus-visible+span{ outline:2px solid var(--accent); outline-offset:2px; }
.chip__dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.filters__foot{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); margin-top:var(--s4); flex-wrap:wrap; }
.filters__clear{ font-size:.8125rem; border-bottom:1px solid var(--halo); }
.filters__clear:hover{ border-color:var(--ink); }
.results-count{ font-size:.8125rem; color:var(--graphite); }
.empty{ padding:var(--s9) 0; text-align:center; }

/* ------------------------------------------------------------------- quiz */

.quiz{ max-width:680px; margin-inline:auto; }
.quiz__step{ display:none; }
.quiz__step[data-active="true"]{ display:block; }
.quiz__q{ margin-bottom:var(--s6); }
.quiz__opts{ display:grid; gap:var(--s3); }
.quiz__opt{
  border:1px solid var(--halo); background:var(--paper);
  padding:var(--s4) var(--s5); text-align:left; min-height:64px;
  display:flex; align-items:center; gap:var(--s4);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.quiz__opt:hover{ border-color:var(--ink); transform:translateX(3px); }
.quiz__opt b{ font-family:var(--font-display); font-size:1.125rem;
  font-weight:400; }
.quiz__opt small{ display:block; color:var(--graphite); font-size:.8125rem; }
.quiz__prog{ display:flex; gap:var(--s2); margin-bottom:var(--s6); }
.quiz__prog span{ height:2px; flex:1; background:var(--halo); }
.quiz__prog span[data-done="true"]{ background:var(--ink); }
.quiz__result{ display:none; }
.quiz__result[data-active="true"]{ display:block; }

/* ------------------------------------------------------------- journal */

.jgrid{ display:grid; gap:var(--s7); }
@media (min-width:768px){ .jgrid{ grid-template-columns:repeat(3,1fr);
  gap:var(--s5); } }
.jcard{ display:block; }
.jcard__media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper);
  margin-bottom:var(--s4); }
.jcard__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease); }
.jcard:hover .jcard__media img{ transform:scale(1.04); }
.jcard__meta{ display:flex; gap:var(--s3); color:var(--silver);
  margin-bottom:var(--s2); }
.jcard__media picture{ display:block; height:100%; }
.jcard__title{ display:block; font-family:var(--font-display);
  font-size:1.25rem; line-height:1.25; }

/* ------------------------------------------------------------- newsletter */

.news{ display:grid; gap:var(--s5); align-items:end; }
@media (min-width:768px){ .news{ grid-template-columns:1fr auto; } }
.news__form{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.news__input{
  flex:1 1 240px; min-height:48px; padding:0 var(--s4);
  border:1px solid rgba(198,165,103,.45); background:transparent;
  color:var(--cream); font-size:.9375rem;
}
.news__input::placeholder{ color:rgba(244,239,230,.55); }
.news__note{ margin-top:var(--s3); font-size:.75rem; }

/* ------------------------------------------------------------------ footer */

.ftr{ background:var(--plum-deep); color:rgba(244,239,230,.72);
  padding-block:var(--s9) var(--s6); }
.ftr__grid{ display:grid; gap:var(--s6); }
@media (min-width:768px){
  .ftr__grid{ grid-template-columns:1.4fr repeat(4,1fr); gap:var(--s6); }
}
.ftr__brand img{ width:210px; height:auto; margin-bottom:var(--s5); }
.ftr__word{ font-family:var(--font-display); font-weight:500;
  font-size:1.375rem; letter-spacing:.2em; color:var(--gold);
  margin-bottom:var(--s2); }
.ftr__tag{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(198,165,103,.75); margin-bottom:var(--s5); }
.ftr h3{ color:var(--gold); margin-bottom:var(--s4); }
.ftr__list{ list-style:none; margin:0; padding:0; }
.ftr__list li{ margin-bottom:var(--s2); }
.ftr__list a{ font-size:.875rem; color:rgba(244,239,230,.74); }
.ftr__list a:hover{ color:var(--gold); }
.ftr__bottom{
  margin-top:var(--s8); padding-top:var(--s5);
  border-top:1px solid rgba(198,165,103,.2);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  justify-content:space-between; font-size:.75rem;
  color:rgba(244,239,230,.56);
}
.ftr__legal{ display:flex; flex-wrap:wrap; gap:var(--s4); }

/* float WhatsApp */
.fab{
  position:fixed; right:var(--s5); bottom:var(--s5); z-index:100;
  width:52px; height:52px; border-radius:50%; background:var(--whatsapp);
  display:grid; place-items:center;
  box-shadow:0 8px 24px -8px rgba(20,22,26,.45);
  transition:transform .25s var(--ease);
}
.fab:hover{ transform:scale(1.06); }
.fab svg{ width:26px; height:26px; color:#fff; }
.fab--hide{ display:none; }

/* ------------------------------------------------------------ reveal + misc */

[data-reveal]{ opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.notice{
  border:1px solid var(--halo); background:var(--paper);
  padding:var(--s5); font-size:.875rem; color:var(--graphite);
}
.notice strong{ color:var(--ink); font-weight:500; }
.pill{
  display:inline-block; border:1px solid var(--halo); border-radius:999px;
  padding:var(--s1) var(--s3); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--graphite);
}
.stack-sm > * + *{ margin-top:var(--s3); }
.stack > * + *{ margin-top:var(--s5); }
.stack-lg > * + *{ margin-top:var(--s7); }
.center{ text-align:center; }
.flex-btns{ display:flex; flex-wrap:wrap; gap:var(--s3); }

/* ==========================================================================
   BRAND-BOOK REVISION
   Plum hero, gold accents, and denser vertical rhythm so the homepage reads
   short rather than sprawling.
   ========================================================================== */

/* Hero on Imperial Plum. The copy side carries the brand colour; the model
   image sits flush beside it at its native 4:5 so nothing is stretched. */
.hero--plum{
  background:var(--plum);
  color:var(--cream);
  border-bottom:1px solid rgba(198,165,103,.22);
}
.hero--plum .hero__copy{ gap:var(--s4); }
.hero--plum .lede{ color:rgba(244,239,230,.84); max-width:44ch; }
.hero--plum .eyebrow{ color:var(--gold); }
.hero--plum h1{ color:var(--cream); }
.hero__meta{ color:rgba(198,165,103,.8); letter-spacing:.04em; }
.hero--plum .hero__media{ background:var(--plum-deep); }
@media (min-width:900px){
  .hero--plum{
    min-height:0;
    height:clamp(560px, calc(100svh - var(--header-h)), 780px);
  }
  .hero--plum .hero__media{ height:100%; }
  .hero--plum .hero__media img,
  .hero--plum .hero__media picture{ height:100%; object-fit:cover; }
  .hero--plum .hero__copy{ padding-block:var(--s8); }
}

/* Meaning tiles on a plum ground. */
.mtile--dark{
  background:rgba(244,239,230,.04);
  border-color:rgba(198,165,103,.28);
}
.mtile--dark:hover{ border-color:var(--gold); background:rgba(198,165,103,.09); }
.mtile--dark .mtile__name{ color:var(--cream); }
.mtile--dark .mtile__line{ color:rgba(244,239,230,.72); }
.mtile__bar{ background:var(--gold); }

/* Gold lead-ins inside body copy. */
.gold-lead{ color:var(--gold); font-weight:600; }

/* Journal cards without imagery: the homepage was carrying too many pictures,
   so these are set as type only. */
.jgrid--text .jcard{
  border-top:1px solid var(--halo);
  padding-top:var(--s4);
}
.jgrid--text .jcard:hover .jcard__title{ color:var(--gold-deep); }
.jcard__stand{ display:block; margin-top:var(--s3); color:var(--graphite); }
.jcard__title{ transition:color .2s var(--ease); }

.center-prose{ max-width:62ch; margin-inline:auto; text-align:center; }
.center-prose p{ text-align:center; }

/* Product cards: warm hairline and a gold hover, on the cream ground. */
.pcard__media{ background:var(--paper); }
.pcard:hover .pcard__name{ color:var(--gold-deep); }
.pcard__name{ transition:color .2s var(--ease); }
.pcard__cta{ color:var(--gold-deep); }

/* Stone strip on plum. */
.section--deep .stile__name{ color:rgba(244,239,230,.86); }
.section--deep .stile img{ background:rgba(244,239,230,.06); }

/* Filters, chips and selects picked up the cool palette; warm them. */
.chip input:checked+span{ background:var(--ink); border-color:var(--ink); }
.sizes__opt input:checked+span{ background:var(--ink); border-color:var(--ink); }
select{ color:var(--ink); }

/* Tighter section rhythm. The previous 256px gaps made the page feel endless. */
:root{ --section-y: var(--s9); }
@media (min-width:768px){ :root{ --section-y: 112px; } }
@media (min-width:1100px){ :root{ --section-y: var(--s10); } }
.section--tight{ padding-block:var(--s8); }
@media (min-width:1100px){ .section--tight{ padding-block:var(--s9); } }

/* Crisper text rendering for the serif at display sizes. */
.d-xl,.d-l,.d-m,.d-s,.emo{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ==========================================================================
   LOOKBOOK
   An asymmetric editorial mosaic. Each cell states its own aspect-ratio to
   match the source image, so nothing is ever stretched to fit.
   ========================================================================== */
.look{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
.look__item{ margin:0; position:relative; overflow:hidden;
  background:var(--paper); }
.look__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.look__item--tall{ aspect-ratio:4/5; }
.look__item--wide{ aspect-ratio:3/2; }
.look__item--sq{ aspect-ratio:1/1; }
.look__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--s6) var(--s4) var(--s3);
  font-size:.6875rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream);
  background:linear-gradient(to top, rgba(27,8,28,.72), rgba(27,8,28,0));
}
@media (min-width:700px){
  .look{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  /* Tall portrait spans two rows on the left; the wide shot sits top right;
     the two squares fill beneath it. */
  .look{ grid-template-columns:38fr 30fr 28fr; grid-auto-rows:auto; }
  .look__item--tall{ grid-row:span 2; aspect-ratio:4/5; }
  .look__item--wide{ grid-column:span 2; aspect-ratio:3/2; }
  .look__item--sq{ aspect-ratio:1/1; }
}

/* Split media that should keep its own proportions rather than filling the
   column height. */
.split__media--natural img{ width:100%; height:auto; object-fit:contain; }

/* ==========================================================================
   PREMIUM PASS
   Deeper plum, gold used as a hairline rather than a fill, and clickable
   imagery throughout.
   ========================================================================== */

:root{
  /* Deeper, cooler plum reads more expensive than the flatter original. */
  --plum:       #1B081C;
  --plum-deep:  #120510;
  --plum-soft:  #2A1128;
  /* A brighter champagne for hairlines and small type on dark grounds. */
  --gold-lift:  #D8BE87;
}

/* Category cards. Every one is a link through to that category. */
.cats{ display:grid; gap:var(--s4); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .cats{ grid-template-columns:repeat(4,1fr);
  gap:var(--s5); } }
.cat{ display:block; }
.cat__media{
  display:block; position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--paper); border:1px solid var(--halo);
}
.cat__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease); }
.cat:hover .cat__media img{ transform:scale(1.045); }
.cat__body{ display:block; padding-top:var(--s3); }
.cat__name{ display:block; font-family:var(--font-display); font-weight:500;
  font-size:1.25rem; }
.cat__count{ display:block; color:var(--gold-deep); letter-spacing:.08em;
  margin-top:2px; }
.cat__line{ display:block; margin-top:var(--s2); color:var(--graphite); }
.cat__cta{
  display:inline-block; margin-top:var(--s3); color:var(--ink);
  border-bottom:1px solid var(--gold); padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.cat:hover .cat__cta{ color:var(--gold-deep); border-color:var(--gold-deep); }

/* A small gold label that appears over clickable imagery on hover. */
.hero__badge, .look__cap{
  position:absolute; left:var(--s4); bottom:var(--s4);
  font-family:var(--font-body); font-size:.625rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--plum); background:var(--gold);
  padding:var(--s2) var(--s3); border-radius:0;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.hero__media:hover .hero__badge,
.split__media:hover .hero__badge,
.look__item:hover .look__cap{ opacity:1; transform:translateY(0); }
@media (hover:none){
  .hero__badge,.look__cap{ opacity:1; transform:none; }
}
.hero__media, .split__media, .look__item{ position:relative; }

/* Anchor-wrapped media should not pick up link underlines or colour. */
a.hero__media, a.split__media, a.look__item{ display:block; color:inherit; }

/* Craft steps. */
.steps{ list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s6); grid-template-columns:1fr; }
@media (min-width:700px){ .steps{ grid-template-columns:repeat(2,1fr);
  gap:var(--s7) var(--s6); } }
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ padding-top:var(--s4); border-top:1px solid var(--gold); }
.step__n{
  display:block; font-family:var(--font-body); font-size:.6875rem;
  font-weight:600; letter-spacing:.2em; color:var(--gold-deep);
  margin-bottom:var(--s3);
}
.step h3{ margin-bottom:var(--s3); }
.step p{ color:var(--graphite); }

/* Design-name cards. */
.names{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media (min-width:700px){ .names{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .names{ grid-template-columns:repeat(3,1fr); } }
.nameit{
  display:block; padding:var(--s5); background:var(--pearl);
  border:1px solid var(--halo);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.nameit:hover{ border-color:var(--gold); transform:translateY(-2px); }
.nameit__title{ display:block; margin-bottom:var(--s3); }
.nameit__why{ display:block; color:var(--graphite); }

/* Lookbook captions are always legible on the deep ground. */
.section--deep .look__cap{ background:var(--gold); color:var(--plum); }

/* Gold hairline above every dark section heading, for a more finished feel. */
.section--dark .eyebrow,.section--deep .eyebrow{ color:var(--gold-lift); }

/* ==========================================================================
   DARK THEME
   Per the brand book: "Plum + gold carry the brand. Cream and white give it
   room to breathe." Imperial Plum is now the page ground everywhere; cream is
   reserved for the few sections that need air.
   ========================================================================== */

:root{
  --pearl:      #1B081C;   /* page ground: Imperial Plum */
  --cream:      #F4EFE6;   /* Ivory Cream, unchanged */
  --paper:      #241220;   /* raised surface: Ink */
  --paper-2:    #2E1A2B;   /* cards, inputs */
  --ink:        #F4EFE6;   /* primary text: Ivory Cream */
  --graphite:   rgba(244,239,230,.80);
  --silver:     rgba(244,239,230,.60);
  --halo:       rgba(198,165,103,.22);
  --halo-soft:  rgba(244,239,230,.12);
}

body{ background:var(--pearl); color:var(--ink); }

/* Sections. Everything is plum unless deliberately lifted. */
.section--paper{ background:var(--paper); }
.section--dark{ background:var(--paper); color:var(--ink); }
.section--deep{ background:var(--plum-deep); color:var(--ink); }
.section--dark .lede,.section--dark .small,
.section--deep .lede,.section--deep .small{ color:var(--graphite); }

/* One cream section type, for contrast and breathing room. */
.section--cream{ background:#F4EFE6; color:#241220; }
.section--cream .lede,.section--cream .small,
.section--cream .prose p,.section--cream .prose li{ color:#4A3540; }
.section--cream .eyebrow{ color:#8A6B36; }
.section--cream .d-xl,.section--cream .d-l,
.section--cream .d-m,.section--cream .d-s{ color:#241220; }
.section--cream .rule,.section--cream .dl__row,
.section--cream .acc__item,.section--cream .acc{ border-color:#E2D9C9; }
.section--cream .link-more{ border-color:#CBBBA0; color:#241220; }
.section--cream .link-more:hover{ border-color:#241220; }

/* Buttons on the dark ground. */
.btn{ background:var(--gold); border-color:var(--gold); color:var(--plum); }
.btn:hover{ background:transparent; color:var(--gold); }
.btn--ghost{ background:transparent; border-color:rgba(244,239,230,.42);
  color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--plum);
  border-color:var(--ink); }
.section--cream .btn{ background:#241220; border-color:#241220; color:#F4EFE6; }
.section--cream .btn:hover{ background:transparent; color:#241220; }
.section--cream .btn--ghost{ background:transparent; border-color:#241220;
  color:#241220; }
.section--cream .btn--ghost:hover{ background:#241220; color:#F4EFE6; }

/* Product cards sit on a lifted plum panel so the pale product photography
   reads as framed rather than as bright holes punched in the page. */
.pcard__media{ background:var(--paper-2); border:1px solid var(--halo); }
.pcard__body{ border-top:0; padding-top:var(--s3); }
.pcard__name{ color:var(--ink); }
.pcard:hover .pcard__name{ color:var(--gold); }
.pcard__stone{ color:var(--gold-deep); }
.pcard__price{ color:var(--graphite); }
.pcard__cta{ color:var(--gold); }

/* Category and lookbook tiles. */
.cat__media{ border-color:var(--halo); background:var(--paper-2); }
.cat__name{ color:var(--ink); }
.cat__line{ color:var(--graphite); }
.cat__cta{ color:var(--gold); border-color:var(--gold-deep); }
.cat:hover .cat__cta{ color:var(--gold-lift); border-color:var(--gold-lift); }
.look__item{ background:var(--paper-2); }

/* Craft steps and design-name cards. */
.step{ border-top-color:var(--gold); }
.step p{ color:var(--graphite); }
.nameit{ background:var(--paper-2); border-color:var(--halo); }
.nameit:hover{ border-color:var(--gold); }
.nameit__why{ color:var(--graphite); }

/* Meaning tiles. */
.mtile{ background:var(--paper-2); border-color:var(--halo); }
.mtile:hover{ border-color:var(--gold); background:rgba(198,165,103,.10); }
.mtile__name{ color:var(--ink); }
.mtile__line{ color:var(--graphite); }

/* Journal cards. */
.jgrid--text .jcard{ border-top-color:var(--halo); }
.jcard__title{ color:var(--ink); }
.jcard:hover .jcard__title{ color:var(--gold); }
.jcard__stand{ color:var(--graphite); }
.jcard__media{ background:var(--paper-2); }

/* Long-form reading on a dark ground: lift the surface slightly and open the
   line-height, because dark-mode body copy is harder to track. */
.prose p,.prose li{ color:var(--graphite); line-height:1.85; }
.prose strong{ color:var(--gold-lift); }
.prose h2,.prose h3{ color:var(--ink); }
.prose a{ color:var(--gold); border-bottom-color:var(--gold-deep); }
.prose a:hover{ border-bottom-color:var(--gold); }
.prose blockquote{ border-left-color:var(--gold); color:var(--ink); }
.prose th{ color:var(--gold-lift); }
.prose td{ color:var(--graphite); }
.prose th,.prose td{ border-bottom-color:var(--halo); }

/* Forms, filters and controls. */
.chips .chip span{ border-color:var(--halo); color:var(--graphite); }
.chip input:checked+span{ background:var(--gold); border-color:var(--gold);
  color:var(--plum); }
.filters__open{ border-color:var(--gold); color:var(--gold); }
.filters__count{ background:var(--gold); color:var(--plum); }
.filters__clear{ color:var(--graphite); border-bottom-color:var(--halo); }
select{ color:var(--ink); background:var(--paper-2);
  border-color:var(--halo) !important; }
option{ color:#241220; }
.sizes__opt span{ border-color:var(--halo); color:var(--ink); }
.sizes__opt input:checked+span{ background:var(--gold); border-color:var(--gold);
  color:var(--plum); }

/* Product page details. */
.dl,.dl__row{ border-color:var(--halo); }
.dl dt{ color:var(--gold-deep); }
.dl dd{ color:var(--ink); }
.gal__main{ background:var(--paper-2); border-color:var(--halo); }
.gal__thumb{ background:var(--paper-2); border-color:var(--halo); }
.gal__thumb[aria-current="true"]{ border-color:var(--gold); }
.gal__pending{ background:var(--paper-2); color:var(--silver);
  background-image:none; }
.pdp__reassure{ border-top-color:var(--halo); color:var(--graphite); }
.pdp__reassure svg{ color:var(--gold-deep); }
.acc,.acc__item{ border-color:var(--halo); }
.acc__btn{ color:var(--ink); }
.acc__btn svg{ color:var(--gold-deep); }
.disclose{ border-left-color:var(--gold); color:var(--graphite); }
.disclose strong{ color:var(--gold-lift); }
.notice{ background:var(--paper-2); border-color:var(--halo);
  color:var(--graphite); }
.notice strong{ color:var(--gold-lift); }
.crumb{ color:var(--silver); }
.crumb li+li::before{ color:var(--halo); }
.crumb a:hover{ color:var(--gold); }

/* Sticky buy bar and search overlay follow the dark ground. */
.buybar{ background:rgba(27,8,28,.97); border-top-color:var(--halo); }
.search{ background:rgba(27,8,28,.98); }
.search__row{ border-bottom-color:var(--gold); }
.search__input{ color:var(--ink); }
.search__input::placeholder{ color:var(--silver); }
.search__hit:hover{ background:var(--paper-2); border-color:var(--halo); }
.search__hit-name{ color:var(--ink); }

/* Stone strip. */
.stile__name{ color:var(--graphite); }
.stile img{ background:var(--paper-2); }

/* Quiz. */
.quiz__opt{ background:var(--paper-2); border-color:var(--halo); }
.quiz__opt:hover{ border-color:var(--gold); }
.quiz__opt b{ color:var(--ink); }
.quiz__opt small{ color:var(--graphite); }
.quiz__prog span{ background:var(--halo); }
.quiz__prog span[data-done="true"]{ background:var(--gold); }

/* Empty and results states. */
.empty{ color:var(--graphite); }
.results-count{ color:var(--graphite); }
.pill{ border-color:var(--halo); color:var(--graphite); }
hr,.rule{ border-color:var(--halo); background:var(--halo); }

/* Skip link: cream on plum when focused. */
.skip{ background:var(--gold); color:var(--plum); }

/* Deep Gold at 11px fell below 4.5:1 on plum. Eyebrows use the lifted
   champagne, which clears it comfortably. */
.eyebrow{ color:var(--gold-lift); }
.section--cream .eyebrow{ color:#8A6B36; }
.cat__count{ color:var(--gold-lift); }
.pcard__stone{ color:var(--gold-lift); }
.dl dt{ color:var(--gold-lift); }
.step__n{ color:var(--gold-lift); }
.pdp__reassure svg{ color:var(--gold-lift); }
.acc__btn svg{ color:var(--gold-lift); }

/* Re-assert the button variants after the dark-theme .btn override, which
   otherwise wins on source order and turns everything gold. */
.btn--wa{
  background:var(--whatsapp); border-color:var(--whatsapp); color:#08351D;
  border-radius:999px;
}
.btn--wa:hover{ background:#1EB958; border-color:#1EB958; color:#08351D; }

.btn--ghost-light{
  background:transparent; border-color:rgba(244,239,230,.45);
  color:var(--cream);
}
.btn--ghost-light:hover{ background:var(--cream); color:var(--plum);
  border-color:var(--cream); }

.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--plum); }
.btn--gold:hover{ background:transparent; color:var(--gold); }

/* Secondary product action reads as outline, not a second primary. */
.pdp__actions .btn--ghost{
  background:transparent; border-color:rgba(244,239,230,.45); color:var(--cream);
}
.pdp__actions .btn--ghost:hover{ background:var(--cream); color:var(--plum); }

/* Category listing hero banner. Wide, cinematic, and never taller than a
   third of the viewport so the products stay close to the fold. */
.listing-hero{
  position:relative; overflow:hidden;
  /* width:100% is required: with only aspect-ratio and max-height set, the
     box derives its WIDTH from the capped height and sits narrow. */
  width:100%; aspect-ratio:7/3;
  background:var(--paper-2); border:1px solid var(--halo);
  margin-top:var(--s4);
}
.listing-hero img{ width:100%; height:100%; object-fit:cover; display:block; }


/* ==========================================================================
   BRAND FILMS
   Poster-first, click to play. Nothing downloads until the visitor asks.
   ========================================================================== */
.film{ margin:0; }
.film__frame{
  position:relative; overflow:hidden; background:var(--plum-deep);
  border:1px solid var(--halo);
}
.film__video{
  display:block; width:100%; height:auto; background:var(--plum-deep);
}
/* Custom play button over the poster. Hidden the moment playback starts. */
.film__play{
  position:absolute; inset:0; margin:auto;
  width:76px; height:76px; border-radius:50%;
  background:rgba(198,165,103,.94); color:var(--plum);
  display:grid; place-items:center;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.film__play svg{ width:34px; height:34px; margin-left:3px; }
.film__play:hover{ transform:scale(1.07); background:var(--gold-lift); }
.film__frame[data-playing="true"] .film__play{ display:none; }
.film__cap{ padding-top:var(--s3); }
.film__title{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:1.125rem; color:var(--ink);
}
.film__note{ display:block; margin-top:var(--s1); color:var(--graphite); }

/* Landscape film: capped so it never dominates the page. */
.film--wide{ max-width:1000px; margin-inline:auto; }
.film--wide .film__cap{ text-align:center; }

/* The two vertical films sit side by side, and stack on small screens. */
.films{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width:700px){
  .films{ grid-template-columns:repeat(2,1fr); gap:var(--s6); }
}
@media (min-width:1024px){
  /* Portrait video is tall; hold it to a readable share of the row. */
  .films{ max-width:820px; margin-inline:auto; }
}
@media (max-width:420px){
  .film__play{ width:60px; height:60px; }
  .film__play svg{ width:26px; height:26px; }
}

/* ==========================================================================
   v8 — LAYOUT HARDENING + DESIGN PAGES
   ========================================================================== */

/* The mobile white gutter: a video was escaping its box, so the document laid
   out wider than the viewport and Android shrink-to-fit squeezed everything
   into a narrow strip. Clip on <html> too — body alone does not hold it. */
html{ overflow-x:clip; }
body{ overflow-x:clip; max-width:100%; }
img,svg,video,picture,iframe,canvas,table{ max-width:100%; }
video{ height:auto; }
.film__video{ width:100%; max-width:100%; height:auto; }

/* Every section paints in its own layer, so nothing can bleed over its
   neighbour the way the hero was bleeding into the film section. */
.section,.hero,.ftr,.listing-hero{ position:relative; isolation:isolate; }
.hero__copy{ position:relative; z-index:2; }
.hero__media{ position:relative; z-index:1; }

/* Grid children must be allowed to shrink or they blow the row out. */
.films,.cats,.tiles,.jgrid,.names,.steps{ min-width:0; }
.films{ grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .films{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cats,.tiles,.jgrid,.names{ }
.cats>*,.tiles>*,.jgrid>*,.names>*,.films>*,.pgrid>*{ min-width:0; }

/* --------------------------------------------------------- design pages */

.dgrid{
  display:grid; gap:var(--s5);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){ .dgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .dgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6); } }

.dcard{ display:block; }
.dcard__media{
  display:block; background:var(--paper);
  border:1px solid var(--halo); overflow:hidden;
  aspect-ratio:1/1;
}
.dcard__media img{ width:100%; height:100%; object-fit:cover; }
.dcard__name{
  display:block; margin-top:var(--s3);
  font-family:var(--font-display); font-size:1.0625rem; color:var(--ink);
}
.dcard__meta{ display:block; margin-top:var(--s1); color:var(--graphite);
  font-size:.8125rem; }
.dcard:hover .dcard__name{ color:var(--gold-deep); }

/* Stone switcher ------------------------------------------------------- */

.sw{ display:grid; gap:var(--s7); align-items:start; }
@media (min-width:900px){ .sw{ grid-template-columns:1.05fr .95fr; gap:var(--s8); } }

.sw__stage{
  position:relative; background:var(--paper);
  border:1px solid var(--halo); aspect-ratio:1/1; overflow:hidden;
}
.sw__stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}


.sw__strip{
  display:flex; gap:var(--s2); margin-top:var(--s4);
  overflow-x:auto; padding-bottom:var(--s2);
  scrollbar-width:thin;
}
.sw__thumb{
  flex:none; width:64px; height:64px; padding:0;
  border:1px solid var(--halo); background:var(--paper);
  overflow:hidden; transition:border-color .2s var(--ease);
}
.sw__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sw__thumb[aria-current="true"]{ border-color:var(--gold-deep); border-width:2px; }
.sw__thumb:hover{ border-color:var(--gold-deep); }

.sw__stones{
  display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5);
}
.sw__stone{
  display:inline-flex; align-items:center; gap:var(--s2);
  border:1px solid var(--halo); background:var(--paper);
  padding:var(--s2) var(--s3); font-size:.8125rem; line-height:1.2;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.sw__stone .dot{
  width:12px; height:12px; border-radius:50%; flex:none;
  border:1px solid rgba(0,0,0,.12);
}
.sw__stone[aria-pressed="true"]{
  border-color:var(--gold-deep); background:#fff;
}
.sw__stone:hover{ border-color:var(--gold-deep); }

.sw__now{
  font-family:var(--font-display); font-size:1.25rem;
  color:var(--ink); margin-top:var(--s5);
}
.sw__count{ color:var(--graphite); font-size:.8125rem; margin-top:var(--s1); }

/* Honest note about render provenance. */
.render-note{
  margin-top:var(--s6); padding:var(--s4);
  border-left:2px solid var(--gold-deep); background:var(--paper);
  font-size:.8125rem; color:var(--graphite);
}

/* ==========================================================================
   v10 — NAV, MEDIA RATIOS, MOBILE
   ========================================================================== */

/* The dropdown was unreachable. .nav__link is only as tall as its text, but the
   panel opens at the bottom of the whole 78px header bar — so the gap between
   them dropped :hover the moment you moved the pointer down. The item now
   fills the header's full height, which closes the gap completely. */
.nav__item{
  position:static; display:flex; align-items:center;
  height:var(--header-h);
}
.nav__link{ padding:0; display:inline-block; }
.nav__item::after{                 /* hover bridge across the border line */
  content:""; position:absolute; left:0; right:0; top:var(--header-h);
  height:10px; display:none;
}
.nav__item:hover::after{ display:block; }
.nav__panel{ margin-top:0; }

/* Media ratios.
   v10 forced 4:5 onto .split__media, which cropped 47% off the landscape
   photographs it actually holds (sources range 0.80 to 1.78 across the site).
   The right fix is not a forced ratio at all: let each photograph keep its own
   shape, and stop the grid stretching it by aligning the media to the start of
   its row instead of letting it fill the row height. */
.split__media{ display:block; overflow:hidden; align-self:start; }
.split__media img{ width:100%; height:auto; display:block; }
.split{ align-items:start; }
@media (min-width:900px){ .split{ align-items:center; } }

/* The four category cards were nearly full-height portraits. Squared off and
   capped, they read as a row rather than four posters. */
.cat__media{ aspect-ratio:1/1; }
@media (min-width:900px){
  .cats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cat__media{ aspect-ratio:1/1; max-height:300px; }
}
.cat__name{ font-size:1.0625rem; }
.cat__line{ font-size:.8125rem; }

/* Design imagery is composited on Ivory Cream, and the page ground is
   Imperial Plum. Rather than fight that, the plates are deliberately cream:
   a lit product plate on a dark page. */
.dcard__media,.sw__stage,.sw__thumb{
  background:#F4EFE6; border-color:rgba(198,165,103,.35);
}
.dcard__media img,.sw__stage img,.sw__thumb img{ background:#F4EFE6; }
.sw__stone{ background:var(--paper-2); color:var(--ink); }
.sw__stone[aria-pressed="true"]{ background:var(--paper); }
.render-note{ background:var(--paper); }

/* Mobile. The exposed band on a left swipe is horizontal overflow showing the
   page ground; clip it at every level and let the ground paint the canvas. */
html{ background:var(--pearl); overflow-x:clip; }
body{ background:var(--pearl); overflow-x:clip; width:100%; }
.wrap,.section,.hero,.ftr{ max-width:100%; }
*{ min-width:0; }
.hero__ctas .btn{ min-width:0; }
@media (max-width:520px){
  .hero__ctas{ display:grid; grid-template-columns:1fr; gap:var(--s2); }
  .hero__ctas .btn{ width:100%; }
  .sw__thumb{ width:54px; height:54px; }
  .dgrid{ gap:var(--s4); }
  .film__cap{ padding-inline:0; }
}
/* Long unbroken strings (SKUs, URLs) were the other way a row got pushed wide. */
.prose,.dl dd,.small,.lede,.crumb{ overflow-wrap:anywhere; }
table{ display:block; overflow-x:auto; }


/* overflow-x:clip is ignored by older Safari and Android WebView, where it
   falls back to visible and the exposed band returns. hidden is universally
   supported and does the same job on the root. */
@supports not (overflow-x: clip){
  html,body{ overflow-x:hidden; }
}
html,body{ width:100%; max-width:100%; }

/* ==========================================================================
   v12 — MOBILE CONTAINMENT, HARD
   The white band kept returning, so this stops relying on any single
   mechanism. Nothing is allowed to be wider than the viewport, and the
   canvas is painted a literal colour rather than a variable.
   ========================================================================== */
html{ background:#1B081C; }
html,body{ width:100%; max-width:100%; overflow-x:clip; }
@supports not (overflow-x: clip){ html,body{ overflow-x:hidden; } }

/* The film was the original offender: <video width="1280"> laying out at its
   attribute size pushed the document to ~1500px, and the browser then scaled
   the whole page down — which is exactly what the narrow-column screenshots
   show. Ratio box + absolutely positioned video removes the intrinsic width
   from layout entirely. */
.film__frame{ position:relative; width:100%; overflow:hidden; }
.film--wide .film__frame{ aspect-ratio:16/9; }
.films .film__frame{ aspect-ratio:9/16; }
.film__frame video{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  max-width:100% !important; object-fit:cover; display:block;
}
@media (min-width:700px){ .films .film__frame{ aspect-ratio:9/16; } }

/* Nothing replaced-element may exceed its column, whatever else is declared. */
img,video,svg,canvas,iframe,object,embed{ max-width:100% !important; }
body *{ max-width:100%; }
.wrap,.section,.hero,.ftr,.dgrid,.cats,.films,.tiles,.steps,.names,.jgrid{
  max-width:100%; min-width:0;
}

/* ==========================================================================
   v13 — SHOP-FIRST HOME
   ========================================================================== */

/* Four reasons to trust, as one compact band rather than four sections. */
.trust{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s5); grid-template-columns:1fr;
}
@media (min-width:640px){ .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .trust{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6); } }
.trust li{ padding-top:var(--s3); border-top:1px solid var(--gold); }
.trust__k{
  display:block; font-family:var(--font-display); font-size:1.0625rem;
  color:var(--ink); margin-bottom:var(--s2);
}
.trust__v{ display:block; color:var(--graphite); }

/* Hero: one line, one button. Tighter on a phone so a piece is on screen
   within one swipe instead of three. */
@media (max-width:899px){
  .hero__copy{ padding-block:var(--s7); gap:var(--s4); }
  .hero h1{ font-size:clamp(1.9rem,7.4vw,2.6rem); }
  .hero__meta{ font-size:.75rem; }
  .section--tight{ padding-block:var(--s7); }
  .head{ margin-bottom:var(--s5); }
  .d-l{ font-size:clamp(1.5rem,5.6vw,2rem); }
}

/* Two product cards per row on a phone, four on a desktop — the range reads
   as a range at a glance rather than one card at a time. */
@media (max-width:639px){
  .dgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
  .dcard__name{ font-size:.9375rem; }
  .dcard__meta{ font-size:.75rem; }
  .cats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
}
.center{ text-align:center; }
.flex-btns{ display:flex; flex-wrap:wrap; gap:var(--s3); }