/* checkout.css — чекаут «Сказкина»: корзина + доставка + оплата (+ личный кабинет).
   Дизайн-система «Экслибрис» (2026-07, фаза 3). Цвета/шрифты — ТОЛЬКО токены --skz-*
   из theme.css; палитра: бумага #FBF9F5, карточки #FFFFFF, форзац #EDF4F8, чернила
   #232E47, латунь #F4C451 / текст-золото #2B55C8, синяя CTA #2B55C8, линии #E4E2DD.
   Эталон внешнего вида: 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: only light;                 /* светлая ДС — нативные контролы/скроллбар */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.checkout-body .site-footer { margin-top: auto; }

/* Страницы оформления заказа (Корзина → Доставка → Оплата) идут на белом —
   решение владельца 01.09.2026: короткое превью перед ними уже белое, и фон
   по дороге к оплате не должен меняться. Узнаём их по полоске шагов, чтобы
   не задеть остальные страницы на том же каркасе — личный кабинет, поддержку,
   страницу «оплачено». Белый берём токеном полки каталога: в палитре это
   единственный чистый белый. */
.checkout-body:has(> .flow-steps),
.checkout-body > .flow-steps {
  background: var(--skz-shelf, #FFFFFF);
}

/* 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) с ссылкой «Назад» на страницах чекаута НЕ
   показывается вовсе: её перекрывает единая шапка сайта (site-header.css,
   body.has-skz-topbar). Путь назад у покупателя один — строка шагов ниже,
   поэтому закреплена именно она. Правила ниже остаются для страниц без единой
   шапки. */
.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;
  /* Отбивка блока по шкале ДС (решение владельца 02.09.2026): сверху M,
     снизу L. Прежде было `margin: 20px auto 0` — снизу ноль, и карточка
     заказа упиралась прямо в подвал: на других страницах воздух создаёт
     предподвал, а на чекауте его нет намеренно, чтобы не отвлекать от
     оплаты. Ступени подставляют мобильные значения сами. */
  margin-inline: auto;
  margin-block: var(--skz-block-m, 64px) var(--skz-block-l, 96px);
  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);
}
/* Панель покупателя липнет к верху — но останавливается ПОД шапкой, а не под
   краем окна: шапка залипающая и лежит поверх (z-index 50). Высоту сообщает
   сама шапка (--skz-header-h, см. site-header.js); запасные 69px — её высота
   на компьютере, на случай если скрипт не отработал. До 15.09.2026 здесь было
   голое top:16px, и первые 53px панели («Покупатель» и часть подписи) всё
   время стояли под меню. */
.ck-card--payer {
  position: sticky; top: calc(var(--skz-header-h, 69px) + 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 16px;
  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 8px;
  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: 16px 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: -4px 0 16px;
  color: var(--skz-gray-warm);
  font-size: .85rem; line-height: 1.45;
}

/* ─── Блок книги (состав) ──────────────────────────────────────────────────── */
.ck-section { margin: 16px 0; }
.ck-book {
  padding: 16px;
  background: var(--skz-sand);
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  margin-bottom: 16px;
}
/* Шапка карточки — обложка, кому книга и её цена. Опции лежат ниже, внутри той
   же карточки: у каждой книги покупки свой выбор. */
/* Карточка книги: слева обложка, справа три строки характеристик и сразу под
   ними цена, а название — на всю ширину под ними (решение владельца
   02.09.2026). Прежде название теснилось справа от обложки в узкой колонке и
   переносилось по три-четыре раза, а цена улетала к правому краю. */
.ck-book__head {
  display: grid;
  /* Колонка обложки равна самой обложке: 132 px (решение владельца 14.09.2026).
     Прежние 88 остались бы шире картинки, и характеристики налезали бы на неё. */
  grid-template-columns: 132px 1fr;
  gap: 0 16px;
  align-items: start;
}
/* Порядок в правой колонке: название, под ним характеристики (решение
   владельца 14.09.2026). Цены здесь нет вовсе — сумму показывает панель
   покупателя справа, и две цены на одном экране только спорили друг с другом.

   Текст растянут по высоте обложки: название прижато к её верхнему краю,
   характеристики — к нижнему (решение владельца 14.09.2026). Раньше оба блока
   висели сверху, а под ними до низа обложки пустовало 43px на компьютере —
   колонка выглядела незакреплённой. Растягивается средняя строка сетки,
   поэтому при длинном названии (телефон, две-три строки) блоки просто сходятся
   к своему естественному расстоянию и ничего не ломается. */
.ck-book__head { grid-template-rows: auto 1fr auto; }
.ck-book__cover { grid-column: 1; grid-row: 1 / span 2; }
.ck-book__title { grid-column: 2; grid-row: 1; align-self: start; margin: 0 0 8px; }
.ck-book__type  { grid-column: 2; grid-row: 2; align-self: end; }
.ck-book__side  { grid-column: 2; grid-row: 3; margin: 8px 0 0; justify-self: start; text-align: left; }
.ck-book__hero {
  margin: 2px 0 0;
  font-size: .85rem; color: var(--skz-gray-warm);
}
.ck-book__remove {
  margin-top: 8px; padding: 0;
  background: none; border: 0;
  font-family: var(--skz-font-sans); font-size: .78rem;
  color: var(--skz-gray-warm); text-decoration: underline;
  cursor: pointer;
}
.ck-book__remove:hover { color: var(--skz-chocolate); }
/* Опции внутри книги: отделены линией, отступы плотнее, чем у блока на всю
   страницу, — иначе покупка из двух книг не помещается на экран. */
.ck-book .ck-section {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--skz-line);
}
/* Пригласить добавить ещё книгу. Пунктир — принятый в системе знак «здесь
   появится ещё один элемент», а не сплошная кнопка действия. */
