@charset "UTF-8";
/*
Theme Name: Dveriland
Version: 1.0
Author: Artem Basiuk
*/

/* ─── КОНВЕНЦІЯ: подвоєні класи в селекторах ────────────────────────
   Де-не-де селектор спеціально записаний як `.foo.foo` або `.a .b.b`.
   Це не опечатка: такий запис піднімає специфічність на один клас, не
   змінюючи те, на що правило націлене.

   Навіщо: WordPress друкує стилі блоків, WooCommerce та global-styles інлайново в
   <head>, і часто з тією самою специфічністю, що й тут. При нічиї виграє той,
   хто нижче в документі. LiteSpeed Cache (CSS Combine, увімкнений тільки для
   гостей) збирає весь зовнішній CSS в один файл і ставить його на початок
   <head> — вище тих самих інлайнів. Тобто всі нічиї перевертаються й сайт
   виглядає для гостя інакше, ніж для залогіненого адміна.

   Піднята специфічність робить результат незалежним від порядку та від того,
   увімкнена оптимізація чи ні. Це надійніше за !important, бо залишає можливість
   перевизначити правило звичайним способом.
   Шукати такі місця: відкрити сторінку як гість → додати копію об'єднаного CSS
   <style>ом у кінець <head> і порівняти getComputedStyle до/після. */


:root{
	--border-radius: 0.1875rem;
	--gap: 0.25rem;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	--ease: cubic-bezier(0.625, 0.05, 0, 1);
	--font-weight-heading: 600;
}

body{
	line-height: 1.4;
}

svg {
    max-width: 100%;
	height: auto;
}



*{
	box-sizing: border-box;
}

.middle-nav .wp-block-button__link.wp-element-button,
.menu-catalog button.wp-block-navigation__responsive-container-open,
.main-nav button.wp-block-search__button{
  padding: 0.75em 1em !important;
}


/* NAVIGATION START */

.top-nav a{
  font-size: var(--wp--preset--font-size--small);
}


.menu-catalog button.wp-block-navigation__responsive-container-open::after{
  content: "Каталог";
  font-weight: var(--font-weight-heading);
}

.menu-catalog.is-mobile button.wp-block-navigation__responsive-container-open::after{
  content: "Меню";
}

.main-nav button.wp-block-search__button::after{
  content: "Пошук";
}

.main-nav button.wp-block-search__button[aria-expanded="true"]::after{
  content: "Знайти";
}

.main-nav button.wp-block-search__button::after,
.menu-catalog button.wp-block-navigation__responsive-container-open::after {
  margin-left: 0.25em;
}

.menu-catalog button.wp-block-navigation__responsive-container-open,
.main-nav button.wp-block-search__button {
  display: flex;
  align-items: center;
  line-height: 1.5;
  background-color: transparent;
  color: inherit;
  border-radius: var(--border-radius);
  transition: backgorund-color 0.3s ease-out;
}

.middle-menu_buttons-right .wp-block-button{
	display: flex !important;
}

.menu-catalog{
	.wp-block-search__inside-wrapper{
		border-radius: var(--border-radius);
	}
	.wp-block-search__input{
		border-radius: var(--border-radius);
		background-color: transparent;
		padding: 0.5em 1em;
	}
	.wp-block-search__button{
		margin-left: 0;
		&:not(:hover){
			background-color: var(--wp--preset--color--stone-100) !important;
			border-color: var(--wp--preset--color--stone-300)
		}
	}	
}



.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
	border: 1px solid var(--wp--preset--color--stone-200);
	background: white;
	padding: 1.25em;
}

/* .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container a{
	color: var(--wp--preset--color--stone-950) !important;
} */

.middle-nav .menu-consulation-button .wp-block-button__link:not(:hover){
	background-color: transparent !important;
	color: inherit !important;
}




/* .menu-catalog button.wp-block-navigation__responsive-container-open:hover,
.main-nav button.wp-block-search__button:hover{
  background-color: var(--wp--preset--color--stone-950);
} */


:where(.wp-block-search__input){
    background-color: var(--wp--preset--color--stone-100);
    border: 1px solid var(--wp--preset--color--stone-300);
    border-radius: var(--border-radius);
    margin-right: 2px;
    color: var(--wp--preset--color--stone-950);
}

:where(.wp-block-search__input):hover{
    border-color: var(--wp--preset--color--stone-950);
}

:where(.wp-block-search__input):focus{
  outline: none;
  border-color: var(--wp--preset--color--stone-950);
}




.top-menu-mobile__buttons > div{
	flex-grow: 1;
}

.wp-block-navigation__responsive-container.is-menu-open {
  display: flex;
  flex-direction: column;
  background-color: inherit;
}

/* Backdrop — the actual dimmed layer is .menu_catalog-open (background:#00000080),
   nested inside .wp-block-navigation__overlay-container. Opacity only. */
@keyframes overlay-menu__fade-in-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media not (prefers-reduced-motion) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container .menu_catalog-open {
    animation: overlay-menu__fade-in-animation 0.5s cubic-bezier(0.625, 0.05, 0, 1);
    animation-fill-mode: forwards;
  }
}

/* Panel — the actual narrow box is .menu-catalog__content (stone-50 bg, the
   custom max-width). It's nested INSIDE .menu_catalog-open, so animating it
   separately from its parent's opacity fade keeps the two decoupled. */
@keyframes offcanvas-panel-slide-in {
  from {
    transform: translateX(-10em);
  }
  to {
    transform: translateX(0);
  }
}

@media not (prefers-reduced-motion) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container .menu-catalog__content {
    animation: offcanvas-panel-slide-in 0.5s cubic-bezier(0.625, 0.05, 0, 1);
    animation-fill-mode: forwards;
  }
}

/* Phone: tighter panel padding. The block serialises its 3rem padding as an
   inline style, so !important is the only way to override it from the
   stylesheet without editing the template part. */
@media (max-width: 767px){
	.menu-catalog__content{
		padding-top: 2rem !important;
		padding-right: 1.25rem !important;
		padding-bottom: 2rem !important;
		padding-left: 1.25rem !important;
	}
}

/* ─── Drill-down menu (layout only — colors/spacing styled separately) ────── */

/* Clip content while GSAP animates the horizontal shift */
.dd-menu {
	overflow: hidden;
	li[tabindex="-1"]:focus {
		outline: none;
	}
	ul ul {
		display: none !important;
		padding: 0;
	}	
	li.dd-open > ul {
		display: block !important;
		padding: 0;
	}
	li.dd-open > a {
		display: none !important;
	}
	ul.has-open > li:not(.dd-open) {
		display: none !important;
	}
	.dd-back {
		display: flex;
		align-items: center;
		gap: 0.5em;
		width: auto;
		padding: 0.3125em 0.75em;
		border: none;
		background: none;
		cursor: pointer;
		font: inherit;
		color: inherit;
		text-align: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
		margin-bottom:  1.5em;
		border-radius: 0.25em;
		transition: background-color 0.3s ease;
		border: 1px solid color-mix(in srgb, currentColor 15%, transparent) !important;
		&:hover{
			background-color: color-mix(in srgb, currentColor 10%, transparent);
		}
		&::before{
			content: "";
			position: relative;
			display: inline-block;
			width: 0.5em;
			height: 0.5em;
			border-bottom: 2px solid currentColor;
			border-left: 2px solid currentColor;
			transition: transform 0.2s ease, opacity 0.2s ease;
			transform: rotate(45deg) scale(0.8);
			border-bottom-right-radius: 1px;
		}
	}
	.dd-submenu-label{
		font-weight: var(--font-weight-heading);
		font-size: 1.5em;
	}
	.dd-submenu-header{
		margin-bottom: 1em;
	}
	.wp-block-navigation-item__content,
	.dd-viewall {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		&::after{
			content: "";
			position: relative;
			display: inline-block;
			width: 0.4em;
			height: 0.4em;
			right: 1em;
			border-bottom: 2px solid currentColor;
			border-right: 2px solid currentColor;
			transition: transform 0.2s ease, opacity 0.2s ease;
			transform: rotate(-45deg) translate(-50%, 0%);
			border-bottom-right-radius: 1px;
			top: calc(50% - 0.2em);
		}
	}
	.dd-viewall{
		background: var(--wp--preset--color--stone-300);
		/* color: var(--wp--preset--color--stone-950); */
		border-radius: var(--border-radius);
		padding-left: 1em !important;
		padding-top: 0.75em !important;
		padding-bottom: 0.75em !important;
		margin-top: 1em;
	}
}


/* Клас продубльовано: `:root :where(.is-layout-flex){gap:1.25rem}` із global-styles
   має ту саму специфічність — див. коментар про конвенцію на початку файлу. */
.js-drilldown.js-drilldown {
	display: flex;
    flex-direction: column;
    align-items: stretch;
	gap: 0;
	width: 100% !important;
	ul.wp-block-navigation-submenu{
		padding: 0 !important;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100% !important;
	}
	ul:has(li:hover) li:not(:hover):not(.dd-submenu-header){
		/* opacity: 0.6;
		transition: opacity 0.5se ease-out; */
	}
	li:not(.wp-block-navigation-item), ul.js-drilldown li.dd-open {
		border: none;
	}
	li:not(.dd-open):not(.dd-submenu-header) {
		border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent) !important;
		box-sizing: border-box;
		border: none !important;
	}
	li:last-child{
		border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent) !important;
		border: none !important;
	}
	li a {
		padding: 0.5em 0 0.5em 0 !important;
		transition: all 0.25s ease-out !important;
		will-change: opacity, transform, background-color border-radius, font-variation-settings;
		cursor: pointer;
		font-weight: 400;
		position: relative;
		@media(max-width: 767px){
			padding: 0.75em 0 0.75em 0 !important;
		}
		&::before{
			content: "";
			display: block;
			position: absolute;
			width: 0.4rem;
			height: 0.4rem;
			background-color: var(--wp--preset--color--primary-500);
			border-radius: 1px;
			top: calc(50% - 0.2rem);
			left: 0.5rem;
			opacity: 0;
			transform: translateX(-1rem) rotate(-90deg);
			transform: scale(0);
			transition: inherit;
		}
		&::after{
			transition: inherit;
			transform: none;
		}
		.wp-block-navigation-item__label{
			transition: inherit;
		}
		&:hover{
			background-color: color-mix(in srgb, currentcolor 10%, transparent);
			color: var(--wp--preset--color--primary-500) !important;
			border-radius: 0.25rem;
			font-variation-settings: 'wght' 600;
			.wp-block-navigation-item__label{
				color: var(--wp--preset--color--primary-500) !important;
				transform: translateX(1.2em);
			}
			&::before{
				opacity: 1;
				transform: none;
				/* transition-delay: 0.1s; */
			}
			&::after{
				transform: rotate(-45deg) translate(0%, 50%);
			}
		}
	}
}






.top-nav a .wp-block-navigation-item__label, .bottom-nav a .wp-block-navigation-item__label,
.top-nav a, .bottom-nav a{
	transition: all 0.3s ease-out;
	will-change: opacity, transform, background-color border-radius, font-variation-settings;
}

.bottom-nav > nav > ul >li > a {
    padding-bottom: 0.25em;
    padding-top: 0.25em;
}





.offcanvas-footer{
	transition: all 0.35s ease-out;
	will-change: visibility, opacity, transform, pointer-events
}

.offcanvas-header:has(.js-drilldown.has-open) + .offcanvas-footer{
	visibility: hidden;
	opacity: 0;
	transform: translateY(1em);
	pointer-events: none;
	transition: none;
}

button.menu-catalog__button-close{
	transition: all 0.3s ease-out;
	will-change: background-color;
}

