/**
 * ELBIN Redesign 2 — Single Product Page
 *
 * Підключається тільки на is_product().
 * Breadcrumb стилі — з archive-category.css (спільні класи).
 */

/* Blocksy hero (з .ct-breadcrumbs/.hero-section) вимкнено НАТИВНО у single.php
   (фільтр blocksy:hero:custom-source → false для is_product), тому тут його вже
   не ховаємо. Лишається тільки страховка на дефолтні WC breadcrumbs/заголовок. */
.single-product nav.woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb,
.single-product .woocommerce-products-header {
	display: none !important;
}

.single-product .woocommerce-notices-wrapper:empty {
	display: none !important;
}

/* Дефолтні WC .entry-summary/.woocommerce-product-gallery тут НЕ ховаємо:
   оверрайд woocommerce/content-single-product.php не викликає
   do_action('woocommerce_single_product_summary') і не друкує div.product —
   цих вузлів у DOM нема взагалі (верифіковано live 07.07, аудит-MAJOR №7
   виявився false positive: правило-ховалка і ввела аудитора в оману). */

/* Ховаємо WC дефолтний stock текст (маємо свій в infocol) */
.single-product p.stock {
	display: none !important;
}

/* Ховаємо Blocksy wishlist кнопку archive-версії (маємо свою в infocol) */
.single-product .ct-wishlist-button-archive {
	display: none !important;
}

/* ─── Загальна обгортка ──────────────────────────────────────────────────── */

.elbin-r2-single,
.elbin-r2-single * {
	font-family: var(--elbin-r2-font-ui);
	box-sizing: border-box;
}

/* ─── Хлібні крихти — стандартний вигляд (рішення Данила 12.06.2026) ─────────
   Бірюзову стрічку з макета 03 прибрано: крихти мають виглядати однаково
   на всіх сторінках. Стилі — спільні з archive-category.css.
   Лише прибираємо нижню межу самої смуги (як на /shop/), щоб не було
   подвійної лінії: крихти вже мають власний border-bottom. */

.single-product .elbin-r2-cat-hero.no-desc {
	border-bottom: none;
	padding-bottom: 0;
}

/* ─── Hero section ───────────────────────────────────────────────────────── */

.elbin-r2-single-hero {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 24px 30px 64px;
	/* Блокуємо горизонтальний overflow на рівні hero. САМЕ clip, не hidden:
	   hidden робить hero scroll-контейнером і вбиває position:sticky
	   інфоколонки (Б1). hidden лишаємо першим як фолбек старих браузерів. */
	overflow-x: hidden;
	overflow-x: clip;
}

/* ─── Grid: 11fr / 9fr ───────────────────────────────────────────────────── */
/* align-items: stretch (default) — infocol розтягується до висоти gallery,   */
/* що дозволяє position:sticky без початкового offset (Chrome bug з align:start) */

.elbin-r2-single-grid {
	display: grid;
	grid-template-columns: 11fr 9fr;
	gap: 48px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY — thumbs-col ліворуч, main image праворуч
   ═══════════════════════════════════════════════════════════════════════════ */

.elbin-r2-single-gallery {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-self: start;
}

/* Колонка мініатюр зліва */
.elbin-r2-single-gallery__thumbs-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 72px;
	flex-shrink: 0;
	overflow-y: auto;
	max-height: 480px;
	scrollbar-width: none;
}
.elbin-r2-single-gallery__thumbs-col::-webkit-scrollbar {
	display: none;
}

/* Головне зображення */
.elbin-r2-single-gallery__main-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	aspect-ratio: 1;
	max-height: calc(100vh - 200px); /* не виходить за екран: 200px = хедер + крихти + відступи */
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-card);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.elbin-r2-single-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 20px;
	display: block;
	transition: opacity var(--elbin-r2-transition-fast);
}

.elbin-r2-single-gallery__img.is-loading {
	opacity: 0.4;
}

.elbin-r2-single-gallery__badges {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	gap: 6px;
	z-index: 1;
}

.elbin-r2-single-gallery__zoom {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-control);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--elbin-r2-text);
	transition: border-color var(--elbin-r2-transition-fast),
				box-shadow var(--elbin-r2-transition-fast);
	z-index: 1;
}

.elbin-r2-single-gallery__zoom:hover {
	border-color: var(--elbin-r2-accent);
	box-shadow: 0 0 0 3px var(--elbin-r2-accent-50);
}

/* Стрілки навігації */
.elbin-r2-single-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: rgba(14, 18, 20, 0.72);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	z-index: 2;
	transition: background var(--elbin-r2-transition-fast);
}
.elbin-r2-single-gallery__arrow:hover {
	background: var(--elbin-r2-accent);
	color: var(--elbin-r2-ink);
}
.elbin-r2-single-gallery__arrow--prev { left: 12px; }
.elbin-r2-single-gallery__arrow--next { right: 12px; }

/* Мініатюри */
.elbin-r2-single-gallery__thumb {
	width: 72px;
	height: 72px;
	padding: 6px;
	background: var(--elbin-r2-surface);
	border: 2px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-control);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--elbin-r2-transition-fast);
	flex-shrink: 0;
}

.elbin-r2-single-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.elbin-r2-single-gallery__thumb.is-active,
.elbin-r2-single-gallery__thumb:hover {
	border-color: var(--elbin-r2-accent);
}

/* ─── Gallery dots (phone) ───────────────────────────────────────────────── */

.elbin-r2-single-gallery__dots {
	display: none; /* desktop: сховано, phone включає */
}

.elbin-r2-single-gallery__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(14, 18, 20, .15);
	border: 1px solid rgba(14, 18, 20, .12);
	transition: width .15s, background .15s;
	flex-shrink: 0;
}

.elbin-r2-single-gallery__dot.is-active {
	width: 18px;
	background: var(--elbin-r2-accent);
	border-color: var(--elbin-r2-accent);
}

/* ─── Lightbox ───────────────────────────────────────────────────────────── */

.elbin-r2-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(14, 18, 20, 0.92);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}
.elbin-r2-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}
/* __wrap розміром по фото; кнопка виступає назовні через від'ємні відступи */
.elbin-r2-lightbox__wrap {
	position: relative;
	display: inline-flex;
	max-width: 82vw;
	max-height: 82vh;
	border-radius: var(--elbin-r2-r-card);
}