.ck-addbook {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px dashed var(--skz-line);
  border-radius: 8px;
  color: var(--skz-chocolate);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.ck-addbook:hover { border-color: var(--skz-gold-hover); background: var(--skz-sand); }
.ck-addbook__plus {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border: 1px solid var(--skz-line-control); border-radius: 50%;
  font-size: 1.1rem; line-height: 1;
  color: var(--skz-gold-hover);
}
.ck-addbook__text { font-size: .95rem; }

/* На узком экране правая колонка карточки съедала ширину названия — «Как Тимофей
   стал настоящим принцем» ломалось на четыре строки. Цена и «Убрать» уходят под
   описание отдельной строкой. */
@media (max-width: 640px) {
  .ck-book__head { flex-wrap: wrap; }
  .ck-book__info { flex: 1 1 100%; order: 2; }
  .ck-book__cover { order: 1; }
  .ck-book__side {
    order: 3;
    margin-left: 0;
    flex: 1 1 100%;
    display: flex; align-items: baseline; justify-content: space-between;
    text-align: left;
  }
  .ck-book__remove { margin-top: 0; }
}
.ck-book__cover {
  /* 132 px — прежние 88 в полтора раза (решение владельца 14.09.2026):
     обложка и есть то, что человек покупает, и разглядеть её он должен здесь. */
  width: 132px; height: 132px;
  object-fit: cover;
  /* Рамки нет (решение владельца 02.09.2026): у обложки с бликом уже есть
     собственный край, а светлая линия поверх читалась обводкой-наклейкой.
     Форму держит тень — та же, что у карточек каталога. */
  border-radius: 2px;                 /* книга — прямоугольный объект (r2) */
  box-shadow: var(--skz-shadow-cover);
  flex-shrink: 0;
}
.ck-book__info { flex: 1; min-width: 0; }
.ck-book__type {
  margin: 0 0 4px;
  font-size: .7rem; color: var(--skz-gray-warm);
  text-transform: uppercase; letter-spacing: .1em;
  /* Три коротких строки — кегль остаётся канонным на любом экране. Вариант
     «в две строки» проверялся и отклонён: чтобы «Твёрдая обложка · Переплёт
     Layflat» влезла в строку на 390, шрифт пришлось бы ужать до 8px. */
  /* pre-line: при смене формата строки подставляются скриптом переводом
     строки, а не разметкой — <br> из серверного рендера работает как прежде. */
  white-space: pre-line;
}
.ck-book__title {
  /* Отступы задаёт правило сетки выше: название выровнено по верхнему краю
     обложки, и margin-top сдвигал бы его вниз, ломая выравнивание. */
  font-family: var(--skz-font-serif);
  font-size: 1.05rem; font-weight: 800;
  color: var(--skz-chocolate);
}
.ck-book__price {
  margin: 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 12px;
  align-items: center;
  /* Плотнее (решение владельца 02.09.2026): вместе с укороченными подписями
     карточка обложки стала ниже примерно на треть. */
  padding: 12px 16px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  background: transparent;            /* невыбранное вжато в форзац карточки */
  margin-bottom: 8px;
  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 { background: var(--skz-surface); border-color: var(--skz-line-deep); }
/* Выбранное — поднято над карточкой (см. .ck-tile). */
.ck-opt:has(input:checked) {
  border-color: var(--blue-core);
  background: var(--skz-surface);
  box-shadow: inset 0 0 0 1px var(--blue-core), var(--skz-shadow-card);
}
.ck-opt:not(:has(input:checked)) .ck-opt__main { color: var(--skz-gray-warm); }
.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; line-height: 1.35; color: var(--skz-gray-warm); }
.ck-opt__price {
  grid-area: price; align-self: center;
  /* Цена — заголовочной гарнитурой (канон ДС, токен `price`). До смены шрифта
     цены набирались Golos: в Playfair не было знака рубля. В Cygre он свой. */
  font-family: var(--skz-font-serif);
  font-weight: 800; color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
  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 12px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  background: transparent;            /* невыбранное вжато в форзац карточки */
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ck-extra:hover { background: var(--skz-surface); }
.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-line-deep); }
/* Выбранное — поднято над карточкой, то же правило, что у плашек формата. */
.ck-extra:has(input:checked) {
  border-color: var(--blue-core);
  background: var(--skz-surface);
  box-shadow: inset 0 0 0 1px var(--blue-core), var(--skz-shadow-card);
}
.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='%23FFFFFF' 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-family: var(--skz-font-serif);
  font-weight: 800; color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.ck-extra:has(input:focus-visible) { outline: 2px solid var(--skz-coral); outline-offset: 2px; }

/* ─── Подарки к книге (карточки с примером) ─────────────────────────────────
   Раскраска и стикеры — не изменение книги, а отдельный предмет, который можно
   докупить. Строка с подписью такой предмет не продаёт: клиент не представляет,
   что получит. Поэтому у группы своя вёрстка — карточка с картинкой-примером.
   Вся карточка это <label>: клик по любому месту, включая кнопку, переключает
   чекбокс внутри. */
/* Ровно две колонки, а не auto-fit: при одном подарке auto-fit растягивает
   карточку на всю ширину корзины, и квадратная картинка вырастает до ~680 px —
   подарок за 259 ₽ начинает занимать больше экрана, чем сама книга. */
/* Плашки выбора переплёта: две в ряд, решает снимок. Словами «Layflat» и
   «классический» разницу не объяснить — на картинке видно сразу, плоско ли
   лежит разворот.

   Раскладка (решение владельца 16.09.2026): на телефоне плашки идут одна под
   другой, на компьютере — две в ряд. На узком экране две колонки сжимали
   снимок до 145px, и разница переплётов в нём пропадала — а именно снимок
   тут главный аргумент. В столбик он занимает всю ширину и виден целиком;
   плата за это — лишняя прокрутка.

   Отступы, радиусы и кегли — из дизайн-системы: шкала 4/8/12/16/24, радиус
   карточки 8 и кнопки 6, полных скруглений на публичном сайте не бывает. */
