/* checkout.css — чекаут «Сказкина»: корзина + доставка + оплата (+ личный кабинет).
   Дизайн-система «Экслибрис» (2026-07, фаза 3). Цвета/шрифты — ТОЛЬКО токены --skz-*
   из theme.css; палитра: бумага #F7F1E4, карточки #FCF8EE, форзац #EFE7D2, чернила
   #232E47, латунь #A67C2E / текст-золото #6E5316, синяя CTA #24406E, линии #DCD1B8.
   Эталон внешнего вида: layouts-web/checkout.html. Имена классов-хуков (на них висит
   JS оплаты/доставки) НЕ переименовывать — см. checkout*.js / pay.js. */

.checkout-body {
  margin: 0;
  background: var(--skz-bg);
  color: var(--skz-text-light);
  font-family: var(--skz-font-sans);
  color-scheme: light;                 /* светлая ДС — нативные контролы/скроллбар */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.checkout-body .site-footer { margin-top: auto; }

/* HTML-атрибут hidden должен побеждать любой display */
[hidden] { display: none !important; }

/* Видимый фокус с клавиатуры для кнопок/ссылок (поля/селекты — своя рамка+кольцо
   ниже; скрытые радио опций — через :has(input:focus-visible) на карточке). */
.checkout-body a:focus-visible,
.checkout-body button:focus-visible {
  outline: 2px solid var(--skz-coral);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Визуально скрытый заголовок (для порядка h1–h6 без изменения макета) */
.ck-vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Контекстный топбар чекаута (логотип + «назад») ─────────────────────────
   Сайт-шапка (партиал {{SITE_HEADER_HTML}}) остаётся сверху; это — тонкая
   контекстная полоса шага с возвратом в предыдущий экран. */
.ck-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--skz-line);
  background: var(--skz-bg);
}
.ck-logo { display: inline-flex; text-decoration: none; }
.ck-logo img { display: block; height: 40px; width: auto; }
.ck-back {
  color: var(--skz-gold-hover);
  text-decoration: none;
  font-family: var(--skz-font-sans);
  font-weight: 500; font-size: .9rem;
  white-space: nowrap;
}
.ck-back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Стили .flow-steps (шаги заказа) — общие, живут в styles.css. Здесь не дублируются. */

/* ─── Каркас страниц ─────────────────────────────────────────────────────── */
.ck-main {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 360px;
  max-width: 1120px;
  margin: 20px auto 48px;
  padding: 0 24px;
}
.ck-main--single { grid-template-columns: minmax(0, 720px); justify-content: center; }
@media (max-width: 880px) {
  .ck-main { grid-template-columns: 1fr; }
}

/* ─── Карточка-паспарту ─────────────────────────────────────────────────────
   Кремовая бумага, тонкая рамка-линия, мягкая «бумажная» тень, радиус 8. */
.ck-card {
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: var(--skz-shadow-card);
}
.ck-card--payer {
  position: sticky; top: 16px; align-self: start;
  height: max-content;
}

/* ─── Заголовки ─────────────────────────────────────────────────────────────
   Главный H1 — антиква Playfair Display; подзаголовки-секции — каталожная строка
   (Golos caps, латунь-текст). */
.ck-title {
  font-family: var(--skz-font-serif);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--skz-chocolate);
  text-wrap: balance;
}
.ck-side__title {
  font-family: var(--skz-font-serif);
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 0 6px;
  color: var(--skz-chocolate);
}
/* Каталожная строка — кикер секций. Golos, капитель, латунь-текст (AA). */
.ck-section__title,
.pay-summary__block-title {
  margin: 0 0 12px;
  font-family: var(--skz-font-sans);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--skz-gold-hover);
}
.ck-section__subtitle {
  margin: 18px 0 8px;
  font-family: var(--skz-font-sans);
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--skz-gray-warm);
}
.ck-side__sub {
  margin: -2px 0 16px;
  color: var(--skz-gray-warm);
  font-size: .85rem; line-height: 1.45;
}

/* ─── Блок книги (состав) ──────────────────────────────────────────────────── */
.ck-section { margin: 18px 0; }
.ck-book {
  display: flex; gap: 16px;
  padding: 14px;
  background: var(--skz-sand);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  margin-bottom: 20px;
}
.ck-book__cover {
  width: 88px; height: 88px;
  object-fit: cover;
  border: 1px solid var(--skz-line);
  border-radius: 2px;                 /* книга — прямоугольный объект (r2) */
  flex-shrink: 0;
}
.ck-book__info { flex: 1; min-width: 0; }
.ck-book__type {
  margin: 0 0 3px;
  font-size: .7rem; color: var(--skz-gray-warm);
  text-transform: uppercase; letter-spacing: .1em;
}
.ck-book__title {
  margin: 0 0 4px;
  font-family: var(--skz-font-serif);
  font-size: 1.05rem; font-weight: 800;
  color: var(--skz-chocolate);
}
.ck-book__price {
  margin: 4px 0 0;
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.1rem;
  color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Опция-радио (обложка книги) ──────────────────────────────────────────── */
.ck-opt {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-areas: "ind main price" "ind sub price";
  gap: 4px 14px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  background: var(--skz-surface);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ck-opt::before {
  content: "";
  grid-area: ind;
  width: 20px; height: 20px;
  border: 2px solid var(--skz-line-deep);
  border-radius: 50%;
  align-self: center;
  transition: border-color .15s, background .15s;
}
.ck-opt:hover { border-color: var(--skz-light-tan); }
.ck-opt:has(input:checked) {
  border-color: var(--skz-gold);
  background: var(--skz-sand);
}
.ck-opt:has(input:checked)::before {
  border-color: var(--skz-coral);
  background: radial-gradient(circle, var(--skz-coral) 0 5px, var(--skz-surface) 6px 100%);
}
/* Нативный радио скрыт визуально, но остаётся в потоке для клавиатуры/скринридера */
.ck-opt input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ck-opt__main { grid-area: main; font-weight: 600; font-size: .95rem; color: var(--skz-chocolate); }
.ck-opt__sub { grid-area: sub; font-size: .82rem; color: var(--skz-gray-warm); }
.ck-opt__price {
  grid-area: price; align-self: center;
  font-weight: 600; color: var(--skz-coral);
  white-space: nowrap;
}
/* Фокус с клавиатуры — рамка-паспарту по всей опции (только клавиатура) */
.ck-opt:has(input:focus-visible) { outline: 2px solid var(--skz-coral); outline-offset: 2px; }

/* ─── Дополнение (чекбокс) ─────────────────────────────────────────────────── */
.ck-extra {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-areas: "ind main price" "ind sub price";
  gap: 4px 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  background: var(--skz-surface);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ck-extra::before {
  content: "";
  grid-area: ind;
  width: 20px; height: 20px;
  border: 2px solid var(--skz-line-deep);
  border-radius: 4px;
  align-self: center;
  background: var(--skz-surface);
  transition: border-color .15s, background .15s;
}
.ck-extra:hover { border-color: var(--skz-light-tan); }
.ck-extra:has(input:checked) {
  border-color: var(--skz-gold);
  background: var(--skz-sand);
}
.ck-extra:has(input:checked)::before {
  border-color: var(--skz-coral);
  background: var(--skz-coral) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' fill='none' stroke='%23FCF8EE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
}
.ck-extra input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ck-extra__main { grid-area: main; font-weight: 600; font-size: .92rem; color: var(--skz-chocolate); }
.ck-extra__sub { grid-area: sub; font-size: .78rem; color: var(--skz-gray-warm); line-height: 1.4; }
.ck-extra__price {
  grid-area: price; align-self: center;
  font-weight: 600; color: var(--skz-coral);
  white-space: nowrap;
}
.ck-extra:has(input:focus-visible) { outline: 2px solid var(--skz-coral); outline-offset: 2px; }

/* ─── Поля формы (рецепт ДС) ────────────────────────────────────────────────
   Метка сверху (видимая, не placeholder), поле — кремовое с линией-рамкой,
   фокус — латунная рамка + мягкое кольцо. */
.ck-field { display: block; margin-bottom: 14px; }
.ck-field__label {
  display: block;
  font-family: var(--skz-font-sans);
  font-weight: 500; font-size: .85rem;
  margin-bottom: 6px;
  color: var(--skz-chocolate);
}
.ck-field__label em { color: var(--skz-gold-hover); font-style: normal; }
.ck-field input,
.ck-field textarea,
.ck-field select {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  font-family: var(--skz-font-sans); font-size: .95rem;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  transition: border-color .15s, box-shadow .15s;
}
.ck-field input::placeholder,
.ck-field textarea::placeholder { color: var(--skz-gray-warm); }
.ck-field input:focus,
.ck-field textarea:focus,
.ck-field select:focus {
  border-color: var(--skz-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 22%, transparent);
  /* Прозрачный контур — видим в forced-colors/high-contrast; латунная рамка+кольцо
     остаются видимым индикатором фокуса для обычных пользователей. */
  outline: 2px solid transparent; outline-offset: 2px;
}
.ck-field textarea { display: block; }

/* Покупатель + Получатель на доставке: десктоп — 2 колонки, мобайл — стопкой. */
.ck-people-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
  align-items: stretch;
}
.ck-people-row > section {
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.ck-people-row .ck-section__title { margin: 0 0 12px; }
.ck-people-row .ck-recipient__name,
.ck-people-row .ck-recipient__contact,
.ck-people-row .ck-receiver__toggle,
.ck-people-row .ck-receiver__hint {
  margin: 0 0 6px; padding: 0;
  font-size: .9rem; line-height: 1.4; min-height: 1.4em;
}
.ck-people-row .ck-recipient__name { font-weight: 600; }
.ck-people-row .ck-receiver__toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
@media (max-width: 760px) {
  .ck-people-row { grid-template-columns: 1fr; gap: 0; }
}

/* Блок «Получатель» (доставка): чекбокс раскрывает поля ФИО+телефон. */
.ck-receiver { padding-bottom: 12px; }
.ck-receiver__toggle input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--skz-coral);
}
.ck-receiver__hint { color: var(--skz-gray-warm); }
.ck-receiver__fields {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--skz-sand);
  border-radius: 8px;
  border: 1px dashed var(--skz-line-deep);
}

