/* Раздел сервисов Brontero — прототип.
   Только токены темы: --blue, --black, --light, --gray, Manrope, --border-radius,
   отступы --big-gap / --gap. Своих цветов почти нет — чтобы не выглядело вставкой. */

.bs { --bs-soft: #f3f5f9; --bs-line: var(--light); --bs-muted: #6f7380; color: var(--black); }
.bs *, .bs *::before, .bs *::after { box-sizing: border-box; }
.bs img { display: block; max-width: 100%; }

/* ---------- кнопки, ссылки, значки ---------- */
.bs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--50);
  padding: 0 var(--28); border: 0; border-radius: var(--border-radius); background: var(--blue); color: var(--white);
  font: var(--default); font-family: var(--ff-bold); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.bs-btn:hover { background: var(--blue-hover); color: var(--white); }
.bs-btn:disabled { background: var(--gray); cursor: not-allowed; }
.bs-btn--black { background: var(--black); }
.bs-btn--black:hover { background: #000; }
.bs-btn--white { background: var(--white); color: var(--black); }
.bs-btn--white:hover { background: #eef2ff; color: var(--black); }
.bs-btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.bs-btn--ghost:hover { background: rgba(255,255,255,.12); }
.bs-btn--sm { min-height: var(--40); padding: 0 var(--18); font-size: var(--14); }

.bs-link { padding: 0; border: 0; background: none; color: var(--blue); font: var(--default); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bs-link:hover { color: var(--blue-hover); }
.bs-more { color: var(--blue); font-family: var(--ff-bold); text-decoration: none; white-space: nowrap; }
.bs-more::after { content: " →"; }

.bs-pin { display: inline-block; flex: none; width: 11px; height: 14px; background: currentColor;
  -webkit-mask: var(--map-pointer) center / contain no-repeat; mask: var(--map-pointer) center / contain no-repeat; }

.bs-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--bs-soft); color: var(--bs-muted);
  font: var(--small); font-size: var(--12); line-height: 1.5; }
.bs-badge--studio { background: var(--blue); color: var(--white); }

/* ---------- секции ---------- */
.bs-sec { padding: var(--big-gap) 0; }
.bs-sec--top { padding-top: var(--40); }
.bs-sec--soft { background: var(--bs-soft); }
.bs-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--20) var(--40); margin-bottom: var(--40); }
.bs-sec h2, .bs-h1 { margin: 0; font: var(--h2); font-size: clamp(1.5rem, 1.05rem + 1.25vw, 2.25rem); line-height: 1.2; }
.bs-sec__note { max-width: 26rem; margin: 0; font: var(--default); color: var(--bs-muted); }
.bs-step-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--blue);
  font: var(--small); font-family: var(--ff-bold); letter-spacing: .02em; }
.bs-step-label span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: var(--white); font-size: 12px; }
.bs-empty { padding: var(--40); border: 1px dashed var(--bs-line); border-radius: var(--border-radius); text-align: center; color: var(--bs-muted); }
.bs-empty a { color: var(--blue); }
.bs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--24); font: var(--small); color: var(--bs-muted); }
.bs-crumbs a { color: inherit; text-decoration: none; }
.bs-crumbs a:hover { color: var(--blue); }

/* ---------- первый экран ---------- */
.bs-hero { position: relative; overflow: hidden; background: var(--blue); color: var(--white); }
.bs-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--40);
  min-height: min(36rem, 78vh); padding: var(--60) 0; }
.bs-hero__text { position: relative; z-index: 1; }
.bs-hero h1 { margin: var(--24) 0 var(--16); font: var(--h1); font-size: clamp(1.75rem, 1.05rem + 2.1vw, 2.9rem); line-height: 1.12; }
.bs-hero__lead { max-width: 34rem; margin: 0; font: var(--default); font-size: var(--17); line-height: 1.5; opacity: .9; }
.bs-hero__facts { display: flex; flex-wrap: wrap; gap: var(--16) var(--40); margin: var(--32) 0; padding: 0; list-style: none; }
.bs-hero__facts li { display: flex; flex-direction: column; font: var(--small); opacity: .9; }
.bs-hero__facts b { font-family: var(--ff-bold); font-size: var(--28); line-height: 1.15; opacity: 1; }
.bs-hero__cta { display: flex; flex-wrap: wrap; gap: var(--12); }
.bs-hero__img { align-self: stretch; display: flex; align-items: center; margin-right: calc(var(--standart-container-margin-lr) * -1); }
.bs-hero__img img { width: 118%; max-width: none; }
.bs-hero--hub .bs-hero__in { min-height: min(30rem, 70vh); }

.bs-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.15); color: var(--white); font: var(--small); font-family: var(--ff-bold); cursor: pointer;
  transition: background-color .2s ease; }
.bs-chip:hover { background: rgba(255,255,255,.25); }
.bs-chip__hint { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.35); font-family: var(--ff-regular); opacity: .8; }

/* ---------- города ---------- */
.bs-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-cities__item { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--bs-line); border-radius: 999px;
  background: var(--white); color: var(--black); font: var(--default); text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.bs-cities__item:hover { border-color: var(--black); }
.bs-cities__item.is-active { border-color: var(--black); background: var(--black); color: var(--white); }
.bs-cities__item sup { margin-left: 3px; font-size: .7em; opacity: .6; }
.bs-cities__item.is-soon, .bs-cities__item:disabled { border-style: dashed; background: transparent; color: var(--gray); cursor: default; }

/* ---------- станции ---------- */
.bs-stations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: start; gap: var(--30); }
.bs-stations__list { display: grid; gap: var(--16); }
.bs-stations__map { position: sticky; top: 100px; height: 600px; overflow: hidden; border-radius: var(--border-radius); background: var(--bs-soft); }
.bs-stations__map iframe { width: 100%; height: 100%; border: 0; }

.bs-st { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--20); padding: var(--16); border: 1px solid var(--bs-line);
  border-radius: var(--border-radius); background: var(--white); transition: border-color .2s ease, box-shadow .2s ease; }
.bs-st:hover, .bs-st.is-active { border-color: var(--blue); box-shadow: 0 10px 30px rgba(0, 73, 255, .08); }
.bs-st__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--bs-soft); }
.bs-st__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bs-st:hover .bs-st__photo img { transform: scale(1.04); }
.bs-st__nophoto { display: grid; place-items: center; height: 100%; padding: 12px; text-align: center; color: var(--gray); font: var(--small); }
.bs-st__title { margin: 8px 0 4px; font: var(--h3); font-family: var(--ff-bold); }
.bs-st__title a { color: inherit; text-decoration: none; }
.bs-st__title a:hover { color: var(--blue); }
.bs-st__addr { font: var(--default); }
.bs-st__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font: var(--small); color: var(--bs-muted); }
.bs-st__meta a { color: inherit; }
.bs-st__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }

/* ---------- калькулятор ---------- */
.bs-calc { display: grid; grid-template-columns: minmax(0, 1fr) 370px; align-items: start; gap: var(--30); }
.bs-calc__steps { display: grid; gap: var(--16); }
.bs-q { min-width: 0; margin: 0; padding: var(--24); border: 0; border-radius: var(--border-radius); background: var(--white); }
.bs-q legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 16px; padding: 0;
  font: var(--h3); font-family: var(--ff-bold); }
.bs-q legend + * { clear: both; }
.bs-q legend b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bs-soft); font-size: 13px;
  transition: background-color .2s ease, color .2s ease; }
.bs-q.is-done legend b { background: var(--blue); color: var(--white); }
.bs-q__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bs-q__fixed { display: flex; flex-direction: column; font-family: var(--ff-bold); }
.bs-q__fixed span { font: var(--small); color: var(--bs-muted); }
.bs-q__hint { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: #eaf0ff; color: #12348f; font: var(--small); }
.bs-q__hint a { color: inherit; }
.bs-q__sub { margin: 16px 0 10px; font: var(--small); color: var(--bs-muted); }
.bs-q__classes:not([hidden]) { display: block; }

.bs-select { position: relative; }
.bs-select::after { content: ""; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.bs-select select { width: 100%; min-height: var(--50); padding: 0 40px 0 16px; border: 1px solid var(--bs-line); border-radius: var(--border-radius);
  background: var(--white); color: var(--black); font: var(--default); -webkit-appearance: none; appearance: none; cursor: pointer; }
.bs-select select:focus { border-color: var(--blue); outline: none; }
.bs-select select:disabled { background: var(--bs-soft); color: var(--gray); cursor: not-allowed; }

.bs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-pill { position: relative; }
.bs-pill input { position: absolute; opacity: 0; pointer-events: none; }
.bs-pill span { display: block; padding: 10px 16px; border: 1px solid var(--bs-line); border-radius: 999px; font: var(--default); cursor: pointer; }
.bs-pill input:checked + span { border-color: var(--black); background: var(--black); color: var(--white); }
.bs-pill input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.bs-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bs-pack { position: relative; cursor: pointer; }
.bs-pack input { position: absolute; opacity: 0; pointer-events: none; }
.bs-pack__body { display: flex; flex-direction: column; height: 100%; padding: 16px; border: 1px solid var(--bs-line); border-radius: var(--border-radius);
  transition: border-color .2s ease, box-shadow .2s ease; }
.bs-pack:hover .bs-pack__body { border-color: var(--gray); }
.bs-pack input:checked + .bs-pack__body { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.bs-pack input:focus-visible + .bs-pack__body { outline: 2px solid var(--blue); outline-offset: 2px; }
.bs-pack__title { font-family: var(--ff-bold); font-size: var(--16); line-height: 1.3; }
.bs-pack__sub { flex: 1; margin: 6px 0 14px; font: var(--small); color: var(--bs-muted); }
.bs-pack__price { font-family: var(--ff-bold); font-size: var(--20); color: var(--blue); }
.bs-pack__time { font: var(--small); color: var(--bs-muted); }
.bs-pack__na { font: var(--small); color: var(--bs-muted); }
.bs-pack.is-na { cursor: not-allowed; }
.bs-pack.is-na .bs-pack__body { background: var(--bs-soft); }
.bs-pack.is-na .bs-pack__title, .bs-pack.is-na .bs-pack__sub { opacity: .55; }
.bs-pack.is-na .bs-pack__price, .bs-pack.is-na .bs-pack__time { display: none; }

.bs-extras { display: grid; gap: 8px; }
.bs-check { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bs-line); border-radius: var(--border-radius); cursor: pointer; }
.bs-check:hover { border-color: var(--gray); }
.bs-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.bs-check span { flex: 1; }
.bs-check b { font-family: var(--ff-bold); white-space: nowrap; }

.bs-calc__sum { position: sticky; top: 100px; }
.bs-sum { padding: var(--24); border-radius: var(--border-radius); background: var(--black); color: var(--white); }
.bs-sum__label { font: var(--small); opacity: .65; }
.bs-sum__price { margin: 4px 0 18px; font-family: var(--ff-bold); font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem); line-height: 1.1; }
.bs-sum__lines { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; font: var(--small); }
.bs-sum__lines li { display: flex; justify-content: space-between; gap: 12px; }
.bs-sum__lines li span:last-child { white-space: nowrap; }
.bs-sum__lines .is-muted { opacity: .6; }
.bs-sum__meta { margin-bottom: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); font: var(--small); opacity: .75; }
.bs-sum__meta:empty { display: none; }
.bs-lead { display: grid; gap: 8px; }
.bs-lead input { min-height: var(--50); padding: 0 14px; border: 0; border-radius: var(--border-radius); background: var(--white); color: var(--black); font: var(--default); }
.bs-lead input:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.bs-lead .bs-btn { width: 100%; }
.bs-lead__note { margin: 4px 0 0; font-size: 12px; opacity: .5; }
.bs-done { display: grid; gap: 6px; padding: 14px; border-radius: 8px; background: rgba(105, 210, 67, .15); font: var(--small); }
.bs-done b { font-family: var(--ff-bold); font-size: var(--16); color: var(--success-color); }
.bs-calc__bar { display: none; }