.ck-tiles {
  display: grid;
  grid-template-columns: 1fr;         /* телефон: одна под другой */
  gap: 12px;
  margin-bottom: 8px;
}
@media (min-width: 641px) {
  .ck-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Выбранный вариант — поднят: белый лист карточки, синяя кромка действия,
   бумажная тень. Невыбранный — вжат: прозрачный, сливается с голубым форзацем
   карточки, текст приглушён. Контраст работает на нас — заметнее тот вариант,
   который выбран по умолчанию (замечание владельца 14.09.2026).

   ⚠️ После смены палитры 14.09.2026 приём держится на ДРУГОЙ паре цветов.
   Раньше карточка была кремовой, и «поднять» значило осветлить до самого
   светлого листа палитры — разница выходила в полтона. Теперь подложка опций
   голубая (форзац), и белый лист выбранного отделяется от неё сам, без
   подкраски: вжатому достаточно быть прозрачным. Кромка — inset поверх рамки, а не 2px border: толщина рамки при
   переключении сдвигала бы содержимое на пиксель. */
.ck-tile {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  background: transparent;            /* невыбранное вжато в форзац карточки */
  overflow: visible;                  /* метка выбора выступает за угол */
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ck-tile:hover { background: var(--skz-surface); border-color: var(--skz-line-deep); }
.ck-tile:has(input:checked) {
  background: var(--skz-surface);
  border-color: var(--blue-core);
  box-shadow: var(--skz-shadow-card);
}
/* Рамка рисуется ПОВЕРХ содержимого: картинка лежит во всю ширину плитки и
   перекрывала верхнюю кромку — у выбранного формата рамка обрывалась над
   снимком (замечено владельцем 16.09.2026). Псевдоэлемент повторяет геометрию
   плитки, лежит выше картинки и не ловит нажатия. */
.ck-tile::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
  transition: border-color .15s;
}
.ck-tile:has(input:checked)::after { border-color: var(--blue-core); border-width: 2px; }
.ck-tile:hover:not(:has(input:checked))::after { border-color: var(--skz-line-deep); }
.ck-tile:not(:has(input:checked)) .ck-tile__size,
.ck-tile:not(:has(input:checked)) .ck-tile__kicker { color: var(--skz-gray-warm); }
.ck-tile:has(input:focus-visible) { outline: 2px solid var(--skz-coral); outline-offset: 2px; }
.ck-tile input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
/* Метка выбранного варианта. Рамки и заливки мало: на телефоне их легко не
   заметить, а переплёт — решение, которое должно читаться однозначно. Квадрат
   со скруглением 6, а не кружок: полных скруглений на сайте не бывает. */
.ck-tile__check {
  position: absolute; top: -8px; left: -8px; z-index: 2;
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--blue-core); color: var(--skz-text-on-primary);
}
.ck-tile:has(input:checked) .ck-tile__check { display: inline-flex; }
/* Пометка рекомендуемого варианта — кегль и трекинг служебной строки.
   Цвет — латунь: после разведения ролей 14.09.2026 синий означает действие
   (кромка выбора, кнопки), а латунь — искру и отметку. Синяя пометка рядом с
   синей кромкой читалась бы как вторая кнопка. Текст по латуни — чернила. */
