/* ==========================================================================
   THE ART OF BLEND — GALLERY IVORY + GOLD THEME
   Option 1: Soft Ivory + Warm Cream + Deep Cocoa + Refined Gold Accent
   
   Palette:
     Ivory (bg primary):   #faf8f4  — soft warm white
     Cream (bg surface):   #f2ede4  — warm cream sections
     Linen (bg card):      #f9f5ef  — card and input backgrounds
     Cocoa (text main):    #3d2b1f  — deep readable brown (~14:1 on ivory)
     Stone (text muted):   #7a6858  — secondary/muted text (~4.6:1 on ivory)
     Gold (accent only):   #a07830  — refined dark gold for buttons, borders, icons
     Gold hover:           #8a6425  — deepened for hover states
     Gold light:           #c9a84c  — lighter gold for subtle decorative lines
     Gold bg-tint:         rgba(160,120,48,0.08) — barely-there gold wash for badges
   
   Contrast ratios (WCAG 2.1):
     Cocoa #3d2b1f on Ivory #faf8f4  → ~14:1  ✓ AAA
     Stone #7a6858 on Ivory #faf8f4  → ~4.6:1 ✓ AA
     Cocoa #3d2b1f on Cream #f2ede4  → ~12:1  ✓ AAA
     Cocoa #3d2b1f on Linen #f9f5ef  → ~13:1  ✓ AAA
     Ivory #faf8f4 on Gold  #a07830  → ~4.6:1 ✓ AA  (buttons only, large text)
   ========================================================================== */

/* ------------------------------------------------------------------
   1. ROOT VARIABLE OVERRIDES
   These override the design-system.css variables globally.
   ------------------------------------------------------------------ */
:root {
    /* Background surfaces */
    --bg-ivory:        #faf8f4;
    --bg-cream:        #f2ede4;
    --bg-linen:        #f9f5ef;
    --bg-white:        #ffffff;
    --bg-light:        #f2ede4;       /* replaces old #f9f9f9 */

    /* Text colours (WCAG-safe on all bg surfaces) */
    --text-main:       #3d2b1f;       /* deep cocoa — primary body text */
    --text-muted:      #7a6858;       /* warm stone — secondary/caption text */
    --text-light:      #a39485;       /* tertiary — placeholders, disabled */

    /* Accent gold — used ONLY for highlights, icons, borders, small labels */
    --primary-gold:         #a07830;
    --primary-gold-hover:   #8a6425;
    --primary-gold-light:   #c9a84c;
    --primary-gold-tint:    rgba(160, 120, 48, 0.08);
    --primary-gold-border:  rgba(160, 120, 48, 0.22);

    /* Legacy dark tokens — neutralised for light theme */
    --secondary-dark:       #3d2b1f;
    --secondary-dark-hover: #2a1d14;

    /* Shadows on light surfaces */
    --shadow-soft:    0 2px 16px rgba(61, 43, 31, 0.07);
    --shadow-hover:   0 8px 28px rgba(61, 43, 31, 0.12);
    --shadow-card:    0 1px 8px  rgba(61, 43, 31, 0.06);

    /* Border tokens */
    --border-soft-gold: rgba(160, 120, 48, 0.22);
    --border-light:     rgba(61, 43, 31, 0.10);
}

/* ------------------------------------------------------------------
   2. GLOBAL BODY & BASE ELEMENTS
   ------------------------------------------------------------------ */
body {
    background-color: var(--bg-ivory) !important;
    color: var(--text-main) !important;
    overflow-x: hidden;
}

/* Remove any dark body background */
body.theme-dark-exhibition {
    background-color: var(--bg-ivory) !important;
    color: var(--text-main) !important;
}

/* General link colour */
a {
    color: var(--text-main);
}
a:hover {
    color: var(--primary-gold) !important;
}

/* Paragraphs */
p {
    color: var(--text-main);
}

/* Headings — cocoa on ivory */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-main) !important;
}

/* ------------------------------------------------------------------
   3. NAVBAR — Ivory glass bar
   ------------------------------------------------------------------ */
.glass-navbar,
.glass-navbar.navbar-light-glass,
.glass-navbar.navbar-dark-glass {
    background: rgba(250, 248, 244, 0.92) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-bottom: 1px solid var(--border-soft-gold) !important;
    box-shadow: 0 2px 12px rgba(61, 43, 31, 0.06) !important;
}