/* Покупатель (read-only сводка на доставке) */
.ck-recipient { margin-bottom: 20px; }
.ck-recipient__name { margin: 0; font-weight: 600; font-size: 1rem; color: var(--skz-chocolate); }
.ck-recipient__contact { margin: 2px 0; color: var(--skz-gray-warm); font-size: .9rem; }

/* ─── Промокод (правая колонка корзины) ─────────────────────────────────────── */
.ck-cart-promo { display: flex; gap: 8px; margin-top: 14px; }
.ck-cart-promo input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  font-family: var(--skz-font-sans); font-size: .9rem;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  text-transform: uppercase; letter-spacing: .08em;
  transition: border-color .15s, box-shadow .15s;
}
.ck-cart-promo input::placeholder { color: var(--skz-gray-warm); }
.ck-cart-promo input:focus {
  border-color: var(--skz-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
.ck-cart-promo input:disabled { background: var(--skz-sand); }
.ck-cart-promo input.is-applied { border-color: var(--skz-success); background: color-mix(in srgb, var(--skz-success) 8%, var(--skz-surface)); }
.ck-promo-msg { margin: 7px 0 0; font-size: .8rem; line-height: 1.35; }
.ck-promo-msg--ok  { color: var(--skz-success); font-weight: 600; }
.ck-promo-msg--err { color: var(--skz-warning); font-weight: 500; }

/* ─── Итоги / цена ──────────────────────────────────────────────────────────
   Строка цены: линии сверху/снизу, цифра — антиква Playfair Display. */
.ck-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  margin: 12px 0 4px;
  border-top: 1px solid var(--skz-line);
}
.ck-total span { color: var(--skz-gray-warm); font-size: .95rem; }
.ck-total strong {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.5rem;
  color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
}
.ck-total-block {
  border-top: 1px solid var(--skz-line);
  padding: 16px 0;
  margin: 22px 0 12px;
}
.ck-total-row {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  font-size: .92rem;
}
.ck-total-row span { color: var(--skz-gray-warm); }
.ck-total-row strong { font-variant-numeric: lining-nums tabular-nums; }
.ck-total-row--discount { color: var(--skz-success); }
.ck-total-row--discount span,
.ck-total-row--discount strong { color: var(--skz-success); }
.ck-total-row--final {
  border-top: 1px solid var(--skz-line);
  margin-top: 10px; padding-top: 14px;
  align-items: baseline;
}
.ck-total-row--final span { color: var(--skz-chocolate); font-weight: 500; }
.ck-total-row--final strong {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.4rem;
  color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
}
.ck-print-note {
  margin: 10px 2px 0;
  font-size: .8rem; color: var(--skz-gray-warm);
  font-style: italic; line-height: 1.45;
}
.ck-hint {
  margin: 6px 0 14px;
  font-size: .85rem; color: var(--skz-gray-warm);
  font-style: italic;
}

/* ─── Кнопки ────────────────────────────────────────────────────────────────
   Основная (CTA) — синяя, кремовый текст, r6, hover — темнее + латунная кромка.
   Пилюля (secondary) — кремовая с линией, hover — латунная рамка. */
.ck-cta {
  width: 100%; padding: 15px 24px;
  background: var(--skz-coral); color: var(--skz-text-on-primary);
  border: 0; border-radius: 6px;
  font-family: var(--skz-font-sans); font-weight: 600; font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--skz-shadow-cta);
  transition: background .15s, box-shadow .15s, transform .12s;
}
.ck-cta:hover:not(:disabled) { background: var(--skz-coral-hover); box-shadow: inset 0 0 0 1px var(--skz-light-tan); }
.ck-cta:active:not(:disabled) { transform: scale(.99); }
.ck-cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.ck-pill {
  padding: 8px 16px;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--skz-font-sans); font-size: .84rem; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.ck-pill:hover:not(:disabled) { border-color: var(--skz-light-tan); }
.ck-pill:disabled { opacity: .5; cursor: not-allowed; }

/* Кнопка «Перейти к оплате» на доставке (id ckGoToPay), класс ck-speedpay__fallback. */
.ck-speedpay__fallback {
  width: 100%; padding: 15px 24px;
  background: var(--skz-coral); color: var(--skz-text-on-primary);
  border: 0; border-radius: 6px;
  font-family: var(--skz-font-sans); font-size: 1rem; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--skz-shadow-cta);
  transition: background .15s, box-shadow .15s, transform .12s;
}
.ck-speedpay__fallback:hover:not(:disabled) { background: var(--skz-coral-hover); box-shadow: inset 0 0 0 1px var(--skz-light-tan); }
.ck-speedpay__fallback:active:not(:disabled) { transform: scale(.99); }
.ck-speedpay__fallback:disabled { background: var(--skz-line-deep); cursor: not-allowed; box-shadow: none; }
/* ─── Ошибка формы (inline) ─────────────────────────────────────────────────── */
.ck-error {
  background: var(--skz-surface);
  color: var(--skz-warning);
  border: 1px solid var(--skz-warning);
  padding: 10px 14px; border-radius: 6px;
  font-size: .9rem; font-weight: 500; margin: 12px 0;
}

/* ─── Город: автодополнение ─────────────────────────────────────────────────── */
.ck-city { position: relative; }
.ck-city input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  font-family: var(--skz-font-sans); font-size: .95rem;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  transition: border-color .15s, box-shadow .15s;
}
.ck-city input::placeholder { color: var(--skz-gray-warm); }
.ck-city input:focus {
  border-color: var(--skz-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
.ck-city__dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-top: 0; border-radius: 0 0 6px 6px;
  max-height: 280px; overflow-y: auto;
  z-index: 10;
  box-shadow: var(--skz-shadow-card);
}
.ck-city__item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--skz-line);
}
.ck-city__item:hover { background: var(--skz-sand); }
.ck-city__item:last-child { border-bottom: 0; }
.ck-city__item-name { display: block; font-weight: 600; color: var(--skz-chocolate); }
.ck-city__item-region {
  display: block; margin-top: 2px;
  font-size: .82rem; color: var(--skz-gray-warm);
}
.ck-courier-suggest { z-index: 5; }
.ck-city-selected {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--skz-sand);
  border: 1px solid var(--skz-line);
  border-radius: 6px;
}
.ck-city-selected strong { font-weight: 600; }

