/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ. Подключается ПОСЛЕДНИМ, каждое правило внутри @media (max-width:…).
   Десктоп (>820px) этот файл не затрагивает вообще.
   Шаги:  1 — шапка (готово) · 2 — главная (готово) · 3 — футер и корзина (готово) · 4 — вход/регистрация (готово)
   ============================================================ */

/* ---------- ШАГ 1. ШАПКА ---------- */
@media (max-width:820px){
  .hd-wrap{padding:0 14px}

  /* верхняя тонкая строка: УКР · город · Допомога */
  .hd-top{height:44px;gap:8px}
  .hd-chips{gap:8px;min-width:0}
  .hd .hd-chip{height:28px;padding:0 11px;font-size:12px}
  .hd-top .hd-links{gap:0;flex-shrink:0}
  .hd .hd-help{font-size:12.5px;gap:6px}
  .hd-help .ic{font-size:17px}
  .hd-citylist{width:min(260px,calc(100vw - 28px))}

  /* основная область: 2 ряда — [лого … иконки] и [каталог + поиск] */
  .hd-main{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo logo act" "cat search search";
    align-items:center;gap:12px 8px;padding-top:6px;padding-bottom:14px}
  .hd-logo{grid-area:logo;margin:0;gap:9px;min-width:0}
  .hd-logo img{width:38px;height:38px}
  .hd-logo b{font-size:25px;letter-spacing:-.8px}
  .hd-logo small{display:block;font-size:10px;margin-top:2px}
  .hd-actions{grid-area:act;justify-self:end;margin:0;gap:0}

  /* иконки действий: компактные, все видны (профиль, обране, повідомлення, кошик) */
  .hd .hd-actions .hd-act,
  .hd .hd-actions .hd-act:nth-child(n+3){display:flex}
  .hd .hd-act{min-width:42px;width:42px;height:44px;padding:0;border-radius:12px}
  .hd-act .ic{font-size:23px}
  .hd .hd-act--boxed{width:auto;min-width:44px;padding:0 9px;flex-direction:row;gap:7px}
  .hd-act--boxed span:not(.hd-ava){display:none}
  .hd-ntf{position:static}
  .hd-ntf__btn{position:relative}
  .hd .hd-cart{height:44px;margin-left:6px;padding:0 13px;border-width:2px;border-radius:12px}
  .hd-cart .ic{font-size:22px}
  .hd-cart b{top:-8px;right:-8px;min-width:20px;height:20px;font-size:11px}

  /* каталог + поиск в одном ряду */
  .hd-cat{grid-area:cat}
  .hd .hd-cat__btn{height:48px;padding:0 12px 0 14px;font-size:15px;gap:8px;border-radius:12px}
  .hd-cat__btn .ic{font-size:20px}
  .hd-cat__btn .hd-cat__arrow{display:none}
  .hd-search{grid-area:search;order:0;height:48px;border-radius:12px;min-width:0}
  .hd-search input{padding:0 14px;font-size:16px}  /* 16px — чтобы iOS не зумил при фокусе */
  .hd .hd-find{padding:0 15px}
  .hd-find .ic{font-size:20px}

  /* выпадающий каталог: на всю ширину экрана, удобные крупные строки */
  .hd-main{position:relative}
  .hd-cat{position:static}
  .hd-catalog{position:absolute;left:14px;right:14px;top:calc(100% - 6px);width:auto;max-height:calc(100vh - 170px);overflow:auto}
  .hd-catalog a{padding:10px 12px;font-size:15px}
  .hd-catalog .hd-catalog__go{opacity:.6;transform:none}
}

/* телефоны (≤480px): «Каталог» — квадратная иконка-сетка, поиск получает всё место */
@media (max-width:480px){
  .hd .hd-cat__btn{width:48px;padding:0;justify-content:center;font-size:0;gap:0}
  .hd-cat__btn .ic{font-size:24px}
}

/* совсем узкие телефоны (≤380px): чуть плотнее */
@media (max-width:380px){
  .hd-wrap{padding:0 12px}
  .hd-logo b{font-size:22px}
  .hd-logo img{width:34px;height:34px}
  .hd-logo small{display:none}
  .hd .hd-act{min-width:38px;width:38px}
  .hd .hd-cart{padding:0 11px}
}

