/* ============================================================
   ALEX-PC — каркас: шапка, mega menu, футер, мобільна навігація
   ============================================================ */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

/* --- Верхня смуга --- */

.topbar {
	background: var(--color-bg-dark);
	color: var(--c-gray-300);
	font-size: var(--fs-sm);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: var(--topbar-h);
}

.topbar__tagline {
	color: var(--c-gray-400);
	white-space: nowrap;
}

.topbar__nav {
	margin-inline: auto;
}

.topbar__menu {
	display: flex;
	gap: var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbar__menu a {
	color: var(--c-gray-300);
	transition: color var(--t-fast) var(--ease);
}

.topbar__menu a:hover {
	color: #fff;
}

.topbar__contacts {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin-left: auto;
}

.topbar__phone,
.topbar__telegram {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: #fff;
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.topbar__phone .icon,
.topbar__telegram .icon {
	width: 14px;
	height: 14px;
	color: var(--c-blue-500);
}

/* Курс долара у верхній смузі.

   Магазин закуповує товар у валюті, тож курс — це фактично пояснення
   цінника. Ставимо його першим у блоці контактів, але на телефоні
   ховаємо: там смуга і так тісна, а телефон магазину важливіший. */

.topbar__rate {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: var(--fs-sm);
	white-space: nowrap;
	cursor: default;
}

.topbar__rate-label {
	color: var(--c-gray-300);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.topbar__rate-value {
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	.topbar__rate-label { display: none; }
}

@media (max-width: 400px) {
	.topbar__rate { display: none; }
}

.topbar__lang {
	position: relative;
}

.lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--c-gray-300);
	font-size: var(--fs-sm);
}

.lang__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 72px;
	background: var(--color-bg);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	list-style: none;
	margin: 0;
	padding: var(--sp-1);
	z-index: var(--z-dropdown);
}

.lang__menu a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.lang__menu a:hover,
.lang__menu a.is-active {
	background: var(--color-bg-muted);
}

@media (max-width: 767px) {
	.topbar__inner {
		justify-content: center;
	}

	.topbar__contacts {
		margin-left: 0;
		gap: var(--sp-4);
	}
}

/* --- Шапка --- */

.header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--t-base) var(--ease);
}

.header.is-stuck {
	box-shadow: var(--shadow-md);
}

.header__inner {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: var(--sp-4);
	min-height: var(--header-h);
}

.header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0 8px;
}

.header__burger span {
	display: block;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

/* --- Логотип --- */

.logo {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	color: var(--color-text);
}

.logo__name {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
}

.logo__tagline {
	font-size: 10px;
	font-weight: var(--fw-medium);
	letter-spacing: .06em;
	color: var(--color-text-muted);
	text-transform: uppercase;
	margin-top: 2px;
}

/* У шапці телефона слоган нечитабельний і з'їдає місце під пошук.
   У футері він лишається — там є де розвернутися. */
@media (max-width: 575px) {
	.header .logo__tagline {
		display: none;
	}
}

.logo__img {
	max-height: 44px;
	width: auto;
}

.logo--footer .logo__name,
.logo--footer .logo__tagline {
	color: #fff;
}

.logo--footer .logo__tagline {
	color: var(--c-gray-400);
}

/* --- Кнопка каталогу --- */

.header__catalog {
	padding-inline: var(--sp-5);
}

.header__catalog[aria-expanded="true"] {
	background: var(--color-accent-hover);
}

/* --- Пошук --- */

.header__search {
	position: relative;
	min-width: 0;
}

/* Поле пошуку побудоване як рамка з елементами всередині, а не як
   інпут із абсолютними іконками поверх нього.

   Раніше лупа лежала абсолютно, а місце під неї відводив padding-left
   у 44px. Щойно щось змінювало розмір — збільшений системний шрифт на
   телефоні, інша мова інтерфейсу, зум сторінки — число 44 переставало
   відповідати реальній ширині іконки, і лупа лізла на текст. Тепер
   ширину тримає сам flex: іконка займає рівно стільки, скільки займає,
   і текст починається після неї за будь-яких умов. */

.search-form__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	height: 44px;
	padding: 0 4px 0 var(--sp-3);
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	background: var(--color-bg-soft);
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.search-form__field:focus-within {
	background: var(--color-bg);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-focus);
}

.search-form__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	color: var(--color-text-muted);
	pointer-events: none;
}

.search-form__icon .icon {
	width: 20px;
	height: 20px;
}

.search-form__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: var(--fs-base);
	appearance: none;
}

