/**
 * Modern WooCommerce Shop Engine - Simoorgh Design System
 * Version: 16.8.0 - Fully Synced with Unified Isolated Cards (No Overlap)
 */

#mc-wrapper { 
    padding: 3rem 1rem 6rem 1rem !important; 
    width: 100% !important; 
    box-sizing: border-box !important; 
    margin-top: 50px !important; 
    position: relative !important;
    z-index: 1 !important; 
}
@media (max-width: 950px) {
    #mc-wrapper { margin-top: -20px !important; }
}
@media (max-width: 480px) {
    #mc-wrapper { margin-top: 10px !important; }
}

.mc-container { 
    max-width: 1350px !important; 
    margin: 0 auto !important; 
    text-align: center !important; 
}

/* =========================================================
   استایل اختصاصی تیتر با خطوط درخشان متقارن
   ========================================================= */
.mc-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

.mc-title {
    font-size: clamp(22px, 4vw, 34px) !important;
    font-weight: 900 !important;
    color: #00818a !important; 
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.mc-line {
    height: 3px !important; 
    border-radius: 2px !important; 
    flex-grow: 1 !important; 
    min-width: 30px !important;
}

.mc-line-right { background: linear-gradient(to right, #00818a 0%, #00b4cc 50%, rgba(255, 255, 255, 0) 100%) !important; }
.mc-line-left { background: linear-gradient(to left, #00818a 0%, #00b4cc 50%, rgba(255, 255, 255, 0) 100%) !important; }

@media (max-width: 480px) {
    .mc-header { flex-direction: column !important; gap: 10px !important; margin-bottom: 30px !important; }
    .mc-title { white-space: normal !important; }
    .mc-line { width: 100% !important; flex-grow: 0 !important; }
}

/* =========================================================
   🌟 استایل کارت‌های محصولات (یکپارچه و ضد تداخل)
   ========================================================= */
.mc-grid { 
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important; 
    margin-top: 40px !important; 
    width: 100% !important;
}

.mc-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important; 
    text-decoration: none !important;
    border-radius: 16px !important;
    padding: 12px 12px 28px 12px !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border: none !important;
    position: relative !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s !important;
}

.mc-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px -15px rgba(0,0,0,0.3) !important;
}

/* کادر داخلی نقطه‌چینی */
.mc-card::after {
    content: ''; 
    position: absolute; 
    top: 6px; left: 6px; right: 6px; bottom: 6px; 
    border-radius: 12px; 
    pointer-events: none; 
    z-index: 10;
}

.mc-theme-yellow { background-color: #facc15 !important; }
.mc-theme-blue { background-color: #273f7f !important; }

.mc-theme-yellow::after { border: 2px dotted #093a49 !important; }
.mc-theme-blue::after { border: 2px dotted #facc15 !important; }

.mc-img-box {
    height: 220px !important; 
    width: 100% !important;
    display: block !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important; 
    background: #ffffff !important;
}

.mc-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}

.mc-card-title {
    margin-top: 15px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
    flex-shrink: 0 !important;
}

.mc-theme-yellow .mc-card-title { color: #093a49 !important; }
.mc-theme-blue .mc-card-title { color: #facc15 !important; }

/* =========================================================
   🌟 بخش پایینی کارت (قیمت و دکمه)
   ========================================================= */
.mc-card-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: auto !important; 
    padding-top: 10px !important;
    position: relative !important;
    z-index: 20 !important;
}

.mc-price-wrapper {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 5px !important;
    margin-bottom: 16px !important; 
    position: static !important; 
    transform: none !important;
    flex-shrink: 0 !important;
    float: none !important;
}

.mc-price-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 24px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    white-space: nowrap !important; 
    margin: 0 auto !important;
    float: none !important;
}

.mc-theme-yellow .mc-price-box {
    background-color: #ffffff !important;
    color: #093a49 !important;
    border: 2px solid #093a49 !important;
}

.mc-theme-blue .mc-price-box {
    background-color: #093a49 !important;
    color: #facc15 !important;
    border: 2px solid #facc15 !important;
}

.mc-btn-wrapper {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
    float: none !important;
}

/* 🌟 استایل دکمه خرید کارت 🌟 */
.mc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; 
    padding: 10px 30px !important; 
    background-color: #0db8a6 !important; 
    color: #ffffff !important; 
    font-size: 14px !important;
    font-weight: 900 !important;
    border-radius: 12px !important;
    text-decoration: none !important; 
    border: none !important;
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.25),        
        0 4px 0 #077369,                      
        inset 0 2px 3px rgba(255, 255, 255, 0.3), 
        inset 0 -2px 3px rgba(0, 0, 0, 0.2) !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
    float: none !important;
    position: static !important;
    transform: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.mc-card:hover .mc-btn,
.mc-btn:hover {
    background-color: #0ea394 !important; 
    color: #0f172a !important; 
}

.mc-btn:active {
    transform: translateY(3px) !important; 
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.25), 
        0 1px 0 #077369, 
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-emoji {
    font-size: 1.2em !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
}

/* =========================================================
   استایل دکمه‌های صفحه‌بندی
   ========================================================= */
.mc-pagination-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 40px !important;
    margin-bottom: 50px !important;
}
.mc-pagination-wrapper .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    background-color: #0db8a6 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 4px 0 #077369 !important;
}
.mc-pagination-wrapper .page-numbers:hover {
    background-color: #0ea394 !important;
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #077369 !important;
    color: #0f172a !important;
}
.mc-pagination-wrapper .current {
    background-color: #0f172a !important;
    color: #0db8a6 !important;
    box-shadow: 0 4px 0 #000 !important;
    cursor: default !important;
}
.mc-pagination-wrapper .current:hover {
    transform: translateY(0) !important;
    box-shadow: 0 4px 0 #000 !important;
}