/* ==========================================================================
   SOVEREIGN — dark obsidian & gold reskin of theme-4
   Design system: .claude/design-system/ (Aurum)
   ========================================================================== */

:root {
    /* ---- Obsidian neutrals ---------------------------------------------- */
    --ink-900: #070606;
    --ink-850: #0b0a09;
    --ink-800: #121110;
    --ink-750: #171514;
    --ink-700: #1e1b18;
    --ink-600: #2a2622;
    --ink-500: #3a342c;

    /* ---- Gold ramp ------------------------------------------------------ */
    --gold-900: #4a3413;
    --gold-800: #6e4e1b;
    --gold-700: #8a6320;
    --gold-600: #a97c33;
    --gold-500: #c29a52;
    --gold-400: #d8b683;
    --gold-300: #e7cfa6;
    --gold-200: #f2e1c2;
    --gold-100: #f8efdc;

    /* ---- Warm off-whites ------------------------------------------------ */
    --parchment: #efe6d6;
    --parchment-dim: #c9bca6;
    --parchment-faint: #8e8474;

    /* ---- Semantic surfaces / text / lines ------------------------------- */
    --surface-card: var(--ink-800);
    --surface-inset: #0f0e0d;
    --surface-raised: var(--ink-750);

    --text-display: var(--gold-400);
    --text-heading: var(--parchment);
    --text-body: rgb(from var(--parchment) calc(r + 10) calc(g + 10) calc(b + 10)), #f9f0e0;
    --text-muted: var(--parchment-dim);
    --text-on-gold: #241a09;
    --text-on-champagne: #1a1712;

    --border-hairline: rgba(216, 182, 131, 0.14);
    --border-gold: rgba(216, 182, 131, 0.42);
    --border-gold-strong: rgba(231, 207, 166, 0.7);

    /* ---- Gold is a material, never a flat fill -------------------------- */
    --grad-gold-panel: linear-gradient(145deg, #8a6320 0%, #c9a05c 22%, #f2e0b4 48%, #cfa662 66%, #7c5619 100%);
    --grad-gold-button: linear-gradient(160deg, #e2c48c 0%, #c9a15a 46%, #a77e34 100%);
    --grad-champagne: linear-gradient(150deg, #f6ead1 0%, #e7cfa6 52%, #d9bd8d 100%);
    --grad-page: radial-gradient(120% 80% at 50% -10%, #191614 0%, #0b0a09 55%, #070606 100%);
    --grad-hairline: linear-gradient(90deg, rgba(216, 182, 131, 0) 0%, rgba(216, 182, 131, 0.5) 50%, rgba(216, 182, 131, 0) 100%);

    /* ---- Radii, shadows, motion ----------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-card: 0 26px 60px rgba(0, 0, 0, 0.62);
    --shadow-card-sm: 0 12px 28px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 14px 34px rgba(154, 112, 44, 0.34);
    --inset-sheen: inset 0 1px 0 rgba(255, 244, 224, 0.14);

    --veil: rgba(7, 6, 6, 0.72);
    --blur-veil: blur(18px);
    --ease-silk: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 140ms;
    --dur-base: 240ms;

    /* ---- Type ------------------------------------------------------------*/
    --sv-font-display: "Primary", "Helvetica Neue", Arial, sans-serif;
    --sv-font-body: "Primary", "Helvetica Neue", Arial, sans-serif;
    --sv-font-ui: "Primary", "Helvetica Neue", Arial, sans-serif;

    --tracking-display: 0.01em;
    --tracking-display-caps: 0.06em;
    --tracking-label: 0.16em;
    --tracking-ui: 0.04em;
    --measure: clamp(46ch, 50vw, 72ch);

    /* ---- Icon recolouring ------------------------------------------------*/
    --ppm-icons-accent-filter: brightness(0) saturate(100%) invert(78%) sepia(23%) saturate(583%) hue-rotate(340deg) brightness(94%) contrast(88%);
    --ppm-icons-contrast-filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(310%) hue-rotate(342deg) brightness(103%) contrast(89%);

    /* ---- Bootstrap remap (only the vars that exist in BS 5.1) ------------ */
    --bs-primary: var(--gold-500);
    --bs-primary-rgb: 194, 154, 82;
    --bs-secondary: var(--ink-600);
    --bs-secondary-rgb: 42, 38, 34;
    --bs-light: var(--gold-200);
    --bs-light-rgb: 242, 225, 194;
    --bs-dark: var(--ink-900);
    --bs-dark-rgb: 7, 6, 6;
    --bs-extra-dark: var(--ink-900);
    --bs-extra-dark-rgb: 7, 6, 6;
    --bs-body-bg: var(--ink-850);
    --bs-body-color: var(--parchment-dim);
    --bs-body-rgb: 201, 188, 166;
    --bs-border-color: var(--border-hairline);

    /* The design board defines no semantic states. Tinted off the gold ramp
       and desaturated so they cannot break the palette — needs sign-off. */
    --bs-success: #7d8a5d;
    --bs-success-rgb: 125, 138, 93;
    --bs-warning: var(--gold-600);
    --bs-warning-rgb: 169, 124, 51;
    --bs-danger: #9c5b46;
    --bs-danger-rgb: 156, 91, 70;
    --bs-info: var(--gold-400);
    --bs-info-rgb: 216, 182, 131;

    --bs-table-bg: transparent;
    --bs-table-color: var(--text-body);
    --bs-table-border-color: var(--border-hairline);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.015);
    --bs-table-striped-color: var(--text-body);
    --bs-table-hover-bg: rgba(216, 182, 131, 0.05);
    --bs-table-hover-color: var(--gold-200);
    --bs-table-accent-bg: transparent;

    /* ---- The theme's own --ppm-* contract (85 uses in main.css) ---------- */
    --ppm-main-bg: var(--ink-850);
    --ppm-secondary-bg: var(--ink-800);
    --ppm-main-accent: var(--gold-500);
    --ppm-main-text: var(--parchment);
    --ppm-main-text__faded: var(--parchment-dim);
    --ppm-ui_separators-color: var(--border-hairline);
    --ppm-ui-shadow: var(--shadow-card);

    --ppm-body-bg: var(--ink-850);
    --ppm-body-secondary-bg: var(--ink-800);
    --ppm-main-bg__transparent: rgba(11, 10, 9, 0.5);
    --ppm-secondary-bg__transparent: var(--veil);
    --ppm-primary-search-bg: var(--veil);
    --ppm-menu-bg: var(--ink-900);
    --ppm-form-input-bg: rgba(255, 255, 255, 0.02);
    --ppm-form-input-color: var(--text-heading);
    --ppm-account-sidebar-bg: var(--ink-800);
    --ppm-account-content-bg: var(--ink-850);
    --ppm-grid-sidebar-bg: transparent;

    --ppm-border-color: var(--border-hairline);
    --ppm-submenu-bottom-radius: var(--radius-md);
    --ppm-pagination-border-color: var(--border-gold);

    --ppm-primary-text: var(--parchment);
    --ppm-products-card-text: var(--text-heading);
    --ppm-faded-text: var(--parchment-faint);
    --ppm-menu-text: var(--text-body);
    --ppm-menu-accent-text: var(--gold-300);
    --ppm-account-menu-hover-bg: rgba(216, 182, 131, 0.08);
    --ppm-account-menu-hover-color: var(--gold-200);
    --ppm-account-menu-current-hover-icon: var(--ppm-icons-accent-filter);
}

/* The page is a warm radial vignette, never a flat black. */
body {
    background: var(--grad-page) !important;
    background-attachment: fixed;
    background-color: var(--ink-850);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

::selection {
    background: var(--gold-600);
    color: var(--text-on-gold);
}


/* ==========================================================================
   ======== COMPONENTS Styles ========
   ========================================================================== */

/* -------------------------------------------------------------------------
   TYPE
   Display serif for headlines, theme sans for prose and UI. Never mixed.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.heading-block-title,
.card-coin-title {
    font-family: var(--sv-font-display);
    font-weight: 400;
    letter-spacing: var(--tracking-display);
    color: var(--text-heading);
}

.display-1, .display-2, .display-3 {
    line-height: 1.06;
    color: var(--text-display);
    font-weight: 500;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .display-1, .display-2, .display-3 {
        --grad-gold-text: linear-gradient(to right, #e2c48c, #c9a15a, #a77e34);
        background-image: var(--grad-gold-text);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent !important;
        display: inline-block;
    }
}

/* Measure is capped on prose only — a global `p { max-width }` would wreck
   the theme's tables, cards and price rows. */
.text-formatted p,
.heading-block-body p,
.general-paragraph {
    max-width: var(--measure);
}

.text-center .heading-block-body p,
.text-center.text-formatted p {
    margin-inline: auto;
}

.sv-eyebrow,
.heading-block-label {
    display: block;
    font-family: var(--sv-font-ui);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    font-weight: 400;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: white;
}

.text-muted,
.text-muted__darker {
    color: var(--text-muted) !important;
}

.text-dark,
.text-extra-dark {
    color: var(--text-heading) !important;
}

.text-light,
.text-white {
    color: var(--text-heading) !important;
}

.text-primary {
    color: var(--gold-400) !important;
}

.text-secondary {
    color: var(--text-muted) !important;
}

a {
    color: var(--gold-400);
    transition: color var(--dur-base) var(--ease-silk);
}

a:hover {
    color: var(--gold-200);
}

hr {
    border-color: var(--border-hairline);
    opacity: 1;
}

.sv-rule {
    height: 1px;
    border: 0;
    background: var(--grad-hairline);
    opacity: 1;
}

/* -------------------------------------------------------------------------
   BACKGROUNDS & BORDERS
   ------------------------------------------------------------------------- */
.bg-light,
.bg-white,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300 {
    background-color: transparent !important;
    color: var(--text-body) !important;
}

.bg-dark,
.bg-extra-dark,
.bg-secondary {
    background-color: var(--ink-900) !important;
    color: var(--text-body) !important;
}

.bg-primary {
    background: var(--grad-gold-panel) !important;
    color: var(--text-on-gold) !important;
}

/* New surfaces */
.bg-plaque {
    background-color: var(--surface-card) !important;
}

.bg-inset {
    background-color: var(--surface-inset) !important;
}

.bg-gold {
    background: var(--grad-gold-panel) !important;
    color: var(--text-on-gold) !important;
}

.bg-champagne {
    background: var(--grad-champagne) !important;
    color: var(--text-on-champagne) !important;
}

.bg-gold h1, .bg-gold h2, .bg-gold h3, .bg-gold .h1, .bg-gold .h2, .bg-gold .h3 {
    color: var(--text-on-gold);
}

.bg-champagne h1, .bg-champagne h2, .bg-champagne h3,
.bg-champagne .h1, .bg-champagne .h2, .bg-champagne .h3 {
    color: var(--text-on-champagne);
}

.bg-champagne p,
.bg-champagne .text-muted {
    color: #4a4034 !important;
}

.bg-dots_dark,
.bg-dots_light,
.bg-dots_gold {
    --bg-dots-color: var(--ink-900);
    --bg-dots-bg-color: var(--border-gold);
    background-image: radial-gradient(var(--bg-dots-color) 1px, transparent 1px) !important;
    background-color: var(--bg-dots-bg-color);
    background-size: 8px 8px;
    background-repeat: repeat;
}
.bg-dots_light {
    --bg-dots-color: var(--parchment-faint);
    --bg-dots-bg-color: var(--parchment);
}
.bg-dots_gold {
    --bg-dots-color: var(--gold-400);
    --bg-dots-bg-color: var(--gold-100);
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.border-light,
.border-dark {
    border-color: var(--border-hairline) !important;
}

.rounded, .rounded-1, .rounded-2, .rounded-3 {
    border-radius: var(--radius-md) !important;
}

.rounded-4, .rounded-5, .rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.shadow, .shadow-lg {
    box-shadow: var(--shadow-card) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-card-sm) !important;
}

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn {
    font-family: var(--sv-font-ui);
    font-weight: 500;
    letter-spacing: var(--tracking-ui);
    border-radius: var(--radius-sm);
    transition: background var(--dur-base) var(--ease-silk),
                color var(--dur-base) var(--ease-silk),
                border-color var(--dur-base) var(--ease-silk),
                box-shadow var(--dur-base) var(--ease-silk),
                filter var(--dur-base) var(--ease-silk),
                transform var(--dur-fast) var(--ease-silk);

    &:active {
        transform: translateY(1px);
    }

    &:focus-visible {
        outline: none;
        border-color: var(--border-gold-strong);
        box-shadow: 0 0 0 1px var(--border-gold-strong);
    }

    &:disabled,
    &.disabled {
        opacity: 0.38;
    }
}

.btn-primary {
    background: var(--grad-gold-button);
    border-color: rgba(255, 246, 226, 0.3);
    color: var(--text-on-gold);
    box-shadow: var(--inset-sheen);

    &:hover,
    &:focus,
    &:active {
        background: var(--grad-gold-button);
        border-color: rgba(255, 246, 226, 0.45);
        color: var(--text-on-gold);
        filter: brightness(1.07);
        box-shadow: var(--shadow-gold);
    }
}

.btn-light {
    background: var(--grad-champagne);
    border-color: rgba(120, 96, 56, 0.3);
    color: var(--text-on-champagne);

    &:hover,
    &:focus,
    &:active {
        background: var(--grad-champagne);
        border-color: rgba(120, 96, 56, 0.45);
        color: var(--text-on-champagne);
        filter: brightness(1.05);
        box-shadow: var(--shadow-card-sm);
    }
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light,
.btn-outline-extra-dark,
.btn-secondary,
.btn-dark,
.btn-extra-dark {
    background-color: transparent;
    border: 1px solid var(--border-gold);
    color: var(--gold-300);
    box-shadow: none;

    &:hover,
    &:focus,
    &:active {
        background-color: rgba(216, 182, 131, 0.08);
        border-color: var(--border-gold-strong);
        color: var(--gold-200);
    }
}

.btn.btn-outline-secondary {
    border-color: var(--border-hairline);
    color: var(--text-body);
}

.btn.btn-outline-dark {
    border-color: var(--ink-700);
    color: var(--ink-700);
}

.btn.btn-outline-light {
    border-color: var(--gold-400);
    color: var(--gold-400);
}

.btn.btn-outline-extra-dark {
    border-color: var(--ink-900);
    color: var(--ink-900);
}

.btn-dark {
    background-color: var(--ink-700);
    border-color: var(--ink-700);
    color: var(--parchment);
}

.btn-extra-dark {
    background-color: var(--ink-900);
    border-color: var(--ink-900);
    color: var(--parchment);
}

.btn-green {
    background: var(--grad-gold-button);
    border-color: rgba(255, 246, 226, 0.3);
    color: var(--text-on-gold);

    &:hover {
        filter: brightness(1.07);
        color: var(--text-on-gold);
    }
}

.btn-link,
.btn-reset {
    color: var(--text-body);

    &:hover {
        color: var(--gold-200);
    }
}

.btn-icon {
    border-radius: var(--radius-pill);
}

/* Icon buttons that sit on gold need dark glyphs. */
.btn-primary .icon img,
.btn-light .icon img {
    filter: none;
}

.link-button {
    color: var(--text-body);

    &:hover {
        color: var(--gold-200);
    }

    .text-uppercase {
        letter-spacing: var(--tracking-label);
        font-size: 0.75rem;
    }
}

.link--monocolor,
.link--simple {
    color: var(--gold-400);

    &:hover {
        color: var(--gold-200);
    }
}

/* -------------------------------------------------------------------------
   THE PLAQUE — the signature double frame.
   Outer card: 22px radius, 14px padding, deep shadow. Inner panel: 14px,
   one shade deeper. Radius steps down inward (22 → 14 → 6).
   ------------------------------------------------------------------------- */
.card,
.sv-plaque {
    background-color: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 14px;
    color: var(--text-body);
}

.card > .card-body,
.card > .card-header,
.card > .card-footer,
.sv-panel {
    background-color: var(--surface-inset);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    color: var(--text-body);
}

.card > .card-body,
.sv-panel {
    padding: 2rem;
}

/* The one gold plaque and the one champagne plaque a page is allowed. */
.sv-plaque-gold {
    background: var(--grad-gold-panel);
    border-color: rgba(255, 246, 226, 0.22);
    box-shadow: var(--shadow-gold);
    color: var(--text-on-gold);

    & > .sv-panel {
        background: var(--grad-gold-button);
        border-color: rgba(255, 246, 226, 0.35);
        box-shadow: var(--inset-sheen);
        color: #3a2b12;
    }

    h1, h2, h3, .h1, .h2, .h3, p {
        color: var(--text-on-gold);
    }
}

.sv-plaque-champagne {
    background: var(--grad-champagne);
    border-color: rgba(120, 96, 56, 0.22);
    box-shadow: var(--shadow-card-sm);
    color: #4a4034;

    & > .sv-panel {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(120, 96, 56, 0.26);
        color: #4a4034;
    }

    h1, h2, h3, .h1, .h2, .h3 {
        color: var(--text-on-champagne);
    }

    p, .text-muted {
        color: #4a4034 !important;
    }
}

/* 58px gold hairline icon frame — the only icon treatment in the system. */
.sv-tile-frame {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold);
    color: var(--gold-400);
    transition: border-color var(--dur-base) var(--ease-silk);

    &:hover {
        border-color: var(--border-gold-strong);
    }

    .icon {
        margin: 0;
    }
}

/* -------------------------------------------------------------------------
   ICONS
   ------------------------------------------------------------------------- */
.icon > img,
.icon img {
    filter: var(--ppm-icons-accent-filter);
}

.icon > svg,
.icon svg {
    fill: currentColor;
    color: var(--gold-400);
}

.text-light .icon svg,
.icon.text-light svg {
    color: var(--text-heading);
}

.arrow-toggle .icon > svg path,
.widget-filter-title svg path {
    fill: var(--gold-700);
    stroke: var(--gold-700);
}

.trust-badges img {
    filter: var(--ppm-icons-contrast-filter);
}

/* -------------------------------------------------------------------------
   BADGES & PILLS
   ------------------------------------------------------------------------- */
.badge {
    font-family: var(--sv-font-ui);
    font-weight: 400;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-gold);
    background-color: transparent;
    color: var(--gold-300);
}

.badge.bg-primary {
    background: var(--grad-gold-button) !important;
    border-color: rgba(255, 246, 226, 0.3);
    color: var(--text-on-gold) !important;
}

/* -------------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--text-heading);
    box-shadow: none;
    transition: border-color var(--dur-base) var(--ease-silk);

    &:focus {
        background-color: rgba(255, 255, 255, 0.03);
        border-color: var(--border-gold-strong);
        color: var(--text-heading);
        box-shadow: none;
    }

    &::placeholder {
        color: var(--text-muted);
        opacity: 1;
    }
}

.form-select {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23d8b683' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

.form-label {
    font-family: var(--sv-font-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-gold-200);
}

.form-check-input {
    background-color: transparent;
    border: 1px solid var(--border-gold);

    &:checked {
        background-color: var(--gold-500);
        border-color: var(--border-gold-strong);
    }

    &:focus {
        border-color: var(--border-gold-strong);
        box-shadow: none;
    }
}

.form-check-label {
    color: var(--text-body);
}

.form-gray,
.form-control-wrapper {
    background-color: transparent;
}

/* Quantity stepper */
.input-number {
    --border-radius: var(--radius-sm);

    .input-number-control {
        background-color: rgba(255, 255, 255, 0.02);
        color: var(--text-heading);
        border-color: var(--border-hairline);
    }

    .input-number-decrement,
    .input-number-increment {
        background-color: transparent;
        border: 1px solid var(--border-hairline);
        color: var(--gold-300);
        transition: all var(--dur-base) var(--ease-silk);

        &:hover {
            border-color: var(--border-gold-strong);
            color: var(--gold-200);
        }

        &.is-disabled {
            opacity: 0.38;
        }
    }
}

/* -------------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------------- */
.table {
    color: var(--text-body);
    border-color: var(--border-hairline);
}

.table > thead {
    font-family: var(--sv-font-ui);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--border-hairline);
    background-color: transparent;
    color: inherit;
}

/* -------------------------------------------------------------------------
   ACCORDION / TABS / EXPANDERS
   ------------------------------------------------------------------------- */
.accordeon-item {
    border-bottom-color: var(--border-hairline);
}

.accordeon-item-heading {
    font-family: var(--sv-font-display);
    font-weight: 400;
    color: var(--text-heading);
    transition: color var(--dur-base) var(--ease-silk);

    &:hover {
        color: var(--gold-300);
    }
}

.list-links--underline li {
    border-bottom-color: transparent;

    &.is-active,
    &.current-menu-item {
        color: var(--gold-300);
        border-bottom-color: var(--border-gold);
    }
}

/* The fade-out mask on collapsed prose has to match the page, not #fff. */
.more-less:after {
    background-image: linear-gradient(to bottom, rgba(11, 10, 9, 0) 0%, var(--ink-850) 100%);
}

.more-less__white:after {
    background-image: linear-gradient(to bottom, rgba(11, 10, 9, 0) 0%, var(--ink-850) 100%);
}

.more-less-end > button {
    color: var(--gold-300);
    border-color: var(--border-gold);
}

/* -------------------------------------------------------------------------
   ALERTS / MODALS / TOOLTIPS
   ------------------------------------------------------------------------- */
.alert {
    background-color: var(--surface-inset) !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: var(--radius-md);
    color: var(--text-body) !important;
}

.alert-primary,
.alert-warning {
    border-color: var(--border-gold) !important;
    color: var(--gold-300) !important;
    
    .general-paragraph,
    p {
        color: var(--gold-300) !important;
    }
}

.alert-onload {
    border-radius: 0 !important;
    background: var(--ink-900) !important;
}

.modal-content,
.hover-dropdown-menu,
.sort-widget__container--inner {
    background-color: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: var(--text-body);
}

.sort-widget__container--inner {
    background-color: #fff;
    border: 1px solid var(--parchment);
    color: var(--ink-900);
    box-shadow: 2px 6px 20px rgba(0, 0, 0, 0.2);
}

.modal-header,
.modal-footer {
    border-color: var(--border-hairline);
}

.body-overlay {
    background-color: var(--veil);
    backdrop-filter: var(--blur-veil);
}

.tooltip-inner,
[data-tooltip]:after {
    background-color: var(--ink-700);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--text-heading);
}

/* Scrollbars */
.mini-scrollbar::-webkit-scrollbar-track,
.mini-scrollbar::-webkit-scrollbar {
    background-color: var(--ink-800);
}

.mini-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--gold-700);
}

