/*
==  WOOCOMMERCE THEME DETAILS  ============================================================
    Theme Name: Serutech
	Theme URI: https://www.serutech.nl/
    Description: Woocommerce Stylesheet Serutech
    Version: 1.0
	Author: Kracht Internet Marketing
	Author URI: https://www.krachtinternetmarketing.nl

===============================================================================
*/

/*---------------------------------------------- 
	1.1 Basics
------------------------------------------------*/
	:root {
		--red: #D0342C;
	}

	.woocommerce a {
		color: var(--orange);
	}

	.woocommerce a:hover {
		color: var(--black);
	}

	.woocommerce .button ,
	.woocommerce #review_form #respond .form-submit input {
		font-size: 0.8rem !important;
		font-weight: 600 !important;
		line-height: 1rem !important;
		padding: 0.75rem 1.5rem !important;
		color: var(--white) !important;
		background: var(--orange) !important;
		border: none !important;
		border-radius: 5px !important;
		display: inline-flex !important;
		margin: 0 !important;
		transition: all 0.3s ease-in-out;
	}

	/* Zelfde hover als .btn in stylesheet.css: geen kleurverandering, alleen
	   een lift van 2px, en die pas vanaf 1200px. De kleuren staan hier
	   expliciet omdat WooCommerce zijn eigen grijze hover meebrengt. */
	.woocommerce .button:hover ,
	.woocommerce #review_form #respond .form-submit input:hover {
		background: var(--orange) !important;
		color: var(--white) !important;
	}

	@media (min-width: 1200px) {
		.woocommerce .button:hover ,
		.woocommerce #review_form #respond .form-submit input:hover {
			transform: translateY(-2px);
		}
	}

	.woocommerce select {
		font-size: 0.7rem;
		border: 0.5px solid var(--grey);
		color: var(--black);
		width: 100%;
		min-width: 150px;
		height: 50px;
		padding: 0 1rem;
		margin: 0 !important;
		background-color: var(--white) !important;
		background-image:url(../images/dropdown-select.svg) !important;
		background-repeat:no-repeat;
		background-position: right !important;
		-webkit-appearance: none;
		appearance:none;
		-moz-appearance: none;
		background-size: 44px 20px;
		border-radius: 5px;
	}

	.woocommerce select::-ms-expand {
   		display: none;
	}

	.woocommerce input::placeholder,
	.woocommerce textarea::placeholder {
		font-size: 0.7rem;
	}

	.woocommerce h2 {
		font-size: 1.4rem;
		color: var(--black) !important;
		margin-bottom: 1rem;
	}

	.woocommerce .content-block p + p {
		margin: 0 !important;
	}

	.woocommerce .content-block a {
		color: var(--orange);
	}

    .call-to-action .content-block p + p {
        margin-top: 1.5rem !important;
    }

	.woocommerce label {
		font-size: 0.7rem;
		font-weight: 700;
		margin-bottom: 0.25rem !important;
	}

	.woocommerce ins {
		text-decoration: none !important;
		font-weight: 700;
	}

	.woocommerce #respond input#submit.added::after, 
	.woocommerce a.button.added::after, 
	.woocommerce button.button.added::after, 
	.woocommerce input.button.added::after {
		display: none !important;
	}

  	.woocommerce .woocommerce-form-login input.woocommerce-Input ,
	.woocommerce .woocommerce-form-login span.password-input {
		width: 100% !important;
		max-width: 20rem !important;
	}

	.woocommerce .u-column1 + .u-column2 {
		margin-top: 1.5rem;
	}

	.woocommerce .woocommerce-form-register input.woocommerce-Input ,
	.woocommerce .woocommerce-form-register span.password-input{
		width: 100% !important;
		max-width: 30rem !important;
	}

	.woocommerce-notices-wrapper {
		position: relative;
	}

	.woocommerce-message {
		border-top-color: var(--orange);		
		width: 100%;
		z-index: 9;
        background-color: none !important;
	}

	/* De link die in de melding de knop vervangt, zie kim_melding_link(). */
	/* Rechts, net als de knop die hij vervangt: WooCommerce laat die ook
	   naar rechts zweven. */
	.woocommerce-message a.kim-melding-link {
		float: right;
		font-weight: 600;
		text-decoration: underline;
		margin-left: 1rem;
	}

	.woocommerce-error {
		margin-bottom: 2rem !important;
	}

    .woocommerce span.onsale {
        line-height: 1.75rem !important;
        border-radius: 5px !important;
        background: var(--orange) !important;
        padding: 0 0.75rem !important;
        min-height: inherit !important;
        margin: 0;	
	}

    .woocommerce ul.products li.product .onsale {
		top: 0.5rem;
		left: 0.5rem;
        right: inherit !important;
	}

	.woocommerce div.product span.onsale {
		left: 1rem;
		top: 1rem;
	}

	.woocommerce #header.position-absolute {
		position: absolute !important;
		top: 0;
	}

	.woocommerce ul.products li::before {
		content: none !important;
	}

	.woocommerce .woocommerce-notices-wrapper ul {
		padding: 1rem 2rem 1rem 3.5rem !important;
	}

	.woocommerce.content-block ul li:before {
		content: none !important;
	}

	.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward {
		font-size: 0.65rem !important;
		line-height: 1rem !important;
		text-decoration: none !important;
	}

	.woocommerce-error li::before {
		display: none !important;
	}

	.woocommerce-error li {
		padding-left: 2.75rem !important;
	}

	body.woocommerce-checkout .micromodal-slide.is-open {
		display: none !important;
	}

/*---------------------------------------------- 
	1.2 Term Description
------------------------------------------------*/
	.term-description p + p {
		margin-top: 1.5rem !important;
	}

	.term-description p + p ,
	.term-description p + h2 ,
	.term-description p + h3 ,
	.term-description p + h4 ,
	.term-description p + h5 ,
	.term-description p + ul ,
	.term-description h3 + ul ,
	.term-description h4 + ul ,
	.term-description ul + p ,
	.term-description ul + h3 {
		margin-top: 1.5rem !important;
	}

	.term-description h3 ,
	.term-description h4 {
		margin-bottom: 1rem;
	}

	#description .images .item:nth-child(even) {
		padding-top: 4rem;
	} 

/*---------------------------------------------- 
	1.2 Term Description
------------------------------------------------*/
	.term-description p + p {
		margin-top: 1.5rem !important;
	}

	.term-description p + p ,
	.term-description p + h2 ,
	.term-description p + h3 ,
	.term-description p + h4 ,
	.term-description p + h5 ,
	.term-description p + ul ,
	.term-description h3 + ul ,
	.term-description h4 + ul ,
	.term-description ul + p ,
	.term-description ul + h3 {
		margin-top: 1.5rem !important;
	}

	.term-description h3 ,
	.term-description h4 {
		margin-bottom: 1rem;
	}

	.hero__wrapper .term-description a {
		color: var(--white);
		font-weight: 700 !important;
	}

	.hero__wrapper .term-description a:hover {
		color: var(--light-orange);
	}
	
/*---------------------------------------------- 
	1.3 Zoekformulier
------------------------------------------------*/
	.dgwt-wcas-search-wrapp {
		width: 100% !important;
        margin: 0 !important;
		max-width: 16.5rem !important;
	}

	.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
		padding: 10px 50px;
		font-size: 0.7rem !important;
		color: var(--black) !important;
		font-weight: 400 !important;
		height: 2.5rem !important;
        width: 100% !important;
		border-radius: 50px !important;
		border: none !important;
		background: var(--white) !important;
		box-shadow: none !important;
	}

	.dgwt-wcas-no-submit .dgwt-wcas-ico-magnifier {
		fill: var(--black) !important;
		opacity: 0.8 !important;
	}

	.dgwt-wcas-search-input::placeholder {
		color: var(--black) !important;
		font-weight: 700 !important;
		font-style: normal !important;
	}

    @media all and (max-width: 992px) {
        .dgwt-wcas-search-wrapp {
            max-width: inherit !important;
        }
    }

    @media (max-width: 576px) {
       .dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
            font-size: 0.7rem;   
        }
    }

/*---------------------------------------------- 
	1.8 Pagination
------------------------------------------------*/
	/* Losse vlakken in de stijl van de productkaarten: wit, afgerond, met
	   dezelfde schaduw. 2,5rem hoog, gelijk aan het aantalveld. WooCommerce
	   zet er zelf een omlijnde strook van met float en scheidingsranden; die
	   gaan hier weg, flex met gap regelt de ruimte ertussen. */
	.woocommerce nav.woocommerce-pagination {
		margin-top: 2.5rem;
		text-align: center;
	}

	.woocommerce nav.woocommerce-pagination ul {
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		border: none;
		white-space: normal;
	}

	.woocommerce nav.woocommerce-pagination ul li {
		float: none;
		display: block;
		border: none;
		overflow: visible;
	}

	.woocommerce nav.woocommerce-pagination ul li a ,
	.woocommerce nav.woocommerce-pagination ul li span {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding: 0 0.75rem;
		font-size: 0.7rem;
		font-weight: 600;
		line-height: 1;
		color: var(--black);
		background: var(--white);
		border-radius: 5px;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
		text-decoration: none;
		transition: all 0.3s ease-in-out;
	}

	.woocommerce nav.woocommerce-pagination ul li a:hover ,
	.woocommerce nav.woocommerce-pagination ul li a:focus {
		color: var(--orange);
		background: var(--white);
	}

	/* Dezelfde lift als .btn in stylesheet.css, en net als daar pas vanaf 1200px. */
	@media (min-width: 1200px) {
		.woocommerce nav.woocommerce-pagination ul li a:hover {
			transform: translateY(-2px);
		}
	}

	.woocommerce nav.woocommerce-pagination ul li span.current {
		color: var(--white);
		background: var(--orange);
	}

	/* De puntjes tussen de nummers zijn geen knop. */
	.woocommerce nav.woocommerce-pagination ul li span.dots {
		min-width: auto;
		padding: 0 0.25rem;
		background: none;
		box-shadow: none;
	}

