/* ============================================================
   Standard Bullion — Professional Theme
   Modern, full-width, clean design
   ============================================================ */

/* ─── Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ─── CSS Custom Properties (Light Mode) ────────────── */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #555;
    --text-muted: #888;
    --text-faint: #aaa;
    --border-color: #e8e8e8;
    --border-light: #f0f0f0;
    --accent-gold: #c9a84c;
    --accent-gold-hover: #b8963e;
    /* Shimmery metallic gold (matches the hero coin) — reused on gold buttons,
       the search button, and the cart badge for a consistent premium finish. */
    --gold-shimmer: radial-gradient(circle at 32% 26%, #fff7da 0%, #ecc977 38%, #c9a84c 66%, #9a7833 88%, #7d5e22 100%);
    --success: #16a34a;
    --danger: #dc2626;
    --header-bg: #ffffff;
    --header-border: #eee;
    --nav-bg: #ffffff;
    --card-shadow: 0 1px 4px rgba(0,0,0,0.04);
    --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.1);
    --grid-line: #f5f5f5;
    --overlay-bg: rgba(0,0,0,0.45);
    --table-header-bg: #fafafa;
    --table-hover-bg: #fafbfc;
    --badge-bg: #f0f0f0;
    --logo-filter: none;
}

/* ─── Dark Mode ─────────────────────────────────────── */
[data-theme="dark"] {
    --bg-primary: #0f0f1a;
    --bg-secondary: #161625;
    --bg-card: #1a1a2e;
    --bg-input: #1e1e35;
    --text-primary: #e8e8ec;
    --text-secondary: #b0b0bc;
    --text-muted: #8888a0;
    --text-faint: #606078;
    --border-color: #2a2a42;
    --border-light: #222238;
    --accent-gold: #d4a84c;
    --accent-gold-hover: #e0bc60;
    --success: #4ade80;
    --danger: #f87171;
    --header-bg: #12121f;
    --header-border: #1e1e35;
    --nav-bg: #12121f;
    --card-shadow: 0 1px 4px rgba(0,0,0,0.2);
    --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.4);
    --grid-line: #1e1e35;
    --overlay-bg: rgba(0,0,0,0.7);
    --table-header-bg: #161625;
    --table-hover-bg: #1e1e35;
    --badge-bg: #2a2a42;
    --logo-filter: brightness(0) invert(1);
}

/* Dark is the DEFAULT theme, not just a system-preference opt-in.
   `:root:not([data-theme="light"])` outbids the light `:root` block above on
   specificity, so dark applies unless the visitor has explicitly chosen light
   via the toggle. This lives OUTSIDE any media query on purpose: it means the
   site is dark even before the theme script runs, and stays dark for visitors
   on a light-mode OS or with JavaScript disabled — no flash of white. */
:root:not([data-theme="light"]) {
        --bg-primary: #0f0f1a;
        --bg-secondary: #161625;
        --bg-card: #1a1a2e;
        --bg-input: #1e1e35;
        --text-primary: #e8e8ec;
        --text-secondary: #b0b0bc;
        --text-muted: #8888a0;
        --text-faint: #606078;
        --border-color: #2a2a42;
        --border-light: #222238;
        --accent-gold: #d4a84c;
        --accent-gold-hover: #e0bc60;
        --success: #4ade80;
        --danger: #f87171;
        --header-bg: #12121f;
        --header-border: #1e1e35;
        --nav-bg: #12121f;
        --card-shadow: 0 1px 4px rgba(0,0,0,0.2);
        --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.4);
        --grid-line: #1e1e35;
        --overlay-bg: rgba(0,0,0,0.7);
        --table-header-bg: #161625;
        --table-hover-bg: #1e1e35;
        --badge-bg: #2a2a42;
        --logo-filter: brightness(0) invert(1);
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--accent-gold); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 0.95rem; }
ul { list-style: none; }
hr { border: none; border-top: 1px solid var(--border-color); }

/* ─── Fonts ─────────────────────────────────────────── */
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/DMSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/DMSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/DMSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Tiempos Fine'; font-weight: 300; font-style: normal; font-display: swap; src: url('/assets/fonts/TiemposFine-Light.woff2') format('woff2'); }

/* ─── Layout ────────────────────────────────────────── */
.container { max-width: 100%; margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 800px; }
.container--wide { max-width: 1440px; }

.main-content { padding: 32px 0 48px; min-height: 60vh; }

.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > [class*="col-"] { padding: 0 12px; }
.col-6 { width: 50%; } .col-12 { width: 100%; }
@media (min-width: 768px) {
    .col-md-2 { width: 16.66%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33%; }
    .col-md-5 { width: 41.66%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33%; }
    .col-md-8 { width: 66.66%; } .col-md-9 { width: 75%; }
    /* Re-show .d-none.d-md-* elements on desktop (the mobile hide is at L227) */
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}
@media (min-width: 992px) { .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33%; } }

/* ─── Header ────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--header-bg); box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: background 0.3s; }

.site-header__secondary {
    background: #0f0f1a;
    color: #fff;
    font-size: 0.78rem;
    padding: 7px 0;
    letter-spacing: 0.02em;
}
.site-header__secondary a { color: #d4a84c; text-decoration: none; }
.site-header__secondary a:hover { color: #f0c060; }

/* Header content is capped/centered even though page content is full-width,
   so nav items never reach the screen edge and their dropdowns/mega-menus
   stay on-screen instead of being clipped. */
.site-header .container { max-width: 1440px; }

/* ─── Main Navigation ───────────────────────────────── */
.main-nav { display: flex; margin: 0; padding: 0; gap: 0; align-items: center; justify-content: space-between; width: 100%; }
.main-nav__item { position: relative; }
.main-nav__link {
    display: block;
    padding: 14px 18px 12px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    transition: color 0.2s;
    position: relative;
}
/* Gradient accent underline under each top-level menu — metal-themed where it
   applies (Gold/Silver/Platinum/Palladium), gold elsewhere. Subtle by default,
   brightens and fills on hover. */
