/**
 * Grootte wijzigen van de Hamburger menu
 */
.wp-block-navigation__responsive-container-open svg {
    /* Hiermee forceer je een nieuwe grootte */
    width: 32px;
    height: 32px;
}

/* Specifiek voor de wrapper van het WooCommerce Product Collection blok */
.wp-block-woocommerce-product-collection .wc-block-components-product-add-to-cart {
    display: none !important;
}

/* Zorg dat de knop alleen wordt verborgen als het product de 'outofstock' klasse heeft */
.wp-block-woocommerce-product-collection.outofstock .wc-block-components-product-add-to-cart {
    display: none !important;
}

/* Voor extra robuustheid in moderne Store API-blokken */
.wp-block-post.outofstock .wc-block-components-product-add-to-cart {
    display: none !important;
}

/**
* Forms
*/
.btn-cmg-form{
    background: lightgrey;
}

/**
 * Checkout Page
 */
.wc-block-components-checkout-step__title {
	font-size: 1.8em !important;
}
@media (max-width: 768px) {
	.wc-block-components-address-form__first_name{
		margin-top: 1.5em !important;
	}
	#shipping_country_field {
    	margin-bottom: 1.5em !important;
	}
	#pcav_shipping_wrapper > label[for="pcav_search_shipping_field"] {
		font-size: 1.0em;
	}
}
/*
 * Header takken images
 * */
.cmg-header-div {
    /* Laad de afbeelding twee keer in, gescheiden door een komma */
    background-image:
        url('/wp-content/uploads/2025/08/Header-tak-v2.png'), /* Linker afbeelding */
        url('/wp-content/uploads/2025/08/Logo-website-v8.png'), /* Middelste afbeelding */
        url('/wp-content/uploads/2026/05/Header-tak-v2-mirror.png'); /* Rechter afbeelding */
        background-repeat: no-repeat, no-repeat, no-repeat;

    /* Posities: eerste is voor links, tweede is voor rechts */
    background-position: left 6px, center top, right 6px;
    /* clamp(minimum, ideaal, maximum)
     - Minimum: 80px (wordt niet kle*iner dan dit)
     - Ideaal: 12vw (schaalt mee met het scherm)
     - Maximum: 200px (wordt niet groter dan dit)
     */
    background-size:
        clamp(120px, 16vw, 160px) auto,
        clamp(160px, 18vw, 200px) auto,
        clamp(80px, 20vw, 160px) auto;
    background-attachment: scroll, scroll, scroll;
    font-weight: 700;
}

@media (max-width: 860px) {
    .cmg-header-div {
        background-image:
            url('/wp-content/uploads/2025/08/Header-tak-v2.png'),
            url('/wp-content/uploads/2025/08/Logo-website-v8.png'); /* Middelste afbeelding */
        background-repeat: no-repeat, no-repeat;
        background-position: left 6px, center top;
        background-size:
            clamp(120px, 16vw, 120px) auto,
            clamp(160px, 20vw, 220px) auto;
        /* Dit zorgt ervoor dat de afbeelding vaststaat op het scherm bij scrollen */
        background-attachment: scroll, scroll;
        font-weight: 700;
    }
}


/* 
 * Add to Cart Button 
 * */

