/* ============================================
Header — два ряди макета ArtGolka:
верхній (лого, «Каталог», пошук, дії) і
нижній (навігація, телефон, соцмережі).
Числа зняті мостом з компонентів
268:1622 (1920), 475:44274 (1480), 308:3758 (375).
============================================ */

/* Header Base - Start */
header {
	position: fixed;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: var(--header-height);
	margin: 0;
	padding: 0;
	/* Ряд 1 у макеті кремовий — той самий #f8f1e4, що й тло сторінок */
	background: var(--bg-page);
	/* У макеті замість лінії тінь 0/4/30 чорним 4% (268:1622) */
	box-shadow: 0 4px 30px rgb(0 0 0 / 4%);
	z-index: 1000;
}
header .header-row {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
}
/* Header Base - End */

/* Header Main (верхній ряд, 1920×71) - Start */
.header-main {
	height: calc(var(--header-height) - var(--top-bar-height));
}
.logo-header {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.logo-header img {
	width: 108px;
	height: 69px;
	object-fit: contain;
}

/* Кнопка каталогу: три лінії 24×1 з кроком 7 + підпис. Кнопкою теми не є —
у макеті це просто іконка з текстом (268:1605). Клас .btn-catalog лишається:
на ньому висить відкриття лайтбокса каталогу (base-05-menu.js). */
.btn-catalog {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin-left: 55px;
	color: var(--black);
	font-family: var(--font-family-1);
	font-size: 24px;
	line-height: 33px;
	font-weight: 400;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.btn-catalog:hover {
	opacity: 0.7;
}
.btn-catalog-lines {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 24px;
	flex-shrink: 0;
}
.btn-catalog-lines > span {
	display: block;
	width: 100%;
	height: 1px;
	background: currentColor;
}
/* Header Main - End */

/* Search - Start */
.search-wrapper {
	position: relative;
	display: flex;
	/* Поле 693 з макета; margin-left:auto лишає вільний простір між «Каталогом» і пошуком */
	flex: 0 1 693px;
	min-width: 0;
	margin-left: auto;
}
.search-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
}
.search-wrapper.in-search .search-background {
	visibility: visible;
	pointer-events: all;
}
.search-box {
	position: relative;
	display: flex;
	width: 100%;
}
/* Поле пошуку: 693×49, біле, обводка чорним 8%, без заокруглення (268:1588) */
.search-box input {
	width: 100%;
	height: 49px;
	padding: 0 46px 0 16px;
	background: var(--white);
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 0;
	color: var(--black);
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 22px;
}
.search-box input::placeholder {
	color: rgb(0 0 0 / 48%);
	opacity: 1;
}
/* Лупа 18×18 у правому краї поля, відступ 16 (268:1590) */
.search-box .icon {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: url(/wp-content/themes/shop/img/icons/search.svg) no-repeat center center;
	background-size: contain;
	transition: all 0.3s ease;
	cursor: pointer;
	z-index: 2;
}
.search-wrapper.in-search .search-box .icon {
	background: url(/wp-content/themes/shop/img/icons/close.svg) no-repeat center center;
	background-size: contain;
}
/* Кнопки «Шукати» в макеті немає — пошук іде по лупі, Enter і посиланню «Всі результати» */
.search-inline-pc .btn-search {
	display: none;
}
.search-inline-pc {
	display: none;
}
.search-popup-mob {
	display: none;
}
.search-call-mob {
	display: none;
}

/* Search Result - Start */
/* Випадайка прив'язана до .search-wrapper (він стоїть на 11px нижче верху шапки),
тому «під усією шапкою» = header-height − 11. */
#search-results {
	position: absolute;
	top: calc(var(--header-height) - 11px);
	left: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: fit-content;
	min-height: 250px;
	max-height: 60vh;
	padding: 0 15px;
	background: var(--white);
	border: 1px solid rgb(0 0 0 / 8%);
	border-top: none;
	box-shadow: 0 4px 30px rgb(0 0 0 / 8%);
	z-index: 2;
}
#search-results .no-result,
#search-results .search-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 250px;
}
#search-results .search-loading span {
	width: 30px;
	height: 30px;
	border: 3px solid var(--border);
	border-top-color: var(--primary);
	border-radius: var(--radius-max);
	animation: search-spin 0.6s linear infinite;
}
@keyframes search-spin {
	to { transform: rotate(360deg); }
}
#search-results .category-tabs {
	position: sticky;
	top: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	min-height: calc(30px + 16px);
	padding: 15px 0;
	margin: 0 0 15px 0;
	background: var(--white);
	overflow-x: auto;
	overflow-y: hidden;
	z-index: 1;
}
#search-results .category-tabs::-webkit-scrollbar {
	height: 6px;
}
#search-results .category-tabs a {
	display: flex;
	color: var(--text-muted);
	min-width: max-content;
	font-size: 16px;
	line-height: 16px;
}
#search-results .category-tabs a.active,
#search-results .category-tabs a:hover {
	color: var(--primary);
}
#search-results .view-all-results {
	position: sticky;
	bottom: -1px;
	display: flex;
	padding: 15px 0;
	margin-top: auto;
	background: var(--white);
}
#search-results .tab-content {
	display: flex;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 5px;
}
#search-results .tab-pane {
	display: none;
	flex-direction: column;
	width: 100%;
}
#search-results .tab-pane.active {
	display: flex;
}
/* Мінікартка успадковує базу з components/01-product-card.css (фото 100×100).
У вузькій випадайці це завелико — контекстний оверрайд лише для пошуку.
Базу не чіпаю: файл картки веде інший чат. */
#search-results .product-item {
	gap: 12px;
	padding: 8px 0;
	background: transparent;
}
#search-results .product-item__image {
	width: 64px;
	height: 64px;
}
#search-results .product-item__quantity {
	display: none;
}
/* Блок категорій, знайдених за ключовими словами (ТЗ п.6) */
#search-results .search-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 15px 0;
	border-bottom: 1px solid var(--border);
}
#search-results .search-categories-title {
	color: var(--text-muted);
	font-family: var(--font-family-1);
	font-size: 14px;
	line-height: 20px;
}
#search-results .search-category-link {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	background: var(--bg-page);
	color: var(--black);
	border-radius: var(--radius-pill);
	font-family: var(--font-family-1);
	font-size: 14px;
	line-height: 20px;
	transition: all 0.3s ease;
}
#search-results .search-category-link:hover {
	background: var(--primary);
	color: var(--primary-match);
}
#search-results .product-item__sku {
	color: var(--text-muted);
	font-family: var(--font-family-1);
	font-size: 14px;
	line-height: 20px;
}
/* Search - End */

