/**
 * EpicPulls product carousel — arrows + pagination.
 *
 * The theme/plugin swiper styling is scoped to `.cards`/`.cards-autoplay`, but our
 * product slider uses `.ep-product-slider`, so it needs its own treatment.
 */

/* ---- Navigation arrows: branded circular buttons, subtle until hover ---- */
.product-slider .swiper-button-next,
.product-slider .swiper-button-prev {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--otg-violet-deep, #6d28d9);
	color: #fff;
	opacity: 0.55;
	top: 40%; /* sit over the image, not the middle of the tall card */
	box-shadow: 0 2px 8px rgba(20, 38, 58, 0.2);
	transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.product-slider .swiper-button-prev {
	left: 6px;
}

.product-slider .swiper-button-next {
	right: 6px;
}

.product-slider .swiper-button-next:hover,
.product-slider .swiper-button-prev:hover {
	opacity: 1;
	background-color: var(--otg-plum, #5b21b6);
}

/* Font Awesome chevrons instead of Swiper's default arrow glyph. */
.product-slider .swiper-button-prev::after,
.product-slider .swiper-button-next::after {
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 15px;
	line-height: 1;
	color: #fff;
}

.product-slider .swiper-button-prev::after {
	content: "\f053"; /* fa-chevron-left */
}

.product-slider .swiper-button-next::after {
	content: "\f054"; /* fa-chevron-right */
}

/* Swiper injects its own <svg> arrow — hide it so only our FA chevron shows. */
.product-slider .swiper-button-prev svg,
.product-slider .swiper-button-next svg {
	display: none;
}

/* ---- Pagination: flow below the cards (not absolute), centred, branded ----
   Positioned statically so it clears the cards and isn't affected by the
   `.wrapper-block > .product-slider { padding: 0 !important }` theme rule. */
.product-slider .swiper-pagination {
	position: static;
	margin-top: 16px;
	text-align: center;
}

.product-slider .swiper-pagination-bullet {
	opacity: 0.4;
}

.product-slider .swiper-pagination-bullet-active {
	background: var(--otg-violet-deep, #6d28d9);
	opacity: 1;
}