/* ============================================================
   КАПРИН — светлая витрина
   ============================================================ */
:root {
  --navy: #171717;
  --navy-2: #262626;
  --navy-3: #404040;
  --accent: #5ba4e0;
  --accent-2: #8ec4ef;
  --accent-dark: #3d8bc9;
  --copper: #5ba4e0;
  --copper-2: #8ec4ef;
  --bg: #f6f6f4;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --green: #16a34a;
  --red: #dc2626;
  --line: #e8e8e6;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.10);
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Manrope", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; touch-action: manipulation; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
}
h1, h2, .page-h, .sec-head h2, .tool-mega h3, .cta-band h2, .about-text h2 {
  font-family: var(--display);
  letter-spacing: -.02em;
}
img { max-width: 100%; display: block; pointer-events: none; }
a, button, input, select, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,.12); }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; pointer-events: none !important; }
input, select, textarea { font-family: inherit; font-size: 15px; }
.container { max-width: 1260px; margin: 0 auto; padding: 0 20px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; border-radius: 10px;
  padding: 11px 20px; font-size: 15px; font-weight: 600;
  transition: all .18s ease; white-space: nowrap; line-height: 1.2;
}
.btn { position: relative; z-index: 2; pointer-events: auto; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-dark { background: var(--navy); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: #d4cbbd; }
.btn-white { background: #fff; color: var(--navy); }
.btn-copper { background: var(--copper); color: #fff; border-color: var(--copper); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
  .btn-dark:hover { background: var(--navy-2); }
  .btn-outline:hover { border-color: var(--navy); background: #f1f5f9; }
  .btn-white:hover { background: #f1f5f9; }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .nav-cat:hover .nav-drop { display: block; }
}
.btn-sm { padding: 7px 13px; font-size: 14px; border-radius: 8px; }
.btn-lg { padding: 14px 28px; font-size: 17px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- Шапка ---------- */
.topbar { background: #111; color: #a3a3a3; font-size: 13px; }
.topbar .container { display: flex; gap: 22px; align-items: center; height: 38px; overflow: hidden; }
.topbar a:hover { color: #fff; }
.topbar .tb-city { color: #fff; font-weight: 600; }
.topbar .tb-right { margin-left: auto; display: flex; gap: 18px; }

.header { background: #111; position: sticky; top: 0; z-index: 60; box-shadow: none; border-bottom: 0; }
.header .container { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 10px 20px; }

.logo { display: flex; align-items: center; gap: 0; min-width: 0; }
.logo-img { height: 44px; width: auto; max-width: min(320px, 58vw); display: block; object-fit: contain; }
.logo-img-foot { height: 56px; max-width: 340px; }
.f-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.logo-mark {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, var(--accent) 0%, #3a3a3a 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.logo-text { line-height: 1.1; }
.logo-text b { font-size: 22px; letter-spacing: .06em; color: var(--navy); }
.logo-text span { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }

.search-box { display: flex; align-items: center; background: #1f1f1f; border: 1.5px solid #333; border-radius: 999px; overflow: hidden; transition: border-color .15s; }
.search-box:focus-within { border-color: var(--copper); background: #171717; }
.search-box input { flex: 1; border: 0; outline: 0; background: transparent; padding: 10px 16px; min-width: 0; color: #fff; }
.search-box button { border: 0; background: var(--copper); color: #fff; padding: 0 16px; display: flex; align-items: center; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.hdr-tool {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 14px; border-radius: 10px;
  background: #fff; color: #0a0a0a; font-weight: 800; font-size: 14px;
  white-space: nowrap;
}
.hdr-tool-orange { background: var(--copper); color: #fff; }
.hdr-tool:hover { filter: brightness(0.92); }
.hphone { text-align: right; line-height: 1.25; }
.hphone b { font-size: 17px; color: #fff; display: block; }
.hphone span { font-size: 12px; color: var(--muted); }
.icon-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 6px 10px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 600;
}
.icon-btn:hover { background: #1f1f1f; }
.icon-btn svg { width: 24px; height: 24px; }
.cart-count {
  position: absolute; top: -2px; right: -2px; background: var(--copper); color: #fff;
  font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  border: 2px solid #111;
}

.navbar { background: #fff; position: sticky; top: 64px; z-index: 50; border-bottom: 1px solid #ececec; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.navbar .container { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.navbar .container::-webkit-scrollbar { display: none; }
.nav-link {
  color: #525252; padding: 12px 14px; font-size: 14.5px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; border-bottom: 3px solid transparent;
}
.nav-link:hover { color: #171717; background: #f5f5f4; }
.nav-link.on { color: #171717; border-bottom-color: var(--copper); }
.nav-cat { position: relative; }
.nav-cat-row { display: flex; align-items: stretch; }
.nav-cat-more { display: none; }
.nav-cat:hover .nav-drop { display: block; }
.nav-drop {
  display: none; position: absolute; left: 0; top: 100%; background: #fff; border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-lg); min-width: 380px; padding: 10px; z-index: 70;
}
.nav-drop a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--text); }
.nav-drop a:hover { background: #f1f5f9; color: var(--accent-dark); }
.nav-drop .nd-cat { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--navy-3); margin-top: 6px; }

/* ---------- Герой ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: #111;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-bg {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  opacity: 0; z-index: 0; object-position: 72% center;
  transition: opacity 1.1s ease;
}
.hero-bg.on { opacity: .92; z-index: 1; }
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.45) 48%, rgba(10,10,10,.18) 100%),
    linear-gradient(to top, rgba(10,10,10,.4) 0%, transparent 40%);
}
.hero .container { padding: 64px 20px 68px; position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,164,224,.18);
  border: 1px solid rgba(142,196,239,.45); padding: 6px 14px; border-radius: 30px;
  font-size: 13px; font-weight: 700; color: #dff0ff; letter-spacing: .03em;
  backdrop-filter: blur(4px);
}
.hero h1 { font-size: clamp(30px, 4.8vw, 52px); line-height: 1.1; margin: 18px 0 14px; max-width: 760px; font-weight: 800; color: #fff; }
.hero h1 .hl { color: #b9dcff; border-bottom: 3px solid #5ba4e0; }
.hero p { font-size: 17.5px; color: #ececec; max-width: 620px; }
.hero-search {
  display: flex; gap: 0; margin-top: 26px; max-width: 640px;
  background: #fff; border-radius: 999px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.hero-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 15px 20px; font-size: 16px; color: var(--navy); min-width: 0;
}
.hero-search .btn { border-radius: 0; padding: 15px 24px; min-height: 52px; }
.hero-cta { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats .hs b { font-size: 28px; font-weight: 800; display: block; color: #fff; font-family: var(--display); }
.hero-stats .hs span { font-size: 13px; color: #c8c8c8; }

/* ---------- Секции ---------- */
.section { padding: 56px 0; }
.section.alt { background: #fff; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.sec-head h2 { font-size: 27px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.sec-head p { color: var(--muted); margin-top: 4px; }
.sec-link { color: var(--accent-dark); font-weight: 600; font-size: 14.5px; }
.sec-link:hover { text-decoration: underline; }

/* ---------- Плитки категорий ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.cat-tile {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 188px;
  display: flex; align-items: flex-end; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
  background: #1c1814;
}

.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tile .ct-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 8, .92) 0%, rgba(14, 11, 8, .2) 58%, rgba(14, 11, 8, .05) 100%); }
.cat-tile .ct-name { position: relative; z-index: 2; color: #fff; font-weight: 800; font-size: 16px; padding: 16px; width: 100%; }
.cat-tile .ct-name small { display: block; font-weight: 600; font-size: 12px; color: #b9dcff; margin-top: 4px; font-family: var(--font); }

/* ---------- Карточка товара ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; position: relative;
}

.card-img { position: relative; background: #fff; height: 190px; display: flex; align-items: center; justify-content: center; padding: 14px; border-bottom: 1px solid #f1f5f9; }
.card-img img { max-height: 100%; object-fit: contain; width: 100%; height: 100%; }
.card-badge { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.card-badge.off { background: var(--red); }
.card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-brand { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.card-name { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.card-name:hover { color: var(--accent-dark); }
.card-sku { font-size: 12px; color: #94a3b8; }
.card-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.card-price { font-size: 19px; font-weight: 800; color: var(--navy); }
.card-price-old { font-size: 13.5px; color: #94a3b8; text-decoration: line-through; }
.card-unit { font-size: 12px; color: var(--muted); }
.price-stack { margin-top: auto; display: grid; gap: 2px; }
.price-retail { font-size: 12.5px; color: #94a3b8; }
.price-retail s { text-decoration: line-through; }
.price-yours { font-size: 14px; color: #166534; font-weight: 600; }
.price-yours b { font-size: 19px; font-weight: 800; color: #166534; }
.price-pair { display: grid; gap: 4px; margin: 6px 0 10px; font-size: 14.5px; color: #475569; }
.price-pair b { color: #166534; font-size: 16px; }
.card-disc { display: none !important; }
.card-bottom { display: flex; gap: 8px; margin-top: 4px; }
.card-bottom .btn { flex: 1; }
.stock-line { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.stock-line .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green); }
.dot-gray { background: #94a3b8; }

/* ---------- Преимущества ---------- */
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.adv-item { background: var(--card); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); border: 1px solid #ebe4d8; }
.adv-item .ai-icon { width: 46px; height: 46px; border-radius: 12px; background: #eaf4fc; color: #3d8bc9; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.adv-item h3 { font-size: 16px; color: var(--navy); margin-bottom: 5px; }
.adv-item p { font-size: 13.5px; color: var(--muted); }

/* ---------- О компании ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.about-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.about-text h2 { font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 14px; }
.about-text p { color: #475569; margin-bottom: 12px; font-size: 15.5px; }
.about-list { margin: 14px 0 22px; display: grid; gap: 9px; }
.about-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text); }
.about-list svg { flex: none; margin-top: 2px; color: var(--green); }

/* ---------- Города ---------- */
.city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.city-card { background: var(--card); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); border-top: 3px solid var(--copper); }
.city-card h3 { font-size: 20px; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.city-card .cc-row { display: flex; gap: 10px; font-size: 14.5px; color: #475569; margin-bottom: 7px; align-items: flex-start; }
.city-card .cc-row b { color: var(--navy); font-weight: 600; }

/* ---------- CTA ---------- */
.cta-band { background: #171717; border-radius: 16px; padding: 40px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero .btn-primary, .cta-band .btn-primary { background: #fff; color: var(--navy); }
.hero .btn-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn-white:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-orange { background: var(--copper); color: #fff; border-color: var(--copper); }
.hero .btn-orange { background: var(--copper); color: #fff; border-color: var(--copper); }
@media (hover: hover) and (pointer: fine) {
  .btn-orange:hover, .hero .btn-orange:hover { background: var(--accent-dark); transform: translateY(-1px); }
  .btn-copper:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(61,139,201,.35); }
}
.cta-band h2 { font-size: 24px; font-weight: 800; }
.cta-band p { color: #b8c4da; margin-top: 5px; }

/* ---------- Таблица спецификаций ---------- */
.spec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.spec-table td { padding: 10px 16px; font-size: 14.5px; border-bottom: 1px solid #f1f5f9; }
.spec-table td:first-child { color: var(--muted); width: 42%; }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table tr:nth-child(odd) { background: #fafbfc; }

/* ---------- Страница товара ---------- */
.breadcrumbs { font-size: 13px; color: var(--muted); padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs a:hover { color: var(--accent-dark); }
.breadcrumbs .sep { color: #cbd5e1; }
.pg { display: grid; grid-template-columns: 420px 1fr; gap: 36px; padding: 22px 0 50px; }
.pg-img { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; display: flex; align-items: center; justify-content: center; height: 420px; position: sticky; top: 140px; }
.pg-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-info h1 { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.pg-meta { display: flex; gap: 18px; font-size: 13.5px; color: var(--muted); margin: 10px 0 16px; flex-wrap: wrap; }
.pg-meta .brand { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--navy-3); }
.pg-price { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 4px; }
.pg-price .now { font-size: 34px; font-weight: 800; color: var(--navy); }
.pg-price .old { font-size: 18px; color: #94a3b8; text-decoration: line-through; }
.pg-price .per { font-size: 14px; color: var(--muted); }
.pg-stock { margin: 8px 0 18px; font-weight: 600; font-size: 14.5px; }
.pg-buy { display: flex; gap: 12px; margin: 18px 0; flex-wrap: wrap; align-items: center; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #fff; }
.qty button { border: 0; background: #f8fafc; width: 38px; height: 44px; font-size: 19px; color: var(--navy); }
.qty button:hover { background: #f1f5f9; }
.qty input { border: 0; width: 56px; text-align: center; outline: 0; font-weight: 700; font-size: 16px; }
.pg-notes { display: grid; gap: 9px; margin-top: 18px; padding: 16px; background: #f8fafc; border-radius: 12px; font-size: 13.5px; color: var(--muted); }
.pg-notes li { display: flex; gap: 8px; align-items: center; }
.pg-notes svg { color: var(--green); flex: none; }

/* ---------- Фильтры каталога ---------- */
.filter-bar { background: #fff; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin: 20px 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.filter-bar label { font-size: 13.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.filter-bar select, .filter-bar input[type=text] { border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; background: #fff; outline: 0; }
.filter-bar input[type=text]:focus { border-color: var(--accent); }
.filter-bar .f-price { display: flex; gap: 6px; align-items: center; }
.filter-bar .f-price input { width: 90px; }
.brand-list { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-chip { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 4px 11px; font-size: 13px; cursor: pointer; background: #fff; }
.brand-chip:has(input:checked) { border-color: var(--accent); background: #f3f3f3; color: var(--accent-dark); }
.brand-chip input { accent-color: var(--accent); }
.chip-reset { background: none; border: 0; color: var(--accent-dark); font-size: 13px; font-weight: 600; }

/* ---------- Корзина ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; padding: 24px 0 60px; }
.cart-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 16px; margin-bottom: 12px;
}
.cart-sel-all {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--navy); cursor: pointer; min-height: 44px;
}
.cart-sel-all input, .ci-check input {
  width: 20px; height: 20px; accent-color: #0a0a0a; flex: none; cursor: pointer;
}
.cart-sel-count { color: var(--muted); font-size: 13.5px; font-weight: 600; margin-right: auto; }
.cart-del-sel { border-color: #fecaca; color: #b91c1c; min-height: 42px; }
.cart-del-sel:hover:not(:disabled) { background: #fef2f2; border-color: #dc2626; }
.ci-check {
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 44px; cursor: pointer; margin: 0;
}
.cart-items { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ci-row { display: grid; grid-template-columns: 36px 84px 1fr auto; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #f1f5f9; align-items: center; }
.ci-row.on { background: #f8fafc; }
.ci-row:last-child { border-bottom: 0; }
.ci-img { width: 84px; height: 84px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #f1f5f9; overflow: hidden; }
.ci-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ci-name { font-weight: 600; font-size: 14.5px; }
.ci-name a:hover { color: var(--accent-dark); }
.ci-sku { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.ci-price { font-weight: 700; font-size: 15px; color: var(--navy); }
.ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ci-total { font-size: 16px; font-weight: 800; color: var(--navy); }
.ci-remove { background: none; border: 0; color: #94a3b8; font-size: 12.5px; text-decoration: underline; }
.ci-remove:hover { color: var(--red); }
.cart-summary { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; position: sticky; top: 140px; }
.cart-summary h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 14px; }
.cs-row { display: flex; justify-content: space-between; font-size: 14px; color: #475569; padding: 6px 0; }
.cs-row.total { border-top: 1.5px dashed #e2e8f0; margin-top: 8px; padding-top: 12px; font-size: 17px; font-weight: 800; color: var(--navy); }
.cs-note { font-size: 12px; color: var(--muted); margin-top: 12px; background: #f8fafc; border-radius: 8px; padding: 9px 11px; }
.empty-state { text-align: center; padding: 70px 20px; }
.empty-state .es-icon { font-size: 52px; margin-bottom: 12px; }
.empty-state h3 { font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.empty-state p { color: var(--muted); margin-bottom: 20px; }

/* ---------- Формы ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 11px 13px; outline: 0; background: #fff; width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
.form-field textarea { min-height: 90px; resize: vertical; }
.form-field .hint { font-size: 12px; color: var(--muted); }
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.form-card h2 { font-size: 20px; color: var(--navy); margin-bottom: 18px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding: 24px 0 60px; }
.mini-cart { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.mini-cart .mc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed #f1f5f9; }
.mini-cart .mc-row span:first-child { color: var(--muted); }
.mini-cart .mc-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 17px; padding-top: 12px; color: var(--navy); }

/* ---------- Алерты ---------- */
.alert { padding: 13px 16px; border-radius: 10px; font-size: 14.5px; margin: 16px 0; display: flex; gap: 10px; align-items: center; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---------- Подвал ---------- */
.footer { background: #111; color: #a3a3a3; margin-top: 40px; }
.footer .container { padding: 46px 20px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: .02em; }
.footer ul { display: grid; gap: 8px; font-size: 14px; }
.footer ul a:hover { color: #fff; }
.footer .f-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer .f-contact { display: grid; gap: 10px; font-size: 14px; }
.footer .f-contact b { color: #fff; font-size: 16px; display: block; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 34px; padding-top: 18px; font-size: 12.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #7e8ba6; }

/* ---------- Модальное окно ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-bg.open { display: flex; }
.modal { background: #fff; border-radius: 16px; max-width: 480px; width: 100%; padding: 26px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow: auto; position: relative; }
.modal h3 { font-size: 20px; color: var(--navy); margin-bottom: 4px; }
.modal .m-sub { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 22px; color: var(--muted); line-height: 1; }
.modal-close:hover { color: var(--navy); }
.modal .form-grid { grid-template-columns: 1fr; }

/* ---------- Личный кабинет ---------- */
.account-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; padding: 26px 0 60px; align-items: start; }
.profile-side { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.profile-side .ps-ava { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.profile-side h3 { color: var(--navy); font-size: 17px; }
.profile-side .ps-meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.order-row { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.order-row .or-num { font-weight: 800; color: var(--navy); }
.order-row .or-date { color: var(--muted); font-size: 13px; }
.order-row .or-total { font-weight: 700; }
.badge-status { padding: 4px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
.badge-status.orange { background: #f3f3f3; color: #111111; }
.badge-status.blue { background: #eff6ff; color: #1d4ed8; }
.badge-status.violet { background: #f5f3ff; color: #6d28d9; }
.badge-status.green { background: #f0fdf4; color: #15803d; }
.badge-status.gray { background: #f1f5f9; color: #475569; }

/* ---------- Админка ---------- */
.admin-wrap { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 40px); }
.admin-side { background: var(--navy); color: #cbd5e1; padding: 20px 14px; }
.admin-side .as-logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 14px; }
.admin-side .as-logo b { color: #fff; font-size: 17px; }
.admin-side a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 9px; font-size: 14px; margin-bottom: 2px; }
.admin-side a:hover, .admin-side a.on { background: rgba(255, 255, 255, .09); color: #fff; }
.admin-main { padding: 24px 28px; background: #f4f5f7; min-width: 0; }
.admin-main h1 { font-size: 23px; font-weight: 800; color: var(--navy); margin-bottom: 18px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { background: #fff; border-radius: 12px; padding: 18px; box-shadow: var(--shadow); }
.stat-card b { font-size: 26px; font-weight: 800; color: var(--navy); display: block; }
.stat-card span { font-size: 13px; color: var(--muted); }
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.table th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 14px; border-bottom: 2px solid #f1f5f9; background: #fafbfc; }
.table td { padding: 11px 14px; font-size: 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .t-actions { display: flex; gap: 6px; }
.tiny-btn { border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; padding: 4px 9px; font-size: 12.5px; color: var(--navy); }
.tiny-btn:hover { border-color: var(--navy); }
.tiny-btn.danger { color: var(--red); }
.tiny-btn.danger:hover { border-color: var(--red); }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 8px 11px; background: #fff; outline: 0; }

/* ---------- Мобильное ---------- */

@media (max-width: 1024px) {
  .header .container { grid-template-columns: auto 1fr auto; }
  .hphone { display: none; }
  .pg { grid-template-columns: 320px 1fr; gap: 24px; }
  .cart-layout, .checkout-layout, .account-layout { grid-template-columns: 1fr; }
  .cart-summary, .mini-cart { position: static; }
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-side { display: flex; overflow-x: auto; padding: 10px; gap: 4px; }
  .admin-side .as-logo { display: none; }
  .admin-side a { white-space: nowrap; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .header .container { grid-template-columns: auto 1fr auto; gap: 8px; }
  .search-wrap, .search-box { grid-column: 1 / -1; order: 3; }
  .header-actions { gap: 2px; }
  .hphone, .icon-btn .lbl, .hdr-tool { display: none; }
  .hero .container { padding: 46px 20px 54px; }
  .pg { grid-template-columns: 1fr; }
  .pg-img { position: static; height: 300px; }
  .form-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 26px; }
  .ci-row { grid-template-columns: 64px 1fr; }
  .ci-img { width: 64px; height: 64px; }
  .ci-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .topbar .tb-right { display: none; }
}
@media (max-width: 560px) {
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .card-img { height: 150px; }
  .hero-stats { gap: 22px; }
  .section { padding: 36px 0; }
  .sec-head h2 { font-size: 22px; }
  .hero h1 { font-size: 28px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-tile { min-height: 110px; }
  .card-price { font-size: 16px; }
  .btn { padding: 10px 14px; font-size: 14px; }
  .pg-buy { flex-direction: column; align-items: stretch; }
  .pg-buy .qty { justify-content: center; }
  .notice-price { font-size: 11.5px; }
}

/* ---------- Шаги заказа ---------- */
.page-h { font-size:28px; font-weight:800; color:var(--navy); padding:8px 0 6px; }
.page-lead { margin-bottom:16px; max-width:640px; }
.steps { display:flex; gap:0; list-style:none; padding:18px 0 6px; margin:0; font-size:13px; font-weight:700; color:#94a3b8; }
.steps li { display:flex; align-items:center; gap:8px; }
.steps li + li::before { content:"›"; margin:0 10px; color:#cbd5e1; font-weight:400; }
.steps .on { color:var(--navy); }
.steps a { color:var(--accent-dark); }
.ok-num { font-size:18px; margin:10px 0 8px; color:var(--navy); }
.ok-items { text-align:left; margin:18px auto 0; max-width:420px; }
.checkout-alt { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; font-size:13.5px; color:var(--muted); }
.filter-toggle { display:none; }
.nav-mob-extra { display:none; }
.burger { display:none; }
.nav-scrim { display:none; }
.mob-bar { display:none; }
.mob-buybar { display:none; }
.icon-call-desk { display:none; }

/* ---------- Нижняя панель / бургер / sticky buy ---------- */
.burger {
  width:44px; height:44px; border:0; background:#262626; border-radius:12px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;
}
.burger span { display:block; width:18px; height:2px; background:#fff; border-radius:2px; transition:.2s; }
body.nav-open .burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity:0; }
body.nav-open .burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mob-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:#fff; border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  display:none; grid-template-columns:repeat(4,1fr); gap:2px;
  box-shadow:0 -6px 20px rgba(20,27,46,.08);
}
.mob-bar a, .mob-bar button {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:0; color:var(--muted); font-size:11px; font-weight:700;
  padding:6px 4px; border-radius:10px; min-height:48px;
}
.mob-bar svg { width:22px; height:22px; }
.mob-bar a.on, .mob-bar a:active { color:var(--accent-dark); }
.mob-bar-cart { position:relative; }
.mob-bar .cart-count { top:2px; right:18%; }

.mob-buybar {
  position:fixed; left:0; right:0; bottom:0; z-index:85;
  background:#fff; border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  display:none; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 -8px 24px rgba(20,27,46,.12);
}
.mob-buybar .btn { flex:1; min-height:48px; }
.mbb-price { font-size:20px; font-weight:800; color:var(--navy); line-height:1.1; }
.mbb-price small { display:block; font-size:12px; font-weight:600; color:var(--muted); }

@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
  .topbar { display:none; }
  .burger { display:flex; }
  .icon-call-desk { display:none !important; }
  .header { top:0; }
  .header .container { grid-template-columns:auto 1fr auto; gap:10px; padding:10px 12px; }
  .logo-img { height: 36px; max-width: min(220px, 54vw); }
  .search-wrap, .search-box { grid-column:1 / -1; order:3; }
  .navbar {
    display: none !important;
    pointer-events: none;
    position:fixed; inset:0 22% 0 0; top:0; z-index:140;
    background:#111; overflow:auto; padding:70px 0 80px;
    box-shadow: var(--shadow-lg);
    border-bottom: 0;
  }
  body.nav-open .navbar { display: block !important; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .nav-scrim {
    display: none !important;
    pointer-events: none !important;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 130;
  }
  body.nav-open .nav-scrim {
    display: block !important;
    pointer-events: auto !important;
  }
  .header { z-index: 150; }
  .navbar .container { flex-direction:column; align-items:stretch; gap:0; padding:0 10px; overflow:visible; }
  .nav-link { padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.08); font-size:16px; color:#e5e5e5; }
  .nav-link:hover, .nav-link.on { color:#fff; background:transparent; border-bottom-color: var(--copper); }
  .nav-cat-row {
    display: grid; grid-template-columns: 1fr 48px; align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-cat-row .nav-link { border-bottom: 0; min-height: 48px; }
  .nav-cat-more {
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; color: #fff; min-height: 48px;
  }
  .nav-cat.open .nav-cat-more { transform: rotate(180deg); }
  .nav-cat .nav-drop {
    display:none; position:static; box-shadow:none; background:rgba(255,255,255,.06);
    min-width:0; border-radius:10px; margin:0 8px 8px;
  }
  .nav-cat.open .nav-drop { display:block; }
  .nav-drop a { color:#e2e8f0; }
  .nav-drop a:hover { background:rgba(255,255,255,.08); color:#fff; }
  .nav-mob-extra { display:block; margin-top:10px; border-top:1px solid rgba(255,255,255,.12); padding-top:6px; }
  .mob-bar { display:grid; }
  body { padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)); }
  .footer { margin-bottom:0; }
  .filter-toggle {
    display:flex; width:100%; margin-top:14px; min-height:46px;
    align-items:center; justify-content:center; gap:8px;
    border:1.5px solid #e2e8f0; background:#fff; border-radius:12px;
    font-weight:700; color:var(--navy);
  }
  .filter-toggle.on { border-color:var(--accent); background:#f3f3f3; }
  .filter-bar { display:none; flex-direction:column; align-items:stretch; }
  .filter-bar.open { display:flex; }
  .filter-bar select, .filter-bar input[type=text], .brand-dd-btn { width:100%; min-height:44px; }
  .f-price { width:100%; }
  .f-price input { flex:1; width:auto; }
  .brand-dd-panel { width:100%; position:static; box-shadow:none; border:0; padding:6px 0 0; }
  .pg-img { position:static; height:280px; }
  .card-more { display:none; }
  .card-bottom .btn { min-height:42px; }
  #prod-sticky, #cart-sticky:not([hidden]) { display:flex; }
}
@media (min-width: 901px) {
  .icon-call-desk { display:flex; }
  .mob-buybar, .mob-bar, .burger, .nav-scrim, .filter-toggle, .mob-sheet, .cat-strip { display:none !important; }
  body { padding-bottom:0; }
}

/* ---------- Мелкие помощники ---------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.text-muted { color: var(--muted); } .text-navy { color: var(--navy); }
.price { font-weight: 800; color: var(--navy); }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .gap-12 { gap: 12px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-orange { background: #f3f3f3; color: #111111; }
.notice-price { font-size: 12.5px; color: var(--muted); background: #f6f6f6; border: 1px dashed #d4d4d4; border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: #f1f5f9; padding: 1px 6px; border-radius: 5px; }
.cat-group-title {
  font-size: 20px; font-weight: 800; color: var(--navy);
  margin: 28px 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid #e8e8e8; letter-spacing: -.01em;
}
.cat-group-title .cat-group-cat {
  display: block; font-size: 12px; font-weight: 700; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px;
}
.brand-dd { position: relative; }
.brand-dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid #e2e8f0; background: #fff; border-radius: 9px;
  padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--navy);
}
.brand-dd-btn:hover, .brand-dd.open .brand-dd-btn { border-color: var(--accent); }
.brand-dd-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 80;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); width: min(360px, 86vw); padding: 10px;
}
.brand-dd-list {
  max-height: 280px; overflow: auto; display: grid; gap: 2px;
}
.brand-dd-item {
  display: flex; gap: 8px; align-items: center; padding: 7px 8px;
  border-radius: 8px; font-size: 13.5px; cursor: pointer;
}
.brand-dd-item:hover { background: #f3f3f3; }
.brand-dd-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; margin-top: 8px; }
.admin-side a.on { background: rgba(0,0,0,.12); color: #fff; }
.settings-form .form-card { margin-bottom: 18px; }
.settings-form .form-card h2 { font-size: 17px; margin-bottom: 6px; }
.settings-form .sec-lead { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.settings-sticky {
  position: sticky; bottom: 12px; z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow-lg); margin: 4px 0 24px;
}

/* ---------- Админка: мобильная версия ---------- */
@media (max-width: 900px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 720px; }
  .admin-main { padding: 16px 12px; }
  .admin-main h1 { font-size: 19px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar form { flex-direction: column; align-items: stretch; }
  .toolbar input, .toolbar select { width: 100%; }
  .btn { min-height: 44px; }
  .form-card { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-side { overflow-x: auto; flex-wrap: nowrap; }
  .admin-side a { white-space: nowrap; padding: 10px; }
}
.disc-card {
  margin-top: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px;
  padding: 12px; display: grid; gap: 4px;
}
.disc-card b { color: #166534; font-size: 15px; }
.disc-card span { color: #64748b; font-size: 12.5px; }
.cat-strip {
  display: none; gap: 8px; overflow-x: auto; padding: 12px 0 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip-item {
  flex: none; border: 1.5px solid #e2e8f0; background: #fff; color: var(--navy);
  border-radius: 20px; padding: 8px 14px; font-size: 13.5px; font-weight: 700;
  min-height: 40px; display: inline-flex; align-items: center;
}
.cat-strip-item.on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.mob-sheet {
  position: fixed; inset: 0; z-index: 180; background: rgba(15,23,42,.5);
  display: flex; align-items: flex-end;
}
.mob-sheet-panel {
  background: #fff; width: 100%; max-height: 82vh; overflow: auto;
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
.mob-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mob-sheet-head b { font-size: 18px; color: var(--navy); }
.mob-sheet-all {
  display: block; background: #0a0a0a; color: #fff; text-align: center;
  border-radius: 12px; padding: 12px; font-weight: 700; margin-bottom: 14px; min-height: 46px;
}
.mob-sheet-cat { padding: 10px 0 12px; border-bottom: 1px solid #f1f5f9; }
.mob-sheet-title { display: block; font-weight: 800; color: var(--navy); font-size: 16px; padding: 6px 0; min-height: 40px; }
.mob-sheet-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.mob-sheet-subs a {
  border: 1px solid #e2e8f0; border-radius: 18px; padding: 7px 11px;
  font-size: 13px; font-weight: 600; color: #334155; min-height: 36px;
  display: inline-flex; align-items: center;
}
@media (max-width: 900px) {
  .cat-strip { display: flex; }
}

/* ---------- Админка: мобильная версия ---------- */
@media (max-width: 900px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 720px; }
  .admin-main { padding: 16px 12px; }
  .admin-main h1 { font-size: 19px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar form { flex-direction: column; align-items: stretch; }
  .toolbar input, .toolbar select { width: 100%; }
  .btn { min-height: 44px; }
  .form-card { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-side { overflow-x: auto; flex-wrap: nowrap; }
  .admin-side a { white-space: nowrap; padding: 10px; }
}

/* ---------- Смета / щит ---------- */
.tools-page { padding-bottom: 60px; }
.tool-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 14px; }
.tool-tab {
  border:1.5px solid #e2e8f0; background:#fff; border-radius:20px;
  padding:9px 16px; font-weight:700; color:var(--navy); min-height:42px;
}
.tool-tab.on { background:#0a0a0a; color:#fff; border-color:#0a0a0a; }
.dropzone {
  background:#fff; border:2px dashed #cbd5e1; border-radius:16px;
  padding:36px 22px; text-align:center; cursor:pointer;
  display:grid; gap:8px; justify-items:center;
}
.dropzone.over { border-color:#0a0a0a; background:#f8fafc; }
.dropzone b { font-size:17px; color:var(--navy); }
.dz-icon { font-size:36px; }
.dz-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.photo-preview img { max-height:220px; margin:12px auto 0; border-radius:10px; }
.seen-chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.seen-chip {
  background:#f5f5f5; color:#171717; border:1px solid #d4d4d4;
  border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600;
}
.work-chip { background:#eff6ff; color:#1e40af; border-color:#93c5fd; }
.smeta-result { margin-top:22px; }
.smeta-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-bottom:14px;
}
.smeta-stats > div {
  background:#fff; border-radius:12px; padding:14px; box-shadow:var(--shadow);
}
.smeta-stats b { display:block; font-size:22px; color:var(--navy); }
.smeta-stats span { color:var(--muted); font-size:13px; }
.smeta-stats .ok b { color:#15803d; }
.smeta-stats .oos b { color:#b45309; }
.smeta-stats .miss b { color:#b91c1c; }
.smeta-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 16px; }
.smeta-table { display:grid; gap:10px; }
.sr-row {
  background:#fff; border-radius:12px; box-shadow:var(--shadow);
  padding:14px 16px; display:grid; gap:10px; border-left:4px solid #e2e8f0;
}
.sr-row.ok { border-left-color:#16a34a; }
.sr-row.oos { border-left-color:#d97706; }
.sr-row.missing { border-left-color:#dc2626; }
.sr-q small { display:block; color:var(--muted); font-size:12px; }
.sr-found { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; }
.sr-found img { width:56px; height:56px; object-fit:contain; }
.sr-sum { font-weight:800; color:var(--navy); white-space:nowrap; }
.sr-al small { color:var(--muted); font-size:12px; }
.sr-al-list { display:grid; gap:8px; margin-top:6px; }
.sr-al-item {
  display:grid; grid-template-columns:18px 44px 1fr; gap:10px; align-items:center;
  border:1px solid #e2e8f0; border-radius:10px; padding:8px 10px; cursor:pointer;
}
.sr-al-item img { width:44px; height:44px; object-fit:contain; }
.sr-al-item:has(input:checked) { border-color:#0a0a0a; background:#f8fafc; }
/* ---------- КАПРИН Рентген щита ---------- */
.photo-preview { position:relative; width:min(100%, 760px); overflow:hidden; border-radius:12px; }
.photo-preview.xray-scanning img { filter:saturate(.75) contrast(1.08) brightness(.72); }
.photo-preview.xray-scanning::before {
  content:"ИИ СКАНИРУЕТ ЩИТ"; position:absolute; inset:12px 12px auto; z-index:3;
  padding:7px 10px; border:1px solid rgba(74,222,128,.65); border-radius:8px;
  color:#86efac; background:rgba(2,6,23,.78); font-size:11px; font-weight:800;
  letter-spacing:.12em; backdrop-filter:blur(6px);
}
.photo-preview.xray-scanning::after {
  content:""; position:absolute; z-index:2; left:5%; right:5%; top:8%; height:3px;
  background:#22c55e; box-shadow:0 0 8px #22c55e, 0 0 24px #4ade80, 0 12px 45px 18px rgba(34,197,94,.22);
  animation:xrayScan 1.45s ease-in-out infinite alternate;
}
@keyframes xrayScan { from { transform:translateY(0); } to { transform:translateY(185px); } }

.xray-card {
  margin:18px 0; padding:20px; border-radius:20px; color:#e2e8f0;
  background:radial-gradient(circle at 90% 0, rgba(34,197,94,.14), transparent 34%), linear-gradient(145deg,#07111f,#111827 65%,#0f172a);
  border:1px solid #263449; box-shadow:0 22px 55px rgba(2,6,23,.23); overflow:hidden;
}
.xray-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.xray-head h3 { margin:4px 0 0; color:#fff; font-size:22px; }
.xray-kicker { color:#4ade80; font-size:11px; font-weight:900; letter-spacing:.15em; }
.xray-live { display:inline-flex; align-items:center; gap:7px; color:#bbf7d0; font-size:12px; font-weight:700; white-space:nowrap; }
.xray-live i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.12); }
.xray-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.xray-tab {
  border:1px solid #3a475b; background:#162235; color:#cbd5e1; border-radius:999px;
  padding:8px 14px; min-height:40px; font-size:13px; font-weight:800; transition:.2s;
}
.xray-tab:hover { border-color:#64748b; transform:translateY(-1px); }
.xray-tab.on { color:#052e16; background:#4ade80; border-color:#4ade80; box-shadow:0 8px 22px rgba(34,197,94,.2); }
.xray-stage { min-height:240px; padding:14px; border:1px solid #263449; border-radius:16px; background:rgba(2,6,23,.5); }
.xray-beforeafter { display:grid; grid-template-columns:minmax(190px,.72fr) minmax(0,1.4fr); gap:14px; align-items:stretch; }
.xray-side { min-width:0; }
.xray-side > span { display:block; margin:0 0 8px; color:#94a3b8; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.xray-photo { height:100%; min-height:215px; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:#020617; }
.xray-photo img { width:100%; height:100%; max-height:360px; object-fit:contain; }
.xray-photo-frame { position:relative; display:inline-block; max-width:100%; max-height:360px; line-height:0; }
.xray-photo .xray-photo-frame img { display:block; width:auto; height:auto; max-width:100%; max-height:360px; object-fit:contain; }
.xray-detections { position:absolute; inset:0; pointer-events:none; }
.xray-detection {
  position:absolute; z-index:2; pointer-events:auto; padding:0; border:2px solid #60a5fa;
  border-radius:5px; background:rgba(37,99,235,.1); box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 16px rgba(37,99,235,.4);
  transition:.18s;
}
.xray-detection-uzo { border-color:#4ade80; background:rgba(34,197,94,.1); box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 16px rgba(34,197,94,.4); }
.xray-detection-rcbo { border-color:#fb923c; background:rgba(249,115,22,.1); box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 16px rgba(249,115,22,.45); }
.xray-detection span { position:absolute; left:-2px; top:-23px; padding:3px 5px; border-radius:4px 4px 4px 0; background:#2563eb; color:#fff; font-size:9px; line-height:1.2; font-weight:900; white-space:nowrap; }
.xray-detection-uzo span { background:#16a34a; }
.xray-detection-rcbo span { background:#ea580c; }
.xray-detection:hover, .xray-detection.on { transform:scale(1.035); z-index:4; border-width:3px; filter:brightness(1.2); }
.xray-photo-empty { display:grid; place-items:center; min-height:210px; padding:20px; color:#64748b; text-align:center; border:1px dashed #334155; border-radius:12px; }
.din-board { display:grid; gap:12px; min-width:0; }
.din-rail-wrap { position:relative; min-width:0; padding:24px 10px 12px; border-radius:12px; background:#0b1322; border:1px solid #263449; }
.din-rail-label { position:absolute; top:5px; left:10px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.1em; }
.din-rail {
  display:flex; align-items:center; gap:3px; overflow-x:auto; padding:13px 8px;
  background:linear-gradient(to bottom, transparent 43%,#64748b 43%,#b8c1ce 48%,#64748b 54%,transparent 54%);
  scrollbar-width:thin;
}
.din-device {
  --mods:1; position:relative; flex:0 0 calc(var(--mods) * 52px); width:calc(var(--mods) * 52px);
  min-width:52px; height:126px; padding:14px 5px 8px; overflow:hidden; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:linear-gradient(155deg,#fff,#e7ebf0); color:#111827; border:1px solid #cbd5e1;
  border-radius:5px; box-shadow:0 7px 16px rgba(0,0,0,.24); transition:.18s;
}
.din-device::before { content:""; position:absolute; left:0; right:0; top:0; height:7px; background:#2563eb; }
.din-device.din-uzo::before { background:#16a34a; }
.din-device.din-rcbo::before { background:#f97316; }
.din-device span { display:block; width:100%; color:#64748b; font-size:8px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.din-device b { font-size:13px; line-height:1.05; }
.din-device em { max-width:100%; color:#334155; font-size:8px; font-weight:800; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.din-device:hover, .din-device.on { z-index:2; transform:translateY(-4px); border-color:#4ade80; box-shadow:0 0 0 2px #4ade80,0 12px 25px rgba(0,0,0,.3); }
.xray-device-detail { margin-top:12px; padding:11px 13px; min-height:48px; border-radius:11px; color:#94a3b8; background:#0a1424; border:1px solid #263449; font-size:12px; }
.xray-device-detail b { display:block; color:#fff; font-size:14px; margin-bottom:3px; }
.xray-device-detail span { color:#cbd5e1; }
.xray-offer-bar { margin-top:12px; padding:13px 15px; display:flex; justify-content:space-between; gap:18px; align-items:center; border-radius:12px; background:rgba(34,197,94,.08); border:1px solid rgba(74,222,128,.25); }
.xray-offer-bar small, .xray-offer-bar span { display:block; color:#94a3b8; font-size:11px; }
.xray-offer-bar b { display:block; margin:2px 0; color:#fff; font-size:22px; }
.xray-offer-bar p { max-width:340px; margin:0; color:#cbd5e1; font-size:12px; }
.xray-warning, .xray-safe { display:flex; align-items:flex-start; gap:14px; margin:8px 0; padding:13px 15px; border-radius:12px; }
.xray-warning { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }
.xray-warning b { flex:0 0 auto; }
.xray-warning span, .xray-safe span { font-size:13px; }
.xray-safe { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.xray-safe b { display:block; }
.xray-share-card { display:grid; grid-template-columns:116px 1fr; gap:16px; align-items:center; margin:10px 0 20px; padding:14px; border:1px solid #dbe4ee; border-radius:14px; background:#fff; box-shadow:var(--shadow); }
.xray-share-card[hidden] { display:none; }
.xray-share-card img { width:116px; height:116px; object-fit:contain; border:1px solid #e2e8f0; border-radius:10px; }
.xray-share-card b { display:block; margin:4px 0; color:var(--navy); font-size:16px; }
.xray-share-card p { margin:0 0 8px; color:var(--muted); font-size:12px; }

/* ---------- Публичный цифровой паспорт щита ---------- */
.passport-page { max-width:1180px; }
.passport-hero { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:12px 0 22px; padding:26px 28px; border-radius:20px; color:#e2e8f0; background:radial-gradient(circle at 90% 0,rgba(34,197,94,.17),transparent 36%),linear-gradient(145deg,#07111f,#111827); box-shadow:0 20px 50px rgba(2,6,23,.2); }
.passport-hero h1 { margin:5px 0; color:#fff; font-size:30px; }
.passport-hero p { margin:0; color:#94a3b8; }
.passport-stamp { flex:0 0 auto; min-width:160px; padding:13px 16px; text-align:center; border:1px solid rgba(74,222,128,.4); border-radius:12px; background:rgba(34,197,94,.08); }
.passport-stamp span, .passport-stamp small { display:block; color:#86efac; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.passport-stamp b { display:block; margin:4px 0; color:#fff; font-size:18px; letter-spacing:.08em; }
.passport-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:20px; align-items:start; }
.passport-layout main { display:grid; gap:16px; min-width:0; }
.passport-section { padding:20px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.passport-section-head { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:14px; }
.passport-section-head > div { display:flex; align-items:center; gap:9px; }
.passport-section-head span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#166534; background:#dcfce7; font-size:11px; font-weight:900; }
.passport-section-head h2 { margin:0; color:var(--navy); font-size:19px; }
.passport-section-head > b { color:var(--navy); }
.passport-din { padding:13px; border-radius:13px; background:#07111f; }
.passport-din .din-rail { min-height:155px; }
.passport-seen { margin-top:14px; }
.passport-variants { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.passport-variant { display:block; padding:14px; border:1px solid #e2e8f0; border-radius:12px; color:var(--navy); background:#f8fafc; transition:.18s; }
.passport-variant:hover { transform:translateY(-2px); border-color:#86efac; }
.passport-variant.on { border-color:#22c55e; background:#f0fdf4; box-shadow:0 0 0 2px rgba(34,197,94,.12); }
.passport-variant span, .passport-variant small { display:block; }
.passport-variant span { color:#64748b; font-size:11px; font-weight:800; text-transform:uppercase; }
.passport-variant b { display:block; margin:4px 0; font-size:20px; }
.passport-variant small { color:#64748b; font-size:11px; }
.passport-aside { position:sticky; top:18px; display:grid; gap:14px; }
.passport-qr-card, .passport-meta-card { padding:18px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.passport-qr-card h3 { margin:5px 0 8px; color:var(--navy); }
.passport-qr-card > img { display:block; width:100%; aspect-ratio:1; object-fit:contain; border:1px solid #e2e8f0; border-radius:12px; }
.passport-qr-card p, .passport-meta-card p { color:var(--muted); font-size:12px; line-height:1.55; }
.passport-qr-card .btn + .btn { margin-top:8px; }
.passport-meta-card b { color:var(--navy); }

@media (max-width:900px) {
  .passport-layout { grid-template-columns:1fr; }
  .passport-aside { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .passport-aside > .btn { grid-column:1/-1; }
}

@media (max-width:760px) {
  .xray-card { padding:15px; border-radius:16px; }
  .xray-head { flex-direction:column; }
  .xray-beforeafter { grid-template-columns:1fr; }
  .xray-old-mini { display:none; }
  .xray-photo { min-height:180px; max-height:260px; }
  .xray-stage { padding:10px; }
  .xray-offer-bar { align-items:flex-start; flex-direction:column; gap:6px; }
  .xray-warning, .xray-safe { flex-direction:column; gap:4px; }
  .din-device { flex-basis:calc(var(--mods) * 48px); width:calc(var(--mods) * 48px); min-width:48px; height:116px; }
  .xray-share-card { grid-template-columns:86px 1fr; gap:11px; }
  .xray-share-card img { width:86px; height:86px; }
  .passport-hero { align-items:flex-start; flex-direction:column; padding:21px; }
  .passport-hero h1 { font-size:25px; }
  .passport-stamp { width:100%; }
  .passport-section { padding:15px; }
  .passport-section-head { align-items:flex-start; flex-direction:column; }
  .passport-variants { grid-template-columns:1fr; }
  .passport-aside { grid-template-columns:1fr; }
  .passport-aside > .btn { grid-column:auto; }
}

.shield-kinds { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:18px 0; }
.kind-card {
  text-align:left; background:#fff; border:1.5px solid #e2e8f0; border-radius:14px;
  padding:16px; display:grid; gap:6px; min-height:110px;
}
.kind-card b { color:var(--navy); font-size:15.5px; }
.kind-card span { color:var(--muted); font-size:13.5px; }
.kind-card.on { border-color:#0a0a0a; box-shadow:var(--shadow); }
.shield-opts .chk { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--navy); padding-top:22px; }
.brand-picks { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.brand-pick {
  border:1.5px solid #e2e8f0; background:#fff; border-radius:20px;
  padding:8px 14px; font-weight:700; color:var(--navy); min-height:40px;
}
.brand-pick.on { background:#0a0a0a; color:#fff; border-color:#0a0a0a; }
.empty-state .btn { margin: 4px; }
@media (max-width: 700px) {
  .sr-found { grid-template-columns: 48px 1fr; }
  .sr-found .btn, .sr-sum { grid-column: 1 / -1; }
}

/* ---------- Нав: смета и щит отдельно ---------- */
.nav-link.nav-tool {
  background: #fff; color: #0a0a0a; border-radius: 8px; margin: 6px 4px;
  border-bottom: 0; padding: 7px 14px; font-weight: 800;
}
.nav-link.nav-tool-alt { background: var(--copper); color: #fff; }
.nav-link.nav-tool.on, .nav-link.nav-tool:hover { background: #e5e7eb; color: #0a0a0a; }
.nav-link.nav-tool-alt.on, .nav-link.nav-tool-alt:hover { background: var(--accent-dark); color: #fff; }

.tools-home { background: var(--bg); padding-top: 36px; }
.tools-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tool-mega {
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 14px; padding: 26px 24px 22px; min-height: 300px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: var(--shadow);
}
.tool-mega:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tool-mega-smeta { border-top: 5px solid var(--navy); }
.tool-mega-shield { border-top: 5px solid var(--copper); background: #f3f8fd; }
.tool-mega-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b;
}
.tool-mega h3 { font-size: 26px; color: var(--navy); margin: 0; }
.tool-mega p { color: #475569; font-size: 15px; }
.tool-mega ul { display: grid; gap: 6px; color: #334155; font-size: 14px; margin: 4px 0 8px; }
.tool-mega ul li { padding-left: 18px; position: relative; }
.tool-mega ul li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 800; }
.tool-mega .btn { margin-top: auto; align-self: flex-start; }
.voice-card {
  display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 18px; align-items: center;
  background: #0a0a0a; color: #fff; border-radius: 18px; padding: 22px 22px 20px;
  margin: 0 0 18px; box-shadow: var(--shadow-lg);
}
.voice-copy b { display: block; font-size: 22px; margin: 4px 0 6px; }
.voice-copy p { color: #cbd5e1; font-size: 14.5px; margin: 0; }
.voice-card, .voice-card * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.voice-mic-wrap { display: grid; justify-items: center; gap: 8px; }
.voice-mic-cap {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #8ec4ef;
}
.voice-card.listening .voice-mic-cap { color: #fecaca; }
.voice-mic {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  border: 0; background: var(--copper); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 8px rgba(249,115,22,.25);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  user-select: none;
}
.voice-mic.on { background: #dc2626; box-shadow: 0 0 0 12px rgba(220,38,38,.28); }
.voice-wave {
  position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  opacity: 0;
}
.voice-card.listening .voice-wave { animation: voicePulse 1.1s ease-out infinite; opacity: 1; }
@keyframes voicePulse { from { transform: scale(.85); opacity: .8; } to { transform: scale(1.25); opacity: 0; } }
.voice-hint { font-size: 14px; color: #e2e8f0; font-weight: 600; }
.voice-live {
  margin-top: 8px; background: #1a1a1a; border-radius: 10px; padding: 8px 10px;
  font-size: 14px; color: #8ec4ef; min-height: 38px;
}
.voice-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.voice-ex {
  border: 1px solid #333; background: #161616; color: #e2e8f0;
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
}
.voice-ex:hover { border-color: var(--copper); color: #fff; }
@media (max-width: 760px) {
  .voice-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .voice-side { width: 100%; }
  .voice-chips { justify-content: center; }
  .voice-mic { width: 96px; height: 96px; }
}
.tools-switch { margin: -6px 0 16px; font-size: 14.5px; }
.tools-switch a { color: #c2410c; font-weight: 700; }

.gost-banner {
  background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #0a0a0a;
  border-radius: 12px; padding: 14px 16px; margin: 8px 0 18px; font-size: 14px;
}
.gost-banner b { display: block; margin-bottom: 6px; color: var(--navy); }
.gost-banner ul { display: grid; gap: 4px; color: #475569; }
.kit-group {
  font-size: 16px; font-weight: 800; color: var(--navy);
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #e8e8e8;
}
.kit-note { font-size: 12.5px; color: #64748b; margin: 4px 0 6px; line-height: 1.4; }

.mob-bar-5 { grid-template-columns: repeat(5, 1fr) !important; }
/* ---------- Каталог: рабочий стол ---------- */
.search-wrap { position: relative; min-width: 0; }
.search-drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80;
  background: #fff; color: var(--text); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid #e5e7eb;
}
.sd-item {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid #f1f5f9; color: inherit;
}
.sd-item:last-child { border-bottom: 0; }
.sd-item:hover, .sd-item.on { background: #f8fafc; }
.sd-item img { width: 44px; height: 44px; object-fit: contain; }
.sd-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.sd-sku { font-size: 12px; color: #64748b; margin-top: 2px; }
.sd-price { font-weight: 800; white-space: nowrap; color: var(--navy); }
.sd-more {
  display: block; padding: 10px 12px; font-size: 13px; font-weight: 700;
  background: #f8fafc; color: var(--navy); text-align: center;
}
.sd-empty { padding: 14px; color: #64748b; font-size: 13.5px; }

.desk-subs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.desk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.desk-chip {
  border: 1.5px solid #e2e8f0; background: #fff; color: var(--navy);
  border-radius: 999px; padding: 7px 13px; font-size: 13.5px; font-weight: 700;
  min-height: 36px; display: inline-flex; align-items: center;
}
.desk-chip:hover { border-color: #0a0a0a; }
.desk-chip.on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.brand-chip.on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.desk-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 14px 0 12px;
}
.desk-count { font-size: 14px; color: #64748b; }
.desk-count b { color: var(--navy); font-size: 16px; }
.view-toggle { display: inline-flex; border: 1.5px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.view-btn { padding: 8px 14px; font-size: 13.5px; font-weight: 700; color: #475569; background: #fff; }
.view-btn.on { background: #0a0a0a; color: #fff; }

.filter-bar input[type=search] {
  border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 8px 10px;
  background: #fff; outline: 0; min-width: 220px; flex: 1;
}
.filter-bar input[type=search]:focus { border-color: #0a0a0a; }

.cl-table { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cl-table .cat-group-title {
  margin: 0; padding: 14px 16px 10px; background: #f8fafc;
  border-bottom: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;
}
.cl-table .cat-group-title:first-child { border-top: 0; }
.cl-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(128px, 168px) 248px;
  column-gap: 28px; row-gap: 10px; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.cl-row:last-child { border-bottom: 0; }
.cl-row:hover { background: #fafafa; }
.cl-img {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #f1f5f9; border-radius: 10px; overflow: hidden;
}
.cl-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-brand { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.cl-name { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--navy); }
.cl-name:hover { text-decoration: underline; }
.cl-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 12.5px; color: #94a3b8; }
.cl-ok { color: #16a34a; font-weight: 700; }
.cl-price { text-align: right; padding-right: 8px; }
.cl-price b { display: block; font-size: 18px; font-weight: 800; color: var(--navy); }
.cl-unit, .cl-retail { display: block; font-size: 12px; color: #94a3b8; }
.cl-buy { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-left: 8px; }
.cl-buy .qty { flex: none; }
.cl-buy .btn { min-height: 44px; }

.pager {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  margin: 22px 0 8px;
}
.pager a, .pager span {
  min-width: 40px; min-height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-weight: 700; font-size: 14px;
  background: #fff; border: 1.5px solid #e2e8f0; color: var(--navy);
}
.pager a:hover { border-color: #0a0a0a; }
.pager .on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.pager-gap { border: 0; background: transparent; min-width: 16px; }

@media (max-width: 640px) {
  .hero-search { flex-direction: column; border-radius: 16px; }
  .hero-search .btn { width: 100%; border-radius: 0 0 16px 16px; }
}

@media (max-width: 760px) {
  .cl-row { grid-template-columns: 56px 1fr; }
  .cl-price { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .cl-price b { display: inline; }
  .cl-buy { grid-column: 1 / -1; justify-content: stretch; }
  .cl-buy .btn { flex: 1; }
  .filter-bar input[type=search] { min-width: 0; width: 100%; }
}

.wh-kicker {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--copper);
  margin-bottom: 4px;
}
.cat-tile .wh-kicker { display: block; color: #8ec4ef; margin-bottom: 4px; }
.cat-grid-wh { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cat-grid-wh .cat-tile { min-height: 210px; }

.wh-docks-bar { background: #14110e; color: #eadfd0; }
.wh-docks-bar .container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.wh-dock-mini {
  display: grid; gap: 4px; padding: 18px 8px 18px 0; color: inherit;
  border-right: 1px solid #2a241c;
}
.wh-dock-mini:last-child { border-right: 0; padding-left: 28px; }
.wh-dock-mini b { font-family: var(--display); font-size: 20px; color: #fff; }
.wh-dock-mini em { font-style: normal; color: #f3b06a; font-size: 13px; font-weight: 700; }
.wh-dock-mini:hover b { color: #f3b06a; }

.wh-docks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 8px; }
.wh-dock {
  background: #f7f1e8; border: 1px solid #e4dcd0; border-left: 4px solid var(--copper);
  border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px;
}
.wh-dock b { color: var(--navy); font-size: 15px; }
.wh-dock span { font-size: 13px; color: #6b6258; }
.wh-dock em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #166534; }

.wh-map-grid { display: grid; gap: 22px; }
.wh-map-card {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 0;
  background: var(--card); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid #ebe4d8;
}
.wh-map-copy { padding: 22px 24px; }
.wh-map-copy h2 { font-size: 22px; margin: 4px 0 12px; color: var(--navy); }
.wh-map { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; background: #e8e4dc; }

.cat-group-title .wh-kicker { display: block; margin-bottom: 2px; }

@media (max-width: 800px) {
  .wh-docks-bar .container, .wh-docks, .wh-map-card { grid-template-columns: 1fr; }
  .wh-dock-mini { border-right: 0; border-bottom: 1px solid #2a241c; padding: 16px 0; }
  .wh-dock-mini:last-child { padding-left: 0; border-bottom: 0; }
  .wh-map { min-height: 220px; }
}

@media (max-width: 900px) {
  .tools-duo { grid-template-columns: 1fr; }
  .nav-link.nav-tool, .nav-link.nav-tool-alt {
    background: transparent; color: #fff; margin: 0; border-radius: 0;
    padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-link.nav-tool-alt { color: #fff; font-weight: 800; }
}


.mobile-only { display: none !important; }
.hero-cta .mobile-only { display: none !important; }
.voice-card.mobile-only { display: none !important; }
@media (max-width: 860px) {
  .mobile-only, .hero-cta .mobile-only { display: inline-flex !important; }
  .voice-card.mobile-only { display: grid !important; }
}