/**
 * Mediband_ProductGallery (MHM2-714) — scoped .mbg PDP image gallery.
 * Pure-CSS layout; mb-gallery JS only enhances (thumb swap, arrows, swipe,
 * lightbox). Visual language matches the PDP rel-band (Manrope, #c85a17, #16202b).
 * The main <img> is server-rendered with fetchpriority=high = the LCP element.
 */
.mbg{max-width:none;margin:0 auto}
.mbg *{box-sizing:border-box}

/* ---- stage (main image) ----
   Transparent full-column-width area (matches the LIVE slider); the square
   700x700 image is centred and capped, so the stage stays a wide transparent
   band rather than a tall square. min-height reserves space (no CLS). */
.mbg-stage{position:relative;width:100%;min-height:600px;background:transparent;overflow:hidden;touch-action:pan-y}
/* main image absolutely centred in the stage; switched via a fade-in (see
   swapMain in mb-gallery.js — same effect as the zoom popup) */
.mbg-main{position:absolute;inset:0;margin:auto;max-width:600px;max-height:600px;width:auto;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;cursor:zoom-in}

/* ---- stage arrows (desktop) ---- */
.mbg-arr{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #d9d3c8;background:rgba(255,255,255,.92);color:#16202b;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:6;transition:background .15s,border-color .15s,color .15s,opacity .15s;backdrop-filter:saturate(1.1) blur(2px)}
.mbg-arr:hover{background:#16202b;border-color:#16202b;color:#fff}
.mbg-arr:disabled{opacity:.35;pointer-events:none}
.mbg-arr svg{width:18px;height:18px}
.mbg-prev{left:12px}
.mbg-next{right:12px}

/* ---- zoom hint ---- */
.mbg-zoom{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:10px;border:1px solid #d9d3c8;background:rgba(255,255,255,.92);color:#16202b;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:6;transition:background .15s,color .15s}
.mbg-zoom:hover{background:#16202b;border-color:#16202b;color:#fff}
.mbg-zoom svg{width:17px;height:17px}

/* video play badge on a stage/thumb */
.mbg-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(22,32,43,.72);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5}
.mbg-play svg{width:24px;height:24px;margin-left:2px}

/* ---- thumbnails ---- */
.mbg-thumbs{display:flex;justify-content:safe center;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:14px 2px 4px;margin:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;list-style:none}
.mbg-thumbs::-webkit-scrollbar{display:none}
.mbg-thumb{flex:0 0 64px;width:64px;height:64px;scroll-snap-align:start;background:#fff;border:1.5px solid #eee7dc;border-radius:10px;overflow:hidden;cursor:pointer;padding:0;position:relative;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.mbg-thumb:hover{border-color:#c8bfae}
.mbg-thumb.is-active{border-color:#c85a17}
.mbg-thumb img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.mbg-thumb .mbg-play{width:24px;height:24px}
.mbg-thumb .mbg-play svg{width:11px;height:11px}
.mbg-single .mbg-thumbs{display:none}

/* ---- mobile dots (hidden on desktop) ---- */
.mbg-dots{display:none}

/* ---- lightbox ---- */
.mbg-lightbox{position:fixed;inset:0;z-index:9999;background:#f3f3f3;display:none;align-items:center;justify-content:center;padding:32px;touch-action:pan-y}
.mbg-lightbox.is-open{display:flex}
.mbg-lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none}
.mbg-lb-close{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(22,32,43,.22);background:transparent;color:#16202b;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mbg-lb-close:hover{background:rgba(22,32,43,.08)}
.mbg-lb-close svg{width:20px;height:20px}
.mbg-lb-arr{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(22,32,43,.22);background:transparent;color:#16202b;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s}
.mbg-lb-arr:hover{background:rgba(22,32,43,.08)}
.mbg-lb-arr:disabled{opacity:.3;pointer-events:none}
.mbg-lb-arr svg{width:24px;height:24px}
.mbg-lb-prev{left:18px}
.mbg-lb-next{right:18px}
.mbg-lb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#16202b;font:600 13px/1 Manrope,sans-serif;letter-spacing:.02em;opacity:.85}
.mbg-lb-frame{width:min(90vw,960px);aspect-ratio:16/9;border:0}
body.mbg-lb-lock{overflow:hidden}

/* ---- mobile ---- */
@media (max-width:767px){
  .mbg{max-width:100%}
  .mbg-stage{min-height:calc(100vw - 24px)}
  .mbg-main{max-width:100%;max-height:calc(100vw - 24px)}
  .mbg-arr{display:none}
  .mbg-thumbs{display:none}
  .mbg-dots{display:flex;gap:7px;justify-content:center;padding:12px 0 2px}
  .mbg-dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:#d3ccc0;cursor:pointer;transition:background .15s,transform .15s}
  .mbg-dot.is-active{background:#c85a17;transform:scale(1.25)}
  .mbg-lightbox{padding:14px}
  .mbg-lb-arr{width:44px;height:44px}
}