/* ==========================================================================
   Cart-pagina + Mini Cart styling (WooCommerce Blocks)

   Dit bestand wordt SITE-BREED geladen. De Mini Cart drawer (off-canvas
   winkelwagen via het header-icoon) hergebruikt dezelfde
   wc-block-cart-item__* classes als de losse Cart-pagina, maar kan op elke
   pagina geopend worden.
   ========================================================================== */

/* --- Cart block container op vaste breedte van 1152px, gecentreerd --- */
.wp-block-woocommerce-cart {
    max-width: 1152px;
    margin-inline: auto;
}

/* --- Layout van linker- en rechterkolom via CSS Grid i.p.v. de losse flexbox/percentage-breedtes van WooCommerce --- */
.wc-block-components-sidebar-layout {
    flex-wrap: wrap;
    margin: 0 auto 16px;
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    align-items: start;
}

.wc-block-components-sidebar-layout .wc-block-components-main {
    grid-column: 1;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    margin: 0;
    padding-right: 0 !important;
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
    grid-column: 2;
    grid-row: 1;
}

.wc-block-components-sidebar-layout .wc-block-components-main {
    width: unset;
}

.wc-block-components-sidebar {
    width: unset;
}

/* Gap scoped op .wc-block-cart, want .wc-block-components-sidebar-layout
   wordt ook door checkout gebruikt (daar 60px, zie checkout-sectie) */
.wc-block-cart.wc-block-components-sidebar-layout {
    gap: 20px !important;
    /* Rij 1 = alleen zo hoog als het besteloverzicht; alle extra hoogte van
       een lange productlijst (die over beide rijen loopt) gaat naar rij 2.
       Met "auto auto" werd die hoogte over beide rijen verdeeld en zakten
       de vertrouwens-badges ver onder het besteloverzicht. */
    grid-template-rows: auto 1fr;
}

