/* ============================================================
   MOBILE PRODUCT CARD FIX
   Stacks image + product name vertically so images aren't cropped.
   Also fixes recommended product carousel cards.
   Add this AFTER your existing mobile CSS rules.
   ============================================================ */

@media (max-width: 991px) {

    /* ── MAIN PRODUCT LIST ROWS ── */

    /* Each product row becomes a flex column stack */
    .blog-post-area .row.margin-bottom-prod.single-products {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px 8px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* Reset all three column widths — they all go full-width */
    .blog-post-area .row.margin-bottom-prod .col-md-3,
    .blog-post-area .row.margin-bottom-prod .col-sm-4,
    .blog-post-area .row.margin-bottom-prod .col-md-5,
    .blog-post-area .row.margin-bottom-prod .col-md-4 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    /* IMAGE — give it full width and a comfortable height */
    .blog-post-area .row.margin-bottom-prod .product-image-container {
        width: 100% !important;
        height: 240px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .blog-post-area .row.margin-bottom-prod .product-image-container img.main-product-image,
    .blog-post-area .row.margin-bottom-prod .product-image-container img.additional-product-image {
        height: 240px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* TITLE — shown directly below the image */
    .blog-post-area .row.margin-bottom-prod h3.titel-prod {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin: 10px 0 6px !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    /* DESCRIPTION — slightly muted, limited to 3 lines */
    .blog-post-area .row.margin-bottom-prod .col-md-5 p {
        font-size: 13px !important;
        color: #666 !important;
        text-align: center !important;
        margin: 0 0 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* PRICE + CART COLUMN — centered */
    .blog-post-area .row.margin-bottom-prod .productinfo.text-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 8px 0 4px !important;
    }

    /* Qty selector — keep it compact */
    .blog-post-area .row.margin-bottom-prod .qty-selector {
        margin: 8px auto !important;
    }

    /* Add-to-cart button — full width */
    .blog-post-area .row.margin-bottom-prod .add-to-cart,
    .blog-post-area .row.margin-bottom-prod .btn.btn-default {
        width: 100% !important;
        max-width: 320px !important;
        margin-top: 6px !important;
    }

    /* ── RECOMMENDED PRODUCTS CAROUSEL CARDS ── */

    /* Each carousel item: allow natural wrapping instead of rigid 3-col float */
    #recommended-item-carousel .carousel-inner .item {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
        padding: 8px 0 !important;
    }

    /* Each card: 2 per row on tablet, 1 on phone */
    #recommended-item-carousel .col-sm-4 {
        width: calc(50% - 12px) !important;
        float: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Card wrapper */
    #recommended-item-carousel .product-image-wrapper {
        border: 1px solid #f0f0f0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        padding-bottom: 12px !important;
    }

    /* Recommended image */
    #recommended-item-carousel .product-image-container {
        width: 100% !important;
        height: 180px !important;
    }

    #recommended-item-carousel .product-image-container img.main-product-image,
    #recommended-item-carousel .product-image-container img.additional-product-image {
        height: 180px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Recommended product title */
    #recommended-item-carousel .productinfo p {
        font-size: 13px !important;
        font-weight: 500 !important;
        margin: 8px 6px 4px !important;
        line-height: 1.3 !important;
    }

    /* Recommended price */
    #recommended-item-carousel .productinfo h2 {
        font-size: 15px !important;
        margin: 4px 0 !important;
    }

    /* Detail + cart buttons */
    #recommended-item-carousel .btn-detail,
    #recommended-item-carousel .add-to-cart {
        font-size: 12px !important;
        padding: 6px 10px !important;
        width: calc(100% - 12px) !important;
        margin: 4px 6px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Qty selector in recommended cards */
    #recommended-item-carousel .qty-selector {
        margin: 6px auto !important;
    }

    /* Nav arrows — keep them visible and clickable */
    #recommended-item-carousel .recommended-item-control {
        top: 40% !important;
        font-size: 22px !important;
        padding: 6px 12px !important;
        background: rgba(0,0,0,0.3) !important;
        border-radius: 50% !important;
        color: #fff !important;
    }
}

@media (max-width: 480px) {

    /* 1 card per row in recommended on very small phones */
    #recommended-item-carousel .col-sm-4 {
        width: 85% !important;
    }

    #recommended-item-carousel .carousel-inner .item {
        justify-content: center !important;
    }

    /* Slightly shorter image on tiny screens */
    .blog-post-area .row.margin-bottom-prod .product-image-container {
        height: 200px !important;
    }

    .blog-post-area .row.margin-bottom-prod .product-image-container img.main-product-image,
    .blog-post-area .row.margin-bottom-prod .product-image-container img.additional-product-image {
        height: 200px !important;
    }
}