/**
 * Green Lion — brand / category / shop page layout (Sept 2026 redesign).
 * Figma: gl-ui-changes — harsh › Product Page (2018-505).
 *
 * Applies on body.gl-product-page (set by inc/gl-product-page.php on
 * /brand/*, /product-category/* and /shop/). Loaded after style.css and
 * gl-header.css, and every selector is prefixed with body.gl-product-page so
 * it out-specifies the nested rules in style.css without !important.
 *
 * Plain CSS — no nesting. Tokens come from gl-header.css (:root --gl-*); each
 * var() carries the literal fallback so this file also stands on its own.
 *
 * Sections
 *   1. Breadcrumb — see gl-breadcrumbs.css
 *   2. Hero row   (.gl-hero: logo card / promo banner / iwocaPay)
 *   3. Filter bar (.gl-fb)
 *   4. Group rows (.filter-parent / .filter-child) + variation cards
 *   5. Brand description card
 *   6. Tablet  (≤ 1024px)
 *   7. Mobile  (≤ 768px)
 */

/* -------------------------------------------------------------------------
 * 1. Breadcrumb — moved to assets/css/gl-breadcrumbs.css (Sept 2026 QA:
 *    the crumb style now applies on every page, not only these three).
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * 2. Hero row
 * ---------------------------------------------------------------------- */

body.gl-product-page .shop-page-new {
	padding-top: 12px;
}

body.gl-product-page .shop-page-new .gl-hero {
	display: grid;
	grid-template-columns: minmax(0, 26fr) minmax(0, 37fr) minmax(0, 37fr);
	gap: 20px;
	padding: 0;
	margin: 0 0 24px;
}

body.gl-product-page .shop-page-new .gl-hero--no-promo {
	grid-template-columns: minmax(0, 26fr) minmax(0, 37fr);
}

body.gl-product-page .shop-page-new .gl-hero--no-iwoca {
	grid-template-columns: minmax(0, 26fr) minmax(0, 74fr);
}

body.gl-product-page .shop-page-new .gl-hero--no-promo.gl-hero--no-iwoca {
	grid-template-columns: minmax(0, 26fr);
}

body.gl-product-page .shop-page-new .gl-hero-card {
	position: relative;
	display: block;
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}

/* Promo + iwoca cards fix the row height via their 487:250 aspect; the logo
   card stretches to match. */
body.gl-product-page .shop-page-new .gl-hero-promo,
body.gl-product-page .shop-page-new .gl-hero-iwoca {
	aspect-ratio: 487 / 250;
}

body.gl-product-page .shop-page-new .gl-hero--no-promo.gl-hero--no-iwoca .gl-hero-brand {
	aspect-ratio: 356 / 250;
}

body.gl-product-page .shop-page-new .gl-hero-promo img,
body.gl-product-page .shop-page-new .gl-hero-iwoca img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0;
}

body.gl-product-page .shop-page-new a.gl-hero-iwoca {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

body.gl-product-page .shop-page-new a.gl-hero-iwoca:hover {
	box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.22);
}

/* Logo card. Its contents are absolutely positioned so the card has no
   intrinsic height and simply stretches to the row height the two banner
   cards set via aspect-ratio. */
body.gl-product-page .shop-page-new .gl-hero-brand {
	min-height: 120px;
}

body.gl-product-page .shop-page-new .gl-hero-logo {
	position: absolute;
	top: 7%;
	right: 10%;
	bottom: 25%;
	left: 10%;
	display: block;
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 68%;
	margin: auto;
	object-fit: contain;
}