button.menu-catalog__button-close:hover{
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

button.menu-catalog__button-close svg{
	transition: all 0.3s ease-out;
	will-change: transform;
}

button.menu-catalog__button-close:hover svg{
 transform: rotate(90deg);
}


/* .wp-block-navigation-item__content .wp-block-navigation-item__label {
	opacity: 1;
} */

/* ─── Mega dropdown  ────────── */
/* (requires has-mega-dropdown class on ul and is-mega-dropdown on li) */
.mega-dropdown-panel {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
}

.mega-dropdown-column {
	flex-grow: 1 !important;
	flex-basis: 15rem !important;
}

ul.has-mega-dropdown{
	position: relative;
}

ul.has-mega-dropdown li.is-mega-dropdown{
	position: static;
}

.has-mega-dropdown > .is-mega-dropdown > .mega-dropdown-panel{
	border-radius: 0.25rem;
	border-color: transparent;
	width: 100% !important;
	padding: 1.5rem;
	gap: 0.5rem;
	box-sizing: border-box;
	top: calc(100% + 0.75rem);
}

.has-mega-dropdown > .is-mega-dropdown:hover::before{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0.75rem;
	top: 100%;
}

.has-mega-dropdown .is-mega-dropdown .mega-dropdown-column{
	display: flex;
	flex-direction: column;
	align-items: start;
	box-sizing: inherit;
}

.has-mega-dropdown > .is-mega-dropdown > .mega-dropdown-panel > .mega-dropdown-column > a{
	padding: 0 !important;
}

.has-mega-dropdown > .is-mega-dropdown > .mega-dropdown-panel > .mega-dropdown-column > ul{
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	display: flex !important;
	flex-direction: column;
	gap: 1px;
}

.has-mega-dropdown > .is-mega-dropdown > .mega-dropdown-panel > .mega-dropdown-column > ul::before{
	display: none;
}

.has-mega-dropdown > .is-mega-dropdown > .mega-dropdown-panel > .mega-dropdown-column > ul > li a{
	padding: 0.25em !important;
}

.has-mega-dropdown > .is-mega-dropdown > .mega-dropdown-panel > .mega-dropdown-column > ul ul{
	display: none;
}

a.wp-block-navigation-item__content.h5.mega-dropdown-column-title{
	margin-bottom: 0.5em !important;
	padding: 0.25em;
}



.mega-dropdown-column-list {
	position: static !important;
	display: block !important;
	height: auto !important;
	width: auto !important;
	min-width: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	left: auto !important;
	top: auto !important;
}


/* ─── Contacts pattern: social icons ──────────────────────────────────────
   Outlined frames that fill with the network's own colour on hover. The icon
   itself is currentColor, so the same markup works on the dark footer, the
   light popup and the product sidebar without per-context overrides.

   The inline SVGs carry fill="white", but that is a presentation attribute —
   any CSS `fill` beats it, so the icons inherit colour without touching the
   markup in wp_block #197.

   Note the selector: `.icon-social` IS the <a>, not a wrapper around one. The
   previous rules were all written as `.icon-social a`, matched nothing, and the
   frames simply never rendered.
   ────────────────────────────────────────────────────────────────────────── */
.social-links{
	gap: 2px;
	justify-content: inherit;
}

.icon-social{
	--icon-social-brand: currentColor;

	width: 3rem;
	height: 3rem;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Matches the 3px on .wp-element-button — the frames are the same 3rem
	   height as the buttons, so they should share the same corner. */
	border-radius: 3px;
	background: transparent;
	color: inherit;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;

	/* Gradients default to background-origin: padding-box, so the gradient is
	   sized to the padding box and then stretched outwards under the border —
	   which leaves a visible seam of edge colour around Instagram's tile. Sizing
	   it to the border box instead makes the fill reach the corner cleanly. */
	background-origin: border-box;
}

.icon-social svg{
	width: 1.5rem;
	height: 1.5rem;
	transition: transform 0.25s ease;
}

/* Covers icons whose colour sits on the root, on paths, or on both. */
.icon-social svg,
.icon-social svg path{
	fill: currentColor;
}

.icon-social:hover,
.icon-social:focus-visible{
	background: var(--icon-social-brand);
	border-color: transparent;
	color: #fff;
}

.icon-social:hover svg,
.icon-social:focus-visible svg{
	transform: scale(1.12);
}

.icon-social.is-telegram { --icon-social-brand: #0093D7; }
.icon-social.is-viber    { --icon-social-brand: #9138F6; }
.icon-social.is-whatsapp { --icon-social-brand: #43CD66; }
.icon-social.is-tiktok   { --icon-social-brand: #000; }
.icon-social.is-messenger{ --icon-social-brand: #0866FF; }

/* Instagram's brand mark is a gradient, which a custom property cannot carry
   through `background`, so it is applied directly. */
.icon-social.is-instagram:hover,
.icon-social.is-instagram:focus-visible,
.popup__content .icon-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;
}

/* Inside the popups the icons stay in their brand colours permanently — the
   popup is a deliberate "contact us" moment, so the networks are the content
   rather than a hover affordance. Hover there only adds the scale. */
.popup__content .icon-social{
	background: var(--icon-social-brand);
	border-color: transparent;
	color: #fff;
}


/* Simple Popup Styling */
.simple-popup{
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	p:empty, p:empty+p:empty{
		display: none;
	}
	p{
		color: inherit;
	}
	label{
		margin: 0;
	}
}


.simple-popup__content{
	max-width: 35rem;
	padding: 4rem;
	@media (max-width: 1199px){
		padding: 3rem;
	}
	@media (max-width: 767px){
		padding: 1.5rem;
	}
}
.simple-popup__body{
	text-align: center;
}




/* Класи продубльовані: тут зіштовхуються два інлайнових джерела з тією самою
   специфічністю (0,1,0) — `.is-layout-flex{align-items:center}` із global-styles та
   `.wp-container-core-group-is-layout-*` із core-block-supports. Див. коментар про
   конвенцію на початку файлу. */
.popup__content.popup__content,
.popup-part.popup-part,
.contacts-wrapper.contacts-wrapper,
.contacts_phones.contacts_phones{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
}


.popup-part.popup-part,
.contacts-wrapper.contacts-wrapper,
.contacts_phones.contacts_phones{
	justify-content: inherit;
	align-items: inherit;
}

.popup-part,
.contacts-wrapper{
	gap: 1rem;
}

.popup-part p{
	text-wrap: balance;
}

.contacts_phones{
	gap: 0.5rem;
}

/* The sweep is the whole hover treatment, exactly as on the footer menu links —
   no colour shift, otherwise the 15%-of-currentColor fill would turn red too
   and stop matching them. The sweep itself lives in the .tmm-link lists. */
.contacts_phone-number a,
.contacts_email-link a{
	text-decoration: none;
	color: inherit;
	isolation: isolate;
}

.wp-block-separator{
	border-top: 1px dashed var(--wp--preset--color--stone-950) !important;
}

.simple-popup__content{
	background-color: var(--wp--preset--color--stone-50);
	.wpcf7-form{
		.input-name{
			display: none;
		}
	}
}

.simple-popup__close{
	font-size: 2.5rem;
	transition: all 0.3s ease-out;
	will-change: transform, color;
	&:hover{
		color: var(--wp--preset--color--primary-500);
	}
}





.wpcf7{
	.form-vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
		input{
			width: 100%;
			text-align: center;
		}
	}
	input, textarea{
		padding: 0.75em 1em;
		border: 1px solid var(--wp--preset--color--stone-300);
		background-color: white;
		border-radius: var(--border-radius);
		font-family: inherit;
		font-size: inherit;
		transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	}
	input:not(.wpcf7-submit):hover, textarea:hover{
		border-color: var(--wp--preset--color--stone-950);
	}

	input.wpcf7-submit{
		background-color: var(--wp--preset--color--stone-950);
		color: var(--wp--preset--color--stone-50);
		border-color: transparent;
		&:hover{
			background-color: var(--wp--preset--color--primary-500);
		}
	}
	.wpcf7-response-output{
		margin: 0 !important;
	}
}





/* ─── Heading utility classes ─────────────────────────────────────────────── */

/* .h0–.h6 нижче записані з продубльованим класом: global-styles друкує інлайново
   `.has-x-large-font-size{font-size:…!important}` із тією самою специфічністю (0,1,0)
   і теж з !important, тому нічию вирішував порядок — див. коментар про конвенцію
   на початку файлу. Утиліта .hN завжди має перебивати пресет розміру з редактора. */
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-style: normal;
	font-weight: var(--font-weight-heading);
}

.h0.h0 {
	font-size: clamp(2.75rem, 2.11rem + 3.21vw, 6rem) !important;
	line-height: 1 !important;
	letter-spacing: -0.055em !important;
}

.h1.h1 {
	font-size: clamp(2.75rem, 2.11rem + 3.21vw, 4.5rem) !important;
	line-height: 1 !important;
	letter-spacing: -0.055em !important;
}

.h2.h2 {
	font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.045em !important;
}

.h3.h3 {
	font-size: clamp(1.875rem, 1.48rem + 1.96vw, 2.75rem) !important;
	line-height: 1.07 !important;
	letter-spacing: -0.04em !important;
}

.h4.h4 {
	font-size: clamp(1.625rem, 1.45rem + 0.89vw, 2.25rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.03em !important;
}

.h5.h5 {
	font-size: clamp(1.375rem, 1.3rem + 0.36vw, 1.625rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.025em !important;
}

.h6.h6 {
	font-size: clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

.u-text-balance{
	text-wrap: balance;
}

.u-border-radius	{
	border-radius: var(--border-radius);
}


.full-width-carousel{
	ul.is-product-collection-layout-carousel{
		padding-left: max(calc((100% - var(--wp--style--global--content-size)) / 2), 1rem) !important;
		padding-right: max(calc((100% - var(--wp--style--global--content-size)) / 2), 1rem) !important;
	}
}

/* WooCommerce sets overflow-x:auto for the horizontal scroll, but per the
   CSS spec that silently forces overflow-y to compute as auto too — so any
   row where one card is taller than the rest (e.g. a product with 2 stacked
   marketing badges vs. 0) can trip a sub-pixel rounding remainder and show
   a hair-thin vertical scrollbar that hijacks the page's scroll wheel while
   the cursor sits over the carousel. Only horizontal scroll is ever
   intentional here, so shut vertical off explicitly rather than relying on
   the rounding to land in our favor. */
ul.is-product-collection-layout-carousel{
	overflow-y: hidden !important;
}

/* Every WooCommerce product grid/carousel (Product Collection block, any
   display layout — flex, grid, carousel) defaults to a 1.25em gap between
   cards. Force the theme's tight --gap everywhere uniformly, and rewrite the
   fixed-columns width/grid-template-columns calc()s (which subtract a
   fraction of that same default gap) so cards don't leave stray slack once
   the gap is much smaller. */
.wc-block-product-template.is-flex-container,
.wc-block-product-template__responsive,
.wc-block-product-template.is-layout-flex{
	gap: var(--gap) !important;
}
.wc-block-product-template.is-flex-container.columns-2 > li{ width: calc(50% - var(--gap) / 2) !important; }
.wc-block-product-template.is-flex-container.columns-3 > li{ width: calc(33.33333% - var(--gap) * 2 / 3) !important; }
.wc-block-product-template.is-flex-container.columns-4 > li{ width: calc(25% - var(--gap) * 3 / 4) !important; }
.wc-block-product-template.is-flex-container.columns-5 > li{ width: calc(20% - var(--gap) * 4 / 5) !important; }
.wc-block-product-template.is-flex-container.columns-6 > li{ width: calc(16.66667% - var(--gap) * 5 / 6) !important; }

/* The fixed-columns flex layout (used by "Супутні товари") has no responsive
   fallback of its own, so a high column count stays in one row and overflows on
   small screens. Wrap it down like a normal product grid: 3 per row on tablet,
   2 on phone. */
@media (max-width: 1199.98px){
	.wc-block-product-template.is-flex-container{ flex-wrap: wrap; }
	.wc-block-product-template.is-flex-container.columns-4 > li,
	.wc-block-product-template.is-flex-container.columns-5 > li,
	.wc-block-product-template.is-flex-container.columns-6 > li{
		width: calc(33.33333% - var(--gap) * 2 / 3) !important;
	}
}
@media (max-width: 767px){
	/* Column classes included so this matches the specificity of the tablet
	   `.columns-N > li` rule above and wins by source order → 2 per row. */
	.wc-block-product-template.is-flex-container.columns-2 > li,
	.wc-block-product-template.is-flex-container.columns-3 > li,
	.wc-block-product-template.is-flex-container.columns-4 > li,
	.wc-block-product-template.is-flex-container.columns-5 > li,
	.wc-block-product-template.is-flex-container.columns-6 > li{
		width: calc(50% - var(--gap) / 2) !important;
	}
}

.wc-block-product-template__responsive.columns-2{ grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(50% - var(--gap) / 2)), 1fr)) !important; }
.wc-block-product-template__responsive.columns-3{ grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(33.33333% - var(--gap) * 2 / 3)), 1fr)) !important; }
.wc-block-product-template__responsive.columns-4{ grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(25% - var(--gap) * 3 / 4)), 1fr)) !important; }
.wc-block-product-template__responsive.columns-5{ grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(20% - var(--gap) * 4 / 5)), 1fr)) !important; }
.wc-block-product-template__responsive.columns-6{ grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(16.66667% - var(--gap) * 5 / 6)), 1fr)) !important; }



/* WooCommerce's own carousel CSS sizes each card via flex-basis:0 + a
   responsive min-width (container queries) + max-width:400px — three
   competing properties fighting for control. We want ONLY width to govern
   sizing, so: kill min-width/max-width, and flip flex-basis to `auto` (via
   the flex shorthand) so it defers to width instead of forcing 0. */
