/* Галерея автомобиля и просмотр фотографии поверх страницы.
   Файл подключается после design.css и только на странице автомобиля, поэтому правила
   начинаются с классов галереи — светлая тема сайта их не перекрашивает. */
.car-gallery{min-width:0}
/* Кадр одинаковый у всех автомобилей и не зависит от того, какую фотографию загрузили
   первой. Подстраивается сама фотография: она вписывается целиком, без обрезки. */
.car-gallery .gallery-frame{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--surface-2)}
.car-gallery .gallery-frame .badge{position:absolute;left:14px;top:14px;z-index:3}
.car-gallery .gallery-track{width:100%;height:100%;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.car-gallery .gallery-track::-webkit-scrollbar{display:none}
.car-gallery .gallery-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in}
.car-gallery .gallery-slide img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.car-gallery .gallery-counter{position:absolute;right:12px;bottom:12px;z-index:3;margin:0;padding:5px 10px;border-radius:8px;background:#0b111b99;color:#fff;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px)}
.car-gallery .gallery-step{display:none;position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:#0b111bb3;color:#fff;place-items:center;cursor:pointer;transition:background .15s,opacity .15s;backdrop-filter:blur(6px)}
.car-gallery .gallery-step:hover{background:#0b111be6}
.car-gallery .gallery-step:disabled{opacity:.25;cursor:default}
.car-gallery .gallery-step svg{width:19px}
.car-gallery .gallery-prev{left:12px;transform:rotate(180deg)}
.car-gallery .gallery-next{right:12px}
.car-gallery .gallery-thumbs{display:flex;gap:8px;margin-top:10px;padding:2px;overflow-x:auto;scrollbar-width:thin}
.car-gallery .gallery-thumbs button{flex:none;width:88px;height:62px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#0b111b;opacity:.55;transition:opacity .15s,box-shadow .15s;cursor:pointer}
.car-gallery .gallery-thumbs button.active{opacity:1;box-shadow:0 0 0 2px var(--red)}
.car-gallery .gallery-thumbs button:hover{opacity:1}
.car-gallery .gallery-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover) and (pointer:fine){.car-gallery .gallery-step{display:grid}}
@media(max-width:720px){
 .car-gallery .gallery-frame{border-radius:14px}
 .car-gallery .gallery-thumbs button{width:70px;height:50px}
}

/* Просмотр фотографии: страница остаётся видна, но уходит в размытие. */
body.photos-open{overflow:hidden}
.photos{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#070d16bf;color:#fff;overflow:hidden;backdrop-filter:blur(22px) saturate(115%);-webkit-backdrop-filter:blur(22px) saturate(115%);color-scheme:dark}
.photos::backdrop{background:#070d1633}
.photos .photos-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.photos .photos-track::-webkit-scrollbar{display:none}
.photos .photos-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;padding:56px 16px 72px}
.photos .photos-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px #00000073;-webkit-user-drag:none}
.photos .photos-close{position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;border:0;border-radius:12px;background:#ffffff1f;color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.photos .photos-close:hover{background:#ffffff33}
.photos .photos-close svg{width:20px}
.photos .photos-counter{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;margin:0;padding:7px 14px;border-radius:10px;background:#0b111b8c;font-size:13px;line-height:1;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px)}
.photos .photos-step{display:none;position:absolute;top:50%;z-index:5;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;background:#ffffff1f;color:#fff;place-items:center;cursor:pointer;transition:background .15s,opacity .15s;backdrop-filter:blur(6px)}
.photos .photos-step:hover{background:#ffffff33}
.photos .photos-step:disabled{opacity:.25;cursor:default}
.photos .photos-step svg{width:22px}
.photos .photos-prev{left:24px;transform:rotate(180deg)}
.photos .photos-next{right:24px}
@media (hover:hover) and (pointer:fine){.photos .photos-step{display:grid}}
.photos.is-single .photos-step,.photos.is-single .photos-counter{display:none}
@media(max-width:720px){
 .photos .photos-slide{padding:64px 10px 64px}
 .photos .photos-slide img{border-radius:10px}
}
@media(prefers-reduced-motion:reduce){.car-gallery .gallery-step,.photos .photos-step{transition:none}}