/* ============================================================
   КАПРИН — кнопки v13 «аккуратные» (23.10.2026)
   Задача владельца: «сделай аккуратные и красивые кнопки».
   Что было не так: диагональный «блик» из glass.css растягивался
   в светлую полосу, и на широких кнопках это читалось как грязный
   развод; заливки были мутными (серо-синие), у кнопок — разная
   геометрия и тяжёлые тени.
   Что сделано: одна система. Чёрные — главное действие магазина,
   синие — акцент, светлые — второстепенные, оранжевая — только
   «Перезвоните мне». Блики убраны, тени мягкие, радиусы и высоты
   выровнены. Размеры не менялись, поэтому вёрстка не съезжает.
   Подключается последним и перекрывает glass.css и decor.css.
   ============================================================ */

/* ---------- 1. убираем диагональный блик (он и давал «развод») ---------- */
.btn::before,
.hdr-tool::before,
.view-btn::before,
.promo-band-btn::before,
button.kp-quick-btn::before,
.kp-quick-submit::before {
  background: none !important;
  box-shadow: none !important;
}

/* ---------- 2. общая геометрия ---------- */
.btn {
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .12s ease !important;
}
.btn-sm { border-radius: 9px !important; }
.btn-lg { border-radius: 13px !important; }
.hdr-tool, .view-btn { border-radius: 10px !important; }

.btn:focus-visible,
.hdr-tool:focus-visible,
button.kp-quick-btn:focus-visible,
.kp-quick-submit:focus-visible {
  outline: 2px solid rgba(47, 124, 196, .65);
  outline-offset: 2px;
}

/* ---------- 3. главное действие: чёрная кнопка («В корзину», primary) ---------- */
.btn-primary,
.btn-dark,
button.btn[data-cart-add] {
  background: #14141a !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #14141a !important;
  text-shadow: none !important;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .10),
    0 6px 16px rgba(16, 24, 40, .12) !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-dark:hover,
  button.btn[data-cart-add]:hover {
    background: #23232b !important;
    border-color: #23232b !important;
    transform: translateY(-1px);
    box-shadow:
      0 2px 4px rgba(16, 24, 40, .12),
      0 10px 24px rgba(16, 24, 40, .16) !important;
  }
}
.btn-primary:active,
.btn-dark:active,
button.btn[data-cart-add]:active {
  background: #0b0b0f !important;
  border-color: #0b0b0f !important;
  transform: translateY(0) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35) !important;
}

/* ---------- 4. акцент: синий («Найти в каталоге», «Получить цену») ---------- */
.btn-copper,
.btn-orange,
.search-box button,
.hero-search .btn-copper,
.seo-landing-hero .hero-cta .btn-orange {
  background: #2f7cc4 !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #2f7cc4 !important;
  text-shadow: none !important;
  box-shadow:
    0 1px 2px rgba(13, 45, 78, .12),
    0 6px 16px rgba(31, 89, 146, .18) !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-copper:hover,
  .btn-orange:hover,
  .search-box button:hover,
  .hero-search .btn-copper:hover,
  .seo-landing-hero .hero-cta .btn-orange:hover {
    background: #2a6dae !important;
    border-color: #2a6dae !important;
    transform: translateY(-1px);
    box-shadow:
      0 2px 4px rgba(13, 45, 78, .14),
      0 10px 24px rgba(31, 89, 146, .22) !important;
  }
}
.btn-copper:active,
.btn-orange:active,
.search-box button:active {
  background: #255f99 !important;
  border-color: #255f99 !important;
  transform: translateY(0) !important;
  box-shadow: inset 0 1px 3px rgba(9, 38, 66, .30) !important;
}

/* ---------- 5. второстепенные: спокойные светлые ---------- */
.btn-white {
  background: #fff !important;
  background-image: none !important;
  color: var(--navy, #171717) !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .06),
    0 6px 16px rgba(16, 24, 40, .06) !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-white:hover {
    background: #fff !important;
    border-color: rgba(15, 23, 42, .26) !important;
    transform: translateY(-1px);
    box-shadow:
      0 2px 4px rgba(16, 24, 40, .08),
      0 10px 22px rgba(16, 24, 40, .10) !important;
  }
}
.btn-outline {
  background: rgba(255, 255, 255, .6) !important;
  background-image: none !important;
  color: var(--navy, #171717) !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover {
    background: #fff !important;
    border-color: rgba(15, 23, 42, .34) !important;
    transform: translateY(-1px);
  }
}

/* на тёмном фото героя второстепенные — тёмное стекло с белым текстом */
.hero .hero-cta .btn-white,
.seo-landing-hero .hero-cta .btn-white,
.cta-band .btn-white,
.business-cta .btn-white,
.hero .hero-cta .btn-outline {
  background: rgba(12, 16, 22, .55) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .20), 0 8px 20px rgba(0, 0, 0, .16) !important;
}
@media (hover: hover) and (pointer: fine) {
  .hero .hero-cta .btn-white:hover,
  .seo-landing-hero .hero-cta .btn-white:hover,
  .cta-band .btn-white:hover,
  .business-cta .btn-white:hover,
  .hero .hero-cta .btn-outline:hover {
    background: rgba(22, 28, 36, .70) !important;
    border-color: rgba(255, 255, 255, .44) !important;
    transform: translateY(-1px);
  }
}

