/* Site color system. The light values mirror the existing interface. */
:root {
  --theme-bg: #f4f7fb;
  --theme-surface: #fff;
  --theme-surface-raised: #e8f0ff;
  --theme-heading: #111827;
  --theme-text: #111827;
  --theme-muted: #526075;
  --theme-border: #d9e1ec;
  --theme-link: #155eef;
  --theme-button: #155eef;
  --theme-button-text: #fff;
  --theme-input: #fff;
  --theme-card: #fff;
  --theme-dropdown: #fff;
  --theme-modal: #fff;
  --theme-header: #f4f7fb;
  --theme-footer: #111a29;
}

html[data-theme="dark"] {
  --theme-bg: #0e1420;
  --theme-surface: #182338;
  --theme-surface-raised: #20314c;
  --theme-heading: #f2f6ff;
  --theme-text: #e5edf9;
  --theme-muted: #bdcbe0;
  --theme-border: #40516b;
  --theme-link: #a8c7ff;
  --theme-button: #89b1ff;
  --theme-button-text: #071426;
  --theme-input: #162238;
  --theme-card: #182338;
  --theme-dropdown: #1b2941;
  --theme-modal: #1b2941;
  --theme-header: #101c2e;
  --theme-footer: #0a1120;
  --canvas: var(--theme-bg);
  --surface: var(--theme-surface);
  --surface-soft: var(--theme-surface-raised);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --border: var(--theme-border);
  --accent: var(--theme-button);
  --accent-hover: #afd0ff;
  --accent-ink: var(--theme-button-text);
}

