/* ============================================================================
   Lake Conroe Gold — theme-4 override layer
   ========================================================================== */

:root {
    /* __Ink ramp — the stage__ */
    --ink-900: #121110;
    --ink-800: #17191c;
    --ink-700: #2e3236;
    --ink-600: #444a50;
    --ink-500: #57626D;

    /* __Gold ramp — the metal__ */
    --gold-50: #fbf6e4;
    --gold-100: #F9DFA0;
    --gold-200: #eec492;
    --gold-300: #d9b866;
    --gold-400: #CDA345;
    --gold-500: #b18645;
    --gold-600: #9c7443;

    --neutral-100: #f2efe9;
    --neutral-300: #cfc9c0;
    --neutral-500: #a09a92;
    --neutral-700: #6d6862;

    --success: #7fa05a;
    --warning: #d9a13a;
    --danger: #b5533f;

    /* __Semantic aliases__ */
    --bg-page: var(--ink-800);
    --bg-page-deep: var(--ink-900);
    --surface-card: var(--ink-700);
    --surface-card-hover: var(--ink-600);
    --surface-inset: var(--ink-900);

    --text-primary: var(--neutral-100);
    --text-body: var(--neutral-300);
    --text-muted: var(--neutral-500);
    --text-gold: var(--gold-200);
    --text-on-gold: var(--ink-800);

    --border-hairline: #eec4928d;
    --border-hairline: rgb(from var(--gold-200) r g b / 0.5);
    --border-gold: var(--gold-400);
    --border-gold-soft: rgba(201, 162, 74, .35);

    --gradient-gold: linear-gradient(135deg, #f3e3ae 0%, #e0c377 42%, #c9a24a 100%);
    --gradient-gold-soft: linear-gradient(155deg, #fbf6e4 0%, #f0dca4 48%, #d9b866 100%);
    --gradient-gold-line: linear-gradient(90deg, rgba(201, 162, 74, 0) 0%, #d9b866 50%, rgba(201, 162, 74, 0) 100%);
    --gradient-ink: linear-gradient(135deg, var(--ink-500) 0%, var(--ink-800) 100%);
    --scrim-image: linear-gradient(180deg, rgba(18, 17, 16, 0) 0%, rgba(18, 17, 16, .85) 100%);

    /* theme-4 self-hosts "Primary"/"Secondary"; they close each stack so the
       page still reads on-brand with no network fonts loaded. */
    --font-display: "Questrial", "Century Gothic", "Futura", "Secondary", "Primary", sans-serif;
    --font-body: "Lato", "Helvetica Neue", "Primary", Helvetica, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* fluid so long uppercase words never break mid-word inside a column */
    --display-xl: clamp(40px, 5.2vw, 64px);
    --display-lg: clamp(32px, 3.6vw, 44px);
    --display-md: clamp(26px, 2.6vw, 32px);
    --display-sm: 24px;
    --tracking-display: .06em;
    --leading-display: 1.08;
    --body-lg: 17px;
    --body-md: 15px;
    --body-sm: 13px;
    --leading-body: 1.55;
    --label-md: 13px;
    --label-sm: 11px;
    --tracking-label: .03em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --hairline: 1px;

    --shadow-card: 0 1px 0 rgba(255, 255, 255, .03), 0 18px 40px -24px rgba(0, 0, 0, .9);
    --shadow-gold: 0 18px 44px -22px rgba(201, 162, 74, .45);
    --shadow-lift: 0 26px 60px -28px rgba(0, 0, 0, .95);
    --glow-focus: 0 0 0 1px var(--gold-300), 0 0 0 4px rgba(217, 184, 102, .18);

    --ease-standard: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: 140ms;
    --dur-med: 240ms;
    --dur-slow: 420ms;
    --blur-sm: blur(6px);
    --blur-veil: blur(14px);

    /* __Theme Colors__ */
    --bs-primary: var(--gold-400);
    --bs-primary-rgb: 201, 162, 74;
    --bs-secondary: var(--ink-600);
    --bs-secondary-rgb: 44, 41, 39;
    --bs-success: var(--success);
    --bs-success-rgb: 127, 160, 90;
    --bs-warning: var(--warning);
    --bs-warning-rgb: 217, 161, 58;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 181, 83, 63;
    --bs-info: var(--gold-300);
    --bs-info-rgb: 217, 184, 102;
    --bs-light: var(--ink-600);
    --bs-light-rgb: 44, 41, 39;
    --bs-dark: var(--ink-900);
    --bs-dark-rgb: 18, 17, 16;
    --bs-extra-dark: var(--ink-900);
    --bs-extra-dark-rgb: 18, 17, 16;
    --bs-white-rgb: 35, 33, 32;

    --bs-body-bg: var(--bg-page);
    --bs-body-color: var(--text-body);
    --bs-body-rgb: 207, 201, 192;
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--body-md);
    --bs-body-line-height: var(--leading-body);
    --bs-font-sans-serif: var(--font-body);
    --bs-font-monospace: var(--font-mono);

    /* __theme-4 surface tokens__ — main.css reads these before its own fallbacks */
    --ppm-body-bg: var(--bg-page);
    --ppm-body-secondary-bg: var(--surface-card);
    --ppm-main-bg: var(--surface-card);
    --ppm-secondary-bg: var(--surface-card-hover);
    --ppm-menu-bg: var(--surface-card);
    --ppm-menu-text: var(--text-body);
    --ppm-menu-accent-text: var(--text-gold);
    --ppm-submenu-bottom-radius: var(--radius-md);
    --ppm-grid-sidebar-bg: var(--surface-card);
    --ppm-account-sidebar-bg: var(--surface-card);
    --ppm-account-content-bg: var(--surface-card);
    --ppm-account-menu-hover-bg: rgba(201, 162, 74, .10);
    --ppm-account-menu-hover-color: var(--text-gold);
    --ppm-primary-search-bg: var(--surface-inset);
    --ppm-form-input-bg: var(--surface-inset);
    --ppm-form-input-color: var(--text-primary);
    --ppm-border-color: var(--border-hairline);
    --ppm-pagination-border-color: var(--border-hairline);
    --ppm-primary-text: var(--text-primary);
    --ppm-main-text: var(--text-primary);
    --ppm-main-text__faded: var(--text-muted);
    --ppm-faded-text: var(--text-muted);
    --ppm-main-accent: var(--text-gold);
    --ppm-products-card-text: var(--text-body);
    --ppm-icons-contrast-filter: invert(1) brightness(1.6);
    --ppm-account-menu-current-hover-icon: invert(1) brightness(1.6);
    --ppm-ui-shadow: var(--shadow-card);

    /* Filter */
    --filter-gold: invert(0.5) sepia(1);
}

/*
    ======== COMPONENTS Styles ========
    These styles are for components that are new for the theme or are updated styles for existing components.
    These styles will overwrite the default styles in main.css or will be created if it's needed. Do not change the main.css file. If you need to update styles for existing components, please add them here.
    E.g. if you need to update the styles for the buttons, please add them here. If you need to create a new component, please add it here.
*/

/* BASE AND TYPOGRAPHY */
html {
    background-color: var(--bg-page);
}

body {
    background-color: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--body-md);
    line-height: var(--leading-body);
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--gold-300);
    color: var(--ink-900);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    text-transform: uppercase;
}

