/* =========================================================
   AVELOR — Header polish (Slice 10)
   Icon sizing + mobile off-canvas drawer styling.
   ========================================================= */

/* Responsive announcement bar text — desktop on ≥690px, mobile on <690px */
.av-announce-desktop { display: inline; }
.av-announce-mobile { display: none; }
@media (max-width: 689px) {
	.av-announce-desktop { display: none; }
	.av-announce-mobile { display: inline; }
	/* Larger font for mobile announcement (shorter text fits comfortably) */
	[data-id="top-row"] .ct-text,
	[data-id="top-row"] [class*="header-text"],
	header [data-row="top"] .ct-text,
	header [data-row="top"] p {
		font-size: 14px !important;
		font-weight: var(--fw-medium) !important;
	}
}

/* Hamburger trigger — black/graphite stroke, no blue browser default */
[data-id="trigger"],
.ct-header-trigger {
	color: var(--fg-primary) !important;
	background: transparent !important;
	border: 0 !important;
	-webkit-tap-highlight-color: transparent;
}
[data-id="trigger"] svg,
.ct-header-trigger svg {
	color: var(--fg-primary) !important;
	stroke: var(--fg-primary) !important;
}

/* All header icons — Lucide outline style, on-tone color */
.ct-header-search svg[data-avelor-lucide],
.ct-header-account svg[data-avelor-lucide],
[class*="ct-header"][class*="wishlist"] svg[data-avelor-lucide],
[class*="ct-header"][class*="wish-list"] svg[data-avelor-lucide],
.ct-header-cart svg[data-avelor-lucide],
.ct-cart-item svg[data-avelor-lucide],
.ct-header-trigger svg[data-avelor-lucide],
[data-id="trigger"] svg[data-avelor-lucide] {
	width: 22px !important;
	height: 22px !important;
	stroke-width: 1.5 !important;
	fill: none !important;
	stroke: currentColor !important;
}
.ct-header-search svg[data-avelor-lucide] *,
.ct-header-account svg[data-avelor-lucide] *,
[class*="ct-header"][class*="wishlist"] svg[data-avelor-lucide] *,
[class*="ct-header"][class*="wish-list"] svg[data-avelor-lucide] *,
.ct-header-cart svg[data-avelor-lucide] *,
.ct-cart-item svg[data-avelor-lucide] *,
.ct-header-trigger svg[data-avelor-lucide] *,
[data-id="trigger"] svg[data-avelor-lucide] * {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.5 !important;
}

.ct-header-search,
.ct-header-account,
[class*="ct-header"][class*="wishlist"],
[class*="ct-header"][class*="wish-list"],
.ct-header-cart {
	color: var(--fg-primary) !important;
	transition: opacity var(--dur-base) var(--ease-out);
}
.ct-header-search a, .ct-header-search button,
.ct-header-account a, .ct-header-account button,
[class*="ct-header"][class*="wishlist"] a, [class*="ct-header"][class*="wishlist"] button,
[class*="ct-header"][class*="wish-list"] a, [class*="ct-header"][class*="wish-list"] button,
.ct-header-cart a, .ct-header-cart button {
	color: var(--fg-primary) !important;
}
.ct-header-search:hover,
.ct-header-account:hover,
[class*="ct-header"][class*="wishlist"]:hover,
[class*="ct-header"][class*="wish-list"]:hover,
.ct-header-cart:hover {
	opacity: 0.7;
}

/* Kill focus-visible outline on header icon toggle buttons. They focus
   after click which leaves a square ring around the icon — looks like a
   stuck "selected" state. Brand-tight headers shouldn't show this. */
.ct-header-search:focus,
.ct-header-search:focus-visible,
.ct-header-account:focus,
.ct-header-account:focus-visible,
.ct-header-account a:focus,
.ct-header-account a:focus-visible,
[class*="ct-header"][class*="wishlist"]:focus,
[class*="ct-header"][class*="wishlist"]:focus-visible,
[class*="ct-header"][class*="wish-list"]:focus,
[class*="ct-header"][class*="wish-list"]:focus-visible,
.ct-header-cart:focus,
.ct-header-cart:focus-visible,
.ct-header-cart a:focus,
.ct-header-cart a:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

/* Always show outline heart — hide Blocksy's filled-heart variant which
   it swaps in when wishlist has items. We want consistent outline always. */
[class*="ct-header"][class*="wishlist"] .ct-heart-fill,
[class*="ct-header"][class*="wish-list"] .ct-heart-fill {
	display: none !important;
}
[class*="ct-header"][class*="wishlist"] svg path,
[class*="ct-header"][class*="wish-list"] svg path {
	fill: none !important;
}

