/*
 * The top-up tray («Часто купують разом»).
 *
 * A golden card under the buy button: warm enough to read as an offer, not an
 * ad, and the only place on the product page that borrows the cream ground —
 * the tray is where the small-order fee gets worked off, and it should look
 * like the promo it functionally is. Rows are dense list rows, not tiles:
 * the shopper is completing an order, not browsing.
 */
.gsl-bt {
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--medium);
}

.gsl-bt__title {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--gold-text);
	margin: 0;
}

.gsl-bt__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- progress toward the fee-free mark ------------------------------- */

.gsl-bt__goal {
	margin-bottom: var(--wp--preset--spacing--30);
}

.gsl-bt__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--gold);
	overflow: hidden;
}

.gsl-bt__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--gold-icon),
		var(--wp--preset--color--gold)
	);
	transition: width 0.3s ease;
}

/* Gone once the cart stands at the mark (the script sets `hidden`). */
.gsl-bt__goal[hidden] {
	display: none;
}

.gsl-bt__cap {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--gold-text);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.gsl-bt__captext {
	min-width: 0;
}

/* The «?»: a small ring, a 44px tap zone around it. */
.gsl-bt__why-btn {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	min-height: 0;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--gold-icon);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--gold-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	align-self: center;
}

.gsl-bt__why-btn::after {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
}

.gsl-bt__why-btn[aria-expanded="true"] {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.gsl-bt__why {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

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

@media (prefers-reduced-motion: reduce) {
	.gsl-bt__fill {
		transition: none;
	}
}

/* --- rows -------------------------------------------------------------- */

.gsl-bt__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A row just revealed rises into place; none of that when motion is reduced. */
.gsl-bt__item.is-new {
	animation: gsl-bt-in 0.24s ease;
}

@keyframes gsl-bt-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gsl-bt__item.is-new {
		animation: none;
	}
}

.gsl-bt__item {
	display: grid;
	/* The action column is a fixed width, not `auto`: «+ Додати» is 90 px wide
	   and the stepper it turns into is 112, so an `auto` column re-measured
	   itself on the tap, the name column lost 22 px and the name re-wrapped
	   under the finger that had just tapped (owner, 21.09.2026). Both controls
	   now fill the same column and nothing moves. */
	grid-template-columns: 72px minmax(0, 1fr) 112px;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) 0;
	border-top: 1px solid var(--wp--preset--color--gold);
}

/* `hidden` must beat the grid above, or collapsed rows stay visible. */
.gsl-bt__item[hidden] {
	display: none;
}

/* A row already in the cart: white, lifted out of the cream list like a card
   of its own. It used to take the brand's pale blue and bleed to the tray's
   edges - a cold band across a warm panel, covering the gold hairline and
   ending past the padding the other rows keep (owner, 21.09.2026: «меняется
   дизайн, некачественно сделано»). White says «this one is picked» in the
   tray's own language, and the inset keeps the list a list. */
.gsl-bt__item--incart {
	background: var(--wp--preset--color--base);
	margin-inline: calc(-1 * var(--wp--preset--spacing--20));
	padding-inline: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--small);
}

.gsl-bt__thumb img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--small);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.gsl-bt__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gsl-bt__name {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsl-bt__name:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-bt__meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.gsl-bt__price {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
}

.gsl-bt__price del {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.gsl-bt__price ins {
	text-decoration: none;
}

/* --- the add button and its stepper ------------------------------------ */

.gsl-bt__add {
	width: 100%;
	min-height: 44px;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--brand-text);
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--small);
	cursor: pointer;
	white-space: nowrap;
}

.gsl-bt__add:hover {
	background: var(--wp--preset--color--brand-wash);
}

.gsl-bt__qty {
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	border: 1.5px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--brand-wash);
}

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

.gsl-bt__step {
	width: 36px;
	min-height: 44px;
	border: 0;
	background: none;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--brand-text);
	cursor: pointer;
}

.gsl-bt__value {
	width: 34px;
	border: 0;
	background: none;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--brand-text);
}

/* --- the way to the rest ------------------------------------------------ */

/* One button the width of the list, under it, that says how many rows it
   brings. Not a link in the heading — row headings are read by a quarter
   of shoppers, and after the rows (RecGaze, 2026). `hidden` beats the block
   display, so the button does not outlive the rows it revealed. */
