/* ============================================================
   Первый экран Nova-C: бегущая строка, шапка поверх видео, герой
   (структура и размеры повторяют nova_kz)
   ============================================================ */

:root {
  --ec-blue: #2665e2;
  --ec-wb: #be11a5;
  --ec-wb-hover: #a30f8e;
  --ec-text: #252525;
  --ec-muted: #787878;
  --ec-ticker-h: 34px;
  --ec-mobile-bar-h: 50px;
  /* высота шапки над видео, пересчитывается скриптом ec-hero-head */
  --ec-head-h: 121px;
}

/* ---------- Бегущая строка ---------- */
.ec-ticker {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  overflow: hidden;
  height: var(--ec-ticker-h);
  background: #ffd400;
  font-family: 'Montserrat', Arial, sans-serif;
}

.ec-ticker__track {
  display: flex;
  width: max-content;
  animation: ec-ticker-run 32s linear infinite;
  will-change: transform;
}

.ec-ticker__group {
  display: flex;
}

.ec-ticker__item {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--ec-ticker-h);
  padding: 0 22px;
  color: #1c1c1e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ec-ticker__ic {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

@keyframes ec-ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ec-ticker__track { animation: none; }
}

/* страница опускается под фиксированную строку */
body {
  padding-top: var(--ec-ticker-h);
}

/* залипающие меню выезжают из-под бегущей строки */
.t229__positionfixed {
  top: var(--ec-ticker-h) !important;
}

/* ---------- Шапка поверх видео ---------- */
@media (min-width: 980px) {
  #rec644152170,
  #rec644152171 {
    position: relative;
    z-index: 2;
  }

  #rec644152170 .t229,
  #rec644152171 .t229 {
    background-color: transparent !important;
  }

  #rec644152170 .t-menu__link-item,
  #rec644152171 .t-menu__link-item {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  }

  /* залипающее меню при скролле — снова на белом фоне */
  #rec644152170 .t229__positionfixed.t229,
  #rec644152171 .t229__positionfixed.t229 {
    background-color: #ffffff !important;
  }

  #rec644152170 .t229__positionfixed .t-menu__link-item,
  #rec644152171 .t229__positionfixed .t-menu__link-item {
    color: #515151 !important;
    text-shadow: none;
  }
}

.ec-subhead {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  font-family: 'Montserrat', Arial, sans-serif;
}

.ec-subhead__in {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
}

.ec-subhead__logo {
  flex: none;
  display: block;
  line-height: 0;
}

.ec-subhead__logo img {
  display: block;
  width: 60px;
  height: auto;
}

.ec-subhead__store {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.ec-subhead__store span {
  color: #8fb4ff;
  font-weight: 600;
}

/* контакты прижаты к правому краю — по линии с логотипом */
.ec-subhead__contacts {
  margin-left: auto;
  text-align: right;
}

.ec-subhead__phone {
  display: block;
  color: #ffffff !important;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.ec-subhead__hours {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ---------- Первый экран ---------- */
#rec644152175 {
  position: relative;
  z-index: 1;
  overflow: visible;
  background: #11151d;
  --ec-hero-height: max(650px, calc(100svh - var(--ec-ticker-h) - var(--ec-head-h)));
  height: var(--ec-hero-height);
}

/* видео уходит вверх, под шапку */
.ec-hero-video {
  position: absolute;
  top: calc(-1 * var(--ec-head-h));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #11151d url('../videos/hero-poster.webp') center 55% / cover no-repeat;
}

.ec-hero-video::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(rgba(6, 9, 15, .22) 0%, rgba(6, 9, 15, .4) 52%, rgba(6, 9, 15, .8) 100%);
}

.ec-hero-video__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

@media (prefers-reduced-motion: reduce) {
  .ec-hero-video__media { display: none; }
}

/* ---------- Контент первого экрана ---------- */
.ec-hero2,
.ec-hero2 * {
  box-sizing: border-box;
}

.ec-hero2 {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-family: 'Montserrat', Arial, sans-serif;
}

.ec-hero2__main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(480px, calc(100% - 40px));
  transform: translate(-50%, -50%);
  text-align: center;
}