/* Equal spacing between header icons on desktop. Blocksy applies
   uneven margins per icon (account gets 30px, others 10px). Reset to 0
   so the flex `gap` controls all spacing uniformly. */
header [data-items="primary"] > .ct-header-search,
header [data-items="primary"] > .ct-header-account,
header [data-items="primary"] > [class*="ct-header-wishlist"],
header [data-items="primary"] > [class*="ct-header-wish-list"],
header [data-items="primary"] > .ct-header-cart {
	margin: 0 !important;
}
header [data-items="primary"] {
	gap: 18px !important;
}

/* Cart + wishlist badge — deep-green pill, white text */
.ct-header-cart .ct-dynamic-count-cart,
[class*="ct-header"][class*="wishlist"] [class*="dynamic-count"],
[class*="ct-header"][class*="wish-list"] [class*="dynamic-count"],
[class*="ct-header"][class*="wishlist"] [class*="ct-count"],
[class*="ct-header"][class*="wish-list"] [class*="ct-count"] {
	background: var(--avelor-deep-green) !important;
	color: var(--avelor-white) !important;
	font-family: var(--font-sans);
	font-size: 10px !important;
	font-weight: var(--fw-medium);
	border: 0 !important;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* Spacing between right-side icons */
.ct-header-cta-end,
[data-row="middle"] [data-items*="search"],
.ct-header-icons-row {
	gap: 18px;
}

/* =========================================================
   Mobile off-canvas menu — clean white panel, AVELOR typography
   ========================================================= */
#offcanvas.ct-panel {
	background: rgba(32, 35, 34, 0.32);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
#offcanvas .ct-panel-inner {
	background: var(--avelor-white) !important;
	font-family: var(--font-sans);
	color: var(--fg-primary);
	box-shadow: var(--shadow-popover);
	max-width: min(86vw, 360px);
}

/* Header bar inside offcanvas — show AVELOR logo via JS-injected element */
#offcanvas .ct-panel-actions {
	padding: 0 12px 0 var(--container-pad);
	border-bottom: 1px solid var(--avelor-line);
	display: flex;
	align-items: center;
	min-height: 56px;
}
#offcanvas .ct-panel-heading {
	display: none; /* hide default "Меню" / heading text */
}
#offcanvas .avelor-drawer-logo {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display, var(--font-sans));
	font-size: 20px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.18em;
	color: var(--fg-primary);
	text-decoration: none;
}
#offcanvas .avelor-drawer-logo img {
	max-height: 28px;
	width: auto;
	display: block;
}

/* Drawer button "Перейти до магазину" — AVELOR primary pill, with breathing
   room from drawer edges */
#offcanvas .header-button-container,
#offcanvas .ct-header-button {
	display: flex !important;
	justify-content: center;
	width: 100% !important;
	padding: 20px 24px !important;
	margin: 0 !important;
}
#offcanvas a.ct-button,
#offcanvas .ct-header-button a.ct-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
	flex: 0 0 auto !important;
	height: 44px;
	padding: 0 24px !important;
	background: var(--avelor-deep-green) !important;
	color: var(--avelor-white) !important;
	border: 1px solid var(--avelor-deep-green) !important;
	border-radius: var(--radius-lg) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: var(--fw-medium) !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color var(--dur-base) var(--ease-out);
}
#offcanvas a.ct-button:hover {
	background: #173027 !important;
	border-color: #173027 !important;
}
#offcanvas .ct-toggle-close {
	margin-left: auto;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: var(--fg-primary);
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--dur-fast) var(--ease-out);
}
#offcanvas .ct-toggle-close:hover,
#offcanvas .ct-toggle-close:focus,
#offcanvas .ct-toggle-close:focus-visible {
	background: rgba(32, 35, 34, 0.06) !important;
	outline: 0 !important;
	opacity: 1;
}

