.flows-slider-frontend {
    width: 100% !important;
    max-width: 100vw;
    overflow: hidden;
}
details[open] .flows-slider-frontend {
    width: 100%;
    max-width: 100vw;
}
.flows-slider-frontend .swiper { position:relative; width:100%; overflow:hidden; }
.flows-slider-frontend .swiper-slide { position:relative; overflow:hidden; }
.flows-slide-media-wrap { position:absolute; inset:0; overflow:hidden; }
.flows-slide-media-wrap img,
.flows-slide-media-wrap video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border: 0;
}
/* Force YouTube/Vimeo iframes to fill the slide */
.flows-slide-media-wrap > iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}
.flows-slide-embed { width:100%; height:100%; border:0; }
.flows-slide-embed iframe { width:100%; height:100%; border:0; }
.flows-slide-content { position:absolute; inset:0; display:flex; flex-direction:column; padding:5%; box-sizing:border-box; color:#fff; z-index:2; pointer-events:none; }
.flows-slide-title,
.flows-slide-body { text-shadow:0 2px 10px rgba(0,0,0,0.55); }
.flows-slide-title { margin:0 0 0.4em; line-height:1.2; }
.flows-slide-body { margin:0 0 1em; max-width:640px; line-height:1.5; }
.flows-slide-button { display:inline-block; padding:0.7em 1.7em; text-decoration:none; font-weight:600; pointer-events:auto; }

/* Text fade-in – the slide's title/body/button stay hidden for the first
   second after a slide becomes active, then fade smoothly into view.
   Gated behind .flows-anim-ready (added by frontend.js right after Swiper
   starts) so that if the slider script ever fails to load, the text just
   falls back to being visible immediately instead of staying hidden. */
.flows-slider-frontend.flows-anim-ready .flows-slide-content {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.4s ease, transform 1.4s ease;
}
.flows-slider-frontend.flows-anim-ready .swiper-slide-active .flows-slide-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

/* Ken Burns effect – only on images, not videos */
@keyframes flowsFrontendKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}
.flows-slider-frontend[data-ken-burns="1"] .swiper-slide-active .flows-slide-media-wrap img {
    animation: flowsFrontendKenBurns 8s ease-in-out infinite alternate;
}

/* --- Mute toggle (speaker icon) --- */
.flows-slide-mute-toggle {
	position: absolute;
	bottom: 60px;
	right: 30px;
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.5);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.flows-slide-mute-toggle:hover { background: rgba(0,0,0,0.7); }
.flows-slide-mute-toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* --- Navigation arrows (custom, bolder) --- */
.flows-slider-frontend .swiper-button-next,
.flows-slider-frontend .swiper-button-prev {
	color: #cccccc;
	width: 30px;
	height: 30px;
	margin-top: -15px;
}
.flows-slider-frontend .swiper-button-next::after,
.flows-slider-frontend .swiper-button-prev::after {
	font-size: 24px;
	font-weight: 700;
	text-shadow: 0 0 3px rgba(0,0,0,0.4);
}
.flows-slider-frontend .swiper-button-next:hover,
.flows-slider-frontend .swiper-button-prev:hover { color: #ffffff; }

/* --- Pagination dots --- */
.flows-slider-frontend .swiper-pagination-bullet {
	background: rgba(255,255,255,0.3);
	opacity: 1;
}
.flows-slider-frontend .swiper-pagination-bullet-active { background: #333333; }
.flows-slider-frontend .swiper-pagination { z-index: 5; }

/* ========== NAVIGATION STYLE PRESETS ========== */

/* Default style – already applied, no extra rules needed */

/* Minimal style */
.flows-nav-minimal .swiper-button-next,
.flows-nav-minimal .swiper-button-prev {
    width: 20px;
    height: 20px;
    margin-top: -10px;
}
.flows-nav-minimal .swiper-button-next::after,
.flows-nav-minimal .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 400;
}
.flows-nav-minimal .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.5);
    opacity: 1;
}
.flows-nav-minimal .swiper-pagination-bullet-active {
    background: #ffffff;
}

/* Rounded style */
.flows-nav-rounded .swiper-button-next,
.flows-nav-rounded .swiper-button-prev {
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    color: #fff;
}
.flows-nav-rounded .swiper-button-next::after,
.flows-nav-rounded .swiper-button-prev::after {
    font-size: 18px;
    font-weight: 600;
}
.flows-nav-rounded .swiper-button-next:hover,
.flows-nav-rounded .swiper-button-prev:hover {
    background: rgba(0,0,0,0.6);
}
.flows-nav-rounded .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5);
    opacity: 1;
    border-radius: 50%;
}
.flows-nav-rounded .swiper-pagination-bullet-active {
    background: #ffffff;
    width: 12px;
    height: 12px;
}

/* Square style */
.flows-nav-square .swiper-button-next,
.flows-nav-square .swiper-button-prev {
    background: rgba(0,0,0,0.5);
    border-radius: 2px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    color: #fff;
}
.flows-nav-square .swiper-button-next::after,
.flows-nav-square .swiper-button-prev::after {
    font-size: 20px;
    font-weight: 700;
}
.flows-nav-square .swiper-button-next:hover,
.flows-nav-square .swiper-button-prev:hover {
    background: rgba(0,0,0,0.7);
}
.flows-nav-square .swiper-pagination-bullet {
    width: 12px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.4);
    opacity: 1;
}
.flows-nav-square .swiper-pagination-bullet-active {
    background: #ffffff;
    width: 24px;
}