/* Nakama dark full-width desktop header (R2 redesign).
   Header builder theme_mods handle bg/color/width; this file covers the
   details Flatsome mods don't reach: hover underline, dropdown light theme,
   icon colors, sticky safeguard, topbar->header seam. */

#header .header-main,
#header.stuck .header-main {
	background-color: #181c2e;
	border: none;
	box-shadow: none;
}

#logo {
	width: 150px;
}

#header .header-nav-main > li > a {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#header .header-nav-main > li > a:hover,
#header .header-nav-main > li.current > a {
	color: #fff;
	box-shadow: none;
}

#header .header-nav-main > li > a:hover:after,
#header .header-nav-main > li.current > a:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background-color: #d62828;
}

#header .header-nav-main > li > a {
	position: relative;
}

/* Dropdown / mega menu panels stay light regardless of the dark header scheme. */
#header .header-nav-main .nav-dropdown,
#header .header-nav-main .mega-menu {
	background-color: #fff;
	box-shadow: 0 12px 30px rgba(24, 28, 46, 0.16);
	border: none;
}

#header .header-nav-main .nav-dropdown a,
#header .header-nav-main .mega-menu a {
	color: #181c2e;
}

#header .header-nav-main .nav-dropdown a:hover {
	color: #d62828;
}

/* Icons: search, account, cart */
#header .header-icon,
#header .header-search-form .icon,
#header .account-icon,
#header .cart-icon,
#header .header-nav-main .icon {
	color: #fff;
}

#header .header-icon:hover,
#header .account-icon:hover,
#header .cart-icon:hover {
	color: #d62828;
}

#header .cart-count {
	background-color: #d62828;
	color: #fff;
}

/* Seamless red topbar -> navy header edge */
.header-top {
	box-shadow: none;
}

/* Center the primary nav within the space between logo and right icon cluster.
   Scoped to desktop (>=850px, Flatsome's own .hide-for-medium breakpoint) —
   forcing display:flex here unscoped beat Flatsome's
   ".hide-for-medium{display:none}" at <=849px on specificity (#header ID vs
   single class) and leaked the full desktop nav onto mobile underneath the
   hamburger, squeezing the logo out of the header row. */
@media (min-width: 850px) {
	#header .header-main .header-inner > .flex-col.hide-for-medium.flex-left {
		flex: 1 1 auto !important;
		display: flex !important;
		justify-content: center !important;
	}

	/* Flatsome's own .nav-left forces justify-content:flex-start on the ul;
	   override so the (already flex-grown) nav column visually centers. */
	#header .header-main .header-inner > .flex-col.hide-for-medium.flex-left .header-nav-main.nav-left {
		justify-content: center !important;
	}
}

/* ---------------------------------------------------------------------
   Mobile hero (max-width:549px). CSS-only — hero copy lives in page 20310
   which another workflow owns. Root cause of the oversized/wrapped H1:
   Flatsome's unscoped ".banner h1{font-size:3.5em}" (flatsome.css) beats
   its own mobile "h1{font-size:1.4em}" rule on specificity, so the hero
   heading rendered ~56px on a 390px-wide screen, wrapped 3 lines, and
   pushed the Shop Now button past the banner's clipped height. */
@media (max-width: 549px) {
	.banner .text-box-content h1 {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}

	.banner .text-box-content p.uppercase {
		font-size: 13px !important;
		line-height: 1.4 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.banner {
		min-height: 420px;
	}
}

/* ---------------------------------------------------------------------
   Off-canvas mobile menu: solid navy panel (matches the header instead of
   Flatsome's translucent default) with white uppercase items + dividers. */
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
	background-color: #181c2e !important;
}

#main-menu.mobile-sidebar {
	color: #fff;
}

#main-menu.mobile-sidebar .nav-sidebar > li {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#main-menu.mobile-sidebar .nav-sidebar > li:first-of-type {
	border-top: none;
}

#main-menu.mobile-sidebar .nav-sidebar > li > a {
	color: #fff;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}

#main-menu.mobile-sidebar .nav-sidebar .icon-angle-down,
#main-menu.mobile-sidebar .nav-sidebar .toggle {
	color: #fff;
}

#main-menu.mobile-sidebar .header-search-form .flex-row.relative {
	border-color: rgba(255, 255, 255, 0.25);
	background-color: rgba(255, 255, 255, 0.08);
}

#main-menu.mobile-sidebar .search-field {
	color: #fff;
}

#main-menu.mobile-sidebar .search-field::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

#main-menu.mobile-sidebar .ux-search-submit {
	color: #fff;
}

/* ---------------------------------------------------------------------
   Product carousels (New Products, etc.): the Flickity prev/next arrows
   overlap the Sale badge on narrow screens. Swipe already works natively
   on touch, so drop the arrows below the tablet breakpoint. */
@media (max-width: 549px) {
	.row-slider .flickity-prev-next-button {
		display: none !important;
	}
}