/* Main Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

*::selection {
    background: rgba(201, 169, 78, 0.25);
    color: #fff;
}

.hidden {
    display: none !important;
}

/* Shared layout helper: keep product + profiles on one horizontal row (no horizontal scrollbar) */
.perfume-top-row {
    display: grid;
    /* Give the product area a sensible max width so profiles have room */
    grid-template-columns: minmax(520px, 680px) minmax(0, 1fr);
    isolation: isolate;
    align-items: start;
    gap: clamp(14px, 2vw, 32px);
    width: 100%;
}

.perfume-top-row > * {
    min-width: 0;
}

/* Strict containment: nothing inside one column may visually overlap the other */
.perfume-top-row > [class$="-product-section"],
.perfume-top-row > [class$="-profiles-container"] {
    position: relative;
    overflow: visible;
}

/* Ensure cards/images can shrink inside the grid instead of forcing overflow */
.perfume-top-row img {
    max-width: 100%;
    height: auto;
}

.perfume-top-row .profile-container,
.perfume-top-row [class*="profile-card"],
.perfume-top-row [class$="-product-section"],
.perfume-top-row [class$="-profiles-container"] {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Make the two profile cards fit without any horizontal scrollbar */
.perfume-top-row [class$="-profiles-container"] {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 30px) !important;
    padding: 2px !important;
    align-items: stretch !important;
}

/* Force cards to respect the column width (prevents visual overlap) */
.perfume-top-row > [class$="-profiles-container"] > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Beat perfume-specific fixed widths/min-widths that are loaded after styles.css */
.perfume-top-row > [class$="-profiles-container"] > [class*="scent-profile"],
.perfume-top-row > [class$="-profiles-container"] > [class*="ingredients"],
.perfume-top-row > [class$="-profiles-container"] > [class*="profile-card"],
.perfume-top-row > [class$="-profiles-container"] > [class$="-profile-card"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
}

/* Greenly uses fixed-width wrappers; override inside the top-row grid */
.perfume-top-row .greenly-scent-profile,
.perfume-top-row .greenly-ingredients {
    width: 100% !important;
    max-width: 100% !important;
}

.perfume-top-row > [class$="-product-section"] {
    width: 100%;
    max-width: 680px;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 34px) !important;
    align-items: start !important;
}

.perfume-top-row > [class$="-profiles-container"] {
    z-index: 1;
}

.perfume-top-row > [class$="-product-section"] > img {
    width: 100% !important;
    max-width: 460px !important;
    height: auto !important;
}

.perfume-top-row > [class$="-product-section"] .product-info-section {
    min-width: 0;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    align-items: center !important;
}

@media (max-width: 1024px) {
    /* Keep product + profiles on one row; stack the two profile cards within the profiles column */
    .perfume-top-row {
        grid-template-columns: minmax(420px, 620px) minmax(0, 1fr);
    }

    .perfume-top-row [class$="-profiles-container"] {
        grid-template-columns: 1fr !important;
    }

    .perfume-top-row > [class$="-product-section"] {
        grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
        max-width: 620px;
    }

    .perfume-top-row > [class$="-product-section"] > img {
        max-width: 360px !important;
    }
}

/* Custom Scrollbar — Luxury Dark */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 78, 0.25);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 169, 78, 0.45);
}
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 78, 0.25) #0a0a0a;
}

/* Availability Indicators */
.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.availability-badge.available {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.availability-badge.unavailable {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Search Suggestion Availability */
.search-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.suggestion-availability {
    margin-left: auto;
    flex-shrink: 0;
}

.suggestion-availability .availability-badge {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.search-suggestion.unavailable {
    opacity: 0.7;
}

.search-suggestion.unavailable .suggestion-icon {
    opacity: 0.6;
}

/* Search Results Availability */
.search-result-item {
    position: relative;
}

.result-availability {
    margin-top: 8px;
}

.search-result-item.unavailable {
    opacity: 0.8;
    background: rgba(239, 68, 68, 0.05);
    border-left: 3px solid rgba(239, 68, 68, 0.3);
}

.search-result-item.available {
    background: rgba(34, 197, 94, 0.05);
    border-left: 3px solid rgba(34, 197, 94, 0.3);
}

/* Enable smooth scrolling for modern browsers and reserve space for fixed header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: #060606;
    color: rgba(245, 243, 240, 0.88);
    font-family: 'DM Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.7;
    letter-spacing: 0.015em;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    position: relative;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.6);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Global CSS variables */
:root {
    /* Brand colors — refined gold palette */
    --color-gold: #c9a94e;
    --color-gold-light: #dfc573;
    --color-gold-dark: #a68b3c;
    --color-gold-muted: rgba(201, 169, 78, 0.12);
    --color-gold-glow: rgba(201, 169, 78, 0.08);
    --color-champagne: #e8d5a3;

    /* Neutral palette — deeper, richer darks */
    --color-surface: #060606;
    --color-surface-raised: #0e0e0e;
    --color-surface-overlay: #151515;
    --color-surface-card: #111111;
    --color-border: rgba(255, 255, 255, 0.05);
    --color-border-hover: rgba(255, 255, 255, 0.1);
    --color-border-gold: rgba(201, 169, 78, 0.15);
    --color-text-primary: rgba(245, 243, 240, 0.88);
    --color-text-secondary: rgba(245, 243, 240, 0.5);
    --color-text-muted: rgba(245, 243, 240, 0.3);

    /* Semantic colors */
    --color-success: #3ecf8e;
    --color-error: #e5484d;
    --color-warning: #f5a623;
    --color-info: #6e92c7;

    /* Layout */
    --pegasus-transition-color: #171719;
    --marquee-height: 34px;
    --navbar-height: 64px;
    --content-max-width: 1400px;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* Z-index scale — rationalized */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-navbar: 500;
    --z-marquee: 510;
    --z-overlay: 1000;
    --z-modal: 2000;
    --z-notification: 3000;
    --z-tooltip: 4000;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Border radius scale */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-full: 9999px;

    /* Shadow system — cinematic depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-gold: 0 4px 24px rgba(201, 169, 78, 0.15);
    --shadow-gold-lg: 0 8px 40px rgba(201, 169, 78, 0.2), 0 2px 12px rgba(201, 169, 78, 0.1);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Section theme — Layton (dark/gold) */
    --layton-bg: #0a0a0a;
    --layton-accent: var(--color-gold);
    --layton-text: rgba(255, 255, 255, 0.95);
    --layton-text-muted: rgba(255, 255, 255, 0.6);

    /* Section theme — Haltane (warm cream) */
    --haltane-bg: #f5f2ed;
    --haltane-accent: #8b7355;
    --haltane-accent-dark: #5d4037;
    --haltane-text: #3d3d3d;
    --haltane-text-muted: #7a6b5e;
    --haltane-border: rgba(139, 115, 85, 0.2);

    /* Section theme — Pegasus (dark/crimson) */
    --pegasus-accent: #b85450;
    --pegasus-accent-light: #c9807c;
    --pegasus-bg: rgba(20, 20, 20, 0.95);
    --pegasus-text: #e9e9e9;
    --pegasus-border: rgba(184, 84, 80, 0.2);

    /* Quality states */
    --quality-top: #2ecc71;
    --quality-top-glow: rgba(46, 204, 113, 0.15);
    --quality-identical: var(--color-gold);
    --quality-identical-glow: rgba(201, 169, 78, 0.15);

    /* Action buttons */
    --btn-cart: #2a9d4e;
    --btn-cart-hover: #238b42;
    --btn-remove: var(--color-error);
    --btn-remove-hover: #c82333;
}

/* Top marquee */
.top-marquee {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--marquee-height);
    background: linear-gradient(180deg, #0c0c0c 0%, rgba(12, 12, 12, 0.95) 100%);
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-border-gold);
    z-index: var(--z-marquee);
    display: flex;
    align-items: center;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.top-marquee .marquee-track {
    display: flex;
    gap: 0;
    white-space: nowrap;
    animation: marquee-scroll var(--marquee-duration, 45s) linear infinite;
    will-change: transform;
    transition: opacity 0.3s ease;
}

.top-marquee .marquee-content {
    padding: 0 60px;
    letter-spacing: 0.2em;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-gold);
    transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'DM Sans', 'Inter', sans-serif;
}

.top-marquee .marquee-close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: rgba(229, 229, 229, 0.6);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.top-marquee .marquee-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Shift navbar down to avoid overlap */
.navbar {
    top: 0;
    transition: none;
}
body.has-marquee .navbar {
    top: var(--marquee-height);
}

/* Smooth height transitions for different scroll states */
body.marquee-compact {
    --marquee-height: 20px;
}

body.marquee-compact .top-marquee .marquee-content {
    font-size: 11px;
}

body.marquee-compact .top-marquee .marquee-close-btn {
    width: 16px;
    height: 16px;
    font-size: 12px;
    opacity: 0.8;
}

body.marquee-minimal {
    --marquee-height: 12px;
}

body.marquee-minimal .top-marquee .marquee-content {
    font-size: 10px;
}

body.marquee-minimal .top-marquee .marquee-close-btn {
    width: 14px;
    height: 14px;
    font-size: 10px;
    opacity: 0.6;
}

/* Navigation Bar */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: var(--z-navbar);
    padding: 18px 0;
    transition: none;
    transform-origin: center top;
}

/* Enhanced navbar fade states */
.navbar.fading {
    background: rgba(6, 6, 6, 0.85);
    border-bottom: 1px solid rgba(201, 169, 78, 0.08);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
    padding: 12px 0;
}

.navbar.fade-complete {
    pointer-events: none;
}

.nav-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    transition: inherit;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 36px;
    flex: 0 0 auto;
}

.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 20px;
}

.nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 0 40px;
    gap: 15px;
}

/* Brand Name Styling */
.brand-name {
    color: rgba(245, 243, 240, 0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all var(--transition-normal);
    position: relative;
    margin: 0;
    cursor: pointer;
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
}

.brand-name:hover {
    color: var(--color-gold);
}

.brand-name::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    transition: width var(--transition-normal);
}

.brand-name:hover::after {
    width: 120%;
}

/* Quick Search Container */
.quick-search-container {
    position: relative;
    z-index: 1000;
}

/* Quick Search Bar */
.quick-search-bar {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    padding: 10px 18px;
    transition: all var(--transition-normal) ease;
    min-width: 260px;
    max-width: 360px;
    position: relative;
}

.quick-search-bar::before {
    display: none;
}

.quick-search-bar:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 20px rgba(201, 169, 78, 0.05);
}

.quick-search-bar:hover::before {
    display: none;
}

.quick-search-bar:focus-within {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(201, 169, 78, 0.4);
    box-shadow: 0 0 0 3px rgba(201, 169, 78, 0.08), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.quick-search-bar .search-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 10px;
    flex-shrink: 0;
    transition: color var(--transition-fast) ease;
}

.quick-search-bar:focus-within .search-icon {
    color: rgba(255, 255, 255, 0.8);
}

.quick-search-bar .search-icon svg {
    width: 100%;
    height: 100%;
}

#quickSearchInput {
    background: transparent;
    border: none;
    outline: none;
    color: rgba(245, 243, 240, 0.9);
    font-size: 13px;
    font-weight: 400;
    font-family: 'DM Sans', 'Inter', sans-serif;
    flex: 1;
    padding: 4px 0;
    min-width: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    letter-spacing: 0.03em;
}

#quickSearchInput::placeholder {
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
    font-weight: 400;
    transition: color 0.3s ease;
}

#quickSearchInput:focus::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.clear-search {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
}

.clear-search:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.02) rotate(90deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.clear-search:active {
    transform: scale(0.95) rotate(90deg);
}

.clear-search svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* Quick Search Dropdown */
.quick-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 520px;
    width: max-content;
    max-width: 650px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    margin-top: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    max-height: 350px;
    overflow: hidden;
    z-index: 1001;
    opacity: 0;
    transform: translateY(-2px);
    transition: all var(--transition-normal) ease;
    pointer-events: none;
}

.quick-search-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.dropdown-content {
    padding: 12px 0;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.search-suggestion {
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: visible;
    opacity: 0;
    white-space: normal;
    min-width: 490px;
    transform: translateX(-20px);
    animation: slideInSuggestion 0.4s ease forwards;
}

@keyframes slideInSuggestion {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.search-suggestion:nth-child(1) {
    animation-delay: 0.1s;
}
.search-suggestion:nth-child(2) {
    animation-delay: 0.15s;
}
.search-suggestion:nth-child(3) {
    animation-delay: 0.2s;
}
.search-suggestion:nth-child(4) {
    animation-delay: 0.25s;
}
.search-suggestion:nth-child(5) {
    animation-delay: 0.3s;
}

.search-suggestion::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 169, 78, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.search-suggestion:last-child {
    border-bottom: none;
}

.search-suggestion:hover {
    background: linear-gradient(
        135deg,
        rgba(201, 169, 78, 0.08),
        rgba(201, 169, 78, 0.04)
    );
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(201, 169, 78, 0.1);
}

.search-suggestion:hover::before {
    left: 100%;
}

.search-suggestion.highlighted {
    background: linear-gradient(
        135deg,
        rgba(201, 169, 78, 0.15),
        rgba(201, 169, 78, 0.08)
    );
    border-left: 4px solid var(--color-gold);
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(201, 169, 78, 0.15);
}

.suggestion-icon {
    width: 20px;
    height: 20px;
    color: var(--color-gold);
    flex-shrink: 0;
    transition: all 0.3s ease;
    background: rgba(201, 169, 78, 0.1);
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-suggestion:hover .suggestion-icon {
    color: var(--color-gold-dark);
    background: rgba(201, 169, 78, 0.2);
    transform: scale(1.02);
}

.suggestion-content {
    flex: 1;
    min-width: 320px;
    transition: transform 0.2s ease;
}

.search-suggestion:hover .suggestion-content {
    transform: translateX(2px);
}

.suggestion-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 15px;
    margin-bottom: 4px;
    transition: color 0.2s ease;
    line-height: 1.3;
}

.search-suggestion:hover .suggestion-title {
    color: #1a252f;
}

.suggestion-subtitle {
    font-size: 13px;
    color: #7f8c8d;
    opacity: 0.9;
    transition: all 0.2s ease;
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
}

.search-suggestion:hover .suggestion-subtitle {
    color: #6c7b7d;
    opacity: 1;
}

.suggestion-type {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-gold);
    background: linear-gradient(
        135deg,
        rgba(201, 169, 78, 0.15),
        rgba(201, 169, 78, 0.1)
    );
    padding: 4px 8px;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.3s ease;
    border: 1px solid rgba(201, 169, 78, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-suggestion:hover .suggestion-type {
    background: linear-gradient(
        135deg,
        rgba(201, 169, 78, 0.25),
        rgba(201, 169, 78, 0.15)
    );
    border-color: rgba(201, 169, 78, 0.3);
    transform: scale(1.02);
}

.no-results {
    padding: 24px;
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
    font-size: 14px;
    opacity: 0;
    animation: fadeInNoResults 0.4s ease 0.2s forwards;
}

@keyframes fadeInNoResults {
    to {
        opacity: 1;
    }
}

/* Search Tabs */
.search-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.search-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}

.search-tab::before {
    display: none;
}

.search-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
}

.search-tab:hover::before {
    display: none;
}

.search-tab.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.search-tab.active::before {
    display: none;
}

.search-tab svg {
    width: 14px;
    height: 14px;
}

.search-tab.active svg {
    color: var(--color-gold);
}

/* Profile Search Suggestions */
.profile-suggestion {
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: visible;
    opacity: 0;
    animation: slideInSuggestion 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        forwards;
}

.profile-suggestion:nth-child(1) {
    animation-delay: 0.1s;
}

.profile-suggestion:nth-child(2) {
    animation-delay: 0.15s;
}

.profile-suggestion:nth-child(3) {
    animation-delay: 0.2s;
}

.profile-suggestion:nth-child(4) {
    animation-delay: 0.25s;
}

.profile-suggestion:nth-child(5) {
    animation-delay: 0.3s;
}

.profile-suggestion:hover {
    background: rgba(201, 169, 78, 0.06);
}

.profile-suggestion-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.profile-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.profile-suggestion:hover .profile-avatar img {
    transform: scale(1.02);
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    transition: color 0.3s ease;
}

.profile-suggestion:hover .profile-name {
    color: #1a252f;
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.profile-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.profile-badge.admin {
    background: var(--color-error);
    color: white;
}

.profile-badge.member {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.member-since {
    color: #6c7b7d;
    opacity: 0.8;
}

.profile-suggestion:hover .member-since {
    opacity: 1;
    color: #5a6c6e;
}

/* Loading animation for search */
.search-loading {
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
}

.search-loading::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #e3e3e3;
    border-top: 2px solid var(--color-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Smooth focus ring animation */
.quick-search-bar:focus-within::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 27px;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.1)
    );
    z-index: -1;
    animation: focusRing 2s ease-in-out infinite;
}

@keyframes focusRing {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quick-search-dropdown {
        min-width: auto;
        max-width: calc(100vw - 32px);
        width: 100%;
    }

    .search-suggestion {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .quick-search-bar {
        min-width: 150px;
        max-width: 200px;
    }

    .quick-search-dropdown {
        min-width: 380px;
        max-width: 450px;
        left: -100px;
        max-height: 200px;
        margin-top: 4px;
    }

    .search-suggestion {
        min-width: 360px;
        padding: 8px 10px;
        gap: 8px;
        font-size: 12px;
    }

    .suggestion-title {
        font-size: 12px;
    }

    .suggestion-subtitle {
        font-size: 10px;
    }

    .suggestion-type {
        font-size: 10px;
        padding: 1px 4px;
    }

    #quickSearchInput {
        font-size: 12px;
    }
}

/* Animation for search bar focus */
.quick-search-bar {
    position: relative;
    overflow: hidden;
}

.quick-search-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.quick-search-bar:focus-within::before {
    left: 100%;
}

/* User Account Section */
.user-account-section {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.login-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.login-icon {
    width: 16px;
    height: 16px;
}

/* Enhanced Admin User Profile - Executive Authority */
.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 2px;
    transition: all var(--transition-fast) ease;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    overflow: visible;
}

.user-profile:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Default User Avatar Styling */
.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
    object-fit: cover;
    overflow: hidden;
}

/* Admin Avatar with Authority Styling - Only for cherifmed1200@gmail.com */
.user-profile.admin-user .user-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(
                135deg,
                #ffd700 0%,
                #d4af37 25%,
                #ffa500 50%,
                #d4af37 75%,
                #ffd700 100%
            )
            border-box;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow:
        0 0 15px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    object-fit: cover;
    overflow: hidden;
}

/* Default avatar hover */
.user-avatar:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Level ring tooltip */

/* Reply avatar ring (compact) */
.reply-avatar-container {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    overflow: visible;
    width: 32px;
    height: 32px;
}
.reply-avatar-container .reply-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.reply-avatar-container .reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Profile modal XP section */
.profile-level-section {
    margin-top: 16px;
}
.profile-level-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 14px;
    margin-bottom: 8px;
}
.profile-xp-bar {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    overflow: hidden;
}
.profile-xp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
    transition: width 0.4s ease;
}

/* Admin avatar hover - Only for cherifmed1200@gmail.com */
.user-profile.admin-user .user-avatar:hover {
    transform: scale(1.02);
}

/* VIP hover effects removed - no longer needed */

/* VIP system removed */

