/* ==========================================================================
   MEGASWIPER - Responsive Swiper Styles
   Version: 2.11.0
   
   CSS Variables (specificity hygiene – avoid !important)
   ========================================================================== */
:root {
    --msw-slide-padding: 3vh 10% 5rem 10%;
    --msw-slide-padding-mobile: 2vh 5% 3.75rem 5%;
}

/* ==========================================================================
   
   FOUC PREVENTION:
   - .msw-unique-gato starts visibility:hidden (loaded in <head>)
   - JS sets visibility:visible on Swiper init callback
   - First slide image: loading="eager" + fetchpriority="high"
   
   HYBRID RESPONSIVE NAVIGATION:
   - Mobile/Tablet (< 1024px): Arrows HIDDEN, swipe gestures enabled
   - Desktop (>= 1024px): Arrows VISIBLE, swipe disabled
   
   READ ROOM FEATURES:
   - Mobile Safety Zone (3.75rem) for browser bars & notches
   - Font scaling: +20% body, +10% title on mobile
   - Solid black overlay (zero distractions)
   - German word hyphenation
   
   Swipe hint overlay (mobile/tablet):
   - Mobile/Tablet only, bottom 12vh, pointer-events:none
   
   CSS MODERNIZATION (v2.8.1):
   - All px values converted to rem (base 16px = 1rem)
   - Exceptions: box-shadow, outline, env()/max() safe-area values,
     keyframe translateX, letter-spacing
   ========================================================================== */

/* ==========================================================================
   FOUC GUARD – hides Swiper until JS initializes it
   The container keeps its 100vh height so nothing jumps.
   JS will flip visibility to visible inside Swiper on:{init}.
   ========================================================================== */
.msw-unique-gato {
    visibility: hidden;
    position: relative;
    width: 100%;
    height: 100vh;
    font-family: 'Noto Sans', sans-serif;
    overscroll-behavior: none;
    /* Stability: horizontal flicks go to Swiper; prevent iOS bounce */
    touch-action: pan-y;
    overscroll-behavior-x: none;
    /* Bottom UI chrome: JS sets --msw-vv-bottom from visualViewport; env() covers iPhone home indicator */
    --msw-vv-bottom: 0px;
    --msw-bottom-ui: max(env(safe-area-inset-bottom, 0px), var(--msw-vv-bottom, 0px));
}

/* Block context menu and selection on images (discourage save) */
.msw-unique-gato img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
/* Pre-init: keep slide images constrained before Swiper finishes init (FOUC guard).
 * width: auto — never upscale raster past intrinsic width when container is wider. */
html body .msw-unique-gato .msw-slide-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- FONT AWESOME – JetEngine listing icons (Language Popup, etc.)
    Ensures icons render when Elementor "Load Font Awesome 4 Support" is OFF.
    Uses self-hosted FA5 from msw-asset-optimizer.
    html body … beats .elementor-widget .fa without !important. --- */
html body .jet-listing-dynamic-field__inline-icon .fa,
html body .jet-listing-dynamic-field__inline-icon .fas {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}
html body .jet-listing-dynamic-field__inline-icon .far {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 400;
}
html body .jet-listing-dynamic-field__inline-icon .fab {
    font-family: "Font Awesome 5 Brands", sans-serif;
    font-weight: 400;
}

/* --- BASE SWIPER LAYOUT --- */
.msw-unique-gato.msw-full-screen { 
    width: 100vw; 
    height: 100vh; 
    margin-left: calc(-50vw + 50%); 
    margin-right: calc(-50vw + 50%); 
    overflow: hidden; 
    position: relative; 
}

.msw-unique-gato .swiper-slide { 
    height: 100vh; 
    /* Flex default min-height:auto prevents children from shrinking; allow inner layout to respect caps */
    min-height: 0;
    padding: var(--msw-slide-padding);
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    text-align: center; 
    box-sizing: border-box;
    position: relative;  /* v2.11.0: anchor for background layers */
    overflow: hidden;   /* v2.12.0: cut overflow on XXXL/4XL; prevents horizontal scrollbar that kills swipe */
    word-break: break-word; /* Allow wrapping when possible; otherwise overflow:hidden clips */
}

/* Mobile: visible viewport height (excludes overlay nav bars); 100vh remains fallback for no-dvh browsers */
@media screen and (max-width: 767px) {
    .msw-unique-gato,
    .msw-unique-gato.msw-full-screen,
    .msw-unique-gato .swiper,
    .msw-unique-gato .swiper-slide {
        height: 100dvh;
    }
}

/* ==========================================================================
/* ==========================================================================
   BACKGROUND IMAGE + OVERLAY LAYERS (v2.11.0)
   
   Rendered by swiper-view.php when msw_lang_img_bg_final has a value.
   The .msw-bg-layer holds the fullscreen background image (cover).
   The .msw-bg-overlay sits on top with an rgba() color for tinting.
   All slide content (header, images, footer) sits above at z-index:10.
   ========================================================================== */

.msw-bg-layer {
    position: absolute;
    inset: 0;              /* top:0 right:0 bottom:0 left:0 */
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;   /* Let touches pass through to Swiper (fixes touchReleaseOnEdges on mesh slides) */
}

.msw-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;   /* Visual tint only – touches must reach Swiper for edge release */
}
/* ==========================================================================
   MESH GRADIENT BACKGROUND (bg_c_type_final = 'mesh')
   
   .msw-mesh-canvas-container: positioned behind all content, fills slide.
   .msw-mesh-blob: 5 blurred radial-gradient circles, animated via keyframes.
   Base 80vmax; --msw-mesh-scale from bg_mesh_scale_final (2 = huge, 0.5 = dots).
   mix-blend-mode: normal for mobile performance (color-dodge is GPU-heavy).
   
   Performance: hide mesh/gradient layers by default; only active/adjacent slides are visible (see JS).
   GPU hints (will-change, translateZ) applied only to active slide to save memory.
   ========================================================================== */

/* Descendant selector: still matches if an extra wrapper is inserted between slide and layer. */
.msw-unique-gato .swiper-slide .msw-mesh-canvas-container,
.msw-unique-gato .swiper-slide .msw-gradient-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none !important;
    /* GPU layer for zoom stability (reduces jitter when user zooms) */
    transform: translateZ(0);
    isolation: isolate;
    /* Default opacity 0; only active slide mesh is fully visible (reduces GPU load). */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Mesh: ACTIVE ONLY – GPU processes single mesh to avoid mobile swipe lag */
.msw-unique-gato .swiper-slide-active .msw-mesh-canvas-container {
    opacity: 1;
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Gradient: 3-slide window for smooth swipe (lighter than mesh blobs) */
.msw-unique-gato .swiper-slide-active .msw-gradient-layer,
.msw-unique-gato .swiper-slide-next .msw-gradient-layer,
.msw-unique-gato .swiper-slide-prev .msw-gradient-layer {
    opacity: 1;
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Blob positioning: left/top place the CENTER via transform so the colored
   gradient core is visible. Without -50% offset, only transparent edges show. */
.msw-mesh-canvas-container .msw-mesh-blob {
    position: absolute;
    width: calc(80vmax * var(--msw-mesh-scale, 1));
    height: calc(80vmax * var(--msw-mesh-scale, 1));
    border-radius: 50%;
    filter: blur(var(--msw-mesh-blur, 120px));
    mix-blend-mode: normal;
    opacity: 0.85;
    /* Center blob on left/top so colored core is in viewport */
    transform: translate(-50%, -50%);
    /* GPU hint for smooth high-speed motion on mobile */
    will-change: transform;
}

/* Default (ltr): diagonal drift */
@keyframes msw-mesh-float {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    25% { transform: translate(-50%, -50%) translate(10%, -5%); }
    50% { transform: translate(-50%, -50%) translate(-5%, 10%); }
    75% { transform: translate(-50%, -50%) translate(-10%, -10%); }
}

/* Wave: Ocean-smooth – 24 true sine points, Y ±20% (gentle), X ±10%. Zero stops. */
@keyframes msw-mesh-wave {
    0%, 100% { transform: translate(-50%, -50%) translate(0%, 0); }
    4.17%    { transform: translate(-50%, -50%) translate(2.6%, -5.2%); }
    8.33%    { transform: translate(-50%, -50%) translate(5%, -10%); }
    12.5%    { transform: translate(-50%, -50%) translate(7.1%, -14.1%); }
    16.67%   { transform: translate(-50%, -50%) translate(8.7%, -17.3%); }
    20.83%   { transform: translate(-50%, -50%) translate(9.7%, -19.3%); }
    25%      { transform: translate(-50%, -50%) translate(10%, -20%); }
    29.17%   { transform: translate(-50%, -50%) translate(9.7%, -19.3%); }
    33.33%   { transform: translate(-50%, -50%) translate(8.7%, -17.3%); }
    37.5%    { transform: translate(-50%, -50%) translate(7.1%, -14.1%); }
    41.67%   { transform: translate(-50%, -50%) translate(5%, -10%); }
    45.83%   { transform: translate(-50%, -50%) translate(2.6%, -5.2%); }
    50%      { transform: translate(-50%, -50%) translate(0%, 0); }
    54.17%   { transform: translate(-50%, -50%) translate(-2.6%, 5.2%); }
    58.33%   { transform: translate(-50%, -50%) translate(-5%, 10%); }
    62.5%    { transform: translate(-50%, -50%) translate(-7.1%, 14.1%); }
    66.67%   { transform: translate(-50%, -50%) translate(-8.7%, 17.3%); }
    70.83%   { transform: translate(-50%, -50%) translate(-9.7%, 19.3%); }
    75%      { transform: translate(-50%, -50%) translate(-10%, 20%); }
    79.17%   { transform: translate(-50%, -50%) translate(-9.7%, 19.3%); }
    83.33%   { transform: translate(-50%, -50%) translate(-8.7%, 17.3%); }
    87.5%    { transform: translate(-50%, -50%) translate(-7.1%, 14.1%); }
    91.67%   { transform: translate(-50%, -50%) translate(-5%, 10%); }
    95.83%   { transform: translate(-50%, -50%) translate(-2.6%, 5.2%); }
}

/* Clockwise: 20% radius, 16 points – smooth circle (no octagon corners/stops) */
@keyframes msw-mesh-clockwise {
    0%, 100% { transform: translate(-50%, -50%) translate(20%, 0); }
    6.25%    { transform: translate(-50%, -50%) translate(18.5%, 7.7%); }
    12.5%    { transform: translate(-50%, -50%) translate(14.1%, 14.1%); }
    18.75%   { transform: translate(-50%, -50%) translate(7.7%, 18.5%); }
    25%      { transform: translate(-50%, -50%) translate(0, 20%); }
    31.25%   { transform: translate(-50%, -50%) translate(-7.7%, 18.5%); }
    37.5%    { transform: translate(-50%, -50%) translate(-14.1%, 14.1%); }
    43.75%   { transform: translate(-50%, -50%) translate(-18.5%, 7.7%); }
    50%      { transform: translate(-50%, -50%) translate(-20%, 0); }
    56.25%   { transform: translate(-50%, -50%) translate(-18.5%, -7.7%); }
    62.5%    { transform: translate(-50%, -50%) translate(-14.1%, -14.1%); }
    68.75%   { transform: translate(-50%, -50%) translate(-7.7%, -18.5%); }
    75%      { transform: translate(-50%, -50%) translate(0, -20%); }
    81.25%   { transform: translate(-50%, -50%) translate(7.7%, -18.5%); }
    87.5%    { transform: translate(-50%, -50%) translate(14.1%, -14.1%); }
    93.75%   { transform: translate(-50%, -50%) translate(18.5%, -7.7%); }
}

/* Diagonal: seamless A→B→A loop (±15%) */
@keyframes msw-mesh-diagonal {
    0%, 100% { transform: translate(-50%, -50%) translate(-15%, -15%); }
    50% { transform: translate(-50%, -50%) translate(15%, 15%); }
}

/* Pulse: dramatic scale cycle (0.8 → 1.5) */
@keyframes msw-mesh-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; }
    50%      { transform: translate(-50%, -50%) scale(1.5); opacity: 0.9; }
}

.msw-mesh-canvas-container.msw-mesh-animated .msw-mesh-blob {
    animation: msw-mesh-float var(--msw-mesh-speed, 20s) ease-in-out infinite both;
}

/* Direction overrides: rtl reverses default; wave/clock use different keyframes */
.msw-mesh-canvas-container.msw-mesh-dir-rtl.msw-mesh-animated .msw-mesh-blob {
    animation: msw-mesh-float var(--msw-mesh-speed, 20s) ease-in-out infinite reverse both;
}
.msw-mesh-canvas-container.msw-mesh-dir-wave.msw-mesh-animated .msw-mesh-blob {
    animation: msw-mesh-wave var(--msw-mesh-speed, 20s) linear infinite both;
}
.msw-mesh-canvas-container.msw-mesh-dir-clockwise.msw-mesh-animated .msw-mesh-blob,
.msw-mesh-canvas-container.msw-mesh-dir-clock.msw-mesh-animated .msw-mesh-blob {
    animation: msw-mesh-clockwise var(--msw-mesh-speed, 20s) linear infinite both;
}
/* Counter: perfect mirror of clockwise – same keyframes, reverse direction */
.msw-mesh-canvas-container.msw-mesh-dir-counter.msw-mesh-animated .msw-mesh-blob,
.msw-mesh-canvas-container.msw-mesh-dir-counter-clockwise.msw-mesh-animated .msw-mesh-blob {
    animation: msw-mesh-clockwise var(--msw-mesh-speed, 20s) linear infinite reverse both;
}
.msw-mesh-canvas-container.msw-mesh-dir-diagonal.msw-mesh-animated .msw-mesh-blob {
    animation: msw-mesh-diagonal var(--msw-mesh-speed, 20s) linear infinite both;
}
.msw-mesh-canvas-container.msw-mesh-dir-pulse.msw-mesh-animated .msw-mesh-blob {
    animation: msw-mesh-pulse var(--msw-mesh-speed, 20s) ease-in-out infinite both;
}

/* Direction none: disable animation */
.msw-mesh-canvas-container.msw-mesh-dir-none .msw-mesh-blob {
    animation: none;
}

/* Performance guard: speed=0 disables animation to save GPU cycles */
.msw-mesh-canvas-container.msw-mesh-static .msw-mesh-blob {
    animation: none;
}

/* Accessibility + performance: users who ask for reduced motion (or battery/power-saving
   modes that set it) get a still gradient. The colored mesh stays visible; only the animated
   drift stops, cutting GPU work on old/cheap devices. Mirrors _readroom.css. */
@media (prefers-reduced-motion: reduce) {
    .msw-mesh-canvas-container .msw-mesh-blob {
        animation: none !important;
    }
}

.msw-mesh-canvas-container .msw-mesh-blob:nth-child(1) { animation-delay: 0s; left: 10%; top: 20%; }
.msw-mesh-canvas-container .msw-mesh-blob:nth-child(2) { animation-delay: -4s; left: 60%; top: 10%; }
.msw-mesh-canvas-container .msw-mesh-blob:nth-child(3) { animation-delay: -8s; left: 30%; top: 60%; }
.msw-mesh-canvas-container .msw-mesh-blob:nth-child(4) { animation-delay: -12s; left: 80%; top: 70%; }
.msw-mesh-canvas-container .msw-mesh-blob:nth-child(5) { animation-delay: -16s; left: 50%; top: 40%; }

