/* XFMR Suite — frontend product gallery (images + videos, ordered) */
.xfmr-gallery{width:100%;}
/* Fixed-height stage: every slide fills the same box, so swapping images (or the
   first image loading) never changes the gallery height and shifts the page (CLS). */
.xfmr-gal-main{position:relative; background:var(--paleblue,#f4fafe); border:1px solid var(--line,#d9e2ea); border-radius:6px; overflow:hidden; aspect-ratio:4 / 3;}
.xfmr-gal-item{display:none; align-items:center; justify-content:center; height:100%;}
.xfmr-gal-item.active{display:flex;}
.xfmr-gal-item img{max-height:100% !important; max-width:100%; width:auto !important; height:auto !important; object-fit:contain; border:none !important; background:transparent !important; padding:6px !important; margin:0 auto !important; display:block;}
.xfmr-gal-item video{max-width:100%; max-height:100%; background:#000;}
.xfmr-gal-item iframe{width:100%; height:100%; border:0;}
.xfmr-gal-thumbs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.xfmr-gal-thumb{position:relative; width:64px; height:64px; border:2px solid var(--line,#d9e2ea); border-radius:4px; background:var(--paleblue,#f4fafe); cursor:pointer; padding:2px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.xfmr-gal-thumb img{max-width:100%; max-height:100%; padding:0 !important; border:none !important; margin:0 !important;}
.xfmr-gal-thumb:hover{border-color:var(--sky,#56b3e4);}
.xfmr-gal-thumb.active{border-color:var(--blue,#1a7fc1);}
.xfmr-gal-thumb .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; background:rgba(13,59,102,.45); border-radius:2px; pointer-events:none;}
/* tablet + phone: shorter stage to match the narrower image column */
@media (max-width:900px){ .xfmr-gal-main{aspect-ratio:3 / 2;} }
@media (max-width:640px){ .xfmr-gal-main{aspect-ratio:4 / 3;} }