/* ==========================
   SITE HEADER BASE
========================== */

:root {
	--site-header-height: 78px;
}

body.site-header-material-standard-glass {
	padding-top: var(--site-header-height, 78px);
}

.site-header {
	/* Header component semantic adapter. */
	--header-material-surface: var(--color-surface-translucent);
	--header-material-surface-elevated:
		color-mix(
			in srgb,
			var(--color-surface-raised) 92%,
			transparent
		);
	--header-material-content: var(--color-content-primary);
	--header-material-content-muted: var(--color-content-secondary);
	--header-material-accent: var(--color-action-primary);
	--header-material-accent-strong: var(--color-action-primary-strong);
	--header-material-border:
		color-mix(
			in srgb,
			var(--color-border-default) 34%,
			transparent
		);
	--header-material-border-emphasis:
		color-mix(
			in srgb,
			var(--color-border-emphasis) 46%,
			transparent
		);
	--header-material-shadow-tint:
		color-mix(
			in srgb,
			var(--color-content-primary) 10%,
			transparent
		);
	--header-material-shadow-tint-strong:
		color-mix(
			in srgb,
			var(--color-content-primary) 15%,
			transparent
		);
	--header-material-highlight-tint:
		color-mix(
			in srgb,
			var(--color-content-inverse) 38%,
			transparent
		);
	--header-material-highlight-tint-strong:
		color-mix(
			in srgb,
			var(--color-content-inverse) 54%,
			transparent
		);
	--header-material-focus: var(--color-focus-ring);
	--header-control-surface:
		color-mix(
			in srgb,
			var(--color-surface-raised) 58%,
			transparent
		);
	--header-control-surface-hover:
		color-mix(
			in srgb,
			var(--color-surface-raised) 78%,
			transparent
		);

	/* Compatibility-facing Header roles consumed by existing subcomponents. */
	--accent-color: var(--header-material-accent);
	--header-text-color: var(--header-material-content);
	--header-muted-color: var(--header-material-content-muted);
	--header-surface-current: var(--header-material-surface);
	--header-border-current: var(--header-material-border);
	--header-shadow-current:
		0 14px 38px var(--header-material-shadow-tint),
		0 1px 0 var(--header-material-highlight-tint);
	--header-backdrop-filter-current: blur(10px);

	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-header, 900);

	width: 100%;

	color: var(--header-text-color);

	background: var(--header-surface-current);

	backdrop-filter: var(--header-backdrop-filter-current);
	-webkit-backdrop-filter: var(--header-backdrop-filter-current);

	box-shadow: var(--header-shadow-current);

	transition:
		background var(--transition-slow, 0.35s ease),
		box-shadow var(--transition-slow, 0.35s ease),
		backdrop-filter var(--transition-slow, 0.35s ease);
}

body.admin-bar .site-header {
	top: 32px;
}

.site-header::after {
	content: "";

	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			var(--header-border-current) 20%,
			var(--header-border-current) 80%,
			transparent 100%
		);

	opacity: 1;

	transition:
		opacity var(--transition-slow, 0.35s ease);

	pointer-events: none;
}

.site-header__inner {
	position: relative;
	z-index: 3;

	display: grid;
	grid-template-columns:
		minmax(180px, 1fr)
		auto
		minmax(180px, 1fr);

	align-items: center;
	gap: clamp(24px, 4vw, 56px);

	width: 100%;
	max-width: var(--container-width, 1200px);

	margin-inline: auto;

	padding-inline: var(--container-padding, 24px);
	padding-block: 15px;

	transition:
		padding-block var(--transition-slow, 0.35s ease);
}


/* ==========================
   HEADER MATERIAL MODES
========================== */

.site-header[data-header-material-mode="overlay-glass"] {
	--header-surface-current: transparent;
	--header-border-current: transparent;
	--header-shadow-current: none;
	--header-backdrop-filter-current: none;
}

.site-header[data-header-material-mode="overlay-glass"]::after {
	opacity: 0;
}

.site-header[data-header-material-mode="standard-glass"] {
	--header-material-focus:
		color-mix(
			in srgb,
			var(--color-focus-ring) 86%,
			var(--color-content-primary) 14%
		);
	--header-surface-current: var(--header-material-surface);
	--header-border-current: var(--header-material-border);
	--header-shadow-current:
		0 14px 38px var(--header-material-shadow-tint),
		0 1px 0 var(--header-material-highlight-tint);
	--header-backdrop-filter-current: blur(10px);
}

.site-header[data-header-state="sticky"],
.site-header[data-header-state="menu-open"] {
	--header-surface-current: var(--header-material-surface-elevated);
	--header-border-current: var(--header-material-border-emphasis);
	--header-shadow-current:
		0 18px 46px var(--header-material-shadow-tint-strong),
		0 1px 0 var(--header-material-highlight-tint-strong);
	--header-backdrop-filter-current: blur(12px) saturate(112%);
}

.site-header[data-header-state="sticky"]::after,
.site-header[data-header-state="menu-open"]::after {
	opacity: 1;
}

.site-header--brand .site-header__inner {
	padding-block: 15px;
}

.site-header--checkout .site-header__inner,
.site-header--no-navigation .site-header__inner {
	grid-template-columns:
		minmax(0, 1fr)
		auto;

	padding-block: 14px;
}

.site-header--checkout .site-header__utility,
.site-header--no-navigation .site-header__utility {
	justify-content: flex-end;
}

.site-header--checkout .site-header__phone {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;

	opacity: 1;
}

.site-header--checkout .site-header__phone-dot {
	position: absolute;

	width: 5px;
	height: 5px;

	margin-left: -14px;
}

.site-header--checkout .site-header__phone-text {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	color: var(--header-muted-color);
}

