/* ==========================================================================
   Site-wide dark theme — hand-tuned "soft charcoal" palette
   Toggled from the admin dashboard (SiteMediaSettings.dark_mode_enabled,
   exposed to every template as `dark_mode_enabled`). When on, templates
   render <html data-theme="dark">, which activates the rules below.

   This is a real hand-tuned "soft charcoal" palette, not a filter trick:
   every hardcoded color used across main.css and each page template's own
   embedded <style> block (store.html, checkout.html, makePayment.html,
   productDetail.html, gallery.html, contact.html, terms.html, privacy.html,
   cookie.html, orderSuccess.html) gets an explicit dark-mode override here,
   scoped under html[data-theme="dark"]. Nothing here is permanent — flip
   the admin toggle to go back to the light theme at any time.
   ========================================================================== */

html[data-theme="dark"] {
  --bg: #121212;
  --surface: #1c1c1c;
  --surface-2: #242424;
  --border: #2e2e2e;
  --ink: #ededed;
  --muted: #a3a3a3;
  --ring: rgba(255, 255, 255, 0.1);

  --pill-bg: #ededed;
  --pill-ink: #121212;
  --pill-hover: #d8d8d8;

  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

/* ===== main.css (shared chrome + legacy cart classes) ===== */
html[data-theme="dark"] .header { background: var(--surface); }
html[data-theme="dark"] h2 { color: var(--ink); }
html[data-theme="dark"] .legal { color: var(--ink); }
html[data-theme="dark"] .overlay { background: var(--overlay); }
html[data-theme="dark"] .drawer { background: var(--surface); }
html[data-theme="dark"] .drawer-nav .item { color: var(--ink); }
html[data-theme="dark"] .drawer-nav .item.is-active,
html[data-theme="dark"] .drawer-nav .item:hover { background: var(--surface-2); }
html[data-theme="dark"] .drawer-nav .item:is(:focus-visible) { outline-color: rgba(255, 255, 255, 0.35); }
html[data-theme="dark"] .drawer-ig { color: var(--ink); }
html[data-theme="dark"] .badge,
html[data-theme="dark"] .cart-badge { background: var(--pill-bg); color: var(--pill-ink); }

/* Cart icon's SVG paths hardcode stroke="#000000", and the Instagram icon's
   paths hardcode fill="#0F0F0F", as presentation attributes in the markup
   rather than using currentColor — a CSS declaration still wins over a
   presentation attribute, so this is enough to fix both. */
html[data-theme="dark"] #cart-btn svg path { stroke: var(--ink); }
html[data-theme="dark"] .drawer-ig svg path { fill: var(--ink); }

html[data-theme="dark"] #cart-overlay.overlay { background: var(--bg); }
html[data-theme="dark"] .cart-header { border-bottom-color: var(--border); }
html[data-theme="dark"] .checkout-btn { background: var(--pill-bg); color: var(--pill-ink); }
html[data-theme="dark"] .cart-item { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .cart-item img { filter: grayscale(100%) brightness(0.9); }
html[data-theme="dark"] .cart-item-meta { color: var(--muted); }
html[data-theme="dark"] .cart-qty button { border-color: var(--border); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .cart-qty .qty-input { border-color: var(--border); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .cart-footer { border-top-color: var(--border); }

html[data-theme="dark"] .ghost-btn { border-color: var(--ink); background: transparent; color: var(--ink); }
html[data-theme="dark"] .ghost-btn:hover { background: var(--surface-2); }
html[data-theme="dark"] .cart-header .continue-shopping { color: var(--muted); }
html[data-theme="dark"] .cart-header .continue-shopping:hover { color: var(--ink); }

html[data-theme="dark"] .product-header { border-bottom-color: var(--border); }
html[data-theme="dark"] .product-label,
html[data-theme="dark"] .total-label { color: var(--muted); }
html[data-theme="dark"] .product-item { border-bottom-color: var(--border); }
html[data-theme="dark"] .product-price { color: var(--ink); }
html[data-theme="dark"] .product-option { color: var(--muted); }
html[data-theme="dark"] .quantity-container { background: var(--pill-bg); }
html[data-theme="dark"] .quantity-btn { background: var(--pill-bg); color: var(--pill-ink); }
html[data-theme="dark"] .quantity-btn:hover { background: var(--pill-hover); }
html[data-theme="dark"] .quantity-display { background: var(--pill-bg); color: var(--pill-ink); }
html[data-theme="dark"] .delete-btn svg { fill: var(--muted); }
html[data-theme="dark"] .product-total { color: var(--muted); }

html[data-theme="dark"] .cart-empty-title,
html[data-theme="dark"] .estimated-total { color: var(--ink); }
html[data-theme="dark"] .shipping-note { color: var(--muted); }
html[data-theme="dark"] .cart-items { border-top-color: var(--border); }
html[data-theme="dark"] .no-products { background: var(--surface); border-color: var(--border); }

/* ===== main.html embedded chrome styles ===== */
/* --slideout-black / --slideout-white are used both as text-on-surface and
   as bg/text pairs on invert-on-hover CTAs (checkout button, close button,
   Instagram chip). Swapping the two poles keeps every rule that already
   consumes them correct without touching each one individually. */
html[data-theme="dark"] {
  --slideout-black: var(--ink);
  --slideout-white: var(--surface);
  --slideout-soft: var(--surface-2);
  --slideout-border: rgba(255, 255, 255, 0.14);
  --slideout-muted: rgba(255, 255, 255, 0.62);
  --slideout-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] #menuOverlay.overlay,
html[data-theme="dark"] #cart-overlay.overlay { background: rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .cart-header { background: rgba(28, 28, 28, 0.92); }
html[data-theme="dark"] .cart-footer { background: rgba(28, 28, 28, 0.94); }
html[data-theme="dark"] .cart-empty-hero { border-color: rgba(255, 255, 255, 0.22); }
html[data-theme="dark"] .product-image { border-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .checkout-btn:hover,
html[data-theme="dark"] .checkout-btn:focus-visible { opacity: 0.86; }

html[data-theme="dark"] .footer { background: var(--bg); }
html[data-theme="dark"] .currency-selector select { background: var(--surface); }
html[data-theme="dark"] .currency-selector select:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .footer-socials a { color: var(--muted); }
html[data-theme="dark"] .footer-socials a[aria-label="Twitter"]:hover { color: var(--ink); }

/* ===== Page-local token redefinitions =====
   Several page templates declare their own prefixed :root custom
   properties and consume them throughout their embedded styles.
   Redefining just the tokens — instead of every consuming selector —
   carries the dark palette through automatically, the same trick used
   above for --slideout-*. store.html and makePayment.html's tokens are
   handled here; checkout.html / productDetail.html / orderSuccess.html
   redefine their own further down, next to their selector overrides. */
html[data-theme="dark"] {
  /* store.html (unprefixed locals beyond the shared --bg/--ink/--muted/--ring) */
  --soft: var(--surface-2);
  --line: rgba(255, 255, 255, 0.14);

  /* makePayment.html */
  --rc-bg: var(--bg);
  --rc-ink: var(--ink);
  --rc-muted: rgba(255, 255, 255, 0.62);
  --rc-soft: var(--surface);
  --rc-soft-2: var(--surface-2);
  --rc-line: rgba(255, 255, 255, 0.14);
  --rc-line-strong: rgba(255, 255, 255, 0.22);
  --rc-success: var(--pill-bg);
  --rc-green: #34d399;
  --rc-green-bg: rgba(16, 185, 129, 0.14);
  --rc-red: #f87171;
  --rc-red-bg: rgba(248, 113, 113, 0.14);
}

/* ===== locked.html ===== */
/* Already dark by design (permanent black hero + glass card) — no
   overrides needed; the admin toggle simply has no effect on this page. */

/* ===== store.html =====
   Most borders/shadows here already flow through the --line/--soft/--shadow
   token remap above (store.html's own :root reuses the shared --bg/--ink/
   --muted/--ring names too, already covered by the top-level redefinition).
   What's left is hardcoded literal colors on the filter/sort slideout,
   checklist, select dropdown, and the first-visit currency modal. */

html[data-theme="dark"] .filter-icon svg { fill: var(--ink); }

html[data-theme="dark"] .soldout-badge { background: var(--pill-bg); color: var(--pill-ink); }

html[data-theme="dark"] .img-wrap { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
html[data-theme="dark"] .img-wrap::after { border-color: rgba(255, 255, 255, .06); }

html[data-theme="dark"] .img-placeholder { background: var(--surface-2); color: var(--muted); }

html[data-theme="dark"] .no-products { background: var(--surface); }

html[data-theme="dark"] .slideout-backdrop { background: var(--overlay); }

html[data-theme="dark"] .slideout { background: var(--surface); border-color: rgba(255, 255, 255, .14); }

html[data-theme="dark"] .slideout-close { background: var(--surface); }
html[data-theme="dark"] .slideout-close:hover { background: var(--surface-2); }

html[data-theme="dark"] .filter-panel-card { background: var(--surface); }

html[data-theme="dark"] .checklist li label { background: var(--surface-2); }
html[data-theme="dark"] .checklist li label:hover { border-color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .checklist .box { border-color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .checklist input:checked + .box::after { background: var(--ink); }

html[data-theme="dark"] .select-trigger { background: var(--surface-2); }
html[data-theme="dark"] .select-trigger:hover { border-color: var(--ink); background: var(--surface); }

html[data-theme="dark"] .select-menu { background: var(--surface); border-color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .select-menu .option:hover,
html[data-theme="dark"] .select-menu .option[aria-selected="true"] { background: var(--surface-2); }

html[data-theme="dark"] .slideout-footer { background: var(--surface); }

html[data-theme="dark"] .btn-link { color: var(--ink); }
html[data-theme="dark"] .btn-primary { background: var(--pill-bg); color: var(--pill-ink); }

html[data-theme="dark"] .btn-filter:focus-visible,
html[data-theme="dark"] .slideout-close:focus-visible,
html[data-theme="dark"] .btn-primary:focus-visible,
html[data-theme="dark"] .btn-link:focus-visible,
html[data-theme="dark"] .select-trigger:focus-visible { outline-color: var(--ink); }

/* Scoped to .store-section — productDetail.html has its own .price class
   for a different component, and this stylesheet is shared site-wide. */
html[data-theme="dark"] .store-section .price { color: var(--ink); }

html[data-theme="dark"] .gb-currency-modal { background: var(--overlay); }
html[data-theme="dark"] .gb-currency-dialog { background: var(--surface); color: var(--ink); border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .gb-currency-search { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .gb-currency-search:focus { border-color: var(--ink); background: var(--surface-2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .gb-currency-option { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .gb-currency-option:hover,
html[data-theme="dark"] .gb-currency-option:focus-visible { border-color: var(--ink); background: var(--surface-2); }

/* ===== productDetail.html ===== */

/* Local --pd-* tokens (not the same names as the shared --bg/--ink/--muted
   tokens, so they don't get auto-overridden — redefine them here). */
html[data-theme="dark"] {
  --pd-bg: var(--bg);
  --pd-ink: var(--ink);
  --pd-muted: var(--muted);
  --pd-line: var(--border);
  --pd-line-strong: var(--border);
  --pd-shadow: var(--shadow);
}

html[data-theme="dark"] .note-bar { color: var(--ink); background: var(--surface); }

html[data-theme="dark"] .gallery-panel,
html[data-theme="dark"] .summary-panel { background: var(--surface); }

html[data-theme="dark"] .gallery-main { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }

html[data-theme="dark"] .discount-badge { background: var(--pill-bg); color: var(--pill-ink); }

html[data-theme="dark"] .thumb { background: var(--surface-2); }

html[data-theme="dark"] .thumb:hover,
html[data-theme="dark"] .thumb:focus-visible,
html[data-theme="dark"] .thumb.is-active { border-color: var(--ink); }

html[data-theme="dark"] .product-detail-page .price { color: var(--ink); }

html[data-theme="dark"] .stock-pill { background: var(--surface); color: var(--ink); }

html[data-theme="dark"] .stock-pill.success { border-color: var(--border); }

html[data-theme="dark"] .stock-pill.error { background: var(--pill-bg); color: var(--pill-ink); border-color: var(--pill-bg); }

html[data-theme="dark"] .product-desc { color: var(--ink); }

html[data-theme="dark"] .size-option { background: var(--surface); color: var(--ink); }

html[data-theme="dark"] .size-option:hover,
html[data-theme="dark"] .size-option:focus-visible { border-color: var(--ink); }

html[data-theme="dark"] .size-option.active { background: var(--pill-bg); color: var(--pill-ink); border-color: var(--pill-bg); }

html[data-theme="dark"] .product-detail-page .quantity-controls { background: var(--surface); }

html[data-theme="dark"] .product-detail-page .quantity-btn { color: var(--ink); }

html[data-theme="dark"] .product-detail-page .quantity-btn:hover,
html[data-theme="dark"] .product-detail-page .quantity-btn:focus-visible { background: var(--surface-2); }

html[data-theme="dark"] .quantity-input { color: var(--ink); background: var(--surface); }

html[data-theme="dark"] .add-to-cart-btn { border-color: var(--pill-bg); background: var(--pill-bg); color: var(--pill-ink); }

html[data-theme="dark"] .toast { background: var(--pill-bg); color: var(--pill-ink); }

html[data-theme="dark"] .related-card { color: var(--ink); }

html[data-theme="dark"] .related-thumb { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }

html[data-theme="dark"] .related-price { color: var(--ink); }

/* ===== checkout.html ===== */

/* checkout.html's embedded <style> defines its own local custom properties
   (--co-bg, --co-ink, --co-muted, --co-soft, --co-soft-2, --co-line,
   --co-line-strong, --co-shadow, --co-container) under a page-local :root
   block. These are DIFFERENT property names from the tokens dark-theme.css
   redefines globally (--bg/--ink/--muted/--ring/etc.), so the global
   redefinition does NOT reach them by cascade — they need their own remap,
   exactly like main.html's --slideout-* variables above. Only the four
   actually consumed in the checkout style block are remapped; --co-bg,
   --co-soft, --co-soft-2, --co-shadow, --co-container are defined but never
   referenced via var() in that file, so there's nothing to fix for them. */
html[data-theme="dark"] {
  --co-ink: var(--ink);
  --co-muted: var(--muted);
  --co-line: var(--border);
  --co-line-strong: var(--border);
}

/* .checkout-page is the full-page canvas (not a card), so it maps to the
   page background token rather than a surface. */
html[data-theme="dark"] .checkout-page { background: var(--bg); }

html[data-theme="dark"] .checkout-card { background: var(--surface); }

/* .checkout-cart-card shares .checkout-card's class list but declares its
   own background (radial highlight + solid fill), which wins by source
   order at equal specificity — needs its own override. */
html[data-theme="dark"] .checkout-cart-card {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, .045), transparent 34%),
    var(--surface);
}

html[data-theme="dark"] .control,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .control:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] .textarea:focus {
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .control::placeholder,
html[data-theme="dark"] .textarea::placeholder { color: rgba(255, 255, 255, .38); }

html[data-theme="dark"] .select option { color: var(--ink); background: var(--surface); }

/* "Proceed to pay" CTA — invert the black pill for dark mode. */
html[data-theme="dark"] .checkout-submit {
  border-color: var(--pill-bg);
  background: var(--pill-bg);
  color: var(--pill-ink);
}

html[data-theme="dark"] .cart-toggle { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .cart-toggle:hover,
html[data-theme="dark"] .cart-toggle:focus-visible { background: var(--surface-2); }

html[data-theme="dark"] .checkout-cart-image { background: var(--surface-2); }
html[data-theme="dark"] .checkout-cart-name { color: var(--ink); }
html[data-theme="dark"] .checkout-cart-price { color: var(--ink); }
html[data-theme="dark"] .checkout-cart-empty { border-color: var(--border); }
html[data-theme="dark"] .checkout-cart-empty strong { color: var(--ink); }

html[data-theme="dark"] .checkout-page .summary-row { color: var(--ink); }

html[data-theme="dark"] .checkout-alert {
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink);
}

/* Error alert: base rule always loses to this once .show is toggled (both
   classes are applied together in the markup). Only the near-white bg/red
   pairing loses contrast on a dark surface — keep the red hue, but move it
   onto a translucent dark-friendly tint and lighten the text so it stays
   legible against var(--surface). */
html[data-theme="dark"] .checkout-alert.error {
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .4);
  color: #fca5a5;
}

html[data-theme="dark"] .iti__country-list {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .iti__country:hover,
html[data-theme="dark"] .iti__highlight { background: var(--surface-2); }

/* ===== makePayment.html ===== */
/* This file's embedded <style> block (receipt/payment page) defines its
   own local :root tokens (--rc-bg, --rc-ink, --rc-muted, --rc-line,
   --rc-line-strong, --rc-soft, --rc-soft-2, --rc-green, --rc-red, etc. —
   already remapped above) consumed via var(--rc-*) throughout. Only
   hardcoded literal colors that bypass a variable get an override below.
   The @media print block (forces #fff/#000 regardless of theme) and one
   inline style="" attribute in the body markup are out of scope. */

html[data-theme="dark"] .receipt-page { background: var(--bg); }

html[data-theme="dark"] .receipt-card { background: var(--surface); }

html[data-theme="dark"] .receipt-card-head {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.045), transparent 34%),
    var(--surface);
}

html[data-theme="dark"] .receipt-lead { color: var(--muted); }
html[data-theme="dark"] .receipt-lead strong { color: var(--ink); }

html[data-theme="dark"] .receipt-meta-block,
html[data-theme="dark"] .receipt-party,
html[data-theme="dark"] .receipt-panel,
html[data-theme="dark"] .receipt-summary-box { background: var(--surface); }

html[data-theme="dark"] .receipt-value { color: var(--ink); }

html[data-theme="dark"] .receipt-party-name { color: var(--ink); }
html[data-theme="dark"] .receipt-party-text { color: var(--muted); }
html[data-theme="dark"] .receipt-party-link { color: var(--ink); }

html[data-theme="dark"] .receipt-panel-head { color: var(--ink); }

html[data-theme="dark"] table.receipt-table { color: var(--ink); }

html[data-theme="dark"] .receipt-thumb img { background: var(--surface-2); }

html[data-theme="dark"] .receipt-item-name { color: var(--ink); }

/* Second, more specific .receipt-summary-box rule (same gradient pattern as
   .receipt-card-head) — must follow the grouped background override above
   so it wins for this selector, matching the source file's cascade order. */
html[data-theme="dark"] .receipt-summary-box {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.045), transparent 34%),
    var(--surface);
}

html[data-theme="dark"] .receipt-row { color: var(--muted); }
html[data-theme="dark"] .receipt-row strong { color: var(--ink); }

/* Semantic success green (#065f46) loses contrast directly on the new dark
   surface — brighten just this paired text color, keep the hue family. */
html[data-theme="dark"] .receipt-row-discount strong { color: #34d399; }

html[data-theme="dark"] .receipt-total-num { color: var(--ink); }

html[data-theme="dark"] .discount-form-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .discount-form-input:focus {
  border-color: var(--ink);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .discount-form-btn,
html[data-theme="dark"] .discount-remove-btn {
  background: var(--pill-bg);
  color: var(--pill-ink);
  border-color: var(--pill-bg);
}

html[data-theme="dark"] .discount-msg-success { color: #34d399; }
html[data-theme="dark"] .discount-msg-error { color: #f87171; }

/* Semantic status backgrounds (#f0fdf4 success wash, #fef2f2 error wash,
   #fffbeb warning wash) are near-white — swap each to a translucent tint of
   its own hue over the dark surface instead of graying it out, so the
   success/error/warning coding survives; body/title text on top switches to
   the shared light ink below since it's now sitting on a dark-ish wash. */
html[data-theme="dark"] .discount-applied-box {
  background: rgba(6, 95, 70, 0.18);
  border-color: rgba(6, 95, 70, 0.4);
}

html[data-theme="dark"] .discount-applied-badge {
  background: var(--pill-bg);
  color: var(--pill-ink);
}

html[data-theme="dark"] .discount-applied-title { color: #34d399; }
html[data-theme="dark"] .discount-applied-code { color: var(--ink); }

html[data-theme="dark"] .discount-applied-chip {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}

html[data-theme="dark"] .discount-applied-status { color: var(--muted); }

html[data-theme="dark"] .receipt-card-foot { background: var(--surface); }

html[data-theme="dark"] .pay-btn {
  background: var(--pill-bg);
  color: var(--pill-ink);
  border-color: var(--pill-bg);
}

html[data-theme="dark"] .pay-btn svg path,
html[data-theme="dark"] .pay-btn svg rect { stroke: var(--pill-ink); }

html[data-theme="dark"] .msg-toast {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .msg-success {
  background: rgba(6, 95, 70, 0.18);
  border-color: rgba(6, 95, 70, 0.4);
}

html[data-theme="dark"] .msg-error {
  background: rgba(127, 29, 29, 0.18);
  border-color: rgba(127, 29, 29, 0.4);
}

html[data-theme="dark"] .msg-warning {
  background: rgba(146, 64, 14, 0.18);
  border-color: rgba(146, 64, 14, 0.4);
}

html[data-theme="dark"] .msg-toast-text { color: var(--ink); }

html[data-theme="dark"] .msg-toast-close {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}

/* ===== gallery.html ===== */
/* .gallery-lightbox and .gallery-close are intentionally left unchanged —
   the lightbox backdrop is already near-black (rgba(0,0,0,.86)) and the
   close button sits on that permanent dark backdrop regardless of site
   theme, so both already read correctly in dark mode. */
html[data-theme="dark"] .gallery-page { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .gallery-hero { border-bottom-color: var(--border); }
html[data-theme="dark"] .gallery-kicker { color: var(--muted); }
html[data-theme="dark"] .gallery-subtitle { color: var(--muted); }
html[data-theme="dark"] .gallery-empty { color: var(--muted); }
html[data-theme="dark"] .gallery-item { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
html[data-theme="dark"] .gallery-item::after { border-color: var(--border); }
html[data-theme="dark"] .gallery-lightbox img { background: var(--surface); }

/* ===== contact.html ===== */
html[data-theme="dark"] .contact-page { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .contact-hero { border-bottom-color: var(--border); }
html[data-theme="dark"] .contact-kicker { color: var(--muted); }
html[data-theme="dark"] .contact-subtitle { color: var(--muted); }
html[data-theme="dark"] .contact-card { border-color: var(--border); background: var(--surface); }
html[data-theme="dark"] .contact-info-card { background: radial-gradient(circle at top right, rgba(255, 255, 255, .045), transparent 34%), var(--surface); }
html[data-theme="dark"] .contact-muted { color: var(--muted); }
html[data-theme="dark"] .contact-info-item { border-top-color: var(--border); }
html[data-theme="dark"] .contact-info-label { color: var(--muted); }
html[data-theme="dark"] .contact-info-value { color: var(--ink); }
html[data-theme="dark"] .contact-label { color: var(--muted); }
html[data-theme="dark"] .contact-input,
html[data-theme="dark"] .contact-textarea { background: var(--surface); border-color: var(--border); color: var(--ink); }
html[data-theme="dark"] .contact-input:focus,
html[data-theme="dark"] .contact-textarea:focus { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
html[data-theme="dark"] .contact-submit { background: var(--pill-bg); color: var(--pill-ink); }
html[data-theme="dark"] .contact-toast { border-color: var(--border); background: var(--surface); color: var(--ink); }
/* .contact-toast.success / .contact-toast.error left unchanged — status
   colors keep their light chip background intentionally for signal clarity. */

/* ===== terms.html ===== */
html[data-theme="dark"] .terms-page { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .terms-hero { border-bottom-color: var(--border); }
html[data-theme="dark"] .terms-kicker { color: var(--muted); }
html[data-theme="dark"] .terms-subtitle { color: var(--muted); }
html[data-theme="dark"] .terms-card { border-color: var(--border); background: var(--surface); }
html[data-theme="dark"] .terms-side-card { background: radial-gradient(circle at top right, rgba(255, 255, 255, .045), transparent 34%), var(--surface); }
html[data-theme="dark"] .terms-muted { color: var(--muted); }
html[data-theme="dark"] .terms-info-item { border-top-color: var(--border); }
html[data-theme="dark"] .terms-info-label { color: var(--muted); }
html[data-theme="dark"] .terms-info-value { color: var(--ink); }
html[data-theme="dark"] .terms-section { border-color: var(--border); background: var(--surface); }
html[data-theme="dark"] .terms-section p { color: var(--muted); }
html[data-theme="dark"] .terms-section ul { color: var(--muted); }
html[data-theme="dark"] .terms-highlight { background: var(--surface-2); border-left-color: var(--ink); }
html[data-theme="dark"] .terms-note { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* ===== privacy.html ===== */
html[data-theme="dark"] .privacy-page { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .privacy-hero { border-bottom-color: var(--border); }
html[data-theme="dark"] .privacy-kicker { color: var(--muted); }
html[data-theme="dark"] .privacy-subtitle { color: var(--muted); }
html[data-theme="dark"] .privacy-card { border-color: var(--border); background: var(--surface); }
html[data-theme="dark"] .privacy-side-card { background: radial-gradient(circle at top right, rgba(255, 255, 255, .045), transparent 34%), var(--surface); }
html[data-theme="dark"] .privacy-muted { color: var(--muted); }
html[data-theme="dark"] .privacy-info-item { border-top-color: var(--border); }
html[data-theme="dark"] .privacy-info-label { color: var(--muted); }
html[data-theme="dark"] .privacy-info-value { color: var(--ink); }
html[data-theme="dark"] .privacy-section { border-color: var(--border); background: var(--surface); }
html[data-theme="dark"] .privacy-section p { color: var(--muted); }
html[data-theme="dark"] .privacy-section ul { color: var(--muted); }
html[data-theme="dark"] .privacy-highlight { background: var(--surface-2); border-left-color: var(--ink); }
html[data-theme="dark"] .privacy-note { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* ===== cookie.html ===== */
html[data-theme="dark"] .cookies-page { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .cookies-hero { border-bottom-color: var(--border); }
html[data-theme="dark"] .cookies-kicker { color: var(--muted); }
html[data-theme="dark"] .cookies-subtitle { color: var(--muted); }
html[data-theme="dark"] .cookies-card { border-color: var(--border); background: var(--surface); }
html[data-theme="dark"] .cookies-side-card { background: radial-gradient(circle at top right, rgba(255, 255, 255, .045), transparent 34%), var(--surface); }
html[data-theme="dark"] .cookies-muted { color: var(--muted); }
html[data-theme="dark"] .cookies-info-item { border-top-color: var(--border); }
html[data-theme="dark"] .cookies-info-label { color: var(--muted); }
html[data-theme="dark"] .cookies-info-value { color: var(--ink); }
html[data-theme="dark"] .cookies-section { border-color: var(--border); background: var(--surface); }
html[data-theme="dark"] .cookies-section p { color: var(--muted); }
html[data-theme="dark"] .cookies-section ul { color: var(--muted); }
html[data-theme="dark"] .cookies-highlight { background: var(--surface-2); border-left-color: var(--ink); }
html[data-theme="dark"] .cookies-note { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* ===== orderSuccess.html ===== */
/* This template defines its own locally-scoped custom properties
   (--success-bg, --success-ink, --success-muted, --success-line,
   --success-line-strong, --success-soft) consumed via var(--success-*)
   throughout the file. Because these names don't match the shared
   dark-theme.css tokens, they are NOT automatically picked up by the
   global html[data-theme="dark"] token redefinition — so they're
   re-pointed at the shared tokens here, same pattern used for
   --slideout-* in main.html's section above. Everything else below
   is a hardcoded literal color that bypasses these local vars. */
html[data-theme="dark"] {
  --success-bg: var(--bg);
  --success-ink: var(--ink);
  --success-muted: var(--muted);
  --success-line: var(--border);
  --success-line-strong: var(--border);
  --success-soft: var(--surface-2);
}
html[data-theme="dark"] .order-success-page { background: var(--bg); }
html[data-theme="dark"] .success-card { background: radial-gradient(circle at top right, rgba(255, 255, 255, .045), transparent 34%), var(--surface); }
html[data-theme="dark"] .success-mark { border-color: var(--pill-bg); background: var(--pill-bg); color: var(--pill-ink); }
html[data-theme="dark"] .success-card-title { color: var(--ink); }
html[data-theme="dark"] .success-message { color: var(--muted); }
html[data-theme="dark"] .success-message strong { color: var(--ink); }
html[data-theme="dark"] .order-summary-box { background: var(--surface); }
html[data-theme="dark"] .order-success-page .summary-row { color: var(--muted); }
html[data-theme="dark"] .summary-value { color: var(--ink); }
html[data-theme="dark"] .success-btn { border-color: var(--pill-bg); background: var(--pill-bg); color: var(--pill-ink); }
html[data-theme="dark"] .success-btn.secondary { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .support-note a { color: var(--ink); }
/* @media print block intentionally left untouched — printed output should
   stay light/black-on-white regardless of the on-screen theme. */
