/* Блоки велоцентра во Владимире: адрес, тарифы, оплата и возврат.
   Свои классы vl-*, стили конструктора не трогаем. Палитра и шрифты как в остальных блоках страницы. */
.vl {
  --vl-ink: #230F0A;
  --vl-cream: #FFFAF5;
  --vl-yellow: #FFD700;
  --vl-yellow-soft: #FFEAB0;
  --vl-muted: rgba(0, 0, 0, 0.6);

  box-sizing: border-box;
  max-width: 740px;
  margin: 0 auto;
  padding: 75px 0 0;
  color: var(--vl-ink);
  font-family: 'YS Geo', Helvetica, Arial, sans-serif;
  scroll-margin-top: 90px;
}

.vl *,
.vl *::before,
.vl *::after {
  box-sizing: border-box;
}

/* :where() держит специфичность сброса низкой, чтобы его перебивали классы vl-* */
:where(.vl) p,
:where(.vl) h2,
:where(.vl) h3,
:where(.vl) ul {
  margin: 0;
  padding: 0;
}

:where(.vl) ul {
  list-style: none;
}

.vl-h2 {
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 46px;
  line-height: 90%;
}

.vl-h3 {
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 100%;
}

.vl > .vl-h2 {
  margin-bottom: 20px;
}

.vl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 26px 26px;
  border-radius: 30px;
  background: var(--vl-yellow);
}

.vl-card > .vl-h2 {
  margin-bottom: 20px;
}

.vl-card_soft {
  background: var(--vl-yellow-soft);
}

.vl-card_dark {
  background: var(--vl-ink);
  color: var(--vl-cream);
}

.vl-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: 20px;
  background: var(--vl-cream);
}

.vl-tile_soft {
  background: var(--vl-yellow-soft);
}

.vl-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vl-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 105%;
  color: var(--vl-muted);
}

.vl-card_dark .vl-label {
  color: rgba(255, 250, 245, 0.6);
}

.vl-big {
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 105%;
}

.vl-mid {
  font-size: 20px;
  font-weight: 500;
  line-height: 115%;
}

.vl-text {
  font-family: 'YS Text', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 130%;
  color: var(--vl-muted);
}

.vl-card_dark .vl-text {
  color: rgba(255, 250, 245, 0.75);
}

.vl-text a,
.vl-mid a {
  color: inherit;
  text-decoration: underline;
}

.vl-phone {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.vl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0 0;
}

.vl-btn,
.vl-btn:hover {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 32px;
  border-radius: 16px;
  background: var(--vl-ink);
  color: var(--vl-cream);
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.vl-btn:focus-visible {
  outline: 3px solid var(--vl-ink);
  outline-offset: 3px;
}

/* Кнопки сторов в тёмной карточке «не курьер Яндекс Еды» */
.vl-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 0;
}

.vl-btn_light,
.vl-btn_light:hover {
  background: var(--vl-yellow);
  color: var(--vl-ink);
}

.vl-btn_light:focus-visible {
  outline-color: var(--vl-yellow);
}

/* Тарифы */
.vl-tariffs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.vl-chip {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--vl-ink);
  color: var(--vl-cream);
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
}

.vl-price {
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 54px;
  line-height: 95%;
}

.vl-steps {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--vl-cream);
  overflow: hidden;
}

.vl-steps__head,
.vl-steps li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}

.vl-steps__head {
  font-size: 14px;
  font-weight: 500;
  color: var(--vl-muted);
  padding-bottom: 4px;
}

.vl-steps li {
  font-size: 18px;
  font-weight: 500;
  line-height: 110%;
}

.vl-steps li + li {
  border-top: 1px solid rgba(35, 15, 10, 0.08);
}

.vl-steps b {
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  white-space: nowrap;
}

.vl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vl-list li {
  position: relative;
  padding-left: 18px;
  font-size: 17px;
  font-weight: 500;
  line-height: 120%;
}

.vl-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.vl-list b {
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  white-space: nowrap;
}

.vl-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vl-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 6px 26px 0;
}

@media (max-width: 767px) {
  .vl {
    padding: 36px 15px 0;
    scroll-margin-top: 70px;
  }

  .vl-h2 {
    font-size: 30px;
    line-height: 105%;
  }

  .vl-h3 {
    font-size: 22px;
  }

  .vl-card {
    padding: 6.5vw;
    border-radius: 20px;
  }

  .vl-card > .vl-h2 {
    margin-bottom: 10px;
  }

  .vl-tile {
    padding: 20px;
  }

  .vl-grid2,
  .vl-tariffs {
    grid-template-columns: 1fr;
  }

  .vl-big {
    font-size: 24px;
  }

  .vl-mid {
    font-size: 17px;
  }

  .vl-price {
    font-size: 44px;
  }

  .vl-row {
    flex-direction: column;
    align-items: stretch;
  }

  .vl-steps li {
    font-size: 16px;
  }

  .vl-steps__head,
  .vl-steps li {
    padding: 12px 16px;
  }

  .vl-steps__head {
    padding-bottom: 2px;
  }

  .vl-list li {
    font-size: 16px;
  }

  .vl-stores {
    flex-direction: column;
  }

  .vl-links {
    flex-direction: column;
    padding: 6px 0 0;
  }
}

