/* ==========================================================================
   Компоненты.
   Опорный приём — «шильдик»: характеристики и цены подаются как выбитые на
   металле техданные (моноширинный, насечки, отбивки), а не как рекламный текст.
   Именно характеристики здесь настоящий товар: сталь 3 мм, 6 мм алюминия,
   12 500 фунтов. Оранжевый работает как маркировка — узкими насечками,
   а не заливками и градиентами.
   ========================================================================== */

/* --------------------------------------------------------- Кнопки */

.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-space-2);
  min-height: 48px;
  padding: var(--ws-space-3) var(--ws-space-6);
  /* Явный прозрачный фон: у <button> он по умолчанию светло-серый (buttonface),
     и вариант --on-dark, рассчитанный на белый текст, становился нечитаемым.
     На ссылках <a> дефекта не видно — поэтому он и всплыл только на плашке
     cookie, где кнопки настоящие. */
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--ws-radius-sm);
  font-family: var(--ws-font-body);
  font-weight: 600;
  font-size: var(--ws-text-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ws-transition), border-color var(--ws-transition), color var(--ws-transition);
}

.ws-btn--primary { background: var(--ws-accent-text); color: var(--ws-paper); }
.ws-btn--primary:hover { background: var(--ws-accent-text-hover); color: var(--ws-paper); }

.ws-btn--ghost { border-color: var(--ws-steel-300); color: var(--ws-ink); }
.ws-btn--ghost:hover { border-color: var(--ws-accent); color: var(--ws-accent); }

.ws-btn--on-dark { border-color: rgba(255, 255, 255, 0.35); color: var(--ws-paper); }
.ws-btn--on-dark:hover { border-color: var(--ws-accent); background: var(--ws-accent); color: var(--ws-paper); }

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

.ws-hero {
  position: relative;
  background: var(--ws-steel-900);
  color: var(--ws-ink-invert);
  overflow: hidden;
}

.ws-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0.45;
}

.ws-hero__inner {
  position: relative;
  padding-block: var(--ws-space-8);
  max-width: 46rem;
}

@media (min-width: 768px) {
  .ws-hero__inner { padding-block: var(--ws-space-9); }
}

.ws-hero__title { margin-bottom: var(--ws-space-4); }
.ws-hero__lead {
  font-size: var(--ws-text-lg);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--ws-space-6);
}
.ws-hero .ws-eyebrow { color: rgba(255, 255, 255, 0.7); margin-bottom: var(--ws-space-4); }

.ws-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); }
/* Общая ширина кнопок первого экрана: без неё «Смотреть каталог» ощутимо
   шире «Новости» — кнопки растут только под свой текст. Значение подобрано
   под более длинный текст («Смотреть каталог» без переноса на одну строку).
   Селектор через .ws-hero, а не просто .ws-hero__actions — тот же класс
   переиспользован в CTA внизу главной («Оставить заявку» + телефон), и там
   фиксированная ширина телефонному номеру не нужна. */
.ws-hero .ws-hero__actions .ws-btn { width: 13.5rem; }

/* Лента фото под первым экраном (сменила блок фактов 19.08.2026) — во всю
   ширину hero, а не .ws-container: .ws-hero уже overflow:hidden, этим
   пользуемся, чтобы обрезать бегущую дорожку по краям без лишней разметки.
   Маска по краям — чтобы карточки не обрывались резко на границе экрана.

   margin-left/right ограничивают ленту зоной РЕЗКОЙ части фото герой-баннера
   (topbanner2.jpg): по краям кадра у фото — размытый бэкграунд (боке), в
   среднем на 73% ширины — резкая часть с джипом и зданием. При
   background-size:cover высота hero фиксирована (текст упирается в
   max-width, дальше не растёт — измерено 684.18px на любой ширине от
   1280 до 2560px), поэтому чем шире экран, тем больше исходного кадра
   становится видно, и на широких мониторах в кадр начинает попадать
   размытость. Отступы посчитаны по формуле «cover» относительно этой
   фиксированной высоты и границ резкости в самом файле (найдены анализом
   столбцов пикселей на градиент яркости), не подобраны на глаз.

   Раздельные формулы для левого и правого края — не margin-inline:auto —
   потому что резкая зона в самом кадре не строго по центру: слева до
   размытия чуть меньше запаса (13.86% ширины), чем справа (13.13%).
   Симметричный отступ визуально заводил ленту в блюр слева и оставлял
   лишний зазор справа (найдено 20.08.2026 по свежему скриншоту). */
.ws-feed {
  position: relative;
  z-index: 1;
  padding-block: var(--ws-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-left: max(0px, min(13.865vw, 50vw - 741px));
  margin-right: max(0px, min(13.128vw, 50vw - 757px));
  mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);
}

.ws-feed__track {
  --ws-feed-item-w: 6.25rem;
  display: flex;
  gap: var(--ws-space-4);
  width: max-content;
  animation: ws-feed-scroll 36s linear infinite;
}
@media (min-width: 640px) { .ws-feed__track { --ws-feed-item-w: 8rem; } }

.ws-feed__item {
  flex: 0 0 auto;
  width: var(--ws-feed-item-w);
  aspect-ratio: 1 / 1;
  border-radius: var(--ws-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--ws-shadow);
}
.ws-feed__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes ws-feed-scroll {
  /* Сдвиг — точная длина «N уникальных фото × (ширина + зазор)», а не
     процент от общей ширины трека: трек теперь состоит из нескольких
     копий ленты (см. front-page.php), и -50%/-33% и т.п. зависели бы от
     числа копий и легко разъезжались бы. N (--ws-feed-count) приходит
     инлайн-стилем из PHP — это число уникальных фото, не копий. */
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--ws-feed-count, 1) * (var(--ws-feed-item-w) + var(--ws-space-4)))); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-feed__track { animation: none; }
}

/* --------------------------------------------------------- Сетки */

.ws-grid { display: grid; gap: var(--ws-space-5); }

