/**
 * design_override.css v7 — spectrsiz.by
 * Premium design: Navy + Orange + Warm Cream
 * All classes verified from live HTML
 */

/* =============================================
   АНИМАЦИИ
   ============================================= */
@keyframes phoneRing {
  0%,100%{ transform: rotate(0deg); }
  15%     { transform: rotate(15deg); }
  30%     { transform: rotate(-12deg); }
  45%     { transform: rotate(10deg); }
  60%     { transform: rotate(-6deg); }
  75%     { transform: rotate(4deg); }
}
@keyframes pulseRing {
  0%  { box-shadow: 0 0 0 0 rgba(240,123,29,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(240,123,29,0); }
  100%{ box-shadow: 0 0 0 0 rgba(240,123,29,0); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* =============================================
   ПЕРЕМЕННЫЕ — перебиваем шаблон
   ============================================= */
:root {
  --or:    #f07b1d;
  --or-dk: #d96810;
  --or-lt: #fff4e8;
  --nv:    #1B2A3B;
  --nv-lt: #243447;
  --nv-dk: #111e2a;
  --cr:    #fdfaf5;
  --td:    #1e1e1e;
  --tm:    #6b7280;
  --bd:    #e5e0da;
  --wh:    #ffffff;
  --rd:    8px;
  --sh:    0 4px 24px rgba(27,42,59,0.09);
  --sh2:   0 10px 40px rgba(27,42,59,0.16);
  /* Перебиваем переменные шаблона */
  --accent:              #f07b1d;
  --accent-dark:         #d96810;
  --bg-dark:             #1B2A3B;
  --bg-dark-light:       #243447;
  --bg-dark-super-light: #2e4259;
}

/* =============================================
   BODY / HTML — тёплый кремовый фон
   ============================================= */
html { background: var(--cr) !important; }
body { background: var(--cr) !important; color: var(--td) !important; }

/* Секции с серым фоном → кремовые */
.gray_bg,
.gray_bg .select_wrapper .selectric,
.section-items.gray_bg,
.section-sales.gray_bg,
.section.gray_bg {
  background: #f5f0e8 !important;
  background-color: #f5f0e8 !important;
}

/* =============================================
   СКРЫТЬ БЛОК СТАТИСТИКИ
   ============================================= */
section.b2b-trust-bar { display:none!important; height:0!important; overflow:hidden!important; margin:0!important; padding:0!important; }

/* =============================================
   ВЕРХНЯЯ ИНФО-ПОЛОСА
   ============================================= */
.header_top_line,
.header_top_line.dark_bg,
header .header_desctop .header_top_line {
  background-color: var(--nv) !important;
  border-bottom: 2px solid var(--or) !important;
  padding: 6px 0 !important;
}
.header_top_line *,
.header_top_nav_link { color: rgba(255,255,255,0.83) !important; font-size: 12px !important; }
.header_top_nav_link:hover { color: var(--or) !important; }
.header_top_line svg * { fill: rgba(255,255,255,0.6) !important; }

/* =============================================
   ОСНОВНАЯ ШАПКА — белоснежная, чистая
   ============================================= */
.header_desctop,
.header_main_line_wrapper,
.header_main_line {
  background: var(--wh) !important;
  background-color: var(--wh) !important;
  box-shadow: var(--sh) !important;
}

/* =============================================
   КНОПКА КАТАЛОГ
   ============================================= */
.header_catalog_btn,
.header_catalog_block .header_catalog_btn,
.header_catalog_block:hover .header_catalog_btn,
.dark_bg .header_catalog_btn,
.dark_bg .header_catalog_btn:hover {
  background-color: var(--nv) !important;
  color: var(--wh) !important;
  border-left: 4px solid var(--or) !important;
  border-radius: var(--rd) !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
}
.header_catalog_block:hover .header_catalog_btn { background-color: var(--nv-lt) !important; }
.header_catalog_btn *, .header_catalog_btn svg * { color:var(--wh)!important; fill:var(--wh)!important; }

/* =============================================
   НАВИГАЦИЯ — без переноса, правильные классы
   ============================================= */
.header_main_line .nav_list:not(.vertical),
.header_main_line__left .nav_list:not(.vertical) {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
}
.nav_list:not(.vertical) > .nav_li { white-space: nowrap !important; flex-shrink: 0 !important; }

.nav_link,
.header_main_line .nav_link {
  color: var(--td) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 6px 0 !important;
  white-space: nowrap !important;
  position: relative !important;
  transition: color 0.2s !important;
  text-decoration: none !important;
}
.nav_link::after {
  content:'' !important;
  position:absolute !important;
  bottom:-2px !important; left:0 !important;
  width:0 !important; height:2px !important;
  background: var(--or) !important;
  transition: width 0.22s ease !important;
  border-radius: 2px !important;
}
.nav_link:hover { color: var(--or) !important; }
.nav_link:hover::after { width:100% !important; }
.nav_link.violet { color: var(--or) !important; font-weight: 800 !important; }

/* =============================================
   МЕССЕНДЖЕРЫ — цветные круги (ТОЛЬКО соцсети, НЕ callback)
   ============================================= */
a.soc_link:not([href="#callback"]):not([href*="callback"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  flex-shrink: 0 !important;
}
a.soc_link:not([href="#callback"]):not([href*="callback"]):hover {
  transform: scale(1.12) translateY(-2px) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,0.22) !important;
}
a.soc_link img { width:36px!important; height:36px!important; object-fit:cover!important; }

a.soc_link[href*="wa.me"], a.soc_link[href*="whatsapp"] { background:#25D366!important; padding:8px!important; }
a.soc_link[href*="wa.me"] img, a.soc_link[href*="whatsapp"] img { filter:brightness(0) invert(1)!important; }
a.soc_link[href*="viber"] { background:#7360F2!important; padding:8px!important; }
a.soc_link[href*="viber"] img { filter:brightness(0) invert(1)!important; }
a.soc_link[href*="t.me"], a.soc_link[href*="telegram"] { background:#2AABEE!important; padding:8px!important; }
a.soc_link[href*="t.me"] img, a.soc_link[href*="telegram"] img { filter:brightness(0) invert(1)!important; }

/* =============================================
   КНОПКА "ОБРАТНЫЙ ЗВОНОК" — особая стилизация
   ============================================= */
a.soc_link[href="#callback"],
a.soc_link[href*="callback"] {
  /* Сброс стилей круглых иконок */
  width: auto !important;
  height: auto !important;
  border-radius: 6px !important;
  overflow: visible !important;
  padding: 9px 16px 9px 12px !important;
  /* Стиль кнопки */
  background: var(--or) !important;
  color: var(--wh) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  /* Пульсирующая анимация */
  animation: pulseRing 2.2s infinite !important;
  transition: background 0.2s, transform 0.2s !important;
}
a.soc_link[href="#callback"]:hover,
a.soc_link[href*="callback"]:hover {
  background: var(--or-dk) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
/* Иконка телефона внутри */
a.soc_link[href="#callback"] img,
a.soc_link[href*="callback"] img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  animation: phoneRing 3s ease-in-out infinite !important;
}
/* Текст кнопки */
a.soc_link[href="#callback"]::after { display:none!important; }

/* Поддержка и через .callback_link */
.callback_link, a[class*="callback"]:not([class*="soc"]), button[class*="callback"] {
  background: var(--or) !important;
  color: var(--wh) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  animation: pulseRing 2.2s infinite !important;
  transition: background 0.2s, transform 0.2s !important;
}

/* =============================================
   ЛОГОТИП
   ============================================= */
.main_logo img, a.main_logo img {
  height: 56px !important; width: auto !important; max-width: 210px !important;
}

/* =============================================
   МОБИЛЬНАЯ ШАПКА
   ============================================= */
.mobile_header_main,
header .mobile_header .mobile_header_main { background-color: var(--wh) !important; }
.mobile_header_main * { color: var(--td) !important; }
.mobile_modal_heading, #modal_main_menu .mobile_modal_heading { background-color: var(--nv) !important; }
.mobile_modal_heading * { color: var(--wh) !important; }
.theme_trigger, #modal_main_menu .theme_trigger { display:none!important; }

/* =============================================
   МОБИЛЬНЫЕ КАТЕГОРИИ — анимация слева
   ============================================= */
.mobile_modal_catalog_link, a.mobile_modal_catalog_link {
  display:flex!important; align-items:center!important; gap:12px!important;
  padding:12px 16px!important; border-radius:10px!important;
  font-size:14px!important; font-weight:700!important;
  color:var(--td)!important;
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s, color 0.2s !important;
  border-left: 3px solid transparent !important;
}
.mobile_modal_catalog_link:hover, a.mobile_modal_catalog_link:hover {
  background: var(--or-lt) !important;
  transform: translateX(6px) !important;
  color: var(--or) !important;
  border-left-color: var(--or) !important;
}
.mobile_modal_catalog_link img.svg, a.mobile_modal_catalog_link img.svg {
  width:30px!important; height:30px!important; transition: transform 0.2s !important;
}
.mobile_modal_catalog_link:hover img.svg { transform: scale(1.2) rotate(-8deg) !important; }

/* =============================================
   КАРТОЧКИ ТОВАРОВ — с hover-анимацией
   ============================================= */
.psk-product-item, .catalog_item, .item_block {
  background: var(--wh) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--rd) !important;
  box-shadow: 0 2px 10px rgba(27,42,59,0.07) !important;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s !important;
  overflow: hidden !important;
  position: relative !important;
}
.psk-product-item:hover, .catalog_item:hover {
  box-shadow: var(--sh2) !important;
  transform: translateY(-5px) !important;
  border-color: var(--or) !important;
}
/* Оранжевая линия сверху при hover */
.psk-product-item::before, .catalog_item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--or) !important;
  transform: scaleX(0) !important;
  transition: transform 0.25s ease !important;
  transform-origin: left !important;
}
.psk-product-item:hover::before, .catalog_item:hover::before { transform: scaleX(1) !important; }

/* =============================================
   ЗАГОЛОВКИ СЕКЦИЙ — с оранжевым акцентом
   ============================================= */
.section_heading .main_title,
.main_title_wrapper .main_title,
h2.main_title, .b2b-section-title {
  color: var(--nv) !important;
  font-weight: 800 !important;
  position: relative !important;
  padding-bottom: 10px !important;
}
.section_heading .main_title::after,
.main_title_wrapper .main_title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 48px !important; height: 3px !important;
  background: var(--or) !important;
  border-radius: 2px !important;
}

/* =============================================
   КНОПКИ CTA
   ============================================= */
.main_btn, .violet_btn, .buy_btn, .add_to_cart_btn {
  background: var(--or) !important;
  color: var(--wh) !important;
  border: none !important;
  border-radius: var(--rd) !important;
  font-weight: 700 !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
.main_btn:hover, .violet_btn:hover, .buy_btn:hover, .add_to_cart_btn:hover {
  background: var(--or-dk) !important;
  color: var(--wh) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(240,123,29,0.4) !important;
}

/* =============================================
   ПОДВАЛ
   ============================================= */
footer.footer, footer {
  background-color: var(--nv-dk) !important;
  color: rgba(255,255,255,0.78) !important;
  border-top: 4px solid var(--or) !important;
}
.footer a { color: rgba(255,255,255,0.60) !important; }
.footer a:hover { color: var(--or) !important; }
.footer__title, .footer_col_title, .footer_title { color: var(--wh) !important; font-weight: 700 !important; }

/* =============================================
   СКРЫТЬ SEO-ТЕКСТ ВНИЗУ КАТАЛОГА
   (там чужое название "Эксперт Спецодежда"!)
   ============================================= */
.psk-seo-info,
.psk-seo-info__description,
.psk-seo-info__title,
[class*="psk-seo"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =============================================
   УБРАТЬ ЖЁЛТЫЙ / ФИОЛЕТОВЫЙ
   ============================================= */
[style*="background-color:#fce326"],[style*="background:#fce326"] { background: var(--or) !important; }
[style*="background-color:#5a4499"],[style*="background:#5a4499"] { background: var(--nv) !important; }
[style*="color:#5a4499"] { color: var(--nv) !important; }

/* =============================================
   ХЛЕБНЫЕ КРОШКИ / ПАГИНАЦИЯ
   ============================================= */
.breadcrumb a, .breadcrumbs a { color: var(--tm) !important; font-size:13px!important; }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--or) !important; }

/* =============================================
   МОБАЙЛ
   ============================================= */
@media (max-width: 1200px) {
  .nav_link { font-size: 11.5px !important; letter-spacing: 0 !important; }
}
@media (max-width: 768px) {
  .main_logo img { height: 42px !important; }
  a.soc_link:not([href="#callback"]):not([href*="callback"]) { width:32px!important; height:32px!important; }
}