/* ==========================================================
   HEMRITU — CENTRAL PRODUCT CARD FRAMEWORK
   File: product-card.css
   Version: 3.0 — Universal / Page Independent

   IMPORTANT:
   This file controls PRODUCT CARD DESIGN globally.
   It is NOT restricted to Shop, Category, Group, Home, etc.

   Any WooCommerce product rendered inside:
       <ul class="products">
   will automatically use this central design.

   Page-specific CSS files should control ONLY:
   - grid columns
   - section spacing
   - filters
   - banners
   - page layout
========================================================== */


/* ==========================================================
   1. UNIVERSAL PRODUCT CARD SHELL
========================================================== */

ul.products li.product{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    min-width:0 !important;
    height:100% !important;

    margin:0 !important;
    padding:7px 7px 12px !important;

    background:#fff !important;

    border:1px solid #e1e5e9 !important;
    border-radius:3px !important;

    box-sizing:border-box !important;

    box-shadow:
        0 2px 4px rgba(0,0,0,.06),
        0 5px 12px rgba(0,0,0,.07) !important;

    overflow:visible !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


/* Remove WooCommerce float behaviour */

ul.products li.product{
    float:none !important;
    clear:none !important;
}


/* ==========================================================
   2. PRODUCT IMAGE AREA
========================================================== */

ul.products li.product .astra-shop-thumbnail-wrap{
    position:relative !important;

    width:100% !important;

    margin:0 0 6px !important;
    padding:0 !important;

    overflow:hidden !important;
}


ul.products li.product .astra-shop-thumbnail-wrap > a,
ul.products li.product .woocommerce-LoopProduct-link{
    margin:0 !important;
    padding:0 !important;
}


ul.products li.product .astra-shop-thumbnail-wrap img,
ul.products li.product a img{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
}


/* ==========================================================
   3. PRODUCT CONTENT AREA
========================================================== */

ul.products li.product .astra-shop-summary-wrap{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
}


/* ==========================================================
   4. PRODUCT CATEGORY / TAXONOMY TEXT
========================================================== */

ul.products li.product .ast-woo-product-category,
ul.products li.product .ast-woo-shop-product-description,
ul.products li.product .hemritu-product-category{
    margin:0 0 7px !important;
    padding:0 !important;

    color:#98a2b3 !important;

    font-size:12px !important;
    line-height:1.35 !important;
}


/* ==========================================================
   5. PRODUCT TITLE
========================================================== */

ul.products li.product .woocommerce-loop-product__title{
    display:-webkit-box !important;

    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    min-height:2.6em !important;
    max-height:2.6em !important;

    margin:0 0 9px !important;
    padding:0 !important;

    line-height:1.3 !important;
}


/* ==========================================================
   6. PRICE
========================================================== */

ul.products li.product .price{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:4px !important;

    min-height:2.2em !important;

    margin:auto 0 10px !important;
    padding:0 !important;

    line-height:1.35 !important;
}


ul.products li.product .price del,
ul.products li.product .price ins{
    margin:0 !important;
    padding:0 !important;
}


ul.products li.product .price ins{
    text-decoration:none !important;
}


/* ==========================================================
   7. ADD TO CART BUTTON
========================================================== */

ul.products li.product .button,
ul.products li.product .added_to_cart{
    width:100% !important;
    min-height:42px !important;

    margin-top:auto !important;
    margin-bottom:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;
}


/* ==========================================================
   8. CENTRAL DISCOUNT BADGE
   ONLY FOR PRODUCT CARDS
========================================================== */

ul.products li.product .hemritu-loop-discount-badge{
    position:absolute !important;

    top:10px !important;
    left:10px !important;
    right:auto !important;
    bottom:auto !important;

    z-index:20 !important;

    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#f2a900 !important;
    color:#fff !important;

    font-size:9px !important;
    font-weight:700 !important;
    line-height:1.05 !important;

    text-align:center !important;

    border:0 !important;
    border-radius:50% !important;

    box-sizing:border-box !important;

    transform:none !important;
}


/* ==========================================================
   9. HIDE DEFAULT WOOCOMMERCE / ASTRA SALE BADGES
   Central custom % OFF badge is used instead.
========================================================== */

ul.products li.product .onsale,
ul.products li.product .ast-onsale-card{
    display:none !important;
}


/* ==========================================================
   10. HIDE ASTRA QUICK CART / IMAGE BAG BUTTON
========================================================== */

ul.products li.product .ast-on-card-button{
    display:none !important;
}


/* ==========================================================
   11. PRODUCT GROUP / CAMPAIGN BADGE
========================================================== */

ul.products li.product .hemritu-product-group-badge{
    position:absolute !important;

    right:7px !important;
    bottom:6px !important;

    left:auto !important;
    top:auto !important;

    z-index:20 !important;

    display:inline-block !important;

    width:auto !important;

    margin:0 !important;
    padding:4px 6px !important;

    background:#111827 !important;
    color:#fff !important;

    font-size:8px !important;
    font-weight:700 !important;
    line-height:1 !important;

    white-space:nowrap !important;
    text-transform:uppercase !important;

    border-radius:2px !important;

    transform:none !important;
}


/* ==========================================================
   12. SINGLE PRODUCT RECOMMENDATION GRID
   Only the GRID is section-specific.
   Card design still comes from universal rules above.
========================================================== */

body.single-product
.hemritu-product-section
ul.products{
    display:grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap:20px !important;

    align-items:stretch !important;
}


/* ==========================================================
   13. RECOMMENDATION SECTION HEADING
========================================================== */

.hemritu-group-products
.hemritu-more-section-heading{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    width:100%;

    margin:0 0 30px;
}


.hemritu-group-products
.hemritu-more-section-heading
.hemritu-section-title{
    margin:0 !important;
    padding:0 !important;

    font-size:
        clamp(18px, 2.2vw, 32px) !important;

    line-height:1.2 !important;
    font-weight:600;

    text-align:center;
    white-space:nowrap;
}


.hemritu-group-products
.hemritu-heading-line{
    width:80px;
    height:1px;

    background:#c8942f;
}


.hemritu-group-products
.hemritu-heading-flower{
    color:#d99a28;

    font-size:22px;
    line-height:1;
}


/* ==========================================================
   14. DESKTOP HOVER EFFECT
========================================================== */

@media (min-width:768px){

    ul.products li.product:hover{
        transform:translateY(-3px) !important;

        box-shadow:
            0 5px 10px rgba(0,0,0,.08),
            0 10px 20px rgba(0,0,0,.10) !important;
    }

}


/* ==========================================================
   15. MOBILE
========================================================== */

@media (max-width:767px){

    ul.products li.product{
        padding:6px 6px 10px !important;
    }


    ul.products li.product .ast-woo-product-category,
    ul.products li.product .ast-woo-shop-product-description,
    ul.products li.product .hemritu-product-category{
        margin-bottom:6px !important;

        font-size:11px !important;
    }


    ul.products li.product .woocommerce-loop-product__title{
        margin-bottom:8px !important;
    }


    ul.products li.product .price{
        margin-bottom:9px !important;
    }


    ul.products li.product .button,
    ul.products li.product .added_to_cart{
        min-height:40px !important;
    }


    ul.products li.product .hemritu-loop-discount-badge{
        top:8px !important;
        left:8px !important;

        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        min-height:34px !important;

        font-size:7px !important;
    }


    body.single-product
    .hemritu-product-section
    ul.products{
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:14px !important;
    }

}


/* ==========================================================
   16. PRODUCT ALREADY IN CART — DISABLED STATE
========================================================== */

.hemritu-product-in-cart{
    pointer-events:none !important;
    cursor:default !important;
    opacity:1 !important;
}


/* Single Product Main Add To Cart Button */

.single_add_to_cart_button.hemritu-single-added-button{
    pointer-events:none !important;
    cursor:default !important;
    opacity:1 !important;

    background:#111 !important;
    color:#fff !important;
}


a.added_to_cart.wc-forward{
    display:none !important;
}