/* EnduroLab42 — безопасный общий CSS для всех страниц Tilda.
Вставлять в: Настройки сайта → Еще → CSS-код для всех страниц.

Главное отличие:
- НЕ красим весь body в черный.
- НЕ ломаем стандартный каталог Tilda.
- Темный стиль применяется только к нашей шапке .el42-header и кастомным блокам .el42.
*/

/* ---------- Variables ---------- */

:root {
  --el-bg: #0b0b0b;
  --el-bg-2: #111111;
  --el-bg-3: #171717;
  --el-bg-4: #1e1e1e;
  --el-text: #ffffff;
  --el-muted: rgba(255,255,255,.72);
  --el-muted-2: rgba(255,255,255,.58);
  --el-border: rgba(255,255,255,.12);
  --el-orange: #ff6a00;
  --el-light: #f5f5f5;
  --el-dark-text: #161616;
  --el-dark-muted: #3f3f3f;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Важно: body не красим в черный, чтобы не ломать каталог Tilda.
body должен оставаться под управлением Tilda и конкретных блоков. */

/* ---------- Header ---------- */

.el42-header,
.el42-header * {
  box-sizing: border-box;
  min-width: 0;
}

.el42-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background:
    radial-gradient(ellipse 120% 260% at 82% 118%,
      rgba(255,106,0,.13) 0%,
      rgba(255,106,0,.085) 30%,
      rgba(255,106,0,.04) 56%,
      rgba(255,106,0,0) 84%
    ),
    #0b0b0b;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: "TildaSans", Arial, Helvetica, sans-serif;
}

.el42-header__inner {
  width: 100%;
  min-height: 118px;
  max-width: 1540px;
  margin: 0 auto;
  padding: 18px 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.el42-header__link {
  color: var(--el-orange) !important;
  font-family: "TildaSans", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.el42-header__contacts {
  justify-self: start;
}

.el42-header__logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 440px;
  max-width: 38vw;
  color: #fff !important;
  text-decoration: none;
}

.el42-header__logo-main {
  display: none;
}

.el42-header__logo-line {
  display: none;
}


.el42-header__logo-img {
  display: block;
  width: 100%;
  max-width: 440px;
  max-height: 78px;
  height: auto;
  object-fit: contain;
}

.el42-header__nav {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.el42-header__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--el-orange);
  border: 1px solid var(--el-orange);
  color: #0b0b0b !important;
  text-decoration: none;
  cursor: pointer;
}

.el42-header__icon svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: currentColor;
}

/* ---------- Custom main blocks ---------- */

.el42,
.el42 * {
  box-sizing: border-box;
  min-width: 0;
}

.el42 {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--el-bg);
  color: var(--el-text);
  font-family: "TildaSans", Arial, Helvetica, sans-serif;
}

#el42-catalogs,
#help,
#faq,
#contacts {
  scroll-margin-top: 132px;
}

.el42-header a:focus-visible,
.el42 a:focus-visible {
  outline: 3px solid var(--el-orange);
  outline-offset: 3px;
}

.el42 a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.el42 img {
  max-width: 100%;
  height: auto;
}

.el42-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.el42-kicker {
  margin: 0 0 14px;
  color: var(--el-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.el42 h1,
.el42 h2,
.el42 h3,
.el42 p,
.el42 strong,
.el42 summary {
  overflow-wrap: anywhere;
}

.el42 h1 {
  max-width: 920px;
  margin: 0;
  color: var(--el-text);
  font-size: 76px;
  line-height: .98;
  font-weight: 800;
  letter-spacing: 0;
}

.el42 h2 {
  max-width: 940px;
  margin: 0;
  color: inherit;
  font-size: 48px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
}

.el42-lead {
  max-width: 850px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 20px;
  line-height: 1.55;
}

.el42-text {
  max-width: 980px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- Hero ---------- */

.el42-hero {
  padding: 86px 20px 76px;
  border-bottom: 1px solid var(--el-border);
  background:
    radial-gradient(ellipse 120% 150% at 82% -22%,
      rgba(255,106,0,.13) 0%,
      rgba(255,106,0,.09) 28%,
      rgba(255,106,0,.052) 50%,
      rgba(255,106,0,.022) 70%,
      rgba(255,106,0,0) 94%
    ),
    #0b0b0b;
}

.el42-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.el42-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.04);
  font-size: 13px;
  font-weight: 800;
}

/* ---------- Buttons ---------- */

.el42-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.el42-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff !important;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
}

