/* ==========================================================================
   SPerevod — Premium Redesign (2026-09)
   Палитра: глубокий синий (navy) + графит, один акцент — золото.
   Telegram — фирменный синий. Шрифт: Manrope (кириллица, display=swap).
   Файл подключается ПОСЛЕ всех CSS шаблона, поэтому переопределяет их
   при равной специфичности. JS-фреймворки не используются.
   ========================================================================== */

:root {
  --ink: #101828;
  --ink-2: #344054;
  --muted: #667085;
  --navy: #0b2239;
  --navy-2: #103154;
  --gold: #c9a227;
  --gold-2: #a9871d;
  --gold-ink: #241b02;
  --tg: #229ed9;
  --tg-2: #1b8cc2;
  --line: #e5eaf2;
  --soft: #f5f8fc;
  --r: 14px;
  --sh-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sh-md: 0 10px 24px -8px rgba(12, 34, 57, .18);
  --ff: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff);
  color: var(--ink);
  background: #eef2f8;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* защита от горизонтального скролла */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }
iframe { max-width: 100%; }

a { color: #1b4f8a; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a:hover { color: var(--gold-2); text-decoration: none; }
::selection { background: rgba(201, 162, 39, .25); }

/* ==========================================================================
   Telegram-кнопки (единый компонент)
   ========================================================================== */
.tg-btn, .tg-head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--tg);
  color: #fff !important;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 12px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(34, 158, 217, .55);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.tg-btn:hover, .tg-head:hover {
  background: var(--tg-2);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(34, 158, 217, .6);
  text-decoration: none;
}
.tg-btn svg, .tg-head svg { width: 18px; height: 18px; flex: none; display: block; }
li.tg-head-li { list-style: none; }

/* ==========================================================================
   Шапка — tshop (основные страницы)
   ========================================================================== */
.navbar-tshop {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 14px rgba(12, 34, 57, .08);
  min-height: 0;
}
.navbar-tshop .container { padding-top: 14px; padding-bottom: 14px; }
.navbar-tshop .navbar-brand { padding: 4px 0; margin: 0; height: auto; float: left; }
.navbar-tshop .navbar-brand img { max-height: 54px; width: auto; }

.navbar-tshop .navbar-right { text-align: right; }
.navbar-tshop .navbar-right ul.list-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 4px 0 4px 22px;
  padding: 0;
}
.navbar-tshop .navbar-right .address {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: .01em;
  text-align: left;
}
.navbar-tshop .navbar-right li.email {
  font-size: 13.5px;
  color: var(--muted);
}
.navbar-tshop .navbar-right a.email { color: var(--navy); font-weight: 700; }
.navbar-tshop .navbar-right a.email:hover { color: var(--gold-2); }

/* поиск в шапке */
.navbar-tshop .navbar-form { margin: 0; padding: 0; border: 0; box-shadow: none; }
.navbar-tshop .navbar-form .form-control,
.navbar-tshop .navbar-form input.input-sm {
  border-radius: 999px 0 0 999px;
  border: 1px solid var(--line);
  border-right: 0;
  background: var(--soft);
  height: 40px;
  padding: 8px 16px;
  font-size: 13.5px;
  box-shadow: none;
}
.navbar-tshop .navbar-form .form-control:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(201, 162, 39, .15); }
.navbar-tshop .navbar-form .btn-default {
  border-radius: 0 999px 999px 0;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  height: 40px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 13.5px;
}
.navbar-tshop .navbar-form .btn-default:hover { background: var(--navy-2); border-color: var(--navy-2); }
.navbar-tshop .input-group { border-collapse: separate; }

/* мобильный гамбургер */
.navbar-tshop .navbar-toggle {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  background: #fff;
}
.navbar-tshop .navbar-toggle .icon-bar { background: var(--navy); height: 2px; border-radius: 2px; }
.navbar-tshop .navbar-toggle:hover { background: var(--soft); }
.navbar-tshop .navbar-collapse { border-top: 1px solid var(--line); box-shadow: none; }
.navbar-tshop .navbar-collapse ul.nav li a {
  font-weight: 700;
  color: var(--ink-2);
  padding: 12px 16px;
  border-radius: 10px;
}
.navbar-tshop .navbar-collapse ul.nav li a:hover { background: var(--soft); color: var(--navy); }

