/* ==========================================================================
   Лендинг акции «Красота спасёт жизнь» (/krasota/). Префикс bs-.
   Токены сайта продублированы локально: файл грузится только на этой странице,
   конфликтов со style.css нет. Шрифт TT Fors подключён глобально (style.css)
   и существует ровно в одном начертании — иерархия строится размером,
   капслоком и трекингом, а не весом.
   ========================================================================== */
:root {
  --bs-red: #DA352C;
  --bs-dark-red: #AA1D1D;
  --bs-black: #141412;
  --bs-white: #fff;
  --bs-grey: #EFEFEF;
  --bs-border: #E6E4E1;
  --bs-ink-55: rgba(20, 20, 18, 0.55);
  --bs-ink-75: rgba(20, 20, 18, 0.75);
  --bs-pink: #FF3D8B;
  --bs-coral: #FF5F4E;
  --bs-amber: #FF9A3C;
  /* «фольга» — материал акции: живёт в hero, в активной дате и нигде больше */
  --bs-foil: linear-gradient(115deg, #FF3D8B 0%, #FF5F4E 44%, #FF9A3C 78%, #FFC46B 100%);
  --bs-foil-soft: linear-gradient(135deg, rgba(255, 61, 139, 0.10) 0%, rgba(255, 154, 60, 0.12) 100%);
  --bs-r-card: 1.88rem;
  --bs-r-pill: 3.13rem;
  --bs-sh-card: 0 4px 15px rgba(0, 0, 0, 0.05);
  --bs-sh-hover: 0 14px 32px rgba(0, 0, 0, 0.09);
  --bs-sh-btn: 0 12px 28px rgba(218, 53, 44, 0.28);
  --bs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.bs-page { overflow-x: clip; background: var(--bs-white); }
/* :where() держит специфичность на уровне одного класса — иначе сброс margin
   у p/ul (0-1-1) перебивал бы отступы компонентов ниже по файлу (0-1-0) */
.bs-page :where(p, ul) { margin: 0; }
.bs-page :where(ul) { padding: 0; list-style: none; }
/* height: auto обязателен — иначе HTML-атрибут height у <img> побеждает aspect-ratio */
.bs-page img { max-width: 100%; display: block; height: auto; }
.bs-page :focus-visible { outline: 2px solid var(--bs-red); outline-offset: 3px; border-radius: 4px; }
/* запас под липкую шапку, если скролл ушёл браузеру (js/beauty.js считает точнее) */
.bs-page [id] { scroll-margin-top: 7rem; }

/* ===== Типографика ===== */
.bs-eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--bs-ink-55); margin: 0 0 1.1rem;
}
.bs-h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.67rem); line-height: 1.12; letter-spacing: -0.01em;
  margin: 0 0 1.2rem; color: var(--bs-black);
}
.bs-lead { font-size: 1rem; line-height: 1.55; color: var(--bs-ink-75); }
.bs-lead + .bs-lead { margin-top: 0.9rem; }

