/* Product image gallery: main image, thumbnails, full-screen viewer. */
.pg { display: grid; gap: var(--space-3); }
.pg svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .pg-flip { transform: scaleX(-1); }

.pg-stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--brushed); aspect-ratio: 4 / 3; }
.pg-main { display: block; inline-size: 100%; block-size: 100%; cursor: zoom-in; }
.pg-main img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity .2s ease, transform .4s ease; }
.pg-main:hover img { transform: scale(1.03); }
.pg-main img.is-loading { opacity: .35; }

.pg-nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgb(255 255 255 / 88%); color: #1c1917; box-shadow: 0 6px 18px rgb(12 10 9 / 22%); cursor: pointer; opacity: 0; transition: opacity .2s, background-color .2s; }
.pg-prev { inset-inline-start: var(--space-3); }
.pg-next { inset-inline-end: var(--space-3); }
.pg-stage:hover .pg-nav, .pg-nav:focus-visible { opacity: 1; }
.pg-nav:hover { background: #fff; }
@media (hover: none) { .pg-stage .pg-nav { opacity: 1; } }

.pg-count { position: absolute; inset-block-end: var(--space-3); inset-inline-start: var(--space-3); padding: 4px 12px; border-radius: 999px; background: rgb(12 10 9 / 70%); color: #fff; font-size: .8125rem; font-weight: 600; }
.pg-zoom-hint { position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); inline-size: 38px; block-size: 38px; display: grid; place-items: center; border-radius: 999px; background: rgb(12 10 9 / 70%); color: #fff; pointer-events: none; }
.pg-zoom-hint svg { inline-size: 20px; block-size: 20px; }

.pg-thumbs { list-style: none; margin: 0; padding: 2px; display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pg-thumbs li { flex: none; scroll-snap-align: start; }
.pg-thumb { display: block; inline-size: 84px; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; background: var(--brushed); opacity: .7; transition: opacity .15s, border-color .15s; }
.pg-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pg-thumb:hover { opacity: 1; }
.pg-thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; }
@media (min-width: 600px) { .pg-thumb { inline-size: 96px; } }

/* Viewer */
.pg-lightbox { inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: rgb(12 10 9 / 96%); color: #fff; overflow: hidden; }
.pg-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.pg-lightbox::backdrop { background: rgb(12 10 9 / 80%); }
.pg-lb-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.pg-lb-count { margin-inline-end: auto; font-weight: 600; }
.pg-lb-btn { inline-size: 44px; block-size: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer; }
.pg-lb-btn:hover, .pg-lb-btn[aria-pressed="true"] { background: rgb(255 255 255 / 24%); }
.pg-lb-stage { position: relative; display: grid; place-items: center; overflow: hidden; touch-action: pan-y pinch-zoom; cursor: zoom-in; }
.pg-lb-stage img { max-inline-size: min(100%, 1400px); max-block-size: 100%; object-fit: contain; transition: transform .25s ease; user-select: none; }
.pg-lb-stage.is-zoomed { cursor: zoom-out; touch-action: none; }
.pg-lb-stage.is-zoomed img { transform: scale(2.2); transition: none; }
.pg-lb-nav { opacity: 1; z-index: 1; }
.pg-lb-caption { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); text-align: center; color: rgb(255 255 255 / 80%); font-size: .9375rem; min-block-size: 1.5em; }

@media (prefers-reduced-motion: reduce) {
  .pg-main img, .pg-nav, .pg-thumb, .pg-lb-stage img { transition: none; }
  .pg-main:hover img { transform: none; }
}