/* Optional appearance layer: original Ivory styling remains the default. */
:root{color-scheme:light}
.appearance-choice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.appearance-choice>span{font-size:10px;color:var(--muted)}
.appearance-options{display:flex;gap:8px}
.appearance-options button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:11px;border-radius:2px}
.appearance-options button[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.appearance-swatch{display:block;width:14px;height:14px;border:1px solid #a68a56;border-radius:50%;flex-shrink:0}
.appearance-swatch-ivory{background:#f8f5ef}
.appearance-swatch-midnight{background:#1c1b18;box-shadow:inset -4px 0 0 #d8b87a}
:root[data-theme=midnight]{color-scheme:dark;--bg:#1c1b18;--paper:#25241f;--ink:#f2ece1;--muted:#c0b7a8;--gold:#d8b87a;--line:#786f60;--wash:#302d27}
html[data-theme=midnight] .private-bar{background:#302b22;color:#d9c6a0}
html[data-theme=midnight] .button.dark{background:#d8b87a;color:#211d16}
html[data-theme=midnight] .button.dark:hover{background:#e8c994}
html[data-theme=midnight] .button.light:hover{background:#383126}
html[data-theme=midnight] .order-strip{background:#12120f;color:var(--ink);border:1px solid var(--line)}
html[data-theme=midnight] .order-strip p:last-child{color:var(--muted)}
html[data-theme=midnight] .order-strip .eyebrow{color:var(--gold)}
html[data-theme=midnight] .photo-caption{background:#12120f;color:#e5d5b7}
html[data-theme=midnight] #toast{background:var(--wash);color:var(--ink);border:1px solid var(--line)}
html[data-theme=midnight] .skip{background:var(--gold);color:var(--bg)}
html[data-theme=midnight] h1 em,
html[data-theme=midnight] .selection-guide h3 em,
html[data-theme=midnight] .delivery-faq-heading h2 em,
html[data-theme=midnight] .styling-promo-copy h2 em,
html[data-theme=midnight] .styling-match-price,
html[data-theme=midnight] .styling-status,
html[data-theme=midnight] .status-chip{color:var(--gold)}
/* The Runway and full-screen photo viewer retain their own dark lighting. */
html[data-theme=midnight] .runway-intro h1 em{color:var(--runway-accent)}
html[data-theme=midnight] .status-chip.is-available{color:#a5c3a6}
html[data-theme=midnight] .status-chip.is-available:before{background:#89b08c}
html[data-theme=midnight] .unavailable,
html[data-theme=midnight] .styling-promo,
html[data-theme=midnight] .styling-unavailable,
html[data-theme=midnight] .styling-busy,
html[data-theme=midnight] .styling-example figure,
html[data-theme=midnight] .boutique-feature-frame{background:var(--wash)}
html[data-theme=midnight] .styling-modes>label:has(input:checked){background:#3b3427;border-color:var(--gold)}
html[data-theme=midnight] .styling-modes input,
html[data-theme=midnight] .styling-consent input{accent-color:var(--gold)}
html[data-theme=midnight] .bag-unavailable,
html[data-theme=midnight] .field-error,
html[data-theme=midnight] .delivery-error{color:#f1ad96}
html[data-theme=midnight] .delivery-field input[aria-invalid=true],
html[data-theme=midnight] .delivery-field textarea[aria-invalid=true]{border-color:#d38e72}
html[data-theme=midnight] .photo-open,
html[data-theme=midnight] #collection .photo-open,
html[data-theme=midnight] #collection .heart-button,
html[data-theme=midnight] #collection .photo-share{background:#25241ff0;color:var(--ink);border-color:#756442}
html[data-theme=midnight] .detail-photo{background:var(--wash)}
html[data-theme=midnight] .empty-state{border-color:#807156}
html[data-theme=midnight] .language-switch{border-color:#807156}
/* Transitions only accompany an explicit choice, never the first page paint. */
@media(prefers-reduced-motion:no-preference){
  html.appearance-changing body,
  html.appearance-changing .private-bar,
  html.appearance-changing .header,
  html.appearance-changing .boutique-menu,
  html.appearance-changing .boutique-link,
  html.appearance-changing .boutique-feature-frame,
  html.appearance-changing .boutique-feature-frame>span,
  html.appearance-changing .appearance-options button,
  html.appearance-changing .language-switch,
  html.appearance-changing .language-switch button,
  html.appearance-changing .styling-promo,
  html.appearance-changing .search-field,
  html.appearance-changing .select-field,
  html.appearance-changing .order-strip,
  html.appearance-changing .button,
  html.appearance-changing .saved-dock,
  html.appearance-changing dialog:not(.photo-viewer),
  html.appearance-changing input,
  html.appearance-changing select,
  html.appearance-changing textarea,
  html.appearance-changing .appearance-choice{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease}
}
@media(max-width:720px){.appearance-choice{margin-top:16px;padding-top:16px}.appearance-options button{padding-inline:14px}.appearance-options{gap:7px}}
@media(max-width:380px){.appearance-choice{gap:10px}.appearance-options button{padding-inline:12px}}