/* Masthead: top bar + header row, mega menu, header search suggestions, account dropdown. */

/* Top bar (template-parts/header/top-bar.php). */
.sl-topbar {
	background-color: var(--sl-black);
	color: var(--sl-white);
	padding: .625rem 1rem;
	font-size: .75rem;
	line-height: 1rem;
	letter-spacing: .025em;
	border-bottom: 1px solid var(--sl-gray-800);
}
.sl-topbar__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
@media (min-width: 768px) {
	.sl-topbar__row {
		flex-direction: row;
	}
}
.sl-topbar__note {
	display: flex;
	align-items: center;
	gap: .625rem;
	text-align: center;
}
@media (min-width: 768px) {
	.sl-topbar__note {
		text-align: left;
	}
}
.sl-topbar__note p {
	color: var(--sl-gray-300);
	font-weight: 400;
}
.sl-topbar__info {
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: 100%;
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-300);
}
@media (min-width: 480px) {
	.sl-topbar__info { gap: 1.5rem; }
}
/* On narrow phones the address gives way (ellipsis) so the phone number never wraps. */
.sl-topbar__location {
	display: flex;
	align-items: center;
	gap: .375rem;
	min-width: 0;
}
.sl-topbar__location .sl-topbar__link {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sl-topbar__pin-icon {
	color: var(--sl-amber-400);
}
.sl-topbar__link {
	font-weight: 500;
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-topbar__link:hover {
	color: var(--sl-amber-400);
}
.sl-topbar__phone {
	flex-shrink: 0;
	font-weight: 600;
	color: var(--sl-white);
	white-space: nowrap;
	border-left: 1px solid var(--sl-gray-700);
	padding-left: .75rem;
	transition: color var(--sl-duration) var(--sl-ease-std);
}
@media (min-width: 480px) {
	.sl-topbar__phone { padding-left: 1rem; }
}
/* Language switcher (inc/compat.php starlight_language_switcher): one markup, four looks
   (Customizer → Header → Language switcher style) in two colour contexts. */
.sl-lang {
	--lang-fg: var(--sl-gray-300);
	--lang-hover: var(--sl-white);
	--lang-active-bg: var(--sl-white);
	--lang-active-fg: var(--sl-black);
	--lang-menu-bg: var(--sl-black);
	--lang-menu-border: var(--sl-gray-800);
	position: relative;
	display: flex;
	align-items: center;
	gap: .25rem;
	padding-left: .75rem;
	border-left: 1px solid var(--sl-gray-800);
	font-size: .75rem;
	line-height: 1rem;
}
.sl-lang--header,
.sl-lang--mobile {
	--lang-fg: var(--sl-gray-600);
	--lang-hover: var(--sl-black);
	--lang-active-bg: var(--sl-black);
	--lang-active-fg: var(--sl-white);
	--lang-menu-bg: var(--sl-white);
	--lang-menu-border: var(--sl-gray-200);
	padding-left: 0;
	border-left: 0;
}
.sl-lang--header { display: none; }
@media (min-width: 768px) {
	.sl-lang--header { display: flex; }
}
.sl-lang__link,
.sl-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .125rem .375rem;
	border-radius: var(--sl-r-small);
	color: var(--lang-fg);
	font: inherit;
	font-weight: 600;
	letter-spacing: .05em;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
}
.sl-lang__link:hover,
.sl-lang__toggle:hover { color: var(--lang-hover); }
.sl-lang__flag { display: inline-flex; flex: 0 0 auto; }
.sl-lang__flag img { display: block; width: 1rem; height: auto; max-width: none; }
/* Tabs: the active language sits in a pill. */
.sl-lang--tabs .sl-lang__link.is-active { background: var(--lang-active-bg); color: var(--lang-active-fg); }
/* Plain text: EN / ՀԱՅ with a slash, the active one underlined. */
.sl-lang--text { gap: 0; }
.sl-lang--text .sl-lang__link { padding-inline: .25rem; }
.sl-lang--text .sl-lang__link + .sl-lang__link::before { content: "/"; margin-right: .5rem; color: var(--lang-fg); font-weight: 400; }
.sl-lang--text .sl-lang__link.is-active { color: var(--lang-hover); text-decoration: underline; text-underline-offset: .25em; }
/* Flags: flag + label, the active one marked. */
.sl-lang--flags .sl-lang__link { opacity: .65; }
.sl-lang--flags .sl-lang__link.is-active { opacity: 1; color: var(--lang-hover); box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; }
/* Dropdown: the current language as a button, the others in a small panel. */
.sl-lang--dropdown { display: block; }
.sl-lang--dropdown.sl-lang--header { display: none; }
@media (min-width: 768px) {
	.sl-lang--dropdown.sl-lang--header { display: block; }
}
.sl-lang__toggle { color: var(--lang-hover); }
.sl-lang__chevron { transition: transform .15s ease; }
.sl-lang.is-open .sl-lang__chevron { transform: rotate(180deg); }
.sl-lang__menu {
	position: absolute;
	top: calc(100% + .375rem);
	right: 0;
	z-index: 60;
	display: none;
	flex-direction: column;
	min-width: 100%;
	padding: .25rem;
	border: 1px solid var(--lang-menu-border);
	border-radius: var(--sl-r-popup);
	background: var(--lang-menu-bg);
	box-shadow: var(--sl-shadow-xl);
}
.sl-lang.is-open .sl-lang__menu { display: flex; }
/* Hover mode (Customizer → Header → Language switcher → Dropdown opens): the menu also opens on mouse hover
   and keyboard focus, on devices that can hover; the invisible strip below bridges the gap to the menu. */
.sl-lang__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
@media (hover: hover) {
	.sl-lang[data-sl-open="hover"]:hover .sl-lang__menu,
	.sl-lang[data-sl-open="hover"]:focus-within .sl-lang__menu { display: flex; }
	.sl-lang[data-sl-open="hover"]:hover .sl-lang__chevron,
	.sl-lang[data-sl-open="hover"]:focus-within .sl-lang__chevron { transform: rotate(180deg); }
}
.sl-lang__menu .sl-lang__link { padding: .375rem .625rem; }
.sl-lang__menu .sl-lang__link.is-active { color: var(--lang-hover); }
.sl-mobile-menu__lang { padding: .75rem 1rem 0; }
.sl-lang__link.is-active { background: var(--sl-white); color: var(--sl-black); }
.sl-topbar__phone:hover {
	color: var(--sl-amber-400);
}

/* Header row (header.php). */
.sl-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 5rem;
	gap: .5rem;
	transition: height 300ms var(--sl-ease-apple);
}
@media (min-width: 640px) {
	.sl-header__row {
		gap: 1.5rem;
	}
}
/* "Menu position: centre" (header.php .sl-header__row--nav-center): from 1024px the row is a
   three-column grid — logo | menu | search, account, cart — so the menu sits in the true middle
   whatever the widths on either side. Below 1024px the menu lives in the mobile drawer. */
