/* =========================================================
   PepPure — woocommerce.css
   Alleen de lijm tussen WooCommerce-markup en het ontwerp.
   base.css, components.css en layout.css blijven ongewijzigd.
   ========================================================= */

/* ---------- Meldingen ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: var(--fs-sm);
    list-style: none;
}

.woocommerce-message {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-700);
}

.woocommerce-error {
    border-color: rgba(201, 74, 74, 0.25);
    background: var(--red-soft);
    color: #8d3535;
}

.woocommerce-message .button,
.woocommerce-error .button {
    margin-left: auto;
}

/* Een info-melding is één doorlopende zin met een link erin; als flexregel
   zou de link ernaast in een tweede kolom belanden. */
.woocommerce-info {
    display: block;
}

.woocommerce-info a {
    color: var(--accent-700);
    text-decoration: underline;
}

/* ---------- Productgalerij ---------- */

.woocommerce-product-gallery {
    position: relative;
}

.woocommerce-product-gallery__wrapper {
    margin: 0;
}

/* Bij meerdere foto's maakt FlexSlider er een carrousel van; het kader hoort
   dan om de viewport heen, niet om de losse slides. Vaste hoogtes vermijden:
   die gaan bij FlexSlider met de slidehoogte op hol. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: radial-gradient(110% 80% at 50% 10%, #fff, var(--surface-2));
    overflow: hidden;
}

.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
    border: 0;
    border-radius: 0;
    background: none;
}

/* Ruimte rondom de vial, net als op de productkaart. */
.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 11%;
    object-fit: contain;
}

.woocommerce-product-gallery .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-3) 0 0;
    padding: 0;
    list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface-2);
    padding: var(--sp-2);
    object-fit: contain;
    cursor: pointer;
    transition: border-color 0.18s var(--ease);
}



.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
    border-color: var(--accent);
}

.gallery__thumbs--doc {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Prijs ---------- */

.product-summary .price,
.woocommerce-variation-price .price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-3xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
}

.product-summary .price del,
.woocommerce-variation-price .price del {
    font-size: var(--fs-sm);
    color: var(--text-3);
}

.product-summary .price ins,
.woocommerce-variation-price .price ins {
    text-decoration: none;
}

/* ---------- Variantenformulier ---------- */

/* De standaard selects blijven bestaan (WooCommerce heeft ze nodig),
   maar we tonen onze eigen doseringsknoppen. */
.variations_form .variations {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* WooCommerce zet het formulier standaard op display:grid, waardoor de
   doseringknoppen, de prijs en het koopblok naast elkaar in kolommen
   belanden. Wij bouwen de kolommen zelf op. */
form.cart,
.variations_form.cart {
    display: block;
}

.variations_form .woocommerce-variation-add-to-cart,
.single_variation_wrap .woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-10);
}

form.cart .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface);
}

form.cart .quantity input.qty {
    width: 56px;
    height: 46px;
    border: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 600;
    background: transparent;
}

form.cart button.single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 220px;
    padding: 1.05rem 1.9rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--white);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(30, 156, 215, 0.22);
    transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

form.cart button.single_add_to_cart_button:hover {
    background: var(--accent-600);
    transform: translateY(-1px);
}

form.cart button.single_add_to_cart_button:active {
    transform: scale(0.975);
}

form.cart button.single_add_to_cart_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.woocommerce-variation-availability p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.reset_variations {
    font-size: var(--fs-xs);
    color: var(--text-3);
}

@media (max-width: 480px) {
    .variations_form .woocommerce-variation-add-to-cart,
    form.cart:not(.variations_form) {
        flex-wrap: wrap;
    }

    form.cart button.single_add_to_cart_button {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* ---------- Winkelwagen ---------- */

.cart__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-6);
}

.cart__actions .input-group {
    flex: 1;
    min-width: 260px;
}

.cart-item__fixed-qty {
    font-size: var(--fs-sm);
    color: var(--text-3);
}

.cart-item__free {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-700);
}

.cart_totals table {
    width: 100%;
    margin-bottom: var(--sp-5);
}

.cart_totals th,
.cart_totals td {
    padding: var(--sp-2) 0;
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--text-2);
    border: 0;
}

.cart_totals td {
    text-align: right;
    font-family: var(--font-mono);
    color: var(--text);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-strong);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}

.cart_totals .order-total td {
    font-size: var(--fs-xl);
}

/* "Inclusief € 9,88 btw" onder het totaal, niet in dezelfde grote letter. */
.cart_totals .order-total .includes_tax,
.cart_totals .order-total small {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-3);
}

