/* PRODUCT — картка товару.
 * Найважчий модуль, але потрібен ЛИШЕ на /product/*.
 * Категорії й головна його не вантажать. */

.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 720px) { .product { grid-template-columns: 1fr; } }

/* Фото товару зняті на білому тлі. У темній темі це виглядало б
   яскравою плямою, тому даємо їм власну постійно-світлу підкладку
   з рамкою — білий стає навмисною частиною картки, а не "дірою". */
.product-media {
    background: var(--photo-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--photo-pad);
}
.product-img {
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: calc(var(--radius) - 3px); display: block;
}

.price-main { font-size: 26px; font-weight: 700; margin: 12px 0 8px; }
.price-main .per-kg { font-size: 15px; font-weight: 400; }

.variants, .specs {
    width: 100%; border-collapse: collapse; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.variants th, .variants td,
.specs th, .specs td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.variants thead th { background: var(--accent-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.variants tr:last-child th, .variants tr:last-child td,
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 45%; color: var(--muted); font-weight: 500; }

.order-box { margin-top: 24px; padding: 20px; background: var(--accent-soft); border-radius: var(--radius); }
.order-box p { font-size: 14px; margin: 6px 0 14px; }

.product-desc { margin-top: 48px; }
.product-desc p { max-width: 70ch; }

/* ---------- вибір фасовки ---------- */
.variants-choice { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.variant {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.variant:hover:not(.is-off) { border-color: var(--accent); background: var(--accent-soft); }
.variant:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.variant.is-off { opacity: .5; cursor: not-allowed; }
.variant-label { font-weight: 600; }
.variant-price { margin-left: auto; font-weight: 700; }
.add-form .order-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.add-form .order-box p { width: 100%; margin: 0; }
.qty-input {
    width: 64px; padding: 10px 8px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 15px; background: var(--surface); color: var(--text);
}