/* components/carousel.css
   Horizontal product carousel.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

/* ---------- product carousel ----------
   Three cards in view; the rest scroll. Built on scroll-snap rather than a
   transform track, so touch gets native momentum and swipe for free and the row
   still scrolls if the script never runs. */
.pcar { display: flex; flex-direction: column; gap: 22px; }

.pcar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* The track fills the wrap, so the first card lines up with the heading above it.
   Padding the rail to make room for the arrows pushed every card 66px to the right of
   the heading, which is what made both carousels look off. The arrows are positioned
   against the rail instead - see the two rules further down. */
.pcar-rail { position: relative; }

.pcar-nav { display: flex; gap: 8px; }

.pcar-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--line-2);
	background: #fff;
	color: var(--navy);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(20, 22, 60, 0.08);
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Straddling the edge of the cards by default: below about 1320px the page has no
   gutter left to put a 46px button in, and pushing the cards inward is what threw the
   alignment out in the first place. */
.pcar-prev { left: -20px; }

.pcar-next { right: -20px; }

.pcar-arrow:hover,
.pcar-arrow:focus-visible { border-color: var(--navy); background: var(--navy); color: #fff; }

.pcar-arrow:disabled {
	opacity: 0.28;
	cursor: default;
	border-color: var(--line-2);
	background: #fff;
	color: var(--ink);
	box-shadow: none;
}

.pcar-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 52px) / 3);
	gap: 26px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Setting overflow on one axis makes the other clip too, which would cut off the
	   card's hover lift. Pad for it and pull the padding back off the layout. */
	padding: 8px 0 10px;
	margin: -8px 0 -10px;
}

.pcar-track::-webkit-scrollbar { display: none; }

.pcar-item { scroll-snap-align: start; }

.pcar-dots { display: flex; gap: 6px; }

.pcar-dot {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	background: var(--line-2);
	cursor: pointer;
	transition: background 0.2s ease;
}

.pcar-dot:hover { background: var(--mute); }

.pcar-dot[aria-current="true"] { background: var(--red); }

/* Nothing to page through until the track actually overflows; the script decides. */
.pcar:not(.has-nav) .pcar-nav,
.pcar:not(.has-nav) .pcar-arrow,
.pcar:not(.has-nav) .pcar-dots { display: none; }


@media (prefers-reduced-motion: reduce) {
	.pcar-arrow,
		.pcar-dot { transition: none; }
}

@media (max-width: 980px) {
	.pcar-track { grid-auto-columns: calc((100% - 26px) / 2); }
}

@media (max-width: 680px) {
	.pcar-track { grid-auto-columns: 82%; }

	.pcar-head { flex-wrap: wrap; }
}

/* Once the window is wide enough to have real gutters, the arrows move out of the cards
   entirely and keep 20px clear of them. The cards stay put either way. */
@media (min-width: 1320px) {
	.pcar-prev { left: auto; right: calc(100% + 20px); }

	.pcar-next { right: auto; left: calc(100% + 20px); }
}

@media (max-width: 680px) {
	.pcar-arrow { width: 38px; height: 38px; }

	.pcar-prev { left: -14px; }

	.pcar-next { right: -14px; }
}