.el42-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.55);
}

.el42-btn-primary {
  background: var(--el-orange);
  border-color: var(--el-orange);
  color: #111 !important;
}

/* ---------- Sections / cards ---------- */

.el42-section {
  padding: 72px 20px;
  border-bottom: 1px solid var(--el-border);
  background: var(--el-bg);
}

.el42-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--el-bg-3);
  border-bottom: 1px solid var(--el-border);
}

.el42-fact {
  min-height: 210px;
  padding: 34px 40px;
  border-right: 1px solid var(--el-border);
}

.el42-fact:last-child {
  border-right: 0;
}

.el42-number {
  display: block;
  margin-bottom: 18px;
  color: var(--el-orange);
  font-size: 13px;
  font-weight: 800;
}

.el42-fact strong {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
}

.el42-fact p,
.el42-card p,
.el42-faq p {
  margin: 0;
  color: var(--el-muted);
  font-size: 17px;
  line-height: 1.55;
}

.el42-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.el42-card,
.el42-catalog-card {
  padding: 24px;
  border: 1px solid var(--el-border);
  border-radius: 4px;
  background: var(--el-bg-3);
}

.el42-card b {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 20px;
  line-height: 1.25;
}

.el42-catalog-card {
  display: grid;
  gap: 12px;
  min-height: 190px;
  padding: 26px;
  color: #fff !important;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}

.el42-catalog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,106,0,.55);
}

.el42-brand-name {
  display: block;
  align-self: start;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.el42-catalog-card em {
  align-self: end;
  color: rgba(255,255,255,.72);
  font-style: normal;
  font-weight: 700;
}

.el42-light {
  background: var(--el-light);
  color: var(--el-dark-text);
}

.el42-light p {
  color: var(--el-dark-muted);
}

.el42-light .el42-card {
  background: #fff;
  border-color: rgba(0,0,0,.1);
}

.el42-light .el42-card b {
  color: var(--el-dark-text);
}

.el42-light .el42-card p {
  color: #444;
}

/* ---------- FAQ ---------- */

.el42-faq {
  max-width: 980px;
  margin-top: 28px;
}

.el42-faq details {
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.el42-faq summary {
  cursor: pointer;
  padding: 22px 0;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

.el42-faq p {
  padding: 0 0 22px;
}

/* ---------- Footer ---------- */

.el42-footer {
  scroll-margin-top: 90px;
  padding: 56px 20px 28px;
  background: #0b0b0b;
  color: #fff;
}

.el42-footer-grid {
  display: grid;
  grid-template-columns: 1.1fr .95fr .95fr 1.15fr;
  gap: 28px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--el-border);
}

.el42-footer strong {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}

.el42-footer p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.55;
}

.el42-contact-list {
  display: grid;
  gap: 10px;
}

.el42-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 14px;
  color: #fff !important;
  background: #171717;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.el42-footer-link-main {
  color: #111 !important;
  background: var(--el-orange);
  border-color: var(--el-orange);
}

.el42-doc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.el42-doc-grid a {
  color: rgba(255,255,255,.72) !important;
  font-size: 15px;
  text-decoration: none;
}

.el42-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  padding-top: 24px;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  line-height: 1.55;
}

.el42-bottom span {
  display: block;
}

/* ---------- Tilda catalog repair ---------- */
/* Каталог Tilda должен оставаться читаемым. */

.t-store,
.t-store *,
.t-catalog,
.t-catalog *,
.t706,
.t706 *,
.t-popup,
.t-popup * {
  box-sizing: border-box;
}

