/*
 * Kajireh Cosmetic Hygienic - Final Frontend Design Styles
 * 
 * This stylesheet contains all the modern, responsive CSS for the Kajireh website.
 * Features include:
 * 
 * - Kajireh-style 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
 */

/* ========================================
   CRITICAL MOBILE FIXES - HIGHEST PRIORITY
   ======================================== */

/* Mobile Base Reset - Must be first */
@media (max-width: 991.98px) {
    /* Force no horizontal scroll */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Force all elements to respect viewport */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* All containers must fit viewport */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* All rows must fit */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* All columns must fit */
    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Hero Banner - Critical Fix */
    .hero-banner {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-banner .container,
    .hero-banner .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-banner .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .hero-banner [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero-banner-image,
    .hero-banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Footer - Critical Fix */
    footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    footer .container,
    footer .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    footer [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Brands Section - Mobile Fix */
    #brandsContainer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #brandsContainer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-wrap: nowrap !important;
    }
    
    #brandsContainer [class*="col-"] {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    @media (min-width: 576px) {
        #brandsContainer [class*="col-"] {
            width: 33.333% !important;
            max-width: 33.333% !important;
        }
    }
    
    @media (min-width: 768px) {
        #brandsContainer .row {
            flex-wrap: wrap !important;
        }
        #brandsContainer [class*="col-"] {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: none !important;
        }
    }
    
    /* Navigation - Critical Fix */
    .navbar,
    .kajireh-header,
    .kajireh-main-header {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .navbar .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Mobile Menu Links - Ensure Clickable - SIMPLIFIED */
    .navbar-collapse {
        position: relative !important;
        z-index: 1000 !important;
        pointer-events: auto !important;
    }
    
    .navbar-collapse.show {
        z-index: 1000 !important;
        pointer-events: auto !important;
    }
    
    .navbar-nav {
        pointer-events: auto !important;
        z-index: 1001 !important;
        position: relative !important;
    }
    
    .navbar-nav .nav-item {
        pointer-events: auto !important;
        z-index: 1001 !important;
        position: relative !important;
    }
    
    .navbar-nav .nav-link {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        position: relative !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        text-decoration: none !important;
        display: block !important;
    }
    
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:active,
    .navbar-nav .nav-link:focus {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1001 !important;
    }
    
    /* Ensure header doesn't block menu */
    .kajireh-header {
        z-index: 999 !important;
    }
    
    .kajireh-main-header {
        z-index: 999 !important;
    }
    
    /* Ensure no overlays block the menu */
    .kajireh-header::before,
    .kajireh-header::after,
    .kajireh-main-header::before,
    .kajireh-main-header::after,
    .navbar::before,
    .navbar::after {
        pointer-events: none !important;
        z-index: 0 !important;
    }
    
    /* Images - Critical Fix */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Logo Size Fix - Mobile - Hide logo images */
    .navbar-brand img,
    .kajireh-logo img {
        display: none !important;
    }
    
    .navbar-brand.kajireh-logo {
        max-width: 200px !important;
        overflow: hidden !important;
    }
    .navbar-brand.kajireh-logo span {
        font-size: 1rem !important;
        white-space: nowrap !important;
    }
    
    /* Tables - Critical Fix */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    
    table {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* FOUC prevention removed - was causing flickering */

/* Modern CSS Variables for Enhanced Design */
:root {
    /* Enhanced Color Palette */
    --kajireh-black: #000000;
    --kajireh-white: #ffffff;
    --kajireh-lavender: #E8DFF0;
    --kajireh-pink: #F8E8F0;
    --kajireh-red: #E0002B;
    --kajireh-gold: #FFD700;
    --kajireh-gray: #666666;
    --kajireh-light-gray: #f5f5f5;
    --kajireh-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(--kajireh-black);
    --secondary-color: var(--kajireh-red);
    --accent-color: var(--kajireh-gold);
    --dark-color: var(--kajireh-black);
    --light-color: var(--kajireh-white);
    --text-color: var(--kajireh-black);
    --border-color: var(--kajireh-border);
    --hover-bg: var(--kajireh-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"] .kajireh-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 */
.kajireh-search-mobile .search-input {
    height: 36px;
    font-size: 14px;
    padding: 8px 40px 8px 12px;
}

.kajireh-search-mobile .search-btn {
    right: 6px;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
}

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

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

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

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

/* Global Styles */
/* Mobile Viewport Fixes */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Fix for iOS Safari viewport height */
    height: -webkit-fill-available;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    background: var(--kajireh-white);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Fix for iOS Safari viewport height */
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

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

/* Kajireh-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; /* Kajireh-style: regular weight */
    font-size: 0.875rem !important; /* Kajireh-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; /* Kajireh-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;
}

.brands-wrapper {
    position: relative !important;
    padding: 0 50px !important;
}

/* Center carousels for English (LTR) - Force center alignment */
/* For English, align home product/brand carousels left */
html:not([dir="rtl"]) .home-page .featured-products-wrapper,
html:not([dir="rtl"]) .home-page .coming-soon-wrapper,
html:not([dir="rtl"]) .home-page .brands-wrapper {
    text-align: left !important;
}

/* Remove padding on mobile to allow full-width swipe */
@media (max-width: 991px) {
    .featured-products-wrapper,
    .coming-soon-wrapper,
    .brands-wrapper {
        padding: 0 15px !important;
    }
    
    .featured-products-track,
    .coming-soon-track {
        grid-auto-columns: calc(100% - 30px) !important;
        gap: 1rem !important;
    }
    
    .brands-track {
        grid-auto-columns: calc((100% - 30px) / 2) !important;
        gap: 0.75rem !important;
    }
}

/* Landscape mobile/tablet: show more than one card */
@media (max-width: 991px) and (orientation: landscape) {
    /* Home news cards: two per row */
    #news-articles-container > .col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* About team cards: two per row */
    #our-team .row > div[class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Home product/coming-soon sliders: show two at a time */
    .featured-products-track,
    .coming-soon-track {
        grid-auto-columns: calc((100% - 30px) / 2) !important;
    }

    /* News page cards: two per row */
    .articles-page .row > div[class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Products listing: two per row on landscape mobile */
    .products-page .row > div[class*="col-lg-3"],
    .products-page .row > div[class*="col-md-4"],
    .products-page .row > div[class*="col-sm-6"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Distributors page cards: two per row on landscape mobile */
    .distributors-page .row > div.col-lg-4,
    .distributors-page .row > div.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* About page - Our Values: two per row on landscape mobile */
    .about-page .row > div.col-lg-4.col-md-6.mb-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Contact page: form and info side-by-side on landscape mobile */
    .contact-page .row > .col-lg-8 {
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    .contact-page .row > .col-lg-4 {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    /* About page - Our Values: two per row on landscape mobile */
    #our-values .row + .row > div[class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !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;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

.brands-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 110px) / 6) !important;
    gap: 1rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 1rem !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

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

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

.brand-slide {
    scroll-snap-align: start !important;
    display: flex !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

/* Fixed size for brand cards in carousel */
.brand-slide .brand-card {
    width: 100% !important;
    height: 120px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.brand-slide .brand-card .card-body {
    padding: 0.75rem !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
}

.brand-slide .brand-card .card-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !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.brands-prev,
.product-carousel-nav.brands-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
}

.product-carousel-nav.featured-prev,
.product-carousel-nav.featured-next,
.product-carousel-nav.coming-prev,
.product-carousel-nav.coming-next,
.product-carousel-nav.brands-prev,
.product-carousel-nav.brands-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,
.product-carousel-nav.brands-prev.visible,
.product-carousel-nav.brands-next.visible {
    display: inline-flex !important;
}

/* Override visible class on mobile - hide all arrows */
@media (max-width: 991px) {
    .product-carousel-nav.featured-prev.visible,
    .product-carousel-nav.featured-next.visible,
    .product-carousel-nav.coming-prev.visible,
    .product-carousel-nav.coming-next.visible,
    .product-carousel-nav.brands-prev.visible,
    .product-carousel-nav.brands-next.visible,
    .product-carousel-nav.visible {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

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

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

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

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

@media (max-width: 575px) {
    .featured-products-track,
    .coming-soon-track {
        grid-auto-columns: calc(100% - 110px) !important;
    }
    
    .brands-track {
        grid-auto-columns: calc((100% - 110px) / 2) !important;
        gap: 0.75rem !important;
    }
    
    .brand-slide .brand-card {
        height: 100px !important;
    }
    
    .brand-slide .brand-card .card-body {
        padding: 0.5rem !important;
    }
    
    .brand-slide .brand-card .card-title {
        font-size: 0.8rem !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(--kajireh-border) !important;
    padding: var(--spacing-md) !important;
    /* DISABLED: transition to prevent flickering */
    background: var(--kajireh-white) !important;
}

.form-control:focus {
    border-color: var(--kajireh-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(--kajireh-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(--kajireh-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(--kajireh-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(--kajireh-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(--kajireh-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 */
    .kajireh-header {
        padding: var(--spacing-sm) 0 !important;
    }
    
    .kajireh-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 - Hide arrows on mobile, use finger swipe instead */
    .product-carousel-nav,
    .product-carousel-nav.visible,
    .product-carousel-nav.featured-prev,
    .product-carousel-nav.featured-next,
    .product-carousel-nav.coming-prev,
    .product-carousel-nav.coming-next,
    .product-carousel-nav.brands-prev,
    .product-carousel-nav.brands-next {
        display: none !important; /* Hide on mobile - use finger swipe */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Disabled state for mobile carousel arrows */
    .product-carousel-nav.disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        pointer-events: none !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 {
    .kajireh-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(--kajireh-red) !important;
    outline-offset: 2px !important;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--kajireh-black);
    color: var(--kajireh-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: 25vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 4rem !important;
    margin-top: 0 !important; /* no gap between fixed bar and hero */
}

/* About page: remove main margin so no gap between fixed bar and hero */
body.about-page main {
    margin-top: 0 !important;
}

/* Ensure hero container is centered in RTL */
html[dir="rtl"] .about-hero,
[dir="rtl"] .about-hero {
    justify-content: center !important;
}

html[dir="rtl"] .about-hero .container,
[dir="rtl"] .about-hero .container {
    text-align: center !important;
}

html[dir="rtl"] .about-hero .row,
[dir="rtl"] .about-hero .row {
    justify-content: 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;
    text-align: center !important;
}

.about-hero-content {
    text-align: center !important;
}

/* Ensure content stays centered in RTL */
html[dir="rtl"] .about-hero-content,
[dir="rtl"] .about-hero-content {
    text-align: center !important;
}

html[dir="rtl"] .about-hero-content h1,
html[dir="rtl"] .about-hero-content h2,
[dir="rtl"] .about-hero-content h1,
[dir="rtl"] .about-hero-content h2 {
    text-align: center !important;
}

html[dir="rtl"] .about-hero-content .btn,
[dir="rtl"] .about-hero-content .btn {
    text-align: center !important;
}

html[dir="rtl"] .about-hero .container,
[dir="rtl"] .about-hero .container {
    text-align: center !important;
}

html[dir="rtl"] .about-hero .row,
[dir="rtl"] .about-hero .row {
    justify-content: center !important;
    text-align: center !important;
}

html[dir="rtl"] .about-hero .row [class*="col-"],
[dir="rtl"] .about-hero .row [class*="col-"] {
    text-align: center !important;
}

/* Ensure content stays centered in RTL */
html[dir="rtl"] .about-hero-content,
[dir="rtl"] .about-hero-content {
    text-align: center !important;
    direction: ltr !important; /* Keep content LTR for centering */
}

html[dir="rtl"] .about-hero-content h1,
html[dir="rtl"] .about-hero-content h2,
html[dir="rtl"] .about-hero-content .btn {
    text-align: center !important;
}

.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;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

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

/* Team Cards - per language alignment */
html[dir="rtl"] .team-card {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="ltr"] .team-card {
    text-align: left !important;
    direction: ltr !important;
}

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

.team-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
}

html[dir="rtl"] .team-card .team-content {
    align-items: flex-end !important;
    text-align: right !important;
    direction: rtl !important;
}

html[dir="ltr"] .team-card .team-content {
    align-items: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
}

.team-card .team-content h4,
.team-card .team-content p {
    width: 100% !important;
}

.team-social {
    margin-top: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-align: center !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(--kajireh-black) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-sm) !important;
}

.team-content p {
    color: var(--kajireh-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(--kajireh-black) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-md) !important;
}

.value-content p {
    color: var(--kajireh-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(--kajireh-black) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-lg) !important;
}

.cta-content p {
    color: var(--kajireh-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: 20vh !important;
        padding-top: 3rem !important;
        margin-top: 1.5rem !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: 18vh !important;
        padding-top: 2.5rem !important;
        margin-top: 1rem !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: 40vh !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;
    padding-top: 3rem !important;
}

.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);
}

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

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

.kajireh-promo-banner .container {
    display: block;
    white-space: normal;
    text-align: center;
}

/* Mobile: Allow text to wrap on small screens */
@media (max-width: 576px) {
    .kajireh-promo-banner {
        white-space: normal;
        padding: 6px 0;
        font-size: 12px;
    }
    
    .kajireh-promo-banner .container {
        padding: 0 10px;
    }
}

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

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

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

/* Mobile Header Layout - Kajireh Style (Logo | Search | Icons in one row) */
@media (max-width: 991.98px) {
    .kajireh-main-header {
        padding: 10px 0;
    }
    
    .kajireh-main-header .container > .d-flex {
        width: 100%;
        gap: 0.5rem;
    }
    
    /* Ensure search bar takes available space */
    .kajireh-search-mobile {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    
    /* Compact logo */
    .kajireh-main-header .navbar-brand {
        flex-shrink: 0;
        margin-right: 0.5rem;
        padding: 0;
    }
    
    /* Compact icons group */
    .kajireh-main-header .d-flex.align-items-center:last-child {
        flex-shrink: 0;
        gap: 0.75rem;
    }
}

/* Kajireh-style Mobile Icons (Contact, Menu) */
.kajireh-mobile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #000000 !important; /* Black color for mobile icons */
    text-decoration: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
}

.kajireh-mobile-icon:hover,
.kajireh-mobile-icon:focus {
    color: var(--kajireh-red);
    background: transparent;
    border: none;
    outline: none;
}

/* Ensure contact icon is black, not blue */
.kajireh-mobile-icon,
.kajireh-mobile-icon:link,
.kajireh-mobile-icon:visited {
    color: #000000 !important;
}

.kajireh-mobile-icon i {
    font-size: 20px;
    line-height: 1;
}

.kajireh-mobile-icon.navbar-toggler {
    border: none;
    box-shadow: none;
}

.kajireh-mobile-icon.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.kajireh-mobile-icon.navbar-toggler .navbar-toggler-icon {
    width: 20px;
    height: 20px;
    background-size: 20px;
}

/* Kajireh logo - circular display */
.kajireh-logo-circle {
    border-radius: 50%;
    object-fit: cover;
    width: 60px;
    height: 60px;
}

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

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


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

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

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

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

/* LTR English: Container for language switcher and icons - takes available space */
.kajireh-header-right-container {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

/* LTR English: Separate container for Contact and Distributors icons - push to far right */
.kajireh-header-icons-ltr {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: 2rem;
}

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

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

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

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

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

.kajireh-nav-item {
    color: var(--kajireh-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;
}

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

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

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

/* Kajireh-style mega menu dropdown */
.kajireh-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 600px;
    width: auto;
    background-color: var(--kajireh-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;
}

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

/* Mega menu content container */
.kajireh-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 */
.kajireh-mega-column {
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

/* RTL Support for mega menu */
html[dir="rtl"] .kajireh-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"] .kajireh-mega-column .mega-link::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .kajireh-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) {
    .kajireh-mega-menu {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    .kajireh-nav .dropdown-menu {
        min-width: 100%;
        position: static;
        box-shadow: none;
        border: 1px solid var(--kajireh-border);
        margin-top: 10px;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    
    .kajireh-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 */
.kajireh-nav-item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.kajireh-nav-item::before,
.kajireh-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;
}

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

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

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

.kajireh-nav-item:hover,
.kajireh-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 */
.kajireh-nav-item:hover,
.kajireh-nav-item.dropdown-toggle:hover {
    text-shadow: 0 0 8px rgba(224,0,43,0.3);
}

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

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

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

/* Pulse animation on hover - DISABLED to prevent flickering */
/* @keyframes Kajireh-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); }
} */

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

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

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

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

.kajireh-nav-item::before,
.kajireh-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;
}

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

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

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

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

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

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

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

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

.kajireh-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(--kajireh-white);
}

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

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

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

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

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

.banner-link:hover {
    color: var(--kajireh-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: 90px; /* Mobile header height reduced */
    }
}

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

/* Mobile + English only: Home & About - factory name clears fixed bar */
@media (max-width: 991.98px) {
    html:not([dir="rtl"]) body.home-page,
    html:not([dir="rtl"]) body.about-page {
        padding-top: 130px !important; /* Clear fixed header so hero h1 is visible */
    }
}
@media (max-width: 575.98px) {
    html:not([dir="rtl"]) body.home-page,
    html:not([dir="rtl"]) body.about-page {
        padding-top: 120px !important; /* Clear fixed header on small mobile */
    }
}

/* Portrait + English only: Home & About - factory name clears fixed bar */
@media screen and (orientation: portrait) and (max-width: 768px) {
    html:not([dir="rtl"]) body.home-page,
    html:not([dir="rtl"]) body.about-page {
        padding-top: 130px !important; /* Clear fixed header in portrait */
    }
}

/* Landscape + English only: Home & About - factory name clears fixed bar */
@media screen and (orientation: landscape) and (max-width: 1024px) {
    html:not([dir="rtl"]) body.home-page,
    html:not([dir="rtl"]) body.about-page {
        padding-top: 120px !important; /* Clear fixed header in landscape */
    }
}

/* Mobile + Persian (RTL) only: Home & About - factory name clears fixed bar */
@media (max-width: 991.98px) {
    html[dir="rtl"] body.home-page,
    html[dir="rtl"] body.about-page {
        padding-top: 130px !important; /* Clear fixed header so hero h1 is visible */
    }
}
@media (max-width: 575.98px) {
    html[dir="rtl"] body.home-page,
    html[dir="rtl"] body.about-page {
        padding-top: 120px !important; /* Clear fixed header on small mobile */
    }
}

/* Portrait + Persian (RTL) only: Home & About - factory name clears fixed bar */
@media screen and (orientation: portrait) and (max-width: 768px) {
    html[dir="rtl"] body.home-page,
    html[dir="rtl"] body.about-page {
        padding-top: 130px !important; /* Clear fixed header in portrait */
    }
}

/* Landscape + Persian (RTL) only: Home & About - factory name clears fixed bar */
@media screen and (orientation: landscape) and (max-width: 1024px) {
    html[dir="rtl"] body.home-page,
    html[dir="rtl"] body.about-page {
        padding-top: 120px !important; /* Clear fixed header in landscape */
    }
}

/* Mobile + English only: Reduce hero banner font sizes to align with section titles (1.5rem) */
@media (max-width: 991.98px) {
    html:not([dir="rtl"]) body.home-page .hero-banner h1,
    html:not([dir="rtl"]) body.home-page .hero-banner .display-5 {
        font-size: 1.5rem !important; /* Matches section titles (24px) */
    }
    html:not([dir="rtl"]) body.about-page .about-hero-content h1,
    html:not([dir="rtl"]) body.about-page .about-hero-content .display-4 {
        font-size: 1.5rem !important; /* Matches section titles (24px) */
    }
}
@media (max-width: 575.98px) {
    html:not([dir="rtl"]) body.home-page .hero-banner h1,
    html:not([dir="rtl"]) body.home-page .hero-banner .display-5 {
        font-size: 1.4rem !important; /* Slightly smaller for small mobile (22.4px) */
    }
    html:not([dir="rtl"]) body.about-page .about-hero-content h1,
    html:not([dir="rtl"]) body.about-page .about-hero-content .display-4 {
        font-size: 1.4rem !important; /* Slightly smaller for small mobile (22.4px) */
    }
}

/* Portrait + English only: Reduce hero banner font sizes */
@media screen and (orientation: portrait) and (max-width: 768px) {
    html:not([dir="rtl"]) body.home-page .hero-banner h1,
    html:not([dir="rtl"]) body.home-page .hero-banner .display-5 {
        font-size: 1.5rem !important; /* Matches section titles */
    }
    html:not([dir="rtl"]) body.about-page .about-hero-content h1,
    html:not([dir="rtl"]) body.about-page .about-hero-content .display-4 {
        font-size: 1.5rem !important; /* Matches section titles */
    }
}

/* Landscape + English only: Reduce hero banner font sizes */
@media screen and (orientation: landscape) and (max-width: 1024px) {
    html:not([dir="rtl"]) body.home-page .hero-banner h1,
    html:not([dir="rtl"]) body.home-page .hero-banner .display-5 {
        font-size: 1.5rem !important; /* Matches section titles */
    }
    html:not([dir="rtl"]) body.about-page .about-hero-content h1,
    html:not([dir="rtl"]) body.about-page .about-hero-content .display-4 {
        font-size: 1.5rem !important; /* Matches section titles */
    }
}

/* Navigation - Kajireh 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);
}

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

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

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

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

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

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

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

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

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

.kajireh-dropdown-subheader::after {
    content: '>';
    color: var(--kajireh-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(--kajireh-red);
}

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

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

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

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

/* Hero Banner - Kajireh Style */
.hero-banner {
    background: linear-gradient(135deg, var(--kajireh-black) 0%, #333333 100%);
    min-height: 350px;
    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;
}

/* Mobile: Allow hero banner h1 to wrap */
@media (max-width: 991.98px) {
    .hero-banner h1 {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* 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 Kajireh Style */
.btn-primary {
    background-color: var(--kajireh-black);
    border-color: var(--kajireh-black);
    color: var(--kajireh-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(--kajireh-red);
    border-color: var(--kajireh-red);
    color: var(--kajireh-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(--kajireh-black);
    border-color: var(--kajireh-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(--kajireh-black);
    border-color: var(--kajireh-black);
    color: var(--kajireh-white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-outline-light {
    color: var(--kajireh-white);
    border-color: var(--kajireh-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(--kajireh-white);
    border-color: var(--kajireh-white);
    color: var(--kajireh-black);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* Product Cards - Kajireh 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 */
.kajireh-search-mobile input {
    font-size: 14px;
    padding: 8px 12px;
}

.kajireh-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 */
.kajireh-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(--kajireh-white);
    border-top: 1px solid var(--kajireh-border);
    margin-top: 10px;
    padding: 15px 0;
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

.navbar-collapse.show {
    z-index: 1000 !important;
    pointer-events: auto !important;
}

/* English (LTR) Mobile Menu - Force left alignment */
html:not([dir="rtl"]) .navbar-collapse,
html[dir="ltr"] .navbar-collapse {
    text-align: left !important;
}

html:not([dir="rtl"]) .navbar-nav,
html[dir="ltr"] .navbar-nav {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Prevent alignment shifts during Bootstrap collapse animation */
html:not([dir="rtl"]) .navbar-collapse.collapsing,
html[dir="ltr"] .navbar-collapse.collapsing,
html:not([dir="rtl"]) .navbar-collapse.show,
html[dir="ltr"] .navbar-collapse.show {
    text-align: left !important;
}

html:not([dir="rtl"]) .navbar-collapse.collapsing .navbar-nav,
html[dir="ltr"] .navbar-collapse.collapsing .navbar-nav,
html:not([dir="rtl"]) .navbar-collapse.show .navbar-nav,
html[dir="ltr"] .navbar-collapse.show .navbar-nav {
    text-align: left !important;
    justify-content: flex-start !important;
}

html:not([dir="rtl"]) .navbar-collapse.collapsing .nav-link,
html[dir="ltr"] .navbar-collapse.collapsing .nav-link,
html:not([dir="rtl"]) .navbar-collapse.show .nav-link,
html[dir="ltr"] .navbar-collapse.show .nav-link {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* 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(--kajireh-black) !important;
    border-bottom: 1px solid var(--kajireh-light-gray);
    min-height: 44px; /* Touch-friendly minimum size */
    display: flex;
    align-items: center;
    justify-content: flex-start !important; /* Always align to left for English */
    text-align: left !important; /* Always align text to left for English */
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    position: relative !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    text-decoration: none !important;
}

.navbar-nav .nav-link:active {
    background-color: var(--kajireh-light-gray) !important;
    opacity: 0.8 !important;
}

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

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

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

.dropdown-item {
    padding: 12px 20px;
    font-size: 15px;
    color: var(--kajireh-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(--kajireh-white);
    color: var(--kajireh-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;
    }
    
    /* Hide contact info on mobile */
    footer .footer-contact-info {
        display: none !important;
    }
}

/* RTL Mobile Support */
[dir="rtl"] .navbar-nav .nav-link {
    text-align: right !important;
    justify-content: flex-end !important;
}

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

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

[dir="rtl"] .kajireh-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;
}

/* LTR Footer - Left-align content in English version */
html[dir="ltr"] footer,
html:not([dir="rtl"]) footer {
    text-align: left !important;
}

html[dir="ltr"] footer .col-md-3,
html:not([dir="rtl"]) footer .col-md-3 {
    text-align: left !important;
}

html[dir="ltr"] footer h4,
html[dir="ltr"] footer h5,
html[dir="ltr"] footer h6,
html:not([dir="rtl"]) footer h4,
html:not([dir="rtl"]) footer h5,
html:not([dir="rtl"]) footer h6 {
    text-align: left !important;
}

html[dir="ltr"] footer p,
html[dir="ltr"] footer ul,
html[dir="ltr"] footer li,
html:not([dir="rtl"]) footer p,
html:not([dir="rtl"]) footer ul,
html:not([dir="rtl"]) footer li {
    text-align: left !important;
}

/* Override mobile footer center alignment for LTR */
@media (max-width: 767.98px) {
    html[dir="ltr"] footer,
    html:not([dir="rtl"]) footer {
        text-align: left !important;
    }
    
    html[dir="ltr"] footer .col-md-3,
    html:not([dir="rtl"]) footer .col-md-3 {
        text-align: left !important;
    }
}

/* 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;
}

/* Hero Banner - Center all content including button */
.hero-banner .text-center,
.hero-banner[class*="text-center"],
.hero-banner .row .text-center {
    text-align: center !important;
}

.hero-banner .text-center h1,
.hero-banner .text-center .h1,
.hero-banner .text-center .display-5,
.hero-banner .text-center p,
.hero-banner .text-center .lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero-banner .text-center .btn,
.hero-banner .text-center a.btn {
    text-align: center !important;
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Override LTR left-align rules for hero banner */
html[dir="ltr"] .hero-banner .text-center,
html:not([dir="rtl"]) .hero-banner .text-center {
    text-align: center !important;
}

html[dir="ltr"] .hero-banner .text-center h1,
html[dir="ltr"] .hero-banner .text-center .h1,
html[dir="ltr"] .hero-banner .text-center .display-5,
html[dir="ltr"] .hero-banner .text-center p,
html[dir="ltr"] .hero-banner .text-center .lead,
html:not([dir="rtl"]) .hero-banner .text-center h1,
html:not([dir="rtl"]) .hero-banner .text-center .h1,
html:not([dir="rtl"]) .hero-banner .text-center .display-5,
html:not([dir="rtl"]) .hero-banner .text-center p,
html:not([dir="rtl"]) .hero-banner .text-center .lead {
    text-align: center !important;
}

html[dir="ltr"] .hero-banner .text-center .btn,
html[dir="ltr"] .hero-banner .text-center a.btn,
html:not([dir="rtl"]) .hero-banner .text-center .btn,
html:not([dir="rtl"]) .hero-banner .text-center a.btn {
    text-align: center !important;
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* English (LTR) version: Left-align content instead of center */
html[dir="ltr"] .text-center,
html:not([dir="rtl"]) .text-center {
    text-align: left !important;
}

/* Exception: Keep home page section headings and containers centered for English */
html[dir="ltr"] .home-page section.py-5 h2.text-center,
html:not([dir="rtl"]) .home-page section.py-5 h2.text-center,
html[dir="ltr"] .home-page section h2.text-center,
html:not([dir="rtl"]) .home-page section h2.text-center {
    text-align: center !important;
}

/* Override left-align rule for home page sections */
html[dir="ltr"] .home-page section.py-5 .container,
html:not([dir="rtl"]) .home-page section.py-5 .container {
    text-align: center !important;
}

html[dir="ltr"] .home-page section.py-5 .row,
html:not([dir="rtl"]) .home-page section.py-5 .row {
    justify-content: center !important;
}

/* Override: Home page news section - align left in English */
html:not([dir="rtl"]) .home-page #news-articles-container {
    justify-content: flex-start !important;
    text-align: left !important;
}
/* Exception: Keep About page hero banner centered for English */
html[dir="ltr"] .about-hero .text-center,
html:not([dir="rtl"]) .about-hero .text-center,
html[dir="ltr"] .about-hero-content,
html:not([dir="rtl"]) .about-hero-content,
html[dir="ltr"] .about-hero-content h1,
html:not([dir="rtl"]) .about-hero-content h1,
html[dir="ltr"] .about-hero-content h2,
html:not([dir="rtl"]) .about-hero-content h2,
html[dir="ltr"] .about-hero .container,
html:not([dir="rtl"]) .about-hero .container,
html[dir="ltr"] .about-hero .row,
html:not([dir="rtl"]) .about-hero .row {
    text-align: center !important;
}

/* Exception: Keep About page section headings and containers centered for English */
html[dir="ltr"] #our-story .text-center,
html:not([dir="rtl"]) #our-story .text-center,
html[dir="ltr"] #our-team .text-center,
html:not([dir="rtl"]) #our-team .text-center,
html[dir="ltr"] section.py-5 .text-center,
html:not([dir="rtl"]) section.py-5 .text-center,
html[dir="ltr"] section.py-5 .text-center h2,
html:not([dir="rtl"]) section.py-5 .text-center h2,
html[dir="ltr"] section.py-5 .text-center h3,
html:not([dir="rtl"]) section.py-5 .text-center h3,
html[dir="ltr"] section.py-5 .text-center p,
html:not([dir="rtl"]) section.py-5 .text-center p,
html[dir="ltr"] .cta-section .text-center,
html:not([dir="rtl"]) .cta-section .text-center {
    text-align: center !important;
}

/* Override left-align rule for About page sections */
html[dir="ltr"] #our-story .container,
html:not([dir="rtl"]) #our-story .container,
html[dir="ltr"] #our-team .container,
html:not([dir="rtl"]) #our-team .container {
    text-align: center !important;
}

html[dir="ltr"] #our-story .row,
html:not([dir="rtl"]) #our-story .row,
html[dir="ltr"] #our-team .row,
html:not([dir="rtl"]) #our-team .row {
    justify-content: center !important;
}

/* Exception: Keep Brands page section headings and containers centered for English */
html[dir="ltr"] .brands-page .text-center,
html:not([dir="rtl"]) .brands-page .text-center,
html[dir="ltr"] .brands-page .section-header.text-center,
html:not([dir="rtl"]) .brands-page .section-header.text-center,
html[dir="ltr"] .brands-page h1.text-center,
html:not([dir="rtl"]) .brands-page h1.text-center,
html[dir="ltr"] .brands-page h2.text-center,
html:not([dir="rtl"]) .brands-page h2.text-center,
html[dir="ltr"] .brands-page p.text-center,
html:not([dir="rtl"]) .brands-page p.text-center {
    text-align: center !important;
}

/* Override left-align rule for Brands page sections */
html[dir="ltr"] .brands-page .container,
html:not([dir="rtl"]) .brands-page .container {
    text-align: center !important;
}

html[dir="ltr"] .brands-page .row,
html:not([dir="rtl"]) .brands-page .row {
    justify-content: center !important;
}

/* Exception: Keep Distributors page section headings centered for English (but NOT cards) */
html[dir="ltr"] .distributors-page .text-center,
html:not([dir="rtl"]) .distributors-page .text-center,
html[dir="ltr"] .distributors-page h1.text-center,
html:not([dir="rtl"]) .distributors-page h1.text-center,
html[dir="ltr"] .distributors-page h2.text-center,
html:not([dir="rtl"]) .distributors-page h2.text-center,
html[dir="ltr"] .distributors-page h3.text-center,
html:not([dir="rtl"]) .distributors-page h3.text-center,
html[dir="ltr"] .distributors-page h4.text-center,
html:not([dir="rtl"]) .distributors-page h4.text-center,
html[dir="ltr"] .distributors-page p.text-center,
html:not([dir="rtl"]) .distributors-page p.text-center {
    text-align: center !important;
}

/* Keep page header and search section centered */
html[dir="ltr"] .distributors-page > .row:first-child,
html:not([dir="rtl"]) .distributors-page > .row:first-child,
html[dir="ltr"] .distributors-page > .row:nth-child(2),
html:not([dir="rtl"]) .distributors-page > .row:nth-child(2) {
    justify-content: center !important;
}

/* Distributor cards should be left-aligned (not centered) */
html[dir="ltr"] .distributors-page .distributor-card,
html:not([dir="rtl"]) .distributors-page .distributor-card,
html[dir="ltr"] .distributors-page .distributor-card *,
html:not([dir="rtl"]) .distributors-page .distributor-card * {
    text-align: left !important;
}

/* Rows containing distributor cards should start from left */
html[dir="ltr"] .distributors-page .row:not(:first-child):not(:nth-child(2)),
html:not([dir="rtl"]) .distributors-page .row:not(:first-child):not(:nth-child(2)) {
    justify-content: flex-start !important;
}

/* Exception: Keep Contact page section headings and containers centered for English */
html[dir="ltr"] .contact-page .text-center,
html:not([dir="rtl"]) .contact-page .text-center,
html[dir="ltr"] .contact-page h1.text-center,
html:not([dir="rtl"]) .contact-page h1.text-center,
html[dir="ltr"] .contact-page h2.text-center,
html:not([dir="rtl"]) .contact-page h2.text-center,
html[dir="ltr"] .contact-page h3.text-center,
html:not([dir="rtl"]) .contact-page h3.text-center,
html[dir="ltr"] .contact-page h4.text-center,
html:not([dir="rtl"]) .contact-page h4.text-center,
html[dir="ltr"] .contact-page p.text-center,
html:not([dir="rtl"]) .contact-page p.text-center {
    text-align: center !important;
}

/* Override left-align rule for Contact page sections */
html[dir="ltr"] .contact-page .container,
html:not([dir="rtl"]) .contact-page .container {
    text-align: center !important;
}

html[dir="ltr"] .contact-page .row,
html:not([dir="rtl"]) .contact-page .row {
    justify-content: center !important;
}

/* Keep center alignment for specific elements that should remain centered */
html[dir="ltr"] .text-center.keep-center,
html:not([dir="rtl"]) .text-center.keep-center {
    text-align: center !important;
}

/* Buttons and badges should remain centered in LTR */
html[dir="ltr"] .btn.text-center,
html:not([dir="rtl"]) .btn.text-center,
html[dir="ltr"] .badge.text-center,
html:not([dir="rtl"]) .badge.text-center {
    text-align: center !important;
}

/* 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: 1.8rem !important;
        white-space: normal !important; /* Allow text to wrap on mobile */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }
    
    .hero-banner {
        min-height: 280px;
        margin-top: 0 !important; /* Remove negative margin on mobile */
        padding-top: 0 !important;
    }
    
    .hero-banner .container {
        padding-top: 1.5rem !important; /* Reduce padding on mobile */
    }
    
    .card-img-top {
        height: 200px !important;
    }
}

@media (max-width: 576px) {
    .hero-banner h1 {
        font-size: 1.5rem !important;
        white-space: normal !important; /* Allow text to wrap on small mobile */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }
    
    .hero-banner {
        min-height: 250px;
        margin-top: 0 !important; /* Remove negative margin on small mobile */
        padding-top: 0 !important;
    }
    
    .hero-banner .container {
        padding-top: 1rem !important; /* Reduce padding on small mobile */
    }
    
    .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) {
    .kajireh-logo span {
        font-size: 1rem !important;
    }
    
    .navbar-brand img {
        display: none !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;
    }
}

/* Mobile Orientation Fixes */
/* Portrait Orientation - Fix for locked portrait mode */
@media screen and (orientation: portrait) and (max-width: 768px) {
    /* Hero Banner - Fix for portrait mode */
    .hero-banner {
        margin-top: 0 !important; /* Remove negative margin in portrait */
        padding-top: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .hero-banner h1 {
        font-size: 1.6rem !important;
        white-space: normal !important; /* Allow text to wrap in portrait */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }
    
    .hero-banner .container {
        padding-top: 1.5rem !important; /* Adjust padding for portrait */
    }
    html {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
        height: 100%;
        height: -webkit-fill-available;
    }
    
    body {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    table {
        width: 100%;
        table-layout: auto;
    }
    
    /* Fix for fixed/sticky elements */
    .navbar,
    .navbar-fixed-top,
    .sticky-top {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
    }
    
    /* Hero Banner Mobile Fixes */
    .hero-banner {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-banner .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-banner .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .hero-banner [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero-banner-image,
    .hero-banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Footer Mobile Fixes */
    footer {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    footer [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Landscape Orientation */
@media screen and (orientation: landscape) and (max-width: 1024px) {
    html, body {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Hero Banner - Fix for landscape mode */
    .hero-banner {
        margin-top: 0 !important; /* Remove negative margin in landscape */
        padding-top: 0 !important;
    }
    
    .hero-banner .container {
        padding-top: 1rem !important; /* Adjust padding for landscape */
    }
    
    /* Ensure hero banner doesn't hide under fixed header in landscape */
    body {
        padding-top: 100px !important; /* Reduced to limit top space in landscape */
    }
    
    /* Landscape Mobile Menu - Horizontal Layout when open */
    .navbar-collapse.d-lg-none.show {
        display: flex !important; /* Show menu in landscape only when .show class is present */
        position: static !important;
        margin-top: 0 !important;
        padding: 0 !important;
        border-top: none !important;
        background-color: transparent !important;
        height: auto !important; /* Override Bootstrap collapse height */
        overflow: visible !important;
        max-height: none !important;
    }
    
    /* Keep menu hidden by default in landscape (Bootstrap collapse behavior) */
    .navbar-collapse.d-lg-none:not(.show) {
        display: none !important; /* Hidden by default, show only when hamburger clicked */
    }
    
    .navbar-collapse.d-lg-none.show .navbar-nav {
        flex-direction: row !important; /* Horizontal layout */
        width: 100% !important;
        justify-content: flex-start !important; /* Start from left (Home first) */
        align-items: center !important;
        flex-wrap: wrap !important; /* Allow wrapping if needed */
        gap: 0.25rem !important;
    }
    
    /* English (LTR) Landscape Menu - Left to right, Home first */
    html:not([dir="rtl"]) .navbar-collapse.d-lg-none.show .navbar-nav,
    html[dir="ltr"] .navbar-collapse.d-lg-none.show .navbar-nav {
        flex-direction: row !important;
        justify-content: flex-start !important; /* Home on left, others to right */
        text-align: left !important;
    }
    
    /* Persian (RTL) Landscape Menu - Home on left, others to right (same as English) */
    [dir="rtl"] .navbar-collapse.d-lg-none.show .navbar-nav {
        flex-direction: row !important;
        justify-content: flex-start !important; /* Home on left, others to right */
        text-align: left !important;
    }
    
    /* Landscape Menu Items - Horizontal styling */
    .navbar-collapse.d-lg-none.show .navbar-nav .nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    
    .navbar-collapse.d-lg-none.show .navbar-nav .nav-link {
        padding: 8px 12px !important; /* Reduced padding for horizontal layout */
        border-bottom: none !important; /* Remove vertical border */
        border-right: 1px solid var(--kajireh-light-gray) !important; /* Add horizontal separator */
        min-height: auto !important;
        white-space: nowrap !important; /* Prevent text wrapping */
        font-size: 14px !important; /* Slightly smaller for horizontal layout */
    }
    
    /* Remove border from last item */
    .navbar-collapse.d-lg-none.show .navbar-nav .nav-item:last-child .nav-link {
        border-right: none !important;
    }
    
    /* Show hamburger menu button in landscape (menu hidden by default) */
    .navbar-toggler.d-lg-none {
        display: block !important; /* Show hamburger button in landscape */
    }
    
    /* Landscape Related Products - 2 cards per row with proper sizing */
    .modern-related-products .row > [class*="col-"] {
        flex: 0 0 50% !important; /* 2 columns per row */
        max-width: 50% !important;
        width: 50% !important;
    }
    
    /* Ensure related products cards maintain proper sizing in landscape */
    .product-detail-page .modern-related-products .product-card {
        min-height: 320px !important; /* Match products page */
        width: 100% !important;
    }
    
    .product-detail-page .modern-related-products .product-card .product-image-container {
        min-height: 220px !important; /* Match products page */
    }
    
    .product-detail-page .modern-related-products .product-card .product-image-container img {
        height: 180px !important; /* Match products page */
        object-fit: contain !important;
        padding: 10px !important;
    }
    
    .product-detail-page .modern-related-products .product-card .card-body {
        padding: 1.5rem !important; /* Match products page */
    }
    
    /* Landscape Related Products Header - Center in landscape */
    .product-detail-page .modern-related-products .modern-related-header {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .product-detail-page .modern-related-products .modern-related-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .product-detail-page .modern-related-products .modern-related-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Landscape Brand Detail Page - Ensure product cards maintain proper sizing */
    .brand-detail-page .product-card {
        min-height: 320px !important; /* Match products page */
        width: 100% !important;
    }
    
    .brand-detail-page .product-card .product-image-container {
        min-height: 220px !important; /* Match products page */
    }
    
    .brand-detail-page .product-card .product-image-container img {
        height: 180px !important; /* Match products page */
        object-fit: contain !important;
        padding: 10px !important;
    }
    
    .brand-detail-page .product-card .card-body {
        padding: 1.5rem !important; /* Match products page */
    }
    
    /* Landscape Footer - Display like desktop but smaller scale */
    footer {
        text-align: left !important; /* Left align like desktop */
    }
    
    /* Show all footer columns in landscape (like desktop) */
    footer .col-md-3 {
        display: block !important; /* Show all columns */
        width: 25% !important; /* 4 columns like desktop */
        flex: 0 0 25% !important;
        max-width: 25% !important;
        margin-bottom: 0 !important; /* Remove mobile spacing */
        padding-left: 10px !important; /* Smaller padding for landscape */
        padding-right: 10px !important;
    }
    
    /* Show contact info in landscape (hidden on mobile portrait) */
    footer .footer-contact-info {
        display: block !important; /* Show contact info like desktop */
    }
    
    /* Footer text alignment - left for English, right for Persian */
    html:not([dir="rtl"]) footer,
    html[dir="ltr"] footer {
        text-align: left !important;
    }
    
    html:not([dir="rtl"]) footer .col-md-3,
    html[dir="ltr"] footer .col-md-3 {
        text-align: left !important;
    }
    
    [dir="rtl"] footer {
        text-align: right !important;
    }
    
    [dir="rtl"] footer .col-md-3 {
        text-align: right !important;
    }
    
    /* Footer typography - smaller scale for landscape */
    footer h4,
    footer h5,
    footer h6 {
        font-size: 0.9rem !important; /* Smaller than desktop */
        margin-bottom: 0.75rem !important;
    }
    
    footer p,
    footer li,
    footer a {
        font-size: 0.8rem !important; /* Smaller text */
        line-height: 1.4 !important;
    }
    
    footer ul {
        padding-left: 0 !important;
        list-style: none !important;
    }
    
    footer li {
        margin-bottom: 0.5rem !important; /* Reduced spacing */
    }
    
    /* Footer bottom row - smaller scale */
    footer hr {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    footer .row.align-items-center {
        font-size: 0.75rem !important; /* Smaller copyright text */
    }
    
    /* Footer buttons - smaller scale */
    footer .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* Prevent horizontal scroll on all mobile devices */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .container,
    .container-fluid,
    .row,
    [class*="col-"] {
        max-width: 100%;
    }
    
    /* Fix for elements that might cause overflow */
    .navbar,
    .navbar-nav,
    .navbar-collapse,
    .kajireh-nav,
    .kajireh-header {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure images don't overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix for tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for cards */
    .card {
        max-width: 100%;
    }
    
    /* Hero Banner Mobile Fixes */
    .hero-banner {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .hero-banner .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .hero-banner .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-banner [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .hero-banner-image,
    .hero-banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Footer Mobile Fixes */
    footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    footer [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 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); }
} */

/* Hide news section on home page in mobile version only */
@media (max-width: 991.98px) {
    body.home-page .home-news-section {
        display: none !important;
    }
}

/* 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;
}

/* Mobile: center news page title and filter buttons */
@media (max-width: 767px) {
    /* Override inline RTL alignment on mobile */
    .articles-page .container {
        text-align: center !important;
    }

    .articles-page .row:first-child {
        justify-content: center !important;
    }
    .articles-page .row:first-child .col-12 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .articles-page .hero-title {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .articles-page .btn-group {
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .articles-page .btn-group .btn {
        flex: 0 0 auto !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        display: inline-flex !important;
    }
}

/* Landscape tablets/phones: keep news header and filters centered */
@media (max-width: 991px) and (orientation: landscape) {
    .articles-page .container {
        text-align: center !important;
    }
    .articles-page .row:first-child {
        justify-content: center !important;
    }
    .articles-page .row:first-child .col-12 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .articles-page .hero-title {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .articles-page .btn-group {
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .articles-page .btn-group .btn {
        flex: 0 0 auto !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        display: inline-flex !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: #ffffff !important;
    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: #ffffff !important; /* White 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: 50px 0 15px;
}

.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(--kajireh-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(--kajireh-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(--kajireh-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(--kajireh-black);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.brand-description {
    color: var(--kajireh-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 !important;
    margin-top: auto;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.brand-actions .btn-view-products {
    margin: 0 auto !important;
    display: inline-flex !important;
}

.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 - Match products page sizing */
.brand-detail-page .product-card {
    min-height: 320px !important; /* Match products page */
}

.brand-detail-page .product-card .product-image-container {
    min-height: 220px !important; /* Match products page */
}

.brand-detail-page .product-card .product-image-container img {
    height: 180px !important; /* Match products page */
    object-fit: contain !important;
    padding: 10px !important;
}

.brand-detail-page .product-card .card-body {
    padding: 1.5rem !important; /* Match products page */
}

.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(--kajireh-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 - Lift content: reduce gap below fixed header */
body.products-page {
    padding-top: 135px !important; /* override global 180px */
}
body.products-page main {
    margin-top: 0 !important; /* remove 20px main margin */
}
body .products-page-wrapper,
html body .products-page-wrapper,
.products-page .products-page-wrapper,
body.products-page .products-page-wrapper {
    padding-top: 75px !important; /* moderate gap below banner */
    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 Kajireh-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;
}

/* Kajireh-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 - Kajireh 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 - Kajireh product name size */
    font-weight: 400 !important; /* Regular weight Kajireh-style */
    line-height: 1.4 !important;
}

/* Kajireh-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;
}

/* Desktop: has-search - moderate gap */
@media (min-width: 992px) {
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: 65px !important;
    }
}

/* Mobile: products page - reduced top space */
@media (max-width: 991.98px) {
    body.products-page {
        padding-top: 98px !important;
    }
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;
    }
    html[dir="rtl"] body .products-page-wrapper.has-search,
    html[dir="rtl"] .products-page .products-page-wrapper.has-search {
        padding-top: 60px !important;
    }
}

/* Mobile Portrait: Push product detail page down so navigation is visible below fixed bar */
@media screen and (orientation: portrait) and (max-width: 991.98px) {
    body.product-detail-page {
        padding-top: 110px !important; /* Reduced to push content up a little */
    }
    
    body.product-detail-page .modern-product-detail,
    body.product-detail-page .kajireh-breadcrumb-container {
        padding-top: 15px !important; /* Reduced spacing at top */
    }
}

/* 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 Kajireh-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;
}

/* Article card excerpt/content – justified text */
.article-card-excerpt,
#news-articles-container .card .card-text:not(.text-muted),
.articles-page .card .card-body .card-text:not(.text-muted) {
    text-align: justify !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 */
}

/* Articles page title: center in English */
html:not([dir="rtl"]) .articles-page h1 {
    text-align: center !important;
}

/* Article content: force justified text (override inline styles from pasted HTML) */
.article-content,
.article-content p,
.article-content div,
.article-content li,
.article-content span {
    text-align: justify !important;
}

/* 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 Kajireh 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;
}

.Kajireh-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 - Kajireh 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;
}

/* Anchor offset for About page sections to avoid header overlap */
#our-story,
#our-team {
    scroll-margin-top: 180px;
}

/* Brand Categories - Limit to 3 per line, center aligned - OVERRIDE ALL PREVIOUS RULES */
.brand-categories,
.brand-card .brand-categories,
.brand-content .brand-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: 100% !important;
}

.brand-categories .category-badge,
.brand-categories .badge.category-badge,
.brand-card .brand-categories .category-badge,
.brand-card .brand-categories .badge.category-badge {
    flex: 0 0 calc((100% - 1rem) / 3) !important;
    max-width: calc((100% - 1rem) / 3) !important;
    min-width: 0 !important;
    width: calc((100% - 1rem) / 3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: calc((100% - 1rem) / 3) !important;
    padding: 0.3rem 0.4rem !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* RTL support for brand categories - center aligned in Persian */
html[dir="rtl"] .brand-categories {
    justify-content: center !important;
    text-align: center !important;
}

/* Reduce padding for Persian brand card categories to fit text on one line */
html[dir="rtl"] .brand-categories .category-badge,
html[dir="rtl"] .brand-categories .badge.category-badge {
    padding: 0.25rem 0.3rem !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* On smaller screens, show 2 per line */
@media (max-width: 576px) {
    .brand-categories {
        gap: 0.5rem !important;
    }
    .brand-categories .category-badge,
    .brand-categories .badge.category-badge {
        flex: 0 0 calc((100% - 0.5rem) / 2) !important;
        max-width: calc((100% - 0.5rem) / 2) !important;
        width: calc((100% - 0.5rem) / 2) !important;
    }
}

/* On very small screens, show 1 per line */
@media (max-width: 400px) {
    .brand-categories .category-badge,
    .brand-categories .badge.category-badge {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* FINAL OVERRIDE: Brand Categories - Force 3 per row with wrapping */
.brand-card .brand-content .brand-categories,
.brand-card .brand-categories {
    flex-wrap: wrap !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.brand-card .brand-content .brand-categories .category-badge,
.brand-card .brand-content .brand-categories .badge.category-badge,
.brand-card .brand-categories .category-badge,
.brand-card .brand-categories .badge.category-badge {
    flex: 0 0 calc((100% - 1rem) / 3) !important;
    max-width: calc((100% - 1rem) / 3) !important;
    width: calc((100% - 1rem) / 3) !important;
    flex-basis: calc((100% - 1rem) / 3) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Ensure Font Awesome icons display in brand card categories */
.brand-categories .category-badge .fas,
.brand-categories .badge.category-badge .fas,
.brand-categories .category-badge i.fas,
.brand-categories .badge.category-badge i.fas {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin-right: 0.5rem !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Products Page Mobile: Push active filters down to clear fixed header */
@media (max-width: 991.98px) {
    .active-filters-mobile {
        top: 100px !important; /* Clear fixed header on mobile */
        padding-top: 1rem !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Persian (RTL) version */
    html[dir="rtl"] .active-filters-mobile {
        top: 100px !important;
    }
}