/*
 * Компоненты витрины: кнопки, карточка товара, сетка каталога, переключатель
 * города и фасовки, таблица характеристик.
 */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    opacity var(--transition);
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-cream);
}

.btn--primary:hover { background: var(--c-accent-hover); }

.btn--soft {
  background: var(--c-leaf-pale);
  color: var(--c-ink);
}

.btn--soft:hover { background: var(--c-leaf); }

.btn--leaf {
  background: var(--c-leaf);
  color: var(--c-ink);
}

.btn--dark {
  background: var(--c-ink);
  color: var(--c-cream);
}

.btn--dark:hover { background: var(--c-moss); }

.btn--outline {
  background: transparent;
  border: 1px solid var(--c-ink-faint);
  color: var(--c-ink);
}

.btn--outline:hover { background: var(--c-leaf-wash); }

.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Круглая кнопка-иконка рядом с основной. */
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-cream);
  cursor: pointer;
  font-size: var(--fs-lg);
  transition: background var(--transition);
}

.btn-icon:hover { background: var(--c-accent-hover); }
.btn-icon--soft { background: var(--c-leaf-pale); color: var(--c-ink); }
.btn-icon--soft:hover { background: var(--c-leaf); }

/* Основная кнопка и круглая иконка как одна группа. */
.btn-group {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.btn-group .btn { flex: 1; }

/* --- Сетка каталога -------------------------------------------------------- */

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-6);
}

/* Кнопка дозагрузки лежит внутри сетки (htmx подменяет её следующей порцией),
   поэтому растягивается на все колонки, а не занимает место карточки. */
.catalog-more__btn {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: var(--sp-6);
  min-width: 240px;
}

/* --- Карточка товара ------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.product-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-leaf-wash);
  display: grid;
  place-items: center;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__placeholder {
  color: var(--c-moss);
  font-size: var(--fs-xs);
}

.product-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
  flex: 1;
}

.product-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.product-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.product-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* --- Цена ------------------------------------------------------------------ */

.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.price__from,
.price__label {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.price__value {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.price__old {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  text-decoration: line-through;
}

.price__badge {
  background: var(--c-accent);
  color: var(--c-cream);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.price--lg .price__value { font-size: var(--fs-h3); }

/* --- Наличие --------------------------------------------------------------- */

.stock {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.stock--in { color: var(--c-moss); }
.stock--out { color: var(--c-ink-muted); }
.stock--backorder { color: var(--c-accent); }

/* --- Страница товара -------------------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}

.product__gallery {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-4);
}

.product__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.product__thumb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--c-leaf-wash);
  padding: 0;
  cursor: pointer;
}

.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb[aria-current="true"] { border-color: var(--c-leaf); }

.product__cover {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-leaf-wash);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.product__cover img { width: 100%; height: 100%; object-fit: cover; }

.product__label {
  color: var(--c-leaf);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-3);
}

.product__description {
  margin: var(--sp-6) 0;
}

.product__purchase {
  margin-top: var(--sp-8);
  display: grid;
  gap: var(--sp-5);
}

.product__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.product__buy .btn-group { flex: 1 1 260px; }

/* Участие в закупке: количество и кнопка стоят одной строкой, пояснение под
   ними — оно шириной во всю панель. */
.product__join {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 100%;
}

.product__join .qty { width: 88px; }

/* --- Переключатель фасовки --------------------------------------------------- */

.variants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.variant-chip {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-ink-faint);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.variant-chip:hover { background: var(--c-leaf-wash); }

.variant-chip[aria-pressed="true"] {
  background: var(--c-leaf-pale);
  border-color: var(--c-leaf);
}

/* Индикатор загрузки htmx: панель гаснет, пока летит запрос. */
.htmx-request.variant-panel,
.htmx-request .variant-panel {
  opacity: 0.5;
  transition: opacity var(--transition);
}

/* --- Характеристики ---------------------------------------------------------- */

.attrs {
  margin-top: var(--sp-12);
}

.attrs__group + .attrs__group { margin-top: var(--sp-8); }

.attrs__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-4);
}

.attrs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.attrs__table th,
.attrs__table td {
  text-align: left;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-ink-faint);
  vertical-align: top;
}

.attrs__table th {
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
  width: 45%;
}

/* --- Переключатель города ------------------------------------------------------ */

.city-switcher {
  position: relative;
}

.city-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}

.city-switcher__current::-webkit-details-marker { display: none; }

.city-switcher__pin { color: var(--c-moss); }
.city-switcher__arrow { color: var(--c-leaf); transition: transform var(--transition); }
.city-switcher[open] .city-switcher__arrow { transform: rotate(180deg); }

/* Пилюля на тёмной плашке шапки. */
.city-switcher--bar .city-switcher__current {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--c-cream-wash);
  color: var(--c-cream);
  font-size: var(--fs-base);
}

.city-switcher--bar .city-switcher__pin { color: var(--c-leaf); }
.city-switcher--bar .city-switcher__arrow { color: var(--c-cream); }

.city-switcher--bar .city-switcher__list {
  top: calc(100% + 14px);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}

/* Круглая кнопка на телефоне: название остаётся только для скринридера. */
.city-switcher--icon .city-switcher__current {
  width: var(--h-control);
  height: var(--h-control);
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--c-ink-faint);
}

.city-switcher--icon .city-switcher__arrow { display: none; }

.city-switcher__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-3));
  z-index: 20;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-3);
  margin: 0;
  list-style: none;
  display: none;
}

.city-switcher[open] .city-switcher__list,
.city-switcher__list--open { display: block; }

.city-switcher__list a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.city-switcher__list a:hover { background: var(--c-leaf-wash); }
.city-switcher__list a[aria-current="true"] { background: var(--c-leaf-pale); }

/* --- Пустое состояние ------------------------------------------------------------ */

.empty {
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}

.empty__text { color: var(--c-ink-muted); }

@media (max-width: 900px) {
  .product {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* --- Блоки посадочной страницы ------------------------------------------------ */

.block + .block { margin-top: var(--sp-16); }

.block__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-8);
}

/* Текст из визуального редактора: и статья блога, и текстовый блок посадочной.
   Разметку сюда кладёт CKEditor, поэтому правила описывают его вывод —
   <figure class="image">, <figure class="table">, классы выравнивания. */
.prose { max-width: 760px; }
.prose h3 { margin: var(--sp-8) 0 var(--sp-3); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul,
.prose ol { margin: 0 0 var(--sp-4) var(--sp-6); }
.prose li { margin-bottom: var(--sp-2); }
.prose a { text-decoration: underline; }

/* height: auto обязателен: редактор проставляет картинке атрибуты width и
   height, и без него ужатая по ширине картинка сохраняет исходную высоту —
   изображение сплющивается. */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.prose figure {
  margin: var(--sp-6) 0;
}

/* Уменьшенной в редакторе картинке ширину задают инлайном на фигуре, а не на
   самой картинке — растянуть до неё нужно только такие. Остальные показываются
   в своём размере: растягивать мелкую картинку на всю колонку значит её мылить. */
.prose figure.image_resized img {
  width: 100%;
}

.prose figcaption {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-top: var(--sp-2);
}

.prose .image-style-align-left,
.prose .image-style-side {
  float: left;
  max-width: 50%;
  margin: 0 var(--sp-6) var(--sp-4) 0;
}

.prose .image-style-align-right {
  float: right;
  max-width: 50%;
  margin: 0 0 var(--sp-4) var(--sp-6);
}

.prose .image-style-block-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Таблица шире колонки текста прокручивается внутри себя, а не растягивает
   страницу: горизонтальная прокрутка всего документа ломает вёрстку. */
.prose figure.table {
  overflow-x: auto;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  border: 1px solid var(--c-ink-faint);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--c-leaf-wash);
  font-weight: var(--fw-bold);
}

