/* ============================================================
   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%; }

/* Responsive columns get their width ONLY at their breakpoint, and .row is a
   flex container — so below that breakpoint a .col-md-* had width:auto and sized
   to its content instead of filling the row. Two cards meant to stack ended up
   shrink-wrapped and out of line with everything else on the page.
   Bootstrap's own grid defaults these to full width; this reimplementation
   never did. 92 uses across 22 files were affected, so this is the fix for all
   of them rather than per-page patches.
   Scoped BELOW the breakpoint deliberately: `.row > [class*="col-md-"]` is
   (0,2,0) and would otherwise outrank `.col-md-6` (0,1,0) and flatten the
   desktop grid to one column. */
@media (max-width: 767.98px) {
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] { 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; }
    /* ── Mobile menu ───────────────────────────────────────────────────
       Was a single centred column with 12px/18px padding per row, so eleven
       links filled the whole screen and the account items sat below the fold.
       Now a two-up grid: roughly half the height, everything reachable
       without scrolling, and left-aligned so the eye tracks one edge. */
    .main-nav {
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;
        padding: 8px 12px 12px;
        border-top: 1px solid var(--border-color);
    }
    .main-nav.--open { display: grid; }
    .main-nav__link::after { display: none; }
    .main-nav__mobile-only { display: block; }
    .main-nav__item { min-width: 0; }
    .main-nav__link {
        display: flex; align-items: center; justify-content: space-between;
        padding: 11px 12px; border-bottom: none; border-radius: 8px;
        text-align: left; font-size: 0.92rem;
        /* 44px min target — below that, taps miss. */
        min-height: 44px;
    }
    .main-nav__link:active { background: color-mix(in srgb, var(--accent-gold) 12%, transparent); }

    /* An open dropdown takes the full width so its links are readable and
       tappable rather than squeezed into half a screen. */
    .main-nav__item--dropdown { grid-column: auto; }
    .main-nav__item--dropdown:has(.mega-menu:not([style*="display: none"])) { grid-column: 1 / -1; }
    .main-nav__dropdown, .mega-menu {
        position: static; box-shadow: none; border: none;
        background: var(--bg-secondary); border-radius: 8px;
        padding: 8px 10px; margin: 2px 0 6px;
        display: block; width: auto; min-width: 0;
        grid-template-columns: 1fr;
    }
    .mega-menu a, .main-nav__dropdown a {
        display: block; padding: 10px 8px; min-height: 40px;
        font-size: 0.88rem; border-radius: 6px;
    }
    .mega-menu a:active { background: color-mix(in srgb, var(--accent-gold) 12%, transparent); }
    .mega-menu__section-title { margin-top: 6px; font-size: 0.68rem; }

    /* The old inline list is replaced by the full-screen drawer below. */
    .main-nav, .main-nav.--open { display: none !important; }
    .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; }

/* ── Product cards on phones ──────────────────────────────────────────
   A 2-up grid on a ~390px screen leaves roughly 85px per price cell, and
   a value like $4,169.25 at 0.98rem simply doesn't fit — it was being
   clipped mid-number, which on a pricing page is worse than useless.
   Shrink the type, allow the digits to scale down, and never let a value
   overflow its cell. */
