/* ==========================================================================
   Компоненты интерфейса AkmalFarm
   ========================================================================== */

/* --- Кнопки ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r); /* умеренное скругление, не «пилюля» */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-hover); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-hover); }
.btn--ghost { background: var(--surface); color: var(--navy); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { min-height: 38px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* Круглая кнопка-стрелка для прокрутки лент */
.circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.circle-btn:hover { background: var(--surface); }
.circle-btn:disabled { opacity: 0.4; cursor: default; }

/* --- Верхняя полоска с разделами ------------------------------------------
   Закреплена над шапкой: при прокрутке разделы остаются на виду. */
.topbar {
  background: var(--surface);
  font-size: var(--fs-xs);
  position: sticky;
  top: 0;
  z-index: 51;
}
.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-4);
  display: flex;
  gap: var(--sp-5);
  height: 34px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar__inner::-webkit-scrollbar { display: none; }
.topbar__inner a { color: var(--text-muted); white-space: nowrap; }
.topbar__inner a:hover { color: var(--red); }

/* --- Шапка --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 34px; /* высота закреплённого топбара над шапкой */
  z-index: 50;
  background: var(--bg);
  padding: var(--sp-3) 0;
  transition: box-shadow 0.2s ease;
}

/* Тень появляется только когда страница прокручена — на самом верху
   шапка сливается со страницей, как и должна */
.header.is-stuck { box-shadow: 0 4px 16px rgba(21, 49, 90, 0.09); }

/* Сетка шапки. Центральная колонка точно равна колонке контента, поэтому
   строка поиска и выбор аптеки под ней начинаются на той же вертикали, что и
   заголовок «Категории товаров». Логотип прижат к левому краю, служебные
   кнопки — к правому. */
.header__inner {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) min(var(--container), 100%) minmax(min-content, 1fr);
  align-items: center;
  row-gap: var(--sp-2);
}

/* Логотип занимает обе строки шапки и центрируется по ним целиком —
   иначе из-за кнопки выбора аптеки он оказывается заметно выше середины */
.logo {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: center;
  padding-right: var(--sp-5);
  display: flex;
  align-items: center;
}
.logo img { height: 78px; width: auto; }

.search { grid-column: 2; min-width: 0; padding: 0 var(--sp-4); position: relative; }

.header__tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--sp-4);
}

/* Вторая строка: выбор аптеки под поиском, по той же вертикали */
.header__inner > .place { grid-column: 2; justify-self: start; margin-left: var(--sp-4); }

.search__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-5) 0 52px;
  border: none;
  border-radius: var(--r);
  background: var(--surface);
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.search__input::placeholder { color: var(--text-muted); }
.search__input:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--navy);
}
.search__icon {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Выбор города и адреса — как у Яндекса справа от поиска */
.place {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.place:hover { background: var(--surface-2); }
.place svg { color: var(--red); flex: 0 0 auto; }


.langswitch {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--text-muted);
}
.langswitch:hover { background: var(--surface); color: var(--navy); }
.langswitch select {
  border: none;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
}
.langswitch select:focus { outline: none; }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  position: relative;
}
.icon-btn:hover { background: var(--surface); color: var(--navy); }

/* Корзина в шапке: иконка со счётчиком + сумма заказа рядом */
.cartbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 40px;
  padding: 0 var(--sp-2);
  border-radius: var(--r);
  color: var(--text-muted);
}
.cartbtn:hover { background: var(--surface); color: var(--navy); }
.cartbtn__icon { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.cartbtn__icon .badge { top: -6px; right: -8px; }
.cartbtn__total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  /* Ширина зарезервирована под любую сумму: шапка не дёргается,
     когда сумма в корзине растёт или пустеет */
  display: inline-block;
  min-width: 110px;
  font-variant-numeric: tabular-nums;
}
/* Пустая корзина: сумма невидима, но место занимает — шапка не дёргается */
.cartbtn__total[hidden] { display: inline-block; visibility: hidden; }

.badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* --- Заголовки секций ---------------------------------------------------- */
.section { margin: var(--sp-7) 0; }

.section__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.section__head h2 { color: var(--text); }
.section__tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.section__more { font-size: var(--fs-base); color: var(--text); }
.section__more:hover { color: var(--red); }

/* --- Плитки категорий ---------------------------------------------------- */
.cattiles {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--sp-3);
}

.cattile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 176px;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.cattile:hover { background: var(--surface-2); transform: translateY(-2px); }
.cattile__label {
  font-size: var(--fs-sm);
  line-height: 1.25;
  font-weight: 400;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cattile__art {
  margin-top: auto;
  align-self: center;
  width: 96px;
  height: 96px;
}
.cattile--all { align-items: flex-start; justify-content: space-between; }
.cattile--all .cattile__arrow {
  align-self: flex-end;
  margin-top: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--navy);
}

/* --- Тематический блок на цветной подложке ------------------------------- */
.promo {
  border-radius: var(--r-xl, 24px);
  padding: var(--sp-6);
  display: grid;
  /* minmax(0,1fr) обязателен: иначе горизонтальная лента распирает колонку
     и по всей странице появляется горизонтальная прокрутка */
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.promo__body { min-width: 0; position: relative; }
/* Копия заголовка для телефона и кнопка «Все» на широком экране не нужны.
   Селектор с родителем — иначе правило .promo__aside ниже перебивает его. */
.promo .promo__aside--inline { display: none; }
.promo .promo__all { display: none; }
.promo--blue { background: #d8ebf8; --fade-from: #d8ebf8; }
.promo--navy { background: var(--navy); color: #fff; --fade-from: #15315a; }
.promo--rose { background: #fbe4e7; --fade-from: #fbe4e7; }
.promo--mint { background: #dff0e8; --fade-from: #dff0e8; }
.promo--sand { background: #fbeedd; --fade-from: #fbeedd; }

.promo__aside { display: flex; flex-direction: column; height: 100%; }
.promo__title { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.promo__art {
  margin-top: auto;
  align-self: center;
  width: 100%;
  max-width: 220px;
  /* Пропорция закреплена: место под композицию резервируется заранее,
     и вёрстка не дёргается, когда картинка догрузится */
  aspect-ratio: 1;
  object-fit: contain;
}
.promo__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: flex-end;
  margin-bottom: var(--sp-3);
}
.promo--navy .promo__head a { color: #fff; }

/* --- Ленты и сетки ------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(178px, 1fr);
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
/* Ленту можно тянуть зажатой мышью — выделение и перенос картинок мешали бы */
.rail { user-select: none; }
.rail img { -webkit-user-drag: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--sp-4) var(--sp-3);
}

/* --- Карточка товара ----------------------------------------------------- */
.card { display: flex; flex-direction: column; }

.card__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.promo .card__media,
.promo .card { background: transparent; }
.promo .card__media { background: #fff; }

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Фото заполняет плитку целиком: белая подложка сливается с фоном снимка,
     серых полей вокруг не остаётся */
  background: #fff;
}

.card__nophoto {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-3);
}

/* Строка характеристик поверх картинки: «Раствор · 4 шт.» */
.card__spec {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  pointer-events: none;
}
.card__spec span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__spec b { color: var(--red); font-weight: 700; }

.card__add {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.card__add:hover { background: var(--red); color: #fff; transform: scale(1.06); }

.card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.card__price em { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: var(--fs-sm); }
.card__soldout { font-weight: 500; color: var(--text-muted); }

/* Товар без наличия: цену не показываем, кнопку заказа гасим */
.pdp__price--soldout { color: var(--text-muted); }
.pdp__soldout-note { color: var(--text-muted); font-size: var(--fs-sm); margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.card__name {
  font-size: var(--fs-sm);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__name:hover { color: var(--red); }

.card__unit {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Журнал здоровья ----------------------------------------------------- */
.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.article__cover {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__title { font-size: var(--fs-base); line-height: 1.3; }
.article__title:hover { color: var(--red); }

/* --- Алфавитный указатель ------------------------------------------------ */
.alphabet { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.alphabet a {
  min-width: 44px;
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
}
.alphabet a:hover { background: var(--navy); color: #fff; }

/* --- Текстовые блоки для поиска ------------------------------------------ */
.seotext { display: grid; gap: var(--sp-4); }
.seotext__card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.seotext__card h3 { margin-bottom: var(--sp-3); }
.seotext__card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.seotext__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

/* --- Каталог: боковая колонка -------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: var(--sp-6);
  align-items: start;
  margin: var(--sp-5) 0 var(--sp-8);
}
.sidebar { position: sticky; top: 88px; }
.sidebar h3 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.sidebar__list { display: flex; flex-direction: column; gap: 1px; }
.sidebar__link {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.sidebar__link:hover { background: var(--surface); }
.sidebar__link--active { background: var(--navy); color: #fff; font-weight: 700; }
.sidebar__count { color: var(--text-faint); font-size: var(--fs-xs); }
.sidebar__link--active .sidebar__count { color: rgba(255, 255, 255, 0.7); }

.crumbs { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); margin: var(--sp-4) 0; }
.crumbs a:hover { color: var(--red); }

.toolbar { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.toolbar__count { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Пагинация ----------------------------------------------------------- */
.pager { display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-6) 0; }
.pager a,
.pager span {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  background: var(--surface);
}
.pager a:hover { background: var(--surface-2); }
.pager .is-current { background: var(--navy); color: #fff; font-weight: 700; }

/* --- Подвал -------------------------------------------------------------- */
.footer { margin-top: var(--sp-8); background: var(--surface); padding: var(--sp-7) 0 var(--sp-5); }
.footer__grid { display: grid; grid-template-columns: 1.2fr 2.4fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.footer h4 { font-size: var(--fs-base); margin-bottom: var(--sp-4); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-5); }
.footer__links { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__links a { font-size: var(--fs-sm); color: var(--text-muted); }
.footer__links a:hover { color: var(--red); }
.footer__contact { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-2); }
.footer__contact b { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--navy); display: block; }
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* --- Пустое состояние ---------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-muted); grid-column: 1 / -1; }
.empty h3 { color: var(--navy); margin-bottom: var(--sp-2); }

/* --- Адаптив ------------------------------------------------------------- */
@media (max-width: 1400px) {
  .cattiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1600px) {
  /* Ниже этой ширины боковые поля уже уже групп кнопок, и выравнивание
     поиска по контенту становится невозможным — переходим на простую раскладку: логотип и кнопки в строку, поиск и выбор
     аптеки — отдельными строками под ними */
  .header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
  }
  .logo { padding: 0; }
  .logo img { height: 44px; }
  .header__tools { margin-left: auto; padding: 0; }
  .search { flex: 1 1 100%; padding: 0; order: 3; }
  /* У строки поиска нет бокового отступа — иначе лупа наезжает на текст */
  .search__icon { left: 20px; }
  .header__inner > .place { order: 4; margin: 0; }
}

@media (max-width: 1100px) {
  .cattiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo { grid-template-columns: 1fr; }
  .promo__art { display: none; }
  .promo__head { justify-content: space-between; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .footer__grid { grid-template-columns: 1fr; }
  .seotext__row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .search__input { height: 46px; }
  .header__tools { gap: 0; }

  /* Плитки по четыре в ряд: восемь категорий укладываются в два ряда
     и не съедают весь первый экран */
  .cattiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .cattile { min-height: 108px; padding: var(--sp-2); }
  .cattile__label { font-size: 11px; line-height: 1.2; }
  .cattile__art { width: 44px; height: 44px; }
  .cattile--all .cattile__arrow { width: 32px; height: 32px; }
  .cattile--all .cattile__arrow svg { width: 16px; height: 16px; }

  /* Коммерческий блок на телефоне: заголовок с композицией едет вместе
     с лентой, а не стоит на месте. Когда лента прокручена, слева всплывает
     кнопка «Все» и появляется затухание — как у Яндекса. */
  .promo {
    display: block;
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
    border-radius: var(--r-lg);
  }
  /* Неподвижная колонка слева прячется, вместо неё работает копия внутри ленты */
  .promo > .promo__aside { display: none; }
  .promo .promo__aside--inline {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: var(--sp-2);
  }
  .promo__title { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
  .promo__art { display: block; max-width: 100%; margin-top: var(--sp-2); }
  .promo__ad { margin-top: var(--sp-2); font-size: 10px; }
  .promo__head { justify-content: flex-start; margin-bottom: var(--sp-3); padding-right: var(--sp-4); }
  /* Стрелки не нужны — ленту листают пальцем */
  .promo .circle-btn { display: none; }
  .promo .rail { padding-right: var(--sp-4); }

  /* Затухание у левого края: подсказывает, что лента прокручена */
  .promo__body::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-4));
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to right, var(--fade-from, #d8ebf8) 30%, transparent);
  }
  .promo.is-scrolled .promo__body::before { opacity: 1; }

  .promo .promo__all {
    position: absolute;
    left: calc(-1 * var(--sp-2));
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .promo.is-scrolled .promo__all {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
  }

  /* Карточки по три в ряд, как у Яндекса */
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
  .rail { grid-auto-columns: 42%; }
  .card__price { font-size: var(--fs-base); }
  .card__name, .card__unit { font-size: var(--fs-xs); }
  .card__add { width: 32px; height: 32px; right: var(--sp-2); bottom: var(--sp-2); }
  .card__spec { top: var(--sp-2); left: var(--sp-2); right: var(--sp-2); font-size: 10px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* --- Модальное окно товара ------------------------------------------------
   Само окно — прозрачный контейнер на весь экран со своей прокруткой:
   так полоса прокрутки живёт у края экрана, а не внутри белого листа. */
.modal {
  border: none;
  padding: var(--sp-7) var(--sp-4);
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: transparent;
  overflow-y: auto;
}
.modal::backdrop { background: rgba(16, 26, 44, 0.45); }
.modal__inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--r-lg);
}
.modal__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  display: grid;
  place-items: center;
}
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body { padding: var(--sp-6); }
.modal__loading { padding: var(--sp-8); text-align: center; color: var(--text-muted); }

/* --- Карточка товара (страница и модальное окно) -------------------------- */
.pdp { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: var(--sp-6); }

.pdp__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pdp__media img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pdp__spec {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--text-muted);
  text-align: center;
}

.pdp__title { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }
.pdp__buy { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.pdp__price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); white-space: nowrap; }
.pdp__price em { font-style: normal; font-weight: 500; color: var(--text-muted); font-size: var(--fs-lg); }

.pdp__delivery { border-top: 1px solid var(--border); padding-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.pdp__delivery-row { display: grid; gap: 2px; font-size: var(--fs-sm); }
.pdp__delivery-row b { font-family: var(--font-display); font-size: var(--fs-base); }
.pdp__delivery-row span { color: var(--text-muted); }
.pdp__delivery-row--rx b { color: var(--red); }

.pdp__details { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-6); margin-top: var(--sp-7); }
.pdp__subtitle { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.pdp__text { font-size: var(--fs-sm); color: var(--text-muted); }
.pdp__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start; /* строки прижаты кверху, а не растянуты на высоту колонки */
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
}
.pdp__specs dt { color: var(--text-faint); }
.pdp__specs dd { margin: 0; font-weight: 500; }

/* Кнопка «В корзину» в карточке — прямоугольная со скруглением, как у площадок */
.pdp__buy .btn { padding: 0 var(--sp-6); }

/* --- Счётчик количества «− 1 +» -------------------------------------------
   Появляется на месте кнопки после добавления в корзину. */
.qty {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
  padding: 0 var(--sp-1);
  background: var(--red);
  color: #fff;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-weight: 700;
}
.qty__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--fs-lg);
  border-radius: var(--r-sm);
  line-height: 1;
}
.qty__btn:hover { background: rgba(255, 255, 255, 0.18); }
.qty__num { min-width: 28px; text-align: center; font-size: var(--fs-base); }

/* В плитке товара счётчик встаёт на место круглой кнопки «+» */
.qty--overlay {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  min-height: 36px;
  box-shadow: var(--shadow);
}
.qty--overlay .qty__btn { width: 30px; height: 30px; }

/* Значок корзины «оживает» при изменении количества */
[data-cart-badge].is-pop { animation: cart-pop 0.35s ease; }
@keyframes cart-pop {
  50% { transform: scale(1.4); }
}

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__details { grid-template-columns: 1fr; }
  .modal { padding: 0; }
  .modal__inner { border-radius: 0; min-height: 100vh; }
  .modal__body { padding: var(--sp-4); }
}

/* --- Ряд баннеров ---------------------------------------------------------
   Всегда одна строка с горизонтальной прокруткой: баннеров может быть сколько
   угодно, но вниз страницу они не растягивают. На широком экране видно три.
   -------------------------------------------------------------------------- */
.bannerrow {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.bannerrow::-webkit-scrollbar { display: none; }

.bannerrow__item {
  display: block;
  flex: 0 0 calc((100% - 2 * var(--sp-4)) / 3);
  scroll-snap-align: start;
}
.bannerrow__item img {
  width: 100%;
  /* Пропорция задана жёстко: вёрстка не прыгает при загрузке,
     лишнее аккуратно обрезается по краям */
  aspect-ratio: 5 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform 0.2s ease;
}
.bannerrow__item:hover img { transform: scale(1.01); }

@media (max-width: 1100px) {
  .bannerrow__item { flex-basis: calc((100% - var(--sp-4)) / 2); }
}

@media (max-width: 760px) {
  /* На телефоне прокрутка идёт от края экрана — так виден «хвост» следующего баннера */
  /* Один баннер целиком, следующий приходит автопрокруткой */
  .bannerrow__item { flex-basis: 100%; scroll-snap-align: center; }
}

/* --- Всплывающий баннер --------------------------------------------------- */
.popupbanner { width: min(760px, calc(100vw - 32px)); }
.popupbanner img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
.popupbanner .modal__close { background: rgba(255, 255, 255, 0.9); }

@media (max-width: 760px) {
  .stripbanner img { aspect-ratio: 3 / 2; }
  .popupbanner { width: calc(100vw - 32px); height: auto; max-height: 90vh; border-radius: var(--r-lg); }
}

/* Пометка платного размещения. По закону о рекламе её обязательно показывать,
   но она не должна перетягивать внимание с самого блока */
.promo__ad {
  align-self: flex-start;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.promo--navy .promo__ad { color: rgba(255, 255, 255, 0.55); }

/* --- Страница аптек ------------------------------------------------------- */
.branches__hint { color: var(--text-muted); margin-bottom: var(--sp-6); }
.branches__reset { color: var(--red); margin-left: var(--sp-2); }
.branches__reset:hover { text-decoration: underline; }

.branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }

.branchcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: box-shadow 0.15s ease;
}
.branchcard:hover { box-shadow: var(--shadow); }
.branchcard--current { background: var(--navy-soft); box-shadow: inset 0 0 0 2px var(--navy); }
.branchcard__name { font-size: var(--fs-base); }
.branchcard__address { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Адрес доставки на странице аптек ------------------------------------- */
.addressbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-radius: var(--r);
  margin-bottom: var(--sp-4);
  color: var(--red);
}
.addressbar__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: none;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
}
.addressbar__input:focus { outline: 2px solid var(--navy); }

/* --- Контентные страницы --------------------------------------------------- */
.prose { max-width: 760px; font-size: var(--fs-base); line-height: 1.65; }
.prose p { margin: 0 0 var(--sp-3); }
.prose h1 { margin-bottom: var(--sp-2); }
.prose h2 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-lg); }
.prose__cover { width: 100%; border-radius: var(--r-lg); margin: var(--sp-4) 0; }

/* Анкета арендодателя */
.rentform { max-width: 760px; margin-top: var(--sp-6); padding: var(--sp-5); background: var(--surface); border-radius: var(--r-lg); }
.rentform h2 { margin-bottom: var(--sp-4); }
.rentform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.rentform__wide { grid-column: 1 / -1; }
.rentform__done { padding: var(--sp-4); background: #e2efda; border-radius: var(--r); color: #14532d; }
@media (max-width: 700px) { .rentform__grid { grid-template-columns: 1fr; } }

.postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.postcard {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  align-content: start;
}
.postcard:hover { border-color: var(--navy); }
.postcard__cover { width: 100%; height: 160px; object-fit: cover; border-radius: var(--r); margin-bottom: var(--sp-2); }
.postcard__date { font-size: var(--fs-xs); color: var(--text-faint); }
.postcard__title { font-family: var(--font-display); font-weight: 700; }
.postcard__lead { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 900px) { .postgrid { grid-template-columns: 1fr; } }

.vacancylist { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 760px; }
.vacancy { border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); }
.vacancy summary { display: flex; justify-content: space-between; gap: var(--sp-3); cursor: pointer; align-items: baseline; }
.vacancy__title { font-family: var(--font-display); font-weight: 700; }
.vacancy__meta { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.vacancy__body { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text); }

.doclist { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 560px; }
.docitem {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text);
}
.docitem:hover { border-color: var(--navy); color: var(--navy); }
.docitem svg { color: var(--red); flex: 0 0 auto; }