.sl-header__center { display: none; }
@media (min-width: 1024px) {
	.sl-header__row--nav-center {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}
	.sl-header__row--nav-center .sl-header__center { display: flex; justify-content: center; }
	.sl-header__row--nav-center .sl-header__end { justify-self: end; justify-content: flex-end; }
}
.sl-header__start {
	display: flex;
	align-items: center;
	gap: .25rem;
	min-width: 0;
}
@media (min-width: 640px) {
	.sl-header__start {
		gap: .75rem;
	}
}
@media (min-width: 1024px) {
	.sl-header__start {
		gap: 2.25rem;
	}
}
.sl-header__menu-btn {
	padding: .5rem;
	margin-left: -.5rem;
	flex-shrink: 0;
}
@media (min-width: 1024px) {
	.sl-header__menu-btn {
		display: none;
	}
}
.sl-header__logo-link {
	display: flex;
	align-items: center;
	padding: .5rem 0;
}
.sl-header__logo {
	transition: opacity 200ms var(--sl-ease-std);
}
.sl-header__logo:hover {
	opacity: .85;
}
.sl-header__nav {
	display: none;
	align-items: center;
	gap: 1.75rem;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--sl-gray-700);
}
@media (min-width: 1024px) {
	.sl-header__nav {
		display: flex;
	}
}
.sl-header__menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.sl-primary-item__link {
	color: var(--sl-gray-600);
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-primary-item__link:hover {
	color: var(--sl-black);
}
.sl-header__search {
	display: none;
	flex: 1 1 0%;
	max-width: 28rem;
	margin: 0 1rem;
}
@media (min-width: 768px) {
	.sl-header__search {
		display: flex;
	}
}
.sl-header__end {
	display: flex;
	align-items: center;
	gap: .25rem;
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.sl-header__end {
		gap: 1rem;
	}
}
/* Search inside the right-hand group ("Search field position: right"): the group may shrink,
   the field takes a fixed width, and its suggestions panel opens wider, aligned to the right. */
.sl-header__end--search {
	flex: 0 1 auto;
	min-width: 0;
}
.sl-header__search--end {
	flex: 0 1 16rem;
	min-width: 10rem;
	max-width: none;
	margin: 0;
}
@media (min-width: 1280px) {
	.sl-header__search--end { flex-basis: 20rem; }
}
.sl-header__search--end .sl-search__panel {
	left: auto;
	width: max(100%, 24rem);
}

/*
 * Standalone 40x40 icon-button hit area, shared by the header account button, the mobile
 * search opener and (Task 3) the cart drawer's icon part.
 */
.sl-icon-btn {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sl-r-icon);
	color: var(--sl-gray-700);
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std);
}
/* The neighbouring header button (cart) shares the same hover. */
.sl-icon-btn:hover,
.sl-cart-btn:hover {
	color: var(--sl-black);
	background-color: var(--sl-gray-100);
}
.sl-icon-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--sl-black), 0 0 0 4px var(--sl-white);
}
/* Mobile search opener (md:hidden): must come after .sl-icon-btn so its display:none wins at
   the same specificity. */
