/*
 * Единая геометрия публичных страниц «Сказкина».
 * Значения приходят из сгенерированного 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, #24406E);
  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);
}

.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; }

/* Единый skip-link для клавиатуры. */
.skz-skip {
  position: fixed;
  left: var(--ds-shell-pad-mobile, 20px);
  top: -64px;
  z-index: 2000;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid var(--brass, #A67C2E);
  border-radius: var(--ds-radius-6, 6px);
  background: var(--card, #FCF8EE);
  color: var(--ink, #232E47);
  font: 600 14px/1.35 var(--ds-font-text, "Golos Text", sans-serif);
  text-decoration: none;
  box-shadow: var(--shadow-mat);
  transition: top .15s ease-out;
}
.skz-skip:focus,
.skz-skip:focus-visible { top: 12px; }

@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) {
  .skz-skip { transition: none; }
}