/* ≤340px (старые/маленькие телефоны) */
@media (max-width:340px){
  .hd-wrap{padding:0 10px}
  .hd-logo{gap:6px}.hd-logo img{width:30px;height:30px}.hd-logo b{font-size:19px}
  .hd .hd-act{min-width:34px;width:34px}
  .hd .hd-act--boxed{min-width:38px;padding:0 6px}
  .hd .hd-cart{margin-left:2px;padding:0 9px}
  .hd-top .hd-chip{padding:0 9px}
}


/* ---------- ШАГ 2. ГЛАВНАЯ ---------- */
@media (max-width:820px){
  .hm{gap:32px;padding-bottom:48px}
  .hm-top{gap:12px}

  /* слайдер: чуть ниже, без пустоты сверху */
  .hm-slider{height:400px}
  .hm-dots{bottom:16px}

  /* плитки справа: 2 в ряд, компактные (последняя нечётная — на всю ширину) */
  .hm-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .hm-tile{min-height:128px;padding:16px;justify-content:flex-start}
  .hm-tile .ic{position:static;flex-shrink:0;width:30px;height:30px;font-size:30px;margin-bottom:auto;padding-bottom:0}
  .hm-tile b{margin-top:10px}
  .hm-tile b{font-size:18px}
  .hm-tile span{font-size:13px}
  .hm-tile--free span{font-size:14px}
  .hm-tiles>:last-child:nth-child(odd){grid-column:1/-1}
  .hm-tile--promo code{font-size:22px;padding:5px 12px}

  /* полоса преимуществ: колонки не распирают экран */
  .hm-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-strip li{padding:14px 12px;gap:10px}
  .hm-strip .ic{width:26px;height:26px;font-size:26px}

  /* заголовки секций: компактнее */
  .hm-head{gap:8px 16px;margin-bottom:16px}

  /* вкладки: одна строка с горизонтальной прокруткой, а не перенос на 2–3 строки */
  .hm-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px;width:calc(100% + 28px)}
  .hm-tabs::-webkit-scrollbar{display:none}
  .hm-tab{flex:0 0 auto;padding:9px 16px;white-space:nowrap}

  /* ряды-карусели: подглядывание следующей карточки + выход к краю экрана */
  .hm-row{grid-auto-columns:calc((100% - 10px) / 2.2);margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;scroll-padding-left:14px}
  .hm-sale .hm-row{margin-left:-14px;margin-right:-14px}
  .hm-row>.pc:last-child{margin-right:0}

  /* карточка товара: ровнее на узкой колонке */
  .pc__name{font-size:13px}
  .pc__foot{gap:6px}
  .pc .add{width:42px;height:36px}
  .pc__stock{font-size:12px}

  /* баннеры и сценарии */
  .hm-bn{padding:22px 18px}
  .hm-sc{min-height:170px}
}
@media (max-width:360px){
  .hm-strip{grid-template-columns:minmax(0,1fr)}
  .hm-strip li:nth-child(n+2){border-left:0;border-top:1px solid var(--line)}
  .hm-tiles{grid-template-columns:minmax(0,1fr)}
  .hm-scen{grid-template-columns:minmax(0,1fr)}
}


