.product-gallery { margin-bottom: 24px; min-width: 0; }
.gallery-stage { position: relative; height: clamp(280px, 50dvh, 460px); background: #fff; border: 1px solid var(--line); border-radius: 9px; touch-action: pan-y pinch-zoom; }
.gallery-stage:focus-visible { outline: 3px solid #b5c7ab; outline-offset: 3px; }
.gallery-image { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.gallery-image > * { display: block; width: 100%; height: 100%; object-fit: contain; padding: 20px 54px; }
.gallery-image > .image-placeholder { display: grid; min-height: 0; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--wine); box-shadow: 0 2px 8px #272c270c; }
.gallery-arrow:hover { background: var(--paper); border-color: var(--wine); }
.gallery-arrow span { width: 11px; height: 11px; border: solid currentColor; border-width: 2px 2px 0 0; }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-prev span { transform: translateX(2px) rotate(-135deg); }
.gallery-next span { transform: translateX(-2px) rotate(45deg); }
.gallery-counter { position: absolute; right: 14px; bottom: 12px; padding: 3px 9px; border-radius: 12px; background: var(--paper); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.gallery-thumbnails { position: relative; display: flex; gap: 10px; max-width: 100%; overflow-x: auto; padding: 4px; margin: 10px -4px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.gallery-thumbnail { flex: 0 0 88px; height: 68px; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: hidden; }
.gallery-thumbnail > * { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbnail > .image-placeholder { display: grid; min-height: 0; padding: 2px; font-size: 9px; line-height: 1.25; border-radius: 3px; }
.gallery-thumbnail:hover { border-color: var(--wine); }
.gallery-thumbnail.active { border-color: var(--wine); box-shadow: 0 0 0 1px var(--wine); }
.gallery-thumbnail:focus-visible { outline-offset: 1px; }
@media (max-width: 450px) {
    .gallery-stage { height: clamp(240px, 40dvh, 340px); }
    .gallery-image > * { padding: 14px 42px; }
    .gallery-arrow { width: 38px; height: 44px; border-radius: 7px; }
    .gallery-prev { left: 5px; }
    .gallery-next { right: 5px; }
    .gallery-thumbnails { gap: 8px; }
    .gallery-thumbnail { flex-basis: 68px; height: 56px; }
}