.product-photo { cursor: zoom-in; }
[data-product-photos] { display: grid; gap: var(--gutter); }
.product__media { min-width: 0; align-content: start; }
.product-gallery-controls { display: grid; gap: var(--s4); min-width: 0; }
.product-gallery-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.product-gallery-thumbs { display: flex; gap: var(--s3); overflow-x: auto; padding: var(--s1); }
.product-gallery-thumb { flex: 0 0 72px; padding: 3px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.product-gallery-thumb[aria-pressed="true"] { border: 2px solid var(--ink); padding: 2px; }
.product-gallery-thumb img { display: block; width: 100%; height: 84px; object-fit: cover; }
.product-photo__zoom { position: absolute; right: var(--s3); bottom: var(--s3); padding: var(--s2) var(--s3); background: var(--paper); color: var(--ink); font-size: var(--t-xs); border-radius: var(--radius); }
.product-photo:focus-visible { outline-offset: 4px; }
.gallery { width: min(96vw, 1440px); height: min(94dvh, 1040px); max-width: none; max-height: none; margin: auto; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.gallery[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: var(--s3); }
.gallery::backdrop { background: rgba(30, 59, 48, 0.88); }
.gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.gallery__bar h2 { font-size: var(--d-4); }
.gallery__bar .link { flex: none; }
.gallery__stage { overflow: auto; min-height: 0; background: var(--paper); overscroll-behavior: contain; }
.gallery__stage img { display: block; width: 100%; height: 100%; object-fit: contain; transition: none; }
.gallery__stage.is-zoomed img { width: 200%; height: 200%; max-width: none; }
.gallery__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s4); }
.gallery__tools .btn--do { min-width: 0; min-height: 44px; padding-inline: var(--s4); }
.gallery__caption { text-align: center; }
@media (min-width: 640px) { .gallery { padding: var(--s6); } .gallery__tools { gap: var(--s6); } }