.site-header--checkout .site-header__phone-number {
	font-size: 14px;
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.02em;

	color: var(--header-text-color);
}


/* ==========================
   BRAND / LOGO
========================== */

.site-header__brand {
	min-width: 0;
}

.site-logo {
	display: inline-flex;
	align-items: center;

	max-width: 100%;

	color: var(--header-text-color);

	text-decoration: none;
}

.site-logo__image {
	display: block;

	width: auto;
	height: 36px;
	max-width: min(180px, 100%);

	object-fit: contain;
	object-position: left center;
}

.site-logo__text {
	font-family: var(--font-family-heading, inherit);
	font-size: clamp(18px, 1.45vw, 22px);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.1;
	letter-spacing: -0.02em;

	color: currentColor;

	transition:
		color var(--transition-base, 0.25s ease),
		opacity var(--transition-base, 0.25s ease);
}

.site-logo:focus-visible {
	outline:
		var(--focus-ring-width, 2px)
		solid
		var(--header-material-focus);

	outline-offset: var(--focus-ring-offset, 4px);
}

@media (hover: hover) and (pointer: fine) {
	.site-logo:hover .site-logo__text {
		color: var(--accent-color);
	}
}


/* ==========================
   DESKTOP NAVIGATION
========================== */

.site-navigation {
	justify-self: center;
}

.site-navigation__menu,
.site-navigation__menu ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.site-navigation__menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 2.3vw, 34px);
}

.site-navigation__menu li {
	position: relative;

	margin: 0;
	padding: 0;
}

.site-navigation__menu a {
	position: relative;

	display: inline-flex;
	align-items: center;

	padding-block: 8px;

	font-size: 13px;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.2;
	letter-spacing: 0.035em;

	color: var(--header-text-color);

	text-decoration: none;

	transition:
		color var(--transition-base, 0.25s ease),
		opacity var(--transition-base, 0.25s ease);
}

.site-header--commerce .site-navigation__menu a {
	font-size: 12px;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.site-navigation__menu a::after {
	content: "";

	position: absolute;
	bottom: 1px;
	left: 50%;

	width: 0;
	height: 1px;

	background: var(--accent-color);

	opacity: 0;

	transform: translateX(-50%);

	transition:
		width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-navigation__menu a:focus-visible,
.site-navigation__utility-menu a:focus-visible,
.site-navigation__submenu-toggle:focus-visible,
.site-header__menu-toggle:focus-visible,
.site-header__phone:focus-visible,
.site-navigation__phone:focus-visible {
	outline:
		var(--focus-ring-width, 2px)
		solid
		var(--header-material-focus);

	outline-offset: var(--focus-ring-offset, 4px);
}

.site-navigation__menu .current-menu-item > a,
.site-navigation__menu .current-menu-ancestor > a,
.site-navigation__menu .current_page_item > a {
	color: var(--accent-color);
}

.site-navigation__menu .current-menu-item > a::after,
.site-navigation__menu .current-menu-ancestor > a::after,
.site-navigation__menu .current_page_item > a::after {
	width: 22px;

	opacity: 1;
}


/* ==========================
   DROPDOWN
========================== */

@media (min-width: 992px) {
	.site-navigation__menu > li {
		position: static;
	}
}

.site-navigation__submenu-toggle {
	display: none;
}

.site-navigation__menu > .menu-item-has-children > a {
	padding-right: 15px;
}

.site-navigation__menu > .menu-item-has-children > a::before {
	content: "";

	position: absolute;
	top: 50%;
	right: 0;

	width: 5px;
	height: 5px;

	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;

	opacity: 0.38;

	transform:
		translateY(-65%)
		rotate(45deg);

	transition:
		opacity var(--transition-base, 0.25s ease),
		transform var(--transition-base, 0.25s ease);
}

.site-navigation__menu > .menu-item-has-children.is-submenu-open > a::before {
	opacity: 0.8;

	transform:
		translateY(-35%)
		rotate(225deg);
}

.site-navigation__menu > li > .site-navigation__submenu-plane .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);

	min-width: 0;
}

/*
 * Desktop open-state ownership:
 * plane = material/pointer/boundary; region = canonical container geometry;
 * sub-menu = semantic list/content composition.
 */
@media (min-width: 992px) {
	.site-navigation__menu > li > .site-navigation__submenu-plane {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: var(--z-dropdown);

		width: 100vw;

		padding-block: var(--space-7, 32px);

		background: var(--navigation-material-surface);

		border: 0;
		border-bottom: 1px solid var(--navigation-material-border-fallback);
		border-bottom-color: transparent;
		border-radius: 0;

		backdrop-filter: var(--navigation-material-backdrop-filter);
		-webkit-backdrop-filter: var(--navigation-material-backdrop-filter);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform:
			translate(-50%, 6px);

		transition:
			opacity
				var(--motion-duration-base, 320ms)
				var(--motion-easing-emphasized, cubic-bezier(0.22, 1, 0.36, 1)),
			visibility
				0s
				linear
				var(--motion-duration-base, 320ms),
			transform
				var(--motion-duration-base, 320ms)
				var(--motion-easing-emphasized, cubic-bezier(0.22, 1, 0.36, 1));
	}

	.site-navigation__submenu-region {
		width: 100%;
		max-width: var(--container-width, 1320px);

		margin-inline: auto;
		padding-inline: var(--container-padding, 20px);
	}

	.site-navigation__menu > li.is-submenu-open > .site-navigation__submenu-plane {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform:
			translate(-50%, 0);

		border-bottom-color: var(--navigation-material-border);

		transition-delay: 0s, 0s, 0s;
	}

	.site-header:has(
		.site-navigation__menu > li.is-submenu-open > .site-navigation__submenu-plane
	) {
		--header-surface-current: var(--navigation-material-surface);
		--header-border-current: transparent;
		--header-shadow-current: none;
		--header-backdrop-filter-current: var(--navigation-material-backdrop-filter);

		transition-property:
			background,
			backdrop-filter;
	}
}

