/* =========================================================================
   Green Lion — Sitewide search (dropdown + results page)
   Palette: primary #3aaa35 · light btn #82c781 · filter bg #e9ffed
            row bg #e7f4e6 · dark #1b1e21 · price grey #606060
   ========================================================================= */

/* ---------- Standalone search bar ([gl_search]) ---------- */
.gl-search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 520px;
	background: #fff;
	border: 2px solid #3aaa35;
	border-radius: 30px;
	overflow: hidden;
}
.gl-search-form .gl-search-input {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 11px 16px;
	font-size: 15px;
	color: #1b1e21;
	min-width: 0;
}
.gl-search-form .gl-search-submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 100%;
	min-height: 42px;
	border: 0;
	background: #3aaa35;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.gl-search-form .gl-search-submit:hover { background: #2e8b2a; }
/* The theme's global SVG rules collapse our icon to width:0 — force its size. */
.gl-search-form .gl-search-submit svg,
.gl-offcanvas-search .gl-search-submit svg {
	width: 18px !important;
	height: 18px !important;
	display: block;
	flex: 0 0 auto;
}
.gl-search-form .gl-search-submit { flex: 0 0 auto; }

/* ---------- Full-width header search band (Desktop A + Mobile A) ---------- */
.gl-searchbar-band {
	width: 100%;
	background: #e9ffed;            /* filter bar green */
	border-bottom: 1px solid #d6ead4;
	box-sizing: border-box;
}
.gl-searchbar-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 16px;
	box-sizing: border-box;
}
/* The band's form stretches full width of the inner wrapper. */
.gl-searchbar-band .gl-search-form { max-width: 100%; }

/* Mobile: slimmer band so it doesn't eat vertical space under the logo. */
@media (max-width: 768px) {
	.gl-searchbar-inner { padding: 8px 12px; }
	.gl-searchbar-band .gl-search-input { padding: 9px 14px; font-size: 14px; }
	.gl-searchbar-band .gl-search-submit { min-height: 38px; width: 40px; }
}

/* ---------- Search pinned to top of hamburger off-canvas menu ---------- */
.gl-offcanvas-search {
	padding: 12px;
	border-bottom: 1px solid #e3e7e3;
	background: #fff;
	box-sizing: border-box;
}
.gl-offcanvas-search .gl-search-form { max-width: 100%; }

/* ---------- Dropdown (appended to body) ---------- */
.gl-search-dd {
	position: absolute;
	z-index: 99999;
	background: #fff;
	border: 1px solid #d6ead4;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(27, 30, 33, .16);
	max-height: 70vh;
	overflow-y: auto;
	padding: 6px 0;
	font-size: 14px;
	color: #1b1e21;
	-webkit-overflow-scrolling: touch;
	/* JS sets an explicit width (see positionDropdown). These are the belt-and-
	   braces bounds for the window before JS has measured, and for any future
	   caller that shows the panel without positioning it: the dropdown must
	   never track the search field down to a skinny column. */
	box-sizing: border-box;
	min-width: min(420px, calc(100vw - 16px));
	max-width: calc(100vw - 16px);
}

.gl-dd-group { padding: 4px 0; }
.gl-dd-group + .gl-dd-group { border-top: 1px solid #eef6ed; }
.gl-dd-head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3aaa35;
	padding: 8px 16px 4px;
}

/* Result rows */
.gl-dd-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	text-decoration: none;
	color: #1b1e21;
	cursor: pointer;
}
.gl-dd-item:hover,
.gl-dd-item.gl-dd-active { background: #e7f4e6; }

.gl-dd-thumb {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 6px;
	background: #f4faf3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.gl-dd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gl-dd-thumb-empty { background: #eef6ed; }

.gl-dd-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.gl-dd-name {
	display: block;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gl-dd-sub {
	display: block;
	font-size: 12px;
	color: #606060;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gl-dd-price {
	flex: 0 0 auto;
	margin-left: auto;      /* pin to the right edge even on rows with no sub-line */
	padding-left: 12px;     /* never let the price touch a long product name */
	text-align: right;
	font-weight: 700;
	color: #1b1e21;
	white-space: nowrap;
}
.gl-dd-price .amount { color: #1b1e21; }

.gl-dd-item mark,
.gl-dd-dym mark { background: #ddfe00; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Brand row a touch larger thumb */
.gl-dd-brand .gl-dd-thumb { width: 46px; }
.gl-dd-cat .gl-dd-thumb { width: 46px; }

/* Chips (popular / recent / brands / did-you-mean) */
.gl-dd-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.gl-dd-chip {
	display: inline-block;
	border: 1px solid #cfe9cd;
	background: #f4faf3;
	color: #1b1e21;
	border-radius: 16px;
	padding: 5px 12px;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
}
.gl-dd-chip:hover { background: #3aaa35; border-color: #3aaa35; color: #fff; }

.gl-dd-dym {
	padding: 8px 16px;
	font-size: 13px;
	color: #606060;
	border-bottom: 1px solid #eef6ed;
}
.gl-dd-dym .gl-dd-chip { padding: 2px 10px; }

.gl-dd-viewall {
	display: block;
	text-align: center;
	padding: 11px 16px;
	margin-top: 4px;
	font-weight: 700;
	color: #fff;
	background: #3aaa35;
	text-decoration: none;
	border-radius: 0 0 11px 11px;
	position: sticky;
	bottom: 0;
}
.gl-dd-viewall:hover { background: #2e8b2a; }

.gl-dd-empty { padding: 16px; text-align: center; color: #606060; }

/* ---------- Full results page ---------- */
.gl-search-results { max-width: 1320px; margin: 0 auto; padding: 24px 16px 60px; }
.gl-sr-head { margin-bottom: 22px; }
.gl-sr-form { margin: 0 auto 18px; }
.gl-sr-title { font-size: 22px; font-weight: 700; color: #1b1e21; margin: 6px 0; }
.gl-sr-dym { color: #606060; font-size: 14px; }
.gl-sr-dym a { color: #3aaa35; font-weight: 700; text-decoration: underline; }

.gl-sr-section { margin-top: 30px; }

/* Group filter tabs (replaces the in-page search bar). */
.gl-sr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gl-sr-tab {
	border: 1px solid #cfe9cd;
	background: #fff;
	color: #1b1e21;
	border-radius: 30px;
	padding: 7px 16px;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gl-sr-tab:hover { border-color: #3aaa35; }
.gl-sr-tab.is-active { background: #3aaa35; border-color: #3aaa35; color: #fff; }
.gl-sr-tab .gl-sr-tab-n { opacity: .75; font-size: 13px; }

/* Results grid must NEVER be collapsed.
   shop-page.js auto-collapses every .type-container on ≤768px by setting an
   inline display:none on .loadData. The search page reuses that markup but has
   no .filter-child group header to re-open it, so on mobile every result
   vanished and the page read as "blocked off". shop-page.js now skips
   body.gl-search-page, but this rule is the failsafe: it also holds when a
   stale LiteSpeed/CDN JS bundle serves the old script, and it survives future
   edits to shop-page.js. A stylesheet !important beats the inline style. */
.gl-search-results .product-list .loadData,
.gl-search-results .type-container .loadData {
	display: grid !important;
}

/* Variation tiles (Flavours & Strengths) reuse the shop card markup, and the
   shop card rules in style.css are nested six classes deep
   (.shop-page-new .product-list ul.loadData li.product-card …, 0,6,2). The
   earlier .gl-search-results .product-card override (0,3,0) never won, which
   is why HOT labels still hung off the tile edge and — logged in — the
   qty stepper + cart button row spilled past the right edge (row 217px, tile
   201px at 1440). These carry the full chain plus the results wrapper so
   they out-specify style.css without !important. */
.gl-search-results.shop-page-new .product-list ul.loadData li.product-card .img .labels {
	top: 8px;
	left: 8px;
	right: auto;
}
.gl-search-results.shop-page-new .product-list ul.loadData li.product-card .img .label-two {
	margin: 0;
}
/* Add-to-cart row: keep inside the tile. toggle 31 + stepper 92 + gaps 12 +
   cart 36 + padding 20 = 191px, under the narrowest desktop tile (~200px). */
.gl-search-results.shop-page-new .product-list ul.loadData li.product-card .addToCart {
	box-sizing: border-box;
	padding-right: 10px;
	flex-wrap: nowrap;
}
.gl-search-results.shop-page-new .product-list ul.loadData li.product-card .addToCart .input-wrapper {
	flex: 0 0 92px;
	width: 92px;
	min-width: 0;
	margin: 0 6px;
}
.gl-search-results.shop-page-new .product-list ul.loadData li.product-card .addToCart .input-wrapper > * {
	width: auto;
	min-width: 0;
	flex: 1 1 0;
}
.gl-search-results.shop-page-new .product-list ul.loadData li.product-card .addToCart .input-wrapper input[type="number"] {
	padding: 10px 2px;
}
.gl-search-results.shop-page-new .product-list ul.loadData li.product-card .addToCart .toggle-item {
	min-width: 0;
}
.gl-sr-section-title {
	font-size: 16px;
	font-weight: 700;
	color: #1b1e21;
	border-bottom: 2px solid #e7f4e6;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.gl-sr-count { color: #606060; font-weight: 500; font-size: 14px; }

.gl-sr-empty { padding: 40px 0; text-align: center; color: #606060; }

/* Brand grid */
.gl-sr-brand-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px;
}
.gl-sr-brand-card {
	border: 1px solid #e7f4e6; border-radius: 10px; background: #fff;
	text-align: center; transition: box-shadow .15s ease, border-color .15s ease;
}
.gl-sr-brand-card:hover { border-color: #3aaa35; box-shadow: 0 6px 16px rgba(58,170,53,.14); }
.gl-sr-brand-card.featured { border-color: rgb(227,102,0); box-shadow: 0 0 0 2px rgba(227,102,0,.18); }
.gl-sr-brand-card a { display: block; padding: 14px 10px; text-decoration: none; color: #1b1e21; }
.gl-sr-brand-card img { max-width: 100%; height: 60px; object-fit: contain; display: block; margin: 0 auto 6px; }
.gl-sr-brand-label { display: block; font-size: 13px; font-weight: 600; }

/* Product grid */
.gl-sr-product-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.gl-sr-product-card {
	border: 1px solid #e7f4e6; border-radius: 10px; background: #fff;
}
.gl-sr-product-card:hover { border-color: #3aaa35; }
.gl-sr-product-card a { display: block; padding: 14px; text-decoration: none; color: #1b1e21; text-align: center; }
.gl-sr-product-card img { max-width: 100%; height: 110px; object-fit: contain; margin-bottom: 8px; }
.gl-sr-product-name { display: block; font-weight: 600; font-size: 14px; }
.gl-sr-product-brand { display: block; font-size: 12px; color: #606060; }

/* ---------- Dropdown extras: see-more / from-price / coming soon ---------- */
.gl-dd-seemore {
	display: block;
	padding: 7px 16px 9px;
	font-size: 13px;
	font-weight: 700;
	color: #3aaa35;
	text-decoration: none;
}
.gl-dd-seemore:hover { text-decoration: underline; color: #2e8b2a; }
.gl-dd-from { font-weight: 500; font-size: 12px; color: #606060; }
.gl-dd-price.gl-dd-coming {
	font-size: 12px;
	font-weight: 700;
	color: #ff7a00;                 /* HOT orange — matches shop Coming Soon tone */
	text-transform: uppercase;
	letter-spacing: .03em;
}
.gl-dd-var-coming .gl-dd-thumb,
.gl-dd-var-coming .gl-dd-text { opacity: .65; }

/* Logged-out price slot: "Login to see £" (incl. coming-soon/OOS items).
 *
 * This rule was always here and always green — the label just never reached it.
 * It used to be rendered as <span class="gl-dd-login"><a href>…</a></span>
 * INSIDE the row, and every row is itself an <a class="gl-dd-item">. HTML
 * forbids nested anchors, so the parser's adoption-agency step hoisted the
 * inner <a> — with all the text — OUT to become a sibling of the row, leaving
 * this span empty and zero-width. The escaped link matched no rule here, which
 * is why it rendered as a bare dark line at the group's left edge instead of
 * green in the price slot. gl-search.js no longer emits the inner anchor.
 *
 * The `a` selector is retained deliberately: it keeps the label styled and in
 * place during the window where LiteSpeed is still serving the old JS bundle.
 */
.gl-dd-price.gl-dd-login,
.gl-dd-price.gl-dd-login a {
	font-size: 12px;
	font-weight: 700;
	color: var(--gl-green, #3aaa35);
	text-decoration: none;
}
.gl-dd-price.gl-dd-login a:hover { text-decoration: underline; }

/* "From £x" on results-page product cards */
.gl-sr-product-price {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #1b1e21;
}
.gl-sr-product-price .amount { color: #1b1e21; }

/* ---------- Results page heading ---------- */

.gl-sr-eyebrow {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--gl-ink-muted, #6b7280);
}
.gl-sr-title .gl-sr-term { color: var(--gl-green, #00bf1f); }

@media (max-width: 768px) {
	.gl-sr-eyebrow { font-size: 12px; line-height: 16px; }
}

/* ---------- Results page "Refine Search card" ----------
 * Desktop (>=769px): a white card above the results. Changing a select applies
 *   immediately (reload), so the card has no Apply button.
 * Mobile  (<=768px): the card collapses behind a "Refine Search / filters" bar
 *   and expands INLINE beneath it — not an overlay. Selects stage locally and
 *   Apply Filters commits them, so one reload applies the whole set.
 *
 * The 768px split must stay in step with MOBILE_BP in gl-search.js: the JS uses
 * it to decide apply-on-change vs stage-until-Apply.
 *
 * Colours come from gl-header.css (--gl-green et al) with literal fallbacks so
 * this file still renders correctly if it is ever served on its own.
 */

.gl-sr-filterbar {
	margin: 0 0 24px;
	padding: 25px;
	border: 1px solid var(--gl-line-soft, #f3f4f6);
	border-radius: var(--gl-radius-card, 16px);
	background: #fff;
	box-shadow: var(--gl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));
	box-sizing: border-box;
}

.gl-sr-filterbar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
}

.gl-sr-filterbar-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	color: var(--gl-ink-strong, #1f2937);
}
.gl-sr-filterbar-title .gl-sr-fico { color: var(--gl-green, #00bf1f); flex: 0 0 auto; }

.gl-sr-fclear {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--gl-ink-muted, #6b7280);
	text-decoration: none;
}
.gl-sr-fclear:hover,
.gl-sr-fclear:focus-visible { color: var(--gl-ink-strong, #1f2937); text-decoration: underline; }

.gl-sr-fgrid {
	display: grid;
	/* auto-fit, not repeat(5): facets only render when they have options for
	   the current query, so a 4-facet result must not leave a dead column. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px 46px;
}

.gl-sr-fselect {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.gl-sr-flabel {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--gl-green, #00bf1f);
}

.gl-sr-fselect select {
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 11px 41px 11px 17px;
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: var(--gl-radius-field, 12px);
	background-color: var(--gl-field, #f9fafb);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--gl-ink-body, #374151);
	box-sizing: border-box;
	cursor: pointer;
	/* Safari and Firefox both draw their own control chrome without this. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.gl-sr-fselect select::-ms-expand { display: none; }
.gl-sr-fselect select:hover { border-color: var(--gl-green, #00bf1f); }
.gl-sr-fselect select:focus-visible {
	outline: none;
	border-color: var(--gl-green, #00bf1f);
	box-shadow: 0 0 0 3px rgba(0, 191, 31, .12);
}

/* Dependent filtering: a dimension with nothing available for the current
   result set greys out entirely. Do not remove — this is the visible half of
   the contextual facet counts. */
.gl-sr-fselect.is-disabled { opacity: .45; }
.gl-sr-fselect.is-disabled select { cursor: not-allowed; background-color: #f3f4f6; }
.gl-sr-fselect.is-disabled .gl-sr-flabel { color: #9aa19a; }
.gl-sr-fselect select option:disabled { color: #b3b9b3; }

/* Desktop-only: the toggle and the staged-apply actions belong to mobile. */
.gl-sr-filters-toggle,
.gl-sr-factions { display: none; }

/* ---------- Mobile: inline expanding card ---------- */

@media (max-width: 768px) {

	.gl-sr-filters-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin: 0 0 12px;
		padding: 16px 24px;
		border: 1px solid var(--gl-line-soft, #f3f4f6);
		border-radius: var(--gl-radius-card, 16px);
		background: #fff;
		box-shadow: var(--gl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));
		font-family: inherit;
		color: var(--gl-ink-strong, #1f2937);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.gl-sr-filters-toggle__title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
	}
	.gl-sr-filters-toggle__title .gl-sr-fico { color: var(--gl-green, #00bf1f); flex: 0 0 auto; }
	.gl-sr-filters-toggle__meta {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: var(--gl-ink-muted, #6b7280);
	}
	.gl-sr-filters-toggle .gl-sr-fchev { transition: transform .18s ease; flex: 0 0 auto; }
	.gl-sr-filters-toggle[aria-expanded="true"] .gl-sr-fchev { transform: rotate(180deg); }
	.gl-sr-filters-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 10px;
		background: var(--gl-green, #00bf1f);
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
	}

	/* Collapsed by default; expands in place. No overlay, no scroll lock —
	   the page behind stays exactly where the user left it. */
	.gl-sr-filterbar { display: none; padding: 16px 20px 20px; }
	.gl-sr-filterbar.is-open { display: block; }

	/* The heading lives in the toggle at this width. */
	.gl-sr-filterbar-head { display: none; }

	.gl-sr-fgrid { grid-template-columns: 1fr; gap: 16px; }

	.gl-sr-flabel { font-size: 12px; letter-spacing: .6px; }

	.gl-sr-fselect select {
		min-height: 44px;
		height: auto;
		padding: 13px 41px 13px 17px;
		/* Stays >= 16px: iOS Safari zooms the viewport on focus below that and
		   leaves the user zoomed in with no way back. */
		font-size: 16px;
		line-height: 20px;
	}

	.gl-sr-factions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding-top: 4px;
	}
	.gl-sr-fclear-all,
	.gl-sr-fapply {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 12px 8px;
		border-radius: var(--gl-radius-field, 12px);
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.gl-sr-fclear-all {
		border: 1px solid var(--gl-line, #e5e7eb);
		background: #fff;
		color: var(--gl-ink-muted, #6b7280);
	}
	.gl-sr-fapply {
		border: 0;
		background: var(--gl-green, #00bf1f);
		color: #fff;
		box-shadow: 0 1px 1px rgba(0, 198, 40, .3);
	}
	.gl-sr-fapply:hover { background: #00a91c; }

	/* Superseded controls. Kept as hard hides so a stale LiteSpeed bundle or a
	   cached page fragment can never resurface the old overlay chrome. */
	.gl-sr-filterbar-backdrop,
	.gl-sr-filterbar-close { display: none !important; }
	body.gl-filters-open { overflow: visible; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.gl-sr-brand-grid { grid-template-columns: repeat(5, 1fr); }
	.gl-sr-product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
	.gl-search-dd { max-height: 64vh; border-radius: 10px; }
	.gl-sr-brand-grid { grid-template-columns: repeat(3, 1fr); }
	.gl-sr-product-grid { grid-template-columns: repeat(2, 1fr); }
	.gl-sr-title { font-size: 18px; }
}
@media (max-width: 480px) {
	.gl-sr-brand-grid { grid-template-columns: repeat(2, 1fr); }
}