/* =========================================================
   ELEMENTUM SMART HEADER
   ========================================================= */

:root {
  --el-header-bg: #070707;
  --el-header-bg-soft: #0d0d0c;

  --el-header-text: #f7f7f5;
  --el-header-muted: #aaa69d;

  --el-header-gold: #f1c46e;
  --el-header-gold-soft: rgba(242, 173, 53, .16);

  --el-header-line: rgba(255, 255, 255, .10);
}


/* =========================================================
   BLOCKSY HEADER
   ========================================================= */

#header [data-row="top"],
#header [data-row="middle"],
#header [data-row="bottom"] {
  background: var(--el-header-bg);
}

#header [data-row="middle"] {
  border-bottom: 1px solid var(--el-header-line);
}

#header [data-row="bottom"] {
  position: relative;
  z-index: 20;

  height: auto !important;
  min-height: 0 !important;

  overflow: visible !important;

  box-shadow: none !important;

  background: var(--el-header-bg-soft);
}

#header [data-row="bottom"]::before,
#header [data-row="bottom"]::after {
  content: none !important;
}


/* =========================================================
   ОСНОВНОЕ МЕНЮ BLOCKSY
   ========================================================= */

#header .menu > .menu-item > a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .025em;
}

#header .menu > .menu-item > a:hover,
#header .menu > .current-menu-item > a,
#header .menu > .current-menu-ancestor > a {
  color: var(--el-header-gold) !important;
}


/* =========================================================
   КОНТАКТЫ
   ========================================================= */

.el-header-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 2px;

  line-height: 1.2;
}

.el-header-contacts__phone {
  color: var(--el-header-gold) !important;

  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 750;

  white-space: nowrap;
}

.el-header-contacts__email {
  color: var(--el-header-text) !important;

  font-size: 13px;

  opacity: .88;

  white-space: nowrap;
}


/* =========================================================
   ПОЛОСА МЕТАЛЛОВ
   ========================================================= */

.el-metal-nav {
  width: 100%;

  color: var(--el-header-text);

  background: #0d0d0c;

  border-bottom: 1px solid rgba(255, 255, 255, .08);
}


/* =========================================================
   СЕТКА МЕТАЛЛОВ
   ========================================================= */

.el-metal-nav__track {
  width: 100%;

  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 0;

  border-top: 1px solid rgba(255, 255, 255, .08);
}


/* =========================================================
   ПУНКТ МЕНЮ
   ========================================================= */

.el-metal-nav__item {
  position: relative;

  min-width: 0;
  min-height: 84px;

  padding: 12px 28px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 18px;

  border-right: 1px solid rgba(255, 255, 255, .10);

  color: var(--el-header-text) !important;
  text-decoration: none !important;

  background: transparent;

  transition:
    background-color .18s ease,
    color .18s ease;
}

.el-metal-nav__item:first-child {
  border-left: 1px solid rgba(255, 255, 255, .10);
}


/* =========================================================
   HOVER
   ========================================================= */

.el-metal-nav__item:hover,
.el-metal-nav__item:focus-visible {
  background:
    linear-gradient(
      100deg,
      rgba(242, 173, 53, .12),
      rgba(242, 173, 53, .035)
    );

  color: #fff !important;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.el-metal-nav__item.is-active {
  background:
    linear-gradient(
      110deg,
      rgba(242, 173, 53, .20),
      rgba(242, 173, 53, .055)
    );

  box-shadow:
    inset 0 -4px 0 var(--el-header-gold);
}


/* =========================================================
   FOCUS
   ========================================================= */

.el-metal-nav__item:focus-visible {
  outline: 2px solid var(--el-header-gold);
  outline-offset: -2px;
}


/* =========================================================
   КРУГ Au / Ag / Pt / Pd
   ========================================================= */

.el-metal-nav__symbol {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--el-header-gold);
  border-radius: 50%;
  color: var(--el-header-gold);
  font-size: 20px;
  box-shadow:
    inset 0 0 12px rgba(242, 173, 53, .05);
}


/* =========================================================
   РАДИОДЕТАЛИ
   ========================================================= */

.el-metal-nav__symbol--radio {
  font-size: 0;
}

.el-metal-nav__symbol--radio svg {
  width: 21px;
  height: 21px;
}