/* Default User Name Styling */
.user-name {
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Admin Name with Authority Styling - Only for cherifmed1200@gmail.com */
.user-profile.admin-user .user-name {
    color: transparent;
    background: linear-gradient(
        135deg,
        #ffd700 0%,
        #ffffff 25%,
        #d4af37 50%,
        #ffffff 75%,
        #ffd700 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Admin Title Badge - Only for cherifmed1200@gmail.com */
.user-profile.admin-user .user-name::after {
    content: "ADMIN";
    position: absolute;
    top: -14px;
    left: 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-gold);
    background: rgba(212, 175, 55, 0.15);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    letter-spacing: 0.3px;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(24, 24, 24, 0.98);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding: 6px 0;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: all var(--transition-fast) ease;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.user-profile:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    font-family: "Inter", sans-serif;
    font-size: 13px;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: white;
}

.dropdown-item svg {
    width: 16px;
    height: 16px;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Search Modal with Enhanced Animations */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Ensure no scrollbars anywhere in modal */
    overflow: hidden;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
}

/* Smooth closing animation */
.search-modal.closing {
    opacity: 0;
    visibility: visible;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    transition: all 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.search-modal-content {
    background: rgba(10, 10, 10, 0.98);
    border-radius: 4px;
    padding: 44px;
    width: 90%;
    max-width: 580px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid rgba(201, 169, 78, 0.08);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
    transform: translateY(50px) scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
    position: relative;
    min-height: 400px;
}

.search-modal.active .search-modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Smooth closing animation for modal content - ONLY opacity change */
.search-modal.closing .search-modal-content {
    opacity: 0;
    animation: none;
    transition: opacity 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    /* NO transforms - maintain exact position and size */
    transform: none !important;
    overflow: hidden;
}

/* Modal glow effect - disabled */
.search-modal-content::before {
    display: none;
}

/* Prevent search results from changing during closing */
.search-modal.closing .search-results {
    overflow: hidden;
}

/* Disable transitions on search results during closing */
.search-modal.closing .search-results.transitioning {
    transition: none;
    transform: none;
    opacity: 1;
}

/* Keyframe Animations */
@keyframes modalBackdropEnter {
    0% {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
    100% {
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(15px);
    }
}

@keyframes modalEnter {
    0% {
        transform: translateY(50px) scale(0.8);
        opacity: 0;
    }
    60% {
        transform: translateY(-1px) scale(1.02);
        opacity: 0.9;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes modalFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.001);
    }
}

@keyframes glowPulse {
    0%,
    100% {
        opacity: 0.4;
        filter: blur(8px);
    }
    50% {
        opacity: 0.8;
        filter: blur(12px);
    }
}

@keyframes slideUpFade {
    0% {
        transform: translateY(25px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes smoothSlideUp {
    0% {
        transform: translateY(15px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes tagStagger {
    0% {
        transform: translateY(15px) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes resultFadeIn {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    transform: translateY(20px);
    opacity: 0;
    animation: slideUpFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s
        forwards;
}

.search-header h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.search-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 30px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: rotate(0deg) scale(1);
    opacity: 0;
    animation: slideUpFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s
        forwards;
}

.search-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: rotate(90deg) scale(1.03);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1);
}

.search-input-container {
    position: relative;
    margin-bottom: 30px;
    transform: translateY(20px);
    opacity: 0;
    animation: slideUpFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s
        forwards;
}

#searchInput {
    width: 100%;
    padding: 16px 50px 16px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
}

#searchInput::placeholder {
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

#searchInput:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(201, 169, 78, 0.25);
    box-shadow: 0 0 0 3px rgba(201, 169, 78, 0.06);
}

#searchInput:focus::placeholder {
    color: rgba(255, 255, 255, 0.3);
    transform: translateX(5px);
}

.search-icon-input {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.search-icon-input svg {
    width: 100%;
    height: 100%;
}

.search-suggestions {
    transform: translateY(20px);
    opacity: 0;
    animation: slideUpFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s
        forwards;
}

.search-suggestions h3 {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.suggestion-tag {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 1;
    box-shadow: none;
}

/* Suggestion tags - animations disabled for cleaner look */

.suggestion-tag:hover {
    background: rgba(201, 169, 78, 0.06);
    color: var(--color-gold);
    border-color: rgba(201, 169, 78, 0.15);
}

/* Search Results with Enhanced Animations */
.search-results {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    opacity: 1;
    min-height: 250px;
    /* Prevent height changes during transitions */
    overflow-y: auto;
    overflow-x: hidden;
    /* Hide scrollbar while keeping scroll functionality - STRONG RULES */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) - STRONG RULES */
.search-results::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Extra protection during transitions */
.search-results.transitioning {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.search-results.transitioning::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Universal scrollbar hiding for entire search modal */
.search-modal * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.search-modal *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Reddit Review Section */
.reddit-review-section {
    margin: 60px auto;
    padding: 48px;
    max-width: 860px;
    width: 88%;
}

.reddit-review-card {
    background: rgba(255, 255, 255, 0.015);
    border-radius: 4px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: none;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.reddit-review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ff4500, transparent);
    border-radius: 0;
}

.reddit-review-card:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 69, 0, 0.1);
    box-shadow: none;
}

.reddit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.reddit-logo {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.reddit-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.reddit-platform {
    color: #ff4500;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.reddit-subreddit {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
}

.reddit-votes {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 6px 12px;
    border-radius: 0;
    border: 1px solid rgba(255, 69, 0, 0.2);
}

.upvote-icon {
    color: #ff4500;
    font-size: 14px;
    margin-right: 6px;
    font-weight: bold;
}

.vote-count {
    color: #ff4500;
    font-weight: 600;
    font-size: 14px;
}

.reddit-content {
    color: white;
}

.reddit-user {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    border: 2px solid rgba(255, 69, 0, 0.3);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.username {
    color: #ff6b35;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.post-time {
    color: rgba(255, 255, 255, 0.3);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reddit-text {
    margin-bottom: 20px;
    line-height: 1.6;
}

.reddit-text p {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    margin: 0;
    font-style: normal;
    line-height: 1.8;
    letter-spacing: 0.015em;
}

.reddit-engagement {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.engagement-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.3s ease;
}

.engagement-item:hover {
    color: #ff6b35;
}

.engagement-icon {
    font-size: 14px;
}

.engagement-count,
.engagement-text {
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .reddit-review-section {
        margin: 20px auto;
        padding: 20px;
        width: 95%;
    }

    .reddit-review-card {
        padding: 20px;
    }

    .reddit-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .reddit-votes {
        align-self: flex-end;
    }

    .reddit-engagement {
        flex-wrap: wrap;
        gap: 16px;
    }
}

.search-results.transitioning {
    transform: translateY(-2px);
    opacity: 0.3;
}

.search-results-list {
    animation: slideUpFade 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.search-results-list h3 {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}

.search-result-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    padding: 22px;
    margin-bottom: 12px;
    transition: all 0.4s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transform: translateY(10px);
    opacity: 0;
    animation: resultFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Staggered animation for search results */
.search-result-item:nth-child(2) {
    animation-delay: 0.1s;
}
.search-result-item:nth-child(3) {
    animation-delay: 0.2s;
}
.search-result-item:nth-child(4) {
    animation-delay: 0.3s;
}
.search-result-item:nth-child(5) {
    animation-delay: 0.4s;
}
.search-result-item:nth-child(6) {
    animation-delay: 0.5s;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.result-main h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 5px 0;
}

.result-brand {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0 0 5px 0;
    font-weight: 300;
}

.result-type {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0 0 15px 0;
    font-style: italic;
}

.result-notes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.notes-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-right: 5px;
}

.note-tag {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.note-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.no-results {
    text-align: center;
    padding: 50px 20px;
    animation: slideUpFade 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.no-results h3 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.no-results p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* Advanced Visual Effects */
.search-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(100, 150, 255, 0.1) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(255, 100, 200, 0.1) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 40% 80%,
            rgba(100, 255, 150, 0.1) 0%,
            transparent 50%
        );
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.search-modal.active::before {
    opacity: 1;
    animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {
    0%,
    100% {
        transform: translateX(0) translateY(0) scale(1);
    }
    25% {
        transform: translateX(-10px) translateY(-1px) scale(1.02);
    }
    50% {
        transform: translateX(5px) translateY(10px) scale(0.98);
    }
    75% {
        transform: translateX(8px) translateY(-2px) scale(1.01);
    }
}

/* Hide scrollbar for modal content */
.search-modal-content {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.search-modal-content::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* Responsive Search Modal */
@media (max-width: 768px) {
    .floating-menu {
        width: 42px;
        height: 42px;
        top: 20px;
        left: 20px;
    }

    .floating-menu-icon {
        width: 16px;
        height: 16px;
    }

    .floating-menu-badge {
        top: -6px;
        right: -6px;
        min-width: 14px;
        height: 14px;
        font-size: 8px;
        line-height: 10px;
        padding: 2px 4px;
        border-width: 1.5px;
    }

    .floating-search {
        width: 45px;
        height: 45px;
        top: 20px;
        right: 20px;
    }

    .floating-search-icon {
        width: 18px;
        height: 18px;
    }

    .search-modal-content {
        padding: 25px 20px;
        margin: 15px;
        width: calc(100% - 30px);
        border-radius: 4px;
        animation: modalFloat 8s ease-in-out infinite;
    }

    .search-header h2 {
        font-size: 18px;
    }

    .search-close {
        width: 35px;
        height: 35px;
        font-size: 24px;
    }

    #searchInput {
        padding: 15px 45px 15px 18px;
        font-size: 14px;
        border-radius: 2px;
    }

    .search-result-item {
        padding: 18px;
        border-radius: 2px;
    }

    .result-main h4 {
        font-size: 16px;
    }

    .suggestion-tag {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 4px;
    }

    .note-tag {
        padding: 4px 8px;
        font-size: 10px;
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    .search-modal-content {
        padding: 20px 15px;
        margin: 10px;
        width: calc(100% - 20px);
    }

    .search-header {
        margin-bottom: 20px;
    }

    .search-input-container {
        margin-bottom: 20px;
    }

    .suggestion-tags {
        gap: 8px;
    }

    .result-notes {
        gap: 6px;
        margin-top: 10px;
    }
}

/* Authentication Modal Styles - HIGHEST PRIORITY POPUP WINDOW */
.auth-modal {
    display: none;
    position: fixed;
    z-index: 2010 !important; /* Highest possible priority */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(25px);
    animation: fadeIn 0.3s ease;
    pointer-events: all !important;
    isolation: isolate;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* When modal is shown - center it perfectly */
.auth-modal.show,
.auth-modal[style*="flex"] {
    display: flex !important;
}

.auth-modal-content {
    position: relative;
    background: rgba(10, 10, 10, 0.98);
    margin: 0;
    padding: 0;
    border: 1px solid rgba(201, 169, 78, 0.12);
    border-radius: 4px;
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    overflow-y: auto;
    backdrop-filter: blur(40px);
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    animation: modalReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--z-modal) !important;
    isolation: isolate;
    transform: scale(1);
}

/* Clean modal entrance */
@keyframes modalReveal {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle ambient glow */
@keyframes modalGlow {
    0%,
    100% {
        box-shadow:
            0 40px 80px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(201, 169, 78, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    50% {
        box-shadow:
            0 40px 80px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(201, 169, 78, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}

/* Apply single subtle animation to auth modal when shown */
.auth-modal.show .auth-modal-content {
    animation:
        modalReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        modalGlow 6s ease-in-out infinite 2s;
}

/* Clean backdrop animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Enhanced backdrop blur for high priority window */
.auth-modal.show {
    animation: fadeIn 0.4s ease-out;
}

.auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 36px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    position: relative;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Subtle top accent line */
.auth-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 78, 0.3) 50%,
        transparent 100%
    );
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

.auth-header h2 {
    color: var(--color-text-primary);
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.06em;
    position: relative;
}

.auth-close {
    background: none;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-normal);
}

.auth-close:hover {
    color: var(--color-gold);
    background: rgba(201, 169, 78, 0.06);
    border-color: rgba(201, 169, 78, 0.1);
}

.auth-body {
    padding: 36px;
}

.auth-welcome {
    text-align: center;
    margin-bottom: 32px;
}

.auth-welcome h3 {
    color: rgba(245, 243, 240, 0.9);
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 8px 0;
    letter-spacing: 0.04em;
}

.auth-welcome p {
    color: rgba(245, 243, 240, 0.4);
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 13px;
    margin: 0;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.google-signin-container {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

.auth-divider {
    position: relative;
    text-align: center;
    margin: 25px 0;
}

.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.auth-divider span {
    background: linear-gradient(
        135deg,
        rgba(20, 20, 20, 0.95),
        rgba(30, 30, 30, 0.98)
    );
    color: rgba(255, 255, 255, 0.6);
    padding: 0 15px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.email-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.form-group label {
    color: var(--color-text-secondary);
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 8px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.form-group input {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    padding: 14px 18px;
    color: var(--color-text-primary);
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 14px;
    transition: all var(--transition-normal);
}

.form-group input:focus {
    outline: none;
    border-color: rgba(201, 169, 78, 0.35);
    background: rgba(201, 169, 78, 0.03);
    box-shadow: 0 0 0 3px rgba(201, 169, 78, 0.06);
}

.form-group input::placeholder {
    color: var(--color-text-muted);
}

.password-requirements {
    margin-top: 5px;
}

.password-requirements small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
}

.checkbox-container input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.checkmark {
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.forgot-password {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    transition: color 0.3s ease;
}

.forgot-password:hover {
    color: white;
}

.auth-submit-btn {
    background: transparent;
    border: 1px solid rgba(201, 169, 78, 0.4);
    color: var(--color-gold);
    padding: 15px 24px;
    border-radius: 0;
    cursor: pointer;
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    transition: all var(--transition-normal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 12px;
    width: 100%;
}

.auth-submit-btn:hover {
    background: rgba(201, 169, 78, 0.08);
    border-color: var(--color-gold);
    transform: none;
    box-shadow: var(--shadow-gold);
}

/* Auth Error Display */
.auth-error {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 2px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #ff6b7a;
    font-size: 14px;
    line-height: 1.4;
    backdrop-filter: blur(10px);
    animation: errorSlideIn 0.3s ease-out;
}

.auth-error.success {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
    color: #4ade80;
}

.auth-error.warning {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #fbbf24;
}

@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Email Verification Modal Styles */
.verification-content {
    text-align: center;
    padding: 20px 0;
}

.verification-icon {
    margin-bottom: 20px;
}

.verification-message {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    line-height: 1.6;
}

.verification-code-input {
    margin-bottom: 20px;
}

.verification-code-input input {
    width: 200px;
    padding: 15px 20px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 8px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.verification-code-input input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    outline: none;
}

.verification-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 2px;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.verification-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}

.verification-actions .btn-primary,
.verification-actions .btn-secondary {
    min-width: 140px;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 600;
    transition: all var(--transition-fast) ease;
}

.verification-actions .btn-primary {
    background: var(--color-gold);
    color: #0a0a0a;
    border: none;
}

.verification-actions .btn-primary:hover {
    background: var(--color-gold-light);
}

.verification-actions .btn-secondary {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.verification-actions .btn-secondary:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: var(--color-gold);
}

.verification-info {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.5;
}

.verification-info p {
    margin: 5px 0;
}

.btn-loading {
    display: none !important;
}

.loading .btn-text {
    display: none;
}

.loading .btn-loading {
    display: inline !important;
}

/* Admin Dashboard Styles - Highest Priority */
.admin-modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 100002 !important;
    justify-content: center !important;
    align-items: center !important;
}

.admin-modal.show {
    display: flex !important;
}

.admin-modal-content {
    background: rgba(30, 30, 30, 0.98) !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 4px !important;
    padding: 30px !important;
    max-width: 1200px !important;
    width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    backdrop-filter: blur(20px) !important;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    color: white !important;
    z-index: 100003 !important;
    animation: adminModalAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.admin-modal-header h2 {
    color: var(--color-gold);
    font-family: "Playfair Display", serif;
    font-size: 2.5em;
    margin: 0;
    font-weight: 700;
}

.admin-close-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(212, 175, 55, 0.5) !important;
    color: var(--color-gold) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    z-index: 100004 !important;
    position: relative !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.admin-close-btn:hover {
    background: rgba(212, 175, 55, 0.3) !important;
    border-color: var(--color-gold) !important;
    color: #ffffff !important;
    transform: scale(1.03) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.stat-card h3 {
    font-size: 2.5em;
    margin: 0 0 10px 0;
    color: var(--color-gold);
    font-weight: 700;
}

.stat-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.admin-section {
    margin-top: 30px;
}

.admin-section h3 {
    color: var(--color-gold);
    margin-bottom: 20px;
    font-size: 1.5em;
}

.users-table-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th,
.users-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.users-table th {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-gold);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

.users-table td {
    color: rgba(255, 255, 255, 0.9);
}

.user-status {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-status.active {
    background: rgba(40, 167, 69, 0.2);
    color: #4ade80;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.user-status.banned {
    background: rgba(220, 53, 69, 0.2);
    color: #ff6b7a;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.user-status.admin {
    background: rgba(212, 175, 55, 0.2);
    color: var(--color-gold);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.user-actions {
    display: flex;
    gap: 8px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.btn-ban {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b7a;
}

.btn-ban:hover {
    background: rgba(220, 53, 69, 0.25);
}

.btn-unban {
    background: rgba(40, 167, 69, 0.15);
    color: #4ade80;
}

.btn-unban:hover {
    background: rgba(40, 167, 69, 0.25);
}

.btn-danger {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b7a;
}

.btn-danger:hover {
    background: rgba(220, 53, 69, 0.25);
}

@media (max-width: 768px) {
    .admin-modal-content {
        width: 98%;
        margin: 10px;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .users-table-container {
        overflow-x: auto;
    }

    .users-table {
        min-width: 800px;
    }
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-switch {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-switch p {
    color: rgba(255, 255, 255, 0.6);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    margin: 0;
}

.auth-switch a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-switch a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive Auth Modal */
@media (max-width: 768px) {
    .auth-modal-content {
        margin: 5% auto;
        width: 95%;
        max-width: none;
    }

    .auth-header {
        padding: 20px 25px 15px;
    }

    .auth-header h2 {
        font-size: 20px;
    }

    .auth-body {
        padding: 25px 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .auth-modal-content {
        margin: 2% auto;
        width: 98%;
        border-radius: 2px;
    }

    .auth-header {
        padding: 15px 20px 10px;
    }

    .auth-body {
        padding: 20px 15px;
    }

    .auth-welcome h3 {
        font-size: 18px;
    }
}

.nav-link {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-family: 'DM Sans', 'Inter', sans-serif;
}

.nav-link:hover {
    color: var(--color-gold);
    transform: none;
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after {
    width: 100%;
}

/* Header Image in Navigation */
#header-image {
    height: 40px;
    width: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    border-radius: 2px;
}

#header-image:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.search-container:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1);
}

.search-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.search-container:hover .search-icon {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

/* Language Changer */
.language-changer {
    position: relative;
    z-index: 1004;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.language-selector {
    position: relative;
    display: inline-block;
}

.current-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    min-width: 75px;
    justify-content: center;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Animated background gradient */
.current-lang::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.6s ease;
}

.current-lang:hover::before {
    left: 100%;
}

.current-lang:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.current-lang .flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 1;
}

.current-lang .flag svg {
    border-radius: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.current-lang:hover .flag svg {
    transform: scale(1.02) rotate(2deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.current-lang .lang-code {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1003;
    min-width: 160px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Dropdown arrow */
.language-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 0, 0, 0.95);
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.3));
}

.language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lang-option:last-child {
    border-bottom: none;
}

/* Hover effect background */
.lang-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.lang-option:hover::before {
    left: 100%;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
    transform: translateX(8px) scale(1.02);
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.3);
}

.lang-option .flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.lang-option .flag svg {
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lang-option:hover .flag svg {
    transform: scale(1.02) rotate(2deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.lang-option .lang-name {
    font-weight: 500;
    flex: 1;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.lang-option:hover .lang-name {
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lang-option[data-lang="ar"] .lang-name {
    font-family: "Arial", sans-serif;
    direction: rtl;
    text-align: right;
}

/* Arrow indicator for dropdown */
.current-lang::after {
    content: "▼";
    font-size: 10px;
    margin-left: 6px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.current-lang:hover::after {
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.language-selector.active .current-lang::after {
    transform: rotate(180deg) scale(1.02);
    color: rgba(255, 255, 255, 0.9);
}

/* Staggered animation for dropdown items */
.lang-option:nth-child(1) {
    animation-delay: 0.1s;
}
.lang-option:nth-child(2) {
    animation-delay: 0.15s;
}
.lang-option:nth-child(3) {
    animation-delay: 0.2s;
}

.language-dropdown.active .lang-option {
    animation: slideInFromRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive navigation */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 20px;
    }

    .nav-left,
    .nav-right {
        gap: 20px;
    }

    .nav-link {
        font-size: 14px;
    }

    #header-image {
        height: 35px;
    }

    .search-container {
        width: 32px;
        height: 32px;
    }

    .search-icon {
        width: 14px;
        height: 14px;
    }

    /* User profile mobile adjustments */
    .user-profile {
        padding: 6px 12px;
        gap: 8px;
        border-radius: 2px;
    }

    .user-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        overflow: hidden;
    }

    .user-profile.admin-user .user-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        overflow: hidden;
    }

    .user-name {
        font-size: 11px;
        max-width: 80px;
    }

    .user-profile.admin-user .user-name {
        font-size: 12px;
        max-width: 100px;
    }

    .user-profile.admin-user .user-name::after {
        font-size: 7px;
        top: -14px;
        padding: 1px 4px;
    }
}

@media (max-width: 480px) {
    .nav-left,
    .nav-right {
        gap: 15px;
    }

    .nav-link {
        font-size: 13px;
    }

    #header-image {
        height: 30px;
    }

    .search-container {
        width: 28px;
        height: 28px;
    }

    .search-icon {
        width: 12px;
        height: 12px;
    }

    /* User profile very small mobile adjustments */
    .user-profile {
        padding: 5px 10px;
        gap: 6px;
        border-radius: 2px;
    }

    .user-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        overflow: hidden;
    }

    .user-profile.admin-user .user-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        overflow: hidden;
    }

    .user-name {
        font-size: 10px;
        max-width: 70px;
    }

    .user-profile.admin-user .user-name {
        font-size: 11px;
        max-width: 85px;
    }

    .user-profile.admin-user .user-name::after {
        font-size: 6px;
        top: -12px;
        padding: 1px 3px;
        letter-spacing: 0.3px;
    }
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Additional blur overlay for bottom-focused effect - only composites when blur active */
.hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
    mask: linear-gradient(to top, black 0%, transparent 100%);
    -webkit-mask: linear-gradient(to top, black 0%, transparent 100%);
}
.hero.blur-active::before {
    backdrop-filter: blur(var(--bottom-blur, 0px));
    transition: backdrop-filter 0.1s ease;
}

/* Brand Image Section */
.brand-image-section {
    position: relative;
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

.brand-image {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    will-change: transform, opacity;
    transform: translateY(-30px);
    /* Ensure consistent appearance regardless of background */
    mix-blend-mode: normal;
    isolation: isolate;
}

/* Ensure brand image maintains consistent appearance during parallax */
.brand-image.parallax-active {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)) !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
}

#background-video,
#background-video-2,
#background-video-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: opacity 1s ease-in-out;
}

/* Dynamic scroll-responsive vignette overlay */
.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            ellipse 150% 100% at 50% 100%,
            transparent 0%,
            transparent 20%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.6)) 50%,
            rgba(0, 0, 0, var(--vignette-intensity, 0)) 80%,
            rgba(0, 0, 0, var(--vignette-intensity, 0)) 100%
        ),
        linear-gradient(
            to top,
            rgba(0, 0, 0, var(--vignette-intensity, 0)) 0%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.9)) 15%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.7)) 30%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.5)) 45%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.3)) 60%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.1)) 80%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 200% 150% at 50% 100%,
            transparent 0%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.4)) 60%,
            rgba(0, 0, 0, calc(var(--vignette-intensity, 0) * 0.8)) 100%
        );
    z-index: 1;
    pointer-events: none;
    transition: all 0.1s ease-out;
}

/* Video Controls */
.video-controls {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 15px;
    z-index: 10;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hero:hover .video-controls {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.video-control-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.video-control-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.video-control-btn:hover::before {
    left: 100%;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
}

.video-control-btn:active {
    transform: translateY(-1px) scale(1.02);
    transition: all 0.1s ease;
}

.video-control-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.video-control-btn:hover svg {
    transform: scale(1.02);
}

/* Responsive video controls */
@media (max-width: 768px) {
    .video-controls {
        bottom: 20px;
        right: 20px;
        gap: 12px;
    }

    .video-control-btn {
        width: 45px;
        height: 45px;
    }

    .video-control-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .video-controls {
        bottom: 15px;
        right: 15px;
        gap: 10px;
    }

    .video-control-btn {
        width: 40px;
        height: 40px;
    }

    .video-control-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* --------------------------------------------------- */
/* Hero Content Overlay                                */
/* --------------------------------------------------- */
.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 0 60px 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    /* Gradient backdrop for readability */
    background: linear-gradient(to top, rgba(6,6,6,0.85) 0%, rgba(6,6,6,0.5) 50%, transparent 100%);
    padding-top: 160px;
}

.hero-eyebrow {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.hero-headline {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif !important;
    font-size: clamp(42px, 7vw, 90px) !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

.hero-subline {
    font-family: 'DM Sans', 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    color: rgba(245, 243, 240, 0.55) !important;
    max-width: 460px;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-gold);
    border: 1px solid rgba(201, 169, 78, 0.3);
    border-radius: 0;
    background: transparent;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
}

.hero-cta:hover {
    background: rgba(201, 169, 78, 0.1);
    border-color: var(--color-gold);
    box-shadow: 0 4px 30px rgba(201, 169, 78, 0.15);
    transform: translateY(-2px);
}

.hero-cta svg {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-cta:hover svg {
    transform: translateY(3px);
}

@keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hero-content {
        padding: 0 30px 60px;
        padding-top: 120px;
    }
    .hero-headline {
        font-size: clamp(32px, 10vw, 52px) !important;
    }
    .hero-subline {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: 0 20px 40px;
        padding-top: 100px;
    }
}

/* --------------------------------------------------- */
/* Site Footer                                         */
/* --------------------------------------------------- */
.site-footer {
    background: #060606;
    border-top: 1px solid rgba(201, 169, 78, 0.1);
    padding: 80px 40px 40px;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--color-gold);
}

.footer-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245, 243, 240, 0.85);
}

.footer-tagline {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: rgba(245, 243, 240, 0.35);
    letter-spacing: 0.03em;
    line-height: 1.6;
    max-width: 280px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-col h4 {
    font-family: 'DM Sans', 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: var(--color-gold) !important;
    margin-bottom: 8px !important;
}

.footer-col a {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(245, 243, 240, 0.4);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    padding: 2px 0;
}

.footer-col a:hover {
    color: rgba(245, 243, 240, 0.8);
    transform: translateX(4px);
}

.footer-bottom {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
}

.footer-bottom span {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(245, 243, 240, 0.2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 60px 24px 30px;
    }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/* Floating Menu Icon */
.floating-menu {
    position: fixed;
    top: 30px;
    left: 30px;
    width: 42px;
    height: 42px;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    backdrop-filter: blur(16px);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.floating-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-menu:hover {
    background: rgba(15, 15, 15, 0.95);
    border-color: rgba(201, 169, 78, 0.2);
}

.floating-menu-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.floating-menu-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    stroke-width: 1.8;
}

.floating-menu:hover .floating-menu-icon {
    color: var(--color-gold);
}

.floating-menu-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-gold);
    color: #060606;
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 8px;
    font-weight: 600;
    min-width: 14px;
    height: 14px;
    text-align: center;
    display: none;
    line-height: 10px;
    font-family: 'DM Sans', sans-serif;
    border: none;
}

.floating-menu-badge.show {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.floating-menu:hover .floating-menu-badge {
    transform: none;
}

/* Floating Search Icon */
.floating-search {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 42px;
    height: 42px;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    backdrop-filter: blur(16px);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.floating-search.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-search:hover {
    background: rgba(15, 15, 15, 0.95);
    border-color: rgba(201, 169, 78, 0.2);
}

.floating-search-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.floating-search:hover .floating-search-icon {
    color: var(--color-gold);
}

/* Floating Search - Dark Background State (default) */
.floating-search.dark-bg {
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.floating-search.dark-bg:hover {
    background: rgba(15, 15, 15, 0.95);
    border-color: rgba(201, 169, 78, 0.2);
}

.floating-search.dark-bg .floating-search-icon {
    color: rgba(255, 255, 255, 0.7);
}

.floating-search.dark-bg:hover .floating-search-icon {
    color: var(--color-gold);
}

/* Floating Menu - White Background State */
.floating-menu.white-bg {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.floating-menu.white-bg:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

.floating-menu.white-bg .floating-menu-icon {
    color: rgba(0, 0, 0, 0.7);
}

.floating-menu.white-bg:hover .floating-menu-icon {
    color: rgba(0, 0, 0, 0.9);
}

/* Floating Menu - Cream Background State */
.floating-menu.cream-bg {
    background: rgba(93, 64, 55, 0.1);
    border: 1px solid rgba(93, 64, 55, 0.15);
}

.floating-menu.cream-bg:hover {
    background: rgba(93, 64, 55, 0.18);
    border-color: rgba(93, 64, 55, 0.3);
}

.floating-menu.cream-bg .floating-menu-icon {
    color: rgba(93, 64, 55, 0.8);
}

.floating-menu.cream-bg:hover .floating-menu-icon {
    color: rgba(93, 64, 55, 1);
}

/* Floating Search - White Background State */
.floating-search.white-bg {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.floating-search.white-bg:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

.floating-search.white-bg .floating-search-icon {
    color: rgba(0, 0, 0, 0.7);
}

.floating-search.white-bg:hover .floating-search-icon {
    color: rgba(0, 0, 0, 0.9);
}

/* Floating Search - Cream Background State */
.floating-search.cream-bg {
    background: rgba(139, 115, 85, 0.1);
    border: 1px solid rgba(139, 115, 85, 0.15);
}

.floating-search.cream-bg:hover {
    background: rgba(139, 115, 85, 0.18);
    border-color: rgba(139, 115, 85, 0.3);
}

.floating-search.cream-bg .floating-search-icon {
    color: rgba(93, 64, 55, 0.8);
}

.floating-search.cream-bg:hover .floating-search-icon {
    color: rgba(93, 64, 55, 1);
}

/* Social Media Links */
.social-links {
    position: fixed;
    bottom: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}

.social-links.visible {
    opacity: 1;
    visibility: visible;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: 50%;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.social-link:hover {
    color: var(--color-gold);
    border-color: rgba(201, 169, 78, 0.2);
}

.social-icon {
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
}

/* Social links styling for different backgrounds */
.social-links.white-bg .social-link {
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
    border-color: rgba(0, 0, 0, 0.2);
}

.social-links.white-bg .social-link:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.4);
}

.social-links.cream-bg .social-link {
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
    border-color: rgba(0, 0, 0, 0.2);
}

.social-links.cream-bg .social-link:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.4);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(10, 10, 10, 0.92);
    border: 1px solid rgba(201, 169, 78, 0.15);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: rgba(15, 15, 15, 0.95);
    border-color: rgba(201, 169, 78, 0.4);
    box-shadow: 0 0 20px rgba(201, 169, 78, 0.08);
}

.back-to-top:active {
    transform: scale(0.95);
}

.back-to-top-icon {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.back-to-top:hover .back-to-top-icon {
    color: var(--color-gold);
}

.back-to-top-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.progress-ring {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.progress-ring-circle {
    transition: stroke-dasharray 0.3s ease;
}

.progress-ring-progress {
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
    transition: stroke-dashoffset 0.3s ease;
}

@keyframes pulse {
    0%,
    100% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            0 0 0 10px rgba(255, 255, 255, 0);
    }
}

.back-to-top.pulse {
    animation: pulse 2s infinite;
}

/* Layton Perfume Image with Parallax Effect */
.layton-image {
    width: 340px;
    height: auto;
    margin: 200px 0 0 80px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    opacity: 1;
    transform: translateX(0px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
    transform-origin: center center;
}

.layton-image.parallax-active {
    transition:
        transform 0.1s ease-out,
        opacity 0.1s ease-out;
}

/* Advanced Hover Effect */
.layton-image:hover {
    transform: scale(1.02) translateY(-2px) !important;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 60px rgba(201, 169, 78, 0.08));
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Smooth transition back to normal state */
.layton-image:not(:hover) {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Glow animations disabled for cleaner look */

/* Small Fragrance Journey Text - Positioned in Layton section */
.fragrance-journey-small {
    position: absolute;
    top: 650px;
    left: 100px;
    text-align: left;
    color: white;
    z-index: 10;
    max-width: 350px;
    pointer-events: none;
}

.journey-text {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 2px;
}

.journey-highlight {
    color: var(--color-gold);
    font-weight: 600;
}

.performance-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 10px;
    border-radius: 6px;
}

/* Product Title Section */
.product-title,
.product-info-section {
    display: inline-block;
    vertical-align: top;
    margin: 220px 0 0 0px;
    text-align: center;
    padding: 0 20px;
}

.greenly-main-container .product-info-section {
    margin-top: 20px;
}

.greenly-main-container .product-name,
.greenly-main-container .brand-name,
.greenly-main-container .brand-location {
    color: #1a5c30; /* Dark Green */
}

.product-title {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: none;
    will-change: transform, opacity;
    text-align: center;
}

.product-title.parallax-active {
    transition:
        transform 0.8s ease-out,
        opacity 0.8s ease-out;
}

/* Brand Name Styling */
.brand-name {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0 0 6px 0;
    letter-spacing: 0.25em;
    line-height: 1.2;
    text-transform: uppercase;
}

.brand-location {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0 0 20px 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.product-name {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Premium Price Container */
.product-price-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Luxury Price Badge */
.price-badge {
    position: relative;
    display: inline-block;
    padding: 10px 24px;
    background: rgba(201, 169, 78, 0.04);
    border: 1px solid rgba(201, 169, 78, 0.12);
    border-radius: 0;
    transition: all var(--transition-normal);
}

.price-badge.price-green {
    border-color: rgba(201, 169, 78, 0.15);
}

.price-badge.price-gold {
    border-color: rgba(201, 169, 78, 0.2);
}

.price-badge.price-green:hover,
.price-badge.price-gold:hover {
    border-color: rgba(201, 169, 78, 0.35);
    box-shadow: var(--shadow-gold);
}

.price-badge:hover {
    animation: none;
}

/* Corner Ornaments */
.price-ornament {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-gold-dark);
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
    opacity: 0.5;
}

.price-badge.price-green .price-ornament,
.price-badge.price-gold .price-ornament {
    border-color: var(--color-gold);
}

.price-ornament.top-left {
    top: 5px;
    left: 5px;
    border-right: none;
    border-bottom: none;
}

.price-ornament.top-right {
    top: 5px;
    right: 5px;
    border-left: none;
    border-bottom: none;
}

.price-ornament.bottom-left {
    bottom: 5px;
    left: 5px;
    border-right: none;
    border-top: none;
}

.price-ornament.bottom-right {
    bottom: 5px;
    right: 5px;
    border-left: none;
    border-top: none;
}

.price-badge.price-green:hover .price-ornament,
.price-badge.price-gold:hover .price-ornament {
    border-color: var(--color-gold-light);
    opacity: 1;
}

/* Shimmer Effect - disabled */
.price-shimmer {
    display: none;
}

/* Price Text Styling - Base */
.product-price {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--color-gold);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 3px;
    letter-spacing: 0.05em;
}

.price-badge.price-green .product-price,
.price-badge.price-gold .product-price {
    color: var(--color-gold);
}

.price-currency {
    font-size: 18px;
    letter-spacing: 0.5px;
}

.price-unit {
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.7;
}

.price-badge.price-green:hover .price-currency {
    color: var(--color-gold-light);
}

.price-badge.price-green:hover .price-unit {
    opacity: 0.9;
}

.price-badge.price-gold:hover .price-currency {
    color: var(--color-gold-light);
}

.price-badge.price-gold:hover .price-unit {
    opacity: 0.9;
}

/* Pulsing Glow Effect - disabled */
.price-glow {
    display: none;
}

/* Price Glow - Green Theme */
.price-badge.price-green .price-glow {
    display: none;
}

/* Price Glow - Gold Theme */
.price-badge.price-gold .price-glow {
    display: none;
}

@keyframes pulseGlow {
    0%,
    100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.price-badge:hover .price-glow {
    animation: none;
    opacity: 0.6;
}

/* Premium Subtitle - Clean styling */
.price-subtitle {
    font-family: "Playfair Display", serif;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-style: normal;
    transition: color 0.2s ease;
}

/* Red glow keyframes - disabled */

.product-price-container:hover .price-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* Advanced Quality Selector */
.quality-selector-container {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Quality Header */
.quality-header {
    text-align: center;
    margin-bottom: 6px;
}

.quality-title {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0 0 4px 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.quality-subtitle {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-style: normal;
}

/* Quality Options Container */
.quality-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
}

/* Hide Default Radio Buttons */
.quality-option input[type="radio"] {
    display: none;
}

/* Quality Option Styling */
.quality-option {
    position: relative;
    cursor: pointer;
}

.quality-label {
    display: block;
    cursor: pointer;
}

/* Quality Badge */
.quality-badge {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-normal);
    overflow: hidden;
}

/* Hover Effects */
.quality-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 169, 78, 0.3);
    background: rgba(201, 169, 78, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Selected State - Default Golden */
.quality-option input[type="radio"]:checked + .quality-label .quality-badge {
    border-color: rgba(201, 169, 78, 0.5);
    background: rgba(201, 169, 78, 0.08);
    box-shadow: 0 0 15px rgba(201, 169, 78, 0.15);
}

/* Haltane Identical Quality - Light Theme */
.haltane-section-container
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-badge {
    border: 1px solid var(--haltane-border) !important;
    background: var(--haltane-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Top Quality - Green Effect (Now Neutral/Gold) */
.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-badge {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.08);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.15);
}

/* Quality Content */
.quality-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 2;
}

.quality-name {
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
    transition: color var(--transition-fast);
}

.quality-description {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    font-style: normal;
    transition: color var(--transition-fast);
}

/* Enhanced Text on Selection - Default Golden */
.quality-option input[type="radio"]:checked + .quality-label .quality-name {
    color: var(--quality-identical);
    font-weight: 600;
}

.quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-description {
    color: var(--quality-identical);
    opacity: 0.8;
}

/* Top Quality - Green Text Effects */
.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-name {
    color: var(--quality-top);
    font-weight: 600;
}

.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-description {
    color: var(--quality-top);
    opacity: 0.8;
}

/* Haltane Identical Quality - Gold Text Effects */
.haltane-section-container
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-name {
    color: var(--haltane-accent-dark) !important;
    font-weight: 600 !important;
    font-size: 1em !important;
    letter-spacing: 0.03em !important;
}

.haltane-section-container
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-description {
    color: #8b6a4a !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Custom Fragrance Profile */
.layton-notes.custom-fragrance-profile {
    width: 320px;
    margin: 170px 0 0 20px;
    display: inline-block;
    opacity: 0;
    transform: translateX(100px) scale(0.8);
    transition: none;
    will-change: transform, opacity;
    cursor: pointer;
}

.layton-notes.parallax-active {
    transition:
        transform 0.1s ease-out,
        opacity 0.1s ease-out;
}

.fragrance-profile-container {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 28px;
    box-shadow: var(--shadow-lg);
}

.layton-notes:hover .fragrance-profile-container {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(201, 169, 78, 0.1);
    transition: all var(--transition-normal);
}

.profile-header {
    text-align: center;
    margin-bottom: 20px;
}

.profile-title {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-gold);
    margin: 0 0 4px 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.profile-subtitle {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: normal;
    letter-spacing: 0.04em;
}

.scent-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 25px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

/* Green category item styling */
.category-item.green .category-fill {
    background: var(--category-color, #22c55e);
}

.category-item.green .category-label {
    color: var(--category-color, #22c55e);
}

.category-item:hover {
    transform: translateX(3px);
}

.category-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.category-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Shimmer disabled for cleaner look */

/* Category-specific colors - Clean solid fills */
.warm-spicy .category-fill {
    background: #e85d3b;
}
.fresh-spicy .category-fill {
    background: #6b9b37;
}
.woody .category-fill {
    background: #8b7355;
}
.vanilla .category-fill {
    background: #d4a574;
}
.aromatic .category-fill {
    background: #3d8b7a;
}
.fruity .category-fill {
    background: #e07850;
}
.powdery .category-fill {
    background: #b89cc8;
}
.lavender .category-fill {
    background: #8b72b0;
}
.citrus .category-fill {
    background: #d4b82e;
}
.fresh .category-fill {
    background: #4aa8c7;
}

/* Haltane-specific scent colors */
.oud .category-fill {
    background: #8b5a2b;
}
.sweet .category-fill {
    background: #d47ba8;
}
.metallic .category-fill {
    background: #7a8a94;
}
.leather .category-fill {
    background: #6b4423;
}
.soft-spicy .category-fill {
    background: #c4a035;
}

.category-label {
    min-width: 80px;
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    text-align: right;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.intensity-meter {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 18px;
}

.meter-label {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.meter-container {
    position: relative;
}

.meter-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #e8a830, #e85d3b);
    border-radius: 4px;
    transition: width 1.5s ease-out;
    position: relative;
}

.meter-indicator {
    position: absolute;
    top: -2px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.meter-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

.scale-mark {
    font-weight: 500;
}

/* Quality Corner Ornaments */
.quality-ornament {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.quality-ornament.top-left {
    top: 4px;
    left: 4px;
    border-right: none;
    border-bottom: none;
}

.quality-ornament.top-right {
    top: 4px;
    right: 4px;
    border-left: none;
    border-bottom: none;
}

.quality-ornament.bottom-left {
    bottom: 4px;
    left: 4px;
    border-right: none;
    border-top: none;
}

.quality-ornament.bottom-right {
    bottom: 4px;
    right: 4px;
    border-left: none;
    border-top: none;
}

.quality-badge:hover .quality-ornament {
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.03);
}

.quality-option input[type="radio"]:checked + .quality-label .quality-ornament {
    border-color: var(--color-gold);
    transform: scale(1.02);
}

/* Top Quality - Green Ornaments */
.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-ornament {
    border-color: #2ecc71 !important;
}

/* Haltane Identical Quality - Gold Ornaments */
.haltane-section-container
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-ornament {
    border-color: rgba(212, 175, 55, 0.9) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
}

/* Additional Top Quality Green Styling - High Specificity */
.quality-option[data-quality="top"]
    input#top-quality:checked
    + label
    .quality-badge {
    border-color: #2ecc71;
    box-shadow:
        0 6px 20px rgba(46, 204, 113, 0.4),
        0 0 30px rgba(46, 204, 113, 0.4),
        inset 0 1px 0 rgba(46, 204, 113, 0.3),
        inset 0 0 20px rgba(46, 204, 113, 0.1);
}

.quality-option[data-quality="top"]
    input#top-quality:checked
    + label
    .quality-name {
    color: #2ecc71;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(46, 204, 113, 0.5);
}

.quality-option[data-quality="top"]
    input#top-quality:checked
    + label
    .quality-ornament {
    border-color: #2ecc71 !important;
}

/* Quality Shimmer Effect */
.quality-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    animation: none;
    pointer-events: none;
}

@keyframes qualityShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Quality Glow Effect */
.quality-glow {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.2) 0%,
        transparent 70%
    );
    border-radius: 2px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.quality-option input[type="radio"]:checked + .quality-label .quality-glow {
    opacity: 0.6;
    animation: none;
}

/* Top Quality - Green Glow */
.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-glow {
    background: radial-gradient(
        circle,
        rgba(46, 204, 113, 0.15) 0%,
        transparent 70%
    );
    animation: none;
}

/* Haltane Identical Quality - Luxurious Gold Glow */
.haltane-section-container
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-glow {
    background: radial-gradient(
        circle,
        rgba(201, 168, 108, 0.2) 0%,
        rgba(201, 168, 108, 0.1) 40%,
        transparent 70%
    ) !important;
    animation: none !important;
}

@keyframes qualityPulseGreen {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Selection Indicator */
.selection-indicator {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    background: transparent;
}

.selection-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #d4af37;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.quality-option
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator {
    border-color: var(--color-gold);
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.quality-option
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Top Quality - Green Selection Indicator */
.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator::after {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

/* Haltane Identical Quality - Gold Selection Indicator */
.haltane-section-container
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator {
    border-color: var(--color-gold);
    background: #d4af37;
    box-shadow:
        0 0 15px rgba(212, 175, 55, 0.6),
        0 0 25px rgba(212, 175, 55, 0.4),
        0 0 35px rgba(212, 175, 55, 0.2);
}

.haltane-section-container
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator::after {
    background: #f4e4a6;
    box-shadow:
        0 0 10px rgba(244, 228, 166, 0.7),
        0 0 20px rgba(244, 228, 166, 0.5);
}

/* Haltane Identical Quality - Premium Unselected State */
.haltane-section-container
    .quality-option[data-quality="identical"]
    .quality-badge {
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.08),
        rgba(244, 228, 166, 0.12),
        rgba(222, 184, 135, 0.06)
    );
    box-shadow:
        0 3px 12px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.haltane-section-container
    .quality-option[data-quality="identical"]
    .quality-name {
    color: var(--color-gold);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(212, 175, 55, 0.3);
}

.haltane-section-container
    .quality-option[data-quality="identical"]
    .quality-description {
    color: rgba(212, 175, 55, 0.85);
    font-style: italic;
    text-shadow: 0 1px 2px rgba(212, 175, 55, 0.2);
}

/* Top Quality - Green Selection Indicator */
.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

.quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator::after {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

.quality-badge:hover {
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Fragrance Notes Section */
.fragrance-notes {
    display: inline-block;
    vertical-align: top;
    margin: 170px 0 0 30px;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: none;
    will-change: transform, opacity;
    max-width: 400px;
}

.fragrance-notes.parallax-active {
    transition:
        transform 0.1s ease-out,
        opacity 0.1s ease-out;
}

.notes-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 30px;
    color: white;
}

.notes-title {
    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin: 30px 0 20px 0;
    letter-spacing: 1px;
}

.notes-title:first-child {
    margin-top: 0;
}

.notes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 10px;
}

.note-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.note-item:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.3);
}

.note-icon {
    font-size: 32px;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.note-name {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Perfume Rating Section */
.perfume-rating {
    display: block;
    margin: 50px auto 0 auto;
    max-width: 800px;
    padding: 0 20px;
    opacity: 1 !important;
    transform: translateY(0px);
    transition: none;
    will-change: transform, opacity;
}

.perfume-rating.parallax-active {
    opacity: 1 !important;
    transform: translateY(0px);
    transition:
        transform 0.8s ease-out,
        opacity 0.8s ease-out;
}

.rating-indicators {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
}

.mood-indicators,
.season-indicators {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.indicator-item:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.2);
}

.indicator-item.active .indicator-icon {
    transform: scale(1.03);
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.indicator-icon {
    font-size: 28px;
    margin-bottom: 8px;
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.indicator-label {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff !important;
    text-align: center;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    opacity: 1 !important;
}

.indicator-bar {
    width: 40px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.indicator-item.active .indicator-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
    border-radius: 2px;
    animation: fillBar 1s ease-out 0.5s both;
}

/* Season-specific bar colors */
.winter-bar::after {
    background: linear-gradient(90deg, #74c0fc, #a5d8ff) !important;
}

.spring-bar::after {
    background: linear-gradient(90deg, #8ce99a, #b2f2bb) !important;
}

.summer-bar::after {
    background: linear-gradient(90deg, #ffd43b, #fff3bf) !important;
}

.fall-bar::after {
    background: linear-gradient(90deg, #ffa94d, #ffc078) !important;
}

.day-bar::after {
    background: linear-gradient(90deg, #ffd43b, #fff3bf) !important;
}

.night-bar::after {
    background: linear-gradient(90deg, #495057, #6c757d) !important;
}

@keyframes fillBar {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.rating-score {
    text-align: center;
    margin-bottom: 30px;
}

.rating-title {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff !important;
    line-height: 1.4;
    opacity: 1 !important;
}

.rating-title .score {
    font-weight: 700;
    color: #ffd43b;
}

.rating-title .votes {
    font-weight: 600;
    color: #74c0fc;
}

.perfume-description {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 25px;
    text-align: center;
}

.perfume-description p {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff !important;
    line-height: 1.6;
    margin: 0;
    opacity: 1 !important;
}

.perfume-description strong {
    font-weight: 600;
    color: #ffd43b;
}

/* Additional Ratings Sections */
.additional-ratings {
    margin: 0px 0 40px 0;
}

.rating-row {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.rating-category {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 25px;
    margin: 0 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.category-icon {
    font-size: 20px;
    opacity: 0.7;
}

.category-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}

.no-vote {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-left: auto;
}

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rating-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    min-width: 80px;
    text-align: left;
}

.rating-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rating-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    min-width: 40px;
    text-align: right;
}

/* Gender Scale */
.gender-indicators {
    margin-bottom: 15px;
}

.gender-scale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gender-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.gender-dots {
    display: flex;
    gap: 8px;
}

.gender-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.gender-dot.active {
    background: #4a9eff;
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
}

/* Price Scale */
.price-indicators {
    margin-bottom: 15px;
}

.price-scale {
    display: flex;
    justify-content: center;
}

.price-labels {
    display: flex;
    gap: 40px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
}

/* Responsive adjustments for Layton images and notes */
@media (max-width: 768px) {
    .layton-image {
        width: 250px;
        margin: 40px 0 0 40px;
    }

    .layton-notes.custom-fragrance-profile {
        width: 280px;
        margin: 80px 0 0 15px; /* Closer spacing on tablet */
    }

    .fragrance-profile-container {
        padding: 20px;
    }

    .profile-title {
        font-size: 1.2rem;
        letter-spacing: 1.5px;
    }

    .profile-subtitle {
        font-size: 0.8rem;
    }

    .category-bar {
        height: 20px;
    }

    .category-label {
        min-width: 70px;
        font-size: 0.8rem;
    }

    .meter-label {
        font-size: 0.8rem;
    }

    .meter-scale {
        font-size: 0.65rem;
    }

    .fragrance-notes {
        margin: 80px 0 0 20px;
        max-width: 300px;
    }

    .product-title {
        margin: 120px 0 0 280px;
    }

    .brand-name {
        font-size: 18px;
        letter-spacing: 3px;
        margin-bottom: 4px;
    }

    .brand-location {
        font-size: 12px;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    .product-name {
        font-size: 18px;
        letter-spacing: 3px;
        margin-bottom: 10px;
    }

    /* Tablet Price Styling */
    .price-badge {
        padding: 12px 20px;
        border-radius: 4px;
    }

    .price-currency {
        font-size: 26px;
    }

    .price-unit {
        font-size: 16px;
    }

    .price-badge:hover .price-currency {
        font-size: 28px;
    }

    .price-subtitle {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .price-ornament {
        width: 6px;
        height: 6px;
    }

    /* Tablet Quality Selector */
    .quality-selector-container {
        margin-top: 20px;
        gap: 12px;
    }

    .quality-title {
        font-size: 16px;
        letter-spacing: 1.5px;
    }

    .quality-subtitle {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .quality-options {
        max-width: 260px;
        gap: 10px;
    }

    .quality-badge {
        padding: 10px 16px;
        border-radius: 2px;
    }

    .quality-name {
        font-size: 14px;
    }

    .quality-description {
        font-size: 10px;
    }

    .selection-indicator {
        width: 10px;
        height: 10px;
        right: 12px;
    }

    .selection-indicator::after {
        width: 5px;
        height: 5px;
    }

    .quality-ornament {
        width: 5px;
        height: 5px;
    }

    .notes-section {
        padding: 20px;
    }

    .notes-title {
        font-size: 20px;
        margin: 20px 0 15px 0;
    }

    .note-icon {
        font-size: 28px;
    }

    .note-name {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .layton-image {
        width: 200px;
        margin: 30px 0 0 30px;
    }

    .layton-notes.custom-fragrance-profile {
        width: 240px;
        margin: 65px 0 0 10px; /* Closer spacing on mobile */
    }

    .fragrance-profile-container {
        padding: 15px;
    }

    .profile-title {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .profile-subtitle {
        font-size: 0.75rem;
    }

    .category-bar {
        height: 18px;
    }

    .category-label {
        min-width: 60px;
        font-size: 0.75rem;
    }

    .meter-label {
        font-size: 0.75rem;
    }

    .meter-scale {
        font-size: 0.6rem;
    }

    .meter-indicator {
        width: 10px;
        height: 10px;
    }

    .fragrance-notes {
        margin: 65px 0 0 15px;
        max-width: 250px;
    }

    .notes-section {
        padding: 15px;
    }

    .notes-title {
        font-size: 18px;
        margin: 15px 0 10px 0;
    }

    .notes-row {
        gap: 15px;
    }

    .note-item {
        min-width: 60px;
    }

    .note-icon {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .note-name {
        font-size: 11px;
    }

    .perfume-rating {
        margin: 30px auto 0 auto;
        padding: 0 15px;
    }

    .rating-indicators {
        gap: 20px;
        margin-bottom: 30px;
    }

    .mood-indicators,
    .season-indicators {
        gap: 15px;
    }

    .indicator-item {
        min-width: 50px;
    }

    .indicator-icon {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .indicator-label {
        font-size: 11px;
    }

    .indicator-bar {
        width: 35px;
        height: 2px;
    }

    .rating-title {
        font-size: 16px;
    }

    .perfume-description {
        padding: 20px;
    }

    .perfume-description p {
        font-size: 14px;
        line-height: 1.5;
    }

    .brand-image-section {
        height: 50vh;
    }

    .brand-image {
        max-width: 85%;
        max-height: 85%;
    }

    .additional-ratings {
        margin: 0px 0 30px 0;
    }

    .rating-row {
        flex-direction: column;
        gap: 25px;
    }

    .rating-category {
        padding: 20px;
    }

    .category-title {
        font-size: 13px;
    }

    .rating-label {
        min-width: 70px;
        font-size: 12px;
    }

    .product-title {
        margin: 90px 0 0 280px;
    }

    .brand-name {
        font-size: 14px;
        letter-spacing: 2px;
        margin-bottom: 3px;
    }

    .brand-location {
        font-size: 10px;
        letter-spacing: 1.5px;
        margin-bottom: 15px;
    }

    .product-name {
        font-size: 14px;
        letter-spacing: 2px;
        margin-bottom: 8px;
    }

    /* Mobile Price Styling */
    .product-price-container {
        margin-top: 15px;
        gap: 6px;
    }

    .price-badge {
        padding: 10px 18px;
        border-radius: 2px;
    }

    .price-currency {
        font-size: 22px;
    }

    .price-unit {
        font-size: 14px;
    }

    .price-badge:hover .price-currency {
        font-size: 24px;
    }

    .price-subtitle {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .price-ornament {
        width: 5px;
        height: 5px;
    }

    /* Reduce animation intensity on mobile */
    .price-badge:hover {
        transform: translateY(-2px) scale(1.02);
    }

    /* Mobile Quality Selector */
    .quality-selector-container {
        margin-top: 18px;
        gap: 10px;
    }

    .quality-title {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .quality-subtitle {
        font-size: 9px;
        letter-spacing: 0.8px;
    }

    .quality-options {
        max-width: 240px;
        gap: 8px;
    }

    .quality-badge {
        padding: 8px 14px;
        border-radius: 2px;
    }

    .quality-name {
        font-size: 13px;
        letter-spacing: 0.8px;
    }

    .quality-description {
        font-size: 9px;
    }

    .selection-indicator {
        width: 9px;
        height: 9px;
        right: 10px;
    }

    .selection-indicator::after {
        width: 4px;
        height: 4px;
    }

    .quality-ornament {
        width: 4px;
        height: 4px;
    }

    /* Reduce animation intensity on mobile */
    .quality-badge:hover {
        transform: translateY(-1px) scale(1.01);
    }

    .brand-image-section {
        height: 40vh;
    }

    .brand-image {
        max-width: 90%;
        max-height: 90%;
    }

    .additional-ratings {
        margin: 8px 0 25px 0;
    }

    .rating-row {
        gap: 20px;
    }

    .rating-category {
        padding: 18px;
    }

    .category-header {
        gap: 8px;
    }

    .category-icon {
        font-size: 18px;
    }

    .category-title {
        font-size: 12px;
    }

    .rating-label {
        min-width: 60px;
        font-size: 11px;
    }

    .rating-count {
        font-size: 11px;
        min-width: 35px;
    }

    .gender-labels {
        font-size: 11px;
    }

    .gender-dot {
        width: 10px;
        height: 10px;
    }

    .price-labels {
        gap: 30px;
        font-size: 11px;
    }
}

.content {
    min-height: 300vh;
    position: relative;
}

.final {
    min-height: 100vh;
}

html {
    scroll-behavior: smooth;
}

/* Haltane Section Container */
.haltane-section-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin: 300px 0 40px 0;
}

/* Haltane Image with Glow Effect and Fade-in */
.haltane-image {
    width: 340px;
    height: auto;
    opacity: 0;
    flex-shrink: 0;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    cursor: pointer;
    transform: translateY(15px);
}

/* Haltane Image Hover Effect - Gentle Zoom Only */
.haltane-image:hover {
    transform: scale(1.02) translateY(-2px);
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.3));
}

/* Haltane Product Title - Adjusted for Wider Fragrance Description */
.haltane-section-container .product-title {
    position: relative;
    z-index: 10;
    color: white;
    flex: 1.5;
    min-width: 300px;
    max-width: 450px;
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    margin: 0;
    display: block;
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

/* Haltane-specific text color overrides */
.haltane-section-container .brand-name {
    color: #3d3d3d !important;
    font-family: 'DM Sans', sans-serif !important;
}

.haltane-section-container .brand-location {
    color: #888888 !important;
}

.haltane-section-container .product-name {
    color: #2a2a2a !important;
    font-family: 'Cormorant Garamond', serif !important;
}

.haltane-section-container .quality-title {
    color: #3d3d3d !important;
    font-family: 'DM Sans', sans-serif !important;
}

.haltane-section-container .quality-subtitle {
    color: #999999 !important;
}

/* Haltane Scent Profile - Cream Background Theme */
.haltane-notes .fragrance-profile-container {
    background: #f5f2ed !important;
    border: 1px solid rgba(139, 115, 85, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
    border-radius: 4px !important;
}

.haltane-notes:hover .fragrance-profile-container {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(139, 115, 85, 0.2) !important;
}

.haltane-notes .profile-title {
    color: #4a3f35 !important;
    text-shadow: none !important;
}

.haltane-notes .profile-subtitle {
    color: #7a6b5e !important;
    text-shadow: none !important;
}

.haltane-notes .intensity-label {
    color: #4a3f35 !important;
    text-shadow: none !important;
}

.haltane-notes .overall-intensity-title {
    color: #4a3f35 !important;
    text-shadow: none !important;
}

.haltane-notes .intensity-scale-label {
    color: #7a6b5e !important;
}

/* Haltane Scent Profile - Fix White Text Elements */
.haltane-notes .meter-scale {
    color: #7a6b5e !important;
}

.haltane-notes .scale-mark {
    color: #7a6b5e !important;
}

.haltane-notes .meter-label {
    color: #4a3f35 !important;
    text-shadow: none !important;
}

.haltane-notes .category-label {
    color: #4a3f35 !important;
}

/* Pegasus Scent Profile */
.pegasus-section .pegasus-scent-profile {
    display: inline-block;
    vertical-align: top;
    margin: 220px 0 0 30px;
    padding: 0;
}

.pegasus-section .scent-profile-container {
    background: rgba(12, 12, 12, 0.97);
    border: 1px solid rgba(184, 84, 80, 0.12);
    border-radius: 4px;
    padding: 28px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    width: 380px;
    max-width: 90vw;
}

.pegasus-section .scent-profile-header {
    text-align: center;
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
}

.pegasus-section .scent-profile-title {
    color: #ffffff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 6px 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pegasus-section .scent-profile-subtitle {
    color: #b85450;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-style: normal;
    opacity: 1;
    letter-spacing: 0.08em;
}

.pegasus-section .scent-attributes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.pegasus-section .scent-attribute {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.pegasus-section .attribute-icon {
    font-size: 18px;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.pegasus-section .attribute-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pegasus-section .attribute-name {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    min-width: 60px;
    text-shadow: none;
}

.pegasus-section .attribute-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.pegasus-section .attribute-fill {
    height: 100%;
    background: #b85450;
    border-radius: 0;
    box-shadow: none;
    transition: width 0.8s ease;
}

.pegasus-section .attribute-value {
    color: #b85450;
    font-size: 12px;
    font-weight: 600;
    min-width: 35px;
    text-align: right;
    text-shadow: none;
}

.pegasus-section .projection-indicator {
    text-align: center;
    position: relative;
    z-index: 2;
}

.pegasus-section .projection-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.pegasus-section .projection-badge {
    position: relative;
    display: inline-block;
    padding: 8px 18px;
    background: transparent;
    border-radius: 0;
    border: 1px solid #b85450;
    box-shadow: none;
}

.pegasus-section .projection-text {
    color: #b85450;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pegasus-section .projection-glow {
    display: none;
}

@keyframes projectionPulse {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.pegasus-section .pegasus-notes .scale-mark {
    color: rgba(255, 255, 255, 0.5) !important;
}

.pegasus-section .pegasus-notes .meter-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

.pegasus-section .pegasus-notes .category-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Pegasus Scent Profile - Text Colors */
.pegasus-section .pegasus-notes .meter-scale {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Pegasus Price Badge - Dark Theme */
.pegasus-section .product-price-container .price-badge {
    background: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.pegasus-section .product-price-container .price-badge:hover {
    border-color: rgba(184, 84, 80, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.pegasus-section .product-price-container .price-currency {
    color: #b85450 !important;
}

.pegasus-section .product-price-container .price-unit {
    color: #b85450 !important;
}

.pegasus-section .product-price-container .price-subtitle {
    color: rgba(184, 84, 80, 0.6) !important;
}

.pegasus-section .product-price-container .price-ornament,
.pegasus-section .product-price-container .price-glow,
.pegasus-section .product-price-container .price-shimmer {
    display: none !important;
}

/* =====================================================================
   PEGASUS — THEMED BUTTONS
   Dark moody crimson
   ===================================================================== */

/* Favourite Button — Dark crimson theme */
.pegasus-section .favorite-btn {
    color: #d4918f !important;
    border: 1px solid rgba(184, 84, 80, 0.3) !important;
    background: transparent !important;
}

.pegasus-section .favorite-btn:hover {
    background: rgba(184, 84, 80, 0.1) !important;
    border-color: #b85450 !important;
    color: #e0a8a6 !important;
    box-shadow: 0 4px 20px rgba(184, 84, 80, 0.2) !important;
}

.pegasus-section .favorite-btn .heart-outline,
.pegasus-section .favorite-btn .heart-filled {
    color: #b85450 !important;
}

.pegasus-section .favorite-btn.favorited {
    background: rgba(184, 84, 80, 0.06) !important;
    border-color: #b85450 !important;
    color: #d4918f !important;
}

/* Add to Cart Button — Crimson */
.pegasus-section .add-to-cart-btn {
    color: #d4918f !important;
    border: 1px solid rgba(184, 84, 80, 0.3) !important;
    background: transparent !important;
}

.pegasus-section .add-to-cart-btn:hover {
    background: rgba(184, 84, 80, 0.1) !important;
    border-color: #b85450 !important;
    color: #e0a8a6 !important;
    box-shadow: 0 4px 20px rgba(184, 84, 80, 0.2) !important;
}

.pegasus-section .add-to-cart-btn .cart-icon svg {
    color: #d4918f !important;
    stroke: #d4918f !important;
}

.pegasus-section .add-to-cart-btn.added {
    border-color: rgba(229, 72, 77, 0.3) !important;
    color: #e5484d !important;
}

/* Card Enhancements — Crimson Accent Line */
.pegasus-section .product-actions-buttons {
    position: relative !important;
}

.pegasus-section .product-actions-buttons::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: 20% !important;
    right: 20% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(184, 84, 80, 0.25), transparent) !important;
}

/* Pegasus Quality Tags - Dark Theme */
.pegasus-section .quality-badge {
    background: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.pegasus-section
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-badge {
    border-color: rgba(184, 84, 80, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.pegasus-section .quality-name {
    color: #b85450 !important;
}
.pegasus-section .quality-label .quality-name,
.pegasus-section .quality-option .quality-label .quality-name {
    color: #b85450 !important;
}

.pegasus-section .quality-description {
    color: rgba(184, 84, 80, 0.65) !important;
}
.pegasus-section .quality-label .quality-description,
.pegasus-section .quality-option .quality-label .quality-description {
    color: rgba(184, 84, 80, 0.65) !important;
}

/* Ensure checked state stays red */
.pegasus-section
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-name {
    color: #e05245 !important;
}
.pegasus-section
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-description {
    color: #ff9b91 !important;
}

/* Force consistent color for unselected state - both options */
.pegasus-section
    .quality-option
    input[type="radio"]:not(:checked)
    + .quality-label
    .quality-name,
.pegasus-section
    .quality-option
    input[type="radio"]:not(:checked)
    + .quality-label
    .quality-description,
.pegasus-section
    #pegasus-identical-quality:not(:checked)
    + .quality-label
    .quality-name,
.pegasus-section
    #pegasus-identical-quality:not(:checked)
    + .quality-label
    .quality-description,
.pegasus-section
    #pegasus-top-quality:not(:checked)
    + .quality-label
    .quality-name,
.pegasus-section
    #pegasus-top-quality:not(:checked)
    + .quality-label
    .quality-description {
    color: #b85450 !important;
    opacity: 1 !important;
}

/* Ensure description stays consistent in all states */
.pegasus-section .quality-description,
.pegasus-section .quality-option .quality-label .quality-description,
.pegasus-section
    .quality-option
    input[type="radio"]
    + .quality-label
    .quality-description,
.pegasus-section
    #pegasus-identical-quality
    + .quality-label
    .quality-description,
.pegasus-section #pegasus-top-quality + .quality-label .quality-description {
    color: rgba(184, 84, 80, 0.6) !important;
}

/* Override any other potential color rules */
.pegasus-section .quality-option .quality-label *,
.pegasus-section .quality-badge *,
.pegasus-section .quality-content * {
    color: inherit !important;
}

/* Top Quality when selected - green text */
.pegasus-section
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-name,
.pegasus-section #pegasus-top-quality:checked + .quality-label .quality-name,
.pegasus-section
    #pegasus-top-quality:checked
    + .quality-label
    .quality-description {
    color: #2a9d4e !important;
}

/* Identical Quality when selected - brown */
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .quality-name,
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .quality-description {
    color: #6d4c3d !important;
}

/* Hover states */
.pegasus-section .quality-option:hover .quality-name,
.pegasus-section .quality-option:hover .quality-description {
    color: #c76a66 !important;
}

/* Selection indicator ring */
.pegasus-section .quality-option .selection-indicator {
    border-color: #b85450 !important;
}

.pegasus-section .selection-indicator,
.pegasus-section .quality-glow,
.pegasus-section .quality-ornament {
    background: transparent !important;
}

/* Pegasus Ingredients (Fragrance Notes) - Dark Card */
.pegasus-section .fragrance-notes {
    background: rgba(12, 12, 12, 0.97) !important;
    border: 1px solid rgba(184, 84, 80, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    padding: 28px !important;
    position: relative;
    overflow: hidden;
}

/* Subtle texture overlay */
.pegasus-section .fragrance-notes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(184, 84, 80, 0.02) 0%,
        transparent 50%,
        rgba(184, 84, 80, 0.01) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.pegasus-section .fragrance-notes .notes-title {
    color: #ffffff !important;
    letter-spacing: 1px !important;
    font-size: 1em !important;
    margin-bottom: 18px !important;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

.pegasus-section .fragrance-notes .notes-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #b85450, transparent);
}

.pegasus-section .fragrance-notes .notes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.pegasus-section .fragrance-notes .note-item {
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid rgba(184, 84, 80, 0.08) !important;
    border-radius: 2px !important;
    padding: 10px 14px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Remade Pegasus Ingredients */
.pegasus-section .pegasus-ingredients {
    background: rgba(12, 12, 12, 0.97);
    border: 1px solid rgba(184, 84, 80, 0.15);
    border-radius: 4px;
    padding: 28px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    color: #e9e9e9;
    /* Base: take full width; we narrow it on large screens below */
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.pegasus-section .pegasus-ingredients .ingredients-header {
    text-align: center;
    margin-bottom: 20px;
}

.pegasus-section .pegasus-ingredients .ingredients-title {
    color: #ffffff;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pegasus-section .pegasus-ingredients .ingredients-subtitle {
    color: #b85450;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.pegasus-section .pegasus-ingredients .ingredients-grid {
    display: grid;
    grid-template-columns: 1fr; /* stack Top, Heart, Base vertically */
    gap: 16px;
}

.pegasus-section .pegasus-ingredients .layer-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    padding: 18px;
}

.pegasus-section .pegasus-ingredients .layer-card.top {
    box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.15) inset;
}
.pegasus-section .pegasus-ingredients .layer-card.heart {
    box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.12) inset;
}
.pegasus-section .pegasus-ingredients .layer-card.base {
    box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.1) inset;
}

.pegasus-section .pegasus-ingredients .layer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pegasus-section .pegasus-ingredients .layer-badge {
    background: transparent;
    color: #b85450;
    border: 1px solid #b85450;
    border-radius: 0;
    padding: 2px 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.pegasus-section .pegasus-ingredients .layer-title {
    margin: 0;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.pegasus-section .pegasus-ingredients .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.pegasus-section .pegasus-ingredients .chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 0;
    padding: 5px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.pegasus-section .pegasus-ingredients .highlight-meters .meter {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pegasus-section .pegasus-ingredients .highlight-meters .meter-label {
    color: #dcdcdc;
    font-size: 12px;
}
.pegasus-section .pegasus-ingredients .highlight-meters .meter-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.pegasus-section .pegasus-ingredients .highlight-meters .meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #8a3c3a, #b85450);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(184, 84, 80, 0.25);
}

.pegasus-section .pegasus-ingredients .signature-accords {
    margin-top: 18px;
}
.pegasus-section .pegasus-ingredients .accords-title {
    color: #ffffff;
    margin: 0 0 8px 0;
    font-weight: 700;
}
.pegasus-section .pegasus-ingredients .accords-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.pegasus-section .pegasus-ingredients .accord {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 8px;
}
.pegasus-section .pegasus-ingredients .accord-name {
    color: #dcdcdc;
    font-size: 12px;
}
.pegasus-section .pegasus-ingredients .accord-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}
.pegasus-section .pegasus-ingredients .accord-fill {
    height: 100%;
    background: linear-gradient(90deg, #8a3c3a, #b85450);
    box-shadow: 0 2px 8px rgba(184, 84, 80, 0.25);
}

@media (max-width: 992px) {
    .pegasus-section .pegasus-ingredients .ingredients-grid {
        grid-template-columns: 1fr;
    }
    .pegasus-section .pegasus-ingredients .accords-row {
        grid-template-columns: 1fr;
    }
}

/* Desktop: narrower centered card */
@media (min-width: 992px) {
    .pegasus-section .pegasus-ingredients {
        width: 62%;
        max-width: 820px;
    }
}

/* Extra-wide screens: reduce further */
@media (min-width: 1400px) {
    .pegasus-section .pegasus-ingredients {
        width: 50%;
        max-width: 700px;
    }
}

.pegasus-section .fragrance-notes .note-item:hover {
    background: rgba(30, 30, 30, 0.95) !important;
    border-color: rgba(184, 84, 80, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
}

.pegasus-section .fragrance-notes .note-icon {
    font-size: 1.4em !important;
    color: #b85450 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    min-width: 24px;
    text-align: center;
}

.pegasus-section .fragrance-notes .note-name {
    color: #f0f0f0 !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pegasus-section .fragrance-notes {
        padding: 20px 16px !important;
    }

    .pegasus-section .fragrance-notes .notes-row {
        gap: 12px;
    }

    .pegasus-section .fragrance-notes .note-item {
        padding: 10px 14px !important;
        font-size: 0.95em;
    }
}

/* Pegasus — Additional Dark/Red Enhancements */
@keyframes pegasusFloatY {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes pegasusPulseSoft {
    0% {
        box-shadow: 0 0 0 0 rgba(184, 84, 80, 0.3);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(184, 84, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(184, 84, 80, 0);
    }
}
@keyframes pegasusSheen {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Price badge: subtle styling */
.pegasus-section .product-price-container .price-badge {
    transform: translateZ(0);
    animation: none;
    position: relative;
    overflow: hidden;
}
.pegasus-section .product-price-container .price-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: none;
    pointer-events: none;
}

/* Buttons themed to match (scoped) */
/* Removed overrides to ensure global button styles apply */

/* Quality section headings */
.pegasus-section .quality-title {
    color: #1b1b1b !important;
    letter-spacing: 1px;
}
.pegasus-section .quality-subtitle {
    color: #b85450 !important;
    opacity: 0.9;
}

/* Quality badges refinement */
.pegasus-section .quality-badge {
    backdrop-filter: blur(4px);
}
.pegasus-section
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator {
    background: #b85450 !important;
    animation: none;
}

/* Scent categories bars */
.pegasus-section .pegasus-notes .category-bar {
    background: rgba(255, 255, 255, 0.08) !important;
}
.pegasus-section .pegasus-notes .category-fill {
    background: linear-gradient(
        90deg,
        #b85450 0%,
        #c96b68 50%,
        #b85450 100%
    ) !important;
    box-shadow: 0 2px 6px rgba(184, 84, 80, 0.25) inset !important;
}
.pegasus-section .pegasus-notes .category-item:hover .category-label {
    color: #c9807c !important;
}

/* Intensity meter */
.pegasus-section .pegasus-notes .meter-track {
    background: rgba(255, 255, 255, 0.08) !important;
}
.pegasus-section .pegasus-notes .meter-fill {
    background: linear-gradient(90deg, #b85450, #c9807c) !important;
}
.pegasus-section .pegasus-notes .meter-indicator {
    border-color: #b85450 !important;
    box-shadow: 0 0 0 2px rgba(184, 84, 80, 0.25) !important;
}

/* Ingredients card: subtle diagonal texture overlay */
.pegasus-section .fragrance-notes {
    position: relative;
    overflow: hidden;
}
.pegasus-section .fragrance-notes::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        transparent 35%,
        transparent 65%,
        rgba(255, 255, 255, 0.04) 100%
    );
    pointer-events: none;
}

/* Haltane Price Badge - Smaller Cream Theme */
.haltane-section-container .price-badge {
    background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%) !important;
    border: 1.5px solid rgba(139, 115, 85, 0.4) !important;
    box-shadow: 0 6px 15px rgba(139, 115, 85, 0.2) !important;
    position: relative !important;
    display: inline-block !important;
    padding: 8px 16px !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    min-width: 80px !important;
}

.haltane-section-container .price-badge:hover {
    box-shadow: 0 8px 20px rgba(139, 115, 85, 0.3) !important;
    border-color: rgba(139, 115, 85, 0.6) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

.haltane-section-container .price-currency {
    color: #5d4037 !important;
    text-shadow: 0 1px 2px rgba(139, 115, 85, 0.3) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
}

.haltane-section-container .price-unit {
    color: #8d6e63 !important;
    text-shadow: 0 1px 2px rgba(139, 115, 85, 0.2) !important;
    font-size: 12px !important;
}

.haltane-section-container .product-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-family: "Playfair Display", serif !important;
}

/* Haltane Price Subtitle - Cream Theme */
.haltane-section-container .price-subtitle {
    color: #8d6e63 !important;
    font-family: "Playfair Display", serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-style: italic !important;
    text-shadow: 0 1px 2px rgba(139, 115, 85, 0.3) !important;
    margin-top: 8px !important;
    text-align: center !important;
}

/* Haltane Price Container Positioning */
.haltane-section-container .product-price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 20px 0 !important;
    gap: 8px !important;
}

/* Haltane Price Ornaments - Smaller Cream Theme */
.haltane-section-container .price-ornament {
    width: 6px !important;
    height: 6px !important;
    border-color: rgba(139, 115, 85, 0.6) !important;
    border-width: 1px !important;
}

.haltane-section-container .price-ornament.top-left {
    top: 3px !important;
    left: 3px !important;
}

.haltane-section-container .price-ornament.top-right {
    top: 3px !important;
    right: 3px !important;
}

.haltane-section-container .price-ornament.bottom-left {
    bottom: 3px !important;
    left: 3px !important;
}

.haltane-section-container .price-ornament.bottom-right {
    bottom: 3px !important;
    right: 3px !important;
}

.haltane-section-container .price-badge:hover .price-ornament {
    border-color: rgba(139, 115, 85, 0.8) !important;
    transform: scale(1.02) !important;
}

/* Remove any green effects from Haltane price elements */
.haltane-section-container .price-shimmer {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 115, 85, 0.2),
        transparent
    ) !important;
}

.haltane-section-container .price-glow {
    background: radial-gradient(
        circle,
        rgba(139, 115, 85, 0.1) 0%,
        transparent 70%
    ) !important;
}

/* =====================================================================
   HALTANE — THEMED BUTTONS
   Warm cream-brown elegance
   ===================================================================== */

/* Favourite Button — Brown/cream theme */
.haltane-section-container .favorite-btn {
    color: #5d4037 !important;
    border: 1px solid rgba(139, 115, 85, 0.35) !important;
    background: transparent !important;
}

.haltane-section-container .favorite-btn:hover {
    background: rgba(139, 115, 85, 0.08) !important;
    border-color: #8d6e63 !important;
    color: #5d4037 !important;
    box-shadow: 0 4px 20px rgba(139, 115, 85, 0.15) !important;
}

.haltane-section-container .favorite-btn .heart-outline,
.haltane-section-container .favorite-btn .heart-filled {
    color: #8d6e63 !important;
}

.haltane-section-container .favorite-btn.favorited {
    background: rgba(139, 115, 85, 0.06) !important;
    border-color: #8d6e63 !important;
    color: #5d4037 !important;
}

/* Add to Cart Button — Brown/cream */
.haltane-section-container .add-to-cart-btn {
    color: #5d4037 !important;
    border: 1px solid rgba(139, 115, 85, 0.35) !important;
    background: transparent !important;
}

.haltane-section-container .add-to-cart-btn:hover {
    background: rgba(139, 115, 85, 0.08) !important;
    border-color: #8d6e63 !important;
    box-shadow: 0 4px 20px rgba(139, 115, 85, 0.15) !important;
}

.haltane-section-container .add-to-cart-btn .cart-icon svg {
    color: #5d4037 !important;
    stroke: #5d4037 !important;
}

.haltane-section-container .add-to-cart-btn.added {
    border-color: rgba(229, 72, 77, 0.3) !important;
    color: #dc3545 !important;
}

/* Card Enhancements — Warm Separator */
.haltane-section-container .product-actions-buttons {
    position: relative !important;
}

.haltane-section-container .product-actions-buttons::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: 20% !important;
    right: 20% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(139, 115, 85, 0.2), transparent) !important;
}

/* Haltane Quality Indicators - Cream Background Theme */
.haltane-section-container .quality-badge {
    background: #f5f2ed !important;
    border: 1px solid rgba(139, 115, 85, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.haltane-section-container .quality-badge:hover {
    background: #f2efe9 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(139, 115, 85, 0.3) !important;
    transform: translateY(-1px) !important;
}

.haltane-section-container .quality-name {
    color: #4a3f35 !important;
}

.haltane-section-container .quality-description {
    color: #7a6b5e !important;
}

/* Haltane Quality Selection States */
.haltane-section-container
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-badge {
    background: #ebe6de !important;
    border-color: rgba(139, 115, 85, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.haltane-section-container
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-name {
    color: #3d352c !important;
}

.haltane-section-container
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-description {
    color: rgba(248, 244, 238, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Haltane Quality Ornaments */
.haltane-section-container .quality-ornament {
    border-color: rgba(139, 115, 85, 0.4) !important;
}

.haltane-section-container .quality-badge:hover .quality-ornament {
    border-color: rgba(139, 115, 85, 0.7) !important;
}

.haltane-section-container
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-ornament {
    border-color: #f8f4ee !important;
}

/* Haltane Quality Glow Effect */
.haltane-section-container
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .quality-glow {
    background: radial-gradient(
        circle,
        rgba(93, 64, 55, 0.2) 0%,
        transparent 70%
    ) !important;
    opacity: 0.8 !important;
}

/* Haltane Selection Indicator */
.haltane-section-container
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator {
    border-color: #f8f4ee !important;
    box-shadow: 0 0 10px rgba(248, 244, 238, 0.4) !important;
}

.haltane-section-container
    .quality-option
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator::after {
    background: #f8f4ee !important;
    box-shadow: 0 0 8px rgba(248, 244, 238, 0.6) !important;
}

/* Haltane Notes Section - Cream Background Theme */
.haltane-notes-section {
    background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%) !important;
    border: 1px solid rgba(139, 115, 85, 0.3) !important;
    box-shadow: 0 10px 30px rgba(139, 115, 85, 0.2) !important;
}

.haltane-notes-title {
    color: #5d4037 !important;
    text-shadow: 0 2px 4px rgba(139, 115, 85, 0.3) !important;
}

.haltane-note-name {
    color: #5d4037 !important;
    text-shadow: 0 1px 2px rgba(139, 115, 85, 0.2) !important;
}

/* Haltane Fragrance Description - Cream Background Theme */
.haltane-fragrance-description {
    background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%) !important;
    border: 1px solid rgba(139, 115, 85, 0.3) !important;
    box-shadow: 0 10px 30px rgba(139, 115, 85, 0.2) !important;
    border-radius: 4px !important;
    padding: 25px !important;
    margin-top: 30px !important;
}

.haltane-description-title {
    color: #5d4037 !important;
    text-shadow: 0 2px 4px rgba(139, 115, 85, 0.3) !important;
}

.haltane-description-subtitle {
    color: #8d6e63 !important;
    text-shadow: 0 1px 2px rgba(139, 115, 85, 0.2) !important;
}

.haltane-description-text {
    color: #5d4037 !important;
    text-shadow: 0 1px 2px rgba(139, 115, 85, 0.1) !important;
}

/* Haltane Brand Name — see consolidated definition below */

.haltane-brand-location {
    font-family: "Playfair Display", serif;
    font-size: 14px;
    font-weight: 300;
    color: #000000;
    margin: 0 0 25px 0;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.haltane-product-name {
    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin: 0 0 15px 0;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

/* Haltane Premium Price Container */
.haltane-product-price-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Haltane Luxury Price Badge */
.haltane-price-badge {
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8),
        rgba(20, 20, 20, 0.9)
    );
    border: 2px solid #c9a86c;
    border-radius: 2px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(139, 115, 85, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    animation: none;
}

.haltane-price-badge:hover {
    transform: translateY(-2px);
    border-color: #d4b87a;
    box-shadow: 0 12px 30px rgba(139, 115, 85, 0.4);
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.85),
        rgba(25, 25, 25, 0.95)
    );
    animation: none;
}

/* Haltane Price Ornaments */
.haltane-price-ornament {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid #c9a86c;
    transition: all 0.3s ease;
}

.haltane-price-ornament.top-left {
    top: 5px;
    left: 5px;
    border-right: none;
    border-bottom: none;
}

.haltane-price-ornament.top-right {
    top: 5px;
    right: 5px;
    border-left: none;
    border-bottom: none;
}

.haltane-price-ornament.bottom-left {
    bottom: 5px;
    left: 5px;
    border-right: none;
    border-top: none;
}

.haltane-price-ornament.bottom-right {
    bottom: 5px;
    right: 5px;
    border-left: none;
    border-top: none;
}

.haltane-price-badge:hover .haltane-price-ornament {
    border-color: #d4b87a;
    transform: scale(1.02);
}

/* Haltane Shimmer Effect */
.haltane-price-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    animation: none;
    pointer-events: none;
}

/* Haltane Price Text Styling */
.haltane-product-price {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: #c9a86c;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 4px;
    transition: all 0.3s ease;
}

.haltane-price-currency {
    font-size: 32px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.haltane-price-unit {
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.haltane-price-badge:hover .haltane-price-currency {
    font-size: 34px;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(46, 204, 113, 0.8);
}

.haltane-price-badge:hover .haltane-price-unit {
    opacity: 1;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(46, 204, 113, 0.6);
}

/* Haltane Pulsing Glow Effect */
.haltane-price-glow {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(
        circle,
        rgba(46, 204, 113, 0.3) 0%,
        transparent 70%
    );
    border-radius: 4px;
    opacity: 0;
    animation: none;
    pointer-events: none;
    transition: all 0.3s ease;
}

.haltane-price-badge:hover .haltane-price-glow {
    animation: none;
    opacity: 0.6;
}

/* Haltane Premium Subtitle */
.haltane-price-subtitle {
    font-family: "Playfair Display", serif;
    font-size: 9px;
    font-weight: 400;
    color: #c9a86c;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    animation: none;
}

.haltane-brand-name {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: white;
    margin-bottom: 8px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.haltane-brand-location {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.haltane-product-name {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: white;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Haltane Price Badge */
.haltane-product-price-container {
    margin-bottom: 40px;
}

.haltane-price-badge {
    position: relative;
    display: inline-block;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #c9a86c;
    border-radius: 4px;
    padding: 15px 25px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(139, 115, 85, 0.3);
}

.haltane-price-ornament {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid #c9a86c;
}

.haltane-price-ornament.top-left {
    top: 5px;
    left: 5px;
    border-right: none;
    border-bottom: none;
}

.haltane-price-ornament.top-right {
    top: 5px;
    right: 5px;
    border-left: none;
    border-bottom: none;
}

.haltane-price-ornament.bottom-left {
    bottom: 5px;
    left: 5px;
    border-right: none;
    border-top: none;
}

.haltane-price-ornament.bottom-right {
    bottom: 5px;
    right: 5px;
    border-left: none;
    border-top: none;
}

.haltane-price-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 168, 108, 0.15),
        transparent
    );
    animation: shimmer 3s infinite;
}

.haltane-product-price {
    color: #c9a86c;
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.haltane-price-currency {
    font-size: 2.5rem;
}

.haltane-price-unit {
    font-size: 1.5rem;
    margin-left: 5px;
}

.haltane-price-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(
        circle,
        rgba(201, 168, 108, 0.1) 0%,
        transparent 70%
    );
    animation: none;
}

.haltane-price-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Haltane Advanced Quality Selector */
.haltane-quality-selector-container {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Haltane Quality Header */
.haltane-quality-header {
    text-align: center;
    margin-bottom: 5px;
}

.haltane-quality-title {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 5px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.haltane-quality-subtitle {
    font-family: "Playfair Display", serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-style: italic;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Haltane Quality Options Container */
.haltane-quality-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
}

/* Hide Default Radio Buttons */
.haltane-quality-option input[type="radio"] {
    display: none;
}

/* Haltane Quality Option Styling */
.haltane-quality-option {
    position: relative;
    cursor: pointer;
}

.haltane-quality-label {
    display: block;
    cursor: pointer;
}

/* Haltane Quality Badge */
.haltane-quality-badge {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7),
        rgba(15, 15, 15, 0.8)
    );
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    backdrop-filter: blur(8px);
    box-shadow:
        0 4px 15px rgba(255, 255, 255, 0.1),
        0 0 10px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Haltane Hover Effects */
.haltane-quality-badge:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8),
        rgba(20, 20, 20, 0.9)
    );
    box-shadow:
        0 8px 25px rgba(255, 255, 255, 0.2),
        0 0 25px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 15px rgba(255, 255, 255, 0.05);
}

/* Haltane Selected State - Top Quality Green */
.haltane-quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-badge {
    border-color: #2ecc71 !important;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.9),
        rgba(25, 25, 25, 0.95)
    ) !important;
    box-shadow:
        0 6px 20px rgba(46, 204, 113, 0.4),
        0 0 30px rgba(46, 204, 113, 0.4),
        inset 0 1px 0 rgba(46, 204, 113, 0.3),
        inset 0 0 20px rgba(46, 204, 113, 0.1) !important;
    transform: scale(1.03);
}

/* Haltane Selected State - Identical Quality Gold */
.haltane-quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-badge {
    border-color: var(--color-gold) !important;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.9),
        rgba(25, 25, 25, 0.95)
    ) !important;
    box-shadow:
        0 6px 20px rgba(212, 175, 55, 0.4),
        0 0 30px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(212, 175, 55, 0.3),
        inset 0 0 20px rgba(212, 175, 55, 0.1) !important;
    transform: scale(1.03);
}

.haltane-quality-ornament {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.3s ease;
}

.haltane-quality-option
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-ornament {
    border-color: #c9a86c;
}

.haltane-quality-ornament.top-left {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.haltane-quality-ornament.top-right {
    top: 8px;
    right: 8px;
    border-left: none;
    border-bottom: none;
}

.haltane-quality-ornament.bottom-left {
    bottom: 8px;
    left: 8px;
    border-right: none;
    border-top: none;
}

.haltane-quality-ornament.bottom-right {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}

.haltane-quality-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shimmer 4s infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.haltane-quality-option
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-shimmer {
    opacity: 1;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 168, 108, 0.15),
        transparent
    );
}

/* Haltane Quality Content */
.haltane-quality-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    z-index: 2;
}

.haltane-quality-name {
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.haltane-quality-description {
    font-family: "Playfair Display", serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* Haltane Enhanced Text on Selection - Top Quality Green */
.haltane-quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-name {
    color: #2ecc71 !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(46, 204, 113, 0.5) !important;
}

.haltane-quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-description {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Haltane Enhanced Text on Selection - Identical Quality Gold */
.haltane-quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-name {
    color: var(--color-gold) !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(212, 175, 55, 0.5) !important;
}

.haltane-quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-description {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.haltane-quality-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(
        circle,
        rgba(201, 168, 108, 0.08) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.haltane-quality-option
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-quality-glow {
    opacity: 1;
    animation: pulse 2s infinite;
}

.haltane-selection-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.haltane-quality-option
    input[type="radio"]:checked
    + .haltane-quality-label
    .haltane-selection-indicator {
    background: #c9a86c;
    border-color: #c9a86c;
    box-shadow: 0 2px 8px rgba(201, 168, 108, 0.4);
}

/* Haltane Scent Profile with Fade-in */
.haltane-notes {
    flex: 1;
    min-width: 300px;
    margin-left: 0px;
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.haltane-fragrance-profile-container {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #d4af37;
    border-radius: 4px;
    padding: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.haltane-profile-header {
    text-align: center;
    margin-bottom: 30px;
}

.haltane-profile-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.haltane-profile-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.haltane-scent-categories {
    margin-bottom: 30px;
}

.haltane-category-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 15px;
}

.haltane-category-bar {
    flex: 1;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.haltane-category-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s ease;
    position: relative;
    overflow: hidden;
}

.haltane-category-item.warm-spicy .haltane-category-fill {
    background: linear-gradient(90deg, #ff6b35, #ff8c42);
}

.haltane-category-item.fresh-spicy .haltane-category-fill {
    background: linear-gradient(90deg, #7cb342, #8bc34a);
}

.haltane-category-item.woody .haltane-category-fill {
    background: linear-gradient(90deg, #8d6e63, #a1887f);
}

.haltane-category-item.vanilla .haltane-category-fill {
    background: linear-gradient(90deg, #f4e4bc, #f5e6a3);
}

.haltane-category-item.aromatic .haltane-category-fill {
    background: linear-gradient(90deg, #26a69a, #4db6ac);
}

.haltane-category-item.fruity .haltane-category-fill {
    background: linear-gradient(90deg, #ff7043, #ff8a65);
}

.haltane-category-item.lavender .haltane-category-fill {
    background: linear-gradient(90deg, #9575cd, #b39ddb);
}

.haltane-category-item.citrus .haltane-category-fill {
    background: linear-gradient(90deg, var(--color-gold-light), #fff176);
}

.haltane-category-item.fresh .haltane-category-fill {
    background: linear-gradient(90deg, #42a5f5, #64b5f6);
}

.haltane-category-label {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    min-width: 100px;
    text-align: right;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.haltane-intensity-meter {
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    padding-top: 25px;
}

.haltane-meter-label {
    color: var(--color-gold);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.haltane-meter-container {
    position: relative;
}

.haltane-meter-track {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.haltane-meter-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        #4caf50,
        #8bc34a,
        var(--color-gold-light),
        #ff9800,
        #f44336
    );
    border-radius: 6px;
    transition: width 0.8s ease;
    position: relative;
}

.haltane-meter-indicator {
    position: absolute;
    top: -3px;
    width: 18px;
    height: 18px;
    background: #d4af37;
    border: 2px solid white;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: left 0.8s ease;
}

.haltane-meter-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.haltane-scale-mark {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Haltane Fragrance Notes with Fade-in */
.haltane-fragrance-notes {
    flex: 1;
    min-width: 300px;
    margin-left: 0px;
    margin-right: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.haltane-notes-section {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.haltane-notes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    justify-content: center;
}

.haltane-notes-row:last-child {
    margin-bottom: 0;
}

.haltane-note-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.haltane-note-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.haltane-note-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.haltane-note-name {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.haltane-notes-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin: 30px 0 20px 0;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
}

.haltane-notes-title:first-child {
    margin-top: 0;
}

.haltane-notes-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
}

/* Haltane Performance Metrics */
.haltane-performance-metrics {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8),
        rgba(20, 20, 20, 0.9)
    );
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

.haltane-metric-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 8px 0;
}

.haltane-metric-item:last-child {
    margin-bottom: 0;
}

.haltane-metric-label {
    font-family: "Playfair Display", serif;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 80px;
}

.haltane-metric-value {
    font-family: "Playfair Display", serif;
    font-size: 11px;
    font-weight: 400;
    color: #c9a86c;
    text-shadow: none;
    min-width: 100px;
    text-align: center;
}

.haltane-metric-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-left: 15px;
    overflow: hidden;
}

.haltane-metric-fill {
    height: 100%;
    background: linear-gradient(90deg, #8d6e63, #c9a86c);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(139, 115, 85, 0.3);
    transition: width 0.8s ease;
}

/* Haltane Fragrance Description - Wider Layout */
.haltane-fragrance-description {
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.9),
        rgba(15, 15, 15, 0.95)
    );
    border: 1px solid rgba(139, 115, 85, 0.25);
    border-radius: 2px;
    backdrop-filter: blur(15px);
    flex: 2;
    min-width: 400px;
    max-width: 600px;
}

.haltane-description-header {
    text-align: center;
    margin-bottom: 20px;
}

.haltane-description-title {
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.haltane-description-subtitle {
    font-family: "Playfair Display", serif;
    font-size: 11px;
    font-weight: 300;
    color: #c9a86c;
    letter-spacing: 1px;
    font-style: italic;
    text-shadow: none;
}

.haltane-description-content {
    line-height: 1.6;
}

.haltane-description-text {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    text-align: justify;
    line-height: 1.7;
}

.haltane-description-text:last-child {
    margin-bottom: 0;
}

.haltane-description-text strong {
    color: #c9a86c;
    font-weight: 600;
    text-shadow: none;
}

/* 🚀 LAYTON FRAGRANCE JOURNEY - Consistent Container Design */
.layton-fragrance-description {
    margin: 40px 20px 50px 20px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(201, 169, 78, 0.08);
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
    flex: 2;
    min-width: 400px;
    max-width: 600px;
}

.layton-description-header {
    text-align: left;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201, 169, 78, 0.08);
}

.layton-description-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(245, 243, 240, 0.9);
    margin: 0 0 6px 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: none;
}

.layton-description-subtitle {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: var(--color-gold);
    letter-spacing: 0.15em;
    font-style: normal;
    text-transform: uppercase;
    text-shadow: none;
}

.layton-description-content {
    line-height: 1.6;
}

.layton-description-text {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    text-align: justify;
    line-height: 1.7;
}

.layton-description-text:last-child {
    margin-bottom: 0;
}

.layton-description-text strong {
    color: var(--color-gold);
    font-weight: 600;
    text-shadow: none;
}

/* 🚀 PEGASUS FRAGRANCE JOURNEY - Consistent Container Design */
.pegasus-fragrance-description {
    margin: 30px 20px 40px 20px;
    padding: 25px;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.9),
        rgba(15, 15, 15, 0.95)
    );
    border: 1px solid rgba(184, 84, 80, 0.2);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    flex: 2;
    min-width: 400px;
    max-width: 600px;
}

.pegasus-description-header {
    text-align: center;
    margin-bottom: 20px;
}

.pegasus-description-title {
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pegasus-description-subtitle {
    font-family: "Playfair Display", serif;
    font-size: 11px;
    font-weight: 300;
    color: #c9807c;
    letter-spacing: 1px;
    font-style: italic;
    text-shadow: none;
}

.pegasus-description-content {
    line-height: 1.6;
}

.pegasus-description-text {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    text-align: justify;
    line-height: 1.7;
}

.pegasus-description-text:last-child {
    margin-bottom: 0;
}

.pegasus-description-text strong {
    color: #c9807c;
    font-weight: 600;
    text-shadow: none;
}

/* Haltane Performance Metrics - Cream Background Theme */
.haltane-additional-ratings {
    margin: 40px auto 0 auto;
    padding: 30px;
    background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%);
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(139, 115, 85, 0.2);
    max-width: 900px;
    width: 90%;
}

.haltane-rating-row {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.haltane-rating-row:last-child {
    margin-bottom: 0;
}

.haltane-rating-category {
    flex: 1;
    background: rgba(248, 244, 238, 0.6);
    border: 1px solid rgba(139, 115, 85, 0.2);
    border-radius: 2px;
    padding: 20px;
    transition: all 0.3s ease;
}

.haltane-rating-category:hover {
    background: rgba(248, 244, 238, 0.8);
    border-color: rgba(139, 115, 85, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 115, 85, 0.15);
}

.haltane-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(139, 115, 85, 0.2);
}

.haltane-category-icon {
    font-size: 18px;
    opacity: 0.8;
}

.haltane-category-title {
    color: #5d4037;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(139, 115, 85, 0.2);
}

.haltane-no-vote {
    color: #8d6e63;
    font-size: 11px;
    font-style: italic;
    margin-left: auto;
    opacity: 0.7;
}

.haltane-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.haltane-rating-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.haltane-rating-label {
    color: #5d4037;
    font-weight: 500;
    min-width: 80px;
    text-align: left;
}

.haltane-rating-bar {
    flex: 1;
    height: 8px;
    background: rgba(139, 115, 85, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(139, 115, 85, 0.2);
}

.haltane-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    position: relative;
}

.haltane-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: haltaneShimmer 2s infinite;
}

@keyframes haltaneShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.haltane-rating-count {
    color: #8d6e63;
    font-weight: 600;
    min-width: 35px;
    text-align: right;
    font-size: 10px;
}

/* Haltane Gender Indicators */
.haltane-gender-indicators {
    margin: 15px 0;
}

.haltane-gender-scale {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.haltane-gender-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #8d6e63;
    font-weight: 500;
}

.haltane-gender-dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.haltane-gender-dots::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(139, 115, 85, 0.3);
    transform: translateY(-50%);
}

.haltane-gender-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(139, 115, 85, 0.2);
    border: 2px solid rgba(139, 115, 85, 0.4);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.haltane-gender-dot.active {
    background: #8d6e63;
    border-color: #5d4037;
    box-shadow: 0 0 8px rgba(139, 115, 85, 0.4);
}

/* Haltane Price Indicators */
.haltane-price-indicators {
    margin: 15px 0;
}

.haltane-price-scale {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.haltane-price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8d6e63;
    font-weight: 600;
}

/* Haltane Reddit Review Section */
.haltane-reddit-review-section {
    background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%);
    padding: 40px;
    margin: 40px auto;
    max-width: 900px;
    width: 90%;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(139, 115, 85, 0.2);
    border: 1px solid rgba(139, 115, 85, 0.3);
}

.haltane-reddit-review-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    padding: 24px;
    box-shadow: 0 8px 25px rgba(139, 115, 85, 0.15);
    border: 1px solid rgba(212, 165, 116, 0.2);
}

.haltane-reddit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212, 165, 116, 0.3);
}

.haltane-reddit-logo {
    display: flex;
    align-items: center;
}

.haltane-reddit-info {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    flex: 1;
}

.haltane-reddit-platform {
    font-weight: 600;
    color: #8d6e63;
    font-size: 14px;
}

.haltane-reddit-subreddit {
    color: #a67c47;
    font-size: 12px;
    margin-top: 2px;
}

.haltane-reddit-votes {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 165, 116, 0.15);
    padding: 8px 12px;
    border-radius: 4px;
}

.haltane-upvote-icon {
    color: #d4a574;
    font-weight: bold;
    font-size: 16px;
}

.haltane-vote-count {
    color: #8d6e63;
    font-weight: 600;
    font-size: 14px;
}

.haltane-reddit-content {
    margin-top: 20px;
}

.haltane-reddit-user {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.haltane-user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(212, 165, 116, 0.4);
}

.haltane-user-details {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
}

.haltane-username {
    font-weight: 600;
    color: #8d6e63;
    font-size: 14px;
}

.haltane-post-time {
    color: #a67c47;
    font-size: 12px;
    margin-top: 2px;
}

.haltane-reddit-text {
    margin: 20px 0;
    padding: 20px;
    background: rgba(245, 241, 232, 0.6);
    border-radius: 4px;
    border-left: 4px solid #d4a574;
}

.haltane-reddit-text p {
    color: #6d4c41;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
    font-size: 15px;
}

.haltane-reddit-engagement {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(212, 165, 116, 0.3);
}

.haltane-engagement-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a67c47;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.haltane-engagement-item:hover {
    color: #8d6e63;
}

.haltane-engagement-icon {
    font-size: 16px;
}

.haltane-engagement-count,
.haltane-engagement-text {
    font-weight: 500;
}

/* Haltane Mood and Seasonal Indicators */
.haltane-perfume-rating {
    background: linear-gradient(135deg, #f8f4ee 0%, #f0e8d8 100%);
    padding: 40px;
    margin: 40px auto;
    max-width: 900px;
    width: 90%;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(139, 115, 85, 0.2);
    border: 1px solid rgba(139, 115, 85, 0.3);
}

.haltane-rating-indicators {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.haltane-mood-indicators,
.haltane-seasonal-indicators {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.haltane-indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    min-width: 60px;
}

.haltane-indicator-item:hover {
    background: rgba(212, 165, 116, 0.1);
    border-color: rgba(212, 165, 116, 0.3);
    transform: translateY(-2px);
}

.haltane-indicator-item.active {
    background: rgba(212, 165, 116, 0.2);
    border-color: #d4a574;
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}

.haltane-indicator-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.haltane-indicator-item:hover .haltane-indicator-icon {
    transform: scale(1.02);
}

.haltane-indicator-label {
    font-size: 12px;
    font-weight: 600;
    color: #8d6e63;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.haltane-indicator-bar {
    width: 30px;
    height: 3px;
    background: rgba(212, 165, 116, 0.3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.haltane-indicator-item.active .haltane-indicator-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #d4a574, #c49660);
    border-radius: 2px;
    animation: fillBar 0.8s ease-out;
}

.haltane-rating-score {
    text-align: center;
    margin: 30px 0;
    padding: 25px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    border: 1px solid rgba(212, 165, 116, 0.2);
}

.haltane-rating-title {
    font-size: 18px;
    color: #6d4c41;
    margin: 0;
    font-weight: 500;
}

.haltane-score {
    color: #d4a574;
    font-weight: 700;
    font-size: 20px;
}

.haltane-votes {
    color: #a67c47;
    font-weight: 600;
}

.haltane-perfume-description {
    background: rgba(255, 255, 255, 0.7);
    padding: 25px;
    border-radius: 2px;
    border: 1px solid rgba(212, 165, 116, 0.2);
    text-align: center;
}

.haltane-perfume-description p {
    color: #6d4c41;
    line-height: 1.7;
    margin: 0;
    font-size: 15px;
}

.haltane-perfume-description strong {
    color: #8d6e63;
    font-weight: 600;
}

/* Responsive Design for Haltane Sections */
@media (max-width: 768px) {
    .haltane-reddit-review-section,
    .haltane-perfume-rating {
        padding: 20px;
        margin: 20px auto;
        width: 95%;
    }

    .haltane-rating-indicators {
        flex-direction: column;
        gap: 20px;
    }

    .haltane-mood-indicators,
    .haltane-seasonal-indicators {
        gap: 15px;
    }

    .haltane-indicator-item {
        min-width: 50px;
        padding: 10px;
    }

    .haltane-indicator-icon {
        font-size: 20px;
    }
}

/* Pegasus Performance Metrics - Light Grey Background Theme */
.pegasus-additional-ratings {
    margin: 80px auto 0 auto;
    padding: 30px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 1px solid rgba(139, 139, 139, 0.3);
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(139, 139, 139, 0.2);
    max-width: 900px;
    width: 90%;
}

.pegasus-rating-row {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.pegasus-rating-row:last-child {
    margin-bottom: 0;
}

.pegasus-rating-category {
    flex: 1;
    background: rgba(248, 248, 248, 0.6);
    border: 1px solid rgba(139, 139, 139, 0.2);
    border-radius: 2px;
    padding: 20px;
    transition: all 0.3s ease;
}

.pegasus-rating-category:hover {
    background: rgba(248, 248, 248, 0.8);
    border-color: rgba(139, 139, 139, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 139, 139, 0.15);
}

.pegasus-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(139, 139, 139, 0.2);
}

.pegasus-category-icon {
    font-size: 18px;
    opacity: 0.8;
}

.pegasus-category-title {
    color: #424242;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(139, 139, 139, 0.2);
}

.pegasus-no-vote {
    color: #757575;
    font-size: 11px;
    font-style: italic;
    margin-left: auto;
    opacity: 0.7;
}

.pegasus-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pegasus-rating-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.pegasus-rating-label {
    color: #424242;
    font-weight: 500;
    min-width: 80px;
    text-align: left;
}

.pegasus-rating-bar {
    flex: 1;
    height: 8px;
    background: rgba(139, 139, 139, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(139, 139, 139, 0.2);
}

.pegasus-rating-fill {
    height: 100%;
    background: linear-gradient(90deg, #e8b4cb, #d8a4bb);
    border-radius: 3px;
    transition: width 0.6s ease;
    position: relative;
}

.pegasus-rating-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: pegasusShimmer 2s infinite;
}

@keyframes pegasusShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.pegasus-rating-count {
    color: #616161;
    font-weight: 600;
    min-width: 30px;
    text-align: right;
    font-size: 10px;
}

.pegasus-rating-indicators {
    display: flex;
    gap: 40px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(139, 139, 139, 0.2);
    justify-content: center;
    flex-wrap: wrap;
}

.pegasus-mood-indicators,
.pegasus-seasonal-indicators {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.pegasus-indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    background: rgba(248, 248, 248, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(139, 139, 139, 0.2);
    transition: all 0.3s ease;
    min-width: 70px;
    opacity: 0.6;
    cursor: pointer;
}

.pegasus-indicator-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 139, 139, 0.15);
}

.pegasus-indicator-item.active {
    opacity: 1;
    background: rgba(232, 180, 203, 0.2);
    border-color: rgba(232, 180, 203, 0.4);
    box-shadow: 0 4px 15px rgba(232, 180, 203, 0.3);
}

.pegasus-indicator-icon {
    font-size: 24px;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.pegasus-indicator-item.active .pegasus-indicator-icon {
    filter: grayscale(0%);
}

.pegasus-indicator-item:hover .pegasus-indicator-icon {
    filter: grayscale(0%);
}

.pegasus-indicator-label {
    color: #616161;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pegasus-indicator-item.active .pegasus-indicator-label {
    color: #424242;
    font-weight: 600;
}

.pegasus-indicator-bar {
    width: 40px;
    height: 3px;
    background: rgba(139, 139, 139, 0.3);
    border-radius: 2px;
    transition: background 0.3s ease;
}

.pegasus-indicator-item.active .pegasus-indicator-bar {
    background: linear-gradient(90deg, #e8b4cb, #d8a4bb);
}

/* Pegasus Rating Score */
.pegasus-rating-score {
    text-align: center;
    margin: 40px auto;
    padding: 25px 40px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    border: 1px solid rgba(232, 180, 203, 0.2);
    max-width: 900px;
    width: 90%;
}

.pegasus-rating-title {
    font-size: 18px;
    color: #424242;
    margin: 0;
    font-weight: 500;
}

.pegasus-score {
    color: #e8b4cb;
    font-weight: 700;
    font-size: 20px;
}

.pegasus-votes {
    color: #757575;
    font-weight: 600;
}

.pegasus-perfume-description {
    background: rgba(255, 255, 255, 0.7);
    padding: 25px 40px;
    border-radius: 2px;
    border: 1px solid rgba(232, 180, 203, 0.2);
    text-align: center;
    margin: 0 auto;
    max-width: 900px;
    width: 90%;
}

.pegasus-perfume-description p {
    color: #424242;
    line-height: 1.7;
    margin: 0;
    font-size: 15px;
}

.pegasus-perfume-description strong {
    color: #616161;
    font-weight: 600;
}

/* Pegasus Reddit Review Section */
.pegasus-reddit-review-section {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    padding: 40px;
    margin: 40px auto;
    max-width: 900px;
    width: 90%;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(139, 139, 139, 0.2);
    border: 1px solid rgba(139, 139, 139, 0.3);
}

.pegasus-reddit-review-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    padding: 24px;
    box-shadow: 0 8px 25px rgba(139, 139, 139, 0.15);
    border: 1px solid rgba(232, 180, 203, 0.2);
    margin-bottom: 20px;
}

.pegasus-reddit-review-card:last-child {
    margin-bottom: 0;
}

.pegasus-reddit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(232, 180, 203, 0.3);
}

.pegasus-reddit-logo {
    display: flex;
    align-items: center;
}

.pegasus-reddit-info {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    flex: 1;
}

.pegasus-reddit-platform {
    font-weight: 600;
    color: #616161;
    font-size: 14px;
}

.pegasus-reddit-subreddit {
    color: #e8b4cb;
    font-size: 12px;
    margin-top: 2px;
}

.pegasus-reddit-votes {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 180, 203, 0.15);
    padding: 8px 12px;
    border-radius: 4px;
}

.pegasus-upvote-icon {
    color: #e8b4cb;
    font-weight: bold;
    font-size: 16px;
}

.pegasus-vote-count {
    color: #616161;
    font-weight: 600;
    font-size: 14px;
}

.pegasus-reddit-content {
    color: #424242;
}

.pegasus-reddit-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pegasus-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(232, 180, 203, 0.3);
}

.pegasus-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pegasus-user-details {
    display: flex;
    flex-direction: column;
}

.pegasus-username {
    font-weight: 600;
    color: #424242;
    font-size: 14px;
}

.pegasus-post-time {
    color: #757575;
    font-size: 12px;
    margin-top: 2px;
}

.pegasus-reddit-text {
    margin-bottom: 16px;
    line-height: 1.6;
}

.pegasus-reddit-text p {
    margin: 0;
    color: #424242;
    font-size: 14px;
}

.pegasus-reddit-engagement {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(232, 180, 203, 0.2);
}

.pegasus-engagement-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #757575;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.pegasus-engagement-item:hover {
    color: #e8b4cb;
}

.pegasus-engagement-icon {
    font-size: 14px;
}

.pegasus-engagement-count,
.pegasus-engagement-text {
    font-weight: 500;
}

/* Responsive Design for Pegasus Sections */
@media (max-width: 768px) {
    .pegasus-reddit-review-section,
    .pegasus-additional-ratings {
        padding: 20px;
        margin: 20px auto;
        width: 95%;
    }

    .pegasus-rating-row {
        flex-direction: column;
        gap: 20px;
    }

    .pegasus-rating-category {
        margin: 0;
    }

    .pegasus-rating-indicators {
        flex-direction: column;
        gap: 20px;
    }

    .pegasus-mood-indicators,
    .pegasus-seasonal-indicators {
        gap: 15px;
    }

    .pegasus-indicator-item {
        min-width: 50px;
        padding: 10px;
    }

    .pegasus-indicator-icon {
        font-size: 20px;
    }

    .pegasus-reddit-review-card {
        padding: 16px;
    }

    .pegasus-reddit-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pegasus-reddit-votes {
        align-self: flex-end;
    }

    .pegasus-reddit-engagement {
        flex-wrap: wrap;
        gap: 16px;
    }
}

/* Top Vignette Effect */
.top-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.22) 20%,
        rgba(0, 0, 0, 0.12) 40%,
        rgba(0, 0, 0, 0.06) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 9998;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Cream background vignette variant */
.top-vignette.cream-theme {
    background: linear-gradient(
        to bottom,
        rgba(93, 64, 55, 0.12) 0%,
        rgba(93, 64, 55, 0.08) 20%,
        rgba(93, 64, 55, 0.04) 40%,
        rgba(93, 64, 55, 0.02) 70%,
        transparent 100%
    );
}

/* ===== PEGASUS SECTION STYLES ===== */

/* Pegasus Perfume Image with Parallax Effect */
.pegasus-image {
    width: 360px;
    height: auto;
    margin: 210px 0 0 20px;
    display: inline-block;
    vertical-align: top;
    will-change: transform, opacity;
    cursor: pointer;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.3));
    transform-origin: center center;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.pegasus-image.parallax-active {
    transition: none;
}

/* Hover Effect */
.pegasus-image:hover {
    transform: scale(1.02) translateY(-4px) !important;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.35));
    transition: all 0.3s ease !important;
}

/* Smooth transition back to normal state */
.pegasus-image:not(:hover) {
    transition: all 0.3s ease !important;
}

/* Pegasus Notes Custom Profile with Ultra-Smooth Parallax */
.pegasus-notes.custom-fragrance-profile {
    width: 280px; /* reduced from 320px */
    margin: 160px 0 0 20px;
    display: inline-block;
    will-change: transform, opacity;
    cursor: pointer;
    /* Ultra-smooth hardware acceleration */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    /* Optimize for smooth scrolling */
    contain: layout style paint;
}

.pegasus-notes.parallax-active {
    /* Ultra-smooth transitions when not actively scrolling */
    transition: none;
}

.pegasus-notes:hover .fragrance-profile-container {
    transform: translateY(-1px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    border-color: rgba(212, 175, 55, 0.5);
    transition: all 0.4s ease;
}

.pegasus-notes.custom-fragrance-profile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 30% 70%,
        rgba(212, 175, 55, 0.05) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.pegasus-notes.custom-fragrance-profile .fragrance-profile-container {
    position: relative;
    z-index: 1;
}

/* Pegasus Quality Selector */
input[name="pegasus-quality"] {
    display: none;
}

/* Pegasus Scent Categories — see consolidated definitions below with .pegasus-section prefix */

/* Pegasus Section - Light Grey Theme Overrides */
.pegasus-image ~ .product-title {
    color: #495057;
}

.pegasus-image ~ .product-title .brand-name {
    color: #6c757d;
    font-weight: 300;
    letter-spacing: 3px;
    text-shadow: none;
}

.pegasus-image ~ .product-title .product-name {
    color: #495057;
    font-weight: 600;
    text-shadow: none;
}

.pegasus-image ~ .product-title .brand-location {
    color: #868e96;
    font-weight: 300;
    text-shadow: none;
}

/* Pegasus Price Badge - Light Grey Theme */
.pegasus-image ~ .product-title .price-badge {
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
    border: 2px solid var(--quality-top);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2);
    backdrop-filter: blur(10px);
    color: #1a5c30;
}

.pegasus-image ~ .product-title .price-badge:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(40, 167, 69, 0.25);
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
}

.pegasus-image ~ .product-title .price-badge .price-currency,
.pegasus-image ~ .product-title .price-badge .price-unit {
    color: #1a5c30;
}

/* Pegasus Quality Options - Light Grey Theme */
input[name="pegasus-quality"] + label .quality-badge {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #495057;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

input[name="pegasus-quality"] + label:hover .quality-badge {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(40, 167, 69, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* Pegasus Top Quality - Light Theme (Only When Selected) - High Specificity Override */
.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="top"]:checked
    + label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-badge {
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%) !important;
    border-color: var(--quality-top) !important;
    color: #1a5c30 !important;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="top"]:checked
    + label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-name {
    color: #1a5c30 !important;
    text-shadow: none !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="top"]:checked
    + label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-description {
    color: #1a5c30 !important;
    text-shadow: none !important;
}

/* Pegasus Identical Quality - Light Theme (Only When Selected) - High Specificity Override */
.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="identical"]:checked
    + label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-badge {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-gold-dark) !important;
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.2) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="identical"]:checked
    + label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-name {
    color: var(--color-gold-dark) !important;
    text-shadow: none !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="identical"]:checked
    + label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-description {
    color: var(--color-gold-dark) !important;
    text-shadow: none !important;
}

/* Pegasus Quality Options - Unselected State (Remove Glows) */
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"]
    + label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"]
    + label
    .quality-description {
    color: #495057 !important;
    text-shadow: none !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:not(:checked)
    + .quality-label
    .quality-name,
.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:not(:checked)
    + .quality-label
    .quality-description {
    color: #495057 !important;
    text-shadow: none !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:not(:checked)
    + .quality-label
    .quality-name,
.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:not(:checked)
    + .quality-label
    .quality-description {
    color: #495057 !important;
    text-shadow: none !important;
}

/* Pegasus Premium Collection Text - Light Grey Theme */
.pegasus-image ~ .product-title .premium-collection {
    color: var(--color-error);
    font-weight: 500;
    letter-spacing: 2px;
    text-shadow: none;
    opacity: 0.8;
}

/* Pegasus Select Quality Text - Light Grey Theme */
.pegasus-image ~ .product-title .select-quality-text {
    color: #495057;
    font-weight: 600;
    text-shadow: none;
}

/* Pegasus Scent Profile - Complete Styling */
.pegasus-section .pegasus-notes .fragrance-profile-container {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 2px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    width: 260px; /* reduce container width */
}

.pegasus-section .pegasus-notes .fragrance-profile-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.03) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.pegasus-section .pegasus-notes .fragrance-profile-container::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.05) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: subtleGlow 8s ease-in-out infinite;
}

@keyframes subtleGlow {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

.pegasus-section .pegasus-notes:hover .fragrance-profile-container {
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pegasus-section .pegasus-notes .profile-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 32px;
}

.pegasus-section .pegasus-notes .profile-title {
    color: #2c3e50;
    text-shadow: none;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.pegasus-section .pegasus-notes .profile-subtitle {
    color: #7f8c8d;
    text-shadow: none;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.pegasus-section .pegasus-notes .scent-categories {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
}

.pegasus-section .pegasus-notes .category-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.pegasus-section .pegasus-notes .category-label {
    min-width: 100px;
    color: #2c3e50;
    text-shadow: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin-right: 16px;
}

.pegasus-section .pegasus-notes .category-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    position: relative;
}

.pegasus-section .pegasus-notes .category-fill {
    height: 100%;
    border-radius: 4px;
    position: relative;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fillAnimation 1.5s ease-out forwards;
}

@keyframes fillAnimation {
    from {
        width: 0% !important;
    }
    to {
        width: var(--fill-width, 100%) !important;
    }
}

/* Pegasus Category Colors */
.pegasus-section .pegasus-notes .category-item.sweet .category-fill {
    background: linear-gradient(90deg, #ff6b9d 0%, #ff8a80 100%);
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.4);
}

.pegasus-section .pegasus-notes .category-item.gourmand .category-fill {
    background: linear-gradient(90deg, #8e24aa 0%, #ab47bc 100%);
    box-shadow: 0 0 20px rgba(142, 36, 170, 0.4);
}

.pegasus-section .pegasus-notes .category-item.vanilla .category-fill {
    background: linear-gradient(90deg, #ffb74d 0%, #ffcc02 100%);
    box-shadow: 0 0 20px rgba(255, 183, 77, 0.4);
}

.pegasus-section .pegasus-notes .category-item.almond .category-fill {
    background: linear-gradient(90deg, #8d6e63 0%, #a1887f 100%);
    box-shadow: 0 0 20px rgba(141, 110, 99, 0.4);
}

.pegasus-section .pegasus-notes .category-item.warm-spicy .category-fill {
    background: linear-gradient(90deg, #ff7043 0%, #ff8a65 100%);
    box-shadow: 0 0 20px rgba(255, 112, 67, 0.4);
}

.pegasus-section .pegasus-notes .category-item.amber .category-fill {
    background: linear-gradient(90deg, #ff8f00 0%, #ffa726 100%);
    box-shadow: 0 0 20px rgba(255, 143, 0, 0.4);
}

.pegasus-section .pegasus-notes .category-item.woody .category-fill {
    background: linear-gradient(90deg, #6d4c41 0%, #8d6e63 100%);
    box-shadow: 0 0 20px rgba(109, 76, 65, 0.4);
}

.pegasus-section .pegasus-notes .category-item.floral .category-fill {
    background: linear-gradient(90deg, #e91e63 0%, #f06292 100%);
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.4);
}

.pegasus-section .pegasus-notes .category-item.citrus .category-fill {
    background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}

.pegasus-section .pegasus-notes .category-item.fresh .category-fill {
    background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}

/* Pegasus Intensity Meter */
.pegasus-section .pegasus-notes .intensity-meter {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    position: relative;
    z-index: 1;
}

.pegasus-section .pegasus-notes .meter-label {
    text-align: center;
    color: #2c3e50;
    text-shadow: none;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.pegasus-section .pegasus-notes .meter-container {
    position: relative;
}

.pegasus-section .pegasus-notes .meter-track {
    height: 12px;
    background: linear-gradient(
        90deg,
        rgba(76, 175, 80, 0.3) 0%,
        rgba(255, 193, 7, 0.3) 33%,
        rgba(255, 152, 0, 0.3) 66%,
        rgba(244, 67, 54, 0.3) 100%
    );
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    margin-bottom: 10px;
}

.pegasus-section .pegasus-notes .meter-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(76, 175, 80, 0.8) 0%,
        rgba(255, 193, 7, 0.8) 33%,
        rgba(255, 152, 0, 0.8) 66%,
        rgba(244, 67, 54, 0.8) 100%
    );
    border-radius: 6px;
    position: relative;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.pegasus-section .pegasus-notes .meter-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.pegasus-section .pegasus-notes .meter-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding: 0 4px;
}

.pegasus-section .pegasus-notes .scale-mark {
    color: #7f8c8d;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.pegasus-section .pegasus-notes .scale-mark:hover {
    color: #2c3e50;
    opacity: 1;
    transform: translateY(-2px);
}

/* Hover effects for category items */
.pegasus-section .pegasus-notes .category-item:hover {
    transform: translateX(4px);
    transition: transform 0.3s ease;
}

.pegasus-section .pegasus-notes .category-item:hover .category-label {
    color: #212529;
    font-weight: 700;
}

.pegasus-section .pegasus-notes .category-item:hover .category-bar {
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease;
}

/* Responsive Design for Pegasus Scent Profile */
@media (max-width: 768px) {
    .pegasus-section .pegasus-notes .fragrance-profile-container {
        padding: 24px 20px;
        border-radius: 4px;
    }

    .pegasus-section .pegasus-notes .profile-title {
        font-size: 24px;
    }

    .pegasus-section .pegasus-notes .profile-subtitle {
        font-size: 14px;
    }

    .pegasus-section .pegasus-notes .category-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pegasus-section .pegasus-notes .category-label {
        min-width: auto;
        margin-right: 0;
        margin-bottom: 4px;
    }

    .pegasus-section .pegasus-notes .category-bar {
        width: 100%;
    }

    .pegasus-section .pegasus-notes .meter-scale {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .pegasus-section .pegasus-notes .fragrance-profile-container {
        padding: 20px 16px;
        border-radius: 2px;
    }

    .pegasus-section .pegasus-notes .profile-title {
        font-size: 22px;
    }

    .pegasus-section .pegasus-notes .scent-categories {
        margin-bottom: 24px;
    }

    .pegasus-section .pegasus-notes .category-item {
        margin-bottom: 16px;
    }

    .pegasus-section .pegasus-notes .category-bar {
        height: 6px;
    }

    .pegasus-section .pegasus-notes .meter-track {
        height: 10px;
    }

    .pegasus-section .pegasus-notes .meter-indicator {
        width: 18px;
        height: 18px;
    }
}

/* Pegasus Fragrance Notes - Ultra-Smooth Parallax Active State */
.pegasus-image ~ .fragrance-notes.parallax-active {
    /* Ultra-smooth transitions when not actively scrolling */
    transition: none;
}

/* Pegasus Fragrance Notes - Ultra-Smooth Hardware Acceleration */
.pegasus-image ~ .fragrance-notes {
    /* Ultra-smooth hardware acceleration */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    /* Optimize for smooth scrolling */
    contain: layout style paint;
    will-change: transform, opacity;
}

/* Pegasus Fragrance Notes - Transparent Theme - Single Container */
.pegasus-image ~ .fragrance-notes {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    padding: 30px !important;
    backdrop-filter: blur(10px) !important;
}

.pegasus-image ~ .fragrance-notes .notes-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
}

.pegasus-image ~ .fragrance-notes .notes-section:last-child {
    margin-bottom: 0 !important;
}

.pegasus-image ~ .fragrance-notes .notes-title {
    color: #495057 !important;
    text-shadow: none !important;
    margin: 20px 0 15px 0 !important;
}

.pegasus-image ~ .fragrance-notes .notes-title:first-child {
    margin-top: 0 !important;
}

.pegasus-image ~ .fragrance-notes .note-name {
    color: #495057 !important;
    text-shadow: none !important;
}

.pegasus-image ~ .fragrance-notes .note-icon {
    filter: drop-shadow(0 2px 4px rgba(108, 117, 125, 0.3)) !important;
}

/* Responsive adjustments for Pegasus images and notes */
@media (max-width: 768px) {
    .pegasus-image {
        width: 300px;
        margin: 40px 0 0 10px;
    }

    .pegasus-notes.custom-fragrance-profile {
        width: 280px;
        margin: 80px 0 0 15px;
    }
}

@media (max-width: 480px) {
    .pegasus-image {
        width: 240px;
        margin: 30px 0 0 10px;
    }

    .pegasus-notes.custom-fragrance-profile {
        width: 240px;
        margin: 65px 0 0 10px;
    }
}

/* Notification System */
.notification {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: var(--z-notification);
    min-width: 280px;
    max-width: 400px;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(20px);
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: var(--color-text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.notification-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.notification-close:hover {
    color: var(--color-gold);
    border-color: rgba(201, 169, 78, 0.15);
    background: rgba(201, 169, 78, 0.04);
}

.notification-success {
    border-left: 2px solid var(--color-success);
}

.notification-success .notification-content::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    color: var(--color-success);
    border: 1px solid var(--color-success);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 400;
    margin-right: 12px;
    flex-shrink: 0;
}

.notification-info {
    border-left: 2px solid var(--color-gold);
}

.notification-info .notification-content::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    margin-right: 12px;
    flex-shrink: 0;
}

.notification-error {
    border-left: 2px solid var(--color-error);
}

.notification-error .notification-content::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 400;
    margin-right: 12px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .notification {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
}

/* Profile, Favorites, and Settings Modals - High Priority */
.profile-modal,
.favorites-modal,
.settings-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--z-modal) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
}

.profile-modal.show,
.favorites-modal.show,
.settings-modal.show {
    display: flex !important;
}

.modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 1 !important;
}

.profile-modal .modal-content,
.favorites-modal .modal-content,
.settings-modal .modal-content {
    position: relative !important;
    z-index: 2 !important;
    background: rgba(10, 10, 10, 0.98) !important;
    backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(201, 169, 78, 0.08) !important;
    border-radius: 4px !important;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.7) !important;
    max-width: 560px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    animation: modalReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: var(--color-text-primary) !important;
    transition: all var(--transition-normal) !important;
}

/* Enhanced styling for admin profile modal */
.profile-modal.admin-profile .modal-content {
    background: rgba(18, 18, 18, 0.98) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* Admin profile modal header enhancement */
.profile-modal.admin-profile .modal-header {
    background: rgba(212, 175, 55, 0.05) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.profile-modal.admin-profile .modal-header h2 {
    color: var(--color-gold) !important;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.modal-header h2 {
    color: rgba(245, 243, 240, 0.9);
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    letter-spacing: 0.06em;
}

.modal-close {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 50% !important;
    transition: all var(--transition-normal) ease !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2001 !important;
    position: relative !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.modal-close:hover {
    background: rgba(201, 169, 78, 0.06) !important;
    border-color: rgba(201, 169, 78, 0.15) !important;
    color: var(--color-gold) !important;
}

.modal-body {
    padding: 36px;
    overflow-y: auto;
    max-height: calc(90vh - 100px);
}

/* Profile Modal Specific Styles */
.profile-section {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 1;
}

.profile-avatar-large::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #22c55e 0deg,
        #22c55e var(--profile-progress-angle, 0deg),
        rgba(34, 197, 94, 0.15) var(--profile-progress-angle, 0deg),
        rgba(34, 197, 94, 0.15) 360deg
    );
    z-index: -1;
}

.profile-avatar-large::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    z-index: -2;
}

@keyframes profileRingGlow {
    0% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(1);
    }
}

.change-avatar-btn {
    background: var(--color-gold-dark);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.change-avatar-btn:hover {
    transform: translateY(-1px);
    background: var(--color-gold);
    box-shadow: var(--shadow-gold);
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Administrator Badge Styles */
.admin-badge-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    position: relative;
}

.admin-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 6px;
    color: var(--color-gold);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.admin-badge::before {
    display: none;
}

/* Admin icon and text - styling simplified */

.admin-badge-glow {
    display: none;
}

@keyframes adminBadgeGlow {
    0%,
    100% {
        box-shadow:
            0 4px 20px rgba(255, 215, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow:
            0 6px 30px rgba(255, 215, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes adminBorderRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes adminPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.02);
    }
}

/* Admin Navigation Avatar Styles */
.admin-avatar-container {
    position: relative;
    display: inline-block;
}

.admin-avatar {
    border: 2px solid rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.admin-crown-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 15;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.admin-crown-indicator:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

@keyframes adminAvatarGlow {
    0%,
    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

@keyframes adminCrownFloat {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-1px) rotate(3deg);
    }
    50% {
        transform: translateY(-3px) rotate(0deg);
    }
    75% {
        transform: translateY(-1px) rotate(-3deg);
    }
}

/* Admin Review Styles */
.review-username-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-username {
    color: var(--color-gold) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3) !important;
}

.review-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.15) 0%,
        rgba(255, 165, 0, 0.2) 100%
    );
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    color: var(--color-gold);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    animation: reviewAdminBadgeGlow 4s ease-in-out infinite;
}

.review-admin-icon {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4));
}

.review-admin-text {
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
}

.admin-review-avatar {
    position: relative;
    border: 2px solid transparent !important;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(
                135deg,
                rgba(255, 215, 0, 0.9) 0%,
                rgba(255, 165, 0, 1) 25%,
                rgba(255, 215, 0, 0.9) 50%,
                rgba(255, 165, 0, 1) 75%,
                rgba(255, 215, 0, 0.9) 100%
            )
            border-box !important;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    animation: adminReviewAvatarGlow 3s ease-in-out infinite;
}

.admin-review-avatar img {
    border-radius: 50%;
}

.admin-review-avatar:hover {
    transform: scale(1.02) !important;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.review-avatar-crown {
    position: absolute;
    top: -10px; /* 👑 PROFESSIONAL CROWN: Positioned higher */
    right: -10px; /* 👑 PROFESSIONAL CROWN: Positioned further right */
    width: 20px; /* 👑 PROFESSIONAL CROWN: Larger size */
    height: 20px; /* 👑 PROFESSIONAL CROWN: Larger size */
    background: none; /* 👑 PROFESSIONAL CROWN: No background */
    border: none; /* 👑 PROFESSIONAL CROWN: No border */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* 👑 PROFESSIONAL CROWN: Larger crown emoji */
    z-index: 15; /* 👑 PROFESSIONAL CROWN: Higher z-index */
    animation: reviewCrownFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6))
        drop-shadow(0 0 4px rgba(255, 215, 0, 0.8))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); /* 👑 PROFESSIONAL CROWN: Golden glow effect */
    cursor: pointer;
    transition: all 0.3s ease;
}

.review-avatar-crown:hover {
    transform: scale(1.03) rotate(10deg);
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8))
        drop-shadow(0 0 6px rgba(255, 215, 0, 1))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

@keyframes reviewAdminBadgeGlow {
    0%,
    100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    }
}

@keyframes adminReviewAvatarGlow {
    0%,
    100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }
}

@keyframes reviewCrownFloat {
    0%,
    100% {
        transform: translateY(0px) scale(1) rotate(0deg);
    }
    25% {
        transform: translateY(-1px) scale(1.02) rotate(2deg);
    }
    50% {
        transform: translateY(-2px) scale(1.02) rotate(0deg);
    }
    75% {
        transform: translateY(-1px) scale(1.02) rotate(-2deg);
    }
}

/* 🚀 ENHANCED REVIEW SYSTEM: Reply System Styles */

/* Reply Form Styles */
.reply-form-container {
    margin-top: 15px;
    padding: 15px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    animation: replyFormSlideIn 0.3s ease-out;
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reply-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reply-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(
                135deg,
                rgba(212, 175, 55, 0.6) 0%,
                rgba(255, 215, 0, 0.7) 50%,
                rgba(212, 175, 55, 0.6) 100%
            )
            border-box;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    clip-path: circle(50% at center);
}

.reply-form-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reply-form-username {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

.reply-form-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.reply-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.3s ease;
}

.reply-textarea:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.reply-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.reply-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-char-count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.reply-buttons {
    display: flex;
    gap: 10px;
}

.reply-cancel-btn,
.reply-submit-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reply-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.reply-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.reply-submit-btn {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.8) 0%,
        rgba(255, 215, 0, 0.9) 100%
    );
    color: #000;
    border: 1px solid rgba(212, 175, 55, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.reply-submit-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.9) 0%,
        rgba(255, 215, 0, 1) 100%
    );
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.reply-submit-icon {
    font-size: 12px;
}

/* Replies Container Styles */
.replies-container {
    margin-top: 20px;
    padding-left: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.replies-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(212, 175, 55, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.replies-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reply-item {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding: 15px;
    transition: all 0.3s ease;
    animation: replySlideIn 0.4s ease-out;
}

.reply-item:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.reply-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: visible;
    border: 2px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(
                135deg,
                rgba(212, 175, 55, 0.5) 0%,
                rgba(255, 215, 0, 0.6) 50%,
                rgba(212, 175, 55, 0.5) 100%
            )
            border-box;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
    position: relative;
}

.reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    clip-path: circle(50% at center);
}

.reply-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reply-username-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reply-username {
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}

.reply-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

.reply-content {
    margin: 10px 0;
}

.reply-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.reply-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.reply-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.reply-action-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.reply-action-btn.liked {
    color: #4caf50;
}

.reply-action-btn.disliked {
    color: #f44336;
}

.reply-action-btn.delete-btn {
    color: #ff6b6b;
    margin-left: auto; /* Push delete button to the right */
}

.reply-action-btn.delete-btn:hover {
    color: #ff5252;
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.3);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
}

.reply-action-icon {
    font-size: 11px;
}

.reply-action-count {
    font-weight: 600;
}

.reply-action-text {
    font-size: 11px;
    font-weight: 600;
}

/* Reply Admin Badge Styles */
.reply-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.12) 0%,
        rgba(255, 165, 0, 0.15) 100%
    );
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 2px;
    color: var(--color-gold);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.reply-admin-icon {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3));
}

.reply-admin-text {
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.2);
}

/* Enhanced Admin Reply Avatar */
.admin-reply-avatar {
    border: 2px solid transparent !important;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(
                135deg,
                rgba(255, 215, 0, 0.7) 0%,
                rgba(255, 165, 0, 0.8) 50%,
                rgba(255, 215, 0, 0.7) 100%
            )
            border-box !important;
    box-shadow:
        0 0 15px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.reply-avatar-crown {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    z-index: 10;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5))
        drop-shadow(0 0 3px rgba(255, 215, 0, 0.7))
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    animation: replyAdminCrownFloat 2s ease-in-out infinite;
}

/* Animations */
@keyframes replyFormSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes replySlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes replyAdminCrownFloat {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-1px) rotate(5deg);
    }
}

/* Duplicate notification system removed - defined in main notification section above */

/* Favorites Modal Specific Styles */
.favorites-content {
    min-height: 300px;
}

.empty-favorites {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.empty-favorites h3 {
    color: #ffffff;
    margin: 16px 0 8px 0;
    font-size: 20px;
}

.empty-favorites p {
    margin: 0;
    font-size: 16px;
}

/* Settings Modal Specific Styles */
.settings-section {
    margin-bottom: 32px;
}

.settings-section h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-item {
    margin-bottom: 24px;
}

.setting-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 4px;
}

.setting-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-gold);
}

.setting-text {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

.setting-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 4px 0 0 30px;
}

.settings-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Button Styles for Modals */
.btn-primary,
.btn-secondary,
.btn-danger {
    padding: 12px 24px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: #d4af37;
    color: #000000;
}

.btn-primary:hover {
    background: #c9a432;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-danger {
    background: #f44336;
    color: #ffffff;
}

.btn-danger:hover {
    background: #d32f2f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Email Verification Modal - High Priority Styling */
#verificationModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2020 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px) !important;
}

#verificationModal.show {
    display: flex !important;
}

#verificationModal .modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 1 !important;
}

#verificationModal .modal-content {
    position: relative !important;
    z-index: 2 !important;
    background: linear-gradient(
        135deg,
        rgba(15, 15, 15, 0.98) 0%,
        rgba(25, 25, 25, 0.99) 50%,
        rgba(10, 10, 10, 0.98) 100%
    ) !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 4px !important;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    max-width: 500px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    transform: scale(1) !important;
    animation: verificationModalAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#verificationModal .modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 2021 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    user-select: none !important;
}

#verificationModal .modal-close:hover {
    background: rgba(212, 175, 55, 0.3) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
    transform: scale(1.03) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
}

#verificationModal .modal-close:active {
    transform: scale(0.95) !important;
    background: rgba(212, 175, 55, 0.5) !important;
}

@keyframes verificationModalAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Ban Modal - Highest Priority Styling */
#banModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2025 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
}

