/* ---------------------------------------------------------
   V-SHOES hero slider (Helix3 / Bootstrap3)
   Goal: максимально близко к макету (левый градиент + типографика)
--------------------------------------------------------- */

.vshoes-hero{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  min-height: 420px;
  color: #fff;
}

/* Slides container */
.vshoes-hero__slides{ position: relative; }

/* Slide = фон */
.vshoes-hero__slide{
  position: relative;
  min-height: 570px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: none;
}
.vshoes-hero__slide.is-active{ display: block; }

/* Маска/градиент слева (как на примере):
   - слева плотнее/темнее
   - к середине мягкий уход
   - справа почти прозрачно
*/
.vshoes-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.70) 22%,
      rgba(0,0,0,.56) 40%,
      rgba(0,0,0,.28) 58%,
      rgba(0,0,0,.12) 70%,
      rgba(0,0,0,0) 84%
    );
}

/* Контент-область слева */
.vshoes-hero__content{
  position: relative;
  z-index: 2;
  padding: 30px 34px 22px;
  max-width: 680px;          /* чтобы текст “дышал” и не уползал */
}

/* Вертикальная композиция */
.vshoes-hero__left{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Логотип */
.vshoes-hero__logo{
  margin-bottom: 4px;
}
.vshoes-hero__logo img{
  height: 30px;
  width: auto;
  display: block;
  opacity: .95;
}

/* Заголовок (как на баннере: очень жирный, плотный, капс) */
.vshoes-hero__heading{
  font-family: inherit; /* Helix3 тянет свой шрифт, оставим */
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .90;
  font-size: 80px;
}

/* Подзаголовок */
.vshoes-hero__subheading{
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgb(239 199 84 / 89%);
  font-size: 27px;
}

/* Кнопка: тонкая рамка, “плоская”, как на макете */
.vshoes-hero__cta{ margin-top: 6px; }

.vshoes-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 2px;
  background: rgba(0,0,0,.10);
  color: #fff !important;
  text-decoration: none !important;

  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .10em;

  transition: all .18s ease;
}

.vshoes-hero__btn:hover,
.vshoes-hero__btn:focus{
  border-color: rgba(255,255,255,.80);
  background: rgba(0,0,0,.22);
}

/* Нижняя полоска (бейджи) — как на примере */
.vshoes-hero__badges{
  margin-top: 118px;
  padding-top: 16px;
  display: flex;
  gap: 27px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.16);
}

/* Бейдж */
.vshoes-badge{
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.vshoes-badge__icon{
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  opacity: .95;
  background: rgba(0,0,0,.10);
}

.vshoes-badge__icon svg{
  width: 18px;
  height: 18px;
  fill: #fff;
  display: block;
}

/* Текст бейджа */
.vshoes-badge__title{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  line-height: 1.1;
}

.vshoes-badge__sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.74);
  line-height: 1.15;
}

/* Стрелки — аккуратные и не “кричащие” */
.vshoes-hero__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.18);

  color: #fff;
  font-size: 26px;
  line-height: 40px;
  padding: 0;
  cursor: pointer;
  transition: all .18s ease;
}

.vshoes-hero__arrow:hover{
  border-color: rgba(255,255,255,.70);
  background: rgba(0,0,0,.30);
}

.vshoes-hero__arrow--prev{ left: 14px; }
.vshoes-hero__arrow--next{ right: 14px; }

/* Точки */
.vshoes-hero__dots{
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.vshoes-hero__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
  cursor: pointer;
  padding: 0;
}
.vshoes-hero__dot.is-active{
  background: rgba(255,255,255,.85);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 991px){
  .vshoes-hero,
  .vshoes-hero__slide{ min-height: 360px; }

  .vshoes-hero__heading{ font-size: 50px; }
  .vshoes-hero__content{ padding: 26px 26px 18px; }
}

@media (max-width: 767px){
  .vshoes-hero,
  .vshoes-hero__slide{ min-height: 320px; border-radius: 4px; }

  .vshoes-hero__content{
    padding: 18px 16px 14px;
    max-width: 100%;
  }

  .vshoes-hero__heading{
    font-size: 38px;
    line-height: .94;
  }

  .vshoes-hero__subheading{
    font-size: 15px;
    letter-spacing: .08em;
  }

  .vshoes-hero__badges{
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
  }

  .vshoes-hero__arrow{
    width: 38px;
    height: 38px;
    font-size: 24px;
    line-height: 36px;
  }
}