.search-form__input:focus {
	outline: none;
	box-shadow: none;
}

/* Хрестик «очистити» в Chrome дублював би нашу кнопку. */
.search-form__input::-webkit-search-cancel-button {
	display: none;
}

.search-form__clear {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--color-bg-muted);
	color: var(--color-text-soft);
	font-size: 16px;
	line-height: 1;
}

.search-form__submit {
	flex: 0 0 auto;
	width: 44px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	background: var(--color-accent);
	color: #fff;
	transition: background var(--t-fast) var(--ease);
}

/* На вузьких екранах декоративна лупа зліва місця не варта: поле й так
   підписане плейсхолдером, а кнопка пошуку лишається справа. */
@media (max-width: 420px) {
	.search-form__icon {
		display: none;
	}
}

.search-form__submit:hover {
	background: var(--color-accent-hover);
}

/* --- Підказки пошуку --- */

/* Форма пошуку сама собі точка відліку.

   Це не косметика, а лікування конкретної поломки. Підказки лежать
   абсолютно й позиціонуються від найближчого предка з position. У шапці
   таким предком був .header__search — і все працювало. А в
   повноекранному мобільному пошуку найближчим предком виявлявся сам
   .mobile-search, у якого position: fixed та inset: 0, тобто висота на
   весь екран. top: 100% від нього — це 8 пікселів НИЖЧЕ нижнього краю
   екрана: покупець друкував, підказки чесно малювалися — за межами
   видимої області. Виглядало це як «сайт поїхав униз, треба
   прокручувати». Тепер відліком завжди є сама форма. */
.search-form {
	position: relative;
}

/* Блок називається search-drop, а не search-results, і перейменовувати
   його назад не можна.

   body_class() дописує до <body> клас search-results на кожній сторінці
   результатів пошуку. Поки цей випадний список називався так само,
   правило нижче потрапляло в сам <body>: сторінка пошуку діставала
   position: absolute, top: calc(100% + 8px) і max-height 520px. Відлік
   100% ішов від вікна — тобто 812 + 8 = 820 пікселів порожнечі згори,
   а весь сайт стискався у віконце 520 пікселів із власною прокруткою.
   На телефоні це виглядало так, ніби сторінка не завантажилась.

   Той самий тип помилки вже був із .checkout — класом сторінки та
   класом кнопки WooCommerce. Службові класи WordPress і WooCommerce
   (search-results, archive, single, page, blog, home, paged, checkout,
   cart, error404) не можна брати як імена власних блоків. */
.search-drop {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	/* Дотягнувши список до кінця, палець не повинен починати гортати
	   сторінку під ним. */
	overscroll-behavior: contain;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-xl);
	z-index: var(--z-dropdown);
}

.search-drop__group + .search-drop__group {
	border-top: 1px solid var(--color-border);
}

.search-drop__title {
	padding: var(--sp-3) var(--sp-4) var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-text-muted);
}

.search-drop__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-4);
	color: var(--color-text);
	transition: background var(--t-fast) var(--ease);
}

.search-drop__item:hover,
.search-drop__item.is-highlighted {
	background: var(--color-bg-soft);
}

.search-drop__img {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: var(--r-sm);
	background: var(--color-bg-soft);
}

.search-drop__info {
	flex: 1;
	min-width: 0;
}

.search-drop__name {
	display: block;
	font-size: var(--fs-base);
	line-height: 1.3;
	margin-bottom: 2px;
}

.search-drop__meta {
	display: flex;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
}

.search-drop__price {
	font-weight: var(--fw-semibold);
}

.search-drop__all {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	text-align: center;
	font-weight: var(--fw-medium);
	border-top: 1px solid var(--color-border);
	background: var(--color-bg-soft);
}

.search-drop__empty {
	padding: var(--sp-8) var(--sp-4);
	text-align: center;
	color: var(--color-text-soft);
}

/* --- Дії користувача --- */

.header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.header__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-md);
	color: var(--color-text-soft);
	font-size: var(--fs-xs);
	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.header__action:hover {
	color: var(--color-accent);
	background: var(--color-bg-soft);
}

.header__action-icon {
	position: relative;
	display: grid;
	place-items: center;
}