@media (min-width: 768px) {
	.sl-header__search-btn {
		display: none;
	}
}

/* Header account control (template-parts/header/account-dropdown.php). */
.sl-account {
	position: relative;
	display: none;
}
@media (min-width: 1024px) {
	.sl-account {
		display: block;
	}
}
.sl-account__mobile-link {
}
@media (min-width: 1024px) {
	.sl-account__mobile-link {
		display: none;
	}
}
.sl-account-dropdown {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: .75rem;
	width: 18rem;
	background-color: rgb(255 255 255 / .95);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-popup);
	box-shadow: var(--sl-shadow-xl);
	padding: 1.25rem;
}
.sl-account-dropdown__greeting {
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--sl-black);
	margin-bottom: .75rem;
}
.sl-account-dropdown__menu > * + * {
	margin-top: .25rem;
}
.sl-account-dropdown__link {
	display: block;
	padding: .375rem 0;
	font-size: .875rem;
	line-height: 1.25rem;
	color: var(--sl-gray-700);
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-account-dropdown__link:hover {
	color: var(--sl-black);
}
.sl-account-dropdown__note {
	font-size: .875rem;
	line-height: 1.25rem;
	color: var(--sl-gray-600);
	margin-bottom: .75rem;
}
.sl-account-login-form > * + * {
	margin-top: .75rem;
}
.sl-account-login-form__label {
	display: block;
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--sl-gray-600);
	margin-bottom: .25rem;
}
.sl-account-login-form__input {
	width: 100%;
	font-size: .875rem;
	line-height: 1.25rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-field);
}
.sl-account-login-form__input:focus {
	border-color: var(--sl-black);
	outline: none;
	box-shadow: 0 0 0 2px rgb(245 158 11 / .2);
}
.sl-account-login-form__row--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sl-account-login-form__remember {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-600);
}
.sl-account-login-form__checkbox {
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-radius-sm);
}
.sl-account-login-form__checkbox:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgb(245 158 11 / .2);
}
.sl-account-login-form__forgot {
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-amber-700);
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-account-login-form__forgot:hover {
	color: var(--sl-amber-800);
}
.sl-account-login-form__create {
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-500);
	text-align: center;
}
.sl-account-login-form__create-link {
	color: var(--sl-amber-700);
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-account-login-form__create-link:hover {
	color: var(--sl-amber-800);
}

/* Cart button (header.php). */
.sl-cart-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: .625rem;
	color: var(--sl-black);
	padding: .5rem;
	border-radius: var(--sl-r-icon);
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-cart-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--sl-black), 0 0 0 4px var(--sl-white);
}
.sl-cart-btn__icon-wrap {
	position: relative;
}
.sl-cart-btn__icon {
	color: var(--sl-black);
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-cart-count {
	position: absolute;
	top: -.5rem;
	right: -.5rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 .25rem;
	border-radius: var(--sl-radius-full);
	background-color: var(--sl-amber-500);
	color: var(--sl-white);
	font-size: 10px;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
}
/* Header cart button: the subtotal (rendered by starlight_cart_subtotal_html(), also
   swapped in by the woocommerce_add_to_cart_fragments filter) is hidden below `sm`. */
.sl-cart-subtotal {
	display: none;
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--sl-gray-800);
	letter-spacing: -.025em;
}
@media (min-width: 640px) {
	.sl-cart-subtotal {
		display: inline-block;
	}
}

