/* =============================================================================
 * VIKEO — Сетка товаров (product-grid.css)
 * Стиль карточек WooCommerce в духе Wildberries.
 * Используется исключительно CSS без фреймворков.
 * ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
 * CSS-переменные дизайн-системы карточки
 * ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Брендовый акцент */
    --vk-primary:           #e12028;   /* Primary — фирменный красный VIKEO */

    /* Акцентные цвета */
    --pg-price-color:       #cb11ab;   /* Цена — фирменный пурпурно-малиновый WB */
    --pg-btn-bg:            #7b2cf5;   /* Кнопка "В корзину" — фиолетовый */
    --pg-btn-bg-hover:      #6920e0;   /* Кнопка при наведении */
    --pg-btn-color:         #ffffff;

    /* Бейджи */
    --pg-badge-discount-bg: #e12028;   /* Скидка — красный */
    --pg-badge-discount-color: #fff;
    --pg-badge-good-bg:     #ffd600;   /* Хорошая цена — жёлтый */
    --pg-badge-good-color:  #333;
    --pg-badge-sale-bg:     #ff7a00;            /* Распродажа — оранжевый */
    --pg-badge-sale-color:  #fff;

    /* Карточка */
    --pg-card-bg:           #ffffff;
    --pg-card-radius:       12px;
    --pg-card-shadow:       0 1px 4px rgba(0,0,0,.08);
    --pg-card-shadow-hover: 0 6px 20px rgba(0,0,0,.12);

    /* Текст */
    --pg-text-main:         #1a1a1a;
    --pg-text-muted:        #888;
    --pg-text-brand:        #1a1a1a;

    /* Рейтинг — звёздочки */
    --pg-star-empty:        #d0d0d0;
    --pg-star-filled:       #ffa800;

    /* Отступы секции */
    --pg-section-gap:       20px;
    --pg-grid-gap:          8px;

    /* Иконка избранного */
    --pg-wish-color:        rgba(0,0,0,.35);
    --pg-wish-color-active: #cb11ab;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * СЕКЦИЯ — внешний контейнер
 * ───────────────────────────────────────────────────────────────────────────── */
.product-grid-section {
    margin-top: var(--pg-section-gap);
    /* Мобиль: выходим за px-4 чтобы карточки шли от края экрана */
    margin-inline: -1rem;
    overflow-x: clip;
}

/* Планшет и выше: возвращаем нормальное положение внутри контейнера */
@media (min-width: 640px) {
    .product-grid-section {
        margin-inline: 0;
        overflow-x: visible;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ЗАГОЛОВОК СЕКЦИИ
 * ───────────────────────────────────────────────────────────────────────────── */
.product-grid__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.product-grid__title {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--pg-text-main);
    margin: 0;
}

.product-grid__all-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--pg-btn-bg);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}
.product-grid__all-link:hover {
    color: var(--pg-btn-bg-hover);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * CSS GRID — сетка карточек
 * Mobile-First: 2 → 3 → 4 → 5 → 6 колонок
 * ───────────────────────────────────────────────────────────────────────────── */
.product-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1px;

    /* Мобилка: 2 колонки */
    grid-template-columns: repeat(2, 1fr);
}

/* Планшет (≥640px): 4 колонки */
@media (min-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--pg-grid-gap);
    }
}

/* Широкие экраны (≥1024px): 6 колонок */
@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * КАРТОЧКА ТОВАРА — базовый блок
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.product-card article {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pg-card-bg);
    border-radius: var(--pg-card-radius);
    overflow: hidden;
    position: relative;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * БЛОК ИЗОБРАЖЕНИЯ
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__img-wrap {
    position: relative;
    display: block;
    /* 4:5 пропорция — чуть вытянутая карточка как у маркетплейсов */
    aspect-ratio: 4 / 5;
    background: #f7f7f7;
    flex-shrink: 0;
    /*
     * clip-path: inset — единственный способ, который гарантированно
     * обрезает все 4 угла даже внутри родителя с overflow:hidden.
     * border-radius + overflow:hidden внутри flex-родителя работает ненадёжно.
     */
    clip-path: inset(0 round var(--pg-card-radius));
    /* Выше ::after-оверлея .product-card__name-link чтобы mousemove доходил до картинок */
    z-index: 1;
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Плавный zoom при наведении */
    transition: transform .35s ease;
}

