/* ============================================================
   Участок «.card» — ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ.

   Сведено 2026-08-07 из файлов:
   storefront.v3.css, design-lab.v1.css, design-lab-flagship.v2.css, mobile-layout.v2.css, ui-tweaks.v1.css, ui-fixes.v5.css.

   Значения не подбирались заново — перенесено ровно то, что фактически
   доезжало до покупателя. Правила, не выигрывавшие нигде, исчезли сами:
   переносить было нечего.

   ВНИМАНИЕ на будущее. Сведение 07.08 проверялось расчётом по 19 ширинам
   экрана, записанным в инструменте руками, и было объявлено «совпало везде».
   Это оказалось неправдой: границы 360px в том списке не было, и одно правило
   уехало на 320px (исправлено 10.08, см. ниже). Сейчас инструмент берёт
   границы из самого CSS и проверяет их все, но старую формулировку про
   «совпало везде» здесь оставлять нельзя — она была ложной.

   Правишь этот участок — правь здесь, включая телефон и тёмную тему.
   Новый слой поверх не заводи: npm run verify это ловит.
   Что где выигрывает: npm run who-wins .card
   ============================================================ */
.card{background:var(--fl-surface) !important;border:1px solid var(--dl-line) !important;border-color:var(--fl-line) !important;border-radius:22px !important;box-shadow:0 8px 24px rgba(8,26,47,.055) !important;display:flex;flex-direction:column;overflow:hidden;padding:18px;position:relative;transition:transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s, border-color .3s}
.grid.hscroll .card{flex:0 0 262px;scroll-snap-align:start}
.card::after{background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),rgba(0,144,231,.12),transparent 46%);border-radius:inherit;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .25s;z-index:1}
.card:hover::after{opacity:1}
html[data-theme="dark"] .card::after{background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),rgba(120,200,255,.10),transparent 46%)}
.card::before{background:none;border:2px solid var(--fl-signal, #f04452);border-radius:inherit;bottom:0;content:"";height:auto;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s;z-index:3}
.card:hover::before{opacity:1}
.card:hover{border-color:rgba(23,105,224,.26) !important;box-shadow:var(--fl-shadow-2) !important;transform:translateY(-4px)}
.card:hover .thumb img{transform:scale(1.035)}
.card h3{color:var(--ink);cursor:pointer;font-size:15px;margin-bottom:8px;min-height:44px}
.card h3:hover{color:var(--blue)}
.card.is-oos{opacity:.72}
.card h3 .tlink{color:inherit;text-decoration:none}
.card h3 .tlink:hover{text-decoration:underline}
.card .thumb{background:#f4f6f9 !important;border-radius:17px;min-height:232px}
html[data-theme="dark"] .card .thumb{background:#142337 !important}
.card .thumb img{transition:transform .35s ease}
.card .specs{color:var(--muted);font-size:12.5px}
.card .price{color:var(--ink);font-size:20px;letter-spacing:-.035em}
.card .old{color:var(--muted)}
.card .buy{border-radius:12px;font-size:13.5px;min-height:46px}
.card .fav{background:rgba(255,255,255,.9);border:1px solid var(--dl-line);border-color:var(--fl-line);box-shadow:0 5px 16px rgba(8,26,47,.08)}
.card .compare{background:rgba(255,255,255,.9);border:1px solid var(--dl-line);box-shadow:0 5px 16px rgba(8,26,47,.08)}
.card .cmp{background:rgba(255,255,255,.9);border:1px solid var(--dl-line);border-color:var(--fl-line);box-shadow:0 5px 16px rgba(8,26,47,.08)}
.card .fav:hover{background:var(--fl-signal-soft);border-color:rgba(240,68,82,.24);color:var(--fl-signal)}
.card .cmp:hover{background:var(--fl-signal-soft);border-color:rgba(240,68,82,.24);color:var(--fl-signal)}
.card .fav .svg-ico{color:#e0313f;height:18px;width:18px}
.card .cmp .svg-ico{height:18px;width:18px}
.card .fav.on .svg-ico{color:#e0313f !important;fill:#e0313f !important}
.card .cmp.on .svg-ico{color:var(--blue,#1769e0) !important;fill:var(--blue,#1769e0) !important}
@media(max-width:680px){
  .card{border-radius:17px !important;padding:10px}
  .grid.hscroll .card{flex-basis:calc(50vw - 25px);max-width:190px;min-width:145px}
  .card:hover .thumb img{transform:scale(1.08)}
  .card h3{font-size:12.5px;margin-bottom:6px;min-height:34px;overflow-wrap:anywhere}
  .card .thumb{background:transparent !important;border:0;border-radius:0;height:112px;margin-bottom:8px;min-height:112px}
  .card .thumb img{height:100%;max-height:none;max-width:none;object-fit:contain;object-position:center;transform:scale(1.06);width:100%}
  .card .specs{display:none}
  .card .price{font-size:16px}
  .card .buy{min-height:44px;width:100%}
  .card .fav{height:32px;left:auto;margin:0;position:absolute;right:8px;top:8px;width:32px}
  .card .cmp{height:32px;left:auto;margin:0;position:absolute;right:8px;top:44px;width:32px}
}
/* Граница именно 360px, а не 320px.

   10.08.2026: здесь стояло max-width:320px, и это была ошибка сведения, а не
   замысел. В mobile-layout.v2.css правило жило в @media (max-width: 360px).
   Инструмент сведения считал вид по списку ширин, записанному руками; числа
   360 в нём не было, и он записал ближайшее известное — 320. На экранах
   321–360px карточка в горизонтальной ленте получала min-width 145px вместо
   138px (заметно на 321–339px, до 7px по ширине).

   Список ширин с тех пор берётся из самого CSS, так что повториться это не
   может. Правило восстановлено по релизному архиву dist/ от 07.08.2026. */
@media(max-width:360px){
  .grid.hscroll .card{min-width:138px}
}