.glass-navbar.scrolled {
    box-shadow: 0 4px 20px rgba(61, 43, 31, 0.10) !important;
    background: rgba(250, 248, 244, 0.97) !important;
}

/* Nav links — cocoa, gold on active */
.glass-navbar .nav-link,
.glass-navbar.navbar-light-glass .nav-link,
.glass-navbar.navbar-dark-glass .nav-link,
.navbar-nav .nav-link {
    color: var(--text-main) !important;
    font-weight: 500;
}

.glass-navbar .nav-link:hover,
.glass-navbar .nav-link.active,
.glass-navbar.navbar-light-glass .nav-link:hover,
.glass-navbar.navbar-light-glass .nav-link.active,
.glass-navbar.navbar-dark-glass .nav-link:hover,
.glass-navbar.navbar-dark-glass .nav-link.active {
    color: var(--primary-gold) !important;
}

/* Dropdown menu */
.dropdown-menu {
    background-color: var(--bg-white) !important;
    border: 1px solid var(--border-soft-gold) !important;
    box-shadow: var(--shadow-hover) !important;
}

.dropdown-item {
    color: var(--text-main) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-cream) !important;
    color: var(--primary-gold) !important;
}

/* Navbar toggler — cocoa border */
.navbar-toggler {
    color: var(--primary-gold) !important;
    border: 1px solid var(--primary-gold-border) !important;
}

