.woocommerce-MyAccount-navigation {
    box-sizing: border-box; /* 416px incl. padding */
    flex: 0 1 416px; /* mag krimpen zodat sidebar + content naast elkaar blijven */
    max-width: 416px;
    align-self: flex-start; /* hoogte = eigen inhoud, niet meerekken met content */
    position: relative;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    padding: 24px;
}

/* Descendant i.p.v. direct-child: de <ul> zit nu in .tt-account-nav__panel. */
.woocommerce-MyAccount-navigation ul {
    --background-color: #6aa2bf;
    list-style-type: none;
    margin: 0;
    padding-inline-start: unset;
}

.page-title-wrap.page-title-margin {
    margin-bottom: 0;
}

/* ==========================================================================
   Account-navigatie — opnieuw opgezet: elke link als pill.
   (De oude blauwe/oranje nav-styling is verwijderd.)
   ========================================================================== */

/* Dashboard-begroeting: "Hello X" boven de kleine uitlog-regel. */
.woocommerce-account .account-greeting__hello {
    display: block;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

.woocommerce-account .account-greeting__logout {
    display: block;
    font-size: 14px;
    line-height: 28px;
}

/* Paginatitel in de sidebar (i.p.v. bovenaan de pagina). `.entry-content`-
   prefix (0,3,0) verslaat de globale grote h1 `.page-default-surface
   .entry-content h1` (0,2,1). */
.page-default-surface .entry-content .woocommerce-MyAccount-navigation__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 32px;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
    text-align: left;
}