/* Страна + город — строка с фиксированной шириной селектора */
.ck-city-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: stretch;
}
.ck-country {
  appearance: none; -webkit-appearance: none;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  padding: 11px 40px 11px 14px;
  font-family: var(--skz-font-sans); font-size: .95rem;
  color: var(--skz-chocolate);
  cursor: pointer;
  /* Кастомная латунная шеврон-стрелка (не впритык к краю) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23A67C2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color .15s, box-shadow .15s;
}
.ck-country:focus {
  border-color: var(--skz-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
@media (max-width: 600px) {
  .ck-city-row { grid-template-columns: 1fr; }
}

/* ─── Табы (ПВЗ / Курьер) ───────────────────────────────────────────────────
   Активный — форзац-фон + латунная рамка + «блинт»-кромка inset. */
.ck-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ck-tab {
  flex: 1; padding: 10px 12px;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  font-family: var(--skz-font-sans); font-size: .9rem; font-weight: 500;
  color: var(--skz-chocolate);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ck-tab:hover { border-color: var(--skz-light-tan); }
.ck-tab--active {
  background: var(--skz-sand);
  border-color: var(--skz-gold);
  box-shadow: inset 0 0 0 1px var(--skz-light-tan);
  color: var(--skz-gold-hover);
  font-weight: 600;
}

/* ─── Список ПВЗ + фильтр ────────────────────────────────────────────────────── */
.ck-pvz-filter {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  margin-bottom: 12px;
  font-family: var(--skz-font-sans); font-size: .9rem;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  transition: border-color .15s, box-shadow .15s;
}
.ck-pvz-filter::placeholder { color: var(--skz-gray-warm); }
.ck-pvz-filter:focus {
  border-color: var(--skz-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
.ck-pvz-loading { color: var(--skz-gray-warm); font-size: .88rem; font-style: italic; }
.ck-pvz-list {
  max-height: 360px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.ck-pvz-item {
  padding: 12px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  background: var(--skz-surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ck-pvz-item:hover { border-color: var(--skz-light-tan); background: var(--skz-sand); }
.ck-pvz-item--selected {
  border-color: var(--skz-gold);
  background: var(--skz-sand);
  box-shadow: inset 0 0 0 1px var(--skz-light-tan);
}
.ck-pvz-item__name { font-weight: 600; font-size: .92rem; color: var(--skz-chocolate); }
.ck-pvz-item__addr { font-size: .82rem; color: var(--skz-gray-warm); margin-top: 2px; }
.ck-pvz-item__metro { font-size: .78rem; color: var(--skz-gray-warm); margin-top: 4px; }
.ck-pvz-item__time { font-size: .78rem; color: var(--skz-gray-warm); margin-top: 2px; }

/* Баннер «Выбран пункт выдачи» — над списком ПВЗ (успех) */
.ck-pvz-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  margin: 0 0 14px;
  background: color-mix(in srgb, var(--skz-success) 10%, var(--skz-surface));
  border: 1px solid var(--skz-success);
  border-radius: 6px;
  color: var(--skz-chocolate);            /* текст — чернила (AA); «успех» несут галочка+рамка+тон */
}
.ck-pvz-banner svg { stroke: var(--skz-success); flex: none; }
.ck-pvz-banner strong { color: var(--skz-chocolate); font-weight: 700; }
.ck-pvz-banner__addr { font-size: .85rem; color: var(--skz-gray-warm); margin-top: 2px; }

/* Карта Яндекс с маркерами ПВЗ */
.ck-map {
  width: 100%; height: 340px;
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 14px;
  background: var(--skz-sand);
}
.ck-map:empty::before {
  content: "Выберите город — появится карта с пунктами выдачи";
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: var(--skz-gray-warm);
  font-style: italic; font-size: .9rem;
  text-align: center; padding: 0 16px;
}

/* ─── Курьер: адрес + детали ─────────────────────────────────────────────────── */
.ck-address-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
}
.ck-field--street, .ck-field--house { margin: 0; }
@media (max-width: 600px) {
  .ck-address-row { grid-template-columns: 1fr 100px; }
}
.ck-courier-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ck-field--inline { margin: 0; }
.ck-courier-extra.ck-courier-extra--hidden { display: none; }
.ck-private-house {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0;
  cursor: pointer;
  font-size: .92rem;
  color: var(--skz-chocolate);
}
.ck-private-house input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--skz-coral); flex: none; }

/* ─── Тарифы СДЭК (radio-строки) ─────────────────────────────────────────────── */
.ck-tariff-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ck-tariff-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  cursor: pointer;
  background: var(--skz-surface);
  transition: border-color .15s, background .15s;
}
.ck-tariff-item:hover { border-color: var(--skz-light-tan); }
.ck-tariff-item--selected {
  border-color: var(--skz-gold);
  background: var(--skz-sand);
  box-shadow: inset 0 0 0 1px var(--skz-light-tan);
}
.ck-tariff-item__radio {
  width: 18px; height: 18px;
  border: 2px solid var(--skz-line-deep);
  border-radius: 50%;
  position: relative;
}
.ck-tariff-item--selected .ck-tariff-item__radio { border-color: var(--skz-coral); }
.ck-tariff-item--selected .ck-tariff-item__radio::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--skz-coral); border-radius: 50%;
}
.ck-tariff-item__label { font-weight: 600; color: var(--skz-chocolate); }
.ck-tariff-item__date { font-size: .82rem; color: var(--skz-gray-warm); margin-top: 2px; }
.ck-tariff-item__note { font-size: .75rem; color: var(--skz-gray-warm); margin-top: 1px; font-style: italic; }
.ck-tariff-item__price {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.05rem;
  color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Страница оплаты (pay.html) — 2 колонки: сводка + способы
   ═══════════════════════════════════════════════════════════════════════════ */
.pay-main {
  max-width: 1120px; margin: 20px auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .pay-main { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; }
}
.pay-summary, .pay-methods {
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: var(--skz-shadow-card);
}
.pay-summary__order-id {
  font-family: var(--skz-font-sans);
  font-size: .72rem;
  color: var(--skz-gold-hover);
  margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .14em;
}
.pay-summary__order-id strong {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1rem;
  color: var(--skz-chocolate);
  text-transform: none; letter-spacing: 0;
}
.pay-summary__title {
  margin: 0 0 16px;
  font-family: var(--skz-font-serif);
  font-size: 1.4rem; font-weight: 800;
  color: var(--skz-chocolate);
  text-wrap: balance;
}
.pay-summary__block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--skz-line);
}
.pay-summary__block-body { font-size: .92rem; line-height: 1.5; color: var(--skz-chocolate); }
.pay-summary__block-body strong { font-weight: 600; }
.pay-summary__muted { color: var(--skz-gray-warm); font-size: .85rem; }
.pay-summary__addr { margin-top: 4px; font-size: .9rem; line-height: 1.5; }
.pay-summary__book { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.pay-summary__cover {
  width: 104px; height: 104px;
  border: 1px solid var(--skz-line);
  border-radius: 2px;                    /* книга — прямоугольный объект (r2) */
  object-fit: cover;
  box-shadow: var(--skz-shadow-card);
}
.pay-summary__book-name { font-weight: 600; font-size: .98rem; max-width: 15em; text-wrap: balance; color: var(--skz-chocolate); }
.pay-summary__book-sub { font-size: .82rem; color: var(--skz-gray-warm); margin: 2px 0 6px; }
.pay-summary__book-price {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.1rem; color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (max-width: 600px) {
  .pay-summary__book { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .pay-summary__cover { width: 128px; height: 128px; }
  .pay-summary__book-name { max-width: none; }
}
.pay-summary__extras-title {
  margin: 14px 0 6px;
  font-family: var(--skz-font-sans);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--skz-gold-hover);
}
.pay-summary__extra {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0;
  font-size: .9rem;
}
.pay-summary__extra > span:last-child { color: var(--skz-gray-warm); }
.pay-summary__delivery-title { font-size: .9rem; font-weight: 600; margin: 14px 0 4px; color: var(--skz-chocolate); }
.pay-summary__delivery-addr { font-size: .82rem; color: var(--skz-gray-warm); line-height: 1.4; }
/* Блок «Получатель (подарок)» когда получатель ≠ покупатель */
.pay-summary__recipient-gift {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--skz-line);
}
.pay-summary__recipient-gift .pay-summary__block-title {
  font-size: .7rem;
  margin-bottom: 6px;
}
.pay-summary__sep { border: 0; border-top: 1px solid var(--skz-line); margin: 18px 0; }
.pay-summary__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-size: .95rem;
}
.pay-summary__row span { color: var(--skz-gray-warm); }
.pay-summary__row strong { color: var(--skz-chocolate); font-variant-numeric: lining-nums tabular-nums; }
.pay-summary__row--discount span,
.pay-summary__row--discount strong { color: var(--skz-success); }
.pay-summary__row--final { padding-top: 12px; align-items: baseline; }
.pay-summary__row--final span { color: var(--skz-chocolate); font-weight: 500; }
.pay-summary__row--final strong {
  font-family: var(--skz-font-serif);
  font-weight: 800; color: var(--skz-coral); font-size: 1.4rem;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Способы оплаты ─────────────────────────────────────────────────────────
   «Российской картой» — синяя primary (основной путь); «Зарубежной» и «Сплит»
   — кремовые secondary. Одна primary на экран (ДС). */
.pay-methods { display: flex; flex-direction: column; gap: 12px; }
#payFallbackButtons { display: flex; flex-direction: column; gap: 12px; }

.pay-methods__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0;
  font-family: var(--skz-font-sans);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--skz-gold-hover);
  font-weight: 600;
}
.pay-methods__divider::before,
.pay-methods__divider::after {
  content: ""; flex: 1; height: 1px;
  background: var(--skz-line);
}

