/* ============================================================
   wowprice — сторінки магазину: вітрина, категорія, картка товару.

   Каркас і компоненти — у common.css. Тут тільки те, що специфічне
   для WooCommerce-сторінок.
   ============================================================ */

/* ---------- Картка товару ----------
   Характеристики ЛІВОРУЧ, фото праворуч — рішення замовника (design.md §3).
   Це відрізняється від масового патерну, тому не «виправляти як у всіх».  */
.wpr-product-page__head {
    margin-bottom: var(--section-y)
}

.wpr-product-page__cols {
    display: grid;
    gap: var(--gutter)
}

@media (min-width: 861px) {
    .wpr-product-page__cols {
        /* Фото трохи ширше таблиці: на десктопі саме воно продає. */
        grid-template-columns: 1fr 1.1fr;
        align-items: start
    }

    /* Блок покупки лишається на екрані, поки гортають характеристики —
       прийом із ibattery (design.md §1). Тільки на десктопі: на телефоні
       липкий блок з'їдає екран, там працює порядок «фото → ціна → таблиця». */
    .wpr-product-page__buy {
        position: sticky;
        top: 76px
    }
}

/* На телефоні спершу фото й ціна, і тільки потім характеристики: рішення
   «беру / не беру» приймають до таблиці, а не після неї. */
@media (max-width: 860px) {
    .wpr-product-page__buy {
        order: -1
    }

    .wpr-product-page__cols {
        display: flex;
        flex-direction: column
    }
}

.wpr-specs {
    width: 100%;
    border-collapse: collapse
}

.wpr-specs td {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-size: .95rem
}

.wpr-specs td:first-child {
    color: var(--muted);
    width: 45%
}

.wpr-product-page__desc {
    margin-top: 20px
}

/* ---------- Блок покупки ---------- */
.wpr-buybox {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px
}

.wpr-price-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap
}

.wpr-price-line b {
    font-size: 2rem;
    font-weight: 800
}

.wpr-price-line s {
    color: var(--subtle);
    font-size: 1.1rem
}

/* ---------- Вітрина й категорії ---------- */
/* Чотири картки в ряд на ноутбуці, далі менше.
   Фіксовані точки, а не auto-fill: з auto-fill число колонок залежало від
   ширини вікна, і на широкому моніторі виходило шість дрібних карток, а на
   вузькому все трималось на min(), якого не знають браузери старші за
   Chrome 87 / Safari 14.1 (див. roadmap §5 — там це вже коштувало
   зникнення полів на телефоні).
   minmax(0, 1fr), а не 1fr: інакше колонка не стискається вужче за свій
   вміст, і довга назва товару розтягує сітку в горизонтальний скрол. */
.wpr-catalog {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0
}

@media (max-width: 1100px) {
    .wpr-catalog {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

/* Дві в ряд лишаються до найвужчих екранів: одна картка на всю ширину
   телефону — це один товар на екран і нескінченне гортання вітрини. */
@media (max-width: 780px) {
    .wpr-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.wpr-catalog__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.wpr-catalog__item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: var(--bg);
    /* Запасна висота для браузерів без aspect-ratio. */
    min-height: 180px
}

@supports (aspect-ratio: 1/1) {
    .wpr-catalog__item img {
        min-height: 0
    }
}

.wpr-catalog__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.wpr-catalog__title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text)
}

.wpr-catalog__title:hover {
    color: var(--brand);
    text-decoration: none
}

.wpr-catalog__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto
}

.wpr-catalog__price {
    font-size: 1.2rem;
    font-weight: 800
}

.wpr-catalog__old {
    font-size: .88rem;
    color: var(--subtle);
    text-decoration: line-through
}


/* Те саме для картки товару: колонка з галереєю не має розтягувати сторінку. */
.wpr-product-page__cols>* {
    min-width: 0
}