@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Roboto:wght@400;500&display=swap');

/* ============================================================
   Дизайн-система 201180.ru — Вариант A: Синий + Огонь
   v4 — B2B элементы: УТП-строка, Telegram, Для организаций
   ============================================================ */

/* --- Переменные --- */
:root {
  --color-primary:        #1a3a5c;
  --color-primary-light:  #2c5282;
  --color-primary-dark:   #0f2540;
  --color-accent:         #d63810;
  --color-accent-light:   #f05a30;

  --color-neutral-900:    #1a202c;
  --color-neutral-700:    #4a5568;
  --color-neutral-500:    #718096;
  --color-neutral-200:    #e2e8f0;
  --color-neutral-50:     #f7f8fa;

  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm:  4px;
  --radius-md:  8px;
  --shadow-card:  0 2px 8px rgba(26,58,92,0.08);
  --shadow-hover: 0 4px 16px rgba(26,58,92,0.14);
  --transition: 0.2s ease;
}

/* --- Типографика --- */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* --- ШАПКА --- */
#top,
#top .top-menu {
  background-color: var(--color-primary) !important;
}

.header-block {
  background-color: var(--color-primary);
}

.header-phones__main,
.header-phones__main:hover,
.top-menu__btn,
.header-block .top-menu__btn {
  color: #ffffff !important;
}

/* --- НАВИГАЦИЯ --- */
.menu1,
.menu__main-bg {
  background-color: var(--color-primary) !important;
}

.menu__main-link,
.menu1 > ul > li > a {
  color: rgba(255,255,255,0.92) !important;
  font-family: var(--font-heading);
  font-weight: 600;
}

.menu__main-link:hover,
.menu1 > ul > li:hover > a {
  color: #ffffff !important;
  background-color: var(--color-primary-dark) !important;
}

/* --- КНОПКИ --- */
.btn-primary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  font-family: var(--font-heading);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-accent-light) !important;
  border-color: var(--color-accent-light) !important;
}

.button-cart {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  font-family: var(--font-heading);
  font-weight: 600;
}

.button-cart:hover {
  background-color: var(--color-accent-light) !important;
  border-color: var(--color-accent-light) !important;
}

/* --- ПАГИНАЦИЯ --- */
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.pagination > li > a:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #ffffff;
}

/* --- КАРТОЧКИ ТОВАРОВ --- */
.product-thumb {
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition), transform var(--transition);
}

.product-thumb:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* --- ФУТЕР --- */
footer {
  background-color: var(--color-primary-dark) !important;
  color: #e2e8f0;
}

footer a {
  color: #a0c4ff;
}

footer a:hover {
  color: #ffffff;
}

/* --- Категорийные иконки --- */
.menu__level-1-icon,
.menu__level-2-icon {
  color: var(--color-accent) !important;
}

/* ============================================================
   B2B ЭЛЕМЕНТЫ — v4
   ============================================================ */

/* --- Кнопка "Для организаций" в верхней панели --- */
.b2b-header-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff !important;
  background: var(--color-accent);
  padding: 5px 13px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none !important;
  letter-spacing: 0.2px;
  transition: background var(--transition), transform var(--transition);
  line-height: 1.4;
  margin-left: 8px;
}

.b2b-header-link:hover,
.b2b-header-link:focus {
  background: var(--color-accent-light) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.b2b-header-link i {
  font-size: 12px;
}

/* --- Telegram кнопка в шапке --- */
.tg-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #2CA5E0;
  border-radius: 50%;
  color: #ffffff !important;
  font-size: 17px;
  text-decoration: none !important;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
  margin-left: 8px;
  vertical-align: middle;
}

.tg-header-btn:hover,
.tg-header-btn:focus {
  background: #1a8bc0 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: scale(1.1);
}

.header-phones {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* --- УТП-СТРОКА --- */
.utp-bar {
  background: var(--color-primary-dark);
  border-bottom: 2px solid var(--color-accent);
  padding: 7px 0;
}

.utp-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.utp-bar__list li {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-family: var(--font-heading);
  font-weight: 500;
  padding: 3px 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}

.utp-bar__list li:last-child {
  border-right: none;
}

.utp-bar__list li i {
  color: var(--color-accent-light);
  font-size: 12px;
}

.utp-bar__list li strong {
  color: #ffffff;
  font-weight: 700;
}

/* --- Адаптация под мобильные --- */
@media (max-width: 767px) {
  .utp-bar__list li {
    padding: 3px 10px;
    font-size: 11px;
  }
  .b2b-link-text {
    display: none;
  }
  .b2b-header-link {
    padding: 5px 8px;
  }
}

@media (max-width: 480px) {
  .utp-bar__list {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 0 4px;
    scrollbar-width: none;
  }
  .utp-bar__list::-webkit-scrollbar {
    display: none;
  }
}