.pay-method {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  font-family: var(--skz-font-sans); font-size: 1rem; font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
}
.pay-method svg { width: 18px; height: 18px; flex: none; }
.pay-method:hover { border-color: var(--skz-light-tan); }
.pay-method:active { transform: scale(.99); }
.pay-method__label { display: inline-flex; align-items: center; gap: 8px; }
/* Российской картой — основной путь: синяя CTA */
.pay-method--card {
  background: var(--skz-coral); color: var(--skz-text-on-primary);
  border-color: transparent;
  box-shadow: var(--skz-shadow-cta);
}
.pay-method--card:hover { background: var(--skz-coral-hover); border-color: transparent; box-shadow: inset 0 0 0 1px var(--skz-light-tan); }
.pay-method--loading { pointer-events: none; opacity: .6; }
/* Путь C: подпись под единой кнопкой «Оплатить» — какие способы внутри формы Т-Кассы */
.pay-methods__hint {
  margin: 10px 2px 0;
  text-align: center;
  font-family: var(--skz-font-sans);
  font-size: .82rem;
  color: var(--skz-gray-warm);
}
.pay-method:disabled {
  background: var(--skz-sand);
  color: var(--skz-gray-warm);
  border-color: var(--skz-line);
  cursor: not-allowed;
}

/* Email для квитанции */
.pay-methods__email {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.pay-methods__email-toggle {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; cursor: pointer;
  color: var(--skz-chocolate);
}
.pay-methods__email-toggle input { width: 18px; height: 18px; accent-color: var(--skz-coral); flex: none; }
.pay-methods__email-input {
  margin-left: 28px;
  padding: 10px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  font-family: var(--skz-font-sans); font-size: .95rem;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  width: calc(100% - 28px);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.pay-methods__email-input::placeholder { color: var(--skz-gray-warm); }
.pay-methods__email-input:focus {
  border-color: var(--skz-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
/* Бесплатный заказ (промокод покрыл всё) */
.pay-free__note { margin: 0 0 12px; font-size: .9rem; color: var(--skz-success); font-weight: 600; line-height: 1.4; text-align: center; }
.pay-free__btn {
  display: block; width: 100%;
  padding: 15px 20px;
  border: 0; border-radius: 6px;
  background: var(--skz-coral); color: var(--skz-text-on-primary);
  font-family: var(--skz-font-sans); font-size: 1.05rem; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--skz-shadow-cta);
  transition: background .15s, box-shadow .15s;
}
.pay-free__btn:hover:not(:disabled) { background: var(--skz-coral-hover); box-shadow: inset 0 0 0 1px var(--skz-light-tan); }
.pay-free__btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* ─── Модальное окно оплаты Т-Кассы ─────────────────────────────────────────── */
body.pay-modal-open { overflow: hidden; }
.pay-payment-dialog {
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  height: min(840px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--skz-chocolate);
  overflow: hidden;
  overscroll-behavior: contain;
}
.pay-payment-dialog::backdrop {
  background: rgba(35, 46, 71, .52);
  backdrop-filter: blur(7px);
}
.pay-payment-dialog__sheet {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(35,46,71,.16);
  overflow: hidden;
}
.pay-payment-dialog__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skz-surface) 88%, transparent);
  color: var(--skz-chocolate);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(35,46,71,.12);
  transition: background .15s, color .15s, box-shadow .15s;
}
.pay-payment-dialog__close:hover {
  background: var(--skz-surface);
  color: var(--skz-coral);
  box-shadow: 0 6px 20px rgba(35,46,71,.16);
}
.pay-payment-dialog__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  overscroll-behavior: contain;
}
.pay-payment-dialog iframe {
  flex: 1 1 auto;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: var(--skz-surface);
}
.pay-payment-dialog--success .pay-payment-dialog__body {
  justify-content: center;
  padding: 64px 32px 40px;
  overflow-y: auto;
}
@media (max-width: 600px) {
  .pay-payment-dialog {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .pay-payment-dialog__sheet {
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
  }
  .pay-payment-dialog__close {
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
  }
  .pay-payment-dialog__body {
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  }
  .pay-payment-dialog--success .pay-payment-dialog__body {
    padding: calc(64px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));
  }
  .pay-payment-dialog iframe {
    flex: 1;
    height: auto;
    min-height: 0;
    border-radius: 6px;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .pay-payment-dialog {
    width: min(720px, calc(100vw - 32px));
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .pay-payment-dialog--success .pay-payment-dialog__body {
    justify-content: center;
    padding: 16px 48px 12px;
  }
  .pay-payment-dialog--success .pay-success { padding: 0 12px; }
  .pay-payment-dialog--success .pay-success__icon {
    width: 48px; height: 48px;
    margin-bottom: 4px;
  }
  .pay-payment-dialog--success .pay-success__icon svg { width: 32px; height: 32px; }
  .pay-payment-dialog--success .pay-success__title {
    margin-bottom: 4px;
    font-size: 1.4rem;
  }
  .pay-payment-dialog--success .pay-success__lead {
    max-width: 500px;
    margin-bottom: 6px;
    font-size: .9rem;
    line-height: 1.35;
  }
  .pay-payment-dialog--success .pay-success__text {
    max-width: 520px;
    margin-bottom: 8px;
    font-size: .85rem;
    line-height: 1.35;
  }
  .pay-payment-dialog--success .pay-success__countdown {
    margin: 0 0 8px;
    font-size: .82rem;
  }
  .pay-payment-dialog--success .pay-success__cta {
    padding: 10px 20px;
    font-size: .9rem;
  }
}

/* ─── QR СБП ─────────────────────────────────────────────────────────────────── */
.pay-qr { text-align: center; padding: 8px 0; }
.pay-qr__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.15rem;
  margin: 0 0 6px;
  color: var(--skz-chocolate);
}
.pay-qr__hint { color: var(--skz-gray-warm); margin: 0 0 16px; font-size: .85rem; line-height: 1.4; }
.pay-qr__img {
  display: inline-block;
  padding: 12px;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
}
.pay-qr__img img,
.pay-qr__img svg { display: block; width: 240px; height: 240px; }
.pay-qr__waiting { margin: 16px 0 12px; color: var(--skz-gray-warm); font-style: italic; font-size: .9rem; }
.pay-qr__back {
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  padding: 9px 16px;
  font-family: var(--skz-font-sans); font-size: .88rem;
  color: var(--skz-chocolate);
  cursor: pointer;
  transition: border-color .15s;
}
.pay-qr__back:hover { border-color: var(--skz-light-tan); }

/* ─── Успешная оплата внутри платёжного dialog ────────────────────────────────── */
.pay-success {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  text-align: center; padding: 24px 12px;
}
.pay-success__icon {
  width: 88px; height: 88px;
  background: color-mix(in srgb, var(--skz-success) 12%, var(--skz-surface));
  color: var(--skz-success);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.pay-success__icon svg { display: block; width: 52px; height: 52px; }
.pay-success__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.55rem;
  margin: 0 0 12px;
  color: var(--skz-chocolate);
  text-wrap: balance;
}
.pay-success__title:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.pay-success__lead {
  margin: 0 0 14px;
  font-size: 1rem; color: var(--skz-gray-warm);
  line-height: 1.5; max-width: 380px;
}
.pay-success__text {
  margin: 0 0 24px;
  font-size: .95rem; color: var(--skz-gray-warm);
  line-height: 1.55; max-width: 440px;
  text-wrap: pretty;
}
.pay-success__text strong { color: var(--skz-chocolate); font-weight: 600; }
.pay-success__cta {
  display: inline-block;
  padding: 14px 28px;
  background: var(--skz-coral); color: var(--skz-text-on-primary);
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--skz-font-sans); font-weight: 600; font-size: 1rem;
  box-shadow: var(--skz-shadow-cta);
  transition: background .15s, transform .05s;
}
.pay-success__cta:hover { background: var(--skz-coral-hover); }
.pay-success__cta:active { transform: scale(.99); }
.pay-success__cta:focus-visible {
  outline: 3px solid var(--skz-coral);
  outline-offset: 3px;
}
.pay-success__countdown {
  margin: 4px 0 18px;
  text-align: center; font-size: .92rem;
  color: var(--skz-gray-warm);
}
.pay-success__countdown span {
  display: inline-block; min-width: 1.6em;
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--skz-coral);
}

