/* Claude v3.2 (E1): окно просмотра фото товара. Скрипт — assets/v32-gallery.js, библиотека — assets/vendor/photoswipe (PhotoSwipe 5.4.4, MIT);
   её стили подключаются скриптом при первом касании или наведении, здесь — только оформление Hub Garage. Классы окна — hgv-*
   (hg-gal-* уже заняты лентой карточки, m3-pdp). Фон окна тёмный и в светлой, и в ночной теме: без цветного налёта, кнопки на тёмных кружках. */

/* ── Страница под окном ── */
html.hgv-open{overflow:hidden}
html.hgv-gutter{scrollbar-gutter:stable}

/* ── Хозяин окна: прозрачный <dialog> на весь экран; фон, затемнение и кнопки рисует PhotoSwipe ── */
.hgv-host{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.hgv-host::backdrop{background:transparent}
.hgv-host--plain{z-index:100000}
.hgv-host--plain[hidden]{display:none}
.hgv-host *{-webkit-user-select:none;user-select:none}
/* выделение (двойное касание, «выделить всё», долгое нажатие) красило фото цветом ::selection темы — красным налётом; в окне выделения нет */
html body.hg-store .hgv-host ::selection{background:transparent;color:inherit}

/* ── Окно ── */
.pswp.hgv-pswp{--pswp-bg:#0b0c0e;--pswp-placeholder-bg:#17191c;--pswp-icon-color:#fff;--pswp-icon-color-secondary:#0b0c0e;--pswp-icon-stroke-color:#0b0c0e;--pswp-icon-stroke-width:0px;--pswp-preloader-color:rgba(255,255,255,.28);--pswp-preloader-color-secondary:#fff;--pswp-error-text-color:#fff;color:#fff;font-family:inherit}
.pswp.hgv-pswp .pswp__img{border-radius:0}
/* скругление — только там, где кадр не упирается в края экрана (планшет в портрете и телефон занимают всю ширину: «уголки» у краёв некрасивы) */
@media (min-width:1000px){.pswp.hgv-pswp .pswp__img{border-radius:6px}}

/* кнопки: тёмный кружок 48 px с тонким светлым кольцом — видны и на светлом, и на тёмном фото, и днём, и ночью */
.pswp.hgv-pswp .pswp__button{box-sizing:border-box;width:48px;height:48px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:rgba(18,19,22,.84);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);color:#fff;font-size:0;line-height:0;opacity:1;transition:background-color .15s ease,box-shadow .15s ease}
.pswp.hgv-pswp .pswp__button:hover,.pswp.hgv-pswp .pswp__button:active,.pswp.hgv-pswp .pswp__button:focus{margin:0;padding:0;border:0;background:rgba(58,60,66,.96);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:#fff;opacity:1}
.pswp.hgv-pswp .pswp__button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pswp.hgv-pswp .pswp__button::after{display:none}
.pswp.hgv-pswp .pswp__icn{top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;fill:#fff;color:#fff}
.pswp.hgv-pswp .pswp__icn-shadow{display:none}
.pswp.hgv-pswp .pswp__zoom-icn-bar-h,.pswp.hgv-pswp .pswp__zoom-icn-bar-v{fill:#fff}

/* верхняя полоса: счётчик слева, масштаб и закрытие справа */
.pswp.hgv-pswp .pswp__top-bar{height:64px;align-items:center;gap:10px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
.pswp.hgv-pswp .pswp__counter{box-sizing:border-box;min-width:calc(var(--hgv-ch,5) * 1ch + 28px);height:36px;margin:0;padding:0 14px;border-radius:18px;text-align:center;background:rgba(18,19,22,.84);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:36px;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:none;opacity:1}
.pswp.hgv-pswp .pswp__preloader{width:36px;height:48px;margin:0 auto 0 0}
.pswp.hgv-pswp .pswp__preloader .pswp__icn{width:24px;height:24px;margin:-12px 0 0 -12px}
.pswp.hgv-pswp .pswp__button--close{margin:0}

/* стрелки (мышь): круглые, по краям; на сенсорных экранах скрыты самой библиотекой — там свайп и счётчик */
.pswp.hgv-pswp .pswp__button--arrow{top:50%;width:52px;height:52px;margin:-26px 0 0}
.pswp.hgv-pswp .pswp__button--arrow--prev{left:16px;right:auto}
.pswp.hgv-pswp .pswp__button--arrow--next{right:16px;left:auto}
.pswp.hgv-pswp .pswp__button--arrow .pswp__icn{top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;transform:none}
.pswp.hgv-pswp .pswp__button--arrow--next .pswp__icn{left:50%;right:auto;transform:scaleX(-1)}

/* полоса миниатюр: на ПК и планшете (от 700×540), на телефоне — свайп и счётчик */
.pswp.hgv-pswp .hgv-thumbs{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));display:none;gap:8px;max-width:min(calc(100% - 32px),760px);padding:8px;border-radius:14px;background:rgba(18,19,22,.84);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);overflow-x:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent;transform:translateX(-50%)}
@media (min-width:700px) and (min-height:540px){
  .pswp.hgv-pswp:not(.pswp--one-slide) .hgv-thumbs{display:flex}
}
.hgv-thumb{position:relative;box-sizing:border-box;flex:none;width:56px;height:56px;min-width:0;min-height:0;margin:0;padding:0;border:2px solid transparent;border-radius:8px;background:#23252a;color:inherit;font-size:0;line-height:0;overflow:hidden;cursor:pointer;opacity:.62;transition:opacity .15s ease,border-color .15s ease}
.hgv-thumb::after{display:none}
.hgv-thumb:hover,.hgv-thumb:focus{background:#23252a;border-color:transparent;opacity:.92}
.hgv-thumb[aria-current=true],.hgv-thumb[aria-current=true]:hover{border-color:#fff;opacity:1}
.hgv-thumb:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hgv-thumb img{display:block;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .pswp.hgv-pswp .pswp__button,.hgv-thumb{transition:none}
}
@media (forced-colors:active){
  .pswp.hgv-pswp .pswp__button,.pswp.hgv-pswp .pswp__counter,.hgv-thumb{border:1px solid ButtonText}
  .hgv-thumb[aria-current=true]{outline:3px solid Highlight}
}

/* ── Подсказки «можно увеличить»: главное фото карточки и фото быстрого просмотра ── */
.hg-store .jp-main-photo[data-photo-open]{cursor:zoom-in}
.hg-store .hg-qv-slide img{cursor:zoom-in}

/* ── Миниатюры под главным фото карточки: крупнее, неактивные приглушены, активный кадр — красная рамка с внутренним кольцом ── */
.hg-store .hg-pdp-r440 .jp-photo-thumbs button{flex:0 0 64px;width:64px!important;height:64px!important;opacity:.7;transition:opacity .15s ease}
.hg-store .hg-pdp-r440 .jp-photo-thumbs button:hover{opacity:1}
.hg-store .hg-pdp-r440 .jp-photo-thumbs button[aria-pressed=true]{opacity:1;border-color:var(--hg-red);box-shadow:inset 0 0 0 2px var(--hg-white)}
@media (max-width:767px){
  .hg-store .hg-pdp-r440 .jp-photo-thumbs button{flex-basis:60px;width:60px!important;height:60px!important}
}
@media (prefers-reduced-motion:reduce){
  .hg-store .hg-pdp-r440 .jp-photo-thumbs button{transition:none}
}

/* Lead: тот же налёт ::selection темы (hub.css:142, ночью :250 и :298) на фото самих страниц — «выделить всё», долгое нажатие.
   Фото при выделении не красится, текст выделяется как прежде. Второй селектор перекрывает ночные правила темы. */
html body.hg-store img::selection,html[data-theme] body.hg-store img::selection{background:transparent}