/**
 * Green Lion — header, mobile menu, floating bottom nav.
 *
 * Two halves, split at Elementor's tablet breakpoint (1024px):
 *
 *   >= 1025px  Re-lays out the EXISTING Elementor header container as a
 *              two-row grid. No markup is changed — every XStore widget keeps
 *              its own behaviour. Widgets are placed explicitly, so their DOM
 *              order is irrelevant and re-ordering them in Elementor will not
 *              break this file.
 *
 *   <= 1024px  Hides the Elementor header and styles the child-theme mobile
 *              bar, drawer and floating nav instead.
 *
 * Plain CSS — no nesting. (style.css in this theme uses SCSS-style nesting that
 * browsers do not parse; that pattern is deliberately not repeated here.)
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	/* The design uses a brighter green than the legacy brand token (#3aaa35).
	   Change this one value to switch the whole header + filter UI back. */
	--gl-green: #00bf1f;
	--gl-green-ink: #ffffff;
	--gl-green-soft: #e6f7eb;

	--gl-ink: #000000;
	--gl-ink-strong: #1f2937;
	--gl-ink-body: #374151;
	--gl-ink-muted: #6b7280;
	--gl-ink-placeholder: #9ca3af;

	--gl-line: #e5e7eb;
	--gl-line-soft: #f3f4f6;
	--gl-line-faint: #f1f1f1;
	--gl-field: #f9fafb;

	--gl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--gl-shadow-drawer: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--gl-shadow-fnav: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);

	--gl-radius-field: 12px;
	--gl-radius-card: 16px;
	--gl-radius-pill: 9999px;

	/* Inter (body) and Poppins (headings) are already loaded by the theme —
	   these inherit rather than pulling in another webfont. */
	--gl-font: inherit;

	--gl-hdr-h: 47px;
	--gl-fnav-h: 72px;

	/* Header rhythm (FIX ROUND 6). One value per relationship, so the row can be
	   re-tuned without hunting through per-widget margins:
	     --gl-hdr-gap       logo | Categories | search | icon cluster
	     --gl-hdr-icon-gap  between the three circular icon buttons
	   The gaps used to be a mix of a 11px grid gap and 43px/30px/5px per-widget
	   margins, which is what made the space before the account icon read as
	   wrong next to the space after the pill.
	   9 Sept QA: "all the spacing even in this whole top corner section" —
	   both values are now the same, so every boundary in the row (pill |
	   search | account | wishlist | cart) is 16px. */
	--gl-hdr-gap: 16px;
	--gl-hdr-icon-gap: 16px;

	/* Hover bridge under the Categories pill — see section 2.3. */
	--gl-cat-bridge: 16px;
}

/* -------------------------------------------------------------------------
 * 2. Desktop header (>= 1025px)
 * ---------------------------------------------------------------------- */

@media (min-width: 1025px) {

	/* ---- 2.1 Grid ---- */

	/* Elementor does NOT put the widgets directly in .e-con-inner — it wraps
	   them in two nested containers (a left group: logo + mega menu +
	   departments, and a right group: account + wishlist + cart). Those
	   wrappers are flattened with display:contents so the widgets themselves
	   become grid items and can be placed individually.
	
	   Everything is inside @supports: a browser without display:contents keeps
	   Elementor's original flex layout instead of getting a half-applied grid.
	   (Safari gained support in 15.4.) */
	@supports (display: contents) {

		.elementor-location-header .etheme-elementor-header-sticky > .e-con-inner {
			--display: grid;
			display: grid;
			grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
			grid-template-rows: var(--gl-hdr-h) auto;
			align-items: center;
			/* The base gap is the ICON rhythm; the wider gaps between the four
			   major blocks are topped up by margins below, so every boundary is
			   either --gl-hdr-gap or --gl-hdr-icon-gap and nothing else. */
			column-gap: var(--gl-hdr-icon-gap);
			row-gap: 0;
			width: 100%;
			/* FIX ROUND 3: the container ships with zero horizontal padding, so
			   the logo sat on the viewport edge and the last nav item was
			   clipped. Scales down to 16px on smaller desktops. */
			padding: 22px clamp(16px, 3.75vw, 54px) 12px;
			box-sizing: border-box;
		}

		/* display:contents removes the wrapper that Elementor sized the logo
		   against, collapsing it to ~40px. Size it from the image instead. */
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_site-logo,
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_site-logo .elementor-widget-container,
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_site-logo a {
			display: block;
			width: auto;
			max-width: none;
		}
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_site-logo img {
			height: var(--gl-hdr-h);
			width: auto;
			max-width: none;
			object-fit: contain;
		}

		.elementor-location-header .etheme-elementor-header-sticky > .e-con-inner > .e-con {
			display: contents;
		}
		/* A display:contents container still generates its ::before/::after
		   (Elementor's background layer), positioned absolutely over the
		   whole header. Since 10 Sept the search field is server-rendered as
		   the FIRST child of .e-con-inner, so that layer painted above it and
		   swallowed every click (measured: 1440×152 box hit before the
		   input). Take the layers out of hit-testing and lift the field. */
		.elementor-location-header .etheme-elementor-header-sticky > .e-con-inner > .e-con::before,
		.elementor-location-header .etheme-elementor-header-sticky > .e-con-inner > .e-con::after {
			pointer-events: none;
		}
		.elementor-location-header .etheme-elementor-header-sticky > .e-con-inner > .gl-header-search {
			position: relative;
			z-index: 2;
		}

		/* Explicit placement — DOM order and grouping do not matter. */
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_site-logo {
			grid-column: 1;
			grid-row: 1;
		}
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu {
			grid-column: 2;
			grid-row: 1;
			/* Tops the icon-rhythm column-gap up to the full block gap. */
			margin-left: calc(var(--gl-hdr-gap) - var(--gl-hdr-icon-gap));
		}
		.elementor-location-header .etheme-elementor-header-sticky > .e-con-inner > .gl-header-search {
			grid-column: 3;
			grid-row: 1;
			/* FIX ROUND 6: was asymmetric (30px left / 5px right), which left the
			   field almost touching the account circle while sitting well clear
			   of the pill. Even on both sides now.
			   9 Sept QA ("account is touching the search bar"): the wrapper is
			   width:100% of its 1fr track, so side MARGINS pushed it 24px past
			   the track and under the account circle (measured: field right
			   edge 1221, account left 1221). Same 24px rhythm, now as PADDING
			   inside the track, and the wrapper sized to the track exactly. */
			margin: 0;
			padding: 0 calc(var(--gl-hdr-gap) - var(--gl-hdr-icon-gap));
			box-sizing: border-box;
			min-width: 0;
		}
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account {
			grid-column: 4;
			grid-row: 1;
			justify-self: end;
		}
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist {
			grid-column: 5;
			grid-row: 1;
			justify-self: end;
		}
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart {
			grid-column: 6;
			grid-row: 1;
			justify-self: end;
		}
		/* Nav drops to its own full-width row. */
		.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu {
			grid-column: 1 / -1;
			grid-row: 2;
			width: 100%;
			padding-top: 22px;
			padding-bottom: 12px;
		}
	}

	/* Attribute match so this survives the -ghost rename too. */
	.elementor-location-header [class*="etheme-elementor-header-wrapper"] {
		background: #ffffff;
		border-bottom: 1px solid var(--gl-line-faint);
	}

	/* ---- 2.2 Logo ---- */

	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_site-logo img {
		max-height: var(--gl-hdr-h);
		width: auto;
	}

	/* ---- 2.3 "Categories" pill (XStore departments menu widget) ---- */

	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent {
		position: relative;   /* anchors the hover bridge below */
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-width: 184px;
		height: var(--gl-hdr-h);
		padding: 0 18px;
		border-radius: var(--gl-radius-pill);
		background: var(--gl-green);
		color: var(--gl-green-ink);
		font-family: var(--gl-font);
		font-size: 18px;
		font-weight: 500;
		line-height: 20px;
		white-space: nowrap;
		transition: background-color 0.15s ease;
	}
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent:hover,
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent:focus-visible {
		background: #00a91c;
	}
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .elementor-item,
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .et-icon,
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .etheme-elementor-nav-menu-item-arrow {
		color: currentColor;
	}
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .et-icon {
		font-size: 18px;
	}
	/* The dropdown itself keeps XStore's behaviour; just soften the frame. */
	.elementor-widget-theme-etheme_departments_menu .nav-sublist-dropdown {
		border-radius: var(--gl-radius-card);
		border: 1px solid var(--gl-line-soft);
		box-shadow: var(--gl-shadow-sm);
		overflow: hidden;
	}

	/* FIX ROUND 6 — submenu closed when the cursor moved into it.
	 *
	 * Two causes, both fixed here:
	 *
	 *  1. DEAD SPACE. XStore offsets the panel below the parent item. The pill
	 *     restyle made that worse: the pill is 47px tall inside a taller item
	 *     box, so the panel starts further from the pill's visible bottom edge
	 *     than it used to. Crossing that unhovered strip closed the menu before
	 *     the pointer ever reached the panel. The offset is removed…
	 */
	.elementor-widget-theme-etheme_departments_menu .nav-sublist-dropdown {
		margin-top: 0 !important;
	}

	/*  2. …and a transparent BRIDGE covers whatever offset XStore still applies
	 *     (padding, transform, or a top: calc()). It is a child of the hovered
	 *     pill, so it keeps both CSS :hover and any JS mouseleave handler alive
	 *     while the pointer crosses. It only exists WHILE hovering, so it never
	 *     blocks clicks on the nav row underneath when the menu is closed —
	 *     which a permanently-present bridge would.
	 *
	 *     If any gap survives, raise --gl-cat-bridge; that is the only value to
	 *     tune. Keep it under ~40px or it will start covering the panel's first
	 *     menu item.
	 */
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent:hover::after,
	.elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent:focus-within::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: var(--gl-cat-bridge);
		/* Behind the panel so it can never swallow a click on a menu item, but
		   still in front of the page, so it receives the pointer on the way
		   down. */
		z-index: -1;
	}

	/* ---- 2.4 Search field (injected by gl-search.js) ---- */

	.gl-header-search {
		width: 100%;
	}
	.gl-header-search .gl-search-form {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: none;
		height: var(--gl-hdr-h);
		padding: 0 20px 0 56px;
		border: 1px solid var(--gl-line);
		border-radius: var(--gl-radius-pill);
		background: #ffffff;
		box-shadow: var(--gl-shadow-sm);
		box-sizing: border-box;
		overflow: hidden;
	}
	.gl-header-search .gl-search-input {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		font-family: var(--gl-font);
		font-size: 18px;
		font-weight: 400;
		color: var(--gl-ink-strong);
		/* Safari zooms the page on focus below 16px; 18px is safe. */
		-webkit-appearance: none;
		appearance: none;
	}
	.gl-header-search .gl-search-input:focus {
		outline: none;
		box-shadow: none;
	}
	.gl-header-search .gl-search-input::placeholder {
		color: var(--gl-ink-placeholder);
		opacity: 1;
	}
	/* Safari renders a native clear affordance that collides with the pill. */
	.gl-header-search .gl-search-input::-webkit-search-decoration,
	.gl-header-search .gl-search-input::-webkit-search-cancel-button,
	.gl-header-search .gl-search-input::-webkit-search-results-button {
		-webkit-appearance: none;
		appearance: none;
	}
	.gl-header-search .gl-search-submit {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 100%;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--gl-ink-placeholder);
		cursor: pointer;
	}
	.gl-header-search .gl-search-form:focus-within {
		border-color: var(--gl-green);
		box-shadow: 0 0 0 3px rgba(0, 191, 31, 0.12);
	}

	/* ---- 2.5 Circular icon buttons: account / wishlist / cart ---- */

	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account .elementor-button,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-button,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 47px;
		height: 47px;
		min-width: 47px;
		padding: 0;
		border: 1px solid var(--gl-line);
		border-radius: 50%;
		background: #ffffff;
		color: var(--gl-ink-strong);
		box-shadow: var(--gl-shadow-sm);
		transition: border-color 0.15s ease, color 0.15s ease;
	}
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account .elementor-button:hover,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-button:hover,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button:hover {
		border-color: var(--gl-green);
		color: var(--gl-green);
	}
	/* Icon-only: the design has no labels next to the circles. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account .button-text,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .button-text {
		display: none;
	}
	.etheme-elementor-header-sticky > .e-con-inner .elementor-button-icon {
		font-size: 22px;
		line-height: 1;
	}
	/* Wishlist glyph is the only red accent in the row, per the design. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-button-icon {
		color: #ef4444;
	}
	/* Quantity bubbles become dots. Count text stays for screen readers. */
	.etheme-elementor-header-sticky > .e-con-inner .elementor-button-icon-qty,
	.etheme-elementor-header-sticky > .e-con-inner .etheme-elementor-off-canvas__toggle-qty {
		position: absolute;
		top: -1px;
		right: -1px;
		width: 15px;
		height: 15px;
		min-width: 0;
		padding: 0;
		border: 2px solid #ffffff;
		border-radius: 50%;
		background: var(--gl-green);
		font-size: 0;
		line-height: 0;
		color: transparent;
	}
	.etheme-elementor-header-sticky > .e-con-inner .elementor-button-icon-qty:empty,
	.etheme-elementor-header-sticky > .e-con-inner .elementor-button-icon-qty[data-counter="0"] {
		display: none;
	}
	.etheme-elementor-header-sticky > .e-con-inner .elementor-button-wrapper,
	.etheme-elementor-header-sticky > .e-con-inner .elementor-menu-cart__toggle {
		position: relative;
	}

	/* ---- 2.6 Nav row ---- */

	.elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 8px;
	}
	.elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item {
		font-family: var(--gl-font);
		font-size: 18px;
		font-weight: 500;
		line-height: 24px;
		color: var(--gl-ink);
	}
	.elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item {
		display: flex;
		align-items: center;
		height: 37px;
		padding: 0 16px;
		border-radius: 87px;
		color: inherit;
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	.elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item:hover {
		color: var(--gl-green);
	}
	/* Active item: filled green pill. */
	.elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item.elementor-item-active {
		background: var(--gl-green);
		color: var(--gl-green-ink);
	}
	/* The theme's underline pointer fights the pill — drop it on this row. */
	.elementor-widget-theme-etheme_mega_menu .e--pointer-underline .elementor-item:before,
	.elementor-widget-theme-etheme_mega_menu .e--pointer-underline .elementor-item:after {
		display: none;
	}
	.elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item-separator-wrapper {
		display: none;
	}

	/* ---- 2.7 Suppress the legacy search band ---- */

	/* gl-search.js now mounts into the header. This rule is a safety net for
	   the window where LiteSpeed is still serving a pre-deploy JS bundle that
	   injects the old band (see the stale-bundle defect in the search notes). */
	.gl-searchbar-band {
		display: none !important;
	}

	/* ---- 2.8 FIX ROUND 4: builder-CSS overrides ----
	 *
	 * Elementor emits per-widget CSS at the same specificity as ours but later
	 * in the cascade, so the icon buttons kept the template's 2px #007700 /
	 * 10px-radius rectangles and the nav items lost their padding. These are
	 * the few properties that have to win outright; !important is scoped to
	 * exactly those declarations rather than applied across the file.
	 */

	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account .elementor-button,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-button,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 47px !important;
		height: 47px !important;
		min-width: 47px !important;
		min-height: 47px !important;
		padding: 0 !important;
		border: 1px solid var(--gl-line) !important;
		border-radius: 50% !important;
		background: #ffffff !important;
		color: var(--gl-ink-strong) !important;
		box-shadow: var(--gl-shadow-sm);
	}
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account .elementor-button:hover,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-button:hover,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button:hover {
		border-color: var(--gl-green) !important;
		color: var(--gl-green) !important;
	}
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-button-icon {
		color: #ef4444 !important;
	}

	/* Nav items: pill needs real horizontal padding to be a pill and not a
	   circle around clipped text. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item {
		display: inline-flex !important;
		align-items: center;
		width: auto !important;
		height: 37px !important;
		padding: 0 16px !important;
		white-space: nowrap;
	}

	/* FIX ROUND 6 — active nav item read green-on-green.
	 *
	 * Section 2.6 already sets the filled pill and white text, and the BACKGROUND
	 * landed — but the colour did not. Elementor emits the widget's own Active
	 * and Hover colours from the template as
	 *   .elementor-element-<id> .elementor-item.elementor-item-active { color: … }
	 * which is the same specificity as ours but loads later, so it wins on order.
	 * It sets no background, which is exactly why the pill appeared while the
	 * label stayed green. Only the two colours need to win outright.
	 */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item.elementor-item-active,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item.elementor-item-active:hover,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item.current-menu-item .elementor-item {
		background-color: var(--gl-green) !important;
		color: var(--gl-green-ink) !important;   /* white on the green pill */
	}
	/* Hover on the ACTIVE pill: keep white text and darken the fill instead —
	   green-on-green would reintroduce the same unreadable state. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item.elementor-item-active:hover {
		background-color: #00a91c !important;
	}
	/* Hover on every OTHER item: the lighter brand green (#00bf1f). */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item:hover,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_mega_menu .etheme-elementor-nav-menu-item .elementor-item:focus-visible {
		color: var(--gl-green) !important;
	}

	/* Categories pill: the label span inherits the template's black. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .elementor-item,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .et-icon,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .etheme-elementor-nav-menu-item-arrow {
		color: #ffffff !important;
		text-decoration: none !important;
		font-size: 18px !important;
	}

	/* ---- 2.9 FIX ROUND 5 ---- */

	/* The three icon widgets carried their own padding/width from the template
	   (55px, 58px, 60px), which is what made the gaps look uneven even with a
	   fixed grid gap. Pin them to the button size. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart {
		width: 47px !important;
		min-width: 47px !important;
		max-width: 47px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Sept 2026 QA ("cart has more padding than the buttons next to it"):
	   measured at 1440 the account button sat 8px right of its widget box —
	   Elementor's per-element CSS puts margin-left:8px on that widget's
	   .elementor-widget-container — so account→wishlist read as 4px while
	   wishlist→cart was the intended 12px. Pin the inner containers too. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account .elementor-widget-container,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-widget-container,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart .elementor-widget-container {
		width: 47px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Anchor the count badges to the 47px circle itself. The wishlist badge was
	   resolving against a wider ancestor, which pushed it off to the left of
	   the heart instead of sitting top-right like the cart's. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_account .elementor-button,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_wishlist .elementor-button,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button {
		position: relative !important;
		overflow: visible !important;
	}
	.elementor-location-header .etheme-elementor-header-sticky .elementor-button-icon-qty {
		top: -2px !important;
		right: -2px !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
	}

	/* Categories pill: hamburger glyph, no tile behind it, no underline. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent,
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent * {
		text-decoration: none !important;
		border-bottom: 0 !important;
	}
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .etheme-elementor-nav-menu-item-icon {
		background: none !important;
		background-color: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		width: auto !important;
		height: auto !important;
		box-shadow: none !important;
	}
	/* Swap the theme's shopping-bag glyph for the design's 3-stack icon. The
	   icon font character is suppressed and replaced with a masked SVG so the
	   colour still follows currentColor. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .et-icon::before {
		content: "" !important;
	}
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-parent .et-icon {
		display: block !important;
		width: 18px !important;
		height: 18px !important;
		background-color: currentColor !important;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	/* One chevron only — the widget ships an opened and a closed state. */
	.elementor-location-header .etheme-elementor-header-sticky .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu-item-icon-opened {
		display: none !important;
	}

	/* Mobile-only components stay out of the desktop DOM flow. */
	.gl-mheader,
	.gl-drawer,
	.gl-fnav {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 3. Mobile / tablet (<= 1024px)
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* The Elementor header is replaced by the mobile bar at this width. It is
	   NOT display:none any more (Sept 2026): the side cart the mobile cart
	   buttons open is Elementor's Menu Cart widget inside this header, and a
	   position:fixed panel cannot paint under a display:none ancestor. So the
	   header is collapsed to nothing — zero height, out of flow, invisible,
	   inert — and only the shown cart panel is made visible again below. */
	.elementor-location-header {
		display: block !important; /* beats Elementor's responsive hide + any stale bundle */
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		visibility: hidden;
		pointer-events: none;
		/* No z-index here: a value would open a stacking context and trap the
		   cart panel (z 9998) underneath the page content that follows. */
		z-index: auto !important;
	}
	/* The desktop row itself is hidden by Elementor's responsive setting at
	   this width (display:none on the sticky section) — same problem one level
	   down, same treatment. */
	.elementor-location-header .etheme-elementor-header-sticky {
		display: block !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		visibility: hidden;
	}
	.elementor-location-header .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown .elementor-menu-cart__container,
	.elementor-location-header .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown .elementor-menu-cart__container * {
		visibility: visible;
		pointer-events: auto;
	}
	/* The panel lives inside XStore's .page-wrapper (position:relative;
	   z-index:1), so its z-index 9998 only counts within that context — the
	   mobile bar (z 300) and floating nav sit outside it and would paint on
	   top. While the cart is open, drop both beneath the wrapper. */
	body:has(.elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown) .gl-mheader,
	body:has(.elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown) .gl-fnav {
		z-index: 0;
	}
	.etheme-elementor-header-wrapper-spacer,
	.gl-searchbar-band {
		display: none !important;
	}

	/* XStore ships its own fixed bottom panel (shop / cart / wishlist /
	   account). The floating nav replaces it — without this you get two
	   stacked bottom bars. */
	.et-mobile-panel-wrapper,
	.etheme-sticky-panel.pos-fixed.bottom {
		display: none !important;
	}

	/* ---- 3.1 Mobile bar ---- */

	.gl-mheader {
		position: sticky;
		top: 0;
		z-index: 300;
		display: block;
		padding: 0 16px 16px;
		background: #ffffff;
		box-shadow: var(--gl-shadow-sm);
		box-sizing: border-box;
	}
	.gl-mheader__bar {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 64px;
	}
	.gl-mheader__burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 44px;
		margin-left: -8px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--gl-ink-strong);
		cursor: pointer;
		/* Stops iOS Safari flashing a grey box on tap. */
		-webkit-tap-highlight-color: transparent;
	}
	.gl-mheader__logo {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		text-decoration: none;
	}
	.gl-mheader__logo-img {
		max-width: 158px;
		height: auto;
		max-height: 34px;
		width: auto;
	}
	.gl-mheader__cart {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border: 1px solid var(--gl-line);
		border-radius: 50%;
		background: #ffffff;
		color: var(--gl-ink-strong);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	/* ---- 3.2 Mobile search ---- */

	.gl-mheader__search .gl-search-form {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: none;
		height: 46px;
		margin: 0;
		padding: 0 44px 0 44px;
		border: 1px solid var(--gl-line);
		border-radius: var(--gl-radius-pill);
		background: #ffffff;
		box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
	}
	.gl-search-form__icon {
		position: absolute;
		left: 16px;
		top: 50%;
		display: flex;
		transform: translateY(-50%);
		color: var(--gl-ink-placeholder);
		pointer-events: none;
	}
	.gl-mheader__search .gl-search-input {
		width: 100%;
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		font-family: var(--gl-font);
		/* Must stay >= 16px: anything smaller makes iOS Safari zoom on focus
		   and the user is left in a zoomed viewport with no way back. */
		font-size: 16px;
		color: var(--gl-ink-strong);
		-webkit-appearance: none;
		appearance: none;
	}
	.gl-mheader__search .gl-search-input:focus {
		outline: none;
		box-shadow: none;
	}
	.gl-mheader__search .gl-search-input::placeholder {
		color: var(--gl-ink-placeholder);
		opacity: 1;
		font-size: 14px;
	}
	.gl-mheader__search .gl-search-input::-webkit-search-decoration,
	.gl-mheader__search .gl-search-input::-webkit-search-cancel-button,
	.gl-mheader__search .gl-search-input::-webkit-search-results-button {
		-webkit-appearance: none;
		appearance: none;
	}
	/* The trailing control is the submit. Rotating the chevron makes it read
	   as "go" instead of repeating the magnifier already at the left. */
	.gl-mheader__search .gl-search-submit .gl-ico {
		transform: rotate(-90deg);
	}
	.gl-mheader__search .gl-search-submit {
		position: absolute;
		right: 4px;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--gl-ink-placeholder);
		cursor: pointer;
	}

	/* ---- 3.3 Drawer ---- */

	.gl-drawer {
		position: fixed;
		inset: 0;
		z-index: 400;
	}
	.gl-drawer[hidden] {
		display: none;
	}
	.gl-drawer__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		transition: opacity 0.22s ease;
	}
	.gl-drawer__panel {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		width: 280px;
		max-width: 86vw;
		height: 100%;
		background: #ffffff;
		box-shadow: var(--gl-shadow-drawer);
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		/* iOS momentum scrolling inside the panel only. */
		overscroll-behavior: contain;
	}
	.gl-drawer.is-open .gl-drawer__backdrop {
		opacity: 1;
	}
	.gl-drawer.is-open .gl-drawer__panel {
		transform: translateX(0);
	}
	.gl-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 16px;
		border-bottom: 1px solid var(--gl-line-soft);
	}
	.gl-drawer__logo-img {
		max-width: 158px;
		max-height: 34px;
		width: auto;
		height: auto;
	}
	.gl-drawer__close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--gl-field);
		color: var(--gl-ink-body);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.gl-drawer__body {
		flex: 1 1 auto;
		padding-bottom: 24px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gl-drawer__cats {
		padding: 16px;
		border-bottom: 1px solid var(--gl-line-soft);
	}
	.gl-drawer__cats-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 12px 16px;
		border: 0;
		border-radius: var(--gl-radius-field);
		background: var(--gl-green);
		color: var(--gl-green-ink);
		font-family: var(--gl-font);
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
		cursor: pointer;
		box-shadow: var(--gl-shadow-sm);
		-webkit-tap-highlight-color: transparent;
	}
	.gl-drawer__cats-label {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.gl-drawer__cats-toggle .gl-ico--chevron {
		transition: transform 0.18s ease;
	}
	.gl-drawer__cats-toggle[aria-expanded="true"] .gl-ico--chevron {
		transform: rotate(180deg);
	}
	.gl-drawer__cats-list {
		margin: 8px 0 0;
		padding: 0;
		list-style: none;
	}
	.gl-drawer__cats-list[hidden] {
		display: none;
	}
	.gl-drawer__cats-list a {
		display: block;
		padding: 10px 16px;
		border-radius: 8px;
		color: var(--gl-ink-body);
		font-size: 15px;
		text-decoration: none;
	}
	.gl-drawer__cats-list a:hover {
		background: var(--gl-green-soft);
		color: var(--gl-green);
	}
	.gl-drawer__nav {
		margin: 0;
		padding: 8px;
		list-style: none;
	}
	.gl-drawer__nav li {
		margin: 0 0 4px;
	}
	.gl-drawer__link {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		border-radius: 8px;
		color: var(--gl-ink-body);
		font-family: var(--gl-font);
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
		text-decoration: none;
	}
	.gl-drawer__link-ico {
		display: flex;
		flex: 0 0 20px;
		justify-content: center;
		color: currentColor;
	}
	.gl-drawer__link.is-current {
		background: var(--gl-green-soft);
		color: var(--gl-green);
		font-weight: 600;
	}

	/* ---- 3.4 Floating bottom nav ---- */

	.gl-fnav {
		position: fixed;
		left: 50%;
		bottom: 18px;
		z-index: 350;
		width: min(336px, calc(100% - 40px));
		transform: translateX(-50%);
		border-radius: var(--gl-radius-pill);
		background: #ffffff;
		box-shadow: var(--gl-shadow-fnav);
		/* Keeps the bar clear of the iOS home indicator. */
		margin-bottom: env(safe-area-inset-bottom, 0px);
	}
	.gl-fnav__list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 56px;
		margin: 0;
		padding: 8px;
		list-style: none;
	}
	.gl-fnav__item {
		flex: 1 1 0;
		display: flex;
		justify-content: center;
		margin: 0;
	}
	.gl-fnav__link {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		color: var(--gl-ink-strong);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.gl-fnav__link.is-current {
		background: var(--gl-green);
		color: var(--gl-green-ink);
	}

	/* Stop the floating bar covering the end of the page, the mobile filter
	   actions and any sticky add-to-cart row. */
	body.gl-has-mobile-nav {
		padding-bottom: calc(var(--gl-fnav-h) + 18px + env(safe-area-inset-bottom, 0px));
	}

}