/* ─── Toast (ошибка валидации доставки) ───────────────────────────────────────── */
.ck-toast-host {
  position: fixed; top: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.ck-toast {
  background: var(--skz-chocolate); color: var(--skz-text-on-primary);
  padding: 14px 20px;
  border-radius: 8px;
  font-family: var(--skz-font-sans); font-size: .95rem; font-weight: 500;
  box-shadow: var(--skz-shadow-card-hover);
  max-width: 360px;
  transform: translateX(20px); opacity: 0;
  transition: transform .25s ease-out, opacity .25s;
  pointer-events: auto;
}
.ck-toast--visible { transform: translateX(0); opacity: 1; }
.ck-toast--error { background: var(--skz-warning); }
@media (max-width: 600px) {
  .ck-toast-host { top: 16px; right: 16px; left: 16px; }
  .ck-toast { max-width: none; }
}

/* ─── Компактный чекаут: одна карточка = один экран без скрола (desktop) ──────── */
.checkout-body .site-footer__grid { display: none; }
.checkout-body .site-footer { padding: 16px 0 12px; }
.checkout-body .site-footer__bottom { padding-top: 0; }

/* ─── Мобильный чекаут: максимум ширины экрана ────────────────────────────────── */
@media (max-width: 640px) {
  .ck-main { padding: 0; margin: 10px auto 28px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .ck-cart-promo input { flex-basis: 0%; }
  .checkout-body .ck-card { border-radius: 0; box-shadow: none; padding: 16px 14px; border-left: 0; border-right: 0; }
  .ck-card--payer { position: static; }
  .pay-main { padding: 0; margin: 10px auto 28px; gap: 10px; }
  .pay-summary, .pay-methods { border-radius: 0; box-shadow: none; padding: 16px 14px; border-left: 0; border-right: 0; }
  .checkout-body .ck-topbar { padding: 8px 14px; }

  /* Инпуты ≥16px — иначе iOS Safari зумит при фокусе */
  .ck-field input,
  .ck-field textarea,
  .ck-field select,
  .ck-cart-promo input,
  .ck-city input,
  .ck-pvz-filter,
  .ck-country,
  .pay-methods__email-input { font-size: 16px; }

  /* Тач-таргеты ≥44px */
  .ck-pill {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ck-map { height: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Личный кабинет (/account, /account/orders/:id, /account/profile, /account/
   addresses) — дизайн «Экслибрис», эталон layouts-web/order.html.
   Общие с чекаутом компоненты: .ck-card (кремовая карточка с тонкой рамкой),
   .ck-field, focus-visible. Имена классов — хуки account.js, НЕ переименовывать:
   .lk-tab-logout-form, [data-toggle="archive"], [data-order-select],
   #lkGuestLoginForm, #lk-name-*. Цвета — только токены --skz-*.
   ═══════════════════════════════════════════════════════════════════════════ */
.lk-main { width: 100%; max-width: 1080px; margin: 16px auto 40px; padding: 0 20px; }
/* Гигиена взаимодействий ЛК: без задержки дабл-тапа, свой хайлайт-фидбек */
.lk-main a, .lk-main button, .lk-main input { touch-action: manipulation; }
.lk-order, .lk-cta, .lk-tab { -webkit-tap-highlight-color: transparent; }
/* Skip-link «К содержимому» — виден только при фокусе с клавиатуры */
.lk-skip {
  position: absolute; left: 16px; top: -56px; z-index: 100;
  padding: 12px 18px; border-radius: 6px;
  background: var(--skz-surface); color: var(--skz-chocolate);
  border: 1px solid var(--skz-gold);
  box-shadow: var(--skz-shadow-card-hover);
  font-family: var(--skz-font-sans); font-weight: 600; font-size: .9rem;
  text-decoration: none;
  transition: top .15s ease-out;
}
.lk-skip:focus { top: 12px; }
.lk-skip:focus-visible { top: 12px; }
.lk-hero { margin: 10px 0 20px; }
.lk-hero__greeting {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.15;
  font-variant-numeric: lining-nums;
  color: var(--skz-chocolate);
  margin: 0 0 6px;
  text-wrap: balance;
}
.lk-hero__summary { margin: 0; color: var(--skz-gray-warm); font-size: .95rem; line-height: 1.55; }

/* ── Табы разделов (Заказы · Профиль · Адреса · Поддержка) ── */
.lk-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 4px 0 24px; padding: 4px;
  background: var(--skz-surface);
  border-radius: 8px;
  border: 1px solid var(--skz-line);
  box-shadow: 0 1px 0 var(--skz-line-deep);
  align-self: flex-start;
}
.lk-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border: 0;                    /* сброс UA-стилей <button> (кнопка «Выйти») */
  background: transparent;
  border-radius: 6px;
  font-family: var(--skz-font-sans);
  font-weight: 500; font-size: .93rem;
  color: var(--skz-chocolate);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.lk-tab:hover { background: var(--skz-sand); }
.lk-tab--active { background: var(--skz-chocolate); color: var(--skz-text-on-primary); }
.lk-tab--active:hover { background: var(--skz-chocolate); }
.lk-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--skz-gold) 18%, transparent);
  color: var(--skz-gold-hover);
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.lk-tab--active .lk-tab__count {
  background: color-mix(in srgb, var(--skz-text-on-primary) 18%, transparent);
  color: var(--skz-text-on-primary);
}
.lk-tab--logout { margin-left: auto; color: var(--skz-gray-warm); }
/* Кнопка-акцент (латунная), ДС: светлый форзац + латунная «блинт»-обводка +
   тёмно-золотой текст; hover — латунная заливка. */
.lk-tab--admin {
  background: var(--skz-sand); color: var(--skz-gold-hover); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--skz-gold);
}
.lk-tab--admin:hover { background: var(--skz-gold); color: var(--skz-text-on-primary); box-shadow: inset 0 0 0 1px var(--skz-gold-hover); }

/* ── Группы заказов ── */
.lk-section { margin: 0 0 28px; }
.lk-section__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 12px;
}
.lk-section__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.3rem;
  font-variant-numeric: lining-nums;
  color: var(--skz-chocolate);
  margin: 0;
  display: flex; align-items: baseline; gap: 8px;
}
.lk-section__count {
  font-family: var(--skz-font-sans);
  font-weight: 500; font-size: .85rem;
  color: var(--skz-gray-warm);
  font-variant-numeric: lining-nums tabular-nums;
}
/* ─── Зона «Ждут вашего утверждения» ─────────────────────────────────────────
   Единственный этап, где нужен клик клиента, чтобы книга ушла в печать.
   Акцент бейджем и латунной рамкой карточки — без тяжёлых плашек (канон ДС). */
.lk-section__badge {
  font-family: var(--skz-font-sans);
  font-weight: 600; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--skz-chocolate);
  background: var(--skz-sand);
  border: 1px solid var(--skz-light-tan);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.lk-order--action { border-color: var(--skz-light-tan); }

/* ─── Строки автосейв-черновиков (НЕ карточки книг) ──────────────────────────
   Сохранённая форма — только имя/возраст, без фото и иллюстраций. Компактная
   строка не даёт ей маскироваться под книгу. */
.lk-draftrows { display: grid; gap: 8px; margin-top: 10px; }
.lk-addresses { margin-top: 28px; }
.lk-addresses .lk-info-label { margin-bottom: 12px; }
.lk-draftrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
}
.lk-draftrow__thumb {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 6px; object-fit: cover;
  border: 1px solid var(--skz-line);
}
.lk-draftrow__body { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.lk-draftrow__label {
  font-family: var(--skz-font-sans);
  font-weight: 600; font-size: .72rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--skz-gray-warm);
  white-space: nowrap;
}
.lk-draftrow__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1rem;
  color: var(--skz-chocolate);
}
.lk-draftrow__meta { font-size: .85rem; color: var(--skz-gray-warm); }
.lk-draftrow__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lk-draftrow__cancel { margin-left: 0; font-size: .85rem; }
@media (max-width: 640px) {
  .lk-draftrow { flex-wrap: wrap; }
  .lk-draftrow__actions { width: 100%; justify-content: flex-end; }
}
.lk-select-toggle {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--skz-line); border-radius: 6px;
  background: var(--skz-surface); color: var(--skz-chocolate);
  font-family: var(--skz-font-sans); font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.lk-select-toggle:hover { border-color: var(--skz-light-tan); background: var(--skz-sand); }
.lk-select-toggle[aria-pressed="true"] { border-color: var(--skz-gold); color: var(--skz-gold-hover); }

