*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --brand-blue: #2D4263;  /* Тот самый осветленный синий */
    --brand-gold: #F5F1E3;  /* Светлая шампань */
    --text-muted: rgba(245, 241, 227, 0.7);
    --transition-curve: cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-duration: 0.4s;
}

body {
    background-color: var(--brand-blue);
    color: var(--brand-gold);
}


/* Gallery Slides */
.gallery-slide {
    transition: opacity var(--transition-duration) var(--transition-curve);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.gallery-slide.active {
    opacity: 1;
    z-index: 2;
    position: relative;
}

.gallery-container {
    height: 17rem; /* h-64 */
}


/* Navigation Arrows */
.nav-arrow {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transform: translateY(-50%); /* Center vertically */

    /* Apple Style Glassmorphism */
    background: rgba(0, 0, 0, 0.25);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
    transition: all var(--transition-duration) var(--transition-curve);
    opacity: 0; /* Hidden by default */
}

.gallery-container:hover .nav-arrow {
    opacity: 1;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scale(1.1); /* Combine transforms */
}

/* Nudge arrows for better visual centering */
.nav-arrow.left .gallery-arrow-svg {
    transform: translateX(-1px);
}
.nav-arrow.right .gallery-arrow-svg {
    transform: translateX(1px);
}


/* Dot Indicators */
.dot-indicators {
    z-index: 3;
    opacity: 0; /* Hidden by default */
    transition: opacity var(--transition-duration) var(--transition-curve);
}

.gallery-container:hover .dot-indicators {
    opacity: 1;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-curve);
}

.dot.active {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.2);
}

body.body-no-scroll > *:not(.fullscreen-overlay) {
    pointer-events: none;
}

/* Fullscreen Overlay Styles */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999 !important;
    pointer-events: auto !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.fullscreen-overlay .fullscreen-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullscreen-overlay img {
    /* This rule is now overridden by the more specific one below */
    object-fit: contain;
}

.fullscreen-overlay .gallery-container {
    width: 100%;
    height: 100%;
}

.fullscreen-overlay .gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fullscreen-close-button {
    position: absolute;
    top: 2vh;
    right: 2vw;
    cursor: pointer;
    z-index: 1002; /* Above cloned gallery */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all var(--transition-duration) var(--transition-curve);
}
.fullscreen-close-button:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.5);
}


/* Re-position the controls when in fullscreen */
.fullscreen-overlay .nav-arrow {
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.fullscreen-overlay .nav-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}
.fullscreen-overlay .nav-arrow.left { left: 2vw; }
.fullscreen-overlay .nav-arrow.right { right: 2vw; }

.fullscreen-overlay .dot-indicators {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

.fullscreen-overlay .autoplay-progress {
    display: none !important;
}

/* Autoplay Progress Bar */
.autoplay-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-container.is-autoplaying .autoplay-progress {
    opacity: 1;
}

.autoplay-progress-bar {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Slightly transparent white */
    width: 0;
}

.gallery-container.is-autoplaying .autoplay-progress-bar {
    animation: fillProgressBar 6s linear forwards;
}

@keyframes fillProgressBar {
    from { width: 0%; }
    to { width: 100%; }
}

/* =================================================================== */
/* == Глобальные стили для сетки карточек товаров == */
/* =================================================================== */

#product-grid {
    display: grid;
    /* Desktop-first: Set a comfortable minimum width for cards on larger screens */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem; /* Отступ между карточками по умолчанию (десктоп) */
}

/* --- Стили для карточек товаров: выравнивание кнопки внизу --- */

/* 1. Карточка (.bg-white) становится гибким контейнером, занимающим всю высоту ячейки */
#product-grid > .bg-white {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    min-width: 0; /* Сохраняем для корректной работы сетки */
    background-color: #FFFFFF !important; /* Белый фон для выделения */
    color: #1C2B4E !important; /* Темный текст внутри карточки */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Легкая тень для объема */
    transition: transform 0.2s ease-in-out;
}

/* Заголовки карточек */
#product-grid .text-xl {
    color: #1C2B4E; /* Темный цвет для заголовка на белом фоне */
    opacity: 0.9; /* Сохраняем мягкость */
    text-align: center; /* Центрирование названия */
    width: 100%;
}

/* 2. Контентная часть (div.p-6) растягивается, чтобы занять всё доступное место */
#product-grid > .bg-white > div.p-6 {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Заставляет этот блок занять всё свободное пространство по вертикали */
    align-items: center; /* Центрирование содержимого по горизонтали */
}

/* 3. Футер с кнопкой "выталкивается" вниз с помощью margin-top: auto */
#product-grid > .bg-white > div.p-6 > div.flex.justify-center.items-center.flex-shrink-0 {
    margin-top: auto !important;
    width: 100%; /* Полная ширина для центрирования кнопки */
}


