/*
 * Single product page.
 *
 * The first screen follows the concept the owner picked on 17.09.2026
 * («Знайомий GSL», concept 2): the heading and the article first, the photo
 * in a white card, then a vertical deal — price, the pack box, the fact
 * chips, the colours, quantity with its running total, and a full-width
 * gold button with the wishlist heart beside it. Denser than the concept
 * on purpose (the owner's second variant): a 200px photo on the phone keeps
 * the button inside a 390×844 first screen. On the desktop the trust tiles
 * and the consultant stand under the photo, where the deal column used to
 * leave half a metre of white (owner, 23.09.2026); on the phone they keep
 * their old place after the deal. Below the fold the page stands in two
 * columns on the desktop.
 *
 * Small on purpose: the gallery, the price and the add-to-cart form are
 * WooCommerce blocks styled through theme.json, the plugin's blocks carry
 * their own CSS, and this file owns only the page chrome and the form's
 * WooCommerce classes (the quantity field, the button).
 */

/* ---------------------------------------------------------------- ground ---- */
/* The page stands on the same ground as the rest of the storefront (owner,
   17.09.2026) — the theme's surface — and the white cards (photo, chips,
   the consultant) read as cards on it. The warm paper of August («Тепла
   майстерня») is gone with the layout it belonged to. */

/* Room for the sticky buy bar so the footer's last lines stay reachable. */
@media (max-width: 782px) {
	.gsl-product {
		padding-bottom: 84px;
	}
}

/* One quiet line of trail, never a paragraph: the crumb is a map. The
   product-name crumb itself is trimmed server-side (Catalog\Breadcrumbs). */
.gsl-product .gsl-crumbs {
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: var(--wp--preset--spacing--20);
}

.gsl-pd__top {
	margin-block: var(--wp--preset--spacing--30) 0;
}

/* --------------------------------------------------------------- heading ---- */
/* The name first, the article right under it: what the shopper reads out
   on the phone and what the order is checked against. The heading is the
   short display name (Catalog\DisplayName); the numbers it used to carry
   live a finger below. */
.gsl-pd__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.gsl-pd__heading > * {
	margin: 0;
}

.gsl-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--fixel-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-wrap: balance;
	margin: 0;
}

.gsl-pd__skurow {
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
}

.gsl-pd__sku {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* ----------------------------------------------------------------- photo ---- */
/* A white card with a hairline, the photo whole inside it — never cropped:
   the photo is the contract, and the owner already sent the cream card away
   (18.08) because a tinted ground fought the merchandise. */
.gsl-pd__photo {
	position: relative;
	/* Its own stacking context: WooCommerce seats the lightbox magnifier
	   inside the gallery at z-index 99, above the sticky header's 70, and
	   on the way up the magnifier rode over the search field (owner,
	   07.10.2026). Isolated, the 99 counts only among the card's own
	   children, and the header stays above everything the card holds. */
	isolation: isolate;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--30);
}

.gsl-pd__photo .woocommerce-product-gallery {
	position: relative;
	margin: 0;
}

.gsl-pd__photo .gsl-pd__count,
.gsl-pd__photo .gsl-pd__dots {
	display: none;
}

.gsl-pd__photo .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: contain;
	border-radius: 0;
	background: var(--wp--preset--color--base);
}

/* Several photos: WooCommerce's slider (theme support in functions.php)
   turns the stack into swipeable slides with a strip of thumbnails under
   them; the active one wears the brand ring. The slider's own inline
   styles do the sliding, this only dresses the strip — with selectors
   heavy enough (0,5,1) to outweigh WooCommerce's classic «25% and float»
   rules for the same list, which weigh (0,4,3). */
.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	overflow: visible;
}

.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs li {
	flex: none;
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}

.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	cursor: pointer;
	opacity: 0.85;
}

.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs img:hover,
.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs img.flex-active {
	border-color: var(--wp--preset--color--brand-action);
	opacity: 1;
}

/* ----------------------------------------------------------------- trust ---- */
/* The assurance tiles and the consultant share one column of rhythm; the
   group exists so the template can carry them together (under the photo on
   the desktop, after the deal on the phone) and the blocks keep their own
   chrome. */
.gsl-pd .gsl-pd__trust {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	/* Core's flow layout hands every non-first child of a group a top
	   margin; the left column's gap already spaces this one. */
	margin-block: 0;
	/* One frame for the assurances and the consultant (owner, 30.09.2026):
	   they were five separate boxes under the buy button. */
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
}

