/* ==========================================================================
   Header — consistent nav text, dropdown sub-menu, search panel
   Loads after refine.css.
   ========================================================================== */

/* 1. One text style for every header item: menu links + Sign up */
.vd-header .vd-nav__menu a,
.vd-header .vd-header__signup {
	font-family: var(--vd-font-sans);
	font-size: var(--vd-fs-sm);
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	line-height: 1.2;
}
.vd-header .vd-nav__menu { gap: 28px; }
@media (min-width: 1025px) { .vd-header .vd-nav { gap: 28px; } } /* space between the last menu item and Sign up */
.vd-header .vd-nav__menu a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; color: inherit; text-decoration: none; }

/* 2. Dropdown (one level) */
.vd-header .vd-nav__menu > li { position: relative; }
.vd-header .vd-nav__menu .menu-item-has-children > a::after {
	content: ""; width: 7px; height: 7px; margin-top: -4px;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg); transition: transform var(--vd-dur) var(--vd-ease);
}
.vd-header .vd-nav__menu .sub-menu {
	position: absolute; top: 100%; left: -18px; z-index: 60;
	min-width: 220px; margin: 0; padding: 10px 0; list-style: none;
	background: var(--vd-paper); color: var(--vd-ink);
	border: 1px solid var(--vd-border-soft); border-radius: var(--vd-radius-md);
	box-shadow: var(--vd-shadow-card);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.vd-header .vd-nav__menu .sub-menu a { display: block; padding: 10px 18px; white-space: nowrap; }
.vd-header .vd-nav__menu .sub-menu a:hover { background: var(--vd-surface-2); opacity: 1; }
@media (min-width: 1025px) {
	.vd-header .vd-nav__menu > li:hover > .sub-menu,
	.vd-header .vd-nav__menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
	.vd-header .vd-nav__menu > li:hover > a::after { transform: rotate(-135deg); margin-top: 4px; }
}

/* 3. Search toggle + cart, same size and spacing */
.vd-search-toggle { background: transparent; border: 0; padding: 0; color: inherit; display: inline-flex; cursor: pointer; }
.vd-search-toggle svg { width: 24px; height: 24px; display: block; }
.vd-search-toggle:hover { opacity: .7; }

.vd-search-panel {
	position: absolute; top: calc(100% + 10px); right: var(--vd-gutter); z-index: 60;
	width: min(520px, calc(100vw - 32px));
}
.vd-search-panel[hidden] { display: none; }
.vd-search-form {
	display: flex; align-items: center; gap: 12px; margin: 0;
	background: var(--vd-white); color: var(--vd-ink);
	border-radius: var(--vd-radius-pill);
	padding: 6px 6px 6px 20px;
	box-shadow: 0 12px 32px rgba(30, 8, 20, 0.14);
	transition: box-shadow var(--vd-dur) var(--vd-ease);
}
.vd-search-form:focus-within { box-shadow: 0 12px 32px rgba(30, 8, 20, 0.14), 0 0 0 2px var(--vd-accent); }
.vd-search-form__ic { flex: none; color: var(--vd-muted); }
.vd-search-form input[type="search"] {
	flex: 1; min-width: 0; height: 44px; padding: 0;
	border: 0; outline: 0; background: transparent; box-shadow: none;
	font-family: var(--vd-font-sans); font-size: 1.125rem; color: var(--vd-ink);
	-webkit-appearance: none; appearance: none;
}
.vd-search-form input[type="search"]::placeholder { color: var(--vd-muted); }
.vd-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.vd-search-form__go {
	flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	background: var(--vd-accent); color: var(--vd-ink);
	transition: transform var(--vd-dur) var(--vd-ease);
}
.vd-search-form__go:hover { transform: translateX(2px); }

/* 4. Mobile menu: sub-items shown indented under their parent */
@media (max-width: 1024px) {
	.vd-header .vd-nav__menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		min-width: 0; padding: 4px 0 0 16px; border: 0; box-shadow: none; background: transparent;
	}
	.vd-header .vd-nav__menu .sub-menu a { padding: 6px 0; }
	.vd-header .vd-nav__menu .menu-item-has-children > a::after { display: none; }
	.vd-search-panel { right: 16px; }
}