/* =========================================================
   ТЕКСТОВАЯ ЧАСТЬ
   ========================================================= */

.el-metal-nav__copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 5px;
}


/* =========================================================
   ЗОЛОТО / СЕРЕБРО / ПЛАТИНА / ПАЛЛАДИЙ
   ========================================================= */

.el-metal-nav__label {
  display: block;

  overflow: hidden;

  color: var(--el-header-text);

  font-family: inherit;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.05;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   МОБИЛЬНОЕ НАЗВАНИЕ

   На ПК скрыто.
   На телефоне станет:
   "Скупка золота"
   ========================================================= */

.el-metal-nav__mobile-label {
  display: none;
}


/* =========================================================
   НИЖНЯЯ СТРОКА НА ПК

   Скупка · до 10 671 ₽/г
   ========================================================= */

.el-metal-nav__meta {
  min-width: 0;

  display: flex;
  align-items: baseline;

  gap: 4px;

  color: #bbb7ae;

  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.1;

  white-space: nowrap;
}


/* Скупка / до */

.el-metal-nav__meta-text {
  color: #bbb7ae;
}


/* Разделительная точка */

.el-metal-nav__dot {
  color: rgba(255, 255, 255, .42);
}


/* =========================================================
   ЦЕНА НА ПК
   ========================================================= */

.el-metal-nav__price-value {
  color: var(--el-header-gold);

  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.el-metal-nav__price-unit {
  color: #c8c4ba;

  font-size: 12px;
  font-weight: 650;
}


/* =========================================================
   ЛЕНДИНГИ МЕТАЛЛОВ
   ========================================================= */

body.el-metal-landing .el-metal-nav__track {
  min-height: 84px;
}

body.el-metal-landing .el-metal-nav__item {
  min-height: 84px;
}


/* =========================================================
   СТАРОЕ AURUM-МЕНЮ
   ========================================================= */

.aurum-menu-container,
.aurum-menu {
  display: none !important;
}


/* =========================================================
   АВТОМАТИЧЕСКАЯ ВСТАВКА
   ========================================================= */

#header > .el-metal-nav-slot--auto {
  position: relative;
  z-index: 20;

  width: 100%;

  border-top: 0;
}


/* Если в Blocksy остался старый пустой ряд */

#header [data-row="bottom"]:has(.aurum-menu-container:only-child),
#header [data-row="bottom"]:has(.aurum-menu:only-child) {
  display: none !important;
}


/* =========================================================
   НЕБОЛЬШИЕ НОУТБУКИ
   1100 - 1350
   ========================================================= */

