/* ==========================================================================
   Global header (Flatsome header builder markup)
   Layout is set in inc/ce-flatsome-settings.php; this file styles it.
   ========================================================================== */

.header-wrapper,
.header-main,
.header-bg-color {
	background-color: var(--ce-paper);
}

.header-wrapper {
	border-bottom: 1px solid var(--ce-border);
}

.header-wrapper.stuck {
	box-shadow: 0 6px 24px rgba(41, 39, 34, .06);
}

.header-main .header-inner {
	gap: var(--ce-space-6);
	max-width: var(--ce-container);
	padding-inline: var(--ce-gutter);
}

/* Keep each header group on one line */
.header-main .header-nav {
	flex-wrap: nowrap;
}

.header-main .header-nav > li {
	flex-shrink: 0;
}

/* Logo */
#logo img {
	height: auto;
	width: auto;
}

/* Primary navigation */
.header-nav-main > li > a,
.header-nav-main .nav-top-link {
	color: var(--ce-charcoal);
	font-family: var(--ce-font-sans);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	min-height: 44px;
	padding-inline: var(--ce-space-3);
	position: relative;
	text-transform: none;
}

.header-nav-main > li > a::after {
	background: var(--ce-terracotta);
	bottom: 10px;
	content: "";
	height: 2px;
	left: var(--ce-space-3);
	position: absolute;
	right: var(--ce-space-3);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ce-dur-menu) var(--ce-ease);
}

.header-nav-main > li > a:hover,
.header-nav-main > li.active > a,
.header-nav-main > li.current-menu-item > a {
	color: var(--ce-forest);
}

.header-nav-main > li > a:hover::after,
.header-nav-main > li.active > a::after,
.header-nav-main > li.current-menu-item > a::after,
.header-nav-main > li > a:focus-visible::after {
	transform: scaleX(1);
}

/* Dropdowns */
.nav-dropdown {
	background-color: var(--ce-paper);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-md);
	box-shadow: var(--ce-shadow);
	padding: var(--ce-space-3) 0;
}

.nav-dropdown > li > a,
.nav-dropdown li a {
	color: var(--ce-charcoal);
	font-size: .9375rem;
	padding: var(--ce-space-2) var(--ce-space-6);
}

.nav-dropdown li a:hover,
.nav-dropdown li a:focus-visible {
	background-color: var(--ce-ivory);
	color: var(--ce-forest);
}

/* Search: full field ≥1200px; icon + dropdown below that, where the field
   would collide with the primary nav. Measured 850–1440px, no overlap.
   (Flatsome puts the desktop column in .flex-right.hide-for-medium.) */
.header-main .header-search-form {
	min-width: 0;
	width: clamp(180px, 22vw - 60px, 280px);
}

.header-main .flex-right.hide-for-medium .header-search {
	display: none;
}

@media (max-width: 1199px) {
	.header-main .flex-right.hide-for-medium .header-search-form {
		display: none;
	}

	.header-main .flex-right.hide-for-medium .header-search {
		display: block;
	}

	.header-nav-main > li > a,
	.header-nav-main .nav-top-link {
		padding-inline: var(--ce-space-2);
	}
}

@media (max-width: 1023px) {
	.header-main .header-inner {
		gap: var(--ce-space-3);
	}

	.header-main #logo {
		width: 132px;
	}

	.header-nav-main > li > a,
	.header-nav-main .nav-top-link {
		font-size: .875rem;
		padding-inline: 6px;
	}
}

/* 850–899px: the wishlist stays reachable from product cards and account. */
@media (min-width: 850px) and (max-width: 899px) {
	.header-main #logo {
		width: 124px;
	}

	.header-main .flex-right.hide-for-medium .header-wishlist-icon {
		display: none;
	}
}

.header-search-dropdown .nav-dropdown {
	min-width: 320px;
	padding: var(--ce-space-4);
}

.header-search-form .searchform input[type="search"] {
	background-color: var(--ce-ivory);
	border-color: var(--ce-border);
	border-radius: 999px 0 0 999px;
	min-height: 44px;
	padding-inline: var(--ce-space-4);
}

.header-search-form .searchform .button.icon {
	background-color: var(--ce-forest);
	border-radius: 0 999px 999px 0;
	color: var(--ce-on-dark);
	min-height: 44px;
	min-width: 44px;
	padding: 0;
}

.header-search-form .searchform input[type="search"]:focus {
	background-color: var(--ce-paper);
	border-color: var(--ce-forest);
}

/* Live search results */
.live-search-results {
	background-color: var(--ce-paper);
	border-radius: 0 0 var(--ce-radius-md) var(--ce-radius-md);
	box-shadow: var(--ce-shadow);
}

/* Icon buttons: wishlist, account, cart, search, menu */
.header-main .nav > li.has-icon > a,
.header-main .header-wishlist-icon > a,
.header-main .account-item > a,
.header-main .cart-item > a,
.header-main .header-search > a,
.header-main .nav-icon > a {
	align-items: center;
	color: var(--ce-forest-dark);
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.header-main .nav > li.has-icon > a:hover,
.header-main .cart-item > a:hover {
	color: var(--ce-forest);
}

.header-main i[class^="icon-"],
.header-main i[class*=" icon-"] {
	font-size: 1.25rem;
}

/* Cart / wishlist count bubble */
.header-main [data-icon-label]::after,
.header-main .cart-icon strong::after {
	background-color: var(--ce-forest);
	color: var(--ce-on-dark);
	font-family: var(--ce-font-sans);
	font-weight: 700;
}

.header-main .cart-icon strong {
	border-color: var(--ce-forest-dark);
	color: var(--ce-forest-dark);
}

/* Off-canvas drawers: mobile menu + mini cart */
.off-canvas .mfp-content,
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
	background-color: var(--ce-paper);
}

.off-canvas .nav-sidebar > li > a,
.mobile-sidebar .nav-sidebar > li > a {
	color: var(--ce-charcoal);
	font-family: var(--ce-font-sans);
	font-size: 1rem;
	font-weight: 600;
	min-height: 48px;
	padding-inline: var(--ce-space-6);
	text-transform: none;
}

.mobile-sidebar .nav-sidebar > li {
	border-color: var(--ce-border);
}

.mobile-sidebar .searchform {
	padding: var(--ce-space-4) var(--ce-space-6);
}

.mfp-bg.off-canvas,
.mfp-bg {
	background-color: rgba(29, 53, 43, .45);
}

.mfp-close {
	color: var(--ce-forest-dark);
	min-height: 44px;
	min-width: 44px;
	opacity: 1;
}

/* Mini cart */
.widget_shopping_cart .woocommerce-mini-cart__total {
	border-color: var(--ce-border);
	color: var(--ce-charcoal);
}

.widget_shopping_cart .button {
	width: 100%;
}

/* Mobile header */
/* Flatsome centres the mobile logo between equal-width side columns;
   the right column needs 2 × 44px icons, so the logo must stay ≤ ~140px. */
@media (max-width: 849px) {
	.header-main .header-inner {
		gap: 0;
		padding-inline: var(--ce-space-2);
	}

	.header-main #logo {
		flex: 0 0 auto;
		width: clamp(100px, 32vw, 140px);
	}

	.header-main #logo img {
		max-height: 40px;
		width: 100%;
	}
}