/* Скрываем полосу прокрутки в Chrome/Safari */
.product-card__slider::-webkit-scrollbar { 
    display: none; 
}

/* 2. Настройка самих картинок внутри слайдера */
.product-card__slider img {
    flex: 0 0 100%;             /* Каждое фото занимает 100% ширины */
    scroll-snap-align: center;   /* Центрируем при остановке */
    object-fit: cover;           /* Чтобы фото не искажалось */
    aspect-ratio: 4 / 5;         /* Сохраняем твою пропорцию из строки 163 */
}


.product-card article:hover .product-card__img {
    transform: scale(1.04);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * БЕЙДЖИ (плашки поверх фото — левый верхний угол)
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__badges {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    pointer-events: none;
}

.product-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* Скидка */
.product-card__badge--discount {
    background: var(--pg-badge-discount-bg);
    color: var(--pg-badge-discount-color);
    font-size: .75rem;
}

/* Хорошая цена */
.product-card__badge--good-price {
    background: var(--pg-badge-good-bg);
    color: var(--pg-badge-good-color);
}

/* Распродажа */
.product-card__badge--sale {
    background: var(--pg-badge-sale-bg);
    color: var(--pg-badge-sale-color);
    font-size: .8rem;
    padding: 5px 10px;
    border-radius: 6px;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ИКОНКА ИЗБРАННОГО (правый верхний угол)
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__wishlist {
    /* ПЕРЕКЛЮЧАТЕЛЬ: 1 — исходный стиль, 2 — сердцебиение */
    --style: 1; 

    position: absolute;
    top: 0; right: 0;
    width: 44px !important;
    height: 44px !important;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0;
    cursor: pointer; z-index: 10;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent;
}

.product-card__wishlist svg {
    width: 22px !important;
    height: 22px !important;
    fill: #fff !important;
    stroke: #000 !important;
    stroke-width: 2px !important;
    contain: none !important;
    overflow: visible !important;

    /* Логика переключения тени: если --style: 1, включается жирная обводка */
    filter: 
        /* Твой вариант (4 тени) — активен при стиле 1 */
        drop-shadow(calc(1px * (2 - var(--style))) 0 1px #fff)
        drop-shadow(calc(-1px * (2 - var(--style))) 0 1px #fff)
        drop-shadow(0 calc(1px * (2 - var(--style))) 1px #fff)
        drop-shadow(0 calc(-1px * (2 - var(--style))) 1px #fff)
        /* Вариант Профи (1 тень) — активен при стиле 2 */
        drop-shadow(0 0 calc(1px * (var(--style) - 1)) #fff) !important;

    /* Плавность переключения */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Состояние при наведении */
.product-card__wishlist:hover svg {
    stroke: #ff0067 !important;
    transform: scale(1.1);
}

/* Состояние: В избранном (Активное) */
.product-card__wishlist.is-active svg {
    fill: #ff0067 !important;
    stroke: #ff0067 !important;
    transform: scale(1.1);
    
    /* Выбор анимации: если 1 — pulseHeart, если 2 — heartBeat */
    animation: 
        calc(1 / (2 - var(--style))) pulseHeart 0.3s ease-in-out,
        calc(1 / (var(--style) - 0)) heartBeat 0.4s ease-in-out !important;
}

/* --- Обе анимации сохранены без изменений --- */

/* Твоя анимация (Стиль 1) */
@keyframes pulseHeart {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Профессиональная анимация (Стиль 2) */
@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1.1); }
}

/* Адаптив для ховера (из второго кода) */
@media (hover: hover) {
    .product-card__wishlist:hover svg {
        stroke: #ff0067;
        transform: scale(1.1);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ТЕЛО КАРТОЧКИ (цена, название, рейтинг)
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__body {
    padding: 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    padding-bottom: 6px;
    min-width: 0;
}

/* Блок цен */
.product-card__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* Актуальная цена */
.product-card__price {
    font-size: clamp(.95rem, 2vw, 1.3125rem);
    font-weight: 700;
    color: var(--pg-price-color);
    line-height: 1.2;
}
/* Убираем лишние стили WooCommerce внутри span цены */
.product-card__price .woocommerce-Price-amount,
.product-card__price .woocommerce-Price-currencySymbol {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Старая цена */
.product-card__price-old {
    font-size: .875rem;
    color: var(--pg-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--pg-text-muted);
    line-height: 1.2;
}
.product-card__price-old .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
}

/* Ссылка-обёртка названия */
.product-card__name-link {
    color: var(--pg-text-main);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.35;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overlay: растягивается на весь article (position: relative), делая всю карточку кликабельной */
.product-card__name-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Бренд */
.product-card__brand {
    font-weight: 700;
    color: var(--pg-text-brand);
}

/* Название (обычный вес) */
.product-card__name {
    font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * РЕЙТИНГ  ★ 4.8  193 отзыва
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: .79rem;
    line-height: 1;
}

.product-card__rating-star {
    color: var(--pg-star-filled);
    font-size: 1rem;
    line-height: 1;
}

.product-card__rating-value {
    font-weight: 600;
    color: var(--pg-text-main);
}

.product-card__rating-count {
    color: var(--pg-text-muted);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * КНОПКА "В КОРЗИНУ" — всегда внизу карточки
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Минимальный отступ сверху через margin-top: auto не даёт сжатие при 2 строках */
    margin: 6px 8px 8px;
    padding: 8px 10px;
    background: var(--pg-btn-bg);
    color: var(--pg-btn-color);
    font-size: .8rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
    -webkit-tap-highlight-color: transparent;
    /* Прижимаем кнопку к низу карточки */
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.product-card__cart-btn:hover {
    background: var(--pg-btn-bg-hover);
    color: var(--pg-btn-color);
}

.product-card__cart-btn:active {
    transform: scale(.97);
}

/* Состояние "нет в наличии" */
.product-card__cart-btn[disabled],
.product-card__cart-btn.is-out-of-stock {
    background: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * КАРУСЕЛЬ ИЗОБРАЖЕНИЙ
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .3s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}

.product-card__slide {
    flex: 0 0 100%;
    height: 100%;
}

/* Горизонтальный свайп обрабатывает JS, вертикальный скролл — браузер */
.product-card__img-wrap.has-gallery {
    touch-action: pan-y;
}

/* Отключаем zoom при наведении для карточек с галереей */
.product-card article:hover .product-card__img-wrap.has-gallery .product-card__img {
    transform: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ТОЧКИ-ИНДИКАТОРЫ (под картинкой, в потоке документа)
 * ───────────────────────────────────────────────────────────────────────────── */
.product-card__dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    padding: 5px 0 2px;
    position: relative;
    z-index: 1;
}

.product-card__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pg-btn-bg) 30%, transparent);
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, width .2s, border-radius .2s;
}

.product-card__dot.is-active {
    background: var(--pg-btn-bg);
    width: 3px;
    border-radius: 3px;
}

/* Пустой контейнер точек — резервирует высоту у карточек без галереи */
.product-card__dots--empty {
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SKELETON-LOADER (анимированный плейсхолдер)
 * Отображается при JS-загрузке дополнительных товаров
 * ───────────────────────────────────────────────────────────────────────────── */
@keyframes pg-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.product-card--skeleton .product-card__img-wrap,
.product-card--skeleton .product-card__body {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: pg-shimmer 1.4s infinite linear;
}

/* Состояние «В корзине» (is-in-cart) — тонкое визуальное изменение, говорящее «уже добавлено» */
.product-card__cart-btn.is-in-cart {
    background: var(--pg-btn-bg-hover, #6920e0);
    cursor:     default;
}
.product-card__cart-btn[aria-busy="true"] {
    opacity:        .8;
    pointer-events: none;
}
.product-card__cart-btn.is-out-of-stock {
    background: #d1d1d1;
    color:      #6b7280;
    cursor:     not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   СТРАНИЦА ИЗБРАННОГО (/wishlist/) — на всю ширину родителя (max-w 1440px)
   ═══════════════════════════════════════════════════════════════════ */
.wishlist-page              { padding: 8px 0 80px; width: 100%; }
.wishlist-page__head        { margin-bottom: 20px; }
.wishlist-page__title       { font-size: 24px; font-weight: 700; color: #111827; margin: 0; }
.wishlist-page__counter     { color: #6b7280; font-weight: 500; }

/* ── Пустое состояние ─────────────────────────────────────────────── */
.wishlist-page__empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         48px 16px 32px;
    text-align:      center;
}
.wishlist-page__empty-icon {
    width: 96px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.wishlist-page__empty-icon svg { width: 100%; height: 100%; display: block; }
.wishlist-page__empty-title {
    margin: 0 0 6px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
}
.wishlist-page__empty-text {
    margin: 0 0 20px;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.4;
}
.wishlist-page__empty-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          44px;
    padding:         0 28px;
    background:      #e12028;
    color:           #ffffff;
    font-weight:     600;
    font-size:       15px;
    border:          0;
    border-radius:   9999px;
    cursor:          pointer;
    text-decoration: none;
    transition:      background-color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.wishlist-page__empty-btn:hover  { background: #c81b22; }
.wishlist-page__empty-btn:active { transform: scale(.98); }

.wishlist-page__skeleton { padding: 48px 16px; text-align: center; color: #9ca3af; }
.wishlist-page__error    { grid-column: 1 / -1; list-style: none; text-align: center; padding: 32px 16px; color: #ef4444; }

@media (min-width: 768px) {
    .wishlist-page         { padding: 16px 0 80px; }
    .wishlist-page__title  { font-size: 28px; }
    .wishlist-page__empty  { padding: 64px 16px 48px; }
    .wishlist-page__empty-title { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ПРОСМОТРЕННЫЕ ТОВАРЫ — горизонтальная карусель со стрелками.
   Универсальный блок, используется на /wishlist/ и /cart/.
   ═══════════════════════════════════════════════════════════════════ */
.vikeo-viewed         { margin-top: 32px; }
.vikeo-viewed__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.vikeo-viewed__title  {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.vikeo-viewed__controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.vikeo-viewed__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, color .15s, opacity .15s;
    color: #6b7280;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.vikeo-viewed__arrow:hover:not(:disabled) {
    border-color: #b5b5b5;
    color: #111827;
}
.vikeo-viewed__arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* Лента — горизонтальный скролл со снэп-выравниванием */
.vikeo-viewed__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Чтобы тени карточек не обрезались — небольшие отрицательные отступы */
    margin-inline: -1rem;
    padding-inline: 1rem;
}
.vikeo-viewed__track::-webkit-scrollbar { display: none; }

.vikeo-viewed__list {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Карточка в карусели — повторяет логику product-grid (2 / 4 / 6 колонок) */
.vikeo-viewed__list > .product-card {
    flex: 0 0 calc(50% - 4px);
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 640px) {
    .vikeo-viewed__list > .product-card {
        flex: 0 0 calc(25% - 6px);
    }
}
@media (min-width: 1024px) {
    .vikeo-viewed__list > .product-card {
        flex: 0 0 calc(16.6667% - 7px);
    }
}