/*
 * Global Select entry page + collection page (stonewood-global-select, includes/collection.php).
 * Loaded only on those two pages (and on the collection block in UX Builder). Colours from BRAND.md
 * and the Global Select signature (#f5f3ee warm background, the style-8 button: white, 2px green-ink
 * outline, square corners, flat sage offset shadow).
 * Breakpoints as Flatsome: phones < 550px, tablets 550-849px, desktop 850px+.
 *
 *  0. Tokens
 *  1. Entry page: slim bar, full-screen entry
 *  2. Collection: banner, intro
 *  3. Collection: filter column
 *  4. Collection: shelves and cards
 */

/* 0. Tokens ---------------------------------------------------------------------------------- */
.gs-entry-page, .gs-coll-page, .gs-coll, .gs-cb, .gs-entry {
	--gs-ink: #2f3f2e;
	--gs-head: #3f573e;
	--gs-brand: #70926e;
	--gs-sage: #9ebc96;
	--gs-warm: #f5f3ee;
	--gs-line: #dcdfd9;
	--gs-text: #3d4a3b;
	--gs-muted: #666666;
	--gs-tile: #e8e4dc;
	--gs-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--gs-sans: Lato, "Lato Fallback", "Helvetica Neue", Arial, sans-serif; /* "Lato Fallback" = sw2's metric-matched Arial (theme fonts.css, 2026-10-23) */
	--gs-gap: 20px;
}
/* Lato comes from Google Fonts after the first paint (the theme's font); with the slim header the intro sits in the
   first viewport and its reflow at the swap scores CLS 0.023 on desktop. A metric-matched local stand-in was tried
   on 2026-10-23 (Arial scaled 97.96 %): it re-wrapped the paragraph differently and shifted as much, so it is out.
   The fix is at the site level (self-host or preload Lato), noted in the report. */
body.gs-entry-page #main, body.gs-coll-page #main { background: var(--gs-warm); }

/* 1. Entry page ------------------------------------------------------------------------------ */
.gs-entry-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}
.admin-bar .gs-entry-bar { top: 32px; }
.gs-entry-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 32px;
}
.gs-entry-bar__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gs-ink);
	font: 700 15px/1 var(--gs-sans);
}
.gs-entry-bar__mark {
	display: block;
	width: 150px;
	height: 34px;
	background: var(--gs-ink);
	-webkit-mask: var(--gs-logo) left center / contain no-repeat;
	mask: var(--gs-logo) left center / contain no-repeat;
}
.gs-entry-bar__nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.gs-entry-bar__nav li { display: flex; align-items: center; margin: 0; }
.gs-entry-bar__nav li + li::before { content: "·"; padding: 0 6px; color: var(--gs-brand); }
.gs-entry-bar__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	color: var(--gs-ink);
	font: 700 13px/1 var(--gs-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.gs-entry-bar__nav a:hover { color: var(--gs-brand); }
.gs-entry-bar a:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 2px; }

.gs-entry {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 96px 24px 80px;
	overflow: hidden;
	background: var(--gs-warm);
	text-align: center;
}
.gs-entry__bg { position: absolute; inset: 0; pointer-events: none; }
.gs-entry__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--gs-entry-op, 0.25);
}
.gs-entry__ridges { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.5; }
/* The mist: the top and the middle stay pale so the title reads; the ridges show at the bottom. */
.gs-entry__mist {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 42% at 50% 46%, rgba(245, 243, 238, 0.92) 0%, rgba(245, 243, 238, 0.55) 60%, rgba(245, 243, 238, 0) 100%),
		linear-gradient(to bottom, rgba(245, 243, 238, 1) 0%, rgba(245, 243, 238, 0.7) 38%, rgba(245, 243, 238, 0.15) 78%, rgba(245, 243, 238, 0) 100%);
}
.gs-entry__body { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 1000px; }
.gs-entry__title { /* Title Case, as the "Stone hunters" mockup (E1, 2026-10-22); was uppercase */
	margin: 0 -0.14em 0 0; /* the letter-spacing after the last letter */
	color: var(--gs-ink);
	font: 500 clamp(52px, 7.6vw, 112px)/1 var(--gs-serif);
	white-space: nowrap;
	letter-spacing: 0.14em;
}
.gs-entry__line { display: block; width: 72px; height: 1px; margin: 30px 0 26px; background: var(--gs-sage); }
.gs-entry__text {
	max-width: 32em;
	margin: 0;
	color: var(--gs-text);
	font: 400 19px/1.6 var(--gs-sans);
}
.gs-entry__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	margin-top: 38px;
	padding: 0 26px;
	background: #ffffff;
	color: var(--gs-ink);
	border: 2px solid var(--gs-ink);
	box-shadow: 4px 4px 0 var(--gs-sage); /* the style-8 offset: 4px since 2026-10-22 (was 6px) */
	font: 700 17px/1.2 var(--gs-sans);
	transition: transform 0.12s, box-shadow 0.12s, background-color 0.12s;
}
.gs-entry__btn:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 4px; }
@media (hover: hover) {
	.gs-entry__btn:hover { background: var(--gs-sage); color: var(--gs-ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gs-sage); }
}
@media (max-width: 549px) {
	.admin-bar .gs-entry-bar { top: 46px; }
	.gs-entry-bar__inner { padding: 8px 12px 8px 16px; gap: 8px; }
	.gs-entry-bar__mark { width: 100px; height: 24px; }
	.gs-entry-bar__nav li + li::before { display: none; } /* no room for the dots on phones */
	.gs-entry-bar__nav a { padding: 0 7px; font-size: 11px; letter-spacing: 0.08em; }
	.gs-entry { padding: 88px 20px 64px; }
	.gs-entry__title { letter-spacing: 0.1em; margin-right: -0.1em; font-size: clamp(44px, 13vw, 60px); line-height: 1.05; white-space: normal; }
	.gs-entry__line { margin: 24px 0 20px; }
	.gs-entry__text { font-size: 17px; }
	.gs-entry__btn { margin-top: 30px; }
}

/* 2. Collection: banner, intro ---------------------------------------------------------------- */
.gs-cb {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	overflow: hidden;
	background: var(--gs-head);
	color: #ffffff;
}
.gs-cb__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-cb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(24, 33, 23, 0.72) 0%, rgba(24, 33, 23, 0.32) 55%, rgba(24, 33, 23, 0.2) 100%);
}
/* The natural-stone pages' swatch-band banner (includes/banner.php) can be very light (white granite): a dark-left
   fade under the breadcrumb / eyebrow / H1 keeps white text at ≥ 4.5:1 even over a white swatch (0.8 black over
   luminance 0.85 → 4.8:1), fading to the plain bottom shade on the right. */