/*---------------------------------------------- 
	2.1 Winkeloverzicht
------------------------------------------------*/
    .woocommerce ul.products::before,
    .woocommerce ul.products::after {
        content: none;
    }

    .woocommerce ul.products {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        z-index: 8;
    }

    .woocommerce ul.products li.product {
        grid-column: span 4;
        width: auto;
        margin: 0;
        float: none;
        clear: none;
        position: relative;
    }
    
    .woocommerce ul.products[class*="columns-"] li.product,
    .woocommerce-page ul.products[class*="columns-"] li.product {
        width: auto;
        float: none;
        clear: none;
        margin: 0;
    }

    .woocommerce ul.products li.product.product-category {
        grid-column: span 3;
    }

    .woocommerce .upsells ul.products li.product,
    .woocommerce .up-sells ul.products li.product,
    .woocommerce .related ul.products li.product {
        grid-column: span 3;
    }

    @media (max-width: 1200px) {
        .woocommerce ul.products li.product,
        .woocommerce ul.products li.product.product-category,
        .woocommerce .upsells ul.products li.product,
        .woocommerce .up-sells ul.products li.product,
        .woocommerce .related ul.products li.product {
            grid-column: span 4;
        }
    }

    @media (max-width: 992px) {
        .woocommerce ul.products li.product,
        .woocommerce ul.products li.product.product-category,
        .woocommerce .upsells ul.products li.product,
        .woocommerce .up-sells ul.products li.product,
        .woocommerce .related ul.products li.product {
            grid-column: span 6;
        }
    }

    @media (max-width: 767px) {
        .woocommerce ul.products li.product,
        .woocommerce ul.products li.product.product-category,
        .woocommerce .upsells ul.products li.product,
        .woocommerce .up-sells ul.products li.product,
        .woocommerce .related ul.products li.product {
            grid-column: span 12;
        }
    }

    .woocommerce ul.products li.product ,
    .frontpage-producten .product {
        padding: 1rem 1rem 1.75rem 1rem !important;
        border: 0.25px solid var(--black);
    }

    .woocommerce a.woocommerce-loop-product__link {
        display: flex !important;
        flex-direction: column !important;
    }

   .woocommerce ul.products li.product .image-wrapper,
    .frontpage-producten .product .image-wrapper {
        order: 1;
        background: var(--white);
        position: relative;
        width: 100%;
        margin: 0 0 0.75rem 0 !important;
        overflow: hidden;
    }

    .woocommerce ul.products .image-wrapper img,
    .frontpage-producten .product .image-wrapper img {
        transition: opacity .3s ease;
    }

    .woocommerce ul.products .image-wrapper .product-hover-img,
    .frontpage-producten .product .image-wrapper .product-hover-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
    }

    .woocommerce ul.products li.product:hover .product-hover-img,
    .frontpage-producten .product:hover .product-hover-img {
        opacity: 1;
    }

    .woocommerce ul.products li.product a img {
        margin: 0 !important;
    }

    .woocommerce ul.products li.product .product__brand ,
    .frontpage-producten .product .product__brand {
        order: 2; 
    }    

    .woocommerce ul.products li.product .woocommerce-loop-product__title ,
    .woocommerce ul.products li.product .woocommerce-loop-category__title ,
    .frontpage-producten .product .woocommerce-loop-product__title {
        font-size: 1rem !important;
        line-height: 1.8rem;
        font-weight: 700 !important;
        color: var(--black) !important;
        padding: 0;
        margin: 0 0 0.5rem 0 !important;
        display: block;
        min-height: 3.6rem;
        text-align: left !important;
        order: 3;
    }

    .woocommerce ul.products li.product .woocommerce-loop-category__title {
        text-align: center !important;
        min-height: inherit;
    }

    .woocommerce ul.products li.product .price .from {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--light-grey);
        margin-right: 0.25rem;
        text-transform: inherit !important;
    }

    .woocommerce ul.products li.product .price ,
    .frontpage-producten .product .price {
        font-size: 0.9rem !important;
        font-weight: 700;
        color: var(--dark-grey) !important;
        line-height: 2rem !important;
        margin: 0 !important;
        order: 3;
    }

    small .woocommerce-Price-amount.amount bdi::after {
        content: none;
    }	

    .woocommerce ul.products li.product .price del ,
    .frontpage-producten .product .price del {
        font-size: 0.9rem;
        color: var(--dark-grey) !important;
        line-height: 1.5rem !important;
        font-weight: 400 !important;
        margin-right: 0.2rem !important;
        display: inline-block !important;
    }

    .woocommerce ul.products li.product .price .woocommerce-price-suffix ,
    .frontpage-producten .woocommerce .product .price .woocommerce-price-suffix {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--grey);
        margin-left: 0.25rem;
        display: inline-block;
    }

    .woocommerce ul.products li.product .icon-arrow ,
    .frontpage-producten .woocommerce .product .icon-arrow {
        position: absolute;
        right: 1rem;
        bottom: 1.75rem;
    }

    .woocommerce ul.products li.product .icon-arrow i,
    .frontpage-producten .woocommerce .product .icon-arrow i {
        font-size: 1.1rem;
        color: var(--black) !important;
        background: var(--orange) !important;
        line-height: 2.25rem;
        width: 2.25rem;
        height: 2.25rem;
        text-align: center;
        border-radius: 100%;
        transition: all 0.4s ease;
    }

    .woocommerce ul.products li.product .stock ,
    .frontpage-producten .woocommerce .product .stock {
        order: 4;
        line-height: 2.25rem !important;
        margin: 0 !important;
    }

    .woocommerce .product .price ins, 
    .woocommerce div.product span.price ins {
        font-weight: 600 !important;
    }

    @media all and (max-width: 1500px) {
        .woocommerce ul.products li.product .woocommerce-loop-product__title ,
        .woocommerce ul.products li.product .woocommerce-loop-category__title ,
        .frontpage-producten .product .woocommerce-loop-product__title {
            font-size: 1rem !important;
        }
    }
/*---------------------------------------------- 
	2.2 Sidebar Filter
------------------------------------------------*/
	.wcpf-front-element {
		padding-bottom: 1.5rem;
		margin-bottom: 1.5rem;
		border-bottom: 1px solid var(--grey);
	}

	.wcpf-front-element:last-child {
		border-bottom: 0;
	}

	.wcpf-item-label {
		display: flex !important;
		align-items: center !important;
	}

   .wcpf-field-item .wcpf-heading-label {
		font-size: 0.7rem;
		line-height: 1;
		font-weight: 700 !important;
		color: var(--black) !important;
		text-transform: inherit !important;
		margin-bottom: 0.75rem;
		border: none;
	}

	.wcpf-layout-item.wcpf-box-style .wcpf-heading-label .box-toggle, 
	.wcpf-field-item.wcpf-box-style .wcpf-heading-label .box-toggle {
		color: var(--black) !important;
	}

	.wcpf-scrollbar.wcpf-front-element .wcpf-content {
		padding: 0 !important;
	}

	.wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-input-container {
        font-size: 0.75rem;
		color: var(--black);	
		border: 1px solid var(--orange);
		border-radius: 0 !important;
		margin-top: 0.7rem;
	}

	.wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item + .wcpf-checkbox-item {
		margin-top: 0.25rem;
	}

	.wcpf-filter button {
		border: none;
	}

    .wcpf-field-price-slider.wcpf-display-min-max-inputs .wcpf-max-input, 
    .wcpf-field-price-slider.wcpf-display-min-max-inputs .wcpf-min-input {
        border: none !important;
        padding: 0.25rem 0.5rem !important;
    }

    .wcpf-field-price-slider.wcpf-display-price-label .priceLabel {
        display: none !important;
    }

    @media all and (max-width: 576px) {
        .wcpf-field-item .wcpf-heading-label {
		    font-size: 1rem;
        }
        .wcpf-field-checkbox-list .wcpf-checkbox-list .wcpf-checkbox-item .wcpf-input-container {
            font-size: 0.9rem;
        }
    }

