/*
// FILE: style.js
 ===== 1. Design System & Variables ===== */
:root {
    --bg-primary: #f8fafc; /* Main background */
    --bg-secondary: #ffffff; /* Cards, Modals */
    --bg-accent: #f1f5f9; /* Inputs, Secondary buttons */
    --text-primary: #0f172a; /* Headings, main text */
    --text-secondary: #475569; /* Subtitles, secondary text */
    --border-color: #e2e8f0; /* Borders for inputs, cards */
    --accent-color: #4f46e5; /* Main brand color (Indigo) */
    --accent-hover: #4338ca; /* Darker brand color for hover */
    --success-color: #16a34a; /* Success messages, badges */
    --danger-color: #dc2626; /* Error messages, delete buttons */
    --warning-color: #f59e0b; /* Warning/low stock indicators */
    --radius-sm: 0.375rem; /* 6px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 0.75rem; /* 12px */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ===== 2. General & Typography Styles ===== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    opacity: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

main {
    flex-grow: 1;
}

/* ===== 3. Animations & Transitions ===== */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

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

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-3px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(3px, 0, 0);
    }
}

.interactive-btn,
.card,
.product-option-value,
.category-item-link .card {
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animated-icon {
    transition: transform 0.2s ease-in-out;
}

.animated-icon:hover {
    transform: scale(1.15) rotate(-5deg);
}

/* ===== 4. Components ===== */
/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-in-out;
}

#preloader .logo-container {
    animation: pulse 1.5s infinite ease-in-out;
}

/* --- Buttons --- */
.primary-btn,
.secondary-btn,
.danger-btn {
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.primary-btn {
    background-color: var(--accent-color);
    color: white;
    background-image: linear-gradient(to top right, var(--accent-color), var(--accent-hover));
}

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

.secondary-btn {
    background-color: var(--bg-accent);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.secondary-btn:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
}

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

.danger-btn:hover {
    background-color: #b91c1c;
}

.interactive-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.interactive-btn:active {
    transform: scale(0.96);
    box-shadow: none;
}

.primary-btn:disabled {
    background-image: none;
    background-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Cards --- */
.card {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: #d1d5db;
}

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

.product-image-container {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}

.product-image {
    transition: transform 0.3s ease;
}

/* --- Forms & Inputs --- */
.form-input,
.form-select,
.form-textarea,
.ts-control {
    width: 100%;
    background-color: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Tajawal', sans-serif;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.ts-control.focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.ts-control {
    padding: 0.5rem 1.75rem !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
}

.ts-dropdown {
    border-color: var(--border-color);
    background-color: var(--bg-secondary);
}

.ts-dropdown .active {
    background-color: var(--accent-color);
}

/* --- Product Variants (Colors, etc.) --- */
.color-swatch {
    background-size: cover;
    background-position: center;
}

.product-option-label input:checked+.product-option-value,
.product-option-value.is-checked-wholesale {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

.product-option-label input:checked+.product-option-value.color-swatch::after,
.product-option-value.is-checked-wholesale::after {
    content: '✔';
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* --- Wishlist & Love Button --- */
.product-card .love-btn {
    opacity: 0;
}

.product-card:hover .love-btn,
#product-page-content .love-btn {
    opacity: 1;
}

.product-card.is-loved {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--danger-color) 20%, transparent);
}

.product-card.is-loved .love-btn,
.love-btn.is-loved {
    opacity: 1;
}

.love-btn .icon-heart {
    stroke: var(--text-secondary);
    fill: none;
}

.product-card.is-loved .love-btn .icon-heart,
#wishlist-button.has-items .icon-heart,
.love-btn.is-loved .icon-heart,
#mobile-wishlist-button.has-items .icon-heart {
    fill: var(--danger-color);
    stroke: var(--danger-color);
}

/* --- Quantity Controls --- */
.card-quantity-btn {
    background-color: var(--bg-accent);
    color: var(--text-primary);
    border-radius: 9999px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: bold;
    transition: background-color 0.2s;
    border: 1px solid var(--border-color);
}