.gsl-pd .gsl-pd__trust > * + * {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
}

/* Two classes: the tiles' own block margin weighs one, and order between
   the theme's file and the block's is not a contract. */
.gsl-pd .gsl-pd__trust > * {
	margin-block: 0;
}

/* The article on the left, availability on the right, one line under the
   name — the concept's «Артикул … / Готово до відправки» folded into the
   space the phone can spare. */
.gsl-pd__meta {
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
}

.gsl-pd__meta .gsl-pd__stock {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* A sold-out product already says so under its name; the purchase form
   said it a second time in plain text between the chips and the lead
   (design review, 28.09.2026). */
.gsl-product .gsl-pd .wc-block-add-to-cart-form > .stock.out-of-stock {
	display: none;
}

/* ------------------------------------------------------------------ deal ---- */
/* Three columns on the desktop since 07.10.2026 (ADR 0038): the photo, the
   facts (chips, colours, six key rows, the lead) and a buy card that
   follows the scroll. The template wraps every fact in a group of its own
   so the phone can seat them in its order; each wrapper is a flex item of
   the facts column here and of the page's flow on the phone. A wrapper
   whose block printed nothing (no colours, in stock) is hidden, so an empty
   box costs no gap. */
.gsl-pd__facts {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.gsl-pd__facts > *,
.gsl-pd__buy > *,
.gsl-pd__tray > * {
	margin-block: 0;
}

.gsl-pd__facts > :empty,
.gsl-pd__buy > :empty,
.gsl-pd__tray:empty {
	display: none;
}

/* The price and the unit line share one row, on one baseline (owner,
   24.09.2026: under the price the line «з'їдає місце»). When the line
   does not fit beside the price it drops to the next row whole — a
   wrapping flex container places an item on a new line before it
   shrinks one — so the phone shows «34 ₴  за упаковку · 25 г · ≈95 шт ·
   ≈0,36 ₴/шт» on one line where it fits and on two where it does not. */
.gsl-pd__pricebox {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
}

.gsl-pd__pricebox > * {
	margin: 0;
}

.gsl-pd__price {
	font-size: var(--wp--preset--font-size--price-large);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--wp--preset--color--ink);
}

/* The form as a small grid: the quantity label, the stepper with the
   running total beside it, and the button on its own row with the heart
   (Catalog\PdpQuantity prints the label and the total, Catalog\Wishlist
   appends the heart; the classes without the shop prefix are WooCommerce
   form chrome and are styled here, ADR 0018).

   The selectors are deliberately heavy: WooCommerce's own block stylesheet
   lays form.cart out as a grid of its own — «min-content auto auto», the
   button in column 2, everything else spanning — at (0,3,1), and only a
   heavier selector takes the layout back. */
.gsl-product .gsl-pd .gsl-pd__form form.cart {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"label qty total"
		"buy buy heart";
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin: 0;
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > .qty-label {
	grid-area: label;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > .quantity {
	grid-area: qty;
	display: flex;
	align-items: stretch;
	height: 48px;
	width: max-content;
	margin: 0;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > .quantity .qty {
	box-sizing: border-box;
	width: 48px;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 0;
	font: inherit;
	font-weight: 600;
	appearance: textfield;
}

.gsl-pd__form .quantity .qty::-webkit-outer-spin-button,
.gsl-pd__form .quantity .qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > .quantity .qty-step {
	width: 40px;
	border: 0;
	background: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > .quantity .qty-step:hover {
	background: var(--wp--preset--color--brand-wash);
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > .qty-total {
	grid-area: total;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
}

/* One pack costs what the price says; the total only appears once there
   is something to add up (owner, 17.09.2026). */
.gsl-product .gsl-pd .gsl-pd__form form.cart > .qty-total[hidden] {
	display: none;
}

/* The retail sum crossed out beside «Разом» once a wholesale step is reached
   (qty-stepper.js, Pricing\Wholesale): small and quiet, the sum below it is
   what is paid. */
.gsl-pd__form .qty-total__old {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.gsl-pd__form .qty-total__sum {
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

/* The buy button wears the storefront's gold (owner, 19.08.2026): every
   primary «купить» on this site is gold. Full width, the row's reason
   to exist; the wishlist heart — the one other button in the form — takes
   the cell beside it. */
.gsl-product .gsl-pd .gsl-pd__form form.cart > .single_add_to_cart_button {
	grid-area: buy;
	justify-self: stretch;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	white-space: nowrap;
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--gold-hover);
	color: var(--wp--preset--color--ink);
}

.gsl-product .gsl-pd .gsl-pd__form form.cart > button:not(.single_add_to_cart_button) {
	grid-area: heart;
	justify-self: end;
}

/* --------------------------------------------------------------- desktop ---- */
/* The concept's desktop: the heading top right, the photo card on the left
   spanning down, the deal under the heading. The two WordPress columns
   become one grid; the gallery column dissolves so the heading can take the
   right-hand cell while the left column — the photo card with the trust
   tiles and the consultant under it — takes the left.

   Three rows, the last one flexible: core's columns stylesheet pins
   «align-items: normal !important» on the container, and a left column
   taller than heading + deal would otherwise hand its excess to both rows
   and push the deal 140px down from the heading. A flexible third row
   swallows the excess instead. */
@media (min-width: 782px) {
	/* Tablet: two columns. The heading, the buy card and the facts stack in
	   the second column; the add-on tray spans both under the photo. The
	   fourth row is the flexible one: it swallows a photo column taller than
	   the stack, so the tray never floats away from the facts. */
	.wp-block-columns.gsl-pd__top {
		display: grid;
		grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr auto auto;
		column-gap: var(--wp--preset--spacing--70);
		row-gap: 0;
		align-items: start;
	}

	.gsl-pd__top > .gsl-pd__gallery,
	.gsl-pd__top > .gsl-pd__info {
		display: contents;
	}

	.gsl-pd__heading {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}

	.gsl-pd__left {
		grid-column: 1;
		grid-row: 1 / span 4;
		align-self: start;
	}

	.gsl-pd__top > .gsl-pd__buy {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}

	.gsl-pd__facts {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		margin-top: var(--wp--preset--spacing--40);
	}

	.gsl-pd__tray {
		grid-column: 1 / -1;
		grid-row: 5;
		align-self: start;
		margin-top: var(--wp--preset--spacing--50);
	}

	/* The lower deck is a row of the same grid, under the tray, so the buy
	   card's column runs the whole length of the product and the card can
	   stay in view beside the specifications and the similar strip. */
	.gsl-pd__lower {
		grid-column: 1 / -1;
		grid-row: 6;
		align-self: start;
	}

	/* The buy card: one framed object where six lines used to float — the
	   price, the quantity with the button, then the assurances and the
	   consultant under a hairline (desktop review, 07.10.2026: 12 of 17
	   leading shops frame the purchase). */
	.gsl-pd__top > .gsl-pd__buy {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--50);
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--medium);
	}

	.gsl-pd__price {
		font-size: var(--wp--preset--font-size--display);
	}

	.gsl-pd .gsl-pd__trust {
		padding: var(--wp--preset--spacing--30) 0 0;
		background: none;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--hairline);
		border-radius: 0;
	}

	/* One row in a wide card: the label, the stepper, the button, the heart. */
	.gsl-product .gsl-pd .gsl-pd__form form.cart {
		grid-template-columns: auto max-content minmax(0, 1fr) auto;
		grid-template-areas:
			"label qty buy heart"
			"total total total total";
	}
}

@media (min-width: 1200px) {
	/* Three columns: the photo, the facts, the card. The card spans every
	   row and sticks under the header while the facts and the tray scroll
	   past it; the tray takes the two left columns under the photo. */
	/* Rows: 1 heading · 2 chips · 3 colours · 4 key rows · 5 the lead,
	   folded · 6 «Є в наявності схоже» · 7 the flexible filler · 8 the lead,
	   unfolded · 9 the tray · 10 the lower deck. The facts column dissolves
	   into these rows so the one block that changes size — the lead — can
	   change place too: folded it is three lines in the facts column;
	   unfolded it steps under the photo across both left columns, where
	   a page of text reads at a page's width instead of running down a
	   360px column beside an empty photo column (owner, 07.10.2026). */
	.wp-block-columns.gsl-pd__top {
		grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 332px;
		grid-template-rows: auto auto auto auto auto auto 1fr auto auto auto;
		column-gap: var(--wp--preset--spacing--60);
	}

	.gsl-pd__left {
		grid-row: 1 / span 7;
	}

	.gsl-pd__info > .gsl-pd__facts {
		display: contents;
	}

	.gsl-pd__facts > * {
		grid-column: 2;
		align-self: start;
		margin-top: var(--wp--preset--spacing--30);
	}

	.gsl-pd__facts > .gsl-pd__chips {
		grid-row: 2;
		margin-top: 0;
	}

	.gsl-pd__facts > .gsl-pd__colors {
		grid-row: 3;
	}

	.gsl-pd__facts > .gsl-pd__keyspecs {
		grid-row: 4;
	}

	.gsl-pd__facts > .gsl-pd__lead {
		grid-row: 5;
	}

	.gsl-pd__facts > .gsl-pd__instead {
		grid-row: 6;
	}

	/* Unfolded («Читати далі», the button's own state): under the photo,
	   two columns wide, capped at a reading width. */
	.gsl-pd__facts > .gsl-pd__lead:has([aria-expanded="true"]) {
		grid-column: 1 / span 2;
		grid-row: 8;
		max-width: 76ch;
		margin-top: var(--wp--preset--spacing--50);
	}

	.gsl-pd__tray {
		grid-column: 1 / span 2;
		grid-row: 9;
	}

	.gsl-pd__lower {
		grid-column: 1 / span 2;
		grid-row: 10;
	}

	.gsl-pd__top > .gsl-pd__buy {
		grid-column: 3;
		grid-row: 1 / span 10;
		position: sticky;
		top: calc(var(--gsl-head-stuck, 61px) + var(--wp--preset--spacing--30));
	}

	/* A narrower column for the name: three lines of 24px read better than
	   four of 30px. */
	.gsl-product .wp-block-post-title {
		font-size: var(--wp--preset--font-size--large);
	}

	/* The narrow card: the stepper and the heart on one row, the button on
	   its own below, full width. */
	.gsl-product .gsl-pd .gsl-pd__form form.cart {
		grid-template-columns: auto max-content minmax(0, 1fr);
		grid-template-areas:
			"label qty heart"
			"buy buy buy"
			"total total total";
	}

	.gsl-product .gsl-pd .gsl-pd__form form.cart > button:not(.single_add_to_cart_button) {
		justify-self: end;
	}
}

/* ----------------------------------------------------------------- phone ---- */
/* The first screen is dense on purpose (owner, 18.08.2026, kept on
   17.09.2026): name, article, photo, price, pack, facts, colours, quantity
   and the button must share one 844px viewport — the ad visitor decides
   here. 210px of photo with the quantity label inline is what fits. */
@media (max-width: 781px) {
	.gsl-pd__top {
		margin-block: var(--wp--preset--spacing--20) 0;
	}

	.gsl-product .wp-block-post-title {
		font-size: var(--wp--preset--font-size--price);
		line-height: 1.3;
	}

	/* Every wrapper dissolves into the columns' own flex flow, and «order»
	   seats the blocks the way the phone had them before the desktop grew
	   its third column (07.10.2026): name, photo, price, chips, the form,
	   the lead, colours, the add-on tray, the trust lines. The six key rows
	   are a desktop device — the whole table stands a screen below — so
	   the phone does not print them. The row gap of the columns block
	   spaces the items; the heading's own margin would double it. */
	.gsl-pd__top > .gsl-pd__gallery,
	.gsl-pd__gallery > .gsl-pd__left,
	.gsl-pd__top > .gsl-pd__info,
	.gsl-pd__info > .gsl-pd__facts,
	.gsl-pd__top > .gsl-pd__buy {
		display: contents;
	}

	.gsl-pd__gallery .gsl-pd__heading,
	.gsl-pd__gallery .gsl-pd__photo,
	.gsl-pd__facts > *,
	.gsl-pd__buy > *,
	.gsl-pd__tray {
		flex: 0 0 100%;
		min-width: 0;
	}

	.gsl-pd__buy > .gsl-pd__pricebox,
	.gsl-pd__buy > .gsl-pd__promo {
		order: 1;
	}

	.gsl-pd__chips {
		order: 2;
	}

	.gsl-pd__buy > .gsl-pd__restock {
		order: 3;
	}

	.gsl-pd__buy > .gsl-pd__form {
		order: 4;
	}

	.gsl-pd__lead {
		order: 5;
	}

	.gsl-pd__instead {
		order: 6;
	}

	.gsl-pd__colors {
		order: 7;
	}

	.gsl-pd__keyspecs {
		display: none;
	}

	/* Core hands the second child of the info column a 16px top margin;
	   the row gap already spaces the tray. */
	.gsl-pd__tray {
		order: 8;
		margin-block: 0;
	}

	.gsl-pd__buy > .gsl-pd__trust {
		order: 9;
		gap: var(--wp--preset--spacing--20);
	}

	.gsl-pd__lower {
		order: 10;
		flex: 0 0 100%;
		min-width: 0;
	}

	.gsl-pd__heading {
		margin-bottom: 0;
	}

	/* Edge to edge, as Rozetka, Kasta and AliExpress show a phone the photo:
	   the card's hairline and cushion go, the photo takes the whole 390 and
	   grows from 342×210 to 390×260 (sizes research, owner 24.09.2026). The
	   photo is a flex item of the columns row, so the width must be said
	   twice: the basis grows by two gutters and the margins pull it out. */
	.gsl-pd__gallery .gsl-pd__photo {
		flex-basis: calc(100% + 2 * var(--wp--custom--gutter));
		max-width: none;
		margin-inline: calc(-1 * var(--wp--custom--gutter));
		padding: 0 0 var(--wp--preset--spacing--20);
		border: 0;
		border-radius: 0;
	}

	.gsl-pd__photo .woocommerce-product-gallery__image img {
		max-height: 260px;
	}

	/* One scrollable row on the phone: ten photos must not cost two rows
	   of the first screen. */
	.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 0 var(--wp--custom--gutter) 2px;
	}

	.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs li {
		width: 44px;
		height: 44px;
	}

	/* No strip at all on the phone (owner, 29.09.2026): it cost ~110px and
	   pushed the buy button under the first screen for every product with
	   more than one photo. The photo says «1 / 10» and shows dots instead
	   (assets/js/gallery-count.js); swiping does the rest. */
	.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .flex-control-thumbs {
		display: none;
	}

	.gsl-pd__photo .gsl-pd__count {
		position: absolute;
		left: var(--wp--custom--gutter);
		bottom: var(--wp--preset--spacing--20);
		z-index: 2;
		display: block;
		padding: 4px 10px;
		border-radius: 999px;
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		line-height: 1.3;
		font-variant-numeric: tabular-nums;
		opacity: 0.85;
		pointer-events: none;
	}

	.gsl-pd__photo .gsl-pd__dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(var(--wp--preset--spacing--20) + 9px);
		z-index: 1;
		display: flex;
		justify-content: center;
		gap: 6px;
		pointer-events: none;
	}

	.gsl-pd__photo .gsl-pd__dots[hidden] {
		display: none;
	}

	.gsl-pd__photo .gsl-pd__dots > span {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--wp--preset--color--border);
	}

	.gsl-pd__photo .gsl-pd__dots > .is-on {
		background: var(--wp--preset--color--contrast);
	}

	.gsl-product .gsl-crumbs {
		padding-block: var(--wp--preset--spacing--10);
		margin: 0;
	}

	.gsl-pd__price {
		font-size: var(--wp--preset--font-size--large);
	}

	/* No jump while the slider wakes up (speed audit 02.10.2026, CLS 0.16-0.18
	   on a product with several photos). Until WooCommerce wraps the slides
	   in its viewport they stand in a column: the photo block was 366 px,
	   then 561 for a frame as the slider measured itself, then 295, and the
	   price, the button and the text below jumped twice. Before the slider
	   only the first photo shows (the slider brings the rest), and the
	   viewport never grows past the 260 px a phone photo is allowed. The
	   selector is heavy (0,8,0) to outweigh WooCommerce's (0,5,2) rule that
	   shows the second photo as a quarter-width thumbnail. */
	.gsl-product .gsl-pd .gsl-pd__gallery .gsl-pd__photo .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
		display: none;
	}

	.gsl-pd__photo .woocommerce-product-gallery .flex-viewport {
		max-height: 260px;
	}
}

/* --------------------------- below the fold: the wide deck (07.10.2026) ---- */

/* Specifications in two pairs per row, «Схожі товари» as a strip of six,
   the service accordions as three tiles — every block as wide as the page.
   The 60/40 split of 14.09.2026 left half of each table row empty and
   showed three similar products where six fit; the blocks carry their own
   modifiers (gsl-sections--lower, gsl-similar--wide, gsl-service--row) so
   each side styles only its own classes. */
.gsl-pd__lower {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.gsl-pd__lower > * {
	margin-block: 0;
}

@media (max-width: 781px) {
	.gsl-pd__lower {
		gap: var(--wp--preset--spacing--40);
	}
}