/* Shop Functions Group - Start */
.shop-functions-group {
	display: flex;
	align-items: center;
	/* Кола 48 з проміжком 17: у макеті лічильник виступає за коло на 7px і живе в цьому проміжку */
	gap: 17px;
	flex-shrink: 0;
	margin-left: 40px;
}
.header-shop-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: 48px;
	height: 48px;
	background: var(--primary);
	border-radius: var(--radius-max);
	color: var(--bg-page);
	transition: background 0.3s ease;
}
.header-shop-button:hover {
	background: var(--primary-hover);
}
.header-shop-button .icon-mask {
	--icon-base: 20px;
}
/* Іконки шапки в макеті ЗАЛИТІ (не контурні) і не квадратні: висота в усіх 20.4,
   ширина своя — вподобане 24.5, кошик 16.7, кабінет 17.7 (ноди 461:8574 / 461:8597 / 461:8588,
   тир 1480 повторює 1920). .icon-mask дає квадрат --icon-base, і ширше за квадрат серце
   впиралося б у ширину (виходило б 20×16.4 замість 24.5×20.4) — тому ширину задаємо лише йому;
   кошик і кабінет вужчі за квадрат і вписуються самі. */
.header-wishlist-button .icon-mask {
	width: 25px;
}
/* Акаунт: те саме коло 48 плюс підпис «Вхід» праворуч через 8 (461:8585) */
.header-shop-button.user-account {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	gap: 8px;
}
.header-shop-button.user-account:hover {
	background: none;
}
.user-account-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--primary);
	border-radius: var(--radius-max);
	color: var(--bg-page);
	transition: background 0.3s ease;
}
.header-shop-button.user-account:hover .user-account-circle {
	background: var(--primary-hover);
}
.user-account-label {
	color: var(--black);
	font-family: var(--font-family-1);
	font-size: 16px;
	line-height: 22px;
}
/* Лічильник: біле коло 19 з чорним числом, звисає на 7px праворуч (461:8575) */
.cart-counter,
.wishlist-counter,
.header-shop-button:not(.user-account)::after {
	position: absolute;
	top: 0;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	background: var(--white);
	color: var(--black);
	border-radius: var(--radius-max);
	font-family: var(--font-family-1);
	font-size: 13px;
	line-height: 13px;
	font-weight: 400;
}
/* Штатний лічильник теми ховається на нулі (fadeOut у cart-wishlist-lightbox.js — чужий файл),
а в макеті нуль намальований на обох іконках. Домальовуємо нуль підкладкою кнопки:
живий лічильник лежить зверху і перекриває його, коли видимий. Без !important і без правки чужого JS. */
.header-shop-button:not(.user-account)::after {
	content: "0";
	z-index: 0;
}
.cart-counter,
.wishlist-counter {
	z-index: 1;
}
.account-dropdown {
	top: 100%;
	right: 0;
	left: auto;
	min-width: 180px;
	z-index: 10;
}
.header-shop-button.dropdown-simple .account-dropdown {
	min-width: 240px;
	border: 1px solid rgba(68, 49, 31, 0.12);
}
.header-shop-button.dropdown-simple .account-dropdown a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	color: var(--primary);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	transition: background 0.3s ease;
}
.header-shop-button.dropdown-simple .account-dropdown a:hover {
	background: #f8f1e4;
}
.header-shop-button.dropdown-simple .account-dropdown a:last-child {
	margin-top: 8px;
	border-top: 1px solid rgba(68, 49, 31, 0.12);
	font-weight: 400;
}
/* Shop Functions Group - End */

