/* Мини-карточка товара (разметка — catalog/_minicard.html, поведение —
   minicard.js). Уменьшенная карточка сетки каталога: тот же порядок —
   снимок, имя, наличие, деньги, покупка, — те же размеры шрифтов на шаг
   мельче (catalog/list.html, .item).

   Сайт — белый документ: ни рамок, ни теней, ни «пилюль». В сетке
   карточку держат снимок и отступы; всплывающую — заливка var(--chip),
   как у сетки вариантов помощника (dropdown.css, .sh-pop) и пузыря
   ассистента (templates/base.html, .assist-log p.bot). Бейдж наличия
   каталога («пилюля» с обводкой поверх снимка) здесь заменён строкой
   моно-капсом с зелёной точкой — тем же языком, что и остальные подписи
   карточки. */

/* Сетка выдачи: сколько карточек влезет, столько и в ряду, но не больше
   восьми — ровно столько их и приходит (RESULTS_LIMIT), и на широком
   экране выдача обязана быть одной строкой, а не двумя неровными. Шаг в
   calc тот же, что column-gap ниже: иначе последний столбец вылезал бы
   за край. */
.mc-grid{display:grid; gap:var(--s5) var(--s4);
  grid-template-columns:repeat(auto-fill, minmax(max(116px, calc((100% - 7 * var(--s4)) / 8)), 1fr))}

.mc{position:relative; display:flex; flex-direction:column; min-width:0; color:var(--ink)}
.mc-shot{display:block; aspect-ratio:1/1; overflow:hidden; background:#FFFFFF;
  border-radius:var(--r-sm)}
.mc-shot img{display:block; width:100%; height:100%; object-fit:contain}
.mc-none{background:#F4F3F0}
/* Имя занимает ровно три строки — длинное подрезается, короткое
   добивается пустотой: иначе деньги и кнопки «скакали» бы по высоте от
   карточки к карточке. Артикулы пишут без пробелов («4.50GPH,45B»),
   поэтому перенос разрешён где угодно — иначе строка вылезает за край. */
.mc-name{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:var(--s2); min-height:calc(3 * 1.3em); overflow-wrap:anywhere;
  font:500 11.5px/1.3 var(--sans); color:var(--ink); text-decoration:none}
.mc-name:hover, .mc-shot:hover + .mc-name{text-decoration:underline}
.mc-name:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-sm)}
.mc-stock{display:flex; align-items:center; gap:6px; margin-top:var(--s1);
  font:500 8.5px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.mc-stock i{flex:none; width:6px; height:6px; border-radius:50%; background:#22A06B}

/* Подвал прижат к низу: карточки в ряду разной высоты именем, а деньги и
   кнопка стоят на одной линии. */
.mc-foot{display:flex; flex-direction:column; gap:6px; margin-top:auto; padding-top:var(--s2)}
.mc-money{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0}
.mc-money s{font:500 10px/1.2 var(--mono); color:#C4283A}
.mc-money b{font:600 12px/1.15 var(--mono); color:var(--ink)}
.mc-money small{font:400 8.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint)}

/* Покупка: «в корзину» ↔ счётчик, оба во всю ширину карточки. Подпись
   кнопки в иных языках вдвое длиннее английской («Aggiungi al carrello»),
   поэтому ей разрешено идти в две строки, а не вылезать за карточку. */
.mc-buy{display:flex; min-width:0}
.mc-add{flex:1; min-width:0; min-height:30px; padding:4px 6px; border:0; border-radius:var(--r-sm);
  background:var(--dark); color:var(--dark-ink); cursor:pointer;
  font:600 9px/1.25 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.mc-add:hover{opacity:.82}
.mc-add:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
/* Авторский display перебил бы hidden по каскаду — уже наступали
   (catalog/list.html, .add[hidden]). */
.mc-add[hidden], .mc-qty[hidden]{display:none}
/* Счётчик — коробка заливкой, а не обводкой. */
.mc-qty{flex:1; display:flex; align-items:stretch; min-width:0; min-height:30px;
  background:var(--chip); border-radius:var(--r-sm); overflow:hidden}
.mc-qty button{flex:none; width:30px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--muted); font:500 15px/1 var(--mono)}
.mc-qty button:hover{background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink)}
.mc-qty button:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.mc-qty output{flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
  font:600 12.5px/1 var(--mono); color:var(--ink)}
/* Отказ корзины — строкой в самой карточке: молча разойтись с корзиной
   нельзя. Пустая строка места не занимает. */

/* ── Всплывающая карточка таблицы форсунок ─────────────────────────────
   Та же карточка, лёжа: снимок слева, всё остальное справа — под буквой
   таблицы нужна не витрина, а короткая справка. Ставит её на место
   range-chart.js (position:fixed, поэтому прокрутка таблицы её не
   режет). Полоска-мост сверху (или снизу, если карточка раскрылась
   вверх) закрывает зазор до буквы: без неё курсор по дороге к карточке
   проваливается мимо обоих, и карточка закрывается прямо под рукой.
   Высоту моста ставит сценарий — он один знает, куда карточка легла. */
.mc-float{position:fixed; z-index:60; box-sizing:border-box;
  width:300px; max-width:calc(100vw - 16px); padding:var(--s3);
  background:var(--chip); border-radius:var(--r-md);
  font:400 12px/1.4 var(--sans); color:var(--ink);
  text-align:left; white-space:normal; letter-spacing:normal; text-transform:none}
.mc-float::before{content:""; position:absolute; left:0; right:0;
  top:calc(-1 * var(--mc-bridge, 0px)); height:var(--mc-bridge, 0px)}
.mc-float.up::before{top:auto; bottom:calc(-1 * var(--mc-bridge, 0px))}
.mc-float .mc{display:grid; grid-template-columns:84px minmax(0, 1fr);
  grid-template-rows:auto auto auto 1fr; column-gap:var(--s3)}
.mc-float .mc-shot{grid-column:1; grid-row:1 / span 4; align-self:start}
.mc-float .mc > :not(.mc-shot){grid-column:2}
.mc-float .mc-name{margin-top:0; min-height:0; -webkit-line-clamp:3}
.mc-float .mc-foot{margin-top:0; padding-top:var(--s2)}
/* Внутри карточки заливка та же, что у неё самой, — счётчик на ней
   пропал бы; берём белую поверхность страницы. */
.mc-float .mc-qty{background:var(--panel)}

@media (max-width:640px){
  .mc-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s5) var(--s3)}
  .mc-name{font-size:11px}
  .mc-stock{font-size:8px; letter-spacing:.08em}
  .mc-add{font-size:8.5px; letter-spacing:.04em}
  .mc-float{width:min(300px, calc(100vw - 16px))}
}