/*---------------------------------------------- 
	3. Single Product
------------------------------------------------*/
    .woocommerce .content--product::before {
        content: "";
        background: var(--lighter-grey);
        height: 4.5rem;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

	.woocommerce div.product div.images {
		width: 47% !important;
		margin: 0 !important;
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper ,
	.woocommerce div.product div.images .flex-viewport {
		background: var(--white);	
		border-radius: 20px !important;
	}

	.woocommerce div.product div.images .flex-viewport img {
		padding: 0.75rem 1.5rem !important;	
	}

	.woocommerce div.product div.images img {
		border-radius: 0;
		background:  var(--white) !important;
		width: auto !important;
		margin: 0 auto;
		padding: 1.5rem 0;
		overflow: hidden;
	}
	
	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
		background: none !important;
	}
	
	.woocommerce-product-gallery__image {
		pointer-events: none;
	}

	.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{
		height: 600px !important;
		object-fit: contain;
		object-position: center;
	}

	.woocommerce div.product div.images img {
		background:  none !important;
		margin: 0 auto !important;
		padding: 0 !important;
		border-radius: 0;
	}

    .woocommerce div.product div.images .flex-control-thumbs {
        display: flex;
    }

	.woocommerce div.product div.images .flex-control-thumbs li {
		padding: 0.75rem 0;
	}

	.woocommerce div.product div.images .flex-control-thumbs li + li {
		margin-left: 0.5rem;
	}

	.woocommerce div.product div.images li img {
		width: 100% !important;
		border-radius: 14px;
        border: 0.25px solid var(--black);
	}

	@media all and (max-width: 1200px) {
		.woocommerce div.product div.images {
			width: 48% !important;
		}
	}

	@media all and (max-width: 992px) {
		.woocommerce div.product div.images {
			width: 100% !important;	
		}
		.woocommerce div.product div.images {
			max-width: inherit !important;
		}
	}

	@media all and (max-width: 576px) {
		.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{
			height: 400px !important;
		}
	}

/* Product content -------------------------------------- */
	.woocommerce div.product div.summary {
		margin: 0;
		width: auto;
		display: flex;
		flex-direction: column;
		float: none !important;
	}

	 .woocommerce-product-details__short-description {
		order: 1;
	}

	@media all and (max-width: 992px) {
		.woocommerce div.product div.summary {
			width: 100% !important;	
            max-width: inherit !important;
			margin-bottom: 1.5rem;
            float: none !important;
		}
		.woocommerce div.product div.summary h1 {
			color: var(--black) !important;
			min-height: inherit;
		}
	}

/* Stock -------------------------------------- */
	/* Meestal staat de tekst binnen het formulier, direct boven de knop (zie
	   kim_levertijd_bij_knop). Alleen als een product niet op voorraad is, is er
	   geen formulier en staat hij los in de samenvatting; order 7 zet hem dan
	   onder de prijs. */
	.woocommerce .product .stock{
		order: 7;
		font-size: 0.65rem;
		margin: 1rem 0 !important;
	}

	/* Binnen het formulier over de volle breedte, op zijn plek in de HTML. Het
	   formulier van Addify is een rij; de tekst en de opties krijgen daarin een
	   eigen regel, aantal en knop blijven naast elkaar. */
	.woocommerce div.product form.cart:not(.variations_form) {
		flex-wrap: wrap;
	}

	.woocommerce div.product form.cart p.stock ,
	.woocommerce div.product form.cart:not(.variations_form) > .wc-pao-addons-container {
		order: 0;
		flex: 0 0 100%;
	}

	/* De marge onder de opties is al ruim genoeg. */
	.woocommerce div.product form.cart .wc-pao-addons-container ~ p.stock {
		margin-top: 0 !important;
	}

	/* Bij varianten heeft de knopregel van het thema zelf mt-4 (1,5rem). Onder
	   de tekst is 1rem genoeg, net als bij de rest. */
	.woocommerce div.product .kim-variant-levertijd + .mt-4 {
		margin-top: 0 !important;
	}

	/* WooCommerce noemt de nabestelstatus available-on-backorder, niet
	   on-backorder. td.product-name: dezelfde status staat ook in de winkelwagen. */
	.woocommerce .product .stock.in-stock ,
	.woocommerce td.product-name .stock.in-stock {
		color: #1E9E47;
	}

	.woocommerce .product .stock.out-of-stock {
		color: var(--red);
	}

	.woocommerce .product .stock.op-offerte {
		color: var(--black);
	}

	.woocommerce .product .stock.available-on-backorder ,
	.woocommerce td.product-name .stock.available-on-backorder {
		color: var(--orange);
	}

	.woocommerce td.product-name .stock {
		margin: 0.25rem 0 0 0;
		font-size: 0.65rem !important;
		line-height: 1.25rem;
	}

/* Price -------------------------------------- */
	.woocommerce .product p.price {
		font-size: 1.5rem !important;
		font-weight: 700;
		color: var(--black) !important;
		order: 5;
		padding: 0 !important;
		margin: 1.5rem 0 0 0 !important;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 0.35rem;
	}

	.woocommerce-Price-currencySymbol {
		padding-right: 0 !important;
	}

	/* --grey haalde op wit maar 1,4:1 contrast; --darker-grey haalt 10:1. */
	/* Samen met de column-gap hierboven weer 0,75rem, zoals het was. */
	.woocommerce .product p.price .woocommerce-price-suffix {
		font-size: 0.65rem;
		color: var(--darker-grey) !important;
		font-weight: 400;
        margin-left: 0.4rem;
	}

	.woocommerce .product p.price del {
		font-size: 1.25rem;
		margin-right: 0.5rem;
	}

/* Button -------------------------------------- */
    .woocommerce .product-badge {
        order: 6;
    }

    .woocommerce .product-badge span {
        font-size: 0.65rem !important;
        font-weight: 700;
        line-height: 1.75rem !important;
        border-radius: 5px !important;
        padding: 0 0.75rem !important;
        min-height: inherit !important;
    }

/* Button -------------------------------------- */
	.woocommerce div.product form.cart  {
		margin: 1.5rem 0 0 0 !important;
		order: 8;
		display: flex !important;
	}

	.woocommerce .quantity .qty {
		width: 4rem;
		height: 2.5rem;
		font-size: 0.7rem;
		font-weight: 400;
		line-height: 1rem;
		padding: 0 0.5rem;
		text-align: center;
		color: var(--black);
		background: var(--white);
		margin-right: 0.5rem !important;
		border: 0.5px solid var(--grey) !important;
		border-radius: 5px !important;
	}

	.woocommerce .quantity .qty:focus {
		outline: none;
		border-color: var(--orange) !important;
		box-shadow: none;
	}

	/* :not(.loading) is nodig. Tijdens het verwerken zet WooCommerce de klasse
	   loading op de knop, met een eigen ::after die draait:
	       .loading::after { content:"\e01c"; animation: spin 2s linear infinite }
	   Deze regel overschrijft alleen content en font-family, niet animation —
	   het plusje ging daardoor meedraaien. Nu blijft de laadstatus onaangeroerd
	   en toont WooCommerce daar zijn eigen spinner. */
	.woocommerce div.product form.cart .button:not(.loading)::after,
	.woocommerce div.product .single_add_to_cart_button:not(.loading)::after {
		font-family: "Font Awesome 7 Pro";
		font-weight: 900;
		content: "\002b";
		margin-left: 0.5rem;
	}

/* Bundels -------------------------------------- */
	/* Optionele onderdelen van een bundel als aanklikbare tegels, onder
	   elkaar. Het klikken regelt kim_bundel_script() in kim-woocommerce.php;
	   de gekozen staat komt hier uit het echte vinkje (:has). */
	.woocommerce div.product form.bundle_form {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		align-items: start;
	}

	.woocommerce div.product form.bundle_form > :not(.bundled_product) {
		grid-column: 1 / -1;
	}

	.woocommerce div.product .kim-bundel-kop {
		margin: 0;
	}

	.woocommerce div.product form.bundle_form .bundled_product {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		position: relative;
		margin: 0 !important;
		padding: 0.75rem;
		background: var(--white);
		border: 1px solid var(--grey);
		border-radius: 5px;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.woocommerce div.product form.bundle_form .bundled_item_optional {
		cursor: pointer;
		user-select: none;
	}

	.woocommerce div.product form.bundle_form .bundled_item_optional:hover {
		border-color: var(--dark-grey);
	}

	.woocommerce div.product form.bundle_form .bundled_item_optional:has(.bundled_product_checkbox:checked) {
		border-color: var(--orange);
		box-shadow: 0 0 0 1px var(--orange);
	}

	/* Vinkje rechtsboven in een gekozen tegel. */
	.woocommerce div.product form.bundle_form .bundled_item_optional:has(.bundled_product_checkbox:checked)::after {
		content: "\f00c";
		font-family: "Font Awesome 7 Pro";
		font-weight: 900;
		font-size: 0.55rem;
		line-height: 1.1rem;
		width: 1.1rem;
		height: 1.1rem;
		text-align: center;
		color: var(--white);
		background: var(--orange);
		border-radius: 100%;
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
	}

	/* Focusrand alleen bij bedienen met het toetsenbord. Met :focus-within
	   kwam hij ook na elke muisklik, omdat het label de focus op het vinkje zet. */
	.woocommerce div.product form.bundle_form .bundled_item_optional:has(.bundled_product_checkbox:focus-visible) {
		outline: 2px solid var(--orange);
		outline-offset: 2px;
	}

	/* De afbeelding kreeg via de klasse images de float en breedte van de grote
	   productfoto. */
	.woocommerce div.product form.bundle_form .bundled_product div.images {
		float: none;
		width: 3.5rem !important;
		flex: 0 0 3.5rem;
		margin: 0 !important;
	}

	.woocommerce div.product form.bundle_form .bundled_product div.images img {
		width: 100%;
		height: auto;
		border-radius: 5px;
	}

	.woocommerce div.product form.bundle_form .bundled_product .details {
		flex: 1 1 auto;
		min-width: 0;
		float: none;
		width: auto;
		padding-right: 1.25rem;
	}

	.woocommerce div.product form.bundle_form .bundled_product .bundled_product_title {
		font-size: 0.75rem !important;
		line-height: 1.1rem;
		font-weight: 700;
		margin: 0 0 0.25rem 0 !important;
		min-height: 0;
	}

	.woocommerce div.product form.bundle_form .bundled_product_optional_checkbox {
		display: block;
		font-size: 0.65rem;
		line-height: 1rem;
		margin: 0;
		cursor: pointer;
	}

	/* Geen link naar het losse product: de tegel is om te kiezen, niet om
	   weg te klikken. */
	.woocommerce div.product form.bundle_form .bundled_product_title_link {
		display: none;
	}

	/* De bediening in de tegel houdt een gewone cursor. */
	.woocommerce div.product form.bundle_form .bundled_item_optional .variations ,
	.woocommerce div.product form.bundle_form .bundled_item_optional select {
		cursor: auto;
	}

	/* 'Toevoegen voor' grijs, het bedrag net iets nadrukkelijker. WooCommerce
	   maakt span.price in een product 1,25em en olijfgroen; hier even groot
	   als de tekst eromheen. */
	.woocommerce div.product form.bundle_form .bundled_product_optional_checkbox {
		color: var(--darker-grey);
	}

	.woocommerce div.product form.bundle_form .bundled_product_optional_checkbox .price {
		font-size: 1em !important;
		font-weight: 600;
		color: var(--black) !important;
		margin-left: 0.15rem;
	}

	.woocommerce div.product form.bundle_form .bundled_product .woocommerce-price-suffix {
		display: none;
	}

	/* Het vinkje zelf onzichtbaar, maar wel bereikbaar met Tab. */
	.woocommerce div.product form.bundle_form .bundled_product_checkbox {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		margin: 0;
	}

	.woocommerce div.product form.bundle_form .bundled_product .stock {
		margin: 0.25rem 0 0 0 !important;
	}

	/* Variantkeuze in de tegel, bijvoorbeeld de lengte van de M8-kabel. Het
	   thema verbergt bij het hoofdproduct de gewone keuzelijst omdat Woo
	   Variation Swatches er knoppen van maakt; in een bundel gebeurt dat niet
	   altijd, en dan was er niets om te kiezen. Hier blijft de lijst zichtbaar. */
	.woocommerce div.product form.bundle_form .bundled_product .variations {
		margin: 0.5rem 0 0 0;
	}

	.woocommerce div.product form.bundle_form .bundled_product .variations label {
		font-size: 0.65rem;
		margin: 0 0 0.25rem 0 !important;
	}

	.woocommerce div.product form.bundle_form .bundled_product .variations select {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		height: 2rem;
		font-size: 0.65rem;
		padding: 0 2rem 0 0.5rem;
	}

	.woocommerce div.product form.bundle_form .bundled_product .reset_variations {
		font-size: 0.6rem;
	}

	/* Prijs van de gekozen variant: in een tegel net zo groot als 'Toevoegen
	   voor ...', niet de grote oranje prijs van de productpagina. */
	.woocommerce div.product form.bundle_form .bundled_product .woocommerce-variation-price span.price {
		font-size: 0.7rem !important;
		font-weight: 600 !important;
		color: var(--black) !important;
		margin: 0.25rem 0 0 0;
	}

	.woocommerce div.product form.bundle_form .bundled_product .woocommerce-variation-availability .stock {
		margin: 0.25rem 0 0 0 !important;
	}

/* Variable -------------------------------------- */
	.woocommerce div.product form.cart .variations,
	.woocommerce div.product form.cart .variations tbody,
	.woocommerce div.product form.cart .variations tr,
	.woocommerce div.product form.cart .variations th,
	.woocommerce div.product form.cart .variations td {
		display: block;
		width: 100% !important;
		padding: 0;
		border: none;
	}

	.woocommerce div.product form.cart .variations {
		margin: 0 0 0.25rem 0;
	}

	.woocommerce div.product form.cart .variations tr + tr {
		margin-top: 0.75rem;
	}

	.woocommerce div.product form.cart .variations td select {
		max-width: 16rem;
		min-width: inherit !important;
	}

	.woocommerce div.product form.cart .variations tr th label {
		display: block;
		font-size: 0.7rem;
		font-weight: 700;
		color: var(--black);
		text-align: left;
		line-height: 1.25rem;
		padding: 0;
		margin: 0 0 0.35rem 0 !important;
	}

	.woocommerce .woocommerce-variation-price span.price {
		font-size: 1.25rem !important;
		color: var(--orange) !important;
		font-weight: 700 !important;
		margin-bottom: 1rem;
		display: flex;
        align-items: center;
	}
	
	.woocommerce .woocommerce-variation-price span.price .woocommerce-price-suffix {
		font-size: 0.65rem;
		color: var(--darker-grey) !important;
		font-weight: 400;
        margin-left: 0.75rem !important;
	}

	/* 'Vanaf:' bij bundels en producten met een prijsbereik: een klein grijs
	   label op dezelfde tekstlijn als het bedrag, net als het achtervoegsel. */
	.woocommerce .product p.price span.from {
		font-size: 0.7rem;
		font-weight: 400 !important;
		color: var(--darker-grey);
	}

   .woo-variation-swatches .variations {
        border-collapse: separate !important;
        border-spacing: 0 0.75rem;
    }

    .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.selected:not(.no-stock) .variable-item-contents:before, 
    .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).image-variable-item.selected:not(.no-stock) .variable-item-contents:before {
        background-image: none !important;
    }

    .woocommerce .product .variable-items-wrapper.radio-variable-items-wrapper {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row !important;
        gap: 8px;
        margin: 10px 0;
        padding: 0;
        list-style: none;
    }

    .woocommerce .product .radio-variable-item {
        display: inline-flex;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .woocommerce .product .radio-variable-item .variable-item-contents {
        font-size: 0.7rem;
        font-weight: 400 !important;
        color: var(--black);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 1rem;
        background-color: var(--lighter-grey);
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s ease;
        margin: 0 !important;
    }

    .woocommerce .product .radio-variable-item .variable-item-contents:hover,
    .woocommerce .product .radio-variable-item.selected .variable-item-contents,
    .woocommerce .product .radio-variable-item[aria-checked="true"] .variable-item-contents {
        background: var(--black);
        color: var(--white);
    }

    .woocommerce .product .radio-variable-item .variable-item-radio-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .woocommerce .product .woo-variation-raw-select {
        display: none !important;
    }

    .woo-variation-swatches .variable-items-wrapper.radio-variable-items-wrapper .radio-variable-item label {
        padding: 0 !important;
        margin: 0 !important;
    }   

    .woo-variation-swatches .variable-items-wrapper.radio-variable-items-wrapper .radio-variable-item input+span {
        margin: 0 !important;
    }

    .woocommerce .product .radio-variable-item[data-wvstooltip]::before,
    .woocommerce .product .radio-variable-item[data-wvstooltip]::after {
        display: none !important;
    }

    .woocommerce div.product form.cart .reset_variations {
        font-size: 0.7rem !important;
        display: block;
        margin-top: 0.5rem;
        color: var(--darker-grey);
    }

    .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, 
    .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
       box-shadow: var(--wvs-selected-item-box-shadow,0 0 0 3px #000) !important;
    }

/* Addons -------------------------------------- */
	 .woocommerce .product .wc-pao-addon .wc-pao-addon-wrap {
		margin: 0 !important;
		padding: 0 !important;
	 }

	 .woocommerce .product .wc-pao-addons-container {
		margin-bottom: 1.5rem !important;
	 }

	.woocommerce .product .wc-pao-addon .wc-pao-addon-name {
		display: block;
		font-size: 0.7rem;
		font-weight: 700;
		color: var(--black);
		line-height: 1.25rem;
		padding: 0;
		margin: 0 0 0.35rem 0 !important;
	}

	.woocommerce .product .wc-pao-addon .wc-pao-addon-name em {
		color: var(--red);
	}

	.woocommerce .product .wc-pao-addon .wc-pao-addon-description {
		font-size: 0.65rem;
		margin: 0 0 0.35rem 0;
	}

	.woocommerce .product .wc-pao-addon .wc-pao-addon-field {
		font-size: 0.7rem;
		border: 0.5px solid var(--grey);
		color: var(--black);
		width: 100%;
		max-width: 16rem;
		height: 50px;
		padding: 0 1rem;
		margin: 0;
		background-color: var(--white);
		border-radius: 5px;
	}

	.woocommerce .product .wc-pao-addon .wc-pao-addon-field:focus {
		outline: none;
		border-color: var(--orange);
		box-shadow: none;
	}

	.woocommerce .product .wc-pao-addon + .wc-pao-addon {
		margin-top: 0.75rem;
	}

/* Tabs -------------------------------------- */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		padding: 0;
		margin-bottom: 2rem !important;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		border: none;
		background: none !important;
		padding: 0;
		margin: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 0.75rem !important;
		color: var(--black);
        border-radius: 5px !important;
        border: 0.5px solid var(--grey) !important;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a ,
	.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
		color: var(--white);
        background: var(--orange);
        border-color: var(--orange);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li + li {
		margin-left: 0.75rem;
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs::before ,
	.woocommerce div.product .woocommerce-tabs ul.tabs li::before ,
	.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
		content: none;
	}

	.woocommerce div.product .woocommerce-tabs .content-block p + p {
		margin-top: 1.5rem !important;
	}

	.woocommerce div.product .woocommerce-tabs .panel {
		margin: 0 !important;
	}

	@media all and (max-width: 992px) {
		.woocommerce div.product .tabs-wrapper {
			padding-top: 2rem !important;
		}
		.woocommerce div.product .woocommerce-tabs {
			margin-top: 0 !important;
		}	
	}

	@media all and (max-width: 576px) {
		.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th {
			width: 15rem;
		}
	}

/* Beschrijving -------------------------------------- */
    .product-content__description.content-block p + p {
		margin-top: 1.5rem !important;
	}

/* Eigenschappen -------------------------------------- */
	/* Als .table.table-striped uit het oude template: links uitgelijnd,
	   geen randen, alternerende rijen. */
	.woocommerce table.shop_attributes,
	.woocommerce table.shop_attributes tr {
		border: none;
		background-color: (--white) !important;
	}

	.woocommerce table.shop_attributes th,
	.woocommerce table.shop_attributes td {
		border: none;
		background: transparent !important;
		width: auto;
		text-align: left;
		vertical-align: top;
		font-style: normal !important;
		font-weight: 400;
		padding: 0.5rem;
		line-height: 1.25rem;
	}

	.woocommerce table.shop_attributes tr:nth-child(odd) > * {
		background: rgba(0, 0, 0, 0.05) !important;
	}

	.woocommerce table.shop_attributes td p {
		margin: 0;
		padding: 0;
	}

/* Eigenschappen -------------------------------------- */
    .product__sidebar h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .product__sidebar .faqm-product-faq-section {
        border-top: 0;
        padding: 0 !important;
    }

    .product__sidebar .faqm-overview .accordion .accordion-button .accordion-button__title, 
    .product__sidebar .faqm-overview .accordion .accordion-item .accordion-body {
        font-size: 0.7rem !important;
    }


/*---------------------------------------------- 
	4. Winkelwagen
------------------------------------------------*/
	.woocommerce table.shop_table {
		border: none !important;
		border-radius: 0;
	}

	/* Winkelwagen als kaarten, gelijk aan de offertepagina in sectie 7.
	   :not(.addify-quote-form__contents) omdat Addify's offertetabel dezelfde
	   klassen shop_table en cart draagt en daar al eigen regels voor heeft.

	   Een raster in plaats van flex zoals op de offertepagina: daar zit het
	   aantalveld binnen de productnaam-cel, hier zijn prijs, aantal en subtotaal
	   losse cellen. Met flex belanden die alle drie naast elkaar rechts, boven op
	   de verwijderlink. Het raster zet ze op de plek van de oude kaart: naam
	   linksboven, aantal linksonder, bedragen rechtsboven, verwijderen
	   rechtsonder. De afbeelding staat over alle rijen heen. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents),
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tbody,
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tbody tr,
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tbody td {
		display: block;
		width: 100% !important;
		border: none !important;
		background: transparent !important;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) thead {
		display: none !important;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item {
		display: grid !important;
		grid-template-columns: 9rem minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto 1fr auto;
		grid-template-areas:
			"afbeelding naam      ."
			"afbeelding prijs     ."
			"afbeelding subtotaal ."
			"afbeelding .         ."
			"afbeelding aantal    verwijderen";
		column-gap: 1rem;
		row-gap: 0.25rem;
		align-items: start;
		background: var(--white) !important;
		border-radius: 5px;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
		padding: 1.25rem !important;
		margin-bottom: 1rem;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item td {
		padding: 0 !important;
		font-size: 0.7rem !important;
		line-height: 1.25rem;
		text-align: left !important;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-thumbnail {
		grid-area: afbeelding;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-thumbnail img {
		width: 100% !important;
		height: auto;
		border-radius: 5px;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-name {
		grid-area: naam;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-name > a {
		display: block;
		font-size: 0.9rem !important;
		line-height: 1.4rem !important;
		font-weight: 700;
		color: var(--black) !important;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-name > a:hover {
		color: var(--orange) !important;
	}

	/* Bedragen rechts, met hun kolomnaam ervoor uit het data-title-attribuut dat
	   WooCommerce meegeeft. Zonder kopbalk zou er anders twee keer een los bedrag
	   staan. Vet label, gewone waarde — als de .kim-opts van de oude kaart. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-price,
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-subtotal {
		white-space: nowrap;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-price {
		grid-area: prijs;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-subtotal {
		grid-area: subtotaal;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-price::before,
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-subtotal::before {
		content: attr(data-title);
		font-weight: 700;
		margin-right: 0.25rem;
	}

	/* Aantal linksonder, verwijderen rechtsonder: samen de onderste rasterrij,
	   dus ze lijnen vanzelf uit. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-quantity {
		grid-area: aantal;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-quantity input.qty {
		width: 4rem !important;
		max-width: 4rem !important;
		height: 2.5rem !important;
		font-size: 0.7rem !important;
		padding: 0.4rem !important;
		text-align: center;
		border: 0.5px solid var(--grey) !important;
		border-radius: 5px !important;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-remove {
		grid-area: verwijderen;
		text-align: right !important;
	}

	/* WooCommerce zet hier een kruisje neer; de offertepagina schrijft het uit.
	   Regelhoogte 2,5rem: gelijk aan het aantalveld ernaast. De voorleeshulp
	   leest het aria-label van de link, niet dit teken, dus font-size: 0 op de
	   link zelf kost niets. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-remove a.remove {
		display: inline-block;
		font-size: 0 !important;
		line-height: 2.5rem !important;
		width: auto !important;
		height: auto !important;
		color: var(--orange) !important;
		background: none !important;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-remove a.remove::after {
		content: "Verwijderen";
		font-size: 0.7rem;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.product-remove a.remove:hover {
		color: var(--black) !important;
		background: none !important;
	}

	/* Bundels in de winkelwagen als één kaart. Product Bundles zet de bundel
	   als hoofdregel (bundle_table_item, met de totaalprijs van alles samen) en
	   daaronder een regel per onderdeel (bundled_table_item). Zonder dit werd
	   elke regel een losse kaart. De onderdelen hangen nu onder de bundel vast:
	   geen eigen afstand, lichtgrijs, en de schaduw wordt tussen de regels
	   weggeknipt (clip-path) zodat het één blok lijkt. De :not() maakt deze
	   regels zwaarder dan de mobiele indeling verderop, die anders zou winnen. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundle_table_item:has(+ tr.bundled_table_item) {
		margin-bottom: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		clip-path: inset(-12px -12px 0 -12px);
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item {
		grid-template-columns: 3rem minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		grid-template-areas:
			"afbeelding naam  verwijderen"
			"afbeelding prijs verwijderen";
		align-items: center;
		background: var(--lighter-grey) !important;
		border-top: 1px solid var(--light-grey) !important;
		border-radius: 0;
		margin-bottom: 0;
		padding: 0.75rem 1.25rem 0.75rem 2.5rem !important;
		clip-path: inset(0 -12px 0 -12px);
	}

	/* Het laatste onderdeel sluit de kaart af. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item:not(:has(+ tr.bundled_table_item)) {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		margin-bottom: 1rem;
		clip-path: inset(0 -12px -12px -12px);
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item td.product-name > a {
		font-size: 0.7rem !important;
		line-height: 1rem !important;
	}

	/* Aantal ligt vast in de bundel; het subtotaal zit al in de bundelprijs. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item td.product-quantity ,
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item td.product-subtotal {
		display: none !important;
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item td.product-remove a.remove {
		line-height: 1rem !important;
	}

	/* Wat de bundelplugin zelf toevoegt: een inspringing rond de naam (32px),
	   waardoor de prijs er scheef onder stond, en een gedraaid pijltje achter
	   de prijs. In een kaart zijn beide overbodig. */
	.woocommerce table.shop_table.cart tr.bundled_table_item .bundled_table_item_indent {
		padding-left: 0;
	}

	.woocommerce table.shop_table.cart tr.bundled_table_item .bundled_table_item_price::after {
		content: none;
	}

	/* Prijs klein en grijs recht onder de naam, zonder het woord 'Prijs'. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item td.product-price {
		font-size: 0.65rem !important;
		line-height: 1rem;
		color: var(--darker-grey);
	}

	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item td.product-price::before {
		content: none;
	}

	/* Voorraad bij een onderdeel: kort 'Op voorraad' (zie
	   kim_levertijd_winkelwagen), klein onder de naam. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item.bundled_table_item td.product-name .stock {
		font-size: 0.6rem !important;
		line-height: 0.9rem;
		margin: 0.1rem 0 0 0;
	}

	/* De rij met de bijwerkknop is geen kaart. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.actions {
		padding: 0 !important;
		text-align: right !important;
	}

	/* WooCommerce zet de knop op disabled tot je een aantal wijzigt. Zonder dit
	   ziet hij er volledig klikbaar uit. */
	.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) td.actions .button:disabled {
		opacity: 0.4;
		cursor: not-allowed;
		transform: none !important;
	}

	.woocommerce table.shop_table tbody ,
	.woocommerce table.shop_table tbody th ,
	.woocommerce table.shop_table tbody strong {
		font-size: 0.9rem;
		color: var(--black);
	}

	.woocommerce table td.product-thumbnail {
		text-align: center !important;
	}

	.woocommerce table td.product-thumbnail img {
		width: 100px;
		border-radius: 5px;
	}

	.woocommerce a.remove:hover {
		color: var(--black) !important;
		background: none !important;
	}

	.woocommerce table td.product-name a {
		font-weight: 700 !important;
		color: var(--black);
	}

	/* Artikelen links, totalen rechts. De <section> eromheen heet ook
	   .woocommerce, vandaar .content-block > .woocommerce: dat is het blok dat
	   de winkelwagen-shortcode zelf uitschrijft, met de form en de
	   .cart-collaterals als directe kinderen. */
	.woocommerce-cart .content-block > .woocommerce {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 2rem;
	}

	/* Over de volle breedte: de meldingen bovenaan, en onderaan de lege-
	   winkelwagenmelding met zijn knop plus de cross-sells, die
	   kim-woocommerce.php onder de winkelwagen hangt. */
	.woocommerce-cart .content-block > .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-cart .content-block > .woocommerce > .wc-empty-cart-message,
	.woocommerce-cart .content-block > .woocommerce > .return-to-shop,
	.woocommerce-cart .content-block > .woocommerce > .cross-sells {
		flex: 0 0 100%;
		order: 1;
	}

	.woocommerce-cart .content-block > .woocommerce > form.woocommerce-cart-form {
		flex: 1 1 55%;
		min-width: 0;
		margin-top: 0 !important;
		order: 2;
	}

	.woocommerce-cart .content-block > .woocommerce > .cart-collaterals {
		flex: 0 0 35%;
		order: 2;
	}

	.woocommerce-cart .content-block > .woocommerce > .cross-sells {
		order: 3;
	}

	/* Vult de kolom hierboven; de breedte wordt daar bepaald. */
	.woocommerce .cart-collaterals .cart_totals {
		border: 1px solid var(--grey);
		background: var(--white);
		padding: 1.5rem 1.5rem 0 1.5rem;
		border-radius: 10px;
		width: 100%;
	}

	.woocommerce .cart_totals > h2 { 
		display: none !important; 
	}

	.woocommerce .cart_totals th { 
		text-align: left !important;
		font-weight: normal !important;
	}

	.woocommerce .cart_totals td {
		text-align: right !important;
	}

	/* Verzendcalculator over de volle breedte van het totaalblok.
	   De calculator staat in de rechtercel van de rij Verzending en kan nooit
	   breder worden dan die cel. Vanaf 768px worden de rijen daarom flexrijen,
	   en verdwijnt de cel van de verzendrij als doos (display: contents): de
	   verzendmethode blijft naast het label, de calculator krijgt een eigen
	   regel. De randen verhuizen van de cellen naar de rij, anders hebben ze
	   gaten. Onder 768px zet WooCommerce de cellen zelf al onder elkaar. */
	@media (min-width: 768px) {
		.woocommerce .cart_totals table.shop_table ,
		.woocommerce .cart_totals table.shop_table tbody {
			display: block;
			width: 100%;
		}

		.woocommerce .cart_totals table.shop_table tr {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			border-top: 1px solid #e9e6ed;
		}

		.woocommerce .cart_totals table.shop_table tr:first-child {
			border-top: none;
		}

		.woocommerce .cart_totals table.shop_table tr th ,
		.woocommerce .cart_totals table.shop_table tr td {
			border-top: none !important;
		}

		.woocommerce .cart_totals table.shop_table tr th {
			flex: 0 0 35%;
		}

		.woocommerce .cart_totals table.shop_table tr td {
			flex: 1 1 0;
		}

		.woocommerce .cart_totals tr.woocommerce-shipping-totals td {
			display: contents;
		}

		.woocommerce .cart_totals tr.woocommerce-shipping-totals #shipping_method {
			flex: 1 1 0;
			margin: 0;
			padding: 9px 12px;
		}

		.woocommerce .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-calculator {
			flex: 0 0 100%;
			padding: 0 12px 12px;
		}
	}

	.woocommerce .cart_totals .woocommerce-shipping-calculator {
		text-align: left;
	}

	/* De link blijft rechts, onder het bedrag. */
	.woocommerce .cart_totals .shipping-calculator-button {
		display: block !important;
		text-align: right;
	}

	.woocommerce .cart_totals .shipping-calculator-form .form-row {
		width: 100%;
		float: none;
	}

	.woocommerce .cart_totals .shipping-calculator-form label {
		display: block;
		text-align: left;
	}

	.woocommerce .cart_totals .shipping-calculator-form .input-text ,
	.woocommerce .cart_totals .shipping-calculator-form select ,
	.woocommerce .cart_totals .shipping-calculator-form .select2-container {
		width: 100% !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		margin: 8px 0 0 0;
		left: -5px;
	}
	
	.woocommerce ul#shipping_method li {
		margin: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end;
        gap: 0.25rem;
	}

    .woocommerce ul#shipping_method li input {
        margin: 0 !important;
    }

    .woocommerce ul#shipping_method li label {
        margin: 0 !important;
    }

    .woocommerce ul#shipping_method li + li {
        margin-top: 0.5rem !important;
    }

	.woocommerce ul#shipping_method li:before {
		content: none;
	}

	p.woocommerce-shipping-destination {
		display: none;
	}

	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		display: inline-block !important;
	}
	
	#add_payment_method #payment, 
	.woocommerce-cart #payment, 
	.woocommerce-checkout #payment {
		background: var(--white);
	}

	@media all and (max-width: 992px) {
		/* Te smal voor twee kolommen: de totalen onder de artikelen. */
		.woocommerce-cart .content-block > .woocommerce > form.woocommerce-cart-form,
		.woocommerce-cart .content-block > .woocommerce > .cart-collaterals {
			flex: 0 0 100%;
		}
		.woocommerce-cart .content-block > .woocommerce > .cart-collaterals {
			margin-top: 2rem;
		}
	}

	@media all and (max-width: 767px) {
		/* :not(.cart) sluit de winkelwagen uit; die is hierboven een raster van
		   kaarten en heeft de data-title-labels juist nodig. Blijft gelden voor
		   de bestelbevestiging en het afrekenoverzicht. */
		.woocommerce table.shop_table_responsive:not(.cart) tbody th.product-name,
		.woocommerce-page table.shop_table_responsive:not(.cart) tbody th.product-name {
			display: block !important;
		}
		.woocommerce table.shop_table_responsive:not(.cart) tr td, 
		.woocommerce-page table.shop_table_responsive:not(.cart) tr td {
			text-align: left !important;
		}
		.woocommerce table.shop_table_responsive:not(.cart) tr td::before, 
		.woocommerce-page table.shop_table_responsive:not(.cart) tr td::before {
			display: none !important;
		}
		.woocommerce table.cart td.actions .coupon .button {
			width: 100% !important;
		}
		.woocommerce table.cart .quantity .qty {
			margin: 0 !important;
		}

		/* Twee kolommen: te smal voor de bedragen naast de naam. De bedragen
		   schuiven onder de naam, aantal en verwijderen blijven de onderste rij. */
		.woocommerce table.shop_table.cart:not(.addify-quote-form__contents) tr.cart_item {
			grid-template-columns: 6rem minmax(0, 1fr);
			grid-template-rows: auto auto 1fr auto;
			grid-template-areas:
				"afbeelding naam"
				"afbeelding prijs"
				"afbeelding subtotaal"
				"aantal     verwijderen";
			padding: 1rem !important;
		}
	}

	@media all and (max-width: 550px) {
		.woocommerce-error, 
		.woocommerce-info, 
		.woocommerce-message {
			padding: 1rem 2rem !important;
			text-align: center !important;
		}
		.woocommerce-message::before {
			display: none !important;
		}
		.woocommerce .woocommerce-error .button, 
		.woocommerce .woocommerce-info .button, 
		.woocommerce .woocommerce-message .button, 
		.woocommerce-page .woocommerce-error .button, 
		.woocommerce-page .woocommerce-info .button, 
		.woocommerce-page .woocommerce-message .button ,
		.woocommerce-message a.kim-melding-link {
			float: none;
			display: block !important;
			margin-bottom: 0.25rem;
		}
	}

