/* ==========================================================================
   css/pages/cart.css
   страничные стили
   ========================================================================== */
/* ===========================================================================
   Корзина /cart/ и оформление /checkout/ по макету
   design/exec-88b929db-…png. Владельцы файла — tools/gen_cart.py и
   js/modules/cart.js; общие кнопки, поля, степпер, сводка, шаги мастера и
   уведомления берутся из css/components.css и здесь не переопределяются.

   Цвета — только var(--…) из tokens.css. Превью позиции красится локальными
   переменными --cart-pv-*: силуэт рисует JS, и подставлять в разметку hex
   цвета RAL там было бы нечем (да и нельзя — правило проекта).
   =========================================================================== */

.cart {
  /* Все три ширины сняты пикселями с макета (1536) и приведены к нашим 1440
     коэффициентом 0,9375: колонка сводки 416→390, превью 256→240, колонка
     цены со степпером 148→140. */
  --aside-w: 390px;
  --media-w: 200px;   /* в макете 240; у нас колонка ýже — строка действий
                         должна остаться в одну строку, как в макете */
  --side-w: 136px;
  --pad: var(--s-4);     /* поля большой карточки: в макете 17 px при 1536 */
}

.cart .ic { width: 18px; height: 18px; flex: none; }

/* ============================== ШАПКА СТРАНИЦЫ ============================== */

/* В макете H1 стоит почти сразу под хлебными крошками (18 px до карточки),
   поэтому обычный воздух секции здесь лишний. */
.section.cart { padding-top: 0; }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-7);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.cart__steps { margin-left: auto; }

/* =================================== СЕТКА =================================== */

.cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: var(--s-6);
  align-items: start;
}
.cart__main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
/* min-width:0 у колонок грида обязателен: без него длинное название позиции
   или широкая таблица распирают колонку и ломают всю раскладку. */
.cart-aside, .cart__saved, .svc, .checkout__review { min-width: 0; }

/* ============================ БОЛЬШАЯ КАРТОЧКА ============================ */

/* В макете вся левая колонка — одна карточка: позиции, услуги и логистика
   отделены друг от друга волосяными линиями, а не воздухом между карточками.
   Поэтому разделитель живёт на секции, а не на её соседе. */
.cart__panel { overflow: hidden; }
.cart__sec { padding: var(--pad); border-top: 1px solid var(--line); }
.cart__panel > *:first-child { border-top: 0; }
/* Скрытый список позиций остаётся в DOM, поэтому «первым видимым» пустое
   состояние средствами CSS не станет — снимаем линию соседним селектором. */
.cart__list[hidden] + .cart__empty { border-top: 0; }

/* ================================= ПОЗИЦИИ ================================= */

.cart-item {
  display: grid;
  grid-template-columns: var(--media-w) minmax(0, 1fr) var(--side-w);
  gap: var(--s-5);
  padding: var(--pad);
  border-top: 1px solid var(--line);
}
.cart-item:first-child { border-top: 0; }

/* --- превью --- */
.cart-item__media {
  position: relative;
  aspect-ratio: 3 / 2;          /* макет: 256 × 168 */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-2);
  display: block;
}
/* Только прямые потомки и картинка внутри <picture>: в плашке с длиной тоже
   svg, и на 100 % высоты она растянулась бы на всё превью. object-fit: cover
   обязателен — кадры фотографий 3:2, но плашка на узких экранах становится
   квадратной, и без него снимок сплющило бы. */
.cart-item__media > img,
.cart-item__media > svg,
.cart-item__media > picture,
.cart-item__media > picture > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Затемнение под плашкой с длиной — только на фотографиях. У силуэта небо
   ровное и светлое, там подложка не нужна и только пачкала бы рисунок.
   ::after — последний ребёнок, поэтому плашке ниже нужен z-index. */
.cart-item__media--photo::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--navy-900) 62%, transparent), transparent);
  pointer-events: none;
}
.cart-item__len {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-xs);
  background: var(--navy-900); color: var(--white);
  font-size: var(--fs-xs); font-weight: 800;
}
.cart-item__len svg { width: 13px; height: 13px; flex: none; }

/* Палитра силуэта. Держим в переменных: JS рисует превью классами, и других
   способов покрасить его, не заводя hex в разметку, нет. */
.cart-pv { --cart-pv-sky: var(--bg-2); --cart-pv-ink: var(--navy); }
.cart-pv__sky { fill: var(--cart-pv-sky); }
.cart-pv__ground { fill: var(--line); }
.cart-pv__fill { fill: var(--cart-pv-ink); opacity: .82; }
.cart-pv__post { fill: var(--cart-pv-ink); }
.cart-pv__line { stroke: var(--cart-pv-ink); stroke-width: 1.2; opacity: .5; }
.cart-pv__base { stroke: var(--muted-2); stroke-width: 1.6; }

