/*
 Theme Name:   Gymbiz
 Description:  Child theme voor de custom product layouts
 Author:       Patrick de Vos
 Template:     hello-elementor
 Version:      1.0.5
*/

/* ==========================================================================
   BREDE FONT FORCERING (OVERPASS)
   ========================================================================== */

/* Forceert Overpass op alle standaard tekstelementen */
html, body, p, a, li, span, label, input, textarea, select {
    font-family: 'Overpass', sans-serif !important;
}

/* Forceert Overpass op alle koppen */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Overpass', sans-serif !important;
    margin-block-start: revert!important;
}

[type=button], [type=submit], button {
    background-color: transparent;
    border: none;
}

ul.elementor-nav-menu li.menu-item.current-menu-ancestor > a.elementor-item.has-submenu {
    color: #1BAAE3 !important; /* Vervang met jouw kleur */
    fill: #1BAAE3 !important;  /* Dit kleurt ook het Elementor-pijltje (binnen de SVG) mee */
}

/* Specifieke fix voor WooCommerce en Elementor widgets die hun eigen fonts laden */
.woocommerce *, 
.elementor-widget-container,
.elementor-button-text,
.wpc-filter-link,
.product-footer-wrapper * {
    font-family: 'Overpass', sans-serif !important;
}


/* Fix voor WooCommerce links (zoals producttitels in de shop) */
.woocommerce ul.products li.product a {
    color: #083445 !important;
}

.woocommerce ul.products li.product a:hover {
    color: #1BAAE3 !important;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
    color: #083463;
}

/** kruimeldpad **/
.elementor-widget-breadcrumbs, 
.elementor-widget-breadcrumbs p#breadcrumbs,
.elementor-widget-breadcrumbs .breadcrumb_last {
    color: #ffffff !important;
}


.elementor-widget-breadcrumbs p#breadcrumbs a {
    color: #ffffff !important;
    text-decoration: underline !important;
}


.elementor-widget-breadcrumbs p#breadcrumbs a:hover {
    text-decoration: none !important;
    opacity: 0.8; 
}



/* ==========================================================================
   2. HEADER, ZOEKBALK & NAVIGATIE
   ========================================================================== */
header .elementor-icon-box-title, .elementor-button-text { padding-top: 4px; }
header .elementor-icon-box-title a:hover { color:#083445; }

/* Zoekicoon fix */
.e-search-form .e-search-label {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
    pointer-events: none !important;
    display: flex !important;
}

/* Dropdown Ballon Stijl */
header .elementor-nav-menu--dropdown {
    background-color: #ffffff !important;
    border-radius: 20px !important;
    padding: 20px 25px !important;
    min-width: 300px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    border: none !important;
    margin-top: 15px !important;
    overflow: visible !important;
}

header .elementor-nav-menu--dropdown::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    left: 45px !important; 
    border-left: 15px solid transparent !important;
    border-right: 15px solid transparent !important;
    border-bottom: 15px solid #ffffff !important;
}

header .elementor-nav-menu--dropdown li a.elementor-sub-item {
    display: flex !important;
    align-items: center !important;
    padding-left: 35px !important;
    position: relative !important;
    min-height: 40px !important; 
}

header .elementor-nav-menu--dropdown li a.elementor-sub-item::before {
    content: "" !important;
    position: absolute !important;
    top: 45% !important;
    transform: translateY(-50%) !important; 
    left: 15px !important; 
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-left: 8px solid #1BAAE3 !important; 
}

@media (max-width: 699px) {
    .e-search-form .e-search-label {
        right: 50px !important;
    }
}


/* ==========================================================================
   GYMBIZ UNIVERSAL GLOBALS: BRANDING & MATGLAS BLUR
   ========================================================================== */

/* --- 1. DE SCHERMBREDE ACHTERGRONDFOTO (BRANDING CLASS) --- */
.elementor-element.branding,
.branding {
    position: relative !important;
    overflow: hidden !important;
}

/* De schermbrede subtiele blur over de achtergrondfoto */
.elementor-element.branding::before,
.branding::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Vaste subtiele breedte-blur (bijv. 10px) */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Hele lichte witte waas over de grote foto */
    background: rgba(255, 255, 255, 0.15) !important; 
    
    z-index: 1 !important;
}

/* Zorg dat de Elementor binnenschil áltijd boven de breedte-blur zweeft */
.elementor-element.branding > .e-con-inner,
.branding > .e-con-inner {
    position: relative !important;
    z-index: 2 !important;
}


/* --- 2. HET COMPACTE MATGLAS VLAK (BLUR CLASS) --- */
.elementor-element.blur,
.blur {
    position: relative !important;
    isolation: isolate !important; /* Houdt de lagen netjes binnen dit vlak */
}

/* Deze CSS bypass breekt door Elementor's eigen achtergrond-lagen heen */
.elementor-element.blur::before,
.blur::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* De krachtige matglas-blur voor het blauwe vlak */
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    
    /* Neemt automatisch de ronde hoeken over die je in Elementor instelt */
    border-radius: inherit !important; 
    
    /* Nestelt de sterke blur exact tússen de Elementor-kleur en je teksten */
    z-index: -1 !important; 
    transform: translateZ(0);
}

/* ==========================================================================
   GYMBIZ REVIEWS CARROUSSEL
   ========================================================================== */


/* 1. Geef de icoontjes de GymBiz Blauwe kleur */
.elementor-widget-testimonial-carousel .gymbiz-slide-icon,
.elementor-testimonial__text .gymbiz-slide-icon{
    color: #1BAAE3 !important; /* GymBiz Blauw */
    font-size: 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 3. Lijn de tekst en het icoon netjes horizontaal uit in de slide */
.elementor-widget-testimonial-carousel .gymbiz-slide-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centreert de content in de balk */
    gap: 12px !important; /* Ruimte tussen icoon en tekst */
    color: #083445 !important; /* GymBiz Donkerblauw */
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    width: 100% !important;
}


/* Winkelwagen Badge */
.cart-badge {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    margin-left: 5px !important;
    transform: translateY(-8px) !important; /* Hiermee duw je hem omhoog */
    vertical-align: middle !important;
}

@media (max-width: 767px) {
    .cart-badge { margin-left: -10px!important;}
    
}

/* ==========================================================================
   GYMBIZ WOOCOMMERCE MELDING (FLEXIBEL RECHTSONDER + MOBIEL)
   ========================================================================== */

