/* ============================================================
   Probiotic.ru — hero + промо + категории (черновик, этап 1)
   Блоки самодостаточны — с прицелом на перенос в React/shadcn.
   ============================================================ */

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

/* Атрибут hidden должен побеждать любой display из компонентных стилей.
   Иначе элементы с display:flex/grid остаются на экране (см. LESSONS). */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary-deep);
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-1);
  z-index: var(--z-toast);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-btn);
}

.skip-link:focus {
  left: var(--space-1);
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 52px;
  padding: 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn_primary {
  background: var(--color-primary);
  color: #fff;
}

.btn_primary:hover {
  background: var(--color-primary-deep);
  transform: translateY(-1px);
}

.btn_secondary {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.btn_secondary:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary);
  color: var(--color-primary-deep);
  transform: translateY(-1px);
}

/* ---------- Хедер ---------- */

/* Бесшовный с hero наверху (фон = канва, без границы);
   при скролле получает .is-scrolled → белый со стеклом. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) ease,
    border-color var(--dur-base) ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1);
  text-decoration: none;
}

/* текстовое написание в шапке убрано — остаётся только знак (favicon.svg).
   Точка ниже ещё используется в шапке мобильного меню. */
.site-header__wordmark-dot {
  color: var(--color-primary);
}

.site-header__spacer {
  flex: 1;
}

.site-header__phone {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.site-header__phone:hover {
  color: var(--color-primary-deep);
}

.site-header__cta {
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: 16px;
}

/* Иконки-действия: избранное / корзина / кабинет */
.site-header__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-ink);
  border-radius: 50%;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

/* счётчик на иконке (1-9, дальше «..») */
.header-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--color-primary-deep);
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* по умолчанию кружка скрыта; появляется только при добавлении.
   Нужно явно, т.к. display:grid перебивает атрибут [hidden]. */
.header-badge[hidden] {
  display: none;
}

.header-badge_fav {
  background: var(--color-primary-deep);
}

/* летящий клон-карточка */
.fly-clone {
  position: fixed;
  z-index: var(--z-toast);
  border-radius: 14px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
  box-shadow: 0 16px 36px rgba(15, 21, 51, 0.22);
  pointer-events: none;
  will-change: transform;
}

.site-header__icon:hover {
  color: var(--color-primary);
  background: var(--color-surface-tint);
}

.site-header__icon_fav:hover {
  color: var(--color-teal);
}

@media (max-width: 640px) {
  /* мобильный хедер: бургер, лого, «В каталог», избранное, корзина */
  .site-header .site-header__icon_account {
    display: none;
  }
  .site-header .site-header__inner {
    gap: 6px;
  }
  /* распорка на мобильном только съедала лишний gap — иконки прижимаем сами */
  .site-header .site-header__spacer {
    display: none;
  }
  .site-header .site-header__icon_fav {
    margin-left: auto;
  }
  /* иконки не должны сжиматься — иначе площадь нажатия падает ниже 44px */
  .site-header .site-header__icon {
    flex: none;
  }
  /* та же синяя пилюля, но компактнее — иначе не влезает рядом с иконками */
  .site-header .site-header__catalog {
    gap: 4px;
    padding: 0 var(--space-2);
    font-size: 15px;
    white-space: nowrap;
    flex: none;
  }
}

/* совсем узкие телефоны (360px и меньше): ужимаем пилюлю, чтобы корзина
   не прилипала к краю экрана */
@media (max-width: 400px) {
  .site-header .site-header__catalog {
    padding: 0 10px;
    font-size: 14px;
  }
}

/* кнопка-триггер каталога (Navigation Menu) */
.site-header__catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.site-header__catalog:hover {
  background: var(--color-primary-deep);
}

/* «Бренды» рядом с каталогом. Без заливки — чтобы не спорить с главной
   кнопкой; на телефоне прячется, там этот пункт первым в меню. */
