/* ELBIN Redesign 2 — Wishlist (Обране)
 *
 * Серце-overlay на картці каталогу, серце на single,
 * іконка-серце з лічильником у хедері (тільки десктоп),
 * сітка сторінки «Обране» і порожній стан.
 */

/* ─── Серце-overlay на картці каталогу ─────────────────────────────────── */

/* Кнопка — СЕСТРА <a class="__img-wrap"> (не дитина), тому абсолют рахуємо
   від спільного предка .elbin-r2-product-card. Робимо його relative. */
.elbin-r2-product-card {
	position: relative;
}

/* Серце-кнопка картки — абсолют у верхньому правому куті зони зображення.
   Клас .elbin-r2-wishlist-btn вживається лише в картці (single має свій клас). */
.elbin-r2-wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(14, 18, 20, 0.08);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--elbin-r2-ink, #0E1214);
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.elbin-r2-wishlist-btn:hover {
	color: var(--elbin-r2-accent, #1AD0CA);
	box-shadow: 0 4px 14px rgba(14, 18, 20, 0.12);
	transform: translateY(-1px);
}

.elbin-r2-wishlist-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* Активний стан — серце залите акцентом */
.elbin-r2-wishlist-btn.is-active {
	color: var(--elbin-r2-accent, #1AD0CA);
	border-color: var(--elbin-r2-accent, #1AD0CA);
}

.elbin-r2-wishlist-btn.is-active svg {
	fill: var(--elbin-r2-accent, #1AD0CA);
}

/* ─── Серце на single-product ──────────────────────────────────────────── */

/* .elbin-r2-single-wishlist уже стилізована в single.css; додаємо лише
   активний стан (залите серце), щоб логіка wishlist.js працювала однаково. */
.elbin-r2-single-wishlist.is-active {
	color: var(--elbin-r2-accent, #1AD0CA);
	border-color: var(--elbin-r2-accent, #1AD0CA);
}

.elbin-r2-single-wishlist.is-active svg {
	fill: var(--elbin-r2-accent, #1AD0CA);
}

/* ─── Іконка-серце в хедері з бейджем-лічильником ───────────────────────── */

.elbin-r2-wishlist-head {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: 4px;
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.elbin-r2-wishlist-head:hover {
	color: var(--elbin-r2-accent, #1AD0CA);
}

.elbin-r2-wishlist-head svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Бейдж-лічильник — показуємо лише коли є товари (data-count != 0) */
.elbin-r2-wishlist-head__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--elbin-r2-accent, #1AD0CA);
	color: var(--elbin-r2-ink-on-accent, #063D2E);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.elbin-r2-wishlist-head[data-count="0"] .elbin-r2-wishlist-head__count {
	display: none;
}

/* Ховаємо хедер-серце на планшеті/мобільному (≤999px) — за рішенням;
   лічильник там несе бейдж пункту «Обране» нижнього меню (.elbin-mbn__wl-badge).
   Заодно збільшуємо тач-таргет серця на картці до 44px (було 38). */
@media (max-width: 999.98px) {
	.elbin-r2-wishlist-head {
		display: none;
	}

	.elbin-r2-wishlist-btn {
		width: 44px;
		height: 44px;
		top: 8px;
		right: 8px;
	}
}

/* ─── Сторінка «Обране» ─────────────────────────────────────────────────── */

.elbin-r2-wishlist-page {
	max-width: var(--elbin-r2-container, 1280px); /* фул-width 2026-06-12 */
	margin: 0 auto !important;
	padding: 24px 16px 48px;
	box-sizing: border-box;
}

/* Власна сітка обраного — адаптив 1→2→3→4 колонки за брейкпоінтами */
.elbin-r2-wishlist-grid {
	margin-top: 8px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

@media (min-width: 375px) {
	.elbin-r2-wishlist-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (min-width: 600px) {
	.elbin-r2-wishlist-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

@media (min-width: 1024px) {
	.elbin-r2-wishlist-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}

/* Порожній стан */
/* БАГ-ФІКС 02.07: display:flex класу перебивав UA-правило [hidden] —
   на сторінці з товарами порожній стан і грід було видно ОДНОЧАСНО. */
.elbin-r2-wishlist-empty[hidden] {
	display: none !important;
}

.elbin-r2-wishlist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 56px 20px;
	text-align: center;
	color: var(--elbin-r2-ink, #0E1214);
}

.elbin-r2-wishlist-empty svg {
	color: rgba(14, 18, 20, 0.25);
}

.elbin-r2-wishlist-empty p {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

.elbin-r2-wishlist-empty__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border-radius: 10px;
	background: var(--elbin-r2-accent, #1AD0CA);
	color: var(--elbin-r2-ink-on-accent, #063D2E);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}

.elbin-r2-wishlist-empty__cta:hover {
	background: var(--elbin-r2-accent-600, #12B5AF);
	color: var(--elbin-r2-ink-on-accent, #063D2E);
	text-decoration: none;
}

/* ─── Бічна панель «Обране» (десктоп) ───────────────────────────────────
 * Каркас і рядки успадковують стилі cart-drawer.css (спільні класи
 * .elbin-cartdrawer* + .woocommerce-mini-cart-item). Тут — лише специфіка. */

/* Страховка: display:flex вузлів панелі не має перебивати hidden-атрибут
 * (той самий клас-vs-[hidden] баг, що був на сторінці «Обране»). */
.elbin-cartdrawer--wl [hidden] {
	display: none !important;
}

/* Ціна у рядку: mono, поточна — бірюза, стара — сіра закреслена */
.elbin-wldrawer-price {
	display: block;
	margin-top: 6px;
	font: 700 14px/1 var(--elbin-r2-font-mono);
	color: var(--elbin-r2-accent, #1AD0CA);
}
.elbin-wldrawer-price del {
	margin-right: 6px;
	font-weight: 400;
	font-size: 11px;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-wldrawer-price ins {
	text-decoration: none;
}

/* Кнопка «У кошик» у рядку */
.elbin-wldrawer-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	height: 32px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--elbin-r2-accent, #1AD0CA);
	color: var(--elbin-r2-ink-on-accent, #063D2E) !important;
	font: 700 12px/1 var(--elbin-r2-font-ui);
	text-decoration: none;
	transition: background 0.15s ease;
}
.elbin-wldrawer-buy:hover {
	background: var(--elbin-r2-accent-600, #12B5AF);
	text-decoration: none;
}
.elbin-wldrawer-buy.added {
	background: #2A2E33;
	color: var(--elbin-r2-header-text, #F4F4F5) !important;
	pointer-events: none;
}
.elbin-wldrawer-buy.added::after {
	content: " ✓";
}
/* WC після додавання вставляє лінк «View cart» — у панелі зайвий */
.elbin-wldrawer-item .added_to_cart {
	display: none !important;
}

/* Кнопка remove (✕) центрована по рядку, як у кошику; серце-стан не потрібен */
.elbin-cartdrawer--wl .elbin-wldrawer-item .remove svg {
	pointer-events: none;
}

/* Мобільний: мінімальна висота панелі обраного — вміст вантажиться AJAX-ом
   ПІСЛЯ відкриття, і панель відкривалась смужкою 79px (сама шапка), а з
   приходом рядків миттєво виростала («випадає згори», діагностика 02.07).
   Зі стабільним стартовим розміром рядки наповнюють панель зсередини. */
@media (max-width: 999.98px) {
	.elbin-cartdrawer--wl .elbin-cartdrawer__panel {
		min-height: min(50vh, 420px);
	}
}