/* MPC v2.4 refined UI/UX */
:root{
 --mpc-card-radius:12px;
 --mpc-gap:24px; 
 --mpc-bg:#ffffff;
 --mpc-border:#eef2f6;
 --mpc-accent:#0b66c3; /* PRIMARY BLUE ACCENT COLOR (रंग फिक्स) */
 --mpc-accent-contrast:#ffffff;
 --mpc-muted:#666;
    /* New Share Design Variables (Optional but recommended for consistency) */
    --mpc-copy-bg:#f4f7f9;
    --mpc-copy-text:#0b66c3;
    --mpc-shadow-primary: rgba(11,22,50,0.3);
    /* New variable for rating color (Yellow/Gold) */
    --mpc-rating-color: #ffc107; 
    /* New variable for category badge color */
    --mpc-cat-bg: #f0f8ff; /* Light blue background for category */
    --mpc-cat-text: #0b66c3; /* Primary accent color for category text */
    /* NEW: Wishlist Fill Color */
    --mpc-heart-fill: #e91e63; /* Pink/Red for filled heart */
}

/* CAROUSEL CONTAINER STYLES */
.mpc-related-carousel-container {
    margin: 40px 0;
    padding: 0 15px; 
    position: relative;
}
.mpc-related-carousel-container h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

/* CAROUSEL SLICK OVERRIDE FOR GAP FIX */
.mpc-related-carousel-slider .slick-list {
    margin: 0 calc(-1 * var(--mpc-gap) / 2); 
}
.mpc-related-carousel-slider .mpc-carousel-slide {
    padding: 0 calc(var(--mpc-gap) / 2); 
    box-sizing: border-box; 
}

/* REMOVE DOTS: Remove margin added by slick-dotted class */
.mpc-related-carousel-slider.slick-dotted {
    margin-bottom: 0; 
}

/* --- CAROUSEL ARROW STYLES (Perfected Buttons) --- */
.mpc-related-carousel-slider .slick-arrow {
    background: var(--mpc-bg); /* White background */
    border: 1px solid var(--mpc-border);
    border-radius: 50%;
    width: 40px; /* Size increased for better tap target */
    height: 40px; /* Size increased for better tap target */
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    transition: all 0.2s;
    /* Positioning fix: Center arrows vertically relative to the slider height */
    top: 50%;
    transform: translateY(-50%);
}
.mpc-related-carousel-slider .slick-prev {
    left: -20px; /* Slider edge से थोड़ा बाहर */
}
.mpc-related-carousel-slider .slick-next {
    right: -20px; /* Slider edge से थोड़ा बाहर */
}
/* For smaller screens, position buttons closer to the content */
@media (max-width: 1200px) {
    .mpc-related-carousel-slider .slick-prev {
        left: -10px;
    }
    .mpc-related-carousel-slider .slick-next {
        right: -10px;
    }
}
.mpc-related-carousel-slider .slick-prev:before,
.mpc-related-carousel-slider .slick-next:before {
    font-family: 'slick';
    font-size: 18px; /* Arrow size increased */
    color: #333; /* Arrow color to Black */
    line-height: 1;
    opacity: 1; /* Ensure arrow is fully visible */
}
.mpc-related-carousel-slider .slick-arrow:hover {
    background: #f4f4f4; 
    border-color: #ccc;
}

/* REMOVE DOTS STYLES */
.slick-dots {
    display: none !important; 
}

/* The actual card is a flex item in the slide */
.mpc-card{position:relative;border:1px solid var(--mpc-border);border-radius:var(--mpc-card-radius);overflow:hidden;background:var(--mpc-bg);box-shadow:0 8px 30px rgba(11,22,50,0.04);display:flex;flex-direction:column;min-height:320px}

/* --- IMAGE STYLING --- */
.mpc-thumb{
    display:block;
    padding-top:56.25%; 
    position:relative;
    overflow:hidden;
    background:#fafafa;
    margin-bottom: 10px;
}
.mpc-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.mpc-no-image{height:120px;display:flex;align-items:center;justify-content:center;color:#bbb}

.mpc-heart-wrap{position:absolute;top:6px;right:6px;z-index:5}

.mpc-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}

.mpc-seller-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Product Title Style */
.mpc-title{font-size:16px;margin:0 0 4px 0;font-weight:600}

/* FIX: PRODUCT NAME COLOR TO BLACK */
/* Increased specificity and !important added to ensure black color is applied */
.mpc-related-carousel-container .mpc-card .mpc-title a {
    color: #333 !important; 
    text-decoration:none;
}

.mpc-meta{display:flex;justify-content:flex-start;align-items:center;margin-top:2px;gap: 12px;}

/* --- MOBILE VIEW OPTIMIZATION --- */
@media (max-width: 600px){
    /* Full Mobile Responsiveness */
    .mpc-related-carousel-container {
        padding: 0 5px; /* Mobile पर किनारों पर कम पैडिंग */
        margin: 20px 0;
    }
    
    /* Carousel Button/Arrow Fix on Mobile (hide or move if needed) */
    .mpc-related-carousel-slider.slick-slider .slick-arrow {
        display: none !important;
    }

    .mpc-thumb {margin-bottom: 8px;}
    .mpc-card {min-height: 250px;border-radius: 10px;} 
    .mpc-body {padding: 0 10px 10px;gap: 6px;}
    
    /* MOBILE TITLE SIZE FIX: Small and Perfect */
    .mpc-title {
        font-size: 14px; /* Title size smaller for mobile */
        margin-bottom: 2px;
    }
    .mpc-meta {
        gap: 6px;
        flex-wrap: wrap; /* Meta items wrap if space is tight */
    }
    .mpc-price {
        font-size: 15px;
    }
    .mpc-seller-info {gap: 6px; margin-bottom: 3px;}
    .mpc-avatar {width: 28px;height: 28px;}
    .mpc-seller-name {font-size: 12px;}
    .mpc-rating-sales {font-size: 13px;}
}

/* --- SKELETON LOADING EFFECT (Standard) --- */
.mpc-skeleton { cursor: default; pointer-events: none; opacity: 0.8; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border: 1px solid var(--mpc-border, #eef2f6); }
.mpc-skeleton-image, .mpc-skeleton-line { background: #f6f7f8; background: linear-gradient(to right, #f6f7f8 0%, #e8eaf1 20%, #f6f7f8 40%); background-size: 1000px 100%; animation: mpc-shimmer 1.5s infinite linear; border-radius: 4px; }
.mpc-skeleton-image { width: 100%; padding-top: 56.25%; margin-bottom: 12px; }
.mpc-skeleton-content { padding: 10px 10px 15px; background: var(--mpc-bg, #ffffff); }
.mpc-skeleton-line { height: 12px; margin-bottom: 8px; }
.mpc-seller-line { width: 60%; height: 16px; margin-bottom: 12px; }
.mpc-title-line-1 { width: 90%; height: 18px; }
.mpc-title-line-2 { width: 75%; height: 18px; }
.mpc-price-line { width: 40%; height: 14px; margin-top: 15px; }
.mpc-extra-line { width: 50%; height: 14px; margin-top: 15px; }
@keyframes mpc-shimmer {
    0% { background-position: -500px 0; }
    100% { background-position: 500px 0; }
}
/* END SKELETON LOADING EFFECT */