/* =========================================================
   HEADER CSS
   assets/css/navigation/header.css
   ========================================================= */

.vb-header-wrap,
.vb-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--vb-surface);
	border-bottom: 1px solid var(--vb-border);
	box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.vb-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		rgba(148, 163, 184, .28),
		transparent
	);
	pointer-events: none;
}

.vb-header-main {
	position: relative;
	z-index: 2;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, .96) 0%,
		rgba(255, 255, 255, .92) 100%
	);
}

.vb-header-main-inner {
	display: grid;
	grid-template-columns: 170px minmax(360px, 1fr) auto;
	align-items: center;
	gap: 28px;
	min-height: 68px;
}

.vb-logo {
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 170px;
	max-width: 170px;
	height: 46px;
	max-height: 46px;
	line-height: 0;
}

.vb-logo-img {
	display: block !important;
	width: 170px !important;
	max-width: 170px !important;
	height: 46px !important;
	max-height: 46px !important;
	object-fit: contain;
	object-position: left center;
}

.vb-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--vb-space-sm);
	white-space: nowrap;
	position: relative;
}

.vb-header-actions::before {
	content: "";
	position: absolute;
	left: -14px;
	top: 50%;
	width: 1px;
	height: 22px;
	background: var(--vb-border-soft);
	transform: translateY(-50%);
}

.vb-header-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 10px;
	color: var(--vb-action-active);
	font-size: 13px;
	font-weight: 900;
	border-radius: var(--vb-radius-sm);
	transition:
		background var(--vb-transition),
		color var(--vb-transition);
}

.vb-header-help:hover {
	background: var(--vb-action-soft);
	color: var(--vb-action-active);
}

.vb-header-tool {
	gap: 7px;
}

.vb-tool-icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: currentColor;
}

.vb-tool-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.vb-tool-text {
	line-height: 1;
}

.vb-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	background: linear-gradient(
		135deg,
		var(--vb-action) 0%,
		var(--vb-action-active) 100%
	);
	color: var(--vb-text-inverse);
	border: 2px solid var(--vb-surface);
	border-radius: var(--vb-radius-pill);
	box-shadow: 0 6px 14px rgba(64, 148, 221, .24);
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
}

.vb-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 13px;
	background: var(--vb-surface);
	color: var(--vb-action-active);
	border: 1px solid var(--vb-border-strong);
	border-radius: var(--vb-radius-sm);
	box-shadow: var(--vb-shadow-soft);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	transition:
		background var(--vb-transition),
		border-color var(--vb-transition),
		color var(--vb-transition),
		box-shadow var(--vb-transition);
}

.vb-action-btn:hover,
.vb-header-help:hover {
	background: var(--vb-action-soft);
	color: var(--vb-action-active);
	border-color: var(--vb-action-border);
	box-shadow: var(--vb-shadow-soft);
}

.vb-cart-btn {
	background: var(--vb-action-soft);
	color: var(--vb-action-active) !important;
	border-color: var(--vb-info-border);
	box-shadow: none;
	position: relative;
	padding-right: 34px;
}

.vb-cart-btn .vb-tool-icon {
	width: 17px;
	height: 17px;
}

.vb-cart-btn .vb-tool-text {
	display: inline;
}

.vb-cart-btn:hover {
	background: var(--vb-info-soft);
	color: var(--vb-action-active) !important;
	border-color: var(--vb-action-border);
	box-shadow: none;
}

.vb-cart-btn::before {
	content: none !important;
}

/* Header Search */

.vb-header-search {
	position: relative;
	overflow: visible !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	align-items: center !important;
	width: 100%;
	max-width: 760px;
	height: 48px !important;
	margin: 0 auto;
	padding: 0 !important;
	background: linear-gradient(
		180deg,
		var(--vb-surface) 0%,
		var(--vb-surface-soft) 100%
	);
	border: 1px solid var(--vb-border-strong);
	border-radius: var(--vb-radius-sm);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		0 2px 8px rgba(15, 23, 42, .03);
	transition:
		border-color var(--vb-transition),
		box-shadow var(--vb-transition),
		background var(--vb-transition);
}

.vb-header-search:focus-within {
	background: var(--vb-surface);
	border-color: var(--vb-action);
	box-shadow:
		0 0 0 4px rgba(64, 148, 221, .10),
		0 10px 24px rgba(64, 148, 221, .08);
}

.vb-header-search .screen-reader-text,
.vb-header-search input[type="hidden"] {
	display: none !important;
}

.vb-search-suggestions {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 10001;
	display: block;
	padding: 10px;
	background: var(--vb-surface);
	border: 1px solid var(--vb-border-soft);
	border-radius: var(--vb-radius-md);
	box-shadow:
		0 20px 40px rgba(15, 23, 42, .08),
		0 4px 10px rgba(15, 23, 42, .04);
}

.vb-search-suggestions[hidden] {
	display: none !important;
}

.vb-header-search input[type="search"] {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	height: 48px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 18px !important;
	background: transparent !important;
	color: var(--vb-text);
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	font-size: 15px;
	font-weight: 700;
}

.vb-header-search input[type="search"]::placeholder {
	color: var(--vb-text-muted);
	font-weight: 700;
}

.vb-header-search input[type="search"]:focus-visible {
	outline: none;
}

.vb-header-search button[type="submit"] {
	display: inline-flex !important;
	grid-column: 2 !important;
	grid-row: 1 !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: 38px !important;
	min-height: 0 !important;
	margin: 0 5px 0 0 !important;
	padding: 0 18px !important;
	background: var(--vb-action) !important;
	color: var(--vb-action-text) !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-transform: none !important;
	white-space: nowrap !important;
	cursor: pointer;
	transition:
		background var(--vb-transition),
		color var(--vb-transition);
}

.vb-header-search button[type="submit"]:hover {
	background: var(--vb-action-hover) !important;
	color: var(--vb-action-text) !important;
}

/* Header link isolation from Elementor / theme globals */

.vb-header a,
.vb-header a:hover,
.vb-header a:focus,
.vb-header a:active,
.vb-header a:visited {
	text-decoration: none !important;
}

.vb-header button,
.vb-header input,
.vb-header select {
	font-family: var(--vb-font-base);
}

.vb-header .vb-action-btn,
.vb-header .vb-cart-btn,
.vb-header .vb-header-help {
	text-decoration: none !important;
}

/* =========================================================
   HEADER STICKY FIX
   ========================================================= */

html,
body,
#page,
.site,
.vb-page,
.vb-layout {
	overflow: visible !important;
}

body.single-product .vb-header-wrap,
body.single-product .vb-header {
	position: sticky !important;
	top: 32px !important;
	z-index: 50000 !important;
	background: #fff !important;
}

body:not(.admin-bar).single-product .vb-header-wrap,
body:not(.admin-bar).single-product .vb-header {
	top: 0 !important;
}

@media (max-width: 782px) {
	body.admin-bar.single-product .vb-header-wrap,
	body.admin-bar.single-product .vb-header {
		top: 46px !important;
	}
}