/* ══════════════════════════════════════════════════════════════════════════
   ПОДВАЛ — конец холста, а не приклеенная снизу плита.

   Было: синий градиентный блок на 713 px с огромной полупрозрачной «TOP»
   на фоне, тремя колонками ссылок (включая ВЕСЬ каталог) и строкой из семи
   юридических ссылок. Три десятка ссылок и чужой по языку блок: сайт
   к этому моменту уже говорит холстом и неоморфом.

   Стало: та же поверхность, что у всей страницы. Логотип ВДАВЛЕН в неё —
   тем же приёмом, что лунки полей; телефон — выпуклая кнопка; ссылки лежат
   в канавках; документы свёрнуты. Навигации нет намеренно: её держат таб-бар
   и шторка «Ещё», а корня каталога, который дублировали колонкой категорий,
   больше не существует.

   Префикс body.page-redesign обязателен (глобальный ресет темы).
   ══════════════════════════════════════════════════════════════════════════ */

body.page-redesign .site-footer {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  /* Канавка на стыке с содержимым: подвал не отрезан линией, а продолжает
     поверхность — тёмный волосок и светлый под ним. */
  border-top: 1px solid rgba(16, 32, 64, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  margin-top: 36px;
  /* Гасим наследство синей плиты: свои поля и скругление верхних углов она
     задавала сама, и они складывались с полями .foot. */
  padding: 0;
  border-radius: 0;
}

/* Фирменный градиент вернулся — но полосой по кромке, а не заливкой всего
   блока. Плита из градиента и была проблемой: она спорила с холстом и
   перетягивала на себя конец страницы. Полоса делает ровно то, чего не
   хватало, — отбивает подвал от содержимого и ставит на нём фирменный знак.

   Лежит поверх канавки: тёмный волосок остаётся под ней и даёт полосе
   толщину, будто она утоплена в поверхность. */
body.page-redesign .site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-brand);
  opacity: .9;
}
/* Мягкое свечение под полосой — от него подвал читается как подсвеченный
   край, а не наклеенная линия. */
body.page-redesign .site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 170px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(34, 104, 185, .16), rgba(137, 194, 255, .07) 45%, rgba(34, 104, 185, 0) 100%);
}
body.page-redesign .site-footer > .foot { position: relative; z-index: 1; }

body.page-redesign .foot {
  /* Сетка, а не колонка: знак и круглые кнопки делят одну строку, остальное
     идёт в полную ширину. Обёртки для этого не нужно — хватает колонок. */
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 18px;
  padding: 28px var(--gut) calc(26px + var(--tabbar-h, 0px) + var(--safe-bottom, 0px));
}
body.page-redesign .foot > * { grid-column: 1 / -1; }
body.page-redesign .foot__mark { grid-column: 1; justify-self: start; }
body.page-redesign .foot__contact { grid-column: 2; justify-self: end; }

/* ── Знак ────────────────────────────────────────────────────────────────
   Тот же знак, что в шапке, и залит так же — фирменным градиентом через
   маску. Источник маски — logo-header.png, а не logo-footer.svg: последний
   нарисован белым с fill-opacity .4 под прежний синий подвал, и как маска
   пропускал лишь 40 % градиента — знак читался выцветшим. */
body.page-redesign .foot__mark {
  width: 132px;
  height: 36px;
  /* Знак залит фирменным градиентом и при этом остаётся оттиском: цвет даёт
     маска, объём — светлый волосок снизу. Серый знак в прошлой версии
     не читался как бренд, а цветной плитой — перетягивал на себя конец
     страницы; оттиск цветом держит и то, и другое. */
  background: var(--grad-brand);
  -webkit-mask: url('/img/logo-header.png') left center / contain no-repeat;
  mask: url('/img/logo-header.png') left center / contain no-repeat;
  /* Подпись в конце страницы, а не второй логотип: приглушена. */
  opacity: .6;
}

/* ── Телефон и соцсети ──────────────────────────────────────────────────── */
body.page-redesign .foot__contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}
/* Телефон — круг в ряд с соцсетями: номер строкой занимал всю ширину и
   разбивал верх подвала на две строки ради одного действия. Сам номер
   остаётся в разметке (его читают поисковик и озвучка), просто не рисуется —
   вместо него трубка. Кольцо градиентом помечает главное действие. */