/* Mega menu (template-parts/header/mega-menu.php, inc/menus.php's Starlight_Menu_Walker). */
.sl-mega-menu {
	position: relative;
	padding: 1.5rem 0;
}
.sl-mega-menu__trigger {
	display: flex;
	align-items: center;
	gap: .375rem;
	color: var(--sl-black);
	font-weight: 600;
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-mega-menu__trigger:hover {
	color: var(--sl-amber-600);
}
.sl-mega-menu__trigger:focus {
	outline: none;
}
.sl-mega-menu__chevron {
	color: var(--sl-gray-500);
	transition: transform var(--sl-duration) var(--sl-ease-std);
}
.sl-mega-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Header flyouts (mega menu, its submenus, .sl-dropdown panels) open with a 150ms fade +
   scale .98 -> 1 from their top edge, like the search suggestions panel. */
.sl-mega__panel {
	position: absolute;
	left: 0;
	top: 100%;
	width: 18rem;
	z-index: 50;
	background-color: var(--sl-white);
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-popup);
	box-shadow: var(--sl-shadow-xl);
	padding: .5rem 0;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.98);
	transform-origin: top left;
	transition: opacity 150ms var(--sl-ease-apple), transform 150ms var(--sl-ease-apple), visibility 0s linear 150ms;
}
.sl-mega-menu:hover > .sl-mega__panel,
.sl-mega-menu:focus-within > .sl-mega__panel,
.sl-mega-menu.is-open > .sl-mega__panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}
.sl-mega-item {
	position: relative;
}
.sl-mega-item__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .625rem 1rem;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--sl-black);
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-mega-item__link:hover {
	background-color: var(--sl-gray-50);
	color: var(--sl-amber-600);
}
.sl-mega-item__link[aria-current="page"] {
	color: var(--sl-amber-600);
}
.sl-mega-item__count {
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-400);
	font-family: var(--sl-font-mono);
}
.sl-mega-item__chevron {
	color: var(--sl-gray-400);
}
.sl-mega-subitem__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem;
	font-size: .875rem;
	line-height: 1.25rem;
	color: var(--sl-gray-600);
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-mega-subitem__link:hover {
	background-color: var(--sl-gray-50);
	color: var(--sl-amber-600);
}
.sl-mega-subitem__link[aria-current="page"] {
	color: var(--sl-amber-600);
}
.sl-mega-subitem__link--inline {
	padding-left: 2rem;
}
.sl-mega-subitem__chevron {
	color: var(--sl-gray-300);
}
.sl-mega-sub {
	position: absolute;
	left: 100%;
	top: 0;
	margin-top: -.5rem;
	margin-left: .25rem;
	width: 16rem;
	background-color: var(--sl-white);
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-popup);
	box-shadow: var(--sl-shadow-xl);
	padding: .5rem 0;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.98);
	transform-origin: top left;
	transition: opacity 150ms var(--sl-ease-apple), transform 150ms var(--sl-ease-apple), visibility 0s linear 150ms;
}
.sl-mega-item:hover > .sl-mega-sub,
.sl-mega-item:focus-within > .sl-mega-sub {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}
.sl-mega__all {
	display: block;
	border-top: 1px solid var(--sl-gray-100);
	margin-top: .5rem;
	padding: .75rem 1rem .25rem;
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: var(--sl-amber-600);
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-mega__all:hover {
	color: var(--sl-amber-700);
}

/* Mobile categories accordion (inc/menus.php Starlight_Menu_Walker 'mobile' variant, rendered
   inside template-parts/header/mobile-menu.php's .sl-mobile-cats list): moved to
   assets/css/drawers.css (Task 3 owns and verifies the open mobile menu). */

/* Header search (template-parts/header/search-form.php). */
.sl-search {
	position: relative;
	width: 100%;
}
.sl-search__input {
	width: 100%;
	background-color: var(--sl-off-white);
	font-size: .875rem;
	line-height: 1.25rem;
	color: var(--sl-black);
	padding: .625rem 1rem .625rem 2.5rem;
	border-radius: var(--sl-r-pill);
	border: 1px solid var(--sl-gray-200);
	transition: all var(--sl-duration) var(--sl-ease-std);
}
.sl-search__input::placeholder {
	color: var(--sl-gray-400);
}
.sl-search__input:focus {
	background-color: var(--sl-white);
	border-color: var(--sl-black);
	outline: none;
	box-shadow: 0 0 0 1px var(--sl-black);
}
.sl-search__icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding-left: .875rem;
	display: flex;
	align-items: center;
	pointer-events: none;
	color: var(--sl-gray-400);
}
.sl-search__submit { display: none; }