/* USP -------------------------------------- */
	.cart__usp ul li i {
		font-size: 0.7rem;
	}

	.cart__usp ul li + li{
		margin-top: 0.25rem;
	}

/* Cross sells -------------------------------------- */
	.woocommerce .cart-collaterals .cross-sells, 
	.woocommerce-page .cart-collaterals .cross-sells {
		width: 100% !important;
	}

	.woocommerce .cart-collaterals .cross-sells h2, 
	.woocommerce-page .cart-collaterals .cross-sells h2 {
		font-size: 1.5rem !important;
		margin-bottom: 1.5rem !important;
		font-weight: 700;
	}

	.woocommerce .cart-collaterals .cross-sells ul.products li.product, 
	.woocommerce-page .cart-collaterals .cross-sells ul.products li.product {
		width: 22.05% !important;
	}

	@media all and (max-width: 992px) {
		.woocommerce .cart-collaterals .cross-sells ul.products li, 
		.woocommerce-page .cart-collaterals .cross-sells ul.products li {
			width: 48% !important;
		}
	}	

	@media all and (max-width: 550px) {
		.woocommerce .cart-collaterals .cross-sells ul.products li, 
		.woocommerce-page .cart-collaterals .cross-sells ul.products li {
			width: 100% !important;
		}
	}