.elbin-r2-lightbox__img {
	max-width: 82vw;
	max-height: 82vh;
	object-fit: contain;
	border-radius: var(--elbin-r2-r-card);
	display: block;
}
.elbin-r2-lightbox__close {
	position: absolute;
	top: -20px;
	right: -20px;
	z-index: 2;
	width: 44px;
	height: 44px;
	background: rgba(14, 18, 20, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.elbin-r2-lightbox__close:hover {
	background: var(--elbin-r2-accent);
	border-color: var(--elbin-r2-accent);
	color: var(--elbin-r2-ink);
}
.elbin-r2-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	z-index: 2;
}
.elbin-r2-lightbox__nav:hover {
	background: var(--elbin-r2-accent);
	border-color: var(--elbin-r2-accent);
	color: var(--elbin-r2-ink);
}
.elbin-r2-lightbox__nav--prev { left: 24px; }
.elbin-r2-lightbox__nav--next { right: 24px; }
.elbin-r2-lightbox__counter {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	font: 500 14px/1 var(--elbin-r2-font-ui);
	color: rgba(255, 255, 255, 0.7);
	background: rgba(14, 18, 20, 0.5);
	padding: 6px 14px;
	border-radius: var(--elbin-r2-r-pill);
	pointer-events: none;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO COL — glassmorphism
   ═══════════════════════════════════════════════════════════════════════════ */

.elbin-r2-single-infocol {
	position: sticky;
	top: 112px;
	background: rgba(255, 255, 255, .78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(228, 230, 233, .7);
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 1px 0 #fff inset, 0 12px 32px rgba(14, 18, 20, .04);
}

/* ─── Title ──────────────────────────────────────────────────────────────── */

.elbin-r2-single-title {
	margin: 0 !important;
	font: 700 28px/1.2 var(--elbin-r2-font-ui) !important;
	letter-spacing: -0.01em !important;
	color: var(--elbin-r2-text) !important;
}

/* ─── Meta row: Арт. + Бренд ─────────────────────────────────────────────── */

.elbin-r2-single-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.elbin-r2-single-meta__sku {
	font: 500 12px/1 var(--elbin-r2-font-mono);
	color: var(--elbin-r2-text-3);
}

.elbin-r2-single-meta__sep {
	color: var(--elbin-r2-text-3);
	font-size: 12px;
}

.elbin-r2-single-meta__brand {
	font: 500 13px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
}

.elbin-r2-single-meta__brand strong {
	color: var(--elbin-r2-text);
	font-weight: 600;
}

/* ─── Price box ──────────────────────────────────────────────────────────── */

.elbin-r2-single-price-box {
	background: var(--elbin-r2-surface-2);
	border-radius: var(--elbin-r2-r-card);
	padding: 20px;
	margin-top: 18px;
}

.elbin-r2-single-price-box.is-sale {
	background: var(--elbin-r2-accent-50);
	border: 1px solid #B8F2EF;
}

.elbin-r2-single-price-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.elbin-r2-single-price-old,
.elbin-r2-single-price-old del {
	font-family: var(--elbin-r2-font-mono);
	font-size: 15px;
	font-weight: 400;
	color: var(--elbin-r2-text-3);
	text-decoration: line-through;
}
.elbin-r2-single-price-old .woocommerce-Price-amount,
.elbin-r2-single-price-old .woocommerce-Price-currencySymbol {
	font-family: var(--elbin-r2-font-mono);
	font-size: 15px;
	color: var(--elbin-r2-text-3);
}

.elbin-r2-single-price-badge {
	display: inline-flex;
	align-items: center;
	background: #DB4437;
	color: #fff;
	padding: 4px 10px;
	border-radius: var(--elbin-r2-r-pill);
	font: 700 12px/1 var(--elbin-r2-font-ui);
	white-space: nowrap;
}

.elbin-r2-single-price-save {
	display: inline-flex;
	align-items: center;
	background: var(--elbin-r2-accent-50);
	color: var(--elbin-r2-accent-700);
	padding: 4px 10px;
	border-radius: var(--elbin-r2-r-pill);
	font: 600 12px/1 var(--elbin-r2-font-ui);
	white-space: nowrap;
}
.elbin-r2-single-price-save .woocommerce-Price-amount,
.elbin-r2-single-price-save .woocommerce-Price-currencySymbol {
	font-family: var(--elbin-r2-font-ui);
	font-size: inherit;
	color: inherit;
}

.elbin-r2-single-price-current {
	font: 800 32px/1 var(--elbin-r2-font-mono);
	color: var(--elbin-r2-text);
}
.elbin-r2-single-price-current .woocommerce-Price-amount,
.elbin-r2-single-price-current .woocommerce-Price-currencySymbol {
	font-family: var(--elbin-r2-font-mono);
	font-weight: 800;
	font-size: 32px;
	color: var(--elbin-r2-text);
}

.elbin-r2-single-price-current.is-sale,
.elbin-r2-single-price-current.is-sale .woocommerce-Price-amount,
.elbin-r2-single-price-current.is-sale .woocommerce-Price-currencySymbol {
	color: #DB4437 !important;
}

/* ─── Таймер акції ───────────────────────────────────────────────────────── */

.elbin-r2-single-countdown {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 14px;
	background: rgba(244, 180, 0, .10);
	border: 1px solid rgba(244, 180, 0, .35);
	border-radius: var(--elbin-r2-r-control);
	color: #A06800; /* іконка годинника */
}

.elbin-r2-single-countdown[hidden] {
	display: none;
}

.elbin-r2-single-countdown svg {
	flex-shrink: 0;
}

.elbin-r2-single-countdown__label {
	font: 500 13px/1.2 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
}

.elbin-r2-single-countdown__time {
	margin-left: auto;
	font: 700 14px/1 var(--elbin-r2-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--elbin-r2-text);
	white-space: nowrap;
}

/* ─── Stock dot ──────────────────────────────────────────────────────────── */

.elbin-r2-single-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font: 600 13px/1 var(--elbin-r2-font-ui);
}

.elbin-r2-single-stock__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	flex-shrink: 0;
}

.elbin-r2-single-stock.is-in {
	color: var(--elbin-r2-success);
}
.elbin-r2-single-stock.is-in .elbin-r2-single-stock__dot {
	background: var(--elbin-r2-success);
	box-shadow: 0 0 0 3px rgba(15, 157, 88, .18);
}

.elbin-r2-single-stock.is-out {
	color: var(--elbin-r2-text-3);
}
.elbin-r2-single-stock.is-out .elbin-r2-single-stock__dot {
	background: var(--elbin-r2-text-3);
}

/* ─── CTA row: WC форма + wishlist ───────────────────────────────────────── */

.elbin-r2-single-cta-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin-top: 14px;
}

.elbin-r2-single-cta {
	flex: 1;
	min-width: 0;
}

.elbin-r2-single-cta form.cart {
	margin: 0 !important;
	padding: 0 !important;
}

/* Flex-ряд [степер | Купити] дає обгортка ядра .ct-cart-actions (вона
   всередині form.cart для простих і всередині .woocommerce-variation-add-to-cart
   для варіативних). Бандл ставить flex-wrap:wrap + width:100% на дітях —
   перебиваємо, інакше кнопка переноситься на новий рядок. */
.elbin-r2-single-cta .ct-cart-actions {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 10px;
	align-items: stretch;
}