/* blockquote */
sblockquote::before {
    content: none;
}


/* ==========================================================================
   ======== GLOBAL STYLES ========
   Header, footer, hero, cart, catalog, product cards and product pages.
   Not page-specific: per-page and per-block styles live in a <style> tag at
   the end of that blade file.
   ========================================================================== */

/* -------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */
.header {
    background-color: var(--ink-900);
    color: var(--text-body);

    &.header-transparent {
        background: linear-gradient(to bottom, var(--ink-900) 0%, transparent 120%);
    }
}

.header-top,
.header-middle,
.header-bottom {
    border-bottom: 1px solid var(--border-hairline);
}

/* Sticky header reads as a floating veil, not a solid slab. */
.site-header.is-fixed .header,
.header.is-sticky {
    background-color: var(--veil);
    backdrop-filter: var(--blur-veil);
}

.header-top__icon-section .list-item a {
    color: var(--text-body);

    &:hover {
        color: var(--gold-200);
    }
}

.spot-prices {
    letter-spacing: var(--tracking-ui);

    .ask-price {
        color: var(--gold-300);
    }

    .ascending {
        color: #7d8a5d;
    }

    .descending {
        color: #9c5b46;
    }
}

@media (width < 400px) {
    .header .spot-prices {
        font-size: 0.7rem !important;
    }
}

