/* =========================================================
   BACH FURNITURE COMPLETE WEBSITE BRAND THEME
   Colors derived from Official Bach Icon:
   - Primary Rich Dark Chocolate Espresso Brown: #1c0e06 / #2c1a0e / #3d2314
   - Luxury Warm Metallic Gold: #d4af37 / #e5c568 / #b89228
   - Warm Sand Cream Background: #faf7f2 / #fdfbf7
   ========================================================= */

:root {
    --bach-brown-dark: #1c0e06;
    --bach-brown-main: #2c1a0e;
    --bach-brown-medium: #3d2314;
    --bach-brown-light: #52311c;
    --bach-gold-main: #d4af37;
    --bach-gold-light: #e5c568;
    --bach-gold-dark: #b89228;
    --bach-gold-gradient: linear-gradient(135deg, #d4af37 0%, #f0d683 50%, #b89228 100%);
    --bach-brown-gradient: linear-gradient(135deg, #1c0e06 0%, #3d2314 100%);
    --bach-cream-bg: #faf7f2;
}

/* Base Body & Layout */
body, .wrapper {
    background-color: var(--bach-cream-bg) !important;
    color: #2c1a0e !important;
    overflow-x: hidden !important;
}

::selection {
    background: #d4af37 !important;
    color: #1c0e06 !important;
}

/* Headings & Brand Accent Colors */
h1, h2, h3, h4, h5, h6,
.section-title, .heading {
    color: #1c0e06 !important;
}

/* Hero Slider & Banner Overlay Titles - Restore Crisp White */
.hero-slider h1, .hero-slider h2, .hero-slider .title,
.slider-content h1, .slider-content h2, .slider-content .title,
.slider-item h1, .slider-item h2, .slider-item .title,
.hero-section h1, .hero-section h2, .hero-section .title,
.swiper-slide h1, .swiper-slide h2, .swiper-slide .title,
.banner-content h1, .banner-content h2, .banner-content .title,
.carousel-caption h1, .carousel-caption h2, .carousel-caption .title,
.hero-text, .hero-subtitle, .slider-subtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

a {
    color: #3d2314;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: #d4af37 !important;
}

/* =========================================================
   LUXURY PAGE HEADER BANNER (.header-content)
   ========================================================= */
.header-content {
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 175px 0 70px 0 !important;
    overflow: hidden !important;
}

.header-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.32) 100%) !important;
    z-index: 1 !important;
}

.header-content .container {
    position: relative !important;
    z-index: 2 !important;
}

.header-content .title {
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8) !important;
}

.header-content .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: right !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.header-content .breadcrumb li,
.header-content .breadcrumb a {
    color: #ffffff !important;
    transition: color 0.2s ease !important;
}

.header-content .breadcrumb a:hover {
    color: #f0a500 !important;
}

.header-content .breadcrumb > li + li:before {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0 8px !important;
}

.header-content .breadcrumb .active {
    color: #f0a500 !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    .header-content {
        padding: 100px 0 35px 0 !important;
        text-align: center !important;
    }
    .header-content .breadcrumb {
        text-align: center !important;
        margin-top: 10px !important;
    }
}

/* =========================================================
   TOP UTILITY HEADER & FLOATING NAVBAR
   ========================================================= */
.top-mini-header {
    background: #1c0e06 !important;
    color: #e5dcd5 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
    position: relative !important;
    z-index: 10000 !important;
    padding: 8px 0 !important;
    height: 40px !important;
    box-sizing: border-box !important;
}

.top-mini-info i,
.mobile-mini-wrapper i,
.top-mini-divider {
    color: #d4af37 !important;
}

.top-mini-link {
    color: #f7f2ed !important;
}

.top-mini-link:hover,
.top-social-icons a:hover {
    color: #e5c568 !important;
}