/* ---------- портфолио ---------- */
.bs-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--16); }
.bs-work { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: var(--border-radius); background: var(--bs-soft); }
.bs-work img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bs-work:hover img { transform: scale(1.04); }
.bs-work figcaption { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; padding: 48px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); color: var(--white); }
.bs-work figcaption b { font-family: var(--ff-bold); }
.bs-work figcaption span { font: var(--small); opacity: .85; }
.bs-work.is-hidden { display: none; }


/* ---------- страница станции ---------- */
.bs-station { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--30); }
.bs-gal__main { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--border-radius); }
.bs-gal__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin-top: 8px; }
.bs-gal__thumbs button { aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; }
.bs-gal__thumbs button.is-active { border-color: var(--blue); }
.bs-gal__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.bs-station__nophoto { aspect-ratio: 16 / 10; border-radius: var(--border-radius); background: var(--bs-soft); }
.bs-dl { display: grid; grid-template-columns: 130px 1fr; gap: 12px 16px; margin: 18px 0; }
.bs-dl dt { font: var(--small); color: var(--bs-muted); }
.bs-dl dd { margin: 0; font: var(--default); }
.bs-dl a { color: var(--black); }
.bs-station__text { margin-bottom: 18px; color: var(--bs-muted); }
.bs-station__map { width: 100%; height: 280px; border: 0; border-radius: var(--border-radius); }

/* ---------- новости ---------- */
.bs-news { display: grid; gap: var(--24); max-width: 52rem; }
.bs-new { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--24); padding-bottom: var(--24); border-bottom: 1px solid var(--bs-line); }
.bs-new__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--bs-soft); }
.bs-new__img img { width: 100%; height: 100%; object-fit: cover; }
.bs-new__meta { display: flex; align-items: center; gap: 10px; font: var(--small); color: var(--bs-muted); }
.bs-vk { padding: 2px 9px; border-radius: 999px; background: #0077ff; color: var(--white); font-size: 11px; }
.bs-new__title { margin: 6px 0 8px; font: var(--h3); font-family: var(--ff-bold); font-size: var(--20); }
.bs-new__text p { margin: 0 0 8px; }
.bs-more--vk::before { content: ""; }

/* ---------- выбор города в шапке ---------- */
.bs-hcity { position: relative; display: flex; align-items: center; }
.bs-hcity__btn { display: flex; align-items: center; gap: 7px; padding: 8px 0; border: 0; background: none; color: var(--black); font: var(--default); cursor: pointer; white-space: nowrap; }
.bs-hcity__btn:hover { color: var(--blue); }
.bs-hcity__btn .bs-pin { color: var(--blue); }
.bs-hcity__arr { width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.bs-hcity.is-open .bs-hcity__arr { margin-top: 3px; transform: rotate(-135deg); }
.bs-hcity__menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 250px; padding: 8px; border-radius: var(--border-radius);
  background: var(--white); box-shadow: 0 16px 48px rgba(0,0,0,.16); }
.bs-hcity__title { padding: 6px 10px; font: var(--small); color: var(--bs-muted); }
.bs-hcity__item { display: flex; justify-content: space-between; gap: 16px; padding: 10px; border-radius: 8px; color: var(--black); font: var(--default); text-decoration: none; }
.bs-hcity__item:hover { background: var(--bs-soft); color: var(--black); }
.bs-hcity__item span { color: var(--gray); font: var(--small); }
.bs-hcity__item.is-current { font-family: var(--ff-bold); }
.bs-hcity__item.is-soon { color: var(--gray); }
.bs-hcity__all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--bs-line); color: var(--blue); font: var(--small); text-decoration: none; }
.bs-burger-city { display: inline-flex !important; align-items: center; gap: 8px; color: var(--blue) !important; }

/* ---------- окно выбора города ---------- */
.bs-modal { width: calc(100% - 32px); max-width: 540px; padding: 0; border: 0; border-radius: 16px; color: var(--black); }
.bs-modal::backdrop { background: rgba(38, 38, 38, .6); }
.bs-modal__box { position: relative; padding: 28px; }
.bs-modal__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bs-soft); cursor: pointer; }
.bs-modal__title { margin-bottom: 18px; font: var(--h2); }
.bs-modal__cities { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs-modal__cities > * { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--bs-line); border-radius: var(--border-radius); color: inherit; text-decoration: none; }
.bs-modal__cities a:hover { border-color: var(--blue); }
.bs-modal__cities span { font: var(--small); color: var(--bs-muted); }
.bs-modal__cities .is-soon { border-style: dashed; color: var(--gray); }
.bs-modal__more { display: block; margin-top: 18px; color: var(--blue); text-decoration: none; }

/* ---------- адаптив ---------- */
@media (max-width: 64rem) {
  .bs-hero__in { grid-template-columns: 1fr; min-height: 0; padding: var(--40) 0 0; }
  .bs-hero__img { margin: 0 calc(var(--standart-container-margin-lr) * -1); }
  .bs-hero__img img { width: 100%; }
  .bs-stations, .bs-calc, .bs-station { grid-template-columns: 1fr; }
  .bs-stations__map { position: relative; top: 0; height: 340px; order: -1; }
  .bs-calc__sum { position: relative; top: 0; }
  .bs-calc__bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 calc(var(--standart-container-margin-lr) * -1) calc(var(--big-gap) * -1); padding: 12px var(--standart-container-margin-lr);
    background: var(--black); color: var(--white); }
  .bs-calc__bar b { font-family: var(--ff-bold); font-size: var(--20); }
  .bs-calc__bar.is-hidden { display: none; }
  .bs-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .bs-sec { padding: var(--60) 0; }
  .bs-sec__head { margin-bottom: var(--24); }
  .bs-hero__facts { gap: var(--16) var(--24); }
  .bs-hero__facts b { font-size: var(--22); }
  .bs-hero__cta .bs-btn { flex: 1 1 100%; }
  .bs-st { grid-template-columns: 1fr; }
  .bs-q { padding: var(--18); }
  .bs-q__row, .bs-packs, .bs-modal__cities { grid-template-columns: 1fr; }
  .bs-works { grid-template-columns: 1fr; }
  .bs-new { grid-template-columns: 1fr; }
  .bs-dl { grid-template-columns: 1fr; gap: 2px; }
  .bs-dl dd { margin-bottom: 10px; }
  .bs-cities { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--standart-container-margin-lr) * -1); padding: 0 var(--standart-container-margin-lr) 4px; scrollbar-width: none; }
  .bs-cities::-webkit-scrollbar { display: none; }
  .bs-cities__item { flex: none; }
}
.bs-sec, .bs-hero { scroll-margin-top: 90px; }

.header-visible .bs-hcity { margin-right: var(--24); }

/* .standart-container у темы — сетка на 12 колонок; родные блоки сами тянутся
   на всю ширину (grid-column: 1/-1). Делаем так же. У первого экрана своя
   раскладка — его не трогаем. */
.bs .standart-container:not(.bs-hero__in) > * { grid-column: 1 / -1; }

/* атрибут hidden должен побеждать display у наших блоков */
.bs [hidden] { display: none !important; }

.bs-work--more { display: grid; place-items: center; padding: var(--24); border: 1px dashed var(--gray); background: transparent; color: var(--blue);
  font-family: var(--ff-bold); font-size: var(--18); text-align: center; text-decoration: none; transition: background-color .2s ease; }
.bs-work--more:hover { background: var(--bs-soft); }
.bs-work--more small { display: block; margin-top: 6px; font: var(--small); color: var(--bs-muted); }


