/* ==========================================================================
   THE ADORÉE — DARK SCOPE, LUXE PAGE, CONFIGURATOR
   Three things share this file: the .dark scope's painting rules (its token
   overrides live in tokens.css), the Luxe page's own layout (.lx-hero,
   .lx-stat) and the Make Your Own configurator.

   .split is deliberately NOT prefixed. It is a plain two-column split used on
   Luxe, the homepage dark band and Our Story — and on Our Story it sits
   outside .dark entirely, so a scope- or collection-prefixed name would lie.

   Moved verbatim from the approved prototype (adoree-prototype-v3.html).
   Declarations are unchanged. Every value that can be a token is a token;
   the tokens themselves live in tokens.css and are never edited here.
   ========================================================================== */


/* ---------- Luxe — dark variant of the same token set ---------- */
/* WP-10 ruling 9 — the nine token overrides that used to sit in this rule now
   live in tokens.css under SCOPES. What remains here is the painting, which is
   presentation and belongs in a stylesheet, not in the token file. */
.dark{background:var(--c-bg);color:var(--c-text)}
.dark .btn:not(.ghost):not(.light):not(.on-dk){background:var(--c-btn);color:var(--c-white);border:1px solid var(--c-btn)}
.dark .btn:not(.ghost):not(.light):not(.on-dk):hover{background:var(--c-white);color:var(--c-btn);border-color:var(--c-btn)}
.dark .btn.light{background:var(--c-white);color:#1A1516;border:1px solid var(--c-white)}
.dark .btn.light:hover{background:var(--c-btn);color:var(--c-white);border-color:var(--c-btn)}
.dark .btn.ghost{background:transparent;color:var(--c-text);border:1px solid var(--c-btn)}
.dark .btn.ghost:hover{background:var(--c-white);color:#1A1516;border-color:var(--c-white);box-shadow:none}
.dark .btn.on-dk{background:transparent;color:var(--c-white);border:1px solid rgba(255,255,255,.55)}
.dark .btn.on-dk:hover{background:var(--c-white);color:#1A1516;border-color:var(--c-white);box-shadow:none}
.dark .chip{color:var(--c-muted);border-color:var(--c-inactive)}
.dark .panel,.dark .quote,.dark .opt,.dark .tone{background:var(--c-surface)}
.lx-hero{position:relative;height:min(92vh,880px);min-height:560px;overflow:hidden;
  margin-top:calc(-1 * var(--header-h));display:flex;align-items:center;justify-content:center;text-align:center}
.lx-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;z-index:0;
  filter:saturate(.72) brightness(.62)}
.lx-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(26,21,22,.28),rgba(26,21,22,.86));z-index:1}
.lx-hero__in{position:relative;z-index:3;padding:0 var(--gutter);max-width:900px}
.lx-hero h1{color:var(--c-on-dark);font-size:clamp(42px,6.4vw,92px);letter-spacing:.02em;margin:var(--s-5) 0 var(--s-5)}
.lx-hero .eyebrow{color:var(--c-accent);letter-spacing:.42em}
.lx-hero p{color:rgba(242,233,234,.82);max-width:52ch;margin:0 auto var(--s-7);font-size:var(--t-lead)}
.rule-c{width:56px;height:1px;background:var(--c-accent);margin:0 auto}
.lx-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,56px);text-align:center}
.lx-stat .n{font-family:var(--f-display);font-size:var(--t-h2);color:var(--c-accent);display:block;margin-bottom:var(--s-2)}
@media(max-width:760px){.lx-stat{grid-template-columns:1fr;gap:var(--s-6)}}

