/* ---------- Mobile bottom navigation ---------- */
.cgt-mobile-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid #E7E1DC;
	box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
	z-index: 9998;
	padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.cgt-nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-decoration: none !important;
	color: #6B6660;
	font-size: 10px;
	font-weight: 600;
	padding: 4px 0;
}
.cgt-nav-item svg {
	width: 21px;
	height: 21px;
}
.cgt-nav-item.active,
.cgt-nav-item:hover {
	color: #880000;
}
.cgt-nav-icon-wrap {
	position: relative;
	display: inline-flex;
}
.cgt-cart-count {
	position: absolute;
	top: -5px;
	right: -8px;
	background: #880000;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	min-width: 15px;
	height: 15px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

@media (max-width: 900px) {
	.cgt-mobile-nav {
		display: flex;
	}
	/* Leave room so the fixed bar never covers the last bit of the page. */
	body {
		padding-bottom: 68px;
	}
	.cgt-desktop-search-item {
		display: none;
	}
}

/* ---------- Desktop search icon in the primary menu ---------- */
.cgt-desktop-search-item .cgt-search-trigger svg {
	width: 19px;
	height: 19px;
	vertical-align: middle;
}

/* ---------- Search overlay (both desktop and mobile) ---------- */
.cgt-search-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.55);
	z-index: 99999;
	align-items: flex-start;
	justify-content: center;
	padding-top: 14vh;
}
.cgt-search-overlay.cgt-open {
	display: flex;
}
.cgt-search-box {
	background: #fff;
	border-radius: 14px;
	padding: 26px;
	width: 92%;
	max-width: 560px;
	position: relative;
}
.cgt-search-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #6B6660;
}
.cgt-search-box form {
	display: flex;
	gap: 8px;
	margin: 0;
}
.cgt-search-box input[type="search"] {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid #DDD6C8;
	border-radius: 8px;
	font-size: 15px;
}
.cgt-search-submit {
	background: #880000;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 22px;
	font-weight: 600;
	cursor: pointer;
}
.cgt-search-submit:hover {
	background: #6B0000;
}

/* ---------- Search + Cart + Account icon group — one row, in both the desktop menu
   and the mobile off-canvas menu (Astra reuses the same menu location for both). ---------- */
.cgt-header-icon-group {
	display: flex !important;
	align-items: center;
	gap: 18px;
	list-style: none;
}
.cgt-header-icon-group a,
.cgt-header-icon-group button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	position: relative;
	color: #880000;
	cursor: pointer;
}
.cgt-header-icon-group svg {
	width: 20px;
	height: 20px;
}
.cgt-header-icon-group .cgt-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: #880000;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	min-width: 15px;
	height: 15px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

@media (max-width: 900px) {
	/* Not needed on mobile anymore — Search/Cart already live in the bottom nav, and Account
	   gets its own icon next to the hamburger instead (see .cgt-mobile-account-icon). */
	.cgt-header-icon-group {
		display: none !important;
	}

	/* Make sure the off-canvas menu can actually scroll if its content is taller than the
	   screen — some Astra versions need this spelled out explicitly on the drawer/content. */
	.ast-mobile-popup-drawer,
	.ast-mobile-popup-content,
	.ast-mobile-popup-inner,
	#ast-hf-mobile-menu,
	.main-header-bar-navigation {
		overflow-y: auto !important;
		max-height: 100vh !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------- Mobile-only Account icon, placed right after the hamburger toggle ---------- */
.cgt-mobile-account-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #880000;
	margin-left: 10px;
}
.cgt-mobile-account-icon svg {
	width: 22px;
	height: 22px;
}
@media (min-width: 901px) {
	.cgt-mobile-account-icon {
		display: none;
	}
}


/* ---------- Hamburger toggle: white lines by default (covers both text-color and
   background-color based hamburger icon implementations) ---------- */
.ast-mobile-menu-trigger-minimal,
[class*="mobile-menu-trigger"],
[class*="mobile-menu-buttons"] {
	color: #fff !important;
	background-color: transparent !important; /* the button/container itself must stay see-through */
}
/* Only genuinely empty spans are real bar/line elements — a span WITH children is a wrapper,
   and painting that white creates a solid box that swallows the (also white) bars inside it. */
.ast-mobile-menu-trigger-minimal span:empty,
[class*="mobile-menu-trigger"] span:empty,
[class*="mobile-menu-buttons"] span:empty {
	background-color: #fff !important;
}
.ast-mobile-menu-trigger-minimal span:not(:empty),
[class*="mobile-menu-trigger"] span:not(:empty),
[class*="mobile-menu-buttons"] span:not(:empty) {
	background-color: transparent !important;
	color: #fff !important;
}
/* Some Astra versions draw the hamburger bars purely with CSS pseudo-elements — JS can never
   reach those (they're not real DOM nodes), so this has to be covered here specifically. */
.ast-mobile-menu-trigger-minimal span:empty::before,
.ast-mobile-menu-trigger-minimal span:empty::after,
[class*="mobile-menu-trigger"] span:empty::before,
[class*="mobile-menu-trigger"] span:empty::after,
[class*="mobile-menu-buttons"] span:empty::before,
[class*="mobile-menu-buttons"] span:empty::after {
	background-color: #fff !important;
	color: #fff !important;
}