.site-header__brands {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
  background: transparent;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-border);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.site-header__brands:hover {
  color: var(--color-primary-deep);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

@media (max-width: 900px) {
  .site-header .site-header__brands {
    display: none;
  }
}

/* стрелка смотрит вправо на всех разрешениях; при открытом колесе — влево */
.site-header__catalog svg {
  transform: rotate(-90deg);
  transition: transform var(--dur-fast) ease;
}

.site-header__catalog[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* ---------- Hero: PNG-товары, летящие сценами над поиском ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* больше воздуха под шапкой — сцене товаров нужно место */
  padding-block: var(--space-7) 0;
  overflow: hidden;
}

/* брендовое слово над строкой поиска */
.hero__brand {
  margin: 0;
  font-size: clamp(2.8125rem, 7.125vw, 6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  text-transform: lowercase;
}

/* буквы влетают снизу из-под обрезки */
.hero__brand .char-wrap {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
}

.hero__brand .char {
  display: inline-block;
  will-change: transform;
}

/* сцена во всю ширину экрана — крайние товары подрезаются краями */
.hero__stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(240px, 24vw, 320px);
}

.hero__slot {
  position: absolute;
  will-change: transform, opacity;
}

/* Обёртка слота. На широком экране прозрачная — виден только PNG товара;
   на телефоне получает подложку и подпись и становится карточкой. */
.hero__card {
  display: block;
}

/* товар без подложки: прозрачный PNG прямо на канве, только мягкая тень */
.hero__slot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(15, 21, 51, 0.16));
}

/* подпись нужна только карточке на телефоне */
.hero__card-name {
  display: none;
}

/* раскладка по всей ширине; карточки крупнее — места стало больше */
.hero__slot_1 { left: -1%;  top: 16%; width: clamp(112px, 14vw, 190px); }
.hero__slot_2 { left: 15%;  top: 1%;  width: clamp(128px, 16vw, 218px); }
.hero__slot_3 { left: 32%;  top: 26%; width: clamp(106px, 13vw, 172px); }
.hero__slot_4 { left: 49%;  top: 4%;  width: clamp(122px, 15vw, 205px); }
.hero__slot_5 { left: 67%;  top: 24%; width: clamp(112px, 14vw, 190px); }
.hero__slot_6 { left: 85%;  top: 6%;  width: clamp(128px, 16vw, 218px); }

/* Повороты на обёртке, а не на слоте: transform слота принадлежит GSAP,
   и второй transform на том же элементе он бы сложил со своим (см. LESSONS).
   На телефоне вместе с картинкой наклоняется вся карточка. */
.hero__slot_1 .hero__card { transform: rotate(-5deg); }
.hero__slot_2 .hero__card { transform: rotate(3deg); }
.hero__slot_3 .hero__card { transform: rotate(-2deg); }
.hero__slot_4 .hero__card { transform: rotate(4deg); }
.hero__slot_5 .hero__card { transform: rotate(-4deg); }
.hero__slot_6 .hero__card { transform: rotate(2deg); }

@media (max-width: 900px) {
  .hero {
    padding-block: var(--space-5) 0;
  }

  /* Сцена та же, что на широком экране: те же слоты, тот же полёт, та же
     разбросанная раскладка. Отличие одно — у слота появляется подложка и
     подпись, и он читается как карточка товара. Голые PNG по 92px без
     названия не давали понять, что за товар. */
  .hero__stage {
    height: 234px;
  }

  .hero__slot_3,
  .hero__slot_5 {
    display: none;
  }

  /* Нахлёст оставлен намеренно — 10–12px читаются как разложенная колода,
     ради этого «хаотично». Больше нельзя: соседняя карточка непрозрачная и
     начинает закрывать подпись, чего с прозрачными PNG не случалось. */
  .hero__slot_1 { left: -6%; top: 16%; width: 116px; }
  .hero__slot_2 { left: 22%; top: 0;   width: 116px; }
  .hero__slot_4 { left: 52%; top: 14%; width: 116px; }
  .hero__slot_6 { left: 80%; top: 1%;  width: 116px; }

  .hero__card {
    padding: 10px 10px 12px;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 22px rgba(15, 21, 51, 0.12);
  }

  /* Тень уходит с картинки на карточку — иначе их две, одна поверх другой. */
  .hero__slot img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter: none;
  }

  /* Названия у товаров длинные — режем по двум строкам многоточием.
     Обе записи нужны: старая для Safari, новая для свежего Chrome. */
  .hero__card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--color-ink);
  }
}

/* центральный поиск (под словом probiotic).
   Нижний отступ 32→44px: зазор до рекламы 40→52px (+30%). */