.card-quantity-btn:hover {
    background-color: #e2e8f0;
}

.card-quantity-btn:disabled {
    background-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Swiper (Categories Scroller) --- */
.categories-scroller {
    position: relative;
    padding: 0 40px;
}

.categories-swiper {
    width: 100%;
    height: auto;
}

.categories-swiper .swiper-slide {
    width: 150px;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--accent-color);
    background-color: white;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.25rem;
    font-weight: bold;
}

.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Dropdowns --- */
.header-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 420px;
    max-height: 520px;
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    visibility: hidden;
}
/* استبدل الكود القديم بهذا الكود الجديد في ملف style.css */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
    /* --- الخصائص الجديدة --- */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
#lightbox-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    overflow: hidden;
}

#lightbox-content img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    cursor: grab;
    transition: transform 0.2s ease-out;
}

#lightbox-content img.is-panning {
    cursor: grabbing;
}

#lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

/* --- Toasts / Notifications --- */
#toast-container {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 9999 !important; /* ✅ رفع الطبقة لأعلى قيمة ممكنة */
    display: flex !important;     /* ✅ فرض الظهور ومنع الإخفاء */
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none; /* ✅ السماح بالنقر "من خلال" الحاوية الشفافة */
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    color: white;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: auto;
}

.toast-success {
    background-image: linear-gradient(to top right, var(--success-color), #22c55e);
}

.toast-danger {
    background-image: linear-gradient(to top right, var(--danger-color), #ef4444);
}

.toast-info {
    background-image: linear-gradient(to top right, #3b82f6, #60a5fa);
}

/* ===== 5. Utility & Helper Classes ===== */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-accent);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #bdc3c7;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #95a5a6;
}

#cart-button.is-shaking .animated-icon,
#mobile-cart-button.is-shaking .animated-icon {
    animation: shake 0.5s;
}

.search-highlight {
    background-color: #fef08a;
    color: #713f12;
    font-weight: bold;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.iti {
    width: 100%;
}

.iti__country-list {
    text-align: right;
    direction: rtl;
}

.iti__dial-code {
    direction: ltr;
}

.form-input.iti-input {
    padding-right: 10px !important;
    direction: ltr;
    text-align: left;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: var(--bg-accent);
}

.iti.iti--allow-dropdown input[type=tel] {
    border-radius: var(--radius-md) !important;
}

/* ===== 6. Component-Specific Styles ===== */
.pagination-btn {
    min-width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.pagination-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pagination-btn.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.noUi-target {
    border: none;
    box-shadow: none;
    background: #E2E8F0;
}

.noUi-connect {
    background: var(--accent-color);
}

.noUi-handle {
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.noUi-handle:focus {
    outline: none;
}

.noUi-horizontal {
    height: 6px;
}

.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    right: -10px;
    top: -7px;
}

.product-badge {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    color: rgb(255, 255, 255);
    z-index: 10;
    
}

.badge-new {
    background-color: var(--success-color);
}

.badge-sale {
    background-color: var(--danger-color);
}

.badge-bundle {
    background-color: var(--accent-color);
}

.badge-exclusive {
    background-color: #8b5cf6;
}

.badge-exclusive {
    background-color: #8b5cf6;
}

#price-mode-toggle,
#mobile-price-mode-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
}

#price-mode-toggle {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--bg-accent);
    border: 2px solid var(--border-color);
    color: var(--accent-color);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#price-mode-toggle:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

#price-mode-toggle.wholesale,
#mobile-price-mode-toggle.wholesale {
    background-color: var(--accent-color);
    color: white;
}

#price-mode-toggle.wholesale {
    border-color: var(--accent-hover);
}

#mobile-price-mode-toggle.wholesale i {
    color: white;
}