/* ===== Кнопки ===== */
.bs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 3.13rem; padding: 0 1.9rem; border-radius: var(--bs-r-pill);
  font-family: inherit; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1; border: 1px solid var(--bs-red); background: var(--bs-red); color: var(--bs-white);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .25s var(--bs-ease), background .25s, color .25s, box-shadow .25s, border-color .25s;
}
.bs-btn { position: relative; overflow: hidden; }
/* Фольговый блик пробегает по кнопке — связывает CTA с hero */
.bs-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.bs-btn:hover::after { animation: bsSheen .75s var(--bs-ease-out) forwards; }
@keyframes bsSheen {
  0% { left: -60%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}
.bs-btn:hover { background: var(--bs-dark-red); border-color: var(--bs-dark-red); color: var(--bs-white); transform: translateY(-2px); box-shadow: var(--bs-sh-btn); }
.bs-btn--ghost { background: transparent; color: var(--bs-black); border-color: #D9D6D2; }
.bs-btn--ghost:hover { background: transparent; color: var(--bs-black); border-color: var(--bs-black); box-shadow: none; }
.bs-btn--light { background: var(--bs-white); color: var(--bs-black); border-color: var(--bs-white); }
.bs-btn--light:hover { background: var(--bs-white); color: var(--bs-red); border-color: var(--bs-white); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.bs-btn--outline { background: transparent; color: var(--bs-white); border-color: rgba(255, 255, 255, 0.6); }
.bs-btn--outline:hover { background: rgba(255, 255, 255, 0.14); color: var(--bs-white); border-color: var(--bs-white); box-shadow: none; }
.bs-btn--lg { height: 3.6rem; padding: 0 2.4rem; font-size: 0.85rem; }
.bs-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Обёртка кнопки Б24-формы: Б24 в режиме click цепляется к узлу после скрипта,
   contents оставляет саму кнопку прямым элементом флекс-раскладки */
.bs-b24 { display: contents; }

/* ===== Секции ===== */
.bs-section { padding: 5.5rem 0; }
.bs-section--grey { background: var(--bs-grey); }
.bs-section--tight { padding-top: 3rem; }
.bs-section__head { max-width: 46rem; margin-bottom: 2.6rem; }

/* ==========================================================================
   HERO — фольга во всю ширину, заголовок капслоком, белая плашка-манифест
   наезжает снизу и «приземляет» акцию в дизайн сайта
   ========================================================================== */
.bs-hero {
  position: relative;
  min-height: min(30rem, 78vh);
  display: flex; align-items: center;
  padding: 5rem 0 7.5rem;
  background: #FF6A57;
  isolation: isolate; overflow: hidden;
}
.bs-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 18, 0.18) 0%, rgba(20, 20, 18, 0) 45%, rgba(20, 20, 18, 0.12) 100%);
}

/* Фольга живёт двумя слоями: внешний двигает скролл и курсор, внутренний
   дрейфует сам по себе — вместе получается медленный перелив плёнки */
.bs-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bs-hero__layer { position: absolute; inset: -12% -6%; will-change: transform; }
.bs-hero__layer i {
  display: block; position: absolute; inset: 0;
  background: url('/img/krasota/foil.jpg') center / cover no-repeat;
  will-change: transform, filter;
}
.bs-hero__layer--front i { transform: scaleX(-1); }
.bs-hero__layer--front { opacity: 0.55; mix-blend-mode: soft-light; }
.bs-js .bs-hero__layer--back i { animation: bsDrift 34s ease-in-out infinite alternate; }
.bs-js .bs-hero__layer--front i { animation: bsDriftAlt 27s ease-in-out infinite alternate; }

@keyframes bsDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); filter: hue-rotate(0deg); }
  to { transform: scale(1.07) translate3d(-1.6%, 1.1%, 0); filter: hue-rotate(5deg); }
}
@keyframes bsDriftAlt {
  from { transform: scaleX(-1) scale(1.05) translate3d(1%, 0.6%, 0); }
  to { transform: scaleX(-1) scale(1.01) translate3d(-0.8%, -1%, 0); }
}

/* Строка в маске — базовый приём всех reveal'ов на странице.
   font: inherit обязателен: в style.css сайта есть `* { font-size: 21px }`,
   и без сброса обёртки схлопывают заголовок до базового кегля */
.bs-mask, .bs-mask__in, .bs-w { font: inherit; letter-spacing: inherit; }
.bs-mask { display: block; overflow: hidden; }
.bs-mask.is-done { overflow: visible; }
.bs-mask__in { display: block; will-change: transform; }
.bs-hero__in { width: 100%; padding: 0 1.5rem; text-align: center; color: var(--bs-white); }
.bs-hero__eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.92); margin: 0 0 1.4rem;
  text-shadow: 0 1px 10px rgba(120, 20, 40, 0.35);
}
.bs-hero__title {
  font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 0.94; letter-spacing: -0.015em;
  text-transform: uppercase; margin: 0; color: var(--bs-white);
  text-shadow: 0 2px 24px rgba(140, 25, 45, 0.28);
}
.bs-hero__date {
  margin: 1.6rem auto 0; display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1.2rem; border-radius: var(--bs-r-pill);
  background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--bs-white);
}

.bs-manifest { margin-top: -5.5rem; position: relative; z-index: 2; padding: 0 1.5rem 0; }
.bs-manifest__card {
  max-width: 52rem; margin: 0 auto; background: var(--bs-white);
  border-radius: var(--bs-r-card); box-shadow: var(--bs-sh-hover);
  padding: 2.6rem clamp(1.5rem, 4vw, 3.2rem); text-align: center;
}
.bs-manifest__title { font-size: clamp(1.4rem, 2.4vw, 1.88rem); line-height: 1.2; margin: 0 0 1rem; }
.bs-manifest__text { font-size: 1rem; line-height: 1.55; color: var(--bs-ink-75); }
.bs-manifest .bs-actions { justify-content: center; margin-top: 1.8rem; }

