/* ---------------------------------------------------------------------------
 * shop.css — het productoverzicht (woocommerce/archive-product.php), naar
 * 'Categorie' in het ontwerp
 *
 * Op de winkelpagina en elke productcategorie (bg_templateNaam() → 'shop').
 * De kaart en het rooster staan in kaart.css: die zijn gedeeld met de
 * zoekpagina en laden op beide (bg_kaartAssets() in inc/assets.php).
 *
 * De maten zijn die van het ontwerp. Daar is alles content-box, hier
 * border-box (zie de kop van main.css): waar het ontwerp een breedte of hoogte
 * met een rand of padding had, staat hier de som, met de rekensom erbij.
 *
 * Twee afwijkingen op verzoek (03-11-2026):
 *   - de filterkolom plakt niet mee (het ontwerp: position: sticky; top: 130px);
 *   - de plus op een kaart schuift niet op als je over de kaart gaat (kaart.css).
 *
 * In volgorde van de pagina: band, filterkolom, balk boven het rooster,
 * actieve filters, lege staat, paginering, actieband, categorietekst.
 * --------------------------------------------------------------------------- */

.shop {
    background: var(--kleurWit);
}

/* --------------------------------------------------------------------------
 * De band: kruimels, titel, inleiding, keuzehulp, soorten
 *
 * De band, het kruimelpad en de kop zijn gedeeld (main.css: .paginaBand,
 * .kruimel, .paginaKop). Hier wat het overzicht anders heeft: 22px tussen de
 * regels in plaats van 20, en de ruimte eronder.
 * -------------------------------------------------------------------------- */

.shopBandBinnen {
    gap: 22px;
    padding-bottom: clamp(36px, 5vw, 56px);
}

.shopKopRij {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.shopKopTekst {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 820px;
}

.shopInleiding {
    max-width: 68ch;
    color: var(--kleurTekstZacht);
    font-size: 16px;
    line-height: 1.65;
}

/* De witte knop naar de keuzehulp. */
.shopKeuze {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 14px 14px;
    border-radius: 20px;
    background: var(--kleurWit);
    box-shadow: 0 10px 24px rgb(20 60 50 / .08);
    transition: transform .2s;
}

.shopKeuze:hover {
    color: var(--kleurInkt);
    transform: translateY(-2px);
}

.shopKeuzeVraag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--kleurGeel);
    font-weight: 800;
}

.shopKeuzeTekst {
    display: flex;
    flex-direction: column;
}

.shopKeuzeTekst strong {
    font-size: 16px;
    font-weight: 700;
}

.shopKeuzeTekst span {
    color: var(--kleurTekstZacht);
    font-size: 14px;
}

/* Een pijl schuift op als je over zijn knop gaat (het ontwerp, microFx). De
   plus op een kaart doet dat bewust niet. */
.shopPijl {
    transition: transform .3s var(--curve);
}

a:hover > .shopPijl {
    transform: translateX(4px);
}

/* De soorten. In het ontwerp knoppen van 48px hoog met een rand van 2px; een
   <button> is al border-box, dus dezelfde maat. */
.soortChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.soortChip {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 20px;
    border: 2px solid var(--kleurWit);
    border-radius: var(--hoekPil);
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s;
}

.soortChip:hover {
    border-color: var(--kleurInkt);
    color: var(--kleurInkt);
}

.soortChip.isAan {
    border-color: var(--kleurInkt);
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

/* --------------------------------------------------------------------------
 * De vloer: filterkolom en resultaat naast elkaar, onder elkaar zodra het
 * rooster geen 560px meer krijgt (flex-wrap, zoals het ontwerp)
 * -------------------------------------------------------------------------- */

.shopVloer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 40px);
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: 28px var(--goot) clamp(56px, 7vw, 96px);
}

/* Niet sticky: op verzoek plakt de kolom niet mee. */
.filterKolom {
    flex: 1 1 240px;
    max-width: 300px;
}

.filterKop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--kleurVlak);
}

.filterTitel {
    font-size: 18px;
    font-weight: 700;
}

