/* ==========================================================================
   Корзина — макет 1:2859 (1920×3074), пустая корзина — 1:3030 (1920×2637).

   Вся геометрия снята с метаданных Figma и проверена по рендерам
   `_figma/screens/d-1-2859-korzina.png` и `d-1-3030-korzina-pustaya.png`.
   Теней в макете нет ни одной — карточки отделяются только заливкой.

   Разметка страницы: page.php даёт `.page-head` (крошки + H1) и обёртку
   `.container.page-section`, внутрь которой WooCommerce кладёт cart.php
   или cart-empty.php.
   ========================================================================== */

/* --- Вертикаль страницы ----------------------------------------------------
   Макет: H1 273…331, счётчик 347…381 (зазор 16), блок контента с 429
   (зазор 48), подвал с 2256 (зазор 190, половину даёт сам подвал).
   У `.page-head` снизу 48, поэтому верхний отступ секции обнуляем,
   а нижний доводим до 95 = 190 − 95 подвала. */

.woocommerce-cart .page-section {
  padding-top: 0;
  padding-bottom: 95px;
}

/* Счётчик «(4 товара)» — нода 1:2876. Отрицательный отступ съедает
   нижнее поле `.page-head` (48) и оставляет от заголовка ровно 16. */
.cart-count {
  margin-top: calc(var(--space-48) * -1 + var(--space-16));
  margin-bottom: var(--space-48);
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-28);
  color: var(--color-text-muted);
}

/* --- Каркас: 1220 + 20 + 600 = 1840 (нода 1:2877) -------------------------- */

/* Колонки 1220 и 600 с зазором 20; таблица и форма — одна колонка
   с вертикальным зазором 12 (1:2900 заканчивается на 758, 1:2990
   начинается на 770). */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  column-gap: 20px;
  row-gap: var(--space-12);
  align-items: start;
}

.cart-panel   { grid-column: 1; grid-row: 1; }
.cart-quick   { grid-column: 1; grid-row: 2; }
.cart-summary { grid-column: 2; grid-row: 1; }

/* --- Карточка таблицы (1:2900, 1220×758) ---------------------------------- */

.cart-panel {
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

/* separate, а не collapse: при схлопывании браузер делит линию между
   соседними ячейками пополам, и строка выходит 148.5 вместо 148. */
.cart-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

/* Колонки макета: 100 · 366 · 140 · 150 · 160 · 48, зазор 32, поля 16.
   Зазор отдан правому полю ячейки, поля строки — крайним ячейкам. */
.cart-table__col--photo  { width: 148px; }   /* 16 + 100 + 32 */
.cart-table__col--price  { width: 172px; }   /* 140 + 32 */
.cart-table__col--qty    { width: 182px; }   /* 150 + 32 */
.cart-table__col--sum    { width: 192px; }   /* 160 + 32 */
.cart-table__col--remove { width: 64px; }    /* 48 + 16 */

.cart-table th,
.cart-table td {
  padding-left: 0;
  padding-right: var(--space-32);
  text-align: left;
}

.cart-table th:first-child,
.cart-table td:first-child { padding-left: var(--space-16); }

.cart-table th:last-child,
.cart-table td:last-child { padding-right: var(--space-16); }

/* Шапка таблицы (1:2901): 16 Medium серым, снизу линия 2 px. */
.cart-table th {
  height: 54px;
  padding-block: 0;
  vertical-align: top;
  border-bottom: 2px solid var(--color-border-soft);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

.cart-table th:nth-child(3),
.cart-table th:nth-child(5) { text-align: right; }

.cart-table th:nth-child(4) { text-align: center; }

/* «Удалить» в колонке 48 px не помещается и в макете разбито на две
   строки (нода 1:2907, высота 38 = две строки по 19). Повторяем,
   иначе слово вылезет в соседнюю колонку. */
.cart-table th:nth-child(6) {
  text-align: center;
  overflow-wrap: anywhere;
}

/* Строка товара (1:2908): высота 148 = 24 + 100 + 24, снизу линия 1 px.
   В Figma обводка рисуется ВНУТРЬ рамки, в CSS прибавляется к высоте,
   поэтому нижний отступ на этот 1 px меньше — иначе строка 149. */
.cart-table td {
  padding-block: var(--space-24) 23px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-soft);
}

/* Ссылка вокруг плитки строчная: без block она добавляет строке
   полпикселя базовой линии и ломает высоту 148. */
.cart-row__photo a { display: block; }

/* Выравнивание колонок (1:2914 и 1:2922 — по правому краю, 1:2916 и
   1:2924 — по центру). Селектор с `td`, иначе общее правило таблицы
   с равным весом, но ниже по файлу, вернёт всё влево. */
.cart-table td.cart-row__price,
.cart-table td.cart-row__sum { text-align: right; white-space: nowrap; }

/* Счётчик и кнопка удаления — строчные боксы: обнуляем интерлиньяж ячейки,
   иначе строка выше на 1.5 px, а сами блоки уезжают от центра. */
.cart-table td.cart-row__qty,
.cart-table td.cart-row__remove { text-align: center; line-height: 0; }

/* Плитка 100×100 (1:2909) с картинкой 76×76 (1:2910). Заливка плитки
   совпадает с фоном карточки — в макете она тоже не видна. */
.cart-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}

