/* idenpol.ru v2 · каталог, коллекция, карточка декора, прайс.
   Дизайн-система «Шоурум»: токены и общие классы живут в site.css (v2/design/SYSTEM.md),
   здесь только то, чего там нет. Свои классы с префиксом модуля: .cat-…, .decor-…, .prays-… */

/* якоря не уезжают под липкую шапку */
#tiles,#bron,#raschet{scroll-margin-top:calc(var(--head) + 24px)}

/* ---------- каталог: полоса фильтров (логика в site.js) ---------- */
.cat-upd{margin-top:14px}
.cat-filters{margin-top:30px}
.cat-filters .filters__end{margin-left:auto}
.cat-filters .chip{height:40px}
/* «Есть на складе» первым: чип чуть заметнее соседей, пока не нажат */
.cat-filters .chip[data-stock-only],.cat-filters .chip[data-stock-local]{border-color:#CFC7B9}
.cat-filters .chip[data-stock-local] span{font-size:inherit}
/* толщина в чипе коллекции: курсив не нужен, на телефоне прячется */
.cat-chip__nm,.cat-chip__th{font-style:normal}
/* строка о наличии по городу и дате остатков - в полосе счётчика, под чипами */
.cat-note{margin:-18px 0 30px;max-width:80ch}
/* короткий вариант строки - только на телефоне (адаптив ниже) */
.cat-note__s{display:none}

.cat-empty{padding:48px 0 8px;max-width:52ch}
.cat-empty p{margin-top:10px;font-size:16.5px}
.cat-empty__btn{background:none;border:0;border-bottom:1px solid var(--line);padding:0;cursor:pointer;font:inherit;color:inherit}
.cat-empty__btn:hover{border-color:var(--ink)}
.cat-after{margin-top:70px}
.coll h3 a:hover{border-bottom:1px solid var(--line)}

/* ---------- страница коллекции ---------- */
.cat-coll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start;padding:8px 0 10px}
.cat-coll__ph{position:sticky;top:calc(var(--head) + 28px)}
/* height:auto обязателен: атрибут height="800" у <img> перебивает aspect-ratio */
.cat-coll__ph img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:3px;background:var(--warm)}
.cat-coll__cap{font-size:14.5px;color:var(--muted);margin-top:12px}
.cat-coll .page-head{padding-top:0}
.cat-coll .page-head h1{max-width:16ch;font-size:clamp(28px,3.4vw,44px)}
.cat-coll__price{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,40px);letter-spacing:-0.03em;line-height:1;margin-top:28px}
.cat-coll__pack{font-size:16px;color:var(--muted);margin-top:10px;max-width:46ch}
.cat-coll__st{margin-top:18px;font-size:15.5px;color:var(--muted)}
/* сводка по складам: строка на склад, точка статуса перед названием, один кегль на всю строку (R13) */
.cat-coll__st .coll-sum .st{display:block;font-size:15.5px;margin:0}
.cat-coll__st .coll-sum .st + .st{margin:2px 0 0}
.cat-coll__upd{margin-top:4px;font-size:14.5px}
.cat-coll .kv{margin-top:26px}

/* ---------- карточка декора ---------- */
.decor__left{position:sticky;top:calc(var(--head) + 28px)}
/* прилипает вся левая колонка (фото, миниатюры, подпись); липкое фото внутри неё (site.css) стояло на месте,
   а миниатюры и подпись уезжали под него при прокрутке (замечание Рафа 26.09.2026) */
.decor__left .decor__ph{position:static}
/* тот же случай: без height:auto атрибут height="800" ломает квадрат щита */
.decor__ph img{height:auto}
.decor__sub{margin-top:14px;max-width:44ch}
.decor__pack{max-width:44ch}
.decor__stock > div > span:first-child{color:var(--muted);font-size:15.5px}
.decor__stock .st{white-space:nowrap}
.decor__reserve{padding:6px 0 10px;max-width:640px}
.decor__about p{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:52ch;margin-top:16px}
.decor__mind-h{margin-top:40px}
.decor__mind{margin-top:10px}
.decor__mind li{max-width:52ch}
/* галерея карточки: декор сверху, фото покупателей и интерьеры; лента 4:3 с привязкой к кадру (gallery.js) */
.decor__ph.dgal{aspect-ratio:4/3}
.dgal__track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.dgal__track::-webkit-scrollbar{display:none}
.dgal__track:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dgal__slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.decor__ph.dgal .dgal__slide img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
/* Вертикальные фото покупателей показываем целиком; ссылка открывает исходный JPEG с браузерным масштабированием. */
.dgal__full{display:block;position:relative;width:100%;height:100%;color:var(--ink);background:var(--warm)}
.decor__ph.dgal .dgal__slide--customer img{object-fit:contain}
.dgal__full:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.dgal__open{position:absolute;right:12px;bottom:12px;padding:10px 12px;border-radius:3px;background:rgba(255,255,255,.94);font-size:14px;line-height:1.4}
.dgal__full:hover .dgal__open,.dgal__full:focus-visible .dgal__open{text-decoration:underline;text-underline-offset:3px}
/* отступ 4 px внутри ленты: иначе overflow обрезает контур выбранной миниатюры */
.dgal__thumbs{display:flex;gap:8px;margin:6px -4px 0;padding:4px;overflow-x:auto;scrollbar-width:none}
.dgal__thumbs::-webkit-scrollbar{display:none}
.dgal__th{flex:0 0 auto;width:76px;aspect-ratio:4/3;padding:0;border:0;border-radius:3px;overflow:hidden;background:var(--warm);cursor:pointer;opacity:.62;outline:2px solid transparent;outline-offset:2px;transition:opacity .15s}
.dgal__th img{width:100%;height:100%;object-fit:cover;display:block}
.dgal__th--customer img{object-fit:contain}
.dgal__th:hover{opacity:1}
.dgal__th.is-on{opacity:1;outline-color:var(--ink)}
.dgal__th:focus-visible{opacity:1;outline-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.dgal__track{scroll-behavior:auto}.dgal__th{transition:none}}
/* липкая полоса: цена строкой, склад второй строкой - помещается в 64 px на любом телефоне */
.decor-sticky__p b{display:block}
.decor-sticky__p span{display:block;color:var(--muted);font-size:13px;line-height:1.25}