/* ── Карточка заказа в списке ── */
.lk-orders { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lk-order {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 22px;
  background: var(--skz-surface);
  border-radius: 8px;
  border: 1px solid var(--skz-line);
  box-shadow: 0 1px 0 var(--skz-line-deep), var(--skz-shadow-card);
  color: var(--skz-chocolate);
  cursor: default;
  /* Ховер по ДС: меняем кромку/тень, макет не двигаем */
  transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
.lk-order:hover {
  border-color: var(--skz-light-tan);
  box-shadow: 0 1px 0 var(--skz-line-deep), var(--skz-shadow-card-hover);
}
.lk-order__select {
  display: none;
  width: fit-content; min-height: 44px;
  align-items: center; gap: 10px;
  color: var(--skz-chocolate);
  font-family: var(--skz-font-sans); font-size: .88rem; font-weight: 500;
  cursor: pointer; user-select: none;
}
.lk-is-selecting .lk-order__select { display: inline-flex; }
.lk-order__select input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.lk-order__select-mark {
  width: 24px; height: 24px; flex: 0 0 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--skz-line-deep); border-radius: 6px;
  background: var(--skz-surface); color: var(--skz-text-on-primary);
  transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
.lk-order__select-mark svg { width: 14px; height: 14px; opacity: 0; }
.lk-order__select input:checked + .lk-order__select-mark {
  border-color: var(--skz-chocolate); background: var(--skz-chocolate);
}
.lk-order__select input:checked + .lk-order__select-mark svg { opacity: 1; }
.lk-order__select input:focus-visible + .lk-order__select-mark {
  outline: 2px solid var(--skz-coral); outline-offset: 2px;
}
.lk-is-selecting .lk-order { cursor: default; }
.lk-is-selecting .lk-order__foot { display: none; }
.lk-order--selected {
  border-color: var(--skz-gold);
  box-shadow: 0 1px 0 var(--skz-line-deep), inset 4px 0 0 var(--skz-gold), var(--skz-shadow-card);
}
.lk-order__head { display: grid; grid-template-columns: 88px 1fr auto; gap: 18px; align-items: center; }
.lk-order__cover {
  width: 88px; height: 88px;
  border-radius: 2px; object-fit: cover;
  background: var(--skz-sand);
  border: 1px solid var(--skz-line);
  display: block;
}
.lk-order__body { min-width: 0; }
.lk-order__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.2rem;
  color: var(--skz-chocolate);
  margin: 0 0 4px; line-height: 1.25;
  text-wrap: balance;
}
.lk-order__hero { font-size: .9rem; color: var(--skz-gray-warm); margin: 0 0 8px; }
.lk-order__meta {
  font-size: .85rem; color: var(--skz-gray-warm); margin: 0;
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
  font-variant-numeric: lining-nums;
}
.lk-order__meta strong { color: var(--skz-chocolate); font-weight: 600; }
.lk-order__dot { color: var(--skz-line-deep); }
.lk-order__price { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; white-space: nowrap; }
.lk-order__amount {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.25rem;
  color: var(--skz-chocolate);
  font-variant-numeric: lining-nums tabular-nums;
}
.lk-order__foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ── Режим выбора книг ──────────────────────────────────────────────────────
   До появления purchase-модели одна выбранная книга открывает текущий checkout;
   совместная оплата нескольких книг обозначена честным disabled-состоянием. */
.lk-selection-bar {
  position: fixed;
  left: 50%; bottom: 16px; z-index: 40;
  width: min(1040px, calc(100vw - 40px));
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 20px;
  border: 1px solid var(--skz-line); border-radius: 8px;
  background: var(--skz-surface);
  box-shadow: 0 1px 0 var(--skz-line-deep), var(--shadow-pop);
}
.lk-selection-bar[hidden] { display: none; }
.lk-selection-bar__summary { min-width: 0; display: grid; gap: 2px; }
.lk-selection-bar__summary strong {
  color: var(--skz-chocolate); font-family: var(--skz-font-sans);
  font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.lk-selection-bar__hint {
  color: var(--skz-gray-warm); font-family: var(--skz-font-sans);
  font-size: .8rem; line-height: 1.45; text-wrap: pretty;
}
.lk-selection-bar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.lk-selection-bar .lk-cta { min-height: 44px; }
.lk-selection-bar .lk-cta:disabled {
  cursor: not-allowed; opacity: .52;
  box-shadow: none;
}
.lk-is-selecting .lk-main { padding-bottom: 112px; }

/* ── Таймлайн статусов ────────────────────────────────────────────────────────
   Рецепт ДС/эталона: узлы-круги на тонкой линии. done — форзац + светлая латунь
   + галочка; активный — латунное кольцо + латунное ядро; будущие — линия.
   В списке — компакт (22px, только подписи); на странице заказа — полный
   (26px, описания, даты антиквой-курсивом, лента-ляссе над активным узлом). */
.lk-tl {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: start; gap: 0;
  padding: 8px 4px 2px;
}
.lk-tl__step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; position: relative; }
.lk-tl__dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  color: var(--skz-gold-hover);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}
.lk-tl__dot svg { width: 11px; height: 11px; display: block; }
.lk-tl__dot--done { background: var(--skz-sand); border-color: var(--skz-light-tan); }
.lk-tl__dot--active { border-color: var(--skz-gold); }
.lk-tl__dot--active::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--skz-gold); }
.lk-tl__label {
  font-size: .8rem; font-weight: 500;
  color: var(--skz-gray-warm);
  text-align: center;
  font-family: var(--skz-font-sans);
  line-height: 1.3;
}
.lk-tl__step:has(.lk-tl__dot--done) .lk-tl__label { color: var(--skz-chocolate); }
.lk-tl__step:has(.lk-tl__dot--active) .lk-tl__label { color: var(--skz-chocolate); font-weight: 600; }
.lk-tl__bar { height: 1px; background: var(--skz-line); margin: 11px 6px 0; }
.lk-tl__bar--done { background: var(--skz-light-tan); }
.lk-tl__desc {
  font-size: .74rem; line-height: 1.4;
  color: var(--skz-gray-warm);
  text-align: center;
  font-family: var(--skz-font-sans);
  margin-top: -2px; max-width: 180px;
}
.lk-tl__date {
  font-family: var(--skz-font-serif);
  font-style: italic; font-weight: 800; font-size: .84rem; line-height: 1.3;
  font-variant-numeric: lining-nums;
  color: var(--skz-gold-hover);
  margin-top: 2px;
}
/* Полный таймлайн страницы заказа */
.lk-tl--order { padding: 12px 6px 6px; }
.lk-tl--order .lk-tl__step { min-width: 96px; }
.lk-tl--order .lk-tl__dot { width: 26px; height: 26px; }
.lk-tl--order .lk-tl__dot svg { width: 12px; height: 12px; }
.lk-tl--order .lk-tl__bar { margin-top: 13px; }
/* Лента-ляссе «вы сейчас здесь»: свисает с верхней кромки карточки и
   заканчивается «ласточкиным хвостом» за 5px до узла (рецепт system.md).
   Геометрия: 12px (padding карточки) + 11px (кикер) + 8px (его отступ)
   + 12px (padding таймлайна) = 43px. У первого узла ленту не рисуем —
   она легла бы на кикер «Статус заказа»; вместо неё латунное кольцо. */
.lk-tl--order .lk-tl__step:has(.lk-tl__dot--active)::before {
  content: ""; position: absolute;
  top: -43px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 38px;
  background: var(--skz-gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 50% calc(100% - 2px), 0 calc(100% - 6px));
  pointer-events: none;
}
.lk-tl--order .lk-tl__step:first-of-type:has(.lk-tl__dot--active)::before { content: none; }
.lk-tl--order .lk-tl__step:first-of-type .lk-tl__dot--active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 18%, transparent);
}
/* Мобильный таймлайн заказа — вертикальный (эталон ≤820px) */
@media (max-width: 820px) {
  .lk-tl--order { grid-template-columns: 1fr; grid-auto-flow: row; gap: 14px; }
  .lk-tl--order .lk-tl__bar { display: none; }
  .lk-tl--order .lk-tl__step {
    display: grid; grid-template-columns: 26px 1fr; column-gap: 12px;
    align-items: start; min-width: 0;
  }
  .lk-tl--order .lk-tl__dot { grid-row: 1 / span 3; margin-top: 2px; }
  .lk-tl--order .lk-tl__label,
  .lk-tl--order .lk-tl__desc,
  .lk-tl--order .lk-tl__date { grid-column: 2; text-align: left; max-width: none; }
  .lk-tl--order .lk-tl__desc { margin-top: 2px; }
  .lk-tl--order .lk-tl__step:not(:last-of-type)::after {
    content: ""; position: absolute;
    top: 32px; bottom: -13px; left: 12.5px; width: 1px;
    background: var(--skz-line);
  }
  .lk-tl--order .lk-tl__step:has(.lk-tl__dot--active)::before { content: none; }
  .lk-tl--order .lk-tl__dot--active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 18%, transparent);
  }
}