.css-icon-logout {
    border-color: var(--gold-300);
}

/* HEADER MIDDLE */
.header .custom-logo-link {
    width: clamp(120px, 20vw, 200px);
}

/* Nav */
.header-menu > ul > .menu-item > a {
    font-family: var(--sv-font-ui);
    letter-spacing: var(--tracking-label);
    font-size: clamp(0.8125rem, 1.5vw, 0.9rem);
    color: var(--text-body);
    border-bottom: 1px solid transparent;
    transition: color var(--dur-base) var(--ease-silk),
                border-color var(--dur-base) var(--ease-silk);
}

.header-menu > ul > .menu-item:hover > a {
    opacity: 1;
    color: var(--gold-300);
}

.header-menu > ul > .menu-item.current-menu-item > a {
    color: var(--gold-400);
}

.megamenu {
    background-color: transparent;
    border: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.header-menu > ul > .menu-item > .megamenu > .sub-menu {
    border-radius: unset;
    background-color: var(--ppm-menu-bg);
}

.search-box {
    background-color: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-silk);

    &:focus-within {
        border-color: var(--border-gold-strong);
    }

    .search-input {
        background-color: transparent;
        border: 0;
        color: var(--text-heading);
    }
}

.awesomplete > ul {
    background-color: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);

    li {
        color: var(--text-body);

        &:hover,
        &[aria-selected="true"] {
            background-color: rgba(216, 182, 131, 0.08);
            color: var(--gold-200);
        }
    }
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: var(--gold-300);
}