.ec-hero2__title {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.ec-hero2__subtitle {
  max-width: 420px;
  margin: 14px auto 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.ec-hero2__bottom {
  position: absolute;
  right: 0;
  bottom: 46px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* кнопка «Заказать на Wildberries» — по центру между подзаголовком и преимуществами */
.ec-hero2__cta-wrap {
  position: absolute;
  top: var(--ec-cta-top, 62%);
  left: 50%;
  display: flex;
  justify-content: center;
  transform: translateX(-50%);
}

.ec-hero2__cta,
#rec644152175 .ec-hero2__cta,
#rec644152175 .ec-hero2__cta:link,
#rec644152175 .ec-hero2__cta:visited {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 34px;
  border: 2px solid var(--ec-wb);
  border-radius: 14px;
  background: var(--ec-wb);
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.ec-hero2__cta:hover,
.ec-hero2__cta:focus-visible,
#rec644152175 .ec-hero2__cta:hover,
#rec644152175 .ec-hero2__cta:focus-visible {
  border-color: var(--ec-wb-hover);
  background: var(--ec-wb-hover);
  color: #ffffff !important;
}

.ec-hero2__cta:active,
#rec644152175 .ec-hero2__cta:active {
  color: #ffffff !important;
  transform: translateY(1px);
}

/* преимущества */
.ec-hero2__feats {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ec-hero2__feat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 138px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .13);
}

.ec-hero2__feat-ic {
  flex: none;
  width: 26px;
  height: 26px;
  color: #ffffff;
  opacity: .95;
}

.ec-hero2__feat span {
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.18;
  text-align: left;
}

/* рейтинг */
.ec-hero2__proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 500;
}

.ec-hero2__proof b {
  color: #ffffff;
  font-weight: 700;
}

.ec-hero2__star {
  flex: none;
  width: 14px;
  height: 14px;
  color: #ffb703;
}

.ec-hero2__scroll {
  display: block;
  width: 22px;
  height: 22px;
  color: #ffffff;
  opacity: .5;
  animation: ec-hero-scroll 2s ease-in-out infinite;
}

.ec-hero2__scroll svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes ec-hero-scroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .ec-hero2__scroll { animation: none; }
}

/* ---------- Планшеты ---------- */
@media (max-width: 1199px) {
  .ec-subhead__in {
    max-width: 960px;
    padding: 14px 10px;
  }
}

@media (max-width: 979px) {
  /* панель с логотипом и бургером — прозрачная, поверх видео */
  #rec644152172 .t280__container.t280__positionfixed {
    top: var(--ec-ticker-h);
  }

  /* «Официальный магазин Wildberries» встаёт в строку с логотипом и бургером */
  .ec-subhead {
    position: fixed;
    top: var(--ec-ticker-h);
    right: 0;
    left: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ec-mobile-bar-h);
    border-top: 0;
    pointer-events: none;
  }

  .ec-subhead__in {
    justify-content: center;
    padding: 0 60px;
  }

  .ec-subhead__logo,
  .ec-subhead__contacts {
    display: none;
  }

  .ec-subhead__store {
    font-size: 12px;
    text-align: center;
  }

  /* первый экран во всю высоту под бегущей строкой */
  #rec644152175 {
    --ec-hero-height: calc(100svh - var(--ec-ticker-h));
  }

  .ec-hero2__title { font-size: 38px; }

  .ec-hero2__feat { width: 116px; }
}

/* ---------- Телефоны ---------- */
@media (max-width: 479px) {
  .ec-ticker__item {
    padding: 0 15px;
    font-size: 12px;
  }

  .ec-ticker__ic { width: 13px; height: 13px; }

  .ec-hero2__title { font-size: 34px; }

  .ec-hero2__subtitle {
    margin-top: 12px;
    font-size: 16px;
  }

  .ec-hero2__bottom {
    bottom: 30px;
    gap: 12px;
    padding: 0 12px;
  }

  .ec-hero2__feats {
    gap: 6px;
    width: 100%;
  }

  .ec-hero2__feat {
    width: calc((100% - 12px) / 3);
    gap: 6px;
    padding: 8px;
  }

  .ec-hero2__feat-ic { width: 22px; height: 22px; }

  .ec-hero2__cta-wrap {
    right: 12px;
    left: 12px;
    width: auto;
    transform: none;
  }

  .ec-hero2__cta {
    width: 100%;
    min-height: 58px;
    padding: 0 20px;
    font-size: 16px;
  }
}