/* ---------- ШАГ 3. ФУТЕР ---------- */
@media (max-width:820px){
  .ft{margin-top:40px}
  .ft-perks{gap:16px;padding-top:22px;padding-bottom:22px}
  .ft-perk{gap:14px}
  .ft-perk__ico{width:42px;height:42px;border-radius:12px}
  .ft-perk__ico .ic{font-size:22px}
  .ft-perk b{font-size:15px;margin-bottom:2px}
  .ft-main{gap:28px 16px;padding-top:28px;padding-bottom:28px}
  .ft-sub{min-height:0;padding:20px 18px 20px}
  .ft h4{margin-bottom:8px}
  /* ссылки: удобные для пальца зоны нажатия (~44px) */
  .ft-col:not(.ft-contacts) li+li{margin-top:0}
  .ft-col:not(.ft-contacts) li a{display:block;padding:11px 0}
  .ft-col:not(.ft-contacts) li a:hover{padding-left:0}
  .ft-phone{font-size:22px;padding:4px 0}
  .ft-mail,.ft-hours{margin-top:8px}
  .ft-msg a{padding:4px 0}
  .ft-cats{padding-top:22px;padding-bottom:22px}
  .ft-chip{height:38px}
  .ft-bottom{padding-top:18px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .ft-up{width:44px;height:44px}
}
/* до 480px оставляем 2 колонки ссылок (в одну колонку футер получался слишком длинным) */
@media (max-width:480px){.ft-main{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-sub{grid-column:1/-1}}
@media (max-width:340px){.ft-main{grid-template-columns:minmax(0,1fr)}}

/* ---------- ШАГ 3. КОРЗИНА ---------- */
@media (max-width:720px){
  /* панель мини-корзины: компактнее, меньше места под подвал */
  .cd__head{padding:16px 16px 14px}
  .cd__head h2{font-size:24px}
  .cd__head .cm__x{right:12px}
  .cd__free{padding:10px 16px}
  .cd__body{padding:0 16px}
  .dl{grid-template-columns:68px 1fr;gap:12px;padding:14px 0}
  .dl__img{width:68px;height:68px}
  .cd__foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));gap:8px}
  .cd__sum{gap:4px;margin-bottom:2px;font-size:13px}
  .cd__total{margin-top:4px;padding-top:8px}
  .cd__total dd{font-size:21px}
  .cd__foot .btn-y,.cd__foot .btn-o{height:46px;font-size:15px}

  /* «Додано в кошик»: кнопки не сплющиваются (в колонке нужен flex:none) */
  .ad{padding:22px 16px 18px}
  .ad__btns>*{flex:none;width:100%;height:48px}
  .ad h2{font-size:24px}
  .cf{padding:22px 18px}
  .cf__btns{flex-direction:column}
  .cf__btns>*{flex:none;width:100%;height:48px}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom))}

  /* страница кошика */
  .cp{padding-top:14px;padding-bottom:40px}
  .cp-head{margin-bottom:14px;gap:12px}
  .cp-head h1{font-size:24px}
  .cp-back{width:40px;height:40px}
  .cp-bar{padding:4px 14px}
  .cp-eta{padding:10px 14px;font-size:13px;gap:8px;align-items:flex-start}
  .cp-eta .ic{margin-top:1px}
  .cp-row{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:14px}
  .cp-row__img{width:76px;height:76px}
  .cp-row__name{font-size:15px}
  .cp-row__acts{margin-top:8px;gap:2px 18px}
  .cp-row__price{font-size:20px;text-align:left}
  .cp-side{padding:16px;gap:14px}
  .sum__total dd{font-size:26px}
  .rec{margin-top:28px}
  .rec h2{font-size:24px}
  .cp-empty{padding:36px 16px 40px}
  .cp-empty img{width:150px;height:auto}
  .cp-empty h2{font-size:24px}
  .cp-empty .btn-y{width:100%}
}


/* ---------- ШАГ 4. ВХОД / РЕГИСТРАЦИЯ ---------- */
@media (max-width:780px){
  .am__dialog{max-height:94vh;max-height:94dvh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .am__side{flex:0 0 118px}
  .am__mascot{object-position:50% 17%}
  .am__brand{top:12px}
  .am__main{padding:16px 18px calc(20px + env(safe-area-inset-bottom))}
  .am__tabs{margin-bottom:16px}
  .am__tabs button{height:44px}
  .am__title{font-size:23px}
  .am__sub{margin:6px 0 14px;font-size:14px}
  .am__form{gap:12px}
  .amf__box input{height:50px}
  .amf__eye{width:44px;height:44px;right:3px}
  .am__btn{height:52px;font-size:16px}
  .am__opt{height:44px}
  .am__close{width:44px;height:44px;top:6px;right:6px}
  .am__alt{margin-top:0}
  .am__alt button{padding:8px 6px}
}
/* низкие экраны (альбомная ориентация, маленькие телефоны): баннер убираем — форма важнее */
@media (max-width:780px) and (max-height:640px){
  .am__side{flex-basis:56px}
  .am__mascot{display:none}
}

/* невысокие широкие экраны (телефон в альбомной ориентации): окно не должно быть выше экрана */
@media (min-width:781px) and (max-height:700px){
  .am{padding:8px}
  .am__dialog{min-height:0;height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:none}
  .am__main{padding:20px 28px 20px}
  .am__tabs{margin-bottom:14px}
  .am__sub{margin-bottom:12px}
  .am__form{gap:10px}
  .amf__box input{height:46px}
  .am__btn{height:48px}
}