.site-navigation__menu .sub-menu li {
	width: 100%;
}

.site-navigation__menu .sub-menu a {
	display: flex;

	width: 100%;

	padding: 10px 11px;

	font-size: 12px;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.25;
	letter-spacing: 0.045em;

	color: var(--header-text-color);

	background: transparent;

	border-radius:
		calc(var(--radius-sm, 6px) - 2px);

	white-space: nowrap;

	transition:
		background var(--transition-base, 0.25s ease),
		color var(--transition-base, 0.25s ease),
		opacity var(--transition-base, 0.25s ease);
}

.site-navigation__menu .sub-menu a::after {
	display: none;
}

.site-navigation__menu .sub-menu .current-menu-item > a,
.site-navigation__menu .sub-menu .current_page_item > a {
	color: var(--accent-color);

	background:
		color-mix(
			in srgb,
			var(--header-material-accent) 8%,
			transparent
		);
}

@media (hover: hover) and (pointer: fine) {
	.site-navigation__menu a:hover {
		color: var(--accent-color);
	}

	.site-navigation__menu a:hover::after {
		width: 22px;

		opacity: 1;
	}

	.site-navigation__menu .sub-menu a:hover {
		color: var(--accent-color);

		background:
		color-mix(
			in srgb,
			var(--header-material-accent) 8%,
			transparent
		);
	}
}


/* Desktop submenu links reuse the canonical Header underline/current grammar. */
@media (min-width: 992px) {
	.site-navigation__menu > li > .site-navigation__submenu-plane .sub-menu a {
		width: fit-content;
		max-width: 100%;

		background: transparent;
	}

	.site-navigation__menu > li > .site-navigation__submenu-plane .sub-menu a::after {
		display: block;
	}

	.site-navigation__menu > li > .site-navigation__submenu-plane .sub-menu
		:is(.current-menu-item, .current_page_item)
		> a {
		background: transparent;
	}

	.site-navigation__menu > li > .site-navigation__submenu-plane .sub-menu
		:is(.current-menu-item, .current_page_item)
		> a::after {
		width: calc(100% - 22px);
		opacity: 1;
	}
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.site-navigation__menu > li > .site-navigation__submenu-plane .sub-menu a:hover {
		background: transparent;
	}

	.site-navigation__menu > li > .site-navigation__submenu-plane .sub-menu a:hover::after {
		width: calc(100% - 22px);
		opacity: 1;
	}
}


/* ==========================================================================
   DESKTOP VISUAL PRODUCT-CATEGORY SUBMENU CONTENT
   --------------------------------------------------------------------------
   Content composition only. The existing submenu plane remains the sole
   owner of material, visibility, pointer lifecycle and motion physics.
   ========================================================================== */

.site-navigation__category-media {
	display: none;
}

@media (min-width: 992px) {
	.site-navigation__menu
		> li
		> .site-navigation__submenu-plane
		.sub-menu:has(> .site-navigation__menu-item--product-category) {
		display: grid;
		grid-template-columns: repeat(4, minmax(160px, 180px));
		justify-content: start;
		column-gap: var(--space-6, 24px);
		row-gap: 28px;
	}

	.site-navigation__menu
		> li
		> .site-navigation__submenu-plane
		.sub-menu
		> .site-navigation__menu-item--visual-category
		> a {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3, 12px);

		width: 100%;
		max-width: none;

		white-space: normal;
	}

	.site-navigation__category-media {
		display: block;
		width: 100%;
		aspect-ratio: 4 / 3;

		overflow: hidden;
	}

	.site-navigation__category-image {
		display: block;
		width: 100%;
		height: 100%;

		object-fit: contain;
	}

	.site-navigation__category-label {
		display: block;
		max-width: 24ch;

		line-height: 1.35;
		overflow-wrap: anywhere;
	}
}

@media (min-width: 1200px) {
	.site-navigation__menu
		> li
		> .site-navigation__submenu-plane
		.sub-menu:has(> .site-navigation__menu-item--product-category) {
		grid-template-columns: repeat(5, minmax(160px, 180px));
	}
}


/* ==========================
   UTILITY AREA
========================== */

.site-header__utility-menu,
.site-navigation__utility-menu {
	display: none;
}

.site-header__utility-menu-list {
	margin: 0;
	padding: 0;

	list-style: none;
}

.site-header__utility {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(12px, 1.5vw, 20px);

	min-width: 0;
}

.site-header__phone {
	position: relative;

	display: inline-flex;
	align-items: center;
	gap: 9px;

	font-size: 12px;
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.2;
	letter-spacing: 0.045em;

	color: var(--header-text-color);

	text-decoration: none;

	white-space: nowrap;

	opacity: 0.72;

	transition:
		color var(--transition-base, 0.25s ease),
		opacity var(--transition-base, 0.25s ease);
}

.site-header__phone-dot {
	flex: 0 0 auto;

	width: 5px;
	height: 5px;

	background: var(--accent-color);

	border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
	.site-header__phone:hover {
		color: var(--accent-color);

		opacity: 1;
	}
}


/* ==========================================================================
   BRAND + SHOP HEADER — DYNAMIC CART UTILITY
   ========================================================================== */

.site-header--has-cart-utility .site-header__utility {
	gap: clamp(10px, 1.35vw, 18px);
}

.site-header__cart-utility {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;
}

