/* ------------------------------------------------------------------
 * Webko catalog filter, sorting and result count
 *
 * Toolbar geometry follows the shop design: 301px triggers on a bottom
 * rule, a 153px sort control, both 48px tall. Both filter triggers open
 * a right-anchored drawer rather than an inline menu.
 * ---------------------------------------------------------------- */

.cf {
    --cf-ink: #212121;
    --cf-ink-soft: #121212;
    --cf-paper: #f6f2eb;
    --cf-sand: #eee7dc;
    --cf-rule: rgba(33, 33, 33, 0.1);
    --cf-trigger-width: 301px;
    --cf-drawer-width: 500px;
    --cf-sub-width: 450px;

    width: 100%;
}

/* Wrapper for drawers printed outside the toolbar: it exists only to carry the
   custom properties. display:contents removes its box entirely - a zero-sized
   box still took part in sizing and collapsed the drawer's panels. */
.cf--headless {
    display: contents;
}

.cf__triggers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* --- Trigger --- */

.cf__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 1 var(--cf-trigger-width);
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--cf-ink);
    border-radius: 0;
    color: var(--cf-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: opacity 0.15s ease;
}

.cf__trigger:hover {
    opacity: 0.65;
}

.cf__trigger:focus-visible {
    outline: 2px solid var(--cf-ink);
    outline-offset: 3px;
}