#banModal .modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 2020 !important;
}

#banModal .modal-content {
    position: relative !important;
    z-index: 2026 !important;
    background: linear-gradient(
        135deg,
        rgba(15, 15, 15, 0.98) 0%,
        rgba(25, 25, 25, 0.99) 50%,
        rgba(10, 10, 10, 0.98) 100%
    ) !important;
    border: 3px solid rgba(220, 53, 69, 0.8) !important;
    border-radius: 4px !important;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.9),
        0 0 0 2px rgba(220, 53, 69, 0.4),
        0 0 30px rgba(220, 53, 69, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    max-width: 500px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    transform: scale(1) !important;
    animation: banModalAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#banModal .modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 100002 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    user-select: none !important;
}

#banModal .modal-close:hover {
    background: rgba(220, 53, 69, 0.3) !important;
    border-color: rgba(220, 53, 69, 0.6) !important;
    transform: scale(1.03) !important;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.4) !important;
}

@keyframes banModalAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes adminModalAppear {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive Design for Modals */
@media (max-width: 768px) {
    .modal-content {
        margin: 10px;
        max-width: none;
        width: calc(100% - 20px);
    }

    .modal-header,
    .modal-body {
        padding: 20px;
    }

    #verificationModal .modal-content {
        width: 95% !important;
        margin: 0 !important;
    }

    #banModal .modal-content {
        width: 95% !important;
        margin: 0 !important;
    }

    .profile-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }

    .profile-info {
        width: 100%;
    }

    .profile-actions,
    .settings-actions {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        width: 100%;
        justify-content: center;
    }
}

