/* Product Slider — shared front-end + editor styles.
   Every rule is scoped under the block root class (.zv-product-slider, applied
   to every block instance) to win specificity against theme styles without IDs. */

.zv-product-slider .zv-product-slider__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

@media ( min-width: 782px ) {

	.zv-product-slider .zv-product-slider__inner {
		flex-direction: row;
		gap: 48px;
	}
}

/* Left column. */
.zv-product-slider .zv-product-slider__aside {
	flex: 0 0 auto;
}

@media ( min-width: 782px ) {

	.zv-product-slider .zv-product-slider__aside {
		width: 260px;
	}

	/* Category Slider needs a wider aside for the term description. */
	.zv-product-slider--category .zv-product-slider__aside {
		width: 350px;
	}
}

.zv-product-slider .zv-product-slider__eyebrow {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	color: var(--global-palette3);
}

.zv-product-slider .zv-product-slider__heading {
	margin: 0 0 24px;
	font-style: normal;
	font-weight: 400;
	font-size: 38px;
	line-height: 1.5;
	letter-spacing: 0.03em;
	font-family: Helvetica, sans-serif;
	color: var(--global-palette3);
}

/* Category Slider heading — smaller than the Product Slider's. */
.zv-product-slider--category .zv-product-slider__heading {
	font-size: 26px;
}

/* Category Slider description (term ACF copy). Only the category variant
   renders this element. */
.zv-product-slider .zv-product-slider__description {
	margin: 0 0 24px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--theme-palette-6);
}

.zv-product-slider .zv-product-slider__description p {
	margin: 0 0 1em;
}

.zv-product-slider .zv-product-slider__description p:last-child {
	margin-bottom: 0;
}

.zv-product-slider .zv-product-slider__nav {
	display: flex;
	gap: 12px;
	margin-bottom: 28px;
}

.zv-product-slider .zv-product-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: var(--global-palette1);
	color: var(--global-palette9);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.zv-product-slider .zv-product-slider__arrow:hover {
	opacity: 0.8 !important;
}

/* Shared SVG points right; mirror it for the prev arrow. */
.zv-product-slider .zv-product-slider__arrow--prev svg {
	transform: scaleX( -1 );
}

.zv-product-slider .zv-product-slider__arrow.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* watchOverflow locks both arrows when every slide fits in view. Hide them:
   Swiper's own one-class .swiper-button-lock rule loses to the display rule
   above, so the arrows would otherwise stay visible and do nothing. */
.zv-product-slider .zv-product-slider__arrow.swiper-button-lock {
	display: none;
}

.zv-product-slider .zv-product-slider__shop-all {
	display: inline-block;
	padding: 10px 32px;
	border: 2px solid var(--global-palette3);
	border-radius:5px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--global-palette3);
	transition: background 0.15s ease, color 0.15s ease;
}

.zv-product-slider .zv-product-slider__shop-all:hover {
	background: var(--global-palette3);
	color: var(--global-palette9);
}

/* Right column (slider). */
.zv-product-slider .zv-product-slider__main {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.zv-product-slider .zv-product-slider__swiper {
	overflow: hidden; /* clip off-screen slides (and tame the JS-less admin preview) */

	/* Headroom for the upward-growing active card: its growth is 0.35 x its height, and the
	   card is about its width (the square image) plus 135px tall. */
	padding-top: calc( min( ( 100vw - 50px ) * 0.20 - 15px, 298px ) * 0.35 + 50px );
}

/* Let each slide size to its own content and bottom-anchor the row, so
   non-enlarged cards stay short instead of stretching to the active card. */
.zv-product-slider .zv-product-slider__swiper .swiper-wrapper {
	align-items: flex-end;
}

/* Pre-init gap: Swiper applies spaceBetween as inline margins only after it
   initializes, so mirror the 15px gap for the first paint. */
.zv-product-slider .zv-product-slider__swiper:not( .swiper-initialized ) .swiper-wrapper {
	column-gap: 15px;
}

.zv-product-slider .swiper-slide {
	height: auto;
}

.zv-product-slider .zv-product-slider__empty {
	margin: 0;
	padding: 40px 0;
	color: var(--global-palette6);
}

/* Track cards — uniform width so Swiper never resizes a slide (no jank).
   The active card is enlarged with a transform (no reflow); the card after it
   gets a left margin to open room so the scaled card doesn't cover it. */

/* Card width: fit ~5 across the viewport.
   100vw - 50px  = viewport minus the content-wrapper's L/R padding (25px each).
   * 0.20         = one fifth (5 cards across).
   - 15px         = subtract the inter-card gap (spaceBetween) so 5 + gaps still fit. */
.zv-product-slider .zv-card {
	width: calc( ( 100vw - 50px ) * 0.20 - 15px );
	max-width: 298px;
	height: auto;
	margin-top: 1px;
	margin-bottom: 1px;
	transition: margin-left 0.4s ease;
}

.zv-product-slider .zv-card__link {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 22px;
	border: 1px solid var(--global-palette3);
	border-radius: 10px;
	text-decoration: none;
	color: var(--global-palette3);
	transform-origin: bottom left;
	box-shadow: inset 0 0 0 0 var(--global-palette1);
	transition: transform 0.4s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}

.zv-product-slider .zv-card__link:hover {
	border-color: var(--global-palette1);
	box-shadow: inset 0 0 0 2px var(--global-palette1);
}

/* "+": a circle over the image's top-right corner, as on the catalog cards. */
.zv-product-slider .zv-card__add {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--global-palette9);
	font-size: 18px;
	line-height: 1;
	color: var(--global-palette3);
	transition: background-color 0.2s ease;
}

.zv-product-slider .zv-card__link:hover .zv-card__add {
	background: var(--global-palette1);
}

/* Square, rounded image that fills the card, as on the catalog cards. */
.zv-product-slider .zv-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 12px;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	background: var(--global-palette9);
}

.zv-product-slider .zv-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* Brand line above the name (always printed, so cards without one keep the same height). */
.zv-product-slider .zv-card__brand {
	display: block;
	min-height: 1.35em;
	margin-bottom: 4px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette4);
}

/* Clamp titles to 2 lines and reserve that height so every card matches. */
.zv-product-slider .zv-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
	text-align: center;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 400;
	font-style: normal;
	font-family: Helvetica, sans-serif;
	text-transform: uppercase;
}

.zv-product-slider .zv-card__price {
	display: block;
	margin-top: 10px;
	min-height: 1.2em; /* reserve the line so a priceless product matches height */
	line-height: 1.2;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
}

/* Active (lead) card: scale up, sit above neighbours, opaque so any overlap
   during the animation stays clean. Growth = width * (1.35 - 1).
   Keyed off Swiper's own active class so loop reordering stays correct.
   The :not(.swiper-initialized) selectors pre-enlarge the first card before
   Swiper runs, so the initial paint matches the final layout (no flash). */
.zv-product-slider .swiper-slide-active .zv-card__link,
.zv-product-slider .zv-product-slider__swiper:not( .swiper-initialized ) .swiper-slide:first-child .zv-card__link {
	transform: scale( 1.35 );
	position: relative;
	z-index: 2;
	background: var(--global-palette9);
}

/* Open room after the active card so the scaled card doesn't cover it.
   Ported from the card width: growth = width * (1.35 - 1) = width * 0.35. */
.zv-product-slider .swiper-slide-active + .swiper-slide,
.zv-product-slider .zv-product-slider__swiper:not( .swiper-initialized ) .swiper-slide:first-child + .swiper-slide {
	margin-left: min( calc( ( ( 100vw - 50px ) * 0.20 - 15px ) * 0.35 ), 104px );
}