/* Стили страницы /equipment.
   Перенесены из встроенного <style> в views/equipment.ejs (2026-09-26). Подключаются только на этой
   странице, тем же местом в <head>, где стоял блок, — порядок каскада прежний.
   Правки внешнего вида этой страницы — здесь, не в шаблоне. */

/* Страница оборудования (с 2026-09-06 — отдельная, блок снят с главной по указанию Босса).
   Шапка/бургер/футер — копия главной с абсолютными ссылками (helper abs), разметка блока — из home.ejs как была. */
.u-nav-spacer { height: 64px; }
.nav-logo { text-decoration: none; color: inherit; }
.nav-links a[href="/equipment"] { color: var(--gold); }
/* Карточки разделов без цен (проекция, спецэффекты, сцена, караоке; Босс 2026-09-26) — тот же .ebc, вместо
   «S / 25 000 ₽» — название и «Стоимость по запросу». .ebc-fill толкает кнопку вниз: в ряду кнопки на одной линии. */
.ebc--plain .ebc-name { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 400; line-height: 1.2; color: var(--dark); margin-bottom: 6px; }
.ebc--plain .ebc-note { font-size: 0.72rem; color: var(--soft); letter-spacing: 0.04em; margin-bottom: 10px; }
.ebc--plain .ebc-list { margin-top: 6px; }
.ebc--plain .ebc-fill { flex: 1; }
.ebc--plain .ebc-ask { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); margin: 4px 0 14px; }
/* строка под «В пакет входит»: что НЕ входит и обговаривается отдельно (Босс 2026-09-26: технический специалист) */
.eq-includes-note { margin-top: 12px; }
/* Красная звёздочка-оговорка у цен и у «Стоимость по запросу» — как у пакетов главной (Босс 2026-09-26). Кнопка и подсказка —
   общие классы .pkg-note-btn/.pkg-note-pop (v3.css, клик/клавиатура — v3.js); здесь размер (в пакетах он от --pk-text) и
   сторона раскрытия: цена справа в карточке, поэтому подсказка открывается влево, у «по запросу» — вправо.
   ⚠️ Звёздочка — СОСЕД .ebc-pr, не внутри: калькулятор берёт цену из текста .ebc-pr. */