/* Dead VIP animation code removed */
/* Admin Crown Glow Animation */
@keyframes adminCrownGlow {
    0% {
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8));
        transform: scale(1) rotate(0deg);
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
        transform: scale(1.02) rotate(10deg);
    }
}

/* Admin Title Glow Animation */
@keyframes adminTitleGlow {
    0% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
        border-color: rgba(212, 175, 55, 0.5);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        border-color: rgba(255, 215, 0, 0.8);
    }
}

/* VIP Badge Pulse removed */

/* Tooltip Fade In Animation */
@keyframes tooltipFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Duplicate keyframes removed - defined above */

/* Product Header Row for Favorites */
.product-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
}

.product-info {
    flex: 1;
}

/* Favorites Button Container - Positioned between price and quality selector */
.favorite-btn-middle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    width: auto;
}

/* =====================================================================
   FAVOURITE BUTTON — mirrors Add to Cart exactly
   ===================================================================== */
.favorite-btn {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid rgba(201, 169, 78, 0.3);
    padding: 14px 28px;
    border-radius: 0;
    font-weight: 500;
    font-size: 11px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    position: relative;
    overflow: visible;
    width: auto;
    min-width: 160px;
    justify-content: center;
    height: auto;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    text-shadow: none;
}

/* Locked state — same look, slightly dimmed */
.favorite-btn.locked {
    opacity: 0.6;
    cursor: pointer;
}

