/* ==========================================================================
   Design Tokens & Theme Variables (Light / Dark Mode)
   ========================================================================== */
:root {
    --color-surface: #fdf8f7;
    --color-surface-rgb: 253 248 247;
    --color-surface-dim: #ddd9d8;
    --color-surface-dim-rgb: 221 217 216;
    --color-surface-bright: #fdf8f7;
    --color-surface-bright-rgb: 253 248 247;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-lowest-rgb: 255 255 255;
    --color-surface-container-low: #f7f3f1;
    --color-surface-container-low-rgb: 247 243 241;
    --color-surface-container: #f1edec;
    --color-surface-container-rgb: 241 237 236;
    --color-surface-container-high: #ebe7e6;
    --color-surface-container-high-rgb: 235 231 230;
    --color-surface-container-highest: #e5e2e0;
    --color-surface-container-highest-rgb: 229 226 224;
    --color-on-surface: #1c1b1b;
    --color-on-surface-rgb: 28 27 27;
    --color-on-surface-variant: #474741;
    --color-on-surface-variant-rgb: 71 71 65;
    --color-inverse-surface: #313030;
    --color-inverse-surface-rgb: 49 48 48;
    --color-inverse-on-surface: #f4f0ef;
    --color-inverse-on-surface-rgb: 244 240 239;
    --color-outline: #787770;
    --color-outline-rgb: 120 119 112;
    --color-outline-variant: #c8c7be;
    --color-outline-variant-rgb: 200 199 190;
    --color-primary: #5f5e5b;
    --color-primary-rgb: 95 94 91;
    --color-primary-container: #f5f2ed;
    --color-primary-container-rgb: 245 242 237;
    --color-secondary: #605e5c;
    --color-secondary-rgb: 96 94 92;
    --color-secondary-container: #e5e2df;
    --color-secondary-container-rgb: 229 226 223;
    --color-tertiary: #695c52;
    --color-tertiary-rgb: 105 92 82;
    --color-tertiary-container: #fff0e6;
    --color-tertiary-container-rgb: 255 240 230;
    --color-accent-burgundy: #650000;
}

html.dark {
    color-scheme: dark;
    --color-surface: #121110;
    --color-surface-rgb: 18 17 16;
    --color-surface-dim: #0b0b0a;
    --color-surface-dim-rgb: 11 11 10;
    --color-surface-bright: #1d1b1a;
    --color-surface-bright-rgb: 29 27 26;
    --color-surface-container-lowest: #0b0a0a;
    --color-surface-container-lowest-rgb: 11 10 10;
    --color-surface-container-low: #181716;
    --color-surface-container-low-rgb: 24 23 22;
    --color-surface-container: #1e1d1b;
    --color-surface-container-rgb: 30 29 27;
    --color-surface-container-high: #252422;
    --color-surface-container-high-rgb: 37 36 34;
    --color-surface-container-highest: #2e2c2a;
    --color-surface-container-highest-rgb: 46 44 42;
    --color-on-surface: #f5f2ec;
    --color-on-surface-rgb: 245 242 236;
    --color-on-surface-variant: #c8c5be;
    --color-on-surface-variant-rgb: 200 197 190;
    --color-inverse-surface: #f4f0ef;
    --color-inverse-surface-rgb: 244 240 239;
    --color-inverse-on-surface: #1c1b1b;
    --color-inverse-on-surface-rgb: 28 27 27;
    --color-outline: #8c8880;
    --color-outline-rgb: 140 136 128;
    --color-outline-variant: #2e2b28;
    --color-outline-variant-rgb: 46 43 40;
    --color-primary: #d5cfc7;
    --color-primary-rgb: 213 207 199;
    --color-primary-container: #262422;
    --color-primary-container-rgb: 38 36 34;
    --color-secondary: #aba79f;
    --color-secondary-rgb: 171 167 159;
    --color-secondary-container: #2e2b28;
    --color-secondary-container-rgb: 46 43 40;
    --color-tertiary: #cbbba8;
    --color-tertiary-rgb: 203 187 168;
    --color-tertiary-container: #2e2620;
    --color-tertiary-container-rgb: 46 38 32;
}

