/* ==========================================================================
   DELUXE 2026 — категория с фильтрами по свойствам (deluxe27).
   Собрано из assets/css/facets.css прототипа deluxe26 (application/scripts/build_facets2026_css.py);
   селекторы ограничены .dlx. Подключается после home2026.css только на страницах
   категорий с фильтрами. Разметка — views/index/home2026/category-facets.php.
   ========================================================================== */

/* Глобальные правила style.css магазина: fieldset { height: 1px }, label { float: left; width: 140px;
   text-align: right } — ломают колонку фильтров. Сброс слабее классов прототипа (.dlx .cf__opt и т. п.) */
.dlx .cf fieldset { height: auto; }
.dlx .cf label { float: none; width: auto; text-align: left; }
/* Теги категории под листингом — ссылки на /tag/… (в прототипе их нет: там теги заменены фильтрами) */
.dlx .cfx__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.dlx .csub--soon .csub__img { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); border-radius: 16px; color: var(--muted); }
.dlx .csub--soon .csub__img .i { width: 28px; height: 28px; }
.dlx .csub--soon .csub__name { color: var(--muted); }
.dlx .csub--soon .csub__name small { color: var(--red); text-transform: lowercase; }
@media (min-width: 960px) {
.dlx .csub--soon .csub__img { border-radius: 24px; }
.dlx .csub--soon .csub__img .i { width: 34px; height: 34px; }
}
.dlx .cbrew {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}
.dlx .cbrew__q { font-family: var(--ff-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.dlx .cbrew__d { margin-top: 4px; font-size: 14px; color: var(--muted); }
.dlx .cbrew__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.dlx .cbrew__opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 16px 10px 10px;
    border-radius: var(--r);
    background: var(--cream);
    transition: background-color .2s, box-shadow .2s;
}
.dlx .cbrew__icon {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
}
.dlx .cbrew__name { min-width: 0; font-weight: 800; font-size: 15px; line-height: 1.2; }
.dlx .cbrew__name small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.dlx .cbrew__opt:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.dlx .cbrew__opt--soon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.dlx .cbrew__opt--soon .cbrew__icon { background: var(--cream); color: var(--muted); }
.dlx .cbrew__opt--soon .cbrew__name { color: var(--muted); }
.dlx .cbrew__opt--soon .cbrew__name small { color: var(--red); }
@media (max-width: 699.98px) {
.dlx .cbrew__opts {
        display: flex;
        margin: 0 calc(var(--gutter) * -1);
        padding: 0 var(--gutter) 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
.dlx .cbrew__opts::-webkit-scrollbar { display: none; }
.dlx .cbrew__opt { flex: none; width: auto; min-width: 148px; max-width: 200px; min-height: 54px; gap: 10px; padding: 8px 14px 8px 8px; scroll-snap-align: start; }
.dlx .cbrew__icon { width: 38px; height: 38px; border-radius: 10px; }
.dlx .cbrew__icon .i { width: 22px; height: 22px; }
.dlx .cbrew__name { font-size: 14px; }
.dlx .cbrew__name small { font-size: 12px; }
.dlx .cbrew__q { font-size: 17px; }
}
@media (min-width: 960px) {
.dlx .cbrew {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
        align-items: center;
        gap: 24px;
        margin-top: 28px;
        padding: 18px 18px 18px 26px;
        border-radius: var(--r-lg);
        box-shadow: inset 0 0 0 1px var(--line);
    }
.dlx .cbrew__q { font-size: 20px; }
}
.dlx .cfx { margin-top: 18px; scroll-margin-top: calc(var(--hdr-h) + 8px); }
.dlx .cfx__main { min-width: 0; }
@media (min-width: 960px) {
.dlx .cfx {
        display: grid;
        grid-template-columns: 252px minmax(0, 1fr);
        gap: 32px;
        align-items: start;
        margin-top: 32px;
    }
}
@media (min-width: 1200px) {
/* Фильтр уже (272→236 px), листинг с фильтрами — 4 колонки вместо 5: карточка 165→223 px, фото крупнее (владелец 31.10.2026).
   Подборки главной и обычные категории (.pgrid без .cfx__main) остаются на 5 колонках */
.dlx .cfx { grid-template-columns: 236px minmax(0, 1fr); gap: 32px; }
.dlx .cfx__main .pgrid--listing { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dlx .cf__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlx .cf__title { display: flex; align-items: center; gap: 8px; font-family: var(--ff-display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.dlx .cf__close {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-right: -10px;
    border-radius: 50%;
    color: var(--ink);
}
.dlx .cf__close:hover { background: var(--photo-bg); }
.dlx .cf__group { min-width: 0; margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); }
.dlx .cf__legend { float: left; width: 100%; padding: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.dlx .cf__group > :not(legend) { clear: both; }
.dlx .cf__hint { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dlx .cf__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dlx .cf__opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--line-2);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s, opacity .2s;
}
.dlx .cf__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dlx .cf__box { display: none; }
.dlx .cf__n { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.dlx .cf__opt:hover { border-color: var(--ink); }
.dlx .cf__opt:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.dlx .cf__opt:has(input:checked) .cf__n { color: rgba(255, 255, 255, .6); }
.dlx .cf__opt:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.dlx .cf__opt.is-zero { opacity: .42; cursor: default; }
.dlx .cf__opt.is-zero:hover { border-color: var(--line-2); }
.dlx .cf__opt.is-zero input { cursor: default; }
.dlx .cf__opt.is-extra { display: none; }
.dlx .cf__group.is-expanded .cf__opt.is-extra { display: inline-flex; }
.dlx .cf__expand {
    margin-top: 10px;
    font-size: 13.5px; font-weight: 800;
    color: var(--ink);
    border-bottom: 1.5px solid var(--red);
}
.dlx .cf__more { border-bottom: 1px solid var(--line); }
.dlx .cf__more > summary {
    display: flex; align-items: center; gap: 8px;
    min-height: 56px;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.dlx .cf__more > summary::-webkit-details-marker { display: none; }
.dlx .cf__more > summary small {
    display: grid; place-items: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: var(--red); color: #fff; font-size: 12px;
}
.dlx .cf__more > summary .i { margin-left: auto; transition: transform .2s; }
.dlx .cf__more[open] > summary .i { transform: rotate(180deg); }
.dlx .cf__more > .cf__group:last-child { border-bottom: 0; }
.dlx .cf__wait {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--r-sm);
    border: 1.5px dashed var(--line-2);
    font-size: 12.5px; line-height: 1.5;
    color: var(--muted);
}
.dlx .cf__wait-t { font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.dlx .cf__wait ul { display: grid; gap: 4px; margin: 8px 0; }
.dlx .cf__wait b { color: var(--ink); }
.dlx .cf__foot { display: flex; gap: 8px; }
.dlx .cf__foot .btn { flex: 1; }
.dlx .cf__foot b { font-weight: 800; }
@media (max-width: 959.98px) {
.dlx .cf {
        position: fixed;
        inset: 0;
        z-index: 130;
        display: flex;
        flex-direction: column;
        background: #fff;
        visibility: hidden;
        transform: translateY(100%);
        transition: transform .35s var(--ease-out), visibility 0s linear .35s;
    }
.dlx .cf.is-open { visibility: visible; transform: none; transition: transform .35s var(--ease-out); }
.dlx .cf__head {
        flex: none;
        padding: calc(10px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 10px max(var(--gutter), env(safe-area-inset-left, 0px));
        border-bottom: 1px solid var(--line);
    }
.dlx .cf__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 24px max(var(--gutter), env(safe-area-inset-left, 0px));
    }
.dlx .cf__foot {
        flex: none;
        padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 24px -18px rgba(31, 29, 30, .4);
    }
.dlx .cf__foot .btn { --btn-h: 50px; font-size: 15px; }
.dlx .no-js .cf { position: static; visibility: visible; transform: none; margin-bottom: 18px; }
.dlx .no-js .cfx__open, .dlx .no-js .cf__close { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.dlx .cf, .dlx .cf.is-open { transition: none; }
}
@media (min-width: 960px) {
.dlx .cf {
        position: sticky;
        top: 116px;
        max-height: calc(100vh - var(--hdr-h) - 32px);
        overflow-y: auto;
        
        overflow-x: hidden;
        margin-left: -8px;
        padding: 0 6px 0 8px;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--line-2) transparent;
    }
.dlx .cf__head { padding-bottom: 4px; }
.dlx .cf__close { display: none; }
.dlx .cf__opts { display: grid; gap: 2px; margin-top: 10px; }
.dlx .cf__opt {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 36px;
        padding: 0 8px;
        margin: 0 -8px;
        border: 0;
        border-radius: var(--r-xs);
        background: none;
        font-weight: 600;
    }
.dlx .cf__group.is-expanded .cf__opt.is-extra { display: grid; }
.dlx .cf__opt:hover { background: var(--photo-bg); }
.dlx .cf__opt:has(input:checked) { background: none; color: var(--ink); font-weight: 800; }
.dlx .cf__opt:has(input:checked) .cf__n { color: var(--muted-2); }
.dlx .cf__opt.is-zero:hover { background: none; }
.dlx .cf__box {
        display: grid; place-items: center;
        width: 20px; height: 20px;
        border-radius: 6px;
        border: 1.5px solid var(--line-2);
        background: #fff;
        color: transparent;
        transition: background-color .15s, border-color .15s;
    }
.dlx .cf__opt:hover .cf__box { border-color: var(--ink); }
.dlx .cf__opt:has(input:checked) .cf__box { background: var(--ink); border-color: var(--ink); color: #fff; }
.dlx .cf__foot { position: sticky; bottom: 0; padding: 14px 0 4px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }
.js .dlx .cf__foot [data-cf-apply] { display: none; }
}
.dlx .cfx__bar { display: flex; align-items: center; gap: 10px; }
.dlx .cfx__open { flex: none; gap: 8px; }
.dlx .cfx__badge {
    display: grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800;
}
.dlx .cfx__bar .cbar__count { margin-right: auto; }
@media (max-width: 479px) {
.dlx .cfx__bar .cbar__count { display: none; }
.dlx .cfx__bar .select--sort { margin-left: auto; }
}
@media (min-width: 960px) {
.dlx .cfx__open { display: none; }
}
.dlx .cfx__quick {
    display: flex;
    gap: 8px;
    margin: 12px calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter) 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dlx .cfx__quick::-webkit-scrollbar { display: none; }
.dlx .cfx__quick .chip { flex: none; min-height: 38px; font-size: 13.5px; }
@media (min-width: 960px) {
.dlx .cfx__quick { display: none; }
}
.dlx .cfx__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dlx .cfx__active > span[data-cf-active-list] { display: contents; }
.dlx .cfx__active-l { font-size: 13px; font-weight: 700; color: var(--muted); }
.dlx .cfx__active .chip { min-height: 34px; padding: 0 12px; font-size: 13px; }
.dlx .cfx__active .chip .chip__x .i { margin: 0; color: #fff; }
.dlx .cfx__active .chip:hover .chip__x { background: var(--red); }
.dlx .cfx__reset { font-size: 13px; font-weight: 800; color: var(--ink); border-bottom: 1.5px solid var(--red); }
.dlx .cfx__main .pgrid--listing { margin-top: 18px; }
.dlx .cfx__empty {
    display: grid; justify-items: center; gap: 8px;
    margin-top: 24px; padding: 40px 20px;
    border-radius: var(--r);
    background: var(--cream);
    text-align: center; font-size: 14px; color: var(--muted);
}
.dlx .cfx__empty-t { font-family: var(--ff-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.dlx .cfx__empty .btn { margin-top: 8px; }
.dlx .cfx__empty[hidden], .dlx .cfx__active[hidden] { display: none; }
.dlx .pcard__labels {
    margin-top: 6px;
    font-size: 12.5px; font-weight: 700; line-height: 1.4;
    color: var(--muted);
}
.dlx .pcard__labels span { white-space: nowrap; }
@media (max-width: 699.98px) {
.dlx .pcard__labels { font-size: 11.5px; }
/* .cfx .pcard__short на телефоне больше не прячем — краткое описание нужно и здесь (владелец 31.10.2026) */
}
.dlx .cplan { margin-top: 24px; }
.dlx .cplan__card {
    display: grid; justify-items: start; gap: 12px;
    max-width: 760px;
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--r-lg);
    border: 1.5px dashed var(--line-2);
}
.dlx .cplan__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--cream); }
.dlx .cplan__title { font-family: var(--ff-display); font-size: clamp(20px, 1rem + 1vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.dlx .cplan__text { max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.dlx .cplan__sub { margin-top: 8px; font-size: 15px; font-weight: 800; }
.dlx .cplan__list { display: grid; gap: 14px; width: 100%; margin: 0 0 8px; }
.dlx .cplan__list dt { font-size: 13px; font-weight: 800; color: var(--muted); }
.dlx .cplan__list dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.dlx .chip--ghost { min-height: 32px; padding: 0 12px; font-size: 13px; color: var(--muted); border-style: dashed; cursor: default; }
.dlx .chip--ghost:hover { border-color: var(--line-2); }
.dlx .csubs__clusters {
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}
.dlx .csubs__clusters::-webkit-scrollbar { display: none; }
.dlx .csubs__cluster {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px 4px;
    border-radius: var(--r-lg);
    border: 1.5px solid var(--line);
    scroll-snap-align: start;
}
.dlx .csubs__cluster--all { justify-content: flex-end; border-style: dashed; }
.dlx .csubs__cap {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}
.dlx .csubs__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink); 
}
.dlx .csubs__row { display: flex; gap: 2px; }
.dlx .csubs__row > li { flex: none; }
@media (min-width: 960px) {
.dlx .csubs__clusters { flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; overflow: visible; }
.dlx .csubs__cluster { padding: 14px 8px 6px; gap: 6px; }
.dlx .csubs__cap { padding: 0 8px; font-size: 12px; }
.dlx .csubs--grouped .csub { width: 104px; padding: 8px 6px 12px; }
.dlx .csubs--grouped .csub__img { max-width: 84px; border-radius: 22px; }
}
.dlx .cf--none { display: none !important; }
@media (min-width: 960px) {
.dlx .cfx--nopanel { grid-template-columns: minmax(0, 1fr); }
.dlx .cfx__quick--always { display: flex; flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}
@media (max-width: 359.98px) {
.dlx .cfx__bar { gap: 6px; }
.dlx .cfx__bar .select--sort select { padding: 0 30px 0 12px; font-size: 13.5px; }
.dlx .cfx__bar .select--sort .i { right: 10px; }
}