.ck-tile__badge {
  position: absolute; top: -8px; right: 8px; z-index: 2;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--brass); color: var(--skz-chocolate);
  font-family: var(--skz-font-sans);
  font-size: 11px; line-height: 1.2; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  /* Одной строкой на всех экранах. Перенос на две строки был нужен, пока
     плашки стояли по две в ряд: там плашка выходила 145px, а пометка в строку
     требует 177. С переходом на столбик (16.09.2026) плашка занимает всю
     ширину — 328px на обычном телефоне и 258px на самом узком, места вдвое
     больше нужного. */
  white-space: nowrap;
}
.ck-tile__pic {
  display: block;
  width: 100%; height: auto;
  /* 4:3 — пропорция самих снимков (замена владельца 29.09.2026): кроп не
     нужен, корешок и низ разворота — то, чем форматы и различаются, — видны. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--skz-line);
  background: var(--skz-bg);
}
.ck-tile__pic--empty {
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(169,155,120,.10) 8px 16px),
    var(--skz-bg);
}
.ck-tile__body { display: flex; flex-direction: column; gap: 4px; padding: 12px; flex: 1; }
/* Размер — главное в плашке, поэтому он набран антиквой заголовков. */
.ck-tile__size {
  font-family: var(--skz-font-serif); font-weight: 800;
  font-size: 22px; line-height: 1.3;
  color: var(--skz-chocolate);
}
.ck-tile__kicker {
  font-family: var(--skz-font-sans); font-weight: 500;
  font-size: 14px; line-height: 1.4;
  color: var(--skz-chocolate);
}
.ck-tile__note {
  /* 13px (helper из ДС), а не 14: при 14 полное описание 23×23 не влезало в три
     строки и обрывалось на «иллюстрация не…» — замечание владельца 14.09.2026. */
  font-size: 13px; line-height: 1.4;
  color: var(--skz-gray-warm);
  /* Описание не длиннее трёх строк: иначе соседние плашки разъезжаются по
     высоте и перестают сравниваться. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Описание — полное на обоих экранах: в столбик ширины хватает и на телефоне,
   а короткий вариант писался под сжатую колонку, которой больше нет. */
.ck-tile__note--short { display: none; }
.ck-tile__note--full { display: -webkit-box; }
.ck-tile__price {
  margin-top: auto; padding-top: 8px;
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.05rem; color: var(--skz-chocolate);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* На компьютере плашка остаётся столбиком — снимок во всю ширину, текст под
   ним (решение владельца 16.09.2026). До этого снимок лежал слева в 96px: при
   таком размере плоский разворот и изгиб страниц почти не различались, а ведь
   ради этого сравнения плашка и существует. Теперь снимок ~450px — разница
   читается с одного взгляда, и обе плашки выходят близкими к квадрату. */
@media (min-width: 641px) {
  .ck-tile__badge { top: -8px; right: 12px; }
}
.ck-addons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.ck-addon {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--skz-line);
  border-radius: 8px;
  background: transparent;            /* невыбранное вжато в форзац карточки */
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ck-addon:hover { background: var(--skz-surface); border-color: var(--skz-line-deep); }
/* Выбранное — поднято над карточкой, то же правило, что у плашек формата. */
.ck-addon:has(input:checked) {
  border-color: var(--blue-core);
  background: var(--skz-surface);
  box-shadow: inset 0 0 0 1px var(--blue-core), var(--skz-shadow-card);
}
.ck-addon:has(input:focus-visible) { outline: 2px solid var(--skz-coral); outline-offset: 2px; }
.ck-addon input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ck-addon__pic {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--skz-line);
  background: var(--skz-bg);
}
/* Пример ещё не загружен: нейтральное поле-заглушка вместо снимка. Карточка при
   этом рабочая — «нечего показать» не повод спрятать оплачиваемую услугу. */
.ck-addon__pic--empty {
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(169,155,120,.10) 8px 16px),
    var(--skz-bg);
}
.ck-addon__body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; flex: 1; }
.ck-addon__title { font-weight: 600; font-size: .92rem; color: var(--skz-chocolate); }
.ck-addon__teaser { font-size: .78rem; color: var(--skz-gray-warm); line-height: 1.4; }
.ck-addon__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 10px;
}
.ck-addon__price {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-family: var(--skz-font-serif);
  font-weight: 800; color: var(--skz-coral);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
/* Кнопка-обманка: выглядит как действие, но это часть label. Настоящей кнопкой
   быть не может — вложенный <button> внутри <label> перехватывал бы клик. */
/* Тот же размер, что у кнопки карточки в каталоге: карточка дополнения устроена
   так же — цена слева, кнопка справа, — и разнобой был заметен сразу.
   Ширину держит min(), а не max-width: max-width в этом файле сторожит
   дизайн-гард, он следит за осями макета. */
.ck-addon__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(180px, 100%); min-height: 44px;
  font-family: var(--skz-font-sans);
  font-size: .82rem; font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--skz-coral);
  color: var(--skz-coral);
  background: transparent;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ck-addon__cta-on { display: none; }
.ck-addon:hover .ck-addon__cta { background: var(--skz-coral); color: var(--skz-text-on-primary); }
.ck-addon:has(input:checked) .ck-addon__cta {
  background: var(--skz-coral); color: var(--skz-text-on-primary);
}
.ck-addon:has(input:checked) .ck-addon__cta-add { display: none; }
.ck-addon:has(input:checked) .ck-addon__cta-on { display: inline; }
/* Узкий экран: карточки в столбик, картинка ниже — чтобы подарки не съедали
   весь первый экран корзины. */
@media (max-width: 640px) {
  .ck-addons { grid-template-columns: 1fr; }
  .ck-addon__pic { aspect-ratio: 16 / 9; }
}

/* ─── Цена опции: текущая и зачёркнутая старая ──────────────────────────────
   Колонка price растёт по контенту, поэтому две цены ставим в столбик — так
   строка не разъезжается по ширине на узких экранах. */
.ck-opt__price, .ck-extra__price {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.ck-price__old {
  font-weight: 400; font-size: .78rem;
  color: var(--skz-gray-warm);
  text-decoration-thickness: 1px;
}
.ck-price__now { font-weight: 600; }

/* ─── Опция, входящая в другую («Убрать QR» внутри «Убрать брендинг») ───────
   Отмечена и заблокирована: услуга включена, но платить второй раз не нужно.
   Причина написана словами в ck-extra__hint — серого цвета мало, а disabled
   к тому же не озвучивается скринридером. */
.ck-extra.is-included { opacity: .72; cursor: default; }
.ck-extra.is-included:hover { border-color: var(--skz-line); }
.ck-extra__hint { display: block; margin-top: 3px; color: var(--skz-coral); }

/* ─── Поля формы (рецепт ДС) ────────────────────────────────────────────────
   Метка сверху (видимая, не placeholder), поле — кремовое с линией-рамкой,
   фокус — латунная рамка + мягкое кольцо. */
.ck-field { display: block; margin-bottom: 14px; }
/* Имя + Фамилия в одну строку на десктопе, в столбик на узком экране.
   На мобиле колонки схлопываются — вертикальный отступ даёт margin самих полей. */
.ck-field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ck-field-row-2 { grid-template-columns: 1fr; gap: 0; } }
.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-control);
  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(--blue-core);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 22%, transparent);
  /* Прозрачный контур — видим в forced-colors/high-contrast; латунная рамка+кольцо
     остаются видимым индикатором фокуса для обычных пользователей. */
  outline: 2px solid transparent; outline-offset: 2px;
}
.ck-field textarea { display: block; }

/* ─── Подсказка под полем ───────────────────────────────────────────────────
   Ошибку ввода показываем у самого поля, а не только общей строкой над
   кнопкой: внизу её на телефоне не видно без прокрутки, и человек не понимает,
   какое из полей поправить. Три вида — ошибка (красная), подсказка-исправление
   и мягкое предупреждение (обе латунные). */