/* Галерея */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-6);
}

.gallery__item { margin: 0; }

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

.gallery__item figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Вопросы и ответы */
.faq {
  display: grid;
  gap: var(--sp-3);
  max-width: 860px;
}

.faq__item {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-card);
}

.faq__question {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}

.faq__question::after {
  content: "+";
  color: var(--c-leaf);
  font-size: var(--fs-lg);
}

.faq__item[open] .faq__question::after { content: "−"; }

.faq__answer {
  margin-top: var(--sp-3);
  color: var(--c-ink-muted);
}

/* Преимущества */
.advantages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-6);
}

.advantages__item {
  background: var(--c-leaf-wash);
  border-radius: var(--r-card);
  padding: var(--sp-8) var(--sp-6);
}

.advantages__icon { font-size: 32px; margin-bottom: var(--sp-3); }
.advantages__title { font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.advantages__text { color: var(--c-ink-muted); font-size: var(--fs-sm); }

/* Баннер */
.banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  background: var(--c-leaf-pale);
  border-radius: var(--r-card);
  padding: var(--sp-12);
}

.banner__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-4);
}

/* Пропорция задана жёстко: редактор загружает произвольный файл, и вертикальная
   картинка иначе растягивает баннер на два экрана. */
.banner__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* Склады */
.warehouses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-6);
}

.warehouses__item {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
}

.warehouses__name { font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.warehouses__address { color: var(--c-ink-muted); font-size: var(--fs-sm); }

.warehouses__badge {
  display: inline-block;
  margin-top: var(--sp-3);
  background: var(--c-leaf-pale);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* Призыв к действию */
.cta {
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-card);
  padding: var(--sp-16) var(--sp-12);
  text-align: center;
}

.cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-4);
}

.cta__text { color: rgba(254, 252, 242, 0.8); margin-bottom: var(--sp-8); }

/* Похожие страницы */
.related-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.related-links a {
  display: inline-block;
  background: var(--c-surface);
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-card);
  transition: background var(--transition);
}

.related-links a:hover { background: var(--c-leaf-pale); }

@media (max-width: 900px) {
  .banner {
    grid-template-columns: 1fr;
    padding: var(--sp-8);
  }
}

/* --- Первый экран ---------------------------------------------------------------- */

.block--hero { margin-top: 0; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: center;
  position: relative;
  padding: var(--sp-12) 0 var(--sp-16);
}

/* Мягкое зелёное пятно за первым экраном — как на действующем сайте. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 30%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: var(--c-leaf-wash);
  pointer-events: none;
}

.hero__eyebrow {
  color: var(--c-moss);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-8);
}

.hero__list {
  list-style: none;
  margin: 0 0 var(--sp-10);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.hero__list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.hero__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

.hero__cta { max-width: 400px; }

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

/* --- Переключатель вида списка ---------------------------------------------------- */

.view-switch {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-1);
  margin-bottom: var(--sp-6);
}

.view-switch__btn {
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-muted);
  transition: background var(--transition), color var(--transition);
}

.view-switch__btn:hover { background: var(--c-leaf-wash); color: var(--c-ink); }

.view-switch__btn[aria-current="true"] {
  background: var(--c-leaf-pale);
  color: var(--c-ink);
}

/* --- Блог ---------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  gap: var(--sp-8);
}

/* Крупные карточки: колонка не уже 320px, дальше сетка решает сама. */
.blog-grid--grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Компактные: ровно две в строке — иначе при трёх статьях ряд остаётся рваным. */
.blog-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  /* Граница поверх тени: на кремовом фоне одной тени мало, и карточки
     сливаются в общее полотно. */
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.blog-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: var(--c-leaf-wash);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__info {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.blog-card__date {
  color: var(--c-moss);
  font-size: var(--fs-sm);
}

.blog-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  margin: 0;
  /* Заголовок пишет редактор: длинный адрес или составной термин без пробелов
     не должен разрывать карточку. */
  overflow-wrap: anywhere;
}

/* Анонс обрезается по строкам: карточки в ряду остаются одной высоты, как бы
   ни различалась длина текста. */
.blog-card__excerpt {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  margin: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Компактная карточка: обложка сбоку, текст рядом. */
.blog-card--compact {
  flex-direction: row;
  border-radius: var(--r-md);
}

.blog-card--compact .blog-card__media {
  flex: 0 0 38%;
  aspect-ratio: auto;
}

.blog-card--compact .blog-card__info {
  padding: var(--sp-5);
  gap: var(--sp-1);
  min-width: 0;
}

.blog-card--compact .blog-card__title { font-size: var(--fs-md); }

/* В узкой карточке места меньше — анонс режется раньше. */
.blog-card--compact .blog-card__excerpt { -webkit-line-clamp: 3; }

@media (max-width: 700px) {
  .blog-grid--compact { grid-template-columns: 1fr; }
}

/* --- Страница статьи ------------------------------------------------------------ */

.article {
  max-width: 760px;
  margin: 0 auto;
}

.article__date {
  color: var(--c-moss);
  font-size: var(--fs-sm);
}

.article__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: var(--sp-3) 0 var(--sp-8);
}

.article__cover {
  width: 100%;
  border-radius: var(--r-card);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: var(--sp-10);
}

.article__body h2 {
  font-size: var(--fs-h3);
  margin: var(--sp-10) 0 var(--sp-4);
}

.article__body h3 { margin: var(--sp-8) 0 var(--sp-3); }

/* Одиночная картинка без фигуры: отступы фигуры к ней не применяются. */
.article__body > img { margin: var(--sp-6) 0; }

/* Блок с подборкой в конце страницы: товары и статьи в конце материала,
   статьи в конце карточки товара. Во всю ширину контейнера, а не колонки
   текста. */
.related-section { margin-top: var(--sp-16); }

.empty__text code {
  background: var(--c-leaf-wash);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-size: var(--fs-sm);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .hero::before { display: none; }
}

/* --- Формы -------------------------------------------------------------------- */

.field + .field { margin-top: var(--sp-5); }

.field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}

/* Поля стилизуются по типу, а не по классу: разметку виджетов рисует Django,
   и навешивать класс на каждый инпут пришлось бы в питоне. */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--sp-5);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  font: inherit;
  color: var(--c-ink);
}

