/* ── Картка товару в сітці ───────────────────────────────────────────────────
   Оформлення глобального компонента `pages/global/product-card.php`, коли
   він стоїть у сітці або в каруселі товарів. Спільний файл на три місця —
   каталог (`.shop__item`), акційні пропозиції (`.promos__item`), каруселі
   під карткою товару (`.products-carousel__slide`) і «Новинки» на головній
   (`.product-slider__item`): картка там має бути
   однакова, а копії тих самих правил розійшлися б уже на першій правці.
   Той самий підхід, що в css/pages/calculator-base.css.

   Скопом навмисно по обгортках сітки, а не по глобальному `.product-card`
   у main.css: на головній і в калькуляторі картка лишається як була. */

/* 3. Grid за замовчуванням розтягує кожен .shop__item на висоту
   найвищого в рядку (align-items:stretch — дефолт), але сам .product-card
   всередині — звичайний блок, який не підхоплював цю висоту сам собою:
   картки без варіацій виходили нижчими за картки з ними, ряд "стрибав".
   display:flex на .shop__item + product-card як flex-item на всю висоту
   вирішує це раз і назавжди, без підбору конкретних px. */
.shop__item,
.promos__item,
.products-carousel__slide,
.product-slider__item {
    display: flex;
    min-width: 0;
}

/* ── Картка товару в сітці магазину ──────────────────────────────────────────
   1-2. Рамка й hover — зняті вимірюванням з проду (border 1px, колір
   #222222, тобто той самий відтінок, що наш --color-text). Кути й відступи
   збільшені за прямим запитом Viktor (16px/24px — не з проду й не з
   глобального --radius 4px, свідоме окреме рішення для картки в сітці
   магазину). Hover — проду там узагалі не копіюємо: там box-shadow, тут
   за прямим запитом Viktor — фон. */
.shop__item .product-card,
.promos__item .product-card,
.products-carousel__slide .product-card,
.product-slider__item .product-card {
    width: 100%;
    padding: 24px;
    border: 1px solid var(--color-text);
    border-radius: 16px;
    transition: background var(--transition);
}
.shop__item .product-card:hover,
.promos__item .product-card:hover,
.products-carousel__slide .product-card:hover,
.product-slider__item .product-card:hover {
    background: var(--color-bg-alt);
}

/* 3. Заголовок по центру, максимум 2 рядки з обрізанням і резерв висоти під
   них — щоб короткі й довгі назви в одному рядку сітки не зсували ціну й
   кнопку одна відносно одної (та сама проблема, що спливла ще в дизайн-
   огляді сторінки). em, не px: підлаштовується під будь-який font-size, що
   вже каскадується (24px базовий, 18px ≤768 — обидва з main.css). */
.shop__item .product-card__title,
.promos__item .product-card__title,
.products-carousel__slide .product-card__title,
.product-slider__item .product-card__title {
    text-align: center;
    min-height: 2.6em;
}
.shop__item .product-card__title a,
.promos__item .product-card__title a,
.products-carousel__slide .product-card__title a,
.product-slider__item .product-card__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 5. Ціна по центру. */
.shop__item .product-card__price,
.promos__item .product-card__price,
.products-carousel__slide .product-card__price,
.product-slider__item .product-card__price {
    text-align: center;
}

/* ── Вибір варіації прямо в картці ───────────────────────────────────────────
   Нове порівняно з продом (там варіації обираються тільки на сторінці
   товару) — за прямим запитом Viktor. Кнопки-«свотчі» замість <select> —
   за зразком product-card__swatch із easypaw.com.ua (розміри/радіус зняті
   вимірюванням звідти: 6px, компактний чіп), кольори — свої токени замість
   їхнього бренд-teal. Значення й підписи для кнопок і тут рахує
   wc_dropdown_variation_attribute_options() на боці PHP — тут лише вигляд. */
.shop__item .product-card__variations,
.promos__item .product-card__variations,
.products-carousel__slide .product-card__variations,
.product-slider__item .product-card__variations {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    /* 3.1 Відступ знизу — від наступного елемента картки (кнопки). */
    margin: 8px 0 16px;
}
.shop__item .product-card__variation-field,
.promos__item .product-card__variation-field,
.products-carousel__slide .product-card__variation-field,
.product-slider__item .product-card__variation-field {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.shop__item .product-card__swatch,
.promos__item .product-card__swatch,
.products-carousel__slide .product-card__swatch,
.product-slider__item .product-card__swatch {
    padding: 4px 10px;
    border: 1px solid var(--color-text);
    border-radius: 6px;
    background: var(--color-bg);
    font-family: var(--font-body);
    /* 3.4 Було 13px — замало поруч із рештою тексту картки (ціна 20px,
       назва 24px), збільшено. */
    font-size: 15px;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.shop__item .product-card__swatch:hover,
.promos__item .product-card__swatch:hover,
.products-carousel__slide .product-card__swatch:hover,
.product-slider__item .product-card__swatch:hover {
    background: var(--color-bg-alt);
}
.shop__item .product-card__swatch.is-selected,
.promos__item .product-card__swatch.is-selected,
.products-carousel__slide .product-card__swatch.is-selected,
.product-slider__item .product-card__swatch.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-secondary);
}
/* 3.2 Варіант, якого немає в наявності — сірий і закреслений, клік
   вимкнено (disabled на самій кнопці, див. product-card.php). */
