/**
 * Single product — related products carousel (4-col grid desktop, Swiper below 1024px).
 */

.cb-product-related__bleed {
	--cb-product-related-nav-inset: 3.25rem;

	position: relative;
	width: 100%;
	overflow: visible;
}

.cb-product-related__carousel {
	position: relative;
	width: 100%;
	overflow: visible;
}

.cb-product-related__track {
	position: relative;
	width: 100%;
	padding-inline: var(--cb-product-related-nav-inset);
	box-sizing: border-box;
}

.cb-product-related__swiper-viewport {
	overflow: visible;
	padding: 0.5rem;
	box-sizing: border-box;
}

.cb-product-related__swiper {
	overflow: visible !important;
	width: 100%;
}

.cb-product-related__swiper .swiper-wrapper {
	align-items: stretch;
}

.cb-product-related__swiper .swiper-slide {
	height: auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
}

.cb-product-related__swiper .swiper-slide .cb-product-card {
	height: 100%;
}

.cb-product-related__nav {
	position: absolute;
	z-index: 5;
	margin-top: 0;
	transform: translateY(-50%);
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	user-select: none;
}

.cb-product-related__nav--prev {
	inset-inline-start: 0;
}

.cb-product-related__nav--next {
	inset-inline-end: 0;
}

.cb-product-related__nav.cb-swiper__prev:hover,
.cb-product-related__nav.cb-swiper__next:hover,
.cb-product-related__nav.cb-swiper__prev:focus-visible,
.cb-product-related__nav.cb-swiper__next:focus-visible,
.cb-product-related__nav.cb-swiper__prev:active,
.cb-product-related__nav.cb-swiper__next:active {
	transform: translateY(calc(-50% - 2px));
}

.cb-product-related__nav:focus {
	outline: none;
}

.cb-product-related__nav.cb-swiper__prev:disabled,
.cb-product-related__nav.cb-swiper__next:disabled,
.cb-product-related__nav.cb-swiper__prev.swiper-button-disabled,
.cb-product-related__nav.cb-swiper__next.swiper-button-disabled {
	transform: translateY(-50%);
}

.cb-product-related__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-6);
	width: 100%;
}

/* Desktop: 4-column grid */
@media (min-width: 1024px) {
	.cb-product-related__bleed {
		--cb-product-related-nav-inset: 0;
	}

	.cb-product-related__nav,
	.cb-product-related__pagination {
		display: none !important;
	}

	.cb-product-related__track {
		padding-inline: 0;
	}

	.cb-product-related__swiper-viewport {
		padding: 0;
	}

	.cb-product-related__swiper .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(var(--cb-product-related-cols, 4), minmax(0, 1fr));
		gap: var(--space-6);
		width: 100% !important;
		transform: none !important;
		box-sizing: border-box;
	}

	.cb-product-related__swiper .swiper-slide,
	.cb-product-related__swiper .cb-swiper-loop-clone {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		flex-shrink: initial;
	}

	.cb-product-related__swiper .cb-swiper-loop-clone,
	.cb-product-related__swiper .cb-product-related__slide--dup {
		display: none !important;
	}

	.cb-product-related__swiper .swiper-slide .cb-product-card {
		width: 100%;
		max-width: none;
	}
}

/* Tablet: horizontal slider (~2 cards visible) */
@media (max-width: 1023px) {
	.cb-product-related__bleed {
		--cb-product-related-nav-inset: 2.75rem;
	}

	/* Pin arrows to the square image center — not % of card height (varies per slide). */
	.cb-product-related__track {
		--cb-product-related-slide-w: min(
			320px,
			clamp(220px, calc((100% - 1rem) * 0.5 - var(--space-3)), 320px)
		);
	}

	.cb-product-related__nav {
		top: calc(0.5rem + (var(--cb-product-related-slide-w) / 2));
	}

	.cb-product-related__swiper .swiper-slide {
		width: clamp(220px, calc(50% - var(--space-3)), 320px);
		flex-shrink: 0;
	}

	.cb-product-related__swiper .swiper-slide .cb-product-card {
		width: 100%;
		max-width: 320px;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.cb-product-related__bleed {
		--cb-product-related-nav-inset: 0;
		width: calc(100% + (var(--cb-mobile-gutter) * 2));
		margin-inline: calc(var(--cb-mobile-gutter) * -1);
	}

	.cb-product-related__track {
		padding-inline: 0;
	}

	.cb-product-related__nav {
		display: none;
	}

	.cb-product-related__swiper-viewport {
		padding-inline: var(--cb-mobile-gutter);
	}

	.cb-product-related__swiper .swiper-slide {
		width: min(320px, calc(100vw - (var(--cb-mobile-gutter) * 2)));
	}
}