.stock-indicator {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

.stock-indicator.low-stock {
    color: #b45309;
    background-color: #fef3c7;
}

.stock-indicator.out-of-stock {
    color: #9f1239;
    background-color: #ffe4e6;
}

/* --- Floating Action Buttons --- */
.floating-action-btn {
    position: fixed;
    bottom: -100px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: bottom 0.3s ease-in-out, transform 0.2s, background-color 0.2s;
    z-index: 40;
    color: white;
}

.floating-action-btn:hover {
    transform: scale(1.1);
}

.floating-action-btn.visible {
    bottom: 1.5rem;
}

#back-to-top-btn {
    left: 1.5rem;
    background-color: var(--accent-color);
}

#back-to-top-btn:hover {
    background-color: var(--accent-hover);
}

#whatsapp-widget {
    right: 1.5rem;
    background-color: var(--success-color);
}

.font-bold {
    color: black;
}

#whatsapp-widget:hover {
    background-color: #15803d;
}

#whatsapp-widget>i {
    width: 28px;
    height: 28px;
}

.category-item-link:hover .card {
    transform: scale(1.05);
}

.price-container.out-of-stock .product-price {
    color: var(--text-secondary);
}

/* ===== 7. Component-Specific Overrides ===== */
/* --- Logo System --- */
#logo-link .logo-img {
    height: 55px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* --- Filter Bar --- */
#filter-nav-wrapper {
    flex-wrap: nowrap;
    /* overflow: hidden; */
    min-width: 0;
}

.filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.filter-item {
    flex-shrink: 0;
}

.filter-item[data-filter="view"] {
    width: 90px;
}

.filter-item[data-filter="main-category"],
.filter-item[data-filter="sub-category"],
.filter-item[data-filter="sort"] {
    width: 150px;
}

.filter-item[data-filter="price"] {
    width: 140px;
}

.filter-item[data-filter="brand"] {
    max-width: 320px;
    min-width: 90px;
}

.filter-item[data-filter="search"] {
    width: 150px;
    margin-left: auto;
}

.form-select {
    padding-left: 2.5rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
}

#more-filters-container .dropdown-toggle {
    padding: 0.625rem 1rem;
    height: 44px;
    --bs-btn-color: var(--text-primary);
    --bs-btn-bg: var(--bg-accent);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: #e2e8f0;
    --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-active-color: var(--text-primary);
    --bs-btn-active-bg: #e2e8f0;
    --bs-btn-active-border-color: #cbd5e1;
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

#more-filters-container .dropdown-toggle::after {
    display: none;
}

#more-filters-dropdown .filter-item {
    border-bottom: 1px solid var(--border-color);
}

#more-filters-dropdown .filter-item:last-child {
    border-bottom: none;
}

/* --- List View Card Styles --- */
#products-container.is-list-view {
    display: flex;
    flex-direction: column;
}

#products-container.is-list-view .product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

#products-container.is-list-view .product-card .relative.group {
    flex-shrink: 0;
    width: 160px;
}

#products-container.is-list-view .product-card .p-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

#products-container.is-list-view .product-card .variants-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

#products-container.is-list-view .love-btn {
    opacity: 1;
}

/* --- Model Selector (Grid/List View) --- */
#model-selector-list.is-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

#model-selector-list.is-list-view .model-item {
    display: flex;
}

#model-selector-list.is-grid-view .model-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

#model-selector-list.is-grid-view .model-item>div:first-child {
    margin-bottom: 0.5rem;
}

/* --- Mobile Navigation Bar --- */
#mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

#mobile-nav .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    position: relative;
    padding: 4px 0;
}

#mobile-price-mode-toggle {
    background: transparent;
    border: none;
    flex-direction: column;
    gap: 2px;
}

#more-filters-dropdown {
    min-width: 280px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    z-index: 50;
}

.container {
    --bs-gutter-x: 0;
}

.px-4 {
    padding-right: 0;
    padding-left: 0;
}

/* ===== 8. UPDATED STYLES & FIXES ===== */
/* --- إصلاح مكان القائمة المنسدلة على الهاتف --- */
.header-dropdown.is-mobile-dropdown {
    position: fixed !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 80px !important;
    width: 90% !important;
    max-width: 420px !important;
}

