.kc-splat{position:relative;width:100%;background:#0e0e0e;overflow:hidden}
/* pointer-events matters: the poster is absolutely positioned, so it paints above the
 * iframe and would swallow every click even at opacity 0 */
.kc-splat .kc-splat-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none}
.kc-splat-enter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;color:#fff;
  background:rgba(14,14,14,.55);border:1px solid rgba(255,255,255,.6);padding:15px 24px;
  font:300 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.kc-splat-enter:hover{background:rgba(14,14,14,.85);border-color:#fff}
.kc-splat-close{display:none;position:absolute;top:18px;right:18px;z-index:2;cursor:pointer;color:#fff;
  background:rgba(14,14,14,.55);border:1px solid rgba(255,255,255,.6);padding:12px 18px;
  font:300 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase}
/* step 3 puts max-width/margin inline; the overlay must win over them (!important beats the
 * inline style) or the full-window view would be capped at the key image's width */
.kc-splat--full{position:fixed;inset:0;width:100%;height:100%;max-width:none!important;margin:0!important;z-index:99999}
.kc-splat--full .kc-splat-close{display:block}
.kc-splat-close:hover{background:rgba(14,14,14,.85);border-color:#fff}
body.kc-splat-open{overflow:hidden}

/* Elementor's container is a column flex box with flex-wrap:wrap below 768px; Chromium then
 * resolves the shortcode widget's height before the cross size is known, so the aspect-ratio
 * box counts as 0, the widget collapses and the next section paints over the block (verified
 * live 2026-09-18: widget 0px, gallery image over the poster, tap went to the theme lightbox).
 * nowrap takes the single-line path, which resolves the width first. Scoped to Elementor
 * containers that actually hold a .kc-splat. */
.e-con.e-flex > .e-con-inner:has(.kc-splat){flex-wrap:nowrap}

/* The bundle viewer runs in a same-page iframe over the overlay. Poster and entry button
 * hide while the overlay is open, or both would paint over the iframe. */
.kc-splat--walk .kc-splat-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.kc-splat--walk.kc-splat--full .kc-splat-poster{display:none}
.kc-splat--walk.kc-splat--full .kc-splat-enter{display:none}

/* Hover preview (desktop): the bundle viewer mounts inline and auto-plays its start
 * animation (viewer fallback track, animTracks empty in settings.json). pointer-events:none
 * keeps hover on the host and lets clicks reach it; the Enter button needs z-index to stay
 * above the appended iframe (same pattern as .kc-splat-close). */
.kc-splat--walk{cursor:pointer}
.kc-splat--walk .kc-splat-preview{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.kc-splat--walk .kc-splat-enter{z-index:2}