/*
 * ملف التنسيق الرئيسي - تصميم "Luminous Horizon" (2026)
 * تصميم عصري يعتمد على الشبكات (Grid) والزجاج (Glassmorphism)
 */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800&display=swap');

:root {
    /* لوحة الألوان */
    --bg-deep: #0f172a;       /* خلفية داكنة جداً */
    --bg-card: #1e293b;       /* خلفية الكروت */
    --bg-hover: #334155;      /* خلفية عند التحويم */
    
    --primary: #6366f1;       /* أزرق نيلي */
    --secondary: #ec4899;     /* وردي */
    --accent: #8b5cf6;        /* بنفسجي */
    
    --text-main: #f8fafc;     /* أبيض */
    --text-muted: #94a3b8;    /* رمادي */
    
    --border-color: rgba(255, 255, 255, 0.08);
    
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    
    --font-main: 'Tajawal', sans-serif;
}

/* --- وضع النهار (Light Mode) --- */
[data-theme="light"] {
    --bg-deep: #f8f9fa;       /* خلفية أفتح وأكثر نعومة (Soft White/Gray) */
    --bg-card: #ffffff;       /* أبيض نقي للكروت */
    --bg-hover: #f1f5f9;      /* رمادي فاتح جداً للتحويم */
    
    --primary: #4f46e5;       /* أزرق نيلي أغمق قليلاً لتباين أفضل */
    --secondary: #db2777;     /* وردي غامق قليلاً */
    
    --text-main: #1e293b;     /* كحلي غامق مريح للعين */
    --text-muted: #64748b;    /* رمادي متوسط */
    
    --border-color: rgba(0, 0, 0, 0.06); /* حدود أخف */
}

/* تعديل خلفية الإضاءة في الوضع الفاتح - تخفيف التوهج */
[data-theme="light"] body::before {
    background: 
        radial-gradient(circle at 15% 50%, rgba(79, 70, 229, 0.03), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(219, 39, 119, 0.03), transparent 30%);
}

/* تعديل الهيدر في الوضع الفاتح */
[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.95); /* شفافية أقل لتقليل التشتت */
    border-bottom-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.03);
}

[data-theme="light"] .logo {
    color: #1e293b;
}

[data-theme="light"] .header-search input {
    background: #f1f5f9;
    color: #1e293b;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .header-search input:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* تعديل القوائم المنسدلة في الوضع الفاتح */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .submenu {
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(0,0,0,0.05);
}

[data-theme="light"] .dropdown-header-link {
    background: #f8fafc;
    color: #334155;
}

[data-theme="light"] .dropdown-header-link:hover {
    background: var(--primary);
    color: #fff;
}

[data-theme="light"] .dropdown-menu a {
    color: #475569;
}

[data-theme="light"] .dropdown-menu a:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* تعديل السلايدر في الوضع الفاتح - ألوان أهدأ */
[data-theme="light"] .shop-slider {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%); /* تدرج سماوي فاتح جداً */
}

[data-theme="light"] .slide-text h1 {
    color: #1e293b;
}

[data-theme="light"] .slide-text p {
    color: #475569;
}

/* زر تبديل الثيم */
.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-main);
    transition: all 0.8s ease;
    margin-right: 3rem; /* Increased spacing from the cart */
}

.theme-toggle:hover {
    background: var(--bg-hover);
    transform: rotate(15deg);
}

html {
    font-size: 90%; /* تصغير الحجم العام للموقع */
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-deep);
    color: var(--text-main);
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- تأثيرات الخلفية --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.08), transparent 25%);
    z-index: -1;
    pointer-events: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.8s ease;
}

/* --- الهيدر --- */
header {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 2rem;
}

.header-search {
    flex: 1;
    max-width: 400px;
    margin: 0 2rem;
}

.header-search form {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search input {
    width: 100%;
    padding: 0.6rem 1rem;
    padding-left: 2.5rem;
    border-radius: 2rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main); /* Changed from white */
    font-family: inherit;
    transition: all 0.8s ease;
}

.header-search input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.header-search button {
    position: absolute;
    left: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.8s;
}

.header-search button:hover {
    color: var(--primary);
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main); /* Changed from #fff to variable */
    letter-spacing: -0.5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.8s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* Logo with Image Styling */
.logo.has-logo {
    flex-direction: column;
    gap: 0.3rem;
    text-align: center;
}

.logo.has-logo img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
    display: block;
}

.logo.has-logo .brand-text {
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(to right, #fff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo img {
    /* Fallback for non-has-logo class if any */
    max-height: 70px;
    width: auto;
    object-fit: contain;
    display: block;
}

.logo span {
    color: var(--primary);
}

nav > ul {
    display: flex;
    gap: 2rem;
    list-style: none;
}

nav a {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 1.05rem;
}

nav a:hover, nav a.active {
    color: #fff;
}

.cart-text-wrapper {
    position: relative;
    display: inline-block;
}

.cart-text-wrapper:hover {
    background: none;
    border: none;
    color: inherit;
    transform: none;
}

.cart-count {
    position: absolute;
    top: -12px;
    left: -15px; /* Moved to left for RTL text flow */
    background: var(--secondary);
    color: white;
    font-size: 0.75rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid var(--bg-deep);
}

/* --- شبكة البينتو (Bento Grid) --- */
.bento-container {
    width: 92%;
    max-width: 1400px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px; /* Reduced from 280px */
    gap: 1.25rem; /* Reduced from 1.5rem */
}

/* تخصيص الشبكة العلوية (Hero) */
.hero-grid {
    grid-template-rows: repeat(2, 240px); /* Reduced from 280px */
}

/* العنصر الكبير (يمين) */
.hero-grid .bento-large {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

/* العنصر العلوي (يسار) */
.hero-grid .bento-wide:nth-of-type(2) {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
}

/* العنصر السفلي (يسار) */
.hero-grid .bento-wide:nth-of-type(3) {
    grid-column: 3 / span 2;
    grid-row: 2 / span 1;
}

.bento-item {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.bento-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.bento-item:hover img {
    transform: scale(1.08);
}

.bento-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 60%, transparent 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start; /* محاذاة لليمين في RTL */
}

.bento-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff; /* Keep white for bento overlays */
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.bento-content h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff; /* Keep white for bento overlays */
    margin-bottom: 0.25rem;
}

.bento-content p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
}

.bento-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.4rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.8s ease;
}

.bento-btn:hover {
    background: #fff;
    color: var(--bg-deep);
}