/* Green name tab, bottom-right, bleeding off the card edge. */
body.gl-product-page .shop-page-new .gl-hero-name {
	position: absolute;
	left: 26%;
	right: -6px;
	bottom: -6px;
	margin: 0;
	padding: 0;
	height: 21%;
	min-height: 40px;
	background: var(--gl-green, #00bf1f);
	border: 4px solid #fff;
	border-radius: 6px 0 0 0;
	box-shadow: 4px 4px 4px 3px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	overflow: hidden;
}

body.gl-product-page .shop-page-new .gl-hero-name span {
	display: block;
	padding: 0 16px 6px;
	color: #fff;
	font-size: clamp(14px, 1.7vw, 24px);
	line-height: 1.2;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
 * 3. Filter bar
 * ---------------------------------------------------------------------- */

body.gl-product-page .shop-page-new .box-collection-filter {
	padding: 0;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner {
	display: block;
	background: #fff;
	border: 1px solid var(--gl-line-soft, #f3f4f6);
	border-radius: var(--gl-radius-card, 16px);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
	padding: 22px 24px 24px;
	margin: 0 0 24px;
}

/* Head row */
body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 14px;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .collection-filter--title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	color: var(--gl-ink-strong, #1f2937);
	white-space: nowrap;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection-filter--title .gl-ico {
	color: var(--gl-green, #00bf1f);
	flex: 0 0 auto;
}

/* Global CLOSE ALL switch — lives in the head row on desktop. */
body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-closeall {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0;
}

body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-closeall .text {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--gl-ink-body, #374151);
	white-space: nowrap;
}

/* "view more / close" — mobile only. */
body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-more {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 0 4px 8px;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--gl-ink-body, #374151);
	cursor: pointer;
}

body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-more .gl-ico--close {
	display: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .gl-fb.is-open .gl-fb-more .gl-ico--chevron {
	display: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .gl-fb.is-open .gl-fb-more .gl-ico--close {
	display: block;
}

/* Body row: fields left, page search filling the rest, all bottom-aligned. */
body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-body {
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters {
	display: flex;
	flex: 0 0 auto;
	width: auto;
	gap: 20px;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container {
	position: relative;
	width: 200px;
	flex: 0 0 200px;
	cursor: default;
}

body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--gl-green, #00bf1f);
	cursor: pointer;
}

body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-select {
	position: relative;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0 40px 0 16px;
	background: var(--gl-field, #f9fafb);
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: var(--gl-radius-field, 12px);
	box-shadow: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--gl-ink-body, #374151);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container select::-ms-expand {
	display: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container select:focus {
	outline: none;
	border-color: var(--gl-green, #00bf1f);
	box-shadow: 0 0 0 3px rgba(0, 191, 31, 0.15);
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container select option {
	font-size: 15px;
	font-weight: 400;
}

/* Active (a value chosen): tint like the old bar did, keep it subtle. */
body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container.active select {
	background-color: var(--gl-green-soft, #e6f7eb);
	border-color: #c2e0cd;
	font-weight: 500;
	color: var(--gl-ink-strong, #1f2937);
}

/* Chevron by default; the X takes over when the wrapper is .active (the
   existing shop-page.js handler on .icon-container clears the filter). */
body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container .icon-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: var(--gl-ink-body, #374151);
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container .icon-container svg {
	display: none;
	width: 14px;
	height: 14px;
	max-width: 14px;
	max-height: 14px;
	margin: 0;
	background: none;
	pointer-events: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container .icon-container svg:first-child {
	display: block;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container.active .icon-container {
	pointer-events: all;
	cursor: pointer;
	z-index: 10;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container.active .icon-container svg:first-child {
	display: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container.active .icon-container svg:last-child {
	display: block;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container.active .icon-container:hover {
	color: #b91c1c;
}

/* Page search */
body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls.hide {
	display: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 0;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px 0 44px;
	background: #fff;
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: var(--gl-radius-pill, 9999px);
	box-shadow: var(--gl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
	overflow: hidden;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper:focus-within {
	border-color: var(--gl-green, #00bf1f);
	box-shadow: 0 0 0 3px rgba(0, 191, 31, 0.15);
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper .gl-ico {
	position: absolute;
	left: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: -8px;
	color: var(--gl-ink-body, #374151);
	pointer-events: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper input {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 16px;
	line-height: 24px;
	color: var(--gl-ink-strong, #1f2937);
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper input:focus {
	outline: none;
	box-shadow: none;
}

body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper input::placeholder {
	color: var(--gl-ink-placeholder, #9ca3af);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * 4. Group rows
 * ---------------------------------------------------------------------- */

/* Toggle switch — brand green everywhere on the page (global, parent, child). */
body.gl-product-page .shop-page-new .product-list .close-all .toggle,
body.gl-product-page .shop-page-new .box-collection-filter .close-all .toggle {
	width: 44px;
	height: 24px;
	flex: 0 0 auto;
	background-color: #cbd2d6;
	border-radius: 9999px;
	position: relative;
	align-self: center;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

body.gl-product-page .shop-page-new .product-list .close-all .toggle:before,
body.gl-product-page .shop-page-new .box-collection-filter .close-all .toggle:before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
	transition: left 0.25s ease;
}

body.gl-product-page .shop-page-new .product-list .close-all .toggle:after,
body.gl-product-page .shop-page-new .box-collection-filter .close-all .toggle:after {
	content: none;
}

body.gl-product-page .shop-page-new .product-list .close-all.active .toggle,
body.gl-product-page .shop-page-new .box-collection-filter .close-all.active .toggle {
	background-color: var(--gl-green, #00bf1f);
}

body.gl-product-page .shop-page-new .product-list .close-all.active .toggle:before,
body.gl-product-page .shop-page-new .box-collection-filter .close-all.active .toggle:before {
	left: 22px;
}

body.gl-product-page .shop-page-new .product-list {
	margin-bottom: 0;
}

/* Parent (category on brand pages / brand on category pages) */
body.gl-product-page .shop-page-new .product-list .filter-parent {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 74px;
	margin: 0 0 16px;
	padding: 16px 16px 16px 16px;
	background: #fff;
	border: 1px solid var(--gl-line, #e5e7eb);
	/* Green tab (QA rounds 2 + 3 "looks disconnected"): the offset
	   box-shadow read as a separate pill because the card's white corners
	   curved over it. Now it is the card's own left border, so the green
	   follows the corner radius and is part of the card. Content x is
	   unchanged (8 + 16 = the old 8 margin + 1 border + 15 padding). */
	border-left: 8px solid var(--gl-green, #00bf1f);
	border-radius: 12px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

body.gl-product-page .shop-page-new .product-list .filter-parent span.image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 5px;
	background: var(--gl-field, #f9fafb);
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: 8px;
	overflow: hidden;
}

body.gl-product-page .shop-page-new .product-list .filter-parent span.image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	border-radius: 0;
	margin: 0;
}

body.gl-product-page .shop-page-new .product-list .filter-parent h3 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	color: var(--gl-ink-strong, #111827);
}

body.gl-product-page .shop-page-new .product-list .filter-parent .close-all {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0;
}

body.gl-product-page .shop-page-new .product-list .filter-parent .parent-no-results {
	margin: 0;
}

/* Child (product group) */
body.gl-product-page .shop-page-new .product-list .filter-child {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 74px;
	margin: 0 0 16px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: 12px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

body.gl-product-page .shop-page-new .product-list .filter-child .child-thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 4px;
	background: var(--gl-field, #f9fafb);
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.gl-product-page .shop-page-new .product-list .filter-child .child-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
}

body.gl-product-page .shop-page-new .product-list .filter-child h4 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	color: var(--gl-ink-strong, #111827);
}

body.gl-product-page .shop-page-new .product-list .filter-child .subtype-count {
	flex: 0 0 auto;
	margin: 0;
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	color: var(--gl-ink-muted, #6b7280);
	white-space: nowrap;
}

body.gl-product-page .shop-page-new .product-list .filter-child .close-all {
	flex: 0 0 auto;
	padding: 0;
}

/* Variation grid: breathe under its group header. */
body.gl-product-page .shop-page-new .product-list ul.loadData {
	margin: 0 0 20px;
	padding: 0 0 4px;
}

body.gl-product-page .shop-page-new .product-list ul.loadData li.product-card {
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: 12px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
	background: #fff;
}

/* -------------------------------------------------------------------------
 * 5. Brand description card
 * ---------------------------------------------------------------------- */

/* Padding matches production exactly (measured 9 Sept at 390px: logo 20px
   from the top, text 20px from each side, 40px above/below the copy) — the
   Round 1 padding-top:0 and the Round 1 mobile column-padding reset (see §7)
   both took spacing away, which QA flagged twice. */
body.gl-product-page .shop-page-new .introduce-brand {
	margin-top: 8px;
	padding-top: 20px;
	border: 1px solid var(--gl-line, #e5e7eb);
	border-radius: 12px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}

/* -------------------------------------------------------------------------
 * 6. Tablet
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-body {
		flex-wrap: wrap;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters {
		flex: 1 1 100%;
		width: 100%;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 7. Mobile
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
	body.gl-product-page .shop-page-new {
		padding: 10px 16px 20px;
	}

	/* Hero: logo card square, promo beside it, iwoca hidden. */
	body.gl-product-page .shop-page-new .gl-hero,
	body.gl-product-page .shop-page-new .gl-hero--no-iwoca {
		grid-template-columns: minmax(0, 114fr) minmax(0, 222fr);
		gap: 10px;
		margin-bottom: 20px;
		/* 10 Sept QA: the square logo card and the 487:250 banner come out a
		   few px apart in height (aspect-ratio + padding rounding differs by
		   device width) and grid's default stretch left the banner hanging
		   from the top. Centre both so any difference splits evenly. */
		align-items: center;
	}

	body.gl-product-page .shop-page-new .gl-hero-brand {
		box-sizing: border-box;
	}

	body.gl-product-page .shop-page-new .gl-hero--no-promo,
	body.gl-product-page .shop-page-new .gl-hero--no-promo.gl-hero--no-iwoca {
		grid-template-columns: minmax(0, 1fr);
	}

	body.gl-product-page .shop-page-new .gl-hero-iwoca {
		display: none;
	}

	body.gl-product-page .shop-page-new .gl-hero-card {
		border-radius: 4px;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
	}

	body.gl-product-page .shop-page-new .gl-hero-brand {
		aspect-ratio: 1 / 1;
		padding: 6% 6% 24%;
	}

	body.gl-product-page .shop-page-new .gl-hero--no-promo .gl-hero-brand {
		aspect-ratio: 345 / 150;
		padding: 4% 8% 14%;
	}

	body.gl-product-page .shop-page-new .gl-hero-logo {
		top: 5%;
		right: 5%;
		bottom: 24%;
		left: 5%;
		max-width: 90%;
		max-height: 71%;
	}

	/* Bootstrap's .row bleeds 15px past the container on each side; on a
	   phone that leaves the cards touching the screen edge. Keep 16px. */
	body.gl-product-page .shop-page-new .sidebar-position-without > .row {
		margin-left: 0;
		margin-right: 0;
	}

	body.gl-product-page .shop-page-new .sidebar-position-without > .row > .content.col-md-12 {
		padding-left: 0;
		padding-right: 0;
	}

	/* …except the brand description card (Sept 2026 QA). It is a
	   .content.col-md-12 too, and zeroing its column padding took 15px off
	   each side of the text versus production (35px → 20px). Put it back. */
	body.gl-product-page .shop-page-new .sidebar-position-without > .row > .content.col-md-12.introduce-brand {
		padding: 20px 15px 0;
	}

	body.gl-product-page .shop-page-new .gl-hero-name {
		left: 24%;
		right: -4px;
		bottom: -4px;
		height: 24px;
		min-height: 24px;
		border-width: 2px;
		border-radius: 3px 0 0 0;
		box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.25);
	}

	body.gl-product-page .shop-page-new .gl-hero-name span {
		padding: 0 8px 2px;
		font-size: 11px;
	}

	/* Filter bar: compact card, Brand only until "view more". */
	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner {
		padding: 16px 16px 18px;
		border-color: #f2f2f2;
		border-radius: 8px;
		margin-bottom: 16px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-head {
		margin-bottom: 12px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .collection-filter--title {
		font-size: 16px;
		line-height: 24px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-closeall {
		display: none;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-more {
		display: inline-flex;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-body {
		display: block;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters {
		display: block;
		width: 100%;
	}

	/* width !important: the Customizer "Additional CSS" on the site carries
	   `@media (max-width:600px) .main-filters .filter-container { width:48% !important }`
	   from the old two-up mobile bar. That snippet can be deleted once this
	   ships; until then this wins on specificity. */
	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container {
		display: block;
		width: 100% !important;
		margin: 0 0 16px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container:last-child {
		margin-bottom: 0;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container:not(#masterFilterBrand) {
		display: none;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls {
		display: none;
		width: 100%;
		margin-top: 20px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb.is-open .main-filters .filter-container:not(#masterFilterBrand) {
		display: block;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb.is-open .filter-controls {
		display: flex;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb.is-open .filter-controls.hide {
		display: none;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container:first-child {
		margin-bottom: 0;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb.is-open .main-filters .filter-container {
		margin-bottom: 16px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb.is-open .main-filters .filter-container:last-child {
		margin-bottom: 0;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .gl-fb-label {
		margin-bottom: 4px;
		letter-spacing: 0.3px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container select {
		height: 46px;
		padding: 0 36px 0 16px;
		border-radius: 8px;
		font-size: 14px;
		line-height: 20px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container .icon-container {
		width: 36px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .main-filters .filter-container .icon-container svg {
		width: 12px;
		height: 12px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper {
		height: 46px;
		border-radius: 8px;
		padding-left: 40px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper .gl-ico {
		left: 13px;
	}

	body.gl-product-page .shop-page-new .box-collection-filter .collection--inner .filter-controls .search-filter .input-wrapper input {
		font-size: 16px; /* ≥16px keeps iOS from zooming the page on focus */
	}

	/* Rows */
	body.gl-product-page .shop-page-new .product-list .filter-parent {
		min-height: 61px;
		margin: 0 0 14px;
		padding: 12px 12px 12px 13px;
		gap: 12px;
		border-left-width: 7px;
		border-radius: 10px;
	}

	body.gl-product-page .shop-page-new .product-list .filter-parent span.image {
		width: 34px;
		height: 34px;
		padding: 4px;
		border-radius: 7px;
	}

	body.gl-product-page .shop-page-new .product-list .filter-parent h3 {
		font-size: 15px;
		line-height: 22px;
	}

	body.gl-product-page .shop-page-new .product-list .filter-child {
		min-height: 61px;
		margin: 0 0 14px;
		padding: 12px;
		gap: 10px;
		border-radius: 10px;
	}

	body.gl-product-page .shop-page-new .product-list .filter-child .child-thumb {
		width: 34px;
		height: 34px;
		border-radius: 7px;
	}

	body.gl-product-page .shop-page-new .product-list .filter-child h4 {
		font-size: 14px;
		line-height: 1.25;
	}

	body.gl-product-page .shop-page-new .product-list .filter-child .subtype-count {
		font-size: 12px;
	}

	body.gl-product-page .shop-page-new .product-list .filter-child .close-all {
		padding-left: 4px;
	}

	body.gl-product-page .shop-page-new .product-list .close-all .toggle,
	body.gl-product-page .shop-page-new .box-collection-filter .close-all .toggle {
		width: 36px;
		height: 20px;
	}

	body.gl-product-page .shop-page-new .product-list .close-all .toggle:before,
	body.gl-product-page .shop-page-new .box-collection-filter .close-all .toggle:before {
		width: 16px;
		height: 16px;
	}

	body.gl-product-page .shop-page-new .product-list .close-all.active .toggle:before,
	body.gl-product-page .shop-page-new .box-collection-filter .close-all.active .toggle:before {
		left: 18px;
	}

	body.gl-product-page .shop-page-new .product-list ul.loadData {
		margin-bottom: 16px;
	}
}

@media screen and (max-width: 420px) {
	body.gl-product-page .shop-page-new .gl-hero-name span {
		font-size: 10px;
	}
}