/* Sample Collection — стили, уникальные для этой страницы. Общие токены/
   компоненты (nav, blk-title, sec-* heading kit, area/service strip,
   footer, fcta, .scard) — в 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}
.filter-rows{display:flex;flex-direction:column;flex-wrap:wrap;gap:8px 28px}
.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:56px}
.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)}
.fmore{font-size:12px;color:var(--accent);font-weight:500;padding:5px 4px;background:none;border:none;cursor:pointer}
.fmore:hover{color:var(--accent-deep);text-decoration:underline}

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

.groupby{display:flex;align-items:center;gap:10px}
.gbtoggle{display:flex;border:1px solid var(--line-2);border-radius:99px;padding:2px;background:var(--bg-main)}
.gbopt{padding:6px 14px;border-radius:99px;font-size:12.5px;color:var(--ink-dim);font-weight:500;transition:.15s;background:none;border:none;cursor:pointer}
.gbopt.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px color-mix(in srgb,var(--shadow-black) 12%,transparent)}
.gbopt:hover:not(.on){color:var(--ink)}

/* ── GROUP (one per Pattern or Material) ── */
.grp{margin-top:44px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.grp:first-of-type{margin-top:28px}
.grp:last-of-type{border-bottom:none;padding-bottom:0}
.grp-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.grp-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px}
.grp-title{font-family:var(--display);font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.01em}
.grp-title a{color:var(--ink)}
.grp-title a:hover{color:var(--accent)}
.grp-count{font-family:var(--mono);font-size:11px;color:var(--ink-faint);white-space:nowrap;padding-bottom:3px}

/* .mdf-row — общий компонент карточки-планшета (assets/mdf-card.css),
   тот же, что и в карусели Sample Collection на главной. .scard-filter —
   обёртка ТОЛЬКО для data-атрибутов фильтра/поиска и display:none при
   скрытии — display:contents убирает её из потока лэйаута, чтобы флекс-
   раскладку/переносы/отступы .mdf-row считал именно .mdf-card, а не эта
   обёртка (у неё самой нет никакой ширины/сетки). Инлайн-style, который
   JS выше ставит на .scard-filter при фильтрации (display:none), всё
   равно перебивает это правило — так и остаётся скрытой. */
.mdf-row .scard-filter{display:contents}

/* Без наклона вообще (по просьбе). Раньше здесь были 5 nth-child-правил,
   чередовавших --mdf-tilt по кругу ("стопка на столе") — их убрали, но
   этого оказалось недостаточно: у родного mdf-card.css есть СВОИ 5
   nth-child-правил на том же .mdf-row .mdf-card, а карточка внутри
   .scard-filter (display:contents) всегда единственный/первый ребёнок
   своего родителя — значит `:nth-child(5n+1)` (уже child 1) совпадает
   у КАЖДОЙ карточки, и все получали одинаковый -2deg вместо чередования.
   Явно обнуляем --mdf-tilt с более высокой специфичностью (ID), чтобы
   гарантированно перебить эти родные правила у всех карточек. */
#groupsByPattern .mdf-card, #groupsByMaterial .mdf-card { --mdf-tilt: 0deg; }

/* Каталожный размер карточки — крупнее, чем в компактной карусели на
   главной (там --mdf-w:260px): 384px, ровно 3 в ряд, заполняя всю
   ширину .mdf-row без остатка на типичной ширине страницы (.page
   max-width:1280px ⇒ ~1200px контента: 3×384 + 2×24 gap = 1200px,
   без просвета — раньше при 360px оставалось ~72px пустого места
   справа). Пропорции самой карточки не трогаем — aspect-ratio:3/4 и
   весь --mdf-unit пересчитываются от --mdf-w в mdf-card.css, меняется
   только масштаб.
   ID-обёртки (#groupsByPattern/#groupsByMaterial), а не просто
   .mdf-row/.mdf-card — mdf-card.css подключается ВТОРЫМ <link>, уже
   после этого файла в разметке (см. sample-collection.php), и при
   равной специфичности его правила были бы в каскаде позже и
   перебивали бы это переопределение. min-width:641px — чтобы не
   перебить мобильный clamp() в mdf-card.css (тот же класс, но внутри
   @media max-width:640px) — без границы наш ID-селектор выиграл бы и
   там тоже. Свои гориз. паддинг/gap у .mdf-row (проценты от --mdf-w) —
   под отдельный dev-preview без внешнего контейнера; здесь .page уже
   даёт отступы по бокам, поэтому задаём фиксированные некрупные.

   Подъём карточки на hover — фиксированные 6px (не проп. от
   --mdf-unit, как родное правило mdf-card.css, — там просьба была
   "буквально 5-10px"), тень растёт как в родном правиле (унаследуем
   box-shadow оттуда, transform переопределяем). Только десктоп —
   тот же min-width:641px, чтобы на тач-устройствах :hover после тапа
   не оставлял карточку "подвешенной". */
@media (min-width: 641px) {
  #groupsByPattern .mdf-card, #groupsByMaterial .mdf-card { --mdf-w: 384px; }
  #groupsByPattern .mdf-row, #groupsByMaterial .mdf-row { padding: 8px 0 4px; gap: 24px; }
  #groupsByPattern .mdf-card:hover, #groupsByPattern .mdf-card:focus-visible,
  #groupsByMaterial .mdf-card:hover, #groupsByMaterial .mdf-card:focus-visible {
    transform: rotate(0deg) translateY(-4px);
  }
}
/* Мобильный/планшет — явно без подъёма на hover (родное правило
   mdf-card.css само по себе трогать не стали, могло бы дать sticky-
   hover на тапе). */
@media (max-width: 640px) {
  #groupsByPattern .mdf-card:hover, #groupsByPattern .mdf-card:focus-visible,
  #groupsByMaterial .mdf-card:hover, #groupsByMaterial .mdf-card:focus-visible {
    transform: none;
  }
  /* Мобильная ширина карточки — та же единая величина, что и у остальных
     карточных страниц (--card-side-pad, см. site_settings.mobile_card_width_pct,
     adm-settings.php) = 100vw минус боковые отступы = сейчас 90vw. Без
     этого переопределения карточка наследует clamp(150px,42vw,220px) из
     mdf-card.css (родной мобильный размер для карусели-"пиковера" на
     главной, где в ряд видно сразу 2+ карточки) — на каталожной странице
     это давало мелкую 2-в-ряд сетку вместо одной широкой карточки в ряд. */
  #groupsByPattern .mdf-card, #groupsByMaterial .mdf-card { --mdf-w: calc(100vw - 2 * var(--card-side-pad)); }
  #groupsByPattern .mdf-row, #groupsByMaterial .mdf-row { gap: 20px; padding: 8px 0 4px; }
}

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

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

/* Единая ширина карточки на мобильном — --card-side-pad (header.php, из
   site_settings.mobile_card_width_pct, настраивается в adm-settings.php). */
@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}}