/*
 * Vitos Depot Child — header styles.
 *
 * One shared markup for all three breakpoints (Mobile 390 / Tablet 768 /
 * Desktop 1440, matching the approved Figma frames) — this file only
 * toggles visibility/order/sizing per breakpoint, never duplicates DOM.
 *
 * Colors/fonts go through CSS custom properties that resolve to the
 * live Kadence theme's own tokens first (brand red, heading font),
 * with the Figma-approved value only as fallback — see the
 * vitos-depot-toolkit plugin's hero CSS for the same pattern used
 * elsewhere on this site.
 */

.vd-header {
	--vd-red: var( --global-palette1, #dd0002 );
	--vd-dark: var( --global-palette3, #1d2327 );
	--vd-heading-font: var( --global-heading-font-family, inherit );
	--vd-muted: #a8b0b8;
	--vd-border: #e5e8eb;

	background: #fff;
	position: relative;
}

.vd-header *,
.vd-header *::before,
.vd-header *::after {
	box-sizing: border-box;
}

.vd-header svg {
	width: 1em;
	height: 1em;
	display: block;
	flex-shrink: 0;
}

/*
 * :where() keeps this reset at zero specificity on purpose: a plain
 * ".vd-header button" selector is a class + a type selector, which
 * would actually out-rank single-class rules like ".vd-categories-btn"
 * further down this file and silently override their padding. Wrapping
 * it in :where() means the more specific component rules always win,
 * regardless of source order.
 */
:where( .vd-header button ) {
	padding: 0;
	margin: 0;
	line-height: normal;
	font: inherit;
}

/*
 * Shared "container" used inside the topbar and main row: the dark/white
 * bars themselves stay full width (edge to edge), but their content is
 * capped at the theme's own content width and centered — same value
 * Kadence uses everywhere else (--global-content-width), so the header
 * lines up with the rest of the page instead of stretching to the
 * viewport edges on wide screens.
 */
.vd-container {
	width: 100%;
	max-width: var( --global-content-width, 1280px );
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

/* ---------- TopBar ---------- */

.vd-topbar {
	background: var( --vd-dark );
	color: #fff;
	padding: 7px 0;
	font-size: 10.5px;
}

.vd-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* gap is a minimum floor between blocks on narrow viewports; the
	   space-between distribution is what actually pushes the outer
	   blocks flush to the edges of .vd-container once any block stops
	   growing to fill the row (see .vd-slogan below — it fills the row
	   on mobile/tablet via flex-grow, so this has nothing to redistribute
	   there, but on desktop the slogan no longer grows and this rule is
	   what fans the three blocks out edge-to-edge with even gaps
	   instead of leaving them bunched on the left). */
	gap: 12px;
}

.vd-topbar-toggle {
	order: 2;
	background: none;
	border: 0;
	color: #fff;
	width: 15px;
	height: 15px;
	padding: 0;
	cursor: pointer;
	flex: 0 0 auto;
}

.vd-topbar-toggle svg {
	width: 100%;
	height: 100%;
}

.vd-slogan {
	order: 1;
	margin: 0;
	flex: 1 1 auto;
	font-weight: 600;
	text-align: left;
}

.vd-utility-nav {
	display: none;
}

.vd-utility-nav-list {
	display: flex;
	gap: 60px;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.vd-utility-nav-list a {
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}

.vd-utility-nav-list li:first-child > a,
.vd-utility-nav-list li.current-menu-item > a {
	color: var( --vd-red );
	font-weight: 700;
}

.vd-socials {
	display: none;
	gap: 16px;
	flex: 0 0 auto;
}

.vd-social-link {
	color: #fff;
	width: 16px;
	height: 16px;
}

/* Same fix as .vd-icon-link above: fill the sized box instead of the
   inherited-font-size-relative 1em default. */
.vd-social-link svg {
	width: 100%;
	height: 100%;
}

.vd-social-link:hover {
	opacity: 0.8;
}

/* ---------- Main row ---------- */

.vd-main {
	padding: 10px 0;
}

.vd-main-inner {
	display: flex;
	flex-wrap: wrap;
	/* stretch (not center): makes every direct child (logo, categories
	   button, search, header icons) match the row's tallest item —
	   specifically what makes the search bar the same height as the
	   Categories button without hardcoding a pixel value that would
	   drift out of sync if either one's padding/font ever changes.
	   Each child re-centers its own content via its own
	   align-items:center, so nothing shifts visually except the outer
	   box height. */
	align-items: stretch;
	justify-content: space-between;
	gap: 12px;
}

.vd-categories-btn {
	order: 1;
	background: var( --vd-red );
	color: #fff;
	border: 0;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	flex: 0 0 auto;
}

.vd-categories-btn svg {
	width: 16px;
	height: 16px;
}

.vd-categories-btn-text {
	display: none;
}

.vd-categories-btn-chevron {
	display: none;
}

.vd-logo {
	order: 2;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* the_custom_logo() prints its own <a class="custom-logo-link">; style
   it (and our text fallback link) the same way so both lay out the
   same regardless of which one is present. */
.vd-logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.vd-logo img {
	display: block;
	height: 42px;
	width: auto;
}

.vd-logo-text {
	font-family: var( --vd-heading-font );
	font-weight: 700;
	font-size: 18px;
	color: var( --vd-dark );
}

.vd-header-icons {
	order: 3;
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.vd-icon-link {
	color: #222;
	width: 22px;
	height: 22px;
	position: relative;
	display: block;
	text-decoration: none;
}

/*
 * The shared ".vd-header svg { width:1em; height:1em }" reset (top of
 * this file) sizes icons relative to the current font-size — inside
 * the header icons row that's the inherited body font-size (~15-16px),
 * not the 22-24px box .vd-icon-link/.vd-cart-link are actually sized
 * to. Without this override the account/wishlist/cart glyphs render
 * noticeably smaller than their own link box (a lot of invisible
 * padding around a small icon) instead of filling it like the Figma
 * frames show. This makes the glyph always fill whatever size the box
 * is at each breakpoint, so it scales automatically with it.
 */
.vd-icon-link svg,
.vd-cart-link svg {
	width: 100%;
	height: 100%;
}

.vd-icon-link--wishlist {
	display: none;
}

.vd-cart-link {
	width: 22px;
	height: 22px;
}

/*
 * Styled via the plain Kadence-fragment classes (.header-cart-total /
 * .header-cart-is-empty-*), NOT a custom class — see the comment in
 * header-markup.php. WooCommerce's add-to-cart AJAX fragment refresh
 * replaces this exact element with Kadence's own re-rendered markup,
 * which only ever carries these two classes, so any styling that
 * needs to survive a cart update has to hang off them directly.
 */
.vd-cart-link .header-cart-total {
	position: absolute;
	top: -6px;
	right: -9px;
	background: var( --vd-red );
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	min-width: 15px;
	height: 15px;
	line-height: 15px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	text-decoration: none;
}

.vd-cart-link .header-cart-is-empty-true {
	display: none;
}

/*
 * Mobile (Figma "HeaderRow2"): a single grey pill with the search icon
 * inline before the placeholder text, no separate button chrome — the
 * submit button is still a real, clickable <button> for accessibility
 * and keyboard/enter support, just styled to blend into the pill
 * instead of the red square used at tablet/desktop. Tablet/desktop
 * (below) restore the red square SearchBtn from the Figma frames.
 */
.vd-search {
	order: 4;
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	background: #f0f1f2;
	border: 1px solid var( --vd-border );
	border-radius: 9px;
	box-shadow: none;
	overflow: hidden;
	padding: 11px 14px;
	gap: 8px;
}

/*
 * Chained ".vd-search .vd-search-input" (not just ".vd-search-input")
 * on purpose: Kadence's own global reset targets plain inputs via
 * "input[type=search]" (an element + attribute selector), which is
 * MORE specific than a single class and was silently overriding this
 * rule's border/border-radius regardless of source order. Chaining
 * two classes together outranks it.
 */
.vd-search .vd-search-input {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	font-size: 13px;
	color: #222;
}

.vd-search .vd-search-input:focus {
	outline: none;
}

.vd-search-btn {
	order: -1;
	border: 0;
	background: transparent;
	color: #6b737a;
	width: auto;
	height: auto;
	flex: 0 0 auto;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	padding: 0;
}

.vd-search-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ---------- Dropdown panels (nav + categories) ---------- */

.vd-nav-panel,
.vd-categories-panel {
	/* Centered and capped at the same content width as the rest of the
	   header, instead of hugging the raw viewport edges — matters on
	   wide screens where .vd-header no longer stretches full-bleed. */
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	width: calc( 100% - 32px );
	max-width: var( --global-content-width, 1280px );
	background: #fff;
	border: 1px solid var( --vd-border );
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.14 );
	z-index: 60;
	padding: 8px;
	margin-top: 6px;
	box-sizing: border-box;
}

.vd-nav-panel[hidden],
.vd-categories-panel[hidden] {
	display: none;
}

.vd-nav-panel-list,
.vd-categories-panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vd-nav-panel-list li,
.vd-categories-panel-list li {
	border-bottom: 1px solid var( --vd-border );
}

.vd-nav-panel-list li:last-child,
.vd-categories-panel-list li:last-child {
	border-bottom: none;
}

.vd-nav-panel-list a,
.vd-categories-panel-list a {
	display: block;
	padding: 10px 8px;
	color: #222;
	text-decoration: none;
	font-size: 14px;
}

.vd-nav-panel-list a:hover,
.vd-categories-panel-list a:hover {
	color: var( --vd-red );
}

.vd-categories-panel-all a {
	font-weight: 700;
}

/* ---------- Tablet (>=768px) ---------- */

@media ( min-width: 768px ) {
	.vd-container {
		padding: 0 32px;
	}

	.vd-topbar {
		padding: 9px 0;
		font-size: 12px;
	}

	.vd-topbar-toggle {
		order: 0;
		width: 15px;
		height: 15px;
	}

	.vd-slogan {
		order: 1;
		text-align: center;
		font-weight: 400;
	}

	.vd-socials {
		display: flex;
		order: 2;
	}

	.vd-social-link {
		width: 15px;
		height: 15px;
	}

	.vd-main {
		padding: 12px 0;
	}

	.vd-main-inner {
		flex-wrap: nowrap;
		gap: 20px;
	}

	.vd-categories-btn {
		order: 2;
		padding: 11px 18px;
		border-radius: 10px;
	}

	.vd-categories-btn svg {
		width: 15px;
		height: 15px;
	}

	.vd-categories-btn-text {
		display: inline;
	}

	.vd-logo {
		order: 1;
	}

	.vd-logo img {
		height: 46px;
	}

	.vd-search {
		/* The form itself is now just an invisible flex wrapper — no
		   border, no radius, no fill of its own — so it can never show
		   a mismatched square corner behind the input's rounded one.
		   All the visible styling (fill, border, corners) moves onto
		   .vd-search-input and .vd-search-btn instead, each owning only
		   the corners that face outward, so they read as one continuous
		   pill with a clean seam instead of a double border. */
		order: 3;
		flex: 1 1 auto;
		align-items: stretch;
		background: transparent;
		border: 0;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		gap: 0;
	}

	.vd-search .vd-search-input {
		padding: 11px 14px;
		background: #f0f1f2;
		border: 1px solid var( --global-gray-400, #c7d1e0 );
		border-right: 0;
		border-radius: 11px 0 0 11px;
		box-shadow: none;
	}

	.vd-search-btn {
		order: 4;
		background: var( --vd-red );
		color: #fff;
		width: auto;
		align-self: stretch;
		padding: 0 16px;
		box-shadow: none;
		border-radius: 0 11px 11px 0;
	}

	.vd-header-icons {
		order: 4;
		gap: 16px;
	}

	.vd-icon-link,
	.vd-cart-link {
		width: 22px;
		height: 22px;
	}

	.vd-icon-link--wishlist {
		display: block;
	}
}

/* ---------- Desktop (>=1024px) ---------- */

@media ( min-width: 1024px ) {
	.vd-container {
		/* Kadence's own .site-container uses max-width + margin:auto
		   PLUS this same small edge padding at every width, including
		   desktop (see --global-content-edge-padding, admin-configurable
		   under Customize → Layout, default 1.5rem/24px) — the previous
		   flat 80px here was not a real site token, just the raw Figma
		   frame's absolute inset, and it shrank the header's content
		   area well below the width the rest of the page's content
		   (product grids, hero, etc.) actually uses at this breakpoint.
		   Matching the real token instead keeps the header pixel-aligned
		   with everything else, not narrower and not full-bleed. */
		padding: 0 var( --global-content-edge-padding, 24px );
	}

	.vd-topbar {
		padding: 10px 0;
		font-size: 13px;
	}

	.vd-topbar-toggle {
		display: none;
	}

	.vd-slogan {
		order: 0;
		flex: 0 1 auto;
		text-align: left;
	}

	.vd-utility-nav {
		display: block;
		order: 1;
	}

	.vd-socials {
		order: 2;
	}

	.vd-social-link {
		width: 16px;
		height: 16px;
	}

	.vd-nav-panel {
		display: none !important;
	}

	.vd-main {
		padding: 16px 0;
	}

	.vd-main-inner {
		gap: 40px;
	}

	.vd-logo img {
		height: 56px;
	}

	.vd-categories-btn {
		gap: 10px;
		padding: 13px 24px;
		border-radius: 11px;
		font-size: 14px;
	}

	.vd-categories-btn svg {
		width: 16px;
		height: 16px;
	}

	.vd-categories-btn-chevron {
		display: inline-flex;
		width: 11px;
		height: 11px;
	}

	.vd-search .vd-search-input {
		padding: 14px 18px;
		font-size: 14px;
	}

	.vd-search-btn {
		padding: 0 24px;
	}

	.vd-search-btn svg {
		width: 18px;
		height: 18px;
	}

	.vd-header-icons {
		gap: 22px;
	}

	.vd-icon-link,
	.vd-cart-link {
		width: 24px;
		height: 24px;
	}

	.vd-cart-link .header-cart-total {
		width: 17px;
		height: 17px;
		min-width: 17px;
		font-size: 10.5px;
		top: -7px;
		right: -10px;
	}
}