.filterWis {
    color: var(--kleurActieDiep);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.filterWis:hover {
    color: var(--kleurInkt);
}

.filterGroep {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 2px solid var(--kleurVlak);
}

.filterGroep:last-child {
    border-bottom: 0;
}

.filterGroepKop {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
}

.filterLijst {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filterOptie {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    color: var(--kleurInkt);
    font-size: 15px;
}

.filterOptie:hover {
    color: var(--kleurInkt);
}

/* Het vakje: 22px met een rand van 2px in het ontwerp (content-box) = 26px. */
.filterVakje {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 2px solid var(--kleurRandSterk);
    border-radius: 7px;
    background: var(--kleurWit);
    color: var(--kleurWit);
    transition: all .2s;
}

.filterOptie.isAan .filterVakje {
    border-color: var(--kleurActieDiep);
    background: var(--kleurActieDiep);
}

.filterStaal {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}

.filterNaam {
    flex: 1;
}

.filterAantal {
    color: var(--kleurTekstStil);
    font-size: 14px;
}

/* Het rondje van de prijs: ook 22 + 2 × 2 = 26px, met een stip van 10px. */
.filterRondje {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 2px solid var(--kleurRandSterk);
    border-radius: 50%;
}

.filterRondje::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.filterOptie.isAan .filterRondje {
    border-color: var(--kleurActieDiep);
}

.filterOptie.isAan .filterRondje::after {
    background: var(--kleurActieDiep);
}

/* --------------------------------------------------------------------------
 * Het resultaat: aantal, sortering, actieve filters, rooster
 * -------------------------------------------------------------------------- */

.shopResultaat {
    display: flex;
    flex-direction: column;
    flex: 999 1 560px;
    gap: 20px;
    min-width: 0;
}

.shopBalk {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
}

.shopAantal {
    font-size: 16px;
}

.shopAantal strong {
    font-weight: 700;
}

.sorteerKnoppen {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: var(--hoekPil);
    background: var(--kleurGrond);
}

.sorteerKnoppen li {
    display: flex;
}

.sorteerKnop {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--hoekPil);
    color: var(--kleurInkt);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: all .2s;
}

.sorteerKnop:hover {
    color: var(--kleurInkt);
}

.sorteerKnop.isAan {
    background: var(--kleurWit);
    box-shadow: var(--schaduwPil);
}

.actiefChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.actiefChip {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 14px;
    border-radius: var(--hoekPil);
    background: var(--kleurInkt);
    color: var(--kleurWit);
    font-size: 14px;
    font-weight: 600;
}

.actiefChip:hover {
    color: var(--kleurWit);
}

.actiefKruis {
    font-size: 16px;
    line-height: 1;
}

/* Waarom 'In winkelwagen' zonder JavaScript niet lukte (Woo's melding). */
.shopMeldingen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--kleurGeelVlak);
    font-size: 15px;
    font-weight: 600;
}

/* Niets gevonden. In het ontwerp een knop van 56px hoog. */
.shopLeeg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 48px 28px;
    border-radius: 24px;
    background: var(--kleurGrond);
}

.shopLeegKop {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.shopLeegTekst {
    color: var(--kleurTekstZacht);
    font-size: 16px;
}

.shopLeegKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 26px;
    border-radius: var(--hoekPil);
    background: var(--kleurInkt);
    color: var(--kleurWit);
    font-size: 16px;
    font-weight: 800;
    transition: background .2s;
}

.shopLeegKnop:hover {
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
}

/* De paginering staat niet in het ontwerp (twaalf bedden passen op één
   blad); hier zijn het de pillen van de sortering. */
.shopPaginas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.shopPaginas .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--hoekPil);
    background: var(--kleurGrond);
    color: var(--kleurInkt);
    font-size: 15px;
    font-weight: 700;
    transition: background .2s, color .2s;
}

.shopPaginas a.page-numbers:hover,
.shopPaginas .current {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.shopPaginas .dots {
    min-width: 0;
    padding: 0 4px;
    background: none;
}

/* --------------------------------------------------------------------------
 * De actieband (Site-instellingen → Categoriepagina)
 *
 * min-height: 150px plus de padding boven en onder (content-box in het
 * ontwerp).
 * -------------------------------------------------------------------------- */

.shopPromo {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: calc(150px + 2 * clamp(24px, 3vw, 36px));
    margin-top: 12px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 28px;
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
}

.shopPromoCirkel {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--kleurActie);
    opacity: .5;
}

.shopPromoBeeld {
    position: absolute;
    right: clamp(200px, 24vw, 300px);
    bottom: -18px;
    width: auto;
    height: 130%;
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgb(0 0 0 / .3));
    pointer-events: none;
}

