/* =====================================================================
 * DARK MODE for every style except "nebula" (which has its own, nebula.css).
 * Active when <html data-mode="dark"> (header toggle; light by default).
 * Neutral dark surfaces + the store's own accent colour. Product photo tiles
 * stay light: packshots are cut out on white (and some layouts multiply them
 * on the tile colour), so a dark tile would darken the products.
 * ===================================================================== */
html[data-mode="dark"] body:not(.style-nebula) {
  --bg: #0f1114; --surface: #171a1f; --ink: #eef0f3; --muted: #a2a8b3; --line: rgba(255, 255, 255, .1);
  --tile: #eceef2;
  --dk-panel: #15181d;
  --dk-field: #1c2026;
  --dk-line-strong: rgba(255, 255, 255, .2);
  color-scheme: dark;
  background: var(--bg); color: var(--ink);
}
html[data-mode="dark"] body:not(.style-nebula) h1,
html[data-mode="dark"] body:not(.style-nebula) h2,
html[data-mode="dark"] body:not(.style-nebula) h3 { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .hero h1 { color: var(--hero-ink); }
html[data-mode="dark"] body:not(.style-nebula) .editorial h2 { color: var(--feature-ink); }

/* Header, menus, drawers */
html[data-mode="dark"] body:not(.style-nebula) .site-header { background: var(--bg); border-color: var(--line); box-shadow: none; }
html[data-mode="dark"] body:not(.style-nebula) .brand__name,
html[data-mode="dark"] body:not(.style-nebula) .primary-nav a,
html[data-mode="dark"] body:not(.style-nebula) .icon-btn { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .nav-toggle span { background: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .drawer__panel,
html[data-mode="dark"] body:not(.style-nebula) .search-bar,
html[data-mode="dark"] body:not(.style-nebula) .search-suggest { background: var(--dk-panel); color: var(--ink); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .drawer-item,
html[data-mode="dark"] body:not(.style-nebula) .drawer__head,
html[data-mode="dark"] body:not(.style-nebula) .drawer-foot { border-color: var(--line); }

/* Buttons. The base style paints buttons with the text colour (--ink) and white text;
   in dark mode --ink is light, which gave white-on-white buttons. Every button type
   (theme, WooCommerce, cart/checkout blocks, login, order tracking) uses the accent. */
html[data-mode="dark"] body:not(.style-nebula) :is(.btn:not(.btn--ghost):not(.btn--light), a.button, button.button, input.button,
  .wc-block-components-button:not(.is-link), .wp-block-button__link, .wp-element-button,
  form.cart .button, .sticky-buy__btn, button[type="submit"]:not(.icon-btn), input[type="submit"]) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff);
}
html[data-mode="dark"] body:not(.style-nebula) #place_order,
html[data-mode="dark"] body:not(.style-nebula) #respond input#submit { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
html[data-mode="dark"] body:not(.style-nebula) :is(.btn:not(.btn--ghost):not(.btn--light), a.button, button.button, input.button,
  .wc-block-components-button:not(.is-link), .wp-block-button__link, .wp-element-button, form.cart .button,
  .sticky-buy__btn, button[type="submit"]:not(.icon-btn), input[type="submit"]):hover {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
html[data-mode="dark"] body:not(.style-nebula) span.onsale { background: var(--accent); color: var(--on-accent, #fff); }
html[data-mode="dark"] body:not(.style-nebula) .skip-link:focus { color: var(--bg); }
html[data-mode="dark"] body:not(.style-nebula) .btn--ghost { color: var(--ink); border-color: var(--dk-line-strong); }
html[data-mode="dark"] body:not(.style-nebula) .btn--ghost:hover { background: var(--ink); color: var(--bg); }
html[data-mode="dark"] body:not(.style-nebula) ul.products li.product a.button, html[data-mode="dark"] body:not(.style-nebula) ul.products li.product .button { background: transparent; color: var(--ink); border-color: var(--dk-line-strong); }
html[data-mode="dark"] body:not(.style-nebula) ul.products li.product a.button:hover, html[data-mode="dark"] body:not(.style-nebula) ul.products li.product .button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
html[data-mode="dark"] body:not(.style-nebula) .link-arrow { color: var(--ink); }

/* Product cards and categories */
html[data-mode="dark"] body:not(.style-nebula) ul.products li.product .woocommerce-loop-product__title,
html[data-mode="dark"] body:not(.style-nebula) ul.products li.product .price,
html[data-mode="dark"] body:not(.style-nebula) ul.products li.product .price ins { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .layout-compact ul.products li.product .card-media,
html[data-mode="dark"] body:not(.style-nebula).layout-compact ul.products li.product .card-media { border-color: var(--line); }
/* Category tiles keep their light tile: dark names on it. Showcase / split layouts put the
   name outside the photo, on the page: light names there. */
html[data-mode="dark"] body:not(.style-nebula) .cat-tile .cat-tile__name,
html[data-mode="dark"] body:not(.style-nebula) .cat-tile.cat-tile--product .cat-tile__name { color: #121212; }
html[data-mode="dark"] body:not(.style-nebula) .cat-tile .cat-tile__count,
html[data-mode="dark"] body:not(.style-nebula) .cat-tile.cat-tile--product .cat-tile__count { color: #55585e; }
html[data-mode="dark"] body:not(.style-nebula).layout-showcase .cat-tile .cat-tile__name,
html[data-mode="dark"] body:not(.style-nebula).layout-split .cat-tile .cat-tile__name { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula).layout-showcase .cat-tile .cat-tile__count,
html[data-mode="dark"] body:not(.style-nebula).layout-split .cat-tile .cat-tile__count { color: var(--muted); }
html[data-mode="dark"] body:not(.style-nebula) .cat-rail .cat-tile, html[data-mode="dark"] body:not(.style-nebula) .cat-grid .cat-tile { border-color: var(--line); }

/* Strips, tabs, chips, badges */
html[data-mode="dark"] body:not(.style-nebula) .values { background: var(--surface); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .value + .value { border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .tabs { background: var(--surface); }
html[data-mode="dark"] body:not(.style-nebula) .tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent, #fff); }
html[data-mode="dark"] body:not(.style-nebula) .chip { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
html[data-mode="dark"] body:not(.style-nebula) .badge { background: var(--surface); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .badge--soldout { background: #000; color: #fff; }
html[data-mode="dark"] body:not(.style-nebula) nav.woocommerce-pagination ul li span.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

/* Product page */
html[data-mode="dark"] body:not(.style-nebula) .summary .price,
html[data-mode="dark"] body:not(.style-nebula) .summary .price ins,
html[data-mode="dark"] body:not(.style-nebula) .product_title { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .delivery-estimate { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .product-assurance { color: var(--ink); }
/* Mobile menu drawer (desktop nav stays transparent in the header) */
@media (max-width: 860px) {
  html[data-mode="dark"] body:not(.style-nebula) .primary-nav { background: var(--dk-panel); color: var(--ink); border-color: var(--line); }
}
/* Disabled add-to-cart (variable product, no option chosen yet): readable */
html[data-mode="dark"] body:not(.style-nebula) form.cart .button:disabled,
html[data-mode="dark"] body:not(.style-nebula) form.cart .button.disabled { background: var(--accent); color: var(--on-accent, #fff); opacity: .45; }
html[data-mode="dark"] body:not(.style-nebula) .accordion,
html[data-mode="dark"] body:not(.style-nebula) .accordion__title,
html[data-mode="dark"] body:not(.style-nebula) .product-accordion { border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) table.shop_attributes th,
html[data-mode="dark"] body:not(.style-nebula) table.shop_attributes td { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .sticky-buy { background: var(--dk-panel); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .sticky-buy__name, html[data-mode="dark"] body:not(.style-nebula) .sticky-buy__price { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .stepper,
html[data-mode="dark"] body:not(.style-nebula) .quantity,
html[data-mode="dark"] body:not(.style-nebula) .qty-btn { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .quantity .qty { background: transparent; color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) div.product div.images .woocommerce-product-gallery__wrapper { background: var(--tile); }
html[data-mode="dark"] body:not(.style-nebula) .swatch { border-color: var(--dk-line-strong); color: var(--ink); }

/* Forms, cart, checkout, notices */
html[data-mode="dark"] body:not(.style-nebula) input[type="text"], html[data-mode="dark"] body:not(.style-nebula) input[type="email"],
html[data-mode="dark"] body:not(.style-nebula) input[type="tel"], html[data-mode="dark"] body:not(.style-nebula) input[type="search"],
html[data-mode="dark"] body:not(.style-nebula) input[type="password"], html[data-mode="dark"] body:not(.style-nebula) input[type="number"],
html[data-mode="dark"] body:not(.style-nebula) textarea, html[data-mode="dark"] body:not(.style-nebula) select,
html[data-mode="dark"] body:not(.style-nebula) .select2-container .select2-selection,
html[data-mode="dark"] body:not(.style-nebula) form .form-row .input-text,
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-text-input input {
  background: var(--dk-field); color: var(--ink); border-color: var(--dk-line-strong);
}
html[data-mode="dark"] body:not(.style-nebula) ::placeholder { color: rgba(238, 240, 243, .42); }
html[data-mode="dark"] body:not(.style-nebula) select option { background: var(--dk-panel); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .select2-container .select2-selection__rendered { color: var(--ink) !important; }
html[data-mode="dark"] body:not(.style-nebula) .select2-dropdown { background: var(--dk-panel); color: var(--ink); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) label { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) table.shop_table,
html[data-mode="dark"] body:not(.style-nebula) #order_review,
html[data-mode="dark"] body:not(.style-nebula) .cart_totals { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) table.shop_table th,
html[data-mode="dark"] body:not(.style-nebula) table.shop_table td { border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .woocommerce-checkout #payment,
html[data-mode="dark"] body:not(.style-nebula) .woocommerce-checkout #payment div.payment_box { background: var(--dk-field); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--dk-field); }
html[data-mode="dark"] body:not(.style-nebula) .woocommerce-message,
html[data-mode="dark"] body:not(.style-nebula) .woocommerce-info,
html[data-mode="dark"] body:not(.style-nebula) .woocommerce-error { background: var(--surface); color: var(--ink); border-color: var(--accent); }
html[data-mode="dark"] body:not(.style-nebula) .ship-progress { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .ship-progress__bar { background: rgba(255, 255, 255, .1); }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-grid__product { background: var(--surface); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-grid__product-add-to-cart .wp-block-button__link { color: var(--ink); border-color: var(--dk-line-strong); }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

/* Olfactive profile and its zoom dialog (perfume stores on another style) */
html[data-mode="dark"] body:not(.style-nebula) .olfactive { background: var(--surface); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .pyramid__tier { background: rgba(255, 255, 255, .03); border-color: var(--line); }
html[data-mode="dark"] body:not(.style-nebula) .note__img img, html[data-mode="dark"] body:not(.style-nebula) .note__img--empty span { border-color: var(--surface); }
html[data-mode="dark"] body:not(.style-nebula) .note-view { background: var(--dk-panel); }

/* Trust strip text (some layouts colour it for a bright accent band) */
html[data-mode="dark"] body:not(.style-nebula) .values,
html[data-mode="dark"] body:not(.style-nebula) .value { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .value strong,
html[data-mode="dark"] body:not(.style-nebula) .value h3 { color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .value p,
html[data-mode="dark"] body:not(.style-nebula) .value span { color: var(--muted); }
html[data-mode="dark"] body:not(.style-nebula) .value svg { color: var(--accent); }

/* Graphite (Casarena): its grey-blue accent is too dim for white text on dark pages */
html[data-mode="dark"] body.style-graphite { --accent: #a9bdd6; --on-accent: #0b0d10; }

/* Checkout block selects (country / state): dark field, no light corners */
html[data-mode="dark"] body:not(.style-nebula) .wc-blocks-components-select .wc-blocks-components-select__container { background: var(--dk-field); border-radius: var(--radius); }
html[data-mode="dark"] body:not(.style-nebula) .wc-blocks-components-select .wc-blocks-components-select__select { background: var(--dk-field) !important; color: var(--ink); border-color: var(--dk-line-strong) !important; }
html[data-mode="dark"] body:not(.style-nebula) .wc-blocks-components-select .wc-blocks-components-select__label,
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-text-input label { color: var(--muted); }
html[data-mode="dark"] body:not(.style-nebula) .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-text-input input,
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-text-input textarea { background: var(--dk-field) !important; color: var(--ink); border-color: var(--dk-line-strong) !important; }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-radio-control__option,
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-radio-control-accordion-option { border-color: var(--dk-line-strong); color: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { background: var(--dk-field); border-color: var(--dk-line-strong); }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--ink); }
html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-sidebar, html[data-mode="dark"] body:not(.style-nebula) .wc-block-components-totals-wrapper { border-color: var(--line); }

/* Lime (Fit Home) prints sale prices in near-black for a lime highlight: keep the highlight everywhere in dark mode */
html[data-mode="dark"] body.style-lime .price ins { background: #c6f432; color: #0b0b0c; padding: 0 6px; border-radius: 3px; }
html[data-mode="dark"] body:not(.style-nebula) .about-contact__card h2 { color: var(--feature-ink); }
html[data-mode="dark"] body:not(.style-nebula) .about-contact__actions .btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }