/* MPC v2.4 refined UI/UX */
:root{
 --mpc-card-radius:12px;
 --mpc-gap:18px;
 --mpc-bg:#ffffff;
 --mpc-border:#eef2f6;
 --mpc-accent:#0b66c3;
 --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 */
}

/* grid - Mobile-first default 1 column (FOUC fix for fast mobile load). 
   JS will override this if data-attrs are present. */
.mpc-grid{
    display:grid;
    gap:var(--mpc-gap);
    grid-template-columns:repeat(1,1fr); /* Default 1 column on mobile */
    margin:28px 0;
    padding:0
}

/* Desktop default: 4 columns as requested, for screens wider than 1024px. */
@media (min-width: 1025px) {
    .mpc-grid {
        grid-template-columns:repeat(4,1fr);
    }
}


.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: Fiverr standard (16:9 Aspect Ratio - smaller height) --- */
.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-card .fw-heart-btn {
    position: absolute;
    top: 10px; 
    right: 10px; 
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    border: 0px ;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
    padding: 0;
    color: none; 
}

.mpc-card .fw-heart-btn:hover {
    background: none;
}

.mpc-card .fw-heart-btn .fw-heart-icon {
    color:#000000;
    
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.mpc-card .fw-heart-btn.active .fw-heart-icon {
    color: var(--mpc-heart-fill);
    text-shadow: none;
}

.mpc-card .fw-heart-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.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;
}

.mpc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--mpc-border);
    flex-shrink: 0;
}

.mpc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mpc-seller-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--mpc-muted);
    line-height: 1.2; 
}

.mpc-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mpc-title{font-size:16px;margin:0 0 4px 0;font-weight:600}
.mpc-title a{color:var(--mpc-accent);text-decoration:none}

.mpc-share-trigger {
    background: var(--mpc-bg); 
    border: 1px solid var(--mpc-border);
    cursor: pointer;
    width: 38px; 
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    margin-left: 10px;
    font-size: 18px; 
    color: var(--mpc-accent); 
}
.mpc-share-trigger:hover,
.mpc-share-trigger:active,
.mpc-share-trigger:focus {
    background: var(--mpc-bg); 
    border: 1px solid var(--mpc-border);
    color: var(--mpc-accent); 
    outline: none; 
}

.mpc-share-modal{
    display:none;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    z-index:9999;
    background:rgba(0,0,0,0.6); 
    transition: opacity 0.2s; 
    opacity: 0;
}
.mpc-share-modal[aria-hidden="false"]{
    display:flex;
    opacity: 1;
}
.mpc-share-inner{
    background:#fff;
    padding:30px; 
    border-radius:16px; 
    max-width:400px; 
    width:90%;
    box-shadow:0 20px 60px var(--mpc-shadow-primary); 
    position:relative;
    text-align:center;
}

