/*
 * Единая геометрия публичных страниц «Сказкина».
 * Значения приходят из сгенерированного ds.generated.css; источник истины —
 * .interface-design/system.md. Новый шаблон обязан использовать .skz-shell
 * и, если есть колонки, .skz-grid-12 + .skz-span-*.
 */
*, *::before, *::after { box-sizing: border-box; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-core, #2B55C8);
  outline-offset: 3px;
}

.skz-shell,
.wrap,
.container-skz,
.ck-main,
.pay-main,
.lk-main,
.foot-wrap,
.skz-topbar__inner,
.site-prefooter__grid,
.flow-steps {
  width: 100%;
  max-width: var(--ds-shell-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--ds-shell-pad, 48px);
}

/* Шаги заказа («1 Предпросмотр — 2 Корзина — …») выравниваются по СОДЕРЖИМОМУ
   шапки: слева на логотипе, справа на «Кабинете». Коробка у них общая с
   .skz-topbar__inner, но полоска залита целиком, вместе с боковыми полями, —
   и потому казалась шире меню. Вычитаем поля из max-width; на узких экранах
   max-width не действует, поэтому мобильный вид не меняется. */
.flow-steps {
  max-width: calc(var(--ds-shell-max, 1200px) - var(--ds-shell-pad, 48px) * 2);
}

.skz-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ds-grid-gap, 24px);
}
.skz-span-4 { grid-column: span 4; }
.skz-span-5 { grid-column: span 5; }
.skz-span-6 { grid-column: span 6; }
.skz-span-7 { grid-column: span 7; }
.skz-span-8 { grid-column: span 8; }
.skz-span-12 { grid-column: 1 / -1; }
.skz-prose { max-width: 760px; }
.skz-prose--compact { max-width: 640px; }

.section-skz { padding-block: var(--ds-section-space, 96px); }

/* Главный ряд PDP: шесть колонок галерее, шесть — информации о книге. */
.hero-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ds-showcase-gap, 32px);
  row-gap: 0;
}
.hero-grid > .gallery { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.hero-grid > .product-title { grid-column: 7 / span 6; grid-row: 1; }
.hero-grid > .product { grid-column: 7 / span 6; grid-row: 2; }

.personalize-grid,
.trust-registry,
.site-prefooter__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ds-grid-gap, 24px);
}
.site-prefooter__grid { column-gap: var(--ds-grid-gap, 24px); }
.personalize-grid > .personalize-left { grid-column: span 7; }
.personalize-grid > .personalize-card-wrap { grid-column: span 5; }
.trust-registry > .trust-registry__heading { grid-column: span 4; }
.trust-registry > .trust-registry__list { grid-column: 6 / span 7; }
.site-prefooter__grid > .site-prefooter__art { grid-column: span 7; }
.site-prefooter__grid > .site-prefooter__text { grid-column: span 5; }

/* Чекаут: те же 12 колонок, что на главной и PDP. */
.ck-main {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ds-grid-gap, 24px);
}
.ck-main > .ck-card--cart { grid-column: span 8; }
.ck-main > .ck-card--payer { grid-column: span 4; }
.ck-main--single { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ck-main--single > * { grid-column: 3 / span 8; }

.pay-main {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ds-grid-gap, 24px);
}
.pay-main > .pay-summary,
.pay-main > .pay-methods { grid-column: span 6; }


@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > .gallery,
  .hero-grid > .product-title,
  .hero-grid > .product { grid-column: 1; grid-row: auto; }
  .personalize-grid,
  .trust-registry,
  .site-prefooter__grid { grid-template-columns: minmax(0, 1fr); }
  .personalize-grid > .personalize-left,
  .personalize-grid > .personalize-card-wrap,
  .trust-registry > .trust-registry__heading,
  .trust-registry > .trust-registry__list,
  .site-prefooter__grid > .site-prefooter__art,
  .site-prefooter__grid > .site-prefooter__text { grid-column: 1; }
  .ck-main,
  .ck-main--single,
  .pay-main { grid-template-columns: minmax(0, 1fr); }
  .ck-main > .ck-card--cart,
  .ck-main > .ck-card--payer,
  .ck-main--single > *,
  .pay-main > .pay-summary,
  .pay-main > .pay-methods { grid-column: 1; }
}

@media (max-width: 640px) {
  .skz-grid-12 > *,
  .skz-span-4,
  .skz-span-5,
  .skz-span-6,
  .skz-span-7,
  .skz-span-8,
  .skz-span-12 { grid-column: 1 / -1; }

  /* Полноширинные карточки чекаута — осознанное мобильное исключение ДС. */
  .checkout-body .ck-main,
  .checkout-body .pay-main { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ── Отбивка блока: отступ сверху и снизу, каждый отдельно ──────────────────
   Приём конструкторов (Тильда, Shopify): у блока две независимые настройки
   вертикальных отступов, значения — из списка ступеней, а не произвольные
   числа. Ступени объявлены в theme.css (--skz-block-*) и на телефоне
   подставляются сами: L даёт 96 на компьютере и 48 на телефоне, отдельно
   прописывать мобильное значение не нужно.

   Как пользоваться: секции добавляются два класса — например
   `class="sec skz-pt-0 skz-pb-s"`: сверху вплотную к предыдущему блоку,
   снизу тесная отбивка. Без классов блок сохраняет свою прежнюю отбивку —
   механизм ничего не ломает у существующих страниц.

   Горизонтальные поля этими классами НЕ трогаются: их по канону задаёт
   только shell-контейнер, секция отвечает лишь за вертикаль. */
.skz-pt-0 { padding-top: var(--skz-block-0, 0) !important; }
.skz-pt-xs { padding-top: var(--skz-block-xs, 24px) !important; }
.skz-pt-s { padding-top: var(--skz-block-s, 48px) !important; }
.skz-pt-m { padding-top: var(--skz-block-m, 64px) !important; }
.skz-pt-l { padding-top: var(--skz-block-l, 96px) !important; }
.skz-pb-0 { padding-bottom: var(--skz-block-0, 0) !important; }
.skz-pb-xs { padding-bottom: var(--skz-block-xs, 24px) !important; }
.skz-pb-s { padding-bottom: var(--skz-block-s, 48px) !important; }
.skz-pb-m { padding-bottom: var(--skz-block-m, 64px) !important; }
.skz-pb-l { padding-bottom: var(--skz-block-l, 96px) !important; }