/**
 * Q8 Kart — header bar (brand gradient), search pill, account strip.
 * Scope: #header.q8kart-header (Flatsome filter) + body classes for nav hide.
 */
:root {
	--q8-brand-solid: #2e1a6d;
	/* Text & chrome on gradient */
	--q8-hdr-ink: #ffffff;
	--q8-hdr-ink-muted: rgba(255, 255, 255, 0.78);
	--q8-hdr-border: rgba(255, 255, 255, 0.22);
	/* Search pill (light surface) */
	--q8-hdr-search-bg: #ffffff;
	--q8-hdr-search-border: #e2e4ec;
	--q8-hdr-search-text: #2e1a6d;
	--q8-hdr-search-muted: #5a6175;
	/* Count badges */
	--q8-hdr-badge-bg: #ffffff;
	--q8-hdr-badge-fg: #2e1a6d;
	/* Logo wordmark max height (desktop main bar); aligns with Flatsome sticky default so pre-scroll matches scrolled */
	--q8-hdr-logo-max-h: 70px;
}

/* Arabic / RTL: Cairo for the branded header (masthead inherits). */
body.rtl #header.q8kart-header,
html[lang^="ar"] #header.q8kart-header {
	font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Second header search (mobile): native placeholder “Search {site}” */
#header.q8kart-header .q8kart-header-searchform--compact-bar .q8kart-header-search__field::placeholder {
	color: #8b92a8;
	opacity: 1;
}

#header.q8kart-header .q8kart-header-searchform--compact-bar .q8kart-header-search__field::-webkit-input-placeholder {
	color: #8b92a8;
}

#header.q8kart-header .q8kart-header-searchform--compact-bar .q8kart-header-search__field {
	padding-left: 2px !important;
}

/*
 * Live search panel: Flatsome only fills `.header .search-form .live-search-results`.
 * Q8 `product-searchform.php` uses `searchform` (no hyphen), so the global Flatsome rule
 * `live-search-results { background-color: transparent }` won — dropdown looked see-through on mobile.
 */
#header.q8kart-header form.searchform .live-search-results {
	background-color: var(--q8-hdr-search-bg, #fff) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	color: #111;
	border-radius: 10px;
	overflow: hidden;
}

#header.q8kart-header form.searchform .live-search-results .autocomplete-suggestions {
	background-color: var(--q8-hdr-search-bg, #fff) !important;
}

#header.q8kart-header form.searchform .live-search-results .autocomplete-suggestion {
	border-bottom-color: rgba(0, 0, 0, 0.06);
}

#header.q8kart-header form.searchform .live-search-results .autocomplete-suggestion .search-image {
	flex-shrink: 0;
	object-fit: contain;
}

#header.q8kart-header form.searchform .live-search-results .autocomplete-suggestion .search-name {
	min-width: 0;
	word-break: break-word;
}

/* Brand bar — all viewports (mobile + desktop) */
#header.q8kart-header.header,
#header.q8kart-header .header-wrapper,
#header.q8kart-header .header-bg-container,
#header.q8kart-header #masthead.header-main,
#header.q8kart-header .header-bottom,
#header.q8kart-header #wide-nav,
#header.q8kart-header #top-bar.header-top,
#header.q8kart-header .header-top {
	background: var(--q8-brand-grad) !important;
	background-color: var(--q8-brand-solid) !important;
	background-image: none !important;
}

#header.q8kart-header.header,
#header.q8kart-header .header-wrapper {
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

#header.q8kart-header.header.transparent .header-wrapper,
#header.q8kart-header.header.transparent #masthead.header-main,
#header.q8kart-header.header.transparent .header-bottom,
#header.q8kart-header.header.transparent #wide-nav {
	background: var(--q8-brand-grad) !important;
	background-color: var(--q8-brand-solid) !important;
	background-image: none !important;
}

.stuck #header.q8kart-header .header-wrapper,
#header.q8kart-header.sticky-wrapper .header-wrapper {
	background: var(--q8-brand-grad) !important;
	background-color: var(--q8-brand-solid) !important;
	background-image: none !important;
}

/* —— Main header + bottom bar: text, links, icons (not search pill) —— */
#header.q8kart-header #masthead .header-inner,
#header.q8kart-header .header-bottom .header-inner {
	color: var(--q8-hdr-ink-muted);
}

#header.q8kart-header #masthead .header-nav a,
#header.q8kart-header #masthead .mobile-nav a,
#header.q8kart-header #masthead .nav-top-link,
#header.q8kart-header #masthead #logo a,
#header.q8kart-header .header-bottom .header-nav a,
#header.q8kart-header .header-bottom .nav a {
	color: var(--q8-hdr-ink) !important;
}

/* Tab bar reparented to <body> (see q8kart-mobile-tabbar.js) — keep link color */
body.q8kart-mobile-tabbar #wide-nav.header-bottom .mobile-nav a,
body.q8kart-mobile-tabbar #wide-nav.header-bottom .mobile-nav .nav-top-link {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .header-nav a:hover,
#header.q8kart-header #masthead .mobile-nav a:hover,
#header.q8kart-header #masthead .nav-top-link:hover,
#header.q8kart-header #masthead #logo a:hover,
#header.q8kart-header .header-bottom .header-nav a:hover {
	color: #ffffff !important;
	opacity: 0.95;
}

/*
 * Masthead flyouts (My Account, etc.): Flatsome uses a light .nav-dropdown panel; bar rules above
 * force white on every .header-nav a — links become invisible on white. Reset inside dropdowns only.
 */
#header.q8kart-header #masthead .header-nav .nav-dropdown,
#header.q8kart-header #masthead .header-nav .nav-dropdown-inner {
	color: #1a1a1a;
}

#header.q8kart-header #masthead .header-nav .nav-dropdown a,
#header.q8kart-header #masthead .header-nav .nav-dropdown .nav-top-link,
#header.q8kart-header #masthead .header-nav .nav-dropdown button {
	color: #1a1a1a !important;
	opacity: 1 !important;
	-webkit-text-fill-color: #1a1a1a;
}

#header.q8kart-header #masthead .header-nav .nav-dropdown a:hover,
#header.q8kart-header #masthead .header-nav .nav-dropdown .nav-top-link:hover {
	color: #000 !important;
	opacity: 1 !important;
	-webkit-text-fill-color: #000;
}