/* ==========================================================================
   ДВЕ КОЛОНКИ (текст + фото)
   ========================================================================== */
.bs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.bs-split--reverse .bs-split__media { order: -1; }
.bs-split__text .bs-actions { margin-top: 1.8rem; }

/* Цифры фонда: три колонки, разделённые волосяной линией. Вес шрифта один на весь
   сайт, поэтому контраст строится размером и капслоком, а не жирностью */
.bs-facts {
  margin: clamp(3rem, 5vw, 4.5rem) 0 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--bs-border); padding-top: clamp(2.4rem, 3.5vw, 3.4rem);
}
.bs-fact__num {
  display: block; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 0.95;
  letter-spacing: -0.03em; color: var(--bs-black); white-space: nowrap;
}
.bs-fact__text {
  display: block; margin-top: 1.4rem; max-width: 12rem; font-size: 0.68rem; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--bs-ink-55);
}

.bs-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bs-r-card); }

/* Видео вместо фото: обложка-кнопка, плеер встаёт на её место по клику */
.bs-video { position: relative; border-radius: var(--bs-r-card); overflow: hidden; background: var(--bs-grey); }
.bs-video__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; color: var(--bs-white); font-family: inherit;
}
.bs-split__media.bs-video img {
  aspect-ratio: 16 / 9; border-radius: 0;
  transition: transform .6s var(--bs-ease-out), filter .4s;
}
.bs-video__btn:hover img { transform: scale(1.03); filter: brightness(0.94); }
.bs-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--bs-foil);
  display: grid; place-items: center; box-shadow: 0 12px 30px rgba(255, 95, 78, 0.35);
  transition: transform .3s var(--bs-ease-out);
}
.bs-video__btn:hover .bs-video__play { transform: translate(-50%, -50%) scale(1.08); }
.bs-video__play svg { width: 1.7rem; height: 1.7rem; fill: var(--bs-white); }
.bs-video__label {
  position: absolute; left: 1.2rem; bottom: 1.2rem;
  padding: 0.45rem 1rem; border-radius: var(--bs-r-pill);
  background: rgba(20, 20, 18, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
}
.bs-video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ==========================================================================
   СОБЫТИЯ АКЦИИ — строка билетов над календарём. Отдельный тип активности:
   у события конкретный час и регистрация, у партнёра — период и покупка.
   Форма нарочно другая (пилюля с кружком даты, а не карточка с фото), чтобы
   строка не читалась как ещё один фильтр календаря. Лента скроллится:
   событий может быть и три, и десять.
   ========================================================================== */
.bs-events { margin-bottom: 1.7rem; }
.bs-events__bar { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.85rem; }
.bs-events__bar p { font-size: 0.8rem; line-height: 1.4; color: var(--bs-ink-75); }
.bs-events__bar strong { font-weight: normal; color: var(--bs-black); }
.bs-events__track {
  display: flex; gap: 0.7rem; overflow-x: auto; scrollbar-width: none;
  /* как у ленты дат: запас больше радиуса тени, иначе скролл-контейнер её срежет */
  padding: 0.9rem 0.4rem; margin: -0.9rem -0.4rem;
}
.bs-events__track::-webkit-scrollbar { display: none; }
.bs-event {
  flex: 0 0 auto; display: flex; align-items: center; gap: 0.9rem;
  padding: 0.55rem 1.5rem 0.55rem 0.6rem; border-radius: var(--bs-r-pill);
  background: var(--bs-white); border: 1px solid var(--bs-border);
  color: var(--bs-black); text-decoration: none;
  transition: border-color .25s, transform .25s var(--bs-ease), box-shadow .25s;
}
a.bs-event:hover { border-color: var(--bs-black); transform: translateY(-2px); box-shadow: var(--bs-sh-card); }
.bs-event__date {
  flex: 0 0 auto; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--bs-foil); color: var(--bs-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.bs-event__date b { font-size: 1.02rem; letter-spacing: -0.02em; }
.bs-event__date i { font-style: normal; font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.18rem; }
.bs-event__txt b { display: block; font-size: 0.88rem; line-height: 1.2; }
.bs-event__txt i { display: block; font-style: normal; font-size: 0.68rem; line-height: 1.35; color: var(--bs-ink-55); margin-top: 0.25rem; }

/* ==========================================================================
   КАЛЕНДАРЬ АКЦИИ — панель фильтров + сетка карточек-предложений.
   Активный день залит фольгой: единственное место, кроме hero и финала,
   где материал акции появляется снова.
   ========================================================================== */
.bs-filters {
  background: var(--bs-white); border-radius: var(--bs-r-card); box-shadow: var(--bs-sh-card);
  padding: clamp(1.1rem, 2.4vw, 1.7rem); border: 1px solid var(--bs-border);
}
.bs-filters__row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--bs-border);
}
.bs-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bs-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.95rem; border-radius: var(--bs-r-pill);
  background: var(--bs-white); border: 1px solid var(--bs-border); cursor: pointer;
  font-family: inherit; font-size: 0.78rem; line-height: 1.2; color: var(--bs-black);
  transition: border-color .25s, background .25s, color .25s;
}
.bs-chip:hover:not(:disabled) { border-color: var(--bs-black); }
.bs-chip__n { font-size: 0.68rem; color: var(--bs-ink-55); }
.bs-chip.is-active { background: var(--bs-black); border-color: var(--bs-black); color: var(--bs-white); }
.bs-chip.is-active .bs-chip__n { color: rgba(255, 255, 255, 0.7); }
.bs-chip:disabled { opacity: 0.35; cursor: default; }