@media (min-width: 600px) { .ws-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 600px) { .ws-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ws-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------- Карусель карточек
   Раскладка карточек — та же, что у .ws-grid--3 (1 / 2 / 3 в ряд по тем же
   брейкпоинтам), только строкой с горизонтальной прокруткой вместо грида:
   когда записей больше, чем помещается в ряд, лишние уезжают за край и
   пролистываются стрелками. Скролл нативный (overflow-x + scroll-snap) —
   стрелки поверх него декорация и навигация, а не сам механизм: без JS
   (или пока он не отработал) карточки всё равно листаются свайпом/колесом.
   Стрелки скрыты по умолчанию и показываются только классом .is-scrollable,
   который вешает init­Carousels() в main.js, когда дорожка реально шире
   вьюпорта — при 3 и менее карточках на десктопе (как сейчас у «Порше»)
   они не нужны и не занимают место. */

.ws-carousel { position: relative; }

.ws-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ws-carousel__viewport::-webkit-scrollbar { display: none; }

.ws-carousel__track {
  display: flex;
  gap: var(--ws-space-5);
}

.ws-carousel__track > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 600px) {
  .ws-carousel__track > * { flex-basis: calc((100% - var(--ws-space-5)) / 2); }
}
@media (min-width: 960px) {
  .ws-carousel__track > * { flex-basis: calc((100% - 2 * var(--ws-space-5)) / 3); }
}

.ws-carousel__arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  background: var(--ws-paper);
  border: var(--ws-border);
  border-radius: 50%;
  box-shadow: var(--ws-shadow);
  color: var(--ws-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.ws-carousel__arrow:hover { border-color: var(--ws-accent); color: var(--ws-accent); }
.ws-carousel__arrow:disabled { opacity: 0.35; cursor: default; }

.ws-carousel.is-scrollable .ws-carousel__arrow { display: inline-flex; }

.ws-carousel__arrow--prev { left: calc(-1 * var(--ws-space-3)); }
.ws-carousel__arrow--next { right: calc(-1 * var(--ws-space-3)); }

@media (min-width: 1100px) {
  .ws-carousel__arrow--prev { left: calc(-1 * var(--ws-space-7)); }
  .ws-carousel__arrow--next { right: calc(-1 * var(--ws-space-7)); }
}

/* --------------------------------------------------------- Карточка */

.ws-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ws-paper);
  border: var(--ws-border);
  border-radius: var(--ws-radius);
  overflow: hidden;
  transition: box-shadow var(--ws-transition), border-color var(--ws-transition);
}
.ws-card:hover { box-shadow: var(--ws-shadow-lifted); border-color: var(--ws-steel-300); }

.ws-card__media {
  aspect-ratio: 4 / 3;
  background: var(--ws-steel-50);
  overflow: hidden;
}
.ws-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Заглушка, пока заказчик не прислал фото */
.ws-card__media--empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ws-steel-300);
  font-family: var(--ws-font-data);
  font-size: var(--ws-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ws-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-3);
  padding: var(--ws-space-5);
  flex: 1;
}

.ws-card__title {
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-lg);
  line-height: 1.2;
}
.ws-card__title a { color: var(--ws-ink); text-decoration: none; }
.ws-card__title a:hover { color: var(--ws-accent); }

/* Карточка целиком кликабельна к странице позиции — растянутая ссылка
   поверх заголовка перекрывает всю площадь .ws-card (у неё уже
   position:relative выше). Второстепенные ссылки внутри ("Подробнее →")
   ведут туда же, так что перехват клика оверлеем ничего не меняет. */
.ws-card--clickable { cursor: pointer; }
.ws-card--clickable .ws-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ws-card__excerpt {
  margin: 0;
  font-size: var(--ws-text-sm);
  color: var(--ws-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Только каталог (по просьбе 14.09.2026) — описание товара чёрным, не приглушённым
   серым. .ws-card__excerpt общий класс для карточек по всему сайту, поэтому
   переопределяем через body-класс архива, а не сам класс. */
.post-type-archive-product .ws-card__excerpt { color: var(--ws-ink); }

/* Дата в карточке новости — тоже техданные, моноширинным, как цены и характеристики. */
.ws-card__date {
  font-family: var(--ws-font-data);
  font-size: var(--ws-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ws-ink-muted);
}

.ws-card__more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--ws-space-3);
  font-weight: 600;
  font-size: var(--ws-text-sm);
  color: var(--ws-accent-text);
  text-decoration: none;
}
.ws-card__more:hover { color: var(--ws-accent-text-hover); }

.ws-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ws-space-3);
  margin-top: auto;
  padding-top: var(--ws-space-3);
  border-top: var(--ws-border);
}