/* --- شبكة الأقسام (Categories) --- */
.categories-grid .bento-large {
    grid-column: span 2;
    grid-row: span 2;
}

.categories-grid .bento-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.categories-grid .bento-small {
    grid-column: span 1;
    grid-row: span 1;
}

.categories-grid .bento-content {
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
}

.categories-grid h3 {
    font-size: 1.4rem;
    margin-bottom: 0;
}

.categories-grid p {
    font-size: 0.9rem;
    margin-bottom: 0;
    opacity: 0.8;
}

.cat-icon {
    font-size: 1.2em;
    margin-right: 0.5rem;
}

/* --- العناوين الرئيسية --- */
.section-header-main {
    text-align: center;
    margin: 3rem 0 2rem; /* Reduced from 4rem 0 3rem */
}

.section-header-main h2 {
    font-size: 2.2rem; /* Reduced from 2.5rem */
    font-weight: 800;
    color: var(--text-main); /* Changed from #fff to variable */
    margin-bottom: 0.5rem;
}

.section-header-main p {
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* --- الفوتر --- */
footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 4rem 0 2rem;
    margin-top: 6rem;
}

.footer-content {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.footer-col h3 {
    color: var(--text-main); /* Changed from #fff to variable */
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col a {
    color: var(--text-muted);
}

.footer-col a:hover {
    color: var(--primary);
}

.copyright {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* --- Mobile Menu Overlay --- */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1040; /* Below nav (1050) but above everything else */
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease;
    backdrop-filter: blur(3px);
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- القائمة المتجاوبة (Mobile Menu) --- */
.menu-toggle, .close-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.8s ease;
}

/* Hide submenu toggle arrow on desktop by default */
.submenu-toggle {
    display: none;
}

/* --- استجابة الشاشات --- */
@media (max-width: 1024px) {
    .bento-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-grid .bento-large,
    .hero-grid .bento-wide {
        grid-column: span 2 !important;
        grid-row: auto !important;
        height: 300px;
    }
    
    .categories-grid .bento-large,
    .categories-grid .bento-wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0 1rem;
    }

    .menu-toggle {
        display: flex;
        order: 1;
    }

    .logo {
        order: 2;
        margin-left: auto; /* Push logo to the left end if needed, or keep it near toggle */
        font-size: 1.5rem;
    }

    .logo img {
        max-height: 40px;
    }
    
    .header-search {
        order: 3;
        width: 100%;
        margin: 0.5rem 0;
        max-width: none;
    }

    /* Mobile Navigation Drawer */
    nav {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden off-screen */
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: var(--bg-deep);
        z-index: 1050;
        padding: 6rem 2rem 2rem;
        transition: right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        overflow-y: auto;
        border-left: 1px solid var(--border-color);
    }

    .close-menu {
        display: block;
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        background: none;
        border: none;
        color: #fff;
        font-size: 2rem;
        cursor: pointer;
        padding: 0.5rem;
        line-height: 1;
    }

    nav.open {
        right: 0;
    }

    nav ul {
        flex-direction: column;
        gap: 0;
    }

    nav ul li {
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    nav a {
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
    }

    /* Mobile Dropdown */
    .dropdown-menu {
        position: static;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: none;
        border: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0; /* Override desktop min-width */
        width: 100%;
        margin: 0.5rem 0;
        display: none; /* Hidden initially */
        border-radius: 8px;
    }

    .dropdown-menu::before {
        display: none; /* Hide the arrow */
    }

    .dropdown.active .dropdown-menu {
        display: block;
        animation: fadeIn 0.3s ease;
    }
    
    .dropdown-item {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping for submenu */
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .dropdown-item > a {
        flex: 1;
        padding: 0.8rem 1rem;
        white-space: normal;
        word-break: break-word;
        min-width: 0; /* Prevent overflow */
    }

    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.8rem;
        transition: all 0.8s ease;
        border-left: 1px solid rgba(255,255,255,0.05);
    }

    .submenu-toggle.active {
        transform: rotate(180deg);
        color: var(--primary);
        background: rgba(255,255,255,0.05);
    }

    /* Mobile Submenu */
    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.3); /* Darker background for contrast */
        width: 100%;
        min-width: 0; /* Override desktop min-width */
        flex-basis: 100%; /* Force new line */
        margin: 0;
        padding: 0;
        display: none; /* Hidden initially */
        border: none;
        border-radius: 0;
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    .submenu.open {
        display: block;
    }

    .submenu li a {
        padding-right: 2rem !important; /* Indent submenu items */
        font-size: 0.95rem;
    }
    
    .dropdown-toggle::after {
        float: left;
    }

    /* Bento Grid Mobile */
    .bento-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1rem auto;
    }
    
    .hero-grid .bento-large,
    .hero-grid .bento-wide,
    .categories-grid .bento-large,
    .categories-grid .bento-wide,
    .categories-grid .bento-small {
        grid-column: span 1 !important;
        grid-row: auto !important;
        height: auto;
        min-height: 220px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-form-container {
        padding: 1.5rem;
    }
}

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

/* --- صفحات المتجر والمنتجات (Shop & Products) --- */

/* هيدر المتجر (Slider) */
.shop-slider {
    position: relative;
    height: 350px;
    overflow: hidden;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(30, 41, 59, 1) 100%);
}

.slide {
    position: absolute;
    top: -42px; /* Adjusted to align with slider height */
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    z-index: 0;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}

.slide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    height: 100%;
    width: 90% !important; /* Override container width */
    max-width: 1100px !important; /* Restrict width specifically for slider */
    margin: 0 auto;
    padding: 0;
}

.slide-text {
    text-align: right;
    padding: 2rem;
    z-index: 2;
    /* Reverted to block display for better grouping */
}

.slide-text h1 {
    font-size: 3rem;
    color: var(--text-main); /* Changed from #fff */
    margin-bottom: 1rem;
    line-height: 1.2;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease 0.8s;
}

.slide-text p {
    color: #cbd5e1;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.8s ease 0.5s;
}

.slide.active .slide-text h1,
.slide.active .slide-text p {
    transform: translateY(0);
    opacity: 1;
}

.slide-image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
}

.slide-image img {
    max-height: 70%;
    max-width: 85%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.8s ease 0.5s;
    border-radius: 1rem;
}

.slide.active .slide-image img {
    transform: scale(1);
    opacity: 1;
}