/* Menu links — large tappable rows, AVELOR Inter, divider lines */
#offcanvas .ct-panel-content-inner {
	padding: 0 !important;
	background: transparent;
	display: block !important;
}
#offcanvas nav,
#offcanvas .menu,
#offcanvas ul.menu,
#offcanvas .ct-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}
#offcanvas .menu li,
#offcanvas ul.menu > li,
#offcanvas .ct-menu > li {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--avelor-line);
}
#offcanvas .menu li:last-child,
#offcanvas ul.menu > li:last-child,
#offcanvas .ct-menu > li:last-child {
	border-bottom: 0;
}
#offcanvas .mobile-menu ul li,
#offcanvas .mobile-menu ul li > a,
#offcanvas .mobile-menu li > a > span,
#offcanvas .menu li > a,
#offcanvas ul.menu > li > a,
#offcanvas .ct-menu > li > a {
	color: var(--fg-primary) !important;
	-webkit-text-fill-color: var(--fg-primary) !important;
}
#offcanvas .mobile-menu ul li > a,
#offcanvas .menu li > a,
#offcanvas ul.menu > li > a,
#offcanvas .ct-menu > li > a {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	padding: 14px 20px !important;
	font-family: var(--font-sans) !important;
	font-size: 16px !important;
	font-weight: var(--fw-regular) !important;
	text-align: left !important;
	text-decoration: none;
	letter-spacing: 0;
	transition: background-color var(--dur-base) var(--ease-out);
}
#offcanvas .mobile-menu ul,
#offcanvas .mobile-menu ul li {
	text-align: left !important;
}
#offcanvas .mobile-menu ul li > a:hover,
#offcanvas .menu li > a:hover,
#offcanvas ul.menu > li > a:hover,
#offcanvas .ct-menu > li > a:hover {
	background: var(--avelor-milk) !important;
	color: var(--fg-primary) !important;
}
#offcanvas .mobile-menu ul li.current-menu-item > a,
#offcanvas .mobile-menu ul li.current_page_item > a,
#offcanvas .menu li.current_page_item > a,
#offcanvas .menu li.current-menu-item > a {
	font-weight: var(--fw-medium) !important;
	color: var(--avelor-deep-green) !important;
}

/* Submenu — indented, milk-bg */
#offcanvas .sub-menu,
#offcanvas ul.sub-menu {
	list-style: none;
	margin: 0 !important;
	padding: 0 0 12px 0 !important;
	background: var(--avelor-milk);
	border-top: 1px solid var(--avelor-line);
}
#offcanvas .sub-menu li > a {
	padding: 12px 20px 12px 36px !important;
	font-size: 14px !important;
	color: var(--fg-muted) !important;
	border-bottom: 0 !important;
}

/* Hamburger trigger — no focus outline */
.ct-header-trigger,
#offcanvas .ct-header-trigger {
	outline: 0 !important;
	box-shadow: none !important;
}
.ct-header-trigger:hover,
.ct-header-trigger:focus,
.ct-header-trigger:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}


/* =========================================================
   Search modal — compact top strip
   Inline pattern: 🔍 + input | divider | "Закрити" [ESC]
   ========================================================= */
#search-modal.ct-panel {
	background: rgba(32, 35, 34, 0.18) !important;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Hide the separate close-button row — we put close inline on the right
   side of the form instead. */
#search-modal .ct-panel-actions {
	display: none !important;
}

/* The form-wrapper becomes a top-anchored white strip */
#search-modal .ct-panel-content {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
	max-width: none;
	background: var(--avelor-white);
	box-shadow: 0 8px 32px rgba(32, 35, 34, 0.08);
	padding: 0;
	z-index: 1;
}

/* Form itself — single horizontal row */
#search-modal .ct-search-form {
	display: flex !important;
	align-items: center;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 32px;
	background: transparent;
	border: 0;
	height: 76px;
	gap: 0;
}

/* Search input — fills row, search icon inline left */
#search-modal .ct-search-form .modal-field,
#search-modal .ct-search-form input[type="search"],
#search-modal .ct-search-form input.search-field {
	flex: 1 1 auto !important;
	height: 76px !important;
	padding: 0 24px 0 44px !important;
	background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23202322' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 8px center !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	font-family: var(--font-sans) !important;
	font-size: 18px !important;
	font-weight: var(--fw-regular) !important;
	color: var(--fg-primary) !important;
}
#search-modal .ct-search-form .modal-field::placeholder,
#search-modal .ct-search-form input[type="search"]::placeholder {
	color: var(--fg-muted);
	font-weight: var(--fw-regular);
}

/* Hide Blocksy's submit-icon button (search icon is on the input bg) */
#search-modal .ct-search-form .ct-search-form-controls {
	display: none !important;
}

