/* === 01-base.css === */
/* ============================================
Product Page Base — section, title, stock,
hidden elements, options
============================================ */

/* Product Page - Start */
section.product-box {
	padding: 0px 0 70px 0;
	overflow: visible;
}

section.product-box .onsale {
	display: none;
}
/* Product Page - End */

/* Product Base - Start */
section.product-box .product-details h1.product_title {
	font-family: var(--font-family-1);
	font-size: 28px;
	line-height: 34px;
	font-weight: 500; /* CODE 01 (29.07): було 700 — клієнт попросив легше, вернув до базової ваги типографіки h1-h5 (base/02-text.css:18) — ПК і мобільний однаково */
	color: var(--black);
}
section.product-box .product-description.text-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* CODE 01 (29.07): На ПК (≥1280px) h1 візуально перескакується перед .sku-stock-row (order:-1 < 0 за замовчуванням) — див. медіа-блок нижче. На мобільному порядок не чіпається — DOM-порядок як був (sku-stock-row зверху, h1 нижче). */
@media (min-width: 1280px) {
	section.product-box .product-details h1.product_title {
		order: -1;
	}
	/* CODE 01 (31.07, живий пакет, п.1): ціна перенесена в PHP-джерелі перед .variation-group (для мобільного) — на ПК повертаємо її на старе місце (після варіацій, перед buy-group) явними order для всіх топ-рівневих блоків (точки порівняння без неоднозначності на тій). */
	section.product-box .product-details .sku-stock-row {
		order: 0;
	}
	section.product-box .product-details .variation-group {
		order: 1;
	}
	section.product-box .product-details #main-price {
		order: 2;
		font-size: 24px;
		line-height: 32px;
		margin-top: 0;
		font-weight: 500;
	}
	section.product-box .product-details .buy-group {
		order: 3;
	}
	/* CODE 01 (виправлено, task #1257, КРИТИЧНО): ці 3 блоки стояли без власного order — за замовчуванням order:0, точно як sku-stock-row (вище), через що flexbox групував їх в одну очергу з sku-stock-row (тай-брейк по DOM-порядку) — опис/характеристики/акордеон вилізали ПЕРЕД variation-group/price/buy-group на ВСІХ viewport ≥ 1280px. Саме це було регресією — Акордеон не в кінці сторінки. Додаю явний order всім трьом — тепер всі 8 топ-рівневих блоків .product-details мають явний order, конфліктів більше не буде. */
	section.product-box .product-details .product-description {
		order: 4;
	}
	section.product-box .product-details .product-attributes {
		order: 5;
	}
	section.product-box .product-details .product-tabs {
		order: 6;
	}
}

/* CODE 01 (31.07, живий пакет, п.2): розділова лінія між ціною і опціями (тільки мобільний, на ПК цього візуально не просили). */
@media (max-width: 1279px) {
	section.product-box .product-details #main-price {
		padding-bottom: 15px;
		border-bottom: 1px solid var(--gray);
		font-size: 24px;
		line-height: 32px;
		margin-top: 0;
		font-weight: 500;
	}
}

/* CODE 01 (03.08, task #1365, п.5): мобільний відступ від опису до характеристик — такий самий як від кнопки «Вподобати» до опису (там .buy-group margin-bottom:20px + flex-gap 10px = 30px). Тут margin-top:20px + той самий flex-gap 10px = 30px. На ПК відступи вже однакові (gap 20px), не чіпаємо. */
@media (max-width: 1279px) {
	section.product-box .product-details .product-attributes {
		margin-top: 20px;
	}
}

/* CODE 01 (29.07): спільний рядок Артикул+Наявність — замінив колишній position:absolute на stock-status (рішення Александра 29.07 — "убрать абсолют, грамотно і елегантно") */
section.product-box .sku-stock-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

section.product-box .stock-status {
	display: flex;
	align-items: center;
	font-size: 16px;
	line-height: 16px;
	color: var(--black);
}

/* CODE 01 (29.07): НА МОБІЛЬНОМУ порядок міняється на протилежний (Наявність зліва, Артикул справа) — на ПК без змін 8, DOM-порядок як був (Sku першим, Stock другим). */
@media (max-width: 1279px) {
	section.product-box .sku-stock-row .sku {
		order: 2;
	}
	section.product-box .sku-stock-row .stock-status {
		order: 1;
	}
}

/* CODE 01 (виправлено вдруге, task #1257): минулого разу обмежив цей CSS мобільним через підозру на нього як на причину регресії акордеону — реальна причина була інша (order:0 pileup у .product-details, виправлено окремим патчем вище в цьому ж файлі). Позиціонування цього посилання нічого не ламало і не ламає — повернуто спільним для ВСІХ viewport (базове оформлення color/underline — нижче, рядок 246, теж без медіа-запиту). */
section.product-box .variation-group .option-block.pa_size-options {
	position: relative;
	width: 100%;
}
section.product-box .variation-group .option-block.pa_size-options .size-guide-link {
	position: absolute;
	top: 0;
	right: 0;
}

