/**
 * Product Slider
 *
 * @package AstraChild
 */


/* ==========================================================================
   Slider
   ========================================================================== */

.product-slider {
	--ps-columns: 4;
	--ps-gap: 24px;
}


/* ==========================================================================
   Viewport
   ========================================================================== */

.product-slider .product-slider__viewport {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;

	scrollbar-width: none;
	-ms-overflow-style: none;

	scroll-behavior: smooth;
}

.product-slider .product-slider__viewport::-webkit-scrollbar {
	display: none;
}


/* ==========================================================================
   Track
   ========================================================================== */

.product-slider .product-slider__track {
	display: block;
	width: 100%;
}


/* ==========================================================================
   WooCommerce Products List
   ========================================================================== */

/*
 * IMPORTANT:
 *
 * Astra/WooCommerce applies its own grid rules to:
 *
 * .products
 * .products.columns-4
 * .products.columns-3
 * .products.columns-2
 *
 * We deliberately override those rules ONLY inside
 * .product-slider.
 */




/* ==========================================================================
   Product Cards
   ========================================================================== */
.product-slider .products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--ps-gap);
}

.product-slider .products > .product {
	float: none !important;
	clear: none !important;
	margin: 0 !important;

	flex: 0 0 calc(
		(100% - (var(--ps-columns) - 1) * var(--ps-gap))
		/ var(--ps-columns)
	) !important;
}

/* ==========================================================================
   Navigation Buttons
   ========================================================================== */

.product-slider .product-slider__button {
	position: absolute;

	top: 50%;
	z-index: 50;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;
	margin: 0;

	border: 0;
	border-radius: 50%;

	background: #ffffff;
	color: #222222;

	box-shadow:
		0 4px 15px rgba(0, 0, 0, 0.15);

	transform: translateY(-50%);

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
}


.product-slider .product-slider__button:hover {
	background: #222222;
	color: #ffffff;
}


.product-slider .product-slider__button:focus-visible {
	outline: 2px solid #222222;
	outline-offset: 3px;
}


/* ==========================================================================
   Previous
   ========================================================================== */

.product-slider .product-slider__button--prev {
	left: -22px;
}


/* ==========================================================================
   Next
   ========================================================================== */

.product-slider .product-slider__button--next {
	right: -22px;
}


/* ==========================================================================
   Disabled
   ========================================================================== */

.product-slider .product-slider__button[disabled] {
	opacity: 0.35;

	cursor: default;

	pointer-events: none;
}


/* ==========================================================================
   Large Tablet
   ========================================================================== */

@media (max-width: 1024px) {

	.product-slider {
		--ps-columns: 4;
		--ps-gap: 20px;
	}

}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 767px) {

	.product-slider {
		--ps-columns: 3;
		--ps-gap: 16px;
	}

	.product-slider .product-slider__button {
		width: 38px;
		height: 38px;
	}

	.product-slider .product-slider__button--prev {
		left: -10px;
	}

	.product-slider .product-slider__button--next {
		right: -10px;
	}

}


/* ==========================================================================
   Small Mobile
   ========================================================================== */

@media (max-width: 544px) {

	.product-slider {
		--ps-columns: 2;
		--ps-gap: 16px;
	}

}