.header__counter {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	border-radius: var(--r-full);
	background: var(--color-accent);
	color: #fff;
	font-size: 10px;
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.header__counter.is-empty {
	background: var(--color-border-strong);
}

.header__action--cart .header__counter {
	background: var(--color-danger);
}

.header__action--cart .header__counter.is-empty {
	background: var(--color-border-strong);
}

@media (max-width: 1023px) {
	.header__inner {
		grid-template-columns: auto 1fr auto;
		gap: var(--sp-3);
	}

	.header__burger {
		display: flex;
	}

	.header__search {
		grid-column: 1 / -1;
		order: 3;
		padding-bottom: var(--sp-3);
	}
}

@media (max-width: 767px) {
	.header__action-label {
		display: none;
	}

	.header__action {
		padding: var(--sp-2);
	}
}

/* --- Mega Menu --- */

.mega {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-xl);
	z-index: var(--z-dropdown);
	animation: alexpc-slide-down var(--t-base) var(--ease-out);
}

@keyframes alexpc-slide-down {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

.mega__inner {
	display: grid;
	grid-template-columns: 260px 1fr 240px;
	gap: var(--sp-6);
	padding-block: var(--sp-6);
	align-items: start;
}

.mega__list {
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 0;
	border-right: 1px solid var(--color-border);
	padding-right: var(--sp-4);
}

.mega__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-3);
	border-radius: var(--r-md);
	font-size: var(--fs-base);
	color: var(--color-text);
	text-align: left;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.mega__link:hover,
.mega__link.is-active {
	background: var(--color-accent-soft);
	color: var(--color-accent);
}

.mega__link img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: var(--r-sm);
}

.mega__dot {
	width: 28px;
	height: 28px;
	border-radius: var(--r-sm);
	background: var(--color-accent-soft);
	color: var(--color-accent);
	flex-shrink: 0;
	display: grid;
	place-items: center;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.mega__arrow {
	margin-left: auto;
	color: var(--color-text-muted);
}

.mega__quick {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding-right: var(--sp-4);
}

.mega__quick-link {
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-md);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: var(--color-text-soft);
}

.mega__quick-link:hover {
	background: var(--color-bg-soft);
}

.mega__quick-link--sale {
	color: var(--color-danger);
}

.mega__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--color-border);
}

.mega__panel-title {
	margin: 0;
	font-size: var(--fs-lg);
}

.mega__panel-all {
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.mega__sub {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-1) var(--sp-4);
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 0;
}

.mega__sub a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: var(--sp-2) 0;
	font-size: var(--fs-base);
	color: var(--color-text-soft);
}

.mega__sub a:hover {
	color: var(--color-accent);
}

.mega__count {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.mega__brands-title {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-3);
}

.mega__banner img {
	border-radius: var(--r-lg);
	width: 100%;
}

.mega__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .3);
	z-index: calc(var(--z-dropdown) - 1);
}

@media (max-width: 1200px) {
	.mega__inner { grid-template-columns: 240px 1fr; }
	.mega__banner { display: none; }
}

@media (max-width: 900px) {
	.mega { display: none; }
}

/* --- Off-canvas: мобільне меню та міні-кошик --- */

.overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .45);
	z-index: var(--z-overlay);
	animation: alexpc-fade var(--t-base) var(--ease);
}

@keyframes alexpc-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mobile-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(400px, 88vw);
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	z-index: calc(var(--z-overlay) + 1);
	box-shadow: var(--shadow-xl);
	animation: alexpc-slide-left var(--t-base) var(--ease-out);
}

/* Кошик — вікно по центру, а не шторка збоку.

   Шторка добре працює, поки в ній лише список: вона вузька й не заважає
   сторінці. Але щойно в кошику з'явилися прогрес доставки, пропозиція до
   товару й добірка порад, 400 пікселів перестало вистачати — картки
   ставали в стовпчик, і кошик перетворювався на довгу стрічку.

   Вікно по центру ширше, весь вміст видно одразу, а список товарів
   прокручується всередині: підсумок і кнопка оформлення завжди на очах. */
.mini-cart {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-overlay) + 1);
	display: grid;
	place-items: center;
	padding: var(--sp-4);
	overflow-y: auto;
}

.mini-cart__window {
	display: flex;
	flex-direction: column;
	width: min(620px, 100%);
	max-height: min(88dvh, 860px);
	background: var(--color-bg);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-xl);
	overflow: hidden;
	animation: alexpc-cart-in var(--t-base) var(--ease-out);
}

