/* TOP HEADER Neon Purple */
#app-header,
#app-header .app-bar-main,
#app-header.MuiAppBar-root,
header.app-bar,
.app-bar.mobile-app-bar.sh-header-main {
    background: linear-gradient(90deg, #9c27ff, #6a00ff) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Remove any background from toolbar inside header */
#app-header .MuiToolbar-root {
    background: transparent !important;
    color: #ffffff !important;
}

/* Remove spacing below header */
#app-header {
    margin-bottom: 0 !important;
}
#app-header + * {
    margin-top: 0 !important;
}

/* ======= MaaFlash Grid (Desktop 6 / Mobile 4) ======= */

/* Force grid layout inside Shoopy’s wrapper */
.cat-section .grid,
.cat-section .sh-grid,
.cat-section .sh-banner-collection-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-left: 1px solid rgba(130, 12, 240, 0.914);
  border-top: 1px solid rgba(131, 16, 238, 0.949);
  box-sizing: border-box;
}

/* Each card (restaurant item) */
.cat-section .cat-card,
.sh-banner-collection-card {
  border-right: 1px solid rgba(125, 26, 219, 0.903);
  border-bottom: 1px solid rgba(123, 28, 213, 0.951);
  background: #ffffff;
  transition: all 0.3s ease;
  text-align: center;
  padding: 6px;
  box-sizing: border-box;
}

/* Hover animation */
.cat-section .cat-card:hover,
.sh-banner-collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(155, 48, 255, 0.25);
}

/* Logo / Image styling */
.cat-section .cat-card img,
.sh-banner-collection-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
}
.cat-section .cat-card:hover img,
.sh-banner-collection-card:hover img {
  transform: scale(1.05);
}

/* Text styling */
.cat-section .cat-card h3,
.sh-banner-collection-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #6a0dad;
  margin: 8px 0;
  text-transform: capitalize;
}

/* ✅ Mobile: 4 per row */
@media (max-width: 768px) {
  .cat-section .grid,
  .cat-section .sh-grid,
  .cat-section .sh-banner-collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .cat-section .cat-card,
  .sh-banner-collection-card {
    padding: 4px;
  }

  .cat-section .cat-card img,
  .sh-banner-collection-card img {
    border-radius: 8px;
  }

  .cat-section .cat-card h3,
  .sh-banner-collection-card h3 {
    font-size: 12px;
  }
}

/* ===== MaaFlash Purple Theme + White Text Fix ===== */

/* Header & Footer Background */
header,
footer,
.navbar,
.bottom-nav,
.MuiAppBar-root,
.MuiBottomNavigation-root {
  background-color: #6a0dad !important;
  color: #ffffff !important;
}

/* Make 'Delivery in 30 Minutes' text white */
header *:not(img),
.header-timer,
.delivery-text,
.header-subtitle {
  color: #ffffff !important;
}


/* Bottom Navigation (Home, Orders, Cart, Profile) */
.bottom-nav,
.MuiBottomNavigation-root {
  background-color: #6a0dad !important;
}

.bottom-nav a,
.bottom-nav span,
.bottom-nav .MuiBottomNavigationAction-label,
.MuiBottomNavigationAction-root {
  color: #ffffff !important;
  font-weight: 600;
}

/* Active Tab */
.bottom-nav .active,
.MuiBottomNavigationAction-root.Mui-selected {
  color: #ffffff !important;
  font-weight: 700;
}

/* Search Focus */
input:focus,
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #6a0dad !important;
}

/* Links */
a,
.MuiLink-root {
  color: #6a0dad !important;
}

/* Text accents */
strong,
h2,
h3,
h4,
p span {
  color: #6a0dad !important;
}

/* Hover Shadow */
.cat-section .cat-card:hover,
.sh-banner-collection-card:hover {
  box-shadow: 0 6px 14px rgba(106, 13, 173, 0.3) !important;
}
/* === MITHAI POTLAM ONLY — 3 cards per row, 2 rows === */

