/* ====================== ALGEMENE STYLING ====================== */
body {
    background: #F9F9F7;
    color: #000000;
    font-family: 'Lato', system-ui, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ====================== MAIN IMAGE CONTAINER ====================== */
.main-image-container {
    height: 460px;
    width: 100%;
    max-width: 460px;                  /* Vaste maximale breedte - voorkomt krimpen */
    background: #f8f9fa;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    position: relative;
    margin: 0 auto;                    /* Centreert de container */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.main-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;               /* Belangrijkste fix: foto past altijd netjes */
    object-position: center;
    display: block;
    border-radius: 8px;
}

/* ====================== THUMBNAILS ====================== */
.d-flex.gap-2 img {                    /* Target je thumbnails direct */
    height: 85px;
    width: 85px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.d-flex.gap-2 img:hover {
    border-color: #355c2f;
    transform: scale(1.05);
}

.d-flex.gap-2 img.active {
    border-color: #20381d;
    box-shadow: 0 0 0 3px rgba(32, 56, 29, 0.2);
}

/* ====================== PLACEHOLDER ====================== */
.product-placeholder {
    height: 400px;
    width: 100%;
    max-width: 460px;
    background: #f0f4ff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    margin: 0 auto;
}

/* ====================== OVERIGE ELEMENTEN ====================== */
.price-display { 
    font-size: 2.8rem; 
    font-weight: 700; 
    color: #20381d; 
}

.rating-stars { 
    font-size: 2.2rem; 
    letter-spacing: 4px; 
    color: #20381d; 
}

/* Variant Pills */
.variant-pill {
    background: #f0f4ff; 
    color: #20381d;
    border: 2px solid #D9D6D2; 
    border-radius: 50px;
    padding: 0.5rem 1.2rem; 
    font-weight: 600; 
    font-size: 0.9rem;
    cursor: pointer; 
    transition: all 0.2s; 
    white-space: nowrap;
}

.variant-pill:hover { 
    border-color: #20381d; 
    color: #20381d;
    background: #e8f0e6;
}

.variant-pill.active { 
    background: #20381d; 
    color: #dcb470; 
    border-color: #20381d; 
}

/* Knoppen */
.btn-cart,
.btn-primary {
    background: #20381d;
    color: #dcb470;
    border: none !important;
    padding: 0.95rem 1.8rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-family: 'Lato', sans-serif;
    transition: all 0.25s ease;
    margin-top: auto;
    font-size: 1.15rem;
}

.btn-cart:hover,
.btn-primary:hover {
    background: #355c2f;
    color: #ae966d;
    transform: translateY(-2px);
}

.btn-cart:disabled {
    background: #94a3b8; 
    color: #fff;
    cursor: not-allowed; 
}

.btn-cart.added { 
    background: #16a34a; 
}

/* Reviews */
.review-card {
    background: #fff; 
    border: 1px solid #e2e8f0;
    border-radius: 12px; 
    padding: 1.2rem; 
    margin-bottom: 1rem;
}

.review-stars { 
    color: #20381d; 
    font-size: 1.1rem; 
}

.review-author { 
    font-size: 0.82rem; 
    color: #94a3b8; 
}

.star-btn {
    background: none; 
    border: none; 
    font-size: 1.8rem;
    color: #d1d5db; 
    cursor: pointer; 
    padding: 0 2px;
}

.star-btn.selected, 
.star-btn:hover { 
    color: #20381d; 
}

/* Stock badges */
.stock-badge {
    display: inline-block; 
    padding: 0.25rem 0.75rem;
    border-radius: 50px; 
    font-size: 0.85rem; 
    font-weight: 600;
    margin-bottom: 4px;
}

.stock-in  { background: #dcfce7; color: #15803d; }
.stock-low { background: #fef3c7; color: #92400e; }
.stock-out { background: #fee2e2; color: #991b1b; }

/* Image Magnifier */
.img-magnifier-glass {
    position: absolute;
    border: 3px solid #20381d; 
    border-radius: 50%;
    width: 180px;
    height: 180px;
    background-repeat: no-repeat;
    background-size: 0 0;
    box-shadow: 0 4px 25px rgba(32, 56, 29, 0.25);
    pointer-events: none;
    display: none;
    z-index: 20;
}

/* ====================== RESPONSIVE ====================== */
@media (max-width: 768px) {
    .main-image-container {
        height: 340px;
        max-width: 100%;
        padding: 15px;
    }
    
    .product-placeholder {
        height: 300px;
    }
    
    .price-display {
        font-size: 2.2rem;
    }
}