/* ==========================================================================
   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;
    }
}

/* ==========================================================================
   WINKELPAGINA & HOMEPAGE: RIGOREUZE BLOKKADE VAN HET OOGJE
   ========================================================================== */

/* 1. Verberg de volledige actie-overlay en alle Quick View elementen overal */
.home .product-action,
.home .quick-view-btn,
.home .yith-wcqv-button,
.post-type-archive-product .product-action,
.post-type-archive-product .quick-view-btn,
.product-thumbnail_wrapper .product-action,
[class*="quick-view"],
[class*="product-action"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Zorgt dat de muis de knop niet kan triggeren */
}

/* 2. Blokkeer specifiek de hover-laag die het thema over de afbeelding tekent */
.product-inner:hover .product-action,
.product-inner:hover .quick-view-btn,
.product-inner:hover div[class*="action"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. Voorkom dat de productafbeelding vervaagt of verspringt bij een hover */
.product-inner:hover .product-thumbnail_wrapper img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* ==========================================================================
   UNIVERSELE CSS-BLOKKADE VOOR HET OOGJE & SNEL BEKIJKEN
   ========================================================================== */

/* 1. Verberg ALLES binnen het productvak wat een link of knop is, BEHALVE de hoofdafbeelding en de titel */
.products .product-inner a.quickview,
.products .product-inner a.quick-view,
.products .product-inner .product-action,
.product-thumbnail_wrapper a:not(:first-child),
.product-thumbnail_wrapper div:not(:first-child) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Maakt het onaanraakbaar voor de muis */
}

/* 2. Harde uitschakeling voor elk element dat de tekst "Snel bekijken" bevat */
a[title*="Snel bekijken"], 
a[data-title*="Snel bekijken"],
button[title*="Snel bekijken"],
.quick-view-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. Zorg dat de afbeelding (zoals de Hansaplast) 100% stabiel blijft en niet verspringt of vervaagt */
.woocommerce ul.products li.product:hover .product-thumbnail_wrapper img,
.product-inner:hover .product-thumbnail_wrapper img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}