.favorite-btn.locked:hover {
    background: rgba(201, 169, 78, 0.08);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-gold);
    opacity: 0.75;
    transform: none;
}

/* Login Prompt Modal */
.login-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2015;
    opacity: 0;
    transition: opacity var(--transition-normal);
    backdrop-filter: blur(20px);
}

.login-prompt-overlay.show {
    opacity: 1;
}

.login-prompt-modal {
    background: rgba(10, 10, 10, 0.98);
    border-radius: 4px;
    border: 1px solid rgba(201, 169, 78, 0.1);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform var(--transition-spring);
    backdrop-filter: blur(20px);
    max-width: 400px;
    width: 90%;
}

.login-prompt-overlay.show .login-prompt-modal {
    transform: scale(1);
}

.login-prompt-content {
    padding: 48px 36px;
    text-align: center;
}

.login-prompt-icon {
    font-size: 36px;
    margin-bottom: 24px;
    opacity: 0.5;
}

.login-prompt-content h3 {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin: 0 0 16px 0;
}

.login-prompt-content p {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    margin: 0 0 32px 0;
}

.login-prompt-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.login-prompt-buttons .btn-primary {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    padding: 12px 28px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
    min-width: 100px;
}

.login-prompt-buttons .btn-primary:hover {
    background: rgba(201, 169, 78, 0.08);
    border-color: var(--color-gold-light);
    color: var(--color-gold-light);
    box-shadow: 0 0 24px rgba(201, 169, 78, 0.1);
}

