/* =====================================================================
   Мобильный подвал (≤767px): логотип, три секции-аккордеона «Каталог /
   Покупателям / Компания», телефоны, знаки оплаты, реквизиты.
   Файл грузится после site-hf.css и site.css. Разметка подвала не
   переставлена — порядок задаётся через order, сами колонки .ft-col те же,
   что и на десктопе. Кнопки-заголовки .ft-acc и ряд .ft-pay есть в разметке
   всегда, но на широком экране спрятаны правилом ниже.
   На телефоне единицы --u упираются в минимум, поэтому здесь явные px.
   ===================================================================== */

/* десктоп: спрятать — заголовки аккордеона и знаки оплаты живут только в
   мобильной раскладке; без этого правила они вставали бы в сетку подвала
   и сдвигали колонки. Специфичность (0,2,0) ниже мобильных правил (0,3,0). */
.site-foot .ft-acc,
.site-foot .ft-pay{display:none}

/* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок
   (ширина до планшетной, высота меньше 520px — у планшета в альбоме
   высота 768 и больше, он сюда не попадает). Условие одно и то же
   во всех файлах mobile/ и в их скриптах — менять только всё сразу. */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){
  /* Отступ сверху меньше десктопных 64px — на телефоне секции идут плотнее.
     Низ ≥24px; место под фиксированную нижнюю панель добавляет body. */
  footer.site-foot{margin-top:48px;padding-bottom:28px}

  /* Сетка из пяти колонок → колонка. Порядок блоков — через order,
     разметка та же. Отступы по краям 16px, как у контейнера .mac.
     gap:0 — от десктопной сетки остаётся gap:26px (≤1200px) и gap:22px
     (≤700px); во flex он работает так же и раздвигал бы строки аккордеона,
     отрывая заголовок от его колонки и подвешивая линии border-top.
     align-items:stretch — в базовом правиле .ft-in стоит align-items:start,
     и после смены display на flex-column оно сжимало бы .ft-tel и .ft-col
     до ширины содержимого: линия под последней секцией шла бы только под
     номером телефона, а строки ссылок перестали бы быть тапабельными во всю
     ширину. Селектор (0,2,0) перебивает .ft-in (0,1,0). */
  .site-foot .ft-in{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:44px 16px 0}

  /* Логотип по левому краю; исходник 223×128, при высоте 40px ширина ≈70px.
     Перебиваем .ft-logo img{width:160px} из site.css (0,1,1). */
  .site-foot .ft-logo{order:0;margin-bottom:20px}
  .site-foot .ft-logo img{width:auto;height:40px}

  /* Порядок секций как в задании: Каталог (c2) → Покупателям (c3) → Компания (c1).
     Кнопка и её колонка идут парой, чтобы колонка раскрывалась сразу под заголовком. */
  .site-foot .ft-in .ft-acc[data-ft-acc="c2"]{order:1}
  .site-foot .ft-in .ft-col.c2{order:2}
  .site-foot .ft-in .ft-acc[data-ft-acc="c3"]{order:3}
  .site-foot .ft-in .ft-col.c3{order:4}
  .site-foot .ft-in .ft-acc[data-ft-acc="c1"]{order:5}
  .site-foot .ft-in .ft-col.c1{order:6}
  .site-foot .ft-in .ft-tel{order:7}
  .site-foot .ft-in .ft-pay{order:8}

  /* Заголовок секции: строка на всю ширину 52px, шеврон справа.
     Это служебный элемент раскрытия, а не кнопка действия — фирменная
     форма со скосом на него не распространяется (BRAND-RULES §3.1,
     «не накрыты заголовки аккордеона»). Тонкая линия сверху делит секции. */
  .site-foot .ft-in .ft-acc{display:flex;align-items:center;justify-content:space-between;
    width:100%;height:52px;margin:0;padding:0;
    border:0;border-top:1px solid rgba(255,255,255,.2);background:none;
    font-family:var(--font);font-weight:500;font-size:17px;line-height:1;color:#fff;
    text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .site-foot .ft-in .ft-acc svg{flex:none;width:20px;height:20px;margin-left:12px;
    transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .site-foot .ft-in .ft-acc[aria-expanded="true"] svg{transform:rotate(180deg)}
  /* Заголовок-кнопка: свечение по буквам и стрелке, без прямоугольной
     обводки (правило «без обводки», BRAND-RULES §3.2). Глобальное свечение
     button:focus-visible в site.css зелёное — на зелёном подвале не видно,
     здесь белое. Ссылки в колонках — текст, им кольцо остаётся: на зелёном
     виднее белое, без радиуса. */
  .site-foot .ft-in .ft-acc:focus-visible{outline:none;filter:drop-shadow(0 0 3px #fff)}
  .site-foot .ft-in a:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:0}

  /* Колонки: без JS видны всегда (класс ft-acc-on вешает footer.js);
     с JS свёрнуты, пока кнопка не добавит is-open.
     .ft-col,.ft-col.c3{margin-top:0} из site.css — (0,2,0); здесь (0,3,0). */
  .site-foot .ft-in .ft-col{margin:0;padding:0 0 8px}
  .site-foot.ft-acc-on .ft-in .ft-col{display:none}
  .site-foot.ft-acc-on .ft-in .ft-col.is-open{display:block}

  /* Ссылки: строка ≥44px под палец, 15px medium.
     Перебиваем .ft-col a (0,1,1), .ft-col.c1 a / .c2 a{margin-bottom} и
     .ft-col.c3 a{display:inline} (0,2,1). */
  .site-foot .ft-in .ft-col a{display:flex;align-items:center;min-height:44px;margin:0;padding:0 8px;
    font-weight:500;font-size:15px;line-height:1.25;color:#fff}
  .site-foot .ft-in .ft-col.c3 a{display:flex;font-weight:500;line-height:1.25}

  /* Подзаголовки «Физическим лицам / Юридическим лицам» в колонке c3:
     мельче и приглушённые, чтобы не спорили с заголовком секции.
     .ft-col.c3 p / .cap / .gap / p:nth-child(4) — (0,2,1)…(0,3,1). */
  .site-foot .ft-in .ft-col.c3 p{margin:0;font-size:15px;line-height:1.25}
  .site-foot .ft-in .ft-col.c3 .cap{padding:12px 8px 2px;font-weight:500;font-size:13px;
    letter-spacing:.04em;opacity:.7}
  .site-foot .ft-in .ft-col.c3 .gap{margin-top:6px}

  /* Телефоны столбиком, 20px, каждый — строка 44px. Линия сверху закрывает
     последнюю секцию аккордеона. Перебиваем .ft-tel a{margin-bottom:14px}. */
  .site-foot .ft-in .ft-tel{margin:0;padding:12px 0 4px;border-top:1px solid rgba(255,255,255,.2)}
  .site-foot .ft-in .ft-tel a{display:flex;align-items:center;min-height:44px;margin:0;padding:0 8px;
    font-weight:500;font-size:20px;line-height:1;white-space:nowrap}

  /* Знаки оплаты: высота 24px. Visa и Mastercard уже нарисованы на светлой
     плашке 24×16 и на зелёном читаются; у Halyk значок зелёный #2AA65C —
     на зелёном фоне пропадал бы, поэтому он лежит на такой же светлой
     плашке (.ft-pay-chip). Радиус 2px — тот же, что вшит в visa.svg (rx=2),
     это не кнопка и не поле, правило §3.1 его не касается. */
  .site-foot .ft-in .ft-pay{display:flex;align-items:center;gap:10px;padding:16px 8px 0}
  .site-foot .ft-in .ft-pay img{display:block;height:24px;width:auto}
  .site-foot .ft-in .ft-pay .ft-pay-chip{display:flex;align-items:center;justify-content:center;
    width:36px;height:24px;background:#f1f2f6;border-radius:2px}
  .site-foot .ft-in .ft-pay .ft-pay-chip img{height:20px}

  /* Реквизиты: 12px, две строки друг под другом, переносы разрешены.
     .ft-legal{padding:22px 18px 0;font-size:11px;gap:4px 20px} — (0,1,0). */
  .site-foot .ft-legal{flex-direction:column;gap:6px;padding:20px 16px 0;
    font-weight:500;font-size:12px;line-height:1.45;opacity:.85}
  .site-foot .ft-legal span{display:block}

  /* Декор на 375px: полоса рваного края ::before (34px, фон 1440px по центру),
     сплошная заливка .ft-shape от 26px и волна .ft-wave с opacity .03 —
     всё внутри overflow:hidden подвала, горизонтальной прокрутки не даёт,
     раскладку не трогает. Оставлено как есть. */
}