/* --- Оформление: табы получения, выбор аптеки, согласие ------------------- */
.segtabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border-radius: var(--r);
}
.segtabs__tab {
  padding: 10px var(--sp-5);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.segtabs__tab:hover { color: var(--navy); }
.segtabs__tab--active { background: var(--red); color: #fff; }
.segtabs__tab--active:hover { color: #fff; }

.availtag--all { background: var(--surface); color: var(--text); }
button.availtag { cursor: pointer; border: 2px solid transparent; }
.availtag--on { border-color: var(--navy); }

.pickerlist {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-right: 4px;
}
.pickbranch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
}
.pickbranch:hover { border-color: var(--navy); }
.pickbranch--current { border-color: var(--red); background: var(--red-soft, #fdf2f4); }
.pickbranch input { accent-color: var(--red); width: 18px; height: 18px; }
.pickbranch input:disabled + .pickbranch__body { opacity: 0.5; }
.pickbranch__body { display: grid; gap: 2px; min-width: 0; }
.pickbranch__name { font-weight: 700; font-size: var(--fs-sm); }
.pickbranch__addr { font-size: var(--fs-xs); color: var(--text-muted); }

.consent { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; }
.consent input { margin-top: 2px; accent-color: var(--red); width: 16px; height: 16px; flex: 0 0 auto; }
.consent a { color: var(--navy); text-decoration: underline; }

.ordercomp { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.ordercomp summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.ordercomp__back { font-weight: 400; font-size: var(--fs-xs); color: var(--navy); text-decoration: underline; }
.ordercomp .checkout__items { margin-top: var(--sp-3); }

/* Фильтр городов на странице аптек */
.citychips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.citychip {
  height: 38px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.citychip:hover { background: var(--surface-2); }
.citychip--active { background: var(--navy); color: #fff; }

/* Фото аптеки: превью фасада в карточке, клик открывает просмотр */
.branchcard__photo {
  position: relative;
  display: block;
  width: 100%;
  height: 150px;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  cursor: zoom-in;
  padding: 0;
}
.branchcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.branchcard__photo:hover img { transform: scale(1.03); transition: transform 0.25s ease; }
.branchcard__photocount {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(16, 26, 44, 0.65);
  color: #fff;
  font-size: var(--fs-xs);
}

.photobox {
  border: none;
  padding: var(--sp-5);
  width: min(960px, calc(100vw - 32px));
  border-radius: var(--r-lg);
  background: var(--bg);
  /* position задавать нельзя: перебьёт нативный fixed модального диалога,
     окно встанет в конец документа и страница «прыгнет» к нему */
}
.photobox::backdrop { background: rgba(16, 26, 44, 0.55); }
.photobox__title { margin: 0 0 var(--sp-4); padding-right: 48px; }
.photobox__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.photobox__grid figure { margin: 0; }
.photobox__grid img { width: 100%; border-radius: var(--r); display: block; }
.photobox__grid figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}
.photobox__grid [data-photobox-interior-wrap][hidden] { display: none; }
@media (max-width: 700px) {
  .photobox__grid { grid-template-columns: 1fr; }
}
.branchcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.branchcard__meta a:hover { color: var(--red); }
.branchcard__actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.branchcard__chosen {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--navy);
}

/* Выбранная аптека в шапке подсвечивается */
.place--chosen { background: var(--navy-soft); color: var(--navy); font-weight: 700; }

/* --- Инструкция раздельными блоками --------------------------------------
   Сплошное полотно текста никто не читает. Каждый раздел — свой блок,
   длинные сворачиваются до нескольких строк с кнопкой «ещё».
   -------------------------------------------------------------------------- */
.pdp__instruction { display: grid; gap: var(--sp-5); }

.leaflet { display: grid; gap: var(--sp-2); }
.leaflet__title {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.leaflet__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  overflow: hidden;
}
.leaflet__text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.leaflet__more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.leaflet__more:hover { color: var(--red); }
/* Атрибут hidden обязан побеждать display у класса — иначе «ещё» видна всегда */
.leaflet__more[hidden] { display: none; }
.leaflet__more svg { transition: transform 0.2s ease; }
.leaflet__more.is-open svg { transform: rotate(180deg); }

/* --- Дерево категорий в каталоге ------------------------------------------ */
.sidebar__sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 var(--sp-2) var(--sp-3); }
.sidebar__link--child { font-size: var(--fs-xs); color: var(--text-muted); padding-top: 6px; padding-bottom: 6px; }
.sidebar__link--child:hover { color: var(--navy); }

/* Подкатегории чипсами над сеткой (когда открыта верхняя категория) */
.subchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.subchips__item {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
}
.subchips__item:hover { background: var(--navy); color: #fff; }

/* --- Корзина -------------------------------------------------------------- */
.cartlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-8);
}
.cartlist { display: flex; flex-direction: column; gap: var(--sp-2); }

.cartline {
  display: grid;
  /* Колонки фиксированы: счётчик и цена стоят по одной вертикали во всех
     строках и не съезжают от длины сумм */
  grid-template-columns: 72px minmax(0, 1fr) 132px 128px 34px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--border);
}
.cartline--off { opacity: 0.6; }
.cartline__media {
  width: 72px; height: 72px;
  border-radius: var(--r); background: var(--surface); overflow: hidden;
  display: grid; place-items: center;
}
.cartline__media img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cartline__info { min-width: 0; }
.cartline__name { font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartline__name:hover { color: var(--red); }
.cartline__maker { font-size: var(--fs-xs); color: var(--text-muted); }
.cartline__off { font-size: var(--fs-xs); color: var(--red); margin-top: 2px; }

.cartline__qty {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  justify-self: center;
  background: var(--surface); border-radius: var(--r); padding: 4px;
}
.cartline__qty button {
  width: 30px; height: 30px; border-radius: var(--r-sm); background: #fff;
  font-size: var(--fs-md); color: var(--navy); box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
}
.cartline__qty button:hover { background: var(--navy); color: #fff; }
.cartline__qty span { min-width: 22px; text-align: center; font-weight: 700; font-family: var(--font-display); }

.cartline__price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; text-align: right; }
.cartline__remove { width: 34px; height: 34px; border-radius: 50%; color: var(--text-faint); display: grid; place-items: center; }
.cartline__remove:hover { background: var(--red-soft); color: var(--red); }

.cartsum {
  position: sticky; top: 88px;
  background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.cartsum__title { font-size: var(--fs-lg); }
.cartsum__row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-base); }
.cartsum__row b { font-family: var(--font-display); font-size: var(--fs-lg); }
.cartsum__note { font-size: var(--fs-xs); color: var(--amber); margin: 0; }
.cartsum__hint { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; margin: 0; }

@media (max-width: 900px) {
  .cartlayout { grid-template-columns: 1fr; }
  .cartsum { position: static; }
  .cartline { grid-template-columns: 60px minmax(0, 1fr) auto; grid-row-gap: var(--sp-2); }
  .cartline__media { width: 60px; height: 60px; }
  /* Цена и количество переносятся под названием */
  .cartline__qty { grid-column: 2; justify-self: start; }
  .cartline__price { grid-column: 3; }
  .cartline__remove { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* --- Аптеки: карта, переключатель, статусы наличия ------------------------ */
.branchtools { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.switch { display: inline-flex; background: var(--surface); border-radius: var(--r-pill); padding: 4px; }
.switch__btn {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; font-family: var(--font-display); color: var(--text-muted);
}
.switch__btn--active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

.branchmap { height: 460px; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-5); z-index: 0; }

/* Полоса «Заказ доступен: …» */
.availbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.availbar__title { font-size: var(--fs-sm); color: var(--text-muted); }

.availtag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-display);
  padding: 3px var(--sp-2); border-radius: var(--r-sm);
}
.availtag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.availtag--full { color: var(--green); background: #e7f6ee; }
.availtag--partial { color: var(--amber); background: #fdf0e1; }
.availtag--none { color: var(--text-muted); background: var(--surface-2); }

.branchcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }

/* --- Оформление заказа --------------------------------------------------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; margin-bottom: var(--sp-8); }
.checkout__main { display: flex; flex-direction: column; gap: var(--sp-4); }
.checkout__block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.checkout__title { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.checkout__branch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.checkout__muted { font-size: var(--fs-sm); color: var(--text-muted); }
.checkout__note { font-size: var(--fs-xs); color: var(--amber); margin: var(--sp-3) 0 0; }

.radio { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r); cursor: pointer; }
.radio:hover { background: var(--surface); }
.radio input { margin-top: 4px; accent-color: var(--navy); }
.radio b { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.radio .checkout__muted { display: block; }

.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 4px; }
.field .req { color: var(--red); }
.field input, .field textarea {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: var(--bg); font: inherit; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); }
.field__err { display: block; color: var(--red); font-size: var(--fs-xs); margin-top: 4px; }

.checkout__summary { position: sticky; top: 88px; background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5); }
.checkout__items { display: flex; flex-direction: column; gap: var(--sp-2); }
.checkout__item { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.checkout__item b { font-family: var(--font-display); white-space: nowrap; }

/* --- Подтверждение заказа ------------------------------------------------- */
.orderdone { max-width: 560px; margin: var(--sp-7) auto var(--sp-8); text-align: center; }
.orderdone__icon { width: 72px; height: 72px; margin: 0 auto var(--sp-4); border-radius: 50%; background: #e7f6ee; color: var(--green); display: grid; place-items: center; }
.orderdone__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.orderdone__num { color: var(--text-muted); margin-bottom: var(--sp-4); }
.orderdone__text { color: var(--text); line-height: 1.6; margin-bottom: var(--sp-5); }
.orderdone__summary { text-align: left; background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); }

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; }
}

/* --- Проверка сертификата обучения --------------------------------------- */
.certcheck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin: var(--sp-5) 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-lg);
}
.certcheck__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  color: #14915b;
}
.certcheck__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
  flex: 1;
  min-width: 260px;
}
.certcheck__facts dt { color: var(--text-muted); }
.certcheck__facts dd { margin: 0; font-weight: 600; }
.certcheck__sheet {
  margin-bottom: var(--sp-8);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}