.site-header--brand .pami-header-cart,
.site-header--commerce .pami-header-cart {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	flex: 0 0 auto;

	min-width: var(--touch-target-min, 44px);
	min-height: var(--touch-target-min, 44px);

	padding: 8px 10px;

	color: var(--header-text-color);

	background:
		linear-gradient(
			180deg,
			var(--header-control-surface-hover) 0%,
			var(--header-control-surface) 100%
		);

	border: 1px solid var(--header-material-border);
	border-radius: var(--radius-sm, 4px);

	box-shadow:
		inset 0 1px 0 var(--header-material-highlight-tint-strong),
		0 8px 22px var(--header-material-shadow-tint);

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);

	-webkit-tap-highlight-color: transparent;

	text-decoration: none;

	transition:
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		background 320ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
		color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header--brand .pami-header-cart::before,
.site-header--commerce .pami-header-cart::before {
	content: "";

	position: absolute;
	inset: 1px;

	background:
		linear-gradient(
			180deg,
			var(--header-material-highlight-tint-strong) 0%,
			transparent 72%
		);

	border-radius:
		calc(var(--radius-sm, 4px) - 1px);

	pointer-events: none;
}

.site-header--brand .pami-header-cart:hover,
.site-header--commerce .pami-header-cart:hover {
	color: var(--accent-color);

	background:
		linear-gradient(
			180deg,
			var(--header-material-surface-elevated) 0%,
			var(--header-control-surface-hover) 100%
		);

	border-color: var(--header-material-border-emphasis);

	box-shadow:
		inset 0 1px 0 var(--header-material-highlight-tint-strong),
		0 12px 28px var(--header-material-shadow-tint-strong);

	transform: translateY(-1px);

	text-decoration: none;
}

.site-header--brand .pami-header-cart:active,
.site-header--commerce .pami-header-cart:active {
	transform: translateY(0);
}

.site-header--brand .pami-header-cart:focus,
.site-header--commerce .pami-header-cart:focus {
	outline: none;
}

.site-header--brand .pami-header-cart:focus-visible,
.site-header--commerce .pami-header-cart:focus-visible {
	outline:
		var(--focus-ring-width, 3px)
		solid
		var(--header-material-focus);

	outline-offset: var(--focus-ring-offset, 4px);
}

.site-header .pami-header-cart__icon {
	position: relative;
	z-index: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 22px;
	height: 22px;

	color: currentColor;
}

.site-header .pami-header-cart__icon svg {
	display: block;

	width: 100%;
	height: 100%;

	overflow: visible;

	fill: none;
	stroke: currentColor;
}

