/* Страница товара (DESIGN.md, «Страницы → Товар»). Только раскладка компонентов main.css и свои блоки:
   галерея, просмотр фото, блок покупки, варианты кнопками, факты, секции, липкая кнопка телефона.
   Mobile-first: база — телефон, дальше 641 / 901 / 1101. */

/* ================================================================
   Раскладка: галерея + покупка
   ================================================================ */
.pp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.pp__gallery, .pp__buy { min-width: 0; }

@media (min-width: 901px) {
	.pp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); align-items: start; }
	/* фото остаётся в кадре, пока читают блок покупки */
	.pp__gallery { position: sticky; top: var(--sp-5); }
}
@media (min-width: 1101px) {
	.pp { gap: var(--sp-8); }
}

/* ================================================================
   Галерея: лента на подложке (листается пальцем), миниатюры с 641px
   ================================================================ */
.gal__main { position: relative; }
.gal__track {
	display: flex; aspect-ratio: 1 / 1; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { display: flex; flex: 0 0 100%; align-items: center; justify-content: center; scroll-snap-align: start; cursor: zoom-in; }
.gal__slide img { width: 100%; height: 100%; padding: 6%; object-fit: contain; }
.gal__sale { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.gal__count {
	position: absolute; right: var(--gutter); bottom: var(--sp-2); margin: 0;
	color: var(--plate-fg); font-size: var(--t-xs); line-height: var(--lh-xs); font-variant-numeric: tabular-nums; pointer-events: none;
}
.gal__thumbs { display: none; }

/* 4:3, а не квадрат, пока галерея во всю ширину (до 901px): глушники лежат горизонтально, в квадрате полкадра —
   пустая подложка, а название и цена уходят за первый экран (на планшете 820px квадрат занимал весь экран) */
@media (max-width: 900px) {
	.gal__track { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
	/* на телефоне фото во всю ширину экрана — так крупнее */
	.gal__main { margin-inline: calc(-1 * var(--gutter)); }
	.gal__track { border-radius: 0; }
	.gal__sale { left: var(--gutter); }
}
@media (min-width: 641px) {
	.gal__count { display: none; }
	.gal__thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
	.gal__thumb {
		width: calc(var(--sp-8) + var(--sp-2)); height: calc(var(--sp-8) + var(--sp-2)); padding: var(--sp-1);
		border: 0; cursor: pointer;
	}
	.gal__thumb img { width: 100%; height: 100%; object-fit: contain; }
	/* без приглушения неактивных: сквозь полупрозрачную подложку проступал тёмный фон — «грязные» квадраты.
	   Активная — кольцо через тёмный зазор (рамка цвета --fg на светлой подложке не видна) */
	.gal__thumb.is-active { outline: 1px solid var(--fg); outline-offset: 2px; }
	.gal__thumb:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
}

/* ================================================================
   Просмотр фото на весь экран (<dialog>): снимки на белом — фон подложки
   ================================================================ */
html:has(.lb[open]) { overflow: hidden; }
.lb {
	width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
	background: var(--plate); color: var(--plate-fg); overflow: hidden;
}
.lb::backdrop { background: var(--bg-0); }
.lb__track { display: flex; height: 100%; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb__track::-webkit-scrollbar { display: none; }
.lb__track img { flex: 0 0 100%; width: 100%; height: 100%; padding: var(--sp-8) var(--sp-9); object-fit: contain; mix-blend-mode: multiply; scroll-snap-align: center; }
.lb__btn { position: absolute; color: var(--plate-fg); }
.lb__close { top: var(--sp-3); right: var(--sp-3); }
.lb__prev, .lb__next { top: 50%; margin-top: calc(-1 * var(--sp-5)); }
.lb__prev { left: var(--sp-4); }
.lb__next { right: var(--sp-4); }
.lb__count { position: absolute; top: var(--sp-5); left: var(--sp-5); font-size: var(--t-sm); line-height: var(--lh-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
	.lb__track img { padding: var(--sp-8) 0 var(--sp-6); }
	.lb__prev, .lb__next { display: none; } /* листают пальцем */
}

/* ================================================================
   Блок покупки
   ================================================================ */
.pp__cat { display: inline-flex; align-items: center; align-self: flex-start; min-height: calc(var(--sp-6) + var(--sp-3)); margin-top: calc(-1 * var(--sp-3)); color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-sm); text-decoration-color: var(--line-input); }
.pp__buy { display: flex; flex-direction: column; }
.pp__title { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
/* длинные названия (больше 24 знаков) — на ступень меньше, чтобы не занимать три строки */
.pp__title--long { font-size: var(--t-2xl); line-height: var(--lh-2xl); }

/* ключевые характеристики: подпись над значением, сетка 3 колонки — ряды выровнены при любом наборе;
   калибр (самое длинное значение) — на две ячейки: «Калібр + Ефективність», ниже «Вага / Розміри / Матеріал» */
.pp__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); margin-top: var(--sp-5); }
.pp__keys > :first-child { grid-column: span 2; }
.pp__keys > div { min-width: 0; }
.pp__keys dt { color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
.pp__keys dd { color: var(--fg); font-size: var(--t-md); font-weight: 600; line-height: var(--lh-md); font-variant-numeric: tabular-nums; }

.pp__offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pp__price { font-size: var(--t-xl); line-height: var(--lh-xl); }
.pp__from { color: var(--muted); font-size: var(--t-lg); font-weight: 400; } /* «від» тише самой цены */
.pp__stock { font-size: var(--t-sm); line-height: var(--lh-sm); }

/* ---- форма WooCommerce ---- */
.pp__form { margin-top: var(--sp-5); }
.pp__form form.cart { margin: 0; }
.pp__form .variations { width: 100%; margin: 0; border-collapse: collapse; }
.pp__form .variations tbody, .pp__form .variations tr, .pp__form .variations th, .pp__form .variations td { display: block; padding: 0; text-align: left; }
.pp__form .variations tr + tr { margin-top: var(--sp-5); }
.pp__form .variations th { margin-bottom: var(--sp-2); }
/* подпись группы вариантов (th.label WooCommerce; .label из main.css на th не действует) — как метка поля */
.pp__form .variations .label, .pp__form .variations label { color: var(--muted); font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-sm); }
.pp-opts__val { color: var(--fg); font-weight: 500; }
.pp__form .variations select { width: 100%; max-width: calc(var(--sp-9) * 4); }
/* <select> нужен WooCommerce, выбирают кнопками (product.js добавляет класс только при работающем JS) */
.pp__form .variations select.pp-select {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pp-opt { cursor: pointer; }
.pp-opt:disabled { background: transparent; border-color: var(--line); color: var(--dim); text-decoration-line: line-through; cursor: not-allowed; }
/* WooCommerce прячет «Очистити» через visibility — без display: none осталась бы пустая строка */
.pp__form .reset_variations[style*="hidden"] { display: none; }
/* «Очистити» стоит в строке названия последней группы (product.js); зона нажатия 44px за счёт отступов, строку не раздувает */
.pp__form .reset_variations {
	display: inline-block; margin: calc(-1 * var(--sp-3)) 0 calc(-1 * var(--sp-3)) var(--sp-3); padding-block: var(--sp-3);
	color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-sm); text-decoration-line: underline; text-decoration-color: var(--line-input);
}
.pp-hint { margin-top: var(--sp-3); }

.pp__form .single_variation_wrap { margin-top: var(--sp-4); } /* плотнее: кнопка должна помещаться в первый экран ноутбука */
.pp__form .woocommerce-variation-price { display: none; } /* цену варианта показывает блок цены выше */
.pp__form .woocommerce-variation-description { color: var(--fg-2); font-size: var(--t-sm); line-height: var(--lh-sm); }
.pp__form .woocommerce-variation > * + *, .pp__form .woocommerce-variation-availability .stock { margin-bottom: var(--sp-3); }
/* наличие — одной строкой у цены (product.js переносит туда состояние вариации): две строки противоречили друг другу */
.pp__form .woocommerce-variation-availability, .pp__form .variations_form > .stock { display: none; }
.pp__form .woocommerce-variation-description p { margin-bottom: var(--sp-3); }
.pp__form .stock { font-size: var(--t-sm); line-height: var(--lh-sm); }

/* количество + «Додати в кошик» в один ряд */
.pp__form .woocommerce-variation-add-to-cart, .pp__form form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-3); }
.pp__form .quantity { display: flex; }
.pp__form .quantity .qty { width: calc(var(--sp-8) + var(--sp-3)); text-align: center; font-variant-numeric: tabular-nums; }
.pp__form .single_add_to_cart_button { flex: 1 1 200px; }

/* ---- факты: доставка, оплата, гарантия, повернення, телефон (блок «к сведению» — фон --s1) ---- */
.pp__facts { margin-top: var(--sp-6); padding: var(--sp-1) var(--sp-4); background: var(--s1); border-radius: var(--r); font-size: var(--t-sm); line-height: var(--lh-sm); }
.pp__facts > div { display: grid; grid-template-columns: var(--sp-9) minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-3); }
.pp__facts > div + div { border-top: 1px solid var(--line); }
.pp__facts dt { color: var(--muted); }
.pp__facts dd { color: var(--fg-2); }
.pp__more { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--line-input); } /* без nowrap: на 320px «Умови повернення та обміну» была шире колонки и страница ехала вбок */
.pp__phone { color: var(--fg); font-weight: 600; white-space: nowrap; }
/* зона нажатия 44px отступами, строку не раздувает (как у «Очистити»); ссылкам таблицы — ещё зазор по бокам, они стоят через «, » */
.pp__more, .pp__phone, .pp-sec__body .woocommerce-product-attributes a, #reviews .must-log-in a { display: inline-block; padding-block: var(--sp-3); margin-block: calc(-1 * var(--sp-3)); }
.pp-sec__body .woocommerce-product-attributes a { padding-inline: var(--sp-1); margin-inline: calc(-1 * var(--sp-1)); }
@media (min-width: 641px) {
	.pp__facts { padding-inline: var(--sp-5); }
}
/* ноутбук 1366×768 показывает ~650px: плотнее над кнопкой, чтобы она была в первом экране (липкой кнопки на десктопе нет) */
@media (min-width: 901px) {
	.pp__keys { margin-top: var(--sp-3); row-gap: var(--sp-3); }
	.pp__offer { margin-top: var(--sp-3); padding-top: var(--sp-3); }
	.pp__form { margin-top: var(--sp-4); }
	.pp__form .variations tr + tr { margin-top: var(--sp-4); }
	.pp__form .variations th { margin-bottom: var(--sp-1); } /* подпись держится за свои кнопки, группы разделены 16px */
	.pp__form .single_variation_wrap { margin-top: var(--sp-3); }
}
/* с мышью зона 44px у категории не нужна — она лишь отодвигала название */
@media (hover: hover) {
	.pp__cat { min-height: 0; margin-top: 0; }
	.pp__form .reset_variations { margin-block: 0; padding-block: 0; } /* иначе зона «Очистити» заходит на кнопки под подписью */
}

