/* Slide pagination for the [yolo_products] grid. */

.wst-slide-grid {
	position: relative;
}

.wst-slide-viewport {
	position: relative;
	overflow: hidden;
}

.wst-slide-viewport.wst-animate-height {
	-webkit-transition: height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Direction is inherited from the document, so RTL lays the pages out right to left
   and the JS flips the sign of the translation to match. */
.wst-slide-track {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-transition: -webkit-transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.wst-slide-page {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}

/* The product items are floated by the theme; Isotope used to set the container
   height, so each page needs its own clearfix now. */
.wst-slide-page:before,
.wst-slide-page:after {
	content: "";
	display: table;
}

.wst-slide-page:after {
	clear: both;
}

.wst-slide-pagination .page-numbers {
	cursor: pointer;
}

.wst-slide-pagination .page-numbers.wst-disabled {
	opacity: 0.35;
	pointer-events: none;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.wst-slide-track,
	.wst-slide-viewport.wst-animate-height {
		-webkit-transition: none;
		transition: none;
	}
}