/* Material Collection — стили, уникальные для этой страницы. Общие токены/
   компоненты (nav, blk-title, sec-* heading kit, area/service strip,
   footer, fcta, .mcard/.mgrid) — в shared.css. */

/* ── BREADCRUMB + FILTER BAR ── */
.toolbar-wrap{position:sticky;top:64px;z-index:95;background:var(--surface);border-bottom:1px solid var(--line)}
/* .bc — общий компонент, см. shared.css. */

.collbar{padding:12px 28px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.collbar-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.search-wrap{position:relative;max-width:420px}
.search-wrap input{width:100%;padding:9px 14px 9px 34px;border:1px solid var(--line-2);border-radius:99px;font-size:13px;font-family:var(--body);color:var(--ink);background:var(--bg-main)}
.search-wrap input:focus{outline:none;border-color:var(--accent-deep);background:var(--surface)}
.search-wrap input::placeholder{color:var(--ink-faint)}
.search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--ink-faint);pointer-events:none}
.frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fr-lbl{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);min-width:76px}
.fpills{display:flex;gap:5px;flex-wrap:wrap}
.fpill{padding:5px 11px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--ink-dim);font-size:12px;transition:.13s;cursor:pointer}
.fpill:hover{color:var(--ink);border-color:var(--line-3)}
.fpill.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-deep)}

/* ── PAGE HEADER ── */
/* .page (центрирование) и .b1 (вертикальный ритм 30px 0) — общие, shared.css. */
.sec-count{margin-bottom:0}

/* Material card grid — canonical .mcard/.mgrid (shared.css); only the
   top spacing + hide-on-filter rule are page-specific here. */
.mgrid{margin-top:28px}
.mgrid .mcard.is-hidden{display:none}

.empty-state{padding:60px 0;text-align:center;color:var(--ink-faint);font-size:14px}

/* ── SERVICE AREAS STRIP ── */
/* .section-content (фон секции) — общий, shared.css. */

/* ── MOBILE ── файл раньше не имел ни одного @media — на узких экранах
   боковой отступ 40px у .page (карточки) заметно больше, чем у .bc/.collbar
   над ним. НАЙДЕНО И ИСПРАВЛЕНО: первая версия правки (28px) была
   произвольным числом, взятым «на глаз» из соседнего блока — на разных
   страницах (products/samples/projects/master-samples) отступ в итоге
   отличался (28px тут, 20px на главной, 40px там, где вообще забыли
   переопределить), и карточки с ОДИНАКОВЫМ соотношением сторон выходили
   РАЗНОЙ ширины на разных страницах. Единая ширина карточки —
   --card-side-pad (header.php, из site_settings.mobile_card_width_pct,
   настраивается в adm-settings.php) — один источник вместо захардкоженного
   значения в 6 файлах, ничего не «на глаз». */
@media(max-width:560px){
  .page,.bc,.collbar{padding-left:var(--card-side-pad);padding-right:var(--card-side-pad)}
  .collbar{padding-top:5px;padding-bottom:5px}
  /* .search-wrap теперь живёт в .fgroup-head (flex:1, см. shared.css) —
     делит строку с кнопкой "Filters" на любой ширине, фиксированный
     width:80vw (раньше, когда поиск был один в своей строке) убран, иначе
     не помещалось бы рядом с кнопкой в одну строку по прямому запросу. */
}
/* .blk-title sticky top — под nav+хлебными крошками (.tabbar на этой
   странице нет, но .bc есть, см. detail-page.css): 64px nav + 22px .bc = 86px. */
@media(max-width:560px){.blk-title{top:86px}}