/* Селектор точно збігається з інлайновим правилом WooCommerce
   (woocommerce-product-template-style-inline-css), тому клас продубльовано — див.
   коментар про конвенцію на початку файлу. Без цього гість бачить картки по
   flex-basis:0 + min-width від WooCommerce (≈275px) замість наших 320px. */
.is-product-collection-layout-carousel .wc-block-product.wc-block-product{
	width: min(20rem, 60vw);
	min-width: 0;
	max-width: none;
	flex: 0 0 auto;
}


.brand-logo img,
.brand-logo svg,
.brand-logo iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Записано так само, як Additional CSS самого блока логотипа
   (`.wp-custom-css-e4fd8414{width:100%;max-width:12rem}`), щоб нічия специфічностей
   між ними нічого не вирішувала — результат однаковий, хто б не виграв. */
.brand-logo{
	width: 100%;
	max-width: 12rem;
	display: flex;
}


/* ─── Icon utilities ───────────────────────────────────────────────────────── */

.ph-duotone {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

.ph-sm  { font-size: 1em; }
.ph-md  { font-size: 1.25em; }
.ph-lg  { font-size: 1.5em; }
.ph-xl  { font-size: 2em; }
.ph-2xl { font-size: 3em; }

/* ─── Navigation icons ─────────────────────────────────────────────────────── */

/* Usage: Advanced → Additional CSS class(es) → e.g. "nav-icon-catalog"
   Uses the solid (fill) glyph from Phosphor-Duotone font — no HTML editing needed. */

/* Клас продубльовано проти інлайнового core
   `.wp-block-navigation .wp-block-navigation-item__content{display:block}` — див. коментар
   про конвенцію на початку файлу. */
[class*="nav-icon-"] > .wp-block-navigation-item__content.wp-block-navigation-item__content{
	display: flex;
	align-items: center;
}

[class*="nav-icon-"] > .wp-block-navigation-item__content::before {
	font-family: "Phosphor-Duotone" !important;
	font-size: 1.25em;
	line-height: 1;
	vertical-align: middle;
	margin-right: 0.35em;
	position: relative;
	top: -0.06em;
	transition: all 0.6s var(--ease);
	will-change: transform;
}


/* Solid-layer codepoints from Phosphor-Duotone (::after glyph used as single icon): */
.nav-icon-catalog      > .wp-block-navigation-item__content::before { content: "\e465"; } /* squares-four       */
.nav-icon-door         > .wp-block-navigation-item__content::before { content: "\e61d"; } /* door              */
.nav-icon-phone        > .wp-block-navigation-item__content::before { content: "\e3b9"; } /* phone             */
.nav-icon-house        > .wp-block-navigation-item__content::before { content: "\e2c3"; } /* house             */
.nav-icon-cart         > .wp-block-navigation-item__content::before { content: "\e41f"; } /* shopping-cart     */
.nav-icon-location     > .wp-block-navigation-item__content::before { content: "\e319"; } /* map-pin-line      */
.nav-icon-account      > .wp-block-navigation-item__content::before { content: "\e4c3"; } /* user              */
.nav-icon-message      > .wp-block-navigation-item__content::before { content: "\e165"; } /* chat-centered-dots*/
.nav-icon-consultation > .wp-block-navigation-item__content::before { content: "\ebe7"; } /* perspective        */
.nav-icon-messenger    > .wp-block-navigation-item__content::before { content: "\e6d9"; } /* messenger-logo    */
.nav-icon-telegram     > .wp-block-navigation-item__content::before { content: "\e5bd"; } /* telegram-logo     */
.nav-icon-whatsapp     > .wp-block-navigation-item__content::before { content: "\e5d1"; } /* whatsapp-logo     */
.nav-icon-instagram    > .wp-block-navigation-item__content::before { content: "\e2d1"; } /* instagram-logo    */
.nav-icon-tiktok       > .wp-block-navigation-item__content::before { content: "\eaf3"; } /* tiktok-logo       */
.nav-icon-contact      > .wp-block-navigation-item__content::before { content: "\e3b9\e5bd\e2d1"; } /* phone + telegram + instagram */
.nav-icon-email        > .wp-block-navigation-item__content::before { content: "\e215"; } /* envelope          */

/* ─── Button icons ─────────────────────────────────────────────────────────── */

/* Usage: Advanced → Additional CSS class(es) on the button → e.g. "btn-icon-contact"
   Same icon font/codepoints as nav-icon-*, inserted before .button-text
   (the span our render_block_core/button filter wraps button text in). */

[class*="btn-icon-"] .button-text::before {
	font-family: "Phosphor-Duotone" !important;
	font-size: 1.25em;
	line-height: 1;
	vertical-align: middle;
	margin-right: 0.35em;
	position: relative;
	top: -0.06em;
}

.btn-icon-catalog      .button-text::before { content: "\e465"; } /* squares-four       */
.btn-icon-door         .button-text::before { content: "\e61d"; } /* door              */
.btn-icon-phone        .button-text::before { content: "\e3b9"; } /* phone             */
.btn-icon-house        .button-text::before { content: "\e2c3"; } /* house             */
.btn-icon-cart         .button-text::before { content: "\e41f"; } /* shopping-cart     */
.btn-icon-location     .button-text::before { content: "\e319"; } /* map-pin-line      */
.btn-icon-account      .button-text::before { content: "\e4c3"; } /* user              */
.btn-icon-message      .button-text::before { content: "\e165"; } /* chat-centered-dots*/
.btn-icon-consultation .button-text::before { content: "\ebe7"; } /* perspective        */
.btn-icon-messenger    .button-text::before { content: "\e6d9"; } /* messenger-logo    */
.btn-icon-telegram     .button-text::before { content: "\e5bd"; } /* telegram-logo     */
.btn-icon-whatsapp     .button-text::before { content: "\e5d1"; } /* whatsapp-logo     */
.btn-icon-instagram    .button-text::before { content: "\e2d1"; } /* instagram-logo    */
.btn-icon-tiktok       .button-text::before { content: "\eaf3"; } /* tiktok-logo       */
.btn-icon-contact      .button-text::before { content: "\e3cd\e17d"; } /* phone-list + chats */
.btn-icon-email        .button-text::before { content: "\e215"; } /* envelope          */

/* Icon-only: visually hides the label but keeps it for screen readers */
.nav-icon-only > .wp-block-navigation-item__content > .wp-block-navigation-item__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nav-icon-only > .wp-block-navigation-item__content::before {
	margin-right: 0;
}

/* Also support duotone <i> elements in custom content areas */
.wp-block-navigation-item__content .ph-duotone {
	margin-right: 0.35em;
	position: relative;
	top: -0.05em;
}



/*UNDERLINED LINK*/
[data-underline-link],
[data-underline-trigger] [data-underline-target],
.nav-link-u {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-trigger] [data-underline-target]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {

  [data-hover]:hover [data-underline-link]::before,
  [data-underline-trigger]:hover [data-underline-target]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}


/* Links and buttons */
/* Останній клас у селекторі підменю продубльовано: core друкує точно такий
   самий селектор інлайново (wp-block-navigation-inline-css, padding:0.5em 1em) —
   див. коментар про конвенцію на початку файлу. */
.tmm-link,
.top-nav a,
.top-nav a > .wp-block-navigation-item__label,
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content.wp-block-navigation-item__content,
.link-card__links a,
.slider-footer-cats a,
.info-sidebar .wp-block-navigation-item__content,
.offcanvas-info-menu .wp-block-navigation-item__content,
.contacts_phone-number a,
.contacts_email-link a {
	position: relative;
	padding: 0.1em;
	will-change: color, background-color;
	border-radius: calc(var(--border-radius) / 2);
}
.tmm-link::before,
.top-nav a > .wp-block-navigation-item__label::before,
.link-card__links a::before,
.slider-footer-cats a::before,
.info-sidebar .wp-block-navigation-item__content::before,
.offcanvas-info-menu .wp-block-navigation-item__content::before,
.contacts_phone-number a::before,
.contacts_email-link a::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: color-mix(in srgb, currentcolor 15%, transparent);
	transition: transform 900ms cubic-bezier(0.2, 1, 0.36, 1);
	transform-origin: right;
	transform: scaleX(0) rotate(0.001deg);
	will-change: transform;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
}

.top-nav{
	ul > li > a:hover > .wp-block-navigation-item__label  {
		color: var(--wp--preset--color--stone-950);
	}
	ul > li > a > .wp-block-navigation-item__label::before{
		background-color: var(--wp--preset--color--stone-50);
	}

	/* ul.wp-block-navigation-submenu > li > a:hover > .wp-block-navigation-item__label  {
		color: var(--wp--preset--color--stone-50);
	} */
	ul.wp-block-navigation-submenu > li > a > .wp-block-navigation-item__label::before{
		background-color: var(--wp--preset--color--stone-100);
	}
	a{
		font-weight: 400;
	}
}



.top-nav ul.wp-block-navigation-submenu > li > a

ul.wp-block-navigation-submenu > li > a:hover{
	border-color: var(--wp--preset--color--stone-200);
}


/* BUTTONS */
/* .wp-block-button__link продубльовано: global-styles друкує інлайново
   `:root :where(.wp-block-button .wp-block-button__link){border-radius:0}` з тією самою
   специфічністю (0,1,0) — див. коментар про конвенцію на початку файлу.
   Саме значення 0 задане в Редакторі сайту (Стилі → Кнопка → Рамка);
   якщо його там очистити, дубль можна буде зняти. */
.wp-block-button__link.wp-block-button__link,
.menu-catalog button.wp-block-navigation__responsive-container-open,
.main-nav button.wp-block-search__button,
.wc-block-mini-cart__button,
.single_add_to_cart_button,
.wc-block-components-checkout-place-order-button,
button.quick-order-form__submit{
	transition: all 0.35s ease-out !important;
	will-change: color, background-color, transform, border-radius, opacity, clip-path;
	overflow: hidden;
	border-radius: var(--border-radius);
	position: relative;
	&::before{
		content: "";
		display: block;
		position: absolute;
		width: 0.375em;
		height: 0.375em;
		border-radius: calc( var(--border-radius) / 4);
		background-color: currentColor;
		top: 0.375em;
		right: 0.375em;
		transition: transform 0.5s var(--ease), opacity 0.25s var(--ease);
		transform: translateY(-0.75em);
		opacity: 0;
	}
	&:hover{
		transform: scale(0.99) translateY(1px);
		
	}
	&:hover::before{
		transform: none;
		opacity: 1;
		animation: button_square_animation 2s infinite;
		animation-delay: 0.8s;
	}
}

/* Secondary button style variation */
.wp-block-button.is-style-secondary .wp-block-button__link{
	background-color: color-mix(in srgb, var(--wp--preset--color--stone-950) 80%, transparent);
	color: var(--wp--preset--color--stone-50);
	border-radius: var(--border-radius);
	backdrop-filter: blur(0.5rem);
	&:hover{
		background-color: var(--wp--preset--color--primary-500);
	}
}

.wc-block-mini-cart__button{
	&::before{
		width: 0.3em !important;
		height: 0.3em !important;
		top: calc(50% - 0.2em) !important;
		right: calc(50% - 0.24em) !important;
	}
}

/* .main-nav button.wp-block-search__button{
	&::before{
		width: 0.25em;
		height: 0.25em;
		top: calc(50% - 0.23em) !important;
		right: calc(100% - 1.95em) !important;
	}
} */


@keyframes button_square_animation{
	0%{
		transform: none;
		opacity: 1;
	} 
	49%{
		transform: translate(0.75em, 0);
		opacity: 0;
	}
	50%{
		opacity: 0;
		transform: translate(0, -0.75em);
	}
	100%{
		transform: none;
		oapcity: 1;
	}
}


.button-door{
	transition: all 0.35s ease-out;
	will-change: color, background-color, transform, border-radius, opacity, clip-path;
	overflow: hidden;
	&::before{
		content: "";
		display: block;
		position: absolute;
		width: 0.4em;
		height: 1.25em;
		border-radius: calc( var(--border-radius) / 4);
		/* background-color: var(--wp--preset--color--primary-500); */
		/* background-color: color-mix(in srgb, currentcolor 30%, transparent); */
		background-color: currentColor;
		top: 50%;
		right: 0.5em;
		transition: clip-path 0.35s ease-out;
		transform: translateY(-50%);
		clip-path: polygon(100% 90%, 100% 100%, 100% 100%, 100% 0%, 100% 0%, 100% 10%);
	}
	&:hover{
		transform: scale(0.98) translateY(1px);
	}
	&:hover::before{
		clip-path: polygon(70% 90%, 0% 100%, 100% 100%, 100% 0%, 0% 0%, 70% 10%);
	}
}