/* --- Vertrouwens-badges onder de Besteloverzicht-kaart (via render_block hook in PHP) --- */
.blossom-cart-trust-badges {
    grid-column: 2;
    grid-row: 2;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.blossom-cart-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blossom-cart-trust-badge__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.blossom-cart-trust-badge__text {
    color: #3D6459;
    font-weight: 700;
    font-size: 12px;
}

/* --- Mobiel: grid terug naar 1 kolom, alles onder elkaar.
   Staat bewust NA alle bovenstaande grid-column/grid-row regels: bij gelijke
   specificiteit wint de regel die later in het bestand staat, dus deze reset
   moet na de badges-CSS staan om die daadwerkelijk te overrulen op mobiel. --- */
@media (max-width: 759px) {
    .wc-block-components-sidebar-layout,
    .wc-block-cart.wc-block-components-sidebar-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .wc-block-components-sidebar-layout .wc-block-components-main,
    .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        grid-column: 1;
        grid-row: auto;
    }

    .blossom-cart-trust-badges {
        grid-column: 1;
        grid-row: 3;
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 17px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

/* --- Cart items container --- */
table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block {
    background-color: #FEFCFB !important;
    padding: 20px;
    border-radius: 10px;
    border-collapse: separate !important;
    table-layout: fixed !important;
    width: 100% !important;
}

.wc-block-cart__main .wc-block-cart-items td {
    border-top: none;
    vertical-align: top;
}

/* --- Scheidingslijn tussen productrijen --- */
table.wc-block-cart-items .wc-block-cart-items__row:not(:last-child) {
    border-bottom: 1px solid rgba(93, 121, 117, 0.10) !important;
    box-shadow: 0 1px 0 0 rgba(93, 121, 117, 0.10);
}

.wp-block-woocommerce-cart-order-summary-totals-block {
    border-top: 1px solid rgba(93, 121, 117, 0.10) !important;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
    border-bottom: 1px solid rgba(93, 121, 117, 0.10) !important;
}

/* --- Header-rij (PRODUCT / TOTAL) visueel verbergen, zonder display:none --- */
.wc-block-cart-items__header {
    height: 0 !important;
    overflow: hidden !important;
}

.wc-block-cart-items__header th {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* --- Breedte van de image-kolom --- */
table.wc-block-cart-items .wc-block-cart-items__header-image,
table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
}

/* --- Productafbeelding met achtergrond, verkleind met transform:scale --- */
table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
    border-radius: 10px !important;
    background: url(/wp-content/uploads/2026/06/Background-Image-Product-Image.png) !important;
    background-size: cover !important;
    padding: 10px;
    vertical-align: middle;
    overflow: hidden;
    text-align: center;
    transform: scale(0.8);
    /* Mini Cart drawer (en smalle cart) zet de rij op CSS grid; zonder dit
       rekt de cel met achtergrond mee met een lange omschrijving. */
    align-self: start;
}

.wc-block-cart-item__image a {
    display: inline-block;
}

/* Specifiek de afbeelding binnen de linkende A-tag (de echte, zichtbare afbeelding).
   Voorkomt dat de losse hidden fallback-afbeelding van de Mini Cart's
   Interactivity API per ongeluk ook zichtbaar wordt. */
.wc-block-cart-item__image a img {
    width: 63px !important;
    height: 101px !important;
    aspect-ratio: 63/101;
    object-fit: contain !important; /* hele cover tonen, niet afsnijden */
    border-radius: 0 !important;
    display: block;
}

/* Extra vangnet: expliciet garanderen dat verborgen elementen verborgen blijven,
   mocht er ergens anders nog een brede afbeelding-regel actief zijn */
.wc-block-cart-item__image img[hidden] {
    display: none !important;
}

/* --- Titel, auteur, variant --- */
.wc-block-components-product-name {
    font-family: 'Bungee', cursive, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b2b3c;
    text-decoration: none;
    line-height: 1.3;
}

.wc-block-components-product-metadata {
    font-size: 13px;
    color: #6b6b7a;
    margin: 4px 0 8px;
}

/* Links in de productbeschrijving (bijv. auteursnaam) even klein als de metadata.
   Cart-pagina + order summary in de checkout-sidebar. */
.wc-block-cart .wc-block-components-product-metadata__description a,
.wc-block-checkout__sidebar .wc-block-components-product-metadata__description a {
    font-size: 13px;
}

.wc-block-cart-item__product .wc-block-cart-item__prices,
.wc-block-cart-item__wrap .wc-block-cart-item__prices,
td.wc-block-cart-item__product .wc-block-cart-item__prices {
    display: none !important;
}

/* --- Quantity selector als pill --- */
.wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: center;
    border-radius: 5px !important;
    border: 1px solid rgba(194, 197, 202, 0.50) !important;
    background: #FAF4F0 !important;
    backdrop-filter: blur(2px) !important;
    overflow: hidden;
    width: auto;
    height: 35px !important;
}

.wc-block-components-quantity-selector__input {
    border: none !important;
    width: 32px !important;
    box-sizing: border-box;
    padding: 0 !important;
    text-align: center;
    background: transparent;
    color: #2b2b3c !important;
    -webkit-text-fill-color: #2b2b3c !important;
    opacity: 1 !important;
    font-size: 14px !important;
    height: 100%;
}

.wc-block-components-quantity-selector__button {
    border: none !important;
    background: transparent !important;
    width: 28px;
    height: 100%;
    color: #c17a5e;
}

/* --- Verwijder-knop (prullenbak): volledige cirkel zonder rand --- */
.wc-block-cart-item__remove-link {
    background-color: var(--White, #FFF) !important;
    border-radius: 100% !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    filter: none !important;
    margin-left: 8px;
    vertical-align: middle;
}

.wc-block-cart-item__remove-link svg {
    display: none !important;
}

.wc-block-cart-item__remove-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_318_693)'%3E%3Cpath d='M2.66797 4.66666H13.3346' stroke='%23D39F90' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66797 7.33334V11.3333' stroke='%23D39F90' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.33203 7.33334V11.3333' stroke='%23D39F90' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.33203 4.66666L3.9987 12.6667C3.9987 13.0203 4.13917 13.3594 4.38922 13.6095C4.63927 13.8595 4.97841 14 5.33203 14H10.6654C11.019 14 11.3581 13.8595 11.6082 13.6095C11.8582 13.3594 11.9987 13.0203 11.9987 12.6667L12.6654 4.66666' stroke='%23D39F90' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 4.66667V2.66667C6 2.48986 6.07024 2.32029 6.19526 2.19526C6.32029 2.07024 6.48986 2 6.66667 2H9.33333C9.51014 2 9.67971 2.07024 9.80474 2.19526C9.92976 2.32029 10 2.48986 10 2.66667V4.66667' stroke='%23D39F90' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_318_693'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}