.bs-select { flex: 0 0 auto; display: flex; align-items: center; gap: 0.55rem; }
.bs-select__label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bs-ink-55);
}
.bs-select select {
  font-family: inherit; font-size: 0.78rem; color: var(--bs-black); cursor: pointer;
  padding: 0.5rem 2rem 0.5rem 0.9rem; border-radius: var(--bs-r-pill);
  border: 1px solid var(--bs-border); background: var(--bs-white);
  /* стрелка своя: системная у select не поддаётся стилю и ломает ритм пилюль */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23141412' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 0.7rem;
  -webkit-appearance: none; appearance: none;
}
.bs-select select:hover { border-color: var(--bs-black); }

/* Счётчик результатов — единственная строка, которая меняется при фильтрации,
   поэтому она же и aria-live-область */
.bs-deals__count {
  margin: 1.4rem 0 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bs-ink-55);
}

.bs-deals__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.bs-deal {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bs-white); border: 1px solid var(--bs-border); border-radius: var(--bs-r-card);
  transition: transform .3s var(--bs-ease), box-shadow .3s;
}
.bs-deal:hover { transform: translateY(-4px); box-shadow: var(--bs-sh-hover); }
.bs-deal[hidden] { display: none; }
.bs-deal__media { position: relative; background: var(--bs-grey); }
.bs-deal__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Размер взноса — то, ради чего сетку сканируют. Единственная фольга на карточке */
.bs-deal__badge {
  position: absolute; top: 0.9rem; left: 0.9rem; display: inline-flex; flex-direction: column;
  padding: 0.5rem 0.85rem; border-radius: 0.9rem; background: var(--bs-foil); color: var(--bs-white);
  box-shadow: 0 8px 18px rgba(255, 95, 78, 0.30); text-align: left;
}
.bs-deal__badge b { font-size: 1.05rem; line-height: 1.05; letter-spacing: -0.01em; }
.bs-deal__badge i { font-style: normal; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.92; }
.bs-deal__logo {
  position: absolute; right: 0.9rem; bottom: -1.6rem; width: 3.6rem; height: 3.6rem;
  border-radius: 50%; overflow: hidden; background: var(--bs-white); border: 1px solid var(--bs-border);
  display: grid; place-items: center; box-shadow: var(--bs-sh-card);
}
/* Охранная зона: логотипы приходят от партнёров без собственных полей и упираются
   в границу кружка. Кружок увеличен на ту же величину, чтобы полезная площадь
   логотипа осталась прежней.
   box-sizing обязателен: глобального сброса на border-box в проекте нет, а без него
   width:100% + padding делают картинку шире кружка, и overflow:hidden срезает
   логотип по краям — то есть padding работал ровно наоборот */