/* --- DESKTOP EN TABLET STYLING --- */
@media (min-width: 768px) {
    .woocommerce-message, 
    .woocommerce-error, 
    .woocommerce-info {
        position: fixed !important;
        bottom: 30px !important; /* Afstand vanaf de onderkant */
        right: 30px !important;  /* Afstand vanaf de rechterkant */
        top: auto !important;     /* Reset de oude 'top' instelling */
        width: auto !important;
        min-width: 350px !important;
        max-width: 480px !important;
        z-index: 99999 !important;
        background-color: #ffffff !important;
        border: none !important;
        border-left: 5px solid #1BAAE3 !important; /* GymBiz Blauwe streep */
        box-shadow: 0 10px 30px rgba(8, 52, 69, 0.15) !important;
        border-radius: 12px !important;
        padding: 15px 25px !important;
        
        /* Flexbox zorgt voor perfecte verticale uitlijning van tekst, icoon en knop */
        display: flex !important;
        align-items: center !important; 
        justify-content: space-between !important;
        gap: 15px !important;
    }
}

/* --- SPECIFIEKE MOBIELE OPTIMALISATIE --- */
@media (max-width: 767px) {
    .woocommerce-message, 
    .woocommerce-error, 
    .woocommerce-info {
        position: fixed !important;
        bottom: 0 !important;   /* Plakt strak aan de onderkant van het scherm */
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;  /* Volledige breedte op mobiel */
        max-width: 100% !important;
        margin: 0 !important;
        z-index: 99999 !important;
        background-color: #ffffff !important;
        border: none !important;
        border-top: 4px solid #1BAAE3 !important; /* Lijn verhuist naar bovenkant op mobiel */
        box-shadow: 0 -5px 25px rgba(8, 52, 69, 0.15) !important;
        border-radius: 15px 15px 0 0 !important; /* Alleen ronde hoeken aan de bovenkant */
        padding: 16px 20px !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }
}

/* --- ALGEMENE VERFIJNINGEN (UITLIJNING ICOON & KNOP) --- */

/* Zorgt dat het icoontje (en eventuele inline links) verticaal rechtstaan */
.woocommerce-message::before, 
.woocommerce-error::before, 
.woocommerce-info::before {
    color: #1BAAE3 !important; /* GymBiz Blauw icoon */
    margin: 0 !important;
    position: static !important; /* Haalt de vreemde WooCommerce absolute positie weg */
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Zorgt dat de tekst zelf ook netjes meelint */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    line-height: 1.4 !important;
    color: #083445 !important; /* GymBiz Donkerblauw */
    font-weight: 500 !important;
}

/* De knop "Winkelmand bekijken" strak trekken */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    background-color: #1BAAE3 !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: none !important;
    transition: background-color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important; /* Voorkomt dat de knop-tekst overbreekt */
    float: none !important; /* Heft oude WooCommerce floats op */
    margin: 0 !important;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-color: #083445 !important;
}

/* ==========================================================================
   PRODUCT ARCHIEF & CATEGORIE GRID
   ========================================================================== */
.onsale { display: none !important; }

.woocommerce ul.products li.product {
    background-color: #f4faff !important;
    /* Alleen de bovenhoeken afronden, onderkant blijft recht (0) */
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    
    border: 1px solid #d1e3f0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100%;
}

.custom-actie-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background-color: #FF6529 !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    border-radius: 0 20px 0 20px !important;
    z-index: 10 !important;
}

.woocommerce-loop-product__title {
    padding: 20px 20px 5px 20px !important;
    color: #083445 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.product-punten-tekst {
    padding: 0 20px !important;
    font-size: 13px !important;
    color: #4a4a4a !important;
    font-style: italic !important;
    margin-bottom: 15px !important;
}

/* Footer Wrapper & Prijs */
.product-footer-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important; /* Trekt prijs en knop op dezelfde verticale middellijn */
    padding: 0 20px 20px 20px !important;
    margin-top: auto !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Zorgt dat de prijs zich netjes gedraagt binnen de rij */
.product-footer-wrapper .price {
    margin-bottom: 0 !important; 
    display: flex !important;
    flex-direction: column !important; /* Stapelt van/voor prijzen strak onder elkaar */
    justify-content: center !important;
}

/* Zorgt dat de knop een mooi compact formaat behoudt naast de prijs */
.product-footer-wrapper .add_to_cart_button {
    margin: 0 !important;
    white-space: nowrap !important;
}

.price, .amount { color: #083445 !important; }

.price ins, .price ins .amount, .price ins bdi {
    color: #FF6529 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.price del, .price del .amount {
    color: #a4afb7 !important;
    text-decoration: line-through !important;
    font-size: 0.85em !important;
}

.woocommerce ul.products li.product .button,
.product-footer-wrapper .add_to_cart_button {
    background-color: #1BE398 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    display: inline-flex !important; /* Veranderd naar inline-flex voor stabielere centrering */
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
    align-self: center !important; /* Dwingt de knop onafhankelijk op de middellijn van de footer wrapper */
}

/* Specifieke mobiele fix om de basishoogte van de productkaart-footer te stabiliseren */
@media (max-width: 767px) {
    .product-footer-wrapper {
        min-height: 46px !important; /* Geeft een vaste minimale hoogte zodat knoppen over de hele grid uitlijnen */
    }
}

.woocommerce.columns-3 .products .product .button, 
.woocommerce.columns-3 .product-footer-wrapper .add_to_cart_button {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    background-size: 18px !important;    
}
    
    
/* ==========================================================================
   4. FILTERS & SORTERING (Hersteld naar Volledig Blauw & Rechts Uitgelijnd)
   ========================================================================== */

/* Filter Koppen */
.wpc-filter-header .widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #083445 !important;
    margin-bottom: 15px;
    border-bottom: 2px solid #1BAAE3;
    padding-bottom: 5px;
    text-transform: none;
}

/* 1. Forceer de lijst en items naar 100% en verberg uitstekende delen */
ul.wpc-filters-ul-list {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* Dit hakt de scrollbalk definitief weg */
    box-sizing: border-box !important;
}

li.wpc-checkbox-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 0 8px 0 !important; /* Alleen ruimte aan de onderkant van elk item */
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Zet de checkbox en label strak op één regel */
.wpc-term-item-content-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Dwing het label om de resterende ruimte op te eisen */
.wpc-term-item-content-wrapper label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-grow: 1 !important; 
    width: 100% !important;
    margin-left: 10px !important; 
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 4. Duw het getal handmatig strak naar rechts */
.wpc-term-count {
    margin-left: auto !important;
    padding-left: 10px !important;
    text-align: right !important;
}