@media (max-width: 560px) {
    .pc-bs { gap: 5px; }
    .pc-bs__cell { padding: 6px 3px; min-width: 0; }
    /* Never ellipsis a price. "$4,1…" is not a smaller price, it's an unknown
       one, and this is the number the customer is deciding on. Scale the type
       to the viewport instead so the whole figure always fits: ~10px on a
       320px phone, ~13.8px by the time the 2-up grid gives way. Nowrap keeps
       it from breaking mid-number. */
    .pc-bs__val {
        font-size: clamp(0.62rem, 3.1vw, 0.86rem);
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
    }
    .pc-bs__lbl { font-size: 0.54rem; }
    /* Long stat rows (Premium "+$126.77 (+3.1%)") get their own squeeze so
       the label never collides with the value. When something has to give it
       is the label — "Premiu…  +$126.77 (+3.1%)" still tells you everything,
       whereas the clipped number this used to produce told you nothing. */
    .pc-stats { font-size: 0.64rem; }
    .pc-stat { gap: 6px; }
    .pc-stat__k { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .pc-stat__v { flex: 0 0 auto; }
}
/* Very narrow phones: stack Buy/Sell rather than shrink the figures further.
   Two cells across a ~135px card leaves about 50px each, which is where a
   four-figure gold price stops being legible. Stacked, each price gets the
   card's full width and can go back up to a comfortable size. */
@media (max-width: 400px) {
    .pc-bs { grid-template-columns: 1fr; }
    .pc-bs__val { font-size: 0.9rem; }
    .pc-bs__cell { flex-direction: row; justify-content: space-between; padding: 5px 8px; }
    .pc-bs__lbl { font-size: 0.58rem; }
}
[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(min(260px, 100%), 1fr)); gap: 20px; }
/* Two columns on every phone, not "two if they happen to fit".
   auto-fit with a 150px floor drops to a single column as soon as the usable
   width falls under ~312px, which is most phones once container padding is
   taken off — so narrower handsets were getting one product per row.
   repeat(2, minmax(0, 1fr)) fixes the count and lets the tracks shrink;
   minmax(0, …) rather than 1fr alone because a grid item's default minimum is
   its content, which would otherwise push the second column off-screen. */
@media (max-width: 768px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 380px) { .shop-grid { gap: 9px; } }

/* 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) {
    /* Simplified filters on phones. The row was five stacked full-width
       controls — roughly 400px of chrome before a single product — and two of
       them were duplicates: the metal select repeats the chips immediately
       above it, and the search box repeats the header's search field. Drop
       those two, sit weight and sort side by side, and the whole block is one
       row of chips plus one row of controls. */
    .shop-filters {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        align-items: center; padding: 10px 0;
    }
    .shop-filters .form-control, .shop-filters .form-select { width: 100% !important; min-width: 0 !important; }
    .shop-filters__metal, .shop-filters__search { display: none; }
    .shop-filters__count { grid-column: 1 / -1; margin-left: 0; text-align: right; font-size: 0.78rem; }

    /* Counts double the width of every chip, which turned 8 categories into
       four rows. The label is what you're aiming at. */
    .category-pill__n { display: none; }
    .category-pill { font-size: 0.78rem; padding: 7px 13px; }

    /* ── Deposit by Zelle on phones ──────────────────────────────────────
       The submitted-payments row was built for a desktop table: code and
       timestamps competing with an amount, a status pill reading "Received —
       clearing at our bank", and a remove button, all on one line. On a phone
       the pill wrapped into three lines and the amount got squeezed to nothing.

       Stack it instead: identity above, then amount, status and remove on their
       own row where each has space. Same information, no horizontal fight. */
    .zconf-row { flex-wrap: wrap; align-items: flex-start !important; gap: 4px 10px !important; }
    .zconf-row > span:first-child { flex: 1 0 100% !important; }
    .zconf-row > span:not(:first-child),
    .zconf-row > button { align-self: center; }
    /* Amount, badge and × share the second line, pushed left so they read as
       a group rather than drifting to opposite edges. */
    .zconf-row > span:nth-child(2) { margin-right: auto; }

    /* Code, amount and Submit stacked full width. Three controls across a
       390px screen leaves the code field too narrow to read a 12-character
       payment ID back, which is exactly when a typo goes unnoticed. */
    /* Card padding on a phone: 24px each side eats an eighth of the screen. */
    .zdep-card { padding: 16px 14px !important; }
    /* Title and the handle button side by side squeezes the heading to two
       words per line. Stack, with the button full width under it. */
    .zdep-head { flex-direction: column; gap: 10px !important; }
    .zdep-head > button { width: 100%; }

    .zconf-form { flex-direction: column; }
    .zconf-form > input,
    .zconf-form > button { width: 100%; flex: 1 1 auto !important; min-width: 0 !important; }

    /* City / State / ZIP as 2fr 1fr 1fr leaves about 75px for State on a phone,
       which is a text field you can't read what you typed in. City takes the
       full width and the two short fields share the row below. !important
       because the columns are set inline on the element. */
    .csz-row { grid-template-columns: 1fr 1fr !important; }
    .csz-row > :first-child { grid-column: 1 / -1; }
    .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; }
