/* Стили сайта для клиентов. Оформление «Мягкий зелёный» с тёмным блоком подбора.
   Все размеры кратны 4 px, отступы между блоками — одни и те же переменные, поэтому всё стоит ровно. */

@font-face { font-family:"Inter"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/inter-400.woff") format("woff"); }
@font-face { font-family:"Inter"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/inter-500.woff") format("woff"); }
@font-face { font-family:"Inter"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/inter-600.woff") format("woff"); }
@font-face { font-family:"Inter"; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/inter-700.woff") format("woff"); }
@font-face { font-family:"Inter"; font-weight:800; font-style:normal; font-display:swap; src:url("fonts/inter-800.woff") format("woff"); }

:root {
  --bg:#f4f1ea; --card:#fff; --text:#1f2a24; --muted:#6b776f; --text2:#4b5a52;
  --line:#e6e0d4; --line2:#efebe2; --field:#ddd6c8;
  --green:#2f6f5e; --green-d:#1f5446; --green-soft:#e3eee8; --green-chip:#b9d8c9;
  --dark:#202323; --ink:#000; --ink-h:#2b2f2e;
  --sun:#f4c76a; --sun-h:#eab54e; --brown:#7a2e0e;
  --red:#b42318; --red-h:#912018;
  --ok:#e3f4ea; --okt:#17663a; --err:#fbe5e5; --errt:#9b1c1c;
  /* старые имена — ими пользуется страница оплаты картой */
  --accent:var(--green); --accent-dark:var(--green-d); --head2:#1f2a24;
  --wrap:1320px; --pad:24px; --gap:16px; --block:28px;
  --r-xl:28px; --r-lg:24px; --r:20px; --r-sm:14px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }  /* скрытые блоки не показываем, даже если у них свой display */
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column;
       font:15px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
       background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
a { color:var(--green); text-decoration:none; }
a:hover { color:var(--green-d); }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
img { max-width:100%; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

h1 { font-size:28px; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:0 0 16px; }
h2 { font-size:20px; line-height:1.2; font-weight:800; letter-spacing:-.01em; margin:24px 0 12px; }

/* ---------- Шапка ---------- */
.topbar { position:relative; z-index:30; }
.bar { max-width:var(--wrap); margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; gap:var(--gap); }
.logo { display:flex; align-items:center; flex:none; color:var(--text); }
.logo:hover { color:var(--text); }
.logo img { height:40px; width:auto; max-width:220px; object-fit:contain; display:block; }
.logo-text { font-weight:800; font-size:21px; letter-spacing:-.02em; }

.pills { display:flex; gap:4px; padding:4px; background:#ebe7dd; border-radius:999px; flex:none; }
.pills a, .pills button { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border:0; border-radius:999px;
  background:none; color:var(--text2); font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pills a:hover, .pills button:hover { color:var(--text); }
.pills .on { background:#fff; color:var(--text); font-weight:700; }
.pills i { font-size:11px; }

.search { flex:1 1 280px; min-width:0; height:46px; display:flex; align-items:center; gap:8px; padding:0 5px 0 18px;
  background:#fff; border-radius:999px; }
.search:focus-within { box-shadow:0 0 0 2px var(--green); }
.search input[type=search] { flex:1; min-width:0; height:100%; min-height:0; padding:0; border:0; border-radius:0; background:transparent; font:inherit; color:var(--text); }
.search input[type=search]:focus { outline:none; box-shadow:none; }
.search button { flex:none; width:36px; height:36px; border:0; border-radius:50%; background:var(--red); color:#fff; cursor:pointer;
  display:grid; place-items:center; font-size:14px; }
.search button:hover { background:var(--red-h); }

.usr { display:flex; align-items:center; gap:10px; flex:none; }
.usr-chip { height:46px; display:flex; align-items:center; gap:10px; padding:0 16px 0 6px; background:#fff; border-radius:999px; color:var(--text); }
.usr-chip:hover { color:var(--text); box-shadow:0 0 0 2px var(--line); }
.usr-ava { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--green-soft);
  color:var(--green-d); font-weight:800; font-size:13px; }
.usr-name { max-width:180px; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cartbtn { height:46px; display:flex; align-items:center; gap:8px; padding:0 18px; border-radius:999px; background:#1f2a24; color:#fff;
  font-weight:700; white-space:nowrap; }
.cartbtn:hover { color:#fff; background:#2f3b34; }
.cartbtn-n { min-width:24px; height:22px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:var(--green-chip);
  color:var(--text); font-size:13px; }
.logout { margin:0; }
.logout button { height:46px; padding:0 4px; border:0; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.logout button:hover { color:var(--text); }
.logout button i, .cartbtn-ic { display:none; }

/* выпадающее меню «Каталог» */
.catmenu { display:none; position:absolute; left:0; right:0; top:100%; padding:0 var(--pad); }
.catmenu.open { display:block; }
.catmenu-in { max-width:calc(var(--wrap) - 2 * var(--pad)); margin:0 auto; max-height:70vh; overflow:auto; padding:24px 28px;
  background:#fff; border-radius:var(--r-lg); box-shadow:0 18px 48px rgba(31,42,36,.16);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px 28px; }
.catmenu-group { display:flex; flex-direction:column; gap:4px; }
.catmenu-title { color:var(--text); font-weight:700; }
.catmenu-title.on, .catmenu-title:hover { color:var(--green); }
.catmenu-link { color:var(--muted); font-size:14px; }
.catmenu-link:hover { color:var(--green); }

/* ---------- Основная колонка и низ страницы ---------- */
.content { flex:1 0 auto; width:100%; max-width:var(--wrap); margin:0 auto; padding:8px var(--pad) 56px; min-width:0; }
/* подвал: логотипы карт → ссылки на страницы → копирайт; всё по центру, ровными рядами */
.site-foot-in { max-width:var(--wrap); margin:0 auto; padding:22px var(--pad) 28px; display:flex; flex-direction:column;
  align-items:center; gap:14px; text-align:center; color:var(--muted); font-size:13px; border-top:1px solid var(--line); }
.site-foot-in .paylogos { justify-content:center; }
.foot-copy { margin:0; }
.paylogos { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.paylogos.compact { margin-top:0; }
.paylogos img { height:28px; width:auto; max-width:90px; object-fit:contain; background:#fff; border-radius:8px; padding:3px 8px; }
.paylogos span { font-size:12.5px; font-weight:700; color:var(--text); background:#fff; border-radius:8px; padding:4px 10px; }
.paylogos .paylogos-secure { background:var(--green-soft); color:var(--green-d); }

/* ---------- Кнопки и поля ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:var(--r-sm);
  background:var(--ink); color:#fff; font:inherit; font-weight:700; white-space:nowrap; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--ink-h); color:#fff; }
.btn-dark { background:var(--ink); }
.btn-soft { background:var(--green-soft); color:var(--green-d); }
.btn-soft:hover { background:#d3e5db; color:var(--green-d); }
.btn-light, .btn.light { background:var(--bg); color:var(--text); }
.btn-light:hover, .btn.light:hover { background:#ebe6db; color:var(--text); }
.btn-sun { background:var(--sun); color:var(--text); font-weight:800; }
.btn-sun:hover { background:var(--sun-h); color:var(--text); }
.btn-outline { background:#fff; color:var(--green-d); box-shadow:inset 0 0 0 2px var(--green); font-weight:700; }
.btn-outline:hover { background:var(--green-soft); color:var(--green-d); }
.btn-outline.is-dirty { background:var(--ink); color:#fff; box-shadow:none; }
.btn.link { min-height:0; padding:0; background:none; color:var(--green); font-weight:600; }
.btn.link:hover { background:none; color:var(--green-d); }
.btn.block { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.linkbtn { border:0; background:none; padding:0; font:inherit; color:var(--green); cursor:pointer; }

input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], input[type=email], select, textarea {
  font:inherit; min-height:44px; padding:0 12px; border:1px solid var(--field); border-radius:12px; background:#fff; color:var(--text); }
textarea { width:100%; min-height:90px; padding:10px 12px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(47,111,94,.15); }
input[type=number] { width:84px; }
select { appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f2a24' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
select:disabled { cursor:not-allowed; }

/* ---------- Сообщения ---------- */
.msgs { list-style:none; padding:0; margin:0 0 16px; }
.msgs li { padding:12px 16px; border-radius:var(--r-sm); margin-bottom:8px; background:#e7eef9; }
.msgs .success { background:var(--ok); color:var(--okt); } .msgs .error { background:var(--err); color:var(--errt); }
.notice { background:#fff4d6; padding:12px 16px; border-radius:var(--r-sm); margin-bottom:16px; }

/* ================================================================ Главная */
.home { display:flex; flex-direction:column; gap:var(--block); }

/* сетка в 7 колонок: блок подбора — 5, баланс — 2; плитки и каталоги ниже стоят ровно под ними */
.home-top, .quick { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--gap); }
/* каталоги — по 5 в ряд, чтобы длинные названия («Впуск и воздушные фильтры») помещались целиком */
.cats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap); }
.hero { grid-column:span 5; }
.balance-panel { grid-column:span 2; }
.home-top.no-balance .hero { grid-column:1 / -1; }

.hero { background:var(--dark); color:#fff; border-radius:var(--r-xl); padding:32px 36px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.hero-hi { margin:0; color:#cfe5da; font-weight:600; }
.hero h1 { margin:4px 0 0; font-size:36px; line-height:1.12; letter-spacing:-.03em; }

.carbar.carbar-hero { display:flex; flex-direction:column; gap:14px; margin:0; padding:0; background:none; border-radius:0; }
.carbar-hero .carbar-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.carbar-hero select, .carbar-hero .btn { width:100%; height:52px; border:0; border-radius:16px; font-size:15px; }
.carbar-hero select { padding:0 40px 0 16px; font-weight:600; color:var(--text); background-color:#fff; }
.carbar-hero select:focus { box-shadow:0 0 0 3px rgba(244,199,106,.6); }
.carbar.carbar-hero select:disabled { background-color:#e6efe9; color:#8a958e; opacity:1; }
.carbar-reset { align-self:flex-start; padding:0; border:0; border-bottom:1px dashed #8fbfac; background:none; color:#cfe5da;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.carbar-reset:hover { color:#fff; border-bottom-color:#fff; }

.balance-panel { background:#fff; border-radius:var(--r-xl); padding:26px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.balance-label { color:var(--muted); font-weight:600; font-size:14px; }
.balance-sum { font-size:32px; line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.balance-sum.neg { color:var(--red); } .balance-sum.pos { color:var(--green); }
.balance-sum:hover { opacity:.85; }
.balance-sub { margin:0; font-size:14px; color:var(--text2); }
.meter { height:8px; border-radius:4px; background:var(--bg); overflow:hidden; }
.meter i { display:block; height:100%; border-radius:4px; background:#9fc7b6; }
.meter-warn i { background:#e0806a; }
.balance-actions { margin-top:auto; padding-top:6px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.balance-actions .btn { height:46px; padding:0 10px; }

/* быстрые ссылки (плитки из админки) */
.quick-link { min-height:68px; display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff; border-radius:var(--r);
  color:var(--text); font-size:14px; font-weight:700; line-height:1.25; transition:box-shadow .15s, transform .15s; min-width:0; }
.quick-link:hover { color:var(--text); transform:translateY(-1px); box-shadow:0 6px 18px rgba(31,42,36,.08); }
.quick-link.on { box-shadow:inset 0 0 0 2px var(--green); }
.quick-ic { width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--bg-t, var(--green-soft)); color:var(--fg-t, var(--green)); font-size:18px; }
.quick-t { min-width:0; hyphens:auto; }

/* заголовок раздела: название слева, ссылка «Все …» справа */
.sec-head { display:flex; align-items:flex-end; gap:12px; margin-bottom:14px; }
.sec-title { min-width:0; }
.sec-title h2 { margin:0; font-size:26px; line-height:1.2; letter-spacing:-.02em; }
.sec-title p { margin:2px 0 0; color:var(--muted); font-size:14px; }
.sec-tools { margin-left:auto; display:flex; align-items:center; gap:8px; }
.sec-all { margin-left:auto; padding:0; border:0; background:none; color:var(--green); font:inherit; font-weight:700; white-space:nowrap; cursor:pointer; line-height:44px; }
.sec-tools .sec-all { margin-left:8px; }
.sec-all:hover { color:var(--green-d); }
.round { width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:50%; background:#fff; color:var(--text);
  cursor:pointer; font-size:14px; }
.round:hover { background:#ebe6db; }
.round:disabled { opacity:.35; cursor:default; }

/* каталоги */
.cat { min-height:70px; display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff; border-radius:var(--r);
  color:var(--text); transition:box-shadow .15s, transform .15s; min-width:0; }
.cat:hover { color:var(--text); transform:translateY(-1px); box-shadow:0 6px 18px rgba(31,42,36,.08); }
.cat-ic { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); background:#fff; overflow:hidden;
  color:var(--muted); font-weight:800; }
.cat-ic img { width:100%; height:100%; object-fit:contain; padding:4px; display:block; }
.cat-name { min-width:0; font-size:14px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; hyphens:auto; }

/* карусель карточек: на широком экране ровно 5 карточек */
.rail-row { --per:5; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.rail-row::-webkit-scrollbar { display:none; }
.pgrid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap); }

.pcard { background:#fff; border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0; scroll-snap-align:start; }
.pcard-img { position:relative; height:170px; border-radius:18px; background:#fff; display:grid; place-items:center; overflow:hidden; }
.pcard-img img { max-height:100%; max-width:100%; object-fit:contain; display:block; }
.noimg { font-size:40px; font-weight:800; color:#cfc7b8; }
.pcard-badge { position:absolute; top:10px; left:10px; padding:2px 9px; border-radius:999px; background:var(--brown); color:#fff; font-size:12px; font-weight:800; }
.pcard-name { height:2.7em; color:var(--text); font-size:15px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.pcard-name:hover { color:var(--green); }
.pcard-meta { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard-meta .out { color:var(--red); }
/* цена — строкой, кнопка — под ней на всю ширину: у всех карточек кнопки на одной линии */
.pcard-foot { margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.pcard-price { min-height:24px; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; line-height:1.2; }
.pcard-price b { font-size:19px; white-space:nowrap; }
.pcard-price small, .pcard-price s { font-size:12.5px; color:var(--muted); white-space:nowrap; }
.pcard-foot form { margin:0; }
.pcard-foot .out-badge { width:100%; }
.pcard-foot .out-badge { min-height:44px; display:grid; place-items:center; border-radius:var(--r-sm); }

/* два списка в ряд: «Хиты продаж» и «Скидки» */
.duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); align-items:stretch; }
.duo-one { grid-template-columns:minmax(0,1fr); }
.panel { background:#f6c7c7; border-radius:var(--r-xl); padding:24px; min-width:0; }
.panel .sec-head { margin-bottom:6px; align-items:center; }
.panel .sec-title h2 { font-size:22px; }
.panel-sale { background:var(--sun); }
.panel-sale .sec-title h2, .panel-sale .sec-all { color:var(--brown); }
.panel-sale .sec-title p { color:#7a5a48; }

.plist { list-style:none; margin:0; padding:0; }
.prow { display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--line2); min-height:76px; }
.panel-sale .prow { border-top-color:rgba(122,46,14,.16); }
.prow-img { width:54px; height:54px; flex:none; display:grid; place-items:center; border-radius:16px; background:#fff; overflow:hidden; }
.panel-sale .prow-img { background:#fff; }
.prow-img img { width:82%; height:82%; object-fit:contain; display:block; }
.prow-img .noimg { font-size:20px; }
.prow-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.prow-name { display:block; color:var(--text); font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow-name:hover { color:var(--green); }
.prow-old { font-size:12.5px; color:#7a5a48; }
.sale-badge { flex:none; padding:1px 8px; border-radius:999px; background:var(--brown); color:#fff; font-size:12px; font-weight:800; }
.prow-price { flex:none; min-width:84px; text-align:right; font-size:15px; white-space:nowrap; }
.panel-sale .prow-price { color:var(--brown); }
.prow form { margin:0; flex:none; }
.prow-add, .prow-out { width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:var(--r-sm); font-size:15px; }
.prow-add { background:var(--green-soft); color:var(--green-d); cursor:pointer; }
.prow-add:hover { background:#d3e5db; }
.panel-sale .prow-add { background:#fff; color:var(--brown); }
.panel-sale .prow-add:hover { background:#fff7e6; }
.prow-out { color:var(--muted); }
/* карточка товара: количество рядом с кнопкой «В корзину» (на узкой карточке — друг под другом) */
.pcard-buy { display:flex; flex-wrap:wrap; gap:8px; }
.qty.qty-sm { height:44px; border-radius:var(--r-sm); flex:1 1 92px; }
.qty.qty-sm button { width:30px; flex:none; height:44px; font-size:18px; border-radius:var(--r-sm); }
.qty.qty-sm input[type=number] { flex:1; width:0; min-width:24px; height:44px; font-size:15px; }
.pcard-buy .btn { flex:1 1 92px; width:auto; padding:0 8px; font-size:14px; white-space:nowrap; }

/* ================================================================ Остальные страницы */
.crumbs { color:var(--muted); font-size:14px; margin-bottom:10px; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.page-head h1 { margin:0; }
.lead { margin:-6px 0 16px; font-size:14px; }
.card { background:var(--card); border-radius:var(--r); padding:20px; }

table { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border-radius:var(--r); overflow:hidden; }
th, td { padding:12px 14px; border-bottom:1px solid var(--line2); text-align:left; vertical-align:middle; }
th { font-size:13px; color:var(--text2); font-weight:700; background:#faf8f3; }
tr:last-child td { border-bottom:0; }
table.rows-link tbody tr { cursor:pointer; } table.rows-link tbody tr:hover td { background:#faf8f3; }
tr.row-link { cursor:pointer; } tr.row-link:hover td { background:#faf8f3; }
tr.row-link:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.num { text-align:right; white-space:nowrap; }
.muted { color:var(--muted); font-size:13px; }
.price { font-weight:700; white-space:nowrap; }
.tprice { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.tprice-sale { color:var(--brown); }
.tprice-old { display:block; font-size:12.5px; font-weight:500; color:var(--muted); }
.plus { color:var(--red); } .minus { color:var(--okt); }
.pos { color:var(--okt); } .neg { color:var(--red); }

.balance-card.is-pos { background:linear-gradient(180deg,#f2fbf5,#fff); }
.balance-card.is-neg { background:linear-gradient(180deg,#fdf3f3,#fff); }
.balance-box { display:flex; flex-direction:column; gap:8px; margin:0 0 16px auto; max-width:460px; }
.balance-box > div { display:flex; justify-content:space-between; gap:12px; }
.balance-box.is-blocked { box-shadow:inset 0 0 0 2px #f0b8b8; }
.limit-warn { margin:6px 0 4px; color:var(--errt); font-weight:600; font-size:14px; }
.out-badge { display:inline-block; font-size:12px; font-weight:700; color:var(--red); background:#fef3f2; border-radius:999px; padding:6px 12px; white-space:nowrap; }
.out-box { color:var(--red); background:#fef3f2; border-radius:var(--r-sm); padding:12px 16px; font-weight:600; }
.stock-warn { color:var(--red); font-size:12px; margin-top:3px; }
.sm-meta { display:none; }
.cp-quick { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.cp-quick button { font:inherit; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid var(--field);
  background:#fff; color:var(--text2); cursor:pointer; }
.cp-quick button:hover { border-color:var(--green); color:var(--green); }
.addform { display:flex; gap:6px; justify-content:flex-end; align-items:center; margin:0; }
.addform.start { justify-content:flex-start; }
.total { font-size:20px; font-weight:800; text-align:right; margin:16px 0; }
.status { display:inline-block; padding:3px 10px; border-radius:999px; font-size:13px; background:#ebe7dd; font-weight:600; }
.status.new, .status.pending { background:#e3ebff; color:#1747c4; }
.status.done, .status.confirmed { background:var(--ok); color:var(--okt); }
.status.canceled, .status.rejected { background:var(--err); color:var(--errt); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--gap); margin-bottom:16px; }
.stat .price { font-size:22px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px; background:#fff; color:var(--text); font-size:13.5px; font-weight:600; }
a.chip:hover { color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.chip.on { background:#1f2a24; color:#fff; }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap); }
.dl { display:grid; grid-template-columns:max-content 1fr; gap:10px 18px; margin:0; }
.dl dt { color:var(--muted); font-size:14px; } .dl dd { margin:0; }
.timeline { list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--line); }
.timeline li { position:relative; padding:0 0 14px 12px; }
.timeline li::before { content:""; position:absolute; left:-26px; top:4px; width:12px; height:12px; border-radius:50%; background:#c9c2b4; border:2px solid #fff; }
.timeline li.done::before { background:var(--green); } .timeline li.ok::before { background:var(--okt); }
.timeline li.bad::before { background:var(--red); } .timeline li.now::before { background:#f0a500; }

/* компактный подбор по автомобилю на страницах каталога */
.carbar { background:#fff; border-radius:var(--r); padding:16px; margin-bottom:20px; }
.carbar-head { color:var(--muted); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.carbar-head i { color:var(--green); font-size:14px; }
.carbar-scope { text-transform:none; letter-spacing:0; font-weight:700; color:var(--green-d); }
.carbar-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:10px; align-items:center; }
.carbar select { width:100%; }
.carbar select:disabled { background-color:#f6f4ef; color:#9aa29d; opacity:1; }
.carbar-clear { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:12px; background:var(--bg);
  color:var(--text2); font-size:14px; font-weight:700; white-space:nowrap; }
.carbar-clear:hover { color:var(--text); background:#ebe6db; }
.carbar-clear.off { opacity:.45; pointer-events:none; }

/* подкаталоги плитками */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--gap); margin-bottom:24px; }
.grid.balance-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:16px; }
.tile { background:var(--card); border-radius:var(--r); overflow:hidden; color:var(--text); display:block; transition:box-shadow .15s, transform .15s; }
.tile:hover { color:var(--text); transform:translateY(-1px); box-shadow:0 6px 18px rgba(31,42,36,.08); }
.tile .img { height:150px; margin:10px 10px 0; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:#fff;
  font-size:40px; color:#cfc7b8; font-weight:800; }
.tile .img img { width:100%; height:100%; object-fit:contain; padding:10px; display:block; }
.tile .name { padding:12px 14px; font-weight:700; }

/* страница товара */
.thumb { width:64px; height:64px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid var(--line); display:block; }
td .thumb { background:#fff; border-color:transparent; }
/* карточка товара: фото слева, покупка справа (на узком экране — друг под другом) */
.pp { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:start; }
.pp-gallery { background:#fff; border-radius:var(--r-xl); padding:20px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.pp-stage { position:relative; aspect-ratio:1 / 1; border-radius:var(--r); background:#fff; display:grid; place-items:center; overflow:hidden; }
.pp-stage .noimg { font-size:64px; }
.pp-open { width:100%; height:100%; padding:0; border:0; background:none; display:grid; place-items:center; cursor:zoom-in; }
.pp-open img { width:78%; height:78%; object-fit:contain; display:block; user-select:none; }
.pp-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%;
  background:#fff; color:var(--text); display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 14px rgba(31,42,36,.12); }
.pp-arrow:hover { background:var(--text); color:#fff; }
.pp-arrow.prev { left:14px; } .pp-arrow.next { right:14px; }
.pp-count { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); padding:3px 12px; border-radius:999px;
  background:rgba(31,42,36,.72); color:#fff; font-size:12.5px; font-weight:700; pointer-events:none; }
.pp-zoom-hint { position:absolute; right:14px; bottom:14px; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--text2); box-shadow:0 0 0 1px var(--line), 0 2px 8px rgba(0,0,0,.08);
  display:grid; place-items:center; pointer-events:none; font-size:14px; }
.pp-badge { position:absolute; top:16px; left:16px; padding:4px 12px; border-radius:999px; background:var(--green-soft); color:var(--green-d);
  font-size:13px; font-weight:700; pointer-events:none; }
.pp-badge.out { background:#fef3f2; color:var(--red); }
.pp-thumbs { display:flex; gap:10px; overflow-x:auto; scrollbar-width:thin; padding:2px; }
.pp-thumb { width:72px; height:72px; flex:none; padding:0; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; display:grid; place-items:center; }
.pp-thumb img { width:80%; height:80%; object-fit:contain; display:block; }
.pp-thumb.on { box-shadow:inset 0 0 0 2px var(--green); background:#fff; }

.pp-info { display:flex; flex-direction:column; gap:16px; min-width:0; }
.pp-cat { display:inline-block; padding:4px 12px; border-radius:999px; background:#ebe7dd; color:var(--text2); font-size:13px; font-weight:700; }
.pp-cat:hover { color:var(--text); }
.pp-title { margin:12px 0 8px; font-size:32px; line-height:1.15; }
.pp-facts { display:flex; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--text2); }
.pp-facts span { background:#fff; border-radius:10px; padding:6px 10px; }
.pp-facts b { color:var(--text); }
.pp-buy { background:#fff; border-radius:var(--r-lg); padding:24px; display:flex; flex-direction:column; gap:14px; }
.pp-price-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pp-price { font-size:36px; line-height:1.1; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.pp-price.muted { font-size:26px; color:var(--muted); }
.pp-price.sale { color:var(--brown); }
.pp-old { font-size:18px; font-weight:600; color:var(--muted); white-space:nowrap; }
.pp-sale { align-self:center; font-size:14px; }
.pp-saving { margin:-8px 0 0; font-size:13.5px; font-weight:700; color:var(--brown); display:flex; align-items:center; gap:6px; }
.pp-per { color:var(--muted); font-weight:600; }
.pp-sub { margin:-8px 0 0; font-size:13px; color:var(--muted); }
.pp-stock { margin:0; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--okt); }
.pp-stock i { width:8px; height:8px; border-radius:50%; background:#2f9e6a; }
.pp-form { display:flex; gap:10px; flex-wrap:wrap; margin:0; }
.qty { display:flex; align-items:center; height:52px; border-radius:16px; background:var(--bg); }
.qty button { width:48px; height:52px; border:0; background:none; font:inherit; font-size:22px; color:var(--text); cursor:pointer; border-radius:16px; }
.qty button:hover { background:#ebe6db; }
.qty input[type=number] { width:56px; min-height:0; height:52px; padding:0; border:0; border-radius:0; background:none; text-align:center;
  font-weight:700; font-size:17px; -moz-appearance:textfield; appearance:textfield; }
.qty input[type=number]:focus { box-shadow:none; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty:focus-within { box-shadow:0 0 0 2px var(--green); }
.pp-cart { flex:1 1 220px; height:52px; border-radius:16px; font-size:16px; font-weight:800; }
.pp-note { margin:-4px 0 0; font-size:13px; color:var(--muted); }

.pp-card { background:#fff; border-radius:var(--r-lg); padding:20px 24px; }
.pp-h2 { margin:0 0 12px; font-size:17px; display:flex; align-items:center; gap:8px; }
.pp-h2 i { color:var(--green); }
.pp-fits { display:flex; flex-wrap:wrap; gap:8px; }
.pp-fits a { padding:8px 12px; border-radius:12px; background:var(--bg); color:var(--text); font-size:14px; font-weight:600; }
.pp-fits a span { color:var(--muted); font-weight:500; }
.pp-fits a:hover { background:var(--green-soft); color:var(--green-d); }
.pp-perks { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.pp-perk { background:#fff; border-radius:var(--r); padding:14px 16px; display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; }
.pp-perk-ic { width:36px; height:36px; flex:none; border-radius:12px; display:grid; place-items:center; }
.pp-perk-ic.ok { background:var(--green-soft); color:var(--green); }
.pp-perk-ic.pay { background:#e3f0fd; color:#1565c0; }
.pp-desc { margin-top:20px; background:#fff; border-radius:var(--r-xl); padding:24px 28px; }
.pp-desc .pp-h2 { font-size:20px; margin-bottom:8px; }
.pp-desc p { margin:0 0 8px; max-width:780px; }
.pp-desc p:last-child { margin-bottom:0; }

/* просмотр фото на весь экран */
body.lb-open { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(16,20,18,.94); }
.lightbox-stage { position:absolute; inset:64px 72px 72px; display:grid; place-items:center; overflow:hidden; }
.lightbox-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
  cursor:zoom-in; transition:transform .2s ease; touch-action:none; user-select:none; }
.lightbox.zoomed .lightbox-stage img { cursor:zoom-out; transition:none; }
.lightbox-btn { position:absolute; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center; cursor:pointer; font-size:18px; }
.lightbox-btn:hover { background:rgba(255,255,255,.24); }
.lightbox-btn.close { top:12px; right:12px; }
.lightbox-btn.prev { left:12px; top:50%; transform:translateY(-50%); }
.lightbox-btn.next { right:12px; top:50%; transform:translateY(-50%); }
.lightbox-bar { position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; align-items:center; gap:14px; color:#fff; font-size:14px; font-weight:600; }
.lightbox-zoom { height:44px; padding:0 16px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.lightbox-zoom:hover { background:rgba(255,255,255,.26); }
.thumb-btn { border:0; padding:0; background:none; cursor:pointer; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
.form-grid label { display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:600; }
.form-grid input, .form-grid select { width:100%; }
.errorlist { color:var(--errt); margin:2px 0 0; padding:0; list-style:none; font-size:13px; font-weight:400; }
.pre { white-space:pre-line; }

/* цвета плиток главной (выбираются в админке: «Плитки на главной» → Цвет) */
.tc-blue { --bg-t:#e3f0fd; --fg-t:#1565c0; }
.tc-teal { --bg-t:#e0f2ef; --fg-t:#00695c; }
.tc-green { --bg-t:#e8f5e9; --fg-t:#2e7d32; }
.tc-purple { --bg-t:#f1eafb; --fg-t:#6a1b9a; }
.tc-red { --bg-t:#fde8ee; --fg-t:#be185d; }
.tc-orange { --bg-t:#fdeedd; --fg-t:#c2410c; }
.tc-gray { --bg-t:#eef0ee; --fg-t:#3f4a44; }
.tc-yellow { --bg-t:#fdf6dc; --fg-t:#8d6e00; }

.ic-ok { color:var(--okt); } .ic-wait { color:#1747c4; } .ic-bad { color:var(--red); } .ic-accent { color:var(--green); }
.ta-c { text-align:center; }
.mt-12 { margin-top:12px; } .mt-18 { margin-top:18px; } .mt-20 { margin-top:20px; }
.box-title { font-weight:700; margin-bottom:10px; } .box-title.sm { margin-bottom:8px; }
.price-lg { font-size:22px; } .price-24 { font-size:24px; } .price-xl { font-size:28px; }
.actions-right { text-align:right; margin-top:10px; } .actions-right.flush { margin:12px 0 0; }
.notice.flush-top { margin:12px 0 0; }
.chips.flush { margin:0; }

/* вход */
.login-card { max-width:400px; margin:40px auto; padding:28px; }
.login-card h1 { font-size:22px; text-align:center; }
.login-card input { width:100%; }
.login-brand { text-align:center; margin-bottom:12px; }
.login-logo { display:flex; justify-content:center; padding:4px 0 6px; }
.login-logo img { height:70px; max-width:280px; object-fit:contain; }
.login-name { font-weight:800; font-size:22px; letter-spacing:-.02em; }

/* контакты */
.contacts-card { font-size:16px; line-height:1.8; }
.map-card { margin-top:16px; padding:0; overflow:hidden; }
.map-card iframe { border:0; width:100%; height:360px; display:block; }

/* ================================================================ Под размер экрана */
@media (max-width:1200px) {
  .bar { flex-wrap:wrap; }
  .search { order:5; flex-basis:100%; }
  .usr { margin-left:auto; }
  .rail-row { --per:4; }
  .pgrid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .carbar-hero .carbar-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1100px) {
  .home-top { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero { grid-column:span 2; }
  .balance-panel { grid-column:span 1; }
  .quick { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .cats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pp { grid-template-columns:minmax(0,1fr); }
  .pp-gallery { max-width:640px; width:100%; }
}
@media (max-width:900px) {
  .bar { gap:12px; }
  .pills a, .pills button { padding:0 12px; }
  .usr { gap:8px; }
  .usr-name { display:none; }
  .usr-chip { padding-right:6px; }
  .cartbtn { padding:0 14px; }
  .cartbtn-t, .logout-t { display:none; }
  .cartbtn-ic { display:inline; }
  .logout button { width:40px; display:grid; place-items:center; font-size:16px; }
  .logout button i { display:inline; }
  .home-top { grid-template-columns:minmax(0,1fr); }
  .hero, .balance-panel { grid-column:1 / -1; }
  .carbar-hero .carbar-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quick { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail-row { --per:3; }
  .pgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .duo { grid-template-columns:minmax(0,1fr); }
  .carbar-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .carbar-clear { grid-column:1 / -1; justify-content:center; }
}
@media (max-width:700px) {
  :root { --pad:16px; --gap:12px; --block:24px; }
  .bar { padding:12px var(--pad); gap:10px; }
  .pills { order:4; flex-basis:100%; overflow-x:auto; scrollbar-width:none; }
  .pills a, .pills button { flex:1 0 auto; justify-content:center; padding:0 10px; font-size:13.5px; }
  .sec-tools .round { display:none; }

  .logo img { height:34px; }
  .hero { padding:24px 20px; border-radius:var(--r-lg); }
  .hero h1 { font-size:28px; }
  .carbar-hero .carbar-row { grid-template-columns:minmax(0,1fr); }
  .balance-panel { padding:22px 20px; border-radius:var(--r-lg); }
  .quick, .cats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail-row { --per:2; }
  .pgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pcard { padding:12px; gap:8px; }
  .pcard-img { height:130px; }
  .pcard-img img { max-height:100%; }
  .panel { padding:18px 16px; border-radius:var(--r-lg); }
  .sec-title h2 { font-size:22px; }
  .panel .sec-title h2 { font-size:20px; }
  .prow { gap:10px; }
  .prow-price { min-width:0; }

  .hide-sm { display:none; }
  table { font-size:14px; } th, td { padding:10px; }
  /* широкие таблицы на телефоне прокручиваются сами, а не растягивают страницу */
  .content table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .content th, .content td { white-space:nowrap; }
  /* список товаров на телефоне — карточками: название сверху, цена и кнопка «в корзину» под ним */
  .content table.ptable { display:block; overflow:visible; }
  .ptable thead { display:none; }
  .ptable tbody { display:block; }
  .ptable tr { display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; padding:12px; border-bottom:1px solid var(--line2); }
  .ptable tr:last-child { border-bottom:0; }
  .content .ptable td { display:block; padding:0; border:0; white-space:normal; }
  .content .ptable td.hide-sm { display:none; }
  .ptable td:nth-child(2) { grid-column:1 / -1; }
  .content .ptable td.price { text-align:right; }
  .ptable td.price { text-align:left; }
  .sm-meta { display:block; font-size:12.5px; margin-top:2px; }
  .form-grid { grid-template-columns:1fr; }
  .pp-gallery { padding:12px; border-radius:var(--r-lg); }
  .pp-title { font-size:24px; }
  .pp-price { font-size:30px; }
  .pp-buy { padding:18px; }
  .pp-card, .pp-desc { padding:16px 18px; }
  .pp-arrow.prev { left:8px; } .pp-arrow.next { right:8px; }
  .lightbox-stage { inset:60px 8px 72px; }
  .lightbox-btn.prev, .lightbox-btn.next { top:auto; bottom:12px; transform:none; }
  .carbar-row { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:480px) {
  .bar { gap:8px; }
  .logo-text { font-size:19px; }
}
@media (max-width:600px) {
  /* строка списка на телефоне: название целиком сверху, скидка и цена — под ним */
  .prow { display:grid; grid-template-columns:54px auto minmax(0,1fr) 44px; grid-template-rows:auto auto; column-gap:10px; row-gap:2px; }
  .prow-img { grid-column:1; grid-row:1 / 3; }
  .prow-body { grid-column:2 / 4; grid-row:1; }
  .prow-name { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .sale-badge { grid-column:2; grid-row:2; align-self:center; }
  .prow-price { grid-column:3; grid-row:2; text-align:left; }
  .prow:not(:has(.sale-badge)) .prow-price { grid-column:2 / 4; }
  .prow > form, .prow > .prow-out { grid-column:4; grid-row:1 / 3; }
}
@media (max-width:360px) {
  .quick, .cats { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:420px) {
  .rail-row { --per:1.35; }
}

/* ---------------------------------------------------------------- Страницы сайта и регистрация */
.foot-links { display:grid; grid-template-columns:repeat(3, auto); justify-content:center; gap:8px 32px; font-size:13px; }
@media (max-width:900px) { .foot-links { grid-template-columns:repeat(2, auto); gap:8px 24px; } }
@media (max-width:560px) { .foot-links { grid-template-columns:auto; } }
.foot-links a { color:var(--text2); }
.foot-links a:hover { color:var(--green-d); }
.guestnav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
.guestnav-name { font-weight:800; font-size:20px; color:var(--text); text-decoration:none; letter-spacing:-.02em; }
.guestnav-actions { display:flex; gap:8px; }
.sitepage { max-width:860px; margin:0 auto; padding:32px 36px; }
.sitepage h1 { margin-top:0; }
.sitepage-body { font-size:15.5px; line-height:1.65; }
.sitepage-body h2 { font-size:19px; margin:26px 0 8px; }
.sitepage-body h3 { font-size:16.5px; margin:20px 0 6px; }
.sitepage-body ul, .sitepage-body ol { padding-left:22px; margin:8px 0 14px; }
.sitepage-body li { margin:4px 0; }
.sitepage-body p { margin:0 0 12px; }
.sitepage-date { margin:24px 0 0; font-size:13px; }
.company-card { width:100%; margin:18px 0 0; border-collapse:collapse; font-size:15px; }
.company-card th, .company-card td { text-align:left; padding:10px 12px; border-top:1px solid var(--line); border-bottom:0; vertical-align:top; }
.company-card th { width:170px; color:var(--muted); font-weight:600; font-size:14px; background:none; border-radius:0; }
.company-card tr:first-child th, .company-card tr:first-child td { border-top:0; }
.login-actions { display:flex; gap:10px; margin:6px 0 14px; }
.login-actions .btn { flex:1; }
.reg-card { max-width:520px; }
.reg-card label { display:block; font-weight:600; margin-bottom:4px; }
.reg-card .field-help { display:block; font-size:12.5px; margin-top:4px; }
.field-error { display:block; color:var(--red); font-size:13px; font-weight:600; margin-top:4px; }
.has-error input { border-color:var(--red); }
.reg-consent label { display:flex; gap:10px; align-items:flex-start; font-weight:500; line-height:1.45; }
.reg-consent input { width:auto; margin-top:3px; flex:none; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.reg-ok { font-size:46px; color:var(--green); margin:4px 0 8px; }
@media (max-width:600px) {
  .sitepage { padding:22px 18px; }
  .company-card th { width:auto; display:block; border:0; padding-bottom:0; }
  .company-card td { display:block; border-top:0; padding-top:2px; }
  .company-card tr { display:block; border-top:1px solid var(--line); }
}