.field input:focus-visible {
  outline: none;
  border-color: var(--c-leaf);
  box-shadow: 0 0 0 3px var(--c-leaf-wash);
}

.field--invalid input { border-color: var(--c-accent); }

.field__help {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

.field__help ul { margin: 0; padding-left: var(--sp-5); }

.field__error {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-accent);
}

/* --- Сообщения после действия --------------------------------------------------- */

.messages {
  list-style: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.messages__item {
  background: var(--c-leaf-pale);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
}

.messages__item--error {
  background: var(--c-surface);
  border: 1px solid var(--c-accent);
}

/* --- Вход и регистрация ---------------------------------------------------------- */

.auth {
  max-width: 460px;
  margin: 0 auto;
}

.auth__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-8);
  text-align: center;
}

.auth__form {
  background: var(--c-surface);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8);
}

.auth__form .btn { margin-top: var(--sp-8); }

.auth__aside {
  margin: var(--sp-5) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}

.auth__aside a { text-decoration: underline; }
.auth__aside--muted { color: var(--c-ink-muted); }

/* --- Личный кабинет ------------------------------------------------------------- */

/* Кабинет начинается со сводки: деньги и сроки нужны каждый раз, учётная
   запись — раз в полгода. Поэтому заявки занимают основную колонку, а заказы
   и учётная запись стоят сбоку. */

.account__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.account__head .page__title { margin-bottom: 0; }

.account__who {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.summary-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-purchase-card);
  background: var(--c-surface);
}

/* Требование денег — единственная плитка, которая зовёт действовать. */
.summary-tile--due {
  border-color: transparent;
  background: var(--c-hot-wash);
}

.summary-tile__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-muted);
}

.summary-tile--due .summary-tile__label { color: var(--c-accent-hover); }

.summary-tile__value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.summary-tile__meta {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.summary-tile__progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Плитки в ряду разной высоты — кнопка прижимается к низу, а не висит
   посередине соседней. */
.summary-tile .btn { margin-top: auto; }

.account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: var(--sp-6);
  align-items: start;
}

.account__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.account__main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.account__title { font-size: var(--fs-h3); }

.stage-chips {
  display: flex;
  gap: var(--sp-2);
}

.stage-chip {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-leaf-wash);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--transition), color var(--transition);
}

.stage-chip:hover { background: var(--c-leaf-pale); }

.stage-chip--active {
  background: var(--c-ink);
  color: var(--c-cream);
}

.stage-chip--active:hover {
  background: var(--c-ink);
  color: var(--c-cream);
}

.account__more {
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-moss);
}

.account__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.account__card {
  background: var(--c-surface);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8);
}

.account__subtitle {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-5);
}

.account__list {
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-3);
}

.account__list dt {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.account__list dd { margin: 0; overflow-wrap: anywhere; }

.account__badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-leaf-wash);
  color: var(--c-moss);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.account__empty {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* Кнопка в карточке не должна липнуть к полю или списку над ней. */
.account__card form .btn,
.account__card > .btn { margin-top: var(--sp-5); }

@media (max-width: 900px) {
  .account { grid-template-columns: 1fr; }
}

/* --- Табы разделов ---------------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--transition), border-color var(--transition);
}

.tabs__item:hover { background: var(--c-leaf-wash); }

.tabs__item--active {
  background: var(--c-leaf-pale);
  border-color: var(--c-leaf);
}

.tabs__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.tabs__count {
  color: var(--c-ink-muted);
  font-weight: var(--fw-regular);
}

/* --- Плитки разделов -------------------------------------------------------------- */

.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.category-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}

.category-tile:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.category-tile__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-leaf-wash);
}

.category-tile__media img { width: 100%; height: 100%; object-fit: cover; }

.category-tile__title {
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

/* Счётчик товаров: необязательная настройка блока разделов. */
.category-tile__count {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

.category__lead { margin-bottom: var(--sp-10); }

/* --- Бренды ----------------------------------------------------------------------- */

.brand-tile__country {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.brand__logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: var(--c-surface);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.brand__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
}

.brand__facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
}

.brand__facts dt { color: var(--c-ink-muted); }
.brand__facts dd { margin: 0; overflow-wrap: anywhere; }
.brand__facts a { text-decoration: underline; }

/* Бренд на карточке товара — над названием, как метка производителя. */
.product__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  color: var(--c-moss);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.product__brand img { width: 24px; height: 24px; object-fit: contain; }
.product__brand:hover { color: var(--c-ink); }

/* --- Блок логотипов ---------------------------------------------------------------- */

.brand-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-6);
}

.brand-logo {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.brand-logo:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.brand-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }

.brand-logo__name {
  font-weight: var(--fw-bold);
  text-align: center;
  overflow-wrap: anywhere;
}

/* --- Разделы, отбор и страницы ---------------------------------------------
   Разделы стоят строкой над списком, отбор — строкой под ними, список — во всю
   ширину. Раздел здесь навигация, а не фильтр, поэтому и место у него своё. */

/* Заголовок и действия страницы стоят одной строкой: действия относятся ко
   всему каталогу, а не к списку под ним. */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--sp-6);
}

/* Ряд разделов обрамлён линиями: это отдельная полоса управления, а не часть
   заголовка и не часть списка. */
.sections {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-6);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.sections__label {
  margin-right: var(--sp-2);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-moss);
}

.sections__item {
  padding: 9px var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-muted);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.sections__item:hover {
  background: var(--c-leaf-wash);
  color: var(--c-ink);
}

/* Открытый раздел залит тёмным: из всех плашек строки выбрана ровно одна, и
   отличать её оттенком серого — значит не отличать вовсе. */
.sections__item--active {
  background: var(--c-ink);
  color: var(--c-cream);
}

/* Черта отделяет корни от подразделов открытой ветки: без неё строка читается
   как один плоский список, в котором уровни перепутаны. */
.sections__split {
  width: 1px;
  height: 20px;
  margin: 0 var(--sp-2);
  background: var(--c-line);
}

.sections__item--more {
  border: 1px solid var(--c-ink-faint);
  cursor: pointer;
  list-style: none;
}

.sections__item--more::-webkit-details-marker { display: none; }

.sections__more { position: relative; }

/* Строка отбора над списком: слева — где мы и что отобрано, справа — сколько
   нашлось и в каком порядке показано. */
.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.filters__chosen,
.filters__result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}

.filters__result { gap: var(--sp-4); }

.filters__branch,
.filters__arrow,
.filters__count {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.filters__reset {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  text-decoration: underline;
}

/* Снятый фильтр — это чип с крестиком: что именно отобрано, видно словами, и
   тем же движением это снимается. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-leaf-pale);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.chip__drop {
  color: var(--c-moss);
  line-height: 1;
}

.chip__drop:hover { color: var(--c-accent); }

/* Добавление бренда — пунктирная плашка: она предлагает действие, а не
   сообщает о выбранном, и путать их не надо. */
.chip--add {
  background: transparent;
  border: 1px dashed rgba(26, 52, 43, 0.24);
  color: var(--c-ink-muted);
  cursor: pointer;
  list-style: none;
}

.chip--add::-webkit-details-marker { display: none; }

.filters__more { position: relative; }

.dropdown {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--sp-2));
  left: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  transition: background var(--transition), color var(--transition);
}

