/* ════════════════════════════════════════════════════════════════════
   ASHU light / dark theme (storefront only).
   • Light = the approved Phase 8 design: nothing in this file changes it
     (only the header toggle's icon swap below applies in light mode).
   • Dark  = html[data-theme="dark"], set before first paint by the inline
     script in layouts/store.php (saved choice → else device setting).
   • A real dark palette, not an inversion. Brand aqua/green stay the accents.
     Product photos and the logo keep their original colours: no filters.
     Photos sit on white photo frames; the transparent logo sits on the header.
   ════════════════════════════════════════════════════════════════════ */

/* ── Header toggle (both themes): sun = light, moon = dark ────────── */
.hdr__theme .icon { transition: transform var(--dur) var(--ease), opacity var(--dur); }
.hdr__theme-moon { display: none; }
html[data-theme="dark"] .hdr__theme-sun { display: none; }
html[data-theme="dark"] .hdr__theme-moon { display: block; color: var(--color-primary-strong); }
.hdr__theme:active .icon { transform: rotate(-20deg) scale(.92); }
@media (prefers-reduced-motion: reduce) { .hdr__theme .icon { transition: none; } }
/* Phones under 360 px (below the tested range): tighter header spacing so the extra 44 px control still fits */
@media (max-width: 359.98px) { .hdr__bar, .hdr__tools { gap: 0; } }

