/**
 * product-carousel.css
 *
 * The scrolling-carousel wrapper — distinct from the Product Card itself
 * (product-card.css). Shared by New Arrivals, Best Offers, Trending
 * Products (Homepage) and Related Products (Single Product Page). Per the
 * Reusable Component Architecture principle, one component, used
 * everywhere a horizontal product scroller appears.
 *
 * Ported directly from the approved homepage/single-product mockups.
 */

.carousel-wrap {
	position: relative;
}
.carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
	display: none;
}

/* Carousel-context override: cards are narrower and text is slightly
 * smaller than the full grid version, matching the approved mockup. The
 * base .product-card rules (product-card.css) still apply for anything
 * not overridden here — this is additive, not a re-implementation. */
.carousel-track .product-card {
	min-width: 210px;
	max-width: 210px;
	scroll-snap-align: start;
}

.carousel-arrow {
	position: absolute;
	/* Anchored to the vertical center of the product thumbnail itself (a
	 * fixed-height square), not a percentage of the whole card. Card
	 * heights vary slightly between sections (e.g. a card with a
	 * strikethrough "was" price is taller than one without), so a
	 * percentage-based top would land at a different pixel position per
	 * section. This keeps every carousel's arrows pixel-identical
	 * regardless of card content — see the approved homepage mockup's
	 * own comment explaining this same reasoning. */
	top: 105px; /* half of the 210px-wide (1:1 aspect ratio) thumbnail */
	margin-top: -17px; /* half the arrow's own 34px height, for exact centering */
	background: #fff;
	border: 1px solid #111;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	z-index: 5;
	font-size: 14px;
	cursor: pointer;
}
.carousel-arrow.prev {
	left: -14px;
}
.carousel-arrow.next {
	right: -14px;
}

.section-footer {
	text-align: center;
	margin-top: 24px;
}