/*
 * «Схожі товари» as rows: the second chance for the shopper whose landing
 * product missed. Dense evidence rows — photo, name, the deciding
 * measurement, price, and how often this shelf's buyers pick each one — at
 * the height of the tray's rows, so the two lists on one page read as one
 * hand (23.09.2026). Neutral chrome: gold belongs to the top-up tray, this
 * list persuades with numbers.
 */
.gsl-similar {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.gsl-similar__title {
	font-family: var(--wp--preset--font-family--fixel-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.gsl-similar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.gsl-similar__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.gsl-similar__item:first-child {
	border-top: 0;
}

/* The rows past the fourth wait behind «Ще N схожих»; the grid above
   would otherwise outrank the attribute. */
.gsl-similar__item[hidden] {
	display: none;
}

.gsl-similar__more {
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--brand-action);
	cursor: pointer;
}

.gsl-similar__more:hover {
	text-decoration: underline;
}

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

.gsl-similar__thumb img {
	display: block;
	width: 64px;
	height: 64px;
	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-similar__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gsl-similar__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-similar__name:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-similar__meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 2px;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
	align-items: baseline;
}

.gsl-similar__measure {
	white-space: nowrap;
}

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

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

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

/* --- the evidence ---------------------------------------------------------- */
/* «19% обирають», in the line with the size and the price. */
.gsl-similar__share {
	font-weight: 700;
	color: var(--wp--preset--color--brand-text);
	white-space: nowrap;
}

/* --- the add controls ----------------------------------------------------- */

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

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

.gsl-similar__add {
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--30);
	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-similar__add:hover {
	background: var(--wp--preset--color--brand-wash);
}

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

.gsl-similar__qty {
	display: inline-flex;
	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-similar__qty[hidden] {
	display: none;
}

.gsl-similar__step {
	width: 34px;
	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-similar__value {
	width: 32px;
	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);
}

/* Beside the sections instead of under them: the column's rule replaces
   the block's own, and the title lines up with «Відгуки» across the gap. */
.gsl-similar--aside {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

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

.gsl-similar__short {
	display: none;
}

.gsl-similar__label {
	pointer-events: none;
}

/* --- the strip look (owner, 29.09.2026; Catalog\AddonLook) -----------------
 *
 * The same strip as the tray's (see bought-together/style.css): photo, price,
 * the differing part of the name, a «+». The size and the «N% обирають» go —
 * the size is in the name, and a percentage on a card is a number nobody
 * compares across a scroll. All six stand in the row; «Ще N» has no job. */

.gsl-look-rail .gsl-similar {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.gsl-look-rail .gsl-similar__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);
	border: 0;
	border-radius: 0;
	background: none;
}

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

@media (max-width: 781px) {
	.gsl-look-rail .gsl-similar__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-similar__item,
.gsl-look-rail .gsl-similar__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;
	border: 0;
	background: none;
	scroll-snap-align: start;
}

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

.gsl-look-rail .gsl-similar__thumb img {
	width: 150px;
	height: 150px;
	object-fit: contain;
	border: 0;
}

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

.gsl-look-rail .gsl-similar__full,
.gsl-look-rail .gsl-similar__measure,
.gsl-look-rail .gsl-similar__share,
.gsl-look-rail .gsl-similar__more {
	display: none;
}

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

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

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

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

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

.gsl-look-rail .gsl-similar__add::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
}

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

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

.gsl-look-rail .gsl-similar__item--incart .gsl-similar__side {
	grid-column: 1 / -1;
}

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

.gsl-look-rail .gsl-similar__item--incart .gsl-similar__qty {
	width: 100%;
	justify-content: space-between;
}