.elbin-r2-single-cta .ct-cart-actions > * {
	width: auto;
	order: 0;
}

/* Пейлоад цін для перерахунку ×qty (business.php) — не flex-item */
.elbin-r2-single-cta #elbin-pricing-data {
	display: none;
}

/* ─── Степер кількості [− 1 +] = div.quantity ────────────────────────────────
   Кнопки −/+ друкуються всередині div.quantity (хуки quantity-input шаблону),
   тому рамку-контейнер малюємо на самому .quantity. Перебиваємо бандл:
   div.quantity{display:inline-block; width/height:var(...)}. */

.elbin-r2-single-cta div.quantity {
	display: flex !important;
	align-items: center;
	position: static !important;
	width: auto !important;
	height: 52px !important;
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-control);
	overflow: hidden;
}

/* Товар «поштучно» (min==max): ядро ставить .quantity.hidden — ховаємо степер,
   «Купити» розтягується на всю ширину ряду */
.elbin-r2-single-cta div.quantity.hidden {
	display: none !important;
}

.elbin-r2-single-qty__btn {
	width: 44px;
	height: 100%;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--elbin-r2-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--elbin-r2-transition-fast),
				opacity var(--elbin-r2-transition-fast);
}

.elbin-r2-single-qty__btn:hover {
	background: var(--elbin-r2-surface-3);
}

.elbin-r2-single-qty__btn.is-disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* Спінери ядра (ct-increase/ct-decrease, absolute) — маємо власні кнопки */
.elbin-r2-single-cta .quantity .ct-increase,
.elbin-r2-single-cta .quantity .ct-decrease {
	display: none !important;
}

.elbin-r2-single-cta .quantity label,
.elbin-r2-single-cta .quantity .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.elbin-r2-single-cta .quantity input.qty {
	width: 48px !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 100% !important;
	border: none !important;
	border-left: 1px solid var(--elbin-r2-line) !important;
	border-right: 1px solid var(--elbin-r2-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	text-align: center;
	font: 700 16px/1 var(--elbin-r2-font-mono) !important;
	color: var(--elbin-r2-text) !important;
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0 !important;
	margin: 0 !important;
}

.elbin-r2-single-cta .quantity input.qty::-webkit-outer-spin-button,
.elbin-r2-single-cta .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.elbin-r2-single-cta .quantity input.qty:focus {
	outline: none;
	background: var(--elbin-r2-accent-50);
}

.elbin-r2-single-cta .single_add_to_cart_button {
	all: unset;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100% !important;
	height: 52px !important;
	padding: 0 22px !important;
	font: 700 15px/1 var(--elbin-r2-font-ui) !important;
	color: var(--elbin-r2-ink-on-accent) !important;
	background: var(--elbin-r2-accent) !important;
	border-radius: var(--elbin-r2-r-control) !important;
	cursor: pointer !important;
	transition: background var(--elbin-r2-transition-fast),
				transform .15s ease,
				box-shadow var(--elbin-r2-transition-fast) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Іконка кошика. Селектор 0,3,2 — перебиваємо бандл
   `.woocommerce button.button::before` (0,2,2): то механіка button-shadow
   (display:var(--theme-button-shadow,block)=none + position:absolute,
   z-index:-1, background:inherit, blur) — вона глушила нашу іконку. */
.elbin-r2-single-cta .ct-cart-actions button.single_add_to_cart_button::before {
	content: '';
	display: inline-block;
	position: static;
	z-index: auto;
	inset: auto;
	opacity: 1;
	filter: none;
	transition: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 0;
	/* Заливний візок з карток товару (єдина іконка кошика сайту), ink-on-accent */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23063D2E'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.17 14h9.95c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.58 5H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44A2 2 0 0 0 7 18h12v-2H7l1.17-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.elbin-r2-single-cta .single_add_to_cart_button:hover {
	background: var(--elbin-r2-accent-600) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(18, 181, 175, .35) !important;
}

.elbin-r2-single-cta .single_add_to_cart_button:active {
	background: var(--elbin-r2-accent-700) !important;
	color: #fff !important;
	transform: translateY(1px);
	box-shadow: none !important;
}

.elbin-r2-single-cta .single_add_to_cart_button.loading {
	opacity: .85 !important;
	cursor: wait !important;
}

/* loading: cart-іконка → спінер */
.elbin-r2-single-cta .ct-cart-actions button.single_add_to_cart_button.loading::before {
	background: none;
	border: 2px solid var(--elbin-r2-ink-on-accent);
	border-right-color: transparent;
	border-radius: 50%;
	animation: elbin-r2-cta-spin .6s linear infinite;
}

/* Бандл малює власний спінер `[class*=add_to_cart_button].loading:after` —
   разом із нашим ::before виходило два кружки. Глушимо нативний. */
.elbin-r2-single-cta .ct-cart-actions button.single_add_to_cart_button.loading::after {
	display: none !important;
}

@keyframes elbin-r2-cta-spin {
	to { transform: rotate(360deg); }
}

.elbin-r2-single-cta .single_add_to_cart_button.added {
	background: var(--elbin-r2-ink) !important;
	color: #fff !important;
}

/* «Переглянути кошик» — cart-іконка білим на ink-фоні */
.elbin-r2-single-cta .ct-cart-actions button.single_add_to_cart_button.added::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.17 14h9.95c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.58 5H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44A2 2 0 0 0 7 18h12v-2H7l1.17-2z'/%3E%3C/svg%3E");
}

/* Wishlist 52×52 */
.elbin-r2-single-wishlist {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-control);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--elbin-r2-text-2);
	transition: border-color var(--elbin-r2-transition-fast),
				background var(--elbin-r2-transition-fast),
				color var(--elbin-r2-transition-fast);
}

.elbin-r2-single-wishlist:hover,
.elbin-r2-single-wishlist[aria-pressed="true"] {
	border-color: var(--elbin-r2-accent);
	background: var(--elbin-r2-accent-50);
	color: var(--elbin-r2-accent-deep);
}

/* ─── Вузькі екрани (≤425px): степер + обране в один ряд, кнопка на всю ширину ─
   На 320–425px усі три елементи в одному рядку не влазять — текст кнопки
   («Купити» / довше «Переглянути кошик») обрізається. Розкладаємо в 2 ряди:
   зверху згруповані зліва [степер][обране], знизу повноширинна кнопка.
   Пласким grid: display:contents на обгортках (.elbin-r2-single-cta / form.cart /
   .ct-cart-actions) виносить степер, кнопку й обране на один рівень grid-items.
   :has(.ct-cart-actions) — щоб НЕ чіпати out-of-stock (там форми нема, лишається
   дефолтний flex із notify-блоком). */