.ck-field__note {
  display: block;
  margin-top: 6px;
  font-family: var(--skz-font-sans);
  font-size: .8rem; line-height: 1.35;
  color: var(--skz-gold-hover);
}
.ck-field__note--error { color: var(--skz-warning); }
.ck-field__fix {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.ck-field.is-invalid input { border-color: var(--skz-warning); }
.ck-field.is-invalid input:focus {
  border-color: var(--skz-warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--skz-warning) 20%, transparent);
}

/* Покупатель + Получатель на доставке: десктоп — 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-control);
  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(--blue-core);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 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); }
/* Нажатие — цветом, а не сжатием: состояния кнопок только цветом (13.09.2026). */
.ck-cta:active:not(:disabled) { background: var(--skz-coral-active); }
.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); }
.ck-speedpay__fallback:active:not(:disabled) { background: var(--skz-coral-active); }
.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: static; }
/* Поле города и селектор страны стоят в одной строке, но считают высоту
   по-разному: input отдавал 43px, select — 48px, и строка выглядела ступенькой.
   Общая min-height с одинаковым line-height выравнивает их независимо от
   шрифта и браузера. */
.ck-city input {
  width: 100%; box-sizing: border-box;
  min-height: 46px; line-height: 1.4;
  padding: 11px 14px;
  border: 1px solid var(--skz-line-control);
  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(--blue-core);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 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-control);
  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;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--skz-sand);
  border: 1px solid var(--skz-line);
  border-radius: 6px;
}
.ck-city-selected strong { font-weight: 600; }
/* Название города и регион — вспомогательная строка, а не заголовок: плашке
   незачем быть выше полей ввода, которые она подытоживает. */
.ck-city-selected__text { font-size: .92rem; line-height: 1.3; }

/* Страна + город — строка с фиксированной шириной селектора */
.ck-city-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: stretch;
  /* Якорь для выпадающего списка городов: список раскрывается на ширину ВСЕЙ
     строки, а не одного поля — длинным названиям с областью в поле тесно. */
  position: relative;
}
.ck-country {
  appearance: none; -webkit-appearance: none;
  background: var(--skz-surface);
  border: 1px solid var(--skz-line);
  border-radius: 6px;
  min-height: 46px; line-height: 1.4;
  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='%23545D70' 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(--blue-core);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
@media (max-width: 600px) {
  /* Одна строка и на телефоне (решение владельца 02.09.2026): селект страны
     сжимается по своему содержимому, городу — всё остальное. Самая длинная
     страна списка («Казахстан») занимает ~120px, городу на 390px остаётся
     ~250 — больше, чем длина подсказки-плейсхолдера. */
  .ck-city-row { grid-template-columns: auto minmax(0, 1fr); }
  .ck-country { padding-left: 10px; padding-right: 28px; }
}

/* ─── Табы (ПВЗ / Курьер) ───────────────────────────────────────────────────
   Активный — форзац-фон + латунная рамка + «блинт»-кромка inset. */
.ck-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ck-tab {
  /* Названия короткие и в одну строку («В пункт выдачи» / «Курьером до двери»),
     поэтому кнопке не нужен запас высоты под перенос: 10px по вертикали были
     рассчитаны на двухстрочный вариант с «СДЭК» внутри. */
  flex: 1; padding: 8px 10px;
  white-space: nowrap;
  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(--blue-core);
  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-control);
  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(--blue-core);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 22%, transparent);
  outline: 2px solid transparent; outline-offset: 2px;
}
.ck-pvz-loading { color: var(--skz-gray-warm); font-size: .88rem; font-style: italic; }
/* Подсказка над курьерскими тарифами: клиент на этой вкладке не видит карточек
   соседних пунктов, а разница в цене бывает кратной. */
.ck-nearby-hint {
  margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid var(--blue-core); border-radius: 6px;
  background: var(--skz-sand);
  font-size: .9rem; line-height: 1.4; color: var(--skz-chocolate);
}
.ck-linkbtn {
  background: none; border: 0; padding: 0; margin-left: 4px;
  font: inherit; color: var(--skz-gold-hover); text-decoration: underline; cursor: pointer;
}
.ck-linkbtn:hover { text-decoration: none; }

/* Ближайшие пункты в соседних городах — предложение, а не список выбора:
   отделено от сообщения «пунктов нет» и не притворяется обычным перечнем ПВЗ,
   иначе клиент решит, что это пункты в его городе. */
.ck-nearby { margin-top: 12px; }
.ck-nearby__title {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--skz-gold-hover); margin: 0 0 8px;
}
.ck-nearby__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--skz-line); border-radius: 6px;
  background: var(--skz-surface);
}
.ck-nearby__item:last-child { margin-bottom: 0; }
.ck-nearby__city { font-weight: 600; color: var(--skz-chocolate); }
.ck-nearby__addr { font-size: .85rem; color: var(--skz-gray-warm); margin-top: 1px; }
.ck-nearby__meta { font-size: .82rem; color: var(--skz-chocolate); margin-top: 3px; }

/* «Вариантов нет» — это факт о городе, а не ожидание: прямой шрифт вместо
   курсива загрузки, чтобы клиент не ждал, что список вот-вот дорисуется. */
.ck-pvz-empty {
  color: var(--skz-ink); font-size: .9rem; font-style: normal;
  padding: 12px 14px; border: 1px solid var(--skz-line); border-radius: 6px;
  background: var(--skz-paper-2, transparent);
}
.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(--blue-core);
  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-item__partner {
  display: inline-block;
  margin-top: 6px; padding: 2px 8px;
  border: 1px solid var(--skz-line); border-radius: 999px;
  font-size: .72rem; color: var(--skz-gold-hover);
}

/* Баннер «Выбран пункт выдачи» — над списком ПВЗ (успех) */
.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(--blue-core);
  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); display: flex; align-items: center; gap: 7px; }