/* Mobile Responsive for Slider */
@media (max-width: 768px) {
    .shop-slider {
        height: 500px;
    }

    .slide {
        top: 0;
    }
    
    .slide-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
        padding-top: 1rem;
    }

    .slide-text {
        text-align: center;
        padding: 1rem;
        order: 2;
    }

    .slide-text h1 {
        font-size: 1.8rem;
    }

    .slide-image {
        height: 220px;
        order: 1;
    }
    
    .slide-text p {
        margin: 0 auto 1.5rem;
    }
}

/* شريط التحكم والفلاتر */
.shop-controls {
    background: var(--bg-card);
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.filters-bar {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.filter-group label {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

/* عناصر النموذج (Inputs & Selects) */
input[type="text"], select {
    background: var(--bg-deep);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    outline: none;
    transition: all 0.8s ease;
    font-family: var(--font-main);
}

input[type="text"]:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* شبكة المنتجات */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); /* Reduced from 260px */
    gap: 1.5rem; /* Reduced from 2rem */
    margin-top: 2rem; 
    padding: 1rem; /* Add internal spacing to prevent clipping */
}

/* كرت المنتج */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
}

.product-img-link {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.product-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform 0.6s ease;
}

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

.product-info {
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.25rem; /* Explicitly set small gap to override any inherited large gaps */
}

.product-info h3 {
    font-size: 1rem;
    margin-bottom: 0.1rem;
    line-height: 1.3;
}

.product-info h3 a {
    color: var(--text-main);
}

.product-info h3 a:hover {
    color: var(--primary);
}

.product-price {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-btn,
.product-card .btn {
    margin-top: auto;
    width: 100%;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    line-height: 1.2;
    text-decoration: none !important;
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 400;
}

/* شارات المنتج (Badges) */
.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.product-badge.sale {
    background: var(--secondary);
    right: auto;
    left: 1rem;
}

/* الأزرار */
.btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.8s ease;
    text-align: center;
    font-family: var(--font-main);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: #4f46e5; /* لون أغمق قليلاً */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.add-to-cart-btn {
    width: 100%;
    margin-top: 0.5rem;
}

/* حالة فارغة */
.empty-state {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-muted);
}

.empty-state h2 {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.results-count {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.results-count strong {
    color: #fff;
}


/* --- ??????? ???????? ??????? --- */
.dropdown-menu {
    min-width: 280px;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

.dropdown-header-link {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    color: #fff;
    transition: all 0.8s ease;
    border: 1px solid transparent;
}

.dropdown-header-link:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.dropdown-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.dropdown-column {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.dropdown-main-cat {
    display: block;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-md);
}

.dropdown-main-cat:hover {
    background: rgba(236, 72, 153, 0.1);
    padding-right: 1rem;
}

.dropdown-subs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 1rem;
    border-right: 2px solid rgba(255, 255, 255, 0.05);
    margin-right: 0.5rem;
}

.dropdown-subs a {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.4s ease;
}

.dropdown-subs a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(-5px);
}

/* ????? ???? ??????? ??????? */
.dropdown-grid::-webkit-scrollbar {
    width: 6px;
}
.dropdown-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
.dropdown-grid::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 3px;
}


/* --- ??????? ???????? ??????? --- */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dropdown-toggle::after {
    content: '▼';
    font-size: 0.7rem;
    margin-right: 5px;
    transition: transform 0.8s ease;
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 20px);
    right: -20px; /* محاذاة أفضل */
    background: #1e293b; /* لون ثابت قوي */
    min-width: 300px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); /* ظل قوي جداً */
    border-radius: 12px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.4s ease-out;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    list-style: none;
    display: block;
}

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

/* سهم صغير يشير للأعلى */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 35px;
    width: 12px;
    height: 12px;
    background: #1e293b;
    transform: rotate(45deg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1;
}

.dropdown-item {
    position: relative;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    padding: 1rem 1.2rem;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.4s ease;
    font-size: 1rem;
    border-radius: 8px;
    margin-bottom: 2px;
    font-weight: 500;
    border-left: 3px solid transparent; /* خط جانبي عند التحويم */
}

.dropdown-menu a:hover {
    background: #334155;
    color: #fff;
    padding-right: 1.5rem;
    border-left-color: var(--primary); /* ظهور الخط الجانبي */
}

.view-all-link {
    font-weight: 700 !important;
    background: #0f172a !important;
    margin-bottom: 0.5rem !important;
    color: var(--primary) !important;
    border: 1px dashed rgba(99, 102, 241, 0.3) !important;
    justify-content: center;
}

.view-all-link:hover {
    background: var(--primary) !important;
    color: white !important;
    border-style: solid !important;
}

/* Submenu - القائمة الفرعية */
.submenu {
    position: absolute;
    top: 0;
    right: 100%; /* تفتح لليسار */
    background: #1e293b;
    min-width: 260px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    border-radius: 12px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.4s ease-out;
    z-index: 1001;
    border: 1px solid rgba(255, 255, 255, 0.08);
    list-style: none;
    margin-right: 10px; /* مسافة واضحة */
}

.dropdown-item:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.arrow-icon {
    font-size: 1rem;
    line-height: 1;
    margin-right: auto;
    color: var(--text-muted);
    transition: transform 0.4s;
}

.dropdown-item:hover .arrow-icon {
    color: white;
    transform: rotate(180deg); /* دوران السهم بدلاً من تحريكه */
}

/* تحسين صور التصنيفات */
.cat-thumb {
    width: 32px !important; /* تكبير الصور */
    height: 32px !important;
    border-radius: 8px !important;
    object-fit: cover;
    margin-left: 15px !important;
    background: #0f172a;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.1);
}


/* --- Container Fix --- */
.container {
    width: 92%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Improve Grid Alignment for few items */
.products-grid {
    justify-content: center; /* Center items to avoid empty space on one side */
}

@media (min-width: 1024px) {
    .products-grid {
        gap: 2.5rem;
    }
}


/* --- Product Card Refinements --- */
.product-card {
    height: 100%; /* Ensure equal height in grid */
    background: linear-gradient(to bottom, var(--bg-card), rgba(30, 41, 59, 0.5));
}

.product-info h3 {
    min-height: auto; /* Remove fixed height to reduce gap */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



.product-card:hover .btn {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.new-price {
    color: #ef4444;
    font-weight: 800;
    font-size: 1.2rem;
}

/* --- صفحة اتصل بنا (Contact Page) --- */
.contact-section {
    padding: 4rem 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
}

.contact-info {
    background: var(--bg-card);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.contact-info::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: var(--primary);
    filter: blur(80px);
    opacity: 0.2;
    z-index: 0;
}

.contact-info h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
    color: var(--text-main); /* Ensure visibility in light mode */
}

.info-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    transition: all 0.8s ease;
}

.info-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(-5px);
}