/* Explicit High-End Dark Theme Overrides */
html.dark,
html.dark body {
    background-color: #121110;
    color: #f5f2ec;
}
html.dark #main-header {
    background-color: rgba(18, 17, 16, 0.95);
    border-bottom: none !important;
    border-bottom-width: 0 !important;
}
html.dark .bg-surface {
    background-color: #121110;
}
html.dark .text-on-surface {
    color: #f5f2ec;
}
html.dark .text-secondary {
    color: #aba79f;
}
html.dark .bg-secondary {
    background-color: #22201e;
    color: #f5f2ec;
}
html.dark .text-on-secondary {
    color: #f5f2ec;
}
html.dark .bg-surface-container {
    background-color: #1e1d1b;
}
html.dark .bg-surface-container-low {
    background-color: #181716;
}
html.dark .bg-surface-container-lowest {
    background-color: #0d0c0b;
}
html.dark .bg-surface-container-high {
    background-color: #252422;
}
html.dark .bg-surface-container-highest {
    background-color: #2e2c2a;
}
html.dark .border-outline-variant {
    border-color: #2e2b28;
}
html.dark .border-outline {
    border-color: #55504a;
}

/* Modal and Drawer Backdrops - Rich dark scrim preventing milky-white wash */
.drawer-backdrop {
    background-color: rgba(18, 17, 16, 0.6) !important;
}
html.dark .drawer-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

html.dark .drawer-panel,
html.dark .modal-panel,
html.dark .mobile-curtain,
html.dark .bottom-sheet-panel,
html.dark .mega-menu {
    background-color: #171615;
    border-color: #2e2b28;
    color: #f5f2ec;
}

/* Form Inputs, Textareas, and Selects */
html.dark input, 
html.dark select, 
html.dark textarea {
    background-color: #1a1817 !important;
    color: #f5f2ec !important;
    border-color: #33302c !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #787770 !important;
}
html.dark input:focus, 
html.dark select:focus, 
html.dark textarea:focus {
    border-color: #f5f2ec !important;
    outline: none;
}
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover, 
html.dark input:-webkit-autofill:focus, 
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
    -webkit-text-fill-color: #f5f2ec !important;
    -webkit-box-shadow: 0 0 0px 1000px #1a1817 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Buttons and Inverted Elements */
html.dark .bg-on-surface {
    background-color: #f5f2ec;
    color: #121110;
}
html.dark .text-surface {
    color: #121110;
}
html.dark .border-on-surface {
    border-color: #f5f2ec;
}
html.dark .bg-on-surface:hover,
html.dark .hover\:bg-surface:hover {
    background-color: #121110 !important;
    color: #f5f2ec !important;
}
html.dark .hover\:text-on-surface:hover {
    color: #f5f2ec !important;
}
html.dark .hover\:bg-on-surface:hover {
    background-color: #f5f2ec !important;
    color: #121110 !important;
}
html.dark .hover\:text-surface:hover {
    color: #121110 !important;
}

/* Smooth Theme Switching Transitions */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                color 0.2s ease,
                fill 0.2s ease,
                stroke 0.2s ease !important;
    transition-delay: 0s !important;
}

/* Smooth, 60fps Compositor-Only Reveal Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Image Hover Crossfade */
.image-hover-wrapper .primary-image,
.image-hover-wrapper .hover-image {
    transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.image-hover-wrapper:hover .hover-image {
    opacity: 1;
}
.image-hover-wrapper:hover .primary-image {
    opacity: 0;
}
.image-hover-wrapper:hover img {
    transform: scale(1.025);
}

/* Mega Menu Dropdown Transition */
.mega-menu-wrapper:hover .mega-menu,
.mega-menu-wrapper:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.mega-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    pointer-events: none;
}

/* ==========================================================================
   Header Layout & Responsive Spacing (Miraggio-Inspired)
   ========================================================================== */
.header-nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.header-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
    flex-shrink: 0 !important;
    z-index: 10;
}

.header-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem;
    flex-shrink: 0 !important;
    z-index: 10;
}

@media (min-width: 640px) {
    .header-left-group {
        gap: 0.75rem;
    }
    .header-right-group {
        gap: 0.5rem;
    }
}

/* Clean Header Presentation: Eliminates bottom border / white line glitch across all viewports */
#main-header {
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none;
}
#main-header.shadow-xs {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
}
html.dark #main-header.shadow-xs {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35) !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
}

