/**
 * Related Products - Isolated Grid System
 * WinkelvanHugo v2.0
 *
 * ROOT CAUSE DOCUMENTATION:
 * ========================
 * Het probleem was dat globale CSS selectors de related products grid braken:
 * 
 * 1. shop.css (regel 888-892):
 *    `ul.products, .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }`
 *    → Forceerde 3-kolom grid op ALLE .products lists
 * 
 * 2. product-cards.css (regel 20-30):
 *    `.products .product { display: flex; flex-direction: column; width: 100%; }`
 *    → Zette flex op alle product items, maar width werd overschreven door andere regels
 * 
 * 3. pdp.css (regel 1353-1362):
 *    `.pdp-related .products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }`
 *    → Probeerde te overschrijven met !important, maar specificity conflicts bleven
 * 
 * OPLOSSING:
 * - Volledig nieuwe BEM classes: .lbc-related, .lbc-related__grid, .lbc-related__item
 * - Geen hergebruik van .products of li.product classes
 * - Geen !important nodig door unieke selectors
 * - Template override in woocommerce/single-product/related.php
 *
 * BREAKPOINTS:
 * - Desktop (1200px+): 5 kolommen
 * - Desktop small (1024-1199px): 4 kolommen
 * - Tablet (768-1023px): 3 kolommen
 * - Mobile (480-767px): 2 kolommen
 * - Mobile small (<480px): 2 kolommen (smaller gap)
 */

/* ==========================================================================
   SECTION WRAPPER
   ========================================================================== */

.lbc-related {
    margin-top: var(--lbc-space-8, 32px);
    padding: var(--lbc-space-6, 24px);
    background: var(--lbc-white, #FFF);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   SECTION TITLE
   ========================================================================== */

.lbc-related__title {
    font-family: var(--lbc-font-heading, 'Bebas Neue', Impact, sans-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--lbc-black, #111);
    margin: 0 0 var(--lbc-space-5, 20px) 0;
    padding: 0;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   PRODUCT GRID - Stable, Isolated
   ========================================================================== */

.lbc-related__grid {
    /* Reset list styling */
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* Grid layout - Desktop default: 4 columns */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lbc-space-4, 16px);
    
    /* Ensure grid doesn't overflow */
    width: 100%;
    max-width: 100%;
}

/* Large Desktop: 5 columns */
@media (min-width: 1200px) {
    .lbc-related__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Desktop small: 4 columns (default, no change needed) */

/* Tablet: 3 columns */
@media (max-width: 1023px) {
    .lbc-related__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile: 2 columns */
@media (max-width: 767px) {
    .lbc-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--lbc-space-3, 12px);
    }
    
    .lbc-related {
        padding: var(--lbc-space-4, 16px);
        margin-top: var(--lbc-space-6, 24px);
    }
    
    .lbc-related__title {
        font-size: 1.25rem;
    }
}

/* Small Mobile: Still 2 columns, tighter gap */
@media (max-width: 420px) {
    .lbc-related__grid {
        gap: var(--lbc-space-2, 8px);
    }
}

/* ==========================================================================
   PRODUCT CARD ITEM
   ========================================================================== */

.lbc-related__item {
    /* Reset list item styling */
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* Card styling */
    background: var(--lbc-white, #FFF);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--lbc-gray-200, #E5E5E5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    
    /* CRITICAL: Prevent narrow/collapsed items */
    width: 100%;
    min-width: 0; /* Allow flex/grid shrinking but not below content */
    max-width: 100%;
}

.lbc-related__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--lbc-orange, #FF5A4D);
}

/* ==========================================================================
   PRODUCT LINK (full card clickable)
   ========================================================================== */

.lbc-related__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   PRODUCT IMAGE
   ========================================================================== */

.lbc-related__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--lbc-gray-100, #F5F5F5);
}

.lbc-related__image-wrap img,
img.lbc-related__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.lbc-related__item:hover .lbc-related__image-wrap img,
.lbc-related__item:hover img.lbc-related__image {
    transform: scale(1.05);
}

/* ==========================================================================
   PRODUCT BADGES
   ========================================================================== */

.lbc-related__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    z-index: 2;
}

.lbc-related__badge--sale {
    background: var(--lbc-orange, #FF5A4D);
    color: var(--lbc-white, #FFF);
}

.lbc-related__badge--soldout {
    background: var(--lbc-gray-700, #444);
    color: var(--lbc-white, #FFF);
}

/* ==========================================================================
   PRODUCT CONTENT (title + price)
   ========================================================================== */

.lbc-related__content {
    padding: var(--lbc-space-3, 12px);
}

/* Product name */
.lbc-related__name {
    font-family: var(--lbc-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lbc-black, #111);
    margin: 0 0 var(--lbc-space-2, 8px) 0;
    
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px; /* ~2 lines */
}

/* Product price */
.lbc-related__price {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--lbc-orange, #FF5A4D);
}

/* Sale price styling */
.lbc-related__price del {
    font-size: 12px;
    font-weight: 400;
    color: var(--lbc-gray-500, #777);
    margin-right: 6px;
}

.lbc-related__price ins {
    text-decoration: none;
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {
    .lbc-related__content {
        padding: var(--lbc-space-2, 8px);
    }
    
    .lbc-related__name {
        font-size: 12px;
        min-height: 31px;
    }
    
    .lbc-related__price {
        font-size: 14px;
    }
    
    .lbc-related__badge {
        font-size: 10px;
        padding: 3px 8px;
    }
}

@media (max-width: 420px) {
    .lbc-related__name {
        font-size: 11px;
        min-height: 28px;
    }
    
    .lbc-related__price {
        font-size: 13px;
    }
}

/* ==========================================================================
   NEUTRALIZE ANY INHERITED STYLES
   Only within .lbc-related scope - defensive CSS
   ========================================================================== */

.lbc-related ul,
.lbc-related li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Ensure images don't get weird styling */
.lbc-related img {
    max-width: 100%;
    height: auto;
}

/* Ensure links don't get underlines */
.lbc-related a {
    text-decoration: none;
}