.site-header .pami-header-cart__count {
	position: relative;
	z-index: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	min-width: 20px;
	height: 20px;

	padding-inline: 5px;

	font-size: 11px;
	font-weight: var(--font-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0;

	color: var(--color-action-on-primary);

	background:
		linear-gradient(
			180deg,
			var(--color-action-primary-soft) 0%,
			var(--color-action-primary) 58%,
			var(--color-action-primary-strong) 100%
		);

	border: 1px solid var(--header-material-highlight-tint);
	border-radius: var(--radius-full, 999px);

	box-shadow:
		0 5px 14px
			color-mix(
				in srgb,
				var(--header-material-accent-strong) 24%,
				transparent
			),
		inset 0 1px 0 var(--header-material-highlight-tint);

	transition:
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		background 320ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header
	.pami-header-cart:not(.is-empty):hover
	.pami-header-cart__count {
	box-shadow:
		0 7px 17px
			color-mix(
				in srgb,
				var(--header-material-accent-strong) 30%,
				transparent
			),
		inset 0 1px 0 var(--header-material-highlight-tint-strong);

	transform: translateY(-1px);
}

/*
 * Zero state:
 * Keep the cart icon available as navigation, but completely remove
 * the intrusive numerical badge when the cart contains no products.
 */

.site-header .pami-header-cart.is-empty {
	gap: 0;
}

.site-header
	.pami-header-cart.is-empty
	.pami-header-cart__count,
.site-header
	.pami-header-cart__count[hidden] {
	display: none;
}

/*
 * Defensive protection:
 * Checkout never renders the cart utility in PHP, but the CSS guard
 * prevents accidental display if markup is introduced by an extension.
 */

.site-header--checkout .site-header__cart-utility,
.site-header--checkout .pami-header-cart {
	display: none;
}


/* ==========================
   CART UTILITY — MOBILE
========================== */

@media (max-width: 991px) {
	.site-header--has-cart-utility .site-header__utility {
		gap: 10px;
	}

	.site-header__cart-utility--mobile {
		display: flex;
	}

	.site-header--brand .pami-header-cart,
	.site-header--commerce .pami-header-cart {
		gap: 6px;

		min-width: 44px;
		min-height: 44px;

		padding: 8px 9px;
	}

	.site-header .pami-header-cart.is-empty {
		gap: 0;

		padding-inline: 10px;
	}

	.site-header .pami-header-cart__icon {
		width: 21px;
		height: 21px;
	}

	.site-header .pami-header-cart__count {
		min-width: 19px;
		height: 19px;

		padding-inline: 4px;

		font-size: 10px;
	}
}

@media (max-width: 380px) {
	.site-header--brand .pami-header-cart,
	.site-header--commerce .pami-header-cart {
		gap: 4px;

		padding-inline: 8px;
	}

	.site-header .pami-header-cart.is-empty {
		gap: 0;
	}

	.site-header .pami-header-cart__icon {
		width: 20px;
		height: 20px;
	}

	.site-header .pami-header-cart__count {
		min-width: 18px;
		height: 18px;

		font-size: 9px;
	}
}


/* ==========================
   CART UTILITY — TOUCH
========================== */

@media (hover: none) {
	.site-header--brand .pami-header-cart:hover,
	.site-header--commerce .pami-header-cart:hover,
	.site-header
		.pami-header-cart:hover
		.pami-header-cart__count {
		transform: none;
	}
}


/* ==========================
   CART UTILITY — MOTION
========================== */

@media (prefers-reduced-motion: reduce) {
	.site-header--brand .pami-header-cart,
	.site-header--commerce .pami-header-cart,
	.site-header .pami-header-cart__count {
		transition: none;
	}

	.site-header--brand .pami-header-cart:hover,
	.site-header--commerce .pami-header-cart:hover,
	.site-header
		.pami-header-cart:hover
		.pami-header-cart__count {
		transform: none;
	}
}


/* ==========================
   BURGER
========================== */

.site-header__menu-toggle {
	position: relative;

	display: none;

	width: 44px;
	height: 44px;

	padding: 0;

	color: var(--header-text-color);

	background: var(--header-control-surface);

	border: 1px solid var(--header-material-border);
	border-radius: var(--radius-sm, 6px);

	cursor: pointer;

	transition:
		border-color var(--transition-base, 0.25s ease),
		background var(--transition-base, 0.25s ease);
}

.site-header__menu-toggle-line {
	position: absolute;
	left: 50%;

	display: block;

	height: 1px;

	background: currentColor;

	transform: translateX(-50%);

	transition:
		width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		top 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__menu-toggle-line--top {
	top: 17px;

	width: 24px;
}

.site-header__menu-toggle-line--bottom {
	top: 26px;

	width: 16px;
}

body.site-menu-open
	.site-header__menu-toggle-line--top {
	top: 21px;

	width: 24px;

	transform:
		translateX(-50%)
		rotate(45deg);
}

body.site-menu-open
	.site-header__menu-toggle-line--bottom {
	top: 21px;

	width: 24px;

	transform:
		translateX(-50%)
		rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
	.site-header__menu-toggle:hover {
		background: var(--header-control-surface-hover);

		border-color: var(--header-material-border-emphasis);
	}

	.site-header__menu-toggle:hover
		.site-header__menu-toggle-line--bottom {
		width: 24px;
	}
}


/* ==========================
   MOBILE NAVIGATION
========================== */

.site-navigation__footer {
	display: none;
}

@media (max-width: 991px) {
	.site-header__inner {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		gap: var(--space-5, 24px);

		padding-block: 16px;
	}

	.site-header--brand .site-header__inner,
	.site-header--brand.is-sticky .site-header__inner,
	body.site-menu-open .site-header--brand .site-header__inner {
		padding-block: 14px;
	}

	.site-logo__image {
		height: 28px;
		max-width: min(160px, 100%);
	}

	.site-logo__text {
		font-size: 20px;
	}

	.site-header__brand,
	.site-header__utility {
		position: relative;
		z-index: 4;
	}

	.site-header__utility {
		gap: 10px;
	}

	.site-header__phone {
		display: none;
	}

	.site-header--checkout .site-header__phone {
		display: inline-flex;
	}

	.site-header--commerce .pami-header-cart {
		gap: 6px;

		min-width: 46px;
		min-height: 44px;

		padding: 8px 9px;
	}

	.site-header--commerce .pami-header-cart__icon {
		width: 21px;
		height: 21px;
	}

	.site-header--commerce .pami-header-cart__count {
		min-width: 19px;
		height: 19px;

		padding-inline: 4px;

		font-size: 10px;
	}

	.site-header__menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.site-header--checkout .site-header__menu-toggle,
	.site-header--no-navigation .site-header__menu-toggle {
		display: none;
	}

	.site-navigation {
		position: fixed;
		inset: 0;
		z-index: 2;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		width: 100vw;

		min-height: 100vh;
		min-height: 100dvh;

		padding:
			clamp(108px, 17vh, 142px)
			var(--container-padding, 24px)
			clamp(34px, 8vh, 64px);

		overflow-y: auto;

		background: var(--navigation-material-surface-fallback);
		background: var(--navigation-material-surface);

		box-sizing: border-box;

		backdrop-filter: var(--navigation-material-backdrop-filter);
		-webkit-backdrop-filter: var(--navigation-material-backdrop-filter);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		overscroll-behavior: contain;

		transform: translateY(-6px);

		transition:
			opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.admin-bar .site-navigation {
		top: 32px;

		min-height: calc(100vh - 32px);
		min-height: calc(100dvh - 32px);
	}

	body.site-menu-open .site-navigation {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateY(0);
	}

	.site-navigation__menu,
	.site-navigation__search,
	.site-navigation__utility-menu,
	.site-navigation__footer {
		width: min(100%, 520px);

		margin-inline: auto;
	}

	.site-navigation__search {
		display: block;

		margin-bottom: var(--space-6, 28px);
	}

	.site-navigation__menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(18px, 3.4vh, 26px);
	}

	.site-navigation__menu > li {
		width: 100%;
	}

	.site-navigation__utility-menu {
		display: block;

		margin-top: var(--space-6, 28px);
	}

	.site-navigation__utility-menu .site-header__utility-menu-list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4, 16px);
	}

	.site-navigation__utility-menu .site-header__utility-menu-list > li {
		width: 100%;
	}

	.site-navigation__utility-menu .site-header__utility-menu-list > li > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2, 8px);

		min-width: 44px;
		min-height: 44px;
		padding: var(--space-2, 8px) var(--space-3, 12px);

		color: var(--header-text-color);
		text-decoration: none;

		border-radius: var(--radius-sm, 6px);
	}

	.site-navigation__utility-menu
		.site-header__utility-menu-item--account
		> a,
	.site-navigation__utility-menu
		.site-header__utility-menu-item--cart
		> a {
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.site-navigation__search .woocommerce-product-search {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;

		width: 100%;
		margin: 0;
	}

	.site-navigation__search .woocommerce-product-search input[type="search"] {
		min-width: 0;
		min-height: 44px;

		padding:
			var(--space-2, 8px)
			var(--space-3, 12px);

		color: var(--header-text-color);
		background: var(--header-control-surface);

		border: 1px solid var(--header-material-border);
		border-radius:
			var(--radius-sm, 6px)
			0
			0
			var(--radius-sm, 6px);

		font: inherit;
	}

	.site-navigation__search .woocommerce-product-search button {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;

		color: var(--header-text-color);
		background: var(--header-control-surface);

		border: 1px solid var(--header-material-border);
		border-left: 0;
		border-radius:
			0
			var(--radius-sm, 6px)
			var(--radius-sm, 6px)
			0;

		font: inherit;
		font-weight: var(--font-weight-semibold, 600);

		cursor: pointer;
	}

	.site-navigation__search-submit-icon {
		display: block;

		width: 20px;
		height: 20px;

		flex: 0 0 auto;
	}

	.site-navigation__search
		.woocommerce-product-search
		input[type="search"]:focus-visible,
	.site-navigation__search
		.woocommerce-product-search
		button:focus-visible {
		outline:
			var(--focus-ring-width, 2px)
			solid
			var(--header-material-focus);
		outline-offset: var(--focus-ring-offset, 4px);
	}

	.site-navigation__menu
		> .site-navigation__menu-item--account
		> a {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;
	}

	.site-navigation__menu > .menu-item-has-children {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 44px;
		align-items: center;
	}

	.site-navigation__menu > .menu-item-has-children > a {
		min-width: 0;

		padding-right: 0;
	}

	.site-navigation__submenu-toggle {
		position: relative;

		display: inline-grid;
		place-items: center;

		width: 44px;
		height: 44px;

		padding: 0;

		color: var(--header-text-color);

		background: var(--header-control-surface);

		border: 1px solid var(--header-material-border);
		border-radius: var(--radius-sm, 6px);

		cursor: pointer;
	}

	.site-navigation__submenu-toggle::before {
		content: "";

		display: block;

		width: 7px;
		height: 7px;

		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;

		transform:
			translateY(-2px)
			rotate(45deg);
	}

	.site-navigation__submenu-toggle[aria-expanded="true"]::before {
		transform:
			translateY(2px)
			rotate(225deg);
	}

	.site-navigation__menu
		> .menu-item-has-children
		> .site-navigation__submenu-plane {
		grid-column: 1 / -1;

		display: none;
	}

	.site-navigation__menu
		> .menu-item-has-children.is-submenu-open
		> .site-navigation__submenu-plane {
		display: block;
	}

	.site-navigation__menu a {
		padding-block: 0;

		font-family: var(--font-family-heading, inherit);
		font-size: clamp(30px, 8.8vw, 46px);
		font-weight: var(--font-weight-bold, 700);
		line-height: 1;
		letter-spacing: -0.042em;

		color: var(--header-text-color);
	}

	.site-navigation__menu a::before,
	.site-navigation__menu a::after {
		display: none;
	}

	.site-navigation__menu .current-menu-item > a,
	.site-navigation__menu .current-menu-ancestor > a,
	.site-navigation__menu .current_page_item > a {
		color: var(--accent-color);
	}

	.site-navigation__menu .sub-menu {
		position: static;

		display: flex;
		flex-direction: column;
		gap: 10px;

		width: 100%;
		min-width: 0;

		margin-top: var(--space-4, 16px);

		padding:
			0
			0
			0
			var(--space-5, 24px);

		background: transparent;

		border: 0;
		border-left: 1px solid var(--navigation-material-border);
		border-radius: 0;

		backdrop-filter: none;
		-webkit-backdrop-filter: none;

		box-shadow: none;

		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: none;

		transition: none;
	}

	.site-navigation__menu .sub-menu::before {
		display: none;
	}

	.site-navigation__menu .sub-menu a {
		width: fit-content;

		padding: 0;

		font-family: var(--font-family-body, inherit);
		font-size: clamp(15px, 4.4vw, 18px);
		font-weight: var(--font-weight-semibold, 600);
		line-height: 1.35;
		letter-spacing: 0.035em;

		color: var(--header-muted-color);

		background: transparent;

		white-space: normal;
	}

	.site-navigation__menu .sub-menu .current-menu-item > a,
	.site-navigation__menu .sub-menu .current_page_item > a {
		color: var(--accent-color);

		background: transparent;
	}

	.site-navigation__footer {
		display: flex;
		flex-direction: column;
		gap: var(--space-3, 12px);

		margin-top: clamp(42px, 8vh, 68px);

		padding-top: var(--space-6, 28px);

		border-top: 1px solid var(--navigation-material-border);
	}

	.site-navigation__phone {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3, 12px);

		width: fit-content;
		min-height: var(--touch-target-min, 44px);

		padding-block: var(--space-2, 8px);

		color: var(--header-text-color);

		text-decoration: none;
	}

	.site-navigation__phone-icon {
		flex: 0 0 auto;

		width: 20px;
		height: 20px;
	}

	.site-navigation__phone-number {
		font-size: 18px;
		font-weight: var(--font-weight-semibold, 600);
		line-height: 1.2;
		letter-spacing: 0.02em;

		color: var(--header-text-color);
	}
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}

	body.admin-bar .site-navigation {
		top: 46px;

		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

@media (max-width: 480px) {
	.site-header__inner {
		padding-inline: var(--container-padding, 18px);
	}

	.site-navigation {
		padding-inline: var(--container-padding, 18px);
	}

	.site-navigation__menu a {
		font-size: clamp(30px, 11vw, 42px);
	}

	.site-navigation__menu .sub-menu a {
		font-size: 15px;
	}

	.site-header--checkout .site-header__phone-text {
		display: none;
	}
}

@media (max-width: 380px) {
	.site-header--commerce .pami-header-cart {
		gap: 4px;

		padding-inline: 8px;
	}

	.site-header--commerce .pami-header-cart__icon {
		width: 20px;
		height: 20px;
	}

	.site-header--commerce .pami-header-cart__count {
		min-width: 18px;
		height: 18px;

		font-size: 9px;
	}
}


/* ==========================
   TOUCH DEVICES
========================== */

@media (hover: none) {
	.site-header--commerce .pami-header-cart:hover,
	.site-header--commerce
		.pami-header-cart:hover
		.pami-header-cart__count {
		transform: none;
	}
}


/* ==========================
   MOTION PREFERENCE
========================== */

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header::after,
	.site-header__inner,
	.site-logo__text,
	.site-header__phone,
	.site-header__menu-toggle,
	.site-header__menu-toggle-line,
	.site-header--commerce .pami-header-cart,
	.site-header--commerce .pami-header-cart__count,
	.site-navigation,
	.site-navigation__menu a,
	.site-navigation__menu a::before,
	.site-navigation__menu a::after,
	.site-navigation__submenu-plane {
		transition: none;
	}

	.site-header__menu-toggle:hover,
	.site-header--commerce .pami-header-cart:hover,
	.site-header--commerce
		.pami-header-cart:hover
		.pami-header-cart__count,
	.site-navigation,
	.site-navigation__menu > li > .site-navigation__submenu-plane {
		transform: none;
	}
}