/* CODE 01 (виправлено, task #1257, п.7): порожній кружечок кольору (рівно 1 варіант, клас .single-color-option від price.php) — ховаємо ТІЛЬКИ на мобільному, на ПК/ноут блок залишається як було до task #1257 (DOM тепер завжди рендериться, не видаляється continue). */
@media (max-width: 1279px) {
	section.product-box .variation-group .option-block.single-color-option {
		display: none;
	}
}

/* CODE 01 (31.07, живий пакет, п.4): габаритний gap для .option-block — точно за значенням Александра, але СКОПОВО через section.product-box (не чіпає базовий .option-block gap в 01-product-card.css, той самий клас шариться з мінікарткою каталогу). */
@media (max-width: 1680px) {
	section.product-box .variation-group .option-block {
		gap: 10px 4px;
	}
}

/* CODE 01 (26.07, п.12, рішення №65): зелений кружок статусу «в наявності» — точковий hardcode-виняток з монохрому, текст лишається звичайним. Спільна функція op_get_product_stock_status() — покриває і сторінку товару, і мінікартку (де стан прихований display:none). */
section.product-box .stock-status .stock-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: #2ecc71;
	flex-shrink: 0;
}

section.product-box .stock-status.out-of-stock {
	color: var(--red);
}

section.product-box .stock-status.on-backorder,
section.product-box .stock-status.no-status {
	color: var(--dark-gray);
}

section.product-box .woocommerce-product-rating,
section.product-box .product-details form.cart,
section.product-box .product-details .quantity,
section.product-box .product-details .compare-btn,
section.product-box .product-details .wishlist-btn,
section.product-box .product-details .product_meta,
section.product-box .product-details .woocommerce-product-details__short-description {
	display: none;
}
@media (max-width: 1680px) {
	section.product-box .product-details h1.product_title {
		font-size: 26px;
		line-height: 32px;
	}
}

@media (max-width: 1279px) {
	section.product-box {
		padding: 0px 0 20px 0;
	}
	section.product-box .product-details h1.product_title {
		font-size: 24px;
		line-height: 28px;
	}

	section.product-box .stock-status {
		font-size: 14px;
		line-height: 14px;
	}
}

@media (max-width: 768px) {
	section.product-box .col-50 {
		position: relative;
		width: calc(100% - 0px);
	}
	/* CODE 01 (29.07): stock-status більше не position:absolute взагалі (групується з sku в .sku-stock-row, рядок 34-48) — цей медіа-блок лишився тільки заради .col-50 position:relative. */
}
/* Product Base - End */

/* Product Options - Start */
section.product-box .variation-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--blocks-indent);
	margin-top: 30px;
}

/* CODE 01: вибір кольору прибрано з UI сторінки товару (рішення клієнта 21.07) — той самий патерн, що й у картці каталогу (01-product-card.css). Розмір лишається видимим, дефолтна/перша варіація додається автоматично (JS не чіпали). */
section.product-box .variation-group .option-block.pa_color-options {
	display: none !important;
}

/* CODE 01 (28.07, chvist): Александр прямо попросив збільшити кнопки-опції (розмір/колір) НА СТОРІНЦІ ТОВАРУ — тільки ПК (>1680px) і ноутбук (1280-1680px), мобільний НЕ чіпаємо. Мінікартка/каталог (01-product-card.css, база .option-block span.option-value height:30px/24px) НЕ займали — окремий селектор через .variation-group, той самий прийом що і в попередніх раундах. */
section.product-box .variation-group .option-block span.option-value {
	height: 46px;
	min-width: 46px;
	padding: 0px 14px;
	font-size: 15px;
	line-height: 15px;
}
section.product-box .variation-group .color-option {
	width: 46px;
	height: 46px;
}
section.product-box .variation-group .color-option .color-name {
	top: 54px;
}

/* CODE 01 (28.07, chvist): мобільний діапазон ≤1279px — точні значення від Олександра. Раніше тут був @media(max-width:1680px) БЕЗ нижньої межі — він перетинався з блоком нижче (1280-1680) в тому ж діапазоні — дві декларації heightна одну властивість боролися за порядком в файлі (те, що Олександр побачив як «дублюючу властивість» в DevTools на 1680px). Звузив межу до 1279 — тепер 3 діапазони (≤1279 / 1280-1680 / >1680) ВЗАЄМНО ВИКЛЮЧНІ, жодного перетину немає. min-width тепер власне число (40px, як у Олександра) — трюк зі скиданням min-width:0 більше не потрібен — ця терія вже не ділить місце з іншим діапазоном. */
@media (max-width: 1279px) {
	section.product-box .variation-group .option-block span.option-value {
		height: 40px;
		min-width: 40px;
		padding: 0px 11px;
		font-size: 15px;
		line-height: 15px;
	}
	section.product-box .variation-group .color-option {
		width: 40px;
		height: 40px;
	}
	section.product-box .variation-group .color-option .color-name {
		top: 44px;
	}
}