.gsl-bt__more[hidden] {
	display: none;
}

.gsl-bt__more {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: var(--wp--preset--spacing--30);
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--gold-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.gsl-bt__more:hover {
	border-color: var(--wp--preset--color--gold-hover);
	color: var(--wp--preset--color--ink);
}

.gsl-bt__action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--10);
}

/* --- the name: full in the rows, the differing part in the strip ----------- */

.gsl-bt__short,
.gsl-bt__family {
	display: none;
}

/* The rows, when the neighbour shares the page's family: what differs
   first and bold, three lines at most (a colour comes last, after «довжина
   120 см 1 шт.», and two lines cut exactly it); the shared words once, small, under
   it (owner, 29.09.2026). The strip look keeps its own name rules below. */
:root:not(.gsl-look-rail) .gsl-bt__name--diff {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

:root:not(.gsl-look-rail) .gsl-bt__name--diff .gsl-bt__full {
	display: none;
}

:root:not(.gsl-look-rail) .gsl-bt__name--diff .gsl-bt__short {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

:root:not(.gsl-look-rail) .gsl-bt__name--diff .gsl-bt__family {
	display: block;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The button's words: the rows print them, the strip keeps them for screen
   readers and shows a «+». */
.gsl-bt__label {
	pointer-events: none;
}

/* --- the strip look (owner, 29.09.2026; Catalog\AddonLook) -----------------
 *
 * Next's «Клієнти також купили»: no cream card and no frames, a large photo,
 * the price first and the name under it in grey, a hairline above and below.
 * All twelve partners stand in one row that scrolls sideways and snaps to a
 * card; on the phone the row runs to the screen's edges so the third card
 * peeks out and says «there is more». «Показати ще» has nothing to do here. */

.gsl-look-rail .gsl-bt {
	position: relative;
	padding: var(--wp--preset--spacing--40) 0;
	background: none;
	border: 0;
	border-block: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
}

.gsl-look-rail .gsl-bt__title {
	color: var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--20);
}

.gsl-look-rail .gsl-bt__list {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--wp--preset--spacing--10);
}

.gsl-look-rail .gsl-bt__list::-webkit-scrollbar {
	display: none;
}

@media (max-width: 781px) {
	.gsl-look-rail .gsl-bt__list {
		margin-inline: calc(-1 * var(--wp--custom--gutter));
		padding-inline: var(--wp--custom--gutter);
		scroll-padding-inline: var(--wp--custom--gutter);
	}
}

.gsl-look-rail .gsl-bt__item,
.gsl-look-rail .gsl-bt__item[hidden] {
	flex: 0 0 150px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 36px;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	scroll-snap-align: start;
}

.gsl-look-rail .gsl-bt__thumb {
	grid-column: 1 / -1;
}

.gsl-look-rail .gsl-bt__thumb img {
	width: 150px;
	height: 150px;
	object-fit: contain;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
}

.gsl-look-rail .gsl-bt__text {
	flex-direction: column-reverse;
	align-self: start;
}

.gsl-look-rail .gsl-bt__full {
	display: none;
}

.gsl-look-rail .gsl-bt__short {
	display: inline;
}

.gsl-look-rail .gsl-bt__name {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.gsl-look-rail .gsl-bt__price {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.gsl-look-rail .gsl-bt__action {
	align-self: start;
}

.gsl-look-rail .gsl-bt__add {
	position: relative;
	width: 36px;
	height: 36px;
	min-height: 0;
	border-radius: 50%;
}

/* 36px to look at, 44px to hit. */
.gsl-look-rail .gsl-bt__add::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
}

.gsl-look-rail .gsl-bt__add::before {
	content: "+";
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1;
}

.gsl-look-rail .gsl-bt__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* In the cart: the stepper takes the card's full width under the name, and
   the photo gets the brand's ring — the card says «picked» without a band. */
.gsl-look-rail .gsl-bt__item--incart .gsl-bt__action {
	grid-column: 1 / -1;
}

.gsl-look-rail .gsl-bt__item--incart .gsl-bt__thumb img {
	outline: 2px solid var(--wp--preset--color--brand-action);
	outline-offset: -2px;
}

.gsl-look-rail .gsl-bt__more {
	display: none;
}