/* ===== HSA Mobile Fixes — MUST load last ===== */

@media (max-width: 992px){

    /* 1) خود کانتینر لیست محصولات را به گرید 1 ستونه مجبور کن */
    #hsa-archive .hsa-products.facetwp-template,
    #hsa-archive ul.products.hsa-products.facetwp-template,
    #hsa-archive .woocommerce ul.products.facetwp-template,
    #hsa-archive .woocommerce-page ul.products.facetwp-template {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 2) هرگونه grid-template-columns مبتنی بر auto-fill/minmax را خنثی کن */
    #hsa-grid { --hsa-card-min: 100% !important; }

    /* 3) قوانین قالب/ووکامرس که li.product را دو ستونه می‌کند، ابطال شود */
    #hsa-archive .woocommerce ul.products li.product,
    #hsa-archive .woocommerce-page ul.products li.product,
    #hsa-archive .facetwp-template.hsa-products li.product,
    #hsa-archive .hsa-products.facetwp-template li.product {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 !important;
    }

    /* 4) اگر کلاس‌های columns-* روی UL هست، یک‌ستونه تحمیل شود */
    #hsa-archive .woocommerce ul.products[class*="columns-"],
    #hsa-archive .woocommerce-page ul.products[class*="columns-"]{
        grid-template-columns: 1fr !important;
    }

    /* 5) اسکلت‌ها هم‌راستا با یک ستون شوند */
    #hsa-grid .hsa-skeletons{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 6) کارت موبایل: تصویر راست / متن چپ (اگر جای دیگر override کرده) */
    #hsa-archive .product-card{
        display: grid !important;
        grid-template-columns: 36% 1fr !important; /* راست: تصویر / چپ: متن */
        gap: 10px !important;
        align-items: start !important;
        padding: 10px !important;
        min-height: auto !important;
    }
    #hsa-archive .product-image-gallery{
        grid-column: 1 !important;               /* ستون 1 در RTL = راست */
        grid-row: 1 / span 3 !important;
        aspect-ratio: 1/1 !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
}