/* "Don't Miss Out On These" carousel on product pages (see
   class-whspto-related-products.php). Modeled on the thatgoodcode.com query
   carousel: one scroll-snap row that bleeds to the window's right edge.
   --whspto-vw is the viewport width WITHOUT the scrollbar (set in
   related-carousel.js) so the bleed never causes a sideways page scroll. */

.wp-block-woocommerce-related-products .wp-block-query { position: relative; }

.wp-block-woocommerce-related-products ul.wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 24px;
	width: calc(50% + var(--whspto-vw, 100vw) / 2);
	max-width: none;
	margin: 0;
	padding: 0 calc(var(--whspto-vw, 100vw) / 2 - 50%) 8px 0;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.wp-block-woocommerce-related-products ul.wp-block-post-template::-webkit-scrollbar { display: none; }

.wp-block-woocommerce-related-products ul.wp-block-post-template > li {
	flex: 0 0 auto;
	width: 17rem !important;
	max-width: 70vw !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

/* Arrows: centered on the product images (top set in JS). Prev sits on the
   first card; next sits at the window's right edge where the cards bleed. */
.whspto-carousel-nav {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
	z-index: 5;
}
.whspto-carousel-btn {
	--btn: 48px;
	position: absolute;
	top: var(--whspto-nav-top, 50%);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--btn);
	height: var(--btn);
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: #000;
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background-color .3s ease, border-color .3s ease, opacity .3s ease, visibility .3s;
}
.whspto-carousel-btn--prev { left: 12px; }
.whspto-carousel-btn--next { right: calc((100% - var(--whspto-vw, 100vw)) / 2 + 12px); }
.whspto-carousel-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.whspto-carousel-btn:hover {
	background-color: var(--wp--preset--color--contrast-2, #c10304);
	border-color: var(--wp--preset--color--contrast-2, #c10304);
}
.whspto-carousel-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast-2, #c10304);
	outline-offset: 3px;
}
.whspto-carousel-btn.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 600px) {
	.whspto-carousel-btn { --btn: 40px; }
	.whspto-carousel-btn svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-related-products ul.wp-block-post-template { scroll-behavior: auto; }
}