/* --- Totaalprijs kolom in de productlijst --- */
table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
    display: table-cell !important;
    text-align: right;
    font-weight: 700;
    color: #2b2b3c;
    vertical-align: bottom !important;
    padding-bottom: 8px; /* op één lijn met het aantal-veld */
}

/* --- Cart-pagina desktop: achtergrond op de link i.p.v. de tabelcel ---
   Een tabelcel is altijd zo hoog als de rij, dus bij een lange omschrijving
   rekte de achtergrond mee (align-self werkt niet in een tabel). Op de
   Cart-pagina zit de achtergrond daarom op de link, met een vaste hoogte.
   Mini Cart en mobiel blijven zoals ze waren. */
@media (min-width: 780px) {
    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
        background: none !important;
        padding: 0 !important;
        vertical-align: top !important;
    }

    .wc-block-cart .wc-block-cart-item__image a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 150px;
        padding: 10px;
        border-radius: 10px;
        background: url(/wp-content/uploads/2026/06/Background-Image-Product-Image.png) center / cover;
        box-sizing: border-box;
    }
}

/* --- Mobiel --- */
@media (max-width: 779px) {
    table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block {
        table-layout: auto !important;
        margin-bottom: 20px;
    }

    table.wc-block-cart-items .wc-block-cart-items__header-image,
    table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
        width: 77px !important;
        min-width: 77px !important;
        max-width: 77px !important;
        height: 77px !important;
        padding: 6px !important;
        transform: none;
    }

    table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
        display: flex !important;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    .wc-block-cart-item__image a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__product {
        padding-left: 16px !important;
    }

    .wc-block-cart-item__image img {
        width: 37px !important;
        height: 58px !important;
        aspect-ratio: 37/58 !important;
    }

    table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }
}

/* --- Mobiel: rij als 3-koloms grid i.p.v. de standaard table-cell flow --- */
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 1fr 2fr 1fr;
}

/* --- Rechterkolom: Cart totals / Proceed to Checkout sidebar --- */
.wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block {
    background-color: #FEFCFB !important;
    border-radius: 10px !important;
    padding: 20px;
}

/* --- Totaal label styling --- */
.wc-block-components-totals-item__label {
    color: #758784 !important;
    font-family: 'Bungee', cursive, sans-serif !important;
    font-size: 22px !important;
}

/* --- Bedrag styling (product-prijzen) --- */
.wc-block-components-formatted-money-amount {
    font-family: 'Mulish', sans-serif !important;
    font-size: 18px !important;
}

/* --- Totaal-rij: bedrag blijft Bungee (hogere specificiteit dan bovenstaande) --- */
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
    font-family: 'Bungee', cursive, sans-serif !important;
}

/* --- BTW-regel ("Inclusief € x BTW hoog"): bedrag in dezelfde stijl als de zin.
   De regel hierboven raakt ook dit bedrag, omdat de BTW-regel binnen de
   footer-item staat. Zelfde specificiteit, dus deze wint omdat hij later staat. --- */
.wc-block-components-totals-footer-item-tax .wc-block-components-formatted-money-amount {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* --- Scheidingslijn boven de totalen-rij --- */
.wc-block-components-totals-wrapper {
    border-top: 2px solid rgba(93, 121, 117, 0.10) !important;
    padding: 16px 0;
}



/* --- Mini Cart drawer: titel font-size ---
   !important nodig omdat Greyd's eigen CSS hier een selector met hogere
   specificiteit gebruikt (twee classes i.p.v. tag+class). */
h2.wc-block-mini-cart__title {
    font-size: 20px !important;
}

/* --- Mini Cart: header-icoon (knop + custom SVG + badge) ---
   De SVG zelf wordt server-side vervangen, zie blossom_mini_cart_custom_icon()
   in includes/cart.php. */
.wc-block-mini-cart__button {
    background-color: white !important;
    border-radius: 100px !important;
    padding: 10px !important;
    display: inline-block;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.08));
}

