/* Universal Shoptet product video gallery v10.
   Change --shoptet-gallery-accent below for each store. */
:root {
  --shoptet-gallery-accent: #a1826c;
  --shoptet-gallery-surface: #ffffff;
  --shoptet-gallery-thumbnail-border: #dddddd;
  --shoptet-gallery-label-bg: #f6f2ef;
  --shoptet-gallery-label-text: #59493c;
}

/* Core gallery layout */
.mvvg-native-hidden { display: none !important; }
.mvvg { width: 100%; margin-bottom: 16px; }
.mvvg-main { position: relative; width: 100%; }
.mvvg-stage { aspect-ratio: 4 / 3; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #fff; }
.mvvg-stage > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mvvg-stage img, .mvvg-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.mvvg-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 0; background: rgba(255,255,255,.7); color: #000; width: 36px; height: 46px; cursor: pointer; font-size: 32px; line-height: 1; }
.mvvg-prev { left: 0; } .mvvg-next { right: 0; }
.mvvg-arrow[hidden] { display: none; }
.mvvg-thumbs { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; padding: 2px; }
.mvvg-thumb { flex: 0 0 76px; width: 76px; height: 64px; position: relative; padding: 0; border: 2px solid var(--shoptet-gallery-thumbnail-border); background: #fff; cursor: pointer; }
.mvvg-thumb.is-active { border-color: var(--shoptet-gallery-accent); }
.mvvg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mvvg-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--shoptet-gallery-accent); color: #fff; font-size: 12px; }
@media(max-width:767px) { .mvvg-thumb { flex-basis: 64px; width: 64px; height: 56px; } .mvvg-arrow { width: 30px; height: 40px; } }

/* v3: hover magnifier and integrated media viewer */
.mvvg-image-button { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; overflow: hidden; }
.mvvg-image-button > img { pointer-events: none; }
.mvvg-zoom { position: absolute; inset: 0; opacity: 0; pointer-events: none; background-repeat: no-repeat; background-size: 200% 200%; transition: opacity .12s ease; }
@media (hover: hover) and (pointer: fine) { .mvvg-image-button:hover .mvvg-zoom { opacity: 1; } }
.mvvg-modal[hidden] { display: none !important; }
.mvvg-modal { position: fixed; z-index: 2147483646; inset: 0; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; }
body.mvvg-modal-open { overflow: hidden !important; }
.mvvg-modal-stage { width: calc(100% - 120px); height: calc(100% - 90px); display: flex; align-items: center; justify-content: center; }
.mvvg-modal-stage img, .mvvg-modal-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.mvvg-modal button { position: absolute; z-index: 2; color: white; border: 0; cursor: pointer; background: rgba(50,50,50,.6); line-height: 1; }
.mvvg-modal-close { top: 15px; right: 18px; width: 48px; height: 48px; font-size: 36px; }
.mvvg-modal-prev, .mvvg-modal-next { top: 50%; transform: translateY(-50%); width: 46px; height: 64px; font-size: 44px; }
.mvvg-modal-prev { left: 8px; } .mvvg-modal-next { right: 8px; }
.mvvg-modal button[hidden] { display: none !important; }
@media (max-width: 767px) { .mvvg-modal-stage { width: calc(100% - 74px); height: calc(100% - 85px); } .mvvg-modal-prev, .mvvg-modal-next { width: 34px; } }

/* v4 embedded YouTube Shorts and Vimeo */
.mvvg-stage > .mvvg-embed { display: block; width: 100%; height: 100%; border: 0; }
.mvvg-stage > .mvvg-embed-portrait { width: min(100%, 42.1875%); max-width: 100%; }
.mvvg-modal-stage > .mvvg-embed { border: 0; width: min(100%, 1100px); height: min(100%, 75vh); }
.mvvg-modal-stage > .mvvg-embed-portrait { width: min(100%, 44vh); height: min(100%, 82vh); }
@media (max-width:767px) {
 .mvvg-stage > .mvvg-embed-portrait { width: min(100%, 52%); }
 .mvvg-modal-stage > .mvvg-embed-portrait { width: min(100%, 44vh); height: 70vh; }
}

/* v5 Instagram Reels */
.mvvg-thumb-label { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; background:var(--shoptet-gallery-label-bg); color:var(--shoptet-gallery-label-text); font-size:11px; }
.mvvg-embed[src*="instagram.com"] { background: #fff; }

/* v6: Instagram embed is a third-party widget; show without stretching horizontally. */
.mvvg-stage > .mvvg-embed[src*="instagram.com"] { width: min(100%, 360px); height: 100%; }
.mvvg-modal-stage > .mvvg-embed[src*="instagram.com"] { width: min(100%, 400px); height: min(100%, 720px); }

/* v9: portrait embeds should not be cropped by landscape stage. */
.mvvg-stage.mvvg-portrait-active { aspect-ratio: auto; height: min(72vw, 730px); min-height: 530px; overflow: visible; align-items: center; }
.mvvg-stage.mvvg-portrait-active > .mvvg-embed-portrait { width: min(100%, 360px); height: 100%; flex: none; display: block; margin: 0 auto; }
.mvvg-stage.mvvg-instagram-active { height: 725px; min-height: 0; }
.mvvg-stage.mvvg-instagram-active > .mvvg-embed { width: min(100%, 360px); height: 725px; }
.mvvg-modal-stage.mvvg-instagram-active { overflow: auto; }
@media (max-width: 767px) {
  .mvvg-stage.mvvg-portrait-active { height: auto; min-height: 0; aspect-ratio: auto; overflow: visible; display: flex; justify-content: center; align-items: flex-start; }
  .mvvg-stage.mvvg-portrait-active > .mvvg-embed-portrait { display: block; margin-inline: auto; width: min(100%, 340px); height: min(178vw, 620px); min-height: 0; max-width: 100%; }
  /* Instagram's official embed is taller than the reel itself because of its UI.
     Give the iframe its full widget height rather than clipping it to 4:3. */
  .mvvg-stage.mvvg-instagram-active > .mvvg-embed { width: min(100%, 326px); height: 660px; max-height: none; }
  .mvvg-modal-stage.mvvg-portrait-active { width: calc(100% - 72px); height: calc(100dvh - 90px); align-items: flex-start; overflow-y: auto; }
  .mvvg-modal-stage.mvvg-instagram-active > .mvvg-embed { flex: 0 0 auto; width: min(100%, 326px); height: 660px; max-height: none; }
}