h1, .h1 { font-size: var(--display-lg); }
h2, .h2 { font-size: var(--display-md); }
h3, .h3 { font-size: var(--display-sm); }

h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-md);
    letter-spacing: var(--tracking-label);
}

/* measure is capped in prose only — block layouts set their own */
.text-formatted p,
.general-paragraph p {
    max-width: 64ch;
}

strong, b {
    font-weight: 700;
    color: var(--text-primary);
}

code, kbd, pre, samp {
    font-family: var(--font-mono);
    color: var(--text-gold);
}

blockquote {
    border-left: var(--hairline) solid var(--border-gold);
    padding-left: var(--space-5);
    color: var(--text-body);
    font-weight: 300;

    &::before {
        content: none;
    }
}

a {
    color: var(--text-gold);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

a:hover,
a:focus-visible {
    color: var(--gold-100);
}

/* the 1px gold underline is for prose links only — anything already framed
   (buttons, cards, menu items, tiles) would just shift on hover */
.text-formatted a:hover,
.text-formatted a:focus-visible,
.general-paragraph a:hover,
.general-paragraph a:focus-visible {
    border-bottom: var(--hairline) solid var(--gold-100);
}

hr, .hr {
    border: 0;
    height: 1px;
    background: var(--border-hairline);
    opacity: 1;
}

/* line icons only — the metals chart draws its own stroke weights */
.icon svg {
    stroke-width: 1.5;
}

/* UTILITY REMAP — existing markup lands on-brand with no edits.
   .bg-light becoming a dark surface is intentional. */
.bg-body,
.bg-body-tertiary {
    background-color: var(--bg-page) !important;
}

.bg-white,
.bg-body-secondary {
    background-color: var(--surface-card) !important;
}

.bg-light {
    background-color: var(--surface-card) !important;
    color: var(--text-body) !important;
}

.bg-dark,
.bg-black,
.bg-extra-dark {
    background-color: var(--bg-page-deep) !important;
    color: var(--text-body) !important;
}

.bg-secondary {
    background-color: var(--ink-600) !important;
}

.bg-primary {
    background-image: var(--gradient-gold) !important;
    background-color: var(--gold-400) !important;
    color: var(--text-on-gold) !important;
}

.bg-success,
.bg-danger,
.bg-warning,
.bg-info {
    background-color: transparent !important;
    border: var(--hairline) solid currentColor;
}

.bg-success { color: var(--success) !important; }
.bg-danger { color: var(--danger) !important; }
.bg-warning { color: var(--warning) !important; }
.bg-info { color: var(--gold-300) !important; }

.text-primary { color: var(--gold-200) !important; }
.text-body, .text-body-secondary { color: var(--text-body) !important; }
.text-muted, .text-body-tertiary { color: var(--text-muted) !important; }
.text-dark, .text-black, .text-white, .text-light { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-muted) !important; }
.text-ink-900 { color: var(--ink-900) !important; }
.text-ink-800 { color: var(--ink-800) !important; }
.text-ink-700 { color: var(--ink-700) !important; }
.text-ink-600 { color: var(--ink-600) !important; }
.text-ink-500 { color: var(--ink-500) !important; }
.text-ink-400 { color: var(--ink-400) !important; }
.text-balance { text-wrap: balance; }

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

.border-primary { border-color: var(--border-gold) !important; }
.border-light, .border-white, .border-dark, .border-secondary {
    border-color: var(--border-hairline) !important;
}

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

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

/* 12px is below the 13px floor the system sets for readable text */
.text-xs { font-size: var(--body-sm) !important; }

.lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--body-lg);
    line-height: var(--leading-body);
    color: var(--text-body);
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    text-transform: uppercase;
    color: var(--text-gold);
}

.display-1, .display-2 { font-size: var(--display-xl); }
.display-3, .display-4 { font-size: var(--display-lg); }
.display-5, .display-6 { font-size: var(--display-md); }

.font-family-primary { font-family: var(--font-body); }
.font-family-secondary { font-family: var(--font-display); }