/* ---------- Luxe Collection Grid Reflow by Product Count ---------- */
#lxGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,36px)}
#lxGrid[data-count="1"],#lxGrid.lx-grid--count-1{display:flex;justify-content:center;margin:0 auto;padding-block:var(--s-4)}
#lxGrid[data-count="1"]>.card,#lxGrid.lx-grid--count-1>.card{width:100%;max-width:440px}
#lxGrid[data-count="2"],#lxGrid.lx-grid--count-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;margin:0 auto;gap:clamp(20px,3vw,48px)}
#lxGrid[data-count="3"],#lxGrid.lx-grid--count-3,#lxGrid[data-count="6"],#lxGrid.lx-grid--count-6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#lxGrid[data-count="4"],#lxGrid.lx-grid--count-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:0 auto}
#lxGrid[data-count="5"],#lxGrid.lx-grid--count-5{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
#lxGrid[data-count="5"]>:nth-child(-n+2),#lxGrid.lx-grid--count-5>:nth-child(-n+2){grid-column:span 3}
#lxGrid[data-count="5"]>:nth-child(n+3),#lxGrid.lx-grid--count-5>:nth-child(n+3){grid-column:span 2}

@media(max-width:860px){
  #lxGrid,#lxGrid[data-count="3"],#lxGrid.lx-grid--count-3,#lxGrid[data-count="6"],#lxGrid.lx-grid--count-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lxGrid[data-count="5"],#lxGrid.lx-grid--count-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lxGrid[data-count="5"]>*,#lxGrid.lx-grid--count-5>*{grid-column:auto!important}
}

@media(max-width:580px){
  #lxGrid,#lxGrid[data-count="2"],#lxGrid.lx-grid--count-2,#lxGrid[data-count="3"],#lxGrid.lx-grid--count-3,#lxGrid[data-count="4"],#lxGrid.lx-grid--count-4,#lxGrid[data-count="5"],#lxGrid.lx-grid--count-5,#lxGrid[data-count="6"],#lxGrid.lx-grid--count-6{grid-template-columns:1fr}
}
.split{display:grid;grid-template-columns:7fr 4.5fr;gap:clamp(28px,5vw,90px);align-items:center}
.split--rev,.split:has(>div:first-child:not(:has(img))){grid-template-columns:4.5fr 7fr}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:860px){.split,.split--rev,.split:has(>div:first-child:not(:has(img))){grid-template-columns:1fr}}

/* Make Your Own — full-bleed background */
.sec.has-bg{position:relative;overflow:hidden}
.sec.has-bg .myo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;
  filter:saturate(.7) brightness(.45)}
.sec.has-bg .myo-tint{position:absolute;inset:0;z-index:1;opacity:.72}
.sec.has-bg > .wrap{position:relative;z-index:2}

/* ---------- Configurator — Make Your Own ---------- */
/* ═══════════ CONFIGURATOR ═══════════ */
.cfg{display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,4vw,72px);align-items:start}
@media(max-width:960px){.cfg{grid-template-columns:1fr}}
.cfg__stage{position:sticky;top:104px;background:var(--c-surface-2);aspect-ratio:4/5;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.cfg__stage img{width:100%;height:100%;object-fit:cover;transition:filter var(--d-mid) var(--e-soft)}
.cfg__badge{position:absolute;left:var(--s-4);top:var(--s-4);background:rgba(26,21,22,.72);padding:6px 12px;
  font-size:var(--t-eyebrow);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-white)}
