/* SUBZ — строка продавца внизу карточки лота в каталоге (/brands), компактная.
   Одна линия: аватар в рамке из профиля продавца, ник, 2 ачивки из его витрины, рейтинг и отзывы.
   Стоит между ценой и названием лота: над ней у всех карточек ряда одинаковые блоки, поэтому
   строки продавца в ряду на одной линии, а разная длина названий уходит вниз карточки.
   v2: вместо плашки v1 (карточки становились выше и на телефоне стояли вразнобой).
   v3: аватар — квадрат со скруглёнными углами, как в профиле (~26% от стороны), а не круг.
   v4: всё чуть мельче (аватар 22px, на телефоне 18px); рейтинг и число отзывов видны у всех
       продавцов и на телефоне тоже — при нехватке места сокращается ник, а не отзывы.
   v5: строка над названием лота (была под ним, прижатая к низу). Высота карточки та же.
       Цена и плашка гарантии всегда в одну строку (на телефоне «🛡 180 дней» вместо «Гарантия 180 дней»),
       иначе перенос цены сдвигал строку продавца в своей карточке.
   v6: строка тише названия лота — аватар 18px (телефон 16px), ник серым и не жирным,
       шрифт, медали и рейтинг мельче. Исправлен пропавший пробел «Гарантия12 часов» на десктопе.
   v7: плашка демо-режима каталога (/brands?demo=1, только администрации) и демо-аватары. */

@property --fs-a{syntax:"<angle>";inherits:false;initial-value:0deg}

.fs{--sa:#fff;display:flex;align-items:center;gap:5px;min-width:0;margin-top:8px;
  font-size:11.5px;line-height:1.2;color:var(--fg-2,#cfcfcf);white-space:nowrap}

/* аватар: скруглённый квадрат; кольцо рамки рисуется снаружи и высоту строки не меняет */
.fs__ava{position:relative;flex:none;width:18px;height:18px;border-radius:5px}
.fs__pic{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:5px;
  background:#1f1f1f;color:#fff;font:700 8.5px/1 var(--f-display,inherit)}
.fs__pic img{display:block;width:100%;height:100%;object-fit:cover}
.fs__ava::before{content:"";position:absolute;inset:-2px;z-index:1;padding:1.3px;border-radius:7px;background:var(--sa);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fs__ava--f-none::before{display:none}
.fs__ava--f-line::before{opacity:.85}
.fs__ava--f-glow{animation:fsPulse 2.4s ease-in-out infinite}
.fs__ava--f-holo::before{background:conic-gradient(from var(--fs-a),#ff4fd8,#4fc3ff,#7bff9b,#ffe14f,#ff4fd8);animation:fsSpin 4s linear infinite}
.fs__ava--f-fire::before{background:conic-gradient(from var(--fs-a),#ff3d00,#ffb300,#ff6a00,#ffd54f,#ff3d00);animation:fsSpin 2.6s linear infinite}
.fs__ava--f-fire{animation:fsFire 1.2s ease-in-out infinite alternate}
.fs__ava--f-legend::before{background:linear-gradient(135deg,#fff3c4,#f5c451 35%,#b8791b 65%,#ffe7a0)}
.fs__ava--f-legend{box-shadow:0 0 10px -3px #f5c451}

.fs__name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg-2,#cfcfcf);font-weight:500}

/* 2 ачивки из витрины — маленькие монетки внахлёст, цвет — редкость */
.fs__ach{display:flex;flex:none;align-items:center}
.fs__b{--r:#a7b0ba;display:grid;place-items:center;width:13px;height:13px;border:1.1px solid var(--r);border-radius:50%;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--r) 38%,#101010),#090909 72%);color:var(--r);
  box-shadow:0 0 0 1.5px var(--bg,#000)}
.fs__b+.fs__b{margin-left:-3px}
.fs__b .ico{width:7.5px;height:7.5px}
.fs__b--common{--r:#a7b0ba}
.fs__b--rare{--r:#5b8cff}
.fs__b--epic{--r:#b07cff}
.fs__b--legend{--r:#f5c451;background:radial-gradient(circle at 50% 30%,#6b4d12,#120c03 72%)}

/* рейтинг и отзывы — справа, у всех; не сжимаются (сокращается ник) */
.fs__rating{display:inline-flex;align-items:center;gap:3px;flex:none;margin-left:auto;color:#ffc53d;font-weight:600}
.fs__rating .ico{width:10px;height:10px;fill:currentColor;stroke:none}
.fs__rating--none{color:var(--mute,#8a8a8a);font-weight:500}
.fs__n{flex:none;color:var(--mute,#8a8a8a)}
.fs__n::before{content:"·";margin-right:5px;color:var(--line-2,#3a3a3a)}

/* цена и гарантия — одной строкой, чтобы строка продавца под ними стояла в ряду ровно */
.fc__price{flex-wrap:nowrap;min-width:0}
.fc__price b{flex:none}
.fc__price i{min-width:0;overflow:hidden;white-space:nowrap}
.fc__war{gap:.3em}  /* пробел между «Гарантия» и сроком: во flex-плашке пробел в конце слова схлопывается */
.fc__war .ico{display:none}

/* телефоны: мельче; отзывы коротко — «★ 4.5 (12)» */
@media (max-width:720px){
  .fs{gap:4px;font-size:10.5px}
  .fs__ava{width:16px;height:16px}
  .fs__ava,.fs__pic{border-radius:4px}
  .fs__ava::before{border-radius:6px}
  .fs__pic{font-size:7.5px}
  .fs__b{width:12px;height:12px;border-width:1px}
  .fs__b+.fs__b{margin-left:-3px}
  .fs__b .ico{width:7px;height:7px}
  .fs__rating{gap:2px}
  .fs__rating .ico{width:9px;height:9px}
  .fs__w{display:none}
  .fs__n::before{content:"(";margin:0;color:inherit}
  .fs__n::after{content:")"}
  .fc__price i{gap:3px;padding:0 6px}
  .fc__war .ico{display:block;flex:none;width:11px;height:11px}
  .fc__war-t{display:none}
}

@media (prefers-reduced-motion:reduce){.fs__ava,.fs__ava::before{animation:none!important}}
@keyframes fsSpin{to{--fs-a:360deg}}
@keyframes fsPulse{0%,100%{box-shadow:0 0 5px -2px var(--sa)}50%{box-shadow:0 0 10px 0 var(--sa)}}
@keyframes fsFire{from{box-shadow:0 0 6px -2px #ff5a00}to{box-shadow:0 -2px 10px 0 #ff8a00}}

/* демо каталога (?demo=1, только администрации): плашка над лентой */
.fd-demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;padding:10px 14px;
  border:1px dashed #6b5520;border-radius:12px;background:#140f05;font-size:11px;letter-spacing:.04em;color:#ffd98a}
.fd-demo .ico{flex:none;width:14px;height:14px}
.fd-demo a{color:var(--fg,#fff);text-decoration:underline;text-underline-offset:3px}
.fd-demo a:first-of-type{margin-left:auto}
.fs__pic--demo{font-weight:800}
.fs__pic--demo .ico{width:64%;height:64%}