:root{
  --qb-yellow:#FFC900;
  --qb-yellow-dark:#E8B400;
  --qb-green:#0C831F;
  --qb-green-dark:#095e16;
  --qb-orange:#FF5200;
  --qb-ink:#1C1C1C;
  --qb-gray:#6b7280;
  --qb-bg:#F7F7F7;
  --qb-card:#FFFFFF;
  --qb-border:#EDEDED;
  --radius:14px;
}
 :root {
            --primary-color: #4CAF50; /* Grocery Green */
            --secondary-color: #ff5722;
        }
 .qb-hero{padding:22px 0 6px;}
.qb-hero-slide{
  border-radius:20px;
  min-height:230px;
  padding:34px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.qb-hero-slide.s1{background:linear-gradient(120deg,#0C831F 0%,#1EA83C 60%,#57C76A 100%);}
.qb-hero-slide.s2{background:linear-gradient(120deg,#B8860B 0%,#E8B400 60%,#FFD94D 100%);}
.qb-hero-slide.s3{background:linear-gradient(120deg,#7A1FA2 0%,#A93FD1 60%,#D07BEF 100%);}
.qb-hero-slide h2{font-weight:800;font-size:2rem;max-width:60%;}
.qb-hero-slide p{opacity:.95;font-size:.95rem;}
@media(max-width:576px){
    .qb-hero-slide h2{font-weight:800;font-size:1.5rem;max-width:100%;}
    .qb-hero-slide p{opacity:.95;font-size:.75rem;}
}
.qb-hero-slide .qb-hero-cta{
  background:#fff;color:var(--qb-ink);font-weight:700;border-radius:10px;
  padding:10px 22px;width:fit-content;font-size:.88rem;
}
.qb-hero-deco{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:6rem;opacity:.35;
}
.carousel-indicators [data-bs-target]{background:#fff;}

/* ===== Page header banner (for shop/cart/checkout/deals/contact) ===== */
.qb-page-banner{
  background:linear-gradient(120deg,#0C831F,#1EA83C);
  border-radius:18px;color:#fff;padding:28px 34px;margin:20px 0;
}
.qb-page-banner h2{font-weight:800;font-size:1.6rem;margin:0 0 4px;}
.qb-page-banner .qb-crumb{font-size:.82rem;opacity:.9;}
.qb-page-banner .qb-crumb a{color:#fff;text-decoration:underline;}

 
 /* Section 1: Top Promo Blocks (Custom Colors based on description) */
        .promo-card {
            color: white;
            padding: 20px;
            border-radius: 8px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: transform 0.2s;
        }
        .promo-card:hover {
            transform: translateY(-3px);
        }
        .bg-purple { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); }
        .bg-blue { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }
        .bg-red { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); }
        .bg-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
        
        .promo-btn {
            background: white;
            color: inherit;
            border: none;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 0.8rem;
            text-transform: uppercase;
            align-self: flex-start;
            margin-top: 10px;
        }

        /* Section 2: Shop by Category (Small Grid) */
        .category-item {
            text-align: center;
            cursor: pointer;
            padding: 10px;
        }
        .category-item img {
               width: 80px;
    height: 80px;
            object-fit: cover;
            border-radius: 50%; /* Circle images */
            margin-bottom: 5px;
        }
        .category-item h6 {
            font-size: 0.85rem;
            margin: 0;
            color: #333;
        }

        /* Section 3: Detailed Categories Grid */
        .detail-cat-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s;
            margin-bottom: 20px;
        }
        .detail-cat-card:hover {
            transform: scale(1.02);
        }
        .detail-cat-card img {
            width: 100%;
            height: 120px; /* Fixed height for consistency */
            object-fit: cover;
        }
        .detail-cat-card .card-body {
            padding: 10px;
            text-align: center;
        }
        .detail-cat-card .card-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin: 0;
        }

        /* Product Cards Styling */
        .product-card {
            border: 1px solid #eee;
            border-radius: 8px;
            background: white;
            position: relative;
            padding: 10px;
            transition: box-shadow 0.2s;
            height: 100%;
        }
        .product-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .discount-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #ff5722;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: bold;
            z-index: 2;
        }
        .delivery-badge {
            background: #e8f5e9;
            color: #2e7d32;
            font-size: 0.65rem;
            padding: 2px 5px;
            border-radius: 3px;
            display: inline-block;
            margin-bottom: 5px;
        }
        .product-img {
            width: 100%;
            height: 140px;
            object-fit: contain; /* Product image fully visible */
            margin-bottom: 10px;
        }
        .product-name {
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .product-qty {
            font-size: 0.75rem;
            color: #888;
            margin-bottom: 5px;
        }
        .price-section {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        .current-price {
            font-weight: bold;
            font-size: 1rem;
        }
        .old-price {
            text-decoration: line-through;
            color: #999;
            font-size: 0.85rem;
        }
        .btn-add {
            width: 100%;
            border: 1px solid var(--primary-color);
            background: white;
            color: var(--primary-color);
            font-weight: 600;
            padding: 5px;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .btn-add:hover {
            background: var(--primary-color);
            color: white;
        }

        /* Section Titles */
        .section-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #333;
            border-left: 4px solid var(--primary-color);
            padding-left: 10px;
        }