@media (hover: hover) and (pointer: fine) {
	.tmm-link:hover::before,
	.top-nav a:hover > .wp-block-navigation-item__label::before,
	.link-card__links a:hover::before,
	.slider-footer-cats a:hover::before,
	.info-sidebar .wp-block-navigation-item__content:hover::before,
	.offcanvas-info-menu .wp-block-navigation-item__content:hover::before,
	.contacts_phone-number a:hover::before,
	.contacts_email-link a:hover::before{
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}


/* Navigation */
header:has(.main-nav) {
    position: sticky;
    top: 0;
	z-index: 99;
	.header-bg{
		position: absolute;
		inset: 0;
		background-color: color-mix(in srgb, var(--wp--preset--color--stone-50) 80%, transparent);
		backdrop-filter: blur(1rem) saturate(2);
	}
	.main-nav{
		position: relative;
		z-index: 1;
	}
}

.menu-catalog button.wp-block-navigation__responsive-container-open:hover,
.main-nav button.wp-block-search__button:hover,
.main-nav button.wp-block-search__button[aria-expanded="true"]{
	background-color: var(--wp--preset--color--stone-950);
	color: var(--wp--preset--color--stone-50);
}

.main-nav button.wp-block-search__button[aria-expanded="true"]:hover{
	background-color: var(--wp--preset--color--primary-500);
}







/* Homepage */
/* .hero-section__slider .swiper{
	overflow: visible;
} */

.home_hero-section{
	.wp-block-buttons{
		@media (max-width: 767px){
			flex-direction: column;
			align-items: stretch;
			gap: 0;
		}
	}
}


.accent-title{
	--square-size: 10;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	position: relative;
	padding: 0 0.12em;
	@media (max-width: 767px){
		--square-size: 6;
	}
}

.accent-title[data-rotating-words]{
	margin-top: calc(var(--square-size) / 2 * 1px);
}

.accent-title::before,
.accent-title::after{
	content: "";
	width: 1px;
	height: 1px;
	display: inline-block;
	position: absolute;
	background-color: var(--wp--preset--color--primary-500);
	border-radius: calc(var(--border-radius) / (var(--square-size) * 2));
	transform: scale(var(--square-size));
}



.accent-title::before{
	left: 100%;
	top: 0%;
	animation: 3s accent_title_before_animation var(--ease) infinite;
}

@keyframes accent_title_before_animation{
	0%{
		left: 100%;
		top: 0%;
	}
	50%{
		left: 100%;
		top: 100%;
	}
	100%{
		left: 0%;
		top: 100%;
	}
}

.accent-title::after{
	left: 0%;
	top: 100%;
	animation: 3s accent_title_after_animation var(--ease) infinite;
}

@keyframes accent_title_after_animation{
	0%{
		left: 0%;
		top: 100%;
	}
	50%{
		left: 0%;
		top: 0%;
	}
	100%{
		left: 100%;
		top: 0%;
	}
}

.accent-title[data-rotating-words]{
	color: var(--wp--preset--color--primary-500);
}

/* GSAP variant: same look as .accent-title, but the border/squares are real
   DOM nodes (injected by initAccentTitleGsap in main.js) instead of
   ::before/::after, since GSAP cannot tween pseudo-elements directly. */
.accent-title-gsap{
	--square-size: 10;
	position: relative;
	padding: 0 0.12em;
	display: inline-block;
	@media (max-width: 767px){
		--square-size: 6;
	}
}

.accent-title-gsap__frame{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.accent-title-gsap__frame-shape{
	fill: none;
	stroke: color-mix(in srgb, currentColor 20%, transparent);
	stroke-width: 1px;
}

.accent-title-gsap__square{
	/* Real px box (not a 1px box blown up with transform:scale) so it
	   rasterizes on the pixel grid instead of getting resampled/blurry
	   when GSAP animates its scale. */
	width: calc(var(--square-size) * 1px);
	height: calc(var(--square-size) * 1px);
	display: inline-block;
	position: absolute;
	background-color: var(--wp--preset--color--primary-500);
	border-radius: calc(var(--border-radius) / 2);
	pointer-events: none;
	will-change: left, top, transform;
}

[data-rotating-words] {
  display: inline-block;
  position: relative;
}



.rotating-text__inner {
  display: inline-block;
}

.rotating-text__word {
  display: block;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0.12em;
}

.rotating-line{
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  white-space: nowrap;
}

.rotating-line-mask{
  overflow-x: visible !important;
  /* overflow-y: clip !important; */
}


.hero_slider{
	--slide-width: clamp(25rem, 25vw, 100%);
	--slide-width: min(31rem, 80vw);
	--slide-time: 8s;
	/* --swiper-wrapper-transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1); */


	.swiper-slide{
		width: var(--slide-width);
	}
	.hero_slide-cover{
		border-radius: var(--border-radius);
		color: var(--wp--preset--color--stone-50);
		overflow: hidden;
	}
	.hero_slide-badge{
		width: max-content;
		align-self: center;
		border-radius: var(--border-radius);
		background-color: var(--wp--preset--color--primary-500);
		color: var(--wp--preset--color--stone-50);
		font-weight: 400;
		font-size: var(--wp--preset--font-size--small);
	}

	.wp-block-button__link.wp-element-button{
		background-color: var(--wp--preset--color--stone-50);
		color: var(--wp--preset--color--stone-950);
		backdrop-filter: blur(0.5rem);
		padding: 0.75em 1em;
		&:hover{
			background-color: var(--wp--preset--color--primary-500);
			color: var(--wp--preset--color--stone-50);
		}
	}


	/* Класи навмисно продубльовані: підвищуємо специфічність до 0,3,0, щоб
	   ці правила гарантовано перебивали інлайнові стилі блоку
	   .wp-block-cb-carousel-v2 .cb-button-* (теж 0,2,0). Інакше результат
	   залежить від порядку підключення CSS, а LiteSpeed CSS Combine піднімає
	   style.css теми вище інлайнових стилів блоків — і стрілки "вилітають"
	   за межі контейнера лише для гостей (на закешованій версії). */
	.cb-button-next.cb-button-next,
	.cb-button-prev.cb-button-prev{
        background-color: color-mix(in srgb, var(--wp--preset--color--stone-950) 80%, transparent);
        padding: 1.5rem 1.5rem;
        color: var(--wp--preset--color--stone-50);
        border-radius: var(--border-radius);
		transition: all 0.3s ease-out;
		will-change: background-color, color, border-radius, transform;
		backdrop-filter: blur(0.5rem);
		@media (max-width: 767px){
			display: none !important;
		}
	}
	.cb-button-next:hover,
	.cb-button-prev:hover {
		background-color: var(--wp--preset--color--stone-950);
		color: var(--wp--preset--color--stone-50) !important;
		transform: scale(0.95);
	}
	.cb-button-next.cb-button-next::after,
	.cb-button-prev.cb-button-prev::after{
		font-size: 1rem;
	}

	.cb-button-next.cb-button-next{
		left: calc(50% + (var(--slide-width) / 2) + 1.5rem);
		right: auto;	
	}
	.cb-button-prev.cb-button-prev{
		right: calc(50% + (var(--slide-width) / 2) + 1.5rem);
		left: auto;	
	}
	.swiper-pagination-bullets{
		width: var(--slide-width);
		top: 0 !important;
		bottom: auto !important;
		padding: 1.5rem;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-wrap: nowrap;
		pointer-events: none;
		gap: 0.25rem;
	}
	.swiper-pagination-bullet{
		flex-grow: 1;
		border-radius: var(--border-radius);
		height: 3px !important;
		background-color: rgba(255 255 255 / 0.25) !important;
		opacity: 1 !important;
		position: relative;
		overflow: hidden;
		backdrop-filter: blur(1rem);
		margin: 0 !important;
	}
	.swiper-pagination-bullet::before{
		content: "";
		display: block;
		inset: 0;
		width: 100%;
		height: 100%;
		background-color: white;
		z-index: 1;
		transform-origin: 0 50%;
		transform: scaleX(0);
	}
	.swiper-pagination-bullet-active::before{
		animation: slider-bullet-animation var(--slide-time) linear;
	}
	
	.swiper-slide > div{
		transition: opacity 0.4s var(--ease);
	}


	.hero_slide-content,
	.wp-block-buttons{
		transition: all 0.7s var(--ease) !important; 
		will-change: transform, opacity;
		transform: none;
		opacity: 1;
	}

	.swiper-slide-active{
		.wp-block-buttons{
			transition-delay: 0.2s !important;
		}
	}

	.swiper-slide:not(.swiper-slide-active) > div{
		opacity: 0.2;
	}
	.swiper-slide:not(.swiper-slide-active){
		.hero_slide-content{
			transform: translateY(2em);
		}
		.wp-block-buttons{
			transform: translateY(0.5em);
			opacity: 0;
		}
	}



	h1, h2, h3, h4, h5, h6, p{
		text-wrap: balance;
	}
	
}



.slider-footer{
	.slider-footer-cats{
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		a{
			text-decoration: none;
			/* font-weight: 400; */
			display: inline-flex;
			z-index: 1;
			transition: color 0.3s ease-out, border-color 0.3s ease-out;
			border-bottom: 1px solid var(--wp--preset--color--stone-950);
			border-radius: 0;
			color: inherit;
			&::before{
				background-color: var(--wp--preset--color--stone-950);
			}
			&:hover{
				color: var(--wp--preset--color--stone-50);
				border-color: transparent;
			}
		}
	}

	@media(max-width: 767px){
		.wp-block-button,
		.wp-block-buttons,
		.wp-block-button__link{
			width: 100% !important;
		}		
	}

}

@keyframes slider-bullet-animation {
	0%{
		transform: scaleX(0);
	}
	100%{
		transform: scaleX(1);
	}
}



.single-product{
	a.reset_variations{
		display: none !important;
	}
	/* Two-column sizing for the attributes table — only above WooCommerce's
	   small-screen breakpoint. At ≤768px woocommerce-smallscreen.css stacks
	   every th/td into full-width blocks; this rule is more specific than its
	   `width:auto; max-width:100%`, so leaving it unscoped pinned the label to
	   40vw while its value stayed full width, and the nth-child zebra striping
	   painted two mismatched bars per row. */
	@media (min-width: 769px){
		.woocommerce table.shop_attributes th{
			text-align: left;
			width: 20rem;
			max-width: 40vw;
		}
	}
	/* Phone: keep the label/value pair side by side instead of stacked.
	   woocommerce-smallscreen.css turns each th/td into a full-width block at
	   ≤768px; making the row a 2-column grid restores the pair without having to
	   undo `display:block` on the cells (grid items may stay blocks). The
	   selector inherits `.single-product` from the enclosing nest, so it outranks
	   WooCommerce's `.woocommerce table.shop_attributes tr`. */
	@media (max-width: 768px){
		.woocommerce table.shop_attributes tr{
			display: grid;
			grid-template-columns: 1fr 1fr;
			/* stretch (the default) — with `baseline` each cell shrank to its own
			   text height, so a wrapped label left its zebra bar taller than the
			   value next to it. */
			align-items: stretch;
			/* The dotted row separator moves from the cells to the row itself:
			   smallscreen.css drops the th's border but keeps the td's, which drew a
			   stray half-width line under the value column only. */
			border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
		}
		.woocommerce table.shop_attributes tr th,
		.woocommerce table.shop_attributes tr td{
			padding: 0.5em;
			border-bottom: 0;
		}
	}
	.woocommerce table.shop_attributes td{
		font-style: normal;
	}

	/* ── Author-supplied HTML inside product content ───────────────────────
	   Product descriptions are imported raw HTML (not blocks): they carry
	   <iframe width="560" height="314"> YouTube embeds and full-size <img>
	   with hard width/height attributes. None of that is responsive, so on a
	   phone one 560px embed set the min-content width of the whole layout and
	   pushed the page into horizontal scroll — the title, the add-to-cart
	   button and the tabs all got clipped on the right.

	   Clamped here rather than per-product so no future import can reintroduce
	   it. Note the attributes table is also inside a Tabs-panel, so tables are
	   deliberately left alone. */
	:is(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .entry-content){
		:is(img, iframe, video, embed, object){
			max-width: 100%;
		}
		img{
			height: auto; /* honour the aspect ratio once width is clamped */
		}
		/* Video embeds keep the width from their HTML attribute (so desktop is
		   unchanged) but derive height from the ratio — otherwise the hard
		   height="314" stays put while max-width shrinks the width, and the
		   video letterboxes on phones. */
		iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"], [src*="player."]){
			aspect-ratio: 16 / 9;
			height: auto;
		}
	}
}

.woocommerce-cart.woocommerce-page{
	.wp-block-woocommerce-cart-order-summary-coupon-form-block,
	.wp-block-woocommerce-cart .wc-block-components-product-metadata,
	/* Доставку показуємо тільки на оформленні замовлення — у кошику ховаємо. */
	.wp-block-woocommerce-cart-order-summary-shipping-block,
	.wp-block-woocommerce-cart .wc-block-components-totals-shipping{
		display: none !important;
	}
	.wp-block-woocommerce-cart-totals-block a{
		border-radius: var(--border-radius) !important;
	}	
}

.woocommerce-checkout{
	/* Шапка сторінки тут щільніша за інфо-сторінки: заголовок «Замовлення» —
	   не герой, а підпис до форми, тож ближче до неї. Бічні падінги ті самі,
	   що успадковані від .archive-header — міняємо лише вертикаль. */
	.page-header--plain{
		padding: 3rem var(--wp--style--root--padding-right) 1rem var(--wp--style--root--padding-left);
	}

	/* Section titles (Контактна інформація / Адреса доставки / Способи оплати …)
	   styled like an h5 — block-rendered titles can't take a real .h5 class. */
	.wc-block-components-checkout-step__title,
	.wc-block-components-title{
		font-family: inherit;
		font-weight: var(--font-weight-heading);
		font-size: clamp(1.375rem, 1.3rem + 0.36vw, 1.625rem);
		line-height: 1.15;
		letter-spacing: -0.025em;
	}
	h3.wc-block-components-product-name{
		letter-spacing: 0 !important;
		flex-grow: 0;
	}
	/* Країна — лише Україна (за замовчуванням), селектор ховаємо. Індекс і
	   прізвище не використовуємо — теж ховаємо (обидва necessarily optional,
	   див. inc/checkout.php, інакше форма не пройде валідацію). */
	.wc-block-components-address-form__country,
	.wc-block-components-address-form__postcode,
	.wc-block-components-address-form__last_name{
		display: none !important;
	}
	/* Рахунок завжди збігається з доставкою (оплата при отриманні, податків
	   немає) — окремої адреси для рахунку не буває. */
	.wc-block-checkout__use-address-for-billing{
		display: none !important;
	}

	/* ── Контакти + адреса як одна секція ──────────────────────────────────
	   Ім'я та телефон нативно належать формі адреси: у блочному чекауті поле
	   не можна перенести до секції контактів (location='contact' існує лише
	   для власних полів Additional Checkout Fields API). Тому замість переносу
	   ховаємо другий заголовок і прибираємо відступ між кроками — візуально це
	   один блок «Контактна інформація» з полями Ім'я, Телефон, Email, Регіон,
	   Місто, Адреса. */
	.wc-block-checkout__shipping-fields .wc-block-components-checkout-step__heading{
		display: none;
	}
	.wc-block-checkout__contact-fields{
		margin-bottom: 0;
	}
	.wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-checkout-step__heading-container{
		margin-bottom: 0.5rem;
	}
	/* Відступи між кроками задають самі блоки — рідний margin-bottom на кожній
	   дитині кроку тут лише додає зайвого повітря. */
	.wc-block-components-checkout-step__content > *{
		margin-bottom: 0;
	}
	/* Смуга-роздільник і відступ над згодою з умовами (одразу після коментаря). */
	.wc-block-checkout__terms.wc-block-checkout__terms--with-separator{
		padding-top: 0;
		border-top: none;
	}
	/* Доставка — рівна вага тексту в опціях (назва методу лишається не
	   виділеною навіть коли обрана). Заголовок кроку не чіпаємо, щоб він був
	   однаковий з «Контактна інформація» та «Оплата». */
	.wc-block-checkout__shipping-option .wc-block-components-checkout-step__content *{
		font-weight: 400;
	}

	/* Порядок полів: Ім'я + Телефон / Регіон + Місто / Адреса.
	   Форма — flex-wrap, кожне поле має flex-basis calc(50% - 12px) і
	   flex-grow, крім address_1 (100%), тож пари самі стають по рядках. */
	/* The layout is declared in full here rather than tweaking WooCommerce's:
	   their rhythm comes from margin-top applied by DOM position
	   (`:first-child`, `:first-child + .text-input`), which lands on the wrong
	   fields once `order` moves things, and their flex rule stops matching at
	   narrow widths so the form silently falls back to block — where `order`
	   does nothing. Owning display/gap/basis makes it deterministic. */
	.wc-block-checkout__shipping-fields .wc-block-components-address-form{
		display: flex;
		flex-wrap: wrap;
		column-gap: 0.5rem;
		row-gap: 0.5rem;
		align-items: start;

		> *{
			margin-top: 0 !important;
			flex: 1 1 calc(50% - 0.25rem);
		}
		/* The select inside the state field carries its own margin-top (Woo
		   zeroes it only for `country`), which made the region wrapper 62px
		   instead of 50 and dropped the select 12px below its row partner.
		   Row spacing is owned by row-gap here, so no inner offsets. */
		.wc-blocks-components-select{
			margin-top: 0;
		}
		/* Адреса займає повний рядок під парами. */
		.wc-block-components-address-form__address_1{
			flex-basis: 100%;
		}

		.wc-block-components-address-form__first_name{ order: 1; }
		.wc-block-components-address-form__phone{ order: 2; }
		.wc-block-components-address-form__state{ order: 3; }
		.wc-block-components-address-form__city{ order: 4; }
		.wc-block-components-address-form__address_1{ order: 5; }
	}
	@media (max-width: 700px){
		.wc-block-checkout__shipping-fields .wc-block-components-address-form > *{
			flex-basis: 100%;
		}
	}
	/* ── Колонки 50/50 ────────────────────────────────────────────────────
	   WooCommerce ділить 65/35 і перемикає розкладку не медіа-запитом, а
	   container query на .wp-block-woocommerce-checkout (container-type:
	   inline-size). Використовуємо той самий поріг, щоб колонки складалися
	   рівно тоді ж, коли й у них.

	   Кнопку «Підтвердити замовлення» тут НЕ переносимо в колонку підсумку:
	   у розмітці блок жорстко прив'язаний parent:
	   ["woocommerce/checkout-fields-block"], а розкладкою (display:contents +
	   grid) обидві колонки починають ділити спільні рядки, і високий підсумок
	   зсуває поля вниз. */
	@container (min-width: 700px){
		/* Проміжок між колонками — gap, а не відсоткові падінги колонок
		   (WooCommerce ставить padding-right: 4.53% на поля і padding-left:
		   2.26% на підсумок). Контейнер і так flex, тож flex: 1 1 0 дає рівні
		   половини вже з відрахованим gap — без calc() по ширині. */
		.wc-block-components-sidebar-layout{
			gap: 3rem;
		}
		.wc-block-components-sidebar-layout .wc-block-components-main{
			flex: 1 1 0;
			width: auto;
			padding-right: 0;
		}
		.wc-block-components-sidebar-layout .wc-block-checkout__sidebar{
			flex: 1 1 0;
			width: auto;
			padding-left: 0;
		}
	}

	/* ── Рамки полів ──────────────────────────────────────────────────────
	   Спокійна рамка від currentColor, помітніша на ховері та зелена у фокусі.
	   Ховер/фокус міняють лише border-color, щоб не перевизначати товщину й
	   стиль і щоб transition був плавним. */
	/* [type] у селекторі — не прикраса: рідне правило WooCommerce перелічує
	   input[type="email"], input[type="text"] тощо всередині
	   .wc-block-components-form, і без атрибута наше програє за специфічністю. */
	.wc-block-components-form .wc-block-components-text-input input[type],
	.wc-block-components-textarea,
	.wc-blocks-components-select__select{
		border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
		transition: border-color 0.25s ease-out;
	}
	.wc-block-components-form .wc-block-components-text-input input[type]:hover,
	.wc-block-components-textarea:hover,
	.wc-blocks-components-select__select:hover{
		border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
	}
	/* Повний border, а не лише border-color: рідне правило фокуса WooCommerce
	   ставить border: 1.5px solid, і рамка стрибала б у товщині. */
	.wc-block-components-form .wc-block-components-text-input input[type]:focus,
	.wc-block-components-textarea:focus,
	.wc-blocks-components-select__select:focus{
		border: 1px solid var(--wc-green);
		outline: none;
	}

	/* ── Обрана опція доставки / оплати ───────────────────────────────────
	   Рамку малює inset box-shadow (не border — інакше поїде висота рядка).
	   color задається тут же, тож currentColor у тіні й фоні резолвиться в
	   зелений. Клас стану — саме --checked-option-highlighted, а батьківський
	   --highlight-checked потрібен, щоб перебити рідні 1.5px WooCommerce. */
	.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
	.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted{
		box-shadow: inset 0 0 0 1px currentColor;
		background: color-mix(in srgb, currentcolor 10%, transparent);
		color: var(--wc-green);
	}
	/* В оплаті рамку несе зовнішня обгортка аккордеона (разом з описом), а не
	   сам рядок — гасимо внутрішню, щоб не було подвійного контуру. Колір
	   тексту успадковується від обгортки. */
	.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option-checked{
		box-shadow: none;
		background: transparent;
	}

	/* ── Компактніші опції доставки та оплати ─────────────────────────────
	   Сам кружок позиційований абсолютно (left/top: 16px), а лівий падінг
	   опції — 48px = 16 (відступ) + 20 (кружок) + 12 (зазор до тексту). Тому
	   падінг не можна міняти окремо: зменшуємо його до 0.5rem разом із
	   координатами інпута, зберігаючи ті самі 20 + 12 ліворуч. */
	.wc-block-components-radio-control__option{
		/* В оплаті опція загорнута в accordion-option, і саме вона була
		   контейнером позиціонування для інпута — кружок відлічувався від неї
		   й вилазив на 1px над рамкою. Прив'язуємо інпут до самої опції, тоді
		   top працює однаково і в доставці, і в оплаті. */
		position: relative;
		padding: 0.5rem 0.5rem 0.5rem calc(0.5rem + 20px + 12px);
	}
	.wc-block-components-radio-control__input{
		left: 0.5rem;
		/* top дорівнює padding-top, щоб кружок лишався на рівні першого рядка
		   тексту (в оплаті під назвою буває опис у два рядки). */
		top: 0.5rem;
		/* В оплаті на кружок навішано translateY(-9px) — компенсація під
		   рідний top:16px. З новим top вона зсувала кружок на 1px над рамкою.
		   Для доставки WooCommerce гасить її сам, для оплати — ні. */
		transform: none;
	}
	/* Способи доставки мають власне, специфічніше правило у WooCommerce
	   (.wp-block-woocommerce-checkout .…__package .…__input{top:16px}) — без
	   цього дубля кружок доставки лишався б на 16px, а падінг уже 8px. */
	.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__input{
		top: 0.5rem;
	}
	/* Опис під обраним способом оплати — той самий лівий відступ, що й у
	   опції, щоб текст опису вирівнювався з назвою методу. */
	.wc-block-components-radio-control-accordion-content{
		padding: 0 16px 16px calc(0.5rem + 20px + 12px);
	}

	/* Вартість доставки вже вписана в назву методу — ховаємо дубльований
	   вторинний лейбл ціни (він показує 0-вартісне «Розраховується…»). */
	.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label{
		display: none;
	}
	.wc-block-components-product-metadata{
		display: none !important;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__description{
		justify-content: center;
	}
	.wc-block-components-totals-shipping__via{
		display: none !important;
	}
	.wc-block-components-button:not(.is-link){
		padding: 1em;
    	border-radius: var(--border-radius);
		transition: background-color 0.35s ease-out;
		&:hover{
			background-color: var(--wp--preset--color--primary-500);
		}
	}

	/* ── Підсумок замовлення на вузьких екранах ───────────────────────────
	   Нижче 700px WooCommerce виводить підсумок двічі: згорнутий сайдбар
	   угорі і повний дубль перед кнопкою «Підтвердити замовлення»
	   (checkout-order-summary-block-fill-wrapper — рендериться саме на цих
	   ширинах, вище 700px їхній же container query його ховає). Ховаємо
	   верхній: нижній повний і стоїть там, де покупець перевіряє замовлення
	   перед підтвердженням.

	   Поріг — той самий container query на .wp-block-woocommerce-checkout, що
	   й у колонок нижче: медіа-запит по вікну розійшовся б із моментом, коли
	   зʼявляється дубль. */
	@container (max-width: 699px){
		.wc-block-checkout__sidebar{
			display: none;
		}
	}

	/* Головна дія чекауту — червона. Ховер темніший: спільний ховер решти
	   кнопок (правило вище) — це якраз primary-500, тож на цій кнопці він не
	   давав би жодної зміни. Правило має йти після нього — специфічність
	   однакова, виграє порядок. */
	.wc-block-components-checkout-place-order-button{
		background-color: var(--wp--preset--color--primary-500);
		&:hover{
			background-color: var(--wp--preset--color--primary-600);
		}
	}
}


.wc-block-mini-cart__template-part{
	.wc-block-components-product-metadata{
		display: none !important; 
	}
	.wc-block-components-product-name{
		text-decoration: none;
	}
	.wc-block-mini-cart__footer{
		.wc-block-components-totals-item__description{
			display: none !important;
		}
		.wc-block-mini-cart__footer-actions{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 0.25rem;
			/* Швидке замовлення — full width, on top. */
			.quick-order-form{
				flex: 1 1 100%;
				order: 0;
			}
			/* «Перейти в кошик» приховано — лишається лише «Оформити
			   замовлення», яке займає весь ряд. */
			.wc-block-mini-cart__footer-cart{
				display: none;
			}
			.wc-block-mini-cart__footer-checkout{
				flex: 1 1 100%;
				order: 2;
				margin: 0;
			}
			a {
				border-radius: var(--border-radius) !important;
			}
			.quick-order-form{
				margin-top: 0 !important;
				margin-bottom: 1rem !important;
			}
		}
	}
}




/* DESKTOP FIRST BREAKPOINTS */

/* xl <= Extra extra large (xxl) */
@media (max-width: 1399.98px) {

}

/* lg <= Extra large (xl) */
@media (max-width: 1199.98px) {
	.main-nav button.wp-block-search__button::after,
	.middle-menu_buttons-right,
	.top-nav .top-menu-left,
	.top-nav .top-menu-right li:not(.is-mobile),
	.middle-nav .middle-nav__left{
		display: none !important;
	}

	.wp-block-group.top-menu-right {
    width: 100%;
	}
	.wp-block-group.top-menu-right > nav > ul {
   	 justify-content: space-between;
	}
	.is-layout-constrained > .aligncenter.brand-logo{
		margin-left: 0 !important;
	}

}

/* md <= Large (lg) */
@media (max-width: 991.98px) {



}

/* sm <= Medium (md) */
@media (max-width: 781.98px) {


}


/* xs <= Small (sm) */
@media (max-width: 599.98px) {

}


@media (max-width: 399px){
	/* Клас продубльовано: у блока логотипа в offcanvas-меню є власний
	   Additional CSS (`.wp-custom-css-e4fd8414{max-width:12rem}`) з тією самою
	   специфічністю — див. коментар про конвенцію на початку файлу. */
	.brand-logo.brand-logo{
		margin-left: 0 !important;
		max-width: 9rem;
	}
}

/* === MOBILE FIRST === */

/* Custom (xs) */
@media (min-width: 0) {

}

/* Small (sm) */
@media (min-width: 600px) {
}

/* Medium (md) */
@media (min-width: 782px) {

}

/* Large (lg) */
@media (min-width: 992px) {

}

/* Extra large (xl) */
@media (min-width: 1200px) {
.top-nav .top-menu-right li.is-mobile,
.middle-nav .menu-catalog.is-mobile{
	display: none;
}
}

/* Extra extra large (xxl) */
@media (min-width: 1400px) {

}

.u-contrast-medium{
	opacity: .6;
}



.benefits-item{
	flex: 1 1 220px;
	transition: background-color 0.24s ease-out;
	border-radius: var(--border-radius);
	.wp-block-starter-phosphor-icon{
		transition: all 0.3s ease-out;
		will-change: transform, color;
	}

	@media (max-width: 767px){
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 1rem !important;
		gap: 1rem !important;

		> div{
			align-items: flex-start !important;
			text-align: left;
		}

		.wp-block-heading,
		p{
			text-align: left !important;
		}
	}
}

.benefits-item:hover{
	background-color: white;
	.wp-block-starter-phosphor-icon{
		color: var(--wp--preset--color--primary-500);
		transform: scale(1.1);
	}
}



/* Homepage – Categories */

.home_categories{
	/* row gap used to pull the nav buttons/dots back up/down to the
	   header/footer rows — keep in sync with the section's own blockGap */
	--row-gap: 2rem;
	overflow: hidden;
	.swiper{
		overflow: visible;
		/* margin-bottom: 0 !important; */
	}

	.swiper-slide{
		width: min(23rem, 80vw);
	}

	.home_categories-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.home_categories-slider-row{
		position: relative;
		overflow: visible;
	}
	.home_categories-slider .swiper{
		overflow: visible;
		@media (max-width: 1023px){
			margin-bottom: 2rem !important;
		}
	}

	/* Slider nav buttons — same look as hero, pulled up to sit level with the heading row.
	   Класи продубльовані заради специфічності — див. коментар у .hero_slider */
	.cb-button-prev.cb-button-prev,
	.cb-button-next.cb-button-next{
		position: absolute;
		top: auto;
		bottom: calc(100% + var(--row-gap));
		width: 3rem;
		height: 3rem;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: color-mix(in srgb, var(--wp--preset--color--stone-950) 70%, transparent);
		color: var(--wp--preset--color--stone-50);
		border-radius: var(--border-radius);
		transition: all 0.3s ease-out;
		will-change: background-color, color, transform;
		@media(max-width: 1023px){
			display: none;
		}
	}
	.cb-button-prev:hover,
	.cb-button-next:hover{
		background-color: var(--wp--preset--color--stone-950);
		color: var(--wp--preset--color--stone-50) !important;
		transform: scale(0.95);
	}
	.cb-button-prev.cb-button-prev::after,
	.cb-button-next.cb-button-next::after{
		font-size: 1rem;
	}
	.cb-button-next.cb-button-next{
		right: 0;
		left: auto;
	}
	.cb-button-prev.cb-button-prev{
		right: 3.25rem;
		left: auto;
	}

	/* Pagination dots — pulled down to sit level with the catalog link row */
	.home_categories-footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		@media (max-width: 1023px){
			display: none;
		}
	}
	.home_categories-catalog-link{
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
		padding-bottom: 0.25rem;
		transition: opacity 0.2s ease;
	}
	.home_categories-catalog-link:hover{
		opacity: 0.7;
	}
	.cb-pagination{
		position: absolute;
		bottom: auto !important;
		        /* --wp--custom--carousel-block--pagination-top: calc(100% + var(--row-gap) + 1.5em) !important; */
		top: calc(100% + var(--row-gap) +3em) !important;
		left: 0;
		right: auto;
		width: auto;
		display: flex;
		align-items: center;
		gap: 0.25rem;
		/* @media (max-width: 1023px){
			display: none !important;
		} */
	}
	.cb-pagination .swiper-pagination-bullet{
		width: 1rem;
		height: 0.25rem;
		margin: 0;
		background-color: var(--wp--preset--color--stone-950);
		opacity: 1;
		border-radius: 2px !important;
		transition: all 0.2s ease;
		margin: 0 !important;
	}
	.cb-pagination .swiper-pagination-bullet-active{
		width: 2rem;
		opacity: 1;
		background-color: var(--wp--preset--color--primary-500) !important;
	}
}



/* Native WooCommerce Product Gallery Next/Previous block, repurposed as the
   nav arrows for the "Популярні товари" product carousel — same look
   (size, colors, spacing) as the swiper .cb-button-prev/.cb-button-next
   nav used by the hero and categories sliders above, so all slider/carousel
   arrows on the site read as one component regardless of the underlying
   carousel implementation. */
/* Клас продубльовано проти `:root :where(.is-layout-flex){gap:1.25rem}` із
   global-styles — див. коментар про конвенцію на початку файлу. */
.wc-block-next-previous-buttons.wc-block-next-previous-buttons{
	gap: var(--gap);
}
.wc-block-next-previous-buttons__button{
	width: 3rem;
	height: 3rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--wp--preset--color--stone-950) 80%, transparent);
	color: var(--wp--preset--color--stone-50);
	border-radius: var(--border-radius);
	transition: all 0.3s ease-out;
	will-change: background-color, color, transform;
	backdrop-filter: blur(1rem);
}
.wc-block-next-previous-buttons__button:hover{
	background-color: var(--wp--preset--color--stone-950);
	color: var(--wp--preset--color--stone-50) !important;
	transform: scale(0.95);
}
.wc-block-next-previous-buttons__button[aria-disabled="true"]{
	cursor: not-allowed;
	opacity: 0.35;
}
.wc-block-next-previous-buttons__icon{
	/* This SVG ships with fixed width/height attributes (8x12) and no
	   viewBox, so setting both CSS dimensions stretches it out of
	   proportion — set only height and let width follow the intrinsic
	   2:3 ratio so the chevron reads the same weight as the swiper glyph. */
	width: auto;
	height: 1rem;
}