/* Search field styles (Customizer → Header → Menu, search, account & cart). The rules above are
   "soft" (.sl-search--soft); the others adjust them. */
.sl-search--outline .sl-search__input {
	background-color: var(--sl-white);
	border-color: var(--sl-gray-300);
}
.sl-search--underline .sl-search__input {
	padding-left: 1.75rem;
	background-color: transparent;
	border-width: 0 0 1px;
	border-color: var(--sl-gray-300);
	border-radius: 0;
}
.sl-search--underline .sl-search__input:focus {
	background-color: transparent;
	box-shadow: 0 1px 0 0 var(--sl-black);
}
.sl-search--underline .sl-search__icon { padding-left: 0; }
.sl-search--button .sl-search__input {
	padding-right: 5.5rem;
	background-color: var(--sl-white);
	border-color: var(--sl-gray-300);
}
.sl-search--button .sl-search__submit {
	position: absolute;
	top: .25rem;
	right: .25rem;
	bottom: .25rem;
	display: inline-flex;
	align-items: center;
	padding: 0 1rem;
	border-radius: var(--sl-r-pill);
	background: var(--sl-black);
	color: var(--sl-white);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-search--button .sl-search__submit:hover { background: var(--sl-amber-600); }
.sl-search--button .sl-search__submit:focus-visible {
	outline: 2px solid var(--sl-black);
	outline-offset: 2px;
}
/* Search suggestions (template-parts/header/search-form.php; .is-open / .is-active set by
   assets/js/site.js). Same glass look as the header dropdowns; opens with a 150ms fade + scale
   from the top edge. */
.sl-search__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: .5rem;
	z-index: 20;
	background-color: rgb(255 255 255 / .95);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-popup);
	box-shadow: var(--sl-shadow-xl);
	overflow: hidden;
	opacity: 0;
	transform: scale(0.98) translateY(-4px);
	transform-origin: top center;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 150ms var(--sl-ease-apple), transform 150ms var(--sl-ease-apple), visibility 0s linear 150ms;
}
.sl-search__panel.is-open {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.sl-search__skeleton {
	padding: .5rem;
}
.sl-search__skeleton-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem;
}
.sl-search__skeleton-thumb {
	width: 3rem;
	height: 3rem;
	border-radius: var(--sl-r-img);
	flex-shrink: 0;
}
.sl-search__skeleton-body {
	flex: 1 1 0%;
}
.sl-search__skeleton-body > * + * {
	margin-top: .5rem;
}
.sl-search__skeleton-line {
	display: block;
	border-radius: var(--sl-radius-sm);
}
.sl-search__skeleton-line--name {
	height: .75rem;
	width: 75%;
}
.sl-search__skeleton-line--meta {
	height: .625rem;
	width: 33.3333%;
}
.sl-search__listbox {
	max-height: 70vh;
	overflow-y: auto;
}
.sl-search__empty {
	padding: 1.5rem 1rem;
	text-align: center;
	font-size: .875rem;
	line-height: 1.25rem;
	color: var(--sl-gray-500);
}
.sl-search__item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem 1rem;
	transition: background-color 150ms var(--sl-ease-apple);
}
.sl-search__item.is-active {
	background-color: var(--sl-gray-100);
}
.sl-search__footer .sl-search__item.is-active {
	color: var(--sl-amber-600);
}
.sl-search__item--cat {
	justify-content: space-between;
	font-size: .875rem;
	line-height: 1.25rem;
	color: var(--sl-gray-700);
}
.sl-search__thumb {
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	border-radius: var(--sl-r-img);
	background-color: var(--sl-off-white);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sl-search__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.sl-search__body {
	min-width: 0;
	flex: 1 1 0%;
}
.sl-search__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.375;
	font-weight: 500;
	color: var(--sl-black);
}
.sl-search__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .125rem;
}
.sl-search__sku {
	min-width: 0;
	font-family: var(--sl-font-mono);
	font-size: 11px;
	color: var(--sl-gray-400);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-search__price {
	flex-shrink: 0;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--sl-black);
	text-align: right;
}
.sl-search__price del {
	margin-right: .25rem;
	font-size: .75rem;
	font-weight: 400;
	color: var(--sl-gray-400);
}
.sl-search__price ins {
	text-decoration: none;
}
.sl-search__group {
	padding-top: .375rem;
	padding-bottom: .375rem;
}
.sl-search__group--cats {
	border-top: 1px solid var(--sl-gray-100);
}
.sl-search__heading {
	padding: .375rem 1rem .25rem;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--sl-gray-400);
}
.sl-search__cat {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-search__count {
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-400);
}
.sl-search__footer {
	border-top: 1px solid var(--sl-gray-100);
	padding: .5rem;
}
.sl-search__all {
	justify-content: space-between;
	padding-left: .75rem;
	padding-right: .75rem;
}
.sl-search__mark {
	background-color: var(--sl-amber-100);
	color: inherit;
	border-radius: 2px;
	padding: 0 1px;
}
.sl-skeleton {
	background-color: #EEF0F2;
	animation: sl-pulse 1.1s ease-in-out infinite;
}
@keyframes sl-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* Generic dropdown panel (header account menu today), opened via .is-open by
   assets/js/site.js's [data-sl-dropdown-toggle] controller. */