/* CODE 01 (28.07, chvist): "ноутбук" 1280-1680 — без змін, лише тепер чітко не перетинається з блоком вище (його верхня межа 1279, цього нижня 1280). */
@media (min-width: 1280px) and (max-width: 1680px) {
	section.product-box .variation-group .option-block span.option-value {
		height: 46px;
		min-width: 46px;
		padding: 0px 14px;
		font-size: 15px;
		line-height: 15px;
	}
	section.product-box .variation-group .color-option {
		width: 46px;
		height: 46px;
	}
	section.product-box .variation-group .color-option .color-name {
		top: 50px;
	}
}
/* CODE 01 (26.07, п.13): посилання «Розмірна сітка» під блоком розмірів. Без власного margin-top — відступ від variation-group дає системний [class*="col-"] gap (--blocks-indent), свій margin подвоїв би відступ (грабля checkout-gap 23.07). */
section.product-box .size-guide-link {
	display: inline-block;
	font-size: 14px;
	color: var(--dark-gray);
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.3s ease;
}
section.product-box .size-guide-link:hover {
	color: var(--black);
}
/* Product Options - End */

/* Size Guide Lightbox таблиця (переробка #1257, 28.07) - Start */
.size-guide-content .size-guide-title {
	margin-bottom: 8px;
}
.size-guide-content .size-guide-desc {
	margin-bottom: 16px;
	color: var(--dark-gray);
}
.size-guide-content .size-guide-image {
	margin-bottom: 20px;
}
.size-guide-content .size-guide-image img {
	width: 100%;
	height: auto;
}
.size-guide-content .size-guide-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.size-guide-content .size-guide-table {
	width: 100%;
	border-collapse: collapse;
}
.size-guide-content .size-guide-table th,
.size-guide-content .size-guide-table td {
	text-align: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.size-guide-content .size-guide-table th {
	font-family: var(--font-family-2);
	font-weight: 600;
	background: var(--light-gray);
}
/* CODE 01 (03.08, task #1365, п.4): кілька сіток в одному попапі (Шорти/Штани/Джинси — 28-42 + Xs-3XL) — одна під одною з розділювачем. */
.size-guide-content .size-guide-chart + .size-guide-chart {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
/* Size Guide Lightbox таблиця - End */

/* === 02-gallery.css === */
/* ============================================
Product Gallery — слайдер, тумби, відео
============================================ */

/* CODE 01 (виправлено вдруге, task #1257): лічильник фото білим кольором у правому нижньому куті поверх головного фото. Був обмежений мобільним з перестрахи перед регресією порядку (task #1257) — але цей елемент живе всередині .product-gallery, сусіднього .product-details блока — через нього регресія ніяк не могла статися. Повернуто спільним для ВСІХ viewport — і оформлення, і позиціонування. */
section.product-box .product-gallery .gallery-top .gallery-counter {
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 5;
	display: flex;
	gap: 2px;
	color: var(--white);
	font-family: var(--font-family-1);
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Product Gallery - Start */
/* CODE 01 (26.07, п.11): стрілки навігації галереї — напівпрозорі, не суцільний чорний блок (клієнт) */
section.product-box .product-gallery .swiper-buttons.inside > * {
	background: rgba(0, 0, 0, 0.35);
}
section.product-box .product-gallery .swiper-buttons.inside > *:hover {
	background: rgba(0, 0, 0, 0.6);
}

section.product-box .product-gallery {
	position: sticky;
	top: calc(var(--header-height) + 30px);
	display: flex;
	gap: 15px;
	padding-right: 30px;
}

section.product-box .swiper-wrapper {
	height: fit-content !important;
}

section.product-box .gallery-top {
	width: calc(100% - 120px);
	height: fit-content;
}

section.product-box .gallery-top .swiper-slide img {
	width: 100%;
	height: calc(100dvh - var(--header-height) - 30px - 30px);
	max-height: 700px;
	object-fit: cover;
	border-radius: var(--radius-small);
	cursor: zoom-in;
	transition: all 0.3s ease;
}

section.product-box .gallery-thumbs {
	width: calc(100px + 3px);
	height: fit-content;
	max-height: calc(100vh - var(--header-height) - 30px - 30px - 30px);
	overflow: auto !important;
	padding-right: 3px !important;
}

@media (pointer: fine) {
	section.product-box .gallery-thumbs::-webkit-scrollbar {
		width: 3px;
	}
}

section.product-box .gallery-thumbs .swiper-slide {
	height: fit-content !important;
	margin-bottom: 10px !important;
}

section.product-box .gallery-thumbs .swiper-slide img {
	width: 100%;
	height: auto;
	border-radius: 3px;
	cursor: pointer;
}

@media (min-width: 1280px) {
	section.product-box .gallery-thumbs .swiper-wrapper {
		transform: translate3d(0px, 0px, 0px) !important;
	}
}

@media (min-width: 769px) and (max-width: 1279px) {
	section.product-box .gallery-thumbs .swiper-wrapper {
		overflow-y: auto !important;
	}
}

@media (max-width: 768px) {
	section.product-box .gallery-top .swiper-slide img {
        height: auto;
        aspect-ratio: 9 / 12;
	}

	section.product-box .product-gallery {
		position: relative;
		top: 0;
		display: flex;
		gap: 10px;
		padding-right: 0;
		flex-direction: column-reverse;
	}

	section.product-box .gallery-thumbs {
		width: 100%;
		height: auto;
	}

	section.product-box .gallery-top {
		width: 100%;
		height: auto;
	}
}
/* Product Gallery - End */

/* Product Gallery Video - Start */
.product-box .gallery-thumbs .video-slide-thumb {
	position: relative;
}
.product-box .gallery-thumbs .video-thumb-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 24px;
	background: rgba(255, 0, 0, 0.9);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
}
.product-box .gallery-thumbs .video-thumb-icon::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
	margin-left: 2px;
}
.product-box .gallery-top .video-slide-main {
	position: relative;
	overflow: hidden;
}
.product-box .gallery-top .video-facade {
	position: relative;
	width: 100%;
	height: calc(100dvh - var(--header-height) - 30px - 30px);
	max-height: calc(100vh - var(--header-height) - 30px - 30px);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-box .gallery-top .video-preview-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: var(--radius-small);
	transition: all 0.3s ease;
}
.product-box .gallery-top .video-facade:hover .video-preview-image {
	transform: scale(1.02);
}
.product-box .gallery-top .video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	transition: all 0.3s ease;
	opacity: 0.9;
}
.product-box .gallery-top .video-facade:hover .video-play-button {
	transform: translate(-50%, -50%) scale(1.1);
	opacity: 1;
}
.product-box .gallery-top .video-play-button svg {
	width: 68px;
	height: 48px;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}