/* ── Dark tokens ──────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #101f29;
  --bg-section: #142832;
  --bg-section-alt: #1a323c;
  --bg-neutral: #172b35;
  --bg-green: #193132;
  --bg-promo: #1e3b45;
  --bg-elevated: #263f4a;
  --bg-card: #203640;
  --bg-field: #172c37;
  --border: #38515c;
  --border-strong: #526a75;
  --field-border: #607d89;
  --text-primary: #edf4f3;
  --text-secondary: #bdcdd0;
  --text-muted: #aec2c7;
  --brand-primary: #17627e;
  --brand-primary-hover: #1d738e;
  --brand-secondary: #82c08a;
  --brand-soft: #20404a;
  --shadow-soft: 0 5px 20px -12px rgba(0, 0, 0, .52);
  --footer-main: #0d2631;
  --footer-bottom: #0a1e28;
  --cta-surface: #174755;

  --color-primary: #38a7c1;
  --color-primary-hover: #50b3c9;
  --color-primary-strong: #83cad8;
  --color-primary-tint: var(--brand-soft);
  --color-primary-tint-2: #2d515b;
  --color-secondary: #6fb77a;
  --color-secondary-strong: var(--brand-secondary);
  --color-secondary-tint: #233f35;
  --color-navy: #edf4f3;
  --color-navy-900: #0b1b25;
  --color-navy-700: #b7dce4;
  --color-bg: var(--bg-page);
  --color-surface: var(--bg-card);
  --color-surface-2: var(--bg-neutral);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-text-subtle: var(--text-muted);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);

  --color-success: #74d68a;  --color-success-bg: #0f2c1a;
  --color-warning: #f2c261;  --color-warning-bg: #332812;
  --color-error:   #ff8f86;  --color-error-bg:   #3b1a1a;

  --shadow-xs: var(--shadow-soft);
  --shadow-sm: var(--shadow-soft);
  --shadow: 0 10px 26px -17px rgba(0,0,0,.62);
  --shadow-lg: 0 20px 44px -25px rgba(0,0,0,.72);
  --ring: 0 0 0 3px rgba(131,202,216,.52);

  --dk-fill: var(--brand-primary);
  --dk-fill-hover: var(--brand-primary-hover);
}
html[data-theme="dark"] ::placeholder { color: var(--color-text-subtle); opacity: 1; }

/* ── Buttons & fills ──────────────────────────────────────────────── */
html[data-theme="dark"] .btn:not(.btn-aqua, .btn-outline, .btn-light, .btn-whatsapp, .btn-ghost) { --btn-bg: var(--dk-fill); }
html[data-theme="dark"] .btn-primary:hover { --btn-bg: var(--dk-fill-hover); }
html[data-theme="dark"] .btn-aqua { --btn-bg: #00789f; }
html[data-theme="dark"] .btn-aqua:hover { --btn-bg: #006a8c; }
html[data-theme="dark"] .btn-light { --btn-bg: #fff; --btn-fg: #0a3d7a; }
html[data-theme="dark"] .btn-whatsapp { --btn-bg: #1f7a2e; }
html[data-theme="dark"] .btn-whatsapp:hover { --btn-bg: #186426; }
html[data-theme="dark"] .btn:disabled, html[data-theme="dark"] .pdp__add:disabled, html[data-theme="dark"] .co-place:disabled {
  --btn-bg: var(--color-surface-2); --btn-fg: var(--color-text-muted); --btn-bd: var(--color-border-strong); opacity: 1; }
html[data-theme="dark"] .skip-link,
html[data-theme="dark"] .hdr__nav .mega__all,
html[data-theme="dark"] .pcard__badge--offer,
html[data-theme="dark"] .toolbar__badge,
html[data-theme="dark"] .pager__num.is-current,
html[data-theme="dark"] .co-sec__num,
html[data-theme="dark"] .osum__qty,
html[data-theme="dark"] .acc-nav__avatar { background: var(--dk-fill); border-color: var(--dk-fill); color: #fff; }
html[data-theme="dark"] .hdr__nav .mega__all:hover { background: var(--dk-fill-hover); }
html[data-theme="dark"] .fpill input:checked + span { border-color: var(--dk-fill); background: var(--dk-fill); color: #fff; }
html[data-theme="dark"] .rail-btn:hover:not(:disabled) { background: var(--dk-fill); border-color: var(--dk-fill); color: #fff; }
html[data-theme="dark"] .cart-badge, html[data-theme="dark"] .pcard__badge--new { background: #1f7a2e; color: #fff; }

/* ── Alerts, notes ────────────────────────────────────────────────── */
html[data-theme="dark"] .alert-success { border-color: #1f5a33; }
html[data-theme="dark"] .alert-error   { border-color: #6b2a2a; }
html[data-theme="dark"] .alert-warn    { border-color: #6b5420; }
html[data-theme="dark"] .preview-note  { color: #f7d58a; border-color: rgba(242,194,97,.45); }
html[data-theme="dark"] .pdp__demo     { border-color: rgba(242,194,97,.45); }
html[data-theme="dark"] .pdp__rating a, html[data-theme="dark"] .pdp-sec__summary { color: var(--color-warning); }
html[data-theme="dark"] .toast { background: #1f3549; border: 1px solid #34506a; }
html[data-theme="dark"] .toast--error { background: #b42318; border-color: #b42318; }

/* ── Header, announcement bar, drawer ─────────────────────────────── */
html[data-theme="dark"] .announce { background: #0c2a47; }
html[data-theme="dark"] .hdr { background: rgba(16, 35, 45, .96); }
@supports (backdrop-filter: blur(8px)) { html[data-theme="dark"] .hdr { background: rgba(16, 35, 45, .88); } }
html[data-theme="dark"] .hdr.is-scrolled { box-shadow: 0 8px 24px -14px rgba(0,0,0,.7); }
html[data-theme="dark"] .drawer::backdrop, html[data-theme="dark"] .filters::backdrop { background: rgba(0,0,0,.6); }

/* ── Product photography: white photo frames, original colours ────── */
html[data-theme="dark"] :is(.pcard__media img, .pdp__main, .pdp__thumb img,
  .tile__media img, .cat-card__art img, .cline__media img, .osum__media img) { mix-blend-mode: normal; }
html[data-theme="dark"] .pcard__media,
html[data-theme="dark"] .pdp__stage,
html[data-theme="dark"] .pdp__thumb,
html[data-theme="dark"] .tile__media,
html[data-theme="dark"] .rail__item .tile__media,
html[data-theme="dark"] .cline__media,
html[data-theme="dark"] .osum__media { background: #fff; }
html[data-theme="dark"] .pcard__media { border-block-end: 1px solid var(--color-border); }
html[data-theme="dark"] .cat-card__art img { background: #fff; }
html[data-theme="dark"] .pdp__zoom-hint { background: rgba(17,33,49,.92); }
html[data-theme="dark"] .pdp__thumb.is-active { border-color: var(--color-primary); }
html[data-theme="dark"] .lightbox { background: #fff; }
html[data-theme="dark"] .lightbox img { background: #fff; }
html[data-theme="dark"] .lightbox__close { color: #0a3d7a; }
html[data-theme="dark"] .lightbox::backdrop { background: rgba(0,0,0,.8); }

/* ── Homepage ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .cat-card:hover { border-color: var(--color-border-strong); }
html[data-theme="dark"] .collection { background: linear-gradient(150deg, var(--color-primary-tint), var(--color-surface)); }
html[data-theme="dark"] .need { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* ── Footer ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .ftr__wave { color: var(--footer-main); }
html[data-theme="dark"] .ftr__main { background: var(--footer-main); }
html[data-theme="dark"] .ftr__bottom { background: var(--footer-bottom); }

/* Static storefront banners keep brand colour and unaltered white photography. */
html[data-theme="dark"] .hero { background: var(--color-primary-tint); }
html[data-theme="dark"] .hero--campaign { background: var(--color-bg); }
html[data-theme="dark"] .listing__head { background: var(--bg-section-alt); }