@keyframes alexpc-cart-in {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* flex: 1 обов'язковий: без нього тіло не росте на всю висоту вікна,
   і весь простір забирає підвал, а список товарів стискається до
   півтора рядка — покупець бачить обрізану назву замість свого
   замовлення. */
.mini-cart__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Прокручується саме список із порадами, а не все вікно: підсумок
   і кнопки лишаються на місці. */
.mini-cart__scroll {
	flex: 1;
	/* Не нуль: список має лишатися списком. Підвал виріс — там і
	   прогрес безкоштовної доставки, і дати, — і за min-height: 0 він
	   забирав усе, лишаючи товарам смужку в один рядок. */
	min-height: 140px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--sp-5);
	-webkit-overflow-scrolling: touch;
}

@keyframes alexpc-slide-left {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

@keyframes alexpc-slide-right {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

.mobile-menu__head,
.mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
}

.mobile-menu__close,
.mini-cart__close {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: var(--r-md);
	background: var(--color-bg-muted);
	font-size: 22px;
	line-height: 1;
	color: var(--color-text-soft);
}

.mini-cart__title {
	margin: 0;
	font-size: var(--fs-lg);
}

.mobile-menu__nav {
	flex: 1;
	overflow-y: auto;
	padding: var(--sp-4);
	-webkit-overflow-scrolling: touch;
}

.mobile-menu__device {
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-accent-soft);
	font-size: var(--fs-base);
}

.mobile-menu__device-label {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-text-soft);
	margin-bottom: 2px;
}

.mobile-menu__title {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-text-muted);
	margin: var(--sp-4) 0 var(--sp-2);
}

.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu__item {
	position: relative;
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu__item > a,
.mobile-menu__list--plain li a {
	display: block;
	padding: var(--sp-3) 0;
	padding-right: 44px;
	color: var(--color-text);
	font-size: var(--fs-md);
}

.mobile-menu__expand {
	position: absolute;
	top: 4px;
	right: 0;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: var(--r-md);
	background: var(--color-bg-muted);
	color: var(--color-text-soft);
	font-size: 18px;
}

.mobile-menu__expand[aria-expanded="true"] {
	background: var(--color-accent);
	color: #fff;
}

.mobile-menu__sub {
	list-style: none;
	margin: 0 0 var(--sp-3);
	padding: 0 0 0 var(--sp-4);
	border-left: 2px solid var(--color-border);
}

.mobile-menu__sub a {
	display: block;
	padding: var(--sp-2) 0;
	font-size: var(--fs-base);
	color: var(--color-text-soft);
}

.mobile-menu__foot {
	flex-shrink: 0;
	padding: var(--sp-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	align-items: center;
}

.mobile-menu__phone {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
}

/* --- Мобільний повноекранний пошук --- */

.mobile-search {
	position: fixed;
	inset: 0;
	background: var(--color-bg);
	z-index: var(--z-modal);
	padding: var(--sp-4);
}

.mobile-search__head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.mobile-search__head .search-form {
	flex: 1;
	min-width: 0;
}

/* У повноекранному пошуку підказки прив'язані просто до екрана, а не до
   поля: поле ділить рядок із кнопкою «Скасувати», і список виходив
   вужчим за екран та обрізав назви товарів. Відступ зверху — це верхній
   padding оверлея плюс висота поля плюс 8 пікселів просвіту.

   100dvh замість 70vh: коли виходить екранна клавіатура, vh лишається
   рахуватися від повної висоти екрана й не знає, що половину вже
   закрито, — нижня частина списку опинялася під клавіатурою. */
.mobile-search .search-drop {
	position: fixed;
	top: calc(var(--sp-4) + 44px + 8px);
	left: var(--sp-4);
	right: var(--sp-4);
	max-height: calc(100dvh - var(--sp-4) - 44px - 8px - var(--sp-4));
}

.mobile-search__cancel {
	font-size: var(--fs-base);
	color: var(--color-accent);
	white-space: nowrap;
}

/* --- Нижня навігація --- */

.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: var(--z-sticky);
}

.bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: var(--bottom-nav-h);
	color: var(--color-text-soft);
	/* 10px нечитабельно на екранах із високою щільністю; 11px — мінімум,
	   який ще вміщає «Порівняння» в один рядок на 360px. */
	font-size: 11px;
	line-height: 1.2;
	transition: color var(--t-fast) var(--ease);
}

.bottom-nav__item.is-active {
	color: var(--color-accent);
}

.bottom-nav__icon {
	position: relative;
	display: grid;
	place-items: center;
}

