/* Стили, уникальные для Sample Page — перенесены из локального <style>
   блока sample-page.html (без системы аннотаций и мёртвого CSS от старой
   версии дизайна — sidebar с калькулятором/ценами и Block 4 Material
   Reference в реальной разметке mockup'а не используются, см. анализ).
   Общий костяк (toolbar/tabbar/.page/spec-таблица/скелет карусели) уже даёт
   detail-page.css. */

/* ── HEADER: у Sample имя + код в одной строке (pill-бейдж), не блоком ── */
.mat-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.mname-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mname-sub{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--ink-dim);background:var(--bg-3);border:1px solid var(--line-2);border-radius:99px;padding:4px 12px;letter-spacing:.02em;white-space:nowrap}

/* ── Color variants — свотчи других образцов этого же паттерна ──
   ИЗМЕНЕНО 2026-07-13 (по запросу пользователя): свотч был цветовым
   кружком (background-color), теперь — обложка образца (<img>), поэтому
   увеличен с 26px до 44px (иначе фото неразличимо) и стал квадратом со
   скруглением, а не кругом (фото/кружок для реальной фотографии не так
   читаемо, как для плашки цвета). .sw-more-c — заглушка «+N» (сколько
   вариантов не поместилось), когда список длиннее COLOR_VARIANTS_CAP. */
.cv-cell{display:flex;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.cv-swatches{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.sw-link-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;cursor:pointer;width:52px}
.sw-link-wrap:hover .sw-c{transform:scale(1.06);box-shadow:0 0 0 2px var(--bg-main),0 0 0 3.5px var(--accent-deep)}
.sw-link-wrap:hover .sw-name{color:var(--accent)}
.sw-c{width:44px;height:44px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--text-on-accent) 8%,transparent);transition:.15s;display:block;object-fit:cover}
.sw-c.on{box-shadow:0 0 0 2px var(--bg-main),0 0 0 3.5px var(--accent)}
.sw-more-c{display:flex;align-items:center;justify-content:center;background:var(--bg-3);color:var(--ink-dim);font-family:var(--display);font-weight:700;font-size:14px}
.sw-name{font-family:var(--body);font-size:11px;font-weight:500;color:var(--ink-faint);transition:.13s;text-align:center;line-height:1.2;max-width:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.series-link{font-family:var(--body);font-size:13px;font-weight:500;color:var(--accent);white-space:nowrap;border-bottom:1px solid var(--accent-deep)}
.series-link:hover{text-decoration:none;color:var(--accent-deep)}

/* ── Related Projects — интерактивный фильтр «Match by» ── */
.filter-wrap{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:18px}
.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:72px}
.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)}
.fpill.on[data-f="sample"]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-deep)}
.fpill.on[data-f="material"]{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);border-color:color-mix(in srgb,var(--teal) 35%,transparent)}
.fpill.on[data-f="all"]{background:var(--bg-4);color:var(--ink);border-color:var(--line-3)}
.fhint{font-size:11.5px;color:var(--ink-faint);margin-top:9px;display:flex;align-items:center}
.fcount{font-family:var(--body);font-weight:500;font-size:12px;color:var(--accent);margin-left:auto}

/* Обёртка вокруг renderProjectCard() для data-атрибутов фильтра — прозрачна
   для сетки .proj-grid (сама карточка .pjcard остаётся реальным grid-item). */
.pjcard-match{display:contents}