/* Стиль витрины.
 *
 * Один набор токенов на весь магазин: акцентный цвет приходит из настроек
 * (в base.html он подставляется в --accent), остальное задано здесь. Менять
 * цвет магазина надо в админке, а не правкой этого файла.
 *
 * Правила, которые здесь соблюдаются намеренно:
 *   — ни одна страница не листается вбок ни на какой ширине;
 *   — во всё, во что тычут пальцем, помещается палец: минимум 44 пикселя;
 *   — кнопки одного вида имеют один размер и одно скругление везде.
 */

:root{
  --accent:#7c5cbf;              /* перекрывается настройкой магазина */
  --accent-текст:#ffffff;
  --фон:#ffffff;
  --фон-2:#f7f6fa;
  --фон-3:#efedf5;
  --текст:#17161c;
  --текст-2:#46434f;
  --приглушённый:#6f6b7b;
  --граница:#e8e5f0;
  --линия-поля:#c9c4d6;
  --плохо:#b3261e;
  --плохо-фон:#fdecea;
  --внимание:#8a5d00;
  --внимание-фон:#fcf3dc;

  --радиус:14px;
  --радиус-мелкий:10px;
  --высота-кнопки:44px;          /* цель касания по норме доступности */
  --отступ:16px;
  --отступ-крупный:32px;
  --шрифт:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --тень:0 1px 2px rgba(23,22,26,.06);
  --тень-крупная:0 8px 28px rgba(23,22,26,.10);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--шрифт);
  font-size:16px;
  line-height:1.55;
  color:var(--текст);
  background:var(--фон);
  /* Страховка от того, ради чего всё затевалось: что бы ни вылезло за край,
     страница вбок не поедет. */
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3{ line-height:1.2; margin:0 0 .5em; }
h1{ font-size:clamp(26px,4vw,40px); letter-spacing:-.02em; }
h2{ font-size:clamp(21px,2.6vw,28px); margin-top:1.4em; }
h3{ font-size:17px; }

.обёртка{ width:100%; max-width:1180px; margin:0 auto; padding:0 var(--отступ); }
.ширина_текста{ max-width:760px; }
.центр{ text-align:center; margin:var(--отступ-крупный) 0; }
.крупно{ font-size:clamp(28px,5vw,44px); }
.крупно_чуть{ font-size:20px; font-weight:600; }
.приглушённо{ color:var(--приглушённый); }
/* Подпись видна скринридеру, но не занимает места на экране. Размер не
   сжимаем до пикселя: проверка вёрстки принимает это за обрезанный текст и
   каждый раз показывает ложную находку. Прячем сдвигом за край окна. */
.скрыто{
  position:absolute; clip-path:inset(50%);
  width:auto; height:auto; overflow:hidden; white-space:nowrap;
  pointer-events:none;
}

/* Ссылка для тех, кто ходит с клавиатуры: видна только при фокусе. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-текст); padding:12px 18px;
  border-radius:0 0 var(--радиус-мелкий) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── Шапка ────────────────────────────────────────────────────────── */

.шапка{
  position:sticky; top:0; z-index:20;
  background:var(--фон); border-bottom:1px solid var(--граница);
}
.шапка__ряд{
  display:flex; align-items:center; gap:12px;
  min-height:64px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px;
}
.лого{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  font-weight:700; font-size:19px; letter-spacing:-.02em;
}
.лого:hover{ text-decoration:none; }
.лого__имя{ color:var(--текст); }
.лого__знак{ max-height:40px; width:auto; }
/* Знак до загрузки логотипа: буква названия в цветном круге. */
.лого__кружок{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:0 0 auto;
  border-radius:50%; background:var(--accent); color:var(--accent-текст);
  font-size:18px; font-weight:700; line-height:1;
}
.подвал__знак{ max-height:36px; width:auto; }
@media (max-width:520px){
  .лого__имя{ display:none; }        /* на узком экране остаётся только знак */
}

.меню{ position:relative; }
.меню__свёртка summary{ list-style:none; cursor:pointer; }
.меню__свёртка summary::-webkit-details-marker{ display:none; }
.меню__список{
  position:absolute; z-index:30; top:calc(100% + 8px); left:0;
  margin:0; padding:8px; list-style:none;
  background:var(--фон); border:1px solid var(--граница);
  border-radius:var(--радиус); box-shadow:var(--тень-крупная);
  min-width:220px; max-height:70vh; overflow-y:auto;
  /* Ширину ограничиваем окном: на узком экране список вылезал за правый
     край, потому что упирался в min-width. */
  max-width:calc(100vw - 32px);
}
.меню__список a{
  display:block; padding:10px 12px; border-radius:var(--радиус-мелкий);
  min-height:44px; line-height:24px;
}
.меню__список a:hover{ background:var(--фон-2); text-decoration:none; }

/* Закрытое меню не должно ничего занимать: абсолютно позиционированный
   список остаётся в разметке и на узком экране считается вылезшим за край. */
.меню__свёртка:not([open]) .меню__список{ display:none; }