/* отступ контента под фиксированной шапкой */
.main-container.headerOffset { padding-top: 118px; }

/* ==========================================================================
   Контент — tshop
   ========================================================================== */
.main-container { padding-bottom: 50px; }

.breadcrumb { background: transparent; padding: 4px 0 14px; margin: 0; font-size: 13px; }
.breadcrumb > .active { color: var(--muted); }
.breadcrumb a { color: #1b4f8a; }
.breadcrumb > li + li:before { color: #b6c2d2; }

/* «бровь» над заголовком */
.category-top { border: 0; margin-bottom: 4px; }
.category-top h2 {
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--gold-2);
  margin: 0;
}

h1.base, .main-container h1.base {
  font-family: var(--ff);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--ink);
  margin: 10px 0 18px;
}
.main-container h2.base, .main-container h2 {
  font-family: var(--ff);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--navy);
  margin: 32px 0 12px;
}
.main-container h3, .main-container h4 { font-family: var(--ff); font-weight: 700; color: var(--ink); }
.main-container p.base, .main-container p { font-size: 15.5px; color: var(--ink-2); }
.main-container ul.base li, .main-container li { font-size: 15px; color: var(--ink-2); }
.main-container ul.base { padding-left: 4px; }
.main-container ul.base li {
  list-style: none;
  position: relative;
  padding: 5px 0 5px 26px;
}
.main-container ul.base li:before {
  content: "";
  position: absolute;
  left: 2px; top: 13px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* сайдбар «Разделы» */
#accordionNo .panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  background: #fff;
}
#accordionNo .panel-heading {
  background: var(--navy);
  border: 0;
  border-radius: 0;
  padding: 15px 18px;
}
#accordionNo .panel-title { font-family: var(--ff); }
#accordionNo .panel-title a {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
}
#accordionNo .panel-title a:hover { color: #f0d98c; }
#accordionNo .panel-title a .fa { color: var(--gold); }
#accordionNo .panel-body { padding: 10px; }
#accordionNo .tree > li { margin: 2px 0; }
#accordionNo .tree li a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  transition: background .18s ease, color .18s ease;
}
#accordionNo .tree li a:hover { background: var(--soft); color: var(--navy); text-decoration: none; }
#accordionNo .tree li.active > a { background: var(--navy); color: #fff; }
#accordionNo .tree .category-level-2 { padding: 2px 0 6px; }
#accordionNo .tree .category-level-2 li a {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  padding: 7px 12px 7px 24px;
  font-size: 13.5px;
}
#accordionNo .tree .category-level-2 li a:hover { color: var(--navy); }

/* карточки и панели в контенте */
.main-container .panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.main-container .panel-heading { background: var(--soft); border-bottom: 1px solid var(--line); font-weight: 700; }

