/*
 * Kajireh Cosmetic & Hygienic - Final Frontend Design Styles
 * 
 * This stylesheet contains all the modern, responsive CSS for the Kajireh website.
 * Features include:
 * 
 * - Sephora-like navigation with mega-menu dropdowns
 * - Sophisticated hover effects (shimmer, growing underline, ripple, elevation)
 * - Responsive grid layouts (6 products per row on large screens)
 * - Modern glass morphism effects and animations
 * - Purple/pink color theme throughout
 * - Mobile-first responsive design
 * - Multi-language support (English/Persian RTL)
 * - Brand page styling with product grids
 * - Admin panel styling
 * 
 * Key Design Elements:
 * - Mega-menu dropdowns for Brands and Products navigation
 * - Product cards matching home page measurements
 * - Automatic pagination for unlimited products
 * - Consistent branding and color scheme
 * - Modern animations and transitions
 * 
 * Version: Final Frontend Design
 * Author: Kajireh Development Team
 * Date: October 2025
 */

/* FOUC prevention removed - was causing flickering */

/* Modern CSS Variables for Enhanced Design */
:root {
    /* Enhanced Color Palette */
    --sephora-black: #000000;
    --sephora-white: #ffffff;
    --sephora-lavender: #E8DFF0;
    --sephora-pink: #F8E8F0;
    --sephora-red: #E0002B;
    --sephora-gold: #FFD700;
    --sephora-gray: #666666;
    --sephora-light-gray: #f5f5f5;
    --sephora-border: #e0e0e0;
    
    /* Modern Gradients */
    --gradient-primary: linear-gradient(135deg, #E8DFF0 0%, #F8E8F0 100%);
    --gradient-hero: linear-gradient(135deg, #6f42c1 0%, #E8DFF0 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    
    /* Enhanced Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --shadow-card: 0 4px 20px rgba(0,0,0,0.1);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.2);
    
    /* Modern Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Legacy variables for compatibility */
    --primary-color: var(--sephora-black);
    --secondary-color: var(--sephora-red);
    --accent-color: var(--sephora-gold);
    --dark-color: var(--sephora-black);
    --light-color: var(--sephora-white);
    --text-color: var(--sephora-black);
    --border-color: var(--sephora-border);
    --hover-bg: var(--sephora-light-gray);
}

/* RTL Support for Persian Language */
[dir="rtl"] {
    text-align: right;
}

/* Removed conflicting RTL navbar rule - now handled by specific html[dir="rtl"] rules below */

[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}

[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .sephora-header-icons {
    flex-direction: row-reverse;
}

[dir="rtl"] .language-switcher {
    flex-direction: row-reverse;
}

[dir="rtl"] .text-md-end {
    text-align: right !important;
}

/* Language Switcher */
.language-switcher {
    display: flex;
    gap: 0.25rem;
}

.language-switcher .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}


/* Password Toggle Button */
.password-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: none !important;
    background: none !important;
    color: #6c757d !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Specific fix for admin change password new password field */
.password-input-wrapper:has(#new_password) .password-toggle-btn {
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
}

/* Additional aggressive fix for new password field */
#new_password + .password-toggle-btn,
.password-input-wrapper:has(#new_password) .password-toggle-btn {
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    right: 8px !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure wrapper for new password field is properly positioned */
.password-input-wrapper:has(#new_password) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    isolation: isolate !important;
    contain: layout !important;
}

/* Adjust positioning for registration page */
.register .password-toggle-btn {
    transform: translateY(-50%) !important;
}

.password-toggle-btn:hover {
    color: #007bff !important;
    background: none !important;
    border: none !important;
}

.password-toggle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.password-toggle-btn i {
    font-size: 14px;
}

/* Ensure password inputs have proper padding for toggle button */
input[type="password"] {
    padding-right: 45px !important;
    position: relative;
}

/* Ensure toggle button stays in correct position regardless of strength meter */
.password-toggle-btn {
    z-index: 999 !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
}

/* RTL Support for password toggle */
[dir="rtl"] .password-toggle-btn {
    right: auto !important;
    left: 10px !important;
}

[dir="rtl"] input[type="password"] {
    padding-right: 12px !important;
    padding-left: 45px !important;
}

/* Search Input with Icon Inside */
.search-form {
    width: 100%;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Default RTL positioning (Persian) - icon on right */
.search-input {
    width: 100% !important;
    padding-right: 45px !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 38px;
}

.search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* English LTR layout - icon on left */
[dir="ltr"] .search-input {
    padding-right: 12px !important;
    padding-left: 45px !important;
}

[dir="ltr"] .search-btn {
    right: auto;
    left: 8px;
}

.search-btn:hover {
    color: #007bff;
}

.search-btn:focus {
    outline: none;
    color: #007bff;
}

.search-btn i {
    font-size: 14px;
}

/* Mobile search adjustments */
.sephora-search-mobile .search-input {
    height: 32px;
    font-size: 14px;
}

.sephora-search-mobile .search-btn {
    right: 6px;
    width: 20px;
    height: 20px;
}

/* Mobile English LTR layout - icon on left */
[dir="ltr"] .sephora-search-mobile .search-input {
    padding-right: 12px !important;
    padding-left: 35px !important;
}

[dir="ltr"] .sephora-search-mobile .search-btn {
    right: auto;
    left: 6px;
}

.sephora-search-mobile .search-btn i {
    font-size: 12px;
}

:root {
    /* Sephora Color Palette from Images */
    --sephora-black: #000000;
    --sephora-white: #ffffff;
    --sephora-lavender: #E8DFF0;
    --sephora-pink: #F8E8F0;
    --sephora-red: #E0002B;
    --sephora-gold: #FFD700;
    --sephora-gray: #666666;
    --sephora-light-gray: #f5f5f5;
    --sephora-border: #e0e0e0;
    
    /* Legacy variables for compatibility */
    --primary-color: var(--sephora-black);
    --secondary-color: var(--sephora-red);
    --accent-color: var(--sephora-gold);
    --dark-color: var(--sephora-black);
    --light-color: var(--sephora-white);
    --text-color: var(--sephora-black);
    --border-color: var(--sephora-border);
    --hover-bg: var(--sephora-light-gray);
}

/* Global Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    background: var(--sephora-white);
}

/* Modern Product Cards */
/* REMOVED: Old product-card styles - Replaced by universal product card design below */

/* Sephora-Style Quicklook Overlay */
.product-image-container {
    position: relative !important;
    overflow: hidden !important;
}

/* Legacy product-new-label - matches universal badge styling */
.product-new-label {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    background: #86efac !important; /* Light green */
    color: #166534 !important; /* Dark green text */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 25px !important; /* Pill shape */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    border: none !important;
    display: inline-block !important;
}

/* ===== UNIVERSAL PRODUCT BADGES ===== */
/* These styles apply to ALL product badges across the entire site */

/* Coming Soon Badge - Yellow */
.product-card .badge.bg-warning.text-dark,
.product-card .badge-coming-soon,
.badge-coming-soon {
    background: #ffc107 !important; /* Yellow */
    color: #212529 !important; /* Dark text */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 25px !important; /* Pill shape */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    border: none !important;
}

/* New Arrival Badge - Light Green */
.product-card .badge.badge-new-arrival,
.badge-new-arrival,
.badge.badge-new-arrival,
span.badge.badge-new-arrival {
    background: #86efac !important; /* Light green */
    color: #166534 !important; /* Dark green text */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 25px !important; /* Pill shape */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    border: none !important;
}

/* Featured Badge - Blue */
.product-card .badge.bg-primary,
.product-card .badge-featured,
.badge-featured {
    background: #0d6efd !important; /* Blue */
    color: #ffffff !important; /* White text */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 25px !important; /* Pill shape */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    border: none !important;
}

[dir="rtl"] .product-new-label {
    right: auto !important;
    left: 0.5rem !important;
}

/* ===== UNIVERSAL PRODUCT CARD DESIGN (Based on Products Menu) ===== */
/* This design applies to ALL product cards across the entire site */
.product-card {
    border: 1px solid rgba(229,231,235,0.8) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 320px !important;
}

.product-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 1 !important;
}

.product-card:hover::before {
    opacity: 0 !important;
}

.product-card:hover {
    /* DISABLED: transform to prevent flickering */
    box-shadow: 0 20px 60px rgba(0,0,0,0.1) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

.product-card .product-image-container {
    min-height: 220px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.product-card .product-image-container img {
    width: auto !important;
    max-width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
    padding: 10px !important;
}

.product-card .card-body {
    padding: 1.5rem !important;
    background: rgba(255,255,255,0.98) !important;
    border-radius: 0 0 20px 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.product-card .card-title {
    color: #2d3748 !important;
    font-weight: 400 !important; /* Sephora-style: regular weight */
    font-size: 0.875rem !important; /* Sephora-style: 14px for product name */
    margin-bottom: 0.5rem !important;
    transition: color 0.3s ease !important;
}

.product-card:hover .card-title {
    color: #6f42c1 !important;
}

.product-card .text-muted i,
.product-card .small.text-muted i {
    color: #9333ea !important;
}

/* Universal brand name section styling - matches products menu design */
.product-card .card-body .text-muted.small,
.products-page .product-card .card-body .text-muted.small,
.products-page .product-card .small.text-muted {
    background: #f8f9fa !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important; /* Sephora-style: 12px for brand name */
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    display: inline-block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-left: none !important; /* Remove vertical line */
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.quicklook-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0.3) 100%) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 1.5rem 0.65rem !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.product-card:hover .quicklook-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

.featured-products-wrapper,
.coming-soon-wrapper {
    position: relative !important;
    padding: 0 50px !important;
}

.featured-products-track,
.coming-soon-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 110px) / 4) !important;
    gap: 1.5rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 1rem !important;
}

.featured-products-track::-webkit-scrollbar,
.coming-soon-track::-webkit-scrollbar {
    display: none !important;
}

.featured-product-slide,
.coming-soon-slide {
    scroll-snap-align: start !important;
    display: flex !important;
}

.featured-product-slide .product-card,
.coming-soon-slide .product-card {
    flex: 1 !important;
}

.product-carousel-nav.featured-prev,
.product-carousel-nav.featured-next,
.product-carousel-nav.coming-prev,
.product-carousel-nav.coming-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
}

.product-carousel-nav.featured-prev,
.product-carousel-nav.featured-next,
.product-carousel-nav.coming-prev,
.product-carousel-nav.coming-next {
    display: none !important;
}

.product-carousel-nav.featured-prev.visible,
.product-carousel-nav.featured-next.visible,
.product-carousel-nav.coming-prev.visible,
.product-carousel-nav.coming-next.visible {
    display: inline-flex !important;
}

.product-carousel-nav.featured-prev,
.product-carousel-nav.coming-prev {
    left: 20px !important;
}

.product-carousel-nav.featured-next,
.product-carousel-nav.coming-next {
    right: 20px !important;
}

@media (max-width: 1199px) {
    .featured-products-track,
    .coming-soon-track {
        grid-auto-columns: calc((100% - 110px) / 3) !important;
    }
}

@media (max-width: 991px) {
    .featured-products-track,
    .coming-soon-track {
        grid-auto-columns: calc((100% - 110px) / 2) !important;
    }
}

@media (max-width: 575px) {
    .featured-products-track,
    .coming-soon-track {
        grid-auto-columns: calc(100% - 110px) !important;
    }
}

.product-card .badge.bg-primary,
.product-card .badge.bg-success {
    display: none !important;
}

.btn-quicklook {
    background: #f6f6f6 !important;
    color: #4b5563 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 0.75rem 1rem !important;
    width: calc(100% - 3rem) !important;
    max-width: 320px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-transform: none !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
    border: 2px solid rgba(75,85,99,0.2) !important;
    letter-spacing: 0.01em !important;
    pointer-events: auto !important;
}

.btn-quicklook:hover {
    background: #ededed !important;
    color: #374151 !important;
    border-color: rgba(55,65,81,0.3) !important;
    transform: translateY(-1px) !important;
}

/* Modern Buttons */
.btn {
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
    /* DISABLED: transition to prevent flickering */
    position: relative !important;
    overflow: hidden !important;
}

/* DISABLED to prevent flickering */
/* .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 var(--transition-normal);
}

.btn:hover::before {
    left: 100%;
} */

.btn-primary {
    background: var(--gradient-hero) !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-primary:hover {
    /* DISABLED: transform to prevent flickering */
    box-shadow: var(--shadow-lg) !important;
}

/* Email buttons - very light purple */
.btn-outline-primary {
    border: 2px solid #e9d5ff !important;
    color: #9333ea !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: #e9d5ff !important;
    color: #9333ea !important;
    border-color: #d8b4fe !important;
    /* DISABLED: transform to prevent flickering */
}

/* Modern Forms */
.form-control {
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--sephora-border) !important;
    padding: var(--spacing-md) !important;
    /* DISABLED: transition to prevent flickering */
    background: var(--sephora-white) !important;
}

.form-control:focus {
    border-color: var(--sephora-black) !important;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.1) !important;
    /* DISABLED: transform to prevent flickering */
}

.form-label {
    font-weight: 600 !important;
    color: var(--sephora-black) !important;
    margin-bottom: var(--spacing-sm) !important;
}

/* Modern Cards */
.card {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    /* DISABLED: transition to prevent flickering */
    /* background: var(--gradient-card) !important; */ /* Commented out to allow admin cards to have proper backgrounds */
}

.card:hover {
    /* DISABLED: transform to prevent flickering */
    box-shadow: var(--shadow-hover) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--sephora-border) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: var(--spacing-lg) !important;
}

.card-body {
    padding: var(--spacing-lg) !important;
}

/* Modern Carousel Navigation */
.product-carousel-nav {
    background: #4a4a4a !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sephora-white) !important;
    font-size: 1.2rem !important;
    transition: all var(--transition-normal) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 10 !important;
    opacity: 0.9 !important;
}

