/* Shop3 — общая база секций (ADR 0007, спецификация §8): обёртка, ширина, сетка и лента, устройства. Подключается, если на странице
   есть хоть одна секция (render.php, assets()); стили типов — sections/<тип>.css (plan-0.3 §1 п. 14).
   Только токены var(--s3-*): сырые цвета и числа вне шкал — нельзя (canon §6.2). Настройка экземпляра — классы вариантов и переменные
   в style корня секции (--s3x-cols, --s3x-pt/pb-<ширина>, --s3x-overlay, --s3x-spacer): префикс --s3x- — переменные
   экземпляра, не токены (их нет в tokens.css). */

/* ---------- обёртка ---------- */
/* отступы сверху и снизу — по ширинам (space_top, space_bottom: контракт §3.4): шаблон пишет --s3x-pt-base|sm|md, --s3x-pb-base|sm|md,
   здесь выбирается ширина (base — телефон, sm — от 601 px, md — от 992 px; числа — токены breakpoint.*, в @media — именованные условия (--s3-up-sm, --s3-up-md)) */
.s3-section { --s3x-pt: var(--s3x-pt-base, 0); --s3x-pb: var(--s3x-pb-base, var(--s3-space-7)); }
@media (min-width: 601px) { .s3-section { --s3x-pt: var(--s3x-pt-sm, var(--s3x-pt-base, 0)); --s3x-pb: var(--s3x-pb-sm, var(--s3x-pb-base, var(--s3-space-7))); } }
@media (min-width: 992px) { .s3-section { --s3x-pt: var(--s3x-pt-md, var(--s3x-pt-sm, var(--s3x-pt-base, 0))); --s3x-pb: var(--s3x-pb-md, var(--s3x-pb-sm, var(--s3x-pb-base, var(--s3-space-7)))); } }
.s3-section { padding-top: var(--s3x-pt, 0); padding-bottom: var(--s3x-pb, var(--s3-space-7)); }
.s3-section[class*="scheme-"], .s3-section--bg { padding-inline: var(--s3-space-5); border-radius: var(--s3-radius-lg); }
/* секция с фоном: отступы внутри фона не меньше шага 6, снаружи — шаг 7, чтобы соседняя секция не прилипала к фону */
.s3-section[class*="scheme-"], .s3-section--bg { padding-top: max(var(--s3x-pt), var(--s3-space-6)); padding-bottom: max(var(--s3x-pb), var(--s3-space-6)); margin-bottom: var(--s3-space-7); }
.s3-section__heading { margin-bottom: var(--s3-space-5); }
.s3-section__more { margin: var(--s3-space-5) 0 0; text-align: center; }
/* во всю ширину — выход из контейнера, когда колонок нет; содержимое — по ширине контейнера, кроме hero.
   100vw шире окна на полосу прокрутки — лишнее срезается у body: у main нельзя, он сам шириной в контейнер и срезал бы секцию */
body { overflow-x: clip; }
.s3-layout:not(.s3-layout--left):not(.s3-layout--right) .s3-section--full { margin-inline: calc(50% - 50vw); border-radius: 0; }
.s3-layout:not(.s3-layout--left):not(.s3-layout--right) .s3-section--full > .s3-section__inner { max-width: var(--s3-container-width); margin: 0 auto; padding: 0 var(--s3-container-gutter); box-sizing: border-box; }

