/* SUBZ — каталог-лента (/brands): поиск → ряд брендов → категории → лента лотов с картинками продавцов.
   Оформление — токены SUBZ; цвет дают только бренды (--c/--i) и картинки продавцов. */

.fd-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:clamp(16px,2vw,28px)}
.fd-search{flex:1 1 420px;display:flex;align-items:center;gap:12px;height:52px;padding:0 18px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-1);color:var(--mute);transition:border-color .2s,box-shadow .2s}
.fd-search:focus-within{border-color:var(--fg-2);box-shadow:0 0 0 4px rgb(255 255 255 / .06);color:var(--fg)}
.fd-search svg{flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9}
.fd-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--fg);font:inherit;font-size:16px}
.fd-search input::placeholder{color:#555}
.fd-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.fd-live{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fd-live i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px #3ddc84}

/* ── ряд брендов ─────────────────────────────────────────────────── */
.fd-brands{position:relative;margin-top:22px}
.fd-brands__row{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px 6px}
.fd-brands__row::-webkit-scrollbar{display:none}
.fd-brand{flex:none;display:grid;justify-items:center;gap:8px;width:88px;padding:6px 2px;border:0;border-radius:16px;background:none;color:var(--fg-2);font:inherit;cursor:pointer;scroll-snap-align:start;transition:background .2s,color .2s}
.fd-brand__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--c,#222) 100%,#fff 10%),color-mix(in srgb,var(--c,#222) 100%,#000 20%));color:var(--i,#fff);box-shadow:inset 0 1px 0 rgb(255 255 255 / .25);transition:transform .35s var(--ease-out),box-shadow .35s}
.fd-brand__ico svg{width:32px;height:32px;fill:currentColor}
.fd-brand__ico b{font-family:var(--f-display);font-size:20px;font-weight:800}
.fd-brand__ico--all{background:var(--bg-2);border:1px solid var(--line-2);color:var(--fg)}
.fd-brand__ico--all svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.fd-brand em{max-width:100%;font-style:normal;font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-brand:hover{color:var(--fg)}
.fd-brand:hover .fd-brand__ico{transform:translateY(-3px)}
.fd-brand.is-on{color:var(--fg);background:var(--bg-2)}
.fd-brand.is-on .fd-brand__ico{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg)}
.fd-brand[hidden]{display:none}
.fd-arrow{position:absolute;top:26px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;background:rgb(10 10 10 / .92);color:var(--fg);cursor:pointer;box-shadow:0 8px 24px rgb(0 0 0 / .6);transition:background .2s}
.fd-arrow:hover{background:var(--bg-3)}
.fd-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.fd-arrow--l{left:-8px}.fd-arrow--r{right:-8px}
.fd-arrow[hidden]{display:none}

/* ── категории ───────────────────────────────────────────────────── */
.fd-cats{display:flex;gap:4px;margin-top:18px;padding:5px;border:1px solid var(--line);border-radius:16px;background:var(--bg-1);overflow-x:auto;scrollbar-width:none}
.fd-cats::-webkit-scrollbar{display:none}
.fd-cat{flex:none;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px;border:0;border-radius:11px;background:none;color:var(--fg-2);font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.fd-cat svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.fd-cat:hover{background:var(--bg-3);color:var(--fg)}
.fd-cat.is-on{background:var(--accent);color:var(--on-accent);font-weight:600}

/* ── заголовок ленты ─────────────────────────────────────────────── */
.fd-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:clamp(24px,3vw,36px) 0 18px}
.fd-title{font-family:var(--f-display);font-size:clamp(26px,2.6vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1}
.fd-all{font-size:14px;color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.fd-all:hover{color:var(--fg)}
.fd-all[hidden]{display:none}
.fd-sort{margin-left:auto}
.fd-sort select{height:40px;padding:0 36px 0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bdbdbd' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/14px no-repeat;color:var(--fg);font:inherit;font-size:14px;appearance:none;cursor:pointer}

/* ── лента ───────────────────────────────────────────────────────── */
.fd-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 16px}
.fd-grid>[hidden],.fd-more[hidden],#fd-empty[hidden],#fd-soon[hidden]{display:none!important}
.fc{display:flex;flex-direction:column;min-width:0;color:var(--fg)}
.fc__head{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:10px}
.fc__ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--c);color:var(--i);box-shadow:inset 0 1px 0 rgb(255 255 255 / .25)}
.fc__ico svg{width:19px;height:19px;fill:currentColor}
.fc__ico b{font-size:11px;font-weight:800}
.fc__who{display:grid;gap:1px;min-width:0}
.fc__who b{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc__who small{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc__img{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:16px;background:var(--bg-2);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.fc__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-out)}
.fc:hover .fc__img{transform:translateY(-4px);box-shadow:0 26px 50px -26px color-mix(in srgb,var(--c) 80%,transparent),inset 0 0 0 1px rgb(255 255 255 / .1)}
.fc:hover .fc__img img{transform:scale(1.04)}
.fc__gen{position:absolute;inset:0;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px;background:radial-gradient(90% 90% at 100% 0%,color-mix(in srgb,var(--c) 100%,#fff 14%) 0%,transparent 75%),linear-gradient(160deg,color-mix(in srgb,var(--c) 85%,#000 5%),color-mix(in srgb,var(--c) 40%,#060606));color:#fff}
.fc__gen-wm{position:absolute;right:-10%;top:-10%;z-index:-1;width:60%;color:var(--i);opacity:.22;transform:rotate(-10deg)}
.fc__gen-wm svg{width:100%;height:auto;fill:currentColor}
.fc__gen b{font-family:var(--f-display);font-size:26px;font-weight:800;line-height:.95;letter-spacing:-.04em;word-spacing:.12em;text-transform:uppercase}
.fc__gen small{font-size:12px;color:rgb(255 255 255 / .8)}
.fc__flag{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:rgb(0 0 0 / .62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:12px;font-weight:600}
.fc__flag svg{width:12px;height:12px;fill:#ffc53d}
.fc__price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px}
.fc__price b{font-family:var(--f-display);font-size:21px;font-weight:800;letter-spacing:-.03em}
.fc__price i{font-style:normal;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;background:#0b1a11;border:1px solid #23543a;color:#8fd4a3;font-size:11.5px;font-weight:600}
.fc__title{margin-top:6px;font-size:14.5px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.fc:hover .fc__title{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.fc__rate{display:flex;align-items:center;gap:7px;min-width:0;margin-top:8px;font-size:13px;color:var(--fg-2);white-space:nowrap}
.fc__stars{letter-spacing:1px;font-size:13px;background:linear-gradient(90deg,#ffc53d calc(var(--r,0) / 5 * 100%),#3a3a3a 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.fc__stars--none{background:none;color:#333}
.fc__n{color:var(--mute);overflow:hidden;text-overflow:ellipsis}
.fd-more{display:flex;justify-content:center;margin-top:36px}
.fd-more .m-btn{min-width:240px;height:50px}
#fd-empty{margin-top:8px}

/* ── адаптив ─────────────────────────────────────────────────────── */
@media (max-width:1280px){.fd-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.fd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){
  .fd-top,.fd-top>*,.fd-head,.fd-head>*{min-width:0}
  .fd-search{flex-basis:100%;height:48px}
  .fd-arrow{display:none!important}
  .fd-brand{width:74px}
  .fd-brand__ico{width:56px;height:56px;border-radius:16px}
  .fd-brand__ico svg{width:28px;height:28px}
  .fd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
  .fc__head{gap:8px;margin-bottom:8px}
  .fc__ico{width:28px;height:28px;border-radius:8px}
  .fc__ico svg{width:16px;height:16px}
  .fc__who b{font-size:13px}.fc__who small{font-size:11px}
  .fc__img{border-radius:12px}
  .fc__flag{height:22px;padding:0 7px;font-size:0;gap:0}
  .fc__flag svg{width:11px;height:11px}
  .fc__gen b{font-size:18px}
  .fc__price b{font-size:17px}
  .fc__price i{font-size:10.5px}
  .fc__title{font-size:13px}
  .fc__rate{font-size:12px;gap:5px}
  .fc__stars{font-size:11px}
  .fd-sort{margin-left:0}
}

/* ── промо-карусель ──────────────────────────────────────────────── */
.pr{position:relative;margin-top:clamp(14px,1.8vw,24px);--pr-c:#fff}
.pr__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:26px;box-shadow:0 0 0 1px var(--line)}
.pr__track::-webkit-scrollbar{display:none}
.pr__slide{position:relative;isolation:isolate;overflow:hidden;flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;min-height:clamp(250px,22vw,340px);padding:clamp(22px,3vw,44px) clamp(22px,3.4vw,52px);color:#fff;
  background:radial-gradient(55% 90% at 78% 50%,color-mix(in srgb,var(--c) 100%,#fff 10%) 0%,transparent 70%),linear-gradient(115deg,#050505 0%,color-mix(in srgb,var(--c) 30%,#050505) 45%,color-mix(in srgb,var(--c) 75%,#000 10%) 100%)}
.pr__slide::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgb(255 255 255 / .07) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(60% 90% at 75% 50%,#000,transparent 80%);mask-image:radial-gradient(60% 90% at 75% 50%,#000,transparent 80%)}
.pr__slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(0 0 0 / .55) 0%,transparent 55%)}
.pr__txt{display:grid;justify-items:start;gap:14px;max-width:560px}
.pr__kicker{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgb(255 255 255 / .8)}
.pr__kicker i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgb(255 255 255 / .18),0 0 12px var(--c)}
.pr__title{display:grid;font-family:var(--f-display);font-size:clamp(34px,4.2vw,68px);font-weight:800;line-height:.92;letter-spacing:-.045em}
.pr__title em{font-style:normal;font-size:.6em;letter-spacing:-.03em;color:rgb(255 255 255 / .72);margin-top:6px}
.pr__sub{max-width:460px;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:rgb(255 255 255 / .78)}
.pr__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:4px}
.pr__price{display:flex;align-items:baseline;gap:6px;font-family:var(--f-display);font-size:clamp(26px,2.4vw,38px);font-weight:800;letter-spacing:-.035em}
.pr__price small{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255 / .7)}
.pr__btn{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 20px;border-radius:14px;background:#fff;color:#000;font-size:15px;font-weight:600;transition:transform .3s var(--ease-out)}
.pr__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.3;transition:transform .3s var(--ease-out)}
.pr__slide:hover .pr__btn svg{transform:translateX(4px)}
.pr__art{position:relative;justify-self:center;width:clamp(200px,20vw,300px);aspect-ratio:1}
.pr__tile{position:absolute;inset:8%;display:grid;place-items:center;border-radius:28%;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 100%,#fff 16%),color-mix(in srgb,var(--c) 100%,#000 25%));color:var(--i);transform:rotate(-9deg);box-shadow:inset 0 2px 0 rgb(255 255 255 / .35),0 50px 90px -30px #000,0 0 80px -10px color-mix(in srgb,var(--c) 70%,transparent);transition:transform 1s var(--ease-out)}
.pr__slide:hover .pr__tile{transform:rotate(-3deg) scale(1.03)}
.pr__tile svg{width:52%;height:auto;fill:currentColor}
.pr__tile b{font-family:var(--f-display);font-size:clamp(64px,7vw,110px);font-weight:800;letter-spacing:-.05em}
.pr__chip{position:absolute;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:rgb(10 10 10 / .78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .16);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 14px 30px -12px #000;animation:pr-float 5s ease-in-out infinite}
.pr__chip svg{width:13px;height:13px;fill:#ffc53d}
.pr__chip--a{left:-14%;top:10%}
.pr__chip--b{right:-18%;top:44%;animation-delay:-1.6s}
.pr__chip--c{left:-4%;bottom:4%;animation-delay:-3.2s;background:#fff;color:#000;border-color:#fff}
@keyframes pr-float{50%{transform:translateY(-8px)}}
.pr__slide--safe .pr__tile svg{fill:rgb(255 255 255 / .9);stroke:none}
.pr__slide--safe .pr__tile svg path+path{stroke:#1d4a31}
.pr__slide--sell{background:radial-gradient(55% 90% at 78% 50%,#3a3a3a 0%,transparent 70%),linear-gradient(115deg,#050505 0%,#141414 55%,#262626 100%)}
.pr__slide--sell .pr__kicker i{background:#fff}
.pr__tile--sell{background:linear-gradient(150deg,#fff,#cfcfcf)}

.pr__nav{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border:1px solid rgb(255 255 255 / .2);border-radius:50%;background:rgb(0 0 0 / .5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;opacity:0;transition:opacity .25s,background .2s}
.pr:hover .pr__nav{opacity:1}
.pr__nav:hover{background:rgb(0 0 0 / .75)}
.pr__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.pr__nav--l{left:14px}.pr__nav--r{right:14px}
.pr__dots{position:absolute;left:clamp(22px,3.4vw,52px);bottom:18px;z-index:3;display:flex;gap:6px}
.pr__dots button{position:relative;width:26px;height:4px;padding:0;border:0;border-radius:4px;background:rgb(255 255 255 / .28);overflow:hidden;cursor:pointer;transition:width .3s var(--ease-out)}
.pr__dots button.is-on{width:52px}
.pr__dots button i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.pr__dots button.is-on i{transform:scaleX(1)}
.pr.is-run .pr__dots button.is-on i{transform:scaleX(0);animation:pr-bar 6s linear forwards}
@keyframes pr-bar{to{transform:scaleX(1)}}

@media (max-width:900px){
  .pr__slide{grid-template-columns:1fr;min-height:0;padding:22px 20px 44px}
  .pr__art{position:absolute;right:-30px;top:18px;width:150px;opacity:.9;z-index:-1}
  .pr__chip{display:none}
  .pr__txt{max-width:none;padding-right:90px}
  .pr__nav{display:none}
  .pr__dots{left:20px;bottom:16px}
}
@media (max-width:600px){
  .pr__track{border-radius:20px}
  .pr__title{font-size:32px}
  .pr__sub{display:none}
  .pr__txt{padding-right:70px;gap:10px}
  .pr__art{width:120px;right:-24px}
  .pr__btn{height:42px;padding:0 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.pr__chip{animation:none}.pr.is-run .pr__dots button.is-on i{animation:none;transform:scaleX(1)}}