.product-carousel-nav:hover {
    background: #333333 !important;
    color: var(--sephora-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
    opacity: 1 !important;
}

.product-carousel-nav:active {
    transform: translateY(0px) !important;
    background: #2a2a2a !important;
}

.product-carousel-nav:focus {
    outline: 2px solid var(--sephora-red) !important;
    outline-offset: 2px !important;
}

/* Modern Loading States */
.loading {
    position: relative !important;
    overflow: hidden !important;
}

/* DISABLED to prevent flickering */
/* .loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { left: -100%; }
    100% { left: 100%; }
} */

/* Modern Animations - DISABLED to prevent flickering */
/* @keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.6s ease-out;
} */

/* Mobile Performance Optimizations */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

a, button {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Modern Mobile Optimizations */
@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 2rem !important;
    }
    
    .hero-banner .lead {
        font-size: 1.1rem !important;
    }
    
    .hero-banner {
        min-height: 50vh !important;
    }
    
    .product-card {
        margin-bottom: var(--spacing-lg) !important;
    }
    
    .product-carousel-nav {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    h2.text-center {
        font-size: 2rem !important;
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    .hero-banner h1 {
        font-size: 2rem !important;
    }
    
    .hero-banner .lead {
        font-size: 1rem !important;
    }
    
    .hero-banner {
        min-height: 40vh !important;
    }
    
    .product-card .card-body {
        padding: var(--spacing-md) !important;
    }
    
    .product-card .card-title {
        font-size: 0.9rem !important;
    }
    
    .product-card .card-text {
        font-size: 0.8rem !important;
    }
    
    /* Enhanced mobile touch targets */
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
    }
    
    .product-card {
        margin-bottom: var(--spacing-lg) !important;
        touch-action: manipulation !important;
    }
    
    .product-card:active {
        transform: scale(0.98) !important;
    }
    
    /* Mobile-specific animations */
    .product-card {
        transition: all 0.2s ease !important;
    }
    
    /* Improved mobile navigation */
    .sephora-header {
        padding: var(--spacing-sm) 0 !important;
    }
    
    .sephora-main-header {
        padding: var(--spacing-sm) 0 !important;
    }
    
    /* Mobile form improvements */

/* Password Toggle Button Styling - Original Position */
.password-toggle-btn {
    transition: all 0.2s ease;
}

.password-toggle-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Mobile-specific password toggle improvements */
@media (max-width: 576px) {
    .password-toggle-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    .password-toggle-btn i {
        font-size: 1rem !important;
    }
}
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: var(--spacing-lg) !important;
    }
    
    /* Mobile carousel improvements - Show arrows on mobile */
    .product-carousel-nav {
        display: flex !important; /* Show on mobile */
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        opacity: 0.8 !important;
    }
    
    /* Mobile-specific spacing */
    .container {
        padding-left: var(--spacing-md) !important;
        padding-right: var(--spacing-md) !important;
    }
    
    section.py-5 {
        padding: var(--spacing-xl) 0 !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover {
        transform: none !important;
    }
    
    .product-card:active {
        transform: scale(0.98) !important;
    }
    
    .btn:hover {
        transform: none !important;
    }
    
    .btn:active {
        transform: scale(0.98) !important;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-card .card-img-top {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Performance Optimizations */
.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .product-card:hover {
        transform: none !important;
    }
    
    .btn:hover {
        transform: none !important;
    }
}

/* Print optimizations */
@media print {
    .sephora-header,
    .product-carousel-nav,
    .btn {
        display: none !important;
    }
    
    .product-card {
        break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
}

/* Focus indicators for accessibility */
.btn:focus,
.form-control:focus,
.product-card:focus {
    outline: 2px solid var(--sephora-red) !important;
    outline-offset: 2px !important;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--sephora-black);
    color: var(--sephora-white);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* DISABLED to prevent flickering */
/* @keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
} */

/* About Page Enhancements */
.about-hero {
    background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 50%, #e91e63 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 40vh !important;
    display: flex !important;
    align-items: center !important;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 20, 140, 0.9) 0%, rgba(123, 31, 162, 0.8) 50%, rgba(233, 30, 99, 0.7) 100%);
    z-index: 1;
}

/* RTL - Flip About Us hero gradient (dark on right, light on left) */
html[dir="rtl"] .about-hero::before {
    background: linear-gradient(-45deg, rgba(74, 20, 140, 0.9) 0%, rgba(123, 31, 162, 0.8) 50%, rgba(233, 30, 99, 0.7) 100%);
}

.about-hero .container {
    position: relative;
    z-index: 2;
}

.about-hero-content h1 {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: var(--spacing-lg) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    color: #fce4ec !important;
}

.about-hero-content h2 {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin-bottom: var(--spacing-lg) !important;
    color: #f8bbd9 !important;
}

.about-hero-content p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin-bottom: var(--spacing-xl) !important;
    color: #f8bbd9 !important;
}

.about-hero-content .btn-light {
    background: #fce4ec !important;
    border: 2px solid #f8bbd9 !important;
    color: #4a148c !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.about-hero-content .btn-light:hover {
    background: #f8bbd9 !important;
    border-color: #e91e63 !important;
    color: #4a148c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(233, 30, 99, 0.3) !important;
}

.about-hero-content .btn-outline-light {
    background: transparent !important;
    border: 2px solid #fce4ec !important;
    color: #fce4ec !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.about-hero-content .btn-outline-light:hover {
    background: #fce4ec !important;
    border-color: #f8bbd9 !important;
    color: #4a148c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(252, 228, 236, 0.3) !important;
}

.about-hero-image img {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    transition: transform var(--transition-slow) !important;
}

.about-hero-image img:hover {
    transform: scale(1.02) !important;
}

/* Story Cards - Simple and Modern */
.story-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.story-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Add subtle top border accent */
.story-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6f42c1 0%, #e9d5ff 100%);
}

.story-image img {
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f5f5f5 !important;
}

.story-image img:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

.story-content h3 {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    font-size: 2rem !important;
}

.story-text {
    color: #4a4a4a !important;
    line-height: 1.8 !important;
    font-size: 1.05rem !important;
    font-weight: 300 !important;
}

/* Team Cards */
.team-card {
    text-align: center !important;
    padding: var(--spacing-xl) !important;
    background: var(--gradient-card) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    /* DISABLED: transition to prevent flickering */
    height: 100% !important;
}

.team-card:hover {
    /* DISABLED: hover transform to prevent flickering */
    box-shadow: var(--shadow-hover) !important;
}

.team-image {
    margin-bottom: var(--spacing-lg) !important;
}

.team-image img,
.team-avatar {
    /* DISABLED: transition to prevent flickering */
}

.team-card:hover .team-image img,
.team-card:hover .team-avatar {
    /* DISABLED: hover transform to prevent flickering */
}

.team-content h4 {
    color: var(--sephora-black) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-sm) !important;
}

.team-content p {
    color: var(--sephora-gray) !important;
    line-height: 1.6 !important;
}

.team-social .btn {
    border-radius: var(--radius-full) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    font-weight: 500 !important;
    /* DISABLED: transition to prevent flickering */
}

.team-social .btn:hover {
    /* DISABLED: hover transform to prevent flickering */
}

/* Value Cards */
.value-card {
    text-align: center !important;
    padding: var(--spacing-xxl) var(--spacing-lg) !important;
    background: var(--gradient-card) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    /* DISABLED: transition to prevent flickering */
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.05) 0%, rgba(232, 223, 240, 0.05) 100%);
    opacity: 0;
    /* DISABLED: transition to prevent flickering */
}

.value-card:hover::before {
    opacity: 1;
}

.value-card:hover {
    /* DISABLED: hover transform to prevent flickering */
    box-shadow: var(--shadow-hover) !important;
}

.value-icon {
    margin-bottom: var(--spacing-lg) !important;
    /* DISABLED: transition to prevent flickering */
}

/* DISABLED to prevent flickering */
/* .value-card:hover .value-icon {
    transform: scale(1.1) !important;
} */

.value-content h5 {
    color: var(--sephora-black) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-md) !important;
}

.value-content p {
    color: var(--sephora-gray) !important;
    line-height: 1.6 !important;
}

/* CTA Section */
.cta-section {
    background: var(--gradient-primary) !important;
    border-radius: var(--radius-xl) !important;
    margin: var(--spacing-xxl) 0 !important;
}

.cta-content h3 {
    color: var(--sephora-black) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-lg) !important;
}

.cta-content p {
    color: var(--sephora-gray) !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

.cta-buttons .btn {
    border-radius: var(--radius-full) !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    /* DISABLED: transition to prevent flickering */
}

.cta-buttons .btn:hover {
    /* DISABLED: hover transform to prevent flickering */
    box-shadow: var(--shadow-lg) !important;
}

/* Carousel Arrow Hover Effects */
.product-carousel-nav:hover {
    transform: translateY(-50%) translateY(-2px) !important;
}

.product-carousel-nav:active {
    transform: translateY(-50%) translateY(0px) !important;
}

/* Force positioning for carousel arrows */
.product-carousel-nav[id*="Prev"] {
    left: -60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    z-index: 10 !important;
}

.product-carousel-nav[id*="Next"] {
    right: -60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    z-index: 10 !important;
}

/* Special styling for 2 Nico brand */
.brand-name-2nico {
    font-size: 1.1em;
    font-weight: 600;
}

.brand-name-2nico .brand-number {
    font-size: 0.7em;
    font-weight: 400;
    vertical-align: super;
}

.brand-name-2nico .brand-text {
    font-weight: 700;
    font-size: 1.1em;
}

/* Mobile Responsiveness for About Page */
@media (max-width: 768px) {
    .about-hero-content h1 {
        font-size: 2.5rem !important;
    }
    
    .about-hero-content h2 {
        font-size: 1.3rem !important;
    }
    
    .about-hero {
        min-height: 35vh !important;
    }
    
    .story-card {
        padding: 2rem !important;
    }
    
    .team-card {
        padding: var(--spacing-lg) !important;
    }
    
    .value-card {
        padding: var(--spacing-lg) !important;
    }
    
    .cta-content h3 {
        font-size: 2rem !important;
    }
}

@media (max-width: 576px) {
    .about-hero-content h1 {
        font-size: 2rem !important;
    }
    
    .about-hero-content h2 {
        font-size: 1.1rem !important;
    }
    
    .about-hero {
        min-height: 30vh !important;
    }
    
    .story-card {
        padding: 1.5rem !important;
    }
    
    .team-card {
        padding: var(--spacing-md) !important;
    }
    
    .value-card {
        padding: var(--spacing-md) !important;
    }
    
    .cta-buttons .btn {
        display: block !important;
        width: 100% !important;
        margin-bottom: var(--spacing-md) !important;
    }
}

/* Modern Hero Banner */
.hero-banner {
    background: var(--gradient-hero) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.9) 0%, rgba(232, 223, 240, 0.8) 100%);
    z-index: 1;
}

.hero-banner .container {
    position: relative;
    z-index: 2;
}

.hero-banner h1 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: var(--spacing-lg) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    color: #fce4ec !important;
}

.hero-banner .lead {
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin-bottom: var(--spacing-xl) !important;
    opacity: 0.95 !important;
    color: #f8bbd9 !important;
}

.hero-banner .btn {
    font-size: 1.1rem !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    border: 2px solid #fce4ec !important;
    background: transparent !important;
    color: #fce4ec !important;
    /* DISABLED: transition to prevent flickering */
}

.hero-banner .btn:hover {
    background: #fce4ec !important;
    color: #4a148c !important;
    /* DISABLED: hover transform to prevent flickering */
    box-shadow: var(--shadow-lg) !important;
}

.hero-banner img,
.hero-banner-image {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    position: relative;
    z-index: 1;
    /* DISABLED: transition to prevent flickering */
}

.hero-banner img:hover {
    /* DISABLED: hover transform to prevent flickering */
}

/* Modern Section Styling */
section {
    position: relative !important;
}

section.py-5 {
    padding: var(--spacing-xxl) 0 !important;
}

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

/* Modern Section Headers */
h2.text-center {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-xxl) !important;
    position: relative !important;
}

h2.text-center::after {
    content: '';
    position: absolute;
    bottom: -var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-hero);
    border-radius: var(--radius-full);
}

/* Sephora Multi-Layered Header Structure */
.sephora-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--sephora-white);
    box-shadow: var(--shadow-md) !important;
    /* DISABLED: transition to prevent flickering */
}

/* Top Promotional Banner - Lavender */
.sephora-promo-banner {
    background-color: var(--sephora-lavender);
    color: var(--sephora-black);
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.sephora-promo-banner .promo-code {
    color: var(--sephora-red);
    font-weight: bold;
}

/* Main Header - White */
.sephora-main-header {
    background-color: var(--sephora-white);
    border-bottom: 1px solid var(--sephora-border);
    padding: 15px 0;
}

.sephora-main-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sephora-logo {
    font-size: 28px;
    font-weight: bold;
    color: var(--sephora-black);
    text-decoration: none;
    letter-spacing: 1px;
    /* DISABLED: transition to prevent flickering */
}

.sephora-logo:hover {
    transform: scale(1.05);
    text-decoration: none;
}


.sephora-search {
    flex: 1;
    max-width: 500px;
    margin: 0 40px;
}

.sephora-search input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid var(--sephora-border);
    border-radius: 25px;
    font-size: 14px;
    background: var(--sephora-white);
}

.sephora-search input::placeholder {
    color: var(--sephora-gray);
}

.sephora-header-icons {
    display: flex;
    align-items: center;
    gap: 25px;
}

.sephora-header-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--sephora-black);
    font-size: 12px;
    transition: color 0.3s ease;
}

.sephora-header-icon:hover {
    color: var(--sephora-red);
}

.sephora-header-icon i {
    font-size: 20px;
    margin-bottom: 4px;
}

/* Primary Navigation - Black */
.sephora-nav {
    background-color: var(--sephora-black);
    color: var(--sephora-white);
    padding: 0;
}

.sephora-nav .container {
    display: flex;
    align-items: center;
    position: relative;
}

.sephora-nav-item {
    color: var(--sephora-black);
    text-decoration: none;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sephora-nav-item.dropdown-toggle {
    position: relative;
}

.sephora-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--sephora-black);
}

/* Hide Bootstrap's default dropdown arrow, keep only FontAwesome arrow */
.sephora-nav-item.dropdown-toggle::after {
    display: none !important;
}

/* Sephora-style mega menu dropdown */
.sephora-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 600px;
    width: auto;
    background-color: var(--sephora-white);
    border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border-radius: 0;
    padding: 40px 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.sephora-nav .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mega menu content container */
.sephora-mega-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding: 0 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Mega menu columns */
.sephora-mega-column {
    display: flex;
    flex-direction: column;
}

.sephora-mega-column h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--sephora-black);
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--sephora-red);
    padding-bottom: 8px;
    display: inline-block;
}

.sephora-mega-column .mega-link {
    color: var(--sephora-gray);
    text-decoration: none;
    padding: 8px 0;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
    display: block;
}

.sephora-mega-column .mega-link:hover {
    color: var(--sephora-red);
    padding-left: 12px;
    background: linear-gradient(90deg, rgba(224,0,43,0.1) 0%, transparent 100%);
}

.sephora-mega-column .mega-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: var(--sephora-red);
    transition: width 0.2s ease;
}

.sephora-mega-column .mega-link:hover::before {
    width: 8px;
}

/* RTL dropdown positioning - only for Persian */
html[dir="rtl"] .sephora-nav .dropdown-menu {
    left: auto;
    right: 0;
}

/* LTR dropdown positioning - for English */
html[dir="ltr"] .sephora-nav .dropdown-menu {
    left: 0;
    right: auto;
}

.sephora-nav .dropdown-item {
    color: var(--sephora-gray);
    padding: 8px 0;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
    position: relative;
}

.sephora-nav .dropdown-item:hover {
    color: var(--sephora-red);
    background: linear-gradient(90deg, rgba(224,0,43,0.1) 0%, transparent 100%);
    padding-left: 12px;
}

.sephora-nav .dropdown-divider {
    border-color: var(--sephora-border);
    margin: 20px 0;
    opacity: 0.5;
}

/* RTL Support for mega menu */
html[dir="rtl"] .sephora-mega-column .mega-link:hover {
    padding-left: 0;
    padding-right: 12px;
    background: linear-gradient(270deg, rgba(224,0,43,0.1) 0%, transparent 100%);
}

html[dir="rtl"] .sephora-mega-column .mega-link::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .sephora-nav .dropdown-item:hover {
    padding-left: 0;
    padding-right: 12px;
    background: linear-gradient(270deg, rgba(224,0,43,0.1) 0%, transparent 100%);
}

