/* ==================================================
        SAIRAM HERBALS — FEATURED PRODUCTS
        PREMIUM RESPONSIVE PRODUCT CARDS
================================================== */

.featured-products{

    --primary:#2E7D32;
    --primary-dark:#1B5E20;
    --primary-soft:#EAF6EC;

    --gold:#B89555;

    --bg:#F8FBF8;
    --card:#FFFFFF;

    --heading:#17251D;
    --text:#64748B;
    --muted:#94A3B8;

    --border:#E5ECE7;

    padding:100px 0;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FBF8 100%
        );

}


/* ==================================================
        CONTAINER
================================================== */

.featured-products .container{

    width:min(1240px, calc(100% - 40px));

    margin:0 auto;

}


/* ==================================================
        GRID
================================================== */

.featured-grid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:24px;

    align-items:stretch;

}


/* ==================================================
        CARD
================================================== */

.featured-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    height:100%;

    overflow:hidden;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.045);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.featured-card:hover{

    transform:translateY(-6px);

    border-color:#CFE3D3;

    box-shadow:
        0 20px 45px rgba(46,125,50,.10);

}


/* ==================================================
        DISCOUNT
================================================== */

.discount-badge{

    position:absolute;

    top:14px;
    left:14px;

    z-index:20;

    padding:6px 10px;

    border-radius:8px;

    background:#E5484D;

    color:#fff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.4px;

    box-shadow:
        0 5px 14px rgba(229,72,77,.20);

}


/* ==================================================
        WISHLIST
================================================== */

.wishlist-form{

    position:absolute;

    top:14px;
    right:14px;

    z-index:25;

}


.wishlist-btn{

    width:40px;
    height:40px;

    display:flex;

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

    padding:0;

    border:1px solid rgba(226,232,240,.9);

    border-radius:50%;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(10px);

    color:#64748B;

    cursor:pointer;

    box-shadow:
        0 6px 18px rgba(15,23,42,.08);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;

}


.wishlist-btn i{

    font-size:20px;

}


.wishlist-btn:hover{

    transform:scale(1.07);

    color:#E5484D;

}


.wishlist-btn:has(.bxs-heart){

    background:#E5484D;

    border-color:#E5484D;

    color:#fff;

}


/* ==================================================
        IMAGE
================================================== */

.featured-image{

    position:relative;

    display:flex;

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

    height:275px;

    padding:20px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #FCFDFC,
            #F2F7F3
        );

}


.featured-image::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(46,125,50,.07),
            transparent 70%
        );

    pointer-events:none;

}


.featured-image img{

    position:relative;

    z-index:2;

    width:100%;
    height:100%;

    object-fit:contain;

    transform:scale(1);

    transition:
        transform .5s
        cubic-bezier(.2,.8,.2,1);

}


.featured-card:hover
.featured-image img{

    transform:scale(1.055);

}


/* ==================================================
        CONTENT
================================================== */

.featured-content{

    display:flex;

    flex-direction:column;

    flex:1;

    min-width:0;

    padding:20px;

}


/* ==================================================
        CATEGORY
================================================== */