/* Mobile action buttons (cart, wishlist) */
.main-button,
a.main-button,
a.cart-button {
    background: var(--primary-gold) !important;
    background: linear-gradient(135deg, #a07830 0%, #8a6425 100%) !important;
    color: #fff !important;
    border: none !important;
}
.main-button:hover {
    background: linear-gradient(135deg, #8a6425 0%, #70521d 100%) !important;
    box-shadow: 0 6px 20px rgba(160, 120, 48, 0.30) !important;
    color: #fff !important;
}

/* Inline search — light ivory overlay */
.inline-search-box.active {
    background: rgba(250, 248, 244, 0.98) !important;
    border: 1px solid var(--primary-gold-border) !important;
    box-shadow: 0 4px 20px rgba(61, 43, 31, 0.12) !important;
}

.inline-search-input {
    color: var(--text-main) !important;
}

.inline-search-dropdown {
    background: rgba(250, 248, 244, 0.99) !important;
    border: 1px solid var(--border-soft-gold) !important;
    box-shadow: 0 10px 35px rgba(61, 43, 31, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

.inline-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--primary-gold-border) !important;
}

.category-title {
    color: var(--primary-gold) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.result-item {
    background: rgba(61, 43, 31, 0.02) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-main) !important;
}

.result-item:hover {
    background: var(--primary-gold-tint) !important;
    border-color: var(--primary-gold-border) !important;
    color: var(--text-main) !important;
}

.result-img-wrapper {
    border: 1px solid var(--border-light) !important;
    background: var(--bg-cream) !important;
}

.result-title {
    color: var(--text-main) !important;
}

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

.inline-search-spinner {
    color: var(--primary-gold) !important;
}

.inline-search-no-results {
    color: var(--text-muted) !important;
}

/* Search icon gold */
.inline-search-toggle-btn i {
    color: var(--primary-gold) !important;
}

/* ------------------------------------------------------------------
   4. SECTION BACKGROUNDS
   ------------------------------------------------------------------ */
section {
    background-color: transparent;
}

.section-bg-light,
.bg-light,
.artwork-main,
.main-bg {
    background-color: var(--bg-cream) !important;
}

/* Alternating section tones */
.section-ivory {
    background-color: var(--bg-ivory) !important;
}

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

/* ------------------------------------------------------------------
   5. LUXURY SECTION HEADERS
   ------------------------------------------------------------------ */
.luxury-subtitle {
    color: var(--primary-gold) !important;
}

.luxury-main-title {
    color: var(--text-main) !important; /* cocoa — not gold — on light bg */
    font-family: 'Playfair Display', serif;
}

/* Override the dark-mode white */
body.theme-dark-exhibition .luxury-main-title {
    color: var(--text-main) !important;
}

.luxury-header-line {
    background: linear-gradient(135deg, #a07830 0%, #c9a84c 100%) !important;
}

/* Sub-header banner — solid light ivory background */
.luxury-subheader-section {
    background-color: var(--bg-ivory) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-soft-gold) !important;
}

.luxury-subheader-section .breadcrumb-item,
.luxury-subheader-section .breadcrumb-item a,
.luxury-subheader-section .breadcrumb-item::after {
    color: var(--text-muted) !important;
}
.luxury-subheader-section .breadcrumb-item.active {
    color: var(--primary-gold) !important;
}

/* ------------------------------------------------------------------
   6. CARDS & ARTWORK CARDS
   ------------------------------------------------------------------ */
.artwork-card,
.artwork-premium-card,
.card {
    background-color: var(--bg-white) !important;
    border-color: var(--border-soft-gold) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-main) !important;
}

.artwork-card:hover,
.artwork-premium-card:hover,
.card:hover {
    box-shadow: var(--shadow-hover) !important;
}

.artwork-card-title,
.artwork-premium-card .artwork-card-title {
    color: var(--text-main) !important;
}

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

.artwork-card-price {
    color: var(--primary-gold) !important;
}

/* Sidebar cards */
.sidebar-card-wrapper {
    background-color: var(--bg-linen) !important;
    border-color: var(--border-soft-gold) !important;
}

/* ------------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------------ */

/* Primary gold button — ivory text on gold bg (~4.6:1, WCAG AA) */
.btn-premium,
.btn-premium-send {
    background: linear-gradient(135deg, #a07830 0%, #8a6425 100%) !important;
    color: #faf8f4 !important;
    border: 2px solid var(--primary-gold) !important;
    box-shadow: 0 4px 15px rgba(160, 120, 48, 0.25) !important;
}

.btn-premium:hover,
.btn-premium-send:hover {
    background: linear-gradient(135deg, #8a6425 0%, #70521d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(160, 120, 48, 0.35) !important;
    transform: translateY(-2px);
}

/* Outline button — cocoa text, gold border */
.btn-premium-outline {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border: 2px solid var(--primary-gold) !important;
}

.btn-premium-outline:hover {
    background-color: var(--primary-gold) !important;
    color: #faf8f4 !important;
}

/* Gold outline button (filter chips, tabs) */
.btn-gold-outline {
    background: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid var(--primary-gold-border) !important;
}

.btn-gold-outline:hover,
.btn-gold-outline.active {
    background: linear-gradient(135deg, #a07830 0%, #8a6425 100%) !important;
    color: #faf8f4 !important;
    border-color: var(--primary-gold) !important;
    box-shadow: 0 4px 15px rgba(160, 120, 48, 0.25) !important;
}

/* Plan button */
.btn-plan {
    background: var(--text-main) !important;
    border: 1px solid var(--text-main) !important;
    color: var(--bg-ivory) !important;
}

/* ------------------------------------------------------------------
   8. FORMS & INPUTS
   ------------------------------------------------------------------ */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    background-color: var(--bg-linen) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-light) !important;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-gold) !important;
    box-shadow: 0 0 0 3px rgba(160, 120, 48, 0.12) !important;
    outline: none !important;
    background-color: var(--bg-white) !important;
}

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

/* B2B form card */
.b2b-form-card {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-soft-gold) !important;
    box-shadow: var(--shadow-soft) !important;
}

.b2b-form-header {
    background: var(--bg-cream) !important;
    color: var(--text-main) !important;
    border-bottom: 2px solid var(--primary-gold) !important;
}

/* ------------------------------------------------------------------
   9. SUBSCRIPTION BOX (in-page subscription blocks)
   ------------------------------------------------------------------ */
.subscription-box {
    border: 2px solid var(--primary-gold-border) !important;
    background-color: var(--bg-linen) !important;
}

.subscription-box h5 {
    background: var(--bg-cream) !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-soft-gold) !important;
}

.subscrip-item li i {
    color: var(--primary-gold) !important;
}

/* ------------------------------------------------------------------
   10. ACCORDION & TABS
   ------------------------------------------------------------------ */
.accordion-item {
    background-color: var(--bg-linen) !important;
    border-color: var(--border-soft-gold) !important;
    color: var(--text-main) !important;
}

.accordion-button {
    background-color: var(--bg-linen) !important;
    color: var(--text-main) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-gold-tint) !important;
    color: var(--primary-gold) !important;
    box-shadow: none !important;
}