/* На телефоне шапка остаётся родной (логотип, корзина, бургер): город уже есть
   в плашке первого экрана и первым пунктом в бургере. */
@media (max-width: 40rem) {
  .header-visible .bs-hcity { display: none; }
}

@media (max-width: 64rem) {
  .scroll-to-top-button, #mgo-mcw-widget { transition: transform .25s ease; }
  html.bs-bar-on .scroll-to-top-button,
  html.bs-bar-on #mgo-mcw-widget { transform: translateY(-74px); }
}

/* заголовок поста — h2 ради структуры страницы, но не размером секции */
.bs-sec .bs-new__title { font-size: var(--20); line-height: 1.3; }

/* ===================== v2: компактный первый экран ===================== */
.bs-hero__in { min-height: 0; padding: var(--44, 2.75rem) 0; align-items: center; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bs-hero h1 { margin: var(--18) 0 var(--12); font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.12; }
.bs-hero__lead { font-size: var(--16); }
.bs-hero__facts { margin: var(--22) 0 var(--24); gap: var(--12) var(--36); }
.bs-hero__facts b { font-size: var(--24); }
.bs-hero__img { max-height: 22rem; overflow: hidden; }
.bs-hero__img img { width: 112%; }
.bs-hero--hub .bs-hero__in { min-height: 0; }

/* страница станции: фоном её собственное фото */
.bs-hero--photo { background: #0b1636 var(--bs-hero-photo) center / cover no-repeat; }
.bs-hero--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,18,52,.9) 0%, rgba(8,18,52,.72) 45%, rgba(8,18,52,.2) 100%); }
.bs-hero--photo .bs-hero__in { grid-template-columns: minmax(0, 1fr); min-height: 24rem; }
.bs-hero--photo .bs-hero__text { max-width: 50rem; }

/* станции сразу под первым экраном */
#stations.bs-sec { padding-top: var(--56, 3.5rem); }
#stations .bs-sec__head { margin-bottom: var(--24); }

/* ===================== v2: живая карта ===================== */
.bs-stations__list { grid-column: 1; grid-row: 1; }
.bs-stations__map { grid-column: 2; grid-row: 1; height: min(600px, calc(100vh - 130px)); }
.bs-ymap { width: 100%; height: 100%; }
.bs-ymap iframe { width: 100%; height: 100%; border: 0; }
.bs-ymap .bs-btn { margin-top: 8px; min-height: 36px; font-size: 13px; }
.bs-maptoggle { display: none; }

@media (max-width: 64rem) {
  .bs-stations { display: flex; flex-direction: column; }
  .bs-maptoggle { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 16px; border: 1px solid var(--bs-line);
    border-radius: 999px; background: var(--white); color: var(--black); font: var(--default); cursor: pointer; }
  .bs-maptoggle .bs-pin { color: var(--blue); }
  .bs-stations__map { display: none; height: 360px; }
  .bs-stations.is-map-open .bs-stations__map { display: block; }
}
@media (max-width: 64rem) { .bs-stations__map { order: 0; position: relative; top: 0; } }

/* ===================== v2: станция в калькуляторе, «что дальше», мини-карта ===================== */
.bs-st__photo img.is-map { object-position: center; }
.bs-stpick { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px; border: 1px solid var(--bs-line); border-radius: var(--border-radius); }
.bs-stpick__img { width: 80px; height: 60px; border-radius: 6px; object-fit: cover; background: var(--bs-soft); }
.bs-stpick__img[src=""] { visibility: hidden; }
.bs-stpick__txt { display: flex; flex-direction: column; min-width: 0; }
.bs-stpick__txt b { font-family: var(--ff-bold); }
.bs-stpick__txt span { font: var(--small); color: var(--bs-muted); }
.bs-stpick__change { position: relative; padding: 8px 14px; border-radius: 999px; background: var(--bs-soft); color: var(--blue);
  font: var(--small); font-family: var(--ff-bold); cursor: pointer; white-space: nowrap; }
.bs-stpick__change:hover { background: #e5ebf7; }
.bs-stpick__change select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.bs-stpick__change:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }

.bs-next { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: bsnext; font: var(--small); }
.bs-next li { position: relative; padding-left: 28px; opacity: .85; counter-increment: bsnext; }
.bs-next li::before { content: counter(bsnext); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(255,255,255,.14); font-size: 11px; font-family: var(--ff-bold); }

@media (max-width: 40rem) {
  .bs-stpick { grid-template-columns: 64px minmax(0, 1fr); }
  .bs-stpick__img { width: 64px; height: 48px; }
  .bs-stpick__change { grid-column: 1 / -1; justify-self: start; }
}

/* В колонке на телефоне блоки должны тянуться по ширине: align-items:start от
   десктопной сетки давал карте ширину 0 (у пустого контейнера нет своей ширины). */
@media (max-width: 64rem) {
  .bs-stations { align-items: stretch; }
  .bs-stations__map, .bs-stations__list { width: 100%; }
}

/* Телефон: компактные карточки — при десятках станций франшизы список не должен
   превращаться в бесконечную ленту фотографий. */
