/**
 * Product slider: template-parts/product/related.php. Related products on
 * the product page (2162:937) and "You might also like" in the cart
 * (2186:1512); assets/js/related.js.
 */

/* Related products (2162:937): 120px above and under (fluid), heading with
 * the arrows, cards 40px below. Always a scroll-snap slider (client, 16 Oct
 * 2026): about 1.15 cards visible on phones and 2.5 on tablets, so the next
 * card peeks in; 4 from 1024, as framed. Card width =
 * (row width - gaps between the whole cards) / cards visible. On phones and
 * tablets the row runs to the screen edge, as the homepage rows. */
.related {
	padding: var(--section-space) 0;
}

.related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.related__title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

.related__arrows {
	display: flex;
	flex: none;
	gap: 12px;
}

.related__arrows[hidden] {
	display: none;
}

/* 52px circles: white with a line border, the next one orange. */
.related__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	cursor: pointer;
	transition: all 0.2s ease;
}

.related__arrow--next {
	border-color: var(--color-orange);
	background: var(--color-orange);
	color: var(--color-white);
}

.related__arrow:hover {
	border-color: var(--color-ink);
}

.related__arrow--next:hover {
	border-color: var(--color-orange-dark);
	background: var(--color-orange-dark);
}

.related__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.related__list {
	--related-visible: 1.15;
	--related-gaps: 1; /* gaps between the whole cards in view */
	--related-gap: 12px;

	display: flex;
	gap: var(--related-gap);
	/* 20px above and 36px below for the card hover lift and its shadow, which
	 * the scroller would clip; the margins take the room back. */
	margin: calc(var(--space-md) - 20px) calc(-1 * var(--container-gutter)) -36px;
	padding: 20px var(--container-gutter) 36px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-padding-inline: var(--container-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.related__list::-webkit-scrollbar {
	display: none;
}

.related__item {
	display: flex;
	flex: none;
	width: calc((100% - var(--related-gap) * var(--related-gaps)) / var(--related-visible));
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.related__list {
		--related-visible: 2.5;
		--related-gaps: 2;
		--related-gap: var(--space-sm);
	}
}

@media (min-width: 1024px) {
	.related__list {
		--related-visible: 4;
		--related-gaps: 3;
		--related-gap: var(--space-md);

		/* Side room for the hover shadow of the first and last card in view: one
		 * gap, so the next card starts right at its outer edge and never peeks. */
		margin: calc(var(--space-lg) - 20px) calc(-1 * var(--related-gap)) -36px;
		padding: 20px var(--related-gap) 36px;
		scroll-padding-inline: var(--related-gap);
	}
}

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