.info-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.info-item strong {
    display: block;
    color: var(--text-main); /* Changed from #fff */
    margin-bottom: 0.2rem;
}

.info-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.contact-form-container {
    background: var(--bg-card);
    padding: 3rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3);
}

.contact-form-container h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--text-main); /* Changed from #fff */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--text-main);
}

.form-group input,
.form-group textarea {
    background: var(--bg-deep);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: var(--radius-md);
    color: var(--text-main); /* Changed from #fff */
    font-family: var(--font-main);
    font-size: 1rem;
    transition: all 0.8s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.8s ease;
    margin-top: 1rem;
    font-family: var(--font-main);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-form-container {
        padding: 2rem;
    }

    /* --- Mobile Filters Fix --- */
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .filter-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.5rem;
    }

    .filter-group label {
        margin-bottom: 0.2rem;
    }

    .filter-group input,
    .filter-group select,
    .filter-group .search-form {
        width: 100%;
    }
    
    .search-form {
        display: flex;
        gap: 0.5rem;
    }
    
    .search-form input {
        flex: 1;
    }

    /* --- Mobile Dropdown & Submenu Overrides (Moved to end for specificity) --- */
    .dropdown-menu {
        position: static !important;
        background: rgba(255, 255, 255, 0.03) !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0.5rem 0 !important;
        display: none; /* Hidden initially */
        border-radius: 8px !important;
    }

    .dropdown-menu::before {
        display: none !important;
    }

    .dropdown.active .dropdown-menu {
        display: block !important;
    }

    .submenu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.3) !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-basis: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none; /* Hidden initially */
        border: none !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
        right: auto !important; /* Reset right property */
        top: auto !important; /* Reset top property */
    }

    .submenu.open {
        display: block !important;
    }
}



/* --- ????? ?????? (Animations & UI) --- */

/* 1. ??????? ?????? ??? ??????? */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ????? ??????? ????????? */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* 2. ?? ?????? ?????? */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px; /* ??? ?????? ??? ?????? RTL */
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.8s ease;
    z-index: 999;
    border: 2px solid rgba(255,255,255,0.1);
}

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

.back-to-top:hover {
    background: var(--secondary);
    transform: translateY(-5px);
}



/* --- ????? ???? ????? (Special Effects) --- */

/* 1. ????? ??????? ?????? (Spotlight) */
.spotlight-item {
    position: relative;
    overflow: hidden;
    /* ???? ?? ?? ??????? ???? ????? ??????? */
}

/* ???? ??????? ???? ???? ?????? */
.spotlight-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.07), 
        transparent 40%
    );
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none; /* ???? ?????? ?? ????? */
}

.spotlight-item:hover::before {
    opacity: 1;
}

/* 2. ????? ?????? ??????? (Button Shine) */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transform: skewX(-25deg);
    transition: 0.5s;
    pointer-events: none;
}

.btn-shine:hover::after {
    left: 150%;
    transition: 0.7s ease-in-out;
}



/* --- ??????? ????? (Magic Effects) --- */

/* 1. ???? ????? (Levitation) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.floating-img {
    animation: float 6s ease-in-out infinite;
}

/* ????? ?????? ????? ??????? */
.float-delay-1 { animation-delay: 0s; }
.float-delay-2 { animation-delay: 2s; }
.float-delay-3 { animation-delay: 4s; }

/* 2. ????? ?????? ??????? 3D */
.tilt-card {
    transition: transform 0.1s ease-out; /* ???? ????? ???? ??????? ?????? */
    transform-style: preserve-3d;
    /* will-change: transform; */
}

/* ??? ??????? ???? ?????? ??? ??????? */
.tilt-card .bento-content,
.tilt-card .product-info {
    transform: translateZ(20px); /* ???? ?????? */
}



/* --- تحسينات إضافية للوضع الفاتح (Light Mode Refinements) --- */

/* Spotlight Effect in Light Mode - Softer Glow */
[data-theme='light'] .spotlight-item::before {
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(79, 70, 229, 0.05), /* Softer Primary color glow */
        transparent 40%
    );
}

/* Product Cards in Light Mode */
[data-theme='light'] .product-card {
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.03); /* Softer shadow */
    border-color: rgba(0,0,0,0.04);
}

[data-theme='light'] .product-card:hover {
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

/* Footer in Light Mode */
[data-theme='light'] footer {
    background: #ffffff;
    border-top-color: rgba(0,0,0,0.04);
}

[data-theme='light'] .footer-bottom {
    background: #f8f9fa; /* Match new bg-deep */
    border-top-color: rgba(0,0,0,0.04);
}

/* Buttons in Light Mode */
[data-theme='light'] .btn-secondary {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid rgba(0,0,0,0.05);
}

[data-theme='light'] .btn-secondary:hover {
    background: #e2e8f0;
    border-color: rgba(0,0,0,0.1);
}



/* --- Fix Navigation Links in Light Mode --- */
[data-theme='light'] nav a:hover, 
[data-theme='light'] nav a.active {
    color: var(--primary); /* Was white, now primary color */
}

/* --- Fix Primary Button in Light Mode --- */
[data-theme='light'] .btn-primary {
    color: #ffffff; /* Ensure text is white */
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}

[data-theme='light'] .btn-primary:hover {
    background: #4338ca; /* Darker shade for hover */
    transform: translateY(-2px);
}



/* --- Product Page Light Mode Fixes (??????? ???? ??????) --- */

/* 1. Product Container */
[data-theme='light'] .product-detail {
    background: #ffffff;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.05);
}

/* 2. Product Title */
[data-theme='light'] .product-details-info h1 {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--text-main);
}

/* 3. Specifications Box */
[data-theme='light'] .product-specs {
    background: #f8fafc;
    border-color: rgba(0,0,0,0.05);
}

[data-theme='light'] .product-specs h3 {
    color: var(--text-main);
}

[data-theme='light'] .product-specs li {
    color: var(--text-muted);
}

/* 4. Quantity Selector */
[data-theme='light'] .quantity-selector {
    background: #f1f5f9;
    border-color: rgba(0,0,0,0.05);
}

[data-theme='light'] .quantity-selector label {
    color: var(--text-main);
}

[data-theme='light'] .quantity-selector input {
    background: #ffffff;
    color: var(--text-main);
    border-color: rgba(0,0,0,0.1);
}

/* 5. Breadcrumbs */
[data-theme='light'] .container > div > a,
[data-theme='light'] .container > div > span {
    color: var(--text-muted) !important;
}