@media (max-width: 40rem) {
  .bs-st { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .bs-st__photo { aspect-ratio: 1; align-self: start; }
  .bs-st__title { margin-top: 6px; font-size: var(--16); }
  .bs-st__actions { gap: 10px 14px; margin-top: 10px; }
}

/* «На карте» на телефоне — иконка-метка рядом с кнопкой, а не отдельная строка */
@media (max-width: 40rem) {
  .bs-onmap { display: inline-grid; place-items: center; width: var(--40); height: var(--40); border: 1px solid var(--bs-line);
    border-radius: var(--border-radius); text-decoration: none; }
  .bs-onmap span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bs-onmap::before { content: ""; width: 12px; height: 16px; background: var(--blue);
    -webkit-mask: var(--map-pointer) center / contain no-repeat; mask: var(--map-pointer) center / contain no-repeat; }
  .bs-st__actions { flex-wrap: nowrap; }
}

/* ===================== v2.1: машина в первом экране — как на главной сайта =====================
   В исходной картинке машина срезана справа. На главной картинка прижата к правому
   краю ЭКРАНА, и срез совпадает с краем окна. Раньше здесь её резал контейнер
   (overflow:hidden + max-height) посреди страницы — получалась «наклейка». */
.bs-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bs-hero__img { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; display: flex; align-items: center; justify-content: flex-end;
  width: 52vw; max-height: none; margin: 0; overflow: visible; pointer-events: none; }
.bs-hero__img img { width: auto; max-width: 100%; max-height: 90%; object-fit: contain; object-position: right center; }

@media (max-width: 64rem) {
  .bs-hero__in { grid-template-columns: minmax(0, 1fr); }
  .bs-hero__img { position: static; display: block; width: auto; margin: var(--24) calc(var(--standart-container-margin-lr) * -1) 0 0; }
  .bs-hero__img img { width: 100%; max-height: none; }
}

/* контейнер темы — position:relative; картинку надо привязать к секции, а не к нему,
   иначе срез машины встаёт на 100 px левее края экрана. Тексту — прежняя ширина. */
@media (min-width: 64.0625rem) {
  .bs-hero__in { position: static; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .bs-hero__img { width: 48vw; }
}

/* ======================================================================
   v3 — правки заказчика 05.10. Раздел собран из готовых блоков сайта:
   графика, галочки, цены, карточки тарифов — разметка и стили темы,
   здесь только раскладка вокруг них.
   ====================================================================== */

.bs-intro .bs-hero__text { max-width: 36rem; }
.bs-intro .bs-hero__lead { max-width: 36rem; }
.bs-intro .bs-hero__facts { margin: var(--24) 0; }
.bs-intro__links { max-width: 36rem; margin: 0 0 var(--28); font: var(--default); font-size: var(--16); line-height: 1.55; opacity: .92; }
.bs-intro__links a { color: var(--white); font-family: var(--ff-bold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bs-intro__links a:hover { text-decoration-thickness: 2px; }

/* машина */
.bs-calc { display: block; }
.bs-calc__car { max-width: 40rem; margin-bottom: var(--32); }
.bs-calc__label { margin-bottom: 10px; font-family: var(--ff-bold); }
.bs-calc__car .bs-q__classes { margin-top: 14px; }
.bs-calc__car .bs-q__sub { margin-bottom: 8px; font: var(--small); color: var(--bs-muted); }

/* карточки тарифов — готовый блок /service-ekb/, выбираются как радиокнопки */
.bs-tariffs { margin-bottom: var(--24); }
.bs-tariff { cursor: pointer; background: var(--white); transition: border-color .2s ease, box-shadow .2s ease; }
.bs-tariff:hover { border-color: var(--blue); }
.bs-tariff.is-active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.bs-tariff__input { position: absolute; opacity: 0; pointer-events: none; }
.bs-tariff:has(.bs-tariff__input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.bs-tariff .image { aspect-ratio: 3 / 2; margin-bottom: var(--16); }
.bs-tariff .product-info__price-block { margin-bottom: 4px; }
.bs-tariff .product-info__duration { margin-bottom: 0; color: var(--bs-muted); font: var(--small); }

/* раскрытие выбранного тарифа: конфигуратор основного сайта */
.bs-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--40); align-items: start;
  padding: var(--40); border-radius: var(--border-radius); background: var(--white); }
.bs-detail > .bs-detail__side { grid-column: auto; } /* у темы тут grid-column 8/-1 — для её 12-колоночной сетки */
.bs-kc__title { margin: 0 0 8px; font: var(--h3); }
.bs-kc__title span { font-family: var(--ff-regular); }
.bs-kc__note { margin-bottom: var(--20); font: var(--small); color: var(--bs-muted); }
.bs-kc__note b { color: var(--black); }
.bs-detail .komplekt-configurator-images { display: grid; grid-template-columns: 3fr 2fr; gap: var(--16); align-items: center; }
.bs-detail .komplekt-configurator-images .image { position: relative; }
/* зоны кликаются прямо на рисунке */
.bs-detail [data-img-type="svg-kit-items"] > svg { pointer-events: none; transition: fill .2s ease; }
.bs-detail [data-img-type="svg-kit-items"] > svg * { pointer-events: all; cursor: pointer; }
.bs-detail [data-img-type="svg-kit-items"] > svg.is-hover:not([data-active]) { fill: var(--blue-transparent); fill-opacity: .45; }
.bs-detail .komplekt-configurator__wrap-composition-detals { margin-bottom: var(--24); }
.bs-detail .komplekt-configurator__wrap-composition-detals li:last-child { margin-top: 0; }
.bs-detail .configurator-checbox { margin-right: var(--20); }
.bs-detail .configurator-detal-data-title { cursor: pointer; }
.bs-detail li.is-hover .configurator-detal-data-title { color: var(--blue); }
.bs-adv { display: grid; gap: 10px; margin: var(--16) 0 0; padding: 0; list-style: none; }
.bs-adv .product-info__advantage { display: flex; align-items: center; gap: 8px; }
.bs-adv .product-info__advantage::before { content: ""; flex: 0 0 1.2rem; height: 1.2rem;
  background: url("/wp-content/uploads/2026/07/checkbox.svg") center / 100% no-repeat; } /* та же галочка, что в карточках тарифов */

/* итог */
.bs-total .komplekt-configurator__wrap-composition-price { align-items: baseline; }
.bs-total__lines { display: grid; gap: 6px; margin: var(--16) 0 0; padding: 0; list-style: none; font: var(--small); }
.bs-total__lines li { display: flex; justify-content: space-between; gap: 12px; }
.bs-total__lines li span:last-child { white-space: nowrap; }
.bs-total__lines .is-muted { color: var(--error-color); }
.bs-total__meta { margin-top: 8px; font: var(--small); color: var(--bs-muted); }
.bs-total__hint { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: #eef2ff; font: var(--small); }
.bs-total .komplekt-configurator__wrap-composition-button { width: 100%; margin-top: var(--24); text-decoration: none; }
.bs-total__note { margin: 10px 0 0; font: var(--small); font-size: var(--12); color: var(--bs-muted); }

@media (max-width: 64rem) {
  .bs-detail { grid-template-columns: minmax(0, 1fr); padding: var(--24); }
}
@media (max-width: 40rem) {
  .bs-detail { margin: 0 calc(var(--standart-container-margin-lr) * -1); padding: var(--24) var(--standart-container-margin-lr); border-radius: 0; }
  .bs-detail .komplekt-configurator-images { grid-template-columns: 1fr; }
  .bs-detail .komplekt-configurator-images .image[data-back] { width: 70%; margin: 0 auto; }
}

.bs-td { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--24); align-items: center; }
.bs-td__img img { width: 100%; height: auto; }
.bs-td .bs-adv { margin: 0; }
@media (min-width: 48rem) {
  /* выбор из трёх — всегда в один ряд (у темы на планшете 2 + 1) */
  .bs-tariffs.services__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
}
@media (max-width: 40rem) { .bs-td { grid-template-columns: 1fr; } }
.bs-intro .bs-hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--12) var(--24); max-width: 36rem; }
.bs-intro .bs-hero__facts li { font-size: var(--12); line-height: 1.3; }

/* ======================================================================
   правки 15.10: кнопка вместо машины на первом экране + преимущества одной историей
   ====================================================================== */



/* преимущества одной историей — тёмная «мастерская»: стол плоттера, лист плёнки, машина */
.bs-story { padding-top: var(--60); }
.bs-story__panel { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: 1fr auto;
  min-height: 34rem; border-radius: 28px; overflow: hidden; color: var(--white);
  background: radial-gradient(1100px 620px at 72% 38%, #143289 0%, #0b1d52 38%, #060e2a 75%, #050b20 100%); }
.bs-story__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* текст: главы сменяются мягко, без прыжков высоты */
.bs-story__text { position: relative; display: grid; align-items: center; padding: var(--48, 3rem) 0 var(--24) var(--48, 3rem); z-index: 1; }
.bs-story__ch { grid-area: 1 / 1; display: grid; gap: 14px; opacity: 0; transform: translateY(14px); filter: blur(4px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .7s ease; pointer-events: none; }
.bs-story__ch.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .15s; }
.bs-story__num { font-family: var(--ff-bold); font-size: var(--14); letter-spacing: .08em; color: #8fb0ff; }
.bs-story__num span { color: rgba(255, 255, 255, .35); }
.bs-story__title { margin: 0; font-family: var(--ff-bold); font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.1; color: var(--white); }
.bs-story__p { margin: 0; max-width: 30rem; font: var(--default); font-size: var(--17); line-height: 1.55; color: rgba(255, 255, 255, .74); }

.bs-story__timer { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.bs-story__timer b { font-family: var(--ff-bold); font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bs-story__timer span { max-width: 9rem; font: var(--small); color: rgba(255, 255, 255, .6); }
.bs-story__years { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 26rem; margin-top: 6px; }
.bs-story__years span { padding: 10px 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .07); text-align: center;
  font: var(--small); font-size: var(--12); color: rgba(255, 255, 255, .45); transition: background-color .4s ease, color .4s ease; }
.bs-story__years span.is-lit { background: var(--blue); color: var(--white); box-shadow: 0 0 18px rgba(0, 73, 255, .55); }
.bs-story__price { margin-top: 4px; font-family: var(--ff-bold); font-size: var(--22); }
.bs-story__price b { font-size: 3.4rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bs-story__price small { display: block; margin-top: 4px; font: var(--small); color: rgba(255, 255, 255, .6); }
.bs-story__split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 22rem; }
.bs-story__split i { height: 6px; border-radius: 3px; background: #8fb0ff; transform: scaleX(0); transform-origin: left; }
.bs-story__split span { grid-column: 1 / -1; margin-top: 6px; font: var(--small); color: rgba(255, 255, 255, .6); }

/* сцена */
.bs-story__stage { position: relative; display: flex; align-items: center; padding: var(--24) var(--24) 0 0; }
.bs-story__svg { display: block; width: 100%; height: auto; overflow: visible; }
.bs-story__src { position: absolute; width: 0; height: 0; overflow: hidden; }
.bs-story__sheet { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .22); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center; }
.bs-story__car { filter: invert(1) brightness(1.1); opacity: .82; }
.bs-story__piece { stroke-width: 2.4; stroke-linejoin: round; fill: none; /* без transform-box: масштаб зон — от угла рисунка, как у машины */
  filter: drop-shadow(0 0 5px rgba(140, 180, 255, .75)); }
.bs-story__piece.is-lifted { filter: drop-shadow(0 0 5px rgba(140, 180, 255, .6)) drop-shadow(0 14px 16px rgba(0, 0, 0, .45)); }
.bs-story__travel { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; stroke-dasharray: 3 7; }
.bs-story__sheen { mix-blend-mode: screen; pointer-events: none; }
.bs-story__head-ring { fill: rgba(143, 176, 255, .12); stroke: #fff; stroke-width: 1.6; }
.bs-story__head-dot { fill: #fff; }
.bs-story__head-cross { stroke: rgba(255, 255, 255, .8); stroke-width: 1.6; stroke-linecap: round; }
.bs-story__head { filter: drop-shadow(0 0 8px rgba(160, 195, 255, .95)); }

/* главы-вкладки с прогрессом */
.bs-story__nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
  padding: var(--20) var(--48, 3rem) var(--32); z-index: 1; }
.bs-story__tab { display: grid; gap: 10px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .5); text-align: left;
  font: var(--small); font-family: var(--ff-bold); cursor: pointer; transition: color .3s ease; }
.bs-story__tab:hover, .bs-story__tab.is-active { color: var(--white); }
.bs-story__tab i { display: block; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.bs-story__tab b { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: left; }
.bs-story__tab:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 6px; }

@media (max-width: 64rem) {
  .bs-story__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .bs-story__stage { order: -1; padding: var(--20) var(--12) 0; }
  .bs-story__text { min-height: 17rem; padding: var(--20) var(--24) 0; align-items: start; }
  .bs-story__nav { display: flex; gap: 14px; overflow-x: auto; padding: var(--16) var(--24) var(--24); scrollbar-width: none; }
  .bs-story__nav::-webkit-scrollbar { display: none; }
  .bs-story__tab { flex: 0 0 auto; min-width: 8.5rem; }
}
@media (max-width: 40rem) {
  .bs-story__panel { margin: 0 calc(var(--standart-container-margin-lr) * -1); border-radius: 0; }
  .bs-story__text { min-height: 19rem; }
  .bs-story__timer b, .bs-story__price b { font-size: 2.6rem; }
}
/* сетка стола — на всю панель, мягко гаснет к краям */
.bs-story__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  -webkit-mask-image: radial-gradient(70% 80% at 68% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 68% 45%, #000 30%, transparent 100%); }
.bs-story__trail { fill: none; stroke: #dbe6ff; stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(0 0 7px #9dbcff) drop-shadow(0 0 2px #fff); }
/* вкладки: полоска сверху, подпись под ней — полоски в одну линию при любой длине подписей */
.bs-story__tab { align-content: start; width: 100%; grid-template-columns: 100%; } /* у <button> сетка иначе сжимается по подписи */

/* первый экран: кнопка «Защитить свой автомобиль сейчас» в ряду кнопок, цифры — справа таблицей */
.bs-btn--protect { min-height: 3.5rem; padding: 0 10px 0 26px; gap: 16px; font-size: var(--17); }
.bs-btn--protect:hover { background: var(--black); color: var(--white); }
.bs-btn__arr { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); transition: transform .25s ease; }
.bs-btn__arr::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -8px;
  border-top: 2px solid var(--white); border-right: 2px solid var(--white); transform: rotate(45deg); }
.bs-btn--protect:hover .bs-btn__arr { transform: translateX(3px); }
.bs-intro .bs-hero__cta { margin-top: 4px; }
@media (min-width: 64.0625rem) {
  .bs-intro .bs-hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--80, 5rem); align-items: center; }
}

/* блоки на одном белом фоне, ровный ритм отступов — без «слайдов» разного цвета */
.bs > .bs-sec { padding: 4.5rem 0 0; }
.bs > .bs-sec:last-of-type { padding-bottom: 6rem; }
.bs-detail { background: var(--bs-soft); }
.bs-intro .bs-intro__links { margin-top: var(--16); }
/* установка — отдельной строкой под зонами */
.bs-detail .komplekt-configurator__wrap-composition-detals li.bs-install-row { margin-top: 6px; padding-top: 14px; border-top: 1px solid #dfe4ee; }
.bs-install-row .configurator-detal-data-title { cursor: default; }
.bs-install-row small { font: var(--small); color: var(--bs-muted); }
.bs-install-row .configurator-detal-data-price { color: var(--black); }
/* «готовые комплекты» в тексте первого экрана — красным (правка 15.10) */
.bs-accent { font-style: normal; font-family: var(--ff-bold); color: #ff4b4b; }

/* первый экран (15.10): вопросы-вкладки слева, лекала справа — тот же язык, что у истории ниже */
.bs-intro__slogan { margin: 6px 0 0; font: var(--default); font-size: var(--18); color: rgba(255, 255, 255, .85); }
.bs-qa { max-width: 36rem; margin: var(--28) 0 var(--20); }
.bs-qa__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bs-qa__tab { display: grid; grid-template-columns: 100%; align-content: start; gap: 10px; width: 100%; padding: 0; border: 0; background: none;
  color: rgba(255, 255, 255, .55); text-align: left; font: var(--small); font-family: var(--ff-bold); cursor: pointer; transition: color .3s ease; }
.bs-qa__tab:hover, .bs-qa__tab.is-active { color: var(--white); }
.bs-qa__tab i { display: block; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.bs-qa__tab b { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: left; }
.bs-qa__answers { display: grid; margin-top: 18px; }
.bs-qa__a { grid-area: 1 / 1; margin: 0; font-family: var(--ff-bold); font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem); line-height: 1.3;
  color: var(--white); opacity: 0; transform: translateY(10px); filter: blur(3px); pointer-events: none;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.bs-qa__a.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .12s; }
.bs-qa__a a { color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bs-qa__a a.bs-accent { color: #ff4b4b; }

.bs-kitviz { position: relative; align-self: stretch; display: flex; align-items: center; min-height: 27rem; }
.bs-kitviz__facts { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 0 var(--32);
  margin: 0; padding: 0; list-style: none; pointer-events: none; }
.bs-kitviz__facts li { display: flex; flex-direction: column; gap: 6px; padding: var(--24) 0; border-top: 1px solid rgba(255, 255, 255, .3);
  font: var(--default); font-size: var(--15, .9375rem); line-height: 1.35; }
.bs-kitviz__facts li span { opacity: .8; }
.bs-kitviz__facts b { font-family: var(--ff-bold); font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.bs-kitviz__places { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bs-kitviz__places a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 16px;
  border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--white); text-decoration: none; transition: background-color .2s ease; }
.bs-kitviz__places a:hover { background: rgba(255, 255, 255, .2); }
.bs-kitviz__places .bs-pin { grid-row: span 2; }
.bs-kitviz__places b { font-family: var(--ff-bold); }
.bs-kitviz__places small { font: var(--small); opacity: .75; }

/* сцены справа: цифры под бликом, плёнка в разрезе, карта сети (bs-hero.js) */
.bs-kv-scene { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; }
.bs-kv-scene--facts { overflow: hidden; }
.bs-kv-sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); }

.bs-film { --gap: 0px; --rz: -38deg; position: relative; flex: 0 0 56%; aspect-ratio: 1; perspective: 1400px; }
.bs-film__iso { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(var(--rz)); }
.bs-film__layer { position: absolute; inset: 14%; border-radius: 18px; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap))); }
.bs-film__layer--liner { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); }
.bs-film__layer--glue { background: radial-gradient(rgba(255, 255, 255, .4) 1px, transparent 1.7px) 0 0 / 10px 10px, rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .5); }
.bs-film__layer--pu { background: linear-gradient(135deg, rgba(170, 200, 255, .5), rgba(120, 160, 255, .22)); border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 0 40px rgba(120, 170, 255, .25); }
.bs-film__layer--pu::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(150, 185, 255, .12); transform: translateZ(-9px); } /* толщина полиуретана */
.bs-film__layer--top { --glow: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 60%, rgba(255, 255, 255, .32));
  box-shadow: 0 0 calc(18px + 40px * var(--glow)) rgba(255, 255, 255, calc(.2 + .5 * var(--glow))); }
