/**
 * Visual Filter carousel styles.
 *
 * Swiper's own CSS (already loaded by Elementor core, `swiper` handle)
 * does the actual slide layout/sizing — this file only makes room for the
 * prev/next nav buttons and makes sure the existing JetSmartFilters item
 * markup fills its new slide instead of keeping whatever fixed width it
 * had in the original (non-carousel) row layout.
 */
.wcvm-visual-filter-carousel {
	--swiper-navigation-size: 22px;
	--swiper-navigation-color: #333;

	padding: 0 40px;
}

.wcvm-visual-filter-carousel .swiper-slide {
	height: auto;
	display: flex;
	/*
	 * Confirmed live: without this, the slide's own inline width (set by
	 * Swiper's JS) was overridden by its child's default flex-item
	 * `min-width: auto` — the same "won't shrink below content's natural
	 * size" behavior as the <fieldset> bug this carousel already had to
	 * work around (see TROUBLESHOOTING.md), just one level deeper (this
	 * slide is itself a flex container for the item inside it). Every
	 * slide rendered at the item's natural ~200px content width regardless
	 * of the configured slidesPerView/viewport.
	 */
	min-width: 0;
}

/*
 * Confirmed live (Playwright): the above rule alone never won the cascade.
 * JetSmartFilters ships its own `.jet-filter .swiper .swiper-slide {
 * min-width: 200px }` (specificity 0,3,0, loaded via
 * jet-smart-filters/assets/css/public.css, which WordPress enqueues AFTER
 * this file on every page checked live). Matching that specificity exactly
 * (via a repeated-class selector) still lost, because with equal
 * specificity the LAST-loaded rule wins the cascade, and JetSmartFilters'
 * stylesheet always loads after this one. `!important` is the only
 * reliable way to override a same-or-higher-specificity third-party rule
 * whose load order this plugin doesn't control (and which could change on
 * a JetSmartFilters update). See TROUBLESHOOTING.md.
 */
.wcvm-visual-filter-carousel .swiper-slide {
	min-width: 0 !important;
}

.wcvm-visual-filter-carousel .swiper-slide > * {
	width: 100%;
	min-width: 0;
}

.wcvm-visual-filter-carousel__nav {
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.15 );
}

.wcvm-visual-filter-carousel__nav.swiper-button-disabled {
	opacity: 0.35;
}

@media ( max-width: 480px ) {
	.wcvm-visual-filter-carousel {
		padding: 0 32px;
	}
}