.search-section {
  padding-block: var(--space-3) 44px;
}

.site-search {
  display: flex;
  align-items: center;
  width: min(100%, 640px);
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.site-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 8px 28px rgba(75, 92, 245, 0.18);
}

.site-search__input {
  flex: 1;
  min-width: 0;
  min-height: 58px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  outline: none;
}

.site-search__input::placeholder {
  color: var(--color-text-muted);
}

.site-search__submit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: 8px;
  flex: none;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.site-search__submit:hover {
  background: var(--color-primary-deep);
  transform: translateX(2px);
}

/* Navigation Menu (порт shadcn/Base UI): дропдаун каталога под хедером */
.navmenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 24px 48px rgba(15, 21, 51, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-base) ease,
    transform var(--dur-base) var(--ease-enter),
    visibility 0s linear var(--dur-base);
}

.navmenu[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) ease,
    transform var(--dur-base) var(--ease-enter);
}

.navmenu__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px var(--space-4);
  padding-block: var(--space-4);
}

.navmenu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-input);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.navmenu__link:hover {
  background: var(--color-surface-tint);
  color: var(--color-primary-deep);
}

@media (max-width: 899px) {
  .navmenu__content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .site-header__catalog span { display: none; }
  .navmenu__content { grid-template-columns: 1fr; }
}

/* ---------- Бургер: 3 линии слева от логотипа ---------- */

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}

.menu-toggle:hover {
  background: var(--color-surface-tint);
}

.menu-toggle__line {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------- StaggeredMenu (vanilla-порт React Bits, утв. клиентом) ---------- */

.sm-panel,
.sm-prelayers {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: clamp(300px, 40vw, 480px);
}

/* Скрытие до инициализации/открытия — через visibility, НЕ через transform:
   CSS-transform ломает GSAP xPercent (парсится в px-базу и складывается). */
.sm-prelayers {
  z-index: var(--z-overlay);
  pointer-events: none;
  visibility: hidden;
}

.sm-prelayers[data-open] {
  visibility: visible;
}

.sm-prelayer {
  position: absolute;
  inset: 0;
}

/* Цвета слоёв были заданы атрибутом style прямо в разметке — это единственное,
   что мешало включить CSP со style-src 'self'. Переносим в классы. */
.sm-prelayer_teal { background: var(--color-teal); }
.sm-prelayer_primary { background: var(--color-primary); }

.sm-panel {
  z-index: calc(var(--z-overlay) + 1);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-6) var(--space-6);
  overflow-y: auto;
  visibility: hidden;
}


.sm-panel[data-open] {
  visibility: visible;
}

.sm-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sm-panel__itemWrap {
  position: relative;
  overflow: hidden;
  line-height: 1;
}

.sm-panel__item {
  position: relative;
  display: inline-block;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-base) ease;
}

.sm-panel__item:hover {
  color: var(--color-primary);
}

.sm-panel__label {
  display: inline-block;
  will-change: transform;
  transform-origin: 50% 100%;
}

/* бургер внутри открытой панели (те же 3 линии), закрывает меню */
.sm-panel__toggle {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
}

.sm-panel__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: 15px;
  color: var(--color-text-muted);
}

.sm-panel__footer a {
  color: var(--color-primary-deep);
  text-decoration: none;
  font-weight: 600;
}