/* "Закрити [ESC]" inline pill — appended via JS as `.avelor-search-close` */
#search-modal .avelor-search-close {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 0 0 24px;
	margin-left: 16px;
	height: 40px;
	border-left: 1px solid var(--avelor-line);
	background: transparent;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	color: var(--fg-primary);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-regular);
	cursor: pointer;
	transition: opacity var(--dur-base) var(--ease-out);
}
#search-modal .avelor-search-close:hover {
	opacity: 0.7;
}
#search-modal .avelor-search-close kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 28px;
	padding: 0 8px;
	background: var(--avelor-white);
	border: 1px solid var(--avelor-line);
	border-radius: 6px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: var(--fw-medium);
	color: var(--fg-muted);
	letter-spacing: 0.04em;
}

/* =========================================================
   Live results — full-width panel BELOW the search strip.
   Blocksy appends `.ct-search-results` as the LAST child of the
   flex `.ct-search-form`; inside the modal Blocksy sets it
   `position:static`, so it would render as a flex item BESIDE the
   input ("сбоку"). We lift it out to a fixed full-width strip under
   the 76px bar. (Older code targeted `.ct-live-results`, a class
   Blocksy never emits — so it had no effect.)
   ========================================================= */
#search-modal .ct-search-results {
	position: fixed !important;
	top: 76px;
	left: 0;
	right: 0;
	width: 100vw;
	max-width: none;
	margin: 0;
	padding: 0 !important;
	display: block !important;
	background: var(--avelor-white);
	border-top: 1px solid var(--avelor-line);
	box-shadow: 0 16px 32px rgba(32, 35, 34, 0.10);
	max-height: calc(100dvh - 76px);
	overflow-y: auto;
	z-index: 2;
}

/* Result row — full-width, left-aligned: thumb + title (+ price/stock) */
#search-modal .ct-search-results .ct-search-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 32px;
	border-bottom: 1px solid var(--avelor-line);
	color: var(--fg-primary);
	transition: background var(--dur-base) var(--ease-out);
}
#search-modal .ct-search-results .ct-search-item:hover {
	background: var(--avelor-milk);
}
#search-modal .ct-search-results .ct-media-container {
	flex: 0 0 48px;
	width: 48px;
}
#search-modal .ct-search-results .ct-search-item > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 15px;
	line-height: 1.3;
}
#search-modal .ct-search-results .product-search-meta {
	display: flex;
	gap: 10px;
	margin-top: 2px;
}
#search-modal .ct-search-results .price {
	font-weight: var(--fw-medium);
	color: var(--fg-primary);
}
#search-modal .ct-search-results .stock-status {
	color: var(--fg-muted);
}

/* "Показати більше" — centered accent row */
#search-modal .ct-search-results .ct-search-more {
	display: flex;
	justify-content: center;
	padding: 14px 32px;
	font-weight: var(--fw-medium);
	color: var(--avelor-deep-green);
}

/* Mobile: smaller font, less padding */
@media (max-width: 689px) {
	#search-modal .ct-search-form {
		padding: 0 16px;
		height: 60px;
	}
	#search-modal .ct-search-form .modal-field,
	#search-modal .ct-search-form input[type="search"] {
		height: 60px !important;
		font-size: 15px !important;
		padding-left: 40px !important;
	}
	#search-modal .avelor-search-close kbd {
		display: none; /* keyboard hint doesn't apply on touch */
	}
	#search-modal .ct-search-results {
		top: 60px;
		max-height: calc(100dvh - 60px);
	}
	#search-modal .ct-search-results .ct-search-item,
	#search-modal .ct-search-results .ct-search-more {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Logged-in header account icon: kill Blocksy's dropdown — clicking goes
   straight to /my-account/ (wired in avelor-header.js).
   Also normalize the icon swap from <img> Gravatar to our <svg>. */
.ct-header-account[data-state="in"] .ct-header-account-dropdown {
	display: none !important;
}
.ct-header-account[data-state="in"] .ct-account-item {
	cursor: pointer;
}
.ct-header-account[data-state="in"] .ct-account-item .ct-media-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	aspect-ratio: auto;
}
.ct-header-account[data-state="in"] .ct-account-item .ct-media-container svg {
	display: block;
	color: currentColor;
}
.ct-header-account[data-state="in"] .ct-account-item .ct-media-container img {
	display: none;
}

/* =========================================================
   AVELOR — Main-nav dropdowns (Бренди / Більше)
   Matches Claude Design av-nav-dd / av-nav-panel —
   white panel, --avelor-line border, 14px radius, 8px padding,
   each item 10×14 with → arrow that shifts on hover.
   Targets Blocksy's #header-menu-1 [data-id="menu"] tree only,
   so off-canvas + account dropdowns are untouched.
   ========================================================= */