.cfg__step{border-top:1px solid var(--c-line);padding-block:var(--s-6)}
.cfg__step:first-child{border-top:0;padding-top:0}
.cfg__step h3{font-size:var(--t-h4);margin:var(--s-2) 0 var(--s-5)}
.cfg__opts{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cfgopt{border:1px solid var(--c-inactive);padding:12px 20px;font-size:var(--t-small);
  transition:var(--d-fast);display:flex;align-items:center;gap:var(--s-3);color:var(--c-text)}
.cfgopt:hover{border-color:var(--c-accent)}
.cfgopt.on{border-color:var(--c-accent);background:rgba(181,149,139,.14)}
.cfgopt .sw{width:20px;height:20px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);flex-shrink:0}
.cfgopt .fig{width:22px;height:34px;border:1px solid currentColor;opacity:.7;flex-shrink:0}
.fig.hourglass{border-radius:44% 44% 44% 44%/34% 34% 60% 60%;clip-path:polygon(0 0,100% 0,72% 46%,100% 100%,0 100%,28% 46%)}
.fig.pear{clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)}
.fig.rect{clip-path:polygon(14% 0,86% 0,86% 100%,14% 100%)}
.fig.apple{clip-path:polygon(10% 0,90% 0,72% 100%,28% 100%)}
.cfg__sum{background:var(--c-surface);padding:var(--s-5);margin-top:var(--s-6)}
.cfg__sum .srow{border-bottom:1px solid var(--c-line)}
.cfg__sum .srow:last-of-type{border-bottom:0}
.leadtime{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-small);color:var(--c-muted);
  border-left:2px solid var(--c-accent);padding-left:var(--s-4);margin:var(--s-5) 0}

/* ---------- Dark-page card chrome ---------- */
.dark .card__tag{background:rgba(26,21,22,.20);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(249,244,245,.25);color:var(--c-on-dark)}
.dark .card__quick,.dark .card__fav{background:rgba(26,21,22,.86);color:var(--c-on-dark)}
.dark .card__shot,.dark .gal__main{background:var(--c-surface-2)}
.dark .crumb{color:var(--c-muted)}

/* ---------- Body-type figures — solid silhouettes, not outlines ---------- */
/* body-type figures — solid silhouettes, not outlines */
.cfgopt .fig{width:16px;height:30px;border:0;background:currentColor;opacity:.55}
.fig.hourglass{clip-path:polygon(6% 0,94% 0,66% 46%,94% 100%,6% 100%,34% 46%)}
.fig.pear{clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.fig.rect{clip-path:polygon(18% 0,82% 0,82% 100%,18% 100%)}
.cfg__stage{position:relative}
.cfg__base-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.cfg__base-layer img{width:100%;height:100%;object-fit:contain}
.cfg__layers{position:absolute;inset:0;pointer-events:none}
.cfg__overlay-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--d-fast) var(--e-soft)}
.cfg__overlay-layer img{width:100%;height:100%;object-fit:contain}
.cfg__layer-badge{position:absolute;bottom:var(--s-3);right:var(--s-3);background:rgba(26,21,22,.75);padding:3px 8px;font-size:10px;letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-white);z-index:90;backdrop-filter:blur(4px)}
.cfgopt .swatch-thumb{width:22px;height:22px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.25);overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.cfgopt .swatch-thumb img{width:100%;height:100%;object-fit:cover}
.cfgopt .price-pill{font-size:11px;color:var(--c-muted);background:var(--c-surface-2);padding:2px 7px;border-radius:var(--r-pill);margin-left:4px;font-weight:normal}
.cfgopt.on .price-pill{color:var(--c-btn);background:rgba(150,109,96,0.18)}
.cfg-input-text{width:100%;max-width:380px;padding:10px 14px;border:1px solid var(--c-inactive);background:var(--c-surface);color:var(--c-text);font-family:var(--f-body);font-size:var(--t-small)}
.cfg-prod-tabs{display:flex;gap:var(--s-2);margin-bottom:var(--s-6);flex-wrap:wrap}
.cfg-prod-tab{padding:8px 16px;border:1px solid var(--c-inactive);background:transparent;color:var(--c-text);font-family:var(--f-body);font-size:var(--t-small);cursor:pointer;text-decoration:none;transition:all var(--d-fast);position:relative}
.cfg-prod-tab::after{content:'';position:absolute;inset:-2px 0}
.cfg-prod-tab:hover{border-color:var(--c-accent)}
.cfg-prod-tab.active{background:var(--c-surface);border-color:var(--c-btn);color:var(--c-btn);font-weight:500}
.cfg__step.is-hidden,.cfgopt.is-hidden{display:none !important}