.sm-panel__footer a:hover {
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .sm-panel,
  .sm-prelayers {
    width: 100%;
  }

  /* Панель занимает весь экран, а внизу поверх неё лежит закреплённая нижняя
     навигация — её 65px съедали телефон и почту в подвале панели.
     Тот же приём, что для слогана: высота панели + запас под «шторку»
     на айфонах без кнопки. */
  .sm-panel {
    padding-bottom: calc(var(--space-6) + 76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Акция: плашка под рекламным блоком ---------- */

.promo-note {
  padding-block: var(--space-2) var(--space-4);
}

.promo-note__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 68px;
  padding: var(--space-2) var(--space-6);
  background: var(--color-teal);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.promo-note__text {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  text-align: center;
}

.promo-note__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  background: #fff;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}

.promo-note__btn svg {
  transition: transform var(--dur-fast) ease;
}

.promo-note__btn:hover {
  color: var(--color-primary-deep);
  transform: translateY(-1px);
}

.promo-note__btn:hover svg {
  transform: translateX(3px);
}

/* декор в пластике фирменного знака */
.promo-note__deco {
  position: absolute;
  top: 50%;
  right: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50% 42% 55% 45% / 48% 55% 45% 52%;
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 639px) {
  .promo-note__inner {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
  }
}

/* ---------- Каталог: товары по категориям ---------- */

.products {
  padding-block: var(--space-5) var(--space-7);
}

.products-cat + .products-cat {
  margin-top: var(--space-7);
}

.products-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.products-cat__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.products-cat__title a {
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.products-cat__title a:hover {
  color: var(--color-primary-deep);
}

.products-cat__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-deep);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.products-cat__all svg {
  transition: transform var(--dur-fast) ease;
}

.products-cat__all:hover {
  color: var(--color-primary);
}

.products-cat__all:hover svg {
  transform: translateX(3px);
}

.products-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1279px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 899px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 639px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-enter), box-shadow var(--dur-base) ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* сердечко «в избранное» — появляется при наведении на карточку */
.product-card__fav {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, color var(--dur-fast) ease;
}

.product-card:hover .product-card__fav,
.product-card__fav:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.product-card__fav:hover {
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.product-card__fav.is-active {
  opacity: 1;
  transform: scale(1);
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.product-card__fav.is-active svg {
  fill: currentColor;
}

/* тач-устройства / узкие экраны: сердечко всегда видно (нет hover) */
@media (hover: none), (max-width: 640px) {
  .product-card__fav {
    opacity: 1;
    transform: scale(1);
  }
}

/* фото товара без подложки — прозрачный PNG прямо на белой карточке */
.product-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius-card) - 4px);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.product-card__media img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* текущая цена — чёрная, крупная */
.product-card__price-now {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-ink);
}

/* «старая» цена (+15–20%) — серая, зачёркнутая */
.product-card__price-old {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-card__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.4em);
  margin-bottom: var(--space-3);
}

.product-card__name:hover {
  color: var(--color-primary-deep);
}

.product-card__buy {
  margin-top: auto;
  min-height: 46px;
  font-size: 15px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-btn);
}

/* ---------- Промо-слайдер (2-я секция, автолистание) ---------- */

.promo {
  padding-block: var(--space-1) var(--space-6);
}

/* карточка-баннер, чуть шире стандартного контейнера:
   бо́льший max-width + меньший боковой отступ, чем у .container (24px) */
.promo__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-2);
}

.promo__viewport {
  overflow: hidden;
  border-radius: var(--radius-panel);
}

.promo__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 600ms var(--ease-enter);
}

.promo__slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: stretch;
  /* фиксированная высота: кнопка и полосы не прыгают при разной длине текста */
  height: clamp(360px, 28vw, 410px);
  padding: var(--space-6) var(--space-7);
  overflow: hidden;
  /* готовый баннер-фон: продукт справа, слева пусто под текст */
  background-color: var(--slide-base);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

/* скрим слева, чтобы текст всегда лежал на чистой базе (важно при кропе на узких экранах) */
.promo__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--slide-base) 0%, var(--slide-base) 34%, transparent 64%);
  pointer-events: none;
}