/* --- Стили для кнопок "Заказать" --- */
#product-grid button {
    color: var(--brand-gold); /* Золотистый текст из переменной */
    background-color: var(--brand-blue); /* Темно-синий фон из переменной */
    border: 1px solid var(--brand-gold); /* Рамка в цвет золота */
    transition: color var(--transition-duration), background-color var(--transition-duration), border-color var(--transition-duration); /* Обновляем transition с переменными */
}

#product-grid button:hover {
    color: var(--brand-blue); /* Темно-синий текст при наведении */
    background-color: var(--brand-gold); /* Золотистый фон при наведении */
    border-color: var(--brand-blue); /* Рамка в цвет синего для контраста */
}

/* --- Стили текста интерфейса --- */
footer p {
    color: var(--text-muted);
}

.product-description {
    color: #1C2B4E;
    text-align: center; /* Центрирование текста описания */
}

.site-header-text-left,
.site-header-text-right {
    color: var(--brand-gold);
}



/* =================================================================== */
/* == Адаптация для планшетов и смартфонов (до 768px) == */
/* =================================================================== */

@media (max-width: 768px) {
    /* 1. Математика сетки: Устанавливаем единый ритм для отступов */
    #product-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Уточненный minmax */
        gap: 1.5rem;
        padding: 1.5rem;
    }

    /* 2. Геометрия изображения: делаем карточки компактнее */
    .gallery-container {
        height: 12rem; /* Уменьшено с 14rem */
    }

    /* 3. Типографика: уменьшаем шрифт и отступы на кнопке */
    #product-grid button {
        font-size: 0.9rem; /* ~14px */
        padding-top: 0.5rem;    /* Tailwind: py-2 */
        padding-bottom: 0.5rem; /* Tailwind: py-2 */
    }

    /* Скрываем полное описание товара для экономии места */
    .product-description {
        display: none;
    }
    
    /* Уменьшаем отступы внутри карточки */
    #product-grid .p-6 {
        padding: 0.75rem; /* Уменьшено с 1rem */
    }

    /* Уменьшаем заголовок карточки */
    #product-grid .text-xl {
        font-size: 1rem; /* Уменьшено с 1.125rem */
    }
}

/* =================================================================== */
/* == Переопределение для телефонов (< 600px) для сохранения 2 колонок == */
/* =================================================================== */

@media (max-width: 600px) {
    /* 1. Сетка и отступы: gap = padding */
    body #product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        margin-top: 0 !important; /* Убираем отрицательный маржин для чистоты потока */
    }

    /* 2. Симметрия Хедера (Зеркальные отступы сверху и снизу) */
    body header.container.py-8 {
        padding-top: 0.75rem !important; 
        padding-bottom: 0.75rem !important; /* Симметрично верхнему */
    }

    body header img {
        height: 4.5rem !important; 
        margin: 0 auto !important;
        display: block;
    }

    .site-header-text-left,
    .site-header-text-right {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
        font-size: clamp(10px, 3.5vw, 16px) !important;
    }

    /* Сокращаем расстояние между хедером и сеткой */
    body main.container {
        padding-top: 0 !important;
    }

    /* 3. Геометрия изображений: СООТНОШЕНИЕ 4:3 (Уменьшено по вертикали) */
    body #product-grid .gallery-container.card-image {
        width: 100% !important;
        height: 0 !important; 
        padding-top: 75% !important; /* Высота теперь составляет 75% от ширины (соотношение 4:3) */
        position: relative !important;
        overflow: hidden !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    /* Настройка слайдов внутри квадратного контейнера */
    body #product-grid .gallery-container.card-image .gallery-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    body #product-grid .gallery-container.card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Обрезка по центру без сплющивания */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Гарантируем, что сама карточка не зажата по высоте */
    body #product-grid > .bg-white {
        height: auto !important;
        min-height: 0 !important;
    }

    /* 4. Типографика и компактность карточек */
    #product-grid .p-6 {
        padding: 0.5rem; /* Уменьшаем внутренние отступы */
    }

    #product-grid .text-xl { /* Card titles */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(10px, 3.2vw, 14px);
        margin-bottom: 0.25rem;
        text-align: center; /* Принудительное центрирование */
        width: 100%; /* Занимаем всю ширину для корректного центра */
    }

    #product-grid button { /* Button text */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(10px, 3.2vw, 14px);
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Гарантируем отсутствие описания на мобилках */
    .product-description {
        display: none !important;
    }
}

/* =================================================================== */
/* ========= Адаптация только для смартфонов (до 480px) ========= */
/* =================================================================== */

@media (max-width: 480px) {
    #product-grid {
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

/* =================================================================== */
/* == Визуальные эффекты карточки при взаимодействии == */
/* =================================================================== */
#product-grid > .bg-white:hover,
#product-grid > .bg-white:active,
#product-grid > .bg-white:focus-within {
    position: relative;
    z-index: 10;
    /* `transform` is applied by Tailwind's `hover:scale-105` class in script.js */
}







-white:hover,
#product-grid > .bg-white:active,
#product-grid > .bg-white:focus-within {
    position: relative;
    z-index: 10;
    /* `transform` is applied by Tailwind's `hover:scale-105` class in script.js */
}