.accordion-body {
    color: var(--text-main) !important;
    background-color: var(--bg-linen) !important;
}

/* Tabs */
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-gold) !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary-gold) !important;
    border-bottom: 2px solid var(--primary-gold) !important;
    background-color: transparent !important;
}

/* Artist profile nav pills */
.artist_profile_codepen.nav-pills .nav-link {
    color: var(--text-muted) !important;
}

.artist_profile_codepen.nav-pills .nav-link.active {
    color: var(--primary-gold) !important;
    background-color: var(--primary-gold-tint) !important;
}

/* ------------------------------------------------------------------
   11. DARK EXHIBITION MODE — NEUTRALISED (light fallback)
   ------------------------------------------------------------------ */
body.theme-dark-exhibition h1,
body.theme-dark-exhibition h2,
body.theme-dark-exhibition h3,
body.theme-dark-exhibition h4,
body.theme-dark-exhibition h5,
body.theme-dark-exhibition h6,
body.theme-dark-exhibition .h1,
body.theme-dark-exhibition .h2,
body.theme-dark-exhibition .h3,
body.theme-dark-exhibition .h4,
body.theme-dark-exhibition .h5,
body.theme-dark-exhibition .h6 {
    color: var(--text-main) !important;
}

body.theme-dark-exhibition p,
body.theme-dark-exhibition li,
body.theme-dark-exhibition dd,
body.theme-dark-exhibition dt,
body.theme-dark-exhibition span:not(.badge):not(.stat-num):not(.verified-artist-badge) {
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .text-muted,
body.theme-dark-exhibition .text-muted-custom {
    color: var(--text-muted) !important;
}

body.theme-dark-exhibition .section-bg-light,
body.theme-dark-exhibition .sidebar-card-wrapper,
body.theme-dark-exhibition .bg-light {
    background-color: var(--bg-cream) !important;
    border-color: var(--border-soft-gold) !important;
}

body.theme-dark-exhibition .artwork-card,
body.theme-dark-exhibition .artwork-premium-card,
body.theme-dark-exhibition .commission-cta-card,
body.theme-dark-exhibition .card {
    background-color: var(--bg-white) !important;
    border-color: var(--border-soft-gold) !important;
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .artwork-card-title,
body.theme-dark-exhibition .artwork-premium-card .artwork-card-title {
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .accordion-item,
body.theme-dark-exhibition .accordion-flush .accordion-item {
    background-color: var(--bg-linen) !important;
    border-color: var(--border-soft-gold) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-card) !important;
}

body.theme-dark-exhibition .accordion-button {
    background-color: var(--bg-linen) !important;
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .accordion-button:not(.collapsed) {
    background-color: var(--primary-gold-tint) !important;
    color: var(--primary-gold) !important;
}

body.theme-dark-exhibition .accordion-body {
    color: var(--text-main) !important;
}

body.theme-dark-exhibition input,
body.theme-dark-exhibition select,
body.theme-dark-exhibition textarea {
    background-color: var(--bg-linen) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

body.theme-dark-exhibition input::placeholder,
body.theme-dark-exhibition textarea::placeholder {
    color: var(--text-light) !important;
}

body.theme-dark-exhibition a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--primary-gold) !important;
}

body.theme-dark-exhibition a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--primary-gold-hover) !important;
}