/* баннеры клиента (1700×400) + базовый цвет фона под скрим */
.promo__slide_glimfamin { --slide-base: #372C57; background-image: url('../assets/products/glimfamin2.webp'); }
.promo__slide_biovestin { --slide-base: #FBDCB4; background-image: url('../assets/products/biovestin.webp'); }
.promo__slide_probioliz { --slide-base: #CBEFED; background-image: url('../assets/products/probioliz.webp'); }
.promo__slide_lb        { --slide-base: #E7B68B; background-image: url('../assets/products/lb_kompleks.webp'); }

/* тёмный баннер (Глимфамин) — светлый текст */
.promo__slide_dark .promo__title,
.promo__slide_dark .promo__text { color: #fff; }

.promo__content {
  position: relative;
  z-index: 1;
  max-width: 44ch;
  display: flex;
  flex-direction: column;
}

.promo__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-ink);
}

.promo__text {
  margin: 0 0 var(--space-5);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo__btn {
  align-self: flex-start;
  /* кнопка и полосы прижаты к низу слайда — фиксированная позиция */
  margin-top: auto;
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-card);
}

.promo__btn:hover {
  color: var(--color-primary-deep);
  transform: translateY(-1px);
}

/* индикатор под кнопкой «Подробнее», внутри слайда */
.promo__progress {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.promo__bar {
  position: relative;
  width: 64px;
  height: 4px;
  padding: 0;
  background: rgba(15, 21, 51, 0.18);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
}

/* на тёмном баннере (Глимфамин) полосы светлые */
.promo__slide_dark .promo__bar {
  background: rgba(255, 255, 255, 0.4);
}

/* тач-зона ≥44px при крошечной визуальной высоте */
.promo__bar::after {
  content: '';
  position: absolute;
  inset: -20px -4px;
}

.promo__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
}

.promo__slide_dark .promo__bar::before {
  background: #fff;
}

.promo__bar[aria-selected="true"]::before {
  transform: scaleX(1);
  transition: transform var(--promo-interval, 6000ms) linear;
}

@media (max-width: 768px) {
  .promo__slide {
    padding: var(--space-5);
    height: clamp(300px, 72vw, 360px);
    background-position: center right -30%;
  }
  .promo__content {
    max-width: 100%;
  }
}

/* ---------- MagicBento (vanilla-порт React Bits, утв. клиентом) ----------
   Светлая адаптация; свечение при наводке — синий логотипа #4B5CF5 (75,92,245).
   GSAP владеет transform карточек (tilt/магнетизм) — CSS-hover не двигает их. */

.bento {
  padding-block: var(--space-6) var(--space-9);
}

.bento__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-ink);
  max-width: 24ch;
}

.card-grid {
  display: grid;
  gap: var(--space-2);
}

.magic-bento-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 220px;
  --glow-color: 75, 92, 245; /* синий логотипа #4B5CF5 */

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  margin: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
  will-change: transform;
}

.magic-bento-card:hover {
  border-color: var(--color-primary);
  box-shadow:
    0 8px 25px rgba(15, 21, 51, 0.08),
    0 0 30px rgba(var(--glow-color), 0.25);
}

/* Свои контурные иконки вместо залитых со старого сайта: знак в круге,
   обводка фирменным синим. Круг сохраняет прежний размер блока. */
.magic-bento-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  background: var(--color-surface-tint);
  border-radius: 16px;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.magic-bento-card:hover .magic-bento-card__icon {
  color: #fff;
  background: var(--color-primary);
}

.magic-bento-card__icon svg {
  display: block;
}

.magic-bento-card__title {
  margin: 0 0 var(--space-1);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.magic-bento-card__description {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

/* бегущее по границе свечение под курсором */
.magic-bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 5px;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.9)) 0%,
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.45)) 30%,
    transparent 60%
  );
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* бенто-раскладка под 8 областей применения */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .magic-bento-card:nth-child(1) { grid-column: span 2; } /* Гастроэнтерология */
  .magic-bento-card:nth-child(6) { grid-column: span 2; } /* Иммунология */
  .magic-bento-card:nth-child(7) { grid-column: span 2; } /* Дисэлементозы */
  .magic-bento-card:nth-child(8) { grid-column: span 2; } /* Онкология */
}

@media (min-width: 600px) and (max-width: 1023px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  .magic-bento-card {
    min-height: 160px;
  }
}

/* ---------- Новости (порт shadcnblocks Blog14, утв. клиентом) ---------- */

.news {
  padding-block: var(--space-6) var(--space-9);
}

.news__head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--space-6);
}

.news__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.news__subtitle {
  margin: 0;
  font-size: var(--text-lead);
  color: var(--color-text-muted);
}

.news-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary-deep);
  background: var(--color-surface-tint);
  border-radius: var(--radius-pill);
}

/* featured = видео (2 колонки) */
.news-feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.news-feature__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-surface-tint) 0%, rgba(34, 211, 165, 0.22) 100%);
}

.news-feature__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding-left: 4px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgba(75, 92, 245, 0.4);
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.news-feature__media:hover .news-feature__play {
  background: var(--color-primary-deep);
  transform: translate(-50%, -50%) scale(1.06);
}

