/**
 * 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;
}

/*
 * Mobile-audit "Product Carousels" pass (2026-09-15, explicit design
 * decision) — arrows removed entirely below 600px, same reasoning as
 * the Hero carousel's matching change (homepage.css): a touchscreen's
 * primary interaction here is the native swipe/momentum scroll
 * .carousel-track already supports (overflow-x: auto), so a
 * mouse-sized arrow is redundant at best. Unlike the Hero carousel,
 * this component gets no dots to replace them — it's a continuous
 * scroll of up to 12 individually-snapping cards, not a small fixed
 * set of "pages," so a discrete page indicator doesn't map onto it the
 * way it does onto 3 hero slides. The actual affordance doing the work
 * here is `.carousel-track .product-card`'s fixed 210px width: a phone
 * viewport never shows an exact whole number of cards, so the next one
 * is always left visibly "peeking" at the edge — the same swipe signal
 * virtually every mobile shop's product row relies on (Amazon,
 * Nordstrom, etc.), no dots needed. This also makes the 34px arrow
 * tap-target flagged during the Shop Categories audit moot on mobile —
 * the arrows simply aren't there to tap; they're unchanged at 34px on
 * desktop/tablet, where a mouse cursor makes that a non-issue.
 *
 * .section-footer's "Show All" button lives outside .carousel-wrap
 * entirely (see product-carousel.php) and shares no selectors with
 * .carousel-arrow, so it's untouched by this — verified via Playwright
 * render test at 375px/320px across all four carousels this component
 * serves (New Arrivals, Best Offers, Trending, Related Products).
 */
@media (max-width: 600px) {
	.carousel-arrow {
		display: none;
	}
}