.dropdown__option:hover { background: var(--c-leaf-wash); }

.dropdown__option--active {
  background: var(--c-leaf-pale);
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

/* Логотип вписывается, а не обрезается: у бренда он бывает и широким, и
   квадратным, и обрезанный логотип — испорченный логотип. */
.dropdown__logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Порядок — переключатель из сегментов: три взаимоисключающих значения, из
   которых всегда выбрано одно. */
.segmented {
  display: flex;
  gap: var(--sp-1);
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(26, 52, 43, 0.06);
}

.segmented__item {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-muted);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.segmented__item--active {
  background: var(--c-cream);
  color: var(--c-ink);
}

/* На узком экране обе половины строки встают одна под другой и прокручиваются
   вбок: переносить сегменты по одному — терять переключатель. */
@media (max-width: 900px) {
  .filters {
    align-items: stretch;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .filters__chosen,
  .filters__result {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filters__chosen::-webkit-scrollbar,
  .filters__result::-webkit-scrollbar { display: none; }

  /* Разделы тоже прокручиваются вбок: перенесённые по одному, они съедают
     половину первого экрана. */
  .sections {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sections::-webkit-scrollbar { display: none; }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}

.pagination__item {
  min-width: 40px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
}

.pagination__item:hover { background: var(--c-leaf-wash); }

.pagination__item--current {
  background: var(--c-leaf-pale);
  border-color: var(--c-leaf);
  font-weight: var(--fw-semibold);
}

/* --- Закупки -------------------------------------------------------------
   Карточка закупки отвечает на главный вопрос покупателя — соберётся ли она:
   слева состояние, процент, полоса, деньги и действие, справа — четыре самые
   собранные позиции. Товары объясняют, что везут, но решение принимается не
   по ним, поэтому колонка с ними вторая. */

.purchase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.purchase-card {
  display: grid;
  grid-template-columns: 352px minmax(0, 1fr);
  gap: 28px;
  background: var(--c-surface);
  border-radius: var(--r-purchase-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.purchase-card__lead {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.purchase-card__statuses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.purchase-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

/* Процент и подпись стоят на одной базовой линии: это одно высказывание,
   а не число со сноской. */
.purchase-card__gauge {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.purchase-card__percent {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
}

.purchase-card__of {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.purchase-card__sums {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.purchase-card__sums b { font-weight: var(--fw-bold); }

.purchase-card__left { color: var(--c-ink-muted); }

.purchase-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Действия прижаты к низу колонки: у карточек разной высоты кнопки должны
   стоять на одной линии, иначе список выглядит рассыпанным. */
.purchase-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.purchase-card__actions .btn { white-space: nowrap; }

/* Плитки держат высоту своего содержимого: растянутые на всю карточку, они
   набирали пустоту под ценой, когда левая колонка выше. */
.purchase-card__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: var(--sp-3);
  min-width: 0;
}

.purchase__dates {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Метка состояния: стадия закупки и то, чем она торопит. Два разных сигнала
   разными цветами — одна серая метка на оба не отвечала ни на один. */
.status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.status--stage {
  background: var(--c-leaf-pale);
  color: var(--c-leaf-deep);
}

.status--hot {
  background: var(--c-hot-wash);
  color: var(--c-accent);
}

.status--calm {
  background: var(--c-line);
  color: var(--c-ink-muted);
}

/* Плитка товара в карточке закупки. Фон кремовый: белая плитка на белой
   карточке читалась как вторая карточка внутри первой. Цена берёт общие
   классы .price — вторых правил для тех же денег заводить незачем. */
.purchase-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  background: var(--c-cream);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transition);
}

.purchase-tile:hover { box-shadow: var(--shadow-card); }

.purchase-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sp-3);
  overflow: hidden;
  background: var(--c-leaf-wash);
  display: grid;
  place-items: center;
}

.purchase-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.purchase-tile__placeholder {
  color: var(--c-moss);
  font-size: 11px;
}

/* Скидка живёт на фото: рядом с ценой она спорила за внимание с самой ценой. */
.purchase-tile__badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
  background: var(--c-accent);
  color: var(--c-cream);
  font-size: 11px;
  font-weight: var(--fw-bold);
}

.purchase-tile__name {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.purchase-tile__pack {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

/* Цены в плитке выровнены по левому краю: колонка чисел читается сверху вниз
   только тогда, когда они начинаются с одного места. */
.purchase-tile .price { justify-content: flex-start; }
.purchase-tile .price__value { font-size: 17px; font-weight: var(--fw-bold); }
.purchase-tile .price__old { font-size: 13px; }

/* Полоса сбора позиции лежит внутри ссылки, поэтому размечена строчными
   элементами: без display их ширина и высота не работают. */
.purchase-tile .progress,
.purchase-tile .progress__bar {
  display: block;
}

.purchase-tile__progress {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-moss);
}

/* На узком экране карточка становится одноколоночной, плитки — по две, а
   кнопки растягиваются: пальцем в узкую кнопку не попасть. */
@media (max-width: 900px) {
  .purchase-card {
    grid-template-columns: 1fr;
  }

  .purchase-card__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .purchase-card__actions .btn {
    flex: 1 1 100%;
    min-height: 48px;
  }
}

/* Полоса сбора. Ширина задаётся инлайновым стилем: значение приходит из
   данных, а не из набора заранее известных классов. */
.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--c-ink-faint);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--c-leaf);
}

.progress--lg {
  height: var(--h-progress);
  background: var(--c-line);
}

.progress--sm { height: var(--h-progress-sm); }

/* У почти собранной закупки полоса темнеет: до этого места цвет говорит
   «идёт», дальше — «вот-вот». */
.progress--near .progress__bar { background: var(--c-moss); }

.progress__caption {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Оплаченное сверх порогов: пояснение к расхождению суммы и процента. */
.progress__note {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Города, из которых идёт закупка. Показываются, когда участие из текущего
   города невозможно, поэтому выделять «активный» нечего — все равнозначны. */
.purchase-cities__label {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-2);
}

.purchase-cities__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.purchase-cities__item {
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-cream);
}

.purchase-cities__item:hover {
  border-color: var(--c-leaf);
  background: var(--c-leaf-wash);
}

/* Шапка страницы закупки: слева — что за закупка, справа — соберётся ли она.
   Правая колонка отвечает на главный вопрос покупателя, поэтому вынесена
   отдельной карточкой, а не строкой под заголовком. */
.purchase-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  align-items: start;
  gap: var(--sp-8);
  margin-bottom: var(--sp-6);
}

.purchase-summary__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Заголовок отбивается общим шагом колонки: собственный отступ отрывал бы
   его от лида, который его же и продолжает. */
.purchase-summary__main .page__title { margin: 0; }

.purchase-summary__lead {
  margin: 0;
  max-width: 560px;
  font-size: 17px;
  color: var(--c-ink-muted);
  text-wrap: pretty;
}

/* Якорный ряд — те же плашки, что и разделы каталога, но без обрамляющих
   линий: он часть шапки, а не отдельная полоса управления. */
.sections--anchors {
  padding: 0;
  margin-bottom: 0;
  border: 0;
}

.purchase-terms {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sp-6);
  border-radius: var(--r-purchase-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.purchase-terms__percent {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
}

/* Факты отделены линией: выше — деньги сбора, ниже — сроки и объём, и это
   разные вопросы. */
.purchase-terms__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.purchase-terms__action { height: 52px; }

.purchase-terms__note,
.purchase-terms__closed {
  margin: 0;
  font-size: 13px;
  color: var(--c-ink-muted);
}

.purchase-terms__note { text-align: center; }

/* Строка условий стоит в потоке за шапкой и залипает сама: процент и срок
   должны быть видны на любой позиции прокрутки. Фон непрозрачный — под ней
   проезжают карточки позиций. */
.purchase-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-8);
  background: rgba(254, 252, 242, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.purchase-sticky__title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchase-sticky__percent {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
}

/* Полоса лежит в строке строчными элементами, поэтому заполнению нужен
   собственный display: без него ширина в процентах ничего не делает. */
.purchase-sticky__progress,
.purchase-sticky__progress .progress__bar {
  display: block;
}

.purchase-sticky__progress {
  flex: 1;
  max-width: 220px;
}

.purchase-sticky__facts {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  white-space: nowrap;
}

.purchase-sticky__action {
  height: 40px;
  padding: 0 22px;
  margin-left: auto;
}

/* На узком экране карточка условий встаёт под заголовок, а липкая строка
   сокращается до процента и срока: остальное там не помещается. */
@media (max-width: 900px) {
  .purchase-summary {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .purchase-sticky {
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .purchase-sticky__title,
  .purchase-sticky__progress {
    display: none;
  }
}

.purchase__notice {
  color: var(--c-moss);
  font-size: var(--fs-sm);
}

/* Панель позиций: сколько их, поиск, порядок и вид. */
.items-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.items-panel__title .block__title { margin-bottom: var(--sp-1); }

.items-panel__count {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.items-panel__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.items-panel__search {
  display: flex;
  gap: var(--sp-2);
}

.items-panel__search input[type="search"] {
  height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.items-panel__search .btn { height: 40px; }

/* Позиции: одна разметка, два вида. Вид — класс на контейнере, поэтому подмена
   порции не обязана знать, что сейчас выбрано. */
.purchase-items--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.purchase-items--list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.purchase-items__empty,
.purchase-items__more {
  grid-column: 1 / -1;
  justify-self: center;
}

.purchase-items__more { height: 52px; }

.purchase-items__empty {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.purchase-item {
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.purchase-items--grid .purchase-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-item-card);
}

.purchase-items--grid .purchase-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Строка — не таблица: те же элементы, разложенные по колонкам. Заголовков
   колонок нет, каждое значение читается само. */
.purchase-items--list .purchase-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 150px 220px auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-item-row);
}

.purchase-item__media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--c-leaf-wash);
}

.purchase-items--grid .purchase-item__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-tile);
}

.purchase-items--list .purchase-item__media {
  width: 72px;
  height: 72px;
  border-radius: var(--sp-3);
}

.purchase-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.purchase-item__placeholder {
  font-size: 11px;
  color: var(--c-moss);
}

.purchase-item__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-cream);
  font-size: 11px;
  font-weight: var(--fw-bold);
}