.cf__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf__trigger-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.cf__clear {
    padding: 0;
    background: none;
    border: 0;
    color: var(--cf-ink);
    font-family: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.cf__clear:hover {
    opacity: 0.65;
}

.cf__live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
 * Drawer shell
 * ---------------------------------------------------------------- */

.cf-drawer {
    position: fixed;
    z-index: 9000;
    inset: 0;
    /* Logged-in admins get a fixed bar across the top; without this the drawer
       header slides underneath it. Resolves to 0px for everyone else. */
    top: var(--wp-admin--admin-bar--height, 0px);
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.34s;
}

.cf-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

/* Only for the no-JavaScript case: the script drops the attribute on load.
   A closed drawer must not be display:none once scripting is on, because a
   subtree with no layout boxes gives the percentage transforms inside it
   nothing to resolve against, and the open transition then never starts. */
.cf-drawer[hidden] {
    display: none;
}

.cf-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 33, 33, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cf-drawer.is-open .cf-drawer__backdrop {
    opacity: 1;
}

.cf-drawer__dialog {
    position: absolute;
    inset-block: 0;
    right: 0;
    display: flex;
    align-items: stretch;
    max-width: 100%;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.cf-drawer.is-open .cf-drawer__dialog {
    transform: translateX(0);
}

/* Drawn sliding in from the left, with the sub-panel opening to its right. */
.cf-drawer--left .cf-drawer__dialog {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

.cf-drawer--left.is-open .cf-drawer__dialog {
    transform: translateX(0);
}

/* The list panel keeps its width while a sub-panel widens the dialog leftwards. */
.cf-drawer__main {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--cf-drawer-width);
    width: var(--cf-drawer-width);
    max-width: 100vw;
    background: var(--cf-paper);
    order: 1;
}

.cf-drawer__top {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 66px;
    padding: 0 30px;
    background: var(--cf-paper);
    border-bottom: 1px solid var(--cf-rule);
}

.cf-drawer__title {
    margin: 0;
    color: var(--cf-ink);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.21px;
}

.cf-drawer__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.cf-drawer__close img {
    width: 18px;
    height: 18px;
}

.cf-drawer__close:hover {
    opacity: 0.6;
}

.cf-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 30px 20px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cf-drawer__body--facets {
    padding: 14px 0;
}

/* ------------------------------------------------------------------
 * Categories drawer
 * ---------------------------------------------------------------- */

.cf-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 20px 0;
    border-bottom: 1px solid var(--cf-rule);
    color: var(--cf-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
}

.cf-cat:hover {
    color: var(--cf-ink);
    opacity: 0.6;
}

.cf-cat.is-selected {
    font-weight: 500;
}

/* Sub-panel: unfolds to the right of the list, widening the dialog.
   The width animates on the panel while its contents sit at their final
   width inside .cf-sub__inner, so no text reflows during the reveal.
   This only works because a closed drawer is visibility:hidden rather than
   display:none - a subtree with no layout boxes has no width to animate from. */
.cf-drawer__sub {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 0;
    min-width: 0;
    max-width: 100vw;
    background: var(--cf-sand);
    order: 2;
    overflow: hidden;
    visibility: hidden;
    transition:
        width 0.34s cubic-bezier(0.32, 0.72, 0, 1),
        min-width 0.34s cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 0.34s;
}

.cf-drawer__sub.is-open {
    width: var(--cf-sub-width);
    min-width: var(--cf-sub-width);
    visibility: visible;
    transition:
        width 0.34s cubic-bezier(0.32, 0.72, 0, 1),
        min-width 0.34s cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s;
}

.cf-sub__inner {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: var(--cf-sub-width);
    height: 100%;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.24s ease 0.06s;
}

.cf-drawer__sub.is-open .cf-sub__inner {
    opacity: 1;
}

.cf-sub__back {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 66px;
    padding: 0 20px 0 30px;
    background: var(--cf-sand);
    border: 0;
    border-bottom: 1px solid var(--cf-rule);
    border-radius: 0;
    color: var(--cf-ink-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.cf-sub__back:hover {
    opacity: 0.65;
}

.cf-sub__back-icon {
    flex: 0 0 auto;
    width: 7px;
    height: 16px;
    transform: rotate(-90deg);
}

.cf-sub__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 0 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cf-sub__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 30px;
}

.cf-sub__heading {
    color: var(--cf-ink-soft);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.18px;
    text-decoration: none;
}

.cf-sub__heading:hover {
    color: var(--cf-ink-soft);
    opacity: 0.65;
}

.cf-sub__heading.is-selected {
    text-decoration: underline;
}

.cf-sub__children {
    display: flex;
    flex-direction: column;
}

.cf-sub__child {
    color: var(--cf-ink-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    opacity: 0.7;
}

.cf-sub__child:hover {
    color: var(--cf-ink-soft);
    opacity: 1;
}

.cf-sub__child.is-selected {
    opacity: 1;
    text-decoration: underline;
}

/* Closing "show everything in this branch" link: present, but never competing
   with the real sub-categories above it. */
.cf-sub__all {
    color: var(--cf-ink-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    opacity: 0.7;
}

.cf-sub__all:hover {
    color: var(--cf-ink-soft);
    opacity: 1;
}

.cf-sub__all.is-selected {
    opacity: 1;
    text-decoration: underline;
}

/* ------------------------------------------------------------------
 * More-filters drawer
 * ---------------------------------------------------------------- */

.cf-facet {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 30px;
}

.cf-facet__title {
    margin: 0;
    color: var(--cf-ink-soft);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.18px;
}

.cf-facet__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cf-ink-soft);
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
}

.cf-check input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cf-check__box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: var(--cf-paper);
    border: 1px solid var(--cf-ink);
}

.cf-check input:checked+.cf-check__box {
    background-color: var(--cf-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.5L8.5 14.5L15.5 6.5' stroke='%23F6F2EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.cf-check input:focus-visible+.cf-check__box {
    outline: 2px solid var(--cf-ink);
    outline-offset: 2px;
}

.cf-check__count {
    opacity: 0.45;
    font-size: 13px;
}

/* --- Price range --- */

.cf-price {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf-price__fields {
    display: flex;
    gap: 8px;
}

.cf-price__field {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 10px 0 15px;
    background: transparent;
    border: 1px solid var(--cf-ink);
}

.cf-price__number {
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cf-ink-soft);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.14px;
    -moz-appearance: textfield;
}

.cf-price__number::-webkit-outer-spin-button,
.cf-price__number::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.cf-price__number:focus {
    outline: none;
}

.cf-price__unit {
    flex: 0 0 auto;
    padding-left: 8px;
    color: var(--cf-ink-soft);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.1px;
}

/* Two range inputs stacked over one track: each keeps its own thumb, and
   pointer-events are re-enabled only on the thumbs so both stay grabbable. */
.cf-price__slider {
    position: relative;
    height: 23px;
}

.cf-price__track,
.cf-price__range {
    position: absolute;
    top: 50%;
    height: 6px;
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
}

.cf-price__track {
    left: 0;
    right: 0;
    background: var(--cf-sand);
}

.cf-price__range {
    left: 0;
    width: 100%;
    background: var(--cf-ink);
}

.cf-price__handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 23px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.cf-price__handle:focus {
    outline: none;
}

.cf-price__handle::-webkit-slider-runnable-track {
    height: 23px;
    background: none;
    border: 0;
}

.cf-price__handle::-moz-range-track {
    height: 23px;
    background: none;
    border: 0;
}

.cf-price__handle::-webkit-slider-thumb {
    width: 23px;
    height: 23px;
    background: url("../images/filter/slider-handle.svg") center / 23px 23px no-repeat;
    border: 0;
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

.cf-price__handle::-moz-range-thumb {
    width: 23px;
    height: 23px;
    background: url("../images/filter/slider-handle.svg") center / 23px 23px no-repeat;
    border: 0;
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;
}

.cf-price__handle:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--cf-ink);
    outline-offset: 2px;
}

.cf-price__handle:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--cf-ink);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Sorting
 * ---------------------------------------------------------------- */

.cf-sort {
    position: relative;
    flex: 0 0 auto;
    width: 153px;
}

.cf-sort__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 15px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #212121;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
}

.cf-sort__trigger:hover {
    opacity: 0.65;
}

.cf-sort__trigger:focus-visible {
    outline: 2px solid #212121;
    outline-offset: 3px;
}

.cf-sort__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-sort__chevron {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.cf-sort--open .cf-sort__chevron {
    transform: rotate(180deg);
}

.cf-sort__menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 1px);
    right: 0;
    min-width: 220px;
    padding: 0;
    background: var(--bde-background-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.cf-sort__option {
    display: block;
    padding: 9px 15px;
    color: #212121;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.cf-sort__option:hover {
    background: rgba(33, 33, 33, 0.05);
    color: #212121;
}

.cf-sort__option.is-selected {
    font-weight: 500;
    background: rgba(33, 33, 33, 0.04);
}

/* ------------------------------------------------------------------
 * Result count
 * ---------------------------------------------------------------- */

.cf-result-count {
    color: #212121;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Toolbar: filters left, result count + sorting right
 * ---------------------------------------------------------------- */

.cf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    width: 100%;
    margin-bottom: 40px;
}

.cf-toolbar__filters {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-toolbar__meta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 15px;
}

/* ------------------------------------------------------------------
 * Loading state
 * ---------------------------------------------------------------- */

.cf-loading-target {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.cf__loader {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cf__spinner {
    width: 40px;
    height: 40px;
    color: #212121;
    animation: cf-rotate 1.4s linear infinite;
}

.cf__spinner circle {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 80 120;
    animation: cf-dash 1.4s ease-in-out infinite;
}

@keyframes cf-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cf-dash {
    0% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: -60;
    }

    100% {
        stroke-dashoffset: -120;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cf-drawer__dialog,
    .cf-drawer__backdrop {
        transition: none;
    }

    .cf-drawer__sub,
    .cf-sub__inner {
        transition: visibility 0s;
    }

    .cf__spinner,
    .cf__spinner circle {
        animation-duration: 4s;
    }

    .cf-sort__chevron {
        transition: none;
    }
}

/* ------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------- */

@media (max-width: 1119px) {
    .cf-toolbar {
        flex-wrap: wrap;
    }

    .cf-toolbar__filters {
        flex: 1 1 100%;
    }

    .cf-toolbar__meta {
        margin-left: auto;
    }

    .cf__trigger {
        flex: 1 1 240px;
    }
}

@media (max-width: 991px) {
    /* Too narrow for two panels side by side: it covers the list. */
    .cf-drawer__main {
        flex-basis: min(var(--cf-drawer-width), 100vw);
        width: min(var(--cf-drawer-width), 100vw);
    }

    .cf-drawer__sub {
        position: absolute;
        inset: 0;
        width: 100%;
        transform: translateX(100%);
        transition:
            transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s linear 0.34s;
    }

    .cf-drawer__sub.is-open {
        width: 100%;
        transform: translateX(0);
        transition:
            transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s;
    }

    .cf-sub__inner { width: 100%; opacity: 1; }
}

@media (max-width: 767px) {
    .cf-toolbar {
        gap: 20px;
        margin-bottom: 30px;
    }

    .cf-toolbar__meta {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    /* Wrapper for drawers printed outside the toolbar: it exists only to carry
   the custom properties, and must not occupy a line of its own. */
    .cf--headless {
        width: 0;
        height: 0;
    }

    .cf__triggers {
        gap: 0 20px;
    }

    .cf__trigger {
        flex: 1 1 100%;
    }

    .cf-sort {
        width: 100%;
    }

    .cf-sort__menu {
        left: 0;
        right: auto;
        width: 100%;
    }

    .cf-drawer__top,
    .cf-drawer__body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cf-facet,
    .cf-sub__group {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cf-sub__back {
        padding-left: 20px;
    }
}