/*
 * «У вашому кошику» on the home page (owner, 29.09.2026).
 *
 * Ships with the block: the render callback prints these class names. The
 * card is the cart page's small «Ви переглядали» card on purpose — the same
 * 156px picture card, so the two personal strips read as one family — with
 * a quantity tag on the photo and the line's sum instead of a unit price.
 * The strip runs to the phone's right edge so the last card is cut by it;
 * a desktop gets arrows in the heading.
 */
/* border-box: the layout gives the section the content width, and the panel's
   padding has to fit inside it, not widen it past the column. */
.gsl-mycart {
	box-sizing: border-box;
	margin-block: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--cream);
}

/* Hidden until the cart has answered; a hidden section takes no height. */
.gsl-mycart[hidden] {
	display: none;
}

.gsl-mycart__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.gsl-mycart__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

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

.gsl-mycart__nav {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-inline-start: auto;
	align-self: center;
}

.gsl-mycart__arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
	cursor: pointer;
}

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

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

.gsl-mycart__arrow--prev {
	padding-inline-end: 2px;
}

.gsl-mycart__arrow--next {
	padding-inline-start: 2px;
}

.gsl-mycart__strip {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--10);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

.gsl-mycart__card {
	flex: 0 0 156px;
	scroll-snap-align: start;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
}

.gsl-mycart__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.gsl-mycart__pic {
	position: relative;
	display: block;
	line-height: 0;
}

.gsl-mycart__pic img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--small);
}

/* How many of it are in the cart — only when more than one. */
.gsl-mycart__qty {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--10);
	inset-inline-start: var(--wp--preset--spacing--10);
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
}

.gsl-mycart__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.25;
}

.gsl-mycart__price {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

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

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

/* The one action: back to the cart. A full-width gold bar on a phone, where
   the thumb is; a button of its own size on a desktop. */
.gsl-mycart__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 48px;
	margin-top: var(--wp--preset--spacing--40);
	padding: 0 var(--wp--preset--spacing--50);
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
}

.gsl-mycart__go:hover {
	filter: brightness(0.96);
}

/* The strip runs through the panel's right padding to its edge, so the card
   that does not fit is cut by the panel — the one «there is more» signal
   people read — and never spills off the cream. */
.gsl-mycart__strip {
	margin-inline-end: calc(-1 * var(--wp--preset--spacing--50));
	padding-inline-end: var(--wp--preset--spacing--50);
}

@media (max-width: 640px) {
	.gsl-mycart {
		margin-block: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--40);
	}

	.gsl-mycart__title {
		font-size: var(--wp--preset--font-size--medium);
		letter-spacing: 0;
	}

	.gsl-mycart__strip {
		margin-inline-end: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline-end: var(--wp--preset--spacing--40);
	}
}

@media (min-width: 900px) {
	.gsl-mycart__nav {
		display: flex;
	}

	.gsl-mycart__go {
		display: inline-flex;
	}
}