/* ============================================================
   NAVI v2 — глобальный re-skin поверх Webster CSS
   Подключается ПОСЛЕДНИМ в layout.tpl, перекрывает старые
   style/typography/shortcodes/skin-cyan/news.css.
   Токены: teal #30A495 / hover #2A9585 / dark #1F2A2E /
   bg #f9fafb / accent-bg #eefaf7 / border #e3e8eb
   ============================================================ */

/* ---------- 1. Fira Sans (самохостинг, cyrillic + latin) ---------- */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/FiraSans-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/FiraSans-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/FiraSans-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url('./fonts/FiraSans-800-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/FiraSans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/FiraSans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/FiraSans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:800;font-display:swap;src:url('./fonts/FiraSans-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Токены ---------- */
:root{
  --navi-teal:#30A495;
  --navi-teal-hover:#2A9585;
  --navi-teal-light:#18b79d;
  --navi-dark:#1F2A2E;
  --navi-bg:#f9fafb;
  --navi-accent-bg:#eefaf7;
  --navi-text:#37474f;
  --navi-muted:#5f6f75;
  --navi-border:#e3e8eb;
  --navi-radius:14px;
  --navi-shadow:0 5px 22px rgba(31,42,46,.06);
  --navi-shadow-hover:0 10px 30px rgba(48,164,149,.16);
}

/* ---------- 3. База ---------- */
::selection{background:#30A495;color:#fff;text-shadow:none}
*::-moz-selection{background:#30A495;color:#fff}

html{-webkit-text-size-adjust:100%}
body{
  font-family:'Fira Sans','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  color:var(--navi-text);
  background:var(--navi-bg);
}

p{margin-bottom:1em}
p:last-child{margin-bottom:0}

/* Ссылки: бирюза вместо старого циана/зелёного */
a{color:var(--navi-teal);text-decoration:none}
a:hover,a:focus{color:var(--navi-teal-hover);text-decoration:none}

/* ---------- 4. Типографика: заголовки как в макете ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:'Fira Sans','Segoe UI',system-ui,sans-serif;
  color:var(--navi-dark);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
}
h1{font-size:28px}
h2{font-size:24px}
h3{font-size:19px}
h4{font-size:17px}
h5,h6{font-size:15px}
@media (min-width:1200px){
  h1{font-size:32px}
  h2{font-size:26px}
}
h1 a,h2 a,h3 a,h4 a{color:inherit}
h1 a:hover,h2 a:hover,h3 a:hover{color:var(--navi-teal-hover)}

/* Заголовки секций со фирменной чертой (как в утверждённом макете) */
.section-title .title,.page-title h1{
  font-weight:800;color:var(--navi-dark)
}

/* ---------- 5. Кнопки Webster → NAVI ---------- */
.button,
.button.icon,
button.button,
.btn-primary,
input[type=submit].button{
  display:inline-block;
  background:var(--navi-teal);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:11px 22px;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(48,164,149,.28);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease,-webkit-transform .2s ease;
  text-align:center;
  min-height:44px;
}
.button:hover,.button:focus,.button.active,
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background:var(--navi-teal-hover);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(48,164,149,.35);
  border:0;
}
.button:active{transform:translateY(0)}
.button i{margin-right:8px}

/* ghost-кнопки */
.button.border,.button.button-border{
  background:transparent;
  border:2px solid var(--navi-teal);
  color:var(--navi-teal-hover);
  box-shadow:none;
  padding:10px 20px;
}
.button.border:hover,.button.button-border:hover{
  background:var(--navi-teal);
  color:#fff;
  border-color:var(--navi-teal);
}
.button.gray,.button.gray:hover{
  background:#eef1f3;color:var(--navi-dark);box-shadow:none;border:0
}

/* ---------- 6. Списки: вместо «рук» — галочки в кружках ---------- */
ul{padding-left:22px}
ul li{margin-bottom:.5em}
ul.list,ul.list li{list-style:none;padding-left:0}
ul.list li:after{color:var(--navi-teal)}

/* Иконки-«руки» в контенте из БД (новости/промо) — прячем, ставим галочку */
.news-card ul,.news-modern ul,.tab-content ul{
  list-style:none;padding-left:0
}
.news-card ul li,.news-modern ul li,.tab-content ul > li{
  position:relative;padding-left:26px
}
.news-card ul li::before,.news-modern ul li::before,.tab-content ul > li::before{
  content:'\2713';
  position:absolute;left:0;top:1px;
  width:17px;height:17px;
  border-radius:50%;
  background:var(--navi-accent-bg);
  color:var(--navi-teal);
  font-size:10px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.news-card ul li .fa-hand-o-right,
.news-modern ul li .fa-hand-o-right,
.tab-content ul li .fa-hand-o-right{
  display:none
}

/* ---------- 7. Формы ---------- */
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=search],input[type=url],select,textarea{
  font-family:inherit;
  font-size:14px;
  color:var(--navi-text);
  background:#fff;
  border:1px solid #d5dde1;
  border-radius:10px;
  padding:10px 14px;
  min-height:44px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--navi-teal);
  box-shadow:0 0 0 3px rgba(48,164,149,.14);
  outline:none;
}
::placeholder{color:#9aa7ac;opacity:1}

/* ---------- 8. Таблицы ---------- */
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 14px;border-bottom:1px solid var(--navi-border);text-align:left;vertical-align:top}
thead th{background:var(--navi-dark);color:#fff;font-weight:700;border-bottom:0}
tbody tr:nth-child(even){background:rgba(48,164,149,.035)}
.table60 td,.table40 td{padding:10px 14px}

/* ---------- 9. Пагинация ---------- */
.pagination li a,.pagination li span,.page-item .page-link{
  color:var(--navi-text);
  border:1px solid var(--navi-border);
  border-radius:10px;
  margin:0 3px;
  min-width:40px;min-height:40px;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;
}
.pagination li a:hover,.pagination li span:hover,.page-item .page-link:hover{
  background:var(--navi-accent-bg);color:var(--navi-teal-hover);border-color:var(--navi-teal)
}
.pagination > .active > a,.pagination > .active > span,.page-item.active .page-link{
  background:var(--navi-teal);
  border-color:var(--navi-teal);
  color:#fff;
  border-radius:10px;
}

/* ---------- 10. Табы ---------- */
.nav-tabs > li > a,.nav-tabs > li > a:hover{color:var(--navi-muted)}
.nav.nav-tabs > li.active > a,.nav.nav-tabs > li.active > a:focus,.nav.nav-tabs > li.active > a:hover,
.tab .nav.nav-tabs > li.active > a{
  color:var(--navi-teal-hover);
  border-bottom:2px solid var(--navi-teal);
  background:transparent;
}
.tab .nav.nav-tabs > li > a.active{color:var(--navi-teal-hover);border-bottom:2px solid var(--navi-teal)}

/* ---------- 11. owl-карусели ---------- */
.owl-carousel .owl-dots .owl-dot span{background:#c9d3d7;width:8px;height:8px;margin:0 4px}
.owl-carousel .owl-dots .owl-dot.active span,.owl-carousel .owl-dots .owl-dot:hover span{background:var(--navi-teal);width:22px;border-radius:4px}
.owl-carousel .owl-nav i,.owl-carousel .owl-nav [class*=owl-]{color:var(--navi-teal)}

/* ---------- 12. Новости на главной (news.css грузится в body ПОЗЖЕ,
     поэтому все правила с префиксом .news-page — специфичность выше) ---------- */
.news-page .news-header, .news-header.container{margin:26px auto 18px;padding:0 15px}
.news-header.container .news-section-title{
  display:flex;align-items:center;gap:12px;
  font-size:24px;font-weight:800;color:var(--navi-dark);
  letter-spacing:-.01em;margin:0 0 8px;
}
.news-header.container .news-section-title::before{
  content:'';flex:0 0 6px;width:6px;height:28px;
  border-radius:4px;background:var(--navi-teal);
}
.news-header.container .news-section-desc{margin:0;color:var(--navi-muted);font-size:15px}

.news-page .news-card{
  background:#fff;
  border:1px solid var(--navi-border);
  border-radius:var(--navi-radius);
  box-shadow:var(--navi-shadow);
  padding:24px 28px;
  margin:0 auto 16px;
  transition:box-shadow .25s ease,transform .25s ease,-webkit-transform .25s ease;
}
.news-page .news-card:hover{
  box-shadow:var(--navi-shadow-hover);
  transform:translateY(-2px);
}
.news-page .news-card img{border-radius:10px;max-width:100%;height:auto;margin:16px 0}

.news-page .news-date{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--navi-accent-bg);
  color:var(--navi-teal-hover);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;
  padding:6px 15px;
  margin:0 0 12px;
  opacity:1;
  justify-content:flex-start;
}
.news-page .news-date::before{content:'\25CF';font-size:7px;color:var(--navi-teal)}

.news-page .news-more-wrap{margin-top:14px}
.news-page .news-more{
  display:inline-flex;align-items:center;gap:10px;
  height:46px;padding:0 24px;
  background:var(--navi-teal);
  border-radius:12px;
  color:#fff !important;
  font-size:14px;font-weight:700;
  box-shadow:0 4px 14px rgba(48,164,149,.28);
  transition:background .2s ease,transform .2s ease,-webkit-transform .2s ease;
}
.news-page .news-more:hover{
  background:var(--navi-teal-hover);
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(48,164,149,.35);
}
.news-page .news-more i{font-size:12px}

.news-page .news-archive{margin:22px auto 8px;max-width:1150px}
.news-page .news-archive a{
  display:inline-flex;align-items:center;gap:10px;
  height:46px;padding:0 24px;
  background:#fff;
  border:1px solid var(--navi-border);
  border-radius:12px;
  color:var(--navi-dark);
  box-shadow:var(--navi-shadow);
  font-size:14px;font-weight:700;
}
.news-page .news-archive a:hover{
  background:var(--navi-teal);
  border-color:var(--navi-teal);
  color:#fff;
  transform:translateY(-1px);
}

/* SEO-блок о компании */
.news-page .news-company-info{
  background:linear-gradient(135deg,#eefaf7 0%,#ffffff 60%);
  border:1px solid rgba(48,164,149,.25);
  border-radius:var(--navi-radius);
  padding:28px 34px;
  color:var(--navi-text);
  box-shadow:var(--navi-shadow);
}
.news-page .news-company-info p{color:var(--navi-text)}
.news-page .news-company-info strong{color:var(--navi-dark)}

/* Бренды */
.news-page .news-brands-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-bottom:18px;
}
.news-page .brands-title{
  display:flex;align-items:center;gap:12px;
  font-size:22px;font-weight:800;color:var(--navi-dark);margin:0;
}
.news-page .brands-title::before{
  content:'';flex:0 0 6px;width:6px;height:26px;border-radius:4px;background:var(--navi-teal);
}
.news-page .news-brands-button{
  display:inline-flex;align-items:center;gap:10px;
  height:44px;padding:0 20px;
  border:1px solid var(--navi-border);border-radius:12px;
  font-weight:700;font-size:14px;color:var(--navi-dark);
  background:#fff;box-shadow:var(--navi-shadow);
}
.news-page .news-brands-button:hover{
  background:var(--navi-teal);border-color:var(--navi-teal);color:#fff;
  transform:translateY(-1px);
}
.news-page .news-brands-slider{overflow:hidden;margin:0 -6px}
.news-page .news-brands-track{
  display:flex;gap:8px;
  -webkit-animation:brands-scroll 60s linear infinite;
  animation:brands-scroll 60s linear infinite;
}
.news-page .news-brands-track img{
  height:56px;width:auto;
  filter:grayscale(100%);opacity:.72;
  transition:filter .25s ease,opacity .25s ease;
  border-radius:10px;
  padding:6px 10px;background:#fff;border:1px solid var(--navi-border);
  box-sizing:content-box;
}
.news-page .news-brands-track a:hover img{filter:grayscale(0);opacity:1;border-color:rgba(48,164,149,.4)}
@keyframes brands-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .news-page .news-brands-track{animation:none;-webkit-animation:none}
}

/* ---------- 13. Разделители и отступы ---------- */
.section-divider{border:0;height:1px;background:rgba(31,42,46,.07);margin:34px auto;max-width:1120px}

/* ---------- 14. Cookie-плашка ---------- */
.cookie-notice{
  max-width:360px;
  border-radius:14px;
  box-shadow:0 12px 34px rgba(31,42,46,.22);
  z-index:9990;
}
.cookie-notice .cookie-text{font-size:13px;line-height:1.55}
.cookie-notice button{
  background:var(--navi-teal);color:#fff;border:0;border-radius:10px;
  padding:9px 18px;font-weight:700;font-family:inherit;font-size:13px;
}
.cookie-notice button:hover{background:var(--navi-teal-hover)}

/* ---------- 15. Мелкая доводка ---------- */
blockquote{
  border-left:4px solid var(--navi-teal);
  background:var(--navi-accent-bg);
  border-radius:0 10px 10px 0;
  padding:16px 22px;
  color:var(--navi-muted);
  font-style:italic;
}
.fa-hand-o-right{color:var(--navi-teal)}
img.full-width{max-width:100%}
hr{border:0;height:1px;background:var(--navi-border);margin:22px 0}

/* Красные «ценники» в контенте БД → аккуратные бейджи */
.price,.product-price,.news-card .price{
  color:#1a7f6e;font-weight:800;
}
del{color:#9aa7ac;opacity:.75}

/* ---------- 16. Мобильная адаптация ---------- */
@media (max-width:767px){
  body{font-size:14.5px}
  h1{font-size:24px}
  h2{font-size:21px}
  h3{font-size:17px}
  .news-card{padding:18px 16px;border-radius:12px}
  .news-section-title{font-size:19px}
  .news-company-info{padding:18px 16px}
  .section-divider{margin:24px auto}
  .button{width:auto;min-height:44px}
  .cookie-notice{left:12px;right:12px;max-width:none}
}