.product-box .gallery-top .video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	border-radius: var(--radius-small);
	overflow: hidden;
	background: #000;
	z-index: 5;
}
.product-box .gallery-top .gallery-video-iframe,
.product-box .gallery-top .gallery-video-mp4 {
	width: 100%;
	height: 100%;
	border: none;
	object-fit: contain;
}
.product-box .gallery-top .video-slide-main.video-playing .video-facade {
	visibility: hidden;
}
.product-box .gallery-top .video-slide-main.video-playing .video-container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-box .gallery-top .video-slide-main img {
	cursor: pointer;
}
@media (max-width: 1279px) {
	.product-box .gallery-top .video-preview-image {
		height: calc(100vw - var(--container-indent));
	}
	.product-box .gallery-top .video-play-button svg {
		width: 50px;
		height: 36px;
	}
	.product-box .gallery-thumbs .video-thumb-icon {
		width: 28px;
		height: 20px;
	}
	.product-box .gallery-thumbs .video-thumb-icon::after {
		border-width: 4px 0 4px 6px;
	}
}
/* Product Gallery Video - End */

/* === 03-price-zone.css === */
/* ============================================
Price Zone — ціна, кнопки купити,
compare/wishlist, scroll-price (mob)
============================================ */

/* CODE 01 (28.07, fix-loop п.В): було col-left/col-right (26.07→#500) → 2 рядки (#520) → тепер ОДИН рядок на ПК за ціною (лічильник+Кошик зрощені, Вподобати поруч), на мобільному колонка як було. */
/* Buy Group - Start */
section.product-box .buy-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

section.product-box .buy-group .price {
	position: relative;
	display: flex;
	width: fit-content;
	font-family: var(--font-family-1);
	font-size: 25px;
	line-height: 35px;
	font-weight: 500;
	color: var(--black);
}

section.product-box .buy-group .price ins {
	text-decoration: none;
}

section.product-box .buy-group .price del {
	display: flex;
	align-items: center;
	color: var(--dark-gray);
	font-size: 20px;
	line-height: 31px;
	font-weight: 600;
	text-decoration-line: line-through;
	margin-right: 10px;
}

section.product-box .buy-group .price .per-product {
	margin-left: 5px;
}

section.product-box .buy-group .buy-actions {
	gap: 15px;
}

section.product-box .buy-group .buy-actions .custom-quantity-input {
	flex-shrink: 0;
}

