/**
 * B2BRICS: Стили шапки (tygh-header, tygh-top-panel)
 * Классы витрины: header-grid, light-header, top-search, ty-search-block, top-logo, top-buttons
 */

/* ===== ШИРИНА ШАПКИ (десктоп) ===== */

@media (min-width: 1024px) {
  .tygh-header .header-grid .row-fluid {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Верхняя панель (tygh-top-panel) — быстрые ссылки, валюта, язык — та же ширина */
  .tygh-top-panel .top-grid .container-fluid-row {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== ЛОГОТИП ===== */

.tygh-header .top-logo .ty-logo-container {
  max-width: 170px !important;
}

.tygh-header .top-logo .ty-logo-container__image {
  max-height: 48px !important;
  width: auto !important;
}

/* ===== ПОЛЕ ПОИСКА ===== */

/* Контейнер — transition для плавного подъёма целиком (input + лупа вместе) */
.tygh-header .ty-search-block {
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* При фокусе поднимаем весь контейнер на 1px */
.tygh-header .ty-search-block:has(input:focus) {
  transform: translateY(-1px);
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.15));
}

/* Поле ввода — без рамки в статичном состоянии */
.tygh-header input[type=text].ty-search-block__input {
  border: 2px solid transparent !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: #F6F6F6 !important;
  outline: none !important;
  height: 48px !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

/* Рамка появляется при фокусе */
.tygh-header input[type=text].ty-search-block__input:focus {
  border: 2px solid #555555 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: #F6F6F6 !important;
  outline: none !important;
  height: 48px !important;
}

/* Кнопка лупы — убрать фон, цвет иконки */
.tygh-header .ty-search-magnifier,
.tygh-header button.ty-search-magnifier {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #555555 !important;
}

/* Placeholder поля поиска */
.tygh-header input[type=text].ty-search-block__input::placeholder {
  color: #9AAAC4 !important;
  opacity: 1 !important;
}
.tygh-header input[type=text].ty-search-block__input::-webkit-input-placeholder {
  color: #9AAAC4 !important;
  opacity: 1 !important;
}
.tygh-header input[type=text].ty-search-block__input::-moz-placeholder {
  color: #9AAAC4 !important;
  opacity: 1 !important;
}

/* ===== КНОПКА КОНТАКТОВ (.ut2-pn) ===== */

/* Обёртка — оформляем как кнопку */
.tygh-header .ut2-pn .ut2-pn__wrap.ut2-pn__row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border: 1.5px solid #555555 !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color 0.18s, background 0.18s !important;
}

.tygh-header .ut2-pn .ut2-pn__wrap.ut2-pn__row:hover,
.tygh-header .ut2-pn .ut2-pn__wrap.ut2-pn__row.open {
  border-color: #555555 !important;
  background: #F6F6F6 !important;
}

/* Иконка телефона — цвет, выравнивание */
.tygh-header .ut2-pn .ut2-pn__icon {
  color: #555555 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* Текст (заголовок) — синий, полужирный */
.tygh-header .ut2-pn .ut2-pn__title {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.tygh-header .ut2-pn .ut2-pn__title a {
  color: #555555 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* Заголовок кнопки контактов — скрыт */
.tygh-header .ut2-pn .ut2-pn__title {
  display: none !important;
}

/* Стрелочка — выровнять по центру текста */
.tygh-header .ut2-pn .ut2-pn__expand_icon {
  color: #555555 !important;
  opacity: 0.6 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
}

/* ===== АДАПТИВНОСТЬ ===== */

/* Планшет (до 1024px) */
@media (max-width: 1023px) {
  .tygh-header .top-logo .ty-logo-container {
    max-width: 140px !important;
  }

  .tygh-header .top-logo .ty-logo-container__image {
    max-height: 42px !important;
  }

  .tygh-header input[type=text].ty-search-block__input,
  .tygh-header input[type=text].ty-search-block__input:focus {
    height: 44px !important;
    border-radius: 12px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__wrap.ut2-pn__row {
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__icon {
    font-size: 18px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__expand_icon {
    font-size: 14px !important;
  }
}

/* Иконки избранного и сравнения — показываем на мобилке */
@media (max-width: 899px) {
  .tygh-header .top-button-cart .hidden-phone {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

/* Мобильный (до 900px) — light-header переключает layout */
@media (max-width: 899px) {
  .tygh-header .top-logo .ty-logo-container {
    max-width: 120px !important;
  }

  .tygh-header .top-logo .ty-logo-container__image {
    max-height: 38px !important;
  }

  /* Поиск в оверлее — подстраиваем под компактную высоту */
  .tygh-header .ty-search-block input[type=text].ty-search-block__input,
  .tygh-header .ty-search-block input[type=text].ty-search-block__input:focus {
    height: 42px !important;
    border-radius: 10px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__wrap.ut2-pn__row {
    height: 42px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__icon {
    font-size: 18px !important;
  }

  /* Уменьшаем эффект подъёма на touch-устройствах для плавности */
  .tygh-header .ty-search-block:has(input:focus) {
    transform: translateY(0);
    filter: none;
  }
}

/* Телефон (до 576px) */
@media (max-width: 576px) {
  .tygh-header .top-logo .ty-logo-container {
    max-width: 130px !important;
  }

  .tygh-header .top-logo .ty-logo-container__image {
    max-height: 42px !important;
  }

  .tygh-header .ty-search-block input[type=text].ty-search-block__input,
  .tygh-header .ty-search-block input[type=text].ty-search-block__input:focus {
    height: 40px !important;
    border-radius: 10px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__wrap.ut2-pn__row {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__icon {
    font-size: 16px !important;
  }
}

/* Очень узкий экран (до 380px) */
@media (max-width: 380px) {
  .tygh-header .top-logo .ty-logo-container {
    max-width: 110px !important;
  }

  .tygh-header .top-logo .ty-logo-container__image {
    max-height: 38px !important;
  }

  .tygh-header .ut2-pn .ut2-pn__wrap.ut2-pn__row {
    padding: 0 8px !important;
  }
}