@media (max-width: 425px) {
	.elbin-r2-single-cta-row:has(.ct-cart-actions) {
		display: grid;
		grid-template-columns: auto auto 1fr;
		grid-template-areas:
			"stepper wishlist ."
			"button  button   button";
		gap: 10px;
		align-items: start;
	}
	.elbin-r2-single-cta-row:has(.ct-cart-actions) .elbin-r2-single-cta,
	.elbin-r2-single-cta-row:has(.ct-cart-actions) form.cart,
	.elbin-r2-single-cta-row:has(.ct-cart-actions) .ct-cart-actions {
		display: contents !important; /* базове .ct-cart-actions{display:flex!important} */
	}
	.elbin-r2-single-cta div.quantity {
		grid-area: stepper;
	}
	.elbin-r2-single-cta .ct-cart-actions button.single_add_to_cart_button {
		grid-area: button;
	}
	.elbin-r2-single-wishlist {
		grid-area: wishlist;
	}
	/* WC інколи вставляє посилання .added_to_cart у ct-cart-actions —
	   ховаємо, щоб не стало «блукаючим» grid-елементом */
	.elbin-r2-single-cta .added_to_cart {
		display: none !important;
	}
}

/* ─── Out-of-stock — notify «Повідомити коли з'явиться» ─────────────────────── */

.elbin-r2-single-notify {
	width: 100%;
}

.elbin-r2-single-notify [hidden] {
	display: none !important;
}

.elbin-r2-single-notify__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 52px;
	padding: 0 20px;
	font: 700 15px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-accent-700);
	background: transparent;
	border: 1px solid var(--elbin-r2-accent);
	border-radius: var(--elbin-r2-r-control);
	cursor: pointer;
	transition: background var(--elbin-r2-transition-fast);
}

.elbin-r2-single-notify__btn:hover {
	background: var(--elbin-r2-accent-50);
}

.elbin-r2-single-notify__btn svg {
	flex-shrink: 0;
}

/* форма: email + submit inline */
.elbin-r2-single-notify__form {
	display: flex;
	gap: 8px;
}

.elbin-r2-single-notify__input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 14px;
	font: 400 14px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-control);
	-webkit-appearance: none;
	appearance: none;
}

.elbin-r2-single-notify__input:focus {
	outline: none;
	border-color: var(--elbin-r2-accent);
	box-shadow: 0 0 0 3px var(--elbin-r2-accent-50);
}

.elbin-r2-single-notify__submit {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--elbin-r2-ink-on-accent);
	background: var(--elbin-r2-accent);
	border: none;
	border-radius: var(--elbin-r2-r-control);
	cursor: pointer;
	transition: background var(--elbin-r2-transition-fast);
}

.elbin-r2-single-notify__submit:hover {
	background: var(--elbin-r2-accent-600);
}

/* підтвердження */
.elbin-r2-single-notify__done {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 13px 14px;
	font: 500 13px/1.45 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-accent-700);
	background: var(--elbin-r2-accent-50);
	border-radius: var(--elbin-r2-r-control);
}

.elbin-r2-single-notify__done svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.elbin-r2-single-notify__submit:disabled {
	opacity: .6;
	cursor: wait;
}

.elbin-r2-single-notify__error {
	margin: 6px 0 0;
	font: 500 12px/1.4 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-error);
}

/* ─── Trust — три інфо-картки в ряд (макет: Доставка / Гарантія / Повернення) ── */

.elbin-r2-single-trust {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.elbin-r2-single-trust__item {
	flex: 1 1 140px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-control);
}