.news-feature__heading {
  margin: var(--space-3) 0 var(--space-2);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.news-feature__heading a {
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.news-feature__heading a:hover {
  color: var(--color-primary-deep);
}

.news-feature__text {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  max-width: 52ch;
}

.news-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary-deep);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.news-feature__link svg { transition: transform var(--dur-fast) ease; }
.news-feature__link:hover { color: var(--color-primary); }
.news-feature__link:hover svg { transform: translateX(3px); }

/* «Популярное» — 3 карточки */
.news__section-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.news-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.news-card {
  display: flex;
  flex-direction: column;
}

.news-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.news-card__media img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--dur-base) var(--ease-enter);
}

.news-card__media:hover img { transform: scale(1.06); }

.news-card__media_cyan,
.news-card__media_sand,
.news-card__media_rose {
  background: none;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 13px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.news-card__title {
  margin: 0 0 var(--space-1);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.news-card__title a {
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.news-card__title a:hover { color: var(--color-primary-deep); }

.news-card__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}

@media (max-width: 899px) {
  .news-feature { grid-template-columns: 1fr; gap: var(--space-4); }
  .news-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------- Выдвижная корзина (справа) ---------- */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
}

.cart-drawer[data-open] {
  visibility: visible;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 21, 51, 0.45);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}

.cart-drawer[data-open] .cart-drawer__backdrop {
  opacity: 1;
}

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: -24px 0 48px rgba(15, 21, 51, 0.14);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-enter);
}

.cart-drawer[data-open] .cart-drawer__panel {
  transform: translateX(0);
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.cart-drawer__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.cart-drawer__count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  vertical-align: 3px;
}

.cart-drawer__count:empty {
  display: none;
}

.cart-drawer__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}

.cart-drawer__close:hover {
  background: var(--color-surface-tint);
}

.cart-drawer__empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
}

.cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cart-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item:last-child {
  border-bottom: 0;
}

.cart-item__img {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  background: var(--color-bg);
  border-radius: var(--radius-input);
  overflow: hidden;
}

.cart-item__img img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cart-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item__price {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.cart-item__step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.cart-item__step:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-deep);
}

.cart-item__num {
  min-width: 26px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

/* избранное: строка «в корзину» / «убрать» вместо степпера количества */
.cart-item__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

.cart-item__icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.cart-item__icon-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-deep);
}

.cart-drawer__foot {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* На телефоне поверх панели лежит закреплённая нижняя навигация, и кнопка
   «Оформить заказ» уходила под неё на 41 пиксель из 52 — нажать было почти
   невозможно. Поднимаем подвал панели над навигацией, с запасом под
   «шторку» на айфонах без кнопки. */
@media (max-width: 640px) {
  .cart-drawer__foot {
    padding-bottom: calc(var(--space-4) + 76px + env(safe-area-inset-bottom, 0px));
  }
}

.cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-size: 16px;
  color: var(--color-text);
}

.cart-drawer__total-sum {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.cart-drawer__checkout {
  width: 100%;
}

/* ---------- Футер (референс shop.app) ---------- */

.site-footer {
  background: var(--color-ink);
  color: #C7CBE6;
  padding-block: var(--space-8) var(--space-5);
  font-size: 15px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.2fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__wordmark {
  margin: 0 0 var(--space-2);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-primary);
  text-transform: lowercase;
}

.site-footer__slogan {
  margin: 0;
  max-width: 26ch;
  color: #8B90B8;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: var(--space-6);
}

.site-footer__head {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}

.site-footer__head a {
  color: inherit;
  text-decoration: none;
}

.site-footer__head a:hover {
  color: var(--color-primary);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__list_2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px var(--space-4);
}

.site-footer__list a {
  color: #C7CBE6;
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.site-footer__list a:hover {
  color: var(--color-primary);
}

.site-footer__list_contacts a {
  font-weight: 600;
  color: #FFFFFF;
}

.site-footer__text {
  color: #8B90B8;
  line-height: 1.5;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  color: #8B90B8;
  font-size: 13px;
}

.site-footer__bottom p {
  margin: 0;
}

@media (max-width: 1023px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 767px) {
  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .site-footer__list_2col {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .product-card,
  .promo__track,
  .cart-drawer__backdrop,
  .cart-drawer__panel {
    transition-duration: 1ms;
  }

  .promo__bar[aria-selected="true"]::before {
    transition-duration: 1ms;
  }
}