/* --- تنسيقات لصفحات السلة والمفضلة --- */
#filter-bar.hidden {
    display: none;
}

/* ===== 9. Mobile Fullscreen Modals (Cart/Wishlist) ===== */
.mobile-modal-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.mobile-modal-page.is-open {
    transform: translateX(0);
}

.mobile-modal-header {
    display: flex;
    align-items: center;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mobile-modal-header .p-4 {
    flex-grow: 1;
    border-bottom: none !important;
}

.mobile-modal-header .close-modal-btn {
    margin: 0 0.5rem;
}

.mobile-modal-body {
    flex-grow: 1;
    overflow-y: auto;
}

.mobile-modal-footer {
    flex-shrink: 0;
    background-color: var(--bg-secondary);
}

.mobile-modal-body #cart-dropdown-items,
.mobile-modal-body .flex-grow.overflow-y-auto {
    height: 100%;
}

/* ===== 10. Distinctive Close Modal Button ===== */
.close-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(4px);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.close-modal-btn:hover {
    background-color: var(--bg-accent);
    color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.close-modal-btn:active {
    transform: scale(0.95);
    box-shadow: none;
}

.close-modal-btn svg,
.close-modal-btn i {
    transition: transform 0.3s ease;
}

.close-modal-btn:hover svg,
.close-modal-btn:hover i {
    transform: rotate(90deg);
}

.mobile-modal-header .close-modal-btn {
    border: none;
    background-color: transparent;
}

.mobile-modal-header .close-modal-btn:hover {
    background-color: var(--bg-accent);
}


/* ===== 11. All Mobile Specific Styles ===== */
@media (max-width: 767px) {
    body {
        padding-bottom: 80px;
    }

    #main-header #header-actions {
        display: none;
    }

    #logo-link .logo-img {
        height: 42px;
    }
    
    .floating-action-btn.visible {
        bottom: 6rem;
    }
    
    #toast-container {
        bottom: 6rem;
    }

    /* --- Mobile Nav --- */
    #mobile-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* --- Mobile Category Scroller --- */
    .categories-swiper .swiper-slide {
        width: 100px; /* تم تعديل العرض ليناسب النص */
    }
    /* تم حذف القاعدة التي تخفي اسماء الأقسام */
    .categories-swiper .swiper-slide i[data-lucide] {
        width: 32px;
        height: 32px;
    }
    .categories-swiper .swiper-slide:has(a[data-id="all-products"]) {
        display: none;
    }

    /* --- Fullscreen Checkout on Mobile --- */
    .modal-content:has(#checkout-form) {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    /* --- Resize Price Mode Toggle on Mobile --- */
    #price-mode-toggle {
        width: 44px;
        height: 44px;
        font-size: 11px;
    }
}

@media (max-width: 639px) {
    /* --- إصلاح عرض المنتجات كقائمة على الهاتف --- */
    #products-container.is-list-view .product-card {
        align-items: flex-start;
    }
    #products-container.is-list-view .product-card .relative.group {
        width: 120px;
    }
    #products-container.is-list-view .product-card .p-4 {
        min-width: 0;
        padding: 0.5rem;
    }
    #products-container.is-list-view .product-card .product-name {
        white-space: normal;
        font-size: 1rem;
    }
    #products-container.is-list-view .product-card .flex.justify-between.items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }
    #products-container.is-list-view .product-card .action-button-container {
        width: 100%;
    }
}

.px-4 {
    padding-right:0;
    padding-left:0;
}

/* ===== 12. Success Modal Animation ===== */
.success-animation .checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--success-color);
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.success-animation .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--success-color);
    fill: none;
    animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-animation .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 50px var(--success-color);
    }
}