.ck-tariff-item__icon { flex: 0 0 18px; color: var(--skz-gold, #F4C451); display: flex; }
.ck-tariff-item__icon svg { width: 18px; height: 18px; }
.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;
}
/* Полный тариф СДЭК рядом с ценой по потолку: без него компенсация невидима —
   клиент читает 490 ₽ как «просто такая доставка», а не как нашу скидку. */
.ck-tariff-item__price-was {
  display: block;
  font-size: .8rem; font-weight: 500;
  color: var(--skz-gray-warm);
  text-decoration: line-through;
  margin-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Страница оплаты (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; }
/* Та же раскладка, что у карточки книги в корзине: обложка слева на две
   строки, справа характеристики и прижатая к ним цена, название — на всю
   ширину под ними (решение владельца 02.09.2026). */
.pay-summary__book {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 0 14px;
  align-items: start;
  margin-bottom: 16px;
}
.pay-summary__cover     { grid-column: 1; grid-row: 1 / span 2; }
.pay-summary__book-sub  { grid-column: 2; grid-row: 1; }
.pay-summary__book-price{ grid-column: 2; grid-row: 2; }
.pay-summary__book-name { grid-column: 1 / -1; grid-row: 3; }
.pay-summary__cover {
  width: 104px; height: 104px;
  border-radius: 2px;                    /* книга — прямоугольный объект (r2) */
  object-fit: cover;
  box-shadow: var(--skz-shadow-cover);
}
/* Название книги — заголовочным шрифтом, как в корзине (решение владельца
   02.09.2026): на оплате оно набиралось обычным Golos и выбивалось из ряда. */
.pay-summary__book-name {
  margin-top: 14px;
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.05rem;
  max-width: 22em; text-wrap: balance;
  color: var(--skz-chocolate);
}
/* pre-line: строки подставляются скриптом переводом строки при выборе формата;
   <br> из серверного рендера продолжает работать как прежде. */
.pay-summary__book-sub { font-size: .82rem; color: var(--skz-gray-warm); margin: 0; text-transform: uppercase; letter-spacing: .1em; white-space: pre-line; }
/* Цена прижата к характеристикам, как в корзине. */
.pay-summary__book-price {
  margin-top: 9px;
  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) {
  /* На телефоне раскладка та же, только обложка мельче: прежнее правило
     разворачивало блок в столбик по центру (наследие flex-вёрстки) и ломало
     сетку — характеристики уезжали под обложку. */
  .pay-summary__cover { width: 88px; height: 88px; }
  .pay-summary__book { grid-template-columns: 88px 1fr; }
  .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 { filter: brightness(.95); }
.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; }
.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-control);
  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(--blue-core);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 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); }
.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 { background: var(--skz-coral-active); }
.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) {
  /* Телефон: ступени те же, значения подставляются автоматически (M=40, L=48). */
  .ck-main {
    padding: 0; gap: 10px; grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
    margin-block: var(--skz-block-m, 40px) var(--skz-block-l, 48px);
  }
  .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(--blue-core);
  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(--blue-core) 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;
  border: 1px solid var(--blue-core);
}
.lk-tab--admin:hover { background: var(--blue-core); color: var(--skz-text-on-primary); border-color: 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-control); 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(--blue-core); 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(--blue-core);
  box-shadow: 0 1px 0 var(--skz-line-deep), inset 4px 0 0 var(--blue-core), 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);
  box-shadow: var(--skz-shadow-cover);
  display: block;
}
/* Обложка неоплаченной книги — ссылка в предпросмотр. Обёртка держит те же
   88×88, что и сама картинка, иначе она выпадает из сетки .lk-order__head. */
.lk-order__cover-link {
  display: block; width: 88px; height: 88px;
  border-radius: 2px;
}
.lk-order__cover-link:focus-visible {
  outline: 2px solid var(--blue-core); outline-offset: 3px;
}
/* В режиме выбора книг футер карточки скрыт — обложка тоже перестаёт уводить
   со страницы, иначе клик мимо чекбокса выбрасывает из выбора. */
.lk-is-selecting .lk-order__cover-link { pointer-events: none; }
.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; }
/* Кнопки карточек по всему сайту — одного размера: 180×44, как в каталоге
   (решение владельца 24.08.2026). Раньше ширина шла по длине надписи, и в одном
   ряду стояли «Отменить» 98px и «Перейти к оплате →» 169px — ряд выглядел
   рваным. Задано min-width, а не width: надписи длиннее 180px («Проверить и
   утвердить →» просит 223) не должны обрезаться, они растут дальше. На узком
   экране правило снимается ниже по файлу — там кнопки намеренно ужимаются,
   чтобы пара влезла в одну строку (правка владельца 24.07.2026). */
:is(.lk-order__foot, .lk-product__actions) .lk-cta {
  min-width: 180px; min-height: 44px; justify-content: center;
}

/* ── Режим выбора книг ──────────────────────────────────────────────────────
   До появления purchase-модели одна выбранная книга открывает текущий checkout;
   совместная оплата нескольких книг обозначена честным disabled-состоянием. */
.lk-selection-bar {
  position: fixed;
  /* Всегда у нижнего края: cookie-плашка встаёт над панелью, а не двигает её. */
  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 {
  /* Flex, а не grid с колонками под фиксированное число узлов: этапы задаются
     в lib/orderProgress.js, и добавление узла не должно требовать правки CSS
     (на четырёх зашитых колонках пятый узел уезжал за карточку). */
  display: flex;
  align-items: flex-start; gap: 0;
  padding: 8px 4px 2px;
}
.lk-tl__step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; flex: 0 1 auto; 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(--blue-core); }
.lk-tl__dot--active::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-core); }
.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; flex: 1 1 auto; min-width: 10px; background: var(--skz-line); margin: 11px 6px 0; }
/* Подпись текущего этапа под компактным таймлайном — только для узких экранов
   (см. медиазапрос ниже): на десктопе активный узел и так подписан. */