/* Mobile menu */
.mobile-menu {
    background-color: var(--ink-900);
    color: var(--text-body);
}

.mobile-menu__bar,
.mobile-menu__header,
.mobile-menu__footer {
    background-image: unset;
    background-color: var(--ink-900);
    border-color: var(--border-hairline);
}

.mobile-menu__bar .custom-logo-link {
    height: 35px;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.mobile-menu__header__nav__item {
    font-family: var(--sv-font-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-size: 0.75rem;
}

.mobile-menu .menu-item > a {
    color: var(--text-body);

    &:hover {
        color: var(--gold-200);
    }
}

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.section-hero {
    position: relative;
    color: var(--text-heading);
    /* background-image: radial-gradient(var(--border-gold) 1px, transparent 1px) !important;
    background-color: var(--ink-900);
    background-size: 8px 8px;
    background-repeat: repeat; */

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom, rgb(from var(--ink-900) r g b / 0.7), rgb(from var(--ink-900) r g b / 0.4));
        opacity: 0.82;
    }

    /* A gold hairline closes the band off from the section below it. */
    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        height: 1px;
        background: var(--grad-hairline);
    }
}

.section-hero .heading-block-title {
    font-family: var(--sv-font-display);
    /* color: white !important;
    text-transform: uppercase;
    font-weight: bold; */
    letter-spacing: var(--tracking-display);
}

