/* Slider de productos relacionados — solo activo en ≤768px (3, 2, 1 cards).
 * En ≥769px la sección se mantiene como grid (ver shop-archive.css / single-product.css). */

.oz-single-related-section .oz-related-slider-frame {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.oz-single-related-section .oz-related-swiper {
	width: 100%;
	overflow: hidden;
}

/* Padding lateral en el frame externo (no en el .swiper) para no romper el cálculo de slidesPerView. */
@media (max-width: 768px) {
	.oz-single-related-section .oz-related-slider-frame {
		padding: 0 4rem;
	}
}

/* Botones de navegación (estilo "pro" con flecha CSS, anulando el SVG default de Swiper). */
.oz-single-related-section .oz-related-swiper__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #ffc107;
	color: #1f2937;
	cursor: pointer;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.oz-single-related-section .oz-related-swiper__nav:hover,
.oz-single-related-section .oz-related-swiper__nav:focus-visible {
	background: #ffb000;
	transform: translateY(-50%) scale(1.05);
	outline: none;
}

.oz-single-related-section .oz-related-swiper__nav:active {
	transform: translateY(-50%) scale(0.98);
}

.oz-single-related-section .oz-related-swiper__nav.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.oz-single-related-section .oz-related-swiper__nav--prev {
	left: 0;
}

.oz-single-related-section .oz-related-swiper__nav--next {
	right: 0;
}

/* Flecha CSS (sin SVG / sin contenido de fuente). */
.oz-single-related-section .oz-related-swiper__nav::before {
	content: '';
	width: 0.625rem;
	height: 0.625rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.oz-single-related-section .oz-related-swiper__nav--prev::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}

.oz-single-related-section .oz-related-swiper__nav--next::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

/* En ≥769px: el slider no está activo, ocultar flechas. */
@media (min-width: 769px) {
	.oz-single-related-section .oz-related-swiper__nav {
		display: none;
	}
}

/* Asegurar que el ul siga teniendo padding/margin coherente dentro del .swiper. */
.oz-single-related-section .oz-related-swiper ul.products {
	margin: 0;
	padding: 0;
	list-style: none;
}