/* ===== HEADER V3 (redesign, 2026-11) =====
   Template part `header-v3`, for now used only by the test template
   `wp-custom-template-redesign` (inc/header-v3.php loads this file there only).
   The wrapper also carries .main-nav, so the theme's catalog / search button rules
   and the sticky header (`header:has(.main-nav)` + .header-bg) apply unchanged.
   The category row reuses .middle-nav-v2__menu, so the mega dropdowns from
   launch.css and main.js (initMegaDropdown, fitPanel) work as in header v2.
   Doubled classes follow the theme convention (see the top of style.css). */

.hdr3{
	--hdr3-btn-bg: var(--wp--preset--color--stone-100);
	--hdr3-ink: var(--wp--preset--color--stone-950);
	--hdr3-btn-h: calc(1em * 1.5 + 1.25rem); /* one line of body text + 10px padding top and bottom */
	--hdr3-icon: 16px;
	--hdr3-ease: cubic-bezier(0.625, 0.05, 0, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem var(--wp--style--root--padding-right, 1.25rem) 1rem var(--wp--style--root--padding-left, 1.25rem);
	color: var(--hdr3-ink);
}
/* flow-layout groups add block-gap margins between children; the rows use gap instead */
.hdr3.hdr3 :is(.hdr3__main, .hdr3__col, .hdr3__row) > *,
.hdr3.hdr3 > *{
	margin-block: 0;
}

/* solid page colour instead of the theme's translucent blurred bar, so the header blends into the page */
header:has(.hdr3) .header-bg.header-bg{
	background-color: var(--wp--preset--color--stone-50);
	backdrop-filter: none;
}

.hdr3__main.hdr3__main{
	width: 100%;
	max-width: var(--wp--style--global--content-size, 100rem); /* same container as the page sections */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 2rem;
}
.hdr3__col.hdr3__col{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
}
.hdr3__col--left.hdr3__col--left{ align-items: flex-start; }
.hdr3__col--right.hdr3__col--right{ align-items: flex-end; }
.hdr3__row.hdr3__row{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
}

/* ---- top row: info links (left) and contacts (right) ---- */
.hdr3-info.hdr3-info,
.hdr3-contacts{
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.5;
}
/* the links themselves get 500 from a theme rule, so the weight goes on them, not only on the containers */
.hdr3.hdr3 :is(.hdr3-info, .hdr3-contacts) :is(a, span){
	font-weight: 400;
}
.hdr3-info .wp-block-navigation__container{
	gap: 4px;
}
.hdr3-info.hdr3-info > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
	isolation: isolate;
}
.hdr3-info .wp-block-navigation__submenu-icon{
	margin-left: 0;
	width: 12px;
	height: 12px;
}
.hdr3-info .wp-block-navigation__submenu-container a{
	white-space: nowrap;
	isolation: isolate;
}
.hdr3-info li.hdr3-evid > .wp-block-navigation-item__content::before{
	content: "";
	flex: none;
	width: 43px;
	height: 20px;
	margin-right: 8px;
	background: url("../img/header-v3/icon-recovery.svg") center / contain no-repeat;
}

/* The theme's sweep (style.css, the .tmm-link lists): a fill grows from the left under
   the label. White on the page-coloured top row; page colour inside the white dropdown,
   as in the old top-nav. */
.hdr3-info .wp-block-navigation-item__label,
.hdr3-contacts > a > span{
	position: relative;
	padding: 0.1em 0.2em;
	border-radius: calc(var(--border-radius) / 2);
}
.hdr3-info .wp-block-navigation-item__label::before,
.hdr3-contacts > a > span::before{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--white, #fff);
	border-radius: inherit;
	transform-origin: right;
	transform: scaleX(0) rotate(0.001deg);
	transition: transform 900ms cubic-bezier(0.2, 1, 0.36, 1);
	z-index: -1;
	pointer-events: none;
}
.hdr3-info .wp-block-navigation__submenu-container .wp-block-navigation-item__label::before{
	background-color: var(--wp--preset--color--stone-50);
}
@media (hover: hover) and (pointer: fine){
	.hdr3-info a:hover > .wp-block-navigation-item__label::before,
	.hdr3-contacts > a:hover > span::before{
		transform-origin: left;
		transform: scaleX(1) rotate(0.001deg);
	}
}