body.page-redesign .foot__tel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
  background: var(--bg);
  box-shadow:
    4px 5px 12px rgba(16, 32, 64, .14),
    -3px -3px 9px rgba(255, 255, 255, .95);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow .18s var(--ease);
}
body.page-redesign .foot__tel::before {
  content: '';
  width: 20px;
  height: 20px;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.6 2.5c.6 0 1.2.4 1.4 1l1.2 3.2c.2.6.1 1.3-.4 1.7l-1.3 1a13 13 0 0 0 6.1 6.1l1-1.3c.4-.5 1.1-.6 1.7-.4l3.2 1.2c.6.2 1 .8 1 1.4v3c0 .9-.7 1.6-1.6 1.6C10.6 21 3 13.4 3 4.1c0-.9.7-1.6 1.6-1.6h2Z'/></svg>");
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
body.page-redesign .foot__tel:active {
  box-shadow:
    inset 3px 4px 8px rgba(16, 32, 64, .16),
    inset -2px -2px 6px rgba(255, 255, 255, .92);
}

body.page-redesign .foot__soc { display: flex; gap: 10px; }
body.page-redesign .foot__soc a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  box-shadow:
    3px 4px 9px rgba(16, 32, 64, .13),
    -3px -3px 8px rgba(255, 255, 255, .95);
  transition: box-shadow .18s var(--ease);
}
body.page-redesign .foot__soc a:active {
  box-shadow:
    inset 2px 3px 6px rgba(16, 32, 64, .16),
    inset -2px -2px 5px rgba(255, 255, 255, .9);
}
/* Значки — маской: исходники белые, их рисовали под синий подвал. */
/* Значки залиты тем же фирменным градиентом, что и знак, и приглушены
   так же: кнопки подвала — не акцент страницы. Маска остаётся, меняется
   только то, чем она закрашена. */
body.page-redesign .foot__ico,
body.page-redesign .foot__tel::before {
  opacity: .6;
  background: var(--grad-brand);
}
body.page-redesign .foot__ico {
  width: 20px;
  height: 20px;
  display: block;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
body.page-redesign .foot__ico--vk { --ico: url('/img/vk-ico.svg'); }
body.page-redesign .foot__ico--tg { --ico: url('/img/tg-ico.svg'); }

/* ── Часы и адрес ───────────────────────────────────────────────────────
   Данные из карточки склада: поменяют в админке — поменяется здесь. Для
   поисковика это повторяющийся на каждой странице блок «адрес и телефон». */
body.page-redesign .foot__where {
  display: flex;
  flex-direction: column;
  /* На телефоне обе строки переносятся, и при 3 px между ними четыре строки
     слипались в кучу. Воздуха между строками больше, чем внутри строки,
     и «когда» отделено от «где» насыщенностью, а не только переносом. */
  gap: 10px;
  max-width: 34ch;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
body.page-redesign .foot__where span:first-child {
  color: var(--ink);
  opacity: .78;
}

/* ── Ссылки ─────────────────────────────────────────────────────────────
   Чипами, а не столбиком строк: четыре ссылки в столбик занимали 230 px —
   треть подвала ради четырёх слов. Теми же выпуклыми пилюлями, что чипы
   фильтра и кнопки полосы каталога, так что язык один. */
body.page-redesign .foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.page-redesign .foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill, 999px);
  background: var(--bg);
  box-shadow:
    3px 4px 9px rgba(16, 32, 64, .13),
    -3px -3px 8px rgba(255, 255, 255, .95);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow .18s var(--ease), color .15s ease;
}
body.page-redesign .foot__links a:active {
  color: var(--blue);
  box-shadow:
    inset 2px 3px 6px rgba(16, 32, 64, .16),
    inset -2px -2px 5px rgba(255, 255, 255, .9);
}

/* ── Документы ──────────────────────────────────────────────────────────
   Семь юридических ссылок обязаны быть доступны, но висеть стеной
   не обязаны. Свёрнуты в <details> — работает и без скриптов. */
body.page-redesign .foot__docs {
  border-radius: 14px;
  background: var(--bg);
  box-shadow:
    inset 3px 4px 7px rgba(16, 32, 64, .12),
    inset -3px -3px 6px rgba(255, 255, 255, .95);
  overflow: hidden;
}
body.page-redesign .foot__docs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
body.page-redesign .foot__docs summary::-webkit-details-marker { display: none; }
body.page-redesign .foot__docs summary svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--blue-soft, #2268B9);
  transition: transform .26s var(--ease);
}
body.page-redesign .foot__docs[open] summary svg { transform: rotate(180deg); }

body.page-redesign .foot__docs-body {
  display: flex;
  flex-direction: column;
  padding: 2px 16px 10px;
}
body.page-redesign .foot__docs-body a {
  min-height: 38px;
  display: flex;
  align-items: center;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
body.page-redesign .foot__docs-body a:active { color: var(--blue); }

/* ── Нижняя строка ──────────────────────────────────────────────────────── */
/* Значки оплаты и «сделано в» — в строку, копирайт отдельной строкой под ними:
   в одном ряду на телефоне он налезал на значки и ломался на два этажа. */
body.page-redesign .foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 4px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
}
body.page-redesign .foot__made { margin-left: auto; }
body.page-redesign .foot__pays { display: flex; align-items: center; gap: 8px; }
/* Значки платёжных систем. Были 13 px и почти чёрные от фильтра: у СБП внутри
   мелкая подпись, и она превращалась в кляксу. Подняли до 20 px и приглушаем
   прозрачностью, а не обесцвечиванием — фирменные цвета систем узнаются,
   но не спорят с подвалом. */