.login-prompt-buttons .btn-secondary {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 28px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
    min-width: 100px;
}

.login-prompt-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .login-prompt-content {
        padding: 30px 20px;
    }

    .login-prompt-content h3 {
        font-size: 20px;
    }

    .login-prompt-content p {
        font-size: 14px;
    }

    .login-prompt-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .login-prompt-buttons .btn-primary,
    .login-prompt-buttons .btn-secondary {
        width: 100%;
    }
}

.favorite-btn:hover {
    background: rgba(201, 169, 78, 0.08);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 78, 0.15);
}

.favorite-btn:active {
    transform: scale(0.98);
    transition: all 0.1s ease;
}

/* Favorited state — gold fill accent like cart "added" state */
.favorite-btn.favorited {
    background: rgba(201, 169, 78, 0.06);
    border-color: var(--color-gold);
    color: var(--color-gold);
    box-shadow: none;
}

.favorite-btn.favorited:hover {
    background: rgba(201, 169, 78, 0.1);
    border-color: var(--color-gold-light);
    color: var(--color-gold-light);
    box-shadow: var(--shadow-gold);
}

/* Favourite Icon — identical structure to .cart-icon */
.favorite-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Both hearts sit on top of each other; only one visible at a time */
.favorite-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}

.favorite-btn .heart-outline {
    opacity: 1;
    transform: scale(1);
    color: var(--color-gold);
}

.favorite-btn .heart-filled {
    opacity: 0;
    transform: scale(0.6);
    color: var(--color-gold);
}

/* Favorited — show filled, hide outline */
.favorite-btn.favorited .heart-outline {
    opacity: 0;
    transform: scale(1.2);
}

.favorite-btn.favorited .heart-filled {
    opacity: 1;
    transform: scale(1);
}

/* Hover nudge on icon */
.favorite-btn:hover .favorite-icon {
    transform: scale(1.08);
}

/* =====================================================================
   FAVOURITE BUTTON ANIMATIONS
   ===================================================================== */

@keyframes favoriteHeartPop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes favoriteGoldGlow {
    0%   { box-shadow: 0 0 0 0   rgba(201, 169, 78, 0); }
    45%  { box-shadow: 0 0 0 6px rgba(201, 169, 78, 0.18); }
    100% { box-shadow: 0 0 0 0   rgba(201, 169, 78, 0); }
}

.favorite-btn.animate {
    animation: favoriteGoldGlow 0.6s ease-out;
}

.favorite-btn.animate.favorited .heart-filled {
    animation: favoriteHeartPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Loading state for favorite button */
.favorite-btn:disabled {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.favorite-btn.loading {
    position: relative;
    overflow: hidden;
}

.favorite-btn.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: favoriteLoading 1.5s infinite;
}

@keyframes favoriteLoading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Favourite text — identical treatment to .cart-text */
.favorite-btn .favorite-text {
    transition: color var(--transition-normal);
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.18em;
    font-size: 11px;
    text-transform: uppercase;
    color: inherit;
    text-shadow: none;
    line-height: 1;
}

/* Responsive Design for Favourite Button */
@media (max-width: 768px) {
    .product-header-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .favorite-btn {
        min-width: 150px;
        padding: 11px 20px;
        font-size: 9px;
    }

    .favorite-btn-middle-container {
        margin: 15px 0;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .favorite-btn {
        min-width: 130px;
        padding: 10px 16px;
        font-size: 9px;
    }
}

/* Favorites Modal Content Styling */
.empty-favorites {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.8);
}

.empty-favorites .empty-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-favorites h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.empty-favorites p {
    font-size: 16px;
    opacity: 0.7;
}

/* Favorite Item Styling */
.favorite-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 4px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    position: relative;
}

.favorite-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.favorite-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.favorite-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-details {
    flex: 1;
    min-width: 0;
}

.favorite-name {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 5px 0;
}

.favorite-brand {
    font-size: 14px;
    color: rgba(212, 175, 55, 0.8);
    margin: 0 0 8px 0;
    font-weight: 500;
}

.favorite-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.favorite-price {
    font-size: 16px;
    font-weight: 600;
    color: rgba(212, 175, 55, 1);
}

.remove-favorite-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.remove-favorite-btn:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.4);
    color: #ff6b6b;
    transform: scale(1.02);
}

/* Responsive Design for Favorites Modal */
@media (max-width: 768px) {
    .favorite-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px;
    }

    .favorite-image {
        width: 60px;
        height: 60px;
    }

    .remove-favorite-btn {
        position: static;
        margin-top: 10px;
    }

    .empty-favorites {
        padding: 30px 15px;
    }

    .empty-favorites .empty-icon {
        font-size: 36px;
    }

    .empty-favorites h3 {
        font-size: 20px;
    }
}

/* Theme overrides — only adjust what differs per theme */

/* Product Header Row Theme Adaptations */
.theme-dark .product-header-row {
    color: rgba(255, 255, 255, 0.9);
}

.theme-cream .product-header-row {
    color: rgba(93, 64, 55, 0.9);
}

.theme-light .product-header-row {
    color: rgba(73, 80, 87, 0.9);
}

/* Brand Name Theme Adaptations */
.theme-cream .brand-name {
    color: rgba(93, 64, 55, 0.9) !important;
    text-shadow: 0 2px 4px rgba(139, 115, 85, 0.3) !important;
}

.theme-light .brand-name {
    color: rgba(73, 80, 87, 0.9) !important;
    text-shadow: 0 2px 4px rgba(139, 139, 139, 0.3) !important;
}

/* Brand Location Theme Adaptations */
.theme-cream .brand-location {
    color: rgba(93, 64, 55, 0.7) !important;
}

.theme-light .brand-location {
    color: rgba(73, 80, 87, 0.7) !important;
}

/* Product Name Theme Adaptations */
.theme-cream .product-name {
    color: rgba(93, 64, 55, 0.9) !important;
    text-shadow: 0 2px 4px rgba(139, 115, 85, 0.2) !important;
}

.theme-light .product-name {
    color: rgba(73, 80, 87, 0.9) !important;
    text-shadow: 0 2px 4px rgba(139, 139, 139, 0.2) !important;
}

/* Theme Transition Animations */
.product-header-row,
.brand-name,
.brand-location,
.product-name {
    transition: all 0.3s ease !important;
}

/* Reviews Section */
.reviews-section {
    margin: 60px auto;
    padding: 48px;
    max-width: 860px;
    width: 88%;
    background: rgba(255, 255, 255, 0.015);
    border-radius: 4px;
    border: 1px solid rgba(201, 169, 78, 0.08);
    backdrop-filter: blur(16px);
}

.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.reviews-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-primary);
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.reviews-icon {
    font-size: 20px;
    opacity: 0.6;
}

.reviews-stats {
    display: flex;
    align-items: center;
    gap: 15px;
}

.reviews-count {
    color: var(--color-text-muted);
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 10px;
    padding: 6px 14px;
    background: rgba(201, 169, 78, 0.04);
    border-radius: 2px;
    border: 1px solid rgba(201, 169, 78, 0.1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Add Review Form */
.add-review-container {
    margin-bottom: 30px;
}

.add-review-form {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.review-form-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.user-avatar-small {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-form-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-form-username {
    color: var(--color-text-primary);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.04em;
}

.review-form-subtitle {
    color: var(--color-text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.review-rating-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.rating-label {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.star-rating {
    display: flex;
    gap: 5px;
}

.star {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.star:hover,
.star.active {
    color: var(--color-gold);
    text-shadow: 0 0 8px rgba(201, 169, 78, 0.3);
    transform: scale(1.02);
}

.review-textarea {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: 'Inter', 'DM Sans', sans-serif;
    resize: vertical;
    margin-bottom: 15px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.review-textarea:focus {
    outline: none;
    border-color: rgba(201, 169, 78, 0.3);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px var(--color-gold-muted);
}

.review-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.review-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-count {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.review-buttons {
    display: flex;
    gap: 12px;
}

.review-btn {
    padding: 10px 22px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cancel-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
}

.submit-btn {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
}

.submit-btn:hover {
    background: rgba(201, 169, 78, 0.08);
    color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    box-shadow: 0 0 20px rgba(201, 169, 78, 0.1);
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Sign-in Prompt */
.review-signin-prompt {
    text-align: center;
    padding: 40px;
    margin-bottom: 30px;
}

.signin-prompt-content {
    max-width: 400px;
    margin: 0 auto;
}

.signin-prompt-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.signin-prompt-content h4 {
    color: #ffffff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.signin-prompt-content p {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    margin-bottom: 28px;
    line-height: 1.7;
    letter-spacing: 0.02em;
}

.signin-prompt-btn {
    padding: 12px 28px;
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
}

.signin-prompt-btn:hover {
    background: rgba(201, 169, 78, 0.08);
    color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    box-shadow: 0 0 24px rgba(201, 169, 78, 0.1);
}

/* Reviews List */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-item {
    background: rgba(255, 255, 255, 0.015);
    border-radius: 2px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: border-color 0.4s ease;
}

.review-item:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(201, 169, 78, 0.1);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.review-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 👑 CROWN FIX: Add padding to ensure crown has space */
    padding: 8px 8px 0 8px;
    margin: -8px -8px 0 -8px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: visible;
    border: 1px solid rgba(201, 169, 78, 0.25);
    background: var(--color-surface-overlay);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast);
    position: relative;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    clip-path: circle(50% at center);
}

.review-avatar:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.review-avatar-container {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    overflow: visible;
}

/* Green Section Styles */
.green-section {
    background: #0a1a12;
    color: white;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.green-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M30,30 Q50,10 70,30 T90,70 Q70,90 50,70 T10,30 Q30,10 50,30 T90,30" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></svg>');
    opacity: 0.5;
    z-index: 1;
}

.green-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.green-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.green-text {
    flex: 1;
    max-width: 600px;
    animation: fadeInUp 0.8s ease-out;
}

.green-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 4vw, 48px);
    margin-bottom: 24px;
    font-weight: 300;
    color: white;
    line-height: 1.15;
    letter-spacing: 0.04em;
}

.green-text p {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    margin-bottom: 36px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
}

.explore-btn {
    background: transparent;
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.4);
    padding: 14px 36px;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.explore-btn::before {
    display: none;
}

.explore-btn:hover {
    background: rgba(39, 174, 96, 0.06);
    border-color: rgba(39, 174, 96, 0.6);
    color: #2ecc71;
    box-shadow: 0 0 24px rgba(39, 174, 96, 0.08);
    transform: none;
}

.explore-btn:hover::before {
    display: none;
}

.green-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    animation:
        fadeIn 1s ease-out,
        float 6s ease-in-out infinite;
}

.greenly-image {
    width: 460px;
    height: auto;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    opacity: 1;
    transform: translateX(0px) scale(1);
    transition: all 0.6s ease;
    will-change: transform, opacity;
    cursor: pointer;
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.35));
    transform-origin: center center;
}

.greenly-image.parallax-active {
    transition:
        transform 0.1s ease-out,
        opacity 0.1s ease-out;
}

/* Hover Effect */
.greenly-image:hover {
    transform: scale(1.02) translateY(-2px) !important;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.4));
    transition: all 0.6s ease !important;
}

/* Smooth transition back to normal state */
.greenly-image:not(:hover) {
    transition: all 0.3s ease !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .green-content {
        flex-direction: column;
        text-align: center;
    }

    .green-text {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .green-text h2 {
        font-size: 2rem;
    }

    .greenly-image {
        width: 320px;
        margin: 40px 0 0 40px;
    }
}

@media (max-width: 768px) {
    .green-section {
        padding: 40px 0;
    }

    .green-text h2 {
        font-size: 1.8rem;
    }

    .green-text p {
        font-size: 1rem;
    }

    .greenly-image {
        width: 320px;
        margin: 40px 0 0 40px;
    }
}

@media (max-width: 480px) {
    .greenly-image {
        width: 260px;
        margin: 30px 0 0 30px;
    }
}

/* Ensure review avatar is perfectly circular */
.review-avatar-container .review-avatar {
    border-radius: 50%;
    overflow: hidden;
    /* Ensure avatar renders above the progress ring */
    position: relative;
    z-index: 2;
}

.review-avatar-container .review-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none !important;
    outline: none !important;
    /* Keep image above ring */
    position: relative;
    z-index: 2;
}

.review-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-username {
    color: #ffffff;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.04em;
}

.review-date {
    color: rgba(255, 255, 255, 0.35);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.review-rating-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-stars {
    display: flex;
    gap: 2px;
}

.review-star {
    font-size: 16px;
    color: var(--color-gold);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.review-star.empty {
    color: rgba(255, 255, 255, 0.2);
}

.review-rating-number {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
}

.review-content {
    margin-bottom: 15px;
}

.review-text {
    color: rgba(255, 255, 255, 0.75);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.015em;
    margin: 0;
}

.review-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.review-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 6px 10px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.review-action-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.review-action-btn:hover::before {
    left: 100%;
}

.review-action-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.review-action-btn.liked {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
}

.review-action-btn.liked:hover {
    background: rgba(76, 175, 80, 0.15);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.review-action-btn.disliked {
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
}

.review-action-btn.disliked:hover {
    background: rgba(244, 67, 54, 0.15);
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
}

.review-action-btn.reply-btn {
    color: rgba(212, 175, 55, 0.8);
}

.review-action-btn.reply-btn:hover {
    color: rgba(212, 175, 55, 1);
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.review-action-btn.edit-btn {
    color: var(--color-gold);
}

.review-action-btn.edit-btn:hover {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}

.review-action-btn.edit-btn:hover {
    background: rgba(255, 193, 7, 0.1);
}

.review-action-btn.delete-btn {
    color: #f44336;
}

.review-action-btn.delete-btn:hover {
    background: rgba(244, 67, 54, 0.1);
}

.review-action-icon {
    font-size: 14px;
}

.review-action-text {
    font-size: 12px;
    font-weight: 500;
}

/* Review Edit Modal */
.review-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(16px);
}

.review-edit-content {
    background: rgba(10, 10, 10, 0.98);
    border-radius: 4px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(201, 169, 78, 0.08);
}

.review-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.review-edit-header h3 {
    color: white;
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.review-edit-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.review-edit-close:hover {
    color: var(--color-gold);
    border-color: rgba(201, 169, 78, 0.2);
    background: rgba(201, 169, 78, 0.04);
}

.review-edit-body {
    padding: 25px;
}

.review-edit-rating {
    margin-bottom: 20px;
}

.review-edit-rating label {
    display: block;
    color: white;
    margin-bottom: 10px;
    font-weight: 500;
}

.review-edit-stars {
    display: flex;
    gap: 5px;
}

.review-edit-star {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-edit-star:hover,
.review-edit-star.active {
    color: var(--color-gold);
    transform: scale(1.02);
}

.review-edit-text {
    margin-bottom: 20px;
}

.review-edit-text label {
    display: block;
    color: white;
    margin-bottom: 10px;
    font-weight: 500;
}

.review-edit-text textarea {
    width: 100%;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    color: white;
    padding: 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.015em;
    resize: vertical;
    transition: all 0.3s ease;
}

.review-edit-text textarea:focus {
    outline: none;
    border-color: rgba(201, 169, 78, 0.25);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(201, 169, 78, 0.06);
}

.review-edit-text textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.review-edit-counter {
    text-align: right;
    margin-top: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.review-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.review-edit-cancel,
.review-edit-save {
    padding: 10px 22px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.review-edit-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.review-edit-cancel:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.review-edit-save {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
}

.review-edit-save:hover {
    background: rgba(201, 169, 78, 0.08);
    box-shadow: 0 0 20px rgba(201, 169, 78, 0.1);
}

.review-action-count {
    font-size: 12px;
    font-weight: 500;
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin-top: 30px;
}

.load-more-btn {
    padding: 12px 32px;
    background: transparent;
    color: var(--color-gold);
    border: 1px solid rgba(201, 169, 78, 0.25);
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
}

.load-more-btn:hover {
    background: rgba(201, 169, 78, 0.06);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
    box-shadow: 0 0 24px rgba(201, 169, 78, 0.08);
}

/* Empty Reviews State */
.reviews-empty {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.6);
}

.reviews-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.reviews-empty h4 {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.reviews-empty p {
    font-size: 14px;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .reviews-section {
        margin: 20px auto;
        padding: 20px;
        width: 95%;
    }

    .reviews-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .reviews-title {
        font-size: 20px;
    }

    .add-review-form {
        padding: 20px;
    }

    .review-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .review-rating-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .review-form-actions {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .review-buttons {
        justify-content: stretch;
    }

    .review-btn {
        flex: 1;
    }

    .review-item {
        padding: 20px;
    }

    .review-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .review-actions {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* Review Notification Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.review-notification {
    font-family: inherit;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-icon {
    font-size: 16px;
}

.notification-message {
    font-size: 14px;
    font-weight: 500;
}

/* Debug theme indicator removed from production */

/* Enhanced Favorites Grid Layout */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-height: 500px;
    overflow-y: auto;
    padding: 10px;
}

.favorite-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.favorite-card:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(201, 169, 78, 0.15);
    box-shadow: none;
}

.favorite-card-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.favorite-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.favorite-card:hover .favorite-card-image img {
    transform: scale(1.02);
}

.favorite-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.favorite-card:hover .favorite-card-overlay {
    opacity: 1;
}

.view-product-btn {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    padding: 10px 20px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.view-product-btn:hover {
    background: var(--color-gold);
    color: #0a0a0a;
}

.favorite-card-content {
    padding: 20px;
}

.favorite-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.favorite-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.favorite-card .remove-favorite-btn {
    background: transparent;
    border: 1px solid rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.favorite-card .remove-favorite-btn:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.5);
    color: #fff;
}

.favorite-card-brand {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 12px 0;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.favorite-card-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--color-gold);
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}

.favorite-card-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
    margin-bottom: 16px;
    letter-spacing: 0.015em;
}

.favorite-card-notes {
    margin-bottom: 16px;
}

.notes-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.note-tag {
    background: transparent;
    color: var(--color-gold);
    padding: 4px 10px;
    border-radius: 2px;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.06em;
    border: 1px solid rgba(201, 169, 78, 0.2);
}

.favorite-card-actions {
    display: flex;
    justify-content: center;
}

.goto-section-btn {
    background: transparent;
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    padding: 10px 20px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}

.goto-section-btn:hover {
    background: var(--color-gold);
    color: #0a0a0a;
    border-color: var(--color-gold);
}

/* Product Actions Buttons Container */
.product-actions-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 18px;
    margin: 35px 0;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 14px;
    width: 100%;
    position: relative;
    padding-top: 15px;
}

.product-actions-buttons .favorite-btn-middle-container,
.product-actions-buttons .cart-btn-container {
    flex: 1 1 220px;
    min-width: 0;
}

.product-actions-buttons .favorite-btn,
.product-actions-buttons .add-to-cart-btn {
    width: 100%;
    min-width: 0;
}

/* Cart Button Styles */
.cart-btn-container {
    display: flex;
    justify-content: center;
    width: auto;
}

.add-to-cart-btn {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid rgba(201, 169, 78, 0.3);
    padding: 14px 28px;
    border-radius: 0;
    font-weight: 500;
    font-size: 11px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    position: relative;
    overflow: visible;
    width: auto;
    min-width: 160px;
    justify-content: center;
    height: auto;
    white-space: nowrap;
}

.add-to-cart-btn::before {
    display: none;
}

.add-to-cart-btn:hover::before {
    display: none;
}

.add-to-cart-btn:hover {
    background: rgba(201, 169, 78, 0.08);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 78, 0.15);
}

.add-to-cart-btn:active {
    transform: scale(0.98);
    transition: all 0.1s ease;
}

/* Review Not Found Message */
.replies-not-found {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-style: italic;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin: 10px 0;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.replies-not-found i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
}

/* Light theme support */
.theme-light .replies-not-found {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.08);
}

.theme-light .replies-not-found i {
    color: rgba(0, 0, 0, 0.4);
}

.add-to-cart-btn.added {
    background: transparent;
    border-color: rgba(229, 72, 77, 0.3);
    color: var(--color-error);
    cursor: pointer;
    box-shadow: none;
    width: auto;
    min-width: 100px;
}

.add-to-cart-btn.added::before {
    display: none;
}

.add-to-cart-btn.added:hover {
    background: rgba(229, 72, 77, 0.08);
    border-color: var(--color-error);
    transform: none;
    box-shadow: 0 4px 20px rgba(229, 72, 77, 0.15);
}

.add-to-cart-btn.added:active {
    transform: translateY(-1px) scale(1.02);
    transition: all 0.15s ease;
}

.cart-icon {
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2;
}

.add-to-cart-btn .cart-icon svg {
    width: 16px;
    height: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cart-text {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
}

.add-to-cart-btn:hover .cart-icon svg {
    transform: scale(1.02) rotate(5deg);
}

.add-to-cart-btn.added .cart-icon svg {
    transform: scale(1.02) rotate(-5deg);
}

.add-to-cart-btn.added:hover .cart-icon svg {
    transform: scale(1.03) rotate(-10deg);
}

/* Cart Count Badge */
.cart-count {
    background: var(--btn-remove);
    color: white;
    border-radius: var(--radius-full);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 5px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
    letter-spacing: 0.02em;
}

/* Base Modal Styles - HIGHEST PRIORITY */
.modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    box-sizing: border-box !important;
}

.modal.show {
    display: flex !important;
}

.modal .modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 1999 !important;
}

.modal .modal-content {
    position: relative !important;
    z-index: 2001 !important;
    background: rgba(18, 18, 18, 0.98) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
    max-width: 600px !important;
    width: 95% !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    animation: cartModalPopIn 0.3s ease-out !important;
    color: white !important;
    margin: auto !important;
    transform: scale(1) !important;
}

/* Cart Modal Styles */
.cart-content {
    min-height: 200px;
}

.empty-cart {
    text-align: center;
    padding: 48px 24px;
    color: rgba(255, 255, 255, 0.45);
}

.empty-cart h3 {
    margin: 20px 0 12px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
}

.empty-cart p {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 56px;
    height: 56px;
    border-radius: 2px;
    object-fit: cover;
    margin-right: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.cart-item-details {
    flex: 1;
}

.cart-item-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.03em;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.cart-item-brand {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
}

.cart-item-quality {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.35);
}

.cart-item-price {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--color-gold);
    margin: 0 16px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 15px;
}

.quantity-btn {
    background: transparent;
    border: 1px solid rgba(201, 169, 78, 0.15);
    color: var(--color-gold);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    transition: all 0.3s ease;
}

.quantity-btn:hover {
    background: rgba(201, 169, 78, 0.06);
    border-color: rgba(201, 169, 78, 0.3);
}

.quantity-display {
    min-width: 28px;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 15px;
}

.remove-item-btn {
    background: transparent;
    border: 1px solid rgba(220, 53, 69, 0.15);
    color: var(--color-error);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.remove-item-btn:hover {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.3);
}

/* Cart Summary */
.cart-summary {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cart-total {
    margin-bottom: 24px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.total-row.total-final {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--color-gold);
    border-top: 1px solid rgba(201, 169, 78, 0.1);
    padding-top: 12px;
    margin-top: 12px;
}

.cart-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.cart-actions button {
    flex: 1;
    padding: 12px 20px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
}

/* Navbar Cart Icon */
.navbar-cart-icon {
    position: relative;
    cursor: pointer;
    padding: 6px;
    margin-right: 10px;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    opacity: 0.8;
}

.navbar-cart-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
    opacity: 1;
}

.navbar-cart-icon .cart-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    stroke-width: 1.8;
}

.navbar-cart-icon:hover .cart-icon {
    color: rgba(255, 215, 0, 0.9);
    transform: scale(1.02);
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-gold);
    color: #060606;
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 9px;
    font-weight: 600;
    min-width: 14px;
    height: 14px;
    text-align: center;
    display: none;
    animation: bounceIn 0.3s ease;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 10px;
}

.cart-badge.show {
    display: block;
}

/* ================================
   AI Fragrance Finder Styles
   ================================ */

/* AI Finder Container */
.ai-fragrance-finder {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 15px;
}

/* AI Finder Icon */
.ai-finder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(201, 169, 78, 0.2);
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
}

.ai-finder-icon:hover {
    background: rgba(201, 169, 78, 0.06);
    border-color: rgba(201, 169, 78, 0.4);
}

.brain-icon {
    width: 20px;
    height: 20px;
    color: var(--color-gold);
    transition: all 0.3s ease;
}

.ai-finder-icon:hover .brain-icon {
    color: var(--color-gold);
    transform: scale(1.02);
}

/* AI Pulse Animation */
.ai-pulse {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: var(--color-gold);
    border-radius: 50%;
    animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.02);
    }
}

/* AI Finder Dropdown */
.ai-finder-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 400px;
    max-width: 90vw;
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid rgba(201, 169, 78, 0.12);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    z-index: 1005;
    overflow: hidden;
}

.ai-fragrance-finder:hover .ai-finder-dropdown,
.ai-finder-dropdown:hover,
.ai-finder-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* AI Finder Header */
.ai-finder-header {
    padding: 25px 25px 20px;
    border-bottom: 1px solid rgba(201, 169, 78, 0.08);
    background: rgba(201, 169, 78, 0.02);
}

.ai-finder-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--color-gold);
    letter-spacing: 0.04em;
}

.ai-title-icon {
    width: 20px;
    height: 20px;
    color: #ffd700;
}

.ai-finder-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: rgba(201, 169, 78, 0.5);
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* AI Finder Body */
.ai-finder-body {
    padding: 25px;
    min-height: 200px;
}

/* Welcome State */
.ai-welcome-content {
    text-align: center;
}

.ai-welcome-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 78, 0.15);
}

.ai-welcome-icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-gold);
}

.ai-welcome-content h4 {
    margin: 0 0 10px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.03em;
}

.ai-welcome-content p {
    margin: 0 0 24px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.015em;
}

.ai-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-start-btn:hover {
    background: var(--color-gold);
    color: #0a0a0a;
}

.ai-start-btn:active {
    transform: translateY(0);
}

.ai-start-btn svg {
    width: 16px;
    height: 16px;
}

/* Question State */
.ai-question-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-gold);
    border-radius: 2px;
    transition: width var(--transition-normal);
    width: 0%;
}

.progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    white-space: nowrap;
}

.ai-question-title {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}

.ai-question-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 25px;
}

.ai-option {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.015em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.ai-option:hover {
    background: rgba(201, 169, 78, 0.05);
    border-color: rgba(201, 169, 78, 0.2);
    color: #ffffff;
}

.ai-option.selected {
    background: rgba(201, 169, 78, 0.06);
    border-color: var(--color-gold);
    color: var(--color-gold);
    font-weight: 400;
}

.ai-option.selected::after {
    content: "✓";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold);
    font-weight: bold;
}

/* Navigation Buttons */
.ai-question-navigation {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ai-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-nav-btn:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--color-gold);
}

.ai-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-next-btn {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.ai-next-btn:hover:not(:disabled) {
    background: var(--color-gold);
    color: #0a0a0a;
    border-color: var(--color-gold);
}

.ai-nav-btn svg {
    width: 14px;
    height: 14px;
}

/* Results State */
.ai-results-header {
    text-align: center;
    margin-bottom: 25px;
}

.ai-results-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 78, 0.15);
}

.ai-results-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-gold);
}

.ai-results-header h4 {
    margin: 0 0 8px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.03em;
}

.ai-personality-type {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.ai-recommended-fragrance {
    background: rgba(201, 169, 78, 0.03);
    border: 1px solid rgba(201, 169, 78, 0.08);
    border-radius: 2px;
    padding: 20px;
    margin-bottom: 20px;
}

.ai-fragrance-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-gold);
    margin: 0 0 8px 0;
    letter-spacing: 0.03em;
}

.ai-fragrance-brand {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: rgba(201, 169, 78, 0.5);
    margin: 0 0 12px 0;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ai-fragrance-description {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 15px 0;
}

.ai-match-percentage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gold);
}

/* Alternative Recommendations */
.ai-alternatives {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-alternatives h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: rgba(212, 175, 55, 0.8);
    font-weight: 600;
}

.ai-alt-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-alt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    font-size: 12px;
}

.ai-alt-item .alt-name {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.ai-alt-item .alt-brand {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

.ai-results-actions {
    display: flex;
    gap: 10px;
}

.ai-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(201, 169, 78, 0.2);
    border-radius: 0;
    background: transparent;
    color: var(--color-gold);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.ai-action-btn:hover {
    background: rgba(201, 169, 78, 0.06);
    border-color: rgba(201, 169, 78, 0.4);
}

.ai-view-fragrance {
    background: transparent;
}

.ai-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Loading State */
.ai-finder-loading {
    text-align: center;
    padding: 20px 0;
}

.ai-loading-animation {
    margin-bottom: 20px;
}

.ai-loading-brain {
    position: relative;
    display: inline-block;
    animation: brainFloat 2s ease-in-out infinite;
}

.ai-loading-brain svg {
    width: 40px;
    height: 40px;
    color: var(--color-gold);
}

.loading-dots {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    gap: 3px;
}

.loading-dots span {
    width: 4px;
    height: 4px;
    background: #d4af37;
    border-radius: 50%;
    animation: loadingDots 1.5s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes brainFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes loadingDots {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

.ai-finder-loading h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gold);
}

.ai-finder-loading p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* Responsive Design for AI Finder */
@media (max-width: 768px) {
    .ai-finder-dropdown {
        width: 350px;
        right: -10px;
    }

    .ai-finder-header,
    .ai-finder-body {
        padding: 20px;
    }

    .ai-question-navigation {
        flex-direction: column;
    }

    .ai-results-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .ai-finder-dropdown {
        width: 300px;
        right: -20px;
    }

    .ai-finder-header,
    .ai-finder-body {
        padding: 15px;
    }
}

/* Navbar News Icon */
.navbar-news-icon {
    position: relative;
    cursor: pointer;
    padding: 8px;
    margin-right: 15px;
    border-radius: 2px;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-news-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
    opacity: 1;
}

.navbar-news-icon .news-icon {
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    stroke-width: 1.8;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.navbar-news-icon:hover .news-icon {
    color: rgba(70, 130, 180, 0.9); /* Steel blue for news */
    transform: scale(1.02) rotate(2deg);
    filter: drop-shadow(0 2px 4px rgba(70, 130, 180, 0.3));
}

/* News icon pulse animation when there's new content */
.navbar-news-icon.has-news .news-icon {
    animation: news-pulse 2s infinite;
}

@keyframes news-pulse {
    0%,
    100% {
        color: rgba(255, 255, 255, 0.85);
        transform: scale(1);
    }
    50% {
        color: rgba(70, 130, 180, 0.9);
        transform: scale(1.02);
    }
}

.news-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    font-size: 6px;
    font-weight: bold;
    text-align: center;
    line-height: 8px;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
    animation: pulse-notification 2s infinite;
}

@keyframes pulse-notification {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.03);
        opacity: 0.8;
    }
}

/* Navbar Notification Container */
.navbar-notification-container {
    position: relative;
    margin-right: 15px;
    transition: all 0.3s ease;
}

/* Locked state for non-signed-in users */
.navbar-notification-container.locked {
    opacity: 0.5;
    cursor: pointer;
    pointer-events: auto;
}

.navbar-notification-container.locked:hover {
    opacity: 0.7;
    transform: translateY(-1px);
}

.navbar-notification-container.locked .navbar-notification-icon {
    position: relative;
}

.navbar-notification-container.locked .navbar-notification-icon::after {
    content: "🔒";
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.navbar-notification-container.locked .notification-icon {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.navbar-notification-container.locked:hover .notification-icon {
    opacity: 0.8;
    filter: grayscale(0);
}

.navbar-notification-icon {
    position: relative;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-notification-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
    opacity: 1;
}

.navbar-notification-icon .notification-icon {
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    stroke-width: 1.8;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.navbar-notification-icon:hover .notification-icon {
    color: rgba(255, 193, 7, 0.9); /* Amber for notifications */
    transform: scale(1.02);
    filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.3));
}

/* Notification icon shake animation when there are new notifications */
.navbar-notification-icon.has-notifications .notification-icon {
    animation: notification-shake 2s infinite;
}

@keyframes notification-shake {
    0%,
    100% {
        transform: rotate(0deg);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: rotate(-10deg);
    }
    20%,
    40%,
    60%,
    80% {
        transform: rotate(10deg);
    }
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    text-align: center;
    line-height: 12px;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
    animation: bounceIn 0.3s ease;
}

/* Advanced Navbar User Counter */
.navbar-user-counter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin-right: 20px;
    border-radius: 4px;
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.1) 0%,
        rgba(5, 150, 105, 0.15) 50%,
        rgba(4, 120, 87, 0.1) 100%
    );
    border: 1px solid rgba(16, 185, 129, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.navbar-user-counter::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(16, 185, 129, 0.1),
        transparent
    );
    transition: left 0.6s ease;
}

