/* ─── Desktop / tablet product grid ─────────────────────────────────────────
   Mobile  (< 768px) : original layout — untouched.
   Tablet  (768–1099): 2-column card grid.
   Desktop (1100px+) : 4-column card grid.

   Structure:
   .category_entry
       h2.apt_secondary_title
       .category_entry_products   ← grid container
           .product_list_item     ← card
               .product_info
               .product_thumb
               .product_list_item_cart_info
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {

    .apt_screen_content_ui {
        padding: 0 20px 80px !important;
    }

    /* ── Products grid ────────────────────────────────────────────────────── */
    .category_entry_products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* ── Card: use inner grid to force image ROW 1, text ROW 2 ───────────── */
    .product_list_item {
        display: grid !important;
        grid-template-rows: auto auto !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        transition: box-shadow 0.2s, transform 0.2s;
        cursor: pointer;
        position: relative !important;
    }

    .product_list_item:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.13) !important;
        transform: translateY(-2px);
    }

    /* Image — explicitly placed in row 1, square using aspect-ratio */
    .product_list_item .product_thumb {
        grid-row: 1 !important;
        grid-column: 1 !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #f0f0f0 !important;
        flex-shrink: unset !important;
    }

    .product_list_item .product_thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        display: block !important;
    }

    /* Text — explicitly placed in row 2 */
    .product_list_item .product_info {
        grid-row: 2 !important;
        grid-column: 1 !important;
        padding: 12px 14px 14px !important;
        margin-right: 0 !important;
        align-self: start;
    }

    .product_list_item .product_title {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
    }

    .product_list_item .product_description {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    .product_list_item .product_price_display {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* Cart badge: row 1 overlaid top-right */
    .product_list_item .product_list_item_cart_info {
        grid-row: 1 !important;
        grid-column: 1 !important;
        align-self: start !important;
        justify-self: end !important;
        margin: 8px 8px 0 0 !important;
        position: relative !important;
        top: unset !important;
        right: unset !important;
        z-index: 2;
    }
}

/* ── 4 columns on desktop ─────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    .category_entry_products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}