body.page-redesign .foot__pays { gap: 12px; }
/* Маской, а не картинкой: исходники белые и на холсте их не видно вовсе.
   Ширину задаём руками — у маски своих размеров нет. */
body.page-redesign .foot__pay {
  height: 20px;
  display: block;
  background-color: var(--icon);
  opacity: .72;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
body.page-redesign .foot__pay--mir { width: 62px; --ico: url('/img/mir-ico.svg'); }
body.page-redesign .foot__pay--sbp { width: 50px; --ico: url('/img/SBP-ico.svg'); }
body.page-redesign .foot__copy { order: 3; flex: 1 1 100%; }
body.page-redesign .foot__made img {
  height: 14px;
  width: auto;
  display: block;
  filter: brightness(0) saturate(100%) opacity(.34);
}

/* ── Широкие экраны ─────────────────────────────────────────────────────
   Места больше — раскладываем в два столбца, но набор тот же. Отдельной
   «десктопной» карты сайта здесь нет: она не нужна ни там, ни там. */
@media (min-width: 900px) {
  /* Три столбца: слева кто мы и где, в середине юридические документы,
     справа связь и переходы. Низ не отдельной строкой, а продолжением
     столбцов: значки оплаты и копирайт под адресом, автор под переходами.

     .foot__bottom здесь display:contents — он ничего не группирует, а его
     дети должны встать в РАЗНЫЕ столбцы сетки. Иначе копирайт и «сделано в»
     намертво связаны одной строкой. */
  body.page-redesign .foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px) max-content;
    grid-template-areas:
      'mark   docs  tel'
      'where  docs  links'
      'pays   docs  links'
      '.      docs  links'
      'copy   .     made';
    /* Четвёртая строка добирает остаток, и в неё заходят оба высоких блока —
       столбик переходов и раскрытые документы. Без этого их лишняя высота
       распределялась по строкам 1–3 и растаскивала знак, часы и значки
       оплаты: подвал «дышал» при каждом раскрытии документов.
       Копирайт и автор стоят ниже всего, отдельной строкой — это подпись
       под подвалом, а не часть колонок. */
    /* Четвёртая строка добирает остаток: в неё заходят оба высоких блока —
       столбик переходов и раскрытые документы, — и их лишняя высота не
       растаскивает знак, часы и значки оплаты по строкам 1–3.
       Отдельного запаса под раскрытие не нужно: столбик переходов отбит
       сверху ровно настолько, что его низ совпадает с низом раскрытого
       списка документов. Поэтому раскрытие ничего не двигает, а в свёрнутом
       виде под подвалом нет пустого хвоста. */
    grid-template-rows: min-content min-content min-content 1fr min-content;
    gap: 12px 48px;
    align-items: start;
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 36px var(--gut) 18px;
  }
  body.page-redesign .foot__mark    { grid-area: mark; }
  body.page-redesign .foot__where   { grid-area: where; max-width: 42ch; }
  body.page-redesign .foot__docs { grid-area: docs; align-self: start; }
  body.page-redesign .foot__contact { grid-area: tel; justify-self: end; gap: 12px; }
  /* Переходы столбиком по правому краю: их четыре, и в столбце они
     читаются списком, а не россыпью. */
  body.page-redesign .foot__links {
    grid-area: links;
    flex-direction: column;
    align-items: flex-end;
    align-self: start;
    gap: 10px;
    /* Отбивка от круглых кнопок: переходы — другой разговор, и заодно это
       выравнивает низ правой колонки с низом раскрытых документов. */
    margin-top: 40px;
  }

  /* «Доставка и оплата» стоит в разметке первой — на телефоне она и нужна
     первой. В столбце на широком экране ей место последней. */
  body.page-redesign .foot__links > a:first-child { order: 1; }

  body.page-redesign .foot__bottom { display: contents; }
  body.page-redesign .foot__pays { grid-area: pays; align-self: start; }
  /* Подпись под подвалом: отбита от колонок воздухом, иначе «сделано в»
     прилипало к последнему переходу, а копирайт читался частью левой колонки. */
  body.page-redesign .foot__copy {
    grid-area: copy;
    order: 0;
    flex: none;
    align-self: end;
    margin-top: 6px;
  }
  body.page-redesign .foot__made {
    grid-area: made;
    margin: 6px 0 0;
    justify-self: end;
    align-self: end;
  }
}