/* Shop3 — секция «Бегущая строка» (marquee; plan-0.3 §1 п. 14). Подключается, только если такая секция есть на странице (render.php, assets()).
   Только токены var(--s3-*) и логические свойства (canon §6.2, docs/dev/rtl.md); общая обёртка — base.css.
   Лента: две одинаковые группы, каждая не уже строки; обе сдвигаются на 100 % своей ширины за --s3x-lap — шва нет при любой длине фраз.
   Стоит при наведении на секцию и при фокусе внутри (WCAG 2.2.2), при prefers-reduced-motion — стоит и переносится по строкам. */

.s3-marquee { display: flex; overflow: hidden; color: var(--s3-text); font-family: var(--s3-font-family-heading); font-weight: var(--s3-font-weight-bold); letter-spacing: var(--s3-font-tracking-tight); line-height: var(--s3-line-height-snug); }
.s3-marquee--md { font-size: var(--s3-font-size-lg); font-family: var(--s3-font-family-body); font-weight: var(--s3-font-weight-medium); letter-spacing: normal; }
.s3-marquee--lg { font-size: var(--s3-font-size-2xl); }
.s3-marquee--xl { font-size: var(--s3-font-size-3xl); }
.s3-marquee__group { display: flex; flex: none; align-items: center; justify-content: space-around; gap: var(--s3-space-7); min-width: 100%; margin: 0; padding: var(--s3-space-2) 0; padding-inline-end: var(--s3-space-7); list-style: none; white-space: nowrap; box-sizing: border-box; animation: s3-marquee var(--s3x-lap, var(--s3-duration-marquee)) var(--s3-easing-linear) infinite; }
.s3-marquee--reverse .s3-marquee__group { animation-direction: reverse; }
.s3-marquee__item { display: flex; align-items: center; gap: var(--s3-space-7); }
.s3-marquee--dots .s3-marquee__item::after { content: ""; flex: none; width: var(--s3-space-2); height: var(--s3-space-2); border-radius: var(--s3-radius-pill); background: currentColor; opacity: var(--s3-opacity-overlay); }
.s3-marquee__link { color: inherit; text-decoration: none; }
/* a:hover, a:focus темы и Bootstrap (0,1,1) сильнее одного класса: без этого блок-ссылка при наведении подчёркнута и в цвете ссылки (VD-2 #2) */
.s3-marquee__link:is(:hover, :focus) { color: inherit; text-decoration: none; }
.s3-marquee__link:hover { color: var(--s3-link); }
/* секция во всю ширину (VD #6): фон идёт от края до края экрана — лента тоже, а не обрезается по контейнеру. Как выход самой секции
   (base.css): при колонках слева и справа секция в контейнере, выхода нет; при ширине по шагам — на ширину секции этого шага (--s3x-w) */
.s3-layout:not(.s3-layout--left):not(.s3-layout--right) .s3-section--full .s3-marquee { margin-inline: calc((100% - var(--s3-viewport-width)) / 2); }
.s3-layout:not(.s3-layout--left):not(.s3-layout--right) .s3-section--stepped .s3-marquee { margin-inline: calc((100% - var(--s3x-w)) / 2); }
.s3-section--marquee:hover .s3-marquee__group, .s3-marquee:focus-within .s3-marquee__group { animation-play-state: paused; }

@keyframes s3-marquee { to { transform: translateX(-100%); } } /* rtl-ok: LTR-лента, для RTL — s3-marquee-rtl ниже */
/* RTL: группы стоят справа налево — лента едет в другую сторону */
@keyframes s3-marquee-rtl { to { transform: translateX(100%); } } /* rtl-ok: зеркало s3-marquee для dir="rtl" */
[dir="rtl"] .s3-marquee__group { animation-name: s3-marquee-rtl; }

@media (prefers-reduced-motion: reduce) {
  .s3-marquee__group { flex-wrap: wrap; justify-content: center; row-gap: var(--s3-space-2); padding-inline-end: 0; white-space: normal; animation: none; }
  .s3-marquee__group[aria-hidden="true"] { display: none; }
}
@media (max-width: 600.98px) {
  .s3-marquee--lg { font-size: var(--s3-font-size-xl); }
  .s3-marquee--xl { font-size: var(--s3-font-size-2xl); }
  .s3-marquee__group, .s3-marquee__item { gap: var(--s3-space-5); }
  .s3-marquee__group { padding-inline-end: var(--s3-space-5); }
}