/* Slide-out Drawers Backdrop and Panels */
.drawer-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
.drawer-panel {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-panel.active {
    transform: translateX(0);
}

/* Center Lightbox Modals */
.modal-panel {
    opacity: 0;
    transform: scale(0.98) translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 8px;
}
.modal-panel.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Mobile Nav Curtain & Bottom Sheet Drawer */
.mobile-curtain {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.mobile-curtain.active {
    transform: translateX(0);
}

.bottom-sheet-panel {
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 16px 16px 0 0;
}
.bottom-sheet-panel.active {
    transform: translateY(0);
}

/* Touch Sliders & Native Scroll Snapping */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}


/* Micro-animations */
.wishlist-heart {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease, filter 0.25s ease;
}
.wishlist-heart:active {
    transform: scale(1.35);
}

/* Toast Notification Animation */
#toast-notification {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    pointer-events: none;
}
#toast-notification.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}



/* Accessible Focus Rings */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #5f5e5b;
    outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in-section {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Elegant Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1edec;
}
::-webkit-scrollbar-thumb {
    background: #c8c7be;
}
::-webkit-scrollbar-thumb:hover {
    background: #787770;
}

html.dark ::-webkit-scrollbar-track {
    background: #181716;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #33302c;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #5f5e5b;
}

/* ==========================================================================
   Mobile Touch Sliders - Perfect Margin Alignment & Center Peeking
   ========================================================================== */
.mobile-snap-slider {
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
    .mobile-snap-slider {
        scroll-padding: 0 16px;
    }
    .mobile-snap-slider > * {
        scroll-snap-align: center;
    }
    .mobile-snap-slider > *:first-child {
        scroll-snap-align: start;
    }
    .mobile-snap-slider > *:last-child {
        scroll-snap-align: end;
    }
    /* Ensure right margin is preserved when scrolling to the end */
    .mobile-snap-slider::after {
        content: '';
        width: 1px;
        flex-shrink: 0;
        pointer-events: none;
    }
}

/* Unified Hero Banner Hardware Acceleration & Seamless Cross-Slide */
#hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
    contain: paint layout;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    --hero-slide-duration: 6000ms;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Background Image Cinematic Ken-Burns Scale Animation */
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate3d(0, 0, 0) scale(1.0);
    will-change: transform;
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.hero-slide.hero-slide-active .hero-bg-img {
    transform: translate3d(0, 0, 0) scale(1.035);
}

/* While outgoing slide is leaving, gently retain the scale without snapping */
.hero-slide.hero-slide-leaving .hero-bg-img {
    transform: translate3d(0, 0, 0) scale(1.035);
    transition: transform 0.85s ease-out;
}

/* Staggered Editorial Text Reveal Animations */
.hero-slide .hero-anim-tag,
.hero-slide .hero-anim-title,
.hero-slide .hero-anim-desc,
.hero-slide .hero-anim-btns {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.hero-slide.hero-slide-active .hero-anim-tag {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.18s;
}

.hero-slide.hero-slide-active .hero-anim-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.26s;
}

.hero-slide.hero-slide-active .hero-anim-desc {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.34s;
}

.hero-slide.hero-slide-active .hero-anim-btns {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.42s;
}

/* While outgoing slide is leaving, hold text opacity and position so it glides with the container */
.hero-slide.hero-slide-leaving .hero-anim-tag,
.hero-slide.hero-slide-leaving .hero-anim-title,
.hero-slide.hero-slide-leaving .hero-anim-desc,
.hero-slide.hero-slide-leaving .hero-anim-btns {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: none;
}

/* Dynamic Progress Dot Countdown Animation */
.hero-dot-active {
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.hero-dot-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #ffffff;
    animation: heroDotProgress var(--hero-slide-duration, 6000ms) linear forwards;
    border-radius: 9999px;
}

.hero-dot-paused::after {
    animation-play-state: paused;
}

@keyframes heroDotProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ==========================================================================
   Hero Banner Scrim, Contrast & Dark Mode Eye-Comfort Protection
   Eliminates milky white glare, softens harsh studio lights & highlights bags
   ========================================================================== */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.84) 0%,
        rgba(0, 0, 0, 0.44) 38%,
        rgba(0, 0, 0, 0.12) 70%,
        rgba(0, 0, 0, 0.28) 100%
    );
    pointer-events: none;
    z-index: 1;
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode: Cinema grade ambient dimming, seamlessly blending with #121110 */
html.dark .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(18, 17, 16, 0.96) 0%,
        rgba(18, 17, 16, 0.72) 36%,
        rgba(18, 17, 16, 0.42) 70%,
        rgba(18, 17, 16, 0.65) 100%
    );
}