.purchase-items--list .purchase-item__badge { display: none; }

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

.purchase-item__name {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-ink);
  text-wrap: pretty;
}

.purchase-items--list .purchase-item__name { font-size: var(--fs-md); }

.purchase-item__pack {
  font-size: 13px;
  color: var(--c-ink-muted);
}

.purchase-item__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.purchase-item__value {
  font-size: 20px;
  font-weight: var(--fw-bold);
}

.purchase-items--list .purchase-item__value { font-size: 19px; }

.purchase-item__collect {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.purchase-item__collect .progress,
.purchase-item__collect .progress__bar { display: block; }

.purchase-item__meta {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

.purchase-item__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}

/* Поле количества — часть действия, а не форма сама по себе: высота у него та
   же, что у кнопки рядом. */
.qty-stepper {
  width: 74px;
  height: var(--h-control);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-btn);
  background: var(--c-cream);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-align: center;
}

.purchase-item__join {
  flex: 1;
  height: var(--h-control);
  padding: 0 var(--sp-5);
}

/* Поле количества с кнопками: их рисует скрипт, поэтому группа существует
   только там, где он отработал. */
.qty-group {
  display: flex;
  align-items: center;
  height: var(--h-control);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-btn);
  background: var(--c-cream);
}

.qty-group .qty-stepper {
  width: 40px;
  height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  /* Стрелки браузера рядом со своими кнопками — второй способ сделать то же
     самое, и они мельче требуемого касания. */
  appearance: textfield;
}

.qty-group .qty-stepper::-webkit-outer-spin-button,
.qty-group .qty-stepper::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.qty-group__btn {
  width: var(--h-control);
  height: var(--h-control);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-md);
  cursor: pointer;
}

.qty-group__btn:hover { background: var(--c-leaf-wash); }

.qty-group__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Полоса корзины не отпускает покупателя: пока он листает позиции, она висит
   снизу, а когда список уехал вверх — прилипает под строкой условий. Оба края
   липкие, поэтому полоса всегда на экране, где бы он ни был.

   Липнет слот, а не сама полоса: её подменяет htmx после каждого добавления, и
   вместе с ней уезжало бы положение.

   Верхняя граница считается от строки условий: та липнет к нулю, и без сдвига
   полоса накрыла бы её. */
.purchase__cart-slot {
  position: sticky;
  top: 76px;
  bottom: var(--sp-4);
  z-index: 3;
}

.cart-status {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding: 14px var(--sp-6);
  border-radius: var(--r-item-row);
  background: var(--c-ink);
  color: var(--c-cream);
  transition: padding var(--transition), border-radius var(--transition);
}

/* Наверху полоса сжимается: там она напоминание о корзине, а не место, где её
   набирают, и половину экрана занимать ей незачем. Класс ставит скрипт —
   отличить прилипшее состояние средствами CSS нельзя. */
.cart-status--compact {
  padding: var(--sp-2) var(--sp-5);
  border-radius: 0 0 var(--r-item-row) var(--r-item-row);
}

.cart-status--compact .cart-status__total { font-size: var(--fs-lg); }

.cart-status--compact .cart-status__action {
  height: 36px;
  padding: 0 var(--sp-5);
}

/* display:flex перебивает hidden, поэтому пустая полоса гасится явно. */
.cart-status[hidden] { display: none; }

.cart-status__count {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Отказ занимает свободное место: он о том же добавлении и важнее суммы. */
.cart-status__error {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  opacity: 0.8;
}

.cart-status__total {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 22px;
  white-space: nowrap;
}

.cart-status__action {
  height: var(--h-control);
  padding: 0 26px;
}

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

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

  /* Строка перестраивается в две линии: миниатюра с названием и ценой сверху,
     сбор и действия снизу. Пять колонок в телефон не помещаются. */
  .purchase-items--list .purchase-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .purchase-items--list .purchase-item__collect,
  .purchase-items--list .purchase-item__actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .purchase-items--grid { grid-template-columns: 1fr; }
}