/* Betaallogo's en de research-use-only-melding onder elkaar, met lucht. */
.cart-summary .payments + .notice {
    margin-top: var(--sp-5);
}

.wc-proceed-to-checkout {
    margin-bottom: var(--sp-5);
}

.wc-proceed-to-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    padding: 1.05rem 1.9rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--white);
    font-weight: 600;
    text-align: center;
}

.wc-proceed-to-checkout .checkout-button:hover {
    background: var(--accent-600);
}

.woocommerce-shipping-destination,
.woocommerce-shipping-methods {
    font-size: var(--fs-sm);
}

.woocommerce-shipping-methods {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Checkout ---------- */

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--sp-10);
    align-items: start;
}

.checkout-panels {
    display: grid;
    gap: var(--sp-8);
}

/* De velden staan open op de pagina; het overzicht rechts is het enige blok. */
.checkout-panel {
    padding: 0;
    border: 0;
    background: none;
}

.checkout-panel > h3,
.checkout-panel .woocommerce-billing-fields > h3,
.checkout-panel .woocommerce-shipping-fields > h3,
.checkout-panel .woocommerce-additional-fields > h3 {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.checkout-panel .woocommerce-additional-fields {
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
}

/* Voor- en achternaam naast elkaar, de rest over de volle breedte. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--sp-4);
}

.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-additional-fields__field-wrapper > .form-row {
    grid-column: 1 / -1;
}

.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-shipping-fields__field-wrapper > .form-row-first {
    grid-column: 1;
}

.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-shipping-fields__field-wrapper > .form-row-last {
    grid-column: 2;
}

/* PostNL: bij een Nederlands adres staan huisnummer en toevoeging direct
   na elkaar (de plugin zet ze in die volgorde). Dan naast elkaar, met het
   label van de toevoeging zichtbaar. */
#billing_house_number_field:has(+ #billing_address_2_field),
#shipping_house_number_field:has(+ #shipping_address_2_field) {
    grid-column: 1;
}

#billing_house_number_field + #billing_address_2_field,
#shipping_house_number_field + #shipping_address_2_field {
    grid-column: 2;
}

#billing_house_number_field + #billing_address_2_field label.screen-reader-text,
#shipping_house_number_field + #shipping_address_2_field label.screen-reader-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* Overzicht rechts. Niet plakkend: met betaalkeuze erin is het blok
   vaak hoger dan het scherm. */
.checkout-aside .cart-summary {
    position: static;
    padding: var(--sp-6);
}

.checkout-aside .summary__title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-lg);
    font-weight: 600;
}

.checkout-aside__checklist {
    margin: var(--sp-6) 0 var(--sp-5);
}

/* Regels van de bestelling. */
.woocommerce-checkout-review-order-table {
    width: 100%;
    margin: 0 0 var(--sp-5);
    border-collapse: collapse;
}

.woocommerce-checkout-review-order-table thead {
    display: none;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: var(--sp-3) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-2);
    vertical-align: top;
}

/* In de body zijn naam én bedrag een <td>; alleen het bedrag hoort rechts. */
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
    color: var(--text);
}

.woocommerce-checkout-review-order-table .product-name {
    color: var(--text);
}

.woocommerce-checkout-review-order-table .product-quantity {
    margin-left: 0.35rem;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-3);
}

/* Regels als "Meegeleverd: standaard inbegrepen bij je peptide". */
.woocommerce-checkout-review-order-table .variation,
.woocommerce-checkout-review-order-table .wc-item-meta {
    display: block;
    margin: var(--sp-1) 0 0;
    padding: 0;
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.woocommerce-checkout-review-order-table .variation dt,
.woocommerce-checkout-review-order-table .variation dd,
.woocommerce-checkout-review-order-table .wc-item-meta li {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 400;
    list-style: none;
}

.woocommerce-checkout-review-order-table .variation dd::after,
.woocommerce-checkout-review-order-table .wc-item-meta li::after {
    content: " · ";
    color: var(--line-strong);
}

.woocommerce-checkout-review-order-table .variation dd:last-child::after,
.woocommerce-checkout-review-order-table .wc-item-meta li:last-child::after {
    content: "";
}

.woocommerce-checkout-review-order-table .variation p,
.woocommerce-checkout-review-order-table .wc-item-meta p {
    display: inline;
    margin: 0;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    padding-top: var(--sp-4);
    border-bottom: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}

.woocommerce-checkout-review-order-table .order-total td {
    font-size: var(--fs-xl);
}

.woocommerce-checkout-review-order-table .includes_tax,
.woocommerce-checkout-review-order-table small {
    display: block;
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-3);
}