.ws-card__price {
  font-family: var(--ws-font-data);
  font-weight: 500;
  font-size: var(--ws-text-lg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ws-card__price--request { font-size: var(--ws-text-sm); color: var(--ws-ink-muted); }

/* Тёмный вариант карточки — прямая преемственность со старым сайтом */
.ws-card--steel {
  background: var(--ws-steel-700);
  border-color: var(--ws-steel-700);
  color: var(--ws-ink-invert);
}
/* Центрируем содержимое по вертикали — часть услуг без иконки/short_desc,
   и без этого заголовок повисает у верха с пустотой под ним (найдено 14.09.2026). */
.ws-card--steel .ws-card__body { justify-content: center; }
.ws-card--steel .ws-card__title a { color: var(--ws-ink-invert); }
.ws-card--steel .ws-card__title a:hover { color: var(--ws-accent); }
.ws-card--steel .ws-card__excerpt { color: rgba(255, 255, 255, 0.72); }
.ws-card--steel .ws-card__foot { border-top-color: rgba(255, 255, 255, 0.16); }
.ws-card--steel .ws-card__price { color: var(--ws-ink-invert); }
.ws-card--steel .ws-card__price--request { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------- Новости: hero + сайдбар */

/* Hero — самая свежая новость. Фото на всю карточку, текст поверх градиентом
   снизу. Media и body — оба position:absolute (порядок в DOM решает, что
   сверху), поэтому сама карточка сделана ссылкой <a>, а не div с растянутым
   ::after — тело перекрывает фото и само становится containing block, трюк
   с ::after накрыл бы только текстовую полосу снизу, а не всю карточку. */
.ws-news-hero {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ws-radius);
  background: var(--ws-steel-900);
  color: var(--ws-ink-invert);
  text-decoration: none;
  transition: box-shadow var(--ws-transition);
  /* На мобильном квадрат, а не 4:3 — эйброу + заголовок в 2 строки + анонс +
     дата иначе не помещаются в тёмную часть градиента. Сайдбар рядом (≥960px)
     сузил колонку с hero, поэтому широкий 21:9 кадр здесь ни к чему. */
  aspect-ratio: 1 / 1;
}
@media (min-width: 640px) { .ws-news-hero { aspect-ratio: 16 / 9; } }
.ws-news-hero:hover { box-shadow: var(--ws-shadow-lifted); }

.ws-news-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ws-news-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ws-news-hero .ws-card__media--empty { background: transparent; }

.ws-news-hero__body {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  padding: var(--ws-space-5) var(--ws-space-6) var(--ws-space-6);
  /* Текста в hero больше, чем в обычной карточке (есть анонс) — градиент
     затемняет бóльшую часть кадра, иначе верх заголовка сливается с фото. */
  background: linear-gradient(to top, rgba(27, 27, 28, 0.95) 0%, rgba(27, 27, 28, 0.8) 45%, rgba(27, 27, 28, 0.1) 85%, transparent 100%);
}

.ws-news-hero .ws-eyebrow { color: rgba(255, 255, 255, 0.78); }

.ws-news-hero__title {
  margin: var(--ws-space-2) 0 var(--ws-space-3);
  font-size: var(--ws-text-2xl);
}
.ws-news-hero__excerpt {
  /* Высота анонса ограничена двумя строками — иначе длинный excerpt раздувает
     тело блока выше границы, где градиент уже недостаточно тёмный. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 var(--ws-space-3);
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--ws-text-sm);
}
.ws-news-hero__date {
  display: block;
  font-family: var(--ws-font-data);
  font-size: var(--ws-text-xs);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
}

/* Раскладка: hero + вторая история в левой колонке, компактный список
   остальных новостей справа — пропорции как у блока «Most Popular / Latest»
   на OVRmag, но справа одна колонка, не две: метрики популярности у нас нет,
   дублировать один и тот же список под двумя разными заголовками не имеет
   смысла. Вторая история — тем же приёмом, что у OVRmag под hero: заполняет
   левую колонку до высоты списка справа, а не оставляет там пустоту. */
.ws-news-layout { display: grid; gap: var(--ws-space-6); }
@media (min-width: 960px) {
  .ws-news-layout { grid-template-columns: 2fr 1fr; align-items: start; }
}

.ws-news-main { display: flex; flex-direction: column; gap: var(--ws-space-5); }

/* Используется и на /news/, и на главной (front-page.php) — единственное
   большое фото слева должно быть точно той же высоты, что колонка из
   4 новостей справа. Не фиксируем число пикселей (оно поедет при другом
   количестве новостей или другой ширине экрана): вместо этого grid stretch —
   колонки растягиваются на высоту самой высокой (сайдбара), а hero занимает
   всю отведённую высоту вместо своего обычного aspect-ratio. */
@media (min-width: 960px) {
  .ws-news-layout--symmetric { align-items: stretch; }
  .ws-news-layout--symmetric .ws-news-hero { aspect-ratio: unset; flex: 1; }
}

/* На мобильном колонки не стоят рядом (см. .ws-news-layout ниже) — заголовок
   там обычный, в потоке, с отступом снизу. Абсолютное позиционирование
   (заголовок поднят над колонкой, чтобы первая миниатюра встала вровень
   с главным фото слева) включается только на десктопе, где это верно —
   иначе на мобильном заголовку не хватает места в зазоре между блоками
   и он налезает на карточку над ним. */
.ws-news-sidebar { display: flex; flex-direction: column; }
.ws-news-sidebar > .ws-eyebrow { margin-bottom: var(--ws-space-4); }
@media (min-width: 960px) {
  .ws-news-sidebar { position: relative; }
  .ws-news-sidebar > .ws-eyebrow {
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--ws-space-3));
    margin-bottom: 0;
  }
}

/* align-items:flex-start — не center: у заголовка (категория+название)
   высота от карточки к карточке разная (1-3 строки), и с центрированием
   подпись категории каждый раз стартовала на новой высоте относительно
   миниатюры. Прижатые к верху, миниатюра и подпись всегда на одном уровне,
   независимо от длины заголовка — заодно у первой карточки фото совпадает
   с верхом главного фото слева (см. .ws-news-sidebar выше). */
.ws-news-sidebar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ws-space-4);
  padding-block: var(--ws-space-4);
  border-top: var(--ws-border);
  text-decoration: none;
  color: inherit;
}
.ws-news-sidebar__item:first-of-type { border-top: none; padding-top: 0; }

.ws-news-sidebar__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: var(--ws-radius-sm);
  overflow: hidden;
  background: var(--ws-steel-50);
}
.ws-news-sidebar__thumb img { width: 100%; height: 100%; object-fit: cover; }

.ws-news-sidebar__body { min-width: 0; }
/* display:flex вместо унаследованного inline-flex: как строчный элемент,
   .ws-eyebrow подчинялся «строке» родителя (высота по line-height body,
   1.65) и получал невидимый отступ сверху по её половине — это и был
   зазор от миниатюры. Блочный flex сам определяет свою высоту и садится
   вровень с верхом. */
.ws-news-sidebar__body .ws-eyebrow { margin-bottom: var(--ws-space-1); display: flex; }
.ws-news-sidebar__title {
  margin: 0 0 var(--ws-space-1);
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-sm);
  line-height: 1.3;
  color: var(--ws-ink);
}
.ws-news-sidebar__item:hover .ws-news-sidebar__title { color: var(--ws-accent); }