@media (min-width: 1100px) and (max-width: 1350px) {

  .el-metal-nav__item,
  body.el-metal-landing .el-metal-nav__item {
    min-height: 76px;

    padding-left: 18px;
    padding-right: 18px;

    gap: 14px;
  }

  body.el-metal-landing .el-metal-nav__track {
    min-height: 76px;
  }

  .el-metal-nav__symbol {
    flex-basis: 44px;

    width: 44px;
    height: 44px;

    font-size: 18px;
  }

  .el-metal-nav__label {
    font-size: 16px;
  }

  .el-metal-nav__meta {
    font-size: 11px;
  }

  .el-metal-nav__price-value {
    font-size: 13px;
  }

  .el-metal-nav__price-unit {
    font-size: 11px;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1099px) {

  .el-metal-nav__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 210px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }

  .el-metal-nav__track::-webkit-scrollbar {
    display: none;
  }

  .el-metal-nav__item {
    width: 210px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 689px) {

  /* -------------------------------------------------------
     ОСНОВНАЯ СТРОКА BLOCKSY
     ------------------------------------------------------- */

  #header [data-row="middle"] {
    --height: 62px !important;
  }

  #header [data-device="mobile"] [data-row="middle"] .ct-container,
  #header [data-device="mobile"] [data-row="middle"] .ct-container-fluid {
    min-height: 64px;
  }


  /* Убираем отдельную кнопку Blocksy */

  #header [data-device="mobile"] [data-id="button"] {
    display: none !important;
  }


  /* -------------------------------------------------------
     НИЖНИЙ РЯД НА ВСЮ ШИРИНУ
     ------------------------------------------------------- */

  #header [data-row="bottom"] .ct-container,
  #header [data-row="bottom"] .ct-container-fluid {
    width: 100% !important;
    max-width: none !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #header [data-row="bottom"] [data-column],
  #header [data-row="bottom"] .ct-header-html {
    width: 100% !important;
    max-width: none !important;

    flex: 1 1 100% !important;
  }


  /* =======================================================
     МОБИЛЬНАЯ ПОЛОСА МЕТАЛЛОВ
     ======================================================= */

  .el-metal-nav {
    width: 100%;

    overflow: hidden;

    background: #0d0d0c;
  }

  .el-metal-nav__track,
  body.el-metal-landing .el-metal-nav__track {
    width: 100%;
    min-height: 60px;

    margin: 0;
    padding: 0;

    display: grid;

    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 185px;

    gap: 0;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-inline: contain;

    scroll-snap-type: inline proximity;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }

  .el-metal-nav__track::-webkit-scrollbar {
    display: none;
  }


  /* =======================================================
     МОБИЛЬНЫЙ ПУНКТ
     ======================================================= */

  .el-metal-nav__item,
  body.el-metal-landing .el-metal-nav__item {
    width: 185px;
    min-width: 185px;
    min-height: 60px;

    padding: 8px 12px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    border-radius: 0;

    scroll-snap-align: start;
  }


  /* Радиодетали длиннее */

  .el-metal-nav__item--radio {
    width: 225px;
    min-width: 225px;
  }


  /* =======================================================
     МОБИЛЬНЫЙ КРУГ
     ======================================================= */

  .el-metal-nav__symbol {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-width: 1.5px;

    font-size: 16px;
  }

  .el-metal-nav__symbol--radio svg {
    width: 17px;
    height: 17px;
  }


  /* =======================================================
     МОБИЛЬНЫЙ ТЕКСТ
     ======================================================= */

  .el-metal-nav__copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 0;
  }


  /*
   * На телефоне убираем:
   *
   * Золото
   * Скупка · до 10 671 ₽/г
   */

  .el-metal-nav__label,
  .el-metal-nav__meta {
    display: none !important;
  }


  /*
   * И показываем только:
   *
   * Скупка золота
   */

  .el-metal-nav__mobile-label {
    display: block;

    overflow: visible;

    color: var(--el-header-text);

    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.15;

    letter-spacing: 0;

    text-overflow: clip;
    white-space: nowrap;
  }


  /* Цена на мобильном дополнительно скрыта */

  .el-metal-nav__price-value,
  .el-metal-nav__price-unit,
  .el-metal-nav__dot,
  .el-metal-nav__meta-text {
    display: none !important;
  }


  /* =======================================================
     АКТИВНЫЙ МОБИЛЬНЫЙ ПУНКТ
     ======================================================= */

  .el-metal-nav__item.is-active {
    background:
      linear-gradient(
        110deg,
        rgba(242, 173, 53, .18),
        rgba(242, 173, 53, .04)
      );

    box-shadow:
      inset 0 -3px 0 var(--el-header-gold);
  }


  /* =======================================================
     КОНТАКТЫ
     ======================================================= */

  .el-header-contacts {
    align-items: flex-start;
  }


  /* =======================================================
     AUTO SLOT
     ======================================================= */

  #header > .el-metal-nav-slot--auto {
    border-top-color: rgba(255, 255, 255, .08);
  }
}


/* =========================================================
   ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 389px) {

  .el-metal-nav__track,
  body.el-metal-landing .el-metal-nav__track {
    grid-auto-columns: 175px;
  }

  .el-metal-nav__item,
  body.el-metal-landing .el-metal-nav__item {
    width: 175px;
    min-width: 175px;

    padding-left: 10px;
    padding-right: 10px;

    gap: 9px;
  }

  .el-metal-nav__item--radio {
    width: 215px;
    min-width: 215px;
  }

  .el-metal-nav__symbol {
    flex-basis: 36px;

    width: 36px;
    height: 36px;

    font-size: 15px;
  }

  .el-metal-nav__symbol--radio svg {
    width: 16px;
    height: 16px;
  }

  .el-metal-nav__mobile-label {
    font-size: 13.5px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .el-metal-nav__item {
    transition: none;
  }
}