/* Catalog filters: «Filters» next to sorting, a row of chosen filters (each removable), the «All filters»
   panel (right drawer; bottom sheet on phones). Unchosen filters live only in the panel. */
.cfb, .cfb-panel, .cfb-empty, .cfb-open, .cfb-applied, .cfb-meta {
    --cfb-ease: cubic-bezier(.22, 1, .36, 1);
    --cfb-ease-in: cubic-bezier(.4, 0, 1, 1);
    /* Drawer: a gentle start (the old curve covered half the way in 50 ms). */
    --cfb-ease-panel: cubic-bezier(.2, 0, 0, 1);
    /* Sheet: moves from the first frame (67 of 743 px, then 77, 91; peak 115 per frame), then the same
       calm landing. The drawer curve starts at zero speed (11 px, then 47), which on a phone read as a
       hitch right after the tap. */
    --cfb-ease-sheet: cubic-bezier(.32, .72, 0, 1);
    --cfb-ease-panel-out: cubic-bezier(.3, 0, .8, .15);
    --cfb-text: #1e293b;
    --cfb-muted: #64748b;
    --cfb-soft: #94a3b8;
    --cfb-card: #fff;
    --cfb-field: #f4f6f9;
    --cfb-line: #eef1f5;
    --cfb-hover: #f6f8fa;
    --cfb-on: #eafcdd;
    --cfb-on-ring: #bff08a;
    --cfb-on-text: #1f2937;
    --cfb-green: #16863c;
    --cfb-accent: #8cff3f;
    --cfb-accent-ink: #0c1c03;
    --cfb-shadow: 0 0 14px rgba(15, 23, 42, .08);
}

/* A re-rendered control takes its previous state without transitions, then moves on (replayAnim). */
.cfb-snap, .cfb-snap * { transition: none !important; }

/* The chosen-filters row must not widen the catalog column (it scrolls sideways on phones). */
.catalog-layout > .catalog-main { min-width: 0; }
/* Phones only: the sticky bar with the sort and «Filters» (wider screens keep them in the title row). */
.cfb { display: none; }
.cfb-sentinel { height: 0; }