.bs-film__scratch { position: absolute; left: 20%; top: 50%; width: 62%; height: 3px; border-radius: 2px; transform-origin: left center;
  background: rgba(8, 30, 100, .7); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); opacity: 0; }
.bs-film__labels { position: absolute; top: 0; bottom: 0; right: 0; width: 42%; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.bs-film__labels li { --lx: 0px; position: absolute; left: 0; right: 0; display: grid; gap: 2px; padding-left: 28px; opacity: 0;
  transform: translate(var(--lx), -50%); font: var(--small); line-height: 1.3; color: rgba(255, 255, 255, .85); }
.bs-film__labels li::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: rgba(255, 255, 255, .6); }
.bs-film__labels b { font-family: var(--ff-bold); font-size: var(--18); color: var(--white); }

.bs-kv-scene--net { flex-direction: column; justify-content: center; gap: 10px; }
.bs-net { display: block; width: 100%; height: auto; overflow: visible; }
.bs-net__grid line { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.bs-net__link { stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; stroke-linecap: round; }
.bs-net__link.is-soon { stroke: rgba(255, 255, 255, .35); }
.bs-net__city { opacity: 0; }
.bs-net__dot { fill: var(--white); }
.bs-net__city.is-here .bs-net__dot { stroke: rgba(255, 255, 255, .35); stroke-width: 7; }
.bs-net__city.is-soon .bs-net__dot { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; stroke-dasharray: 3 3; }
.bs-net__pulse { fill: none; stroke: var(--white); stroke-width: 1.5; }
.bs-net__name { fill: var(--white); font-family: var(--ff-bold); font-size: 15px; }
.bs-net__sub { fill: rgba(255, 255, 255, .72); font-size: 12px; }
.bs-net__city.is-soon .bs-net__name { fill: rgba(255, 255, 255, .7); }
.bs-kv-scene--net .bs-kitviz__places { position: static; width: 100%; }

/* доводка сцен: блик без краёв, слои шире, подписи компактнее, царапина заметнее */
.bs-kv-scene--facts { overflow: visible; }
.bs-kv-sheen { top: -60%; bottom: -60%; width: 34%;
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.bs-film { flex-basis: 50%; }
.bs-film__labels { width: 47%; }
.bs-film__labels li { font-size: var(--12); line-height: 1.25; }
.bs-film__labels b { font-size: var(--16); }
.bs-film__scratch { height: 4px; background: #0a1f6e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 10px rgba(255, 255, 255, .5); }

/* «кто мы»: цифры на карточках с фото с сайта (студия, отзывы покупателей, плёнка), подтонированных в синий */
.bs-kitviz__facts.bs-facts { inset: 3% 0; grid-auto-rows: 1fr; gap: 14px; align-content: stretch; }
.bs-kitviz__facts .bs-fact { --clip: 100%; --rise: 0px; position: relative; padding: 0; border-top: 0; overflow: hidden; border-radius: 18px;
  clip-path: inset(var(--clip) 0 0 0 round 18px); transform: translateY(var(--rise)); background: #0a2fae; }
.bs-fact__media { position: absolute; inset: 0; }
.bs-fact__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform, opacity; }
.bs-fact__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 32, 150, .94) 0%, rgba(0, 55, 220, .5) 48%, rgba(0, 73, 255, .18) 100%); }
.bs-fact__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #0049ff; mix-blend-mode: color; opacity: .45; }
.bs-fact__txt { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: grid; gap: 4px; }
.bs-fact__txt b { font-family: var(--ff-bold); font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.bs-fact__txt span { font: var(--small); line-height: 1.3; opacity: .9; }
.bs-kv-scene--facts .bs-kv-sheen { z-index: 3; mix-blend-mode: screen; }

/* плёнка занимает всю правую часть: слои расходятся от центра, сама плёнка крупнее */
.bs-film { flex: 0 0 58%; }
.bs-film__layer { inset: 11%; transform: translateZ(calc((var(--i) - 1.5) * var(--gap))); }
.bs-film__labels { width: 40%; }

/* ======================================================================
   страница станции под рекламу (21.10): все темы один раз и коротко
   ====================================================================== */
.bs-lhero.bs-hero--photo .bs-hero__in { min-height: 0; padding: var(--48, 3rem) 0 var(--40); }
.bs-lhero.bs-hero--photo .bs-hero__text { max-width: 44rem; }
.bs-lhero__place { margin-top: 14px; font: var(--small); font-family: var(--ff-bold); color: rgba(255, 255, 255, .75); letter-spacing: .02em; }
.bs-lhero h1 { margin: 8px 0 6px; font-size: clamp(2rem, 1.3rem + 1.8vw, 3.1rem); line-height: 1.08; }
.bs-lhero__price { font-size: var(--20); color: rgba(255, 255, 255, .85); }
.bs-lhero__price b { font-family: var(--ff-bold); font-size: clamp(2rem, 1.4rem + 1.4vw, 2.8rem); color: var(--white); letter-spacing: -.01em; }
.bs-lhero__pts { display: grid; gap: 10px; max-width: 36rem; margin: var(--20) 0 var(--24); padding: 0; list-style: none; }
.bs-lhero__pts li { position: relative; padding-left: 32px; font: var(--default); font-size: var(--17); line-height: 1.4; }
.bs-lhero__pts li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); }
.bs-lhero__pts li::after { content: ""; position: absolute; left: 7px; top: calc(.1em + 5px); width: 5px; height: 9px;
  border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); }
