/* ============================================================
   05-responsive — брейкпоинты 1200 / 992 / 768 / 560
   ============================================================ */

@media (max-width:1280px){
  .container{padding-left:20px;padding-right:20px}
}

@media (max-width:1200px){
  .features{grid-template-columns:repeat(3,1fr)}
  .works{grid-template-columns:repeat(3,1fr)}
  .cities__grid{grid-template-columns:repeat(3,1fr)}
  .nav__link{font-size:14px}
  .nav{gap:16px}
  .hero__in{gap:36px}
}

@media (max-width:992px){
  :root{--head-h:64px}
  .nav,.header__tools .btn--primary,.headphone__note{display:none}
  .burger{display:grid}
  .topbar__links{display:none}

  /* --- Шапка на планшете/мобильном ------------------------------------
     Раньше логотип, кнопка города, телефон, две иконки и бургер не влезали
     в ширину экрана: телефон обрезался, а бургер уезжал за правый край.
     Логотип теперь сжимаемый, блок инструментов — нет, поэтому бургер
     всегда остаётся в кадре. */
  .header__in{gap:12px;flex-wrap:nowrap}
  .logo{flex:0 1 auto;min-width:0;overflow:hidden}
  .logo__txt{min-width:0}
  .logo__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header__tools{gap:8px;flex:0 0 auto}
  .citybtn{max-width:150px}
  .citybtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .hero__in{grid-template-columns:1fr;gap:32px}
  .hero h1{max-width:none}
  .stockcard{animation:none}
  .hero__metrics{grid-template-columns:repeat(4,1fr);gap:12px}

  .promos{grid-template-columns:1fr;margin-top:-26px}
  .tasks{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .quality,.conds,.infogrid,.sgrid,.bloggrid,.reviews{grid-template-columns:repeat(2,1fr)}
  .works{grid-template-columns:repeat(2,1fr)}
  .quiz__in{grid-template-columns:1fr}
  .delivery__grid{grid-template-columns:1fr;gap:28px}
  .cta__in{grid-template-columns:1fr;gap:28px}
  .product{grid-template-columns:1fr}
  .service__top{grid-template-columns:1fr}
  .service__box{position:static}
  .cart__grid{grid-template-columns:1fr}
  .cartsum{position:static}
  .contacts__grid{grid-template-columns:1fr;gap:28px}
  .counters{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:repeat(2,1fr);gap:28px}
  .rating__row{grid-template-columns:1.3fr repeat(4,1fr);gap:10px;padding:14px}
  .rating__name{font-size:14px}
  .rating__name img{display:none}
}

@media (max-width:768px){
  body{padding-bottom:64px}
  .stickybar{display:grid}
  .totop{bottom:78px}
  .topbar{display:none}

  section,.section{padding:clamp(32px,6vw,48px) 0}
  h1{font-size:clamp(26px,6.4vw,34px)}
  h2{font-size:clamp(22px,5.2vw,28px)}

  .hero__metrics{grid-template-columns:repeat(2,1fr);gap:16px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}

  .tasks,.pgrid,.quality,.conds,.infogrid,.sgrid,.bloggrid,.reviews,.works,.akcii{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,1fr)}
  .cities__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr;gap:22px}
  .footer__col--collapse .footer__list{display:none}
  .footer__col--collapse.is-open .footer__list{display:flex}
  .footer__title{cursor:pointer;display:flex;justify-content:space-between;align-items:center}

  .quiz__opts{grid-template-columns:1fr}
  .quiz__form{grid-template-columns:1fr}
  .qv{grid-template-columns:1fr}
  .guarantees{grid-template-columns:1fr;gap:10px}
  .pricebox__btns{grid-template-columns:1fr}
  .scores{grid-template-columns:1fr}
  .gallery__thumbs{grid-template-columns:repeat(3,1fr);gap:8px}

  .rating__table{border:none;background:none}
  .rating__row--head{display:none}
  .rating__row{grid-template-columns:1fr 1fr;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;padding:16px}
  .rating__name{grid-column:1/-1}
  .rating__name img{display:block}

  .sprice__row{grid-template-columns:1fr;gap:8px;align-items:flex-start}
  .cartitem{grid-template-columns:72px 1fr;gap:12px}
  .cartitem__img{width:72px;height:60px}
  .cartitem__right{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}

  .catalog__bar{position:static;padding:0;border:none;background:none;backdrop-filter:none}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-row::-webkit-scrollbar{display:none}
  .filter-row__lbl{display:none}
  .filter-row .chip{white-space:nowrap;flex:0 0 auto}
  .scats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;scrollbar-width:none}
  .scats::-webkit-scrollbar{display:none}
  .scats .chip{white-space:nowrap;flex:0 0 auto}

  .step{flex-direction:column;gap:12px}
  .article__body{font-size:15.5px}
  .modal__win{max-height:88vh}
}

@media (max-width:560px){
  .container{padding-left:16px;padding-right:16px}
  .features{grid-template-columns:1fr}
  .cities__grid{grid-template-columns:1fr}
  .counters{grid-template-columns:1fr;gap:16px}
  .hero__metrics{grid-template-columns:1fr 1fr;gap:14px}
  .logo__name{font-size:15.5px}
  .logo__sub{display:none}

  /* --- Шапка на телефоне ----------------------------------------------
     Освобождаем место под бургер: текстовый телефон и иконки MAX/корзины
     убираем — все три действия продублированы в нижней панели (stickybar)
     и в меню-шторке, поэтому доступность не страдает.
     Кнопка города сокращается до названия без стрелки. */
  .header__in{gap:10px}
  .header__tools{gap:6px}
  .headphone{display:none}
  .header__tools .iconbtn--max{display:none}
  .citybtn{max-width:none;padding:7px 10px;font-size:13px;gap:5px}
  .citybtn .i--sm{display:none}
  .citybtn span{max-width:96px}
  .logo__mark{width:38px;height:38px;flex:0 0 38px}
  .logo__mark svg{width:21px;height:21px}
  .logo{gap:9px}
  .burger{width:40px;height:40px;flex:0 0 40px}
  .iconbtn{width:40px;height:40px;flex:0 0 40px}

  /* Верхняя тёмная строка: адрес склада длинный и переносился в три
     строки, поэтому на телефоне оставляем только режим работы и телефон. */
  .topbar__in{gap:10px;justify-content:center}
  .topbar__l{display:none}
  .topbar__r{gap:14px;justify-content:center;flex-wrap:wrap}
  .topbar{font-size:12px}
}

/* Узкие телефоны (iPhone SE, 360-390px): у городов с длинными названиями
   вроде «Петропавловск-Камчатский» кнопка распирала шапку и выдавливала
   бургер. Ограничиваем название и ужимаем отступы. */
@media (max-width:400px){
  .citybtn span{max-width:74px}
  .citybtn{padding:7px 8px}
  .logo__name{font-size:14.5px}
  .header__in{gap:8px}
  .drawer__panel{width:100%;max-width:100%}
  .pricebox{padding:18px}
  .cta__form{padding:20px}
  .review{padding:19px}
  .gallery__thumbs{grid-template-columns:repeat(3,1fr)}
  .promo,.infocard,.ccard{padding:18px}
  .akcia{padding:22px}
  .pcard__price{font-size:21px}
}

/* Печать */
@media print{
  .topbar,.header,.stickybar,.totop,.drawer,.modal,.quiz,.cta,.footer__bottom{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .section{padding:12px 0}
  a{color:#000;text-decoration:underline}
}