/* BUTTONS */
/* Update current styles — display stays inline-flex and ::before stays the
   theme's loading spinner; .btn-icon keeps its own square padding. */
.btn {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-md);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border-width: var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--neutral-100);
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}

/* .btn-icon, .btn-xs carry their own square/compact padding in main.css */
.btn:not(.btn-icon):not(.btn-xs):not(.btn-sm):not(.btn-lg) {
    padding: 12px 24px;
}

.btn:active,
.btn.active {
    transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
    opacity: .4;
    box-shadow: none;
    transform: none;
}

.btn-lg:not(.btn-icon) {
    padding: 16px 34px;
    font-size: var(--label-md);
}

.btn-sm:not(.btn-icon) {
    padding: 8px 16px;
    font-size: var(--label-sm);
}

.btn-lg, .btn-sm, .btn-xs {
    border-radius: var(--radius-sm);
}

.btn-primary,
.section-hero .heading-block-footer .btn-light,
.btn-info {
    background-image: var(--gradient-gold);
    background-color: var(--gold-400);
    border-color: transparent;
    color: var(--text-on-gold);
}

.btn-primary:hover,
.section-hero .heading-block-footer .btn-light:hover,
.btn-info:hover,
.btn-primary:focus,
.section-hero .heading-block-footer .btn-light:focus,
.btn-info:focus {
    background-image: var(--gradient-gold-soft);
    background-color: var(--gold-300);
    border-color: transparent;
    color: var(--text-on-gold);
    box-shadow: var(--shadow-gold);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-image: var(--gradient-gold);
    border-color: transparent;
    color: var(--text-on-gold);
}

.btn-outline-primary,
.btn-outline-light,
.btn-outline-info,
.btn-outline-secondary {
    background: transparent;
    border-color: var(--gold-200);
    color: var(--gold-200);
}

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

/* main.css sets .btn.btn-outline-secondary to the old ink text colour */
.btn.btn-outline-secondary {
    color: var(--text-gold);
}

.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-info:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:focus,
.btn-outline-light:focus,
.btn-outline-info:focus,
.btn-outline-secondary:focus {
    background: rgba(201, 162, 74, .10);
    border-color: var(--gold-200);
    color: var(--gold-100);
}

.btn-secondary,
.btn-dark,
.btn-light {
    background-color: var(--surface-card);
    border-color: transparent;
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-dark:hover,
.btn-light:hover {
    background-color: var(--surface-card-hover);
    border-color: transparent;
    color: var(--text-primary);
}

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--text-body);
    font-weight: 700;
}

.btn-link:hover {
    color: var(--text-gold);
}

/* semantic buttons stay outline-only so nothing out-shouts the metal */
.btn-success, .btn-danger, .btn-warning,
.btn-outline-success, .btn-outline-danger, .btn-outline-warning {
    background: transparent;
}

.btn-success, .btn-outline-success { border-color: var(--success); color: var(--success); }
.btn-danger, .btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-warning, .btn-outline-warning { border-color: var(--warning); color: var(--warning); }

.btn-success:hover, .btn-outline-success:hover { background: rgba(127, 160, 90, .12); color: var(--success); }
.btn-danger:hover, .btn-outline-danger:hover { background: rgba(181, 83, 63, .12); color: var(--danger); }
.btn-warning:hover, .btn-outline-warning:hover { background: rgba(217, 161, 58, .12); color: var(--warning); }

.btn-close {
    background: none;
    border: 0;
    padding: 0;
    width: auto;
    height: auto;
    opacity: 1;
    filter: none;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
}

.btn-close::before {
    content: "×";
}

.btn-close:hover {
    color: var(--text-gold);
    opacity: 1;
}

/* CARDS */
.card {
    background-color: var(--surface-card);
    background-image: none;
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    color: var(--text-body);
    transition: border-color var(--dur-fast) var(--ease-standard),
                transform var(--dur-med) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);
}

a.card:hover,
.card.lcg-interactive:hover {
    border-color: var(--border-gold);
    background-color: var(--surface-card-hover);
    transform: translateY(-2px);
}

.card-light {
    background-color: var(--surface-card);
    color: var(--text-body);
    border: none;
}

.card-body {
    padding: var(--space-5);
}

.card-title {
    font-family: var(--font-display);
    font-size: var(--display-sm);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    text-transform: uppercase;
    color: var(--text-gold);
    margin-bottom: var(--space-2);
}

.card-subtitle,
.card-header {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.card-text {
    color: var(--text-body);
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--border-hairline);
    padding: var(--space-4) var(--space-5);
}

.card-img,
.card-img-top {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    object-fit: cover;
}

.card-img-bottom {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    object-fit: cover;
}

/* New elements for components — the metallic feature card. Max two per screen. */
.card.lcg-card-gold,
.card.lcg-card-gold-soft {
    border: 0;
    color: var(--text-on-gold);
    box-shadow: var(--shadow-gold);
}

.card.lcg-card-gold { background-image: var(--gradient-gold); }
.card.lcg-card-gold-soft { background-image: var(--gradient-gold-soft); }
.card.lcg-card-ink {
    background-image: var(--gradient-ink);
    border: 0;
}

.card.lcg-card-gold .card-title,
.card.lcg-card-gold-soft .card-title,
.card.lcg-card-gold :is(h1, h2, h3, h4, h5, h6),
.card.lcg-card-gold-soft :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-on-gold);
}

.card.lcg-card-gold :is(p, .card-text),
.card.lcg-card-gold-soft :is(p, .card-text) {
    color: rgba(27, 26, 25, .78);
}

.card.lcg-card-gold .lcg-eyebrow,
.card.lcg-card-gold-soft .lcg-eyebrow {
    color: rgba(27, 26, 25, .62);
}