.bs-lhero__meta { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: var(--28) 0 0; padding: var(--20) 0 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .22); font-family: var(--ff-bold); }
.bs-lhero__meta span { display: block; margin-bottom: 2px; font: var(--small); font-size: var(--12); color: rgba(255, 255, 255, .65); }

.bs-btn--outline { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.bs-btn--outline:hover { background: var(--blue); color: var(--white); }
.bs-btn--ghost-dark { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.bs-btn--ghost-dark:hover { background: rgba(255, 255, 255, .12); color: var(--white); }

/* работы и отзывы */
.bs-trust__works { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; } /* до 5 фото — сколько есть, на всю ширину */
.bs-trust__work { position: relative; margin: 0; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 5; background: var(--bs-soft); }
.bs-trust__work img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bs-trust__work:hover img { transform: scale(1.05); }
.bs-trust__work figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; color: var(--white);
  font: var(--small); background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); }

/* вопросы + контакты */
.bs-help__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--48, 3rem); align-items: start; }
.bs-help__faq h2 { margin-bottom: var(--20); }
.bs-faq { border-top: 1px solid #e3e6ee; }
.bs-faq:last-child { border-bottom: 1px solid #e3e6ee; }
.bs-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; list-style: none; cursor: pointer;
  font-family: var(--ff-bold); font-size: var(--17); }
.bs-faq summary::-webkit-details-marker { display: none; }
.bs-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--blue); font-size: 24px; line-height: 1; transition: transform .25s ease; }
.bs-faq[open] summary::after { transform: rotate(45deg); }
.bs-faq p { max-width: 44rem; margin: 0 0 16px; font: var(--default); color: #4d5260; line-height: 1.5; }
.bs-help__card { position: sticky; top: 100px; display: grid; gap: 16px; padding: 24px; border-radius: 20px; background: var(--bs-soft); }
.bs-help__title { font: var(--h3); }
.bs-help__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-family: var(--ff-bold); }
.bs-help__list span { display: block; font: var(--small); font-size: var(--12); color: var(--bs-muted); }
.bs-help__list a { color: var(--blue); text-decoration: none; }
.bs-help__map { width: 100%; height: 240px; border: 0; border-radius: 12px; }
.bs-help__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* плашка со звонком */
.bs-callbar { position: fixed; left: 50%; bottom: 20px; z-index: 50; width: min(980px, calc(100% - 32px)); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, 40px);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, visibility 0s linear .45s; }
/* прячем прозрачностью, а не сдвигом за край: над баннером cookies плашка поднята, и сдвига не хватало */
.bs-callbar.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 0s; }
.bs-callbar__in { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 24px; border-radius: 999px; color: var(--white);
  background: rgba(16, 22, 44, .92); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bs-callbar__txt { flex: 1; display: grid; min-width: 0; }
.bs-callbar__txt b { font-family: var(--ff-bold); }
.bs-callbar__txt span { overflow: hidden; font: var(--small); opacity: .7; white-space: nowrap; text-overflow: ellipsis; }

/* ======================================================================
   страница станции, правки 21.10: блоки во всю ширину, низкий первый экран,
   калькулятор целиком в один экран. Только .bs-landing — остальной раздел как был.
   ====================================================================== */
.bs-calc__label--tariffs { display: none; }
.bs-lhero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bs-lhero__aside { position: relative; z-index: 1; } /* над затемнением фото, как и текст слева */
.bs-lhero__top .bs-lhero__place { margin: 0; }

@media (min-width: 64.0625rem) {
  /* поля по краям — как у шапки сайта, ширина не ограничена: страницы с историей-оклейкой (город и станция) — .bs-wide */
  .bs-wide { --standart-container-max-width: none; --standart-container-margin-lr: 50px; --standart-container-width: auto; } /* у темы ширина = 100vw */
  .bs-landing > .bs-sec { padding-top: 3.5rem; }
  .bs-landing > #calc { padding-top: 2.5rem; }

  /* первый экран: две колонки — предложение и звонок слева, преимущества и адрес справа */
  .bs-landing .bs-lhero .bs-hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5rem; align-items: center; padding: 2.25rem 0 2.5rem; }
  .bs-landing .bs-lhero .bs-hero__text { max-width: none; }
  /* текст и справа, а на фото белые буквы вывески: фото размыто и затемнено ровно по всей ширине */
  .bs-landing .bs-lhero::before { background: rgba(8, 18, 52, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .bs-landing .bs-lhero h1 { margin: 14px 0 4px; text-wrap: balance; }
  .bs-landing .bs-lhero .bs-hero__cta { margin-top: 1.25rem; }
  .bs-lhero__aside .bs-lhero__pts { max-width: none; margin: 0; }
  .bs-lhero__aside .bs-lhero__meta { margin-top: 1.25rem; padding-top: 1.1rem; }

  /* калькулятор: слева машина и вариант защиты, справа конфигуратор и цена */
  .bs-landing #calc .bs-sec__head { margin-bottom: 1.25rem; }
  .bs-landing #calc .bs-sec__note { display: none; } /* то же сказано под ценой */
  .bs-landing .bs-calc { display: grid; grid-template-columns: 27rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0 1.5rem; align-items: start; }
  .bs-landing .bs-calc__car { grid-area: 1 / 1; max-width: none; margin: 0 0 1.25rem; }
  .bs-landing .bs-calc__label--tariffs { display: block; grid-area: 2 / 1; }
  .bs-landing .bs-tariffs.services__list { grid-area: 3 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
  .bs-landing .bs-tariff { padding: 10px 14px 10px 10px; gap: 0; }
  .bs-landing .bs-tariff .product-info__description { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 14px; align-content: center; }
  .bs-landing .bs-tariff .image { grid-row: 1 / 6; align-self: center; margin: 0; }
  .bs-landing .bs-tariff .product-info__title { padding: 0; font-size: var(--18); line-height: 1.25; }
  .bs-landing .bs-tariff .product-info__small-description { padding: 2px 0 4px; font: var(--small); font-size: var(--13, .8125rem); color: var(--bs-muted); }
  .bs-landing .bs-tariff .product-info__price-block { margin: 0; }
  .bs-landing .bs-tariff .product-info__current-price { font-size: var(--18); }
  .bs-landing .bs-tariff .product-info__duration { font-size: var(--12); }

  /* высота серого блока не прыгает при смене варианта: не ниже левой колонки, а «Передняя часть»/«Целиком» держат высоту комплекта (bs.js) */
  .bs-landing .bs-detail { grid-area: 1 / 2 / 4 / 3; align-self: stretch; grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: 2.5rem; padding: 1.75rem 2rem; }
  .bs-landing .bs-detail__main { align-self: stretch; display: flex; flex-direction: column; }
  .bs-landing .bs-detail__main .komplekt-configurator-images, .bs-landing .bs-detail__main .bs-td { flex: 1; }
  .bs-landing .bs-detail .komplekt-configurator__wrap-composition-detals { gap: 6px; margin-bottom: 1rem; }
  .bs-landing .bs-detail .custom-checbox label { min-height: 32px; min-width: 32px; }
  .bs-landing .bs-detail .configurator-checbox { margin-right: 14px; }
  .bs-landing .bs-total .komplekt-configurator__wrap-composition-price-old { margin-bottom: 0; font-size: var(--20); }
  .bs-landing .bs-total .komplekt-configurator__wrap-composition-price-current,
  .bs-landing .bs-total .komplekt-configurator__wrap-composition-price-discont { font-size: 2.6rem; line-height: 1.15; }
  .bs-landing .bs-total .komplekt-configurator__wrap-composition-button { margin-top: 1rem; }

  /* история — тёмной полосой от края до края, как первый экран */
  .bs-wide .bs-story__panel { min-height: 0; margin: 0 calc(var(--standart-container-margin-lr) * -1); border-radius: 0; }
  .bs-wide .bs-story__text { padding-left: var(--standart-container-margin-lr); }
  .bs-wide .bs-story__stage { padding-right: var(--standart-container-margin-lr); }
  .bs-wide .bs-story__nav { padding-left: var(--standart-container-margin-lr); padding-right: var(--standart-container-margin-lr); }
  .bs-wide .bs-story__svg { max-height: 30rem; }

  /* работы: шире — значит ниже */
  .bs-landing .bs-trust__work { aspect-ratio: 4 / 3; }

  .bs-landing .bs-help__grid { grid-template-columns: minmax(0, 1fr) minmax(26rem, 36rem); gap: 4rem; }
}

/* ======================================================================
   страница станции под рекламу (21.10, вечер): тёмно-синий фон — ТОЛЬКО у неё
   (.bs-landing--navy — отдельный адрес станции под рекламу, мета ad_slug: /servis/ekaterinburg/brontero-studio/).
   Остальные станции — на белом. Калькулятор на синем — белой карточкой, внутри всё как на сайте.
   ====================================================================== */
.bs-landing--navy { --bs-navy: #0b1736; --bs-on-navy: rgba(255, 255, 255, .7); --bs-line-navy: rgba(255, 255, 255, .12); --bs-light-blue: #8fb0ff;
  background: var(--bs-navy); color: var(--white); }
.bs-landing--navy .bs-sec__head h2, .bs-landing--navy .bs-help__faq h2 { color: var(--white); }
.bs-landing--navy .bs-more { color: var(--bs-light-blue); }

.bs-landing--navy .bs-calc { padding: 24px; border-radius: 24px; background: var(--white); color: var(--black); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }

/* история во всю ширину: тонкие линии сверху и снизу, чтобы не сливалась с фоном */
.bs-landing--navy .bs-story__panel::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(255, 255, 255, .08); }

/* вопросы и карточка студии */
.bs-landing--navy .bs-faq { border-color: var(--bs-line-navy); }
.bs-landing--navy .bs-faq summary { color: var(--white); }
.bs-landing--navy .bs-faq summary::after { color: var(--bs-light-blue); }
.bs-landing--navy .bs-faq p { color: var(--bs-on-navy); }
.bs-landing--navy .bs-help__card { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--bs-line-navy); }
.bs-landing--navy .bs-help__title { color: var(--white); }
.bs-landing--navy .bs-help__list span { color: var(--bs-on-navy); }
.bs-landing--navy .bs-help__list a { color: var(--bs-light-blue); }
.bs-landing--navy .bs-btn--outline { color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.bs-landing--navy .bs-btn--outline:hover { background: var(--white); color: var(--blue); }
.bs-landing--navy .bs-callbar__in { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 40px rgba(0, 0, 0, .45); }
/* подвал темы идёт сразу за страницей: на синей странице он тёмно-синий, а не угольный — без резкой смены оттенка */
.bs-landing--navy + .footer.dark-block { background-color: #070f26; }

/* звёзды: закрашены на долю оценки */
.bs-stars { --r: 5; flex: none; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; color: transparent;
  background: linear-gradient(90deg, #ffb800 calc(var(--r) / 5 * 100%), var(--rw-star-off, rgba(10, 20, 50, .18)) 0); -webkit-background-clip: text; background-clip: text; }
.bs-stars::before { content: "★★★★★"; }

/* лента отзывов с карт: цвета — переменными, светлые по умолчанию, тёмные на синей странице */
.bs-rw { --rw-card: var(--bs-soft); --rw-card-hover: #edf0f6; --rw-line: rgba(10, 20, 50, .06); --rw-text: #2b303b; --rw-head: var(--black);
  --rw-muted: var(--bs-muted); --rw-link: var(--blue); --rw-chip: var(--bs-soft); --rw-chip-hover: #e6eaf3; --rw-arrow: var(--black);
  --rw-star-off: rgba(10, 20, 50, .18); margin-top: var(--48, 3rem); }
.bs-landing--navy .bs-rw { --rw-card: rgba(255, 255, 255, .05); --rw-card-hover: rgba(255, 255, 255, .08); --rw-line: rgba(255, 255, 255, .09);
  --rw-text: rgba(255, 255, 255, .88); --rw-head: var(--white); --rw-muted: var(--bs-on-navy); --rw-link: var(--bs-light-blue);
  --rw-chip: rgba(255, 255, 255, .06); --rw-chip-hover: rgba(255, 255, 255, .12); --rw-arrow: var(--white); --rw-star-off: rgba(255, 255, 255, .25); }
.bs-rw__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 18px; }
.bs-rw__title { font: var(--h3); color: var(--rw-head); }
.bs-rw__score { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; color: var(--rw-head); text-decoration: none;
  font: var(--small); background: var(--rw-chip); box-shadow: inset 0 0 0 1px var(--rw-line); transition: background-color .2s ease; }
.bs-rw__score b { font-family: var(--ff-bold); font-size: var(--18); }
.bs-rw__score span:last-child { color: var(--rw-muted); }
.bs-rw__score:hover { background: var(--rw-chip-hover); }
.bs-rw__nav { display: flex; gap: 8px; margin-left: auto; }
.bs-rw.is-static .bs-rw__nav { display: none; }
.bs-rw__arrow { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--rw-chip); box-shadow: inset 0 0 0 1px var(--rw-line); transition: background-color .2s ease, opacity .2s ease; }
.bs-rw__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -5px 0 0 -3px;
  border-left: 2px solid var(--rw-arrow); border-bottom: 2px solid var(--rw-arrow); transform: rotate(45deg); }
.bs-rw__arrow--next::before { margin-left: -7px; transform: rotate(-135deg); }
.bs-rw__arrow:hover:not(:disabled) { background: var(--blue); }
.bs-rw__arrow:hover:not(:disabled)::before { border-color: var(--white); }
.bs-rw__arrow:disabled { opacity: .35; cursor: default; }
.bs-rw__arrow:focus-visible { outline: 2px solid var(--rw-link); outline-offset: 2px; }
.bs-rw__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.bs-rw__track::-webkit-scrollbar { display: none; }
@media (max-width: 64rem) { .bs-rw__track { grid-auto-columns: minmax(16rem, 80%); } }

.bs-rv { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 18px; scroll-snap-align: start;
  color: var(--rw-head); background: var(--rw-card); box-shadow: inset 0 0 0 1px var(--rw-line); transition: background-color .2s ease, box-shadow .2s ease; }
.bs-rv:hover { background: var(--rw-card-hover); box-shadow: inset 0 0 0 1.5px var(--rw-link); }
.bs-rv__top { display: flex; align-items: center; gap: 12px; }
.bs-rv__ava { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #2a4fb8;
  color: var(--white); font-family: var(--ff-bold); font-size: var(--14); }
.bs-rv:nth-child(3n + 2) .bs-rv__ava { background: #3b6cf0; }
.bs-rv:nth-child(3n) .bs-rv__ava { background: #4a5d8f; }
.bs-rv__who { flex: 1; display: grid; min-width: 0; }
.bs-rv__who b { overflow: hidden; font-family: var(--ff-bold); white-space: nowrap; text-overflow: ellipsis; }
.bs-rv__who time { font: var(--small); font-size: var(--12); color: var(--rw-muted); }
.bs-rv__text { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  font: var(--default); font-size: var(--15, .9375rem); line-height: 1.5; color: var(--rw-text); }
.bs-rv.is-open .bs-rv__text { display: block; }
.bs-rv__more { position: relative; z-index: 1; align-self: flex-start; margin-top: -4px; font-size: var(--14); color: var(--rw-link); }
.bs-rv__photos { display: flex; gap: 8px; margin-top: auto; }
.bs-rv__photos img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--rw-chip); }
.bs-rv__link { margin-top: auto; font: var(--small); font-family: var(--ff-bold); color: var(--rw-link); text-decoration: none; }
.bs-rv__photos + .bs-rv__link { margin-top: 0; }
.bs-rv__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* вся карточка — ссылка на отзыв */

/* «Ваш город — …?» на /servis/: всплывает под выбором города в шапке (bs.js ставит позицию и хвостик) */
.bs-ask { position: fixed; top: 96px; right: 16px; z-index: 60; width: min(340px, calc(100% - 32px)); padding: 18px 20px 20px;
  border-radius: 16px; background: var(--white); color: var(--black); box-shadow: 0 18px 50px rgba(10, 20, 50, .22), 0 0 0 1px rgba(10, 20, 50, .06);
  opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.bs-ask.is-in { opacity: 1; transform: none; }
.bs-ask.is-anchored::before { content: ""; position: absolute; top: -7px; left: var(--ax, 50%); width: 14px; height: 14px; margin-left: -7px;
  background: var(--white); box-shadow: -1px -1px 0 rgba(10, 20, 50, .06); transform: rotate(45deg); }
.bs-ask__q { padding-right: 24px; font-size: var(--18); line-height: 1.3; }
.bs-ask__q b { font-family: var(--ff-bold); }
.bs-ask__btns { display: flex; gap: 8px; margin-top: 14px; }
.bs-ask__btns .bs-btn { flex: 1; }
.bs-ask__x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--bs-muted); font-size: 13px; cursor: pointer; }
.bs-ask__x:hover { background: var(--bs-soft); color: var(--black); }

/* просмотр фото: окно поверх страницы, в портфолио — во весь экран (bs.js) */
.bs-lb { box-sizing: border-box; width: min(1240px, 92vw); max-width: none; height: min(84vh, 880px); max-height: none; margin: auto; padding: 0;
  border: 0; border-radius: 22px; overflow: hidden; color: var(--white); background: #0b1220; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.bs-lb *, .bs-lb ::before { box-sizing: border-box; }
.bs-lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: bs-lb-in .35s cubic-bezier(.2, .7, .2, 1); }
.bs-lb::backdrop { background: rgba(6, 10, 22, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bs-lb--full { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
@keyframes bs-lb-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.bs-lb [hidden] { display: none; }
.bs-lb__stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 22px 84px 0; touch-action: pan-y; } /* ячейка определённого размера — иначе max-height: 100% у фото не работает */
.bs-lb__img { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; user-select: none; -webkit-user-drag: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.bs-lb__img.is-out { opacity: 0; transform: translateX(calc(var(--dir, 0) * -28px)); transition-duration: .16s; }
.bs-lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 28px 16px; font: var(--small); }
.bs-lb__cap { color: rgba(255, 255, 255, .86); }
.bs-lb__count { color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* мягкие стрелки: полупрозрачные круги с размытием, крупная зона нажатия */
.bs-lb__nav { position: absolute; top: calc(50% - 28px); z-index: 2; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: background-color .25s ease, transform .25s ease; }
.bs-lb__nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -6px 0 0 -3px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); }
.bs-lb__nav--next::before { margin-left: -8px; transform: rotate(-135deg); }
.bs-lb__nav--prev { left: 16px; }
.bs-lb__nav--next { right: 16px; }
.bs-lb__nav:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.bs-lb__nav:focus-visible, .bs-lb__x:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 3px; }
.bs-lb__x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--white); font-size: 15px; background: rgba(255, 255, 255, .1); transition: background-color .25s ease; }
.bs-lb__x:hover { background: rgba(255, 255, 255, .22); }
.bs-trust__work, .bs-works .bs-work:not(.bs-work--more), .bs-rv__photos img { cursor: zoom-in; }
.bs-rv__photos { position: relative; z-index: 1; } /* фото отзыва открываются в просмотре, остальная карточка — ссылка на отзыв */

