/* ============================================================
   Страница «Цены» (/czeny/) — поверх дизайн-системы styles.css.
   Своя палитра не заводится: цвета, радиусы, кнопки и карточки — общие.
   ============================================================ */

/* Липкая полоса разделов работает, только если скролл-контейнер — окно.
   overflow-x:hidden на body делает контейнером его самого и ломает sticky,
   поэтому здесь клипаем без прокрутки (как на посадочных All-on-4/6). */
html { overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Фильтр прячет строки и разделы атрибутом hidden — он должен побеждать display. */
.czeny [hidden] { display: none !important; }

/* ---------- шапка страницы ---------- */
.czeny-head { margin-bottom: var(--space-lg); }
.czeny-head .lead { max-width: 640px; }

/* ---------- поиск ---------- */
.czeny-tools { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px var(--space-md); margin-bottom: var(--space-lg); }
.czeny-tools .search { flex: 1 1 340px; }
.czeny-found { margin: 0; font-size: .88rem; color: var(--text-secondary); white-space: nowrap; }
.czeny-empty { margin: 0 0 var(--space-lg); padding: 18px 22px;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: .95rem; }

/* ---------- навигация по разделам ---------- */
/* Лента категорий в одну строку с фирменным слайдером — и на телефоне, и на ПК (сам слайдер
   рисуют правила .chips.scroll в styles.css; владелец просил его оставить). Блок стоит в
   пределах колонки: без липкой полосы, своего фона и выступающих краёв — резким на ПК
   его делали именно они, а не слайдер. */
.chips.czeny-nav { margin-bottom: var(--space-lg); }

/* ---------- раздел прайса ---------- */
.czeny-list { display: flex; flex-direction: column; gap: var(--space-md); }

.price-sec.glass { padding: 0; overflow: hidden; scroll-margin-top: 104px; }
/* шапка сайта 114 px + воздух: переход по чипсу ставит заголовок раздела прямо под шапку */
@media (min-width: 1025px) { .price-sec.glass { scroll-margin-top: 132px; } }

.price-sec > summary { list-style: none; cursor: pointer; position: relative;
  padding: 22px 60px 22px var(--space-lg);
  transition: background .25s var(--ease-out); }
.price-sec > summary::-webkit-details-marker { display: none; }
.price-sec > summary:hover { background: rgba(255,255,255,0.04); }
.price-sec > summary::after { content: ""; position: absolute; right: 24px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px; opacity: .75;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2381D2FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform .3s var(--ease-out); }
.price-sec[open] > summary::after { transform: rotate(180deg); }

.price-sec-title { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; }

.price-sec-body { padding: 4px var(--space-lg) var(--space-lg); }

/* ---------- подразделы и строки ---------- */
.price-group + .price-group { margin-top: 26px; }
.price-group-title { font-family: var(--font-body); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary);
  margin: 0 0 6px; display: flex; align-items: center; gap: 9px; }
.price-group-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none; }

.price-rows { list-style: none; margin: 0; padding: 0; }
.price-row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.price-row + .price-row { border-top: 1px solid rgba(255,255,255,0.06); }
.pr-name { flex: 0 1 auto; min-width: 0; font-size: .96rem; line-height: 1.45; color: #e9e9ec; }
.pr-note { display: block; font-size: .8rem; color: var(--text-secondary); margin-top: 2px; }
/* Пустая «точечная» перемычка: у блока без текста базовая линия — его нижний край,
   поэтому точки ложатся ровно на строку названия. */
.pr-dots { flex: 1 1 24px; min-width: 16px; border-bottom: 1px dotted rgba(255,255,255,0.22); }
.pr-price { flex: none; white-space: nowrap; font-weight: 600; font-size: 1rem; color: #fff;
  text-align: right; font-variant-numeric: tabular-nums; }
.pr-unit { display: block; font-size: .76rem; font-weight: 400; color: var(--text-secondary); }

/* ---------- запись из раздела ---------- */
.price-sec-cta { display: flex; justify-content: flex-end;
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.08); }

/* ---------- низ страницы ---------- */
.czeny-cta { max-width: none; margin: var(--space-xl) 0 0; }
.czeny-cta h2 { margin: 0 0 .3em; color: #fff; font-size: clamp(1.25rem, 2.4vw, 1.7rem); }

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .price-sec > summary { padding: 18px 52px 18px var(--space-md); }
  .price-sec > summary::after { right: 18px; }
  .price-sec-body { padding: 2px var(--space-md) var(--space-md); }
  /* Точечная перемычка на узком экране только мешает: имя и так длинное. */
  .pr-dots { display: none; }
  .price-row { gap: 14px; justify-content: space-between; }
  .pr-name { flex: 1 1 auto; font-size: .92rem; }
  .pr-price { font-size: .95rem; }
  .price-sec-cta .btn { width: 100%; }
}