.callbar{ display:none; }
@media(max-width:700px){
  .callbar{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--accent); color:#fff; text-align:center; text-decoration:none;
    font-size:16px; font-weight:500; padding:15px 12px;
    padding-bottom:calc(15px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 20px rgba(20,26,34,.18); }
  footer{ padding-bottom:86px; }
}
/* Заголовок первого экрана. При прежнем тексте «Магазин, склад и
   жильё» 46 пикселей помещались, при новом «Ваше представительство»
   длинное слово вылезало за правый край: на 390 px его обрезало на
   «представительств». Уменьшаем кегль и разрешаем перенос — слово
   не должно молча уезжать из кадра. */
@media(max-width:520px){
  .hero h1{ font-size:clamp(30px,8.6vw,42px); letter-spacing:-1px;
    overflow-wrap:break-word; hyphens:manual; }
}
@media(max-width:430px){ .brand .bt .s{ display:none; } }
/* Логотип возвращает наверх — замечание владельца 04.09. На странице
   один экран содержания, поэтому уводим не на «/», а к первому
   экрану: одностраничнику некуда возвращаться, кроме своего верха. */
.brand-home{ text-decoration:none; color:inherit; display:block; }
.brand-home:hover .brand .n{ color:var(--accent); }

.guide-pop{ position:fixed; inset:0; z-index:120; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(10,16,24,.62); }
.guide-pop[hidden]{ display:none; }
.guide-box{ position:relative; width:100%; max-width:440px;
  padding:34px 30px 28px; background:#fff; border-radius:14px;
  box-shadow:0 30px 80px rgba(10,16,24,.35); }
.guide-box h3{ margin:0 0 12px; font-size:23px; line-height:1.25; }
.guide-lead{ margin:0 0 20px; font-size:15px; line-height:1.6; color:#4a5561; }
.guide-form{ display:flex; gap:10px; flex-wrap:wrap; }
.guide-form input{ flex:1 1 200px; padding:13px 14px; font-size:16px;
  border:1px solid #d5dbe2; border-radius:8px; }
.guide-form button{ padding:13px 20px; font-size:16px; border:0;
  cursor:pointer; border-radius:8px; background:var(--accent); color:#fff; }
.guide-note{ margin:14px 0 0; font-size:13px; color:#7b8794; }
.guide-done{ margin:16px 0 0; font-size:16px; color:#1c7c4a; }
/* Крестик крупный: в мелкий на телефоне не попасть. */
.guide-x{ position:absolute; top:8px; right:8px; width:48px; height:48px;
  border:0; background:none; cursor:pointer; }
.guide-x::before, .guide-x::after{ content:''; position:absolute;
  left:15px; top:23px; width:18px; height:2px; background:#8a95a1; }
.guide-x::before{ transform:rotate(45deg); }
.guide-x::after{ transform:rotate(-45deg); }

.lb{ position:fixed; inset:0; z-index:130; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(10,16,24,.9); cursor:zoom-out; }
.lb[hidden]{ display:none; }
.lb img{ max-width:min(100%, 900px); max-height:min(100%, 600px);
  border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
/* Крестик крупный: пальцем по маленькому не попасть. */
.lb-x{ position:absolute; top:14px; right:14px; width:48px; height:48px;
  border:0; background:none; cursor:pointer; }
.lb-x::before, .lb-x::after{ content:''; position:absolute; left:13px;
  top:23px; width:22px; height:2px; background:#fff; opacity:.85; }
.lb-x::before{ transform:rotate(45deg); }
.lb-x::after{ transform:rotate(-45deg); }
/* Стрелки листания. Просьба владельца 07.09: открыв кадр, человек
   хочет посмотреть следующий, а не закрывать и целиться в плитку. */
.lb-nav{ position:absolute; top:50%; margin-top:-28px; width:56px;
  height:56px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); transition:background .2s; }
.lb-nav:hover{ background:rgba(255,255,255,.24); }
.lb-nav::before{ content:''; position:absolute; top:20px; width:14px;
  height:14px; border:2px solid #fff; border-width:2px 2px 0 0;
  opacity:.9; }
.lb-prev{ left:16px; }
.lb-prev::before{ left:23px; transform:rotate(-135deg); }
.lb-next{ right:16px; }
.lb-next::before{ right:23px; transform:rotate(45deg); }
/* На телефоне кнопки уже, чтобы не наезжать на сам кадр. */
@media(max-width:700px){
  .lb-nav{ width:44px; height:44px; margin-top:-22px; }
  .lb-nav::before{ top:15px; width:12px; height:12px; }
  .lb-prev{ left:6px; } .lb-prev::before{ left:17px; }
  .lb-next{ right:6px; } .lb-next::before{ right:17px; }
}
/* Курсор-лупа только там, где увеличение работает. */
#gal .gcard{ cursor:zoom-in; }