/**
 * catalog.css — Стили каталога товаров.
 * Использует CSS-переменные из market.css (дизайн-система).
 * Здесь только специфичные стили, которых нет в market.css.
 */

/* ============================================================
   Анимации
   ============================================================ */
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* ============================================================
   Product Card — дополнения к базовым стилям из market.css
   ============================================================ */
.product-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Плитки / Photogallery view
   ============================================================ */
.product-grid-item {
    aspect-ratio: 1 / 1;
    width: 100%;
}

.product-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-grid-item img.lazy-img-loaded {
    opacity: 1;
}

/* ============================================================
   Filter Bottom-Sheet (мобильный)
   ============================================================ */
@media (max-width: 1023px) {
    .filter-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-modal, 50);
        max-height: 85vh;
        border-radius: var(--radius-2xl, 16px) var(--radius-2xl, 16px) 0 0;
        overflow-y: auto;
        background: var(--color-bg, white);
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12);
    }

    .dark .filter-panel {
        background: var(--dark-bg, #1f2937);
    }

    .filter-panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--color-border, #d1d5db);
        border-radius: var(--radius-full, 2px);
        margin: var(--space-sm, 8px) auto 0;
    }

    .dark .filter-panel::before {
        background: var(--dark-border, #4b5563);
    }
}

/* ============================================================
   Карусель фото (страница товара)
   ============================================================ */
.product-carousel {
    position: relative;
    overflow: hidden;
}

.product-carousel .carousel-track {
    display: flex;
    transition: transform 0.3s ease;
}

.product-carousel .carousel-slide {
    min-width: 100%;
    aspect-ratio: 1;
}

.product-carousel .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   Адаптация для мобильных устройств
   ============================================================ */
@media (max-width: 640px) {
    .product-card .text-lg {
        font-size: 1rem;
    }
}