.ebc-prline { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; }
.ebc-prline--left { justify-content: flex-start; }
.eq-note-btn { font-size: 1.7rem; margin-left: 3px; }
.eq-note-pop { left: auto; right: 0; bottom: auto; top: calc(100% + 8px);
  text-transform: none; letter-spacing: normal; font-weight: 400; color: #3b3833; font-size: 0.78rem; }   /* у «по запросу» наследовались капитель и золото подписи */
.ebc-prline--left .eq-note-pop { left: 0; right: auto; }
.ebc-ask.ebc-prline .eq-note-btn { font-size: 1.5rem; }
/* ДО / ПОСЛЕ — ручка и линия того же рисунка, что на экране форматов главной (.fx-knob/.fx-line в v3.css). */
.eq-ba { --ba: 50; position: relative; margin-top: 28px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(230,199,122,.45); box-shadow: 0 14px 40px rgba(0,0,0,.18); user-select: none; touch-action: pan-y; background: #1c1a16; }
.eq-ba-layer { position: absolute; inset: 0; }
.eq-ba-layer img, .eq-ba-ph { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.eq-ba-layer--after { clip-path: inset(0 0 0 calc(var(--ba) * 1%)); }
.eq-ba-ph { display: grid; place-items: center; font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
/* подписи заглушек — в своих половинах, иначе обе по центру и накладываются */
.eq-ba-ph--before {
  background: linear-gradient(135deg, #3a3631, #25221e); color: rgba(245,237,224,.55);
  justify-content: start; padding-left: 12%;
}
.eq-ba-ph--after {
  justify-content: end; padding-right: 12%;
  background: radial-gradient(circle at 70% 30%, rgba(230,199,122,.55), rgba(154,122,50,.25) 45%, #2a2016 80%); color: #f1d894;
}
.eq-ba-tag { position: absolute; top: 16px; padding: 6px 14px; border-radius: 999px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; background: rgba(22,18,13,.7); color: #e6c77a; border: 1px solid rgba(230,199,122,.5); }
.eq-ba-tag--before { left: 16px; }
.eq-ba-tag--after { right: 16px; }
.eq-ba-line { position: absolute; top: 0; bottom: 0; z-index: 3; width: 28px; left: calc(var(--ba) * 1%); transform: translateX(-50%); cursor: ew-resize; }
.eq-ba-line::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(to bottom, rgba(230,199,122,0), rgba(230,199,122,.9) 18%, rgba(230,199,122,.9) 82%, rgba(230,199,122,0)); }
.eq-ba-knob { position: absolute; z-index: 4; top: 50%; left: clamp(34px, calc(var(--ba) * 1%), calc(100% - 34px)); transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: ew-resize; touch-action: none;
  background: rgba(22,18,13,.78); color: #e6c77a; border: 1px solid rgba(230,199,122,.8);
  box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 6px rgba(230,199,122,.12); backdrop-filter: blur(6px); transition: box-shadow .2s, background .2s; }
.eq-ba-knob:hover, .eq-ba-knob.is-drag { background: rgba(22,18,13,.92); box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 10px rgba(230,199,122,.18); }
.eq-ba-knob:focus-visible { outline: 2px solid #e6c77a; outline-offset: 4px; }
@media (max-width: 640px) { .eq-ba { aspect-ratio: 4 / 3; } .eq-ba-knob { width: 46px; height: 46px; } }
/* Несколько залов (Босс 2026-09-26): слайды друг на друге, стрелки по бокам по центру высоты — в рисунке ручки.
   Ручка у краёв останавливается, не доходя до стрелок (линия уходит до края, как и раньше). */
.eq-ba-slide { position: absolute; inset: 0; }
.eq-ba-slide.is-in { z-index: 1; animation: eqBaIn .38s ease both; }
@keyframes eqBaIn { from { opacity: 0; } to { opacity: 1; } }
.eq-ba-nav { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: rgba(22,18,13,.72); color: #e6c77a; border: 1px solid rgba(230,199,122,.7);
  box-shadow: 0 4px 16px rgba(0,0,0,.3); backdrop-filter: blur(6px); transition: background .2s, box-shadow .2s; }
.eq-ba-nav--prev { left: 14px; }
.eq-ba-nav--next { right: 14px; }
.eq-ba-nav:hover { background: rgba(22,18,13,.92); box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 6px rgba(230,199,122,.16); }
.eq-ba-nav:focus-visible { outline: 2px solid #e6c77a; outline-offset: 3px; }
.eq-ba--multi .eq-ba-knob { left: clamp(98px, calc(var(--ba) * 1%), calc(100% - 98px)); }
.eq-ba-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .eq-ba-nav { width: 38px; height: 38px; }
  .eq-ba-nav--prev { left: 8px; }
  .eq-ba-nav--next { right: 8px; }
  .eq-ba--multi .eq-ba-knob { left: clamp(78px, calc(var(--ba) * 1%), calc(100% - 78px)); }
}
@media (prefers-reduced-motion: reduce) { .eq-ba-slide.is-in { animation: none; } }
/* ГАЛЕРЕЯ — две ленты во всю ширину экрана (Босс 2026-09-26: фото 1:1, видео 9:16, листать).
   Лента выходит из .wrap до краёв (vw делится на --site-zoom — на широких мониторах контент масштабирован)
   и начинается прямо от левого края экрана (Босс: «от левого края до правого» — без отступа по линии текста). */
.eq-sub { margin: 36px 0 14px; font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-text, #7d6428); }
#eq-gallery + .eq-sub { margin-top: 24px; }
.eq-strip { --eq-vw: calc(100vw / var(--site-zoom, 1));
  position: relative; margin-inline: calc(50% - var(--eq-vw) / 2); }
.eq-strip-track { list-style: none; margin: 0; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 4px 0 10px; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.eq-strip-track::-webkit-scrollbar { display: none; }
.eq-strip-track:focus-visible { outline: 2px solid var(--gold-btn, #9a7a32); outline-offset: -2px; }
.eq-strip-item { flex: none; scroll-snap-align: start; overflow: hidden; border-radius: 8px; border: 0.5px solid var(--border);
  background: var(--cream-dark); }
.eq-strip-item--photo { width: clamp(280px, 32vw, 480px); aspect-ratio: 1 / 1; }
.eq-strip-item--video { width: clamp(170px, 16vw, 250px); aspect-ratio: 9 / 16; }
.eq-strip-item picture, .eq-strip-item img, .eq-strip-item video { display: block; width: 100%; height: 100%; }
.eq-strip-item img, .eq-strip-item video { object-fit: cover; }
.eq-strip-item--photo img { transition: transform .5s; }
.eq-strip-item--photo:hover img { transform: scale(1.04); }
.eq-strip-item--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-family: 'Jost', sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.eq-strip-play { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(154,122,50,.5); position: relative; }
.eq-strip-play::after { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border: 7px solid transparent; border-left: 11px solid rgba(154,122,50,.7); border-right: 0; }
/* Фото — кнопка: открывает общий лайтбокс */
.eq-photo { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.eq-photo:focus-visible { outline: 2px solid #e6c77a; outline-offset: -2px; }
/* Видео: обложка-кнопка (как карточки рилсов главной), по нажатию — лайтбокс в корпусе телефона */
.eq-vid { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #1c1a16; }
.eq-vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eq-vid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10,8,6,.35), rgba(10,8,6,0) 35%, rgba(10,8,6,0) 65%, rgba(10,8,6,.55)); }
.eq-vid-play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85); background: rgba(16,13,10,.45); backdrop-filter: blur(4px); transition: transform .2s, background .2s; }
.eq-vid-play::after { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border: 9px solid transparent; border-left: 14px solid #fff; border-right: 0; }
.eq-vid:hover .eq-vid-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(16,13,10,.65); }
.eq-vid:focus-visible { outline: 2px solid #e6c77a; outline-offset: -2px; }
.eq-vid-dur { position: absolute; z-index: 1; right: 10px; bottom: 10px; font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .06em; color: rgba(245,239,227,.92); }
.eq-vid-player { background: #000; }
/* стрелки — как у «Зал до и после»; на тачскрине не нужны (листают пальцем) */
.eq-strip-nav { position: absolute; z-index: 2; top: calc(50% - 3px); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: rgba(22,18,13,.72); color: #e6c77a; border: 1px solid rgba(230,199,122,.7);
  box-shadow: 0 4px 16px rgba(0,0,0,.3); backdrop-filter: blur(6px); transition: background .2s, box-shadow .2s, opacity .2s; }
.eq-strip-nav--prev { left: 16px; }
.eq-strip-nav--next { right: 16px; }
.eq-strip-nav:hover { background: rgba(22,18,13,.92); box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 6px rgba(230,199,122,.16); }
.eq-strip-nav:focus-visible { outline: 2px solid #e6c77a; outline-offset: 3px; }
.eq-strip-nav:disabled { opacity: 0; pointer-events: none; }
.eq-strip.is-static .eq-strip-nav { display: none; }
@media (hover: none) { .eq-strip-nav { display: none; } }
@media (max-width: 640px) { .eq-strip-item--photo { width: 80vw; } .eq-strip-item--video { width: 44vw; } }
@media (prefers-reduced-motion: reduce) { .eq-strip-item--photo img { transition: none; } .eq-strip-item--photo:hover img { transform: none; } }
.eq-ba + .eq-calc-title, #eq-gallery { margin-top: 56px; }
#eq-ba-title { margin-top: 0; }
.eq-strip + .eq-group, .eq-strip ~ .eq-group:first-of-type { margin-top: 56px; }
/* калькулятор после ленты видео (с 2026-09-30 он стоит между галереей и каталогом) — тот же воздух, что у групп */
.eq-strip + .eq-calc-title { margin-top: 56px; }
/* Фон под комплектами и калькулятором — та же пара вертикальных кадров, что под статьями /blog (Босс 2026-09-25:
   «те 2 фона, что в блоге вертикальные, — фон после шапки в оборудовании»): FON2 | FON3 бок к боку, пара
   повторяется вниз. Файлы — public/images/blog-page/blog-pair-* (сборка tools/make_blog_page_bg.py), общие с блогом.
   Шапка 16:9 — отдельной задачей, ждём фото от Босса (Я.Диск felix-site_materials/Page_Equipment/). */
#equipment {
  background-color: #f5f3ee;
  background-image: url('/images/blog-page/blog-pair.jpg');
  background-image: image-set(url('/images/blog-page/blog-pair-1920.webp') type('image/webp'), url('/images/blog-page/blog-pair.jpg') type('image/jpeg'));
  background-size: 100% auto; background-repeat: repeat-y; background-position: center top;
}
@media (max-width: 960px) {
  #equipment { background-image: image-set(url('/images/blog-page/blog-pair-1280.webp') type('image/webp'), url('/images/blog-page/blog-pair-1280.jpg') type('image/jpeg')); }
}
/* ШАПКА 16:9 (Босс 2026-09-25: «горизонтальная шапка 16:9, как в блоге»). Кадр — Я.Диск Page_Equipment/equipment_fon.webp,
   сборка tools/make_equipment_hero.py → make_variants.js. Пропорция шапки = пропорции кадра: виден ЦЕЛИКОМ, без обрезки.
   padding-top 120 — под фиксированную шапку сайта 64px + воздух, как у /blog. */
/* Шапка — стандарт 2:1 для всех внутренних страниц (Босс 2026-09-30: «не подгонять шапку под пропорции изображения один в один»); кадр — cover, точка фокуса — background-position. */
.eq-hero {
  position: relative; isolation: isolate;
  aspect-ratio: 2 / 1; padding: 120px 0 64px;
  background-color: #f5f3ee;
  background-image: url('/images/equipment-page/equipment-hero-1920.jpg');
  background-image: image-set(url('/images/equipment-page/equipment-hero-1920.webp') type('image/webp'), url('/images/equipment-page/equipment-hero-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: center;
  border-bottom: 0.5px solid rgba(28,26,22,0.10);
}
/* светлая вуаль слева — под текстом шапки (как у /blog) */
.eq-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,243,238,0.94) 0%, rgba(245,243,238,0.84) 34%, rgba(245,243,238,0.25) 62%, rgba(245,243,238,0) 78%);
}
/* Типографика — 1-в-1 со шапкой /blog (.blog-hero в views/blog.ejs; Босс 2026-09-25: «чтобы не отличалось»). Правите там —
   правьте и здесь. */
.eq-hero .label { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #9a7a32; margin-bottom: 14px; }
/* ⚠️ Заголовок длиннее блогового: без потолка он шёл одной строкой до 1360px и слово «ваше» ложилось на правую колонку кадра.
   8em — ~640px при 1920: три строки («Подберём комплект / под ваше / мероприятие»), правый край ~1070px — не доходит до
   правой колонки кадра (~1145px); 9em давал две строки и упирался в неё. */
.eq-hero h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; color: #1c1a16; line-height: 1.1; margin-bottom: 16px;
  max-width: 8em;
}
.eq-hero h1 + p { font-size: 0.95rem; color: #4a4640; max-width: 520px; line-height: 1.8; }
/* «Все / Звук / Свет» в шапке — вид фильтра /blog (.blog-filter-btn): белые чипы с золотистой рамкой и тенью, выбранный — золотая
   заливка, hover без заливки. Классы .fa-tabs/.fa-tab остаются (скрипт и /formats), здесь переопределены. */
.eq-hero .fa-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; }
.eq-hero .fa-tab { min-height: 0; display: inline-flex; align-items: center; padding: var(--btn-py-sm) var(--btn-px-sm); border: var(--btn-bw) solid rgba(154,122,50,0.35); border-radius: var(--radius); background: #fff; color: #1c1a16; font-family: 'Jost', sans-serif; font-size: var(--btn-font-sm); font-weight: var(--btn-weight); letter-spacing: var(--btn-ls-sm); text-transform: uppercase; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px rgba(28,26,22,0.08); transition: background var(--btn-ease), color var(--btn-ease), border-color var(--btn-ease), transform var(--btn-ease), box-shadow var(--btn-ease); }
.eq-hero .fa-tab:hover { border-color: var(--gold-btn); color: var(--gold-text); transform: translateY(var(--btn-lift)); box-shadow: 0 8px 20px rgba(28,26,22,0.12); }
.eq-hero .fa-tab[aria-pressed="true"] { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
.eq-hero .fa-tab:active { transform: translateY(var(--btn-press)); }
@media (max-width: 640px) {
  .eq-hero .fa-tabs { gap: 8px; margin-top: 24px; }
  .eq-hero .fa-tab { padding: var(--btn-py-xs) var(--btn-px-xs); font-size: 12px; }
}
@media (min-width: 1921px) {
  .eq-hero { background-image: image-set(url('/images/equipment-page/equipment-hero-2560.webp') type('image/webp'), url('/images/equipment-page/equipment-hero.jpg') type('image/jpeg')); }
}
@media (max-width: 960px) {
  .eq-hero { background-image: image-set(url('/images/equipment-page/equipment-hero-1280.webp') type('image/webp'), url('/images/equipment-page/equipment-hero-1280.jpg') type('image/jpeg')); }
}
@media (max-width: 760px) {
  /* на телефоне кадр целиком по ширине внизу шапки, текст — над ним на кремовом (как у /blog) */
  .eq-hero { aspect-ratio: auto; padding-bottom: calc(50vw + 12px); background-size: 100% auto; background-position: 50% calc(100% + 3.125vw); }
  .eq-hero::before { background: linear-gradient(to top, rgba(245,243,238,0) 0, rgba(245,243,238,0) calc(50vw - 70px), rgba(245,243,238,1) calc(50vw + 12px)); }
}

/* Креатив в фото-поле карточки (Босс 2026-09-26, Я.Диск Page_Equipment/cards): квадрат 1:1 во всё поле.
   Поле без креатива (плазмы, LED-экран, «Другое…») — прежнее, со значком. */
.ebc-photo-slot--img { padding: 0; gap: 0; overflow: hidden; background: #fff; }
.ebc-photo-slot--img picture,
.ebc-photo-slot--img img { display: block; width: 100%; height: 100%; }
.ebc-photo-slot--img img { object-fit: cover; }
/* Заголовки разделов «Зал до и после», «Галерея» — на телефоне как у групп комплектов (v3.css, ≤760):
   название сжимается рядом с номером, подпись — строкой ниже (иначе длинная «Галерея оборудования»
   выталкивала подпись за край экрана). */
@media (max-width: 760px) {
  .eq-calc-title { flex-wrap: wrap; }
  .eq-calc-title > .eq-group-name { flex: 1 1 0; min-width: 0; }
}

/* ШИРОКАЯ КОЛОНКА 1456px — как у /blog и /events (Босс 2026-09-30, вариант «а»): левый край шапки и карточек
   один на всех внутренних страницах, при переходах заголовок не прыгает. Поля — общие поля .wrap из v3.css (48 / 24 / 16px). */
.eq-hero > .wrap, #equipment > .wrap { max-width: 1456px; }
/* Поля широкой колонки на экранах шире 960px — не меньше 96px (2026-09-30): иначе на ноутбуках 961–1551px плавающие кнопки
   «Наверх» (слева, 24–84px) и мессенджеры (справа) ложились на край контента. Колонка контента — до 1360px, по центру;
   при 1920 край тот же, что был (280px), на 1440 — 96px. На ≤960 — общие поля .wrap (24 / 16px). */
@media (min-width: 961px) {
  .eq-hero > .wrap, #equipment > .wrap { max-width: none; padding-left: max(96px, calc((100% - 1360px) / 2)); padding-right: max(96px, calc((100% - 1360px) / 2)); }
}
/* Калькулятор — в одну колонку до 1000px (было до 960, общее правило v3.css): с полями широкой колонки 96px
   (2026-09-30) на 961–975px две колонки не помещались — правая карточка «В пакет входит» (мин. ~415px) давала прокрутку вбок. */
@media (max-width: 1000px) { .eq-calc { grid-template-columns: 1fr; } }

/* ============================================================
   КОНФИГУРАТОР И ЛИПКАЯ НАВИГАЦИЯ КАТАЛОГА (Босс 2026-09-30, разбор «вместо фильтра — навигация по якорям»)
============================================================ */
/* Полоска разделов: на всю ширину экрана (как ленты галереи), содержимое — по колонке каталога.
   Липнет под шапкой сайта (64px, на телефоне ≤480 — 56px) внутри .equipment-shell — у формы связи уходит.
   top делится на --site-zoom: на мониторах шире 1920 секции масштабируются (wide.css), шапка сайта — нет. */
.eq-catnav {
  position: sticky; top: calc(64px / var(--site-zoom, 1)); z-index: 40;
  margin: -60px 0 0; padding: 0;
  background: rgba(245,243,238,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border);
  transition: box-shadow .25s ease; }
.eq-catnav.is-stuck { box-shadow: 0 10px 24px rgba(28,26,22,0.08); }
.eq-catnav-in { display: flex; align-items: center; gap: 18px; min-height: 58px; }
.eq-catnav-label { flex: none; font-family: 'Jost', sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-text, #7d6428); }
.eq-catnav-list { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 7px 0; }
.eq-catnav-list::-webkit-scrollbar { display: none; }
.eq-catnav-link { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 1px solid transparent;
  border-radius: var(--radius); color: var(--mid); text-decoration: none; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s; }
.eq-catnav-link:hover { color: var(--gold-text, #7d6428); border-color: rgba(154,122,50,0.35); }
.eq-catnav-link[aria-current="true"] { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
.eq-catnav-link:focus-visible, .eq-catnav-calc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.eq-catnav-calc { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--radius);
  background: var(--gold-btn); color: #fff; text-decoration: none; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: filter .2s, transform .2s; }
.eq-catnav-calc:hover { filter: brightness(1.08); transform: translateY(var(--btn-lift, -1px)); }
.eq-catnav-calc-short { display: none; }
/* якорь раздела — не под шапкой сайта и полоской: html уже даёт scroll-padding-top 76px, здесь + высота полоски */
#eq-catalog .fa-group-title { scroll-margin-top: 72px; }
/* фокус с клавиатуры внутри каталога — тоже не под прилипшей полоской */
#eq-catalog :is(a, button) { scroll-margin-top: 72px; }
/* строки результата калькулятора: длинное значение переносится ровно по правому краю */
.calc-card .result-val { text-align: right; }
/* компактный вид — до 1100px: на 761–1100 полный ряд с подписью «Каталог» не помещался (кнопки уходили за край без подсказки) */
@media (max-width: 1100px) {
  .eq-catnav-in { min-height: 58px; gap: 10px; }
  .eq-catnav-label { display: none; }
  /* одна строка с прокруткой вбок (не в 2–3 строки — съела бы четверть экрана); справа — мягкое затухание */
  /* затухание — только со стороны, где есть ещё кнопки (классы at-start / at-end ставит скрипт; без JS — справа) */
  .eq-catnav-list { --fl: 28px; --fr: 44px; padding: 7px 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
  .eq-catnav-list.at-start { --fl: 0px; }
  .eq-catnav-list.at-end { --fr: 0px; }
  .eq-catnav-link { height: 44px; padding: 0 12px; font-size: 11.5px; letter-spacing: .1em; }
  .eq-catnav-calc { height: 36px; padding: 0 14px; font-size: 11.5px; letter-spacing: .1em; }
  .eq-catnav-calc-long { display: none; }
  .eq-catnav-calc-short { display: inline; }
}
@media (max-width: 480px) { .eq-catnav { top: calc(56px / var(--site-zoom, 1)); } }
@media (prefers-reduced-motion: reduce) { .eq-catnav, .eq-catnav-link, .eq-catnav-calc { transition: none; } }

/* Калькулятор: «+ Добавить к расчёту» — вид галочек «Что подбираем», нажатая — золотая рамка и ✓ вместо + */
.calc-card .calc-addons { border-top: 0.5px solid var(--border); margin-top: 22px; padding-top: 22px; }
.calc-addons-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-addon { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--border-gold); border-radius: 2px; background: var(--white); color: var(--mid);
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .2s, color .2s; }
.calc-addon::before { content: '+'; font-size: 15px; line-height: 1; color: var(--gold-text, #7d6428); }
.calc-addon[aria-pressed="true"] { border-color: var(--gold-btn); color: var(--dark); }
.calc-addon[aria-pressed="true"]::before { content: '✓'; }
.calc-addon:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.calc-extra-note { margin: 14px 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--soft); }

/* Калькулятор как пульт мероприятия: настройки слева, живой подбор на реальном кадре справа. */
.eq-calc {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0; align-items: stretch; margin-top: 28px; padding: 8px;
  background: var(--cream-dark); border: 1px solid var(--border-gold);
  box-shadow: 0 26px 65px rgba(28, 26, 22, 0.13);
}
.eq-calc-controls { display: flex; min-width: 0; }
.eq-calc .calc-card {
  width: 100%; margin: 0; padding: clamp(26px, 3vw, 48px);
  background: #f8f6f1; border: 0;
}
.eq-calc-intro { margin-bottom: 32px; }
.eq-calc-intro .label { display: block; margin-bottom: 10px; color: var(--gold-text); }
.eq-calc-intro p { max-width: 32ch; margin: 0; color: var(--mid); font-size: 0.96rem; line-height: 1.6; }
.eq-calc .calc-pick-opt, .eq-calc .calc-addon {
  min-height: 44px; border-radius: 999px; background: transparent;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.eq-calc .calc-pick-opt:hover, .eq-calc .calc-addon:hover { transform: translateY(-2px); border-color: var(--gold-btn); }
.eq-calc .calc-pick-opt:has(input:checked), .eq-calc .calc-addon[aria-pressed="true"] { background: var(--gold-pale); }
.eq-calc .guests-card { margin-top: 34px; padding-top: 30px; }
.eq-calc .guests-num { margin: 12px 0 25px; font-size: clamp(4.4rem, 7vw, 6.7rem); }
.eq-calc .calc-slider {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--gold-btn) 0 var(--calc-fill, 50%), rgba(28,26,22,.14) var(--calc-fill, 50%) 100%);
}
.eq-calc .calc-slider::-webkit-slider-thumb { width: 24px; height: 24px; background: var(--gold-btn); box-shadow: 0 0 0 5px rgba(154,122,50,.18); }
.eq-calc .calc-slider::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--gold-btn); box-shadow: 0 0 0 5px rgba(154,122,50,.18); }
.eq-calc .calc-slider:focus-visible { outline: 2px solid var(--gold-btn); outline-offset: 12px; }
.eq-calc .slider-labels { margin-top: 13px; font-size: .72rem; }
.eq-calc .calc-addons { margin-top: 34px; padding-top: 30px; }
.eq-calc-preview { position: relative; display: flex; min-width: 0; min-height: 620px; overflow: hidden; background: var(--dark); color: var(--white); }
.eq-calc-preview-photo {
  position: absolute; inset: 0;
  background-image: url('/images/equipment-page/gallery/eq-gal-07-1280.jpg');
  background-image: image-set(url('/images/equipment-page/gallery/eq-gal-07-1280.webp') type('image/webp'), url('/images/equipment-page/gallery/eq-gal-07-1280.jpg') type('image/jpeg'));
  background-size: cover; background-position: center 42%;
}
.eq-calc-preview::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,26,22,.16) 0%, rgba(28,26,22,.42) 28%, rgba(28,26,22,.91) 66%, #1c1a16 100%);
}
.eq-calc-preview-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: clamp(28px, 3vw, 48px); }
.eq-calc-preview-eyebrow { color: var(--gold-bright); font: 600 .7rem/1.4 'Jost', sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.eq-calc-preview-guests { display: flex; align-items: baseline; gap: 13px; margin: 1px 0 20px; font-family: 'Cormorant Garamond', serif; line-height: 1; }
.eq-calc-preview-guests strong { font-size: clamp(5rem, 8vw, 8rem); font-weight: 400; letter-spacing: -.055em; }
.eq-calc-preview-guests span { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.eq-calc-preview .result-card { margin: 0; padding: 22px 25px; background: rgba(28,26,22,.66); border: 1px solid rgba(230,199,122,.35); backdrop-filter: blur(6px); }
.eq-calc-preview .result-card > .label { color: var(--gold-bright); }
.eq-calc-preview .result-row { border-color: rgba(255,255,255,.22); }
.eq-calc-preview .result-lbl { color: rgba(255,255,255,.8); }
.eq-calc-preview .result-val { color: var(--white); }
.eq-calc-preview .total-line { align-items: baseline; flex-wrap: wrap; gap: 18px; border-color: rgba(255,255,255,.3); }
.eq-calc-preview #calc-request { min-width: 180px; min-height: 64px; padding: 18px 28px; font-size: .9rem; }
.eq-calc-preview .total-price { flex: none; color: var(--gold-bright); font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1; white-space: nowrap; }
.eq-calc-preview .calc-extra-note { color: rgba(255,255,255,.85); }
.eq-calc-preview-caption { max-width: 48ch; margin: 18px 0 0; color: rgba(255,255,255,.85); font-size: .8rem; line-height: 1.6; }
.eq-calc-includes { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); }
.eq-calc-includes .label { color: var(--gold-bright); }
.eq-calc-includes .eq-includes-note { margin-top: 12px; padding-left: 14px; position: relative; }
.eq-calc-includes .eq-includes-note::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.eq-calc-includes .includes-list li, .eq-calc-includes .eq-includes-note { color: rgba(255,255,255,.85); font-size: .8rem; line-height: 1.6; }
@media (max-width: 1000px) {
  .eq-calc { grid-template-columns: 1fr; }
  .eq-calc-preview { min-height: 570px; }
}
@media (max-width: 640px) {
  .eq-calc { padding: 5px; }
  .eq-calc .calc-card { padding: 27px 23px 35px; }
  .eq-calc-intro { margin-bottom: 25px; }
  .eq-calc .guests-card, .eq-calc .calc-addons { margin-top: 26px; padding-top: 25px; }
  .eq-calc-preview { min-height: 530px; }
  .eq-calc-preview-inner { padding: 27px 22px; }
  .eq-calc-preview .result-card { padding: 19px 18px; }
  .eq-calc-preview .total-line { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-calc .calc-pick-opt, .eq-calc .calc-addon { transition: none; }
}

/* Подобранный комплект — заметнее: заголовок «Для N гостей рекомендуем», ✓ на карточках, две кнопки под ними */
.eq-picked-title { margin: 0 0 22px; font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; color: var(--dark); }
.eq-picked-grid > * { position: relative; }
.eq-picked-check { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold-btn); color: #fff; font-size: 20px; line-height: 1;
  box-shadow: 0 6px 16px rgba(28,26,22,0.18); }
.eq-picked-extra { margin: 18px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--mid); }

/* Полоса на нижнем краю шапки, одна колонка с заголовком и карточками. */
.eq-catnav-in { max-width: 1456px; }
.eq-catnav { border-bottom-color: var(--border-gold); }
.equipment-shell .eq-catnav :is(a, button) { scroll-margin-top: -76px; }
.equipment-shell #eq-calc { scroll-margin-top: 80px; }
@media (min-width: 961px) {
  .eq-catnav-in { max-width: none; padding-left: max(96px, calc((100% - 1360px) / 2)); padding-right: max(96px, calc((100% - 1360px) / 2)); }
}