.sl-dropdown {
	visibility: hidden;
	opacity: 0;
	transform: scale(0.98);
	transform-origin: top right;
	transition: opacity 150ms var(--sl-ease-apple), transform 150ms var(--sl-ease-apple), visibility 0s linear 150ms;
}
.sl-dropdown.is-open,
.sl-dropdown:focus-within {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

/*
 * Logo size override.
 * Below `sm` the header also carries the hamburger and the search opener (the mockup has
 * neither), so the logo drops to 1.5rem there to keep the row within a 390px viewport.
 */
.sl-header .sl-logo-img { height: 1.5rem; }
@media (min-width: 640px) {
	.sl-header .sl-logo-img { height: 2rem; }
}
@media (min-width: 768px) {
	.sl-header .sl-logo-img { height: 2.25rem; }
}

/* Glass header (header.php's .sl-masthead = top bar + header; assets/js/site.js "Glass header").
   With JS the masthead sticks as one block; after 24px of scroll `.is-scrolled` slides it up by
   the top bar's height (--sl-topbar-h, transform only), turns the header to glass and shrinks
   its row 80 -> 64px. The row's height and the masthead's bottom margin animate together with
   the same timing (-16px / +16px), so the page below never moves (no layout shift). Without JS
   the wrapper is `display: contents`, leaving the header sticky on its own as before. */
/* WordPress admin bar (logged-in users): fixed 32px, 46px up to 782px; up to 600px WordPress
   lets it scroll away, so nothing sticks under it there. The masthead sticks below it, and
   site.js adds the same offset to --sl-header-h, so every sticky element keyed to the header
   (product tabs, sections nav, buy bar, shop filters, catalog filter bar) follows. */
body { --sl-adminbar-h: 0px; }
body.admin-bar { --sl-adminbar-h: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --sl-adminbar-h: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar { --sl-adminbar-h: 0px; }
}

.sl-masthead {
	display: contents;
}
html.sl-js .sl-masthead {
	display: block;
	position: sticky;
	top: var(--sl-adminbar-h);
	z-index: 50;
	transition: transform 300ms var(--sl-ease-apple), margin-bottom 300ms var(--sl-ease-apple);
}
html:not(.sl-js) .sl-header {
	position: sticky;
	top: var(--sl-adminbar-h);
	z-index: 50;
}
.sl-header {
	background-color: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--sl-gray-200);
}
html.sl-js .sl-masthead.is-scrolled {
	transform: translateY(calc(-1 * var(--sl-topbar-h, 0px)));
	margin-bottom: 16px;
}
.sl-masthead.is-scrolled .sl-header {
	background-color: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom-color: rgba(17, 18, 21, 0.08);
}
.sl-masthead.is-scrolled .sl-header__row {
	height: 64px;
}
/* The mega menu trigger's vertical padding is its hover bridge to the panel: keep it flush with
   the shorter row (20px line + 2 x 22px = 64px). */
.sl-masthead.is-scrolled .sl-mega-menu {
	padding-top: 22px;
	padding-bottom: 22px;
}

/* Sticky offsets that follow the header (--sl-header-h: its visible bottom edge; --sl-buybar-h:
   the desktop sticky buy bar while shown; both set on <html> by assets/js/site.js). */
@media (min-width: 1024px) {
	.sl-sticky-summary {
		top: calc(var(--sl-header-h, 81px) + 2rem);
	}
}
.sl-product-sections-nav {
	top: calc(var(--sl-header-h, 81px) + var(--sl-buybar-h, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.sl-search__panel,
	.sl-search__item,
	.sl-masthead,
	html.sl-js .sl-masthead,
	.sl-header__row,
	.sl-mega__panel,
	.sl-mega-sub,
	.sl-dropdown {
		transition: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sl-skeleton { animation: none; }
}

/* Highlighted part of the top bar note (Customizer "Top bar note" may contain <strong>). */
.sl-topbar strong {
	color: var(--sl-white);
	font-weight: 600;
}