.navbar-user-counter:hover::before {
    left: 100%;
}

.navbar-user-counter:hover {
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.15) 0%,
        rgba(5, 150, 105, 0.2) 50%,
        rgba(4, 120, 87, 0.15) 100%
    );
    border-color: rgba(16, 185, 129, 0.4);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(16, 185, 129, 0.2),
        0 4px 12px rgba(16, 185, 129, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.user-counter-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    box-shadow:
        0 4px 12px rgba(16, 185, 129, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.user-counter-icon::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.navbar-user-counter:hover .user-counter-icon::before {
    opacity: 0.3;
    animation: pulse-glow 2s infinite;
}

.navbar-user-counter:hover .user-counter-icon {
    transform: scale(1.02) rotate(5deg);
    box-shadow:
        0 6px 20px rgba(16, 185, 129, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.user-counter-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

/* Ingredient-Based AI Fragrance Finder */
.ingredient-finder {
    position: relative;
    margin-right: 15px;
}

.ingredient-finder-icon {
    position: relative;
    cursor: pointer;
    padding: 8px;
    border-radius: 2px;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-finder-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
    opacity: 1;
}

.ingredient-finder-icon .molecule-icon {
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    stroke-width: 1.8;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.ingredient-finder-icon:hover .molecule-icon {
    color: #d4af37;
    transform: scale(1.02);
}

.ingredient-pulse {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #d4af37;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

@keyframes ingredientPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.03);
    }
}

/* Ingredient Finder Dropdown */
.ingredient-finder-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 420px;
    background: rgba(22, 22, 22, 0.98);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-top: 8px;
}

.ingredient-finder:hover .ingredient-finder-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ingredient-finder-header {
    padding: 25px 25px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ingredient-finder-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 700;
    color: #d4af37;
}

.ingredient-title-icon {
    width: 18px;
    height: 18px;
    color: #d4af37;
}

.ingredient-finder-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.ingredient-finder-body {
    padding: 20px 25px 25px;
}

/* Search Input */
.ingredient-search-input {
    position: relative;
    margin-bottom: 20px;
}

.ingredient-search-input input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.ingredient-search-input input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.ingredient-search-input input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.ingredient-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: #d4af37;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ingredient-search-btn:hover {
    background: #c9a432;
    transform: translateY(-50%) scale(1.02);
}

.ingredient-search-btn svg {
    width: 16px;
    height: 16px;
    color: #000;
}

/* Ingredient Suggestions */
.ingredient-suggestions h5 {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: rgba(212, 175, 55, 0.8);
    font-weight: 600;
}

.ingredient-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.ingredient-tag {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.ingredient-tag:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: #d4af37;
    transform: translateY(-1px);
}

.ingredient-tag.selected {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.2) 0%,
        rgba(255, 215, 0, 0.1) 100%
    );
    border-color: rgba(212, 175, 55, 0.5);
    color: #d4af37;
    font-weight: 500;
}

/* Selected Ingredients */
.selected-ingredients h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: rgba(212, 175, 55, 0.8);
    font-weight: 600;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.2) 0%,
        rgba(255, 215, 0, 0.1) 100%
    );
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
    color: #d4af37;
    font-size: 11px;
    font-weight: 500;
}

.remove-ingredient {
    width: 14px;
    height: 14px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.remove-ingredient:hover {
    opacity: 1;
}

.find-fragrances-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%);
    color: #000;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
}

.find-fragrances-btn:hover {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.find-fragrances-btn svg {
    width: 14px;
    height: 14px;
}

/* Results Display */
.ingredient-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ingredient-results-header h4 {
    margin: 0;
    font-size: 16px;
    color: #d4af37;
    font-weight: 600;
}

.ingredient-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ingredient-back-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: #d4af37;
}

.ingredient-back-btn svg {
    width: 12px;
    height: 12px;
}

.ingredient-matches {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.ingredient-match-item {
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ingredient-match-item:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
}

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.match-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.match-brand {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.match-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 8px 0;
    line-height: 1.4;
}

.match-percentage {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.2) 0%,
        rgba(255, 215, 0, 0.1) 100%
    );
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #d4af37;
}

.match-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.match-ingredient {
    padding: 2px 6px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 2px;
    font-size: 10px;
    color: rgba(212, 175, 55, 0.8);
}

.match-ingredient.highlighted {
    background: rgba(212, 175, 55, 0.3);
    color: #d4af37;
    font-weight: 500;
}

.no-matches {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.no-matches p {
    margin: 0 0 10px 0;
    font-size: 14px;
}

/* Responsive Design for Ingredient Finder */
@media (max-width: 768px) {
    .ingredient-finder-dropdown {
        width: 350px;
        right: -10px;
    }

    .ingredient-finder-header,
    .ingredient-finder-body {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .ingredient-finder-dropdown {
        width: 300px;
        right: -20px;
    }

    .ingredient-finder-header,
    .ingredient-finder-body {
        padding: 15px;
    }
}

.navbar-user-counter .user-counter-icon svg {
    stroke-width: 2.5;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.navbar-user-counter:hover .user-counter-icon svg {
    transform: scale(1.02);
}

.user-counter-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    position: relative;
}

.user-counter-number {
    font-size: 16px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.user-counter-number::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 1px;
    transition: width 0.3s ease;
}

.navbar-user-counter:hover .user-counter-number::after {
    width: 100%;
}

.navbar-user-counter:hover .user-counter-number {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

.user-counter-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.navbar-user-counter:hover .user-counter-label {
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1.2px;
}

/* Pulse glow animation */
@keyframes pulse-glow {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.6;
    }
}

/* Number counting animation */
@keyframes number-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

.user-counter-number.updating {
    animation: number-pop 0.4s ease;
}

/* Loading dots animation */
.loading-dots {
    display: inline-block;
    font-size: 14px;
    animation: loading-pulse 1.5s infinite;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes loading-pulse {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Enhanced tooltip */
.navbar-user-counter[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    animation: tooltip-fade-in 0.3s ease forwards;
    pointer-events: none;
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Success state animation */
.navbar-user-counter.success {
    animation: success-glow 0.6s ease;
}

@keyframes success-glow {
    0% {
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
        transform: translateY(-3px) scale(1.03);
    }
    100% {
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
        transform: translateY(-2px) scale(1.02);
    }
}

/* Compact User Counter */
.user-counter-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-right: 12px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.user-counter-compact::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(16, 185, 129, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.user-counter-compact:hover::before {
    left: 100%;
}

.user-counter-compact:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.user-counter-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
    transition: all 0.3s ease;
}

.user-counter-compact:hover .user-counter-icon-small {
    transform: scale(1.02);
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35);
}

.user-counter-icon-small svg {
    width: 12px;
    height: 12px;
    color: white;
    stroke-width: 2.5;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.user-counter-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.user-counter-number-small {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.user-counter-compact:hover .user-counter-number-small {
    color: rgba(255, 255, 255, 1);
}

.user-counter-label-small {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
    transition: all 0.3s ease;
}

.user-counter-compact:hover .user-counter-label-small {
    color: rgba(255, 255, 255, 0.8);
}

/* Loading dots for compact counter */
.loading-dots-small {
    display: inline-block;
    font-size: 10px;
    animation: loading-pulse 1.5s infinite;
    color: rgba(255, 255, 255, 0.6);
}

/* Compact counter animations */
.user-counter-number-small.updating {
    animation: number-pop-small 0.3s ease;
}

@keyframes number-pop-small {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

.user-counter-compact.success {
    animation: success-glow-small 0.5s ease;
}

@keyframes success-glow-small {
    0% {
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }
    50% {
        box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
        transform: translateY(-1px);
    }
}

/* News Modal Styles */
.news-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.news-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.news-modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: rgba(10, 10, 10, 0.98);
    border-radius: 4px;
    border: 1px solid rgba(201, 169, 78, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.news-modal.show .news-modal-content {
    transform: scale(1);
}

.news-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(201, 169, 78, 0.06);
    background: rgba(201, 169, 78, 0.02);
}

.news-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.04em;
}

.news-title-icon {
    width: 24px;
    height: 24px;
    color: #d4af37;
    stroke-width: 2;
}

.news-modal-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.5);
}

.news-modal-close:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-gold);
    border-color: rgba(201, 169, 78, 0.2);
}

.news-modal-close svg {
    width: 20px;
    height: 20px;
}

.news-modal-body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Custom scrollbar for news modal */
.news-modal-body::-webkit-scrollbar {
    width: 6px;
}

.news-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.news-modal-body::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 3px;
}

.news-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

/* News Loading State */
.news-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.news-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top: 3px solid #d4af37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.news-loading p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

/* News Error State */
.news-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.news-error-icon {
    width: 48px;
    height: 48px;
    color: #ff6b6b;
    margin-bottom: 15px;
}

.news-error h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    margin: 0 0 10px 0;
}

.news-error p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0 0 20px 0;
}

.news-retry-btn {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    padding: 10px 20px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-retry-btn:hover {
    background: var(--color-gold);
    color: #0a0a0a;
}

/* News Content */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    padding: 24px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.news-item:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(201, 169, 78, 0.12);
}

.news-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.news-item-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.news-item-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    margin-left: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.news-item-content {
    color: rgba(255, 255, 255, 0.55);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
    letter-spacing: 0.015em;
}

.news-item-badge {
    display: inline-block;
    background: transparent;
    color: var(--color-gold);
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 400;
    padding: 3px 8px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 12px;
    border: 1px solid rgba(201, 169, 78, 0.2);
}

.news-item-badge.urgent {
    color: #ff4757;
    border-color: rgba(255, 71, 87, 0.2);
    background: transparent;
}

.news-item-badge.update {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    background: transparent;
}

.news-item-badge.feature {
    color: #2ed573;
    border-color: rgba(46, 213, 115, 0.2);
    background: transparent;
}

/* Notification Dropdown Styles */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 500px;
    background: linear-gradient(
        135deg,
        rgba(20, 20, 30, 0.98) 0%,
        rgba(30, 30, 40, 0.98) 100%
    );
    border-radius: 2px;
    border: 1px solid rgba(255, 193, 7, 0.2);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 8px 25px rgba(255, 193, 7, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    overflow: hidden;
    z-index: 10000;

    /* Initial hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dropdown arrow */
.notification-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: linear-gradient(
        135deg,
        rgba(20, 20, 30, 0.98) 0%,
        rgba(30, 30, 40, 0.98) 100%
    );
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
    z-index: -1;
}

.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 193, 7, 0.1);
    background: linear-gradient(
        135deg,
        rgba(255, 193, 7, 0.08) 0%,
        rgba(255, 193, 7, 0.03) 100%
    );
}

.notification-dropdown-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.notification-title-icon {
    width: 18px;
    height: 18px;
    color: var(--color-gold);
    stroke-width: 2;
}

.notification-mark-all-read {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
}

.notification-mark-all-read:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

.notification-mark-all-read svg {
    width: 16px;
    height: 16px;
}

.notification-dropdown-body {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Custom scrollbar for notification dropdown */
.notification-dropdown-body::-webkit-scrollbar {
    width: 4px;
}

.notification-dropdown-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin: 4px 0;
}

.notification-dropdown-body::-webkit-scrollbar-thumb {
    background: rgba(255, 193, 7, 0.3);
    border-radius: 2px;
}

.notification-dropdown-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 193, 7, 0.5);
}

/* Smooth scrolling */
.notification-dropdown-body {
    scroll-behavior: smooth;
}

/* Notification Loading State */
.notification-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}

.notification-loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 193, 7, 0.2);
    border-top: 2px solid var(--color-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

.notification-loading p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin: 0;
}

/* Notification Empty State */
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}

.notification-empty-icon {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
}

.notification-empty h4 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.notification-empty p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0;
}

/* Notification Error State */
.notification-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}

.notification-error-icon {
    width: 36px;
    height: 36px;
    color: #ff6b6b;
    margin-bottom: 12px;
}

.notification-error h4 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.notification-error p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0 0 16px 0;
}

.notification-retry-btn {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.notification-retry-btn:hover {
    background: linear-gradient(135deg, var(--color-gold-dark), #c69500);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* Notification Content */
.notification-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notification-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 14px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(2px);
}

.notification-item.unread {
    background: rgba(255, 193, 7, 0.03);
    border-left: 3px solid var(--color-gold);
    padding-left: 17px;
}

.notification-item.unread::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 20px;
    width: 6px;
    height: 6px;
    background: var(--color-gold);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 193, 7, 0.5);
}

.notification-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
}

.notification-item-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.3;
    flex: 1;
    margin-right: 12px;
}

.notification-item-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    font-weight: 500;
}

.notification-item-content {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.notification-item-type {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: white;
    font-size: 8px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.notification-item-type.order {
    background: linear-gradient(135deg, var(--quality-top), var(--color-success));
}

.notification-item-type.system {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
}

.notification-item-type.promotion {
    background: linear-gradient(135deg, var(--color-warning), var(--color-error));
}

/* Bounce animation for cart badges */
@keyframes bounceIn {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* Pulse animation for added cart button */
@keyframes addedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
    }
    100% {
        transform: scale(1.02);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    }
}

/* Cart Modal High-Priority Animation */
@keyframes cartModalPopIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 400px) {
    .product-actions-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .favorite-btn-middle-container,
    .cart-btn-container {
        width: 100%;
    }
    
    .favorite-btn,
    .add-to-cart-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .navbar-cart-icon {
        margin-right: 10px;
        padding: 6px;
    }

    .navbar-news-icon {
        margin-right: 10px;
        padding: 6px;
    }

    .navbar-notification-icon {
        margin-right: 10px;
        padding: 6px;
    }

    .navbar-news-icon .news-icon {
        width: 20px;
        height: 20px;
    }

    .navbar-notification-icon .notification-icon {
        width: 20px;
        height: 20px;
    }

    .cart-icon {
        width: 20px;
        height: 20px;
    }

    /* Notification Dropdown Mobile */
    .notification-dropdown {
        width: 320px;
        max-height: 400px;
        right: -10px;
    }

    .notification-dropdown::before {
        right: 25px;
    }

    .notification-dropdown-header {
        padding: 12px 16px;
    }

    .notification-dropdown-title {
        font-size: 15px;
    }

    .notification-item {
        padding: 12px 16px;
    }

    .notification-item-title {
        font-size: 12px;
    }

    .notification-item-content {
        font-size: 11px;
    }
}

.navbar-user-counter {
    padding: 6px 12px;
    margin-right: 12px;
    gap: 8px;
    border-radius: 2px;
}

.navbar-user-counter:hover {
    transform: translateY(-1px) scale(1.01);
}

.user-counter-icon {
    width: 28px;
    height: 28px;
}

.user-counter-icon svg {
    width: 16px;
    height: 16px;
}

.user-counter-number {
    font-size: 14px;
}

.user-counter-label {
    font-size: 10px;
    letter-spacing: 0.8px;
}

/* News Modal Mobile */
.news-modal-content {
    width: 95%;
    max-height: 85vh;
    border-radius: 2px;
}

.news-modal-header {
    padding: 15px 20px;
}

.news-modal-title {
    font-size: 18px;
}

.news-modal-body {
    padding: 20px;
    max-height: 65vh;
}

.news-item {
    padding: 15px;
}

.news-item-title {
    font-size: 15px;
}

.news-item-content {
    font-size: 13px;
}

.user-counter-compact {
    padding: 3px 6px;
    margin-right: 8px;
    gap: 4px;
    border-radius: 2px;
}

.user-counter-icon-small {
    width: 18px;
    height: 18px;
}

.user-counter-icon-small svg {
    width: 10px;
    height: 10px;
}

.user-counter-number-small {
    font-size: 11px;
}

.user-counter-label-small {
    font-size: 7px;
    letter-spacing: 0.4px;
}

@media (max-width: 480px) {
    .navbar-cart-icon {
        margin-right: 8px;
        padding: 5px;
    }

    .navbar-news-icon {
        margin-right: 8px;
        padding: 5px;
    }

    .navbar-notification-icon {
        margin-right: 8px;
        padding: 5px;
    }

    .navbar-news-icon .news-icon {
        width: 18px;
        height: 18px;
    }

    .navbar-notification-icon .notification-icon {
        width: 18px;
        height: 18px;
    }

    .cart-icon {
        width: 18px;
        height: 18px;
    }

    /* Notification Dropdown Very Small Mobile */
    .notification-dropdown {
        width: 280px;
        max-height: 350px;
        right: -20px;
    }

    .notification-dropdown::before {
        right: 35px;
    }

    .user-counter-compact {
        padding: 2px 5px;
        margin-right: 6px;
        gap: 3px;
        border-radius: 2px;
    }

    .user-counter-icon-small {
        width: 16px;
        height: 16px;
    }

    .user-counter-icon-small svg {
        width: 9px;
        height: 9px;
    }

    .user-counter-number-small {
        font-size: 10px;
    }

    .user-counter-label-small {
        font-size: 6px;
        letter-spacing: 0.3px;
    }
}

/* Enhanced Responsive Design for Favorites Cards */
@media (max-width: 768px) {
    .favorites-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .favorite-card-image {
        height: 160px;
    }

    .favorite-card-content {
        padding: 16px;
    }
}

/* Photo Editor (first definition removed — duplicate of override block below) */

/* Keeping shared utility selectors from original photo editor */

.photo-editor-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-preview-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
    border-radius: 2px;
    padding: 20px;
    min-height: 300px;
}

#photoCanvas {
    border: 2px solid var(--accent-color);
    border-radius: 2px;
    max-width: 100%;
    height: auto;
    cursor: move;
}

.crop-overlay {
    position: absolute;
    border: 2px dashed var(--accent-color);
    background: rgba(74, 144, 226, 0.1);
    display: none;
    pointer-events: none;
}

.crop-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent-color);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
}

.crop-handle.top-left {
    top: -5px;
    left: -5px;
}
.crop-handle.top-right {
    top: -5px;
    right: -5px;
}
.crop-handle.bottom-left {
    bottom: -5px;
    left: -5px;
}
.crop-handle.bottom-right {
    bottom: -5px;
    right: -5px;
}

.photo-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--card-bg);
    border-radius: 2px;
}

.control-group label {
    font-weight: 600;
    min-width: 60px;
    color: var(--text-color);
}

#sizeSlider {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#sizeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
}

#sizeSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

#sizeValue {
    font-weight: 600;
    color: var(--accent-color);
    min-width: 50px;
}

#shapeSelect {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
}

.control-btn {
    padding: 8px 16px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-secondary {
    padding: 10px 20px;
    background: transparent;
    color: var(--text-color);
    border: 2px solid var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--border-color);
}

.btn-primary {
    padding: 10px 20px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Photo Editor Modal Styles */
.photo-editor-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2030 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.photo-editor-modal[style*="display: none"] {
    display: none !important;
}

.photo-editor-content {
    width: 100% !important;
    max-width: 1000px !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
    position: relative !important;
    z-index: 2031 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-radius: 4px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
    padding: 30px !important;
    color: #333 !important;
}

.photo-editor-modal .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 2px solid #e9ecef !important;
}

.photo-editor-modal .modal-header h2 {
    color: #2c3e50 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: none !important;
}

.photo-editor-modal .modal-close {
    background: #f8f9fa !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #6c757d !important;
}

.photo-editor-modal .modal-close:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
    transform: scale(1.02) !important;
}

.photo-editor-container {
    display: flex !important;
    gap: 40px !important;
    margin-bottom: 30px !important;
}

.editor-main {
    flex: 2 !important;
}

.editor-preview {
    flex: 1 !important;
    text-align: center !important;
}

.image-container {
    position: relative;
    display: inline-block;
    border: 2px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
    background: #f5f5f5;
}

#photoCanvas {
    display: block;
    cursor: move;
}

.crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.crop-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border: 3px solid var(--color-gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.editor-controls {
    margin-top: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    background: #f8f9fa !important;
    padding: 25px !important;
    border-radius: 2px !important;
    border: 1px solid #e9ecef !important;
}

.control-group {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: white !important;
    padding: 15px !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.control-group label {
    min-width: 70px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.control-group input[type="range"] {
    flex: 1 !important;
    margin: 0 15px !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: #e9ecef !important;
    outline: none !important;
    cursor: pointer !important;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--color-gold) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(201, 169, 78, 0.3) !important;
}

.control-group span {
    min-width: 60px !important;
    text-align: right !important;
    font-family: "Courier New", monospace !important;
    font-weight: 600 !important;
    color: var(--color-gold) !important;
    background: #e7f3ff !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

.position-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px !important;
    width: 100px !important;
}

.position-btn {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 2px !important;
    padding: 12px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    color: #495057 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.position-btn:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(201, 169, 78, 0.2) !important;
}

.position-btn:active {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%) !important;
    color: white !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(201, 169, 78, 0.3) !important;
}

.editor-preview h3 {
    color: #2c3e50 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.preview-container {
    margin: 20px 0 !important;
    display: inline-block !important;
    border: 4px solid var(--color-gold) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: white !important;
    box-shadow: 0 8px 25px rgba(201, 169, 78, 0.2) !important;
    transition: all 0.3s ease !important;
}

.preview-container:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 12px 35px rgba(201, 169, 78, 0.3) !important;
}

#previewCanvas {
    display: block !important;
    border-radius: 50% !important;
}

.editor-preview p {
    color: #6c757d !important;
    font-size: 14px !important;
    font-style: italic !important;
    margin-top: 15px !important;
}

.editor-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 20px !important;
    padding-top: 30px !important;
    border-top: 2px solid #e9ecef !important;
    margin-top: 30px !important;
}

.editor-actions .btn-secondary,
.editor-actions .btn-primary {
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    cursor: pointer !important;
}

.editor-actions .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3) !important;
}

.editor-actions .btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4) !important;
}

.editor-actions .btn-primary {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(201, 169, 78, 0.3) !important;
}

.editor-actions .btn-primary:hover {
    background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold-dark) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 169, 78, 0.4) !important;
}

/* Responsive design for photo editor */
@media (max-width: 768px) {
    .photo-editor-container {
        flex-direction: column;
        gap: 20px;
    }

    .crop-circle {
        width: 250px;
        height: 250px;
    }

    #photoCanvas {
        width: 100%;
        max-width: 350px;
        height: auto;
    }
}

/* Enhanced Profile Avatar XP Ring */

@keyframes profileRingPulse {
    0% {
        filter: brightness(1.1) drop-shadow(0 0 15px rgba(34, 197, 94, 0.5));
    }
    100% {
        filter: brightness(1.3) drop-shadow(0 0 25px rgba(34, 197, 94, 0.8));
    }
}
/* Soft Green Transition Section after Pegasus - Background controlled by JavaScript */
.white-transition-section {
    /* Background will be dynamically controlled by JavaScript scroll handler */
    background: transparent;
    position: relative;
    overflow: hidden;
    /* Ensure smooth transition with proper height */
    min-height: 300vh;
}

/* Pegasus Scent Profile — Match Haltane layout with Red/Black theme (final override) */
.pegasus-section .pegasus-notes .fragrance-profile-container {
    background: linear-gradient(135deg, #0f0f10 0%, #171719 100%) !important;
    border: 1px solid rgba(255, 59, 59, 0.25) !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #e9e9e9 !important;
}

.pegasus-section .pegasus-notes .fragrance-profile-container::before {
    background: linear-gradient(
        135deg,
        rgba(255, 59, 59, 0.06) 0%,
        rgba(255, 255, 255, 0.03) 100%
    ) !important;
}

.pegasus-section .pegasus-notes .fragrance-profile-container::after {
    background: radial-gradient(
        circle at 30% 20%,
        rgba(255, 59, 59, 0.08) 0%,
        transparent 70%
    ) !important;
}

.pegasus-section .pegasus-notes:hover .fragrance-profile-container {
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 59, 59, 0.45) !important;
    transform: translateY(-3px);
}

.pegasus-section .pegasus-notes a,
.pegasus-section .pegasus-notes .highlight {
    color: #ff4d4d !important;
    text-decoration-color: rgba(255, 77, 77, 0.5) !important;
}

.pegasus-section .pegasus-notes .intensity-scale-label {
    color: #d0d0d0 !important;
}

.pegasus-section .pegasus-notes .profile-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    letter-spacing: 0.5px !important;
}