/* Кнопка «В кошик» — головна дія, бере більшу частину рядка */
section.product-box .buy-group .buy-actions .buy-cart-btn {
	flex: 1;
	height: var(--btn-height);
}

/* Кнопка «Вподобати» — другорядна, компактна (власна ширина від padding, не розтягується) */
section.product-box .buy-group .buy-actions .wishlist-box {
	display: flex;
	flex-shrink: 0;
}

section.product-box .buy-group .buy-actions .wishlist-box .btn {
	height: var(--btn-height);
	white-space: nowrap;
}

/* CODE 01 (30.07, ЖИВИЙ БАГ): було img+img без обгортки — при position:absolute друга іконка випадала з flex-потоку кнопки цілком і центрувалась відносно всієї кнопки (без явних inset, static position серед перерахованих елементів) — накладалась на текст «Вподобати». Фікс: обидві img тепер у окремому span.wishlist-icon (position:relative, розмір по першій іконці у потоці) — друга іконка inset:0 лягає точно на першу, без впливу на решту кнопки. */
section.product-box .buy-group .buy-actions .wishlist-box .btn .wishlist-icon {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

section.product-box .buy-group .buy-actions .wishlist-box .btn .wishlist-icon img + img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: all 0.3s ease;
}

/* CODE 01 (30.07, живий баг): .btn-border:hover/.active (base/03-buttons.css) міняє фон кнопки на чорний (var(--primary)) — для варіантів .primary/.red там же є своя інверсія кольору іконки на цей стан, а для звичайного .btn-border (наш випадок) — нема. Чорна іконка на чорному фоні = не видно. На тач-пристроях :hover може залипати після тапу (нема справжнього ховера) — саме це й підозрював Александр. Точковий фікс тільки для цієї кнопки: на hover/active іконка інвертується у білий, як і має бути на темному фоні. */
section.product-box .buy-group .buy-actions .wishlist-box .btn:is(:hover, .active) img {
	filter: brightness(0) invert(1);
}

/* Активний стан вподобай-кнопки */
/* CODE 01 (30.07, ЖИВИЙ БАГ): було :first-child/:last-child — в кнопці 3 дитини (img,img,<span>Вподобати</span>), останній child — SPAN, не img. :last-child ніколи не матчився на другий img. Замінив на :first-of-type/:last-of-type. ДАЛІ (30.07, ЩЕ ОДИН ЖИВИЙ БАГ): після обгортки img в span.wishlist-icon (вище, фікс накладання на текст) — базове `.wishlist-icon img+img{opacity:0}` стало специфічнішим (0,0,6,3) за це правило стану (було (0,0,6,2)) — іконка знову перестала показуватись у стані "вподобано". Додав `.wishlist-icon` у селектор стану — підняв його специфічність вище базового правила. */
section.product-box .buy-group .buy-actions .add-to-wishlist-btn.in-wishlist-already .wishlist-icon img:first-of-type {
	opacity: 0;
}

section.product-box .buy-group .buy-actions .add-to-wishlist-btn.in-wishlist-already .wishlist-icon img:last-of-type {
	opacity: 1;
}

section.product-box .btn-cart.in-cart:not(.go-variation-in-cart) {
	pointer-events: none !important;
}

section.product-box p.stock {
	display: none;
}

/* CODE 01 (28.07): мобілка — колонка як було (Александр прямо просив): лічильник (якщо видимий) зверху, далі Вподобати, далі В кошик — всі на повну ширину. Плюс збільшений відступ від тексту опису під кнопками — понад системний --blocks-indent батьківського gap, свідомо навмисне (це не грабля checkout-gap 23.07 — це освідомлена додаткова відстань понад базовим ритмом, на пряме прохання Александра). */
@media (max-width: 1279px) {
	section.product-box .buy-group {
		margin-bottom: 20px;
	}

	section.product-box .buy-group .buy-actions {
		flex-direction: column;
		/* CODE 01 (task #1257): flex-direction:column тут вже був (вище, 28.07) — додано лише margin-top за прямим проханням менеджера. */
		margin-top: 20px;
	}

	section.product-box .buy-group .buy-actions .custom-quantity-input {
		width: 100%;
		order: 1;
	}

	section.product-box .buy-group .buy-actions .wishlist-box {
		width: 100%;
		order: 3; /* CODE 01 (29.07): було 2 (вподобати зверху) — клієнт хоче кошик першим, вподобати під ним */
	}

	section.product-box .buy-group .buy-actions .wishlist-box .btn {
		width: 100%;
	}

	section.product-box .buy-group .buy-actions .buy-cart-btn {
		/* CODE 01 (28.07, живий баг): базове flex:1 (fix-loop #525, для ШИРИНИ в desktop row) в column-напрямку цього ж медіа-блоку діє по ВИСОТІ — flex-basis:0% з базового flex:1 стискав кнопку до мінімуму контенту (14px, висота рядка тексту) — авто-висотній .buy-actions не давав вільного місця рости. Скидаємо flex на блоковий режим — розмір тепер задає width:100%+height (як у .wishlist-box, у якого flex:1 ніколи не було 100. */
		flex: 0 0 auto;
		width: 100%;
		order: 2; /* CODE 01 (29.07): було 3 — клієнт хоче кошик першим (після лічильника, якщо відображається), вподобати під ним */
	}
	/* CODE 01 (30.07, ЖИВИЙ БАГ): тут було `.wishlist-box .btn img{display:none}` — іконка вподобай-кнопки була прихована НАЗАВЖДИ на мобільному (без коментаря, без відношення до будь-якого мого минулого раунду — саме це була головна причина чому іконку взагалі не було видно), прибрано. */
}
/* Buy Group - End */