/*
 * Standard-glass keeps text contrast on the canonical content role.
 * The action role remains visible through underlines, dots, boundaries and
 * quiet state surfaces, so current and hover states are never color-only.
 */
.site-header[data-header-material-mode="standard-glass"]
	.site-navigation__menu
	:is(
		.current-menu-item,
		.current-menu-ancestor,
		.current_page_item
	)
	> a,
.site-header[data-header-material-mode="standard-glass"]
	.site-navigation__menu
	.sub-menu
	:is(
		.current-menu-item,
		.current_page_item
	)
	> a {
	color: var(--header-text-color);
}

@media (hover: hover) and (pointer: fine) {
	.site-header[data-header-material-mode="standard-glass"]
		.site-logo:hover
		.site-logo__text,
	.site-header[data-header-material-mode="standard-glass"]
		.site-navigation__menu
		a:hover,
	.site-header[data-header-material-mode="standard-glass"]
		.site-navigation__menu
		.sub-menu
		a:hover,
	.site-header[data-header-material-mode="standard-glass"]
		.site-header__phone:hover {
		color: var(--header-text-color);
	}
}


@supports not (color: color-mix(in srgb, black, white)) {
	.site-header[data-header-material-mode="standard-glass"],
	.site-header[data-header-state="sticky"],
	.site-header[data-header-state="menu-open"] {
		--header-material-surface-elevated: var(--color-surface-raised);
		--header-material-border: var(--color-border-subtle);
		--header-material-border-emphasis: var(--color-border-default);
		--header-material-shadow-tint: transparent;
		--header-material-shadow-tint-strong: transparent;
		--header-material-highlight-tint: transparent;
		--header-material-highlight-tint-strong: transparent;
		--header-control-surface: var(--color-surface-default);
		--header-control-surface-hover: var(--color-surface-raised);
	}
}