.cart-thumb img {
  width: 76px;
  height: 76px;
  border-radius: 8px;   /* в шкале радиусов темы такого нет, значение из макета */
  background: var(--color-bg);
  object-fit: cover;
}

.cart-row__title {
  display: block;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}

a.cart-row__title:hover { color: var(--color-brand); }

.cart-row__sku {
  display: block;
  margin-top: var(--space-8);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

/* Выбранный вариант позиции: Woo печатает <dl class="variation"> парами
   dt/dd, по умолчанию — столбиком. Держим одной строкой рядом с артикулом
   (правка 2026-08-18). */
.cart-row__name .variation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-8);
  margin: var(--space-8) 0 0;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

.cart-row__name .variation dt {
  margin: 0;
  font-weight: var(--fw-medium);
}

.cart-row__name .variation dd {
  margin: 0 var(--space-12) 0 0;
  color: var(--color-text);
}

.cart-row__name .variation dd p { margin: 0; }

.cart-row__price {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
}

.cart-row__sum {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
  color: var(--color-brand);
}

/* Счётчик количества (1:2916): 150×48, рамка 1 px, радиус 12,
   кнопки по 44. Минус серый, плюс синий — так в макете. */
.cart-qty {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 150px;
  height: 48px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.cart-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 100%;
  transition: color var(--dur-fast) var(--ease-out);
}

.cart-qty__btn svg { width: 24px; height: 24px; }
.cart-qty__btn--minus { color: var(--color-text-muted); }
.cart-qty__btn--plus { color: var(--color-brand); }
.cart-qty__btn:hover { color: var(--color-brand-hover); }

.cart-qty__input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-qty__input::-webkit-outer-spin-button,
.cart-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-qty--single {
  display: inline-block;
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
}

/* Кнопка удаления (1:2924): круг 48 с корзиной 20. Заливка совпадает
   с фоном карточки, поэтому видно только иконку. */
.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.cart-remove svg { width: 20px; height: 20px; }
.cart-remove:hover { background: var(--color-bg); color: var(--color-error); }

/* Подвал карточки (1:2984): 24 сверху, поля 16, ссылки 20 Regular. */
.cart-panel__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-16) 0;
}

.cart-back,
.cart-clear {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  transition: color var(--dur-fast) var(--ease-out);
}

.cart-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-muted);
}

.cart-back__icon { display: flex; }
.cart-back__icon svg { width: 16px; height: 16px; }
.cart-back:hover { color: var(--color-brand); }

.cart-clear { color: var(--color-brand); }
.cart-clear:hover { color: var(--color-brand-hover); }

/* --- Панель итогов (1:2879, 600×470) --------------------------------------
   Единственная карточка экрана с рамкой — так в макете. */

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  /* 31 + рамка 1 = отступ 32 от края карточки: в Figma обводка внутри
     рамки и в поля не входит, в CSS — входит. */
  padding: 31px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.cart-summary__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.cart-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Строка `Detail Row` (1:2882): подпись — линия-выноска — значение, зазор 16. */