/* ---------- 6. кнопки в шапке (перекрываем decor.css с его !important) ---------- */
.header .header-actions .hdr-tool,
.header-actions .hdr-tool {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .08) !important;
  background-image: none !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-weight: 600;
}
.header .header-actions .hdr-tool:hover,
.header-actions .hdr-tool:hover { background: rgba(255, 255, 255, .14) !important; filter: none !important; }

.header .header-actions .hdr-tool-orange,
.header-actions .hdr-tool-orange {
  background: #2f7cc4 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #2f7cc4 !important;
  box-shadow: 0 1px 2px rgba(13, 45, 78, .14), 0 6px 16px rgba(31, 89, 146, .22) !important;
}
.header .header-actions .hdr-tool-orange:hover,
.header-actions .hdr-tool-orange:hover { background: #2a6dae !important; border-color: #2a6dae !important; }

.header .header-actions .hdr-tool-green,
.header-actions .hdr-tool-green {
  background: transparent !important;
  background-image: none !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
}
.header .header-actions .hdr-tool-green:hover,
.header-actions .hdr-tool-green:hover { background: rgba(255, 255, 255, .14) !important; }

/* ---------- 7. переключатель вида каталога ---------- */
.view-btn {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  color: var(--navy, #171717) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
.view-btn.on {
  background: #14141a !important;
  color: #fff !important;
  border-color: #14141a !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .18) !important;
}

/* ---------- 8. «Перезвоните мне» — аккуратная оранжевая кнопка ---------- */
body button.kp-quick-btn {
  background: #e8590c !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #e8590c !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 1px 2px rgba(120, 45, 4, .18),
    0 8px 20px rgba(232, 89, 12, .26) !important;
}
body button.kp-quick-btn:hover {
  background: #d24f06 !important;
  border-color: #d24f06 !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(120, 45, 4, .20),
    0 12px 26px rgba(232, 89, 12, .30) !important;
}
body button.kp-quick-btn:active { transform: translateY(0); background: #b8480a !important; }

/* кнопка в модалке заявки — та же система */
.kp-quick-submit {
  background: #14141a !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 6px 16px rgba(16, 24, 40, .12) !important;
}
.kp-quick-submit:hover { background: #23232b !important; }
.kp-quick-submit:disabled { background: #94a3b8 !important; box-shadow: none !important; }

/* ============================================================
   10. Блоки-ссылки «Связанные страницы и сценарии» / «Основные разделы»
   Раньше .cat-card вообще не был оформлен: на SEO-страницах, /smeta,
   /tender и /order-by-article это был сплошной текст без границ,
   поэтому блоки выглядели как «простыня». Теперь — аккуратные
   кликабельные карточки-кнопки в той же системе, что и кнопки:
   белая поверхность, тонкая грань, мягкая тень, стрелка справа.
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.category-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 44px 16px 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.cat-card::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  line-height: 1;
  color: #2f7cc4;
  opacity: .9;
  transition: transform .16s ease;
}
.cat-card h3 {
  margin: 0 !important;
  font-size: 15.5px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--navy, #171717);
  letter-spacing: -.005em;
}
.cat-card p {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover {
    border-color: rgba(47, 124, 196, .38);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, .07), 0 12px 26px rgba(16, 24, 40, .10);
  }
  .cat-card:hover::after { transform: translate(3px, -50%); }
}
.cat-card:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.cat-card:focus-visible { outline: 2px solid rgba(47, 124, 196, .65); outline-offset: 2px; }

@media (max-width: 900px) {
  .category-grid, .category-grid.compact { grid-template-columns: 1fr !important; gap: 10px; }
  .cat-card { padding: 14px 40px 14px 15px; border-radius: 12px; }
  .cat-card h3 { font-size: 15px; }
}

/* ============================================================
   11. «Перезвоните мне» — всегда поверх страницы, не в потоке футера
   Дефект: на /contacts и в каталоге кнопка получала position:relative
   от общего правила для button и наезжала на строку футера.
   ============================================================ */
body button.kp-quick-btn {
  position: fixed !important;
  left: auto !important;
  right: 18px !important;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 900 !important;
}
@media (max-width: 900px) {
  body button.kp-quick-btn { display: none !important; }
}