/* Header Nav (нижній ряд, 1920×44) - Start */
.header-nav {
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--top-bar-height);
	background: var(--primary);
	/* Пункти меню в components/03-menu.css стоять на color:inherit — колір ряду вони беруть звідси */
	color: var(--white);
}
.header-nav > .container {
	align-items: center;
}
/* Крок пунктів 32 (1920) — база чату меню; тут лише контекст ряду */
header .header-nav .mega-menu {
	flex-shrink: 1;
	min-width: 0;
}
/* Пункт навігації завжди в один рядок: ряд фіксований 44px, розрив його розпирає */
header .header-nav .mega-menu > li > a {
	white-space: nowrap;
}
.header-phone {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--white);
	font-family: var(--font-family-1);
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	transition: opacity 0.3s ease;
}
.header-phone:hover {
	opacity: 0.7;
}
/* Соцмережі ряду навігації: бокси 40×40 з проміжком 2, гліф 20 білим (461:9592).
-10px праворуч вирівнюють ГЛІФ (а не бокс) по краю контейнера, як у макеті. */
.header-socials {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	margin-left: 24px;
	margin-right: -10px;
}
.header-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--white);
	transition: opacity 0.3s ease;
}
.header-social-link:hover {
	opacity: 0.7;
}
.header-social-link .icon-mask {
	--icon-base: 20px;
}
/* Header Nav - End */

