.is_configurable div.product form.cart {
    border: none !important;
}

.is_configurable div.product form.cart .quantity, .is_configurable div.product form.cart .single_add_to_cart_button {
    display: none !important;
}


.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates {
    list-style: none outside;
    margin: 0;
    padding: 0
}

.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li {
    margin: 0 0 .5em;
    line-height: 1.5em;
    list-style: none outside;
    display: flex;
    flex-wrap: nowrap;
}


.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li input {
    margin: 0 .4375em;
    vertical-align: top
}

.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li label {
    display: inline;
    text-align: left;
}

.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates .amount {
    font-weight: 700
}

.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates .payment_box {
    display: none !important;
}

/* Delivery date alignment */
.woocommerce #ss-shipping-date-selector.brightnexo-align-right ul.ss_shipping_dates li {
    justify-content: flex-end;
}
.woocommerce #ss-shipping-date-selector.brightnexo-align-right ul.ss_shipping_dates li input {
    order: 2;
}
.woocommerce #ss-shipping-date-selector.brightnexo-align-right ul.ss_shipping_dates li label {
    text-align: right;
}

/* Cart styling for datalist variations*/
.widget_shopping_cart_content dl.variation {
    width: 190px;
    word-break: break-word;
}
.widget_shopping_cart_content dl.variation dt {
    width: 70px;
}
.widget_shopping_cart_content dl.variation dd {
    width: 110px;
}
.widget_shopping_cart_content dl.variation dt.variation-Uploaden {
    display: none;
}
.widget_shopping_cart_content dl.variation dd.variation-Uploaden {
    grid-column: span 2;
    width: 190px;
}
.widget_shopping_cart_content dl.variation dd.variation-Uploaden p a {
    text-align: center;
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   Leverdatum en verzendmethode in de kassa als nette kaarten.
   WHY  De standaardweergave is een kale radiolijst; op een productpagina met
        prijzen en data leest dat slecht en oogt het onaf.
   HOW  Alleen opmaak, geen markup-wijziging, dus elk thema krijgt hetzelfde.
   -------------------------------------------------------------------------- */
.woocommerce #ss-shipping-date-selector {
    margin: 0 0 18px;
}
.woocommerce #ss-shipping-date-selector .shipping-dates-header,
.woocommerce #ss-shipping-date-selector th {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li {
    margin: 0;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s ease;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li:last-child {
    border-bottom: 0;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li:hover {
    background: #f9fafb;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li label {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li label .price {
    white-space: nowrap;
    font-weight: 600;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li label .price.no-price {
    color: #16a34a;
    font-weight: 500;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li label .price.has-price {
    color: #b45309;
}
.woocommerce #ss-shipping-date-selector ul.ss_shipping_dates li.no-dates-available p {
    margin: 0;
    padding: 4px 0;
    color: #6b7280;
    font-size: 14px;
}

/* Verzendmethodes van BrightNexo: zelfde kaartvorm, prijs rechts */
.woocommerce ul#shipping_method {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin: 0;
    padding: 0;
}
.woocommerce ul#shipping_method li {
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    text-indent: 0;
}
.woocommerce ul#shipping_method li:last-child {
    border-bottom: 0;
}
.woocommerce ul#shipping_method li:hover {
    background: #f9fafb;
}
.woocommerce ul#shipping_method li label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    cursor: pointer;
}
.woocommerce ul#shipping_method li label .woocommerce-Price-amount {
    white-space: nowrap;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Klassieke kassa: onder elkaar in plaats van twee smalle kolommen.
   WHY  Bij een configureerbaar product staan er tien tot vijftien gekozen opties
        per regel plus een lijst leverdatums en vervoerders. Geperst in de smalle
        rechterkolom wordt dat een onleesbare sliert. Dit is precies waarom de
        Spandoekdiscounter-opzet die blokken onder elkaar zet.
   HOW  Alleen opmaak: gegevens boven, bestelling met leverdatum en verzendkosten
        eronder over de volle breedte. Geen markup- of templatewijziging, dus
        elk thema krijgt hetzelfde.
   -------------------------------------------------------------------------- */
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review {
    width: 100%;
    float: none;
    clear: both;
}
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
    width: 100%;
    float: none;
}
.woocommerce-checkout form.checkout #order_review_heading {
    margin-top: 32px;
}
.woocommerce-checkout form.checkout #order_review {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    background: #fff;
}
.woocommerce-checkout form.checkout #order_review table.shop_table {
    width: 100%;
}
/* De regel met de gekozen opties mag ademen: die staat anders in een kolom van
   twee centimeter breed. */
