/* ═══════════════════════════════════════════════════════════════
BunnySplit · Каталог 3D-принтеров — light POP content layer
Грузится ПОСЛЕ /landing.css → переопределяет тёмные
токены landing.css на светлую бумажную систему (та же палитра,
что блог-хаб / article.css: --bg #FFFDF7, coral #FF5E7E,
violet #7C5CFF, Unbounded + Inter).
⚠️ SELF-SUFFICIENT НАРОЧНО: страницы каталога линкуют ТОЛЬКО
landing.css + этот файл (article.css НЕ подключается). Поэтому
light-токены объявлены здесь заново — иначе var(--violet)/(--ink)
зарезолвятся в ТЁМНЫЕ значения landing.css и страница «поедет»
(см. канон §3 «токен-водопровод» + инцидент serif-на-SSR).
Шрифты Inter+Unbounded должны линковаться в шаблона
(тот же Google Fonts, что в blog/index.html).
═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────
0. ТОКЕНЫ — перебивают тёмный :root landing.css по каскаду
───────────────────────────────────────────────────────────── */
:root{
--pc-ink:#141414; --pc-mut:#5B5B66; --pc-dim:#8A8A92;
--pc-paper:#FFFDF7; --pc-paper2:#F6F2EA; --pc-surface:#FFFFFF;
--pc-line:rgba(20,20,20,.09); --pc-line2:rgba(20,20,20,.15);
--pc-violet:#7C5CFF; --pc-violet-h:#6B4BEE; --pc-coral:#FF5E7E;
--pc-ok:#1FBF75; --pc-warn:#F59E0B; --pc-gold:#E8940F;
--pc-violet-soft:rgba(124,92,255,.10);
--pc-violet-ring:rgba(124,92,255,.45);
--pc-coral-soft:rgba(255,94,126,.12);
--pc-shadow:0 8px 30px rgba(20,20,20,.06);
--pc-shadow-lg:0 22px 54px -22px rgba(124,92,255,.38);
--pc-radius:22px; --pc-radius-sm:14px; --pc-pill:999px;
--pc-maxw:1180px;
--pc-ease:cubic-bezier(.34,1.56,.64,1);
--pc-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--pc-display:'Unbounded','Inter',system-ui,sans-serif;
/* смещение sticky control-bar под фикс/sticky-навбар лендинга;
шаблон может переопределить под реальную высоту своей шапки */
--pc-stick:66px;
}
/* ─────────────────────────────────────────────────────────────
1. ХОЛСТ — тёплая бумага + мягкие цветные ауры (как pop-хаб).
Заводим НА КЛАСС body (.pcatalog/.pmodel), чтобы не влиять на
другие страницы и гарантированно погасить тёмный фон landing.css.
───────────────────────────────────────────────────────────── */
body.pcatalog, body.pmodel{
background:
radial-gradient(1100px 520px at 10% -8%, rgba(124,92,255,.10), transparent 60%),
radial-gradient(940px 500px at 96% 2%, rgba(255,94,126,.09), transparent 55%),
var(--pc-paper) !important;
background-attachment:fixed !important;
color:var(--pc-ink) !important;
font-family:var(--pc-font);
-webkit-font-smoothing:antialiased;
}
body.pcatalog::before, body.pcatalog::after,
body.pmodel::before, body.pmodel::after{ display:none !important; }
.pcatalog ::selection, .pmodel ::selection{ background:var(--pc-violet-soft); }
.visually-hidden{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ─────────────────────────────────────────────────────────────
2. КАРКАС СТРАНИЦЫ
───────────────────────────────────────────────────────────── */
.pc-wrap, .pm-wrap{
max-width:var(--pc-maxw); margin:0 auto;
padding:clamp(1rem,3vw,2rem) clamp(1rem,4vw,1.75rem) 4rem;
}
.pc-crumbs{
font-family:var(--pc-font); font-size:.82rem; color:var(--pc-dim);
margin:.5rem 0 1rem; display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
}
.pc-crumbs a{ color:var(--pc-mut); text-decoration:none; }
.pc-crumbs a:hover{ color:var(--pc-violet); }
.pc-crumbs [aria-current]{ color:var(--pc-ink); font-weight:600; }
/* ── Хлебные крошки: ЕДИНЫЙ компонент _breadcrumbs.html (зеркало .crumbs из pop.css на
--pc-* токенах — мир /printers не линкует tokens.css). Компактно, горизонт-скролл. ── */
.crumbs{ margin:.6rem 0 .9rem; min-width:0; }
.crumbs__list{
display:flex; align-items:center; flex-wrap:nowrap; gap:.5rem;
margin:0; padding:0; list-style:none; font:500 .78rem/1.4 var(--pc-font);
overflow-x:auto; scrollbar-width:none;
}
.crumbs__list::-webkit-scrollbar{ display:none; }
.crumbs__item{ display:flex; align-items:center; gap:.5rem; min-width:0; white-space:nowrap; }
.crumbs__item + .crumbs__item::before{ content:"\203A"; color:var(--pc-dim); opacity:.6; flex:none; line-height:1; }
.crumbs__link{ color:var(--pc-mut); text-decoration:none; padding-block:5px; transition:color .15s ease-out; white-space:nowrap; }
.crumbs__link:hover{ color:var(--pc-violet); }
.crumbs__link:focus-visible{ outline:2px solid var(--pc-violet); outline-offset:2px; border-radius:6px; }
.crumbs__mid{ color:var(--pc-mut); padding-block:5px; white-space:nowrap; }
.crumbs__cur{ color:var(--pc-ink); font-weight:600; padding-block:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(56vw,340px); }
.pc-head{ margin:0 0 1.25rem; }
.pc-h1, .pm-h1{
font-family:var(--pc-display); font-weight:800; color:var(--pc-ink);
letter-spacing:-.02em; line-height:1.08; margin:0 0 .5rem;
font-size:clamp(1.7rem,4.2vw,2.75rem);
}
.pc-sub{
font-family:var(--pc-font); color:var(--pc-mut); max-width:46ch;
font-size:clamp(.98rem,2vw,1.12rem); line-height:1.55; margin:0;
}
/* ─────────────────────────────────────────────────────────────
3. CONTROL-BAR — ОДНА панель управления (L1). Единый ярус:
поиск (растёт) · тип-сегмент · бренд-details · счётчик · сорт-право.
sticky (L6). Внутри — только label/span/details/fieldset.
───────────────────────────────────────────────────────────── */
.pc-controls{
position:sticky; top:var(--pc-stick); z-index:20;
display:flex; align-items:center; flex-wrap:wrap; gap:.6rem .7rem;
padding:.55rem .65rem;
background:rgba(255,253,247,.9); backdrop-filter:blur(12px) saturate(140%);
-webkit-backdrop-filter:blur(12px) saturate(140%);
border:1px solid var(--pc-line); border-radius:var(--pc-pill);
box-shadow:var(--pc-shadow);
}
/* поиск — растёт, ведущий контрол */
.pc-search{
flex:1 1 240px; display:flex; align-items:center; gap:.5rem;
min-width:0; padding:.15rem .45rem .15rem .85rem;
background:var(--pc-surface); border:1px solid var(--pc-line2);
border-radius:var(--pc-pill); transition:border-color .2s, box-shadow .2s;
}
.pc-search:focus-within{
border-color:var(--pc-violet); box-shadow:0 0 0 3px var(--pc-violet-ring);
}
.pcs-icon{ flex:none; width:18px; height:18px; color:var(--pc-dim); display:grid; place-items:center; }
.pcs-icon svg{ width:18px; height:18px; }
.pc-search input{
flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
font-family:var(--pc-font); font-size:1rem; color:var(--pc-ink);
padding:.65rem 0; /* ≥44px touch height */
}
.pc-search input::placeholder{ color:var(--pc-dim); }
/* гасим нативный крестик type=search — оставляем только свой .pcs-clear */
.pc-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.pcs-clear{
flex:none; width:30px; height:30px; border:0; border-radius:var(--pc-pill);
background:var(--pc-paper2); color:var(--pc-mut); font-size:1.1rem; line-height:1;
cursor:pointer; display:grid; place-items:center; transition:background .2s,color .2s;
}
.pcs-clear:hover{ background:var(--pc-coral-soft); color:var(--pc-coral); }
.pcs-clear[hidden]{ display:none; }
/* тип-сегмент — прижат в баре, НЕ отдельная центр-строка (L2) */
.pc-seg{
flex:none; display:inline-flex; gap:2px; padding:3px;
background:var(--pc-paper2); border-radius:var(--pc-pill);
}
.pc-segbtn{
appearance:none; border:0; cursor:pointer;
font-family:var(--pc-font); font-size:.86rem; font-weight:600; color:var(--pc-mut);
padding:.5rem .95rem; min-height:38px; border-radius:var(--pc-pill);
background:transparent; transition:background .2s, color .2s, box-shadow .2s;
}
.pc-segbtn:hover{ color:var(--pc-ink); }
.pc-segbtn.is-active{
background:var(--pc-surface); color:var(--pc-violet);
box-shadow:0 2px 8px rgba(20,20,20,.08);
}
.pc-segbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring); }
/* фасетный счётчик типа + гашение опции, дающей 0 при текущем наборе фильтров */
.pc-segn{ margin-left:.15rem; font-size:.72rem; font-weight:700; opacity:.65; font-variant-numeric:tabular-nums; }
.pc-segbtn.is-active .pc-segn{ opacity:.9; }
.pc-segbtn.is-empty, .pc-segbtn[disabled]{ opacity:.4; cursor:not-allowed; }
.pc-segbtn.is-empty:hover{ color:var(--pc-mut); }
/* бренд-фильтр — >4 значений свёрнуты в details (L4) */
.pc-brand{ position:relative; flex:none; }
.pc-branddd{
list-style:none; cursor:pointer; user-select:none;
display:inline-flex; align-items:center; gap:.4rem;
font-family:var(--pc-font); font-size:.86rem; font-weight:600; color:var(--pc-ink);
padding:.5rem .9rem; min-height:38px; border-radius:var(--pc-pill);
background:var(--pc-surface); border:1px solid var(--pc-line2);
transition:border-color .2s, box-shadow .2s;
}
.pc-branddd::-webkit-details-marker{ display:none; }
.pc-branddd::after{
content:''; width:8px; height:8px; margin-left:.1rem;
border-right:2px solid var(--pc-mut); border-bottom:2px solid var(--pc-mut);
transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--pc-ease);
}
.pc-brand[open] .pc-branddd{ border-color:var(--pc-violet); color:var(--pc-violet); }
.pc-brand[open] .pc-branddd::after{ transform:rotate(-135deg) translateY(-1px); border-color:var(--pc-violet); }
.pc-branddd:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring); }
.pc-brandn{
display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
background:var(--pc-violet); color:#fff; font-size:.7rem; font-weight:700;
border-radius:var(--pc-pill);
}
.pc-brandn[hidden]{ display:none; }
.pc-brandmenu{
position:absolute; top:calc(100% + .5rem); left:0; z-index:40; margin:0; border:0;
min-width:230px; max-height:320px; overflow:auto; padding:.5rem;
background:var(--pc-surface); border:1px solid var(--pc-line2);
border-radius:var(--pc-radius-sm); box-shadow:var(--pc-shadow-lg);
display:grid; gap:1px;
}
.pc-brandmenu label{
display:flex; align-items:center; gap:.6rem; cursor:pointer;
padding:.55rem .6rem; min-height:44px; border-radius:10px;
font-family:var(--pc-font); font-size:.9rem; color:var(--pc-ink);
transition:background .15s;
}
.pc-brandmenu label:hover{ background:var(--pc-violet-soft); }
.pc-brandmenu input[type=checkbox]{
flex:none; width:18px; height:18px; accent-color:var(--pc-violet); cursor:pointer;
}
.pc-brandmenu label span{ margin-left:auto; color:var(--pc-dim); font-size:.8rem; font-variant-numeric:tabular-nums; }
/* фасет: бренд с 0 при текущем типе/поиске — гасим и блокируем выбор */
.pc-brandmenu label.is-empty{ opacity:.4; cursor:not-allowed; }
.pc-brandmenu label.is-empty:hover{ background:transparent; }
.pc-brandmenu label.is-empty input{ cursor:not-allowed; }
/* счётчик + сортировка — крайние справа (L3) */
.pc-count{
flex:none; margin-left:auto; font-family:var(--pc-font);
font-size:.86rem; font-weight:600; color:var(--pc-mut);
font-variant-numeric:tabular-nums; white-space:nowrap;
}
.pc-sort{ flex:none; position:relative; display:inline-flex; }
.pc-sort select{
appearance:none; cursor:pointer; font-family:var(--pc-font);
font-size:.86rem; font-weight:600; color:var(--pc-ink);
padding:.5rem 2rem .5rem .9rem; min-height:38px;
background:var(--pc-surface); border:1px solid var(--pc-line2);
border-radius:var(--pc-pill); transition:border-color .2s, box-shadow .2s;
}
.pc-sort::after{
content:''; position:absolute; right:.85rem; top:50%; pointer-events:none;
width:7px; height:7px; margin-top:-5px;
border-right:2px solid var(--pc-mut); border-bottom:2px solid var(--pc-mut);
transform:rotate(45deg);
}
.pc-sort select:hover{ border-color:var(--pc-violet); }
.pc-sort select:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring); border-color:var(--pc-violet); }
/* ─────────────────────────────────────────────────────────────
4. АКТИВНЫЕ ФИЛЬТРЫ — removable-чипы + «Сбросить всё» (L5)
───────────────────────────────────────────────────────────── */
.pc-active{
display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
margin:.9rem 0 0;
}
.pc-active[hidden]{ display:none; }
.pc-chip{
display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
font-family:var(--pc-font); font-size:.82rem; font-weight:600; color:var(--pc-violet);
padding:.4rem .5rem .4rem .8rem; min-height:34px;
background:var(--pc-violet-soft); border:1px solid transparent; border-radius:var(--pc-pill);
transition:background .2s, box-shadow .2s;
}
.pc-chip:hover{ background:rgba(124,92,255,.18); }
.pc-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring); }
.pc-chip .x{
display:grid; place-items:center; width:18px; height:18px; border-radius:var(--pc-pill);
background:rgba(124,92,255,.22); font-size:.85rem; line-height:1;
}
.pc-reset{
appearance:none; border:0; background:transparent; cursor:pointer;
font-family:var(--pc-font); font-size:.82rem; font-weight:600; color:var(--pc-mut);
padding:.4rem .55rem; min-height:34px; border-radius:10px; text-decoration:underline;
text-underline-offset:3px; transition:color .2s;
}
.pc-reset:hover{ color:var(--pc-coral); }
.pc-reset:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring); }
/* ─────────────────────────────────────────────────────────────
5. СЕТКА + КАРТОЧКА
───────────────────────────────────────────────────────────── */
.pc-grid{
list-style:none; margin:1.25rem 0 0; padding:0;
display:grid; gap:1rem;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.pc-grid > li{ margin:0; }
.pc-grid > li[hidden]{ display:none; }
.pc-grid--sm{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:.85rem; }
.pc-card{
position:relative; display:flex; flex-direction:column; height:100%;
text-decoration:none; color:var(--pc-ink); overflow:hidden;
background:var(--pc-surface); border:1px solid var(--pc-line);
border-radius:var(--pc-radius); box-shadow:var(--pc-shadow);
transition:transform .3s var(--pc-ease), box-shadow .3s var(--pc-ease), border-color .2s;
}
.pc-card:hover{ transform:translateY(-4px); border-color:var(--pc-violet); box-shadow:var(--pc-shadow-lg); }
.pc-card:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring), var(--pc-shadow-lg); }
/* primary = имя принтера; ::after растягивает клик на ВСЮ карточку (stretched-link).
Карточка целиком ведёт на страницу ЗНАНИЙ о принтере (знание-первым). */
.pc-primary{ display:block; text-decoration:none; color:inherit; }
.pc-primary::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:var(--pc-radius); }
.pc-primary:focus-visible{ outline:none; }
.pc-primary:focus-visible::after{ box-shadow:0 0 0 3px var(--pc-violet-ring); }
.pc-card:has(.pc-primary:focus-visible){ border-color:var(--pc-violet); }
.pc-thumb{
position:relative; display:grid; place-items:center; overflow:hidden;
aspect-ratio:4/3; background:linear-gradient(160deg, #FFFFFF, var(--pc-paper2));
border-bottom:1px solid var(--pc-line);
}
/* реальное фото товара — вписываем ЦЕЛИКОМ на светлую бумагу (не кроп),
как продуктовый каталог; bedbox-фолбэк ниже это НЕ трогает */
.pc-thumb img{ max-width:100%; max-height:100%; object-fit:contain; padding:.7rem; display:block; }
.pc-thumb--ph{ perspective:560px; }
.pc-thumb--ph::after{ /* мягкая «тень стола» под изо-боксом */
content:''; position:absolute; bottom:16%; left:50%; width:52%; height:12px;
transform:translateX(-50%); border-radius:50%;
background:radial-gradient(closest-side, rgba(124,92,255,.22), transparent 78%);
filter:blur(1px);
}
/* тип-бейдж — цвет + иконка (не только цвет; WCAG color-not-only) */
.pc-badge{
position:absolute; top:.6rem; left:.6rem; z-index:2;
display:inline-flex; align-items:center; gap:.35rem;
font-family:var(--pc-font); font-size:.68rem; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; padding:.28rem .55rem .28rem .5rem; border-radius:var(--pc-pill);
box-shadow:0 2px 8px rgba(20,20,20,.1);
}
.pc-badge::before{ content:''; width:12px; height:12px; background:currentColor; }
.pc-badge--fff{ background:var(--pc-violet-soft); color:var(--pc-violet-h); }
.pc-badge--fff::before{ /* слои FDM */
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='3' rx='1.5'/%3E%3Crect x='3' y='10.5' width='18' height='3' rx='1.5'/%3E%3Crect x='3' y='16' width='18' height='3' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='3' rx='1.5'/%3E%3Crect x='3' y='10.5' width='18' height='3' rx='1.5'/%3E%3Crect x='3' y='16' width='18' height='3' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pc-badge--resin{ background:var(--pc-coral-soft); color:#D8345B; }
.pc-badge--resin::before{ /* капля смолы */
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 2 5 10 5 15a7 7 0 0 0 14 0C19 10 12 2 12 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 2 5 10 5 15a7 7 0 0 0 14 0C19 10 12 2 12 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pc-name{
font-family:var(--pc-display); font-weight:700; font-size:1.02rem; line-height:1.22;
letter-spacing:-.01em; color:var(--pc-ink); margin:.9rem .95rem .3rem;
}
.pc-vol{
font-family:var(--pc-font); font-size:.9rem; color:var(--pc-mut);
font-variant-numeric:tabular-nums; margin:0 .95rem;
}
.pc-vol b{ color:var(--pc-ink); font-weight:600; }
/* SLICE-2 slot — не рендерим пустое (INV-RENDER) */
.pc-owners{ font-size:.82rem; color:var(--pc-dim); margin:.35rem .95rem 0; }
.pc-owners[hidden]{ display:none; }
/* ПОПУЛЯРНОСТЬ — звёзды из c.stars (0 → блок вообще не рендерится, INV-RENDER).
Смысл несут ЧИСЛО звёзд + aria-label + пилюля «Хит», не только цвет (WCAG). */
.pc-pop{ display:inline-flex; align-items:center; gap:2px; margin:.45rem .95rem 0; }
.pc-star{
flex:none; width:13px; height:13px; background:var(--pc-gold);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pc-hit{
margin-left:.4rem; padding:.12rem .42rem; border-radius:var(--pc-pill);
background:var(--pc-coral-soft); color:#C7304F;
font-family:var(--pc-font); font-size:.62rem; font-weight:800;
letter-spacing:.05em; text-transform:uppercase; line-height:1.4;
}
/* FOOT — низ карточки: primary-сигнификатор + тихий рез (иерархия §14.A) */
.pc-foot{
margin-top:auto; display:flex; flex-direction:column; align-items:flex-start;
gap:.05rem; padding-top:.7rem;
}
.pc-open{ /* сигнификатор primary-действия (клик по всей карточке) */
margin:0 .95rem; font-family:var(--pc-font); font-size:.9rem; font-weight:700;
color:var(--pc-violet); display:inline-flex; align-items:center; gap:.3rem;
}
.pc-open::after{ content:'→'; transition:transform .25s var(--pc-ease); }
.pc-card:hover .pc-open::after{ transform:translateX(4px); }
/* рез — МЯГКИЙ второй слой: тихая tertiary-ссылка, над stretched-overlay (z-index:2) */
.pc-cut{
position:relative; z-index:2; align-self:flex-start;
margin:0 .95rem .55rem; padding:.55rem 0; min-height:44px;
display:inline-flex; align-items:center; gap:.3rem;
font-family:var(--pc-font); font-size:.8rem; font-weight:600; color:var(--pc-dim);
text-decoration:none; transition:color .2s;
}
.pc-cut:hover{ color:var(--pc-coral); }
.pc-cut:focus-visible{ outline:none; border-radius:8px; box-shadow:0 0 0 3px var(--pc-violet-ring); }
/* ─────────────────────────────────────────────────────────────
5.1 BED-BOX — CSS-изометрия рабочего объёма по --bx/--by/--bz (мм).
Data-viz реальных габаритов, а НЕ фейк-фото (когда снимка нет).
Три грани куба: фронт (Ш×В) = сам span, топ (Ш×Г) = ::before,
правая (Г×В) = ::after. Все размеры пропорциональны мм.
───────────────────────────────────────────────────────────── */
.pc-bedbox{
--u:.24; /* px на мм */
--w:calc(var(--bx,200) * var(--u) * 1px); /* ширина X */
--d:calc(var(--by,200) * var(--u) * 1px); /* глубина Y */
--h:calc(var(--bz,200) * var(--u) * 1px); /* высота Z */
position:relative; width:var(--w); height:var(--h);
transform-style:preserve-3d;
transform:rotateX(-24deg) rotateY(34deg);
transition:transform .55s var(--pc-ease);
background:linear-gradient(160deg, rgba(124,92,255,.16), rgba(124,92,255,.04));
border:1.5px solid var(--pc-violet);
will-change:transform;
}
.pc-bedbox::before{ /* верхняя грань = «стол» с сеткой */
content:''; position:absolute; left:0; top:0; width:var(--w); height:var(--d);
transform-origin:top; transform:rotateX(90deg);
border:1.5px solid var(--pc-violet);
background:
repeating-linear-gradient(90deg, rgba(124,92,255,.20) 0 1px, transparent 1px 20%),
repeating-linear-gradient(0deg, rgba(124,92,255,.20) 0 1px, transparent 1px 20%),
linear-gradient(rgba(124,92,255,.12), rgba(124,92,255,.03));
}
.pc-bedbox::after{ /* правая грань */
content:''; position:absolute; right:0; top:0; width:var(--d); height:var(--h);
transform-origin:right; transform:rotateY(90deg);
border:1.5px solid var(--pc-violet);
background:linear-gradient(200deg, rgba(124,92,255,.24), rgba(124,92,255,.07));
}
.pc-card:hover .pc-bedbox{ transform:rotateX(-24deg) rotateY(20deg); }
/* ─────────────────────────────────────────────────────────────
5.2 COMPARE-BAND — заметный вход в модуль сравнений (лид-магнит).
Отдельная полоса НАД сеткой (не карточка-конкурент), scroll-away.
───────────────────────────────────────────────────────────── */
.pc-compare{
display:flex; align-items:center; gap:1rem; margin:1.1rem 0 0;
padding:.95rem 1.2rem; text-decoration:none;
background:linear-gradient(120deg, var(--pc-violet-soft), var(--pc-coral-soft));
border:1px solid var(--pc-violet-ring); border-radius:var(--pc-radius);
box-shadow:var(--pc-shadow);
transition:transform .3s var(--pc-ease), box-shadow .3s var(--pc-ease), border-color .2s;
}
.pc-compare:hover{ transform:translateY(-2px); box-shadow:var(--pc-shadow-lg); border-color:var(--pc-violet); }
.pc-compare:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring); }
.pcc-ic{
flex:none; display:grid; place-items:center; width:46px; height:46px;
border-radius:14px; background:var(--pc-surface); color:var(--pc-violet); box-shadow:var(--pc-shadow);
}
.pcc-ic svg{ width:26px; height:26px; }
.pcc-body{ display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.pcc-t{ font-family:var(--pc-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--pc-ink); }
.pcc-s{ font-family:var(--pc-font); font-size:.88rem; color:var(--pc-mut); line-height:1.4; }
.pcc-cta{
flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
padding:.6rem 1.05rem; min-height:44px;
font-family:var(--pc-font); font-weight:700; font-size:.9rem; color:var(--pc-violet);
background:var(--pc-surface); border:1px solid var(--pc-line2); border-radius:var(--pc-pill);
transition:border-color .2s;
}
.pc-compare:hover .pcc-cta{ border-color:var(--pc-violet); }
/* ─────────────────────────────────────────────────────────────
6. EMPTY STATE — не тупик, ведёт в редактор
───────────────────────────────────────────────────────────── */
.pc-empty{
margin:2rem auto; max-width:34rem; text-align:center;
background:var(--pc-surface); border:1px dashed var(--pc-line2);
border-radius:var(--pc-radius); padding:2.4rem 1.5rem;
}
.pc-empty[hidden]{ display:none; }
.pc-empty-t{ font-family:var(--pc-display); font-weight:700; font-size:1.25rem; color:var(--pc-ink); margin:0 0 .5rem; }
.pc-empty-s{ font-family:var(--pc-font); color:var(--pc-mut); line-height:1.55; margin:0 0 1.25rem; }
.pc-empty .pc-reset{ margin-top:.6rem; display:inline-block; }
/* ─────────────────────────────────────────────────────────────
7. CTA-полоса (низ обеих страниц) + кнопки в POP-стиле
(переопределяем dark .btn из landing.css на светлую пилюлю,
т.к. article.css не подключён)
───────────────────────────────────────────────────────────── */
.pc-cta{
margin:3rem 0 0; text-align:center;
background:linear-gradient(135deg, rgba(255,94,126,.10), rgba(124,92,255,.12));
border:1px solid var(--pc-line); border-radius:var(--pc-radius);
padding:clamp(1.75rem,4vw,2.75rem) 1.25rem;
}
.pc-cta h2{ font-family:var(--pc-display); font-weight:800; color:var(--pc-ink); letter-spacing:-.015em; font-size:clamp(1.3rem,3vw,1.8rem); margin:0 0 .5rem; }
.pc-cta p{ font-family:var(--pc-font); color:var(--pc-mut); max-width:44ch; margin:0 auto 1.4rem; line-height:1.55; }
.pcatalog .btn, .pmodel .btn{
display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
font-family:var(--pc-font); font-weight:700; font-size:.95rem; cursor:pointer;
text-decoration:none; border:1px solid transparent; border-radius:var(--pc-pill);
padding:.7rem 1.3rem; min-height:44px; line-height:1;
transition:transform .3s var(--pc-ease), box-shadow .3s var(--pc-ease), background .2s;
}
.pcatalog .btn-primary, .pmodel .btn-primary{
background:linear-gradient(135deg, var(--pc-coral), var(--pc-violet));
color:#fff; box-shadow:var(--pc-shadow-lg);
}
.pcatalog .btn-primary:hover, .pmodel .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 26px 60px -20px rgba(124,92,255,.5); }
.pcatalog .btn-lg, .pmodel .btn-lg{ font-size:1.02rem; padding:.9rem 1.7rem; min-height:52px; }
.pcatalog .btn:focus-visible, .pmodel .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--pc-violet-ring); }
/* ═══════════════════════════════════════════════════════════════
8. СТРАНИЦА МОДЕЛИ (.pm-*)
═══════════════════════════════════════════════════════════════ */
.pm-h1{ margin-top:.25rem; font-size:clamp(1.55rem,3.6vw,2.4rem); max-width:20ch; }
/* HERO — ПРИНТЕР: слева крупное ФОТО (доминанта ~58%), справа keyspecs+вердикт.
(fit-виджет уехал вниз в .pm-fitsection). Старые .pm-hero-l/-r/.pm-verdict/
.pm-lead ниже больше не используются шаблоном — правила оставлены безвредными. */
.pm-hero{
display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(1.25rem,3vw,2.5rem);
align-items:start; margin:1.25rem 0 2rem;
}
.pm-hero-l{ min-width:0; }
.pm-hero-l .pc-badge{ position:static; margin-bottom:.9rem; }
.pm-verdict{ font-family:var(--pc-display); font-weight:700; font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.2; color:var(--pc-ink); margin:0 0 .7rem; }
.pm-lead{ font-family:var(--pc-font); color:var(--pc-mut); font-size:1.02rem; line-height:1.6; margin:0 0 1.25rem; max-width:52ch; }
.pm-lead b{ color:var(--pc-ink); font-weight:600; font-variant-numeric:tabular-nums; }
/* inline fit-check */
.pm-fit{
background:var(--pc-surface); border:1px solid var(--pc-line2);
border-radius:var(--pc-radius-sm); padding:1rem 1.1rem 1.1rem;
margin:0 0 1.4rem; box-shadow:var(--pc-shadow);
}
.pm-fit-lbl{ display:block; font-family:var(--pc-font); font-size:.85rem; font-weight:600; color:var(--pc-mut); margin-bottom:.6rem; }
.pm-fit-ins{ display:flex; gap:.55rem; flex-wrap:wrap; }
.pm-fit-ins input{
flex:1 1 72px; min-width:0; width:100%;
font-family:var(--pc-font); font-size:1rem; color:var(--pc-ink);
text-align:center; font-variant-numeric:tabular-nums;
padding:.7rem .5rem; min-height:46px;
background:var(--pc-paper); border:1px solid var(--pc-line2); border-radius:10px;
transition:border-color .2s, box-shadow .2s;
}
.pm-fit-ins input::placeholder{ color:var(--pc-dim); font-weight:600; }
.pm-fit-ins input:focus-visible{ outline:none; border-color:var(--pc-violet); box-shadow:0 0 0 3px var(--pc-violet-ring); }
.pm-fit-out{
display:block; margin-top:.85rem; padding:.8rem .95rem; border-radius:10px;
font-family:var(--pc-font); font-size:.95rem; font-weight:600; line-height:1.45;
}
.pm-fit-out[hidden]{ display:none; }
.pm-fit-out .fit-ico{ font-style:normal; margin-right:.35rem; }
.pm-fit-out[data-state="fit"]{ background:rgba(31,191,117,.12); color:#12885A; border:1px solid rgba(31,191,117,.3); }
.pm-fit-out[data-state="cut"]{ background:var(--pc-violet-soft); color:var(--pc-violet-h); border:1px solid var(--pc-violet-ring); }
.pm-fit-out[data-state="partial"]{ background:var(--pc-paper2); color:var(--pc-mut); border:1px solid var(--pc-line2); }
.pm-fit-out[data-state="error"]{ background:rgba(255,94,126,.1); color:#C7304F; border:1px solid rgba(255,94,126,.3); }
.pm-fit-out b{ font-variant-numeric:tabular-nums; }
/* ── Захват лида в аha-момент «не влезает» (виден только при state='cut') ── */
.pm-leadcap{ margin-top:1rem; padding:1.1rem 1.2rem; border-radius:var(--pc-rad, 16px);
background:var(--pc-violet-soft); border:1px solid var(--pc-violet-ring); }
.pm-leadcap[hidden]{ display:none; }
.pm-leadcap-t{ font-family:var(--pc-font); font-weight:800; color:var(--pc-ink); margin:0 0 .2rem; font-size:1rem; }
.pm-leadcap-s{ color:var(--pc-mut); font-size:.9rem; margin:0 0 .8rem; line-height:1.45; }
.pm-leadcap-form{ display:flex; gap:.55rem; flex-wrap:wrap; align-items:stretch; }
.pm-leadcap-form input[type="email"]{ flex:1 1 200px; min-width:0; font-family:var(--pc-font);
font-size:.95rem; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--pc-line2);
background:var(--pc-surface, #fff); color:var(--pc-ink); }
.pm-leadcap-form input[type="email"]:focus-visible{ outline:none; border-color:var(--pc-violet);
box-shadow:0 0 0 3px var(--pc-violet-ring); }
.pm-leadcap-form .btn{ flex:0 0 auto; white-space:nowrap; }
.pm-leadcap-consent{ display:flex; align-items:center; gap:.45rem; margin-top:.6rem;
font-size:.82rem; color:var(--pc-mut); cursor:pointer; }
.pm-leadcap-consent[hidden]{ display:none; }
.pm-leadcap-done{ margin:.7rem 0 0; font-size:.9rem; font-weight:600; color:var(--pc-violet-h); }
.pm-leadcap-done[hidden]{ display:none; }
@media(max-width:520px){ .pm-leadcap-form .btn{ flex:1 1 100%; } }
.pm-hero-l .pm-how-link{ display:inline-block; margin-left:1rem; font-family:var(--pc-font); font-weight:600; font-size:.9rem; color:var(--pc-mut); text-decoration:none; }
.pm-hero-l a.pm-how-link:hover{ color:var(--pc-violet); }
/* HERO right — схема стола */
.pm-hero-r{ min-width:0; }
.pm-photo{
margin:0; display:grid; place-items:center; perspective:820px;
aspect-ratio:4/3; border-radius:var(--pc-radius); overflow:hidden;
background:linear-gradient(160deg, #FFFFFF, var(--pc-paper2));
border:1px solid var(--pc-line); box-shadow:var(--pc-shadow);
}
.pm-photo img{ max-width:100%; max-height:100%; object-fit:contain; padding:clamp(.75rem,3.5%,1.6rem); }
.pm-photo .pc-bedbox{ --u:.52; }
/* SPECS — KPI, tabular */
.pm-specs{
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.9rem;
margin:0 0 2.25rem;
}
.pm-kpi{
background:var(--pc-surface); border:1px solid var(--pc-line);
border-radius:var(--pc-radius-sm); padding:1rem 1.1rem; box-shadow:var(--pc-shadow);
}
.pm-kpi-l{ display:block; font-family:var(--pc-font); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--pc-dim); margin-bottom:.35rem; }
.pm-kpi-v{ display:block; font-family:var(--pc-display); font-weight:700; font-size:1.15rem; color:var(--pc-ink); letter-spacing:-.01em; }
.pm-kpi-v.num{ font-variant-numeric:tabular-nums; }
/* HOW — moat explainer */
.pm-how{ margin:0 0 2.25rem; }
section.pm-how h2, .pm-related h2, .pm-similar h2,
.pm-about h2, .pm-specs-full h2, .pm-faq h2,
.pm-forwhom h2, .pm-fitsection h2{
font-family:var(--pc-display); font-weight:800; color:var(--pc-ink);
letter-spacing:-.015em; font-size:clamp(1.25rem,2.8vw,1.6rem); margin:0 0 1rem;
}
.pm-steps{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.7rem; }
.pm-steps li{
font-family:var(--pc-font); color:var(--pc-mut); line-height:1.5;
padding:.9rem 1.1rem; background:var(--pc-surface);
border:1px solid var(--pc-line); border-radius:var(--pc-radius-sm);
}
.pm-steps li b{ color:var(--pc-ink); font-weight:700; }
/* RELATED / SIMILAR перелинковка */
.pm-related{ margin:0 0 2.25rem; }
.pm-links{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pm-links a{
display:inline-flex; align-items:center; gap:.5rem;
font-family:var(--pc-font); font-weight:600; font-size:.98rem; color:var(--pc-violet);
text-decoration:none;
}
.pm-links a::before{ content:'›'; color:var(--pc-dim); }
.pm-links a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pm-similar{ margin:0 0 1rem; }
/* ═══════════════════════════════════════════════════════════════
8.5 ПОЛНАЯ SEO-КАРТОЧКА МОДЕЛИ — kicker · обзор · плюсы/минусы ·
филаменты · полная таблица спеков · FAQ. Owner: «внутри полный
спект», не тонкая карточка. Та же light-система, тот же ритм.
═══════════════════════════════════════════════════════════════ */
/* 8.5.0 kicker — метаданные под H1 (тип · технология · бренд · год) */
.pm-kicker{
font-family:var(--pc-font); font-size:.92rem; font-weight:500;
color:var(--pc-mut); letter-spacing:.01em; line-height:1.4;
margin:-.15rem 0 0;
}
/* 8.5.1 ОБЗОР — читаемая колонка текста (60–70ch) */
.pm-about{ margin:1.75rem 0 2.25rem; }
.pm-about p{
font-family:var(--pc-font); color:var(--pc-mut);
font-size:1.02rem; line-height:1.7; max-width:68ch; margin:0 0 1rem;
}
.pm-about p:last-child{ margin-bottom:0; }
.pm-about p b{ color:var(--pc-ink); font-weight:600; }
/* 8.5.2 ПЛЮСЫ / МИНУСЫ — 2 карточки; статус = цвет + ФОРМА (✓ / −), не только цвет */
.pm-pc{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:0 0 2.25rem; }
.pm-pros, .pm-cons{
background:var(--pc-surface); border:1px solid var(--pc-line);
border-radius:var(--pc-radius-sm); padding:1.25rem 1.35rem; box-shadow:var(--pc-shadow);
}
.pm-pros h3, .pm-cons h3, .pm-fils h3{
font-family:var(--pc-display); font-weight:700; font-size:1.05rem;
letter-spacing:-.01em; color:var(--pc-ink); margin:0 0 .85rem;
}
.pm-pros h3, .pm-cons h3{ display:flex; align-items:center; gap:.5rem; }
.pm-pros h3::before, .pm-cons h3::before{ content:''; flex:none; width:10px; height:10px; border-radius:50%; }
.pm-pros h3::before{ background:var(--pc-ok); }
.pm-cons h3::before{ background:var(--pc-coral); }
.pm-pros ul, .pm-cons ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.pm-pros ul li, .pm-cons ul li{
position:relative; padding-left:1.85rem;
font-family:var(--pc-font); font-size:.96rem; line-height:1.5; color:var(--pc-mut);
}
.pm-pros ul li::before, .pm-cons ul li::before{
position:absolute; left:0; top:.05rem;
display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
font-weight:800; line-height:1;
}
.pm-pros ul li::before{ content:'✓'; background:rgba(31,191,117,.15); color:#12885A; font-size:.72rem; }
.pm-cons ul li::before{ content:'−'; background:var(--pc-coral-soft); color:#C7304F; font-size:.95rem; }
/* 8.5.3 ФИЛАМЕНТЫ — теги-пилюли (не интерактивные) + note со ссылкой на моат */
.pm-fils{ margin:0 0 2.25rem; }
.pm-chiplist{ list-style:none; margin:0 0 .9rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pm-chip{
display:inline-flex; align-items:center; font-family:var(--pc-font);
font-size:.85rem; font-weight:600; color:var(--pc-violet-h);
background:var(--pc-violet-soft); border:1px solid transparent;
border-radius:var(--pc-pill); padding:.4rem .85rem; min-height:32px;
}
.pm-fils-note{
font-family:var(--pc-font); font-size:.88rem; color:var(--pc-mut);
line-height:1.6; margin:0; max-width:62ch;
}
.pm-fils-note a{ color:var(--pc-violet); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.pm-fils-note a:hover{ color:var(--pc-violet-h); }
/* 8.5.4 ПОЛНАЯ ТАБЛИЦА ХАРАКТЕРИСТИК — th-метка / td-значение, зебра, tabular-nums */
.pm-specs-full{ margin:0 0 2.25rem; }
.pm-spectable{
width:100%; border-collapse:separate; border-spacing:0;
background:var(--pc-surface); border:1px solid var(--pc-line);
border-radius:var(--pc-radius-sm); overflow:hidden; box-shadow:var(--pc-shadow);
font-family:var(--pc-font);
}
.pm-spectable th, .pm-spectable td{
padding:.8rem 1.1rem; text-align:left; vertical-align:top;
border-bottom:1px solid var(--pc-line); line-height:1.45;
}
.pm-spectable tr:last-child th, .pm-spectable tr:last-child td{ border-bottom:0; }
.pm-spectable th{ width:46%; font-weight:600; color:var(--pc-mut); font-size:.92rem; }
.pm-spectable td{ color:var(--pc-ink); font-size:.95rem; }
.pm-spectable td.num{ font-variant-numeric:tabular-nums; }
.pm-spectable tr:nth-child(even) th, .pm-spectable tr:nth-child(even) td{ background:rgba(124,92,255,.035); }
.pm-specs-note{
font-family:var(--pc-font); font-size:.86rem; color:var(--pc-mut);
line-height:1.55; margin:.9rem 0 0; max-width:62ch;
}
/* 8.5.5 FAQ — аккордеон, шеврон-стрелка, разделители-строки */
.pm-faq{ margin:0 0 2.25rem; }
.pm-faq-item{ border-bottom:1px solid var(--pc-line); }
.pm-faq-item:first-of-type{ border-top:1px solid var(--pc-line); }
.pm-faq-item summary{
list-style:none; cursor:pointer; display:flex; align-items:center;
justify-content:space-between; gap:1rem; padding:1.05rem .25rem; min-height:44px;
font-family:var(--pc-font); font-weight:600; font-size:1.02rem; color:var(--pc-ink);
transition:color .2s;
}
.pm-faq-item summary::-webkit-details-marker{ display:none; }
.pm-faq-item summary::after{
content:''; flex:none; width:9px; height:9px; margin-right:.35rem;
border-right:2px solid var(--pc-mut); border-bottom:2px solid var(--pc-mut);
transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--pc-ease);
}
.pm-faq-item[open] summary::after{ transform:rotate(-135deg) translateY(-1px); border-color:var(--pc-violet); }
.pm-faq-item summary:hover{ color:var(--pc-violet); }
.pm-faq-item summary:focus-visible{ outline:none; border-radius:8px; box-shadow:0 0 0 3px var(--pc-violet-ring); }
.pm-faq-a{
padding:0 .25rem 1.15rem; font-family:var(--pc-font);
color:var(--pc-mut); font-size:.98rem; line-height:1.65; max-width:70ch;
}
/* ═══════════════════════════════════════════════════════════════
8.6 HERO ПЕРЕВЁРСТАН ПОД ПРИНТЕР + «Кому подходит» + Fit-секция.
Человек ищет ПРИНТЕР → доминанта hero = крупное ФОТО, справа —
ключевые характеристики + вердикт. Наш fit-виджет уехал ВНИЗ,
став выделенным violet-акцент-блоком (моат как отдельный оффер).
Та же light-система, те же --pc-* токены и 4px-ритм.
═══════════════════════════════════════════════════════════════ */
/* 8.6.0 крупная фолбэк-схема стола (когда фото нет / img onerror) */
.pc-bedbox--lg{ --u:.52; }
.pm-photo--ph{ position:relative; }
.pm-photo--ph::after{ /* мягкая «тень стола» под изо-боксом */
content:''; position:absolute; bottom:12%; left:50%; width:48%; height:12px;
transform:translateX(-50%); border-radius:50%; pointer-events:none;
background:radial-gradient(closest-side, rgba(124,92,255,.20), transparent 78%);
filter:blur(1px);
}
/* 8.6.1 HERO-МЕДИА — крупное фото принтера (доминанта). Карту-«бумагу»,
object-fit:contain и фолбэк-бокс тянем из уже существующего .pm-photo. */
.pm-hero-media{ min-width:0; }
/* 8.6.2 HERO-ИНФО — правая колонка: badge · keyspecs · вердикт · теги · ссылка */
.pm-hero-info{
min-width:0; display:flex; flex-direction:column; align-items:flex-start;
}
/* .pc-badge по умолчанию position:absolute — в инфо-колонке возвращаем в поток */
.pm-hero-info .pc-badge{ position:static; align-self:flex-start; margin:0 0 1rem; }
/* 8.6.3 KEY-SPECS — компактный spec-sheet: строки-highlight с разделителями.
dt приглушён, dd жирный ink, dd.num — tabular-nums (колонка не прыгает). */
.pm-keyspecs{ width:100%; margin:0 0 1.25rem; }
.pm-keyspecs > div{
display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
padding:.62rem 0; border-bottom:1px solid var(--pc-line);
}
.pm-keyspecs > div:first-child{ border-top:1px solid var(--pc-line); }
.pm-keyspecs dt{
flex:none; font-family:var(--pc-font); font-size:.9rem; font-weight:500; color:var(--pc-mut);
}
.pm-keyspecs dd{
margin:0; font-family:var(--pc-font); font-size:.98rem; font-weight:700;
color:var(--pc-ink); text-align:right; line-height:1.35;
}
.pm-keyspecs dd.num{ font-variant-numeric:tabular-nums; }
/* 8.6.4 ВЕРДИКТ — ключевой смысл «кому и зачем»: акцент-подложка + левый violet-бордер */
.pm-verdict-line{
width:100%; margin:0 0 1.1rem;
font-family:var(--pc-display); font-weight:600;
font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.4; color:var(--pc-ink);
padding:.85rem 1rem .85rem 1.05rem;
background:var(--pc-violet-soft);
border-left:3px solid var(--pc-violet);
border-radius:0 var(--pc-radius-sm) var(--pc-radius-sm) 0;
}
/* 8.6.5 ТЕГИ-СЦЕНАРИИ «хорош для» — КОНТУР-чипы (нарочно отличны от filled
filament-чипов .pm-chip), с приглушённым violet-маркером-точкой */
.pm-bestfor{
width:100%; list-style:none; margin:0 0 1.15rem; padding:0;
display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
}
.pm-bestfor::before{
content:'Хорош для'; align-self:center;
font-family:var(--pc-font); font-size:.72rem; font-weight:700;
text-transform:uppercase; letter-spacing:.045em; color:var(--pc-dim);
margin-right:.15rem;
}
.pm-tag{
display:inline-flex; align-items:center; gap:.4rem;
font-family:var(--pc-font); font-size:.82rem; font-weight:600; color:var(--pc-mut);
padding:.34rem .72rem; min-height:30px;
background:transparent; border:1px solid var(--pc-line2); border-radius:var(--pc-pill);
}
.pm-tag::before{
content:''; flex:none; width:5px; height:5px; border-radius:50%;
background:var(--pc-violet); opacity:.65;
}
/* 8.6.6 SOFT-ссылка к fit-секции вниз (тихая, НЕ кнопка; тач-таргет 44px) */
.pm-fitlink{
display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
min-height:44px;
font-family:var(--pc-font); font-size:.92rem; font-weight:600; color:var(--pc-violet);
text-decoration:none; transition:color .2s;
}
.pm-fitlink:hover{ color:var(--pc-violet-h); text-decoration:underline; text-underline-offset:3px; }
.pm-fitlink:focus-visible{ outline:none; border-radius:8px; box-shadow:0 0 0 3px var(--pc-violet-ring); }
/* 8.6.7 «КОМУ ПОДХОДИТ» — интро + 2 карточки аудитории (стоит / не стоит брать).
Тон = цвет + ФОРМА (✓ / !), не только цвет (WCAG color-not-only). */
.pm-forwhom{ margin:0 0 2.25rem; }
.pm-forwhom > p{
font-family:var(--pc-font); color:var(--pc-mut);
font-size:1.02rem; line-height:1.7; max-width:68ch; margin:0 0 1.25rem;
}
.pm-forwhom > p b{ color:var(--pc-ink); font-weight:600; }
.pm-ca{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pm-choose, .pm-avoid{
border-radius:var(--pc-radius-sm); padding:1.25rem 1.35rem; box-shadow:var(--pc-shadow);
}
.pm-choose{ background:rgba(31,191,117,.055); border:1px solid rgba(31,191,117,.28); }
.pm-avoid{ background:rgba(255,94,126,.05); border:1px solid rgba(255,94,126,.26); }
.pm-choose h3, .pm-avoid h3{
font-family:var(--pc-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em;
margin:0 0 .85rem; display:flex; align-items:center; gap:.55rem;
}
.pm-choose h3{ color:#0C6E47; } /* AA ≥4.5:1 на светлой подложке */
.pm-avoid h3{ color:#C7304F; }
.pm-choose h3::before, .pm-avoid h3::before{
flex:none; width:24px; height:24px; border-radius:50%;
display:grid; place-items:center; font-weight:800; line-height:1; font-size:.85rem;
}
.pm-choose h3::before{ content:'✓'; background:rgba(31,191,117,.16); color:#0C6E47; }
.pm-avoid h3::before{ content:'!'; background:var(--pc-coral-soft); color:#C7304F; }
.pm-choose ul, .pm-avoid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.pm-choose li, .pm-avoid li{
position:relative; padding-left:1.85rem;
font-family:var(--pc-font); font-size:.96rem; line-height:1.5; color:var(--pc-mut);
}
.pm-choose li::before, .pm-avoid li::before{
position:absolute; left:0; top:.05rem; display:grid; place-items:center;
width:20px; height:20px; border-radius:50%; font-weight:800; line-height:1;
}
.pm-choose li::before{ content:'✓'; background:rgba(31,191,117,.15); color:#12885A; font-size:.72rem; }
.pm-avoid li::before{ content:'!'; background:var(--pc-coral-soft); color:#C7304F; font-size:.8rem; }
/* 8.6.8 FIT-СЕКЦИЯ (наш МОАТ) ВНИЗУ — выделенный violet-акцент-блок = отдельный
оффер BunnySplit, а не рядовая секция. Форма .pm-fit / .pm-fit-out / кнопка
.btn-primary уже стилизованы выше — здесь только рамка-подложка и интро. */
.pm-fitsection{
margin:2.5rem 0; padding:clamp(1.5rem,4vw,2.5rem) clamp(1.25rem,4vw,2rem);
background:linear-gradient(135deg, var(--pc-violet-soft), rgba(255,94,126,.06));
border:1px solid var(--pc-violet-ring); border-radius:var(--pc-radius);
box-shadow:var(--pc-shadow-lg);
scroll-margin-top:calc(var(--pc-stick) + 12px); /* якорь #pm-fit не под sticky-навбар */
}
.pm-fit-intro{
font-family:var(--pc-font); color:var(--pc-mut);
font-size:1.02rem; line-height:1.65; max-width:64ch; margin:0 0 1.4rem;
}
.pm-fit-intro b{ color:var(--pc-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.pm-fitsection .pm-fit{ max-width:520px; } /* группа инпутов остаётся плотной, не растягивается */
/* ─────────────────────────────────────────────────────────────
9. MOBILE ≤768: поиск отдельной строкой, сегмент+сорт в ряд,
бренд → bottom-sheet, сетка 2-кол
───────────────────────────────────────────────────────────── */
@media (max-width:768px){
:root{ --pc-stick:56px; }
/* убираем backdrop-filter на мобайле: он делает .pc-controls containing-block
для position:fixed → bottom-sheet бренда прилипал бы к низу БАРА, а не вьюпорта.
Без него шторка и скрим корректно якорятся к низу экрана. */
.pc-controls{
border-radius:var(--pc-radius); padding:.6rem; gap:.55rem;
backdrop-filter:none; -webkit-backdrop-filter:none;
background:var(--pc-paper);
}
.pc-search{ flex:1 1 100%; order:1; } /* поиск — своя строка */
.pc-seg{ order:2; }
.pc-brand{ order:3; }
.pc-count{ order:4; margin-left:auto; }
.pc-sort{ order:5; }
.pc-sort select{ min-height:40px; }
/* бренд-меню → нижняя шторка (bottom-sheet) */
.pc-brand[open]::before{
content:''; position:fixed; inset:0; z-index:39;
background:rgba(20,20,20,.4); backdrop-filter:blur(2px);
}
.pc-brandmenu{
position:fixed; left:0; right:0; bottom:0; top:auto;
min-width:0; width:100%; max-height:72vh;
border-radius:var(--pc-radius) var(--pc-radius) 0 0;
border:0; border-top:1px solid var(--pc-line2);
padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
animation:pcSheet .28s var(--pc-ease);
}
.pc-brandmenu::before{
content:''; position:sticky; top:0; display:block;
width:40px; height:4px; margin:-.2rem auto .7rem;
background:var(--pc-line2); border-radius:var(--pc-pill);
}
@keyframes pcSheet{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.pc-grid{ grid-template-columns:repeat(2, 1fr); gap:.7rem; }
.pc-name{ font-size:.92rem; }
.pc-vol{ font-size:.82rem; }
/* compare-band → иконка+текст в ряд, CTA на всю ширину под ними */
.pc-compare{ flex-wrap:wrap; padding:.85rem .95rem; gap:.7rem 1rem; }
.pcc-body{ flex:1 1 60%; }
.pcc-cta{ margin-left:0; width:100%; justify-content:center; order:3; }
.pm-hero{ grid-template-columns:1fr; gap:1.25rem; }
.pm-hero-r{ order:-1; } /* схема сверху на мобайле */
.pm-photo{ max-height:300px; }
.pm-hero-l .pm-how-link{ display:block; margin:.9rem 0 0; }
.pm-pc, .pm-ca{ grid-template-columns:1fr; } /* плюсы/минусы + аудитория в один столбец */
.pm-about{ margin-top:1.25rem; }
.pm-hero-info{ margin-top:.25rem; } /* инфо под фото */
.pm-fitsection{ margin:2rem 0; }
.pm-fitsection .pm-fit{ max-width:none; } /* fit-форма на всю ширину на мобайле */
}
/* таблица спеков → стек «метка НАД значением» на узких экранах,
чтобы «худые» строки не ломались и не скроллились вбок */
@media (max-width:560px){
.pm-spectable th{
display:block; width:auto; border-bottom:0;
padding:.7rem 1rem .1rem; font-size:.76rem; font-weight:600;
text-transform:uppercase; letter-spacing:.04em; color:var(--pc-mut);
}
.pm-spectable td{ display:block; width:auto; padding:.05rem 1rem .75rem; font-weight:600; }
.pm-pros, .pm-cons{ padding:1.1rem 1.15rem; }
}
@media (max-width:380px){
.pc-grid{ grid-template-columns:1fr; }
.pc-count{ font-size:.8rem; }
}
/* ─────────────────────────────────────────────────────────────
10. reduced-motion — гасим движение, читаемость мгновенная
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.pcatalog *, .pmodel *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
.pc-card:hover{ transform:none; }
.pc-card:hover .pc-bedbox{ transform:rotateX(-24deg) rotateY(34deg); }
}
/* ─────────────────────────────────────────────────────────────
СРАВНЕНИЯ «X vs Y» (программное SEO) — тот же light-POP слой
───────────────────────────────────────────────────────────── */
.pm-lead{ font-family:var(--pc-font); color:var(--pc-mut); max-width:60ch;
font-size:1.02rem; line-height:1.6; margin:.2rem 0 1.4rem; }
/* HERO: два принтера лицом к лицу */
.cmp-hero{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
gap:clamp(.5rem,2vw,1.6rem); margin:1rem 0 1.8rem;
background:var(--pc-surface); border:1px solid var(--pc-line);
border-radius:var(--pc-radius); box-shadow:var(--pc-shadow);
padding:clamp(1rem,3vw,1.8rem); }
.cmp-col{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; min-width:0; }
.cmp-media{ display:grid; place-items:center; width:100%; aspect-ratio:1/1; max-width:280px;
background:var(--pc-paper2); border-radius:var(--pc-radius-sm); padding:.6rem; }
.cmp-media img{ max-width:100%; max-height:100%; object-fit:contain; }
.cmp-name{ font-family:var(--pc-display); font-weight:700; font-size:1.05rem; line-height:1.2; margin:.2rem 0 0; }
.cmp-name a{ color:var(--pc-ink); text-decoration:none; }
.cmp-name a:hover{ color:var(--pc-violet); }
.cmp-sub{ font-family:var(--pc-font); color:var(--pc-mut); font-size:.86rem; }
.cmp-vs{ align-self:center; font-family:var(--pc-display); font-weight:800; color:var(--pc-coral);
font-size:1.1rem; background:var(--pc-coral-soft); border-radius:var(--pc-pill);
width:2.4em; height:2.4em; display:grid; place-items:center; }
/* Вердикт «кому что» */
.cmp-verdict{ margin:1.6rem 0; }
.cmp-verdict h2{ font-family:var(--pc-display); color:var(--pc-ink); font-size:1.3rem; margin:0 0 .8rem; }
.cmp-vgrid{ list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem; }
.cmp-vcard{ background:var(--pc-surface); border:1px solid var(--pc-line);
border-left:3px solid var(--pc-violet); border-radius:var(--pc-radius-sm);
padding:.85rem 1rem; box-shadow:var(--pc-shadow); display:flex; flex-direction:column; gap:.25rem; }
.cmp-vuse{ font-family:var(--pc-font); font-size:.8rem; color:var(--pc-dim); text-transform:uppercase; letter-spacing:.02em; }
.cmp-vwin{ font-family:var(--pc-display); font-weight:700; color:var(--pc-ink); font-size:1rem; }
.cmp-vwhy{ font-family:var(--pc-font); color:var(--pc-mut); font-size:.88rem; line-height:1.45; }
.cmp-vnote{ font-family:var(--pc-font); color:var(--pc-mut); background:var(--pc-paper2);
border-radius:var(--pc-radius-sm); padding:1rem 1.2rem; }
/* Таблица сравнения */
.cmp-table-wrap{ margin:1.8rem 0; }
.cmp-table-wrap h2{ font-family:var(--pc-display); color:var(--pc-ink); font-size:1.3rem; margin:0 0 .8rem; }
.cmp-table-scroll{ overflow-x:auto; border:1px solid var(--pc-line); border-radius:var(--pc-radius-sm); box-shadow:var(--pc-shadow); }
.cmp-table{ width:100%; border-collapse:collapse; font-family:var(--pc-font); font-size:.92rem; min-width:520px; background:var(--pc-surface); }
.cmp-table thead th{ position:sticky; top:0; background:var(--pc-paper2); color:var(--pc-ink);
font-family:var(--pc-display); font-weight:700; text-align:left; padding:.7rem .9rem; font-size:.92rem; }
.cmp-table thead th:first-child{ width:34%; }
.cmp-table tbody th{ text-align:left; font-weight:600; color:var(--pc-mut); padding:.6rem .9rem; vertical-align:top;
border-top:1px solid var(--pc-line); background:var(--pc-paper); }
.cmp-table tbody td{ padding:.6rem .9rem; vertical-align:top; border-top:1px solid var(--pc-line);
color:var(--pc-ink); width:33%; }
.cmp-table tbody tr:hover th, .cmp-table tbody tr:hover td{ background:var(--pc-violet-soft); }
.cmp-win{ background:rgba(31,191,117,.09); font-weight:600; }
.cmp-tick{ color:var(--pc-ok); font-weight:800; }
.cmp-legend{ font-family:var(--pc-font); color:var(--pc-dim); font-size:.82rem; margin:.6rem 0 0; }
/* CTA-строка «рез под любой из двух» */
.cmp-cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem; }
.cmp-cta-row .btn{ flex:1 1 240px; }
/* Перелинковка (чип-ссылки сравнений на карточке принтера) */
.pm-compare-links{ margin:1.6rem 0; }
.pm-compare-links h2{ font-family:var(--pc-display); color:var(--pc-ink); font-size:1.2rem; margin:0 0 .7rem; }
.cmp-chiplinks{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.cmp-chiplinks a{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--pc-font);
font-size:.9rem; color:var(--pc-ink); text-decoration:none; background:var(--pc-surface);
border:1px solid var(--pc-line2); border-radius:var(--pc-pill); padding:.4rem .85rem; transition:border-color .2s,color .2s; }
.cmp-chiplinks a span{ color:var(--pc-coral); font-weight:700; }
.cmp-chiplinks a:hover{ border-color:var(--pc-violet); color:var(--pc-violet); }
.cmp-otherlinks a{ color:var(--pc-violet); text-decoration:none; }
.cmp-otherlinks a:hover{ text-decoration:underline; }
/* Индекс сравнений */
.cmp-search{ display:block; margin:.4rem 0 1.4rem; max-width:440px; }
.cmp-search input{ width:100%; font-family:var(--pc-font); font-size:.98rem; color:var(--pc-ink);
background:var(--pc-surface); border:1px solid var(--pc-line2); border-radius:var(--pc-pill);
padding:.7rem 1.1rem; }
.cmp-search input:focus{ outline:none; border-color:var(--pc-violet); box-shadow:0 0 0 3px var(--pc-violet-ring); }
.cmp-index h2{ font-family:var(--pc-display); color:var(--pc-ink); font-size:1.3rem; margin:0 0 .9rem; }
.cmp-idx-grid{ list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.6rem; }
.cmp-idx-item a{ display:flex; align-items:center; gap:.5rem; font-family:var(--pc-font); font-size:.92rem;
color:var(--pc-ink); text-decoration:none; background:var(--pc-surface); border:1px solid var(--pc-line);
border-radius:var(--pc-radius-sm); padding:.7rem .9rem; box-shadow:var(--pc-shadow); transition:border-color .2s,transform .15s; }
.cmp-idx-item a:hover{ border-color:var(--pc-violet); transform:translateY(-1px); }
.cmp-idx-a, .cmp-idx-b{ font-weight:600; }
.cmp-idx-vs{ color:var(--pc-coral); font-weight:700; font-size:.82rem; }
.cmp-idx-item .pc-badge{ margin-left:auto; }
.cmp-idx-empty{ font-family:var(--pc-font); color:var(--pc-mut); padding:1rem 0; }
@media (max-width:640px){
.cmp-hero{ grid-template-columns:1fr 1fr; }
.cmp-vs{ grid-column:1/-1; grid-row:1; justify-self:center; margin-bottom:-.4rem; }
.cmp-col:nth-child(1){ grid-column:1; grid-row:2; }
.cmp-col:nth-child(3){ grid-column:2; grid-row:2; }
}
/* ═══════════════════════════════════════════════════════════════
11. ПИКЕР СРАВНЕНИЯ «любой A vs любой B» — ГЛАВНОЕ действие страницы.
Стоит НАД поиском и индексом 350 готовых пар. Searchable combobox на
vanilla JS (role=combobox+listbox: клавиатура/тач/a11y), с native