/*
 * Home page: hero, section headings, category tiles.
 *
 * Enqueued only where `is_front_page()` — see functions.php. Nothing here may be
 * referenced from another template without moving the rule to style.css first.
 */

/* ------------------------------------------------------------- home page ---- */
.gsl-hero {
	margin-block: var(--wp--preset--spacing--60);
}

.gsl-hero__main {
	border-radius: var(--wp--custom--radius--large);
	padding: var(--wp--preset--spacing--80);
	color: var(--wp--preset--color--base);
	background:
		linear-gradient(
			120deg,
			var(--wp--preset--color--ink) 0%,
			var(--wp--preset--color--brand-text) 58%,
			var(--wp--preset--color--brand-action) 100%
		);
	position: relative;
	overflow: hidden;
	min-height: 300px;
	justify-content: center;
}

.gsl-hero__main::after {
	content: "";
	position: absolute;
	right: -70px;
	top: -70px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 34px solid color-mix(in srgb, var(--wp--preset--color--brand) 16%, transparent);
}

.gsl-hero__main > * {
	position: relative;
}

.gsl-eyebrow {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--30);
}

.gsl-hero__title {
	color: var(--wp--preset--color--base) !important;
	max-width: 14ch;
	text-wrap: balance;
	line-height: 1.08;
}

.gsl-hero__lead {
	color: var(--wp--preset--color--brand-light);
	max-width: 42ch;
	margin-bottom: var(--wp--preset--spacing--60);
}

.gsl-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent);
	color: var(--wp--preset--color--base);
}

.gsl-btn-ghost .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
	border-color: var(--wp--preset--color--base);
}

.gsl-hero__side {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
}

.gsl-hero__card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	flex: 1;
}

.gsl-hero__card:hover {
	border-color: var(--wp--preset--color--brand);
}

.gsl-hero__ic {
	width: 42px;
	height: 42px;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--brand-action);
	flex-shrink: 0;
}

/* Keyed on the text wrapper, not on `.gsl-hero__card span`. The icon is a span
   too, and `.gsl-hero__card span` (0,1,1) outranks `.gsl-hero__ic` (0,1,0) — so
   the icon square lost `display: grid` to `display: block` and its brand colour
   to the caption's grey. It kept its size and its background, which is why the
   square looked right and the glyph sat in its top-left corner. */
.gsl-hero__txt b {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.gsl-hero__txt span {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.gsl-sec {
	margin-block: var(--wp--preset--spacing--80);
}

/* The banner strip follows the hero and carries no heading of its own, so the
   full section gap would read as a hole between two pieces of the same block. */
.gsl-sec--tight {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
}

.gsl-sec__head {
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.gsl-sec__head p {
	margin: 0;
	padding-bottom: 3px;
}

.gsl-sec__sub {
	color: var(--wp--preset--color--muted);
}

.gsl-sec__more a {
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 640px) {
	.gsl-hero__main {
		padding: var(--wp--preset--spacing--60) var(--wp--custom--gutter);
	}
}


/* ---------------------------------------------------------------- v2 ----
   Hero from the prototype: a radial glow out of the corner instead of the
   diagonal band, gold pill CTA, and the side cards go white-on-shadow. */
.gsl-hero__main {
	background: radial-gradient(
		circle at 85% 120%,
		var(--wp--preset--color--brand-text),
		var(--wp--preset--color--ink) 55%
	);
	border-radius: var(--wp--custom--radius--large);
}

.gsl-hero .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
}

.gsl-hero__card {
	border: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}

.gsl-hero__card:hover {
	box-shadow: 0 8px 22px color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent);
}

.gsl-hero__ic {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--gold-text);
}

/* Full bleed on phones (owner, 11.08): the banner sheds the page gutters
   and its corners, edge to edge like a strip; the cards below keep their
   padding. Lives here, not in style.css — this file loads after it and the
   base radius rule above would win otherwise.

   The bleed hangs on the columns WRAPPER, not on the column (01.09). On the
   column it silently grew the panel to 492px on a 360px screen: the column
   is a flex item with core's `flex-basis: 100% !important` and grow, and a
   `-50vw` margin hands the flex line 180px of free space the grow then
   absorbs — the panel's right 132px, and the text laid out into them, fell
   past the screen edge. Both hero CTAs clipped on this for three weeks. */