.bottom-nav__badge {
	position: absolute;
	top: -5px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	border-radius: var(--r-full);
	background: var(--color-danger);
	color: #fff;
	font-size: 9px;
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.bottom-nav__badge.is-empty {
	display: none;
}

@media (min-width: 768px) {
	.bottom-nav { display: none; }
	body.has-alexpc-bottom-nav { padding-bottom: 0; }
}

@media (max-width: 767px) {
	body.has-alexpc-bottom-nav {
		padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
	}
}

/* --- Newsletter --- */

.newsletter {
	background: var(--color-bg-dark);
	color: #fff;
	padding-block: var(--sp-8);
}

.newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	flex-wrap: wrap;
}

.newsletter__title {
	margin: 0 0 var(--sp-1);
	color: #fff;
	font-size: var(--fs-xl);
}

.newsletter__sub {
	margin: 0;
	color: var(--c-gray-400);
	font-size: var(--fs-base);
}

.newsletter__form {
	position: relative;
	display: flex;
	gap: var(--sp-2);
	flex: 1;
	max-width: 480px;
	min-width: 280px;
}

.newsletter__input {
	flex: 1;
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .15);
	color: #fff;
}

.newsletter__input::placeholder {
	color: var(--c-gray-400);
}

.newsletter__input:focus {
	background: rgba(255, 255, 255, .12);
	border-color: var(--c-blue-500);
	box-shadow: none;
}

.newsletter__message {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-green-500);
}

.newsletter__message.is-error {
	color: var(--c-red-500);
}

/* --- Футер --- */

.footer {
	background: var(--color-bg-dark);
	color: var(--c-gray-400);
	padding-top: var(--sp-12);
	font-size: var(--fs-base);
}

.footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--sp-8);
	padding-bottom: var(--sp-10);
}

.footer__about {
	margin: var(--sp-4) 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	max-width: 32ch;
}

.footer__title {
	margin: 0 0 var(--sp-4);
	color: #fff;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
}

.footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.footer__menu a {
	color: var(--c-gray-400);
	font-size: var(--fs-base);
	transition: color var(--t-fast) var(--ease);
}

.footer__menu a:hover {
	color: #fff;
}

.footer__socials {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.social {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	transition: background var(--t-fast) var(--ease);
}

.social:hover {
	background: var(--color-accent);
	color: #fff;
}

.footer__phone {
	display: block;
	color: #fff;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--sp-2);
}

.footer__email {
	display: block;
	color: var(--c-gray-400);
	margin-bottom: var(--sp-2);
}

.footer__schedule {
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-4);
}

.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, .08);
	flex-wrap: wrap;
	font-size: var(--fs-sm);
}

.footer__copy {
	margin: 0;
}

.footer__payments {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.footer__payments-label {
	color: var(--c-gray-500);
}

.payment-icon {
	padding: 4px 10px;
	background: rgba(255, 255, 255, .1);
	border-radius: var(--r-sm);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: #fff;
}

@media (max-width: 900px) {
	.footer__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-6);
	}
}

@media (max-width: 560px) {
	.footer__top {
		grid-template-columns: 1fr;
	}

	.footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.newsletter__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.newsletter__form {
		max-width: none;
	}
}

/* ============================================================
   Міні-кошик: список товарів і підвал із кнопками
   ------------------------------------------------------------
   Розмітку дає woocommerce/cart/mini-cart.php. Без цих правил
   WooCommerce показував маркований список і два злитих посилання.
   ============================================================ */

.mini-cart__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-4);
}

.mini-cart__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 32px;
	gap: var(--sp-3);
	align-items: start;
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--color-border);
}

/* Лічильник кількості й сума рядка — на одній лінії, сума праворуч. */
.mini-cart__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-2);
	flex-wrap: wrap;
}

.mini-cart__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.mini-cart__media {
	width: 64px;
	height: 64px;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--color-bg-soft);
	display: grid;
	place-items: center;
}

.mini-cart__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mini-cart__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mini-cart__name {
	font-size: var(--fs-sm);
	line-height: var(--lh-tight);
	font-weight: var(--fw-medium);
}

.mini-cart__name a {
	color: var(--color-text);
}

.mini-cart__name a:hover {
	color: var(--color-accent);
}

.mini-cart__meta {
	font-size: var(--fs-xs);
	color: var(--color-text-soft);
}

.mini-cart__price {
	font-size: var(--fs-sm);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

/* Хрестик має бути зоною, у яку можна влучити пальцем. */
.mini-cart__remove {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	font-size: 20px;
	line-height: 1;
	color: var(--color-text-muted);
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.mini-cart__remove:hover {
	background: var(--color-bg-muted);
	color: var(--color-danger);
}

.mini-cart__foot {
	flex-shrink: 0;
	padding: var(--sp-5);
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
}

.mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-base);
	color: var(--color-text-soft);
}