@media (max-width: 767px) {
    /* ... القواعد الموجودة مسبقاً ... */

    /* ✅ أضف هذه القواعد الجديدة */
    .modal-content:has(#checkout-form),
    .modal-content:has(#complaint-form),
    .modal-overlay
    {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100vh; /* vh تعني ارتفاع الشاشة */
        border-radius: 0;
        padding: 0;
    }
    .categories-scroller {
        padding: 0 0px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: var(--accent-color);
        background-color: white;
        width: 44px;
        height: 44px;
        margin: 80px 80px;
    }
}

/* START: تنسيقات أزرار الخواص النصية (الطول، المقاس، الخ) */
.product-option-value-text {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* 4px 12px */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md); /* 8px */
    background-color: var(--bg-secondary);
    font-size: 0.8rem; /* حجم خط أصغر قليلاً */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.product-option-value-text:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* هذا الكود يغير شكل الزر عند تحديده */
.product-option-label input:checked + .product-option-value-text {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transform: translateY(-1px);
}

/* تعديل بسيط لدوائر الألوان لإضافة ظل خفيف كما طلبت */
.color-swatch {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* END: تنسيقات أزرار الخواص النصية */

.bg-slate-50{
    background-color: rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important
}

.ts-wrapper.variant-model-select .ts-control {
    background-color: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: none;
}

.ts-wrapper.variant-model-select .ts-control {
    background-color: var(--bg-accent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: none;
    /* ✅ START: الإضافات الجديدة */
    min-width: 180px; /* العرض الأدنى */
    max-width: 240px; /* العرض الأقصى */
    /* ✅ END: الإضافات الجديدة */
}

/* START: Auto-Hide Header on Scroll Styles (Mobile Only) */
#filter-bar {
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

#filter-bar.is-hidden {
    top: -120px !important; 
}

@media (max-width: 767px) {
    #main-header{
        /* transition: transform 0.4s cubic-bezier(0.0, 0.0, 0.0, 0.0); */
    }

    #main-header.is-hidden {
        transform: translateY(-100%) !important;
    }
}
/* END: Auto-Hide Header on Scroll Styles */

/* START: Custom Category Select Dropdown Styles */
.category-select {
    /* الشكل العام */
    appearance: none; /* إزالة الشكل الافتراضي للمتصفح */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: none;
    padding: 0.5rem 2.5rem 0.5rem 1rem; /* حشو داخلي لإفساح المجال للسهم */
    
    /* الخط والحجم */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 800; /* extrabold */
    line-height: 1.2;
    color: var(--text-primary);
    cursor: pointer;

    /* السهم المخصص */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    
    transition: color 0.2s ease-in-out;
}

.category-select:hover {
    color: var(--accent-color);
}

.category-select:focus {
    outline: none;
    box-shadow: none;
}

/* تنسيق للقسم الفرعي ليكون أصغر قليلاً */
.sub-category-select {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* bold */
    color: var(--text-secondary);
}


/* START: Dynamic Form Field Animation */
.dynamic-form-field {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    max-height: 100px; /* يجب أن تكون القيمة أكبر من ارتفاع الحقل الفعلي */
}

.dynamic-form-field.hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important; /* لإزالة المسافة العلوية عند الإخفاء */
    padding-top: 0;
    padding-bottom: 0;
}
/* END: Dynamic Form Field Animation */

/* START: Complaint & Feedback Modal Improvements */

/* 1. إجبار النافذة على استخدام كامل ارتفاع الشاشة على الهواتف مع الحفاظ على الهيكل */
.modal-content:has(#complaint-form) {
    display: flex;
    flex-direction: column;
    /* على الشاشات الكبيرة، الحد الأقصى للارتفاع 90% من الشاشة */
    max-height: 90vh; 
    /* على الشاشات الصغيرة، تأخذ 100% من الارتفاع */
    height: 100%; 
}

/* 2. جعل الرأس والتذييل ثابتين (لا يتم تمريرهم) */
.modal-content .modal-header,
.modal-content .modal-footer {
    flex-shrink: 0;
}

/* 3. هذا هو الحل السحري: جعل "الجسم" يأخذ المساحة المتبقية ويضيف شريط تمرير عند الحاجة */
.modal-content .modal-body {
    flex-grow: 1;
    overflow-y: auto;

}