/* The collection's banner = the entry page's image (Jay 07:00): the drawn ridges until a photo is set. */
.gs-cb--ridges { background: var(--gs-warm); }
.gs-cb__ridges { overflow: hidden; }
.gs-cb__ridges .gs-entry__ridges { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.9; }
.gs-cb--swatches::after, .gs-cb--installed::after, .gs-cb--entry::after, .gs-cb--ridges::after {
	background:
		linear-gradient(to right, rgba(24, 33, 23, 0.84) 0%, rgba(24, 33, 23, 0.76) 45%, rgba(24, 33, 23, 0.3) 72%, rgba(24, 33, 23, 0.12) 100%),
		linear-gradient(to top, rgba(24, 33, 23, 0.5) 0%, rgba(24, 33, 23, 0.1) 60%, rgba(24, 33, 23, 0) 100%);
}
.gs-cb__inner { position: relative; z-index: 1; width: 100%; max-width: var(--gs-frame, 1230px); margin: 0 auto; padding: 24px 15px 30px; } /* the breadcrumbs + title on the header's edge: Settings › Page width (page-width.php) */
.gs-cb__crumbs { margin: 0 0 18px; font: 400 12px/1.4 var(--gs-sans); color: rgba(255, 255, 255, 0.85); } /* Jay 08:41: 1px smaller (was 13px) */
.gs-cb__crumbs a { display: inline-block; padding: 4px 0; color: #f5f3ee; text-decoration: underline; text-decoration-color: rgba(245, 243, 238, 0.5); text-underline-offset: 3px; } /* a 25px tap target */
/* On the dark banners the links stay light on hover / focus with a sage underline (the theme's black link
   hover vanished into the photo: Jay 2026-10-23 10:10); a visible keyboard ring. */
.gs-cb__crumbs a:hover, .gs-cb__crumbs a:focus-visible { color: #f5f3ee; text-decoration-color: rgba(245, 243, 238, 0.95); text-decoration-thickness: 1px; } /* no green line under links (Jay 26 Oct 14:40; the band is dark, so the line is the cream) */
.gs-cb__crumbs a:focus-visible { outline: 2px solid #9ebc96; outline-offset: 2px; }
/* The mockup's order (E1): the count line sits above the title. */
.gs-cb__inner { display: flex; flex-direction: column; }
.gs-cb__eyebrow { order: 1; margin: 0 0 6px; font: 700 13px/1.3 var(--gs-sans); letter-spacing: 0.16em; text-transform: uppercase; color: #dfe9da; }
.gs-cb__count { order: 2; margin: 0 0 4px; font: 700 13px/1.3 var(--gs-sans); letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; }
.gs-cb__title { order: 3; margin: 0; color: #ffffff; font: 600 58px/1.05 var(--gs-serif); }

/* 2b. The globe hero (includes/globe-hero.php; Jay 2026-10-23, mockup "Global Select hero graphic", "Chosen ·
   Option 2, centered"): a 780px band (720px phones) in the green ink, the text centred in the space above a
   dotted globe that rises from the bottom edge. Geometry in three variables: the band height, the cap (how
   much of the globe shows) and the globe's radius (cap = 0.62 × radius, so the visible cap brings latitudes
   −14° … +55° round the front as it turns). The glow and the rim are CSS (::before), the dots a canvas drawn
   after the text has painted; the band's height is fixed, so nothing shifts. Cormorant 500 is the lightest
   self-hosted weight (the mockup's 400 would be one more font file). */
.gs-ghero {
	--gs-ghero-h: 880px; /* Jay 2026-10-23 14:00: 100px taller (was 780), the text block stays centred */
	--gs-cap: 374px;
	--gs-r: 603px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: var(--gs-ghero-h);
	overflow: hidden;
	background: #2f3f2e;
	color: #f5f3ee;
	text-align: center;
}
.gs-ghero__crumbs { position: absolute; top: 18px; left: 0; right: 0; z-index: 3; box-sizing: border-box; width: 100%; max-width: var(--gs-frame, 1230px); margin: 0 auto; padding: 0 15px; text-align: left; }
.gs-ghero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--gs-page, 1230px);
	height: calc(var(--gs-ghero-h) - var(--gs-cap));
	padding: 44px 15px 0;
}
.gs-ghero__title {
	margin: 0 -0.18em 0 0; /* the letter-spacing after the last letter */
	color: #f5f3ee;
	font: 500 clamp(64px, 7.2vw, 104px)/1.05 var(--gs-serif);
	letter-spacing: 0.18em;
	white-space: nowrap;
}
.gs-ghero__rule { display: block; width: 90px; height: 1px; margin: 26px 0 24px; background: #9ebc96; }
.gs-ghero__text { max-width: 640px; margin: 0; color: #d9ddd5; font: 400 20px/1.6 var(--gs-sans); text-wrap: balance; }
.gs-ghero a.gs-ghero__link.swp-btn-link { margin-top: 22px; color: #f5f3ee; } /* the site's one arrow link (base.css §33: the triangle in the link's own cream, the text underline on hover; Jay 27 Oct #139) */
@media (hover: hover) {
	.gs-ghero a.gs-ghero__link.swp-btn-link:hover { color: #ffffff; text-decoration-color: #f5f3ee; } /* the hover line on the dark photo, as sw2's .dark rule */
}
.gs-ghero a.gs-ghero__link.swp-btn-link:focus-visible { color: #ffffff; text-decoration-color: #f5f3ee; outline: 2px solid #f5f3ee; outline-offset: 4px; }
.gs-ghero__globe { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.gs-ghero__globe::before { /* the soft glow and the thin rim: a circle of radius --gs-r whose top sits --gs-cap above the band's bottom */
	content: "";
	position: absolute;
	top: calc(var(--gs-ghero-h) - var(--gs-cap));
	left: 50%;
	width: calc(var(--gs-r) * 2);
	height: calc(var(--gs-r) * 2);
	margin-left: calc(var(--gs-r) * -1);
	border-radius: 50%;
	border: 1px solid rgba(158, 188, 150, 0.55);
	box-shadow: 0 0 46px 8px rgba(158, 188, 150, 0.26), inset 0 0 80px rgba(158, 188, 150, 0.14);
	background: radial-gradient(circle at 50% 30%, rgba(158, 188, 150, 0.12) 0%, rgba(47, 63, 46, 0) 60%);
}
.gs-ghero__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#collection { scroll-margin-top: 16px; }
/* The slim variant (the collection page, Jay 10:45): 320px (240px phones), the breadcrumb top left, the H1 bottom
   left, the still arc of the same dome (an SVG file via <use>, filled in after load; the glow + rim stay CSS). The
   three numbers match gs_globe_arc_presets(). */
.gs-ghero--slim { --gs-ghero-h: 320px; --gs-cap: 220px; --gs-r: 603px; height: auto; min-height: var(--gs-ghero-h); align-items: stretch; text-align: left; }
.gs-ghero--slim .gs-ghero__inner { justify-content: flex-end; align-items: flex-start; height: auto; min-height: var(--gs-ghero-h); margin: 0 auto; padding: 22px 15px 30px; }
.gs-ghero--slim .gs-ghero__crumbs { position: static; width: auto; max-width: none; margin: 0 0 auto; padding: 0; }
.gs-ghero--slim .gs-ghero__title { margin: 0 -0.12em 0 0; font-size: 60px; letter-spacing: 0.12em; }
@media (max-width: 549px) {
	.gs-ghero.gs-ghero--slim { --gs-ghero-h: 240px; --gs-cap: 160px; --gs-r: 419px; } /* beats the full hero's phone values above */
	.gs-ghero--slim .gs-ghero__inner { padding: 14px 16px 22px; }
	.gs-ghero--slim .gs-ghero__title { font-size: 40px; letter-spacing: 0.1em; margin-right: -0.1em; }
}
/* 2d. The photo heroes (Jay 2026-10-23 12:30, the licensed quarry photos): the photo full-bleed behind the text
   (object-position = the element's focus option), a brand-green shade (#2f3f2e) strongest where the text sits so the
   warm-white text reads at ≥ 4.5:1; the entry hero's shade is centred on its text block, the slim header's sits on
   the left under the crumbs + H1. Fixed band heights, the photo preloaded + eager: the LCP, no shift. */
.gs-ghero--photo .gs-ghero__photo, .gs-ghero--slim .gs-ghero__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--gs-focus, 50% 50%);
}
.gs-ghero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Jay 12:50: the shade is dark only behind the text block (an ellipse the size of the block, held at 0.88 so the
   paragraph reads ≥ 4.5:1 even over the white quarry, then falling off), light towards the edges and the bottom so
   the hills and the terraces show. Measured in the report. */
/* Jay 13:28: no radial / oval, an even full-width shade: one vertical gradient, 0.88 from the top through the text
   block (the title's ends still meet the pale sky, and warm white needs ≥ 0.88 of the ink over white to read 4.5:1),
   easing to 0.6 below the text so the foreground paving and the quarry's lower slope show. */
/* Jay 14:00: NEUTRAL, not green: a charcoal with a touch of green (rgb 20 26 20), even across the width, one vertical
   gradient. The opacity through the text block comes from the measurement (report): the brightest pixels behind the
   H1 and the paragraph are the pale sky and the white quarry (L 0.66–0.99 at 1440); the browser blends in sRGB, and
   0.65 of this charcoal is the lowest value that keeps every text pixel at ≥ 4.5:1 (H1 4.98, paragraph 4.53 at 1440;
   0.6 fails the paragraph at 3.87). Below the text it eases to 0.35 so the hills and the foreground keep their colour. */
.gs-ghero--photo .gs-ghero__shade {
	background: linear-gradient(to bottom, rgba(20, 26, 20, 0.65) 0%, rgba(20, 26, 20, 0.65) 72%, rgba(20, 26, 20, 0.35) 100%);
}
.gs-ghero--photo .gs-ghero__photo { object-position: var(--gs-focus, 50% 50%); }
/* The ghost button + the quiet line (Jay 12:50). */
.gs-ghero .gs-ghero__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding: 18px 40px;
	background: transparent;
	border: 1px solid #f5f3ee;
	border-radius: 0;
	color: #f5f3ee;
	font: 700 14px/1 var(--gs-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s, color 0.25s;
}
.gs-ghero .gs-ghero__btn > span:first-child { margin-right: -0.18em; } /* no trailing letter-spacing before the arrow */
/* Arrow A (Jay 2026-10-26, replaces the → glyph site-wide): sw2's variables from the theme's base.css §33
   (--swp-arrow = ink front arrow on a sage copy, --swp-arrow-light = white front arrow); "→" is the fallback
   where the theme rule isn't loaded yet. Hover: the arrow slides 3px right. */
.gs-ghero .gs-ghero__btn-arrow { display: inline-block; margin-left: 8px; transition: transform 0.18s ease; }
.gs-ghero .gs-ghero__btn-arrow::after { content: var(--swp-arrow-light, var(--swp-arrow, "→")); display: inline-block; vertical-align: middle; }
.gs-ghero .gs-ghero__btn:hover .gs-ghero__btn-arrow, .gs-ghero .gs-ghero__btn:focus-visible .gs-ghero__btn-arrow { transform: translateX(3px); }
/* (The shelf's "See all" is the site's one arrow link since 27 Oct: class swp-link--arrow, base.css §33.) The focus row's
   "See all n" card is a whole-card link, so its text carries the shared triangle itself (sw2's --swp-icon-triangle as a
   mask, in the link's own ink: white when the card fills on hover), with the shared 4px nudge (Jay 27 Oct #139). */
.gs-fcard__more-text::after { content: ""; display: inline-block; width: 8px; height: 10px; margin-left: 12px; background-color: currentColor; -webkit-mask: var(--swp-icon-triangle) center / 8px 10px no-repeat; mask: var(--swp-icon-triangle) center / 8px 10px no-repeat; transition: transform 0.2s ease; }
.gs-fcard__more:hover .gs-fcard__more-text::after, .gs-fcard__more:focus-visible .gs-fcard__more-text::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .gs-ghero .gs-ghero__btn-arrow, .gs-fcard__more-text::after { transition: none; } }
.gs-ghero .gs-ghero__btn:hover, .gs-ghero .gs-ghero__btn:focus-visible { background: #f5f3ee; color: #2f3f2e; }
.gs-ghero .gs-ghero__btn:focus-visible { outline: 2px solid #f5f3ee; outline-offset: 4px; }
.gs-ghero__note { margin: 16px 0 0; color: #d9ddd5; font: 400 13px/1.5 var(--gs-sans); letter-spacing: 0.12em; }
@media (max-width: 549px) {
	.gs-ghero .gs-ghero__btn { margin-top: 22px; padding: 16px 28px; }
	.gs-ghero__note { font-size: 12px; margin-top: 14px; }
	.gs-ghero--photo .gs-ghero__shade { background: linear-gradient(to bottom, rgba(20, 26, 20, 0.55) 0%, rgba(20, 26, 20, 0.55) 72%, rgba(20, 26, 20, 0.35) 100%); } /* phones: the crop holds no quarry white behind the text (L ≤ 0.52): 0.55 keeps 5.0:1 (0.5 gives 4.46) */
	.gs-ghero--photo .gs-ghero__photo { object-position: var(--gs-focus-sm, var(--gs-focus, 50% 50%)); } /* phones crop the sides: their own focal point */
}
@media (prefers-reduced-motion: reduce) { .gs-ghero .gs-ghero__btn { transition: none; } }
.gs-ghero--slim .gs-ghero__shade {
	background:
		linear-gradient(to right, rgba(47, 63, 46, 0.94) 0%, rgba(47, 63, 46, 0.9) 36%, rgba(47, 63, 46, 0.42) 70%, rgba(47, 63, 46, 0.22) 100%),
		linear-gradient(to top, rgba(47, 63, 46, 0.35) 0%, rgba(47, 63, 46, 0) 50%);
}
.gs-ghero--photo .gs-ghero__crumbs, .gs-ghero--slim .gs-ghero__crumbs { z-index: 3; }
.gs-ghero--photo .gs-ghero__inner, .gs-ghero--slim .gs-ghero__inner { z-index: 2; }
.gs-ghero--photo .gs-ghero__inner { height: var(--gs-ghero-h); padding-top: 0; padding-bottom: 220px; } /* the text block centred in the band, then lifted by half the bottom padding: 110px at desktop widths (Jay 2026-10-23 16:1x: the title's baseline above the ridge line, measured 268px from the hero's top at 1440, 286px at 1366; the baseline now sits at ~253px / ~249px); the spacing inside the block is untouched */
@media (max-width: 549px) { .gs-ghero--photo .gs-ghero__inner { padding-bottom: 120px; } } /* phones: 60px up (the ridge is at 254px there; the baseline moves from ~298px to ~238px) */

/* 2e. The globe band (the entry page, under the photo hero; Jay 12:34): the heading + one line, then the turning
   globe (the same dome, cap and glow as the hero: --gs-cap / --gs-r). The points layer holds one focusable button per
   country on its dot (desktop) and the hover / focus label. */
.gs-gband {
	--gs-ghero-h: 560px; /* Jay 14:00: 40px more between the paragraph and the globe (was 520): the dots start 60px under the text, the beams + marks stop 18px under it (globe-hero.js) */
	--gs-cap: 330px;
	--gs-r: 532px;
	position: relative;
	height: var(--gs-ghero-h);
	overflow: hidden;
	background: #2f3f2e;
	color: #f5f3ee;
	text-align: center;
}
.gs-gband__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; height: calc(var(--gs-ghero-h) - var(--gs-cap)); padding: 36px 16px 0; }
.gs-gband__title { margin: 0; color: #f5f3ee; font: 500 clamp(30px, 3.4vw, 42px)/1.15 var(--gs-serif); letter-spacing: 0.02em; }
.gs-gband__text { max-width: 640px; margin: 12px 0 0; color: #d9ddd5; font: 400 17px/1.6 var(--gs-sans); text-wrap: balance; }
.gs-gband__points { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gs-gband__pt {
	position: absolute;
	left: -14px;
	top: -14px;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	pointer-events: auto;
	cursor: default;
}
.gs-gband__pt:focus-visible { outline: 2px solid #9ebc96; outline-offset: 2px; }
.gs-gband__label {
	position: absolute;
	left: 0;
	top: 0;
	margin: -22px 0 0 0;
	padding: 4px 8px;
	background: #f5f3ee;
	color: #2f3f2e;
	font: 700 11px/1.3 var(--gs-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s;
	will-change: transform;
}
.gs-gband__label { translate: -50% -100%; } /* the script sets transform: translate(x, y) to the point; this centres the label above it */
.gs-gband__label.is-on { opacity: 1; }
@media (max-width: 849px), (hover: none) {
	.gs-gband__points { display: none; } /* phones and touch: no labels, no focus stops */
}
@media (max-width: 549px) {
	.gs-gband { --gs-ghero-h: 470px; --gs-cap: 230px; --gs-r: 371px; } /* +50px for the four-line paragraph (Jay 14:00) */
	.gs-gband__inner { padding: 28px 16px 0; }
	.gs-gband__text { font-size: 15px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .gs-gband__label { transition: none; } }

/* 2c. Jump links (the collection page, Jay 2026-10-23 10:13): one row between the intro and the shelves, one
   link per natural-stone shelf, the full content width, styled like the product page's section tabs (Lato,
   uppercase, letter-spaced, green ink, the sage underline on hover / current). Phones: a scrolling row of chips
   with a right-edge fade. The shelves land under a sticky header (--gs-stick from collection.js). */
.gs-coll-row--jump { padding-top: 0; }
.gs-coll-row--jump > .col { padding-bottom: 0; }
.gs-coll-row--intro.has-jump > .col { padding-bottom: 36px; }
.gs-jump { position: relative; margin: 0 0 44px; background: #ffffff; border-top: 1px solid var(--gs-line); border-bottom: 1px solid var(--gs-line); }
.gs-jump__list { display: flex; margin: 0; padding: 0; list-style: none; }
.gs-jump__item { flex: 1 1 0; display: flex; justify-content: center; margin: 0; padding: 0 6px; white-space: nowrap; }
.gs-jump__item + .gs-jump__item { border-left: 1px solid var(--gs-line); }
.gs-jump__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 10px;
	color: var(--gs-ink);
	font: 700 13px/1.2 var(--gs-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
.gs-jump__link::after { /* the sage underline: slides in from the left on hover, stays on the current shelf's link */
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -1px;
	height: 2px;
	background: var(--gs-sage);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s;
}
.gs-jump__link[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) {
	.gs-jump__link:hover { background: #f2f3f1; color: var(--gs-ink); }
	.gs-jump__link:hover::after { transform: scaleX(1); }
}
.gs-jump__link:focus-visible { outline: 2px solid var(--gs-head); outline-offset: -3px; }
.gs-shelf { scroll-margin-top: calc(var(--gs-stick, 24px) + 8px); }
@media (prefers-reduced-motion: reduce) {
	.gs-jump__link, .gs-jump__link::after { transition: none; }
}
@media (max-width: 849px) {
	.gs-jump { margin-bottom: 28px; background: none; border: 0; }
	.gs-jump__scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 4px; }
	.gs-jump__scroll::-webkit-scrollbar { display: none; }
	.gs-jump__list { gap: 8px; width: max-content; padding: 0 40px 0 0; }
	.gs-jump .gs-jump__item { flex: 0 0 auto; margin: 0; padding: 0; border: 0; } /* Flatsome's phone li indent (1.3em) beaten */
	.gs-jump__link { min-height: 44px; padding: 0 16px; border: 1px solid var(--gs-ink); border-radius: 999px; font-size: 11px; letter-spacing: 0.1em; }
	.gs-jump__link::after { display: none; }
	.gs-jump__link[aria-current] { background: var(--gs-ink); color: #ffffff; }
	.gs-jump::after { /* the right-edge fade */
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 48px;
		background: linear-gradient(to right, rgba(245, 243, 238, 0), var(--gs-warm) 70%);
		pointer-events: none;
		transition: opacity 0.2s;
	}
	.gs-jump.is-end::after { opacity: 0; }
}
@media (max-width: 849px) {
	.gs-ghero__title { font-size: clamp(44px, 8.4vw, 72px); }
}
@media (max-width: 549px) {
	.gs-ghero { --gs-ghero-h: 780px; --gs-cap: 260px; --gs-r: 419px; } /* phones +60px (Jay 14:00; was 720) */
	.gs-ghero__crumbs { top: 12px; padding: 0 16px; }
	.gs-ghero__inner { padding: 40px 16px 0; }
	.gs-ghero__title { font-size: clamp(38px, 12.3vw, 50px); letter-spacing: 0.1em; margin-right: -0.1em; }
	.gs-ghero__rule { margin: 20px 0 18px; }
	.gs-ghero__text { font-size: 16px; }
	.gs-ghero a.gs-ghero__link.swp-btn-link { margin-top: 16px; }
}
/* Round 3 (Jay, 2026-10-22): clear air between the intro and the filters/shelves (52px desktop, 28px
   phones), and the colour strip in the open space to the right of the intro text. */
.gs-coll-row--intro { padding-top: 28px; }
.gs-coll-row--intro > .col { padding-bottom: 52px; }
.gs-coll-intro p { max-width: 68ch; margin: 0; color: var(--gs-text); font: 400 18px/1.6 var(--gs-sans); } /* Jay 06:57: ~18px / 1.6, ~70 characters a line; 16px on phones (below) */
.gs-coll-intro p + p { margin-top: 0.8em; }
.gs-coll-row--shelves { padding-bottom: 56px; }
/* "Start with a colour": a horizontal spectrum (light → warm → grey & blue → dark) of the Colour filter's
   groups; a click filters every shelf like the filter column (shareable URL). Printed only once the
   Colour filter shows (40+ stones with colours). */
.gs-cstrip { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; font-family: var(--gs-sans); }
.gs-cstrip__label { margin: 0; color: var(--gs-muted); font: 700 11px/1.3 var(--gs-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.gs-cstrip__row { display: flex; align-items: stretch; }
/* A segment = the toggle + the × that removes just that colour (Jay 2026-10-23 10:14). */
.gs-cstrip__seg { position: relative; flex: 1 1 0; display: flex; min-width: 0; }
.gs-coll-page .gs-cstrip__btn, .gs-cstrip__btn {
	flex: 1 1 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0 0 2px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--gs-muted);
	font: 400 11px/1.3 var(--gs-sans);
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	cursor: pointer;
}
.gs-cstrip__chip { display: block; width: 100%; height: 36px; background: var(--gs-dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform 0.15s; }
.gs-cstrip__seg:first-child .gs-cstrip__chip { border-radius: 4px 0 0 4px; }
.gs-cstrip__seg:last-child .gs-cstrip__chip { border-radius: 0 4px 4px 0; }
/* The ×: a 24px button (tap area) holding an 18px circle in the chip's top-right corner; green ink with a white ×
   on light chips, white with a green-ink × on dark ones. Shown by collection.js while the colour is selected. */
.gs-coll-page .gs-cstrip__x, .gs-cstrip__x {
	position: absolute;
	top: -12px;
	right: -9px;
	z-index: 1;
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 3px;
	background: none;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	line-height: 0;
	cursor: pointer;
}
.gs-cstrip__x-c { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.gs-cstrip__seg.is-light .gs-cstrip__x-c { background: var(--gs-ink); color: #ffffff; }
.gs-cstrip__seg.is-dark .gs-cstrip__x-c { background: #ffffff; color: var(--gs-ink); }
.gs-cstrip__x:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 1px; }
@media (hover: hover) {
	.gs-cstrip__x:hover .gs-cstrip__x-c { transform: scale(1.12); }
}
.gs-coll-page .gs-cstrip__clear, .gs-cstrip__clear {
	align-self: flex-start;
	min-height: 0;
	margin: -2px 0 0;
	padding: 4px 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--gs-head);
	font: 700 12px/1.3 var(--gs-sans);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.gs-cstrip__clear:hover, .gs-cstrip__clear:focus-visible { color: var(--gs-ink); }
.gs-cstrip__clear:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 2px; }
.gs-cstrip__name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-cstrip__n { display: none; }
.gs-cstrip__btn[aria-pressed="true"] { color: var(--gs-ink); font-weight: 700; }
.gs-cstrip__btn[aria-pressed="true"] .gs-cstrip__chip { outline: 2px solid var(--gs-ink); outline-offset: 2px; transform: translateY(-3px); }
.gs-cstrip__btn.is-empty { opacity: 0.4; cursor: default; }
.gs-cstrip__btn:focus-visible { outline: none; }
.gs-cstrip__btn:focus-visible .gs-cstrip__chip { outline: 2px solid var(--gs-head); outline-offset: 2px; }
@media (hover: hover) {
	.gs-cstrip__btn:not(.is-empty):hover .gs-cstrip__chip { transform: translateY(-3px); }
	.gs-cstrip__btn:not(.is-empty):hover { color: var(--gs-ink); }
}
@media (max-width: 849px) {
	.gs-cstrip { padding-top: 0; }
	.gs-cstrip__chip { height: 30px; }
}
/* THE intro + colour strip row, one shared piece for the collection page AND the five natural-stone pages (Jay
   2026-10-24 13:1x, 13:2x, 13:3x): ONE row, two columns, class gs-coll-row--introstrip in both UX Blocks
   ("Global Select Collection", "Global Select Family"); no page-specific copy of these rules.
   - The intro: 2px smaller (16px, the same 1.6 ratio), ≤ ~70 characters a line (30em of Lato ≈ 70 characters).
   - Desktop ≥ 1200px: the intro left, "Start with a color" right, vertically centred with the text; nine swatches of
     ~72–85px (a 20 : 9 chip, the same ratio at every width), labels 13px. Should the column ever be too narrow for nine
     at 72px, the even 5 + 4 wrap below takes over.
   - Below 1200px and on phones: the colours drop under the text, left-aligned with it, ≤ 720px, wrapping (never cut
     off, never a sideways scroll).
   The faded empty colours, the × on a selected colour and the filter behaviour are the strip's own (above,
   collection.js). The space under the row is the page's own: 36px above the collection's jump tabs (has-jump),
   52px above a natural-stone page's grid. */
.gs-coll-row--introstrip .gs-coll-intro p { max-width: 30em; font-size: 16px; line-height: 1.6; }
.gs-coll-row--introstrip > .col:first-child { padding-bottom: 22px; }
.gs-coll-row--introstrip .gs-cstrip { max-width: 720px; padding-top: 0; }
.gs-coll-row--introstrip .gs-cstrip__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); row-gap: 16px; }
@media (min-width: 850px) {
	.gs-coll-row--introstrip .gs-cstrip__btn { font-size: 13px; }
	.gs-coll-row--introstrip .gs-cstrip__chip { height: auto; aspect-ratio: 20 / 9; }
}
@media (min-width: 1200px) {
	/* Side by side: both columns without bottom padding (so "centred" means the text and the strip themselves), the
	   page's space under the row on the row. */
	.gs-coll-row--introstrip { flex-wrap: nowrap; align-items: center; padding-bottom: 52px; }
	.gs-coll-row--introstrip.has-jump { padding-bottom: 36px; }
	.gs-coll-row.gs-coll-row--introstrip > .col { padding-bottom: 0; }
	.gs-coll-row--introstrip > .col:first-child { flex: 0 0 auto; width: auto; max-width: none; }
	.gs-coll-row--introstrip > .col:first-child .gs-coll-intro p { width: 30em; }
	.gs-coll-row--introstrip > .col:last-child { flex: 1 1 0; min-width: 0; max-width: none; padding-left: 24px; }
	.gs-coll-row--introstrip > .col:last-child > .col-inner { container-type: inline-size; } /* the strip sizes itself from its column */
	/* Too narrow for nine at 72px (e.g. a 1200px window with a scrollbar): an even 5 + 4 of ≤ 85px swatches, at the right. */
	.gs-coll-row--introstrip .gs-cstrip { max-width: 425px; margin-left: auto; }
	.gs-coll-row--introstrip .gs-cstrip__row { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4px; }
	.gs-coll-row--introstrip .gs-cstrip__seg .gs-cstrip__chip { border-radius: 4px; }
}
/* Room for nine at 72px or more: one row of nine, 72–85px each (≤ 765px), the spectrum in one piece again. */
@container (min-width: 648px) {
	.gs-coll-row--introstrip .gs-cstrip { max-width: 765px; }
	.gs-coll-row--introstrip .gs-cstrip__row { grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: 0; }
	.gs-coll-row--introstrip .gs-cstrip__seg .gs-cstrip__chip { border-radius: 0; }
	.gs-coll-row--introstrip .gs-cstrip__seg:first-child .gs-cstrip__chip { border-radius: 4px 0 0 4px; }
	.gs-coll-row--introstrip .gs-cstrip__seg:last-child .gs-cstrip__chip { border-radius: 0 4px 4px 0; }
}
@media (max-width: 549px) {
	.gs-coll-row--introstrip > .col:first-child { padding-bottom: 18px; }
	.gs-coll-row--introstrip > .col:last-child { padding-bottom: 28px; }
}
/* An even 5 + 4 wrap (not 8 + 1) whenever nine don't fit one row: phones under 390px. Each chip rounded, a small gap. */
@media (max-width: 389px) {
	.gs-coll-row--introstrip .gs-cstrip__row { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4px; }
	.gs-coll-row--introstrip .gs-cstrip__seg .gs-cstrip__chip { border-radius: 4px; }
}
@media (max-width: 549px) {
	.gs-cb { min-height: 220px; }
	.gs-cb__inner { padding: 18px 16px 22px; }
	.gs-cb__crumbs { margin-bottom: 12px; }
	.gs-cb__title { font-size: 42px; }
	.gs-coll-row--intro { padding-top: 22px; }
	.gs-coll-row--intro > .col { padding-bottom: 28px; }
	.gs-coll-intro p { font-size: 16px; }
	.gs-cstrip__name { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.gs-cstrip__chip { transition: none; }
	.gs-cstrip__btn:hover .gs-cstrip__chip, .gs-cstrip__btn[aria-pressed="true"] .gs-cstrip__chip { transform: none; }
}

/* 3. Collection: filter column (back on the left, Jay 2026-10-22 21:28; as built on 22 Oct + Origin) ----- */
.gs-coll {
	display: grid;
	grid-template-columns: var(--gs-filter-w, 200px) minmax(0, 1fr); /* wider with Settings › Page width (page-width.php) */
	gap: var(--gs-filter-gap, 40px);
	align-items: start;
	color: var(--gs-text);
	font-family: var(--gs-sans);
}
.gs-coll:not(.is-ready) .gs-coll__filters { visibility: hidden; } /* the filters need collection.js */
/* The column is a sticky panel with its own scroll (Jay 2026-10-23 10:48): under the header, at most the viewport
   minus that, a thin sage scrollbar on hover, scrolling inside it never drags the page (overscroll-behavior), a
   soft fade at the bottom while there is more (has-more from collection.js), the status line + "Clear filters"
   pinned at the top. */
.gs-coll__filters { position: sticky; top: var(--gs-stick, 24px); border-right: 1px solid var(--gs-line); } /* the mockup's divider */
.gs-coll__filters::after { content: ""; position: absolute; left: 0; right: 1px; bottom: 0; height: 44px; background: linear-gradient(to bottom, rgba(245, 243, 238, 0), var(--gs-warm)); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.gs-coll__filters.has-more::after { opacity: 1; }
.gs-filters {
	position: relative;
	max-height: calc(100vh - var(--gs-stick, 24px) - 16px);
	max-height: calc(100dvh - var(--gs-stick, 24px) - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 20px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color 0.2s;
}
.gs-filters:hover, .gs-filters:focus-within { scrollbar-color: var(--gs-sage) transparent; }
.gs-filters::-webkit-scrollbar { width: 6px; }
.gs-filters::-webkit-scrollbar-track { background: transparent; }
.gs-filters::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.gs-filters:hover::-webkit-scrollbar-thumb, .gs-filters:focus-within::-webkit-scrollbar-thumb { background: var(--gs-sage); }
.gs-filters__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 0 0 8px; background: var(--gs-warm); border-bottom: 1px solid var(--gs-line); }
.gs-filters__bar .gs-coll__status { margin: 0; font-size: 13px; }
.gs-filters__bar .gs-filters__clear { min-height: 0; font-size: 13px; white-space: nowrap; }
.gs-filters__bar .gs-coll__status--panel:not(.is-filtered) { position: static; width: auto; height: auto; overflow: visible; clip: auto; } /* the panel copy always reads (beats the sr-only rule below) */
/* Each group collapses with a small chevron (the button is the legend's text). #684: open on load per the Settings list
   (Application by default); the rest start folded. */
.gs-coll .gs-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--gs-muted);
	font: 700 11px/1.3 var(--gs-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}
.gs-coll .gs-filters__toggle:hover { color: var(--gs-ink); }
.gs-coll .gs-filters__toggle:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 2px; }
.gs-filters__chev { flex: none; transition: transform 0.2s; }
.gs-filters__toggle[aria-expanded="false"] .gs-filters__chev { transform: rotate(-90deg); }
.gs-filters__group.is-closed { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .gs-filters__chev { transition: none; } }
.gs-coll__filters-toggle {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	color: var(--gs-ink);
	font: 700 13px/1.3 var(--gs-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	pointer-events: none; /* desktop: always open */
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); /* desktop: no title (mockup) */
}
.gs-coll__filters-toggle::-webkit-details-marker { display: none; }
.gs-filters { margin: 0; }
.gs-filters__group { margin: 0 0 24px; padding: 0; border: 0; }
.gs-filters__legend { padding: 0; margin: 0 0 6px; color: var(--gs-muted); font: 700 11px/1.3 var(--gs-sans); letter-spacing: 0.16em; text-transform: uppercase; } /* a label: Lato small caps, not Cormorant */
.gs-filters__list { margin: 0; padding: 0; list-style: none; content-visibility: auto; contain-intrinsic-size: auto 180px; } /* the lists below the fold are laid out when they scroll in (cheap win 3, 23 Oct) */
/* Not on a natural-stone page (2026-10-24): there the filter lists are on the first screen but hidden until
   collection.js is ready, so they kept the 180px placeholder until then and the column jumped (CLS 0.002-0.006). */
.gs-coll--grid .gs-filters__list { content-visibility: visible; contain-intrinsic-size: none; }
.gs-coll .gs-filters__list > li { margin: 0; } /* Flatsome indents list items */
.gs-filters__list[hidden] { display: none; } /* #684: a folded group stays folded on phones too (their list is display: flex) */
.gs-filters .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* #684: the price tier's word ("Mid"), for screen readers only */
.gs-filters__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gs-filters .gs-filters__input + .gs-filters__label { /* beats Flatsome's input[type=checkbox] + label { display: inline } */
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	margin: 0;
	padding: 0 0 0 30px;
	color: var(--gs-text);
	font: 400 15px/1.3 var(--gs-sans);
	cursor: pointer;
}
.gs-filters__label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 1.5px solid #868f86;
	background: #ffffff;
}
.gs-filters__input:checked + .gs-filters__label::before {
	border-color: var(--gs-ink);
	background: var(--gs-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.gs-filters__input:focus-visible + .gs-filters__label::before { outline: 2px solid var(--gs-ink); outline-offset: 2px; }
.gs-filters__input:disabled + .gs-filters__label { opacity: 0.45; cursor: default; }
.gs-filters__dot { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gs-dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.gs-filters__n { margin-left: auto; color: var(--gs-muted); font-size: 13px; }
/* A filtered link: the shelves, the grid and the jump links wait hidden until collection.js has applied the filter
   (html.gs-filtering from collection.php's head line; removed after the first apply), so nothing moves. */
.gs-filtering .gs-shelf, .gs-filtering .gs-all, .gs-filtering .gs-jump { visibility: hidden; }
/* The header search's ?q= (collection.js): "Search: “belgium” ×", removes the word filter. */
.gs-coll .gs-qchip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 0 10px; border: 1px solid var(--gs-line); border-radius: 16px; background: #ffffff; box-shadow: none; color: var(--gs-ink); font: 400 13px/1.2 var(--gs-sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
.gs-coll .gs-qchip:hover { border-color: var(--gs-head); }
.gs-coll .gs-qchip:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 2px; }
.gs-qchip__x { font-size: 16px; line-height: 1; color: var(--gs-muted); }
/* The wider column (Jay 2026-10-24, 1b): roomier rows, the label and its count apart, long labels on one line. */
@media (min-width: 850px) {
	body.gs-wide .gs-filters { padding-right: 24px; }
	body.gs-wide .gs-filters .gs-filters__input + .gs-filters__label { min-height: 40px; gap: 12px; }
	body.gs-wide .gs-filters__n { padding-left: 12px; }
	body.gs-wide .gs-filters__group { margin-bottom: 28px; }
}
.gs-filters__clear, .gs-link-btn {
	min-height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--gs-ink);
	font: 700 14px/1.2 var(--gs-sans);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.gs-filters__clear[hidden] { display: none; }
.gs-coll__main { min-width: 0; }
.gs-coll__status { margin: 0 0 16px; color: var(--gs-muted); font-size: 14px; }
.gs-coll__status:not(.is-filtered) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gs-coll__none { margin: 0 0 24px; font-size: 16px; }
.gs-coll__none[hidden] { display: none; }
/* The status bar with the view switch (Jay 2026-10-23 13:33): "Showing X of 46 stones" at the left (always read on
   the collection: it hosts the switch), "Shelves | All stones" at the right (a real button group, aria-pressed; Lato
   uppercase in green ink, the active one underlined sage), the Sort select beside it in the All stones view. The right
   side is invisible, not gone, until collection.js runs: nothing shifts. */
.gs-coll__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 44px; margin: 0 0 20px; border-bottom: 1px solid var(--gs-line); }
/* Ends swapped (Jay 2026-10-24): the view switch (+ Sort) at the left, its first word on the shelf titles' left
   edge; the count at the right. */
.gs-coll__bar .gs-coll__status { margin: 0 0 0 auto; text-align: right; }
.gs-coll__bar .gs-coll__status--bar:not(.is-filtered) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.gs-coll__bar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.gs-coll:not(.is-ready) .gs-coll__bar-left { visibility: hidden; }
/* The selected view reads as a tab (Jay 2026-10-24): white fill, 1px border in the line colour, 8px 14px, the sage
   underline under its word; the other view stays plain (same padding + a clear border, so nothing moves when they
   swap). The first tab's box starts on the shelf titles' left edge. */
.gs-view { display: inline-flex; align-items: center; gap: 4px; }
.gs-coll .gs-view__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--gs-head);
	font: 700 12px/1.2 var(--gs-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s;
}
.gs-coll .gs-view__btn::after { /* the sage underline: on the active view, slides in on hover */
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	background: var(--gs-sage);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s;
}
.gs-coll .gs-view__btn[aria-pressed="true"] { border-color: var(--gs-line); background: #ffffff; color: var(--gs-ink); }
.gs-coll .gs-view__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.gs-coll .gs-view__btn:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 2px; }
@media (hover: hover) {
	.gs-coll .gs-view__btn:hover { color: var(--gs-ink); }
	.gs-coll .gs-view__btn:hover::after { transform: scaleX(1); }
}
.gs-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--gs-muted); font: 700 11px/1.3 var(--gs-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.gs-sort[hidden] { display: inline-flex; visibility: hidden; } /* its space is kept in the Shelves view, so the switch never moves */
.gs-coll .gs-sort__select {
	min-height: 36px;
	height: 36px;
	margin: 0;
	padding: 0 28px 0 10px;
	border: 1px solid var(--gs-line);
	border-radius: 0;
	background-color: #ffffff;
	box-shadow: none;
	color: var(--gs-ink);
	font: 400 14px/1.2 var(--gs-sans);
	letter-spacing: 0;
	text-transform: none;
}
.gs-coll .gs-sort__select:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 2px; }
.gs-coll.is-all .gs-shelf--focus { display: none; } /* the All stones view: the shelves give way to the one grid */
.gs-all[hidden] { display: none; }
.gs-jump.is-all { visibility: hidden; border-color: transparent; background: none; } /* the jump links don't apply to the one grid; the row keeps its height so the bar below doesn't jump */
@media (prefers-reduced-motion: reduce) {
	.gs-coll .gs-view__btn, .gs-coll .gs-view__btn::after { transition: none; }
}
@media (max-width: 549px) { /* phones: the switch first, the count after it on the same line (the Sort select drops under them) */
	.gs-coll__bar { gap: 0 10px; }
	.gs-coll__bar .gs-coll__status { order: 1; font-size: 13px; }
	.gs-coll__bar-left { display: contents; } /* its children join the bar, so the Sort can go under both */
	.gs-coll:not(.is-ready) .gs-view { visibility: hidden; }
	.gs-coll .gs-view__btn { padding: 8px 12px; font-size: 11px; letter-spacing: 0.1em; }
	.gs-coll .gs-view__btn::after { left: 12px; right: 12px; }
	.gs-sort { order: 2; width: 100%; justify-content: flex-start; }
	.gs-sort[hidden] { display: none; }
}
@media (max-width: 849px) {
	.gs-coll { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.gs-coll__filters { position: static; padding-right: 0; border: 1.5px solid var(--gs-ink); background: #ffffff; }
	.gs-coll__filters::after { display: none; }
	.gs-filters { max-height: none; overflow: visible; padding-right: 16px; } /* the drawer scrolls with the page as before */
	.gs-filters__bar { position: static; margin: 0 0 10px; padding: 10px 0 8px; background: #ffffff; }
	.gs-coll__status--panel { display: none; } /* the line above the shelves does it on phones */
	.gs-coll__filters-toggle { /* phones and tablets: the toggle is a real 48px box again (desktop hides it) */
		position: static;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: auto;
		height: auto;
		min-height: 48px;
		margin: 0;
		padding: 0 16px;
		overflow: visible;
		clip: auto;
		pointer-events: auto;
		cursor: pointer;
	}
	.gs-coll__filters-toggle::after { content: "+"; font-size: 20px; font-weight: 400; }
	.gs-coll__filters[open] .gs-coll__filters-toggle::after { content: "–"; }
	.gs-filters { padding: 0 16px 8px; }
	.gs-filters__group { margin-bottom: 14px; }
	.gs-filters__list { display: flex; flex-wrap: wrap; gap: 0 18px; }
	.gs-filters .gs-filters__input + .gs-filters__label { min-height: 44px; }
	.gs-filters__n { margin-left: 0; }
}
/* 4. Collection: the focused shelves (Jay's Netflix-style mockup, 2026-10-22) + the natural-stone grid ---- */
.gs-shelf { position: relative; margin: 0 0 56px; }
.gs-shelf[hidden] { display: none; }
.gs-shelf__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; }
.gs-shelf__title { width: auto; margin: 0; color: var(--gs-ink); font: 600 34px/1.1 var(--gs-serif); }
/* The shelf title is a link to the natural-stone page (Jay 2026-10-23 13:33): the H2 stays, a sage underline on hover. */
.gs-shelf__title-link, .gs-shelf__title-link:visited { color: inherit; text-decoration: none; }
.gs-shelf__title-link:hover, .gs-shelf__title-link:focus-visible { color: inherit; text-decoration: underline; text-decoration-color: #666666; text-decoration-thickness: 1px; text-underline-offset: 6px; } /* 1px #666, never green (Jay 26 Oct 14:40) */
.gs-shelf__title-link:focus-visible { outline: 2px solid var(--gs-head); outline-offset: 3px; }
.gs-shelf__count { color: var(--gs-muted); font: 700 11px/1.3 var(--gs-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.gs-shelf__all { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--gs-ink); font: 700 14px/1.2 var(--gs-sans); } /* the arrow + hover: the shared swp-link--arrow */
a.gs-shelf__all.swp-link--arrow { align-items: center; } /* the shared rule's baseline would leave the text at the top of the 44px tap row and the centred arrow below it (QA 27 Oct) */
/* Sizes: tiles 148 × 220, the selected card 2.5 × a tile; a 20 % sliver of the previous card peeks in on the
   left (the viewport reaches into the page gutter by --gs-peek and pads the same amount, so the selected
   card still starts at the content edge). The row slides with one transform; the widths animate. */
.gs-shelf--focus { --gs-tile: 136px; --gs-sel: 340px; --gs-h: 220px; --gs-gap: 12px; --gs-peek: 40px; contain: layout; } /* the peek = the 40px gap beside the filter column, so nothing overlaps it (Jay 21:28); 136/340 = 4 full tiles + a 28px peek in the 960px main column (CV3, Jay 23 Oct); contain: layout (not paint: paint would clip the sliver in the gap) keeps a slide or a filter change from re-laying out the page */
/* Short shelves (Jay 21:28, item 5): when the visible cards fit the row (Quartzite 4, Cleft & Riven 4, a
   filtered shelf), collection.js adds is-short: the tiles grow to fill the row (object-fit: cover crops, never
   stretches), no right fade, no arrows; shelves that overflow keep sliding. */
.gs-shelf--focus.is-short .gs-fcard:not(.is-selected) { flex: 1 1 var(--gs-tile); width: auto; max-width: calc(var(--gs-tile) * 1.6); }
.gs-shelf--focus.is-short .gs-focus__viewport::after, .gs-shelf--focus.is-short .gs-shelf__arrow { display: none; }
/* The optional "See all N →" tile (only printed when the element's "cap" option is set). */
.gs-fcard--more .gs-fcard__more { display: flex; align-items: center; justify-content: center; padding: 12px; background: #ffffff; border: 1px solid var(--gs-line); color: var(--gs-ink); font: 700 14px/1.3 var(--gs-sans); text-align: center; }
.gs-fcard--more .gs-fcard__more:hover { background: var(--gs-ink); color: #ffffff; }
/* Speed: the shelves below the first are rendered only when they come near the screen (content-visibility),
   so the 46 cards + 46 info blocks do not all cost style / layout before the banner paints; the intrinsic size
   keeps the page length (no layout shift). */
.gs-shelf--focus + .gs-shelf--focus { content-visibility: auto; contain-intrinsic-size: auto 520px; }
@media (max-width: 549px) {
	.gs-shelf--focus + .gs-shelf--focus { contain-intrinsic-size: auto 460px; }
}
.gs-focus { position: relative; }
.gs-focus__viewport { position: relative; margin-left: calc(-1 * var(--gs-peek)); padding: 0 0 0 var(--gs-peek); overflow: hidden; }
.gs-focus__viewport::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 90px; background: linear-gradient(to right, rgba(245, 243, 238, 0), var(--gs-warm) 85%); pointer-events: none; }
.gs-focus__viewport:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 4px; }
.gs-focus__row {
	display: flex;
	gap: var(--gs-gap);
	margin: 0;
	padding: 4px 0 8px;
	list-style: none;
	transform: translateX(calc(-1 * var(--gs-i, 0) * (var(--gs-tile) + var(--gs-gap))));
	transition: transform 0.5s ease-out;
}
.gs-coll .gs-focus__row > .gs-fcard { margin: 0; } /* Flatsome indents list items */
.gs-fcard { position: relative; flex: 0 0 var(--gs-tile); width: var(--gs-tile); height: var(--gs-h); transition: flex-basis 0.5s ease-out, width 0.5s ease-out; }
.gs-fcard[hidden] { display: none; }
.gs-fcard.is-selected { flex-basis: var(--gs-sel); width: var(--gs-sel); }
/* A wider listing page (Settings › Page width) has the 250px filter column (1b): the tiles ~8% narrower (136 → 125px) so
   6 whole stones still fit at 1440+ (Jay 2026-10-24, SH1 c). Under 1100px the narrower-screen sizes below apply. */
@media (min-width: 1100px) {
	body.gs-wide .gs-shelf--focus { --gs-tile: 125px; }
}
.gs-fcard__link { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 3px; background: var(--gs-tile); color: #ffffff; }
.gs-fcard__swatch { position: absolute; inset: 0; display: block; }
.gs-fcard__swatch picture, .gs-fcard__swatch .gs-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-fcard.is-texture-crop:not(.has-thumb) .gs-card__img { transform: scale(2.2); } /* no flat swatch: a close crop of the installed photo */
.gs-fcard__photo { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 0.5s ease-out; }
.gs-fcard__photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-fcard.is-selected .gs-fcard__photo { opacity: 1; }
.gs-fcard__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 10px 10px;
	background: linear-gradient(to top, rgba(14, 20, 16, 0.78), rgba(14, 20, 16, 0));
	color: #ffffff;
	font: 700 13px/1.25 var(--gs-sans);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity 0.3s;
}
.gs-fcard.is-selected .gs-fcard__name { opacity: 0; }
/* The selected card: a white frame ring over the photo, the "Installed" tag, the swatch chip. */
.gs-fcard.is-selected .gs-fcard__link { box-shadow: 0 0 0 1px var(--gs-ink), 0 10px 24px rgba(30, 40, 30, 0.18); }
.gs-fcard.is-selected .gs-fcard__link::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #ffffff; pointer-events: none; }
.gs-fcard__tag { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 9px; background: rgba(255, 255, 255, 0.92); color: var(--gs-ink); font: 700 10px/1.2 var(--gs-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.gs-fcard__chip { position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 56px; height: 56px; overflow: hidden; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); background: var(--gs-tile); }
.gs-fcard__chip-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-fcard__link:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 3px; }
@media (hover: hover) {
	.gs-fcard:not(.is-selected) .gs-fcard__link:hover { box-shadow: 0 0 0 2px var(--gs-ink); }
}
/* Arrows: round buttons over the row's ends, shown on hover / keyboard focus (desktop); hidden on phones (swipe). */
.gs-shelf__arrow {
	position: absolute;
	top: calc(var(--gs-h, 220px) / 2 + 4px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border: 1px solid var(--gs-line);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(30, 40, 30, 0.18);
	color: var(--gs-ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.15s, background-color 0.15s;
}
.gs-shelf__arrow[data-gs-shelf-prev] { left: calc(var(--gs-peek) + 10px); }
.gs-shelf__arrow[data-gs-shelf-next] { right: 10px; }
.gs-shelf--focus:hover .gs-shelf__arrow, .gs-shelf--focus:focus-within .gs-shelf__arrow, .gs-shelf__arrow:focus-visible { opacity: 1; }
.gs-coll .gs-shelf__arrow:disabled { opacity: 0 !important; pointer-events: none; }
.gs-shelf__arrow:not(:disabled):hover { background: var(--gs-ink); color: #ffffff; }
.gs-shelf__arrow:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 2px; }
/* The info panel under the row: every stone's words are in the HTML; the selected one shows. The height is
   reserved (no layout shift when the words change). */
/* No "View stone" / "+ Add to My List" under it any more (Jay 2026-10-24): the selected photo and the name are the links
   to the stone, and the block is only as tall as its words, so the next shelf's title follows at the shelves' usual gap. */
.gs-focus__info { padding-top: 14px; contain: content; } /* its 46 hidden blocks never affect the layout outside it (cheap win 2, 23 Oct) */
.gs-finfo[hidden] { display: none; }
.gs-finfo__name { margin: 0 0 4px; font: 600 30px/1.1 var(--gs-serif); color: var(--gs-ink); }
.gs-finfo__name a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.15s, text-decoration-color 0.15s; }
.gs-finfo__name a:hover, .gs-finfo__name a:focus-visible { color: var(--gs-head); text-decoration-color: #666666; } /* 1px #666, never green (Jay 26 Oct 14:40) */
.gs-finfo__meta { margin: 0 0 8px; color: var(--gs-muted); font: 700 11px/1.4 var(--gs-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.gs-finfo__desc { max-width: 46ch; margin: 0; color: var(--gs-text); font: 400 15px/1.55 var(--gs-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1099px) {
	.gs-shelf--focus { --gs-tile: 128px; --gs-sel: 320px; --gs-h: 196px; }
}
@media (max-width: 849px) {
	.gs-shelf--focus { --gs-peek: calc(var(--gs-tile) * 0.2 + var(--gs-gap)); } /* no column: the peek reaches into the page gutter */
}
/* Natural-stone pages (round 3): one grid of that stone's cards, 4 per row (3 under 1100px, 2 on phones). */
.gs-shelf--grid .gs-shelf__head { margin-bottom: 18px; }
.gs-shelf--grid .gs-shelf__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gs-gap); margin: 0; padding: 6px 0 12px; list-style: none; }
.gs-coll .gs-shelf--grid .gs-shelf__list > .gs-card { margin: 0; }
.gs-shelf--grid .gs-card { position: relative; }
.gs-card[hidden] { display: none; }
.gs-shelf--grid .gs-card__link { display: block; color: var(--gs-ink); }
.gs-shelf--grid .gs-card__swatch { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gs-tile); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.gs-shelf--grid .gs-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-shelf--grid .gs-card.is-texture-crop .gs-card__img { transform: scale(2.2); }
.gs-shelf--grid .gs-card.has-thumb .gs-card__img { transform: none; }
.gs-shelf--grid .gs-card__swatch picture { display: block; width: 100%; height: 100%; }
.gs-card__name { display: block; margin: 12px 0 2px; color: var(--gs-ink); font: 600 24px/1.15 var(--gs-serif); }
.gs-card__meta { display: block; color: var(--gs-muted); font: 700 11px/1.4 var(--gs-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.gs-coll .gs-card__list {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin: 0;
	padding: 0 10px;
	background: rgba(255, 255, 255, 0.94);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--gs-ink);
	font: 700 13px/1 var(--gs-sans);
	letter-spacing: 0;
	text-transform: none;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.15s;
}
.gs-card__list-s, .gs-card__list-in { display: none; }
.gs-card__list.is-in .gs-card__list-l { display: none; }
.gs-card__list.is-in .gs-card__list-in { display: inline; }
.gs-card__list.is-in { background: var(--gs-ink); color: #ffffff; opacity: 1; }
.gs-card__list.is-busy { pointer-events: none; }
.gs-shelf--grid .gs-card__link:focus-visible { outline: none; }
.gs-shelf--grid .gs-card__link:focus-visible .gs-card__swatch { outline: 2px solid var(--gs-ink); outline-offset: 3px; }
.gs-card__list:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 2px; opacity: 1; }
.gs-card:hover .gs-card__list, .gs-card:focus-within .gs-card__list { opacity: 1; }
@media (hover: hover) {
	.gs-shelf--grid .gs-card:hover .gs-card__swatch { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(30, 40, 30, 0.16); }
	.gs-coll .gs-card__list:not(.is-in):hover { background: var(--gs-ink); color: #ffffff; }
}
@media (max-width: 1099px) {
	.gs-shelf--grid .gs-shelf__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 549px) {
	.gs-coll { --gs-gap: 14px; }
	.gs-shelf { margin-bottom: 40px; }
	.gs-shelf__title { font-size: 30px; }
	/* Phones: the selected card about 62 % of the width, tiles about 26 %; swipe, no arrows. */
	.gs-shelf--focus { --gs-tile: 26vw; --gs-sel: 62vw; --gs-h: 150px; --gs-gap: 8px; }
	.gs-shelf__arrow { display: none; }
	.gs-focus__viewport::after { width: 40px; }
	.gs-fcard__name { padding: 26px 8px 8px; font-size: 11px; }
	.gs-fcard__tag { left: 8px; top: 8px; padding: 4px 7px; font-size: 9px; }
	.gs-fcard__chip { right: 8px; bottom: 8px; width: 44px; height: 44px; }
	.gs-focus__info { padding-top: 12px; }
	.gs-finfo__name { font-size: 26px; }
	.gs-shelf--grid .gs-shelf__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gs-gap); }
	.gs-shelf--grid .gs-card__name { font-size: 24px; }
	.gs-coll .gs-card__list {
		position: static;
		display: inline-flex;
		min-height: 36px;
		margin-top: 2px;
		padding: 0;
		background: none;
		color: var(--gs-head);
		font: 700 13px/1 var(--gs-sans);
		text-decoration: underline;
		text-underline-offset: 3px;
		opacity: 1;
	}
	.gs-card__list-l { display: none; }
	.gs-card__list-s { display: inline; }
	.gs-card__list.is-in { background: none; color: var(--gs-ink); text-decoration: none; }
	.gs-card__list.is-in .gs-card__list-s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.gs-entry__btn, .gs-card__swatch, .gs-card__list, .gs-focus__row, .gs-fcard, .gs-fcard__photo, .gs-fcard__name, .gs-shelf__arrow { transition: none; }
	.gs-entry__btn:hover, .gs-card:hover .gs-card__swatch { transform: none !important; }
}
/* #945 (Jay 10 Nov, the 1360 page width): the "More about" text on a material page ran the full 1360px (~170 characters a
   line); it stops at 760px (~75-95 characters). */
.gs-more-about :is(p, ul, ol) { max-width: 760px; }