/* ==========================================================================
   Mobile (<768px): GPU hint on active mesh only
   - Next/prev mesh: hidden (opacity 0) – GPU processes ONE mesh at a time
   - Active blobs: will-change transform, opacity for compositor (pulse uses opacity)
   - Shorter opacity transition (0.2s) – snappier mesh/gradient fade during swipe
   - script.js: 3 blobs, blur 60px, scale 1.6, speed 250ms (desktop 400ms)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .msw-unique-gato .swiper-slide-active .msw-mesh-canvas-container .msw-mesh-blob {
        will-change: transform, opacity;
    }
    /* Shorter fade during swipe – reduces perceived lag on old phones */
    .msw-unique-gato .swiper-slide .msw-mesh-canvas-container,
    .msw-unique-gato .swiper-slide .msw-gradient-layer {
        transition: opacity 0.2s ease;
    }
}

/* ==========================================================================
   GPU stability — reduce flicker and half-frame paints on mobile during resize/swipe.
   Promote only nearby slides + mesh/popup shells. Do NOT will-change every
   .swiper-slide (large decks like Tempelreinigung would spike GPU memory).
   Concatenated into assets/style.css via build-css.sh.
   ========================================================================== */

/* Wrapper: single compositor rail for horizontal transforms */
.msw-unique-gato .swiper-wrapper {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Warm window only (Swiper adds these classes) — desktop / tablet */
.msw-unique-gato .swiper-slide-active,
.msw-unique-gato .swiper-slide-next,
.msw-unique-gato .swiper-slide-prev {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    contain: layout paint;
}

/* Active mesh only: will-change/transform hints without promoting off-screen slides */
.msw-unique-gato .swiper-slide-active .msw-mesh-canvas-container {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

/* JetPopup shell: stop popup ↔ Swiper paint fight when H5P resizes */
.jet-popup .jet-popup__container,
.jet-popup .jet-popup__container-content {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Cold slides (JS adds .msw-slide-cold outside active ±2 on mobile) — lighter paint */
@media screen and (max-width: 767px) {
    /*
     * iOS WebKit: content-visibility on slides inside Swiper's transformed wrapper caused
     * blank text during swipe + ~200ms flash on unlock. Mesh-only cold hiding is enough.
     */
    .msw-unique-gato .swiper-slide.msw-slide-cold .msw-mesh-canvas-container,
    .msw-unique-gato .swiper-slide.msw-slide-cold .msw-gradient-layer {
        visibility: hidden;
        opacity: 0 !important;
        will-change: auto;
    }

    /*
     * iOS WebKit: per-slide contain/backface during swipe hid slide text (gradient only).
     * Keep compositor rail on .swiper-wrapper; let slide content paint normally on phones.
     */
    .msw-unique-gato .swiper-slide-active,
    .msw-unique-gato .swiper-slide-next,
    .msw-unique-gato .swiper-slide-prev {
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        will-change: auto;
        contain: none;
    }
}
/* ==========================================================================
   iOS touch — horizontal slide (same as Android). Swiper fade breaks horizontal
   swipe on WebKit; keep slide effect and tune touch + paint for iOS Safari.
   Class msw-ios-touch is added on the Swiper root before init (init.js).
   Concatenated into assets/style.css via build-css.sh.
   ========================================================================== */

/*
 * base.css uses touch-action: pan-y so Safari can scroll vertically.
 * That blocks reliable horizontal Swiper drags on iPhone — user wants slide, not page scroll.
 */
.msw-unique-gato.msw-ios-touch {
    touch-action: none;
}

/*
 * Mesh/gradient: skip 0.2–0.4s opacity ramps during swipe — they caused blank gaps on iOS.
 * Active/next/prev visibility rules stay in _mesh-gradient.css.
 */
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-mesh-canvas-container,
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-gradient-layer {
    transition: none;
}

.msw-unique-gato.msw-ios-touch .swiper-slide-active .msw-mesh-canvas-container,
.msw-unique-gato.msw-ios-touch .swiper-slide-next .msw-mesh-canvas-container,
.msw-unique-gato.msw-ios-touch .swiper-slide-prev .msw-mesh-canvas-container,
.msw-unique-gato.msw-ios-touch .swiper-slide-active .msw-gradient-layer,
.msw-unique-gato.msw-ios-touch .swiper-slide-next .msw-gradient-layer,
.msw-unique-gato.msw-ios-touch .swiper-slide-prev .msw-gradient-layer {
    opacity: 1 !important;
}

/* Warm window skips cold on iOS — never visibility-hide mesh mid-swipe */
.msw-unique-gato.msw-ios-touch .swiper-slide.msw-slide-cold .msw-mesh-canvas-container,
.msw-unique-gato.msw-ios-touch .swiper-slide.msw-slide-cold .msw-gradient-layer {
    visibility: visible;
    opacity: 1 !important;
}

/* WebKit: keep text painted while slide transform runs */
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-header,
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-img-box,
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-footer-zone,
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-main-img-meta,
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-menu-matrix,
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-menu-btn {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Menu buttons: skip box-shadow transition during slide paint (first-appearance flicker). */
.msw-unique-gato.msw-ios-touch .swiper-slide .msw-menu-btn {
    transition: none;
}
/* Ensure all slide content sits above the background layers */
.msw-unique-gato .msw-header,
.msw-unique-gato .msw-img-box,
.msw-unique-gato .msw-main-img-meta,
.msw-unique-gato .msw-icon-box,
.msw-unique-gato .msw-audio-wrapper,
.msw-unique-gato .msw-video-wrapper,
.msw-unique-gato .msw-pincode-engine,
.msw-unique-gato .msw-footer-zone {
    position: relative;
    z-index: 10;
}
/* Slide icon: above background layers; inline-block required for background-clip: text (gradient) */
.msw-icon-box {
    width: 100%;
}
.msw-icon-box i {
    display: inline-block;  /* Required for background-clip: text on Font Awesome icons */
    line-height: 1;
    margin: 0 auto;
}
/* Reader trigger: fixed top-right, below HUD zone (DE + Bars). Same gap as DE–Bars. */
.msw-unique-gato .msw-reader-trigger {
    position: fixed;
    z-index: 10;
}
/* ==========================================================================
   SLIDE DYNAMIC STYLES – CSS variables set per slide (swiper-view.php)
   All rules use vars; PHP outputs --var-name on .swiper-slide or element.
   Keeps CSS definitions in the stylesheet; no inline style="color:..." etc.
   ========================================================================== */
/*
 * !important budget: link color rules use scoped color !important (theme + Elementor + WP block presets).
 *   Elsewhere it is intentional only in
 *   assets/css/transcript-layer.css (overlay vs Elementor),
 *   assets/css/msw-shortcode-critical.css + swiper-view.php #msw-shortcode-fouc-guard (duplicate FOUC strip),
 *   assets/css/_mesh-gradient.css (pointer-events on mesh/gradient layers). Prefer
 *   html body .msw-unique-gato … specificity over adding !important here.
 */

/* --- HEADER: Title and short text (msw_lang_title_*, msw_lang_text_s_*_final) --- */
.msw-header {
    text-align: var(--msw-title-align, center);
}
/*
 * Alert bar: position absolute; z-index 15 above .msw-header (10). Desc must start below the bar’s painted area.
 * Titled slides use 2.5rem; desc-only needs the same clearance plus a small gap so text is not clipped.
 */
.msw-has-alert .msw-header.msw-header--no-title {
    padding-top: calc(2.5rem + 0.5rem);
}
.msw-header h2 {
    color: var(--msw-title-color, #000);
    font-size: var(--msw-title-size, 1.5rem);
    text-align: var(--msw-title-align, center);
}
/* No title: JetEngine leaves <h2></h2> — it still inherited title font-size and ate vertical space. */
.swiper-slide[data-msw-title-empty="1"] .msw-header h2:empty {
    display: none;
    margin: 0;
    padding: 0;
}
.swiper-slide[data-msw-title-empty="1"] .msw-header .msw-desc {
    margin-top: 0;
}
/* Theme resets often add margin on WYSIWYG <p>; keep short text flush under alert padding. */
.swiper-slide[data-msw-title-empty="1"] .msw-header .msw-desc p:first-child {
    margin-block-start: 0;
}
/* Short text (msw_lang_text_s): long selector chain beats Elementor kit paragraph/typography without !important. */
html body .msw-unique-gato .swiper-slide .msw-header .msw-desc,
html body .msw-unique-gato .swiper .swiper-slide .msw-header .msw-desc,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-header .msw-desc,
html body #jet-theme-core-single .msw-unique-gato .swiper-slide .msw-header .msw-desc,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-header .msw-desc,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-header .msw-desc {
    color: var(--msw-text-s-c1, #333);
    font-size: var(--msw-desc-size, 1.95rem);
    line-height: 1.45;
    text-align: var(--msw-desc-align, center);
}
html body .msw-unique-gato .swiper-slide .msw-header .msw-desc p,
html body .msw-unique-gato .swiper .swiper-slide .msw-header .msw-desc p,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-header .msw-desc p,
html body #jet-theme-core-single .msw-unique-gato .swiper-slide .msw-header .msw-desc p,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-header .msw-desc p,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-header .msw-desc p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/*
 * Desktop (≥1024px): smaller short-text caps for S/M/L only — mobile/tablet keep --msw-desc-size.
 * Values come from msw-view-preamble.php text_s_desktop (clamp max reduced −20% / −10% / −30%).
 */
@media screen and (min-width: 1024px) {
    html body .msw-unique-gato .swiper-slide .msw-header .msw-desc,
    html body .msw-unique-gato .swiper .swiper-slide .msw-header .msw-desc,
    html body .msw-unique-gato .swiper .swiper-slide-inner .msw-header .msw-desc,
    html body .msw-unique-gato .msw-step-slide .msw-header .msw-desc,
    html body #jet-theme-core-single .msw-unique-gato .swiper-slide .msw-header .msw-desc,
    html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-header .msw-desc,
    html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-header .msw-desc {
        font-size: var(--msw-desc-size-desktop, var(--msw-desc-size, 1.95rem));
    }
}

/* Match style.css (split .msw-unique-gato / .swiper + swiper-slide-inner — see main stylesheet). */
html body .swiper.msw-unique-gato .swiper-slide .msw-desc a,
html body .msw-unique-gato .swiper .swiper-slide .msw-desc a,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-desc a,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-desc a,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-desc a,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-desc a,
html body .swiper.msw-unique-gato .swiper-slide .msw-longtext a,
html body .msw-unique-gato .swiper .swiper-slide .msw-longtext a,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-longtext a,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-longtext a,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-longtext a,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-longtext a,
html body .swiper.msw-unique-gato .swiper-slide .msw-footer-text a,
html body .msw-unique-gato .swiper .swiper-slide .msw-footer-text a,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-footer-text a,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-footer-text a,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-footer-text a,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-footer-text a,
html body .swiper.msw-unique-gato .swiper-slide .msw-pdf-download-link,
html body .msw-unique-gato .swiper .swiper-slide .msw-pdf-download-link,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-pdf-download-link,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-pdf-download-link,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-pdf-download-link,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-pdf-download-link {
    color: var(--msw-link-c1, #000000) !important;
    text-decoration: underline;
}
html body .swiper.msw-unique-gato .swiper-slide .msw-desc a:hover,
html body .msw-unique-gato .swiper .swiper-slide .msw-desc a:hover,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-desc a:hover,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-desc a:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-desc a:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-desc a:hover,
html body .swiper.msw-unique-gato .swiper-slide .msw-longtext a:hover,
html body .msw-unique-gato .swiper .swiper-slide .msw-longtext a:hover,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-longtext a:hover,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-longtext a:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-longtext a:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-longtext a:hover,
html body .swiper.msw-unique-gato .swiper-slide .msw-footer-text a:hover,
html body .msw-unique-gato .swiper .swiper-slide .msw-footer-text a:hover,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-footer-text a:hover,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-footer-text a:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-footer-text a:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-footer-text a:hover,
html body .swiper.msw-unique-gato .swiper-slide .msw-pdf-download-link:hover,
html body .msw-unique-gato .swiper .swiper-slide .msw-pdf-download-link:hover,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-pdf-download-link:hover,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-pdf-download-link:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-pdf-download-link:hover,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-pdf-download-link:hover {
    color: var(--msw-link-hov-c1, #ff6900) !important;
}
html body .swiper.msw-unique-gato .swiper-slide .msw-desc a:visited,
html body .msw-unique-gato .swiper .swiper-slide .msw-desc a:visited,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-desc a:visited,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-desc a:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-desc a:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-desc a:visited,
html body .swiper.msw-unique-gato .swiper-slide .msw-longtext a:visited,
html body .msw-unique-gato .swiper .swiper-slide .msw-longtext a:visited,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-longtext a:visited,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-longtext a:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-longtext a:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-longtext a:visited,
html body .swiper.msw-unique-gato .swiper-slide .msw-footer-text a:visited,
html body .msw-unique-gato .swiper .swiper-slide .msw-footer-text a:visited,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-footer-text a:visited,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-footer-text a:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-footer-text a:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-footer-text a:visited,
html body .swiper.msw-unique-gato .swiper-slide .msw-pdf-download-link:visited,
html body .msw-unique-gato .swiper .swiper-slide .msw-pdf-download-link:visited,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-pdf-download-link:visited,
html body #jet-theme-core-single .swiper.msw-unique-gato .swiper-slide .msw-pdf-download-link:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide .msw-pdf-download-link:visited,
html body #jet-theme-core-single .msw-unique-gato .swiper .swiper-slide-inner .msw-pdf-download-link:visited {
    color: var(--msw-link-visit-c1, #000000) !important;
}

/* --- SLIDE ICON: Solid color or gradient (msw_lang_icon_c1/c2_final) --- */
.msw-icon-box {
    margin-top: 1rem;
    text-align: center;
}
.msw-icon-box.msw-icon-gradient i {
    background: linear-gradient(135deg, var(--msw-icon-c1, #dd3333) 0%, var(--msw-icon-c2, #dd3333) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.msw-icon-box:not(.msw-icon-gradient) i {
    color: var(--msw-icon-c1, #dd3333);
}
.msw-icon-box i {
    font-size: var(--msw-icon-size, 2rem);
    /* translateZ(0) triggers GPU compositing; keeps icons sharp during rotation on mobile */
    transform: translateZ(0) rotate(var(--msw-icon-rotate, 0deg));
}

/* --- MAIN SLIDE IMAGE: max-height/max-width (msw_lang_img_size_final → S/M/L/XL/XXL/XXXL/4XL) --- */
/* S and 4XL stay the endpoints. XXL: N=4/6 × 1.08 (−10% vs 1.2). XXXL: N=5/6 × 1.602 (−10% vs prior 1.78). 4XL = full hero.
 * Block-level image with margin: auto for centering. width/height on img provide CLS mitigation.
 * width: auto + max-width — scale down when container is narrow; never upscale past intrinsic pixels.
 * XL–XXXL override to width:100% + object-fit:contain so portrait scans fill the slide column (see tier rules). */
.msw-img-box img,
.msw-img-box .msw-slide-img {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--msw-img-max-w, 85vw);
    max-height: var(--msw-img-max-h, 40vh);
    margin: 1.25rem auto 0;
    border-radius: 0.9375rem;
}

/* XL–XXXL: fill .msw-img-box width so tall drawings scale to column; max-height still caps vertical span. */
.msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box .msw-slide-img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box .msw-slide-img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box .msw-slide-img {
    width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Title + icon + short text all empty: hide header — pull image/pdf box to top of column. */
.swiper-slide[data-msw-no-header="1"] .msw-img-box {
    order: -1;
}
/* When title empty (with or without icon): minimal top padding so image sits near top */
.msw-unique-gato .swiper-slide[data-msw-title-empty="1"] {
    padding-top: 0.25rem;  /* Just a few pixels from top of viewport */
}
/* When BOTH title AND icon empty: hide header, zero padding – image at absolute top */
.msw-unique-gato .swiper-slide[data-msw-no-header="1"] {
    padding-top: 0;  /* Flush to viewport top on all breakpoints */
}
/*
 * Alert bar is position:absolute. Only ONE vertical offset for clearance:
 * - Slides with a visible .msw-header use .msw-has-alert .msw-header { padding-top } (see style.css / _footer.css).
 * - Slides with data-msw-no-header (no title/icon/short text) use slide padding so image-first is not under the bar.
 * Do NOT add padding-top on BOTH slide and header for title-empty + short text — that doubled the gap (~5rem).
 */
.msw-unique-gato .msw-has-alert.swiper-slide[data-msw-no-header="1"] {
    padding-top: 2.5rem;
}
/* Title empty but short text (or icon) present: header handles clearance; slide stays flush to viewport top. */
.msw-unique-gato .msw-has-alert.swiper-slide[data-msw-title-empty="1"]:not([data-msw-no-header="1"]) {
    padding-top: 0;
}
.swiper-slide[data-msw-no-header="1"] .msw-header {
    display: none;  /* Zero space */
}
.swiper-slide[data-msw-no-header="1"] .msw-img-box {
    margin-top: 0;
}
.swiper-slide[data-msw-no-header="1"] .msw-img-box img,
.swiper-slide[data-msw-no-header="1"] .msw-img-box .msw-slide-img {
    margin-top: 0;
}

/* Mobile (< 768px): S and 4XL unchanged; M–XXXL widths interpolate narrow→full (same N/6 as height, global). */
/* Container gets explicit 95vw so inline max-width:100% on img actually fills the viewport. */
@media screen and (max-width: 767px) {
    .msw-unique-gato .msw-img-box {
        width: 95vw;
        max-width: 95vw;
    }
    .msw-unique-gato .msw-img-box img,
    .msw-unique-gato .msw-img-box .msw-slide-img {
        max-width: 100%;  /* Fill container (95vw) – beats inline by specificity */
        max-height: 35vh;
        height: auto;
        margin-bottom: 10px;
    }
    /* S: never taller than 200px (project thumbnail). */
    .msw-unique-gato .swiper-slide[data-msw-img-size="S"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="S"] .msw-img-box .msw-slide-img {
        max-width: min(90vw, 280px);
        max-height: 200px;
    }
    /* M–XXXL: max-height uses global linear rule below; here only mobile max-width (S→4XL span). */
    .msw-unique-gato .swiper-slide[data-msw-img-size="M"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="M"] .msw-img-box .msw-slide-img {
        max-width: calc(min(90vw, 280px) + (min(100vw, 1920px) - min(90vw, 280px)) / 6);
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="L"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="L"] .msw-img-box .msw-slide-img {
        max-width: calc(min(90vw, 280px) + (min(100vw, 1920px) - min(90vw, 280px)) * 2 / 6);
    }
    /* XL on mobile */
    .msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box {
        width: 98vw;
        max-width: 98vw;
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, calc(min(90vw, 280px) + (min(100vw, 1920px) - min(90vw, 280px)) * 3 / 6));
    }
    /* XXL on mobile */
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box {
        width: 99vw;
        max-width: 99vw;
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, calc((min(90vw, 280px) + (min(100vw, 1920px) - min(90vw, 280px)) * 4 / 6) * 1.08));
    }
    /* XXXL on mobile */
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box .msw-slide-img {
        /* XXXL width: 5/6 × 1.602 (−10% vs 1.78). */
        max-width: min(100%, calc((min(90vw, 280px) + (min(100vw, 1920px) - min(90vw, 280px)) * 5 / 6) * 1.602));
    }
    /* 4XL on mobile: full-viewport hero (1080p-friendly); width capped at 1920px-equivalent via img max-width. */
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, 1920px);
        max-height: min(100vh, 1080px);
        height: auto;
    }
}

/* S: tablet + desktop — same 200px height cap as mobile. */
@media screen and (min-width: 768px) {
    .msw-unique-gato .swiper-slide[data-msw-img-size="S"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="S"] .msw-img-box .msw-slide-img {
        max-width: min(280px, 42vw);
        max-height: 200px;
        height: auto;
    }
}

/*
 * M–XXXL: same linear max-height on mobile, tablet, and desktop (N = 1…5 of six steps to 4XL ceiling).
 * 4XL keeps its own rule; S keeps 200px.
 */
.msw-unique-gato .swiper-slide[data-msw-img-size="M"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="M"] .msw-img-box .msw-slide-img {
    max-height: calc(200px + (min(100vh, 1080px) - 200px) / 6);
    height: auto;
}
.msw-unique-gato .swiper-slide[data-msw-img-size="L"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="L"] .msw-img-box .msw-slide-img {
    max-height: calc(200px + (min(100vh, 1080px) - 200px) * 2 / 6);
    height: auto;
}
.msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box .msw-slide-img {
    max-height: calc(200px + (min(100vh, 1080px) - 200px) * 3 / 6);
    height: auto;
}
.msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box .msw-slide-img {
    max-height: min(
        min(100vh, 1080px),
        calc((200px + (min(100vh, 1080px) - 200px) * 4 / 6) * 1.08)
    );
    height: auto;
}
.msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box .msw-slide-img {
    /* XXXL: *5/6 × 1.602 (10% smaller than 1.78). XXL uses *4/6 × 1.08. */
    max-height: min(
        min(100vh, 1080px),
        calc((200px + (min(100vh, 1080px) - 200px) * 5 / 6) * 1.602)
    );
    height: auto;
}

/* Tablet + desktop: linear max-width (S width → 4XL cap), same N/6 as mobile. */
@media screen and (min-width: 768px) {
    /* XL–XXXL: box spans slide column — avoids shrink-to-intrinsic width (narrow drawing + huge whitespace). */
    .msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="M"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="M"] .msw-img-box .msw-slide-img {
        max-width: calc(min(280px, 40vw) + (min(90vw, 1920px) - min(280px, 40vw)) / 6);
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="L"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="L"] .msw-img-box .msw-slide-img {
        max-width: calc(min(280px, 40vw) + (min(90vw, 1920px) - min(280px, 40vw)) * 2 / 6);
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, calc(min(280px, 40vw) + (min(90vw, 1920px) - min(280px, 40vw)) * 3 / 6));
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, calc((min(280px, 40vw) + (min(90vw, 1920px) - min(280px, 40vw)) * 4 / 6) * 1.08));
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, calc((min(280px, 40vw) + (min(90vw, 1920px) - min(280px, 40vw)) * 5 / 6) * 1.602));
    }
}

/* L: transcript overlay width matches L image (N = 2/6 of width span). */
@media screen and (min-width: 1024px) {
    .msw-unique-gato .swiper-slide[data-msw-img-size="L"] .msw-transcript-overlay {
        max-width: calc(min(280px, 40vw) + (min(90vw, 1920px) - min(280px, 40vw)) * 2 / 6);
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 4XL: edge-to-edge box; img may use full 1080p height or 1920px width (object-fit contain in flow). */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, 1920px);
        max-height: min(100vh, 1080px);
        height: auto;
    }
}
@media screen and (min-width: 1024px) {
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box img,
    .msw-unique-gato .swiper-slide[data-msw-img-size="4XL"] .msw-img-box .msw-slide-img {
        max-width: min(100%, 1920px);
        max-height: min(100vh, 1080px);
        height: auto;
    }
}

/* --- FOOTER: Text color/size, image max-height --- */
.msw-footer-zone .msw-footer-text {
    color: var(--msw-footer-text-c, #333);
    font-size: var(--msw-footer-text-size, 0.9rem);
}
.msw-footer-zone .msw-footer-img {
    max-height: var(--msw-footer-img-max-h, 2.5rem);
}

/* --- MENU MATRIX: Button colors, bg, border, radius, font-size --- */
.msw-menu-matrix .msw-menu-btn {
    color: var(--msw-menu-color, inherit);
    font-size: var(--msw-menu-font-size, 0.9rem);
    background: var(--msw-menu-bg, transparent);
    border-color: var(--msw-menu-border, currentColor);
    border-radius: var(--msw-menu-radius, 0.25rem);
}
.msw-menu-matrix .msw-menu-btn-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.7rem;
}
.msw-menu-matrix .msw-menu-btn-icon {
    flex-shrink: 0;
    line-height: 1;
}
.msw-menu-matrix .msw-menu-btn-label {
    line-height: 1.25;
    text-align: left;
}

/* --- GRADIENT LAYER: Dynamic gradient (bg_c_type_final = gradient) --- */
.msw-gradient-layer {
    background: var(--msw-grad-bg, none);
}

/* --- BACKGROUND IMAGE LAYER --- */
.msw-bg-layer {
    background-image: var(--msw-bg-image, none);
}

/* --- BACKGROUND OVERLAY (rgba from bg_c1 + opacity) --- */
.msw-bg-overlay {
    background-color: var(--msw-bg-overlay, transparent);
}

/* --- ALERT BAR: Padding and font-size (colors via existing --msw-alert-*) --- */
.msw-alert-bar {
    padding: var(--msw-alert-pad, 0.5rem 0.75rem);
    font-size: var(--msw-alert-fs, 0.9rem);
}
/* ==========================================================================
   MAIN IMAGE METADATA — author / copyright (row 1), caption (row 2)
   Below .msw-img-box when main attachment is valid. No inline styles in PHP.
   Row 1: both fields = split + center gap; one field only = centered.
   ========================================================================== */

.msw-main-img-meta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
    /* Slight top gap so the row is visually separated from the image when space is tight */
    margin-top: 0.2rem;
}