/* 4. إضافة خط فاصل أنيق قبل قسم "الطلبات السابقة" */
.form-section {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* 5. تحسينات إضافية للراديو (نعم/لا) */
.form-radio {
    width: 1.25em;
    height: 1.25em;
    accent-color: var(--accent-color);
}

/* END: Complaint & Feedback Modal Improvements */



/* START: Complaint & Feedback Modal Improvements */

/* 1. إجبار النافذة على استخدام كامل ارتفاع الشاشة على الهواتف مع الحفاظ على الهيكل */
.modal-content:has(#complaint-form) {
    display: flex;
    flex-direction: column;
    /* على الشاشات الكبيرة، الحد الأقصى للارتفاع 90% من الشاشة */
    max-height: 90vh; 
    /* على الشاشات الصغيرة، تأخذ 100% من الارتفاع */
    height: 100%; 
}

/* 2. جعل الرأس والتذييل ثابتين (لا يتم تمريرهم) */
.modal-content .modal-header,
.modal-content .modal-footer {
    flex-shrink: 0;
}

/* 3. هذا هو الحل السحري: جعل "الجسم" يأخذ المساحة المتبقية ويضيف شريط تمرير عند الحاجة */
.modal-content .modal-body {
    flex-grow: 1;
    overflow-y: auto;

}

/* 4. إضافة خط فاصل أنيق قبل قسم "الطلبات السابقة" */
.form-section {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* 5. تحسينات إضافية للراديو (نعم/لا) */
.form-radio {
    width: 1.25em;
    height: 1.25em;
    accent-color: var(--accent-color);
}

/* ✅ التعديل هنا: تم زيادة الارتفاع الأقصى */
.dynamic-form-field {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    max-height: 250px; /* تم زيادة القيمة من 100px إلى 250px */
}

.dynamic-form-field.hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important; /* لإزالة المسافة العلوية عند الإخفاء */
    padding-top: 0;
    padding-bottom: 0;
}
/* END: Complaint & Feedback Modal Improvements */


/* ===== بداية تنسيقات الخريطة المحسّنة ===== */
#map-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #e2e8f0;
    border: 1px solid var(--border-color);
}

/* طبقة وهمية لتطبيق الخلفية والتأثير الضبابي */
#map-container::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px; /* تكبير بسيط لتجنب الحواف الفارغة */
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M78 48H84V42H78V48ZM66 48H72V42H66V48ZM60 48H54V42H60V48ZM48 48H42V42H48V48ZM36 48H30V42H36V48ZM24 48H18V42H24V48ZM12 48H6V42H12V48ZM0 48H6V42H0V48ZM78 36H84V30H78V36ZM60 36H66V30H60V36ZM48 36H54V30H48V36ZM30 36H36V30H30V36ZM12 36H18V30H12V36ZM0 36H6V30H0V36ZM78 24H84V18H78V24ZM66 24H72V18H66V24ZM60 24H54V18H60V24ZM48 24H42V18H48V24ZM30 24H36V18H30V24ZM24 24H18V18H24V24ZM0 24H6V18H0V24ZM78 12H84V6H78V12ZM60 12H66V6H60V12ZM48 12H54V6H48V12ZM30 12H36V6H30V12ZM12 12H18V6H12V12ZM0 12H6V6H0V12ZM78 0H84V6H78V0ZM66 0H72V6H66V0ZM48 0H54V6H48V0ZM24 0H30V6H24V0ZM0 0H6V6H0V0Z' fill='%239ca3af' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    filter: blur(2px); /* التأثير الضبابي */
    z-index: 1;
}

/* غلاف المحتوى ليكون فوق الخلفية الضبابية */
#map-container > div {
    position: relative;
    z-index: 2;
}

/* تحسينات الزر */
#get-location-map-btn {
    border: 3px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* تنسيق كبسولة النتيجة الجديد */