/* Scroll Price - Start */
section.product-box .mob.scroll-price {
	position: fixed;
	bottom: 0;
	left: 0;
	background: var(--white);
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 20px;
	align-items: center;
	box-shadow: 0px 0px 24px 0px #8e8e8e33;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease-in-out;
	z-index: 99999;
}

section.product-box .mob.scroll-price.active {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
}

section.product-box .mob.scroll-price .price {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 3px;
}

section.product-box .mob.scroll-price .btn {
	min-width: 50%;
}

@media (max-width: 1279px) {
	body.product-template-default #scrollToTopBtn,
	body.single #scrollToTopBtn,
	body.single-product #scrollToTopBtn {
		display: none !important;
	}
}
/* Scroll Price - End */

/* === 04-tabs.css === */
/* ============================================
Product Tabs — акордеон, classic, responsive,
контент табів, атрибути
============================================ */

/* ===== Product Tabs Universal - Start ===== */

/* Основной контейнер табов */
section.product-box .product-tabs {
	margin-top: 35px;
}

/* Навигация табов (скрыта по умолчанию, видима в classic/responsive) */
section.product-box .product-tabs .tabs-navigation {
	display: none;
}

section.product-box .product-tabs .tabs-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/*
* .tab-content-wrapper — управляет видимостью (slideToggle / display)
* .tab-content — всегда flex, используй для стилизации контента
*/
section.product-box .product-tabs .tab-content-wrapper {
	display: none;
}

section.product-box .product-tabs .tab-content {
	display: flex;
	flex-direction: column;
	gap: var(--blocks-indent);
}

/* ===== РЕЖИМ АККОРДЕОН ===== */

section.product-box .product-tabs.tabs-mode-accordion .tab {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 17px 0;
	border-bottom: 1px solid var(--gray);
	cursor: pointer;
	transition: all 0.3s ease;
}

section.product-box .product-tabs.tabs-mode-accordion .tabs-content .tab:first-child {
	border-top: 1px solid var(--gray);
}

/* Заголовок */
section.product-box .product-tabs.tabs-mode-accordion .tab .tab-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	line-height: 16px;
	height: 16px;
	font-weight: 600;
	color: var(--black);
}

/* Стрелка */
section.product-box .product-tabs.tabs-mode-accordion .tab .tab-title::after {
	content: "";
	display: flex;
	width: 18px;
	height: 18px;
	background: url(/wp-content/themes/shop/img/icons/arrow-right.svg) no-repeat center center;
	background-size: contain;
	transform: rotate(90deg);
	transition: all 0.3s ease;
}

section.product-box .product-tabs.tabs-mode-accordion .tab.active .tab-title::after {
	transform: rotate(-90deg);
}

/* Wrapper в аккордеоне — управляется через slideToggle в JS */
section.product-box .product-tabs.tabs-mode-accordion .tab .tab-content-wrapper {
	padding-top: 20px;
}

/* ===== РЕЖИМ КЛАССИЧЕСКИХ ТАБОВ ===== */

/* Навигация */
section.product-box .product-tabs.tabs-mode-classic .tabs-navigation {
	display: flex;
	gap: 30px;
	border-bottom: 2px solid var(--gray);
	margin-bottom: 30px;
}

section.product-box .product-tabs.tabs-mode-classic .tab-nav-item {
	position: relative;
	padding: 15px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--gray);
	cursor: pointer;
	transition: all 0.3s ease;
}

section.product-box .product-tabs.tabs-mode-classic .tab-nav-item:hover {
	color: var(--black);
}

section.product-box .product-tabs.tabs-mode-classic .tab-nav-item.active {
	color: var(--primary);
}

section.product-box .product-tabs.tabs-mode-classic .tab-nav-item.active::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
}

/* Таб в classic */
section.product-box .product-tabs.tabs-mode-classic .tab {
	border: none;
	padding: 0;
	cursor: default;
}