#header.q8kart-header #masthead .header-nav .nav-dropdown .icon,
#header.q8kart-header #masthead .header-nav .nav-dropdown i,
#header.q8kart-header #masthead .header-nav .nav-dropdown .icon.primary {
	color: #444 !important;
}

#header.q8kart-header #masthead .header-nav .nav-dropdown .account-user,
#header.q8kart-header #masthead .header-nav .nav-dropdown .user-name,
#header.q8kart-header #masthead .header-nav .nav-dropdown .user-id {
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a;
}

#header.q8kart-header.nav-dark #masthead .header-nav > li > a,
#header.q8kart-header.nav-dark #masthead .header-nav > li > button,
#header.q8kart-header.nav-dark #masthead .header-nav > li > .header-menu-toggle,
#header.q8kart-header.nav-dark #masthead .mobile-nav > li > a,
#header.q8kart-header.nav-dark .header-bottom .header-nav > li > a,
#header.q8kart-header.nav-dark .header-bottom .header-nav > li > button {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .header-nav > li.html,
#header.q8kart-header #masthead .header-nav .header-block,
#header.q8kart-header #masthead .header-nav .header-button {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .header-nav > li.html a,
#header.q8kart-header #masthead .header-nav .header-block a {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .header-nav .header-divider,
#header.q8kart-header #masthead .nav-divided > .header-divider::after,
#header.q8kart-header .header-bottom .header-divider {
	border-color: var(--q8-hdr-border) !important;
	opacity: 1;
}

#header.q8kart-header #masthead .header-nav .icon.primary,
#header.q8kart-header #masthead .mobile-nav .icon.primary,
#header.q8kart-header .header-bottom .header-nav .icon.primary,
#header.q8kart-header #wide-nav .mobile-nav .icon.primary,
#wide-nav.header-bottom .mobile-nav .icon.primary {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .header-search > a,
#header.q8kart-header #masthead .header-search .nav-top-link {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .wishlist-link .header-wishlist-title,
#header.q8kart-header #masthead .header-wishlist-icon .hide-for-medium {
	color: var(--q8-hdr-ink) !important;
}

/* —— Top bar: separator from main header + full brand chrome —— */
#header.q8kart-header #top-bar.header-top,
#header.q8kart-header #top-bar {
	border-bottom: 1px solid var(--q8-hdr-border) !important;
}

/* Desktop: top bar inner row is full width (Flatsome uses `.flex-row.container`, which caps max-width). */
@media screen and (min-width: 850px) {
	#header.q8kart-header #top-bar .flex-row.container {
		max-width: none !important;
		width: 100%;
		padding-left: clamp(12px, 2.5vw, 40px);
		padding-right: clamp(12px, 2.5vw, 40px);
		box-sizing: border-box;
	}
}

#header.q8kart-header #top-bar,
#header.q8kart-header #top-bar .html,
#header.q8kart-header #top-bar .nav > li > a,
#header.q8kart-header #top-bar .nav > li > button,
#header.q8kart-header #top-bar .header-nav > li > a,
#header.q8kart-header #top-bar .header-nav > li > button,
#header.q8kart-header #top-bar .mobile-nav a,
#header.q8kart-header #top-bar .nav-top-link,
#header.q8kart-header #top-bar label {
	color: rgba(255, 255, 255, 0.92) !important;
}

#header.q8kart-header #top-bar.nav-dark .nav > li > a,
#header.q8kart-header #top-bar.nav-dark .nav > li > button,
#header.q8kart-header #top-bar.nav-dark .header-nav > li > a,
#header.q8kart-header #top-bar.nav-dark .mobile-nav a {
	color: rgba(255, 255, 255, 0.92) !important;
}

#header.q8kart-header #top-bar a:hover,
#header.q8kart-header #top-bar .nav > li > a:hover,
#header.q8kart-header #top-bar .nav > li > button:hover,
#header.q8kart-header #top-bar .header-nav > li > a:hover,
#header.q8kart-header #top-bar .mobile-nav a:hover,
#header.q8kart-header #top-bar .nav-top-link:hover {
	color: #ffffff !important;
}

/* Beat Flatsome Customizer .top-bar-nav link + pill/box hovers */
#header.q8kart-header #top-bar .top-bar-nav > li > a,
#header.q8kart-header #top-bar .top-bar-nav.nav > li > a:hover,
#header.q8kart-header #top-bar .top-bar-nav.nav > li.active > a,
#header.q8kart-header #top-bar .top-bar-nav.nav > li.current > a,
#header.q8kart-header #top-bar .top-bar-nav.nav > li > a.active,
#header.q8kart-header #top-bar .top-bar-nav.nav > li > a.current {
	color: rgba(255, 255, 255, 0.92) !important;
}

#header.q8kart-header #top-bar .top-bar-nav.nav > li > a:hover,
#header.q8kart-header #top-bar .top-bar-nav.nav > li.active > a,
#header.q8kart-header #top-bar .top-bar-nav.nav > li.current > a,
#header.q8kart-header #top-bar .top-bar-nav.nav > li > a.active,
#header.q8kart-header #top-bar .top-bar-nav.nav > li > a.current {
	color: #ffffff !important;
}

#header.q8kart-header #top-bar .top-bar-nav.nav-box > li > a:hover,
#header.q8kart-header #top-bar .top-bar-nav.nav-box > li.active > a,
#header.q8kart-header #top-bar .top-bar-nav.nav-pills > li > a:hover,
#header.q8kart-header #top-bar .top-bar-nav.nav-pills > li.active > a {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.16) !important;
}

#header.q8kart-header #top-bar .button,
#header.q8kart-header #top-bar button.button,
#header.q8kart-header #top-bar input[type="submit"],
#header.q8kart-header #top-bar input[type="button"] {
	background-color: rgba(255, 255, 255, 0.14) !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
}

#header.q8kart-header #top-bar .button:hover,
#header.q8kart-header #top-bar button.button:hover,
#header.q8kart-header #top-bar input[type="submit"]:hover,
#header.q8kart-header #top-bar input[type="button"]:hover {
	background-color: rgba(255, 255, 255, 0.24) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #ffffff !important;
}