/* WooCommerce only hides the carousel prev/next arrows on touch below 600px.
   Hide them on every touch device regardless of viewport width — swipe is the
   intended interaction there, so the arrows are redundant. */
@media (hover: none) and (pointer: coarse) {
	.wp-block-woocommerce-product-collection:has(.is-product-collection-layout-carousel) .wc-block-next-previous-buttons{
		display: none;
	}
}



/* Link card block — reusable, not tied to any section.
   Full-bleed background image + overlay, 35% black by default. The whole
   card is one click target to buttonUrl via a stretched ::after on the
   "view all" link — the title is plain text (not a second, redundant link)
   since the card is already fully clickable. Subcategory links are raised
   above that stretched pseudo (own z-index) so they remain independently
   clickable wherever they're shown.

   Touch devices (no hover): subcategory links + "view all" are visible and
   reachable AT ALL TIMES — there's no hover to reveal them with, so hiding
   them by default would make them undiscoverable.

   Hover-capable devices (pointer:fine): subcategory links + "view all" are
   hidden by default and reveal on hover (links stagger left→right), the
   overlay tints primary, the title settles into place, and hovering a
   specific subcategory link swaps the background image to that link's own
   image. See the `@media (hover: hover) and (pointer: fine)` block below —
   that's the ONLY place this hide/reveal behavior is defined. */

