.nav-scrolled {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.nav-scrolled .logo-tagline {
    display: none;
}

:root {
    --bg: #f3f4f6;
    --accent: #3b82f6;
    --text: #0a0a0a;
    --glass-bg: #ffffff;
    --glass-border: rgba(0,0,0,0.05);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

.product-card { background: var(--glass-bg); border: 1px solid var(--glass-border); transition: all 0.3s; }
.product-card:hover { border-color: #3b82f6; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(59,130,246,0.1); }
.filter-btn.active { background-color: #3b82f6 !important; color: white !important; border-color: #3b82f6 !important; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }

/*
 * Light-theme overrides.
 *
 * ВНИМАНИЕ: эти правила были раньше глобальными и ломали любые элементы
 * с tailwind-классами text-white / bg-white* на чёрном фоне (мобильная
 * кнопка «Фильтры», «Сбросить всё», иконки преимуществ и т.п.).
 *
 * Поэтому теперь инверсия применяется ТОЛЬКО внутри светлых зон:
 *   .light-theme           — секции, исходно сверстанные под тёмную тему,
 *                            которые мы перекрашиваем в светлую;
 *   .modal-light           — модалки (productModal / quickBuyModal),
 *                            у которых фон уже белый.
 *
 * На обычных чёрных кнопках (bg-black + text-white) всё остаётся как
 * задумано: белый текст на чёрном фоне.
 */

.light-theme .text-white,
.modal-light .text-white { color: #0a0a0a !important; }
.light-theme .text-white\/30,
.modal-light .text-white\/30 { color: rgba(0,0,0,0.4) !important; }
.light-theme .text-white\/20,
.modal-light .text-white\/20 { color: rgba(0,0,0,0.2) !important; }
.light-theme .text-white\/40,
.modal-light .text-white\/40 { color: rgba(0,0,0,0.4) !important; }
.light-theme .text-white\/60,
.modal-light .text-white\/60 { color: rgba(0,0,0,0.6) !important; }
.light-theme .text-white\/80,
.modal-light .text-white\/80 { color: rgba(0,0,0,0.8) !important; }
.light-theme .text-white\/10,
.modal-light .text-white\/10 { color: rgba(0,0,0,0.1) !important; }

.light-theme .bg-white\/5,
.modal-light .bg-white\/5 { background-color: rgba(0,0,0,0.05) !important; }
.light-theme .bg-white\/10,
.modal-light .bg-white\/10 { background-color: rgba(0,0,0,0.1) !important; }
.light-theme .border-white\/10,
.modal-light .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }

/* Полупрозрачные «чёрные» оверлеи в светлых зонах превращаем в светлые */
.light-theme .bg-black\/50,
.modal-light .bg-black\/50 { background-color: rgba(255,255,255,0.8) !important; }
.light-theme .bg-black\/95,
.modal-light .bg-black\/95 { background-color: rgba(255,255,255,0.95) !important; }
.light-theme .bg-black\/20,
.modal-light .bg-black\/20 { background-color: rgba(0,0,0,0.05) !important; }

/*
 * Защита: даже внутри светлых зон, если элемент сам по себе имеет
 * цветной/тёмный фон (bg-blue-*, bg-black), его белый текст должен
 * оставаться белым — иначе теряется контраст (тёмный на синем/чёрном).
 */
.light-theme [class*="bg-blue-"].text-white,
.light-theme .bg-black.text-white,
.modal-light [class*="bg-blue-"].text-white,
.modal-light .bg-black.text-white { color: #ffffff !important; }

/* Кнопки фильтров — общий стиль каталога (не зависит от light-theme) */
.filter-btn { border-color: rgba(0,0,0,0.1); color: #0a0a0a; }

/* Модалки товара / быстрой покупки — фон всегда белый */
#productModal .bg-neutral-900,
#quickBuyModal .bg-neutral-900 { background-color: #ffffff !important; color: #0a0a0a !important; }
#productModal .bg-white\/5 { background-color: #f9f9f9 !important; }

/* Поля ввода — единый светлый стиль */
input, select { background-color: #f5f5f5 !important; color: #0a0a0a !important; border-color: rgba(0,0,0,0.1) !important; }

/* Technical/wireframe images inversion (keeping it as it was meant for white bg) */
#selection img,
.reveal-img img { 
    filter: invert(1) hue-rotate(180deg) brightness(1.1); 
}

/* Mobile Sidebar Drawer Animation */
@media (max-width: 1023px) {
    #catalog-sidebar.flex {
        display: flex !important;
        flex-direction: column;
        animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes slideIn {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

#cart-count.opacity-1 { opacity: 1 !important; }

/* 🛍 Cart Modal UI Optimizations */
#cartModal .max-w-5xl {
    max-width: 960px !important;
}

@media (max-width: 767px) {
    #cartModal {
        padding: 0 !important;
    }
    #cartModal > div.relative {
        border-radius: 0 !important;
        max-height: 100vh !important;
        height: 100% !important;
    }
    #cart-items {
        padding: 0.75rem !important;
        min-height: 30vh !important;
    }
    #cartModal .p-3 {
        padding: 0.5rem 0.75rem !important;
    }
    #cartModal .w-full.md\:w-\[320px\] {
        padding: 1rem !important;
    }
    #checkout-submit-btn {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* 1. Название товара полностью в каталоге */
    .product-card-title {
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        display: block !important;
        font-size: 13px !important;
    }

    /* 2. Изображение больше в каталоге */
    .product-card .aspect-square {
        aspect-ratio: 1/1 !important;
        padding: 0.75rem !important;
    }
    
    .product-card .aspect-square img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* 3. Попап - скролл на весь блок (ОТКЛЮЧЕНО - перенесено в основную логику) */
    /* #productModal .relative.w-full { ... } */
    
    #productModal .modal-footer-fixed {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        padding: 1rem !important;
        border-top: 1px solid rgba(0,0,0,0.05) !important;
        z-index: 50 !important;
    }
}

#cart-items::-webkit-scrollbar {
    width: 4px;
}
#cart-items::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
}