.mini-cart__total strong {
	font-size: var(--fs-xl);
	color: var(--color-text);
}

/* У широкому вікні кнопки стають поруч: «продовжити» ліворуч,
   «оформити» праворуч і помітніша. На вузькому екрані — одна під одною. */
.mini-cart__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
}

/* Однакова висота в обох кнопок і зрозуміла ціль для пальця.
   Висота задана мінімумом, а не відступами: так кнопка не з'їжджає,
   якщо в якійсь мові напис переноситься на два рядки. */
.mini-cart__actions .btn {
	width: 100%;
	min-height: 48px;
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 520px) {
	/* Одна під одною, головна дія лишається НИЖНЬОЮ: на телефоні низ
	   екрана ближчий до великого пальця, ніж верх. */
	.mini-cart__actions {
		grid-template-columns: 1fr;
		gap: var(--sp-2);
	}
}

.mini-cart__empty {
	text-align: center;
	padding: var(--sp-8) var(--sp-4);
	color: var(--color-text-soft);
}

.mini-cart__empty-icon {
	display: inline-flex;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-3);
}

/* Кнопка закриття мега-меню.
   Меню розкривається на всю ширину під шапкою і на довгих списках займає
   майже весь екран. Клавішу Escape і клік по тлу покупець не вгадає —
   тому потрібна явна кнопка. */
.mega__inner {
	position: relative;
}

.mega__close {
	position: absolute;
	top: var(--sp-3);
	right: var(--gutter);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	padding: 0 var(--sp-3);
	border-radius: var(--r-md);
	background: var(--color-bg-soft);
	color: var(--color-text-soft);
	font-size: var(--fs-sm);
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.mega__close:hover {
	background: var(--color-bg-muted);
	color: var(--color-text);
}

/* Щоб кнопка не наїжджала на вміст правої колонки. */
.mega__panels,
.mega__banner {
	padding-top: var(--sp-6);
}

@media (max-width: 767px) {
	.mega__close {
		top: var(--sp-2);
		right: var(--sp-3);
	}

	.mega__close-text {
		display: none;
	}
}

/* Довгий каталог має прокручуватися всередині меню, а не тягнути сторінку. */
.mega {
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ============================================================
   Рухомий рядок оголошень
   ============================================================ */

.ticker {
	position: relative;
	z-index: 1;
	background: var(--c-blue-600, #1d4ed8);
	color: #fff;
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.ticker__viewport {
	overflow: hidden;
	/* Прокрутка пальцем потрібна тим, у кого анімація вимкнена системно:
	   інакше вони побачили б лише початок повідомлення. */
	overflow-x: auto;
	scrollbar-width: none;
}

.ticker__viewport::-webkit-scrollbar { display: none; }

.ticker__track {
	display: flex;
	width: max-content;
	animation: alexpc-ticker var(--ticker-speed, 40s) linear infinite;
}

/* Зупиняємо рух, щоб можна було дочитати й натиснути посилання. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
	animation-play-state: paused;
}

.ticker__group {
	display: flex;
	flex-shrink: 0;
}

.ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 28px;
	white-space: nowrap;
}

.ticker__mark {
	display: inline-flex;
	opacity: .85;
}

.ticker__item a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Два однакові проходи, тому коло — це рівно половина доріжки. */
@keyframes alexpc-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ticker__track {
		animation: none;
	}

	/* Дубль при вимкненій анімації лише плутав би. */
	.ticker__group[aria-hidden="true"] {
		display: none;
	}
}

/* ============================================================
   Попередження про відтінок кольору
   ============================================================ */

.color-notice {
	display: flex;
	gap: var(--sp-3);
	margin: var(--sp-4) 0;
	padding: var(--sp-4);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--r-md);
	background: var(--color-accent-soft);
}

.color-notice__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-accent);
}

.color-notice__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.color-notice__title {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.color-notice__text {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-soft);
}

.color-notice__link {
	align-self: flex-start;
	margin-top: 2px;
	font-size: var(--fs-sm);
	color: var(--color-accent);
}

/* На телефоні підвал кошика має бути стриманішим: разом із прогресом
   доставки й датами він займав дві третини вікна. */
@media (max-width: 520px) {
	.mini-cart__foot {
		padding: var(--sp-4);
	}

	.mini-cart__total {
		margin-bottom: var(--sp-3);
	}

	.mini-cart__scroll {
		padding: var(--sp-4);
	}
}