.pegasus-section .pegasus-notes .profile-subtitle,
.pegasus-section .pegasus-notes .overall-intensity-title {
    color: #c9807c !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.pegasus-section .pegasus-notes .intensity-label,
.pegasus-section .pegasus-notes .meter-label,
.pegasus-section .pegasus-notes .category-label,
.pegasus-section .pegasus-notes .scale-mark {
    color: rgba(235, 235, 235, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.pegasus-section .pegasus-notes .category-bar {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Unify all category fills to red theme */
.pegasus-section .pegasus-notes .category-item .category-fill {
    background: linear-gradient(90deg, #8a3c3a 0%, #b85450 100%) !important;
    box-shadow: 0 2px 8px rgba(184, 84, 80, 0.25) !important;
}

/* Intensity meter — red scale */
.pegasus-section .pegasus-notes .meter-track {
    background: linear-gradient(
        90deg,
        rgba(50, 50, 50, 0.4) 0%,
        rgba(110, 60, 58, 0.35) 35%,
        rgba(150, 70, 68, 0.45) 65%,
        rgba(184, 84, 80, 0.55) 100%
    ) !important;
}

.pegasus-section .pegasus-notes .meter-fill {
    background: linear-gradient(90deg, #8a3c3a 0%, #b85450 100%) !important;
}

.pegasus-section .pegasus-notes .meter-indicator {
    background: linear-gradient(135deg, #8a3c3a 0%, #b85450 100%) !important;
    border: 3px solid #ffffff !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(184, 84, 80, 0.25) !important;
}

.pegasus-section .pegasus-notes .scale-mark:hover {
    color: #ffffff !important;
}

/* Pegasus product header text: force to white */
.pegasus-section .product-title .brand-name,
.pegasus-section .product-title .brand-location,
.pegasus-section .product-title .product-name {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* Pegasus quality header: force to white */
.pegasus-section .product-title .quality-title,
.pegasus-section .product-title .quality-subtitle {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* ================================
   Pegasus – Top Quality Dark Grey Theme Override (replaces default green)
   ================================ */
.pegasus-section
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-badge,
.pegasus-section #pegasus-top-quality:checked + .quality-label .quality-badge {
    border-color: #4d4d4d !important;
    background: linear-gradient(
        135deg,
        rgba(40, 40, 40, 0.95),
        rgba(20, 20, 20, 0.95)
    ) !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(0, 0, 0, 0.5) !important;
}

.pegasus-section
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-name,
.pegasus-section
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-description,
.pegasus-section #pegasus-top-quality:checked + .quality-label .quality-name,
.pegasus-section
    #pegasus-top-quality:checked
    + .quality-label
    .quality-description {
    color: #d0d0d0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.pegasus-section
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator,
.pegasus-section
    #pegasus-top-quality:checked
    + .quality-label
    .selection-indicator {
    border-color: #4d4d4d !important;
    background: #4d4d4d !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7) !important;
}

/* ================================
   Pegasus – Identical Quality Smoky Crimson Theme (replaces yellow)
   Uses same high-specificity selectors to override previous theme
   ================================ */
.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="identical"]:checked
    + label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-badge {
    background: linear-gradient(135deg, #1a0f10 0%, #241112 100%) !important;
    border-color: rgba(184, 84, 80, 0.6) !important;
    color: #c9807c !important;
    box-shadow:
        0 8px 25px rgba(184, 84, 80, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="identical"]:checked
    + label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-name {
    color: #c9807c !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="identical"]:checked
    + label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-description {
    color: #d4a19d !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .selection-indicator {
    border-color: #b85450 !important;
    background: #b85450 !important;
    box-shadow: 0 0 8px rgba(184, 84, 80, 0.35) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-ornament,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-ornament {
    border-color: rgba(184, 84, 80, 0.6) !important;
    box-shadow: 0 0 6px rgba(184, 84, 80, 0.25) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="identical"]
    input[type="radio"]:checked
    + .quality-label
    .quality-glow,
.pegasus-image
    ~ .product-title
    input[id="pegasus-identical-quality"]:checked
    + label
    .quality-glow {
    background: radial-gradient(
        circle,
        rgba(184, 84, 80, 0.22) 0%,
        rgba(184, 84, 80, 0.12) 35%,
        transparent 60%
    ) !important;
}

/* ID-specific override for Identical Quality text in Pegasus */
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .quality-name {
    color: #c9807c !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .quality-description {
    color: #d4a19d !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure badge and accents match theme for the ID path */
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .quality-badge {
    background: linear-gradient(135deg, #1a0f10 0%, #241112 100%) !important;
    border-color: rgba(184, 84, 80, 0.6) !important;
    color: #c9807c !important;
    box-shadow:
        0 8px 25px rgba(184, 84, 80, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .selection-indicator {
    border-color: #b85450 !important;
    background: #b85450 !important;
    box-shadow: 0 0 8px rgba(184, 84, 80, 0.35) !important;
}
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .quality-ornament {
    border-color: rgba(184, 84, 80, 0.6) !important;
    box-shadow: 0 0 6px rgba(184, 84, 80, 0.25) !important;
}
.pegasus-section
    #pegasus-identical-quality:checked
    + .quality-label
    .quality-glow {
    background: radial-gradient(
        circle,
        rgba(184, 84, 80, 0.22) 0%,
        rgba(184, 84, 80, 0.12) 35%,
        transparent 60%
    ) !important;
}

/* ================================
   Pegasus – Top Quality Smoky Garnet Theme (distinct from Identical)
   ================================ */
.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="top"]:checked
    + label
    .quality-badge,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-badge {
    background: linear-gradient(135deg, #0f1112 0%, #15181a 100%) !important;
    border-color: rgba(179, 57, 47, 0.75) !important;
    color: #ff625a !important;
    box-shadow:
        0 8px 25px rgba(179, 57, 47, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="top"]:checked
    + label
    .quality-name,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-name {
    color: #ff625a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[name="pegasus-quality"][value="top"]:checked
    + label
    .quality-description,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-description {
    color: #ff827a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .selection-indicator,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .selection-indicator {
    border-color: #b3392f !important;
    background: #b3392f !important;
    box-shadow: 0 0 10px rgba(179, 57, 47, 0.4) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-ornament,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-ornament {
    border-color: rgba(179, 57, 47, 0.8) !important;
    box-shadow: 0 0 8px rgba(179, 57, 47, 0.3) !important;
}

.pegasus-image
    ~ .product-title
    .quality-option[data-quality="top"]
    input[type="radio"]:checked
    + .quality-label
    .quality-glow,
.pegasus-image
    ~ .product-title
    input[id="pegasus-top-quality"]:checked
    + label
    .quality-glow {
    background: radial-gradient(
        circle,
        rgba(179, 57, 47, 0.26) 0%,
        rgba(179, 57, 47, 0.16) 35%,
        transparent 60%
    ) !important;
}

/* ID-specific override for Top Quality text in Pegasus */
.pegasus-section #pegasus-top-quality:checked + .quality-label .quality-name {
    color: #ff625a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}
.pegasus-section
    #pegasus-top-quality:checked
    + .quality-label
    .quality-description {
    color: #ff827a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

/* Ensure badge and accents match smoky garnet theme for the ID path */
.pegasus-section #pegasus-top-quality:checked + .quality-label .quality-badge {
    background: linear-gradient(135deg, #0f1112 0%, #15181a 100%) !important;
    border-color: rgba(179, 57, 47, 0.75) !important;
    color: #ff625a !important;
    box-shadow:
        0 8px 25px rgba(179, 57, 47, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.pegasus-section
    #pegasus-top-quality:checked
    + .quality-label
    .selection-indicator {
    border-color: #b3392f !important;
    background: #b3392f !important;
    box-shadow: 0 0 10px rgba(179, 57, 47, 0.4) !important;
}
.pegasus-section
    #pegasus-top-quality:checked
    + .quality-label
    .quality-ornament {
    border-color: rgba(179, 57, 47, 0.8) !important;
    box-shadow: 0 0 8px rgba(179, 57, 47, 0.3) !important;
}
.pegasus-section #pegasus-top-quality:checked + .quality-label .quality-glow {
    background: radial-gradient(
        circle,
        rgba(179, 57, 47, 0.26) 0%,
        rgba(179, 57, 47, 0.16) 35%,
        transparent 60%
    ) !important;
}

/* Greenly Main Container */
.greenly-main-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 60px 30px;
}

/* Greenly Product Section */
.greenly-product-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Product Info Section */
.product-info-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Greenly Profiles Container */
.greenly-profiles-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Greenly Scent Profile */
.greenly-scent-profile {
    width: 400px;
    background: #f7faf7;
    border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(76, 175, 80, 0.12);
    padding: 15px;
}

/* Greenly Ingredients */
.greenly-ingredients {
    width: 400px;
    background: #f7faf7;
    border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(76, 175, 80, 0.12);
    padding: 15px;
}

.greenly-scent-profile .profile-container,
.greenly-ingredients .profile-container {
    padding: 25px;
}

.greenly-scent-profile .profile-header,
.greenly-ingredients .profile-header {
    text-align: center;
    margin-bottom: 25px;
}

.greenly-scent-profile .profile-title,
.greenly-ingredients .profile-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2e7d32;
    margin: 0 0 4px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.greenly-scent-profile .profile-subtitle,
.greenly-ingredients .profile-subtitle {
    font-size: 0.95rem;
    color: #4caf50;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Fragrance Wheel Section */
.greenly-scent-profile .fragrance-wheel-section {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.greenly-scent-profile .wheel-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.greenly-scent-profile .fragrance-wheel {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #e8f5e8;
    border: 2px solid #4caf50;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
}

.greenly-scent-profile .wheel-center {
    display: none;
}

.greenly-scent-profile .center-icon {
    font-size: 2rem;
    margin-bottom: 5px;
}

.greenly-scent-profile .center-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2e7d32;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.greenly-scent-profile .wheel-segment {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 500;
    color: white;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease;
}

.greenly-scent-profile .wheel-segment:hover {
    transform: scale(1.02);
}

.greenly-scent-profile .wheel-segment.fresh {
    background: #81c784;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.greenly-scent-profile .wheel-segment.green {
    background: #4caf50;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.greenly-scent-profile .wheel-segment.citrus {
    background: #fb8c00;
    bottom: 10px;
    right: 30px;
}

.greenly-scent-profile .wheel-segment.woody {
    background: #795548;
    bottom: 10px;
    left: 30px;
}

.greenly-scent-profile .wheel-segment.aromatic {
    background: #42a5f5;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.greenly-scent-profile .segment-label {
    font-size: 0.6rem;
    margin-bottom: 2px;
}

.greenly-scent-profile .segment-strength {
    font-size: 0.5rem;
    opacity: 0.9;
}

/* Performance Metrics */
.greenly-scent-profile .performance-metrics {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.greenly-scent-profile .metric-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(76, 175, 80, 0.08);
}

.greenly-scent-profile .metric-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.greenly-scent-profile .metric-info {
    flex: 1;
}

.greenly-scent-profile .metric-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 4px;
}

.greenly-scent-profile .metric-value {
    font-size: 0.8rem;
    color: #4caf50;
    margin-bottom: 8px;
}

.greenly-scent-profile .metric-bar {
    height: 6px;
    background: #e8f5e8;
    border-radius: 3px;
    overflow: hidden;
}

.greenly-scent-profile .metric-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 3px;
    transition: width 0.8s ease;
}

/* Notes Pyramid */
.greenly-ingredients .notes-pyramid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.greenly-ingredients .pyramid-layer {
    background: white;
    border-radius: 4px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.08);
}

.greenly-ingredients .layer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e8f5e8;
}

.greenly-ingredients .layer-icon {
    font-size: 1.3rem;
}

.greenly-ingredients .layer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2e7d32;
    flex: 1;
}

.greenly-ingredients .layer-duration {
    font-size: 0.8rem;
    color: #4caf50;
    font-weight: 500;
}

.greenly-ingredients .notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
}

.greenly-ingredients .note-card {
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    background: #f8fff8;
    border: 1px solid rgba(76, 175, 80, 0.1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.greenly-ingredients .note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.15);
}

.greenly-ingredients .note-visual {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.greenly-ingredients .note-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 4px;
}

.greenly-ingredients .note-intensity {
    font-size: 0.7rem;
    color: #4caf50;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .greenly-main-container {
        flex-direction: column;
        gap: 30px;
    }

    .greenly-product-section {
        flex-direction: column;
        gap: 20px;
    }

    .greenly-profiles-container {
        flex-direction: column;
        gap: 20px;
    }

    .greenly-scent-profile,
    .greenly-ingredients {
        padding: 15px;
    }

    .greenly-scent-profile .profile-container,
    .greenly-ingredients .profile-container {
        padding: 15px;
    }

    .greenly-scent-profile .fragrance-wheel-section {
        flex-direction: column;
        gap: 30px;
    }

    .greenly-scent-profile .fragrance-wheel {
        width: 150px;
        height: 150px;
    }

    .greenly-scent-profile .wheel-segment {
        width: 45px;
        height: 45px;
        font-size: 0.6rem;
    }

    .greenly-ingredients .notes-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .greenly-scent-profile .profile-title,
    .greenly-ingredients .profile-title {
        font-size: 1.8rem;
    }

    .greenly-scent-profile .fragrance-wheel {
        width: 120px;
        height: 120px;
    }

    .greenly-scent-profile .wheel-segment {
        width: 35px;
        height: 35px;
        font-size: 0.5rem;
    }

    .greenly-ingredients .notes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =====================================================================
   ENHANCED INGREDIENT FINDER MODAL - FULL WINDOW DESIGN
   ===================================================================== */

/* Ingredient Finder Icon in Navbar */
.ingredient-finder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.ingredient-finder-icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.ingredient-finder-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.ingredient-finder-icon:hover::before {
    left: 100%;
}

.ingredient-finder-icon svg {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.ingredient-finder-icon:hover svg {
    color: white;
    transform: scale(1.02);
}

/* Enhanced Ingredient Modal - Full Window */
.ingredient-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.ingredient-modal.show {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
}

.ingredient-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.ingredient-modal-content {
    background: rgba(10, 10, 10, 0.98);
    border-radius: 4px;
    width: 95%;
    max-width: 1200px;
    height: 90vh;
    max-height: 900px;
    border: 1px solid rgba(201, 169, 78, 0.12);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ingredient-modal.show .ingredient-modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: modalFloat 8s ease-in-out infinite 1s;
}

/* Modal Header */
.ingredient-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 40px 24px;
    border-bottom: 1px solid rgba(201, 169, 78, 0.08);
    background: rgba(201, 169, 78, 0.02);
    position: relative;
    flex-shrink: 0;
}

.ingredient-modal-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 78, 0.3) 50%,
        transparent 100%
    );
}

.ingredient-modal-title {
    flex: 1;
}

.ingredient-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}

.ingredient-modal-icon {
    width: 32px;
    height: 32px;
    color: #d4af37;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
    animation: iconGlow 3s ease-in-out infinite alternate;
}

@keyframes iconGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
    }
}

.ingredient-modal-title h2 {
    color: white;
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.04em;
}

.ingredient-modal-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    font-style: italic;
}

.ingredient-modal-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ingredient-modal-close:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(201, 169, 78, 0.2);
    color: var(--color-gold);
}

.ingredient-modal-close svg {
    width: 20px;
    height: 20px;
}

/* Modal Body */
.ingredient-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.3) transparent;
    /* Ensure scroll wheel events work properly */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ingredient-modal-body::-webkit-scrollbar {
    width: 8px;
}

.ingredient-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.ingredient-modal-body::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.ingredient-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

/* Search Section */
.ingredient-search-section {
    padding: 40px;
    animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s
        backwards;
    width: 100%;
    display: block;
}

.ingredient-search-section[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

@keyframes slideInUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Enhanced Search Container */
.enhanced-search-container {
    margin-bottom: 40px;
    position: relative;
}

.search-input-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.search-input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(212, 175, 55, 0.7);
    z-index: 2;
}

#enhancedIngredientSearch {
    width: 100%;
    padding: 16px 25px 16px 55px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(201, 169, 78, 0.12);
    border-radius: 2px;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: all 0.4s ease;
    letter-spacing: 0.015em;
}

#enhancedIngredientSearch::placeholder {
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.3s ease;
}

#enhancedIngredientSearch:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(201, 169, 78, 0.4);
    box-shadow: 0 0 0 3px rgba(201, 169, 78, 0.08);
}

#enhancedIngredientSearch:focus::placeholder {
    color: rgba(255, 255, 255, 0.3);
    transform: translateX(5px);
}

/* Ingredient Categories */
.ingredient-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    /* Ensure smooth scrolling within categories */
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.ingredient-category {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    padding: 25px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    animation: categorySlideIn 0.6s ease backwards;
    overflow-y: visible;
    max-height: none;
}

.ingredient-category:nth-child(1) {
    animation-delay: 0.1s;
}
.ingredient-category:nth-child(2) {
    animation-delay: 0.2s;
}
.ingredient-category:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes categorySlideIn {
    0% {
        transform: translateY(40px) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.ingredient-category::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.1),
        transparent
    );
    transition: left 0.6s ease;
}

.ingredient-category:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(201, 169, 78, 0.15);
}

.ingredient-category:hover::before {
    left: 100%;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.category-icon {
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(201, 169, 78, 0.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.category-icon svg {
    width: 20px;
    height: 20px;
    color: #d4af37;
    transition: all 0.3s ease;
}

.ingredient-category:hover .category-icon {
    background: rgba(201, 169, 78, 0.06);
    border-color: rgba(201, 169, 78, 0.3);
}

.category-header h3 {
    color: white;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 5px 0;
    letter-spacing: 0.03em;
}

.category-header p {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-style: normal;
    margin: 0;
    letter-spacing: 0.02em;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.enhanced-ingredient-tag {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 16px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-transform: capitalize;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.02em;
}

.enhanced-ingredient-tag .ingredient-icon {
    font-size: 16px;
    filter: brightness(1.1) contrast(1.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.enhanced-ingredient-tag .ingredient-name {
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.enhanced-ingredient-tag::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.2),
        transparent
    );
    transition: left 0.4s ease;
}

.enhanced-ingredient-tag:hover {
    background: rgba(201, 169, 78, 0.06);
    color: white;
    border-color: rgba(201, 169, 78, 0.25);
}

.enhanced-ingredient-tag:hover .ingredient-icon {
    transform: scale(1.03) rotate(5deg);
    filter: brightness(1.3) contrast(1.2)
        drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

.enhanced-ingredient-tag:hover .ingredient-name {
    font-weight: 600;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.enhanced-ingredient-tag:hover::before {
    left: 100%;
}

.enhanced-ingredient-tag.selected {
    background: rgba(201, 169, 78, 0.1);
    color: var(--color-gold);
    border-color: var(--color-gold);
    font-weight: 400;
}

.enhanced-ingredient-tag.selected .ingredient-icon {
    transform: scale(1.03);
    filter: brightness(1.4) contrast(1.3)
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    animation: iconGlowPulse 2s ease-in-out infinite;
}

.enhanced-ingredient-tag.selected .ingredient-name {
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

@keyframes iconGlowPulse {
    0%,
    100% {
        filter: brightness(1.4) contrast(1.3)
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    }
    50% {
        filter: brightness(1.6) contrast(1.4)
            drop-shadow(0 0 18px rgba(255, 255, 255, 1));
    }
}

@keyframes selectedPulse {
    0%,
    100% {
        box-shadow:
            0 5px 20px rgba(212, 175, 55, 0.4),
            0 0 0 2px rgba(212, 175, 55, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow:
            0 8px 30px rgba(212, 175, 55, 0.6),
            0 0 0 3px rgba(212, 175, 55, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* Always Visible Actions Section */
.always-visible-actions {
    margin-top: 25px;
    margin-bottom: 15px;
}

.always-visible-actions .search-action {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Selected Ingredients Bar */
.selected-ingredients-bar {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(212, 175, 55, 0.1) 100%
    );
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    padding: 25px;
    margin-top: 30px;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.selected-ingredients-bar.show {
    opacity: 1;
    transform: translateY(0);
    animation: barSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes barSlideIn {
    0% {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }
    60% {
        transform: translateY(-1px) scale(1.02);
        opacity: 0.8;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.selected-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.selected-bar-header h4 {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.clear-all-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clear-all-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.5);
    color: white;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 5px 15px rgba(220, 38, 38, 0.2);
}

.clear-all-btn svg {
    width: 14px;
    height: 14px;
}

.selected-ingredients-display {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
    min-height: 50px;
    align-items: center;
}

.selected-ingredient-pill {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.9) 0%,
        rgba(212, 175, 55, 0.7) 100%
    );
    color: #1a1a1a;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(212, 175, 55, 1);
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pillSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.3s ease;
}

.selected-ingredient-pill .ingredient-icon {
    font-size: 16px;
    filter: brightness(1.1) contrast(1.1);
    margin-right: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.selected-ingredient-pill .ingredient-name {
    font-weight: 600;
    letter-spacing: 0.3px;
}

@keyframes pillSlideIn {
    0% {
        transform: translateX(-20px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.remove-ingredient-btn {
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.remove-ingredient-btn:hover {
    opacity: 1;
    transform: scale(1.03);
    color: #dc2626;
}

.enhanced-search-btn {
    background: var(--color-gold);
    border: none;
    color: #0a0a0a;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all var(--transition-fast) ease;
    letter-spacing: 0.02em;
}

.enhanced-search-btn::before {
    display: none;
}

.enhanced-search-btn:hover {
    background: var(--color-gold-light);
    transform: translateY(-1px);
}

.enhanced-search-btn:hover::before {
    display: none;
}

.enhanced-search-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast) ease;
}

.enhanced-search-btn:hover svg {
    transform: translateX(2px);
}

/* Search Action Container */
.search-action {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Show All Fragrances Button */
.show-all-btn {
    background: linear-gradient(
        135deg,
        rgba(45, 45, 45, 0.9) 0%,
        rgba(30, 30, 30, 0.95) 100%
    ) !important;
    border: 2px solid rgba(212, 175, 55, 0.6) !important;
    color: rgba(212, 175, 55, 0.9) !important;
    position: relative;
    overflow: hidden;
}

.show-all-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(212, 175, 55, 0.1) 100%
    ) !important;
    border: 2px solid rgba(212, 175, 55, 1) !important;
    color: rgba(212, 175, 55, 1) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 15px 40px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.show-all-btn .btn-count {
    background: rgba(212, 175, 55, 0.2);
    color: rgba(212, 175, 55, 1);
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.show-all-btn:hover .btn-count {
    background: rgba(212, 175, 55, 0.3);
    color: rgba(212, 175, 55, 1);
    border: 1px solid rgba(212, 175, 55, 0.6);
    transform: scale(1.02);
}

/* Results Section */
.ingredient-results-section {
    padding: 40px;
    animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s
        backwards;
    width: 100%;
    display: none;
}

.ingredient-results-section[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ingredient-results-section[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Mutual Exclusion - Only one section visible at a time */
.ingredient-modal-body
    .ingredient-search-section:not([style*="display: none"])
    ~ .ingredient-results-section {
    display: none !important;
    visibility: hidden !important;
}

.ingredient-modal-body
    .ingredient-results-section:not([style*="display: none"])
    ~ .ingredient-search-section {
    display: none !important;
    visibility: hidden !important;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.results-title h3 {
    color: white;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.results-title p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    margin: 0;
    font-style: italic;
}

.back-to-search-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.back-to-search-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    transform: translateY(-2px);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 25px;
}

.result-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 4px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(15px);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: resultSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.result-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.1),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.result-card:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(212, 175, 55, 0.3),
        0 0 30px rgba(212, 175, 55, 0.1);
}

.result-card:hover::before {
    left: 100%;
}

/* Result Card Header */
.result-card-header {
    display: flex;
    gap: 20px;
    padding: 25px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-height: 120px;
}

.result-card-image {
    flex-shrink: 0;
}

.fragrance-image-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.2) 0%,
        rgba(212, 175, 55, 0.1) 100%
    );
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.fragrance-image-placeholder::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent,
        rgba(212, 175, 55, 0.2),
        transparent
    );
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fragrance-bottle-icon {
    width: 32px;
    height: 32px;
    color: #d4af37;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
    position: relative;
    z-index: 2;
}

.result-card:hover .fragrance-image-placeholder {
    transform: scale(1.02) rotate(5deg);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.result-info {
    flex: 1;
    min-width: 0; /* Enable text wrapping in flex items */
    overflow: hidden; /* Prevent overflow */
}

.result-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
    min-height: 28px;
    flex-wrap: nowrap;
}

.result-name {
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.result-brand {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0 0 15px 0;
    font-weight: 400;
    font-style: italic;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
    max-width: 100%;
}

.result-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.result-match-badge {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.9) 0%,
        rgba(212, 175, 55, 0.7) 100%
    );
    color: #1a1a1a;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.match-icon {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.availability-badge {
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.availability-badge.available {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.9) 0%,
        rgba(34, 197, 94, 0.7) 100%
    );
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.availability-badge.not-available {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.9) 0%,
        rgba(239, 68, 68, 0.7) 100%
    );
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.result-card:hover .result-match-badge {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 1) 0%,
        rgba(212, 175, 55, 0.8) 100%
    );
    transform: scale(1.02);
    box-shadow:
        0 6px 20px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.result-card:hover .availability-badge.available {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 1) 0%,
        rgba(34, 197, 94, 0.8) 100%
    );
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.result-card:hover .availability-badge.not-available {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 1) 0%,
        rgba(239, 68, 68, 0.8) 100%
    );
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Quality Bar */
.match-quality {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quality-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.quality-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #d4af37 100%);
    border-radius: 3px;
    transition: width 1s ease;
    position: relative;
}

.quality-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: qualityShine 2s ease-in-out infinite;
}

@keyframes qualityShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.quality-text {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Result Description */
.result-description {
    padding: 0 25px 20px;
    position: relative;
    z-index: 2;
}

.result-description p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
    max-height: 4.8em; /* Show approximately 3 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Enhanced Result Ingredients */
.result-ingredients {
    padding: 0 25px 20px;
    position: relative;
    z-index: 2;
}

.result-ingredients h5 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ingredients-icon {
    width: 16px;
    height: 16px;
    color: #d4af37;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
}

.ingredient-pills {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow: hidden;
    max-height: 80px; /* Limit height to prevent overflow */
    overflow-y: auto;
}

.ingredient-pills .ingredient-pill .match-indicator {
    background: #22c55e;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    animation: checkmarkPulse 2s ease-in-out infinite;
}

@keyframes checkmarkPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.5);
    }
}

/* Ingredient Stats */
.ingredient-stats {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.1) 0%,
        rgba(212, 175, 55, 0.05) 100%
    );
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
}

.stat-number {
    font-size: 18px;
    font-weight: 700;
    color: #d4af37;
    margin-bottom: 4px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Result Actions */
.result-actions {
    padding: 20px 25px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    position: relative;
    z-index: 2;
    min-height: 60px;
}

.view-fragrance-btn {
    flex: 1;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.8) 0%,
        rgba(212, 175, 55, 0.6) 100%
    );
    border: 2px solid rgba(212, 175, 55, 1);
    color: #1a1a1a;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.view-fragrance-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.6s ease;
}

.view-fragrance-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 1) 0%,
        rgba(212, 175, 55, 0.8) 100%
    );
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.view-fragrance-btn:hover::before {
    left: 100%;
}

.view-fragrance-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.view-fragrance-btn:hover svg {
    transform: scale(1.02);
}

/* =====================================================================
   INGREDIENT DISCOVERY SHARE BUTTON STYLING
   ===================================================================== */
.ingredient-results-section .share-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(15px);
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    padding: 0;
    gap: 0;
    min-width: 52px;
}

.ingredient-results-section .share-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: white;
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 20px rgba(255, 255, 255, 0.1),
        0 3px 10px rgba(0, 0, 0, 0.15);
}

.ingredient-results-section .share-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    position: relative;
}

.ingredient-results-section .share-btn:hover svg {
    stroke: #60a5fa;
    transform: scale(1.02) rotate(5deg);
}

.ingredient-results-section .share-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
    );
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

.ingredient-results-section .share-btn:hover::before {
    width: 100%;
    height: 100%;
}

/* Enhanced responsiveness for result cards */
@media (max-width: 768px) {
    .result-card-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .result-header-top {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .fragrance-image-placeholder {
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }

    .fragrance-bottle-icon {
        width: 24px;
        height: 24px;
    }

    .ingredient-stats {
        gap: 10px;
    }

    .result-actions {
        flex-direction: row;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        padding: 15px 20px 20px;
    }

    .view-fragrance-btn {
        flex: 1 1 100%;
        min-width: 200px;
        margin-bottom: 8px;
    }

    .ingredient-results-section .share-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        border-radius: 50%;
        flex: 0 0 auto;
    }
}

/* Notification System */
.fragrance-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(
        135deg,
        rgba(15, 15, 25, 0.95) 0%,
        rgba(25, 25, 40, 0.95) 100%
    );
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 2px;
    padding: 0;
    min-width: 300px;
    max-width: 400px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 3000;
    opacity: 0;
    transform: translateX(100%) scale(0.9);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.fragrance-notification::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #d4af37 100%);
}

.fragrance-notification.success::before {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.fragrance-notification.error::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.fragrance-notification.info::before {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.fragrance-notification.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.fragrance-notification.fade-out {
    opacity: 0;
    transform: translateX(50%) scale(0.95);
    transition: all 0.3s ease;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    gap: 15px;
}

.notification-message {
    color: white;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
}

.notification-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s ease;
}

.notification-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.02);
}

/* Mobile notification adjustments */
@media (max-width: 768px) {
    .fragrance-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }

    .notification-content {
        padding: 12px 15px;
    }

    .notification-message {
        font-size: 13px;
    }
}

.ingredient-pills .ingredient-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    flex-shrink: 0;
    min-width: 0;
    max-width: 200px;
}

.ingredient-pills .ingredient-pill .ingredient-icon {
    font-size: 14px;
    filter: brightness(1.1);
    flex-shrink: 0;
}

.ingredient-pills .ingredient-pill .ingredient-name {
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.ingredient-pills .ingredient-pill.matched {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.4) 0%,
        rgba(212, 175, 55, 0.3) 100%
    );
    color: #d4af37;
    border-color: rgba(212, 175, 55, 0.6);
    font-weight: 600;
    box-shadow:
        0 2px 8px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ingredient-pills .ingredient-pill.matched .ingredient-icon {
    filter: brightness(1.3) drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
    animation: matchedIconGlow 2s ease-in-out infinite;
}

@keyframes matchedIconGlow {
    0%,
    100% {
        filter: brightness(1.3) drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
    }
    50% {
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
    }
}

.ingredient-pills .ingredient-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ingredient-pills .ingredient-pill.matched:hover {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.6) 0%,
        rgba(212, 175, 55, 0.5) 100%
    );
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 6px 20px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ingredient-modal-content {
        width: 98%;
        height: 95vh;
        border-radius: 4px;
    }

    .ingredient-categories {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .results-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .ingredient-modal-header {
        padding: 20px 25px 15px;
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .ingredient-modal-close {
        position: absolute;
        top: 20px;
        right: 25px;
    }

    .ingredient-search-section,
    .ingredient-results-section {
        padding: 20px;
    }

    .ingredient-categories {
        gap: 15px;
    }

    .ingredient-category {
        padding: 20px;
    }

    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .enhanced-ingredient-tag {
        padding: 8px 12px;
        font-size: 13px;
    }

    .selected-ingredients-bar {
        padding: 20px;
    }

    .enhanced-search-btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .search-action {
        flex-direction: column;
        gap: 10px;
    }

    .search-action .enhanced-search-btn {
        width: 100%;
        max-width: 280px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile text handling */
    .result-name {
        font-size: 18px;
        line-height: 1.3;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    .result-brand {
        font-size: 13px;
    }

    .result-description p {
        font-size: 13px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        max-height: 3.2em;
    }

    .ingredient-pills .ingredient-pill {
        font-size: 11px;
        padding: 5px 10px;
        max-width: 150px;
    }

    .ingredient-pills .ingredient-pill .ingredient-name {
        max-width: 100px;
    }

    .result-card-header {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        text-align: center;
        min-height: auto;
    }

    .result-header-top {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .result-badges {
        flex-direction: row;
        gap: 6px;
        align-items: center;
    }

    .result-match-badge {
        order: -1;
        margin-bottom: 5px;
    }
}

@media (max-width: 480px) {
    .ingredient-modal-content {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        max-width: none;
        max-height: none;
    }

    .ingredient-modal-header {
        padding: 15px 20px;
    }

    .ingredient-modal-title h2 {
        font-size: 22px;
    }

    .ingredient-search-section,
    .ingredient-results-section {
        padding: 15px;
    }

    .search-input-wrapper {
        max-width: none;
    }

    #enhancedIngredientSearch {
        padding: 15px 20px 15px 45px;
        font-size: 14px;
    }

    .ingredient-category {
        padding: 15px;
    }

    .category-tags {
        gap: 8px;
    }

    .enhanced-ingredient-tag {
        padding: 6px 10px;
        font-size: 12px;
    }

    .selected-ingredients-bar {
        padding: 15px;
    }

    .search-action {
        gap: 8px;
    }

    .search-action .enhanced-search-btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    /* Extra small screen text handling */
    .result-name {
        font-size: 16px;
        line-height: 1.4;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    .result-brand {
        font-size: 12px;
    }

    .result-description p {
        font-size: 12px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        max-height: 2.8em;
    }

    .ingredient-pills {
        max-height: 60px;
    }

    .ingredient-pills .ingredient-pill {
        font-size: 10px;
        padding: 4px 8px;
        max-width: 120px;
    }

    .ingredient-pills .ingredient-pill .ingredient-name {
        max-width: 80px;
    }

    .result-card {
        min-height: 350px;
    }

    .result-card-header {
        padding: 20px 15px;
        min-height: auto;
    }

    .fragrance-image-placeholder {
        width: 60px;
        height: 60px;
    }

    .fragrance-bottle-icon {
        width: 24px;
        height: 24px;
    }

    .result-badges {
        gap: 4px;
    }

    .result-match-badge {
        padding: 6px 12px;
        font-size: 10px;
    }
}


/* Quality Selector Theme Overrides */
.haltane-section-container .quality-badge:hover {
    border-color: rgba(74, 59, 50, 0.3) !important;
    background: rgba(74, 59, 50, 0.05) !important;
}

.haltane-section-container .quality-option input[type="radio"]:checked + .quality-label .quality-badge {
    border-color: rgba(74, 59, 50, 0.5) !important;
    background: rgba(74, 59, 50, 0.08) !important;
    box-shadow: none !important; /* Removed glow */
}

.haltane-section-container .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-badge {
    border-color: rgba(107, 91, 78, 0.5) !important;
    background: rgba(107, 91, 78, 0.08) !important;
    box-shadow: none !important; /* Removed glow */
}

.haltane-section-container .quality-option input[type="radio"]:checked + .quality-label .quality-name,
.haltane-section-container .quality-option input[type="radio"]:checked + .quality-label .quality-description {
    color: #4A3B32 !important;
}

.haltane-section-container .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-name,
.haltane-section-container .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-description {
    color: #6B5B4E !important;
}

.haltane-section-container .quality-option input[type="radio"]:checked + .quality-label .quality-radio {
    border-color: #4A3B32 !important;
}

.haltane-section-container .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-radio {
    border-color: #6B5B4E !important;
}

.haltane-section-container .quality-radio::after {
    background: #4A3B32 !important;
}

.haltane-section-container .quality-option[data-quality="top"] .quality-radio::after {
    background: #6B5B4E !important;
}


/* Quality Selector Theme Overrides */
.pegasus-section .quality-badge:hover {
    border-color: rgba(139, 0, 0, 0.3) !important;
    background: rgba(139, 0, 0, 0.05) !important;
}

.pegasus-section .quality-option input[type="radio"]:checked + .quality-label .quality-badge {
    border-color: rgba(139, 0, 0, 0.5) !important;
    background: rgba(139, 0, 0, 0.08) !important;
    box-shadow: none !important; /* Removed glow */
}

.pegasus-section .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-badge {
    border-color: rgba(165, 42, 42, 0.5) !important;
    background: rgba(165, 42, 42, 0.08) !important;
    box-shadow: none !important; /* Removed glow */
}

.pegasus-section .quality-option input[type="radio"]:checked + .quality-label .quality-name,
.pegasus-section .quality-option input[type="radio"]:checked + .quality-label .quality-description {
    color: #8B0000 !important;
}

.pegasus-section .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-name,
.pegasus-section .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-description {
    color: #A52A2A !important;
}

.pegasus-section .quality-option input[type="radio"]:checked + .quality-label .quality-radio {
    border-color: #8B0000 !important;
}

.pegasus-section .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-radio {
    border-color: #A52A2A !important;
}

.pegasus-section .quality-radio::after {
    background: #8B0000 !important;
}

.pegasus-section .quality-option[data-quality="top"] .quality-radio::after {
    background: #A52A2A !important;
}


/* Additional Quality Selector Overrides (Ornaments & Glow) */
.haltane-section-container .quality-option input[type="radio"]:checked + .quality-label .quality-ornament {
    border-color: #4A3B32 !important;
    box-shadow: none !important;
}

.haltane-section-container .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-ornament {
    border-color: #6B5B4E !important;
    box-shadow: none !important;
}

.haltane-section-container .quality-glow {
    display: none !important;
}


/* Additional Quality Selector Overrides (Ornaments & Glow) */
.pegasus-section .quality-option input[type="radio"]:checked + .quality-label .quality-ornament {
    border-color: #8B0000 !important;
    box-shadow: none !important;
}

.pegasus-section .quality-option[data-quality="top"] input[type="radio"]:checked + .quality-label .quality-ornament {
    border-color: #A52A2A !important;
    box-shadow: none !important;
}

.pegasus-section .quality-glow {
    display: none !important;
}


/* Unselected State Theme Overrides */
.haltane-section-container .quality-badge {
    border-color: rgba(74, 59, 50, 0.15) !important;
    background: rgba(74, 59, 50, 0.02) !important;
}

.haltane-section-container .quality-option[data-quality="top"] .quality-badge {
    border-color: rgba(107, 91, 78, 0.15) !important;
    background: rgba(107, 91, 78, 0.02) !important;
}

.haltane-section-container .quality-ornament {
    border-color: rgba(74, 59, 50, 0.3) !important;
}

.haltane-section-container .quality-option[data-quality="top"] .quality-ornament {
    border-color: rgba(107, 91, 78, 0.3) !important;
}


/* Unselected State Theme Overrides */
.pegasus-section .quality-badge {
    border-color: rgba(139, 0, 0, 0.15) !important;
    background: rgba(139, 0, 0, 0.02) !important;
}

.pegasus-section .quality-option[data-quality="top"] .quality-badge {
    border-color: rgba(165, 42, 42, 0.15) !important;
    background: rgba(165, 42, 42, 0.02) !important;
}

.pegasus-section .quality-ornament {
    border-color: rgba(139, 0, 0, 0.3) !important;
}

.pegasus-section .quality-option[data-quality="top"] .quality-ornament {
    border-color: rgba(165, 42, 42, 0.3) !important;
}

/* Remaining database fragrances section */
.database-fragrances-section {
    min-height: auto;
    padding: 80px 0 100px;
    background: rgba(8, 8, 8, 0.96);
}

.database-fragrances-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 40px;
}

.database-fragrances-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.database-fragrances-title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 243, 240, 0.92);
}

.database-fragrances-subtitle {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(201, 169, 78, 0.82);
}

.database-fragrance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.database-fragrance-card {
    border: 1px solid rgba(201, 169, 78, 0.18);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 14px;
}

.database-fragrance-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(245, 243, 240, 0.95);
    line-height: 1.35;
}

.database-fragrance-brand {
    margin: 8px 0 0;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: rgba(201, 169, 78, 0.88);
}

.database-fragrance-family {
    margin: 6px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 768px) {
    .database-fragrances-section {
        padding: 56px 0 72px;
    }

    .database-fragrances-container {
        padding: 0 18px;
    }

    .database-fragrance-grid {
        grid-template-columns: 1fr;
    }
}