/* вкладки анимаций (первый экран и история) кликабельны: номер шага, подсветка под курсором,
   выбранная во время перемотки (bs-hero.js / bs-story.js: .is-target) — сразу как активная */
.bs-story__tab, .bs-qa__tab { width: calc(100% + 20px); margin: -10px; padding: 10px; border-radius: 12px;
  transition: color .3s ease, background-color .25s ease; }
.bs-story__tab:hover, .bs-qa__tab:hover, .bs-story__tab.is-target, .bs-qa__tab.is-target { color: var(--white); background: rgba(255, 255, 255, .08); }
.bs-story__tab i, .bs-qa__tab i { transition: background-color .25s ease, transform .25s ease; transform-origin: left center; }
.bs-story__tab:hover i, .bs-qa__tab:hover i, .bs-story__tab.is-target i, .bs-qa__tab.is-target i { background: rgba(255, 255, 255, .45); transform: scaleY(1.5); }
.bs-story__tab:active, .bs-qa__tab:active { background: rgba(255, 255, 255, .14); }
.bs-tabnum { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -2px 8px 0 0; vertical-align: middle; border-radius: 50%;
  font-style: normal; font-size: 11px; line-height: 1; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.bs-story__tab.is-active .bs-tabnum, .bs-qa__tab.is-active .bs-tabnum, .bs-story__tab.is-target .bs-tabnum, .bs-qa__tab.is-target .bs-tabnum,
.bs-story__tab:hover .bs-tabnum, .bs-qa__tab:hover .bs-tabnum { background: var(--white); color: #0b1d52; box-shadow: none; }
.bs-qa__tab:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 2px; }

/* лента станции: у плитки с несколькими фото — пометка «N фото» (листаются в просмотре) */
.bs-trust__count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px;
  border-radius: 999px; color: var(--white); font: var(--small); font-size: var(--12); font-family: var(--ff-bold); pointer-events: none;
  background: rgba(8, 14, 32, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bs-trust__count::before { content: ""; width: 12px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px;
  box-shadow: 2px -2px 0 -0.5px rgba(8, 14, 32, .55), 2px -2px 0 1px currentColor; }
/* портфолио и лента: превью появляются мягко по мере прокрутки (грузятся лениво) */
.bs-works .bs-work img, .bs-trust__work img { opacity: 0; transition: opacity .5s ease, transform .6s ease; }
.bs-works .bs-work img.is-loaded, .bs-trust__work img.is-loaded { opacity: 1; }

/* ======================================================================
   мобильная версия (27.10): планшет ≤ 64rem (1024px), телефон ≤ 40rem (640px).
   Десктоп не меняется — всё ниже только внутри этих медиазапросов.
   ====================================================================== */
@media (max-width: 64rem) {
  /* ритм секций плотнее */
  .bs > .bs-sec { padding-top: 3rem; }
  .bs > .bs-sec:last-of-type { padding-bottom: 3.5rem; }

  /* история: текст без запаса высоты (главы лежат в одной ячейке — высота и так по самой длинной),
     вкладки — компактной лентой с прокруткой, активная подъезжает в поле зрения (bs-story.js) */
  .bs-story__text { min-height: 0; padding-bottom: 6px; }
  .bs-story__nav { gap: 6px; padding: 10px 16px 16px; scroll-snap-type: x proximity; }
  .bs-story__tab { flex: 0 0 auto; width: auto; min-width: 10.5rem; margin: 0; padding: 8px 10px; scroll-snap-align: start; }

  /* лента работ станции — прокруткой вбок от края до края экрана */
  .bs-trust__works { grid-auto-columns: minmax(0, 46%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--standart-container-margin-lr) * -1); padding: 0 var(--standart-container-margin-lr) 4px;
    scroll-padding: 0 var(--standart-container-margin-lr); }
  .bs-trust__works::-webkit-scrollbar { display: none; }
  .bs-trust__work { scroll-snap-align: start; }

  /* вопросы и карточка студии — одной колонкой, карточка не липнет */
  .bs-help__grid, .bs-landing .bs-help__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .bs-help__card { position: static; }

  /* кнопки чата и «наверх» — над плашкой со звонком, а не поверх её номера */
  .scroll-to-top-button, #mgo-mcw-widget { transition: transform .25s ease; }
  html.bs-callbar-on .scroll-to-top-button, html.bs-callbar-on #mgo-mcw-widget { transform: translateY(-70px); }
  /* плашка со звонком не наезжает на полоску с ценой калькулятора (в ней тоже есть «Позвонить») */
  html.bs-bar-on .bs-callbar.is-on { opacity: 0; visibility: hidden; transform: translate(-50%, 40px); pointer-events: none; }

  /* первый экран города: подписи слоёв плёнки переносятся, а не уезжают за край */
  .bs-film__labels { width: 46%; }
  .bs-film__labels li { padding-left: 22px; font-size: 12px; hyphens: auto; overflow-wrap: anywhere; }
  .bs-film__labels li::before { width: 14px; }
  .bs-film__labels b { font-size: 15px; }
}

@media (max-width: 40rem) {
  /* кнопки первого экрана — во всю ширину, текст переносится, стрелка не уезжает */
  .bs-hero__cta { gap: 10px; }
  .bs-hero__cta .bs-btn { width: 100%; }
  .bs-btn--protect { justify-content: space-between; padding-left: 18px; font-size: 15px; line-height: 1.25; white-space: normal; text-align: left; }
  .bs-lhero.bs-hero--photo .bs-hero__in { padding: 1.75rem 0 2rem; }
  .bs-lhero h1 { font-size: 1.85rem; }
  .bs-lhero__pts li { font-size: 15px; }
  .bs-lhero__meta { gap: 12px 24px; }

  /* варианты защиты — тремя компактными строками вместо листалки по одной большой карточке */
  .bs-calc__label--tariffs { display: block; margin: 18px 0 10px; }
  .bs-tariffs.services__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: visible; padding-bottom: 0; }
  .bs-tariffs .services__item.bs-tariff { flex: none; padding: 10px 12px 10px 10px; gap: 0; }
  .bs-tariff .product-info__description { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 12px; align-content: center; }
  .bs-tariff .image { grid-row: 1 / 6; align-self: center; margin: 0; }
  .bs-tariff .product-info__title { padding: 0; font-size: 16px; line-height: 1.25; }
  .bs-tariff .product-info__small-description { padding: 2px 0 4px; font-size: 12px; line-height: 1.35; color: var(--bs-muted); }
  .bs-tariff .product-info__price-block { margin: 0; }
  .bs-tariff .product-info__current-price { font-size: 16px; }
  .bs-tariff .product-info__duration { font-size: 11px; }
  .bs-landing--navy .bs-calc { padding: 16px; border-radius: 18px; }

  /* рисунки машины в калькуляторе — рядом, как на компьютере (столбиком калькулятор растягивался на экран) */
  .bs-detail .komplekt-configurator-images { grid-template-columns: 3fr 2fr; gap: 8px; }
  .bs-detail .komplekt-configurator-images .image[data-back] { width: auto; margin: 0; }

  /* лента работ: крупнее плитки, следующая выглядывает — видно, что листается */
  .bs-trust__works { grid-auto-columns: 78%; gap: 10px; }

  /* отзывы — листаются пальцем, стрелки не нужны */
  .bs-rw__track { grid-auto-columns: 86%; gap: 12px; margin: 0 calc(var(--standart-container-margin-lr) * -1); padding: 0 var(--standart-container-margin-lr);
    scroll-padding: 0 var(--standart-container-margin-lr); }
  .bs-rw__nav { display: none; }
  .bs-rw__head { gap: 10px; }
  .bs-rw__title { font-size: 20px; }

  /* портфолио — две колонки превью */
  .bs-works.bs-works--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bs-works--all .bs-work { border-radius: 12px; }
  .bs-works--all .bs-work figcaption { padding: 26px 10px 8px; }
  .bs-works--all .bs-work figcaption span { font-size: 11px; line-height: 1.25; }

  /* карточка студии внизу */
  .bs-help__cta .bs-btn { flex: 1 1 auto; }
  .bs-help__map { height: 220px; }

  /* плашка со звонком — компактная: название и номер */
  .bs-callbar { bottom: 10px; width: calc(100% - 20px); }
  .bs-callbar__in { gap: 8px; padding: 8px 8px 8px 16px; }
  .bs-callbar__txt b { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
  .bs-callbar__txt span, .bs-callbar .bs-btn--ghost-dark { display: none; }

  /* просмотр фото — во весь экран, стрелки внизу под большой палец, листается и свайпом */
  .bs-lb { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .bs-lb__stage { padding: 58px 0 0; }
  .bs-lb__img { border-radius: 0; }
  .bs-lb__nav { top: auto; bottom: 12px; width: 48px; height: 48px; }
  .bs-lb__nav--prev { left: auto; right: 68px; }
  .bs-lb__nav--next { right: 12px; }
  .bs-lb__bar { min-height: 72px; padding: 12px 130px 14px 16px; }

  /* «Ваш город — …?» на телефоне — под шапкой во всю ширину (выбора города в шапке тут нет) */
  .bs-ask { top: 72px; left: 12px; right: 12px; width: auto; }
}