/**
 * Related products carousel on single-product page (2026-08-14).
 * Reuses the shared .danuko-product-grid/.danuko-product-card markup and
 * data (wc_get_related_products via danuko_get_related_products) -- this
 * block only overrides layout for the --carousel modifier, scoped so the
 * shared grid used on the homepage/shop/search/taxonomy pages is untouched.
 */
.danuko-carousel-wrap {
	position: relative;
}

.danuko-product-grid.danuko-product-grid--carousel {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	margin: 0 -4px;
	padding-left: 4px;
	padding-right: 4px;
}

.danuko-product-grid--carousel .danuko-product-card {
	flex: none;
	width: 240px;
	scroll-snap-align: start;
}

.danuko-carousel-arrow {
	position: absolute;
	top: 38%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--danuko-surface);
	border: 1px solid var(--danuko-border);
	box-shadow: var(--danuko-shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 4;
	color: var(--danuko-text);
	transition: background .15s ease, transform .12s ease, opacity .15s ease;
}

.danuko-carousel-arrow:hover {
	background: var(--danuko-ink-teal);
	color: var(--danuko-bg);
	transform: translateY(-2px);
}

.danuko-carousel-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.danuko-carousel-arrow svg {
	width: 19px;
	height: 19px;
}

.danuko-carousel-arrow--prev { left: -20px; }
.danuko-carousel-arrow--next { right: -20px; }

@media (max-width: 860px) {
	.danuko-carousel-arrow { display: none; }
	.danuko-product-grid--carousel .danuko-product-card { width: 200px; }
}

/* Card look intentionally NOT overridden here (removed 2026-08-15): the
   carousel used to render a full-bleed colored card with hidden wishlist/
   age-badge/button, cycling through five nth-child colors -- but that made
   the single-product related-products row look like a different design
   system than the homepage/shop/search grid, which all use the shared,
   unmodified .danuko-product-card look (white surface card, category-color
   cap bar + tinted media background, visible wishlist/age-badge/button).
   This file now only owns the carousel's SCROLL mechanics (horizontal flex
   scroll, fixed card width, arrows, progress bar); the card itself renders
   with the exact same CSS as everywhere else, same shared markup either way. */