.mpc-share-title{margin:0 0 5px 0;font-size:22px;font-weight:700;color:#333}
.mpc-share-subtitle{margin:0 0 25px 0;font-size:14px;color:#777}

.mpc-share-buttons-grid{display:grid;grid-template-columns: repeat(3, 1fr); gap: 15px;margin-bottom: 25px;}
.mpc-share-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px; border-radius:12px;font-weight:600;text-decoration:none;line-height:1.2;box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.share-icon{font-size: 20px; margin-bottom: 5px; color: #fff;line-height: 1;}
.share-text{font-size: 13px;color: #fff;}

.mpc-share-whatsapp{background:#25D366;}
.mpc-share-facebook{background:#1877F2;}
.mpc-share-x{background:#000; color: #fff;}

.mpc-copy-link-wrapper{display: flex;align-items: center;background: var(--mpc-copy-bg);border-radius: 8px;padding: 8px;justify-content: space-between;}
.mpc-share-copy{flex-grow: 1;background: none;border: none;text-align: left;color: var(--mpc-copy-text);font-weight: 600;cursor: pointer;padding: 8px 15px;font-size: 15px;}

.mpc-custom{background:none;border:none;padding:0;margin: -5px 0 0;font-size:14px;font-weight: 400;color: var(--mpc-muted);text-align:left;}

.mpc-meta{display:flex;justify-content:flex-start;align-items:center;margin-top:2px;gap: 12px;}
.mpc-price{font-weight:700;font-size: 16px;}
.mpc-cat{font-size:13px;color:var(--mpc-cat-text);background:var(--mpc-cat-bg); padding: 6px 12px; border-radius:10px;font-weight: 500;line-height: 1;}

.mpc-rating-sales {display: flex;align-items: center;gap: 2px; font-size: 14px; font-weight: 600;margin-left: auto;color: #333; }
.mpc-star {font-size: 14px; line-height: 1;color: var(--mpc-rating-color); }
.mpc-sales-count {color: var(--mpc-muted); font-weight: 400; margin-left: 2px;}

@media (max-width:600px){
    .mpc-thumb {margin-bottom: 8px;}
    .mpc-card {min-height: 250px;border-radius: 10px;} 
    .mpc-body {padding: 0 10px 10px;gap: 6px;}
    .mpc-title {font-size: 15px;}
    .mpc-meta {gap: 8px;}
    .mpc-seller-info {gap: 6px; margin-bottom: 3px;}
    .mpc-avatar {width: 28px;height: 28px;}
    .mpc-seller-name {font-size: 12px;}
    .mpc-share-trigger {width: 32px;height: 32px;font-size: 16px;margin-left: 5px;}
    .mpc-card .fw-heart-btn {width: 44px;height: 44px;top: 8px;right: 8px;}
    .mpc-card .fw-heart-btn .fw-heart-icon {font-size: 22px;}
    .mpc-share-buttons-grid{grid-template-columns: repeat(2, 1fr); }
}

.mpc-grid .mpc-card a { color: inherit; }

/* MPC Top Filter Bar - light style */
.mpc-top-filter-bar{width:100%;background:#ffffff;border:1px solid #e6e6e6;padding:12px 16px;box-shadow:0 1px 4px rgba(0,0,0,0.03);}
.mpc-filter-inner{max-width:1200px;margin:0 auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.mpc-filter-left{flex:1 1 220px;}
.mpc-filter-center{display:flex;gap:8px;flex:2 1 520px;align-items:center;flex-wrap:wrap;}
.mpc-filter-right{display:flex;gap:8px;}
#mpc-search-keyword{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;}
.mpc-category-select, #mpc-top-min-price, #mpc-top-max-price{padding:8px;border:1px solid #ddd;border-radius:6px;}
#mpc-top-apply, #mpc-top-reset{padding:8px 12px;border-radius:6px;cursor:pointer;}
@media (max-width:800px){
    .mpc-filter-inner{padding:6px;gap:6px;}
    .mpc-filter-center{flex-basis:100%;}
    .mpc-filter-left{flex-basis:100%;}
    .mpc-filter-right{flex-basis:100%;justify-content:flex-end;}
}
/* --- SKELETON LOADING EFFECT --- */
.mpc-skeleton {
    /* Style the card container when it is a skeleton */
    cursor: default;
    pointer-events: none;
    opacity: 0.8; /* Slightly faded look */
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* Match card shadow */
    border: 1px solid var(--mpc-border, #eef2f6); /* Optional: add border */
}

/* Base styles for placeholder elements */
.mpc-skeleton-image,
.mpc-skeleton-line {
    background: #f6f7f8; /* Light gray base */
    /* Shimmer gradient (lighter middle, darker sides) */
    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;
}

/* Image Placeholder */
.mpc-skeleton-image {
    width: 100%;
    /* 1:1 Aspect ratio for placeholder image (adjust if your images are different) */
    padding-top: 56.25%; /* Use 16:9 ratio like the actual thumb */
    margin-bottom: 12px;
}

/* Content Lines Wrapper */
.mpc-skeleton-content {
    /* Match inner card padding and background */
    padding: 10px 10px 15px; 
    background: var(--mpc-bg, #ffffff);
}

.mpc-skeleton-line {
    height: 12px;
    margin-bottom: 8px;
}

/* Specific Line Sizes to resemble content structure */
.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;
}

/* Shimmer Animation */
@keyframes mpc-shimmer {
    0% {
        background-position: -500px 0;
    }
    100% {
        background-position: 500px 0;
    }
}
/* END SKELETON LOADING EFFECT */










/* --- Variables required for button color (Must be included if not already defined) --- */
:root{
    --mpc-accent:#E3E3E2; /* The primary blue color for hover/click */
}

/* 1. Perfect Alignment for Load More button container (centered) */
.mpc-load-more-wrap {
    width: 100%;
    text-align: center; /* Centers the button horizontally */
    margin-top: 30px; 
    margin-bottom: 30px;
}

/* 2. Base Style for Load More button (#mpc-load-more-btn) */
#mpc-load-more-btn {
    /* Premium White Style */
    background-color: #ffffff;
    color: #333333; /* Dark text for high contrast */
    border: 1px solid #e0e0e0; /* Subtle light border for premium look */
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;

    /* No Shadow */
    box-shadow: none !important; 

    /* Premium Animation (Subtle transition) */
    transition: all 0.25s ease;
    
    /* Internal text is centered */
    text-align: center; 
    display: inline-block; 

    /* Specific sizing for Load More button */
    min-width: 220px; 
}

/* 3. Blue On Hover/Focus */
#mpc-load-more-btn:hover,
#mpc-load-more-btn:focus {
    background-color: var(--mpc-accent,#E3E3E2); /* Primary blue */
    color: #00000;
    border-color: var(--mpc-accent, #0b66c3);
    /* Subtle lifting animation */
    transform: translateY(-1px);
}

/* 4. Deeper Blue On Click (Active state) */
#mpc-load-more-btn:active {
    background-color: #E3E3E2; /* Slightly darker blue */
    border-color: #085da8;
    transform: translateY(0); /* Return to base position */
}

/* 5. Responsive adjustments for mobile */
@media (max-width: 600px) {
    #mpc-load-more-btn {
        width: 100%; 
        max-width: 300px; /* Constrain max width for better look */
        padding: 12px 15px;
        font-size: 13px;
    }
}