/* Карточка товара tshop_3 — общая для каталога и подборок магазина (_parts/card.blade.php).
 * Вид задаёт список: .t3-products[data-view="grid|list|table"]. Колонки сетки — контейнерные запросы,
 * поэтому карточки правильно встают и в узкой колонке рядом с фильтром или левым меню.
 *
 * Ручки дизайнера стилей (корень блока магазина):
 *   --card-min        минимальная ширина карточки в сетке      --card-gap      промежуток между карточками
 *   --card-radius     скругление карточки                      --card-bg       фон карточки
 *   --card-ratio      пропорции фото (1, 4/5, 3/4)             --card-fit      contain | cover
 *   --card-media-bg   подложка фото                            --card-title-lines  строк в названии
 *   --price-color     цвет цены                                --sale-color    цвет скидки и старой цены
 */
@layer modules {
  .t3-block--shop {
    --card-min: 220px;
    --card-gap: var(--s-4);
    --card-radius: var(--radius-l);
    --card-bg: var(--surface);
    --card-ratio: 1;
    --card-fit: contain;
    --card-media-bg: var(--surface-2);
    --card-title-lines: 2;
    --price-color: var(--text);
    --sale-color: var(--danger);
  }
  [data-style="quiet"] .t3-block--shop { --card-bg: transparent; --card-radius: var(--radius-m); }
  [data-style="editorial"] .t3-block--shop { --card-radius: 0; --card-gap: 0; }

  /* ── список ── */
  .t3-products { container: products / inline-size; list-style: none; padding: 0; display: grid; gap: var(--card-gap); }
  .t3-products[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr)); }
  @container products (max-width: 560px) {
    .t3-products[data-view="grid"] > .t3-products__item { min-width: 0; }
  }
  @media (max-width: 599px) {
    .t3-products[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); --card-gap: var(--s-2); }
  }
  .t3-products__item { display: grid; min-width: 0; }
  [data-style="editorial"] .t3-products[data-view="grid"] { border-top: var(--line-w) solid var(--line); border-left: var(--line-w) solid var(--line); }
  [data-style="editorial"] .t3-products[data-view="grid"] > .t3-products__item { border-right: var(--line-w) solid var(--line); border-bottom: var(--line-w) solid var(--line); }

  /* ── карточка ── */
  .t3-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--card-bg); border-radius: var(--card-radius);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  [data-style="bento"] .t3-card { padding: var(--s-2); border: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
  [data-style="editorial"] .t3-card { padding: var(--s-3); }
  @media (hover: hover) and (pointer: fine) {
    [data-style="bento"] .t3-card:hover { box-shadow: var(--shadow-1); }
    [data-style="editorial"] .t3-card:hover { background: var(--surface-2); }
  }

  /* растянутая ссылка: кликабельна вся карточка, интерактивное — поверх */
  .t3-card__link { color: inherit; }
  .t3-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .t3-card__link:focus-visible { outline: none; }
  .t3-card:has(.t3-card__link:focus-visible) { box-shadow: var(--focus-ring); }
  .t3-card__tools, .t3-card__choice, .t3-card__foot, .t3-card__meta button, .t3-gallery__track { position: relative; z-index: 2; }

  /* ── фото ── */
  .t3-card__media { position: relative; }
  .t3-gallery { position: relative; border-radius: calc(var(--card-radius) - var(--s-1)); overflow: hidden; background: var(--card-media-bg); }
  [data-style="editorial"] .t3-gallery, [data-style="quiet"] .t3-gallery { border-radius: var(--card-radius); }
  .t3-gallery__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    aspect-ratio: var(--card-ratio); overscroll-behavior-x: contain;
  }
  .t3-gallery__track::-webkit-scrollbar { display: none; }
  .t3-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; }
  .t3-gallery__img { width: 100%; height: 100%; object-fit: var(--card-fit); mix-blend-mode: multiply; }
  [data-scheme="dark"] .t3-gallery__img { mix-blend-mode: normal; }
  .t3-gallery__slide--empty { color: var(--text-3); }
  .t3-gallery__slide--empty .i { width: 40px; height: 40px; stroke-width: 1.25; }
  .t3-gallery__dots { position: absolute; inset: auto 0 8px; z-index: 3; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
  .t3-gallery__dots span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text) 22%, transparent); transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .t3-gallery__dots .is-active { width: 16px; border-radius: 3px; background: var(--text); }
  @media (hover: hover) and (pointer: fine) {
    .t3-gallery__dots { opacity: 0; transition: opacity var(--dur) var(--ease); }
    .t3-card:hover .t3-gallery__dots { opacity: 1; }
  }

  .t3-badges { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; pointer-events: none; }
  .t3-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
  .t3-badge--sale { background: var(--sale-color); color: #fff; }
  .t3-badge--new { background: var(--brand); color: var(--brand-ink); }
  .t3-badge--hit { background: var(--warning); color: #fff; }
  [data-style="editorial"] .t3-badge { border-radius: 0; text-transform: uppercase; box-shadow: none; }

  .t3-card__tools { position: absolute; top: calc(var(--s-2) + 6px); right: calc(var(--s-2) + 6px); display: grid; gap: 6px; }
  [data-style="quiet"] .t3-card__tools { top: 6px; right: 6px; }
  .t3-tool {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text-2); backdrop-filter: blur(8px);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .t3-tool:hover { color: var(--text); background: var(--surface); }
  .t3-tool:active { transform: scale(.92); }
  .t3-tool[aria-pressed="true"] { color: var(--brand); }
  .t3-tool[data-t3-fav][aria-pressed="true"] { color: var(--sale-color); }
  .t3-tool[data-t3-fav][aria-pressed="true"] .i { fill: currentColor; }
  .t3-tool[aria-busy="true"] { opacity: .5; pointer-events: none; }
  [data-style="editorial"] .t3-tool { border-radius: 0; }
  /* на устройствах с мышью неотмеченные инструменты проявляются при наведении */
  @media (hover: hover) and (pointer: fine) {
    .t3-tool[aria-pressed="false"] { opacity: 0; }
    .t3-card:hover .t3-tool, .t3-card:focus-within .t3-tool { opacity: 1; }
  }

  /* ── текст ── */
  .t3-card__body { flex: 1; display: grid; align-content: start; gap: 6px; padding: var(--s-3) var(--s-2) 0; }
  [data-style="quiet"] .t3-card__body, [data-style="quiet"] .t3-card__foot { padding-inline: 0; }
  .t3-card__title { margin: 0; font-family: var(--font-body); font-size: var(--fs-s); font-weight: 500; line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: var(--card-title-lines); -webkit-box-orient: vertical; overflow: hidden; }
  .t3-card__title mark { background: var(--brand-soft-2); color: inherit; border-radius: 3px; }
  .t3-brand { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }

  .t3-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: var(--fs-xs); color: var(--text-3); }
  .t3-stock { display: inline-flex; align-items: center; gap: 6px; }
  .t3-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; }
  .t3-stock--out::before { background: var(--text-3); }
  .t3-stock--in { color: color-mix(in srgb, var(--success) 70%, var(--text)); }
  .t3-stock__more { text-decoration: underline dotted; text-underline-offset: 3px; color: inherit; font: inherit; }
  .t3-stock__pop { display: none; }
  .t3-stock__pop:popover-open { display: grid; gap: 6px; }
  .t3-stock__row { display: flex; justify-content: space-between; gap: var(--s-4); }
  .t3-article { display: inline-flex; gap: 4px; }
  .t3-article span { opacity: .8; }

  .t3-card__props { display: none; margin: 4px 0 0; font-size: var(--fs-xs); }
  .t3-card--props .t3-card__props { display: grid; gap: 2px; }
  .t3-card__props div { display: flex; gap: 6px; min-width: 0; }
  .t3-card__props dt { color: var(--text-3); white-space: nowrap; }
  .t3-card__props dt::after { content: ":"; }
  .t3-card__props dd { margin: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .t3-card__variants { display: none; font-size: var(--fs-xs); color: var(--text-3); }

  /* ── выбор торгового предложения в карточке: каждая группа — одна строка без прокрутки;
   *    что не влезло — «+N» со ссылкой на товар (card.js compactChoices). Фото-варианты — круглые миниатюры. ── */
  .t3-card .t3-choice { display: grid; gap: 6px; min-width: 0; margin-top: 2px; }
  .t3-card .t3-choice__name, .t3-card .t3-choice__common { display: none; }
  .t3-card .t3-choice__group { min-width: 0; }
  .t3-card .t3-card__choice .t3-choice .t3-choice__options { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; padding: 2px; margin: -2px; }
  .t3-card .t3-opt { flex: none; min-width: 30px; min-height: 28px; padding: 0 10px; font-size: 12px; }
  .t3-card .t3-choice__options > .t3-opt.is-overflow { display: none; }
  .t3-card .t3-opt--tile { padding: 0 10px 0 2px; gap: 6px; border-radius: var(--radius-pill); }
  .t3-card .t3-opt--tile .t3-opt__meta { display: none; }
  .t3-card .t3-opt__img { width: 24px; height: 24px; border-radius: 50%; }
  .t3-card .has-images .t3-opt--tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px; padding: 2px; border-radius: 50%; }
  .t3-card .has-images .t3-opt--tile .t3-opt__img { width: 24px; height: 24px; }
  .t3-card .has-images .t3-opt--tile .t3-opt__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-style="editorial"] .t3-card .has-images .t3-opt--tile, [data-style="editorial"] .t3-card .t3-opt__img { border-radius: 0; }
  .t3-opt--more { color: var(--text-2); background: var(--surface-2); border-color: transparent; font-weight: 600; text-decoration: none; }
  .t3-opt--more:hover { color: var(--text); border-color: var(--line-strong); }
  .t3-card .t3-opt--more { padding: 0 8px; min-height: 28px; }
  .t3-card .has-images .t3-opt--more { min-height: 30px; }

  /* ── цена и покупка ── */
  .t3-card__foot { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-2) var(--s-2); }
  .t3-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
  .t3-price__now { font-size: var(--fs-l); font-weight: 700; color: var(--price-color); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .t3-price--sale .t3-price__now { color: var(--sale-color); }
  .t3-price__old { font-size: var(--fs-xs); color: var(--text-3); }
  .t3-price__note { font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }

  .t3-card .t3-buy__add { width: 100%; }
  .t3-buy { display: grid; }
  .t3-buy__stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 44px; border-radius: var(--radius-btn); background: var(--brand-soft); color: var(--brand-text); }
  .t3-buy__stepper[hidden] { display: none; }
  .t3-buy__step { height: 44px; font-size: 20px; font-weight: 500; color: inherit; border-radius: var(--radius-btn); }
  .t3-buy__step:hover { background: var(--brand-soft-2); }
  .t3-buy__step:disabled { opacity: .4; }
  .t3-buy__qty { display: grid; justify-items: center; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }
  .t3-buy__qty small { font-size: 10px; font-weight: 500; opacity: .8; }
  .t3-buy[aria-busy="true"] { opacity: .6; pointer-events: none; }
  .t3-buy__error { font-size: var(--fs-xs); color: var(--danger); margin-top: 4px; }
  @media (max-width: 599px) {
    .t3-card .t3-buy__add span { font-size: var(--fs-xs); }
    .t3-card .t3-buy__add .i { display: none; }
  }

  /* ── вид «список» ── */
  @container products (min-width: 520px) {
    .t3-products[data-view="list"] .t3-card { display: grid; grid-template-columns: minmax(140px, 26%) minmax(0, 1fr) minmax(170px, 22%); gap: var(--s-4); align-items: start; }
    .t3-products[data-view="list"] .t3-card__tools { left: calc(26% - 44px); right: auto; }
    .t3-products[data-view="list"] .t3-card__body { padding: var(--s-2) 0; gap: var(--s-2); }
    .t3-products[data-view="list"] .t3-card__title { font-size: var(--fs-m); font-weight: 600; }
    .t3-products[data-view="list"] .t3-card__props { display: grid; gap: 2px; }
    .t3-products[data-view="list"] .t3-card .t3-choice__name { display: block; font-size: var(--fs-xs); color: var(--text-3); }
    .t3-products[data-view="list"] .t3-card__foot { padding: var(--s-2) var(--s-2) var(--s-2) 0; align-content: start; }
  }

  /* ── вид «таблица»: компактные строки ── */
  .t3-products[data-view="table"] { gap: 0; }
  .t3-products[data-view="table"] .t3-products__item + .t3-products__item { border-top: 1px solid var(--line); }
  .t3-products[data-view="table"] .t3-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .t3-products[data-view="table"] .t3-gallery { border-radius: var(--radius-s); }
  .t3-products[data-view="table"] :is(.t3-gallery__dots, .t3-badges, .t3-card__tools, .t3-card .t3-choice, .t3-card__props) { display: none; }
  .t3-products[data-view="table"] .t3-card__variants { display: block; }
  .t3-products[data-view="table"] .t3-card__body { padding: 0; gap: 2px; }
  .t3-products[data-view="table"] .t3-card__foot { padding: 0; grid-template-columns: auto auto; align-items: center; gap: var(--s-4); }
  .t3-products[data-view="table"] .t3-buy__add { min-height: 36px; width: auto; }
  .t3-products[data-view="table"] .t3-buy__stepper { min-height: 36px; grid-template-columns: 36px 64px 36px; }
  .t3-products[data-view="table"] .t3-buy__step { height: 36px; }
  @container products (max-width: 520px) {
    .t3-products[data-view="table"] .t3-card { grid-template-columns: 56px minmax(0, 1fr); }
    .t3-products[data-view="table"] .t3-card__foot { grid-column: 2; justify-content: space-between; }
  }
}