/* Betaalkeuze. */
#payment {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line-strong);
}

#payment ul.payment_methods {
    display: grid;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

#payment ul.payment_methods > li {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: var(--fs-sm);
}

#payment ul.payment_methods label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    cursor: pointer;
}

#payment ul.payment_methods label img {
    max-height: 22px;
    width: auto;
}

#payment .payment_box {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
}

#payment .payment_box p:last-child {
    margin-bottom: 0;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.woocommerce-terms-and-conditions-checkbox-text {
    font-size: var(--fs-sm);
    color: var(--text-2);
}

/* Kortingscode en inloggen boven het formulier. */
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
    margin-bottom: var(--sp-5);
}

.checkout_coupon,
.woocommerce-form-login {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: flex-end;
    margin: 0 0 var(--sp-6);
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.checkout_coupon .form-row,
.woocommerce-form-login .form-row {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

.checkout_coupon p:first-child {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.checkout_coupon .button,
.woocommerce-form-login .button {
    padding: 0.8rem 1.4rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

/* De landkeuze draait op select2; die komt zonder opmaak binnen. */
.woocommerce-checkout .select2-container .select2-selection--single {
    height: auto;
    padding: 0.55rem 0.4rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.6rem;
    line-height: 1.6;
    color: var(--text);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.woocommerce-checkout .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.woocommerce-checkout .form-row label {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-size: var(--fs-base);
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.pp-age-confirm {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    border-radius: var(--r);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    font-size: var(--fs-sm);
}

#place_order {
    width: 100%;
    padding: 1.05rem 1.9rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--white);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }
}

@media (max-width: 560px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    .woocommerce-billing-fields__field-wrapper > .form-row-first,
    .woocommerce-billing-fields__field-wrapper > .form-row-last,
    .woocommerce-shipping-fields__field-wrapper > .form-row-first,
    .woocommerce-shipping-fields__field-wrapper > .form-row-last {
        grid-column: 1 / -1;
    }
}

/* ---------- Paginering ---------- */

.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-12) 0 0;
    padding: 0;
    list-style: none;
    border: 0;
}

.woocommerce-pagination li {
    margin: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.65rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
}

.woocommerce-pagination .current {
    background: var(--ink-800);
    border-color: var(--ink-800);
    color: var(--white);
}

/* ---------- Diversen ---------- */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.woocommerce-breadcrumb {
    display: none;
}

/* De vergrootglas-knop van de galerij past niet in het ontwerp;
   klikken op de foto opent de lightbox al. */
.woocommerce-product-gallery__trigger {
    display: none;
}

/* ---------- Aantal vials ---------- */

/* Label boven, stepper eronder, en de knop ernaast op dezelfde regel. */
.buy-qty {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.buy-qty__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.qty--lg {
    display: inline-flex;
    align-items: center;
    height: 56px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    overflow: hidden;
}

.qty--lg button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 54px;
    flex: none;
    background: none;
    color: var(--text-2);
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.qty--lg button:hover {
    background: var(--surface-2);
    color: var(--text);
}

.qty--lg .quantity {
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
}

.qty--lg .quantity input.qty {
    width: 46px;
    height: 54px;
    font-size: var(--fs-lg);
}

/* De knop vult de rest van de regel, op gelijke hoogte met de stepper. */
.variations_form .woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
    align-items: flex-end;
}

form.cart button.single_add_to_cart_button {
    height: 56px;
    padding-block: 0;
}

/* ---------- Gratis meegeleverd ---------- */

.addon-card__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}

.addon-card__title .icon {
    color: var(--accent-700);
}

.addon-card__note {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
}

/* ---------- Bestelbalk ---------- */

.order-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 -8px 30px rgba(11, 14, 18, 0.08);
}

.order-bar[hidden] {
    display: none;
}

.order-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
}