/* ---------- прайс: единственная таблица сайта ---------- */
.prays-wrap{margin-top:34px}
.prays-t{min-width:680px}
.prays-t th[scope="row"]{font-weight:400;font-family:var(--text);white-space:nowrap;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:16px;color:var(--ink)}
.prays-t th[scope="row"] a:hover{border-bottom:1px solid var(--line)}
.prays-t .st{padding-left:0;white-space:nowrap}
.prays-t .st::before{display:none}
.prays-t td{white-space:nowrap}
.prays-grp th{
  padding:30px 0 10px;border-bottom:1px solid var(--ink);
  font-family:var(--display);font-weight:600;color:var(--ink);font-size:16px;white-space:normal;
}
.prays-grp__in{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap}
.prays-grp__n{font-size:22px;letter-spacing:-0.02em}
.prays-grp__n:hover{border-bottom:1px solid var(--line)}
.prays-grp__s{font-family:var(--text);font-weight:400;font-size:15px;color:var(--muted)}
.prays-grp__p{font-size:17px}
.prays-fine{margin-top:22px;max-width:70ch}
/* оговорка про узкий экран - только там, где столбцы правда скрыты */
.prays-narrow{display:none}

/* печатная шапка прайса: на экране не видна */
.print-only{display:none}

/* ---------- адаптив ---------- */
/* на широком экране счётчик и «Сбросить» встают в правый край первой строки, не занимая третью */
@media (min-width:1101px){
  .cat-filters .filters__end{position:absolute;right:0;bottom:22px}
}
@media (max-width:1100px){
  .cat-coll{gap:40px}
}
@media (max-width:900px){
  /* единственная липкая панель сайта - строка цены в карточке декора; фильтры не липнут */
  .cat-filters{position:static;margin-top:22px;gap:8px;padding:14px 0 12px}
  /* чипы переносятся в две-три строки, горизонтальной прокрутки со спрятанным скроллбаром нет */
  .cat-filters .filters__row{flex-wrap:wrap;overflow:visible;padding-bottom:0}
  .cat-filters .chip{height:36px;padding:0 14px;font-size:15px}
  .cat-filters .chip i{width:20px;height:20px;margin-left:-6px}
  .cat-note{margin:-14px 0 22px}
  .cat-filters .filters__end{margin-left:0;gap:14px}
  .cat-filters .count,.cat-filters .filters__reset{font-size:14.5px}
  .cat-after{margin-top:46px}

  .cat-coll{grid-template-columns:1fr;gap:22px;padding-top:0}
  .cat-coll__ph{position:static}
  /* щит не съедает первый экран: заголовок, цена и остаток видны без прокрутки */
  .cat-coll__ph img{aspect-ratio:4/3;max-height:56vh}
  .cat-coll .page-head h1{max-width:none}

  .decor__left{position:static}
  .decor__ph img{aspect-ratio:4/3;max-height:56vh}
  /* галерея: высоту держит лента, а не картинка - иначе max-height у img оставляет полосу под кадром */
  .decor__ph.dgal{max-height:56vh;aspect-ratio:auto;height:min(56vh,calc((100vw - 2 * var(--pad)) * .75))}
  .decor__ph.dgal .dgal__slide img{max-height:none}
  .dgal__th{width:64px}
  .decor__sub,.decor__pack{max-width:none}
  .decor__stock > div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:14px}
  .decor__stock > div > span:first-child{font-size:14.5px;max-width:52%}
  .decor__mind{gap:0}
  .decor__mind ul:last-child li:first-child{border-top:1px solid var(--line)}
}
@media (max-width:640px){
  /* Каталог: первый ряд плиток должен попасть в первый экран (390×700). Чипы ниже и плотнее,
     толщина у коллекций прячется: наличие и коллекции встают в две строки, тона - в две.
     Горизонтальной прокрутки со спрятанным скроллбаром по-прежнему нет. */
  .page-head .lede{margin-top:12px}
  /* над заголовком каталога только крошки: отступ меньше общего (на старых браузерах без :has - общий) */
  .page-head:has(+ .cat-filters){padding-top:16px}
  /* Все чипы (наличие, коллекции, тона) текут одним потоком: ряды-обёртки не держат по отдельной
     строке на группу, и девять чипов встают в три-четыре ряда вместо пяти (CATALOG-6).
     Счётчик и «Сбросить» - отдельной строкой под чипами. */
  .cat-filters{margin-top:12px;flex-direction:row;flex-wrap:wrap;gap:6px 5px;padding:10px 0 8px}
  .cat-filters .filters__row{display:contents}
  .cat-filters .filters__end{flex:0 0 100%;margin-top:2px}
  .cat-filters .chip{height:32px;padding:0 10px;gap:5px;font-size:14px}
  .cat-filters .chip i{width:16px;height:16px;margin-left:-3px}
  .cat-filters .chip span{font-size:13px}
  /* число у тона на телефоне не выводим: тона встают по три в ряд, итог показывает счётчик под чипами */
  .cat-filters .chip[data-tone] span{display:none}
  .cat-chip__th{display:none}
  /* строка о наличии - короткий вариант в одну строку, без даты остатков */
  .cat-note{font-size:13.5px;line-height:1.45;margin:-16px 0 18px}
  .cat-note__l{display:none}
  .cat-note__s{display:inline}

  /* На телефоне прячем «Тон» и «Пачка», но оба склада оставляем: один безымянный столбец
     с метражом читался как остаток «своего» склада (москвич видел казанские метры). */
  .prays-t{min-width:0}
  .prays-t .col-tone,.prays-t .col-pack{display:none}
  .prays-t th,.prays-t td{padding-right:7px;font-size:14px}
  .prays-t th[scope="row"]{padding-right:7px;font-size:14px;white-space:normal}
  .prays-t th:last-child,.prays-t td:last-child{padding-right:0}
  .prays-t .st{font-size:13px;white-space:nowrap}
  /* артикул уводим на вторую строку: имя декора и два склада должны влезать без прокрутки */
  .prays-t th[scope="row"] .muted{display:block}
  .prays-grp__s{display:none}
  .prays-narrow{display:inline}
  .prays-grp__n{font-size:19px}
}
/* 360-380 px: строка о наличии («Москва под заказ, Казань: 26 декоров в наличии.») при 13,5 px
   вылезала на 4 px и уходила во вторую строку (проверка F2, третий круг) */