/*---------------------------------------------- 
	5. Afrekenen
------------------------------------------------*/
	.woocommerce .woocommerce-billing-fields h3 ,
	.woocommerce .woocommerce-shipping-fields h3,
	.woocommerce h3#order_review_heading {
		font-size: 1.25rem !important;
		margin-bottom: 1rem;
	}

	.select2-container--default .select2-results__option--highlighted[aria-selected], 
	.select2-container--default .select2-results__option--highlighted[data-selected] {
		background-color: var(--orange);
	}

	.woocommerce .checkout .col2-set {
		width: 47.8260869565%;
		float: left;
		margin-right: 4.347826087%;	
	}

	.woocommerce .checkout #order_review_heading ,
	.woocommerce .checkout #order_review {
		width: 47.8260869565%;
   	 	float: right;
    	margin-right: 0;
	}

	.woocommerce .col2-set .col-1 , 
	.woocommerce-page .col2-set .col-1,
	.woocommerce .col2-set .col-2, 
	.woocommerce-page .col2-set .col-2 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.woocommerce .col2-set .col-1 {
		z-index: 8;
	}

	.woocommerce .checkout .col2-set .col-2 {
		float: none !important;
	}

	.woocommerce form .form-row label {
		padding-left: 0;
		width: 100%;
	}

	.woocommerce form .form-row input.input-text, 
	.woocommerce form .form-row textarea ,
	.select2-container--default .select2-selection--single ,
	.woocommerce form .form-row select ,
	.woocommerce form .coupon input ,
	.woocommerce form .form-row .input-text ,
	.woocommerce form input#geboortedatum {
		background-color: var(--white) !important;
		height: 50px;
    	font-size: 0.7rem;
    	line-height: 1.5;
		width: 100% !important;
		color: var(--black) !important;
    	background-image: none;
    	border: 0.5px solid var(--grey);
		margin: 0;
		padding: 0 10px;
		box-shadow: none;
		border-radius: 5px !important;
		display: block !important;
	}

	.woocommerce form .form-row ,
	.woocommerce form p.form-row + p.form-row {
		margin: 1rem 0 !important;
		padding: 0;
	}

	.select2-container--default .select2-selection--single {
		margin: 0 !important;	
	}

	/* Melding als PDOK een postcode en huisnummer niet kent, zie kim_adres_script().
	   clear: huisnummer en toevoeging erboven staan half naast elkaar. */
	.woocommerce form .kim-adres-melding {
		clear: both;
		font-size: 0.65rem;
		line-height: 1rem;
		color: var(--orange);
		margin: 0 0 0.5rem 0;
	}

	/* Op telefoons 16px: iOS zoomt in op elk invoerveld met kleinere tekst
	   zodra je erin tikt. */
	@media (max-width: 767px) {
		.woocommerce form .form-row input.input-text, 
		.woocommerce form .form-row textarea ,
		.select2-container--default .select2-selection--single ,
		.woocommerce form .form-row select ,
		.woocommerce form .coupon input ,
		.woocommerce form .form-row .input-text ,
		.woocommerce form input#geboortedatum {
			font-size: 16px;
		}
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 50px !important;
	}

	.select2-container .select2-selection--single .select2-selection__rendered {
		padding: 0 !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		margin: -8px 0 0 !important;
	}

	.woocommerce form .form-row textarea {
		height: 6rem !important;
		padding: 1rem !important;
		width: 100% !important;
	}

	.woocommerce form p.thwcfd-field-paragraph {
		font-size: 0.7rem;
	}

	.woocommerce #ship-to-different-address {
		text-transform: inherit;
		letter-spacing: 0;
	}

	.woocommerce #ship-to-different-address .checkbox {
		margin-left: 0;
	}

	.woocommerce #order_review table.shop_table{
		border-collapse: collapse !important;
	}

	.woocommerce #order_review table thead th {
		color: var(--black) !important;
		font-weight: 700 !important;
		padding: 1rem 0 !important;
	}

	.woocommerce #order_review table td ,
	.woocommerce #order_review table th {
		padding: 1rem 0 !important;
	}

	.woocommerce #order_review table th ,
	.woocommerce #order_review table td.product-name {
		font-size: 0.7rem;
		text-align: left;
		color: var(--black);
	}

	.woocommerce #order_review table td.product-name strong.product-quantity {
		font-size: 0.7rem !important;
		color: var(--black);
		padding-left: 0.25rem;
	}
	
	.woocommerce #order_review table td {
		text-align: right;
		padding: 0.4em 0.2em;
	}

	.woocommerce #order_review table tfoot th {
		padding-right: 0 !important;
	}

	.woocommerce #order_review table tfoot td {
		padding-left: 0 !important;
	}

	.woocommerce #order_review table th.product-total {
		text-align: right !important;
	}

	.woocommerce .woocommerce-terms-and-conditions-wrapper .form-row {
		margin: 0 !important;
	}

	.woocommerce .woocommerce-terms-and-conditions-wrapper .input-checkbox {
		margin: -5px 5px 0 0 !important;
		position: relative;
	}

	.woocommerce form.checkout_coupon, 
	.woocommerce form.login, 
	.woocommerce form.register {
		border: none;
		padding: 0;
    	margin: 0;
   		border-radius: 0;
	}

	.woocommerce .woocommerce-terms-and-conditions-wrapper a {
		color: var(--orange); 
		font-weight: 700;
	}

	.woocommerce .woocommerce-terms-and-conditions-wrapper a:hover {
		color: var(--black);
	}

	.woocommerce-billing-fields .woocommerce-input-wrapper {
		width: 100%;
	}

	.woocommerce-billing-fields #billing_address_2_field {
		display: none !important;
	}

	.woocommerce-billing-fields .screen-reader-text ,
	.woocommerce-billing-fields select#billing_country {
		width: auto !important;
	}

	.woocommerce form .coupon input {
		margin-bottom: 1rem !important;
	}

	.woocommerce .woocommerce-terms-and-conditions-wrapper {
		margin-bottom: 1.25rem;
	}

	.woocommerce .woocommerce-terms-and-conditions-checkbox-text {
		font-size: 0.7rem;
	}

	.woocommerce-checkout select#shipping_country {
		width: auto !important;
	}

	@media all and (max-width : 992px) {
		.woocommerce .checkout .col2-set ,
		.woocommerce .checkout #order_review_heading ,
		.woocommerce .checkout #order_review {
			width: 100%;	
		}
	}