.theme-choice {
  display: inline-flex;
  align-items: center;
  width: 66px;
  height: 36px;
  padding: 3px;
  border: 1px solid #aec6dd;
  border-radius: 999px;
  background: #fff2bc;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.theme-choice__thumb {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffca28;
  color: #fff;
  box-shadow: 0 1px 4px #16335a33;
  transition: transform 180ms ease, background-color 180ms ease;
}
.theme-choice svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-choice__moon { display: none; }
.theme-choice:hover { border-color: #4388df; }
.theme-choice:focus-visible { outline: 3px solid #68a5ff; outline-offset: 3px; }
html[data-theme="dark"] .theme-choice { background: #263d64; border-color: #7a9cc5; }
html[data-theme="dark"] .theme-choice__thumb { transform: translateX(30px); background: #ddeaff; color: #284476; }
html[data-theme="dark"] .theme-choice__sun { display: none; }
html[data-theme="dark"] .theme-choice__moon { display: block; }
@media (prefers-reduced-motion: reduce) {
  .theme-choice, .theme-choice__thumb { transition: none; }
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.theme-choice-mobile { display: none; }
@media (max-width: 820px) {
  .theme-choice--header { display: none; }
  .theme-choice-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--theme-text);
    font-size: 14px;
    font-weight: 700;
  }
  .theme-choice--mobile { height: 44px; }
  .theme-choice--mobile .theme-choice__thumb { width: 36px; height: 36px; }
  html[data-theme="dark"] .theme-choice--mobile .theme-choice__thumb { transform: translateX(22px); }
}

/* Keep the native form controls consistent with the selected mode. */
html[data-theme="dark"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]) {
  color-scheme: dark;
}
html[data-theme="dark"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"])::placeholder { color: #aebdd3; }

/* Existing light-only page components need explicit dark surfaces and text. */
html[data-theme="dark"] .lens-catalog-page,
html[data-theme="dark"] .lens-compare-tool {
  --ln: #09152a;
  --lc: #a8c7ff;
  --li: #edf4ff;
  --lm: #bdcbe0;
  --ll: #40516b;
  --lw: #182338;
  color: var(--theme-text);
  background: var(--theme-bg);
}
html[data-theme="dark"] .lens-catalog-page :is(.lens-index-choices, .lens-advisor--premium, .lens-premium-brands__grid article, .eye-article-card, .lens-catalog-filter, .lens-filter-card),
html[data-theme="dark"] .lens-compare-tool :is(.lens-index-choices, .lens-advisor--premium) {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .lens-catalog-page :is(.lens-index-choices__cards a, .lens-premium-brands__grid article > a, .lens-advisor--premium input, .lens-advisor--premium select) {
  color: var(--theme-text);
  border-color: var(--theme-border);
  background: var(--theme-input);
}
html[data-theme="dark"] .lens-catalog-page :is(.section-heading h2, .section-heading p, .eye-article-card h3, .eye-article-card h3 a, .eye-article-card__body > p, .eye-article-card__meta) { color: var(--theme-text); }
html[data-theme="dark"] .lens-catalog-page :is(.section-heading > div > p:last-child, .eye-article-card__body > p, .eye-article-card__meta) { color: var(--theme-muted); }
html[data-theme="dark"] .lens-knowledge-shelf { background: var(--theme-bg) !important; }
html[data-theme="dark"] .lens-knowledge-shelf .section-heading h2 { color: var(--theme-heading) !important; }
html[data-theme="dark"] .lens-knowledge-shelf .section-heading p,
html[data-theme="dark"] .lens-knowledge-shelf .eye-article-card__body > p { color: var(--theme-muted) !important; }
html[data-theme="dark"] .lens-knowledge-shelf :is(.text-link, .eyebrow) { color: var(--theme-link) !important; }
html[data-theme="dark"] .lens-knowledge-shelf .product-shelf__controls button {
  color: var(--theme-text);
  background: var(--theme-card);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .lens-knowledge-shelf .eye-article-card { background: var(--theme-card); border-color: var(--theme-border); }
html[data-theme="dark"] .lens-knowledge-shelf .eye-article-card h3,
html[data-theme="dark"] .lens-knowledge-shelf .eye-article-card h3 a { color: var(--theme-heading) !important; }
html[data-theme="dark"] .lens-active-bar h2,
html[data-theme="dark"] .lens-catalog-breadcrumb span:last-child { color: var(--theme-heading); }
html[data-theme="dark"] .lens-catalog-page :is(.lens-filter-card__head h2, .lens-catalog-filter__header h2) { color: var(--theme-heading); }
html[data-theme="dark"] .lens-catalog-page .lens-catalog-filter__fields .lens-catalog-filter__field,
html[data-theme="dark"] .lens-catalog-page .lens-active-bar__controls label { color: var(--theme-text); }
html[data-theme="dark"] .lens-catalog-page :is(.lens-catalog-filter__fields select, .lens-active-bar__controls select) {
  background-color: var(--theme-input);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .lens-catalog-page :is(.lens-catalog-filter__header, .lens-catalog-filter__actions) {
  background: var(--theme-card);
  border-color: var(--theme-border);
}

html[data-theme="dark"] :is(.news-hub, .knowledge-archive, .knowledge-single, .catalog-landing, .cart-page, .checkout-page) { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="dark"] :is(.news-hub__search, .news-hub__side-card, .news-hub__topics a, .news-hub__grid .eye-article-card, .knowledge-featured, .knowledge-end-cta) {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .news-hub :is(h1, h2, h3, .eye-article-card h3 a, .knowledge-featured h2) { color: var(--theme-heading); }
html[data-theme="dark"] .news-hub :is(p, small, .news-hub__hero-description, .news-hub__side-card p) { color: var(--theme-muted); }
html[data-theme="dark"] .news-hub__hero { background: linear-gradient(110deg, #162642, #1e3657); }
html[data-theme="dark"] .news-hub__hero h1 { color: var(--theme-heading); }
html[data-theme="dark"] .news-hub :is(.knowledge-featured h2 a, .news-hub__side-card a, .news-hub__topics a, .news-hub__grid .eye-article-card h3 a) { color: var(--theme-link); }
html[data-theme="dark"] .news-hub__topics a.is-current,
html[data-theme="dark"] .news-hub__topics a:hover { color: #fff; }
html[data-theme="dark"] .news-hub__main .knowledge-featured h2 a { color: var(--theme-heading); }
html[data-theme="dark"] .news-hub .news-hub__side-card--cta > div a:first-child { color: #1053bd; }
html[data-theme="dark"] .news-hub .news-hub__side-card--cta > div a:last-child { color: #fff; }
html[data-theme="dark"] .news-hub__list-heading label { color: var(--theme-muted); }
html[data-theme="dark"] .news-hub__bottom { background: var(--theme-surface-raised); }
html[data-theme="dark"] .news-hub__search input,
html[data-theme="dark"] .news-hub__list-heading select { background: var(--theme-input); border-color: var(--theme-border); color: var(--theme-text); }
html[data-theme="dark"] .knowledge-single .text-link { color: var(--theme-link); }
html[data-theme="dark"] .knowledge-single .knowledge-sidebar-card .text-link { color: #1053bd; }
html[data-theme="dark"] .knowledge-single :is(.related-knowledge, .recommendation-content-shelf--articles) .text-link { color: #1053bd; }

/* Commerce pages have their own hard-coded light palette. */
html[data-theme="dark"] .commerce-page { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="dark"] .commerce-page :is(.commerce-heading h1, .commerce-empty h2, .order-summary-card h2, .cart-final-empty h2) { color: var(--theme-heading); }
html[data-theme="dark"] .commerce-page--cart :is(.cart-final-heading h1, .cart-final-suggestions h2) { color: var(--theme-heading); }
html[data-theme="dark"] .commerce-page--cart .cart-final-heading__continue { color: var(--theme-link); }
html[data-theme="dark"] .commerce-page :is(.commerce-heading > p:last-child, .commerce-empty p) { color: var(--theme-muted); }
html[data-theme="dark"] .commerce-page .commerce-heading .eyebrow { color: var(--theme-link); }
html[data-theme="dark"] .commerce-page .checkout-steps { color: var(--theme-muted); }
html[data-theme="dark"] .commerce-page .checkout-steps :is(.is-current, .is-complete) { color: var(--theme-link); }
html[data-theme="dark"] .commerce-page :is(.commerce-empty, .cart-final-address, .cart-page-products, .cart-final-voucher, .cart-final-applied, .checkout-final__section, .checkout-final__note, .order-summary-card) {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .commerce-page :is(.cart-page-table-head, .voucher-box, .checkout-final [data-address-section]:not(.has-address), #checkout-shop-vouchers) {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .commerce-page :is(.cart-page-item__details > a, .cart-page-item__bottom > strong, .cart-price strong, .checkout-final__section h2, .checkout-address-summary strong) { color: var(--theme-heading); }
html[data-theme="dark"] .commerce-page :is(.cart-page-item__details > small, .checkout-address-summary span) { color: var(--theme-muted); }
html[data-theme="dark"] .commerce-page :is(.cart-page-table-head span, .cart-page-item__line-total, .cart-final-voucher strong, .checkout-order-item__content > strong, .checkout-order-item__bottom b) { color: var(--theme-heading); }
html[data-theme="dark"] .commerce-page :is(.cart-final-voucher small, .cart-final-summary__secure, .order-summary-note) { color: var(--theme-muted); }
html[data-theme="dark"] .commerce-page :is(.cart-page-item__details > span, .cart-page-item__details > small, .cart-final-address p, .checkout-order-item__content > small, .checkout-order-item__content > p) { color: var(--theme-muted); }
html[data-theme="dark"] .commerce-page .cart-final-voucher b { color: var(--theme-link); }
html[data-theme="dark"] .checkout-final .checkout-final__heading button,
html[data-theme="dark"] .commerce-page :is(.commerce-continue, .cart-final-heading__continue) { color: var(--theme-link); }
html[data-theme="dark"] .commerce-page .cart-price strong { color: #ff6277; }
html[data-theme="dark"] .commerce-page .order-totals > div,
html[data-theme="dark"] .commerce-page .order-totals .is-total { color: var(--theme-muted); border-color: var(--theme-border); }
html[data-theme="dark"] .commerce-page .order-totals :is(dd, .is-total dt) { color: var(--theme-heading); }
html[data-theme="dark"] .commerce-page .order-totals :is([data-summary-product-discount], [data-summary-discount], [data-summary-shipping-discount], .cart-final-savings, .cart-final-savings dd, .checkout-final__savings, .checkout-final__savings dd) { color: #55dda1; }
html[data-theme="dark"] .commerce-page .order-totals .is-total dd { color: #ff6277; }
html[data-theme="dark"] .checkout-final .checkout-final__products .checkout-order-item__content > strong,
html[data-theme="dark"] .checkout-final .checkout-final__products .checkout-order-item__bottom b { color: var(--theme-heading); }
html[data-theme="dark"] .checkout-final .checkout-final__gifts { background: #fffaf0; color: #273c5d; }
html[data-theme="dark"] .checkout-final .checkout-final__gifts :is(h2, h3, strong) { color: #273c5d; }
html[data-theme="dark"] .commerce-page :is(.cart-quantity button, .cart-quantity span, .voucher-box input) { background: var(--theme-input); color: var(--theme-text); }
html[data-theme="dark"] .checkout-final__dialog { background: var(--theme-modal); color: var(--theme-text); }
html[data-theme="dark"] .checkout-final__dialog-head h2 { color: var(--theme-heading); }
@media (max-width: 767px) {
  html[data-theme="dark"] .checkout-final .checkout-final__section,
  html[data-theme="dark"] .checkout-final .checkout-final__note,
  html[data-theme="dark"] .checkout-final .checkout-final__section[data-address-section]:not(.has-address) {
    background: var(--theme-card) !important;
    border-color: var(--theme-border);
    color: var(--theme-text);
  }
  html[data-theme="dark"] .checkout-final .checkout-final__products { background: var(--theme-card) !important; }
  html[data-theme="dark"] .checkout-final .checkout-final__section.checkout-final__gifts {
    background: #fffaf0 !important;
    color: #273c5d;
  }
}

/* Image-led product and booking templates retain light panels; keep their
   local text palette paired with those panels instead of inheriting dark ink. */
html[data-theme="dark"] :is(.single-product-page, main:has(.booking-page-intro)) {
  --ink: #111827;
  --muted: #526075;
  --accent: #155eef;
  --accent-hover: #0b46c5;
  --accent-ink: #fff;
  color: var(--ink);
}
html[data-theme="dark"] .single-product-page :is(.button--outline, .ddm-section-link) { color: #1053bd; }
html[data-theme="dark"] .single-product-page .product-buy-voucher { color: #fff; }
html[data-theme="dark"] .single-product-page :is(.product-breadcrumb a, .breadcrumbs a) { color: #55657d; }
html[data-theme="dark"] .single-product-page .product-breadcrumb a { color: #4d5e76; }
html[data-theme="dark"] .single-product-page .lens-breadcrumb a { color: #4d5e76; }
html[data-theme="dark"] .single-product-page .product-commerce__price > p,
html[data-theme="dark"] .single-product-page .lens-prescription-card p { color: #53647d; }
html[data-theme="dark"] .single-product-page .recommendation-content-shelf--articles { color: var(--theme-text); }
html[data-theme="dark"] .single-product-page .recommendation-content-shelf--articles :is(h2, h3, h3 a) { color: var(--theme-heading); }
html[data-theme="dark"] .single-product-page .recommendation-content-shelf--articles p { color: var(--theme-muted); }
html[data-theme="dark"] .single-product-page .lens-related-articles .eye-article-card :is(h3, h3 a) { color: var(--theme-heading); }
html[data-theme="dark"] .single-product-page .lens-related-articles .eye-article-card__body > p { color: var(--theme-muted); }
html[data-theme="dark"] main:has(.booking-page-intro) .booking-v2__day.is-selected { color: #fff; }
html[data-theme="dark"] main:has(.booking-page-intro) .booking-story__note { color: #56667d; }
html[data-theme="dark"] main:has(.booking-page-intro) :is(.booking-story__head > p, .booking-prepare__panel > p) { color: #52647a; }
html[data-theme="dark"] main:has(.booking-page-intro) .booking-v2__form-card :is(input, select, textarea) {
  background-color: #fff;
  border-color: #cad6e6;
  color: #0b2450;
}
html[data-theme="dark"] .tool-desktop__notice p { color: #52647a; }
html[data-theme="dark"] :is(.single-product-page, main:has(.booking-page-intro)) :is(input, textarea, select) { color-scheme: light; }

html[data-theme="dark"] :is(.site-header, .site-header__nav) { background: var(--theme-header); }
html[data-theme="dark"] :is(.header-account__menu, .nav-dropdown__panel, .header-search__results) { background: var(--theme-dropdown); color: var(--theme-text); border-color: var(--theme-border); }
html[data-theme="dark"] :is(.site-footer, footer.site-footer) { background: var(--theme-footer); }
html[data-theme="dark"] :is(.modal, [role="dialog"], .account-modal, .cart-drawer) { color: var(--theme-text); }

/* Lens navigation and catalog shortcuts use the same dark surfaces as the page. */
html[data-theme="dark"] .lens-mega__header {
  background: var(--theme-card);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .lens-mega__header strong,
html[data-theme="dark"] .primary-nav .lens-mega__header > a,
html[data-theme="dark"] .primary-nav .lens-mega__list strong,
html[data-theme="dark"] .primary-nav .lens-mega__brands a { color: var(--theme-heading); }
html[data-theme="dark"] .lens-mega__header span { color: var(--theme-link); }
html[data-theme="dark"] .primary-nav .lens-mega__list small,
html[data-theme="dark"] .lens-mega__list i { color: var(--theme-muted); }
html[data-theme="dark"] .primary-nav .lens-mega__list a,
html[data-theme="dark"] .primary-nav .lens-mega__list--needs a,
html[data-theme="dark"] .primary-nav .lens-mega__indices a {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-heading);
}
html[data-theme="dark"] .primary-nav .lens-mega__list a:is(:hover, :focus-visible),
html[data-theme="dark"] .primary-nav .lens-mega__indices a:is(:hover, :focus-visible) {
  background: var(--theme-surface-raised);
  border-color: #739ce0;
}
html[data-theme="dark"] .primary-nav .lens-mega__brands .lens-mega__brand {
  background: color-mix(in srgb, var(--lens-brand-color) 7%, var(--theme-card));
  border-color: var(--theme-border);
  border-top-color: var(--lens-brand-color);
}
html[data-theme="dark"] .primary-nav .lens-mega__brands .lens-mega__brand:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--lens-brand-color) 15%, var(--theme-card));
  border-color: var(--lens-brand-color);
}
html[data-theme="dark"] .primary-nav .lens-mega__brands .lens-brand-mark.has-logo .lens-brand-mark__name,
html[data-theme="dark"] .primary-nav .lens-mega__brands .lens-brand-mark--chemi:not(.has-logo) strong,
html[data-theme="dark"] .primary-nav .lens-mega__brands .lens-brand-mark--element:not(.has-logo) strong,
html[data-theme="dark"] .primary-nav .lens-mega__brands .lens-brand-mark--rocky:not(.has-logo) strong {
  color: var(--theme-heading);
}
html[data-theme="dark"] .lens-catalog-page .lens-hero-shortcuts a {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-heading);
  box-shadow: 0 6px 16px #0003;
}
html[data-theme="dark"] .lens-catalog-page .lens-hero-shortcuts a:is(:hover, :focus-visible) {
  background: var(--theme-surface-raised);
  border-color: #739ce0;
}
html[data-theme="dark"] .lens-catalog-page .lens-hero-shortcuts__icon { color: #8db8ff; }
html[data-theme="dark"] .lens-catalog-page .lens-hero-shortcuts__icon--half { color: #ff9b68; }
html[data-theme="dark"] .lens-catalog-page .lens-filter-card__head h2::before {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-heading);
}
html[data-theme="dark"] .lens-catalog-page .lens-catalog-mobile-bar__open {
  background: var(--theme-card);
  border-color: var(--theme-border);
  color: var(--theme-heading);
}
html[data-theme="dark"] .lens-catalog-page .lens-catalog-mobile-bar__open:is(:hover, :focus-visible) {
  background: var(--theme-surface-raised);
  border-color: #739ce0;
}

@media print {
  :root, html[data-theme="dark"] { color-scheme: only light; }
}