/* Soften blinding daylight / studio photography in dark mode */
html.dark .hero-bg-img {
    filter: brightness(0.78) contrast(1.08) saturate(0.96);
}

/* Soft ambient vignette in dark mode to prevent edge light bleed */
html.dark #hero-slider::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px 20px rgba(18, 17, 16, 0.65);
    z-index: 5;
    pointer-events: none;
}

/* Hero text contrast preservation: tags and descriptions always stay luminous */
.hero-slide .hero-anim-tag {
    color: #e5dfd5 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.hero-slide .hero-anim-desc {
    color: #f2eee8 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* Hero title contrast: Clean crisp illumination in light mode, rose-gold in dark mode */
.hero-slide .hero-anim-title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

html.dark .hero-slide .hero-anim-title {
    color: #f5e6d3 !important; /* Luminous warm champagne rose */
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

/* Hero primary button */
.hero-slide .hero-btn-primary {
    background-color: #ffffff !important;
    color: #121110 !important;
    border-color: #ffffff !important;
}
.hero-slide .hero-btn-primary:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

html.dark .hero-slide .hero-btn-primary {
    background-color: #f5f2ec !important;
    color: #121110 !important;
    border-color: #f5f2ec !important;
}
html.dark .hero-slide .hero-btn-primary:hover {
    background-color: transparent !important;
    color: #f5f2ec !important;
    border-color: #f5f2ec !important;
}

/* Hero secondary button */
.hero-slide .hero-btn-secondary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
}
.hero-slide .hero-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

html.dark .hero-slide .hero-btn-secondary {
    color: #f5f2ec !important;
    border-color: rgba(245, 242, 236, 0.6) !important;
}
html.dark .hero-slide .hero-btn-secondary:hover {
    background-color: rgba(245, 242, 236, 0.2) !important;
    color: #f5f2ec !important;
    border-color: #f5f2ec !important;
}

/* ==========================================================================
   Collection Filter Buttons (.filter-btn)
   Guarantees high-contrast text visibility in inactive, active, hover, focus, and touch/mobile states
   ========================================================================== */
.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-outline-variant);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

/* Inactive button hover & focus: crisp dark text with subtle background tint */
.filter-btn:not(.active):hover,
.filter-btn:not(.active):focus-visible {
    border-color: var(--color-on-surface) !important;
    color: var(--color-on-surface) !important;
    background-color: rgba(var(--color-on-surface-rgb), 0.04) !important;
}

/* Active filter button: solid dark background with pure cream/white text that CANNOT disappear */
.filter-btn.active,
.filter-btn.active:hover,
.filter-btn.active:focus,
.filter-btn.active:focus-visible,
.filter-btn.active:active {
    background-color: var(--color-on-surface) !important;
    border-color: var(--color-on-surface) !important;
    color: var(--color-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Dark mode overrides for active & inactive filter buttons */
html.dark .filter-btn:not(.active):hover,
html.dark .filter-btn:not(.active):focus-visible {
    border-color: #f5f2ec !important;
    color: #f5f2ec !important;
    background-color: rgba(245, 242, 236, 0.06) !important;
}

html.dark .filter-btn.active,
html.dark .filter-btn.active:hover,
html.dark .filter-btn.active:focus,
html.dark .filter-btn.active:focus-visible,
html.dark .filter-btn.active:active {
    background-color: #f5f2ec !important;
    border-color: #f5f2ec !important;
    color: #121110 !important;
}

/* Mobile & touch devices: prevent sticky hover state from corrupting text colors */
@media (hover: none) {
    .filter-btn:not(.active):hover,
    .filter-btn:not(.active):focus {
        border-color: var(--color-outline-variant) !important;
        color: var(--color-secondary) !important;
        background-color: transparent !important;
    }
    
    .filter-btn.active,
    .filter-btn.active:hover,
    .filter-btn.active:focus,
    .filter-btn.active:active {
        background-color: var(--color-on-surface) !important;
        border-color: var(--color-on-surface) !important;
        color: var(--color-surface) !important;
    }

    html.dark .filter-btn.active,
    html.dark .filter-btn.active:hover,
    html.dark .filter-btn.active:focus,
    html.dark .filter-btn.active:active {
        background-color: #f5f2ec !important;
        border-color: #f5f2ec !important;
        color: #121110 !important;
    }
}