@media (max-width: 640px) {
	/* Core's constrained layout pins child margins and max-width with
	   !important of its own, so the bleed has to shout back. */
	.gsl-hero {
		position: relative;
		left: 50%;
		width: 100vw;
		max-width: none !important;
		margin-left: -50vw !important;
		margin-right: 0 !important;
	}

	.gsl-hero__main {
		border-radius: 0;
	}
}

/* On phones the side column bows out: since v4 it carries the product photo,
   and the fold there belongs to the category tiles — the photo would push
   the shop's actual navigation a full screen down. */
@media (max-width: 640px) {
	.gsl-hero__side {
		display: none;
	}
}

/* The band sits straight on the banner's hem — no hero bottom margin, no
   layout gap. */
@media (max-width: 640px) {
	.gsl-hero {
		margin-block-end: 0;
	}
}

/* -------------------------------------------------- v3: смужки переваг ----
   The owner's pick after six mocked styles (12.08): the cream 2x2 panel is
   gone; facts run as thin white strips woven between the sections. S1 is
   the numbers row straight from the trust block he circled; S2 is a single
   fact with a ringed icon. Phones only — the desktop keeps its belt. */
.gsl-tstrip,
.gsl-fstrip {
	display: none;
}

@media (max-width: 640px) {
	.gsl-tstrip {
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		text-align: center;
		background: var(--wp--preset--color--base);
		border-block: 1px solid var(--wp--preset--color--hairline);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
		position: relative;
		left: 50%;
		width: 100vw;
		max-width: none !important;
		margin-left: -50vw !important;
		margin-block: var(--wp--preset--spacing--30) !important;
	}

	.gsl-tstrip__cell {
		flex: 1;
	}

	.gsl-tstrip__cell + .gsl-tstrip__cell {
		border-left: 1px solid var(--wp--preset--color--hairline);
	}

	.gsl-tstrip__cell b {
		display: block;
		font-size: var(--wp--preset--font-size--price);
		font-weight: 800;
		line-height: 1.1;
		color: var(--wp--preset--color--ink);
	}

	.gsl-tstrip__cell b.gsl-tstrip__stars {
		color: var(--wp--preset--color--gold);
		font-size: var(--wp--preset--font-size--medium);
		letter-spacing: 2px;
	}

	.gsl-tstrip__cell span {
		font-size: var(--wp--preset--font-size--label);
		color: var(--wp--preset--color--muted);
	}

	.gsl-fstrip {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		background: var(--wp--preset--color--base);
		border-block: 1px solid var(--wp--preset--color--hairline);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--contrast);
		position: relative;
		left: 50%;
		width: 100vw;
		max-width: none !important;
		margin-left: -50vw !important;
		margin-block: var(--wp--preset--spacing--30) !important;
	}

	.gsl-fstrip b {
		color: var(--wp--preset--color--ink);
	}

	.gsl-fstrip__ic {
		width: 28px;
		height: 28px;
		flex-shrink: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--brand-wash);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--gold-icon);
		font-style: normal;
	}

	/* Кремова панель більше не рендериться, але правило лишалося б мертвим
	   вантажем — ховаємо на випадок кешу розмітки. */
	.gsl-usp2 {
		display: none !important;
	}
}


/* v3.1 — единый ритм (владелец, 12.08): пустая секция не занимает место,
   зазоры между блоками одинаковые и небольшие. */
.gsl-sec:empty {
	display: none;
}

@media (max-width: 640px) {
	.gsl-home .gsl-sec {
		margin-block: var(--wp--preset--spacing--30);
	}
}


/* v3.2 (owner, 13.08): the consult strip carries its own actions — call,
   Viber, Telegram — so «підкажемо» is one tap, not a hunt for contacts.
   40px circles plus a 4px invisible halo reach the 44px touch floor. */
@media (max-width: 640px) {
	.gsl-fstrip__txt {
		flex: 1;
		min-width: 0;
	}

	.gsl-fstrip__btns {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		flex-shrink: 0;
	}

	.gsl-fstrip__btns a {
		position: relative;
		width: 40px;
		height: 40px;
		display: grid;
		place-items: center;
		border: 1px solid var(--wp--preset--color--border-strong);
		border-radius: 50%;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--brand-text);
	}

	.gsl-fstrip__btns a::after {
		content: "";
		position: absolute;
		inset: -4px;
	}
}