.product__purchase {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.product__purchase-link {
  color: var(--c-accent);
}

.product__purchase-note {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

/* Короткий список последних заказов в кабинете. */
.account__orders {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.account__order {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account__order-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-weight: var(--fw-semibold);
}

.account__order-head a:hover { color: var(--c-moss); }

.account__order-sum { white-space: nowrap; }

.account__order-meta {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Пояснение вместо кнопки покупки: со склада товар пока не продаётся. */
.product__buy-note {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

/* --- Направления каталога ---------------------------------------------------------- */

/* Переключатель корневых разделов: их немного и надолго, поэтому они занимают
   всю ширину полосой, а не жмутся деревом сбоку. */
.directions {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: var(--sp-10);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.directions__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 60px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  color: var(--c-ink-muted);
  transition: background var(--transition), color var(--transition);
}

.directions__item:hover { background: var(--c-leaf-wash); color: var(--c-ink); }

/* Открытое направление залито тёмным: из двух делений выбрано ровно одно, и
   отличать его оттенком серого — значит не отличать вовсе. */
.directions__item--active,
.directions__item--active:hover {
  background: var(--c-ink);
  color: var(--c-cream);
}

.directions__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.directions__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.directions__count {
  font-size: var(--fs-sm);
  opacity: 0.72;
}

/* --- Секции разделов --------------------------------------------------------------- */

.catalog-sections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.catalog-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.catalog-section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.catalog-section__title:hover { color: var(--c-moss); }

.catalog-section__count {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Колонок ровно четыре, а не auto-fill: ширину ворот задаёт остаток ряда, и
   при плавающем числе колонок считать его было бы нечем. */
.catalog-section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}

.catalog-own__title { margin: var(--sp-12) 0 var(--sp-5); }

/* --- Ворота в раздел --------------------------------------------------------------- */

.gate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-leaf-pale);
  color: var(--c-ink);
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.gate__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gate__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* Подложка появляется только под снимком: на светлой части фотографии тёмный
   текст иначе теряется, а на ровной заливке она была бы карточкой в карточке. */
.gate--photo .gate__body {
  padding: var(--sp-4);
  margin: calc(var(--sp-4) * -1);
  border-radius: var(--r-md);
  background: var(--c-cream);
}

.gate__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.gate__note {
  font-size: var(--fs-sm);
  color: var(--c-leaf-deep);
}

.gate__arrow {
  display: grid;
  place-items: center;
  width: var(--h-control);
  height: var(--h-control);
  border-radius: 50%;
  background: var(--c-leaf);
}

.gate--w2 { grid-column: span 2; }
.gate--w3 { grid-column: span 3; }
.gate--w4 { grid-column: span 4; }

@media (max-width: 1000px) {
  .catalog-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gate--w3,
  .gate--w4 { grid-column: span 2; }
}

@media (max-width: 600px) {
  .directions { flex-direction: column; }
  .directions__item { height: var(--control-h); }
  .catalog-section__grid { grid-template-columns: minmax(0, 1fr); }
  .gate--w2,
  .gate--w3,
  .gate--w4 { grid-column: auto; }
  .gate { min-height: 240px; }
}

/* --- Возврат в закупку из карточки товара -------------------------------------------- */

/* Стрелка налево читается как шаг назад быстрее любой подписи, поэтому кнопка
   стоит первой на странице — там, где взгляд ищет возврат. */
.back-link {
  max-width: 100%;
  margin-bottom: var(--sp-4);
}

/* Название закупки задаёт менеджер, и длина у него любая: на узком экране
   кнопка обязана ужаться, а не растянуть страницу. */
.back-link__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Полоса закупки над карточкой товара -------------------------------------------- */

/* Тёмная и первая на странице: для товара режима «через закупку» сбор — не
   подробность, а условие покупки. */
.deal {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 28px var(--sp-8);
  margin-bottom: var(--sp-10);
  border-radius: var(--r-card);
  background: var(--c-ink);
  color: var(--c-cream);
}

.deal__dial {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

/* Круг рисуется с двенадцати часов, поэтому повёрнут на четверть назад. */
.deal__dial svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.deal__track {
  fill: none;
  stroke: rgba(254, 252, 242, 0.22);
  stroke-width: 8;
}

.deal__value {
  fill: none;
  stroke: var(--c-leaf);
  stroke-width: 8;
  stroke-linecap: round;
}

.deal__percent {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
}

.deal__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.deal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.deal__note {
  font-size: var(--fs-base);
  opacity: 0.78;
  text-wrap: pretty;
}

.deal .btn { white-space: nowrap; }

/* --- Галерея товара ----------------------------------------------------------------- */

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gallery__stage {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-leaf-wash);
  display: grid;
  place-items: center;
}

.gallery__stage img { width: 100%; height: 100%; object-fit: cover; }

.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.gallery__thumb {
  width: 80px;
  height: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-leaf-wash);
  cursor: pointer;
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--c-leaf); }

/* --- Фасовка: чип с подписью ---------------------------------------------------------- */

.variant-chip__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* Собирается фасовка или нет, видно до переключения — это половина смысла
   выбора на такой карточке. */
.variant-chip__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

@media (max-width: 900px) {
  .deal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }
}

/* Товар, который сейчас не собирают: взять его нельзя, и метка говорит об этом
   прямо. Приглушённая — она про отсутствие, а не про предложение. */
.badge--idle {
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--sp-3);
  border-radius: 999px;
  background: var(--c-ink-faint);
  color: var(--c-ink-muted);
  font-size: var(--fs-xs);
}

/* --- Заявки в кабинете -------------------------------------------------------------- */

.requests__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
}

.requests__head .page__title { margin-bottom: var(--sp-8); }

.requests__summary {
  font-size: var(--fs-sm);
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.requests {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Заказ — рамка вокруг своих заявок: номер, дата и общий счёт стоят один раз,
   а не повторяются в каждой карточке. */
.order-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-card);
  background: var(--c-leaf-wash);
}

.order-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 0 var(--sp-2);
}