body.theme-dark-exhibition .about-section,
body.theme-dark-exhibition .faq-section-padding {
    background-color: var(--bg-ivory) !important;
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .about-title,
body.theme-dark-exhibition .faq-header-title {
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .form-label {
    color: var(--text-muted) !important;
}

body.theme-dark-exhibition .form-input {
    background-color: var(--bg-linen) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .b2b-form-card {
    background: var(--bg-white) !important;
    border-color: var(--border-soft-gold) !important;
}

body.theme-dark-exhibition .btn-gold-outline {
    background: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid var(--primary-gold-border) !important;
}

body.theme-dark-exhibition .btn-gold-outline:hover,
body.theme-dark-exhibition .btn-gold-outline.active {
    background: linear-gradient(135deg, #a07830 0%, #8a6425 100%) !important;
    color: #faf8f4 !important;
    border-color: var(--primary-gold) !important;
}

body.theme-dark-exhibition .tab-content {
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .artist_profile_codepen.nav-pills .nav-link {
    color: var(--text-muted) !important;
}

body.theme-dark-exhibition .artist_profile_codepen.nav-pills .nav-link.active {
    color: var(--primary-gold) !important;
    background-color: var(--primary-gold-tint) !important;
}

/* ------------------------------------------------------------------
   12. FOOTER — GALLERY IVORY (replaces dark charcoal)
   ------------------------------------------------------------------ */
.footer-section {
    background-color: var(--bg-cream) !important;
    color: var(--text-main) !important;
    border-top: 3px solid var(--primary-gold) !important;
    border: none !important;
}

.footer-content {
    border-bottom: 1px solid var(--border-soft-gold) !important;
}

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

.footer-widget-heading h3 {
    color: var(--text-main) !important;
    font-family: 'Playfair Display', serif;
}

.footer-widget-heading h3::after {
    background: linear-gradient(90deg, #a07830, #c9a84c) !important;
}

.footer-widget ul li a {
    color: var(--text-muted) !important;
}

.footer-widget ul li a:hover {
    color: var(--primary-gold) !important;
}

.footer-contact-row i {
    color: var(--primary-gold) !important;
}

.footer-contact-row span {
    color: var(--text-muted) !important;
}

/* Trust badges — ivory bg, gold border */
.trust-badge-item {
    background: var(--primary-gold-tint) !important;
    border: 1px solid var(--border-soft-gold) !important;
    color: var(--primary-gold) !important;
}

/* Social icons */
.footer-social-icon span {
    color: var(--text-main) !important;
}

.luxury-social-envelope:hover {
    filter: brightness(1.1) drop-shadow(0 0 6px rgba(160, 120, 48, 0.35)) !important;
}

/* Subscribe form pill */
.subscribe-form {
    background: rgba(61, 43, 31, 0.05) !important;
    border: 1px solid var(--border-soft-gold) !important;
}

.subscribe-form:focus-within {
    border-color: var(--primary-gold) !important;
    box-shadow: 0 0 10px rgba(160, 120, 48, 0.15) !important;
}

.subscribe-form input {
    color: var(--text-main) !important;
}

.subscribe-form input::placeholder {
    color: var(--text-muted) !important;
}

.subscribe-form button {
    background: linear-gradient(135deg, #a07830 0%, #8a6425 100%) !important;
    color: #fff !important;
}

/* Copyright bar */
.copyright-area {
    background-color: #ece6da !important;
    border-top: 1px solid var(--border-soft-gold) !important;
}

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

/* ------------------------------------------------------------------
   13. TEXT UTILITIES
   ------------------------------------------------------------------ */
.text-gold {
    color: var(--primary-gold) !important;
}

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

/* Premium share box */
.premium-share-title {
    color: var(--primary-gold) !important;
}

/* ------------------------------------------------------------------
   14. MISC COMPONENTS
   ------------------------------------------------------------------ */

/* Gallery image border in dark-exhibition mode — remove on light theme */
body.theme-dark-exhibition .gallery-img-wrap {
    border-color: var(--border-soft-gold) !important;
}

/* Subheader in dark-exhibition — light theme version */
body.theme-dark-exhibition .subheader-section::before {
    background: linear-gradient(180deg,
        rgba(250, 248, 244, 0.10) 0%,
        rgba(61, 43, 31, 0.50) 100%) !important;
}

body.theme-dark-exhibition .subheader-section h3,
body.theme-dark-exhibition .subheader-section h3.text-dark {
    color: #ffffff !important; /* Keep white on dark overlay image */
}

/* Sort buttons & search bars */
body.theme-dark-exhibition .search_artist,
body.theme-dark-exhibition .sort_btn {
    background-color: var(--bg-linen) !important;
    border-color: var(--border-soft-gold) !important;
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .search_artist input {
    color: var(--text-main) !important;
    background: transparent !important;
}

/* Artist list cards */
body.theme-dark-exhibition .artist_list .card {
    background-color: var(--bg-white) !important;
    border-color: var(--border-soft-gold) !important;
    color: var(--text-main) !important;
}

body.theme-dark-exhibition .artist_list .card:hover {
    border-color: var(--primary-gold) !important;
}

body.theme-dark-exhibition .artist_list .card .tile .details span {
    color: var(--text-main) !important;
}

/* Nav tabs */
body.theme-dark-exhibition .nav-tabs .nav-link {
    color: var(--text-muted) !important;
}

body.theme-dark-exhibition .nav-tabs .nav-link.active {
    color: var(--primary-gold) !important;
    border-bottom: 2px solid var(--primary-gold) !important;
}

/* Premium glass card — ivory surface */
.premium-glass-card {
    background: rgba(250, 248, 244, 0.75) !important;
    border: 1px solid var(--border-soft-gold) !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Ambient glow — warm gold tint on ivory */
.ambient-glow-spot {
    background: radial-gradient(circle,
        rgba(160, 120, 48, 0.06) 0%,
        transparent 70%) !important;
}

/* Scrollbar styling (webkit) */
::-webkit-scrollbar-thumb {
    background: var(--primary-gold-border);
}

/* ------------------------------------------------------------------
   15. MICRO-ANIMATIONS — subtle and gallery-appropriate
   ------------------------------------------------------------------ */
@keyframes ivory-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.artwork-card,
.artwork-premium-card {
    animation: ivory-fade-in 0.4s ease both;
}

/* Gold underline hover on nav items */
.glass-navbar .nav-link {
    position: relative;
}

.glass-navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    right: 50%;
    height: 1px;
    background-color: var(--primary-gold);
    transition: left 0.25s ease, right 0.25s ease;
}

.glass-navbar .nav-link:hover::after,
.glass-navbar .nav-link.active::after {
    left: 0;
    right: 0;
}

/* ===========================================================================
   16. HOMEPAGE DARK SECTIONS -> GALLERY IVORY CONVERSION
   =========================================================================== */

/* 16A. 3D VR GALLERY SHOWCASE (background-color: #0c0c0c) */
section.py-5[style*="background-color: #0c0c0c"] {
    background-color: var(--bg-cream) !important;
    color: var(--text-main) !important;
    border-top-color: var(--border-soft-gold) !important;
    border-bottom-color: var(--border-soft-gold) !important;
}
section.py-5[style*="background-color: #0c0c0c"] h3,
section.py-5[style*="background-color: #0c0c0c"] .luxury-subtitle {
    color: var(--text-main) !important;
}
section.py-5[style*="background-color: #0c0c0c"] p {
    color: var(--text-muted) !important;
}
section.py-5[style*="background-color: #0c0c0c"] div[style*="color: #eee"] {
    color: var(--text-main) !important;
    font-weight: 600;
}
section.py-5[style*="background-color: #0c0c0c"] div[style*="rgba(222, 188, 126, 0.1)"] {
    background: var(--primary-gold-tint) !important;
    color: var(--primary-gold) !important;
}
.vr-preview-img-wrapper {
    border-color: var(--border-soft-gold) !important;
    box-shadow: var(--shadow-hover) !important;
}
.vr-preview-img-wrapper div[style*="rgba(28, 28, 46"] {
    background: rgba(250, 248, 244, 0.95) !important;
    color: var(--primary-gold) !important;
    border-color: var(--border-soft-gold) !important;
}

/* 16B. INNOVATION HUB (dark gradient #0a0a0a to #151515) */
.innovation-hub {
    background: var(--bg-linen) !important;
    color: var(--text-main) !important;
    border-top-color: var(--border-soft-gold) !important;
}
.innovation-hub .luxury-subtitle { color: var(--primary-gold) !important; }
.innovation-hub .luxury-main-title,
.innovation-hub h3 { color: var(--text-main) !important; }
.innovation-hub p  { color: var(--text-muted) !important; }
.innovation-card {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-soft-gold) !important;
    box-shadow: var(--shadow-card) !important;
}
.innovation-card:hover {
    background: var(--bg-white) !important;
    border-color: var(--primary-gold) !important;
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-8px);
}
.innovation-card .icon-box { color: var(--primary-gold) !important; }
.innovation-card h4 { color: var(--text-main) !important; }
.innovation-card p  { color: var(--text-muted) !important; }
.innovation-card .btn-outline-warning {
    color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
}
.innovation-card .btn-outline-warning:hover {
    background: var(--primary-gold) !important;
    color: #fff !important;
}

/* 16C. TESTIMONIALS SECTION (background-color: #0c0c0c) */
#testimonials {
    background-color: var(--bg-ivory) !important;
    border-top-color: var(--border-soft-gold) !important;
}
#testimonials .luxury-subtitle { color: var(--primary-gold) !important; }
#testimonials .luxury-main-title,
#testimonials h3 { color: var(--text-main) !important; }
#testimonials .card {
    background: var(--bg-white) !important;
    border-color: var(--border-soft-gold) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-main) !important;
}
#testimonials .card:hover {
    border-color: var(--primary-gold) !important;
    box-shadow: var(--shadow-hover) !important;
}
#testimonials .fa-quote-left { color: var(--primary-gold) !important; }
#testimonials p               { color: var(--text-muted) !important; }
#testimonials h6              { color: var(--primary-gold) !important; }
#testimonials small           { color: var(--text-light) !important; }

/* 16D. BLOG SECTION (background-color: #0c0c0c) */
section.main-bg {
    background-color: var(--bg-cream) !important;
    color: var(--text-main) !important;
    border-top-color: var(--border-soft-gold) !important;
}
.blog-subtitle   { color: var(--primary-gold) !important; }
.blog-main-title { color: var(--text-main) !important; }
.blog-header-line {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-light) 100%) !important;
}
.blog-premium-card {
    border-color: var(--border-soft-gold) !important;
    box-shadow: var(--shadow-card) !important;
}
.blog-premium-card:hover {
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--primary-gold) !important;
}