/* Shared typography for row 1 — matches msw_lang_text_s_c1 (Omega _final) via --msw-text-s-c1 on .swiper-slide */
.msw-main-img-meta-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* 8pt was easy to miss on mobile; rem tracks root and stays readable */
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--msw-text-s-c1, #333);
}

/* Two fields: [ author → center ] [ gap ] [ ← copyright ] */
.msw-main-img-meta-row--split {
    --msw-main-img-meta-gap: clamp(2rem, 8vw, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--msw-main-img-meta-gap) minmax(0, 1fr);
    align-items: baseline;
}

/* One field: center */
.msw-main-img-meta-row--single {
    display: flex;
    justify-content: center;
    align-items: baseline;
    text-align: center;
}

.msw-main-img-meta-row--single .msw-main-img-auth,
.msw-main-img-meta-row--single .msw-main-img-copy {
    text-align: center;
}

/* Center column: keeps space clear (e.g. pagination above/below elsewhere, or visual breathing room). */
.msw-main-img-meta-gap {
    min-height: 0.1em;
    pointer-events: none;
}

.msw-main-img-meta-col {
    min-width: 0;
    display: flex;
}

.msw-main-img-meta-col--author {
    justify-content: flex-end;
}

.msw-main-img-meta-col--copy {
    justify-content: flex-start;
}

