/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

h3#ship-to-different-address {
    font-size: 18px !important;
    font-weight: bold;
}

#customer_details div#customer_details {
    display: flex;
    flex-direction: column;
    float: left;
}

button.slick-next.slick-arrow,
button.slick-prev.slick-arrow {
    background: none !important;
}

body {
    -webkit-font-smoothing: auto;
    overflow-x: hidden;
}

.facetwp-facet {
    margin-bottom: 10px !important;
}

.facetwp-facet.facetwp-facet-tutorials_zoeken.facetwp-type-search,
.facetwp-facet.facetwp-facet-tutorials_hoofdcategorie.facetwp-type-checkboxes,
.facetwp-facet.facetwp-facet-layers_merken.facetwp-type-checkboxes {
    margin-bottom: 0px !important;
}

.facet-wrap {
    h4 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 16px;
    }

    &:has(.facetwp-facet:empty) {
        display: none;
    }
}

.facetwp-checkbox {
    font-size: 14px;
    padding-left: 30px !important;
    margin-bottom: 6px !important;
    background: url(../../../../../../../wp-content/uploads/checkbox.png) no-repeat !important;
    background-size: contain !important;

    &.checked {
        background-image: url(../../../../../../../wp-content/uploads/checkbox-2.png) !important;
    }
}

.Filter .facetwp-checkbox {
    background: none !important;
    padding-left: 0px !important;
    padding-right: 15px;

    &.checked {
        font-weight: bold;
    }
}

.elementor-location-header {
    a.wpml-ls-link {
        padding: 0 4px;
    }

    span.elementor-button-icon-qty {
        background: #db504b !important;
        padding: 4px;
        border-radius: 90px;
        float: right;
        position: absolute;
        left: 15px;
        top: -5px;
        width: 20px;
        height: 20px;
        font-size: 11px !important;
    }

    .eicon-bag-medium:before {
        content: "\f290";
        font-family: 'Font Awesome 5 Free';
    }
}

.elementor-nav-menu {
    z-index: 99999;
}

td {
    background: none;
    padding: 2px !important;
}

table {
    td,
    th {
        border: 0px;
    }

    tbody > tr:nth-child(odd) > td,
    tbody > tr:nth-child(odd) > th {
        background-color: #fff !important;
    }
}



span.onsale {
    display: none;
}

.elementor.product .woocommerce-product-gallery__trigger + .woocommerce-product-gallery__wrapper {
    overflow: visible !important;
}

.pswp__img {
    object-fit: contain;
}

@media screen and (max-width: 1400px) {
    .aw-thumbnail-slider-parent .aw-slider-btn-left img,
    .aw-thumbnail-slider-parent .aw-slider-btn-right img {
        width: auto;
        height: 80px !important;
    }
}

.Layer_loop {
    .gallery-image-title {
        display: none;
    }

    .gallery-item:not(:first-child) {
        display: none;
    }
}

.dialog-lightbox-widget-content img {
    max-width: 1040px !important;
}

.gallery-image-title {
    text-align: left;
    color: #2b348a;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.aw-hide-img-title .gallery-image-title {
    display: none !important;
}

#fbuilder {
    .ui-datepicker-inline {
        max-width: 100% !important;
    }

    .ui-datepicker-header {
        background: none !important;
    }

    .ui-datepicker-title {
        display: flex;
        justify-content: center;
    }

    .slots,
    .ui-datepicker {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none;
        border: 0px;
    }

    .slots {
        border: 0px !important;

        div {
            display: inline-block;
            border: 1px solid #2b348a !important;
            padding: 0px !important;

            a {
                background: #c5d1eb !important;
            }
        }
    }
}

.fieldCalendarService.fieldCalendarServicefieldname1_1 {
    display: none;
}

button.pbSubmit {
    background: #db504b !important;
    color: #fff !important;
}

span.sub-arrow {
    padding-left: 4px !important;
}

.e-loop-item.product {
    &.instock .winkelwagen {
        display: block;
    }

    &.outofstock .blijfopdehoogte {
        display: block;
    }

    &.instock .blijfopdehoogte {
        display: none;
    }

    &.outofstock .winkelwagen {
        display: none;
    }

    &.outofstock .winkelwagenbtn {
        display: none;
    }
}

.elementor-menu-cart__product-image img {
    width: 40px;
}

/* Mini-cart flyout (de cart zelf, niet de toggle-icon) boven overige elementen */
.elementor-menu-cart__container,
.elementor-menu-cart__main {
    z-index: 999;
}

/* Mini-cart flyout rechts uitlijnen: rechterrand netjes onder het cart-icoon
   i.p.v. Elementor's standaard links-verankering (inset-inline: 0 auto). */
