/**
 * Modern WooCommerce Shop Engine - Simoorgh Design System
 * Version: 17.2.0 - Square Product Images (1:1 Aspect Ratio) & Contain Fit
 */

#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: #71c1c6 !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, #71c1c6 0%, rgba(113, 193, 198, 0.3) 50%, rgba(255, 255, 255, 0) 100%) !important; }
.mc-line-left { background: linear-gradient(to left, #71c1c6 0%, rgba(113, 193, 198, 0.3) 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;
    width: 100% !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-tiffany { background-color: #71c1c6 !important; }
.mc-theme-blue { background-color: #273f7f !important; }

/* خط چین متضاد */
.mc-theme-tiffany::after { border: 2px dotted #273f7f !important; opacity: 0.3; }
.mc-theme-blue::after { border: 2px dotted #71c1c6 !important; opacity: 0.6; }

/* =========================================================
   🌟 عکس‌های مربعی محصولات (رفع مشکل کشیدگی)
   ========================================================= */
.mc-img-box {
    width: 100% !important; 
    aspect-ratio: 1 / 1 !important; /* 🌟 باکس کاملاً مربعی متناسب با عرض کارت */
    height: auto !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 12px !important; overflow: hidden !important; flex-shrink: 0 !important; 
    background: #ffffff !important;
    padding: 10px !important; /* ایجاد فضای تنفس برای محصولات */
    box-sizing: border-box !important;
}

.mc-img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain !important; /* 🌟 نمایش کامل عکس بدون برش و کشیدگی */
    mix-blend-mode: multiply !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; white-space: normal !important;
}

.mc-theme-tiffany .mc-card-title { color: #1e293b !important; }
.mc-theme-blue .mc-card-title { color: #71c1c6 !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; text-align: center !important;
}

.mc-price-wrapper {
    display: flex !important; width: 100% !important; justify-content: center !important; align-items: 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;
    position: relative !important; overflow: hidden !important;
}

.mc-theme-tiffany .mc-price-box { background-color: #ffffff !important; color: #273f7f !important; border: 2px solid #273f7f !important; }
.mc-theme-blue .mc-price-box { background-color: #71c1c6 !important; color: #1e293b !important; border: 2px solid #71c1c6 !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: #facc15 !important; color: #093a49 !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 #ca8a04, inset 0 2px 3px rgba(255, 255, 255, 0.3) !important;
    white-space: nowrap !important; margin: 0 auto !important; float: none !important; 
    position: relative !important; overflow: hidden !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: #eab308 !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 #ca8a04, inset 0 2px 3px rgba(255, 255, 255, 0.3) !important; }
.btn-emoji { font-size: 1.2em !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important; }

/* 🌟 افکت درخشش نوری خیره‌کننده (Sweep Hover) 🌟 */
.mc-btn::after, .mc-price-box::after {
    content: '' !important; position: absolute !important; top: 0 !important; left: -150% !important; width: 50% !important; height: 100% !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) !important;
    transform: skewX(-25deg) !important; transition: left 0.6s ease-in-out !important; z-index: 5 !important;
}

.mc-card:hover .mc-btn::after, .mc-card:hover .mc-price-box::after { left: 150% !important; }

/* =========================================================
   🌟 استایل‌های اختصاصی اسلایدر افقی (برای Home)
   ========================================================= */
.mc-slider-viewport {
    display: flex; overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; scrollbar-width: none; 
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory !important; padding: 0 0 20px 0 !important; 
    margin-top: -10px !important; width: 100%; cursor: grab; user-select: none;
}
.mc-slider-viewport::-webkit-scrollbar { display: none; }

.mc-slider-viewport .mc-grid {
    display: flex !important; padding: 10px 16px !important; width: max-content !important; margin: 0 !important; grid-template-columns: none !important; 
}

.mc-slider-viewport .mc-grid > div {
    flex: 0 0 auto !important; margin: 0; scroll-snap-align: start !important; scroll-snap-stop: always !important; 
    height: auto !important; display: flex !important;
}

@media (max-width: 767px) {
    .mc-slider-viewport .mc-grid > div { width: 85vw !important; max-width: 340px !important; }
    .mc-slider-viewport .mc-grid { gap: 16px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .mc-slider-viewport .mc-grid > div { width: calc((100vw - 70px) / 2) !important; max-width: 360px !important; }
    .mc-slider-viewport .mc-grid { gap: 20px !important; }
}
@media (min-width: 1024px) {
    .mc-slider-viewport .mc-grid > div { width: calc((100vw - 140px) / 4) !important; max-width: 290px !important; }
    .mc-slider-viewport .mc-grid { gap: 24px !important; }
}
@media (min-width: 1350px) {
    .mc-slider-viewport .mc-grid > div { width: 285px !important; max-width: none !important; }
}

.slider-side-btn {
    width: 46px; height: 46px; display: none; align-items: center; justify-content: center; border-radius: 50%; 
    background-color: rgba(15, 23, 42, 0.95) !important; border: 2px solid #71c1c6 !important; color: #71c1c6 !important; 
    cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); z-index: 50;
}
@media (min-width: 1024px) { .slider-side-btn { display: flex; } }
.slider-side-btn:hover { background: #71c1c6 !important; color: #0c1328 !important; transform: scale(1.1); }

/* =========================================================
   استایل دکمه‌های صفحه‌بندی
   ========================================================= */
.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: #71c1c6 !important; color: #1e293b !important; font-weight: 900 !important; border-radius: 12px !important; text-decoration: none !important; transition: all 0.15s ease !important; box-shadow: 0 4px 0 #4f969b !important; }
.mc-pagination-wrapper .page-numbers:hover { background-color: #5ab1b7 !important; transform: translateY(2px) !important; box-shadow: 0 2px 0 #4f969b !important; color: #0f172a !important; }
.mc-pagination-wrapper .current { background-color: #0f172a !important; color: #71c1c6 !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; }