/* ══════════════════════════════════════════════════════════
   Мобильный слой: шапка с меню + нижняя панель действий.
   Подключается на всех страницах после основных стилей.
   ══════════════════════════════════════════════════════════ */

html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
/* длинные слова вроде «МЕТАЛЛОПЛАСТИКОВЫЕ» иначе вылезают за экран */
h1,h2,h3,h4,.sum,.spec dd{overflow-wrap:break-word;hyphens:auto}

/* на тач-устройствах ховеры не нужны — они «залипают» после тапа */
@media(hover:none){
  .item:hover{transform:none;box-shadow:none}
  .oth:hover{transform:none}
  .opt:hover{transform:none}
}

/* ── кнопки в шапке ── */
.navact{display:none;align-items:center;gap:6px}
.navact a,.navact button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:50%;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s}
.navact a:active,.navact button:active{background:rgba(37,34,32,.06)}
.navact svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.burger span{display:block;position:relative;width:19px;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .28s,background .18s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .28s,top .2s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:860px){
  .nav .in{display:flex !important;justify-content:space-between;align-items:center;gap:12px}
  .nav .logo{text-align:left !important;flex:1 1 auto}
  .nav .tel,.nav .back{display:none !important}
  .navact{display:flex}
}

/* ── выпадающее меню ── */
.menu{position:fixed;left:0;right:0;top:0;z-index:59;background:var(--milk);
  padding:76px 22px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(-101%);transition:transform .42s cubic-bezier(.22,1,.36,1);
  border-bottom:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(37,34,32,.6);
  max-height:100svh;overflow-y:auto}
.menu.on{transform:none}
@media(min-width:861px){.menu{display:none}}
.menu a.ml{display:block;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:'Tenor Sans',sans-serif;font-size:21px;letter-spacing:.05em;color:var(--ink);text-decoration:none}
.menu a.ml:last-of-type{border-bottom:0}
.menu .mtitle{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--honey);margin:22px 0 10px}
.menu .mphones{display:grid;gap:9px}
.menu .mphones a{font-weight:600;font-size:16px;color:var(--ink);text-decoration:none}
.menu .mwa{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:#22a35c;color:#fff;border-radius:999px;padding:15px 24px;font-weight:600;font-size:14.5px;text-decoration:none}
.menu .mwa svg{width:19px;height:19px;fill:#fff}
.menu .mhours{margin-top:14px;text-align:center;font-size:12.5px;color:var(--soft)}
.mscrim{position:fixed;inset:0;z-index:58;background:rgba(37,34,32,.35);opacity:0;pointer-events:none;transition:opacity .35s}
.mscrim.on{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}

/* ── нижняя панель действий ── */
.mbar{display:none}
@media(max-width:860px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:57;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(248,246,242,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:999px;
    font-weight:600;font-size:14.5px;text-decoration:none;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
  .mbar svg{width:18px;height:18px;flex:0 0 auto}
  .mbar .call{background:var(--honey);color:#fff}
  .mbar .call svg{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mbar .wa{background:#22a35c;color:#fff}
  .mbar .wa svg{fill:#fff}
  .mbar a:active{transform:scale(.98)}
  .fab{display:none}
  body{padding-bottom:78px}
}

/* ── мелочи под палец ── */
@media(max-width:860px){
  .gal .dots{bottom:10px;gap:9px;padding:6px 0}
  .gal .dots i{width:8px;height:8px}
  .gal .dots i.on{width:22px}
  .pill{min-height:44px;padding:11px 16px}
  .col{min-height:56px}
  .item .go,.crumbs a,.menu .mphones a{padding-top:6px;padding-bottom:6px;display:inline-block}
  .final .tels a{padding:6px 0;display:inline-block}
  a,button{-webkit-tap-highlight-color:rgba(185,138,60,.12)}
}

/* ══ главная: герой на телефоне ══ */
@media(max-width:860px){
  .hero{padding:18px 0 0}
  .hero .frame{display:flex;align-items:flex-end;min-height:78svh}
  .hero .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero .veil{background:linear-gradient(180deg,rgba(20,16,10,.10) 0%,rgba(20,16,10,.28) 40%,rgba(20,16,10,.88) 100%)}
  .hero .content{position:relative;width:100%;padding:0 20px 26px}
  .hero .kk{font-size:10px;letter-spacing:.34em}
  .hero h1{margin-top:10px;font-size:clamp(30px,9.4vw,44px);letter-spacing:.04em;line-height:1.1}
  .hero .sub{margin-top:10px;font-size:14.5px;line-height:1.6}
  .hero .cta{margin-top:22px;gap:10px}
  .hero .cta .btn{padding:16px 24px;font-size:14.5px}

  .hero .under{margin-top:16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;
    background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .hero .under span{padding:13px 15px;font-size:12.5px;line-height:1.45;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .hero .under span:nth-child(2n){border-right:0}
  .hero .under span:nth-child(n+3){border-bottom:0}

  .intro{padding-top:56px}
  .intro p{font-size:clamp(19px,5.6vw,25px)}
  .sec{padding-top:56px}
  .calcbar{padding-top:56px}
  .cb{padding:26px 22px}
  .cb .btn{width:100%;text-align:center}
  .final{margin:56px 0 40px}
  .footer{padding-bottom:24px}
}

/* ══ калькулятор: кнопки шага прижаты к низу ══ */
@media(max-width:860px){
  .wz{padding:26px 0 24px}
  .wz-head{margin-bottom:20px}
  .wz-head h1{font-size:clamp(24px,7vw,32px);margin-top:8px}
  .wz-head .d{margin-top:9px;font-size:14px}
  .foot .nb.back[disabled]{display:none}
  body.deep .wz-head{display:none}
  body.deep .wz{padding-top:18px}
  .foot{position:fixed;left:0;right:0;bottom:0;z-index:57;border-top:1px solid var(--line);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(253,252,249,.96);backdrop-filter:blur(12px)}
  .foot .nb{flex:1 1 0;min-height:50px;padding:14px 16px}
  .foot .nb.next{margin-left:0;flex:1.35 1 0}
  .help{margin-bottom:8px}
  /* 16px — иначе iOS зумит страницу при фокусе в поле */
  .st input[type=text],.st input[type=tel],.num{font-size:16px}
  .num{width:92px;padding:10px 12px}
  .rng{height:5px}
  .st h2{font-size:clamp(21px,6.2vw,26px)}
  .stage{padding-bottom:26px}
}
@media(max-width:520px){
  .opt img,.opt .pic{aspect-ratio:16/10}
  .opt .pic svg{max-height:120px}
  .opts.three .opt .tx,.opts.two .opt .tx{padding:13px 16px 15px}
  .res .sum{font-size:clamp(26px,8.5vw,38px)}
  .spec div{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0}
  .spec dd{text-align:left}
}

/* ══ страницы направлений ══ */
@media(max-width:860px){
  .crumbs{padding-top:20px;font-size:12px}
  .phead{padding:20px 0 24px}
  .phead h1{font-size:clamp(21px,6vw,32px);letter-spacing:.03em;hyphens:none}
  .phead .lead{font-size:15.5px}
  .phead .cta .btn{width:100%;text-align:center}
  .body{padding-top:34px}
  .feats,.gal2,.uses,.cls,.more{margin-top:40px}
  .lets{grid-template-columns:1fr;gap:10px}
  .lets div{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px}
  .lets b{font-size:27px;line-height:1.05}
  .lets p{margin-top:0}
  .ft{padding:20px 20px}
  .strip{gap:10px}
  .final{margin-top:48px}
  .footer{margin-top:44px}
}