[data-theme='light'] .container > div > span:last-child {
    color: var(--text-main) !important;
    font-weight: 600;
}

/* 6. Reviews Section */
[data-theme='light'] .review-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.05) !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}

[data-theme='light'] .review-card strong {
    color: var(--text-main);
}

[data-theme='light'] .add-review-form {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.03);
}

[data-theme='light'] .add-review-form h3,
[data-theme='light'] .add-review-form label {
    color: var(--text-main);
}

[data-theme='light'] .add-review-form input,
[data-theme='light'] .add-review-form textarea {
    background: #f8fafc !important;
    color: var(--text-main) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

[data-theme='light'] .add-review-form input:focus,
[data-theme='light'] .add-review-form textarea:focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
}

/* 7. Related Products Title */
[data-theme='light'] .related-products h2,
[data-theme='light'] .reviews-section h2 {
    color: var(--text-main);
}



/* --- Fix Add to Cart Button Text Visibility in Light Mode --- */
[data-theme='light'] .btn-primary,
[data-theme='light'] button.btn-primary,
[data-theme='light'] a.btn-primary {
    color: #ffffff !important; /* Force white text */
    background: var(--primary); /* Solid primary color */
    text-shadow: none; /* Remove any text shadow that might interfere */
}

[data-theme='light'] .btn-primary:hover {
    background: #4338ca; /* Darker shade on hover */
    color: #ffffff !important;
}



/* --- Fix Product Card Background in Light Mode --- */
[data-theme='light'] .product-card {
    background: #ffffff; /* Pure white, no dark gradient */
    border: 1px solid rgba(0,0,0,0.05);
}

[data-theme='light'] .product-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}




/* --- Spotlight / Glow Effect (?????? ??????) --- */
.product-card, .bento-item, .category-card {
    position: relative;
    /* overflow: hidden;  Removed to allow 3D tilt to not be clipped if needed, but usually needed for glow. Let's keep it if possible, or use a child for glow */
}

/* Create a dedicated glow container to avoid clipping issues with 3D if any */
.glow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.08), 
        transparent 40%
    );
}

.product-card:hover .glow-overlay, 
.bento-item:hover .glow-overlay,
.category-card:hover .glow-overlay {
    opacity: 1;
}

/* Light Mode Glow */
[data-theme='light'] .glow-overlay {
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(99, 102, 241, 0.1), 
        transparent 40%
    );
}



/* --- Magnetic & Ripple Effects (?????? ????????? ???????) --- */

/* Ensure buttons can contain the ripple */
.btn, .submit-btn, .cart-icon {
    position: relative;
    overflow: hidden;
    /* Ensure z-index is handled if needed, but usually fine */
}

/* Ripple Animation */
.ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-anim 0.6s linear;
    pointer-events: none;
    z-index: 10;
}

@keyframes ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Light Mode Ripple (Darker for visibility on light buttons if needed) */
[data-theme='light'] .ripple {
    background: rgba(255, 255, 255, 0.5);
}



/* --- Toast Notification --- */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(30, 41, 59, 0.95);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 10000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification.success .toast-icon {
    color: #4ade80;
}

.toast-notification.error .toast-icon {
    color: #f87171;
}

.toast-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

.toast-message {
    font-family: var(--font-main);
    font-size: 1rem;
}

[data-theme='light'] .toast-notification {
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.05);
}



/* Fix Cart Icon Visibility */
.cart-icon {
    overflow: visible !important; /* Allow badge to be seen outside */
}

.cart-count {
    z-index: 20; /* Ensure it is above the icon */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Better visibility */
}



/* --- Magical Text Selection (?????? ????) --- */
::selection {
    background: var(--primary);
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* --- Blur Reveal Animation (?????? ???????) --- */
.reveal-on-scroll {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* --- Hacker Text Effect Cursor --- */
.hacker-text {
    font-family: monospace; /* Optional, but looks cooler */
    position: relative;
}



/* --- Magic Particles (بديل القصاصات) --- */
.magic-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 10px currentColor; /* Glow effect */
    animation: particle-burst 0.8s ease-out forwards;
}

@keyframes particle-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* --- Levitation Animation (?????? ??????) --- */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.floating-element {
    animation: float 6s ease-in-out infinite;
}

/* Apply float to specific elements */
.bento-large img, .bento-wide img {
    /* We need to be careful not to conflict with existing transforms */
    /* Let's apply it to a wrapper or just use it on specific decorative elements if we add them */
}



/* --- Cinematic Page Loader (?????? ???????) --- */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-deep);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 0; /* Hidden by default, JS will handle initial state if needed, or we can set to 1 and fade out */
    visibility: hidden;
}

.page-loader.active {
    opacity: 1;
    visibility: visible;
}

.loader-content {
    text-align: center;
    position: relative;
}

.loader-logo {
    font-size: 3rem;
    font-weight: 900;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -1px;
    animation: pulse-logo 2s infinite;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes pulse-logo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Neon Scroll Progress (???? ?????? ??????) --- */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 100000;
    background: rgba(255,255,255,0.05);
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent), #f43f5e);
    width: 0%;
    box-shadow: 0 0 10px var(--primary);
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* --- Animated Background Mesh (?????? ???????) --- */
.animated-bg-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(244, 63, 94, 0.08), transparent 25%);
    filter: blur(40px);
    animation: mesh-move 20s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes mesh-move {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

[data-theme='light'] .page-loader {
    background: #f8fafc;
}

[data-theme='light'] .loader-logo {
    color: #1e293b;
}




/* --- Magical Stardust Cursor (?????? ?????? ??????) --- */
.magic-star {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
    animation: star-fade 0.8s forwards ease-out;
    filter: blur(1px);
}

@keyframes star-fade {
    0% { 
        transform: scale(1) translate(0, 0) rotate(0deg); 
        opacity: 1; 
    }
    100% { 
        transform: scale(0) translate(10px, 20px) rotate(180deg); 
        opacity: 0; 
    }
}

/* --- Royal Glow Hover (???? ?????? ??????) --- */
/* A safe, elegant, and high-performance hover effect */
.product-card, .bento-item {
    /* We REMOVED 'transform' from here to allow JS to handle it instantly without lag */
    transition: box-shadow 0.4s ease, 
                border-color 0.4s ease,
                opacity 1s ease, /* For reveal effect */
                filter 1s ease;  /* For reveal effect */
    /* will-change: transform; */ /* Optimize for performance */
}

.product-card:hover, .bento-item:hover {
    /* We REMOVED CSS transform here because JS handles the lift and tilt */
    
    /* Royal Glow: A mix of Gold and Primary Color */
    box-shadow: 
        0 15px 35px -5px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(99, 102, 241, 0.4),    /* Primary Glow */
        0 0 40px rgba(255, 215, 0, 0.2) !important; /* Golden Ambient Glow */
        
    /* Elegant Border */
    border-color: rgba(99, 102, 241, 0.6) !important;
    z-index: 10; /* Bring to front */
}


/* Mega Menu Styles */
.mega-menu-item {
    position: static !important; /* Allow menu to be full width relative to header */
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(15, 23, 42, 1); /* Solid background for better performance */
    /* backdrop-filter: blur(20px); REMOVED for performance */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 0;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Faster transition */
    z-index: 1000;
}

/* Hover effect removed - Click only */
/*.mega-menu-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}*/

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force 3 columns side-by-side */
    gap: 4rem; /* Larger gap */
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.mega-menu-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    padding: 1.5rem;
    border-radius: 1.5rem;
    transition: background 0.8s ease;
}

