/* ============================================================
   EKKSO — мобильный polish-слой (344px → 690px)
   Диапазон: Galaxy Z Fold (сложен, 344) → iPhone 13–17 PM
   (390–440) → разложенный фолд (~690 = планшетная раскладка).
   Подключается ПОСЛЕ ekkso.css и ekkso-hero.css.
   ============================================================ */

/* ── Очень узкие экраны (фолд в сложенном виде, 344–374) ── */
@media(max-width:374px){
  .wrap{padding-left:16px;padding-right:16px}
  .h2{font-size:24px}
  .trust-grid{gap:14px 12px}
  .trust-item{gap:10px}
  .trust-item b{font-size:13px}
  .trust-item span{font-size:11.5px}
  .guarantee{gap:12px}
  .guarantee .g-item{gap:10px}
  .btn{padding:12px 18px;font-size:13.5px}
  .slide-text h2{font-size:24px}
  .slide-text p{font-size:14px}
  .ss-container{--button-width:1.5rem;--panel-padding:18px}
  .sp-card{padding:22px 18px}
}

/* ── Все телефоны (до 560) ── */
@media(max-width:560px){
  /* компактнее вертикальный ритм между разделами (было 64px → 128px зазор) */
  .section{padding:32px 0}
  .section--tight{padding:26px 0}
  /* безопасная зона под таб-баром (iPhone home indicator) */
  .tabbar{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  /* hit-targets ≥44px */
  .tab{min-height:48px}
  .icon-btn{min-width:44px;min-height:44px}
  .acc-head{min-height:48px}
  /* плавность горизонтальных лент */
  .goal-chips,.cat-toolbar{scroll-padding-left:16px}
}

/* ── Планшетная раскладка: разложенный фолд / узкий планшет (640–1023) ──
   Раньше планшетные правила включались с 768px — разложенный фолд (690)
   получал телефонную одну колонку. Сдвигаем порог на 640. */
@media(min-width:640px) and (max-width:1023px){
  .trust-grid{grid-template-columns:repeat(4,1fr);gap:16px 14px}
  .worlds-grid{grid-template-columns:repeat(3,1fr)}
  .worlds-grid .world{min-height:320px}
  .sci-grid{grid-template-columns:repeat(3,1fr)}
  .rev-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zkk{grid-template-columns:repeat(3,1fr)}
  .ls-grid{grid-template-columns:1fr 1fr}
  .ls{min-height:340px}
  .qual-points{grid-template-columns:1fr 1fr}
  .guarantee{grid-template-columns:repeat(4,1fr);gap:16px 14px}
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:32px 24px}
  .foot-grid .foot-col:first-child{grid-column:1/-1}
  .gp-grid{grid-template-columns:1fr 1fr}
  /* журнал: 2 колонки уже с 640 (база), оставляем */
}

/* ── Продукт месяца на телефоне: заголовок компактнее ── */
@media(max-width:560px){
  #hero-product .h2{font-size:26px}
}

/* ── Отзывы на телефоне: горизонтальная лента со свайпом (экономит место) ── */
@media(max-width:560px){
  .proof .rev-grid{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;margin-left:-20px;margin-right:-20px;
    padding:4px 20px 16px;scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .proof .rev-grid::-webkit-scrollbar{display:none}
  .proof .rev-grid .review{flex:0 0 84%;min-width:0;scroll-snap-align:start}
}

/* ── Журнал на телефоне: карточки статей горизонтальной лентой со свайпом ── */
@media(max-width:560px){
  #journal .art-grid{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;margin-left:-20px;margin-right:-20px;
    padding:4px 20px 16px;scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #journal .art-grid::-webkit-scrollbar{display:none}
  #journal .art-grid .art{flex:0 0 78%;min-width:0;scroll-snap-align:start}
}

/* ── Футер: копирайт прижат к нижнему бару (без огромного пустого низа) ── */
@media(max-width:1023px){
  .footer>.wrap{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
}

/* ── Качество: плашки-бейджи в один ряд с пролистыванием (как чипы подбора) ── */
@media(max-width:1023px){
  .about-split>*{min-width:0}
  .badges{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;
    scroll-padding-left:20px}
  .badges::-webkit-scrollbar{display:none}
  .badges .pbadge{flex:none;white-space:nowrap}
}