/* ===========================================================================
   17. PAGE SUBHEADER BANNER — Clean light ivory layout (no dark overlays)
   =========================================================================== */
.subheader-section,
.luxury-subheader-section {
    background-color: var(--bg-ivory) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-soft-gold) !important;
    color: var(--text-main) !important;
    padding: 50px 0 !important;
    height: auto !important;
}

/* Hide any dark layout overlays */
.subheader-section::before,
.subheader-section::after,
.luxury-subheader-section::before,
.luxury-subheader-section::after {
    display: none !important;
    content: none !important;
}

/* Page titles */
.subheader-section h1,
.subheader-section h2,
.subheader-section h3,
.subheader-section h3.text-dark,
.luxury-subheader-section h1,
.luxury-subheader-section h2,
.luxury-subheader-section h3,
.luxury-subheader-section .luxury-main-title {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* Breadcrumbs */
.subheader-section .breadcrumb-item,
.subheader-section .breadcrumb-item a,
.subheader-section .breadcrumb-item::after,
.luxury-subheader-section .breadcrumb-item,
.luxury-subheader-section .breadcrumb-item a,
.luxury-subheader-section .breadcrumb-item::after {
    color: var(--text-muted) !important;
}
.subheader-section .breadcrumb-item a:hover,
.luxury-subheader-section .breadcrumb-item a:hover {
    color: var(--primary-gold) !important;
}
.subheader-section .breadcrumb-item.active,
.luxury-subheader-section .breadcrumb-item.active {
    color: var(--primary-gold) !important;
}

/* ===========================================================================
   18. HERO SLIDER — fix dark-navy "Enter 3D Gallery" button
   =========================================================================== */
.cnt_rel_image a.btn[style*="#1c1c2e"] {
    background-color: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.90) !important;
    color: #fff !important;
}
.cnt_rel_image a.btn[style*="#1c1c2e"]:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
    color: #fff !important;
}
#carouselExampleIndicators .carousel-control-prev::after,
#carouselExampleIndicators .carousel-control-next::after {
    color: var(--primary-gold) !important;
}
#carouselExampleIndicators .carousel-control-prev:hover,
#carouselExampleIndicators .carousel-control-next:hover {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-hover) 100%) !important;
    border-color: var(--primary-gold) !important;
}
#carouselExampleIndicators .carousel-control-prev:hover::after,
#carouselExampleIndicators .carousel-control-next:hover::after {
    color: #fff !important;
}

/* ===========================================================================
   19. USP BAR (Zero Commission strip)
   =========================================================================== */
section[style*="background-color: #f9f9f9"] {
    background-color: var(--bg-cream) !important;
    border-bottom-color: var(--border-soft-gold) !important;
}
section[style*="background-color: #f9f9f9"] h4 { color: var(--text-main) !important; }
section[style*="background-color: #f9f9f9"] p   { color: var(--text-muted) !important; }
section[style*="background-color: #f9f9f9"] .fa-star { color: var(--primary-gold) !important; }

/* ===========================================================================
   20. DISCOVER ART SECTION heading
   =========================================================================== */
.discover-main h3,
.discover-main_outer h3 {
    color: var(--text-main) !important;
}
