/* Добавления к стилям сайта. Подключается на всех страницах.
   В подвале появились ссылки на четыре документа — их названия длиннее прежнего
   единственного пункта и на узких экранах переносятся на 2–3 строки. Базовый
   интерлиньяж сайта (100%) для многострочных ссылок слишком плотный, поэтому для
   этих пунктов он задан отдельно. Оформление остальных ссылок не меняется. */

.footer-link.is-legal {
  line-height: 120%;
  margin-bottom: 0.35rem;
}

/* Ссылки на документы в галочке согласия под формами. Раньше они отличались от
   обычного текста только при наведении — посетитель не видел, что это две разные
   ссылки, и что с ними вообще можно ознакомиться до отправки заявки. */
.checkbox-label a,
.w-form-label a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* ————— Правки вёрстки 2026-07-30 (замечания владельца) ————— */

/* 1. Карточки каталога внутри категории на телефоне.
   Ниже 768 px картинке задана фиксированная высота (19.375rem), а обёртки ширины не
   имеют — ширину им даёт сама картинка (высота × её пропорции). Из-за этого снимок
   оказывался уже подписи и вставал по центру карточки, а у карточек с разными
   пропорциями кадра — ещё и разной ширины. Даём обёртке ширину карточки: снимок
   занимает её целиком, кадрирование делает object-fit: cover, как и раньше. */