/* ================================================================
   Секции: характеристики, опис, відгуки.
   Телефон — аккордеоны .acc; с 901px раскрыты (product.js), заголовок — обычный h2 без «+ / −»
   ================================================================ */
.pp__info { margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.pp-sec__title h2 { font: inherit; letter-spacing: inherit; }
/* ширина таблицы = ширине текста «Опису» (68ch шрифта .prose), правые края секций совпадают */
.pp-sec--additional_information .pp-sec__body { max-width: 68ch; font-size: var(--t-md); }
/* заголовки внутри описания — на ступень ниже заголовка секции (он здесь h2): SEO-h2 в 26px перекрикивал «Опис» и название.
   h3/h4 — размером текста (полужирные): 17px были мельче абзацев 18px, вопросы FAQ выглядели меньше ответов */
.pp-sec__body.prose h2 { font-size: var(--t-lg); line-height: var(--lh-lg); }
.pp-sec__body.prose h3, .pp-sec__body.prose h4 { font-size: inherit; line-height: inherit; }
/* последняя черта таблицы сливалась с границей следующей секции в двойную */
.pp-sec__body .woocommerce-product-attributes tr:last-child > * { border-bottom: 0; }

@media (min-width: 901px) {
	.pp-sec--additional_information .pp-sec__body { font-size: calc(var(--t-md) + 1px); } /* как .prose с 901px */
	.pp__info { margin-top: var(--sp-8); border-top: 0; }
	.pp-sec { border-bottom: 0; }
	.pp-sec + .pp-sec { margin-top: var(--sp-8); }
	.pp-sec__title { min-height: 0; margin-bottom: var(--sp-5); padding: 0; font-size: var(--t-2xl); line-height: var(--lh-2xl); cursor: default; }
	.acc.pp-sec > .acc__title::after, .acc.pp-sec[open] > .acc__title::after { content: none; } /* перебиваем «+ / −» из main.css */
	.pp-sec__body { padding-bottom: 0; }
}
/* заголовок слева, содержимое справа — как в каталоге производителя; float, а не grid: grid у <details> поддержан не везде */
@media (min-width: 1101px) {
	.pp-sec { display: flow-root; padding-top: var(--sp-6); border-top: 1px solid var(--line); }
	.pp-sec + .pp-sec { margin-top: var(--sp-8); }
	.pp-sec__title { float: left; width: calc(100% / 3 - var(--sp-6)); margin: 0; }
	.pp-sec__body { display: flow-root; margin-left: calc(100% / 3); }
	/* черта секции уже сверху — своя верхняя у таблицы лишняя; первая строка — вровень с заголовком */
	.pp-sec__body .woocommerce-product-attributes { border-top: 0; }
	.pp-sec__body .woocommerce-product-attributes tr:first-child > * { padding-top: 0; }
}

/* ---- відгуки WooCommerce ---- */
#reviews .woocommerce-Reviews-title { display: none; } /* повторяет заголовок секции */
#reviews .woocommerce-noreviews { display: none; } /* «Відгуків немає, поки що» — то же говорит тихий заголовок формы ниже */
#reviews .commentlist { margin: 0 0 var(--sp-6); padding: 0; list-style: none; border-top: 1px solid var(--line); }
#reviews .commentlist li { padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
#reviews .commentlist .avatar { display: none; }
#reviews .meta { color: var(--dim); font-size: var(--t-xs); line-height: var(--lh-xs); }
#reviews .woocommerce-review__author { color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
#reviews .description { margin-top: var(--sp-2); color: var(--fg-2); }
#reviews .star-rating { color: var(--muted); font-size: var(--t-xs); }
#review_form_wrapper { max-width: 68ch; margin-top: var(--sp-5); }
#reply-title { display: block; margin-bottom: var(--sp-4); color: var(--fg); font-size: var(--t-lg); font-weight: 600; font-stretch: var(--narrow); line-height: var(--lh-lg); }
#reply-title small { margin-left: var(--sp-3); font-size: var(--t-sm); font-weight: 400; }
/* гость без отзывов: две тихие строки, а не заголовок-призыв */
#review_form:has(.must-log-in) #reply-title { margin-bottom: var(--sp-2); font-size: var(--t-md); line-height: var(--lh-md); }
#reviews .must-log-in { color: var(--muted); }
#reviews .must-log-in a { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--line-input); }
.comment-form > p { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.comment-form label { color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-sm); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { width: 100%; }
.comment-form .comment-notes { color: var(--muted); font-size: var(--t-sm); }
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.comment-form-rating select { max-width: calc(var(--sp-9) * 2.5); }
/* оценка: WooCommerce превращает <select> в ссылки «1 з 5 зірок» — показываем их цифрами-чипами */
.comment-form-rating .stars { margin: 0; }
.comment-form-rating .stars span { display: flex; gap: var(--sp-2); }
.comment-form-rating .stars a {
	display: inline-flex; align-items: center; justify-content: center; width: calc(var(--sp-6) + var(--sp-3)); height: calc(var(--sp-6) + var(--sp-3));
	background: var(--s1); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--fg); font-size: 0;
}
.comment-form-rating .stars a::before { font-size: var(--t-sm); font-weight: 500; }
.comment-form-rating .stars .star-1::before { content: "1"; }
.comment-form-rating .stars .star-2::before { content: "2"; }
.comment-form-rating .stars .star-3::before { content: "3"; }
.comment-form-rating .stars .star-4::before { content: "4"; }
.comment-form-rating .stars .star-5::before { content: "5"; }
.comment-form-rating .stars a.active { background: var(--s2); border-color: var(--fg); }

/* ================================================================
   Липкая кнопка (телефон): над нижней навигацией, пока настоящая кнопка вне экрана
   ================================================================ */
.buybar { display: none; }
@media (max-width: 900px) {
	.buybar {
		position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 90;
		display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
		padding: var(--sp-3) var(--gutter); background: var(--bg-0); border-top: 1px solid var(--line);
		padding-right: calc(var(--gutter) + var(--sp-7) + var(--sp-3)); /* справа в ряду — кнопка чата (main.css) */
	}
	.buybar[hidden] { display: none; }
	.buybar:not(.is-visible) { opacity: 0; visibility: hidden; transform: translateY(var(--sp-4)); }
	.buybar__price { min-width: 0; font-size: var(--t-lg); line-height: var(--lh-lg); }
	.buybar__price del { display: none; }
	.buybar__btn { flex-shrink: 0; }
}
@media (max-width: 400px) {
	/* с чатом в ряду на 360px «від 14 899 ₴» + «Обрати варіант» не помещались */
	.buybar { gap: var(--sp-3); }
	.buybar__price { font-size: var(--t-md); line-height: var(--lh-md); }
	.buybar__btn { padding-inline: var(--sp-4); }
}


/* ================================================================
   Ховеры и движение
   ================================================================ */
@media (hover: hover) {
	.pp__cat:hover, .pp__more:hover, .pp__phone:hover, #reviews .must-log-in a:hover { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--fg); }
	.pp__form .reset_variations:hover { color: var(--fg); text-decoration-color: var(--fg); }
	.lb__btn:hover { background-color: var(--plate-fg); color: var(--plate); }
	.pp-opt:disabled:hover { border-color: var(--line); color: var(--dim); }
	.comment-form-rating .stars a:hover { border-color: var(--fg); }
}
@media (prefers-reduced-motion: no-preference) {
	.buybar { transition-property: opacity, transform, visibility; transition-duration: var(--dur); transition-timing-function: ease-out; }
}