/* Payment -------------------------------------- */
	.woocommerce .wc_payment_methods li {
        display: flex !important;
		line-height: 35px !important;
	}

	.woocommerce .wc_payment_methods li label {
		display: inline-flex !important;
        align-items: center !important;
		width: auto !important;
        margin: 0 !important;
	}

	#payment .payment_methods li[class*="payment_method_pay_gateway"] img {
		margin: 0 0 0 0.5rem !important;
	}

	.woocommerce .wc_payment_methods li .payment_box {
		display: none !important;
	}

/*---------------------------------------------- 
	6. Mijn Account
------------------------------------------------*/
	.woocommerce .woocommerce-MyAccount-navigation ul {
		background: var(--white);
		padding: 0 !important;
		list-style: none;
		border-radius: 10px;
		overflow: hidden;
	}

	.woocommerce .woocommerce-MyAccount-navigation ul li {
		font-size: 0.7rem;
		display: block;
		font-weight: 400;
		padding: 0.65rem 1.5rem;
	}

	.woocommerce .woocommerce-MyAccount-navigation ul li a {
		color: var(--black);
		text-decoration: none;
	}

	.woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
		color: var(--orange);	
	}

	.woocommerce .woocommerce-MyAccount-navigation ul li:before {
		content: none;
	}

	.woocommerce .woocommerce-MyAccount-navigation ul li + li {
		border-top: 1px solid var(--grey);
	}

	.woocommerce .woocommerce-MyAccount-content p + p {
		margin: 0 !important;
	}

	.woocommerce .woocommerce-MyAccount-content p {
		margin-bottom: 2rem;
	}

	.woocommerce .woocommerce-MyAccount-content span em {
		font-size: 0.75rem;
	}

	.woocommerce .woocommerce-Address-title h3 ,
	.woocommerce .woocommerce-MyAccount-content fieldset {
		margin-top: 1.25rem;
	}

	.woocommerce .woocommerce-Address address {
		margin-bottom: 0;
	}

	.woocommerce-MyAccount-content address {
		display: block;
	}

	.woocommerce table.shop_table tbody, 
	.woocommerce table.shop_table tbody th, 
	.woocommerce table.shop_table tbody strong {
		font-size: 0.7rem !important;		
	}

	.woocommerce table.my_account_orders td, 
	.woocommerce table.my_account_orders th {
		padding: 0.5rem 1rem;
		text-align: left;
	}

	.woocommerce-info {
		border-top-color: var(--orange);
		color: var(--black);
		margin-bottom: 1rem !important;
		background-color: #FFF;
	}

	.woocommerce-info::before {
		color: var(--orange);
	}

	.woocommerce .password-input {
		margin-bottom: 1.25rem !important;
	}

	@media all and (max-width : 800px) {
		.woocommerce .woocommerce-MyAccount-navigation ul li {
			display: block !important;
		}
		.woocommerce .woocommerce-MyAccount-navigation ul li + li {
			margin-left: 0 !important;
		}
	}