.lk-tl__now {
  display: none;
  margin: 6px 0 0; text-align: center;
  font-family: var(--skz-font-sans); font-size: .72rem; font-weight: 600;
  color: var(--skz-chocolate);
}
.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; }
/* Лента-ляссе над активным узлом убрана (решение владельца 30.07): активный
   узел и так читается латунным кольцом с ядром (.lk-tl__dot--active) плюс
   aria-current, а свисающая лента добавляла визуального шума в шапку карточки. */
/* Мобильный таймлайн заказа — вертикальный (эталон ≤820px) */
@media (max-width: 820px) {
  .lk-tl--order { flex-direction: column; align-items: stretch; 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__dot--active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 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;
}
/* Возврат оформлен: заказ закрыт, но не «доставлен» — нейтральный тон архива, без зелёной точки */
.lk-pill--refunded { color: var(--skz-gray-warm); }

/* ── Кнопки карточек (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); }
.lk-cta--primary:active { background: var(--skz-coral-active); }
.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, #B4402B);
  border-color: var(--danger-text, #B4402B);
  background: var(--danger-soft, #FBE9E4);
}
.lk-order__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ── Пустые состояния ──
   ⚠️ Здесь стояла лишняя закрывающая скобка (единственная во всём файле:
   @media со строки 1835 закрывается на 1855, эта была ничьей). Браузер,
   восстанавливаясь после ошибки, съедал ровно следующий блок — правило
   .lk-empty в CSSOM не доезжало, хотя .lk-empty__title и .lk-empty__cta
   разбирались нормально. На экране оставались голый заголовок и кнопка,
   прижатые к левому краю: слот с пунктиром не рисовался никогда.

   Слот — карточка во всю ширину колонки кабинета, содержимое по центру,
   с искрой-якорем. Ширину не сужаем: рядом стоят блок входа и секции с
   книгами на всю ширину, и узкий слот сбивал бы вертикальную ось страницы.
   Отступы из шкалы §3; прежние 36/20/14px в неё не входили. */
.lk-empty {
  margin: 0 0 var(--skz-space-8);
  padding: var(--skz-space-12) var(--skz-space-8);
  background: var(--skz-surface);
  border-radius: var(--skz-radius-sm);
  /* Пунктир латунью, а не служебной линией: заливка слота отличается от фона
     страницы всего в 1,06 — границу держит только рамка, а --skz-line-deep даёт
     к фону 1,62 и на экране пропадает. Латунь — 3,57, канон декора ≥3:1. */
  border: 1px dashed var(--blue-core);
  text-align: center;
  color: var(--skz-gray-warm);
}
/* Искра в кружке-форзаце: пустой экран без зацепки для глаза читается как
   недогрузившийся. Инлайн-SVG, а не глиф ✦ — эмодзи-иконки канон запрещает. */
.lk-empty__mark {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto var(--skz-space-4);
  background: var(--skz-sand); color: var(--skz-gold-hover);
  box-shadow: inset 0 0 0 1px var(--skz-light-tan);
  border-radius: 50%;
}
.lk-empty__mark svg { width: 20px; height: 20px; }
.lk-empty__title {
  font-family: var(--skz-font-serif);
  font-weight: 800; font-size: 1.375rem;
  color: var(--skz-chocolate);
  margin: 0 0 var(--skz-space-2);
}
.lk-empty__text { max-width: 44ch; margin: 0 auto; font-size: 1rem; line-height: 1.55; }
/* Рецепт primary из §4: Golos 600, кегль 16, padding 17×36, r6. */
.lk-empty__cta {
  display: inline-flex; margin-top: var(--skz-space-6);
  padding: 17px 36px; border-radius: var(--skz-radius-xl);
  background: var(--skz-coral); color: var(--skz-text-on-primary);
  text-decoration: none; font-weight: 600; font-size: 1rem;
  transition: background-color .2s ease-out, box-shadow .2s ease-out;
}
.lk-empty__cta:hover { background: var(--skz-coral-hover); }
@media (max-width: 640px) {
  .lk-empty { padding: var(--skz-space-8) var(--skz-space-6); }
  .lk-empty__cta { width: 100%; justify-content: center; padding-inline: var(--skz-space-6); }
}

/* ── Страница заказа /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);
  box-shadow: var(--skz-shadow-cover);
  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(--blue-core);
  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) ── */
/* Верхний отступ обязателен: без него блок прилипал вплотную к тому, что стоит
   выше — на пустом кабинете кнопка «Перейти к каталогу» и карточка входа
   сходились в 0px и читались как один слипшийся элемент. Чиним в самом блоке,
   а не у соседа: сверху него может оказаться и список книг, и пустой слот. */
.lk-guest-login {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 20px 22px; margin: var(--skz-space-8) 0 var(--skz-space-6);
  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-hover);
  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-control);
  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(--blue-core);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-core) 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, .lk-order__cover-link { 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; }
  /* Пять подписей-существительных в ряд на 375px рвутся по слогам
     («Типогра-фия», «Опла-та») — читается как брак вёрстки. Прячем их
     визуально (скринридер по-прежнему читает) и называем текущий этап
     строкой под узлами: в списке важно «где заказ», а не все пять имён. */
  .lk-order .lk-tl__label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .lk-order .lk-tl__bar { margin-top: 10px; min-width: 6px; }
  .lk-order .lk-tl__now { display: block; }
  /* Табы кабинета — ОДНА строка без скрола (правка владельца 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; } /* стрелка «Выйти →» не влезает в одну строку */
  /* Счётчик книг остаётся и на телефоне (решение владельца 04.09.2026): в шапке
     сайта бейдж показывает только книги, ждущие действия, а здесь — сколько их
     всего. Прежде цифру прятали ради одной строки табов; проверено на 360px —
     пять пунктов со счётчиком в строку помещаются. */
  .lk-tab__count { font-size: .72rem; }
  .lk-tab--logout { margin-left: auto; }
  .lk-cta { min-height: 44px; }
  /* Кнопки футера карточки — в ОДНУ строку (правка владельца 24.07): и пара
     «Отменить + CTA», и «Проверить и утвердить + Подробности» не должны
     складываться в столбик. Ужимаем кегль/паддинги, primary тянется. */
  /* Кнопки стоят в одну строку, ПОКА влезают, и переносятся, когда нет.
     Раньше здесь стоял безусловный `flex-wrap: nowrap`, и ряд, которому не
     хватало ширины, просто вылезал за карточку: на 360px пара «Проверить и
     утвердить» + «Подробности» просила 327px против 320 доступных, и обрезались
     и кнопка, и цена рядом. Правило одной строки от 24.07 сохраняется там, где
     оно выполнимо, а обрезанная кнопка — не «одна строка», а брак.
     Замер 04.09.2026: паре нужен 327px, а внутри карточки есть 288 на 360-м
     экране и 318 на 390-м — то есть на телефоне одна строка не выполнялась
     НИКОГДА, просто лишнее уезжало за край. Ужимать дальше некуда: поля уже
     12px, кегль 13px. Перенос честнее обрезки. */
  .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); }


