/*
 * TTF Nav: the product filters (ttf-nav/filters.php; design docs/design/filters.md).
 *
 * The panel in the theme's filter column (.filtered-sidebar): a quiet list in the hub's colours, one group per filter,
 * tick boxes with counts; on a desktop the column sticks and scrolls inside itself when taller than the window; below
 * 1024 px the column is the theme's off-canvas drawer (its own script slides it in), made full width on phones, with
 * our head and a footer pinned at the bottom ("Clear all", "Show N results"). Then the applied filters above the
 * products. Loaded only where the panel replaces Filter Everything's widget (body class ttf-f-on). Class prefix ttf-f.
 */

.ttf-f {
    --ttf-f-ink: var(--color-text-primary, #212529);
    --ttf-f-muted: var(--color-text-description, #868E96);
    --ttf-f-line: var(--color-info-dark, #DEE2E6);
    --ttf-f-soft: var(--color-info-light, #F1F3F5);
    --ttf-f-red: var(--color-primary, #EF233C);
    color: var(--ttf-f-ink);
    font-size: .875rem;
    line-height: 1.35;
}

/* The theme's drawer head ("Filter Products" and its X) gives way to the panel's own. */
.ttf-f-on .filtered-sidebar .sidebar-mobile-header { display: none; }

/* Head: "Filters 2" and "Clear all"; the X closes the drawer on phones only. */
.ttf-f__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 0 .7rem;
    border-bottom: 1px solid var(--ttf-f-line);
}
.ttf-f .ttf-f__title {
    --ttf-h2: 1.0625rem; /* ttf-page-zoom.php sizes every h2 through this property */
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ttf-f-ink);
}
.ttf-f__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--ttf-f-red);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ttf-f__clear,
.ttf-fc__clear {
    margin-left: auto;
    color: var(--ttf-f-red);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.ttf-f__clear:hover,
.ttf-fc__clear:hover { text-decoration: underline; }
.ttf-f__x { display: none; }

/* "Your car": the car the list fits, or a way to choose one. The icon, then the kicker, the name and the action. */
.ttf-f__car {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .65rem;
    align-items: center;
    margin: .85rem 0 .35rem;
    padding: .65rem .75rem;
    border: 1px solid var(--ttf-f-line);
    border-radius: var(--theme-theme-radius-small, 8px);
    background: #fff;
}
.ttf-f__car.is-on { border-color: color-mix(in srgb, var(--ttf-f-red) 35%, #fff); background: color-mix(in srgb, var(--ttf-f-red) 4%, #fff); }
.ttf-f__car-i { grid-row: 1 / span 3; align-self: start; margin-top: .1rem; color: var(--ttf-f-muted); }
.ttf-f__car.is-on .ttf-f__car-i { color: var(--ttf-f-red); }
.ttf-f__car-k { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ttf-f-muted); }
.ttf-f__car-n { font-size: .875rem; font-weight: 700; line-height: 1.3; }
.ttf-f .ttf-f__car-a {
    justify-self: start;
    height: auto;
    margin: .2rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ttf-f-red);
    font: 600 .8125rem/1.3 var(--theme-primary-font, "Krub", sans-serif);
    text-decoration: none;
    cursor: pointer;
}
.ttf-f .ttf-f__car-a:hover { background: none; text-decoration: underline; }

/* A group: the header row (name, the ticked values while closed, the chevron), then its values. */
.ttf-f__g { border-bottom: 1px solid var(--ttf-f-line); }
.ttf-f__gh {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 0;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.ttf-f__gh::-webkit-details-marker { display: none; }
.ttf-f__gh::after {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    margin: 0 .2rem 0 auto;
    border-right: 2px solid var(--ttf-f-muted);
    border-bottom: 2px solid var(--ttf-f-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}
.ttf-f__g[open] > .ttf-f__gh::after { transform: translateY(1px) rotate(-135deg); }
.ttf-f__gt { font-size: .9375rem; font-weight: 700; }
.ttf-f__g.is-on .ttf-f__gt::after {
    content: "";
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-left: .4rem;
    border-radius: 50%;
    background: var(--ttf-f-red);
    vertical-align: middle;
}
.ttf-f__gs {
    min-width: 0;
    overflow: hidden;
    color: var(--ttf-f-muted);
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ttf-f__g[open] .ttf-f__gs { display: none; }
.ttf-f__gh:hover .ttf-f__gt { color: var(--ttf-f-red); }
.ttf-f__gh:focus-visible { outline: 2px solid var(--ttf-f-red); outline-offset: 2px; border-radius: 4px; }
.ttf-f__gb { padding: 0 0 .85rem; }

/* The values: a tick box, the name, the count. */
.ttf-f__opts { margin: 0; padding: 0; list-style: none; }
.ttf-f__opts > li { margin: 0; padding: 0; }
.ttf-f__opts > li.x { display: none; }
.ttf-f__opts.is-all > li.x,
.ttf-f__opts.is-q > li.x { display: block; }
.ttf-f__opts > li[hidden] { display: none !important; }
.ttf-f__opts > li[data-d="1"] { padding-left: 1.6rem; }
.ttf-f__opts > li[data-d="2"] { padding-left: 3.2rem; }
.ttf-f__opts label {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .32rem 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ttf-f-ink);
    cursor: pointer;
}
.ttf-f__opts input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    border: 1.5px solid #ADB5BD;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.ttf-f__opts input[type="checkbox"]::before {
    content: "";
    width: .65rem;
    height: .65rem;
    background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform .12s ease;
}
.ttf-f__opts input[type="checkbox"]:checked { border-color: var(--ttf-f-red); background: var(--ttf-f-red); }
.ttf-f__opts input[type="checkbox"]:checked::before { transform: scale(1); }
.ttf-f__opts input[type="checkbox"]:focus-visible { outline: 2px solid var(--ttf-f-red); outline-offset: 2px; }
.ttf-f__opts label:hover input[type="checkbox"]:not(:checked) { border-color: var(--ttf-f-ink); }
.ttf-f__on { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ttf-f__opts input:checked ~ .ttf-f__on { font-weight: 600; }
.ttf-f__n {
    flex: none;
    color: var(--ttf-f-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

/* "Show all N" / "Show fewer". */
.ttf-f .ttf-f__all {
    display: inline-flex;
    height: auto;
    margin: .35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ttf-f-red);
    font: 600 .8125rem/1.4 var(--theme-primary-font, "Krub", sans-serif);
    cursor: pointer;
}
.ttf-f .ttf-f__all:hover { background: none; text-decoration: underline; }
.ttf-f__opts.is-q + .ttf-f__all { display: none; }

/* The search box above long lists. */
.ttf-f__q { margin: 0 0 .5rem; }
.ttf-f .ttf-f__q input {
    width: 100%;
    height: 2.25rem;
    margin: 0;
    padding: 0 .75rem 0 2rem;
    border: 1px solid var(--ttf-f-line);
    border-radius: var(--theme-theme-radius-small, 8px);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23868E96' d='M10 4a6 6 0 1 0 3.7 10.7l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E") no-repeat .6rem 50%;
    font-size: .875rem;
    box-shadow: none;
}
.ttf-f .ttf-f__q input:focus { border-color: var(--ttf-f-ink); outline: 0; }

/* The price: two boxes and "Go". */
.ttf-f__price { display: flex; align-items: flex-end; gap: .45rem; margin: 0; }
.ttf-f__price label { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-width: 0; margin: 0; }
.ttf-f__price label > span { color: var(--ttf-f-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ttf-f .ttf-f__price input {
    width: 100%;
    height: 2.25rem;
    margin: 0;
    padding: 0 .6rem;
    border: 1px solid var(--ttf-f-line);
    border-radius: var(--theme-theme-radius-small, 8px);
    background: #fff;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    -moz-appearance: textfield;
}
.ttf-f .ttf-f__price input::-webkit-outer-spin-button,
.ttf-f .ttf-f__price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ttf-f .ttf-f__price input:focus { border-color: var(--ttf-f-ink); outline: 0; }
.ttf-f__dash { padding-bottom: .5rem; color: var(--ttf-f-muted); }
.ttf-f .ttf-f__go {
    flex: none;
    height: 2.25rem;
    padding: 0 .9rem;
    border: 0;
    border-radius: var(--theme-theme-radius-small, 8px);
    background: var(--ttf-f-ink);
    color: #fff;
    font: 600 .8125rem/1 var(--theme-primary-font, "Krub", sans-serif);
    cursor: pointer;
}
.ttf-f .ttf-f__go:hover { background: var(--ttf-f-red); }

.ttf-f__none { margin: .85rem 0 0; color: var(--ttf-f-muted); }
.ttf-f__foot { display: none; }
.ttf-f__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Desktop: the column scrolls with the page; it sticks (filters.js adds ttf-f-stick) only while the whole panel fits
   the window, so no group is ever out of reach below a stuck column (ttf-filter-sticky-fix.php made it always stick). */
@media (min-width: 1024px) {
    .ttf-f-on .row > .col.secondary-column.filtered-sidebar.sticky { position: static; }
    .ttf-f-on .row > .col.secondary-column.filtered-sidebar.sticky.ttf-f-stick { position: -webkit-sticky; position: sticky; top: 30px; }
}

/* Below 1024 px: the theme's drawer, full width on phones, the panel's head on top and its footer pinned below. */
@media (max-width: 1023.98px) {
    .ttf-f-on .filtered-sidebar { width: 100% !important; max-width: 420px; padding: 0 !important; }
    .ttf-f-on .filtered-sidebar .site-scroll { padding: 0 !important; }
    .ttf-f-on .filtered-sidebar .sidebar-inner { padding: 0 !important; }
    .ttf-f { display: flex; flex-direction: column; min-height: 100%; font-size: .9375rem; }
    .ttf-f__head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: .9rem 1rem .8rem;
        background: #fff;
    }
    .ttf-f .ttf-f__x {
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        margin: -.4rem -.5rem -.4rem .25rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--ttf-f-soft);
        color: var(--ttf-f-ink);
        cursor: pointer;
    }
    .ttf-f__head .ttf-f__clear { margin-left: auto; }
    .ttf-f__head .ttf-f__clear + .ttf-f__x { margin-left: .25rem; }
    .ttf-f__title + .ttf-f__x { margin-left: auto; }
    .ttf-f__car { margin: .85rem 1rem .35rem; }
    .ttf-f__groups, .ttf-f__none { padding: 0 1rem; }
    .ttf-f__gh { min-height: 3.25rem; padding: .55rem 0; }
    .ttf-f__opts label { min-height: 2.75rem; padding: .2rem 0; font-size: .9375rem; }
    .ttf-f__opts input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
    .ttf-f__n { font-size: .8125rem; }
    .ttf-f .ttf-f__q input, .ttf-f .ttf-f__price input, .ttf-f .ttf-f__go { height: 2.75rem; font-size: 1rem; }
    .ttf-f__foot {
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: .75rem;
        margin-top: auto;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ttf-f-line);
        background: #fff;
        box-shadow: 0 -6px 16px rgba(33, 37, 41, .06);
    }
    .ttf-f__foot-clear { color: var(--ttf-f-ink); font-weight: 600; text-decoration: underline; white-space: nowrap; }
    .ttf-f .ttf-f__show {
        flex: 1;
        height: 3rem;
        margin: 0;
        padding: 0 1rem;
        border: 0;
        border-radius: var(--theme-theme-radius-small, 8px);
        background: var(--ttf-f-ink);
        color: #fff;
        font: 700 1rem/1 var(--theme-primary-font, "Krub", sans-serif);
        cursor: pointer;
    }
    .ttf-f .ttf-f__show.is-dirty { background: var(--ttf-f-red); }
}

/* The applied filters above the products. */
.ttf-fc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.1rem;
}
.ttf-fc__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 2rem;
    margin: 0;
    padding: 0 .65rem 0 .8rem;
    border: 1px solid var(--color-info-dark, #DEE2E6);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text-primary, #212529);
    font: 500 .8125rem/1 var(--theme-primary-font, "Krub", sans-serif);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.ttf-fc__chip:hover,
.ttf-fc__chip:focus-visible { border-color: var(--color-primary, #EF233C); color: var(--color-primary, #EF233C); background: #fff; }
.ttf-fc__k { color: var(--color-text-description, #868E96); }
.ttf-fc__v { font-weight: 700; }
.ttf-fc__chip svg { flex: none; margin-left: .1rem; opacity: .7; }
.ttf-fc__clear { margin-left: .25rem; }
@media (max-width: 767.98px) {
    /* Phones: one row that scrolls sideways, the last chip cut at the edge so the scroll shows. */
    .ttf-fc {
        flex-wrap: nowrap;
        margin: 0 -16px 1rem;
        padding: 0 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    }
    .ttf-fc::-webkit-scrollbar { display: none; }
    .ttf-fc__clear { padding-right: 28px; }
}

/* The theme's "Filter" buttons carry the number applied. */
.ttf-f-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--color-primary, #EF233C);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* A tick is taken: the grid dims and a thin bar runs along the top until the new list arrives. */
.ttf-f-busy .products { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
.ttf-f-busy body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary, #EF233C), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: ttf-f-bar 1s linear infinite;
}
@keyframes ttf-f-bar {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ttf-f-busy body::before { animation: none; background: var(--color-primary, #EF233C); }
    .ttf-f__gh::after, .ttf-f__opts input[type="checkbox"], .ttf-f__opts input[type="checkbox"]::before { transition: none; }
}