/* Всё, что не влезло в hero + вторую историю + сайдбар (см. $sidebar_limit
   в page-news.php) — та же фото-карточка с градиентом и анонсом, что у hero,
   просто компактнее. Селекторы намеренно совпадают с .ws-news-hero: тот же
   приём «карточка — сама <a>» по той же причине (тело абсолютным
   позиционированием лежит поверх фото, обычный ::after накрыл бы не всё). */
.ws-news-grid-head { margin: var(--ws-space-7) 0 var(--ws-space-5); }

.ws-news-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ws-radius);
  background: var(--ws-steel-900);
  color: var(--ws-ink-invert);
  text-decoration: none;
  aspect-ratio: 4 / 3;
  transition: box-shadow var(--ws-transition);
}
.ws-news-card:hover { box-shadow: var(--ws-shadow-lifted); }

.ws-news-card__media { position: absolute; inset: 0; z-index: 0; }
.ws-news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ws-news-card .ws-card__media--empty { background: transparent; }

.ws-news-card__body {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  padding: var(--ws-space-4) var(--ws-space-5);
  /* Тот же более тёмный градиент, что у hero (не исходный, более лёгкий) —
     с анонсом текста стало больше, а верх заголовка иначе сливается с фото
     на светлых кадрах (та же проблема контраста, что чинили у hero). */
  background: linear-gradient(to top, rgba(27, 27, 28, 0.95) 0%, rgba(27, 27, 28, 0.75) 50%, rgba(27, 27, 28, 0.1) 88%, transparent 100%);
}
.ws-news-card .ws-eyebrow { color: rgba(255, 255, 255, 0.78); }

.ws-news-card__title {
  margin: var(--ws-space-1) 0 var(--ws-space-2);
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-lg);
  line-height: 1.2;
}
.ws-news-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 var(--ws-space-2);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--ws-text-sm);
}
.ws-news-card__date {
  display: block;
  font-family: var(--ws-font-data);
  font-size: var(--ws-text-xs);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------- CTA в конце главной */

.ws-cta {
  /* Зазор до чёрного фона реально берётся отсюда, не из padding у
     .ws-cta__inner — тот уже внутри чёрной области, снаружи не виден.
     Без этого margin-top снизу от кнопки «Все новости» до фона было
     16px (margin-bottom абзаца с кнопкой) против 32px сверху (карточка
     → кнопка) — вдвое меньше и заметно на глаз. var(--ws-space-6) здесь —
     тот же токен, что margin-top у самой кнопки, чтобы отступы совпадали
     ровно, а не просто были «похожи». */
  margin-top: var(--ws-space-6);
  background: var(--ws-steel-900);
  color: var(--ws-ink-invert);
}

.ws-cta__inner {
  /* padding-top отдельно от -bottom: переход в сплошной тёмный фон — не то
     же самое, что стык двух белых секций, ему нужен запас побольше тесного
     ритма (иначе кнопка «Все новости» слипается с чёрным блоком), но при
     этом отступ всё равно должен сжиматься на мобильном, а не быть плоским
     фиксированным числом. Низ остаётся крупным — это последний блок перед
     подвалом, а не переход между секциями. */
  padding-top: var(--ws-space-7);
  padding-bottom: var(--ws-space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ws-space-4);
  text-align: center;
}

@media (min-width: 768px) {
  .ws-cta__inner { padding-top: var(--ws-space-8); }
}

.ws-cta__inner h2 { margin: 0; color: var(--ws-ink-invert); }
.ws-cta__inner p { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------- О нас: фото гаража */

.ws-photo-grid { margin-bottom: var(--ws-space-8); }

.ws-photo-grid__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ws-radius);
  display: block;
  background: var(--ws-steel-50);
}

/* --------------------------------------------------------- О нас: команда (лента) */

/* --------------------------------------------------------- Шильдик характеристик */

.ws-spec {
  margin: 0;
  border-top: 3px solid var(--ws-accent);
  background: var(--ws-steel-50);
  border-radius: 0 0 var(--ws-radius-sm) var(--ws-radius-sm);
}

.ws-spec__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ws-space-4);
  align-items: baseline;
  padding: var(--ws-space-3) var(--ws-space-4);
  border-bottom: 1px solid var(--ws-steel-150);
}
.ws-spec__row:last-child { border-bottom: 0; }

.ws-spec__key {
  margin: 0;
  font-size: var(--ws-text-sm);
  color: var(--ws-ink-muted);
}

.ws-spec__value {
  margin: 0;
  font-family: var(--ws-font-data);
  font-weight: 500;
  font-size: var(--ws-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Иконка услуги в тизере на главной (front-page.php) */
.ws-service__icon { flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; }

/* --------------------------------------------------------- Услуги: редакционные развороты */
/*
 * Приём старого сайта (см. архив, remont-i-obsluzhivanie): фото и текст
 * чередуются по сторонам через позицию, зеркалим и здесь. Ничего не прячем
 * за клик — весь текст виден сразу, как было в оригинале. Короче, чем на
 * /services/ — у сотрудника один абзац био вместо описания услуги, и на
 * базовых 6rem люди «разъезжались» по разным экранам, отсюда модификатор
 * --tight вместо правки базового значения.
 */

.ws-feature-list {
  display: grid;
  gap: var(--ws-space-9);
  /* Тот же отступ, что у .ws-photo-grid — на «О нас» после блока команды
     идёт ещё один заголовок секции («Наша мастерская»), без отступа снизу
     он сидел бы вплотную. Раньше список команды всегда был последним
     блоком страницы, поэтому отступ не требовался. */
  margin-bottom: var(--ws-space-8);
}

.ws-feature-list--tight { gap: var(--ws-space-5); }

.ws-feature {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-5);
  scroll-margin-top: var(--ws-space-6);
}

.ws-feature__media {
  position: relative;
  width: 100%;
}
.ws-feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ws-radius);
  display: block;
  background: var(--ws-steel-50);
}

.ws-feature__media .ws-card__media--empty {
  background: var(--ws-steel-50);
  border: var(--ws-border);
}