section.product-box .product-tabs.tabs-mode-classic .tab .tab-title {
	display: none;
}

/* Wrapper в classic — видимость через CSS */
section.product-box .product-tabs.tabs-mode-classic .tab .tab-content-wrapper {
	display: none;
}

section.product-box .product-tabs.tabs-mode-classic .tab.active .tab-content-wrapper {
	display: block;
}

/* ===== РЕЖИМ RESPONSIVE (табы на ПК, аккордеон на мобильном) ===== */

/* ПК: как classic */
section.product-box .product-tabs.tabs-mode-responsive .tabs-navigation {
	display: flex;
	gap: 30px;
	border-bottom: 2px solid var(--gray);
	margin-bottom: 30px;
	list-style: none;
}

section.product-box .product-tabs.tabs-mode-responsive .tab-nav-item {
	position: relative;
	padding: 15px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--gray);
	cursor: pointer;
	transition: all 0.3s ease;
}

section.product-box .product-tabs.tabs-mode-responsive .tab-nav-item:hover {
	color: var(--black);
}

section.product-box .product-tabs.tabs-mode-responsive .tab-nav-item.active {
	color: var(--primary);
}

section.product-box .product-tabs.tabs-mode-responsive .tab-nav-item.active::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
}

section.product-box .product-tabs.tabs-mode-responsive .tab {
	border: none;
	padding: 0;
	cursor: default;
}

section.product-box .product-tabs.tabs-mode-responsive .tab .tab-title {
	display: none;
}

section.product-box .product-tabs.tabs-mode-responsive .tab .tab-content-wrapper {
	display: none;
}

section.product-box .product-tabs.tabs-mode-responsive .tab.active .tab-content-wrapper {
	display: block;
}

/* ===== СТИЛИ КОНТЕНТА ТАБОВ ===== */

/* Таблицы */
section.product-box .product-tabs .tab-content table {
	display: flex;
	width: 100%;
}

/* Описание товара */
section.product-box #tab-description * {
	margin: 0;
	padding: 0;
}

section.product-box #tab-description h2,
section.product-box #tab-description h3 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	color: var(--black);
}

/* Доставка, оплата, обмін, повернення (CODE 01 26.07, п.18-19: окремі вкладки акордеону; 04.08, #1415: додано .exchange-box) */
.delivery-box,
.payment-box,
.exchange-box,
.return-box {
	display: flex;
	flex-direction: column;
	gap: var(--blocks-indent);
	padding: 20px;
	background: var(--light-gray);
	border-radius: var(--radius-medium);
}

/* Таблица атрибутов */
/* CODE 01 (28.07, fix-loop п.Б): блок винесено з табів окремим завжди-видимим блоком у #520 — стара ширина table бралась від `.tab-content table{display:flex;width:100%}`,
цього правила більше немає (поза .product-tabs) — таблиця колапсалась до width:auto, рядок всередині (50% від вузького батька) виходив вузькою колонкою з переносом кожного значення. Також 50%-розкладка мала сенс тільки при багатьох атрибутах — у цьому каталозі залишився тільки Розмір (колір прибрано з варіацій 23.07) — переходимо на повноширині рядки, як вже було на мобільному. */
section.product-box .product-attributes .woocommerce-product-attributes {
	display: flex;
	width: 100%;
}

section.product-box .woocommerce-product-attributes tbody {
	display: flex;
	flex-wrap: wrap;
	gap: var(--blocks-indent);
	width: 100%;
}

section.product-box .woocommerce-product-attributes tbody tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 10px 15px;
	background: var(--light-gray);
	border-radius: var(--radius-small);
}

section.product-box .woocommerce-product-attributes tbody tr:nth-child(even) {
	background: var(--white);
}

section.product-box .woocommerce-product-attributes tbody tr th {
	color: var(--black);
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	min-width: fit-content;
}

section.product-box .woocommerce-product-attributes tbody tr td p {
	font-size: 14px;
	line-height: 21px;
	color: var(--black);
	text-align: right;
}

/* ===== АДАПТИВНОСТЬ ===== */

