/* ============================================================
   Woo categorieën widget
   Overschrijf de kleur/maatvoering via onderstaande variabelen.
   ============================================================ */
body {
    --cpx-woo-cat-accent: var(--e-global-color-secondary);
    /* geel */
    --cpx-woo-cat-text: var(--e-global-color-text);
    --cpx-woo-cat-text-hover: var(--e-global-color-secondary);
    --cpx-woo-cat-caret-color: var(--e-global-color-secondary);

    --cpx-woo-cat-font-size: 1rem;
    --cpx-woo-cat-line-height: 1.4;
    --cpx-woo-cat-font-weight-active: 700;

    --cpx-woo-cat-row-padding-y: 0.35rem;
    --cpx-woo-cat-indent: 1.1rem;
    --cpx-woo-cat-gap: 0.8rem;

    --cpx-woo-cat-caret-w: 10px;
    --cpx-woo-cat-caret-h: 17px;

    --cpx-woo-cat-transition: 0.2s ease;
}

/* Block ----------------------------------------------------- */
.cpx-woo-categories {
    font-size: var(--cpx-woo-cat-font-size);
    line-height: var(--cpx-woo-cat-line-height);
}

.cpx-woo-categories__list,
.cpx-woo-categories__item__children {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Nesting / indent ------------------------------------------ */
.cpx-woo-categories__item__children {
    display: none;
    /* dichtgeklapt; JS + --open openen */
    padding-left: var(--cpx-woo-cat-indent);
    margin-left: var(--cpx-woo-cat-indent);
}

.cpx-woo-categories__item--open>.cpx-woo-categories__item__children {
    display: block;
}

/* Row: caret + link ----------------------------------------- */
.cpx-woo-categories__item__row {
    display: flex;
    align-items: center;
    gap: var(--cpx-woo-cat-gap);
    padding-top: var(--cpx-woo-cat-row-padding-y);
    padding-bottom: var(--cpx-woo-cat-row-padding-y);
}

/* Caret-knop: SVG via mask zodat de kleur via background-color stuurt.
   SVG wijst standaard naar rechts (dicht); open = 90° gedraaid (naar onder).
   Dubbele class + resets om Elementor's globale button-styling te overrulen. */
.cpx-woo-categories .cpx-woo-categories__item__toggle {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--cpx-woo-cat-caret-w);
    min-width: 0;
    height: var(--cpx-woo-cat-caret-h);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--cpx-woo-cat-caret-color);
    background-image: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-mask: url("../img/Caret%20right%20gold.svg") no-repeat center / contain;
    mask: url("../img/Caret%20right%20gold.svg") no-repeat center / contain;
    transition: transform var(--cpx-woo-cat-transition);
}

/* Houd de caret intact bij Elementor's hover/focus/active states. */
.cpx-woo-categories .cpx-woo-categories__item__toggle:hover,
.cpx-woo-categories .cpx-woo-categories__item__toggle:focus,
.cpx-woo-categories .cpx-woo-categories__item__toggle:active {
    border: 0;
    background-color: var(--cpx-woo-cat-caret-color);
    background-image: none;
    box-shadow: none;
    outline: none;
}

.cpx-woo-categories .cpx-woo-categories__item--open>.cpx-woo-categories__item__row>.cpx-woo-categories__item__toggle {
    transform: rotate(90deg);
}

/* Link ------------------------------------------------------ */
.cpx-woo-categories__item__link {
    color: var(--cpx-woo-cat-text);
    text-decoration: none;
    transition: color var(--cpx-woo-cat-transition);
}

.cpx-woo-categories__item__link:hover,
.cpx-woo-categories__item__link:focus {
    color: var(--cpx-woo-cat-text-hover);
}

/* Actieve categorie (alleen vet, geen aparte tekstkleur) ----- */
.cpx-woo-categories__item--active>.cpx-woo-categories__item__row>.cpx-woo-categories__item__link {
    font-weight: var(--cpx-woo-cat-font-weight-active);
}