.order-group__number {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.order-group__number:hover { color: var(--c-moss); }

.order-group__date {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.order-group__invoices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.request {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

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

.request__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.request__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.request__title:hover { color: var(--c-moss); }

.request__meta {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.request__meta a { text-decoration: underline; }

/* Состояние: ждёт денег — акцентом, идёт своим ходом — зелёным, закрыто —
   приглушённым. Ступеней три, и цвет — единственное, чем они спорят за
   внимание. */
.request__status {
  flex-shrink: 0;
  padding: 6px var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--c-ink-faint);
  color: var(--c-ink-muted);
}

.request--due .request__status {
  background: var(--c-hot-wash);
  color: var(--c-accent);
}

.request--active .request__status {
  background: var(--c-leaf-pale);
  color: var(--c-leaf-deep);
}

.request--due .progress__bar { background: var(--c-accent); }

.request__lines,
.request__money,
.request__invoices {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.request__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.request__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

.request__line-sum {
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.request__money {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.request__money-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}

.request__money-paid { color: var(--c-ink-muted); }
.request__money-left { font-weight: var(--fw-semibold); }

.request__invoices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.request__invoice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.request__invoice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Счёт на весь заказ попадает в каждую заявку — приписка говорит, чей он. */
.request__invoice-scope {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

@media (max-width: 700px) {
  .request__head { flex-direction: column; }
  .request__invoice .btn { width: 100%; }
}

/* Строка состава заявки: снимок товара, название и сумма. */
.request__line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
}

.request__line-media {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-leaf-wash);
}

.request__line-media img { width: 100%; height: 100%; object-fit: cover; }

.request__line-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.request__line-name { font-weight: var(--fw-semibold); }
.request__line-name:hover { color: var(--c-moss); }

.request__line-variant {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* --- Корзина с оформлением ------------------------------------------------------------ */

/* Слева состав блоками по закупкам, справа липкая панель оформления. Блок
   закупки повторяет карточку заявки кабинета: те же отступы, шапка и деления. */

.cart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-8);
}

.cart-head__count {
  font-size: var(--fs-base);
  color: var(--c-ink-muted);
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-8);
  align-items: start;
}

.cart-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.cart-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

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

.cart-group__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cart-group__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.cart-group__title:hover { color: var(--c-moss); }

.cart-group__meta {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* Стадия блока: идёт — зелёным, торопит — акцентом, закрыт — приглушённым. */
.cart-group__stage {
  flex-shrink: 0;
  padding: 6px var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--c-leaf-pale);
  color: var(--c-leaf-deep);
}

.cart-group__stage--soon {
  background: var(--c-hot-wash);
  color: var(--c-accent);
}

.cart-group__stage--closed {
  background: var(--c-ink-faint);
  color: var(--c-ink-muted);
}

.cart-group__lines,
.cart-group__money {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.cart-group__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cart-group__money {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.cart-group__money-total { color: var(--c-ink-muted); }
.cart-group__money-due { font-weight: var(--fw-semibold); }

.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto 110px var(--h-control);
  align-items: center;
  gap: var(--sp-4);
}

.cart-line__media {
  width: 72px;
  height: 72px;
  border-radius: var(--sp-3);
  overflow: hidden;
  background: var(--c-leaf-wash);
  display: grid;
  place-items: center;
}

.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__placeholder {
  font-size: 11px;
  color: var(--c-moss);
}

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

.cart-line__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.cart-line__name:hover { color: var(--c-moss); }

.cart-line__pack {
  font-size: 13px;
  color: var(--c-ink-muted);
}

.cart-line__note {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

.cart-line--closed .cart-line__media { opacity: 0.5; }
.cart-line--closed .cart-line__name { color: var(--c-ink-muted); }

.cart-line__qty {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Кнопка нужна только без скрипта: со скриптом форма уходит сама. */
.cart-line__apply {
  height: var(--h-control);
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-btn);
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  cursor: pointer;
}

.cart-line__qty .qty-group + .cart-line__apply { display: none; }

.cart-line__sum {
  font-size: 19px;
  font-weight: var(--fw-bold);
  text-align: right;
  white-space: nowrap;
}

.cart-line__sum--closed { color: var(--c-ink-muted); }

.cart-line__remove {
  width: var(--h-control);
  height: var(--h-control);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.cart-line__remove:hover {
  background: var(--c-leaf-wash);
  color: var(--c-ink);
}

/* Закрытую позицию надо убрать, чтобы оплатить остальное, — крестик зовёт. */
.cart-line--closed .cart-line__remove {
  background: var(--c-hot-wash);
  color: var(--c-accent);
}

.cart-panel {
  position: sticky;
  top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: 28px;
  border-radius: var(--r-purchase-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.cart-panel__guest,
.cart-panel__actions {
  display: flex;
  flex-direction: column;
}

.cart-panel__guest { gap: var(--sp-2); }
.cart-panel__actions { gap: var(--sp-3); }

.cart-panel__lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.cart-panel__text {
  margin: 0;
  font-size: 13px;
  color: var(--c-ink-muted);
}

.cart-panel__city {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.cart-panel__city-name {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.cart-panel__form,
.cart-panel__fields {
  display: flex;
  flex-direction: column;
}

.cart-panel__form { gap: var(--sp-5); }
.cart-panel__fields { gap: var(--sp-4); }
.cart-panel__fields .field + .field { margin-top: 0; }

.cart-panel__fields textarea {
  width: 100%;
  min-height: 88px;
  padding: 14px var(--sp-5);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font: inherit;
  color: var(--c-ink);
  resize: vertical;
}

.cart-panel__fields textarea:focus-visible {
  outline: none;
  border-color: var(--c-leaf);
  box-shadow: 0 0 0 3px var(--c-leaf-wash);
}

/* Получатель из учётки: сводка, раскрываемая «Изменить» в поля формы. */
.recipient__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  list-style: none;
  cursor: pointer;
}

.recipient__summary::-webkit-details-marker { display: none; }

.recipient__edit {
  flex-shrink: 0;
  color: var(--c-moss);
  font-weight: var(--fw-semibold);
}

.recipient[open] .recipient__edit { visibility: hidden; }
.recipient[open] .cart-panel__fields { margin-top: var(--sp-4); }

.cart-panel__blocked {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--sp-4);
  background: var(--c-hot-wash);
  color: var(--c-accent-hover);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}

.consents {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: 13px;
  line-height: 1.45;
}

.consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  cursor: pointer;
}

.consent a { text-decoration: underline; }

/* Галочка рисуется своя: у браузерной нет ни цвета сайта, ни размера касания. */
.consent input {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1.5px var(--c-ink-faint);
  background: var(--c-surface) center / 14px no-repeat;
  cursor: pointer;
}

.consent input:checked {
  box-shadow: none;
  background-color: var(--c-leaf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231a342b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
}

.consent input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-leaf-wash), inset 0 0 0 1.5px var(--c-leaf);
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-8);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.cart-empty__mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-leaf-pale);
  color: var(--c-leaf-deep);
  display: grid;
  place-items: center;
}

.cart-empty__text {
  max-width: 420px;
  margin: 0;
  color: var(--c-ink-muted);
}

/* --- Окно «спасибо» ------------------------------------------------------------------- */

.thanks {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: var(--c-overlay);
}

.thanks__window {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2 * var(--sp-6));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: 36px;
  border-radius: var(--r-purchase-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card-hover);
}

.thanks__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.thanks__mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-leaf);
  color: var(--c-ink);
  display: grid;
  place-items: center;
}

.thanks__meta,
.thanks__lead { margin: 0; }

.thanks__meta { color: var(--c-ink-muted); }
.thanks__lead { font-weight: var(--fw-semibold); }

.thanks__chats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.thanks__chat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 14px var(--sp-4);
  border-radius: var(--sp-5);
  background: var(--c-leaf-wash);
}