/* ─── Справка про сроки/возврат/гарантию на шаге «Доставка» ───────────────
   Три строки с линейными иконками (рисованы под ДС: тонкая линия, латунь).
   Стоит после кнопки оплаты — это снятие сомнений, а не шаг оформления. */
.ck-info {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--skz-line, #E4E2DD);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ck-info__row { display: flex; gap: 14px; align-items: flex-start; }
.ck-info__icon {
  flex: 0 0 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--skz-line, #E4E2DD);
  border-radius: 10px;
  color: var(--skz-gold, #F4C451);
  background: var(--skz-surface, #FFFFFF);
}
.ck-info__icon svg { width: 22px; height: 22px; }
.ck-info__title {
  margin: 0 0 3px;
  font: 600 14px/1.3 var(--skz-font-sans, "Golos Text"), system-ui, sans-serif;
  color: var(--skz-text-light, #232E47);
}
.ck-info__text {
  margin: 0;
  font: 400 13px/1.55 var(--skz-font-sans, "Golos Text"), system-ui, sans-serif;
  color: var(--skz-gray-warm, #545D70);
}

/* ─── Обложка книги вне предпросмотра: корзина, оплата, кабинет ─────────────
   Договор владельца 03.09.2026: экранная обложка везде показывается как
   предмет — с тенью и бликом. Тень тут была с самого начала, блик не дошёл:
   он жил только в предпросмотре и в карточках каталога (замечание владельца
   13.09.2026 по скриншоту корзины — «тут есть блик?»).

   Обёртка, а не фон у самой картинки: блик — отдельный слой в режиме screen,
   он осветляет светлые места и не трогает тёмные, поэтому ложится на любую
   обложку. Файл тот же, что в предпросмотре и каталоге, иначе блеск на разных
   экранах был бы разный. */
.skz-cover {
  position: relative;
  display: block;
  flex-shrink: 0;
  border-radius: 2px;                 /* книга — прямоугольный объект (r2) */
  box-shadow: var(--skz-shadow-cover);
  overflow: hidden;
}
.skz-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.skz-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: url("/static/img/book-effect/cover-overlay.webp") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .85;
  pointer-events: none;               /* слой декоративный: клик проходит сквозь */
}
/* Картинке внутри обёртки собственная тень не нужна — её держит обёртка. */
.skz-cover > img { box-shadow: none; }

/* ⚠️ СТРОКА ШАГОВ ЗАКРЕПЛЕНА НА ЧЕКАУТЕ. Это единственный путь назад: ссылка
   «Назад» в ck-topbar скрыта единой шапкой сайта, а у покупателя часто нет и
   кнопки браузера — сайт открыт во встроенном браузере мессенджера. Пока
   строка уезжала вверх при прокрутке, человек, дошедший до итоговой суммы,
   оказывался в тупике: так вышло у заказа R3H1JW (16.09.2026) — клиентка
   увидела цену большего формата и не смогла вернуться, чтобы выбрать меньший.

   На телефоне в строке остаются название текущего шага и две кнопки-стрелки,
   левая ведёт на предыдущий шаг (styles.css, медиазапрос 640). */
.checkout-body .flow-steps {
  position: sticky;
  top: var(--skz-header-h, 69px);
  z-index: 15;
}

/* Фон и линия — во всю ширину окна, а сама строка остаётся в колонке контента.
   Полоса шагов прижата к шапке сайта, и подложка по ширине контейнера
   (1120 px) читалась бы как отдельная плашка посреди страницы. Рисуем её
   подложкой: элемент растянут за поля контейнера, но лежит ПОД содержимым. */
.checkout-body .flow-steps::after {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--skz-bg);
  border-bottom: 1px solid var(--skz-line);
}

/* Компьютер: у предыдущего шага — стрелка влево, чтобы возврат читался как
   возврат. Без неё ряд шагов выглядит подписью к странице, а не навигацией:
   владелец, глядя на макет, кнопки «назад» не нашёл (16.09.2026). На телефоне
   стрелки уже рисует styles.css — там из соседних шагов делаются кнопки. */
@media (min-width: 641px) {
  .checkout-body .flow-step--active ~ .flow-step { /* шаги впереди не трогаем */ }
  .checkout-body a.flow-step:has(+ .flow-step__sep + .flow-step--active)::before {
    content: "";
    width: 7px; height: 7px;
    margin-right: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
  }
}