.cart-summary__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.cart-summary__label {
  flex-shrink: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

.cart-summary__leader {
  flex: 1 1 0;
  min-width: 8px;
  height: 1px;
  background: var(--color-border-soft);
}

/* Ужимается только когда не влезает: на 1920 выноска забирает весь запас,
   и значение остаётся в одну строку, как в макете. */
.cart-summary__value {
  flex-shrink: 1;
  min-width: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
  text-align: right;
}

.cart-summary__divider {
  display: block;
  height: 1px;
  background: var(--color-border-soft);
}

.cart-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
}

.cart-summary__total-label {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

.cart-summary__total-value {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
  color: var(--color-brand);
  white-space: nowrap;
}

/* Woo оборачивает итог в <strong> — насыщенность берём из макета. */
.cart-summary__total-value strong { font-weight: inherit; }

.cart-summary__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Строка с секундомером (1:2895) — по центру, иконка 20, зазор 8. */
.cart-summary__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
  text-align: center;
}

.cart-summary__note-icon { display: flex; flex-shrink: 0; }
.cart-summary__note-icon svg { width: 20px; height: 20px; }

.cart-summary__btn { width: 100%; }

/* --- Быстрый заказ (1:2990, 1220×867) --------------------------------------
   Форма общая (`template-parts/ui/lead-form.php`, вариант order), но на
   этом экране поля другие: прямоугольные 76 px с рамкой, а не пилюли
   72 px из блока CTA. Перекрываем только здесь. */

.cart-quick {
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.cart-quick__head { margin-bottom: 40px; }

.cart-quick__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.cart-quick__lead {
  margin-top: var(--space-8);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/*
 * Сетка формы (1:2994): поля по 566 с зазором 24, ниже два поля во всю
 * ширину, линия и строка «кнопка 474 + согласие 650» с зазором 32.
 * В разметке lead-form.php согласие идёт ДО кнопки, поэтому строку
 * собираем гридом с явными координатами, а не порядком в HTML.
 */
.cart-quick .lead-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-24) var(--space-32);
}

.cart-quick .lead-form > * { grid-column: 1 / -1; }

.cart-quick .lead-form::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 4;
  height: 1px;
  margin-block: var(--space-16);   /* 24 (gap) + 16 = 40 по макету */
  background: var(--color-border-soft);
}

.cart-quick .lead-form__actions {
  grid-column: 1;
  grid-row: 5;
  align-self: center;
  margin-top: 0;
}

.cart-quick .lead-form__consent {
  grid-column: 2;
  grid-row: 5;
  align-self: center;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
  opacity: 1;
}

/* Пустая строка статуса отправки в макете не заложена — пока текста нет,
   она не должна занимать ряд грида. */
.cart-quick .form-status { grid-row: 6; }
.cart-quick .form-status:empty { display: none; }

.cart-quick .field-grid { gap: var(--space-24); }
.cart-quick .field { gap: var(--space-8); }

.cart-quick .field__label {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

/* Поле `Field Box` (1:2998): 76 px, отступ 24, радиус 12, рамка 1 px.
   Селектор из трёх классов: front-cta.css грузится ПОСЛЕ этого файла и
   при равном весе перебивает и рамку, и радиус пилюли из блока CTA.
   Отступ 23 + рамка 1 = 24 по макету (обводка Figma рисуется внутрь). */
.cart-quick .lead-form .field__input {
  min-height: 76px;
  padding: 23px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

/* Поле комментария (1:3019) ровно 120 — при rows="3" браузер даёт 134. */
.cart-quick .lead-form .field__input--area {
  height: 120px;
  min-height: 120px;
  border-radius: var(--radius-md);
}

.cart-quick .lead-form .field__input:focus { border-color: var(--color-brand); }

/* Кнопка `Submit button container` (1:3023) — 474 в макете; при более
   длинной подписи растёт, поэтому min-width, а не width. */
.cart-quick .lead-form__actions .cta-btn { min-width: 474px; }

/* --- Пустая корзина: блок состояния (1:3048, 1840×500) --------------------- */

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  min-height: 500px;
  padding: 40px var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
  text-align: center;
}

.cart-empty__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-brand);
}

.cart-empty__icon svg { width: 120px; height: 120px; }

