/* отличия главного блока этой страницы от main.css */
.top h1{max-width:22ch;text-wrap:balance}

/* ============================================================
   ИЗБРАННОЕ (design-favorites.html)
   Токены и компоненты – из дизайн-системы, новых цветов нет.
   ============================================================ */

/* ============================================================
   КАТЕГОРИЯ / ЛИСТИНГ (design-category.html)
   Токены и компоненты – из дизайн-системы, новых цветов нет.
   ============================================================ */
.pd-top{padding:16px 0 0}
.pd-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--gray);min-width:0}
.crumbs a{color:var(--gray);white-space:nowrap}
.crumbs a:hover{color:var(--green-dark)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs em{font-style:normal;color:var(--ink);white-space:nowrap}

/* шапка категории */
.cat-top{padding:16px 0 4px}
.cat-top h1{max-width:26ch;text-wrap:balance}
.cat-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font-size:13.5px;color:var(--gray)}
.cat-facts b{color:var(--ink)}
.cat-facts .st{color:var(--orange);letter-spacing:1px}
.cat-lead{margin-top:12px;max-width:78ch;color:var(--gray);font-size:14.5px;line-height:1.65}
.cat-lead a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
.cat-lead a:hover{color:var(--green)}
/* подборки внутри раздела – навигация, не фильтр */
.subcats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.subcats .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray)}
.subcats a{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:var(--r-pill);
  padding:8px 14px;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:.18s}
.subcats a:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green-dark)}
.subcats a span{color:var(--gray);font-weight:600;font-size:12px}
.subcats a:hover span{color:var(--green-dark)}


/* действия над списком */
.fv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
/* атрибут hidden не гасит display:flex – прячем явно (та же грабля, что со счётчиком в шапке) */
.fv-acts[hidden],.cat-facts[hidden]{display:none}
.fv-acts .btn svg{width:17px;height:17px;flex:0 0 auto}
.fv-clear{font-size:13px;font-weight:600;color:var(--gray);padding:8px 10px;border-radius:var(--r-sm);transition:.18s}
.fv-clear:hover{color:var(--red);background:rgba(199,65,52,.07)}
.lnk{font:inherit;color:var(--green-dark);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.lnk:hover{color:var(--green)}

/* полоса: сортировка слева, сумма и «в корзину все» справа */
.fv-bar{margin-top:22px}
.fv-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:12px 16px}
.fv-bar[hidden]{display:none}
.fv-sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.fv-sort .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray);margin-right:2px}
.fv-chip{font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);background:var(--page);
  color:var(--ink);transition:.18s;white-space:nowrap}
.fv-chip:hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.fv-chip.on{background:var(--green);color:#fff;box-shadow:none}
.fv-total{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.fv-total .sum{font-size:13.5px;color:var(--gray);white-space:nowrap}
.fv-total .sum b{color:var(--ink);font-size:16px}

/* карточка избранного: метки, заметка, нижняя строка */
.fv-card{position:relative}
.fv-card.is-out{opacity:0;transform:scale(.94);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.fv-flags{display:flex;flex-wrap:wrap;gap:6px}
.fv-flag{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:var(--r-pill)}
.fv-flag.in{background:var(--green-light);color:var(--green-dark)}
.fv-flag.down{background:var(--cream);color:var(--orange-text)}
/* активное сердечко НЕ переопределяем: в дизайн-системе это .heart-fx.on
   (розовый радиальный градиент + белое залитое сердце + свечение) – как на главной */
.fv-note{margin-top:-2px}
.fv-note-btn{display:flex;align-items:flex-start;gap:6px;width:100%;text-align:left;font-size:12.5px;
  color:var(--gray);font-weight:600;line-height:1.4;padding:6px 8px;border-radius:var(--r-sm);
  background:none;transition:.18s}
.fv-note-btn:hover{color:var(--green-dark);background:var(--page)}
.fv-note-btn svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px}
.fv-note.has .fv-note-btn{background:var(--cream);color:var(--orange-text)}
.fv-note textarea{width:100%;min-height:60px;border-radius:var(--r-sm);border:1.5px solid var(--green);
  background:#fff;padding:8px 10px;font:inherit;font-size:12.5px;line-height:1.45;color:var(--ink);resize:vertical}
.fv-when i{font-style:normal}
.fv-when{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--gray)}
.fv-rm{font:inherit;font-size:12px;font-weight:600;color:var(--gray);padding:4px 6px;border-radius:6px;transition:.18s}
.fv-rm:hover{color:var(--red);background:rgba(199,65,52,.07)}
.btn-buy.is-in{background:var(--green-light);color:var(--green-dark)}

/* «недавно смотрели» – компактная лента, не вторая сетка карточек */
.fv-seen{padding-top:34px}
.fv-seen-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fv-seen-item{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:10px;min-width:0;transition:box-shadow .25s,transform .25s var(--ease)}
.fv-seen-item:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.fv-seen-item .ph{width:64px;height:64px;flex:0 0 auto;border-radius:var(--r-sm);overflow:hidden;background:var(--cream)}
.fv-seen-item .ph img{width:100%;height:100%;object-fit:cover}
.fv-seen-item .tx{min-width:0;padding-right:30px}
.fv-seen-item .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;font-weight:600;line-height:1.3}
.fv-seen-item .nm:hover{color:var(--green-dark)}
.fv-seen-item .pr{font-size:13.5px;font-weight:700;margin-top:4px}
/* сердечко в ленте – тот же компонент, что на карточках: белый круг с тенью,
   активное состояние даёт .heart-fx.on (розовый градиент). Меняем только размер и место. */
.fv-seen-fav{position:absolute;top:8px;right:8px;width:30px;height:30px}
.fv-seen-fav svg{width:16px;height:16px}

/* как работает список */
.fv-how{padding-top:34px}
.fv-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fv-how-item{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px 20px}
.fv-how-item .ic{width:38px;height:38px;border-radius:11px;background:var(--green-light);color:var(--green-dark);
  display:grid;place-items:center;margin-bottom:11px}
.fv-how-item .ic svg{width:20px;height:20px}
.fv-how-item b{display:block;font-size:14.5px;margin-bottom:5px}
.fv-how-item p{font-size:13.5px;color:var(--gray);line-height:1.55}
/* сетка и пустое состояние */
.cat-grid{padding-top:20px}
.pcard[hidden]{display:none}   /* hidden сам по себе не гасит display:flex */
.cat-empty{display:none;text-align:center;padding:56px 20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.empty-ill{display:block;width:100%;max-width:200px;margin:0 auto 14px}
.cat-empty.on{display:block}
.cat-empty .ic{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;background:var(--green-light);
  color:var(--green-dark);display:grid;place-items:center}
.cat-empty .ic svg{width:28px;height:28px}
.cat-empty b{display:block;font-family:var(--head);font-size:19px;margin-bottom:6px}
.cat-empty p{color:var(--gray);font-size:14px;max-width:46ch;margin:0 auto 16px}
.cat-more{text-align:center;margin-top:26px}
.cat-more[hidden]{display:none}
.cat-more .btn{min-width:280px;justify-content:center}
.cat-more .shown{display:block;margin-top:10px;font-size:12.5px;color:var(--gray)}


.fv-empty .ic{background:var(--cream);color:var(--red)}
.fv-empty .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* плашка отмены удаления */
.fv-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:var(--z-modal);
  display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:12px 14px 12px 20px;box-shadow:var(--sh-lg);font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);max-width:calc(100vw - 32px)}