.thanks__chat-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.thanks__chat-links {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.thanks__chat-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.thanks__chat-link:hover { background: var(--c-leaf-pale); }

.thanks__actions {
  display: flex;
  gap: var(--sp-3);
}

.thanks__actions .btn { flex: 1; }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .cart-panel { position: static; }
}

@media (max-width: 700px) {
  .cart-group { padding: var(--sp-5); }

  .cart-group__head {
    flex-direction: column-reverse;
    gap: var(--sp-2);
  }

  .cart-group__title { font-size: 22px; }

  /* Строка в два ряда: фото с названием сверху, количество, сумма и крестик под
     ними. Количество начинается под фото — иначе сумме остаётся полтора
     десятка пикселей и она наезжает на крестик. */
  .cart-line {
    grid-template-columns: 56px auto minmax(0, 1fr) var(--h-control);
    grid-template-areas:
      "media info info info"
      "qty qty sum remove";
    gap: 10px var(--sp-3);
    align-items: start;
  }

  .cart-line__media {
    grid-area: media;
    width: 56px;
    height: 56px;
  }

  .cart-line__info { grid-area: info; }
  .cart-line__qty { grid-area: qty; }
  .cart-line__remove-form { grid-area: remove; }

  .cart-line__sum {
    grid-area: sum;
    align-self: center;
    font-size: 17px;
  }

  .thanks__window { padding: var(--sp-6); }
  .thanks__chat { flex-direction: column; align-items: flex-start; }
  .thanks__actions { flex-direction: column; }
}

/* --- Заказы в кабинете ---------------------------------------------------------------- */

/* Заказ раскрывается на месте: шапка — строка реестра, тело — состав, счета и
   отправления. Раскрытие на <details>, поэтому здесь же снят маркер списка. */

.orders__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
}

.orders__head .page__title { margin-bottom: var(--sp-8); }

.orders__summary {
  font-size: var(--fs-sm);
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.orders {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.order-card {
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-purchase-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.order-card__head {
  display: grid;
  /* Шапка стоит и на всю ширину списка заказов, и в узкой колонке кабинета:
     первая колонка ужимается, остальные держат ширину. */
  grid-template-columns: minmax(160px, 216px) 116px minmax(0, 1fr) 132px 24px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  cursor: pointer;
  list-style: none;
}

.order-card__head::-webkit-details-marker { display: none; }

.order-card__head:hover { background: var(--c-leaf-wash); }

.order-card__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.order-card__number { font-weight: var(--fw-semibold); }

/* Состояние заказа выводится из строк, и ступеней у него шесть. Цветом
   различаются три группы: ждёт денег, идёт своим ходом, закрыто. */
.order-state {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--c-ink-faint);
  color: var(--c-ink-muted);
}

.order-state--awaiting {
  background: var(--c-hot-wash);
  color: var(--c-accent);
}

.order-state--pending,
.order-state--confirmed,
.order-state--partial {
  background: var(--c-leaf-wash);
  color: var(--c-leaf-deep);
}

.order-card__date {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.order-card__digest {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card__sum {
  font-weight: var(--fw-semibold);
  text-align: right;
  white-space: nowrap;
}

.order-card__chevron {
  color: var(--c-ink-muted);
  transition: transform var(--transition);
}

.order-card[open] .order-card__chevron { transform: rotate(180deg); }

.order-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 0 var(--sp-6) var(--sp-6);
}

.order-card__requests {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.order-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 120px;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-item-row);
  transition: background var(--transition);
}

.order-request:hover { background: var(--c-leaf-wash); }

.order-request__title { font-weight: var(--fw-semibold); }

.order-request__status {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.order-request__sum {
  font-weight: var(--fw-semibold);
  text-align: right;
  white-space: nowrap;
}

.order-invoice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-hot-wash);
}

.order-invoice__text,
.order-shipment__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Счёт на весь заказ выставляется один, счёт на остаток — по закупке.
   Приписка говорит, чей он: суммы у них не сходятся. */
.order-invoice__scope,
.order-shipment__tracking {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

.order-shipment {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-leaf-wash);
  font-size: var(--fs-sm);
}

.order-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.order-card__delivery {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-card__label {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.order-card__link {
  font-weight: var(--fw-semibold);
  color: var(--c-moss);
  white-space: nowrap;
}

/* В кабинете внутри карточки заказа лежат карточки заявок: своя тень на белом
   не читается, поэтому там она заменяется рамкой. */
.order-card--requests .order-card__body {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.order-card--requests .request {
  box-shadow: none;
  border: 1px solid var(--c-ink-faint);
}

@media (max-width: 900px) {
  .order-card__head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id      chevron"
      "date    sum"
      "digest  digest";
    row-gap: var(--sp-3);
  }

  .order-card__id { grid-area: id; }
  .order-card__chevron { grid-area: chevron; }
  .order-card__date { grid-area: date; }
  .order-card__sum { grid-area: sum; }

  .order-card__digest {
    grid-area: digest;
    white-space: normal;
    overflow: visible;
  }

  .order-request {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--sp-1);
  }

  .order-request__status { grid-column: 1 / -1; }

  .order-invoice .btn { width: 100%; }
}

/* --- Страница заказа ------------------------------------------------------------------ */

/* Документ: деньги плитками сверху, лента событий, состав по заявкам,
   реквизиты в подвале. Плитки те же, что в кабинете (.summary-tile). */

.order-page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.order-page__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.order-page__id .page__title { margin-bottom: 0; }

.order-page__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.order-page__sum {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.order-page__date {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.order-page__section {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-4);
}

.order-panel {
  padding: var(--sp-8);
  border: 1px solid var(--c-ink-faint);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-10);
}

.order-panel__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-6);
}

/* Лента событий: дата, рельс с точкой, текст. Линия рисуется отдельным
   элементом и тянется на всю высоту события — у последнего её нет. */
.timeline {
  display: grid;
  grid-template-columns: 108px 20px minmax(0, 1fr);
  gap: var(--sp-4);
}

.timeline__date {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  padding-top: 2px;
}

/* Событие, которое ждёт денег, называет себя и датой. */
.timeline__date--due {
  color: var(--c-accent-hover);
  font-weight: var(--fw-semibold);
}

.timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline__dot {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c-leaf);
}

.timeline__dot--due { background: var(--c-accent); }
.timeline__dot--idle { background: var(--c-ink-faint); }

.timeline__line {
  width: 2px;
  flex-grow: 1;
  background: var(--c-leaf-pale);
}

.timeline__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-6);
}

.timeline__title { font-weight: var(--fw-semibold); }

.timeline__note {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.timeline__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-hot-wash);
}

.timeline__action .timeline__text { padding-bottom: 0; }

.order-page__delivery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-6);
  font-size: var(--fs-sm);
}

@media (max-width: 900px) {
  .timeline {
    grid-template-columns: 84px 20px minmax(0, 1fr);
    gap: var(--sp-3);
  }

  .timeline__date { font-size: var(--fs-xs); }

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

  .timeline__action .btn { width: 100%; }
}