/* =========================================================
   Header — .vbxwoo-site-header
   ========================================================= */

.vbxwoo-site-header {
	z-index: 1030;
}

/* Logo: custom logo image */
.vbxwoo-navbar__brand a.custom-logo-link img.custom-logo,
.vbxwoo-navbar__brand .custom-logo-link img.custom-logo {
	max-height: 48px;
	width: auto;
	display: block;
}

/* Logo: text fallback */
.vbxwoo-navbar__brand--text {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--vbxwoo-dark);
	text-decoration: none;
}

/* Icon buttons (search, account, cart) */
.vbxwoo-btn-icon {
	line-height: 1;
	text-decoration: none;
}

.vbxwoo-btn-icon:focus-visible {
	outline: 2px solid var(--vbxwoo-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.vbxwoo-btn-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
}

/* Cart badge */
.vbxwoo-cart-icon__badge {
	font-size: 0.65rem;
	min-width: 1.1rem;
	line-height: 1.1rem;
}

/* Desktop nav link active state */
.vbxwoo-navbar .nav-link.active {
	color: var(--vbxwoo-primary);
}

/* Dropdown menu refinements */
.vbxwoo-navbar .dropdown-menu {
	border: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	border-radius: 0.5rem;
	padding: 0.375rem;
	min-width: 200px;
}

.vbxwoo-navbar .dropdown-item {
	border-radius: 0.375rem;
	padding: 0.4rem 0.75rem;
	font-size: 0.9375rem;
}

.vbxwoo-navbar .dropdown-item:focus,
.vbxwoo-navbar .dropdown-item:hover {
	background-color: rgba(13, 110, 253, .06);
}

/* Search offcanvas — compact top drawer */
.vbxwoo-search-offcanvas {
	height: auto;
	max-height: 80px;
}

.vbxwoo-search-offcanvas .offcanvas-header {
	align-items: center;
}

.vbxwoo-search-form {
	flex-grow: 1;
	width: 100%;
}

/* =========================================================
   Menu canvas Layout
   ========================================================= */

/* -- Desktop: nested dropdown (3rd-level .dropdown-submenu) -- */
@media (min-width: 992px) {

	.vbxwoo-nav .menu-item-has-children,
	.vbxwoo-navbar .dropdown-submenu {
		position: relative;
	}

	.vbxwoo-nav .dropdown-menu {
		margin-top: 0;
	}

	.vbxwoo-nav .menu-item-has-children:hover>.dropdown-menu,
	.vbxwoo-nav .menu-item-has-children:focus-within>.dropdown-menu,
	.vbxwoo-navbar .dropdown-submenu:hover>.dropdown-menu,
	.vbxwoo-navbar .dropdown-submenu:focus-within>.dropdown-menu {
		display: block;
	}

	/* Position the nested menu to the right of the parent item */
	.vbxwoo-navbar .dropdown-submenu>.dropdown-menu {
		top: 0;
		left: 100%;
		margin-top: -0.375rem;
		margin-left: 0.125rem;
	}

	/* Rotate the default Bootstrap caret to point right */
	.vbxwoo-navbar .dropdown-submenu>.dropdown-toggle::after {
		transform: rotate(-90deg);
		vertical-align: 0.2em;
	}
}


/* -- Mobile nav offcanvas -- */

.vbxwoo-mobile-nav {
	--bs-offcanvas-width: 320px;
	width: var(--bs-offcanvas-width);
	max-width: 85vw;
	box-sizing: border-box;
	background-color: #f8f9fa;
}

.vbxwoo-mobile-nav .offcanvas-header,
.vbxwoo-mobile-nav .offcanvas-body {
	box-sizing: border-box;
}

.vbxwoo-mobile-nav .offcanvas-body {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

.vbxwoo-mobile-nav__list {
	width: 100%;
	min-width: 0;
}

.vbxwoo-commerce-header__brand .vbxwoo-navbar__brand {
	padding: 10px 25px;
}

/* All nav-links in the mobile offcanvas */
.vbxwoo-mobile-nav .nav-link,
.vbxwoo-mobile-nav .dropdown-item {
	padding: 0.625rem 0.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	font-size: 1rem;
	text-transform: inherit;
	white-space: normal;
}

/*
 * Mobile dropdown-menu: static positioning so it expands inline.
 * data-bs-display="static" on the toggle prevents Popper from running,
 * but Bootstrap's base CSS still sets position: absolute — override it.
 */
.vbxwoo-mobile-nav .dropdown-menu {
	position: static !important;
	transform: none !important;
	float: none;
	box-shadow: none;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	border-radius: 0;
	padding: 0.125rem 0 0.25rem 0.5rem;
	margin: 0;
	min-width: 0;
	width: 100%;
	display: none;
	background: none;
}

.vbxwoo-mobile-nav .dropdown-menu.show {
	display: block;
}

/* Nested submenu inside mobile: extra indent */
.vbxwoo-mobile-nav .dropdown-submenu>.dropdown-menu {
	padding-left: 0.5rem;
}

.vbxwoo-mobile-nav__list .menu-item-has-children {
	position: relative;
	padding-right: 2.5rem;
	font-weight: 600;
}

.vbxwoo-submenu-toggle {
	position: absolute;
	top: 0.35rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: #00000014;
	padding: 0;
	color: var(--vbxwoo-dark, #212529);
	border: 1px solid var(--vbxwoo-border);
	border-radius: 5px;
}

.vbxwoo-submenu-toggle::before {
	content: "\25BE";
	font-size: 1.25rem;
	line-height: 1;
	display: inline-block;
}

.vbxwoo-submenu-toggle[aria-expanded="true"]::before {
	content: "\25B4";
}

/* Hide Bootstrap default caret inside offcanvas */
.offcanvas-body .dropdown-toggle::after {
	display: none;
}


/* -- Mobile header responsive -- */
@media (max-width: 991.98px) {
	.vbxwoo-header .navbar {
		min-height: 64px;
	}

	.vbxwoo-header .custom-logo {
		max-height: 44px;
	}

	.vbxwoo-header .vbxwoo-search-form {
		width: 100%;
	}

	.vbxwoo-header .vbxwoo-search-form .form-control {
		min-width: 0;
	}

	.vbxwoo-commerce-header__brand .vbxwoo-navbar__brand {
		padding: 10px 15px;
	}
}


/* Small mobile */
@media (max-width: 575.98px) {
	.vbxwoo-mobile-nav {
		--bs-offcanvas-width: 300px;
		max-width: 88vw;
	}

	.vbxwoo-commerce-header__brand .vbxwoo-navbar__brand {
		padding: 10px 15px;
	}
}


/* Reduce motion: disable offcanvas slide animation */
@media (prefers-reduced-motion: reduce) {
	.offcanvas {
		transition: none !important;
	}
}

/* =========================================================
   End menu canvas Layout
   ========================================================= */

/* =========================================================
   Commerce Header Layout
   ========================================================= */
.vbxwoo-commerce-header {
	background: var(--vbxwoo-primary);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.vbxwoo-commerce-header__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.5fr) minmax(min(100%, 22rem), 2fr) minmax(0, 1.5fr);
	align-items: center;
	gap: clamp(0.75rem, 2vw, 2rem);
	min-height: 88px;
}

.vbxwoo-commerce-header__brand {
	justify-self: start;
	min-width: 150px;
}

.vbxwoo-menu-toggle .dashicons {
	font-size: clamp(1.5rem, 2vw, 1.75rem);
	width: 1em;
	height: 1em;
	color: var(--vbxwoo-light);
}

.vbxwoo-commerce-header__search {
	justify-self: center;
	width: 100%;
	min-width: 150px;
}

.vbxwoo-header-search-form {
	display: flex;
	align-items: center;
	width: 100%;
	height: clamp(2.625rem, 4vw, 2.75rem);
	border: 2px solid var(--vbxwoo-border);
	border-radius: 999px;
	background: var(--vbxwoo-light);
	overflow: hidden;
}

.vbxwoo-header-search-form input {
	flex: 1 1 auto;
	min-width: 150px;
	border: 0;
	padding: 0.5rem 0.875rem;
	background: transparent;
}

.vbxwoo-header-search-form button {
	flex: 0 0 auto;
	width: clamp(2.875rem, 4vw, 3rem);
	height: 100%;
	border: 0;
	background: var(--vbxwoo-btn);
	color: var(--vbxwoo-light);
}

.vbxwoo-commerce-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(0.375rem, 1vw, 0.75rem);
	min-width: 0;
}

.vbxwoo-header-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: #111;
	padding: 0.25rem;
	border-radius: 0.625rem;
	white-space: nowrap;
}