.elbin-r2-single-trust__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--elbin-r2-accent-50);
	color: var(--elbin-r2-accent-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.elbin-r2-single-trust__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.elbin-r2-single-trust__body strong {
	font: 700 12px/1.2 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
}

.elbin-r2-single-trust__body span {
	font: 400 11px/1.2 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ─── Payments row ───────────────────────────────────────────────────────── */

.elbin-r2-single-payments {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.elbin-r2-single-payments__label {
	font: 500 12px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.elbin-r2-single-payments__pills {
	display: flex;
	gap: 6px;
}

.elbin-r2-single-payments__pill {
	height: 26px;
	padding: 0 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--elbin-r2-line);
	border-radius: 4px;
	background: #fff;
}

.elbin-r2-single-payments__pill img {
	height: 15px;
	width: auto;
	max-width: 64px;
	display: block;
	object-fit: contain;
}

/* ─── Траст-рядки: доставка / гарантія / повернення (11.07) ─────────────────
   Під рядом «Оплата»: три клікабельні рядки з шевроном, кожен перемикає
   відповідний таб (single.js). Розмітка — elbin_r2_single_infocol. */
.elbin-r2-single-trust {
	margin-top: 20px;
	border-top: 1px solid var(--elbin-r2-line);
	display: flex;
	flex-direction: column;
}
.elbin-r2-single-trust__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--elbin-r2-line);
	text-decoration: none;
	color: inherit;
}
.elbin-r2-single-trust__row:last-child {
	border-bottom: 0;
	padding-bottom: 2px;
}
.elbin-r2-single-trust__ic {
	/* Чорні, не бірюзові (рішення 11.07): траст не має перекрикувати
	   таб-навігацію і CTA — бірюза лишається кнопці й активному табу. */
	color: var(--elbin-r2-text);
	flex-shrink: 0;
}
.elbin-r2-single-trust__txt {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--elbin-r2-text-2);
}
.elbin-r2-single-trust__txt b {
	color: var(--elbin-r2-text);
	font-weight: 600;
}
.elbin-r2-single-trust__chev {
	color: var(--elbin-r2-text-3);
	flex-shrink: 0;
	transition: transform 0.15s, color 0.15s;
}
.elbin-r2-single-trust__row:hover .elbin-r2-single-trust__txt {
	color: var(--elbin-r2-text);
}
.elbin-r2-single-trust__row:hover .elbin-r2-single-trust__chev {
	color: var(--elbin-r2-accent);
	transform: translateX(2px);
}
/* Статичний рядок (гарантія): не лінк — без ховер-реакцій і курсора */
.elbin-r2-single-trust__row.is-static {
	cursor: default;
}
.elbin-r2-single-trust__row.is-static:hover .elbin-r2-single-trust__txt {
	color: var(--elbin-r2-text-2);
}
/* Мобільний: рядки дихають вільніше (запит Данила 11.07) */
@media (max-width: 1023.98px) {
	.elbin-r2-single-trust__row {
		padding: 16px 4px;
		gap: 14px;
	}
	.elbin-r2-single-trust__row:last-child {
		padding-bottom: 8px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE STICKY BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.elbin-r2-sticky-bar {
	display: none; /* тільки mobile — увімкнено нижче */
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET + MOBILE  @media (max-width: 1023.98px)
   Відповідає breakpoint каталогу — layout стає вертикальним
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023.98px) {

	.elbin-r2-single-hero {
		padding: var(--elbin-r2-s-16) 0 var(--elbin-r2-s-24);
		width: 100%;     /* скасовуємо 100vw — scrollbar не входить до розрахунку */
		margin-left: 0;  /* скасовуємо від'ємний margin */
		overflow: visible; /* скасовуємо overflow-x:hidden — на iOS створює scroll-контейнер */
	}

	/* Вертикальний layout: один стовпець */
	.elbin-r2-single-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.elbin-r2-single-gallery {
		flex-direction: column;
		min-width: 0; /* thumbs min-content (4×64px+gaps) розтягував grid-колонку */
	}

	.elbin-r2-single-infocol {
		min-width: 0; /* grid item — не дати йому розтягнути колонку */
	}

	/* Main image — спочатку (order виправляє DOM-порядок) */
	.elbin-r2-single-gallery__main-wrap {
		order: 1;
		aspect-ratio: 1;
		flex: none;   /* скасовуємо flex:1 з desktop — в column-контейнері колапсує до 0 */
		width: 100%;
		max-height: 55vh;
		min-height: 280px; /* не колапсує при landscape-орієнтації */
		border: none;
		border-radius: 0;
	}

	/* Thumbs — ховаємо, dots — показуємо */
	.elbin-r2-single-gallery__thumbs-col {
		display: none;
	}

	.elbin-r2-single-gallery__dots {
		display: flex;
		order: 2;
		justify-content: center;
		gap: 6px;
		padding: 8px 0 4px;
	}

	/* Стрілки — прибираємо, навігація через свайп */
	.elbin-r2-single-gallery__arrow {
		display: none;
	}

	/* Info col — плоский, скидаємо sticky */
	.elbin-r2-single-infocol {
		position: static;
		align-self: auto;
		border-radius: 0;
		border-left: none;
		border-right: none;
		padding: 20px var(--elbin-r2-s-16);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: #fff;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--elbin-r2-line);
		overflow: visible; /* скасовуємо overflow-x:hidden — на iOS створює scroll-контейнер */
	}

	/* Лайтбокс: стрілки — тільки десктоп */
	.elbin-r2-lightbox__nav {
		display: none;
	}

	/* Sticky bar — планшет + телефон.
	   <1000px базовий bottom піднімає override нижче — там фіксоване
	   нижнє меню .elbin-mbn (60px), бар має сидіти НАД ним. */
	.elbin-r2-sticky-bar {
		display: flex;
		align-items: center;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 99997;
		height: 70px;
		padding: 10px 12px;
		gap: 10px;
		border-radius: 18px;
		/* V2 «темний двотоновий»: у тон хедера/футера/нижнього меню */
		background: rgba(26, 26, 26, .96);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(255, 255, 255, .08);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
		transform: translateY(calc(100% + 100px));
		opacity: 0;
		transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
					opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.elbin-r2-sticky-bar.is-visible {
		transform: translateY(0);
		opacity: 1;
	}

	.elbin-r2-sticky-bar.is-hiding {
		transform: translateY(calc(100% + 100px));
		opacity: 0;
		transition: transform 250ms ease, opacity 250ms ease;
	}

	/* Відкрита будь-яка шторка/дровер (спільний scroll-lock body-клас) —
	   бар ховаємо, інакше він (z 99997) висить над шторкою (z 300). */
	body.elbin-cartdrawer-open .elbin-r2-sticky-bar {
		transform: translateY(calc(100% + 100px));
		opacity: 0;
		pointer-events: none;
	}

	.elbin-r2-sticky-bar__thumb {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		object-fit: contain;
		background: #F5F5F5;
		flex-shrink: 0;
	}

	.elbin-r2-sticky-bar__info {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.elbin-r2-sticky-bar__name {
		font: 600 13px/1.3 var(--elbin-r2-font-ui);
		color: #F4F4F5;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.elbin-r2-sticky-bar__price {
		display: flex;
		align-items: baseline;
		gap: 5px;
	}

	.elbin-r2-sticky-bar__old {
		font: 400 11px/1 var(--elbin-r2-font-mono);
		color: #7A8087;
		text-decoration: line-through;
	}
	.elbin-r2-sticky-bar__old .woocommerce-Price-amount,
	.elbin-r2-sticky-bar__old .woocommerce-Price-currencySymbol {
		font-family: var(--elbin-r2-font-mono);
		font-size: inherit;
		color: inherit;
	}

	.elbin-r2-sticky-bar__cur {
		font: 700 16px/1 var(--elbin-r2-font-mono);
		color: var(--elbin-r2-accent);
	}
	.elbin-r2-sticky-bar__cur .woocommerce-Price-amount,
	.elbin-r2-sticky-bar__cur .woocommerce-Price-currencySymbol {
		font-family: var(--elbin-r2-font-mono);
		font-size: inherit;
		font-weight: 700;
		color: inherit;
	}

	.elbin-r2-sticky-bar__cta {
		flex-shrink: 0;
		height: 44px;
		padding: 0 18px;
		border-radius: 12px;
		background: var(--elbin-r2-accent);
		color: var(--elbin-r2-ink-on-accent);
		border: none;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font: 700 14px/1 var(--elbin-r2-font-ui);
		cursor: pointer;
		transition: background .15s, transform .1s;
	}

	.elbin-r2-sticky-bar__cta:active {
		background: var(--elbin-r2-accent-600);
		transform: scale(0.96);
	}

	.elbin-r2-sticky-bar__cta.is-loading {
		opacity: .85;
		cursor: wait;
	}

	.elbin-r2-sticky-bar__cta.is-success {
		background: #1A1A1A;
		color: #fff;
	}

}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE ONLY  @media (max-width: 639px)
   Телефони — менші шрифти, breadcrumb
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

	/* CTA «Купити» — більша на телефоні (дизайн: 56px / 16px);
	   степер і «обране» — тієї ж висоти, інакше ряд розцентрований */
	.elbin-r2-single-cta .single_add_to_cart_button,
	.elbin-r2-single-cta div.quantity {
		height: 56px !important;
		font-size: 16px !important;
	}

	.elbin-r2-single-wishlist {
		width: 56px;
		height: 56px;
	}

	.elbin-r2-single-title {
		font-size: 22px !important;
	}

	.elbin-r2-single-price-current,
	.elbin-r2-single-price-current .woocommerce-Price-amount,
	.elbin-r2-single-price-current .woocommerce-Price-currencySymbol {
		font-size: 26px !important;
	}

}

/* Кнопка «вгору» до опису товару — прихована (клас вішає single.js),
   інакше вона перекриває «Купити». !important — перебиваємо .ct-show. */
.single-product .ct-back-to-top.is-before-desc {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS — Blocksy рендерить таби як сіблінг всередині .elbin-r2-single
   ═══════════════════════════════════════════════════════════════════════════ */

.elbin-r2-single .woocommerce-tabs {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 0 30px 64px;
	background: var(--elbin-r2-surface-2);
}

/* ═══ Б1 (11.07): десктоп ≥1024 — таби в ЛІВІЙ колонці сітки hero ═══
   Таби тепер третій grid-item (content-single-product.php): ліва колонка =
   галерея (ряд 1) + таби (ряд 2), інфоколонка sticky на обидва ряди —
   ціна і «Купити» видимі, поки читаєш опис. Full-bleed сіру смугу секції
   знімаємо: біла картка .elbin-r2-tabs-card сама тримає поверхню.
   Мобільний (≤1023.98) не зачеплено: там сітка одноколонкова і діють
   мобільні оверрайди табів нижче. */
@media (min-width: 1024px) {
	.elbin-r2-single-gallery {
		grid-column: 1;
		grid-row: 1;
	}
	.elbin-r2-single-infocol {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: start;
	}
	.elbin-r2-single-grid > .woocommerce-tabs {
		grid-column: 1;
		grid-row: 2;
		min-width: 0; /* широкі таблиці характеристик не розпирають колонку */
		width: auto;
		margin-left: 0;
		padding: 0;
		background: none;
	}
}

/* Вміст кастомних табів (.elbin-tab, рендер у business.php) —
   переїхало з raw <style> на wp_head 07.07.2026 */
.woocommerce-tabs .panel .elbin-tab p { margin: .5em 0; }
.woocommerce-tabs .panel .elbin-tab ul,
.woocommerce-tabs .panel .elbin-tab ol { margin: .6em 0 1em 1.2em; }
.woocommerce-tabs .panel .elbin-tab li { margin: .3em 0; }

/* Нормалізація типографіки кастомних табів (11.07). Вміст тягнеться зі
   сторінок /payment-delivery/ і /return-policy/ з різношерстою розміткою
   (доставка: h2+h4 і болд-абзаци з <b>; повернення: рівні h3-секції) —
   зводимо заголовки БУДЬ-ЯКОГО рівня і жирність до одного вигляду.
   Текст сторінок не чіпаємо — тільки CSS. */
.woocommerce-tabs .panel .elbin-tab h2,
.woocommerce-tabs .panel .elbin-tab h3,
.woocommerce-tabs .panel .elbin-tab h4 {
	margin: 1.5em 0 .5em;
	font: 700 17px/1.35 var(--elbin-r2-font-ui);
	letter-spacing: 0;
	color: var(--elbin-r2-text);
}
.woocommerce-tabs .panel .elbin-tab > h2:first-child,
.woocommerce-tabs .panel .elbin-tab > h3:first-child,
.woocommerce-tabs .panel .elbin-tab > h4:first-child {
	margin-top: .2em;
}
.woocommerce-tabs .panel .elbin-tab b,
.woocommerce-tabs .panel .elbin-tab strong {
	font-weight: 600;
}
/* wp-block-separator зі сторінок рендерився куцою центрованою рискою —
   уніфікуємо під лінії теми, по ширині текстового капа */
.woocommerce-tabs .panel .elbin-tab hr {
	border: 0;
	border-top: 1px solid var(--elbin-r2-line);
	width: 100%;
	max-width: 820px;
	margin: 1.4em 0;
}

.elbin-r2-single .woocommerce-tabs > * {
	max-width: 1220px;
	margin-left: auto;
	margin-right: auto;
}

/* Десктоп ≥1000px: контент табів на всю ширину по краю хедера (рішення Данила
   24.06). Секція табів вже full-bleed з горизонт. padding 30px → знімаємо
   внутрішній кап, щоб вміст ліг рівно на 30px (як лого хедера й решта контенту),
   а не центрувався острівцем 1392px. Нижче 1000px лишаємо центрований cap. */
@media (min-width: 1000px) {
	.elbin-r2-single .woocommerce-tabs > * {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	/* Читабельний рядок ТЕКСТУ опису всередині full-width картки табів
	   (рішення Данила 24.06: «картка широка, текст вузький»). Картка/панель
	   лишаються на всю ширину (30px), але суцільний текст не розповзається —
	   кап ~820px (~80 символів). Таблиці характеристик (table — прямий нащадок
	   панелі) НЕ капляться, лишаються широкими. Лівоприбито через !important,
	   бо WP is-layout-constrained/global-styles ставить margin-inline:auto. */
	.elbin-r2-single .woocommerce-Tabs-panel > p,
	.elbin-r2-single .woocommerce-Tabs-panel > ul,
	.elbin-r2-single .woocommerce-Tabs-panel > ol,
	.elbin-r2-single .woocommerce-Tabs-panel > h2,
	.elbin-r2-single .woocommerce-Tabs-panel > h3,
	.elbin-r2-single .woocommerce-Tabs-panel > h4,
	/* …і той самий кап для вмісту кастомних табів (обгорнуті в .elbin-tab,
	   тому «прямі нащадки панелі» їх не ловили — рядок розповзався ширше,
	   ніж в «Описі»; нормалізація 11.07) */
	.elbin-r2-single .woocommerce-Tabs-panel .elbin-tab > p,
	.elbin-r2-single .woocommerce-Tabs-panel .elbin-tab > ul,
	.elbin-r2-single .woocommerce-Tabs-panel .elbin-tab > ol,
	.elbin-r2-single .woocommerce-Tabs-panel .elbin-tab > h2,
	.elbin-r2-single .woocommerce-Tabs-panel .elbin-tab > h3,
	.elbin-r2-single .woocommerce-Tabs-panel .elbin-tab > h4 {
		max-width: 820px;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

/* Картка-контейнер (макет: навігація + контент на білій картці) */
.elbin-r2-single .elbin-r2-tabs-card {
	background: var(--elbin-r2-surface);
	border: 1px solid var(--elbin-r2-line);
	border-radius: var(--elbin-r2-r-card);
	overflow: hidden;
}

/* Таб-навігація — чіпи-пігулки, активний залитий бірюзою (варіант 3,
   рішення 11.07: таби мають бути помітнішими за траст-рядки інфоколонки).
   Мобільний горизонтальний скрол ul.tabs (блок ≤1023.98 нижче) лишається. */
.elbin-r2-single .woocommerce-tabs ul.tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--elbin-r2-line);
	background: none;
	box-shadow: none;
	max-width: none;
}

.elbin-r2-single .woocommerce-tabs ul.tabs::before,
.elbin-r2-single .woocommerce-tabs ul.tabs li::before,
.elbin-r2-single .woocommerce-tabs ul.tabs li::after { display: none !important; }

.elbin-r2-single .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
	position: static !important;
	top: auto !important;
}

.elbin-r2-single .woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	font: 700 13.5px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-2);
	text-decoration: none;
	border: 1px solid var(--elbin-r2-line);
	border-radius: 999px;
	background: var(--elbin-r2-surface);
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	white-space: nowrap;
	/* Blocksy-бандл ставить uppercase — макет вимагає звичайний регістр */
	text-transform: none !important;
	letter-spacing: normal !important;
}

.elbin-r2-single .woocommerce-tabs ul.tabs li a:hover {
	color: var(--elbin-r2-text);
	border-color: var(--elbin-r2-accent);
	background: var(--elbin-r2-surface);
}

.elbin-r2-single .woocommerce-tabs ul.tabs li.active a {
	color: var(--elbin-r2-ink-on-accent);
	border-color: var(--elbin-r2-accent);
	background: var(--elbin-r2-accent);
}

/* Лічильник у назві таба («Характеристики · 12») */
.elbin-r2-single .woocommerce-tabs .elbin-r2-tab-count {
	font: 500 11px/1 var(--elbin-r2-font-mono);
	color: var(--elbin-r2-text-3);
}
.elbin-r2-single .woocommerce-tabs ul.tabs li.active .elbin-r2-tab-count {
	color: var(--elbin-r2-ink-on-accent);
}

/* Панелі контенту */
.elbin-r2-single .woocommerce-Tabs-panel {
	padding: 32px 24px;
	margin: 0;
	border: none;
	font: 400 15px/1.7 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
	background: none;
}

.elbin-r2-single .woocommerce-Tabs-panel h2 {
	display: none;
}

/* Таблиця характеристик — скидаємо Blocksy-картку */
.elbin-r2-single .woocommerce-product-attributes,
.elbin-r2-single .woocommerce-Tabs-panel > div {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Біла Blocksy/style.css-картка на самій панелі табів —
   перебиваємо .single-product .woocommerce-tabs .panel.entry-content (0,4,0 !important).
   Наш селектор (0,6,0) + !important гарантовано виграє незалежно від порядку CSS. */
.single-product .elbin-r2-single .woocommerce-tabs .panel.entry-content.woocommerce-Tabs-panel {
	background: none !important;
	padding: 32px 24px !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-bottom: 0 !important;
}

.elbin-r2-single .woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
}

/* Зебра на весь рядок: непарні — білі, парні — світло-сірі.
   Перебиваємо Blocksy tr:nth-child(2n) (який лягав лише на td → косий шов). */
.elbin-r2-single .woocommerce-product-attributes-item th,
.elbin-r2-single .woocommerce-product-attributes-item td {
	background: var(--elbin-r2-surface) !important;
}

.elbin-r2-single .woocommerce-product-attributes tr:nth-child(2n) th,
.elbin-r2-single .woocommerce-product-attributes tr:nth-child(2n) td {
	background: var(--elbin-r2-surface-3) !important;
}

/* Значення зберігаються нормалізовано (lowercase) — покупцю з великої */
.elbin-r2-single .woocommerce-product-attributes-item__value p::first-letter {
	text-transform: uppercase;
}

/* ВАРІАНТ D (Опис|Характеристики поруч ≥1440) ВІДКОЧЕНО 24.06 за рішенням
   Данила: лишений таб-перемикач Доставка/Повернення відкривав вміст ЗНИЗУ під
   2-колонковим блоком — збивало з пантелику. Повертаємось до варіанту A
   (звичайні таби + читабельний кап тексту опису, реалізовано вище у
   @media min-width:1000px). Як ефективно використати вільний простір праворуч
   на широкому екрані — окреме рішення (обговорюється). JS-частину D (single.js
   MutationObserver) теж прибрано. */

.elbin-r2-single .woocommerce-product-attributes-item th {
	width: 240px;
	padding: 13px 28px 13px 16px;
	font: 500 14px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-muted);
	text-align: left;
	vertical-align: top;
}

.elbin-r2-single .woocommerce-product-attributes-item td {
	padding: 13px 16px 13px 24px;
	font: 500 14px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
	vertical-align: top;
}

.elbin-r2-single .woocommerce-product-attributes-item td p {
	margin: 0;
}

/* ≤1023px — планшет і телефон */
@media (max-width: 1023.98px) {
	.elbin-r2-single .woocommerce-tabs {
		padding: 0 var(--elbin-r2-s-16) 48px;
		width: 100%;     /* скасовуємо 100vw */
		margin-left: 0;  /* скасовуємо від'ємний margin */
		overflow: visible;
	}

	/* Обгортка для fade-стрілки (div додається через JS) */
	.elbin-r2-tabs-scroll-wrap {
		position: relative;
	}

	.elbin-r2-tabs-scroll-wrap::after {
		content: '\203a';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 1px; /* не перекриваємо border-bottom ul.tabs */
		width: 56px;
		background: linear-gradient(
			to right,
			transparent,
			var(--elbin-r2-surface) 70%
		);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 10px;
		font: 600 20px/1 var(--elbin-r2-font-ui);
		color: var(--elbin-r2-accent);
		pointer-events: none;
		z-index: 1;
		transition: opacity 0.2s;
	}

	.elbin-r2-tabs-scroll-wrap.is-end::after {
		opacity: 0;
	}

	.elbin-r2-single .woocommerce-tabs ul.tabs {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
		touch-action: pan-x;
	}

	.elbin-r2-single .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.elbin-r2-single .woocommerce-Tabs-panel {
		overflow: visible !important;
		max-height: none !important; /* скасовуємо Blocksy max-height + overflow-y:auto */
	}
	.elbin-r2-single .woocommerce-tabs ul.tabs li {
		flex-shrink: 0 !important;
		display: block !important;
		width: auto !important;
	}

	.elbin-r2-single .woocommerce-product-attributes-item th {
		width: 140px;
	}
}

/* ≤639px — телефон: компактніші пігулки табів */
@media (max-width: 639px) {
	.elbin-r2-single .woocommerce-tabs ul.tabs {
		gap: 6px;
		padding: 12px 16px 10px;
	}

	.elbin-r2-single .woocommerce-tabs ul.tabs li a {
		font-size: 12.5px !important;
		padding: 8px 12px !important;
	}

	.elbin-r2-single .woocommerce-Tabs-panel,
	.single-product .elbin-r2-single .woocommerce-tabs .panel.entry-content.woocommerce-Tabs-panel {
		padding: 24px 16px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   СХОЖІ ТОВАРИ — секція під табами (full-bleed, білий фон)
   Картки: product-card.css; сітка: product-grid.css (.elbin-r2-hits__grid);
   шапка секції: hits.css (.elbin-r2-section-header) — усі глобальні.
   ═══════════════════════════════════════════════════════════════════════════ */

.elbin-r2-single-related {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	background: var(--elbin-r2-surface);
	border-top: 1px solid var(--elbin-r2-line);
	padding: 48px 30px 64px;
	font-family: var(--elbin-r2-font-ui);
}

/* Внутрішня ширина — як у контенту табів (контейнер мінус бічні падінги) */
.elbin-r2-single-related__inner {
	max-width: 1220px;
	margin: 0 auto;
}

/* Десктоп ≥1000px: «Схожі товари» на всю ширину по краю хедера (рішення
   Данила 24.06). Секція вже full-bleed з горизонт. padding 30px → знімаємо
   внутрішній кап, щоб вміст ліг рівно на 30px (як лого хедера й решта контенту),
   а не центрувався острівцем 1392px. */
@media (min-width: 1000px) {
	.elbin-r2-single-related__inner {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

.elbin-r2-single-related .elbin-r2-section-header {
	margin-bottom: 32px;
}

@media (max-width: 1023.98px) {
	.elbin-r2-single-related {
		width: 100%;
		margin-left: 0;
		padding: 40px var(--elbin-r2-s-16) 48px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   СТЕКОВАННЯ FIXED-ЕЛЕМЕНТІВ <1000px (де є нижнє меню .elbin-mbn, 60px):
   sticky-бар — над меню; кнопка «вгору» — над баром (базовий bottom-офсет
   кнопки задає Customizer, тут лише компенсація висоти бара+меню).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 999.98px) {
	.elbin-r2-sticky-bar {
		/* меню (60+env) + 12 зазор; прямий env() без var (iOS-фікс 02.07);
		   другий рядок = компактна safe-зона, фолбек-ланцюжок */
		bottom: calc(72px + env(safe-area-inset-bottom, 0px));
		bottom: calc(72px + max(env(safe-area-inset-bottom, 0px) - 14px, 0px));
	}

	.single-product .ct-back-to-top {
		/* меню + 12 + 70 бар */
		margin-bottom: calc(142px + env(safe-area-inset-bottom, 0px));
		margin-bottom: calc(142px + max(env(safe-area-inset-bottom, 0px) - 14px, 0px));
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВІДГУКИ (#tab-reviews) — R2-стилізація поверх WC-кору/Blocksy-бандла.
   Розмітка рідна (оверрайдів шаблону нема): #comments список + #review_form.
   Двоколонковий грід і механіка зірок (icon-font "star") — з бандла,
   кольори зірок керуються його ж CSS-vars --star-rating-*.
   ═══════════════════════════════════════════════════════════════════════════ */

.elbin-r2-single .woocommerce-Reviews {
	--star-rating-initial-color: var(--elbin-r2-accent);
	--star-rating-inactive-color: var(--elbin-r2-surface-3);
	font-family: var(--elbin-r2-font-ui);
}

/* Зірки рейтингу у списку — icon-font "star" (глобальний .elbin-r2-single *
   зверху файла перетирає його на span-оверлеї → замість гліфів літери S) */
.elbin-r2-single .star-rating span {
	font-family: star;
}

/* Порожній стан «Відгуків немає, поки що.» */
.elbin-r2-single .woocommerce-noreviews {
	margin: 0;
	padding: 20px;
	border: 1px dashed var(--elbin-r2-line);
	border-radius: 12px;
	background: var(--elbin-r2-surface-2);
	font: 400 14px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
}

/* ── Список відгуків (на майбутнє, коли з'являться) ── */
.elbin-r2-single .woocommerce-Reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elbin-r2-single .woocommerce-Reviews .commentlist li {
	border-top-color: var(--elbin-r2-line);
}

.elbin-r2-single .woocommerce-Reviews .commentlist li:first-child {
	border-top: none;
}

.elbin-r2-single .woocommerce-Reviews .comment_container {
	padding-top: 24px;
}

.elbin-r2-single .woocommerce-Reviews .commentlist li:first-child .comment_container {
	padding-top: 0;
}

.elbin-r2-single .woocommerce-Reviews .commentlist li:not(:last-child) .comment_container {
	padding-bottom: 24px;
}

/* Бандл робить meta uppercase 11px — повертаємо звичайний регістр R2 */
.elbin-r2-single .woocommerce-Reviews .meta :is(em, time, span) {
	text-transform: none;
	font: 400 12px/1.4 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
}

.elbin-r2-single .woocommerce-Reviews .meta .woocommerce-review__author {
	font: 600 14px/1.4 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
	text-transform: none;
}

.elbin-r2-single .woocommerce-Reviews .description {
	font: 400 15px/1.7 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
}

/* ── Форма ── */
.elbin-r2-single .woocommerce-Reviews .comment-reply-title {
	display: block;
	font: 700 18px/1.35 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
	margin-bottom: 8px;
}

.elbin-r2-single .woocommerce-Reviews .comment-notes {
	font: 400 13px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
	margin: 0 0 20px;
}

/* Рейтинг: підпис + зірки в один рядок */
.elbin-r2-single .comment-form-rating {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
}

.elbin-r2-single .comment-form-rating .stars {
	margin: 0;
	font-size: 1.35em;
	line-height: 1;
}

/* Підписи полів — як у чекауті (uppercase caption) */
.elbin-r2-single #review_form .comment-form-rating > label,
.elbin-r2-single #review_form p:not(.comment-form-cookies-consent) > label {
	display: inline-block;
	font: 600 12px/1.4 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 6px;
}

.elbin-r2-single #review_form .required {
	color: var(--elbin-r2-error);
	text-decoration: none;
}

.elbin-r2-single #review_form input[type="text"],
.elbin-r2-single #review_form input[type="email"],
.elbin-r2-single #review_form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--elbin-r2-line);
	border-radius: 8px;
	font: 400 14px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text);
	background: var(--elbin-r2-surface);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.elbin-r2-single #review_form input:focus,
.elbin-r2-single #review_form textarea:focus {
	outline: none;
	border-color: var(--elbin-r2-accent);
	box-shadow: 0 0 0 3px var(--elbin-r2-accent-50);
}

.elbin-r2-single #review_form textarea {
	min-height: 120px;
	resize: vertical;
}

/* Згода на cookies — звичайний регістр, чекбокс в акценті */
.elbin-r2-single #review_form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 20px;
}

.elbin-r2-single #review_form .comment-form-cookies-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 2px 0 0;
	accent-color: var(--elbin-r2-accent);
	cursor: pointer;
}

.elbin-r2-single #review_form .comment-form-cookies-consent label {
	font: 400 13px/1.5 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-text-3);
	cursor: pointer;
}

/* Сабміт — мова кнопки «Купити» */
.elbin-r2-single #review_form .form-submit {
	margin: 0;
}

.elbin-r2-single #review_form .form-submit button.submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	border: none;
	font: 700 15px/1 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-ink-on-accent);
	background: var(--elbin-r2-accent);
	border-radius: var(--elbin-r2-r-control);
	cursor: pointer;
	transition: background var(--elbin-r2-transition-fast),
				transform 0.15s ease,
				box-shadow 0.15s ease;
}

.elbin-r2-single #review_form .form-submit button.submit:hover {
	background: var(--elbin-r2-accent-600);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(18, 181, 175, 0.35);
}

.elbin-r2-single #review_form .form-submit button.submit:active {
	background: var(--elbin-r2-accent-700);
	transform: none;
	box-shadow: none;
}