/* WC Category Product Slider — minimal styles.
   Product card appearance is left to the theme; this only handles the
   carousel frame, nav arrows, and making WooCommerce's <li> behave as slides. */

.wccs-slider.swiper {
	position: relative;
	padding: 0 40px; /* room for arrows on the sides */
	margin-bottom: 1.5em;
}

/* WooCommerce outputs <ul class="products ..."> which we tag as .swiper-wrapper.
   Neutralise its default grid/float layout so Swiper can lay out slides. */
.wccs-slider .products.swiper-wrapper {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wccs-slider .products.swiper-wrapper::before,
.wccs-slider .products.swiper-wrapper::after {
	content: none !important;
}

/* Each product becomes a slide; Swiper sets the width inline. */
.wccs-slider li.product.swiper-slide {
	width: auto;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	height: auto;
}

/* Nav arrows: sit inside the side padding, theme-neutral styling. */
.wccs-slider .swiper-button-prev,
.wccs-slider .swiper-button-next {
	color: currentColor;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.wccs-slider .swiper-button-prev:hover,
.wccs-slider .swiper-button-next:hover {
	opacity: 1;
}

.wccs-slider .swiper-button-prev::after,
.wccs-slider .swiper-button-next::after {
	font-size: 24px;
}

.wccs-slider .swiper-button-prev { left: 4px; }
.wccs-slider .swiper-button-next { right: 4px; }

/* Pagination dots (only present when dots="true"). */
.wccs-slider .swiper-pagination {
	position: static;
	margin-top: 12px;
}

/* Respect reduced-motion preferences. */
@media ( prefers-reduced-motion: reduce ) {
	.wccs-slider .swiper-wrapper {
		transition-duration: 0ms !important;
	}
}