body .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container {
    inset-inline: auto 0;
    left: auto;
    right: 0;
}

/* Mini-cart paneel op mobiel horizontaal verschuiven */
@media (max-width: 767px) {
    .elementor-menu-cart__main {
        left: 27% !important;
    }
}

.contact_full {
    .wpforms-container-full .wpforms-form {
        flex-direction: column;
    }

    .wpforms-container .wpforms-form * {
        width: 100%;
    }
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    z-index: 10;
}

@media screen and (max-width: 768px) {
    .woocommerce table.shop_table_responsive tbody th,
    .woocommerce-page table.shop_table_responsive tbody th {
        display: block !important;
    }
	.aw-subcategory-slider__link {
		min-height: 50px !important;
		padding: 4px !important;
	}
}

@media screen and (max-width: 600px) {
    .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal {
        padding: 0;
    }

    .elementor-location-header {
        & span.elementor-button-icon-qty {
            float: right;
            position: absolute;
            left: 12px;
            top: -4px;
            width: auto;
            height: 15px;
            font-size: 8px !important;
            line-height: 6px;
        }
    }
}


.aw-subcategory-slider__link {
	border-radius: 0px !important;
}

/* --- Product loop-grid (Elementor .e-loop-item): prijs + knoppen-rij altijd
 * onderaan de tegel pinnen ---
 * De loop-grid rekt items in dezelfde rij tot gelijke hoogte; een variabel product
 * (met "Selecteer een optie") is hoger, waardoor simpele producten witruimte ONDER
 * hun knoppenrij kregen. Flex-kolom over de volle tegelhoogte + margin-top:auto op
 * het con dat de [aw_add_to_cart]-shortcode bevat duwt prijs+knoppen naar beneden.
 * (De eigen awcf_loop_items-module pint z'n footer al via justify-content.) */
.e-loop-item > .e-con {
	height: 100%;
}
.e-loop-item > .e-con > .e-con-inner {
	flex-grow: 1;
}
.e-loop-item .e-con:has(> .elementor-widget-shortcode) {
	margin-top: auto;
}

/* Grid-blowout voorkomen: CSS-grid-tracks krijgen standaard min-width:auto
 * (= min-content). Na "Toevoegen" wisselt de knoptekst naar het bredere
 * "Bekijk winkelwagen", waardoor de min-content — en dus de grid-kolom en de
 * tegel — iets groeide. min-width:0 pint de kolom op z'n 1fr-breedte; de flex-
 * children eronder mogen ook krimpen zodat de knoptekst niet meer de breedte
 * bepaalt (de aantal-input links houdt z'n eigen min-width van 45px). */
.elementor-loop-container.elementor-grid > .e-loop-item {
	min-width: 0;
}
.e-loop-item .aw-qty-btn-wrapper,
.e-loop-item .aw-qty-btn-wrapper-right,
.e-loop-item .aw-add-to-cart-btn,
.e-loop-item .aw-view-cart-btn {
	min-width: 0;
}

/* Loop-grid tegels ("Misschien vind je dit ook leuk", homepage-loops) zijn op mobiel
 * smal (2 kolommen); het aantal-invoerveld knijpt "Toevoegen" zo dicht dat de tekst
 * wegvalt. Op mobiel het aantalveld verbergen -> alleen Toevoegen + info-knop. Het
 * aantal blijft 1: het hidden number-input zit nog in het formulier, alleen visueel weg. */
@media (max-width: 767px) {
	.e-loop-item .aw-qty-btn-wrapper-left {
		display: none !important;
	}
	.e-loop-item .aw-qty-btn-wrapper-right {
		width: auto !important;
		flex: 1 1 auto !important;
	}
}

button.facetwp-reset.facetwp-hide-empty {
    background-color: #2b358a;
	border: 0px;
}


.facetwp-flyout h3 {
	font-size: 18px;
	line-height: 18px;
	margin-top: 24px;
	font-weight: bold;
}
.flyout-row.name-zoeken,
.flyout-row.name-sorteren {
	display: none;
}

.facetwp-flyout-close {
	font-size: 24px;
	margin-bottom: -24px;
}

.elementor-location-footer .elementor-message {
    background: #c5d1eb !important;
    padding: 10px !important;
    width: 100% !important;
}

@media screen and (max-width: 600px) {

	.facetwp-facet input.facetwp-search {
		min-width: 180px !important;
		font-size: 15px;
		padding-right: 4px !important;
	}
}

