/* Sunny storefront: общая шапка, базовые поверхности и действия.
   Подключается после CSS темы (include/header_include/head_custom.php),
   поэтому правила на равной специфичности побеждают тему.
   Селекторы ограничены конкретными компонентами Aspro; глобальных
   переопределений element-селекторами (a, button, img) здесь нет. */

/* Контейнер эталона — 1408px. Асpro задаёт ширину переменной темы,
   значение на html (--theme-page-width: 1348px) переопределяется на body. */
body {
  --theme-page-width: 1408px;
}

body,
body.front_page {
  background-color: var(--sunny-bg);
  color: var(--sunny-text);
}

/* --- Базовые классы контракта sunny-* (план F4) --- */
.sunny-container {
  width: calc(100% - 32px);
  max-width: var(--sunny-container);
  margin-inline: auto;
}
.sunny-header,
.sunny-home-block {
  color: var(--sunny-text);
}
.sunny-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--sunny-primary);
  border-radius: 6px;
  background: var(--sunny-primary);
  color: #FFFFFF;
  font: inherit;
  text-decoration: none;
}
.sunny-action:hover {
  border-color: var(--sunny-primary-hover);
  background: var(--sunny-primary-hover);
  color: #FFFFFF;
}
.sunny-action:focus-visible {
  outline: 3px solid var(--sunny-primary);
  outline-offset: 3px;
}
.sunny-action:disabled,
.sunny-action[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Основные действия: фирменные кнопки Aspro (компонентные классы) --- */
.btn.btn-default {
  background-color: var(--sunny-primary);
  border-color: var(--sunny-primary);
  color: #FFFFFF;
}
.btn.btn-default:hover,
.btn.btn-default:focus {
  background-color: var(--sunny-primary-hover);
  border-color: var(--sunny-primary-hover);
  color: #FFFFFF;
}
a.colored,
.colored,
.dark_link:hover,
a.dark_link:hover {
  color: var(--sunny-primary);
}

/* --- Шапка header_2.php: белая двухрядная поверхность ---
   Ряд меню несёт класс bgdark из настроек темы (правило .fill_bg_n .menu-row.middle-block.bgdark
   задаёт #333) — перекрываем тем же селектором, который подключается позже. */
.header-wrapper {
  background-color: var(--sunny-surface);
  color: var(--sunny-text);
}
.header-wrapper .menu-row,
.header-wrapper .menu-row.bgdark,
.fill_bg_n .menu-row.middle-block.bgdark {
  background-color: var(--sunny-surface);
}
.header-wrapper .menu-row.middle-block.bgdark table td:hover {
  background-color: rgba(75, 22, 140, 0.06);
}
.header-wrapper .menu-row .menu-item a {
  color: var(--sunny-text);
}
/* Тёмная тема шапки (настройка header_bgdark/colored_header) красит текст и
   иконки в белый — на белой поверхности переигрываем теми же селекторами. */
.wrapper1.colored_header .header-wrapper .right-icons,
.wrapper1.header_bgdark .header-wrapper .right-icons,
.wrapper1.colored_header .header-wrapper .right-icons a,
.wrapper1.header_bgdark .header-wrapper .right-icons a,
.wrapper1.colored_header .header-wrapper .phone-block,
.wrapper1.header_bgdark .header-wrapper .phone-block,
.wrapper1.colored_header .header-wrapper .phone-block a,
.wrapper1.header_bgdark .header-wrapper .phone-block a,
.wrapper1.colored_header .header-wrapper .top-description,
.wrapper1.header_bgdark .header-wrapper .top-description,
.wrapper1.header_bgdark .header-wrapper .menu-row .menu-item a,
.wrapper1.colored_header .header-wrapper .menu-row .menu-item a,
.wrapper1.header_bgdark .header-wrapper .menu-row.middle-block.bgdark table td a,
.wrapper1.colored_header .header-wrapper .menu-row.middle-block.bgdark table td a {
  color: var(--sunny-text);
}
.wrapper1.header_bgdark .header-wrapper .right-icons svg path,
.wrapper1.colored_header .header-wrapper .right-icons svg path,
.wrapper1.header_bgdark .header-wrapper .right-icons svg use,
.wrapper1.colored_header .header-wrapper .right-icons svg use {
  fill: var(--sunny-text);
}
.header-wrapper .logo_and_menu-row {
  padding-top: 20px;
  padding-bottom: 20px;
}
.header-wrapper .logo img {
  width: 270px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.header-wrapper .top-description,
.header-wrapper .phone-block {
  color: var(--sunny-text);
}
.header-wrapper .phone-block a,
.header-wrapper .phone-block .phone {
  color: var(--sunny-text);
  font-weight: 600;
  text-decoration: none;
}
.header-wrapper .right-icons {
  color: var(--sunny-text);
}
.header-wrapper .right-icons a {
  color: var(--sunny-text);
}
.header-wrapper .right-icons a:hover {
  color: var(--sunny-primary);
}

/* Поиск в верхнем ряду (bitrix:search.title, corp) */
.header-wrapper .search-block input[type="text"],
.header-wrapper .search-block input[type="search"] {
  height: 46px;
  border: 1px solid var(--sunny-border);
  border-radius: 8px;
  background-color: var(--sunny-surface);
  color: var(--sunny-text);
  font-size: 15px;
}
.header-wrapper .search-block input[type="text"]:focus,
.header-wrapper .search-block input[type="search"]:focus {
  border-color: var(--sunny-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(75, 22, 140, 0.12);
}

/* Ряд меню: фиолетовая кнопка «Каталог» + разделы */
.header-wrapper .menu-row td.menu-item > .wrap > a {
  color: var(--sunny-text);
  font-weight: 500;
}
.header-wrapper .menu-row td.menu-item > .wrap > a:hover,
.header-wrapper .menu-row td.menu-item > .wrap > a:focus {
  color: var(--sunny-primary);
}
.header-wrapper .menu-row .menu-item.catalog > .wrap > a.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 20px;
  border-radius: 6px;
  background-color: var(--sunny-primary);
  color: #FFFFFF;
  font-weight: 600;
}
.header-wrapper .menu-row .menu-item.catalog > .wrap > a.dropdown-toggle:hover,
.header-wrapper .menu-row .menu-item.catalog > .wrap > a.dropdown-toggle:focus {
  background-color: var(--sunny-primary-hover);
  color: #FFFFFF;
}
.header-wrapper .menu-row .menu-item.catalog svg path,
.header-wrapper .menu-row .menu-item.catalog svg use {
  fill: currentColor;
}

/* Фиксированная шапка (header_fixed_2.php) — белая, компактный логотип */
.logo-row.v2.menu-row {
  background-color: var(--sunny-surface);
}
.logo-row.v2 .logo img {
  width: 200px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Мобильная шапка (header_mobile_1.php) */
.mobileheader-v1 {
  background-color: var(--sunny-surface);
  color: var(--sunny-text);
}
.mobileheader-v1 .logo img {
  width: 200px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.mobileheader-v1 svg path,
.mobileheader-v1 svg use {
  fill: currentColor;
}

/* Видимый фокус на интерактивных элементах шапки */
.header-wrapper a:focus-visible,
.mobileheader-v1 a:focus-visible,
.mobileheader-v1 button:focus-visible {
  outline: 3px solid var(--sunny-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .header-wrapper .logo img,
  .mobileheader-v1 .logo img {
    width: 200px;
  }
}