/* =========================================================
   Upsell Products – Cart Page
   Clean Version (No !important)
   Stable with WooCommerce + GeneratePress
   ========================================================= */


/* =========================================================
   Desktop – 4 Products in One Row
   ========================================================= */
@media (min-width: 1025px) {

    /* حاوية Upsell */
    body.woocommerce-cart .cart-collaterals .cross-sells {
        margin-top: 30px;
    }

    /* صف المنتجات */
    body.woocommerce-cart .cart-collaterals .cross-sells > ul.products {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* كرت المنتج */
    body.woocommerce-cart .cart-collaterals .cross-sells > ul.products > li.product {
        flex: 0 0 calc(25% - 11px);
        max-width: calc(25% - 11px);
        margin: 0;
        padding: 8px;
        box-sizing: border-box;

        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* إظهار أول 4 منتجات فقط */
    body.woocommerce-cart .cart-collaterals .cross-sells > ul.products > li.product:nth-child(n+5) {
        display: none;
    }

    /* الصورة */
    body.woocommerce-cart .cross-sells img {
        max-height: 120px;
        object-fit: contain;
        margin-bottom: 6px;
    }

    /* العنوان */
    body.woocommerce-cart .cross-sells .woocommerce-loop-product__title {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 4px;
    }

    /* السعر */
    body.woocommerce-cart .cross-sells .price {
        font-size: 13px;
        margin-bottom: 6px;
    }

    /* زر الإضافة */
    body.woocommerce-cart .cross-sells .button {
        font-size: 12px;
        padding: 6px 8px;
        margin-top: auto;
    }
}


/* =========================================================
   Mobile – 2 + 2 Products (No Gaps – Clean)
   ========================================================= */
@media (max-width: 768px) {

    /* تعطيل عناصر Woo الوهمية */
    body.woocommerce-cart .cross-sells > ul.products::before,
    body.woocommerce-cart .cross-sells > ul.products::after {
        content: none;
        display: none;
    }

    /* صف المنتجات */
    body.woocommerce-cart .cross-sells > ul.products {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* كرت المنتج – 2 في السطر */
    body.woocommerce-cart .cross-sells > ul.products > li.product {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        margin: 0;
        padding: 8px;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* إظهار أول 4 منتجات فقط */
    body.woocommerce-cart .cross-sells > ul.products > li.product:nth-child(n+5) {
        display: none;
    }
}