/* product-card.css — карточка товара (.pcard) и сетка товаров (.product-grid).
   Разметка: templates/partials/product-card.html.

   Карточку показывают ВСЕ разделы магазина (главная, категория, поиск, бренд,
   тег, избранное, рекомендации), поэтому стили вынесены в отдельный файл:
   раздел подключает его сам ({asset_css file="css/product-card.css"}), а для
   страниц вне каталога достаточно одной строки @import в css/theme.css.

   Цвета берутся только из токенов темы (см. theme.css), значения после запятой
   в var() — страховка на случай, если токен ещё не объявлен. */

/* ── Сетка товаров ──────────────────────────────────────────────────────────
   Число колонок задаёт настройка темы «Товаров в ряд» через инлайновую
   переменную --per-row на самом контейнере; на узких экранах колонки
   переопределяются медиазапросами (правило свойства, а не переменной, —
   поэтому инлайновый стиль ему не мешает). */
.product-grid {
    display: grid;
    grid-template-columns: repeat(var(--per-row, 4), minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 768px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ── Карточка ── */
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: var(--card, #fff);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 24, 40, .04));
    transition: box-shadow .18s ease, transform .18s ease;
}
.pcard:hover {
    box-shadow: var(--shadow-hover, 0 12px 28px rgba(16, 24, 40, .10));
    transform: translateY(-2px);
    z-index: 2;
}

/* ── Фото ── */
.pcard__top { position: relative; }
.pcard__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm, 8px);
    background: #fff;
}
.pcard__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Товар без фотографии. Плоская светлая заливка сливается с белой карточкой и
   читается как «страница не догрузилась», поэтому место фото занимает мягкая
   подложка с иконкой в белом кружке и подписью — видно, что так задумано. */