/* ── Статусная плашка (бейдж «Экслибриса»: форзац + каталожная строка) ── */
.lk-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 9px 5px; border-radius: 2px;
  background: var(--skz-sand);
  color: var(--skz-gold-hover);
  font-family: var(--skz-font-sans);
  font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
.lk-pill--draft { color: var(--skz-gray-warm); }
.lk-pill--cart { color: var(--skz-gold-hover); }
/* «Готов к утверждению» — нужен шаг от пользователя: чернильно-синий акцент CTA */
.lk-pill--paid { color: var(--skz-coral); }
.lk-pill--working { color: var(--skz-gold-hover); }
.lk-pill--delivered { color: var(--skz-chocolate); }
.lk-pill--delivered::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--skz-success); flex: none;
}

/* ── Кнопки карточек (primary — синяя CTA; ghost — btn-sec эталона) ── */
.lk-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 6px;
  font-family: var(--skz-font-sans);
  font-weight: 600; font-size: .86rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}
.lk-cta--primary { background: var(--skz-coral); color: var(--skz-text-on-primary); }
.lk-cta--primary:hover { background: var(--skz-coral-hover); box-shadow: inset 0 0 0 1px var(--skz-light-tan); }
.lk-cta--ghost {
  background: var(--skz-surface); color: var(--skz-chocolate);
  border: 1px solid var(--skz-line); padding: 8px 15px;
  font-weight: 500;
}
.lk-cta--ghost:hover { border-color: var(--skz-light-tan); }
.lk-cta--muted { color: var(--skz-gray-warm); font-weight: 500; background: none; }
.lk-cta--muted:hover { color: var(--skz-chocolate); }
/* Отмена неоплаченного заказа — деструктивная кнопка с обводкой (читается как
   кнопка, а не текст-ссылка), приглушённая по умолчанию, слева от основных CTA.
   На hover/focus краснеет вся: текст, рамка и фон. margin-right:auto прижимает
   её к левому краю, primary-CTA остаётся справа. */
.lk-cta--cancel {
  margin-right: auto;
  background: var(--skz-surface);
  color: var(--skz-gray-warm); font-weight: 500;
  border: 1px solid var(--skz-line);
  padding: 8px 15px;
}
.lk-cta--cancel:hover, .lk-cta--cancel:focus-visible {
  color: var(--danger-text, #8C3B2E);
  border-color: var(--danger-text, #8C3B2E);
  background: var(--danger-soft, #F3E2DD);
}
.lk-order__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

}

/* ── Пустые состояния (слот с пунктиром, рецепт mat-in.slot-in) ── */
.lk-empty {
  padding: 36px 20px;
  background: var(--skz-surface);
  border-radius: 6px;
  border: 1px dashed var(--skz-line-deep);
  text-align: center;
  color: var(--skz-gray-warm);
}
.lk-empty__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.25rem;
  color: var(--skz-chocolate);
  margin: 0 0 8px;
}
.lk-empty__cta {
  display: inline-flex; margin-top: 14px;
  padding: 11px 22px; border-radius: 6px;
  background: var(--skz-coral); color: var(--skz-text-on-primary);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: background-color .2s ease-out, box-shadow .2s ease-out;
}
.lk-empty__cta:hover { background: var(--skz-coral-hover); box-shadow: inset 0 0 0 1px var(--skz-light-tan); }

/* ── Страница заказа /account/orders/:id ── */
.lk-detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--skz-gold-hover);
  font-size: .88rem; font-weight: 500;
  text-decoration: none;
  margin: 0 0 10px;
}
.lk-detail-back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lk-detail-hero {
  display: flex; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin: 0;
}
.lk-detail-hero__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15;
  font-variant-numeric: lining-nums;
  color: var(--skz-chocolate); margin: 0;
}
.lk-detail-hero .lk-pill { transform: translateY(-3px); }
.lk-detail-meta {
  font-size: .9rem; line-height: 1.5;
  color: var(--skz-gray-warm);
  font-variant-numeric: lining-nums;
  margin: 4px 0 12px;
}
/* legacy-класс даты в заголовке — оставлен на случай кэшированного шаблона */
.lk-detail-hero__date-inline {
  font-family: var(--skz-font-sans);
  font-weight: 400; font-size: .92rem;
  color: var(--skz-gray-warm);
}
.lk-card-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 14px; margin: 0 0 14px;
  align-items: start;
}
@media (max-width: 980px) {
  .lk-card-grid { grid-template-columns: 1fr 1fr; }
  .lk-card-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lk-card-grid { grid-template-columns: 1fr; }
  .lk-card-grid > :first-child { grid-column: auto; }
}
.lk-status-card { padding: 12px 16px 8px; margin: 12px 0 14px; }
.lk-status-card .lk-info-label { margin-bottom: 8px; }
body.lk-order-detail .lk-main { max-width: 1180px; margin: 12px auto 32px; padding: 0 20px; }
body.lk-order-detail .ck-card { padding: 12px 16px; }
body.lk-order-detail .lk-status-card { padding: 12px 16px 8px; }

/* ── Состав заказа ── */
.lk-product { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.lk-product > div { min-width: 0; }
/* Длинный пользовательский контент (пожелание, названия) не рвёт сетку */
.lk-product__specs, .lk-product__title, .lk-order__title,
.lk-dl__addr, .lk-detail-meta { overflow-wrap: break-word; }
.lk-product__cover {
  width: 96px; height: 96px;
  border-radius: 2px; object-fit: cover;
  background: var(--skz-sand);
  border: 1px solid var(--skz-line);
  display: block;
}
.lk-product__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.2rem; line-height: 1.25;
  color: var(--skz-chocolate); margin: 0 0 4px;
  text-wrap: balance;
}
.lk-product__hero { font-size: .86rem; color: var(--skz-chocolate); margin: 0 0 8px; }
.lk-product__hero strong { font-weight: 600; }
.lk-product__specs {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: .84rem; line-height: 1.45;
  color: var(--skz-gray-warm);
}
.lk-product__specs strong { color: var(--skz-chocolate); font-weight: 500; }
.lk-product__price {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.3rem;
  color: var(--skz-chocolate); margin: 0 0 10px;
  font-variant-numeric: lining-nums tabular-nums;
}
.lk-product__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Кикер карточки — каталожная строка (рецепт ДС §5.6) ── */
.lk-info-label {
  font-family: var(--skz-font-sans);
  font-size: 11px; font-weight: 500; line-height: 1;
  text-transform: uppercase; letter-spacing: .26em;
  color: var(--skz-gold-hover);
  margin: 0 0 12px;
}
.lk-info-block { margin: 0 0 10px; line-height: 1.45; font-size: .9rem; color: var(--skz-chocolate); }
.lk-info-block strong { font-weight: 600; }
.lk-info-block p { margin: 0; }
.lk-muted { color: var(--skz-gray-warm); font-size: .85rem; }

/* ── Доставка (страница заказа) ── */
.lk-dl__name { margin: 0 0 4px; font-size: .92rem; font-weight: 600; color: var(--skz-chocolate); }
.lk-dl__line { margin: 0 0 4px; font-size: .9rem; color: var(--skz-chocolate); }
.lk-dl__line--muted { color: var(--skz-gray-warm); font-size: .84rem; }
.lk-dl__addr { margin: 0 0 4px; font-size: .92rem; font-weight: 500; line-height: 1.4; color: var(--skz-chocolate); }
.lk-dl__note { margin: 8px 0 0; font-size: .8rem; line-height: 1.5; color: var(--skz-gray-warm); }
.lk-dl__note strong { color: var(--skz-chocolate); font-weight: 600; font-variant-numeric: lining-nums; }
.lk-dl__note + .lk-cta,
.lk-dl__line--muted + .lk-cta { margin-top: 10px; }