/* --- текст позиции --- */
.cart-item__body { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cart-item__title { font-size: 18px; font-weight: 800; line-height: 1.3; }
.cart-item__title a { color: var(--ink); }
.cart-item__title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.cart-item__params { display: flex; flex-wrap: wrap; gap: 6px var(--s-5); font-size: var(--fs-sm); }
.cart-item__params > div { display: flex; gap: 6px; min-width: 0; }
.cart-item__params dt { color: var(--muted); }
.cart-item__params dt::after { content: ':'; }
.cart-item__params dd { font-weight: 700; color: var(--ink-2); }

.cart-item__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* «Проект сохранён» из макета: светло-зелёная плашка, а не сплошная тёмная.
   Номер проекта из неё не убираем — по нему менеджер открывает ту же смету,
   и в блоке без JS мы просим назвать именно его. */
.cart-item__saved {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-xs);
  background: var(--sage-50); border: 1px solid var(--sage-line);
  color: var(--sage); font-size: var(--fs-xs); font-weight: 700;
}

/* Пометка о пересчёте — единственное место, где корзина спорит с ожиданием
   посетителя, поэтому она заметная, но не красная: цена изменилась законно. */
.cart-item__note { align-items: center; flex-wrap: wrap; }
.cart-item__note s { opacity: .75; }
.cart-item__note b { white-space: nowrap; }
.cart-item__note .btn--link { margin-left: auto; color: inherit; }

/* Линия над строкой действий — из макета: она отделяет «что заказано» от
   «что с этим можно сделать» и не заходит под колонку с ценой. */
.cart-item__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-4); margin-top: auto;
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.cart-item__act {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--navy);
}
.cart-item__act:hover { color: var(--orange); }
.cart-item__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.cart-item__icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius-xs);
  color: var(--muted-2); line-height: 1;
}
.cart-item__icon svg { width: 20px; height: 20px; }
.cart-item__icon:hover { color: var(--navy); border-color: var(--line-2); background: var(--bg); }
.cart-item__del:hover { color: var(--danger); border-color: var(--line-2); background: var(--danger-50); }

/* --- цена и количество --- */
.cart-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); text-align: right; }
.cart-item__price { font-size: 21px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Степпер в макете — 143 px при 1536, то есть 134 у нас: две кнопки по 38
   и середина под «56,8 м». */
.cart-item__stepper { align-items: center; }
.cart-item__stepper input { width: 46px; padding-right: 0; }
.stepper__unit { display: grid; place-items: center; padding-right: 9px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.cart-item__unit { font-size: var(--fs-xs); }
/* «убрать один» рядом с числом комплектов. Ссылкой, а не кнопкой на вид:
   действие мелкое и стоит внутри подписи, но цель нажатия держим полной —
   вертикальные отступы дают ей высоту 24 px при 12-пиксельном тексте. */
.cart-item__kit-less {
  margin-left: 6px; padding: 5px 4px; border: 0; background: none;
  font: inherit; color: var(--ink-2); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.cart-item__kit-less:hover { color: var(--danger); }

/* Предупреждения расчёта в строке позиции: узкие, чтобы не спорить с ценой. */
.cart-item__warns { display: flex; flex-direction: column; gap: var(--s-2); }
.cart-item__warns .note { padding: 8px 10px; font-size: var(--fs-xs); }

/* ====================== ФОКУС ПОСЛЕ ПОДМЕНЫ РАЗМЕТКИ ====================== */

/* Заголовки, на которые cart.js переводит фокус: смена шага, ошибка загрузки
   прайса, панель «Заказ принят». Фокусируются только программно (tabindex=-1),
   поэтому рамку показываем на :focus, а не на :focus-visible: браузеры
   считают такой фокус «не с клавиатуры» и рамку сами не рисуют — человек
   переставал понимать, куда его перенесло. */
.cart [data-focus-target]:focus {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ====================== ПРАЙС НЕ ЗАГРУЗИЛСЯ ====================== */

.cart__fail { align-items: flex-start; text-align: left; gap: var(--s-3); }
.cart__fail p { color: var(--ink-2); max-width: 560px; }
.cart__fail-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.cart__fail .state__ic { color: var(--danger); }

/* =============================== ПУСТАЯ КОРЗИНА =============================== */

.cart__empty { align-items: flex-start; text-align: left; gap: var(--s-3); }
.cart__empty p { color: var(--ink-2); max-width: 560px; }
.cart__empty-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* ============================== ОТЛОЖЕНО НА ПОТОМ ============================== */

.cart__saved-title { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.cart__saved-list { display: flex; flex-direction: column; gap: var(--s-2); }
.cart-saved__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center; gap: var(--s-3);
  padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cart-saved__name { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.cart-saved__name small { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); }
.cart-saved__price { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ============================ */

.svc__head { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.svc__head span { font-weight: 700; color: var(--muted); }
/* Три карточки в ряд, как в макете. auto-fill, а не repeat(3): услуг у нас
   четыре, и на узком экране ряд должен сам разложиться, а не сжаться. */
.svc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
.svc__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: var(--s-4);
  padding: var(--s-4); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--dur), background var(--dur);
}
.svc__card:hover { border-color: var(--line-2); }
.svc__card.is-on { border-color: var(--gold); background: var(--gold-100); }
.svc__card:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-100); }
.svc__ic {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-2); color: var(--navy);
}
/* Бесплатная услуга — единственная тёплая иконка ряда: в макете так помечено
   именно «это ничего не стоит». */
.svc__ic--free { background: var(--gold-100); color: var(--orange); }
.svc__ic svg { width: 24px; height: 24px; }
.svc__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc__title { font-weight: 800; font-size: var(--fs-base); }
.svc__note { font-size: var(--fs-sm); color: var(--muted); }
.svc__price { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc__price b { font-size: var(--fs-base); }
.svc__box { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.svc__foot { font-size: var(--fs-sm); margin-top: var(--s-4); }

/* ============================== ДОСТАВКА И МОНТАЖ ============================== */

.logi__box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-4); }
/* Пропорции колонок из макета: адрес и монтаж шире, чем дата доставки. */
.logi__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: var(--s-5); }
.logi__col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.logi__col--sep { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.logi__head { font-size: var(--fs-h3); }
/* Подписи полей в этом блоке — обычные слова, а не капслок из общей формы:
   в макете это подпись к строке адреса, а не заголовок поля анкеты. */
.logi .field__label {
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--muted);
}
.logi__note {
  margin-top: var(--s-4);
  background: var(--bg); border-color: var(--line); color: var(--ink-2);
  align-items: center;
}
.logi__note svg { color: var(--muted); }

/* ================================ СВОДКА ЗАКАЗА ================================ */

.cart-aside__box {
  position: sticky; top: calc(var(--header-h) + var(--s-4));
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5);   /* макет: 21 px при 1536 */
}
.cart-aside__title { font-size: var(--fs-h3); }