.mega-menu-col:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Department Header Link */
.mega-menu-dept-link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.5rem; /* Larger font */
    font-weight: 800;
    color: #fff;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 0.8rem;
    transition: all 0.8s ease;
}

.mega-menu-dept-link:hover {
    color: var(--primary);
    transform: translateX(-5px);
}

.dept-icon-img {
    width: 50px; /* Larger image */
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.1);
}

/* Sub-category List */
.subcats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
}

.subcat-card {
    width: 200px;
    height: 200px; /* Fixed height for consistency */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    box-shadow: 0 0 15px rgba(186, 104, 200, 0.4);
    cursor: pointer;
    text-decoration: none;
    background: var(--bg-card);
}

/* Shape Modifiers for Subcategories */
.subcat-card.shape-circle {
    border-radius: 50%;
}

.subcat-card.shape-square {
    border-radius: var(--radius-md);
}

.subcat-card.shape-rounded {
    border-radius: 45px;
}

.subcat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(186, 104, 200, 0.8);
    border-color: #ba68c8;
}

.subcat-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: none !important; /* Remove any internal borders */
    border-radius: 0 !important; /* Reset internal radius */
    box-shadow: none !important; /* Remove internal shadow */
    margin: 0 !important;
}

.subcat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transition: transform 0.5s ease;
}

.subcat-card:hover .subcat-img img {
    transform: scale(1.1);
}

.subcat-info {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.subcat-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.arrow-link {
    display: none;
}

.mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Reduced gap slightly for compact scroll */
    
    /* Scroll Logic for Long Lists */
    max-height: 300px;
    overflow-y: auto;
    padding-left: 0.5rem; /* Space for scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Webkit Scrollbar Styling for Mega Menu List */
.mega-menu-list::-webkit-scrollbar {
    width: 6px;
}

.mega-menu-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.mega-menu-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.mega-menu-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.mega-menu-list li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 1.1rem; /* Larger font */
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    transition: all 0.4s ease;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.mega-menu-list li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(-5px);
}

.cat-mini-icon {
    width: 32px; /* Larger icon */
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.4s;
}

.mega-menu-list li a:hover .cat-mini-icon {
    transform: scale(1.1);
}

/* Mobile Responsive Mega Menu */
@media (max-width: 1024px) {
    .mega-menu-item {
        position: relative !important; /* Revert for mobile */
    }

    .mega-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        display: none; /* Hidden by default on mobile */
        width: 100%;
    }
    
    .mega-menu-item.open .mega-menu {
        display: block;
        animation: fadeIn 0.3s ease;
    }
    
    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
        padding: 1rem 0;
    }

    .mega-menu-col {
        background: rgba(255, 255, 255, 0.03);
        padding: 1rem;
        border-radius: 1rem;
    }

    .mega-menu-dept-link {
        font-size: 1.2rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 0.8rem;
    }

    .dept-icon-img {
        width: 36px;
        height: 36px;
    }
}


/* --- Hero Section Redesign (Card Style) --- */
.hero-slider-container {
    position: relative;
    width: 95%;
    max-width: 1300px;
    margin: 2rem auto 4rem;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    height: 600px; /* Fixed height for consistency */
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.hero-slide.active .hero-bg img {
    transform: scale(1.1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.2) 100%);
    z-index: 1;
}

.hero-content-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* Center content */
    text-align: center; /* Center text */
    padding: 2rem;
}

.hero-text-content {
    max-width: 800px;
    padding: 3rem;
    background: rgba(15, 23, 42, 0.6); /* Darker glass */
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.3s ease 0.8s;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.hero-slide.active .hero-text-content {
    transform: translateY(0);
    opacity: 1;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-text-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-text-content p {
    font-size: 1.2rem;
    color: #cbd5e1;
    margin-bottom: 2.5rem;
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.8s ease;
    pointer-events: auto;
    font-size: 1.2rem;
}

.slider-btn.prev-btn {
    right: 2rem;
}

.slider-btn.next-btn {
    left: 2rem;
}

.slider-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.slider-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    pointer-events: auto;
    z-index: 11;
}

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

.dot.active {
    background: var(--primary);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--primary);
}



.modern-cat-card:hover .cat-link {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .hero-slider-container {
        height: 500px;
        border-radius: 1.5rem;
        width: 92%;
    }
    
    .hero-text-content h1 {
        font-size: 2rem;
    }
    
/* Beautiful Horizontal Scroll for Subcategories */
    .subcats-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.8rem;
        padding: 1rem 0 2rem 0;
        justify-content: flex-start; /* Start from right in RTL */
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin: 0; /* Reset margins to fit container */
        width: 100%;
    }

    .subcats-grid::-webkit-scrollbar {
        display: none;
    }

    .subcat-card {
        flex: 0 0 auto;
        width: 130px; /* Reduced size to show ~3.5-4 items */
        height: 130px;
        scroll-snap-align: start;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
        transform: none !important;
        margin-inline-end: 0.2rem; /* Tiny margin for shadow safety */
    }
    
    /* Ensure internal image styling is correct for circles */
    .subcat-card.shape-circle, 
    .subcat-card.shape-circle .subcat-img,
    .subcat-card.shape-circle img {
        border-radius: 50% !important;
    }
    
    .subcat-card:active {
        transform: scale(0.95) !important;
    }

    .subcat-info h3 {
        font-size: 0.75rem; /* Smaller text for smaller bubbles */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
        margin: 0 auto;
    }
    
    /* Hide 'Browse' text on mobile small bubbles */
    .arrow-link {
        display: none;
    }
}


