/* Net-new CSS for the two homepage product bands, kept to the same rule as pixio.css: only
   what the vendor JS and the vendor image pack would have supplied. style.css owns the looks. */

/* --- Similar-products rail: the slide width Swiper used to write --- */

/* Embla only moves the track, so every rail's per-view width lives in CSS. This one runs
   inside the band's col-lg-7, not the full container, so it steps down one breakpoint earlier
   than the container-width rails in pixio.css. */
.swiper-similar .swiper-slide {
	width: 33.333%;
	padding-inline: 15px;
}

@media only screen and (max-width: 1199px) {
	.swiper-similar .swiper-slide {
		width: 50%;
	}
}

@media only screen and (max-width: 575px) {
	.swiper-similar .swiper-slide {
		width: 80%;
	}
}

/* --- Shortlist promo panel: two assets the vendor pack never shipped --- */

/* style.css masks the panel photo with ../images/bg-media.svg, which is absent from
   reference_themes/pixio - the wave is redrawn here as a data URI so the panel keeps its scalloped
   edge instead of falling back to an unmasked rectangle.

   The aspect ratio is the load-bearing part, not the wave: style.css sizes the mask `auto 100%`
   against the right edge of a media box that is 50vw wide and deliberately overhangs its column,
   so a mask as wide as the box puts the scalloped edge off-screen. 480x810 keeps the wave inside
   the container at desktop widths. */
.about-box.style-1 .dz-media img {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="480" height="810" viewBox="0 0 480 810" fill="none"><path d="M480 0H60C60 0 0 50 0 101C0 152 60 152 60 203C60 254 0 254 0 304C0 355 60 355 60 405C60 456 0 456 0 506C0 557 60 557 60 608C60 659 0 659 0 709C0 760 60 760 60 810H480V0Z" fill="black"/></svg>');
}

/* The decorative outline word is an inline <svg> with no intrinsic width, so without a width
   the 1320-unit viewBox renders at the replaced-element default of 300px and the stroke text
   shrinks to a sixth of its size. style.css styles the text but never sizes the box. */
.about-box.style-1 .animation-text {
	width: 100%;
	height: auto;
}

/* style.css parks the outline word 90% of its own height below the panel, which the reference
   band could show because it ran taller than its content. This one is p-b0 and clipped at the
   section edge, so the word would fall entirely inside the clip. Held over the photo instead. */
.about-box.style-1 .animation-text {
	transform: translate(30%, 0);
}