/* Adaptive 1680 (тир макета 1480) - Start */
@media (max-width: 1680px) {
	.btn-catalog {
		margin-left: 40px;
		font-size: 20px;
		line-height: 27px;
	}
	header .header-nav .mega-menu {
		gap: 16px;
	}
	.header-phone {
		font-size: 18px;
		line-height: 24px;
	}
	.header-socials {
		gap: 0;
	}
}
/* Adaptive 1680 - End */

/* Доведення малих ноутбуків (макет цей діапазон не покриває, responsive.md).
На 1280 ряду залишається 822px при потребі 832 — пункти починали ламатися на два рядки
і розпирати ряд 44 до 66. Крок 10 дає 796 — влазить із запасом. */
@media (max-width: 1366px) {
	header .header-nav .mega-menu {
		gap: 10px;
	}
}
/* Adaptive 1279 (тир макета 375) - Start */
@media (min-width: 1280px) {
	.search-inline-pc {
		position: relative;
		display: flex;
		width: 100%;
		z-index: 2;
	}
}
@media (max-width: 1279px) {
	/* Бургер: три лінії 28×1 з кроком 8, чорні, без підкладки (308:3752) */
	.side-menu-call {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 24px;
		flex-shrink: 0;
		cursor: pointer;
		background: none;
		border-radius: 0;
	}
	.side-menu-call > .menu-line {
		display: block;
		width: 24px;
		height: 1px;
		background: var(--black);
		border-radius: 0;
	}
	.logo-header {
		margin-left: 10px;
	}
	.logo-header img {
		width: 69px;
		height: 40px;
	}
	.search-call-mob {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		min-width: 18px;
		margin-left: auto;
		cursor: pointer;
	}
	.search-call-mob img {
		width: 18px;
		height: 18px;
	}
	.search-wrapper {
		position: fixed;
		display: flex;
		justify-content: center;
		width: 100%;
		margin-left: 0;
		z-index: 10;
	}
	.search-background {
		background: rgb(0 0 0 / 2%);
	}
	.search-background.active {
		opacity: 1;
		visibility: visible;
		pointer-events: all;
	}
	.search-popup-mob {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 10px;
		background: var(--bg-page);
		border-radius: 0;
		box-shadow: 0 4px 30px rgb(0 0 0 / 4%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 2;
	}
	.search-popup-mob.active {
		opacity: 1;
		visibility: visible;
		pointer-events: all;
	}
	.search-box input {
		height: 48px;
		font-size: 14px;
		line-height: 20px;
	}
	/* Іконка відлічується від краю поп-апа, тому до 16 всередині поля додаємо його padding 10 */
	.search-popup-mob .icon {
		right: 26px;
	}
	/* Поп-ап: 10 зверху + поле 48 + 10 знизу = 68 під шапкою */
	#search-results {
		position: fixed;
		top: calc(var(--header-height) + 68px);
		left: 10px;
		right: 10px;
		width: auto;
		max-height: 70vh;
	}
	#search-results .product-item__image {
		width: 56px;
		height: 56px;
	}
	#search-results .category-tabs a {
		font-size: 14px;
		line-height: 14px;
	}
	.shop-functions-group {
		gap: 8px;
		margin-left: 16px;
	}
	.header-shop-button {
		width: 34px;
		height: 34px;
	}
	.header-shop-button .icon-mask {
		--icon-base: 17px;
	}
	/* 375: серце 20.4×17 (нода 461:12836) — та сама пропорція, що на десктопі */
	.header-wishlist-button .icon-mask {
		width: 21px;
	}
	.user-account-circle {
		width: 34px;
		height: 34px;
	}
	.cart-counter,
	.wishlist-counter,
	.header-shop-button:not(.user-account)::after {
		top: -3px;
		right: -7px;
		width: 16px;
		height: 16px;
		font-size: 11px;
		line-height: 11px;
	}
}
/* Adaptive 1279 - End */