/*
 * Bestelartikelen — opmaak op de productpagina.
 *
 * LET OP: dit moet een echt bestand blijven en géén inline <style> worden.
 * WP Rocket's "ongebruikte CSS verwijderen" vouwt de ingeschreven stylesheets samen tot
 * één wpr-usedcss-blok en gooit inline stijlblokken wég -- gemeten op 23 augustus 2026:
 * ons <style id="geus-gh-productpagina"> stond nog in de pagina maar was leeg, terwijl
 * de media-queries van het thema er gewoon in zaten. Vanuit een bestand blijft alles
 * staan wat op de pagina daadwerkelijk gebruikt wordt.
 */

/* ------------------------------------------------------------------ *
 * Sticky bestelbalk onderaan de productpagina
 * ------------------------------------------------------------------ */

.sticky-add-to-cart__product {
    align-items: center;
}

/* De samengevatte regel mag krimpen in plaats van de koopknop weg te duwen. */
.sticky-add-to-cart .geus-gh-sticky {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * Voorraadblok: breed alles onder elkaar, smal achter een uitklapper
 * ------------------------------------------------------------------ */

/* Op een breed scherm is er ruimte zat; de uitklapper hoort daar niet. */
.geus-gh-smal {
    display: none;
}

@media (max-width: 849px) {

    /* In de smalle balk past geen tekst naast de knop. */
    .sticky-add-to-cart .geus-gh-sticky {
        display: none;
    }

    /* Telefoon: uitleg en kortingstredes achter een tik, zodat de koopknop
       niet onder de vouw verdwijnt. */
    .geus-gh-breed {
        display: none;
    }

    .geus-gh-smal {
        display: block;
        margin: 6px 0 14px;
    }

    .geus-gh-smal > summary {
        cursor: pointer;
        font-weight: 600;
        color: #15803d;
        list-style: none;
    }

    /* Safari zet er anders zijn eigen driehoekje voor. */
    .geus-gh-smal > summary::-webkit-details-marker {
        display: none;
    }

    .geus-gh-smal > summary::after {
        content: ' \25BE';
    }

    .geus-gh-smal[open] > summary::after {
        content: ' \25B4';
    }

    .geus-gh-smal-inhoud > p:first-child {
        margin-top: 4px;
    }

    .geus-gh-smal-inhoud > p:last-child {
        margin-bottom: 0;
    }
}