/* выбор торгового предложения — общий вид (карточка выше сужает его до строки) */
@layer modules {
  .t3-choice { display: grid; gap: var(--s-3); min-width: 0; }
  .t3-choice__group { min-width: 0; }
  .t3-choice__name { font-size: var(--fs-s); font-weight: 600; margin-bottom: var(--s-2); }
  .t3-choice__current { font-weight: 400; color: var(--text-2); }
  .t3-choice__common { font-size: var(--fs-s); color: var(--text-2); }
  .t3-choice__common span { color: var(--text-3); }
  .t3-choice__options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .t3-opt {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 44px; min-height: 40px; padding: 0 var(--s-4);
    border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface);
    font-size: var(--fs-s); font-weight: 500; color: var(--text); white-space: nowrap;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  [data-style="editorial"] .t3-opt { border-radius: 0; }
  .t3-opt:hover { border-color: var(--text); }
  .t3-opt[aria-checked="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
  .t3-opt[aria-disabled="true"] { color: var(--text-3); border-style: dashed; background: none; }
  .t3-opt.is-nostock:not([aria-checked="true"]) { color: var(--text-3); }
  .t3-opt.is-nostock .t3-opt__label { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
  .t3-opt--tile { border-radius: var(--radius-m); padding: 6px 12px 6px 6px; white-space: normal; text-align: left; }
  .t3-opt__img { width: 40px; height: 40px; border-radius: calc(var(--radius-m) - 4px); object-fit: cover; background: var(--surface-2); }
  .t3-opt__meta { display: block; font-size: var(--fs-xs); color: var(--text-3); }
  .t3-opt__meta b { color: var(--text); font-weight: 600; }
  .t3-choice.is-loading { opacity: .6; pointer-events: none; }

  /* миниатюры (варианты различаются только фото): квадраты с рамкой выбора, подпись — в заголовке группы */
  .is-swatches .t3-choice__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--s-2); width: min(520px, 100%); }
  .t3-opt--swatch { display: block; aspect-ratio: 1; min-height: 0; padding: 3px; border-radius: var(--radius-m); }
  .t3-opt--swatch .t3-opt__img { display: block; width: 100%; height: 100%; border-radius: calc(var(--radius-m) - 4px); }
  .t3-opt--swatch[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--text); }
  .t3-opt--swatch.is-nostock:not([aria-checked="true"]) .t3-opt__img { opacity: .45; filter: grayscale(.6); }
  .t3-opt--swatch.is-nostock::after { content: ""; position: absolute; inset: 6px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--text-3) 50%, transparent calc(50% + 1px)); border-radius: inherit; pointer-events: none; }
  .t3-opt--swatch .t3-opt__meta { display: none; }

  /* фото + подпись: плитки в сетку */
  .has-images:not(.is-swatches) .t3-choice__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--s-2); }

  /* много вариантов на детальной: свёрнуто до двух рядов, «Показать все N» (card.js) */
  .t3-choice__options.is-collapsed > .t3-opt.is-overflow { display: none; }
  .t3-choice__toggle { justify-self: start; margin-top: var(--s-2); padding: 0; border: 0; background: none; font-size: var(--fs-s); font-weight: 600; color: var(--brand-text); cursor: pointer; }
  .t3-choice__toggle:hover { text-decoration: underline; text-underline-offset: .2em; }
  .t3-choice__current.is-preview { color: var(--text-3); }
}