.product-chip{

    display:inline-flex;

    align-self:flex-start;

    max-width:100%;

    padding:5px 10px;

    margin-bottom:11px;

    overflow:hidden;

    border-radius:7px;

    background:var(--primary-soft);

    color:var(--primary);

    font-size:10px;

    font-weight:800;

    letter-spacing:.3px;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/* ==================================================
        PRODUCT NAME
================================================== */

.featured-content h3{

    height:auto;

    min-height:46px;

    margin:0;

    font-size:17px;

    line-height:1.35;

    font-weight:750;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


.featured-content h3 a{

    color:var(--heading);

    text-decoration:none;

    transition:color .2s ease;

}


.featured-content h3 a:hover{

    color:var(--primary);

}


/* ==================================================
        BRAND
================================================== */

.brand-name{

    margin:7px 0 14px;

    overflow:hidden;

    color:var(--text);

    font-size:12px;

    line-height:1.4;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/* ==================================================
        RATING
================================================== */

.featured-rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:13px;

}


.stars{

    color:#F59E0B;

    font-size:13px;

    letter-spacing:1px;

    line-height:1;

}


.featured-rating span{

    color:#64748B;

    font-size:11px;

    font-weight:700;

}


/* ==================================================
        PRICE
================================================== */

.featured-price{

    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:9px;

    margin-bottom:10px;

}


.new-price{

    color:var(--primary);

    font-size:21px;

    line-height:1;

    font-weight:850;

}


.old-price{

    color:#94A3B8;

    font-size:12px;

    text-decoration:line-through;

}


/* ==================================================
        STOCK
================================================== */

.stock-status{

    min-height:22px;

    margin-bottom:15px;

}


.stock-status span{

    display:inline-flex;

    align-items:center;

    gap:5px;

    font-size:10px;

    font-weight:700;

}


.in-stock{

    color:#15803D;

}


.low-stock{

    color:#D97706;

}


.out-stock{

    color:#DC2626;

}


/* ==================================================
        BUTTONS
================================================== */

.featured-buttons{

    display:grid;

    grid-template-columns:minmax(0,1fr) auto;

    gap:8px;

    margin-top:auto;

}


.view-product-btn,
.cart-btn{

    min-width:0;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    border-radius:11px;

    font-size:12px;

    font-weight:750;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


.view-product-btn{

    padding:0 12px;

    background:#F1F6F2;

    color:var(--primary);

    text-decoration:none;

}


.view-product-btn:hover{

    background:var(--primary);

    color:#fff;

}


.cart-btn{

    padding:0 15px;

    border:0;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

}


.cart-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-1px);

}


.out-stock-btn{

    background:#CBD5E1;

    cursor:not-allowed;

    transform:none !important;

}


/* ==================================================
        LARGE TABLET
================================================== */

@media(max-width:1180px){

    .featured-products .container{

        width:min(100% - 32px,1000px);

    }

    .featured-grid{

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:20px;

    }

}


/* ==================================================
        TABLET
================================================== */

@media(max-width:900px){

    .featured-products{

        padding:80px 0;

    }


    .featured-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:20px;

    }


    .featured-image{

        height:250px;

    }

}


/* ==================================================
        MOBILE
================================================== */

@media(max-width:600px){

    .featured-products{

        padding:65px 0;

    }


    .featured-products .container{

        width:calc(100% - 24px);

    }


    .featured-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;

    }


    .featured-card{

        border-radius:17px;

    }


    .featured-image{

        height:185px;

        padding:12px;

    }


    .discount-badge{

        top:9px;
        left:9px;

        padding:5px 7px;

        border-radius:6px;

        font-size:8px;

    }


    .wishlist-form{

        top:9px;
        right:9px;

    }


    .wishlist-btn{

        width:34px;
        height:34px;

    }


    .wishlist-btn i{

        font-size:17px;

    }


    .featured-content{

        padding:13px;

    }


    .product-chip{

        max-width:100%;

        padding:4px 7px;

        margin-bottom:8px;

        font-size:8px;

    }


    .featured-content h3{

        min-height:38px;

        font-size:13px;

        line-height:1.4;

    }


    .brand-name{

        margin:5px 0 10px;

        font-size:10px;

    }


    .featured-rating{

        gap:5px;

        margin-bottom:10px;

    }


    .stars{

        font-size:10px;

        letter-spacing:.5px;

    }


    .featured-rating span{

        font-size:9px;

    }


    .featured-price{

        gap:6px;

        margin-bottom:8px;

    }


    .new-price{

        font-size:16px;

    }


    .old-price{

        font-size:9px;

    }


    .stock-status{

        min-height:18px;

        margin-bottom:10px;

    }


    .stock-status span{

        font-size:8px;

    }


    .featured-buttons{

        gap:6px;

    }


    .view-product-btn,
    .cart-btn{

        height:38px;

        border-radius:9px;

        font-size:9px;

    }


    .view-product-btn{

        padding:0 7px;

    }


    .cart-btn{

        padding:0 9px;

    }

}


/* ==================================================
        VERY SMALL PHONES
================================================== */

@media(max-width:380px){

    .featured-products .container{

        width:calc(100% - 18px);

    }


    .featured-grid{

        gap:9px;

    }


    .featured-image{

        height:165px;

        padding:10px;

    }


    .featured-content{

        padding:11px;

    }


    .featured-content h3{

        font-size:12px;

    }


    .new-price{

        font-size:15px;

    }


    .featured-buttons{

        grid-template-columns:1fr;

    }


    .view-product-btn,
    .cart-btn{

        width:100%;

    }

}


/* ==================================================
        TOUCH DEVICES
================================================== */

@media(hover:none){

    .featured-card:hover{

        transform:none;

        box-shadow:
            0 10px 30px rgba(15,23,42,.045);

    }


    .featured-card:hover
    .featured-image img{

        transform:scale(1);

    }

}