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

.s3-cats { margin: 0; padding: 0; list-style: none; }
.s3-cats--grid { display: grid; grid-template-columns: repeat(var(--s3x-cols, var(--s3-columns-categories)), minmax(0, 1fr)); gap: var(--s3-space-4); }
.s3-cats__item { min-width: 0; }
.s3-cats__link { display: flex; flex-direction: column; align-items: center; gap: var(--s3-space-2); width: 100%; height: 100%; color: var(--s3-text); text-align: center; text-decoration: none; }
/* a:hover, a:focus темы и Bootstrap (0,1,1) сильнее одного класса: без этого блок-ссылка при наведении подчёркнута и в цвете ссылки (VD-2 #2) */
.s3-cats__link:is(:hover, :focus) { color: var(--s3-text); text-decoration: none; }
.s3-cats__link:hover .s3-cats__name { color: var(--s3-link); }
.s3-cats__media { display: block; width: 100%; aspect-ratio: var(--s3-ratio-square); overflow: hidden; border-radius: var(--s3-radius-md); background: var(--s3-surface-alt); }
.s3-cats__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--s3-duration-base); }
.s3-cats__link:hover img { transform: scale(var(--s3-section-categories-hover-scale)); }
/* длинное слово: перенос по слогам (нужен lang у <html>, он есть); без словаря браузера — разрыв только там, где слово шире ячейки */
.s3-cats__name { font-weight: var(--s3-font-weight-medium); overflow-wrap: break-word; hyphens: auto; }
.s3-cats__count { font-size: var(--s3-font-size-sm); color: var(--s3-text-muted); }

/* круги */
.s3-cats--circles .s3-cats__media { border-radius: var(--s3-radius-pill); }

/* портреты: высокая картинка 3:4 */
.s3-cats--portraits .s3-cats__media { aspect-ratio: var(--s3-ratio-portrait); border-radius: var(--s3-radius-lg); }
.s3-cats--portraits .s3-cats__link { align-items: flex-start; text-align: start; }

/* крупные карточки: картинка, название и число товаров внутри карточки */
.s3-cats--cards .s3-cats__link { padding: var(--s3-space-3); box-sizing: border-box; border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-radius-lg); background: var(--s3-surface); }
.s3-cats--cards .s3-cats__link:hover { box-shadow: var(--s3-shadow-md); }
.s3-cats--cards .s3-cats__name { font-size: var(--s3-font-size-lg); }

/* иконки: компактная полоса — иконка в круге, подпись под ней */
.s3-cats--icons.s3-cats--grid { gap: var(--s3-space-3); }
.s3-cats--icons .s3-cats__media--icon { display: flex; align-items: center; justify-content: center; width: var(--s3-size-thumb-md); height: var(--s3-size-thumb-md); border-radius: var(--s3-radius-pill); color: var(--s3-text); transition: background-color var(--s3-duration-base), color var(--s3-duration-base); }
.s3-cats--icons .s3-cats__media--icon img { border-radius: var(--s3-radius-pill); }
.s3-cats__svg { width: calc(var(--s3-size-thumb-md) / 2); height: calc(var(--s3-size-thumb-md) / 2); }
.s3-cats--icons .s3-cats__link:hover .s3-cats__media--icon, .s3-cats--icons .s3-cats__link:focus-visible .s3-cats__media--icon { background: var(--s3-primary); color: var(--s3-on-primary); }
.s3-cats--icons .s3-cats__name { font-size: var(--s3-font-size-sm); }
.s3-cats--icons .s3-cats__count { font-size: var(--s3-font-size-xs); }

/* карусель: ячейки ленты — по --s3x-cols (base.css); у иконок — плотнее */
.s3-cats-rail--icons .s3-slider__track { gap: var(--s3-space-3); }

@media (max-width: 991.98px) {
  .s3-cats--grid { grid-template-columns: repeat(var(--s3-columns-categories), minmax(0, 1fr)); }
  /* крупные картинки — карточки, портреты и круги (VD #7: круги по columns.categories на телефоне — 3 + 1 сиротой при четырёх) */
  .s3-cats--grid.s3-cats--cards, .s3-cats--grid.s3-cats--portraits, .s3-cats--grid.s3-cats--circles { grid-template-columns: repeat(var(--s3-section-categories-columns-cards), minmax(0, 1fr)); }
  .s3-cats--grid.s3-cats--icons { grid-template-columns: repeat(var(--s3-section-categories-columns-icons), minmax(0, 1fr)); }
}
@media (max-width: 600.98px) {
  .s3-cats--grid { gap: var(--s3-space-3); }
  .s3-cats--grid.s3-cats--icons { gap: var(--s3-space-2); }
  .s3-cats--icons .s3-cats__name { font-size: var(--s3-font-size-xs); }
  .s3-section__rail.s3-cats-rail--icons { --s3x-rail-cols: var(--s3-section-categories-columns-icons); --s3x-rail-gap: var(--s3-space-2); }
  .s3-cats-rail--icons .s3-slider__track { gap: var(--s3-space-2); }
}