.ws-feature__body { max-width: 62ch; }

.ws-feature__title {
  margin: 0 0 var(--ws-space-3);
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-2xl);
  line-height: 1.15;
}

.ws-feature__text { font-size: var(--ws-text-base); color: var(--ws-ink-muted); }
/* :where(p, div, ...) — не только штатный вывод редактора (<p>), но и текст,
   вставленный вместе с чужой HTML-обёрткой (см. div-абзацы, найденные
   14.09.2026 при вставке ответа Google AI Overview в поле "Описание"). */
.ws-feature__text :where(p, div, ul, ol) { margin: 0 0 var(--ws-space-3); }
.ws-feature__text :where(p, div, ul, ol):last-child { margin-bottom: 0; }

.ws-feature__duration {
  margin-top: var(--ws-space-3);
  font-family: var(--ws-font-data);
  font-size: var(--ws-text-xs);
  color: var(--ws-ink-muted);
}

@media (min-width: 760px) {
  .ws-feature { flex-direction: row; align-items: center; gap: var(--ws-space-8); }
  .ws-feature--reverse { flex-direction: row-reverse; }
  .ws-feature__media { flex: 0 0 48%; }
  .ws-feature__body { flex: 1 1 auto; }
  .ws-feature--reverse .ws-feature__body { text-align: right; }
}

/* --------------------------------------------------------- Каталог по категориям */

.ws-catalog-group + .ws-catalog-group { margin-top: var(--ws-space-8); }

/* Якорь быстрой навигации (id) стоит на самой .ws-catalog-group (см.
   page-services.php) — scroll-margin-top должен быть на элементе-цели
   прокрутки, а не на вложенном заголовке: у потомков браузер его не
   читает, и группа прокручивалась вплотную к шапке, пряча заголовок. */
.ws-catalog-group { scroll-margin-top: calc(85px + var(--ws-space-4)); }

.ws-catalog-group__title {
  margin-bottom: var(--ws-space-5);
  padding-bottom: var(--ws-space-3);
  border-bottom: var(--ws-border);
}

/* --------------------------------------------------------- Услуги: быстрая навигация + компактные карточки */

.ws-service-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-space-2);
  margin-bottom: var(--ws-space-8);
}
.ws-service-nav a {
  padding: var(--ws-space-2) var(--ws-space-4);
  border: var(--ws-border);
  border-radius: 999px;
  font-size: var(--ws-text-sm);
  font-weight: 600;
  color: var(--ws-ink);
  text-decoration: none;
  transition: border-color var(--ws-transition), color var(--ws-transition);
}
.ws-service-nav a:hover { border-color: var(--ws-accent-text); color: var(--ws-accent-text); }

.ws-service-list {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-8);
}

/* Фото ~40% ширины карточки (не миниатюра, но и не разворот на весь экран,
   как было раньше) — текст сразу виден целиком, без сворачивания: при таком
   объёме фото свободного места достаточно, прятать текст незачем. */
.ws-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-4);
  scroll-margin-top: calc(85px + var(--ws-space-4));
  position: relative;
  cursor: pointer;
}

/* Карточка целиком кликабельна на страницу услуги — тот же приём
   растянутой ссылки, что у карточек каталога/портфолио/новостей. */
.ws-service-card__title a { color: inherit; text-decoration: none; }
.ws-service-card__title a:hover { color: var(--ws-accent); }
.ws-service-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ws-service-card__media {
  border-radius: var(--ws-radius);
  overflow: hidden;
  background: var(--ws-steel-50);
  aspect-ratio: 4 / 3;
}
.ws-service-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 600px) {
  .ws-service-card { flex-direction: row; gap: var(--ws-space-6); }
  .ws-service-card__media { flex: 0 0 40%; }
}

.ws-service-card__body { flex: 1 1 auto; min-width: 0; }

.ws-service-card__title {
  margin: 0 0 var(--ws-space-3);
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-lg);
  line-height: 1.2;
}

.ws-service-card__duration {
  margin-top: var(--ws-space-3);
  font-family: var(--ws-font-data);
  font-size: var(--ws-text-xs);
  color: var(--ws-ink-muted);
}

.ws-card__badge {
  position: absolute;
  top: var(--ws-space-3);
  left: var(--ws-space-3);
  z-index: 1;
  padding: var(--ws-space-1) var(--ws-space-3);
  border-radius: var(--ws-radius-sm);
  background: var(--ws-accent);
  color: var(--ws-paper);
  font-family: var(--ws-font-data);
  font-size: var(--ws-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------- Страница товара / проекта */
/* Общий каркас для single-product.php и single-project.php: медиа слева,
   мета справа, развёрнутый текст — во всю ширину блоком ниже. */

.ws-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ws-space-2);
  margin-bottom: var(--ws-space-5);
  font-size: var(--ws-text-sm);
  font-weight: 600;
  color: var(--ws-ink-muted);
  text-decoration: none;
}
.ws-back-link:hover { color: var(--ws-accent); }

.ws-detail {
  display: grid;
  gap: var(--ws-space-6);
}

.ws-detail__media { position: relative; }

/* Главное фото обёрнуто в ссылку лайтбокса, поэтому селекторы идут и на
   прямого потомка (пустая заглушка), и через обёртку — иначе рамка,
   пропорции и скругление слетают ровно в тот момент, когда фото есть. */
.ws-detail__media > .ws-lightbox-item > img,
.ws-detail__media .ws-card__media--empty {
  border: var(--ws-border);
}
.ws-detail__media > .ws-lightbox-item { display: block; }
.ws-detail__media > .ws-lightbox-item > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ws-radius);
  display: block;
  background: var(--ws-steel-50);
}

@media (min-width: 760px) {
  .ws-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: start; gap: var(--ws-space-8); }

  /* Текст в правой колонке часто длиннее фото — приклеиваем медиа под шапкой,
     чтобы оно оставалось на виду, а не оставляло пустоту под собой. */
  .ws-detail__media { position: sticky; top: calc(85px + var(--ws-space-5)); }
}

