.apg-notice{padding:28px;text-align:center;color:#888;font-weight:500;background:#f6f6f6;border-radius:12px;}

/* Wrapper is a flex container; the apg-pos-* class decides the direction.
   --apg-main-max caps the main image so it doesn't dominate (override in Elementor). */
.sp-gallery{--apg-main-max:none;width:100%;display:flex;gap:16px;container-type:inline-size;}
.sp-gallery.apg-pos-bottom{flex-direction:column;align-items:center;}
.sp-gallery.apg-pos-top{flex-direction:column-reverse;align-items:center;}
.sp-gallery.apg-pos-right{flex-direction:row;align-items:flex-start;justify-content:center;}
.sp-gallery.apg-pos-left{flex-direction:row;align-items:flex-start;justify-content:center;}
.sp-gallery.apg-pos-left .sp-gallery-thumbs{order:-1;}

/* Main viewer — sliding track, no card, clean border. Capped by --apg-main-max. */
.sp-gallery-main{position:relative;flex:1 1 auto;min-width:0;max-width:var(--apg-main-max);overflow:hidden;border:1px solid #ececec;border-radius:14px;background:#fff;touch-action:pan-y;cursor:grab;user-select:none;}
/* Stacked layouts: give the viewer full width up to the cap, then center it. */
.sp-gallery.apg-pos-bottom .sp-gallery-main,
.sp-gallery.apg-pos-top .sp-gallery-main{width:100%;}
.sp-gallery-main:active{cursor:grabbing;}
.sp-gallery-track{display:flex;transition:transform .4s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.sp-slide{flex:0 0 100%;min-width:100%;}
.sp-slide img{display:block !important;width:100% !important;height:auto !important;aspect-ratio:1/1;object-fit:contain !important;background:#fff;border-radius:0 !important;margin:0 !important;user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;}

/* Optional arrows (off by default) */
.sp-gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.92);color:#222;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);opacity:0;transition:opacity .2s,background .2s,color .2s;user-select:none;}
.sp-gallery-main:hover .sp-gnav{opacity:1;}
.sp-prev{left:12px;}.sp-next{right:12px;}

/* Thumbnails — plain images, centered when few, scroll/swipe when many.
   Hardened with !important so the theme can't turn them into circles. */
.sp-gallery-thumbs{display:flex;gap:12px;margin:0 auto;width:-moz-fit-content;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:6px 0 10px;scrollbar-width:thin;scrollbar-color:#d8d8d8 transparent;}
.sp-gallery-thumbs::-webkit-scrollbar{height:6px;width:6px;}
.sp-gallery-thumbs::-webkit-scrollbar-thumb{background:#d8d8d8;border-radius:3px;}
.sp-gallery-thumbs::-webkit-scrollbar-track{background:transparent;}

.sp-gallery .sp-thumb{flex:0 0 auto;width:84px;height:84px;width:var(--apg-thumb-size, clamp(60px, 16cqi, 128px));height:var(--apg-thumb-size, clamp(60px, 16cqi, 128px));border:1px solid #ececec !important;border-radius:10px !important;background:#fff !important;cursor:pointer;overflow:hidden;padding:0 !important;margin:0 !important;box-shadow:none !important;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
/* Match the site-wide grid rule: whole product visible, letterboxed on white. */
.sp-gallery .sp-thumb img{width:100% !important;height:auto !important;max-width:none !important;aspect-ratio:1/1;object-fit:contain !important;background:#fff;display:block !important;border-radius:8px !important;margin:0 !important;}
.sp-gallery .sp-thumb:hover{box-shadow:0 3px 12px rgba(0,0,0,.14) !important;}
.sp-gallery .sp-thumb.active{border-color:#1f1f1f !important;}

/* Side layouts (left / right): vertical strip that scrolls within the image height.
   max-height is synced to the main image by apg.js. */
.sp-gallery.apg-pos-left .sp-gallery-thumbs,
.sp-gallery.apg-pos-right .sp-gallery-thumbs{
  flex-direction:column;flex:0 0 auto;width:-moz-fit-content;width:fit-content;max-width:none;
  margin:0;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 6px 0 0;
}
.sp-gallery.apg-pos-left .sp-gallery-thumbs{padding:0 0 0 6px;}

/* Collapse side layouts to a stacked layout on small screens so phones stay usable. */
@media(max-width:768px){
  .sp-gallery.apg-pos-left,
  .sp-gallery.apg-pos-right{flex-direction:column;align-items:center;}
  .sp-gallery.apg-pos-left .sp-gallery-thumbs,
  .sp-gallery.apg-pos-right .sp-gallery-thumbs{
    order:0;flex-direction:row;width:-moz-fit-content;width:fit-content;max-width:100%;margin:0 auto;
    max-height:none !important;overflow-x:auto;overflow-y:hidden;padding:6px 0 10px;
  }
  .sp-gallery.apg-pos-left .sp-gallery-main,
  .sp-gallery.apg-pos-right .sp-gallery-main{width:100%;}
}