/* Mobile responsiveness for mega menu */
@media (max-width: 991.98px) {
    .sephora-mega-menu {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    .sephora-nav .dropdown-menu {
        min-width: 100%;
        position: static;
        box-shadow: none;
        border: 1px solid var(--sephora-border);
        margin-top: 10px;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    
    .sephora-mega-column h6 {
        font-size: 13px;
        margin-bottom: 15px;
    }
}

/* Brands link dropdown on hover - for non-Bootstrap dropdowns */
.brands-dropdown-wrapper:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: block !important;
    pointer-events: auto !important;
}

/* Enhanced hover effects for all navigation menu items */
.sephora-nav-item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sephora-nav-item.dropdown-toggle {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sephora-nav-item::before,
.sephora-nav-item.dropdown-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(224,0,43,0.15), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.sephora-nav-item:hover::before,
.sephora-nav-item.dropdown-toggle:hover::before {
    left: 100%;
}

.sephora-nav-item::after,
.sephora-nav-item.dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sephora-red), #ff6b8a);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.sephora-nav-item:hover::after,
.sephora-nav-item.dropdown-toggle:hover::after {
    width: 80%;
}

.sephora-nav-item:hover,
.sephora-nav-item.dropdown-toggle:hover {
    background: linear-gradient(135deg, rgba(224,0,43,0.08) 0%, rgba(255,107,138,0.05) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(224,0,43,0.15);
}

/* Special glow effect on hover */
.sephora-nav-item:hover,
.sephora-nav-item.dropdown-toggle:hover {
    text-shadow: 0 0 8px rgba(224,0,43,0.3);
}

/* Add subtle animation to the text */
.sephora-nav-item,
.sephora-nav-item.dropdown-toggle {
    font-weight: 500;
    letter-spacing: 0.3px;
}

.sephora-nav-item:hover,
.sephora-nav-item.dropdown-toggle:hover {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Additional Sephora-style effects */
.sephora-nav-item,
.sephora-nav-item.dropdown-toggle {
    border-radius: 6px;
    padding: 12px 20px;
    margin: 0 4px;
}

/* Pulse animation on hover - DISABLED to prevent flickering */
/* @keyframes sephora-pulse {
    0% { box-shadow: 0 4px 12px rgba(224,0,43,0.15); }
    50% { box-shadow: 0 6px 20px rgba(224,0,43,0.25); }
    100% { box-shadow: 0 4px 12px rgba(224,0,43,0.15); }
} */

.sephora-nav-item:hover,
.sephora-nav-item.dropdown-toggle:hover {
    /* DISABLED to prevent flickering */
    /* animation: sephora-pulse 2s infinite; */
}

/* Special underline effect that grows from center */
.sephora-nav-item::after,
.sephora-nav-item.dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--sephora-red);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 1px;
}

.sephora-nav-item:hover::after,
.sephora-nav-item.dropdown-toggle:hover::after {
    width: 90%;
}

/* Ripple effect */
.sephora-nav-item,
.sephora-nav-item.dropdown-toggle {
    position: relative;
    overflow: hidden;
}

.sephora-nav-item::before,
.sephora-nav-item.dropdown-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(224,0,43,0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 0;
}

.sephora-nav-item:hover::before,
.sephora-nav-item.dropdown-toggle:hover::before {
    width: 300px;
    height: 300px;
}

/* RTL Support for hover effects */
html[dir="rtl"] .sephora-nav-item::before,
html[dir="rtl"] .sephora-nav-item.dropdown-toggle::before {
    left: -100%;
}

html[dir="rtl"] .sephora-nav-item:hover::before,
html[dir="rtl"] .sephora-nav-item.dropdown-toggle:hover::before {
    left: 100%;
}

/* Ensure z-index is proper for all elements */
.sephora-nav-item,
.sephora-nav-item.dropdown-toggle {
    z-index: 1;
}

.sephora-nav-item:hover,
.sephora-nav-item.dropdown-toggle:hover {
    z-index: 2;
}

/* Ensure dropdown stays above other content */
.sephora-nav .dropdown-menu {
    z-index: 1050;
}

/* Smooth transitions for all interactive elements */
.sephora-mega-column .mega-link,
.sephora-nav .dropdown-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sephora-nav .dropdown-divider {
    margin: 8px 0;
    border-color: var(--sephora-border);
}

.sephora-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--sephora-white);
}

.sephora-sparkle {
    color: var(--sephora-gold);
    font-size: 12px;
}

/* Secondary Banner - Light Pink */
.sephora-secondary-banner {
    background-color: var(--sephora-pink);
    color: var(--sephora-black);
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

/* Banner Links */
.promo-code {
    color: var(--sephora-red);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.promo-code:hover {
    color: var(--sephora-black);
    text-decoration: underline;
}

.banner-link {
    color: var(--sephora-black);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.banner-link:hover {
    color: var(--sephora-red);
    text-decoration: underline;
}

/* Body padding to account for fixed header */
body {
    padding-top: 180px; /* Further increased to ensure complete clearance */
}

/* Additional spacing for main content containers */
.container,
.container-fluid {
    margin-top: 0px; /* Removed extra margin */
}

/* Ensure content is not hidden behind header */
main,
.main-content {
    position: relative;
    z-index: 1;
    margin-top: 20px; /* Additional margin to ensure clearance */
}

/* Extra clearance for specific pages */
.dashboard-container,
.auth-container,
.admin-container {
    margin-top: 30px; /* Extra margin for key pages */
}

/* Admin Panel Styling */
.admin-dashboard {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
}

.admin-header {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

.admin-stats-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: none;
    overflow: hidden;
}

.admin-stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.admin-stats-card .card-body {
    padding: 2rem;
    text-align: center;
}

.admin-stats-card i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 1 !important;
    color: inherit !important;
}

.admin-stats-card h4 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: inherit !important;
    opacity: 1 !important;
}

.admin-stats-card p {
    font-size: 1.1rem;
    margin: 0;
    opacity: 1 !important;
    color: inherit !important;
}

/* Specific styling for colored admin stats cards */
.admin-stats-card.bg-success i,
.admin-stats-card.bg-success h4,
.admin-stats-card.bg-success p {
    color: white !important;
    opacity: 1 !important;
}

.admin-stats-card.bg-warning i,
.admin-stats-card.bg-warning h4,
.admin-stats-card.bg-warning p {
    color: #000 !important;
    opacity: 1 !important;
}

.admin-stats-card.bg-info i,
.admin-stats-card.bg-info h4,
.admin-stats-card.bg-info p {
    color: white !important;
    opacity: 1 !important;
}

.admin-stats-card.bg-primary i,
.admin-stats-card.bg-primary h4,
.admin-stats-card.bg-primary p {
    color: white !important;
    opacity: 1 !important;
}

.admin-stats-card.bg-danger i,
.admin-stats-card.bg-danger h4,
.admin-stats-card.bg-danger p {
    color: white !important;
    opacity: 1 !important;
}

.admin-stats-card.bg-dark i,
.admin-stats-card.bg-dark h4,
.admin-stats-card.bg-dark p {
    color: white !important;
    opacity: 1 !important;
}

.admin-stats-card.bg-secondary i,
.admin-stats-card.bg-secondary h4,
.admin-stats-card.bg-secondary p {
    color: white !important;
    opacity: 1 !important;
}

/* Override general card-text rules for admin stats cards */
.admin-stats-card .card-text {
    color: inherit !important;
    opacity: 1 !important;
    font-size: 1.1rem !important;
}

.admin-stats-card .card-title {
    color: inherit !important;
    opacity: 1 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
}

/* FORCE ADMIN STATS CARD VISIBILITY - OVERRIDE ALL OTHER RULES */
.admin-stats-card i,
.admin-stats-card .fas,
.admin-stats-card .fa {
    opacity: 1 !important;
    color: white !important;
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
}

.admin-stats-card.bg-warning i,
.admin-stats-card.bg-warning .fas,
.admin-stats-card.bg-warning .fa {
    color: #000 !important;
}

.admin-stats-card h4,
.admin-stats-card .card-title {
    opacity: 1 !important;
    color: white !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.admin-stats-card.bg-warning h4,
.admin-stats-card.bg-warning .card-title {
    color: #000 !important;
}

.admin-stats-card p,
.admin-stats-card .card-text {
    opacity: 1 !important;
    color: white !important;
    font-size: 1.1rem !important;
    margin: 0 !important;
}

.admin-stats-card.bg-warning p,
.admin-stats-card.bg-warning .card-text {
    color: #000 !important;
}

/* ULTIMATE OVERRIDE - TARGET SPECIFIC ADMIN DASHBOARD ELEMENTS */
div.admin-dashboard .admin-stats-card i,
div.admin-dashboard .admin-stats-card .fas,
div.admin-dashboard .admin-stats-card .fa {
    opacity: 1 !important;
    color: white !important;
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
    display: block !important;
    visibility: visible !important;
}

div.admin-dashboard .admin-stats-card.bg-warning i,
div.admin-dashboard .admin-stats-card.bg-warning .fas,
div.admin-dashboard .admin-stats-card.bg-warning .fa {
    color: #000 !important;
}

div.admin-dashboard .admin-stats-card h4,
div.admin-dashboard .admin-stats-card .card-title {
    opacity: 1 !important;
    color: white !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    visibility: visible !important;
}

div.admin-dashboard .admin-stats-card.bg-warning h4,
div.admin-dashboard .admin-stats-card.bg-warning .card-title {
    color: #000 !important;
}

div.admin-dashboard .admin-stats-card p,
div.admin-dashboard .admin-stats-card .card-text {
    opacity: 1 !important;
    color: white !important;
    font-size: 1.1rem !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
}

div.admin-dashboard .admin-stats-card.bg-warning p,
div.admin-dashboard .admin-stats-card.bg-warning .card-text {
    color: #000 !important;
}

/* OVERRIDE GENERAL CARD BACKGROUND FOR ADMIN STATS CARDS */
div.admin-dashboard .admin-stats-card.bg-success {
    background-color: #198754 !important;
}

div.admin-dashboard .admin-stats-card.bg-warning {
    background-color: #ffc107 !important;
}

div.admin-dashboard .admin-stats-card.bg-info {
    background-color: #0dcaf0 !important;
}

div.admin-dashboard .admin-stats-card.bg-primary {
    background-color: #0d6efd !important;
}

div.admin-dashboard .admin-stats-card.bg-danger {
    background-color: #dc3545 !important;
}

div.admin-dashboard .admin-stats-card.bg-dark {
    background-color: #212529 !important;
}

div.admin-dashboard .admin-stats-card.bg-secondary {
    background-color: #6c757d !important;
}

/* NUCLEAR OPTION - FORCE ALL ADMIN STATS CARD STYLING */
div.admin-dashboard .card.admin-stats-card {
    background-color: inherit !important;
}

div.admin-dashboard .card.admin-stats-card i,
div.admin-dashboard .card.admin-stats-card .fas,
div.admin-dashboard .card.admin-stats-card .fa {
    opacity: 1 !important;
    font-size: 2.5rem !important;
    display: block !important;
    visibility: visible !important;
}

div.admin-dashboard .card.admin-stats-card h4,
div.admin-dashboard .card.admin-stats-card .card-title {
    opacity: 1 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    display: block !important;
    visibility: visible !important;
}

div.admin-dashboard .card.admin-stats-card p,
div.admin-dashboard .card.admin-stats-card .card-text {
    opacity: 1 !important;
    font-size: 1.1rem !important;
    display: block !important;
    visibility: visible !important;
}

/* Admin Action Buttons */
.admin-action-btn {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.admin-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Admin Tables */
.admin-table {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

.admin-table .table {
    margin: 0;
}

.admin-table .table th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
    padding: 1rem;
}

.admin-table .table td {
    border: none;
    padding: 1rem;
    vertical-align: middle;
}

.admin-table .table tbody tr:hover {
    background: #f8f9fa;
}

/* Admin Forms */
.admin-form {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 2rem;
}

.admin-form .form-control,
.admin-form .form-select {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.admin-form .form-control:focus,
.admin-form .form-select:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}

/* Admin Navigation */
.admin-nav {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 1rem;
    margin-bottom: 2rem;
}

.admin-nav .nav-link {
    color: #495057;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link.active {
    background: #6f42c1;
    color: white;
}

/* Admin Login Page */
.admin-login {
    min-height: 100vh;
    background: linear-gradient(135deg, #6f42c1 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-login-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 3rem;
    width: 100%;
    max-width: 400px;
}

.admin-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.admin-login-header h2 {
    color: #6f42c1;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.admin-login-header p {
    color: #6c757d;
    margin: 0;
}

/* Specific clearance for dashboard page */
.dashboard-page {
    margin-top: 50px; /* Extra clearance for dashboard */
}

/* Dashboard header and navigation */
.dashboard-header,
.dashboard-nav {
    margin-top: 20px; /* Additional spacing for dashboard elements */
}

/* Mobile body padding adjustments */
@media (max-width: 991.98px) {
    body {
        padding-top: 150px; /* Mobile header height */
    }
}

@media (max-width: 575.98px) {
    body {
        padding-top: 130px; /* Small mobile header height */
    }
}

/* Navigation - Sephora Style */
.navbar {
    background-color: var(--light-color) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--text-color) !important;
    transition: all 0.3s ease;
    padding: 0.75rem 1rem !important;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--secondary-color) !important;
    background-color: var(--hover-bg);
}

/* Sephora-style dropdown menus - 5 Column Layout */
.sephora-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sephora-white);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-top: 3px solid var(--sephora-red);
    display: none;
    z-index: 1001;
}

.sephora-dropdown.show {
    display: block;
}

.sephora-dropdown-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.sephora-dropdown-column {
    display: flex;
    flex-direction: column;
}