/* ---- action buttons (catalog, search, consultation, cart): one size for all ---- */
.hdr3.hdr3 :is(.menu-catalog button.wp-block-navigation__responsive-container-open, .hdr3__row button.wp-block-search__button, .hdr3-consult .wp-block-button__link, .wc-block-mini-cart__button){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: var(--hdr3-btn-h);
	min-height: 0;
	min-width: var(--hdr3-btn-h);
	padding: 0 1rem !important;
	border: 0;
	border-radius: var(--border-radius);
	background-color: var(--hdr3-btn-bg);
	color: var(--hdr3-ink);
	font-size: inherit; /* body size, like the rest of the page */
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}
.hdr3.hdr3 :is(.menu-catalog button.wp-block-navigation__responsive-container-open, .hdr3__row button.wp-block-search__button, .hdr3-consult .wp-block-button__link, .wc-block-mini-cart__button):is(:hover, :focus-visible){
	background-color: var(--wp--preset--color--stone-950);
	color: var(--wp--preset--color--stone-50);
	transform: none;
}
/* the cart has no label on desktop: a square button */
.hdr3.hdr3.hdr3 .hdr3__row .wc-block-mini-cart__button{
	padding: 0 !important;
}
/* labels come from style.css (::after "Каталог" / "Пошук"); their 0.25em margin is replaced by the gap */
.hdr3.hdr3 :is(.menu-catalog button.wp-block-navigation__responsive-container-open, .hdr3__row button.wp-block-search__button)::after{
	margin-left: 0;
	font-weight: 500;
}
/* icons: every button gets the same 16px box. The blocks' own <svg> elements are
   reused; the catalog one is redrawn as the 9-dot grid from the mockup with a mask */
.hdr3.hdr3 :is(.menu-catalog button.wp-block-navigation__responsive-container-open, .hdr3__row button.wp-block-search__button, .wc-block-mini-cart__button) svg{
	width: var(--hdr3-icon);
	height: var(--hdr3-icon);
	flex: none;
	fill: currentColor;
}
/* the cart glyph fills only ~65% of its viewBox; 22px makes it match the grid/search icons */
.hdr3.hdr3.hdr3 .hdr3__row .wc-block-mini-cart__button svg{
	width: 22px;
	height: 22px;
}
.hdr3 .wc-block-mini-cart__quantity-badge{
	display: inline-flex;
	align-items: center;
}
.hdr3.hdr3 .menu-catalog button.wp-block-navigation__responsive-container-open svg{
	background-color: currentColor;
	-webkit-mask: var(--hdr3-icon-grid) center / 14px no-repeat;
	mask: var(--hdr3-icon-grid) center / 14px no-repeat;
}
.hdr3.hdr3 .menu-catalog button.wp-block-navigation__responsive-container-open svg > *{
	display: none;
}
.hdr3{
	--hdr3-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.75 1.16h2.33c.32 0 .58.26.58.58v2.34c0 .32-.26.58-.58.58H1.75a.58.58 0 0 1-.58-.58V1.75c0-.32.26-.58.58-.58Zm4.08 0h2.34c.32 0 .58.26.58.58v2.34c0 .32-.26.58-.58.58H5.83a.58.58 0 0 1-.58-.58V1.75c0-.32.26-.58.58-.58Zm4.09 0h2.33c.32 0 .58.26.58.58v2.34c0 .32-.26.58-.58.58H9.92a.58.58 0 0 1-.59-.58V1.75c0-.32.27-.58.59-.58ZM1.75 5.25h2.33c.32 0 .58.26.58.58v2.34c0 .32-.26.58-.58.58H1.75a.58.58 0 0 1-.58-.58V5.83c0-.32.26-.58.58-.58Zm4.08 0h2.34c.32 0 .58.26.58.58v2.34c0 .32-.26.58-.58.58H5.83a.58.58 0 0 1-.58-.58V5.83c0-.32.26-.58.58-.58Zm4.09 0h2.33c.32 0 .58.26.58.58v2.34c0 .32-.26.58-.58.58H9.92a.58.58 0 0 1-.59-.58V5.83c0-.32.27-.58.59-.58ZM1.75 9.34h2.33c.32 0 .58.26.58.58v2.33c0 .32-.26.58-.58.58H1.75a.58.58 0 0 1-.58-.58V9.92c0-.32.26-.58.58-.58Zm4.08 0h2.34c.32 0 .58.26.58.58v2.33c0 .32-.26.58-.58.58H5.83a.58.58 0 0 1-.58-.58V9.92c0-.32.26-.58.58-.58Zm4.09 0h2.33c.32 0 .58.26.58.58v2.33c0 .32-.26.58-.58.58H9.92a.58.58 0 0 1-.59-.58V9.92c0-.32.27-.58.59-.58Z'/%3E%3C/svg%3E");
	--hdr3-icon-talk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.17' stroke-linecap='square'%3E%3Cpath d='M9.87 12.25v-.58a2.33 2.33 0 0 0-2.33-2.34H3.45a2.33 2.33 0 0 0-2.33 2.34v.58m9.43-5.1a1.46 1.46 0 0 0 0-1.46m1.77 2.47a3.5 3.5 0 0 0 0-3.49M7.83 4.67a2.33 2.33 0 1 1-4.66 0 2.33 2.33 0 0 1 4.66 0Z'/%3E%3C/svg%3E");
}
.hdr3-consult .wp-block-button__link .button-text{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.hdr3-consult .wp-block-button__link .button-text::before{
	content: "";
	flex: none;
	/* drawn thinner and with more air than the grid/search glyphs, so it gets a bigger box to read the same size */
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--hdr3-icon-talk) center / 18px no-repeat;
	mask: var(--hdr3-icon-talk) center / 18px no-repeat;
}
.hdr3 .wp-block-search{
	margin: 0;
}