.section-hero .heading-block-body {
    color: var(--text-body);
}

/* bullet-dot */
.section-hero .list-inline-dot .list-item:after {
    color: var(--gold-600);
}

.section-hero .heading-block-body ul:not(.list) li:before {
    background-color: var(--gold-500);
}

/* Glide arrows */
.glide__arrow--left {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='8' viewBox='0 0 22 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.57764e-05 3.83457L3.83466 0V3.0799H21.9604V4.58933H3.83466V7.66928L4.57764e-05 3.83457Z' fill='%23d8b683'/%3E%3C/svg%3E%0A");
}

.glide__arrow--right {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='8' viewBox='0 0 22 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.9604 3.83457L18.1258 0V3.0799H0V4.58933H18.1258V7.66928L21.9604 3.83457Z' fill='%23d8b683'/%3E%3C/svg%3E%0A");
}

.glide__arrow:hover {
    transform: none;
    filter: brightness(1.15);
}

.glide__bullet {
    &:after {
        background-color: var(--gold-700);
        transition: background-color var(--dur-base) var(--ease-silk);
    }

    &:hover:after {
        background-color: var(--gold-400);
    }

    &.glide__bullet--active:after,
    &.is-active:after {
        background-color: var(--gold-300);
    }
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--ink-900);
    color: var(--text-body);
    border-top: 1px solid var(--border-hairline);

    a {
        color: var(--text-body);

        &:hover {
            color: var(--gold-200);
        }
    }

    .text-md.text-uppercase {
        font-family: var(--sv-font-ui);
        font-size: 0.75rem;
        letter-spacing: var(--tracking-label);
        color: var(--gold-400);
    }
}