.cfb-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.cfb-flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(15, 23, 42, .1); }
.cfb-flag--pill { width: 16px; height: 12px; border-radius: 2px; }
.cfb-vi { width: 16px; height: 16px; flex: 0 0 auto; color: #16a34a; }
.cfb-vi--pill { width: 13px; height: 13px; }

/* ---------- «Filters» button: same pill as the sort field, green with a count once something is chosen ---------- */
.cfb-open {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    background: var(--cfb-card);
    box-shadow: var(--cfb-shadow);
    color: var(--cfb-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s var(--cfb-ease);
}
.cfb-open:hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(15, 23, 42, .1); }
.cfb-open:active { transform: scale(.98); }
.cfb-open:focus-visible { outline: 2px solid var(--cfb-on-ring); outline-offset: 2px; }
.cfb-open .cfb-ic { color: var(--cfb-green); }
.cfb-open.is-on { background: var(--cfb-on); color: var(--cfb-on-text); box-shadow: inset 0 0 0 1px var(--cfb-on-ring); }
/* One width with and without the count: the empty button carries the badge's room (20 px + 8 px gap)
   as padding, half on each side, so choosing a filter never re-wraps the title row (+28 px moved the
   tools under a long title, «Account Marketplace & Digital Products Catalog» at 1366–1920 px). */
.cfb-open:not(.is-on) { padding-inline: calc(16px + 14px); }
/* A long title gives way to the tools instead of pushing them under it: it takes the rest of the row and
   wraps into balanced lines (the English «All» title fitted with 2 px to spare). The tools have one width
   in every state, so where they stand depends only on the screen; they wrap below ~1100 px. */
@media (min-width: 769px) {
    .catalog-title-row:has(> .catalog-head-tools--filters) > .catalog-title { flex: 1 1 26rem; min-width: 0; text-wrap: balance; }
    .catalog-title-row:has(> .catalog-head-tools--filters) .catalog-title__bar { align-self: stretch; height: auto; min-height: 30px; }
}
.cfb-open.is-on:hover { box-shadow: inset 0 0 0 1px var(--cfb-on-ring), 0 4px 12px rgba(22, 163, 74, .12); }

.cfb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    background: var(--cfb-accent);
    color: var(--cfb-accent-ink);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cfb-badge.is-new { animation: cfb-pill-in .32s var(--cfb-ease) both; }
.cfb-badge.is-swap { animation: cfb-num-in .26s ease both; }
.cfb-badge[hidden] { display: none; }

/* ---------- chosen filters: one removable chip per value, «Reset all» at the end ---------- */
.cfb-applied { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.cfb-applied[hidden] { display: none; }
/* Filtered pages reserve the row until the script fills it, so the cards do not move. */
.cfb-applied[data-reserve] { min-height: 36px; }
.cfb-ach {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--cfb-on);
    box-shadow: inset 0 0 0 1px var(--cfb-on-ring);
    color: var(--cfb-on-text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow .18s ease, background-color .18s ease;
}
.cfb-ach__k { color: var(--cfb-muted); font-weight: 600; }
.cfb-ach__x { width: 15px; height: 15px; margin-left: 2px; color: var(--cfb-green); transition: transform .2s var(--cfb-ease); }
.cfb-ach:hover { box-shadow: inset 0 0 0 1px #8fd85a, 0 4px 10px rgba(22, 163, 74, .1); }
.cfb-ach:hover .cfb-ach__x { transform: rotate(90deg); }
.cfb-ach:focus-visible { outline: 2px solid var(--cfb-on-ring); outline-offset: 2px; }
/* A chip that goes folds its width away, a new one unfolds (script); the text is clipped meanwhile. */
.cfb-ach.is-leaving, .cfb-ach.is-entering, .cfb-reset.is-leaving, .cfb-reset.is-entering { overflow: hidden; }
.cfb-ach.is-leaving, .cfb-reset.is-leaving { pointer-events: none; }
.cfb-reset {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--cfb-green);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}
.cfb-reset:hover { background: #f0fbe8; }
.cfb-reset:focus-visible { outline: 2px solid var(--cfb-on-ring); outline-offset: 2px; }
.cfb-notice { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #fff1f2; color: #b91c1c; font-size: 13px; font-weight: 600; animation: cfb-fade-in .24s var(--cfb-ease) both; }

/* ---------- controls inside the panel ---------- */
.cfb-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 5px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    transition: background-color .18s ease, border-color .18s ease, transform .18s var(--cfb-ease);
}
.cfb-box__ic { width: 13px; height: 13px; color: var(--cfb-accent-ink); stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .26s var(--cfb-ease) .04s; }
.cfb-box.is-on, .cfb-opt.is-on .cfb-box { background: var(--cfb-accent); border-color: var(--cfb-accent); }
.cfb-box.is-on .cfb-box__ic, .cfb-opt.is-on .cfb-box__ic { stroke-dashoffset: 0; }
.cfb-opt:active .cfb-box { transform: scale(.9); }

.cfb-search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 12px 0 4px; padding: 0 12px; border-radius: 10px; background: var(--cfb-field); color: var(--cfb-soft); transition: box-shadow .18s ease, background-color .18s ease; }
.cfb-search:focus-within { background: #fff; box-shadow: inset 0 0 0 1px #d6dee8; }
.cfb-search .cfb-ic { width: 16px; height: 16px; }
.cfb-search__input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--cfb-text); }

.cfb-opts { margin: 8px -10px 0; }
.cfb-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cfb-text);
    cursor: pointer;
    transition: background-color .16s ease;
}
.cfb-opt:hover { background: var(--cfb-hover); }
.cfb-opt.is-on .cfb-opt__name { font-weight: 600; }
.cfb-opt.is-on .cfb-opt__count { color: var(--cfb-green); }
.cfb-opt.is-off { opacity: .45; cursor: default; }
.cfb-opt.is-off:hover { background: transparent; }
.cfb-opt__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfb-opt__count { font-size: 12.5px; font-weight: 700; color: var(--cfb-soft); font-variant-numeric: tabular-nums; transition: color .18s ease; }
.cfb-opt input:focus-visible + .cfb-box { outline: 2px solid var(--cfb-on-ring); outline-offset: 2px; }
.cfb-opts__empty { margin: 0; padding: 10px; font-size: 13px; color: var(--cfb-soft); }
.cfb-sr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cfb-more-link { margin-top: 6px; padding: 6px 0; border: 0; background: none; color: var(--cfb-green); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

.cfb-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cfb-preset {
    height: 34px;
    padding: 0 13px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: var(--cfb-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--cfb-ease);
}
.cfb-preset:hover { border-color: #cbd5e1; }
.cfb-preset:active { transform: scale(.96); }
.cfb-preset.is-on { background: var(--cfb-on); border-color: var(--cfb-on-ring); color: #143a07; }

.cfb-range { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cfb-range__dash { color: var(--cfb-soft); }
.cfb-range__unit { font-size: 13px; font-weight: 600; color: var(--cfb-muted); white-space: nowrap; }
.cfb-rin { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--cfb-field); font-size: 13px; color: var(--cfb-soft); transition: box-shadow .18s ease, background-color .18s ease; }
.cfb-rin:focus-within { background: #fff; box-shadow: inset 0 0 0 1px #d6dee8; }
.cfb-rin input, .cfb-rin select { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--cfb-text); }
.cfb-rin input::-webkit-outer-spin-button, .cfb-rin input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfb-rin input[type=number] { -moz-appearance: textfield; }

.cfb-seg { position: relative; display: grid; grid-template-columns: repeat(var(--seg-n, 3), 1fr); margin-top: 10px; padding: 4px; border-radius: 12px; background: #f1f5f9; }
.cfb-seg__thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--seg-n, 3));
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
    transform: translateX(calc(var(--seg-i, 0) * 100%));
    transition: transform .34s var(--cfb-ease);
}
.cfb-seg__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; background: transparent; border-radius: 9px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cfb-muted); cursor: pointer; transition: color .2s ease; }
.cfb-seg__btn.is-on { color: var(--cfb-text); font-weight: 700; }
.cfb-seg__count { font-size: 12px; font-weight: 700; color: var(--cfb-soft); font-variant-numeric: tabular-nums; }