@media (forced-colors: active) {
	.site-header,
	.site-navigation,
	.site-navigation__menu > li > .site-navigation__submenu-plane,
	.site-navigation__submenu-toggle,
	.site-header__menu-toggle,
	.site-header .pami-header-cart {
		color: CanvasText;
		background: Canvas;
		border-color: ButtonText;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.site-navigation__menu a:focus-visible,
	.site-navigation__submenu-toggle:focus-visible,
	.site-header__menu-toggle:focus-visible,
	.site-header__phone:focus-visible,
	.site-navigation__phone:focus-visible,
	.site-logo:focus-visible,
	.site-header .pami-header-cart:focus-visible {
		outline-color: Highlight;
	}
}

/* ========================================================================== 
   WO12.4 — PAMI LIVING SCENE INITIAL HEADER SURFACE CORRECTION
   --------------------------------------------------------------------------
   Homepage-only correction for the initial Brand header. The header receives
   a calm, even linen surface close to the established sticky state, without
   the previous radial atmosphere, extended blur or veil over the Hero.
   Sticky and menu-open contracts remain unchanged.
   ========================================================================== */

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky) {
	--header-text-color: #302b27;
	--header-muted-color: #625a53;
	--header-border: rgba(78, 61, 48, 0.11);

	background: rgba(248, 245, 240, 0.82);

	backdrop-filter: none;
	-webkit-backdrop-filter: none;

	box-shadow: none;
}

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky)::before {
	content: none;

	inset: auto;

	background: none;

	filter: none;
	opacity: 0;
}

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky)::after {
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(78, 61, 48, 0.08) 18%,
			rgba(78, 61, 48, 0.08) 82%,
			transparent 100%
		);

	opacity: 0.42;
}

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky)
	.site-header__inner {
	position: relative;
	z-index: 3;
}

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky)
	:is(
		.site-logo__text,
		.site-navigation__menu a,
		.site-header__phone,
		.site-header__menu-toggle
	) {
	text-shadow: none;
}

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky)
	.site-header__phone {
	opacity: 0.84;
}

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky)
	.site-navigation__menu
	:is(
		.current-menu-item,
		.current-menu-ancestor,
		.current_page_item
	)
	> a {
	color: var(--accent-color);
}