.bs-deal__logo img {
  width: 100%; height: 100%; box-sizing: border-box;
  object-fit: contain; padding: 0.45rem;
}
/* Заливка на весь кружок — для картинок, задуманных как плитка, а не как знак
   с полями: охранная зона им не нужна, круг режет края по замыслу */
.bs-deal__logo--fill img { object-fit: cover; padding: 0; }
.bs-deal__logo--text { font-size: 0.85rem; letter-spacing: 0.02em; color: var(--bs-black); padding: 0 0.5rem; text-align: center; }
.bs-deal__body {
  display: flex; flex-direction: column; gap: 0.5rem; flex: 1;
  /* правый отступ больше — под кружок логотипа, наезжающий на тело карточки */
  padding: 1.6rem 4.9rem 1.4rem 1.4rem;
}
.bs-deal__cat {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bs-red);
}
.bs-deal__title { font-size: 1.15rem; line-height: 1.2; margin: 0; color: var(--bs-black); }
.bs-deal__offer { font-size: 0.82rem; line-height: 1.5; color: var(--bs-ink-75); }
.bs-deal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.bs-deal__tag {
  display: inline-flex; padding: 0.22rem 0.6rem; border-radius: var(--bs-r-pill);
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid var(--bs-border); color: var(--bs-ink-75);
}
.bs-deal__tag--online { border-color: rgba(218, 53, 44, 0.35); color: var(--bs-red); }
.bs-deal__place { font-size: 0.72rem; line-height: 1.35; color: var(--bs-ink-55); }
/* Сети с десятком точек: адреса живут у партнёра на карте. z-index — потому что
   растянутый ::after у CTA накрывает тело карточки и глушит эту ссылку */
.bs-deal__maplink {
  position: relative; z-index: 1; font-size: 0.72rem; line-height: 1.35;
  color: var(--bs-red); text-decoration: none; border-bottom: 1px solid rgba(218, 53, 44, 0.3);
  transition: border-color .2s var(--bs-ease);
}
.bs-deal__maplink:hover { border-bottom-color: var(--bs-red); }
.bs-deal__days {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--bs-border);
  font-size: 0.72rem; color: var(--bs-ink-55);
}
.bs-deal__cta {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--bs-red); text-decoration: none;
}
/* Кликабельна вся карточка, но в потоке фокуса остаётся одна ссылка */
.bs-deal__cta::after { content: ''; position: absolute; inset: 0; }
.bs-deal__cta span { transition: transform .25s var(--bs-ease-out); }
.bs-deal:hover .bs-deal__cta span { transform: translateX(4px); }

.bs-deals__empty {
  background: var(--bs-white); border: 1px solid var(--bs-border); border-radius: var(--bs-r-card);
  padding: clamp(2rem, 4vw, 3rem); text-align: center;
}
.bs-deals__empty[hidden] { display: none; }
.bs-deals__empty-title { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--bs-black); }
.bs-deals__empty-text { font-size: 0.85rem; line-height: 1.5; color: var(--bs-ink-55); margin-bottom: 1.4rem; }