.link-card{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1rem;
	height: 100%;
	aspect-ratio: 4 / 5.75;
	padding: 2.5rem;
	border-radius: var(--border-radius);
	overflow: hidden;
	color: var(--wp--preset--color--stone-50);
	background-color: var(--wp--preset--color--stone-950);
	isolation: isolate;

	/* background images stack */
	.link-card__media{
		position: absolute;
		inset: 0;
		z-index: -2;

		img{
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0;
			transform: scale(1.07);
			transition: opacity 0.35s ease, transform 0.8s ease-out;

			&:first-child{
				opacity: 1;
			}
		}

		/* Subcategory hover images live here as background-image layers, NOT
		   <img> tags — their URL (inline --link-bg) is applied only in the
		   :hover rule below, so each image is fetched only on first hover
		   instead of loading upfront with the card. */
		.link-card__media-layer{
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 0;
			transform: scale(1.03);
			transition: opacity 0.35s ease, transform 0.6s ease-out;
		}
	}

	/* overlay */
	&::before{
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: linear-gradient(to left, rgba(0 0 0 / 0.25) 35%, rgba(0 0 0 / 0.6) 75%);
		transition: background-color 0.35s ease;
	}

	/* image swap while hovering an individual link (desktop only, see below).
	   Applying background-image here (not in the base .link-card__media-layer
	   rule) is what defers the network fetch until the link is first hovered. */
	&:has(a[data-link-target]:hover) .link-card__media img:first-child{
		opacity: 0;
	}
	&:has(a[data-link-target="1"]:hover) .link-card__media-layer[data-link-img="1"],
	&:has(a[data-link-target="2"]:hover) .link-card__media-layer[data-link-img="2"],
	&:has(a[data-link-target="3"]:hover) .link-card__media-layer[data-link-img="3"],
	&:has(a[data-link-target="4"]:hover) .link-card__media-layer[data-link-img="4"],
	&:has(a[data-link-target="5"]:hover) .link-card__media-layer[data-link-img="5"],
	&:has(a[data-link-target="6"]:hover) .link-card__media-layer[data-link-img="6"],
	&:has(a[data-link-target="7"]:hover) .link-card__media-layer[data-link-img="7"],
	&:has(a[data-link-target="8"]:hover) .link-card__media-layer[data-link-img="8"],
	&:has(a[data-link-target="9"]:hover) .link-card__media-layer[data-link-img="9"],
	&:has(a[data-link-target="10"]:hover) .link-card__media-layer[data-link-img="10"]{
		opacity: 1;
		transform: scale(1);
		background-image: var(--link-bg);
	}

	/* Real full-card link layer, not a pseudo-element (see render.php docblock
	   for why). Sits above the media/overlay (z:-2/-1) but below the
	   subcategory links (z:2) so those stay individually clickable. */
	.link-card__stretched-link{
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	/* Raised above .link-card__stretched-link (z-index:1). The <ul> itself is
	   pointer-events:none — its <li> boxes run the full card width even
	   where the label text is short, and without this, that empty space
	   would swallow clicks meant for the stretched card link underneath.
	   Only the real <a> tags opt back into pointer-events. */
	.link-card__links{
		position: relative;
		z-index: 2;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1 1 auto;
		min-width: 0;
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: 1rem;
		font-weight: var(--font-weight-heading);
		line-height: 1.5;
		gap: 0.25rem;
		a{
			display: inline-block;
			pointer-events: auto;
			color: inherit;
			text-decoration: none;
			transition: color 0.4s ease-out;
			padding: 0;
			font-weight: var(--font-weight-heading);
			border-radius: 0;
			border-bottom: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
			&::before{
				background-color: var(--wp--preset--color--stone-50);
			}
			.link-card__link-text{
				position: relative;
			}
			&:hover{
				color: var(--wp--preset--color--stone-950);
			}
		}
	}

	/* Title uses the .h5 utility class for size; only color/spacing here.
	   Color:inherit (0-1-0) beats the global h1..h6{color:stone-950} rule so
	   the heading stays light on the dark card. Plain text, not a link — the
	   card's one and only link is .link-card__stretched-link. */
	.link-card__title{
		margin: 0 0 1em;
		color: inherit;
	}

	/* Real link styled like the hero-slider button (full-width, blurred
	   translucent fill). Raised above .link-card__stretched-link (z-index:1) so
	   it owns hit-testing over its own box — that's what lets it show a genuine
	   :hover state (primary tint) only when the pointer is over the BUTTON,
	   rather than whenever the whole card is hovered. It links to the same
	   buttonUrl as the stretched link, so clicks land in the same place. */
	.link-card__all{
		position: relative;
		z-index: 2;
		display: block;
		width: 100%;
		text-align: center;
		text-decoration: none;
		color: var(--wp--preset--color--stone-950);
		font-size: 1rem;
		font-weight: var(--font-weight-heading);
		background-color: var(--wp--preset--color--stone-50);
		font-size: var(--wp--preset--font-size--small);
		border-radius: var(--border-radius);
		backdrop-filter: blur(0.5rem);
		padding: 0.75em 1em;
		transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
		&:hover{
			background-color: var(--wp--preset--color--primary-500);
			color: var(--wp--preset--color--stone-50);
			border-color: transparent;
			transition-delay: 0 !important;
		}
	}
}

/* Hover-capable devices only (desktop): subcategory links + "view all" are
   hidden by default and reveal on hover — touch devices never match this
   query, so they keep the always-visible base state further up. */
@media (hover: hover) and (pointer: fine) {
	.link-card{
		cursor: pointer;

		.link-card__links li{
			opacity: 0;
			transform: translateX(-0.6rem);
			transition: opacity 0.35s ease, transform 0.4s var(--ease);

			a{
				pointer-events: none;
			}
		}

		.link-card__all{
			opacity: 0;
			transform: translateY(0.75rem);
			transition: opacity 0.35s ease, transform 0.6s ease-out, background-color 0.35s ease;
		}

		/* Deliberately NOT hover-gated (no pointer-events:none default here,
		   unlike the subcategory links) — the whole-card click should work
		   the instant the pointer lands, not only after the reveal animation
		   commits. Gating it behind :hover previously caused a real race: a
		   fast hover+click could hit-test before the style recalc from
		   mouseenter had flushed pointer-events to auto, silently eating the
		   click. Always-on removes that race entirely; touch already worked
		   this way (no @media(hover:hover) applies there). */

		&:hover{
			&::before{
			}
			.link-card__media img{
				transform: scale(1);
			}
			.link-card__links li{
				opacity: 1;
				transform: none;
				/* stagger reveal, left→right (--i set per item in render.php) */
				transition-delay: calc(var(--i, 0) * 0.045s);

				a{
					pointer-events: auto;
				}
			}
			.link-card__all{
				opacity: 1;
				transform: none;
				transition-delay: 0.2s;
				&:hover{
					transition-delay: 0s !important;
				}
			}
		}
	}
}

/* Touch devices only: links are always visible (see base rule above), so
   here it's just layout polish — title reads first, the subcategory list
   sits flush against "Відкрити всі" at the bottom, and each link's sweep
   background is permanently shown (same visual as a hovered link on
   desktop) since touch has no hover state to reveal it with. */
@media (hover: none) {
	.link-card{
		&::before{
			background-image: linear-gradient(to left, rgba(0 0 0 / 0.33) 25%, rgba(0 0 0 / 0.7) 60%);

		}
		.link-card__links{
		}
		.link-card__links a{
			/* color: var(--wp--preset--color--stone-950); */
			/* padding: 0.3em 0.5em; */
		}
		.link-card__links a::before{
			transform-origin: left;
			/* transform: scaleX(1) rotate(0.001deg); */
			/* background-color: color-mix(in srgb, var(--wp--preset--color--stone-950) 40%, transparent); */
			backdrop-filter: blur(0.25rem);
		}
	}
}

@media (max-width: 767px){
	.link-card{
		aspect-ratio: 4 / 6;
		padding: 1.5rem;
	}
}



/* WooCommerce — force a consistent 4:5 ratio on every product image.
   The "Product Image" block (catalog, related/cross-sell, search) and the
   single-product gallery use different underlying image sizes — the catalog
   one is now cropped 4:5 at the file level (see woocommerce_thumbnail_cropping
   settings), but the single-product "full" image is never cropped by
   WooCommerce itself. object-fit:cover here guarantees the same visual ratio
   regardless of a future product photo's native dimensions. */
.wc-block-components-product-image img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img{
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	object-fit: cover;
}



.wc-block-mini-cart__button{
	position: relative;
	padding: 0.75em !important;
  	background-color: transparent;
	color: inherit;
  	border-radius: var(--border-radius);
	&:hover{
		background-color: var(--wp--preset--color--stone-950);
		color: var(--wp--preset--color--stone-50);
	}
	.wc-block-mini-cart__quantity-badge{
		position: static;
		span.wc-block-mini-cart__badge {
			background: var(--wp--preset--color--primary-500) !important;
			color: var(--wp--preset--color--stone-50) !important;
			margin: 0 !important;
			top: 2px !important;
			left: auto !important;
			right: 2px !important;
			transform: none !important;
			padding: 0.25em 0.5em;
			width: auto;
			height: auto;
			font-size: 0.625rem;
			border-radius: calc(var(--border-radius) / 2);
		}
	}
}









/* Drag-to-scroll cursor affordance for native WP/WooCommerce scroll-snap
   carousels (see main.js findNativeScrollSnapCarousels/enableDragScroll). */
.has-drag-scroll{
	cursor: grab;
}
.has-drag-scroll img{
	-webkit-user-drag: none;
	user-drag: none;
}
.has-drag-scroll.is-dragging{
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}
.has-drag-scroll.is-dragging *{
	user-select: none;
}



/* WooCommerce — "Тільки іконка" style for the Add to Cart button block.
   No padding/height/border-radius/font-size overrides — those stay whatever
   is set on the button in the editor (spacing/border-radius/typography
   supports), including the button's own em-based padding.
   This only covers the frontend's actual <span data-wp-text> label (the
   Interactivity API render). The Site Editor's own preview component (no
   build step here, can't patch its JS) renders the label as a bare text
   node with no wrapper, so it isn't addressable by this CSS — that's a
   known canvas-only cosmetic mismatch, not a frontend issue. */
.wp-block-button.is-style-icon-only .wc-block-components-product-button__button > span{
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 100%;
	opacity: 0;
}



.wp-block-button.is-style-icon-only .wc-block-components-product-button__button{
	aspect-ratio: 1;
	position: relative;
}

.wp-block-button.is-style-icon-only .wc-block-components-product-button__button::before{
	font-family: "Phosphor-Duotone";
	content: "\e41f";
	opacity: 1;
}

.wp-block-button.is-style-icon-only .wc-block-components-product-button__button::after{
	content: "+";
	top: 0;
	right: 0;
	padding: 0 0.25em;
	position: absolute;
	font-weight: 300;
}


.wp-block-button.is-style-outline .wp-block-button__link{
	&:hover{
		background-color: var(--wp--preset--color--stone-950);
		color: var(--wp--preset--color--stone-50);
		border-color: transparent;
	}
	&.has-primary-500-color:hover{
		background-color: var(--wp--preset--color--stone 950);
		color: var(--wp--preset--color--stone-50) !important;
	}
}

.wp-block-button.is-style-brand .wp-block-button__link{
	background-color: var(--wp--preset--color--primary-500);
}


li.wc-block-product{
	span[data-wp-bind--hidden="!state.displayViewCart"],
	.added_to_cart.wc_forward{
		display: none;
	}
}



.ph-duotone.ph-star.is-filled{
	&::before{
		opacity: 1 !important;
	}
	&::after{
		display: none !important;
	}
}


/* ===== FOOTER CUSTOM (footer rework) ===== */
.main-footer .footer-logo{ display:inline-block; line-height:0; color: var(--wp--preset--color--stone-50); }
.main-footer .footer-logo svg{ width:200px; height:auto; display:block; }

/* Footer link menus */
.main-footer .footer-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.25rem; }
.main-footer .footer-menu li{ margin:0; }
.main-footer .footer-menu a{ display:inline-block; }

