/* Modern Product Page Styles - Only affects product pages */
body.single-product .modern-product-page {
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 20px !important;
    font-family: 'IRANYekan', sans-serif;
}

/* Layout: full-width content with 40px side padding on desktop */
body.single-product .container {
    width: 100% !important;
    max-width: 100% !important;
}

body.single-product #primary.content-area,
body.single-product .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single-product .site-main,
body.single-product #main.site-main,
body.single-product main#main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* جلوگیری از override شدن بعد از لود - CRITICAL با specificity بسیار بالا */
/* برای دسکتاپ padding-top صفر است */
@media (min-width: 992px) {

    body.single-product #main.site-main,
    body.single-product #primary.content-area,
    body.single-product .site-main,
    body.single-product #primary,
    body.single-product section#primary,
    body.single-product main#main,
    body.single-product .content-area {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* حذف spacer برای صفحه محصول در دسکتاپ */
    body.single-product #mlm-header-spacer {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        display: none !important;
        visibility: hidden !important;
    }
}

/* Breadcrumb */
.modern-product-breadcrumb {
    margin-bottom: 8px !important;
    /* کاهش از 12px به 8px */
    margin-top: 0 !important;
    padding-top: 4px !important;
    /* فاصله خیلی کم بالا */
    font-size: 14px;
    color: #666;
}

.modern-product-breadcrumb a {
    color: #667eea;
    text-decoration: none;
}

.modern-product-breadcrumb a:hover {
    text-decoration: underline;
}

/* Product Title */
.modern-product-title {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Product Developer */
.modern-product-developer {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.modern-product-developer i {
    margin-left: 8px;
    color: #667eea;
}

.modern-product-content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    /* image a bit smaller than box */
    gap: 10px;
    /* فاصله دقیق بین عکس و باکس مستطیلی */
    align-items: stretch;
    /* هم‌ارتفاع شدن دو ستون */
    margin-bottom: 40px;
}

/* Product Gallery */
.modern-product-gallery {
    display: flex;
    flex-direction: column;
}

.modern-product-image-container {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    /* اطمینان از برش تصویر در صورت نیاز */
    position: relative;
    width: 100%;
}

.modern-product-image-container::before {
    content: '';
    display: block;
    padding-bottom: 73.684%;
    /* 280/380 * 100 = 73.684% - نسبت 380:280 */
}

.modern-product-image {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    object-fit: cover;
    object-position: top center;
    /* نمایش از بالا و وسط */
    border-radius: 10px;
    display: block;
}

/* Preview Buttons Row */
.modern-preview-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.modern-preview-btn,
.modern-gallery-btn {
    background: white;
    color: #666;
    border: 2px solid #e9ecef;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    min-width: 120px;
}

.modern-preview-btn:hover,
.modern-gallery-btn:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

/* Product Sidebar */
.modern-product-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Product Details Box */
.modern-product-details-box {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.modern-product-name {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: right;
}

.modern-divider {
    height: 1px;
    background: #e9ecef;
    margin: 20px 0;
}

.modern-top-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modern-seller-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modern-seller-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e9ecef;
}

.modern-seller-name {
    color: #4a5568;
    /* خاکستری تیره */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

.modern-seller-name:hover {
    color: #2d3748;
    /* خاکستری تیره‌تر */
    text-decoration: none;
    /* بدون خط زیر */
}

.modern-details-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.modern-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

.modern-detail-item i {
    font-size: 12px;
    flex-shrink: 0;
}

/* Feather Icons در بخش ویژگی‌های کلیدی */
.modern-detail-item .modern-detail-feather-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--mlm-product-accent, #F97316);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}


.modern-cart-btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: none !important;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

.modern-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
    color: white;
    text-decoration: none;
    border: none !important;
}

/* Original theme button states */
.modern-cart-btn.disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

.modern-cart-btn.mlm-login-error {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border: none !important;
}

.modern-cart-btn:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

.modern-preview-btn,
.modern-gallery-btn {
    background: white;
    color: #666;
    border: 2px solid #e9ecef;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modern-preview-btn:hover,
.modern-gallery-btn:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

/* Product Medals (row, next to seller) */
.modern-product-medals {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Reset circle styles when .modern-medal-item is a <ul> element */
ul.modern-medal-item,
.modern-product-medals ul.modern-medal-item {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    cursor: default !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: inherit !important;
    font-size: inherit !important;
    transition: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modern-medal-item {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, .3);
    transition: transform .2s ease, box-shadow .2s ease;
    margin: 0;
    cursor: pointer;
    border: 2px solid #fff;
}


/* Reset hover for <ul> elements */
ul.modern-medal-item:hover,
.modern-product-medals ul.modern-medal-item:hover {
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}

.modern-medal-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    z-index: 10;
}

.modern-medal-item:last-child {
    margin-bottom: 0;
}

/* Rating Section */
.modern-rating-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modern-star-rating {
    display: flex;
    align-items: center;
}

.modern-sales-price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.modern-sales-count {
    font-size: 12px;
    color: #666;
}

.modern-price-value {
    font-size: 18px;
    font-weight: 700;
    color: #e74c3c;
}

/* Action Buttons Row */
.modern-action-buttons-row {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
}

.modern-action-buttons-row .modern-cart-btn,
.modern-action-buttons-row .modern-preview-btn,
.modern-action-buttons-row .modern-gallery-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 15px;
    font-size: 14px;
}

.modern-action-buttons-row a.modern-preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


/* Product Details Tabs */
.modern-product-details {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.modern-tabs-nav {
    display: flex;
    gap: 16px;
    margin: 0;
    /* دیگر فاصله زیرِ نوار نداریم */
    border: 0;
    /* خط زیر را خودِ .modern-tabs-bar می‌کشد */
}

/* دکمه‌های تب: بدون پس‌زمینه؛ فقط خط زیر */
.modern-tab-btn {
    background: transparent !important;
    border: 0;
    padding: 14px 10px;
    font-size: 16px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    border-radius: 0;
    /* گردی برداشته شد */
    transition: color .2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* خط نارنجی زیر تب (غیرفعال: مخفی) */
.modern-tab-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    /* دقیقاً روی خط خاکستری می‌نشیند */
    height: 3px;
    background: #ff9800;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
    border-radius: 2px;
}

/* هاور: فقط رنگ متن تیره‌تر شود؛ بدون پس‌زمینه */
.modern-tab-btn:hover {
    color: #111827;
}

/* فعال: متن پررنگ‌تر و خط نارنجی نمایان */
.modern-tab-btn.active {
    color: #111827;
}

.modern-tab-btn.active::after {
    transform: scaleX(1);
}

.modern-tab-content {
    display: none;
    line-height: 1.8;
    color: #555;
    font-size: 16px;
}

.modern-tab-content.active {
    display: block;
}

/* Gallery Modal */
.modern-gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modern-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.modern-gallery-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.modern-gallery-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    z-index: 10001;
}

.modern-gallery-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.modern-gallery-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.modern-gallery-slide:first-child {
    display: block;
}

.modern-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.modern-gallery-prev,
.modern-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    z-index: 10001;
}

.modern-gallery-prev {
    left: -70px;
}

.modern-gallery-next {
    right: -70px;
}

.modern-gallery-prev:hover,
.modern-gallery-next:hover,
.modern-gallery-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Related Products */
.modern-related-products {
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 30px;
}

.modern-related-title {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
}

.modern-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Style for related product items */
.modern-related-products .mlm-product {
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.modern-related-products .mlm-product:hover {
    transform: translateY(-5px);
    color: inherit;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.modern-related-products .mlm-product .item-header {
    height: 150px;
    border-radius: 15px 15px 0 0;
}

.modern-related-products .mlm-product .item-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* نمایش از بالا - پایین برش می‌خورد */
    border-radius: 15px 15px 0 0;
}

.modern-related-products .mlm-product .item-title {
    padding: 15px;
    background: white;
}

.modern-related-products .mlm-product .item-title h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.modern-related-products .mlm-product .item-title a {
    color: #2c3e50;
    text-decoration: none;
}

.modern-related-products .mlm-product .item-title a:hover {
    color: #667eea;
}

.modern-related-products .mlm-product .item-footer {
    padding: 15px;
    background: white;
    border-radius: 0 0 15px 15px;
}

.modern-related-products .mlm-product .item-meta {
    font-size: 12px;
    margin: 2px;
}

.modern-related-products .mlm-product .item-purchase {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
}

.modern-related-products .mlm-product .item-purchase:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    color: white;
}

/* Widget Area */
.modern-product-widgets {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}

.modern-product-widgets .widget {
    margin-bottom: 30px;
}

.modern-product-widgets .widget:last-child {
    margin-bottom: 0;
}