.cfb-switch-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--cfb-text); cursor: pointer; }
.cfb-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: #e2e8f0; transition: background-color .22s ease; }
.cfb-switch.is-on { background: #22c55e; }
.cfb-switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .2); transition: transform .3s var(--cfb-ease); }
.cfb-switch.is-on .cfb-switch__knob { transform: translateX(18px); }
.cfb-switch-row input:focus-visible + .cfb-switch { outline: 2px solid var(--cfb-on-ring); outline-offset: 2px; }

/* Panel footer: secondary «Reset» on the left, main «Show N products» on the right, one height. */
.cfb-cta {
    position: relative;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: var(--cfb-accent);
    color: var(--cfb-accent-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--cfb-ease), box-shadow .2s ease, opacity .2s ease, filter .2s ease;
}
.cfb-cta:hover { box-shadow: 0 8px 20px rgba(140, 255, 63, .35); transform: translateY(-1px); }
.cfb-cta:active { transform: scale(.98); }
.cfb-cta[disabled] { opacity: .55; cursor: default; box-shadow: none; transform: none; }
.cfb-cta:focus-visible, .cfb-btn2:focus-visible { outline: 2px solid var(--cfb-on-ring); outline-offset: 2px; }
/* While the count loads the label stays as it is (a spinner, then dimming, made the button blink);
   the new label then rolls in (products-filter.js rollText). */