/* Social icons: glyph in a bordered square (currentColor); brand fill + zoom on hover */
/* The footer used to redefine the whole social-icon treatment here. That look
   is now the site-wide default (see "Contacts pattern" above), so the override
   is gone — one definition, one place to change it. */

/* Standardised footer link hover (same sweep as .top-nav a).
   The contacts links are no longer listed here — they joined the site-wide
   .tmm-link sweep lists above, so the effect follows the contacts pattern into
   the popups instead of stopping at the footer. */
.main-footer :is(.footer-menu, .footer-copyright) a,
.main-footer a.footer-link{ position:relative; isolation:isolate; padding:0.1em; border-radius:calc(var(--border-radius) / 2); text-decoration:none; will-change:color, background-color; }
.main-footer :is(.footer-menu, .footer-copyright) a::before,
.main-footer a.footer-link::before{ content:""; position:absolute; inset:0; background-color: color-mix(in srgb, currentColor 15%, transparent); transition: transform 900ms cubic-bezier(0.2,1,0.36,1); transform-origin:right; transform: scaleX(0) rotate(0.001deg); border-radius:inherit; z-index:-1; pointer-events:none; will-change:transform; }
@media (hover:hover) and (pointer:fine){
  .main-footer :is(.footer-menu, .footer-copyright) a:hover::before,
  .main-footer a.footer-link:hover::before{ transform-origin:left; transform: scaleX(1) rotate(0.001deg); }
}

/* ===== OFFCANVAS "Інформація" MENU (catalog overlay, nav ref 3180) ===== */
/* Shares the site-wide sweep (see the .tmm-link selector lists above); only the
   colours are overridden here so it matches the drill-down menu's primary-500. */
.offcanvas-info-menu ul.wp-block-navigation__container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  align-items: center;
}
.offcanvas-info-menu .wp-block-navigation-item__content{
  /* the sweep ::before sits at z-index:-1; without a stacking context it hides
     behind the overlay panel's background — same gotcha as the footer links */
  isolation: isolate;
  text-decoration: none;
  transition: color 0.25s ease-out, font-variation-settings 0.25s ease-out;
  /* theme.json elements.link forces 500; drop to 400 and thicken on hover so this
     matches the drill-down menu above it */
  font-weight: 400;
  font-variation-settings: 'wght' 400;
}
.offcanvas-info-menu .wp-block-navigation-item__content::before{
  background-color: color-mix(in srgb, var(--wp--preset--color--primary-500) 25%, transparent);
}
@media (hover: hover) and (pointer: fine){
  .offcanvas-info-menu .wp-block-navigation-item__content:hover{
    color: var(--wp--preset--color--primary-500);
    font-variation-settings: 'wght' 600;
  }
}

