/* Shop3 — стили страницы «listing»: подключается только на её маршрутах (event.php headerAssets(), ADR 0016). Правила — как в shop3.css:
   только роли и шкалы var(--s3-*), canon.md 6.2. Общие компоненты — в shop3.css, он загружен раньше. */
.s3-select { display: inline-flex; align-items: center; gap: var(--s3-space-2); margin: 0; font-weight: var(--s3-font-weight-regular); font-size: var(--s3-font-size-sm); color: var(--s3-text-muted); }
.s3-select select { min-height: var(--s3-size-control-md); padding: 0 var(--s3-space-2); border: var(--s3-border-width-thin) solid var(--s3-border); border-radius: var(--s3-radius-sm); background: var(--s3-surface); color: var(--s3-text); }

.s3-intro { display: flex; gap: var(--s3-space-4); align-items: flex-start; margin-bottom: var(--s3-space-4); }
/* штатная картинка категории часто на белом поле: рамка держит её на тёмной палитре, прозрачный PNG получает фон палитры */
.s3-intro__img { flex: none; border: var(--s3-listing-image-border-width) solid var(--s3-border-subtle); border-radius: var(--s3-listing-image-radius); background: var(--s3-surface-alt); object-fit: cover; }
.s3-intro .s3-h1 { margin-bottom: var(--s3-space-2); }
.s3-chips { display: flex; flex-wrap: wrap; gap: var(--s3-space-2); margin-bottom: var(--s3-space-5); }

.s3-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3-space-3) var(--s3-space-5); margin-bottom: var(--s3-space-4); padding: var(--s3-space-3) 0; border-top: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
/* id="compare-total" штатный: на него опирается common.js; ссылка не спорит с панелью */
.s3-toolbar__compare { margin-inline-end: auto; color: var(--s3-text-muted); font-size: var(--s3-font-size-xs); text-decoration: none; }
.s3-toolbar__compare:hover, .s3-toolbar__compare:focus { color: var(--s3-link); }

/* левая колонка на телефоне — под кнопкой; без JS класса is-foldable нет, и колонка открыта */
.s3-aside-toggle { display: none; }
.s3-searchform { display: grid; grid-template-columns: var(--s3-listing-split); gap: var(--s3-space-3) var(--s3-space-4); align-items: end; margin-bottom: var(--s3-space-6); padding: var(--s3-listing-form-padding); border-radius: var(--s3-listing-form-radius); background: var(--s3-surface-alt); }
.s3-searchform__checks { display: flex; flex-wrap: wrap; gap: var(--s3-space-4); }
.s3-searchform .s3-btn { justify-self: start; }
@media (max-width: 600.98px) {
  .s3-searchform { grid-template-columns: 1fr; }
  .s3-toolbar__compare { width: 100%; }
}
@media (max-width: 991.98px) {
  .s3-layout.is-foldable > .s3-aside-toggle { order: -1; display: flex; align-items: center; justify-content: space-between; }
  .s3-layout.is-foldable > .s3-aside-toggle .s3-i { transition: rotate var(--s3-duration-fast); }
  .s3-layout.is-foldable > .s3-aside-toggle[aria-expanded="true"] .s3-i { rotate: 180deg; }
  .s3-layout.is-foldable > .s3-layout__aside { order: -1; }
  .s3-layout.is-foldable > .s3-layout__aside:not(.is-open) { display: none; }
}