.shopPromoTekst {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shopPromoLabel {
    color: var(--kleurActieLicht);
    font-family: var(--fontAccent);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

.shopPromoTitel {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.03em;
}

.shopPromoKnop {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 26px;
    border-radius: var(--hoekPil);
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font-size: 16px;
    font-weight: 800;
    transition: background .2s, transform .15s;
}

.shopPromoKnop:hover {
    background: var(--kleurMint);
    color: var(--kleurInkt);
}

/* --------------------------------------------------------------------------
 * De categorietekst onder het rooster
 *
 * Staat niet in het ontwerp, wel op de doelsite (en voor zoekmachines). In
 * dezelfde kolom als het rooster, met de lettermaat van de inleiding.
 * -------------------------------------------------------------------------- */

.shopTekst {
    max-width: 820px;
    margin-top: clamp(20px, 3vw, 36px);
    padding-top: clamp(28px, 4vw, 44px);
    border-top: 2px solid var(--kleurVlak);
    color: var(--kleurTekstZacht);
    font-size: 16px;
    line-height: 1.65;
}

.shopTekst > * + * {
    margin-top: 1em;
}

.shopTekst h2,
.shopTekst h3 {
    color: var(--kleurInkt);
    font-weight: 800;
    line-height: 1.2;
}

.shopTekst h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -.03em;
}

.shopTekst h3 {
    font-size: 20px;
    letter-spacing: -.02em;
}

.shopTekst > * + h2,
.shopTekst > * + h3 {
    margin-top: 1.5em;
}

.shopTekst strong {
    color: var(--kleurInkt);
}

.shopTekst a {
    color: var(--kleurActieDiep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shopTekst a:hover {
    color: var(--kleurInkt);
}

.shopTekst ul,
.shopTekst ol {
    padding-left: 1.25em;
}

.shopTekst ul {
    list-style: disc;
}

.shopTekst ol {
    list-style: decimal;
}

.shopTekst li + li {
    margin-top: .35em;
}

/* Het rooster komt uit kaart.css; hier de kolombreedte van het ontwerp
   (minmax(min(100%, 250px), 1fr)). */
.shop .kaartRooster {
    --kaartMin: 250px;
}

/* De titel komt binnen en het handschrift wordt geschreven, zoals in het
   ontwerp (microFx: 700 ms omhoog, het accent met clip-path). Als
   CSS-animatie en niet uit een script: die begint bij de eerste weergave, dus
   de titel staat nooit eerst vol in beeld om dan weg te springen. Eindigt
   altijd zichtbaar, ook als er niets anders laadt. */
@media (prefers-reduced-motion: no-preference) {
    .shopTitel {
        animation: shopTitelIn 700ms 80ms var(--curve) backwards;
    }

    .shopTitel .kopAccent {
        animation: shopAccentIn 800ms 200ms var(--curve) backwards;
    }
}

@keyframes shopTitelIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@keyframes shopAccentIn {
    from {
        clip-path: inset(-20% 100% -20% 0);
        transform: translateY(6px) rotate(-2deg);
    }

    to {
        clip-path: inset(-20% 0 -20% 0);
        transform: none;
    }
}

/* Tijdens het verversen zonder herladen (shop.js). */
.shopVloer[aria-busy='true'] .shopResultaat {
    opacity: .55;
    transition: opacity .2s .1s;
}

/* --------------------------------------------------------------------------
 * De filters op een smal scherm (tot en met 760px)
 *
 * Op verzoek (03-11-2026): in het ontwerp staat de hele filterlijst boven de
 * producten, en dan scrol je eerst langs maat, kleur, prijs en levering. Hier
 * staat er een knop 'Filteren' in de balk (met het aantal actieve filters) en
 * schuift de kolom als paneel van onderen in, met 'Wis alles', een kruisje en
 * 'Toon … producten'. Zonder JavaScript opent hij met :target (de knop is een
 * link naar #filterKolom); met shop.js blijft hij open terwijl je filtert.
 * Breder dan 760px verandert er niets.
 * -------------------------------------------------------------------------- */

.filterKnop {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--hoekPil);
    background: var(--kleurInkt);
    color: var(--kleurWit);
    font-size: 15px;
    font-weight: 700;
}

.filterKnop:hover {
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
}

.filterKnopAantal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--hoekPil);
    background: var(--kleurGeel);
    color: var(--kleurInkt);
    font-size: 13px;
    font-weight: 800;
}

.filterSluit {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kleurGrond);
    color: var(--kleurInkt);
}

.filterToon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    color: var(--kleurWit);
    font-size: 16px;
    font-weight: 800;
}

.filterToon:hover {
    background: var(--kleurActieHover);
    color: var(--kleurWit);
}

@media (max-width: 47.5rem) {
    .filterKolom {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: none;
        flex-direction: column;
        max-width: none;
        max-height: 85vh;
        max-height: 85dvh;
        padding: 0 var(--goot);
        overflow: auto;
        overscroll-behavior: contain;
        border-radius: 24px 24px 0 0;
        background: var(--kleurWit);
    }

    .filterKolom:target,
    .filterKolom.isOpen {
        display: flex;
    }

    /* Een tik naast het paneel sluit het (en raakt niets eronder). */
    .filterWaas {
        position: fixed;
        inset: 0;
        z-index: 89;
        display: none;
        background: rgb(20 20 20 / .45);
    }

    .filterKolom:target + .filterWaas,
    .filterKolom.isOpen + .filterWaas {
        display: block;
    }

    /* De pagina eronder schuift niet mee. */
    html:has(.filterKolom:target),
    html:has(.filterKolom.isOpen) {
        overflow: hidden;
    }

    .filterKop {
        position: sticky;
        top: 0;
        z-index: 1;
        gap: 16px;
        padding: 18px 0 12px;
        background: var(--kleurWit);
    }

    .filterTitel {
        flex: 1;
        font-size: 20px;
    }

    .filterVoet {
        position: sticky;
        bottom: 0;
        margin: auto calc(-1 * var(--goot)) 0;
        padding: 12px var(--goot) calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--kleurWit);
        box-shadow: 0 -2px 0 var(--kleurVlak);
    }
}