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

/* Product Grid */
.product-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

/* Horizontal Product Slider */
.product-slider{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.product-slider::-webkit-scrollbar{
    display:none;
}

.product-slider .product-card{
    flex:0 0 180px;
}

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

.product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:300px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:12px;

    overflow:hidden;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 3px 12px rgba(0,0,0,.06);

    will-change:transform;

    backface-visibility:hidden;

    animation:cardFade .28s ease;

}

.product-card:hover{

    transform:translateY(-4px);

    box-shadow:0 14px 28px rgba(0,0,0,.08);

    border-color:#d9f2df;

}

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

.discount{

    position:absolute;

    top:10px;

    left:10px;

    z-index:20;

    background:#16a34a;

    color:#fff;

    padding:4px 8px;

    border-radius:20px;

    font-size:10px;

    font-weight:700;

}

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

.wishlist-btn{

    position:absolute;

    top:10px;

    right:10px;

    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:20;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

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

.wishlist-btn:hover{

    transform:scale(1.08);

}

.wishlist-btn i{

    font-size:17px;

    color:#888;

}

.wishlist-btn.active i{

    color:#ff3b5c;

}
/* ==========================================
   IMAGE BOX
========================================== */

.image-box{

    position:relative;

    width:100%;

    aspect-ratio:1/1;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:10px;

    overflow:hidden;

}

.image-box img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.25s;

    user-select:none;

    -webkit-user-drag:none;

}

.product-card:hover .image-box img{

    transform:scale(1.05);

}

/* ==========================================
   FLOATING CART
========================================== */
.floating-cart-btn{

    position:absolute;

    right:10px;

    bottom:10px;

    z-index:30;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

    pointer-events:auto;

}
/* ==========================================
   ADD BUTTON
========================================== */

.add-btn{

    width:38px;

    height:38px;

    border:none;

    border-radius:12px;

    background:#16a34a;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(22,163,74,.28);

    transition:.25s;

}

.add-btn:hover{

    transform:scale(1.08);

}

.add-btn i{

    font-size:22px;

    color:#fff;

}

.add-btn span{

    display:none;

}

/* ==========================================
   QUANTITY CONTROL
========================================== */

.quantity-control{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:88px;

    height:38px;

    background:#16a34a;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(22,163,74,.28);

    transition:.25s;

}

.quantity-control button{

    width:28px;

    height:38px;

    border:none;

    background:transparent;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

}

.quantity-control button i{

    font-size:16px;

}

.quantity-control span{

    flex:1;

    text-align:center;

    color:#fff;

    font-size:13px;

    font-weight:700;

}

/* ==========================================
   DELIVERY TAG
========================================== */

.delivery-tag{

    display:inline-flex;

    align-items:center;

    gap:4px;

    width:max-content;

    padding:4px 8px;

    margin-bottom:6px;

    border-radius:20px;

    background:#eefbf2;

    color:#16a34a;

    font-size:11px;

    font-weight:700;

}

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

.product-card h4{

    width:100%;

    margin:4px 0;

    font-size:13px;

    font-weight:600;

    line-height:18px;

    color:#222;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

    min-height:36px;

}

/* ==========================================
   WEIGHT CHIP
========================================== */

.weight-chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:4px 10px;

    margin:4px 0;

    border-radius:20px;

    background:#f3f4f6;

    color:#666;

    font-size:11px;

}

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

.rating-row{

    display:flex;

    align-items:center;

    gap:5px;

    margin:4px 0;

    font-size:12px;

    color:#555;

    font-weight:600;

}

.rating-row i{

    color:#f59e0b;

}

.rating-row small{

    color:#888;

    font-weight:500;

}

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

.price-box{

    display:flex;

    align-items:center;

    gap:6px;

    margin-top:12px;

}

.price{

    font-size:18px;

    font-weight:700;

    color:#111827;

}

.old-price{

    font-size:13px;

    color:#9ca3af;

    text-decoration:line-through;

}

/* ==========================================
   OUT OF STOCK
========================================== */

.out-stock-btn{

    width:72px;

    height:38px;

    border:none;

    border-radius:12px;

    background:#e5e7eb;

    color:#666;

    font-size:12px;

    font-weight:600;

    cursor:not-allowed;

}



@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   HOVER EFFECTS
========================================== */

.product-card:hover .add-btn{

    transform:scale(1.08);

}





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

@media (max-width:480px){
.product-grid{

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

    gap:12px;

}

.product-slider{

    gap:12px;

}

.product-slider .product-card{

    flex:0 0 170px;

}

    .product-card{

        padding:10px;

        border-radius:16px;

    }

   .image-box{

    aspect-ratio:1/1;

}

.image-box img{

    width:100%;

    height:100%;

}
    .discount{

        font-size:9px;

        padding:3px 6px;

    }

    .wishlist-btn{

        width:28px;

        height:28px;

    }

    .wishlist-btn i{

        font-size:15px;

    }

    .floating-cart-btn{

    right:8px;

    bottom:8px;

}

    .add-btn{

        width:34px;

        height:34px;

    }

    .add-btn i{

        font-size:20px;

    }

    .quantity-control{

        width:80px;

        height:34px;

    }

    .quantity-control button{

        height:34px;

    }

    .price{

        font-size:16px;

    }

    .old-price{

        font-size:11px;

    }

    .product-card h4{

        font-size:12px;

        min-height:34px;

    }

    .weight-chip{

        font-size:10px;

    }

    .delivery-tag{

        font-size:10px;

    }

    .rating-row{

        font-size:11px;

    }

}




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

.wishlist-btn.active{

    background:#fff0f3;

}

.wishlist-btn.active i{

    color:#ff3b5c;

}

/* ==========================================
   ADD BUTTON ACTIVE
========================================== */

.add-btn:active{

    transform:scale(.95);

}

.quantity-control button:active{

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

}

/* ==========================================
   OUT OF STOCK
========================================== */

.product-card.out{

    opacity:.75;

}

.product-card.out img{

    filter:grayscale(100%);

}



/* ==========================================
   FOCUS
========================================== */

button:focus{
    outline:none;
}

button:focus-visible{
    outline:2px solid #16a34a;
    outline-offset:2px;
}