/* Shop3 — секция «Товары рядом с баннером» (products_banner, v1.md §8 № 5; plan-0.3 §1 п. 14). Подключается, только если такая секция есть на странице (render.php, assets()).
   Только токены var(--s3-*) и логические свойства (canon §6.2, docs/dev/rtl.md); общая обёртка — base.css. */

/* баннер — шириной одной карточки, лента — остальное (--s3x-cols карточек в ряд); лента — base.css (.s3-section__rail) */
.s3-pbanner { display: flex; gap: var(--s3-space-4); align-items: stretch; }
.s3-pbanner--end { flex-direction: row-reverse; }
.s3-pbanner__banner { flex: 0 0 calc((100% - var(--s3x-cols) * var(--s3-space-4)) / (var(--s3x-cols) + 1)); min-width: 0; }
.s3-pbanner__rail { flex: 1; min-width: 0; }
.s3-pbanner__link { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--s3-card-radius); background: var(--s3-surface-alt); color: var(--s3-text); text-decoration: none; }
/* a:hover, a:focus темы и Bootstrap (0,1,1) сильнее одного класса: без этого блок-ссылка при наведении подчёркнута и в цвете ссылки (VD-2 #2) */
.s3-pbanner__link:is(:hover, :focus) { color: var(--s3-text); text-decoration: none; }
.s3-pbanner__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s3-pbanner__caption { position: absolute; inset-inline: var(--s3-space-3); bottom: var(--s3-space-3); padding: var(--s3-space-2) var(--s3-space-3); border-radius: var(--s3-radius-md); background: var(--s3-surface); color: var(--s3-text); font-weight: var(--s3-font-weight-bold); }
.s3-pbanner__link:is(a):hover .s3-pbanner__caption { color: var(--s3-link); }

/* ряд — по высоте карточек: кнопки ленты вне ряда, под последней колонкой; место под ними — у секции, пока они видны */
@media (min-width: 601px) {
  .s3-pbanner__rail { position: relative; }
  .s3-pbanner:has(.s3-slider__controls:not([hidden])) { margin-bottom: calc(var(--s3-size-control-md) + var(--s3-space-3)); }
  .s3-pbanner__rail.s3-section__rail .s3-slider__controls { position: absolute; top: 100%; inset-inline-end: 0; bottom: auto; }
  /* с заголовком секции (VD #11): кнопки — в его строке, у конца секции (при баннере в конце — тоже), а не отдельной строкой под последней
     карточкой; заголовок не заходит под них. Низ кнопок — по низу заголовка: отступ заголовка — base.css */
  .s3-section__heading + .s3-pbanner { position: relative; }
  .s3-section__heading + .s3-pbanner .s3-pbanner__rail { position: static; }
  .s3-section__heading + .s3-pbanner:has(.s3-slider__controls:not([hidden])) { margin-bottom: 0; }
  .s3-section__heading + .s3-pbanner .s3-pbanner__rail.s3-section__rail .s3-slider__controls { top: auto; bottom: calc(100% + var(--s3-space-5)); margin: 0; }
  .s3-section__heading:has(+ .s3-pbanner .s3-slider__controls:not([hidden])) { padding-inline-end: calc(2 * var(--s3-size-control-md) + var(--s3-space-2) + var(--s3-space-4)); }
}
@media (max-width: 600.98px) {
  .s3-pbanner, .s3-pbanner--end { flex-direction: column; }
  .s3-pbanner__banner { flex-basis: auto; }
  .s3-pbanner__link img { height: auto; aspect-ratio: var(--s3-ratio-wide); }
}