.t-store,
.t-catalog {
  background: #fff !important;
  color: #111 !important;
}

.t-store__card,
.t-store__grid-cont,
.t-store__container,
.t-store__parts-switch-wrapper,
.t-store__filter,
.t-store__search-wrapper,
.t-store__sort {
  color: #111 !important;
}

.t-catalog__card,
.t-catalog__grid-cont,
.t-catalog__cont-w-filter,
.t-catalog__filter,
.t-catalog__filter-wrapper,
.t-catalog__search-wrapper,
.t-catalog__filter__search-and-sort,
.t-catalog__sort-select {
  color: #111 !important;
}

.t-store__card__title,
.t-store__card__descr,
.t-store__card__price,
.t-store__card__price-value,
.t-store__card__price-currency,
.t-store__card__sold-out-msg,
.t-store__parts-switch-btn,
.t-store__filter__item-title,
.t-store__filter__checkbox-name {
  color: #111 !important;
}

.t-catalog__card__title,
.t-catalog__card__descr,
.t-catalog__card__price,
.t-catalog__card__price-value,
.t-catalog__card__price-currency,
.t-catalog__card__sold-out-msg,
.t-catalog__filter__item-title {
  color: #111 !important;
}

.t-catalog__card__sku {
  display: block !important;
  margin-top: 8px !important;
  color: #666 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.t-store__card__sold-out-msg,
.t-catalog__card__sold-out-msg {
  color: #d93025 !important;
}

.t-store .t-store__card__btn,
.t-store .t-store__card__btn_second,
.t706 .t-submit,
.t-form .t-submit {
  border-radius: 4px !important;
}

.t-catalog .t-catalog__card__btn,
.t-catalog .t-catalog__card__btn_second,
.t-catalog__prod-popup__btn {
  border-radius: 4px !important;
}

.t-store .t-store__card__btn,
.t706 .t-submit,
.t-form .t-submit {
  background-color: var(--el-orange) !important;
  color: #111 !important;
  font-weight: 800 !important;
  border-color: var(--el-orange) !important;
}

.t-catalog .t-catalog__card__btn:not(.t-catalog__card__btn_second),
.t-catalog__prod-popup__btn {
  background-color: var(--el-orange) !important;
  color: #111 !important;
  border-color: var(--el-orange) !important;
  font-weight: 800 !important;
}

.t-store .t-store__card__btn_second {
  background-color: transparent !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  font-weight: 700 !important;
}

.t-catalog .t-catalog__card__btn_second {
  background-color: transparent !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  font-weight: 700 !important;
}

.t-store .t-store__search-wrapper input,
.t-store .t-store__filter__input,
.t-store select {
  border-radius: 4px !important;
  background: #fff !important;
  color: #111 !important;
}

.t-catalog .t-catalog__filter__input,
.t-catalog .t-catalog__sort-select {
  border-radius: 4px !important;
  background: #fff !important;
  color: #111 !important;
}

.t-catalog__filter__search-mob-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  #el42-catalogs,
  #help,
  #faq,
  #contacts {
    scroll-margin-top: 104px;
  }

  .el42-header__inner {
    min-height: 92px;
    padding: 14px 18px;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
  }

  .el42-header__contacts {
    display: none;
  }

  .el42-header__logo {
    justify-self: start;
    width: 300px;
    max-width: 45vw;
  }

  .el42-header__logo-img {
    max-height: 58px;
  }

  #rec2371714591 img,
  #rec2371714591 .t396__elem img,
  #rec2371714591 .tn-atom img {
    max-height: 58px !important;
    max-width: 300px !important;
  }

  .el42-header__nav {
    gap: 8px;
  }

  .el42-header__nav > .el42-header__link {
    display: none;
  }

  .el42-header__icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 900px) {
  .el42 h1 {
    font-size: 56px;
  }

  .el42 h2 {
    font-size: 40px;
  }

  .el42-facts,
  .el42-grid-3,
  .el42-footer-grid {
    grid-template-columns: 1fr;
  }

  .el42-fact {
    border-right: 0;
    border-bottom: 1px solid var(--el-border);
  }

  .el42-fact:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 520px) {
  #el42-catalogs,
  #help,
  #faq,
  #contacts {
    scroll-margin-top: 90px;
  }

  .el42-header__inner {
    min-height: 78px;
    padding: 12px 14px;
  }

  .el42-header__logo {
    width: 220px;
    max-width: 48vw;
  }

  .el42-header__logo-img {
    max-height: 46px;
  }

  .el42-catalog-header img,
  .el42-catalog-header .t396__elem img,
  .el42-catalog-header .tn-atom img,
  .el42-catalog-header img,
  .el42-catalog-header .t396__elem img,
  .el42-catalog-header .tn-atom img,
  #rec2371714591 img,
  #rec2371714591 .t396__elem img,
  #rec2371714591 .tn-atom img {
    max-height: 46px !important;
    max-width: 220px !important;
  }

  .el42-header__icon--phone {
    display: none;
  }

  .el42-hero {
    padding: 60px 16px 54px;
  }

  .el42-section {
    padding: 54px 16px;
  }

  .el42 h1 {
    font-size: 42px;
  }

  .el42 h2 {
    font-size: 34px;
  }

  .el42-lead {
    font-size: 18px;
  }

  .el42-btn {
    width: 100%;
  }

  #rec2371714591 .t-menuwidgeticons__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .el42-fact {
    min-height: auto;
    padding: 28px 22px;
  }
}