/* Trigger link inside the top nav */
header [data-id="menu"] > .menu > .menu-item-has-children > .ct-menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--fg-primary) !important;
	transition: color var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)) !important;
}
header [data-id="menu"] > .menu > .menu-item-has-children:hover > .ct-menu-link,
header [data-id="menu"] > .menu > .menu-item-has-children.ct-active > .ct-menu-link {
	color: var(--avelor-deep-green, #1F3A2E) !important;
}

/* Caret (Blocksy's built-in <span class="ct-toggle-dropdown-desktop">) */
header [data-id="menu"] > .menu > .menu-item-has-children > .ct-menu-link .ct-toggle-dropdown-desktop {
	display: inline-flex;
	align-items: center;
	margin-left: 2px;
	transition: transform var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
	color: var(--fg-muted, #6F6F6A);
}
header [data-id="menu"] > .menu > .menu-item-has-children > .ct-menu-link .ct-toggle-dropdown-desktop svg {
	width: 10px;
	height: 10px;
	fill: currentColor;
}
header [data-id="menu"] > .menu > .menu-item-has-children:hover > .ct-menu-link .ct-toggle-dropdown-desktop,
header [data-id="menu"] > .menu > .menu-item-has-children.ct-active > .ct-menu-link .ct-toggle-dropdown-desktop {
	color: var(--avelor-deep-green, #1F3A2E);
}
header [data-id="menu"] > .menu > .menu-item-has-children.ct-active > .ct-menu-link .ct-toggle-dropdown-desktop {
	transform: rotate(180deg);
}

/* Panel — white card with line border + soft shadow */
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu {
	background: var(--avelor-white, #FEFEFE) !important;
	border: 1px solid var(--avelor-line, #E8E2D8) !important;
	border-radius: 14px !important;
	box-shadow:
		0 1px 0 rgba(20, 20, 20, 0.02),
		0 14px 40px -16px rgba(20, 20, 20, 0.18) !important;
	padding: 8px !important;
	min-width: 240px;
	margin-top: 14px;
	overflow: visible !important;
}

/* Invisible bridge so the cursor can travel from the trigger down to
   the panel without crossing a dead zone. Blocksy already renders a
   ::before above the submenu but its height defaults to 0; we extend
   it tall enough to cover the 14px margin-top gap AND the 10px
   translateY that Blocksy applies during the open animation, plus a
   small overlap into the trigger area so the cursor never slips out
   from under it. The bridge is only hit-testable while the panel is
   open (it inherits visibility from .sub-menu, which is hidden when
   not active). */
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu::before {
	content: "" !important;
	position: absolute !important;
	top: -32px !important;
	left: 0 !important;
	right: 0 !important;
	height: 32px !important;
	width: 100% !important;
	transform: none !important;
	background: transparent;
	pointer-events: auto;
}

/* Items — clean rows with right-aligned → arrow */
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu .menu-item {
	border: 0 !important;
	background: transparent !important;
}
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu .menu-item + .menu-item {
	margin-top: 2px;
}
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu .ct-menu-link {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 14px !important;
	border-radius: 8px !important;
	color: var(--avelor-graphite, #202322) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)),
		color var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
}
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu .ct-menu-link::after {
	content: "→";
	font-size: 14px;
	color: var(--avelor-line, #E8E2D8);
	transition:
		transform var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)),
		color var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
}
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu .ct-menu-link:hover,
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu .menu-item.current-menu-item > .ct-menu-link {
	background: var(--avelor-milk, #F5EFE4) !important;
	color: var(--avelor-deep-green, #1F3A2E) !important;
}
header [data-id="menu"] > .menu > .menu-item-has-children > .sub-menu .ct-menu-link:hover::after {
	color: var(--avelor-deep-green, #1F3A2E);
	transform: translateX(3px);
}

/* --- Top bar: utility links (left) + announce (right) — Roman R2, variant A --- */
[data-row="top"] .ct-header-text .entry-content > p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px 18px;
	flex-wrap: wrap;
	margin: 0;
	width: 100%;
}
.av-topbar-links {
	display: inline-flex;
	gap: 16px;
	white-space: nowrap;
}
.av-topbar-links a {
	color: inherit;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-decoration: none;
	opacity: 0.92;
}
.av-topbar-links a:hover {
	text-decoration: underline;
	opacity: 1;
}
@media (max-width: 689.98px) {
	[data-row="top"] .ct-header-text .entry-content > p { justify-content: center; }
	.av-topbar-links { gap: 12px; max-width: 100%; overflow-x: auto; }
	.av-topbar-links a { font-size: 11px; }
}