.card.lcg-card-gold a:not(.btn),
.card.lcg-card-gold-soft a:not(.btn) {
    color: var(--ink-900);
}

/* FORMS — recessed slots, labels above the field, never floating */
.form-label,
legend {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.form-control,
.form-select,
.form-control-plaintext {
    background-color: var(--surface-inset) !important;
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--text-primary) !important;
    transition: border-color var(--dur-fast) var(--ease-standard);
}

.form-control::placeholder {
    color: var(--neutral-700);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-inset);
    border-color: var(--border-gold);
    color: var(--text-primary);
    box-shadow: var(--glow-focus);
    outline: 0;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ink-800);
    opacity: .5;
}

textarea.form-control {
    resize: vertical;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23d9b866' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 10px 6px;
}

.form-select option {
    background: var(--ink-700);
    color: var(--text-primary);
}

.form-text {
    font-family: var(--font-body);
    font-size: var(--body-sm);
    color: var(--text-muted);
}

.invalid-feedback,
.valid-feedback {
    font-size: var(--body-sm);
}

.invalid-feedback { color: var(--danger); }
.valid-feedback { color: var(--success); }

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--danger);
    background-image: none;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success);
    background-image: none;
}

.input-group-text {
    background: transparent;
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--body-sm);
}

.form-check-label {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--text-body);
}

.form-check-input {
    width: 18px;
    height: 18px;
    background-color: var(--surface-inset);
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

/* the radio is the only circular control in the system */
.form-check-input[type="radio"] {
    border-radius: var(--radius-pill);
}

.form-check-input:checked {
    background-image: var(--gradient-gold);
    background-color: var(--gold-400);
    border-color: transparent;
}

.form-check-input:checked[type="checkbox"] {
    background-image: var(--gradient-gold),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231b1a19' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    background-position: center, center;
    background-size: cover, 10px 10px;
    background-repeat: no-repeat;
}

.form-check-input:checked[type="radio"] {
    position: relative;
    background-image: none;
    background-color: var(--surface-inset);
    border-color: var(--border-gold);
}

.form-check-input:checked[type="radio"]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: var(--radius-pill);
    background-image: var(--gradient-gold);
}

.form-check-input:focus {
    border-color: var(--border-gold);
    box-shadow: var(--glow-focus);
}

.form-check-input:disabled ~ .form-check-label {
    opacity: .4;
}

.form-range::-webkit-slider-thumb { background: var(--gold-300); }
.form-range::-moz-range-thumb { background: var(--gold-300); }
.form-range::-webkit-slider-runnable-track {
    background: var(--surface-inset);
    height: 4px;
}

/* BADGES, ALERTS, TOOLTIPS — no filled semantic panels, dots and 1px accents */
.badge {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}

.badge.bg-primary {
    background-image: var(--gradient-gold);
    color: var(--text-on-gold);
}

.lcg-badge-outline {
    background: transparent;
    border: var(--hairline) solid var(--border-gold-soft);
    color: var(--text-gold);
}

.lcg-badge-neutral {
    background: var(--ink-600);
    border: var(--hairline) solid var(--border-hairline);
    color: var(--text-body);
}

.lcg-badge-success {
    background: transparent;
    border: var(--hairline) solid var(--success);
    color: var(--success);
}

.lcg-badge-danger {
    background: transparent;
    border: var(--hairline) solid var(--danger);
    color: var(--danger);
}

.alert {
    background-color: var(--surface-card);
    border: var(--hairline) solid var(--border-hairline);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: var(--body-md);
}

.alert-primary { border-left-color: var(--gold-400); }
.alert-success { border-left-color: var(--success); }
.alert-warning { border-left-color: var(--warning); }
.alert-danger { border-left-color: var(--danger); }
.alert-info, .alert-secondary, .alert-light, .alert-dark {
    border-left-color: var(--border-hairline);
}

.alert .alert-link {
    color: var(--text-gold);
}

.alert-heading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-primary);
}

.tooltip {
    --bs-tooltip-opacity: 1;
}

.tooltip-inner {
    background: var(--ink-900);
    border: var(--hairline) solid var(--border-gold-soft);
    border-radius: var(--radius-sm);
    color: var(--text-gold);
    font-family: var(--font-body);
    font-size: var(--label-sm);
    letter-spacing: .04em;
    max-width: 260px;
}

.tooltip .tooltip-arrow::before {
    border-top-color: var(--border-gold-soft);
}

.popover {
    background: var(--surface-card);
    border: var(--hairline) solid var(--border-gold-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}

.popover-header {
    background: transparent;
    border-bottom: var(--hairline) solid var(--border-hairline);
    font-family: var(--font-display);
    font-size: var(--display-sm);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--text-gold);
}

.popover-body {
    color: var(--text-body);
    font-size: var(--body-md);
}

/* TABLES, LISTS, PAGINATION, DROPDOWN, BREADCRUMB — hairline rules only */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-body);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: var(--text-body);
    --bs-table-hover-bg: var(--surface-card-hover);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: rgba(201, 162, 74, .10);
    --bs-table-active-color: var(--text-gold);
    color: var(--text-body);
    border-color: var(--border-hairline);
    font-size: var(--body-md);
}

.table > thead th,
.table > thead > tr > th {
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border-bottom: var(--hairline) solid var(--border-hairline);
}

.table > tbody > tr > td {
    border-color: var(--border-hairline);
    vertical-align: middle;
}