/* ---------- Catalog top block ---------- */
/* Верх каталога в стиле главной страницы. */

.el42-catalog-top {
  padding: 76px 20px 64px;
  border-bottom: 1px solid var(--el-border);
  background:
    radial-gradient(ellipse 120% 150% at 82% -22%,
      rgba(255,106,0,.13) 0%,
      rgba(255,106,0,.09) 28%,
      rgba(255,106,0,.052) 50%,
      rgba(255,106,0,.022) 70%,
      rgba(255,106,0,0) 94%
    ),
    #0b0b0b;
}

.el42-catalog-top h1 {
  max-width: 980px;
}

.el42-catalog-top .el42-lead {
  max-width: 920px;
}

@media (max-width: 520px) {
  .el42-catalog-top {
    padding: 54px 16px 46px;
  }
}


/* ---------- Catalog ME202N logo ---------- */
/* Увеличение логотипа в ME202N на странице каталога. */

.el42-catalog-header img,
#rec2371714591 img {
  max-height: 78px !important;
  width: auto !important;
  max-width: 440px !important;
  object-fit: contain !important;
}

/* Если логотип в ME202N находится в ZeroBlock/T396 */
.el42-catalog-header .t396__elem img,
.el42-catalog-header .tn-atom img,
#rec2371714591 .t396__elem img,
#rec2371714591 .tn-atom img {
  max-height: 78px !important;
  width: auto !important;
  max-width: 440px !important;
  object-fit: contain !important;
}

/* Ссылки в ME202N: Контакты / Помощь / Главная */
.el42-catalog-header a,
.el42-catalog-header .t-menu__link-item,
.el42-catalog-header [class*="menu"] a,
#rec2371714591 a,
#rec2371714591 .t-menu__link-item,
#rec2371714591 [class*="menu"] a {
  color: #ff6a00 !important;
  font-family: "TildaSans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

@media (max-width: 520px) {
  .el42-catalog-header img,
  .el42-catalog-header .t396__elem img,
  .el42-catalog-header .tn-atom img,
  #rec2371714591 img,
  #rec2371714591 .t396__elem img,
  #rec2371714591 .tn-atom img {
    max-height: 58px !important;
    max-width: 210px !important;
  }
}


/* ---------- Remove decorative numbering in benefits ---------- */
/* Убираем 01 / 02 / 03 в блоке преимуществ на главной. */

.el42-number {
  display: none !important;
}

.el42-fact strong {
  margin-top: 0 !important;
}