.woocommerce-checkout form.checkout #order_review table.shop_table td.product-name {
    width: 65%;
    line-height: 1.6;
}
.woocommerce-checkout form.checkout #order_review table.shop_table td.product-name dl.variation dt,
.woocommerce-checkout form.checkout #order_review table.shop_table td.product-name dl.variation dd {
    display: inline;
    margin: 0;
    font-size: 13px;
}
.woocommerce-checkout form.checkout #order_review table.shop_table td.product-name dl.variation dd {
    margin-right: 10px;
}
.woocommerce-checkout form.checkout #order_review table.shop_table td.product-name dl.variation dd:after {
    content: "";
    display: block;
}
.woocommerce-checkout form.checkout #order_review table.shop_table td.product-total {
    width: 35%;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}
/* Leverdatum en verzendkosten als eigen blok over de volle breedte */
.woocommerce-checkout #ss-shipping-date-selector th,
.woocommerce-checkout table.shop_table tr.shipping th {
    width: 30%;
    vertical-align: top;
    padding-top: 14px;
}
.woocommerce-checkout table.shop_table tr.shipping td {
    width: 70%;
}
@media (min-width: 900px) {
    .woocommerce-checkout form.checkout .col2-set .col-1,
    .woocommerce-checkout form.checkout .col2-set .col-2 {
        width: 48%;
        float: left;
    }
    .woocommerce-checkout form.checkout .col2-set .col-2 {
        float: right;
    }
}


/* (Kolomindeling van de kassa staat nu in includes/brightnexo-lite-checkout-layout.php.) */


/* Verzending en leverdatum als eigen blok over de volle breedte, niet als smal
   kolommetje naast een label. Zo staat het ook bij de Spandoekdiscounter: kop
   erboven, de keuzes eronder over de hele breedte. */
.woocommerce-checkout #order_review table.shop_table tr.shipping > th,
.woocommerce-checkout #order_review table.shop_table tr.shipping > td,
.woocommerce-checkout #order_review table.shop_table tr#ss-shipping-date-selector > th,
.woocommerce-checkout #order_review table.shop_table tr#ss-shipping-date-selector > td {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}
.woocommerce-checkout #order_review table.shop_table tr.shipping > th,
.woocommerce-checkout #order_review table.shop_table tr#ss-shipping-date-selector > th {
    padding-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 0;
}
.woocommerce-checkout #order_review table.shop_table tr.shipping > td {
    padding-top: 0;
}
.woocommerce-checkout ul#shipping_method li label {
    width: 100%;
}
/* Twee kolommen zodra er ruimte is: een lange lijst vervoerders leest dan prettiger. */
@media (min-width: 900px) {
    .woocommerce-checkout ul#shipping_method {
        column-count: 2;
        column-gap: 0;
    }
    .woocommerce-checkout ul#shipping_method li {
        break-inside: avoid;
    }
}

/* WHAT  Een productbeeld wordt nooit groter getoond dan het bestand zelf is, en nooit hoger dan
         60 procent van het scherm.
   WHY   WooCommerce zet het galerijbeeld op width:100% van de kolom. Bij onze producten is dat
         beeld vaak een smalle, hoge vlag (VG-baniervlag: 320 bij 947 px) en dan werd het naar
         425 px opgeblazen: onscherp en veel te dominant naast de tekst. Kleiner tonen dan het
         bestand mag wel, groter niet.
   HOW   width:auto in plaats van 100%, met max-width:100% zodat een groot beeld nog steeds in de
         kolom past. Geen vaste maten en geen themaselectors, dus dit werkt op elke installatie.
   WHERE assets/brightnexo-lite.css, geldt op de productpagina van elke shop. */
.woocommerce div.product div.images img,
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery img.wp-post-image {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    margin-left: auto;
    margin-right: auto;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image {
    text-align: center;
}

/* WHAT  De maat van de keuzebeelden in de configurator, als er een shop is die er van af wil.
   WHY   Een ontwerp is de keuze zelf, dus het beeld moet leesbaar zijn; te klein en de klant ziet
         het verschil niet, te groot en een enkele stap vult het hele scherm. De configurator kiest
         zelf een maat die voor de meeste ontwerpen werkt (300 px hoog, alle opties naast elkaar).
         Deze regel is er alleen voor de shop die een andere maat wil.
   HOW   LET OP, dit kan NIET met een gewone selector. De configurator is een web component
         <wwa-configurator> met een eigen shadow DOM; CSS van de pagina komt daar niet binnen, dus
         een regel als .wwa-configurator img raakt niets (die stond hier tot 2.1.99 en deed niets).
         Wat wel door de shadow-grens heen erft is een CSS-VARIABELE. Zet dus de variabele, niet
         de selector. Standaard staat hij hier UIT, zodat de configurator zijn eigen maat houdt.
   WHERE assets/brightnexo-lite.css plus src/components/StepChoiceOption.vue in de configurator. */
/* wwa-configurator { --bnx-keuzebeeld-hoogte: 220px; } */