.shop__item .product-card__swatch:disabled,
.promos__item .product-card__swatch:disabled,
.products-carousel__slide .product-card__swatch:disabled,
.product-slider__item .product-card__swatch:disabled {
    border-color: var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-muted);
    text-decoration: line-through;
    cursor: not-allowed;
}
.shop__item .product-card__swatch:disabled:hover,
.promos__item .product-card__swatch:disabled:hover,
.products-carousel__slide .product-card__swatch:disabled:hover,
.product-slider__item .product-card__swatch:disabled:hover {
    background: var(--color-bg-alt);
}

/* 6. Кнопка по центру (горизонталь) і завжди внизу картки (вертикаль,
   margin-top:auto в flex-column) — щоб "Придбати" стояла на одній лінії
   в усьому рядку сітки незалежно від того, є в картці варіації, чи назва
   товару зайняла один рядок чи два. */
.shop__item .product-card__btn,
.promos__item .product-card__btn,
.products-carousel__slide .product-card__btn,
.product-slider__item .product-card__btn {
    align-self: center;
    margin-top: auto;
}
/* "В кошику" — варіація вже додана (щойно чи ще з попереднього разу,
   Store API на завантаженні сторінки). Неклікабельна позначка стану, не
   кнопка дії — тому притлумлена, без hover-ефекту "Придбати"/"В кошик". */
.shop__item .product-card__btn[data-mode="added"],
.promos__item .product-card__btn[data-mode="added"],
.products-carousel__slide .product-card__btn[data-mode="added"],
.product-slider__item .product-card__btn[data-mode="added"] {
    background: var(--color-bg-alt);
    color: var(--color-muted);
    cursor: default;
}
.shop__item .product-card__btn[data-mode="added"]:hover,
.promos__item .product-card__btn[data-mode="added"]:hover,
.products-carousel__slide .product-card__btn[data-mode="added"]:hover,
.product-slider__item .product-card__btn[data-mode="added"]:hover {
    opacity: 1;
}

@media (max-width: 1024px) {
    /* Нижче десктопа сторінку гортають пальцем, а не мишею, а свотч —
       тепер один із головних органів керування картки. Його 15px шрифт не
       зменшується на жодній ширині, тож він скрізь був 34px заввишки при
       орієнтирі ~44px. Кнопки тут навмисно немає: на планшеті вона вже
       ~43px (шрифт 22px), добирати їй падінг — це зробити 51px і різкий
       стрибок на межі 1024/1025. */
    .shop__item .product-card__swatch,
    .promos__item .product-card__swatch,
    .products-carousel__slide .product-card__swatch,
    .product-slider__item .product-card__swatch {
        padding: 8px 12px;
    }
}

/* Найвужча картка — не на телефоні (там одна колонка на всю ширину, 335px),
   а в багатоколонковому діапазоні: заміряно 215px на 481px екрана (2
   колонки), 230px на 769px (3 колонки) і 231px на 1025px — останнє тому,
   що четверта колонка вмикається раніше, ніж під неї з'являється місце.
   Десктопні 24px падінга з'їдали там третину картки, через що обрізалась
   половина назв товарів. */
@media (min-width: 481px) and (max-width: 1200px) {
    .shop__item .product-card,
    .promos__item .product-card,
    .products-carousel__slide .product-card,
    .product-slider__item .product-card {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    /* Тут шрифт кнопки вже мобільний (16px, main.css), тому вона була 36px
       — найдрібніший тач-таргет сторінки. 8px падінга дають 42px, тобто
       приблизно як на проді (41px) і в межах орієнтира. */
    .shop__item .product-card__btn,
    .promos__item .product-card__btn,
    .products-carousel__slide .product-card__btn,
    .product-slider__item .product-card__btn {
        padding: 8px 20px;
    }
}

/* ── Мобільний: крупніший дрібний текст ─────────────────────────────────────
   Сайт читає багато людей старшого віку, їм має бути зрозуміло, де і що
   (запит Viktor). Тому на ≤768px усі шрифти дрібніше 18px піднято за єдиною
   шкалою: 12→14, 13→15, 14→16, 15→16, 16→17, 17→18. Десктоп не чіпали.
   Правила, що вже були у мобільних медіа-блоках, підвищено на місці; сюди
   зібрано ті, що задавались лише для великих екранів. */
@media (max-width: 768px) {
    .shop__item .product-card__swatch, .promos__item .product-card__swatch, .products-carousel__slide .product-card__swatch, .product-slider__item .product-card__swatch { font-size: 16px; }
}