.fv-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.fv-toast button{font:inherit;font-weight:700;color:#fff;background:rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:7px 14px;white-space:nowrap;transition:.18s}
.fv-toast button:hover{background:rgba(255,255,255,.28)}

/* модалка «поделиться списком» */
.sh-row{display:flex;gap:10px;margin-bottom:14px}
.sh-row .field{flex:1;min-width:0;font-size:13px;color:var(--gray)}
.sh-ways{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sh-ways a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:9px 14px;
  border-radius:var(--r-pill);background:var(--page);transition:.18s}
.sh-ways a:hover{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--green-dark)}
.sh-ways svg{width:16px;height:16px}

/* ---------- адаптив ---------- */
@media(max-width:1080px){
  .fv-seen-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .cat-top h1{font-size:24px}
  .fv-bar .wrap{padding:12px 14px;gap:10px}
  .fv-sort{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,rgba(0,0,0,.15) 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 92%,rgba(0,0,0,.15) 100%)}
  .fv-sort::-webkit-scrollbar{display:none}
  .fv-chip{flex:0 0 auto}
  .fv-total{width:100%;justify-content:space-between;gap:10px}
  .fv-total .btn{flex:1;min-width:0;justify-content:center}
  .fv-how-grid{grid-template-columns:1fr}
  .fv-toast{left:12px;right:12px;bottom:14px;transform:translateY(20px);justify-content:space-between}
  .fv-toast.on{transform:translateY(0)}
  .sh-row{flex-wrap:wrap}
  .sh-row .btn{width:100%;justify-content:center}
}
@media(max-width:520px){
  .fv-seen-row{grid-template-columns:1fr}
  .fv-when{font-size:11.5px}
  .fv-when i{display:none}
  .fv-acts{gap:8px}
  .fv-acts .btn{flex:1;justify-content:center}
}
@media(max-width:370px){
  .cat-top h1{font-size:21px}
  .fv-note-btn{font-size:12px}
}
/* объёмные иконки */
/* Иконка – один <use> на общий спрайт в начале <body>; размеры бьются с
   правилами вроде «.ho-card h3 svg{width:19px}», поэтому здесь !important:
   это намеренный слой поверх постраничных размеров, а не случайная правка. */
svg.i3{width:22px!important;height:22px!important;color:inherit}
.ic.ic3{background:none!important;border-radius:0!important}
.ic.ic3 svg.i3{width:100%!important;height:100%!important;min-width:18px;min-height:18px}
.sub-bonus svg.i3{width:17px!important;height:17px!important}
.th-ok svg.i3{width:34px!important;height:34px!important}
.seg svg.i3,.pd-dl svg.i3{width:20px!important;height:20px!important}

.di.di3{background:none!important;box-shadow:none!important;width:38px!important;height:38px!important;justify-self:start}
.di.di3 svg.i3{width:38px!important;height:38px!important}

/* кнопка подписки стала ссылкой в группу ВКонтакте – у <a> свои дефолты */
.sub .btn-slide{text-decoration:none;color:inherit}

.ab-row{display:flex;gap:28px;align-items:center}
.ab-txt{flex:1 1 auto;min-width:0}
.ab-ill{flex:0 0 auto;width:190px;display:block}
@media(max-width:900px){.ab-ill{display:none}}