/**
 * Precision Product Carousel — carousel layer
 * Version 3.0.0
 *
 * Viewport, track, arrows and the "Explore" call-to-action.
 * Builds on pcp-core.css.
 */

/* -----------------------------------------------------------------
 * 1. Viewport and track
 * ----------------------------------------------------------------- */

.pcp-carousel__viewport {
	width: 100%;
	/* Room for the card hover lift and its shadow, which the scroll
	   container would otherwise clip. */
	padding: 6px 0 20px;
	margin-bottom: -14px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.pcp-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.pcp-carousel__viewport:focus-visible {
	outline: 2px solid rgba(20, 49, 76, 0.45);
	outline-offset: 4px;
	border-radius: 12px;
}

.pcp-carousel__track {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: var(--pcp-gap);
}

/* One rule covers every column count on every breakpoint. */
.pcp-product-carousel .pcp-carousel__card {
	flex: 0 0 calc((100% - (var(--pcp-cols) - 1) * var(--pcp-gap)) / var(--pcp-cols));
	scroll-snap-align: start;
}

@media (max-width: 767px) {
	.pcp-carousel__viewport {
		scroll-snap-type: x mandatory;
	}
}

/* -----------------------------------------------------------------
 * 2. Arrows
 * ----------------------------------------------------------------- */

.pcp-carousel__arrows {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.pcp-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(20, 49, 76, 0.18);
	border-radius: 999px;
	background: #fffcf8;
	color: #14314c;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-user-select: none;
	user-select: none;
	transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pcp-carousel__arrow:hover:not(:disabled) {
	transform: translateY(-2px);
	border-color: currentColor;
}

.pcp-carousel__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pcp-carousel__arrow:disabled {
	opacity: 0.32;
	cursor: default;
}

.pcp-carousel__arrow svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Nothing to scroll: dim the arrows, or hide them if the widget says so. */
.pcp-product-carousel.is-static .pcp-carousel__arrow {
	opacity: 0.45;
}

.pcp-product-carousel.pcp-hide-static-arrows.is-static .pcp-carousel__arrow {
	display: none;
}

@media (max-width: 480px) {
	.pcp-carousel__arrow {
		width: 42px;
		height: 42px;
	}
}

/* -----------------------------------------------------------------
 * 3. "Explore" call-to-action
 * ----------------------------------------------------------------- */

.pcp-carousel__cta-row {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.pcp-carousel__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #14314c;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.8px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pcp-carousel__cta:hover {
	transform: translateY(-2px);
}

.pcp-carousel__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pcp-carousel__cta svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.pcp-carousel__cta:hover svg {
	transform: translateX(3px);
}

/* Compact variant sitting next to the arrows. */
.pcp-carousel__cta--header {
	min-height: 46px;
	padding: 12px 20px;
	font-size: 11px;
}

@media (max-width: 767px) {
	.pcp-carousel__cta--header {
		display: none;
	}
}

/* -----------------------------------------------------------------
 * 4. Reduced motion
 * ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pcp-carousel__viewport {
		scroll-behavior: auto;
	}

	.pcp-carousel__arrow,
	.pcp-carousel__cta,
	.pcp-carousel__cta svg {
		transition: none;
	}
}