/* Order -------------------------------------- */
	.woocommerce .woocommerce-order p {
		margin-bottom: 1.5rem !important;
	}

	.woocommerce ul.order_details {
		padding: 0;
		margin-bottom: 1.5rem !important;
	}

	.woocommerce .woocommerce-customer-details address {
		border: none;
		border-radius: 0;
		padding: 0;
		line-height: 1.5rem;
		margin-bottom: 0 !important;
	}

/* Order Recieved -------------------------------------- */
	.woocommerce .woocommerce-column--billing-address h2 ,
	.woocommerce  .woocommerce-column--shipping-address h2 {
		font-size: 1.5rem;
		margin-bottom: 0.5em;
	}

	.woocommerce .woocommerce-column--billing-address address ,
	.woocommerce  .woocommerce-column--shipping-address address {
		margin-bottom: 1.5rem !important;
		line-height: 1.5rem;
	}

	.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email, 
	.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone {
		padding: 0 !important;
	}

	.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before ,
	.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before {
		content: none !important;
	}

/* logo ideal -------------------------------------- */
.woocommerce-checkout .payment_method_pay_gateway_ideal img {
    vertical-align: middle;
    margin-right: 8px;
    max-height: 1.2em; 
	padding: 0.5em;
}

.woocommerce-checkout .payment_method_pay_gateway_ideal label {
    display: inline-flex;
    align-items: center;
}