.table td.lcg-num,
.table td .lcg-mono {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.table-dark {
    --bs-table-bg: var(--surface-inset);
}

.list-group {
    border-radius: var(--radius-md);
}

.list-group-item {
    background: transparent;
    border-color: var(--border-hairline);
    color: var(--text-body);
}

.list-group-item:hover {
    background: var(--surface-card-hover);
    color: var(--text-primary);
}

.list-group-item.active {
    background: rgba(201, 162, 74, .10);
    border-color: var(--border-gold);
    color: var(--text-gold);
}

.page-link {
    background: transparent;
    border-color: var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--text-body);
}

.page-link:hover {
    background: var(--surface-card-hover);
    border-color: var(--border-gold);
    color: var(--text-gold);
}

.page-item.active .page-link {
    background-image: var(--gradient-gold);
    background-color: var(--gold-400);
    border-color: transparent;
    color: var(--text-on-gold);
}

.page-item.disabled .page-link {
    background: transparent;
    color: var(--neutral-700);
}

.dropdown-menu {
    background-color: var(--surface-card);
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    color: var(--text-body);
}

.dropdown-item {
    color: var(--text-body);
    font-size: var(--body-md);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-card-hover);
    color: var(--text-gold);
}

.dropdown-divider {
    border-color: var(--border-hairline);
}

.dropdown-header {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.breadcrumb {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.breadcrumb-item,
.breadcrumb-item.active {
    color: var(--text-muted);
}

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

.spinner-border {
    border-width: 1.5px;
    color: var(--gold-300);
}

.spinner-grow {
    background-color: var(--gold-300);
}

/* the carousel keeps its behaviour; only controls and indicators are skinned */
.carousel-control-prev,
.carousel-control-next {
    color: var(--text-gold);
    opacity: 1;
}

.carousel-indicators [data-bs-target] {
    width: 24px;
    height: 2px;
    background: var(--border-hairline);
    border: 0;
    opacity: 1;
}

.carousel-indicators .active {
    background-image: var(--gradient-gold);
}

.carousel-caption {
    color: var(--text-primary);
}

.figure-caption {
    color: var(--text-muted);
    font-size: var(--body-sm);
}

/* MODAL AND OFFCANVAS */
.modal-content {
    background-color: var(--surface-card);
    border: var(--hairline) solid var(--border-gold-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    color: var(--text-body);
}

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

.modal-title {
    font-family: var(--font-display);
    font-size: var(--display-sm);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--text-gold);
}

.modal-body {
    font-size: var(--body-md);
    line-height: var(--leading-body);
}

.modal-backdrop,
.offcanvas-backdrop {
    background-color: rgba(18, 17, 16, .72);
    -webkit-backdrop-filter: var(--blur-veil);
    backdrop-filter: var(--blur-veil);
    opacity: 1;
}

.offcanvas {
    background-color: var(--surface-card);
    border-color: var(--border-hairline);
    color: var(--text-body);
}

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

.offcanvas-title {
    font-family: var(--font-display);
    font-size: var(--display-sm);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--text-gold);
}

/* BRAND UTILITIES */
.lcg-display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    text-transform: uppercase;
    color: var(--text-gold);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.lcg-display-xl { font-size: var(--display-xl); }
.lcg-display-lg { font-size: var(--display-lg); }
.lcg-display-md { font-size: var(--display-md); }
.lcg-display-sm { font-size: var(--display-sm); }
.lcg-display-ink { color: var(--text-primary); }
.lcg-gold-text { color: var(--text-gold); }

.lcg-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.lcg-mono {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.lcg-wordmark {
    font-family: var(--font-display);
    font-size: var(--display-md);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    text-transform: uppercase;
    color: var(--gold-200);
}

.lcg-wordmark-inline {
    font-family: var(--font-display);
    font-size: var(--label-md);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold-200);
}

/* hairline seams — the signature structural device.
   Applied to a grid CELL, never to the grid classes themselves. */
.lcg-seam-start { border-left: var(--hairline) solid var(--border-hairline); }
.lcg-seam-end { border-right: var(--hairline) solid var(--border-hairline); }
.lcg-seam-top { border-top: var(--hairline) solid var(--border-hairline); }
.lcg-seam-gold { border-color: var(--border-gold); }

@media (width < 768px) {
    .lcg-seam-start,
    .lcg-seam-end {
        border-left: 0;
        border-right: 0;
        border-top: var(--hairline) solid var(--border-hairline);
    }
}

.lcg-rail {
    display: grid;
    place-items: center;
    min-width: 92px;
    padding: var(--space-5) 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-size: var(--display-sm);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--text-primary);
}

/* the corner arrow tile — a glyph, so it inherits the display face's tracking */
.lcg-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-left: var(--hairline) solid var(--border-gold);
    border-bottom: var(--hairline) solid var(--border-gold);
    background: transparent;
    color: var(--text-gold);
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease-standard),
                transform var(--dur-med) var(--ease-standard);
}

.lcg-arrow:hover {
    background: rgba(201, 162, 74, .10);
    color: var(--gold-100);
    transform: translate(2px, -2px);
}

.lcg-arrow-sm {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.lcg-card-gold .lcg-arrow,
.lcg-card-gold-soft .lcg-arrow {
    border-color: var(--ink-800);
    color: var(--text-on-gold);
}

.lcg-card-gold .lcg-arrow:hover,
.lcg-card-gold-soft .lcg-arrow:hover {
    background: rgba(27, 26, 25, .08);
    color: var(--ink-900);
}

.lcg-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #000;
}

.lcg-media > img,
.lcg-media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lcg-scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scrim-image);
    pointer-events: none;
}