.sephora-dropdown-header {
    font-weight: bold;
    font-size: 14px;
    color: var(--sephora-black);
    margin-bottom: 15px;
    text-transform: none;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sephora-dropdown-header::after {
    content: '>';
    color: var(--sephora-gray);
    font-size: 12px;
}

.sephora-dropdown-item {
    color: var(--sephora-black);
    text-decoration: none;
    padding: 8px 0;
    font-size: 14px;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.sephora-dropdown-item:hover {
    color: var(--sephora-red);
    padding-left: 10px;
}

.sephora-dropdown-subheader {
    font-weight: bold;
    font-size: 13px;
    color: var(--sephora-black);
    margin: 15px 0 8px 0;
    text-transform: none;
    letter-spacing: 0.3px;
}

.sephora-dropdown-subheader::after {
    content: '>';
    color: var(--sephora-gray);
    font-size: 10px;
    margin-left: 5px;
}

/* Legacy Bootstrap dropdown overrides */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 0;
    padding: 0;
    margin-top: 0;
    min-width: 200px;
    border-top: 3px solid var(--sephora-red);
}

.dropdown-item {
    padding: 12px 20px;
    transition: all 0.2s ease;
    color: var(--sephora-black);
    border-bottom: 1px solid var(--sephora-border);
    font-size: 14px;
}

.dropdown-item:hover {
    background-color: var(--sephora-light-gray);
    color: var(--sephora-red);
    padding-left: 30px;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-divider {
    margin: 8px 0;
    border-color: var(--sephora-border);
}

/* Hero Banner - Sephora Style */
.hero-banner {
    background: linear-gradient(135deg, var(--sephora-black) 0%, #333333 100%);
    min-height: 500px;
    position: relative;
    margin-top: -75px;
    padding-top: 0;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(224, 0, 43, 0.1) 0%, rgba(255, 215, 0, 0.1) 100%);
    pointer-events: none;
}

.hero-banner h1 {
    font-size: 2.75rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* Cards */
.card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.card-img-top {
    transition: transform 0.3s ease;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

/* Buttons - Exact Sephora Style */
.btn-primary {
    background-color: var(--sephora-black);
    border-color: var(--sephora-black);
    color: var(--sephora-white);
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 0;
    padding: 12px 24px;
    text-transform: none;
    letter-spacing: 1px;
    font-size: 14px;
}

.btn-primary:hover {
    background-color: var(--sephora-red);
    border-color: var(--sephora-red);
    color: var(--sephora-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(224, 0, 43, 0.3);
}

/* Removed duplicate .btn-outline-primary styles - now using very light purple from earlier in file */

.btn-outline-secondary {
    color: var(--sephora-black);
    border-color: var(--sephora-border);
    background-color: transparent;
    transition: all 0.3s ease;
    border-radius: 0;
    padding: 10px 20px;
    text-transform: none;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 600;
}

.btn-outline-secondary:hover {
    background-color: var(--sephora-black);
    border-color: var(--sephora-black);
    color: var(--sephora-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-outline-light {
    color: var(--sephora-white);
    border-color: var(--sephora-white);
    background-color: transparent;
    transition: all 0.3s ease;
    border-radius: 0;
    padding: 12px 24px;
    text-transform: none;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 600;
}

.btn-outline-light:hover {
    background-color: var(--sephora-white);
    border-color: var(--sephora-white);
    color: var(--sephora-black);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* Product Cards - Sephora Style */
.product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.product-card:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.product-card .card-img-top {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .card-img-top {
    transform: scale(1.05);
}

.product-card .card-body {
    padding: 1.5rem;
}

.product-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.product-card .card-text {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Filters */
.filter-sidebar .list-group-item {
    border: none;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.filter-sidebar .list-group-item:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.filter-sidebar .list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Pagination */
.pagination .page-link {
    color: var(--primary-color);
    border-color: var(--border-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination .page-link:hover {
    color: var(--accent-color);
    background-color: var(--secondary-color);
    border-color: var(--border-color);
}

/* Footer */
footer {
    background-color: var(--dark-color) !important;
    color: #6c757d !important;
}

footer h4.fw-bold.mb-3 {
    color: #6c757d !important;
    border-bottom: 2px solid #9333ea !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

footer h4,
footer h5,
footer h6,
footer p,
footer a,
footer li,
footer span,
footer div,
footer address,
footer ul,
footer ul li,
footer small,
footer i,
footer .fa,
footer .fas,
footer .fab,
footer strong,
footer b {
    color: #6c757d !important;
}

footer a {
    transition: color 0.3s ease;
    color: #6c757d !important;
}

footer a:hover {
    color: #868e96 !important;
    text-decoration: underline !important;
}

footer a:hover i,
footer a:hover .fa,
footer a:hover .fas,
footer a:hover .fab {
    color: #868e96 !important;
}

footer .text-muted,
footer .text-white {
    color: #6c757d !important;
}

footer .text-light {
    color: #6c757d !important;
}

/* Forms */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25);
}

/* Alerts */
.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Brand Cards */
.brand-card {
    transition: all 0.3s ease;
}

.brand-card:hover {
    transform: translateY(-3px);
}

/* Mobile Navigation Styles */
.navbar-toggler {
    border: none;
    padding: 4px 8px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Search Styles */
.sephora-search-mobile input {
    font-size: 14px;
    padding: 8px 12px;
}

.sephora-search-mobile .btn {
    padding: 8px 12px;
    min-width: 44px; /* Touch-friendly minimum size */
}

/* Mobile Language Switcher */
.language-switcher-mobile .btn {
    font-size: 0.75rem;
    padding: 4px 8px;
    min-width: 44px; /* Touch-friendly minimum size */
}

/* Language Switcher - Match Home Page Style on All Other Pages */
/* Apply home page language switcher styling to all pages except home page */
body:not(.home-page) .language-switcher .btn-primary {
    background: var(--gradient-hero) !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

body:not(.home-page) .language-switcher .btn-primary:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* Match home page btn-outline-primary styling (product card button style) */
body:not(.home-page) .language-switcher .btn-outline-primary {
    border-radius: 12px !important;
    padding: 0.5rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    font-size: 0.75rem !important;
}

body:not(.home-page) .language-switcher .btn-outline-primary:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* Mobile language switcher - Match home page style */
body:not(.home-page) .language-switcher-mobile .btn-primary {
    background: var(--gradient-hero) !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
}

body:not(.home-page) .language-switcher-mobile .btn-primary:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* Mobile language switcher - Match home page btn-outline-primary styling */
body:not(.home-page) .language-switcher-mobile .btn-outline-primary {
    border-radius: 12px !important;
    padding: 0.5rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

body:not(.home-page) .language-switcher-mobile .btn-outline-primary:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* Mobile Header Icons */
.sephora-header-icon {
    min-width: 44px; /* Touch-friendly minimum size */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Navigation Menu */
.navbar-collapse {
    background-color: var(--sephora-white);
    border-top: 1px solid var(--sephora-border);
    margin-top: 10px;
    padding: 15px 0;
}

/* Hide mobile navigation on desktop */
@media (min-width: 992px) {
    .navbar-collapse.d-lg-none {
        display: none !important;
    }
}

.navbar-nav .nav-link {
    padding: 12px 20px;
    font-size: 16px;
    color: var(--sephora-black) !important;
    border-bottom: 1px solid var(--sephora-light-gray);
    min-height: 44px; /* Touch-friendly minimum size */
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link:hover {
    background-color: var(--sephora-light-gray);
    color: var(--sephora-red) !important;
}

.navbar-nav .dropdown-toggle::after {
    margin-left: auto;
}

/* Mobile Dropdown Menus */
.dropdown-menu {
    border: none;
    box-shadow: none;
    background-color: var(--sephora-light-gray);
    margin-left: 20px;
    border-radius: 0;
}

.dropdown-item {
    padding: 12px 20px;
    font-size: 15px;
    color: var(--sephora-black);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    min-height: 44px; /* Touch-friendly minimum size */
    display: flex;
    align-items: center;
}

.dropdown-item:hover {
    background-color: var(--sephora-white);
    color: var(--sephora-red);
    padding-left: 30px;
}

.dropdown-divider {
    margin: 8px 0;
}

/* Touch-Friendly Button Sizes */
.btn {
    min-height: 44px; /* Touch-friendly minimum size */
    min-width: 44px;
}

.btn-sm {
    min-height: 36px;
    min-width: 36px;
}

/* Mobile Card Improvements */
.card {
    margin-bottom: 20px;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 15px;
}

.card-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.card-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Mobile Product Grid */
@media (max-width: 767.98px) {
    .row .col-lg-3 {
        margin-bottom: 20px;
    }
    
    .row .col-lg-2 {
        margin-bottom: 15px;
    }
}

/* Mobile Typography */
@media (max-width: 767.98px) {
    h1, .display-4 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
    
    .lead {
        font-size: 1rem !important;
    }
}

/* Mobile Forms */
.form-control {
    min-height: 44px; /* Touch-friendly minimum size */
    font-size: 16px; /* Prevents zoom on iOS */
}

.form-select {
    min-height: 44px;
    font-size: 16px;
}

/* Mobile Footer */
@media (max-width: 767.98px) {
    footer {
        text-align: center;
    }
    
    footer .col-md-3 {
        margin-bottom: 30px;
    }
    
    footer ul {
        padding-left: 0;
    }
    
    footer li {
        margin-bottom: 8px;
    }
}

/* RTL Mobile Support */
[dir="rtl"] .navbar-nav .nav-link {
    text-align: right;
}

[dir="rtl"] .dropdown-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .dropdown-item:hover {
    padding-right: 30px;
    padding-left: 20px;
}

[dir="rtl"] .sephora-search-mobile {
    direction: ltr; /* Keep search input LTR */
}

/* RTL Mobile Navigation */
[dir="rtl"] .navbar-toggler {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .navbar-collapse {
    text-align: right;
}

[dir="rtl"] .language-switcher {
    flex-direction: row-reverse;
}

[dir="rtl"] .language-switcher-mobile {
    flex-direction: row-reverse;
}

/* RTL Mobile Cards and Layouts */
[dir="rtl"] .card-body {
    text-align: right;
}

[dir="rtl"] .btn {
    text-align: center;
}

[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

[dir="rtl"] .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

[dir="rtl"] .ms-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

/* RTL Mobile Tables */
[dir="rtl"] .table th,
[dir="rtl"] .table td {
    text-align: right;
}

[dir="rtl"] .table-responsive {
    direction: rtl;
}

/* RTL Mobile Forms */
[dir="rtl"] .form-label {
    text-align: right;
}

[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    text-align: right;
    direction: rtl;
}

/* RTL Mobile Admin Panel */
[dir="rtl"] .card-header h5,
[dir="rtl"] .card-header h6 {
    text-align: right;
}

[dir="rtl"] .list-group-item {
    text-align: right;
}

/* RTL Mobile Footer */
[dir="rtl"] footer {
    text-align: right;
}

[dir="rtl"] footer .col-md-3 {
    text-align: right;
}

/* Navigation menu ordering now handled by HTML template logic */

/* RTL Hero Banner - Reverse column order only for Persian */
html[dir="rtl"] .hero-banner .row {
    flex-direction: row-reverse;
}

/* LTR Hero Banner - Normal order for English */
html[dir="ltr"] .hero-banner .row {
    flex-direction: row;
}

/* RTL Hero Banner Text Alignment */
html[dir="rtl"] .hero-banner .col-lg-6:first-child {
    text-align: right;
}

html[dir="rtl"] .hero-banner .col-lg-6:first-child h1,
html[dir="rtl"] .hero-banner .col-lg-6:first-child p,
html[dir="rtl"] .hero-banner .col-lg-6:first-child .btn {
    text-align: right;
}

/* LTR Hero Banner Text Alignment */
html[dir="ltr"] .hero-banner .col-lg-6:first-child {
    text-align: left;
}

html[dir="ltr"] .hero-banner .col-lg-6:first-child h1,
html[dir="ltr"] .hero-banner .col-lg-6:first-child p,
html[dir="ltr"] .hero-banner .col-lg-6:first-child .btn {
    text-align: left;
}

/* Ensure text column is above image in English version */
html[dir="ltr"] .hero-banner .col-lg-5 {
    position: relative;
    z-index: 3;
}

/* Push hero banner image to the right in English version */
html[dir="ltr"] .hero-banner .col-lg-7:last-child,
html[dir="ltr"] .hero-banner .col-lg-7 {
    padding-left: 3rem;
    position: relative;
    z-index: 1;
}

html[dir="ltr"] .hero-banner .col-lg-7 .hero-banner-image {
    margin-left: 2.5rem;
}

/* Ensure text column is above image in Persian (RTL) version */
html[dir="rtl"] .hero-banner .col-lg-5 {
    position: relative;
    z-index: 3;
}

/* Push hero banner image to the left in Persian (RTL) version */
html[dir="rtl"] .hero-banner .col-lg-7:first-child,
html[dir="rtl"] .hero-banner .col-lg-7 {
    padding-right: 3rem;
    position: relative;
    z-index: 1;
}

html[dir="rtl"] .hero-banner .col-lg-7 .hero-banner-image {
    margin-right: 2.5rem;
}

/* RTL Mobile Product Cards */
[dir="rtl"] .product-card .card-title,
[dir="rtl"] .product-card .card-text {
    text-align: right;
}

/* RTL Mobile Brand Cards */
[dir="rtl"] .brand-card .card-title {
    text-align: center;
}

/* RTL Mobile Typography */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, 
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    text-align: right;
}

[dir="rtl"] .text-center {
    text-align: center !important;
}

[dir="rtl"] .text-start {
    text-align: right !important;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 2.5rem;
    }
    
    .hero-banner {
        min-height: 400px;
    }
    
    .card-img-top {
        height: 200px !important;
    }
}

@media (max-width: 576px) {
    .hero-banner h1 {
        font-size: 2rem;
    }
    
    .hero-banner {
        min-height: 350px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Admin Panel Mobile Optimization */
.table-responsive {
    border-radius: 0.375rem;
}

.table th, .table td {
    padding: 12px 8px;
    font-size: 14px;
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .table th, .table td {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-sm {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .card-body {
        padding: 12px;
    }
    
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
}

/* Admin Form Mobile Optimization */
@media (max-width: 767.98px) {
    .form-label {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .form-control, .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px;
    }
    
    .form-text {
        font-size: 12px;
    }
    
    .btn-group .btn {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Admin Statistics Cards Mobile */
@media (max-width: 575.98px) {
    .card-body {
        padding: 15px 10px;
    }
    
    .card-body .fa-2x {
        font-size: 1.5rem !important;
    }
    
    .card-title {
        font-size: 1.25rem !important;
    }
    
    .card-text {
        font-size: 0.875rem;
    }
}

/* Extra Small Devices */
@media (max-width: 375px) {
    .sephora-logo span {
        font-size: 1rem !important;
    }
    
    .navbar-brand img {
        height: 35px !important;
    }
    
    .hero-banner h1 {
        font-size: 1.8rem;
    }
    
    .btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    .card-body {
        padding: 10px;
    }
    
    .table th, .table td {
        padding: 6px 2px;
        font-size: 11px;
    }
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

/* DISABLED to prevent flickering */
/* @keyframes spin {
    to { transform: rotate(360deg); }
} */

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* Animation Classes - DISABLED to prevent flickering */
/* .fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
} */

/* AJAX Category Filtering Styles */
#news-articles-container {
    transition: opacity 0.3s ease-in-out;
}

.category-filter-btn {
    transition: all 0.2s ease-in-out;
}

.category-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
}

.category-filter-btn:active {
    transform: translateY(0);
}

/* Home page news section button hover - removed to match product card button style */

/* Articles page buttons - Match Product Card Button Style */
.articles-page .btn-outline-primary {
    border-radius: 12px !important;
    padding: 0.5rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.articles-page .btn-outline-primary:hover,
.articles-page .btn-primary:hover,
.articles-page .btn:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* Home page carousel navigation arrows */
.home-page .product-carousel-nav {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
}

.home-page .product-carousel-nav:hover {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
}

/* Loading spinner for AJAX requests */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Fade-in animation for cards - DISABLED to prevent flickering */
/* .fade-in {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} */

/* Coming Soon Products Styling */
.coming-soon-card {
    position: relative;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.coming-soon-card:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.coming-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.coming-soon-badge .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.coming-soon-card .card-img-top {
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.coming-soon-card:hover .card-img-top {
    filter: grayscale(0%);
}

.coming-soon-card .btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Product Carousel Navigation - Removed conflicting rules */

/* Ensure proper spacing for carousel containers */
.carousel-container {
    overflow: hidden;
}

.carousel-container .row {
    transition: transform 0.3s ease;
}

/* Brand Cards Styling */
.brand-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.brand-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none; /* Disabled to remove blue overlay */
}

.brand-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: #ced4da; /* Slightly darker border on hover */
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); /* Light gray background on hover */
}

.brand-card .card-title {
    color: #495057;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.brand-card:hover .card-title {
    color: #495057; /* Keep original color, no blue change */
}

.brand-card a {
    color: inherit;
    text-decoration: none;
}

.brand-card a:hover {
    color: inherit;
    text-decoration: none;
}

/* ===== ENHANCED BRANDS PAGE STYLING ===== */

/* Hero Section */
.brands-hero-section {
    background: linear-gradient(135deg, 
        rgba(147,51,234,0.1) 0%, 
        rgba(255,255,255,0.9) 25%,
        rgba(255,255,255,0.95) 75%,
        rgba(236,72,153,0.05) 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
}

.brands-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(147,51,234,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(236,72,153,0.02)"/><circle cx="50" cy="10" r="0.5" fill="rgba(147,51,234,0.04)"/><circle cx="90" cy="40" r="0.8" fill="rgba(236,72,153,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.6;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    text-shadow: 0 4px 8px rgba(147,51,234,0.1);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--sephora-gray);
    max-width: 600px;
    margin: 0.5rem auto 2rem;
    line-height: 1.6;
}

/* Brands Grid Section */
.brands-grid-section {
    padding: 10px 0;
    background: linear-gradient(180deg, 
        rgba(255,255,255,1) 0%,
        rgba(248,249,250,0.8) 50%,
        rgba(255,255,255,1) 100%);
    position: relative;
}

.section-header {
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sephora-black);
    margin-bottom: 1rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #9333ea, #ec4899);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--sephora-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Modern Brands Grid */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-auto-rows: 1fr;
    gap: 2rem;
    margin-top: 3rem;
    align-items: start;
}

.brand-card-wrapper {
    display: flex;
    height: 100%;
    position: relative;
    z-index: 0;
}

.brand-card.modern-card {
    background: linear-gradient(145deg, 
        rgba(255,255,255,0.9) 0%,
        rgba(248,249,250,0.8) 100%);
    border: 1px solid rgba(147,51,234,0.1);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 
        0 10px 30px rgba(147,51,234,0.08),
        0 1px 8px rgba(0,0,0,0.05);
    backdrop-filter: blur(10px);
    width: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform;
    z-index: 1;
    isolation: isolate;
}

.brand-card.modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #9333ea, #ec4899, #9333ea);
    background-size: 200% 100%;
    /* DISABLED to prevent flickering */
    /* animation: gradient-shift 3s ease-in-out infinite; */
}

/* DISABLED to prevent flickering */
/* @keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
} */

.brand-card.modern-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 20px 40px rgba(147,51,234,0.15),
        0 8px 25px rgba(0,0,0,0.1);
    border-color: rgba(147,51,234,0.3);
}

.brand-card-inner {
    padding: 2rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    isolation: isolate;
}

/* Brand Logo Container */
.brand-logo-container {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.brand-logo {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
}

.brand-card.modern-card:hover .brand-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(147,51,234,0.2));
}

.brand-logo-placeholder {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    padding: 12px 20px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.brand-card.modern-card:hover .brand-logo-placeholder {
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    border-color: #d0d0d0;
}

.brand-initial {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.brand-name-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}

/* Brand Content */
.brand-content {
    text-align: center;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sephora-black);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.brand-description {
    color: var(--sephora-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.brand-features {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.feature-tag {
    background: linear-gradient(135deg, rgba(147,51,234,0.1), rgba(236,72,153,0.1));
    color: #9333ea;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(147,51,234,0.2);
}

/* Brand Actions */
.brand-actions {
    text-align: center;
    margin-top: auto;
}

.btn-brand-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #9333ea, #ec4899);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(147,51,234,0.3);
    position: relative;
    overflow: hidden;
}

.btn-brand-primary::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.5s ease;
}

.btn-brand-primary:hover::before {
    left: 100%;
}

.btn-brand-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(147,51,234,0.4);
    text-decoration: none;
    color: white;
}

.btn-brand-primary i {
    transition: transform 0.3s ease;
}

.btn-brand-primary:hover i {
    transform: translateX(3px);
}

/* Brand Overlay */
.brand-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(147,51,234,0.02) 0%,
        rgba(236,72,153,0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.brand-card.modern-card:hover .brand-overlay {
    opacity: 1;
}

/* Call to Action Section */
.brands-cta-section {
    background: linear-gradient(135deg, 
        rgba(147,51,234,0.08) 0%, 
        rgba(236,72,153,0.06) 25%,
        rgba(255,255,255,0.95) 50%,
        rgba(236,72,153,0.04) 75%,
        rgba(147,51,234,0.06) 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.brands-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="floating-dots" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="2" fill="rgba(147,51,234,0.05)"/><circle cx="10" cy="35" r="1.5" fill="rgba(236,72,153,0.04)"/><circle cx="35" cy="10" r="1" fill="rgba(147,51,234,0.03)"/><circle cx="30" cy="30" r="2.5" fill="rgba(236,72,153,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23floating-dots)"/></svg>');
    opacity: 0.7;
    animation: float-dots 20s ease-in-out infinite;
}

@keyframes float-dots {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.brands-cta-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(147,51,234,0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.1;
    }
}

.cta-content {
    position: relative;
    z-index: 3;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 4rem 3rem;
    box-shadow: 
        0 20px 40px rgba(147,51,234,0.1),
        0 8px 25px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.3);
}

.cta-title {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-align: center;
}

.cta-text {
    font-size: 1.3rem;
    color: #6b7280;
    margin-bottom: 2.5rem;
    line-height: 1.7;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    color: white;
    padding: 1.2rem 3rem;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 
        0 8px 25px rgba(147,51,234,0.3),
        0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.btn-cta-primary::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;
}

.btn-cta-primary:hover::before {
    left: 100%;
}

.btn-cta-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 15px 35px rgba(147,51,234,0.4),
        0 8px 25px rgba(0,0,0,0.15);
    color: white;
    text-decoration: none;
}

.btn-cta-primary i {
    transition: transform 0.3s ease;
    font-size: 1.1rem;
}

.btn-cta-primary:hover i {
    transform: translateX(5px) scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .brands-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .brand-card.modern-card {
        border-radius: 15px;
    }
    
    .brand-card-inner {
        padding: 1.5rem;
    }
    
    .cta-title {
        font-size: 2.2rem;
    }
    
    .cta-content {
        padding: 2.5rem 2rem;
        margin: 0 1rem;
    }
    
    .cta-text {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .btn-cta-primary {
        padding: 1rem 2.5rem;
        font-size: 1.1rem;
    }
    
    .brands-cta-section {
        padding: 60px 0;
    }
}

/* ===== BRAND DETAIL PAGE STYLING ===== */

/* Brand Detail Hero Section */
.brand-detail-hero-section {
    background: linear-gradient(135deg, 
        rgba(147,51,234,0.08) 0%, 
        rgba(236,72,153,0.06) 25%,
        rgba(255,255,255,0.95) 50%,
        rgba(236,72,153,0.04) 75%,
        rgba(147,51,234,0.06) 100%);
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}

.brand-detail-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="brand-pattern" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="1.5" fill="rgba(147,51,234,0.03)"/><circle cx="5" cy="25" r="1" fill="rgba(236,72,153,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23brand-pattern)"/></svg>');
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.brand-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.brand-logo-container-large {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.brand-logo-large {
    max-height: 150px;
    max-width: 300px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(147,51,234,0.2));
    transition: all 0.3s ease;
}

.brand-logo-large:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 12px 24px rgba(147,51,234,0.3));
}

.brand-logo-placeholder-large {
    width: 200px;
    height: 150px;
    background: linear-gradient(135deg, #9333ea, #ec4899);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(147,51,234,0.3);
}

.brand-initial-large {
    font-size: 4rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.brand-info-content {
    position: relative;
    z-index: 2;
}

.brand-title {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.brand-description-large {
    font-size: 1.3rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.brand-story {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(147,51,234,0.1);
}

.story-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #9333ea;
    margin-bottom: 1rem;
}

.story-text {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.btn-brand-website {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, #9333ea, #ec4899);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(147,51,234,0.3);
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.btn-brand-website:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(147,51,234,0.4);
    color: white;
    text-decoration: none;
}

/* Brand Products Section */
.brand-products-section {
    padding: 80px 0;
    background: linear-gradient(180deg, 
        rgba(255,255,255,1) 0%,
        rgba(248,249,250,0.8) 50%,
        rgba(255,255,255,1) 100%);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
    margin-top: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== PRODUCTS PAGE STYLING ===== */
/* Custom styling only for filters and search, not product cards */
body .products-page,
html body .products-page,
.container.products-page,
.container-fluid.products-page {
    background: #f5f5f5 !important;
    min-height: 100vh !important;
    position: relative !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Enhanced filter sidebar styling - ULTRA SPECIFIC */
html body .products-page .col-lg-2 .card,
body .products-page .col-lg-2 .card,
html body .products-page .card,
body .products-page .card {
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05) !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    backdrop-filter: none !important;
}

/* Enhanced filter sidebar header - ULTRA SPECIFIC */
html body .products-page .col-lg-2 .card .card-header,
body .products-page .col-lg-2 .card .card-header,
html body .products-page .card-header,
body .products-page .card-header {
    background: #f7f7f7 !important;
    border-radius: 15px 15px 0 0 !important;
    padding: 1rem 1.25rem !important;
    border-bottom: none !important;
}

body .products-page .card-header h5,
html body .products-page .card-header h5 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #2c3e50 !important;
    text-shadow: none !important;
}

body .products-page .card:hover,
html body .products-page .card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.15) !important;
}

/* Enhanced filter list items with gray/pink theme */
body .products-page .list-group-item,
html body .products-page .list-group-item {
    border: 1px solid rgba(108,117,125,0.15) !important;
    border-radius: 10px !important;
    margin-bottom: 0.5rem !important;
    transition: all 0.3s ease !important;
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(5px) !important;
    font-weight: 500 !important;
    padding: 0.75rem 1rem !important;
    color: #6c757d !important;
}

body .products-page .list-group-item:hover,
html body .products-page .list-group-item:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

body .products-page .list-group-item.active,
html body .products-page .list-group-item.active {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transform: translateX(8px) !important;
}

/* Enhanced search form with better contrast */
body .products-page .form-control,
html body .products-page .form-control {
    border: 2px solid rgba(108,117,125,0.15) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(10px) !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500 !important;
    color: #6c757d !important;
}

body .products-page .form-control:focus,
html body .products-page .form-control:focus {
    border-color: #f8bbd9 !important;
    box-shadow: 0 0 0 0.2rem rgba(248,187,217,0.3) !important;
    background: white !important;
    transform: translateY(-2px) !important;
}

/* Search button styling - ULTRA SPECIFIC */
html body .products-page .col-lg-2 .card .btn-primary,
body .products-page .col-lg-2 .card .btn-primary,
html body .products-page .btn-primary,
body .products-page .btn-primary {
    background: #6c757d !important;
    border: none !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    padding: 0.75rem 1.25rem !important;
}

/* Search button hover - ULTRA SPECIFIC */
html body .products-page .col-lg-2 .card .btn-primary:hover,
body .products-page .col-lg-2 .card .btn-primary:hover,
html body .products-page .btn-primary:hover,
body .products-page .btn-primary:hover {
    background: #5a6268 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced product cards */
/* REMOVED: High-specificity body .products-page .product-card overrides - Now using universal .product-card design */

/* DISABLED to prevent flickering */
/* body .products-page .product-card:hover .card-title,
html body .products-page .product-card:hover .card-title {
    color: #6f42c1 !important;
} */

body .products-page .product-card .card-text,
html body .products-page .product-card .card-text {
    font-size: 0.9rem !important;
    margin-bottom: 0.75rem !important;
    color: #4a5568 !important;
    line-height: 1.5 !important;
}

body .products-page .product-card .card-text.text-muted,
html body .products-page .product-card .card-text.text-muted {
    color: #6c757d !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

body .products-page .product-card .btn,
html body .products-page .product-card .btn {
    font-size: 0.85rem !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
    background: white !important;
}

body .products-page .product-card .btn:hover,
html body .products-page .product-card .btn:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    /* DISABLED: transform to prevent flickering */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* ===== ENHANCED PRODUCT CARDS STYLING ===== */
/* REMOVED: .products-page .product-card - Now using universal .product-card design above */

/* Apply home page button styling to all product cards */
.products-page .product-card .product-btn,
.brands-page .product-card .product-btn,
.brand-detail-page .product-card .product-btn {
    border-radius: 12px !important;
    padding: 0.5rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.products-page .product-card .product-btn:hover,
.brands-page .product-card .product-btn:hover,
.brand-detail-page .product-card .product-btn:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* Icon color for product and brand pages */
.products-page .product-card .text-muted i,
.brands-page .product-card .text-muted i,
.brand-detail-page .product-card .text-muted i,
.dashboard-page .product-card .text-muted i {
    color: #9333ea !important;
}

.products-page .product-card .small.text-muted i,
.brands-page .product-card .small.text-muted i,
.brand-detail-page .product-card .small.text-muted i,
.dashboard-page .product-card .small.text-muted i {
    color: #9333ea !important;
}

/* Product title hover color for product and brand pages */
.products-page .product-card:hover .card-title,
.brands-page .product-card:hover .card-title,
.brand-detail-page .product-card:hover .card-title {
    color: #6f42c1 !important;
}

/* Keep brand detail product cards uniform */
.brand-detail-page .product-card .card-title {
    min-height: 2.8rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-detail-page .product-card .text-muted.small {
    min-height: 1.2rem !important;
}

/* ===== HOME PAGE PRODUCT CARDS ENHANCED STYLING ===== */
/* REMOVED: Home page specific product card styles - Now using universal .product-card design above */

/* News Section Buttons - Only for news/article cards, NOT product cards */
.home-page .card:not(.product-card) .btn-outline-primary,
.home-page .card:not(.product-card) .btn-outline-primary,
.home-page .btn-outline-primary:not(.product-card .btn-outline-primary) {
    border-radius: 12px !important;
    padding: 0.5rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.home-page .card:not(.product-card) .btn-outline-primary:hover,
.home-page .btn-outline-primary:not(.product-card .btn-outline-primary):hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* REMOVED: .products-page .product-card::before and hover styles - Now using universal .product-card design above */

/* Product Image Container */
.products-page .product-image-container {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
    height: 200px !important;
}

.products-page .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px 20px 0 0 !important;
}

/* Removed image scale effect on hover to preserve actual product images */

/* Product Overlay - Only for badge display, no color overlay */
.products-page .product-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 1rem !important;
    border-radius: 20px 20px 0 0 !important;
    pointer-events: none !important;
}


/* Product Badge Styling */
.products-page .product-badge {
    align-self: flex-start !important;
}

.products-page .product-badge .badge {
    background: rgba(255,255,255,0.95) !important;
    color: #e879f9 !important;
    border-radius: 15px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.products-page .product-badge .badge.bg-warning {
    background: rgba(255,193,7,0.95) !important;
    color: #212529 !important;
}

.products-page .product-badge .badge.bg-success {
    background: rgba(40,167,69,0.95) !important;
    color: white !important;
}

.products-page .product-badge .badge.bg-primary {
    background: rgba(13,110,253,0.95) !important;
    color: white !important;
}

/* Product Brand */
.products-page .product-brand {
    margin-bottom: 0.5rem !important;
}

.products-page .brand-name {
    font-size: 0.85rem !important;
    color: #e879f9 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Product Title */
.products-page .product-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #2d3748 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
}

.products-page .product-card:hover .product-title {
    color: #e879f9 !important;
}

/* Product Description */
.products-page .product-description {
    font-size: 0.9rem !important;
    color: #718096 !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Product Price */
.products-page .product-price {
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.products-page .price-current {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #e879f9 !important;
}

.products-page .price-original {
    font-size: 1rem !important;
    color: #a0aec0 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
}

/* Product Button */
.products-page .product-btn {
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: white !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(248,187,217,0.4) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

.products-page .product-btn:hover {
    background: linear-gradient(135deg, #e879f9 0%, #d946ef 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(248,187,217,0.5) !important;
    color: white !important;
}

/* RTL Support for Product Cards */
.products-page .product-card[style*="direction: rtl"] {
    text-align: right !important;
}

.products-page .product-card[style*="direction: rtl"] .product-badge {
    align-self: flex-end !important;
}

/* Fix for Featured badge color on products pages */
.products-page .badge.bg-primary {
    background-color: rgba(13,110,253,0.95) !important;
    color: white !important;
}

/* Fix for Featured badge color on brand detail pages */
.brand-detail-page .badge.bg-primary,
.brands-page .badge.bg-primary {
    background-color: rgba(13,110,253,0.95) !important;
    color: white !important;
}

/* Fix for Featured badge color on dashboard products page */
.dashboard-page .badge.bg-primary,
.dashboard .badge.bg-primary {
    background-color: rgba(13,110,253,0.95) !important;
    color: white !important;
}

/* Fix for Featured badge color on all product cards */
.product-card .badge.bg-primary {
    background-color: rgba(13,110,253,0.95) !important;
    color: white !important;
}

.products-page .product-card[style*="direction: rtl"] .product-price {
    justify-content: flex-end !important;
}

/* Card Body Enhancements */
.products-page .product-card .card-body {
    padding: 1.5rem !important;
    background: rgba(255,255,255,0.98) !important;
    border-radius: 0 0 20px 20px !important;
}

/* ===== PRODUCT DETAIL PAGE STYLING ===== */
.product-detail-wrapper {
    min-height: 100vh;
    background: #fdfdfd !important;
}

/* Force light background for product detail pages */
body .product-detail-wrapper,
html body .product-detail-wrapper,
main .product-detail-wrapper,
.container .product-detail-wrapper {
    background: #fdfdfd !important;
    background-color: #fdfdfd !important;
}

/* Additional override for any conflicting styles */
.product-detail-wrapper {
    background: #fdfdfd !important;
    background-color: #fdfdfd !important;
}

/* Breadcrumb Styling */
.product-detail-wrapper .breadcrumb {
    background: rgba(255,255,255,0.9);
    border-radius: 15px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 15px rgba(248,187,217,0.1);
}

.product-detail-wrapper .breadcrumb-item a {
    color: #e879f9;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-detail-wrapper .breadcrumb-item a:hover {
    color: #d946ef;
}

/* Product Image Container Detail */
.product-image-container-detail {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(248,187,217,0.2);
    background: white;
    padding: 1rem;
}

.product-image-detail {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.product-image-detail:hover {
    transform: scale(1.02);
}

/* Product Badge Detail */
.product-badge-detail {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 10;
}

.product-badge-detail .badge {
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.product-badge-detail .badge.bg-warning {
    background: rgba(255,193,7,0.95) !important;
    color: #212529 !important;
}

.product-badge-detail .badge.bg-success {
    background: rgba(40,167,69,0.95) !important;
    color: white !important;
}

.product-badge-detail .badge.bg-light {
    background: rgba(248,187,217,0.95) !important;
    color: #e879f9 !important;
}

.product-badge-detail .badge.bg-primary {
    background: rgba(13,110,253,0.95) !important;
    color: white !important;
}

/* Product Info Section */
.product-info-section {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 15px 50px rgba(248,187,217,0.15);
    backdrop-filter: blur(10px);
}

/* Product Brand Detail */
.product-brand-detail {
    margin-bottom: 1rem;
}

.brand-name-detail {
    font-size: 1rem;
    color: #e879f9;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Product Title Detail */
.product-title-detail {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* Product Price Detail */
.product-price-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.price-current-detail {
    font-size: 2rem;
    font-weight: 700;
    color: #e879f9;
}

.price-original-detail {
    font-size: 1.5rem;
    color: #a0aec0;
    text-decoration: line-through;
    font-weight: 500;
}

/* Section Titles */
.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f8bbd9;
}

/* Product Description Detail */
.description-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

/* Product Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.detail-label {
    font-weight: 600;
    color: #4a5568;
}

.detail-value {
    font-weight: 500;
    color: #2d3748;
}

/* Product Actions Detail */
.product-actions-detail {
    margin-top: 2rem;
}

.product-btn-detail {
    border-radius: 25px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(248,187,217,0.3);
}

.product-btn-detail.btn-primary {
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%);
    border: none;
    color: white;
}

.product-btn-detail.btn-primary:hover {
    background: linear-gradient(135deg, #e879f9 0%, #d946ef 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(248,187,217,0.4);
    color: white;
}

.product-btn-detail.btn-outline-secondary {
    border: 2px solid #e879f9;
    color: #e879f9;
}

.product-btn-detail.btn-outline-secondary:hover {
    background: #e879f9;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232,121,249,0.3);
}

/* Related Products Section */
.related-products-section {
    margin-top: 4rem;
    padding: 2rem 0;
}

.related-products-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.related-products-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #f8bbd9 0%, #e879f9 50%, #f8bbd9 100%);
    border-radius: 2px;
}

/* Related Product Cards */
.related-product-card {
    border: 1px solid rgba(248,187,217,0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(248,187,217,0.1);
    background: rgba(255,255,255,0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.related-product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 60px rgba(248,187,217,0.3);
    border-color: rgba(248,187,217,0.5);
}

.related-product-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    height: 200px;
}

.related-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.related-product-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

.related-product-badge .badge {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.related-product-badge .badge.bg-warning {
    background: rgba(255,193,7,0.95) !important;
    color: #212529 !important;
}

.related-product-badge .badge.bg-success {
    background: rgba(40,167,69,0.95) !important;
    color: white !important;
}

.related-product-badge .badge.bg-light {
    background: rgba(248,187,217,0.95) !important;
    color: #e879f9 !important;
}

.related-product-badge .badge.bg-primary {
    background: rgba(13,110,253,0.95) !important;
    color: white !important;
}

.related-product-brand {
    margin-bottom: 0.5rem;
}

.related-brand-name {
    font-size: 0.85rem;
    color: #e879f9;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.related-product-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.related-product-description {
    font-size: 0.9rem;
    color: #718096;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.related-product-price {
    margin-bottom: 1rem;
}

.related-price-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e879f9;
}

.related-product-btn {
    background: white !important;
    border: 2px solid #6c757d !important;
    border-radius: 10px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #6c757d !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.related-product-btn:hover {
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%) !important;
    border-color: #f8bbd9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(248,187,217,0.4) !important;
    color: white !important;
}

/* RTL Support for Product Detail */
.product-detail-wrapper[style*="direction: rtl"] .product-badge-detail {
    left: auto;
    right: 2rem;
}

.product-detail-wrapper[style*="direction: rtl"] .related-product-badge {
    left: auto;
    right: 1rem;
}

.product-detail-wrapper[style*="direction: rtl"] .detail-item {
    flex-direction: row-reverse;
}

.product-detail-wrapper[style*="direction: rtl"] .product-actions-detail .d-flex {
    flex-direction: row-reverse;
}

.product-detail-wrapper[style*="direction: rtl"] .product-actions-detail .me-md-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* RTL Size Items - Keep centered text */
.product-detail-wrapper[style*="direction: rtl"] .size-item-detail,
html[dir="rtl"] .size-item-detail {
    text-align: center !important;
}

.product-detail-wrapper[style*="direction: rtl"] .size-info,
html[dir="rtl"] .size-info {
    text-align: center !important;
}

.product-detail-wrapper[style*="direction: rtl"] .size-price,
html[dir="rtl"] .size-price {
    text-align: center !important;
}

.product-detail-wrapper[style*="direction: rtl"] .size-name,
html[dir="rtl"] .size-name {
    text-align: center !important;
}

.product-detail-wrapper[style*="direction: rtl"] .size-value,
html[dir="rtl"] .size-value {
    text-align: center !important;
}

.product-detail-wrapper[style*="direction: rtl"] .size-price .price,
html[dir="rtl"] .size-price .price {
    text-align: center !important;
}

/* RTL Image Navigation Arrows - Swap arrow directions */
.product-detail-wrapper[style*="direction: rtl"] .image-nav-btn.prev-btn i,
html[dir="rtl"] .image-nav-btn.prev-btn i {
    transform: rotate(180deg) !important;
}

.product-detail-wrapper[style*="direction: rtl"] .image-nav-btn.next-btn i,
html[dir="rtl"] .image-nav-btn.next-btn i {
    transform: rotate(180deg) !important;
}

/* RTL Related Products Title - Center alignment */
.product-detail-wrapper[style*="direction: rtl"] .related-products-title,
html[dir="rtl"] .related-products-title {
    text-align: center !important;
}

/* RTL Breadcrumb Dividers - Clean single separator */
.product-detail-wrapper[style*="direction: rtl"] .breadcrumb-item + .breadcrumb-item::before,
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: #e879f9 !important;
    font-weight: 600 !important;
    margin: 0 0.5rem !important;
    opacity: 0.8 !important;
    display: inline !important;
    padding: 0 !important;
}

/* RTL Breadcrumb Layout - Move content to right */
.product-detail-wrapper[style*="direction: rtl"] .breadcrumb,
html[dir="rtl"] .breadcrumb {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    text-align: left !important;
    direction: ltr !important;
    flex-direction: row-reverse !important;
}

/* RTL Breadcrumb Items - Proper spacing */
.product-detail-wrapper[style*="direction: rtl"] .breadcrumb-item,
html[dir="rtl"] .breadcrumb-item {
    display: flex !important;
    align-items: center !important;
}

/* RTL Breadcrumb Active Item - Remove auto margin */
.product-detail-wrapper[style*="direction: rtl"] .breadcrumb-item.active,
html[dir="rtl"] .breadcrumb-item.active {
    margin: 0 !important;
}

/* ===== PRODUCT DETAIL WINDOW - PINK THEME WITH PURPLE HOVER ===== */
/* Product Info Section - Pink Theme */
.product-detail-wrapper .product-info-section {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 15px 50px rgba(248,187,217,0.15) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(248,187,217,0.1) !important;
}

/* Breadcrumb - Pink Theme */
.product-detail-wrapper .breadcrumb {
    background: rgba(255,255,255,0.9) !important;
    border-radius: 15px !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0 4px 15px rgba(248,187,217,0.1) !important;
    border: 1px solid rgba(248,187,217,0.05) !important;
}

.product-detail-wrapper .breadcrumb-item a {
    color: #e879f9 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.product-detail-wrapper .breadcrumb-item a:hover {
    color: #9333ea !important;
}

/* Product Image Container - Pink Theme */
.product-detail-wrapper .product-image-container-detail {
    box-shadow: 0 15px 50px rgba(248,187,217,0.2) !important;
    border: 1px solid rgba(248,187,217,0.1) !important;
}

/* Product Badge - Preserve Original Colors */
.product-detail-wrapper .product-badge-detail .badge {
    font-size: 0.9rem !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Coming Soon Badge - Yellow Theme */
.product-detail-wrapper .product-badge-detail .badge.bg-warning {
    background: rgba(255,193,7,0.95) !important;
    color: #212529 !important;
}

/* New Arrival Badge - Green Theme */
.product-detail-wrapper .product-badge-detail .badge.bg-success {
    background: rgba(40,167,69,0.95) !important;
    color: white !important;
}

/* Featured Badge - Pink Theme */
.product-detail-wrapper .product-badge-detail .badge.bg-light {
    background: rgba(248,187,217,0.95) !important;
    color: #e879f9 !important;
}

/* Featured Badge - Blue Theme */
.product-detail-wrapper .product-badge-detail .badge.bg-primary {
    background: rgba(13,110,253,0.95) !important;
    color: white !important;
}

/* Product Brand - Black Theme */
.product-detail-wrapper .product-brand-detail {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Product Title - Pink Theme */
.product-detail-wrapper .product-title-detail {
    color: #1f2937 !important;
    transition: color 0.3s ease !important;
}

.product-detail-wrapper .product-title-detail:hover {
    color: #9333ea !important;
}

/* Product Price - Pink Theme */
.product-detail-wrapper .product-price-detail {
    color: #e879f9 !important;
    font-weight: 700 !important;
}

/* Product Description - Pink Theme */
.product-detail-wrapper .product-description-detail {
    color: #6b7280 !important;
    line-height: 1.6 !important;
}

/* Detail Items - Pink Theme */
.product-detail-wrapper .detail-item {
    border-bottom: 1px solid rgba(248,187,217,0.1) !important;
    padding: 0.75rem 0 !important;
}

.product-detail-wrapper .detail-item:last-child {
    border-bottom: none !important;
}

.product-detail-wrapper .detail-label {
    color: #e879f9 !important;
    font-weight: 600 !important;
}

.product-detail-wrapper .detail-value {
    color: #000000 !important;
}

/* More specific targeting for brand and category values */
.product-detail-wrapper .detail-item .detail-value {
    color: #000000 !important;
}

.product-detail-wrapper .details-grid .detail-item .detail-value {
    color: #000000 !important;
}

/* ULTRA SPECIFIC - Force black color for detail values */
html body .product-detail-wrapper .details-grid .detail-item .detail-value,
body .product-detail-wrapper .details-grid .detail-item .detail-value,
.product-detail-wrapper[style*="direction: rtl"] .detail-value,
html[dir="rtl"] .product-detail-wrapper .detail-value {
    color: #000000 !important;
    background-color: transparent !important;
    background: none !important;
}

/* Size Items - Pink Theme with Purple Hover */
.product-detail-wrapper .size-item-detail {
    background: white !important;
    border: 1px solid rgba(248,187,217,0.2) !important;
    border-radius: 15px !important;
    padding: 1rem !important;
    transition: all 0.3s ease !important;
}

.product-detail-wrapper .size-item-detail:hover {
    background: rgba(147, 51, 234, 0.05) !important;
    border-color: #9333ea !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.2) !important;
}

.product-detail-wrapper .size-name {
    color: #e879f9 !important;
    font-weight: 600 !important;
}

.product-detail-wrapper .size-value {
    color: #374151 !important;
}

.product-detail-wrapper .size-price .price {
    color: #e879f9 !important;
    font-weight: 700 !important;
}

/* Buttons - Pink Theme with Purple Hover */
.product-detail-wrapper .product-btn-detail {
    background: white !important;
    border: 2px solid #e879f9 !important;
    color: #e879f9 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
}

.product-detail-wrapper .product-btn-detail:hover {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
    border-color: #9333ea !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.4) !important;
}

/* Related Products - Pink Theme with Purple Hover */
.product-detail-wrapper .related-product-btn {
    background: white !important;
    border: 2px solid #e879f9 !important;
    color: #e879f9 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
}

.product-detail-wrapper .related-product-btn:hover {
    background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 100%) !important;
    border-color: #d8b4fe !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(216, 180, 254, 0.4) !important;
}

/* Related Product Badge - Preserve Original Colors */
.product-detail-wrapper .related-product-badge .badge {
    font-size: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Coming Soon Badge - Yellow Theme */
.product-detail-wrapper .related-product-badge .badge.bg-warning {
    background: rgba(255,193,7,0.95) !important;
    color: #212529 !important;
}

/* New Arrival Badge - Green Theme */
.product-detail-wrapper .related-product-badge .badge.bg-success {
    background: rgba(40,167,69,0.95) !important;
    color: white !important;
}

/* Featured Badge - Pink Theme */
.product-detail-wrapper .related-product-badge .badge.bg-light {
    background: rgba(248,187,217,0.95) !important;
    color: #e879f9 !important;
}

/* Featured Badge - Blue Theme */
.product-detail-wrapper .related-product-badge .badge.bg-primary {
    background: rgba(13,110,253,0.95) !important;
    color: white !important;
}

/* Remove bottom margin from products page */
body .products-page-wrapper,
html body .products-page-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body .products-page-wrapper .container-fluid,
html body .products-page-wrapper .container-fluid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Force remove bottom margin from entire page */
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

html {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove margin from main content */
main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.product-card-wrapper {
    perspective: 1000px;
}

.modern-product-card {
    background: linear-gradient(145deg, 
        rgba(255,255,255,0.9) 0%,
        rgba(248,249,250,0.8) 100%);
    border: 1px solid rgba(147,51,234,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(147,51,234,0.08);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 5;
    cursor: pointer;
    height: 140px;
    width: 100%;
}

.modern-product-card:hover {
    transform: translateY(-8px) rotateX(5deg);
    box-shadow: 0 15px 35px rgba(147,51,234,0.15);
    border-color: rgba(147,51,234,0.3);
}

.modern-product-card .product-image-container {
    position: relative;
    overflow: hidden;
    height: 60px;
}

.modern-product-card .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.modern-product-card:hover .product-image {
    transform: scale(1.1);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(147,51,234,0.8) 0%,
        rgba(236,72,153,0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-product-card:hover .product-overlay {
    opacity: 1;
}

.btn-product-view {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem;
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.55rem;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-product-view:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

.product-content {
    padding: 0.5rem;
}

.product-category {
    font-size: 0.65rem;
    font-weight: 600;
    color: #9333ea;
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
}

.product-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sephora-black);
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.product-description {
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* No Products Message */
.no-products-message {
    padding: 80px 0;
    text-align: center;
}

.no-products-content {
    max-width: 500px;
    margin: 0 auto;
}

/* Enhanced Pagination */
.pagination-container {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(147,51,234,0.1);
}

.pagination-modern {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-modern .page-item {
    margin: 0;
}

.pagination-modern .page-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(147,51,234,0.2);
    border-radius: 12px;
    color: #9333ea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.pagination-modern .page-link:hover {
    background: linear-gradient(135deg, #9333ea, #ec4899);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(147,51,234,0.3);
    text-decoration: none;
}

.pagination-modern .page-item.active .page-link {
    background: linear-gradient(135deg, #9333ea, #ec4899);
    color: white;
    border-color: transparent;
}

.pagination-modern .page-item.disabled .page-link {
    background: rgba(248,249,250,0.5);
    color: #9ca3af;
    border-color: rgba(156,163,175,0.2);
    cursor: not-allowed;
}

/* Back to Brands Section */
.back-to-brands-section {
    background: linear-gradient(135deg, 
        rgba(147,51,234,0.08) 0%, 
        rgba(236,72,153,0.06) 25%,
        rgba(255,255,255,0.95) 50%,
        rgba(236,72,153,0.04) 75%,
        rgba(147,51,234,0.06) 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.back-to-brands-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="back-pattern" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="1" fill="rgba(147,51,234,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23back-pattern)"/></svg>');
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

.back-content {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(15px);
    border-radius: 25px;
    padding: 3rem 2rem;
    border: 1px solid rgba(255,255,255,0.3);
}

.back-title {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.back-text {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.btn-back-to-brands {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, #9333ea, #ec4899);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(147,51,234,0.3);
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.btn-back-to-brands:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(147,51,234,0.4);
    color: white;
    text-decoration: none;
}

/* Responsive Design for Brand Detail */
@media (max-width: 768px) {
    .brand-title {
        font-size: 2.2rem;
    }
    
    .brand-description-large {
        font-size: 1.1rem;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .brand-story {
        padding: 1.5rem;
    }
    
    .back-content {
        padding: 2rem 1.5rem;
    }
    
    .back-title {
        font-size: 1.6rem;
    }
    
    .pagination-modern {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-modern .page-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

/* ===== CLICK EVENTS FIX ===== */
/* Ensure all clickable elements are always clickable */
a, button, .btn, .modern-product-card, .page-link, .btn-brand-website, .btn-back-to-brands, .btn-product-view {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 10 !important;
}

/* Ensure no background elements block clicks */
.brand-detail-hero-section::before,
.back-to-brands-section::before,
.brands-cta-section::before,
.brands-hero-section::before {
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Make sure content elements are above backgrounds */
.brand-hero-content,
.brand-info-content,
.back-content,
.cta-content,
.hero-content {
    position: relative;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* Password Strength Meter Styles */
.password-strength-container {
    margin-top: 8px;
    padding: 12px;
    background: rgba(248, 249, 250, 0.8);
    border-radius: 8px;
    border: 1px solid #e9ecef;
    position: relative;
    z-index: 1;
    clear: both;
}

/* Ensure password input container maintains proper positioning */
.form-group:has(input[type="password"]),
.input-group:has(input[type="password"]),
div:has(input[type="password"]) {
    position: relative;
}

/* Password input wrapper */
.password-input-wrapper {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    isolation: isolate !important;
    contain: layout !important;
}

/* Specific styling for password input fields */
input[type="password"] {
    padding-right: 50px !important;
    position: relative;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    width: 100% !important;
}

/* Ensure form-text doesn't interfere with password wrapper */
.password-input-wrapper + .form-text {
    margin-top: 8px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Specific fix for new password field form-text */
.new-password-wrapper + .form-text {
    margin-top: 8px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    clear: both !important;
}

/* Ensure new password wrapper is completely isolated */
.mb-3 .new-password-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    isolation: isolate !important;
    contain: layout !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    z-index: 10 !important;
}

/* Password field container for new password field */
.password-field-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure the new password field container doesn't interfere */
.password-field-container .password-input-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    isolation: isolate !important;
    contain: layout !important;
}

/* Ensure password strength meter doesn't interfere with new password field */
.password-input-wrapper:has(#new_password) + .password-strength-container {
    margin-top: 8px !important;
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
}

/* Force new password field wrapper to maintain its position */
.password-input-wrapper:has(#new_password) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    isolation: isolate !important;
    contain: layout !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Direct targeting with specific classes */
.new-password-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    isolation: isolate !important;
    contain: layout !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    z-index: 10 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 58px !important;
}

.new-password-toggle {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 8px !important;
    z-index: 10000 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    color: #6c757d !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Force positioning with maximum specificity */
.mb-3 .new-password-wrapper .new-password-toggle,
.mb-4 .new-password-wrapper .new-password-toggle,
.password-input-wrapper.new-password-wrapper .new-password-toggle {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 8px !important;
    z-index: 10000 !important;
}

.password-strength-meter {
    margin-bottom: 8px;
}

.password-strength-bar {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.password-strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.password-strength-text {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.password-strength-suggestions {
    font-size: 11px;
}

.password-suggestions ul {
    margin: 4px 0 0 0;
    padding-left: 16px;
}

.password-suggestions li {
    margin-bottom: 2px;
    color: #6c757d;
}

/* Password expiry warning */
.password-expiry-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    color: #856404;
}

.password-expiry-warning.urgent {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-color: #dc3545;
    color: #721c24;
}

.password-expiry-warning .expiry-text {
    font-weight: 600;
    margin-bottom: 4px;
}

.password-expiry-warning .expiry-days {
    font-size: 14px;
}

/* Products Count Badge */
.products-count {
    margin-top: 1rem;
}

.count-badge {
    display: inline-block;
    background: linear-gradient(135deg, #9333ea, #ec4899);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(147,51,234,0.3);
}

/* ===== PRODUCTS PAGE ENHANCED STYLING ===== */

/* Products Page Container */
.products-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

/* Enhanced Filter Sidebar */
.products-page .card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(147, 51, 234, 0.1);
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* Filter card body - solid background */
html body .products-page .filter-card .card-body,
body .products-page .filter-card .card-body,
.products-page .filter-card .card-body {
    background: #f8f9fa !important;
}

/* Filter card - override gray background */
html body .products-page .col-lg-2 .filter-card,
body .products-page .col-lg-2 .filter-card,
html body .products-page .filter-card,
body .products-page .filter-card {
    background: white !important;
}

.products-page .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(147, 51, 234, 0.15);
}

.products-page .card-header {
    background: linear-gradient(135deg, #6f42c1 0%, #9333ea 100%);
    color: white;
    border-radius: 20px 20px 0 0 !important;
    border: none;
    padding: 1.5rem;
}

.products-page .card-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Enhanced Search Input */
.products-page .input-group .form-control {
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
}

.products-page .input-group .form-control:focus {
    border-color: #9333ea;
    box-shadow: 0 0 0 0.2rem rgba(147, 51, 234, 0.25);
    transform: translateY(-2px);
}

.products-page .input-group .btn-primary {
    background: #6c757d;
    border: none;
    border-radius: 15px;
    padding: 0.75rem 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.products-page .input-group .btn-primary:hover {
    background: #5a6268;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Enhanced Filter Links */
.products-page .list-group-item {
    border: none;
    border-radius: 12px !important;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    background: transparent;
    color: #495057;
    font-weight: 500;
}

.products-page .list-group-item:hover {
    background: #f3f4f6;
    color: #374151;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.products-page .list-group-item.active {
    background: #6c757d;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateX(8px);
}

/* Enhanced Product Cards */
.products-page .product-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    position: relative;
}

.products-page .product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e7eb;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.products-page .product-card:hover {
    /* DISABLED: transform to prevent flickering */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.products-page .product-card:hover::before {
    opacity: 1;
}

.products-page .product-card .card-img-top {
    border-radius: 0;
    /* DISABLED: transition to prevent flickering */
    height: 250px;
    object-fit: cover;
}

/* DISABLED to prevent flickering */
/* .products-page .product-card:hover .card-img-top {
    transform: scale(1.05);
} */

.products-page .product-card .card-body {
    padding: 1.5rem;
    background: white;
}

.products-page .product-card .card-title {
    color: #2d3748;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    /* DISABLED: transition to prevent flickering */
}

/* DISABLED to prevent flickering */
/* .products-page .product-card:hover .card-title {
    color: #6f42c1;
} */

.products-page .product-card .card-text.text-muted {
    color: #6c757d !important;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.products-page .product-card .card-text:not(.text-muted) {
    color: #4a5568;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.products-page .product-card .btn-outline-secondary {
    border: 2px solid #6c757d;
    color: white;
    border-radius: 12px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    /* DISABLED: transition to prevent flickering */
    background: #6c757d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.products-page .product-card .btn-outline-secondary:hover {
    background: #5a6268;
    color: white;
    border-color: #5a6268;
    /* DISABLED: transform to prevent flickering */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Search Results Header Styling */
.products-page h4 {
    color: #2d3748;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
}

.products-page h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #9333ea 0%, #6f42c1 100%);
    border-radius: 2px;
}

.products-page .text-muted {
    color: #6c757d !important;
    font-weight: 500;
}

/* Pagination Styling */
.products-page .pagination .page-link {
    border: none;
    color: #6f42c1;
    border-radius: 12px;
    margin: 0 0.25rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.products-page .pagination .page-link:hover {
    background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
    color: #6f42c1;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.2);
}

.products-page .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #9333ea 0%, #6f42c1 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
}

/* Empty State Styling */

/* Form Labels */
.products-page .form-label {
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .products-page {
        padding: 1rem 0;
    }
    
    .products-page .card {
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    
    .products-page .product-card {
        border-radius: 15px;
    }
    
    .products-page .product-card:hover {
        /* DISABLED: transform to prevent flickering */
    }
}


/* Force cache refresh - Tue Oct 21 15:15:00 PDT 2025 - FIX RTL BREADCRUMB RIGHT ALIGNMENT */

/* FORCE FILTER SIDEBAR STYLING - MAXIMUM SPECIFICITY */
html body .products-page-wrapper .container-fluid .row .col-lg-2 .card {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

html body .products-page-wrapper .container-fluid .row .col-lg-2 .card .card-header {
    background: #6c757d !important;
    background-color: #6c757d !important;
    background-image: none !important;
    border-radius: 15px 15px 0 0 !important;
    padding: 1rem 1.25rem !important;
    border-bottom: none !important;
}

html body .products-page-wrapper .container-fluid .row .col-lg-2 .card .card-header h5 {
    color: white !important;
    font-weight: 600 !important;
}

html body .products-page-wrapper .container-fluid .row .col-lg-2 .card .card-body .btn-primary {
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%) !important;
    background-color: #f8bbd9 !important;
    background-image: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(248,187,217,0.4) !important;
}

/* OVERRIDE CSS VARIABLES FOR FILTER SIDEBAR */
html body .products-page .col-lg-2 .card,
body .products-page .col-lg-2 .card {
    background: #6c757d !important;
    background-color: #6c757d !important;
    background-image: none !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

html body .products-page .col-lg-2 .card .btn-primary,
body .products-page .col-lg-2 .card .btn-primary {
    background: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%) !important;
    background-color: #f8bbd9 !important;
    background-image: linear-gradient(135deg, #f8bbd9 0%, #e879f9 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(248,187,217,0.4) !important;
}

/* ULTIMATE OVERRIDE for product detail background - VERY LIGHT GRAY */
html body main .product-detail-wrapper,
html body .product-detail-wrapper,
body main .product-detail-wrapper,
body .product-detail-wrapper,
main .product-detail-wrapper,
.product-detail-wrapper {
    background: #fafafa !important;
    background-color: #fafafa !important;
    background-image: none !important;
}

/* Match products page button styling */
html body .product-detail-wrapper .btn,
html body .product-detail-wrapper .product-btn-detail {
    background: white !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
}

/* Category page button styling - Apply same light purple hover */
.products-page-wrapper .product-card .btn:hover,
.products-page-wrapper .product-card .btn-outline-secondary:hover {
    background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 100%) !important;
    border-color: #d8b4fe !important;
    color: white !important;
    /* DISABLED: transform to prevent flickering */
    box-shadow: 0 4px 15px rgba(216, 180, 254, 0.4) !important;
}

html body .product-detail-wrapper .product-btn-detail.btn-primary {
    background: white !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
}

html body .product-detail-wrapper .product-btn-detail.btn-primary:hover {
    background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 100%) !important;
    border-color: #d8b4fe !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(216, 180, 254, 0.4) !important;
}

html body .product-detail-wrapper .product-btn-detail.btn-outline-secondary {
    background: white !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
}

html body .product-detail-wrapper .product-btn-detail.btn-outline-secondary:hover {
    background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 100%) !important;
    border-color: #d8b4fe !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(216, 180, 254, 0.4) !important;
}

/* Restore size item styling */
html body .product-detail-wrapper .size-item-detail {
    background: white !important;
    border: 1px solid rgba(248,187,217,0.2) !important;
    border-radius: 15px !important;
    padding: 1rem !important;
    transition: all 0.3s ease !important;
}

html body .product-detail-wrapper .size-item-detail:hover {
    background: rgba(248,187,217,0.05) !important;
    border-color: #f8bbd9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(248,187,217,0.2) !important;
}

/* Restore card styling */
html body .product-detail-wrapper .card {
    background: white !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* Restore badge styling */
html body .product-detail-wrapper .badge {
    background: rgba(255,255,255,0.95) !important;
    color: #e879f9 !important;
    border: 1px solid rgba(248,187,217,0.3) !important;
}

/* Restore breadcrumb styling */
html body .product-detail-wrapper .breadcrumb {
    background: rgba(255,255,255,0.9) !important;
    border-radius: 15px !important;
    padding: 1rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Ensure products page and product detail page have EXACT same background */
html body .products-page-wrapper {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    background-image: none !important;
}

html body .product-detail-wrapper {
    background: #fafafa !important;
    background-color: #fafafa !important;
    background-image: none !important;
}

/* ===== PRODUCT IMAGE GALLERY STYLING ===== */
.product-image-gallery {
    position: relative;
}

.main-image-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(248,187,217,0.2);
    background: #f8f9fa; /* Light gray background for better visibility */
    margin-bottom: 1rem;
    height: 500px; /* Fixed height to prevent shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px; /* Ensure minimum height */
}

/* No Image Placeholder Styling */
.no-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 20px;
}

.no-image-content {
    text-align: center;
    color: #6c757d;
}

.no-image-content i {
    margin-bottom: 1rem;
    opacity: 0.6;
}

.no-image-text {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    color: #6c757d;
}

.image-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.image-nav-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 15px;
}

.next-btn {
    right: 15px;
}

.thumbnail-gallery {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: #e879f9;
    transform: scale(1.05);
}

/* ===== PRODUCT SIZES STYLING ===== */
.sizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.size-item-detail {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(248, 187, 217, 0.3);
    border-radius: 15px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.size-item-detail:hover {
    border-color: #e879f9;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(248, 187, 217, 0.3);
}

.size-info {
    margin-bottom: 0.5rem;
}

.size-name {
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 0.25rem;
}

.size-value {
    color: #6b7280;
    font-size: 0.9rem;
}

.size-price {
    margin-bottom: 0.5rem;
}

.size-price .price {
    font-weight: 600;
    color: #e879f9;
    font-size: 1.1rem;
}

.size-stock .stock {
    color: #6b7280;
    font-size: 0.85rem;
}

/* RTL Breadcrumb Custom Slashes - Add slashes between items EXCEPT first */
.product-detail-wrapper[style*="direction: rtl"] .breadcrumb-item:not(:first-child):not(:last-child)::after,
html[dir="rtl"] .breadcrumb-item:not(:first-child):not(:last-child)::after {
    content: "/" !important;
    color: #000000 !important;
    font-weight: 600 !important;
    margin: 0 0.25rem !important;
    opacity: 0.8 !important;
    display: inline !important;
}

/* RTL Breadcrumb - Add slash before last item (نام محصول) */
.product-detail-wrapper[style*="direction: rtl"] .breadcrumb-item:last-child::before,
html[dir="rtl"] .breadcrumb-item:last-child::before {
    content: "/" !important;
    color: #000000 !important;
    font-weight: 600 !important;
    margin: 0 0.25rem !important;
    opacity: 0.8 !important;
    display: inline !important;
}

/* Hide all default Bootstrap slashes */
.product-detail-wrapper[style*="direction: rtl"] .breadcrumb-item + .breadcrumb-item::before,
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "" !important;
    display: none !important;
}

/* Cache-busting timestamp - Updated: Tue Oct 21 15:35:00 PDT 2025 - FIX BREADCRUMB SLASHES */

/* Brand Page Product Cards Styling */

/* Products Page - Ensure content is below fixed navigation bar */
body .products-page-wrapper,
html body .products-page-wrapper,
.products-page .products-page-wrapper,
body.products-page .products-page-wrapper {
    padding-top: 160px !important;
    margin-top: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Force white background on products page - highest specificity */
html body.products-page,
body.products-page {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
}

html.products-page,
html body.products-page {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
}

html body.products-page .products-page-wrapper,
body.products-page .products-page-wrapper,
html body.products-page .container-fluid,
body.products-page .container-fluid,
html body.products-page .row,
body.products-page .row,
html body.products-page .col-12,
body.products-page .col-12,
.products-page-wrapper,
.products-page-wrapper .container-fluid,
.products-page-wrapper .row {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Ensure footer appears directly after products page content - no white space */
body.products-page .products-page-wrapper {
    margin-bottom: 0 !important;
}

body.products-page main {
    background: transparent !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.products-page footer {
    margin-top: 0 !important;
    padding-top: 3rem !important;
    background: #212529 !important;
    background-color: #212529 !important;
    position: relative;
    z-index: 1;
}

body.products-page .container-fluid.products-page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.products-page .products-page-wrapper > .container-fluid {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.products-page .products-page-wrapper > .container-fluid > .row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove all spacing between products page and footer */
body.products-page .products-page-wrapper + footer,
body.products-page main + footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.products-page .products-page-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

body.products-page .products-page-wrapper > .container-fluid:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.products-page .products-page-wrapper > .container-fluid > .row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.products-page .products-page-wrapper > .container-fluid > .row > .col-12:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.products-page main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

/* Ensure no gap between main and footer on products page */
body.products-page main + footer {
    margin-top: 0 !important;
    padding-top: 3rem !important;
}

/* Make sure footer background covers any potential white space on products page */
body.products-page footer,
body.products-page footer.bg-dark {
    background: #212529 !important;
    background-color: #212529 !important;
    margin-top: 0 !important;
    padding-top: 3rem !important;
    position: relative;
    z-index: 10;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure footer container and all child elements have transparent background */
body.products-page footer .container,
body.products-page footer .container-fluid,
body.products-page footer .row,
body.products-page footer [class*="col-"],
body.products-page footer div,
body.products-page footer section {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override any white background that might be applied to footer children */
body.products-page footer *:not(.bg-dark):not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
    background-color: transparent !important;
}

/* Force remove any white background from footer elements */
body.products-page footer,
body.products-page footer.bg-dark,
body.products-page footer .container,
body.products-page footer .container-fluid,
body.products-page footer .row,
body.products-page footer [class*="col-"],
body.products-page footer div,
body.products-page footer section,
body.products-page footer ul,
body.products-page footer li,
body.products-page footer p,
body.products-page footer h4,
body.products-page footer h5,
body.products-page footer h6 {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure footer itself has dark background */
body.products-page footer,
body.products-page footer.bg-dark {
    background: #212529 !important;
    background-color: #212529 !important;
}

/* Ensure products wrapper doesn't create white space below */
body.products-page .products-page-wrapper::after {
    content: '';
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Ensure body and html don't show white background below footer */
body.products-page {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
}

body.products-page main {
    background: transparent !important;
    background-color: transparent !important;
}

/* Make footer extend to cover any potential white space */
body.products-page footer {
    background: #212529 !important;
    background-color: #212529 !important;
    min-height: auto;
}

/* Match Sephora-style title size for Featured Products, Coming Soon, Latest News, and Brands on home page (both English and Persian) */
body.home-page section h2.text-center,
body.home-page h2.text-center {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* Sephora-style product card font sizes - Universal */
.product-card .card-body .text-muted.small,
.product-card .card-body p.text-muted.small,
.product-card .small.text-muted {
    font-size: 0.75rem !important; /* 12px - Sephora brand name size */
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.product-card .card-title,
.product-card h6.card-title {
    font-size: 0.875rem !important; /* 14px - Sephora product name size */
    font-weight: 400 !important; /* Regular weight like Sephora */
    line-height: 1.4 !important;
}

/* Sephora-style news card font sizes on home page */
body.home-page .card:not(.product-card) h5.card-title {
    font-size: 0.875rem !important; /* 14px - Match product name size */
    font-weight: 600 !important; /* Semi-bold for article titles */
    line-height: 1.4 !important;
    color: #2d3748 !important;
}

body.home-page .card:not(.product-card) .card-text.text-muted.small {
    font-size: 0.75rem !important; /* 12px - Match brand name size */
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

body.home-page .card:not(.product-card) .card-text:not(.text-muted) {
    font-size: 0.875rem !important; /* 14px - Match product name size */
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #4a5568 !important;
}

body.home-page .card:not(.product-card) .btn {
    font-size: 0.75rem !important; /* 12px - Match brand name size */
    font-weight: 600 !important;
}

/* View All News button font size */
body.home-page .btn-outline-primary.btn-lg {
    font-size: 0.875rem !important; /* 14px - Match product name size */
    font-weight: 600 !important;
}

/* ===== ABOUT KAJIREH PAGE FONT SIZES ===== */
/* Hero Section */
.about-hero h1.display-4 {
    font-size: 1.5rem !important; /* 24px - Match section titles */
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.about-hero h2.h3 {
    font-size: 1rem !important; /* 16px */
    font-weight: 400 !important;
}

.about-hero .btn {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    text-transform: none !important; /* Ensure proper capitalization */
}

/* Section Titles */
section h2.display-5,
section h2 {
    font-size: 1.5rem !important; /* 24px - Match section titles */
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

section .lead {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* Story Section */
.story-content h3.h2 {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
}

.story-content .story-text.lead {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* Team Section */
.team-content h4 {
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
}

.team-content p.text-primary {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
}

.team-content p.text-muted {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.team-content .btn {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 600 !important;
}

/* Values Section */
.value-content h5 {
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
}

.value-content p.text-muted {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* CTA Section */
.cta-section h3.display-6 {
    font-size: 1.5rem !important; /* 24px - Match section titles */
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.cta-section .lead {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.cta-section .btn {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    text-transform: none !important; /* Ensure proper capitalization */
}

/* Ensure products-page-wrapper doesn't extend beyond content */
body.products-page .products-page-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible;
}

/* Make sure main element doesn't create white space */
body.products-page main {
    background: transparent !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure footer starts immediately after products content */
body.products-page main::after {
    content: '';
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Reduce padding when search header is present */
body .products-page-wrapper.has-search,
html body .products-page-wrapper.has-search,
.products-page .products-page-wrapper.has-search,
body.products-page .products-page-wrapper.has-search {
    padding-top: 60px !important;
}

/* Reduce padding when search header is present */
body .products-page-wrapper.has-search,
html body .products-page-wrapper.has-search,
.products-page .products-page-wrapper.has-search,
body.products-page .products-page-wrapper.has-search {
    padding-top: 60px !important;
}

/* Force products page search button to be gray - override all pink/purple */
html body .products-page .col-lg-2 .card .card-body .input-group .btn-primary,
body .products-page .col-lg-2 .card .card-body .input-group .btn-primary,
html body .products-page .input-group .btn-primary,
body .products-page .input-group .btn-primary {
    background: #6c757d !important;
    border-color: #6c757d !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

html body .products-page .col-lg-2 .card .card-body .input-group .btn-primary:hover,
body .products-page .col-lg-2 .card .card-body .input-group .btn-primary:hover,
html body .products-page .input-group .btn-primary:hover,
body .products-page .input-group .btn-primary:hover {
    background: #5a6268 !important;
    border-color: #5a6268 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Cache-busting timestamp - Updated: Fri Oct 25 23:30:00 PDT 2025 - SEARCH BUTTON GRAY */

/* Active Filter Badges Hover Effect */
.badge:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.badge .fa-times {
    margin-left: 0.25rem;
    opacity: 0.7;
}

.badge:hover .fa-times {
    opacity: 1;
}

/* RTL support for badge icons */
[dir="rtl"] .badge .fa-times {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* ============================================
   UNIVERSAL SEPHORA-STYLE FONT SIZES
   Applied across all pages of Kajireh website
   ============================================ */

/* Main Page Titles (H1) */
h1:not(.hero-title):not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(.display-5):not(.display-6) {
    font-size: 1.5rem !important; /* 24px - matches section titles */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

/* Section Titles (H2) */
h2:not(.hero-subtitle):not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(.display-5):not(.display-6) {
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

/* Subsection Titles (H3) */
h3:not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(.display-5):not(.display-6) {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Sub-subsection Titles (H4) */
h4:not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(.display-5):not(.display-6) {
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Small Titles (H5) */
h5:not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(.display-5):not(.display-6) {
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Smallest Titles (H6) */
h6:not(.display-1):not(.display-2):not(.display-3):not(.display-4):not(.display-5):not(.display-6) {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Body Text - Paragraphs */
p:not(.lead):not(.small):not(.text-muted.small) {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Lead Text (Subtitles) */
.lead {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Small Text */
.small,
.text-muted.small {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.5 !important;
}

/* Buttons - Standard */
.btn:not(.btn-sm):not(.btn-lg):not(.btn-xl) {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
}

/* Small Buttons */
.btn-sm {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 600 !important;
}

/* Large Buttons */
.btn-lg {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
}

/* Card Titles */
.card-title {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Card Text */
.card-text:not(.text-muted.small) {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Form Labels */
.form-label {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
}

/* Form Inputs */
.form-control,
.form-select {
    font-size: 0.875rem !important; /* 14px */
}

/* Section Titles (using class) */
.section-title {
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Section Subtitles */
.section-subtitle {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Hero Titles - Keep larger for impact */
.hero-title {
    font-size: 2rem !important; /* 32px - slightly larger for hero sections */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.hero-subtitle {
    font-size: 1rem !important; /* 16px */
    line-height: 1.6 !important;
}

/* Article/News Card Titles */
.news-card .card-title,
.article-card .card-title {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
}

/* Article/News Card Text */
.news-card .card-text,
.article-card .card-text {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Brand Card Titles */
.brand-card .card-title {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
}

/* Brand Card Text */
.brand-card .card-text {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Navigation Links */
.navbar-nav .nav-link {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 500 !important;
}

/* Footer Text */
footer p,
footer .text-muted {
    font-size: 0.875rem !important; /* 14px */
}

footer h5,
footer h6 {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.75rem !important; /* 12px */
}

.breadcrumb-item {
    font-size: 0.75rem !important; /* 12px */
}

/* Badges */
.badge {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 600 !important;
}

/* Table Headers */
table thead th {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
}

/* Table Body */
table tbody td {
    font-size: 0.875rem !important; /* 14px */
}

/* List Items */
li {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Blockquotes */
blockquote {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Alert Messages */
.alert {
    font-size: 0.875rem !important; /* 14px */
}

.alert-heading {
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
}

/* Modal Titles */
.modal-title {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
}

/* Modal Body Text */
.modal-body {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* Pagination */
.pagination .page-link {
    font-size: 0.875rem !important; /* 14px */
}

/* Tooltips */
.tooltip {
    font-size: 0.75rem !important; /* 12px */
}

/* Dropdown Menu Items */
.dropdown-menu .dropdown-item {
    font-size: 0.875rem !important; /* 14px */
}

/* Exceptions for specific display classes (keep original sizes) */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    /* Keep original Bootstrap display sizes */
}

/* Exceptions for product cards (already styled) */
.product-card .card-title,
.product-card .text-muted.small {
    /* Already styled with specific rules */
}

/* Exceptions for home page hero banner */
.hero-banner h1 {
    /* Already styled with specific rules */
}

/* Specific Title Classes - Apply Sephora Style */
.brand-title-modern {
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.story-title-modern {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
}

.modern-section-title {
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.modern-section-subtitle {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

.modern-related-title {
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.modern-related-subtitle {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

.sephora-about-title {
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.cta-title {
    font-size: 1.5rem !important; /* 24px - Sephora style */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    /* Preserve gradient if it exists */
}

.back-title {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
}