@media screen and (max-width: 767px) {
  .shop-card-mask {
    width: 100%;
  }

  /* Высота кадра. Снимок теперь во всю ширину карточки, а высота оставалась
     прежней (19.375rem) — вертикальные кадры от этого подрезались сверху и снизу.
     Пропорция 3:4 близка к тому, как сняты предметы (0,67–0,78 у ваз, подушек,
     картин; 1,0 у ёлочных игрушек и колец), поэтому режется по минимуму, а высота
     у всех карточек остаётся одинаковой. */
  .shop-grid._4-clms .shop-card-image {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .shop-grid._4-clms .shop-card-wrap {
    height: auto;
  }
}

/* 1а. Тот же каталог на промежуточной ширине (альбомная ориентация телефона,
   маленькие планшеты — 480–767 px). Там список идёт в одну колонку, и карточка
   во всю ширину экрана при высоте снимка 19.375rem превращала бы кадр в узкую
   панораму. Две колонки дают карточке близкие к вертикали пропорции. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .shop-grid._4-clms {
    grid-template-columns: 1fr 1fr;
  }
}

/* 2. Кнопка «смотреть все» в мобильной витрине магазина.
   От подписи последней карточки её отделяли 21 px — кнопка читалась как часть
   карточки. Отступ выше самой кнопки, расстояние до заголовка следующего раздела
   не меняется. */
@media screen and (max-width: 767px) {
  .section.is-mobile .flex-v-25 > .small-btn {
    margin-top: 1rem;
  }
}

/* 3. Верхнее поле страниц на телефоне — минус 50 px.
   Просвет между шапкой (84 px, зафиксирована сверху) и первым содержимым составлял
   82–201 px в зависимости от страницы. Главной страницы правка не касается: там
   первый экран строится иначе. Страницы проектов (.projects, 83 px) и карточки
   товара (145 px) не трогаем — там просвет и так небольшой. */
@media screen and (max-width: 767px) {
  .shop {
    padding-top: calc(9.375rem - 50px);
  }

  .events,
  .project-article {
    padding-top: calc(10.3125rem - 50px);
  }

  .contacts {
    padding-top: calc(17.1875rem - 50px);
  }
}

@media screen and (max-width: 479px) {
  .shop {
    padding-top: calc(10rem - 50px);
  }
}

/* 4. Скорость бегущей строки на кнопке формы в окне «Приглашаем в гости».
   Длительность прохода у всех кнопок сайта задана фиксированной (15 с у крупных,
   20 с у мелких), поэтому скорость зависит от длины надписи: чем она длиннее, тем
   быстрее бежит строка. «Записаться на встречу» — самая длинная надпись на сайте,
   и кнопка шла 165 px/с при 72–101 px/с у остальных. 28 с дают ей 88 px/с — как у
   кнопок «смотреть все» и «в магазин». */
.form-btn .loop-content {
  animation-duration: 28s;
}

/* 5. Юридические ссылки в подвале на телефоне.
   Пять пунктов набором в 17,6 px занимали в правой колонке 333 px и переносились на
   2–4 строки каждый — блок выглядел тяжелее всего остального подвала и упирался в
   правый край. Уменьшаем кегль и разрежаем строки; колонки подвала выравниваем по
   ширине, чтобы длинные названия переносились свободнее. */
@media screen and (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-link.is-legal {
    font-size: 0.75rem;
    line-height: 130%;
    letter-spacing: 0;
    margin-bottom: 0.6rem;
    padding-right: 0.5rem;
  }
}

/* ————— Правки вёрстки 2026-07-30, вторая партия (замечания владельца) ————— */

/* 6. Подпись под названием товара в витрине и в категории на телефоне.
   Ширина подписи ограничена 8.75rem (145 px) при карточке 280 px в витрине и
   381 px в категории. Длинные подписи («репсовая лента посередине», «бархат,
   мраморный рулик», «кисия с фигурным низом») от этого ломались на три строки,
   хотя справа оставалось пустое место. 11.5rem (191 px) — минимум, при котором
   все подписи каталога укладываются в две строки; карточку подпись при этом не
   заполняет целиком, воздух справа остаётся. */
@media screen and (max-width: 767px) {
  .caps.max-w-140 {
    max-width: 11.5rem;
  }
}

/* 7. Название товара в чертах: вторая строка — на уровне текста первой.
   Название набрано одной строкой «| Ваза СЯНТУЙ средняя |», и при переносе
   вторая строка начиналась от левого края блока — под чертой, а не под текстом.
   Ширина «| » в этом наборе — 10,2 px (0,614 em), поэтому висячий отступ
   0.62 em ставит продолжение ровно под первой буквой названия. Первая строка
   остаётся на месте: отрицательный text-indent гасит padding-left. */
.flex-v-12 > .flex-h-0 > .caps:first-child {
  padding-left: 0.62em;
  text-indent: -0.62em;
}

/* 8. Окно заявки на телефоне: прокрутка и высота по видимой области.
   Содержимое окна (.popup-content) имеет верхний отступ 5rem и высоту 100% от
   окна, то есть в сумме на 5rem больше экрана — низ уходил за нижнюю границу.
   Прокрутки не было: у .popup её нет вовсе, а внутри .popup-content нечего
   прокручивать — её собственная высота была больше содержимого. Замер до правки
   при окне 414 × 896: низ содержимого на 1009 px, на 113 px ниже края экрана,
   прокручивать внутри нечего (scrollHeight = clientHeight). На телефоне обрезка
   сильнее: 100vh в Safari считается без панелей браузера, поэтому часть окна
   физически под адресной строкой, и кнопка отправки недостижима.

   Отсюда две правки: высота окна по видимой области (100dvh, для браузеров без
   его поддержки остаётся 100vh) и предельная высота содержимого за вычетом
   отступов вокруг него. Содержимое умещается в экран, что не уместилось —
   прокручивается внутри (overflow: auto там уже задан), нижнее поле 5rem даёт
   воздух под кнопкой. Отступы и вычитаемое заданы в одних единицах (rem), поэтому
   расчёт верен на любой ширине, хотя базовый кегль сайта от неё и зависит.

   Диапазон до 991 px — тот же дефект в альбомной ориентации телефона: при
   812 × 375 кнопка обрезалась на 15 px, прокрутки не было (замер 30.07). Там
   вычитается 8rem: верхнее поле окна 2rem плюс отступ содержимого 6rem. Ниже
   768 px поле окна обнулено, а отступ содержимого — 5rem. */
@media screen and (max-width: 991px) {
  .popup {
    height: 100vh;
    height: 100dvh;
  }

  .popup-content {
    height: auto;
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Нижнее поле содержимого в этом диапазоне — 0, кнопка упиралась в край экрана.
   Ниже 768 px оно своё (5rem) и остаётся как было. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .popup-content {
    padding-bottom: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .popup-content {
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
  }
}

/* ————— Правки вёрстки 2026-07-30, третья партия (замечания владельца) ————— */

/* 9. Юридические ссылки в подвале на телефоне — выше.
   Обе колонки подвала набраны одним классом (.flex-v-50, зазор между блоками
   3.125rem ≈ 52 px), поэтому «Написать мне» слева и «Политика конфиденциальности»
   справа начинались ровно на одном уровне — 334 px от верха подвала при окне
   414 × 896. Из-за одинакового старта пять мелких юридических пунктов читались
   как пара к «Написать мне», хотя относятся к блоку ссылок над ними.

   Отрицательный отступ сокращает зазор именно у этого блока до 1.5 rem (25 px):
   юридические пункты подтягиваются к соцсетям, с которыми они в одной колонке, и
   встают на 27 px выше «Написать мне». Селектор берёт второй блок правой колонки:
   слева последний ребёнок — .flex-v-10 («Написать мне» с иконками), под правило
   он не подпадает. */
@media screen and (max-width: 767px) {
  .footer-grid .flex-v-50 > .flex-v-2:last-child {
    margin-top: -1.625rem;
  }
}

/* ————— Каталог: вес снимков (2026-07-31) ————— */

/* 10. Обёртка <picture> у карточек каталога.
   Снимки переведены в WebP через <picture> (см. tools/patch_card_webp.py), а обёртка
   встала лишним звеном между .shop-card-wrap (flex) и снимком: ширину 100% снимок
   считал бы от неё, а она сама её не имеет. display: contents убирает обёртку из
   раскладки — снимок остаётся прямым потомком .shop-card-wrap, как и был. */
.shop-card-wrap picture,
.shop-card-mask picture {
  display: contents;
}

/* 11. Подсветка места снимка (была здесь 31.07) снята в тот же день по замечанию
   владельца. Замысел был показать, где появится кадр, пока он едет; на деле снимки
   после перевода в WebP приезжают быстрее, чем подсветку успеваешь заметить, зато
   после загрузки она обводила кадр светлыми полосами: обёртка плитки выше снимка
   на 13 px (нижний отступ самого снимка, 0.625rem), и по замеру 31.07 подсвечивались
   2 px над кадром и 11 px под ним — по бокам полей нет. */