#location-result {
    font-size: 0.875rem; /* text-sm, أكبر من السابق */
    font-weight: 600;
    color: #1e293b;
    padding: 0.25rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.75); /* خلفية بيضاء شبه شفافة */
    backdrop-filter: blur(4px); /* تأثير زجاجي جميل */
    border-radius: 9999px; /* شكل كبسولة */
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#location-result a {
    color: var(--accent-color);
    text-decoration: none;
}
#location-result a:hover {
    text-decoration: underline;
}
/* ... في نهاية ملف style.css ... */

.success-btn-custom {
    background-color: var(--success-color) !important;
    background-image: none !important;
    color: white !important; /* ===== أضف هذا السطر ===== */
}

/* ===== بداية تنسيقات شعارات الدفع ===== */
.payment-logo {
    width: 45px;   /* عرض موحد للشعار */
    height: 30px;  /* ارتفاع موحد للشعار */
    object-fit: contain; /* يضمن ظهور الشعار كاملاً بدون تشويه */
}
/* ===== نهاية تنسيقات شعارات الدفع ===== */

/* ===== بداية تنسيقات خيارات الدفع المحسّنة ===== */
.payment-option {
    transition: all 0.2s ease-in-out;
}
/* إضافة ظل وتأثير بسيط عند اختيار طريقة الدفع */
.payment-option:has(:checked) {
    box-shadow: 0 0 0 2px var(--accent-color), 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

/* حاوية الشعار للتحكم في الحجم والمحاذاة */
.payment-logo-container {
    width: 60px;
    height: 40px;
    margin-left: auto; /* لدفع الشعار إلى أقصى اليمين */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الشعار نفسه ليملأ الحاوية بشكل مناسب */
.payment-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* ===== نهاية تنسيقات خيارات الدفع المحسّنة ===== */

/* ===== بداية تنسيقات نظام الدفع المطور ===== */

/* تحسين شكل شريط خيار الدفع */
.payment-option {
    gap: 12px; /* مسافة بين العناصر */
}

/* تنسيق شعار طريقة الدفع */
.payment-logo {
    width: 50px;       /* عرض الشعار */
    height: 32px;      /* ارتفاع الشعار */
    object-fit: contain; /* يضمن ظهور الشعار كاملاً */
    margin-left: auto; /* يدفعه إلى أقصى اليمين */
}

/* تنسيق الشارة (Badge) مثل "موصى به" */
.payment-badge {
    position: absolute;
    top: -10px;        /* لرفعه فوق الشريط */
    right: -10px;      /* لوضعه في الزاوية */
    background-color: var(--accent-color);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}

/* تنسيق زر النسخ داخل التعليمات */
.copy-btn {
    margin-right: 8px; /* في العربية، نستخدم margin-right */
    font-size: 11px;
    padding: 2px 8px;
    background-color: #e2e8f0;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: background-color 0.2s;
}
.copy-btn:hover {
    background-color: #cbd5e1;
}

/* تنسيق مؤقت الدفع */
#wallet-timer {
    background-color: #fee2e2;
    color: #b91c1c;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}
/* ===== نهاية تنسيقات نظام الدفع المطور ===== */


/* ===== بداية تنسيقات بطاقات تفاصيل الطلب ===== */
.details-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* عمود واحد على الشاشات الصغيرة */
    gap: 0.75rem; /* 12px */
}
/* على الشاشات الأكبر، تتحول إلى عمودين */
@media (min-width: 768px) {
    .details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



















/* ===== بداية الكود الموحد والمطور لنافذة تتبع الطلب (يعتمد على متغيرات :root) ===== */

/* --- 1. الهيكل الرئيسي للنافذة --- */
.modal-content:has(#order-status-body) {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-accent);
    border-radius: var(--radius-lg);
}
#order-status-header {
    flex-shrink: 0;
}
#order-status-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}


/* --- 2. تصميم الرأس الديناميكي --- */
.modal-header {
    padding: 1rem 1.5rem;
    color: white;
    text-align: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: background 0.4s ease;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.modal-header h3 { font-size: 1.125rem; font-weight: 700; }
.modal-header span { font-family: monospace; font-weight: bold; background: rgba(0,0,0,0.15); padding: 2px 8px; border-radius: var(--radius-sm);}
/* (الألوان المتدرجة تبقى كما هي لأنها تصميم فريد للحالات) */
.header-review { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.header-processing { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.header-shipping { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.header-delivered { background: linear-gradient(135deg, #16a34a, #22c55e); }
.header-cancelled, .header-hold { background: linear-gradient(135deg, #64748b, #94a3b8); }

/* --- 3. تصميم الخط الزمني (Stepper) --- */
.status-stepper { display: flex; justify-content: space-between; position: relative; margin: 2rem 0; }
.status-stepper .line { position: absolute; top: 22px; right: 10%; width: 80%; height: 4px; z-index: 0; }
.status-stepper .line-bg { background-color: var(--border-color); width: 75%; }
.status-stepper .line-progress { background: var(--accent-color); width: 0%; transition: width 0.6s ease-in-out; }
.step-item { position: relative; text-align: center; flex: 1; z-index: 1; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.5s ease forwards; animation-delay: calc(var(--i) * 0.15s); }
.step-circle { width: 45px; height: 45px; border-radius: 50%; background: var(--border-color); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; border: 4px solid var(--bg-accent); transition: all 0.4s ease; }
.step-icon { width: 20px; height: 20px; }
.step-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.step-item.completed .step-circle { background: var(--accent-color); color: white; }
.step-item.active .step-circle { background: var(--accent-color); color: white; animation: pulse 1.8s infinite; }
.step-item.active .step-label { color: var(--accent-color); }

/* --- 4. تنسيقات خاصة (رسالة المدير، الحالات الخاصة) --- */
.special-status-view { text-align: center; padding: 2rem 1rem; background-color: var(--bg-secondary); border-radius: var(--radius-lg); margin-top: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); }
.admin-message { padding: 0.75rem 1rem; margin: 1.5rem 0; background-color: #f0f9ff; border-right: 4px solid var(--accent-color); color: #0c4a6e; font-size: 1.2rem; border-radius: var(--radius-sm); }
.admin-message strong { color: var(--accent-color); }

/* --- 5. تنسيقات بطاقات التفاصيل (Cards) --- */
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.detail-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); transition: transform 0.3s, box-shadow 0.3s; }
.detail-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.detail-card__header { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--text-primary); padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--bg-accent); }
.detail-card__header i { color: var(--accent-color); width: 18px; height: 18px; }
.detail-card__body { display: flex; flex-direction: column; gap: 1rem; font-size: 14px; }
.detail-row { display: flex; align-items: center; gap: 0.75rem; }
.detail-row .detail-label { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 13px; width: 110px; flex-shrink: 0; }
.detail-row .detail-label i { width: 14px; height: 14px; color: #94a3b8; }
.detail-row .detail-value { font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; flex-grow: 1; text-align: right; }
.inline-copy-btn { background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: inline-flex; transition: all 0.2s; }
.inline-copy-btn:hover { color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-color) 10%, transparent); }
.invoice-card .total { font-size: 16px; font-weight: bold; padding-top: 0.75rem; margin-top: 0.5rem; border-top: 1px solid var(--bg-accent); }
.invoice-card .total strong { color: var(--accent-color); }

/* --- 6. Animations --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ===== نهاية الكود الموحد ===== */
.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s, visibility 0.3s;
}
#filter-bar, #tracking-banner {
    transition: opacity 0.3s, visibility 0.3s;
}
@media (max-width: 640px) {
    #products-title-container {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
        font-size: 1.1rem !important;
        padding: 0.5rem 0 !important;
        width: 100%;
    }
    .primary-btn, .interactive-btn, .mobile-nav-item {
        min-height: 48px;
        font-size: 1rem;
        touch-action: manipulation;
    }
    .product-card {
        min-width: 0;
        width: 100%;
    }
    .product-image-container img {
        border-radius: 1rem;
    }
}