/* Zet de margin-bottom onder de AddToCart button van de product collection block op 0. Nodig wanneer product aan cart is toegevoegd, dan verandert de margin namelijk ongewenst. */
.wc-block-components-product-button {
	gap: 0 !important;
}
button.add_to_cart_button, .wc-block-components-product-button__button{
	/*display: inline-flex;*/
	align-items: center;
	justify-content: center; /* Zorgt dat tekst en icoon netjes in het midden staan */
	/*min-height: 0px !important;*/
	gap: 0.2rem;                /* Ruimte tussen de tekst en het icoontje aan de rechterkant */
	min-width: 100%;
	border-radius: 0px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
    border: solid 1px rgba(122 143 106) !important;     /* Optioneel: randkleur */
	/*margin-bottom: 16px;*/
}
@media (max-width: 768px) {
    button.add_to_cart_button {
        letter-spacing: -1.3px;
    }
}
button.add_to_cart_button:hover {
	background-color: #6D7E61 !important; /* Jouw hover achtergrondkleur */
    /*color: rgba(212, 154, 59, 0.8) !important;*/            /* Jouw hover tekstkleur */
    border-color: rgba(252, 186, 3, 1) !important;     /* Optioneel: randkleur */
}
/* Add to cart button - Cart icon toevoegen */
button.add_to_cart_button::after {
  content: "";
  display: inline-block;
  width: 1.7em;             /* Breedte van het icoontje */
  height: 1.7em;            /* Hoogte van het icoontje */
  
/* Jouw SVG als achtergrond, nu volledig in het wit */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32'><path fill='%23ffffff' fill-rule='evenodd' d='M12.444 14.222a.89.89 0 0 1 .89.89 2.667 2.667 0 0 0 5.333 0 .889.889 0 1 1 1.777 0 4.444 4.444 0 1 1-8.888 0c0-.492.398-.89.888-.89M11.24 6.683a1 1 0 0 1 .76-.35h8a1 1 0 0 1 .76.35l4 4.666A1 1 0 0 1 24 13H8a1 1 0 0 1-.76-1.65zm1.22 1.65L10.174 11h11.652L19.54 8.333z' clip-rule='evenodd'></path><path fill='%23ffffff' fill-rule='evenodd' d='M7 12a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v13.333a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1zm2 1v11.333h14V13z' clip-rule='evenodd'></path></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* Styling van de View Cart Button die verschijnt als je een product aan de winkelwagen toevoegt*/
/* Zorg dat het productblok de basis wordt voor de positie van de link */
.wc-block-product-template .wc-block-product {
    position: relative;
}

/* Positioneer de 'Bekijk winkelwagen' link zwevend onderin de hoek van de afbeelding */
.wc-block-product-template .added_to_cart.wc_forward {
    position: absolute;
    bottom: 105px; /* Speel hiermee om de hoogte te bepalen */
    left: 50%;
    transform: translateX(-50%);
	width: 90%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #2D5A43 !important;
    padding: 4px 4px 4px 4px;
	border: solid 2px #7a8f6a;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
	text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
	width: 90%;
}

/* Stlying voor Product title in Product Collection Block */
/* 26-02-2026 Werkt! */
/* Hoogte voor 2 regels product title, zorgt voor nette uitlijning*/
li.wc-block-product .wp-block-post-title {
	font-family: 'Cormorant Garamond', serif;
  	font-weight: 500; /* 400 staat gelijk aan 'Regular' */
	/*min-height: 2.8em !important;*/
    /* clamp(minimum, ideale_waarde, maximum) */
    min-height: clamp(1.5em, 6vh, 3em);
}
li.wc-block-product .wp-block-post-title {
	margin-bottom: 0 !important;
}

/* Grootte van Product Title */
.wp-block-post-title a {
	color: #4F5D43 !important;
	/*font-size: 1.5rem; !important;*/
    font-size: clamp(1.5rem, 2vw + 0.2rem, 1.9rem); /* clamp(minimum, ideale_waarde, maximum) */
	line-height: 1;
	margin-left: 4px;
	margin-right: 4px;

}

/*
  li.wc-block-product h3 {
  height: 5ex;
  overflow: hidden;
}
*/

/* Product Kaarten maken van Product Collection Block */
li.wc-block-product {
	background: #EDE6DA;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
	padding: 2px 0px 0px 0px !important;
	border-radius: 12px;
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
	border: 1px solid rgba(212, 154, 59, 0.3); /*#D49A3B;*/
	margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

/*
.wc-block-components-product-price {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}*/

li.wc-block-product:hover {
	/*background: rgba(252, 186, 3, 0.1);*/
	background: rgba(212, 154, 59, 0.1);
	border-color: rgba(252, 186, 3, 1);
}

/* Reset hardhandig de margin aan de onderkant van het laatste product in de collectie */
.wc-block-product-template .wc-block-product:last-child {
    /*margin-bottom: 16px !important;*/
    margin-bottom: auto !important;
}

/* Verberg de 'Lees meer' / 'Bekijk product' knop als een product uitverkocht is
* Werkt niet meer sinds update naar wordpress 7.0
*/
/*
.wp-block-post.is-out-of-stock .wp-block-woocommerce-product-button {
    display: none !important;
}*/

/*Cross Sells Button Text Size*/
/*div.wp-block-button.wc-block-components-product-button button.wp-element-button {
    font-size: medium !important;
}*/
/* Product price op product collection block*/
.wp-block-woocommerce-product-price {
    /*margin-top: auto !important;*/
	/*margin-bottom: 0px;*/
    margin-bottom: auto;
}

/*Afreken pagina Backto Cart Button*/
.wc-block-components-checkout-return-to-cart-button {
    height: 2.6em;
    align-content: center;
}

.btn-checkoutproblems a{
    background-color: rgb(249, 243, 243) !important;
    border: solid 1px grey;
    border-radius: 6px;
    padding: 10px;
    color: rgb(6, 6, 6);
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);


}

/*Tutorial page, paging*/
.pods-pagination-paginate a.page-numbers{
  border-radius: 5px;
  padding: 4px 8px 4px 8px;
  background: #F7F4EE;
  margin: 4px;
}
.pods-pagination-paginate span.page-numbers.current{
  border-radius: 5px;
  padding: 4px 8px 4px 8px;
  background: #F7F4EE;
  margin: 4px;
  border: 2px solid green;
}

/* Pods Pagination Styling */
.pods-pagination-paginate {
	font-size: x-large;
}
/* Mini Cart Icon styling*/
.wc-block-mini-cart__icon {
	width: 2.5em !important;
	height: 2.5em !important;
	align-content: right;
	align-items: right;
}
.wc-block-mini-cart.wp-block-woocommerce-mini-cart {
	float: right;
	margin-right: 24px;
	margin-top: 12px;
}

/* my_add_review_link Styling */
.my_add_review_link a, .my_share_on_facebook a {
	padding: 14px 30px 14px 30px;
	background: #65a21b;
	border-radius: 7px;
	color: white;
	font-weight: 300;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.my_add_review_link, .my_tutorial_list_link, .my_share_on_facebook {
	margin-block-start: 32px !important;
	margin-bottom: 36px;
}
.my_tutorial_list_link a {
	border: 1px solid #65a21b;
	padding: 7px 14px 7px 7px;
	/*background: #65a21b;*/
	border-radius: 7px;
	color: black;
	font-weight: 300;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
/* Add to Cart en Lees verder Button stylen qua hoogte*/
.wp-block-button__link.wp-element-button.wc-block-components-product-button__button {
    padding-top: 5px;
    /*padding-bottom: 5px;*/
	padding-left: 2px;
	padding-right: 2px;
    line-height: 1.1;
    min-height: 50px;
	font-size: 28px;
}
.wp-block-button__link.wp-element-button.wc-block-components-product-button__button span{
	font-size: larger;
}

/*BBloomer Registration en Login forms CSS*/
#reg_email {
	line-height: 2;
	display: block;
}

.subscription_root div {
	line-height: 10;
	display: block;
}

.sib-email-area, .sib-FIRSTNAME-area, .sib-LASTNAME-area, .sib-default-btn {
	line-height: 2;
	min-width: 240px;
}
.sib-default-btn {
	padding: 3px 7px 3px 7px;
	margin-top: 20px;
	min-width: 240px;
	border: 2px solid green;
	border-radius: 7px;
}

.footer_text {
	margin-top: 20px;
}

/**
 * Sold Out Text Customizations - Definitieve Versie
 */

/* Zorg dat de product-container de basis is voor elementen */
.wp-block-post {
    position: relative !important;
}

/* De container staat direct onder de foto zonder hoogte te consumeren */
.badge-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    pointer-events: none; /* Zorgt dat de foto klikbaar blijft */
    z-index: 10;
}

/* De bruine balk zelf */
.custom-winkel-uitverkocht-balk {
    position: absolute;
    /* PAS DIT AAN: Verhoog of verlaag dit getal om de balk handmatig te verplaatsen */
    bottom: 16px;

    /* AANGEPAST: Maak de balk 95% breed */
    width: 96%;

    /* AANGEPAST: Dit zorgt ervoor dat de balk exact in het midden wordt gecentreerd */
    left: 50%;
    transform: translateX(-50%);

    background-color: #D4A373;
    color: #ffffff;
    padding: 8px 0;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    border-radius: 16px;
    /*margin-bottom: 40px;*/
    /*transform: translateY(-100%);*/
}

/* cmg-shopman/more-products-button block */
.cmg-more-products-count {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.65;
    margin: 0.75rem 0 0;
}

.cmg-more-products-btn {
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    font-size: larger;
}

.cmg-more-products-btn:hover {
    filter: brightness(0.9);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
    text-decoration: none;
}

.cmg-more-products-btn:active {
    transform: translateY(1px);
}

/* cmg-product-video shortcode */
.cmg-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.cmg-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}