.ws-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--ws-space-2);
  margin-top: var(--ws-space-2);
}
.ws-detail__thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ws-radius-sm);
  background: var(--ws-steel-50);
}

.ws-detail__info .ws-eyebrow { margin-bottom: var(--ws-space-3); }
.ws-detail__info h1 { margin-bottom: var(--ws-space-4); }

.ws-detail__price { margin-bottom: var(--ws-space-4); }
.ws-detail__price .ws-card__price { font-size: var(--ws-text-2xl); }

.ws-detail__lede {
  margin: 0 0 var(--ws-space-5);
  font-size: var(--ws-text-base);
  color: var(--ws-ink);
}

.ws-detail__info .ws-spec { margin-bottom: var(--ws-space-6); }

.ws-detail__actions { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); }

/* Текст (например описание сборки) прямо в колонке рядом с фото, не в отдельном блоке ниже. */
.ws-detail__text { color: var(--ws-ink-muted); }
.ws-detail__text p { margin: 0 0 var(--ws-space-3); }
.ws-detail__text p:last-child { margin-bottom: 0; }

.ws-detail__content {
  max-width: 62ch;
  margin-top: var(--ws-space-9);
  padding-top: var(--ws-space-7);
  border-top: var(--ws-border);
  scroll-margin-top: calc(85px + var(--ws-space-4)); /* якорь из карточки сборки не прячется под шапкой */
}
.ws-detail__content--wide { max-width: none; }
.ws-detail__content + .ws-detail__content { margin-top: var(--ws-space-7); padding-top: var(--ws-space-6); border-top: 0; }
.ws-detail__content h2 {
  margin-bottom: var(--ws-space-4);
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-2xl);
}
.ws-detail__content :where(p, div, ul, ol) { color: var(--ws-ink-muted); margin: 0 0 var(--ws-space-3); }

/* --------------------------------------------------------- Страница проекта */
/* Повторяет разворот старого сайта (archive/site/proekty/*.html), вплоть до
   пропорций его CSS: колонка 1024px, заголовок по центру, фото и первый абзац
   ровно по 48.5% с зазором 3%, дальше текст одной колонкой во всю ширину
   (.fulltext в оригинале). Фото на всю ширину экрана нет — снимков у проекта
   несколько, ни один не должен доминировать.

   Дальше идут наши блоки, которых у старого сайта не было: «Что установлено»
   бирками и сетка «Фотографии». */

.ws-project {
  max-width: 64rem; /* 1024px оригинала */
  margin-inline: auto;
}

.ws-project__head { margin-bottom: var(--ws-space-6); }
.ws-project__title { margin: var(--ws-space-3) 0 0; }

/* Заголовок новости: та же отбивка, что у .ws-project__title, но БЕЗ
   nowrap — там он оправдан короткими именами машин, здесь заголовки
   бывают целым предложением и должны переноситься как обычный h1. */
.ws-article__title { margin: var(--ws-space-3) 0 0; }

/* Обложка новости: та же рамка 4:3, что у картинок внутри текста и у карточек,
   и та же сдержанная ширина — фото не должно доминировать над текстом. */
.ws-article__cover { margin-bottom: var(--ws-space-6); }
.ws-article__cover img {
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ws-radius);
  margin-inline: auto;
  display: block;
}

/* Короткие имена машин держим в одну строку — так принят макет. Но поле
   редактирует заказчик, и nowrap на произвольной строке даёт горизонтальный
   скролл всей страницы. Поэтому запрет переноса снят, а «в одну строку»
   обеспечивается кеглем, привязанным к ширине экрана: короткое имя всё равно
   не переносится, длинное переносится вместо того, чтобы ломать раскладку. */
@media (min-width: 760px) {
  .ws-project__title {
    font-size: min(var(--ws-text-3xl), 4.5vw);
    text-wrap: balance;
  }
}

/* Фото и первый абзац — .textblock оригинала: поровну, зазор 3%. */
.ws-project-intro {
  display: grid;
  gap: var(--ws-space-5);
  margin-bottom: var(--ws-space-6);
}

@media (min-width: 760px) {
  .ws-project-intro {
    grid-template-columns: 48.5% 48.5%;
    justify-content: space-between;
    align-items: start;
    gap: 3%;
  }

  /* Только у услуги: фото карточки меньше и не заполняет всю высоту
     колонки текста (в отличие от нескольких проектных фото), поэтому текст
     центрируем по вертикали относительно фото, а не прижимаем к его верху. */
  .ws-project-intro--centered {
    align-items: center;
  }
}

/* Без обрезки по фиксированной пропорции: в оригинале снимок показан целиком,
   какой прислали. Пропорция задана только заглушке, чтобы не схлопывалась. */
.ws-project-intro__media > img {
  width: 100%;
  height: auto;
  border-radius: var(--ws-radius);
  border: var(--ws-border);
  display: block;
  background: var(--ws-steel-50);
}
.ws-project-intro__media .ws-card__media--empty {
  aspect-ratio: 4 / 3;
  border-radius: var(--ws-radius);
  border: var(--ws-border);
}

.ws-project-intro__text {
  font-size: var(--ws-text-base);
  color: #000;
}
/* :where(p, div, ...) — см. комментарий у .ws-feature__text про вставку
   чужой HTML-обёртки (div-абзацы) вместо штатных <p> редактора. */
.ws-project-intro__text :where(p, div, ul, ol) { margin: 0 0 var(--ws-space-3); }
.ws-project-intro__text :where(p, div, ul, ol):last-child { margin-bottom: 0; }

/* Остальной текст — одной колонкой во всю ширину, как .fulltext оригинала.
   Чисто чёрный, не приглушённый серый (--ws-ink-muted) — по прямой просьбе;
   класс общий для новостей (single.php) и страницы проекта (single-project.php). */
