.appearance-toggle { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; flex:none; min-width:40px; min-height:40px; border:1px solid var(--line,#dcdfea); border-radius:999px; padding:.4rem .65rem; color:var(--ink,#181c29); background:transparent; cursor:pointer; font:inherit; font-size:13px; white-space:nowrap; }
.appearance-toggle > span:first-child { font-size:21px; line-height:1; }
.appearance-toggle:hover { background:var(--blue-soft,#e9edf9); }
.appearance-toggle:focus-visible { outline:3px solid #8da6f1; outline-offset:3px; }
:root[data-appearance="dark"] { --bg:#141722; --bg-card:#1e2230; --ink:#f7f5f3; --ink-soft:#c5cbdc; --muted:#a7afc3; --line:#353d53; --blue-deep:#adc0fa; --blue-soft:#29334f; --navy:#10131d; --ok:#a3dbb4; --danger:#ffb3ac; --shadow:none; --opl-cream:#141722; --opl-ink:#f7f5f3; --opl-ink-soft:#c5cbdc; --opl-muted:#a7afc3; --opl-line:#353d53; --opl-blue-deep:#adc0fa; --opl-blue-soft:#29334f; }
[data-appearance="dark"] .appearance-toggle { color:#f7f5f3; border-color:#353d53; }
[data-appearance="dark"] .appearance-toggle:hover { background:#29334f; }
[data-appearance="dark"] :is(.section--alt,.opl-gate__panel,.glance article,.cat-card,.product-card,.panel,.faq details,.ruo-box,.cart-drawer__panel,.filter,.toolbar input,.toolbar select,.field,.text-area) { background:var(--bg-card); color:var(--ink); border-color:var(--line); }
[data-appearance="dark"] :is(.product-card__media,.pdp__media,.specs th) { background:#242b3d; }
[data-appearance="dark"] .opl-gate__panel .brand__name { color:var(--ink) !important; }
[data-appearance="dark"] :is(.btn,.button) { background:#6681d0; border-color:#6681d0; color:#fff; }
[data-appearance="dark"] :is(.btn--ghost,.button--secondary) { background:transparent; border-color:#526387; color:#d1ddff; }
[data-appearance="dark"] .btn:hover { background:#506bb9; color:white; }
[data-appearance="dark"] .btn--dark { background:#10131d; border-color:#526387; }
[data-appearance="dark"] .filter.is-on { background:#6681d0; color:white; }
[data-appearance="dark"] .pill--ok { background:#263e33; color:#a3dbb4; }
[data-appearance="dark"] .pill--line { background:transparent; color:var(--ink-soft); }
[data-appearance="dark"] .site-footer { background:#10131d; }
[data-appearance="dark"] :is(.site-header,.mobile-nav,.checkout-header) { background:var(--bg); }
[data-appearance="dark"] :is(.checkout-section input:not([type=checkbox]),.checkout-section select,.qr-area) { background:var(--bg-card); color:var(--ink); border-color:var(--line); }
[data-appearance="dark"] .order-summary { background:#20283b; border-color:var(--line); }
[data-appearance="dark"] :is(.summary-totals,.summary-total,.summary-note) { border-color:var(--line); }
[data-appearance="dark"] .checkout-error { background:#432728; border-color:#754448; color:#ffcbc6; }
[data-appearance="dark"] .checkout-steps [aria-current] span { background:#6681d0; border-color:#6681d0; }
[data-appearance="dark"] .zelle-badge { background:#6681d0; }
/* Dawn generates colors per section. Override those schemes as well as custom UI. */
[data-appearance="dark"] [class*="color-scheme-"] { --color-background:20,23,34; --gradient-background:#141722; --color-foreground:247,245,243; --color-button:102,129,208; --color-button-text:255,255,255; --color-secondary-button-text:173,192,250; --color-link:173,192,250; --color-shadow:0,0,0; }
[data-appearance="dark"] :is(.opl-tile,.opl-faq details,.opl-quality__item,.opl-ruo,.opl-catalog-card,.card,.opl-trust span) { background:#1e2230; color:#f7f5f3; border-color:#353d53; }
[data-appearance="dark"] :is(.opl-manifesto p,.opl-attestation,.opl-gate__copy,.opl-ruo,.opl-faq .rte,.opl-page .rte,.opl-glance .rte,.opl-catalog .rte,.opl-categories .rte) { color:#c5cbdc !important; }
[data-appearance="dark"] :is(.opl-catalog-card__media,.opl-specs__label) { background:#242b3d; }
[data-appearance="dark"] .header__menu-item, [data-appearance="dark"] .header__icon { color:#f7f5f3; }
.checkout-header-actions { display:flex; align-items:center; gap:1rem; }
.label-story { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem; }
.label-art { margin:0; overflow:hidden; border:1px solid var(--line,#dcdfea); border-radius:12px; }
.label-art__image { padding:1.6rem; background:#f7f5f3; }
.label-art img { width:100%; height:auto; display:block; }
.label-art--white .label-art__image { background:#141722; }
.label-art--color .label-art__image { background:#6681d0; }
.label-art figcaption { padding:.85rem 1.1rem; background:var(--bg-card,#fff); color:var(--muted,#666b79); font-size:.8rem; }
.label-art figcaption strong { color:var(--ink,#181c29); font-weight:500; }
.label-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1.5rem 0; }
.label-strip .label-art__image { padding:.5rem; }
.label-strip figcaption { font-size:.72rem; padding:.65rem; }
@media(max-width:680px) { .appearance-label { display:none; }.appearance-toggle { width:36px; min-width:36px; min-height:36px; padding:.3rem; }.checkout-header-actions { gap:.5rem; }.checkout-back { font-size:.68rem; }.label-story,.label-strip { grid-template-columns:1fr; }.label-art__image { padding:1rem; } }
/* Carry all three label treatments through the catalog without changing product identity. */
:is(.product-card,.opl-catalog-card):nth-child(3n + 2) .opl-pack__label { background:#f7f5f3; color:#141722; }
:is(.product-card,.opl-catalog-card):nth-child(3n + 2) .opl-pack__label img { filter:brightness(0); }
:is(.product-card,.opl-catalog-card):nth-child(3n) .opl-pack__label { background:#141722; color:#f7f5f3; }
.cart-btn { white-space:nowrap; }

/* Icon-only appearance controls retain a full touch target on phones. */
.appearance-toggle { min-width:44px; min-height:44px; }
/* Safari's native select ignores touch sizing unless its appearance is reset. */
:root :is(.toolbar, .checkout-section) select {
  -webkit-appearance:none;
  appearance:none;
  min-height:48px;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%236681d0' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}