/**
 * Filterbalk, plakkende winkelwagen en mobiele winkelwagenpil.
 * Hoort bij page-templates/Producten.php en wordt alleen daar ingeladen
 * vanuit includes/functions/producten-pagina.php.
 *
 * Handgeschreven en niet in de scss-map: wp-scss compileert elk los
 * scss-bestand en laadt de uitkomst op elke pagina.
 */

/* =========================================================
 * FILTERBALK
 * ========================================================= */

.vvb-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: sticky;

    /* De velden moeten met hun bovenkant op dezelfde lijn staan als de
       bovenkant van de winkelwagen, en die plakt op --vvb-sticky-top.
       Het blok zelf begint een kier hoger en vult die met wit, anders
       scrollen de productkaarten zichtbaar door het gat tussen de header
       en de balk. De negatieve marge haalt diezelfde kier er in de
       pagina weer af, zodat de uitlijning ook ongeplakt klopt. */
    top: calc(var(--vvb-sticky-top) - var(--vvb-kier));
    margin-top: calc(var(--vvb-kier) * -1);
    padding: var(--vvb-kier) 0 12px;

    z-index: 6;
    background: #fff;
    margin-bottom: 8px;
}

/* --- zoekveld --- */

.vvb-toolbar__zoek .facetwp-facet {
    margin: 0;
}

.vvb-toolbar__zoek .facetwp-input-wrap {
    display: block;
    position: relative;
    width: 100%;
}

/* FacetWP zet dit icoon op right: 0 en maakt er een knop van die meteen
   zoekt. Samen met de left hieronder rekte het uit over bijna het hele
   veld, zodat elke klik op het zoekveld een zoekopdracht startte in
   plaats van de cursor te plaatsen. Daarom een eigen maat, en geen
   muisgebeurtenissen: het is hier alleen een plaatje. */
.vvb-toolbar__zoek .facetwp-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    right: auto;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    margin: 0;
    opacity: .6;
    pointer-events: none;
}

.vvb-toolbar__zoek .facetwp-icon::before {
    left: 0;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-position: center;
}

.vvb-toolbar__zoek input.facetwp-search {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--vvb-rand);
    border-radius: var(--vvb-radius);
    background: var(--vvb-veld);
    font-size: 15px;
    line-height: 42px;
    color: #000;
    box-sizing: border-box;
}

.vvb-toolbar__zoek input.facetwp-search:focus {
    outline: 2px solid var(--vvb-bruin);
    outline-offset: -1px;
    border-color: var(--vvb-bruin);
}

/* --- categorieknop --- */

.vvb-toolbar__cat {
    position: relative;
}

.vvb-catknop {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--vvb-rand);
    border-radius: var(--vvb-radius);
    background: var(--vvb-veld);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    color: #000;
}

.vvb-catknop:focus-visible {
    outline: 2px solid var(--vvb-bruin);
    outline-offset: 1px;
}

.vvb-catknop__icoon {
    flex: 0 0 auto;
    color: var(--vvb-bruin);
    font-size: 15px;
}

.vvb-catknop__tekst {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.vvb-catknop__label {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b6257;
}

.vvb-catknop__waarde {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vvb-catknop__bolletje {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vvb-bruin);
    display: none;
}

.vvb-catknop.is-gefilterd .vvb-catknop__bolletje {
    display: block;
}

.vvb-catknop__chevron {
    flex: 0 0 auto;
    font-size: 12px;
    color: #6b6257;
    transition: transform .15s ease;
}

.vvb-catknop[aria-expanded="true"] .vvb-catknop__chevron {
    transform: rotate(180deg);
}

/* --- het paneel --- */

.vvb-catpaneel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--vvb-rand);
    border-radius: var(--vvb-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 6px;
    box-sizing: border-box;

    /* Verborgen met css, niet uit de dom gehaald: FacetWP moet de facet
       gewoon kunnen initialiseren. */
    display: none;
}

.vvb-toolbar__cat.is-open .vvb-catpaneel {
    display: block;
}

.vvb-catpaneel .facetwp-facet {
    margin: 0;
}

.vvb-catpaneel .facetwp-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    background: none;
    font-size: 14px;
    cursor: pointer;
    color: #000;
}

.vvb-catpaneel .facetwp-radio:hover {
    background: #f6f3ee;
}

.vvb-catpaneel .facetwp-radio:focus-visible {
    outline: 2px solid var(--vvb-bruin);
    outline-offset: -2px;
}

.vvb-catpaneel .facetwp-radio.checked {
    background: var(--vvb-bruin-licht);
    color: var(--vvb-bruin-donker);
    font-weight: 600;
}

.vvb-catpaneel .facetwp-display-value {
    flex: 1 1 auto;
}

.vvb-catpaneel .facetwp-counter {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 400;
    color: #6b6257;
}

/* =========================================================
 * PLAKKENDE WINKELWAGEN
 * ========================================================= */

.row.producten_row .blocks-container.shopping-cart .cart {
    position: sticky;
    top: var(--vvb-sticky-top);
    max-height: calc(100vh - var(--vvb-sticky-top) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Het thema laat alinea's zweven; daardoor kwam deze regel naast de
   totalen te staan in plaats van erboven. */
.vvb-cart-leeg {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 14px;
    color: #6b6257;
    font-size: 14px;
}

/* =========================================================
 * MOBIEL
 * ========================================================= */

@media screen and (max-width: 1024px) {

    .vvb-toolbar {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: var(--vvb-kier) 0 10px;
        border-bottom: 1px solid var(--vvb-rand);
    }

    .vvb-toolbar__zoek input.facetwp-search,
    .vvb-catknop {
        height: 40px;
        line-height: 40px;
    }

    .vvb-catpaneel {
        max-height: calc(100vh - var(--vvb-sticky-top) - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .vvb-catpaneel .facetwp-radio {
        min-height: 44px;
        padding: 10px 12px;
    }

    /* De winkelwagenkolom maakt plaats voor de pil. */
    .row.producten_row .blocks-container.shopping-cart {
        display: none;
    }

    /* Twee kolommen producten. minmax(0, 1fr) en niet 1fr: een spoor van 1fr
       mag standaard niet kleiner worden dan zijn inhoud, en dan werden de
       kolommen ongelijk en liepen ze buiten het grid. */
    .row.producten_row .blocks-container.products .block.producten {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* In twee smalle kolommen liepen lange woorden als "rundercarpaccio"
       buiten de kaart. */
    .row.producten_row .blocks-container.products .block.producten .product h3,
    .row.producten_row .blocks-container.products .block.producten .product .informatie {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* De categoriedropdown zou anders achter de pil verdwijnen. */
    body.vvb-cat-open .vvb-pill {
        display: none;
    }

    /* De regels in de sheet staan buiten .shopping-cart en krijgen de
       opmaak uit _wooma.scss dus niet. */
    .vvb-sheet__inhoud .vvb-cart-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0 8px;
        padding: 10px 0;
        border-bottom: 1px solid var(--vvb-rand);
    }

    .vvb-sheet__inhoud .vvb-cart-item h4 {
        margin: 0;
        flex: 1 1 auto;
        font-size: 15px;
        line-height: 1.3;
    }

    .vvb-sheet__inhoud .vvb-cart-item .quantity {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0 5px;
    }

    .vvb-sheet__inhoud .vvb-cart-item .quantity .qty {
        width: 44px;
        height: 36px;
        text-align: center;
    }

    .vvb-sheet__inhoud .vvb-remove-item {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border: 0;
        background: none;
        cursor: pointer;
        color: #000;
    }

}