.ws-project-body { color: #000; }
.ws-project-body :where(p, div) { margin: 0 0 var(--ws-space-4); }
.ws-project-body :where(p, div):last-child { margin-bottom: 0; }
.ws-project-body ul, .ws-project-body ol { margin: 0 0 var(--ws-space-4); }

/* Подзаголовки внутри текста — у h1–h4 в базовых стилях margin:0, так что
   без этого правила заголовок вплотную слипался со списком/абзацем сразу
   под ним. Сверху отступ крупнее (отделить от предыдущего блока), снизу —
   как между обычными абзацами. */
.ws-project-body h2, .ws-project-body h3 {
  margin: var(--ws-space-7) 0 var(--ws-space-4);
  color: var(--ws-ink);
}
.ws-project-body > h2:first-child, .ws-project-body > h3:first-child { margin-top: 0; }

/* Картинки, вставленные прямо в текст (новости, «О компании») — иначе
   редактор WordPress вставляет их в исходном размере файла, и один
   портретный кадр может растянуться на весь экран. Та же рамка 4:3
   и object-fit, что у карточек по всему сайту — единообразно и не
   зависит от того, какого размера/ориентации фото прислали. Ширина
   меньше колонки — фото не должно доминировать над текстом (тот же
   принцип, что на странице проекта). */
.ws-project-body figure { margin: 0 0 var(--ws-space-5); }

/* Кадр показываем целиком: рамка 4:3 с object-fit:cover срезала у вертикальных
   снимков верх и низ. Ограничиваем не пропорции, а габарит — по ширине колонки
   и по высоте, — а размеры оставляем авто. Тогда горизонтальный кадр занимает
   ширину колонки, вертикальный упирается в потолок высоты и остаётся
   соразмерным тексту (фото не должно доминировать), и ни один не обрезается.
   width/height: auto обязательны: у картинок из редактора есть атрибуты
   width и height, и без этого второй габарит не пересчитается по первому. */
.ws-project-body img {
  max-width: min(100%, 40rem);
  max-height: 34rem;
  width: auto;
  height: auto;
  border-radius: var(--ws-radius);
  display: block;
  margin-inline: auto;
}

/* Видео из блока «Видео» — тот же габарит, что у картинок в тексте: ядро
   WordPress само растягивает video на 100% колонки (.wp-block-video video),
   и у вертикального ролика это даёт огромную высоту. Селектор специфичнее
   базового правила ядра, иначе оно не перекроется. */
.ws-project-body .wp-block-video video {
  max-width: min(100%, 40rem);
  max-height: 34rem;
  width: auto;
  height: auto;
  border-radius: var(--ws-radius);
  display: block;
  margin-inline: auto;
}

.ws-project-block {
  margin-top: var(--ws-space-8);
  padding-top: var(--ws-space-6);
  border-top: var(--ws-border);
  scroll-margin-top: calc(85px + var(--ws-space-4));
}
.ws-project-block h2 {
  margin-bottom: var(--ws-space-4);
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-2xl);
}

/* Видео из отдельного поля Pods (не из блока редактора) — тот же габарит,
   что у картинок в тексте: без ограничения вертикальный ролик растягивался
   бы на всю ширину колонки и доминировал над страницей. */
.ws-project-block video {
  max-width: min(100%, 40rem);
  max-height: 34rem;
  width: auto;
  height: auto;
  border-radius: var(--ws-radius);
  display: block;
  margin-inline: auto;
}

.ws-project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ws-space-3);
}
.ws-project-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ws-radius);
  border: var(--ws-border);
  background: var(--ws-steel-50);
}

/* Бирки деталей: та же насечка-маркер, что у .ws-eyebrow, но карточкой —
   ближе к тому, как в мастерской подписывают снятые/поставленные узлы. */
