/* ═══════════════════════════════════════════════════════════════════════════
   LAUNCH (реклама, вересень 2026) — компоненти, що вмикаються/вимикаються
   видимістю блоків у редакторі, а не видаленням старих:

   1. Шапка v2 — група «Middle menu v2» у частині шаблону «Шапка сайту».
      Стара група «Middle menu (стара версія)» лежить поруч, прихована.
   2. «Категорії товарів (3 картки)» на головній — стара секція зі слайдером
      прихована поруч.
   3. «Хіти продажів» на головній — стара «Акційні пропозиції» прихована.

   Подвоєні класи (.foo.foo) — див. конвенцію на початку style.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. Шапка v2 ────────────────────────────────────────────────────────── */

.middle-nav-v2__row.middle-nav-v2__row{
	align-items: center;
}

.middle-nav-v2__left{
	align-items: center;
	min-width: 0;
}

/* Логотип тримає свою ширину, а не 100% флекс-рядка (у блока є власний
   Additional CSS `width:100%` — він тут би стискав меню). */
.middle-nav-v2__left > .brand-logo.brand-logo{
	flex: 0 0 auto;
	width: 11rem;
	margin: 0;
}

/* Пункти верхнього рівня — як кнопки «Пошук»/«Консультація» поруч. Темне тло
   на самому <li>, щоб стрілка підменю опинилась усередині «кнопки». */
.middle-nav-v2__menu > .wp-block-navigation__container > .wp-block-navigation-item{
	border-radius: var(--border-radius);
	transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.middle-nav-v2__menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
	padding: 0.75em 1em;
	font-weight: var(--font-weight-heading);
	line-height: 1.5;
	color: inherit;
}
.middle-nav-v2__menu > .wp-block-navigation__container > .wp-block-navigation-item:hover,
.middle-nav-v2__menu > .wp-block-navigation__container > .wp-block-navigation-item:has(> :focus-visible){
	background-color: var(--wp--preset--color--stone-950);
	color: var(--wp--preset--color--stone-50);
}

/* Квадратик, що опускається в пункт при наведенні — як у кнопок теми (.wp-block-button__link
   у style.css, ті самі таймінги і keyframes button_square_animation). На <a>, бо йому
   потрібен overflow:hidden, а <li> містить випадаючу панель. */
.middle-nav-v2__menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius);
}
.middle-nav-v2__menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before{
	content: "";
	position: absolute;
	top: 0.375em;
	right: 0.375em;
	width: 0.375em;
	height: 0.375em;
	border-radius: calc(var(--border-radius) / 4);
	background-color: currentColor;
	opacity: 0;
	transform: translateY(-0.75em);
	transition: transform 0.5s var(--ease), opacity 0.25s var(--ease);
	pointer-events: none;
}
.middle-nav-v2__menu > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::before{
	opacity: 1;
	transform: none;
	animation: button_square_animation 2s infinite;
	animation-delay: 0.8s;
}

/* Кнопки дій у шапці — без «натискання» scale/translateY при hover: кнопка стискалась,
   виходила з-під курсора на краю, hover знімався й повертався — фон блимав. */
.middle-nav--v2.middle-nav--v2 :is(.wp-block-button__link, button.wp-block-search__button, .wc-block-mini-cart__button):hover{
	transform: none;
}

/* Випадаючі панелі (і мега, і проста «Фурнітура») відкриваються під своїм пунктом
   (style.css ставить li.is-mega-dropdown static — це для широкого нижнього меню).
   Якщо мега-панель не вміщається праворуч, main.js (fitPanel) зсуває її ліворуч. */
.middle-nav-v2__menu.middle-nav-v2__menu > .wp-block-navigation__container > li.has-child{
	position: relative;
}
.middle-nav-v2__menu.middle-nav-v2__menu > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container{
	left: 0;
	top: calc(100% + 0.5rem);
	/* same inner padding as the content boxes of the home sections (2rem) */
	padding: 2rem;
	border: 1px solid var(--wp--preset--color--stone-200);
	border-radius: var(--border-radius);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--stone-950);
	box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.25);
	/* Власний контекст накладання: sweep-заливка посилань (::before, z-index:-1)
	   інакше малюється під білим фоном панелі. */
	isolation: isolate;
}
/* Місток через проміжок між пунктом і панеллю, щоб hover не обривався.
   Саме під пунктом і тільки в межах проміжку: раніше він був шириною в усю
   панель і накривав нижній край сусідніх пунктів — попередній пункт на мить
   знову отримував hover і «блимав» фоном. */
.middle-nav-v2__menu > .wp-block-navigation__container > .has-child:hover::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 0.5rem;
}
.middle-nav-v2__menu .has-mega-dropdown > .is-mega-dropdown:hover::before{
	display: none;
}