/* Строки сметы с точечным выносом, как в макете: взгляд не теряет строку
   между длинным названием группы и суммой. Точки — псевдоэлемент строки,
   а не текст: скринридер их не читает. */
.cart-aside .summary { gap: var(--s-2); }
.cart-aside .summary__row { align-items: baseline; gap: 0; }
.cart-aside .summary__row > span { order: 0; color: var(--muted); }
.cart-aside .summary__row::after {
  content: ''; order: 1; flex: 1 1 auto; min-width: var(--s-4);
  align-self: center; margin: 0 var(--s-2);
  border-bottom: 1px dotted var(--line-2);
}
.cart-aside .summary__row > b { order: 2; white-space: nowrap; }
.cart-aside .summary__row--discount, .cart-aside .summary__row--discount b { color: var(--sage); }
.cart-aside .summary__total { padding-top: var(--s-5); }
.cart-aside .summary__total b { font-size: 24px; }   /* макет: 25 px при 1536 */
.cart-aside__items { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.cart-aside__items:empty { display: none; }
.cart-aside__item { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.cart-aside__item span { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.cart-aside__item small { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); }
.cart-aside__item b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Плашка про фиксацию цены: подложка золотая, но текст — обычный тёмный.
   Коричневый «золотой» текст на длинном абзаце читается тяжело, а в макете
   цветом выделена только иконка. */
.cart-aside__fix { align-items: flex-start; color: var(--ink-2); }
.cart-aside__fix svg { color: var(--orange); }
.cart-aside__go { margin-top: var(--s-1); }
/* Ссылка «Перейти к оформлению» при пустой корзине никуда не ведёт, но и не
   исчезает: пропадающая кнопка выглядит как поломка страницы. */
.cart-aside__go.is-disabled { opacity: .5; pointer-events: none; }
.cart-aside__safe { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }

/* ============================== ОФОРМЛЕНИЕ ЗАКАЗА ============================== */

.checkout { display: flex; flex-direction: column; gap: var(--s-5); }
.checkout__panel { border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-5); }
.checkout__legend {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-h3); font-weight: 800; padding: 0;
}
.checkout__legend span {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--white); background: var(--navy); padding: 4px 9px; border-radius: var(--radius-pill);
}
.checkout__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.checkout__wide { grid-column: 1 / -1; }
.checkout__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }

.checkout__lines { display: flex; flex-direction: column; gap: var(--s-3); }
.checkout__line {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px dashed var(--line);
}
.checkout__line span { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.checkout__line small { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); }
.checkout__line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout__services { font-size: var(--fs-sm); margin-top: var(--s-3); }

.checkout__consents { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-sm); }
/* Фраза про фиксацию цены после замера обязательна перед финальной кнопкой:
   человек должен прочитать её до отправки, а не найти в подвале. */
.checkout__fix {
  padding: var(--s-3) var(--s-4); border-left: 3px solid var(--gold);
  background: var(--gold-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
}
.checkout__err { align-items: flex-start; }
.checkout__done { display: flex; flex-direction: column; gap: var(--s-4); }
.checkout__done h2 { font-size: var(--fs-h2); }

/* --- способ оплаты --- */
.pay { display: flex; flex-direction: column; gap: var(--s-2); }
.pay__head { font-size: var(--fs-base); font-weight: 800; margin-bottom: var(--s-1); }
.pay__opt {
  display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer;
  padding: var(--s-4); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--dur), background var(--dur);
}
.pay__opt:hover { border-color: var(--line-2); }
.pay__opt:has(input:checked) { border-color: var(--gold); background: var(--gold-100); }
.pay__opt:focus-within { box-shadow: 0 0 0 3px var(--gold-100); }
.pay__opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); flex: none; }
.pay__text { display: flex; flex-direction: column; gap: 2px; }
.pay__text b { font-size: var(--fs-base); }
.pay__text span { font-size: var(--fs-sm); color: var(--muted); }
.pay__note { font-size: var(--fs-xs); margin-top: var(--s-1); }

/* ============================== ДОВЕРИЕ И БЕЗ JS ============================== */

/* Полоса гарантий: в макете она прижата к карточке (14 px), иконки тёмные,
   а колонки разделены волосяными линиями. */
.trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: var(--s-3); padding: var(--s-4) 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.trust__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5); border-left: 1px solid var(--line);
}
.trust__item:first-child { border-left: 0; }
.trust__item span { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--muted); }
.trust__item b { font-size: var(--fs-base); color: var(--ink); }
.trust__ic { width: 26px; height: 26px; flex: none; color: var(--navy); }

.cart-noscript { display: flex; flex-direction: column; gap: var(--s-4); }
.cart-noscript .form { max-width: 460px; }

/* Кнопка «Вернуть» внутри тоста: отмена удаления должна быть под рукой
   ровно столько, сколько живёт сам тост. */
.toast__act {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--gold); text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================== АДАПТИВ ================================== */

@media (max-width: 1180px) {
  .cart { --aside-w: 340px; --media-w: 200px; --side-w: 132px; }
  .logi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logi__col--sep { padding-left: 0; border-left: 0; }
}

@media (max-width: 1000px) {
  /* Одна колонка: сначала позиции, потом сводка. Порядок совпадает с
     разметкой, переставлять ничего не нужно. */
  .cart__layout { grid-template-columns: minmax(0, 1fr); }
  .cart-aside__box { position: static; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }
  .trust__item:nth-child(3) { border-left: 0; }
}

@media (max-width: 760px) {
  .cart__head { flex-direction: column; align-items: stretch; }
  .cart__steps { margin-left: 0; }
  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .logi__grid { grid-template-columns: minmax(0, 1fr); }
  .checkout__grid { grid-template-columns: minmax(0, 1fr); }
  /* Превью уходит наверх, цена — под описание: в три колонки на 360 px
     обрезаются и название, и сумма одновременно. */
  .cart-item { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); }
  .cart-item__media { aspect-ratio: 1 / 1; }
  .cart-item__side {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; flex-wrap: wrap; text-align: left;
  }
  .cart-item__unit { width: 100%; }
  .cart-item__params { gap: 4px var(--s-4); }
  .checkout__nav .btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust__item { border-left: 0; }
  .cart-saved__item { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-2); }
  .cart-item__actions { gap: var(--s-2) var(--s-4); }
}

/* Поля даты. Нативный date-инпут в Chrome рисует «дд.мм.гггг» серым и жмёт
   иконку календаря к правому краю — рядом с остальными полями он выглядел
   чужим. Выравниваем по общей высоте, подсвечиваем иконку и даём ей курсор:
   заменить сам виджет нельзя, да и не нужно — родной календарь удобнее
   самодельного и работает с клавиатуры. */
.logi input[type="date"], .checkout input[type="date"] {
  min-height: 46px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.logi input[type="date"]:invalid, .checkout input[type="date"]:invalid { color: var(--muted-2); }
.logi input[type="date"]::-webkit-calendar-picker-indicator,
.checkout input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  padding: 4px;
  border-radius: var(--radius-xs);
}
.logi input[type="date"]::-webkit-calendar-picker-indicator:hover,
.checkout input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--bg-2); }