.cfb-cta__label { display: block; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cfb-cta.is-loading { cursor: progress; }
/* Secondary «Reset»: the site's outline button (product page «В корзину»), same height as Show. */
.cfb-btn2 {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 18px;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    background: var(--cfb-card);
    color: #334155;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, opacity .18s ease, transform .2s var(--cfb-ease);
}
.cfb-btn2:hover:not([disabled]) { border-color: #cbd5e1; color: var(--cfb-text); }
.cfb-btn2:active:not([disabled]) { transform: scale(.98); }
.cfb-btn2[disabled] { opacity: .45; cursor: default; }

/* ---------- panel: right drawer / phone sheet ---------- */
/* clip, not hidden: a hidden overflow is still a scroll container, and showModal() focuses the close
   button while the box is still translated off screen, scrolling the dialog by exactly the offset that
   the entrance then removes — the drawer/sheet stood still instead of sliding in. */
.cfb-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; overflow: clip; color: var(--cfb-text); }
.cfb-panel::backdrop { background: rgba(15, 23, 42, .42); animation: cfb-fade-in .34s ease both; }
.cfb-panel.is-closing::backdrop { animation: cfb-fade-out .24s ease both; }
.cfb-panel__box { position: absolute; display: flex; flex-direction: column; background: var(--cfb-card); box-shadow: -18px 0 50px rgba(15, 23, 42, .18); }
.cfb-panel[data-mode="drawer"] .cfb-panel__box { top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; animation: cfb-drawer-in .44s var(--cfb-ease-panel) backwards; }
.cfb-panel[data-mode="drawer"].is-closing .cfb-panel__box { animation: cfb-drawer-out .24s var(--cfb-ease-panel-out) both; }
.cfb-panel[data-mode="sheet"] .cfb-panel__box { left: 0; right: 0; bottom: 0; max-height: 88dvh; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px rgba(15, 23, 42, .2); animation: cfb-sheet-in .46s var(--cfb-ease-sheet) backwards; transition: transform .3s var(--cfb-ease); }
.cfb-panel[data-mode="sheet"].is-closing .cfb-panel__box { animation: cfb-sheet-out .26s var(--cfb-ease-panel-out) both; }
/* Warm-up (catalog-filter-bar.js warmPanel): the closed dialog is laid out for one task, unseen and
   still, so the first opening does not pay for styles, text shaping and code run for the first time. */
.cfb-panel.is-warming { display: block; visibility: hidden; pointer-events: none; }
.cfb-panel.is-warming .cfb-panel__box { animation: none; transition: none; }
.cfb-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--cfb-line); touch-action: none; }
.cfb-panel__grip { display: none; }
.cfb-panel[data-mode="sheet"] .cfb-panel__head { position: relative; padding: 22px 18px 14px; }
.cfb-panel[data-mode="sheet"] .cfb-panel__grip { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: #d6dee8; }
.cfb-panel__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--cfb-text); }
.cfb-panel__sub { margin-top: 4px; font-size: 13px; color: var(--cfb-muted); }
.cfb-panel__x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 11px; background: var(--cfb-field); color: var(--cfb-text); cursor: pointer; transition: background-color .18s ease, transform .2s var(--cfb-ease); }
.cfb-panel__x:hover { background: #eaeef3; transform: rotate(90deg); }
.cfb-panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 12px; }
.cfb-panel[data-mode="sheet"] .cfb-panel__body { padding: 4px 18px 12px; }
.cfb-panel__foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--cfb-line); background: var(--cfb-card); }
.cfb-panel__foot .cfb-cta { flex: 1 1 auto; min-width: 0; }
.cfb-panel[data-mode="sheet"] .cfb-panel__foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
.cfb-sec { padding: 18px 0; border-bottom: 1px solid var(--cfb-line); }
.cfb-sec:last-child { border-bottom: 0; }
.cfb-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cfb-sec__title { font-size: 15px; font-weight: 800; color: var(--cfb-text); }
.cfb-sec__sum { font-size: 13px; font-weight: 600; color: var(--cfb-soft); text-align: right; transition: color .18s ease; }
.cfb-sec__sum.is-on { color: var(--cfb-green); font-weight: 700; }
.cfb-sec__hint { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--cfb-muted); }
.cfb-group { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; font-size: 12.5px; font-weight: 700; color: var(--cfb-muted); }
/* Phones: the page under the sheet does not scroll. Only body is locked: with the root left visible,
   its overflow goes to the viewport. Locking html as well made body a scroll container of its own, and
   the sticky header and filter bar jumped out of view behind the backdrop as the sheet opened (header
   0 -> -1414 px) and back after it closed. */