.top-sign-in-btn,
.fgk-user-pill-btn {
    background: linear-gradient(135deg, #d4af37 0%, #e5c568 100%) !important;
    color: #1c0e06 !important;
    border: 1px solid #e5c568 !important;
    border-radius: 20px !important;
    padding: 5px 16px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 3px 12px rgba(212, 175, 55, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.top-sign-in-btn i,
.fgk-user-pill-btn i.fa-user-circle,
.fgk-user-pill-btn i.fa-caret-down {
    color: #1c0e06 !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

.top-sign-in-btn:hover,
.fgk-user-pill-btn:hover {
    background: #1c0e06 !important;
    color: #d4af37 !important;
    border-color: #d4af37 !important;
    box-shadow: 0 5px 18px rgba(212, 175, 55, 0.45) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

.top-sign-in-btn:hover i,
.fgk-user-pill-btn:hover i {
    color: #d4af37 !important;
    transform: rotate(-12deg) scale(1.2) !important;
}

/* =========================================================
   HERO CATEGORY ICONS - PREVENT VERTICAL JUMP/FOUC ON REFRESH
   ========================================================= */
.hero-category-slider-wrap {
    overflow: hidden !important;
    width: 100% !important;
    min-height: 80px !important;
}

#frontpage-category-slider.owl-icons:not(.owl-carousel) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 20px !important;
}

#frontpage-category-slider.owl-icons:not(.owl-carousel) > a {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    width: 90px !important;
}

#frontpage-category-slider.owl-icons:not(.owl-carousel) > a figure {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#frontpage-category-slider.owl-icons:not(.owl-carousel) > a figure i {
    display: block !important;
    margin: 0 auto 6px auto !important;
}

#frontpage-category-slider.owl-icons:not(.owl-carousel) > a figure figcaption {
    display: block !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

/* =========================================================
   PAGE LOAD ENTRANCE ANIMATIONS FOR SPLIT NAVBAR
   ========================================================= */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100vw);
    }
    70% {
        transform: translateX(4px);
    }
    85% {
        transform: translateX(-1px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideInFromRightSlow {
    0% {
        transform: translateX(100vw);
    }
    75% {
        transform: translateX(-4px);
    }
    90% {
        transform: translateX(1px);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================================================
   SPLIT PILL NAVBAR (MATCHING PICTURE 2 EXACT DESIGN)
   ========================================================= */
nav.navbar-fixed {
    position: fixed !important;
    top: 48px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 96% !important;
    max-width: 1280px !important;
    z-index: 9999 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    transition: all 0.35s ease !important;
}

.pill-navbar-split-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Left Block (Logo + Navigation Links) */
.pill-block-left-wrap {
    flex: 1 !important;
    height: 84px !important;
    display: flex !important;
    align-items: center !important;
    filter: drop-shadow(0px 2px 0px #d4af37) drop-shadow(0px -2px 0px #d4af37) drop-shadow(2px 0px 0px #d4af37) drop-shadow(-2px 0px 0px #d4af37) drop-shadow(0 8px 22px rgba(28, 14, 6, 0.12)) !important;
    animation: slideInFromLeft 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both !important;
}

.pill-block-left {
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    padding: 0 24px 0 28px !important;
    display: flex !important;
    align-items: center !important;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%) !important;
    border-radius: 16px 0 0 16px !important;
}

/* Right Block (Wishlist, Cart, Shop Now Button) */
.pill-block-right-wrap {
    height: 84px !important;
    display: flex !important;
    align-items: center !important;
    filter: drop-shadow(0px 2px 0px #d4af37) drop-shadow(0px -2px 0px #d4af37) drop-shadow(2px 0px 0px #d4af37) drop-shadow(-2px 0px 0px #d4af37) drop-shadow(0 8px 22px rgba(28, 14, 6, 0.12)) !important;
    animation: slideInFromRightSlow 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.25s both !important;
}

.pill-block-right {
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    padding: 0 22px 0 26px !important;
    display: flex !important;
    align-items: center !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%) !important;
    border-radius: 0 16px 16px 0 !important;
}

.pill-block-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
    height: 100% !important;
}

.pill-logo a {
    display: inline-block !important;
    position: relative !important;
    width: 220px !important;
    height: 54px !important;
    vertical-align: middle !important;
}

.pill-logo img {
    height: 52px !important;
    max-height: 54px !important;
    width: 220px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.pill-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;
}

.pill-menu ul {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pill-menu ul li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pill-menu ul li a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

/* Picture 2 Exact Active State: Soft Cream/Amber Capsule + Orange Text */
.pill-menu ul li.active a,
.pill-menu ul li a.active {
    background: #fff2e6 !important;
    color: #e67e22 !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    padding: 8px 18px !important;
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.12) !important;
}

.pill-menu ul li.active a i,
.pill-menu ul li a.active i {
    color: #e67e22 !important;
}

.pill-menu ul li a:hover {
    color: #e67e22 !important;
    background: rgba(230, 126, 34, 0.08) !important;
}

.pill-actions {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-shrink: 0 !important;
}

.pill-action-icon {
    color: #333333 !important;
    font-size: 18px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    width: 24px !important;
    height: 24px !important;
}

.pill-action-icon:hover {
    color: #d4af37 !important;
}

.pill-badge {
    position: absolute !important;
    top: -6px !important;
    right: -10px !important;
    background: #e74c3c !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 2px 5px !important;
    line-height: 1 !important;
    min-width: 16px !important;
    text-align: center !important;
}

/* Default logo display modes */
.logo-white-mode {
    display: inline-block !important;
}

.logo-dark-mode {
    display: none !important;
}

/* =========================================================
   STICKY NAVBAR - SLEEK CHARCOAL (#22252a)
   ========================================================= */
nav.navbar-fixed.navbar-sticked {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px !important;
    height: 82px !important;
    background: #22252a !important;
    border-bottom: 2px solid #d4af37 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

nav.navbar-fixed.navbar-sticked .pill-navbar-split-container {
    height: 100% !important;
    gap: 0 !important;
}

nav.navbar-fixed.navbar-sticked .pill-block-left-wrap,
nav.navbar-fixed.navbar-sticked .pill-block-right-wrap,
nav.navbar-fixed.navbar-sticked .pill-block-left,
nav.navbar-fixed.navbar-sticked .pill-block-right {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    clip-path: none !important;
    border-radius: 0 !important;
    filter: none !important;
    height: 100% !important;
    padding: 0 !important;
}

nav.navbar-fixed.navbar-sticked .pill-block-left {
    padding-left: 0 !important;
}

nav.navbar-fixed.navbar-sticked .pill-block-right {
    padding-right: 0 !important;
}

nav.navbar-fixed.navbar-sticked .logo-white-mode {
    display: none !important;
}

nav.navbar-fixed.navbar-sticked .logo-dark-mode {
    display: inline-block !important;
    height: 48px !important;
    width: auto !important;
}

nav.navbar-fixed.navbar-sticked .pill-menu ul li a {
    color: #ffffff !important;
}

nav.navbar-fixed.navbar-sticked .pill-menu ul li a:hover,
nav.navbar-fixed.navbar-sticked .pill-menu ul li.active a,
nav.navbar-fixed.navbar-sticked .pill-menu ul li a.active {
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.15) !important;
}

nav.navbar-fixed.navbar-sticked .pill-action-icon i {
    color: #ffffff !important;
}

nav.navbar-fixed.navbar-sticked .pill-action-icon:hover i {
    color: #d4af37 !important;
}

/* =========================================================
   LUXURY SHOP NOW BUTTON (DARK ESPRESSO WITH GOLD BORDER & TEXT)
   ========================================================= */
.btn-shop-now-yellow {
    background: #1c0e06 !important;
    color: #d4af37 !important;
    border: 1.5px solid #d4af37 !important;
    border-radius: 25px !important;
    padding: 10px 22px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(28, 14, 6, 0.25) !important;
    transition: all 0.25s ease !important;
}

.btn-shop-now-yellow:hover {
    background: linear-gradient(135deg, #d4af37 0%, #e5c568 100%) !important;
    color: #1c0e06 !important;
    border-color: #e5c568 !important;
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.45) !important;
    transform: translateY(-1px) !important;
}

nav.navbar-fixed.navbar-sticked .btn-shop-now-yellow {
    background: linear-gradient(135deg, #d4af37 0%, #e5c568 100%) !important;
    color: #1c0e06 !important;
    border-color: #d4af37 !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4) !important;
}

nav.navbar-fixed.navbar-sticked .btn-shop-now-yellow:hover {
    background: #1c0e06 !important;
    color: #d4af37 !important;
    border-color: #d4af37 !important;
}

/* =========================================================
   BUTTONS & CALL-TO-ACTIONS
   ========================================================= */
.btn-primary,
.btn-yellow,
.btn-checkout,
.btn-track-action,
.btn-add-cart,
.btn-submit,
.btn-search {
    background: linear-gradient(135deg, #d4af37 0%, #e5c568 100%) !important;
    color: #1c0e06 !important;
    font-weight: 700 !important;
    border: 1px solid #d4af37 !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn-yellow:hover,
.btn-checkout:hover,
.btn-track-action:hover,
.btn-add-cart:hover {
    background: linear-gradient(135deg, #3d2314 0%, #1c0e06 100%) !important;
    color: #d4af37 !important;
    border-color: #d4af37 !important;
    box-shadow: 0 6px 20px rgba(61, 35, 20, 0.4) !important;
}

/* =========================================================
   PRODUCT GRID, CARDS & PRICES
   ========================================================= */
.product-card, .product-item, .single-product {
    border-radius: 12px !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    transition: all 0.3s ease !important;
}

.product-card:hover, .product-item:hover, .single-product:hover {
    border-color: #d4af37 !important;
    box-shadow: 0 12px 30px rgba(35, 20, 10, 0.12) !important;
    transform: translateY(-3px) !important;
}

.product-price, .price, .amount, .price-new {
    color: #3d2314 !important;
    font-weight: 800 !important;
}

.badge-sale, .badge-new, .badge-hot, .badge-featured, .badge-discount {
    background: linear-gradient(135deg, #d4af37 0%, #e5c568 100%) !important;
    color: #1c0e06 !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
}

.rating i, .fa-star, .star-rating {
    color: #d4af37 !important;
}

/* Category Icons & Banners */
.category-item:hover, .category-box:hover {
    border-color: #d4af37 !important;
}

.category-icon, .cat-icon {
    background: #1c0e06 !important;
    color: #d4af37 !important;
    border: 2px solid #d4af37 !important;
}

/* =========================================================
   MOBILE DRAWER & MODALS
   ========================================================= */
.mobile-drawer-container {
    background: #1c0e06 !important;
    color: #ffffff !important;
}

.mobile-drawer-header {
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.mobile-drawer-links li a {
    color: #f7f2ed !important;
}

.mobile-drawer-links li a:hover,
.mobile-drawer-links li.active a {
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.1) !important;
}

.modal-header, .fgk-modal-header {
    background: #1c0e06 !important;
    color: #d4af37 !important;
    border-bottom: 2px solid #d4af37 !important;
}

/* =========================================================
   FOOTER & BACK TO TOP
   ========================================================= */
footer, .footer-area, .site-footer {
    background: #1c0e06 !important;
    color: #e2d9d2 !important;
    border-top: 3px solid #d4af37 !important;
}

.footer-title, .widget-title, .footer-heading, .footer-widget-title {
    color: #d4af37 !important;
}

.footer-features-badges i,
.footer-links a:hover,
.footer-social-icons a:hover {
    color: #e5c568 !important;
}

.back-to-top, #back-to-top, .scroll-to-top, .scroll-top {
    background: linear-gradient(135deg, #e65100, #ff6d00) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) scale(0.8) !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
    pointer-events: none !important;
}

.back-to-top.open, #back-to-top.open, .scroll-to-top.open, .scroll-top.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.back-to-top:hover, #back-to-top:hover, .scroll-to-top:hover, .scroll-top:hover {
    background: linear-gradient(135deg, #d84315 0%, #e65100 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(230, 81, 0, 0.45) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 7px !important;
}
::-webkit-scrollbar-thumb {
    background: #1c0e06 !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-track {
    background: #f0ebe3 !important;
}

/* =========================================================
   BACH LUXURY NAVIGATION CAPSULE HIGHLIGHT
   ========================================================= */
.pill-menu ul li a {
    color: #3d2e24 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 7px 15px !important;
    border-radius: 22px !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-decoration: none !important;
}

.pill-menu ul li a i {
    color: #8a7768 !important;
    font-size: 13px !important;
    transition: color 0.25s ease !important;
}

.pill-menu ul li:not(.active) a:hover {
    color: #1c0e06 !important;
    background: rgba(212, 175, 55, 0.14) !important;
    transform: translateY(-1px) !important;
}

.pill-menu ul li:not(.active) a:hover i {
    color: #d4af37 !important;
}

/* Primary Active State: Royal Espresso Capsule + Gold Trim & Glow */
.pill-menu ul li.active a,
.pill-menu ul li a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1c0e06 0%, #30170a 100%) !important;
    font-weight: 700 !important;
    border-radius: 22px !important;
    padding: 7px 18px !important;
    border: 1.5px solid rgba(212, 175, 55, 0.7) !important;
    box-shadow: 0 4px 14px rgba(28, 14, 6, 0.25), 0 0 10px rgba(212, 175, 55, 0.25) !important;
    transform: translateY(-1px) !important;
}

.pill-menu ul li.active a i,
.pill-menu ul li a.active i {
    color: #d4af37 !important;
    font-size: 13px !important;
}

/* Dark Sticky Navbar Active State */
nav.navbar-fixed.navbar-sticked .pill-menu ul li.active a,
nav.navbar-fixed.navbar-sticked .pill-menu ul li a.active {
    color: #1c0e06 !important;
    background: linear-gradient(135deg, #d4af37 0%, #e5c568 100%) !important;
    border: 1.5px solid #d4af37 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
}

nav.navbar-fixed.navbar-sticked .pill-menu ul li.active a i,
nav.navbar-fixed.navbar-sticked .pill-menu ul li a.active i {
    color: #1c0e06 !important;
}

/* =========================================================
   ULTRA-LUXURY CHARCOAL & GOLD FOOTER THEME (#14171c)
   ========================================================= */
footer,
footer.luxury-footer {
    background: #14171c !important;
    color: #e2e8f0 !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: #ffffff !important;
}

/* =========================================================
   RESPONSIVE UTILITIES (.desktop-only / .mobile-only)
   ========================================================= */
@media (min-width: 992px) {
    .desktop-only {
        display: flex !important;
    }
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: flex !important;
    }

    /* 1. Clear Mobile Mini Utility Header */
    .top-mini-header {
        height: auto !important;
        min-height: 96px !important;
        padding: 8px 14px 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #1c0e06 !important;
        position: relative !important;
        z-index: 10001 !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .top-mini-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .mobile-mini-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 2px 0 4px 0 !important;
    }

    .mobile-mini-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 11.5px !important;
        color: #f7f2ed !important;
        flex-wrap: wrap !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .mobile-mini-row span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .mobile-mini-row i {
        color: #d4af37 !important;
    }

    .mobile-mini-row a {
        color: #f7f2ed !important;
        text-decoration: none !important;
    }

    .mobile-mini-row .top-social-icons {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .mobile-mini-row .top-social-icons a {
        color: #d4af37 !important;
        font-size: 13px !important;
    }

    .mobile-mini-row .top-sign-in-btn,
    .mobile-mini-row .fgk-user-pill-btn {
        background: linear-gradient(135deg, #d4af37 0%, #e5c568 100%) !important;
        color: #1c0e06 !important;
        border: 1px solid #d4af37 !important;
        padding: 4px 14px !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .mobile-mini-row .top-sign-in-btn i,
    .mobile-mini-row .fgk-user-pill-btn i {
        color: #1c0e06 !important;
        font-size: 11.5px !important;
    }

    /* 2. Main Slashed Split Navbar on Mobile with 2px Gold Border & Staged Animation */
    nav.navbar-fixed {
        position: fixed !important;
        top: 112px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 94% !important;
        max-width: 100% !important;
        z-index: 9999 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    .pill-navbar-split-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 5px !important;
        width: 100% !important;
    }

    /* Left Block (Logo only with angled parallel slash & 2px gold border) */
    .pill-block-left-wrap {
        flex: 1 !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        filter: drop-shadow(0px 2px 0px #d4af37) drop-shadow(0px -2px 0px #d4af37) drop-shadow(2px 0px 0px #d4af37) drop-shadow(-2px 0px 0px #d4af37) drop-shadow(0 6px 18px rgba(28, 14, 6, 0.15)) !important;
        animation: slideInFromLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both !important;
    }

    .pill-block-left {
        width: 100% !important;
        height: 100% !important;
        background: #ffffff !important;
        padding: 0 16px 0 18px !important;
        display: flex !important;
        align-items: center !important;
        clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 100%, 0 100%) !important;
        border-radius: 14px 0 0 14px !important;
    }

    .pill-logo a {
        display: inline-block !important;
        width: 170px !important;
        height: 42px !important;
    }

    .pill-logo img {
        height: 38px !important;
        max-height: 40px !important;
        width: 170px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* Right Block (3-Bars Hamburger Button with matching angled slash & 2px gold border) */
    .pill-block-right-wrap {
        width: 66px !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        filter: drop-shadow(0px 2px 0px #d4af37) drop-shadow(0px -2px 0px #d4af37) drop-shadow(2px 0px 0px #d4af37) drop-shadow(-2px 0px 0px #d4af37) drop-shadow(0 6px 18px rgba(28, 14, 6, 0.15)) !important;
        animation: slideInFromRightSlow 1.3s cubic-bezier(0.16, 1, 0.3, 1) 1.0s both !important;
        flex-shrink: 0 !important;
    }

    .pill-block-right {
        width: 100% !important;
        height: 100% !important;
        background: #ffffff !important;
        padding: 0 8px 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 13px 100%) !important;
        border-radius: 0 14px 14px 0 !important;
    }

    .pill-mobile-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .mobile-hamburger-btn {
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .mobile-hamburger-btn .bar {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background: #1c0e06 !important;
        border-radius: 2px !important;
        transition: all 0.25s ease !important;
    }

    .mobile-hamburger-btn:hover .bar,
    .mobile-hamburger-btn:active .bar {
        background: #d4af37 !important;
    }

    /* 3. Sticky Header on Mobile */
    nav.navbar-fixed.navbar-sticked {
        top: 0 !important;
        height: 62px !important;
        padding: 0 16px !important;
        background: #22252a !important;
        border-bottom: 2px solid #d4af37 !important;
    }

    nav.navbar-fixed.navbar-sticked .pill-block-left-wrap {
        height: 100% !important;
    }

    nav.navbar-fixed.navbar-sticked .pill-block-right-wrap {
        height: 100% !important;
        width: auto !important;
    }

    nav.navbar-fixed.navbar-sticked .mobile-hamburger-btn .bar {
        background: #ffffff !important;
    }
}

/* =========================================================
   PAGE BREADCRUMBS DIRECTORY - METALLIC GOLD ACCENT
   ========================================================= */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.breadcrumb > li {
    display: inline-block !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.breadcrumb > li a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.breadcrumb > li a i {
    margin-right: 4px !important;
    color: #d4af37 !important;
}

.breadcrumb > li a:hover {
    color: #d4af37 !important;
}

.breadcrumb > li.active,
.breadcrumb > .active {
    color: #d4af37 !important;
    font-weight: 700 !important;
}

.breadcrumb > li + li:before {
    color: rgba(255, 255, 255, 0.7) !important;
    content: "/\00a0" !important;
    padding: 0 8px !important;
}