/**
 * ExtraCoins storefront theme — light default + CDX-inspired dark mode.
 * Cool slate / navy surfaces, sky-blue accents (no yellow CTAs).
 */

:root {
  color-scheme: light;
  --ec-bg: #f8fafc;
  --ec-bg-elevated: #ffffff;
  --ec-bg-muted: #f1f5f9;
  --ec-bg-soft: #f8fafc;
  --ec-border: #e2e8f0;
  --ec-border-strong: #cbd5e1;
  --ec-text: #0f172a;
  --ec-text-secondary: #334155;
  --ec-text-muted: #64748b;
  --ec-text-faint: #94a3b8;
  --ec-accent: #2563eb;
  --ec-accent-hover: #1d4ed8;
  --ec-accent-soft: rgba(37, 99, 235, 0.12);
  --ec-accent-text: #1e40af;
  --ec-danger: #dc2626;
  --ec-success: #059669;
  --ec-success-soft: #d1fae5;
  --ec-success-text: #047857;
  --ec-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.08);
  --ec-shadow-lg: 0 20px 40px -12px rgb(15 23 42 / 0.18);
  --ec-nav-bg: rgba(255, 255, 255, 0.92);
  --ec-input-bg: #ffffff;
  --ec-ring: rgba(37, 99, 235, 0.25);
  --ec-card-hover-y: -2px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ec-bg: #070b14;
  --ec-bg-elevated: #0f1628;
  --ec-bg-muted: #151d30;
  --ec-bg-soft: #0c1220;
  --ec-border: rgba(148, 163, 184, 0.14);
  --ec-border-strong: rgba(148, 163, 184, 0.28);
  --ec-text: #e8eef9;
  --ec-text-secondary: #c7d2e5;
  --ec-text-muted: #94a3b8;
  --ec-text-faint: #64748b;
  --ec-accent: #38bdf8;
  --ec-accent-hover: #7dd3fc;
  --ec-accent-soft: rgba(56, 189, 248, 0.12);
  --ec-accent-text: #7dd3fc;
  --ec-danger: #f87171;
  --ec-success: #34d399;
  --ec-success-soft: rgba(52, 211, 153, 0.14);
  --ec-success-text: #6ee7b7;
  --ec-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.55);
  --ec-shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.65);
  --ec-nav-bg: rgba(10, 14, 24, 0.88);
  --ec-input-bg: #121a2c;
  --ec-ring: rgba(56, 189, 248, 0.28);
}

/* ---------- Base ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-slate-50,
html[data-theme="dark"] body.bg-white {
  background-color: var(--ec-bg) !important;
  color: var(--ec-text) !important;
}

html[data-theme="dark"] ::selection {
  background: rgba(56, 189, 248, 0.35);
  color: #f8fafc;
}

/* Smooth theme transitions (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  html.ec-theme-ready body,
  html.ec-theme-ready .ec-store-nav,
  html.ec-theme-ready .product-card,
  html.ec-theme-ready .ec-catalog-toolbar,
  html.ec-theme-ready .offcanvas,
  html.ec-theme-ready .ec-theme-toggle {
    transition:
      background-color 0.22s ease,
      border-color 0.22s ease,
      color 0.18s ease,
      box-shadow 0.22s ease;
  }
}

/* ---------- Store logo plate (matches notifications header size) ---------- */
.ec-store-logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(12.5rem, 48vw);
  min-height: 2.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.7rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  line-height: 0;
}
.ec-store-logo-frame .ec-store-logo {
  display: block;
  height: 2.5rem; /* 40px — same as notifications */
  width: auto;
  max-width: 100%;
  max-height: 2.5rem;
  object-fit: contain;
}
@media (min-width: 768px) {
  .ec-store-logo-frame {
    min-height: 3.15rem;
    padding: 0.4rem 0.8rem;
  }
  .ec-store-logo-frame .ec-store-logo {
    height: 3rem; /* 48px */
    max-height: 3rem;
  }
}
html[data-theme="dark"] .ec-store-logo-frame {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
html[data-theme="dark"] .ec-store-nav a:hover .ec-store-logo-frame {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(56, 189, 248, 0.15);
}

/* ---------- Theme switcher (segmented Light | Dark) ---------- */
.ec-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.18rem;
  border-radius: 999px;
  border: 1px solid var(--ec-border-strong);
  background: var(--ec-bg-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
html[data-theme="dark"] .ec-theme-switch {
  background: #0c1220;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ec-theme-switch-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ec-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.85rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.ec-theme-switch-btn .fa {
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.85;
}
.ec-theme-switch-btn:hover {
  color: var(--ec-text-secondary);
  background: rgba(15, 23, 42, 0.04);
}
html[data-theme="dark"] .ec-theme-switch-btn:hover {
  background: rgba(148, 163, 184, 0.08);
  color: var(--ec-text);
}
.ec-theme-switch-btn.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.06);
}
.ec-theme-switch-btn.is-active .fa {
  opacity: 1;
}
.ec-theme-switch-btn[data-ec-theme-option="light"].is-active .fa {
  color: #d97706;
}
.ec-theme-switch-btn[data-ec-theme-option="dark"].is-active .fa {
  color: #0284c7;
}
html[data-theme="dark"] .ec-theme-switch-btn.is-active {
  background: linear-gradient(180deg, #1e293b 0%, #151d30 100%);
  color: #f1f5f9;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(56, 189, 248, 0.18);
}
html[data-theme="dark"] .ec-theme-switch-btn[data-ec-theme-option="dark"].is-active .fa {
  color: #38bdf8;
}
html[data-theme="dark"] .ec-theme-switch-btn[data-ec-theme-option="light"].is-active .fa {
  color: #fbbf24;
}
.ec-theme-switch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ec-ring);
}
.ec-theme-switch-label {
  display: none;
}
@media (min-width: 640px) {
  .ec-theme-switch-label {
    display: inline;
  }
}