.modern-product-widgets .widget-title {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Responsive Design */
@media (max-width: 768px) {

    body.single-product #main.site-main,
    body.single-product #primary.content-area,
    body.single-product .site-main,
    body.single-product #primary,
    body.single-product section#primary,
    body.single-product main#main {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    body.single-product .modern-product-page {
        padding-top: 12px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-bottom: 15px !important;
    }

    .modern-product-breadcrumb {
        padding-top: 2px !important;
        /* فاصله خیلی کم در موبایل */
        margin-bottom: 6px !important;
        margin-top: 0 !important;
    }

    .modern-product-title {
        font-size: 24px;
    }

    .modern-product-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .modern-product-image-container::before {
        padding-bottom: 73.684%;
        /* نسبت ثابت حفظ می‌شود */
    }

    .modern-product-image {
        object-position: top center;
        /* نمایش از بالا و وسط */
    }

    .modern-preview-buttons {
        flex-direction: column;
    }

    .modern-preview-btn,
    .modern-gallery-btn {
        min-width: auto;
    }

    .modern-top-section {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .modern-rating-section {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .modern-action-buttons-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .modern-action-buttons-row>* {
        width: 100%;
    }

    .modern-tabs-nav {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
        /* جلوی شکستن را بگیر */
        overflow-x: auto;
        /* اسکرول افقی */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* اسکرول نرم iOS */
        touch-action: pan-x;
        /* درگ افقی در اولویت */
        overscroll-behavior-x: contain;
        min-width: 0;
        /* اجازه جمع شدن ظرف */
        scrollbar-width: thin;
        /* فایرفاکس: اسکرول‌بار نازک و قابل‌دیدن */
        scrollbar-color: #cbd5e1 #f1f3f7;
        /* thumb / track */
    }

    /* دکمه‌ها فشرده و بدون شکستن خط */
    .modern-tab-btn {
        flex: 0 0 auto;
        /* اندازه ثابت؛ نکش */
        min-width: auto;
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 13px;
        line-height: 1.2;
    }

    .modern-gallery-prev {
        left: 10px;
    }

    .modern-gallery-next {
        right: 10px;
    }

    .modern-gallery-close {
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .modern-product-title {
        font-size: 20px;
    }

    .modern-product-image-container::before {
        padding-bottom: 73.684%;
        /* نسبت ثابت حفظ می‌شود */
    }

    .modern-product-image {
        object-position: top center;
        /* نمایش از بالا و وسط */
    }

    .modern-price-value {
        font-size: 24px;
    }

    .modern-circular-cart-btn {
        width: 70px;
        height: 70px;
        font-size: 20px;
    }

    .modern-medal-item {
        width: 22px;
        height: 22px;
        font-size: 10px;
        margin-bottom: -6px;
    }
}

/* ====== Summary Grid (features + price meta) ====== */
.modern-product-details-box .modern-summary-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 992px) {
    .modern-product-details-box .modern-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Features panel */
.modern-features-panel {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 16px 18px;
}

.modern-features-head {
    font-weight: 700;
    color: #2c3e50;
    font-size: 16px;
    margin-bottom: 12px;
}

/* Price + Sales + Rating block */
.modern-price-meta {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modern-price-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff7ee;
    border: 1px solid #ffe3c7;
    border-radius: 14px;
    padding: 12px 16px;
}

.modern-price-wrap .new-price {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    line-height: 1;
}

.modern-price-wrap .old-price {
    text-decoration: line-through;
    font-size: 14px;
    color: #b5b5b5;
}

.modern-price-wrap .currency-label {
    font-size: 12px;
    color: #888;
}

.discount-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #ffb74d;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(255, 183, 77, .35);
}

/* Stats (sales + rating) */
.modern-meta-stats {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-item.sales .stat-value {
    font-weight: 700;
}

.stat-item .rating-text {
    font-size: 13px;
    color: #666;
}

/* Fix RTL order: put features on the LEFT */
.modern-product-details-box .modern-summary-grid {
    direction: ltr;
}

.modern-summary-grid>.modern-features-panel,
.modern-summary-grid>.modern-price-meta {
    direction: rtl;
}

/* Middle features column */
.modern-features-column {
    align-self: start;
}

.modern-features-panel {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.modern-features-head {
    font-weight: 800;
    font-size: 17px;
    color: #1f2937;
    margin-bottom: 12px;
}

/* Countdown (sale) */
.deal-countdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff7e6;
    border: 1px solid #ffe4bf;
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 6px;
}

.deal-countdown .dc-label {
    font-weight: 700;
    color: #ff9800;
    font-size: 13px;
}

.deal-countdown .dc-time b {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: #374151;
}

.deal-countdown.expired {
    opacity: .6;
}

/* ستون‌ها هم‌ارتفاع شوند */
.modern-product-gallery {
    display: flex;
    flex-direction: column;
}

.modern-product-image-container {
    flex: 1 1 auto;
}

.modern-product-details-box {
    height: 100%;
}

/* شمارش‌معکوس بالای عکس */
.deal-countdown--over-gallery {
    align-self: flex-start;
    margin-bottom: 8px;
}

/* باکس مستطیلی: تقسیم 34% | 1px | 66% */
.modern-rect-split {
    display: grid;
    grid-template-columns: 34% 1px 66%;
    height: 100%;
}

.split-left-features {
    padding: 14px 16px;
}

.split-vline {
    background: #e9edf3;
}

.split-right-info {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ردیف افقی (ستاره | فروش | قیمت) */
.meta-three-cols {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin: 12px 0 16px;
}

.meta-three-cols .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-three-cols .meta-item.price .new-price {
    font-weight: 800;
    font-size: 20px;
}

/* دکمه‌ها کنار هم */
.modern-action-buttons-row {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

/* واکنش‌گرا */
@media (max-width: 992px) {
    .modern-product-content {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .modern-rect-split {
        grid-template-columns: 1fr;
    }

    .split-vline {
        display: none;
    }
}

/* دکمه‌ها کفِ باکس */
.modern-action-buttons-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    /* این خط دکمه‌ها را به پایین می‌چسباند */
}

/* ===== Price card (like sample screenshot) ===== */
.meta-three-cols .meta-item.price {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.price-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    background: #fff3e6;
    /* کرم روشن */
    border: 1px solid #ffe0c2;
    /* حاشیه خیلی ملایم */
    border-radius: 14px 0 0 14px;
    padding: 12px 16px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(255, 153, 0, .12);
}

.price-card .old-price {
    text-decoration: line-through;
    color: #b6b6b6;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.price-card .new-price {
    font-weight: 800;
    font-size: 28px;
    /* بزرگ و خوانا */
    color: #2d2d2d;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* اعداد هم‌عرض */
    letter-spacing: .5px;
    /* کمی فاصله بین ارقام شبیه نمونه */
}

/* برچسب درصد تخفیف که روی گوشه باکس می‌نشیند */
/* ===== Price card (exact like sample) ===== */
.meta-three-cols .meta-item.price {
    display: flex;
    justify-content: flex-start;
    /* باکس سمت چپ ستون قرار بگیره */
}

.price-card {
    position: relative;
    display: inline-grid;
    grid-template-rows: auto auto auto;
    /* old, new, currency */
    row-gap: 6px;
    background: #fff7ee;
    /* کرم روشن */
    border: 1px solid #ffe3c7;
    border-radius: 16px;
    padding: 12px 16px 14px;
    min-width: 190px;
    box-shadow: 0 10px 24px rgba(255, 153, 0, .10);
    text-align: left;
    /* همه چیز چپ‌چین */
    direction: ltr;
    /* اعداد هم‌راستای چپ */
}

.price-card * {
    direction: ltr;
}

/* اطمینان از جهت اعداد */

.price-card .old-price {
    text-decoration: line-through;
    color: #ba9f8b;
    font-size: 13px;
    line-height: 1;
    margin-bottom: 2px;
}

.price-card .new-price {
    font-weight: 800;
    font-size: 28px;
    color: #2d2d2d;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
}

.price-card .price-currency {
    margin-top: 2px;
    font-size: 12px;
    color: #b3b3b3;
    line-height: 1;
}

/* برچسب درصد: وسطِ لبه راست و نیمه‌اش بیرون از باکس */
.price-card .discount-badge {
    position: absolute;
    top: 50%;
    right: -12px;
    /* بیرون بزنـد */
    left: auto;
    /* مطمئن شو کش نمیاد */
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 8px;
    background: #ffa73a;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(255, 167, 58, .35);
}

/* هاله‌ی نارنجی زیر باکس برای چسبندگی به بدنه */
.price-card::after {
    content: "";
    position: absolute;
    inset: 6px 0 -6px 0;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, rgba(255, 167, 58, .08), rgba(255, 167, 58, 0));
    pointer-events: none;
}

/* اگر راست‌به‌چپ هستی ولی می‌خوای چپ‌چین بمونه */
[dir="rtl"] .price-card {
    text-align: left;
}

/* چسباندن باکس قیمت به خط عمودی ستون چپ و یکپارچه‌کردن خط */
.meta-three-cols .meta-item.price .price-card {
    margin-left: 0;
    border-left-color: transparent;
}

@media (min-width: 993px) {
    .meta-three-cols .meta-item.price .price-card {
        margin-left: -40px;
    }
}

/* ===== Deal banner over right box ===== */
.deal-banner {
    background: #fff7ee;
    border: 1px solid #ffe3c7;
    border-radius: 12px;
    padding: 10px 12px 12px;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(255, 153, 0, .08);
}

.deal-banner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.deal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff9800;
    font-weight: 800;
    font-size: 14px;
}

.deal-time b {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #374151;
    font-size: 14px;
}

/* Draining progress line (خالی‌شونده) */
.deal-progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, #ffb157, #ffa33f 55%, #ff8f2e);
}

.deal-progress-empty {
    position: absolute;
    inset: 0 auto 0 0;
    /* از چپ بزرگ می‌شود */
    width: 0%;
    background: #fff;
    opacity: .8;
}

.deal-banner.expired .deal-progress-empty {
    width: 100%;
}

/* === Successful Sales (wreath style) === */
.meta-three-cols .meta-item.sales.sales-wreath {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 96px;
    /* عرض معقول برای جاگیری عدد و متن */
    padding: 10px 6px;
    text-align: center;
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-num {
    font-weight: 800;
    font-size: 28px;
    /* عدد بزرگ مثل نمونه */
    line-height: 1;
    color: #2c3e50;
    font-variant-numeric: tabular-nums;
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-caption {
    font-size: 12px;
    /* متن کوچک پایین */
    color: #6b7280;
    line-height: 1.2;
}

@media (min-width: 993px) and (max-width: 1285px) {
    .meta-three-cols .meta-item.price .price-card .discount-badge {
        height: 22px;
        min-height: 22px;
        padding: 0 4px;
        font-size: 9px;
        border-radius: 7px;
        line-height: 22px;
        right: -4px;
    }
}

@media (min-width: 993px) and (max-width: 1100px) {
    .meta-three-cols .meta-item.price .price-card {
        margin-left: 60px;
    }

    .meta-three-cols .meta-item.price .price-card .discount-badge {
        right: 46px;
    }
}

@media (min-width: 1101px) and (max-width: 1200px) {
    .meta-three-cols .meta-item.price .price-card {
        margin-left: 60px;
    }
}

@media (min-width: 1201px) and (max-width: 1260px) {
    .meta-three-cols .meta-item.price .price-card {
        margin-left: 57px;
    }
}

/* Responsive: کوچک کردن همه اجزا به نسبت - CRITICAL */
@media (max-width: 992px) {
    .meta-three-cols {
        gap: 12px !important;
        margin: 10px 0 12px !important;
        flex-wrap: wrap !important;
        /* اجازه wrap شدن */
    }

    .meta-three-cols .meta-item {
        gap: 6px !important;
        flex: 0 1 auto !important;
        /* اجازه کوچیک شدن */
    }

    /* Price card - تبلت */
    .meta-three-cols .meta-item.price .price-card,
    .price-card {
        padding: 10px 12px !important;
        width: auto !important;
        max-width: 160px !important;
        min-width: 140px !important;
        /* کمتر از 190px */
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .meta-three-cols .meta-item.price .price-card .old-price,
    .price-card .old-price {
        font-size: 11px !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .new-price,
    .price-card .new-price {
        font-size: 22px !important;
        /* کمتر از 28px */
        letter-spacing: .3px !important;
        line-height: 1.1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .price-currency,
    .price-card .price-currency {
        font-size: 10px !important;
        margin-top: 1px !important;
    }

    .meta-three-cols .meta-item.price .price-card .discount-badge,
    .price-card .discount-badge {
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 5px !important;
        font-size: 9px !important;
        right: -8px !important;
        border-radius: 7px !important;
        line-height: 22px !important;
    }

    .meta-three-cols .meta-item.price .price-card {
        margin-left: 0 !important;
    }

    /* Sales wreath - تبلت */
    .meta-three-cols .meta-item.sales.sales-wreath {
        width: auto !important;
        max-width: 80px !important;
        min-width: 70px !important;
        padding: 8px 4px !important;
        gap: 4px !important;
        flex: 0 1 auto !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-num {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-caption {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .meta-three-cols .meta-item.price {
        position: relative;
        left: calc(-310px + 1 * (806px - 100vw));
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .meta-three-cols .meta-item.price {
        position: relative;
        left: calc(-370px + 1 * (768px - 100vw));
    }

    .meta-three-cols {
        gap: 10px !important;
        margin: 8px 0 10px !important;
        flex-wrap: wrap !important;
    }

    .meta-three-cols .meta-item {
        gap: 5px !important;
        flex: 0 1 auto !important;
    }

    /* Price card - تبلت کوچک */
    .meta-three-cols .meta-item.price .price-card,
    .price-card {
        padding: 8px 10px !important;
        width: auto !important;
        max-width: 140px !important;
        min-width: 120px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .meta-three-cols .meta-item.price .price-card .old-price,
    .price-card .old-price {
        font-size: 9px !important;
        margin-bottom: 1px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .new-price,
    .price-card .new-price {
        font-size: 18px !important;
        letter-spacing: .2px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .price-currency,
    .price-card .price-currency {
        font-size: 8px !important;
        margin-top: 1px !important;
    }

    .meta-three-cols .meta-item.price .price-card .discount-badge,
    .price-card .discount-badge {
        height: 18px !important;
        min-height: 18px !important;
        padding: 0 4px !important;
        font-size: 8px !important;
        right: -6px !important;
        border-radius: 5px !important;
        line-height: 18px !important;
    }

    .meta-three-cols .meta-item.price .price-card {
        margin-left: 0 !important;
    }

    /* Sales wreath - تبلت کوچک */
    .meta-three-cols .meta-item.sales.sales-wreath {
        width: auto !important;
        max-width: 70px !important;
        min-width: 60px !important;
        padding: 6px 3px !important;
        gap: 3px !important;
        flex: 0 1 auto !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-num {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-caption {
        font-size: 9px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 480px) {
    .meta-three-cols .meta-item.price {
        position: relative;
        left: calc(-290px + 1 * (480px - 100vw));
    }

    .meta-three-cols {
        gap: 8px !important;
        margin: 6px 0 8px !important;
        flex-wrap: wrap !important;
    }

    .meta-three-cols .meta-item {
        gap: 4px !important;
        flex: 0 1 auto !important;
    }

    /* Price card - موبایل */
    .meta-three-cols .meta-item.price .price-card,
    .price-card {
        padding: 6px 8px !important;
        width: auto !important;
        max-width: 120px !important;
        min-width: 100px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .meta-three-cols .meta-item.price .price-card .old-price,
    .price-card .old-price {
        font-size: 8px !important;
        margin-bottom: 1px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .new-price,
    .price-card .new-price {
        font-size: 16px !important;
        letter-spacing: .1px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .price-currency,
    .price-card .price-currency {
        font-size: 7px !important;
        margin-top: 1px !important;
    }

    .meta-three-cols .meta-item.price .price-card .discount-badge,
    .price-card .discount-badge {
        height: 16px !important;
        min-height: 16px !important;
        padding: 0 3px !important;
        font-size: 7px !important;
        right: -5px !important;
        border-radius: 4px !important;
        line-height: 16px !important;
    }

    .meta-three-cols .meta-item.price .price-card {
        margin-left: 0 !important;
    }

    /* Sales wreath - موبایل */
    .meta-three-cols .meta-item.sales.sales-wreath {
        width: auto !important;
        max-width: 60px !important;
        min-width: 50px !important;
        padding: 5px 2px !important;
        gap: 2px !important;
        flex: 0 1 auto !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-num {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-caption {
        font-size: 8px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 400px) {
    .meta-three-cols {
        gap: 6px !important;
        margin: 5px 0 6px !important;
        flex-wrap: wrap !important;
    }

    .meta-three-cols .meta-item {
        gap: 3px !important;
        flex: 0 1 auto !important;
    }

    /* Price card - موبایل کوچک */
    .meta-three-cols .meta-item.price .price-card,
    .price-card {
        padding: 5px 7px !important;
        width: auto !important;
        max-width: 110px !important;
        min-width: 90px !important;
        border-radius: 7px !important;
        box-sizing: border-box !important;
    }

    .meta-three-cols .meta-item.price .price-card .old-price,
    .price-card .old-price {
        font-size: 7px !important;
        margin-bottom: 1px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .new-price,
    .price-card .new-price {
        font-size: 14px !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.price .price-card .price-currency,
    .price-card .price-currency {
        font-size: 6px !important;
        margin-top: 1px !important;
    }

    .meta-three-cols .meta-item.price .price-card .discount-badge,
    .price-card .discount-badge {
        height: 14px !important;
        min-height: 14px !important;
        padding: 0 2px !important;
        font-size: 6px !important;
        right: -4px !important;
        border-radius: 3px !important;
        line-height: 14px !important;
    }

    .meta-three-cols .meta-item.price .price-card {
        margin-left: 0 !important;
    }

    /* Sales wreath - موبایل کوچک */
    .meta-three-cols .meta-item.sales.sales-wreath {
        width: auto !important;
        max-width: 55px !important;
        min-width: 45px !important;
        padding: 4px 2px !important;
        gap: 2px !important;
        flex: 0 1 auto !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-num {
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .meta-three-cols .meta-item.sales.sales-wreath .sales-caption {
        font-size: 7px !important;
        line-height: 1 !important;
    }
}

@media (min-width: 240px) and (max-width: 400px) {
    .meta-three-cols .meta-item.price {
        position: relative;
        left: calc(-220px + 1 * (400px - 100vw));
    }

    .meta-three-cols .meta-item.rating {
        position: relative;
        left: calc(-80px + 1 * (400px - 100vw));
    }

    .meta-three-cols .meta-item.sales.sales-wreath {
        position: relative;
        left: calc(-150px + 1 * (400px - 100vw));
    }
}

@media (min-width: 356px) and (max-width: 400px) {
    .meta-three-cols {
        flex-wrap: nowrap !important;
    }

    .meta-three-cols .meta-item {
        flex: 0 1 auto !important;
    }

    .meta-three-cols .meta-item.rating,
    .meta-three-cols .meta-item.sales.sales-wreath {
        position: relative;
        left: 0 !important;
    }

    .meta-three-cols .meta-item.price {
        position: relative;
        left: calc(-80px + 1 * (400px - 100vw));
    }
}

@media (min-width: 401px) and (max-width: 480px) {
    .meta-three-cols .meta-item.price {
        position: relative;
        left: calc(-130px + 1 * (480px - 100vw));
    }
}

/* --- Sales wreath background as <img> --- */
.meta-three-cols .meta-item.sales.sales-wreath {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-num,
.meta-three-cols .meta-item.sales.sales-wreath .sales-caption {
    position: relative;
    z-index: 1;
    /* متن و عدد روی تصویر بمانند */
}

.meta-three-cols .meta-item.sales.sales-wreath .sales-wreath-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* کل ظرف را بدون کشیدگی پر کند */
    /* opacity: 1;  عمداً حذف شد چون گفتی خود SVG کم‌رنگ است */
    pointer-events: none;
    z-index: 0;
    /* پشت متن/عدد */
}

/* === Medal stack: each medal in its own circle, overlapped neatly === */
.modern-product-medals,
.modern-medal-stack {
    display: flex;
    align-items: center;
    gap: 0;
    /* فاصله صفر؛ روی‌هم می‌افتند */
}

.modern-product-medals .modern-medal-item,
.modern-medal-stack .modern-medal-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f7e8, #fff);
    /* پس‌زمینه لطیف؛ می‌تونی عوض کنی */
    border: 2px solid #fff;
    /* رینگ سفید بین دایره‌ها */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    margin-inline-start: -10px;
    /* نیمه‌روی‌هم */
    position: relative;
    z-index: 1;
    /* هر کدوم روی قبلی */
    color: #3b3b3b;
    font-size: 16px;
    /* اگر آیکون فونتیه */
}

/* اولین مدال فاصله منفی نداشته باشد */
.modern-product-medals .modern-medal-item:first-child,
.modern-medal-stack .modern-medal-item:first-child {
    margin-inline-start: 0;
}

/* هاور: بالا بیاد و سایه پررنگ‌تر شود */
.modern-product-medals .modern-medal-item:hover,
.modern-medal-stack .modern-medal-item:hover {
    z-index: 10;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* اگر خروجی مدال‌ها <img> یا <svg> هست، اندازه و چینش داخل دایره */
.modern-product-medals .modern-medal-item img,
.modern-medal-stack .modern-medal-item img,
.modern-product-medals .modern-medal-item svg,
.modern-medal-stack .modern-medal-item svg {
    width: 18px;
    height: 18px;
    display: block;
}

.modern-product-medals,
.modern-medal-stack {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* --- Medals: reset <ul>/<li> and circle items overlapped --- */

/* 1) حذف بولت‌ها و چینش افقی UL */
.mlm-product-medals-widget ul,
.modern-product-medals ul,
.modern-medal-stack ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

/* 2) صفر کردن مارجین پیش‌فرض LI */
.mlm-product-medals-widget li {
    margin: 0;
    padding: 0;
}

/* 3) خود مدال: دایره، رینگ سفید، نیمه‌روی‌هم */
.mlm-product-medals-widget li.modern-medal-item,
.modern-product-medals .modern-medal-item,
.modern-medal-stack .modern-medal-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f7e8, #fff);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: -10px;
    /* نیمه‌روی‌هم */
    position: relative;
    z-index: 1;
}

/* اولین مدال فاصله منفی نداشته باشد */
.mlm-product-medals-widget li.modern-medal-item:first-child,
.modern-product-medals .modern-medal-item:first-child,
.modern-medal-stack .modern-medal-item:first-child {
    margin-inline-start: 0;
}

/* 4) اگر داخل LI لینک/آیکون هست، وسط‌چین و اندازه‌گذاری */
.mlm-product-medals-widget li.modern-medal-item>a,
.modern-product-medals .modern-medal-item>a,
.modern-medal-stack .modern-medal-item>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.mlm-product-medals-widget li.modern-medal-item img,
.mlm-product-medals-widget li.modern-medal-item svg,
.modern-product-medals .modern-medal-item img,
.modern-product-medals .modern-medal-item svg,
.modern-medal-stack .modern-medal-item img,
.modern-medal-stack .modern-medal-item svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* هاور بهتر */
.mlm-product-medals-widget li.modern-medal-item:hover,
.modern-product-medals .modern-medal-item:hover,
.modern-medal-stack .modern-medal-item:hover {
    z-index: 10;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* پس‌زمینهٔ رَپر شفاف بماند (برای جلوگیری از بیضی) */
.mlm-product-medals-widget,
.modern-product-medals,
.modern-medal-stack {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ===== Product medals (UL from print_product_medals) ===== */
/* UL که کلاس سفارشی می‌گیرد (ما الان 'modern-medal-item' پاس می‌دهیم) */
.modern-product-medals .modern-medal-item {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    /* روی‌هم بیفتند */
}

/* LIهای بوت‌استرپی */
.modern-product-medals .modern-medal-item>li.nav-item {
    margin: 0;
    padding: 0;
    margin-inline-start: -10px;
    /* نیمه‌روی‌هم */
    position: relative;
    z-index: 1;
}

.modern-product-medals .modern-medal-item>li.nav-item:first-child {
    margin-inline-start: 0;
}

/* خود مدال واقعی: span.product-medal + medal-KEY */
.modern-product-medals .modern-medal-item .product-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    /* رینگ سفید */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    background-color: #fff;
    /* بک سفید داخل دایره */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    /* اندازه خود آیکون داخل دایره */
    padding: 0;
    /* padding های nav-link را خنثی کند */
}

/* هاور کمی بالا بیاید */
.modern-product-medals .modern-medal-item>li.nav-item:hover {
    z-index: 10;
    transform: translateY(-2px);
}

/* ===== آدرس آیکون‌های هر مدال =====
   اگر پوشه‌ات متفاوت است، فقط مسیر را اصلاح کن.
   مسیر پیشنهادی: /wp-content/themes/marketmlm/assets/img/medals/
*/
/* از css/ تا img/ یک سطح بالاتر می‌رویم ⇒ ../img/medals/ */
.product-medal.medal-featured {
    background-image: url('../img/badges/featured.svg');
}

.product-medal.medal-free {
    background-image: url('../img/badges/free.svg');
}

.product-medal.medal-license {
    background-image: url('../img/badges/license.svg');
}

.product-medal.medal-original {
    background-image: url('../img/badges/original.svg');
}

.product-medal.medal-sale {
    background-image: url('../img/badges/sale.svg');
}

.product-medal.medal-iran {
    background-image: url('../img/badges/iran.svg');
}

/* Force square right corners on price card */
.meta-three-cols .meta-item.price .price-card {
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.meta-three-cols .meta-item.price .price-card::after {
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* اطمینان از اینکه چیزی روش را گرد نمی‌کند */
.meta-three-cols .meta-item.price {
    overflow: visible !important;
}

/* --- Medals: push to right edge, increase overlap, keep inside box --- */

/* ردیف بالایی باکس راست: فروشنده | مدال‌ها */
.split-right-info .modern-top-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* خود بلوک مدال‌ها برود چسبیده به سمت راست ردیف */
.split-right-info .modern-product-medals {
    margin-left: auto;
    /* هل بده به سمت راست */
    margin-inline-end: 40px;
    /* در RTL هم مطمئن شو */
    display: flex;
    align-items: center;
}

/* UL مدال‌ها (کلاسی که به print_product_medals می‌دهیم) */
.split-right-info .modern-product-medals .modern-medal-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding-inline-start: 6px;
    /* یک ذره حائل تا اولین مدال به لبه نچسبد */
}

/* هر LI یک مدال: روی‌هم‌افتادن بیشتر */
.split-right-info .modern-product-medals .modern-medal-item>li.nav-item {
    margin-inline-start: -16px;
    /* قبلاً -10px بود → بیشتر روی هم بیفتند */
    position: relative;
    z-index: 1;
}

.split-right-info .modern-product-medals .modern-medal-item>li.nav-item:first-child {
    margin-inline-start: 0;
    /* اولین مدال منفی نداشته باشد */
}

/* خود دایره‌ی مدال (span.product-medal) همان قبلی، فقط اطمینان از اندازه */
.split-right-info .modern-product-medals .modern-medal-item .product-medal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* ===== Vendor Popover (hover/click on seller name) ===== */

.vendor-has-popover {
    position: relative;
}

.modern-seller-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modern-seller-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.modern-seller-trigger .modern-seller-name {
    color: #4a5568;
    /* خاکستری تیره */
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}

.modern-seller-trigger:hover .modern-seller-name {
    color: #2d3748;
    /* خاکستری تیره‌تر */
    text-decoration: none;
    /* بدون خط زیر */
}

/* خود پاپاور */
.vendor-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    /* سمت راست باکس */
    width: 420px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
    padding: 14px;
    z-index: 50;
    display: none;
    /* پیش‌فرض مخفی */
}

.vendor-popover::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 28px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

/* هدر کارت */
.vp-header {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.vp-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #eef0f4;
}

.vp-name {
    font-weight: 800;
    color: #1f2937;
}

.vp-tagline {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* مدال‌های فروشنده در هدر */
.vp-badges {
    display: flex;
    align-items: center;
    gap: 0;
}

.vp-badges .modern-medal-stack {
    gap: 0;
}

.vp-badges .modern-medal-stack .modern-medal-item {
    margin-inline-start: -10px;
}

.vp-badges .modern-medal-stack .modern-medal-item:first-child {
    margin-inline-start: 0;
}

/* آمار سه‌ستونه با جداکنندهٔ نقطه‌چین */
.vp-stats {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    margin: 8px 0 12px;
}

.vp-stat {
    text-align: center;
}

.vp-stat-value {
    font-weight: 800;
    font-size: 20px;
    color: #2c3e50;
}

.vp-stat-label {
    font-size: 12px;
    color: #6b7280;
}

.vp-sep {
    width: 1px;
    height: 28px;
    background: linear-gradient(#e5e7eb, #f3f4f6);
}

/* دکمه انتهایی */
.vp-actions {
    display: flex;
    justify-content: flex-start;
}

.vp-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(102, 126, 234, .25);
}

.vp-shop-btn:hover {
    transform: translateY(-2px);
    color: #fff;
}

/* نمایش/عدم‌نمایش */
.vendor-popover.is-open {
    display: block;
}

/* اگر فضای راست کم بود، با media query کمی جمع‌وجور شود */
@media (max-width: 480px) {
    .vendor-popover {
        width: 92vw;
        right: -6px;
    }
}

/* ===== Vendor medals (output of print_user_medals) ===== */

/* خود UL که از print_user_medals می‌آید (ما کلاس modern-medal-stack را پاس داده‌ایم) */
.modern-medal-stack {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    /* برای هم‌پوشانی فاصله را صفر نگه می‌داریم */
}

/* هر LI یک مدال است؛ نیمه‌روی‌هم */
.modern-medal-stack>li {
    margin: 0;
    padding: 0;
    margin-inline-start: -14px;
    /* میزان هم‌پوشانی، اگر کم/زیاد خواستی عدد را عوض کن */
    position: relative;
    z-index: 1;
}

.modern-medal-stack>li:first-child {
    margin-inline-start: 0;
}

/* خود مدال واقعی که span.medal … است */
.modern-medal-stack .medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    /* رینگ سفید بین دایره‌ها */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    padding: 0;
}

/* هاور بهتر */
.modern-medal-stack>li:hover {
    z-index: 10;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* تعریف تصاویر مدال‌ها برای همه حالت‌ها با !important */
.medal.medal-approved,
.vp-badge-item .medal.medal-approved,
.vp-badges-grid .medal.medal-approved {
    background-image: url('../img/medals/medal-approved.svg') !important;
}

.medal.medal-author,
.vp-badge-item .medal.medal-author,
.vp-badges-grid .medal.medal-author {
    background-image: url('../img/medals/medal-author.svg') !important;
}

.medal.medal-comments,
.vp-badge-item .medal.medal-comments,
.vp-badges-grid .medal.medal-comments {
    background-image: url('../img/medals/medal-comments.svg') !important;
}

.medal.medal-is-vendor,
.vp-badge-item .medal.medal-is-vendor,
.vp-badges-grid .medal.medal-is-vendor {
    background-image: url('../img/medals/medal-is-vendor.svg') !important;
}

.medal.medal-network-20,
.vp-badge-item .medal.medal-network-20,
.vp-badges-grid .medal.medal-network-20 {
    background-image: url('../img/medals/medal-network-20.svg') !important;
}

.medal.medal-networker,
.vp-badge-item .medal.medal-networker,
.vp-badges-grid .medal.medal-networker {
    background-image: url('../img/medals/medal-networker.svg') !important;
}

.medal.medal-profile,
.vp-badge-item .medal.medal-profile,
.vp-badges-grid .medal.medal-profile {
    background-image: url('../img/medals/medal-profile.svg') !important;
}

.medal.medal-purchaser,
.vp-badge-item .medal.medal-purchaser,
.vp-badges-grid .medal.medal-purchaser {
    background-image: url('../img/medals/medal-purchaser.svg') !important;
}

.medal.medal-referrer,
.vp-badge-item .medal.medal-referrer,
.vp-badges-grid .medal.medal-referrer {
    background-image: url('../img/medals/medal-referrer.svg') !important;
}

.medal.medal-referrer-50,
.vp-badge-item .medal.medal-referrer-50,
.vp-badges-grid .medal.medal-referrer-50 {
    background-image: url('../img/medals/medal-referrer-50.svg') !important;
}

.medal.medal-vendor,
.vp-badge-item .medal.medal-vendor,
.vp-badges-grid .medal.medal-vendor {
    background-image: url('../img/medals/medal-vendor.svg') !important;
}

.medal.medal-vendor-500,
.vp-badge-item .medal.medal-vendor-500,
.vp-badges-grid .medal.medal-vendor-500 {
    background-image: url('../img/medals/medal-vendor-500.svg') !important;
}

.medal.medal-verified,
.vp-badge-item .medal.medal-verified,
.vp-badges-grid .medal.medal-verified {
    background-image: url('../img/medals/medal-verified.svg') !important;
}

.medal.medal-vip-product,
.vp-badge-item .medal.medal-vip-product,
.vp-badges-grid .medal.medal-vip-product {
    background-image: url('../img/medals/medal-vip-product.svg') !important;
}

.medal.medal-withdraws,
.vp-badge-item .medal.medal-withdraws,
.vp-badges-grid .medal.medal-withdraws {
    background-image: url('../img/medals/medal-withdraws.svg') !important;
}

/* ===== Vendor medals grid (2 rows under stats) ===== */
.vp-badges-grid-wrap {
    margin: 8px 0 12px;
}

.vp-badges-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 36px);
    /* 6 ستون دایره‌ای */
    grid-auto-rows: 36px;
    /* ارتفاع هر ردیف */
    gap: 10px 12px;
    /* فاصله عمودی/افقی */
    justify-content: start;
}

/* هر LI یک خانه؛ بدون هم‌پوشانی */
.vp-badges-grid>li {
    margin: 0;
    padding: 0;
}

/* خود مدالِ span (دایره) */
.vp-badges-grid .medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    /* Background properties - تصویر بعداً با کلاس‌های خاص اضافه می‌شه */
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}


/* تعریف تصاویر مدال‌ها برای .vp-badges-grid - باید بعد از تعریف کلاس باشه */
/* مدال‌های واقعی از کد PHP */
.vp-badges-grid .medal.medal-vendor {
    background-image: url('../img/medals/medal-vendor.svg') !important;
}

.vp-badges-grid .medal.medal-subset-income {
    background-image: url('../img/medals/medal-networker.svg') !important;
}

.vp-badges-grid .medal.medal-sale-income {
    background-image: url('../img/medals/medal-vendor-500.svg') !important;
}

.vp-badges-grid .medal.medal-ref-income {
    background-image: url('../img/medals/medal-referrer-50.svg') !important;
}

.vp-badges-grid .medal.medal-valid-ref {
    background-image: url('../img/medals/medal-referrer.svg') !important;
}

.vp-badges-grid .medal.medal-valid-post {
    background-image: url('../img/medals/medal-author.svg') !important;
}

.vp-badges-grid .medal.medal-valid-product {
    background-image: url('../img/medals/medal-vip-product.svg') !important;
}

.vp-badges-grid .medal.medal-valid-subset {
    background-image: url('../img/medals/medal-network-20.svg') !important;
}

.vp-badges-grid .medal.medal-valid-purchase {
    background-image: url('../img/medals/medal-purchaser.svg') !important;
}

.vp-badges-grid .medal.medal-valid-withdraw {
    background-image: url('../img/medals/medal-withdraws.svg') !important;
}

.vp-badges-grid .medal.medal-valid-comment {
    background-image: url('../img/medals/medal-comments.svg') !important;
}

.vp-badges-grid .medal.medal-vip-product {
    background-image: url('../img/medals/medal-vip-product.svg') !important;
}

.vp-badges-grid .medal.medal-profile-ok {
    background-image: url('../img/medals/medal-profile.svg') !important;
}

.vp-badges-grid .medal.medal-account-ok {
    background-image: url('../img/medals/medal-verified.svg') !important;
}

/* ریسپانسیو: اگر عرض کم شد، ستون‌ها کمتر شوند */
@media (max-width: 480px) {
    .vp-badges-grid {
        grid-template-columns: repeat(5, 36px);
    }
}

/* === Vendor medals with labels (icon + text) === */
.vp-badges-grid.with-labels {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    /* دو ستون، هر کدام جا برای آیکون+متن */
    grid-auto-rows: auto;
    gap: 10px 16px;
}

.vp-badge-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    /* آیکون 36px + متن */
    align-items: center;
    gap: 10px;
    min-height: 36px;
}

.vp-badge-item .medal {
    display: inline-block;
    /* تغییر به inline-block برای نمایش بهتر background */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    /* Background properties */
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    flex-shrink: 0;
    /* جلوگیری از کوچک شدن */
}

.vp-badge-item .medal-label {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* تعریف تصاویر مدال‌ها - باید بعد از .vp-badge-item .medal باشه تا override بشه */
/* مدال‌های واقعی از کد PHP */
.vp-badge-item .medal.medal-vendor {
    background-image: url('../img/medals/medal-vendor.svg') !important;
}

.vp-badge-item .medal.medal-subset-income {
    background-image: url('../img/medals/medal-networker.svg') !important;
}

.vp-badge-item .medal.medal-sale-income {
    background-image: url('../img/medals/medal-vendor-500.svg') !important;
}

.vp-badge-item .medal.medal-ref-income {
    background-image: url('../img/medals/medal-referrer-50.svg') !important;
}

.vp-badge-item .medal.medal-valid-ref {
    background-image: url('../img/medals/medal-referrer.svg') !important;
}

.vp-badge-item .medal.medal-valid-post {
    background-image: url('../img/medals/medal-author.svg') !important;
}

.vp-badge-item .medal.medal-valid-product {
    background-image: url('../img/medals/medal-vip-product.svg') !important;
}

.vp-badge-item .medal.medal-valid-subset {
    background-image: url('../img/medals/medal-network-20.svg') !important;
}

.vp-badge-item .medal.medal-valid-purchase {
    background-image: url('../img/medals/medal-purchaser.svg') !important;
}

.vp-badge-item .medal.medal-valid-withdraw {
    background-image: url('../img/medals/medal-withdraws.svg') !important;
}

.vp-badge-item .medal.medal-valid-comment {
    background-image: url('../img/medals/medal-comments.svg') !important;
}

.vp-badge-item .medal.medal-vip-product {
    background-image: url('../img/medals/medal-vip-product.svg') !important;
}

.vp-badge-item .medal.medal-profile-ok {
    background-image: url('../img/medals/medal-profile.svg') !important;
}

.vp-badge-item .medal.medal-account-ok {
    background-image: url('../img/medals/medal-verified.svg') !important;
}

/* موبایل: ستون‌ها یکی */
@media (max-width: 480px) {
    .vp-badges-grid.with-labels {
        grid-template-columns: 1fr;
    }
}

/* Second custom button (زیر تصویر کنار گالری) */
.modern-second-btn {
    background: white;
    color: #666;
    border: 2px solid #e9ecef;
    padding: 12px 20px;
    border-radius: 12px;
    /* گردی کمتر مثل بقیه */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-width: 120px;
}

.modern-second-btn:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

/* دکمه‌های ردیف زیر تصویر به صورت ستونیِ مساوی تقسیم شوند */
.modern-preview-buttons .modern-preview-btn,
.modern-preview-buttons .modern-gallery-btn,
.modern-preview-buttons .modern-second-btn {
    flex: 1;
}

/* === Variation Modal === */
.variation-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.variation-overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.variation-box {
    position: relative;
    z-index: 1;
    width: min(720px, 92vw);
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .25);
    padding: 18px 18px 20px;
}

.variation-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .06);
    color: #111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* برای <a> لازم است */
    text-decoration: none;
}

.variation-close:hover {
    background: rgba(0, 0, 0, .1);
}

.variation-title {
    font-weight: 800;
    font-size: 18px;
    color: #111827;
    margin: 0 0 12px;
}

/* فرم اتریبیوت‌ها */
.variation-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.variation-attributes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 560px) {
    .variation-attributes {
        grid-template-columns: 1fr;
    }
}

.variation-attr label {
    display: block;
    font-weight: 700;
    color: #374151;
    font-size: 13px;
    margin-bottom: 6px;
}

.variation-attr select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: #374151;
}

/* نمایش قیمت وارییشن */
.variation-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: #fff7ee;
    border: 1px solid #ffe3c7;
    border-radius: 12px;
    padding: 10px 12px;
}

.variation-price .vp-old {
    text-decoration: line-through;
    color: #ba9f8b;
    font-size: 13px;
}

.variation-price .vp-new {
    font-weight: 800;
    font-size: 26px;
    color: #2d2d2d;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.variation-price .vp-currency {
    font-size: 12px;
    color: #b3b3b3;
}

/* تایمر و Progress مخصوص وارییشن */
.variation-deal {
    background: #fff7ee;
    border: 1px solid #ffe3c7;
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 6px 18px rgba(255, 153, 0, .08);
}

.variation-deal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.variation-deal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff9800;
    font-weight: 800;
    font-size: 14px;
}

.variation-deal-time b {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #374151;
    font-size: 14px;
}

.variation-progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, #ffb157, #ffa33f 55%, #ff8f2e);
}

.variation-progress-empty {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: #fff;
    opacity: .8;
}

/* دکمه‌ها */
.variation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* === Variation Modal : open via :target (no-JS fallback) === */
.variation-modal:target {
    display: flex !important;
}

/* دکمه داخل فرم هم مثل بقیه تمام‌عرضِ ستون شود */
.modern-action-buttons-row form.cart {
    flex: 1;
}

.modern-action-buttons-row form.cart .modern-cart-btn {
    width: 100%;
}

/* فرم دکمه‌‌ی خرید در ردیف عملیات، مثل یک آیتم فلکس رفتار کند */
.modern-action-buttons-row form.cart {
    display: flex;
    flex: 1 1 0;
    margin: 0;
    /* هر مارجین پیش‌فرض قالب/بوت‌استرپ خنثی شود */
}

/* خود دکمه داخل فرم، تمام‌عرض و هم‌قد با بقیه */
.modern-action-buttons-row form.cart .modern-cart-btn {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    line-height: 1;
}

/* جلوگیری از درهم‌ریختگی ارتفاع دکمه نسبت به همسایه‌ها */
.modern-action-buttons-row .modern-cart-btn,
.modern-action-buttons-row .modern-preview-btn,
.modern-action-buttons-row .modern-gallery-btn {
    min-height: 44px;
}

/* حذف خط آبیِ فوکِس و یکدست‌سازی گردی */
.modern-cart-btn {
    border-radius: 10px;
    /* گوشه‌ها 10px */
    outline: none;
    border: none !important;
}

.modern-cart-btn:focus,
.modern-cart-btn:focus-visible,
.modern-cart-btn:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* نسخه داخل مودال هم همین رفتار را داشته باشد */
.variation-actions .modern-cart-btn {
    border-radius: 10px;
    outline: none;
    border: none !important;
}

.variation-actions .modern-cart-btn:focus,
.variation-actions .modern-cart-btn:focus-visible,
.variation-actions .modern-cart-btn:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* اگر دکمه به صورت <a> باشد (برای برخی تم‌ها) */
a.modern-cart-btn:focus,
a.modern-cart-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ==== FIX: cart button focus ring + exact 10px radius ==== */
/* دکمه اصلی و دکمه داخل مودال – هم <button> هم <a> */
.modern-action-buttons-row .modern-cart-btn,
.variation-actions .modern-cart-btn,
a.modern-cart-btn,
button.modern-cart-btn {
    border-radius: 10px !important;
    border: none !important;
}

/* تمام حالات فوکِس را خاموش کن (خط آبی/هاله بوت‌استرپ) */
.modern-action-buttons-row .modern-cart-btn:focus,
.modern-action-buttons-row .modern-cart-btn:focus-visible,
.modern-action-buttons-row .modern-cart-btn:active,
.variation-actions .modern-cart-btn:focus,
.variation-actions .modern-cart-btn:focus-visible,
.variation-actions .modern-cart-btn:active,
a.modern-cart-btn:focus,
a.modern-cart-btn:focus-visible,
button.modern-cart-btn:focus,
button.modern-cart-btn:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
    /* هاله آبی بوت‌استرپ */
    -webkit-tap-highlight-color: transparent;
    /* موبایل */
    border: none !important;
    /* حذف کامل border */
}

/* فایرفاکس: حذف حاشیه داخلی پیش‌فرض روی دکمه‌ها */
button.modern-cart-btn::-moz-focus-inner {
    border: 0 !important;
}

/* اگر دکمه داخل فرم است، باز هم تمام‌عرض و هم‌قد بماند */
.modern-action-buttons-row form.cart {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
}

.modern-action-buttons-row form.cart .modern-cart-btn {
    width: 100%;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

/* ===== Tabs bar (detached, white, edge-to-edge) ===== */
.modern-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    /* کمی فاصله از باکس پایین */
    padding: 12px 0;
    /* پدینگ عمودی؛ افقی صفر تا به دیواره‌ی کانتینر بچسبد */
    background: #fff;
    /* نوار سفید */
    border-bottom: 2px solid #f0f0f0;
}


/* محتوای تب‌ها بدون فاصله‌ی اضافی شروع شود */
.modern-tabs-content {
    margin-top: 0;
    padding-top: 10px;
}

/* کمی نفس برای متن */

.modern-tabs-bar .modern-tabs-nav {
    display: flex;
    gap: 10px;
}

.modern-tabs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Pills (مثل اسکرین‌شات، مربع با گوشه 12px و پس‌زمینه لطیف) */
.modern-tabs-actions .share-toggle,
.mlm-bookmark a,
/* دکمه‌ای که فایل bookmark قالب تولید می‌کند */
.mlm-bookmark button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f7f8fb;
    border: 1px solid #eceff3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: 0;
    box-shadow: none;
}

.mlm-bookmark a:hover,
.mlm-bookmark button:hover,
.modern-tabs-actions .share-toggle:hover {
    background: #f1f3f7;
}

/* آیکون share/x */
.st-icon {
    width: 20px;
    height: 20px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

/* آیکون سه‌نقطه متصل (share network) */
.st-share {
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23555" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="4" cy="10" r="2"/><circle cx="16" cy="4" r="2"/><circle cx="16" cy="16" r="2"/>\
<path d="M6 9l8-4M6 11l8 4"/>\
</svg>');
}

.st-close {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" stroke="%23555" fill="none" stroke-width="2"><path d="M4 4l12 12M16 4L4 16"/></svg>');
}

/* پنل آیکون‌های اشتراک‌گذاری */
.share-panel {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 10px);
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
    transform-origin: top left;
    transform: scale(.9) translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 40;
}

.modern-tabs-actions.is-open .share-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.share-item {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f7f8fb;
    border: 1px solid #eceff3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease;
}

.share-item:hover {
    background: #eef1f6;
    transform: translateY(-2px);
}

/* آیکون‌های شبکه‌ها */
.share-item::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.si-x::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23111" viewBox="0 0 24 24"><path d="M18.2 3H21l-6.6 7.5L22 21h-6.9l-4.3-5-5 5H3.1l7.1-7.5L2 3h7l4 4.6 5.1-4.6z"/></svg>');
}

.si-telegram::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2300a1e9" viewBox="0 0 24 24"><path d="M9.04 15.46l-.38 5.33c.54 0 .78-.23 1.06-.51l2.55-2.46 5.29 3.87c.97.54 1.66.26 1.9-.91l3.45-16.21h.01c.31-1.46-.53-2.03-1.47-1.68L1.7 9.46c-1.42.55-1.4 1.35-.24 1.71l5.34 1.67L19.45 6.5c.59-.39 1.12-.18.68.25"/></svg>');
}

.si-whatsapp::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2325D366" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163A11.867 11.867 0 0 1 0 11.994C0 5.373 5.373 0 11.994 0 18.616 0 23.99 5.373 23.99 11.994c0 6.622-5.374 11.996-11.996 11.996-2.062 0-3.998-.508-5.708-1.402L.057 24zM6.6 19.568c1.676.995 3.29 1.591 5.392 1.591 5.448 0 9.887-4.438 9.887-9.885 0-5.448-4.439-9.887-9.887-9.887-5.447 0-9.885 4.439-9.885 9.887 0 2.225.728 4.293 1.957 5.98l-.61 2.228 2.146-.911zm12.12-5.89c-.074-.124-.27-.198-.563-.347-.294-.149-1.74-.86-2.01-.957-.27-.1-.466-.149-.662.149-.198.296-.76.957-.93 1.155-.171.198-.342.223-.635.074-.294-.15-1.24-.456-2.366-1.454-.875-.78-1.466-1.742-1.637-2.036-.171-.296-.018-.456.13-.605.134-.133.296-.347.445-.52.149-.171.198-.296.298-.495.1-.198.05-.372-.025-.521-.074-.148-.662-1.593-.907-2.187-.239-.575-.482-.497-.662-.505l-.566-.01c-.198 0-.52.074-.792.372-.27.296-1.04 1.016-1.04 2.481 0 1.465 1.064 2.879 1.213 3.074.149.198 2.095 3.2 5.077 4.487.71.306 1.264.489 1.697.626.712.226 1.36.194 1.872.118.571-.085 1.74-.711 1.987-1.398.247-.688.247-1.278.173-1.402z"/></svg>');
}

.si-linkedin::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%230077b5" viewBox="0 0 24 24"><path d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8.5h4V24h-4V8.5zM8.5 8.5h3.8v2.1h.1c.5-.9 1.8-2.1 3.8-2.1 4.1 0 4.9 2.7 4.9 6.1V24h-4v-7.1c0-1.7 0-3.9-2.4-3.9-2.4 0-2.8 1.9-2.8 3.8V24h-4V8.5z"/></svg>');
}

/* وقتی باز است، آیکون share به ضربدر تبدیل شود */
.modern-tabs-actions.is-open .st-icon {
    background-image: none;
}

.modern-tabs-actions.is-open .st-icon.st-share {
    background-image: none;
}

.modern-tabs-actions.is-open .st-icon {
    background-image: none;
}

.modern-tabs-actions.is-open .st-share {
    background-image: none;
}

.modern-tabs-actions.is-open .share-toggle .st-icon {
    background-image: none;
}

.modern-tabs-actions.is-open .share-toggle .st-icon.st-share {
    background-image: none;
}

.modern-tabs-actions.is-open .share-toggle .st-icon {
    background-image: none;
}

.modern-tabs-actions.is-open .share-toggle .st-icon::before {
    content: "";
}

.modern-tabs-actions.is-open .share-toggle .st-icon {
    background: none;
}

.modern-tabs-actions.is-open .share-toggle {
    position: relative;
}

.modern-tabs-actions.is-open .share-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" stroke="%23555" fill="none" stroke-width="2"><path d="M4 4l12 12M16 4L4 16"/></svg>');
}

/* موبایل: اکشن‌ها زیر تب‌ها بیفتند */
@media (max-width: 768px) {

    /* تب‌بار در موبایل افقی بماند + پس‌زمینه سفید و فشرده‌تر شود */
    .modern-tabs-bar {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        background: #fff;
        border-radius: 12px;
        padding: 6px 8px;
        /* فشرده‌تر از دسکتاپ */
        gap: 8px;
        /* فاصله کمتر بین بخش‌ها */
    }

    /* اگر حالت detached داری، سفید و گرد بماند */
    .modern-tabs-bar.is-detached {
        background: #fff;
        border-radius: 12px;
        box-shadow: none;
        border-bottom: 0;
        /* خط پایین را از این حالت بردار اگر داشتی */
    }

    /* تب‌ها یک خطی و اسکرول‌پذیر افقی (سوایپ کاملاً فعال) */
    .modern-tabs-nav {
        flex: 1 1 auto;
        display: flex;
        gap: 8px;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* اسکرول نرم iOS */
        touch-action: pan-x;
        /* سوایپ افقی را در اولویت بگذار */
        overscroll-behavior-x: contain;
        /* اسکرول والد دخالت نکند */
        scroll-snap-type: x proximity;
        /* اسنپ ملایم هنگام اسکرول */
        min-width: 0;
        /* اجازه‌ی جمع شدن ظرف */
    }

    .modern-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    /* نوار اسکرول مخفی؛ سوایپ فعال است */


    /* خود دکمه‌های تب: ریزتر و بدون شکستن خط */
    .modern-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap;
        font-size: 13px;
        padding: 10px 8px;
        line-height: 1.2;
        scroll-snap-align: start;
        /* با اسنپ هماهنگ شود */
    }

    /* اکشن‌ها (اشتراک/علاقه‌مندی) انتهای ردیف بمانند */
    .modern-tabs-actions {
        flex: 0 0 auto;
        align-self: auto !important;
    }
}

/* ——— آیکونی‌کردن علاقه‌مندی ——— */
.modern-tabs-actions .bookmark-slot .mlm-bookmark a,
.modern-tabs-actions .bookmark-slot .mlm-bookmark button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f7f8fb;
    border: 1px solid #eceff3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: 0;
    box-shadow: none;
    /* متن داخل لینک/دکمه مخفی شود */
    font-size: 0;
    line-height: 0;
    color: transparent;
    position: relative;
}

.modern-tabs-actions .bookmark-slot .mlm-bookmark a:hover,
.modern-tabs-actions .bookmark-slot .mlm-bookmark button:hover {
    background: #f1f3f7;
}

/* آیکون قلب (استایل نمونه پیوست) */
.modern-tabs-actions .bookmark-slot .mlm-bookmark a::before,
.modern-tabs-actions .bookmark-slot .mlm-bookmark button::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23555" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 4.8c-1.7-1.3-4.1-1-5.5.8-1.4-1.8-3.8-2.1-5.5-.8-1.9 1.4-2.1 4.2-.4 5.9l5.9 5.7 5.9-5.7c1.7-1.7 1.5-4.5-.4-5.9z"/></svg>');
}

/* اگر بوکمارک «فعال» شد (کلاس قالب‌ات ممکن است .active یا .added باشد)، رنگ دلخواه: */
.modern-tabs-actions .bookmark-slot .mlm-bookmark .active::before,
.modern-tabs-actions .bookmark-slot .mlm-bookmark .added::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ff5a6b" stroke="%23ff5a6b" stroke-width="0"><path d="M10.5 16.7l-6-5.8c-1.7-1.7-1.5-4.5.4-5.9 1.7-1.3 4.1-1 5.5.8 1.4-1.8 3.8-2.1 5.5-.8 1.9 1.4 2.1 4.2.4 5.9l-5.8 5.8z"/></svg>');
}

/* ===== Detached tabs bar (full-width strip) ===== */
.modern-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    /* فاصله‌ی معقول از باکس پایین */
    padding: 0;
    /* بدون پدینگ تا از چپ/راست به دیواره بچسبد */
    border-bottom: 2px solid #f0f0f0;
}

.modern-tabs-bar.is-detached {
    border-radius: 0;
    box-shadow: none;
}

/* باکس سفید محتوای تب‌ها مستقل بماند */
.modern-product-details {
    margin-top: 0;
}

/* برای شروع سریعِ محتوا بعد از خط تب‌ها */
.modern-tabs-content {
    margin-top: 0;
    padding-top: 0;
}

/* ===== Course tab layout ===== */
#course .course-about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    #course .course-about-grid {
        grid-template-columns: 1fr;
    }
}

/* Intro video */
#course .course-intro-video iframe,
#course .course-intro-video video {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

/* Syllabus wrapper */
#course .course-syllabus {
    margin-top: 8px;
}

/* پیام: این دوره قبلاً خریداری شده */
.course-owned-note {
    margin-top: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(16, 185, 129, .08);
}

.course-owned-note .con-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23065f46" viewBox="0 0 24 24"><path d="M12 22C6.48 22 2 17.52 2 12S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10zm-1.2-6.2l6.6-6.6-1.4-1.4-5.2 5.2-2.2-2.2-1.4 1.4 3.6 3.6z"/></svg>');
}

/* ==== FIX: ستاره‌ها در موبایل زیرِ هم نیفتند (افقی و یک‌خطی) ==== */
.meta-three-cols .meta-item.rating .stars,
.meta-three-cols .meta-item.rating .woocommerce-product-rating,
.meta-three-cols .meta-item.rating .star-rating {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    /* اجازه‌ی رفتن به خط بعد نده */
}

/* هرچی داخل .stars هست (li, span, i, svg …) افقی شود */
.meta-three-cols .meta-item.rating .stars ul {
    display: flex !important;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.meta-three-cols .meta-item.rating .stars li,
.meta-three-cols .meta-item.rating .stars span,
.meta-three-cols .meta-item.rating .stars i,
.meta-three-cols .meta-item.rating .stars svg {
    display: inline-block !important;
    line-height: 1;
}

/* ستاره‌های stars-group در meta-three-cols */
.meta-three-cols .meta-item.rating .stars-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 2px !important;
    /* فاصله کمتر بین ستاره‌ها */
    white-space: nowrap !important;
    float: none !important;
}

.meta-three-cols .meta-item.rating .stars-group>label {
    float: none !important;
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: auto !important;
}

.meta-three-cols .meta-item.rating .stars-group>label:before {
    font-size: 17px !important;
    line-height: 1 !important;
    margin-left: 0 !important;
    /* حذف margin برای فاصله کمتر */
    display: block !important;
}

/* استایل پیشفرض ووکامرس: ستاره‌ها با فونتِ ستاره رسم می‌شوند */
.meta-three-cols .meta-item.rating .star-rating {
    float: none !important;
    line-height: 1;
    font-size: 18px;
}

.meta-three-cols .meta-item.rating .star-rating span,
.meta-three-cols .meta-item.rating .star-rating:before {
    float: none !important;
    /* از چیدمان ستونی جلوگیری کن */
    display: inline-block !important;
}

/* Responsive: کوچک کردن ستاره‌ها و متن رتبه‌بندی به نسبت */
@media (max-width: 992px) {
    .meta-three-cols .meta-item.rating .star-rating {
        font-size: 16px !important;
        /* کمتر از 18px */
    }

    .meta-three-cols .meta-item.rating .stars-group>label:before {
        font-size: 15px !important;
        /* کمتر از 17px */
    }

    .meta-three-cols .meta-item.rating .stars-group {
        gap: 2px !important;
    }

    /* متن رتبه‌بندی هم کوچیک بشه */
    .meta-three-cols .meta-item.rating {
        font-size: 0.9em !important;
    }
}

@media (max-width: 768px) {
    .meta-three-cols .meta-item.rating .star-rating {
        font-size: 15px !important;
    }

    .meta-three-cols .meta-item.rating .stars-group>label:before {
        font-size: 14px !important;
    }

    .meta-three-cols .meta-item.rating .stars-group {
        gap: 1.5px !important;
    }

    .meta-three-cols .meta-item.rating {
        font-size: 0.85em !important;
    }
}

@media (max-width: 480px) {
    .meta-three-cols .meta-item.rating .star-rating {
        font-size: 13px !important;
    }

    .meta-three-cols .meta-item.rating .stars-group>label:before {
        font-size: 13px !important;
        /* کوچک کردن ستاره‌ها */
    }

    .meta-three-cols .meta-item.rating .stars-group {
        gap: 1px !important;
        /* فاصله کمتر */
    }

    .meta-three-cols .meta-item.rating {
        font-size: 0.8em !important;
    }
}

@media (max-width: 400px) {
    .meta-three-cols .meta-item.rating .star-rating {
        font-size: 11px !important;
    }

    .meta-three-cols .meta-item.rating .stars-group>label:before {
        font-size: 11px !important;
        /* کوچک کردن بیشتر */
    }

    .meta-three-cols .meta-item.rating .stars-group {
        gap: 1px !important;
    }

    .meta-three-cols .meta-item.rating {
        font-size: 0.75em !important;
    }
}

/* ===== Mobile: show rating ABOVE preview buttons; hide original rating row ===== */

/* نسخه‌ی داخل گالری (درج‌شده در مرحله 1) فقط روی موبایل دیده شود */
@media (max-width: 768px) {
    .mobile-rating-inline {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin: 10px 0 14px;
    }

    /* ستاره‌ها یک‌خطی و وسط‌چین */
    .mobile-rating-inline .stars,
    .mobile-rating-inline .woocommerce-product-rating,
    .mobile-rating-inline .star-rating {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        white-space: nowrap;
        float: none !important;
        line-height: 1;
    }

    .mobile-rating-inline .star-rating span,
    .mobile-rating-inline .star-rating:before {
        float: none !important;
        display: inline-block !important;
    }

    /* stars-group در mobile-rating-inline */
    .mobile-rating-inline .stars-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 2px !important;
        white-space: nowrap !important;
        float: none !important;
    }

    .mobile-rating-inline .stars-group>label {
        float: none !important;
        margin: 0 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }

    .mobile-rating-inline .stars-group>label:before {
        font-size: 15px !important;
        line-height: 1 !important;
        margin-left: 0 !important;
        display: block !important;
    }
}

/* Responsive adjustments for mobile-rating-inline stars */
@media (max-width: 480px) {
    .mobile-rating-inline .stars-group>label:before {
        font-size: 14px !important;
    }

    .mobile-rating-inline .stars-group {
        gap: 1px !important;
    }
}

@media (max-width: 400px) {
    .mobile-rating-inline .stars-group>label:before {
        font-size: 12px !important;
    }
}

/* روی دسکتاپ/تبلت این بلاک نمایش داده نشود (فقط نسخه‌ی اصلی بماند) */
@media (min-width: 769px) {
    .mobile-rating-inline {
        display: none;
    }
}