#header.q8kart-header #top-bar .button.primary,
#header.q8kart-header #top-bar .button:not(.is-outline):not(.plain) {
	background: rgba(255, 255, 255, 0.22) !important;
	border-color: rgba(255, 255, 255, 0.45) !important;
}

#header.q8kart-header #top-bar .icon,
#header.q8kart-header #top-bar i {
	color: rgba(255, 255, 255, 0.92) !important;
}

#header.q8kart-header #top-bar .icon svg path,
#header.q8kart-header #top-bar i svg path,
#header.q8kart-header #top-bar .nav > li > a svg path,
#header.q8kart-header #top-bar .nav-top-link svg path {
	fill: currentColor !important;
}

#header.q8kart-header #top-bar .icon svg path[fill="none"],
#header.q8kart-header #top-bar .nav > li > a svg path[fill="none"],
#header.q8kart-header #top-bar .nav-top-link svg path[fill="none"] {
	fill: none !important;
	stroke: currentColor !important;
}

#header.q8kart-header #top-bar select,
#header.q8kart-header #top-bar input[type="text"],
#header.q8kart-header #top-bar input[type="search"],
#header.q8kart-header #top-bar input[type="email"] {
	background-color: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	color: #ffffff !important;
}

#header.q8kart-header #top-bar select option {
	color: #1a1a2e;
	background-color: #ffffff;
}

#header.q8kart-header #top-bar .header-divider,
#header.q8kart-header #top-bar .nav-divided > .header-divider::after {
	border-color: var(--q8-hdr-border) !important;
	opacity: 1;
}

#header.q8kart-header #masthead .header-nav > li > .header-menu-toggle {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .header-nav > li.active > a,
#header.q8kart-header #masthead .header-nav > li.current-menu-item > a,
#header.q8kart-header .header-bottom .header-nav > li.active > a,
#header.q8kart-header .header-bottom .header-nav > li.current-menu-item > a {
	color: #ffffff !important;
	font-weight: 700;
}

#header.q8kart-header #masthead .cart-item .header-cart-title,
#header.q8kart-header #masthead .account-item .header-account-title,
#header.q8kart-header #masthead .account-item > a > span,
#header.q8kart-header #masthead .q8kart-header-orders__text {
	color: var(--q8-hdr-ink) !important;
}

/* Custom header SVG/PNG icons (cart, etc.) — all breakpoints; was desktop-only so mobile showed dark art. */
#header.q8kart-header #masthead .q8kart-hdr-header-icon-img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.96;
}

/* Mobile masthead: stroke icons (menu, etc.) vs filled cart glyph */
#header.q8kart-header #masthead .mobile-nav .icon.primary,
#header.q8kart-header #masthead .mobile-nav i {
	color: var(--q8-hdr-ink) !important;
}

#header.q8kart-header #masthead .mobile-nav li:not(.cart-item) i svg path,
#header.q8kart-header #masthead .mobile-nav li:not(.cart-item) a.nav-top-link > svg path {
	stroke: var(--q8-hdr-ink) !important;
	fill: transparent;
}

#header.q8kart-header #masthead .mobile-nav .cart-item i svg path,
#header.q8kart-header #masthead .mobile-nav .cart-item .header-cart-link svg path {
	fill: var(--q8-hdr-ink) !important;
	stroke: none !important;
}

/* Fixed bottom tab bar (may be reparented under <body>): same icon treatment as masthead mobile */
#wide-nav.header-bottom .mobile-nav .icon.primary,
#wide-nav.header-bottom .mobile-nav i {
	color: var(--q8-hdr-ink) !important;
}

#wide-nav.header-bottom .mobile-nav li:not(.cart-item) i svg path,
#wide-nav.header-bottom .mobile-nav li:not(.cart-item) a.nav-top-link > svg path,
#wide-nav.header-bottom .mobile-nav .account-item a svg path,
#wide-nav.header-bottom .mobile-nav .account-item a.account-link > svg path,
#wide-nav.header-bottom .mobile-nav .q8kart-tabbar-home__icon svg path {
	stroke: var(--q8-hdr-ink) !important;
	fill: transparent;
}

#wide-nav.header-bottom .mobile-nav .cart-item i svg path,
#wide-nav.header-bottom .mobile-nav .cart-item .header-cart-link svg path {
	fill: var(--q8-hdr-ink) !important;
	stroke: none !important;
}

#wide-nav.header-bottom .mobile-nav .q8kart-hdr-header-icon-img,
#wide-nav.header-bottom .mobile-nav .q8kart-header-orders__icon .q8kart-hdr-header-icon-img {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.96;
}

