/* Shop3 — секция «Товары»: вкладки, список и «товар дня» (R03-14). Подключается, только если такая секция есть на странице
   (render.php, assets()). Сетка и лента — base.css, карточка — shop3.css. Только токены var(--s3-*) и логические свойства
   (canon §6.2, docs/dev/rtl.md). */

/* колонки по ширинам (контракт §3.4, M15b): шаблон пишет --s3x-cols-base|sm|md, здесь — выбор ширины (base — телефон, sm — от 601 px,
   md — от 992 px; числа — токены breakpoint.*). Общие правила base.css (на планшете 3, на телефоне 2 у всех сеток и лент) для товаров
   перекрыты селекторами из двух-трёх классов — у других типов они остаются */
.s3-products-cols { --s3x-cols: var(--s3x-cols-base); }
@media (min-width: 601px) { .s3-products-cols { --s3x-cols: var(--s3x-cols-sm); } }
@media (min-width: 992px) { .s3-products-cols { --s3x-cols: var(--s3x-cols-md); } }
.s3-products-cols.s3-section__grid { grid-template-columns: repeat(var(--s3x-cols), minmax(0, 1fr)); }
.s3-products-cols.s3-section__rail { --s3x-rail-cols: var(--s3x-cols); }

/* вкладки: ряд кнопок с чертой под выбранной; на узком экране ряд листается вбок */
.s3-products-tabs__list { display: flex; gap: calc(var(--s3-space-5) - 2 * var(--s3-space-2)); overflow-x: auto; margin-inline: calc(-1 * var(--s3-space-2)); margin-bottom: var(--s3-space-5); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); scrollbar-width: none; }
.s3-products-tabs__list[hidden] { display: none; }
.s3-products-tabs__tab { flex: none; min-height: var(--s3-size-control-md); padding: var(--s3-space-2); border: 0; border-bottom: var(--s3-border-width-thick) solid transparent; margin-bottom: calc(-1 * var(--s3-border-width-thin)); background: none; color: var(--s3-text-muted); font: inherit; font-size: var(--s3-font-size-md); font-weight: var(--s3-font-weight-medium); cursor: pointer; }
.s3-products-tabs__tab:hover { color: var(--s3-text); }
.s3-products-tabs__tab[aria-selected="true"] { color: var(--s3-text); border-bottom-color: var(--s3-tabs-active-accent); }
/* кольцо фокуса — общее (shop3.css), но внутри вкладки: ряд листается (overflow-x), и кольцо снаружи он обрезал бы. Поэтому у вкладки
   поля по бокам, а ряд сдвинут на них назад: текст вкладок стоит там же, где стоял */
.s3-products-tabs__tab:focus-visible { outline-offset: calc(-1 * var(--s3-border-width-thick)); }

/* список: по товару в строке — картинка в начале, название и цена, кнопка в конце */
.s3-products-list { display: grid; gap: var(--s3-space-3); }
.s3-products-list .s3-card { display: grid; grid-template-columns: var(--s3-size-area) minmax(0, 1fr) auto; grid-template-areas: "media body actions" "media body cart"; align-items: center; gap: var(--s3-space-2) var(--s3-space-4); padding: var(--s3-space-2); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-products-list .s3-card__media { grid-area: media; width: var(--s3-size-area); }
.s3-products-list .s3-card__body { grid-area: body; padding: 0; }
.s3-products-list .s3-card__name a { -webkit-line-clamp: var(--s3-section-products-list-lines); }
.s3-products-list .s3-card__actions { grid-area: actions; position: static; flex-direction: row; justify-self: end; opacity: 1; }
.s3-products-list .s3-card__cart { grid-area: cart; width: auto; margin: 0; }

/* товар дня: картинка и текст рядом, на телефоне — друг под другом */
.s3-spot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s3-space-7); }
.s3-spot__media { position: relative; display: block; overflow: hidden; border-radius: var(--s3-radius-lg); background: var(--s3-surface-alt); }
.s3-spot__media img { display: block; width: 100%; height: auto; aspect-ratio: var(--s3-ratio-square); object-fit: cover; }
.s3-spot__media .s3-tag { position: absolute; top: var(--s3-space-3); inset-inline-start: var(--s3-space-3); }
.s3-spot__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3-space-3); }
.s3-spot__name { margin: 0; font-family: var(--s3-font-family-heading); font-size: var(--s3-font-size-2xl); font-weight: var(--s3-font-weight-bold); line-height: var(--s3-line-height-snug); }
.s3-spot__name a { color: var(--s3-text); text-decoration: none; }
.s3-spot__name a:hover { color: var(--s3-link); }
.s3-spot__price { margin-top: 0; }
.s3-spot__price .s3-price__now, .s3-spot__price .s3-price__new { font-size: var(--s3-font-size-2xl); }
.s3-spot__text { margin: 0; color: var(--s3-text-muted); }
.s3-spot__actions { display: flex; flex-wrap: wrap; gap: var(--s3-space-3); }

@media (max-width: 600.98px) {
  .s3-products-tabs__list { gap: var(--s3-space-4); margin-bottom: var(--s3-space-4); }
  .s3-products-list .s3-card { grid-template-columns: var(--s3-size-thumb-md) minmax(0, 1fr); grid-template-areas: "media body" "media cart"; gap: var(--s3-space-2) var(--s3-space-3); }
  .s3-products-list .s3-card__media { width: var(--s3-size-thumb-md); }
  .s3-products-list .s3-card__actions { display: none; }
  .s3-products-list .s3-card__cart { justify-self: start; }
  .s3-spot { grid-template-columns: minmax(0, 1fr); gap: var(--s3-space-5); }
  .s3-spot__name { font-size: var(--s3-font-size-xl); }
}