/* Full-bleed elements set width:100vw and carry padding; without border-box
   the padding lands outside the viewport and the right edge of the content
   is clipped — the delivery strip lost its last letters this way, the consult
   strip its third button. */
@media (max-width: 640px) {
	.gsl-hero,
	.gsl-hero__main,
	.gsl-tstrip,
	.gsl-fstrip {
		box-sizing: border-box;
	}
}


/* v4 — variant A of the home blueprint (owner, 01.09): one CTA, a quiet
   delivery promise under it, and the side column trades its three promise
   cards for a real product photo — the promises already run in the belt and
   the strips; the photo is the assortment made visible. */
.gsl-hero__promise {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--brand-light);
}

.gsl-hero__photo {
	margin: 0;
	height: 100%;
	min-height: 300px;
}

.gsl-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}


/* v4.1 — the shop's reviews on the front page (blueprint 01.09): the one
   trust asset no competitor in the niche shows. Numbers first, then three
   living quotes; the stars borrow the tstrip's gold. */
.gsl-reviews__grid {
	display: grid;
	grid-template-columns: minmax(180px, 0.8fr) repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.gsl-reviews__score {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	text-align: center;
}

.gsl-reviews__score b {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.gsl-reviews__stars {
	color: var(--wp--preset--color--gold);
	letter-spacing: 3px;
	font-size: var(--wp--preset--font-size--medium);
}

.gsl-reviews__count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.gsl-review {
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.gsl-review blockquote {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

.gsl-review figcaption {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.gsl-reviews__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.gsl-reviews__grid {
		grid-template-columns: 1fr;
	}
}


/* v5 — signboards in rhythm (owner, 17.09): the delivery and return facts run
   as one strip, and on the desktop that strip stays visible between the last
   two signboards, so two promo cards never stand back to back there. Phones
   keep the thin strip rules above. */
@media (min-width: 641px) {
	.gsl-fstrip--wide {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--30);
		background: var(--wp--preset--color--base);
		border-radius: var(--wp--custom--radius--medium);
		box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		margin-block: var(--wp--preset--spacing--80);
		font-size: var(--wp--preset--font-size--base);
		color: var(--wp--preset--color--contrast);
	}

	.gsl-fstrip--wide b {
		color: var(--wp--preset--color--ink);
	}

	.gsl-fstrip--wide .gsl-fstrip__ic {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--brand-wash);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--gold-icon);
		font-style: normal;
	}
}


/* v6 — the hole before the footer (design pass, 23.09): the last section's
   bottom margin, main's bottom padding and the footer's top margin stacked
   into ~160px of empty grey on both viewports, and the reviews looked like
   the page had run out of things to say. The home page keeps one gap; the
   other templates still carry the footer's own margin. */
.gsl-home > :last-child {
	margin-block-end: 0;
}

.gsl-main.gsl-home {
	padding-block-end: var(--wp--preset--spacing--60);
}

main.gsl-home + footer .gsl-foot {
	margin-top: 0;
}



/* v7 — the design pass (owner, 23.09: «все так і А2»). Six things, all on
   the home page only. Measured before: on a 1440×900 screen the first section
   tile began at 927px, the panel alone was 463; on a 390×844 phone the panel
   took half the screen, the reviews stacked 629px tall, the footer ran 968.

   A2 — the panel ends with a row of facts about the shop (years, rating,
   warehouse, dispatch cut-off) where the delivery promise stood; the promise
   already runs in the belt. Less padding, a smaller ring: the panel is ~60px
   shorter and the first row of tiles reaches a 900px screen. The row is a
   wide-screen thing — the phone keeps its own strip under the banner. */
@media (min-width: 641px) {
	.gsl-hero {
		margin-block: var(--wp--preset--spacing--60) 0;
	}

	.gsl-hero__main {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
		min-height: 0;
	}

	.gsl-hero__main::after {
		width: 240px;
		height: 240px;
		border-width: 26px;
		right: -60px;
		top: -60px;
	}

	.gsl-hero__lead {
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.gsl-hero__photo {
		min-height: 0;
	}

	.gsl-hero__promise {
		display: none;
	}

	.gsl-hero__facts {
		display: flex;
		margin-top: var(--wp--preset--spacing--50);
		padding-top: var(--wp--preset--spacing--40);
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	}

	.gsl-hero__fact {
		flex: 1;
		min-width: 0;
	}

	.gsl-hero__fact + .gsl-hero__fact {
		padding-left: var(--wp--preset--spacing--40);
		border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	}

	.gsl-hero__fact b {
		display: block;
		font-size: var(--wp--preset--font-size--price);
		font-weight: 800;
		line-height: 1.1;
		color: var(--wp--preset--color--base);
	}

	.gsl-hero__fact b.gsl-hero__stars {
		font-size: var(--wp--preset--font-size--medium);
		letter-spacing: 2px;
		color: var(--wp--preset--color--gold);
	}

	.gsl-hero__fact span {
		display: block;
		margin-top: 3px;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--brand-light);
	}

	/* The tiles follow the panel at one section gap, not at the panel's
	   old bottom margin plus the section's top one. */
	.gsl-tstrip + .gsl-sec {
		margin-top: var(--wp--preset--spacing--70);
	}
}

@media (max-width: 640px) {
	.gsl-hero__facts {
		display: none;
	}
}

/* The phone's panel: 34 → 30px title, 16 → 14px lead, tighter paddings — the
   panel drops from 416px to ~330, and two rows of tiles sit on the first
   screen with the trust strip. The preset classes carry !important of their
   own, so the two type rules outrank them by specificity, not by order. */
@media (max-width: 640px) {
	.gsl-hero__main {
		padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter);
	}

	.gsl-eyebrow {
		margin-bottom: var(--wp--preset--spacing--20);
	}

	.gsl-hero .gsl-hero__title {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}

	.gsl-hero .gsl-hero__lead {
		font-size: var(--wp--preset--font-size--base) !important;
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.gsl-hero__promise {
		margin-top: var(--wp--preset--spacing--30);
	}
}

/* «Консультація майстра» — one quiet line with a chevron (owner, 18.09: the
   three buttons «трохи збивають»). A native <details>: the tap opens the
   same three ways to reach a person, as labelled pills, and nothing needs a
   script. The strip's flex rules above still shape the summary row. */
@media (max-width: 640px) {
	.gsl-fstrip--consult {
		display: block;
		padding: 0;
	}

	.gsl-fstrip--consult summary {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		list-style: none;
		cursor: pointer;
	}

	.gsl-fstrip--consult summary::-webkit-details-marker {
		display: none;
	}

	.gsl-fstrip--consult summary::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-left: auto;
		margin-right: 6px;
		flex-shrink: 0;
		border-right: 2px solid var(--wp--preset--color--brand-text);
		border-bottom: 2px solid var(--wp--preset--color--brand-text);
		transform: rotate(-45deg);
		transition: transform 0.2s ease;
	}

	.gsl-fstrip--consult[open] summary::after {
		transform: rotate(45deg);
	}

	.gsl-fstrip--consult .gsl-fstrip__btns {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
		padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}

	.gsl-fstrip--consult .gsl-fstrip__btns a {
		width: auto;
		height: 40px;
		padding: 0 var(--wp--preset--spacing--40);
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		border-radius: var(--wp--custom--radius--pill);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gsl-fstrip--consult summary::after {
		transition: none;
	}
}

/* Reviews on the phone: a swipe rail instead of a stack. The score card goes
   first and narrower, the quotes follow at three quarters of the screen so
   the next one always peeks in — the same cue the product rails use. */
@media (max-width: 640px) {
	.gsl-reviews__grid {
		display: flex;
		gap: var(--wp--preset--spacing--30);
		margin-inline: calc(-1 * var(--wp--custom--gutter));
		padding-inline: var(--wp--custom--gutter);
		padding-bottom: var(--wp--preset--spacing--20);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.gsl-reviews__grid::-webkit-scrollbar {
		display: none;
	}

	.gsl-reviews__score,
	.gsl-review {
		flex: 0 0 76%;
		scroll-snap-align: start;
	}

	.gsl-reviews__score {
		flex-basis: 46%;
	}
}