@layer components {
  .product-gallery { position: relative; min-width: 0; }
  .product-gallery__stage { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--color-border); border-radius: 1.5rem; background: #f4f4f2; color: inherit; cursor: zoom-in; touch-action: pan-y; }
  .product-gallery__slides { position: absolute; inset: 0; display: block; }
  .product-gallery__slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
  .product-gallery__slide.is-selected { z-index: 1; opacity: 1; pointer-events: auto; }
  .product-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .product-gallery--cover .product-gallery__slide img { object-fit: cover; }
  .product-gallery__zoom-hint { position: absolute; z-index: 2; right: .75rem; bottom: .75rem; padding: .45rem .7rem; border-radius: 999px; background: rgb(255 255 255 / 88%); box-shadow: 0 .3rem 1rem rgb(0 0 0 / 12%); font-size: .78rem; font-weight: 700; backdrop-filter: blur(.4rem); }
  .product-gallery__arrow { position: absolute; z-index: 3; top: calc(40% - 1.25rem); width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: rgb(255 255 255 / 90%); color: var(--color-brand-strong); box-shadow: 0 .35rem 1rem rgb(0 0 0 / 12%); font-size: 1.75rem; line-height: 1; cursor: pointer; }
  .product-gallery__arrow--previous { left: .65rem; }
  .product-gallery__arrow--next { right: .65rem; }
  .product-gallery__counter { position: absolute; z-index: 3; right: .75rem; top: .75rem; padding: .35rem .6rem; border-radius: 999px; background: rgb(52 58 64 / 86%); color: #fff; font-size: .75rem; font-weight: 800; }
  .product-gallery__thumbnails { display: grid; grid-auto-flow: column; grid-auto-columns: 4.75rem; gap: .65rem; margin-top: .8rem; padding: .2rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .product-gallery__thumbnail { width: 4.75rem; padding: .18rem; overflow: hidden; aspect-ratio: 1; border: 2px solid transparent; border-radius: .85rem; background: #f4f4f2; cursor: pointer; opacity: .62; }
  .product-gallery__thumbnail.is-selected { border-color: var(--color-brand-strong); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-brand-strong); opacity: 1; }
  .product-gallery__thumbnail picture,.product-gallery__thumbnail img { display: block; width: 100%; height: 100%; }
  .product-gallery__thumbnail img { object-fit: cover; border-radius: .55rem; }
  .product-gallery__dialog { width: min(94vw, 60rem); max-width: none; max-height: 92vh; padding: 1rem; overflow: visible; border: 0; border-radius: 1.25rem; background: #fff; box-shadow: 0 2rem 5rem rgb(0 0 0 / 28%); }
  .product-gallery__dialog::backdrop { background: rgb(16 20 24 / 78%); backdrop-filter: blur(.25rem); }
  .product-gallery__dialog img { display: block; width: 100%; height: auto; max-height: calc(92vh - 2rem); object-fit: contain; }
  .product-gallery__dialog-close { position: absolute; z-index: 2; top: -.75rem; right: -.75rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--color-brand-strong); color: #fff; box-shadow: 0 .4rem 1rem rgb(0 0 0 / 25%); font-size: 1.65rem; line-height: 1; cursor: pointer; }
  .product-gallery button:focus-visible { outline: 3px solid #2f73c9; outline-offset: 3px; }
  @media (max-width: 48rem) {
    .product-gallery__arrow { top: calc(43% - 1.15rem); width: 2.3rem; height: 2.3rem; }
    .product-gallery__thumbnails { grid-auto-columns: 4.25rem; }
    .product-gallery__thumbnail { width: 4.25rem; }
    .product-gallery__dialog { width: calc(100vw - 1.25rem); padding: .65rem; }
  }
  @media (prefers-reduced-motion: reduce) { .product-gallery__slide { transition: none; } }
}