.ws-parts-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ws-space-2) var(--ws-space-3);
}
.ws-parts-grid li {
  position: relative;
  padding: var(--ws-space-3) var(--ws-space-4) var(--ws-space-3) var(--ws-space-5);
  background: var(--ws-steel-50);
  border-radius: var(--ws-radius-sm);
  font-size: var(--ws-text-sm);
  line-height: 1.4;
  color: var(--ws-ink);
}
.ws-parts-grid li::before {
  content: '';
  position: absolute;
  left: var(--ws-space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 2px;
  background: var(--ws-accent);
}

/* --------------------------------------------------------- Заглушка-уведомление */

.ws-notice {
  padding: var(--ws-space-5);
  border: 1px dashed var(--ws-steel-300);
  border-radius: var(--ws-radius);
  background: var(--ws-steel-50);
  color: var(--ws-ink-muted);
  font-size: var(--ws-text-sm);
}
.ws-notice p:last-child { margin-bottom: 0; }

.ws-alert {
  padding: var(--ws-space-4) var(--ws-space-5);
  border-radius: var(--ws-radius);
  font-size: var(--ws-text-sm);
  margin-bottom: var(--ws-space-6);
}
.ws-alert--success { background: #eaf6ec; color: #1e6b2e; }
.ws-alert--error { background: #fbeae8; color: var(--ws-accent-deep); }

/* --------------------------------------------------------- Контакты и форма заявки */

/* Разворот «карта слева — контакты справа»: та же `.textblock` старого сайта,
   что и на странице проекта, вплоть до чисел его CSS (архив, style.css:94–96) —
   обе колонки по 48.5%, зазор 3%. Раскладку страницы взяли из оригинала, а
   оформление внутри — наше. */
.ws-contacts {
  display: grid;
  gap: var(--ws-space-5);
  margin-bottom: var(--ws-space-6);
}

@media (min-width: 760px) {
  .ws-contacts {
    grid-template-columns: 48.5% 48.5%;
    justify-content: space-between;
    align-items: start;
    gap: 3%;
  }
}

.ws-contacts__map {
  border: var(--ws-border);
  border-radius: var(--ws-radius);
  overflow: hidden;
}
.ws-contacts__map iframe { display: block; border: 0; }
/* Пока координат нет — та же пропорция, что у карты, чтобы разворот не съезжал. */
.ws-contacts__map .ws-card__media--empty { aspect-ratio: 4 / 3; }

/* Крупнее обычного текста: на старом сайте контакты на этой странице шли
   кеглем 20–22px — это не проза, а то, ради чего страницу открывают. */
.ws-contacts__info { font-size: var(--ws-text-lg); line-height: 1.5; }
.ws-contacts__info p { margin: 0 0 var(--ws-space-5); }
.ws-contacts__info p:last-child { margin-bottom: 0; }

/* Телефон, почта и соцсети здесь — кликабельные, и это должно быть видно
   без наведения: на странице контактов по ним и приходят. Текст оставляем
   основным цветом (иначе половина блока станет оранжевой), а сигналом
   служит подчёркивание фирменным акцентом — та же роль, что у насечек
   .ws-eyebrow: оранжевый размечает, а не заливает. */
.ws-contacts__info a {
  color: var(--ws-ink);
  text-decoration: underline;
  text-decoration-color: var(--ws-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.ws-contacts__info a:hover {
  color: var(--ws-accent-text);
  text-decoration-color: currentColor;
}

.ws-contacts__address {
  font-family: var(--ws-font-display);
  font-weight: 900;
  font-size: var(--ws-text-xl);
  line-height: 1.2;
}

/* Телефон и почта — техданные, как цены и характеристики по всему сайту. */
.ws-contacts__line { font-family: var(--ws-font-data); font-variant-numeric: tabular-nums; }

.ws-contacts__hours { color: var(--ws-ink-muted); }

/* Две колонки в форме: имя и телефон короткие, в столбик они растягивают
   форму и отодвигают кнопку за первый экран. */
.ws-form__grid { display: grid; gap: var(--ws-space-4); }

@media (min-width: 560px) {
  .ws-form__grid { grid-template-columns: 1fr 1fr; }
}

.ws-form {
  padding: var(--ws-space-6);
  background: var(--ws-steel-50);
  border-radius: var(--ws-radius);
}
.ws-form__row { margin-bottom: var(--ws-space-4); }
.ws-form label {
  display: block;
  font-size: var(--ws-text-sm);
  font-weight: 600;
  margin-bottom: var(--ws-space-2);
}
.ws-form input[type="text"],
.ws-form input[type="tel"],
.ws-form textarea {
  width: 100%;
  padding: var(--ws-space-3) var(--ws-space-4);
  border: 1px solid var(--ws-steel-300);
  border-radius: var(--ws-radius-sm);
  background: var(--ws-paper);
}
.ws-form textarea { resize: vertical; min-height: 6rem; }
.ws-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ws-form .ws-btn { border: none; cursor: pointer; }

/* Согласие 152-ФЗ. Мельче основного текста, но не спрятано и не серее, чем
   читается: согласие должно быть информированным, иначе оно ничего не стоит.
   Чекбокс крупнее браузерного дефолта — по нему целятся пальцем. */
.ws-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ws-space-3);
  margin-bottom: var(--ws-space-5);
}
.ws-form__consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  accent-color: var(--ws-accent);
}
.ws-form__consent label {
  margin: 0;
  font-size: var(--ws-text-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ws-ink-muted);
}

/* Товар, по которому пришли с карточки: контекст заявки, а не поле ввода. */
.ws-form__subject {
  margin: 0 0 var(--ws-space-5);
  padding: var(--ws-space-3) var(--ws-space-4);
  border-left: 3px solid var(--ws-accent);
  background: var(--ws-paper);
  border-radius: 0 var(--ws-radius-sm) var(--ws-radius-sm) 0;
  font-size: var(--ws-text-sm);
}

/* --------------------------------------------------------- Лайтбокс */

.ws-lightbox {
  padding: 0;
  border: 0;
  border-radius: var(--ws-radius);
  background: transparent;
  max-width: min(92vw, 1200px);
  max-height: 92vh;
  overflow: visible;
}
.ws-lightbox::backdrop { background: rgba(27, 27, 28, 0.88); }
.ws-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  border-radius: var(--ws-radius);
}
.ws-lightbox__close {
  position: absolute;
  top: calc(-1 * var(--ws-space-7));
  right: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--ws-paper);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Стрелки — только когда в галерее больше одного кадра (класс ставит JS). */
.ws-lightbox__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(27, 27, 28, 0.55);
  border: 0;
  border-radius: 50%;
  color: var(--ws-paper);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.ws-lightbox--nav .ws-lightbox__nav { display: block; }
.ws-lightbox__nav--prev { left: var(--ws-space-3); }
.ws-lightbox__nav--next { right: var(--ws-space-3); }
.ws-lightbox__nav:hover { background: rgba(27, 27, 28, 0.8); }

.ws-lightbox-item { display: block; cursor: pointer; }

/* --------------------------------------------------------- Плашка cookie */

/* Полоса внизу экрана: не модальное окно — читать сайт она не мешает и фокус
   не запирает. Показывает её скрипт, до этого работает атрибут hidden. */
.ws-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ws-steel-900);
  color: var(--ws-ink-invert);
  border-top: 3px solid var(--ws-accent);
}
.ws-cookie[hidden] { display: none; }

.ws-cookie__inner {
  display: grid;
  gap: var(--ws-space-4);
  padding-block: var(--ws-space-4);
}

.ws-cookie__text {
  margin: 0;
  font-size: var(--ws-text-sm);
  color: rgba(255, 255, 255, 0.85);
}

/* Тот же урок, что в подвале: базовый акцент #c22d15 по тёмному фону даёт
   контраст около 1.8:1 и ссылка практически не видна. Красим светлым. */
.ws-cookie__text a {
  color: var(--ws-ink-invert);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 0.2em;
}
.ws-cookie__text a:hover { color: var(--ws-accent); text-decoration-color: currentColor; }

.ws-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-space-3);
}
.ws-cookie__actions .ws-btn { flex: 1 1 auto; }

@media (min-width: 768px) {
  .ws-cookie__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--ws-space-6);
  }
  .ws-cookie__actions { flex-wrap: nowrap; }
  .ws-cookie__actions .ws-btn { flex: 0 0 auto; }
}