/**
 * PromoPal — Product Grid to Slider
 * Desktop (above breakpoint): native grid, untouched.
 * Tablet/mobile: single centered card with a peek either side and
 * circular prev/next arrows below.
 *
 * Two flags, shared rules via :is():
 *   .pp-grid-to-slider     -> EAEL Woo Product Grid (homepage)
 *   .pp-related-to-slider  -> Elementor Related Products (product page)
 *
 * State is read off the ul: no .swiper-wrapper = fallback, .swiper-wrapper = live.
 * To tune one widget on its own, add a rule using just its class (example at
 * the bottom).
 *
 * NOTE: the 1024px here must match `breakpoint` in the PHP localize call.
 */

@media (max-width: 1024px) {

	/* --- Slide sizing (shared by CSS fallback and Swiper 'auto').
	   Do NOT set margin-right here: Swiper owns the gap via inline margin. --- */
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products > li.product {
		flex: 0 0 78% !important;
		width: 78% !important;
		max-width: 78%;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		float: none !important;
		scroll-snap-align: center;
		box-sizing: border-box;
	}

	/* --- Fallback slider: ul before Swiper upgrades it.
	   display:flex !important also beats Elementor's .elementor-grid. --- */
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products:not(.swiper-wrapper) {
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		margin: 0;
		padding: 0 11% 8px;
		scrollbar-width: none;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products:not(.swiper-wrapper) > li.product {
		margin-right: 0 !important;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products:not(.swiper-wrapper)::-webkit-scrollbar {
		display: none;
	}

	/* --- Live Swiper (margin-right left to Swiper) --- */
	:is(.pp-grid-to-slider, .pp-related-to-slider) .swiper {
		position: relative;
		overflow: hidden;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products.swiper-wrapper {
		display: flex !important;
		overflow: visible;
		padding: 0;
		gap: 0;
	}

	/* --- Arrow navigation --- */
	:is(.pp-grid-to-slider, .pp-related-to-slider) .pp-slider-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 14px;
		margin-top: 20px;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) .pp-slider-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid #2b2b2b;
		background: transparent;
		color: #2b2b2b;
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
		-webkit-appearance: none;
		appearance: none;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) .pp-slider-btn:hover {
		background: #2b2b2b;
		color: #fff;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) .pp-slider-btn svg {
		width: 18px;
		height: 18px;
		display: block;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) .pp-slider-btn.swiper-button-disabled {
		opacity: 0.35;
		cursor: default;
	}
}

@media (min-width: 480px) and (max-width: 1024px) {
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products > li.product {
		flex-basis: 60% !important;
		width: 60% !important;
		max-width: 60%;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products:not(.swiper-wrapper) {
		padding-left: 20%;
		padding-right: 20%;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products > li.product {
		flex-basis: 50% !important;
		width: 50% !important;
		max-width: 50%;
	}
	:is(.pp-grid-to-slider, .pp-related-to-slider) ul.products:not(.swiper-wrapper) {
		padding-left: 25%;
		padding-right: 25%;
	}
}

/* --- Per-widget tuning example (uncomment to give related a narrower card) ---
@media (max-width: 1024px) {
	.pp-related-to-slider ul.products > li.product {
		flex-basis: 70% !important;
		width: 70% !important;
		max-width: 70%;
	}
}
*/