.vbxwoo-header-action__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.25rem, 3vw, 2.5rem);
	height: clamp(2.25rem, 3vw, 2.5rem);
	background: var(--vbxwoo-light);
	border-radius: 50%;
	color: var(--vbxwoo-btn);
	flex-shrink: 0;
}

.vbxwoo-header-action__text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	color: var(--vbxwoo-light);
}

.vbxwoo-header-action__text small {
	font-size: clamp(0.68rem, 0.8vw, 0.72rem);
}

.vbxwoo-header-action__text strong {
	font-size: clamp(0.78rem, 0.95vw, 0.86rem);
	font-weight: 500;
}

.vbxwoo-cart-count {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.3125rem;
	border-radius: 999px;
	background: #ff0000;
	color: var(--vbxwoo-light);
	font-size: 0.65rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Wide desktop */
@media (min-width: 1200px) {
	.vbxwoo-commerce-header__inner {
		grid-template-columns: minmax(0, 0.5fr) minmax(min(100%, 22rem), 2fr) minmax(0, 1.5fr);
	}
}

/* Tablet and small desktop */
@media (min-width: 768px) and (max-width: 991.98px) {
	.vbxwoo-commerce-header__inner {
		grid-template-columns: minmax(0, 1fr) minmax(min(100%, 16rem), 1.8fr) auto;
		min-height: 76px;
	}

	.vbxwoo-header-hotline,
	.vbxwoo-header-deal {
		display: none;
	}

	.vbxwoo-header-cart .vbxwoo-header-action__text {
		display: none;
	}
}

/* Mobile */
@media (max-width: 767.98px) {
	.vbxwoo-commerce-header__inner {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		min-height: 64px;
		padding: 0.5rem 0;
		gap: clamp(0.375rem, 2vw, 0.625rem);
	}

	.vbxwoo-commerce-header__brand {
		justify-self: start;
		min-width: 0;
		flex-shrink: 0;
	}

	.vbxwoo-navbar__brand {
		min-width: 0;
	}

	.vbxwoo-navbar__brand .custom-logo {
		max-width: clamp(5rem, 20vw, 8rem);
		max-height: 2.25rem;
		height: auto;
	}

	.vbxwoo-commerce-header__search {
		justify-self: stretch;
		width: 100%;
		min-width: 0;
	}

	.vbxwoo-header-search-form {
		height: 2.375rem;
		min-width: 0;
	}

	.vbxwoo-header-search-form input {
		min-width: 0;
		padding-inline: 0.625rem;
		font-size: 0.875rem;
	}

	.vbxwoo-header-search-form button {
		width: 2.5rem;
	}

	.vbxwoo-commerce-header__actions {
		justify-self: end;
		display: flex;
		align-items: center;
		gap: 0.25rem;
		min-width: 0;
		flex-shrink: 0;
	}

	.vbxwoo-header-hotline,
	.vbxwoo-header-deal {
		display: none;
	}

	.vbxwoo-header-cart .vbxwoo-header-action__text {
		display: none;
	}

	.vbxwoo-header-action {
		padding: 0;
	}

	.vbxwoo-header-action__icon {
		width: 2.25rem;
		height: 2.25rem;
	}
}

/* Small mobile */
@media (max-width: 420px) {
	.vbxwoo-commerce-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 0.375rem;
	}

	.vbxwoo-navbar__brand .custom-logo {
		max-width: clamp(4.5rem, 18vw, 6.5rem);
		max-height: 2rem;
	}

	.vbxwoo-menu-toggle .dashicons {
		font-size: 1.35rem;
	}

	.vbxwoo-header-search-form {
		height: 2.25rem;
	}

	.vbxwoo-header-search-form input {
		padding-inline: 0.5rem;
		font-size: 0.82rem;
	}

	.vbxwoo-header-search-form button {
		width: 2.25rem;
	}

	.vbxwoo-header-action__icon {
		width: 2.125rem;
		height: 2.125rem;
	}
}

/* =========================================================
   End Commerce Header Layout
   ========================================================= */