@media (max-width:380px){
  .cat-note{font-size:13px}
}

/* ---------- печать прайса ---------- */
@media print{
  .bc,.cat-filters,.cat-empty,.acts,.decor-sticky,.lead,.sechead .more{display:none !important}
  body.has-sticky{padding-bottom:0}
  .page-head{padding:0 0 10px}
  .prays-wrap{overflow:visible}
  .prays-t{min-width:0;width:100%}
  .prays-t .col-tone,.prays-t .col-pack{display:table-cell}
  .prays-grp th{padding:14px 0 6px;break-after:avoid}
  .prays-grp__n{font-size:14px}
  .prays-t tr{break-inside:avoid}
  /* Строка прайса на бумаге - одной линией: у названия и у остальных ячеек один отступ и базовая
     линия, иначе имя 16 px с отступом 13 px сползало на полстроки ниже цен (проверка fresh, третий круг) */
  .prays-wrap table.prays-t th[scope="row"],.prays-wrap table.prays-t td{padding:6px 10px 6px 0;vertical-align:baseline;font-size:12px;line-height:1.35}
  .prays-wrap table.prays-t th[scope="row"]{font-size:13px}
  .prays-wrap table.prays-t th[scope="row"] .muted{font-size:11px}
  .prays-wrap table.prays-t .st{font-size:12px}
  .prays-fine{font-size:10.5px}
  /* в PDF: своя шапка с брендом и складами; экранные оговорки и форма сотрудничества не нужны */
  .print-only{display:block !important}
  .prays-narrow,.prays-coop{display:none !important}
  .prays-print{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #000;font-size:11px;line-height:1.45}
  .prays-print__brand{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-0.02em}
  .prays-print__brand b{color:var(--accent)}
  .prays-print__brand span{font-weight:400;font-size:13px;margin-left:8px}
  .prays-print__t{margin-top:2px}
  .prays-print__hubs{list-style:none;margin:6px 0 0;padding:0}
  .prays-print__d{margin-top:6px}
}