.wc-block-mini-cart__icon {
    width: 18px !important;
    height: 18px !important;
}

.wc-block-mini-cart__badge {
    background-color: #A85054 !important;
    font-size: 10px !important;
    color: white !important;
    font-family: "Bungee", sans-serif !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

/* ==========================================================================
   Besteloverzicht (Cart-pagina) volgens Figma
   - Subtotaal / verzending: body-lettertype (Mulish), 15px, #68707A
   - Bedragen in die rijen: 15px, #68707A
   - "Inclusief € x BTW hoog": 15px, #68707A
   - Totaal-rij blijft Bungee (zie regels hierboven)
   Gescoped op .wc-block-cart, zodat checkout en Mini Cart niet geraakt worden.
   ========================================================================== */
.wc-block-cart .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: #68707A !important;
}

.wc-block-cart .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value,
.wc-block-cart .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-formatted-money-amount {
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #68707A !important;
}

.wc-block-cart .wc-block-components-totals-footer-item-tax {
    font-size: 15px !important;
    color: #68707A !important;
}

/* --- Vertrouwens-badges onder het besteloverzicht: gecentreerd --- */
.blossom-cart-trust-badge {
    justify-content: center;
    text-align: center;
}

/* ==========================================================================
   Productrijen tussen 760px en desktop
   WooCommerce zet de cart op basis van zijn eigen breedte op .is-medium /
   .is-small / .is-mobile en maakt de rij dan een grid met een beeldkolom van
   80px. Onze afbeelding is 130px, dus die schoof over de titel en de prijs
   sprong naar rechtsboven. Boven de 760px (vóór het stapelen) houden we
   daarom de tabel-layout aan die op desktop goed werkt.
   ========================================================================== */
@media (min-width: 760px) {
    .wc-block-cart:is(.is-medium, .is-small, .is-mobile) table.wc-block-cart-items .wc-block-cart-items__row {
        display: table-row !important;
    }

    .wc-block-cart:is(.is-medium, .is-small, .is-mobile) table.wc-block-cart-items .wc-block-cart-items__row > td {
        display: table-cell !important;
        padding-top: 16px !important;
    }

    /* Ruimte onder het product, zodat de scheidingslijn er niet tegenaan zit.
       (WooCommerce zet die ruimte in deze modus op de rij, maar dat werkt niet
       in de tabel-layout.) De prijs-cel houdt zijn eigen 8px. */
    .wc-block-cart:is(.is-medium, .is-small, .is-mobile) table.wc-block-cart-items .wc-block-cart-items__row > td:not(.wc-block-cart-item__total) {
        padding-bottom: 16px !important;
    }
}

/* --- Scheidingslijnen in het besteloverzicht allemaal even dik (1px).
   De algemene regel hierboven zet 2px, waardoor de lijn onder
   "Besteloverzicht" dikker was dan de rest. --- */
.wc-block-cart .wc-block-components-totals-wrapper {
    border-top-width: 1px !important;
}

/* --- Productgegevens in de cart, de Mini Cart drawer en het besteloverzicht
   van de checkout: auteur en formaat onder elkaar (Figma).
   !important bij de layout-regels: de Mini Cart laadt zijn eigen CSS pas
   als de drawer opengaat, dus die komt ná deze stylesheet en wint anders.
   Markup van WooCommerce:
     div.wc-block-components-product-details
       > span > span.__value (auteur) + span[aria-hidden] " / "
       > span > span.__value (formaat)
   Elke span op een eigen regel, het " / " verbergen, formaat 8px lager. --- */
:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-details > span {
    display: block !important;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-details > span > span[aria-hidden="true"] {
    display: none !important;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-details > span + span {
    margin-top: 8px;
}

/* --- Korte productomschrijving: onder auteur + formaat, max. 2 regels --- */
:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-metadata {
    display: flex !important;
    flex-direction: column !important;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-metadata .wc-block-components-product-details {
    order: 1 !important;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-metadata__description {
    order: 2 !important;
    margin-top: 8px;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-metadata__description p {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* --- Formaat (Paperback/Hardback) iets kleiner dan de auteur --- */
:is(.wc-block-cart, .wc-block-mini-cart__drawer, .wc-block-components-order-summary) .wc-block-components-product-details > span + span .wc-block-components-product-details__value {
    font-size: 12px;
}

/* --- Mini Cart drawer: prijs onderaan, op de hoogte van de prullenbak
   (zoals op de Cart-pagina). De drawer gebruikt WooCommerce's mobiele
   grid-layout; de prijs-cel staat daar standaard rechtsboven. --- */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
    align-self: end !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    height: 40px; /* = hoogte prullenbak */
    padding-bottom: 0 !important;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-sale-badge {
    display: none;
}

/* --- Eigen subtotaal-regel (DOM-fix bij gratis verzending): zelfde ruimte
   als de andere regels in het besteloverzicht --- */
.wc-block-cart [data-blossom-subtotal] {
    padding: 16px 0 !important;
}

/* ==========================================================================
   Gratis-verzending voortgangsbalk (includes/free-shipping-bar.php)
   Staat eerst vóór het Cart-block en wordt door de DOM-fix naar de
   linkerkolom verplaatst; tot dat moment verborgen (geen verspringen).
   ========================================================================== */
.blossom-free-shipping {
	display: none;
}

.wc-block-cart__main > .blossom-free-shipping.is-placed:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0 0 24px;
	padding: 16px 24px;
	background: #fff;
	border-radius: 30px;
	box-sizing: border-box;
}

/* Tekst + (bij pre-orders) uitlegregel eronder. */
.blossom-free-shipping__body {
	flex: 1 1 auto;
	min-width: 0;
}

.blossom-free-shipping__note {
	margin: 2px 0 0 !important;
	font-family: "Mulish", sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #68707A;
}

.blossom-free-shipping__note[hidden],
.blossom-free-shipping__track[hidden] {
	display: none !important;
}

.blossom-free-shipping__text {
	flex: 1 1 auto;
	margin: 0 !important;
	font-family: "Mulish", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #3D6459;
}

.blossom-free-shipping__text strong {
	font-weight: 700;
}

.blossom-free-shipping__track {
	flex: 0 0 40%;
	max-width: 280px;
	height: 8px;
	background: #E9ECEB;
	border-radius: 8px;
	overflow: hidden;
}

.blossom-free-shipping__fill {
	height: 100%;
	background: #7C928F;
	border-radius: inherit;
	transition: width .3s ease;
}

.blossom-free-shipping.is-reached .blossom-free-shipping__fill {
	background: #3D6459;
}

/* Smal: tekst boven de balk */
@media (max-width: 575px) {
	.wc-block-cart__main > .blossom-free-shipping.is-placed:not([hidden]) {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 20px;
		border-radius: 20px;
	}

	.blossom-free-shipping__track {
		flex-basis: auto;
		max-width: none;
	}
}

/* --- Mini Cart: korte omschrijving ónder auteur + formaat.
   De Mini Cart (Interactivity API) zet de omschrijving in een extra wrapper:
     .wc-block-components-product-metadata
       > div[data-wp-watch="callbacks.itemShortDescription"]   ← dit is het flex-item
           > .wc-block-components-product-metadata__description
       > .wc-block-components-product-details (auteur + formaat)
   Daarom werkte order op __description niet: de wrapper moet verschuiven. --- */
.wc-block-mini-cart-items .wc-block-components-product-metadata {
    display: flex !important;
    flex-direction: column !important;
}

.wc-block-mini-cart-items .wc-block-components-product-metadata > .wc-block-components-product-details {
    order: 1 !important;
}

.wc-block-mini-cart-items .wc-block-components-product-metadata > :not(.wc-block-components-product-details) {
    order: 2 !important;
}

.wc-block-mini-cart-items .wc-block-components-product-metadata__description {
    margin-top: 8px !important;
}

.wc-block-mini-cart-items .wc-block-components-product-metadata__description p {
    margin: 0 !important;
}