.bs-dates { display: flex; align-items: center; gap: 0.6rem; }
.bs-dates__track {
  position: relative; display: flex; gap: 0.5rem; overflow-x: auto; scroll-behavior: smooth;
  /* padding больше радиуса размытия тени — иначе скролл-контейнер срезает её снизу */
  padding: 1.4rem 0.4rem; margin: -1.4rem 0; flex: 1; scrollbar-width: none;
}
/* Одна фольговая плашка физически переезжает с даты на дату (см. beauty.js) */
.bs-dates__pill {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 1rem;
  background: var(--bs-foil); box-shadow: 0 8px 18px rgba(255, 95, 78, 0.30);
  opacity: 0; pointer-events: none; transform-origin: left center;
}
.bs-dates--pill .bs-date.is-active { background: none; box-shadow: none; }
.bs-dates__track::-webkit-scrollbar { display: none; }
.bs-date {
  position: relative; flex: 0 0 auto; min-width: 6.2rem; padding: 0.7rem 1rem; border-radius: 1rem;
  background: var(--bs-white); border: 1px solid var(--bs-border); cursor: pointer;
  font-family: inherit; text-align: left; color: var(--bs-black);
  transition: border-color .25s, transform .25s var(--bs-ease), box-shadow .25s, color .25s;
}
.bs-date:hover:not(:disabled) { border-color: var(--bs-black); transform: translateY(-2px); }
.bs-date__day { display: block; font-size: 0.85rem; line-height: 1.1; }
.bs-date__name { display: block; font-size: 0.68rem; color: var(--bs-ink-55); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-date.is-active {
  background: var(--bs-foil); border-color: transparent; color: var(--bs-white);
  box-shadow: 0 8px 18px rgba(255, 95, 78, 0.30);
}
.bs-date.is-active .bs-date__name { color: rgba(255, 255, 255, 0.9); }
.bs-date:disabled { opacity: 0.35; cursor: default; }
/* Ближайший день акции подсвечен, пока фильтр стоит на «Все дни»:
   иначе до сентября лента выглядит как безадресный список чисел */
.bs-date.is-next:not(.is-active) { border-color: var(--bs-red); }
.bs-date.is-next:not(.is-active)::before {
  content: 'Ближайший'; position: absolute; left: 1rem; top: -0.55rem;
  padding: 0.1rem 0.45rem; border-radius: var(--bs-r-pill);
  background: var(--bs-red); color: var(--bs-white);
  font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.5;
}
/* выбран конкретный день — ориентир «ближайший» больше не нужен */
.bs-date.is-next.is-muted { border-color: var(--bs-border); }
.bs-date.is-next.is-muted::before { content: none; }
/* Сброс фильтра, а не день ленты: мягкая фольга и отбивка справа, чтобы кнопку
   не искали глазами среди чисел */
.bs-date--all {
  min-width: 8.4rem; margin-right: 0.6rem;
  border-color: var(--bs-red); background: var(--bs-foil-soft);
}
.bs-date--all::after {
  content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem; right: -0.55rem;
  width: 1px; background: var(--bs-border);
}
/* Пока идёт акция, beauty.js ставит «Все» перед сегодняшним днём — прошедшим
   дням нужна та же отбивка слева; после финиша клетка последняя, отбивка справа не нужна */
.bs-date--all:not(:first-of-type) { margin-left: 0.6rem; }
.bs-date--all:not(:first-of-type)::before {
  content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem; left: -0.55rem;
  width: 1px; background: var(--bs-border);
}
.bs-date--all:last-child { margin-right: 0; }
.bs-date--all:last-child::after { content: none; }
.bs-dates__nav {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--bs-border); background: var(--bs-white); cursor: pointer;
  display: grid; place-items: center; color: var(--bs-black);
  transition: border-color .25s, color .25s, background .25s;
}
.bs-dates__nav:hover { border-color: var(--bs-black); }
.bs-dates__nav svg { width: 0.6rem; height: 0.6rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ==========================================================================
   ФОРМАТЫ УЧАСТИЯ
   ========================================================================== */
/* Форматы сгруппированы по цене входа — первое, что спрашивает бизнес.
   На карточках мокапы мерча фонда: они показывают формат буквально, поэтому
   работают там, где стоковые фото раньше только шумели */
.bs-tracks { display: grid; gap: clamp(2.4rem, 4vw, 3.4rem); }
.bs-track { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.bs-track__title { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.15; margin: 0 0 0.6rem; }
.bs-track__hint { font-size: 0.78rem; line-height: 1.5; color: var(--bs-ink-55); margin: 0; }
/* Выход из каждой группы форматов — один на раздел, ведёт к менеджеру */
.bs-track__cta {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem;
  padding-bottom: 0.4rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--bs-red); text-decoration: none; border-bottom: 1px solid rgba(218, 53, 44, 0.35);
  transition: color .25s, border-color .25s;
}
.bs-track__cta:hover { color: var(--bs-dark-red); border-color: var(--bs-dark-red); }
.bs-track__arrow { font-size: inherit; line-height: 1; transition: transform .25s var(--bs-ease-out); }
.bs-track__cta:hover .bs-track__arrow { transform: translateX(4px); }
.bs-track__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

.bs-format {
  background: var(--bs-white); border: 1px solid var(--bs-border); border-radius: var(--bs-r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s var(--bs-ease), box-shadow .3s;
}
.bs-format:hover { transform: translateY(-4px); box-shadow: var(--bs-sh-hover); }
.bs-format__media { background: var(--bs-grey); overflow: hidden; }
.bs-format__media img {
  width: 100%; aspect-ratio: 9 / 4; object-fit: cover;
  transition: transform .5s var(--bs-ease-out);
}
.bs-format:hover .bs-format__media img { transform: scale(1.04); }
.bs-format__body {
  flex: 1; display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem 1.6rem 1.5rem;
}
.bs-format__give {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bs-red); margin: 0;
}
.bs-format__title { font-size: 1.15rem; line-height: 1.25; color: var(--bs-black); margin: 0; }
.bs-format__text { font-size: 0.82rem; line-height: 1.55; color: var(--bs-ink-75); margin: 0; }
.bs-format__note {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--bs-border);
  font-size: 0.72rem; line-height: 1.45; color: var(--bs-ink-55);
}

