/**
 * ELBIN Redesign 2 — Mobile Nav (M1+M2, <1000px)
 *
 * Хедер: лого (центр-вертикаль) + бургер (іконка). Дублів пошуку/кошика
 * у хедері НЕМАЄ — вони в нижньому меню. Бургер-offcanvas = інфо-лінки.
 * Нижнє меню .elbin-mbn = суцільне темне full-width. Каталог → drawer.
 */

@media (max-width: 999px) {

	/* ── Бар хедера: фіксовані 64px + центрування (Blocksy ставив 100px) ── */
	.ct-header [data-device="mobile"] [data-row="middle"],
	.ct-header [data-device="mobile"] [data-row="middle"] .ct-container-fluid,
	.ct-header [data-device="mobile"] [data-row="middle"] .ct-container {
		min-height: 64px !important;
		height: 64px !important;
		align-items: center;
		grid-template-rows: 64px !important;
	}

	.ct-header [data-device="mobile"] [data-row="middle"] [data-column] {
		min-height: 0 !important;
		height: 64px !important;
		grid-template-rows: 64px !important;
		align-items: center !important;
		align-content: center !important;
		align-self: center !important;
	}

	.ct-header [data-device="mobile"] .site-branding,
	.ct-header [data-device="mobile"] .site-logo-container {
		height: 64px !important;
		min-height: 0 !important;
		display: flex !important;
		align-items: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.ct-header [data-device="mobile"] .site-logo-container img,
	.ct-header [data-device="mobile"] .site-branding img {
		max-height: 42px !important;
		height: auto !important;
		width: auto;
		object-fit: contain;
	}

	/* ── Бургер: лише іконка (ховаємо текст «Меню»), білий на hover ── */
	.ct-header [data-device="mobile"] .ct-header-trigger {
		color: var(--elbin-r2-header-text-3, #A1A1A6);
	}
	.ct-header [data-device="mobile"] .ct-header-trigger:hover {
		color: var(--elbin-r2-header-text, #F4F4F5);
	}
	.ct-header [data-device="mobile"] .ct-header-trigger .ct-label {
		display: none;
	}

	/* ── ПОВНОЕКРАННИЙ ПОШУК (overlay) ── */
	.elbin-mobile-search__backdrop {
		display: none !important; /* у повноекранному не потрібен */
	}

	/* Скрол-лок під шторкою пошуку. `overflow:hidden` на body iOS Safari
	   ігнорує (сторінка під підказками прокручувалась «нескінченно»), тому
	   position:fixed. Безпечно саме тут: open() у mobile-nav.js спершу скролить
	   на 0 і повертає позицію в close(). */
	body.elbin-search-lock {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}

	.elbin-mobile-search {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* Зупиняється НАД нижнім меню (як каталог-drawer): меню лишається
		   видимим і клікабельним — можна перемкнутись на іншу панель без
		   закриття пошуку. env-ланцюжок = mobile-nav.css вище (iOS-фікс 02.07). */
		bottom: calc(60px + env(safe-area-inset-bottom, 0px));
		bottom: calc(60px + max(env(safe-area-inset-bottom, 0px) - 14px, 0px));
		z-index: 100000;
		flex-direction: column;
		/* Темний, у тон панелей (рішення 02.07: вся мобільна навігація темна) */
		background: #0D0D0D;
	}
	.elbin-mobile-search.is-open {
		display: flex;
	}

	/* Верхній рядок: поле + Скасувати (закріплений зверху) */
	.elbin-mobile-search__bar {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		padding-top: calc(12px + env(safe-area-inset-top, 0px));
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		background: #1A1A1A; /* = шапки панелей */
	}

	/* Поле = темна пігулка з іконкою зліва й очистити справа */
	.elbin-mobile-search__field {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 8px;
		height: 48px;
		padding: 0 10px 0 14px;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 12px;
	}
	.elbin-mobile-search__icon {
		flex-shrink: 0;
		color: var(--elbin-r2-accent, #1AD0CA);
	}

	/* FiboSearch усередині поля — прозорий, без рамки */
	.elbin-mobile-search__field .dgwt-wcas-search-wrapp,
	.elbin-mobile-search__field .dgwt-wcas-search-form,
	.elbin-mobile-search__field .dgwt-wcas-sf-wrapp {
		flex: 1;
		min-width: 0;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}
	.elbin-mobile-search__field input.dgwt-wcas-search-input {
		width: 100% !important;
		height: 46px !important;
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		font: 400 16px/1 var(--elbin-r2-font-ui);
		color: var(--elbin-r2-header-text, #F4F4F5) !important;
		box-shadow: none !important;
	}
	.elbin-mobile-search__field input.dgwt-wcas-search-input::placeholder {
		color: var(--elbin-r2-header-text-3, #A1A1A6);
	}
	.elbin-mobile-search__field .dgwt-wcas-search-submit,
	.elbin-mobile-search__field .dgwt-wcas-voice-search,
	.elbin-mobile-search__field .dgwt-wcas-close {
		display: none !important;
	}

	.elbin-mobile-search__clear {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: none;
		background: rgba(255, 255, 255, 0.12);
		border-radius: 999px;
		color: var(--elbin-r2-header-text-3, #A1A1A6);
		cursor: pointer;
		transition: color 0.15s ease, background 0.15s ease;
	}
	.elbin-mobile-search__clear[hidden] {
		display: none;
	}
	.elbin-mobile-search__clear:hover {
		color: var(--elbin-r2-header-text, #F4F4F5);
	}

	.elbin-mobile-search__cancel {
		flex-shrink: 0;
		padding: 6px 2px;
		border: none;
		background: none;
		color: var(--elbin-r2-accent, #1AD0CA);
		font: 600 14px/1 var(--elbin-r2-font-ui);
		cursor: pointer;
	}

	/* Результати FiboSearch — на весь екран нижче рядка, зі скролом.
	   FiboSearch чіпляє .dgwt-wcas-suggestions-wrapp до <body> (інлайн top=
	   низ поля, width=ширина інпута) → розпираємо на весь вьюпорт і даємо
	   висоту до низу екрана. Page прокручено до 0 при відкритті (JS) → top
	   коректний. На моб активний лише мобільний інстанс (десктоп прихований). */
	.dgwt-wcas-suggestions-wrapp {
		left: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		/* Стеля списку — до нижнього меню (60px + safe-area) плюс висота поля
		   зверху (60px), інакше останні підказки ховались під меню (−42px).
		   САМЕ max-height, не bottom: із фіксованою висотою контейнер не
		   стискається під короткий список і на iOS з клавіатурою під підказками
		   зяяла чорна порожнеча. */
		max-height: calc(100vh - 128px) !important;
		max-height: calc(100dvh - 128px) !important;
		/* Точну висоту (з поправкою на клавіатуру iOS) рахує syncSuggHeight()
		   у mobile-nav.js через visualViewport; фолбек вище — без JS. */
		max-height: var(--elbin-sugg-max, calc(100dvh - 128px)) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		/* Темні підказки під темний пошук (десктопний дропдаун не зачеплено —
		   правила в мобільному media-блоці) */
		background: #0D0D0D !important;
		border: none !important;
	}
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion {
		color: var(--elbin-r2-header-text, #F4F4F5) !important;
		border-color: rgba(255, 255, 255, 0.08) !important;
	}
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:hover,
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-selected {
		background: rgba(255, 255, 255, 0.06) !important;
	}
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st,
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st * {
		color: var(--elbin-r2-header-text, #F4F4F5) !important;
	}
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sd,
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sku {
		color: var(--elbin-r2-header-text-3, #A1A1A6) !important;
	}
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp,
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp * {
		color: var(--elbin-r2-accent, #1AD0CA) !important;
	}
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img {
		background: #fff;
		border-radius: 8px;
	}
	/* Рядок «Переглянути всі товари (N)» — мав світлий фон плагіна */
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more,
	.dgwt-wcas-suggestions-wrapp [class*="suggestion-more"],
	.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-more,
	.dgwt-wcas-suggestions-wrapp [class*="-more"] {
		background: #1A1A1A !important;
		color: var(--elbin-r2-accent, #1AD0CA) !important;
	}

	/* Порожній стан: популярні розділи (заповнює екран, скролиться) */
	.elbin-mobile-search__hints {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	}
	.elbin-mobile-search.has-query .elbin-mobile-search__hints {
		display: none;
	}
	.elbin-mobile-search__hints-title {
		font: 700 11px/1 var(--elbin-r2-font-mono, monospace);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--elbin-r2-header-text-3, #A1A1A6);
		margin-bottom: 12px;
	}
	.elbin-mobile-search__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.elbin-mobile-search__chip {
		display: inline-flex;
		align-items: center;
		padding: 9px 15px;
		border-radius: 999px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		background: rgba(255, 255, 255, 0.06);
		color: var(--elbin-r2-header-text, #F4F4F5);
		font: 500 13.5px/1 var(--elbin-r2-font-ui);
		text-decoration: none;
		transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	}
	.elbin-mobile-search__chip:active,
	.elbin-mobile-search__chip:hover {
		color: var(--elbin-r2-accent, #1AD0CA);
		border-color: var(--elbin-r2-accent, #1AD0CA);
		background: rgba(26, 208, 202, 0.12);
	}

	/* ── Білі смуги знизу: STICKY FOOTER ──
	   Причина: на коротких сторінках контент не заповнював екран, і між
	   футером та фіксованим нижнім меню (.elbin-mbn) світився світлий фон.
	   Рішення: #main-container тягнеться на весь екран (flex-колонка), main
	   росте й виштовхує футер донизу, а padding-bottom резервує місце під
	   нижнє меню — так футер ЗАВЖДИ прилягає до меню без просвіту.
	   html+body темні — на iOS overscroll-bounce показує фон BODY, а не html,
	   тож світлий body давав білі смуги ВГОРІ й ВНИЗУ при відтягуванні краю
	   (та в зоні padding-bottom нижче футера). Світлий фон контенту переносимо
	   на #main — усе видиме світле (хлібні крихти, H1, тулбар, сітка) всередині
	   нього; #header і #footer мають власний темний фон, тож не зачеплені. */
	html,
	body {
		/* Темний фон полотна = колір хедера/футера (#0D0D0D): гумовий
		   overscroll-bounce показує ЙОГО, а не білий body, тож смуг угорі/внизу
		   немає. Сам bounce НЕ вимикаємо (overscroll-behavior:none ламав
		   pull-to-refresh у Chrome). !important — Blocksy інлайнить body-фон у
		   <head> ПІСЛЯ нашого CSS (dynamic-styles), інакше перебиває. */
		background-color: #0D0D0D !important;
	}

	#main {
		background-color: #FAFBFC;
	}

	#main-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
		box-sizing: border-box;
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
	}

	#main-container > main {
		flex: 1 0 auto;
	}

	#main-container > #footer {
		flex-shrink: 0;
	}

	/* ── Бургер-тригер V5 «бірюзова кнопка».
	   Стиль Solid, фон #1AD0CA, іконка #063D2E, радіус 14px — усе НАТИВНО
	   через опції елемента-тригера в даних хедера (Customizer → Header →
	   Menu Trigger: Style / Background Color / Icon Color / Border Radius).
	   Жодних CSS-оверрайдів фону/кольору/радіуса. Тут — лише анімація
	   натискання, якої в темі немає, + місток кольору для нашої SVG.
	   SVG-іконка (3 лінії) — фільтр blocksy:header:trigger:svg у mobile-nav.php. ── */
	.ct-header-trigger {
		transition: transform 0.12s ease;
	}
	.ct-header-trigger:active {
		transform: scale(0.9);
	}
	.ct-header-trigger .ct-icon {
		fill: none !important; /* наша SVG стрічна (stroke), а не rect-fill Blocksy */
		width: 20px !important;
		height: 20px !important;
	}
	/* Наша SVG — лінії зі stroke; колоримо їх рідною змінною Icon Color
	   (Blocksy застосовує --theme-icon-color через fill, тому stroke лишався
	   б чорним). Прямо на line — надійніше за currentColor на svg. */
	.ct-header-trigger .ct-icon line {
		stroke: var(--theme-icon-color, currentColor);
	}

	/* ── Нижнє меню: суцільне темне, full-width, прилегле до низу ──
	   ТІЛЬКИ прості env()-формули: custom property з max(env()-12px) на
	   реальному iOS не резолвилась → var() ставали unset → меню/контейнери
	   панелей ламались (фото 02.07). Повний safe-area відступ — це
	   системний стандарт iPhone, приймаємо. */
	.elbin-mbn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		box-sizing: border-box;
		display: flex;
		align-items: stretch;
		/* Пара рядків = фолбек-ланцюжок: перший (повний env) працює скрізь;
		   другий (компактна safe-зона, −14px) перекриває там, де парситься
		   max(). ПРЯМО у властивості, БЕЗ custom property — env у змінній
		   на реальному iOS не резолвиться (граблі 02.07). */
		height: calc(60px + env(safe-area-inset-bottom, 0px));
		height: calc(60px + max(env(safe-area-inset-bottom, 0px) - 14px, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		padding-bottom: max(env(safe-area-inset-bottom, 0px) - 14px, 0px);
		background: #0D0D0D;
		border-top: 1px solid var(--elbin-r2-header-line, #2C2C2C);
	}

	/* Пункт з відкритою панеллю — підсвічений (ставить JS по події elbin:sheet) */
	.elbin-mbn__item.is-open {
		color: var(--elbin-r2-accent, #1AD0CA);
	}

	.elbin-mbn__item {
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		border: none;
		background: transparent;
		cursor: pointer;
		color: var(--elbin-r2-header-text-3, #A1A1A6);
		font: 600 10px/1 var(--elbin-r2-font-ui);
		letter-spacing: 0.01em;
		text-decoration: none;
		transition: color 0.15s ease;
	}

	.elbin-mbn__item svg {
		width: 22px;
		height: 22px;
	}

	/* Активна (поточна сторінка) або з відкритою панеллю вкладка = фірмовий
	   колір. Білого :hover НЕ вводимо: меню тач-only (десктоп — display:none),
	   а sticky-hover на тачі перебивав is-open і давав мерехтіння акцент↔білий
	   при відкритті/закритті (гоча 06.07). */
	.elbin-mbn__item.is-active {
		color: var(--elbin-r2-accent, #1AD0CA);
	}

	.elbin-mbn__badge,
	.elbin-mbn__wl-badge {
		position: absolute;
		top: 4px;
		left: calc(50% + 4px);
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		box-sizing: border-box;
		border-radius: 999px;
		background: var(--elbin-r2-accent, #1AD0CA);
		color: var(--elbin-r2-ink-on-accent, #063D2E);
		font: 800 9px/16px var(--elbin-r2-font-mono);
		text-align: center;
		box-shadow: 0 0 0 2px #0D0D0D;
	}
	.elbin-mbn__badge[hidden],
	.elbin-mbn__wl-badge[hidden] {
		display: none;
	}

	/* Падінг низу футера, щоб нижнє меню не перекривало контент */
	.ct-footer {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* Фон панелі бургера (#0D0D0D) — тепер НАТИВНО через Customizer
   (Header → Offcanvas → Background, значення в header_placements). */

/* ── Бургер-offcanvas: section-cards інфо + контакти + акаунт (темна панель
   Blocksy; серверний шаблон #elbin-burger-src переносить JS). Словник —
   картки чекауту + рядки каталог-дровера + контакти футера. ── */
.elbin-mnav {
	padding: 4px 0 24px;
}

.elbin-mnav__tagline {
	margin: 0 0 18px;
	font: 500 13px/1.4 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}

.elbin-mnav__eyebrow {
	margin: 24px 0 12px;
	font: 700 11px/1 var(--elbin-r2-font-mono, monospace);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-mnav > .elbin-mnav__eyebrow:first-child {
	margin-top: 4px;
}

/* Section-cards (як чекаут) */
.elbin-mnav__card,
.elbin-mnav__account {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--elbin-r2-header-line, #2C2C2C);
	color: var(--elbin-r2-header-text, #F4F4F5);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.elbin-mnav__card + .elbin-mnav__card {
	margin-top: 10px;
}
.elbin-mnav__account {
	margin-top: 24px;
	background: transparent;
}
.elbin-mnav__card:active,
.elbin-mnav__account:active {
	transform: scale(0.99);
}
.elbin-mnav__card:hover,
.elbin-mnav__account:hover {
	border-color: var(--elbin-r2-accent, #1AD0CA);
	background: rgba(26, 208, 202, 0.08);
}

.elbin-mnav__ico {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	color: var(--elbin-r2-accent, #1AD0CA);
	background: rgba(26, 208, 202, 0.10);
	border: 1px solid rgba(26, 208, 202, 0.22);
}
.elbin-mnav__ico svg {
	width: 22px;
	height: 22px;
	display: block;
}

.elbin-mnav__txt {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.elbin-mnav__name {
	font: 700 15px/1.2 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text, #F4F4F5);
	transition: color 0.15s ease;
}
.elbin-mnav__account .elbin-mnav__name {
	flex: 1;
}
.elbin-mnav__desc {
	font: 500 12.5px/1.3 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-mnav__card:hover .elbin-mnav__name,
.elbin-mnav__account:hover .elbin-mnav__name {
	color: var(--elbin-r2-accent, #1AD0CA);
}
.elbin-mnav__chev {
	flex-shrink: 0;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-mnav__chev svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Контакт-блок (словник футера) */
.elbin-mnav__help {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.elbin-mnav__contact {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--elbin-r2-header-text, #F4F4F5);
}
.elbin-mnav__ci {
	width: 20px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	color: var(--elbin-r2-accent, #1AD0CA);
}
.elbin-mnav__ci svg {
	width: 18px;
	height: 18px;
	display: block;
}
.elbin-mnav__cv {
	font: 500 14px/1.3 var(--elbin-r2-font-ui);
	color: var(--elbin-r2-header-text, #F4F4F5);
}
.elbin-mnav__cv.sf-mono {
	font-family: var(--elbin-r2-font-mono, monospace);
	font-weight: 600;
}
a.elbin-mnav__contact:active .elbin-mnav__cv {
	color: var(--elbin-r2-accent, #1AD0CA);
}

.elbin-mnav__tg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--elbin-r2-accent, #1AD0CA);
	color: var(--elbin-r2-ink-on-accent, #063D2E);
	font: 700 14px/1 var(--elbin-r2-font-ui);
	text-decoration: none;
	transition: background 0.15s ease;
}
.elbin-mnav__tg svg {
	width: 18px;
	height: 18px;
	display: block;
}
.elbin-mnav__tg:active {
	background: var(--elbin-r2-accent-700, #0E9994);
}

/* ── Каталог: BOTTOM-SHEET (висувається знизу, світлий) ── */
.elbin-catdrawer {
	position: fixed;
	inset: 0;
	/* Панель відкривається НАД нижнім меню: меню лишається видимим і
	   клікабельним (перемикання панелей без закриття) — 02.07.
	   ПРЯМИЙ env() без var: інвалідна custom property робила bottom:unset
	   і каталог розтягувався на весь екран (фото з iPhone 02.07).
	   overflow:hidden — щоб панель у стартовому translateY(100%) не
	   проїжджала поверх меню при анімації. */
	bottom: calc(60px + env(safe-area-inset-bottom, 0px));
	bottom: calc(60px + max(env(safe-area-inset-bottom, 0px) - 14px, 0px));
	overflow: hidden;
	z-index: 300;
}
.elbin-catdrawer[hidden] {
	display: none;
}

.elbin-catdrawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.elbin-catdrawer.is-open .elbin-catdrawer__backdrop {
	opacity: 1;
}

.elbin-catdrawer__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Висота керована ручкою __handle (спільна змінна, mobile-nav.js).
	   min/max — межі перетягування. */
	height: var(--elbin-sheet-h, 55vh);
	min-height: 30vh;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	/* Темна панель у тон інших bottom sheet'ів (кошик/обране/акаунт) —
	   рішення 02.07: рама сайту темна, каталог був єдиним світлим. */
	background: #0D0D0D;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.elbin-catdrawer.is-open .elbin-catdrawer__panel {
	transform: translateY(0);
}

/* Ручка = ресайз висоти шторки (спільна для всіх шторок). Сам елемент —
   широка хіт-зона (легко вхопити пальцем), видима смужка малюється ::after. */
.elbin-catdrawer__handle {
	flex-shrink: 0;
	width: 100%;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ns-resize;
	touch-action: none;
}
.elbin-catdrawer__handle::after {
	content: "";
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.25);
}

.elbin-catdrawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 20px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}
.elbin-catdrawer__title {
	font: 800 18px/1 var(--elbin-r2-font-ui);
	letter-spacing: -0.01em;
	color: var(--elbin-r2-header-text, #F4F4F5);
}
.elbin-catdrawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -4px -8px -4px 0;
	border: none;
	background: transparent;
	border-radius: 10px;
	color: var(--elbin-r2-header-text-3, #A1A1A6);
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}
.elbin-catdrawer__close:hover {
	color: var(--elbin-r2-header-text, #F4F4F5);
	background: rgba(255, 255, 255, 0.1);
}

.elbin-catdrawer__nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px 12px calc(16px + env(safe-area-inset-bottom, 0px));
}
.elbin-catdrawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.elbin-catdrawer__nav li a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 10px;
	border-radius: 12px;
	color: var(--elbin-r2-header-text, #F4F4F5);
	text-decoration: none;
	transition: background 0.15s ease;
}
.elbin-catdrawer__nav li a:hover,
.elbin-catdrawer__nav li a:active {
	background: rgba(255, 255, 255, 0.06);
}

.elbin-catdrawer__ico {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* Кольоровий варіант: гліф у кольорі розділу (--cat-color), коло —
	   світлий тон того ж кольору. Рядки без color-mix — фолбек для старих
	   браузерів (Chrome <111 / Safari <16.2 / FF <113): світле коло, щоб
	   іконка не втратила фон на темній панелі. */
	color: var(--cat-color, var(--elbin-r2-text, #1a1a1a));
	background: #F5F6F7;
	border: 1px solid #E4E6E9;
	background: color-mix(in srgb, var(--cat-color, #8b95a1) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--cat-color, #8b95a1) 28%, #fff);
}

.elbin-catdrawer__svg {
	display: block;
	width: 24px;
	height: 24px;
}

.elbin-catdrawer__txt {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.elbin-catdrawer__name {
	font: 600 15px/1.25 var(--elbin-r2-font-ui);
}
.elbin-catdrawer__count {
	font: 500 12px/1 var(--elbin-r2-font-mono, monospace);
	color: var(--elbin-r2-header-text-3, #A1A1A6);
}
.elbin-catdrawer__chev {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.35);
}

/* ── Drill-down: рівні, кнопка-drill, «Всі товари», «Назад», анімація ── */

/* приховані рівні (JS керує атрибутом hidden) */
.elbin-catdrawer__list[hidden] {
	display: none;
}

/* кнопка-drill виглядає як пункт-посилання */
.elbin-catdrawer__nav li button.elbin-catdrawer__drill {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 11px 10px;
	border: none;
	background: none;
	border-radius: 12px;
	color: var(--elbin-r2-header-text, #F4F4F5);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}
.elbin-catdrawer__nav li button.elbin-catdrawer__drill:hover,
.elbin-catdrawer__nav li button.elbin-catdrawer__drill:active {
	background: rgba(255, 255, 255, 0.06);
}

/* «Всі товари в X» — акцентний пункт зверху рівня */
.elbin-catdrawer__all {
	margin-bottom: 2px;
}
.elbin-catdrawer__ico--all {
	background: rgba(26, 208, 202, 0.14);
	color: var(--elbin-r2-accent, #1AD0CA);
}
.elbin-catdrawer__all .elbin-catdrawer__name {
	color: var(--elbin-r2-accent, #1AD0CA);
	font-weight: 700;
}

/* підкатегорії: фото терму в круглій іконці (як на ПК) */
.elbin-catdrawer__ico--photo {
	background: #fff;
	overflow: hidden;
}
.elbin-catdrawer__ico--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* кнопка «Назад» у шапці */
.elbin-catdrawer__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -4px 4px -4px -8px;
	border: none;
	background: transparent;
	border-radius: 10px;
	color: var(--elbin-r2-header-text, #F4F4F5);
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease;
}
.elbin-catdrawer__back:hover {
	background: rgba(255, 255, 255, 0.1);
}
.elbin-catdrawer__back[hidden] {
	display: none;
}
/* title заповнює простір → завжди зліва (біля «Назад»), close справа */
.elbin-catdrawer__title {
	flex: 1;
}

/* слайд-поява нового рівня */
@media (prefers-reduced-motion: no-preference) {
	.elbin-catdrawer__list.is-slidein {
		animation: elbin-catdrawer-slidein 0.22s ease;
	}
}
@keyframes elbin-catdrawer-slidein {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Десктоп: мобільні елементи завжди приховані ── */
@media (min-width: 1000px) {

	.elbin-mobile-search,
	.elbin-mobile-search__backdrop,
	.elbin-mbn,
	.elbin-catdrawer {
		display: none !important;
	}
}

/* Кнопка «вгору» на мобільному — над нижнім меню (env-aware: на iPhone
   меню вище за 60px через safe-area, фіксований margin давав перекриття);
   на сторінці товару вище підіймає single.css (там ще sticky-бар). */
@media (max-width: 999px) {
	.ct-back-to-top {
		margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
		margin-bottom: calc(60px + max(env(safe-area-inset-bottom, 0px) - 14px, 0px));
	}
}