/* ── Итого (строка цены эталона: линии сверху/снизу, цифра антиквой) ── */
.lk-summary { font-size: .88rem; }
.lk-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.lk-summary__row span:last-child { font-variant-numeric: lining-nums tabular-nums; font-weight: 500; }
.lk-summary__row--total {
  border-top: 1px solid var(--skz-line);
  border-bottom: 1px solid var(--skz-line);
  align-items: baseline;
  margin-top: 8px; padding: 8px 2px;
}
.lk-summary__row--total span:first-child { color: var(--skz-gray-warm); font-size: .92rem; }
.lk-summary__row--total span:last-child {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.45rem; line-height: 1.2;
  color: var(--skz-chocolate);
  font-variant-numeric: lining-nums tabular-nums;
}
.lk-summary__row--discount { color: var(--skz-success); }
.lk-summary__row--discount span:last-child { font-weight: 600; }
.lk-summary__payment { margin: 8px 0 0; font-size: .8rem; line-height: 1.5; color: var(--skz-gray-warm); }
.lk-summary__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ── Профиль ── */
.lk-profile { display: grid; grid-template-columns: 100px 1fr; gap: 22px; align-items: center; }
/* Аватар — «экслибрис-штамп»: форзац + латунный блинт-контур + инициал антиквой */
.lk-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--skz-sand);
  color: var(--skz-gold-hover);
  box-shadow: inset 0 0 0 1px var(--skz-gold);
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.lk-profile__name {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.4rem;
  color: var(--skz-chocolate); margin: 0 0 4px;
}
.lk-profile__email { color: var(--skz-gray-warm); margin: 0 0 4px; font-size: .92rem; }
.lk-profile__since { color: var(--skz-gray-warm); margin: 0 0 14px; font-size: .85rem; font-variant-numeric: lining-nums; }
.lk-profile__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Гостевой блок входа (magic-link) ── */
.lk-guest-login {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 20px 22px; margin: 0 0 20px;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  box-shadow: 0 1px 0 var(--skz-line-deep), var(--skz-shadow-card);
}
/* Искра в кружке-форзаце с латунным блинт-контуром (декор ≥3:1) */
.lk-guest-login__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--skz-sand);
  color: var(--skz-gold);
  box-shadow: inset 0 0 0 1px var(--skz-light-tan);
  border-radius: 50%;
  font-size: 1.4rem; line-height: 1;
}
.lk-guest-login__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.25rem; margin: 2px 0 6px;
  color: var(--skz-chocolate);
}
.lk-guest-login__desc { margin: 0 0 12px; color: var(--skz-gray-warm); font-size: .92rem; line-height: 1.5; }
.lk-guest-login__form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 0 0 8px; }
.lk-guest-login__form input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  font-family: var(--skz-font-sans); font-size: .95rem;
  background: var(--skz-surface);
  color: var(--skz-chocolate);
  transition: border-color .15s, box-shadow .15s;
}
.lk-guest-login__form input:focus {
  border-color: var(--skz-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-gold) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
.lk-guest-login__hint { margin: 0; font-size: .82rem; color: var(--skz-gray-warm); }
/* Шаг 2 входа — поле 6-значного кода: моноширинный, разрежённый, крупнее
   обычного инпута, чтобы цифры читались и не путались при вводе с почты. */
.lk-code-input {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.25rem; font-weight: 600; letter-spacing: .34em;
  text-align: center;
}
.lk-code-input::placeholder { letter-spacing: .34em; color: var(--skz-line); }
/* Второстепенные действия шага «код» — текстовые кнопки в тон подписи. */
.lk-linkbtn {
  background: none; border: 0; padding: 0; margin-left: 10px;
  font: inherit; color: var(--skz-coral); cursor: pointer; text-decoration: underline;
}
.lk-linkbtn:hover { color: var(--skz-coral-hover); }
.lk-guest-login__status { margin: 8px 0 0; padding: 8px 12px; border-radius: 6px; font-size: .9rem; }
.lk-guest-login__status--ok { background: var(--skz-sand); border-left: 3px solid var(--skz-success); color: var(--skz-chocolate); }
.lk-guest-login__status--error { background: var(--skz-sand); border-left: 3px solid var(--skz-warning); color: var(--skz-warning); }
@media (max-width: 640px) {
  .lk-guest-login { grid-template-columns: 1fr; }
  .lk-guest-login__icon { display: none; }
  .lk-guest-login__form { grid-template-columns: 1fr; }
}

/* Form-row (категория + email) — используется страницей поддержки */
.lk-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .lk-form-row-2 { grid-template-columns: 1fr; gap: 0; } }

/* Textarea поддержки */
.ck-field__textarea { min-height: 140px; resize: vertical; font-family: var(--skz-font-sans); line-height: 1.5; }

/* Success-блок поддержки */
.lk-support-success { text-align: center; padding: 28px 14px; }
.lk-support-success p { color: var(--skz-gray-warm); max-width: 480px; margin: 10px auto 0; }

/* Бабл-подсказка над кнопкой submit */
.lk-support-actions { position: relative; margin-top: 18px; text-align: right; }
.lk-toast {
  position: absolute; bottom: calc(100% + 12px); right: 0; z-index: 5;
  max-width: 320px; padding: 11px 14px;
  background: var(--skz-chocolate); color: var(--skz-text-on-primary);
  border-radius: 8px;
  box-shadow: var(--skz-shadow-card-hover);
  font-size: .92rem; line-height: 1.4; text-align: left;
  white-space: normal; animation: lkToastIn .18s ease-out;
}
.lk-toast::after {
  content: ""; position: absolute; top: 100%; right: 36px;
  border: 7px solid transparent; border-top-color: var(--skz-chocolate);
}
.lk-toast--error { border-left: 3px solid var(--skz-coral); padding-left: 11px; }
@keyframes lkToastIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .lk-toast { max-width: calc(100vw - 56px); }
  .lk-toast::after { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-toast { animation: none; }
  .lk-select-toggle,
  .lk-order,
  .lk-order__select-mark { transition-duration: 1ms; }
}

/* ── Мобильный адаптив ЛК ── */
@media (max-width: 640px) {
  .lk-main { padding: 0 14px; }
  .lk-profile { grid-template-columns: 80px 1fr; gap: 14px; }
  .lk-avatar { width: 80px; height: 80px; font-size: 2rem; }
  .lk-order { padding: 16px; gap: 14px; }
  .lk-order__head { grid-template-columns: 72px 1fr; gap: 14px; }
  .lk-order__cover { width: 72px; height: 72px; }
  .lk-order__price { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .lk-order__title { font-size: 1.05rem; }
  .lk-section__head { align-items: flex-start; }
  .lk-select-toggle { flex: none; padding-inline: 12px; }
  .lk-order__select { width: 100%; }
  /* Компакт мини-таймлайна ТОЛЬКО в карточках списка (.lk-order) — полный
     таймлайн страницы заказа на мобиле вертикальный (медиа 820 выше),
     и общие .lk-tl-правила здесь его перебивали бы по каскаду. */
  .lk-order .lk-tl__step { min-width: 0; gap: 6px; }
  .lk-order .lk-tl__label { font-size: .7rem; }
  .lk-order .lk-tl__bar { margin-top: 10px; }
  /* Табы кабинета — ОДНА строка без скрола (правка владельца 24.07):
     «Мои книги · Профиль · Адреса · Поддержка · Выйти» ужимаются кеглем и
     паддингами, счётчик у «Мои книги» на мобиле прячем — он есть в hero-сводке.
     overflow-x: auto остаётся страховкой для сотрудников (у них ещё
     «⚙ Админ-панель» — единственный случай, где строка может не влезть). */
  .lk-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 0; padding: 3px; }
  .lk-tab {
    /* flex-shrink запрещён: усадка резала подпись активного таба («Мои книг…»).
       Вместо усадки — плотный кегль и паддинги, так все пять пунктов входят. */
    min-height: 44px; flex: 0 0 auto;
    padding: 10px 5px; font-size: .78rem; white-space: nowrap;
  }
  .lk-tab__arrow { display: none; } /* стрелка «Выйти →» не влезает в одну строку */
  .lk-tab__count { display: none; }
  .lk-tab--logout { margin-left: auto; }
  .lk-cta { min-height: 44px; }
  /* Кнопки футера карточки — в ОДНУ строку (правка владельца 24.07): и пара
     «Отменить + CTA», и «Проверить и утвердить + Подробности» не должны
     складываться в столбик. Ужимаем кегль/паддинги, primary тянется. */
  .lk-order__foot { flex-wrap: nowrap; }
  .lk-order__foot .lk-cta {
    white-space: nowrap; padding-inline: 12px; font-size: .82rem; min-width: 0;
  }
  .lk-order__foot .lk-cta--primary {
    flex: 1 1 auto; justify-content: center;
  }
  .lk-guest-login__form input { font-size: 16px; } /* анти-зум iOS */
  .lk-pill { white-space: normal; text-align: left; line-height: 1.4; }
  .lk-product { grid-template-columns: 80px 1fr; gap: 14px; }
  .lk-product__cover { width: 80px; height: 80px; }
  .lk-selection-bar {
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100vw - 28px);
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 14px;
  }
  .lk-selection-bar__actions { align-items: stretch; }
  .lk-selection-bar__actions .lk-cta { flex: 1 1 0; white-space: nowrap; }
  .lk-is-selecting .lk-main { padding-bottom: 168px; }
}

/* Согласие ПДн/оферта под CTA (аудит P1 #17) */
.ck-consent {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--skz-text-caption, #6b6257);
}
.ck-consent a { color: inherit; text-decoration: underline; }
.ck-consent a:hover { color: var(--skz-text-body, #2b2620); }