@media (max-width: 1279px) {
	/* Аккордеон */
	section.product-box .product-tabs.tabs-mode-accordion .tab {
		padding: 15px 0;
	}

	section.product-box .product-tabs.tabs-mode-accordion .tab .tab-title {
		font-size: 14px;
		line-height: 14px;
		height: 14px;
	}

	/* Classic */
	section.product-box .product-tabs.tabs-mode-classic .tabs-navigation {
		gap: 15px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: 100%;
	}

	section.product-box .product-tabs.tabs-mode-classic .tabs-navigation::-webkit-scrollbar {
		display: none;
	}

	section.product-box .product-tabs.tabs-mode-classic .tab-nav-item {
		white-space: nowrap;
		font-size: 14px;
		padding: 12px 0;
	}

	/* Responsive: переключаем на аккордеон */
	section.product-box .product-tabs.tabs-mode-responsive .tabs-navigation {
		display: none;
	}

	section.product-box .product-tabs.tabs-mode-responsive .tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		padding: 15px 0;
		border-bottom: 1px solid var(--gray);
		cursor: pointer;
	}

	section.product-box .product-tabs.tabs-mode-responsive .tabs-content .tab:first-child {
		border-top: 1px solid var(--gray);
	}

	section.product-box .product-tabs.tabs-mode-responsive .tab .tab-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		line-height: 14px;
		height: 14px;
		font-weight: 600;
		color: var(--black);
	}

	section.product-box .product-tabs.tabs-mode-responsive .tab .tab-title::after {
		content: "";
		display: flex;
		width: 18px;
		height: 18px;
		background: url(/wp-content/themes/shop/img/icons/arrow-right.svg) no-repeat center center;
		background-size: contain;
		transform: rotate(90deg);
		transition: all 0.3s ease;
	}

	section.product-box .product-tabs.tabs-mode-responsive .tab.active .tab-title::after {
		transform: rotate(-90deg);
	}

	/* Wrapper в responsive-аккордеон — управляется slideToggle */
	section.product-box .product-tabs.tabs-mode-responsive .tab .tab-content-wrapper {
		display: none;
		padding-top: 20px;
	}

	section.product-box .product-tabs.tabs-mode-responsive .tab.active .tab-content-wrapper {
		display: none;
	}

	/* CODE 01 (28.07): базове правило вище вже дає width:100% + nth-child(even) однаково на всіх ширинах — окремий мобільний оверрайд більше не потрібен */
}

/* ===== Product Tabs Universal - End ===== */

/* === 05-reviews.css === */
/* ============================================
   Product Reviews Tab — відгуки на сторінці товару
   ============================================ */

/* Product Reviews Tab - Start */
.reviews-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0px;
}
.reviews-count {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	background: var(--primary);
	border-radius: 100%;
	color: var(--primary-match);
	font-size: 12px;
	line-height: 16px;
	margin-left: 10px;
	margin-right: auto;
}

section.product-box #reviews.woocommerce-Reviews {
	width: 100%;
}


section.product-box #tab-reviews .reviews-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

section.product-box #tab-reviews .reviews-slider {
	width: 100%;
	margin-bottom: 30px;
}

section.product-box #tab-reviews .reviews-slider .swiper-slide {
	height: auto;
}

section.product-box #tab-reviews .swiper-buttons {
	display: flex;
	gap: 10px;
	margin-top: 30px;
}


section.product-box .woocommerce-noreviews {
	text-align: center;
	color: var(--gray);
	padding: 40px 0;
	font-size: 16px;
}
.reviews-footer {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

@media (max-width: 1279px) {
	section.product-box #tab-reviews .reviews-header {
		justify-content: center;
		margin-bottom: 20px;
	}

	section.product-box .woocommerce-noreviews {
		padding: 30px 0;
		font-size: 14px;
	}
}
/* Product Reviews Tab - End */

/* === 06-bottom.css === */
/* ============================================
   Bottom Sections — аналогічні, дивіться також,
   нещодавно переглянуті
   ============================================ */

/* ===== Аналогічні пропозиції - Start ===== */
section.similar-products {
	padding-top: 80px;
}
section.similar-products .container-similar {
	gap: 30px;
}
section.similar-products .container-similar > .btn {
	margin: 0 auto;
}
@media (max-width: 1279px) {
	section.similar-products {
		padding-top: 40px;
	}
	section.similar-products .container-similar .h2 {
		margin-bottom: 20px;
	}
}
/* ===== Аналогічні пропозиції - End ===== */

/* ===== Дивіться також - Start ===== */
section.also-view-products {
	padding-top: 80px;
}
section.also-view-products .container-also-view {
	gap: 30px;
}
section.also-view-products .container-also-view > .btn {
	margin: 0 auto;
}
@media (max-width: 1279px) {
	section.also-view-products {
		padding-top: 40px;
	}
	section.also-view-products .container-also-view .h2 {
		margin-bottom: 20px;
	}
}
/* ===== Дивіться також - End ===== */

/* ===== Ви переглядали - Start ===== */
section.recently-viewed-products {
	padding-top: 80px;
	padding-bottom: 80px;
}
section.recently-viewed-products .container-recently-viewed {
	gap: 30px;
}
section.recently-viewed-products .container-recently-viewed > .btn {
	margin: 0 auto;
}
@media (max-width: 1279px) {
	section.recently-viewed-products {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	section.recently-viewed-products .container-recently-viewed .h2 {
		margin-bottom: 20px;
	}
}
/* ===== Ви переглядали - End ===== */