@media screen and (min-width: 850px) {
	/* Main header inherits gradient from global rules above */

	#header.q8kart-header #masthead.header-main .top-divider {
		display: none !important;
	}

	#header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
		min-height: calc(var(--q8-hdr-logo-max-h) + 1.1rem);
		align-items: center;
	}

	/* 3 columns — logo left: logo | search area | actions */
	#header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner.logo-left {
		display: grid;
		grid-template-columns: auto minmax(280px, 1fr) auto;
		column-gap: 1.25rem;
		align-items: center;
	}

	#header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner.logo-left #logo {
		grid-column: 1;
	}

	#header.q8kart-header #masthead .header-inner.logo-left > .flex-left.flex-grow {
		grid-column: 2;
		min-width: 0;
		width: 100%;
		max-width: 820px;
		margin: 0 auto;
		flex-grow: unset !important;
		justify-self: stretch;
	}

	#header.q8kart-header #masthead .header-inner.logo-left > .flex-right {
		grid-column: 3;
		min-width: 0;
		flex-shrink: 0;
	}

	/* Logo center: search+nav | logo | icons (DOM: logo, flex-left, flex-right) */
	#header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner.logo-center {
		display: grid;
		grid-template-columns: minmax(280px, 1fr) auto auto;
		column-gap: 1.25rem;
		align-items: center;
	}

	#header.q8kart-header #masthead .header-inner.logo-center #logo {
		grid-column: 2;
	}

	#header.q8kart-header #masthead .header-inner.logo-center > .flex-left {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
		width: 100%;
		max-width: 820px;
		justify-self: stretch;
	}

	#header.q8kart-header #masthead .header-inner.logo-center > .flex-right {
		grid-column: 3;
		grid-row: 1;
		min-width: 0;
		flex-shrink: 0;
	}

	/*
	 * Search only in RIGHT header: hide empty left column. Match only direct <li> children so
	 * Flatsome "Search" (li.header-search with nested form) does not count as "search on left".
	 */
	#header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner.logo-left:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])),
	#header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner.logo-center:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) {
		grid-template-columns: auto minmax(280px, 1fr);
	}

	#header.q8kart-header #masthead .header-inner.logo-left:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-left.flex-grow,
	#header.q8kart-header #masthead .header-inner.logo-center:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-left {
		display: none !important;
	}

	#header.q8kart-header #masthead .header-inner.logo-left:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-right,
	#header.q8kart-header #masthead .header-inner.logo-center:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-right {
		grid-column: 2;
		justify-self: stretch;
		width: 100%;
		max-width: 820px;
		margin: 0 auto;
	}

	#header.q8kart-header #masthead .header-inner.logo-center:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > #logo {
		grid-column: 1;
	}

	#header.q8kart-header #masthead .header-inner.logo-left:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-right .header-nav.nav-right,
	#header.q8kart-header #masthead .header-inner.logo-center:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-right .header-nav.nav-right {
		width: 100%;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
	}

	#header.q8kart-header #masthead .header-inner.logo-left:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-right .header-nav.nav-right > li[class*="header-search"],
	#header.q8kart-header #masthead .header-inner.logo-center:not(:has(.flex-left .header-nav.nav-left > li[class*="header-search"])) > .flex-right .header-nav.nav-right > li[class*="header-search"] {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		order: -1;
		margin-inline-end: auto;
	}

	#header.q8kart-header #masthead .header-inner.logo-left .flex-left .nav,
	#header.q8kart-header #masthead .header-inner.logo-center .flex-left .nav {
		width: 100%;
		max-width: 100%;
		margin: 0;
		justify-content: stretch;
		flex-wrap: nowrap;
	}

	/*
	 * Hide primary menu links in the left <ul> (not mobile). Keep any Flatsome search item:
	 * "Search" = .header-search*, inline product form = .header-search-form.
	 */
	body.q8kart-hdr-hide-main-nav #header.q8kart-header #masthead .flex-left .header-nav.nav-left > li:not([class*="header-search"]):not(.header-divider) {
		display: none !important;
	}

	body.q8kart-hdr-hide-main-nav #header.q8kart-header #masthead .flex-left .header-nav.nav-left > li[class*="header-search"] {
		width: 100%;
		flex: 1 1 auto;
		max-width: 100%;
	}

	#header.q8kart-header #masthead #logo img {
		max-height: var(--q8-hdr-logo-max-h) !important;
		width: auto;
		height: auto;
		display: block;
		object-fit: contain;
	}

	#header.q8kart-header #masthead .header-nav.header-nav-main {
		flex-wrap: nowrap;
		align-items: center;
	}

	#header.q8kart-header #masthead .header-search-form,
	#header.q8kart-header #masthead .header-search-form-wrapper,
	#header.q8kart-header #masthead li[class*="header-search"] .header-search-form-wrapper {
		width: 100%;
		max-width: 100%;
	}

	#header.q8kart-header #masthead li.header-search .header-search-form-wrapper {
		min-width: min(100vw - 4rem, 520px);
	}

	/* Search — white card, inset purple submit (reference-style bar) */
	#header.q8kart-header #masthead .q8kart-header-search__row {
		display: flex;
		align-items: stretch;
		background: var(--q8-hdr-search-bg);
		border: 1px solid var(--q8-hdr-search-border);
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
		overflow: hidden;
		padding: 4px 6px 4px 14px;
		min-height: 48px;
	}

	#header.q8kart-header #masthead .q8kart-header-search__row > .flex-col {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 0;
	}

	#header.q8kart-header #masthead .q8kart-header-search__row > .flex-col:last-child {
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	#header.q8kart-header #masthead .q8kart-header-search__grow {
		min-width: 0;
		flex: 1 1 auto;
		justify-content: center;
	}

	#header.q8kart-header #masthead .q8kart-header-search__inputWrap {
		position: relative;
		min-height: 44px;
		display: flex;
		align-items: center;
		width: 100%;
	}

	#header.q8kart-header #masthead .q8kart-header-search__faux {
		position: absolute;
		inset: 0;
		left: 0;
		display: flex;
		align-items: center;
		gap: 0.4rem;
		pointer-events: none;
		color: var(--q8-hdr-search-muted);
		font-size: 0.9375rem;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		transition: opacity 0.15s ease;
		z-index: 0;
	}

	#header.q8kart-header #masthead .q8kart-header-search__inputWrap:focus-within .q8kart-header-search__faux,
	#header.q8kart-header #masthead .q8kart-header-search__inputWrap.is-dirty .q8kart-header-search__faux {
		opacity: 0;
	}

	#header.q8kart-header #masthead .q8kart-header-search__fauxLabel {
		flex: 0 0 auto;
		font-weight: 600;
		color: var(--q8-hdr-search-text);
		line-height: 1.25;
		display: flex;
		align-items: center;
	}

	#header.q8kart-header #masthead .q8kart-header-search__hintWrap {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	#header.q8kart-header #masthead .q8kart-header-search__hint {
		display: block;
		font-weight: 500;
		color: var(--q8-hdr-search-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.35;
	}

	#header.q8kart-header #masthead .q8kart-header-search__field {
		position: relative;
		z-index: 1;
		width: 100%;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		margin: 0 !important;
		min-height: 44px;
		padding: 11px 8px 11px 0 !important;
		font-size: 0.95rem;
		line-height: 1.35;
		color: var(--q8-hdr-search-text);
		box-sizing: border-box;
	}

	#header.q8kart-header #masthead .q8kart-header-search__submit {
		border: 0 !important;
		background: var(--q8-brand-solid) !important;
		box-shadow: none !important;
		color: #ffffff !important;
		min-width: 44px;
		min-height: 40px;
		height: 40px;
		width: 44px;
		padding: 0 !important;
		border-radius: 10px !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 0 2px 0 4px;
	}

	#header.q8kart-header #masthead .q8kart-header-search__submit:hover {
		filter: brightness(1.12);
		opacity: 1;
	}

	#header.q8kart-header #masthead .q8kart-header-search__submit svg,
	#header.q8kart-header #masthead .q8kart-header-search__submit .icon {
		width: 22px;
		height: 22px;
		color: #ffffff !important;
	}

	#header.q8kart-header #masthead .q8kart-header-search__submit svg path,
	#header.q8kart-header #masthead .q8kart-header-search__submit i {
		stroke: #ffffff !important;
		color: #ffffff !important;
		fill: none;
	}

	#header.q8kart-header #masthead .q8kart-header-search__row .search-form-categories select {
		border: 0;
		background: #f3f4f6;
		border-radius: 8px;
		margin: 5px 6px 5px 0;
	}

	/* Right strip: icon + label */
	#header.q8kart-header #masthead .header-nav a.nav-top-link,
	#header.q8kart-header #masthead .header-nav .header-cart-link {
		color: var(--q8-hdr-ink) !important;
	}

	#header.q8kart-header #masthead .header-nav.nav-left > li:not(.header-search-form) i,
	#header.q8kart-header #masthead .header-nav .flex-right i svg path,
	#header.q8kart-header #masthead .header-nav .flex-right a.nav-top-link > svg path,
	#header.q8kart-header #masthead .header-nav.nav-right i svg path,
	#header.q8kart-header #masthead .header-nav.nav-right a.nav-top-link > svg path {
		stroke: var(--q8-hdr-ink) !important;
		fill: transparent;
	}

	#header.q8kart-header #masthead .account-item > a .q8kart-hdr-header-icon-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		min-height: 26px;
	}

	#header.q8kart-header #masthead .header-nav .icon.primary,
	#header.q8kart-header #masthead .header-nav i {
		color: var(--q8-hdr-ink) !important;
	}

	#header.q8kart-header #masthead .account-item > a,
	#header.q8kart-header #masthead .header-wishlist-icon .wishlist-link,
	#header.q8kart-header #masthead .q8kart-header-orders-link,
	#header.q8kart-header #masthead .cart-item .header-cart-link {
		display: inline-flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: flex-start;
		gap: 0.2rem;
		min-width: 3.5rem;
		text-align: center;
		font-size: 0.6875rem;
		font-weight: 700;
		line-height: 1.1;
		color: var(--q8-hdr-ink) !important;
		letter-spacing: 0.01em;
	}

	#header.q8kart-header #masthead .account-item > a .header-account-title,
	#header.q8kart-header #masthead .account-item > a > span {
		display: block !important;
		max-width: 5rem;
	}

	#header.q8kart-header #masthead .header-wishlist-icon .hide-for-medium.header-wishlist-title {
		display: block !important;
	}

	#header.q8kart-header #masthead .cart-item .header-cart-title {
		display: block !important;
		font-size: 0.6875rem;
		font-weight: 700;
		margin: 0 !important;
		padding: 0 !important;
		text-align: center;
		width: 100%;
		white-space: nowrap;
	}

	#header.q8kart-header #masthead .cart-item .header-cart-title .cart-price {
		display: none !important;
	}

	#header.q8kart-header #masthead .q8kart-header-orders-link {
		flex-direction: column;
	}

	#header.q8kart-header #masthead .q8kart-header-orders__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 26px;
	}

	#header.q8kart-header #masthead .q8kart-header-orders__icon svg,
	#header.q8kart-header #masthead .q8kart-header-orders__icon .q8kart-hdr-header-icon-img {
		width: 24px;
		height: 24px;
	}

	#header.q8kart-header #masthead .cart-icon strong {
		background: var(--q8-hdr-badge-bg) !important;
		color: var(--q8-hdr-badge-fg) !important;
		top: -2px;
		inset-inline-end: -4px;
	}

	#header.q8kart-header #masthead .header-nav .image-icon[data-icon-label]::after {
		background: var(--q8-hdr-badge-bg) !important;
		color: var(--q8-hdr-badge-fg) !important;
	}

	#header.q8kart-header #masthead .yith-wcwl-items-count {
		background: var(--q8-hdr-badge-bg) !important;
		color: var(--q8-hdr-badge-fg) !important;
	}

	#header.q8kart-header #masthead .header-nav.nav-right > li {
		margin-left: 0.2rem;
	}

	#header.q8kart-header #masthead .header-nav.nav-right > li > .header-button {
		margin: 0;
	}

	body:not(.rtl) #header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner.logo-left > .flex-left.flex-grow,
	body:not(.rtl) #header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner.logo-center > .flex-left {
		justify-self: center;
	}

	/*
	 * Sticky header (desktop): Flatsome uses fixed .header-main height + tall sticky nav line-heights
	 * and .header-nav.header-nav-main { align-items: flex-end } — the search pill sits low (uneven purple above/below).
	 * Let the masthead grow to content, keep symmetric inner padding, and center nav items on the cross axis.
	 */
	#header.q8kart-header.header.stuck #masthead.header-main,
	.stuck #header.q8kart-header #masthead.header-main {
		height: auto !important;
		min-height: 0 !important;
	}

	#header.q8kart-header.header.stuck #masthead .header-inner.q8kart-header-desktop-inner,
	.stuck #header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner {
		min-height: 0 !important;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* Sticky Flatsome dynamic line-height on nav hits can exceed the search row — keep icon stacks compact */
	#header.q8kart-header.header.stuck #masthead .header-main .nav > li > a,
	#header.q8kart-header.header.stuck #masthead .header-main .nav > li > button,
	.stuck #header.q8kart-header #masthead .header-main .nav > li > a,
	.stuck #header.q8kart-header #masthead .header-main .nav > li > button {
		line-height: 1.3 !important;
	}
}

