/* ==========================================================================
   PRODUCTAFBEELDING BIJSTELLEN (COMPUTER & TABLET)
   ========================================================================== */
@media (min-width: 768px) {
    
    /* 1. Pas hier de maximale breedte en hoogte van de afbeelding aan */
    .single-product .woocommerce-product-gallery {
        max-width: 480px !important;  /* Wijzig dit getal naar wens */
        width: 100% !important;
        float: left !important;
        margin-right: 4% !important;
    }

    /* 2. Zorg dat de afbeelding binnen het frame blijft en niet vervormt */
    .single-product .woocommerce-product-gallery__wrapper img {
        max-height: 400px !important; /* Wijzig dit getal naar wens */
        object-fit: contain !important;
    }

    /* 3. Zorg dat de productinformatie (tekst/knop) rechts netjes aansluit */
    .single-product div.product .summary {
        width: calc(100% - 540px) !important; /* Trek hier de breedte (500px) + marge (40px) vanaf */
        float: right !important;
        clear: none !important;
    }
}

/* ==========================================================================
   AUTOMATISCHE OPTIMALISATIE VOOR MOBIEL (SMARTPHONE)
   ========================================================================== */
@media (max-width: 767px) {
    .single-product .woocommerce-product-gallery,
    .single-product div.product .summary {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
    .single-product .woocommerce-product-gallery__wrapper img {
        max-height: 400px !important; /* Maximale hoogte op mobiel zodat het scherm niet overstroomt */
        object-fit: contain !important;
    }
}

/* 1. Verberg de categorieknop/-dropdown in de zoekbalk permanent */
.header-search-form .search-categories,
.header-search-form .category-toggle,
.header-search-form .category-select-wrapper,
.header-search-form select,
.header-search-form [class*="cat"],
.header-search-form [id*="cat"] {
display: none !important;
width: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
margin: 0 !important;
padding: 0 !important;
} 

/* 2. Dwing het zoekveld om direct 100% van de beschikbare ruimte in te nemen */
.header-search-form input[type="search"],
.header-search-form .search-field {
width: 100% !important;
flex: 1 1 100% !important;
max-width: 100% !important;
} 

/* 3. Zorg dat de zoekbalkcontainer zelf als een volledig blok over de breedte getoond wordt */
.header-search-form {
display: flex !important;
width: 100% !important;
}