/*---------------------------------------------- 
	7. Offerte aanvragen
------------------------------------------------*/
	/* Addify zet twee <style>-blokken in de template zelf. Die staan in de body
	   en dus ná dit bestand uit de <head>, waardoor ze bij gelijke specificiteit
	   winnen. Vandaar !important waar het botst.

	   De opbouw van template_two: form.addify-quote-form.template_two is een
	   flexrij met .adf-quote-detail-wrap (58%) links en .af_quote_fields (38%)
	   rechts — feitelijk de col-lg-7 / col-lg-5 van de oude pagina.

	   Let op: er zijn maar twee kolommen in de tabel. Het aantal zit binnen
	   td.product-name en de verwijderlink binnen td.product-thumbnail. */

	.adf-request-quote-page.template_one,
	.adf-request-quote-page.template_two {
		max-width: none !important;
	}

	.addify-quote-form.template_two .adf-quote-detail-wrap {
		overflow-x: visible !important;
	}

/* Productenlijst — als de kaarten van de oude offertepagina */
	.woocommerce table.addify-quote-form__contents,
	.woocommerce table.addify-quote-form__contents tbody,
	.woocommerce table.addify-quote-form__contents tbody td {
		display: block;
		width: 100% !important;
		border: none !important;
		background: transparent !important;
	}

	/* Kaarten hebben geen kopbalk. Sectie 4 geeft table.shop_table.cart thead
	   een oranje balk en Addify's tabel draagt dezelfde klassen. */
	.woocommerce table.addify-quote-form__contents thead {
		display: none !important;
	}

	.woocommerce table.addify-quote-form__contents tbody tr.cart_item {
		position: relative;
		display: flex !important;
		align-items: stretch;
		background: var(--white) !important;
		border: none !important;
		border-radius: 5px;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
		padding: 1.25rem !important;
		margin-bottom: 1rem;
	}

	.woocommerce table.addify-quote-form__contents tbody td {
		padding: 0 !important;
		font-size: 0.7rem !important;
		line-height: 1.25rem;
		text-align: left !important;
	}

/* Afbeelding met de verwijderlink eronder */
	.woocommerce table.addify-quote-form__contents td.product-thumbnail {
		width: 9rem !important;
		flex: 0 0 9rem;
		margin-right: 1rem;
	}

	.woocommerce table.addify-quote-form__contents td.product-thumbnail img {
		width: 100%;
		height: auto;
		border-radius: 5px;
	}

	/* De verwijderlink staat in de DOM onder de afbeelding. Absoluut
	   gepositioneerd komt hij rechtsonder in de kaart te staan, op dezelfde
	   hoogte als het aantalveld linksonder. */
	.woocommerce table.addify-quote-form__contents .adf-product-remove {
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		margin: 0 !important;
		text-align: right;
	}

	/* Regelhoogte 2,5rem: gelijk aan het aantalveld ernaast, zodat beide
	   verticaal uitlijnen. */
	.woocommerce table.addify-quote-form__contents .adf-product-remove a {
		display: inline-block;
		font-size: 0.7rem !important;
		line-height: 2.5rem !important;
		color: var(--orange) !important;
		background: none !important;
		text-decoration: none;
	}

	.woocommerce table.addify-quote-form__contents .adf-product-remove a:hover {
		color: var(--black) !important;
	}

/* Naam, gekozen opties, SKU en aantal */
	/* Kolom over de volle kaarthoogte, zodat het aantalveld met margin-top:auto
	   onderaan komt — op dezelfde hoogte als de verwijderlink rechtsonder. */
	.woocommerce table.addify-quote-form__contents td.product-name {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		width: auto !important;
	}

	.woocommerce table.addify-quote-form__contents td.product-name > a {
		display: block;
		font-size: 0.9rem !important;
		line-height: 1.4rem !important;
		font-weight: 700;
		color: var(--black) !important;
		margin-bottom: 0.5rem !important;
	}

	.woocommerce table.addify-quote-form__contents td.product-name > a:hover {
		color: var(--orange) !important;
	}

	.woocommerce table.addify-quote-form__contents dl.variation {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 0.25rem;
		margin: 0 0 0.5rem 0 !important;
		font-size: 0.7rem;
		line-height: 1.25rem;
	}

	.woocommerce table.addify-quote-form__contents dl.variation dt {
		font-weight: 700;
		margin: 0 0.25rem 0 0 !important;
		padding: 0 !important;
		line-height: 1.25rem;
		clear: none !important;
		float: none !important;
		background: none !important;
	}

	.woocommerce table.addify-quote-form__contents dl.variation dd,
	.woocommerce table.addify-quote-form__contents dl.variation dd p {
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1.25rem;
		float: none !important;
		background: none !important;
	}

	.woocommerce table.addify-quote-form__contents td.product-name > p,
	.woocommerce table.addify-quote-form__contents td.product-name > p small {
		margin: 0 0 0.5rem 0 !important;
		font-size: 0.7rem !important;
		line-height: 1.25rem;
		color: var(--black);
	}

	.woocommerce table.addify-quote-form__contents .product-quantity {
		margin: auto 0 0 0 !important;
	}

	.woocommerce table.addify-quote-form__contents .product-quantity input.qty {
		width: 4rem !important;
		max-width: 4rem !important;
		height: 2.5rem !important;
		font-size: 0.7rem !important;
		padding: 0.4rem !important;
		text-align: center;
		border: 0.5px solid var(--grey) !important;
		border-radius: 5px !important;
	}

/* Formulier met de aanvraaggegevens */
	.woocommerce .addify-quote-form.template_two .af_quote_fields {
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
	}

	.woocommerce .af_quote_fields h2 {
		font-size: 1rem !important;
		font-weight: 700;
		margin-bottom: 1rem !important;
	}

	/* De labels herhalen exact de placeholder, dus visueel overbodig. Niet
	   display:none maar buiten beeld geplaatst, zodat schermlezers ze houden. */
	.woocommerce div.af_quote_fields .addify-option-field label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.woocommerce .quote-fields .addify-option-field {
		margin-bottom: 0.75rem !important;
	}

	.woocommerce div.af_quote_fields input[type="text"],
	.woocommerce div.af_quote_fields input[type="email"],
	.woocommerce div.af_quote_fields input[type="number"],
	.woocommerce div.af_quote_fields input[type="date"],
	.woocommerce div.af_quote_fields input[type="time"],
	.woocommerce div.af_quote_fields input[type="datetime-local"],
	.woocommerce div.af_quote_fields select,
	.woocommerce div.af_quote_fields textarea {
		font-size: 0.7rem !important;
		line-height: 1.25rem !important;
		color: var(--black) !important;
		border: 0.5px solid var(--grey) !important;
		border-radius: 5px !important;
		background: var(--white) !important;
		padding: 0.75rem 1rem !important;
		height: auto !important;
		width: 100% !important;
	}

	.woocommerce div.af_quote_fields textarea {
		min-height: 6rem;
	}

	.woocommerce div.af_quote_fields input:focus,
	.woocommerce div.af_quote_fields select:focus,
	.woocommerce div.af_quote_fields textarea:focus {
		outline: none;
		border-color: var(--orange) !important;
		box-shadow: none !important;
	}

	.woocommerce .af-quote-field-table .form_row {
		text-align: left !important;
		margin-top: 1rem;
	}

/* Lege offerte */
	.woocommerce .adf-request-quote-page .cart-empty {
		font-size: 0.7rem;
		margin-bottom: 1rem;
	}