@media screen and (min-width: 850px) {
	#header.q8kart-header .q8kart-header-mobile-search-wrap {
		display: none !important;
	}
}

/* Mobile: full-width product search directly under the masthead row (desktop search lives in hide-for-medium column). */
@media screen and (max-width: 849px) {
	/*
	 * Status bar / overscroll: match header (see theme-color meta in functions.php).
	 */
	html {
		background-color: var(--q8-brand-solid, #2e1a6d);
	}

	/*
	 * Flatsome often leaves body / content_bg as light gray — that shows in the safe-area strip above the header
	 * (padding-top on #header) and reads as a “gray bar” above the purple top bar on phones.
	 */
	body.q8kart-desktop-header {
		background-color: var(--q8-brand-solid, #2e1a6d);
	}

	/*
	 * Flatsome injects .header-bg-color (default near-white) inside .header-bg-container — it can tint the top band.
	 * Q8 header chrome is fully controlled by the rules on #header / #top-bar; drop the extra fill on small screens.
	 */
	#header.q8kart-header .header-bg-container .header-bg-color {
		background: transparent !important;
		background-color: transparent !important;
		opacity: 0 !important;
	}

	/*
	 * Paint the “notch” band under the iOS status bar (otherwise WebKit shows neutral gray above your purple bar).
	 * Requires viewport-fit=cover (see flatsome_viewport_meta filter in functions.php).
	 */
	#header.q8kart-header.header,
	#header.q8kart-header.header.stuck {
		padding-top: env(safe-area-inset-top, 0px) !important;
		box-sizing: border-box;
		background-color: var(--q8-brand-solid, #2e1a6d) !important;
		background-image: var(--q8-brand-grad) !important;
	}

	/*
	 * Flatsome sets .header-main to a fixed height (≤549px uses header_height_mobile; tablets use desktop height).
	 * The search strip is inside #masthead; fixed height lets content overflow and cover the hero/slider — grow the masthead.
	 */
	/*
	 * Flatsome sticky sets inline height on #header when .stuck to “preserve” layout — that pixel value
	 * stays taller than the real masthead+search after we switched masthead to height:auto → empty purple band.
	 */
	#header.q8kart-header.header,
	#header.q8kart-header.header.stuck {
		height: auto !important;
		min-height: 0 !important;
	}

	#header.q8kart-header .header-wrapper {
		height: auto !important;
		min-height: 0 !important;
	}

	#header.q8kart-header #masthead.header-main,
	.stuck #header.q8kart-header #masthead.header-main {
		height: auto !important;
		min-height: 0;
		overflow: visible;
	}

	/* Divider row: hiding .top-divider only leaves an empty .container — collapse the whole row. */
	#header.q8kart-header #masthead.header-main > .q8kart-masthead-divider-wrap {
		display: none !important;
	}

	/* Compact mobile masthead: Flatsome uses tall #logo max-height + nav link line-height — feels “gappy”. */
	#header.q8kart-header #masthead.header-main .top-divider {
		display: none !important;
	}

	/*
	 * Mobile search strip: equal purple padding above and below the white bar (same as each other, and tight).
	 */
	#header.q8kart-header #masthead .header-inner.q8kart-header-desktop-inner {
		padding: 0.25rem 0.5rem;
		min-height: 0 !important;
		align-items: center;
	}

	#header.q8kart-header #masthead #logo img,
	.stuck #header.q8kart-header #masthead #logo img {
		max-height: 40px !important;
	}

	#header.q8kart-header #masthead .mobile-nav > li > a,
	#header.q8kart-header #masthead .mobile-nav > li > button,
	#header.q8kart-header #masthead .mobile-nav > li > .header-menu-toggle {
		line-height: 1.2 !important;
		padding-top: 0.25rem !important;
		padding-bottom: 0.25rem !important;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap {
		display: block !important;
		width: 100%;
		padding: 0.25rem 0;
		margin: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		box-sizing: border-box;
		background: transparent;
	}

	#header.q8kart-header .q8kart-header-mobile-search-inner.container {
		max-width: 100%;
		padding: 0 0.5rem;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .header-search-form,
	#header.q8kart-header .q8kart-header-mobile-search-wrap .header-search-form-wrapper,
	#header.q8kart-header .q8kart-header-mobile-search-wrap .searchform {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding-bottom: 0;
		position: relative;
		overflow: visible;
	}

	/* Raise stacking while typing so AJAX results sit above hero/slider. */
	#header.q8kart-header .q8kart-header-mobile-search-wrap:focus-within,
	#header.q8kart-header .q8kart-header-mobile-search-wrap.q8kart-mobile-search-active {
		position: relative;
		z-index: 10050;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap.q8kart-mobile-search-active ~ .q8kart-masthead-divider-wrap,
	#header.q8kart-header .q8kart-header-mobile-search-wrap:focus-within ~ .q8kart-masthead-divider-wrap {
		position: relative;
		z-index: 0;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .searchform:focus-within {
		z-index: 1;
	}

	/* Woo search lives outside .header .search-form — keep live results out of document flow (no blank band). */
	#header.q8kart-header .q8kart-header-mobile-search-wrap .live-search-results {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 4px);
		margin: 0;
		z-index: 10051;
		max-height: min(60vh, 420px);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 10px;
		border: 1px solid var(--q8-hdr-search-border, #e2e4ec);
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .live-search-results .autocomplete-suggestions {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		max-height: none !important;
		display: block !important;
		border-radius: 0;
		box-shadow: none;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .live-search-results .autocomplete-suggestion {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		min-height: 52px;
		padding: 0.5rem 0.75rem;
		font-size: 0.9375rem;
		line-height: 1.35;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .live-search-results .autocomplete-suggestion .search-image {
		width: 44px;
		height: 44px;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .live-search-results .autocomplete-suggestion .search-price {
		margin-left: auto;
		flex-shrink: 0;
		font-size: 0.8125rem;
		font-weight: 600;
		white-space: nowrap;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__row {
		display: flex;
		align-items: stretch;
		background: var(--q8-hdr-search-bg);
		border: 1px solid var(--q8-hdr-search-border);
		border-radius: 10px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
		overflow: hidden;
		padding: 2px 4px 2px 10px;
		min-height: 44px;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__row > .flex-col {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 0;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__row > .flex-col:last-child {
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__grow {
		min-width: 0;
		flex: 1 1 auto;
		justify-content: center;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__inputWrap {
		position: relative;
		min-height: 34px;
		display: flex;
		align-items: center;
		width: 100%;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__faux {
		position: absolute;
		inset: 0;
		left: 0;
		display: flex;
		align-items: center;
		gap: 0.35rem;
		pointer-events: none;
		color: var(--q8-hdr-search-muted);
		font-size: 0.875rem;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		transition: opacity 0.15s ease;
		z-index: 0;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__inputWrap:focus-within .q8kart-header-search__faux,
	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__inputWrap.is-dirty .q8kart-header-search__faux {
		opacity: 0;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__fauxLabel {
		flex: 0 0 auto;
		font-weight: 600;
		color: var(--q8-hdr-search-text);
		line-height: 1.25;
		display: flex;
		align-items: center;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__hintWrap {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__hint {
		display: block;
		font-weight: 500;
		color: var(--q8-hdr-search-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.35;
	}

	/*
	 * iOS Safari zooms the whole page when focused inputs are < 16px — keep at 16px on mobile.
	 */
	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__field {
		position: relative;
		z-index: 1;
		width: 100%;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		margin: 0 !important;
		min-height: 38px;
		padding: 6px 4px 6px 0 !important;
		font-size: 16px;
		line-height: 1.35;
		color: var(--q8-hdr-search-text);
		box-sizing: border-box;
		-webkit-text-size-adjust: 100%;
		touch-action: manipulation;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .search-form-categories select {
		font-size: 16px;
		min-height: 38px;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__submit {
		border: 0 !important;
		background: var(--q8-brand-solid) !important;
		box-shadow: none !important;
		color: #ffffff !important;
		min-width: 38px;
		min-height: 32px;
		height: 32px;
		width: 38px;
		padding: 0 !important;
		border-radius: 8px !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 0 1px 0 3px;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__submit:hover {
		filter: brightness(1.12);
		opacity: 1;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__submit svg,
	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__submit .icon {
		width: 20px;
		height: 20px;
		color: #ffffff !important;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__submit svg path,
	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__submit i {
		stroke: #ffffff !important;
		color: #ffffff !important;
		fill: none;
	}

	#header.q8kart-header .q8kart-header-mobile-search-wrap .q8kart-header-search__row .search-form-categories select {
		border: 0;
		background: #f3f4f6;
		border-radius: 8px;
		margin: 2px 4px 2px 0;
	}

	/*
	 * App-style tab bar: pin Flatsome mobile bottom slot to the viewport (cart / account / orders).
	 * Disable: add_filter( 'q8kart_fixed_mobile_bottom_tabbar', '__return_false' );
	 */
	body.q8kart-mobile-tabbar {
		--q8-mobile-tabbar-h: 56px;
	}

	body.q8kart-mobile-tabbar:not(.single-product) {
		padding-bottom: calc(var(--q8-mobile-tabbar-h) + env(safe-area-inset-bottom, 0px));
	}

	body.q8kart-mobile-tabbar #header.q8kart-header #wide-nav.header-bottom.wide-nav,
	body.q8kart-mobile-tabbar #wide-nav.header-bottom.wide-nav {
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: 0 !important;
		top: auto !important;
		z-index: 970;
		margin: 0 !important;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.12);
		background: var(--q8-brand-solid, #2e1a6d) !important;
		background-color: var(--q8-brand-solid, #2e1a6d) !important;
		background-image: none !important;
		border-top: 1px solid var(--q8-hdr-border);
	}

	body.q8kart-mobile-tabbar #wide-nav .nav-dropdown {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	body.q8kart-mobile-tabbar #wide-nav .header-inner.container {
		max-width: 100%;
		padding-left: 0.35rem;
		padding-right: 0.35rem;
	}

	body.q8kart-mobile-tabbar #wide-nav .mobile-nav {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-evenly;
		width: 100%;
		margin: 0;
		padding: 0.25rem 0.15rem calc(0.25rem + env(safe-area-inset-bottom, 0px));
		gap: 0;
	}

	body.q8kart-mobile-tabbar #wide-nav .mobile-nav > li {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
		padding: 0 0.1rem;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	body.q8kart-mobile-tabbar #wide-nav .mobile-nav > li > a,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav > li > button,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .header-cart-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.2rem;
		min-width: 0;
		width: 100%;
		max-width: 100%;
		text-align: center;
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 1.15;
		color: var(--q8-hdr-ink) !important;
		letter-spacing: 0.02em;
		padding: 0.2rem 0.05rem !important;
		min-height: 48px;
		box-sizing: border-box;
	}

	/* Cart / account markup: title then icon — reverse so glyph is above the label */
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav > li.cart-item > a.header-cart-link,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav > li.account-item > a.nav-top-link,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav > li.account-item > a.account-link {
		flex-direction: column-reverse;
	}

	/* Home + Orders: icon already before text */
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .q8kart-header-orders-link,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .q8kart-tabbar-home-link {
		flex-direction: column;
	}

	/* Icon row: consistent vertical slot */
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .cart-icon,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .q8kart-hdr-header-icon-wrap,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .account-item > a > i,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .account-item > a > .icon,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .account-item > a > .q8kart-hdr-header-icon-wrap,
	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .q8kart-tabbar-home__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 26px;
		flex-shrink: 0;
	}

	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .account-item > a .header-account-title,
	body.q8kart-mobile-tabbar #wide-nav .cart-item .header-cart-title {
		display: block !important;
		font-size: 0.625rem;
		font-weight: 700;
		margin: 0 !important;
		padding: 0 !important;
		text-align: center;
		width: 100%;
		max-width: 100%;
		white-space: normal;
		line-height: 1.15;
		color: var(--q8-hdr-ink) !important;
	}

	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .q8kart-tabbar-home__label {
		color: var(--q8-hdr-ink) !important;
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 1.15;
	}

	body.q8kart-mobile-tabbar #wide-nav .mobile-nav .q8kart-tabbar-home__icon svg {
		display: block;
	}

	body.q8kart-mobile-tabbar #wide-nav .cart-item .header-cart-title .cart-price {
		display: none !important;
	}

	body.q8kart-mobile-tabbar #wide-nav .q8kart-header-orders-link {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 48px;
	}

	body.q8kart-mobile-tabbar #wide-nav .q8kart-header-orders__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 26px;
		flex-shrink: 0;
	}

	body.q8kart-mobile-tabbar #wide-nav .q8kart-header-orders__text {
		color: var(--q8-hdr-ink) !important;
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 1.15;
	}

	body.q8kart-mobile-tabbar #wide-nav .q8kart-header-orders__icon svg,
	body.q8kart-mobile-tabbar #wide-nav .q8kart-header-orders__icon .q8kart-hdr-header-icon-img {
		width: 22px;
		height: 22px;
	}

	body.q8kart-mobile-tabbar #wide-nav .cart-icon strong {
		background: var(--q8-hdr-badge-bg) !important;
		color: var(--q8-hdr-badge-fg) !important;
	}

	/* Top masthead: cart icon only (labels stay in bottom tab bar) */
	body.q8kart-mobile-tabbar #header.q8kart-header #masthead .mobile-nav .cart-item .header-cart-title {
		display: none !important;
	}

	body.q8kart-mobile-tabbar #header.q8kart-header #masthead .mobile-nav .cart-item .header-cart-link {
		min-width: 2.75rem;
		justify-content: center;
		padding-left: 0.35rem !important;
		padding-right: 0.35rem !important;
	}

	/* Sticky product bar sits above the tab bar */
	body.single-product.q8kart-mobile-tabbar .sticky-add-to-cart--active,
	body.single-product.q8kart-mobile-tabbar .sticky-add-to-cart {
		bottom: calc(var(--q8-mobile-tabbar-h) + env(safe-area-inset-bottom, 0px) + 2px) !important;
	}
}

/* TranslatePress custom header control: match masthead icons (no yellow pill). */
#header.q8kart-header #masthead .q8kart-header-language-switcher {
	display: flex;
	align-items: center;
	align-self: center;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

#header.q8kart-header #masthead .q8kart-lang-pill,
#header.q8kart-header #masthead .q8kart-lang-pill--summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: auto;
	padding: 0.25rem 0.15rem 0.25rem 0.1rem;
	background: transparent;
	color: var(--q8-hdr-ink, #fff) !important;
	border-radius: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	box-shadow: none;
	letter-spacing: 0.01em;
}

/* No hover / focus “box” or fade on the header language control */
#header.q8kart-header #masthead a.q8kart-lang-pill:hover,
#header.q8kart-header #masthead a.q8kart-lang-pill:focus,
#header.q8kart-header #masthead a.q8kart-lang-pill:focus-visible,
#header.q8kart-header #masthead .q8kart-lang-details summary.q8kart-lang-pill--summary:hover,
#header.q8kart-header #masthead .q8kart-lang-details summary.q8kart-lang-pill--summary:focus,
#header.q8kart-header #masthead .q8kart-lang-details summary.q8kart-lang-pill--summary:focus-visible {
	opacity: 1;
	filter: none;
	outline: none;
	box-shadow: none;
	background: transparent;
}

#header.q8kart-header #masthead .q8kart-lang-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--q8-hdr-ink, #fff);
}

#header.q8kart-header #masthead .q8kart-lang-pill__icon img {
	display: block;
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
	opacity: 1;
}

#header.q8kart-header #masthead .q8kart-lang-pill__icon svg {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--q8-hdr-ink, #fff);
}

