.elementor-kit-10{--e-global-color-primary:#4A3526;--e-global-color-secondary:#F4F3ED;--e-global-color-text:#4A3526;--e-global-color-accent:#C75B12;--e-global-typography-primary-font-family:"Garamond";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-letter-spacing:0.007em;--e-global-typography-primary-word-spacing:0px;--e-global-typography-secondary-font-family:"Garamond";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-letter-spacing:0.04em;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-df92111-font-family:"Garamond";background-color:var( --e-global-color-secondary );font-family:"Garamond", Sans-serif;font-size:1.3em;font-weight:400;line-height:1.47em;letter-spacing:0.007em;word-spacing:0em;}.elementor-kit-10 e-page-transition{background-color:#FFFFFF;}.elementor-kit-10 p{margin-block-end:1em;}.elementor-kit-10 a{color:var( --e-global-color-primary );font-family:"Garamond", Sans-serif;font-weight:400;line-height:1em;letter-spacing:0.007em;word-spacing:0px;}.elementor-kit-10 a:hover{color:#C75B12;letter-spacing:0.007em;}.elementor-kit-10 h1{color:var( --e-global-color-primary );font-family:"Garamond", Sans-serif;font-size:2em;font-weight:400;line-height:1em;letter-spacing:0.34em;}.elementor-kit-10 h2{color:var( --e-global-color-primary );}.elementor-kit-10 h3{color:var( --e-global-color-primary );}.elementor-kit-10 h4{color:var( --e-global-color-primary );}.elementor-kit-10 h5{color:var( --e-global-color-primary );}.elementor-kit-10 h6{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:992px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.elementor-sticky {
    backface-visibility: hidden;
}

/* De transparante overlay met jouw crème kleur */
.blockUI.blockOverlay {
    background: rgba(244, 243, 237, 0) !important; 
    backdrop-filter: blur(2px); /* Subtiele vervaging van de achtergrond */
    opacity: 1 !important;
}

/* De Loader */
.blockUI.blockOverlay::before {
    height: 2.2em !important;
    width: 2.2em !important;
    margin-left: -1.1em !important; 
    margin-top: -1.1em !important;  
    
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    
    /* Jouw specifieke transparante bruin voor de basisring */
    border: 4px solid #4A352633 !important; 
    
    /* Het bewegende deel: Solide Oranje */
    border-top: 4px solid #4A3526 !important; 
    border-radius: 50% !important;
    
    background: transparent !important;
    opacity: 1 !important;
    
    /* Vloeiende versnelling/vertraging voor een premium gevoel */
    animation: elegante-spin 0.9s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite !important;
}

@keyframes elegante-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Maak de tekst 'Subtotaal:' normaal in plaats van dikgedrukt */
.elementor-menu-cart__subtotal strong {
    font-weight: 400 !important;
    font-size: 1.03em; /* Om consistent te blijven met je eerdere teksten */
    text-transform: uppercase;
}


/* 1. Maak de originele tekst onzichtbaar */
.woocommerce-mini-cart__empty-message {
    font-size: 0 !important;
    color: transparent !important;
    text-align: center;
    padding: 10px 10px;
    line-height: 0 !important; /* Voorkomt witruimte van de onzichtbare tekst */
}

/* 2. Maak de nieuwe tekst zichtbaar door een vaste maat te geven */
.woocommerce-mini-cart__empty-message::before {
    content: "Geen producten in winkelmand.";
    display: block;
    
    /* We gebruiken 16.5px (wat ongeveer 1.03em is bij een basis van 16px) */
    font-size: 24px !important; 
    color: #4a3526 !important; /* Geef de tekst weer een kleur */
    visibility: visible !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
}


/* Pas enkel de kleuren aan van alle checkboxen */
input[type="checkbox"] {
    /* Achtergrondkleur: Secondary (#F4F3ED) */
    background-color: var(--e-global-color-secondary) !important;
    
    /* Rand: 1px Solid Primary (#4A3526) */
    border: 1px solid var(--e-global-color-primary) !important;
    
    
    /* Zorg dat het vinkje de juiste kleur krijgt bij activering */
    accent-color: var(--e-global-color-primary) !important;
}

/* Styling wanneer de checkbox is aangevinkt */
input[type="checkbox"]:checked {
    background-color: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
}