/* 
   ALLES IN BLAUW: 
   Dwingt tekst, links, labels en de aantallen (counts) naar de huisstijlkleur
*/
.wpc-filter-link, 
.wpc-filter-link *, 
.wpc-filter-link span,
.e-filter-item,
.e-filter-item-text,
.wpc-term-count,
label[for*="wpc-"] {
    color: #083445 !important; /* Gymbiz donkerblauw */
    text-decoration: none !important;
    font-size: 14px !important;
    opacity: 1 !important; /* Verwijdert eventuele transparantie van de getallen */
    font-style: normal !important;
}

/* De Checkbox (Vakje) zelf */
.e-filter-item::before,
.wpc-checkbox-item input[type="checkbox"] {
    border: 2px solid #083445 !important; 
    border-radius: 4px; 
    background-color: #ffffff;
    flex-shrink: 0;
}

/* Geselecteerde staat: Vinkje wordt lichtblauw */
.e-filter-item[aria-pressed="true"]::before,
.wpc-checkbox-item input[type="checkbox"]:checked {
    background-color: #1BAAE3 !important; 
    border-color: #1BAAE3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-size: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Hover effect voor de hele regel */
.wpc-filter-item:hover .wpc-filter-link,
.wpc-filter-item:hover .wpc-term-count,
.e-filter-item:hover .e-filter-item-text {
    color: #1BAAE3 !important;
}

/* Sortering Dropdown (Rechtsboven) */
.woocommerce-ordering select {
    appearance: none !important;
    border: 1px solid #083445 !important;
    border-radius: 20px !important;
    padding: 6px 35px 6px 15px !important;
    color: #083445 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/xml' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23083445' d='M12 21l-12-18h24z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) center !important; 
    background-size: 10px !important;
}



/* ==========================================================================
   5. PAGINERING (Ronde Bollen)
   ========================================================================== */
.elementor-widget-loop-grid .elementor-pagination .page-numbers,
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 35px !important;
    margin: 0 6px !important;
    border: 2px solid #083445 !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: #083445 !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.elementor-widget-loop-grid .elementor-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers li span.current {
    background-color: #1BAAE319 !important;
    border-color: #083445 !important;
}

.woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li {
    border: 0;
}

/* ==========================================================================
   6. PRODUCT DETAIL & OVERIG
   ========================================================================== */
.woocommerce .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .quantity input.qty::-webkit-outer-spin-button {
    opacity: 1 !important;
    display: block !important;
}


.woocommerce .quantity input.qty {
    -moz-appearance: number-input !important;
}
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__image img {
    height: 500px !important;
    width: 100% !important;
    object-fit: cover !important;
}

input.qty.text { width: 75px !important; border-radius: 45px !important; }

.woocommerce table.shop_attributes td { padding: 8px 8px; }



/* ==========================================================================
   Product detail : TITEL STYLING VOOR REVIEWS & KENMERKEN (Match Related Products)
   ========================================================================== */
      
.elementor-widget-rating .e-rating .e-icon-wrapper.e-icon-marked {
    --e-rating-icon-color: #1BAAE3!important;
}

/* Labels (Naam, E-mail, Je beoordeling) */
#review_form_wrapper label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #083445 !important;
    margin-bottom: 8px !important;
}

/* De verplichte rode sterretjes (*) */
#review_form_wrapper label .required {
    color: #ff0000 !important;
    font-weight: bold !important;
}

/* De invoervelden (Naam, E-mail) en het tekstveld (Review) */
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #a3b8cc !important; /* Rustige randkleur conform afbeelding */
    color: #083445 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* Ronde hoeken specifiek voor de normale invoervelden */
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"] {
    border-radius: 25px !important; /* Volledig rond zoals op de afbeelding */
    height: 45px !important;
}

/* Grotere ronde hoeken voor het grote tekstveld (Uw vraag of opmerking-stijl) */
#review_form_wrapper textarea {
    border-radius: 20px !important;
    min-height: 120px !important;
    resize: vertical !important;
}

/* Focus staat: als je in een veld klikt */
#review_form_wrapper input:focus,
#review_form_wrapper textarea:focus {
    border-color: #1BAAE3 !important; /* Lichtblauw bij actieve klik */
    outline: none !important;
}

/* De 'Verstuur' / 'Indienen' Knop */
#review_form_wrapper input[type="submit"] {
    background-color: #1BAAE3 !important; /* Gymbiz lichtblauw */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 35px !important;
    border: none !important;
    border-radius: 50px !important; /* Volledig ovale knop */
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    display: inline-block !important;
    margin-top: 15px !important;
}

/* De sterren waar je op kunt klikken tijdens het invullen van het formulier */
#review_form_wrapper .comment-form-rating .stars a {
    color: #083445 !important; /* Gymbiz donkerblauw voor de lege/actieve sterren */
}

/* De reeds geplaatste sterren boven de reviews en de actatieve selectie */
.woocommerce .star-rating span,
#review_form_wrapper .comment-form-rating .stars a::before,
#review_form_wrapper .comment-form-rating .stars a.active::before {
    color: #1BAAE3 !important; /* Gymbiz lichtblauw voor de ingekleurde/gevulde sterren */
}

/* Hover effect op de knop */
#review_form_wrapper input[type="submit"]:hover {
    background-color: #083445 !important; /* Verandert naar donkerblauw bij hover */
    color: #ffffff !important;
}



.elementor-widget-woocommerce-product-price .price { margin: 0px;}

/* De titel boven het review-overzicht en het formulier */
.elementor-widget-n-tabs h2 {
    display:none;
}

.elementor-widget-n-tabs a:hover { text-decoration:underline;}

/* Extra witruimte boven de review-sectie in de tab */
#reviews {
    padding-top: 10px !important;
}



/* 1. Blauwe bolletjes voor lijsten in de omschrijving en tabbladen */
ul li::marker {
    color: #1BAAE3 !important; /* Het GymBiz lichtblauw */
    font-size: 1.1em;          /* Optioneel: maakt de bolletjes net iets voller/duidelijker */
}