/* Mobile drawer: full-width control */
.ec-theme-switch--drawer {
  width: 100%;
  max-width: 16rem;
  padding: 0.22rem;
}
.ec-theme-switch--drawer .ec-theme-switch-btn {
  flex: 1;
  min-height: 2.25rem;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}
.ec-theme-switch--drawer .ec-theme-switch-label {
  display: inline;
}

/* Legacy single-toggle class kept for safety (unused) */
.ec-theme-toggle {
  display: none;
}

/* ---------- Nav ---------- */
html[data-theme="dark"] .ec-store-nav,
html[data-theme="dark"] #navbar_top {
  background: var(--ec-nav-bg) !important;
  border-bottom-color: var(--ec-border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] .ec-store-nav a,
html[data-theme="dark"] .ec-store-nav .cat-toggle,
html[data-theme="dark"] .ec-store-nav button:not(.btn-close) {
  color: var(--ec-text-secondary) !important;
}
html[data-theme="dark"] .ec-store-nav a:hover,
html[data-theme="dark"] .ec-store-nav .cat-toggle:hover {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .ec-store-nav .text-slate-900,
html[data-theme="dark"] .ec-store-nav a.font-semibold {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .ec-store-nav .border-slate-300,
html[data-theme="dark"] .ec-store-nav .border {
  border-color: var(--ec-border-strong) !important;
}
html[data-theme="dark"] .ec-store-nav .hover\:bg-slate-50:hover,
html[data-theme="dark"] .ec-store-nav .hover\:bg-slate-100:hover {
  background-color: var(--ec-bg-muted) !important;
}
html[data-theme="dark"] .ec-store-nav .bg-slate-900 {
  background-color: var(--ec-accent) !important;
  color: #0b1220 !important;
}
html[data-theme="dark"] .ec-store-nav .cat-menu {
  background: var(--ec-bg-elevated) !important;
  border-color: var(--ec-border) !important;
  box-shadow: var(--ec-shadow-lg) !important;
}
html[data-theme="dark"] .ec-store-nav .cat-menu a {
  color: var(--ec-text-secondary) !important;
}
html[data-theme="dark"] .ec-store-nav .cat-menu a:hover {
  background: var(--ec-bg-muted) !important;
  color: var(--ec-text) !important;
}
html[data-theme="dark"] #ec-mobile-search-panel {
  background: var(--ec-bg-elevated) !important;
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .ec-search-input {
  background: var(--ec-input-bg) !important;
  border-color: var(--ec-border-strong) !important;
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .ec-search-input::placeholder {
  color: var(--ec-text-faint) !important;
}
html[data-theme="dark"] .ec-search-results {
  background: var(--ec-bg-elevated) !important;
  border-color: var(--ec-border) !important;
  box-shadow: var(--ec-shadow-lg) !important;
}
html[data-theme="dark"] .ec-search-hit:hover,
html[data-theme="dark"] .ec-search-history-item:hover {
  background: var(--ec-bg-muted) !important;
}
html[data-theme="dark"] .ec-search-hit-title,
html[data-theme="dark"] .ec-search-hit-price,
html[data-theme="dark"] .ec-search-history-item,
html[data-theme="dark"] .ec-search-view-all {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .ec-search-hit-meta,
html[data-theme="dark"] .ec-search-msg,
html[data-theme="dark"] .ec-search-history-title {
  color: var(--ec-text-muted) !important;
}
html[data-theme="dark"] .ec-search-hit-tag {
  color: var(--ec-accent-text) !important;
}
html[data-theme="dark"] .ec-search-thumb {
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .ec-search-thumb--empty {
  background: var(--ec-bg-muted) !important;
  color: var(--ec-text-faint) !important;
}
html[data-theme="dark"] .ec-search-view-all {
  border-top-color: var(--ec-border) !important;
}
html[data-theme="dark"] .ec-search-view-all:hover {
  color: var(--ec-accent) !important;
}

/* Offcanvas / mobile drawer */
html[data-theme="dark"] .offcanvas {
  background-color: var(--ec-bg-elevated) !important;
  color: var(--ec-text) !important;
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .offcanvas-header {
  background-color: var(--ec-bg-elevated) !important;
  border-bottom-color: var(--ec-border) !important;
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .offcanvas-header .offcanvas-title,
html[data-theme="dark"] .offcanvas-body a {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .offcanvas-body .text-slate-500,
html[data-theme="dark"] .offcanvas-body .text-muted {
  color: var(--ec-text-muted) !important;
}
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: 0.75;
}

/* ---------- Surfaces / cards ---------- */
html[data-theme="dark"] .bg-white {
  background-color: var(--ec-bg-elevated) !important;
}
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-light {
  background-color: var(--ec-bg-muted) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-x {
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5 {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600 {
  color: var(--ec-text-secondary) !important;
}
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .small.text-muted {
  color: var(--ec-text-muted) !important;
}
html[data-theme="dark"] .text-slate-400 {
  color: var(--ec-text-faint) !important;
}
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] a.hover\:text-blue-700:hover {
  color: var(--ec-accent-text) !important;
}
html[data-theme="dark"] a.hover\:text-slate-900:hover {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .hover\:bg-slate-50:hover {
  background-color: var(--ec-bg-muted) !important;
}
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-xl {
  box-shadow: var(--ec-shadow) !important;
}

html[data-theme="dark"] .product-card {
  background: var(--ec-bg-elevated) !important;
  border-color: var(--ec-border) !important;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.04);
}
html[data-theme="dark"] .product-card:hover {
  border-color: rgba(56, 189, 248, 0.28) !important;
  box-shadow: var(--ec-shadow), 0 0 0 1px rgba(56, 189, 248, 0.12) !important;
}
html[data-theme="dark"] .ec-catalog-toolbar {
  background: var(--ec-bg-elevated) !important;
  border-color: var(--ec-border) !important;
  box-shadow: var(--ec-shadow) !important;
}
html[data-theme="dark"] .ec-catalog-sort-select,
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control {
  background-color: var(--ec-input-bg) !important;
  border-color: var(--ec-border-strong) !important;
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .ec-catalog-sort-select:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  border-color: var(--ec-accent) !important;
  box-shadow: 0 0 0 3px var(--ec-ring) !important;
}

/* Pagination pills */
html[data-theme="dark"] .ec-shop-pagination,
html[data-theme="dark"] .inline-flex.border.bg-white {
  background: var(--ec-bg-elevated) !important;
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .ec-shop-pagination a:hover,
html[data-theme="dark"] a.hover\:bg-slate-50:hover {
  background: var(--ec-bg-muted) !important;
}

/* Prices */
html[data-theme="dark"] .ec-live-price,
html[data-theme="dark"] .price {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .text-amber-700 {
  color: #fbbf24 !important; /* subtle badge only, not buttons */
}
html[data-theme="dark"] .text-emerald-700 {
  color: var(--ec-success-text) !important;
}
html[data-theme="dark"] .bg-emerald-100 {
  background: var(--ec-success-soft) !important;
}

/* Buttons — cool blue/sky, never yellow */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-dark,
html[data-theme="dark"] button.bg-slate-900,
html[data-theme="dark"] a.bg-slate-900,
html[data-theme="dark"] .ec-add-to-cart {
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%) !important;
  border-color: transparent !important;
  color: #041018 !important;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px -6px rgba(14, 165, 233, 0.55);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-dark:hover,
html[data-theme="dark"] .ec-add-to-cart:hover {
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%) !important;
  color: #041018 !important;
  filter: none;
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
  color: var(--ec-text-secondary) !important;
  border-color: var(--ec-border-strong) !important;
  background: transparent !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
  background: var(--ec-bg-muted) !important;
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .btn-secondary {
  background: var(--ec-bg-muted) !important;
  border-color: var(--ec-border-strong) !important;
  color: var(--ec-text) !important;
}

/* Inline accent styles on buy buttons (dealer theme CSS) — soften to sky */
html[data-theme="dark"] .ec-add-to-cart[style] {
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%) !important;
  border-color: transparent !important;
  color: #041018 !important;
}

/* Cart panel */
html[data-theme="dark"] .ec-cart-panel .offcanvas-header.bg-white {
  background: var(--ec-bg-elevated) !important;
}
html[data-theme="dark"] .ec-cart-panel .bg-light {
  background: var(--ec-bg-muted) !important;
}
html[data-theme="dark"] .ec-cart-panel .text-primary,
html[data-theme="dark"] #ec-cart-total {
  color: var(--ec-accent) !important;
}
html[data-theme="dark"] .ec-cart-panel .border-top,
html[data-theme="dark"] .ec-cart-panel .border-bottom {
  border-color: var(--ec-border) !important;
}

/* Modals */
html[data-theme="dark"] .modal-content {
  background: var(--ec-bg-elevated) !important;
  color: var(--ec-text) !important;
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .modal-backdrop.show {
  opacity: 0.72;
}

/* Tables / lists */
html[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ec-text);
  --bs-table-border-color: var(--ec-border);
  color: var(--ec-text);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--ec-text);
  border-bottom-color: var(--ec-border);
}
html[data-theme="dark"] .list-group-item {
  background: var(--ec-bg-elevated);
  color: var(--ec-text);
  border-color: var(--ec-border);
}

/* Footer already dark — refine slightly */
html[data-theme="dark"] .ec-site-footer {
  background: #05080f !important;
  border-top: 1px solid var(--ec-border);
}

/* Store banners */
html[data-theme="dark"] .ec-store-banner--vacation {
  background: rgba(251, 191, 36, 0.1);
  border-bottom-color: rgba(251, 191, 36, 0.25);
  color: #fde68a;
}
html[data-theme="dark"] .ec-store-banner--demo {
  background: rgba(56, 189, 248, 0.1);
  border-bottom-color: rgba(56, 189, 248, 0.22);
  color: #bae6fd;
}
html[data-theme="dark"] .ec-store-banner--market-closed {
  background: var(--ec-bg-muted);
  border-bottom-color: var(--ec-border);
  color: var(--ec-text-secondary);
}
html[data-theme="dark"] .ec-store-banner--inactive {
  background: rgba(248, 113, 113, 0.1);
  border-bottom-color: rgba(248, 113, 113, 0.25);
  color: #fecaca;
}
html[data-theme="dark"] .ec-store-banner__link {
  background: var(--ec-accent) !important;
  color: #041018 !important;
}

/* Accent subtitle under hero */
html[data-theme="dark"] .text-lg.text-slate-600 {
  color: var(--ec-text-muted) !important;
}

/* Product image frames */
html[data-theme="dark"] .ec-product-image,
html[data-theme="dark"] .product-card img {
  background: #0a101c;
}

/* Details gallery thumbs (safety net if page styles lag) */
html[data-theme="dark"] .ec-gallery-thumb {
  background: #121a2c !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}
html[data-theme="dark"] .ec-gallery-thumb.is-active {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.55) !important;
}
html[data-theme="dark"] .ec-product-gallery .bg-white {
  background-color: var(--ec-bg-elevated) !important;
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .ec-gallery-stage.bg-slate-50 {
  background-color: var(--ec-bg-muted) !important;
}

/* Mobile sticky cart bar if present */
html[data-theme="dark"] .ec-mobile-cart-bar {
  background: var(--ec-bg-elevated) !important;
  border-top-color: var(--ec-border) !important;
}

/* Details / prose pages */
html[data-theme="dark"] .prose,
html[data-theme="dark"] article {
  color: var(--ec-text-secondary);
}
html[data-theme="dark"] .prose,
html[data-theme="dark"] .text-slate-700.ec-product-description,
html[data-theme="dark"] .ec-product-description {
  color: var(--ec-text-secondary) !important;
}
/* Volume pricing table (details page) */
html[data-theme="dark"] .ec-tier-table-wrap .ec-tier-heading {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .ec-tier-table {
  background: #0f1628 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #e8eef9;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .ec-tier-table .ec-tier-row {
  border-color: rgba(148, 163, 184, 0.12) !important;
}
html[data-theme="dark"] .ec-tier-table .ec-tier-qty {
  color: #c7d2e5 !important;
}
html[data-theme="dark"] .ec-tier-table .ec-tier-price {
  color: #f1f5f9 !important;
}
/* Active qty break — replace pale emerald-50 which is unreadable on dark */
html[data-theme="dark"] .ec-tier-table .ec-tier-row.bg-emerald-50,
html[data-theme="dark"] .ec-tier-table .ec-tier-row.ec-tier-row-active {
  background: rgba(52, 211, 153, 0.14) !important;
  color: #ecfdf5 !important;
}
html[data-theme="dark"] .ec-tier-table .ec-tier-row.ec-tier-row-active .ec-tier-qty,
html[data-theme="dark"] .ec-tier-table .ec-tier-row.bg-emerald-50 .ec-tier-qty {
  color: #a7f3d0 !important;
}
html[data-theme="dark"] .ec-tier-table .ec-tier-row.ec-tier-row-active .ec-tier-price,
html[data-theme="dark"] .ec-tier-table .ec-tier-row.bg-emerald-50 .ec-tier-price {
  color: #ecfdf5 !important;
}
/* Main unit price + "each" on details */
html[data-theme="dark"] .ec-live-price {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .text-emerald-600 {
  color: #34d399 !important;
}
html[data-theme="dark"] .text-emerald-700 {
  color: #6ee7b7 !important;
}

/* Stock qty — never leave Bootstrap text-dark / #212529 on dark surfaces */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] strong.text-dark,
html[data-theme="dark"] .ec-live-stock,
html[data-theme="dark"] .ec-stock-line strong,
html[data-theme="dark"] .ec-stock-status,
html[data-theme="dark"] .ec-stock-status .text-emerald-600 {
  color: #e8eef9 !important;
}
html[data-theme="dark"] .ec-live-stock {
  color: #f1f5f9 !important;
  font-weight: 700;
}
html[data-theme="dark"] .ec-stock-line,
html[data-theme="dark"] .ec-stock-line.text-muted {
  color: var(--ec-text-muted) !important;
}
/* In-stock status on details (“In stock — N available”) */
html[data-theme="dark"] .ec-stock-status .text-emerald-600,
html[data-theme="dark"] .ec-stock-status .ec-live-stock {
  color: #6ee7b7 !important;
}

/* Generated descriptions often use strong/b for "Coin Highlights" — never leave slate-900 on dark bg */
html[data-theme="dark"] .ec-product-description strong,
html[data-theme="dark"] .ec-product-description b,
html[data-theme="dark"] .prose strong,
html[data-theme="dark"] .prose b {
  color: #f1f5f9 !important;
  font-weight: 650;
}
html[data-theme="dark"] .ec-product-description a,
html[data-theme="dark"] .prose a {
  color: var(--ec-accent-text) !important;
}
html[data-theme="dark"] .ec-product-description h1,
html[data-theme="dark"] .ec-product-description h2,
html[data-theme="dark"] .ec-product-description h3,
html[data-theme="dark"] .ec-product-description h4,
html[data-theme="dark"] .prose h1,
html[data-theme="dark"] .prose h2,
html[data-theme="dark"] .prose h3,
html[data-theme="dark"] .prose h4 {
  color: var(--ec-text) !important;
}
/* Override common hard-coded dark colors from pasted HTML */
html[data-theme="dark"] .ec-product-description [style*="color: #000"],
html[data-theme="dark"] .ec-product-description [style*="color:#000"],
html[data-theme="dark"] .ec-product-description [style*="color: black"],
html[data-theme="dark"] .ec-product-description [style*="color:black"],
html[data-theme="dark"] .ec-product-description [style*="color: #0f172a"],
html[data-theme="dark"] .ec-product-description [style*="color:#0f172a"],
html[data-theme="dark"] .ec-product-description [style*="color: #111"],
html[data-theme="dark"] .ec-product-description [style*="color:#111"],
html[data-theme="dark"] .ec-product-description [style*="color: #1e293b"],
html[data-theme="dark"] .ec-product-description [style*="color:#1e293b"],
html[data-theme="dark"] .ec-product-description [style*="color: #334155"],
html[data-theme="dark"] .ec-product-description [style*="color:#334155"] {
  color: #e8eef9 !important;
}
html[data-theme="dark"] hr {
  border-color: var(--ec-border);
  opacity: 1;
}

/* Alert boxes */
html[data-theme="dark"] .alert-success {
  background: var(--ec-success-soft);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--ec-success-text);
}
html[data-theme="dark"] .alert-danger {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
  color: #fecaca;
}
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary {
  background: var(--ec-accent-soft);
  border-color: rgba(56, 189, 248, 0.28);
  color: #bae6fd;
}
html[data-theme="dark"] .alert-warning {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.25);
  color: #fde68a;
}

/* Dropdowns (bootstrap) */
html[data-theme="dark"] .dropdown-menu {
  background: var(--ec-bg-elevated);
  border-color: var(--ec-border);
  color: var(--ec-text);
}
html[data-theme="dark"] .dropdown-item {
  color: var(--ec-text-secondary);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background: var(--ec-bg-muted);
  color: var(--ec-text);
}

/* Badge chips */
html[data-theme="dark"] .badge.bg-secondary {
  background: var(--ec-bg-muted) !important;
  color: var(--ec-text-secondary) !important;
}

/* Scrollbar (webkit) */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--ec-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 999px;
  border: 2px solid var(--ec-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* ---------- Signed-in utility row (above main header; does not shift Cart) ---------- */
.ec-shopper-utility-row {
  border-bottom: 1px solid var(--ec-border, #e2e8f0);
  background: var(--ec-bg-muted, #f1f5f9);
}
.ec-shopper-utility-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-height: 1.75rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.ec-shopper-account-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: min(100%, 22rem);
  color: var(--ec-text-secondary, #334155);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
}
.ec-shopper-account-bar:hover {
  color: var(--ec-text, #0f172a);
  text-decoration: none !important;
}
.ec-shopper-account-bar .fa {
  font-size: 0.85rem;
  line-height: 1;
  color: var(--ec-text-muted, #64748b);
  flex-shrink: 0;
}
.ec-shopper-account-label {
  color: var(--ec-text-muted, #64748b);
  font-weight: 650;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ec-shopper-account-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--ec-text, #0f172a);
}
.ec-shopper-utility-logout {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.1rem 0.15rem;
  margin: 0;
  color: var(--ec-text-muted, #64748b);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
}
.ec-shopper-utility-logout:hover {
  color: var(--ec-text, #0f172a);
}
html[data-theme="dark"] .ec-shopper-utility-row {
  background: #0a101c;
  border-bottom-color: var(--ec-border);
}
html[data-theme="dark"] .ec-shopper-account-bar {
  color: var(--ec-text-secondary);
}
html[data-theme="dark"] .ec-shopper-account-bar:hover {
  color: var(--ec-text);
}
html[data-theme="dark"] .ec-shopper-account-bar .fa {
  color: var(--ec-accent-text);
}
html[data-theme="dark"] .ec-shopper-account-label {
  color: var(--ec-text-muted);
}
html[data-theme="dark"] .ec-shopper-account-email {
  color: var(--ec-text);
}
html[data-theme="dark"] .ec-shopper-utility-logout {
  color: var(--ec-text-muted);
}
html[data-theme="dark"] .ec-shopper-utility-logout:hover {
  color: var(--ec-accent-text);
}
html[data-theme="dark"] .ec-shopper-account-drawer {
  background: var(--ec-bg-muted) !important;
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .ec-shopper-account-drawer .bg-white {
  background: var(--ec-bg-elevated) !important;
}

/* ---------- Checkout page (heavy Tailwind light utilities) ---------- */
html[data-theme="dark"] .checkout-page {
  color: var(--ec-text);
  background-color: var(--ec-bg);
}

/* Bare inputs (not .form-control) stay white without these */
html[data-theme="dark"] .checkout-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] .checkout-page textarea,
html[data-theme="dark"] .checkout-page select {
  background-color: var(--ec-input-bg) !important;
  border-color: var(--ec-border-strong) !important;
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .checkout-page input::placeholder,
html[data-theme="dark"] .checkout-page textarea::placeholder {
  color: var(--ec-text-faint) !important;
  opacity: 1;
}
html[data-theme="dark"] .checkout-page input:focus,
html[data-theme="dark"] .checkout-page textarea:focus,
html[data-theme="dark"] .checkout-page select:focus {
  border-color: var(--ec-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--ec-ring);
}
html[data-theme="dark"] .checkout-page .ec-cardz3n-field {
  background: var(--ec-input-bg) !important;
  border-color: var(--ec-border-strong) !important;
  color: var(--ec-text) !important;
}

/* Section cards + payment option panels */
html[data-theme="dark"] .checkout-page .bg-white {
  background-color: var(--ec-bg-elevated) !important;
}
html[data-theme="dark"] .checkout-page .border-t,
html[data-theme="dark"] .checkout-page .border-b {
  border-color: var(--ec-border) !important;
}
html[data-theme="dark"] .checkout-page .ec-fulfillment-option:hover,
html[data-theme="dark"] .checkout-page .hover\:border-slate-400:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
}
html[data-theme="dark"] .checkout-page .hover\:bg-slate-50:hover {
  background-color: var(--ec-bg-muted) !important;
}
html[data-theme="dark"] .checkout-page .hover\:bg-yellow-50:hover {
  background-color: rgba(56, 189, 248, 0.1) !important;
}
html[data-theme="dark"] .checkout-page .hover\:bg-amber-100:hover {
  background-color: rgba(251, 191, 36, 0.12) !important;
}
html[data-theme="dark"] .checkout-page button.bg-slate-900:hover,
html[data-theme="dark"] .checkout-page .hover\:bg-black:hover {
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%) !important;
  color: #041018 !important;
}
html[data-theme="dark"] .checkout-page .hover\:bg-emerald-800:hover {
  background-color: #047857 !important;
}

/* Soft status / callout panels used throughout checkout */
html[data-theme="dark"] .checkout-page .bg-blue-50 {
  background: rgba(56, 189, 248, 0.1) !important;
}
html[data-theme="dark"] .checkout-page .border-blue-200 {
  border-color: rgba(56, 189, 248, 0.28) !important;
}
html[data-theme="dark"] .checkout-page .text-blue-950,
html[data-theme="dark"] .checkout-page .text-blue-900,
html[data-theme="dark"] .checkout-page .text-blue-800 {
  color: #bae6fd !important;
}
html[data-theme="dark"] .checkout-page .text-blue-700 {
  color: #7dd3fc !important;
}
html[data-theme="dark"] .checkout-page .hover\:text-blue-900:hover {
  color: #e0f2fe !important;
}

html[data-theme="dark"] .checkout-page .bg-emerald-50,
html[data-theme="dark"] .checkout-page .bg-emerald-50\/40 {
  background: rgba(52, 211, 153, 0.1) !important;
}
html[data-theme="dark"] .checkout-page .bg-emerald-100 {
  background: rgba(52, 211, 153, 0.16) !important;
}
html[data-theme="dark"] .checkout-page .border-emerald-100,
html[data-theme="dark"] .checkout-page .border-emerald-200 {
  border-color: rgba(52, 211, 153, 0.28) !important;
}
html[data-theme="dark"] .checkout-page .text-emerald-950,
html[data-theme="dark"] .checkout-page .text-emerald-900,
html[data-theme="dark"] .checkout-page .text-emerald-800 {
  color: #a7f3d0 !important;
}
html[data-theme="dark"] .checkout-page .ring-emerald-400 {
  --tw-ring-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35) !important;
}

html[data-theme="dark"] .checkout-page .bg-amber-50 {
  background: rgba(251, 191, 36, 0.1) !important;
}
html[data-theme="dark"] .checkout-page .bg-amber-100 {
  background: rgba(251, 191, 36, 0.14) !important;
}
html[data-theme="dark"] .checkout-page .bg-white\/70 {
  background: rgba(15, 22, 40, 0.75) !important;
}
html[data-theme="dark"] .checkout-page .border-amber-100,
html[data-theme="dark"] .checkout-page .border-amber-200,
html[data-theme="dark"] .checkout-page .border-amber-300 {
  border-color: rgba(251, 191, 36, 0.28) !important;
}
html[data-theme="dark"] .checkout-page .text-amber-950,
html[data-theme="dark"] .checkout-page .text-amber-900,
html[data-theme="dark"] .checkout-page .text-amber-800 {
  color: #fde68a !important;
}

html[data-theme="dark"] .checkout-page .bg-teal-50 {
  background: rgba(45, 212, 191, 0.1) !important;
}
html[data-theme="dark"] .checkout-page .bg-teal-100 {
  background: rgba(45, 212, 191, 0.14) !important;
}
html[data-theme="dark"] .checkout-page .border-teal-200 {
  border-color: rgba(45, 212, 191, 0.28) !important;
}
html[data-theme="dark"] .checkout-page .text-teal-950,
html[data-theme="dark"] .checkout-page .text-teal-900 {
  color: #99f6e4 !important;
}
html[data-theme="dark"] .checkout-page .ring-teal-300 {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.35) !important;
}

html[data-theme="dark"] .checkout-page .bg-red-50 {
  background: rgba(248, 113, 113, 0.12) !important;
}
html[data-theme="dark"] .checkout-page .border-red-200 {
  border-color: rgba(248, 113, 113, 0.3) !important;
}
html[data-theme="dark"] .checkout-page .text-red-700,
html[data-theme="dark"] .checkout-page .text-red-600 {
  color: #fecaca !important;
}

/* Secondary outline pay buttons */
html[data-theme="dark"] .checkout-page .border-slate-300 {
  border-color: var(--ec-border-strong) !important;
}
html[data-theme="dark"] .checkout-page #ec-pay-wire-ach-btn,
html[data-theme="dark"] .checkout-page #ec-pay-zelle-btn,
html[data-theme="dark"] .checkout-page #ec-pay-cash-btn,
html[data-theme="dark"] .checkout-page #ec-paypal-panel a {
  background: var(--ec-bg-muted);
  color: var(--ec-text);
  border-color: var(--ec-border-strong) !important;
}
html[data-theme="dark"] .checkout-page #ec-pay-wire-ach-btn:hover,
html[data-theme="dark"] .checkout-page #ec-pay-zelle-btn:hover,
html[data-theme="dark"] .checkout-page #ec-pay-cash-btn:hover,
html[data-theme="dark"] .checkout-page #ec-paypal-panel a:hover {
  background: #1a2438 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

/* Details/summary disclosure */
html[data-theme="dark"] .checkout-page summary {
  color: var(--ec-text-secondary) !important;
}
html[data-theme="dark"] .checkout-page label {
  color: var(--ec-text);
}

/* Bootstrap text-dark inside checkout modals */
html[data-theme="dark"] .checkout-page .text-dark,
html[data-theme="dark"] .modal .text-dark {
  color: var(--ec-text) !important;
}
html[data-theme="dark"] .checkout-page .modal .text-muted,
html[data-theme="dark"] .modal .text-muted {
  color: var(--ec-text-muted) !important;
}
html[data-theme="dark"] .modal code {
  background: var(--ec-bg-muted);
  color: var(--ec-accent-text);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}
html[data-theme="dark"] .modal .bg-amber-50 {
  background: rgba(251, 191, 36, 0.1) !important;
}
html[data-theme="dark"] .modal .border-amber-200 {
  border-color: rgba(251, 191, 36, 0.28) !important;
}
html[data-theme="dark"] .modal .text-amber-950 {
  color: #fde68a !important;
}

/* Business hours block injected on pickup panel */
html[data-theme="dark"] .checkout-page .ec-business-hours,
html[data-theme="dark"] #ec-pickup-panel .text-muted {
  color: var(--ec-text-muted) !important;
}