/* ---------------------------------------------------------
   Luxivai Header
--------------------------------------------------------- */

.luxivai-header {
	position: relative;
	z-index: 1000;
	background: var(--wp--preset--color--white, #ffffff);
	border-bottom: 1px solid var(--wp--preset--color--border-grey, #dfdfdf);
}

.luxivai-header.is-fixed {
	position: sticky;
	top: 0;
}

.luxivai-header__container {
	display: grid;
	grid-template-columns: minmax(180px, auto) 1fr auto;
	align-items: center;
	gap: 40px;
	width: min(calc(100% - 64px), 1800px);
	min-height: 76px;
	margin-inline: auto;
}

/* Brand */

.luxivai-header__brand {
	display: flex;
	align-items: center;
	min-width: 180px;
}

.luxivai-header__brand-link {
	color: var(--wp--preset--color--black, #0f0e0e);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.luxivai-header__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.luxivai-header__brand .custom-logo {
	display: block;
	width: auto;
	max-width: 216px;
	max-height: 62px;
	object-fit: contain;
}

/* Navigation */

.luxivai-navigation {
	display: flex;
	align-items: center;
}

.luxivai-navigation__menu {
	display: flex;
	align-items: center;
	gap: clamp(30px, 3vw, 58px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.luxivai-navigation__menu > li {
	position: relative;
	margin: 0;
}

.luxivai-navigation__menu > li > a {
	display: flex;
	align-items: center;
	min-height: 76px;
	padding: 2px 0;
	color: var(--wp--preset--color--charcoal, #3f3f3f);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		color 180ms ease,
		border-color 180ms ease;
}

.luxivai-navigation__menu > li > a:hover,
.luxivai-navigation__menu > li > a:focus-visible {
	color: var(--wp--preset--color--dusty-rose, #dca8a6);
}

/* Active underline */

.luxivai-navigation__menu > .current-menu-item > a,
.luxivai-navigation__menu > .current-menu-ancestor > a {
	color: #7c5b18;
}

.luxivai-navigation__menu > .current-menu-item > a::after,
.luxivai-navigation__menu > .current-menu-ancestor > a::after {
	position: absolute;
	right: 0;
	bottom: 28px;
	left: 0;
	height: 1px;
	background: #7c5b18;
	content: "";
}

/* Dropdown */

.luxivai-navigation__menu .sub-menu {
	position: absolute;
	top: calc(100% - 18px);
	left: -20px;
	z-index: 10;
	min-width: 220px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background: var(--wp--preset--color--white, #ffffff);
	border: 1px solid var(--wp--preset--color--border-grey, #dfdfdf);
	box-shadow: 0 12px 30px rgb(15 14 14 / 8%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity 180ms ease,
		transform 180ms ease,
		visibility 180ms ease;
}

.luxivai-navigation__menu li:hover > .sub-menu,
.luxivai-navigation__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.luxivai-navigation__menu .sub-menu a {
	display: block;
	padding: 11px 20px;
	color: var(--wp--preset--color--charcoal, #3f3f3f);
	font-size: 14px;
	text-decoration: none;
}

.luxivai-navigation__menu .sub-menu a:hover,
.luxivai-navigation__menu .sub-menu a:focus-visible {
	color: var(--wp--preset--color--dusty-rose, #dca8a6);
	background: var(--wp--preset--color--pale-blush, #f3e3e1);
}

/* Actions */

.luxivai-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
}

.luxivai-header__icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 4px;
	color: #776f61;
	background: transparent;
	border: 0;
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	transition:
		color 180ms ease,
		background-color 180ms ease;
}

.luxivai-header__icon-button svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.luxivai-header__icon-button:hover,
.luxivai-header__icon-button:focus-visible {
	color: var(--wp--preset--color--dusty-rose, #dca8a6);
	background: var(--wp--preset--color--pale-blush, #f3e3e1);
}

.luxivai-header__cart-count {
	position: absolute;
	top: -2px;
	right: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	color: var(--wp--preset--color--white, #ffffff);
	background: var(--wp--preset--color--dusty-rose, #dca8a6);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.luxivai-header__wishlist-count {
	position: absolute;
	top: -2px;
	right: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	color: #ffffff;
	background: #24272a;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
.luxivai-header__wishlist-count.is-empty {
	display: none;
}

/* Search panel */

.luxivai-search-panel {
	padding: 24px 0;
	background: var(--wp--preset--color--soft-grey, #f4f4f4);
	border-top: 1px solid var(--wp--preset--color--border-grey, #dfdfdf);
}

.luxivai-search-panel[hidden] {
	display: none;
}

.luxivai-search-panel form {
	display: flex;
	width: min(100%, 760px);
	margin-inline: auto;
}

.luxivai-search-panel input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 12px 18px;
	color: var(--wp--preset--color--black, #0f0e0e);
	background: var(--wp--preset--color--white, #ffffff);
	border: 1px solid var(--wp--preset--color--border-grey, #dfdfdf);
	border-radius: 0;
}

.luxivai-search-panel button {
	min-height: 52px;
	padding: 12px 28px;
	color: var(--wp--preset--color--white, #ffffff);
	background: var(--wp--preset--color--black, #0f0e0e);
	border: 1px solid var(--wp--preset--color--black, #0f0e0e);
	border-radius: 0;
	font-weight: 600;
	cursor: pointer;
}

/* Mobile toggle */

.luxivai-mobile-toggle {
	display: none;
	width: 38px;
	height: 38px;
	padding: 8px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.luxivai-mobile-toggle span {
	display: block;
	width: 22px;
	height: 1px;
	margin: 5px auto;
	background: var(--wp--preset--color--black, #0f0e0e);
}

@media (max-width: 1100px) {
	.luxivai-header__container { gap: 28px; width: min(calc(100% - 40px), 1800px); }
	.luxivai-navigation__menu { gap: 26px; }
	.luxivai-navigation__menu > li > a { font-size: 15px; letter-spacing: 0.08em; }
	.luxivai-header__actions { gap: 14px; }
}

@media (max-width: 860px) {
	.luxivai-header__container { grid-template-columns: 1fr auto; min-height: 66px; }
	.luxivai-header__brand .custom-logo { max-width: 145px; max-height: 42px; }
	.luxivai-navigation { position: absolute; top: 100%; right: 0; left: 0; display: none; padding: 18px 20px 26px; background: var(--wp--preset--color--white, #fff); border-top: 1px solid var(--wp--preset--color--border-grey, #dfdfdf); border-bottom: 1px solid var(--wp--preset--color--border-grey, #dfdfdf); }
	.luxivai-navigation.is-open { display: block; }
	.luxivai-navigation__menu { display: block; }
	.luxivai-navigation__menu > li > a { min-height: auto; padding: 14px 0; border-bottom: 1px solid var(--wp--preset--color--border-grey, #dfdfdf); }
	.luxivai-navigation__menu > .current-menu-item > a::after, .luxivai-navigation__menu > .current-menu-ancestor > a::after { display: none; }
	.luxivai-navigation__menu .sub-menu { position: static; display: block; min-width: 0; padding: 0 0 8px 16px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
	.luxivai-header__actions { gap: 8px; }
	.luxivai-mobile-toggle { display: block; }
}

@media (max-width: 520px) {
	.luxivai-header__container { width: min(calc(100% - 24px), 1800px); }
	.luxivai-header__brand { min-width: 0; }
	.luxivai-header__account { display: none; }
}