/* ---- top-right contacts ---- */
.hdr3-contacts{
	display: flex;
	align-items: center;
	gap: 1rem;
	white-space: nowrap;
}
.hdr3-contacts > a{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: inherit;
	text-decoration: none;
	isolation: isolate;
}
.hdr3-contacts > a svg{
	width: 16px;
	height: 16px;
	flex: none;
}
/* social icons: 20px tiles in the footer's brand colours (style.css .icon-social.is-*) */
.hdr3-social{
	display: flex;
	gap: 1px;
}
.hdr3-social > a{
	--brand: currentColor;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 2px;
	background: var(--brand);
	background-origin: border-box;
	color: #fff;
	overflow: hidden;
}
.hdr3-social > a svg{
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform 0.3s ease-out;
}
.hdr3-social > a:hover svg,
.hdr3-social > a:focus-visible svg{
	transform: scale(1.12);
}
.hdr3-social > .is-telegram { --brand: #0093D7; }
.hdr3-social > .is-viber    { --brand: #9138F6; }
.hdr3-social > .is-whatsapp { --brand: #43CD66; }
.hdr3-social > .is-tiktok   { --brand: #000; }
.hdr3-social > .is-messenger{ --brand: #0866FF; }
.hdr3-social > .is-instagram{
	background: linear-gradient(148.14deg, #780CFF 9.89%, rgba(130, 11, 255, 0) 69.68%), linear-gradient(30.13deg, #FFCC00 -3.97%, rgba(255, 204, 0, 0) 44.33%), linear-gradient(43.28deg, #FFCC00 2.83%, #FFCC00 19.93%, #FE4A05 45.97%, rgba(254, 6, 87, 0) 100%), linear-gradient(254.25deg, #FF005F -38.95%, #FC01D8 64.61%);
	background-origin: border-box;
}

/* ---- logo plate (animation: js/header-v3.js) ---- */
.hdr3-logo{
	display: block;
	line-height: 0;
	color: var(--wp--preset--color--primary-500);
}
.hdr3-logo__stage{
	display: block;
	width: 240px;
	height: 64px;
	overflow: visible;
}
.hdr3-logo__plate{ fill: currentColor; }
.hdr3-logo__dots circle{ fill: currentColor; }
.hdr3-logo__lines line{
	stroke: currentColor;
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}
/* until the script takes over the lines stay hidden, so a page without JS shows the plain plate */
.hdr3-logo__stage:not(.is-ready) .hdr3-logo__lines{ display: none; }
.hdr3-logo .dvl-logo{
	/* white on the red plate in every state; style.css turns the mark brand-red on hover */
	--dvl-rest: #fff;
	--dvl-brand: #fff;
	height: 28px;
}
.hdr3-logo .dvl-logo.snap *{
	transition: none !important;
	animation: none !important;
}

/* ---- category row ---- */
.hdr3__menu.hdr3__menu > .wp-block-navigation__container{
	gap: 2px;
}
.hdr3__menu > .wp-block-navigation__container > .wp-block-navigation-item{
	background-color: var(--wp--preset--color--white, #fff);
}
.hdr3 .hdr3__menu.hdr3__menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
	padding: 0.5rem 0.75rem;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.5;
}
/* While scrolling down (js/header-v3.js puts .hdr3-scrolled on <html>; scrolling up or reaching the top removes it) the row folds up: height,
   the gap above it and opacity animate together. overflow is clipped only while folded,
   and switches back to visible after the unfold, so the mega panels still escape the row. */
.hdr3 .hdr3__menu.hdr3__menu{
	max-height: 4rem;
	opacity: 1;
	transform: none;
	transition:
		max-height 0.6s var(--hdr3-ease),
		margin 0.6s var(--hdr3-ease),
		opacity 0.4s var(--hdr3-ease) 0.1s,
		transform 0.6s var(--hdr3-ease),
		overflow 0s linear 0.6s;
	transition-behavior: allow-discrete;
}
html.hdr3-scrolled .hdr3 .hdr3__menu.hdr3__menu{
	max-height: 0;
	margin-top: -0.5rem;
	opacity: 0;
	transform: translateY(-0.5rem);
	overflow: hidden;
	pointer-events: none;
	transition:
		max-height 0.6s var(--hdr3-ease),
		margin 0.6s var(--hdr3-ease),
		opacity 0.25s var(--hdr3-ease),
		transform 0.6s var(--hdr3-ease),
		overflow 0s;
}

/* ---- below the desktop breakpoint (matches the theme's 1199.98px):
   "Меню" on the left, the logo in the middle, "Кошик" on the right, nothing else ---- */
@media (max-width: 1199.98px){
	.hdr3{
		padding-block: 0.75rem;
	}
	.hdr3__main.hdr3__main{
		gap: 0.5rem;
	}
	.hdr3.hdr3 :is(.hdr3__top, .hdr3__row > .wp-block-search, .hdr3-consult),
	.hdr3 .hdr3__menu.hdr3__menu{
		display: none;
	}
	.hdr3.hdr3 .menu-catalog button.wp-block-navigation__responsive-container-open::after{
		content: "Меню";
	}
	.hdr3.hdr3.hdr3 .hdr3__row .wc-block-mini-cart__button{
		padding: 0 1rem !important;
	}
	/* the label comes before the icon: «Кошик» on the left, the cart on the right */
	.hdr3.hdr3 .wc-block-mini-cart__button::after{
		content: "Кошик";
		order: -1;
	}
}
@media (max-width: 599.98px){
	.hdr3-logo__stage{
		width: 168px;
		height: 44.8px;
	}
	.hdr3.hdr3.hdr3 .hdr3__row :is(.menu-catalog button.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button){
		padding: 0 0.75rem !important;
	}
}

/* ===== TEST PAGE HERO (/redesign-test/) =====
   Neighbouring slides stay fully opaque; style.css fades them to 0.2 on the live homepage. */
.rd-slider-section .hero_slider .swiper-slide:not(.swiper-slide-active) > div{
	opacity: 1;
}
/* content: GSAP drives it (js/redesign-hero.js). The live homepage's own slide-in effect
   (style.css: content slides up 2em, buttons fade in with a 0.7s transition) is switched
   off here. No !important on transform/opacity, or GSAP's inline values could not win. */
.rd-slider-section .hero_slider :is(.hero_slide-content, .wp-block-buttons){
	transition: none !important;
}
/* .swiper-slide doubled: style.css's :not(.swiper-slide-active) rule has the same weight otherwise */
.rd-slider-section .hero_slider .swiper-slide.swiper-slide :is(.hero_slide-content, .wp-block-buttons){
	transform: none;
	opacity: 1;
}
/* the slides that are not active show no content; the active one plays it in and the one
   it replaces plays out first, marked .rd-leaving meanwhile (js/redesign-hero.js) */
.rd-slider-section .hero_slider .swiper-slide:not(.swiper-slide-active, .rd-leaving) .hero_slide-content > *{
	visibility: hidden;
}
/* before Swiper starts, the first slide counts as the active one */
.rd-slider-section .hero_slider .swiper:not(.swiper-initialized) .swiper-slide:first-child .hero_slide-content > *{
	visibility: visible;
}
/* line masks: room for descenders */
.rd-slider-section .hero_slider .rd-line-mask{
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
/* slides that use a catalogue photo (white background) instead of a lifestyle shot:
   the whole product, centred on a warm backdrop, above the text */
.rd-slider-section .hero_slider .hero_slide-cover--product{
	background-color: var(--wp--preset--color--stone-100);
}
.rd-slider-section .hero_slider .hero_slide-cover--product .wp-block-cover__image-background{
	object-fit: contain !important;
	padding: 2.5rem 2.5rem 13rem;
	mix-blend-mode: multiply;
}
/* Safari draws a slide's video above the gradient overlay while the coverflow 3D transform
   is animating (the cover's children sit in the slide's preserve-3d context). Giving the
   cover its own flat layer, and the overlay and text a step forward, keeps the order. */
.rd-slider-section .hero_slider .hero_slide-cover{
	transform: translateZ(0);
	transform-style: flat;
	isolation: isolate;
}
.rd-slider-section .hero_slider .hero_slide-cover > :is(.wp-block-cover__background, .wp-block-cover__inner-container){
	transform: translateZ(1px);
}
/* lightening of the slides that are not active: Swiper's own coverflow shadows
   (slideShadows: true in the slider's data-hero-config). Swiper sets each shadow's opacity
   from the slide's distance to the centre and animates it with the slide; here they are
   only recoloured from the default black gradient to the page colour. They sit above the
   whole slide, badge included. */
.rd-slider-section .hero_slider :is(.swiper-slide-shadow-left, .swiper-slide-shadow-right){
	background-image: none;
	background-color: color-mix(in srgb, var(--wp--preset--color--stone-50) 40%, transparent);
}

/* the cart icon never shrinks: its badge wrapper is a flex item with flex-shrink 1 */
.hdr3.hdr3 .wc-block-mini-cart__button > *{
	flex-shrink: 0;
}
/* mobile header: "Меню" and "Кошик" at 14px, the top of the small preset
   (the preset itself is fluid and drops to 12px on phones) */
@media (max-width: 1199.98px){
	.hdr3.hdr3 .hdr3__row :is(.menu-catalog button.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button){
		font-size: 0.875rem;
		gap: 0.375rem;
	}
	/* icons in the text's size: the grid glyph fills its 1em box, the cart glyph only
	   ~65% of its viewBox, so its box is 1.3em */
	.hdr3.hdr3.hdr3 .hdr3__row .menu-catalog button.wp-block-navigation__responsive-container-open svg{
		width: 1em;
		height: 1em;
		-webkit-mask-size: 1em;
		mask-size: 1em;
	}
	.hdr3.hdr3.hdr3.hdr3 .hdr3__row .wc-block-mini-cart__button svg{
		width: 1.3em;
		height: 1.3em;
	}
}

/* ---------- Catalog overlay ("Каталог" / "Меню") ----------
   The overlay is template part 27562, shared with the live header, so
   everything here is scoped to .hdr3. */

/* no "Каталог" / "Інформація" titles */
.hdr3 .menu_catalog-open :is(.offcanvas-header, .offcanvas-footer) > p.h5 {
	display: none;
}

/* top-level categories take the type of the old "Каталог" title (.h5) */
.hdr3 .offcanvas-header ul.wp-block-navigation__container > li > a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: clamp(1.375rem, 1.3rem + 0.36vw, 1.625rem);
	font-weight: var(--font-weight-heading);
	font-variation-settings: normal;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

/* Info links = chips like the brand rows on the redesign page: white
   tiles, inline blocks balanced over the lines (font-size 0 drops the
   spaces, the 2px gaps are margins), red sweep over the whole chip. */
.hdr3 .offcanvas-info-menu ul.wp-block-navigation__container.wp-block-navigation__container {
	display: block;
	width: 100%;
	font-size: 0;
	line-height: 0;
	text-wrap: balance;
}

.hdr3 .offcanvas-info-menu li.wp-block-navigation-item.wp-block-navigation-item {
	display: inline-block;
	margin: 0 2px 2px 0;
}

.hdr3 .offcanvas-info-menu .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--border-radius);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--stone-950);
	font-size: 0.875rem;
	font-weight: 500;
	font-variation-settings: normal;
	line-height: 1.5;
	white-space: nowrap;
	transition: color 0.3s ease-in-out;
}

.hdr3 .offcanvas-info-menu .wp-block-navigation-item__content.wp-block-navigation-item__content::before {
	background-color: var(--wp--preset--color--primary-500);
}

@media (hover: hover) {
	.hdr3 .offcanvas-info-menu .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--white);
		font-variation-settings: normal;
	}
}
/* Tighter category list: half the theme's item padding (0.5em, 0.75em on
   phones), and less air between the search and the first category. */
.hdr3 .offcanvas-header ul.wp-block-navigation__container > li > a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding-block: 0.25em !important;
}

@media (max-width: 767px) {
	.hdr3 .offcanvas-header ul.wp-block-navigation__container > li > a.wp-block-navigation-item__content.wp-block-navigation-item__content {
		padding-block: 0.375em !important;
	}
}

.hdr3 .menu-catalog__content > .wp-block-group:has(> .wp-block-search) {
	margin-bottom: 1.5rem !important;
}

.hdr3 .menu_catalog-open .offcanvas-header.offcanvas-header {
	margin-top: 0 !important;
}

/* "Відкрити всі" = the menu's "Замовити консультацію" button (same padding and
   type), in stone-950 instead of brand red. */
.hdr3 .js-drilldown.js-drilldown li a.dd-viewall.dd-viewall {
	padding: 0.75rem 1.5rem !important;
	font-weight: 500;
	font-variation-settings: normal;
	line-height: 1.5;
	background: var(--wp--preset--color--stone-950);
}

.hdr3 .js-drilldown.js-drilldown li a.dd-viewall.dd-viewall:hover {
	background: color-mix(in srgb, var(--wp--preset--color--stone-950) 85%, var(--wp--preset--color--stone-50));
	font-variation-settings: normal;
}

.hdr3 .js-drilldown.js-drilldown li a.dd-viewall.dd-viewall:hover .wp-block-navigation-item__label {
	transform: none;
}

/* ---------- Phones: top bar (below 1200px) ----------
   One line on the page colour, no backgrounds, in the buttons' type: a phone
   icon and "Консультація" at the left edge, "Звʼязатися" and the three
   messengers at the right edge, so both ends finish with icons. The whole line
   is one link with .open-popup-consultation, so a tap anywhere on it opens the
   consultation popup. Its 1.75rem takes about the height of the live top bar
   (32px). */
.hdr3-mbar{
	display: none;
}
@media (max-width: 1199.98px){
	/* a small gap between the top bar and the Меню | logo | Кошик row */
	.hdr3.hdr3{
		padding-top: 0.5rem;
		gap: 0.25rem;
	}
	.hdr3-mbar.hdr3-mbar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		width: 100%;
		height: 1.75rem;
		color: var(--hdr3-ink);
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.5;
		text-decoration: none;
		white-space: nowrap;
	}
	.hdr3-mbar__item{
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
	}
	.hdr3-mbar__icons{
		display: inline-flex;
		gap: 1px;
	}
	/* the glyphs fill ~82% of their viewBox: 1.15em draws them at the text's height */
	.hdr3-mbar svg{
		flex: none;
		width: 1.15em;
		height: 1.15em;
		fill: currentColor;
	}
	/* the phone is the top bar's outline icon (stroke, fills its whole viewBox) */
	.hdr3-mbar svg[stroke]{
		width: 1em;
		height: 1em;
		fill: none;
	}
}