/* A flex/grid child defaults to min-width:auto, which means it refuses to
   shrink below its content — so a 520px table inside one pushes the PAGE wide
   instead of scrolling within its own box. This is the usual cause of
   "the whole page scrolls sideways on mobile". */
.table-scroll { min-width: 0; max-width: 100%; }

/* Nothing should ever scroll the page itself sideways on a phone. Individual
   wide things (tables, tickers) scroll inside their own container. */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    .row > [class*="col-"] { min-width: 0; }
    img, video, canvas, svg, table { max-width: 100%; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* 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; }
}

/* ─── Unified mobile menu ────────────────────────────────────────────────
   Site nav and account nav used to be two separate menus, so on a phone a
   signed-in customer had no route to their orders or holdings without first
   landing on /account. This merges both into one full-screen sheet.
   Hidden entirely on desktop — the existing header nav is untouched there. */
.mdrawer { display: none; }

@media (max-width: 768px) {
    .mdrawer {
        display: flex; flex-direction: column;
        position: fixed; inset: 0; z-index: 10040;
        background: var(--bg-primary);
        /* Slide from the right rather than fade — direction tells the user
           this is a layer over the page, not a new page. */
        transform: translateX(100%);
        transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
        visibility: hidden;
    }
    .mdrawer.is-open { transform: translateX(0); visibility: visible; }

    .mdrawer__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 11px 14px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
        /* Clear the notch / status bar when running installed as a PWA, where
           there is no browser chrome above us. */
        padding-top: calc(11px + env(safe-area-inset-top));
    }
    .mdrawer__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; }
    .mdrawer__close {
        background: none; border: none; color: var(--text-primary);
        font-size: 1.3rem; line-height: 1; cursor: pointer;
        width: 44px; height: 44px; margin: -10px -12px -10px 0;   /* 44px target, no visual bulk */
    }

    .mdrawer__body {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 12px 14px calc(28px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;   /* don't scroll the page behind the sheet */
    }

    /* Identity block — who you are and a way into the account, first. */
    .mdrawer__id {
        display: flex; align-items: center; gap: 12px; text-decoration: none;
        padding: 10px 12px; border-radius: 10px; margin-bottom: 4px;
        background: var(--bg-card); border: 1px solid var(--border-color);
    }
    .mdrawer__avatar {
        width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--accent-gold); color: #1a1a2e; font-weight: 700; font-size: 0.9rem;
    }
    .mdrawer__id-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .mdrawer__id-text strong { color: var(--text-primary); font-size: 0.95rem; }
    .mdrawer__id-text small { color: var(--text-faint); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mdrawer__chev { color: var(--text-faint); font-size: 1.2rem; }

    .mdrawer__signin {
        display: block; text-align: center; text-decoration: none;
        background: var(--gold-shimmer); color: #2c2208; font-weight: 700;
        padding: 13px; border-radius: 10px; margin-bottom: 6px;
    }

    .mdrawer__label {
        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--text-faint); font-weight: 700; margin: 14px 2px 6px;
    }

    /* Collapsible sections. The section headings used to be inert text; they
       are buttons now so a long menu can be folded down to four rows. Full
       row width and 40px tall because a heading-sized tap target on a phone
       is a heading you keep missing. */
    .mdrawer__sec {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; min-height: 40px; margin-top: 10px; padding: 8px 2px;
        background: none; border: 0; border-top: 1px solid var(--border-color);
        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--text-faint); font-weight: 700; font-family: inherit;
        text-align: left; cursor: pointer;
    }
    .mdrawer__sec:first-child { border-top: 0; margin-top: 0; }
    .mdrawer__sec-chev {
        font-size: 1.05rem; line-height: 1; color: var(--text-faint);
        transform: rotate(90deg); transition: transform 0.2s ease;
    }
    .mdrawer__sec-chev.is-open { transform: rotate(-90deg); }

    /* One level down: a metal that opens its own subcategories. Reads as a
       destination rather than a section label, so it's sentence case and the
       same weight as the tiles it sits among. */
    .mdrawer__sub {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; min-height: 42px; margin-top: 6px; padding: 8px 11px;
        background: var(--bg-card); border: 1px solid var(--border-color);
        border-radius: 8px; font-family: inherit; font-size: 0.84rem;
        font-weight: 600; color: var(--text-primary); text-align: left; cursor: pointer;
    }
    .mdrawer__sub[aria-expanded="true"] { border-color: var(--accent-gold); }
    .mdrawer__panel .mdrawer__grid { margin-top: 6px; }

    /* 0fr -> 1fr animates to the content's real height, which max-height
       transitions can only approximate. Where it isn't supported the section
       still collapses and expands, just without the slide. */
    .mdrawer__panel {
        display: grid; grid-template-rows: 0fr;
        transition: grid-template-rows 0.22s ease;
    }
    .mdrawer__panel > * { overflow: hidden; min-height: 0; }
    .mdrawer__panel.is-open { grid-template-rows: 1fr; }
    .mdrawer__panel.is-open > * { padding-bottom: 8px; }

    /* Two-up so the whole menu fits without scrolling on most phones. */
    .mdrawer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .mdrawer__grid a {
        display: flex; align-items: center; min-height: 42px;
        padding: 8px 11px; border-radius: 8px; text-decoration: none;
        background: var(--bg-card); border: 1px solid var(--border-color);
        color: var(--text-primary); font-size: 0.84rem; font-weight: 600;
        line-height: 1.2;
        /* A grid item's default min-width is its content, so one long label
           ("Palladium Spot Price") would widen its column and push the other
           off-screen. These three keep every tile inside its half. */
        min-width: 0; overflow-wrap: anywhere; hyphens: auto;
    }
    .mdrawer__grid a:active { border-color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card)); }

    .mdrawer__cart {
        display: block; text-align: center; text-decoration: none;
        margin-top: 16px; padding: 12px; border-radius: 9px;
        border: 1px solid var(--accent-gold); color: var(--accent-gold); font-weight: 700;
    }

    /* Shows the actual app icon — the thing that will sit on their home screen.
       A button captioned "install" asks for trust; showing what you get earns
       a little of it first. Gold-tinted so it reads as an offer rather than
       another menu row. */
    .mdrawer__install {
        display: flex; align-items: center; gap: 11px;
        width: 100%; margin-top: 12px; padding: 11px 12px; border-radius: 11px;
        background: color-mix(in srgb, var(--accent-gold) 9%, var(--bg-card));
        border: 1px solid color-mix(in srgb, var(--accent-gold) 38%, transparent);
        font-family: inherit; text-align: left; cursor: pointer;
    }
    .mdrawer__install:active { background: color-mix(in srgb, var(--accent-gold) 16%, var(--bg-card)); }
    .mdrawer__install-icon {
        width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    }
    .mdrawer__install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mdrawer__install-text strong { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
    .mdrawer__install-sub { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); line-height: 1.3; }
    .mdrawer__install-cta {
        flex-shrink: 0; padding: 6px 12px; border-radius: 999px;
        background: var(--accent-gold); color: #2c2208;
        font-size: 0.76rem; font-weight: 700;
    }
    /* Walkthrough for the platforms a button can't install on — which is every
       iPhone, since Safari exposes no install API. */
    .mdrawer__guide {
        margin-top: 8px; padding: 12px; border-radius: 9px;
        background: var(--bg-secondary); border: 1px solid var(--border-color);
    }
    .mdrawer__guide > strong { display: block; font-size: 0.82rem; color: var(--text-primary); margin-bottom: 8px; }
    .mdrawer__guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .mdrawer__guide-steps li {
        display: flex; align-items: center; gap: 8px;
        font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary);
    }
    .mdrawer__guide-n {
        flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--accent-gold); color: #2c2208; font-size: 0.66rem; font-weight: 700;
    }
    .mdrawer__guide-ico { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent-gold); }
    .mdrawer__guide-note {
        display: block; margin-top: 9px; padding-top: 9px;
        border-top: 1px solid var(--border-color);
        font-size: 0.72rem; line-height: 1.4; color: var(--text-muted);
    }
}