.pcard__noimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 100%;
    padding: 12px;
    background: linear-gradient(160deg, var(--primary-soft, #eeefff) 0%, var(--surface-2, #f4f6f9) 100%);
    color: var(--muted, #8d8d8d);
    text-align: center;
}
.pcard__noimg i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary, #4652ff);
    font-size: 18px;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
}
.pcard__noimg-text { max-width: 140px; font-size: 11px; line-height: 1.35; }
.pcard.is-out .pcard__img { opacity: .55; }

/* Плашки «хит»/«акция»/«предзаказ» — слева сверху */
.pcard__flags {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    pointer-events: none;
}
.pcard__flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    padding: 0 9px;
    border-radius: var(--radius-pill, 999px);
    background: var(--accent, #fc612e);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.pcard__flag i { font-size: 10px; }
.pcard__flag--preorder { background: var(--primary, #4652ff); }

/* Кнопка «в избранное» — справа сверху. Активное состояние (класс is-active)
   и подмену иконки на залитое сердце ставит theme.js. */
.pcard__fav {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--muted, #8d8d8d);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(16, 24, 40, .12);
    transition: color .15s ease, transform .15s ease;
}
.pcard__fav:hover { color: var(--badge, #ff0638); transform: scale(1.06); }
.pcard__fav.is-active { color: var(--badge, #ff0638); }
.pcard__fav.is-flash { animation: cartix-shake .4s; }
@keyframes cartix-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Зоны переключения галереи + индикаторы */
.pcard__zones { position: absolute; inset: 0 0 14px 0; z-index: 2; display: flex; }
.pcard__zone { flex: 1; }
.pcard__dots {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}
.pcard__media[data-gallery]:hover .pcard__dots { opacity: 1; }
.pcard__dot { flex: 1; height: 3px; border-radius: 3px; background: var(--line, #e8e8e8); transition: background .15s ease; }
.pcard__dot.is-active { background: var(--primary, #4652ff); }

/* ── Текстовая часть ── */
.pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding-top: 12px;
}
/* Строки описания товара одним блоком: в виде «списком» он становится
   отдельной колонкой рядом с ценой (см. низ файла) */
.pcard__info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* Оценка */
.pcard__rating { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted, #8d8d8d); }
.pcard__rating i { font-size: 11px; color: var(--star, #f09b0a); }
.pcard__rating.is-empty i { color: var(--line, #e8e8e8); }
.pcard__rating-val { font-weight: 600; color: var(--ink, #2d2d32); }
.pcard__rating.is-empty .pcard__rating-val { color: var(--muted, #8d8d8d); font-weight: 500; }

/* Наличие */
.pcard__stock { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success, #058427); }
.pcard__stock-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pcard__stock.is-out { color: var(--muted, #8d8d8d); }
.pcard__stock.is-preorder { color: var(--accent, #fc612e); }

/* Длинный артикул (APPLE-IPAD-AIR-2-128-GB-BLACK) занимал две строки и сдвигал
   название — карточки в ряду переставали совпадать. Держим в одну строку. */
.pcard__sku {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted, #8d8d8d);
    font-size: 11px;
    letter-spacing: .02em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pcard__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1px;
    min-height: 2.7em;
    color: var(--ink, #2d2d32);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    transition: color .15s ease;
}
.pcard__name:hover { color: var(--primary, #4652ff); }

/* ── Варианты покупки (цвета и значения) ─────────────────────────────────────
   Ряд под названием: у характеристики вида «цвет» — кружки заливки, у прочих —
   компактные чипы с подписью. Выбранный вариант обведён основным цветом.
   Ряд не переносится: лишние значения уезжают за «+N» со ссылкой в карточку.

   Ряд прокручивается вбок, а не переносится: перенос гонял бы высоту карточек
   в ряду (у одного товара один ряд значений, у соседнего — два), а на узком
   экране четвёртый чип просто обрезался краем карточки. Полоса прокрутки
   спрятана — на телефоне это привычный горизонтальный свайп. */
.pcard__variants { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.pcard__vrow {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* место под обводку выбранного чипа, иначе она срезается при прокрутке */
    padding: 2px;
    margin: -2px;
}
.pcard__vrow::-webkit-scrollbar { display: none; }

.pcard__vopt {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--line, #e8e8e8);
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    color: var(--ink, #2d2d32);
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.pcard__vlabel { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pcard__vopt:hover { border-color: var(--primary, #4652ff); color: var(--primary, #4652ff); }
.pcard__vopt.is-active { border-color: var(--primary, #4652ff); color: var(--primary, #4652ff); }
.pcard__vopt:focus-visible { outline: 2px solid var(--primary, #4652ff); outline-offset: 2px; }
/* Вариант, снятый с продажи: виден, но видно и что его не купить */
.pcard__vopt.is-gone { opacity: .45; }

/* Кружок цвета: рамка отделяет светлые заливки (белый, бежевый) от фона */
.pcard__vrow.is-color .pcard__vopt {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border-color: transparent;
}
.pcard__vrow.is-color .pcard__vopt.is-active { border-color: var(--primary, #4652ff); }
.pcard__vdot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--swatch, var(--line, #e8e8e8));
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14);
}

.pcard__vmore {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 6px;
    color: var(--muted, #8d8d8d);
    font-size: 11px;
    line-height: 1;
}
.pcard__vmore:hover { color: var(--primary, #4652ff); }

/* ── Низ карточки: цена + кнопка корзины ── */
.pcard__foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.pcard__price { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pcard__price-now {
    color: var(--ink, #2d2d32);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.pcard__price-was { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Скрытые строка старой цены и бейдж скидки: у карточки с вариантами они
   присутствуют всегда, а показываются только когда у варианта есть скидка.
   Правило нужно явно — объявленный display перебивает встроенное [hidden]. */
.pcard__price-was[hidden], .pcard__off[hidden] { display: none; }
.pcard__price-old { color: var(--muted, #8d8d8d); font-size: 13px; text-decoration: line-through; }
.pcard__off {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--badge, #ff0638);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.pcard__buy {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary, #4652ff);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
/* Подпись кнопки нужна только в виде «списком» — там кнопка широкая */
.pcard__buy-label { display: none; }
.pcard__buy:hover { background: var(--primary-600, #3742e0); }
.pcard__buy:active { transform: scale(.94); }
/* Выбран вариант, которого нет в продаже: кнопка гаснет вместо исчезновения —
   покупатель видит, что дело в варианте, а не в поломке карточки */
.pcard__buy:disabled { background: var(--line, #e8e8e8); color: var(--muted, #8d8d8d); cursor: not-allowed; }
.pcard__buy:disabled:hover { background: var(--line, #e8e8e8); }
.pcard__buy.is-preorder { background: var(--accent, #fc612e); }
.pcard__buy.is-preorder:hover { background: var(--accent, #fc612e); filter: brightness(.92); }

.pcard__out { max-width: 96px; color: var(--muted, #8d8d8d); font-size: 12px; text-align: right; line-height: 1.2; }

/* ── Вид «списком» (переключатель в тулбаре каталога) ────────────────────────
   Три зоны в строку: фото слева, описание по центру, цена и кнопка покупки в
   правой колонке за разделителем. Разметка та же, что и в плитке, — меняется
   только раскладка, поэтому переключение вида не трогает DOM. Название в
   списке идёт первым (порядок строк переставляем через order). */
.product-grid.is-list { grid-template-columns: 1fr; gap: 12px; }
.product-grid.is-list .pcard { flex-direction: row; align-items: stretch; gap: 20px; padding: 16px; }
.product-grid.is-list .pcard__top { flex: none; width: 200px; }
.product-grid.is-list .pcard__body { flex-direction: row; align-items: stretch; gap: 22px; padding-top: 0; }
.product-grid.is-list .pcard__info { flex: 1 1 auto; gap: 7px; }
/* Краткое описание — только в списке: в плитке оно распирало бы карточку */
.pcard__summary { display: none; }
.product-grid.is-list .pcard__summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    order: -1;
    margin: 0;
    color: var(--muted, #8d8d8d);
    font-size: 13px;
    line-height: 1.45;
}
.product-grid.is-list .pcard__name {
    order: -2;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 0;
    min-height: 0;
    font-size: 16px;
    font-weight: 600;
}
.product-grid.is-list .pcard__rating { order: -1; }
.product-grid.is-list .pcard__sku { order: 1; }

.product-grid.is-list .pcard__foot {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    width: 214px;
    margin-top: 0;
    padding: 4px 0 4px 22px;
    border-left: 1px solid var(--line, #e8e8e8);
}
.product-grid.is-list .pcard__price { gap: 5px; }
.product-grid.is-list .pcard__price-now { font-size: 22px; }
.product-grid.is-list .pcard__buy {
    width: 100%;
    height: 44px;
    border-radius: var(--radius, 12px);
    font-size: 14px;
    font-weight: 600;
}
.product-grid.is-list .pcard__buy-label { display: inline; }
.product-grid.is-list .pcard__out { max-width: none; text-align: center; }

@media (max-width: 1200px) {
    .product-grid.is-list .pcard__top { width: 170px; }
    .product-grid.is-list .pcard__foot { width: 190px; padding-left: 18px; }
}

@media (max-width: 992px) {
    .product-grid.is-list .pcard { gap: 16px; padding: 14px; }
    .product-grid.is-list .pcard__top { width: 140px; }
    .product-grid.is-list .pcard__body { gap: 16px; }
    .product-grid.is-list .pcard__name { font-size: 15px; }
    .product-grid.is-list .pcard__foot { width: 168px; gap: 10px; padding-left: 16px; }
    .product-grid.is-list .pcard__price-now { font-size: 19px; }
    .product-grid.is-list .pcard__buy { height: 40px; font-size: 13px; }
}

@media (max-width: 768px) {
    .pcard { padding: 10px; }
    .pcard__body { padding-top: 10px; }
    .pcard__price-now { font-size: 16px; }
    .pcard__buy { width: 38px; height: 38px; font-size: 14px; }
    .pcard__fav { width: 30px; height: 30px; font-size: 13px; }
    .pcard__noimg i { width: 40px; height: 40px; font-size: 16px; }

    /* Узкий экран: фото остаётся слева (так список отличим от плитки), а цена
       с кнопкой переезжают под описание — на колонку справа места уже нет */
    .product-grid.is-list .pcard { gap: 12px; padding: 10px; }
    .product-grid.is-list .pcard__top { width: 116px; }
    .product-grid.is-list .pcard__body { flex-direction: column; gap: 0; padding-top: 0; }
    .product-grid.is-list .pcard__info { gap: 5px; }
    .product-grid.is-list .pcard__name { font-size: 14px; }
    .product-grid.is-list .pcard__foot {
        width: auto;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
        margin-top: auto;
        padding: 10px 0 0;
        border-left: 0;
    }
    .product-grid.is-list .pcard__price-now { font-size: 17px; }
    .product-grid.is-list .pcard__buy { width: 38px; height: 38px; border-radius: 50%; font-size: 14px; }
    .product-grid.is-list .pcard__buy-label { display: none; }
    .product-grid.is-list .pcard__out { max-width: 96px; text-align: right; }
}

/* Самые узкие экраны: карточка в два столбца, поэтому низ собираем плотнее —
   иначе цена, старая цена и бейдж скидки встают тремя строками и подпирают
   круглую кнопку корзины */
@media (max-width: 480px) {
    .pcard__body { padding-top: 8px; }
    .pcard__rating, .pcard__stock { font-size: 11px; }
    .pcard__name { min-height: 2.6em; font-size: 13px; }
    .pcard__flag { height: 19px; padding: 0 7px; font-size: 10px; }
    .pcard__fav { top: 4px; right: 4px; width: 28px; height: 28px; font-size: 12px; }

    /* Варианты в две колонки карточек: чипы мельче, иначе ряд не влезает */
    .pcard__variants { gap: 4px; margin-top: 5px; }
    .pcard__vopt { height: 20px; padding: 0 6px; font-size: 10px; }
    .pcard__vrow.is-color .pcard__vopt { width: 20px; height: 20px; padding: 0; }
    .pcard__vdot { width: 14px; height: 14px; }
    .pcard__vmore { height: 20px; font-size: 10px; }

    .pcard__foot { gap: 6px; padding-top: 10px; }
    .pcard__price { gap: 2px; }
    .pcard__price-now { font-size: 15px; }
    .pcard__price-was { gap: 4px; }
    .pcard__price-old { font-size: 11px; }
    .pcard__off { padding: 1px 4px; border-radius: 5px; font-size: 10px; }
    .pcard__buy { width: 34px; height: 34px; font-size: 13px; }
    .pcard__out { max-width: 80px; font-size: 11px; }

    .product-grid.is-list .pcard__top { width: 96px; }
    .product-grid.is-list .pcard__buy { width: 34px; height: 34px; }
}