.cart-empty__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.cart-empty__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.cart-empty__lead {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* Кнопка в макете 720 (1:3054). */
.cart-empty__btn {
  width: 720px;
  max-width: 100%;
}

/* --- Пустая корзина: рекомендуемые товары (1:3055) ------------------------- */

.cart-rec { margin-top: var(--section-gap-sm); }

.cart-rec__title {
  margin-bottom: var(--space-64);
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
  text-align: center;
}

/* Лента в макете уходит за края экрана: разворачиваем её на боковые
   поля контейнера, но первую карточку держим на линии контента. */
.cart-rec__viewport {
  margin-inline: calc(var(--side-padding) * -1);
  padding-inline: var(--side-padding);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--side-padding);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.cart-rec__viewport::-webkit-scrollbar { display: none; }

.cart-rec__track {
  display: flex;
  gap: 20px;
}

/* Карточка товара — общий компонент каталога, 220.8×345.8 (нода 1:3944).
   min-width: 0 обязателен: у названия `white-space: nowrap`, и без него
   флекс-элемент раздувается до длины самого длинного названия. */
.cart-rec__track .product-card {
  flex: 0 0 220.8px;
  min-width: 0;
  scroll-snap-align: start;
}

/* Листалка (1:3067): стрелка 56 · 24 · пилюля точек · 24 · стрелка 56. */
.cart-rec__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  height: 64px;
  margin-top: var(--space-48);
}

.cart-rec__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  transition: background var(--dur-fast) var(--ease-out);
}

.cart-rec__arrow svg { width: 34px; height: 34px; }
.cart-rec__arrow:hover { background: var(--color-brand-hover); }
.cart-rec__arrow--prev svg { transform: rotate(180deg); }

/* Пилюля 143.33×43 с четырьмя кружками 14.33 — те же размеры, что
   у слайдера подразделов каталога. */
.cart-rec__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14.33px;
  padding: 14.33px 21.5px;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
}

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

.cart-rec__dot {
  width: 14.33px;
  height: 14.33px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  opacity: .3;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.cart-rec__dot.is-active {
  background: var(--color-brand);
  opacity: 1;
}

/* --- Уведомления WooCommerce ----------------------------------------------
   В макете их нет, но Woo сообщает о добавлении и обновлении товара.
   Приводим к виду светлой карточки, чтобы не выпадали из экрана. */

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  margin-bottom: var(--space-24);
  padding: var(--space-24) var(--space-32);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  list-style: none;
}

.woocommerce-cart .woocommerce-error { color: var(--color-error); }

/* --- Ниже 1920 px ----------------------------------------------------------
   Макет нарисован только под 1920, брейкпоинты приняты вёрсткой. */

/* В одну колонку панель итогов встаёт сразу под таблицей — иначе итог
   уезжает под форму заказа и его не видно. */
@media (max-width: 1500px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .cart-panel   { grid-column: 1; grid-row: 1; }
  .cart-summary { grid-column: 1; grid-row: 2; max-width: 600px; }
  .cart-quick   { grid-column: 1; grid-row: 3; }
}

@media (max-width: 1100px) {
  .cart-quick .lead-form { grid-template-columns: minmax(0, 1fr); }
  .cart-quick .lead-form__actions,
  .cart-quick .lead-form__consent { grid-column: 1 / -1; }
  .cart-quick .lead-form__actions { grid-row: 5; }
  .cart-quick .lead-form__consent { grid-row: 6; }
  .cart-quick .form-status { grid-row: 7; }
  .cart-rec__title { margin-bottom: var(--space-48); }
}

@media (max-width: 1000px) {
  /* Таблицу не ломаем на карточки: у неё шесть смысловых колонок,
     вместо этого прокручиваем её внутри панели. */
  .cart-panel { overflow-x: auto; }
  .cart-table { min-width: 860px; }
}

@media (max-width: 700px) {
  .cart-count { font-size: var(--fs-24); }
  .cart-panel,
  .cart-quick { padding: var(--space-24); }
  .cart-quick .field-grid { gap: var(--space-16); }
  .cart-quick .lead-form__actions .cta-btn { min-width: 0; width: 100%; }
  .cart-empty { padding: var(--space-32) var(--space-24); }
  .cart-empty__icon svg { width: 88px; height: 88px; }
  .cart-rec__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .woocommerce-cart .page-section { padding-bottom: var(--space-64); }
}