.msw-main-img-auth {
    max-width: 100%;
    font-size: 0.7rem;
    color: var(--msw-text-s-c1, #333);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.msw-main-img-meta-row--split .msw-main-img-auth {
    text-align: right;
}

.msw-main-img-copy {
    max-width: 100%;
    font-size: 0.7rem;
    color: var(--msw-text-s-c1, #333);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.msw-main-img-meta-row--split .msw-main-img-copy {
    text-align: left;
}

/* Copyright as link: same tone as row; underline for affordance */
.msw-main-img-copy-link {
    color: inherit;
    text-decoration: underline;
}

.msw-main-img-copy-link:hover,
.msw-main-img-copy-link:focus-visible {
    color: inherit;
    text-decoration: underline;
}

/* Row 2: WYSIWYG caption — one clear step below row 1; same short-text token as body/h5 */
.msw-main-img-caption {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--msw-text-s-c1, #333);
}

.msw-main-img-caption p {
    margin: 0.35em 0 0;
}

.msw-main-img-caption p:first-child {
    margin-top: 0;
}

/* Links inside WYSIWYG caption: use slide link color for readability */
html body .swiper.msw-unique-gato .swiper-slide .msw-main-img-caption a,
html body .msw-unique-gato .swiper .swiper-slide .msw-main-img-caption a,
html body .msw-unique-gato .swiper .swiper-slide-inner .msw-main-img-caption a {
    color: var(--msw-link-c1, #0066cc);
    text-decoration: underline;
}

/* ==========================================================================
   XXXL + CREDITS — when author/copyright/caption exist, reserve vertical space
   Scoped to [data-msw-img-size="XXXL"] so 4XL/L/XL/XXL per-size rules are not touched.
   IMPORTANT: Do NOT reintroduce var(--msw-img-max-h)/40vh here — that selector is more
   specific than _slide-dynamic.css and was shrinking XXXL to ~300px tall while the linear
   tier matches ×1.602 on linear XXXL (−10% vs 1.78). Viewport clamp is light (3.25rem);
   old 10rem reserve made XXXL+meta shorter than XXL (no :has rule).
   :has() — Safari 15.4+.
   ========================================================================== */
.msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"]:has(.msw-main-img-meta) .msw-img-box img,
.msw-unique-gato .swiper-slide[data-msw-img-size="XXXL"]:has(.msw-main-img-meta) .msw-img-box .msw-slide-img {
    max-height: min(
        min(min(100vh, 1080px), calc((200px + (min(100vh, 1080px) - 200px) * 5 / 6) * 1.602)),
        max(260px, calc(100vh - 3.25rem))
    );
}
/* ==========================================================================
   SYNTH-LOCK ENGINE (Pincode Slide)
   CSS Grid 3x4 numpad, thematic skins via CSS variables, Shake/Fade In.
   ========================================================================== */
.msw-pincode-engine {
    width: 100%;
    max-width: 20rem;
    margin: 1rem auto 0;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--msw-pincode-bg, rgba(0, 0, 0, 0.15));
    font-family: var(--msw-pincode-font, inherit);
}
.msw-pincode-display {
    min-height: 2.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.35rem;
    background: var(--msw-pincode-display-bg, rgba(255, 255, 255, 0.9));
    border: 2px solid var(--msw-pincode-display-border, rgba(0, 0, 0, 0.2));
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-align: center;
    color: var(--msw-pincode-display-text, #333);
}
.msw-pincode-display.msw-pincode-shake {
    animation: msw-pincode-shake 0.4s ease-in-out;
}
.msw-pincode-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0.5rem;
    touch-action: manipulation;
}
.msw-pincode-btn {
    min-height: 2.75rem;
    padding: 0.5rem;
    border: 2px solid var(--msw-pincode-btn-border, rgba(0, 0, 0, 0.3));
    border-radius: 0.35rem;
    background: var(--msw-pincode-btn-bg, rgba(255, 255, 255, 0.95));
    color: var(--msw-pincode-btn-text, #333);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.1s;
}
.msw-pincode-btn:hover {
    background: var(--msw-pincode-btn-hover, rgba(0, 0, 0, 0.08));
}
.msw-pincode-btn:active {
    transform: scale(0.97);
}
.msw-pincode-success {
    display: none;
    grid-column: span 1;
    touch-action: manipulation;
}
.msw-pincode-success.msw-pincode-fade-in {
    animation: msw-pincode-fade-in 0.5s ease-out forwards;
}

/* When unlocked: hide digit/clear buttons, keep display with correct answer; success button full width */
.msw-unique-gato .msw-pincode-engine.msw-pincode-unlocked .msw-pincode-numpad .msw-pincode-digit,
.msw-unique-gato .msw-pincode-engine.msw-pincode-unlocked .msw-pincode-numpad .msw-pincode-clear {
    display: none;
    pointer-events: none;
}
.msw-pincode-engine.msw-pincode-unlocked .msw-pincode-success {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    min-height: 3.5rem;
    align-self: stretch;
}
@keyframes msw-pincode-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}
/* Read Room icon: rubber shake left – draws attention when slide becomes active (original working version) */
@keyframes msw-reader-attention {
    0% { transform: translateX(0); }
    20% { transform: translateX(-14px); }
    35% { transform: translateX(-22px); }
    50% { transform: translateX(-10px); }
    65% { transform: translateX(-18px); }
    80% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}
@keyframes msw-reader-attention-rtl {
    0% { transform: translateX(0); }
    20% { transform: translateX(14px); }
    35% { transform: translateX(22px); }
    50% { transform: translateX(10px); }
    65% { transform: translateX(18px); }
    80% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}
/* Mobile: 50% gentler shake – less intrusive on small screens */
@keyframes msw-reader-attention-mobile {
    0% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    35% { transform: translateX(-11px); }
    50% { transform: translateX(-5px); }
    65% { transform: translateX(-9px); }
    80% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
@keyframes msw-reader-attention-rtl-mobile {
    0% { transform: translateX(0); }
    20% { transform: translateX(7px); }
    35% { transform: translateX(11px); }
    50% { transform: translateX(5px); }
    65% { transform: translateX(9px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}
@keyframes msw-pincode-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Skin: std (default) – uses base variables */
.msw-skin-std { /* defaults above */ }
/* Skin: mtx – terminal, Courier New, neon green */
.msw-skin-mtx {
    --msw-pincode-font: 'Courier New', Courier, monospace;
    --msw-pincode-bg: rgba(0, 20, 0, 0.9);
    --msw-pincode-display-bg: rgba(0, 0, 0, 0.8);
    --msw-pincode-display-border: #00ff41;
    --msw-pincode-display-text: #00ff41;
    --msw-pincode-btn-bg: rgba(0, 40, 0, 0.9);
    --msw-pincode-btn-border: #00ff41;
    --msw-pincode-btn-text: #00ff41;
    --msw-pincode-btn-hover: rgba(0, 255, 65, 0.2);
}
/* Skin: fan – mechanical stone */
.msw-skin-fan {
    --msw-pincode-bg: rgba(80, 70, 60, 0.85);
    --msw-pincode-display-bg: rgba(100, 90, 80, 0.95);
    --msw-pincode-display-border: #8b7355;
    --msw-pincode-display-text: #4a4035;
    --msw-pincode-btn-bg: rgba(120, 110, 95, 0.95);
    --msw-pincode-btn-border: #6b5d4d;
    --msw-pincode-btn-text: #3d3529;
    --msw-pincode-btn-hover: rgba(0, 0, 0, 0.15);
}
/* Skin: hell – ominous dark red/black */
.msw-skin-hell {
    --msw-pincode-bg: rgba(30, 0, 0, 0.95);
    --msw-pincode-display-bg: rgba(50, 0, 0, 0.9);
    --msw-pincode-display-border: #8b0000;
    --msw-pincode-display-text: #ff4444;
    --msw-pincode-btn-bg: rgba(60, 0, 0, 0.9);
    --msw-pincode-btn-border: #8b0000;
    --msw-pincode-btn-text: #ff6666;
    --msw-pincode-btn-hover: rgba(255, 0, 0, 0.15);
}
/* Skin: bib – celestial soft blue/white */
.msw-skin-bib {
    --msw-pincode-bg: rgba(220, 235, 255, 0.9);
    --msw-pincode-display-bg: rgba(255, 255, 255, 0.95);
    --msw-pincode-display-border: #87ceeb;
    --msw-pincode-display-text: #4169e1;
    --msw-pincode-btn-bg: rgba(240, 248, 255, 0.95);
    --msw-pincode-btn-border: #87ceeb;
    --msw-pincode-btn-text: #4169e1;
    --msw-pincode-btn-hover: rgba(135, 206, 235, 0.4);
}
/* ==========================================================================
   FOOTER ZONE (v2.11.0)
   
   Rendered at the bottom-left of each slide for footer image + text.
   Uses msw_lang_img_btm_final and msw_lang_text_btm. Row: [Image] [Text].
   z-index: 15 = above content (10) and bg (1) so footer stays on top.
   Bottom-right reserved for future buttons.
   ========================================================================== */

.msw-unique-gato .msw-footer-zone {
    position: absolute;
    bottom: 0.5rem;
    left: 1.5rem;
    display: flex;
    align-items: flex-end;   /* Text at bottom, aligned with logo bottom (not centered) */
    gap: 0.4rem;
    z-index: 15;
    pointer-events: none;
    /* iPhone home-indicator breathing room only; --msw-bottom-ui lifts via bottom calc on mobile */
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/* Desktop: footer closer to bottom – no safe-area needed, minimal padding */
@media screen and (min-width: 768px) {
    .msw-unique-gato .msw-footer-zone {
        bottom: 0.625rem;   /* 10px – 4px higher than 0.375rem */
        padding-bottom: 0;
    }
}

/* 2x Small: text 0.125rem (2px) closer to logo. */
.msw-unique-gato .msw-footer-zone.msw-footer-txt-S {
    gap: 0.275rem;
}

/* Mobile/tablet: footer-to-dots distance (px = easy to tune, absolute gap).
   Size-specific bottom values compensate for different footer heights (S/M/L)
   so the visual gap is the same: very close, as in Small screenshot. */
@media screen and (max-width: 767px) {
    .msw-unique-gato .msw-footer-zone {
        bottom: calc(6px + var(--msw-bottom-ui, 0px));
    }
    /* Small: same as M/L – text at bottom, margin-bottom creates gap above dots */
    .msw-unique-gato .msw-footer-zone.msw-footer-txt-S {
        bottom: calc(8px + var(--msw-bottom-ui, 0px));
    }
    .msw-unique-gato .msw-footer-zone.msw-footer-txt-S .msw-footer-text {
        margin-bottom: 15px;
    }
    /* Medium: same approach */
    .msw-unique-gato .msw-footer-zone.msw-footer-txt-M {
        bottom: calc(5px + var(--msw-bottom-ui, 0px));
    }
    .msw-unique-gato .msw-footer-zone.msw-footer-txt-M .msw-footer-text {
        margin-bottom: 15px;
    }
    /* Large: text at bottom, margin-bottom creates gap above dots */
    .msw-unique-gato .msw-footer-zone.msw-footer-txt-L {
        bottom: calc(4px + var(--msw-bottom-ui, 0px));
    }
    .msw-unique-gato .msw-footer-zone.msw-footer-txt-L .msw-footer-text {
        margin-bottom: 15px;
    }
}

/* Children must be clickable: lightbox link and text selection */
.msw-unique-gato .msw-footer-zone > a,
.msw-unique-gato .msw-footer-zone > .msw-footer-img,
.msw-unique-gato .msw-footer-zone > .msw-footer-text {
    pointer-events: auto;
}

/* Menu matrix jump buttons (m1–m12). Colors come from slide CSS vars. */
.msw-unique-gato .msw-menu-matrix {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    position: relative;
    z-index: 10;
    
}
/* Menu colors/size come from slide CSS vars (swiper-view.php _final fields). */
.msw-unique-gato .msw-menu-btn {
    cursor: pointer;
    padding: var(--msw-menu-padding, 0.35rem 0.75rem);
    font-size: var(--msw-menu-font-size, 0.9rem);
    border-radius: var(--msw-menu-radius, 0.25rem);
    border: 2px solid var(--msw-menu-border, currentColor);
    /* Lower-right elevation (standard offset); works on any gradient */
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.12), 6px 8px 16px rgba(0, 0, 0, 0.22);
    color: var(--msw-menu-color, inherit);
    background: var(--msw-menu-bg, transparent);
    touch-action: manipulation;
    transition: box-shadow 0.2s ease;
}
.msw-unique-gato .msw-menu-btn:hover {
    box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.14), 8px 12px 20px rgba(0, 0, 0, 0.3);
}
.msw-unique-gato .msw-menu-btn:active {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1), 3px 4px 10px rgba(0, 0, 0, 0.18);
    transition-duration: 0.08s;
}
.msw-unique-gato .msw-menu-btn-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.7rem;
}
.msw-unique-gato .msw-menu-btn-icon {
    flex-shrink: 0;
    line-height: 1;
}
.msw-unique-gato .msw-menu-btn-label {
    line-height: 1.25;
    text-align: left;
}
.msw-unique-gato .msw-menu-btn:focus-visible {
    outline: 2px solid var(--msw-menu-border, currentColor);
    outline-offset: 2px;
}

/* Language Pages slot on + label set, but no jump/url/h5p/snd target configured yet */
.msw-unique-gato .msw-menu-btn.msw-menu-btn-no-target {
    cursor: default;
    opacity: 0.72;
}

.msw-unique-gato .msw-footer-img {
    width: auto;
    display: block;
    /* max-height from PHP inline style */
}

.msw-unique-gato .msw-footer-text {
    line-height: 1.4;
    max-width: 80vw;
    margin: 0;   /* No extra gap; align-items:flex-end controls vertical position */
}

/* --- SLIM ALERT WARNING BAR (msw_lang_alert_active + msw_alert_templates) --- */
/* Bar: position absolute, top 0; parent .swiper-slide has position:relative (line ~68). */
.msw-alert-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-left: 5px solid var(--msw-alert-bd, #dd3333);
    background-color: var(--msw-alert-bg, #fff3cd);
    color: var(--msw-alert-text, #856404);
    z-index: 15;
}
/* When alert present, add padding-top so bar does not overlap slide title. */
.msw-has-alert .msw-header {
    padding-top: 2.5rem;
}
/* No <h2>: bar still overlaps unless offset matches titled slides + small gap (see _slide-dynamic.css). */
.msw-has-alert .msw-header.msw-header--no-title {
    padding-top: calc(2.5rem + 0.5rem);
}
/* Icon: force color for custom domain reliability (FA may fail to load). */
.msw-alert-bar .msw-alert-icon {
    color: var(--msw-alert-icon, #856404);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2em;
}
/* Fallback &#9888; layered behind FA ::before; visible when FA fails or CCT icon empty. */
.msw-alert-fallback {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: inherit;
}

/* ==========================================================================
   SND TRIGGER – Menu button type snd (sound only, no navigation)
   Red flash feedback on click. Used by .msw-js-snd-trigger.
   ========================================================================== */

.msw-unique-gato .msw-menu-btn.msw-js-snd-trigger {
    transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

html body .msw-unique-gato .msw-menu-btn.msw-js-snd-trigger.msw-snd-clicked {
    background: #dd3333;
}
/* --- HEADER & TEXT --- */
.msw-header { z-index: 10; width: 100%; }
/* Title font-size: controlled by inline style per slide (msw_lang_title_size_final). */
.msw-unique-gato h2 { font-weight: 800; line-height: 1; margin: 0 0 1.25rem 0; }
.msw-desc { 
    color: #333; 
    font-size: 1.95rem; 
    line-height: 1.5; 
    max-width: 46.875rem; 
    margin: 0 auto; 
}  /* 750px → 46.875rem */

/* --- AUDIO PLAYER (native HTMLMediaElement, no external libs) --- */
/* Layout: [Play] [Progress Bar] [Total Time]. Slim height, minimal vertical space. */
.msw-unique-gato .msw-audio-wrapper {
    width: 90%;
    max-width: 320px;
    margin: 0.5rem auto 0;
    position: relative;
    z-index: 10;
    padding: 0.35rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--msw-hud-c1, #000) 25%, transparent 75%);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 6%, transparent 94%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* FA icon (msw-icon-box) directly above audio — ~2× prior gap (clamp ~20px / 2vmin cap) */
.msw-unique-gato .msw-icon-box + .msw-audio-wrapper {
    margin-top: clamp(1.25rem, 2vmin, 1.5rem);
}
/* Menu matrix between slide icon and audio (same vertical rhythm when quiz row exists) */
.msw-unique-gato .msw-menu-matrix + .msw-audio-wrapper {
    margin-top: clamp(1.25rem, 2vmin, 1.5rem);
}
.msw-unique-gato .msw-audio-ui {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Prevent WordPress emoji replacement from hijacking play/pause icons (slow s.w.org SVG) */
html body .msw-unique-gato .msw-audio-wrapper img.emoji,
html body .msw-unique-gato .msw-video-wrapper img.emoji {
    display: none;
}
.msw-unique-gato .msw-audio-play {
    pointer-events: auto;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--msw-hud-c1, #000);
    padding: 0.1rem;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.msw-unique-gato .msw-audio-play .msw-audio-icon {
    color: var(--msw-hud-c1, #000);
}
.msw-unique-gato .msw-audio-icon {
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
}
.msw-unique-gato .msw-audio-icon svg,
.msw-unique-gato .msw-video-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}
.msw-unique-gato .msw-audio-progress-wrap {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 15%, transparent 85%);
    pointer-events: auto;
    cursor: pointer;
}
.msw-unique-gato .msw-audio-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: var(--msw-hud-c1, #000);
    transition: width 0.1s linear;
}
.msw-unique-gato .msw-audio-time {
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    color: var(--msw-text-s-c1, #333);
    min-width: 9ch;
}

/* --- VIDEO PLAYER (msw_lang_video, .msw-video-wrapper) --- */
/*
 * IMPORTANT: There is no CCT field for video dimensions. Sizing is defined ONLY here — not in
 * _slide-dynamic.css and NOT derived from msw_lang_img_size_final / data-msw-img-size (image tiers).
 * Intrinsic pixels are the ceiling: width/height auto + max-* + object-fit: contain (no upscale).
 *
 * --msw-video-max-h / --msw-video-max-w are set in JS on the active slide: min(90% viewport,
 * budget from header bottom to pagination, video.videoHeight/videoWidth) — no upscale.
 * Before JS runs, fallback subtracts typical header/title space from min(100vh, 100svh).
 */
.msw-unique-gato .msw-video-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem auto 0;
    position: relative;
    z-index: 10;
    pointer-events: none;
    -webkit-touch-callout: none;
    border: none;
    box-shadow: none;
    /* Shared bottom-bar + center-play symbol fill: ~40% HUD c1 (video shows through). */
    --msw-video-ui-symbol-alpha: 40%;
}
/* Phone: undo slide left/right inset (same math as 5% + 5% padding on content width = 90%) */
@media screen and (max-width: 767px) {
    .msw-unique-gato .swiper-slide .msw-video-wrapper {
        width: calc(100% / 0.9);
        max-width: none;
        /* Pull into padding area: -5% of slide width / 90% content width ≈ -5.5556% of content */
        margin-left: -5.5555555556%;
        margin-right: -5.5555555556%;
    }
}
/* Tablet/desktop: span slide content width so portrait video can use full breadth (height still capped). */
@media screen and (min-width: 768px) {
    .msw-unique-gato .msw-video-wrapper {
        width: 100%;
        max-width: 100%;
    }
}
/* Shared fallback: ~90% viewport minus title/pagination reserve (before JS sets --msw-video-max-h). */
.msw-unique-gato .msw-video-wrapper video {
    box-sizing: border-box;
    width: auto;
    /* height:auto lets the video size to its aspect ratio and only be capped by max-height
     * (JS sets --msw-video-max-h). A forced height overshot the clipped slide and cropped the
     * top on portrait videos; max-height + object-fit:contain never crops. */
    height: auto;
    max-width: min(100%, var(--msw-video-max-w, 100%), 1920px);
    max-height: var(--msw-video-max-h, min(calc(min(100vh, 100svh) * 0.9 - 6rem), min(90vh, 90svh), 1440px));
    object-fit: contain;
    object-position: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}
/* While playing: video surface accepts taps to pause (wrapper keeps pointer-events:none). */
.msw-unique-gato .msw-video-wrapper.msw-video-is-playing video {
    pointer-events: auto;
    cursor: pointer;
}
/* Video-only slide: tight gap below header so portrait video can use vertical budget. */
.msw-unique-gato .swiper-slide[data-msw-video-primary="1"] .msw-video-wrapper {
    margin-top: 0.25rem;
}
/* Desktop: pointer-events auto (same 90vh budget as mobile — no 58vh/820px cap). */
@media screen and (min-width: 1024px) {
    .msw-unique-gato .msw-video-wrapper {
        pointer-events: auto;
    }
}
/* Small screens: full column width (independent of image 35vh thumbnail behavior). */
@media screen and (max-width: 767px) {
    .msw-unique-gato .msw-video-wrapper video {
        max-width: min(100%, var(--msw-video-max-w, 100%));
    }
}
.msw-unique-gato .msw-video-ui {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Bottom-bar control sizes — mobile −10%, desktop +30% (center play uses separate rules). */
    --msw-video-ui-play: 1.2rem;
    --msw-video-ui-aux: 1.1rem;
    --msw-video-ui-time: 0.7rem;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 0.25rem;
    row-gap: 0.2rem;
    align-items: center;
    padding: 0.15rem 0.35rem 0.12rem;   /* Slight bottom padding; timeline in row 2 */
    background: transparent;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.msw-unique-gato .msw-video-ui .msw-video-play {
    grid-row: 1;
    grid-column: 1;
}
.msw-unique-gato .msw-video-ui .msw-video-mute {
    grid-row: 1;
    grid-column: 2;
}
.msw-unique-gato .msw-video-ui .msw-video-progress-wrap {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: end;
    width: 100%;
    min-width: 0;
}
.msw-unique-gato .msw-video-ui .msw-video-time {
    grid-row: 1;
    grid-column: 4;
    justify-self: end;
}
.msw-unique-gato .msw-video-ui .msw-video-fullscreen {
    grid-row: 1;
    grid-column: 5;
}
/* Desktop only: fade out when playing – JS adds .msw-video-controls-hidden */
.msw-unique-gato .msw-video-wrapper.msw-video-controls-hidden .msw-video-ui {
    opacity: 0;
    pointer-events: none;
}
.msw-unique-gato .msw-video-play,
.msw-unique-gato .msw-video-mute,
.msw-unique-gato .msw-video-fullscreen {
    pointer-events: auto;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--msw-hud-c1, #000);
    padding: 0.1rem;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
/* Large center play — same triangle icon as bottom bar; hidden while video is playing. */
.msw-unique-gato .msw-video-play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    padding: 0.35rem;
    margin: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.msw-unique-gato .msw-video-wrapper.msw-video-is-playing .msw-video-play-center {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Video-only slide: reserve vertical space so center play sits in the media zone (not on controls). */
.msw-unique-gato [data-msw-video-primary="1"] .msw-video-wrapper {
    min-height: var(--msw-video-max-h, min(45vh, 420px));
}
.msw-unique-gato .msw-video-icon {
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
}

/* Crisp 1px black outline on video HUD SVGs (replaces soft hud-c2 drop-shadow glow). */
.msw-unique-gato .msw-video-ui .msw-video-icon svg {
    stroke: #000;
    stroke-width: 1px;
    paint-order: stroke fill;
    vector-effect: non-scaling-stroke;
}

.msw-unique-gato .msw-video-play .msw-video-icon,
.msw-unique-gato .msw-video-mute .msw-video-icon,
.msw-unique-gato .msw-video-fullscreen .msw-video-icon {
    color: var(--msw-hud-c1, #000);
}

.msw-unique-gato .msw-video-ui .msw-video-play .msw-video-icon {
    font-size: var(--msw-video-ui-play);
    color: color-mix(in srgb, var(--msw-hud-c1, #000) var(--msw-video-ui-symbol-alpha), transparent);
}

.msw-unique-gato .msw-video-ui .msw-video-mute .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-fullscreen .msw-video-icon {
    font-size: var(--msw-video-ui-aux);
    color: color-mix(in srgb, var(--msw-hud-c1, #000) var(--msw-video-ui-symbol-alpha), transparent);
}

.msw-unique-gato .msw-video-ui .msw-video-play:hover .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-mute:hover .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-fullscreen:hover .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-play:focus-visible .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-mute:focus-visible .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-fullscreen:focus-visible .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-play:active .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-mute:active .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-fullscreen:active .msw-video-icon {
    color: var(--msw-hud-c1, #000);
}
/* Center play: 5× bottom-bar triangle — must follow .msw-video-play rule (same element has both classes). */
.msw-unique-gato .msw-video-wrapper .msw-video-play.msw-video-play-center .msw-video-icon {
    font-size: 6rem;
    line-height: 1;
    color: color-mix(in srgb, var(--msw-hud-c1, #000) var(--msw-video-ui-symbol-alpha, 40%), transparent);
    transition: color 0.2s ease;
}

.msw-unique-gato .msw-video-wrapper .msw-video-play.msw-video-play-center:hover .msw-video-icon,
.msw-unique-gato .msw-video-wrapper .msw-video-play.msw-video-play-center:focus-visible .msw-video-icon,
.msw-unique-gato .msw-video-wrapper .msw-video-play.msw-video-play-center:active .msw-video-icon {
    color: var(--msw-hud-c1, #000);
}

.msw-unique-gato .msw-video-wrapper .msw-video-play.msw-video-play-center .msw-video-icon svg {
    width: 6rem;
    height: 6rem;
    stroke: #000;
    stroke-width: 1px;
    paint-order: stroke fill;
    vector-effect: non-scaling-stroke;
}
/* Mute: same visual weight as fullscreen (YouTube-style) */
.msw-unique-gato .msw-video-mute {
    padding: 0.2rem;
}
.msw-unique-gato .msw-video-mute .msw-video-icon svg {
    fill: currentColor;
}
/* Muted: full HUD contrast (not 40% fade) + red slash — readable on dark video and light slides */
.msw-unique-gato .msw-video-ui .msw-video-mute .msw-video-icon--muted {
    color: var(--msw-hud-c1, #000);
}
.msw-unique-gato .msw-video-mute .msw-video-icon--muted svg .msw-video-mute-slash {
    stroke: #e53935;
    stroke-width: 2.25px;
    stroke-linecap: round;
    fill: none;
    vector-effect: non-scaling-stroke;
}
/* Fullscreen button: strong, visible */
.msw-unique-gato .msw-video-fullscreen {
    padding: 0.2rem;
}
.msw-unique-gato .msw-video-fullscreen .msw-video-icon svg {
    fill: currentColor;
}
.msw-unique-gato .msw-video-progress-wrap {
    flex: 1;                           /* In .msw-video-ui grid, flex ignored; full width via grid placement */
    height: 2.5px;                      /* Reduced ~40%: was 4px */
    border-radius: 1.5px;
    background: color-mix(in srgb, var(--msw-hud-c2, #666) 30%, transparent 70%);
    pointer-events: auto;
    cursor: pointer;
}
.msw-unique-gato .msw-video-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: var(--msw-hud-c1, #000);
    transition: width 0.1s linear;
}
/* Phone: bottom-bar controls −10% vs prior 2× pass (center play stays large). */
@media screen and (max-width: 767px) {
    .msw-unique-gato .msw-video-ui {
        --msw-video-ui-play: 2.16rem;
        --msw-video-ui-aux: 1.98rem;
        --msw-video-ui-time: 0.63rem;
    }
    .msw-unique-gato .msw-video-mute,
    .msw-unique-gato .msw-video-fullscreen,
    .msw-unique-gato .msw-video-ui .msw-video-play {
        padding: 0.25rem;
    }
    .msw-unique-gato .msw-video-wrapper .msw-video-play.msw-video-play-center .msw-video-icon {
        font-size: 12rem;
    }
    .msw-unique-gato .msw-video-wrapper .msw-video-play.msw-video-play-center .msw-video-icon svg {
        width: 12rem;
        height: 12rem;
    }
}

/* Desktop: bottom-bar controls +30%. */
@media screen and (min-width: 768px) {
    .msw-unique-gato .msw-video-ui {
        --msw-video-ui-play: 1.56rem;
        --msw-video-ui-aux: 1.43rem;
        --msw-video-ui-time: 0.91rem;
    }
}

.msw-unique-gato .msw-video-time {
    font-size: var(--msw-video-ui-time);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    /* White fill + 90% black outline — readable on light cream UI and busy video frames. */
    color: #ffffff;
    opacity: 1;
    transition: color 0.2s ease;
    text-shadow:
        -1px 0 0 rgba(0, 0, 0, 0.9),
        1px 0 0 rgba(0, 0, 0, 0.9),
        0 -1px 0 rgba(0, 0, 0, 0.9),
        0 1px 0 rgba(0, 0, 0, 0.9),
        -1px -1px 0 rgba(0, 0, 0, 0.9),
        1px -1px 0 rgba(0, 0, 0, 0.9),
        -1px 1px 0 rgba(0, 0, 0, 0.9),
        1px 1px 0 rgba(0, 0, 0, 0.9);
    min-width: 9ch;
}

.msw-unique-gato .msw-video-ui:hover .msw-video-time {
    color: #ffffff;
}

.msw-unique-gato .msw-video-ui .msw-video-play .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-mute .msw-video-icon,
.msw-unique-gato .msw-video-ui .msw-video-fullscreen .msw-video-icon {
    transition: color 0.2s ease;
}

/* --- IMAGES --- */
/* Main slide image: sizing/centering consolidated in MAIN SLIDE IMAGE block in _slide-dynamic.css */

/* Centered spinner while warm-window restores / loads main slide image */
.msw-unique-gato .msw-img-box {
    position: relative;
}
.msw-unique-gato .msw-img-box.msw-img-loading .msw-slide-img {
    opacity: 0;
    visibility: hidden;
}
.msw-unique-gato .msw-img-loading-indicator {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.msw-unique-gato .msw-img-loading-indicator[hidden] {
    display: none;
}
.msw-unique-gato .msw-img-loading-indicator .msw-loading-spinner--lg {
    border-color: color-mix(in srgb, var(--msw-hud-c1, #000) 15%, transparent 85%);
    border-top-color: var(--msw-hud-c1, #333);
}

/* Desktop: lightbox images show pointer cursor on hover – indicates clickable */
@media screen and (min-width: 1024px) {
    .msw-unique-gato img[data-msw-lb="on"] {
        cursor: pointer;
    }
}

/* --- READER TRIGGER BUTTON (ReadRoom) --- */
/* Same oval shape and alignment as Bars & Language (2.75rem × 2.5rem). Top-right, below DE (0.5rem gap).
 * CSS vars from swiper-view (--msw-hud-c1 / --msw-hud-c2 from msw_lang_hud_c1_final / msw_lang_hud_c2_final):
 *   --msw-hud-c1 = pill/disk background (color-mix).
 *   --msw-hud-c2 = icon + label text/FA glyph (button color; .fas uses inherit).
 * If the pill tracks your template but the “i” stays grey, fix HUD color 2 in JetEngine (msw_lang_hud_c2 / _final), not color 1. */
/* Rubber shake animation: global trigger uses JS class; legacy in-slide uses .swiper-slide-active */
/* Desktop: full shake effect */
@media (min-width: 1024px) {
    .msw-reader-trigger-global.msw-reader-attention-on {
        animation: msw-reader-attention 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .msw-unique-gato[data-msw-rtl="1"] .msw-reader-trigger-global.msw-reader-attention-on {
        animation: msw-reader-attention-rtl 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}
.msw-reader-trigger {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.5rem;
    font-size: 1.5rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 80%, transparent 20%);
    color: var(--msw-hud-c2, #fff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
    touch-action: manipulation;
    position: fixed;
    /* Top: below HUD zone (1rem + 2.5rem Bars + 0.5rem gap + 2.5rem DE + 0.5rem gap = 7rem) */
    top: 7rem;
    right: 1rem;
    z-index: 999999;
}
/* ReadRoom inside zone: flows in flex column, moves up when lang button is hidden */
.msw-lang-switcher-zone .msw-reader-trigger-global {
    position: relative;
    top: auto;
    right: auto;
}
.msw-reader-trigger:hover {
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    transform: scale(1.05);
    opacity: 1;
}
.msw-unique-gato .msw-reader-trigger:active,
.msw-unique-gato .msw-reader-trigger:focus,
.msw-unique-gato .msw-reader-trigger:focus-visible,
.msw-lang-switcher-zone .msw-reader-trigger:active,
.msw-lang-switcher-zone .msw-reader-trigger:focus,
.msw-lang-switcher-zone .msw-reader-trigger:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    color: var(--msw-hud-c2, #fff);
    -webkit-tap-highlight-color: transparent;
}
.msw-reader-trigger:active {
    transform: scale(0.97);
    opacity: 1;
}
/* Icon: C2 color (same as Bars & Language) */
.msw-reader-trigger .fas,
.msw-reader-trigger .fa {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
}
/* Mobile: same oval as Bars/DE (2.5rem × 2.25rem); top aligns with HUD zone */
/* Mobile: 50% gentler shake for Read Room icon */
@media (max-width: 1023px) {
    .msw-reader-trigger-global.msw-reader-attention-on {
        animation: msw-reader-attention-mobile 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .msw-unique-gato[data-msw-rtl="1"] .msw-reader-trigger-global.msw-reader-attention-on {
        animation: msw-reader-attention-rtl-mobile 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .msw-reader-trigger {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.25rem;
        padding: 0 0.625rem;
        font-size: 1.35rem;
        border-radius: 1.125rem;
        top: 6.25rem;
        right: 0.75rem;
    }
}
@media (max-width: 479px) {
    .msw-reader-trigger {
        top: 6rem;
        right: 0.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .msw-reader-trigger-global.msw-reader-attention-on,
    .msw-unique-gato[data-msw-rtl="1"] .msw-reader-trigger-global.msw-reader-attention-on {
        animation: none;
    }
}
/* --- READROOM CUE ARROW – real arrow SVG pointing to Read Room trigger, 1s display --- */
.msw-readroom-cue-arrow {
    position: fixed;
    z-index: 999999;
    width: 3rem;
    height: 3rem;
    pointer-events: none;
    animation: msw-readroom-cue-bounce 1s ease-out forwards;
}
.msw-readroom-cue-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}
@keyframes msw-readroom-cue-bounce {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1.05); }
    40% { transform: scale(0.98); }
    60% { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .msw-readroom-cue-arrow {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
   NAVIGATION ARROWS - Responsive Hybrid Approach
   Mobile/Tablet (< 1024px): HIDDEN - use swipe gestures
   Desktop (>= 1024px): VISIBLE - click navigation
   ========================================================================== */

/* Base arrow styles (Desktop) */
.msw-unique-gato .msw-nav-next, 
.msw-unique-gato .msw-nav-prev { 
    color: var(--msw-hud-c1, #000000); 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 110; 
    cursor: pointer;
    /* Ensure arrows are always clickable */
    pointer-events: auto;
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    /* Smooth transitions */
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.msw-unique-gato .msw-nav-next { right: 1.5625rem; }    /* 25px → 1.5625rem */
.msw-unique-gato .msw-nav-prev { left: 1.5625rem; }     /* 25px → 1.5625rem */

/* Arrow hover effect (Desktop) */
.msw-unique-gato .msw-nav-next:hover,
.msw-unique-gato .msw-nav-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

/* --- Arrow cleanup: html body + .msw-unique-gato beats theme :focus / Swiper defaults without !important --- */
html body .msw-unique-gato .msw-nav-next,
html body .msw-unique-gato .msw-nav-prev,
html body .msw-unique-gato .swiper-button-next,
html body .msw-unique-gato .swiper-button-prev,
html body .msw-unique-gato .gato-next,
html body .msw-unique-gato .gato-prev {
    outline: none;
    box-shadow: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
}
html body .msw-unique-gato .msw-nav-next:focus,
html body .msw-unique-gato .msw-nav-prev:focus,
html body .msw-unique-gato .swiper-button-next:focus,
html body .msw-unique-gato .swiper-button-prev:focus,
html body .msw-unique-gato .gato-next:focus,
html body .msw-unique-gato .gato-prev:focus,
html body .msw-unique-gato .msw-nav-next:active,
html body .msw-unique-gato .msw-nav-prev:active,
html body .msw-unique-gato .swiper-button-next:active,
html body .msw-unique-gato .swiper-button-prev:active,
html body .msw-unique-gato .gato-next:active,
html body .msw-unique-gato .gato-prev:active,
html body .msw-unique-gato .msw-nav-next:focus-visible,
html body .msw-unique-gato .msw-nav-prev:focus-visible,
html body .msw-unique-gato .swiper-button-next:focus-visible,
html body .msw-unique-gato .swiper-button-prev:focus-visible,
html body .msw-unique-gato .gato-next:focus-visible,
html body .msw-unique-gato .gato-prev:focus-visible,
html body .msw-unique-gato .msw-nav-next:focus-within,
html body .msw-unique-gato .msw-nav-prev:focus-within,
html body .msw-unique-gato .swiper-button-next:focus-within,
html body .msw-unique-gato .swiper-button-prev:focus-within,
html body .msw-unique-gato .gato-next:focus-within,
html body .msw-unique-gato .gato-prev:focus-within {
    outline: none;
    box-shadow: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hidden state: blocked OR boundary (isBeginning/isEnd). Only class used for hiding. */
html body .msw-unique-gato .msw-nav-next.msw-nav-hidden,
html body .msw-unique-gato .msw-nav-prev.msw-nav-hidden {
    display: none;
    visibility: hidden;
}

/* Override Swiper .swiper-button-disabled (opacity 0.35, pointer-events none) — Megaswiper uses .msw-nav-hidden for hide */
html body .msw-unique-gato .msw-nav-next.swiper-button-disabled,
html body .msw-unique-gato .msw-nav-prev.swiper-button-disabled,
html body .msw-unique-gato .msw-nav-next.msw-nav-disabled,
html body .msw-unique-gato .msw-nav-prev.msw-nav-disabled {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

/* --- BLOCKED SHUTTER EFFECT ---
   Same visual feedback as hitting end of swiper: brief nudge when user tries
   to swipe in a blocked direction. JS adds .msw-shutter-blocked on touchEnd. */
@keyframes msw-shutter-blocked {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(6px); }
    75% { transform: translateX(-6px); }
}
@keyframes msw-shutter-blocked-rtl {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.msw-shutter-blocked {
    animation: msw-shutter-blocked 0.15s ease-out;
}
.msw-unique-gato[data-msw-rtl="1"].msw-shutter-blocked {
    animation-name: msw-shutter-blocked-rtl;
}

/* Legacy class support (backwards compatibility) */
.msw-unique-gato .gato-next, 
.msw-unique-gato .gato-prev { 
    color: var(--msw-hud-c1, #000000); 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 110; 
    cursor: pointer;
    pointer-events: auto;
}
.msw-unique-gato .gato-next { right: 1.5625rem; }       /* 25px → 1.5625rem */
.msw-unique-gato .gato-prev { left: 1.5625rem; }        /* 25px → 1.5625rem */

/**
 * Megaswiper – slide counter (fraction pagination) removed site-wide.
 * Legacy markup/classes from cached HTML stay hidden.
 */

.msw-unique-gato .swiper-pagination,
.msw-unique-gato .swiper-pagination-fraction,
.msw-unique-gato .msw-pagination,
.msw-unique-gato .msw-pagination.swiper-pagination-fraction,
.msw-unique-gato .gato-fraction,
.msw-unique-gato .gato-dots,
.msw-unique-gato .msw-step-pagination {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* ==========================================================================
   MOBILE & TABLET (< 1024px) - Hide arrows, use swipe only
   ========================================================================== */
@media screen and (max-width: 1023px) {
    /* Hide navigation arrows on mobile/tablet */
    html body .msw-unique-gato .msw-nav-next,
    html body .msw-unique-gato .msw-nav-prev,
    html body .msw-unique-gato .gato-next,
    html body .msw-unique-gato .gato-prev,
    html body .msw-unique-gato .swiper-button-next,
    html body .msw-unique-gato .swiper-button-prev {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
    
    /* Adjust padding for mobile (more space since no arrows) */
    .msw-unique-gato .swiper-slide {
        padding: var(--msw-slide-padding-mobile);
    }
}

/* ==========================================================================
   READ ROOM / POPUP
   
   FEATURES:
   - Solid black background (zero distractions)
   - Mobile Safety Zone (3.75rem top) for browser bars & notches
   - Font scaling: +20% body text, +10% title on mobile
   - German word hyphenation support
   ========================================================================== */

/*
 * Shared Megaswiper loading indicators — single source for spinner markup/CSS.
 * JS: mswShowPageLoading() / mswHidePageLoading() in src/js/utils.js
 * Reuse .msw-loading-spinner inside local wrappers (image box, ReadRoom, Click Steps).
 */

/* --- Base spinner ring (small, HUD-neutral default) --- */
.msw-loading-spinner {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: #333;
    animation: msw-loading-spin 0.75s linear infinite;
    flex-shrink: 0;
}

@keyframes msw-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .msw-loading-spinner {
        animation: none;
        border-top-color: #333;
    }

    .msw-loading-spinner--page {
        border-top-color: #fff;
    }
}

/* Larger variant for in-slide image loading */
.msw-loading-spinner--lg {
    width: 2.5rem;
    height: 2.5rem;
}

/*
 * TOC / chapter navigation — 50% larger than base (2.625rem ≈ 42px).
 * JetPopup .jet-popup-loader reference size is 48px; this sits just under it.
 */
.msw-loading-spinner--page {
    width: 2.625rem;
    height: 2.625rem;
    border-width: 3px;
    border-color: hsla(0, 0%, 100%, 0.15);
    border-top-color: #fff;
}

/* --- Full-page overlay (TOC series links, chapter navigation) --- */
.msw-page-loading {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match JetPopup loading: dim slide, white spinner (not light wash) */
    background: rgba(0, 0, 0, 0.45);
    pointer-events: all;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.msw-page-loading.msw-page-loading--visible {
    opacity: 1;
    visibility: visible;
}

.msw-page-loading[hidden] {
    display: none !important;
}
/* --- OVERLAY (Solid black background for zero distractions) --- */
#msw-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;  /* SOLID BLACK - no transparency */
    display: none;
    align-items: flex-start;  /* Align to top for mobile safety zone */
    justify-content: center;
    z-index: 999999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Noto Sans', sans-serif;
}

/* Enforce Noto Sans on ALL elements inside popup overlay */
#msw-popup-overlay *,
#msw-popup-overlay h1,
#msw-popup-overlay h5,
#msw-popup-overlay p {
    font-family: 'Noto Sans', sans-serif;
}

#msw-popup-overlay.msw-visible { 
    display: flex; 
}

/* Lightbox mode: full-viewport image, no card chrome */
#msw-popup-overlay.msw-lightbox-active .msw-popup-card {
    width: 100%;
    height: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

#msw-popup-overlay.msw-lightbox-active #msw-popup-content img {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* --- POPUP CARD (Desktop) --- */
#msw-popup-overlay .msw-popup-card {
    background: #fff;
    width: 95%;
    max-width: 43.75rem;              /* 700px → 43.75rem */
    min-height: 50vh;
    max-height: none;  /* No max-height - let it grow */
    margin: 1.25rem auto;             /* 20px → 1.25rem */
    border-radius: 1rem;              /* 16px → 1rem */
    padding: 0.625rem 1.5625rem 2.5rem 1.5625rem;  /* 10px 25px 40px 25px */
    position: relative;
    text-align: left;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);  /* Keep px: shadow */
    box-sizing: border-box;
}

/* --- CLOSE BUTTON (fa-times-circle) — Top-right of popup card, no circle background --- */
/* Single color !important: Elementor often sets link/button color with !important; html body #id beats class-only but not their !important. */
html body #msw-popup-overlay .msw-close-popup {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: auto;
    height: auto;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem;
    font-size: 1.75rem;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
    z-index: 10;
}
html body #msw-popup-overlay .msw-close-popup:hover {
    background: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border: none;
    border-color: transparent;
    opacity: 1;
    transform: none;
}
html body #msw-popup-overlay .msw-close-popup:active,
html body #msw-popup-overlay .msw-close-popup:focus,
html body #msw-popup-overlay .msw-close-popup:focus-visible {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    background: none;
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-color: transparent;
}
html body #msw-popup-overlay .msw-close-popup:active {
    transform: scale(0.95);
}
html body #msw-popup-overlay .msw-close-popup,
html body #msw-popup-overlay .msw-close-popup:hover,
html body #msw-popup-overlay .msw-close-popup:active,
html body #msw-popup-overlay .msw-close-popup:focus,
html body #msw-popup-overlay .msw-close-popup:focus-visible,
html body #msw-popup-overlay .msw-close-popup i,
html body #msw-popup-overlay .msw-close-popup:hover i,
html body #msw-popup-overlay .msw-close-popup:active i,
html body #msw-popup-overlay .msw-close-popup:focus i,
html body #msw-popup-overlay .msw-close-popup:focus-visible i {
    color: #787878 !important;
}
html body #msw-popup-overlay .msw-close-popup i {
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
}

/* --- POPUP TITLE (Desktop) --- */
#msw-popup-overlay .msw-popup-card h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;            /* 20px → 1.25rem */
    padding-right: 3.125rem;           /* 50px → 3.125rem */
    color: #222;
    line-height: 1.3;
    
    /* German word support */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- READROOM CONTENT (var-driven; API wraps in .msw-readroom-content) --- */
#msw-popup-overlay .msw-readroom-content h1 {
    color: var(--msw-rr-title-c, #222);
}
#msw-popup-overlay .msw-readroom-content .msw-longtext {
    color: var(--msw-rr-text-c, #333);
    font-size: var(--msw-rr-text-size, 1.1rem);
    text-align: var(--msw-rr-text-align, left);
}
/* Block wrapper so 100% max-width and linear calc() resolve to the text column, not a shrunken inline box. */
#msw-popup-overlay .msw-readroom-content .msw-rr-img-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
#msw-popup-overlay .msw-readroom-content .msw-rr-img-wrap .msw-pop-img {
    max-width: var(--msw-rr-img-max-w, 100%);
    max-height: var(--msw-rr-img-max-h, 90vh);
    /* Tier max-width is the cap; 100% fills the wrapper up to that cap (was overridden by :first-of-type logo rule on first img). */
    width: 100%;
    box-sizing: border-box;
}
/* Tight to caption: global .msw-pop-img uses margin 1.25rem top/bottom; if credit follows, drop bottom so notice hugs the image. */
#msw-popup-overlay .msw-readroom-content .msw-rr-img-wrap:has(+ .msw-rr-img-copyright) .msw-pop-img {
    margin-bottom: 0;
}
/* Optional credit line per image (Gato: msw_lang_text_l_img*_copyright). Flush under image; margin-bottom separates from next .msw-longtext. */
#msw-popup-overlay .msw-readroom-content .msw-rr-img-copyright {
    margin: 0 0 0.75rem 0;
    margin-block-start: 0; /* UAs can add p top margin; keep very close to image when :has() zeroes img margin-bottom */
    font-size: 0.75rem;
    line-height: 1.3;
    color: rgba(51, 51, 51, 0.72);
    text-align: var(--msw-rr-text-align, left);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- BODY TEXT (Desktop) --- */
#msw-popup-overlay .msw-longtext {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 1.25rem;            /* 20px → 1.25rem */
    
    /* German word support */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#msw-popup-overlay .msw-longtext:last-child {
    margin-bottom: 0;
}

/* --- IMAGES --- */
/* object-fit: contain prevents stretching when max-width + max-height are set inline */
#msw-popup-overlay .msw-pop-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.625rem;          /* 10px → 0.625rem */
    margin: 1.25rem auto;             /* 20px vertical; auto horizontal = centered */
    display: block;
}

/* Top logo image in non–Read Room popups only (Read Room injects .msw-readroom-content; first img was wrongly capped at 250px). */
#msw-popup-overlay .msw-popup-card:not(:has(.msw-readroom-content)) .msw-pop-img:first-of-type {
    width: auto;
    max-width: 15.625rem;             /* 250px → 15.625rem */
    margin: 0 0 1.25rem 0;            /* 20px → 1.25rem */
}

/* "Details" heading in popup – left-aligned, Y-aligned with close X */
#msw-popup-overlay .msw-popup-card h5 {
    text-align: left;
    margin: 0 0 0.625rem 0;           /* 10px → 0.625rem */
    margin-top: 0;
    padding-top: 0;
    font-family: 'Noto Sans', sans-serif;
}

/* --- ReadRoom loading spinner
    Centered, visible on both light and dark slide backgrounds.
    Uses contrasting backdrop so spinner/text stand out. --- */
#msw-popup-overlay .msw-readroom-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 2rem;
    /* Subtle backdrop: visible on light slides (dark tint) and dark slides (light tint) */
    background: rgba(128, 128, 128, 0.15);
    border-radius: 0.5rem;
}
#msw-popup-overlay .msw-readroom-spinner.msw-loading-spinner,
#msw-popup-overlay .msw-readroom-spinner {
    width: 2.5rem;
    height: 2.5rem;
}
#msw-popup-overlay .msw-readroom-loading-text {
    margin-top: 1rem;
    font-size: 1rem;
    color: #333;
    font-family: 'Noto Sans', sans-serif;
}
#msw-popup-overlay .msw-readroom-error .msw-readroom-loading-text {
    color: #c00;
}

/* ==========================================================================
   MOBILE & TABLET (< 1024px) - Safety Zone + Font Scaling
   Samsung A53 and similar devices with browser bars & notches
   ========================================================================== */
@media screen and (max-width: 1023px) {

    /* No title: image at top – zero padding overrides legacy padding-mobile */
    /* Exclude msw-has-alert: image must sit BELOW alert bar (see _slide-dynamic.css) */
    html body .msw-unique-gato .swiper-slide[data-msw-title-empty="1"]:not(.msw-has-alert) {
        padding-top: 0;
    }
    /* No header (title+icon empty): ensure flush to top on mobile */
    html body .msw-unique-gato .swiper-slide[data-msw-no-header="1"]:not(.msw-has-alert) {
        padding-top: 0;
    }
    /* Elementor parent: remove top padding so swiper/image can reach viewport top */
    html body .elementor-element:has(.msw-unique-gato),
    html body .elementor-widget-shortcode:has(.msw-unique-gato) {
        padding-top: 0;
    }

    /* Overlay - Full screen, align content to top */
    #msw-popup-overlay {
        align-items: flex-start;
        padding: 0;
    }
    
    /* Popup Card - Full width with SAFETY ZONE at top */
    #msw-popup-overlay .msw-popup-card {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
        
        /* SAFETY ZONE: fallback values before env() override */
        padding-top: 4.375rem;         /* 70px → 4.375rem */
        padding-left: 1.25rem;         /* 20px → 1.25rem */
        padding-right: 1.25rem;        /* 20px → 1.25rem */
        padding-bottom: 2.5rem;        /* 40px → 2.5rem */
        
        /* Additional safe area support for notched devices */
        /* Keep px inside max()/env(): device-specific calculations */
        padding-top: max(5px, env(safe-area-inset-top, 30px));
        padding-left: max(20px, env(safe-area-inset-left, 20px));
        padding-right: max(20px, env(safe-area-inset-right, 20px));
        padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));
    }
    
    /* Close Button - slightly larger tap target on mobile */
    #msw-popup-overlay .msw-close-popup {
        top: max(0.25rem, env(safe-area-inset-top, 0.25rem));
        right: max(0.25rem, env(safe-area-inset-right, 0.25rem));
        font-size: 2rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
    
    /* Title - 10% larger on mobile, with word wrap */
    #msw-popup-overlay .msw-popup-card h1 {
        font-size: 1.98rem;  /* 1.8rem * 1.10 = 1.98rem (+10%) */
        padding-right: 3.4375rem;     /* 55px → 3.4375rem */
        margin-bottom: 1.5625rem;     /* 25px → 1.5625rem */
        
        /* Critical for German words like "Kommunionempfang" */
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        word-break: break-word;
        overflow-wrap: break-word;
        -webkit-line-clamp: unset;
    }
    
    /* Body Text - 20% larger on mobile */
    #msw-popup-overlay .msw-longtext {
        font-size: 1.32rem;  /* 1.1rem * 1.20 = 1.32rem (+20%) */
        line-height: 1.8;
        
        /* German word support */
        hyphens: auto;
        -webkit-hyphens: auto;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* Images - Full width, smaller border radius; margin auto keeps horizontal centering */
    #msw-popup-overlay .msw-pop-img {
        margin: 1.5625rem auto;       /* 25px vertical; auto = centered on mobile */
        border-radius: 0.5rem;        /* 8px → 0.5rem */
    }
}

/* ==========================================================================
   SMALL MOBILE (< 480px) - Extra adjustments for narrow screens
   ========================================================================== */
@media screen and (max-width: 479px) {
    
    /* msw-desc and h2: size comes from inline style per slide (clamp is responsive). */
    
    #msw-popup-overlay .msw-popup-card {
        padding-left: 0.9375rem;       /* 15px → 0.9375rem */
        padding-right: 0.9375rem;      /* 15px → 0.9375rem */
    }
    
    #msw-popup-overlay .msw-popup-card h1 {
        font-size: 1.7rem;
        padding-right: 3.125rem;       /* 50px → 3.125rem */
    }
    
    #msw-popup-overlay .msw-longtext {
        font-size: 1.2rem;
    }
    
    #msw-popup-overlay .msw-close-popup {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   LANGUAGE SELECTOR TRIGGER BUTTON (v2.10.0)
   
   Fixed position, top-right corner. Opens the Elementor Language Popup.
   Shows the current language code (e.g. "DE", "EN", "AR") as a pill button.
   z-index 99997: below the ReadRoom overlay (99999) but above all slide content.
   
   Invisible to bots (no crawlable link, just a button element).
   Accessible: proper aria-label, focus ring, contrast ratio.
   ========================================================================== */

/* Language button: C1 for plane, C2 for "DE" text (same as bars button); synced via JS on slideChange. Oval: 2.75rem × 2.5rem. */
.msw-lang-trigger {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 999999;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 80%, transparent 20%);
    color: var(--msw-hud-c2, #fff);
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.875rem;
    font-family: 'Noto Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 2.5rem;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.msw-lang-trigger:hover {
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    transform: scale(1.05);
    opacity: 1;
}

/* Prevent red/focus flash on click – lock colors, no outline */
.msw-lang-switcher-zone .msw-lang-trigger:focus,
.msw-lang-switcher-zone .msw-lang-trigger:focus-visible,
.msw-lang-switcher-zone .msw-lang-trigger:active {
    outline: none;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    color: var(--msw-hud-c2, #fff);
    -webkit-tap-highlight-color: transparent;
}

.msw-lang-trigger:active {
    transform: scale(0.97);
    opacity: 1;
}

/* Language Switcher Zone – stacks DE + Menu button */
.msw-lang-switcher-zone {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Override: lang trigger no longer needs position fixed (inherits from zone) */
.msw-lang-switcher-zone .msw-lang-trigger {
    position: relative;
    top: auto;
    right: auto;
}

/*
 * Top-left HUD — History Back (.msw-history-back-btn). Replaces legacy .msw-home-button.
 */
.msw-hud-top-left {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 999999;
    display: flex;
    align-items: center;
}

html body .msw-hud-top-left .msw-history-back-btn {
    position: relative;
    top: auto;
    left: auto;
}

/*
 * JetPopup TOC home icon (Elementor Icon.homepagebutton) — hidden until mswSyncHomeButton
 * reads active slide data-msw-homepage-final; click handled in core.js (close popup + /).
 */
.jet-popup .homepagebutton {
    display: none !important;
    cursor: pointer;
}
.jet-popup .homepagebutton.msw-homepage-visible {
    display: flex !important;
}

/*
 * History Back — top-left via .msw-hud-top-left; hidden when no msw_h (.msw-history-hidden).
 */
html body .msw-history-back-btn.msw-history-hidden {
    display: none !important;
}

/* Global Menu Button — top-right in .msw-lang-switcher-zone (first row). C1 plane, C2 icon. */
.msw-menu-global-btn {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 80%, transparent 20%);
    color: var(--msw-hud-c2, #fff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
}

.msw-menu-global-btn:hover {
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    transform: scale(1.05);
    opacity: 1;
}

.msw-lang-switcher-zone .msw-menu-global-btn:focus,
.msw-lang-switcher-zone .msw-menu-global-btn:focus-visible,
.msw-lang-switcher-zone .msw-menu-global-btn:active {
    outline: none;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    color: var(--msw-hud-c2, #fff);
    -webkit-tap-highlight-color: transparent;
}

.msw-menu-global-btn:active {
    transform: scale(0.97);
    opacity: 1;
}

/* C2 for the "DE" text inside the language button */
.msw-lang-icon {
    display: inline-block;
    font-weight: 700;
    color: var(--msw-hud-c2, #fff);
}

/* Mobile: 5px from screen borders for HUD icons */
@media (max-width: 1023px) {
    .msw-lang-switcher-zone {
        top: 5px;
        right: 5px;
    }
    .msw-hud-top-left {
        top: 5px;
        left: 5px;
    }
    .msw-lang-trigger {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.25rem;
        line-height: 2.25rem;
        font-size: 0.8125rem;
        padding: 0 0.625rem;
    }
    .msw-menu-global-btn {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.25rem;
        padding: 0 0.625rem;
        border-radius: 1.125rem;
    }
    .msw-hud-top-left .msw-menu-global-btn {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.25rem;
        padding: 0 0.625rem;
        border-radius: 1.125rem;
    }
}

/* Small mobile: same 5px from borders */
@media (max-width: 479px) {
    .msw-lang-switcher-zone {
        top: 5px;
        right: 5px;
    }
}

/* ==========================================================================
   RTL (RIGHT-TO-LEFT) OVERRIDES (v2.10.0)
   
   Uses data-msw-rtl="1" (NOT dir="rtl") so Swiper stays in LTR swipe order.
   Only content gets RTL text alignment. HUD and navigation stay LTR.
   ========================================================================== */

/* RTL: Apply to content ONLY, not Swiper structure */
.msw-unique-gato[data-msw-rtl="1"] .msw-header,
.msw-unique-gato[data-msw-rtl="1"] .msw-desc,
.msw-unique-gato[data-msw-rtl="1"] .swiper-slide,
.msw-unique-gato[data-msw-rtl="1"] .msw-footer-text,
.msw-unique-gato[data-msw-rtl="1"] .msw-pincode-display {
    direction: rtl;
    text-align: right;
}

/* RTL: ReadRoom popup (sibling of swiper) */
.msw-unique-gato[data-msw-rtl="1"] ~ #msw-popup-overlay .msw-popup-card h1,
.msw-unique-gato[data-msw-rtl="1"] ~ #msw-popup-overlay .msw-longtext {
    direction: rtl;
    text-align: right;
}

/* ==========================================================================
   LANGUAGE LINK STYLES (v2.10.0)
   
   Styles for language links inside JetEngine Listing Grids.
   Applied to .msw-lang-link elements created by [msw_lang_link] shortcode.
   ========================================================================== */

.msw-lang-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.msw-lang-link:hover {
    opacity: 0.7;
}

/* ==========================================================================
   TOC Popup – [msw_toc] shortcode output.
   Dynamic sizing: fewer items = bigger font (3 items ~1.1rem, 12 items ~0.75rem).
   ========================================================================== */
.msw-toc-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}
.msw-toc-container .msw-toc-item {
    /* With fixed --msw-toc-count: 12, formula yields 1rem (16px) for all TOCs */
    font-size: clamp(1rem, 4rem / var(--msw-toc-count, 12), 1.5rem);
}
.msw-toc-container .msw-toc-link {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    color: inherit;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    touch-action: pan-y;
}
.msw-toc-container .msw-toc-link:hover {
    opacity: 0.85;
}
.msw-toc-empty {
    margin: 0.5rem 0;
    font-style: italic;
    opacity: 0.8;
}

/* Invalid / deleted TOC slot — friendly notice (no PHP crash). */
.msw-toc-alert {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(180, 120, 0, 0.45);
    background: rgba(255, 244, 214, 0.95);
    color: #5c4a12;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.35;
}

/* Scroll wrapper — JetPopup menu (manual + series TOC). Keeps Impressum footer visible below. */
.msw-popup-toc-scroll {
    max-height: calc(100dvh - var(--msw-popup-chrome, 12rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Series Kapitel TOC — [msw_series_toc] chapter links (larger tap targets than in-slide TOC). */
.msw-series-toc-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* was 1rem — 25% tighter between chapter lines */
    padding: 0.5rem 0;
}

.msw-series-toc-container .msw-series-link {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    /* Match manual [msw_toc] link size (same clamp as .msw-toc-item). */
    font-size: clamp(1rem, 4rem / var(--msw-series-count, 12), 1.5rem);
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: opacity 0.3s ease;
    touch-action: pan-y;
}

.msw-series-toc-item--chapter .msw-series-link {
    padding-left: 1.5rem;
}

.msw-series-toc-item--detail .msw-series-link {
    padding-left: 2.25rem;
    font-size: clamp(1rem, 4rem / var(--msw-series-count, 12), 1.5rem);
}

.msw-series-toc-container .msw-series-link.is-current {
    font-weight: 600;
}

.msw-series-toc-container .msw-series-link:hover {
    opacity: 0.85;
}

/* Startseite (in-story) above series chapter list — match series link size. */
.msw-series-toc-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.msw-series-toc-scroll > .msw-toc-item--start .msw-toc-link {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(1rem, 4rem / var(--msw-series-count, 12), 1.5rem);
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-weight: 600;
    transition: opacity 0.3s ease;
    touch-action: pan-y;
}

.msw-series-toc-scroll > .msw-toc-item--start .msw-toc-link:hover {
    opacity: 0.85;
}

/* Divider between [msw_series_toc] and [msw_toc] in JetPopup 1772. */
.msw-toc-section-divider {
    border: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    margin: 0.65rem 1rem 0.35rem;
}

/* Series TOC: natural height. Manual .msw-toc-scroll scroll rules → msw-toc-popup.css (Rocket-safe). */
.msw-series-toc-scroll {
    max-height: none;
    overflow: visible;
}

/* Translation failed: strikethrough + dimmed (Dynamic Visibility via CSS class) */
.msw-lang-failed {
    text-decoration: line-through;
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ==========================================================================
   Swipe hint overlay animation
   Version: 2.4.0
   
   - Position: fixed, bottom 12vh (lower 20% of screen)
   - pointer-events: none – user can swipe THROUGH it
   - Hidden by default (display:none), JS adds .msw-hand-visible
   - NEVER on Desktop (>= 1024px) via CSS media query
   - FontAwesome fa-hand-pointer with realistic arc keyframes
   ========================================================================== */

/* Container – hidden by default, bottom-positioned */
html body .swipe-instruction {
    display: none;               /* JS toggles via .msw-hand-visible */
    position: fixed;
    bottom: 12vh;                /* Lower 20% – does not block titles */
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;                     /* 10px → 0.625rem */
    padding: 1.25rem 1.875rem;         /* 20px 30px → 1.25rem 1.875rem */
    background: rgba(50, 50, 50, 0.92);
    border-radius: 1rem;               /* 16px → 1rem */
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);  /* Keep px: shadow */
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;   /* Swipe THROUGH the animation */
}

/* Visible state – added/removed by JS */
html body .swipe-instruction.msw-hand-visible {
    display: flex;
    opacity: 1;
}

/* Fading-out state */
html body .swipe-instruction.msw-hand-fading {
    opacity: 0;
}

/* Icon row – chevrons + hand */
html body .swipe-instruction .swipe-icons {
    display: flex;
    gap: 1.5625rem;                    /* 25px → 1.5625rem */
    font-size: 2.8125rem;              /* 45px → 2.8125rem */
    color: white;
    align-items: center;
    pointer-events: none;
}

/* Chevron arrows – subtle */
.swipe-arrow-left,
.swipe-arrow-right {
    opacity: 0.3;
    font-size: 2.5rem;                /* 40px → 2.5rem */
}

/* Hand wrapper – carries the arc animation */
.moving-hand {
    display: inline-block;
    animation: swipeRealisticArc 2.625s ease-in-out infinite;  /* 75% longer */
    transform-origin: center bottom;
}

/* Hand icon */
.moving-hand i {
    font-size: 3.125rem;              /* 50px → 3.125rem */
    color: white;
}

/* Swipe hint label styling */
.swipe-text {
    color: white;
    font-family: sans-serif;
    margin: 0.3125rem 0 0 0;          /* 5px → 0.3125rem */
    font-size: 1rem;                   /* 16px → 1rem */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;               /* Keep px: letter-spacing convention */
}

/* V4 realistic arc keyframes */
/* Keep px in translateX: physical pixel movement for animation precision */
@keyframes swipeRealisticArc {
    0%   { transform: translateX(0)    rotate(0deg);   opacity: 1;    }
    15%  { transform: translateX(-8px) rotate(-10deg);  opacity: 1;    }
    30%  { transform: translateX(-25px) rotate(-18deg); opacity: 0.85; }
    50%  { transform: translateX(0)    rotate(0deg);   opacity: 1;    }
    65%  { transform: translateX(25px) rotate(18deg);  opacity: 0.85; }
    80%  { transform: translateX(8px)  rotate(10deg);  opacity: 1;    }
    100% { transform: translateX(0)    rotate(0deg);   opacity: 1;    }
}

/* ===== DESKTOP: NEVER show hand ===== */
@media screen and (min-width: 1024px) {
    html body .swipe-instruction {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ===== SMALL MOBILE: tighter spacing ===== */
@media screen and (max-height: 600px) {
    html body .swipe-instruction {
        bottom: 5vh;
        padding: 0.75rem 1.25rem;     /* 12px 20px → 0.75rem 1.25rem */
    }
    html body .swipe-instruction .swipe-icons { font-size: 2.1875rem; gap: 0.9375rem; }
    html body .swipe-instruction .moving-hand i { font-size: 2.5rem; }
    html body .swipe-instruction .swipe-text { font-size: 0.8125rem; }
}

/* Mobile image + transcript spacing (moved from swiper-view inline <style>) */
@media (max-width: 767px) {
    /* Main image max sizes: _slide-dynamic.css per data-msw-img-size (broad 55vh rule removed). */
    html body .msw-unique-gato .msw-img-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    html body .msw-unique-gato .msw-img-box.msw-pdf-slide {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem;
    }
    html body .msw-unique-gato .msw-pdf-slide .msw-pdf-download-link {
        margin-top: 0 !important;
    }
    html body .msw-unique-gato .msw-transcript-container {
        margin-top: 5px;
    }
    html body .msw-unique-gato .swiper-pagination,
    html body .msw-unique-gato .swiper-pagination-fraction,
    html body .msw-unique-gato .msw-pagination,
    html body .msw-unique-gato .gato-fraction {
        display: none !important;
        visibility: hidden !important;
    }
}
/* ==========================================================================
   GAMIFICATION HUD – HP, Points, Coins (below Language/ReadRoom buttons)
   Rendered when msw_lang_game_mode_final is on. Individual stats shown per
   msw_lang_game_hp_show_final, msw_lang_game_points_show_final,
   msw_lang_game_coins_show_final. JS syncs on slideChange.
   Colors: --msw-hud-icon-c (msw_lang_hud_c1_final), --msw-stats-text-c (msw_lang_text_s_c1_final).
   Proximity: flex-end + 5px gap = icon 5px left of number; both right-aligned.
   ========================================================================== */

.msw-unique-gato .msw-game-stats-hud,
.msw-lang-switcher-zone .msw-game-stats-hud {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem; /* Tighter vertical spacing between HP/Points/Gems */
    width: 2.75rem;
    min-width: 2.75rem;
    /* No margin-top: zone gap (0.5rem) matches spacing between HUD buttons */
}

/* Stat row: icon + number pushed right; 5px gap between them */
.msw-unique-gato .msw-game-stat,
.msw-lang-switcher-zone .msw-game-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    width: 100%;
    height: 2.5rem;
    box-sizing: border-box;
}

/* Icon: --msw-hud-icon-c; slight vertical raise for optical balance (+15% size) */
.msw-unique-gato .msw-game-stat i,
.msw-lang-switcher-zone .msw-game-stat i {
    font-size: 0.7475rem; /* 0.65rem × 1.15 */
    color: var(--msw-hud-icon-c, var(--msw-hud-c1, #000));
    flex-shrink: 0;
    margin-top: -2px;
}

/* Value: --msw-stats-text-c; no extra margin/padding to preserve 5px gap */
.msw-unique-gato .msw-game-stat .msw-game-stat-value,
.msw-lang-switcher-zone .msw-game-stat .msw-game-stat-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--msw-stats-text-c, var(--msw-text-s-c1, #333));
    text-align: right;
    margin: 0;
    padding: 0;
}

/* Heart pulse animation for HP icon */
@keyframes msw-heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.msw-unique-gato .msw-game-stat[data-stat="hp"] i,
.msw-lang-switcher-zone .msw-game-stat[data-stat="hp"] i {
    animation: msw-heart-pulse 1.5s ease-in-out infinite;
}

/* Mobile: match HUD button dimensions (2.5rem); minimal gap between stats */
@media screen and (max-width: 1023px) {
    .msw-unique-gato .msw-game-stats-hud,
    .msw-lang-switcher-zone .msw-game-stats-hud {
        width: 2.5rem;
        min-width: 2.5rem;
        gap: 0;
    }
    .msw-unique-gato .msw-game-stat,
    .msw-lang-switcher-zone .msw-game-stat {
        height: 1.75rem;
        min-height: 1.75rem;
    }
}
/**
 * Click Steps base — single-step viewport, no Swiper wrapper physics.
 */

.msw-click-steps .msw-step-pagination,
.msw-click-steps .msw-pagination.msw-step-pagination {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.msw-click-steps {
    position: relative;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    touch-action: pan-y;
}

.msw-click-steps .msw-step-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    contain: layout style;
}

.msw-click-steps .msw-step-slide {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

/*
 * Step Swipe Gesture ON (data-msw-step-swipe="1"): allow horizontal pan for JS swipe detection.
 * Default pan-y (below) is for vertical scroll only — it blocks horizontal browser panning on mobile.
 */
.msw-click-steps[data-msw-step-swipe="1"],
.msw-click-steps[data-msw-step-swipe="1"] .msw-step-viewport {
    touch-action: pan-x pan-y;
}

/* Hide mid-screen Swiper arrows — Click Steps uses bottom semicircles only. */
.msw-click-steps .msw-nav-prev,
.msw-click-steps .msw-nav-next {
    display: none !important;
}

.msw-click-steps .msw-step-pagination {
    position: fixed;
    bottom: calc(0.5rem + var(--msw-vv-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 105;
    pointer-events: none;
    color: var(--msw-hud-c2, #fff);
    font-size: 0.875rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Enter animation after AJAX inject (not during network wait). */
@media (prefers-reduced-motion: no-preference) {
    .msw-click-steps .msw-step-viewport.msw-step-enter-next {
        animation: mswStepFromRight 0.25s ease-out;
    }
    .msw-click-steps .msw-step-viewport.msw-step-enter-prev {
        animation: mswStepFromLeft 0.25s ease-out;
    }
}

@keyframes mswStepFromRight {
    from {
        opacity: 0.85;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mswStepFromLeft {
    from {
        opacity: 0.85;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.msw-click-steps.msw-step-loading .msw-step-viewport {
    pointer-events: none;
}

/*
 * Click Steps AJAX load — HUD-colored spinner above bottom nav; nav buttons dimmed.
 * Colors: --msw-hud-c1 / --msw-hud-c2 (synced in mswSyncStepNavHud).
 */
.msw-click-steps .msw-step-loading-indicator {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(3.25rem + var(--msw-vv-bottom, 0px));
    transform: translateX(-50%);
    z-index: 115;
    pointer-events: none;
}

.msw-click-steps.msw-step-loading .msw-step-loading-indicator {
    display: block;
}

.msw-click-steps .msw-step-loading-indicator .msw-loading-spinner {
    border-color: color-mix(in srgb, var(--msw-hud-c1, #999) 28%, transparent);
    border-top-color: var(--msw-hud-c1, #999);
    border-right-color: var(--msw-hud-c2, #fff);
}

.msw-click-steps.msw-step-loading .msw-step-nav-prev,
.msw-click-steps.msw-step-loading .msw-step-nav-next {
    opacity: 0.3;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .msw-click-steps .msw-step-loading-indicator .msw-loading-spinner {
        border-top-color: var(--msw-hud-c1, #999);
    }
}
/**
 * Click Steps — bottom quarter-circle prev/next (HUD c1 plane + c2 icon, same as .msw-menu-global-btn).
 * Exactly one quadrant of a circle per corner; size via --msw-step-nav-r on .msw-step-nav-bar.
 */

.msw-click-steps .msw-step-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--msw-vv-bottom, 0px));
    z-index: 110;
    pointer-events: none;
    height: 0;
    /* ~20% smaller than original 52px / 56px — one quarter of circle radius */
    --msw-step-nav-r: 42px;
    /* +20% vs prior pass — chevrons must read clearly on the quarter-circle */
    --msw-step-nav-icon: 1.65rem;
    --msw-step-nav-icon-inset: 5px;
}

.msw-click-steps .msw-step-nav-prev,
.msw-click-steps .msw-step-nav-next {
    position: fixed;
    bottom: calc(var(--msw-vv-bottom, 0px));
    width: var(--msw-step-nav-r);
    height: var(--msw-step-nav-r);
    min-width: var(--msw-step-nav-r);
    min-height: var(--msw-step-nav-r);
    padding: 0;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    box-sizing: border-box;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    outline: none;
    box-shadow: none;
    opacity: 0.85;
    /* Same HUD plane + icon colors as .msw-menu-global-btn (msw_lang_hud_c1/c2_final → --msw-hud-c1/c2) */
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 80%, transparent 20%);
    color: var(--msw-hud-c2, #fff);
    transition: background 0.2s ease, transform 0.12s ease, opacity 0.12s ease;
}

.msw-click-steps .msw-step-nav-prev i,
.msw-click-steps .msw-step-nav-next i {
    font-size: var(--msw-step-nav-icon);
    color: var(--msw-hud-c2, #fff);
    pointer-events: none;
}

/* Bottom-left quarter: icon anchored near screen corner (inside the arc). */
.msw-click-steps .msw-step-nav-prev {
    left: 0;
    border-radius: 0 100% 0 0;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: var(--msw-step-nav-icon-inset);
    padding-left: var(--msw-step-nav-icon-inset);
}

/* Bottom-right quarter: mirror of prev — icon near screen corner. */
.msw-click-steps .msw-step-nav-next {
    right: 0;
    border-radius: 100% 0 0 0;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: var(--msw-step-nav-icon-inset);
    padding-right: var(--msw-step-nav-icon-inset);
}

.msw-click-steps .msw-step-nav-prev:hover,
.msw-click-steps .msw-step-nav-next:hover {
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    opacity: 1;
}

.msw-click-steps .msw-step-nav-prev:focus,
.msw-click-steps .msw-step-nav-next:focus,
.msw-click-steps .msw-step-nav-prev:focus-visible,
.msw-click-steps .msw-step-nav-next:focus-visible,
.msw-click-steps .msw-step-nav-prev:active,
.msw-click-steps .msw-step-nav-next:active {
    outline: none;
    background: color-mix(in srgb, var(--msw-hud-c1, #000) 90%, transparent 10%);
    color: var(--msw-hud-c2, #fff);
}

.msw-click-steps .msw-step-nav-prev.msw-step-nav-hidden,
.msw-click-steps .msw-step-nav-next.msw-step-nav-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .msw-click-steps .msw-step-nav-prev:active,
    .msw-click-steps .msw-step-nav-next:active {
        transform: scale(0.94);
    }
}

@media (min-width: 768px) {
    .msw-click-steps .msw-step-nav-bar {
        --msw-step-nav-r: 45px;
        --msw-step-nav-icon: 1.8rem;
        --msw-step-nav-icon-inset: 6px;
    }
}
/* ==========================================================================
   H5P JetPopup — Megaswiper HUD stacking (mobile close button fix)

   Problem: JetPopup default --jp-z-index is 999; Megaswiper fixed HUD uses 999999.
   On mobile, taps on the top-right close (X) hit the HUD (menu, lang, game stats)
   instead of the popup chrome.

   JS toggles body.msw-h5p-jetpopup-open via mswSyncHudForH5pJetPopup() in init.js
   when ANY JetPopup is open (TOC menu 1772, H5P, language popup).

   Maintainer: docs/H5P-JETPOPUP-ARCHITECTURE.md
   Concatenated into assets/style.css via build-css.sh.
   ========================================================================== */

/* Hide fixed HUD (3-bar menu, DE lang) while any JetPopup is open; restore on close. */
body.msw-h5p-jetpopup-open .msw-unique-gato .msw-lang-switcher-zone,
body.msw-h5p-jetpopup-open .msw-unique-gato .msw-hud-top-left {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Raise open JetPopup above Megaswiper HUD (999999) so close (X) receives touches. */
body.msw-h5p-jetpopup-open .jet-popup.jet-popup--show-state {
    z-index: 10000000 !important;
}
/* ==========================================================================
   H5P — mobile / tablet full-bleed on Megaswiper slides

   Slides use --msw-slide-padding-mobile (5% left/right below 1024px). Pull the
   H5P iframe wrapper into that gutter so Question Set cards can use full width.
   Same math as .msw-video-wrapper in _media.css.

   Iframe-internal card margins are zeroed in msw-h5p-overrides.css (h5p_alter_library_styles).
   Concatenated into assets/style.css via build-css.sh.
   ========================================================================== */

@media screen and (max-width: 1023px) {
    /* Full Swiper + Click Steps: bleed into slide side padding */
    .msw-unique-gato .swiper-slide .h5p-iframe-wrapper,
    .msw-unique-gato .swiper-slide .h5p-content,
    .msw-unique-gato .msw-step-slide .h5p-iframe-wrapper,
    .msw-unique-gato .msw-step-slide .h5p-content {
        width: calc(100% / 0.9);
        max-width: none;
        margin-left: -5.5555555556%;
        margin-right: -5.5555555556%;
        box-sizing: border-box;
    }

    .msw-unique-gato .h5p-iframe-wrapper iframe.h5p-iframe {
        width: 100% !important;
        max-width: 100%;
    }

    /* H5P JetPopup: drop Elementor side padding when popup hosts an H5P embed */
    html body .jet-popup:has(.h5p-iframe-wrapper) .jet-popup__container-content .elementor-container,
    html body .jet-popup:has(.h5p-iframe-wrapper) .jet-popup__container-content .e-con,
    html body .jet-popup:has(.h5p-content) .jet-popup__container-content .elementor-container,
    html body .jet-popup:has(.h5p-content) .jet-popup__container-content .e-con {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .jet-popup:has(.h5p-iframe-wrapper) .elementor-widget-shortcode,
    html body .jet-popup:has(.h5p-content) .elementor-widget-shortcode {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body .jet-popup:has(.h5p-iframe-wrapper) .h5p-iframe-wrapper,
    html body .jet-popup:has(.h5p-content) .h5p-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* ==========================================================================
   H5P iOS semi-fullscreen — JetPopup + iframe embed fixes
   iPhone Safari has no true Fullscreen API for div/iframe/canvas; H5P uses
   body.h5p-semi-fullscreen + fixed .h5p-iframe-wrapper. Megaswiper GPU rules
   add transform on JetPopup shells, which traps position:fixed — neutralize here.
   Concatenated into assets/style.css via build-css.sh.
   ========================================================================== */

@media screen and (max-width: 980px) {
    /* Dynamic viewport height for mobile Safari UI bars */
    body.h5p-semi-fullscreen,
    body.h5p-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    /* Release transform stacking context so fixed H5P wrapper reaches viewport */
    body.h5p-semi-fullscreen .jet-popup .jet-popup__container,
    body.h5p-semi-fullscreen .jet-popup .jet-popup__container-content,
    body.h5p-fullscreen .jet-popup .jet-popup__container,
    body.h5p-fullscreen .jet-popup .jet-popup__container-content {
        transform: none !important;
    }

    body.h5p-semi-fullscreen .jet-popup.jet-popup--show-state,
    body.h5p-fullscreen .jet-popup.jet-popup--show-state {
        overflow: visible !important;
    }

    /* Community + H5P maintainer fix: inset-fixed wrapper (WordPress.org iOS thread) */
    body.h5p-semi-fullscreen .h5p-iframe-wrapper.h5p-semi-fullscreen,
    body.h5p-fullscreen .h5p-iframe-wrapper.h5p-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 100vw !important;
        min-height: 100dvh !important;
        z-index: 100002 !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #000 !important;
    }

    body.h5p-semi-fullscreen .h5p-iframe-wrapper.h5p-semi-fullscreen iframe.h5p-iframe,
    body.h5p-fullscreen .h5p-iframe-wrapper.h5p-fullscreen iframe.h5p-iframe {
        width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    body.h5p-semi-fullscreen .h5p-container.h5p-semi-fullscreen,
    body.h5p-fullscreen .h5p-container.h5p-fullscreen {
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 100001 !important;
        /* Match dark dialog tone instead of H5P default white semi-fullscreen shell */
        background-color: rgba(26, 26, 26, 0.8) !important;
    }
}