/**
 * Free Style 3 — Slick-powered sliders
 * [fsp_product_slider] and [fsp_brand_slider]. Loaded only on pages that
 * contain one (see fsp_page_has_sliders() in inc/core/assets.php), on top
 * of the vendored assets/vendor/slick/slick(-theme).css.
 */

/* ---- Shared slick arrow re-skin (brand tokens instead of slick default) ---- */
.fsp-product-slider .slick-prev,
.fsp-product-slider .slick-next,
.fsp-brand-slider .slick-prev,
.fsp-brand-slider .slick-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-pill);
	box-shadow: var(--fsp-shadow-md);
	z-index: 2;
}

.fsp-product-slider .slick-prev,
.fsp-brand-slider .slick-prev {
	left: -6px;
}

.fsp-product-slider .slick-next,
.fsp-brand-slider .slick-next {
	right: -6px;
}

.fsp-product-slider .slick-prev::before,
.fsp-product-slider .slick-next::before,
.fsp-brand-slider .slick-prev::before,
.fsp-brand-slider .slick-next::before {
	color: var(--fsp-heading);
	opacity: 1;
}

.fsp-product-slider .slick-prev:hover,
.fsp-product-slider .slick-next:hover,
.fsp-brand-slider .slick-prev:hover,
.fsp-brand-slider .slick-next:hover {
	border-color: var(--fsp-blue-300);
}

.fsp-product-slider .slick-prev:hover::before,
.fsp-product-slider .slick-next:hover::before,
.fsp-brand-slider .slick-prev:hover::before,
.fsp-brand-slider .slick-next:hover::before {
	color: var(--fsp-blue-700);
}

.fsp-product-slider .slick-dots li button::before,
.fsp-brand-slider .slick-dots li button::before {
	color: var(--fsp-blue-600);
}

/* ---- Product slider ---- */
.fsp-product-slider-section {
	padding-block: var(--fsp-space-6);
}

.fsp-product-slider__slide {
	padding-inline: var(--fsp-space-2);
}

.fsp-product-slider .fsp-product-card {
	display: flex;
	flex-direction: column;
	gap: var(--fsp-space-2);
}

/* Un-initialized state (before slick JS runs / no-JS): simple wrap-flow row
   so the slider is never invisible or a vertical wall of cards. */
.fsp-product-slider:not(.slick-initialized),
.fsp-brand-slider:not(.slick-initialized) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fsp-space-4);
}

/* ---- Brand slider ----
   FS2 parity: css/fsg-brand-slider.css `.fsg-brand-slide` (style2 variant —
   what the homepage uses). Each logo gets its own white rounded card with
   a hover lift; this renders identically whether or not Slick has
   initialized, so a slow/failed script load never looks "unstyled." */
.fsp-brands {
	padding-block: var(--fsp-space-6);
}

.fsp-brand-slider__slide {
	padding-inline: var(--fsp-space-2);
}

.fsp-brand-slider__slide a,
.fsp-brand-slider__slide .fsp-brand-slider__box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 94px;
	padding: var(--fsp-space-2);
	text-decoration: none;
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: var(--fsp-radius-md);
	box-shadow: var(--fsp-shadow-sm);
	transition: transform var(--fsp-dur-fast) var(--fsp-ease), box-shadow var(--fsp-dur-fast) var(--fsp-ease), border-color var(--fsp-dur-fast) var(--fsp-ease);
}

.fsp-brand-slider__slide a:hover,
.fsp-brand-slider__slide a:focus-visible {
	transform: translateY(-3px);
	border-color: var(--fsp-blue-300);
	box-shadow: var(--fsp-shadow-md);
}

.fsp-brand-slider__slide img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 88px;
	margin: 0 auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.82;
	transition: filter var(--fsp-dur-med) var(--fsp-ease), opacity var(--fsp-dur-med) var(--fsp-ease), transform var(--fsp-dur-med) var(--fsp-ease);
}

.fsp-brand-slider__slide a:hover img,
.fsp-brand-slider__slide a:focus-visible img,
.fsp-brand-slider--color .fsp-brand-slider__slide img {
	filter: none;
	opacity: 1;
}

.fsp-brand-slider__slide a:hover img,
.fsp-brand-slider__slide a:focus-visible img {
	transform: scale(1.04);
}

/* Un-initialized / no-JS fallback: evenly wrapped grid instead of a rail. */
.fsp-brand-slider:not(.slick-initialized) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fsp-space-4);
}

.fsp-brand-slider:not(.slick-initialized) .fsp-brand-slider__slide {
	flex: 0 0 auto;
	width: 160px;
}

@media (max-width: 40rem) {
	.fsp-brand-slider__slide a,
	.fsp-brand-slider__slide .fsp-brand-slider__box {
		height: 80px;
	}

	.fsp-brand-slider__slide img {
		max-height: 44px;
	}
}