/* кнопки */
.btn, button.btn { font-family: var(--ff); border-radius: 10px; font-weight: 700; transition: all .2s ease; }
.btn-default { border: 1px solid var(--line); color: var(--ink-2); background: #fff; }
.btn-default:hover { background: var(--soft); border-color: #cfd8e6; color: var(--navy); }

#button_deal, button[id*="button_deal"], .btn-cart, #send_deal {
  background: linear-gradient(180deg, #d8b53a, var(--gold)) !important;
  color: var(--gold-ink) !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 14px 28px;
  font-family: var(--ff);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px -8px rgba(176, 141, 30, .7);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#button_deal:hover, button[id*="button_deal"]:hover, .btn-cart:hover, #send_deal:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(176, 141, 30, .75);
  color: var(--gold-ink);
}
#close_send_deal { border-radius: 11px !important; }

/* формы */
.form-control {
  border-radius: 10px;
  border: 1px solid #d3dbe7;
  height: auto;
  padding: 11px 14px;
  box-shadow: none;
  font-family: var(--ff);
  font-size: 14.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, .18); }

/* таблицы (прайсы) */
.main-container table {
  width: 100%;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
}
.main-container table th,
.main-container table tr:first-child td:first-child[align] { background: var(--navy); }
.main-container table th {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 13px 16px;
  border: 0 !important;
}
.main-container table td {
  padding: 12px 16px;
  border-top: 1px solid var(--line) !important;
  color: var(--ink-2);
  font-size: 14.5px;
}
.main-container table tr:nth-child(even) td { background: #fafcfe; }
.main-container table tr:hover td { background: #f2f7fd; }

/* модальное окно заказа */
#deal_Modal .modal-content { border-radius: 16px; border: 0; box-shadow: 0 24px 60px -12px rgba(12, 34, 57, .35); overflow: hidden; }
#deal_Modal .color-line { height: 4px; background: linear-gradient(90deg, var(--gold), var(--navy-2)); }
#deal_Modal .product-title { font-family: var(--ff); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
#deal_Modal .product-code { color: var(--muted); font-weight: 600; }
#deal_Modal .price-sales { color: var(--navy); font-weight: 800; }

/* ==========================================================================
   Футер — tshop
   ========================================================================== */
footer .footer, .footer {
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color: #b9c7db;
  border: 0;
  padding: 46px 0 36px;
}
footer .footer h3 {
  color: #fff;
  font-family: var(--ff);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
footer .footer p { color: #9fb0c7; font-size: 14px; }
footer .footer a { color: #dbe5f3; }
footer .footer a:hover { color: #f0d98c; text-decoration: none; }
footer .footer .footer-nav li { padding: 5px 0; }
footer .footer .footer-nav a { color: #c3d0e2; font-size: 14px; }
footer .footer .footer-nav a:hover { color: #f0d98c; }
footer .footer h4 { margin: 8px 0; }
footer .footer .supportLi h4 a.inline { color: #dbe5f3; font-size: 15px; }
footer .footer .supportLi h4 a.inline .fa { color: var(--gold); }

a.tg-foot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(34, 158, 217, .16);
  border: 1px solid rgba(34, 158, 217, .45);
  color: #fff !important;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: var(--ff);
  transition: background .2s ease, transform .2s ease;
}
a.tg-foot:hover { background: rgba(34, 158, 217, .3); transform: translateY(-1px); }
a.tg-foot svg { width: 17px; height: 17px; display: block; }
a.tg-foot strong { font-weight: 700; font-size: 14px; }

footer .footer iframe { border: 0; border-radius: 12px; box-shadow: var(--sh-md); }
footer .footer .map small a { color: #9fb0c7 !important; font-size: 12px; }

.footer-bottom {
  background: #081a2e;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #7d8fa8;
  padding: 15px 0;
  text-align: left;
}
.footer-bottom p { margin: 0; font-size: 13px; }

/* ==========================================================================
   Статьи и магазин — standalone-шаблон
   (эти страницы имеют собственный инлайн-<style>; правила ниже идут после
   него и при равной специфичности выигрывают)
   ========================================================================== */
body { text-rendering: optimizeLegibility; }

header {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.head { padding: 14px 0; }
.head .logo, a.logo { font-family: var(--ff); font-weight: 800; letter-spacing: -.02em; color: var(--navy); font-size: 22px; }
.head nav a, .head > a:not(.logo):not(.tg-head) { font-weight: 600; }

.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #14406e 100%);
  padding: 58px 0;
}
.hero h1 { color: #fff; font-family: var(--ff); font-weight: 800; letter-spacing: -.02em; }
.hero .lead { color: #c7d6e9; }
.hero .meta { color: #8fa6c2; font-size: 14px; }
.hero .meta a { color: #cfe0f5; font-weight: 600; }
.hero .meta a:hover { color: #f0d98c; }

article { font-family: var(--ff); }
article h2 { font-family: var(--ff); font-weight: 800; letter-spacing: -.015em; color: var(--navy); }
article h3 { font-family: var(--ff); font-weight: 700; color: var(--ink); }
article p, article li { color: #2b3a4e; }
article a { color: #1b4f8a; font-weight: 600; }
article a:hover { color: var(--gold-2); }
article img { border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--sh-sm); }

.note {
  border-left: 4px solid var(--gold);
  background: #fbf7ea;
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}
.note strong { color: var(--gold-2); }

.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.card h3 { color: var(--navy); }

.price { color: var(--navy); font-weight: 800; }

.btn {
  background: linear-gradient(180deg, #d8b53a, var(--gold));
  color: var(--gold-ink);
  border-radius: 11px;
  padding: 14px 26px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px -8px rgba(176, 141, 30, .7);
}
.btn:hover { color: var(--gold-ink); filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; }

.cta { border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); }

/* футер standalone-страниц */
footer {
  background: var(--navy);
  color: #93a7c2;
  border-top: 0;
  font-size: 14px;
}
footer a { color: #cfe0f5; font-weight: 600; }
footer a:hover { color: #f0d98c; }
footer .wrap { padding-top: 6px; padding-bottom: 6px; }

/* каталог статей (stati/index.html) */
main.wrap > h1 { font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
main.wrap > p > a { font-weight: 700; }
main.wrap > ul > li { border-top: 1px solid var(--line); transition: background .2s ease; border-radius: 8px; padding-left: 12px; padding-right: 12px; }
main.wrap > ul > li:hover { background: var(--soft); }
main.wrap > ul > li a strong { color: var(--ink); font-weight: 800; }
main.wrap > ul > li a:hover strong { color: var(--navy); }

/* --- Fix: шапка магазина/статей — перенос навигации на узких экранах --- */
header .head { flex-wrap: wrap; row-gap: 10px; }
header .nav { flex-wrap: wrap; gap: 8px 18px; }
@media (max-width: 767px) {
  header .head { justify-content: flex-start; column-gap: 14px; }
  header .nav { gap: 8px 14px; }
  header .nav a { font-size: 13px; font-weight: 600; }
}
/* кнопки не выходят за пределы карточек на узких экранах */
.btn, a.btn { max-width: 100%; box-sizing: border-box; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1199px) {
  .navbar-tshop .navbar-right ul.list-inline { margin-left: 12px; }
  .navbar-tshop .navbar-right .address { font-size: 12px; }
}

@media (max-width: 991px) {
  .main-container.headerOffset { padding-top: 96px; }
  .navbar-tshop .navbar-brand img { max-height: 46px; }
  h1.base, .main-container h1.base { font-size: 29px; }
}

@media (max-width: 767px) {
  body { font-size: 14.5px; }
  .main-container.headerOffset { padding-top: 84px; }
  .navbar-tshop .container { padding-top: 10px; padding-bottom: 10px; }
  .navbar-tshop .navbar-brand img { max-height: 40px; }
  h1.base, .main-container h1.base { font-size: 26px; }
  .main-container h2.base, .main-container h2 { font-size: 21px; }
  /* таблицы прайсов — горизонтальный скролл внутри, а не страницы */
  .main-container table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  footer .footer { padding: 34px 0 26px; }
  footer .footer iframe { height: 220px; }
  .footer-bottom { text-align: center; }
  .tg-btn, .tg-head { padding: 11px 16px; font-size: 13px; }
  .hero { padding: 40px 0; }
  .hero h1 { font-size: 27px; }
  article p, article li { font-size: 16px; }
}

@media (max-width: 480px) {
  .tg-btn span, .tg-head span { font-size: 12.5px; }
  .tg-btn, .tg-head { padding: 10px 14px; gap: 7px; }
  .tg-btn svg, .tg-head svg { width: 16px; height: 16px; }
  #button_deal, button[id*="button_deal"] { width: 100%; padding: 15px 20px; }
}