/* Общий компонент сайта: галерея фото (js/shared/photo-gallery.js, .pg-*) и «во весь экран» (.pg-lb).
   Виды А/Б/В — токены --sk-*; правила под html[data-skin]. */

html.pg-lock { overflow: hidden; }
html[data-skin] .pg-main { position: relative; aspect-ratio: 4 / 3; background: var(--sk-soft); border-radius: var(--pg-r, 6px); overflow: hidden; display: grid; place-items: center; touch-action: pan-y; }
html[data-skin="b"] .pg-main { --pg-r: 14px; }
html[data-skin] .pg-main--empty { color: var(--sk-muted); }
html[data-skin] .pg-img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
html[data-skin] .pg-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; background: rgba(255, 255, 255, .85);
  color: var(--sk-ink); font-size: 30px; line-height: 1; cursor: pointer;
}
html[data-skin] .pg-nav--prev { left: 0; border-radius: 0 8px 8px 0; }
html[data-skin] .pg-nav--next { right: 0; border-radius: 8px 0 0 8px; }
html[data-skin] .pg-zoom { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--sk-ink); font-size: 16px; cursor: pointer; }
html[data-skin] .pg-cnt { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(27, 36, 48, .78); color: #fff; font-size: 12px; }
html[data-skin] .pg-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
html[data-skin] .pg-th { flex: none; width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--sk-soft); cursor: pointer; opacity: .75; }
html[data-skin] .pg-th.is-on { border-color: var(--sk-ink); opacity: 1; }
html[data-skin] .pg-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(8, 12, 18, .94); touch-action: pan-y; }
.pg-lb__img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.pg-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 36px; cursor: pointer; }
.pg-lb__nav--prev { left: 0; } .pg-lb__nav--next { right: 0; }
.pg-lb__close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.pg-lb__cnt { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: #fff; font: 500 14px/1 system-ui, sans-serif; }
@media (max-width: 900px) {
  html[data-skin] .pg-nav { width: 34px; height: 48px; }
}