/* ===== Контакт менеджера ===== */
.bs-contact {
  margin-top: 1.2rem; background: var(--bs-white); border: 1px solid var(--bs-border);
  border-radius: var(--bs-r-card); padding: clamp(1.5rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
}
/* переход по якорю из группы форматов подсвечивает, куда человек попал */
.bs-contact:target, .bs-contact.is-landed { animation: bsLand 1.6s var(--bs-ease-out); }
@keyframes bsLand {
  0% { border-color: var(--bs-red); box-shadow: 0 0 0 4px rgba(218, 53, 44, 0.14); }
  70% { border-color: var(--bs-red); box-shadow: 0 0 0 4px rgba(218, 53, 44, 0.10); }
  100% { border-color: var(--bs-border); box-shadow: none; }
}
.bs-contact__photo { width: 5.2rem; height: 5.2rem; border-radius: 50%; overflow: hidden; background: var(--bs-grey); }
.bs-contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.bs-contact__name { font-size: 1.05rem; margin: 0 0 0.2rem; }
.bs-contact__role { font-size: 0.75rem; color: var(--bs-ink-55); margin: 0 0 0.8rem; }
.bs-contact__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; font-size: 0.82rem; }
.bs-contact__links a { color: var(--bs-black); text-decoration: none; border-bottom: 1px solid rgba(20, 20, 18, 0.25); }
.bs-contact__links a:hover { color: var(--bs-red); border-color: var(--bs-red); }

/* ==========================================================================
   НАС ПОДДЕРЖАЛИ
   ========================================================================== */
.bs-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.bs-logo {
  background: var(--bs-white); border-radius: 1.4rem; padding: 1.6rem 1.2rem;
  min-height: 8.5rem; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.6rem; text-align: center; text-decoration: none;
  color: inherit; position: relative; overflow: hidden; border: 1px solid var(--bs-border);
  transition: transform .3s var(--bs-ease), box-shadow .3s;
}
.bs-logo::before {
  content: ''; position: absolute; inset: 0; background: var(--bs-foil-soft); opacity: 0.9;
  pointer-events: none;
}
.bs-logo > * { position: relative; }
.bs-logo:hover { transform: translateY(-4px); box-shadow: var(--bs-sh-hover); }
/* логотипы партнёров приходят в разных палитрах: обесцвечивание держит сетку
   спокойной, цвет возвращается на наведении */
.bs-logo__img {
  width: auto; height: auto; max-width: 100%; max-height: 3.4rem; object-fit: contain;
  filter: grayscale(1); opacity: 0.8; transition: filter .3s, opacity .3s;
}
.bs-logo:hover .bs-logo__img { filter: grayscale(0); opacity: 1; }
.bs-logo__name { font-size: 1rem; line-height: 1.2; color: var(--bs-red); }
.bs-logo__note { font-size: 0.72rem; line-height: 1.45; color: var(--bs-ink-75); }

/* ==========================================================================
   ФОРМА ПОЖЕРТВОВАНИЯ + ФИНАЛ
   ========================================================================== */
.bs-donate__head { max-width: 42rem; margin: 0 auto 2.2rem; text-align: center; }
/* Своей подложки нет: компонент формы уже нарисован карточкой — иначе коробка в коробке */
.bs-donate__form { max-width: 42rem; margin: 0 auto; }
/* заголовок формы дублирует заголовок секции */
.bs-donate__form .fbl-form h2 { display: none; }