/* Account-icoon in een lichtgroene cirkel links van de titel. */
.woocommerce-MyAccount-navigation__title::before {
    content: "";
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--lighter-green, #DDF1E1) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.625 4.5C14.1094 4.5 16.125 6.51562 16.125 9C16.125 11.4844 14.1094 13.5 11.625 13.5C9.14062 13.5 7.125 11.4844 7.125 9C7.125 6.51562 9.14062 4.5 11.625 4.5ZM11.625 11.25C12.8438 11.25 13.875 10.2656 13.875 9C13.875 7.78125 12.8438 6.75 11.625 6.75C10.3594 6.75 9.375 7.78125 9.375 9C9.375 10.2656 10.3594 11.25 11.625 11.25ZM11.625 0C18.0469 0 23.25 5.20312 23.25 11.625C23.25 18.0469 18.0469 23.25 11.625 23.25C5.20312 23.25 0 18.0469 0 11.625C0 5.20312 5.20312 0 11.625 0ZM11.625 21C13.9219 21 16.0781 20.1562 17.7188 18.75C17.0156 17.6719 15.7969 16.9688 14.4375 16.9219C13.4531 17.2031 12.5156 17.3438 11.625 17.3438C10.6875 17.3438 9.75 17.2031 8.76562 16.9219C7.40625 16.9219 6.1875 17.6719 5.48438 18.75C7.125 20.1562 9.28125 21 11.625 21ZM19.2188 17.0625C20.3438 15.5625 21 13.6875 21 11.625C21 6.46875 16.7812 2.25 11.625 2.25C6.42188 2.25 2.25 6.46875 2.25 11.625C2.25 13.6875 2.85938 15.5625 3.98438 17.0625C5.10938 15.6094 6.89062 14.625 8.90625 14.625C9.375 14.625 10.125 15.0938 11.625 15.0938C13.0781 15.0938 13.8281 14.625 14.2969 14.625C16.3125 14.625 18.0938 15.6094 19.2188 17.0625Z' fill='%231FA238'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

/* E-Learning: losse knop boven het menu (geen account-endpoint). */
.page-default-surface .entry-content a.woocommerce-MyAccount-navigation__elearning {
    display: block;
    padding: 15px 24px;
    margin-bottom: 32px;
    border-radius: 40px;
    background-color: var(--green, #1FA238);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.42px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.page-default-surface .entry-content a.woocommerce-MyAccount-navigation__elearning:hover,
.page-default-surface .entry-content a.woocommerce-MyAccount-navigation__elearning:focus {
    background-color: var(--dark-pink, #C20068);
    color: #fff;
    text-decoration: none;
}

/* De `.page-default-surface .entry-content`-prefix (0,3,1) verslaat de globale
   roze-link-regel `.page-default-surface .entry-content a` (0,2,1). */
.page-default-surface .entry-content .woocommerce-MyAccount-navigation-link > a {
    position: relative;
    display: block;
    padding: 10px 14px;
    padding-right: 40px; /* ruimte voor de chevron rechts */
    border-radius: 5px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Actief item + hover/focus: groene tekst + lichtgroene achtergrond. */
.page-default-surface .entry-content .woocommerce-MyAccount-navigation-link.is-active > a,
.page-default-surface .entry-content .woocommerce-MyAccount-navigation-link > a:hover,
.page-default-surface .entry-content .woocommerce-MyAccount-navigation-link > a:focus {
    color: var(--green, #1FA238);
    background-color: var(--lighter-green, #DDF1E1);
    text-decoration: none;
}

/* Groene bullet '• ' voor elke link. */
.woocommerce-MyAccount-navigation-link > a::before {
    content: "\2022";
    margin-right: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--green, #1FA238);
}

/* Chevron rechts, verticaal gecentreerd. */
.woocommerce-MyAccount-navigation-link > a::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 21px;
    background: url("data:image/svg+xml,%3Csvg width='12' height='21' viewBox='0 0 12 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.125 0.234375C1.35938 0 1.6875 0 1.92188 0.234375L11.7656 10.0312C11.9531 10.2656 11.9531 10.5938 11.7656 10.8281L1.92188 20.625C1.6875 20.8594 1.35938 20.8594 1.125 20.625L0.1875 19.7344C0 19.5 0 19.125 0.1875 18.9375L8.67188 10.4062L0.1875 1.92188C0 1.73438 0 1.35938 0.1875 1.125L1.125 0.234375Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-MyAccount-content {
    flex: 1 1 746px;
    max-width: 746px;
    min-width: 0; /* mag krimpen als het niet past */
    margin-top: 0;
    animation: fadeIn 500ms;
}

/* H2 in de account-content. `.woocommerce-account` + `.woocommerce-MyAccount-content`
   (0,2,1) verslaat de globale `.page-template-default h2` (0,1,1). */
/* Standaard sectiekop binnen het account. De paginatitel bovenaan is groter en
   heeft een eigen class (.tt-orders-title). */
.woocommerce-account .woocommerce-MyAccount-content h2 {
    margin-top: 0;
    margin-bottom: 26px;
    font-size: 20px;
    line-height: 29px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.woocommerce:has(> .woocommerce-MyAccount-content) {
    display: flex;
    flex-wrap: nowrap; /* sidebar + content samen krimpen i.p.v. wrappen */
    justify-content: space-between; /* sidebar links, content rechts */
    gap: 30px; /* altijd minimaal deze tussenruimte */
    align-items: flex-start; /* sidebar niet meerekken met content-hoogte */
}

/* Onder 768px: sidebar en content onder elkaar (volle breedte). */
@media (max-width: 767px) {
    .woocommerce:has(> .woocommerce-MyAccount-content) {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .woocommerce:has(> .woocommerce-MyAccount-content) .woocommerce-MyAccount-navigation,
    .woocommerce:has(> .woocommerce-MyAccount-content) .woocommerce-MyAccount-content {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .woocommerce:has(> .woocommerce-MyAccount-content) {
        flex-direction: column;
    }

    /* Sidebar = witte kaart; titelbalk is de accordion-toggle. */
    .woocommerce-MyAccount-navigation {
        flex: 1;
        position: relative;
        z-index: 5;
        padding: 16px 20px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    }

    /* Titelbalk: klikbaar, met chevron rechts. Volledige prefix zodat de
       basis-titelregel (0,3,1) hier overschreven wordt. */
    .page-default-surface .entry-content .woocommerce-MyAccount-navigation__title {
        margin: 0;
        padding: 0;
        gap: 16px;
        font-size: 20px;
        line-height: 29px;
        cursor: pointer;
    }

    .woocommerce-MyAccount-navigation__title::after {
        content: '';
        flex: 0 0 auto;
        margin-left: auto; /* duwt de chevron naar rechts */
        width: 21px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.625 1.17188C20.8594 1.35938 20.8594 1.73438 20.625 1.96875L10.8281 11.7656C10.5938 12 10.2656 12 10.0312 11.7656L0.234375 1.96875C0 1.73438 0 1.35938 0.234375 1.17188L1.125 0.234375C1.35938 0 1.73438 0 1.92188 0.234375L10.4531 8.71875L18.9375 0.234375C19.125 0 19.5 0 19.7344 0.234375L20.625 1.17188Z' fill='%231FA238'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: transform 0.2s ease;
    }

    /* Open: onderkant recht zodat de kaart aansluit op het paneel; chevron omhoog. */
    .woocommerce-MyAccount-navigation.is-open {
        border-radius: 15px 15px 0 0;
    }

    .woocommerce-MyAccount-navigation.is-open .woocommerce-MyAccount-navigation__title::after {
        transform: rotate(180deg);
    }

    /* Oude hamburger-balk niet gebruiken. */
    .menu-collapse {
        display: none !important;
    }

    /* Uitklap-paneel: standaard dicht; open = zwevend wit paneel over de content. */
    .tt-account-nav__panel {
        display: none;
    }

    .woocommerce-MyAccount-navigation.is-open .tt-account-nav__panel {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        padding: 0 20px 16px;
        background: #fff;
        border-radius: 0 0 15px 15px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    }

    /* Menu-items boven, E-Learning-knop eronder (bronvolgorde is andersom). */
    .tt-account-nav__panel > ul {
        order: 1;
        margin: 0;
    }

    /* Volledige prefix zodat margin-bottom van de basisregel (0,3,1) verdwijnt. */
    .page-default-surface .entry-content .tt-account-nav__panel > a.woocommerce-MyAccount-navigation__elearning {
        order: 2;
        margin: 16px 0 0;
    }

    .woocommerce-MyAccount-navigation-link {
        width: 100%;
    }

    .text-sm-center {
        text-align: center !important;
    }

    /* Course-kaart op mobiel: titel iets kleiner. */
    .woocommerce-account .woocommerce-MyAccount-content .course-title {
        font-size: 18px;
        line-height: 27px;
    }

    /* Links onderin de course-kaart op mobiel: onder elkaar, gecentreerd. */
    .woocommerce-account .woocommerce-MyAccount-content .course-links .links {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
}

/* Desktop (≥768px): elke nav-link krijgt in rusttoestand een subtiele witte
   achtergrond. Hover/active (lichtgroen) hebben hogere specificiteit (0,4,1) en
   blijven daardoor gewoon winnen. */
@media (min-width: 768px) {
    .page-default-surface .entry-content .woocommerce-MyAccount-navigation-link > a {
        background: rgba(255, 255, 255, 0.25);
    }
}

/* (De oude "1600px container"-overrides zijn verwijderd: de accountpagina
   gebruikt nu de normale container, zodat de 416px + 746px kolommen met
   space-between niet een enorme middenruimte krijgen.) */


button.collapse-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    font-family: inherit;
    text-align: left;
    text-decoration: underline;
    display: none;
    width: 100%;
}

.menu-collapse {
    color: white;
    display: none;
}

.text-end {
    text-align: end;
}

/* .item binnen de upsell-kolom — opnieuw op te zetten. (Oude styling met
   rand/padding/margin is verwijderd.) */

/* Label-div in .item (de plugin geeft die div geen class; targeten via de
   <strong> die erin zit). */
.upsell-order-form-col .item > div:has(> strong) {
    padding: 10px 16px;
    margin-bottom: 40px;
    border-radius: 10px;
    background-color: var(--lighter-blue, #EEF5FA);
    font-size: 14px;
    line-height: 24px;
}

/* Tekst niet vet (staat in een <strong>). */
.upsell-order-form-col .item > div > strong {
    font-weight: normal;
}

/* .item vult de resterende kolomhoogte, zodat de actie-rij eronder gepind kan
   worden (kaarten lijnen zo onderaan uit ook bij verschillende titel-lengtes). */
.upsell-order-form-col .item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Quantity-veld + "Buy now"-knop rechts uitlijnen, verticaal gecentreerd,
   met 10px ertussen. margin-top: auto pint de rij onderaan de kaart. */
.upsell-order-form-col .item > div:has(> .upsell-buy-button) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap; /* liever afbreken dan de knop platdrukken */
    gap: 10px;
    margin-top: auto;
}

.price-chip {
    display: inline-block;
    background-color: #febc44;
    color: white;
    padding: 0.25rem .5rem;
    border-radius: 3px;
}


.woocommerce form .password-input, .woocommerce-page form .password-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-direction: row;
}

.woocommerce form .password-input .woocommerce-Input {
    max-width: 445px !important;
}

.woocommerce-account .password-input .show-password-input {
    width: auto;
    position: static;
    right: 0;
    top: 50%;
    transform: translate(0, 0);
}

.woocommerce form .password-input .woocommerce-Input {
    max-width: 470px !important;
}

.form-row:has(> .woocommerce-form-login__submit) {
    display: flex;
    flex-direction: column;
    max-width: 470px;
    margin: 0 auto !important;
}

.woocommerce-form-login__submit {
    margin: 0 !important;
    float: none !important;
}

/* "Looking for the E-Learning login?"-blok onder het loginformulier: link-pill
   met groene bullet links en chevron rechts (zelfde stijl als de menu-pills). */
.section-before-login {
    position: relative;
    box-sizing: border-box; /* 354px incl. padding */
    width: 354px;
    max-width: 100%;
    margin: 42px auto 0;
    padding: 10px 14px;
    /* Rechts ruimte vrijhouden voor de chevron (12px breed + 14px marge),
       zodat lange linktekst er niet overheen valt. */
    padding-right: 40px;
    border-radius: 5px;
    background: #fff;
    transition: background-color 0.2s ease;
}

/* Hover op het hele blok: lichtgroene achtergrond + groene link/subtekst. */
.section-before-login:hover {
    background-color: var(--lighter-green, #DDF1E1);
    cursor: pointer;
}

/* Hele blok klikbaar: de bestaande link uitrekken over .section-before-login
   (die is position:relative). Zo gaan subtitel, chevron en padding ook naar
   de link. */
.section-before-login a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Chevron rechts, verticaal gecentreerd, 14px van de rand. */
.section-before-login::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 21px;
    background: url("data:image/svg+xml,%3Csvg width='12' height='21' viewBox='0 0 12 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.125 0.234375C1.35938 0 1.6875 0 1.92188 0.234375L11.7656 10.0312C11.9531 10.2656 11.9531 10.5938 11.7656 10.8281L1.92188 20.625C1.6875 20.8594 1.35938 20.8594 1.125 20.625L0.1875 19.7344C0 19.5 0 19.125 0.1875 18.9375L8.67188 10.4062L0.1875 1.92188C0 1.73438 0 1.35938 0.1875 1.125L1.125 0.234375Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* `.page-default-surface`-prefix erbij (0,3,1) verslaat de globale roze-link-
   regel `.page-default-surface .entry-content a` (0,2,1), die anders — zelfde
   specificiteit maar later in de cascade — wint. */
.page-default-surface .entry-content .section-before-login a {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
    transition: color 0.2s ease;
}

.page-default-surface .entry-content .section-before-login a:hover,
.page-default-surface .entry-content .section-before-login a:focus {
    text-decoration: none;
}

/* Hover op het hele blok: link + subtekst groen. */
.page-default-surface .entry-content .section-before-login:hover a {
    color: var(--green, #1FA238);
}

/* Groene bullet voor de link. */
.section-before-login a::before {
    content: "\2022";
    margin-right: 6px;
    font-size: 18px;
    color: var(--green, #1FA238);
}

/* Subtekst onder de link — uitgelijnd met de linktekst (dus na de bullet). */
.section-before-login__subtext {
    margin-top: 2px;
    margin-left: 12px; /* = bulletbreedte + gap, uitgelijnd met de linktekst */
    font-size: 14px;
    line-height: 26px;
    color: var(--font-color, #0A2636);
    text-decoration: none;
    transition: color 0.2s ease;
}

.section-before-login:hover .section-before-login__subtext {
    color: var(--green, #1FA238);
}

.all-courses-link {
    padding-top: 1rem;
    text-align: center;
}

/* My-accounty upsell form */

/* 2-column grid */
/* De upsell wordt door de plugin in een `.container` met 15px zij-padding
   gezet; die padding is hier niet nodig. Gericht neutraliseren (kan niet uit
   de plugin-code zonder die te wijzigen). */
.woocommerce-MyAccount-content .container:has(.my-account-upsell) {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    width: auto;
}

.upsell-order-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    /* Kaarten per rij even hoog (stretch). De lege ruimte bij een kortere
       kaart wordt opgevangen door de actie-rij onderaan te pinnen (zie .item),
       zodat prijs/quantity/knop netjes op één lijn staan. */
    align-items: stretch;
}


/* 1 grid col */
.upsell-order-form-col {
    padding: 30px 19px;
    grid-column: 1 span / auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* content strak bovenaan, geen uit-elkaar-duwen */

    background-color: #fff;
    border-radius: 15px;
}

.upsell-order-form-col h3 {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 15px;
}

/* 1 column on smaller screens */
@media screen and (max-width: 991px) {
    .upsell-order-form-col {
        grid-column: 2 span / auto;
    }
}

input[type="number"].upsell-quantity {
    box-sizing: border-box; /* 48px hoog incl. border + padding */
    height: 48px;
    width: 74px; /* verbreed zodat 20px padding + cijfer passen (was 50px) */
    padding: 13px 20px;
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 34px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/* Prijs (door my-account.js uit de h3-titel geknipt) linksonder in de
   actie-rij; margin-right auto duwt quantity + knop naar rechts. */
.upsell-order-form-col .upsell-price {
    margin-right: auto;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

button.upsell-buy-button {
    cursor: pointer;
    border: 0;
    outline: none;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
    display: inline-block;
    white-space: nowrap;

    padding: 15px 24px;
    border-radius: 40px;
    background-color: var(--pink, #E4087E);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Hover: donkerroze, zoals de overige knoppen in het account. */
button.upsell-buy-button:hover,
button.upsell-buy-button:focus {
    background-color: var(--dark-pink, #C20068);
    color: #fff;
}

/* De knop mag nooit krimpen: de tekst staat op nowrap, dus samenpersen betekent
   dat "Buy Now!" er letterlijk uit loopt. Hetzelfde geldt voor het aantal-veld. */
button.upsell-buy-button,
input[type="number"].upsell-quantity {
    flex: 0 0 auto;
}

/* Mobiel: prijs op een eigen regel, daaronder aantal + knop. De knop vult de
   resterende breedte, zodat hij goed aantikbaar is en de tekst ruim past. */
@media (max-width: 767px) {
    .upsell-order-form-col .item > div:has(> .upsell-buy-button) {
        row-gap: 14px;
    }

    .upsell-order-form-col .upsell-price {
        flex: 1 0 100%;
        margin-right: 0;
    }

    button.upsell-buy-button {
        flex: 1 1 auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.woocommerce form .username-input,
.woocommerce-page form .username-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-direction: row;
}

/* Inlogscherm (uitgelogde bezoeker op de accountpagina): titel gecentreerd.
   Ingelogd (body.logged-in) blijft de titel gewoon links boven het overzicht. */
.woocommerce-account:not(.logged-in) .tt-course-page__title {
    text-align: center;
}

/* Subtitle onder de titel gecentreerd. */
.woocommerce-account .login-subtitle {
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    font-weight: normal;
}

.woocommerce-account .login-title-wrapper {
    margin-bottom: 42px;
}

/* Loginformulier: 354px breed (incl. padding/border via border-box), gecentreerd. */
.woocommerce-account .woocommerce-form-login {
    box-sizing: border-box;
    width: 354px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    padding: 28px 24px 32px;
}

.woocommerce-account .woocommerce-form-login label {
    font-size: 14px;
    line-height: 20px;
    padding-left: 20px;
    margin-bottom: 4px;
    display: block;
}

/* Oog-icoon (toon wachtwoord) verbergen. */
.woocommerce-account .woocommerce-form-login .show-password-input {
    display: none;
}

/* "Remember me": eigen checkbox-iconen i.p.v. het native vakje.
   `label.`-prefix (0,2,1) verslaat de generieke label-regel hierboven. */
.woocommerce-account label.woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    line-height: 20px;
    margin-top: 8px;
    margin-bottom: 18px;
}

.woocommerce-account .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Crect x='1' y='1' width='16' height='16' rx='2' fill='white' stroke='%230A2636' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-account .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Crect x='1' y='1' width='16' height='16' rx='2' fill='%231FA238' stroke='%23DDF1E1' stroke-width='2'/%3E%3C/svg%3E");
}

/* Toetsenbord-focus zichtbaar houden nu de native styling weg is. */
.woocommerce-account .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox:focus-visible {
    outline: 2px solid var(--green, #1FA238);
    outline-offset: 2px;
}

/* "Lost your password?"-link onder het formulier. */
.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword {
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

/* Kopje bovenin het loginformulier. */
.woocommerce-account .login-form-title {
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 21px;
}

/* Veld-rijen in het loginformulier: krappere onderlinge afstand. */
.woocommerce-account .woocommerce-form-login p.woocommerce-form-row {
    margin-bottom: 10px;
}

/* Veld-wrappers (username-input / WC's password-input) mee op volle breedte,
   anders blijft het veld erbinnen alsnog smal. */
.woocommerce-account .woocommerce-form-login .username-input,
.woocommerce-account .woocommerce-form-login .password-input {
    width: 100%;
}

/* Invoervelden: volle breedte, pill-vorm; 48px hoog incl. border en padding
   (border-box). */
.woocommerce-account .woocommerce-form-login .woocommerce-Input--text,
.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="email"],
.woocommerce-account .woocommerce-form-login input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding-left: 20px;
    padding-right: 46px; /* ruimte voor het icoon rechts (18px + 20px marge) */
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 34px;
    /* Wit veld + account-icoon rechts (18px), 20px van de rand, verticaal centraal. */
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.71875 3.375C10.582 3.375 12.0938 4.88672 12.0938 6.75C12.0938 8.61328 10.582 10.125 8.71875 10.125C6.85547 10.125 5.34375 8.61328 5.34375 6.75C5.34375 4.88672 6.85547 3.375 8.71875 3.375ZM8.71875 8.4375C9.63281 8.4375 10.4062 7.69922 10.4062 6.75C10.4062 5.83594 9.63281 5.0625 8.71875 5.0625C7.76953 5.0625 7.03125 5.83594 7.03125 6.75C7.03125 7.69922 7.76953 8.4375 8.71875 8.4375ZM8.71875 0C13.5352 0 17.4375 3.90234 17.4375 8.71875C17.4375 13.5352 13.5352 17.4375 8.71875 17.4375C3.90234 17.4375 0 13.5352 0 8.71875C0 3.90234 3.90234 0 8.71875 0ZM8.71875 15.75C10.4414 15.75 12.0586 15.1172 13.2891 14.0625C12.7617 13.2539 11.8477 12.7266 10.8281 12.6914C10.0898 12.9023 9.38672 13.0078 8.71875 13.0078C8.01562 13.0078 7.3125 12.9023 6.57422 12.6914C5.55469 12.6914 4.64062 13.2539 4.11328 14.0625C5.34375 15.1172 6.96094 15.75 8.71875 15.75ZM14.4141 12.7969C15.2578 11.6719 15.75 10.2656 15.75 8.71875C15.75 4.85156 12.5859 1.6875 8.71875 1.6875C4.81641 1.6875 1.6875 4.85156 1.6875 8.71875C1.6875 10.2656 2.14453 11.6719 2.98828 12.7969C3.83203 11.707 5.16797 10.9688 6.67969 10.9688C7.03125 10.9688 7.59375 11.3203 8.71875 11.3203C9.80859 11.3203 10.3711 10.9688 10.7227 10.9688C12.2344 10.9688 13.5703 11.707 14.4141 12.7969Z' fill='%230A2636'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px 18px;
    transition: border-color 0.2s ease;
}

/* Hover/focus: blauwe rand. */
.woocommerce-account .woocommerce-form-login .woocommerce-Input--text:hover,
.woocommerce-account .woocommerce-form-login .woocommerce-Input--text:focus,
.woocommerce-account .woocommerce-form-login input[type="text"]:hover,
.woocommerce-account .woocommerce-form-login input[type="text"]:focus,
.woocommerce-account .woocommerce-form-login input[type="email"]:hover,
.woocommerce-account .woocommerce-form-login input[type="email"]:focus,
.woocommerce-account .woocommerce-form-login input[type="password"]:hover,
.woocommerce-account .woocommerce-form-login input[type="password"]:focus {
    border-color: var(--blue, #1A75BB);
}

/* ==========================================================================
   Adres-bewerkformulier (/my-account/edit-address/…) — invoervelden.
   Zelfde pill-stijl als het login-formulier hierboven, zonder icoon:
   volle breedte, 48px hoog incl. border + padding (border-box).
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .input-text,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 34px;
    background-color: #fff;
    color: var(--font-color, #0A2636);
    /* Inputs erven font-family niet; expliciet zetten anders valt 'ie terug op
       de browser-default (Arial). */
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    transition: border-color 0.2s ease;
}

/* Placeholder als "label": navy, hoofdletters (tekst blijft vertaalbaar). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .input-text::placeholder,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text::placeholder {
    color: var(--font-color, #0A2636);
    text-transform: uppercase;
    opacity: 1;
}

/* Hover/focus: blauwe rand (zoals login). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .input-text:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text:focus {
    border-color: var(--blue, #1A75BB);
}

/* Twee kolommen: tussenruimte 24px. De wrapper is flex met space-between, dus
   met flex-basis (50% - 12px) blijft er precies 24px tussen de kolommen. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-last {
    flex-basis: calc(50% - 12px);
    max-width: calc(50% - 12px);
}

/* Labels 21px inspringen (uitlijnen met de tekst in het veld). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row > label {
    padding-left: 21px;
}

/* De plugin toont de certificaat-beschrijving 2× (los boven voor- én
   achternaam). Die verbergen; vervangen door één groepskop (zie PHP). */
.woocommerce-account .woocommerce-MyAccount-content #billing_first_name_course_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_last_name_course_field {
    display: none;
}

/* Gedeelde groepskop boven het voor-/achternaam-paar: volle breedte. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .tt-fieldgroup-heading {
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 10px;
    padding-left: 21px;
    color: var(--font-color, #0A2636);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.42px;
}

/* --- Expliciete 2-koloms-layout van het adres-bewerkformulier ---------------
   De plugin bouwt het grid met "FILLER"-spacervelden; die verbergen we en we
   bepalen volgorde + breedte zelf via flex. Zo blijft de layout voorspelbaar en
   verdwijnen de zichtbare FILLER-teksten. */

/* Spacer-velden weg. */
.woocommerce-account .woocommerce-MyAccount-content #filler_field,
.woocommerce-account .woocommerce-MyAccount-content #filler2_field,
.woocommerce-account .woocommerce-MyAccount-content #filler3_field {
    display: none;
}

/* Labels weg waar de placeholder het veld al labelt (nette uitlijning). */
.woocommerce-account .woocommerce-MyAccount-content #billing_country_of_origin_field > label,
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_field > label,
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_course_field > label {
    display: none;
}

/* Volgorde van de velden. */
.woocommerce-account .woocommerce-MyAccount-content .tt-fieldgroup-heading { order: 10; }
.woocommerce-account .woocommerce-MyAccount-content #billing_first_name_field { order: 20; }
.woocommerce-account .woocommerce-MyAccount-content #billing_last_name_field { order: 30; }
.woocommerce-account .woocommerce-MyAccount-content #billing_country_of_origin_field { order: 40; }
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_field { order: 50; }
.woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field { order: 60; }
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_course_field { order: 70; }
.woocommerce-account .woocommerce-MyAccount-content #billing_email_field { order: 80; }
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field { order: 90; }
.woocommerce-account .woocommerce-MyAccount-content #billing_address_1_field { order: 100; }
.woocommerce-account .woocommerce-MyAccount-content #billing_address_2_field { order: 110; }
.woocommerce-account .woocommerce-MyAccount-content #billing_postcode_field { order: 120; }
.woocommerce-account .woocommerce-MyAccount-content #billing_city_field { order: 130; }
.woocommerce-account .woocommerce-MyAccount-content #billing_country_field { order: 140; }
.woocommerce-account .woocommerce-MyAccount-content #billing_age_field { order: 900; }

/* "E-mail (Will be used…)"-tekst: eigen regel boven het whatsapp/email-paar,
   maar de tekst ingesprongen tot de rechter kolom zodat 'ie precies boven het
   e-mailveld uitkomt. */
.woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding-left: calc(50% + 33px);
    color: var(--font-color, #0A2636);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
    color: var(--font-color, #0A2636);
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field {
        padding-left: 21px;
    }
}

/* 2-koloms velden met 24px gap (adresvelden hadden nog de brede plugin-gap). */
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_course_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_email_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_address_1_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_address_2_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_postcode_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_city_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_country_field,
.woocommerce-account .woocommerce-MyAccount-content #billing_age_field {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
}

/* --- WhatsApp-consent: korte titel + YES/NO links, de lange vraag rechts.
   Overgenomen van de checkout (assets/css/checkout.css #billing_phone_use_field). */
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > label {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > .woocommerce-input-wrapper {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > .description {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
    padding-left: 20px;
    color: var(--font-color, #0A2636);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field input[type="radio"],
.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    margin: 0 11px 0 0;
    padding: 0;
    border: 0;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='7.5' fill='none' stroke='%230A2636' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field input[type="radio"]:checked,
.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field input[type="radio"]:checked {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='7.5' fill='%231FA238' stroke='%23DDF1E1' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field label.radio,
.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field label.radio {
    margin: 0 32px 0 0 !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

/* Adresblok (street/house/zip): labels weg — de placeholder labelt het veld.
   Street werd bovendien ingekort door z'n inline-label + een max-width op de
   input; wrapper op block + input op volle kolombreedte lost dat op. */
.woocommerce-account .woocommerce-MyAccount-content #billing_address_1_field > label,
.woocommerce-account .woocommerce-MyAccount-content #billing_address_2_field > label,
.woocommerce-account .woocommerce-MyAccount-content #billing_postcode_field > label,
.woocommerce-account .woocommerce-MyAccount-content #billing_city_field > label {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_address_1_field > .woocommerce-input-wrapper,
.woocommerce-account .woocommerce-MyAccount-content #billing_address_2_field > .woocommerce-input-wrapper,
.woocommerce-account .woocommerce-MyAccount-content #billing_postcode_field > .woocommerce-input-wrapper,
.woocommerce-account .woocommerce-MyAccount-content #billing_city_field > .woocommerce-input-wrapper {
    display: block;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_address_1_field .input-text,
.woocommerce-account .woocommerce-MyAccount-content #billing_address_2_field .input-text,
.woocommerce-account .woocommerce-MyAccount-content #billing_postcode_field .input-text,
.woocommerce-account .woocommerce-MyAccount-content #billing_city_field .input-text {
    max-width: 100%;
}

/* Formulierkop op het adres-bewerkformulier: meer ruimte eronder dan de
   overige paginatitels. De h2 staat direct vóór .woocommerce-address-fields. */
.woocommerce-account .woocommerce-MyAccount-content .tt-orders-title:has(+ .woocommerce-address-fields) {
    margin-bottom: 34px;
}

/* Form-rijen in dít formulier 16px onder (i.p.v. de globale 15px !important). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
    margin-bottom: 16px !important;
}

/* WhatsApp-consent-rij: 22px ruimte boven én onder. In flex bepaalt de
   margin-bottom van elke rij de tussenruimte, dus: de rij erboven (whatsapp +
   e-mail) 22px onder = 22px boven de consent; en de consent zelf 22px onder. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_phone_course_field,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_email_field,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_phone_use_field {
    margin-bottom: 22px !important;
}

/* 30px ruimte boven de Save-knop: de laatste veldrij (country + age) eronder. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_country_field,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_age_field {
    margin-bottom: 30px !important;
}

/* ≤991px: geen 2 kolommen meer op deze pagina — alle velden onder elkaar.
   Sommige velden hebben ID-gebaseerde breedtes, dus !important om die te
   overrulen. */
@media (max-width: 991px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* In 1 kolom moet de "E-mail (Will be used…)"-tekst direct boven het
       e-mailveld staan (tussen whatsapp order 70 en e-mail order 80), niet
       boven whatsapp. */
    .woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field {
        order: 75;
    }

    /* Geen inspring meer: labels, groepskop, e-mail-helper en het consent-veld
       (label, radios en vraag) staan flush links. */
    .woocommerce-account .woocommerce-MyAccount-content .tt-fieldgroup-heading,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row > label,
    .woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field,
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > label,
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > .woocommerce-input-wrapper,
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > .description {
        padding-left: 0 !important;
    }

    /* Labels/kop 14px onder op kleinere schermen. */
    .woocommerce-account .woocommerce-MyAccount-content .tt-fieldgroup-heading,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row > label,
    .woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field,
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > label {
        margin-bottom: 14px !important;
    }

    /* E-mail-helper fungeert als label van het e-mailveld: 7px eronder (niet
       dubbel via label én parent) en een normale 16px erboven i.p.v. 22px. */
    .woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field {
        margin-bottom: 7px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content #billing_email_course_field label {
        margin-bottom: 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_phone_course_field {
        margin-bottom: 16px !important;
    }

    /* WhatsApp-consent: label, radios en vraag onder elkaar i.p.v. 2 kolommen.
       De grid-plaatsing moet gereset (anders overlapt de vraag-box de radios,
       waardoor een margin nauwelijks zichtbaar is). */
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field {
        display: block;
    }

    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > label,
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > .woocommerce-input-wrapper,
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > .description {
        grid-row: auto;
        grid-column: auto;
    }

    /* Consent-label: het is een inline <label>, waarop margin-bottom niet werkt.
       Op block zetten zodat de 7px ruimte tot de radios wél verschijnt. */
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > label {
        display: block;
        margin-bottom: 7px !important;
    }

    /* 16px ruimte tussen de radios en de uitleg. */
    .woocommerce-account .woocommerce-MyAccount-content #billing_phone_use_field > .woocommerce-input-wrapper {
        margin-bottom: 16px;
    }

    /* Save-knop volle breedte met gecentreerde tekst. */
    .woocommerce-account .woocommerce-MyAccount-content button[name="save_address"] {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Ruimte onder country/age (boven de knop) op kleinere schermen: 25px. */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_country_field,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_age_field {
        margin-bottom: 25px !important;
    }
}

/* ==========================================================================
   Account-details (/my-account/edit-account/) — de vier bovenste velden.
   Ontwerp: 2 velden per rij, geen labels (placeholder labelt het veld) en de
   uitleg onder het display-name-veld. De pill-stijl van de velden zelf deelt
   deze pagina met het adresformulier (zie hierboven).
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

/* WooCommerce zet display-name en e-mail op volle breedte; in het ontwerp staan
   ze naast elkaar. Alle vier de velden dus half. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row {
    box-sizing: border-box;
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
}

/* De float-clears van WooCommerce breken de flex-rijen. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .clear {
    display: none;
}

/* Alles ná de vier velden (wachtwoordblok, plugin-velden, knop) weer volle
   breedte. Let op: de vier velden hebben zowel .woocommerce-form-row als
   .form-row, dus die laatste hier expliciet uitsluiten. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row:not(.woocommerce-form-row),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .thwcfe-checkout-section,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > p:not(.woocommerce-form-row) {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Labels weg: de placeholder labelt het veld. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row > label {
    display: none;
}

/* Uitleg onder het display-name-veld. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row > span,
.woocommerce-account .woocommerce-MyAccount-content #account_display_name_description {
    display: block;
    margin-top: 12px;
    padding-left: 21px;
    color: var(--font-color, #0A2636);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row > span em {
    font-style: normal;
}

/* --- "The participant is": in de HTML staat dit blok ná het wachtwoordblok,
   in het ontwerp ervóór. Via flex-order verplaatsen (de vier velden houden
   order 0, dus die blijven bovenaan). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > #billing_participant_is_field {
    order: 1;
    /* 30px ruimte boven: de rij erboven heeft al 15px margin-bottom (marges
       vallen in flex niet samen), dus hier de resterende 15px. De eigen
       margin-bottom komt van de globale .form-row-regel (15px !important). */
    margin-top: 15px;
    padding-left: 21px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset {
    order: 2;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > p:has(button[name="save_account_details"]) {
    order: 3;
    /* 36px ruimte boven de knop: het laatste wachtwoordveld heeft al 15px
       margin-bottom, dus hier de resterende 21px. */
    margin-top: 21px;
}

/* Label boven de opties (stond inline ervóór). */
.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field > label {
    display: block;
    margin: 0 0 7px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
}

/* Opties op één rij, netjes uitgelijnd (mag wrappen op smalle schermen).
   row-gap geldt alleen tússen flex-regels, dus die 14px verschijnt pas zodra
   er daadwerkelijk een optie naar een volgende regel valt. */
.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field > .woocommerce-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 14px;
}

/* Radio en label zijn losse flex-items, waardoor een bolletje van z'n tekst
   kon losbreken bij het afbreken van de regel (zichtbaar rond 768px). Daarom
   tekenen we het bolletje op het label zelf (::before): elke optie is zo één
   element en wrapt altijd als geheel. De echte radio blijft in de DOM (en
   focusbaar) voor toegankelijkheid en formulierafhandeling. */
.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field label.radio::before {
    content: "";
    /* inline-block (niet inline): anders gelden width/height niet en is het
       bolletje onzichtbaar. Werkt ongeacht de display van het label zelf. */
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 17px;
    margin-right: 11px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='7.5' fill='none' stroke='%230A2636' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field input[type="radio"]:checked + label.radio::before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='7.5' fill='%231FA238' stroke='%23DDF1E1' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Toetsenbordfocus zichtbaar houden nu de input zelf onzichtbaar is. */
.woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field input[type="radio"]:focus-visible + label.radio::before {
    outline: 2px solid var(--blue, #1A75BB);
    outline-offset: 2px;
}

/* --- Wachtwoord wijzigen: het is een <fieldset> met <legend>, wat standaard
   een kaderlijn en inspring geeft. In het ontwerp is het een gewoon blok met
   een kop erboven en links uitgelijnde velden. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset {
    /* 36px ruimte boven: het blok erboven heeft al 15px margin-bottom, dus
       hier de resterende 21px. */
    margin: 21px 0 0;
    padding: 0;
    border: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset > legend {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    color: var(--font-color, #0A2636);
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
}

/* Labels boven de wachtwoordvelden: zelfde inspring als elders. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset .form-row > label {
    display: block;
    margin-bottom: 7px;
    padding-left: 21px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
}

/* De .password-input-wrapper wordt globaal gecentreerd en op max 470px gezet
   (voor het login-formulier). Hier links uitlijnen en volle breedte. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .password-input {
    justify-content: flex-start;
    margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .password-input {
    position: relative;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .password-input .woocommerce-Input {
    width: 100%;
    max-width: 100% !important;
    /* 20px marge + 21px icoon + 10px ruimte, zodat tekst niet onder het oog loopt. */
    padding-right: 51px;
}

/* Toon/verberg-wachtwoord als oog-icoon ín het veld (20px van rechts, verticaal
   gecentreerd) i.p.v. de knop ernaast. Zelfde markup en JS — alleen styling. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .password-input .show-password-input {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 21px;
    height: 14px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: url("data:image/svg+xml,%3Csvg width='21' height='14' viewBox='0 0 21 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.125 2.8125V2.84766C12.3047 2.84766 14.0625 4.60547 14.0625 6.75C14.0625 8.92969 12.3047 10.6875 10.125 10.6875C7.94531 10.6875 6.1875 8.92969 6.1875 6.75C6.1875 6.36328 6.25781 6.01172 6.36328 5.66016C6.60938 5.83594 6.96094 5.90625 7.3125 5.90625C8.36719 5.90625 9.28125 5.02734 9.28125 3.9375C9.24609 3.62109 9.17578 3.26953 9 2.98828C9.35156 2.88281 9.73828 2.84766 10.125 2.8125ZM20.1094 6.25781C20.1797 6.39844 20.2148 6.57422 20.2148 6.78516C20.2148 6.96094 20.1797 7.13672 20.1094 7.27734C18.2109 11.0039 14.4141 13.5 10.125 13.5C5.80078 13.5 2.00391 11.0039 0.105469 7.27734C0.0351562 7.13672 0 6.96094 0 6.75C0 6.57422 0.0351562 6.39844 0.105469 6.25781C2.00391 2.53125 5.80078 0 10.125 0C14.4141 0 18.2109 2.53125 20.1094 6.25781ZM10.125 11.8125C13.5703 11.8125 16.7695 9.87891 18.457 6.75C16.7695 3.62109 13.5703 1.6875 10.125 1.6875C6.64453 1.6875 3.44531 3.62109 1.75781 6.75C3.44531 9.87891 6.64453 11.8125 10.125 11.8125Z' fill='%230A2636'/%3E%3C/svg%3E") no-repeat center / 21px 14px;
    cursor: pointer;
}

/* Wachtwoord zichtbaar (WooCommerce zet dan .display-password): doorgestreept
   oog. Zelfde iconenset, vierkant kader zodat de streep past — breedte blijft
   21px, dus de veldpadding hoeft niet mee te veranderen. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .password-input .show-password-input.display-password {
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M19.2139 16.2842C19.3018 16.3721 19.3896 16.5186 19.3896 16.665C19.3896 16.7822 19.3311 16.8701 19.2725 16.958L18.9795 17.3096C18.8916 17.4268 18.7744 17.4854 18.5986 17.4854C18.5107 17.4854 18.3936 17.4561 18.335 17.3975L0.81543 3.68652C0.698242 3.62793 0.610352 3.48145 0.610352 3.33496C0.610352 3.21777 0.668945 3.12988 0.727539 3.04199L1.02051 2.66113C1.1084 2.57324 1.22559 2.51465 1.40137 2.51465C1.48926 2.51465 1.60645 2.54395 1.69434 2.60254L19.2139 16.2842ZM9.31152 6.79199C9.5459 6.7334 9.78027 6.7334 10.0146 6.7041C11.7725 6.7041 13.208 8.11035 13.2666 9.86816L9.31152 6.79199ZM10.6885 13.208C10.4541 13.2666 10.2197 13.2666 10.0146 13.2666C8.22754 13.2666 6.79199 11.8896 6.7334 10.1318L10.6885 13.208ZM10.0146 5.7666C9.42871 5.7666 8.84277 5.85449 8.28613 6.00098L6.93848 4.91699C7.90527 4.56543 8.93066 4.36035 10.0146 4.36035C13.5889 4.36035 16.7529 6.46973 18.335 9.5752C18.3936 9.69238 18.4521 9.83887 18.4521 10.0146C18.4521 10.1611 18.3936 10.3076 18.335 10.4248C17.9248 11.2451 17.3975 11.9775 16.7822 12.6221L15.6689 11.7725C16.1963 11.2451 16.6064 10.6592 16.958 9.98535C15.5518 7.37793 12.8857 5.7666 10.0146 5.7666ZM10.0146 14.2041C10.5713 14.2041 11.1572 14.1455 11.7139 13.999L13.0615 15.083C12.0947 15.4053 11.0693 15.6104 10.0146 15.6104C6.41113 15.6104 3.24707 13.5303 1.66504 10.4248C1.60645 10.3076 1.57715 10.1611 1.57715 9.98535C1.57715 9.83887 1.60645 9.69238 1.66504 9.5752C2.0752 8.75488 2.60254 8.02246 3.21777 7.37793L4.33105 8.22754C3.80371 8.75488 3.39355 9.34082 3.04199 9.98535C4.44824 12.5928 7.11426 14.2041 10.0146 14.2041Z' fill='%230A2636'/%3E%3C/svg%3E");
    background-size: 21px 21px;
}

/* Eventuele icoon-pseudo's van thema/WooCommerce uitzetten. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .password-input .show-password-input::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .password-input .show-password-input::after {
    content: none;
}

/* ≤991px: één kolom (zoals het adresformulier). */
@media (max-width: 991px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row > span,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset .form-row > label {
        padding-left: 0;
    }
}

/* Save-knop: roze, bij hover donkerder roze. */
.woocommerce-account .woocommerce-MyAccount-content button[name="save_address"],
.woocommerce-account .woocommerce-MyAccount-content button[name="save_account_details"] {
    background-color: var(--pink, #E4087E);
    background-image: none;
    border-color: var(--pink, #E4087E);
    color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content button[name="save_address"]:hover,
.woocommerce-account .woocommerce-MyAccount-content button[name="save_address"]:focus,
.woocommerce-account .woocommerce-MyAccount-content button[name="save_account_details"]:hover,
.woocommerce-account .woocommerce-MyAccount-content button[name="save_account_details"]:focus {
    background-color: var(--dark-pink, #C20068);
    border-color: var(--dark-pink, #C20068);
    color: #fff;
}

/* Country- en Age-label weg (onderaan het blok). */
.woocommerce-account .woocommerce-MyAccount-content #billing_country_field > label,
.woocommerce-account .woocommerce-MyAccount-content #billing_age_field > label {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_age_field > .woocommerce-input-wrapper {
    display: block;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_age_field .input-text {
    max-width: 100%;
}

/* --- Select2-dropdowns (Country, State, Country of origin) in dezelfde pill-
   stijl als de inputs. Overgenomen van de checkout (assets/css/checkout.css). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single {
    box-sizing: border-box;
    height: 48px;
    padding: 0 20px;
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 34px;
    background: #fff;
    display: flex;
    align-items: center;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection__rendered {
    padding: 0;
    color: var(--font-color, #0A2636);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection__placeholder {
    color: var(--font-color, #0A2636);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--blue, #1A75BB);
    outline: none;
}

/* Select2-pijl vervangen door dezelfde navy chevron. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection__arrow b {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection__arrow {
    top: 0;
    bottom: 0;
    right: 16px;
    width: 16px;
    height: auto;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%230A2636' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

/* --- Icoontjes rechts in telefoon-, e-mail- en whatsapp-veld: verticaal
   gecentreerd, 18px van rechts. padding-right houdt de tekst vrij van het icoon. */
.woocommerce-account .woocommerce-MyAccount-content #billing_phone,
.woocommerce-account .woocommerce-MyAccount-content #billing_phone_course,
.woocommerce-account .woocommerce-MyAccount-content #billing_email {
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0156 11.6016C17.5781 11.8477 18 12.4453 18 13.1133C18 13.2188 17.9648 13.3242 17.9297 13.4648L17.1914 16.7695C17.0156 17.4727 16.3828 18 15.6094 18C6.99609 18.0352 0 11.0391 0 2.39062C0 1.61719 0.527344 0.984375 1.23047 0.808594L4.53516 0.0703125C4.67578 0.0351562 4.78125 0 4.88672 0C5.55469 0 6.15234 0.421875 6.39844 0.984375L7.91016 4.57031C7.98047 4.74609 8.05078 4.95703 8.05078 5.20312C8.05078 5.69531 7.80469 6.15234 7.45312 6.43359L6.04688 7.59375C7.06641 9.45703 8.54297 10.9336 10.4062 11.9531L11.5664 10.5469C11.8477 10.1953 12.3047 9.94922 12.7969 9.94922C13.043 9.94922 13.2539 10.0195 13.4297 10.0898L17.0156 11.6016ZM15.5391 16.3477L16.2773 13.1484L12.832 11.6719L10.8633 14.0625C7.38281 12.4102 5.58984 10.6172 3.9375 7.13672L6.32812 5.16797L4.85156 1.72266L1.6875 2.46094C1.72266 10.0898 7.91016 16.3125 15.5391 16.3477Z' fill='%230A2636'/%3E%3C/svg%3E");
    background-size: 18px 19px;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_email {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.3125 0C17.2266 0 18 0.773438 18 1.6875V11.8125C18 12.7617 17.2266 13.5 16.3125 13.5H1.6875C0.738281 13.5 0 12.7617 0 11.8125V1.6875C0 0.773438 0.738281 0 1.6875 0H16.3125ZM16.3125 1.6875H1.6875V3.12891C2.46094 3.79688 3.72656 4.78125 6.39844 6.89062C6.99609 7.34766 8.15625 8.47266 9 8.4375C9.80859 8.47266 10.9688 7.34766 11.5664 6.89062C14.2383 4.78125 15.5039 3.79688 16.3125 3.12891V1.6875ZM1.6875 11.8125H16.3125V5.30859C15.5039 5.94141 14.3438 6.85547 12.6211 8.22656C11.8125 8.82422 10.4766 10.1602 9 10.125C7.48828 10.1602 6.11719 8.82422 5.34375 8.22656C3.62109 6.85547 2.46094 5.94141 1.6875 5.30859V11.8125Z' fill='%230A2636'/%3E%3C/svg%3E");
    background-size: 18px 14px;
}

.woocommerce-account .woocommerce-MyAccount-content #billing_phone_course {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='18' viewBox='0 0 12 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.75 14.625C6.75 15.2578 6.22266 15.75 5.625 15.75C4.99219 15.75 4.5 15.2578 4.5 14.625C4.5 14.0273 4.99219 13.5 5.625 13.5C6.22266 13.5 6.75 14.0273 6.75 14.625ZM11.25 1.6875V16.3125C11.25 17.2617 10.4766 18 9.5625 18H1.6875C0.738281 18 0 17.2617 0 16.3125V1.6875C0 0.773438 0.738281 0 1.6875 0H9.5625C10.4766 0 11.25 0.773438 11.25 1.6875ZM9.5625 16.1016V1.89844C9.5625 1.79297 9.45703 1.6875 9.35156 1.6875H1.89844C1.75781 1.6875 1.6875 1.79297 1.6875 1.89844V16.1016C1.6875 16.2422 1.75781 16.3125 1.89844 16.3125H9.35156C9.45703 16.3125 9.5625 16.2422 9.5625 16.1016Z' fill='%230A2636'/%3E%3C/svg%3E");
    background-size: 12px 18px;
}

/* ==========================================================================
   My Courses (endpoint /my-account/my-courses/)
   Markup komt uit de plugin (rtm-academia-extensions), classless waar nodig
   met :has() aangepakt. Alleen styling hier — geen plugin-edits.
   ========================================================================== */

/* Losse cursus-kaart. */
.woocommerce-account .woocommerce-MyAccount-content .my-course {
    box-sizing: border-box;
    padding: 29px 24px;
    border: none; /* plugin-CSS zet hier een randje omheen */
    border-radius: 15px;
    background-color: #fff;
}

/* Ruimte tussen de kaarten. */
.woocommerce-account .woocommerce-MyAccount-content .my-course + .my-course {
    margin-top: 24px;
}

/* Titelregel: titel links, Passed-pill rechts, verticaal gecentreerd. */
.woocommerce-account .woocommerce-MyAccount-content .course-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

/* "Passed"-label als groene pill rechts van de titel. */
.woocommerce-account .woocommerce-MyAccount-content .course-passed {
    flex: 0 0 auto;
    padding: 1px 18px;
    border-radius: 80px;
    background-color: var(--lighter-green, #DDF1E1);
    color: var(--green, #1FA238);
    font-size: 14px;
    line-height: 29px;
    white-space: nowrap;
}

/* Info-blok (rooster + e-learn-modules) als lichtblauw kader. */
.woocommerce-account .woocommerce-MyAccount-content .course-desc {
    margin: 0 0 17px;
    padding: 10px 16px;
    border-radius: 10px;
    background-color: var(--lighter-blue, #EEF5FA);
    font-size: 16px;
    line-height: 26px;
}

/* Knoppenrij onderaan: links verdeeld met ruimte ertussen. */
.woocommerce-account .woocommerce-MyAccount-content .course-links .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

/* Tekstlinks (Download certificate/advice, More about this course).
   De plugin-CSS (my-courses.css) geeft .link een rasterrandje en laat ze met
   flex: 1 uitrekken tot gelijke breedte — dat hoort niet bij dit ontwerp, dus
   hier expliciet terugzetten naar losse tekstlinks. */
.woocommerce-account .woocommerce-MyAccount-content .course-links .links a.link {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    color: var(--font-color, #0A2636);
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .course-links .links a.link:hover,
.woocommerce-account .woocommerce-MyAccount-content .course-links .links a.link:focus {
    color: var(--pink, #E4087E);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Cursus annuleren ("Cancel Order") — markup + gedrag komen uit de plugin
   (rtm-academia-extensions, MyAccount::renderSingleCourse + my-courses.js).
   Hier alleen onze eigen styling; de plugin-CSS wordt hiermee overschreven.
   -------------------------------------------------------------------------- */

/* Statuspill (upcoming / current / canceled) — zelfde vorm en maat als de
   "Passed"-pill, alleen blauw. De modifier-klasses komen uit my-account.js:
   de plugin geeft alle drie dezelfde class, dus CSS kan er niet op selecteren. */
.woocommerce-account .woocommerce-MyAccount-content .course-status {
    display: inline-block;
    padding: 1px 18px;
    /* De plugin-CSS geeft deze pill een rand rechts en onder — die hoort hier
       niet, de "Passed"-pill heeft er ook geen. */
    border: 0;
    box-shadow: none;
    border-radius: 80px;
    background-color: var(--light-blue, #DDEAF5);
    color: var(--dark-blue, #005FA5);
    font-size: 14px;
    line-height: 29px;
    text-transform: capitalize;
    white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-content .course-status.is-current {
    background-color: var(--lighter-green, #DDF1E1);
    color: var(--green, #1FA238);
}

.woocommerce-account .woocommerce-MyAccount-content .course-status.is-canceled {
    background-color: var(--light-red, #FBE3E3);
    color: var(--red, #D42121);
}

/* De plugin rendert de pill in een eigen .course-links vóór de titel. my-account.js
   verplaatst hem naar binnen in .course-title, zodat hij exact zo uitlijnt als de
   "Passed"-pill — ook wanneer de titel over twee regels loopt. Daar hoort hij
   zich als gewoon flex-item te gedragen. */
.woocommerce-account .woocommerce-MyAccount-content .course-title > .course-status {
    flex: 0 0 auto;
}

/* Fallback zolang die verplaatsing nog niet is gebeurd (of als JS uitvalt):
   rechtsboven, uitgelijnd op de eerste titelregel. De `:has(> …)` zorgt dat
   deze regels vanzelf stoppen zodra de pill in de titel zit. */
.woocommerce-account .woocommerce-MyAccount-content .my-course {
    position: relative;
}

.woocommerce-account .woocommerce-MyAccount-content .my-course > .course-links:has(> .course-status) {
    position: absolute;
    top: 33px;   /* padding-top van de kaart (29) + margin-top van de titel (4) */
    right: 24px; /* = padding-right van de kaart */
    margin: 0;
    line-height: 29px;
}

/* Titel houdt dan ruimte vrij zodat een lange naam niet onder de pill loopt.
   box-sizing expliciet: zonder border-box telt deze padding bij de breedte op
   en steekt de titel juist búiten de kaart. */
.woocommerce-account .woocommerce-MyAccount-content .my-course:has(> .course-links > .course-status) .course-title {
    box-sizing: border-box;
    padding-right: 130px;
}

@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content .my-course > .course-links:has(> .course-status) {
        top: 24px;
        right: 20px;
    }

    .woocommerce-account .woocommerce-MyAccount-content .my-course:has(> .course-links > .course-status) .course-title {
        padding-right: 110px;
    }
}

/* Trigger-knop: past zich aan de rij tekstlinks aan, maar dan in rood.
   !important omdat de plugin-JS bij het openen inline `display: block` op
   deze knop zet, wat de knoppenrij anders uit elkaar trekt. */
.woocommerce-account .woocommerce-MyAccount-content .course-links .links .cancel-button {
    display: inline-flex !important;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    color: var(--red, #D42121);
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .course-links .links .cancel-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .course-links .links .cancel-button:focus {
    background: none;
    color: var(--dark-red, #A81616);
    text-decoration: underline;
}

/* Overlay: vult het hele scherm.
   my-account.js verplaatst deze modal naar <body>. Dat is nodig omdat .container
   een stacking context opent (position: relative + z-index: 1): bínnen die
   container is z-index 100000 zinloos, want de container zelf ligt op laag 1 en
   de sticky header op 20–35. Vandaar ook de selectors zonder
   .woocommerce-MyAccount-content — de modal hangt straks niet meer daarbinnen.
   De z-index moet boven de WhatsApp-knop (99999999) uitkomen. */
.woocommerce-account .cancel-order-modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000000;
    box-sizing: border-box;
    padding: 24px;
    overflow-y: auto;
    background-color: rgba(10, 38, 54, 0.6);
}

/* De plugin-JS zet bij openen inline `display: block` (en bij sluiten
   `display: none`). Alleen in die eerste situatie maken we er een flexbox van,
   zodat de kaart midden op het scherm staat. Via de attribuut-selector blijft
   sluiten gewoon werken — anders zou `!important` de modal altijd tonen. */
.woocommerce-account .cancel-order-modal[style*="block"] {
    display: flex !important;
}

.woocommerce-account .cancel-order-modal .modal-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 540px;
    /* margin: auto in een flexbox centreert horizontaal én verticaal, en laat
       de kaart bij weinig schermhoogte gewoon scrollen. */
    margin: auto;
    padding: 32px 40px 36px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 20px 50px rgba(10, 38, 54, 0.2);
    /* Elders wordt hier left: 50% op gezet; dat schoof de kaart naar rechts. */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
}

.woocommerce-account .cancel-order-modal .modal-content .close {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    color: var(--font-color, #0A2636);
    cursor: pointer;
    transition: color 0.2s ease;
}

.woocommerce-account .cancel-order-modal .modal-content .close:hover,
.woocommerce-account .cancel-order-modal .modal-content .close:focus {
    color: var(--pink, #E4087E);
}

/* font-family expliciet: de modal hangt aan <body> en pakt daar niet meer de
   koptypografie van de accountcontainer op (h2 zou anders Oswald worden).
   width/max-width overrulen de `width: 95%` uit de plugin-CSS. */
.woocommerce-account .cancel-order-modal .modal-content .title {
    width: auto;
    max-width: none;
    margin: 0 30px 14px 0;
    font-family: inherit;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

.woocommerce-account .cancel-order-modal .modal-content .description {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--font-color, #0A2636);
}

/* width: auto overruled de `width: 15vw` uit de plugin-CSS — die maakte de
   knoppenrij smaller dan de knoppen zelf. */
.woocommerce-account .cancel-order-modal .modal-content .buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    gap: 12px 16px;
    margin-top: 26px;
}

/* De plugin zet hier flex: 1 en width: max-content op; daardoor werden de
   knoppen uitgerekt tot de rij-breedte en brak het label af. */
.woocommerce-account .cancel-order-modal .modal-content .buttons button {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
    padding: 13px 22px;
    border: 2px solid transparent;
    border-radius: 40px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* Bevestigen = destructief: gevuld rood. */
.woocommerce-account .cancel-order-modal .modal-content .buttons button.accept {
    border-color: var(--red, #D42121);
    background-color: var(--red, #D42121);
    color: #fff;
}

.woocommerce-account .cancel-order-modal .modal-content .buttons button.accept:hover,
.woocommerce-account .cancel-order-modal .modal-content .buttons button.accept:focus {
    border-color: var(--dark-red, #A81616);
    background-color: var(--dark-red, #A81616);
    color: #fff;
}

/* Annuleren = veilige keuze: outline-pill, zoals de overige knoppen. */
.woocommerce-account .cancel-order-modal .modal-content .buttons button.decline {
    border-color: var(--font-color, #0A2636);
    background-color: transparent;
    color: var(--font-color, #0A2636);
}

.woocommerce-account .cancel-order-modal .modal-content .buttons button.decline:hover,
.woocommerce-account .cancel-order-modal .modal-content .buttons button.decline:focus {
    border-color: var(--dark-pink, #C20068);
    background-color: var(--dark-pink, #C20068);
    color: #fff;
}

/* Mobiel: modal krapper en knoppen onder elkaar op volle breedte. */
@media (max-width: 767px) {
    .woocommerce-account .cancel-order-modal {
        padding: 16px;
    }

    .woocommerce-account .cancel-order-modal .modal-content {
        padding: 28px 20px 30px;
    }

    .woocommerce-account .cancel-order-modal .modal-content .buttons button {
        flex: 1 0 100%;
        width: 100%;
    }
}

/* ==========================================================================
   "Courses coming up for you" (dashboard) — theme-side kaarten.
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-content .tt-next-courses {
    margin-bottom: 60px;
}

.woocommerce-account .woocommerce-MyAccount-content .tt-next-course {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start; /* linkerzijde bovenaan, niet verticaal centreren */
    justify-content: space-between;
    gap: 16px;
    padding: 29px 20px;
    border-radius: 15px;
    background-color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content .tt-next-course + .tt-next-course {
    margin-top: 24px;
}

.tt-next-course__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Badge + spots op één regel; 20px onder deze header-regel tot de titel.
   Wrapt naar 2 regels zodra het niet meer naast elkaar past. */
.tt-next-course__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 44px;
    margin-bottom: 20px;
}

.tt-next-course__level {
    display: inline-block;
    padding: 1px 18px;
    border-radius: 80px;
    background-color: var(--light-orange, #FEF3E0);
    color: var(--orange, #F3950B);
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    white-space: nowrap;
}

.tt-next-course__spots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 26px;
    color: var(--font-color, #0A2636);
    white-space: nowrap;
}

/* Statuscirkel: 32px buiten (lichte ringkleur) + 20px binnen (volle kleur). */
.tt-next-course__spots-dot {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--grey, #DADEE1);
}

.tt-next-course__spots-dot::before {
    content: "";
    position: absolute;
    inset: 6px; /* (32 - 20) / 2 */
    border-radius: 50%;
    background-color: var(--font-color, #0A2636);
}

/* Kleuren per status (zoals cursusoverzicht). */
.tt-next-course__spots-dot--available {
    background-color: var(--light-green, #DCF1E0);
}
.tt-next-course__spots-dot--available::before {
    background-color: var(--green, #1FA238);
}

.tt-next-course__spots-dot--limited {
    background-color: var(--light-orange, #FEF3E0);
}
.tt-next-course__spots-dot--limited::before {
    background-color: var(--orange, #F3950B);
}

.tt-next-course__spots-dot--full {
    background-color: var(--light-pink, #FBDAEC);
}
.tt-next-course__spots-dot--full::before {
    background-color: var(--pink, #E4087E);
}

.woocommerce-account .woocommerce-MyAccount-content .tt-next-course__name {
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

/* Enroll-knop: outline-pill. Prefix verslaat de globale link-styling. */
.page-default-surface .entry-content a.tt-next-course__enroll {
    display: inline-block;
    padding: 13px 22px;
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 40px;
    background-color: transparent;
    color: var(--font-color, #0A2636);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* Hover: gevulde donkerroze pill, witte tekst. */
.page-default-surface .entry-content a.tt-next-course__enroll:hover,
.page-default-surface .entry-content a.tt-next-course__enroll:focus {
    background-color: var(--dark-pink, #C20068);
    border-color: var(--dark-pink, #C20068);
    color: #fff;
    text-decoration: none;
}

/* Prijs-suffix "(incl. …)" iets kleiner. */
.tt-next-course__price-suffix {
    font-size: 14px;
}

/* Details-box rechts: vaste breedte 374px. */
.tt-next-course__details {
    box-sizing: border-box;
    flex: 0 0 374px;
    margin: 0;
    padding: 10px 16px;
    border-radius: 10px;
    background-color: var(--light-blue, #DDEAF5);
    max-width: 60%; /* krimpt mee op smallere schermen */
}

.tt-next-course__detail {
    display: flex;
    gap: 8px;
    font-size: 16px;
    line-height: 26px;
    color: var(--font-color, #0A2636);
}

.tt-next-course__detail dt {
    font-weight: 700;
}

.tt-next-course__detail dd {
    margin: 0;
}

/* ≤991px: details-box onder de linkerkant (gestapeld, volle breedte). */
@media (max-width: 991px) {
    .woocommerce-account .woocommerce-MyAccount-content .tt-next-course {
        flex-direction: column;
        align-items: stretch;
    }

    .tt-next-course__details {
        flex: 1 1 auto;
        max-width: none;
    }
}

/* Hoofdaccount-pagina (dashboard): de "latest courses"-sectie krijgt 60px
   ruimte naar de sectie eronder (bv. de upsell), maar niet als het de laatste
   sectie op de pagina is. */
.woocommerce-dashboard .woocommerce-MyAccount-content .my-courses-container {
    margin-bottom: 60px;
}

.woocommerce-dashboard .woocommerce-MyAccount-content .my-courses-container:last-child {
    margin-bottom: 0;
}

/* Dashboard: "Your latest course" toont alleen de meest recente cursus. De
   plugin rendert ze oplopend op startdatum, dus de laatste (:last-child) is de
   nieuwste; de rest verbergen we. (De kop wordt via JS enkelvoud gemaakt.)
   De sectie "Your upcoming courses" is hiervan uitgezonderd: die hoort juist
   álle lopende en aankomende cursussen te tonen. */
.woocommerce-dashboard .woocommerce-MyAccount-content .my-courses-container:not(.tt-upcoming-courses) > .my-course:not(:last-child) {
    display: none;
}

/* Mobiel: cursus-container iets buiten de content-marge trekken. */
@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content .my-courses-container {
        margin-left: -12px;
        margin-right: -12px;
    }
}

/* Niveau-label boven de titel in de upsell "extra practice"-kaart. */
.upsell-order-form-col__level {
    display: inline-block;
    align-self: flex-start; /* niet uitrekken in de flex-kolom → compacte pill */
    margin-bottom: 15px;
    padding: 1px 18px;
    border-radius: 80px;
    background-color: var(--lighter-green, #DDF1E1);
    color: var(--green, #1FA238);
    font-size: 14px;
    line-height: 29px;
    font-weight: 700;
}

/* Mobiel (≤767px): kleinere koppen + full-width enroll-knop. */
@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content .tt-congrats__title {
        font-size: 20px;
        line-height: 29px;
        margin-bottom: 23px;
    }

    .woocommerce-account .woocommerce-MyAccount-content h2 {
        font-size: 20px;
        line-height: 29px;
    }

    .page-default-surface .entry-content a.tt-next-course__enroll {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* "Congratulations"-sectie (docentadvies laatste geslaagde cursus). */
.woocommerce-account .woocommerce-MyAccount-content .tt-congrats {
    margin-bottom: 60px;
}

.woocommerce-account .woocommerce-MyAccount-content .tt-congrats__title {
    margin: 0 0 16px;
    font-size: 25px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

.woocommerce-account .woocommerce-MyAccount-content .tt-congrats__body {
    font-size: 18px;
    line-height: 28px;
    color: var(--font-color, #0A2636);
}

.woocommerce-account .woocommerce-MyAccount-content .tt-congrats__body p {
    margin: 0 0 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .tt-congrats__body p:last-child {
    margin-bottom: 0;
}

/* Account-tabellen: inhoud van body-cellen onderaan uitlijnen. */
.woocommerce-account .woocommerce-MyAccount-content table tbody td,
.woocommerce-account .woocommerce-MyAccount-content table tbody th,
.woocommerce-account .woocommerce-MyAccount-content table tfoot td,
.woocommerce-account .woocommerce-MyAccount-content table tfoot th {
    vertical-align: bottom;
}

/* Orders-tabel: bestelnummer + datum eronder in de Order-cel. */
.woocommerce-account .woocommerce-MyAccount-content .tt-order-number {
    display: block;
}

.woocommerce-account .woocommerce-MyAccount-content .tt-order-date {
    display: block;
    margin-top: 4px;
    font-weight: 400;
}


/* Kop boven de orders/invoices-tabel. */
.woocommerce-account .woocommerce-MyAccount-content .tt-orders-title {
    margin: 0 0 16px;
    font-size: 25px;
    line-height: 36px;
    font-weight: 700;
}

/* Paginatitel op account-details: iets meer ruimte onder dan de standaard 16px.
   WooCommerce zet per endpoint een body-class, dus geen extra class nodig. */
.woocommerce-edit-account .woocommerce-MyAccount-content .tt-orders-title {
    margin-bottom: 31px;
}

/* Orders-tabel: Actions-header rechts, maar de cel-inhoud links. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__header-order-actions {
    text-align: right;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
    text-align: left;
}

/* Actie-knoppen als tekstlinks (geen groene knop). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button {
    display: inline-block;
    margin: 0 16px 0 0; /* onderlinge ruimte tussen de knoppen op regel 2 */
    padding: 0;
    text-align: left; /* knop-tekst links (thema centreert 'm standaard) */
    border: 0;
    background: none;
    background-image: none;
    background-color: transparent;
    color: var(--font-color, #0A2636);
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: none; /* parent-thema maakt .button uppercase */
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:focus {
    background: none;
    color: var(--pink, #E4087E);
    text-decoration: none;
}

/* "View" op een eigen regel; standaard roze, hover donkerroze.
   !important omdat het parent-thema display op knoppen forceert. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.view {
    display: block !important;
    margin-bottom: 1px;
    color: var(--pink, #E4087E);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.view:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.view:focus {
    color: var(--dark-pink, #C20068);
}
/* ==========================================================================
   Mobiel (≤767px) — orders-kaarten. Staat bewust ACHTERAAN: bij gelijke
   specificiteit wint de laatste regel, dus dit overschrijft de desktop-marges.
   ========================================================================== */
@media (max-width: 767px) {
    /* Geen extra padding: de celhoogte komt van de labelkolom, anders ontstaat
       er witruimte boven/onder het blauwe label. */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
        flex-wrap: wrap;
        gap: 14px;
    }

    /* Acties naast elkaar; marges weg zodat de laatste rechts aansluit. */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.view {
        display: inline-block !important;
        margin: 0;
    }

    /* Bestelnummer en datum staan naast elkaar: geen extra bovenmarge, anders
       lijnen ze verticaal niet uit. */
    .woocommerce-account .woocommerce-MyAccount-content .tt-order-date {
        margin-top: 0;
    }

    /* 17px tussen bestelnummer en datum. */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number {
        gap: 17px;
    }
}

/* ==========================================================================
   Adresblok — GEDEELD door de order-detailpagina (.woocommerce-customer-details)
   en de adressen-pagina (.woocommerce-Address): witte kaart met een lichtblauw
   inner-blok.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
    box-sizing: border-box;
    margin: 0;
    padding: 29px 24px;
    border: 0;
    border-radius: 15px;
    background-color: #fff;
    color: #0A2636;
    font-size: 16px;
    line-height: 26px;
    font-style: normal;
}

/* Lichtblauw blok binnen de witte adreskaart. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .tt-address__inner,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .tt-address__inner {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    background-color: var(--lighter-blue, #EEF5FA);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .tt-address__inner .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .tt-address__inner .woocommerce-customer-details--email {
    display: block;
    margin: 0;
}

/* Order-details blok iets losser van de kop erboven. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details {
    margin-top: 36px;
}

/* Klantgegevens losser van het order-detailblok erboven. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
    margin-top: 38px;
}

/* Actieknop in de order-tabel als tekstlink (geen knop). */
.woocommerce-account .woocommerce-MyAccount-content .order-actions-button {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    background-image: none;
    background-color: transparent;
    color: var(--pink, #E4087E);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: none;
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .order-actions-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .order-actions-button:focus {
    background: none;
    color: var(--pink, #E4087E);
    text-decoration: underline;
}

/* Productnaam in de order-tabel: roze link, underline bij hover. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table__product-name a {
    color: var(--pink, #E4087E);
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table__product-name a:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table__product-name a:focus {
    color: var(--pink, #E4087E);
    text-decoration: underline;
}

/* Aantal ("× 1") niet vet. */
.woocommerce-account .woocommerce-MyAccount-content .product-quantity {
    font-weight: 400;
}

/* Totaal-kolom in de order-tabel: vaste breedte (incl. padding), bedragen rechts.
   Geldt ook voor de waardes in de voettekst (subtotaal, korting, totaal, acties). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details .product-total,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details tfoot td {
    box-sizing: border-box;
    width: 232px;
    text-align: right;
}

/* Mobiel: in de kaart-weergave geen vaste kolombreedte — de waarde neemt
   alleen de ruimte die ze nodig heeft. */
@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details .product-total,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details tfoot td {
        width: auto;
    }
}

/* Telefoon- en e-mailregel in het adresblok met icoon ervoor. Gedeeld door de
   order-detailpagina (.woocommerce-customer-details) en de adressen-pagina
   (.woocommerce-Address .tt-address-line). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--email,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .tt-address-line {
    padding-left: 26px;
    background-repeat: no-repeat;
    background-position: left center;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .tt-address-line--phone {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15 0.8125C15.6562 0.96875 16.125 1.5625 16.125 2.21875C16.125 9.90625 9.875 16.0938 2.21875 16.0938C1.5625 16.0938 0.96875 15.6562 0.8125 15L0.15625 12.0625C0 11.375 0.34375 10.6875 0.96875 10.4062L4.15625 9.0625C4.71875 8.8125 5.40625 8.96875 5.8125 9.46875L6.84375 10.7188C8.46875 9.8125 9.84375 8.46875 10.7188 6.84375L9.46875 5.8125C8.96875 5.40625 8.8125 4.71875 9.0625 4.15625L10.4375 0.96875C10.6875 0.34375 11.375 0 12.0625 0.15625L15 0.8125ZM2.28125 14.5938C9.0625 14.5625 14.5938 9.0625 14.625 2.28125L11.7812 1.625L10.4688 4.6875L12.5938 6.4375C11.125 9.53125 9.53125 11.125 6.4375 12.5938L4.6875 10.4688L1.625 11.7812L2.28125 14.5938Z' fill='%230A2636'/%3E %3C/svg%3E");
    background-size: 17px 17px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--email,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .tt-address-line--email {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.5 0C15.3125 0 16 0.6875 16 1.5V10.5C16 11.3438 15.3125 12 14.5 12H1.5C0.65625 12 0 11.3438 0 10.5V1.5C0 0.6875 0.65625 0 1.5 0H14.5ZM14.5 1.5H1.5V2.78125C2.1875 3.375 3.3125 4.25 5.6875 6.125C6.21875 6.53125 7.25 7.53125 8 7.5C8.71875 7.53125 9.75 6.53125 10.2812 6.125C12.6562 4.25 13.7812 3.375 14.5 2.78125V1.5ZM1.5 10.5H14.5V4.71875C13.7812 5.28125 12.75 6.09375 11.2188 7.3125C10.5 7.84375 9.3125 9.03125 8 9C6.65625 9.03125 5.4375 7.84375 4.75 7.3125C3.21875 6.09375 2.1875 5.28125 1.5 4.71875V10.5Z' fill='%230A2636'/%3E %3C/svg%3E");
    background-size: 16px 12px;
}

/* Contactregels (telefoon/e-mail) als los blok onder de adresregels. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .tt-address-contact {
    display: block;
    margin-top: 8px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .tt-address-line {
    display: block;
}

/* Mobiel: krappere adreskaart (gedeeld). */
@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
        padding: 16px 20px;
    }
}

/* ==========================================================================
   Adressen-pagina (/my-account/edit-address/).
   Elke adres = één witte, afgeronde kaart met titelrij + adres erin.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0; /* laat de kolom krimpen i.p.v. overflowen */
    margin: 0;
    border-radius: 0;
    background-color: transparent;
}

/* Titelrij: titel links, Bewerk/Toevoegen-link rechts. Witte
   parent-achtergrond neutraliseren; de kaart zelf is al wit. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 14px;
    padding: 0;
    background-color: transparent;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
    margin: 0;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
    flex: 0 0 auto;
    color: var(--pink, #E4087E);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:focus {
    color: var(--pink, #E4087E);
    text-decoration: underline;
}

/* Mobiel: kaarten onder elkaar + krappere padding. */
@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
        flex-direction: column;
    }

    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
        padding: 0;
    }
}

/* ==========================================================================
   Account-details (/my-account/edit-account/) — ≤767px.
   Aan het eind van het bestand zodat deze overrides winnen van de bredere
   regels hierboven (gelijke specificiteit, dus volgorde beslist).
   ========================================================================== */
@media (max-width: 767px) {
    /* Compactere paginatitel op deze pagina. */
    .woocommerce-edit-account .woocommerce-MyAccount-content .tt-orders-title {
        margin-bottom: 19px;
    }

    /* Uitleg bóven het display-name-veld i.p.v. eronder. */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row:has(#account_display_name) {
        display: flex;
        flex-direction: column;
    }

    .woocommerce-account .woocommerce-MyAccount-content #account_display_name_description {
        order: -1;
        margin-top: 0;
        margin-bottom: 12px;
    }

    /* Geen inspring meer bij labels, opties en uitleg. */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > #billing_participant_is_field,
    .woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field > label,
    .woocommerce-account .woocommerce-MyAccount-content #billing_participant_is_field > .woocommerce-input-wrapper,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset .form-row > label,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .woocommerce-form-row > span,
    .woocommerce-account .woocommerce-MyAccount-content #account_display_name_description {
        padding-left: 0;
    }
}