/* 1. De knop zelf (werkt voor zowel <button> als <a>) */
.is-out-of-stock .e-loop-add-to-cart-form-container .button,
.is-out-of-stock .elementor-add-to-cart .button {
    background-color: #4a352633 !important;
    color: #f4f3ed !important;
    border: 2px solid #4a352633 !important;
    background-clip: padding-box !important;
    
    /* Blokkeer alle interactie */
    pointer-events: none !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* 2. Zorg dat de hover op de link-knop (wijnmaker pagina) niet verspringt */
.is-out-of-stock .e-loop-add-to-cart-form-container a.button:hover,
.is-out-of-stock .elementor-add-to-cart a.button:hover {
    background-color: #4a352633 !important;
    color: #f4f3ed !important;
}

/* 3. De Quantity input styling */
.is-out-of-stock .quantity input.qty {
    color: #4a352633 !important;
    border-color: #4a352633 !important;
    background-color: transparent !important;
    pointer-events: none !important;
}

.elementor-menu-cart__close-button-custom {
    /* 1. Reset alle margins en padding, behalve bottom */
    margin: 0 !important;
    padding: 0 0 0.5rem 0 !important; /* top, right, bottom, left */
}

/* Zorg dat de cart container boven de sticky nav komt */
.elementor-menu-cart__container {
    z-index: 9999 !important; /* hoog genoeg zodat het boven alles zit */
    position: fixed !important; /* essentieel voor inschuivende cart */
}

/* Overlay net onder de cart */
.elementor-menu-cart__overlay {
    z-index: 9998 !important;
}

/* Sticky nav lager dan cart */
.e-n-menu-wrapper {
    z-index: 1000 !important;
}

/* 7. Kleur van de radiobuttons bij de betaalmethodes op de afrekenpagina, zodat ze overeenkomen met de bruine accentkleur van de site */
.wc_payment_method input[type="radio"] {
    accent-color: var(--e-global-color-primary) !important;
}

/* 8. Meer ruimte tussen de betaalmethodes (Bancontact, KBC, ...), zodat het aansluit bij de regelruimte van de voorwaarden-tekst */
ul.payment_methods > li {
    padding: 0.6em 0 !important;
}

/* 9. Padding boven het vinkje + tekst "Ik verklaar ouder dan achttien jaar..." */
.woocommerce-terms-and-conditions-wrapper .form-row {
    padding-top: 1rem !important;
}

/* 10. Stijl van de "Kies je bank" keuzelijst (KBC/CBC) laten aansluiten bij de rest van de velden */
.mollie-issuer-select {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5em !important;
    font-family: Garamond, sans-serif !important;
    font-size: 1.03em !important;
    color: #4A3526 !important;
    background-color: var( --e-global-color-secondary ) !important;
    border: 1px solid #4A352633 !important;
    border-radius: 3px !important;
    padding: 0.5em 0.75em !important;
    height: auto !important;
}

/* 11. Minder ruimte tussen de kaartvelden (Naam op de kaart, Kaartnummer, Vervaldatum, CVC/CVV) */
.mollie-components .mollie-component-label {
    font-size: 0.85em !important;
    line-height: 1.3 !important;
    margin: 0 0 0.4em !important;
}
.mollie-components > div {
    margin-top: 0.6em !important;
}
.mollie-components > div:first-of-type {
    margin-top: 0 !important;
}
.mollie-components div[id$="-errors"] {
    margin-top: 0.3em !important;
}

/* 12. "Beveiligde betalingen verschaft door Mollie" tekst verbergen */
.mollie-components-description {
    display: none !important;
}

/* 13. Minder witruimte rond de inhoud van een geselecteerde betaalmethode (bv. instructies bij Directe bankoverschrijving) */
.woocommerce-checkout #payment .payment_methods .payment_box {
    padding: 1rem 1.25rem !important;
    margin: 0.75rem 0 !important;
}

/* 14. Minder ruimte boven/onder de inhoud van een geselecteerde betaalmethode, en uitlijnen met de optie erboven door wat extra ruimte links */
.woocommerce-checkout #payment .payment_methods .payment_box {
    padding: 0.75rem 1.25rem 0.75rem 2rem !important;
    margin: 0.5rem 0 !important;
}
.woocommerce-checkout #payment .payment_methods .payment_box p {
    margin: 0 !important;
}

/* 15. Wat extra ruimte rechts van het pijltje van de "Kies je bank" keuzelijst */
.mollie-issuer-select {
    padding-right: 2.5rem !important;
}

/* 16. Labels bij Kredietkaart (Naam op de kaart, Kaartnummer, ...) dezelfde kleur en grootte geven als de rest van de tekst op de pagina */
.mollie-components .mollie-component-label {
    font-size: 1em !important;
    color: #4A3526 !important;
}

/* 17. "Kies je bank" veld: links uitlijnen met de tekst erboven, smaller maken, eigen pijltje met marge rechts, en bruine rand bij focus */
.mollie-issuer-select {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 260px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A3526' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 10px 7px !important;
    padding-right: 2.5rem !important;
}
.mollie-issuer-select:focus {
    outline: none !important;
    border-color: #4A3526 !important;
    box-shadow: 0 0 0 1px #4A3526 !important;
}

/* Fix: header navigatie schakelt nog om bij 1024px i.p.v. 992px door een Elementor breakpoint-bug. Forceer desktop-menu tussen 993-1024px. */
@media (min-width: 993px) and (max-width: 1024px) {
  .elementor-widget-n-menu.e-n-menu-tablet {
    --n-menu-wrapper-display: flex !important;
  }
  .elementor-widget-n-menu.e-n-menu-tablet .e-n-menu-toggle {
    display: none !important;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Garamond';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://arteowines.be/wp-content/uploads/2026/01/Garamond-Premier-Pro-Caption.woff2') format('woff2');
}
@font-face {
	font-family: 'Garamond';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://arteowines.be/wp-content/uploads/2026/01/GaramondPremrPro-ItCapt.woff2') format('woff2');
}
/* End Custom Fonts CSS */