@media (width >= 1200px) {
    .footer__links-container {
        flex-wrap: nowrap;
        padding-bottom: 2rem;
    }
}

/* The newsletter block is the footer's one champagne plaque. */
.site-footer__subscription {
    background: var(--grad-champagne);
    color: var(--text-on-champagne);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-sm);
    padding: 14px;

    h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
        color: var(--text-on-champagne);
    }

    p {
        color: #4a4034;
    }

    .form-control {
        background-color: rgba(255, 255, 255, 0.4);
        border-color: rgba(120, 96, 56, 0.3);
        color: var(--text-on-champagne);

        &::placeholder {
            color: #6d6152;
        }
    }

    .btn {
        background: var(--ink-900);
        border-color: var(--ink-900);
        color: var(--gold-300);

        &:hover {
            background: var(--ink-800);
            color: var(--gold-200);
        }
    }
}

.site-footer-top,
.site-footer-middle,
.site-footer-bottom {
    border-top: 1px solid var(--border-hairline);
}

.site-footer-middle {
    padding-bottom: clamp(1rem, 3vw, 3rem);
}

.site-footer-top {
    border-top: 0;
}
.site-footer-certifications img,
.site-footer-certifications .col-auto[style] {
    filter: var(--ppm-icons-contrast-filter) !important;
    opacity: 0.72;
    transition: opacity var(--dur-base) var(--ease-silk);
}

.site-footer-certifications img:hover {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   MINI-CART
   ------------------------------------------------------------------------- */
.mini-cart {
    background-color: var(--surface-card);
    border-left: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-card);
    color: var(--text-body);
}

.mini-cart-header {
    strong {
        font-family: var(--sv-font-display);
        color: var(--text-heading);
    }

    .btn.btn-icon {
        background-color: transparent;
        border-color: var(--border-hairline);
        color: var(--gold-300);
    }
}

.mini-cart-divider {
    color: var(--border-hairline);
    opacity: 1;
}

.cart-item {
    &:not(:last-child) {
        border-bottom-color: var(--border-hairline);
    }

    .cart-item-thumbnail {
        background-color: var(--surface-inset);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .cart-item-title {
        color: var(--text-heading);
    }

    .cart-item-price {
        color: var(--gold-300);
    }

    .cart-item-remove .icon svg {
        fill: currentColor;
        color: var(--text-muted);
    }
}

/* Checkout is the one solid gold button in the cart. */
.mini-cart .btn-cart {
    background: var(--grad-gold-button);
    border-color: rgba(255, 246, 226, 0.3);
    color: var(--text-on-gold);
    letter-spacing: var(--tracking-label);

    &:hover {
        filter: brightness(1.07);
        box-shadow: var(--shadow-gold);
        color: var(--text-on-gold);
    }
}

#scroll-top-button {
    background: var(--surface-card);
    border: 1px solid var(--border-gold);
    color: var(--gold-300);
}

/* -------------------------------------------------------------------------
   CATALOG
   ------------------------------------------------------------------------- */