/* Small phones (SE / mini / Z Flip cover): shave a little more so the longest
   labels stay on one line instead of making every tile in the row two lines tall. */
@media (max-width: 360px) {
    .mdrawer__body { padding-left: 11px; padding-right: 11px; }
    .mdrawer__grid { gap: 5px; }
    .mdrawer__grid a { font-size: 0.79rem; padding: 8px 9px; min-height: 40px; }
    .mdrawer__label { margin-top: 12px; }
}

/* ─── Back to top ────────────────────────────────────────────────────────
   Was inline-styled #1a1a2e (invisible on the dark theme) and parked over
   page content at bottom-right. Now theme-aware, smaller and tucked further
   out of the way on phones, and it respects the iOS home-indicator inset. */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity 0.3s, border-color 0.15s, color 0.15s;
    /* Below the mobile drawer (10040) so it can never sit on top of the menu. */
    z-index: 900;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.back-to-top:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
@media (max-width: 768px) {
    /* Smaller and closer to the corner — on a phone this competes with
       whatever action sits at the bottom of the page. */
    .back-to-top { width: 38px; height: 38px; right: 12px; font-size: 0.95rem; opacity: 0; }
}

/* ─── Condensed header on scroll (mobile) ────────────────────────────────
   The promo bar and the search field are useful on arrival and pure overhead
   once you're reading. Scrolling DOWN collapses both; scrolling UP restores
   them, so search is always one flick away rather than a trip to the top.
   Collapsed via max-height/opacity so it animates and still occupies no space. */
