/* Gallery of the product page (views/product/partials/gallery.phtml, gallery.js): native carousel (scroll-snap),
   arrows, counter, thumbnails, full screen. Set by the theme: --gallery-bg, background of the images (white:
   transparent PNG), --gallery-html-bg, that of the HTML slides */
.gallery { position: relative; min-width: 0; }
@media (min-width: 64rem) { .gallery { position: sticky; top: 8rem; } }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overscroll-behavior-x: contain; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery-slide a { display: block; cursor: zoom-in; }
.gallery-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--gallery-bg, #fff); }
.gallery-slide figcaption { padding: 1.12rem 1.6rem 1.28rem; color: var(--muted); font-size: 1.36rem; line-height: 1.4; border-top: 1px solid var(--line); }
.gallery-html { display: block; aspect-ratio: 1; overflow: hidden; background: var(--gallery-html-bg, var(--surface2)); }
.gallery-html svg, .gallery-thumb-html svg { display: block; width: 100%; height: 100%; }
.gallery-nav { position: absolute; top: calc(50% - 6rem); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; padding: 0; border: 1px solid var(--line); border-radius: 99px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgb(0 0 0 / .25); cursor: pointer; transition: opacity .2s, transform .2s; }
.gallery-nav .i { width: 2.2rem; height: 2.2rem; }
.gallery-nav:hover, .gallery-nav:focus-visible { border-color: var(--accent); background: var(--surface); transform: scale(1.06); }
.gallery-nav[disabled] { opacity: 0; pointer-events: none; }
.gallery-prev { left: 1.2rem; }
.gallery-next { right: 1.2rem; }
.gallery-count { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2; padding: .24rem .96rem; border-radius: 99px; background: rgb(0 0 0 / .6); color: #fff; font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gallery-expand { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; border-radius: 99px; background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; }
.gallery-expand .i { width: 1.8rem; height: 1.8rem; }
.gallery-expand:hover, .gallery-expand:focus { border: 0; background: rgb(0 0 0 / .8); color: #fff; }
.gallery-thumbs { --fade: 20%; display: flex; gap: .8rem; margin-top: 1.2rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .4rem; }
/* Desktop: thumbnails in a column to the left of the image, over its height, scrolling beyond (without scrollbar:
   the fade of [data-scroll-fade]) */
@media (min-width: 64rem) {
  /* Displayed image: 460 × 460 px (plus the 1 px border of the track) */
  .gallery { width: 46.2rem; }
  .gallery:has(.gallery-thumbs) { width: 55rem; padding-left: 8.8rem; }
  .gallery:has(.gallery-thumbs) > :is(.gallery-prev, .gallery-count) { left: 10rem; }
  .gallery-thumbs { position: absolute; top: 0; left: 0; flex-direction: column; width: 7.2rem; max-height: 46.2rem; margin: 0; padding: 0; overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain; }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
}
.gallery-thumb { flex: none; display: block; width: 7.2rem; height: 7.2rem; border: 0; border-radius: 1rem; overflow: hidden; background: var(--gallery-bg, #fff); opacity: .6; transition: opacity .2s, outline-color .2s; outline: 2.5px solid transparent; outline-offset: -2.5px; }
.gallery-thumb-html { background: var(--gallery-html-bg, var(--surface2)); }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb:focus-visible { outline-color: var(--ink); opacity: 1; }
/* Drawn inside (scrolling column) */
.gallery-thumb[aria-current="true"] { outline-color: var(--accent); opacity: 1; }
/* Mobile: full-width images, edge to edge (the side margin of the page, --gutter); dots instead of thumbnails */
@media (max-width: 47.99rem) {
  .gallery { margin-inline: calc(-1 * var(--gutter)); }
  .gallery-track { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .gallery-slide figcaption { padding-inline: 1.6rem; }
  .gallery-nav { display: none; }
  .gallery-thumbs { justify-content: center; gap: .64rem; margin-top: 1rem; }
  .gallery-thumb { width: .8rem; height: .8rem; padding: 0; border: 0; border-radius: 99px; background: var(--line); opacity: 1; }
  .gallery-thumb img, .gallery-thumb svg { display: none; }
  .gallery-thumb, .gallery-thumb[aria-current="true"] { outline: 0; }
  .gallery-thumb[aria-current="true"] { width: 2.4rem; background: var(--accent); }
}

/* ——— Full screen ——— */
.zoom { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .94); color: #fff; }
.zoom::backdrop { background: rgb(0 0 0 / .8); }
.zoom[open] { display: block; animation: zoom-fade .2s ease-out; }
@keyframes zoom-fade { from { opacity: 0; } }
.zoom-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.zoom-track::-webkit-scrollbar { display: none; }
.zoom-track figure { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; margin: 0; padding: 6.4rem 1.6rem 2.4rem; scroll-snap-align: start; scroll-snap-stop: always; }
.zoom-track img { max-width: 100%; max-height: calc(100% - 4.8rem); object-fit: contain; border-radius: .8rem; background: var(--gallery-bg, #fff); }
.zoom-track .gallery-html { width: min(100%, calc(100vh - 16rem)); border-radius: .8rem; }
.zoom-track figcaption { max-width: 72rem; color: rgb(255 255 255 / .8); font-size: 1.44rem; text-align: center; }
.zoom-close { position: absolute; top: calc(1.6rem + env(safe-area-inset-top, 0px)); right: 1.6rem; display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; padding: 0; border: 0; border-radius: 99px; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; }
.zoom-close .i { width: 2.2rem; height: 2.2rem; }
.zoom-close:hover, .zoom-close:focus { border: 0; background: rgb(255 255 255 / .22); color: #fff; }
.zoom .gallery-nav { top: calc(50% - 2.2rem); border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .12); color: #fff; }
.zoom .gallery-nav:hover { background: rgb(255 255 255 / .22); }

/* ——— Print: the first image alone ——— */
@media print {
  .gallery-nav, .gallery-count, .gallery-expand, .gallery-thumbs, .zoom, .gallery-slide figcaption { display: none !important; }
  .gallery { position: static; }
  .gallery-track { overflow: hidden; }
  .gallery-slide:not(:first-child) { display: none; }
}