/* Финал возвращает материал hero: страница начинается и заканчивается фольгой */
.bs-final {
  position: relative; padding: clamp(4rem, 8vw, 7rem) 0; text-align: center;
  overflow: hidden; isolation: isolate; background: #FF6A57; color: var(--bs-white);
}
.bs-final__foil {
  position: absolute; inset: -8%; z-index: -1;
  background: url('/img/krasota/foil.jpg') center / cover no-repeat;
  will-change: transform, opacity;
}
.bs-final::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 18, 0.16), rgba(20, 20, 18, 0.06));
}
.bs-final__in { position: relative; max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
.bs-final__title {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.12; margin: 0 0 1.2rem;
  color: var(--bs-white); text-shadow: 0 2px 20px rgba(140, 25, 45, 0.25);
}
.bs-final__text { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.bs-final .bs-actions { justify-content: center; margin-top: 2.4rem; }

/* ==========================================================================
   ТАБЛО АКЦИИ
   ========================================================================== */
.bs-tally {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--bs-r-card); color: var(--bs-white); background: #FF6A57;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.5rem, 4vw, 3.4rem);
}
.bs-tally::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bs-foil); }
.bs-tally::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 18, 0.18), rgba(20, 20, 18, 0.04));
}
.bs-tally__top {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
  justify-content: space-between; margin-bottom: clamp(2rem, 3.5vw, 2.8rem);
}
.bs-tally__eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.75); margin: 0 0 0.8rem;
}
.bs-tally__title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.bs-tally__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.bs-tally__num {
  display: block; font-size: clamp(2.4rem, 5.2vw, 4.2rem); line-height: 0.95;
  letter-spacing: -0.03em; white-space: nowrap;
}
.bs-tally__num small { font-size: 0.42em; letter-spacing: 0; }
.bs-tally__cap {
  display: block; margin-top: 1.2rem; max-width: 13rem;
  font-size: 0.68rem; line-height: 1.5; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.8);
}
.bs-tally__foot {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.bs-tally__src { max-width: 30rem; font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ========================================================================== */
.bs-js .bs-reveal { opacity: 0; transform: translateY(18px); }
.bs-js .bs-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--bs-ease-out), transform .7s var(--bs-ease-out); }
/* когда движением управляет GSAP, CSS-переход только мешает inline-стилям */
.bs-gsap .bs-reveal, .bs-gsap .bs-reveal.is-in { transition: none; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1140px) {
  .bs-track { grid-template-columns: 1fr; }
  .bs-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 990px) {
  .bs-section { padding: 4rem 0; }
  .bs-split { grid-template-columns: 1fr; }
  .bs-split--reverse .bs-split__media { order: 0; }
  .bs-deals__grid { grid-template-columns: repeat(2, 1fr); }
  .bs-filters__row { flex-direction: column; align-items: stretch; }
  .bs-contact { grid-template-columns: auto 1fr; }
  .bs-contact .bs-btn { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .bs-hero { padding: 3.5rem 0 6rem; min-height: 22rem; background-attachment: scroll; }
  .bs-manifest__card { padding: 2rem 1.25rem; }
  .bs-track__items { grid-template-columns: 1fr; }
  .bs-facts { grid-template-columns: 1fr; gap: 2rem; }
  .bs-logos { grid-template-columns: repeat(2, 1fr); }
  .bs-tally__grid { grid-template-columns: 1fr; gap: 2rem; }
  .bs-actions .bs-btn { width: 100%; }
  .bs-dates__nav { display: none; }
  .bs-event { max-width: 82vw; }
  .bs-deals__grid { grid-template-columns: 1fr; }
  /* мобильная сетка одноколоночная — карточка становится горизонтальной,
     иначе экран занимает одна обложка и до оффера нужно доскроллить */
  .bs-deal { flex-direction: row; }
  .bs-deal__media { flex: 0 0 8.5rem; }
  .bs-deal__media img { height: 100%; aspect-ratio: auto; }
  .bs-deal__badge { top: 0.5rem; left: 0.5rem; padding: 0.35rem 0.6rem; }
  .bs-deal__badge b { font-size: 0.85rem; }
  .bs-deal__logo { display: none; }
  .bs-deal__body { padding: 1.1rem 1.1rem 1.1rem 1.2rem; }
  .bs-contact { grid-template-columns: 1fr; text-align: center; }
  .bs-contact__photo { margin: 0 auto; }
  .bs-contact__links { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-page *, .bs-page *::before, .bs-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .bs-js .bs-reveal { opacity: 1; transform: none; }
  .bs-dates__track { scroll-behavior: auto; }
}