.hero-badge {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.hero-text-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-text-content p {
    font-size: 1.2rem;
    color: #cbd5e1;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.8s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.6);
    filter: brightness(1.1);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.8s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    transform: translateY(-3px);
}

/* --- Features Strip --- */
.features-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    margin-top: -3rem; /* Overlap with hero */
    margin-bottom: 5rem;
    background: var(--bg-card); /* Dark card bg */
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3);
}

.feature-box {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem;
    transition: transform 0.8s ease;
}

.feature-box:hover {
    transform: translateY(-5px);
}

.feature-box i {
    font-size: 1.8rem;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px; /* Squircle */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.feature-box h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: #fff;
}

.feature-box p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .hero-section {
        height: auto;
        padding: 6rem 0 4rem;
        border-radius: 0;
    }
    
    .hero-text-content {
        margin-right: 0;
        padding: 1.5rem;
        background: rgba(15, 23, 42, 0.85); /* More opaque for better readability */
        width: 85%; /* Prevent taking full width */
        max-width: 350px; /* Limit max width */
        margin: 0 auto; /* Center horizontally */
        border-radius: 1.5rem;
    }
    
    .hero-text-content h1 {
        font-size: 1.6rem; /* Smaller title */
        margin-bottom: 0.8rem;
    }

    .hero-text-content p {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limit text lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .features-strip {
        margin-top: 2rem;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* --- Hero Slider Styles --- */
.hero-slider-container {
    position: relative;
    height: 85vh;
    min-height: 650px;
    overflow: hidden;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    margin-bottom: 4rem;
}

.hero-slider {
    height: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Animation for content inside active slide */
.hero-slide.active .hero-text-content {
    animation: slideUpFade 1s ease forwards;
}

.hero-slide.active .hero-bg img {
    animation: zoomSlow 10s linear infinite alternate;
}

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

@keyframes zoomSlow {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.slider-controls {
    position: absolute;
    bottom: 3rem;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none; /* Let clicks pass through container */
}

.slider-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(12px);
    transition: all 0.8s ease;
}

.slider-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
}

.slider-dots {
    display: flex;
    gap: 0.8rem;
    pointer-events: auto;
}

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

.dot.active {
    background: var(--primary);
    transform: scale(1.3);
}

/* --- Modern Categories Grid (Unified Design) --- */
.modern-categories-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4rem;
    padding: 2rem 0;
}

.modern-cat-card {
    width: 250px;
    height: 250px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    box-shadow: 0 0 15px rgba(186, 104, 200, 0.4);
    cursor: pointer;
    background: var(--bg-card);
}

/* Shape Modifiers */
.modern-cat-card.shape-circle {
    border-radius: 50%;
}

.modern-cat-card.shape-square {
    border-radius: var(--radius-md); /* Slightly rounded corners for "square" */
}

.modern-cat-card.shape-rounded {
    border-radius: 45px; /* Rounded rectangle */
}

/* Hover Effects */
.modern-cat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(186, 104, 200, 0.8);
    border-color: #ba68c8;
}

/* Image Wrapper & Image */
.cat-img-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 0 !important; /* Force reset */
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.cat-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transition: transform 0.5s ease;
}

.modern-cat-card:hover .cat-img-wrapper img {
    transform: scale(1.1);
}

/* Content Overlay */
.cat-content {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.cat-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cat-link {
    display: none;
}

.cat-overlay {
    display: none;
}

@media (max-width: 768px) {
    .hero-slider-container {
        height: 60vh;
        min-height: 400px;
    }
    
    .modern-categories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1.5rem;
        justify-items: center;
    }
    
    .modern-cat-card {
        width: 100%;
        max-width: 250px;
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .hero-bg img {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* --- Department Header (Restored) --- */
.department-header {
 position: relative;
 height: 400px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 overflow: hidden;
 margin-bottom: 4rem;
 border-bottom: 1px solid var(--border-color);
 background: var(--bg-deep);
}

.dept-bg-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, rgba(15, 23, 42, 0.3), var(--bg-deep));
 z-index: 2;
}

.dept-bg-img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: 1;
 filter: blur(3px) brightness(0.7);
 transform: scale(1.1);
}

.dept-content {
 position: relative;
 z-index: 3;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1.5rem;
 animation: fadeInUp 0.8s ease-out;
}

.dept-icon-box {
 width: 100px;
 height: 100px;
 border-radius: 2rem;
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.2);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 0.5rem;
 box-shadow: 0 20px 40px rgba(0,0,0,0.3);
 position: relative;
}

.dept-icon-box::after {
    content: '';
    position: absolute;
 inset: -5px;
 border-radius: 2.2rem;
 background: linear-gradient(45deg, var(--primary), var(--secondary));
 z-index: -1;
 opacity: 0.5;
 filter: blur(10px);
}

.dept-icon-box img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 2rem;
}

.dept-icon-box span {
 font-size: 3.5rem;
}

.dept-content h1 {
 font-size: 3.5rem;
 font-weight: 800;
 color: #fff;
 margin: 0;
 text-shadow: 0 2px 10px rgba(0,0,0,0.5);
 letter-spacing: -1px;
}

.dept-content p {
 color: rgba(255, 255, 255, 0.9);
 font-size: 1.3rem;
 max-width: 600px;
 font-weight: 300;
}

@media (max-width: 768px) {
 .department-header {
 height: 300px;
 }
 .dept-content h1 {
 font-size: 2.2rem;
 }
}



/* --- Subcategory Cards --- */
.subcat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -5px rgba(99, 102, 241, 0.3);
    border-color: var(--primary);
}

.subcats-grid {
    animation: fadeInUp 0.6s ease-out;
}

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

/* --- Optimization & GPU Acceleration --- */
.magic-star, 
.product-card, 
.slide, 
.hero-bg img, 
.contact-info::before, 
.modern-cat-card,
.subcat-card, 
.feature-box i {
    will-change: transform, opacity;
    transform: translateZ(0); /* Force GPU */
    backface-visibility: hidden;
}

.product-card:hover {
    will-change: transform, box-shadow;
}

.modern-cat-card .cat-img-wrapper img {
    will-change: transform;
    transform: translateZ(0);
}

/* Reduce Paint Areas */
.hero-section {
    contain: content;
}

.products-grid {
    contain: layout; /* Removed paint to allow hover effects/shadows to overflow */
}