/* Посилання в панелях — звичайна вага і той самий sweep, що в дропдауні «Про нас»
   у top-nav: заливка на <span> мітки (фактична ширина тексту), stone-100. Сам ефект —
   у спільних групах селекторів style.css (::before / :hover::before). */
.middle-nav-v2__menu .wp-block-navigation__submenu-container .wp-block-navigation-link:not(.mega-view-all) > a{
	font-weight: 400;
}
.middle-nav-v2__menu.middle-nav-v2__menu .wp-block-navigation__submenu-container .wp-block-navigation-link:not(.mega-view-all) > a > .wp-block-navigation-item__label::before{
	background-color: var(--wp--preset--color--stone-100);
}

/* Простий дропдаун («Фурнітура») — ті самі відступи пунктів, що й у колонках мега-меню. */
.middle-nav-v2__menu > .wp-block-navigation__container > .has-child:not(.is-mega-dropdown) > .wp-block-navigation__submenu-container{
	min-width: 18rem;
	gap: 1px;
}
/* Компактні рядки в усіх списках дропдаунів (style.css дає посиланням мега-колонок
   padding:.25em !important — це зайвий вертикальний простір). */
.middle-nav-v2__menu.middle-nav-v2__menu .wp-block-navigation__submenu-container .wp-block-navigation-link:not(.mega-view-all) > a{
	padding: 0.1em 0.25em !important;
}
/* Компенсація: відстань від заголовка колонки до списку — як була. */
.middle-nav-v2__menu .mega-dropdown-column > ul.mega-dropdown-column-list{
	padding-top: 0.15em !important;
}

/* Мега-панель з брендами: сітка 1fr | 2fr на фіксовану ширину, щоб вміст
   заповнював панель; колонки однакової висоти — роздільник на всю висоту.
   Безе style.css `.mega-dropdown-panel{display:flex !important}`. */
.middle-nav-v2__menu.middle-nav-v2__menu .is-mega-dropdown > .mega-dropdown-panel{
	display: grid !important;
	grid-template-columns: minmax(max-content, 1fr) 2fr;
	align-items: stretch;
	width: min(56rem, calc(100vw - 2rem)) !important;
	max-width: none;
	padding: 2rem;
	gap: 1.5rem 0;
}
.middle-nav-v2__menu .mega-dropdown-column.mega-col-cats{
	padding-right: 2rem;
}
.middle-nav-v2__menu .mega-dropdown-column.mega-col-brands{
	padding-left: 2rem;
	border-left: 1px solid var(--wp--preset--color--stone-200);
}
.middle-nav-v2__menu .mega-dropdown-column > .wp-block-navigation__submenu-icon{
	display: none;
}
/* WP дає посиланню пункту flex-grow:1 — у колонці-флексі заголовок
   розтягувався і виштовхував список донизу панелі. */
.middle-nav-v2__menu .mega-dropdown-column > a.mega-dropdown-column-title{
	flex: 0 0 auto !important;
	margin-bottom: 0.75rem !important;
	padding: 0 !important;
}
/* Заголовок колонки без посилання (.h6 — як заголовки переваг на головній). */
.middle-nav-v2__menu a.mega-dropdown-column-title:not([href]){
	cursor: default;
}
/* Бренди — завжди у дві колонки на всю ширину 2fr. */
.middle-nav-v2__menu .mega-col-brands.mega-col-brands > ul.mega-dropdown-column-list.mega-dropdown-column-list{
	display: block !important;
	width: 100% !important;
	columns: 2;
	column-gap: 2rem;
}
.middle-nav-v2__menu .mega-col-brands > .mega-dropdown-column-list > li{
	break-inside: avoid;
}
.middle-nav-v2__menu .wp-block-navigation__submenu-container .wp-block-navigation-link > a{
	white-space: nowrap;
}

/* «Всі …» — завжди темна кнопка (як is-style-secondary під каруселями на головній);
   у мега-панелі — на всю ширину під колонками. */
.middle-nav-v2__menu .mega-dropdown-footer.mega-dropdown-footer{
	grid-column: 1 / -1;
	display: block;
}
.middle-nav-v2__menu li.mega-view-all.mega-view-all{
	display: block;
	width: 100%;
}
.middle-nav-v2__menu .wp-block-navigation__submenu-container > li.mega-view-all:not(.mega-dropdown-footer){
	margin-top: 1rem;
}
/* "Всі ..." links look like the section buttons (global button style: stone-950,
   white, 500, 0.75em 1.5em, line-height 1.5); radius, transition and the hover
   square come from the BUTTONS group in style.css. */
.middle-nav-v2__menu li.mega-view-all.mega-view-all > a{
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0.75em 1.5em !important;
	text-align: center;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--white) !important;
	background-color: var(--wp--preset--color--stone-950);
}