.lcg-media-caption {
    position: absolute;
    left: var(--space-6);
    bottom: var(--space-5);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.lcg-media-caption .lcg-eyebrow {
    margin-bottom: 0;
    color: var(--gold-200);
}

/* stands in where no photograph exists yet — never a stock image */
.lcg-placeholder {
    display: grid;
    place-items: center;
    text-align: center;
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: repeating-linear-gradient(135deg, rgba(201, 162, 74, .10) 0 6px, rgba(201, 162, 74, 0) 6px 14px), var(--ink-900);
    color: var(--neutral-700);
    font-family: var(--font-mono);
    font-size: var(--label-sm);
    padding: var(--space-4);
}

.lcg-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0 var(--space-5);
}

.lcg-stat > b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--display-md);
    letter-spacing: var(--tracking-display);
    line-height: 1;
    color: var(--text-gold);
}

.lcg-stat > span {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.lcg-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--hairline) solid var(--border-hairline);
}

.lcg-price:last-child {
    border-bottom: 0;
}

.lcg-price > span:first-child {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-md);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-body);
}

.lcg-price > span:last-child {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.lcg-price b {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--body-lg);
    color: var(--text-primary);
}

.lcg-price i {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--body-sm);
    color: var(--text-muted);
}

.lcg-service {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    color: inherit;
}

.lcg-service-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: var(--text-gold);
    font-family: var(--font-display);
    font-size: 20px;
    transition: color var(--dur-fast) var(--ease-standard);
}

.lcg-service-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-md);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1.35;
    max-width: 14ch;
    transition: color var(--dur-fast) var(--ease-standard);
}

.lcg-service:hover .lcg-service-icon,
.lcg-service:hover .lcg-service-title {
    color: var(--gold-100);
}

.lcg-service-note {
    font-size: var(--body-sm);
    color: var(--text-muted);
}

/* the only pill in the system */
.lcg-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--body-sm);
    letter-spacing: .04em;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
}

.lcg-tag:hover {
    border-color: var(--border-gold);
    color: var(--text-gold);
}

.lcg-tag.is-selected {
    background: rgba(201, 162, 74, .12);
    border-color: var(--border-gold);
    color: var(--text-gold);
}

.lcg-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--gold-300);
    flex: 0 0 auto;
}

.lcg-dot-success { background: var(--success); }
.lcg-dot-danger { background: var(--danger); }
.lcg-dot-warning { background: var(--warning); }

.lcg-hr-gold {
    background: var(--border-gold);
    height: 1px;
    border: 0;
}

.lcg-hr-fade {
    background: var(--gradient-gold-line);
    height: 1px;
    border: 0;
}

.lcg-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
}

