/* Галерея фото и видео ВК в карточке станка. Классы .stg-*, с остальными стилями сайта не пересекается. */
.stg { --stg-red: #b32417; --stg-ink: #1d1d1f; position: relative; width: 100%; margin-bottom: 20px; }
.stg *, .stg *::before, .stg *::after { box-sizing: border-box; }

/* Сцена фиксированной формы: фото любой ориентации вписываются внутрь, размер блока не меняется */
.stg-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; background: #fff;
  border: 1px solid #e7e7ea; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stg-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.22, .8, .3, 1); will-change: transform; }
.stg-track.is-drag { transition: none; }
.stg-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; padding: 14px; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.stg-slide > img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }

/* Видео */
.stg-video { padding: 0; background: #111; cursor: default; }
.stg-poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #161618 radial-gradient(circle at 50% 40%, #2b2b2f, #111); }
.stg-poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .92; pointer-events: none; }
.stg-play, .stg-thumb-play { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; background: rgba(179, 36, 23, .94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); transition: transform .2s; }
.stg-play::after, .stg-thumb-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-36%, -50%);
  border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.stg-poster:hover .stg-play { transform: scale(1.08); }
.stg-file { background: #000; }
.stg-vid { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.stg-m-video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; outline: 0; animation: stgPop .25s ease; }
.stg-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.stg-video.is-playing .stg-poster { visibility: hidden; }
.stg-expand { position: absolute; z-index: 3; right: 10px; top: 10px; width: 38px; height: 38px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/20px no-repeat; }
.stg-expand:hover { background-color: rgba(0, 0, 0, .75); }

/* Стрелки и счётчик */
.stg-nav { position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--stg-ink); background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2); transition: background .2s, transform .2s, opacity .2s; padding: 0; }
.stg-nav:hover { background: #fff; transform: scale(1.07); }
.stg-prev { left: 10px; } .stg-prev svg { transform: scaleX(-1); }
.stg-next { right: 10px; }
.stg-counter { position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 4px 11px; border-radius: 20px; font-size: 13px; line-height: 1.4; color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; }

/* Миниатюры */
.stg-thumbs { display: flex; gap: 8px; margin-top: 10px; padding: 3px 2px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
/* полосу прокрутки не показываем (перебивает глобальные div::-webkit-scrollbar сайта); вместо неё — затухание по краям, где есть что прокрутить */
.stg-thumbs::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
.stg-thumbs.has-left { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px); mask-image: linear-gradient(90deg, transparent 0, #000 36px); }
.stg-thumbs.has-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); }
.stg-thumbs.has-left.has-right { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
.stg-thumbs.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.stg-thumbs.is-dragging .stg-thumb { pointer-events: none; }
.stg-thumb { position: relative; flex: 0 0 auto; width: 86px; height: 66px; padding: 4px; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  background: #fff; box-shadow: 0 0 0 1px #e1e1e5; opacity: .75; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: opacity .2s, border-color .2s; }
.stg-thumb:hover { opacity: 1; }
.stg-thumb.is-active { opacity: 1; border-color: var(--stg-red); }
.stg-thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stg-thumb-video { background: #161618; }
.stg-thumb-video > img { object-fit: cover; position: absolute; inset: 0; padding: 0; opacity: .85; }
.stg-thumb-play { width: 30px; height: 30px; box-shadow: none; }
.stg-thumb-play::after { border-width: 6px 0 6px 10px; }

.stg button:focus-visible, .stg-poster:focus-visible, .stg-modal button:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }

/* Окно крупного просмотра */
.stg-lock { overflow: hidden; }
.stg-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; animation: stgFade .2s ease; }
.stg-modal[hidden] { display: none; }
.stg-m-bg { position: absolute; inset: 0; background: rgba(10, 10, 12, .93); }
.stg-m-body { position: relative; z-index: 1; width: min(96vw, 1400px); height: min(86vh, 900px); display: flex; align-items: center; justify-content: center; }
.stg-m-body > img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; animation: stgPop .25s ease; }
.stg-m-frame { width: 100%; height: 100%; max-width: calc(86vh * 16 / 9); max-height: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; margin: auto; }
.stg-m-close, .stg-m-nav { position: absolute; z-index: 2; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .2s; }
.stg-m-close:hover, .stg-m-nav:hover { background: rgba(255, 255, 255, .3); }
.stg-m-close { top: 16px; right: 16px; width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.stg-m-nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; }
.stg-m-prev { left: 16px; } .stg-m-prev svg { transform: scaleX(-1); }
.stg-m-next { right: 16px; }
.stg-m-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px; text-align: center; color: #cfcfd4; font-size: 14px; pointer-events: none; }
@keyframes stgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stgPop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .stg-stage { border-radius: 12px; }
  .stg-nav { width: 38px; height: 38px; margin-top: -19px; }
  .stg-thumb { width: 72px; height: 56px; }
  .stg-play { width: 62px; height: 62px; }
  .stg-m-nav { width: 42px; height: 42px; margin-top: -21px; }
  .stg-m-prev { left: 6px; } .stg-m-next { right: 6px; }
  .stg-m-body { width: 100vw; height: 80vh; }
  .stg-m-frame { max-width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { .stg-track, .stg-thumbs { transition: none; scroll-behavior: auto; } .stg-modal, .stg-m-body > img { animation: none; } }