/* ============================================================
Company Showcase — design system
Тема заземлена в агросекторе: глубокий полевой зелёный (--primary),
пшеничный акцент (--accent). Оба цвета настраиваются в админке.
============================================================ */
/* ============================================================
Апдейт 219: общее правило для атрибута hidden.
Браузер скрывает [hidden] правилом display:none из своей таблицы стилей,
но ЛЮБОЕ авторское правило display его перебивает — специфичность тут ни
при чём, авторские стили просто важнее браузерных. Поэтому у всех
элементов с display:flex/grid/inline-flex атрибут hidden не работал,
и el.hidden = true визуально ничего не делал.
В проекте это уже чинили точечно (.cookie-banner, .to-top, .popup-overlay,
.modal, .msg-emoji-pop), но каждый новый компонент наступал на те же грабли.
Проверка показала, что сейчас не скрывались: окно вставки ссылки и выбора
картинки, панель структуры статьи, плашка о черновике, кнопка звука
у видео, кнопка «Убрать ссылку» и карточки статей при включённом
«Скрыть прочитанные».
Одно правило закрывает весь класс ошибок раз и навсегда.
============================================================ */
[hidden]{display:none !important}
:root{
--ink:#16211b;
--ink-2:#556158;
--paper:#f5f7f1;
--surface:#ffffff;
/* Апдейт 213: переменной --bg в :root никогда не было, хотя var(--bg)
встречается в 30+ правилах. Свойство с неизвестной переменной
объявляется недействительным, и фон просто не рисовался — так панель
редактора оказалась прозрачной и текст просвечивал сквозь кнопки.
Задаём её как синоним «бумажного» фона: именно этого от неё и ждали. */
--bg:#f5f7f1;
--line:#e4e8df;
--line-2:#eef1ea;
--danger:#c0392b;
--ok:#2f7d4f;
--radius:16px;
--radius-sm:11px;
--shadow:0 1px 2px rgba(20,40,25,.05), 0 10px 30px -18px rgba(20,40,25,.25);
--shadow-lg:0 30px 60px -30px rgba(20,40,25,.35);
--primary:#256B4B; --accent:#D9A441;
--primary-ink:#ffffff;
--maxw:1080px;
--font-display:'Golos Text',system-ui,sans-serif;
--font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);
font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0;letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.small{font-size:13px}
/* Апдейт 197: color и line-height были перекрыты .prose ниже — убраны как мёртвые */
.prose{font-size:16px}
/* ---------- layout ---------- */
.page{max-width:var(--maxw);margin:0 auto;padding:0 18px 96px}
.page.narrow{max-width:640px}
.section{padding:26px 0;border-top:1px solid var(--line-2)}
.section:first-of-type{border-top:0}
.page-title{font-size:clamp(26px,6vw,38px);font-weight:800;margin-bottom:6px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.section-sub{margin:-8px 0 14px}
.split-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.link-more{color:var(--primary);font-weight:600;font-size:14px;white-space:nowrap}
.back-link{display:inline-block;margin:18px 0 4px;color:var(--ink-2);font-weight:600}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;
padding:11px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;
transition:transform .08s ease, background .15s ease, border-color .15s ease;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn-primary:hover{background:color-mix(in srgb,var(--primary) 86%,#000)}
.btn-outline{background:transparent;color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.btn-outline:hover{background:color-mix(in srgb,var(--primary) 8%,#fff)}
.btn-ghost{background:var(--line-2);color:var(--ink);border-color:transparent}
.btn-ghost:hover{background:#e3e7de}
.btn-danger{background:#fbecea;color:var(--danger);border-color:#f3d6d2}
.btn-danger:hover{background:#f7ddd9}
.btn-lg{padding:14px 22px;font-size:16px;border-radius:14px}
.btn-sm{padding:8px 13px;font-size:13.5px;border-radius:10px}
.btn-block{width:100%}
.icon-btn{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
background:var(--line-2);color:var(--ink);font-size:16px}
.icon-btn:hover{background:#e3e7de}
/* ---------- public header ---------- */
.site-header{
position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:11px 18px;background:color-mix(in srgb,var(--paper) 82%,transparent);
backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line-2);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-family:var(--font-display);min-width:0}
.brand-logo{height:34px;width:auto;border-radius:8px}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;display:inline-flex;
align-items:center;justify-content:center;font-weight:800;font-size:14px;font-family:var(--font-display)}
.brand-mark.sm{width:30px;height:30px;font-size:12px}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{padding:8px 12px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink-2)}
.site-nav a.active,.site-nav a:hover{color:var(--ink);background:var(--line-2)}
.site-nav a.cta-mini{background:var(--primary);color:#fff}
.site-nav a.cta-mini:hover{background:color-mix(in srgb,var(--primary) 86%,#000)}
/* ---------- hero ---------- */
.hero{position:relative;margin:0 -18px;padding:44px 18px 30px;overflow:hidden}
.hero-cover{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero.has-cover::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 78%,transparent),color-mix(in srgb,#0b1710 92%,transparent))}
.hero.has-cover{color:#fff}
.hero.has-cover .hero-tagline,.hero.has-cover .brand-name{color:#eef3ee}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.hero-logo img{height:78px;width:auto;border-radius:16px;background:#fff;padding:8px;box-shadow:var(--shadow)}
/* Апдейт 197: font-size:clamp(...) и margin-top не работали — их перекрывало
второе объявление .hero-title (font-size:30px; margin:0 0 8px). Вид не меняется. */
.hero-title{font-weight:800}
.hero-tagline{font-size:clamp(16px,4vw,20px);color:var(--ink-2);margin-top:8px;max-width:640px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero.has-cover .btn-outline{color:#fff;border-color:rgba(255,255,255,.6)}
.hero.has-cover .btn-outline:hover{background:rgba(255,255,255,.12)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14px;box-shadow:var(--shadow)}
.chip span{font-size:14px}
.chip:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.hero.has-cover .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
/* ---------- avatars ---------- */
.avatar-fallback{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,#fff);
color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-weight:800;
font-family:var(--font-display);font-size:20px;flex:none}
.avatar-fallback.sm{width:38px;height:38px;font-size:14px}
.avatar-fallback.lg{width:78px;height:78px;font-size:28px;border-radius:18px}
.avatar-fallback.xl{width:96px;height:96px;font-size:34px}
/* ---------- team preview strip ---------- */
.team-strip{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:12px;overflow-x:auto;padding:4px 2px 12px;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.mini-card{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;box-shadow:var(--shadow)}
.mini-card:hover{transform:translateY(-2px);transition:transform .12s}
.mini-photo{width:66px;height:66px;border-radius:50%;object-fit:cover}
.mini-name{font-weight:700;font-size:14px;line-height:1.2}
.mini-pos{font-size:12px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:9px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14px}
.pill:hover{border-color:var(--primary);color:var(--primary)}
/* ---------- team grid ---------- */
.team-grid{display:grid;grid-template-columns:1fr;gap:12px}
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:var(--shadow)}
.person-main{display:flex;align-items:center;gap:14px;flex:1 1 220px;min-width:0}
.person-photo{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}
.person-name{font-family:var(--font-display);font-weight:700;font-size:17px}
.person-pos{font-size:14px}
.person-actions{display:flex;align-items:center;gap:8px}
/* ---------- employee profile ---------- */
.profile-card{max-width:560px;margin:12px auto 0;background:var(--surface);border:1px solid var(--line);
border-radius:22px;padding:24px;box-shadow:var(--shadow-lg)}
.profile-top{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.profile-photo{width:96px;height:96px;border-radius:20px;object-fit:cover;flex:none}
.profile-name{font-size:24px;font-weight:800}
.profile-pos{color:var(--primary);font-weight:700;margin-top:2px}
.profile-org{font-size:14px;margin-top:2px}
.contact-list{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.contact-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:13px 6px;
border-top:1px solid var(--line-2)}
.contact-row:hover{background:var(--line-2);border-radius:10px}
.cr-ico{font-size:18px;text-align:center;color:var(--primary)}
.cr-val{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-label{font-size:12px}
.profile-bio{margin-top:18px;border-top:1px solid var(--line-2);padding-top:16px}
/* ---------- products ---------- */
.product-grid{display:grid;grid-template-columns:1fr;gap:14px}
.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow);display:flex;flex-direction:column}
.product-img{height:160px;background-size:cover;background-position:center;background-color:var(--line-2)}
.product-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-title{font-size:18px;font-weight:700}
.product-sub{font-size:13.5px}
.product-desc{font-size:14.5px;color:#3a463f;margin:2px 0 0}
.product-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:14px;color:#2a352f}
.field input,.field select,.field textarea{
font-family:var(--font-body);font-size:15.5px;color:var(--ink);background:var(--surface);
border:1px solid var(--line);border-radius:11px;padding:11px 13px;width:100%;transition:border-color .12s,box-shadow .12s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);
box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.field input[type=color]{padding:4px;height:44px;width:72px}
.field input[type=file]{padding:9px;background:var(--line-2);border-style:dashed}
textarea{resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr;gap:14px}
.switch{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:var(--primary)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);margin-top:6px}
/* Апдейт 217: без z-index панель сохранения оказывалась ПОД панелью
редактора (у той z-index:20) и кнопка «Сохранить» уходила за неё. */
.form-sticky{position:sticky;bottom:0;z-index:30;display:flex;gap:10px;padding:14px 0;
background:linear-gradient(180deg,transparent,var(--paper) 30%)}
/* ---------- notices ---------- */
.notice{padding:13px 15px;border-radius:12px;background:#eef4ee;border:1px solid #d7e6da;font-size:14.5px;margin-bottom:16px}
.notice.success{background:#e9f7ee;border-color:#bfe6cb;color:#1e6b3d}
.notice.error{background:#fcecea;border-color:#f2ccc7;color:#a5342a}
/* ---------- public footer + tabbar ---------- */
.site-footer{max-width:var(--maxw);margin:0 auto;padding:34px 18px 20px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:20px}
.foot-brand{font-family:var(--font-display);font-weight:800;font-size:18px;margin-bottom:6px}
.foot-contacts{display:flex;flex-direction:column;gap:6px}
.foot-contacts a{font-weight:600}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;justify-content:space-around;
background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);
border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;
color:var(--ink-2);padding:6px 10px;border-radius:10px;flex:1}
.tabbar a .ico{font-size:17px}
.tabbar a.active{color:var(--primary)}
/* ---------- share FAB + modal ---------- */
.fab{position:fixed;right:18px;bottom:78px;z-index:46;width:52px;height:52px;border-radius:50%;border:none;
background:var(--primary);color:#fff;box-shadow:var(--shadow-lg);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fab:hover{background:color-mix(in srgb,var(--primary) 86%,#000)}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,25,18,.5)}
.modal-card{position:relative;background:var(--surface);width:100%;max-width:420px;border-radius:22px 22px 0 0;
padding:24px 22px calc(28px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);animation:sheet .22s ease}
@keyframes sheet{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.modal-x{position:absolute;right:14px;top:12px;border:none;background:transparent;font-size:26px;line-height:1;color:var(--ink-2);cursor:pointer}
.modal-title{text-align:center;font-size:18px;margin-bottom:14px}
.qr-wrap{width:200px;height:200px;margin:0 auto 18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.qr-wrap img{width:100%;height:100%}
.modal-actions{display:flex;flex-direction:column;gap:10px}
.modal-link{margin-top:12px;text-align:center;font-size:12.5px;color:var(--ink-2);word-break:break-all}
/* ============================================================
ADMIN
============================================================ */
body.admin{background:#eef1ea}
.admin-shell{min-height:100vh;display:flex;flex-direction:column}
.admin-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px 16px;
background:var(--ink);color:#eef3ee}
.admin-bar .btn-ghost{background:rgba(255,255,255,.1);color:#eef3ee}
.admin-bar .btn-ghost:hover{background:rgba(255,255,255,.18)}
.admin-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;flex:1;min-width:0}
.admin-brand small{display:block;font-size:11px;font-weight:500;color:#9db0a4;font-family:var(--font-body)}
.admin-bar-right{display:flex;gap:8px}
.admin-burger{display:none;background:transparent;border:none;color:#eef3ee;font-size:22px;cursor:pointer}
.admin-body{flex:1;display:grid;grid-template-columns:230px 1fr;max-width:1240px;width:100%;margin:0 auto}
.admin-side{border-right:1px solid var(--line);background:var(--surface)}
.admin-side nav{position:sticky;top:56px;display:flex;flex-direction:column;gap:2px;padding:16px 12px}
.admin-side a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;font-weight:600;color:var(--ink-2)}
.admin-side a .ni{width:20px;text-align:center;color:var(--primary)}
.admin-side a.active,.admin-side a:hover{background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--ink)}
.admin-side a.active{background:color-mix(in srgb,var(--primary) 12%,#fff)}
.admin-main{padding:22px 26px 60px;min-width:0}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.admin-head h1{font-size:26px;font-weight:800}
.admin-subhead{margin-bottom:16px}
.head-tabs{display:flex;gap:6px}
.tab{padding:8px 14px;border-radius:10px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line)}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card-title{font-size:17px;font-weight:700;margin-bottom:14px}
.card.empty{text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.card.tip .tip-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:#3a463f}
.card.tip a{color:var(--primary);font-weight:600}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.stat-card:hover{transform:translateY(-2px);transition:transform .12s}
.stat-num{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--primary);line-height:1}
.stat-label{color:var(--ink-2);font-size:13.5px;margin-top:6px}
.stat-card.highlight{background:color-mix(in srgb,var(--primary) 10%,#fff);border-color:color-mix(in srgb,var(--primary) 25%,var(--line))}
.metric-row{display:flex;flex-wrap:wrap;gap:22px}
.metric{display:flex;flex-direction:column}
.metric-v{font-family:var(--font-display);font-size:24px;font-weight:800}
.metric-l{font-size:12.5px}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{text-align:left;font-weight:600;color:var(--ink-2);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
padding:0 10px 10px;border-bottom:1px solid var(--line)}
.table td{padding:12px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.col-c{text-align:center}
.td-clip{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.row-photo{width:44px;height:44px;border-radius:50%;object-fit:cover}
.row-photo.sq{border-radius:10px}
.ph-box{width:44px;height:44px;border-radius:10px;background:var(--line-2);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)}
.row-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.row-unread{background:color-mix(in srgb,var(--accent) 9%,#fff)}
/* Апдейт 197: всё, кроме margin-right, перекрывалось .tag ниже */
.tag{margin-right:4px}
.group-edit-list{display:flex;flex-direction:column;gap:14px}
.group-row{margin-bottom:0}
.group-row-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.group-row-foot .btn{margin-left:auto}
.group-del{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.thumb{position:relative;display:inline-block;margin-bottom:8px}
.thumb img{height:80px;width:auto;border-radius:12px;border:1px solid var(--line);background:#fff;padding:4px}
.thumb.round img{border-radius:50%;height:88px;width:88px;object-fit:cover;padding:0}
.thumb.wide img{height:80px}
.file-chip{display:inline-flex;align-items:center;gap:10px;background:var(--line-2);padding:8px 12px;border-radius:10px;margin-bottom:8px;font-size:14px}
/* Апдейт 197: padding/background/font-size/font-weight перекрывались .badge ниже */
.badge{display:inline-block;color:#3a2c07;margin-left:6px}
.sub-list{display:flex;flex-direction:column;gap:12px}
.sub-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.sub-card.unread{border-left:4px solid var(--accent)}
.sub-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.sub-contacts{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.sub-contacts a{font-weight:600;color:var(--primary)}
.sub-msg{margin:10px 0 0;color:#33403a;white-space:pre-wrap}
.sub-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
/* login */
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-wrap{width:100%;max-width:400px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow-lg)}
.login-brand{text-align:center;margin-bottom:22px}
.login-brand .brand-mark{width:52px;height:52px;font-size:20px;border-radius:15px;margin:0 auto 12px}
.login-brand h1{font-size:22px}
.login-back{display:block;text-align:center;margin-top:16px}
.login-card .form,.login-card form{display:flex;flex-direction:column;gap:14px}
/* ---------- responsive ---------- */
@media(min-width:560px){
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.team-grid{grid-template-columns:1fr 1fr}
.product-grid{grid-template-columns:1fr 1fr}
.foot-grid{grid-template-columns:2fr 1fr}
.stat-grid{grid-template-columns:repeat(4,1fr)}
.modal{align-items:center}
.modal-card{border-radius:22px;margin:0 16px}
}
@media(min-width:860px){
.product-grid{grid-template-columns:1fr 1fr 1fr}
.team-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:760px){
.site-nav a:not(.cta-mini):not(.acc-link):not(.wish-link):not(.cart-link){display:none}
.site-nav{gap:2px}
.acc-link,.wish-link,.cart-link{font-size:13px;padding:6px 8px}
.tabbar{display:flex}
body.public .page{padding-bottom:120px}
.fab{bottom:88px}
.admin-body{grid-template-columns:1fr}
.admin-side{position:fixed;inset:56px auto 0 0;width:250px;z-index:55;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lg)}
.admin-side.open{transform:none}
.admin-burger{display:block}
.admin-main{padding:18px 16px 50px}
.table thead{display:none}
.table,.table tbody,.table tr,.table td{display:block;width:100%}
.table tr{border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:10px}
.table td{border:none;padding:6px 8px}
.row-actions{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:2px solid var(--primary);outline-offset:2px}
/* ---------- QR-модуль (админка) ---------- */
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.qr-card{display:flex;flex-direction:column;gap:12px}
.qr-card-head{display:flex;flex-direction:column;gap:6px}
.qr-kind{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.qr-kind-employee{background:color-mix(in srgb,var(--accent) 20%,transparent);color:#7a5a12}
.qr-kind-contact{background:#eef;color:#3b3b7a}
.qr-card-title strong{font-size:15px}
.qr-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;justify-content:center}
.qr-box img{width:100%;max-width:180px;height:auto;display:block}
.qr-link-row{display:flex;gap:6px;align-items:center}
.qr-link-input{flex:1;min-width:0;font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface);color:var(--muted)}
.qr-dl-row{display:flex;flex-wrap:wrap;gap:6px}
/* ---------- Радио-настройки статуса ---------- */
.radio{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer}
.radio input{width:16px;height:16px}
.left-settings{margin-top:10px;padding-top:12px;border-top:1px solid var(--line-2)}
.left-select{margin-top:6px;width:100%;font-family:var(--font-body);font-size:14px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface)}
/* Апдейт 197: живым оставался только margin-top */
.tag{margin-top:4px}
.tag-left{background:#fbe9e7;color:#b23c17}
/* ---------- Карточка «сотрудник больше не работает» ---------- */
.left-card{text-align:left}
.left-badge{background:#fbe9e7;color:#b23c17;font-weight:700;border-radius:10px;padding:10px 14px;margin-bottom:16px;text-align:center}
.left-note{margin:14px 0}
.muted-avatar{filter:grayscale(1);opacity:.7}
.center{text-align:center}
/* ---------- QR-студия: панель управления ---------- */
.qr-controls{margin-bottom:16px}
.qr-controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.qr-controls .field{display:flex;flex-direction:column;gap:6px;margin:0}
.qr-controls .field>span{font-size:12px;font-weight:600;color:var(--muted)}
.qr-controls select{font-family:var(--font-body);font-size:14px;border:1px solid var(--line);border-radius:8px;padding:8px 9px;background:var(--surface)}
.qr-controls input[type=color]{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:3px;cursor:pointer}
.field-check{flex-direction:row!important;align-items:center;gap:8px;flex-wrap:wrap}
.field-check>span{order:2}
.field-check input{width:18px;height:18px}
.qr-controls-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.qr-target{width:100%;display:flex;justify-content:center}
.qr-target svg{width:100%;max-width:220px;height:auto;display:block}
/* QR-студия: сгруппированные контролы */
.qr-controls .inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qr-controls .inline input[type=color]{flex:0 0 auto;width:46px;height:34px}
.mini-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer}
.mini-check input{width:15px;height:15px}
.qr-controls input:disabled,.qr-controls select:disabled{opacity:.45;cursor:not-allowed}
/* ---------- Мессенджер МАКС: акценты ---------- */
:root{ --max:#1467FF; }
.cr-ico-max{background:var(--max);color:#fff;font-weight:800;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:var(--font-display,inherit)}
.chip .cr-ico-max{width:18px;height:18px;font-size:12px;margin-right:2px}
/* основной контакт-ряд (МАКС) */
.contact-row.contact-primary{border:1.5px solid color-mix(in srgb,var(--max) 55%,transparent);background:color-mix(in srgb,var(--max) 8%,transparent)}
.contact-row.contact-primary .cr-label{color:var(--max);font-weight:600}
.contact-row.contact-primary .cr-val{font-weight:700}
/* второстепенный (Telegram) */
.contact-row.contact-secondary{opacity:.72}
.contact-row.contact-secondary .cr-val{font-weight:500}
/* чипы на главной */
.chip.chip-primary{background:var(--max);border-color:var(--max);color:#fff}
.chip.chip-primary .cr-ico-max{background:#fff;color:var(--max)}
.chip.chip-secondary{opacity:.72}
/* поля формы: акцент «основной» */
.field.field-accent{border-left:3px solid var(--max);padding-left:12px}
.field-hint{display:block;margin-top:4px;line-height:1.35}
/* Значок МАКС в списке команды */
.icon-btn-max{background:var(--max);border-color:var(--max);color:#fff}
.icon-btn-max .cr-ico-max{background:transparent;color:#fff;width:auto;height:auto;font-size:13px;border-radius:0}
.icon-btn-muted{opacity:.5}
/* Страница уволенного: список действий */
.left-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.left-card .left-note{margin:14px 0 4px;color:var(--ink)}
/* Кнопки с длинным текстом (например, «Обратиться к …») переносятся по ширине экрана */
.left-actions .btn{white-space:normal;line-height:1.3;height:auto;min-height:48px;text-align:center;word-break:break-word;padding-top:12px;padding-bottom:12px}
/* Панель поиска/фильтра в админке */
.list-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.list-search{flex:1;min-width:180px;display:flex;gap:8px}
.list-search input{flex:1;min-width:0;font-family:var(--font-body);font-size:14px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--surface)}
.filter-tabs{display:flex;gap:6px;flex-wrap:wrap}
.filter-tab{font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);text-decoration:none;white-space:nowrap}
.filter-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.filter-tab .cnt{opacity:.7;font-weight:500}
.table tr.row-left td{opacity:.6}
.table tr.row-left td .tag-left{opacity:1}
/* ============ Публичные блоки конструктора ============ */
.hero-block{text-align:center}
.hero-block.hero-left{text-align:left}
.hero-logo{max-height:72px;margin-bottom:12px}
.hero-title{font-family:var(--font-display,inherit);font-size:30px;line-height:1.15;margin:0 0 8px}
.hero-sub{font-size:16px;margin:0 auto 16px;max-width:640px}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero-left .hero-actions{justify-content:flex-start}
.text-block.text-center{text-align:center}
.prose{line-height:1.6;color:var(--ink-2,#33403a)}
.img-block{text-align:center}
.block-img{width:100%;display:block;border-radius:0}
.block-img.rounded{border-radius:16px}
.img-narrow .block-img{max-width:420px;margin:0 auto}
.img-wide .block-img{max-width:760px;margin:0 auto}
.team-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.team-strip .person-card{flex:0 0 auto;width:150px}
.person-card{display:block;text-align:center;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.person-card .person-photo,.person-card .avatar-fallback{margin:0 auto 8px}
/* Апдейт 197: объявление .prod-grid{display:grid;...} было полностью перекрыто
вторым .prod-grid{display:flex;flex-wrap:wrap;gap:14px} — удалено. */
.prod-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.prod-img{width:100%;height:150px;object-fit:cover}
.prod-body{padding:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cta-block{text-align:center;background:color-mix(in srgb,var(--primary) 6%,transparent);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);border-radius:16px;padding:24px}
.btns-block{display:flex;gap:10px;flex-wrap:wrap}
.btns-block.btns-center{justify-content:center}
.divider{border:0;height:1px;background:var(--line-2)}
.divider-small{margin:10px 0}
.divider-medium{margin:22px 0}
.divider-large{margin:44px 0}
.html-block{}
/* ============ Редактор конструктора ============ */
.editor-grid{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.block-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;transition:background .3s}
.block-list.saved-flash{background:color-mix(in srgb,var(--primary) 6%,transparent);border-radius:10px}
.block-item{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.block-item.is-hidden{opacity:.55}
.block-item.block-ghost{opacity:.35}
.block-drag{cursor:grab;color:var(--muted);font-size:18px;user-select:none;touch-action:none}
.block-ico{font-size:16px;width:22px;text-align:center}
.block-label{flex:1;font-weight:600}
.block-ops{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.block-ops form{display:inline;margin:0}
.add-block-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px}
.add-block-grid form{margin:0}
.add-block-btn{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border:1px dashed var(--line);border-radius:10px;background:var(--surface);cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--ink)}
.add-block-btn:hover{border-color:var(--primary);color:var(--primary)}
.ab-ico{font-size:18px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.empty-hint{padding:16px 0}
.repeater{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.rep-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rep-row input,.rep-row select{flex:1;min-width:110px;padding:8px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-body);font-size:14px;background:var(--surface)}
.img-preview img{max-width:220px;border-radius:8px;border:1px solid var(--line);margin-bottom:8px;display:block}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--muted)}
@media (max-width:860px){ .editor-grid{grid-template-columns:1fr} }
/* ===== Оформление блока (фон/отступы) ===== */
.blk-pad-none>.blk-inner{padding-top:0;padding-bottom:0}
.blk-pad-s>.blk-inner{padding-top:12px;padding-bottom:12px}
.blk-pad-m>.blk-inner{padding-top:24px;padding-bottom:24px}
.blk-pad-l>.blk-inner{padding-top:44px;padding-bottom:44px}
.blk-bg-paper,.blk-bg-tint,.blk-bg-primary,.blk-bg-dark{border-radius:18px}
.blk-bg-paper>.blk-inner,.blk-bg-tint>.blk-inner,.blk-bg-primary>.blk-inner,.blk-bg-dark>.blk-inner{padding-left:18px;padding-right:18px}
.blk-bg-paper{background:#fff;border:1px solid var(--line)}
.blk-bg-tint{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.blk-bg-primary{background:var(--primary);color:#fff}
.blk-bg-dark{background:#16211c;color:#fff}
.blk-bg-primary .muted,.blk-bg-dark .muted,.blk-bg-primary .hero-sub,.blk-bg-dark .hero-sub{color:rgba(255,255,255,.8)}
.blk-bg-primary .page-title,.blk-bg-dark .page-title,.blk-bg-primary .hero-title,.blk-bg-dark .hero-title,.blk-bg-primary .eyebrow,.blk-bg-dark .eyebrow{color:#fff}
.blk-bg-primary .btn-primary,.blk-bg-dark .btn-primary{background:#fff;color:var(--primary)}
.blk-bg-primary .chip,.blk-bg-dark .chip{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
/* ===== Галерея ===== */
.gallery{display:grid;gap:10px}
.gallery-2{grid-template-columns:repeat(2,1fr)}
.gallery-3{grid-template-columns:repeat(3,1fr)}
.gallery-4{grid-template-columns:repeat(4,1fr)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
@media(max-width:560px){.gallery-3,.gallery-4{grid-template-columns:repeat(2,1fr)}}
/* ===== Преимущества / Цифры ===== */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.blk-bg-primary .feature,.blk-bg-dark .feature{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.feature-ico{font-size:26px;margin-bottom:8px}
.feature-title{font-weight:700;margin-bottom:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;text-align:center}
.stat-value{font-family:var(--font-display,inherit);font-size:30px;font-weight:800;color:var(--primary);line-height:1.1}
.blk-bg-primary .stat-value,.blk-bg-dark .stat-value{color:#fff}
.prod-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
/* ===== Редактор: галерея, оформление ===== */
.gallery-edit{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.ge-item{width:100px;text-align:center}
.ge-item img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block;margin-bottom:4px}
.blk-style-box{margin-top:10px;padding-top:14px;border-top:1px solid var(--line-2)}
.blk-style-title{font-weight:700;margin-bottom:8px}
/* ============ Сплит-редактор страниц ============ */
.pe-wrap{display:flex;gap:14px;height:calc(100vh - 140px);min-height:520px}
.pe-left{width:400px;flex:0 0 400px;overflow-y:auto;padding-right:4px}
.pe-right{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;min-width:0}
.pe-frame-wrap{flex:1;position:relative}
#previewFrame{width:100%;height:100%;border:0;display:block;background:#fff}
.pe-preview-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.pe-prev-ops{display:flex;gap:6px}
.pe-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.pe-title{font-family:var(--font-display,inherit);font-size:20px;font-weight:800;line-height:1.1}
.pe-tabs{display:flex;gap:6px;margin-bottom:12px}
.pe-tab{flex:1;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-family:var(--font-body);font-weight:600;font-size:13px;cursor:pointer;color:var(--muted)}
.pe-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.pe-sub{font-weight:700;margin:16px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.pe-pane .add-block-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
.pe-left.editing .pe-tabs,.pe-left.editing .pe-pane{display:none}
.bf-title{font-weight:800;font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.bf-actions{display:flex;gap:8px;margin-top:14px}
.block-label{background:none;border:0;text-align:left;font-family:var(--font-body);font-weight:600;cursor:pointer;color:var(--ink);flex:1;padding:0;font-size:14px}
.block-label:hover{color:var(--primary)}
.pe-preset{margin-bottom:6px}
.top-announce{background:var(--primary);color:#fff;text-align:center;font-size:13px;padding:7px 12px}
@media(max-width:760px){
.pe-wrap{flex-direction:column;height:auto}
.pe-left{width:auto;flex:none}
.pe-right{height:70vh}
}
/* Широкий редактор + устройства предпросмотра */
.admin-body.wide{max-width:none}
.pe-devices{display:flex;gap:4px}
.pe-dev{padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;color:var(--muted)}
.pe-dev.active{background:var(--primary);border-color:var(--primary);color:#fff}
.pe-frame-wrap.mobile{display:flex;justify-content:center;align-items:flex-start;background:#e9ede4;padding:18px;overflow:auto}
.pe-frame-wrap.mobile #previewFrame{width:390px;max-width:100%;height:calc(100% - 4px);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 34px rgba(0,0,0,.14);background:#fff}
/* ===== Оформление блока: выравнивание/размер/шрифт ===== */
.blk-align-left{text-align:left}
.blk-align-center{text-align:center}
.blk-align-right{text-align:right}
.blk-align-center .chips,.blk-align-center .hero-actions,.blk-align-center .btns-block,.blk-align-center .prod-btns,.blk-align-center .team-strip,.blk-align-center .team-grid,.blk-align-center .prod-grid,.blk-align-center .features,.blk-align-center .stats,.blk-align-center .gallery{justify-content:center}
.blk-align-right .chips,.blk-align-right .hero-actions,.blk-align-right .btns-block,.blk-align-right .prod-btns{justify-content:flex-end}
.blk-align-left .chips,.blk-align-left .hero-actions,.blk-align-left .btns-block{justify-content:flex-start}
.blk-size-s{font-size:.92em}
.blk-size-m{font-size:1em}
.blk-size-l{font-size:1.12em}
.blk-font-display{font-family:var(--font-display,inherit)}
.blk-font-serif{font-family:Georgia,'Times New Roman',serif}
/* если задан свой цвет текста — подчиняем и заголовки/подписи */
.blk[style*="color"] .page-title,.blk[style*="color"] .hero-title,.blk[style*="color"] .eyebrow,.blk[style*="color"] .muted{color:inherit}
/* Товар: показывать изображение полностью (вписать) */
.prod-img.fit-contain{object-fit:contain;background:#f3f5ef;padding:6px;height:180px}
/* ===== Продукты: выравнивание карточек и текста ===== */
.prod-grid{display:flex;flex-wrap:wrap;gap:14px}
.prod-grid>.prod-card{flex:1 1 240px;max-width:100%}
.prod-grid.cards-left{justify-content:flex-start}
.prod-grid.cards-center{justify-content:center}
.prod-grid.cards-right{justify-content:flex-end}
.prod-grid.cards-left>.prod-card,
.prod-grid.cards-center>.prod-card,
.prod-grid.cards-right>.prod-card{flex:0 1 260px}
.prod-card.text-center .prod-body{align-items:center;text-align:center}
/* Отступы между группами при группировке */
.page-group{margin-bottom:30px}
.page-group:last-child{margin-bottom:0}
.page-group>.eyebrow{margin-top:2px}
/* Фото в карточке сотрудника: размер / показ / форма */
.profile-photo.fit-contain{object-fit:contain;background:#f3f5ef}
.shape-circle .profile-photo{border-radius:50%}
.photo-l .profile-photo{width:140px;height:140px}
.photo-xl .profile-photo{width:200px;height:200px}
.photo-full .profile-top{flex-direction:column;align-items:stretch;text-align:left}
.photo-full .profile-photo{width:100%;height:auto;max-height:480px;border-radius:18px}
.photo-full.shape-circle .profile-photo{border-radius:18px}
/* Заглушка-инициалы растёт вместе с выбранным размером фото */
.photo-l .avatar-fallback.xl{width:140px;height:140px;font-size:48px}
.photo-xl .avatar-fallback.xl{width:200px;height:200px;font-size:64px}
.photo-full .avatar-fallback.xl{width:100%;height:auto;aspect-ratio:16/10;border-radius:18px;font-size:64px}
.shape-circle .avatar-fallback.xl{border-radius:50%}
/* Крупные фото на телефоне: по центру и заметно больше */
@media(max-width:560px){
.photo-l .profile-top,.photo-xl .profile-top{flex-direction:column;align-items:center;text-align:center}
.photo-l .profile-head,.photo-xl .profile-head{align-items:center}
.photo-l .profile-photo,.photo-l .avatar-fallback.xl{width:200px;height:200px}
.photo-xl .profile-photo,.photo-xl .avatar-fallback.xl{width:264px;height:264px}
}
/* ============================================================
Мобильная защита вёрстки (переполнения, отступы, перенос)
============================================================ */
/* Ничто не должно вылезать за ширину экрана */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img,svg,video,iframe,canvas,table{max-width:100%}
.field input,.field select,.field textarea,input,select,textarea{max-width:100%}
/* Длинные слова, e-mail и ссылки переносятся, а не вылезают */
h1,h2,h3,h4,p,li,strong,.hero-title,.page-title,.prose,.person-name,.profile-name,
.feature-title,.foot-brand,.chip,.prod-body,.cr-val,.stat-label,.eyebrow{overflow-wrap:break-word;word-break:break-word}
/* cr-val в контактах: перенос вместо обрезки на узких экранах */
@media(max-width:560px){
.cr-val{white-space:normal}
.page{padding-left:14px;padding-right:14px}
.hero-title{font-size:clamp(24px,7.5vw,32px)}
.page-title{font-size:clamp(21px,6vw,30px)}
.blk-bg-paper>.blk-inner,.blk-bg-tint>.blk-inner,.blk-bg-primary>.blk-inner,.blk-bg-dark>.blk-inner{padding-left:14px;padding-right:14px}
.blk-bg-paper,.blk-bg-tint,.blk-bg-primary,.blk-bg-dark{border-radius:14px}
.profile-card{padding:18px;border-radius:18px}
.cta-block{padding:18px}
.features{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr)}
.contact-row{grid-template-columns:30px 1fr;gap:10px}
.contact-row .cr-label{grid-column:2;font-size:11px}
.section{padding:20px 0}
}
/* Очень узкие телефоны */
@media(max-width:360px){
.page{padding-left:12px;padding-right:12px}
.site-header{padding:10px 12px}
.btn{padding:10px 14px;font-size:14px}
}
/* Карточка сотрудника на телефоне: фото по центру и крупнее */
@media(max-width:560px){
.profile-top{flex-direction:column;align-items:center;text-align:center}
.profile-head{align-items:center}
.photo-m .profile-photo,.photo-m .avatar-fallback.xl{width:132px;height:132px}
}
/* ============ Формы / опросные листы ============ */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form-page{max-width:640px;margin:0 auto}
.form-desc{margin:-2px 0 16px}
.public-form .field.has-err input,.public-form .field.has-err textarea,.public-form .field.has-err select{border-color:var(--danger)}
.field-err{color:var(--danger);font-size:13px;margin-top:4px;font-weight:600}
.opt-list{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.opt-list.opt-inline{flex-direction:row;flex-wrap:wrap;gap:12px}
.opt{display:inline-flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}
.opt input{width:18px;height:18px;accent-color:var(--primary);flex:none}
.rating-row .rate{border:1px solid var(--line);border-radius:10px;padding:7px 13px;background:var(--surface)}
.rating-row .rate input{width:auto}
.form-heading{margin:12px 0 2px;border-top:1px solid var(--line-2);padding-top:14px}
.form-heading h3{font-size:18px;margin:0}
.formula-field .formula-out{font-family:var(--font-display,inherit);font-size:22px;font-weight:800;color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,transparent);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);border-radius:12px;padding:12px 14px}
.req-star{color:var(--danger)}
.block-label code{font-size:11px;background:var(--line-2);padding:1px 5px;border-radius:5px;font-family:monospace}
#fieldPanel{margin-top:12px}
/* Уведомления: статусы */
.status-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.badge.ok{background:#e9f7ee;border-color:#bfe6cb;color:#1e6b3d}
.badge.off{background:#f4f5f2;color:var(--ink-2)}
.env-sample{background:#0f1a14;color:#d7e6da;padding:14px;border-radius:12px;font-size:12.5px;overflow-x:auto;white-space:pre;font-family:monospace;margin:0 0 8px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* ===== Оформление v1.29: отступы, ширина блока, обложка-фон ===== */
.blk + .blk{ margin-top: var(--block-space, 28px); }
.blk-w-narrow > .blk-inner{ max-width:640px; margin-left:auto; margin-right:auto; }
.blk-w-normal > .blk-inner{ max-width:880px; margin-left:auto; margin-right:auto; }
.blk-w-wide > .blk-inner{ max-width:1100px; margin-left:auto; margin-right:auto; }
.blk-w-full > .blk-inner{ max-width:none; }
.hero-block.hero-has-cover{
background-size:cover; background-position:center; border-radius:20px;
padding:56px 28px; color:#fff;
}
.hero-block.hero-has-cover .hero-title,
.hero-block.hero-has-cover .hero-sub{ color:#fff; }
.hero-block.hero-has-cover .hero-sub{ opacity:.92; }
/* Пикер эмодзи (конструктор) */
.emoji-palette{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px;padding:8px;background:var(--line-2,#eef1ee);border-radius:10px}
.emoji-palette .muted{margin-right:4px}
.emoji-btn{border:1px solid transparent;background:#fff;border-radius:8px;padding:3px 6px;font-size:18px;cursor:pointer;line-height:1}
.emoji-btn:hover{border-color:var(--primary)}
.emoji-input{max-width:70px}
/* Живой предпросмотр типографики */
.type-preview{background:#f6f8f6;border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.type-preview .tp-title{font-weight:800;font-size:22px;margin-bottom:6px;line-height:1.2}
.type-preview .tp-body{color:var(--ink-2);font-size:16px;line-height:1.6}
/* Блок с фон-картинкой: читаемый текст */
.blk.blk-has-bgimg{color:#fff}
.blk.blk-has-bgimg .page-title,.blk.blk-has-bgimg h1,.blk.blk-has-bgimg h2,.blk.blk-has-bgimg h3,.blk.blk-has-bgimg .eyebrow{color:#fff}
.blk.blk-has-bgimg .prose{color:rgba(255,255,255,.92)}
/* ===== v1.33: выравнивание + новые блоки ===== */
.blk-align-justify{text-align:justify}
/* Цитата */
.quote-block{margin:0;position:relative;padding:8px 0}
.quote-mark{font-size:44px;line-height:1;color:var(--primary);opacity:.5}
.quote-text{font-size:1.25em;font-weight:500;margin:6px 0 10px}
.quote-author{font-weight:700}
.quote-role{font-weight:400;color:var(--ink-2)}
/* Видео */
.video-frame{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cap{margin-top:8px;text-align:center}
/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 16px}
.faq-item summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after{content:'+';font-size:20px;color:var(--primary)}
.faq-item[open] summary::after{content:'–'}
.faq-a{padding:0 0 14px;color:var(--ink-2)}
/* Этапы */
.steps-list{display:flex;flex-direction:column;gap:16px}
.step-item{display:flex;gap:14px;align-items:flex-start}
.step-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.step-title{font-weight:700;margin-bottom:2px}
/* Картинка + текст */
.split-block{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.split-block.split-right{direction:rtl}
.split-block.split-right>*{direction:ltr}
.split-img img{width:100%;border-radius:16px;object-fit:cover}
.split-btn{margin-top:14px}
@media(max-width:680px){.split-block{grid-template-columns:1fr}}
/* Соцсети */
.social-row{display:flex;gap:12px;flex-wrap:wrap}
.social-ico{width:48px;height:48px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--primary);text-decoration:none;transition:.15s}
.social-ico:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
/* ===== v1.34: тарифы, отзывы, логотипы, карта, баннер, таймер, до/после, таблица, документы, обр.звонок ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.price-card{border:1px solid var(--line);border-radius:16px;padding:22px 18px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.price-card.price-hot{border-color:var(--primary);box-shadow:0 6px 24px color-mix(in srgb,var(--primary) 18%,transparent)}
.price-name{font-weight:700;font-size:18px}
.price-val{font-size:30px;font-weight:800;color:var(--primary)}
.price-per{font-size:14px;font-weight:500;color:var(--ink-2)}
.price-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.price-feats li{padding-left:20px;position:relative}
.price-feats li::before{content:'✓';position:absolute;left:0;color:var(--primary);font-weight:700}
.price-card .btn{margin-top:auto}
/* Апдейт 197: .reviews-grid и .review-card целиком дублировались ниже (v1.50) — удалены.
У .review-stars живым оставался только font-size. */
.review-stars{font-size:16px}
.review-stars .st-off{opacity:.25}
.review-text{margin-bottom:10px}
.review-who{font-size:14px}
.logos-row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}
.logo-item img{max-height:56px;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.2s}
.logo-item img:hover{filter:none;opacity:1}
.map-block{width:100%;border-radius:16px;overflow:hidden}
.banner-block{background:var(--primary);color:#fff;border-radius:18px;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.banner-title{font-size:24px;font-weight:800}
.banner-sub{opacity:.9;margin-top:4px}
.banner-btn{background:#fff;color:var(--primary)}
.countdown-block{text-align:center}
.cd-title{font-size:20px;font-weight:700;margin-bottom:12px}
.cd-timer{display:flex;gap:12px;justify-content:center}
.cd-cell{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:72px}
.cd-cell span{display:block;font-size:32px;font-weight:800;color:var(--primary);line-height:1}
.cd-cell small{color:var(--ink-2);font-size:12px}
.cd-done{font-size:20px;font-weight:700;color:var(--primary)}
.ba-block{position:relative;width:100%;border-radius:16px;overflow:hidden;cursor:ew-resize;user-select:none}
.ba-block img{display:block;width:100%;pointer-events:none}
.ba-after{position:relative}
.ba-before{position:absolute;inset:0;width:50%;overflow:hidden;border-right:3px solid #fff}
.ba-before img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.ba-handle::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:var(--primary);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.table-wrap{overflow-x:auto}
.content-table{width:100%;border-collapse:collapse}
.content-table th,.content-table td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.content-table th{background:color-mix(in srgb,var(--primary) 8%,transparent);font-weight:700}
.docs-list{display:flex;flex-direction:column;gap:8px}
.doc-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink);font-weight:500}
.doc-link:hover{border-color:var(--primary)}
.doc-ic{font-size:20px}
.doc-item{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.callback-form{display:flex;gap:10px;flex-wrap:wrap;max-width:460px}
.callback-form input[type=tel]{flex:1;min-width:180px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
@media(max-width:560px){.banner-block{flex-direction:column;text-align:center}.cd-cell{min-width:60px;padding:10px}.cd-cell span{font-size:24px}}
/* Предпросмотр выбранных файлов в конструкторе */
.file-picked{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fp-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.fp-doc{padding:8px 12px;background:var(--line-2,#eef1ee);border-radius:10px;font-size:13px}
.fp-hint{flex-basis:100%;color:var(--primary);font-size:13px;font-weight:600;margin-top:2px}
/* Статистика */
.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.stat-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat-num{font-size:32px;font-weight:800;color:var(--primary)}
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:200px;padding-top:20px;overflow-x:auto}
.bar-col{flex:1;min-width:16px;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.bar{width:70%;background:var(--primary);border-radius:4px 4px 0 0;position:relative;min-height:2px;transition:.2s;display:flex;justify-content:center}
.bar:hover{background:var(--accent)}
.bar-val{position:absolute;top:-18px;font-size:11px;font-weight:700;color:var(--ink-2)}
.bar-lbl{font-size:9px;color:var(--ink-2);margin-top:4px;transform:rotate(-45deg);white-space:nowrap}
/* Перетаскивание файлов */
.field.drag-over{outline:2px dashed var(--primary);outline-offset:3px;border-radius:8px}
/* ===== v1.37: cookie-баннер, согласие, политика ===== */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:200;background:var(--surface);border:1px solid var(--line);
box-shadow:0 8px 30px rgba(0,0,0,.16);border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:820px;margin:0 auto}
.cookie-text{font-size:14px;color:var(--ink-2);flex:1;min-width:220px}
.cookie-text a{color:var(--primary)}
.consent-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin:10px 0;cursor:pointer}
.consent-check input{width:auto;margin-top:2px;flex:none}
.consent-check a{color:var(--primary)}
.consent-inline{max-width:460px}
.foot-privacy{color:var(--ink-2);font-size:12.5px;margin-left:14px;text-decoration:underline}
hr.soft{border:0;border-top:1px solid var(--line);margin:16px 0}
/* ===== v1.38: цена и метки продуктов ===== */
.product-badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;z-index:2}
.product-badge-inline{position:static;display:inline-block;margin-bottom:6px}
.product-badge-top{margin-bottom:8px}
.prod-imgwrap{position:relative}
.product-price-row{display:flex;align-items:baseline;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.product-price{font-size:20px;font-weight:800;color:var(--primary)}
.product-unit{font-size:13px;font-weight:500;color:var(--ink-2)}
.product-oldprice{font-size:15px;color:var(--ink-2);order:-1}
.product-oldprice s,.product-oldprice{text-decoration:line-through}
.product-stock{font-size:13px;margin:4px 0}
.product-stock.in{color:#1e8a4c}
.product-stock.out{color:var(--ink-2)}
.product-sku{margin-bottom:4px}
/* Кнопка наверх */
.to-top{position:fixed;right:16px;bottom:78px;z-index:150;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
background:var(--surface);color:var(--primary);font-size:20px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.14);transition:.2s}
.to-top:hover{background:var(--primary);color:#fff}
/* ===== v1.38: хронология, часы, чек-лист, промо, подписка ===== */
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:22px}
.tl-dot{position:absolute;left:-28px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--primary);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--primary)}
.tl-year{font-weight:800;color:var(--primary)}
.tl-title{font-weight:700;margin:2px 0}
.schedule-table{width:100%;border-collapse:collapse;max-width:420px}
.schedule-table td{padding:10px 12px;border-bottom:1px solid var(--line)}
.sch-day{font-weight:600}
.sch-hours{text-align:right}
.sch-hours.off{color:var(--ink-2)}
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.ck-ic{flex:none;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.promo-block{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 60%,#000));color:#fff;border-radius:18px;padding:26px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.promo-title{font-size:22px;font-weight:800}
.promo-text{opacity:.92;margin-top:4px}
.promo-code{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.6);border-radius:10px;padding:8px 12px}
.promo-code-val{font-size:20px;font-weight:800;letter-spacing:1px}
.promo-copy{background:#fff;color:var(--primary);border:0;border-radius:8px;padding:6px 12px;font-weight:700;cursor:pointer}
.promo-btn{background:#fff;color:var(--primary)}
.subscribe-form{display:flex;gap:10px;flex-wrap:wrap;max-width:460px}
.subscribe-form input[type=email]{flex:1;min-width:200px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
/* Фикс: скрытие баннеров (display:flex перебивал [hidden]) */
.cookie-banner[hidden]{display:none!important}
.to-top[hidden]{display:none!important}
/* ===== v1.39: галерея-карусель, лайтбокс, «целиком», свайп продуктов ===== */
/* Сетка: режим «целиком» */
.gallery a{display:block;border-radius:10px;overflow:hidden}
.gallery.fit-cover img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;cursor:zoom-in}
.gallery.fit-contain{align-items:start}
.gallery.fit-contain img{width:100%;height:auto;object-fit:contain;background:#f4f6f4;border-radius:10px;cursor:zoom-in}
/* Карусель */
.gallery-carousel{position:relative}
.gc-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding-bottom:6px}
.gc-track::-webkit-scrollbar{height:8px}
.gc-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.gc-slide{flex:0 0 auto;scroll-snap-align:center;border-radius:14px;overflow:hidden;background:#f4f6f4;cursor:zoom-in}
.gallery-carousel.fit-cover .gc-slide{width:min(88%,520px)}
.gallery-carousel.fit-cover .gc-slide img{width:100%;height:min(64vh,420px);object-fit:cover;display:block}
.gallery-carousel.fit-contain .gc-slide{width:auto;max-width:92%}
.gallery-carousel.fit-contain .gc-slide img{height:min(64vh,420px);width:auto;max-width:none;object-fit:contain;display:block}
.gc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;
background:rgba(255,255,255,.92);box-shadow:0 3px 14px rgba(0,0,0,.2);font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.gc-prev{left:6px}.gc-next{right:6px}
@media(max-width:640px){.gc-nav{display:none}}
/* Лайтбокс */
.lb-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,14,12,.94);display:flex;align-items:center;justify-content:center;padding:20px}
.lb-overlay img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:6px;background:#fff}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;cursor:pointer;border-radius:50%;width:52px;height:52px;font-size:28px;line-height:1}
.lb-close{top:16px;right:16px;font-size:24px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;opacity:.8}
/* Продукты: горизонтальный свайп на телефоне */
@media(max-width:640px){
.prod-grid.prod-hscroll{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;gap:12px;grid-template-columns:none;margin:0 -18px;padding:0 18px 8px}
.prod-grid.prod-hscroll>.prod-card{flex:0 0 80%;scroll-snap-align:center}
.prod-grid.prod-hscroll .prod-img{height:200px}
}
/* ===== v1.41: корзина, характеристики, галерея товара ===== */
.cart-link{position:relative;display:inline-flex;align-items:center;font-size:20px;text-decoration:none;margin-left:6px}
.cart-count{position:absolute;top:-6px;right:-10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.cart-items{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.cart-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cart-info{flex:1;min-width:0}
.cart-title{font-weight:600}
.cart-qty{display:flex;align-items:center;gap:8px}
.cart-qty button{width:30px;height:30px;border:1px solid var(--line);background:var(--bg);border-radius:8px;font-size:18px;cursor:pointer;line-height:1}
.cq-val{min-width:22px;text-align:center;font-weight:600}
.cart-del{border:0;background:none;color:var(--ink-2);font-size:16px;cursor:pointer;padding:6px}
.cart-total{text-align:right;font-size:18px;margin:8px 0 18px}
.cart-total strong{color:var(--primary)}
.checkout-box{border-top:1px solid var(--line);padding-top:18px}
.cart-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:24px;font-size:14px;z-index:1200;opacity:0;transition:.25s;pointer-events:none}
.cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.prod-specs{width:100%;border-collapse:collapse;margin:8px 0;font-size:13.5px}
.prod-specs td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ps-k{color:var(--ink-2);padding-right:14px!important;white-space:nowrap}
.ps-v{font-weight:600;text-align:right}
.prodcard-gallery{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.prodcard-gallery a{width:52px;height:52px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.prodcard-gallery img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.prodgal-edit{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.pge-item{width:90px;text-align:center}
.pge-item img{width:90px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.pge-rm{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;cursor:pointer}
/* ===== v1.43: виджет связи, всплывающая форма ===== */
.fab-widget{position:fixed;right:18px;bottom:80px;z-index:180;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab-btn{width:58px;height:58px;border-radius:50%;border:0;background:var(--primary);color:#fff;font-size:26px;cursor:pointer;
box-shadow:0 6px 22px rgba(0,0,0,.28);transition:.2s}
.fab-widget.open .fab-btn{transform:rotate(15deg)}
.fab-menu{display:flex;flex-direction:column;gap:8px}
.fab-item{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:24px;
padding:9px 16px 9px 12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.14);white-space:nowrap}
.fab-item span{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex:none}
.fab-item.wa span{background:#25d366}.fab-item.tg span{background:#2aabee}.fab-item.mx span{background:#b06cff}.fab-item.ph span{background:var(--primary)}
.fab-item:hover{transform:translateX(-3px);transition:.15s}
.popup-overlay{position:fixed;inset:0;z-index:1100;background:rgba(10,14,12,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.popup-overlay[hidden]{display:none!important}
.popup-box{background:var(--surface);border-radius:18px;padding:28px 26px;max-width:420px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:popIn .25s ease}
@keyframes popIn{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.popup-close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:20px;color:var(--ink-2);cursor:pointer}
.popup-title{margin:0 0 6px;font-size:22px}
.popup-text{margin:0 0 14px}
.popup-form input[type=text],.popup-form input[type=tel]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
@media(max-width:640px){.fab-widget{bottom:74px;right:12px}}
/* ===== v1.44: квиз, онлайн-запись ===== */
.quiz-block{max-width:640px;margin:0 auto}
.quiz-progress{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:6px 0}
.quiz-bar{height:100%;background:var(--primary);transition:width .3s;border-radius:6px}
.quiz-count{margin-bottom:14px}
.quiz-q{font-size:20px;margin:8px 0 16px}
.quiz-opts{display:flex;flex-direction:column;gap:10px}
.quiz-opt{text-align:left;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
font-size:15px;cursor:pointer;transition:.15s;font-weight:500}
.quiz-opt:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface));transform:translateX(3px)}
.quiz-back{margin-top:14px}
.quiz-final input[type=text],.quiz-final input[type=tel]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.booking-block{max-width:640px;margin:0 auto}
.bk-dates{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.bk-date{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px;padding:10px 8px;
border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;transition:.15s}
.bk-date:hover{border-color:var(--primary)}
.bk-date.sel{background:var(--primary);color:#fff;border-color:var(--primary)}
.bk-dn{font-weight:700;font-size:14px}.bk-wd{font-size:11px;opacity:.7}
.bk-times{display:flex;flex-wrap:wrap;gap:8px}
.bk-time{padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;font-weight:600;transition:.15s}
.bk-time:hover:not(:disabled){border-color:var(--primary)}
.bk-time.sel{background:var(--primary);color:#fff;border-color:var(--primary)}
.bk-time.taken,.bk-time:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
/* ===== v1.45: блог =====
Апдейт 200: раскладка карточек и сетки переехала в конец файла — карточка
перестала быть ссылкой (внутрь добавились кнопки быстрых действий),
а обложка получила настраиваемые пропорции вместо фиксированных 170px.
Здесь остаётся только то, что не переопределяется ниже. */
.article-date{margin-bottom:6px}
/* Апдейт 216: раньше .article-cover был самим ![]()
, отсюда max-height и
object-fit. Теперь это контейнер .media-cover с картинкой или видео внутри:
ограничение высоты резало обложку, а object-fit на блоке ничего не делал. */
.article-cover{width:100%;border-radius:16px;margin:12px 0 18px}
.article-body p{margin:0 0 16px;line-height:1.7}
/* Фильтры товаров */
.prod-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.pf-search{flex:1;min-width:180px;padding:10px 14px;border:1px solid var(--line);border-radius:10px}
.pf-num{width:100px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.pf-stock{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.pf-stock input{width:auto}
.pf-sort{padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.pf-count{margin-left:auto}
/* Промокод и доставка в корзине */
.cart-extras{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:10px;text-transform:uppercase}
.promo-msg{font-size:13px;margin-top:4px}
.promo-msg.ok{color:#1e8a4c}.promo-msg.err{color:#c0392b}
.delivery-opts{display:flex;flex-direction:column;gap:8px}
.delivery-opts label{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.delivery-opts input{width:auto}
.cart-summary{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.cart-summary .cs-row{display:flex;justify-content:space-between;padding:3px 0}
.cart-summary .cs-total{font-size:18px;font-weight:700}
.cart-summary .cs-total strong{color:var(--primary)}
/* ===== v1.46: медиатека ===== */
.img-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.media-item{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.media-item img{width:100%;height:110px;object-fit:cover;display:block}
.media-tools{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;gap:4px}
.media-modal{position:fixed;inset:0;z-index:1200;background:rgba(10,14,12,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.media-modal[hidden]{display:none!important}
.media-modal-box{background:var(--surface);border-radius:16px;width:100%;max-width:720px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.media-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.media-modal-close{border:0;background:none;font-size:20px;cursor:pointer;color:var(--ink-2)}
.media-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;padding:16px;overflow-y:auto}
.mm-thumb{width:100%;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;transition:.15s}
.mm-thumb:hover{border-color:var(--primary);transform:scale(1.03)}
/* ===== v1.47: индикация загрузки файлов ===== */
.upload-overlay{position:fixed;inset:0;z-index:3000;background:rgba(12,16,14,.55);display:flex;align-items:center;justify-content:center}
.upload-overlay[hidden]{display:none!important}
.uo-box{background:var(--surface,#fff);border-radius:16px;padding:30px 34px;text-align:center;max-width:340px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.uo-spinner{width:44px;height:44px;margin:0 auto 16px;border:4px solid var(--line,#e5e7eb);border-top-color:var(--primary,#2f7d4f);border-radius:50%;animation:uoSpin .8s linear infinite}
@keyframes uoSpin{to{transform:rotate(360deg)}}
.uo-text{font-weight:700;font-size:17px}
.uo-sub{color:var(--ink-2,#6b7280);font-size:13px;margin-top:6px}
/* прогресс загрузки на кнопке сохранения блока */
[data-block-form] button[type=submit]:disabled{opacity:.85;position:relative}
/* ===== v1.49: модификации, остаток ===== */
.variant-select{margin:8px 0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;width:100%;max-width:260px;background:var(--surface);font-size:14px}
.product-stock.in{color:#1e8a4c}.product-stock.out{color:#b0453a}
/* ===== v1.50: отзывы, онлайн-чат ===== */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:16px}
.review-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--surface)}
.review-stars{color:#d9a406;letter-spacing:2px;margin-bottom:6px}
.review-stars span{color:var(--line)}.review-stars span.on{color:#f2b90c}
.review-text{margin:0 0 10px;line-height:1.6}
.review-author{font-weight:600}
.review-form-wrap{margin-top:8px}
.review-form{max-width:480px;margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface)}
.chat-widget{position:fixed;left:18px;bottom:80px;z-index:190}
.chat-fab{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border:0;border-radius:26px;padding:12px 18px;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.chat-panel{position:absolute;left:0;bottom:60px;width:320px;max-width:calc(100vw - 36px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column}
.chat-panel[hidden]{display:none!important}
.chat-head{background:var(--primary);color:#fff;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.chat-close{background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
.chat-body{padding:14px;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.chat-msg{padding:9px 13px;border-radius:12px;font-size:14px;max-width:85%;line-height:1.4}
.chat-msg.bot{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
.chat-msg.user{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.chat-form{padding:12px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line)}
.chat-form textarea,.chat-contacts input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.chat-contacts{display:flex;gap:8px}
.chat-consent{font-size:12px;color:var(--ink-2);display:flex;gap:6px;align-items:center}
@media(max-width:640px){.chat-widget{left:12px;bottom:74px}.chat-fab-label{display:none}.chat-fab{border-radius:50%;width:54px;height:54px;justify-content:center;padding:0;font-size:22px}}
/* ===== v1.56: этапы (вид в ряд, значки) + репитер с перемещением ===== */
.steps-list.steps-row{display:flex;gap:16px;flex-wrap:wrap}
.steps-list.steps-row .step-item{flex:1 1 200px;flex-direction:column;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.steps-list.steps-row .step-item .step-num{margin:0 auto 10px}
.step-num.has-icon{background:transparent;color:inherit;font-size:26px;line-height:1}
/* репитер: строки с ручкой перетаскивания и кнопками порядка */
.rep-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px}
.rep-move{cursor:grab;color:var(--ink-2);font-size:18px;line-height:1;padding:6px 2px;user-select:none;flex-shrink:0}
.rep-fields{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.rep-fields input,.rep-fields textarea,.rep-fields select{width:100%}
.rep-fields textarea{resize:vertical;min-height:64px}
.rep-ctrls{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.rep-ctrls button{border:1px solid var(--line);background:var(--surface);border-radius:7px;width:30px;height:26px;cursor:pointer;font-size:13px;line-height:1;color:var(--ink)}
.rep-ctrls .rep-del{color:#b0453a}
.rep-row.sortable-ghost{opacity:.4}
/* ===== v1.57: отступы групп продуктов, колонки ===== */
.page-group{margin-bottom:34px}
.page-group:last-child{margin-bottom:0}
.page-group>.eyebrow{margin-bottom:16px;display:block}
.page-group>.muted.small{margin:-8px 0 14px}
.prod-filters{margin:14px 0 22px}
/* фиксированное число колонок (перебивает flex-раскладку prod-grid) */
.prod-grid.prod-cols-2,.prod-grid.prod-cols-3,.prod-grid.prod-cols-4{display:grid}
.prod-grid.prod-cols-2{grid-template-columns:repeat(2,1fr)}
.prod-grid.prod-cols-3{grid-template-columns:repeat(3,1fr)}
.prod-grid.prod-cols-4{grid-template-columns:repeat(4,1fr)}
.prod-grid.prod-cols-2>.prod-card,.prod-grid.prod-cols-3>.prod-card,.prod-grid.prod-cols-4>.prod-card{max-width:none}
@media(max-width:900px){.prod-grid.prod-cols-3,.prod-grid.prod-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prod-grid.prod-cols-2,.prod-grid.prod-cols-3,.prod-grid.prod-cols-4{grid-template-columns:1fr}}
/* ===== v1.57: этапы — позиция цифры и размеры текста ===== */
.steps-list.num-top .step-item{flex-direction:column}
.steps-list.num-top .step-num{margin-bottom:8px}
.steps-list.steps-row.num-top .step-item{align-items:center}
.step-title.sz-s{font-size:.94em}
.step-title.sz-l{font-size:1.2em}
.step-title.sz-xl{font-size:1.5em}
.step-text.sz-s{font-size:.86em}
.step-text.sz-l{font-size:1.12em}
/* ===== v1.59: виджет связи (SVG), команда на телефоне ===== */
.fab-item svg{flex:none}
.fab-mx{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;background:currentColor;color:#fff;font-weight:800;font-size:12px}
.fab-item.mx .fab-mx{background:#7c3aed}
/* центрирование ленты команды без обрезки первой карточки (safe) */
.blk-align-center .team-strip{justify-content:safe center}
/* аккуратный перенос длинных ФИО */
.person-name{word-break:break-word;overflow-wrap:anywhere;line-height:1.25}
.person-card,.person,.person-main{min-width:0}
/* на телефоне команда — сетка 2 в ряд, без горизонтальной прокрутки и обрезки */
@media(max-width:560px){
.team-strip{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;overflow:visible !important;grid-auto-flow:row !important}
.team-strip .person-card,.team-strip .person{width:auto !important;flex:none !important}
.team-strip .person-photo,.team-strip .avatar-fallback.xl{width:72px;height:72px}
.person-name{font-size:15px}
.person-pos{font-size:13px}
}
/* ===== v1.60: автоподбор адреса ===== */
.addr-wrap{position:relative}
.addr-suggest{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);max-height:260px;overflow-y:auto}
.addr-suggest[hidden]{display:none}
.addr-opt{padding:9px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
.addr-opt:last-child{border-bottom:0}
.addr-opt:hover{background:var(--bg)}
/* ===== v1.61: справочники в форме ===== */
.list-cat{padding:6px 12px 3px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);background:var(--bg);position:sticky;top:0}
.list-suggest .addr-opt{padding:8px 12px}
/* ===== v1.62: Dadata компания (ИНН) ===== */
.addr-opt .da-sub{font-size:12px;color:var(--ink-2);margin-top:2px}
/* ===== v1.64: чипы сфер, выбор сфер в поле =====
Апдейт 197: было объявлено как .chip и молча перекрывало пилюли блока
«Контакты» на публичном сайте (строка 110): display:inline-flex -> inline-block,
из-за чего переставали работать align-items и gap, значок съезжал с текста.
Переименовано в .chip-sm, разметка в views/admin/lists.ejs обновлена. */
.chip-sm{display:inline-block;padding:2px 9px;border:1px solid var(--line);border-radius:20px;font-size:12px;background:var(--bg);margin:0 2px 4px 0}
.sphere-list{display:flex;flex-wrap:wrap;gap:6px 14px}
.sphere-list .opt{margin:0}
/* ===== v1.65: карусель товаров + «Все товары» ===== */
.prod-carousel-wrap{position:relative}
.prod-grid.prod-carousel{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.prod-grid.prod-carousel>.prod-card{flex:0 0 auto;width:260px;max-width:80vw;scroll-snap-align:start}
.prod-grid.prod-carousel.prod-cols-2>.prod-card,.prod-grid.prod-carousel.prod-cols-3>.prod-card,.prod-grid.prod-carousel.prod-cols-4>.prod-card{width:260px}
.carousel-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center}
.carousel-arrow.prev{left:-8px}
.carousel-arrow.next{right:-8px}
.carousel-arrow:disabled{opacity:0;pointer-events:none}
.carousel-arrow:hover{background:var(--bg)}
/* Стрелки показываем только когда есть что листать (класс ставит app.js) */
.prod-carousel-wrap:not(.has-scroll) .carousel-arrow{display:none}
/* В режиме «листать вбок на ПК» даём место под стрелки, чтобы не наезжали на карточки и не обрезали их слева/справа.
Отступы делаем НА САМОМ СКРОЛЛЕРЕ (не на обёртке) + scroll-padding, иначе карточки режутся у края. */
.prod-carousel-wrap{position:relative}
.prod-carousel-wrap.has-scroll .carousel-arrow.prev{left:-6px}
.prod-carousel-wrap.has-scroll .carousel-arrow.next{right:-6px}
/* Проверенный приём (как в мобильной ленте товаров): скроллер «вытекает» за края
отрицательным margin, а padding возвращает карточки внутрь. Обрезанные карточки
прячутся в этой зоне у края секции — визуально ничего не «отрублено». */
.prod-carousel-wrap .prod-hscroll-all,
.prod-carousel-wrap .cardrow-dscroll,
.prod-carousel-wrap .prod-carousel,
.prod-carousel-wrap .team-hscroll-all{
scroll-behavior:smooth;
margin-left:-18px;margin-right:-18px;
padding:4px 18px 10px;
scroll-padding-left:18px;scroll-padding-right:18px;
}
.cardrow-dscroll,.prod-hscroll-all,.team-hscroll-all{scroll-padding-inline:18px}
/* ГЛАВНЫЙ ФИКС ОБРЕЗКИ: при выравнивании «по центру» блок ставит justify-content:center.
Для горизонтальной ленты это ломает прокрутку — первый элемент уходит в недостижимую
отрицательную зону и обрезается. Для лент принудительно выравниваем от начала. */
.blk-align-center .cardrow-dscroll,
.blk-align-center .cardrow-mscroll,
.blk-align-center .prod-hscroll-all,
.blk-align-center .team-hscroll-all,
.blk-align-center .prod-carousel,
.blk-align-center .pdp-cards.scroll,
.cardrow-dscroll,.cardrow-mscroll,.prod-hscroll-all,.team-hscroll-all{justify-content:flex-start !important}
/* Внутри блоков с фоном/скруглением отрицательный margin не нужен (там свои отступы) —
иначе карточки вылезут за скруглённый фон. Оставляем только внутренние отступы. */
.blk-bg-paper .prod-carousel-wrap [class*="hscroll"],
.blk-bg-tint .prod-carousel-wrap [class*="hscroll"],
.blk-bg-primary .prod-carousel-wrap [class*="hscroll"],
.blk-bg-dark .prod-carousel-wrap [class*="hscroll"],
.blk-bg-paper .prod-carousel-wrap .cardrow-dscroll,
.blk-bg-tint .prod-carousel-wrap .cardrow-dscroll,
.blk-bg-primary .prod-carousel-wrap .cardrow-dscroll,
.blk-bg-dark .prod-carousel-wrap .cardrow-dscroll{margin-left:0;margin-right:0;padding-left:6px;padding-right:6px;scroll-padding-left:6px;scroll-padding-right:6px}
@media(max-width:560px){
.prod-carousel-wrap .prod-hscroll-all,
.prod-carousel-wrap .cardrow-dscroll,
.prod-carousel-wrap .prod-carousel,
.prod-carousel-wrap .team-hscroll-all{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;scroll-padding-left:14px;scroll-padding-right:14px}
}
.prod-seeall{margin-top:18px;text-align:center}
@media(max-width:560px){.carousel-arrow{display:none}.prod-grid.prod-carousel>.prod-card{width:78vw}}
/* ===== v1.66: страница товара (PDP) ===== */
.pdp .crumbs{margin:6px 0 18px}
.pdp .crumbs a{color:inherit;text-decoration:none;opacity:.75}
.pdp .crumbs a:hover{opacity:1}
.pdp-top{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.pdp-gallery{position:sticky;top:20px}
.pdp-main{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);display:flex;align-items:center;justify-content:center;min-height:320px}
.pdp-main img{width:100%;height:auto;display:block;object-fit:contain;max-height:520px}
.pdp-main.pdp-noimg{min-height:280px;color:var(--ink-2)}
.pdp-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);color:#222;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pdp-arrow.prev{left:10px}.pdp-arrow.next{right:10px}
.pdp-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pdp-thumb{width:70px;height:70px;border:2px solid var(--line);border-radius:10px;overflow:hidden;padding:0;cursor:pointer;background:var(--surface)}
.pdp-thumb.active{border-color:var(--primary)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-title{margin:0 0 6px}
.pdp-pricerow{display:flex;align-items:baseline;gap:12px;margin:16px 0}
.pdp-price{font-size:30px;font-weight:800;color:var(--primary)}
.pdp-stock{margin:8px 0;font-weight:600}
.pdp-stock.in{color:#2e7d46}.pdp-stock.out{color:#b0453a}
.pdp-variants{margin:14px 0;display:flex;align-items:center;gap:10px}
.pdp-variants select{max-width:280px}
.pdp-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.pdp-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.pdp-sh{background:none;border:0;color:var(--primary);cursor:pointer;text-decoration:none;font-size:14px;padding:0}
.pdp-sh:hover{text-decoration:underline}
.pdp-section{margin-top:36px}
.pdp-section h2{margin-bottom:12px}
.pdp-specs{width:100%}
.prod-card-link{display:block;text-decoration:none;color:inherit}
.pdp-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:20px}
.pdp-lightbox img{max-width:96vw;max-height:96vh;object-fit:contain;background:#fff;border-radius:6px}
@media(max-width:760px){.pdp-top{grid-template-columns:1fr;gap:18px}.pdp-gallery{position:static}.pdp-price{font-size:26px}}
.prod-imglink,.prod-titlelink{text-decoration:none;color:inherit;display:block}
.prod-titlelink:hover strong{color:var(--primary)}
/* ===== v1.67: отзывы у товаров/людей ===== */
.reviews-block .rev-agg{font-size:.8em;color:var(--accent);font-weight:700;vertical-align:middle}
.rev-list{display:flex;flex-direction:column;gap:14px;margin:14px 0 18px}
.rev-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface)}
.rev-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px}
.rev-stars{color:var(--accent);letter-spacing:1px;font-size:15px}
.rev-text{line-height:1.5}
.review-form{margin-top:14px;max-width:560px}
.review-form .hp{position:absolute;left:-9999px;width:1px;height:1px}
/* ===== v1.68: избранное + вы смотрели ===== */
.prod-card{position:relative}
.wish-btn{position:absolute;top:8px;right:8px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:#e0556b;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.wish-btn.on{background:#e0556b;color:#fff;border-color:#e0556b}
.wish-btn-lg{position:static;width:auto;height:auto;border-radius:10px;background:none}
.wish-link{position:relative;text-decoration:none;color:#e0556b;font-size:20px;margin-left:6px}
.wish-count{position:absolute;top:-6px;right:-8px;background:#e0556b;color:#fff;border-radius:10px;font-size:11px;padding:1px 5px;font-weight:700}
/* ===== v1.69: быстрый заказ ===== */
.qo-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.qo-overlay[hidden]{display:none}
.qo-box{background:var(--surface);border-radius:16px;max-width:420px;width:100%;padding:24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.qo-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-2)}
.qo-title{margin:0 0 4px}
.qo-prod{margin:0 0 14px}
.qo-msg{margin-top:12px;padding:12px;border-radius:10px;text-align:center}
.qo-msg.ok{background:#e8f5ec;color:#237a44}
.qo-msg.err{background:#fdecea;color:#b0453a}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ===== v1.70: аккаунты и кабинет ===== */
.acc-link{text-decoration:none;color:inherit;font-size:14px;margin-left:6px;white-space:nowrap}
.auth-wrap{max-width:440px;margin:0 auto}
.auth-form{margin-top:14px}
.auth-err{background:#fdecea;color:#b0453a;border-radius:10px;padding:12px 14px;margin:12px 0}
.cab-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cab-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:12px}
.cab-orders{display:flex;flex-direction:column;gap:12px}
.cab-order{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cab-order-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.order-status{border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600;border:1px solid var(--line)}
.order-status.st-new{background:#eef4ff;color:#2b5cad}
.order-status.st-processing{background:#fff6e5;color:#a5741a}
.order-status.st-done{background:#e8f5ec;color:#237a44}
.order-status.st-canceled{background:#f3f3f3;color:#888}
@media(max-width:760px){.cab-grid{grid-template-columns:1fr}}
/* ===== v1.71: пароль show/hide + сила, баннер ===== */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:42px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:17px;opacity:.5;padding:4px}
.pw-toggle.on,.pw-toggle:hover{opacity:1}
.pw-meter{margin-top:6px;height:16px;position:relative}
.pw-meter span{display:block;height:5px;width:0;border-radius:4px;background:#ccc;transition:width .2s}
.pw-meter em{font-size:11.5px;position:absolute;right:0;top:0;font-style:normal;color:var(--ink-2)}
.pw-meter.weak span{background:#d9534f}.pw-meter.mid span{background:#e0a800}.pw-meter.strong span{background:#2e9a4f}
.verify-banner{background:#fff6e5;border:1px solid #f0d9a0;color:#8a6516;border-radius:10px;padding:12px 14px;margin:12px 0;max-width:640px}
.btn-link{background:none;border:0;color:var(--primary);cursor:pointer;text-decoration:underline;padding:0;font:inherit}
/* ===== v1.72: зоны системных страниц ===== */
.sys-zone{max-width:var(--maxw);margin:0 auto;padding-left:18px;padding-right:18px}
@media(max-width:560px){.sys-zone{padding-left:14px;padding-right:14px}}
.sys-zone .page-render,.sys-zone section{margin-top:0}
/* ===== v1.74: выбор в избранном ===== */
.fav-toolbar{display:flex;align-items:center;gap:16px;margin:0 0 14px;flex-wrap:wrap}
.fav-card{position:relative}
.fav-check{position:absolute;top:8px;left:8px;z-index:5;background:rgba(255,255,255,.92);border-radius:6px;padding:3px 5px;line-height:0;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.fav-check input{width:18px;height:18px;cursor:pointer}
/* ===== v1.75: блоки карточки товара ===== */
.pdp-top.pdp-nogallery{grid-template-columns:1fr;max-width:760px}
.pdp-blocks{margin-top:24px}
.pdp-blocks .page-render>section:first-child,.pdp-blocks section:first-child{margin-top:0}
/* ===== v1.77: категории ===== */
.cat-link{color:inherit;text-decoration:none}
.cat-link:hover{text-decoration:underline}
.crumbs{margin-bottom:12px}
.crumbs a{color:inherit}
/* ===== v1.78: мессенджер ===== */
/* Мессенджер занимает ширину, заданную настройкой блока (blk-w-*), и центрируется настройкой выравнивания.
Раньше был жёстко 760px — из-за этого ширина/центровка блока не работали. */
/* Апдейт 202: по умолчанию (когда ширина блока не задана) стоял жёсткий 760px,
и мессенджер игнорировал общую ширину сайта — «нормально» вставал только после
того, как ширину блока выставляли вручную. Теперь по умолчанию — ширина
контейнера, а сузить его по-прежнему можно настройкой «Ширина» у блока. */
.messenger{width:100%;max-width:100%}
.blk-align-center .messenger{margin-left:auto;margin-right:auto}
.blk-align-right .messenger{margin-left:auto;margin-right:0}
.blk-align-left .messenger{margin-left:0;margin-right:auto}
.messenger-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 4px 24px rgba(0,0,0,.05);position:relative}
.messenger-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:52px}
.messenger-ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent,#D9A441));display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.messenger-h-title{font-weight:700;font-size:17px}
.messenger-h-sub{margin-top:1px}
.messenger-desc{margin:0 0 14px}
.messenger-list{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;max-height:520px;overflow-y:auto;padding-right:4px}
.msg-bubble{display:flex;gap:10px;align-items:flex-start}
.msg-ava{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.msg-body{background:var(--bg);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:10px 14px;flex:1;min-width:0}
.msg-bubble.pinned .msg-body{border-color:var(--primary);background:rgba(37,107,75,.05)}
.msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;flex-wrap:wrap}
.msg-pin{font-size:12px}
.msg-text{white-space:pre-wrap;word-break:break-word;line-height:1.5}
.msg-reacts{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.msg-react{background:none;border:1px solid transparent;border-radius:16px;padding:2px 8px;cursor:pointer;font-size:14px;line-height:1.4;opacity:.45;transition:.15s}
.msg-react:hover{opacity:1;background:var(--surface)}
.msg-react.has{opacity:1;border-color:var(--line);background:var(--surface)}
.msg-react .rc{font-size:12px;color:var(--ink-2);font-weight:600}
.msg-empty{text-align:center;padding:16px}
.messenger-form{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.messenger-row{display:flex;gap:10px;flex-wrap:wrap}
.messenger-row input{flex:1;min-width:150px;border:1px solid var(--line);border-radius:24px;padding:11px 16px;background:var(--bg);font:inherit;transition:.15s}
.messenger-row input:focus{border-color:var(--primary);background:var(--surface);outline:none}
.messenger-inputbar{display:flex;align-items:flex-end;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:5px 6px 5px 16px;position:relative;transition:.15s}
.messenger-inputbar:focus-within{border-color:var(--primary);background:var(--surface);box-shadow:0 2px 12px rgba(37,107,75,.08)}
.messenger-inputbar textarea{flex:1;border:0;background:none;resize:none;font:inherit;padding:8px 0;max-height:140px;line-height:1.5;outline:none}
.msg-emoji-btn{background:none;border:0;font-size:22px;cursor:pointer;opacity:.6;line-height:1;padding:6px;border-radius:50%;flex:none}
.msg-emoji-btn:hover{opacity:1;background:var(--surface)}
.msg-send{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--primary);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.msg-send:hover{transform:scale(1.06)}
.msg-send:disabled{opacity:.5;cursor:default}
.msg-emoji-pop{position:absolute;right:44px;bottom:52px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-wrap:wrap;gap:2px;width:296px;max-height:260px;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:20}
.msg-emoji-pop[hidden]{display:none}
.msg-emoji-pop .emo{background:none;border:0;font-size:22px;cursor:pointer;padding:5px;border-radius:8px;line-height:1}
.msg-emoji-pop .emo:hover{background:var(--bg);transform:scale(1.15)}
.msg-emoji-cat{width:100%;font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em;margin:6px 2px 2px;font-weight:600}
.messenger-msg{padding:8px 12px;border-radius:8px;font-size:14px}
.messenger-msg.ok{background:#e8f5ec;color:#237a44}
.messenger-msg.err{background:#fdecea;color:#b0453a}
/* ===== v1.79: вкладки/портфолио/тарифы/калькулятор/лента ===== */
.block-title{font-size:clamp(26px,6vw,38px);font-weight:800;line-height:1.15;margin:0 0 16px}
/* Вкладки */
.tabs-nav{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:16px}
.tab-btn{background:none;border:0;padding:10px 16px;cursor:pointer;font:inherit;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-2px;border-radius:8px 8px 0 0}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.tab-panel{display:none;line-height:1.6}
.tab-panel.active{display:block}
/* Портфолио */
.pf-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pf-chip{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer;font:inherit;font-size:14px}
.pf-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pf-grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.pf-cols-2{grid-template-columns:repeat(2,1fr)}.pf-cols-4{grid-template-columns:repeat(4,1fr)}
.pf-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pf-link{text-decoration:none;color:inherit;display:block}
.pf-imgwrap{aspect-ratio:4/3;overflow:hidden}
.pf-imgwrap img{width:100%;height:100%;object-fit:cover}
.pf-body{padding:12px 14px}
.pf-cat{display:inline-block;margin-top:6px;font-size:12px;color:var(--primary);background:rgba(37,107,75,.08);padding:2px 8px;border-radius:12px}
@media(max-width:860px){.pf-grid,.pf-cols-4,.pf-cols-2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pf-grid,.pf-cols-4,.pf-cols-2{grid-template-columns:1fr}}
/* Тарифы */
.tariff-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:4px;margin:0 auto 20px;display:flex;width:fit-content}
.tt-btn{background:none;border:0;padding:8px 20px;border-radius:20px;cursor:pointer;font:inherit}
.tt-btn.active{background:var(--primary);color:#fff}
.tariff-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tariff-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative;display:flex;flex-direction:column;gap:12px}
.tariff-card.featured{border-color:var(--primary);box-shadow:0 8px 30px rgba(37,107,75,.12)}
.tariff-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:12px;padding:3px 12px;border-radius:12px}
.tariff-name{font-weight:600;font-size:18px}
.tariff-price{font-size:30px;font-weight:700}
.tariff-unit{font-size:14px;font-weight:400;color:var(--ink-2)}
.tariff-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tariff-feats li{padding-left:24px;position:relative}
.tariff-feats li:before{content:'✓';position:absolute;left:0;color:var(--primary);font-weight:700}
.tariff-card .btn{margin-top:auto}
/* Калькулятор */
.calc-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:560px}
.calc-inputs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.calc-result{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:22px}
.calc-result strong{color:var(--primary)}
.calc-note{margin-top:6px}
/* Лента логотипов */
.logos-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:flex;gap:48px;width:max-content;animation:logos-scroll 30s linear infinite;align-items:center}
.logos-marquee:hover .logos-track{animation-play-state:paused}
.logos-track .logo-item img{height:44px;width:auto;filter:grayscale(1);opacity:.7;transition:.2s}
.logos-track .logo-item:hover img{filter:none;opacity:1}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* репитер-фото */
.rep-img{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rep-img-input{flex:1;min-width:140px}
.rep-img-prev img{height:36px;width:36px;object-fit:cover;border-radius:6px}
/* ===== v1.79: виджет мессенджеров ===== */
.msgr-widget{position:fixed;left:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.msgr-fab{width:56px;height:56px;border-radius:50%;border:0;background:var(--primary);color:#fff;font-size:24px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.msgr-widget.open .msgr-fab{background:var(--ink-2)}
.msgr-list{display:flex;flex-direction:column;gap:8px}
.msgr-btn{display:block;padding:10px 16px;border-radius:24px;color:#fff;text-decoration:none;font-weight:600;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap}
.msgr-btn.wa{background:#25d366}.msgr-btn.tg{background:#2aabee}.msgr-btn.vb{background:#7360f2}.msgr-btn.ph{background:#444}
@media(max-width:600px){.msgr-widget{left:14px;bottom:78px}}
/* ===== v1.81: анимация сообщений мессенджера ===== */
.msg-bubble{animation:msg-in .28s ease}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg-react:active{transform:scale(1.25)}
/* ===== v1.84: админ-чат ===== */
.chat-search{display:flex;gap:8px;align-items:center;margin:10px 0}
.chat-search input[type=search]{flex:1;border:1px solid var(--line);border-radius:22px;padding:9px 16px;font:inherit}
.chat-threads{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.chat-thread{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;text-decoration:none;color:inherit;transition:.12s;border:1px solid transparent}
.chat-thread:hover{background:var(--bg);border-color:var(--line)}
.chat-thread.unread{background:rgba(37,107,75,.05)}
.ct-ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent,#D9A441));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.ct-main{flex:1;min-width:0}
.ct-top{display:flex;justify-content:space-between;gap:8px}
.ct-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-badges{display:flex;align-items:center;gap:6px;flex:none}
.ct-badge{background:var(--primary);color:#fff;border-radius:12px;min-width:22px;height:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.ct-await{color:#e0a020;font-size:16px}
.chat-thread.unread strong{font-weight:700}
/* Диалог */
/* Апдейт 232: у карточки чата стоял потолок 760px, и в админке она
не растягивалась даже в полноэкранном режиме. Ширину держит уже сам
контейнер страницы, а читаемость строки — потолок пузыря сообщения. */
.admin-chat-card{max-width:none}
.chat-conv{display:flex;flex-direction:column;gap:12px;max-height:56vh;overflow-y:auto;padding:8px 4px;margin-bottom:14px}
.cm{display:flex;gap:8px;align-items:flex-end;max-width:82%}
.cm-user{align-self:flex-start}
.cm-admin{align-self:flex-end;flex-direction:row-reverse}
.cm-ava{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;background:var(--primary);color:#fff}
.cm-user .cm-ava{background:var(--ink-2)}
.cm-bubble{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:9px 13px}
.cm-user .cm-bubble{border-bottom-left-radius:4px}
.cm-admin .cm-bubble{background:var(--primary);color:#fff;border-color:var(--primary);border-bottom-right-radius:4px}
.cm-name{font-size:12px;font-weight:700;opacity:.85;margin-bottom:2px}
.cm-text{white-space:pre-wrap;word-break:break-word;line-height:1.45}
.cm-time{margin-top:3px;font-size:11px}
.cm-admin .cm-time{color:rgba(255,255,255,.7)}
.cm-del{opacity:0;transition:.12s}
.cm:hover .cm-del{opacity:.5}
.cm-del button{background:none;border:0;color:inherit;cursor:pointer;font-size:12px}
.chat-reply-bar{display:flex;align-items:flex-end;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:5px 6px 5px 16px;position:relative}
.chat-reply-bar:focus-within{border-color:var(--primary)}
.chat-reply-bar textarea{flex:1;border:0;background:none;resize:none;font:inherit;padding:8px 0;max-height:140px;outline:none;line-height:1.5}
.chat-reply-bar .msg-emoji-pop{right:44px;bottom:52px}
/* ============================================================
Апдейт 118: характеристики, состав системы, ширина/пропорции карточек
============================================================ */
/* --- Характеристики: аккуратный перенос по словам, значению — больше места --- */
.prod-specs{table-layout:fixed}
.prod-specs .ps-k{white-space:normal;word-break:normal;overflow-wrap:break-word;width:48%;hyphens:none}
.prod-specs .ps-v{text-align:right;white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:none}
.comp-specs .cs-k,.comp-specs .cs-v{white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:none}
/* Карточка товара: характеристики в компактной колонке не должны рвать слова по буквам */
.prod-card .prod-specs .ps-k{width:auto;padding-right:10px!important}
/* --- Блок «Состав системы / Комплектация» (раньше без стилей) --- */
.components-block{margin:6px 0}
.components-block .block-title{margin:0 0 14px}
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.comp-grid.comp-cols-1{grid-template-columns:1fr}
.comp-grid.comp-cols-2{grid-template-columns:repeat(2,1fr)}
.comp-grid.comp-cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.comp-grid.comp-cols-2,.comp-grid.comp-cols-3{grid-template-columns:1fr}}
.comp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column}
.comp-imgwrap{width:100%;aspect-ratio:4/3;background:#f3f5ef;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.comp-main-img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .15s;cursor:zoom-in}
.comp-thumbs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0}
.comp-thumb{width:46px;height:46px;object-fit:cover;border-radius:7px;border:1px solid var(--line);cursor:pointer;opacity:.7;transition:.15s}
.comp-thumb:hover{opacity:1}
.comp-thumb.active{opacity:1;border-color:var(--primary);box-shadow:0 0 0 2px rgba(37,107,75,.18)}
/* Обрезка / пропорции фото в «Составе системы» */
.comp-imgwrap.fit-cover .comp-main-img,.comp-imgwrap.fit-cover .comp-slide{object-fit:cover}
.comp-imgwrap.fit-contain .comp-main-img,.comp-imgwrap.fit-contain .comp-slide{object-fit:contain}
.comp-imgwrap.ratio-1-1{aspect-ratio:1/1}
.comp-imgwrap.ratio-4-3{aspect-ratio:4/3}
.comp-imgwrap.ratio-3-2{aspect-ratio:3/2}
.comp-imgwrap.ratio-16-9{aspect-ratio:16/9}
.comp-imgwrap.ratio-orig{aspect-ratio:auto;min-height:120px}
.comp-imgwrap.ratio-orig .comp-main-img,.comp-imgwrap.ratio-orig .comp-slide{height:auto;max-height:360px}
/* Слайды: на ПК показываем один активный, миниатюры переключают */
.comp-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .18s;pointer-events:none;cursor:zoom-in}
.comp-slide.active{opacity:1;position:relative;pointer-events:auto}
.comp-more{display:inline-block;margin-top:6px;color:var(--primary);font-weight:600;font-size:13px;text-decoration:none}
/* На телефоне: галерея листается свайпом, миниатюры прячем */
@media(max-width:640px){
.comp-imgwrap:has(.comp-slide){display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;aspect-ratio:auto}
.comp-imgwrap:has(.comp-slide) .comp-slide{position:relative;opacity:1;pointer-events:auto;flex:0 0 100%;width:100%;height:auto;scroll-snap-align:center;object-fit:contain}
.comp-imgwrap.ratio-1-1:has(.comp-slide) .comp-slide{aspect-ratio:1/1}
.comp-imgwrap.ratio-4-3:has(.comp-slide) .comp-slide{aspect-ratio:4/3}
.comp-thumbs{display:none}
}
.comp-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px}
.comp-name{font-weight:700;font-size:15px;line-height:1.25;color:var(--ink)}
.comp-sub{margin-bottom:2px}
.comp-specs{width:100%;border-collapse:collapse;margin:4px 0 0;font-size:13px}
.comp-specs td{padding:4px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
.comp-specs .cs-k{color:var(--ink-2);padding-right:12px}
.comp-specs .cs-v{font-weight:600;text-align:right}
/* --- Ширина карточки товара в блоке «Продукты» --- */
.prod-grid.prod-cols-2>.prod-card.cw-narrow,.prod-grid.prod-cols-3>.prod-card.cw-narrow,.prod-grid.prod-cols-4>.prod-card.cw-narrow,.prod-grid>.prod-card.cw-narrow{}
.prod-grid>.prod-card.cw-narrow{flex-basis:200px}
.prod-grid>.prod-card.cw-wide{flex-basis:320px}
.prod-grid>.prod-card.cw-xwide{flex-basis:400px}
/* Ширина карточек: если задана ширина — принудительно flex-раскладка, чтобы ширина применялась (сетка колонок игнорирует ширину карточки) */
.prod-grid.prod-cw{display:flex;flex-wrap:wrap;gap:14px;grid-template-columns:none}
.prod-grid.prod-cw>.prod-card{flex:0 1 auto;width:260px;max-width:100%}
.prod-grid.prod-cw>.prod-card.cw-narrow{width:200px;flex-basis:auto}
.prod-grid.prod-cw>.prod-card.cw-wide{width:320px;flex-basis:auto}
.prod-grid.prod-cw>.prod-card.cw-xwide{width:400px;flex-basis:auto}
@media(max-width:560px){.prod-grid.prod-cw>.prod-card,.prod-grid.prod-cw>.prod-card.cw-narrow,.prod-grid.prod-cw>.prod-card.cw-wide,.prod-grid.prod-cw>.prod-card.cw-xwide{width:100%}}
/* Для grid-раскладки (2/3/4 колонки) ширина задаётся колонками; на flex-раскладке — базис выше */
/* --- Пропорции фото в карточке (чтобы не обрезалось) --- */
.prod-card.ir-1-1 .prod-imgwrap{aspect-ratio:1/1;height:auto}
.prod-card.ir-4-3 .prod-imgwrap{aspect-ratio:4/3;height:auto}
.prod-card.ir-3-2 .prod-imgwrap{aspect-ratio:3/2;height:auto}
.prod-card.ir-16-9 .prod-imgwrap{aspect-ratio:16/9;height:auto}
.prod-card.ir-1-1 .prod-img,.prod-card.ir-4-3 .prod-img,.prod-card.ir-3-2 .prod-img,.prod-card.ir-16-9 .prod-img{width:100%;height:100%;object-fit:cover}
.prod-card.ir-1-1 .prod-img.fit-contain,.prod-card.ir-4-3 .prod-img.fit-contain,.prod-card.ir-3-2 .prod-img.fit-contain,.prod-card.ir-16-9 .prod-img.fit-contain{object-fit:contain;background:#f3f5ef}
/* «Оригинал» — не обрезать вообще: фото показывается целиком по своей высоте */
.prod-card.ir-orig .prod-imgwrap{height:auto;aspect-ratio:auto}
.prod-card.ir-orig .prod-img{width:100%;height:auto;object-fit:contain;background:#f3f5ef;max-height:420px}
/* --- Мини-галерея доп. фото в карточке: не показывать «висящую» одиночную миниатюру --- */
.prodcard-gallery:has(a:only-child){display:none}
/* --- Редактор: миниатюры «несколько фото» можно перетаскивать --- */
.rep-imgs-thumb{cursor:grab}
.rep-imgs-thumb.sortable-ghost{opacity:.4}
.rep-imgs-strip:empty{display:none}
/* ============================================================
Апдейт 119: быстрый просмотр (галерея/характеристики), карусель
============================================================ */
.qv-gallery{display:flex;flex-direction:column;gap:8px}
.qv-thumbs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0}
.qv-thumb{width:48px;height:48px;object-fit:cover;border-radius:7px;border:1px solid var(--line);cursor:pointer;opacity:.7;transition:.15s}
.qv-thumb:hover{opacity:1}
.qv-thumb.active{opacity:1;border-color:var(--primary);box-shadow:0 0 0 2px rgba(37,107,75,.18)}
.qv-stock{margin:4px 0;font-size:13px;font-weight:600}
.qv-stock.in{color:#1a7a43}
.qv-stock.out{color:var(--ink-2)}
.qv-specs{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:13.5px;table-layout:fixed}
.qv-specs td{padding:5px 0;border-bottom:1px solid var(--line-2);vertical-align:top;white-space:normal;word-break:normal;overflow-wrap:break-word}
.qv-specs .qv-sk{color:var(--ink-2);padding-right:12px;width:48%}
.qv-specs .qv-sv{font-weight:600;text-align:right}
.qv-more-link,.qv-blocks-note a{color:var(--primary);font-weight:600;text-decoration:none;font-size:13px}
.qv-blocks-note{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
/* ============================================================
Апдейт 123: авто-выравнивание карточек товара + центровка
============================================================ */
/* Одинаковая высота карточек в ряду: тело растягивается, кнопки прижаты к низу,
поэтому цена и кнопки выстраиваются по одной линии независимо от длины текста. */
.prod-grid{align-items:stretch}
.prod-card{height:100%}
.prod-body{flex:1 1 auto}
.prod-card .prod-btns{margin-top:auto;padding-top:6px}
/* Центровка содержимого карточки (настройка блока: cardc-center) */
.prod-card.cardc-center .prod-body{align-items:center;text-align:center}
.prod-card.cardc-center .prod-btns{justify-content:center}
.prod-card.cardc-center .product-price-row{justify-content:center}
.prod-card.cardc-center .prod-specs{width:100%}
/* Левая центровка — по умолчанию (явный класс для переопределения) */
.prod-card.cardc-left .prod-body{align-items:flex-start;text-align:left}
.prod-card.cardc-left .prod-btns{justify-content:flex-start}
/* ============================================================
Апдейт 129: усиление раскладки редактора страниц
(настройки слева, предпросмотр справа — устойчиво к кэшу)
============================================================ */
@media(min-width:761px){
.pe-wrap{display:flex !important;flex-direction:row !important;align-items:stretch}
.pe-left{flex:0 0 400px;max-width:400px}
.pe-right{flex:1 1 auto;min-width:0}
}
/* ============================================================
Апдейт 133: настройки карточек команды (сетка/ширина/прокрутка/о себе)
============================================================ */
/* Явное число колонок */
.team-grid.team-cols-2{grid-template-columns:repeat(2,1fr)}
.team-grid.team-cols-3{grid-template-columns:repeat(3,1fr)}
.team-grid.team-cols-4{grid-template-columns:repeat(4,1fr)}
.team-grid.team-cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:760px){
.team-grid.team-cols-3,.team-grid.team-cols-4,.team-grid.team-cols-5{grid-template-columns:repeat(2,1fr)}
}
/* Ширина карточки: flex-раскладка, чтобы ширина применялась */
.team-grid.team-cw,.team-strip.team-cw{display:flex;flex-wrap:wrap;gap:14px;grid-auto-flow:row;grid-template-columns:none}
.team-cw>.person-card,.team-cw>.person{width:190px;max-width:100%;flex:0 1 auto}
.team-cw.cw-narrow>.person-card,.team-cw.cw-narrow>.person{width:150px}
.team-cw.cw-wide>.person-card,.team-cw.cw-wide>.person{width:240px}
.team-cw.cw-xwide>.person-card,.team-cw.cw-xwide>.person{width:300px}
@media(max-width:560px){.team-cw>.person-card,.team-cw>.person{width:100%}}
/* Горизонтальная прокрутка на ПК (одна строка) */
.team-hscroll-all{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:14px;grid-template-columns:none;grid-auto-flow:column;scroll-snap-type:x proximity;padding-bottom:8px}
.team-hscroll-all>.person-card,.team-hscroll-all>.person{flex:0 0 auto;width:200px;scroll-snap-align:start}
.team-hscroll-all.cw-narrow>.person-card,.team-hscroll-all.cw-narrow>.person{width:150px}
.team-hscroll-all.cw-wide>.person-card,.team-hscroll-all.cw-wide>.person{width:240px}
.team-hscroll-all.cw-xwide>.person-card,.team-hscroll-all.cw-xwide>.person{width:300px}
.team-carousel{position:relative}
/* Выравнивание содержимого влево */
.team-left .person-card{text-align:left}
.team-left .person-card .person-photo,.team-left .person-card .avatar-fallback{margin-left:0;margin-right:0}
/* «О сотруднике» на карточке */
.person-bio{margin-top:6px;line-height:1.4}
.person-card .person-bio{margin-top:6px}
/* ============================================================
Апдейт 134: единые настройки карточек (преимущества/отзывы/тарифы)
Модификаторы cardrow-* работают на .features, .reviews-grid, .pricing-grid
============================================================ */
/* Явное число колонок */
.cardrow-cols-2,.cardrow-cols-3,.cardrow-cols-4{display:grid !important}
.cardrow-cols-2{grid-template-columns:repeat(2,1fr) !important}
.cardrow-cols-3{grid-template-columns:repeat(3,1fr) !important}
.cardrow-cols-4{grid-template-columns:repeat(4,1fr) !important}
@media(max-width:760px){
.cardrow-cols-3,.cardrow-cols-4{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:520px){
.cardrow-cols-2,.cardrow-cols-3,.cardrow-cols-4{grid-template-columns:1fr !important}
}
/* Ширина карточки: flex-раскладка, чтобы ширина применялась */
.cardrow-cw{display:flex !important;flex-wrap:wrap;gap:16px;grid-template-columns:none !important}
.cardrow-cw>*{flex:0 1 auto;width:260px;max-width:100%}
.cardrow-cw.cw-narrow>*{width:200px}
.cardrow-cw.cw-wide>*{width:320px}
.cardrow-cw.cw-xwide>*{width:400px}
@media(max-width:560px){.cardrow-cw>*{width:100% !important}}
/* Листать по горизонтали на телефоне */
@media(max-width:760px){
.cardrow-mscroll{display:flex !important;flex-wrap:nowrap;overflow-x:auto;gap:14px;grid-template-columns:none !important;scroll-snap-type:x proximity;padding:0 14px 8px;scroll-padding-inline:14px;-webkit-overflow-scrolling:touch}
.cardrow-mscroll>*{flex:0 0 auto;width:78%;max-width:300px;scroll-snap-align:start}
}
/* Листать по горизонтали и на ПК (одна строка) */
.cardrow-dscroll{display:flex !important;flex-wrap:nowrap;overflow-x:auto;gap:16px;grid-template-columns:none !important;scroll-snap-type:x proximity;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.cardrow-dscroll>*{flex:0 0 auto;width:280px;scroll-snap-align:start}
.cardrow-dscroll.cw-narrow>*{width:220px}
.cardrow-dscroll.cw-wide>*{width:340px}
.cardrow-dscroll.cw-xwide>*{width:420px}
/* ============================================================
Апдейт 135: расширенный блок «До / после»
============================================================ */
.ba-block.ba-rounded{border-radius:16px}
.ba-block:not(.ba-rounded){border-radius:8px}
/* Метки в углах */
.ba-tag{position:absolute;top:10px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);pointer-events:none;z-index:2}
.ba-tag-before{left:10px}
.ba-tag-after{right:10px}
/* Подписи под фото */
.ba-under{text-align:center;margin-top:8px;color:var(--muted);font-size:13px}
.ba-handle-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:var(--primary);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);font-size:16px}
.ba-block .ba-handle::after{content:none}
/* Вертикальный режим */
.ba-block.ba-vert{cursor:ns-resize}
.ba-block.ba-vert .ba-before{width:100%;height:50%;inset:0 0 auto 0;border-right:0;border-bottom:3px solid #fff}
.ba-block.ba-vert .ba-before img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none}
.ba-block.ba-vert .ba-handle{top:50%;left:0;right:0;bottom:auto;width:100%;height:3px;transform:translateY(-50%)}
/* ============================================================
Апдейт 135: блок «Знаки доверия» — сетка + настройки карточек
============================================================ */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:12px}
.trust-item{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.trust-ico{font-size:26px;line-height:1;flex:0 0 auto}
.trust-title{font-weight:700;margin-bottom:2px}
.trust-text{line-height:1.4}
/* ============================================================
Апдейт 159: режим «На всю ширину экрана» для блока
Блок выходит за пределы контейнера сайта и занимает всю ширину окна.
Приём full-bleed: отрицательные поля до края окна + внутренние отступы обратно.
============================================================ */
.blk.blk-w-screen{
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
width:100vw;
max-width:100vw;
border-radius:0;
}
.blk.blk-w-screen > .blk-inner{
max-width:none;
padding-left:18px;
padding-right:18px;
}
/* Если у блока есть фон — он тоже растягивается на всю ширину, без скруглений */
.blk.blk-w-screen.blk-bg-paper,
.blk.blk-w-screen.blk-bg-tint,
.blk.blk-w-screen.blk-bg-primary,
.blk.blk-w-screen.blk-bg-dark{border-radius:0}
/* Содержимое внутри можно вернуть к ширине сайта — оставляем на усмотрение блока:
по умолчанию контент тянется на всю ширину экрана. */
@media(max-width:560px){
.blk.blk-w-screen > .blk-inner{padding-left:14px;padding-right:14px}
}
/* В зонах системных страниц (товар/каталог/заказ и т.п.) режим тоже работает:
зона ограничена шириной сайта, поэтому блоку нужен выход и оттуда. */
.sys-zone .blk.blk-w-screen,
.ord-zone .blk.blk-w-screen{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* ============================================================
Апдейт 160: блок «Преимущества» — картинки, выравнивание, размеры
============================================================ */
/* Вид карточки */
.features.fcard-soft .feature{background:color-mix(in srgb,var(--primary) 5%,transparent);border-color:transparent}
.features.fcard-plain .feature{background:none;border:0;padding:6px 0}
/* Выравнивание содержимого пункта (блок целиком или отдельный пункт) */
.features.fal-center .feature,.feature.fal-center{text-align:center;align-items:center}
.features.fal-right .feature,.feature.fal-right{text-align:right;align-items:flex-end}
.feature.fal-left{text-align:left;align-items:flex-start}
.feature{display:flex;flex-direction:column;align-items:flex-start}
.features.fal-center .feature .feature-img,.feature.fal-center .feature-img{margin-left:auto;margin-right:auto}
.features.fal-right .feature .feature-img,.feature.fal-right .feature-img{margin-left:auto}
/* Размер значка */
.features.fico-s .feature-ico{font-size:20px}
.features.fico-l .feature-ico{font-size:34px}
.features.fico-xl .feature-ico{font-size:46px}
/* Подложка под значком */
.features.fsh-circle .feature-ico,.features.fsh-square .feature-ico{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.features.fsh-circle .feature-ico{border-radius:50%}
.features.fsh-square .feature-ico{border-radius:14px}
.features.fsh-circle.fico-s .feature-ico,.features.fsh-square.fico-s .feature-ico{width:42px;height:42px}
.features.fsh-circle.fico-l .feature-ico,.features.fsh-square.fico-l .feature-ico{width:68px;height:68px}
.features.fsh-circle.fico-xl .feature-ico,.features.fsh-square.fico-xl .feature-ico{width:84px;height:84px}
/* Картинка вместо значка */
.feature-img{margin-bottom:10px;line-height:0}
.feature-img img{width:64px;height:64px;object-fit:contain;border-radius:12px;display:block}
.features.fico-s .feature-img img{width:44px;height:44px}
.features.fico-l .feature-img img{width:96px;height:96px}
.features.fico-xl .feature-img img{width:128px;height:128px}
.features.fimg-cover .feature-img img{object-fit:cover}
.features.fimg-full .feature-img{width:100%;margin-left:0;margin-right:0}
.features.fimg-full .feature-img img{width:100%;height:auto;max-height:220px;object-fit:cover;border-radius:12px}
.features.fcard-border.fimg-full .feature{padding:0;overflow:hidden}
.features.fcard-border.fimg-full .feature-title,
.features.fcard-border.fimg-full .feature-text{padding-left:16px;padding-right:16px}
.features.fcard-border.fimg-full .feature-text{padding-bottom:16px}
.features.fcard-border.fimg-full .feature-img{margin-bottom:12px}
/* Размеры текста */
.features.ftt-s .feature-title{font-size:.94em}
.features.ftt-l .feature-title{font-size:1.15em}
.features.ftt-xl .feature-title{font-size:1.35em}
.features.ftx-s .feature-text{font-size:.86em}
.features.ftx-l .feature-text{font-size:1.06em}
/* Кликабельный пункт */
a.feature.feature-link{text-decoration:none;color:inherit;transition:.15s}
a.feature.feature-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
/* Палитра эмодзи по категориям (редактор блока) */
.emoji-palette{flex-direction:column;align-items:stretch;max-height:230px;overflow-y:auto}
.emoji-cat-row{display:flex;flex-wrap:wrap;gap:3px;align-items:center;margin-bottom:4px}
.emoji-cat{width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:4px 0 1px}
/* ============================================================
Апдейт 161: блок-конструктор «Секция с карточками»
============================================================ */
.sec-cards{display:block}
.sec-head{margin-bottom:18px}
.sec-head.sh-center{text-align:center}
.sec-head.sh-center .sec-intro{margin-left:auto;margin-right:auto}
.sec-head.sh-right{text-align:right}
.sec-intro{max-width:720px;margin:6px 0 0;line-height:1.6}
.sec-group-title{font-weight:700;font-size:1.05em;margin:18px 0 10px}
/* Сетка карточек — те же модификаторы раскладки, что у остальных блоков */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.sec-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;overflow:hidden}
.sec-body{display:flex;flex-direction:column;gap:6px;width:100%}
.sec-title{font-weight:700;line-height:1.25}
.sec-text{line-height:1.5}
.sec-btn{margin-top:8px;align-self:flex-start}
.sec-badge{position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;z-index:2}
/* Вид карточки */
.sec-grid.sc-soft .sec-card{background:color-mix(in srgb,var(--primary) 5%,transparent);border-color:transparent}
.sec-grid.sc-plain .sec-card{background:none;border:0;padding:4px 0}
.sec-grid.sc-shadow .sec-card{border-color:transparent;box-shadow:0 6px 24px rgba(20,40,25,.10)}
/* Выравнивание содержимого */
.sec-grid.sal-center .sec-card,.sec-card.sal-center{align-items:center;text-align:center}
.sec-grid.sal-center .sec-btn,.sec-card.sal-center .sec-btn{align-self:center}
.sec-grid.sal-right .sec-card,.sec-card.sal-right{align-items:flex-end;text-align:right}
.sec-grid.sal-right .sec-btn,.sec-card.sal-right .sec-btn{align-self:flex-end}
.sec-card.sal-left{align-items:flex-start;text-align:left}
/* Значок и картинка */
.sec-ico{font-size:30px;line-height:1}
.sec-img{line-height:0}
.sec-img img{width:64px;height:64px;object-fit:contain;border-radius:12px;display:block}
.sec-grid.sico-s .sec-ico{font-size:22px}
.sec-grid.sico-s .sec-img img{width:44px;height:44px}
.sec-grid.sico-l .sec-ico{font-size:40px}
.sec-grid.sico-l .sec-img img{width:96px;height:96px}
.sec-grid.sico-xl .sec-ico{font-size:52px}
.sec-grid.sico-xl .sec-img img{width:128px;height:128px}
.sec-grid.simg-cover .sec-img img{object-fit:cover}
/* Картинка сверху во всю ширину карточки */
.sec-grid.simg-top .sec-card{padding:0}
.sec-grid.simg-top .sec-img{width:100%;margin:0}
.sec-grid.simg-top .sec-img img{width:100%;height:auto;max-height:220px;object-fit:cover;border-radius:0}
.sec-grid.simg-top .sec-body{padding:16px}
.sec-grid.simg-top .sec-ico{padding:16px 16px 0}
/* Размер заголовка карточки */
.sec-grid.stt-s .sec-title{font-size:.95em}
.sec-grid.stt-l .sec-title{font-size:1.15em}
.sec-grid.stt-xl .sec-title{font-size:1.35em}
/* Кликабельная карточка */
a.sec-card.sec-card-link{text-decoration:none;color:inherit;transition:.15s}
a.sec-card.sec-card-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
/* Нижняя полоса во всю ширину секции */
.sec-foot{margin-top:22px;padding:22px 24px;border-radius:18px;display:flex;gap:16px;
align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.sec-foot.sf-soft{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.sec-foot.sf-primary{background:var(--primary);color:#fff}
.sec-foot.sf-dark{background:#16211c;color:#fff}
.sec-foot.sf-line{background:none;border-top:1px solid var(--line);border-radius:0;padding-left:0;padding-right:0}
.sec-foot.sf-none{background:none;padding-left:0;padding-right:0}
.sec-foot.sf-primary .btn-primary,.sec-foot.sf-dark .btn-primary{background:#fff;color:var(--primary);border-color:#fff}
.sec-foot-title{font-weight:800;font-size:1.15em}
.sec-foot-sub{margin-top:4px;line-height:1.5;opacity:.92}
.sec-foot.sfa-left{justify-content:flex-start;text-align:left}
.sec-foot.sfa-between{justify-content:space-between;text-align:left}
.sec-foot.sfa-between .sec-foot-text{flex:1;min-width:220px}
@media(max-width:560px){
.sec-foot{padding:18px 16px;flex-direction:column;text-align:center}
.sec-foot.sfa-between,.sec-foot.sfa-left{text-align:center;justify-content:center}
}
/* ============================================================
Апдейт 162: выравнивание заголовка и описания внутри карточек
ВАЖНО: карточки — flex-колонки с align-items:flex-start, из-за чего
текстовые блоки сжимались по содержимому и text-align не был виден.
Даём им полную ширину — тогда выравнивание реально работает.
============================================================ */
.feature-title,.feature-text,.sec-title,.sec-text{width:100%}
.feature-ico,.feature-img,.sec-ico,.sec-img{flex:none}
/* Преимущества: отдельное выравнивание заголовка пункта */
.features.fta-left .feature-title{text-align:left}
.features.fta-center .feature-title{text-align:center}
.features.fta-right .feature-title{text-align:right}
/* Преимущества: отдельное выравнивание описания */
.features.fxa-left .feature-text{text-align:left}
.features.fxa-center .feature-text{text-align:center}
.features.fxa-right .feature-text{text-align:right}
.features.fxa-justify .feature-text{text-align:justify}
/* Секция с карточками: заголовок карточки */
.sec-grid.sta-left .sec-title{text-align:left}
.sec-grid.sta-center .sec-title{text-align:center}
.sec-grid.sta-right .sec-title{text-align:right}
/* Секция с карточками: описание */
.sec-grid.sxa-left .sec-text{text-align:left}
.sec-grid.sxa-center .sec-text{text-align:center}
.sec-grid.sxa-right .sec-text{text-align:right}
.sec-grid.sxa-justify .sec-text{text-align:justify}
/* ============================================================
Апдейт 163: «Картинка + текст» — высота картинки и обрезка
============================================================ */
/* Соотношение колонок */
.split-block.scols-40-60{grid-template-columns:40fr 60fr}
.split-block.scols-60-40{grid-template-columns:60fr 40fr}
.split-block.scols-33-67{grid-template-columns:33fr 67fr}
.split-block.scols-67-33{grid-template-columns:67fr 33fr}
/* Текст по вертикали */
.split-block.sva-start{align-items:start}
.split-block.sva-end{align-items:end}
/* ГЛАВНОЕ: подгонка картинки под высоту текста (обрезка сверху/снизу).
Колонки растягиваются на одинаковую высоту, картинка заполняет свою колонку. */
.split-block.simg-match{align-items:stretch}
/* Картинку выводим из потока (absolute) — иначе её собственная высота
растягивает строку, и обрезать становится нечего. Высоту задаёт только текст. */
.split-block.simg-match .split-img{position:relative;height:auto;min-height:var(--split-img-min,140px);border-radius:16px;overflow:hidden}
.split-block.simg-match .split-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.split-block.simg-match .split-text{display:flex;flex-direction:column;justify-content:center}
.split-block.simg-match.sva-start .split-text{justify-content:flex-start}
.split-block.simg-match.sva-end .split-text{justify-content:flex-end}
/* Фиксированная высота в пикселях */
.split-block.simg-px .split-img img{width:100%;height:var(--split-img-h,320px);object-fit:cover;border-radius:16px}
/* Пропорции */
.split-block.simg-16-9 .split-img img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:16px}
.split-block.simg-3-2 .split-img img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:16px}
.split-block.simg-4-3 .split-img img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:16px}
.split-block.simg-1-1 .split-img img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:16px}
/* Что показывать при обрезке */
.split-block.sipos-top .split-img img{object-position:top}
.split-block.sipos-bottom .split-img img{object-position:bottom}
.split-block.sipos-left .split-img img{object-position:left}
.split-block.sipos-right .split-img img{object-position:right}
/* Показывать целиком (не обрезать) */
.split-block.sifit-contain .split-img img{object-fit:contain;background:#f3f5ef}
/* На телефоне колонки складываются — подгонка по высоте не нужна */
@media(max-width:680px){
.split-block.scols-40-60,.split-block.scols-60-40,.split-block.scols-33-67,.split-block.scols-67-33{grid-template-columns:1fr}
.split-block.simg-match .split-img{position:static;height:auto;min-height:0}
.split-block.simg-match .split-img img{position:static;height:auto;max-height:60vh;border-radius:16px}
}
/* Апдейт 165: заголовок и описание ряда карточек внутри секции */
.sec-group-head{margin:20px 0 10px}
.sec-group-head:first-child{margin-top:4px}
.sec-group-title{margin:0}
.sec-group-note{margin-top:2px;line-height:1.45}
.sec-head.sh-center ~ .sec-group-head{text-align:center}
.sec-head.sh-right ~ .sec-group-head{text-align:right}
/* ============================================================
Апдейт 166: авто-подстройка карточек под ширину экрана
Карточки сами переносятся на новую строку и занимают доступное место.
Листание (если включено) остаётся запасным вариантом на узких экранах.
============================================================ */
.cardrow-fit{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(var(--fit-min,240px),100%),1fr)) !important;gap:16px;overflow:visible !important;flex-wrap:wrap}
/* карточки внутри подстройки не держат свою фикс. ширину — тянутся на всю ячейку */
.cardrow-fit>*{width:auto !important;max-width:none !important;flex:initial !important}
.cardrow-fit-180{--fit-min:180px}
.cardrow-fit-220{--fit-min:220px}
.cardrow-fit-260{--fit-min:260px}
.cardrow-fit-300{--fit-min:300px}
.cardrow-fit-340{--fit-min:340px}
/* Если карточка не влезает даже в минимум — на узком экране одна в ряд */
@media(max-width:420px){.cardrow-fit{grid-template-columns:1fr !important}}
/* Подстройка ГЛАВНЕЕ листания: на обычном экране карточки переносятся,
а лента включается только на телефоне, где ряд действительно не влезает. */
.cardrow-fit.cardrow-dscroll{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(var(--fit-min,240px),100%),1fr)) !important;flex-wrap:wrap;overflow:visible !important;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.cardrow-fit.cardrow-dscroll>*{width:auto !important;max-width:none !important;flex:initial !important}
/* стрелки листания не нужны, когда работает подстройка */
.prod-carousel-wrap:has(.cardrow-fit) .carousel-arrow{display:none}
@media(max-width:760px){
.cardrow-fit.cardrow-mscroll{display:flex !important;flex-wrap:nowrap;grid-template-columns:none !important;overflow-x:auto !important}
.cardrow-fit.cardrow-mscroll>*{flex:0 0 auto !important;width:78% !important;max-width:300px !important}
}
/* ============================================================
Апдейт 168: расположение картинки/значка внутри карточки
(сверху — как было, слева или справа от текста)
============================================================ */
.feature-body{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0}
/* --- Секция с карточками --- */
.sec-grid.splace-left .sec-card,.sec-grid.splace-right .sec-card{flex-direction:row;align-items:flex-start;gap:14px}
.sec-grid.splace-right .sec-card{flex-direction:row-reverse}
.sec-grid.splace-left .sec-img,.sec-grid.splace-right .sec-img,
.sec-grid.splace-left .sec-ico,.sec-grid.splace-right .sec-ico{flex:none}
.sec-grid.splace-left .sec-body,.sec-grid.splace-right .sec-body{flex:1;min-width:0}
.sec-grid.splace-right .sec-body{text-align:right}
/* при боковом размещении картинка не растягивается на всю ширину */
.sec-grid.splace-left.simg-top .sec-card,.sec-grid.splace-right.simg-top .sec-card{padding:18px}
.sec-grid.splace-left.simg-top .sec-img,.sec-grid.splace-right.simg-top .sec-img{width:auto}
.sec-grid.splace-left.simg-top .sec-img img,.sec-grid.splace-right.simg-top .sec-img img{width:96px;height:96px;border-radius:12px}
/* --- Преимущества --- */
.features.fplace-left .feature,.features.fplace-right .feature{flex-direction:row;align-items:flex-start;gap:14px}
.features.fplace-right .feature{flex-direction:row-reverse}
.features.fplace-left .feature-body,.features.fplace-right .feature-body{flex:1;min-width:0}
.features.fplace-right .feature-body{text-align:right}
.features.fplace-left.fimg-full .feature{padding:16px}
.features.fplace-left.fimg-full .feature-img,.features.fplace-right.fimg-full .feature-img{width:auto}
.features.fplace-left.fimg-full .feature-img img,.features.fplace-right.fimg-full .feature-img img{width:96px;height:96px;border-radius:12px}
.features.fplace-left .feature-img,.features.fplace-right .feature-img{margin-bottom:0}
/* На узком экране боковое размещение складывается вертикально */
@media(max-width:480px){
.sec-grid.splace-left .sec-card,.sec-grid.splace-right .sec-card,
.features.fplace-left .feature,.features.fplace-right .feature{flex-direction:column;align-items:flex-start}
.sec-grid.splace-right .sec-body,.features.fplace-right .feature-body{text-align:left}
}
/* ============================================================
Апдейт 169: блок «Группы продуктов (вкладками)»
============================================================ */
.ptabs-block{display:block}
.ptabs-block .tabs-nav{margin-bottom:16px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.ptabs-block .tab-btn{white-space:nowrap}
.ptab-inner{display:block}
.ptab-media{margin-bottom:14px}
.ptab-media img{width:100%;max-height:280px;object-fit:cover;border-radius:16px;display:block}
.ptab-note{margin-top:8px;line-height:1.5}
/* Картинка сбоку от карточек */
.ptab-inner.ptab-side{display:grid;grid-template-columns:minmax(220px,32%) 1fr;gap:22px;align-items:start}
.ptab-inner.ptab-right{grid-template-columns:1fr minmax(220px,32%)}
.ptab-inner.ptab-right .ptab-media{order:2}
.ptab-inner.ptab-side .ptab-media{margin-bottom:0}
.ptab-inner.ptab-side .ptab-media img{max-height:420px}
.ptab-cards{min-width:0}
.ptab-foot{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ptab-cnt{margin-left:auto}
@media(max-width:680px){
.ptab-inner.ptab-side,.ptab-inner.ptab-right{grid-template-columns:1fr}
.ptab-inner.ptab-right .ptab-media{order:0}
.ptab-media img{max-height:220px}
.ptab-cnt{margin-left:0}
}
/* ============================================================
Апдейт 170: блок «Группы продуктов (плашками)» — вся плашка кликабельна
============================================================ */
.gcards-block{display:block}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;
background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.15s}
.gc-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 45%,var(--line));box-shadow:0 10px 28px rgba(20,40,25,.10)}
.gc-img{line-height:0;background:#f3f5ef}
.gc-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gc-body{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.gc-title{font-weight:700;font-size:1.05em;line-height:1.25}
.gc-sub{line-height:1.45}
.gc-cnt{margin-top:2px}
.gc-foot{margin-top:18px;text-align:center}
/* Пропорции картинки */
.gc-grid.grat-16-9 .gc-img img{aspect-ratio:16/9}
.gc-grid.grat-1-1 .gc-img img{aspect-ratio:1/1}
.gc-grid.grat-3-4 .gc-img img{aspect-ratio:3/4}
/* Вид плашки */
.gc-grid.gc-soft .gc-card{background:color-mix(in srgb,var(--primary) 5%,transparent);border-color:transparent}
.gc-grid.gc-shadow .gc-card{border-color:transparent;box-shadow:0 6px 24px rgba(20,40,25,.10)}
.gc-grid.gc-plain .gc-card{background:none;border:0}
.gc-grid.gc-plain .gc-img img{border-radius:14px}
/* Выравнивание текста */
.gc-grid.gal-center .gc-body{text-align:center;align-items:center}
.gc-grid.gal-right .gc-body{text-align:right;align-items:flex-end}
/* Картинка слева от текста */
.gc-grid.gplace-left .gc-card{flex-direction:row;align-items:stretch}
.gc-grid.gplace-left .gc-img{flex:0 0 40%}
.gc-grid.gplace-left .gc-img img{height:100%;aspect-ratio:auto}
.gc-grid.gplace-left .gc-body{flex:1;justify-content:center;min-width:0}
/* Картинка фоном, текст поверх */
.gc-grid.gplace-bg .gc-card{min-height:210px;justify-content:flex-end}
.gc-grid.gplace-bg .gc-img{position:absolute;inset:0;z-index:0}
.gc-grid.gplace-bg .gc-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.gc-grid.gplace-bg .gc-card::after{content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72))}
.gc-grid.gplace-bg .gc-body{position:relative;z-index:2;color:#fff;padding:16px}
.gc-grid.gplace-bg .gc-sub,.gc-grid.gplace-bg .gc-cnt{color:rgba(255,255,255,.85)}
@media(max-width:480px){
.gc-grid.gplace-left .gc-card{flex-direction:column}
.gc-grid.gplace-left .gc-img{flex:none}
.gc-grid.gplace-left .gc-img img{height:auto;aspect-ratio:4/3}
}
/* Апдейт 173: ряды в плашках групп + фото целиком */
.gc-grid.gc-rows{display:grid !important;grid-template-columns:repeat(var(--gc-cols,3),minmax(0,1fr)) !important;gap:16px}
.gc-grid.gc-rows>*{width:auto !important;max-width:none !important;flex:initial !important}
@media(max-width:900px){.gc-grid.gc-rows{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:560px){.gc-grid.gc-rows{grid-template-columns:1fr !important}}
/* Фото целиком — не обрезается */
.gc-grid.gimg-contain .gc-img{background:#f3f5ef;display:flex;align-items:center;justify-content:center}
.gc-grid.gimg-contain .gc-img img{object-fit:contain;width:100%;height:100%}
.gc-grid.gimg-contain.gplace-left .gc-img img{height:100%}
/* Апдейт 174: выравнивание высоты плашек — картинка занимает остаток под текстом */
.gc-grid.gc-eq{align-items:stretch}
.gc-grid.gc-eq .gc-card{height:100%;min-height:0}
/* Текст занимает столько, сколько нужно, и ВСЕГДА переносится.
Картинка забирает остаток и может сжиматься — иначе она выдавливала текст за плашку. */
.gc-grid.gc-eq .gc-body{flex:0 0 auto;min-width:0;min-height:0}
.gc-grid.gc-eq .gc-title,.gc-grid.gc-eq .gc-sub,.gc-grid.gc-eq .gc-cnt{
overflow-wrap:break-word;word-break:break-word;white-space:normal}
.gc-grid.gc-eq .gc-img{flex:1 1 0;min-height:0;height:auto;overflow:hidden}
.gc-grid.gc-eq .gc-img img{width:100%;height:100%;min-height:var(--gc-imgmin,120px);aspect-ratio:auto;object-fit:cover;display:block}
.gc-grid.gc-eq.gimg-contain .gc-img img{object-fit:contain}
/* «Во всех рядах» — все ряды одинаковой высоты; картинке разрешаем сжиматься сильнее */
.gc-grid.gc-eq-all{grid-auto-rows:1fr}
.gc-grid.gc-eq-all .gc-img img{min-height:0}
/* картинка слева: выравниваем по высоте карточки */
.gc-grid.gc-eq.gplace-left .gc-img{flex:0 0 40%;min-height:0}
.gc-grid.gc-eq.gplace-left .gc-img img{height:100%}
@media(max-width:560px){.gc-grid.gc-eq .gc-img{min-height:0}.gc-grid.gc-eq .gc-img img{aspect-ratio:4/3;height:auto}}
/* Апдейт 176: «картинка слева» — карточка это РЯД, тексту нужно разрешить сжиматься,
иначе он не переносится и вылезает за правый край (правило gc-eq выше рассчитано на колонку). */
.gc-grid.gc-eq.gplace-left .gc-card{flex-direction:row;align-items:stretch}
.gc-grid.gc-eq.gplace-left .gc-body{flex:1 1 auto !important;min-width:0 !important;justify-content:center}
.gc-grid.gc-eq.gplace-left .gc-img{flex:0 0 40% !important;min-width:0;min-height:0}
.gc-grid.gc-eq.gplace-left .gc-img img{height:100%;min-height:0;object-fit:cover}
.gc-grid.gc-eq.gplace-left.gimg-contain .gc-img img{object-fit:contain}
/* текст в карточке всегда переносится по словам */
.gc-card .gc-title,.gc-card .gc-sub,.gc-card .gc-cnt{overflow-wrap:break-word;word-break:break-word;white-space:normal;min-width:0}
.gc-body{min-width:0}
@media(max-width:480px){
.gc-grid.gc-eq.gplace-left .gc-card{flex-direction:column}
.gc-grid.gc-eq.gplace-left .gc-img{flex:none !important}
.gc-grid.gc-eq.gplace-left .gc-img img{aspect-ratio:4/3;height:auto}
}
/* Апдейт 177: картинка слева не должна задавать высоту плашки.
Тот же приём, что в блоке «Картинка + текст»: выводим её из потока —
тогда высоту определяет ТОЛЬКО текст, а картинка заполняет её и обрезается. */
.gc-grid.gc-eq.gplace-left .gc-img{position:relative;height:auto;min-height:var(--gc-imgmin,120px);overflow:hidden}
.gc-grid.gc-eq.gplace-left .gc-img img{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.gc-grid.gc-eq.gplace-left.gimg-contain .gc-img img{object-fit:contain}
/* то же самое для картинки сверху: не даём ей раздувать плашку */
.gc-grid.gc-eq:not(.gplace-left):not(.gplace-bg) .gc-img{position:relative;min-height:var(--gc-imgmin,120px);overflow:hidden}
.gc-grid.gc-eq:not(.gplace-left):not(.gplace-bg) .gc-img img{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:cover}
@media(max-width:480px){
.gc-grid.gc-eq.gplace-left .gc-img,
.gc-grid.gc-eq:not(.gplace-left):not(.gplace-bg) .gc-img{position:static;min-height:0}
.gc-grid.gc-eq.gplace-left .gc-img img,
.gc-grid.gc-eq:not(.gplace-left):not(.gplace-bg) .gc-img img{position:static;height:auto;aspect-ratio:4/3}
}
/* Апдейт 178: «Знаки доверия» — картинки, ряды, выравнивание, виды карточек */
.trust-item{position:relative}
.trust-body{min-width:0;flex:1}
.trust-img{line-height:0;flex:none}
.trust-img img{width:48px;height:48px;object-fit:contain;border-radius:10px;display:block}
.trust-grid.tico-s .trust-ico{font-size:20px}.trust-grid.tico-s .trust-img img{width:36px;height:36px}
.trust-grid.tico-l .trust-ico{font-size:34px}.trust-grid.tico-l .trust-img img{width:68px;height:68px}
.trust-grid.tico-xl .trust-ico{font-size:44px}.trust-grid.tico-xl .trust-img img{width:88px;height:88px}
/* подложка под значком */
.trust-grid.tsh-circle .trust-ico,.trust-grid.tsh-square .trust-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.trust-grid.tsh-circle .trust-ico{border-radius:50%}
.trust-grid.tsh-square .trust-ico{border-radius:13px}
/* положение значка */
.trust-grid.tplace-top .trust-item{flex-direction:column;align-items:flex-start}
.trust-grid.tplace-right .trust-item{flex-direction:row-reverse}
/* выравнивание */
.trust-grid.tal-center .trust-item,.trust-item.tal-center{align-items:center;text-align:center}
.trust-grid.tal-center.tplace-top .trust-item{align-items:center}
.trust-grid.tal-right .trust-item,.trust-item.tal-right{text-align:right}
.trust-grid.tta-left .trust-title{text-align:left}.trust-grid.tta-center .trust-title{text-align:center}.trust-grid.tta-right .trust-title{text-align:right}
.trust-grid.txa-left .trust-text{text-align:left}.trust-grid.txa-center .trust-text{text-align:center}
.trust-grid.txa-right .trust-text{text-align:right}.trust-grid.txa-justify .trust-text{text-align:justify}
/* вид карточки */
.trust-grid.tr-soft .trust-item{background:color-mix(in srgb,var(--primary) 5%,transparent);border-color:transparent}
.trust-grid.tr-shadow .trust-item{border-color:transparent;box-shadow:0 6px 24px rgba(20,40,25,.10)}
.trust-grid.tr-plain .trust-item{background:none;border:0;padding:6px 0}
/* ряды */
.trust-grid.tr-rows{display:grid !important;grid-template-columns:repeat(var(--tr-cols,3),minmax(0,1fr)) !important;gap:16px}
@media(max-width:900px){.trust-grid.tr-rows{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:560px){.trust-grid.tr-rows{grid-template-columns:1fr !important}}
/* кликабельная карточка */
a.trust-item.trust-link{text-decoration:none;color:inherit;transition:.15s}
a.trust-item.trust-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.trust-title,.trust-text{overflow-wrap:break-word;word-break:break-word}
/* Апдейт 179: две кнопки под плашками (заявка сверху, все продукты снизу) */
.gc-btns{display:flex;gap:10px}
.gc-btns.gcb-col{flex-direction:column;align-items:center}
.gc-btns.gcb-row{flex-direction:row;flex-wrap:wrap;justify-content:center}
.sec-foot .gc-btns{flex:none}
.sec-foot.sfa-left .gc-btns,.sec-foot.sfa-between .gc-btns{align-items:flex-start}
.gc-btns .btn{white-space:nowrap}
@media(max-width:480px){.gc-btns{flex-direction:column;width:100%}.gc-btns .btn{width:100%}}
/* Апдейт 180: выравнивание заголовка блока «Знаки доверия» и единый размер заголовков */
.trust-block .block-title.th-center{text-align:center}
.trust-block .block-title.th-right{text-align:right}
.trust-block .block-title.th-left{text-align:left}
/* Апдейт 181: блок «Этапы работы» — картинки, ряды, выравнивание, виды карточек */
.steps-list .step-item{position:relative}
.step-img{line-height:0;flex:none}
.step-img img{width:64px;height:64px;object-fit:cover;border-radius:12px;display:block}
.steps-list.stnum-s .step-img img{width:44px;height:44px}
.steps-list.stnum-l .step-img img{width:88px;height:88px}
.steps-list.stnum-xl .step-img img{width:112px;height:112px}
.steps-list.stnum-s .step-num{width:34px;height:34px;font-size:15px}
.steps-list.stnum-l .step-num{width:56px;height:56px;font-size:22px}
.steps-list.stnum-xl .step-num{width:70px;height:70px;font-size:28px}
/* вид цифры */
.steps-list.stsh-square .step-num{border-radius:14px}
.steps-list.stsh-plain .step-num{background:none;color:var(--primary);width:auto;height:auto;box-shadow:none;font-size:1.6em;font-weight:800}
/* вид карточки шага */
.steps-list.st-border .step-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.steps-list.st-soft .step-item{background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:14px;padding:16px}
.steps-list.st-shadow .step-item{background:var(--surface);border-radius:14px;padding:16px;box-shadow:0 6px 24px rgba(20,40,25,.10)}
/* выравнивание */
.steps-list.stal-center .step-item,.step-item.stal-center{text-align:center;align-items:center}
.steps-list.stal-right .step-item,.step-item.stal-right{text-align:right;align-items:flex-end}
.steps-list.stal-center.num-top .step-item,.steps-list.stal-right.num-top .step-item{flex-direction:column}
.steps-list.stta-left .step-title{text-align:left}.steps-list.stta-center .step-title{text-align:center}.steps-list.stta-right .step-title{text-align:right}
.steps-list.stxa-left .step-text{text-align:left}.steps-list.stxa-center .step-text{text-align:center}
.steps-list.stxa-right .step-text{text-align:right}.steps-list.stxa-justify .step-text{text-align:justify}
.step-title,.step-text{overflow-wrap:break-word;word-break:break-word;min-width:0}
.step-body{min-width:0;flex:1}
/* ряды (горизонтальный вид) */
.steps-list.st-rows{display:grid !important;grid-template-columns:repeat(var(--st-cols,3),minmax(0,1fr)) !important;gap:16px}
@media(max-width:900px){.steps-list.st-rows{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:560px){.steps-list.st-rows{grid-template-columns:1fr !important}}
/* кликабельный шаг */
a.step-item.step-link{text-decoration:none;color:inherit;transition:.15s}
a.step-item.step-link:hover{transform:translateY(-2px)}
/* Апдейт 182: чек-лист — столбцы, маркеры, блок «что не входит» */
.ck-intro{margin:-2px 0 12px;line-height:1.6}
.ck-intro.th-center,.ck-no-title.th-center{text-align:center}
.ck-intro.th-right,.ck-no-title.th-right{text-align:right}
.checklist li{display:flex;align-items:flex-start;gap:10px;break-inside:avoid}
.ck-body{min-width:0;display:block}
.ck-note{display:block;margin-top:2px;line-height:1.4}
/* столбцы: раскладываем колонками, разбивается автоматически */
.checklist.ck-auto{columns:var(--ck-min,260px) auto;column-gap:28px}
.checklist.ck-cols-2{columns:2;column-gap:28px}
.checklist.ck-cols-3{columns:3;column-gap:24px}
.checklist.ck-cols-4{columns:4;column-gap:20px}
@media(max-width:900px){.checklist.ck-cols-3,.checklist.ck-cols-4{columns:2}}
@media(max-width:560px){.checklist.ck-auto,.checklist.ck-cols-2,.checklist.ck-cols-3,.checklist.ck-cols-4{columns:1}}
/* маркер */
.ck-ic{flex:none;line-height:1.4}
.ck-img img{width:20px;height:20px;object-fit:contain;display:block;margin-top:2px}
.checklist.ck-round .ck-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-size:14px;margin-top:1px}
.checklist.ck-no.ck-round .ck-ic{background:color-mix(in srgb,#c0392b 12%,transparent);color:#c0392b}
.checklist.ckm-green .ck-ic{color:#2e8b57}
.checklist.ckm-ink .ck-ic{color:var(--ink)}
.checklist.ckm-muted .ck-ic{color:var(--muted)}
/* нумерация */
.checklist.ck-num{counter-reset:ckn;list-style:none}
.checklist.ck-num li{counter-increment:ckn}
.checklist.ck-num li::before{content:counter(ckn) '.';flex:none;font-weight:700;color:var(--primary);min-width:1.4em}
/* размеры и разделители */
.checklist.ck-s{font-size:.92em}
.checklist.ck-l{font-size:1.08em}
.checklist.ck-div li{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line-2)}
.checklist.ck-div li:last-child{border-bottom:0}
/* блок «что не входит» */
.ck-no-title{font-size:1.15em;font-weight:700;margin:20px 0 10px}
.checklist.ck-no .ck-ic{color:#c0392b}
.checklist.ck-no .ck-body{opacity:.85}
/* Апдейт 183: столбцы чек-листа не работали — список был flex-контейнером,
а многоколоночная раскладка на flex не применяется. Переключаем на блочный режим. */
.checklist.ck-auto,.checklist.ck-cols-2,.checklist.ck-cols-3,.checklist.ck-cols-4{
display:block !important;flex-direction:unset !important;gap:0 !important}
/* отступы между пунктами возвращаем вручную (flex-gap в блочном режиме не действует) */
.checklist.ck-auto>li,.checklist.ck-cols-2>li,.checklist.ck-cols-3>li,.checklist.ck-cols-4>li{
margin-bottom:10px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.checklist.ck-auto.ck-div>li,.checklist.ck-cols-2.ck-div>li,.checklist.ck-cols-3.ck-div>li,.checklist.ck-cols-4.ck-div>li{
padding-bottom:8px;margin-bottom:8px}
.checklist.ck-auto>li:last-child,.checklist.ck-cols-2>li:last-child,
.checklist.ck-cols-3>li:last-child,.checklist.ck-cols-4>li:last-child{margin-bottom:0}
/* Апдейт 184: свои цвета маркеров чек-листа + подпись под «Что не входит» */
.checklist.ck-custom .ck-ic{color:var(--ck-mc,var(--primary))}
.checklist.ck-custom.ck-round .ck-ic{background:var(--ck-mbg,color-mix(in srgb,var(--primary) 14%,transparent));color:var(--ck-mc,var(--primary))}
.checklist.ck-custom.ck-num li::before{color:var(--ck-mc,var(--primary))}
.ck-no-intro{margin:-4px 0 10px}
/* Апдейт 185: выравнивание пунктов чек-листа.
Пункт — flex-строка, поэтому одного text-align мало: нужен justify-content. */
.checklist.cka-center>li{justify-content:center;text-align:center}
.checklist.cka-right>li{justify-content:flex-end;text-align:right}
.checklist.cka-center .ck-body,.checklist.cka-right .ck-body{flex:0 1 auto}
/* общее выравнивание блока (оформление → выравнивание) тоже должно двигать пункты */
.blk-align-center .checklist>li{justify-content:center;text-align:center}
.blk-align-right .checklist>li{justify-content:flex-end;text-align:right}
.blk-align-center .checklist .ck-body,.blk-align-right .checklist .ck-body{flex:0 1 auto}
/* но если задано своё выравнивание пунктов — оно главнее общего */
.blk-align-center .checklist.cka-left>li,.blk-align-right .checklist.cka-left>li{justify-content:flex-start;text-align:left}
/* в многоколоночном режиме пункты — блочные, центрируем содержимое строки */
.checklist.ck-auto.cka-center>li,.checklist.ck-cols-2.cka-center>li,
.checklist.ck-cols-3.cka-center>li,.checklist.ck-cols-4.cka-center>li{display:flex;justify-content:center}
/* Апдейт 186: «список по центру, пункты в одну линию» — как таблица.
Сам список centered по ширине содержимого, а маркеры выстроены в общую вертикаль. */
.checklist.cka-block{width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.checklist.cka-block>li{justify-content:flex-start;text-align:left}
.checklist.cka-block .ck-body{flex:1 1 auto}
/* в многоколоночном режиме центрируем сам блок колонок */
.checklist.cka-block.ck-auto,.checklist.cka-block.ck-cols-2,
.checklist.cka-block.ck-cols-3,.checklist.cka-block.ck-cols-4{width:100%}
/* «каждый пункт по центру» для блока «не входит» — на случай, если раньше не срабатывало */
.checklist.ck-no.cka-center>li{justify-content:center;text-align:center}
.checklist.ck-no.cka-right>li{justify-content:flex-end;text-align:right}
.checklist.ck-no.cka-block{margin-left:auto;margin-right:auto}
/* Апдейт 187: табличный режим со столбцами — центрируем ВСЮ таблицу целиком.
Многоколоночная раскладка (columns) всегда занимает всю ширину, поэтому
в этом режиме переключаемся на сетку по содержимому и центрируем её. */
.checklist.cka-block.ck-cols-2,.checklist.cka-block.ck-cols-3,
.checklist.cka-block.ck-cols-4,.checklist.cka-block.ck-auto{
display:grid !important;
grid-auto-flow:column;
grid-template-rows:repeat(var(--ck-rows,4),auto);
grid-auto-columns:max-content;
justify-content:center;
width:-moz-fit-content;width:fit-content;
max-width:100%;
margin-left:auto;margin-right:auto;
column-gap:36px;row-gap:10px;
columns:auto !important;
}
.checklist.cka-block.ck-cols-2>li,.checklist.cka-block.ck-cols-3>li,
.checklist.cka-block.ck-cols-4>li,.checklist.cka-block.ck-auto>li{
margin-bottom:0;justify-content:flex-start;text-align:left}
/* на узких экранах — в одну колонку, по-прежнему по центру */
@media(max-width:900px){
.checklist.cka-block.ck-cols-3,.checklist.cka-block.ck-cols-4{
grid-template-rows:repeat(var(--ck-rows2,999),auto)}
}
@media(max-width:700px){
.checklist.cka-block.ck-cols-2,.checklist.cka-block.ck-cols-3,
.checklist.cka-block.ck-cols-4,.checklist.cka-block.ck-auto{
grid-auto-flow:row;grid-template-rows:none;grid-auto-columns:auto;width:fit-content}
}
/* Апдейт 188: отступ между столбцами чек-листа (по умолчанию чуть больше) */
.checklist.ck-auto,.checklist.ck-cols-2,.checklist.ck-cols-3,.checklist.ck-cols-4{column-gap:44px}
.checklist.cka-block.ck-cols-2,.checklist.cka-block.ck-cols-3,
.checklist.cka-block.ck-cols-4,.checklist.cka-block.ck-auto{column-gap:44px}
.checklist.ckg-s{column-gap:26px !important}
.checklist.ckg-l{column-gap:64px !important}
.checklist.ckg-xl{column-gap:88px !important}
@media(max-width:700px){.checklist{column-gap:24px !important}}
/* Апдейт 189: блок «Что не входит» — столбцы применяются наравне с основным списком.
Прописываем явно с той же специфичностью, чтобы правила ck-no не перебивали раскладку. */
.checklist.ck-no.ck-auto,.checklist.ck-no.ck-cols-2,
.checklist.ck-no.ck-cols-3,.checklist.ck-no.ck-cols-4{
display:block !important;flex-direction:unset !important;gap:0 !important;column-gap:44px}
.checklist.ck-no.ck-auto{columns:var(--ck-min,260px) auto}
.checklist.ck-no.ck-cols-2{columns:2}
.checklist.ck-no.ck-cols-3{columns:3}
.checklist.ck-no.ck-cols-4{columns:4}
.checklist.ck-no.ck-auto>li,.checklist.ck-no.ck-cols-2>li,
.checklist.ck-no.ck-cols-3>li,.checklist.ck-no.ck-cols-4>li{
margin-bottom:10px;break-inside:avoid;-webkit-column-break-inside:avoid}
/* табличный режим (по центру) — сетка по содержимому */
.checklist.ck-no.cka-block.ck-cols-2,.checklist.ck-no.cka-block.ck-cols-3,
.checklist.ck-no.cka-block.ck-cols-4,.checklist.ck-no.cka-block.ck-auto{
display:grid !important;columns:auto !important;
grid-auto-flow:column;grid-template-rows:repeat(var(--ck-rows,2),auto);
grid-auto-columns:max-content;justify-content:center;
width:-moz-fit-content;width:fit-content;max-width:100%;
margin-left:auto;margin-right:auto;row-gap:10px}
.checklist.ck-no.cka-block>li{margin-bottom:0}
/* отступы-модификаторы работают и здесь */
.checklist.ck-no.ckg-s{column-gap:26px !important}
.checklist.ck-no.ckg-l{column-gap:64px !important}
.checklist.ck-no.ckg-xl{column-gap:88px !important}
@media(max-width:700px){
.checklist.ck-no.ck-auto,.checklist.ck-no.ck-cols-2,
.checklist.ck-no.ck-cols-3,.checklist.ck-no.ck-cols-4{columns:1}
.checklist.ck-no.cka-block.ck-cols-2,.checklist.ck-no.cka-block.ck-cols-3,
.checklist.ck-no.cka-block.ck-cols-4,.checklist.ck-no.cka-block.ck-auto{
grid-auto-flow:row;grid-template-rows:none;grid-auto-columns:auto}
}
/* Апдейт 191: выравнивание заголовка блока — общее правило.
Раньше стиль был прописан точечно (знаки доверия, чек-лист), поэтому
в «Этапах работы» и других блоках класс проставлялся, но ничего не менял. */
.th-left{text-align:left}
.th-center{text-align:center}
.th-right{text-align:right}
/* если заголовок по центру — центрируем и подпись под ним */
.th-center + .sec-intro,.th-center + .ck-intro{margin-left:auto;margin-right:auto;text-align:center}
/* Апдейт 192: показ страницы заявки и пути посетителя в админке */
.sub-track{margin:6px 0 4px;font-size:13px}
.sub-page{color:var(--muted)}
.sub-page a{color:var(--primary);text-decoration:none;word-break:break-all}
.sub-page a:hover{text-decoration:underline}
.sub-path{margin-top:4px}
.sub-path>summary{cursor:pointer;color:var(--muted);user-select:none;list-style:none}
.sub-path>summary::-webkit-details-marker{display:none}
.sub-path>summary:hover{color:var(--primary)}
.sub-path-val{margin-top:4px;padding:8px 10px;background:var(--bg);border-radius:8px;
font-size:12px;line-height:1.6;color:var(--muted);word-break:break-word}
.fs-page{margin-top:4px;font-size:11px}
.fs-page a{color:var(--primary);text-decoration:none;word-break:break-all}
.fs-path{margin-top:2px;font-size:11px}
.fs-path>summary{cursor:pointer;list-style:none}
.fs-path>summary::-webkit-details-marker{display:none}
/* ============================================================
Апдейт 194
1) Чек-лист не должен выходить за настроенную ширину блока
2) «Листать на ПК» главнее авто-подстройки (не переносить на 2-й ряд)
3) Индикация количества фото «1 / 3» в углу изображения
============================================================ */
/* --- 1. Чек-лист: жёсткое ограничение по ширине контейнера ---
Причина бага: в табличном режиме (item_align = «список по центру»)
дорожки сетки задавались как max-content — они игнорируют max-width
родителя и вылезают за .blk-inner (blk-w-narrow/normal/wide).
Плюс длинные слова/ссылки не переносились в многоколоночном режиме. */
.blk > .blk-inner{min-width:0}
.checklist{max-width:100%}
.checklist > li{min-width:0;max-width:100%}
.ck-body{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.ck-note{overflow-wrap:anywhere}
/* табличный режим: дорожки могут сжиматься, а не растягивать список наружу */
.checklist.cka-block.ck-cols-2,.checklist.cka-block.ck-cols-3,
.checklist.cka-block.ck-cols-4,.checklist.cka-block.ck-auto,
.checklist.ck-no.cka-block.ck-cols-2,.checklist.ck-no.cka-block.ck-cols-3,
.checklist.ck-no.cka-block.ck-cols-4,.checklist.ck-no.cka-block.ck-auto{
grid-auto-columns:minmax(0,max-content) !important;
max-width:100% !important;
overflow-wrap:anywhere;
}
.checklist.cka-block > li{min-width:0;max-width:100%}
/* многоколоночный режим: минимум колонки не шире самого блока */
.checklist.ck-auto,.checklist.ck-no.ck-auto{columns:min(var(--ck-min,260px),100%) auto}
/* «пункты в одну линию» без колонок — тоже не шире блока */
.checklist.cka-block{max-width:100%}
/* --- 2. «Листать по горизонтали и на ПК» главнее авто-подстройки ---
Класс cardrow-dsfit ставится вместо cardrow-fit, когда включено листание:
строка остаётся одна на любой ширине, а fit_min задаёт ширину карточки. */
.cardrow-dscroll.cardrow-dsfit{display:flex !important;flex-wrap:nowrap !important;
grid-template-columns:none !important;overflow-x:auto !important}
/* Апдейт 198: карточки в ленте должны ТЯНУТЬСЯ по ширине, а не стоять
фиксированным минимумом у левого края. flex-grow заполняет свободное место,
min-width не даёт сжаться ниже выбранного минимума — и только тогда
включается горизонтальная прокрутка. */
.cardrow-dscroll.cardrow-dsfit > *{flex:1 1 var(--fit-min,280px) !important;
min-width:var(--fit-min,280px);width:auto !important;max-width:none !important}
/* стрелки нужны — общий запрет касается только режима подстройки без листания */
.prod-carousel-wrap:has(.cardrow-dscroll) .carousel-arrow{display:flex}
.prod-carousel-wrap:not(.has-scroll) .carousel-arrow{display:none}
@media(max-width:560px){.prod-carousel-wrap .carousel-arrow{display:none}}
/* на телефоне карточки ленты не должны растягиваться на 100% (правило cardrow-cw) */
@media(max-width:560px){
.cardrow-dscroll > *{width:auto}
.cardrow-dscroll.cardrow-dsfit > *{flex:1 1 min(var(--fit-min,280px),78vw) !important;
min-width:min(var(--fit-min,280px),78vw)}
.cardrow-dscroll.cw-narrow > *{width:min(220px,72vw)}
.cardrow-dscroll.cw-wide > *{width:min(340px,84vw)}
.cardrow-dscroll.cw-xwide > *{width:min(420px,88vw)}
.cardrow-dscroll:not(.cw-narrow):not(.cw-wide):not(.cw-xwide):not(.cardrow-dsfit) > *{width:min(280px,80vw)}
}
/* --- 3. Индикация «1 / 3» в углу изображения --- */
.img-count{
position:absolute;right:8px;bottom:8px;z-index:3;
padding:2px 8px;border-radius:20px;
background:rgba(0,0,0,.45);color:#fff;
font-size:12px;line-height:1.5;font-weight:600;
letter-spacing:.02em;
backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
pointer-events:none;user-select:none;
opacity:.85;transition:opacity .15s;
}
.prod-imgwrap:hover .img-count,.comp-imgwrap:hover .img-count{opacity:1}
/* контейнеры, где бейдж позиционируется */
.gc-slide{position:relative}
.comp-imgwrap{position:relative}
.qv-img{position:relative}
/* Обёртка галереи в «Составе системы»: на телефоне сам .comp-imgwrap становится
горизонтальным скроллером, поэтому бейдж крепим к обёртке, а не к скроллеру —
иначе он уезжает вместе со слайдами. */
.comp-gal{position:relative;display:block;width:100%}
.comp-gal > .img-count{right:8px;bottom:8px}
/* ============================================================
Апдейт 195
1) Чек-лист «авто-колонки» + табличный режим: строк было всегда 4
2) Чек-лист на планшете: --ck-rows2 теперь задаётся, колонок 2, а не 1
3) Запасной вариант для браузеров без :has() (Safari < 15.4)
============================================================ */
/* --- 1. Табличный режим + «Автоматически по ширине» ---
Причина: --ck-rows считался только при числовом cols, при 'auto' переменная
пустая и CSS падал на repeat(4,auto) — всегда ровно 4 строки независимо
от количества пунктов. Для auto переключаем поток на строки: колонки
подбираются под ширину, список остаётся по центру и не шире блока. */
.checklist.cka-block.ck-auto,
.checklist.ck-no.cka-block.ck-auto{
grid-auto-flow:row !important;
grid-template-rows:none !important;
grid-auto-columns:auto !important;
grid-template-columns:repeat(auto-fit,minmax(min(var(--ck-min,260px),100%),max-content)) !important;
justify-content:center;
}
/* --- 2. Планшет: 3–4 колонки сжимаются до 2, а не до одной --- */
@media(max-width:900px){
.checklist.cka-block.ck-cols-3,.checklist.cka-block.ck-cols-4,
.checklist.ck-no.cka-block.ck-cols-3,.checklist.ck-no.cka-block.ck-cols-4{
grid-template-rows:repeat(var(--ck-rows2,var(--ck-rows,4)),auto)}
}
/* --- 3. Браузеры без :has() ---
Без поддержки :has() на телефоне ломался «Состав системы»: свайп не
включался, а миниатюры при этом уже были скрыты — переключить фото
становилось нечем. Возвращаем миниатюры. */
@supports not selector(:has(*)){
@media(max-width:640px){
.comp-thumbs{display:flex}
.comp-gal > .img-count{display:none}
}
}
/* ============================================================
Апдейт 196
1) .prod-hscroll-all не был лентой: у класса вообще не было правил
display/flex-wrap/overflow — карточки товаров переносились на
второй ряд, хотя стояла галочка «Листать по горизонтали и на ПК»
2) Индикация «N / M» на главном фото страницы товара
============================================================ */
/* --- 1. Настоящая горизонтальная лента для .prod-grid ---
Затрагивает: блок «Продукты», карточный режим блока «Состав системы»,
страницу поиска. У .team-hscroll-all и .cardrow-dscroll такие правила были,
у .prod-hscroll-all — нет, ему достались только отступы и scroll-padding. */
.prod-grid.prod-hscroll-all{
display:flex;flex-wrap:nowrap;overflow-x:auto;
grid-template-columns:none;gap:16px;
scroll-snap-type:x proximity;padding-bottom:8px;
-webkit-overflow-scrolling:touch;
}
.prod-grid.prod-hscroll-all>.prod-card{
flex:0 0 auto;width:280px;max-width:none;scroll-snap-align:start}
.prod-grid.prod-hscroll-all>.prod-card.cw-narrow{width:220px;flex-basis:auto}
.prod-grid.prod-hscroll-all>.prod-card.cw-wide{width:340px;flex-basis:auto}
.prod-grid.prod-hscroll-all>.prod-card.cw-xwide{width:420px;flex-basis:auto}
/* на телефоне карточка не шире экрана, но и не растянута на 100%
(правило .prod-grid.prod-cw>.prod-card{width:100%} для ленты не годится) */
@media(max-width:560px){
.prod-grid.prod-hscroll-all>.prod-card{width:min(280px,80vw)}
.prod-grid.prod-hscroll-all>.prod-card.cw-narrow{width:min(220px,72vw)}
.prod-grid.prod-hscroll-all>.prod-card.cw-wide{width:min(340px,84vw)}
.prod-grid.prod-hscroll-all>.prod-card.cw-xwide{width:min(420px,88vw)}
}
/* --- 2. Счётчик фото на странице товара --- */
.pdp-main{position:relative}
.pdp-main .img-count{right:10px;bottom:10px}
/* ============================================================
Апдейт 197: «Подстраивать под экран» в блоке «Продукты»
Поле fit_min было в редакторе, но рендер его не читал.
Ширина берётся из уже существующих классов .cardrow-fit-NNN (--fit-min).
============================================================ */
.prod-grid.prod-fit{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(var(--fit-min,240px),100%),1fr));
gap:14px}
.prod-grid.prod-fit>.prod-card{width:auto;max-width:none;flex:initial}
/* ============================================================
Апдейт 198: чек-лист снова центрируется группой
Что я сломал в 194: заменил grid-auto-columns:max-content на
minmax(0,max-content), чтобы столбцы не вылезали за ширину блока.
Побочный эффект: при длинном содержимом min-content сетки становится
нулевым, width:fit-content разрешается в полную доступную ширину,
свободного места не остаётся — и justify-content:center с margin:auto
перестают что-либо центрировать. Список визуально прижимается влево.
Решение: вернуть max-content дорожкам, а от переполнения защититься
ограничением ширины САМОГО ПУНКТА по числу колонок. Тогда сетка снова
ужимается по содержимому и центрируется, а длинный текст переносится.
============================================================ */
/* ширина межколоночного отступа как переменная — значения те же, что уже
заданы правилами .ckg-*, просто теперь их видно в расчётах */
.checklist{--ck-cgap:44px}
.checklist.ckg-s{--ck-cgap:26px}
.checklist.ckg-l{--ck-cgap:64px}
.checklist.ckg-xl{--ck-cgap:88px}
/* дорожки снова по содержимому — иначе центрировать нечего */
.checklist.cka-block.ck-cols-2,.checklist.cka-block.ck-cols-3,
.checklist.cka-block.ck-cols-4,
.checklist.ck-no.cka-block.ck-cols-2,.checklist.ck-no.cka-block.ck-cols-3,
.checklist.ck-no.cka-block.ck-cols-4{
grid-auto-columns:max-content !important;
justify-content:center !important;
width:-moz-fit-content !important;width:fit-content !important;
margin-left:auto !important;margin-right:auto !important;
}
/* защита от выхода за ширину блока: пункт не шире своей доли колонки */
.checklist.cka-block.ck-cols-2>li,.checklist.ck-no.cka-block.ck-cols-2>li{
max-width:calc((100% - var(--ck-cgap,44px)) / 2)}
.checklist.cka-block.ck-cols-3>li,.checklist.ck-no.cka-block.ck-cols-3>li{
max-width:calc((100% - 2 * var(--ck-cgap,44px)) / 3)}
.checklist.cka-block.ck-cols-4>li,.checklist.ck-no.cka-block.ck-cols-4>li{
max-width:calc((100% - 3 * var(--ck-cgap,44px)) / 4)}
@media(max-width:900px){
.checklist.cka-block.ck-cols-3>li,.checklist.cka-block.ck-cols-4>li,
.checklist.ck-no.cka-block.ck-cols-3>li,.checklist.ck-no.cka-block.ck-cols-4>li{
max-width:calc((100% - var(--ck-cgap,44px)) / 2)}
}
@media(max-width:700px){
.checklist.cka-block>li,.checklist.ck-no.cka-block>li{max-width:100%}
}
/* режим «Автоматически по ширине»: колонки равные и по центру блока.
Здесь ширину колонок задаёт браузер, поэтому сетка занимает всю ширину,
а группа выглядит центрированной за счёт равных колонок. */
.checklist.cka-block.ck-auto,.checklist.ck-no.cka-block.ck-auto{
width:100% !important;max-width:100% !important;
margin-left:auto !important;margin-right:auto !important;
grid-auto-flow:row !important;grid-template-rows:none !important;
grid-auto-columns:auto !important;
grid-template-columns:repeat(auto-fit,minmax(min(var(--ck-min,260px),100%),1fr)) !important;
justify-content:center !important;
}
.checklist.cka-block.ck-auto>li,.checklist.ck-no.cka-block.ck-auto>li{max-width:100%}
/* ============================================================
Апдейт 199: блог — визуальный редактор, SEO-панель, рубрикация
============================================================ */
/* ---------- админка: раскладка формы ---------- */
.blog-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.blog-main{min-width:0}
.blog-side{min-width:0;position:sticky;top:12px}
@media(max-width:1000px){.blog-cols{grid-template-columns:1fr}.blog-side{position:static}}
.card-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.admin-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.field-2{grid-template-columns:1fr}}
/* ---------- визуальный редактор ---------- */
/* Апдейт 208: панель уже была position:sticky, но не липла — её ломал
overflow:hidden на .rte. Любой overflow, кроме visible, создаёт у предка
собственный скролл-контейнер, и элемент «прилипает» к нему, а не к странице.
Убрали overflow, скругление держим на самих дочерних элементах. */
.rte{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
/* Апдейт 210: у верхней панели админки тоже position:sticky, top:0.
Наши панели с top:0 уезжали ПОД неё. Высота шапки меряется в JS и кладётся
в --adm-bar-h, высота навигации по разделам — в --form-nav-h. */
.rte-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;
background:var(--surface,#fff);
border-bottom:1px solid var(--line);position:sticky;
top:calc(var(--adm-bar-h, 56px) + var(--form-nav-h, 0px));z-index:20;
border-radius:12px 12px 0 0;box-shadow:0 4px 12px rgba(0,0,0,0)}
/* когда панель прилипла — лёгкая тень, чтобы было видно, что текст под ней */
.rte-bar.is-stuck{box-shadow:0 4px 14px rgba(0,0,0,.10)}
.rte-area{border-radius:0 0 12px 12px}
.rte-group{display:flex;gap:2px;padding-right:8px;margin-right:4px;border-right:1px solid var(--line)}
.rte-group:last-child{border-right:0}
.rte-right{margin-left:auto;border-right:0}
.rte-btn{min-width:34px;height:32px;padding:0 8px;border:1px solid transparent;border-radius:8px;
background:transparent;cursor:pointer;font-size:14px;line-height:1;color:var(--ink-2);
display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.rte-btn:hover{background:var(--line-2)}
.rte-btn.on{background:var(--primary,#2f6f4e);border-color:transparent;color:#fff}
.rte-area{min-height:340px;padding:18px 20px;outline:none;overflow-wrap:anywhere}
.rte-area:focus{box-shadow:inset 0 0 0 2px rgba(47,111,78,.12)}
.rte-area>*:first-child{margin-top:0}
.rte-area h2{font-size:22px;margin:22px 0 8px}
.rte-area h3{font-size:18px;margin:18px 0 6px}
.rte-area blockquote{margin:14px 0;padding:8px 16px;border-left:3px solid var(--line);color:var(--ink-2)}
.rte-area figure{margin:16px 0}
.rte-area figure img{max-width:100%;border-radius:10px;display:block}
.rte-area figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.rte-area img{max-width:100%}
.rte-area:empty:before{content:'Начните писать…';color:var(--muted)}
.rte-restore{background:#fff8e1;border:1px solid #f0d98a;border-radius:10px;padding:10px 12px;
margin-bottom:10px;font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* выбор изображения */
.rte-picker{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.rte-picker-box{background:var(--surface);border-radius:14px;max-width:820px;width:100%;max-height:82vh;
display:flex;flex-direction:column;overflow:hidden}
.rte-picker-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.rte-x{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-2)}
.rte-picker-up{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.rte-picker-grid{padding:14px 16px;overflow:auto;display:grid;gap:10px;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.rte-pick{border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;background:var(--bg);cursor:pointer;aspect-ratio:1/1}
.rte-pick img{width:100%;height:100%;object-fit:cover;display:block}
.rte-pick:hover{border-color:var(--primary,#2f6f4e)}
/* ---------- SEO-панель ---------- */
.input-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.input-row input{flex:1 1 220px;min-width:0}
.input-prefix{color:var(--muted);font-size:13px;white-space:nowrap}
.len-badge{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--line-2);color:var(--muted)}
.len-badge.ok{background:#e9f7ee;color:#1e6b3d}
.len-badge.warn{background:#fff4de;color:#8a5a00}
.len-badge.bad{background:#fdecea;color:#b00020}
.warn-hint{color:#8a5a00}
.seo-preview{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;margin:10px 0 14px}
.seo-preview .sp-url{font-size:12px;color:#3a7d3a;word-break:break-all}
.seo-preview .sp-title{font-size:18px;color:#1a0dab;margin:2px 0;line-height:1.3}
.seo-preview .sp-desc{font-size:13px;color:#4d5156;line-height:1.45}
/* ---------- теги ---------- */
.tags-box{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line);border-radius:10px;
padding:7px 8px;background:var(--surface);min-height:40px;align-items:center}
.tags-entry{border:0;outline:none;flex:1 1 100px;min-width:80px;background:transparent;font:inherit;padding:2px}
.tag-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
background:var(--line-2);font-size:12.5px}
.tag-chip button{border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;color:var(--muted);padding:0}
.tags-suggest{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tag-suggest{border:1px dashed var(--line);background:transparent;border-radius:999px;
padding:2px 9px;font-size:12px;cursor:pointer;color:var(--ink-2);font-family:inherit}
.tag-suggest:hover{border-style:solid;border-color:var(--primary,#2f6f4e)}
/* ---------- публичная часть: список ---------- */
.blog-filter .chip.active{background:var(--primary,#2f6f4e);color:#fff;border-color:transparent}
/* ---------- публичная часть: статья ---------- */
.crumbs{margin:0 0 12px}
.crumbs a{color:inherit}
.article-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.article-meta .dot{opacity:.5}
.article-lead{font-size:18px;line-height:1.55;color:var(--ink-2);margin:0 0 16px}
.article-toc{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 22px;background:var(--bg)}
.article-toc .toc-title{font-weight:700;margin-bottom:8px}
.article-toc ol{margin:0;padding-left:20px}
.article-toc li{margin:4px 0}
.article-toc .toc-l3{padding-left:14px;font-size:14px}
.article-body h2{scroll-margin-top:80px}
.article-body h3{scroll-margin-top:80px}
.article-body figure{margin:20px 0}
.article-body figure img{width:100%;border-radius:12px;display:block}
.article-body figcaption{font-size:13.5px;color:var(--muted);margin-top:7px;text-align:center}
.article-body img{max-width:100%;height:auto;border-radius:12px}
.article-body blockquote{margin:18px 0;padding:10px 18px;border-left:3px solid var(--primary,#2f6f4e);color:var(--ink-2)}
.article-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.article-body pre{background:var(--line-2);padding:12px 14px;border-radius:10px;overflow:auto}
.article-body code{background:var(--line-2);padding:1px 5px;border-radius:5px;font-size:.92em}
.article-body pre code{background:transparent;padding:0}
.article-tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0}
/* ============================================================
Апдейт 200: блог — ширина, карточки с быстрыми действиями,
шапка списка, блок «Последние статьи» с листанием
============================================================ */
/* --- ширина статьи ровно по настройке «Ширина сайта» ---
В 199 стояло .page.narrow с жёсткими 640px — статья игнорировала настройку.
В 200 я ограничил колонку текста 820px «для читаемости» — из-за этого текст
стал уже обложки и выглядел смещённым. Апдейт 201: никаких своих лимитов,
статья использует ту же ширину, что и остальные страницы сайта. */
.page-article{max-width:var(--maxw)}
.page-article .article-cover{width:100%;border-radius:14px}
/* --- шапка списка (Апдейт 211: собрана в аккуратную сетку) --- */
.blog-top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:0 0 14px}
.blog-top-main{min-width:0;flex:1 1 320px}
.blog-sub{margin:4px 0 0}
.blog-top-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* панель фильтров: всё в одной рамке, а не по углам широкого экрана */
.blog-panel{border:1px solid var(--line);border-radius:14px;background:var(--surface);
padding:12px 14px;margin:0 0 20px;display:flex;flex-direction:column;gap:9px}
.blog-panel .blog-filter{margin:0}
.blog-panel .blog-bar{margin:0;padding-top:9px;border-top:1px solid var(--line);
display:flex;align-items:center;gap:10px}
.blog-search{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;
background:var(--surface);overflow:hidden}
.blog-search input{border:0;outline:none;background:transparent;font:inherit;padding:9px 6px 9px 16px;min-width:190px}
.blog-search-go{border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;
padding:0 16px;color:var(--primary,#2f6f4e);white-space:nowrap}
.blog-search:focus-within{border-color:var(--primary,#2f6f4e)}
.blog-search{flex:0 0 auto;max-width:340px}
@media(max-width:640px){
.blog-top{flex-direction:column;align-items:stretch;gap:12px}
.blog-search{max-width:none}
.blog-search input{min-width:0;width:100%}
.blog-panel .blog-bar{flex-wrap:wrap}
.blog-hideread{margin-left:0}
}
/* --- фильтры --- */
.blog-filters{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.blog-filter{display:flex;flex-wrap:wrap;gap:8px}
.blog-filter-tags .chip-tag{font-size:12.5px;opacity:.9}
.blog-filter .chip.active{background:var(--primary,#2f6f4e);color:#fff;border-color:transparent}
.blog-filter .chip.active .chip-n{color:rgba(255,255,255,.75)}
.chip-n{color:var(--muted);font-size:11.5px;margin-left:3px}
.blog-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.blog-hideread{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.blog-reset{font-size:13px}
.blog-empty{margin:24px 0}
/* --- карточка статьи --- */
.blog-card{position:relative;display:flex;flex-direction:column;min-width:0;
border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);
transition:transform .15s, box-shadow .15s, opacity .2s}
.blog-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.blog-card-link{position:absolute;inset:0;z-index:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-card-body{position:relative;z-index:0;padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.blog-card-title{font-size:18px;line-height:1.3;margin:0}
.blog-card-exc{margin:0;font-size:14.5px}
.blog-more{margin-top:auto;padding-top:8px;font-weight:600;color:var(--primary,#2f6f4e)}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.blog-cat{background:var(--line-2);border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:600}
.blog-min{opacity:.8}
.blog-pin,.blog-new{font-weight:700;font-size:11.5px;border-radius:999px;padding:1px 8px}
.blog-pin{color:var(--primary,#2f6f4e);background:rgba(47,111,78,.1)}
.blog-new{color:#8a5a00;background:#fff2d6}
.blog-card.pinned{outline:2px solid rgba(47,111,78,.16)}
/* Апдейт 215: правила ниже остались от версии, где обложка была div с
background-image. Сейчас это .media-cover с ![]()
/