/* --- Fix Spacing for Products & Results Count --- */
.products-section {
    padding-top: 1rem; 
    margin-top: 0;
}

.results-count {
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    display: inline-block;
}

/* --- Styled Pagination (Better Look) --- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.pagination a.btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Circle shape */
    padding: 0;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.pagination a.btn:hover:not(.btn-primary) {
    background: var(--bg-hover);
    transform: translateY(-5px);
}

.pagination a.btn.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
    transform: scale(1.1);
}

.pagination a.btn-secondary {
    width: auto;
    padding: 0 1.5rem;
    border-radius: 2rem; /* Pill shape for Prev/Next */
}


/* --- Mega Menu Fixes (Scrollable & Toggle Logic) --- */
.mega-menu {
    max-height: 80vh; /* Don't exceed 80% screen height */
    overflow-y: auto; /* Enable internal scrolling */
    
    /* Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--primary) rgba(255, 255, 255, 0.1);
}

.mega-menu::-webkit-scrollbar {
    width: 6px;
}

.mega-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.mega-menu::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 3px;
}

/* Ensure JS toggle works (Toggle state class) */
.mega-menu-item .mega-menu {
    /* Reset default hover behavior to handle it via JS 'open' class for better control */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none; /* Prevent clicking when hidden */
}

/* Show when parent has 'open' class (JS toggled) */
.mega-menu-item.open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Also keep hover for desktop convenience if preferred, or remove if strictly click-to-toggle is requested. 
   User asked: 'When pressing... to close'. So click is primary. 
   Lets keep hover but ensure click toggles properly. 
   Actually, user said 'click ... again to close'. 
   So we should probably prioritize the .open class.
*/ 
/* Overriding previous hover rule to prevent conflict if we want click-only or mixed. 
   Let's support both: Hover opens, Click toggles (forces close if open).
*/
/* Hover effect removed - Click only */


/* Optimizing Hardware Acceleration for Mega Menu */
.mega-menu {
    will-change: transform, opacity;
}

/* Optimize Magnetic Buttons */
.btn, .submit-btn, .cart-icon, .social-link {
    will-change: transform;
}



/* --- Custom Confirmation Modal --- */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.custom-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.custom-modal {
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    padding: 2.5rem;
    border-radius: var(--radius-xl, 1rem);
    width: 90%;
    max-width: 450px;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

.custom-modal-overlay.active .custom-modal {
    transform: scale(1) translateY(0);
}

.modal-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.4));
    animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-modal h3 {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
    color: #fff;
}

.custom-modal p {
    color: var(--text-muted, #94a3b8);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-modal {
    padding: 0.9rem 2rem;
    border-radius: var(--radius-md, 0.5rem);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: inherit;
    font-size: 1rem;
}

.btn-modal-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-modal-confirm {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.btn-modal-confirm:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}
@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}



/* --- Announcement Bar --- */
.announcement-bar-container {
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    height: 40px;
    overflow: hidden;
    position: relative;
    z-index: 1001; /* Above Header */
}

.announcement-strip {
    display: flex;
    white-space: nowrap;
    animation: scrollAnnouncements 30s linear infinite;
    align-items: center;
    height: 100%;
    padding-right: 100%; /* Start completely off-screen right */
}

.announcement-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 4rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.announcement-item a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.9;
}
.announcement-item a:hover { opacity: 1; text-decoration: none; }

.announcement-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}
.badge-info { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
.badge-success { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.badge-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }

@keyframes scrollAnnouncements {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100% + 100%)); } /* Adjust depending on RTL direction */
}

/* Pause on hover */
.announcement-bar-container:hover .announcement-strip {
    animation-play-state: paused;
}



/* --- Live Search Dropdown --- */
.live-search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 1002;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.live-search-dropdown.active {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
    text-decoration: none;
    color: var(--text-main);
}

.search-result-item:hover {
    background: rgba(255,255,255,0.05);
}

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

.search-item-img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    background: #000;
}

.search-item-info {
    flex: 1;
}

.search-item-name {
    font-weight: 600;
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.search-item-price {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 700;
}



/* --- Toast Notifications --- */
#toast-container {
    position: fixed;
    bottom: 2rem;
    left: 2rem; /* Appearing on the left in RTL usually looks better if controls are right, or vice versa. Let's start bottom-left. */
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toast-message {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 300px;
    transform: translateX(-100%) scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-right: 4px solid var(--primary); /* Accent line on right for RTL */
}

.toast-message.show {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.toast-message.toast-success { border-right-color: #10b981; }
.toast-message.toast-error { border-right-color: #ef4444; }
.toast-message.toast-warning { border-right-color: #f59e0b; }
.toast-message.toast-info { border-right-color: #3b82f6; }

.toast-icon { font-size: 1.2rem; }
.toast-text { color: var(--text-main); font-weight: 500; font-size: 0.95rem; }
.toast-close {
    margin-right: auto; /* Push to left in RTL */
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.toast-close:hover { color: var(--text-main); }



/* --- Product Action Buttons (Wishlist & Quick View) --- */
.product-actions {
 position: absolute;
 top: 15px;
 right: 15px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 opacity: 0;
 transform: translateX(20px);
 transition: all 0.3s ease;
 z-index: 10;
}

.product-card:hover .product-actions {
 opacity: 1;
 transform: translateX(0);
}

.action-btn {
 width: 35px;
 height: 35px;
 background: rgba(255, 255, 255, 0.9);
 color: #333;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 transition: all 0.2s ease;
 border: none;
 font-size: 1rem;
}

.action-btn:hover {
 background: var(--primary);
 color: #fff;
 transform: scale(1.1);
}

.action-btn.active {
 background: var(--secondary);
 color: #fff;
}

/* Quick View Modal Styles */
.quick-view-modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.8);
 z-index: 2000;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.quick-view-modal.open {
 display: flex;
 opacity: 1;
}

.quick-view-content {
 background: var(--bg-card);
 width: 90%;
 max-width: 900px;
 padding: 2rem;
 border-radius: 20px;
 border: 1px solid var(--border-color);
 position: relative;
 transform: translateY(20px);
 transition: transform 0.3s ease;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.quick-view-modal.open .quick-view-content {
 transform: translateY(0);
}

.close-qv {
 position: absolute;
 top: 15px;
 left: 15px; /* RTL */
 font-size: 1.5rem;
 color: var(--text-muted);
 cursor: pointer;
 transition: color 0.3s;
 background: none;
 border: none;
 z-index: 5;
}

.close-qv:hover {
 color: #fff;
}