.catalog-list__breadcrumbs,
.most-active-section {
    background-color: #fff;
}
.breadcrumb {
    font-family: var(--sv-font-ui);

    .breadcrumb-item,
    .breadcrumb-item a {
        color: var(--ink-700);
    }

    .breadcrumb-item a:hover {
        color: var(--gold-600);
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: var(--gold-700);
    }
}

.catalog-list__content,
.most-active-section  {
    color: var(--ink-900);

    h1 {
        font-family: var(--sv-font-display);
        color: var(--ink-900) !important;
    }
    h1, h2, h3, .h1, .h2, .h3,
    .catalog-actions, .catalog-actions a {
        color: var(--ink-900) !important;
    }
}

.catalog-page-title-section h2 {
    font-family: var(--sv-font-display);
    color: var(--gold-600);
}

.catalog-actions {
    color: var(--text-body);
    border-bottom: 1px solid var(--gold-400);
    padding-bottom: 0.75rem;
}

.category-page .breadcrumb-item a,
.category-page .breadcrumb-item span {
    color: var(--text-muted);
}

.category-page__categories .card-link {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-hairline);
    padding-left: 1rem !important;
    padding-right: 1rem !important;

    img {
        mix-blend-mode: multiply;
    }

    &:hover {
        background-color: white;
        border-color: var(--border-gold);
    }

    h3 {
        color: var(--ink-900);
    }
}

.sort-widget__button {
    background-color: #fff;
    border: 1px solid var(--gold-400);
    color: var(--ink-900);
    letter-spacing: var(--tracking-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    background-image: none;

    &:hover {
        color: var(--gold-800);
    }
}

.sort-widget__button-icon {
    color: var(--gold-700);
}

.sort-widget__item {
    color: var(--ink-900);
    border-radius: var(--radius-sm);

    &:hover {
        background-color: rgba(216, 182, 131, 0.08);
        color: var(--gold-800);
    }
}

/* Filters sidebar */
.offcanvas {
    background-color: var(--surface-card);

    @media (width >= 992px) {
        background-color: transparent;
    }
}

.offcanvas-header {
    border-bottom: 1px solid var(--border-hairline);

    .btn.btn-icon {
        background-color: transparent;
        border-color: var(--border-hairline);
    }
}

.widget-filter {
    border-bottom: 1px solid var(--gold-300);

    &:last-child {
        border-bottom: 0;
    }

    .widget-filter-title {
        font-family: var(--sv-font-ui);
        font-size: 0.75rem;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        /* color: var(--gold-400); */
        color: var(--ink-900);
    }

    .widget-filter-list-item {
        /* color: var(--text-body); */
        color: var(--ink-900);

        &:hover {
            /* color: var(--gold-200); */
            color: var(--gold-600);
        }
    }
    .form-check-label {
        color: var(--gold-800);
    }
}

.widget-filter-search .form-control {
    background-color: rgba(255, 255, 255, 0.02);
}

.js-filters .js-filters-content a:not(.link-button) {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    box-shadow: none !important;
    color: var(--text-body);
    transition: all var(--dur-base) var(--ease-silk);

    &:hover {
        border-color: var(--border-gold-strong);
        background-color: rgba(216, 182, 131, 0.08);
        color: var(--gold-200);
    }
}

/* Mobile bottom toolbar */
.catalog-toolbar {
    background-color: var(--veil);
    backdrop-filter: var(--blur-veil);
    border-top: 1px solid var(--border-hairline);
}

.catalog-toolbar-item {
    color: var(--text-body);
}

.catalog-toolbar-label {
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-ui);
}

/* Pagination */
.pagination-item-current .pagination-link {
    background: var(--grad-gold-button);
    color: var(--text-on-gold);
    border-radius: var(--radius-sm);
}

.pagination-item-button .pagination-link {
    border-color: var(--border-gold);
    border-radius: var(--radius-sm);

    &:hover {
        background-color: rgba(216, 182, 131, 0.08);
        color: var(--gold-200);
        opacity: 1;
    }
}

/* -------------------------------------------------------------------------
   PRODUCT CATALOG
   ------------------------------------------------------------------------- */
.catalog-list__content {
    background: #fff;
}

/* -------------------------------------------------------------------------
   PRODUCT CARD
   ------------------------------------------------------------------------- */
[class*=col-]:has( > .product-card) {
    padding-left: clamp(0.15rem, 0.25vw, 0.5rem);
    padding-right: clamp(0.15rem, 0.25vw, 0.5rem);
}
.card-coin {
    background-color: #fff;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    /* box-shadow: var(--shadow-card-sm); */
    padding: 3px;
    color: var(--text-body);
    transition: border-color var(--dur-base) var(--ease-silk),
                box-shadow var(--dur-base) var(--ease-silk);

    &:hover {
        border-color: var(--border-gold);
        /* box-shadow: var(--shadow-card); */
    }

    /* Inner panel — radius steps down 22 → 14. */
    .card-coin-header {
        background-color: #fff;
        border: 1px solid var(--border-gold);
        border-radius: var(--radius-lg);
        padding: 0.4rem;
    }

    .card-coin-title {
        font-family: var(--sv-font-display);
        color: var(--ink-900);
        font-weight: 500;
    }

    .card-coin-price {
        color: var(--gold-800);
        font-family: var(--sv-font-ui);
    }

    .card-coin-notice {
        border-bottom-color: var(--border-hairline);
    }

    .form-control {
        background-color: rgba(255, 255, 255, 0.02);
        color: var(--ink-900);
        border-color: var(--ink-900);
    }

    .card-coin-expand {
        background-color: #fff;
        border: 1px solid var(--border-hairline);
        border-top: 0;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        /* box-shadow: var(--shadow-card); */
        margin-top: -1.25rem;
        padding-top: 1.5rem;
        overflow: hidden;

        .table {
            color: var(--ink-900);

            th, td {
                border-bottom-color: var(--border-hairline);
            }

            th {
                font-family: var(--sv-font-ui);
                font-size: 0.7rem;
                /* letter-spacing: var(--tracking-label); */
                text-transform: uppercase;
                color: var(--text-muted);
            }
        }
    }

    .card-coin-actions ::placeholder {
        color: var(--text-muted);
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar {
        background-color: var(--ink-800);
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--gold-700);
    }
}