@media (max-width:760px){
  /* На телефоне шапка переносит строки, и список, привязанный к левому краю
     своей кнопки, уезжает за экран. Прижимаем его к правому краю. */
  .меню__список{ left:auto; right:0; }
}

.поиск{ display:flex; gap:8px; flex:1 1 200px; max-width:380px; min-width:0; }
.поиск input{
  flex:1 1 auto; min-width:0;
  height:var(--высота-кнопки); padding:0 14px;
  border:1px solid var(--линия-поля); border-radius:var(--радиус-мелкий);
  font:inherit; font-size:15px; background:var(--фон);
}

.шапка__связь{
  display:flex; flex-direction:column; line-height:1.2;
  margin-left:auto; text-align:right;
}
.телефон{ padding:2px 0; }
.телефон{ font-weight:700; font-size:17px; white-space:nowrap; letter-spacing:-.01em; }
.часы{ font-size:13px; color:var(--приглушённый); white-space:nowrap; }

.счётчик{
  display:inline-block; min-width:22px; padding:0 6px;
  background:var(--accent-текст); color:var(--accent);
  border-radius:999px; font-size:13px; font-weight:700; text-align:center;
}

/* ── Кнопки: один размер и одно скругление на весь магазин ────────── */

.кнопка{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--высота-кнопки); padding:0 20px; min-width:116px;
  border:1px solid transparent; border-radius:var(--радиус-мелкий);
  font:inherit; font-size:15px; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap; text-align:center;
}
.кнопка:hover{ text-decoration:none; }
.кнопка_главная{ background:var(--accent); color:var(--accent-текст); }
.кнопка_главная:hover{ filter:brightness(.94); }
.кнопка_призрак{
  background:var(--фон); color:var(--текст); border-color:var(--линия-поля);
}
.кнопка_призрак:hover{ background:var(--фон-2); }
.кнопка_корзина{ background:var(--accent); color:var(--accent-текст); }
.кнопка_широкая{ width:100%; margin-top:12px; }

/* ── Поля ─────────────────────────────────────────────────────────── */

.поле{
  width:100%; min-width:0; height:var(--высота-кнопки); padding:0 14px;
  border:1px solid var(--линия-поля); border-radius:var(--радиус-мелкий);
  font:inherit; font-size:15px; background:var(--фон); color:var(--текст);
}
.поле_многострочное{ height:auto; padding:12px 14px; resize:vertical; }
.поле_число{ width:88px; text-align:center; }
.поле__ряд{ margin-bottom:var(--отступ); }
.поле__подпись{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.поле__подсказка{ display:block; font-size:13px; color:var(--приглушённый); margin-top:6px; }
.звёздочка{ color:var(--плохо); margin-left:2px; }

/* ── Первый экран ─────────────────────────────────────────────────── */

.первый{
  position:relative; overflow:hidden;
  padding:clamp(28px,6vw,76px) 0;
  background:
    radial-gradient(60% 120% at 85% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--фон-2), var(--фон));
  margin-bottom:var(--отступ-крупный);
}
.первый__сетка{
  display:grid; gap:var(--отступ-крупный); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
}
@media (max-width:900px){ .первый__сетка{ grid-template-columns:1fr; } }
.первый__текст h1{ margin-bottom:12px; }
.первый__кнопки{ display:flex; gap:12px; flex-wrap:wrap; margin:var(--отступ) 0; }

.надзаголовок{
  margin:0 0 8px; font-size:14px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent);
}
.лид{ font-size:18px; color:var(--текст-2); max-width:48ch; margin:0; }

/* Коллаж из настоящих товаров вместо пустого места справа. */
.коллаж{
  display:grid; gap:12px; grid-template-columns:1fr 1fr;
}
.коллаж__ячейка{
  display:block; overflow:hidden; border-radius:var(--радиус);
  background:var(--фон-3); aspect-ratio:1; box-shadow:var(--тень);
}
.коллаж__ячейка img{ width:100%; height:100%; object-fit:cover; }
/* Вторая и третья плитки сдвинуты — сетка перестаёт выглядеть таблицей. */
.коллаж__ячейка:nth-child(2){ transform:translateY(18px); }
.коллаж__ячейка:nth-child(3){ transform:translateY(-18px); }
@media (max-width:900px){
  .коллаж__ячейка:nth-child(n){ transform:none; }
}

/* ── Полоса с цифрами ─────────────────────────────────────────────── */