/* Чипы «где поменять аккумулятор» в блоке «как заряжать»: мобильные стили конструктора
   их прятали (нулевая ширина обёртки, скрытый фон), показываем строкой с переносом. */
@media (max-width: 767px) {
  [data-m="58"] {
    width: 100% !important;
    height: auto !important;
  }

  [data-m="60"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }

  [data-m="61"],
  [data-m="67"] {
    width: auto !important;
  }

  [data-m="62"],
  [data-m="68"] {
    padding: 12px 14px !important;
  }

  [data-m="135"],
  [data-m="138"] {
    display: block !important;
  }
}

/* Мобильные блоки вело.рф, которые конструктор дорисовывал скриптом и которые не попали в копию:
   фото байка с преимуществами (на десктопе их показывает картинка с выносками)
   и кнопка «перейти в приложение» вместо QR-кода в карточке «вы курьер-партнёр». */
.vl-feats,
.vl-app {
  display: none;
}

@media (max-width: 767px) {
  .vl-feats {
    display: block;
    width: 100%;
    padding-top: 10px;
  }

  .vl-feats__bike {
    display: block;
    width: 100%;
    height: auto;
  }

  .vl-feats__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  .vl-feats__item {
    display: flex;
    align-items: flex-end;
    min-height: 84px;
    padding: 14px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(35, 15, 10, 0.07);
    font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 110%;
  }

  [data-m="17"] {
    display: none !important;
  }

  [data-m="15"] {
    width: 100% !important;
  }

  .vl-app {
    display: block;
    justify-self: stretch;
    width: 100%;
    grid-area: 3 / 1 / 4 / 2;
    margin-top: 3vw;
  }

  /* карточка лежит вне .vl, поэтому цвета заданы явно, а не через --vl-* */
  .vl-app__btn,
  .vl-app__btn:hover {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    background: #FFD700;
    color: #230F0A;
    font-size: 18px;
  }

  .vl-app__btn:focus-visible {
    outline-color: #230F0A;
  }
}

/* Первый экран: две кнопки под заголовком (курьер Яндекс Еды / другая доставка) и строка преимуществ.
   Блок лежит внутри секции конструктора, вне .vl, поэтому цвета заданы явно. */
.vl-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  font-family: 'YS Geo', Helvetica, Arial, sans-serif;
  color: #230F0A;
}

.vl-hero__btns {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.vl-hero__btn,
.vl-hero__btn:hover {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 14px 26px;
  border-radius: 20px;
  text-align: left;
  text-decoration: none;
}

.vl-hero__btn_main,
.vl-hero__btn_main:hover {
  background: #FFD700;
  color: #230F0A;
}

.vl-hero__btn_alt,
.vl-hero__btn_alt:hover {
  background: #230F0A;
  color: #FFFAF5;
}

.vl-hero__btn:focus-visible {
  outline: 3px solid #230F0A;
  outline-offset: 3px;
}

.vl-hero__who {
  font-size: 15px;
  font-weight: 500;
  line-height: 110%;
  opacity: 0.75;
}

.vl-hero__act {
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 105%;
}

.vl-hero__note span {
  white-space: nowrap;
}

.vl-hero__note {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* Телефон велоцентра в шапке: на десктопе номер, на телефоне круглая кнопка с трубкой */
.header .header__phone {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin-right: 20px;
  padding: 0;
  color: #230F0A;
  font-family: YSGeo-Heavy, 'YS Geo', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.header__phone svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 1023px) and (min-width: 768px) {
  .header .header__phone span {
    display: none;
  }
}

@media (max-width: 767px) {
  /* колонка под заголовком на телефоне узкая (252px), блок растягиваем на ширину экрана минус поля 15px */
  .vl-hero {
    gap: 12px;
    margin: 24px calc(50% - 50vw + 15px) 0;
  }

  .vl-hero__btns {
    flex-direction: column;
    align-self: stretch;
    gap: 8px;
  }

  .vl-hero__btn,
  .vl-hero__btn:hover {
    min-height: 68px;
    padding: 12px 20px;
    border-radius: 16px;
  }

  .vl-hero__who {
    font-size: 14px;
  }

  .vl-hero__act {
    font-size: 18px;
  }

  .vl-hero__note {
    font-size: 14px;
  }

  /* место под кнопку телефона: стили шапки лежат в <body> позже этого файла, отсюда двойной класс */
  .header .header__container .header__logo {
    flex: none;
    width: 40vw;
  }

  .header .header--flex .navigation__inner {
    margin-right: 1vw;
  }

  .header .navigation__inner a {
    padding: 3vw 2vw;
  }

  .header .header__phone {
    justify-content: center;
    width: 9vw;
    height: 9vw;
    margin-right: 1.5vw;
    border-radius: 50%;
    background: #230F0A;
    color: #FFD700;
  }

  .header__phone svg {
    width: 4.6vw;
    height: 4.6vw;
  }

  .header .header__phone span {
    display: none;
  }
}

@media (max-width: 340px) {
  .header .header__container .header__logo {
    width: 36vw;
  }
}