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

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

.pcar-arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-2);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.pcar-arrow:hover,
.pcar-arrow:focus-visible { border-color: var(--red); color: var(--red); }

.pcar-arrow:disabled {
	opacity: 0.3;
	cursor: default;
	border-color: var(--line-2);
	color: var(--ink);
}

.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-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; }
}