#header.q8kart-header #masthead .q8kart-lang-pill__label {
	white-space: nowrap;
	max-width: 5.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

#header.q8kart-header #masthead .q8kart-lang-pill__label--ar-cairo {
	font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.25;
	max-width: 7.5rem;
}

#header.q8kart-header #masthead .q8kart-lang-details {
	position: relative;
}

#header.q8kart-header #masthead .q8kart-lang-details > summary {
	list-style: none;
}

#header.q8kart-header #masthead .q8kart-lang-details > summary::-webkit-details-marker {
	display: none;
}

#header.q8kart-header #masthead .q8kart-lang-details__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 10rem;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: #fff;
	color: #101628;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	z-index: 500;
}

#header.q8kart-header #masthead .q8kart-lang-details__list li {
	margin: 0;
	padding: 0;
}

#header.q8kart-header #masthead .q8kart-lang-details__link {
	display: block;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #101628 !important;
	text-decoration: none !important;
}

#header.q8kart-header #masthead .q8kart-lang-details__link--ar-cairo {
	font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 1rem;
}

#header.q8kart-header #masthead .q8kart-lang-details__link:hover,
#header.q8kart-header #masthead .q8kart-lang-details__link:focus,
#header.q8kart-header #masthead .q8kart-lang-details__link:focus-visible {
	background: transparent;
	outline: none;
}