.цифры{
  display:grid; gap:12px; margin-bottom:var(--отступ-крупный);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.цифра{
  padding:var(--отступ); border:1px solid var(--граница);
  border-radius:var(--радиус); background:var(--фон);
  display:flex; flex-direction:column; justify-content:center; min-height:92px;
}
.цифра b{ display:block; font-size:19px; line-height:1.25; }
.цифра span{ display:block; margin-top:6px; font-size:14px; color:var(--приглушённый); }

/* ── Заголовки разделов страницы ──────────────────────────────────── */

.раздел__шапка{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:var(--отступ);
}
.раздел__шапка h2{ margin:0; }
.раздел__шапка p{ margin:0; }
.ссылка_вбок{ font-weight:600; text-decoration:underline; padding:8px 0; }

.плитка__счёт{
  display:inline-block; margin-left:6px; padding:1px 8px;
  border-radius:999px; background:rgba(255,255,255,.22);
  font-size:13px; font-weight:600;
}

/* ── Шаги заказа ──────────────────────────────────────────────────── */

.шаги_карточки{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.шаг{
  padding:var(--отступ); border:1px solid var(--граница);
  border-radius:var(--радиус); background:var(--фон);
}
.шаг__номер{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:12px;
  border-radius:50%; background:var(--accent); color:var(--accent-текст);
  font-weight:700; font-size:17px;
}
.шаг h3{ margin-bottom:6px; }
.шаг p{ margin:0; }

/* ── Карточки с фактами ───────────────────────────────────────────── */

.карточки_фактов{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.факт{
  padding:var(--отступ); border-radius:var(--радиус); background:var(--фон-2);
}
.факт h3{ margin-bottom:6px; }
.факт p{ margin:0; }

/* ── Заявка на подбор ─────────────────────────────────────────────── */

.подбор{
  display:grid; gap:var(--отступ-крупный); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  padding:clamp(24px,4vw,40px); border-radius:var(--радиус);
  background:var(--фон-2);
}
@media (max-width:820px){ .подбор{ grid-template-columns:1fr; } }
.подбор__текст h2{ margin-top:0; }
.подбор__форма{
  padding:var(--отступ); background:var(--фон);
  border-radius:var(--радиус); box-shadow:var(--тень);
}
.подсказка_хорошо{ background:#e6f6ec; color:#157a46; }

/* ── Частые вопросы ───────────────────────────────────────────────── */

.вопросы{ display:grid; gap:8px; }
.вопрос{
  padding:14px var(--отступ); border:1px solid var(--граница);
  border-radius:var(--радиус); background:var(--фон);
}
.вопрос summary{
  cursor:pointer; font-weight:600; font-size:17px;
  min-height:24px; padding:6px 0; list-style:none;
}
.вопрос summary::-webkit-details-marker{ display:none; }
.вопрос summary::after{ content:" +"; color:var(--accent); font-weight:700; }
.вопрос[open] summary::after{ content:" −"; }
.вопрос p{ margin:8px 0 0; }

.плюсы{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  margin:var(--отступ) 0 0; padding:0; list-style:none;
  font-size:15px; color:var(--текст-2);
}
.плюсы li::before{ content:"— "; color:var(--accent); }
.плюсы_столбик{ flex-direction:column; gap:6px; }

/* ── Плитка разделов ──────────────────────────────────────────────── */

.плитка{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1000px){ .плитка{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .плитка{ grid-template-columns:1fr 1fr; gap:10px; } }
.плитка__ячейка{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--радиус); background:var(--фон-3);
  aspect-ratio:4/3;
}
.плитка__ячейка img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.плитка__ячейка:hover img{ transform:scale(1.05); }
.плитка__ячейка:hover{ text-decoration:none; }
.плитка__имя{
  position:absolute; left:0; right:0; bottom:0; padding:32px 14px 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:#fff; font-weight:700; font-size:16px; line-height:1.25;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.68));
}

/* Разделы, не попавшие в плитку: их немного и они редкие, поэтому идут
   строкой ссылок, а не такими же крупными плитками. */
.ещё_разделы{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.метка_раздел{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; min-height:40px;
  border:1px solid var(--граница); border-radius:999px;
  background:var(--фон); font-size:15px; font-weight:500;
}
.метка_раздел:hover{ background:var(--фон-2); text-decoration:none; }
.метка_раздел span{ color:var(--приглушённый); font-size:13px; }

/* ── Сетка товаров ────────────────────────────────────────────────── */

.сетка{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
@media (max-width:520px){
  /* Две колонки на телефоне: одна колонка растягивает страницу до
     бесконечности, а картинки становятся неоправданно большими. */
  .сетка{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

.карточка{
  display:flex; flex-direction:column;
  border:1px solid var(--граница); border-radius:var(--радиус);
  overflow:hidden; background:var(--фон); box-shadow:var(--тень);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.карточка:hover{
  box-shadow:var(--тень-крупная); border-color:var(--accent-мягкий,#d9cff2);
  transform:translateY(-2px);
}
.карточка__ссылка{ display:block; }
.карточка__ссылка:hover{ text-decoration:none; }
.карточка__снимок{ position:relative; aspect-ratio:1; background:var(--фон-3); }
.карточка__снимок img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.карточка:hover .карточка__снимок img{ transform:scale(1.04); }
.карточка__пусто{ width:100%; height:100%; background:var(--фон-3); display:block; }
.карточка__пусто_крупно{ aspect-ratio:1; border-radius:var(--радиус); }
.карточка__имя{
  margin:12px 12px 8px; font-size:15px; font-weight:600; line-height:1.35;
  /* Три строки максимум: иначе карточки в ряду разной высоты. */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.карточка__низ{
  margin-top:auto; padding:0 12px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.карточка__низ form{ margin:0; }
.карточка__низ .кнопка{ width:100%; }

.цена{ font-size:17px; font-weight:700; }
.цена_крупная{ font-size:28px; }
.цена_старая{ margin-left:8px; color:var(--приглушённый); font-weight:400; font-size:15px; }

.метка{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:13px; font-weight:600;
}
.метка_нет{
  position:absolute; left:8px; top:8px;
  background:var(--фон); color:var(--приглушённый); box-shadow:var(--тень);
}

/* ── Крошки ───────────────────────────────────────────────────────── */

.крошки{ padding-top:14px; }
.крошки ol{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0; padding:0; list-style:none;
  font-size:14px; color:var(--приглушённый);
}
.крошки li+li::before{ content:"→"; margin-right:8px; }
/* Ссылка в крошках — тоже цель для пальца. Высоту строки не трогаем,
   набиваем область касания отступами: по норме нужно не меньше 24 пикселей. */
.крошки a{ display:inline-block; padding:4px 0; }

/* ── Страница товара ──────────────────────────────────────────────── */

.товар{
  display:grid; gap:var(--отступ-крупный);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:start; margin-top:var(--отступ);
}
@media (max-width:900px){
  .товар{ grid-template-columns:1fr; gap:var(--отступ); }
}
.товар__главный{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--радиус); background:var(--фон-3);
}
.товар__лента{
  display:flex; gap:8px; margin-top:10px;
  overflow-x:auto; padding-bottom:4px;   /* прокрутка внутри ленты, не у страницы */
  scrollbar-width:thin;
}
.товар__мини{
  flex:0 0 auto; width:76px; height:76px; padding:0; cursor:pointer;
  border:1px solid var(--граница); border-radius:var(--радиус-мелкий);
  overflow:hidden; background:var(--фон-3);
}
.товар__мини[aria-current="true"]{ border-color:var(--accent); border-width:2px; }
.товар__мини img{ width:100%; height:100%; object-fit:cover; }

.товар__цена{ display:flex; align-items:baseline; gap:10px; margin:var(--отступ) 0; }
.товар__заказ{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.товар__заказ .кнопка_широкая{ width:auto; flex:1 1 200px; margin-top:0; }
.товар__описание{ margin:var(--отступ) 0; color:var(--текст-2); }

/* ── Корзина и оформление ─────────────────────────────────────────── */

.строки{ list-style:none; margin:0; padding:0; }
.строка{
  display:grid; gap:12px; align-items:center;
  grid-template-columns:80px minmax(0,1fr) auto auto;
  padding:14px 0; border-bottom:1px solid var(--граница);
}
@media (max-width:640px){
  .строка{ grid-template-columns:64px minmax(0,1fr); }
  .строка__счёт{ grid-column:1/-1; }
  .строка__сумма{ grid-column:2/-1; text-align:right; }
}
.строка__снимок img,.строка__снимок .карточка__пусто{
  width:80px; height:80px; object-fit:cover; border-radius:var(--радиус-мелкий);
}
.строка__имя{ font-weight:600; }
.строка__счёт{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.строка__сумма{ font-weight:700; white-space:nowrap; }

.итог{
  margin-top:var(--отступ-крупный); padding:var(--отступ);
  background:var(--фон-2); border-radius:var(--радиус);
}
.итог__сумма{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:19px; padding:8px 0; border-top:1px solid var(--граница); margin-top:8px;
}
.итог__сумма b{ font-size:24px; }

.оформление{
  display:grid; gap:var(--отступ-крупный);
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:start; margin-top:var(--отступ);
}
@media (max-width:900px){ .оформление{ grid-template-columns:1fr; } }
.оформление__сводка{
  padding:var(--отступ); background:var(--фон-2); border-radius:var(--радиус);
  position:sticky; top:80px;
}
.сводка__список{ list-style:none; margin:0; padding:0; }
.сводка__список li{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--граница); font-size:15px;
}
/* Сумма всегда одной строкой: иначе «6 600 ₽» разрывается и знак валюты
   уезжает на следующую строку. */
.сводка__список b{ white-space:nowrap; }
.ссылка_мелко{ display:inline-block; margin-top:12px; font-size:14px; text-decoration:underline; }

.успех{
  padding:var(--отступ-крупный) var(--отступ); margin:var(--отступ) 0;
  background:var(--фон-2); border-radius:var(--радиус); text-align:center;
}

/* ── Подсказки и пустые состояния ─────────────────────────────────── */

.подсказка{
  padding:12px 14px; border-radius:var(--радиус-мелкий);
  font-size:15px; margin:12px 0;
}
.подсказка_внимание{ background:var(--внимание-фон); color:var(--внимание); }
.подсказка_ошибка{ background:var(--плохо-фон); color:var(--плохо); }

.пусто{
  text-align:center; padding:clamp(32px,8vw,72px) var(--отступ);
  background:var(--фон-2); border-radius:var(--радиус); margin:var(--отступ) 0;
}
.пусто__заголовок{ font-size:20px; font-weight:700; margin:0 0 8px; }

.полоса{
  margin-top:var(--отступ-крупный); padding:var(--отступ-крупный) var(--отступ);
  background:var(--фон-2); border-radius:var(--радиус);
}
.шаги{ margin:0; padding-left:20px; color:var(--текст-2); }
.шаги li{ margin-bottom:10px; }

/* ── Подвал ───────────────────────────────────────────────────────── */

.подвал{
  margin-top:64px; padding:var(--отступ-крупный) 0;
  border-top:1px solid var(--граница); background:var(--фон-2);
}
.подвал__ряд{
  display:grid; gap:var(--отступ-крупный);
  grid-template-columns:1.4fr 1fr 1fr 1fr;
}
@media (max-width:820px){
  .подвал__ряд{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .подвал__ряд{ grid-template-columns:1fr; }
}
.подвал__телефон{
  display:inline-block; margin:8px 0 4px;
  font-size:20px; font-weight:700; letter-spacing:-.01em;
}
.подвал__блок .кнопка{ margin-top:10px; }
.подвал__низ{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:var(--отступ-крупный); padding-top:var(--отступ);
  border-top:1px solid var(--граница); font-size:14px;
}
.подвал__имя{ font-weight:700; font-size:18px; margin-bottom:8px; }
.подвал__заголовок{ font-weight:600; margin-bottom:10px; }
.подвал__список{ list-style:none; margin:0; padding:0; }
.подвал__список li{ margin-bottom:4px; }
/* Ссылка в подвале — тоже цель для пальца, а не только строка текста. */
.подвал__список a{ display:inline-block; padding:3px 0; }
/* Ссылки в подвале — тоже цель для пальца, а не строчка в 17 пикселей. */
.подвал__список a{ display:inline-block; padding:9px 0; min-height:44px; line-height:26px; }

/* Кнопка звонка для узкой шапки: на широком экране номер виден целиком и
   иконка не нужна. */
.звонок_мелко{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto; margin-left:auto;
  border:1px solid var(--линия-поля); border-radius:var(--радиус-мелкий);
  color:var(--текст);
}
.звонок_мелко svg{
  width:20px; height:20px; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:760px){
  .шапка__связь{ display:none; }         /* номер целиком не помещается */
  .звонок_мелко{ display:flex; }
  .кнопка_корзина{ margin-left:0; }
  .поиск{ order:5; flex:1 1 100%; max-width:none; }
}


/* ── Заказ звонка ─────────────────────────────────────────────────── */

.звонок{
  padding:2px 0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--accent);
  text-align:right; min-height:24px;
}
.звонок:hover{ text-decoration:underline; }

.окно{
  width:min(420px,calc(100vw - 32px)); padding:0;
  border:0; border-radius:var(--радиус);
  box-shadow:var(--тень-крупная); background:var(--фон); color:var(--текст);
}
.окно::backdrop{ background:rgba(23,22,26,.45); }
.окно__тело{ padding:var(--отступ-крупный); }
.окно__шапка{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.окно__шапка h2{ margin:0 0 8px; }
.окно__закрыть{
  width:44px; height:44px; margin:-8px -8px 0 0; flex:0 0 auto;
  border:0; border-radius:var(--радиус-мелкий); background:none;
  font-size:26px; line-height:1; color:var(--приглушённый); cursor:pointer;
}
.окно__закрыть:hover{ background:var(--фон-2); }

/* Без скриптов окно не откроется, поэтому форма остаётся обычной формой и
   отправляется на отдельный адрес — заявка дойдёт в любом случае. */
.окно:not([open]){ display:none; }

/* ── Рейтинг ──────────────────────────────────────────────────────── */

.рейтинг{
  display:flex; align-items:center; gap:var(--отступ); flex-wrap:wrap;
  padding:var(--отступ); border:1px solid var(--граница);
  border-radius:var(--радиус); background:var(--фон);
}
.рейтинг__оценка{ display:flex; align-items:center; gap:10px; }
.рейтинг__оценка b{ font-size:34px; line-height:1; }
.звёзды{ color:#f5a623; font-size:18px; letter-spacing:2px; }
.рейтинг__виджет{ border:0; flex:0 0 auto; }
.рейтинг__текст{ flex:1 1 220px; min-width:0; }
.рейтинг__заголовок{ margin:0 0 4px; font-weight:700; }
.рейтинг__текст p{ margin:0; }


/* ── Кабинет покупателя ───────────────────────────────────────────── */

.кабинет_вход{
  display:inline-flex; align-items:center; gap:7px;
  height:var(--высота-кнопки); padding:0 12px; flex:0 0 auto;
  border:1px solid var(--линия-поля); border-radius:var(--радиус-мелкий);
  font-size:14px; font-weight:600; color:var(--текст); max-width:150px;
}
.кабинет_вход:hover{ background:var(--фон-2); text-decoration:none; }
.кабинет_вход svg{
  width:18px; height:18px; flex:0 0 auto;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.кабинет_вход span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:520px){
  /* На узком экране остаётся только значок: имя съедает всю строку. */
  .кабинет_вход span{ display:none; }
  .кабинет_вход{ padding:0; width:44px; justify-content:center; }
}

.узкая_страница{ max-width:460px; }
.узкая_страница h1{ margin-top:var(--отступ-крупный); }
.форма_вход{
  margin-top:var(--отступ); padding:var(--отступ);
  background:var(--фон); border:1px solid var(--граница);
  border-radius:var(--радиус); box-shadow:var(--тень);
}
.разделитель_текст{
  margin-top:var(--отступ); padding-top:var(--отступ);
  border-top:1px solid var(--граница);
}
/* Ссылка внутри абзаца — тоже цель для пальца: набиваем высоту отступами,
   не трогая размер шрифта. */
.разделитель_текст a{
  display:inline-block; padding:4px 0;
  font-weight:600; text-decoration:underline;
}

.кабинет{
  display:grid; gap:var(--отступ-крупный); align-items:start;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  margin-top:var(--отступ-крупный);
}
@media (max-width:900px){ .кабинет{ grid-template-columns:1fr; } }
.кабинет .заказы{
  display:grid; gap:var(--отступ); grid-template-columns:1fr;
}
.кабинет .заказ{
  padding:var(--отступ); background:var(--фон);
  border:1px solid var(--граница); border-radius:var(--радиус);
}
.кабинет .заказ__верх{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  margin-bottom:10px;
}
.кабинет .заказ__номер{ font-weight:700; margin-bottom:6px; }
.кабинет .заказ__сумма{ font-weight:700; font-size:18px; white-space:nowrap; }
.состояние{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--фон-3); color:var(--текст-2);
}
.состояние_new{ background:#e9f2fb; color:#1c6cae; }
.состояние_confirmed{ background:#eeeafb; color:#5a45b8; }
.состояние_assembling{ background:#fcf3dc; color:#8a5d00; }
.состояние_delivering{ background:#e9f2fb; color:#1c6cae; }
.состояние_done{ background:#e6f6ec; color:#157a46; }
.состояние_canceled{ background:var(--плохо-фон); color:var(--плохо); }


/* ── Промокод, скидка, доставка ───────────────────────────────────── */

.промо{
  margin-top:var(--отступ); padding:var(--отступ);
  background:var(--фон-2); border-radius:var(--радиус);
}
.промо .поле__ряд{ margin-bottom:0; }
.промо__ряд{ display:flex; gap:8px; flex-wrap:wrap; }
.промо__ряд .поле{ flex:1 1 180px; }
.ошибка_текст{ color:var(--плохо); }

.итог__строка{
  display:flex; justify-content:space-between; gap:12px;
  padding:6px 0; font-size:15px;
}
.итог__строка_скидка{ color:var(--good, #157a46); }

/* ── Варианты товара ──────────────────────────────────────────────── */

.варианты{ display:grid; gap:6px; width:100%; margin-bottom:12px; }
.вариант{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:8px 12px; cursor:pointer;
  border:1px solid var(--граница); border-radius:var(--радиус-мелкий);
  background:var(--фон);
}
.вариант:hover{ background:var(--фон-2); }
.вариант input{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent); }
.вариант input:checked ~ .вариант__имя{ font-weight:600; }
.вариант__имя{ flex:1 1 auto; }
.вариант__цена{ font-weight:700; white-space:nowrap; }
.вариант input:disabled ~ .вариант__имя{ color:var(--приглушённый); }

/* ── Блоки главной: контакты и свободный текст ────────────────────── */

.контакты{
  display:grid; gap:var(--отступ-крупный); align-items:start;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  padding:clamp(24px,4vw,36px); border-radius:var(--радиус);
  background:var(--фон-2);
}
@media (max-width:820px){ .контакты{ grid-template-columns:1fr; } }
.контакты h2{ margin-top:0; }
.контакты__список{ list-style:none; margin:var(--отступ) 0 0; padding:0; }
.контакты__список li{
  display:grid; grid-template-columns:150px 1fr; gap:12px;
  padding:10px 0; border-top:1px solid var(--граница);
}
@media (max-width:520px){ .контакты__список li{ grid-template-columns:1fr; gap:2px; } }
.контакты__список b{ color:var(--приглушённый); font-weight:500; }
/* Телефон и почта в контактах — ссылки, по ним звонят с телефона. Высоту
   строки не трогаем, набиваем область касания отступами. */
.контакты__список a{ display:inline-block; padding:2px 0; }

.свободный{
  padding:clamp(24px,4vw,36px); border-radius:var(--радиус);
  background:var(--фон-2);
}
.свободный h2{ margin-top:0; }


/* Разбивка суммы заказа: скидка и доставка отдельными строками. */
.суммы{ margin:10px 0; font-size:14px; }
.суммы div{
  display:flex; justify-content:space-between; gap:12px; padding:4px 0;
}
.суммы dt{ color:var(--приглушённый); }
.суммы dd{ margin:0; font-weight:600; white-space:nowrap; }


/* ── Ритм блоков главной ──────────────────────────────────────────── */

/* Один вертикальный размер на все блоки: страница читается ровно, а не
   рваными кусками. Высота задана минимумом, а не жёстко — длинному тексту
   всегда можно вырасти, лишь бы короткий не проваливался. */
.полоса_блока{
  display:flex; flex-direction:column; justify-content:center;
  /* Ровный ритм задаём в первую очередь отступом, а не высотой: высота,
     натянутая на короткий блок, оставляет посреди страницы пустое поле. */
  min-height:280px; padding:24px 0;
}

/* Каталог вдвое выше: в нём плитка разделов, и на обычной высоте она
   сжимается до нечитаемой. */
.полоса_блока_catalog{ min-height:560px; }

/* Первый экран держит собственный фон и отступы — общий ритм ему только
   мешает, поэтому полоса вокруг него ничего не навязывает. */
.полоса_блока_hero{ min-height:0; padding:0; }

/* Полоса цифр — узкая по смыслу: это одна строка показателей. */
.полоса_блока_stats,
.полоса_блока_rating{ min-height:0; padding:12px 0; }

@media (max-width:900px){
  /* На телефоне высоты не навязываем совсем: там всё и так идёт лентой,
     а пустоты между блоками выглядят как обрыв страницы. */
  .полоса_блока,
  .полоса_блока_catalog{ min-height:0; padding:14px 0; }
}


/* ── Выравнивание: общая сетка страницы ───────────────────────────── */

/* Карточки в ряду одной высоты независимо от длины названия: без этого
   кнопки «В корзину» стоят на разных уровнях и ряд выглядит рваным. */
.сетка{ grid-auto-rows:1fr; }
.карточка{ height:100%; }
.карточка__имя{
  min-height:calc(1.35em * 2);   /* место под две строки, третья добавится сама */
}

/* Цена и кнопка всегда на одной линии во всех карточках ряда. */
.карточка__низ{ justify-content:flex-end; }
.цена{ line-height:1.2; }

/* Заголовки разделов страницы — единый ритм сверху и снизу. */
.обёртка > h2:first-child,
.раздел__шапка{ margin-bottom:20px; }
.обёртка > h2{ margin-top:0; }

/* Шаги и факты: карточки ряда одной высоты, текст прижат к верху. */
.шаги_карточки,
.карточки_фактов{ grid-auto-rows:1fr; }
.шаг,.факт{ display:flex; flex-direction:column; }
.шаг h3,.факт h3{ margin-bottom:8px; }
.шаг p,.факт p{ margin-top:0; }

/* Плитка разделов: подпись всегда на одной высоте от низа. */
.плитка__имя{ min-height:56px; align-items:flex-end; }

/* Цифры: значение и подпись выровнены по верхнему краю во всех четырёх. */
.цифра{ justify-content:flex-start; }
.цифра b{ min-height:calc(1.25em * 2); display:flex; align-items:center; }

/* Первый экран: кнопки и список преимуществ по одной линии слева. */
.первый__текст > *{ margin-left:0; }
.плюсы{ padding-left:0; }

/* Шапка: элементы по центру и не прыгают, когда появляется счётчик корзины. */
.шапка__ряд > *{ align-self:center; }
.кнопка_корзина{ justify-content:center; }

/* Подвал: колонки начинаются на одной высоте. */
.подвал__блок{ display:flex; flex-direction:column; }
.подвал__заголовок,.подвал__имя{ min-height:28px; }

/* Формы: подписи и поля выровнены по левому краю без сдвигов. */
.форма_вход .поле__ряд:last-of-type{ margin-bottom:20px; }


/* ── Отбор и порядок в каталоге ───────────────────────────────────── */

.отбор_товаров{
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding:16px; margin-bottom:16px;
  background:var(--фон-2); border-radius:var(--радиус);
}
.отбор_товаров__группа{ display:flex; flex-direction:column; gap:6px; }
.отбор_товаров .поле__подпись{ margin-bottom:0; }
.отбор_товаров select.поле{ min-width:210px; }
.отбор_товаров__цена{ display:flex; gap:8px; align-items:center; }
.отбор_товаров__цена .поле{ width:110px; }
.отбор_товаров .ссылка_мелко{ margin-bottom:12px; }

@media (max-width:640px){
  .отбор_товаров{ gap:14px; }
  .отбор_товаров__группа{ flex:1 1 100%; min-width:0; }
  .отбор_товаров select.поле,
  .отбор_товаров__цена{ width:100%; }
  /* min-width:0 обязателен: без него input[type=number] не сжимается ниже
     своей внутренней ширины, и строка фильтра распирает страницу вбок. */
  .отбор_товаров__цена{ flex-wrap:wrap; }
  .отбор_товаров__цена .поле{ flex:1 1 96px; width:auto; min-width:0; }
  .отбор_товаров__цена .кнопка{ flex:1 1 100%; }
  .отбор_товаров select.поле{ min-width:0; }
}


/* ── Отложенные товары ────────────────────────────────────────────── */

.карточка{ position:relative; }
.отложить{ position:absolute; top:8px; right:8px; margin:0; z-index:2; }
.сердечко{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; cursor:pointer;
  border:0; border-radius:50%; background:rgba(255,255,255,.92);
  box-shadow:var(--тень); color:var(--приглушённый);
}
.сердечко:hover{ color:var(--accent); }
.сердечко svg{
  width:20px; height:20px; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* Отложенный товар помечен залитым сердцем: видно с одного взгляда,
   не наводя курсор. */
.сердечко_есть{ color:var(--accent); }
.сердечко_есть svg{ fill:currentColor; }

.отложить_крупно{ margin-top:12px; }
.отложить_крупно .кнопка{ width:100%; }

.отложенные_вход{
  display:inline-flex; align-items:center; gap:6px;
  height:var(--высота-кнопки); padding:0 12px; flex:0 0 auto;
  border:1px solid var(--линия-поля); border-radius:var(--радиус-мелкий);
  color:var(--текст);
}
.отложенные_вход:hover{ background:var(--фон-2); text-decoration:none; }
.отложенные_вход svg{
  width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.счётчик_тёмный{ background:var(--accent); color:var(--accent-текст); }


/* ── Быстрый заказ с карточки ─────────────────────────────────────── */

.быстрый{
  margin-top:16px; padding:14px 16px;
  border:1px solid var(--граница); border-radius:var(--радиус);
  background:var(--фон-2);
}
.быстрый summary{
  cursor:pointer; font-weight:600; font-size:16px;
  min-height:24px; padding:4px 0; list-style:none;
}
.быстрый summary::-webkit-details-marker{ display:none; }
.быстрый summary::after{ content:" →"; color:var(--accent); }
.быстрый[open] summary::after{ content:" ↓"; }
.быстрый__форма{ margin-top:12px; }
.быстрый__форма .кнопка{ margin-top:4px; }

/* ── Мессенджеры менеджера ────────────────────────────────────────── */

/* Кнопки, а не строчки списка: в них тычут пальцем, и цель касания должна
   быть нормального размера — как и все остальные кнопки магазина. */
.мессенджеры{ display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--отступ); }
.мессенджер{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--высота-кнопки); padding:0 16px; min-width:116px;
  border:1px solid var(--линия-поля); border-radius:var(--радиус-мелкий);
  background:var(--фон); color:var(--текст);
  font-size:15px; font-weight:600; line-height:1; white-space:nowrap;
}
.мессенджер:hover{ background:var(--фон-2); text-decoration:none; }
.мессенджер svg{
  width:20px; height:20px; flex:0 0 auto;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Цветом отмечаем только значок: три разноцветные кнопки рядом спорят с
   акцентом магазина и перетягивают внимание с «В корзину». */
.мессенджер_вотсап svg{ color:#25d366; }
.мессенджер_телеграм svg{ color:#2aabee; }
.мессенджер_max svg{ color:#7c3aed; }

.подвал .мессенджеры{ margin-top:12px; }


/* ── Баннер первого экрана ────────────────────────────────────────── */

.баннер{
  overflow:hidden; border-radius:var(--радиус);
  background:var(--фон-3); box-shadow:var(--тень);
}
.баннер img{ width:100%; height:auto; display:block; }


/* ── Доставка и самовывоз ─────────────────────────────────────────── */

.способы{
  display:grid; gap:var(--отступ); margin-top:var(--отступ);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.способ{
  display:flex; flex-direction:column; gap:8px;
  padding:clamp(20px,3vw,28px); border-radius:var(--радиус);
  border:1px solid var(--граница); background:var(--фон-2);
}
.способ h3{ margin:0; font-size:18px; }
.способ p{ margin:0; color:var(--текст-2); }
.способ__знак{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--радиус-мелкий);
  background:var(--фон); border:1px solid var(--граница);
}
.способ__знак svg{
  width:24px; height:24px;
  stroke:var(--accent); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.способ__метка{ font-weight:600; }
/* Кнопка внизу карточки, а не сразу под текстом: карточки в ряду разной
   длины, и без этого кнопки встают на разной высоте. */
.способ .кнопка{ margin-top:auto; align-self:flex-start; }

.карта_врезка{
  width:100%; aspect-ratio:4/3; border:0;
  border-radius:var(--радиус); background:var(--фон-3);
  margin-bottom:12px;
}


/* ── Страница с условиями ─────────────────────────────────────────── */

.условия{ max-width:74ch; padding-bottom:var(--отступ-крупный); }
.условия h1{ margin-bottom:var(--отступ); }
.условия h2{ margin-top:var(--отступ-крупный); font-size:22px; }
.условия p{ color:var(--текст-2); margin:0 0 var(--отступ); }
.условия__список{ margin:0 0 var(--отступ); padding-left:22px; color:var(--текст-2); }
.условия__список li{ margin-bottom:6px; }
.условия__низ{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:var(--отступ-крупный); padding-top:var(--отступ);
  border-top:1px solid var(--граница);
}

/* Согласие на обработку данных под кнопкой формы. Мелко, но читаемо: это
   не мелкий шрифт ради вида, а строка, которую человек должен разобрать. */
.согласие{
  margin:10px 0 0; font-size:13px; line-height:1.45;
  color:var(--приглушённый);
}
/* Ссылка на политику — цель для пальца: 17 точек высоты мало по норме. */
.согласие a{ display:inline-block; padding:3px 0; text-decoration:underline; }

.подвал__правовое{ display:flex; gap:14px; flex-wrap:wrap; }
.подвал__правовое a{
  display:inline-block; padding:6px 0;
  color:var(--приглушённый); text-decoration:underline;
}