/* =====================================================
   PREMIUM QUICK COMMERCE UI
   NUTS WORLD DRYFRUITS & KIRANA
   Ultra Modern Professional Style
===================================================== */

:root{

    /* Brand Colors */
    --primary:#6E00FF;
    --primary-dark:#5200CC;
    --primary-light:#F4ECFF;

    --success:#00B761;
    --danger:#FF4D4F;

    --bg:#F6F7FB;
    --card:#FFFFFF;

    --text:#111827;
    --text-light:#6B7280;

    --border:#ECEEF4;

    --gold:#C89B3C;
    --soft-gold:#FFF8E8;

    /* Effects */
    --radius:22px;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.04);
    --shadow-md:0 8px 24px rgba(17,24,39,0.08);
    --shadow-lg:0 16px 40px rgba(110,0,255,0.14);

    --transition:all 0.28s ease;
}

/* =====================================================
   GLOBAL
===================================================== */

*{
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    background:linear-gradient(to bottom,#FAFAFC,#F5F6FA);
    font-family:'Poppins',sans-serif;
    color:var(--text);
    margin:0;
    padding:0;
}

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

.sh-product-card{

    position:relative;
    overflow:hidden;

    background:rgba(255,255,255,0.95);

    border:1px solid rgba(255,255,255,0.6) !important;

    backdrop-filter:blur(18px);

    border-radius:24px !important;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);
}

/* Hover Effect */

.sh-product-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08),
    0 20px 45px rgba(110,0,255,0.12);

    border-color:#E7DAFF !important;
}

/* Premium Glow Border */

.sh-product-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(110,0,255,0.35),
        rgba(255,255,255,0),
        rgba(0,183,97,0.25)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    pointer-events:none;
}

/* Product Image */

.sh-product-card img{

    transition:0.45s ease;
}

.sh-product-card:hover img{

    transform:scale(1.06);
}

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

.pr-card-content{

    padding:14px !important;
}

/* Product Name */

.sh-product-card h3,
.sh-product-card .product-title{

    color:var(--text);

    font-size:15px;

    font-weight:700;

    line-height:22px;

    letter-spacing:0.1px;

    margin-top:10px;
}

/* Price */

.sh-product-card .price{

    font-size:20px;

    font-weight:800;

    color:var(--text);
}

/* MRP */

.sh-product-card .mrp{

    font-size:13px;

    color:#9CA3AF;

    text-decoration:line-through;
}

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

.sh-product-card-discount-tag{

    background:linear-gradient(
        135deg,
        #FF5A5F,
        #FF2D55
    ) !important;

    color:#fff !important;

    font-size:12px !important;

    font-weight:700 !important;

    padding:7px 12px !important;

    border-radius:0 0 16px 0 !important;

    top:0 !important;
    left:0 !important;
    right:auto !important;

    letter-spacing:0.3px;

    box-shadow:0 5px 15px rgba(255,45,85,0.25);
}

/* Small Discount Badge */

.sh-product-discount-tag{

    background:#ECFFF5 !important;

    color:var(--success) !important;

    border-radius:50px !important;

    padding:4px 10px !important;

    font-size:12px !important;

    font-weight:700 !important;
}

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

.sh-solid-button{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    ) !important;

    border:none !important;

    color:#fff !important;

    border-radius:14px !important;

    font-weight:700 !important;

    font-size:14px !important;

    letter-spacing:0.2px;

    transition:var(--transition);

    box-shadow:
    0 6px 18px rgba(110,0,255,0.22);
}

/* Button Hover */

.sh-solid-button:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 24px rgba(110,0,255,0.28);
}

/* Shine Effect */

.sh-solid-button::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );

    transition:0.7s;
}

.sh-solid-button:hover::after{

    left:120%;
}

/* =====================================================
   PLUS MINUS BUTTON
===================================================== */

.sh-product-plus-minus-button{

    background:#fff !important;

    border:1.5px solid #D9C7FF !important;

    color:var(--primary) !important;

    border-radius:14px !important;

    font-weight:700 !important;

    transition:var(--transition);
}

.sh-product-plus-minus-button:hover{

    background:var(--primary-light) !important;

    border-color:var(--primary) !important;
}

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

.sh-category-card>a>div{

    position:relative;

    overflow:hidden;

    border-radius:22px !important;

    padding:14px !important;

    border:1px solid #F0F0F4 !important;

    transition:var(--transition);

    background:#fff;

    text-align:center;

    box-shadow:0 2px 8px rgba(0,0,0,0.03);
}

/* Premium Background Styles */

.sh-category-card:nth-child(4n-3)>a>div{
    background:linear-gradient(135deg,#F5EDFF,#FCFAFF) !important;
}

.sh-category-card:nth-child(4n-2)>a>div{
    background:linear-gradient(135deg,#FFF4E5,#FFFDF7) !important;
}

.sh-category-card:nth-child(4n-1)>a>div{
    background:linear-gradient(135deg,#ECFFF5,#FAFFFC) !important;
}

.sh-category-card:nth-child(4n)>a>div{
    background:linear-gradient(135deg,#FFF0F3,#FFF9FA) !important;
}

/* Category Hover */

.sh-category-card>a>div:hover{

    transform:translateY(-5px);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);

    border-color:#E5D5FF !important;
}

/* Category Image */

.sh-category-card img{

    transition:0.4s ease;
}

.sh-category-card:hover img{

    transform:scale(1.08);
}

/* Category Text */

.sh-category-card>a>div>p{

    margin-top:10px;

    color:var(--text);

    font-size:14px;

    font-weight:700;

    line-height:20px;

    letter-spacing:0.1px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:40px;
}

/* =====================================================
   SEARCH BAR
===================================================== */

.sh-search-bar,
.sh-header-search{

    background:rgba(255,255,255,0.85) !important;

    backdrop-filter:blur(12px);

    border:1px solid #ECEEF5 !important;

    border-radius:18px !important;

    box-shadow:0 4px 15px rgba(0,0,0,0.04);

    transition:var(--transition);
}

.sh-search-bar:focus,
.sh-header-search:focus{

    border-color:#D8BFFF !important;

    box-shadow:
    0 0 0 4px rgba(110,0,255,0.08);
}

/* =====================================================
   SECTION TITLE
===================================================== */

.sh-row-title{

    font-size:22px;

    font-weight:800;

    color:var(--text);

    letter-spacing:-0.3px;
}

.sh-row-title-divider{
    display:none !important;
}

/* =====================================================
   DELIVERY BADGE
===================================================== */

.delivery-badge{

    display:inline-flex;

    align-items:center;

    gap:5px;

    background:#ECFFF5;

    color:var(--success);

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;
}

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

.pr-long-card{

    overflow:hidden;

    border-radius:22px !important;
}

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

@media only screen and (max-width:600px){

    .sh-product-card{
        border-radius:18px !important;
    }

    .sh-category-card>a>div{
        border-radius:18px !important;
        padding:10px !important;
    }

    .sh-category-card>a>div>p{
        font-size:13px;
        line-height:18px;
        min-height:36px;
    }

    .sh-solid-button{
        font-size:13px !important;
        padding:8px 14px !important;
    }

    .sh-row-title{
        font-size:18px;
    }

    .pr-card-content{
        padding:12px !important;
    }
}