/* --- Zoekfacet (facet "zoeken") op product-cat-archief netter uitlijnen ---
 * De drie toolbar-facets staan in één flex-rij (Elementor container 41b339e).
 * Sorteren (widget 4d96c65) en producten-per-pagina (widget 0f8fa5f) hebben
 * expliciet --align-self:flex-end; het zoekwidget (cf83b9f) niet, dus dat viel
 * terug op stretch en het input-veld zweefde bovenin -> stond "hoger" dan de
 * selects ernaast. */
.elementor-element.elementor-element-cf83b9f {
	--align-self: flex-end;
	align-self: flex-end;
}

/* Hoogte gelijktrekken met de selects ernaast: een text-input rendert van
 * nature 42px, de <select>-facets (sorteren/pager) zijn 39.5px. */
.facetwp-facet.facetwp-facet-zoeken input.facetwp-search {
	height: 39.5px;
}

/* Placeholder: browser-grijs -> zelfde (bijna-zwarte) tekstkleur als de velden
 * ernaast (kit --e-global-color-text = #2A2F35). */
.facetwp-facet.facetwp-facet-zoeken input.facetwp-search::placeholder {
	color: #2A2F35;
	opacity: 1; /* Firefox verlaagt placeholder-opacity standaard */
}

/* Mobiel (<=767px, "Producten per pagina" is dan verborgen): zoekveld op
 * dezelfde rij als "Sorteer op" houden en de resterende ruimte laten
 * opvullen (flex-grow), i.p.v. full-width op een eigen regel. */
@media (max-width: 767px) {
	.elementor-element.elementor-element-cf83b9f {
		flex-grow: 1 !important;
		width: auto !important;
		max-width: none !important;
	}
	.elementor-element.elementor-element-4d96c65 { /* Sorteer op: natuurlijke breedte */
		flex-grow: 0 !important;
	}
	.facetwp-facet.facetwp-facet-zoeken,
	.facetwp-facet.facetwp-facet-zoeken input.facetwp-search {
		width: 100% !important;
		min-width: 0 !important;
	}
	/* FacetWP wikkelt het input in .facetwp-input-wrap (display:inline-block),
	 * die krimpt naar de inhoud -> width:100% op het input pakte maar ~217px.
	 * Wrap zelf ook block + 100% maken zodat het input de volle rij vult. */
	.facetwp-facet.facetwp-facet-zoeken .facetwp-input-wrap {
		display: block !important;
		width: 100% !important;
	}
	/* Zoek-icoon 5px kleiner op mobiel (FacetWP-default = 20x20px). */
	.facetwp-facet.facetwp-facet-zoeken .facetwp-icon:before {
		background-size: 15px 15px !important;
	}
	/* Zoekveld (<input>) en Sorteer-select exact even hoog op mobiel: native
	   render van input vs select verschilt hier net, dus beide hard gelijk. */
	.facetwp-facet.facetwp-facet-zoeken input.facetwp-search,
	.facetwp-facet.facetwp-facet-sorteren select.facetwp-sort-select {
		height: 39.5px !important;
		box-sizing: border-box !important;
	}
}
/* Anti-FOUC slider-pijlen: verberg de vorige/volgende-pijlen tot slick is
   geinitialiseerd (.slick-arrow wordt pas bij init toegevoegd). Voorkomt dat
   de pijlen bij het laden groot en onder elkaar verschijnen - ook bij producten
   met 1 of enkele afbeeldingen waar geen slider nodig is. Toegevoegd 2026-07-31. */
.aw-slider-btn-left:not(.slick-arrow),
.aw-slider-btn-right:not(.slick-arrow) {
	display: none !important;
}

/* Harde bovengrens op de slider-pijlen: voorkomt dat ze groot/gestapeld tonen in
   het korte venster voordat slick initialiseert (de module zet de img standaard op
   110px; deze cap wint via gelijke specificiteit + max-height). Toegevoegd 2026-07-31. */
.aw-thumbnail-slider-parent .aw-slider-btn-left,
.aw-thumbnail-slider-parent .aw-slider-btn-right {
	max-width: 44px !important;
	max-height: 60px !important;
	overflow: hidden;
}
.aw-thumbnail-slider-parent .aw-slider-btn-left img,
.aw-thumbnail-slider-parent .aw-slider-btn-right img {
	max-height: 50px !important;
	max-width: 44px !important;
}


body.woocommerce-cart form.woocommerce-cart-form {
	gap: 0px !important;	
}

body.woocommerce-cart .e-shop-table.e-cart-section {
    margin-bottom: 0px;
}

body.woocommerce-cart .elementor-widget-woocommerce-cart .e-cart-section {
	border: 0px;
}