@media (max-width: 768px) {
    .site-header__secondary,
    .site-header .mobile-search {
        overflow: hidden;
        max-height: 60px;
        opacity: 1;
        transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
    }
    .site-header.is-condensed .site-header__secondary,
    .site-header.is-condensed .mobile-search {
        max-height: 0;
        opacity: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-bottom-width: 0 !important;
    }
}
/* Someone who prefers reduced motion gets the space back without the slide. */
@media (prefers-reduced-motion: reduce) {
    .site-header__secondary, .site-header .mobile-search { transition: none; }
}

/* ─── PWA install invite ─────────────────────────────────────────────────
   Sits above the back-to-top button but below the mobile drawer, so it can
   never cover the menu. Above the iOS home indicator. */
.pwa-invite {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9500;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    box-shadow: 0 10px 34px rgba(0,0,0,0.45);
    transform: translateY(140%); opacity: 0;
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
}
.pwa-invite.is-in { transform: translateY(0); opacity: 1; }
.pwa-invite__icon { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }
.pwa-invite__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-invite__text strong { font-size: 0.92rem; color: var(--text-primary); }
.pwa-invite__text span { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.35; }
.pwa-invite__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pwa-invite__go {
    background: var(--gold-shimmer); color: #2c2208; border: none;
    font-family: inherit; font-weight: 700; font-size: 0.84rem;
    padding: 9px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.pwa-invite__no {
    background: none; border: none; color: var(--text-faint);
    font-size: 1rem; cursor: pointer; width: 34px; height: 34px; line-height: 1;
}
.pwa-invite__no:hover { color: var(--text-primary); }
@media (min-width: 769px) { .pwa-invite { left: auto; right: 20px; max-width: 380px; } }