/* Scroll lock while the drawer is open.
   overflow:hidden alone does not hold on iOS Safari, so the body is pinned
   instead; gl-header.js writes the negative `top` and restores scroll on
   close. Outside the media query so a stuck lock can never survive a resize
   past the breakpoint. */
html.gl-scroll-locked {
	overflow: hidden;
}
html.gl-scroll-locked body {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 4. Shared
 * ---------------------------------------------------------------------- */

/* Cart count bubble (Sept 2026 — was a bare dot). Grows with the number,
   stays a circle at one digit. Hidden when the cart is empty. */
.gl-cart-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 9px;
	background: #00b327;
	color: #ffffff;
	font-family: var(--gl-font, inherit);
	font-size: 11px;
	line-height: 18px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0;
	box-shadow: 0 0 0 2px #ffffff;
	pointer-events: none;
}
.gl-cart-badge__n {
	display: block;
}

/* Empty cart message — side cart (Elementor / XStore mini cart) and cart page.
   Centred in the panel: the panel body becomes a flex column and the message
   takes the free height, so it sits in the middle regardless of panel height
   (10 Sept QA: it was pinned to the top). */
.elementor-menu-cart__main,
.etheme-elementor-off-canvas__main {
	display: flex;
	flex-direction: column;
}
.elementor-menu-cart__main .widget_shopping_cart_content:has(.gl-cart-empty),
.etheme-elementor-off-canvas__main .widget_shopping_cart_content:has(.gl-cart-empty) {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}
.gl-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 24px;
	text-align: center;
	font-size: 15px;
	line-height: 22px;
	color: var(--gl-ink-body, #374151);
}
.gl-cart-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #e7f4e6;
	color: var(--gl-green, #00bf1f);
}
.gl-cart-empty p {
	margin: 0;
}
.gl-cart-empty__link,
.cart-empty .gl-cart-empty__link {
	color: var(--gl-green, #00bf1f);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gl-cart-empty__link:hover {
	color: #00a91c;
}
.gl-cart-badge.is-empty {
	display: none;
}
.gl-fnav__link .gl-cart-badge {
	top: 3px;
	right: 3px;
}

.gl-ico {
	flex: 0 0 auto;
	display: block;
}

/* Visually hidden but readable by assistive tech. Namespaced so it does not
   collide with the theme's own .screen-reader-text rules. */
.gl-mheader .screen-reader-text,
.gl-fnav .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(.gl-mheader, .gl-drawer, .gl-fnav) button:focus-visible,
:where(.gl-mheader, .gl-drawer, .gl-fnav) a:focus-visible {
	outline: 2px solid var(--gl-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gl-drawer__panel,
	.gl-drawer__backdrop,
	.gl-drawer__cats-toggle .gl-ico--chevron {
		transition: none;
	}
}

@media print {
	.gl-mheader,
	.gl-drawer,
	.gl-fnav {
		display: none !important;
	}
}