body.home:not(.site-menu-open)
	.site-header--brand:not(.is-sticky)
	.site-navigation__menu
	:is(
		.current-menu-item,
		.current-menu-ancestor,
		.current_page_item
	)
	> a::after {
	width: 22px;
	opacity: 1;
}

@media (max-width: 991px) {
	body.home:not(.site-menu-open)
		.site-header--brand:not(.is-sticky)
		.site-header__menu-toggle {
		background: transparent;
		border-color: rgba(45, 42, 40, 0.18);
		box-shadow: none;

		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* ==========================================================================
   COMMERCE HEADER — TWO-ROW PRODUCT FINDING + UTILITIES
   --------------------------------------------------------------------------
   Desktop composition only. Mobile/drawer and submenu motion/material remain
   owned by their existing contracts.
   ========================================================================== */

.site-header__search,
.site-header__account {
	display: none;
}

@media (min-width: 992px) {
	.site-navigation__search {
		display: none;
	}

	.site-header--commerce .site-header__inner {
		grid-template-columns:
			auto
			minmax(0, 1fr)
			auto;
		grid-template-areas:
			"brand search utility"
			"navigation navigation navigation";
		column-gap: var(--space-6, 24px);
		row-gap: var(--space-2, 8px);
	}

	.site-header--commerce .site-header__brand {
		grid-area: brand;
	}

	.site-header--commerce .site-header__search {
		grid-area: search;

		display: block;

		min-width: 0;
	}

	.site-header--commerce .site-navigation {
		grid-area: navigation;

		justify-self: stretch;

		min-width: 0;
	}

	.site-header--commerce .site-header__utility {
		grid-area: utility;
	}

	.site-header--commerce .site-header__utility-menu {
		display: block;
	}

	.site-header--commerce .site-header__utility-menu-list {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--space-2, 8px);
	}

	.site-header--commerce .site-header__utility-menu-list > li {
		margin: 0;
		padding: 0;
	}

	.site-header--commerce .site-header__utility-menu-list > li > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2, 8px);

		min-height: 44px;
		padding: var(--space-2, 8px) var(--space-3, 12px);

		font-size: 12px;
		font-weight: var(--font-weight-semibold, 600);
		line-height: 1.2;
		letter-spacing: 0.045em;

		color: var(--header-text-color);
		text-decoration: none;
		white-space: nowrap;

		border-radius: var(--radius-sm, 6px);

		transition:
			color var(--transition-base, 0.25s ease),
			background var(--transition-base, 0.25s ease);
	}

	.site-header--commerce
		.site-header__utility-menu-item--account
		> a,
	.site-header--commerce
		.site-header__utility-menu-item--cart
		> a {
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.site-header__utility-account-icon {
		display: block;

		width: 20px;
		height: 20px;

		flex: 0 0 auto;
	}

	.site-header__cart-utility--mobile {
		display: none;
	}

	.site-header--commerce .site-navigation__menu {
		justify-content: flex-start;

		width: 100%;
	}

	.site-header--commerce .site-navigation__menu > li > a {
		white-space: nowrap;
	}

	.site-header--commerce
		.site-navigation__menu
		> .site-navigation__menu-item--account {
		display: none;
	}

	.site-header--commerce .site-header__account {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;

		font-size: 12px;
		font-weight: var(--font-weight-semibold, 600);
		line-height: 1.2;
		letter-spacing: 0.045em;

		color: var(--header-text-color);

		text-decoration: none;
		white-space: nowrap;

		border-radius: var(--radius-sm, 6px);

		transition:
			color var(--transition-base, 0.25s ease),
			background var(--transition-base, 0.25s ease);
	}

	.site-header__account-icon,
	.site-navigation__account-icon {
		display: block;

		width: 20px;
		height: 20px;

		flex: 0 0 auto;
	}

	.site-header--commerce .site-header__utility-menu-list > li > a:focus-visible,
	.site-header--commerce .woocommerce-product-search input[type="search"]:focus-visible,
	.site-header--commerce .woocommerce-product-search button:focus-visible {
		outline:
			var(--focus-ring-width, 2px)
			solid
			var(--header-material-focus);
		outline-offset: var(--focus-ring-offset, 4px);
	}

	.site-header--commerce .woocommerce-product-search {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;

		width: 100%;
		margin: 0;
	}

	.site-header--commerce .woocommerce-product-search input[type="search"] {
		min-width: 0;
		min-height: 44px;

		padding:
			var(--space-2, 8px)
			var(--space-3, 12px);

		color: var(--header-text-color);
		background: var(--header-control-surface);

		border: 1px solid var(--header-material-border);
		border-radius:
			var(--radius-sm, 6px)
			0
			0
			var(--radius-sm, 6px);

		font: inherit;
	}

	.site-header--commerce .woocommerce-product-search button {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;

		color: var(--header-text-color);
		background: var(--header-control-surface);

		border: 1px solid var(--header-material-border);
		border-left: 0;
		border-radius:
			0
			var(--radius-sm, 6px)
			var(--radius-sm, 6px)
			0;

		font: inherit;
		font-weight: var(--font-weight-semibold, 600);

		cursor: pointer;
	}

	.site-header__search-submit-icon {
		display: block;

		width: 20px;
		height: 20px;

		flex: 0 0 auto;
	}

	.pami-utility-cart-state {
		position: relative;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;

		min-width: 24px;
		min-height: 24px;
	}

	.pami-utility-cart-state.is-empty {
		gap: 0;
	}

	.site-header--commerce .site-header__phone {
		display: none;
	}
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.site-header--commerce .site-header__utility-menu-list > li > a:hover,
	.site-header--commerce .woocommerce-product-search button:hover {
		color: var(--accent-color);
		background: var(--header-control-surface-hover);
	}
}