/* ============================================================================
   Beantown Coin and Jewelry — theme-4 override layer
   Dark neumorphism + gold (source: .claude/bcj-design-skill)
   ========================================================================== */

:root {
    /* __Ink — surfaces__ */
    --bcj-black: #141416;
    --bcj-ink-900: #1c1c1f;
    --bcj-ink-800: #232428;
    --bcj-ink-700: #28292d;
    --bcj-ink-600: #2d2f34;
    --bcj-ink-500: #32353a;
    --bcj-ink-400: #3d4046;
    --bcj-ink-300: #5a5d63;

    /* __Light neutrals — text__ */
    --bcj-white: #f0f1f1;
    --bcj-gray-100: #e4e5e6;
    --bcj-gray-200: #d9d9d9;
    --bcj-gray-300: #b4b6b9;
    --bcj-gray-400: #8c8f94;

    /* __Gold — the only accent__ */
    --bcj-gold-100: #f5e6cb;
    --bcj-gold-200: #efd8b1;
    --bcj-gold-300: #e5cba3;
    --bcj-gold-400: #d6b790;
    --bcj-gold-500: #c9a87c;
    --bcj-gold-600: #bb946b;
    --bcj-gold-700: #9a7650;
    --bcj-gold-800: #6e5438;

    --bcj-success: #9cc4a0;
    --bcj-danger: #e0968a;
    --bcj-warning: #e5cba3;

    /* __Gradients__ */
    --gradient-gold: linear-gradient(90deg, #efd8b1 0%, #d6b790 50%, #bb946b 100%);
    --gradient-gold-text: linear-gradient(100deg, #efd8b1 0%, #e2c398 45%, #c9a27a 100%);
    --gradient-gold-text-2: linear-gradient(100deg, var(--bcj-gold-700) 0%, var(--bcj-gold-800) 45%, var(--bcj-gold-800) 100%);
    --gradient-gold-radial: radial-gradient(circle at 30% 25%, #f3dfbc 0%, #d6b790 55%, #b38c63 100%);
    --gradient-section: linear-gradient(180deg, #2c2e33 0%, #32353a 100%);
    --ripple-x: 75%;
    --ripple-y: 50%;
    --bg-ripple: radial-gradient(circle 340px at var(--ripple-x) var(--ripple-y), rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, 0) 70px, rgba(0, 0, 0, .10) 110px, rgba(255, 255, 255, .018) 150px, rgba(0, 0, 0, .08) 195px, rgba(255, 255, 255, .012) 240px, rgba(0, 0, 0, .05) 285px, rgba(255, 255, 255, 0) 340px);

    /* __Semantic aliases__ */
    --surface-page: var(--bcj-ink-900);
    --surface-section: var(--bcj-ink-500);
    --surface-card: var(--bcj-ink-700);
    --surface-card-raised: var(--bcj-ink-600);
    --surface-inset: var(--bcj-ink-900);
    --text-heading-solid: var(--bcj-gold-300);
    --text-primary: var(--bcj-white);
    --text-secondary: var(--bcj-gray-200);
    --text-muted: var(--bcj-gray-400);
    --text-accent: var(--bcj-gold-300);
    --text-on-gold: var(--bcj-ink-900);
    --border-gold: var(--bcj-gold-500);
    --border-gold-strong: var(--bcj-gold-300);
    --border-subtle: rgba(255, 255, 255, .05);
    --focus-ring: rgba(229, 203, 163, .35);

    /* __Type scale — sizes/weights only, font family stays theme default__ */
    --fs-display-1: 4.5rem;
    --fs-display-2: 4rem;
    --fs-display-3: 3.5rem;
    --fs-display-4: 3rem;
    --fs-display-5: 2.75rem;
    --fs-display-6: 2.25rem;
    --fs-1: 2.75rem;
    --fs-2: 2.25rem;
    --fs-3: 1.75rem;
    --fs-4: 1.375rem;
    --fs-5: 1.125rem;
    --fs-6: 1rem;
    --fs-lead: 1.125rem;
    --fs-small: .875rem;
    --fw-heading: 600;
    --fw-button: 500;
    --lh-heading: 1.05;
    --ls-heading: -.005em;

    /* __Shape__ */
    --radius-4: .75rem;
    --radius-5: 1rem;
    --radius-6: 1.5rem;
    --radius-7: 2rem;
    --radius-8: 3rem;
    --radius-pill: 100rem;

    /* __Neumorphic shadows — cards and .btn-primary only__ */
    --shadow-raised: 10px 10px 24px rgba(0, 0, 0, .4), -6px -6px 18px rgba(255, 255, 255, .03);
    --shadow-raised-lg: 18px 18px 44px rgba(0, 0, 0, .55), -10px -10px 30px rgba(255, 255, 255, .035);
    --shadow-raised-sm: 6px 6px 14px rgba(0, 0, 0, .3), -4px -4px 10px rgba(255, 255, 255, .025);
    --shadow-inset: inset 5px 5px 12px rgba(0, 0, 0, .5), inset -4px -4px 10px rgba(255, 255, 255, .035);
    --shadow-gold-btn: 4px 2px 18px rgba(0, 0, 0, .5), -3px -3px 13px rgba(226, 208, 186, 0.25);
    --shadow-gold-btn-hover: 5px 4px 24px rgba(0, 0, 0, .55), -6px -6px 16px rgba(226, 208, 186, 0.35);
    --shadow-gold-btn-press: 4px 3px 8px rgba(0, 0, 0, .5);
    --shadow-morph: 12px 12px 20px rgba(0, 0, 0, .22), 3px 3px 7px rgba(0, 0, 0, .22), inset -4px -4px 4px rgba(0, 0, 0, .22), -5px -5px 10px rgba(255, 255, 255, .15), inset 2px 2px 4px rgba(255, 255, 255, .08);
    --shadow-morph-sm: 2px 2px 4px rgba(0, 0, 0, .22), inset -1px -1px 2px rgba(0, 0, 0, .22), -2px -2px 4px rgba(255, 255, 255, .3), inset 1px 1px 2px rgba(255, 255, 255, .3);
    --shadow-morph-lg: 16px 16px 32px rgba(0, 0, 0, .22), 5px 5px 10px rgba(0, 0, 0, .22), inset -6px -6px 12px rgba(0, 0, 0, .22), -12px -12px 24px rgba(255, 255, 255, .08), inset 6px 6px 12px rgba(255, 255, 255, .08);
    --shadow-morph-inset: inset 4px 4px 8px rgba(0, 0, 0, .32), inset -3px -3px 6px rgba(255, 255, 255, .05);
    --shadow-morph-inset-sm: inset 2px 2px 4px rgba(0, 0, 0, .32), inset -3px -3px 6px rgba(255, 255, 255, .05);
    --shadow-morph-inset-lg: inset 8px 8px 16px rgba(0, 0, 0, .32), inset -5px -5px 10px rgba(255, 255, 255, .05);

    /* __Motion__ */
    --ease-standard: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;

    /* To update theme colors */
    --bs-primary: var(--bcj-gold-400);
    --bs-primary-rgb: 214, 183, 144;
    --bs-secondary: var(--bcj-ink-500);
    --bs-secondary-rgb: 50, 53, 58;
    --bs-success: var(--bcj-success);
    --bs-success-rgb: 156, 196, 160;
    --bs-danger: var(--bcj-danger);
    --bs-danger-rgb: 224, 150, 138;
    --bs-warning: var(--bcj-warning);
    --bs-warning-rgb: 229, 203, 163;
    --bs-info: var(--bcj-gold-300);
    --bs-info-rgb: 229, 203, 163;
    --bs-dark: var(--bcj-ink-900);
    --bs-dark-rgb: 28, 28, 31;
    --bs-extra-dark: var(--bcj-black);
    --bs-extra-dark-rgb: 20, 20, 22;
    --bs-body-bg: var(--surface-page);
    --bs-body-color: var(--text-secondary);
    --bs-body-rgb: 217, 217, 217;

    /* __theme-4 surface tokens__ — main.css reads these before its own fallbacks */
    --ppm-body-bg: var(--surface-page);
    --ppm-body-secondary-bg: var(--surface-card);
    --ppm-main-bg: var(--surface-card);
    --ppm-main-text: var(--text-secondary);
    --ppm-main-accent: var(--text-accent);
    --ppm-secondary-bg: var(--surface-card-raised);
    --ppm-menu-bg: var(--surface-card-raised);
    --ppm-menu-text: var(--text-secondary);
    --ppm-menu-accent-text: var(--text-accent);
    --ppm-submenu-bottom-radius: var(--radius-4);
    --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(214, 183, 144, .08);
    --ppm-account-menu-hover-color: var(--bcj-gold-200);
    --ppm-account-menu-current-hover-icon: invert(0.7) sepia(5) hue-rotate(346deg) saturate(1.4);
    --ppm-body-bg__transparent: rgba(214, 183, 144, .08);
    --ppm-primary-search-bg: var(--surface-inset);
    --ppm-form-input-bg: var(--surface-inset);
    --ppm-form-input-color: var(--text-accent);
    --ppm-border-color: var(--border-subtle);
    --ppm-pagination-border-color: var(--border-gold);
    --ppm-primary-text: var(--text-secondary);
    --ppm-faded-text: var(--text-muted);
    --ppm-products-card-text: var(--text-secondary);
    --ppm-icons-contrast-filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}

/*
    ======== 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. Do not change the main.css file. If you need to update styles for existing components, please add them here.
*/

/* TYPOGRAPHY */
h1, .h1, h2, .h2, h3, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);

    &:not(.text-dark, .text-light, .text-extra-dark) {
        background: var(--gradient-gold-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

h4, .h4, h5, .h5, h6, .h6 {
    font-weight: var(--fw-heading);
    color: var(--text-heading-solid);
}

/* .display-1 { font-size: clamp(calc(var(--fs-display-1) * .65), calc(1.2rem + 3.2vw), var(--fs-display-1)); }
.display-2 { font-size: clamp(calc(var(--fs-display-2) * .65), calc(1.2rem + 3.2vw), var(--fs-display-2)); }
.display-3 { font-size: clamp(calc(var(--fs-display-3) * .65), calc(1.2rem + 3.2vw), var(--fs-display-3)); }
.display-4 { font-size: clamp(calc(var(--fs-display-4) * .65), calc(1.2rem + 3.2vw), var(--fs-display-4)); }
.display-5 { font-size: clamp(calc(var(--fs-display-5) * .65), calc(1.2rem + 3.2vw), var(--fs-display-5)); }
.display-6 { font-size: clamp(calc(var(--fs-display-6) * .65), calc(1.2rem + 3.2vw), var(--fs-display-6)); }
h1, .h1 { font-size: clamp(calc(var(--fs-1) * .75), calc(1rem + 1.6vw), var(--fs-1)); }
h2, .h2 { font-size: clamp(calc(var(--fs-2) * .75), calc(1rem + 1.6vw), var(--fs-2)); }
h3, .h3 { font-size: clamp(calc(var(--fs-3) * .75), calc(1rem + 1.6vw), var(--fs-3)); }
h4, .h4 { font-size: var(--fs-4); }
h5, .h5 { font-size: var(--fs-5); }
h6, .h6 { font-size: var(--fs-6); } */

.lead {
    font-size: var(--fs-lead);
    font-weight: 400;
    color: #fcfcfc;
}

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

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

.text-muted__darker {
    color: var(--bcj-gray-300);
}

/* New elements for components */
.text-gradient-gold {
    background: var(--gradient-gold-text) !important;
}
.text-gradient-gold-2 {
    background: var(--gradient-gold-text-2) !important;
}
.text-gradient-gold,
.text-gradient-gold-2 {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.text-eyebrow {
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bs-light);
}

.hiper-text,
.hiper-text-2,
.hiper-text-3 {
    font-size: clamp(7rem, 14vw, 15rem);
    font-weight: 800;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to bottom, rgba(0,0,0, 0.3) 0%, transparent 80%);
    -webkit-background-clip: text;
    background-clip: text;
}
.hiper-text-2 {
    font-size: clamp(5rem, 10vw, 12rem);
}
.hiper-text-3 {
    font-size: clamp(5rem, 8vw, 10rem);
}

/* BLOCKQUOTES */
/* main.css owns the layout (padding-left for the quote mark, margins) — only color and mark change */
blockquote {
    color: var(--text-primary);
    font-weight: 500;

    &:before {
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='35' viewBox='0 0 40 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='40' y2='35' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23efd8b1'/%3E%3Cstop offset='.5' stop-color='%23d6b790'/%3E%3Cstop offset='1' stop-color='%23bb946b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M22.8184 0V17.4415H34.2272C34.2272 23.8529 29.1091 29.0692 22.8184 29.0692V34.8831C32.2552 34.8831 39.9317 27.0594 39.9317 17.4415V0L22.8184 0Z' fill='url(%23g)'/%3E%3Cpath d='M0 17.4415H11.4089C11.4089 23.8529 6.29073 29.0692 0 29.0692V34.8831C9.43688 34.8831 17.1134 27.0594 17.1134 17.4415V0H0V17.4415Z' fill='url(%23g)'/%3E%3C/svg%3E");
    }
}

.blockquote-footer {
    color: var(--text-muted);

    &:before {
        color: var(--text-accent);
    }
}

/* LINKS */
a {
    color: var(--text-accent);
    transition: color var(--dur-base);

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

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

/* BUTTONS */
/* Update current styles — .btn::before is theme-4's loading spinner, .btn-icon/.btn-xs keep their own sizing */
.btn {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-button);
    letter-spacing: .01em;
    box-shadow: none;
    transition: box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base), filter var(--dur-base), transform var(--dur-fast);

    &:not(.btn-icon, .btn-xs, .btn-link) {
        padding: .75rem 1.75rem;
    }

    &:focus-visible {
        outline: 2px solid var(--border-gold-strong);
        outline-offset: 3px;
        box-shadow: none;
    }
}

.btn.btn-morph {
    box-shadow: var(--shadow-morph-sm) !important;
    background: linear-gradient(120deg, rgba(0,0,0,0.03), transparent);
    border: none;
}

.btn-sm:not(.btn-icon) {
    padding: .5rem 1.25rem;
    font-size: .8125rem;
}

.btn-lg:not(.btn-icon) {
    padding: .9rem 2.125rem;
    font-size: 1rem;
}

.btn-icon-morph,
.btn-icon.btn-icon-morph {
    box-shadow: var(--shadow-morph-inset-sm) !important;
    border: none;
}

.slider-hero .glide__slide--active .heading-block-footer .btn-light,
.btn-primary {
    color: var(--text-on-gold);
    background-color: var(--bcj-gold-400);
    background-image: var(--gradient-gold);
    border-color: var(--bcj-gold-300);
    box-shadow: var(--shadow-gold-btn);

    &:hover,
    &:focus {
        color: var(--text-on-gold);
        background-color: var(--bcj-gold-400);
        border-color: var(--bcj-gold-300);
        box-shadow: var(--shadow-gold-btn-hover);
        filter: brightness(1.04);
    }

    &:active,
    &.active {
        color: var(--text-on-gold);
        background-color: var(--bcj-gold-500);
        border-color: var(--bcj-gold-300);
        box-shadow: var(--shadow-gold-btn-press);
        transform: translateY(1px);
    }

    &:disabled,
    &.disabled {
        color: var(--text-on-gold);
        background-color: var(--bcj-gold-600);
        border-color: var(--bcj-gold-300);
        box-shadow: none;
        opacity: .4;
    }
}

.btn-outline-primary,
.btn-outline-light,
.btn-outline-dark {
    background-color: transparent;
    border-color: var(--bcj-gold-300);
    box-shadow: none !important;

    &:hover,
    &:focus {
        background-color: rgba(214, 183, 144, .08);
        border-color: var(--bcj-gold-300);
        color: var(--bcj-gold-200);
    }

    &:active,
    &.active {
        background-color: rgba(214, 183, 144, .14);
        border-color: var(--bcj-gold-300);
        color: var(--bcj-gold-200);
    }

    &:disabled {
        background: transparent;
        color: var(--text-muted);
        border-color: var(--bcj-ink-300);
    }
}

.btn-outline-primary {
    color: var(--text-accent);
}

.btn-outline-light {
    color: var(--text-secondary);
}

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

    &:hover,
    &:focus {
        color: var(--bcj-ink-700);
        border-color: var(--bcj-ink-700);
    }
}

.btn-secondary,
.btn-dark {
    color: var(--text-secondary);
    background-color: var(--bcj-ink-600);
    border-color: transparent;
    box-shadow: none;

    &:hover {
        color: var(--text-primary);
        background-color: var(--bcj-ink-500);
        border-color: transparent;
    }
}

.btn-link {
    color: var(--text-accent);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .4em;
    box-shadow: none !important;

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

/* Product pages */
.catalog-list__content {
    background: linear-gradient(to bottom, transparent 50%, var(--bcj-ink-600) 100%);
}

/* theme-4 already sizes .btn-icon — only shape and fill change */
.btn-icon {
    border-radius: var(--radius-pill);
    box-shadow: none !important;

    &.btn-primary {
        background-image: var(--gradient-gold-radial);
        color: var(--bcj-ink-900);
    }
}

.link-follow__icon {
    filter: invert(0.7) sepia(5) hue-rotate(346deg) saturate(1.4);
}

/* FORMS */
.form-control,
.form-select {
    background-color: var(--surface-inset);
    color: var(--text-accent);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-pill);
    box-shadow: none;

    &::placeholder {
        color: var(--bcj-gold-400);
        opacity: 1;
    }

    &:focus {
        background-color: var(--surface-inset);
        color: var(--text-accent);
        border-color: var(--border-gold-strong);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

    &:disabled {
        background-color: var(--surface-inset);
        opacity: .45;
    }

    &.is-invalid {
        border-color: var(--bcj-danger);
    }

    &.is-valid {
        border-color: var(--bcj-success);
    }
}

textarea.form-control {
    border-radius: var(--radius-5);
}

.form-label {
    color: var(--text-secondary);
    font-weight: 500;
}

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

    &:focus {
        border-color: var(--border-gold-strong);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

    &:checked {
        background-color: var(--bcj-gold-400);
        border-color: transparent;
    }
}

/* CARDS */
.card {
    background-color: var(--surface-card);
    color: var(--text-secondary);
    /* border: 1px solid var(--border-subtle); */
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-raised);
}

.card-light {
    background-color: var(--surface-card-raised);
    box-shadow: var(--shadow-raised);
}

.card-title {
    font-weight: var(--fw-heading);
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* New elements for components */
.card-pattern {
    position: absolute;
    top: .75rem;
    right: 1rem;
    width: 3rem;
    height: auto;
    pointer-events: none;
}

.hero-ripple {
    background-color: var(--surface-card);
    background-image: var(--bg-ripple);
}

.section-notch {
    display: grid;
    place-items: center;
    width: 4.375rem;
    height: 1.375rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: var(--surface-page);
    border-radius: 0 0 .375rem .375rem;
    color: var(--bcj-gray-300);
    cursor: pointer;
}

/* BACKGROUNDS & SHADOWS */
.bg-dark {
    background-color: var(--surface-page) !important;
}

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

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

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

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

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

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

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

/* New elements for components */
.shadow-inset {
    box-shadow: var(--shadow-inset) !important;
}



.bg-section-gradient {
    background-image: var(--gradient-section) !important;
}

.rounded-4 { border-radius: var(--radius-4) !important; }
.rounded-5 { border-radius: var(--radius-5) !important; }
.rounded-6 { border-radius: var(--radius-6) !important; }
.rounded-7 { border-radius: var(--radius-7) !important; }
.rounded-8 { border-radius: var(--radius-8) !important; }

/* OVERLAYS */
.dropdown-menu {
    background-color: var(--surface-card-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-raised);
}

.modal-content {
    background-color: var(--surface-card);
    border-color: var(--border-subtle);
    border-radius: var(--radius-5);
    box-shadow: var(--shadow-raised-lg);
}

.badge {
    border-radius: var(--radius-pill);
    font-weight: 500;
}

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

/* TABLES & LISTS — main.css hardcodes dark text on white */
.table {
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: rgba(255, 255, 255, .02);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: rgba(214, 183, 144, .08);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: rgba(214, 183, 144, .05);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}

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

.border {
    border-color: var(--border-subtle) !important;
}

.list-inline .list-item a.btn-icon.btn-primary, 
.list-inline li a.btn-icon.btn-primary {
    color: var(--bcj-ink-900);
}

/*
    ======== GLOBAL STYLES ========
    These styles are to edit elements in the global scope like headers, blocks, contact page, shopping cart, product cards, product pages.
    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.
*/

/* Body */
html {
    color-scheme: dark;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Header */
.header {
    background-color: var(--surface-page);
    color: var(--text-secondary);
    box-shadow: 5px 0px 50px rgba(0, 0, 0, .4);
}

.header-top,
.header-middle,
.header-bottom {
    border-bottom-color: var(--border-subtle);
}

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

.megamenu {
    background-color: var(--surface-card-raised);
    box-shadow: var(--shadow-raised);
}

/* Header account dropdown */
.hover-dropdown:hover > a {
    opacity: 1;
    color: var(--text-accent);
}

.hover-dropdown-menu {
    background-color: var(--surface-card-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-raised);
    padding: .5rem;

    &.list-block li {
        font-size: var(--fs-small);
        padding-left: 0;
    }

    a {
        padding: .5rem 1rem;
        border-radius: var(--radius-pill);
        color: var(--text-secondary);
        transition: color var(--dur-base), background-color var(--dur-base);

        &:hover {
            opacity: 1;
            color: var(--bcj-gold-200);
            background-color: rgba(214, 183, 144, .08);
        }
    }
}

/* Catalog toolbar — product count, sort widget, grid/list toggle */
.catalog-actions {
    padding: .5rem 1.25rem;
    background-color: var(--surface-card);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-morph-inset-sm);
    color: var(--text-secondary);

    .btn-reset:hover {
        color: var(--text-accent);
    }

    .icon:not(.text-muted) {
        color: var(--text-accent);
    }
}
.catalog-actions:not(:has( .sort-widget__container)) {
    flex-direction: column;
}

.sort-widget__button {
    background-color: transparent;
    color: var(--text-secondary);
    transition: color var(--dur-base);

    &:hover {
        color: var(--text-accent);
    }
}

.sort-widget__container {
    right: 0;
    margin-top: .75rem;
}

.sort-widget__container--inner {
    background-color: var(--surface-card-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-raised);
}

.sort-widget__item {
    padding: .5rem 1rem;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    transition: color var(--dur-base), background-color var(--dur-base);

    &:hover {
        color: var(--bcj-gold-200);
        background-color: rgba(214, 183, 144, .08);
    }
}

.card-link {
    background: #ffffff;
    transition: background-color var(--dur-base), transform var(--dur-base);

    h3 {
        background: var(--gradient-gold-text-2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .icon {
        filter: brightness(0.4);
    }

    &:hover {
        background: #ffffff;
        transform: translateY(-3px);
    }
}

/* Footer */
.site-footer {
    background-color: var(--bcj-ink-800);
    color: var(--text-secondary);
}

.site-footer__subscription {
    background-color: var(--surface-card);
    color: var(--text-secondary);
}

.footer-newsletter-banner {
  background: linear-gradient(120deg, var(--bcj-gold-300), var(--bcj-gold-700));
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  border: 1px solid var(--bcj-gold-300);
  box-shadow: var(--shadow-raised);
}

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

/* Product cards */
.card-coin {
    background-color: var(--surface-card);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-raised-sm);

    .card-coin-header {
        background-color: white;
        border-top-left-radius: var(--radius-4);
        border-top-right-radius: var(--radius-4);
    }

    .card-coin-expand {
        background-color: var(--surface-card);

        .card-coin-body {
            height: 100%;
        }

        table {
            color: white !important;
            font-size: var(--fs-small) !important;
        }
    }

    &:hover {
        box-shadow: var(--shadow-raised);
    }
}

.card-coin-price small {
    color: #b5b5b5;
}

@media (width < 1460px) {
    .col-lg-4:has( > .product-card) {
        padding: 0 0.25rem;
    }
}
@media (width < 576px) {
    .product-card {
        width: 100%;
        max-width: 100%;
    }
}

/* Product Page */
.product-view__details table {
    color: white;
}
.gallery-slider .glide__slide,
.product-view__gallery-thumbnails .gallery-slider-thumbnails-imgholder {
    background-color: white;
}
.gallery-slider-thumbnails .glide__arrow svg {
    filter: invert(1);
}

.more-less:after {
    background-image: linear-gradient(180deg, hsla(0, 0%, 97%, 0), var(--bcj-ink-900));
}
.more-less-end .more-less-toggle {
    color: white !important;
    border-color: white !important;
}

/* Top items & top items plus */
.table.top-items th,
.table.top-items-plus tr th {
    border-bottom-color: var(--border-gold) !important;
}

@media (width < 768px) {
    .table.top-items tr {
        box-shadow: 0 0 0 1px var(--border-subtle);
        border-radius: var(--radius-4);
    }
}

.table.top-items-plus {
    caption {
        color: var(--text-muted);
    }

    tr td,
    tr td:last-child {
        border-bottom-color: var(--border-subtle);
    }
}

/* Checkout — payment methods (hover tint comes from --ppm-body-bg__transparent) */
.payment-method.disabled::after {
    background: var(--surface-page);
}

.checkout-section.is-blocked .section-block {
    background-color: rgba(28, 28, 31, .6);
}

/* Account pages */
.my-account {
    .form-control {
        background-color: var(--surface-inset);
    }

    .form-check label:before {
        border-color: var(--border-gold) !important;
    }

    .form-check input:checked + label:before {
        border-color: var(--border-gold-strong) !important;
    }

    .text-dark {
        color: var(--text-accent) !important;
    }
}

.avatar {
    background-color: var(--bcj-gold-400);
    background-image: var(--gradient-gold);
}

/* Modals, scroll-top, uploads — hardcoded white surfaces in main.css */
#scroll-top-button {
    background-color: var(--surface-card-raised);
    color: var(--text-accent);
}

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

/* Hero */
.section-hero {
    position: relative;
    background-image: unset;
    background: linear-gradient(120deg, var(--bcj-ink-800), var(--bcj-ink-600)) !important;
    box-shadow: var(--shadow-raised);
    --hero-bg-dark: var(--bcj-ink-800);
    --hero-bg-light: var(--bcj-ink-500);

    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 55%;
        left: 70%;
        width: 50%;
        height: auto;
        transform: translate(-50%, -50%);
        aspect-ratio: 1 / 1;
        background: linear-gradient(135deg, var(--hero-bg-dark), var(--hero-bg-light));
        box-shadow: 5vw 5vw 10vw 7px var(--hero-bg-dark), 2vw 2vw 2vw 7px var(--hero-bg-dark),
            inset -1vw -1vw 2vw var(--hero-bg-dark), inset 0.6vw 0.6vw 1vw var(--hero-bg-light),
            -5vw -5vw 8vw 7px var(--hero-bg-light), -2vw -2vw 2vw 7px var(--hero-bg-light);
        border-radius: var(--radius-pill);
        will-change: transform;
    }
    &:after {
        transform: translate(-50%, -50%) scale(0.7);
    }
    @media (width < 1200px) {
        &:before,
        &:after {
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
        }
        &:after {
            transform: translate(-50%, -50%) scale(0.8);
        }
    }
    @media (width < 576px) {
        &:before,
        &:after {
            width: 140%;
            top: 45%;
        }
    }

}
@media (width >= 1200px) {
    .section-hero .glide__slide {
        padding: 0.5rem;

        > * {
            align-items: center;
        }
    }
    .slider-hero .glide__arrows {
        width: 99vw;

        .glide__arrow {
            padding: 0.5rem;
            background-color: var(--bcj-ink-800);
            background-image: url(/themes/theme-4/assets/images/icons/icon-arrow-down-light.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 25%;
            border-radius: var(--radius-4);
            width: 4rem;
            height: 4rem;
        }
        .glide__arrow--left {
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
            background-image: url(/themes/theme-4/assets/images/icons/icon-arrow-down-light.svg);
            transform: rotate(90deg);

            &:hover {
                transform: rotate(90deg) scale(1.1);
            }
        }
        .glide__arrow--right {
            box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.3);
            transform: rotate(270deg);

            &:hover {
                transform: rotate(270deg) scale(1.1);
            }
        }
    }
}

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

.payment-method-form a strong,
.checkout-section-header-data .data-actions button.text-dark {
    color: white !important;
}

.payment-method-form-submit .offset-md-6 {
    margin-left: 0;
}

/* Mobile Menu */
.mobile-menu__header,
.mobile-menu__bar {
    background-color: var(--bcj-ink-900);
    background-image: none;
}

.mobile-menu__footer__actions .btn-link {
    color: var(--text-accent) !important;
}

/* LOGO */
.header .custom-logo-link {
    max-width: 100px;
}
.header .custom-logo-link img {
    margin-top: -0.5rem;
}
@media (width >= 768px) {
    .header-top__icon-section {
        display: none;
    }
    .header-top {
        height: 45px;
    }
    .header-top .text-base {
        font-size: 0.75rem !important;
    }
}
@media (width >= 576px) {
    .header .custom-logo-link {
        max-width: 120px;
        height: 80px;
    }
    .header .custom-logo-link img {
        margin-top: -0.5rem;
    }
}
@media (width >= 992px) {
    .header-middle {
        height: 100px;
    }
    .header .custom-logo-link {
        max-width: 140px;
    }
    .header .custom-logo-link img {
        margin-top: -1rem;
    }
}
@media (width >= 1460px) {
    .header-middle {
        height: 120px;
    }
    .header .custom-logo-link {
        max-width: 170px;
    }
    .header .custom-logo-link img {
        margin-top: -2rem;
    }
}

#scroll-top-button {
    border-color: var(--bs-primary);
    svg path {
        fill: var(--bs-primary);
    }
}

/* Calendar Section */
.event_card {
    background-color: var(--bcj-ink-600);
    box-shadow: 4px 12px 24px rgba(0, 0, 0, 0.2), inset 2px 2px 3px rgba(225, 225, 255, 0.05), inset -2px -2px 3px rgba(0,0,0,0.3);
}
.event_card:not(:last-child) {
    border-color: var(--bcj-ink-800);
}
.event_card__button .icon {
    filter: invert(1);
}
.section-calendar .btn .icon svg path {
    fill: var(--bcj-ink-100);
}

/* Alerts */
.contact-us-page-section .alert-warning .form-label {
    color: black;
}