@media (max-width: 1199.98px){
	/* Пошук у рядку ховаємо — на мобільних він у виїжджаючому меню. Саме `>`: панель
	   меню теж лежить у .middle-nav-v2__right, і її пошук чіпати не можна. */
	.middle-nav-v2__menu.middle-nav-v2__menu,
	.middle-nav-v2__right > .wp-block-search{
		display: none;
	}
	.middle-nav-v2__left > .brand-logo.brand-logo{
		width: 10rem;
	}
}
@media (max-width: 399px){
	.middle-nav-v2__left > .brand-logo.brand-logo{
		width: 8.5rem;
	}
}

/* ─── 2. Категорії товарів (3 картки) ──────────────────────────────────── */

/* Модифікатор блока starter/link-card (тумблер «Завжди показувати посилання»):
   підкатегорії й «Відкрити всі» видимі й на десктопі, як на тач-пристроях. Перекриває
   приховування з @media (hover:hover) у style.css (.link-card … li{opacity:0}). */
.link-card.link-card--open::before{
	background-image: linear-gradient(to left, rgba(0 0 0 / 0.33) 25%, rgba(0 0 0 / 0.7) 60%);
}
@media (hover: hover) and (pointer: fine){
	.link-card.link-card--open .link-card__links li{
		opacity: 1;
		transform: none;
	}
	.link-card.link-card--open .link-card__links li a{
		pointer-events: auto;
	}
	.link-card.link-card--open .link-card__all{
		opacity: 1;
		transform: none;
	}
}

/* Сітка: 3 в ряд на десктопі, одна під одною на планшеті та телефоні. */
.home-cats-grid.home-cats-grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* усі рядки — як найвищий: картки однакові й у ряд, і стовпчиком */
	grid-auto-rows: 1fr;
	gap: var(--gap);
}
/* Картки 4:5, але ніколи не обрізають вміст. aspect-ratio тут не годиться: з ним
   Chrome тримав рівно 4:5 і виштовхував зайвий вміст вгору (на 1200px заголовок заїжджав
   на відступ). Тому висота = auto (за вмістом), а 4:5 — це min-height, порахована від
   ширини сітки (container query units). */
.home-cats-grid.home-cats-grid{
	container-type: inline-size;
}
.home-cats-grid .link-card.link-card{
	aspect-ratio: auto;
	height: auto;
	/* одна колонка: ширина картки = 100cqw */
	min-height: calc(100cqw * 5 / 4);
}
/* Група в flow-макеті додає margin-block-start дочірнім — у сітці він зсував би картки. */
.home-cats-grid.home-cats-grid > *{
	margin: 0;
}
/* Список → кнопка = заголовок → список (1em відступу заголовка .h5 ≈ 1.625rem + gap).
   У коротших картках кнопка все одно притиснута донизу — картки однакової висоти. */
.home-cats-grid .link-card .link-card__links.link-card__links,
.home-cats-grid .link-card .link-card__title.link-card__title{
	margin-bottom: 1.625rem;
}
@media (min-width: 1200px){
	.home-cats-grid.home-cats-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* три колонки: ширина картки = (100cqw − 2 проміжки) / 3 */
	.home-cats-grid .link-card.link-card{
		min-height: calc((100cqw - 2 * var(--gap)) / 3 * 5 / 4);
	}
}
/* Планшет: картка на всю ширину — 4:5 давало б ~1000px висоти, тому висота за
   вмістом; підкатегорії в дві колонки. */
@media (min-width: 768px) and (max-width: 1199.98px){
	.home-cats-grid .link-card.link-card{
		min-height: 0;
	}
	.home-cats-grid .link-card--open .link-card__links.link-card__links{
		display: grid;
		grid-template-columns: repeat(2, max-content);
		column-gap: 2.5rem;
		align-content: end;
		justify-items: start;
	}
	.home-cats-grid .link-card--open .link-card__all{
		width: auto;
		align-self: flex-start;
		padding-inline: 1.5em;
	}
}

/* ─── Drilldown (мобільне меню): «Відкрити всі» — звичайна темна кнопка, як «Всі …»
   у мега-меню. Перекриває .dd-viewall та hover-ефект .js-drilldown li a у style.css. ─── */
.js-drilldown.js-drilldown li a.dd-viewall.dd-viewall{
	justify-content: center;
	margin-top: 1em;
	padding: 0.75em 1em !important;
	font-size: 1rem;
	font-weight: var(--font-weight-heading);
	color: var(--wp--preset--color--stone-50) !important;
	background: color-mix(in srgb, var(--wp--preset--color--stone-950) 80%, transparent);
	border-radius: var(--border-radius);
	&::before,
	&::after{
		display: none;
	}
	.wp-block-navigation-item__label{
		color: inherit !important;
		transform: none !important;
	}
	&:hover{
		background: var(--wp--preset--color--primary-500);
		font-variation-settings: normal;
	}
}