/* turn swiper row into grid for this section only */
.section.section-2 .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* 3 products per row */
.section.section-2 .swiper-slide.product-card {
    width: calc(33.33% - 6px) !important;
    margin: 0 !important;
}

/* show only first 6 products (2 rows) */
.section.section-2 .swiper-slide.product-card:nth-child(n+7) {
    display: none !important;
}

/* make product card slightly smaller height */
.section.section-2 .sh-product-card {
    padding: 6px !important;
}

.section.section-2 .pr-image-ctn {
    aspect-ratio: 1 !important;
    max-height: 95px !important;
}

.section.section-2 .pr-title.sh-product-card-name {
    font-size: 12px !important;
    min-height: 30px !important;
}

.section.section-2 .pr-sale-price.sh-product-card-price {
    font-size: 13px !important;
}

/************* SWIGGY STYLE — CLEAN — ONLY THIS SECTION *************/

/* Target ONLY this deal block */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) {

}

/* Section header bar */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .section-heading-container{
  background:linear-gradient(180deg,#ffffff,#e8f3ff);
  border:1px solid #e2e8f5;
  border-radius:16px;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

/* Heading text + check icon */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .section-heading{
  font-size:14px;
  font-weight:800;
  color:#1c1c1c;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .section-heading::before{
  content:"✔";
  color:#0a9c4a;
  font-size:16px;
  font-weight:900;
}

/* Yellow ₹5 badge */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .section-heading::after{
  content:" ₹5 ";
  background:#ffcd38;
  color:#000;
  font-weight:900;
  border-radius:6px;
  padding:3px 8px;
  font-size:12.5px;
  margin-left:6px;
}

/* View all button */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .section-heading-viewall{
  background:#fff;
  border:1px solid #d6d7dc;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  border-radius:10px;
  color:#1c1c1c;
}

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

/* Card base */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .sh-product-card{
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 26px rgba(16,24,40,.08);
}

/* Image container */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .sh-product-img{
  margin:14px 14px 8px;
  padding:10px;
  border-radius:20px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(2,6,23,.08);
}

/* NO floating badges */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .sh-product-img::before,
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .sh-product-img::after{
  display:none !important;
}

/* Veg icon before name */
.prod-collection-container.sh-prod-grid-collection-card:has(.section-heading-container a[href="/collections/6899de44e1484401c6106093"]) .sh-product-card-name{
  position:relative;
  font-weight:900;
  font-size:15px;
  color:#1f2a37;
  padding-left:22px;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.prod-collection-container.sh-prod-grid-collection-card .sh-product-card-name:before{
  content:""; position:absolute; left:0; top:2px;
  width:14px;height:14px;border-radius:4px;border:2px solid #22c55e;
}
.prod-collection-container.sh-prod-grid-collection-card .sh-product-card-name:after{
  content:""; position:absolute; left:4px; top:6px;
  width:6px;height:6px;border-radius:50%;background:#22c55e;
}

/* Price badge */
.prod-collection-container.sh-prod-grid-collection-card .sh-product-card-price{
  background:#ffcd38;
  padding:4px 10px;
  border-radius:10px;
  font-weight:900;
  font-size:14px;
  color:#111827;
}

/* MRP */
.prod-collection-container.sh-prod-grid-collection-card .sh-product-card-mrp{
  font-size:13px;
  color:#9aa3af;
  text-decoration:line-through;
}

/* REMOVE hover zoom & glow */
.prod-collection-container.sh-prod-grid-collection-card .sh-product-card:hover,
.prod-collection-container.sh-prod-grid-collection-card .sh-product-card:hover img,
.prod-collection-container.sh-prod-grid-collection-card .sh-product-plus-minus-button:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* Add button style */
.prod-collection-container.sh-prod-grid-collection-card .sh-product-plus-minus-button{
  border-radius:12px !important;
  border:1px solid #e5e7eb !important;
  font-weight:800;
  background:#fff !important;
  color:#6d28d9 !important;
}


... (your CSS continues above — kept exactly as you pasted it)
... (the file you pasted has been preserved; below are the Swiggy bottom-nav overrides)
  
/* ===========================================================
   SWIGGY-STYLE BOTTOM NAV OVERRIDES
   (White bar, grey baseline icons, orange active, dividers)
   This block intentionally uses strong specificity and !important
   so it overrides previous purple bottom-nav rules in your file.
   =========================================================== */

/* 1) Force white bottom-nav (override earlier purple/purple-gradient rules) */
html body .bottom-nav,
html body .MuiBottomNavigation-root,
html body footer.bottom-nav,
html body footer.MuiBottomNavigation-root {
  background: #ffffff !important;
  color: #9b9b9b !important;
  border-top: 1px solid #eeeeee !important;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.04) !important;
  height: 78px !important;
  padding: 10px 14px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  z-index: 9999 !important;
  background-image: none !important; /* remove gradient */
  background-color: #ffffff !important;
}

/* If your app uses other selectors for bottom nav, cover them too */
html body nav.bottom-nav,
html body .sh-bottom-nav-main,
html body .sh-bottom-nav,
html body .bottom-navigation,
html body .app-bottom-nav {
  background: #ffffff !important;
  color: #9b9b9b !important;
}

/* 2) Ensure any earlier "white icons" rules are neutralized — baseline grey */
html body .bottom-nav a,
html body .bottom-nav span,
html body .bottom-nav .nav-item,
html body .bottom-nav .MuiBottomNavigationAction-label,
html body .MuiBottomNavigationAction-root {
  color: #9b9b9b !important;
  font-weight: 600 !important;
}

/* 3) Bottom nav layout & items (use these classes in your markup) */
.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 78px !important;
  padding: 10px 14px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: #ffffff !important;
  border-top: 1px solid #eeeeee !important;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.04) !important;
  z-index: 9999 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Each nav item */
.bottom-nav .nav-item,
.bottom-navigation .nav-item,
.app-bottom-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 56px !important;
  max-width: 110px !important;
  color: #9b9b9b !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-align: center !important;
  transition: transform .18s ease, color .18s ease !important;
  cursor: pointer !important;
}

/* Icon SVGs inherit currentColor */
.bottom-nav .nav-item svg,
.bottom-nav .nav-item .icon,
.bottom-navigation .nav-item svg,
.app-bottom-nav .nav-item svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  color: #9b9b9b !important; /* baseline gray */
  transition: transform .18s ease, color .18s ease, filter .18s ease !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* If the icon uses filled circles (wheels), make them follow color */
.bottom-nav .nav-item svg circle,
.bottom-nav .nav-item .icon circle {
  fill: currentColor !important;
  stroke: none !important;
}

/* Divider between items */
.bottom-nav .divider {
  width: 1px !important;
  height: 34px !important;
  background: #e6e6e6 !important;
  margin: 0 8px !important;
  opacity: 1 !important;
}

/* Hover effect (desktop) */
.bottom-nav .nav-item:hover,
.bottom-navigation .nav-item:hover {
  color: #ff7a33 !important;
  transform: translateY(-3px) !important;
}
.bottom-nav .nav-item:hover svg,
.bottom-navigation .nav-item:hover svg {
  color: #ff7a33 !important;
  transform: translateY(-3px) scale(1.06) !important;
}

/* Active item: orange + raised */
.bottom-nav .nav-item.active,
.bottom-navigation .nav-item.active,
.app-bottom-nav .nav-item.active {
  color: #FF5B00 !important;
  transform: translateY(-6px) !important;
  font-weight: 700 !important;
}

/* Active icon style */
.bottom-nav .nav-item.active svg,
.bottom-navigation .nav-item.active svg,
.app-bottom-nav .nav-item.active svg {
  color: #FF5B00 !important;
  transform: scale(1.12) !important;
  filter: drop-shadow(0 6px 18px rgba(255,91,0,0.12)) !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* If any previous rules forced white icons, make sure unselected are grey */
.sh-bottom-nav-selected,
.sh-bottom-nav-selected svg,
.sh-bottom-nav-selected path {
  stroke: #ffffff !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}
/* But our bottom-nav (Swiggy style) must be white background + grey icons,
   so we ensure the concrete bottom-nav selector wins: */
body .bottom-nav .sh-bottom-nav-selected,
body .bottom-nav .sh-bottom-nav-selected svg,
body .bottom-nav .sh-bottom-nav-selected path {
  color: #9b9b9b !important;
  stroke: #9b9b9b !important;
  fill: #9b9b9b !important;
}

/* Ensure Mui-selected state doesn't re-apply purple/white */
.MuiBottomNavigationAction-root.Mui-selected,
.MuiBottomNavigation-root .Mui-selected,
.MuiBottomNavigation-root .Mui-selected svg {
  color: #FF5B00 !important;
  stroke: #FF5B00 !important;
  fill: none !important;
}

/* Keep labels readable when active */
.bottom-nav .nav-item.active span,
.bottom-navigation .nav-item.active span {
  color: #FF5B00 !important;
  transform: translateY(-4px) !important;
}

/* Mobile adjustments */
@media (max-width: 420px) {
  .bottom-nav,
  .bottom-navigation,
  .app-bottom-nav {
    height: 82px !important;
    padding: 12px 10px !important;
  }
  .bottom-nav .nav-item span,
  .bottom-nav .nav-item {
    font-size: 12px !important;
  }
  .bottom-nav .nav-item svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Extra safety: if some super-specific rule sets gradient on immediate footer, remove it */
footer.bottom-nav,
footer.MuiBottomNavigation-root,
nav.bottom-nav[style],
nav.bottom-nav[style] * {
  background-image: none !important;
  background: #ffffff !important;
  color: #9b9b9b !important;
}

/* Optional: small helper for accessible focus outline (keyboard users) */
.bottom-nav .nav-item:focus {
  outline: 3px solid rgba(255,91,0,0.14) !important;
  outline-offset: 4px !important;
}

/* End of Swiggy-style bottom-nav overrides */
/* Remove blue slider arrows / focus outlines / scroll highlights */
.swiper-button-next,
.swiper-button-prev {
    display: none !important;
}

.swiper-slide:focus,
.swiper-slide:active,
.swiper-wrapper:focus,
.swiper-wrapper:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove blue highlight from clickable areas */
*:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* FOOTER CONTAINER - Premium White UI */
.three-col-footer__footer,
.sh-footer-main {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 40px 20px !important;
    border-top: 1px solid #e5e7eb !important;
}

/* HEADINGS - Modern UI Style */
.three-col-footer__footer h2.footer-row-title {
    color: #111111 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    letter-spacing: 0.3px;
}

/* TEXT - Clean UI */
.three-col-footer__footer p,
.three-col-footer__footer a,
.three-col-footer__footer span,
.three-col-footer__footer strong {
    color: #333333 !important;
    font-size: 15px !important;
    font-weight: 500;
}

/* LINKS - Subtle hover effect */
.three-col-footer__footer a {
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
}
.three-col-footer__footer a:hover {
    color: #000000 !important;
    transform: translateX(2px);
}

/* ICONS - Modern Black */
.sh-footer-icon,
.three-col-footer__footer svg {
    fill: #000000 !important;
    color: #000000 !important;
    transition: transform 0.2s ease;
}
.policy-info-ctn:hover .sh-footer-icon,
.contact-info-ctn:hover .sh-footer-icon {
    transform: scale(1.15);
}

/* EACH ROW ITEM - Premium spacing */
.policy-info-ctn,
.three-col-footer__link {
    margin-bottom: 10px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ICON SPACING FIX */
.contact-info-ctn svg {
    margin-top: 6px !important;
}

/* MOBILE RESPONSIVE - Perfect UI */
@media (max-width: 768px) {
    .three-col-footer__footer {
        padding: 30px 16px !important;
    }
    .three-col-footer__footer h2.footer-row-title {
        font-size: 16px !important;
    }
    .three-col-footer__footer p,
    .three-col-footer__footer a {
        font-size: 14px !important;
    }
}
/* Swiggy-style promo strip CSS
   Paste this into your app's main CSS file.
   Designed to work when you can only edit CSS (no HTML changes).

   Usage:
   - Wrap the promo area with a container that has class `promo-strip`.
   - Inside create 4 (or more) children with class `promo-card`.
   - Each `promo-card` should contain an element with class `promo-icon` (img or div) and
     a text block with `.promo-title` and optional `.promo-sub`.

   Example HTML (for reference only, don't paste into CSS file):
   <div class="promo-strip">
     <div class="promo-card">
       <div class="promo-icon"><img src="..." alt=""/></div>
       <div class="promo-title">Get 65% OFF</div>
       <div class="promo-sub">Limited time</div>
     </div>
     <!-- repeat .promo-card x4 -->
   </div>
*/

:root{
  --promo-bg-1: #5d16c9; /* deep purple */
  --promo-bg-2: #7b2adf; /* lighter purple */
  --card-bg: #ffffff;
  --card-border: #ff6f00; /* orange accent */
  --card-radius: 26px;
  --card-padding: 18px;
  --card-gap: 16px;
  --text-title: #111827;
  --text-sub: #6b7280;
}

/* MAIN PROMO STRIP */
.promo-strip{
  width: 100%;
  box-sizing: border-box;
  padding: 20px; /* outer padding of the purple capsule */
  background: linear-gradient(90deg, var(--promo-bg-1), var(--promo-bg-2));
  border-radius: 40px; /* big pill shape */
  display: flex;
  gap: var(--card-gap);
  align-items: stretch;
  justify-content: space-between;
  -webkit-box-shadow: 0 10px 30px rgba(10,8,25,0.25);
  box-shadow: 0 10px 30px rgba(10,8,25,0.25);
  overflow: hidden; /* clip children nicely */
}

/* Each card */
.promo-card{
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  min-width: 0; /* help flex children shrink correctly */
  flex: 1 1 0; /* allow even distribution */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 3px solid transparent; /* space for the orange outline effect */
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* orange outer stroke using pseudo-element so the white card keeps padding */
.promo-card::before{
  content: "";
  position: absolute;
  inset: 0; /* cover full card */
  border-radius: calc(var(--card-radius) - 2px);
  padding: 2px; /* thickness of the orange stroke */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset;
  border: 2px solid var(--card-border);
}

/* Hover/active effect */
.promo-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 22px 38px rgba(11,7,40,0.28);
}

/* Icon area — similar to the rounded white area in the Swiggy example */
.promo-icon{
  width: 88px;
  height: 88px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #fff, #fbfbfb);
  box-shadow: 0 8px 16px rgba(18,16,40,0.06);
  overflow: hidden;
}
.promo-icon img{
  max-width: 78%;
  max-height: 78%;
  display: block;
}

/* Title and subtext */
.promo-title{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.05;
  color: var(--text-title);
  margin-bottom: 6px;
}
.promo-sub{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-sub);
}

/* small star accents like in the example */
.promo-card .accent-star{
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(20deg);
  background: radial-gradient(circle at 30% 30%, #ffd36b 0%, #ff9a3c 60%);
  border-radius: 2px;
  opacity: 0.95;
}
.promo-card .accent-star.one{ top: 14px; left: 16px; }
.promo-card .accent-star.two{ bottom: 12px; right: 16px; }

/* Responsive tweaks */
@media (max-width: 980px){
  .promo-strip{ padding: 14px; gap: 12px; border-radius: 28px; }
  .promo-icon{ width: 74px; height: 74px; }
  .promo-title{ font-size: 16px; }
}
@media (max-width: 720px){
  /* stack into 2x2 on small screens */
  .promo-strip{
    flex-wrap: wrap;
    gap: 12px;
  }
  .promo-card{ flex: 1 1 calc(50% - 12px); }
  .promo-card:nth-child(odd){ transform-origin: left center; }
}
@media (max-width: 420px){
  .promo-icon{ width: 64px; height: 64px; }
  .promo-title{ font-size: 14px; }
  .promo-card{ padding: 12px; border-radius: 20px; }
}

/* Accessibility: ensure good contrast for small devices */
.promo-title, .promo-sub{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Optional small glowing animation for icons (enable by adding .glow to .promo-icon) */
.promo-icon.glow{ animation: promo-glow 2.2s ease-in-out infinite; }
@keyframes promo-glow{
  0%{ box-shadow: 0 6px 18px rgba(255,111,0,0.06); transform: translateY(0); }
  50%{ box-shadow: 0 18px 36px rgba(255,111,0,0.10); transform: translateY(-3px); }
  100%{ box-shadow: 0 6px 18px rgba(255,111,0,0.06); transform: translateY(0); }
}

/* End of file */

/* TODAY DEAL Heading */
.sh-section-heading h2.section-heading {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333;
    letter-spacing: 0.5px;
}

/* View All button */
.section-heading-viewall {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ff6f00 !important;
}

/* Product Card Box */
.sh-product-card {
    border-radius: 18px !important;
    padding: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transition: all 0.25s ease-in-out !important;
}

/* Hover Lift Effect */
.sh-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}

/* Product Image Styling */
.sh-product-img img {
    border-radius: 16px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Discount Badge */
.sh-product-card-discount-tag {
    background: #ff3d00 !important;
    color: white !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
    font-weight: 600;
}

/* Product Title */
.sh-product-card-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222 !important;
}

/* Price Styling */
.sh-product-card-price {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #000 !important;
}

.sh-product-card-mrp {
    color: #888 !important;
    font-size: 14px !important;
}

/* ADD Button */
.sh-product-plus-minus-button {
    background: #ff6f00 !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 6px 0 !important;
    border: none !important;
    transition: 0.2s ease-in-out;
}

.sh-product-plus-minus-button:hover {
    background: #e86100 !important;
}

/* Swiper Card Spacing */
.swiper-slide {
    border-radius: 18px !important;
    padding-bottom: 10px;
}
.MuiTypography-root.MuiTypography-body1.shipping-options-mobile-time.mui-9l3uo3 {
  display: none !important;
}
body, body * {
    color: #000 !important;
}
/* Replace only the time text with "30 minutes" */
p.shipping-details-subheading.mui-9l3uo3 {
  font-size: 0; /* hide original text only */
}

p.shipping-details-subheading.mui-9l3uo3::before {
  content: "30 minutes";
  font-size: 14px; 
  font-weight: 500;
}
/* Zepto-style delivery time pill – ONLY this element */
p.shipping-details-subheading.mui-9l3uo3 {
  position: relative;
  font-size: 0;              /* hide original "Today, 12:30 AM" */
  display: inline-block;
}

/* New text + pill styling */
p.shipping-details-subheading.mui-9l3uo3::before {
  content: "30 minutes";     /* just the time text */
  font-size: 13px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;      /* rounded pill */
  background: #f6f6f6;       /* light grey like Zepto */
  color: #1c1c1c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Small green dot like food apps */
p.shipping-details-subheading.mui-9l3uo3::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1ba672;       /* Zepto-style green */
  display: inline-block;
}