.main-nav__link::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c9a84c, #f0d27a);
    opacity: 0.5; transform: scaleX(0.5); transform-origin: left center;
    transition: opacity 0.2s, transform 0.2s;
}
.main-nav__link:hover { color: var(--accent-gold); }
.main-nav__link:hover::after { opacity: 1; transform: scaleX(1); }
.main-nav__link[href*="XAU"]::after { background: linear-gradient(90deg, #b8860b, #f4d787); }
.main-nav__link[href*="XAG"]::after { background: linear-gradient(90deg, #8e8e8e, #dfe3e8); }
.main-nav__link[href*="XPT"]::after { background: linear-gradient(90deg, #8fa0ab, #e2e8ec); }
.main-nav__link[href*="XPD"]::after { background: linear-gradient(90deg, #5a6670, #a4b0bc); }

/* Standard dropdown */
.main-nav__dropdown {
    position: absolute; top: 100%; left: 0;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    min-width: 240px; z-index: 1001; padding: 8px 0;
}
.main-nav__dropdown a {
    display: block; padding: 10px 22px;
    font-size: 0.88rem; color: var(--text-secondary); transition: all 0.15s;
}
.main-nav__dropdown a:hover { background: var(--bg-secondary); color: var(--accent-gold); padding-left: 26px; }

/* Mega menu */
.mega-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.14);
    z-index: 1001; padding: 24px 28px;
    display: grid; gap: 20px;
    min-width: 600px;
}
.mega-menu--gold { grid-template-columns: 1fr 1fr 1fr; }
.mega-menu--silver { grid-template-columns: 1fr 1fr 1fr; }
.mega-menu--small { grid-template-columns: 1fr 1fr; min-width: 400px; }
.mega-menu__section-title {
    font-size: 0.7rem; font-weight: 700; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}
.mega-menu a {
    display: block; padding: 5px 0;
    font-size: 0.86rem; color: var(--text-secondary); transition: color 0.15s;
}
.mega-menu a:hover { color: var(--accent-gold); }
.mega-menu__cta {
    display: block; margin-top: 10px; padding: 8px 14px;
    font-size: 0.82rem; font-weight: 600; border-radius: 5px;
    text-align: center; transition: all 0.2s;
}
.mega-menu__cta--gold { background: #faf3e0; color: #c9a84c; }
.mega-menu__cta--gold:hover { background: #c9a84c; color: #fff; }
.mega-menu__cta--silver { background: #f0f0f0; color: #666; }
.mega-menu__cta--silver:hover { background: #8e8e8e; color: #fff; }

.main-nav__mobile-only { display: none; }
.mobile-menu-toggle { display: none; background: none; border: none; padding: 4px; color: var(--text-primary); }

@media (max-width: 768px) {
    .mobile-menu-toggle { display: block; font-size: 1.5rem; }
    .mobile-search { display: block !important; }
    .main-nav { display: none; flex-direction: column; justify-content: flex-start; padding: 8px 0; border-top: 1px solid #eee; }
    .main-nav__link::after { display: none; }
    .main-nav.--open { display: flex; }
    .main-nav__mobile-only { display: block; }
    .main-nav__link { padding: 12px 18px; border-bottom: none; }
    .main-nav__dropdown { position: static; box-shadow: none; border: none; background: var(--bg-secondary); padding-left: 16px; }
    .d-none.d-md-block, .d-none.d-md-flex { display: none !important; }
    .site-header__secondary__prices { display: none !important; }
}

/* ─── Buttons ───────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 22px; font-size: 0.9rem; font-weight: 600;
    border-radius: 6px; border: 1px solid transparent;
    transition: all 0.2s; cursor: pointer; text-decoration: none;
}
.btn.-style-primary { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.btn.-style-primary:hover { background: #2a2a45; }
.btn.-style-primary:disabled { background: #9e9eab; border-color: #9e9eab; cursor: not-allowed; }
.btn.-style-secondary { background: var(--gold-shimmer); color: #2c2208; border-color: #b8963e; font-weight: 700; text-shadow: 0 1px 0 rgba(255,243,196,0.35); }
.btn.-style-secondary:hover { filter: brightness(1.07); }

/* Header account button — gold "Sign In" (out) / subtle name button (in) */
.acct-btn { padding: 8px 18px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: filter 0.15s, border-color 0.15s, color 0.15s; }
.acct-btn--out { background: var(--gold-shimmer); color: #2c2208; text-shadow: 0 1px 0 rgba(255,243,196,0.35); }
.acct-btn--out:hover { filter: brightness(1.07); }
.acct-btn--in { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); font-weight: 600; }
.acct-btn--in:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.btn.-outline { background: transparent; color: #1a1a2e; border-color: #d1d5db; }
.btn.-outline:hover { border-color: #1a1a2e; background: #f9f9fb; }
.btn.-size-lg { padding: 13px 30px; font-size: 1rem; }
.btn.-width-full { width: 100%; }

/* ─── Forms ─────────────────────────────────────────── */
.form-control, .form-select {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--border-color); border-radius: 6px;
    font-size: 0.92rem; color: var(--text-primary); background: var(--bg-input);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus, .form-select:focus {
    outline: none; border-color: #c9a84c;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.form-control::placeholder { color: #aaa; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary); }
textarea.form-control { resize: vertical; min-height: 100px; }

/* ─── Cards ─────────────────────────────────────────── */
.card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: var(--card-shadow);
    transition: background 0.3s, border-color 0.3s;
}

/* ─── Product Cards ─────────────────────────────────── */
.product-card {
    border: 1px solid var(--border-color); border-radius: 10px;
    overflow: hidden; background: var(--bg-card);
    transition: box-shadow 0.25s, transform 0.2s;
    display: flex; flex-direction: column; height: 100%;
}
.product-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-3px); }
.product-card__image {
    display: flex; align-items: center; justify-content: center;
    /* Fixed height (not aspect-ratio) so every card's image box is the same
       height across the board, regardless of card width or image orientation. */
    height: 210px; background: var(--bg-secondary); padding: 16px;
}
.product-card__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-card__body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.product-card__name {
    font-size: 0.85rem; line-height: 1.35; margin-bottom: 8px; min-height: 2.3em;
    color: #333; display: block;
}
.product-card__name:hover { color: #c9a84c; }
.product-card__meta { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 0.72rem; color: var(--text-muted); }
.product-card__metal-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.65rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.03em;
}
.product-card__metal-badge--XAU { background: #c9a84c; }
.product-card__metal-badge--XAG { background: #8e8e8e; }
.product-card__metal-badge--XPT { background: #a0aeb8; color: #333; }
.product-card__metal-badge--XPD { background: #5a6670; }
.product-card__price { font-size: 1.2rem; font-weight: 700; color: #1a1a2e; margin-top: auto; }
.product-card__price-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 12px; }
.product-card__btn {
    width: 100%; padding: 10px; font-size: 0.85rem; font-weight: 600;
    background: var(--text-primary); color: var(--bg-primary); border: none; border-radius: 6px;
    transition: background 0.2s;
}
.product-card__btn:hover { background: var(--text-secondary); }
.ira-badge { display: inline-block; background: #d4edda; color: #155724; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }

/* Product-card market block (Buy/Sell prices + premium/spot/daily/stock),
   replaces the Add-to-Cart button. Shared by shop + homepage featured cards. */
.pc-market { margin-top: auto; }
.pc-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pc-bs__cell { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border: 1px solid; border-radius: 7px; text-decoration: none; transition: background 0.15s, transform 0.1s; }
.pc-bs__cell:hover { transform: translateY(-1px); }
.pc-bs__lbl { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.pc-bs__val { font-size: 0.98rem; font-weight: 700; }
.pc-bs__buy { border-color: rgba(53,176,106,0.4); }
.pc-bs__buy .pc-bs__val { color: #2e9e5b; }
.pc-bs__buy:hover { background: rgba(53,176,106,0.08); }
.pc-bs__sell { border-color: rgba(201,168,76,0.45); }
.pc-bs__sell .pc-bs__val { color: #b8860b; }
.pc-bs__sell:hover { background: rgba(201,168,76,0.10); }
/* One stat per row (full card width) so long dollar values never wrap and
   every row sits at the same height across all cards. */
.pc-stats { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 0.68rem; }
.pc-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; white-space: nowrap; line-height: 1.3; }
.pc-stat__k { color: var(--text-muted); }
.pc-stat__v { font-weight: 600; color: var(--text-primary); }
.pc-stat__v.up { color: #2e9e5b; }
.pc-stat__v.down { color: #dc3545; }
[data-theme="dark"] .ira-badge { background: rgba(74,222,128,0.15); color: var(--success); }

/* ─── Shop ──────────────────────────────────────────── */
.shop-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 24px; }
.shop-filters__count { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); }
.category-pill {
    padding: 7px 18px; font-size: 0.82rem; font-weight: 500;
    border: 1px solid var(--border-color); border-radius: 24px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.category-pill:hover { border-color: var(--text-primary); color: var(--text-primary); }
.category-pill--active { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
@media (max-width: 768px) { .shop-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } }

/* Storage section responsive grids */
@media (max-width: 900px) {
    .stg-intro, .stg-grid-2, .stg-grid-3 { grid-template-columns: 1fr !important; }
    .stg-grid-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) { .stg-grid-4 { grid-template-columns: 1fr !important; } }
.shop-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 32px 0; }

/* ─── Product Detail ────────────────────────────────── */
.product-detail__price-box {
    background: linear-gradient(135deg, #f0f7f0, #e8f5e9); border: 1px solid #c3e6cb;
    border-radius: 10px; padding: 20px; margin-bottom: 20px;
}
.product-detail__wire-price { font-size: 2.2rem; font-weight: 700; color: #155724; }
.product-detail__cc-price { font-size: 1.15rem; color: #856404; }
.product-detail__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; font-size: 0.92rem; }
.product-detail__qty-group { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.product-detail__qty-input { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.product-detail__qty-btn { width: 42px; height: 46px; border: none; background: #f5f5f5; font-size: 1.2rem; transition: background 0.15s; }
.product-detail__qty-btn:hover { background: #eee; }
.product-detail__qty-val { width: 56px; height: 46px; border: none; text-align: center; font-size: 1rem; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

/* ─── Checkout ──────────────────────────────────────── */
.checkout-steps { display: flex; justify-content: center; gap: 28px; margin-bottom: 28px; font-size: 0.92rem; }
.checkout-step { display: flex; align-items: center; gap: 8px; color: #bbb; }
.checkout-step--active { color: #1a1a2e; font-weight: 700; }
.checkout-step--done { color: #28a745; }
.checkout-step__number {
    display: inline-flex; width: 28px; height: 28px; border-radius: 50%;
    align-items: center; justify-content: center; font-size: 0.75rem; background: #ddd; color: #fff; font-weight: 700;
}
.checkout-step--active .checkout-step__number { background: #1a1a2e; }
.checkout-step--done .checkout-step__number { background: #28a745; }

/* ─── Hero ──────────────────────────────────────────── */
.section-hero-page {
    position: relative; overflow: hidden;
    background: #0f0f1a;
    color: #fff; padding: 48px 0; text-align: center;
}
/* Endless, slow left→right panning photo backdrop (dark overlay keeps text legible).
   The ::before is 200% wide with a horizontally-repeating image; translating it by
   -50% loops seamlessly. */
.section-hero-page::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: url('/assets/img/photos/coins-on-chart.jpg');
    background-repeat: repeat-x; background-size: 1200px auto; background-position: 0 center;
    animation: heroPan 130s linear infinite; will-change: background-position;
}
/* Seamless loop: pan exactly one tile width (matches background-size width). */
@keyframes heroPan { from { background-position: 0 center; } to { background-position: -1200px center; } }
.section-hero-page::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(15,15,26,0.88) 0%, rgba(26,26,46,0.80) 50%, rgba(45,45,74,0.74) 100%);
}
.section-hero-page > .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .section-hero-page::before { animation: none; } }
.section-hero-page h1 {
    font-family: 'Tiempos Fine', Georgia, serif;
    font-size: 2.4rem; font-weight: 300; letter-spacing: -0.02em;
}

/* ─── CTA Section ───────────────────────────────────── */
.section-cta {
    background: linear-gradient(135deg, #c9a84c, #e0c068);
    color: #fff; padding: 40px 0; text-align: center;
}
.section-cta h2, .section-cta p { color: #fff; }

/* ─── Footer ────────────────────────────────────────── */
.site-footer { background: #0f0f1a; color: #fff; padding: 48px 0 24px; margin-top: 48px; }
.site-footer a { color: rgba(255,255,255,0.65); transition: color 0.2s; }
.site-footer a:hover { color: #d4a84c; }
.site-footer__legals {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 20px; font-size: 0.8rem; color: rgba(255,255,255,0.4);
}

@media (max-width: 768px) {
    .site-footer > .container > div:first-child { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
    .site-footer > .container > div:first-child > div:first-child { grid-column: 1 / -1; }
}

/* ─── Cart Sidebar ──────────────────────────────────── */
.site-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998; backdrop-filter: blur(2px); }
.cart {
    position: fixed; top: 0; right: -420px; width: 400px; max-width: 92vw;
    height: 100vh; background: var(--bg-card); z-index: 9999;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart.-is-opened { right: 0; }

/* ─── Tables ────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); text-align: left; font-size: 0.88rem; }
.table thead th { font-weight: 600; color: var(--text-muted); background: var(--table-header-bg); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.table-sm th, .table-sm td { padding: 6px 10px; }
.table-hover tbody tr:hover { background: var(--table-hover-bg); }

/* ─── Alerts & Badges ───────────────────────────────── */
.alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert.-style-notice { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.badge { padding: 3px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; }
.bg-success { background: #22c55e !important; color: #fff; }
.bg-danger { background: #ef4444 !important; color: #fff; }
.bg-warning { background: #f59e0b !important; color: #fff; }
.bg-secondary { background: #6b7280 !important; color: #fff; }

/* ─── Nav Tabs ──────────────────────────────────────── */
.nav-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; }
.nav-tabs .nav-link, .nav-tabs a {
    padding: 10px 18px; font-size: 0.88rem; color: var(--text-muted);
    border: none; background: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s;
}
.nav-tabs .nav-link.active, .nav-tabs a.active { color: var(--text-primary); border-bottom-color: var(--accent-gold); font-weight: 600; }

/* ─── Admin ─────────────────────────────────────────── */
.admin-stat-card { border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; text-align: center; background: var(--bg-card); }
.admin-stat-card__value { font-size: 2rem; font-weight: 700; color: var(--text-primary); }
.admin-stat-card__label { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

/* ─── Skeleton Loading ──────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-card { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.skeleton-card__image { aspect-ratio: 1; }
.skeleton-card__body { padding: 14px 16px; }
.skeleton-card__line { height: 14px; margin-bottom: 8px; }
.skeleton-card__line--short { width: 60%; }
.skeleton-card__line--price { height: 20px; width: 40%; margin-top: 12px; }
.skeleton-card__line--btn { height: 38px; width: 100%; margin-top: 12px; border-radius: 6px; }

/* ─── Order Tracking ────────────────────────────────── */
.order-status-timeline { padding: 0; margin: 0; }
.order-status-timeline li {
    display: flex; gap: 12px; padding: 14px 0; border-left: 2px solid #e8e8e8;
    margin-left: 12px; padding-left: 24px; position: relative;
}
.order-status-timeline li::before {
    content: ''; position: absolute; left: -7px; top: 18px;
    width: 12px; height: 12px; border-radius: 50%; background: #e8e8e8; border: 2px solid #fff;
}
.order-status-timeline li.--active::before { background: #22c55e; }
.order-status-timeline li.--current::before { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.2); }

/* ─── Toast Notifications ───────────────────────────── */
.toast-container { position: fixed; top: 80px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: #1a1a2e; color: #fff; padding: 14px 24px;
    border-radius: 8px; font-size: 0.9rem; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2); animation: slideIn 0.3s ease;
}
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─── Spinner ───────────────────────────────────────── */
.spinner-border {
    width: 40px; height: 40px;
    border: 3px solid #e8e8e8; border-top-color: #c9a84c;
    border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Spacing Utilities ─────────────────────────────── */
.-space-mb-none { margin-bottom: 0 !important; }
.-space-mb-xs { margin-bottom: 8px !important; }
.-space-mb-sm { margin-bottom: 16px !important; }
.-space-mt-xs { margin-top: 8px !important; }
.-space-mt-sm { margin-top: 16px !important; }
.-space-py-xs { padding-top: 8px !important; padding-bottom: 8px !important; }
.-space-py-sm { padding-top: 16px !important; padding-bottom: 16px !important; }
.-space-py-lg { padding-top: 48px !important; padding-bottom: 48px !important; }
.-space-px-xs { padding-left: 8px !important; padding-right: 8px !important; }
.-space-pt-xs { padding-top: 8px !important; }
.-space-pb-xs { padding-bottom: 8px !important; }
.-space-pt-lg { padding-top: 48px !important; }
.-space-pb-lg { padding-bottom: 48px !important; }

/* ─── Flexbox Utilities ─────────────────────────────── */
.d-flex { display: flex; }
.d-none { display: none; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.text-muted { color: #9ca3af !important; }
.text-success { color: #16a34a !important; }
.text-danger { color: #dc2626 !important; }
.fw-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase; }
.text-white { color: #fff; }

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 575px) {
    .d-sm-none { display: none !important; }
    .d-none.d-sm-inline { display: none !important; }
}
@media (min-width: 576px) {
    .d-sm-none { display: initial; }
    .d-none.d-sm-inline { display: inline !important; }
}
@media (max-width: 768px) {
    .shop-filters { flex-direction: column; align-items: stretch; }
    .shop-filters .form-control, .shop-filters .form-select { width: 100% !important; min-width: 0 !important; }
    .product-detail__specs { grid-template-columns: 1fr; }
    .checkout-steps { flex-direction: column; align-items: flex-start; gap: 8px; }
    .container { padding: 0 16px; }
    .section-hero-page h1 { font-size: 1.6rem; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.bg-light { background: var(--bg-secondary); }
.border-bottom { border-bottom: 1px solid var(--border-color); }

/* Alpine: hide elements until x-data initializes (prevents CTA flash) */
[x-cloak] { display: none !important; }

/* Gold-coin avatar — minted-coin look with user initials (or SB logged out) */
.coin-avatar {
    position: relative;
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.01em; color: #5e451a;
    background: radial-gradient(circle at 35% 28%, #fff7da, #ecc977 38%, #c9a84c 66%, #9a7833 86%, #7d5e22 100%);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -2px 5px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(255,243,196,0.4);
}
/* Minted rim ring (kept near the edge so it never overlaps the initials) */
.coin-avatar::before {
    content: ''; position: absolute; inset: 2.5px; border-radius: 50%;
    border: 1px solid rgba(110,82,28,0.45);
    box-shadow: inset 0 0 0 1px rgba(255,243,196,0.4);
    pointer-events: none;
}

/* Cart count badge — gold chip, bold dark number, legible on both themes */
.cart-count {
    background: var(--gold-shimmer); color: #1a1a2e;
    font-size: 0.8rem; font-weight: 800;
    min-width: 21px; height: 21px; padding: 0 6px;
    border-radius: 11px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* Show on mobile only (mirror of .d-none.d-md-block) */
.d-md-none { display: block; }
@media (min-width: 768px) { .d-md-none { display: none !important; } }

/* ─── Responsive grids ──────────────────────────────── */
/* Drop-in replacements for inline `grid-template-columns: repeat(N,1fr)`,
   which media queries can't reach. Collapse cleanly on tablet/phone. */
.auto-grid-2, .auto-grid-3, .auto-grid-4 { display: grid; gap: 20px; }
.auto-grid-2 { grid-template-columns: repeat(2, 1fr); }
.auto-grid-3 { grid-template-columns: repeat(3, 1fr); }
.auto-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
    .auto-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .auto-grid-3, .auto-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .auto-grid-2 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px) {
    .auto-grid-2, .auto-grid-3, .auto-grid-4 { grid-template-columns: 1fr; }
}

/* Wrap wide tables so they scroll horizontally instead of overflowing the page. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 520px; }

/* Fluid heading: shrinks on small screens without a media query. */
.fluid-h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); }

/* ─── Header search ─────────────────────────────────── */
.site-search {
    display: flex; align-items: stretch;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 9px; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.site-search:focus-within {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}
.site-search__input {
    flex: 1; min-width: 0;
    border: none; background: transparent; color: var(--text-primary);
    padding: 9px 14px; font-size: 0.9rem; outline: none;
}
.site-search__input::placeholder { color: var(--text-faint); }
/* Hide the browser's native search "clear" control for a cleaner look */
.site-search__input::-webkit-search-decoration,
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search__btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold-shimmer); color: #1a1a2e;
    border: none; padding: 0 16px; cursor: pointer;
    transition: filter 0.15s;
}
.site-search__btn:hover { filter: brightness(1.07); }
.site-search__btn svg { display: block; }

/* ─── Account: mobile drawer navigation ─────────────── */
/* Desktop: sticky sidebar. Mobile: a hamburger bar opens a slide-in drawer
   so the dashboard content isn't pushed below a long nav list. */
.acct-sidebar-card { position: static; }
.acct-mobile-bar { display: none; }
.acct-drawer { display: none; }
.acct-drawer-backdrop { display: none; }
@media (min-width: 768px) {
    .acct-sidebar-card { position: sticky; top: 88px; }
}
@media (max-width: 767px) {
    .acct-mobile-bar {
        display: flex; align-items: center; gap: 12px;
        background: var(--bg-card); border: 1px solid var(--border-color);
        border-radius: 10px; padding: 11px 14px; margin-bottom: 16px;
        position: sticky; top: 10px; z-index: 30;
        box-shadow: var(--card-shadow);
    }
    .acct-burger {
        display: inline-flex; align-items: center; gap: 11px; flex: 1;
        background: none; border: none; padding: 0; cursor: pointer;
        color: var(--text-primary); font-size: 0.98rem; font-weight: 700; text-align: left;
    }
    .acct-burger svg { flex-shrink: 0; color: var(--accent-gold); }
    .acct-drawer-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1000;
        background: rgba(0,0,0,0.55);
    }
    .acct-drawer {
        display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001;
        width: 300px; max-width: 86vw;
        background: var(--bg-card); border-right: 1px solid var(--border-color);
        box-shadow: 4px 0 28px rgba(0,0,0,0.4);
        overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px;
        transform: translateX(-105%); visibility: hidden;
        transition: transform 0.26s ease, visibility 0.26s;
    }
    .acct-drawer.-open { transform: translateX(0); visibility: visible; }
}

/* ─── Dark Mode Overrides ───────────────────────────── */
/* Logo swap — show inverted logo in dark mode */
.logo-dark { display: none !important; }
.logo-light { display: block !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }
/* Dark is the default, so the inverted logo must be too — not gated on the
   visitor's OS preference, or a light-mode OS would show the dark-on-dark logo. */
:root:not([data-theme="light"]) .logo-light { display: none !important; }
:root:not([data-theme="light"]) .logo-dark { display: block !important; }

/* Nav border */
[data-theme="dark"] nav { border-bottom-color: var(--header-border) !important; }

/* Main content area for pages with inline styles */
.main-content { background: var(--bg-primary); }

/* Product card name */
.product-card__name { color: var(--text-primary); }
.product-card__price { color: var(--text-primary); }

/* Skeleton handled by CSS variables above */

/* Theme toggle button — SVG-icon based (no emoji) */
.theme-toggle {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--accent-gold); background: rgba(201,168,76,0.10); }

/* ─── Dark Mode — Inline Style Overrides ──────────── */
/* These override hardcoded inline colors on nav + product detail */

/* Footer already uses logo-invert.png — no filter needed */

/* Nav bar backgrounds & borders */
[data-theme="dark"] .site-header nav { background: var(--nav-bg) !important; border-bottom-color: var(--header-border) !important; }
[data-theme="dark"] .site-header > div:nth-child(2) { border-bottom-color: var(--header-border) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header nav { background: var(--nav-bg) !important; border-bottom-color: var(--header-border) !important; }
    :root:not([data-theme="light"]) .site-header > div:nth-child(2) { border-bottom-color: var(--header-border) !important; }
}

/* Search bar */
[data-theme="dark"] .site-header form { border-color: var(--border-color) !important; }
[data-theme="dark"] .site-header form input[type="search"] { background: var(--bg-input) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .site-header form button[type="submit"] { background: var(--accent-gold) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header form { border-color: var(--border-color) !important; }
    :root:not([data-theme="light"]) .site-header form input[type="search"] { background: var(--bg-input) !important; color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) .site-header form button[type="submit"] { background: var(--accent-gold) !important; }
}

/* Search dropdown */
[data-theme="dark"] .site-header [x-show*="searchBar"] > div[x-show] { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .site-header [x-show*="searchBar"] a { color: var(--text-primary) !important; border-bottom-color: var(--border-light) !important; }
[data-theme="dark"] .site-header [x-show*="searchBar"] img { background: var(--bg-secondary) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header [x-show*="searchBar"] > div[x-show] { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
    :root:not([data-theme="light"]) .site-header [x-show*="searchBar"] a { color: var(--text-primary) !important; border-bottom-color: var(--border-light) !important; }
    :root:not([data-theme="light"]) .site-header [x-show*="searchBar"] img { background: var(--bg-secondary) !important; }
}

/* Header action icons (Account, Cart) */
[data-theme="dark"] .site-header a[href="/account"],
[data-theme="dark"] .site-header a[href="/cart"] { color: var(--text-primary) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header a[href="/account"],
    :root:not([data-theme="light"]) .site-header a[href="/cart"] { color: var(--text-primary) !important; }
}

/* Mega menu spot price boxes */
[data-theme="dark"] .mega-menu div[style*="background: #faf6ee"],
[data-theme="dark"] .mega-menu div[style*="background: #f5f5f5"] { background: var(--bg-secondary) !important; }
[data-theme="dark"] .mega-menu div[style*="border-top: 1px solid #f0f0f0"] { border-top-color: var(--border-light) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mega-menu div[style*="background: #faf6ee"],
    :root:not([data-theme="light"]) .mega-menu div[style*="background: #f5f5f5"] { background: var(--bg-secondary) !important; }
}

/* ─── Product Detail Dark Mode ─────────────────────── */
/* Image container */
[data-theme="dark"] [x-data="productDetail()"] div[style*="background: #f8f8f8"] { background: var(--bg-secondary) !important; }

/* Breadcrumb */
[data-theme="dark"] [x-data="productDetail()"] nav a[href="/shop"],
[data-theme="dark"] [x-data="productDetail()"] nav span { color: var(--text-muted) !important; }
[data-theme="dark"] [x-data="productDetail()"] nav span:last-child { color: var(--text-primary) !important; }

/* Price boxes */
[data-theme="dark"] [x-data="productDetail()"] div[style*="background: linear-gradient(135deg, #f0f7f0"] {
    background: linear-gradient(135deg, rgba(22,163,74,0.1), rgba(22,163,74,0.05)) !important;
    border-color: rgba(22,163,74,0.25) !important;
}
[data-theme="dark"] [x-data="productDetail()"] div[style*="background: linear-gradient(135deg, #fff8e1"] {
    background: linear-gradient(135deg, rgba(184,134,11,0.1), rgba(184,134,11,0.05)) !important;
    border-color: rgba(184,134,11,0.25) !important;
}
[data-theme="dark"] [x-data="productDetail()"] div[style*="background: #f8f8f8; border: 1px solid #e8e8e8"] {
    background: var(--bg-secondary) !important; border-color: var(--border-color) !important;
}

/* Price labels & values */
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #155724"] { color: var(--success) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #b8860b"] { color: #d4a84c !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #856404"] { color: #d4a84c !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="font-size: 0.72rem; color: #666"],
[data-theme="dark"] [x-data="productDetail()"] span[style*="color: #666"],
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #666"] { color: var(--text-muted) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #888"],
[data-theme="dark"] [x-data="productDetail()"] span[style*="color: #888"] { color: var(--text-muted) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #aaa"],
[data-theme="dark"] [x-data="productDetail()"] span[style*="color: #aaa"] { color: var(--text-faint) !important; }
[data-theme="dark"] [x-data="productDetail()"] span[style*="color: #333"],
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #333"] { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] span[style*="color: #ccc"] { color: var(--text-faint) !important; }
[data-theme="dark"] [x-data="productDetail()"] span[style*="color: #999"] { color: var(--text-faint) !important; }

/* Quantity input & buttons */
[data-theme="dark"] [x-data="productDetail()"] div[style*="border: 1px solid #ddd; border-radius: 6px"] { border-color: var(--border-color) !important; }
[data-theme="dark"] [x-data="productDetail()"] button[style*="background: #f8f8f8"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] input[type="number"] { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }

/* Thumbnail buttons */
[data-theme="dark"] [x-data="productDetail()"] button[style*="background: #f8f8f8"] { background: var(--bg-secondary) !important; }

/* Pricing table */
[data-theme="dark"] [x-data="productDetail()"] thead[style*="background: #f8f9fa"] { background: var(--table-header-bg) !important; }
[data-theme="dark"] [x-data="productDetail()"] tr[style*="color: #856404"] { color: #d4a84c !important; }

/* Info tab cards — description, investing, pricing, FAQ */
[data-theme="dark"] [x-data="productDetail()"] .card {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [x-data="productDetail()"] .card p { color: var(--text-secondary) !important; }
[data-theme="dark"] [x-data="productDetail()"] .card li { color: var(--text-secondary) !important; }
[data-theme="dark"] [x-data="productDetail()"] .card a { color: var(--accent-gold) !important; }
[data-theme="dark"] [x-data="productDetail()"] .card strong { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #444"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="color: #555"] { color: var(--text-secondary) !important; }

/* FAQ section */
[data-theme="dark"] [x-data="productDetail()"] div[style*="border-bottom: 1px solid #eee"] { border-bottom-color: var(--border-light) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[style*="border-top: 1px solid #eee"] { border-top-color: var(--border-light) !important; }
[data-theme="dark"] [x-data="productDetail()"] h3 { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] strong[style*="color: #333"] { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] button[style*="background: none"] { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[x-html] { color: var(--text-secondary) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[x-html] strong { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] div[x-html] a { color: var(--accent-gold) !important; }

/* Why Invest tab headings */
[data-theme="dark"] [x-data="productDetail()"] h3[style*="font-size: 1.05rem"] { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data="productDetail()"] h4 { color: var(--text-primary) !important; }

/* Related product badges */
[data-theme="dark"] .product-card__metal-badge--XPT { color: #fff !important; }

/* Auto dark mode versions */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="background: #f8f8f8"] { background: var(--bg-secondary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] nav a[href="/shop"],
    :root:not([data-theme="light"]) [x-data="productDetail()"] nav span { color: var(--text-muted) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] nav span:last-child { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="background: linear-gradient(135deg, #f0f7f0"] {
        background: linear-gradient(135deg, rgba(22,163,74,0.1), rgba(22,163,74,0.05)) !important;
        border-color: rgba(22,163,74,0.25) !important;
    }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="background: linear-gradient(135deg, #fff8e1"] {
        background: linear-gradient(135deg, rgba(184,134,11,0.1), rgba(184,134,11,0.05)) !important;
        border-color: rgba(184,134,11,0.25) !important;
    }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="background: #f8f8f8; border: 1px solid #e8e8e8"] {
        background: var(--bg-secondary) !important; border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #155724"] { color: var(--success) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #b8860b"] { color: #d4a84c !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #856404"] { color: #d4a84c !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="font-size: 0.72rem; color: #666"],
    :root:not([data-theme="light"]) [x-data="productDetail()"] span[style*="color: #666"],
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #666"] { color: var(--text-muted) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #888"],
    :root:not([data-theme="light"]) [x-data="productDetail()"] span[style*="color: #888"] { color: var(--text-muted) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #aaa"],
    :root:not([data-theme="light"]) [x-data="productDetail()"] span[style*="color: #aaa"] { color: var(--text-faint) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] span[style*="color: #333"],
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #333"] { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] span[style*="color: #ccc"] { color: var(--text-faint) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] span[style*="color: #999"] { color: var(--text-faint) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="border: 1px solid #ddd; border-radius: 6px"] { border-color: var(--border-color) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] button[style*="background: #f8f8f8"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] input[type="number"] { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] thead[style*="background: #f8f9fa"] { background: var(--table-header-bg) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] tr[style*="color: #856404"] { color: #d4a84c !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] .card {
        background: var(--bg-card) !important;
        color: var(--text-secondary) !important;
    }
    :root:not([data-theme="light"]) [x-data="productDetail()"] .card p { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] .card li { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] .card a { color: var(--accent-gold) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] .card strong { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #444"] { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="color: #555"] { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="border-bottom: 1px solid #eee"] { border-bottom-color: var(--border-light) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[style*="border-top: 1px solid #eee"] { border-top-color: var(--border-light) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] h3 { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] strong[style*="color: #333"] { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] button[style*="background: none"] { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[x-html] { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[x-html] strong { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] div[x-html] a { color: var(--accent-gold) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] h3[style*="font-size: 1.05rem"] { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data="productDetail()"] h4 { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) .product-card__metal-badge--XPT { color: #fff !important; }
}

/* ─── Shop Page Dark Mode ──────────────────────────── */
/* Product meta description in shop grid */
[data-theme="dark"] .shop-grid div[style*="color: #888"] { color: var(--text-muted) !important; }
[data-theme="dark"] .main-content p[style*="color: #666"] { color: var(--text-muted) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .shop-grid div[style*="color: #888"] { color: var(--text-muted) !important; }
    :root:not([data-theme="light"]) .main-content p[style*="color: #666"] { color: var(--text-muted) !important; }
}

/* ─── Aureus Collection Cards (category pages) ─────── */
/* These override Aureus theme CSS loaded from /themes/ */
[data-theme="dark"] .card-collection {
    background: var(--bg-card) !important; border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .card-collection__title { color: var(--text-primary) !important; }
[data-theme="dark"] .card-collection__description { color: var(--text-secondary) !important; }
[data-theme="dark"] .card-collection .icon { color: var(--accent-gold) !important; }
[data-theme="dark"] .card-collection .stretched-link { color: var(--text-primary) !important; }
[data-theme="dark"] .card-collection__thumbnail { background: var(--bg-secondary) !important; }
[data-theme="dark"] .collections-grid { color: var(--text-primary) !important; }

[data-theme="dark"] .heading-block-title { color: var(--text-primary) !important; }
[data-theme="dark"] .heading-block .text-formatted,
[data-theme="dark"] .heading-block .text-formatted p { color: var(--text-secondary) !important; }
[data-theme="dark"] .heading-block .text-formatted a { color: var(--accent-gold) !important; }

[data-theme="dark"] .fs-md { color: var(--text-secondary) !important; }
[data-theme="dark"] .fs-md a { color: var(--accent-gold) !important; }
[data-theme="dark"] .fs-4 { color: var(--text-primary) !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card-collection {
        background: var(--bg-card) !important; border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .card-collection__title { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) .card-collection__description { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) .card-collection .icon { color: var(--accent-gold) !important; }
    :root:not([data-theme="light"]) .card-collection .stretched-link { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) .card-collection__thumbnail { background: var(--bg-secondary) !important; }
    :root:not([data-theme="light"]) .collections-grid { color: var(--text-primary) !important; }

    :root:not([data-theme="light"]) .heading-block-title { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) .heading-block .text-formatted,
    :root:not([data-theme="light"]) .heading-block .text-formatted p { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) .heading-block .text-formatted a { color: var(--accent-gold) !important; }

    :root:not([data-theme="light"]) .fs-md { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) .fs-md a { color: var(--accent-gold) !important; }
    :root:not([data-theme="light"]) .fs-4 { color: var(--text-primary) !important; }
}

/* ─── Spot Price Pages Dark Mode ────────────────────── */
/* Other metals sidebar links */
[data-theme="dark"] [x-data*="spotPricePage"] a[style*="color: #333"] { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data*="spotPricePage"] a[style*="border-bottom: 1px solid #f0f0f0"] { border-bottom-color: var(--border-light) !important; }
/* SEO content paragraphs */
[data-theme="dark"] [x-data*="spotPricePage"] p[style*="color: #555"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [x-data*="spotPricePage"] p[style*="color: #666"] { color: var(--text-muted) !important; }
/* Sidebar headings & text */
[data-theme="dark"] [x-data*="spotPricePage"] h2 { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data*="spotPricePage"] h3 { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data*="spotPricePage"] .card { background: var(--bg-card) !important; color: var(--text-primary) !important; }
[data-theme="dark"] [x-data*="spotPricePage"] .card a { color: var(--text-primary) !important; }
[data-theme="dark"] [x-data*="spotPricePage"] .card a:hover { color: var(--accent-gold) !important; }
[data-theme="dark"] [x-data*="spotPricePage"] .card a.btn { color: #fff !important; }
[data-theme="dark"] [x-data*="spotPricePage"] .card a.btn.-outline { color: var(--text-primary) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] a[style*="color: #333"] { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] a[style*="border-bottom: 1px solid #f0f0f0"] { border-bottom-color: var(--border-light) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] p[style*="color: #555"] { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] p[style*="color: #666"] { color: var(--text-muted) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] h2 { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] h3 { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] .card { background: var(--bg-card) !important; color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] .card a { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] .card a:hover { color: var(--accent-gold) !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] .card a.btn { color: #fff !important; }
    :root:not([data-theme="light"]) [x-data*="spotPricePage"] .card a.btn.-outline { color: var(--text-primary) !important; }
}

/* ─── FAQ Page Dark Mode ───────────────────────────── */
[data-theme="dark"] .faq { color: var(--text-secondary) !important; }
[data-theme="dark"] .faq-info { color: var(--text-secondary) !important; border-color: var(--accent-gold) !important; }
[data-theme="dark"] .faq-info h3 { color: var(--text-primary) !important; }
[data-theme="dark"] .faq .display-3.text-primary { color: var(--accent-gold) !important; }
[data-theme="dark"] .faq a { color: var(--accent-gold) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .faq { color: var(--text-secondary) !important; }
    :root:not([data-theme="light"]) .faq-info { color: var(--text-secondary) !important; border-color: var(--accent-gold) !important; }
    :root:not([data-theme="light"]) .faq-info h3 { color: var(--text-primary) !important; }
    :root:not([data-theme="light"]) .faq .display-3.text-primary { color: var(--accent-gold) !important; }
    :root:not([data-theme="light"]) .faq a { color: var(--accent-gold) !important; }
}

/* ─── Global Dark Mode — Buttons ───────────────────── */
[data-theme="dark"] .btn.-style-primary { background: var(--accent-gold); border-color: var(--accent-gold); color: #fff; }
[data-theme="dark"] .btn.-style-primary:hover { background: var(--accent-gold-hover); border-color: var(--accent-gold-hover); }
[data-theme="dark"] .btn.-outline { color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .btn.-outline:hover { border-color: var(--text-primary); background: var(--bg-secondary); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn.-style-primary { background: var(--accent-gold); border-color: var(--accent-gold); color: #fff; }
    :root:not([data-theme="light"]) .btn.-style-primary:hover { background: var(--accent-gold-hover); border-color: var(--accent-gold-hover); }
    :root:not([data-theme="light"]) .btn.-outline { color: var(--text-primary); border-color: var(--border-color); }
    :root:not([data-theme="light"]) .btn.-outline:hover { border-color: var(--text-primary); background: var(--bg-secondary); }
}

/* ─── Global Dark Mode — Alerts ────────────────────── */
[data-theme="dark"] .alert-danger { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); color: var(--danger); }
[data-theme="dark"] .alert.-style-notice { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #f59e0b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-danger { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); color: var(--danger); }
    :root:not([data-theme="light"]) .alert.-style-notice { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #f59e0b; }
}