/* ********************************** */
/* Styling Checken */
/* 13 juni 2026 Product Block aanpassingen */
.wc-block-product .wp-block-post-title{
min-height: 2.8em !important;
}
.wp-block-post-title {
margin-top: -0.4em !important;
}
.badge-wrapper{
margin: 0 !important;
}
.wc-block-components-product-price, .wp-block-woocommerce-product-price {
margin-bottom: 4px !important;
}
/*
.wc-block-components-product-image {
margin-top: auto !important;
}
*/
/*Mail Poet Manage Subscriptions Page */
/*.mailpoet-manage-subscription {
line-height: 1.7;
}
.mailpoet-manage-subscription input{
line-height: 2;
width: 200px;
font-size: 16px;
}
.mailpoet_select{
line-height: 2;
width: 200px;
font-size: 16px;
padding: 7px 0px 7px 0px;
}
.mailpoet_submit {
cursor: pointer;
}
.mailpoet_paragraph {
margin-top: 20px;
}
*/
/*BBloomer Registration en Login forms CSS*/
#reg_email {
line-height: 2;
display: block;
}
/*Styling het product review block op de single product page
* Auteur : Marco
* Status : Werkt
* Datum : dec 2024
* */
div.wp-block-woocommerce-product-reviews input {
height: 2.5em;
}
div.wp-block-woocommerce-product-reviews p.comment-form-author input{
margin-left: 10px;
}
div.wp-block-woocommerce-product-reviews p.comment-form-email input{
margin-left: 7px;
}
/*Styling voor tekst uitverkocht op single product page*/
p.stock.out-of-stock {
font-weight: bold;
color: orangered;
}
/* Styling van de Product image op single product page */
.wc-block-components-product-image{
border-radius: 5px;
overflow: hidden;
}
/*Styling van variations select op single product page
.woocommerce table.variations tr td select {
height: 3em;
padding-left: 10px;
}*/
/*Styling van thumbnail product images op single product page*/
/*
ol.flex-control-nav.flex-control-thumbs li img {
border: 1px;
border-style: solid;
border-color: grey;
border-radius: 7px;
}
ol.flex-control-nav.flex-control-thumbs li {
padding-left: 3px;
padding-right: 2px;
}
*/
/*Styling van thumbnail product images op single product page*/
.wc-block-product-gallery-thumbnails__thumbnail{
border-radius: 10px;
overflow: hidden;
}
/*Styling van de main product image op de single product page*/
/*div.flex-viewport {
margin-bottom: 10px;
}
*/
/*Styling MyAccount Pagina*/
a.woocommerce-button.wp-element-button.button.view {
width: 55%;
align-content: end;
padding-left: 10px;
}
woocommerce-form woocommerce-form-login login {
padding: 0px;
}
.woocommerce form .form-row label {
line-height: 1;
}
/*Styling voor Navigation Block
*
* Auteur : Marco de Haan
* Status : Werkt
* Datum : 20 jan 2025
* */
/* Styling for active link in Header nav only
nav.my-header-nav li.current-menu-item{
border-bottom: 3px solid #767676;
padding-bottom: 1px;
transition: border-color 0.4s ease;
}*/
/* Styling of mobile menu
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
font-size: 1.4rem;
}*/
/*Styling van Login button op Cart page
* Auteur : Marco
* Status : dev
* Datum : 22 jan 2025
* */
.wc-block-components-checkout-step__heading-content a {
padding: 5px 20px;
background-color: #65a21b;
border-radius: 7px;
color: white;
margin-top: -80px !important;
font-size: 18px !important;
}
.wp-block-woocommerce-checkout-order-summary-block {
margin-bottom: 40px;
}
/*Styling van Return to Cart button
* Auteur : Marco
* Status : Werkt
* Datum : 22 jan 2025
* */
.wc-block-components-checkout-return-to-cart-button {
border-style: solid;
border-radius: 7px;
border-color: lightgrey;
margin-right: 20px;
border-width: 1px;
text-align: center;
padding-right: 10px;
}
/* Styling van Button doorgaan naar afrekenen
* Auteur : Marco
* Status : Werkt
* Datum : 22 jan 2025
* */
.wc-block-cart .wc-block-cart__submit-container a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 16px;
}
/* Diverse styling voor Plugin Custom MyAccount Page
* Auteur : Marco
* Status : werkt
* Datum : 22 jan 2025
*
*/
/*
.tgwc-user-info a {
display: none;
}
.tgwc-woocommerce-MyAccount-navigation-wrap ul .scroll_tab_right_button, .tgwc-woocommerce-MyAccount-navigation-wrap ul .scroll_tab_left_button {
display: none !important;
}
div.scroll_tab_right_button::before, div.scroll_tab_left_button::before {
display: none !important;
}
.tgwc-woocommerce-MyAccount-navigation-wrap ul .scroll_tab_inner {
overflow-x: auto !important;
white-space: nowrap !important;
}
*/
/* Styling van inputs zodat ze niet zo hard kijken.
* */
input.woocommerce-Input {
border-color: lightgray;
border-width: 1px;
border-style: solid;
}
/* Styling van de text size van navigatie
* */
.scroll_tab_inner li a {
font-size: 20px;
}
/*Styling van de my-logout-link
* */
.my-logout-link {
font-family: Inter;
font-size: 20px;
}
/*Styling van de edit-address bewerken links
* Auteur: Marco
* Status : Werkt
* Datum : 23 jan 2025
* */
.woocommerce-account .addresses .title .edit {
float: inline-start;
}
/* ********************************** */
/* Einde Styling Checken */
/* Prijs en Add to cart naar onderkant van product card*/
li.wc-block-product div.wp-block-group{
margin-top: auto;
display: flex;
align-items: flex-end;
}
.is-product-collection-layout-carousel {
display: flex;
align-items: stretch;
}
/* Styling van Paging voor Woo Product Collection Block*/
.page-numbers{
padding: 7px;
padding-left: 12px;
padding-right: 12px;
margin: 7px;
cursor: hand;
border: 1px solid rgb(109, 126, 97);
border-radius: 5px;
}
span.page-numbers.current{
background-color: rgb(109, 126, 97);
color: white;
}
.page-numbers:hover{
background-color: rgb(109, 126, 97);
color: white;
}
.wp-block-query-pagination-next, .wp-block-query-pagination-previous {
padding: 7px;
padding-top: 4px;
padding-bottom: 4px;
margin: 7px;
cursor: hand;
border: 1px solid rgb(109, 126, 97);
border-radius: 5px;
}
/* Gouden kleur van rating op single product page */
span.rating {
color: #D4AF37;
}
/**
* 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('../images/Header-tak-v2.webp'), /* Linker afbeelding */
url('../images/Logo-website-v8.webp'), /* Middelste afbeelding */
url('../images/Header-tak-v2-mirror.webp'); /* 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('../images/Header-tak-v2.webp'),
url('../images/Logo-website-v8.webp'); /* 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;
}
.wp-block-button.wc-block-components-product-button{
margin-left: auto;
/*min-width: 6.5em;*/
}
button.add_to_cart_button, a.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: 7px;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
border: solid 1px rgba(122 143 106) !important; /* Optioneel: randkleur */
/*margin-bottom: 16px;*/
min-width: 5rem;
min-height: 3em;
gap: 10px;
font-weight: bold;
padding: 7px;
}
@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: 2em; /* Breedte van het icoontje */
height: 2em; /* Hoogte van het icoontje */
/* Jouw SVG als achtergrond, nu volledig in het wit */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* Variable product add to cart button - Gear icon */
a.add_to_cart_button {
display: inline-flex;
align-items: center;
box-sizing: border-box;
}
a.add_to_cart_button::after {
content: "";
display: inline-block;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* 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;
}*/
/* 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.3rem, 2vw + 0.2rem, 1.5rem); /* 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: px 0px 0px 0px !important;
border-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
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);
}
/*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;
}