/* ==========================================================
   Мобильная версия (подключается с media="(max-width:900px)" — десктоп не затрагивает)
   ========================================================== */

/* Нижний таббар убран: он дублировал шапку (логотип, «Магазин», меню) и закрывал текст */
.tabbar{display:none!important}
body{padding-bottom:0}
.mmenu{padding-bottom:60px}

/* вместо таббара — компактная кнопка «наверх» с кольцом прогресса */
.totop{display:grid;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:48px;height:48px}
body:has(.cookie:not([hidden])) .totop{bottom:calc(84px + env(safe-area-inset-bottom))}

@media (max-width:640px){
  /* ---------- карусели вместо колонок карточек ---------- */
  .values,#posts,.bento,.steps,.posts--rail{
    display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    margin-inline:calc(-1 * var(--gut));padding:6px var(--gut) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .values::-webkit-scrollbar,#posts::-webkit-scrollbar,.bento::-webkit-scrollbar,.steps::-webkit-scrollbar,.posts--rail::-webkit-scrollbar{display:none}
  .values > *,#posts > *,.bento > *,.steps > *,.posts--rail > *{flex:0 0 84%;min-width:0;scroll-snap-align:start}
  #posts > .is-out{display:none}
  .card:hover{transform:none} /* на тач-экране подъём карточки только мешает свайпу */
  .steps{margin-bottom:0}
  .bento .tile--big{grid-row:auto}

  /* разделы и бренды магазина — лентой со свайпом, а не столбиком на пол-экрана */
  .shop__cats,.shop__brands{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * clamp(26px,4.5vw,60px));padding:2px clamp(26px,4.5vw,60px) 4px}
  .shop__cats::-webkit-scrollbar,.shop__brands::-webkit-scrollbar{display:none}
  .shop__cats li,.shop__brands li{flex:none;white-space:nowrap}
  .shop__in > *{min-width:0} /* иначе лента растягивает колонку и всю страницу */
  .shop__cats{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);justify-content:start}

  /* точки-индикаторы под каруселью */
  .rail-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
  .rail-dots button{width:7px;height:7px;padding:0;border-radius:99px;background:var(--line2);transition:width .35s var(--ease),background .35s}
  .rail-dots button[aria-current]{width:22px;background:var(--y);box-shadow:0 0 10px rgba(254,216,80,.45)}
}

/* панель фильтров и поиска в блоге не шире экрана (лента фильтров прокручивается сама) */
.toolbar > *{min-width:0}

/* узкие телефоны (360–400px): шапка, кнопка магазина */
@media (max-width:400px){
  .nav__inner{gap:10px}
  .shop__copy .btn{max-width:100%;white-space:normal;justify-content:center;text-align:center}
}