/* از قالب product_category_expand_2.tpl.html (بلوک <style> درون‌خطی) به فایل جدا آمد تا کش شود -- مرحله‌ی ۱۱٫۴، ۱۴۰۵/۰۷/۱۵ */
/* یکسان‌سازی ارتفاع ناحیه عکس محصولات در حالت گرید تا کارت‌ها هم‌قد شوند
               (مستقل از ابعاد ذاتی عکس؛ برای محصولات اولیه و لودشده با AJAX) */
            .hp-prolist .mode-grid .hp-proitem > div:first-child a { display: block; }
            .hp-prolist .mode-grid .hp-proitem > div:first-child img {
                width: 100% !important;
                height: 150px !important;
                max-width: 100% !important;
                object-fit: contain !important;
                object-position: center;
            }
            /* مشخصات روی دسکتاپ نمایش داده نمی‌شوند (فقط موبایل) */
            .hp-prolist .mode-grid .bpr-card-specs { display: none; }
            /* نوار قدیمی مقایسه نباید نمایش داده شود (سیستم مدرن جایگزین است) */
            #compaire-controls { display: none !important; }
            /* وضعیت «موجود» (تیک سبز) در همه اندازه‌ها پنهان باشد — فقط وقتی کالا موجود است */
            .hp-prolist .mode-grid .hp-proitem .hp-prolist-state:has(.text-success) { display: none !important; }

            @media (max-width: 767px) {
                /* ===== موبایل: کارت محصول تک‌ستونی و افقی (عکس چپ، اطلاعات راست) ===== */
                #product-list-container .hp-prolist { padding: 10px !important; }
                #product-list-container .hp-prolist .row > .product.mode-grid {
                    width: 100% !important; max-width: 100% !important;
                    float: none !important; clear: both !important;
                    padding: 0 !important; margin: 0 0 12px 0 !important;
                }
                /* کارت: گرید دو ستونه [اطلاعات | عکس] */
                .hp-prolist .mode-grid .hp-proitem {
                display: grid !important;
                grid-template-columns: 1fr 180px;
                grid-template-rows: auto auto;
                column-gap: 14px;
                row-gap: 10px;
                align-items: start;
                background: #fff;
                border: 1px solid #ececec;
                border-radius: 16px;
                padding: 12px;
                margin: 0;
                position: relative;
                overflow: hidden;
                padding-bottom: 15px !important;
            }
                /* عکس: ستون چپ، بالا (به موازات عنوان) */
                .hp-prolist .mode-grid .hp-proitem > div:first-child {
                    grid-column: 2; grid-row: 1;
                    align-self: start; position: relative; margin: 0;
                    display: flex; align-items: center; justify-content: center;
                }
                .hp-prolist .mode-grid .hp-proitem > div:first-child a { display: block; width: 100%; }
                .hp-prolist .mode-grid .hp-proitem > div:first-child img {
                    width: 100% !important; height: 180px !important; object-fit: contain !important;
                }
                /* برچسب تخفیف روی گوشهٔ عکس */
                .hp-prolist .mode-grid .hp-proitem .stick.bottom-left {
                    top: 6px !important; left: 6px !important; right: auto !important; bottom: auto !important;
                    border-radius: 7px !important; font-size: 12px !important; padding: 2px 7px !important; font-weight: bold;
                }
                /* ستون راست: عنوان + مشخصات (کل ارتفاع) */
                .hp-prolist .mode-grid .hp-proitem > div:nth-child(2) {
                    grid-column: 1; grid-row: 1 / span 2; align-self: start; min-width: 0; padding-top: 2px;
                }
                .hp-prolist .mode-grid .hp-proitem .title {
                    text-align: right !important; height: auto !important; margin: 0 0 8px 0 !important; overflow: hidden;
                }
                .hp-prolist .mode-grid .hp-proitem .title a {
                    font-size: 15px; font-weight: bold; color: #1f1f1f; line-height: 1.7;
                    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                }
                /* لیست مشخصات (تزریق‌شده با JS) */
                .hp-prolist .mode-grid .bpr-card-specs {
                    display: flex; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 5px;
                }
                .hp-prolist .mode-grid .bpr-card-specs li {
                    font-size: 12.5px; color: #555; display: flex; align-items: center; gap: 7px;
                    line-height: 1.6; text-align: right; direction: rtl;
                }
                .hp-prolist .mode-grid .bpr-card-specs li .fa {
                    color: #00b3aa; font-size: 13px; width: 16px; text-align: center; flex-shrink: 0;
                }
                .hp-prolist .mode-grid .bpr-card-specs li .v { color: #555; }
                /* ستون چپ پایین: قیمت — هم‌تراز دو خط آخر مشخصات، چپ‌چین زیر عکس */
                .hp-prolist .mode-grid .hp-proitem > div:nth-child(3) {
                    grid-column: 2; 
                    grid-row: 2;
                    align-self: center;
                    min-width: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    text-align: left !important;
                    padding: 0;
                    margin: 0;
                }
                
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-state { 
                display: block !important; 
                position: static !important; /* خارج کردن از حالت مطلق تا داخل گرید بشینه */
                margin: 0 !important;
                padding: 0 !important;
                text-align: left !important; /* چپ‌چین شدن متن در موبایل */
                } 

                .hp-prolist .mode-grid .hp-proitem .hp-prolist-state .state {
                    font-size: 14px !important;
                    font-weight: bold;
                    white-space: nowrap;
                }
                
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-price { text-align: left !important; margin: 0 !important; width: auto; }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-price.prev-price span { font-size: 12px !important; color: #7a7575 !important; }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-price:not(.prev-price) span { font-size: 16px !important; font-weight: bold; color: #111 !important; }
                /* مقایسه: کوچک، ستون راست زیر مشخصات (با متن «مقایسه») */
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare {
                grid-column: 1; 
                grid-row: 2;
                align-self: center;
                position: relative !important; 
                display: inline-flex; 
                align-items: center; 
                justify-content: flex-start;
                margin: 0 !important;
                padding: 0 28px 0 0 !important;
                font-size: 12.5px !important; 
                color: #777; 
                min-height: 20px; 
                line-height: 20px; 
                cursor: pointer;
            }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare .checkmark {
                    top: 50% !important; right: 0 !important; left: auto !important; transform: translateY(-50%);
                    width: 22px !important; height: 22px !important; border-radius: 5px !important;
                    background: #f4f4f4 !important; border: 1px solid #d8d8d8 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare input:checked ~ .checkmark {
                    background: #00b3aa !important; border-color: #00b3aa !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare .checkmark:after {
                    left: 6px !important; top: 2px !important;
                }
            }

            /* ===== دسکتاپ: ارتفاع کارت ثابت (specs همیشه جا دارند، فقط opacity تغییر می‌کند) ===== */
            @media (min-width: 768px) {
                /* تصویر ۲۰٪ بزرگ‌تر */
                .hp-prolist .mode-grid .hp-proitem > div:first-child img {
                    height: 180px !important;
                }

                /* کارت: Grid — عکس/عنوان تمام‌عرض، قیمت چپ | مقایسه راست (سایت RTL) */
                .hp-prolist .mode-grid .hp-proitem {
                    direction: rtl !important;
                    display: grid !important;
                    grid-template-columns: auto 1fr !important;
                    overflow: visible !important;
                    transition: box-shadow .25s ease !important;
                    padding-bottom: 15px !important;
                }
                .hp-prolist .mode-grid:hover .hp-proitem {
                    box-shadow: 0 6px 24px rgba(0,179,170,.13), 0 2px 8px rgba(0,0,0,.07) !important;
                    z-index: 3 !important;
                }

                /* عکس: تمام عرض */
                .hp-prolist .mode-grid .hp-proitem > div:first-child {
                    grid-column: 1 / -1 !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }

                /* عنوان + مشخصات: تمام عرض */
                .hp-prolist .mode-grid .hp-proitem > div:nth-child(2) {
                    grid-column: 1 / -1 !important;
                }

                /* عنوان */
                .hp-prolist .mode-grid .hp-proitem .title {
                    margin: 0px 0 !important;
                    padding: 0 !important;
                    height: auto !important;
                }

                /* حذف بلوک توضیحات (معمولاً خالی است و فضا می‌گیرد) */
                .hp-prolist .mode-grid .hp-proitem .hp-proitem-details {
                    margin: 0 !important;
                    padding: 0 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-proitem-details p {
                    margin: 0 !important;
                    padding: 0 !important;
                }

                /* قیمت: ستون ۲ = چپ در RTL، ردیف ۳ */
                .hp-prolist .mode-grid .hp-proitem > div:nth-child(3) {
                    grid-column: 2 !important;
                    grid-row: 3 !important;
                    align-self: center !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-price {
                    margin: 0 0 2px 0 !important;
                    padding: 0 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-state {
                    margin: 0 !important;
                    padding: 0 !important;
                    min-height: 0 !important;
                    line-height: 1.2 !important;
                    float: left !important;
                }

                /* مقایسه: ستون ۱ = راست در RTL، ردیف ۳ (هم‌سطح قیمت) */
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare {
                    grid-column: 1 !important;
                    grid-row: 3 !important;
                    align-self: center !important;
                    justify-self: start !important;
                    position: relative !important;
                    display: inline-flex !important;
                    align-items: center !important;
                    justify-content: flex-start !important;
                    padding: 0 26px 0 0 !important;
                    font-size: 12px !important;
                    color: #777 !important;
                    min-height: 20px !important;
                    line-height: 20px !important;
                    cursor: pointer !important;
                    margin: 0 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare .checkmark {
                    position: absolute !important;
                    top: 50% !important;
                    right: 0 !important;
                    left: auto !important;
                    transform: translateY(-50%) !important;
                    width: 20px !important;
                    height: 20px !important;
                    border-radius: 4px !important;
                    background: #f4f4f4 !important;
                    border: 1px solid #d8d8d8 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare input:checked ~ .checkmark {
                    background: #00b3aa !important;
                    border-color: #00b3aa !important;
                }
                .hp-prolist .mode-grid .hp-proitem .hp-prolist-compare .checkmark:after {
                    left: 6px !important;
                    top: 2px !important;
                }

                /* specs: همیشه فضا می‌گیرند (ارتفاع کارت ثابت) — فقط opacity تغییر می‌کند */
                .hp-prolist .mode-grid .hp-proitem .bpr-card-specs {
                    display: flex !important;
                    flex-direction: column !important;
                    gap: 0 !important;
                    position: static !important;
                    top: auto !important; bottom: auto !important;
                    left: auto !important; right: auto !important;
                    width: auto !important;
                    height: 160px !important;
                    overflow: hidden !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                    transform: none !important;
                    margin: 0 !important;
                    padding: 6px 12px !important;
                    list-style: none !important;
                    box-sizing: border-box !important;
                    border: none !important;
                    border-radius: 0 !important;
                    box-shadow: none !important;
                    z-index: auto !important;
                    pointer-events: auto !important;
                }

                .hp-prolist .mode-grid .hp-proitem .bpr-card-specs li {
                    font-size: 11.5px !important;
                    color: #222 !important;
                    display: flex !important;
                    align-items: center !important;
                    gap: 8px !important;
                    line-height: 1.4 !important;
                    text-align: right !important;
                    direction: rtl !important;
                    padding: 3px 0 !important;
                    border-bottom: 1px solid rgba(0,179,170,.1) !important;
                    margin: 0 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .bpr-card-specs li:last-child {
                    border-bottom: none !important;
                    padding-bottom: 0 !important;
                }
                .hp-prolist .mode-grid .hp-proitem .bpr-card-specs li .fa {
                    color: #fff !important;
                    font-size: 11px !important;
                    width: 20px !important;
                    height: 20px !important;
                    min-width: 20px !important;
                    line-height: 20px !important;
                    text-align: center !important;
                    flex-shrink: 0 !important;
                    background: #00b3aa !important;
                    border-radius: 50% !important;
                }
                .hp-prolist .mode-grid .hp-proitem .bpr-card-specs li .v {
                    color: #222 !important;
                    flex: 1 !important;
                    font-weight: 500 !important;
                }
                /* لودر placeholder تا specs واقعی لود شوند */
                .hp-prolist .mode-grid .hp-proitem .bpr-card-specs.bpr-specs-loading {
                    height: 160px !important;
                    justify-content: center !important;
                    align-items: center !important;
                }
                .hp-prolist .mode-grid .hp-proitem .bpr-specs-loader-row {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    gap: 6px !important;
                    border-bottom: none !important;
                    padding: 0 !important;
                    margin: 0 !important;
                    height: 100% !important;
                }
                .hp-prolist .mode-grid .hp-proitem .bpr-ld {
                    width: 7px !important;
                    height: 7px !important;
                    border-radius: 50% !important;
                    background: #00b3aa !important;
                    opacity: 0.3 !important;
                    animation: bprPulse 1.2s ease-in-out infinite !important;
                    display: inline-block !important;
                }
                .hp-prolist .mode-grid .hp-proitem .bpr-ld:nth-child(2) {
                    animation-delay: 0.2s !important;
                }
                .hp-prolist .mode-grid .hp-proitem .bpr-ld:nth-child(3) {
                    animation-delay: 0.4s !important;
                }
                @keyframes bprPulse {
                    0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
                    40%           { opacity: 1;   transform: scale(1.15); }
                }
            }