.order-bar__product {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.order-bar__product strong {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.order-bar__media {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    overflow: hidden;
}

.order-bar__media img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.order-bar__dose {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.order-bar__controls {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.qty--bar {
    display: inline-flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    overflow: hidden;
}

.qty--bar button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    background: none;
    color: var(--text-2);
    cursor: pointer;
}

.qty--bar button:hover {
    color: var(--text);
}

.qty--bar input {
    width: 44px;
    border: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 600;
    background: transparent;
    -moz-appearance: textfield;
}

.qty--bar input::-webkit-outer-spin-button,
.qty--bar input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.order-bar__total {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.order-bar__total-label {
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.order-bar__total strong {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
}

@media (max-width: 720px) {
    .order-bar__product {
        display: none;
    }

    .order-bar__inner {
        gap: var(--sp-3);
    }

    .order-bar__controls {
        flex: 1;
        gap: var(--sp-3);
    }

    .order-bar__controls .btn {
        flex: 1;
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }
}

/* De zwevende WhatsApp-knop staat op dezelfde plek als de bestelbalk.
   Zodra de balk verschijnt, schuift de knop erboven. */
body.has-order-bar .whatsapp-widget {
    bottom: calc(var(--order-bar-h, 76px) + var(--sp-4));
}

body.has-order-bar {
    padding-bottom: var(--order-bar-h, 76px);
}

/* ---------- Koopblok op een telefoon ---------- */

@media (max-width: 560px) {
    /* Label links, stepper rechts; de knop eronder over de volle breedte.
       Anders staat de stepper alleen met een gat ernaast. */
    .buy-qty {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .buy-qty__label {
        margin: 0;
    }
}

/* Het bedrag in de bestelbalk mag niet over twee regels breken. */
.order-bar__total strong {
    white-space: nowrap;
}

/* Op een telefoon passen aantal, bedrag en knop niet op één regel; de
   knop werd dan afgesneden. Knop op een eigen regel eronder. */
@media (max-width: 560px) {
    .order-bar__controls {
        flex: 1 1 100%;
        flex-wrap: wrap;
        row-gap: var(--sp-2);
    }

    .order-bar__total {
        margin-left: auto;
        text-align: right;
    }

    .order-bar__controls .btn {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* De voorraadindicator en de benodigdheden zijn flexitems in de koopregel.
   Zonder deze regel krimpen ze mee met de knop en lopen ze niet door tot
   de rand, terwijl de doseringkeuze erboven dat wel doet. */
.variations_form .woocommerce-variation-add-to-cart > .block,
form.cart:not(.variations_form) > .block {
    flex: 1 1 100%;
}

/* ---------- Bedankpagina ---------- */

.thankyou-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    padding: var(--sp-6);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--accent-soft);
}

.thankyou-hero__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
}

.thankyou-hero__icon .icon {
    width: 22px;
    height: 22px;
}

.thankyou-hero h2 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xl, 1.5rem);
    letter-spacing: -0.02em;
}

.thankyou-hero p {
    margin: 0;
    color: var(--text-2);
}

.thankyou-hero--failed {
    flex-direction: column;
    background: var(--red-soft);
}

.thankyou-hero--failed .thankyou-hero__icon {
    background: var(--red);
}

.order-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    margin: 0 0 var(--sp-8);
    padding: 0 0 var(--sp-6);
    border-bottom: 1px solid var(--line);
}

.order-facts dt {
    margin-bottom: var(--sp-1, 0.25rem);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.order-facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--text);
}

.order-facts dd small {
    font-weight: 400;
    color: var(--text-2);
}

/* Bestelregels en adressen, zoals WooCommerce ze onder de bevestiging zet. */
.woocommerce-order-details,
.woocommerce-customer-details {
    margin-bottom: var(--sp-8);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-lg);
    font-weight: 600;
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: var(--sp-3) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 400;
    vertical-align: top;
}

.woocommerce-table--order-details thead th {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details tfoot td {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.woocommerce-table--order-details tfoot th {
    color: var(--text-2);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: 0;
}

.woocommerce-table--order-details .wc-item-meta {
    margin: var(--sp-1, 0.25rem) 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-2);
}

.woocommerce-table--order-details .wc-item-meta li,
.woocommerce-table--order-details .wc-item-meta p {
    display: inline;
    margin: 0;
}

.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
}

.woocommerce-customer-details address {
    font-style: normal;
    line-height: 1.6;
    color: var(--text-2);
}

.woocommerce-customer-details address p {
    margin: 0;
}

.next-steps {
    margin: 0 0 var(--sp-6);
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.next-steps li {
    position: relative;
    padding: 0 0 var(--sp-4) 2.25rem;
    font-size: var(--fs-sm);
    color: var(--text-2);
    counter-increment: step;
}

.next-steps li::before {
    content: counter(step);
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-700);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.thankyou-shop-link {
    display: inline-block;
    margin-top: var(--sp-4);
    font-weight: 600;
}

@media (max-width: 760px) {
    .order-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }
}

/* Terwijl de winkelwagen na een aantalwijziging herlaadt. */
.woocommerce-cart-form.is-updating {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s var(--ease);
}