/* 2. De linkjes in deze lijsten hebben standaard GEEN onderstreping (of behouden hun basisstijl) */
.elementor-location-single  ul li a {
    text-decoration: underline!important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* 3. BIJ HOVER: Linkjes worden blauw en krijgen een blauwe underline */
.elementor-location-single ul li a:hover {
    color: #8DB1BF !important;             /* Tekst wordt blauw */
    text-decoration: underline !important;  /* Activeer de underline */
    text-decoration-color: #1BAAE3 !important; /* Underline wordt blauw */
    text-underline-offset: 3px !important;  /* Netjes 3px onder de tekst */
}


/* --- GYMBIZ PRODUCT SPECIFICATIES (2 KOLOMMEN) --- */

/* Maak van de tabel-body een CSS Grid met 2 kolommen */
.single-product table.shop_attributes tbody {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Verdeelt de ruimte in 2 gelijke kolommen */
    gap: 15px 40px !important;                 /* Ruimte tussen rijen (15px) en kolommen (40px) */
    width: 100% !important;
}


.woocommerce table.shop_attributes,
.single-product table.shop_attributes th.woocommerce-product-attributes-item__label,
.single-product table.shop_attributes td.woocommerce-product-attributes-item__value,
.single-product table.shop_attributes tbody,
.woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th
{
    border:none;
    background: none;
}
/* Zorg dat elke tabelrij zich gedraagt als een flexbox voor de label en waarde */
.single-product table.shop_attributes tr {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    border-bottom: none !important;            /* Verwijdert eventuele standaard lijnen van het thema */
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;         /* Verwijdert eventuele zebra-strepen */
}

/* De labels (Gewicht, Kleur, etc.) */
.single-product table.shop_attributes th.woocommerce-product-attributes-item__label {
    color: #083445 !important;                  /* GymBiz Donkerblauw */
    font-weight: 700 !important;
    font-size: 15px !important;
    width: 120px !important;                     /* Vaste breedte voor de labels zodat de waarden mooi uitlijnen */
    min-width: 120px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background: none;
    
}

/* De waarden (19 kg, Zwart, Blauw, etc.) */
.single-product table.shop_attributes td.woocommerce-product-attributes-item__value {
    color: #083445 !important;                  /* Dezelfde kleur of eventueel iets lichter grijs/blauw */
    font-weight: 400 !important;
    font-size: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none;
}

/* Soms stopt WooCommerce <p> tags in de TD, die halen we uit de weg voor de uitlijning */
.single-product table.shop_attributes td.woocommerce-product-attributes-item__value p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

@media (max-width: 767px) {
    
    /* Schakel de specificatietabel terug naar 1 kolom op mobiel */
    .single-product table.shop_attributes tbody {
        grid-template-columns: 1fr !important; /* Dwingt alles onder elkaar in 1 kolom */
        gap: 15px 0 !important;                /* Verwijst de kolom-gap (was 40px) naar 0 */
    }

    /* Optioneel: Als je de specifieke WooCommerce reviews-container ook in een grid hebt staan, 
       kun je die hier direct aan toevoegen. Bijvoorbeeld: */
    .woocommerce-Reviews .commentlist {
        display: block !important; /* Of grid-template-columns: 1fr !important; */
    }
}


/* ==========================================================================
   GYMBIZ COMPLETE SHOPPING CART UPGRADE (Elementor Pro WooCommerce)
   ========================================================================== */
    .elementor-32 .elementor-element.elementor-element-f805a80 {
        --min-height: 350px!important;
   }
    
    /* De hoofdcontainer van de winkelwagen */
    .e-cart__container {
        color: #083445 !important; /* GymBiz Donkerblauw als basis */
        font-size: 15px !important;
    }
    
    /* De tabelkoppen (Th) */
    .e-cart__container table.shop_table thead th {
        color: #083445 !important;
        font-weight: 700 !important;
        border-bottom: 2px solid #cbd5e1 !important;
        text-transform: uppercase;
        font-size: 13px !important;
        letter-spacing: 0.5px;
        padding: 15px 10px !important;
    }
    
    /* Elke rij (product) in de winkelwagen */
    .e-cart__container table.shop_table tbody tr.cart_item {
        background-color: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        transition: background-color 0.2s ease;
    }
    
    /* Verticaal uitlijnen van alle cellen (afbeelding, naam, prijs perfect gecentreerd) */
    .e-cart__container table.shop_table tbody td {
        padding: 20px 10px !important;
        vertical-align: middle !important;
        color: #083445 !important;
    }
    
    
    /* --- 2. SPECIFIEKE KOLOMMEN & INHOUD --- */
    
    /* Productnaam Link */
    .e-cart__container .product-name a {
        color: #083445 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }
    .e-cart__container .product-name a:hover {
        color: #1BAAE3 !important; /* GymBiz Lichtblauw bij hover */
    }
    
    /* Nabestelling notificatie */
    .e-cart__container .backorder_notification {
        color: #FF6529 !important; /* GymBiz Oranje/Coral voor waarschuwingen */
        font-size: 13px !important;
        font-weight: 600;
        margin-top: 5px !important;
    }
    
    /* Prijzen en Subtotalen */
    .e-cart__container .product-price,
    .e-cart__container .product-subtotal {
        font-weight: 600 !important;
    }
    
    /* Verwijder-knop (Het kruisje '×') */
    .e-cart__container .product-remove a.remove {
        color: #a4afb7 !important;
        font-size: 24px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transition: all 0.2s ease;
    }
    .e-cart__container .product-remove a.remove:hover {
        background-color: #fee2e2 !important; /* Zacht rood achtergrondje */
        color: #ef4444 !important; /* Rood kruisje bij hover */
    }
    
    /* Thumbnail afbeelding */
    .e-cart__container .product-thumbnail img {
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        max-width: 70px !important;
        height: auto !important;
    }
    
    
    /* --- 3. QUANTITY (AANTAL) INPUT CENTREREN --- */
    
    .e-cart__container td.product-quantity {
        text-align: center !important;
    }
    .e-cart__container td.product-quantity .quantity {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .e-cart__container td.product-quantity .quantity input.qty {
        text-align: center !important;
        width: 60px !important;
        height: 40px !important;
        color: #083445 !important;
        font-weight: 700 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background-color: #f8fafc !important;
        outline: none !important;
    }
    .e-cart__container td.product-quantity .quantity input.qty:focus {
        border-color: #1BAAE3 !important;
        background-color: #ffffff !important;
    }
    
    
    /* --- 4. INVOERVELDEN & WAARDEBON (COUPON) --- */
    
    /* Het waardebon invoerveld */
    .e-cart__container input#coupon_code {
        height: 45px !important;
        padding: 0 15px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
        color: #083445 !important;
        width: 100% !important;
    }
    .e-cart__container input#coupon_code:focus {
        border-color: #1BAAE3 !important;
        outline: none !important;
    }
    
    /* DE CHECKOUT KNOP: "Doorgaan naar kassa" */
    .cart_totals .wc-proceed-to-checkout a.checkout-button,
    .e-cart-totals .wc-proceed-to-checkout a.checkout-button {
        background-color: #1BAAE3 !important; /* GymBiz Lichtblauw */
        color: #ffffff !important;            /* Witte tekst */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
        width: 100% !important;
        border-radius: 30px !important;       /* Volledig afgeronde hoeken conform de rest */
        font-weight: 700 !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: 2px solid #1BAAE3 !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 4px 12px rgba(27, 170, 227, 0.15) !important; /* Subtiele blauwe gloed */
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
    
    .cart_totals  { padding: 20px 0;}
    
    /* Hover voor de Checkout knop */
    .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
    .e-cart-totals .wc-proceed-to-checkout a.checkout-button:hover {
        background-color: #083445 !important; /* Switcht naar Donkerblauw op hover */
        border-color: #083445 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(8, 52, 69, 0.2) !important;
        transform: translateY(-1px);          /* Subtiel lift-effect */
    }
    
    .coupon { margin-bottom: 20px;}
       
    .button.e-apply-coupon {
        background-color: #1BAAE3 !important; /* Gymbiz lichtblauw */
        color: #ffffff !important; /* Witte tekst */
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 12px 30px !important; /* Ruimte rondom de tekst */
        border: none !important;
        border-radius: 50px !important; /* Volledig ovaal afgerond */
        cursor: pointer !important;
        transition: background-color 0.3s ease !important;
    }
    
    /* Hover effect voor de waardebon knop */
    .button.e-apply-coupon:hover {
        background-color: #083445 !important; /* Gymbiz donkerblauw bij eroverheen bewegen */
        color: #ffffff !important;
    }
    
    
    /* Inloggen link op de afrekenpagina groter maken */
    a.wc-block-checkout__login-prompt {
        font-size: 16px !important; 
        font-weight: 600 !important;
    }
    
/* ==========================================================================
   WOOCOMMERCE CHECKOUT: BESTELOVERZICHT LAYOUT
   ========================================================================== */

/* 1. Zet het hoofditem in een strak grid van 2 kolommen en 2 rijen */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
    display: grid !important;
    /* Kolom 1: Afbeelding (48px), Kolom 2: Tekst (pakt alle restruimte) */
    grid-template-columns: 48px 1fr !important;
    row-gap: 12px !important;
    column-gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 25px !important;
    align-items: start !important;
}

/* 2. De afbeelding staat vast in de eerste kolom, eerste rij */
.wc-block-components-order-summary-item__image {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* 3. De omschrijving (titel, stukprijs, advies) staat in de tweede kolom, eerste rij */
.wc-block-components-order-summary-item__description {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Zorg dat de elementen binnen de omschrijving (zoals de titel) netjes onder elkaar blijven staan */
.wc-block-components-order-summary-item__description > * {
    display: block !important;
    margin-bottom: 4px !important;
}

/* 4. Dwing de TOTAALPRIJS naar de tweede rij, onder de tekstkolom */
.wc-block-components-order-summary-item__total-price {
    grid-column: 2 !important; /* Begint onder de tekstkolom (strak uitgelijnd met titel) */
    grid-row: 2 !important;    /* Zakt verplicht naar de rij eronder */
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
}

/* 5. Zet de totaalprijs en de 'Bespaar' badge netjes naast elkaar */
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Styling voor de totale regelprijs */
.wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
    font-weight: 700 !important;
    color: #083445 !important; /* Gymbiz donkerblauw */
    font-size: 16px !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
    margin-left: 25px!important;
    }


/* ==========================================================================
   GYMBIZ WINKELWAGEN MOBIELE PRODUCTEN (COMPACTE LIJST WEERGAVE)
   ========================================================================== */

    .wc-block-components-sidebar-layout {
        margin: 10px 10px!important;
    }
}

@media (max-width: 767px) {
    /* 1. De tabel omvormen tot een nette lijst */
    .e-cart__container table.shop_table_responsive,
    .e-cart__container table.shop_table_responsive thead,
    .e-cart__container table.shop_table_responsive tbody,
    .e-cart__container table.shop_table_responsive tr,
    .e-cart__container table.shop_table_responsive td,
    .elementor-widget-woocommerce-cart .e-cart-section {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Het header/kopjes gedeelte verbergen (Prijs, Aantal, etc.) */
    .e-cart__container table.shop_table_responsive thead {
        display: none !important;
    }

    /* 3. Elk product rij wordt een compacte 'kaart' */
    .e-cart__container table.shop_table_responsive tbody tr.cart_item {
        display: flex !important;
        flex-wrap: wrap !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 15px !important;
        margin-bottom: 15px !important; /* Ruimte tussen producten */
        position: relative;
    }

    /* --- DE CELLEN BINNEN DE KAART --- */

    /* Basis-instelling voor de cellen (we halen de standaard labels weg) */
    .e-cart__container table.shop_table tbody td {
        padding: 0px !important;
    }
    .e-cart__container table.shop_table_responsive tbody tr td {
        display: block !important;
        width: auto !important;
        text-align: left !important;
        clear: none !important;
    }
    
    /* Verberg de standaard 'labels' (Product:, Prijs:, etc.) */
    .e-cart__container table.shop_table_responsive tr td::before {
        display: none !important;
    }

    /* A. Verwijder knop (X) - rechtsboven plaatsen */
    .e-cart__container table.shop_table_responsive tbody tr td.product-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 2;
    }
    .e-cart__container table.shop_table_responsive tbody tr td.product-remove a.remove {
        font-size: 20px !important;
        color: #e53e3e !important; /* Rood voor verwijderen */
    }

    /* B. Product Afbeelding - links uitlijnen */
    .e-cart__container table.shop_table_responsive tbody tr td.product-thumbnail {
        width: 80px !important;
        height: 80px !important;
        margin-right: 15px !important;
    }
    .e-cart__container table.shop_table_responsive tbody tr td.product-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }

    /* C. De Details Container (Alle tekst aan de rechterkant) */
    /* Dit is het rechtergedeelte van de flexbox */
    .product-details-container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    /* Wij moeten de HTML structuur een heel klein beetje helpen via CSS om 
       de details netjes te nesten. Dit is een trucje. */
    .e-cart__container table.shop_table_responsive tbody tr td.product-name,
    .e-cart__container table.shop_table_responsive tbody tr td.product-price,
    .e-cart__container table.shop_table_responsive tbody tr td.product-quantity,
    .e-cart__container table.shop_table_responsive tbody tr td.product-subtotal {
        width: 100% !important;
        padding-right: 25px !important; /* Ruimte voor de X knop */
    }

    /* Naam stylen */
    .e-cart__container table.shop_table_responsive tbody tr td.product-name a {
        color: #083445 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
    }
    .backorder_notification {
        font-size: 12px !important;
        color: #f6ad55 !important; /* Oranje voor backorder */
    }

    /* Prijs en Subtotaal samenvoegen */
    .e-cart__container table.shop_table_responsive tbody tr td.product-price,
    .e-cart__container table.shop_table_responsive tbody tr td.product-subtotal {
        display: none !important; /* Verbergen, want we tonen het subtotaal in het aantal-veld */
    }

    /* Aantal en Prijsregel stylen */
    .e-cart__container table.shop_table_responsive tbody tr td.product-quantity {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 5px !important;
    }
    
    /* Het aantal-veld zelf */
    .e-cart__container table.shop_table_responsive tbody tr td.product-quantity .quantity input.qty {
        width: 50px !important;
        height: 35px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 4px !important;
        text-align: center !important;
        font-size: 13px !important;
    }
    
    /* We voegen handmatig een prijsregel toe achter het aantal-veld via CSS */
    .e-cart__container table.shop_table_responsive tbody tr td.product-quantity::after {
        content: attr(data-title)": " !important; /* Pak het 'data-title' attribuut van WooCommerce */
        color: #083445 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }
    
    /* De actie-knoppen (Coupon, Update) */
    .e-cart__container table.shop_table_responsive tbody tr td.actions {
        padding: 10px 0 0 !important;
        border-top: 1px solid #e2e8f0 !important;
        margin-top: 10px !important;
    }
    .e-cart__container table.shop_table_responsive tbody tr td.actions .coupon,
    .e-cart__container table.shop_table_responsive tbody tr td.actions button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}


/* ==========================================================================
   WOOCOMMERCE MIJN ACCOUNT (INLOG + REGISTRATIE) GYMBIZ STYLING     
   ========================================================================== */

/* Zorg dat de twee kolommen (Inlog / Registratie) netjes naast elkaar staan op desktop en onder elkaar op mobiel */
.elementor-widget-woocommerce-my-account .u-columns.col2-set {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    margin-top: 20px !important;
}

.elementor-widget-woocommerce-my-account .u-column1,
.elementor-widget-woocommerce-my-account .u-column2 {
    flex: 1 1 400px !important; /* Zorgt voor flexibele, gelijke kolommen */
    width: 100% !important;
}

/* 1. De titels (Login & Registreren) */
.elementor-widget-woocommerce-my-account h2 {
    color: #083445 !important; /* Donkere GymBiz tekstkleur */
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    font-size: 24px !important;
}

/* 2. Labels boven de invoervelden (Inlog & Registratie) */
.woocommerce-form-login label,
.woocommerce-form-register label {
    color: #083445 !important; /* Donkere GymBiz tekstkleur */
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* 3. De invoervelden zelf (Beide formulieren) */
.woocommerce-form-login .input-text,
.woocommerce-form-register .input-text {
    border: 1px solid #cbd5e1 !important;
    border-radius: 30px !important; /* Volledig afgeronde hoeken radius 30px */
    padding: 12px 22px !important;
    color: #083445 !important;
    background-color: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important; /* Zorgt voor een mooie hoogte */
}

/* Wanneer je in een veld klikt (Focus) */
.woocommerce-form-login .input-text:focus,
.woocommerce-form-register .input-text:focus {
    border-color: #1BAAE3 !important; /* Rand wordt GymBiz Blauw */
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(27, 170, 227, 0.15) !important;
}

/* Oogje om wachtwoord te tonen positionering herstellen door de ronde hoeken */
.woocommerce-form-login .password-input,
.woocommerce-form-register .password-input {
    display: block !important;
    position: relative !important;
}

.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input {
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 4. De Knoppen (Inloggen & Registreren) */
.woocommerce-form-login .button.woocommerce-form-login__submit,
.woocommerce-form-register .button.woocommerce-form-register__submit {
    background-color: #1BAAE3 !important; /* GymBiz Blauw */
    color: #ffffff !important; /* Witte tekst */
    border-radius: 30px !important; /* Volledig afgeronde hoeken radius 30px */
    padding: 0 30px !important;
    height: 48px !important; /* Zorgt dat de knop even hoog is als de velden */
    font-weight: 700 !important;
    border: 2px solid #1BAAE3 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    float: none !important; /* Voorkomt dat Layout breekt */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 15px !important;
}

/* Hover effect op de knoppen */
.woocommerce-form-login .button.woocommerce-form-login__submit:hover,
.woocommerce-form-register .button.woocommerce-form-register__submit:hover {
    background-color: #083445 !important; /* Verandert naar de donkere kleur op hover */
    border-color: #083445 !important;
    color: #ffffff !important;
}

/* Privacy-beleid tekst bij registratie een subtiele look geven */
.woocommerce-privacy-policy-text {
    color: #4a5568 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
}

/* 5. 'Onthouden' checkbox en 'Wachtwoord vergeten?' link */
.woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

/* Checkbox styling */
.woocommerce-form-login__rememberme input[type="checkbox"] {
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked {
    background-color: #1BAAE3 !important;
    border-color: #1BAAE3 !important;
}

.woocommerce-button { margin-left: 20px!important;}

/* Wachtwoord vergeten link */
.lost_password a {
    color: #1BAAE3 !important; /* GymBiz Blauw */
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.lost_password a:hover {
    color: #083445 !important;
    text-decoration: underline !important;
}

/* ========================================== */
/* 1. GYMBIZ MIJN ACCOUNT: ALS JE INLOGT      */
/* ========================================== */

/* De titel 'Login' */
.elementor-widget-woocommerce-my-account h2 {
    color: #083445 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* Labels boven de invoervelden (Gebruikersnaam / Wachtwoord) */
.woocommerce-form-login label {
    color: #083445 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* De invoervelden zelf (Gebruikersnaam & Wachtwoord) */
.woocommerce-form-login .input-text {
    border: 1px solid #cbd5e1 !important;
    border-radius: 30px !important; /* Radius 30px */
    padding: 12px 22px !important;
    color: #083445 !important;
    background-color: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important;
}

.woocommerce-form-login .input-text:focus {
    border-color: #1BAAE3 !important;
    outline: none !important;
}

/* Wachtwoord oogje herpositioneren */
.woocommerce-form-login .password-input {
    display: block !important;
    position: relative !important;
}

.woocommerce-form-login .show-password-input {
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* De 'Inloggen' knop */
.woocommerce-form-login .button.woocommerce-form-login__submit {
    background-color: #1BAAE3 !important; /* GymBiz Blauw */
    color: #ffffff !important;
    border-radius: 30px !important; /* Radius 30px */
    padding: 0 30px !important;
    height: 48px !important;
    font-weight: 700 !important;
    border: 2px solid #1BAAE3 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.woocommerce-form-login .button.woocommerce-form-login__submit:hover {
    background-color: #083445 !important;
    border-color: #083445 !important;
}

/* Wachtwoord vergeten link */
.lost_password a {
    color: #1BAAE3 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}


/* ========================================== */
/* 2. GYMBIZ MIJN ACCOUNT: ALS JE INLOGT BENT */
/* ========================================== */

/* Het navigatiemenu aan de linkerkant (of bovenkant op mobiel) */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.woocommerce-MyAccount-navigation i {
    color: #083445 !important;
    margin-right: 10px;
}

.woocommerce-MyAccount-navigation li a {
    color: #083445 !important; /* Tekstkleur #083445 */
    font-weight: 600 !important;
    padding: 12px 20px !important;
    display: block !important;
    border-radius: 30px !important; /* Radius 30px */
    transition: all 0.2s ease !important;
}

/* Actieve menupagina en hover-effect (GymBiz Blauw #1BAAE3, witte tekst) */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    background-color: #1BAAE3 !important; /* GymBiz Blauw */
    color: #ffffff !important;
}

/* Knoppen binnen het dashboard (zoals 'Bekijken' bij bestellingen, of adres opslaan) */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button.button,
.woocommerce-EditProfileForm .button {
    background-color: #1BAAE3 !important; /* GymBiz Blauw */
    color: #ffffff !important;
    border-radius: 30px !important; /* Radius 30px */
    padding: 12px 28px !important;
    font-weight: 600 !important;
    border: 2px solid #1BAAE3 !important;
    transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button.button:hover {
    background-color: #083445 !important;
    border-color: #083445 !important;
    color: #ffffff !important;
}

/* Inputvelden op de accountpagina (bijv. adres bewerken of profiel wijzigen) */
.woocommerce-MyAccount-content .input-text,
.woocommerce-EditProfileForm .input-text {
    border: 1px solid #cbd5e1 !important;
    border-radius: 30px !important; /* Radius 30px */
    padding: 12px 20px !important;
    color: #083445 !important;
}

.woocommerce-MyAccount-content .input-text:focus,
.woocommerce-EditProfileForm .input-text:focus {
    border-color: #1BAAE3 !important;
    outline: none !important;
}

/* Labels en Welkom-teksten binnen het dashboard */
.woocommerce-MyAccount-content label,
.woocommerce-MyAccount-content p {
    color: #083445 !important; /* Teksten netjes in de donkere kleur */
}

/* Tabellen (Bestellingenoverzicht) */
.woocommerce-MyAccount-content table.shop_table th {
    background-color: #f8fafc !important;
    color: #083445 !important;
    font-weight: 700 !important;
}


/* ========================================== */
/* NIEUWSBRIEF FOOTER                         */
/* ========================================== */

/* Desktop & Algemene styling */
selector .elementor-form-fields-wrapper { 
    display: flex !important; 
    flex-wrap: nowrap !important; 
    gap: 10px; 
}

selector .elementor-field-type-text, 
selector .elementor-field-type-email { 
    width: 325px !important; 
    flex: 0 0 325px !important; 
}

/* Specifieke mobiele styling (schermen tot 767px) - Velden NAAST elkaar */

@media (max-width: 767px) {
    
    .elementor-element-8da843c .elementor-field-type-submit {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-self: center !important; /* Dwingt de knop naar het absolute midden */
        margin-top: 8px !important;    /* Wat extra ademruimte onder het e-mailveld */
    }

    /* Behoud de ronde vorm van je verzendknop */
    .elementor-element-8da843c .elementor-field-type-submit button {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
    }
}

footer .address a {
    text-decoration: underline !important;
    text-decoration-color: #083445 !important;
    text-underline-offset: 4px !important;
}

footer a:hover,
footer a:hover .elementor-icon-list-text {
    text-decoration: underline !important;
    text-decoration-color: #8DB1BF !important;
    text-underline-offset: 4px !important;
}

footer .address a:hover {
    text-decoration: underline !important;
    text-decoration-color: #083445 !important;
}

/* ==========================================================================
   7. MOBIEL & RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .woocommerce-message, .woocommerce-error, .woocommerce-info { left: 20px; right: 20px; top: 10px; min-width: 0; }
    selector .elementor-form-fields-wrapper { flex-wrap: wrap !important; }
    selector .elementor-field-group { width: 100% !important; flex: 0 0 100% !important; }
    .elementor-icon-list-items .elementor-icon-list-item.elementor-inline-item { width: 100% !important; margin-bottom: 10px; padding: 2px 10px }
}

/** Filters op mobiel **/
@media (max-width: 767px) {
    .elementor-element-2fecb03 { position: absolute;}
    
    
    /* Verberg de standaard WooCommerce sortering en oude plugin overlays */
    .wpc-filters-open-button-container,
    .wpc-widget-close-container,
    .wpc-filters-widget-controls-container,
    .woocommerce-ordering {
        display: none !important;
    }

    /* Resultatentekst direct boven de knoppen */
    .woocommerce-result-count {
        display: block !important;
        text-align: center !important;
        float: none !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        color: #4a5568 !important;
    }

    /* De hoofdcontainer */
    .gymbiz-mobile-bar-container {
        width: 100% !important;
        margin: 0 0 0px 0 !important; 
        padding: 0 15px !important; 
        box-sizing: border-box !important;
        position: relative !important; 
    }

    /* De rij waar de knoppen in staan */
    .gymbiz-mobile-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .gymbiz-filter-col,
    .gymbiz-sort-col {
        flex: 1 !important;
        width: 50% !important;
        position: static !important; 
    }

    /* Styling van de knoppen (Filter & Sorteren) */
    .gymbiz-dropdown-button {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 46px !important;
        padding: 0 18px 0 18px !important;
        background-color: #ffffff !important;
        color: #083445 !important; /* Aangepast naar GymBiz donkerblauw */
        font-size: 14px !important;
        font-weight: 600 !important;
        font-family: inherit !important;
        border: 2px solid #083445 !important; /* Dikte naar 2px voor match met site */
        border-radius: 30px !important; /* Radius 30px */
        box-sizing: border-box !important;
        outline: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    /* Actieve staat van de knop wanneer dropdown open is */
    .gymbiz-dropdown-button.dropdown-open {
        background-color: #1BAAE3 !important; /* GymBiz Blauw */
        border-color: #1BAAE3 !important;
        color: #ffffff !important;
    }

    .gymbiz-btn-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding-right: 8px !important;
        flex: 1 !important;
        text-align: left !important;
    }

    /* Vaste SVG pijlpositie */
    .gymbiz-arrow {
        width: 20px !important;
        height: 20px !important;
        fill: #083445 !important; /* Aangepast naar GymBiz donkerblauw */
        transition: transform 0.2s ease, fill 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    .gymbiz-dropdown-button.dropdown-open .gymbiz-arrow {
        transform: rotate(180deg) !important;
        fill: #ffffff !important; /* Pijl wordt wit op een actieve blauwe knop */
    }

    /* Base styling voor beide dropdown-vensters (Gelijke breedte en schaduw) */
    .wpc-filters-widget-content,
    .gymbiz-custom-sort-dropdown {
        display: none;
        position: absolute !important;
        left: 0 !important; 
        width: 100% !important; 
        right: auto !important;
        background: #ffffff !important;
        border: 2px solid #1BAAE3 !important; /* Rand wordt GymBiz Blauw */
        border-radius: 16px !important; /* 16px zorgt voor mooie hoeken op een groot vlak */
        box-shadow: 0 12px 30px rgba(8, 52, 69, 0.12) !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
    }

    /* ========================================== */
    /* APARTE POSITIONERING VAN DE TWEE DROPDOWNS */
    /* ========================================== */

    .gymbiz-filter-col,
    .gymbiz-sort-col {
        position: static !important;
    }

    /* 1. FILTER DROPDOWN */
    .wpc-filters-widget-content {
        top: 55px !important; /* Iets strakker onder de knop gepositioneerd */
        padding: 22px !important;
    }

    /* 2. SORTEER DROPDOWN */
    .gymbiz-custom-sort-dropdown {
        top: 55px !important; 
        padding: 10px 0 !important;
        overflow: hidden !important; /* Zorgt dat de actieve blauwe balk niet buiten de border-radius snijdt */
    }

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

    /* Sorteerregels inhoud */
    .gymbiz-custom-sort-dropdown div {
        padding: 14px 20px !important;
        font-size: 14px !important;
        color: #083445 !important; /* GymBiz donkerblauw */
        cursor: pointer !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-top: none !important; 
        text-align: left !important;
        transition: background-color 0.2s ease !important;
    }

    .gymbiz-custom-sort-dropdown div:last-child {
        border-bottom: none !important;
    }

    /* Actieve selectie en Hover binnen sorteer dropdown */
    .gymbiz-custom-sort-dropdown div.active,
    .gymbiz-custom-sort-dropdown div:hover {
        font-weight: 700 !important;
        background-color: #1BAAE3 !important; /* GymBiz Blauw */
        color: #ffffff !important; /* Witte tekst */
    }

    /* Filter segmenten opschonen */
    .wpc-filters-section { 
        margin-bottom: 18px !important; 
        border-top: none !important; 
    }
    
    .wpc-filter-title { 
        font-weight: 700 !important; 
        color: #083445 !important; /* GymBiz donkerblauw */
        margin-bottom: 8px !important; 
        font-size: 15px !important; 
    }
    
    /* Verwijder de blauwe bolletjes en reset de margin/padding van de filterlijsten */
    .wpc-filters-widget-content ul, 
    .wpc-filters-widget-content li {
        list-style: none !important;
        list-style-type: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Zorgt dat checkboxes en tekst mooi strak uitlijnen */
    .wpc-filters-widget-content .wpc-filter-item-wrapper {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Optimaliseer de witruimte onder de knoppenbalk tot de producten */
    .gymbiz-mobile-bar-container {
        margin-bottom: 20px !important; /* Geeft wat gezonde ademruimte tot de productgrid */
    }

    .wpc-filters-widget-content {
        margin-bottom: 0 !important;
    }
    
    .elementor-131 .elementor-element.elementor-element-9d62bd9:not( .elementor-widget-image ), .elementor-131 .elementor-element.elementor-element-9d62bd9.elementor-widget-image img,
    .elementor-1816 .elementor-element.elementor-element-12cf56b:not( .elementor-widget-image ), .elementor-1816 .elementor-element.elementor-element-12cf56b.elementor-widget-image img
    {
        -webkit-mask-position-x: 50%!important;
    }
}

/* Onzichtbaar op desktop */
@media (min-width: 768px) {
    .gymbiz-mobile-bar-container { display: none !important; }
}


@media (max-width: 768px) {
    .elementor-16 .elementor-element.elementor-element-6ba0516.elementor-element {
        margin: -9px 0 0 12px;
    }
    .elementor-element-0113e7c .e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Staat toe dat lange tekst naar regel 2 zakt */
        align-items: flex-start !important; /* Dwingt de VERTICALE uitlijning naar de TOP */
        justify-content: flex-start !important;
        gap: 0px 4px !important; /* Minimale ruimte tussen icoon en tekst */
    }

    /* 2. Zorg dat het Home-icoon widget strak bovenin uitlijnt en geen extra marge heeft */
    .elementor-element-d8a0918 {
        display: inline-flex !important;
        align-items: flex-start !important;
        vertical-align: top !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* Zorg dat de SVG binnen het icoon ook strak bovenin start */
    .elementor-element-d8a0918 .elementor-icon-box-wrapper,
    .elementor-element-d8a0918 .elementor-icon {
        display: flex !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* 3. Zorg dat de Breadcrumb-widget ook strak bovenaan begint */
    .elementor-element-5974970 {
        display: inline-block !important;
        vertical-align: top !important;
        margin: -2px 0px 0px 0px!important;
        padding: 0 !important;
        flex: 1 !important; /* Pakt de rest van de breedte */
    }

    /* 4. Reset eventuele standaard marges van de p-tag */
    #breadcrumbs {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important; /* Zorgt voor een mooie basishoogte die matcht met het icoon */
        display: inline !important;
    }

    /* De laatste productnaam mag hierna gewoon natuurlijk afbreken */
    #breadcrumbs .breadcrumb_last {
        display: inline !important; /* Houdt het als een natuurlijk doorlopende zin */
        color: #8DB1BF !important;
    }
    .elementor-element-d8a0918 .elementor-icon-box-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important; /* Dwingt een strakke lijnhoogte af */
        display: inline-block !important;
        vertical-align: top !important; /* Lijn de container uit aan de top */
    }

    /* Target de link direct in de titel waar de » in staat */
    .elementor-element-d8a0918 .elementor-icon-box-title a {
        display: inline-block !important;
        vertical-align: top !important; /* Trekt de chevron zelf naar de bovenkant */
        line-height: 1.2 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    
    /* ==========================================================================
   USP ICON LIST NAAR SWIPEBARE SLIDER (MOBIEL)
   ========================================================================== */

   

   /** Product detail **/ 
    .single-product .woocommerce-product-gallery .flex-viewport,
    .single-product .woocommerce-product-gallery__image img {
        height: 350px !important;
        
    }
    
}