@media (max-width: 849px) {
	#header.q8kart-header #masthead .q8kart-lang-pill,
	#header.q8kart-header #masthead .q8kart-lang-pill--summary {
		font-size: 0.625rem;
		padding: 0.2rem 0.1rem;
	}

	#header.q8kart-header #masthead .q8kart-lang-pill__icon,
	#header.q8kart-header #masthead .q8kart-lang-pill__icon img,
	#header.q8kart-header #masthead .q8kart-lang-pill__icon svg {
		width: 22px;
		height: 22px;
	}

	#header.q8kart-header #masthead .q8kart-lang-pill__label {
		max-width: 4.5rem;
	}

	#header.q8kart-header #masthead .q8kart-lang-pill__label--ar-cairo {
		font-size: 0.875rem;
		max-width: 6.5rem;
	}
}

/* Cairo for Arabic storefront: RTL body or `lang` starting with `ar` (TranslatePress). */
body.rtl #wrapper,
html[lang^="ar"] body #wrapper {
	font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * Flatsome account lightbox + Digits native login:
 * Digits hides `.digits_show_on_index` globally and only shows it under `.digits_form_index_section …`.
 * In Magnific / two-column lightbox layouts that rule can lose on desktop, or the signup bar sits below a
 * fixed max-height — force visibility + scroll inside the popup only.
 */
#login-form-popup .dig_login_signup_bar.digits_show_on_index {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

#login-form-popup .account-container {
	max-height: min(88vh, 720px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Flatsome split layout: keep the marketing / WC register column beside the login column when present */
#login-form-popup #customer_login.row .col-1.large-6.col,
#login-form-popup #customer_login.row .col-2.large-6.col {
	display: flex !important;
	flex-direction: column;
	min-width: 0;
}