/* шире сайта (container.wide): поля экрана остаются. Ширина по шагам — те же три значения переменными, шаг выбирает класс s3-w-<шаг>-<значение>: шаги — данные дизайна */
.s3-section--wide, .s3-w-base-wide { --s3x-w: min(var(--s3-container-wide), var(--s3-viewport-width) - 2 * var(--s3-container-gutter)); --s3x-i: 100%; --s3x-p: 0; }
.s3-w-base-container { --s3x-w: 100%; --s3x-i: 100%; --s3x-p: 0; }
.s3-w-base-full { --s3x-w: var(--s3-viewport-width); --s3x-i: var(--s3-container-width); --s3x-p: var(--s3-container-gutter); }
@media (min-width: 601px) {
  .s3-w-sm-container { --s3x-w: 100%; --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-sm-wide { --s3x-w: min(var(--s3-container-wide), var(--s3-viewport-width) - 2 * var(--s3-container-gutter)); --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-sm-full { --s3x-w: var(--s3-viewport-width); --s3x-i: var(--s3-container-width); --s3x-p: var(--s3-container-gutter); }
}
@media (min-width: 992px) {
  .s3-w-md-container { --s3x-w: 100%; --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-md-wide { --s3x-w: min(var(--s3-container-wide), var(--s3-viewport-width) - 2 * var(--s3-container-gutter)); --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-md-full { --s3x-w: var(--s3-viewport-width); --s3x-i: var(--s3-container-width); --s3x-p: var(--s3-container-gutter); }
}
@media (min-width: 1312px) {
  .s3-w-lg-container { --s3x-w: 100%; --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-lg-wide { --s3x-w: min(var(--s3-container-wide), var(--s3-viewport-width) - 2 * var(--s3-container-gutter)); --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-lg-full { --s3x-w: var(--s3-viewport-width); --s3x-i: var(--s3-container-width); --s3x-p: var(--s3-container-gutter); }
}
@media (min-width: 1600px) {
  .s3-w-xl-container { --s3x-w: 100%; --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-xl-wide { --s3x-w: min(var(--s3-container-wide), var(--s3-viewport-width) - 2 * var(--s3-container-gutter)); --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-xl-full { --s3x-w: var(--s3-viewport-width); --s3x-i: var(--s3-container-width); --s3x-p: var(--s3-container-gutter); }
}
@media (min-width: 1920px) {
  .s3-w-xxl-container { --s3x-w: 100%; --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-xxl-wide { --s3x-w: min(var(--s3-container-wide), var(--s3-viewport-width) - 2 * var(--s3-container-gutter)); --s3x-i: 100%; --s3x-p: 0; }
  .s3-w-xxl-full { --s3x-w: var(--s3-viewport-width); --s3x-i: var(--s3-container-width); --s3x-p: var(--s3-container-gutter); }
}
.s3-layout:not(.s3-layout--left):not(.s3-layout--right) :is(.s3-section--wide, .s3-section--stepped) { margin-inline: calc((100% - var(--s3x-w)) / 2); }
.s3-layout:not(.s3-layout--left):not(.s3-layout--right) .s3-section--stepped > .s3-section__inner { max-width: var(--s3x-i); margin: 0 auto; padding-inline: var(--s3x-p); box-sizing: border-box; }

/* сетки секций: число колонок на широком экране — --s3x-cols из настроек секции */
.s3-section__grid { grid-template-columns: repeat(var(--s3x-cols, var(--s3-columns-products)), minmax(0, 1fr)); }

/* ---------- лента с кнопками (товары, бренды): по --s3x-cols в ряд; ниже компьютера — по columns.products ----------
   --s3x-rail-cols, --s3x-rail-gap — ширина ячейки считается в одном месте, варианты меняют только их */
.s3-section__rail { --s3x-rail-cols: var(--s3x-cols, var(--s3-columns-products)); --s3x-rail-gap: var(--s3-space-4); }
.s3-section__rail.s3-slider { margin-bottom: 0; }
.s3-section__rail .s3-slider__track { gap: var(--s3-space-4); border-radius: 0; padding-bottom: var(--s3-space-1); }
.s3-section__rail .s3-slider__slide { flex: 0 0 calc((100% - (var(--s3x-rail-cols) - 1) * var(--s3x-rail-gap)) / var(--s3x-rail-cols)); display: flex; }
.s3-section__rail .s3-slider__slide > .s3-card { width: 100%; }
.s3-section__rail .s3-slider__controls { position: static; justify-content: flex-end; margin-top: var(--s3-space-3); }

/* ---------- первая секция вплотную под шапкой (VD #5; s3-flush-top на <body> — tokens.md §2.3а) ----------
   Скруглённые верхние углы у линии меню дают зубцы, а зазора под меню нет (решение 40) — у этой секции верхние углы прямые: у самой секции,
   если у неё свой фон; иначе, если нет заголовка, — у картинок первого ряда: --s3x-flush-r (0) берут hero, hero_banners, banners, video,
   text_image для верхних углов вместо своего радиуса. Первая — top_full, если он есть, иначе первая секция содержимого */
:is(.s3-flush-top:not(:has([data-s3-position="top_full"])) .s3-layout__main > .s3-section:first-of-type, .s3-flush-top [data-s3-position="top_full"] > .s3-section:first-child):is([class*="scheme-"], .s3-section--bg) { border-start-start-radius: 0; border-start-end-radius: 0; }
:is(.s3-flush-top:not(:has([data-s3-position="top_full"])) .s3-layout__main > .s3-section:first-of-type, .s3-flush-top [data-s3-position="top_full"] > .s3-section:first-child):not([class*="scheme-"], .s3-section--bg, :has(> .s3-section__inner > .s3-section__heading)) { --s3x-flush-r: 0; }
.s3-section .s3-section { --s3x-flush-r: initial; }

/* ---------- устройства и адаптив: точки — токены breakpoint.*, в @media — именованные условия (--s3-up|down-<шаг>), числа шкалы подставляет тема (tokens.md §3.5) ---------- */
@media (min-width: 601px) { .s3-section--mobile { display: none; } }
@media (max-width: 991.98px) {
  .s3-section__grid { grid-template-columns: repeat(var(--s3-columns-products), minmax(0, 1fr)); }
  .s3-section__rail { --s3x-rail-cols: var(--s3-columns-products); }
}
@media (max-width: 600.98px) {
  .s3-section--desktop { display: none; }
  .s3-section[class*="scheme-"], .s3-section--bg { padding-inline: var(--s3-space-4); }
  .s3-section__grid { gap: var(--s3-space-4) var(--s3-space-3); }
  .s3-section__rail { --s3x-rail-gap: var(--s3-space-3); }
  .s3-section__rail .s3-slider__track { gap: var(--s3-space-3); }
}

/* ---------- фон секции (контракт 1.2 §4.1, R03-13): роль или градиент двух ролей палитры секции в текущем режиме ----------
   --s3x-bg-from, --s3x-bg-to, --s3x-bg, --s3x-on — в style корня (render.php root()); нового токена нет, режим меняет оба конца сам.
   Направление — углом: --s3-direction-* выводит Tokens::css(), inline-* и diagonal зеркалятся при RTL там же. */
.s3-section--bg { --s3x-bg-dir: var(--s3-direction-block-end); background: linear-gradient(var(--s3x-bg-dir), var(--s3x-bg-from), var(--s3x-bg-to)); color: var(--s3-text); }
.s3-section--bg-block-start { --s3x-bg-dir: var(--s3-direction-block-start); }
.s3-section--bg-inline-end { --s3x-bg-dir: var(--s3-direction-inline-end); }
.s3-section--bg-inline-start { --s3x-bg-dir: var(--s3-direction-inline-start); }
.s3-section--bg-diagonal { --s3x-bg-dir: var(--s3-direction-diagonal); }
/* ссылка на токен фона (§4.1): итоговая переменная токена, картинка, заливка, шаги и режимы — в нём */
.s3-section--bg-token { background: var(--s3x-bg); }
/* текст поверх фона ролью on-*: роли текста секции, кольцо фокуса и границы элементов на фоне выводятся ею; карточки и плашки на своём
   фоне — прежними ролями (копия в --s3x-k-*) */
.s3-section--on { --s3x-k-text: var(--s3-text); --s3x-k-text-muted: var(--s3-text-muted); --s3x-k-link: var(--s3-link); --s3x-k-price: var(--s3-price); --s3x-k-price-old: var(--s3-price-old); --s3x-k-sale: var(--s3-sale); --s3x-k-focus: var(--s3-focus); --s3x-k-border: var(--s3-border); color: var(--s3x-on); }
.s3-section--on > .s3-section__inner { --s3-text: var(--s3x-on); --s3-text-muted: var(--s3x-on); --s3-link: var(--s3x-on); --s3-price: var(--s3x-on); --s3-price-old: var(--s3x-on); --s3-sale: var(--s3x-on); --s3-focus: var(--s3x-on); --s3-border: var(--s3x-on); color: var(--s3x-on); }
.s3-section--on :is(.s3-card, .s3-cats--cards .s3-cats__link, .s3-brands__link, .s3-features--boxed .s3-features__item, .s3-banners__caption) {
  --s3-text: var(--s3x-k-text); --s3-text-muted: var(--s3x-k-text-muted); --s3-link: var(--s3x-k-link); --s3-price: var(--s3x-k-price); --s3-price-old: var(--s3x-k-price-old); --s3-sale: var(--s3x-k-sale);
  --s3-focus: var(--s3x-k-focus); --s3-border: var(--s3x-k-border); color: var(--s3-text);
}

/* ---------- наезд на предыдущую секцию (контракт 1.2 §4, R03-12): шаги space.5…space.8; от breakpoint.sm и только сразу после секции ----------
   Наехавшая — выше слоем, её space_top не действует (внутренний отступ фона — как у секции с фоном). Предыдущая получает внизу запас
   на величину наезда: её текст, кнопки и фокус не перекрываются; секция со своим фоном — без внешнего отступа снизу, перекрывается фон.
   hero — исключение в hero.css: запаса нет, наезд ложится на картинку, текст слайда и кнопки поднимаются. */
.s3-section--overlap-1 { --s3x-overlap: var(--s3-space-5); }
.s3-section--overlap-2 { --s3x-overlap: var(--s3-space-6); }
.s3-section--overlap-3 { --s3x-overlap: var(--s3-space-7); }
.s3-section--overlap-4 { --s3x-overlap: var(--s3-space-8); }
.s3-section:has(+ .s3-section--overlap-1) { --s3x-under: var(--s3-space-5); }
.s3-section:has(+ .s3-section--overlap-2) { --s3x-under: var(--s3-space-6); }
.s3-section:has(+ .s3-section--overlap-3) { --s3x-under: var(--s3-space-7); }
.s3-section:has(+ .s3-section--overlap-4) { --s3x-under: var(--s3-space-8); }
@media (min-width: 601px) {
  .s3-section + .s3-section--overlap { position: relative; z-index: var(--s3-z-raised); isolation: isolate; margin-block-start: calc(-1 * var(--s3x-overlap)); padding-top: 0; }
  .s3-section + .s3-section--overlap:is([class*="scheme-"], .s3-section--bg) { padding-top: var(--s3-space-6); }
  .s3-section:has(+ .s3-section--overlap) { padding-bottom: calc(var(--s3x-pb) + var(--s3x-under)); }
  .s3-section:has(+ .s3-section--overlap):is([class*="scheme-"], .s3-section--bg) { padding-bottom: calc(max(var(--s3x-pb), var(--s3-space-6)) + var(--s3x-under)); margin-bottom: 0; }
}