/**
 * Out-N-Out Product Grid — Featured Slider layout.
 * (Grid layout styles live with the shared product-card stylesheet.)
 * Handle: oon-widget-product-grid. One product per view: card + large showcase
 * image, with vertical pagination dots. Mirrors the live featured slider.
 */
.oon-product-slider {
	position: relative;
	width: 100%;
	max-width: 1140px;   /* live featured container width */
	margin-inline: auto;
}

/* Vertical pagination dots — absolute, middle-left (like the live slider). */
.oon-product-slider__dots {
	position: absolute;
	left: clamp(0px, 1.5%, 18px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.oon-product-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--oon-color-heading, #332d55);
	border-radius: var(--oon-radius-full, 9999px);
	background: transparent;
	cursor: pointer;
	transition: background-color var(--oon-transition, 0.25s ease), transform var(--oon-transition, 0.25s ease);
}
.oon-product-slider__dot.is-active {
	background: var(--oon-color-heading, #332d55);
	transform: scale(1.15);
}
.oon-product-slider__dot:focus-visible {
	outline: 2px solid var(--oon-color-accent, #9a84c8);
	outline-offset: 2px;
}

.oon-product-slider__viewport {
	width: 100%;
	overflow: hidden;
}
.oon-product-slider__track {
	display: flex;
	will-change: transform;
	transition: transform 0.5s ease;
}
.oon-product-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* Two equal halves (like the live 50/50 slider): product card sits toward the
   centre of the left half, the square showcase image toward the centre of the
   right half, with space around each. Left padding clears the absolute dots. */
.oon-product-slider__inner {
	display: grid;
	grid-template-columns: 1fr 1fr; /* two equal halves, like the live 50/50 flex row */
	align-items: center;
	column-gap: 0;
}
.oon-product-slider--img-left .oon-product-slider__inner {
	direction: rtl;
}
.oon-product-slider--img-left .oon-product-slider__inner > * {
	direction: ltr;
}
/* Card centred within the left half (space on both sides, dots to the left). */
.oon-product-slider__card {
	justify-self: center;
	width: 100%;
	max-width: 282px;
}
.oon-product-slider__card .oon-product-card {
	text-align: center;
}
/* Stacked, full-width CTAs (Shop Now + WhatsApp Order) like the live card. */
.oon-product-slider__card .oon-product-card__buttons {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.oon-product-slider__card .oon-product-card__shop,
.oon-product-slider__card .oon-product-card__whatsapp,
.oon-product-slider__card .oon-product-card__atc {
	width: 100%;
}
/* Showcase image fills the right half (square, ~570px like live). */
.oon-product-slider__showcase {
	justify-self: stretch;
	width: 100%;
	max-width: 570px;
	min-width: 0;
}
.oon-product-slider__showcase-media {
	display: block;
	overflow: hidden;
	border-radius: var(--oon-radius-sm, 4px);
}
.oon-product-slider__showcase-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform var(--oon-transition, 0.25s ease);
}
.oon-product-slider__showcase-media:hover img {
	transform: scale(1.03);
}

/* Reduced motion: no sliding transition. */
@media (prefers-reduced-motion: reduce) {
	.oon-product-slider__track { transition: none; }
}

/* Tablet/mobile: hide the large showcase image (as the live slider does),
   show only the product-card slider centered, dots moved to the bottom. */
@media (max-width: 1024px) {
	.oon-product-slider__inner {
		grid-template-columns: 1fr;
		padding-left: 0;
		padding-bottom: 34px;
		justify-items: center;
	}
	.oon-product-slider__showcase {
		display: none;
	}
	.oon-product-slider__card {
		justify-self: center;
		max-width: 340px;
	}
	.oon-product-slider__dots {
		left: 50%;
		top: auto;
		bottom: 0;
		transform: translateX(-50%);
		flex-direction: row;
	}
}