html.cfb-lock body { overflow: hidden; }

/* ---------- empty result ---------- */
.cfb-empty { display: flex; gap: 26px; align-items: flex-start; margin-top: 4px; padding: 34px 38px; border-radius: 18px; background: var(--cfb-card); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .05); animation: cfb-item-in .42s var(--cfb-ease) both; }
.cfb-empty[hidden] { display: none; }
.cfb-empty__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; background: var(--cfb-field); color: var(--cfb-soft); }
.cfb-empty__icon .cfb-ic { width: 28px; height: 28px; }
.cfb-empty__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--cfb-text); }
.cfb-empty__text { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--cfb-muted); }
.cfb-empty__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cfb-sugg { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: var(--cfb-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; animation: cfb-item-in .36s var(--cfb-ease) both; animation-delay: calc(var(--i, 0) * 50ms + .1s); transition: border-color .18s ease, transform .2s var(--cfb-ease), box-shadow .2s ease; }
.cfb-sugg:hover { border-color: var(--cfb-on-ring); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(22, 163, 74, .1); }
.cfb-sugg b { color: var(--cfb-green); }
.cfb-sugg__x { display: inline-flex; color: var(--cfb-soft); }
.cfb-sugg__x .cfb-ic { width: 14px; height: 14px; }
.cfb-sugg--reset { padding: 0 14px; border-color: transparent; background: var(--cfb-on); color: #143a07; }
.cfb-empty { transition: opacity .2s ease; }
.cfb-empty.is-loading { opacity: .55; pointer-events: none; }
.catalog-main.cfb-has-empty #productsEmptyState, .catalog-main.cfb-has-empty #productsLoading { display: none !important; }

/* ---------- results motion ----------
   While a filter loads, cards, pagination and «Load more» stay in place, dimmed only after 0.25 s (a quick
   answer, or one waiting for a chip to finish folding, does not blink). The answer is one commit, and the
   page moves once (products-filter.js noteResults / playResults): cards and the blocks around them (category
   list, pagination, SEO block, footer) slide from where they stood, new ones fade in, gone ones fade out as
   inert copies (.results-ghost). Transform and opacity only; no height or margin is animated. */
#resultsCount { font-variant-numeric: tabular-nums; }
/* The total keeps the room of the catalog's largest count (products.php --cfb-count-ch), so a new number
   never changes the width of the title-row tools; tabular digits are a little wider than 1ch. */
.catalog-head-tools--filters #resultsCount { min-width: calc(var(--cfb-count-ch, 3) * 1.15ch); }
.catalog-main #productsGrid.is-filtering,
.catalog-main #productsLoadMore.is-pending,
.catalog-main #catalogPagination.is-pending { opacity: .5; pointer-events: none; transition: opacity .22s ease .25s; }

/* ---------- phone: one block under the category list ----------
   The title row keeps only the title. placeMeta() moves the count into .cfb-meta and the sort with
   «Filters» into the sticky .cfb bar; chosen filters scroll sideways under it. */
.cfb-meta { display: none; }
@media (max-width: 768px) {
    .catalog-page .catalog-head-tools--filters { display: none; }
    .cfb-meta { display: flex; align-items: center; min-height: 22px; margin: 0 0 2px; }
    .cfb-meta .catalog-head-count { min-height: 0; font-size: 13.5px; }
    .cfb { position: sticky; top: var(--cfb-top, 0px); z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0 -12px 8px; padding: 8px 12px; background: transparent; transition: background-color .24s ease, box-shadow .24s ease; }
    .cfb.is-stuck { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 18px rgba(15, 23, 42, .08); }
    /* Sort and «Filters» share the line in two equal halves (flex-basis 0 would add each one's own
       padding on top of an equal share: 187 and 169 px). */
    .catalog-page .cfb .cat-field--select { display: flex; flex: 0 0 calc(50% - 5px); min-width: 0; height: 44px; padding: 0 34px 0 14px; border-radius: 11px; box-shadow: var(--cfb-shadow); }
    .cfb .cat-field__label { display: none; }
    .cfb .cat-field select { width: 100%; height: 42px; line-height: 42px; font-size: 14px; text-overflow: ellipsis; }
    .cfb .cat-field--select::after { right: 14px; width: 7px; height: 7px; }
    .cfb .cfb-open { flex: 0 0 calc(50% - 5px); min-width: 0; }
    .cfb-applied { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 12px; padding: 0 28px 0 12px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
    .cfb-applied::-webkit-scrollbar { display: none; }
    .cfb-empty { flex-direction: column; gap: 14px; padding: 22px 18px; }
}

/* ---------- dark theme ---------- */
[data-theme="dark"] .cfb, [data-theme="dark"] .cfb-panel, [data-theme="dark"] .cfb-empty, [data-theme="dark"] .cfb-open, [data-theme="dark"] .cfb-applied, [data-theme="dark"] .cfb-meta {
    --cfb-text: #f1f5f9;
    --cfb-muted: #94a3b8;
    --cfb-soft: #7c8ba1;
    --cfb-card: #1e293b;
    --cfb-field: #0f172a;
    --cfb-line: rgba(255, 255, 255, .08);
    --cfb-hover: #243044;
    --cfb-on: rgba(34, 197, 94, .18);
    --cfb-on-ring: rgba(134, 239, 172, .45);
    --cfb-on-text: #eafcdd;
    --cfb-green: #4ade80;
    --cfb-shadow: none;
}
[data-theme="dark"] .cfb-box, [data-theme="dark"] .cfb-preset, [data-theme="dark"] .cfb-sugg { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .cfb-search:focus-within, [data-theme="dark"] .cfb-rin:focus-within { background: #0f172a; box-shadow: inset 0 0 0 1px #334155; }
[data-theme="dark"] .cfb-seg { background: #0f172a; }
[data-theme="dark"] .cfb-seg__thumb { background: #334155; }
[data-theme="dark"] .cfb-switch { background: #334155; }
[data-theme="dark"] .cfb-group { background: #0f172a; }
[data-theme="dark"] .cfb-reset:hover { background: rgba(34, 197, 94, .14); }
[data-theme="dark"] .cfb-ach:hover { box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .7); }
[data-theme="dark"] .cfb-btn2 { background: transparent; border-color: rgba(255, 255, 255, .16); color: var(--cfb-text); }
[data-theme="dark"] .cfb-btn2:hover:not([disabled]) { border-color: rgba(255, 255, 255, .3); }
[data-theme="dark"] .cfb-panel__x:hover { background: #243044; }
[data-theme="dark"] .cfb.is-stuck { background: rgba(15, 23, 42, .92); }
[data-theme="dark"] .cfb-notice { background: rgba(239, 68, 68, .16); color: #fca5a5; }
[data-theme="dark"] .cfb-preset.is-on { background: var(--cfb-on); border-color: var(--cfb-on-ring); color: var(--cfb-on-text); }
[data-theme="dark"] .cfb-sugg.cfb-sugg--reset { background: var(--cfb-on); border-color: transparent; color: var(--cfb-on-text); }
/* The result count animates on every change; catalog.css has no dark colour for it. */
[data-theme="dark"] .catalog-head-count b { color: #f1f5f9; }
[data-theme="dark"] .catalog-page .cfb .cat-field--select { box-shadow: none; }

/* ---------- keyframes ---------- */
@keyframes cfb-item-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cfb-pill-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes cfb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfb-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cfb-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes cfb-drawer-out { to { transform: translateX(100%); } }
@keyframes cfb-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cfb-sheet-out { to { transform: translateY(100%); } }
@keyframes cfb-num-in { from { opacity: .25; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .cfb *, .cfb-panel, .cfb-panel *, .cfb-panel::backdrop, .cfb-empty, .cfb-empty *, .cfb-open, .cfb-open *, .cfb-applied *, .catalog-main #productsGrid {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}