.lcg-section-tight {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.lcg-veil {
    background-color: rgba(27, 26, 25, .72);
    -webkit-backdrop-filter: var(--blur-veil);
    backdrop-filter: var(--blur-veil);
}

/* FOCUS AND MOTION */
:focus-visible {
    outline: 0;
    box-shadow: var(--glow-focus);
    border-radius: var(--radius-sm);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible,
.lcg-arrow:focus-visible,
.lcg-tag:focus-visible {
    outline: 0;
    box-shadow: var(--glow-focus);
}

@media (prefers-reduced-motion: reduce) {
    .card:hover,
    a.card:hover,
    .card-coin:hover,
    .lcg-arrow:hover {
        transform: none;
    }
}

/* a year that opens a sentence — set in the display face so it reads as a marker
   in the running prose. Sized in em so it tracks whatever paragraph holds it. */
.lcg-year {
    font-family: var(--font-display);
    font-size: 1.7em;
    letter-spacing: var(--tracking-display);
    line-height: 1;
    color: var(--text-gold);
    white-space: nowrap;
}

/* policy pages — the aside menu that links the legal set together */
.lcg-policy-nav {
    & a {
        display: block;
        padding: var(--space-3) 0;
        border-bottom: var(--hairline) solid var(--border-hairline);
        font-family: var(--font-body);
        font-weight: 700;
        font-size: var(--label-sm);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--text-muted);
    }

    & a:hover,
    & a:focus-visible,
    & a[aria-current="page"] {
        color: var(--text-gold);
    }

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

/* the well the CMS fills — long-form prose with no markup of its own */
.main-content {
    max-width: 72ch;

    &:empty {
        min-height: 40vh;
    }

    & :is(h2, h3, h4, h5, h6) {
        margin-top: var(--space-7);
        margin-bottom: var(--space-4);
    }

    & :is(p, ul, ol, table) {
        margin-bottom: var(--space-5);
    }

    & :is(ul, ol) {
        padding-left: var(--space-5);
    }

    & li {
        margin-bottom: var(--space-2);
    }

    & > :first-child {
        margin-top: 0;
    }

    & > :last-child {
        margin-bottom: 0;
    }
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .card, .card-coin, .header, .site-footer, .modal-content {
        background: #fff !important;
        color: #000 !important;
        border-color: #999 !important;
        box-shadow: none !important;
    }

    .lcg-display, .card-title, .lcg-gold-text, a {
        color: #000 !important;
    }

    .card.lcg-card-gold, .card.lcg-card-gold-soft, .btn-primary, .bg-primary {
        background-image: none !important;
        background: #eee !important;
        color: #000 !important;
    }

    .lcg-arrow, .hamburger {
        display: none !important;
    }
}

/* FILTERS */
.filter-invert { filter: invert(1); }
.filter-grayscale { filter: grayscale(1); }
.filter-gold { filter: var(--filter-gold); }

/*
    ======== GLOBAL STYLES ========
    These styles are to edit elements in the global scope like headers, blocks, contact page, shopping cart, product cards, product pages, hero section on the homepage.
    These styles are not for specific static pages like homepage blocks, about us, contact us, etc. If you need to update styles for specific static pages, please add them in the specific page's CSS file.
    These styles can manipulate the hero section, the header, the footer, and other global elements but not components like buttons, spaces, main variables, etc.
*/

/* Icons — theme-4 inlines several SVGs with a hardcoded dark fill, which
   disappears once the surfaces go to ink. Hand them back to currentColor. */
.icon svg [fill="black"],
.icon svg [fill="#3D3A3A"],
.icon svg [fill="#3d3a3a"],
.icon svg [fill="#000"],
.icon svg [fill="#000000"] {
    fill: currentColor;
}

/* Header */
.header {
    background-color: var(--bg-page-deep);
    color: var(--text-body);
}

.header-transparent {
    background-color: transparent;
}
.header-top,
.header-middle,
.header-bottom {
    background: #121110cc;
    background: rgb(from var(--ink-900) r g b / 0.7);
    backdrop-filter: var(--blur-sm);
}
.header-bottom {
    border-bottom-color: var(--border-hairline);
}
.header-top,
.header-middle {
    border: none;
}
.header-middle {
    position: relative;
    z-index: 51;
}

@media (width < 1200px) {
    .header-bottom {
        border-bottom: 0;
    }
}
.header-middle .search-box {
    display: grid;
    grid-template-columns: 1fr auto;
}
.header-middle .search-box .awesomplete .form-control {
    border-radius: 0;
    border-color: var(--border-hairline);
    outline-color: var(--border-hairline);
    box-shadow: none;

    &:hover {
        border-color: var(--border-gold);
    }
}
.header-middle .search-box .btn {
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 0;
    height: 100%;
    transition: border-color var(--dur-fast) var(--ease-standard);
    
    svg path {
        fill: var(--border-hairline);
        transition: fill var(--dur-fast) var(--ease-standard);
    }

    &:hover {
        border-color: var(--border-gold);
        svg path {
            fill: var(--border-gold);
        }
    }
}
.header a.custom-logo-link {
    width: 50px;
    transform: translateY(-5%);
}
@media (width > 390px) {
    .header a.custom-logo-link {
        width: 60px;
        transform: translateY(-10%);
    }
}
@media (width < 992px) {
    .header-top > .container > .row {
        justify-content: flex-end !important;

        > * {
            max-width: 80vw;
        }
    }
    .header-top > .container > .row > *:first-child,
    .spot-prices__container,
    .spot-prices__item {
        justify-content: flex-end;
    }
}
@media (576px < width < 992px) {
    .header a.custom-logo-link {
        width: 90px;
        transform: translateY(-34%);
    }
}
@media (width >= 992px) {
    .header a.custom-logo-link {
        width: 100px;
        transform: translateY(-34%);
    }
}
@media (width >= 1200px) {
    .header a.custom-logo-link {
        width: 110px;
        transform: translateY(10px);
    }
    .header-menu > ul > .menu-item {
        transform: translateX(130px);
    }
}
@media (width >= 1460px) {
    .header a.custom-logo-link {
        width: 130px;
    }
    .header-menu > ul > .menu-item {
        transform: translateX(150px);
    }
}
@media (max-width: 390px) {
    .header .text-base {
        font-size: 0.75rem !important;
    }
    .header-top > .container > .row {
        > *:first-child {
            max-width: 100%;
        }
    }
}

.header-menu > ul > .menu-item > a {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-md);
    letter-spacing: var(--tracking-label);
    color: var(--text-body);
    padding-bottom: 2px;
    border-bottom: var(--hairline) solid transparent;
    transition: color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

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

.header-menu > ul > .menu-item.current-menu-item > a,
.header-menu > ul > .menu-item.is-active > a {
    color: var(--text-gold);
    border-bottom-color: var(--border-gold);
}

.megamenu,
.hover-dropdown-menu {
    background-color: var(--surface-card);
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    color: var(--text-body);
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner::after {
    background-color: white;
    border-radius: 0;
}

/* Search — a recessed slot, matching the form treatment */
.search-box .awesomplete ul {
    border: var(--hairline) solid var(--border-hairline);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lift);
}

.search-box .awesomplete ul li.awesomplete-metadata-item {
    border-bottom-color: var(--border-hairline);
}

.search-box .awesomplete ul li:hover,
.search-box .awesomplete ul li[aria-selected="true"] {
    color: var(--text-gold);
}

/* Mobile Menu */
.mobile-menu__bar {
    background-color: var(--bg-page);
}
.mobile-menu__header {
    background-image: unset;
    background-color: var(--bg-page);
}
.mobile-menu__footer__close {
    color: black;
}
@media (max-width: 575.98px) {
    .mobile-menu__header {
        font-size: 0.9rem;
    }
}

/* Hero — the header is transparent over it, so the type needs its own ground */
.section-hero {
    position: relative;
    background-color: var(--bg-page-deep);
    color: var(--text-body);
}

.section-hero-content :is(h1, h2, .h1, .h2) {
    color: var(--gold-100);
}

.section-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 340px;
    background: linear-gradient(180deg, rgba(18, 17, 16, .88) 0%, rgba(18, 17, 16, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

@media (width >= 1200px) {
    .section-hero .glide__slide > .row > .col-xl-7 {
        display: flex;
        align-items: center;
    }
    .section-hero-content .display-1 {
        font-size: clamp(2.5rem, 2.5rem + 2vw, 3.5rem);
    }
    .section-hero .heading-block  {
        max-width: min(100%, 700px);
    }
    .section-hero::before {
        height: 100%;
        background: linear-gradient(100deg, var(--ink-800) 20%, rgba(18, 17, 16, 0) 60%);
    }
}

/* Footer */
.site-footer {
    background-color: var(--bg-page-deep);
    color: var(--text-body);
    border-top: var(--hairline) solid var(--border-hairline);
}

.site-footer__subscription {
    background-color: var(--surface-card);
    color: var(--text-body);
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
}

.site-footer :is(h1, h2, h3, h4, h5, h6, .text-uppercase) {
    color: var(--text-primary);
}

.site-footer a {
    color: var(--text-body);
}

.site-footer a:hover {
    color: var(--text-gold);
}

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

@media (width >= 992px) {
    .footer__links-container {
        flex-wrap: nowrap;
    }
}

/* Product cards — one step up from the page, separated by a hairline */
.card-coin {
    background-color: var(--surface-card);
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    color: var(--text-body);
    transition: border-color var(--dur-fast) var(--ease-standard),
                transform var(--dur-med) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}

.card-coin-header {
    background-color: white;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card-coin:hover {
    border-color: var(--border-gold);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.card-coin-title {
    font-family: var(--font-body);
    color: var(--text-body);
}

.card-coin-price {
    font-family: var(--font-mono);
    color: var(--text-primary);

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

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

.card-coin-meta {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--label-sm);
    color: var(--text-muted);
}

.card-coin-meta.in-stock { color: var(--success); }
.card-coin-meta.out-of-stock { color: var(--danger); }
.card-coin-meta.new { color: var(--gold-300); }
.card-coin-meta.pending { color: var(--warning); }

.card-coin-meta.in-stock > *,
.card-coin-meta.new > *,
.card-coin-meta.pending > * {
    background-color: transparent;
    border: var(--hairline) solid currentColor;
    border-radius: var(--radius-sm);
}

.card-coin-ribbon { --ribbon-color: var(--gold-400); }
.card-coin-ribbon.in-stock { --ribbon-color: var(--success); }
.card-coin-ribbon.out-of-stock { --ribbon-color: var(--danger); }

.card-coin-ribbon span {
    color: var(--ink-900);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
}

.card-coin .form-control {
    background-color: var(--surface-inset);
    color: var(--text-primary);
}

.card-coin-actions ::placeholder {
    color: var(--neutral-700);
}

.card-coin-expand,
.card-coin-expand-second {
    background-color: var(--surface-card);
    border-top: none;
    box-shadow: var(--shadow-lift);
}

@media (width >= 1200px) {
    .card-coin-expand,
    .card-coin-expand-second {
        border: var(--hairline) solid var(--border-hairline);
        border-top: none;
    }
}

.card-coin ::-webkit-scrollbar,
.card-coin ::-webkit-scrollbar-track {
    background-color: var(--surface-inset);
}

.card-coin ::-webkit-scrollbar-thumb {
    background-color: var(--border-hairline);
    border-radius: var(--radius-md);
}

/* Product page and catalog chrome */
.fm-control,
.fm-dropdown,
.sort-widget__container--inner,
.catalog-toolbar {
    background-color: var(--surface-card);
    border-color: var(--border-hairline);
    color: var(--text-body);
}

.catalog-toolbar {
    border-top: var(--hairline) solid var(--border-hairline);
}

.catalog-toolbar-icon {
    filter: invert(1);
}

.filepond--panel-root {
    background-color: var(--surface-inset);
}

#scroll-top-button {
    background-color: var(--surface-card);
    border: var(--hairline) solid var(--border-hairline);
    color: var(--text-gold);
}

#scroll-top-button:hover,
#scroll-top-button:active,
#scroll-top-button:focus {
    background-color: var(--surface-card-hover);
    border-color: var(--border-gold);
    color: var(--gold-100);
}

.catalog-list__content {
    .coins-row .col-lg-4 {
        padding-left: 2px;
        padding-right: 2px;
    }

    .accordeon-item-heading .arrow-toggle .icon {
        filter: invert(1);
    }

    .sort-widget__item {
        color: var(--text-muted);
    }

}

/* For ROW layout view */
.card-coin--horizontal .card-coin-header {
    border-radius: var(--radius-md);
}
@media (width >= 576px) {
    .card-coin--horizontal .card-coin-body {
        padding-left: 1rem !important;
    }
}

.catalog-list__bottom-description {
    .more-less:after {
        background-image: linear-gradient(0deg, var(--ink-800) 0, transparent 100%);
    }
}

/* Category pages */
.card-link {
    background-color: white;
    border: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;

    h3 {
        color: var(--bs-primary);
    }

    &:hover {
        background-color: white;
        border-color: var(--bs-primary);
        box-shadow: 2px 2px 8px #00000066;
        color: #000000;
        transform: translateY(-3px);
    }
}
.card-link:hover .card-link-icon {
    color: #000000;
}

/* Shopping cart and checkout */
.mini-cart {
    background-color: var(--surface-card);
    border: none;
    box-shadow: var(--shadow-lift);
    color: var(--text-body);
}

@media (width >= 576px) {
    .mini-cart {
        border-left: var(--hairline) solid var(--border-hairline);
    }
}

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

.mini-cart-header {
    position: relative;

    & > .btn {
        width: 100px;
        height: calc(100% + 2px);
        padding: 1rem;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: -1px;
        right: -1px;
        border-radius: 0;
        bottom: 0;

        .icon {
            filter: invert(1);
        }
    }
}

@media (width < 1200px) {
    .mini-cart-body {
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }
}


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

.cart-item-price {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.cart-item-remove {
    color: var(--text-muted);
}

.cart-item-remove:hover {
    color: var(--danger);
}

.checkout-section {
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.checkout-payment-modal .modal-header {
    background: transparent;
}

.input-number-control {
    border-radius: var(--radius-sm);
}


/* TOP ITEMS */
.table.top-items td > img {
    object-fit: contain;
}
.table.top-items td {
    padding: 0.5rem 12px;
}
.table.top-items .product-item-name {
    min-width: 170px;
}
.table.top-items td:last-child {
    flex-wrap: wrap;
}