/* Demote the repeated card CTA to a gold hairline outline. */
.card-coin .btn-primary,
.card-coin .product-card__add-to-cart {
    background: transparent;
    border: 1px solid var(--ink-900);
    color: var(--ink-900);
    box-shadow: none;

    &:hover {
        background-color: rgba(216, 182, 131, 0.08);
        border-color: var(--bgold-800);
        color: var(--gold-800);
        filter: none;
    }
}

/* Stock states — desaturated off the gold ramp, no traffic-light palette. */
.card-coin-meta {
    font-family: var(--sv-font-ui);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    /* color: var(--text-muted); */

    & > * {
        background-color: transparent !important;
        border: 1px solid var(--gold-400) !important;
        border-radius: var(--radius-pill) !important;
        padding: 0.2rem 0.6rem !important;
    }

    &:after {
        color: var(--gold-400);
    }

    &.in-stock {
        color: var(--gold-600);

        & > * {
            border-color: var(--gold-600);
        }
    }

    &.out-of-stock,
    &.pending {
        color: var(--gold-400);
    }

    &.new {
        color: var(--ink-900);

        & > * {
            border-color: var(--border-gold-strong);
        }
    }
}

/* Ribbon: the theme exposes --ribbon-color, so one token retints all states. */
.card-coin-ribbon {
    --ribbon-color: var(--gold-600);

    &.in-stock {
        --ribbon-color: var(--gold-600);
    }

    &.out-of-stock {
        --ribbon-color: var(--ink-600);
    }

    span {
        font-family: var(--sv-font-ui);
        font-weight: 500;
        font-size: 13px;
        letter-spacing: var(--tracking-label);
        color: var(--text-on-gold);
        text-shadow: none;
        box-shadow: var(--shadow-card-sm);
    }
}

/* -------------------------------------------------------------------------
   PRODUCT DETAIL
   ------------------------------------------------------------------------- */
.product-view-section {
    background-color: #fff !important;
}

.product-view__gallery {
    background-color: #fff;
    border: 1px solid var(--gold-400);
    border-radius: var(--radius-lg);
}

.gallery-slider-thumbnails-imgholder {
    border: 1px solid var(--gold-400);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.gallery-slider-thumbnails .glide__slide.is-active .gallery-slider-thumbnails-imgholder {
    border-color: var(--border-gold-strong);
}

.gallery-slider .glide__slide {
    padding: 0.5rem;
}
.gallery-slider .glide__slide .x-zoom:after {
    right: 0.5rem;
}

.product-view__details h1 {
    font-family: var(--sv-font-display);
    color: var(--gold-400);
}

.product-view__details .stock-details {
    color: var(--text-body);

    .font-weight-semibold {
        color: var(--gold-300);
    }
}

.product-view__details [x-price] {
    font-family: var(--sv-font-ui);
    color: var(--gold-200);
}

.sticky-info {
    background-color: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    /* box-shadow: var(--shadow-card); */
    padding: 2rem;
}

.product-view__details .table-responsive-md {
    overflow-x: auto;
}
.pricing-table,
.specifications-table table {
    color: var(--ink-900);

    th, td {
        border-bottom-color: var(--border-hairline);
    }

    th {
        font-family: var(--sv-font-ui);
        font-size: 0.75rem;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--text-muted);
    }
}

/* The product page's single solid gold button. */
.add-to-cart-form + .btn-primary,
.product-view__details .btn-primary:not(.btn-sm) {
    background: var(--grad-gold-button);
    border-color: rgba(255, 246, 226, 0.3);
    color: var(--text-on-gold);
    letter-spacing: var(--tracking-label);
    box-shadow: var(--inset-sheen);

    &:hover {
        filter: brightness(1.07);
        box-shadow: var(--shadow-gold);
        color: var(--text-on-gold);
    }
}

.tabs-coin-info {
    .list-links--underline {
        border-bottom: 1px solid var(--border-hairline);
    }

    .list-item a {
        font-family: var(--sv-font-ui);
        font-size: 0.75rem;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--ink-900);
    }

    .list-item.is-active a {
        color: var(--gold-600);
    }
    .general-paragraph,
    p {
        color: var(--ink-800) !important;
    }
    .alert.alert-warning {
        color: var(--gold-300) !important;
    }
}

.rating-widget {
    color: var(--gold-600);

    .rating-widget-score {
        color: var(--gold-300);
    }
}

.product-view__also-viewed .heading-block-title,
.product-view__related .heading-block-title {
    font-family: var(--sv-font-display);
    color: var(--text-display);
}