/* Full-width consultation CTA under the Інформація menu */
.offcanvas-consultation{ width: 100%; }
.offcanvas-consultation .wp-block-button{ width: 100%; }
.offcanvas-consultation .wp-block-button__link{
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ===== ANIMATED LOGO (dveriland) =====
   Markup lives in two places: the header logo is the media-library SVG
   (uploads/2026/07/dveriland-brand-logo.svg) which SVG Support inlines
   client-side, and the footer logo is true inline SVG in template part 318.
   The file itself carries no <style> — this block is the single source.
   Variant: the door leads, the letters follow one beat later. */
.dvl-logo{
  /* Two separate axes, deliberately:
     --dvl-rest = the RESTING colour (inherited, or forced per placement/scroll)
     --dvl-ink  = what actually paints; the hover rule overrides this one.
     Keeping them apart means a high-specificity resting rule (e.g. the
     .is-scrolled header override) can never outweigh hover. */
  --dvl-rest: currentColor;                                 /* inherits header/footer text colour */
  --dvl-ink: var(--dvl-rest);
  --dvl-brand: var(--wp--preset--color--primary-500);

  --dvl-door-scale: 0.26;     /* the prototype value; higher = opens less */
  --dvl-dur-door: 520ms;
  --dvl-dur-letter: 520ms;
  /* Matches the category-header intro, which runs a GSAP `stagger: 0.02` over
     its split chars (main.js). At 50ms the nine letters read as nine separate
     events; at 20ms they read as one sweep. */
  --dvl-stagger: 20ms;
  /* The two knobs that set the door's relationship to the letters:
     --dvl-door-lead  how long the door swings alone before the first letter moves
     --dvl-door-lag   how long it keeps shutting after the last letter has landed
     The door opening reads as the cause and its closing as the resolution, so
     it brackets the letter run on both sides rather than sharing its edges. */
  --dvl-door-lead: 180ms;
  --dvl-door-lag: 140ms;

  /* Letters wait out the door's head start. */
  --dvl-letters-start: var(--dvl-door-lead);

  /* Eased stagger. A linear `--i * --stagger` fires the letters on a metronome;
     easing the *distribution* of start times makes the run accelerate into the
     middle and settle at the end, the way a GSAP stagger with an inOut ease
     does. The curve is easeInOutSine — at full strength gaps vary about 5:1.
     power4.inOut (cubic-bezier(.83,0,.17,1)) is the same shape but ~40:1,
     which on a nine-letter wordmark reads as a stall in the middle rather
     than as easing.
     Held well below 1 because the category headers it is matched against use
     a plain linear GSAP stagger: at full strength the widest gap is several
     times the narrowest, and that unevenness is exactly what reads as stutter.
     Dial it with --dvl-stagger-ease: 0 = linear (header parity), 1 = full curve.
     The curve itself is computed on .dvl-logo__letter, not here: it needs --i,
     which only exists on the letters. A custom property whose value references
     an undefined var() is invalid at computed-value time and never inherits. */
  --dvl-stagger-ease: 0.35;

  --dvl-travel-x: 0px;        /* letters exit straight up; the duplicate mirrors in from below */
  --dvl-travel-y: -90px;
  --dvl-tilt: 0deg;

  --dvl-ease: cubic-bezier(0.625, 0.05, 0, 1);
  /* when the last letter lands — 8 is the max --i, so this survives reordering */
  --dvl-letters-end: calc(var(--dvl-letters-start) + 8 * var(--dvl-stagger) + var(--dvl-dur-letter));
  /* Work backwards from when the door should be *shut*: --dvl-door-lag after the
     last letter lands. Subtracting the door's own duration gives the moment the
     close has to begin. max() guards the case where the door is slower than the
     whole letter run, which would otherwise need a negative delay. */
  --dvl-door-close-at: max(0ms, calc(var(--dvl-letters-end) + var(--dvl-door-lag) - var(--dvl-dur-door)));

  display: block;
  height: auto;               /* the mark is 1044x190; never let a stale height attr squash it */
}

.dvl-logo__wall,
.dvl-logo__door,
.dvl-logo__letter{
  fill: var(--dvl-ink);
  transition: fill var(--dvl-dur-door) var(--dvl-ease);
}

.dvl-logo__door{
  transform-box: fill-box;
  transform-origin: left center;      /* hinge is the left stile */
}

.dvl-logo__letter{
  transform-box: fill-box;
  transform-origin: center center;
  transition:
    transform var(--dvl-dur-letter) var(--dvl-ease),
    opacity   var(--dvl-dur-letter) var(--dvl-ease),
    fill      var(--dvl-dur-letter) var(--dvl-ease);
  --dvl-step: var(--i);   /* even spacing; the @supports below eases it */
  transition-delay: calc(var(--dvl-letters-start) + var(--dvl-step) * var(--dvl-stagger));
}

/* easeInOutSine over the index, so the run accelerates into the middle of the
   word and settles at the end. Guarded by @supports rather than a second
   declaration: an invalid var() resets the property to its initial value, it
   does not fall back to the previous declaration. */
@supports (width: calc(cos(45deg) * 1px)){
  .dvl-logo__letter{
    --dvl-step: calc(
      var(--i) + var(--dvl-stagger-ease) *
      (4 * (1 - cos(180deg * var(--i) / 8)) - var(--i))
    );
  }
}

/* the duplicate waits off-stage, mirrored from where the letters exit */
.dvl-logo__letter--in{
  opacity: 0;
  transform: translate(calc(var(--dvl-travel-x) * -1), calc(var(--dvl-travel-y) * -1)) rotate(var(--dvl-tilt));
}

/* ---- open state ----
   Two triggers share the same choreography: hovering the mark, and the header
   logo once the page has been scrolled. Only the direction and the colour
   differ, and both of those are custom properties, so the swap itself is
   written once. Colour is NOT set here — it rides on --dvl-ink, which hover
   turns brand-red while the scrolled header leaves resting (dark). */
:is(.dvl-logo:hover, a:hover .dvl-logo, .dvl-logo.is-open){ --dvl-ink: var(--dvl-brand); }

/* The swap is a toggle, not a switch that both triggers push the same way:
   the letters are exchanged when EXACTLY ONE of {hovered, scrolled} is true.
   Without that, hovering the already-scrolled header logo left the letters
   sitting still and only the colour rippled across them. Now hover plays the
   full animation from whichever state the logo is in. */
:is(.dvl-logo:hover,
    a:hover .dvl-logo,
    .dvl-logo.is-open):not(html.is-scrolled .wp-block-site-logo .dvl-logo) .dvl-logo__letter,
html.is-scrolled .wp-block-site-logo:not(:hover) .dvl-logo .dvl-logo__letter{
  opacity: 0;
  transform: translate(var(--dvl-travel-x), var(--dvl-travel-y)) rotate(calc(var(--dvl-tilt) * -1));
}

/* must follow the rule above — equal specificity, later wins */
:is(.dvl-logo:hover,
    a:hover .dvl-logo,
    .dvl-logo.is-open):not(html.is-scrolled .wp-block-site-logo .dvl-logo) .dvl-logo__letter--in,
html.is-scrolled .wp-block-site-logo:not(:hover) .dvl-logo .dvl-logo__letter--in{
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* Door, swapping one way … */
:is(.dvl-logo:hover,
    a:hover .dvl-logo,
    .dvl-logo.is-open):not(html.is-scrolled .wp-block-site-logo .dvl-logo) .dvl-logo__door,
html.is-scrolled .wp-block-site-logo:not(:hover) .dvl-logo .dvl-logo__door{
  animation:
    dvl-door-open  var(--dvl-dur-door) var(--dvl-ease) forwards,
    dvl-door-close var(--dvl-dur-door) var(--dvl-ease) var(--dvl-door-close-at) forwards;
}

/* … and back the other. A CSS animation only restarts when the declaration
   changes, so un-swapping needs its own keyframe names — otherwise the door
   would sit still on the return trip. The keyframes are identical. */
html.is-scrolled .wp-block-site-logo:hover .dvl-logo .dvl-logo__door{
  animation:
    dvl-door-open-alt  var(--dvl-dur-door) var(--dvl-ease) forwards,
    dvl-door-close-alt var(--dvl-dur-door) var(--dvl-ease) var(--dvl-door-close-at) forwards;
}

/* door-close carries no `backwards` fill, so during its delay it contributes
   nothing and door-open's forwards value holds the door open */
@keyframes dvl-door-open{  to   { transform: scaleX(var(--dvl-door-scale)); } }
@keyframes dvl-door-close{ from { transform: scaleX(var(--dvl-door-scale)); }
                           to   { transform: scaleX(1); } }

/* Byte-identical twins, used only so the return trip gets a fresh animation */
@keyframes dvl-door-open-alt{  to   { transform: scaleX(var(--dvl-door-scale)); } }
@keyframes dvl-door-close-alt{ from { transform: scaleX(var(--dvl-door-scale)); }
                               to   { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  .dvl-logo__door, .dvl-logo__letter{ transition-duration: 1ms; transition-delay: 0ms; }
  :is(.dvl-logo:hover, a:hover .dvl-logo, .dvl-logo.is-open) .dvl-logo__door{ animation: none; }
}

/* sizing in the two placements */
.brand-logo .dvl-logo, .custom-logo.dvl-logo, img.custom-logo{ width: 192px; max-width: 100%; }
.footer-logo .dvl-logo{ width: 204px; max-width: 100%; }

/* Header logo: brand red while the hero is in view, stone-950 once scrolling
   starts. Scoped to the site-logo block so the footer logo keeps inheriting
   currentColor. .is-scrolled is set on <html> by initScrollState() in main.js. */
/* These set the RESTING colour only (--dvl-rest), never --dvl-ink — otherwise
   their specificity would beat the hover rule and the icon would stay dark
   while only the letters turned red. */
.wp-block-site-logo .dvl-logo{
  --dvl-rest: var(--wp--preset--color--primary-500);
}
html.is-scrolled .wp-block-site-logo .dvl-logo{
  --dvl-rest: var(--wp--preset--color--stone-950);
  /* Direction is deliberately left at the default (letters exit upwards): the
     downward variant was tried and rejected. Scrolling plays the same
     choreography as hover, and only the resting colour changes with it. */
}


/* ─── Mobile top-bar & popup refinements ──────────────────────────────────── */

/* Contacts trigger gets three brand icons instead of the generic pair.
   Scoped to the popup trigger only, so the desktop dropdown keeps its
   phone-list + chats glyphs. */
.nav-icon-contact.open-popup-contacts > .wp-block-navigation-item__content::before {
  content: "\e3b9\e5bd\e5d1"; /* phone + telegram-logo + whatsapp-logo */
  letter-spacing: 0.08em;
  margin-right: 0.45em;
}

/* Tap targets in the top bar. The bar pads only 0.25rem, leaving the links
   around 24px tall — well under the 44px minimum. The padding goes on the
   link rather than the bar so the hit area grows without shifting layout. */
@media (max-width: 1199.98px) {
  .top-nav .top-menu-right li.is-mobile > .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    padding-block: 0.2rem;
    padding-inline: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 0.6875rem;
    font-weight: 500;
  }
  .top-nav .top-menu-right > nav > ul {
    align-items: center;
  }

  /* Menu and cart triggers in the middle bar. !important is needed because
     the mini-cart button carries its own padding from the block's inline
     styles. */
  .middle-nav .menu-catalog.is-mobile button.wp-block-navigation__responsive-container-open,
  .middle-nav .wc-block-mini-cart__button {
    padding: 0.5em !important;
  }
}

/* Compact popups. The plugin ships 20px title and body margins that stack
   into a single 40px gap, plus roomy field padding. Tightened here rather
   than in the plugin so updates don't wipe it. */
.simple-popup__title {
  margin-bottom: 0.75rem;
}
.simple-popup__body {
  margin-top: 0.75rem;
}
.simple-popup .popup-part,
.simple-popup .contacts-wrapper {
  gap: 0.75rem;
}
.simple-popup .contacts_phones {
  gap: 0.25rem;
}
.simple-popup .wpcf7-form p {
  margin: 0.4rem 0;
}
.simple-popup input:not([type="submit"]),
.simple-popup textarea {
  padding: 0.5rem 0.75rem;
  margin-top: 0;
}
.simple-popup input[type="submit"],
.simple-popup .wpcf7-submit,
.simple-popup button[type="submit"] {
  padding: 0.7rem 1rem;
}
/* Hero breathing room on phones. The 6rem block padding is set through the
   Dimensions panel, so it renders inline and outranks any stylesheet — hence
   !important. Change the two values here to retune. */
@media (max-width: 767px) {
  .home_hero-section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

@media (max-width: 767px) {
  .simple-popup__content {
    padding: 1.25rem;
  }
  .simple-popup__close {
    font-size: 2rem;
    top: 10px;
    right: 10px;
  }
}


/* «Наразі ви реєструєтесь як гість.» — WooCommerce показує цей підпис лише
   неавторизованим відвідувачам (тому з адмінського акаунта його не видно).
   Магазин працює без реєстрації, тож підпис лише збиває з пантелику.
   Селектор верхнього рівня (без вкладеності та без медіазапиту) — ховається
   на всіх пристроях. Клас унікальний для чекауту, тож обмеження по body не потрібне. */
.wc-block-checkout__guest-checkout-notice{
	display: none;
}


/* ─── Секція, яка відкриває сторінку, впритул до шапки ────────────────
   Коли перший блок контенту — кольорова CTA-секція (сторінка швидкого
   замовлення), між шапкою і червоною карткою видно смугу фону: 3rem
   падінгу <main> із шаблону «Інформаційна сторінка» плюс власні 6rem секції.
   Обидва задані інлайново (панель «Розміри»), тому потрібен !important.
   Правило спрацьовує лише коли секція справді перша — на головній, де цей самий
   синхронізований патерн стоїть усередині сторінки, нічого не змінюється. */
main:has(> .entry-content > .cta-consultation:first-child){
	padding-top: 0 !important;
	/* Плюс загальний blockGap між блоками верхнього рівня (.wp-site-blocks). */
	margin-block-start: 0;
}
.entry-content > .cta-consultation:first-child{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
