/* ======================================================= */
/* GERELATEERDE PRODUCTEN (Matcht met Promotions.css)      */
/* ======================================================= */

/* 1. De Kaart (Container) */
.related.products li.product a {
    display: block;
    position: relative !important;
    
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
    text-decoration: none;
    border: none; 
}

/* 2. De Afbeelding */
.related.products li.product img {
    width: 100%;
    aspect-ratio: 1/1;       
    object-fit: cover;       
    object-position: center; 
    height: auto;            
    display: block; 
    margin: 0 !important;
    
    transition: transform 0.5s ease;
    border-radius: 0 !important; 
}

/* 3. De Titel (H2) */
.related.products li.product h2.woocommerce-loop-product__title {
    /* Positie */
    position: absolute;
    bottom: 0; 
    left: 0; 
    right: 0;
    
    /* Styling */
    background: rgba(255, 255, 255, 0.9); 
    
    /* DE FIX: Forceer de kleur met !important */
    color: #333 !important;
    
    padding: 12px 5px;
    
    /* Typografie */
    text-align: center;
    font-weight: 300;
    font-size: 14px !important;
    line-height: 1.3em;
    text-transform: none;
    
    margin: 0 !important;
    z-index: 2;
    border-top: none; 
}

/* EXTRA VEILIGHEID: Mocht er toch een link IN de titel zitten */
.related.products li.product h2.woocommerce-loop-product__title a {
    color: #333 !important;
}

/* 4. Verberg ongewenste elementen */
.related.products li.product .price,
.related.products li.product .star-rating,
.related.products li.product .et_overlay { 
    display: none !important; 
}

/* 5. Hover Effecten */
.related.products li.product:hover a {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 10;
}

.related.products li.product:hover img {
    transform: scale(1.03);
}