/* ==========================================================================
   Restaurant theme — professional menu redesign (v2)
   --------------------------------------------------------------------------
   • Single typeface (Inter), no display font
   • Single neutral palette + one accent (uses --main-theme-color)
   • Flat buttons, no shadows, no double borders
   • Real CSS-grid gap between left / center / right columns
   • Works without item images (image column collapses when placeholder)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ms-bg: #f7f5f1;
  --ms-surface: #ffffff;
  --ms-border: rgba(20, 20, 20, .08);
  --ms-border-strong: rgba(20, 20, 20, .14);
  --ms-text: #14110f;
  --ms-text-2: #4a4541;
  --ms-muted: #8b837b;
  --ms-accent: var(--main-theme-color, #d35027);
  --ms-accent-hover: color-mix(in oklab, var(--ms-accent) 85%, black 15%);
  --ms-veg: #2f7d36;
  --ms-nonveg: #c0392b;
  --ms-egg: #d2832b;
  --ms-radius-sm: 8px;
  --ms-radius: 10px;
  --ms-radius-lg: 14px;
  --ms-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Base + global reset ------------------------------------------------- */
body.config {
  background: var(--ms-bg) !important;
  color: var(--ms-text);
  font-family: var(--ms-font) !important;
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
body.config *,
body.config h1, body.config h2, body.config h3,
body.config h4, body.config h5, body.config h6,
body.config p, body.config a, body.config button,
body.config input, body.config select, body.config textarea {
  font-family: var(--ms-font) !important;
  letter-spacing: 0 !important;
}

/* --- Site header — sticky so cart / sidebar can pin BELOW it ----------- */
.config #app > header,
.config header.responsive-header,
.config header,
header.desktop-header,
.config .header-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: var(--ms-surface) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  box-shadow: none !important;
}
/* The inline-styled <nav class="header-navbar"> with style="top:0" — keep its
   own 100px height in mind when offsetting sticky children below. */
.config .header-navbar > .container-wrap { height: 80px !important; }
.config .shop-name,
.config .navbar-brand,
.config header h2,
.config header h3 {
  font-family: var(--ms-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--ms-text) !important;
  line-height: 1.2 !important;
}

header input[type="search"],
.config header input.form-control,
.config input.form-control[placeholder*="Search"] {
  height: 42px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  background: var(--ms-bg) !important;
  box-shadow: none !important;
}
header input[type="search"]:focus,
.config header input.form-control:focus {
  border-color: var(--ms-border-strong) !important;
  background: var(--ms-surface) !important;
  outline: none !important;
}

/* --- Category strip at top ---------------------------------------------- */
.rounded-cate-container {
  padding: 20px 0 4px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ms-border) !important;
  margin-bottom: 12px !important;
}
.cate-bar { padding: 0 24px 12px !important; }
.cate-bar label {
  display: inline-block !important;
  margin: 0 !important;
  color: var(--ms-muted) !important;
  font-family: var(--ms-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.cate-bar-arrow p {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text-2) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 4px !important;
  cursor: pointer;
  transition: background .15s ease;
}
.cate-bar-arrow p:hover { background: var(--ms-bg) !important; }
.cate-bar-arrow p i { font-size: 11px !important; }

.rounded-category-container {
  padding: 0 24px 16px !important;
  gap: 8px !important;
}

.rounded-category {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 999px !important;
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
.rounded-category:hover {
  border-color: var(--ms-text) !important;
  color: var(--ms-text) !important;
  background: var(--ms-surface) !important;
}
.rounded-category img { display: none !important; }
.rounded-category::before { content: none !important; }
.rounded-category span {
  display: inline !important;
  margin: 0 !important;
  font-weight: 500 !important;
  color: inherit !important;
}

/* --- Slider container: tight spacing, no orphan whitespace ------------ */
.banner-container.s-banner {
  margin: 16px auto !important;
  max-width: 1280px !important;
  padding: 0 24px !important;
  line-height: 0 !important; /* Kill the whitespace some carousels leave */
}
.banner-container.s-banner .col-md-12 {
  padding: 0 !important;
  border-radius: var(--ms-radius-lg) !important;
  overflow: hidden !important;
  line-height: 0 !important;
}
.banner-container.s-banner img.bnr-img,
.banner-container.s-banner .img-parent-a img,
.banner-container.s-banner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--ms-radius-lg) !important;
}
.banner-container.s-banner .slick-list,
.banner-container.s-banner .slick-track {
  margin: 0 !important;
  padding: 0 !important;
}
.banner-container.s-banner .slick-slide { padding: 0 4px !important; }
.banner-container.s-banner .slick-dots { margin: 6px 0 0 !important; bottom: -22px !important; }
.banner-container.s-banner.slick-initialized.slick-slider.slick-dotted {
  margin-top: -100px !important;
}
@media (max-width: 767px) {
  .banner-container.s-banner {
    padding: 0 16px !important;
    margin: 10px auto 8px !important;
  }
  .banner-container.s-banner.slick-initialized.slick-slider.slick-dotted {
    margin-top: -100px !important;
  }
}

/* The next-section container should sit right under the slider, no extra
   gap. The blade wraps menu content in <section id="vandana"> with a
   padding-bottom that creates phantom space at the BOTTOM, but we want to
   make sure the TOP is tight. */
#vandana { padding-top: 0 !important; margin-top: 0 !important; }

/* --- Three-column shell: real gap between sections ---------------------- */
.sections-container {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 8px 24px 80px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) 320px !important;
  gap: 28px !important;
  align-items: start !important;
}

@media (max-width: 1100px) {
  .sections-container {
    grid-template-columns: 200px minmax(0, 1fr) !important;
  }
  .section-right { display: none !important; }
}
@media (max-width: 767px) {
  .sections-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 8px 16px 60px !important;
  }
  .section-left { display: none !important; }
}

/* Force layout columns to fill their grid cell */
.section-left,
.section-center,
.section-right {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: unset !important;
}

/* --- Left sidebar: clean category nav ----------------------------------- */
.section-left {
  position: sticky !important;
  /* 80px header + 16px breathing room — keeps the panel fully visible
     when the user scrolls, never slips under the sticky header. */
  top: 96px !important;
  max-height: calc(100vh - 112px) !important;
  overflow-y: auto !important;
}
.section-left-container {
  padding: 8px !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
}
.section-left-container .list-unstyled { margin: 0 !important; padding: 0 !important; }
.section-left-container li { margin: 0 !important; padding: 0 !important; }
.section-left .cateList,
.section-left a.cateList {
  display: block !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  color: var(--ms-text-2) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border-radius: var(--ms-radius-sm) !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
}
.section-left .cateList:hover {
  background: var(--ms-bg) !important;
  color: var(--ms-text) !important;
}
.section-left li.active .cateList,
.section-left .cateList.active {
  background: var(--ms-text) !important;
  color: #fff !important;
}

/* On DESKTOP we don't need the mobile hamburger because the left sidebar
   already shows the categories. Hide the toggle button there. The drawer
   contents stay so the inline categories render. */
@media (min-width: 768px) {
  .responsive-sidebar-container .checkbtn { display: none !important; }
  .responsive-sidebar-container .responsive-sidebar-menu-contain { display: block !important; }
  .responsive-sidebar-container .drawer-menu .drawerCloseBtn { display: none !important; }
  .responsive-sidebar-container .drawer-menu { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
}
/* On MOBILE the old per-page .responsive-sidebar-container hamburger is
   hidden — it duplicated the new global .ms-mobile-menu-btn (in
   app.blade.php) and caused two hamburger icons in the header. */
@media (max-width: 767px) {
  .responsive-sidebar-container,
  .responsive-sidebar-container .checkbtn,
  .responsive-sidebar-container .responsive-sidebar-menu-contain,
  .responsive-sidebar-container .drawer-menu,
  .responsive-sidebar-container label[for="check"],
  .responsive-sidebar-container #collapseExample {
    display: none !important;
  }

  /* #backBtn (in header.blade.php) shows on non-home pages. Its FA
     arrow-left glyph doesn't render on this FA build so it looks like
     stacked lines (a second hamburger). Style as a clean round button
     and draw the arrow with pure CSS, independent of FA. */
  /* Back button — uses <i class="fa-solid fa-arrow-left"></i> from the
     header markup. We just style the wrapper as a clean round button and
     let Font Awesome render the actual arrow glyph. */
  #backBtn {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--ms-radius-sm) !important;
    border: 1px solid var(--ms-border) !important;
    background: var(--ms-surface) !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: var(--ms-text) !important;
    flex: 0 0 auto !important;
  }
  #backBtn i {
    display: inline-block !important;
    font-size: 22px !important;          /* bi-arrow-left-short is chunkier */
    line-height: 1 !important;
    color: var(--ms-text) !important;
  }

  /* On the HOMEPAGE only show the hamburger. On non-home pages where the
     back button exists, show the back button INSTEAD of the hamburger so
     the user gets a single, clear left-side control. */
  body:has(#backBtn) .ms-mobile-menu-btn { display: none !important; }
}

/* --- Center column: each menu section ----------------------------------- */
.menu-section {
  margin-bottom: 28px !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
}
.section-title {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 20px 24px 18px !important;
  border-bottom: 1px solid var(--ms-border) !important;
}
.section-title::before { content: none !important; }
.section-title p {
  margin: 0 !important;
  color: var(--ms-text) !important;
  font-family: var(--ms-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}
.section-title::after { content: none !important; }

/* --- Each menu row (the "card") ----------------------------------------- */
.section-center .card,
.menu-section .card {
  display: block !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ms-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background .12s ease !important;
}
.menu-section .card:first-of-type { border-top: 0 !important; }
.section-center .card:hover,
.menu-section .card:hover {
  background: var(--ms-bg) !important;
}

.section-center .card .row.no-gutters,
.menu-section .card .row.no-gutters {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 20px !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Force content column to take full available width */
.section-center .card .col-8,
.section-center .card .col-md-8,
.menu-section .card .col-8,
.menu-section .card .col-md-8 {
  max-width: 100% !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Image / Add column: hugs content width, no fixed columns */
.section-center .card .col-4,
.section-center .card .col-md-4,
.menu-section .card .col-4,
.menu-section .card .col-md-4 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.card .card-body { padding: 0 !important; }

/* --- Veg/non-veg dot — drawn in pure CSS so it doesn't depend on FA --- */
.card .status-border {
  width: 16px !important;
  height: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1.5px solid currentColor !important;
  border-radius: 3px !important;
  margin-bottom: 8px !important;
  background: #fff !important;
}
.card .status-border i {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
  border-radius: 50% !important;
  background: currentColor !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.card .status-border i::before,
.card .status-border i::after { content: none !important; }

.card.veg .status-border, .card .text-success { color: var(--ms-veg) !important; }
.card.non-veg .status-border, .card .text-danger { color: var(--ms-nonveg) !important; }
.card.egg .status-border, .card .text-warning { color: var(--ms-egg) !important; }

.card .ms-diet-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 38px !important;
  height: 20px !important;
  padding: 0 8px !important;
  margin-bottom: 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  background: #fff !important;
  border: 1.5px solid currentColor !important;
}
.card .ms-diet-egg { color: var(--ms-egg) !important; }
.card .ms-diet-jain { color: #2563eb !important; }

/* --- Item content typography ------------------------------------------- */
.product-name,
.card .product-name,
.card .card-title.product-name {
  font-family: var(--ms-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ms-text) !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;
}

.card .product-price,
.product-price {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
}
.card .product-price .offer-price,
.product-price .offer-price {
  color: var(--ms-text) !important;
  font-family: var(--ms-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.card .product-price del,
.product-price del.price {
  color: var(--ms-muted) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: line-through;
}

.card .card-description,
.card-description.card-desc-font {
  color: var(--ms-text-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 4px 0 0 !important;
  max-width: 560px !important;
  font-weight: 400 !important;
}

/* "More" toggle */
.card .moreless {
  color: var(--ms-text-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 6px !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.card .moreless:hover { color: var(--ms-text) !important; }

/* Share / action row */
.card .d-flex.justify-content-between.flex-row-reverse {
  justify-content: flex-start !important;
  flex-direction: row !important;
  gap: 14px !important;
  margin-top: 8px !important;
  align-items: center !important;
}
.card .desktop svg, .card .mobile svg { opacity: .35; width: 12pt !important; height: 12pt !important; }
.card .desktop:hover svg, .card .mobile:hover svg { opacity: .8; }

/* --- Image column (collapses when placeholder) ------------------------- */
.card-image-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  position: static !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
}

.card-image-container img.card-img {
  width: 96px !important;
  height: 96px !important;
  border-radius: var(--ms-radius) !important;
  object-fit: cover !important;
  border: 1px solid var(--ms-border) !important;
  background: var(--ms-bg) !important;
  margin: 0 !important;
}

/* Hide default placeholder images entirely */
.card-image-container img[src*="default.png"],
.card-image-container img[src*="default_image.png"] {
  display: none !important;
}

/* When placeholder is hidden, only the Add button remains */
.card:has(.card-image-container img[src*="default"]) .card-image-container {
  align-self: center !important;
  min-width: 0 !important;
}

/* --- Flat ADD button (no shadow, no border) --------------------------- */
.card .add-btn,
.section-center .add-btn,
.menu-section .add-btn,
button.add-btn {
  position: static !important;
  bottom: auto !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: var(--ms-radius-sm) !important;
  background: var(--ms-text) !important;
  color: #fff !important;
  font-family: var(--ms-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 88px !important;
  transition: background .12s ease, transform .12s ease !important;
}
.card .add-btn:hover,
button.add-btn:hover {
  background: var(--ms-accent) !important;
  transform: none !important;
}
.card .add-btn i { font-size: 14px !important; }

/* Absolute-positioned wrapper around Add button: neutralise */
.card-image-container > .d-flex.position-absolute,
.card-image-container > .position-absolute,
.card-image-container > div[style*="position"] {
  position: static !important;
  width: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

/* --- Right sidebar: cart panel ---------------------------------------- */
.section-right {
  position: sticky !important;
  /* 80px header + 16px breathing room — keeps the panel fully visible
     when the user scrolls, never slips under the sticky header. */
  top: 96px !important;
  max-height: calc(100vh - 112px) !important;
  overflow-y: auto !important;
}
.section-right-container,
.section-right .container {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  padding: 18px !important;
  margin: 0 !important;
}

/* Cart count badge in header */
.section-right .badge,
.section-right > * > .badge,
.cart-count, .right-cart-count {
  background: var(--ms-text) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--ms-radius-sm) !important;
}

/* Clear cart button — outline */
.section-right button,
.section-right .btn,
.section-right a.btn {
  border-radius: var(--ms-radius-sm) !important;
  border: 1px solid var(--ms-border) !important;
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  height: auto !important;
  box-shadow: none !important;
}
.section-right .btn-danger,
.section-right button.bg-danger {
  background: var(--ms-surface) !important;
  color: var(--ms-nonveg) !important;
  border-color: var(--ms-border) !important;
}

/* Proceed to checkout — primary button */
.section-right a[href*="checkout"],
.section-right button[onclick*="checkout"],
.proceed-checkout, .checkout-btn {
  background: var(--ms-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ms-radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.section-right a[href*="checkout"]:hover,
.proceed-checkout:hover, .checkout-btn:hover {
  background: var(--ms-accent-hover) !important;
}

/* Quantity controls in cart */
.section-right input[type="number"],
.section-right .qty {
  height: 30px !important;
  width: 44px !important;
  text-align: center !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-sm) !important;
  background: var(--ms-surface) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* --- Track Order floating button -------------------------------------- */
.track-order, a[href*="track"].track-order {
  background: var(--ms-text) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 12px 16px !important;
}

/* --- Hide stray broken images in the menu cards only (slider untouched) - */
.menu-section img[src$="/uploads/default.png"]:not(.card-img),
.menu-section img[src$="default_image.png"]:not(.card-img),
.rounded-category img[src$="/uploads/default.png"],
.rounded-category img[src$="default_image.png"] {
  display: none !important;
}

/* --- Cart panel polish + proper Font Awesome icons -------------------- */

/* Cart count badge (the "3" in the top corner of the panel) */
.section-right .bg-danger,
.section-right [class*="bg-danger"],
.section-right .cart-count,
.section-right span.badge {
  background: var(--ms-text) !important;
  color: #fff !important;
  border-radius: var(--ms-radius-sm) !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Clear Cart — outline ghost button */
.section-right .clear-cart-btn,
.section-right button.clear-cart-btn,
.section-right .clear-cart-btn.bg-danger {
  background: transparent !important;
  color: var(--ms-text-2) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  height: 32px !important;
  box-shadow: none !important;
}
.section-right .clear-cart-btn:hover {
  background: var(--ms-bg) !important;
  color: var(--ms-text) !important;
  border-color: var(--ms-border-strong) !important;
}

/* Proceed to checkout — solid accent (inline style is overridden) */
.section-right .checkout-btn,
.section-right a.checkout-btn,
.section-right a#checkout,
.section-right a[href*="cart"].checkout-btn {
  background: var(--ms-accent) !important;
  background-color: var(--ms-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ms-radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 18px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  margin-top: 8px !important;
}
.section-right .checkout-btn:hover {
  background: var(--ms-accent-hover) !important;
  background-color: var(--ms-accent-hover) !important;
}

/* Cart line items */
.section-right .cart-container,
.section-right .cart-list {
  background: transparent !important;
  padding: 0 !important;
}
.section-right .cart-item,
.section-right .cart-list > .row,
.section-right .d-flex.cart-row,
.section-right [class*="cart-row"] {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--ms-border) !important;
  margin: 0 !important;
  background: transparent !important;
}
.section-right .cart-item:last-child,
.section-right .cart-list > .row:last-child { border-bottom: 0 !important; }

.section-right h6, .section-right .cart-item-name, .section-right .cart-info a {
  color: var(--ms-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin: 0 0 4px !important;
  text-decoration: none !important;
}
.section-right .cart-item-price, .section-right .cart-info p,
.section-right .item-price {
  color: var(--ms-text-2) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Quantity stepper — borderless segmented control */
.section-right .qty-counter,
.section-right .d-flex.border,
.section-right .quantity-counter {
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-sm) !important;
  background: var(--ms-surface) !important;
  overflow: hidden !important;
  height: 30px !important;
}
.section-right .qty-counter > div,
.section-right .quantity-counter > div {
  border: 0 !important;
  border-right: 1px solid var(--ms-border) !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ms-text) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  background: transparent !important;
}
.section-right .qty-counter > div:last-child,
.section-right .quantity-counter > div:last-child { border-right: 0 !important; }
.section-right .border-secondary,
.section-right .border-start, .section-right .border-end {
  border-color: var(--ms-border) !important;
}

/* Remove (X) icon — draw the × in pure CSS, bypass Font Awesome
   completely so it can't be affected by FA version mismatches. */
.section-right .cart-remove > a > div,
.section-right .cart-remove div[style*="background-color"] {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  display: contents !important;
}
.section-right .cart-remove a,
.section-right .cart-remove > a {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--ms-radius-sm) !important;
  background: rgba(192, 57, 43, .08) !important;
  color: var(--ms-nonveg) !important;
  text-decoration: none !important;
  transition: background .12s ease, color .12s ease !important;
  font-size: 0 !important;
}
.section-right .cart-remove a:hover {
  background: var(--ms-nonveg) !important;
  color: #fff !important;
}
/* Hide the broken FA glyph entirely and draw the × via ::before/::after */
.section-right .cart-remove i,
.section-right .cart-remove i.fa-window-close,
.section-right .cart-remove i.fas {
  position: relative !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background: transparent !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.section-right .cart-remove i::before,
.section-right .cart-remove i::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  font: 0/0 sans-serif !important;
}
.section-right .cart-remove i::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.section-right .cart-remove i::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }

/* Sub Total row */
.section-right .cart-total,
.section-right .d-flex.justify-content-between.cart-total {
  border-top: 1px solid var(--ms-border) !important;
  padding-top: 14px !important;
  margin-top: 8px !important;
  font-weight: 600 !important;
  color: var(--ms-text) !important;
  font-size: 14px !important;
}

/* Empty-cart state */
.section-right #empty-bag,
.section-right #empty {
  text-align: center !important;
  padding: 24px 12px !important;
  color: var(--ms-muted) !important;
  font-size: 13px !important;
}
.section-right #empty img {
  width: 64px !important;
  height: 64px !important;
  opacity: .55;
  margin-bottom: 10px !important;
}

/* --- Active sidebar marker — clean dark pill, no blue line ----------- */
.section-left li.active .cateList,
.section-left .cateList.active {
  background: var(--ms-text) !important;
  color: #fff !important;
  position: relative !important;
}
.section-left li.active .cateList::after,
.section-left .cateList.active::after { content: none !important; }
/* If the original theme paints a marker via ::before, suppress it */
.section-left li::before, .section-left li::after { content: none !important; }

/* ====================================================================
   v5 additions — Swiggy-style price pill, mobile category bar restored,
   cart slide-in drawer, modal variation picker polish.
   ==================================================================== */

/* --- Price like Swiggy: original strike + discounted filled pill --- */
.card .product-price,
.product-price {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 8px !important;
  flex-wrap: wrap !important;
}
.card .product-price .offer-price,
.product-price .offer-price {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
  background: #3d1a4a !important;       /* deep purple like Swiggy */
  color: #fff !important;
  font-family: var(--ms-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
.card .product-price del,
.product-price del.price {
  color: var(--ms-muted) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
  order: -1 !important;                  /* show strikethrough BEFORE pill */
}
/* When there's no discount (offer == regular), show price as plain bold text */
.card:not(:has(del.price)) .product-price .offer-price {
  background: transparent !important;
  padding: 0 !important;
  color: var(--ms-text) !important;
  border-radius: 0 !important;
}

/* --- Rating chip (renders only when [data-rating] is present) ----- */
.card .product-name + .product-rating-chip,
.card .product-rating-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 2px 0 4px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #2f7d36 !important;
  background: rgba(47,125,54,.06) !important;
  color: #2f7d36 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
.card .product-rating-chip::before {
  content: "★";
  font-size: 11px;
  line-height: 1;
}
.card .product-rating-chip small {
  color: var(--ms-muted) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}

/* --- Mobile: restore the horizontal category chip bar ----------- */
@media (max-width: 767px) {
  .rounded-cate-container {
    display: block !important;
    position: sticky !important;
    /* Header navbar is 100px tall on mobile (inline style). Pin the chip
       bar exactly below it so the chips never slide under the header. */
    top: 100px !important;
    z-index: 40 !important;
    background: var(--ms-bg) !important;
    border-bottom: 1px solid var(--ms-border) !important;
    margin-bottom: 0 !important;
    padding: 12px 0 4px !important;
  }
  .cate-bar { display: none !important; }
  .rounded-category-container {
    padding: 0 16px 12px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  .rounded-category-container::-webkit-scrollbar { display: none !important; }
  .rounded-category {
    flex: 0 0 auto !important;
  }
  /* The original blade hides this on desktop and shows the desktop sidebar;
     on mobile we just want the chip bar — no left drawer. */
  .section-left { display: none !important; }
  .responsive-sidebar-container { display: none !important; }
}

/* --- Cart slide-in drawer (MOBILE ONLY)
   On desktop / tablet the cart stays as the sticky right column from v4.
   On mobile (<768px), .section-right becomes an off-canvas drawer
   that the header Cart button toggles via body.cart-open. */
@media (max-width: 767px) {
  .section-right {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(440px, 85vw) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    z-index: 200 !important;
    background: var(--ms-surface) !important;
    border-left: 1px solid var(--ms-border) !important;
    box-shadow: -24px 0 60px rgba(0,0,0,.18) !important;
    transform: translateX(100%) !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
    flex-direction: column !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  body.cart-open .section-right {
    transform: translateX(0) !important;
  }
  .section-right > .section-right-container,
  .section-right .section-right-container,
  .section-right > .container,
  .section-right > #sidebar {
    background: var(--ms-surface) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 18px 24px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }
}

.ms-drawer-head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid var(--ms-border) !important;
  background: var(--ms-surface) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}
.ms-drawer-head strong {
  color: var(--ms-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.ms-drawer-head small {
  color: var(--ms-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 2px !important;
}
.ms-drawer-close {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 999px !important;
  background: var(--ms-surface) !important;
  cursor: pointer !important;
  flex: 0 0 32px !important;
  color: var(--ms-text-2) !important;
  font-size: 0 !important;
}
.ms-drawer-close::before,
.ms-drawer-close::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
}
.ms-drawer-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.ms-drawer-close::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }
.ms-drawer-close:hover { background: var(--ms-bg) !important; color: var(--ms-text) !important; }

/* Hide the drawer-head + close button on desktop. The same drawer markup
   lives inside the sticky right cart column (.section-right), but the
   "Your order / Items in your bag / X close" head is only useful when
   the cart is a slide-in drawer on mobile. On desktop it just creates a
   gap above the items list. Source-ordered AFTER the generic .ms-drawer-head
   so this rule wins the cascade. */
@media (min-width: 768px) {
  .section-right .ms-drawer-head,
  .section-right > .ms-drawer-head { display: none !important; }
  .section-right .ms-drawer-close { display: none !important; }
}

/* Backdrop + drawer-head are only meaningful on mobile */
@media (max-width: 767px) {
  .ms-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(20, 17, 15, .42) !important;
    z-index: 199 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }
  body.cart-open .ms-drawer-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.cart-open { overflow: hidden !important; }
}
/* Desktop / tablet: backdrop never shows, body never locks */
@media (min-width: 768px) {
  .ms-drawer-backdrop { display: none !important; }
  body.cart-open { overflow: visible !important; }
  /* The cart panel always stays its sticky-column self on desktop;
     ignore any cart-open class. */
  body.cart-open .section-right {
    transform: none !important;
    position: sticky !important;
  }
}

/* --- Variation modal (Bootstrap modal already in markup) --------- */
.config .modal-content {
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 60px rgba(0,0,0,.18) !important;
}
.config .modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid var(--ms-border) !important;
  background: var(--ms-surface) !important;
}
.config .modal-title, .config .modal-header h5 {
  margin: 0 !important;
  color: var(--ms-text) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.config .modal-header small,
.config .modal-header .small {
  color: var(--ms-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: block !important;
}
.config .modal-header .close,
.config .modal-header button[data-dismiss="modal"] {
  background: transparent !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 999px !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 18px !important;
  color: var(--ms-text-2) !important;
  opacity: 1 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
.config .modal-body { padding: 16px 22px !important; max-height: 60vh !important; overflow-y: auto !important; }
.config .modal-body label,
.config .modal-body .form-check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  margin: 0 0 8px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 12px !important;
  background: var(--ms-surface) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--ms-text) !important;
  transition: border-color .12s ease, background .12s ease !important;
}
.config .modal-body label:has(input:checked) {
  border-color: var(--ms-text) !important;
  background: var(--ms-bg) !important;
}
.config .modal-body input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--ms-text) !important;
  cursor: pointer !important;
  margin-right: 8px !important;
}
.config .modal-footer {
  padding: 14px 22px 18px !important;
  border-top: 1px solid var(--ms-border) !important;
  background: var(--ms-surface) !important;
}
.config .modal-footer .btn,
.config .modal-footer button {
  background: var(--ms-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ms-radius) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* ====================================================================
   v6 — Cart page + Checkout page restyled to match the menu theme.
   ==================================================================== */

/* --- Cart page (/cart) ---------------------------------------------- */
.config .cart-container {
  max-width: 1200px !important;
  margin: 24px auto !important;
  padding: 0 24px 80px !important;
}
.config .cart-section { background: transparent !important; }
.config .cart-section .progress {
  display: none !important;
}
.config .cart-titles, .config .cart-total, .config .cart-section h5 {
  font-family: var(--ms-font) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ms-text) !important;
  margin: 0 !important;
}
.config .cart-section .bg-light.rounded.p-3 {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  padding: 16px 20px !important;
  margin-bottom: 18px !important;
}

/* Left column — cart items */
.config #emptyCart {
  padding: 0 !important;
}
.config #removeCartCard {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  overflow: hidden !important;
}
.config #removeCartCard > * {
  border-top: 1px solid var(--ms-border) !important;
  padding: 16px 20px !important;
  margin: 0 !important;
}
.config #removeCartCard > *:first-child { border-top: 0 !important; }
.config #removeCartCard img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: var(--ms-radius) !important;
  border: 1px solid var(--ms-border) !important;
}
.config #removeCartCard h5, .config #removeCartCard h6 {
  color: var(--ms-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Right column — totals card */
.config .cart-section .col-lg-4 .border.rounded-top,
.config .cart-section .col-lg-4 .border.border-top-0 {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
}
.config .cart-section .col-lg-4 .border.rounded-top {
  border-radius: var(--ms-radius-lg) var(--ms-radius-lg) 0 0 !important;
  padding: 18px 20px !important;
}
.config .cart-section .col-lg-4 .border.border-top-0 {
  border-top: 0 !important;
  border-radius: 0 0 var(--ms-radius-lg) var(--ms-radius-lg) !important;
  padding: 16px 20px !important;
}
.config .cart-section .item-total,
.config .cart-section .grand-total {
  color: var(--ms-text-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}
.config .cart-section .item-total-price,
.config .cart-section .grand-total-price {
  color: var(--ms-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.config .cart-section .grand-total:last-of-type {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ms-text) !important;
}
.config .cart-section .grand-total-price:last-of-type {
  font-size: 18px !important;
}
.config .cart-section hr {
  margin: 12px 0 !important;
  border-color: var(--ms-border) !important;
  opacity: 1 !important;
}
.config .cart-section .tax {
  color: var(--ms-muted) !important;
  font-size: 12px !important;
}
.config .cart-section .total-saved {
  margin-top: 10px !important;
  padding: 8px 12px !important;
  background: rgba(47,125,54,.08) !important;
  color: var(--ms-veg) !important;
  border-radius: var(--ms-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Continue / Checkout button */
.config .continue-btn,
.config .cart-section .btn.continue-btn {
  background: var(--ms-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ms-radius) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  margin-top: 8px !important;
}
.config .continue-btn:hover { background: var(--ms-accent-hover) !important; }
.config .form-check-label,
.config .cart-section .form-check-label {
  color: var(--ms-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.config .form-check-input,
.config .cart-section input[type="checkbox"] {
  accent-color: var(--ms-text) !important;
}

/* --- Checkout page (/checkout) ------------------------------------- */
.config .checkout_form {
  max-width: 1200px !important;
  margin: 24px auto 60px !important;
  padding: 0 24px !important;
}
.config .checkout_form .single-banner {
  background: transparent !important;
  padding: 0 0 16px !important;
}
.config .checkout_form .single-banner h2,
.config .checkout_form .single-content h2 {
  color: var(--ms-text) !important;
  font-family: var(--ms-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
}
.config .checkout_form .breadcrumb,
.config .checkout_form ol.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--ms-muted) !important;
}
.config .checkout_form .breadcrumb-item a { color: var(--ms-accent) !important; text-decoration: none !important; }
.config .checkout_form .breadcrumb-item.active { color: var(--ms-text-2) !important; }

.config .checkout_form .section { padding: 0 !important; }
.config .checkout_form .container,
.config .checkout_form > .section > .container { max-width: 100% !important; padding: 0 !important; }

.config .checkout_form > .section > .container > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}
@media (max-width: 991px) {
  .config .checkout_form > .section > .container > .row {
    grid-template-columns: 1fr !important;
  }
}

.config .checkout_form .col-xl-7,
.config .checkout_form .col-xl-5,
.config .checkout_form .checkout-billing {
  flex: unset !important;
  max-width: unset !important;
  width: 100% !important;
  padding: 22px 24px !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
}

/* Coupon notice */
.config .checkout_form .bigbag_notice {
  background: rgba(212, 80, 39, .06) !important;
  border: 1px solid rgba(212, 80, 39, .18) !important;
  border-radius: var(--ms-radius) !important;
  color: var(--ms-text-2) !important;
  padding: 12px 14px !important;
  margin: 0 0 16px !important;
  font-size: 13px !important;
}
.config .checkout_form .bigbag_notice a { color: var(--ms-accent) !important; font-weight: 600 !important; }

/* Section heading */
.config .checkout_form h4 {
  color: var(--ms-text) !important;
  font-family: var(--ms-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 4px 0 16px !important;
}

/* Form fields */
.config .checkout_form .form-group {
  margin-bottom: 14px !important;
}
.config .checkout_form label,
.config .checkout_form .form-group label {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--ms-text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.config .checkout_form input,
.config .checkout_form select,
.config .checkout_form textarea,
.config .checkout_form .form-control {
  min-height: 44px !important;
  padding: 0 14px !important;
  background: var(--ms-bg) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  color: var(--ms-text) !important;
  font-family: var(--ms-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.config .checkout_form textarea.form-control { padding: 10px 14px !important; min-height: 96px !important; }
.config .checkout_form input:focus,
.config .checkout_form select:focus,
.config .checkout_form textarea:focus,
.config .checkout_form .form-control:focus {
  background: var(--ms-surface) !important;
  border-color: var(--ms-text) !important;
  outline: none !important;
}

/* Select2 dropdown alignment */
.config .checkout_form .select2-container .select2-selection--single {
  height: 44px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  background: var(--ms-bg) !important;
}
.config .checkout_form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  color: var(--ms-text) !important;
  padding-left: 14px !important;
}
.config .checkout_form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }

/* Order summary table */
.config .checkout-billing .bigbag_responsive-table { border-spacing: 0 !important; width: 100% !important; }
.config .checkout-billing .bigbag_responsive-table thead { display: none !important; }
.config .checkout-billing .bigbag_responsive-table,
.config .checkout-billing .bigbag_responsive-table tbody,
.config .checkout-billing .bigbag_responsive-table tr,
.config .checkout-billing .bigbag_responsive-table td {
  display: block !important; width: 100% !important;
}
.config .checkout-billing .bigbag_responsive-table tr {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  margin: 0 0 8px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  background: var(--ms-bg) !important;
}
.config .checkout-billing .bigbag_responsive-table td {
  padding: 0 !important; border: 0 !important; background: transparent !important;
}
.config .checkout-billing .bigbag_responsive-table td[data-title="Quantity"] {
  justify-self: end !important;
  color: var(--ms-muted) !important;
  font-size: 13px !important; font-weight: 600 !important;
}
.config .checkout-billing .bigbag_responsive-table td[data-title="Total"] {
  justify-self: end !important;
  color: var(--ms-text) !important;
  font-weight: 700 !important; white-space: nowrap !important;
}
.config .checkout-billing .bigbag_cart-product-body h6 {
  margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important;
}
.config .checkout-billing .bigbag_cart-product-body h6 a {
  color: var(--ms-text) !important; text-decoration: none !important;
}
.config .checkout-billing .bigbag_cart-product-body p {
  margin: 3px 0 0 !important; color: var(--ms-muted) !important; font-size: 12px !important; line-height: 1.3 !important;
}
.config .checkout-billing .bigbag_responsive-table tr.total {
  background: var(--ms-surface) !important;
  border-color: var(--ms-border-strong) !important;
}
.config .checkout-billing .bigbag_responsive-table tr.total td[data-title="Total"],
.config .checkout-billing .bigbag_responsive-table tr.total td:last-child {
  font-size: 14px !important; font-weight: 700 !important; color: var(--ms-text) !important;
}
.config .checkout-billing .bigbag_responsive-table tr.total:has(.total_cost_amount) {
  background: var(--ms-text) !important; border: 0 !important;
}
.config .checkout-billing .bigbag_responsive-table tr.total:has(.total_cost_amount) td,
.config .checkout-billing .bigbag_responsive-table tr.total:has(.total_cost_amount) h6,
.config .checkout-billing .bigbag_responsive-table tr.total:has(.total_cost_amount) strong {
  color: #fff !important; font-size: 16px !important;
}
.config .checkout-billing .bigbag_responsive-table tr.shipping_charge.none { display: none !important; }

/* Payment method block */
.config .checkout-billing .bigbag-checkout-payment {
  margin-top: 14px !important;
  padding: 16px !important;
  border-radius: var(--ms-radius) !important;
  background: var(--ms-bg) !important;
  border: 1px solid var(--ms-border) !important;
}
.config .checkout-billing .bigbag-checkout-payment h6 {
  margin: 0 0 10px !important;
  font: 700 12px/1 var(--ms-font) !important;
  color: var(--ms-text-2) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.config .checkout-billing .bigbag-checkout-payment hr { display: none !important; }
.config .checkout-billing .wc_payment_method {
  margin-top: 8px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-sm) !important;
  background: var(--ms-surface) !important;
}
.config .checkout-billing .wc_payment_method label {
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ms-text) !important;
}
.config .checkout-billing .wc_payment_method input[type="radio"] {
  accent-color: var(--ms-text) !important;
  margin-right: 8px !important;
}

/* Place Order button */
.config .checkout-billing .checkout_submit_btn,
.config .checkout-billing .bigbag_btn-custom.primary {
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 16px !important;
  border: 0 !important;
  border-radius: var(--ms-radius) !important;
  background: var(--ms-accent) !important;
  color: #fff !important;
  font-family: var(--ms-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.config .checkout-billing .checkout_submit_btn:hover { background: var(--ms-accent-hover) !important; }

/* ====================================================================
   v6.2 — Global mobile hamburger + slide-in category drawer.
   Visible on every page (homepage, cart, checkout, product detail).
   Hidden on desktop because the inline header navigation already covers it.
   ==================================================================== */

/* The hamburger button + the drawer + its backdrop are all hidden by
   default. They only appear on the mobile breakpoint (below). */
.ms-mobile-menu-btn,
.ms-mobile-menu-backdrop,
.ms-mobile-menu-drawer {
  display: none !important;
}

/* Mobile only — hamburger button lives INSIDE the header navbar (JS
   relocates it on first paint). Style as a small square button. */
@media (max-width: 767px) {
  .ms-mobile-menu-btn {
    display: inline-grid !important;
    place-items: center !important;
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--ms-border) !important;
    border-radius: var(--ms-radius-sm) !important;
    background: var(--ms-surface) !important;
    cursor: pointer !important;
    padding: 0 !important;
    gap: 3px !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    margin: 0 8px 0 0 !important;
    /* Keep it visually associated with the header */
    align-self: center !important;
  }
  .ms-mobile-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ms-text);
    border-radius: 2px;
  }
  /* No extra padding-left needed now that button sits inside the navbar */
  .config .header-navbar .container.container-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Backdrop */
  .ms-mobile-menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(20,17,15,.45) !important;
    z-index: 220 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }

  /* Drawer panel */
  .ms-mobile-menu-drawer {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 85vw) !important;
    height: 100dvh !important;
    z-index: 230 !important;
    background: var(--ms-surface) !important;
    border-right: 1px solid var(--ms-border) !important;
    box-shadow: 24px 0 60px rgba(0,0,0,.18) !important;
    transform: translateX(-105%) !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.ms-mobile-menu-open .ms-mobile-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.ms-mobile-menu-open .ms-mobile-menu-drawer {
    transform: translateX(0) !important;
  }
  body.ms-mobile-menu-open { overflow: hidden !important; }

  .ms-mobile-menu-head {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid var(--ms-border) !important;
  }
  .ms-mobile-menu-head strong {
    color: var(--ms-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .ms-mobile-menu-close {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--ms-border) !important;
    border-radius: 999px !important;
    background: var(--ms-surface) !important;
    cursor: pointer !important;
    font-size: 0 !important;
  }
  .ms-mobile-menu-close::before,
  .ms-mobile-menu-close::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background: var(--ms-text-2) !important;
    border-radius: 2px !important;
  }
  .ms-mobile-menu-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
  .ms-mobile-menu-close::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }

  .ms-mobile-menu-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 10px 12px 24px !important;
    min-height: 0 !important;
  }
  .ms-mobile-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 14px !important;
    margin: 2px 0 !important;
    color: var(--ms-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: var(--ms-radius-sm) !important;
    text-decoration: none !important;
    transition: background .12s ease !important;
  }
  .ms-mobile-menu-item:hover,
  .ms-mobile-menu-item:active { background: var(--ms-bg) !important; }
  .ms-mobile-menu-item--home {
    border: 1px solid var(--ms-border) !important;
    background: var(--ms-bg) !important;
    margin: 6px 0 10px !important;
    font-weight: 700 !important;
  }
}

/* ====================================================================
   v7 — Checkout radio "cards" + thank-you confetti.
   ==================================================================== */

/* Order-type chooser: render the three Bootstrap form-check rows as
   tap-friendly radio cards. Stacks naturally on mobile. */
.config .checkout_form .col-xl-7 > .form-check,
.config .checkout_form .col-xl-7 > .form-check.mt-3,
.config .checkout-billing > .form-check,
.config .checkout-billing > .form-check.mt-3 {
  display: none !important;
}

/* v9.8 — Delivery-type radio cards. Sophisticated, neutral palette.
   Layout: icon (left, drawn in CSS) · title + description (center) · check (right).
   Click anywhere on the card selects (the input fills the card). */
.config .form-check:has(input[name="order_to"]) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 10px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 14px !important;
  background: var(--ms-surface) !important;
  cursor: pointer !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.config .form-check:has(input[name="order_to"]):hover {
  border-color: var(--ms-border-strong) !important;
}
.config .form-check:has(input[name="order_to"]):active {
  transform: scale(.995) !important;
}
.config .form-check:has(input[name="order_to"]:checked) {
  border-color: var(--ms-text) !important;
  background: linear-gradient(0deg, var(--ms-bg), var(--ms-surface)) !important;
  box-shadow:
    0 0 0 1px var(--ms-text) inset,
    0 12px 30px -16px rgba(20,17,15,.18) !important;
}

/* Hidden input fills the whole card so any tap selects it */
.config .form-check:has(input[name="order_to"]) input[name="order_to"][type="radio"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Icon column — CSS-drawn icons per option (value 1/2/3). */
.config .form-check:has(input[name="order_to"])::before {
  content: "" !important;
  grid-column: 1 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: var(--ms-bg) !important;
  border: 1px solid var(--ms-border) !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.config .form-check:has(input[name="order_to"]:checked)::before {
  background: var(--ms-text) !important;
  border-color: var(--ms-text) !important;
}
/* The actual little glyph is drawn on a ::after of the input itself */
.config .form-check:has(input[name="order_to"]) input[name="order_to"]::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  background-color: var(--ms-text) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 22px 22px !important;
  mask-size: 22px 22px !important;
  z-index: 3 !important;
  transition: background-color .18s ease !important;
}
.config .form-check:has(input[name="order_to"]:checked) input[name="order_to"]::after {
  background-color: #fff !important;
}
/* Doorstep (value 1) — scooter */
.config .form-check input[name="order_to"][value="1"]::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17h4'/><circle cx='6' cy='17' r='2'/><circle cx='18' cy='17' r='2'/><path d='M16 17h-6V8a2 2 0 0 1 2-2h2'/><path d='M14 6h3l3 5v6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17h4'/><circle cx='6' cy='17' r='2'/><circle cx='18' cy='17' r='2'/><path d='M16 17h-6V8a2 2 0 0 1 2-2h2'/><path d='M14 6h3l3 5v6'/></svg>");
}
/* Take Away (value 2) — shopping bag */
.config .form-check input[name="order_to"][value="2"]::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h14l-1 13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 7z'/><path d='M8 7V5a4 4 0 0 1 8 0v2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h14l-1 13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 7z'/><path d='M8 7V5a4 4 0 0 1 8 0v2'/></svg>");
}
/* Dine In (value 3) — fork + knife */
.config .form-check input[name="order_to"][value="3"]::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3v8'/><path d='M5 3v4a2 2 0 0 0 2 2'/><path d='M9 3v4a2 2 0 0 1-2 2'/><path d='M7 11v10'/><path d='M17 11V3a3 3 0 0 0-3 3v6h3v9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3v8'/><path d='M5 3v4a2 2 0 0 0 2 2'/><path d='M9 3v4a2 2 0 0 1-2 2'/><path d='M7 11v10'/><path d='M17 11V3a3 3 0 0 0-3 3v6h3v9'/></svg>");
}

/* Title (label) + description (added via ::after on label) */
.config .form-check:has(input[name="order_to"]) .form-check-label {
  grid-column: 2 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ms-text) !important;
  text-transform: none !important;
  letter-spacing: -.005em !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}
.config .form-check:has(input[name="order_to"][value="1"]) .form-check-label::after {
  content: "Hot, fresh & to your door";
  display: block;
  margin-top: 3px;
  color: var(--ms-muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.35;
}
.config .form-check:has(input[name="order_to"][value="2"]) .form-check-label::after {
  content: "Pick it up — ready in minutes";
  display: block;
  margin-top: 3px;
  color: var(--ms-muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.35;
}
.config .form-check:has(input[name="order_to"][value="3"]) .form-check-label::after {
  content: "Order at your table";
  display: block;
  margin-top: 3px;
  color: var(--ms-muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.35;
}

/* Right column — checkmark indicator (only renders when checked) */
.config .form-check:has(input[name="order_to"])::after {
  content: "" !important;
  grid-column: 3 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--ms-border-strong) !important;
  background: var(--ms-surface) !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.config .form-check:has(input[name="order_to"]:checked)::after {
  background: var(--ms-text) !important;
  border-color: var(--ms-text) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 12 10 16 18 8'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}
/* (old radio block removed — replaced by the cover-entire-card approach above) */

/* Same treatment for the payment-method radios inside the order summary */
.config .checkout-billing .wc_payment_method {
  position: relative !important;
}
.config .checkout-billing .wc_payment_method:has(input[type="radio"]:checked) {
  border-color: var(--ms-text) !important;
  background: var(--ms-bg) !important;
}
.config .checkout-billing input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--ms-border-strong) !important;
  border-radius: 50% !important;
  background: var(--ms-surface) !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}
.config .checkout-billing input[type="radio"]:checked {
  border-color: var(--ms-text) !important;
}
.config .checkout-billing input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  border-radius: 50% !important;
  background: var(--ms-text) !important;
}

/* Form row spacing for the basic-info group */
.config .checkout_form .basic-info,
.config .checkout_form .form-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin: 16px 0 8px !important;
}
.config .checkout_form .basic-info > .col-md-6,
.config .checkout_form .form-row > .col-md-6,
.config .checkout_form .form-row > .col-md-12 {
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
  padding: 0 !important;
}

/* "Already a user?" + "Coupons and offers" notice cards */
.config .checkout_form .bigbag_notice {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.config .checkout_form .bigbag_notice .btn,
.config .checkout_form .bigbag_notice a.btn {
  background: var(--ms-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ms-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* --- Thank-you page (/thanks) --------------------------------------- */
.config .confirmation-container {
  position: relative !important;
  max-width: 540px !important;
  margin: 24px auto 48px !important;
  padding: 32px 28px !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  text-align: center !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.06) !important;
}
.config .confirmation-thank {
  font-family: var(--ms-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--ms-text) !important;
  margin: 8px 0 14px !important;
  line-height: 1.2 !important;
}
.config .confirmation-detail {
  color: var(--ms-text-2) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 22px !important;
}
.config .confirmation-detail .text-medium {
  font-weight: 700 !important;
  color: var(--ms-text) !important;
  background: var(--ms-bg) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}
.config .confirmation-container .btn,
.config .confirmation-container .btn-success {
  display: inline-block !important;
  margin: 6px 6px !important;
  padding: 10px 22px !important;
  background: var(--ms-text) !important;
  border: 0 !important;
  border-radius: var(--ms-radius) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.config .confirmation-container .btn:first-of-type,
.config .confirmation-container .btn-success:first-of-type {
  background: var(--ms-accent) !important;
}
.config .confirmation-container img.payment-success {
  width: 120px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Confetti canvas overlay */
.ms-confetti-canvas {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9000 !important;
}

/* --------------------------------------------------------------------
   v9.1 — Fix Add-to-cart on mobile.
   style.css ships with `.section-center { z-index: -1 }` inside its
   @media (max-width: 768px) block, which sinks every menu item +
   button BELOW the page. Taps land on the layer above and nothing
   happens. Force z-index back to auto for both .section-center and
   its descendants so the Add buttons receive their clicks.
   ----------------------------------------------------------------- */
.section-center,
.section-center .card,
.section-center .card .col-4,
.section-center .card .col-md-4,
.section-center .card-image-container,
.section-center .add-btn,
.section-center button.add-btn,
.menu-section .add-btn {
  z-index: auto !important;
  position: relative !important;
}
/* The mobile cart CTA + bottom footer must stay above the menu but
   not cover the Add buttons. */
.view-cart-btn-mobile,
.mobile-screen-footer,
.responsive-footer-tab {
  z-index: 50 !important;
}

/* ====================================================================
   v9.4 mobile tweaks (per user request)
   1. Remove the gap above the slider banner
   2. Black background behind the category chip carousel
   3. Bigger price text
   ==================================================================== */
@media (max-width: 767px) {
  /* 1. Slider sits right under the chip bar, no gap on top */
  .banner-container.s-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 2. Black background behind chips. White chip pills already give
        enough contrast for the labels. */
  .rounded-cate-container {
    background: var(--ms-text) !important;        /* near-black */
    border-bottom: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
  }
  /* Chip pills get a hairline white border so they pop on black */
  .rounded-cate-container .rounded-category {
    background: #fff !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: var(--ms-text) !important;
  }
  .rounded-cate-container .rounded-category:hover {
    border-color: #fff !important;
  }
  /* Arrows on black background */
  .rounded-cate-container .cate-bar-arrow p {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
  }

  /* 3. Bigger price */
  .card .product-price,
  .product-price {
    margin: 6px 0 10px !important;
  }
  .card .product-price .offer-price,
  .product-price .offer-price {
    font-size: 17px !important;
    padding: 3px 14px !important;
    border-radius: 8px !important;
  }
  .card .product-price del,
  .product-price del.price {
    font-size: 14px !important;
  }
}

/* ====================================================================
   v9.7 — GoKwik-style checkout (mobile sticky CTA + cleaner sections).
   ==================================================================== */

@media (max-width: 767px) {
  /* Card sections sit on a soft background, each section is a clean
     white card with a subtle header — like GoKwik. */
  .config .checkout_form {
    padding: 0 0 96px !important;   /* room for the fixed bottom bar */
    margin: 0 auto !important;
    background: var(--ms-bg) !important;
  }
  .config .checkout_form > .section,
  .config .checkout_form > .section > .container {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .config .checkout_form > .section > .container > .row {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  .config .checkout_form .col-xl-7,
  .config .checkout_form .col-xl-5,
  .config .checkout_form .checkout-billing {
    width: auto !important;
    max-width: none !important;
    margin: 12px !important;
    padding: 18px 18px !important;
    border-radius: var(--ms-radius-lg) !important;
    border: 1px solid var(--ms-border) !important;
    background: var(--ms-surface) !important;
  }

  /* Progress bar — make subtle and small */
  .config .checkout_form .progress {
    height: 6px !important;
    margin: 0 14px 12px !important;
    border-radius: 999px !important;
    background: var(--ms-border) !important;
  }
  .config .checkout_form .progress-bar {
    background: var(--ms-accent) !important;
    font-size: 0 !important;
    border-radius: 999px !important;
  }

  /* Page heading from single-banner */
  .config .checkout_form .single-banner {
    padding: 14px 14px 0 !important;
    background: transparent !important;
  }
  .config .checkout_form .single-banner h2 { font-size: 20px !important; margin: 0 0 6px !important; }

  /* Section headings */
  .config .checkout_form h4 {
    font-size: 16px !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--ms-border) !important;
    color: var(--ms-text) !important;
  }

  /* Hide the original Place Order button on mobile — we duplicate it
     into a sticky bottom bar (injected via JS in checkout.blade.php).
     The original remains in DOM so its submit handler still fires. */
  .config .checkout_form #place-order { display: none !important; }

  /* The sticky-bottom action bar */
  .ms-checkout-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    background: var(--ms-surface) !important;
    border-top: 1px solid var(--ms-border) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .ms-checkout-bar .ms-cob-total {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .ms-checkout-bar .ms-cob-total small {
    display: block !important;
    color: var(--ms-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }
  .ms-checkout-bar .ms-cob-total strong {
    color: var(--ms-text) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }
  .ms-checkout-bar .ms-cob-cta {
    flex: 0 0 auto !important;
    min-width: 160px !important;
    min-height: 48px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: var(--ms-radius) !important;
    background: var(--ms-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(211,80,39,.22) !important;
  }
  .ms-checkout-bar .ms-cob-cta:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }
}
/* v9.12 — sticky bar is the primary CTA on all viewports now,
   so the old "hide on desktop" rule has been removed. The bar stays
   visible at desktop and mobile. */

/* ====================================================================
   v9.9 — Cart page: reuse menu/checkout theme styling for the items,
   quantity stepper, Remove button, and totals card.
   ==================================================================== */

/* Cart page outer container */
.config .cart-container {
  background: var(--ms-bg) !important;
}

/* "Shopping Cart (N Item)  ·  Total ₹X" header */
.config .cart-section .bg-light.rounded.p-3 {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  padding: 16px 20px !important;
  margin-bottom: 18px !important;
  box-shadow: none !important;
}
.config .cart-section .cart-titles,
.config .cart-section .cart-total,
.config .cart-section h5 {
  font-family: var(--ms-font) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ms-text) !important;
  letter-spacing: 0 !important;
}

/* Left column — items list */
.config #emptyCart {
  padding: 0 !important;
  background: transparent !important;
}
.config #removeCartCard {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
/* Each item card the JS creates */
.config #removeCartCard a.card,
.config #removeCartCard > a.card.border.rounded {
  display: block !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  margin: 0 0 12px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .15s ease, transform .15s ease !important;
}
.config #removeCartCard a.card:hover {
  border-color: var(--ms-border-strong) !important;
}
.config #removeCartCard a.card .row.no-gutters {
  flex-wrap: nowrap !important;
  margin: 0 !important;
  gap: 14px !important;
  align-items: center !important;
}
.config #removeCartCard a.card .card-image-container {
  flex: 0 0 64px !important;
  width: 64px !important;
  max-width: 64px !important;
  padding: 0 !important;
}
.config #removeCartCard a.card .card-img {
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--ms-radius) !important;
  border: 1px solid var(--ms-border) !important;
  object-fit: cover !important;
  background: var(--ms-bg) !important;
}
.config #removeCartCard a.card .card-body {
  padding: 0 !important;
}
.config #removeCartCard .cart-product-name {
  color: var(--ms-text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}
.config #removeCartCard .cart-offer-price {
  color: var(--ms-text) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  margin: 2px 0 0 !important;
}

/* Quantity stepper — kill the blue border/text */
.config #removeCartCard .border.border-primary {
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-sm) !important;
  color: var(--ms-text) !important;
  padding: 2px 6px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: var(--ms-surface) !important;
  user-select: none !important;
}
.config #removeCartCard .border.border-primary > div {
  padding: 4px 10px !important;
  cursor: pointer !important;
  color: var(--ms-text) !important;
}
.config #removeCartCard .border.border-primary .border-start,
.config #removeCartCard .border.border-primary .border-end,
.config #removeCartCard .border.border-primary .border-secondary {
  border-color: var(--ms-border) !important;
}

/* Remove button — clean outline ghost (no garish red bg) */
.config #removeCartCard .remove-btn,
.config #removeCartCard button.remove-btn {
  background: var(--ms-surface) !important;
  background-color: var(--ms-surface) !important;  /* beats the inline style */
  color: var(--ms-nonveg) !important;
  border: 1px solid rgba(192, 57, 43, .25) !important;
  border-radius: var(--ms-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  height: auto !important;
  min-height: 32px !important;
  box-shadow: none !important;
  transition: background .12s ease, color .12s ease !important;
}
.config #removeCartCard .remove-btn:hover {
  background: var(--ms-nonveg) !important;
  background-color: var(--ms-nonveg) !important;
  color: #fff !important;
  border-color: var(--ms-nonveg) !important;
}

/* Right column — totals card */
.config .cart-section .col-lg-4 .border.rounded-top,
.config .cart-section .col-lg-4 .border.border-top-0 {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  box-shadow: none !important;
}
.config .cart-section .col-lg-4 .border.rounded-top {
  border-radius: var(--ms-radius-lg) var(--ms-radius-lg) 0 0 !important;
  padding: 18px 20px !important;
}
.config .cart-section .col-lg-4 .border.border-top-0 {
  border-top: 0 !important;
  border-radius: 0 0 var(--ms-radius-lg) var(--ms-radius-lg) !important;
  padding: 16px 20px !important;
}
.config .cart-section .item-total,
.config .cart-section .grand-total {
  color: var(--ms-text-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.config .cart-section .item-total-price,
.config .cart-section .grand-total-price {
  color: var(--ms-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.config .cart-section .grand-total {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ms-text) !important;
}
.config .cart-section .grand-total-price {
  font-size: 17px !important;
}
.config .cart-section hr {
  margin: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ms-border) !important;
  opacity: 1 !important;
}

/* Checkout button at the bottom of totals */
.config .cart-section .continue-btn,
.config .cart-section .btn.continue-btn {
  background: var(--ms-accent) !important;
  background-color: var(--ms-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ms-radius) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  letter-spacing: .02em !important;
}
.config .cart-section .continue-btn:hover { background: var(--ms-accent-hover) !important; }

/* Terms & Conditions checkbox row */
.config .cart-section .form-check {
  margin: 0 0 10px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
}
.config .cart-section .form-check input[type="checkbox"] {
  accent-color: var(--ms-text) !important;
  width: 16px !important;
  height: 16px !important;
}
.config .cart-section .form-check-label {
  color: var(--ms-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.config .cart-section .form-check-label a {
  color: var(--ms-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* --- Mobile tweaks ---------------------------------------------------- */
@media (max-width: 767px) {
  .menu-section {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin-bottom: 0 !important;
    /* Allow .section-title (sticky child) to actually stick. With overflow:hidden
       on the parent, sticky stops working. */
    overflow: visible !important;
  }
  /* Pin the category title at the top of the viewport, right below the header
     + the sticky chip bar, so users always know which category they're in. */
  .section-title {
    position: sticky !important;
    /* 100px header + ~65px chip bar = 165px. Keeps the title fully visible
       and never lets the chip bar overlap the title. */
    top: 165px !important;
    z-index: 30 !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: var(--ms-surface) !important;
    border-bottom: 1px solid var(--ms-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.04) !important;
  }
  .section-title p { font-size: 15px !important; font-weight: 700 !important; }
  .section-center .card, .menu-section .card { padding: 14px 16px !important; }
  .product-name { font-size: 14px !important; }
  .card-image-container img.card-img { width: 72px !important; height: 72px !important; }
  .card .add-btn { height: 32px !important; min-height: 32px !important; padding: 0 16px !important; font-size: 12px !important; min-width: 72px !important; }
  .rounded-category { font-size: 12px !important; min-height: 32px !important; padding: 0 12px !important; }
  .cate-bar { padding: 0 16px 8px !important; }
  .rounded-category-container { padding: 0 16px 12px !important; }
}

/* ============================================================
   v9.11 - Product Badges (Swiggy / Zomato style pills)
   Renders below the product name. Each badge is a small filled
   pill with optional icon. Backend feeds the badge codes from
   the meta table; styling is fully controlled from CSS so all
   variants stay visually consistent regardless of source.
   ============================================================ */

.ms-prod-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px 0;
  line-height: 1;
}

.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.4);
  vertical-align: middle;
}

.ms-badge i {
  font-size: 11px;
  line-height: 1;
}

/* Slightly bigger on the product details page where there's more room */
.pd-detail .ms-prod-badges .ms-badge {
  font-size: 12px;
  padding: 5px 10px;
}
.pd-detail .ms-prod-badges .ms-badge i { font-size: 12px; }

/* Tighter on small screens so they don't push the price/CTA off the card */
@media (max-width: 575.98px) {
  .ms-prod-badges { gap: 4px; margin: 4px 0 2px 0; }
  .ms-badge { font-size: 10px; padding: 3px 7px; }
  .ms-badge i { font-size: 10px; }
}

/* ====================================================================
   v9.12 — Checkout page redesign (matches the 1944 reference card layout)
   Stepper, coupon row, delivery options, address, contact, summary.
   Hides legacy 2-column grid; everything is single column, one-per-line.
   ==================================================================== */

.ms-co { background: #f5f6f8; padding: 16px 0 110px 0; }

.ms-co-wrap {
  max-width: 720px !important;
  padding-left: 16px;
  padding-right: 16px;
}

/* ---------- Stepper ---------- */
.ms-co-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 4px 22px 4px;
  margin: 0 auto 16px;
}
.ms-co-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  flex: 0 0 auto;
}
.ms-co-step-bubble {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #e9eaee;
  color: #8a8e98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background .15s, color .15s;
}
.ms-co-step.active .ms-co-step-bubble {
  background: var(--ms-accent, #d35027);
  color: #fff;
  box-shadow: 0 6px 14px rgba(211, 80, 39, 0.25);
}
.ms-co-step-label {
  font-size: 12px;
  font-weight: 600;
  color: #8a8e98;
  letter-spacing: .02em;
}
.ms-co-step.active .ms-co-step-label { color: var(--ms-accent, #d35027); }
.ms-co-step-line {
  flex: 1 1 auto;
  height: 2px;
  background: #e3e5e9;
  max-width: 120px;
  margin-bottom: 18px;
}

/* ---------- Card shell ---------- */
.ms-co-card {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 14px;
  padding: 18px 18px 16px 18px;
  margin: 0 0 14px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.ms-co-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ms-co-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #1c1f24;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}
.ms-co-card-title-aside {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #8a8e98;
}

/* ---------- Coupon card ---------- */
.ms-co-coupon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.ms-co-coupon:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.ms-co-coupon-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(22, 163, 74, 0.10);
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.ms-co-coupon-text { flex: 1 1 auto; min-width: 0; }
.ms-co-coupon-text strong {
  display: block;
  color: #1c1f24;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.ms-co-coupon-text small {
  display: block;
  color: #8a8e98;
  font-size: 12px;
  margin-top: 2px;
}
.ms-co-coupon-cta {
  color: var(--ms-accent, #d35027);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* ---------- Delivery options ---------- */
.ms-co-delivery-list,
.ms-co-pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-co-delivery-opt,
.ms-co-pay-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  background: #fafbfc;
  border: 1.5px solid #e3e5e9;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  margin: 0;
  position: relative;
}
.ms-co-delivery-opt:hover,
.ms-co-pay-opt:hover {
  background: #fff;
  border-color: #cdd0d6;
}
.ms-co-delivery-opt.is-selected,
.ms-co-pay-opt.is-selected {
  background: rgba(211, 80, 39, 0.06);
  border-color: var(--ms-accent, #d35027);
  box-shadow: 0 2px 8px rgba(211, 80, 39, 0.10);
}
.ms-co-delivery-icon,
.ms-co-pay-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: #ececef;
  color: #6b6f78;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.ms-co-delivery-opt.is-selected .ms-co-delivery-icon,
.ms-co-pay-opt.is-selected .ms-co-pay-icon {
  background: var(--ms-accent, #d35027);
  color: #fff;
}
.ms-co-delivery-meta,
.ms-co-pay-meta { flex: 1 1 auto; min-width: 0; }
.ms-co-delivery-meta strong,
.ms-co-pay-meta strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1c1f24;
  line-height: 1.2;
}
.ms-co-delivery-meta small,
.ms-co-pay-meta small {
  display: block;
  font-size: 12px;
  color: #8a8e98;
  margin-top: 2px;
}
.ms-co-delivery-radio,
.ms-co-pay-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ms-co-delivery-check,
.ms-co-pay-check {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid #c7cad0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 14px;
  transition: all .15s;
}
.ms-co-delivery-opt.is-selected .ms-co-delivery-check,
.ms-co-pay-opt.is-selected .ms-co-pay-check {
  background: var(--ms-accent, #d35027);
  border-color: var(--ms-accent, #d35027);
  color: #fff;
}

/* ---------- Fields (one input per line) ---------- */
.ms-co-field { margin-bottom: 14px; position: relative; }
.ms-co-field:last-child { margin-bottom: 0; }
.ms-co-field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #8a8e98;
  margin-bottom: 6px;
  letter-spacing: .01em;
  text-transform: none;
}
.ms-co-field .form-control,
.ms-co-field select.form-control {
  width: 100% !important;
  height: 46px;
  padding: 12px 14px;
  border: 1.5px solid #e3e5e9;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #1c1f24;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none !important;
}
.ms-co-field textarea.form-control {
  height: auto;
  min-height: 84px;
  resize: vertical;
}
.ms-co-field .form-control:focus,
.ms-co-field select.form-control:focus {
  border-color: var(--ms-accent, #d35027) !important;
  box-shadow: 0 0 0 3px rgba(211, 80, 39, 0.12) !important;
  outline: none;
}
.ms-co-field .form-control::placeholder { color: #b0b3ba; }

/* Icon prefix inside the field (phone/name/email) */
.ms-co-field-icon .form-control { padding-left: 42px; }
.ms-co-field-prefix {
  position: absolute;
  left: 14px;
  top: 36px;
  color: #8a8e98;
  font-size: 16px;
  pointer-events: none;
}

.ms-co-contact-card {
  overflow: visible;
}
.ms-co-contact-card .ms-co-field {
  display: block !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  position: relative !important;
}
.ms-co-contact-card .ms-co-field:last-child {
  margin-bottom: 0 !important;
}
.ms-co-contact-card .ms-co-field > label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 7px 0 !important;
  line-height: 1.25 !important;
}
.ms-co-contact-card .ms-co-field-icon .form-control {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 12px 14px 12px 48px !important;
  line-height: 22px !important;
  box-sizing: border-box !important;
}
.ms-co-contact-card .ms-co-field-prefix {
  left: 15px !important;
  top: 34px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #7b808a !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
.ms-co-contact-card .ms-co-field-prefix i {
  display: block !important;
  line-height: 1 !important;
}

/* Sign-in prompt above the form */
.ms-co-signin-prompt {
  background: #fff8ef;
  border: 1px dashed #f0c178;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #6b4b1a;
}
.ms-co-signin-prompt a {
  color: var(--ms-accent, #d35027);
  font-weight: 700;
  margin-left: 4px;
}

/* ---------- Order summary ---------- */
.ms-co-summary-card { padding-bottom: 14px; }
.ms-co-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 14px;
  color: #1c1f24;
}
.ms-co-summary-label { color: #4d525c; }
.ms-co-summary-sub { color: #8a8e98; font-size: 12px; margin-left: 4px; }
.ms-co-summary-value { color: #1c1f24; font-weight: 600; }
.ms-co-summary-icon { color: #16a34a; margin-right: 4px; }
.ms-co-summary-discount { color: #16a34a !important; font-weight: 700; }
.ms-co-summary-divider {
  border-top: 1px dashed #e3e5e9;
  margin: 10px 0 6px 0;
}
.ms-co-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin-top: 4px;
  background: #f5f6f8;
  border-radius: 10px;
}
.ms-co-summary-total strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1c1f24;
  line-height: 1.2;
}
.ms-co-summary-total small {
  display: block;
  font-size: 11px;
  color: #8a8e98;
  margin-top: 2px;
}
.ms-co-summary-total-value {
  font-size: 18px;
  font-weight: 800;
  color: #1c1f24;
}
.ms-co-summary-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(14, 165, 233, 0.08);
  color: #0369a1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.ms-co-summary-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(22, 163, 74, 0.10);
  color: #16a34a;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Sticky bottom bar (the redesigned version) ---------- */
.ms-checkout-bar {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  border-top: 1px solid #ececef !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06) !important;
}
.ms-checkout-bar .ms-cob-total {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ms-checkout-bar .ms-cob-total small {
  display: block !important;
  color: #8a8e98 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
.ms-checkout-bar .ms-cob-total strong {
  color: #1c1f24 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  display: block !important;
}
.ms-checkout-bar .ms-cob-details {
  background: transparent;
  border: 0;
  padding: 2px 0;
  color: var(--ms-accent, #d35027);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  cursor: pointer;
}
.ms-checkout-bar .ms-cob-cta {
  flex: 0 0 auto !important;
  min-width: 180px !important;
  min-height: 50px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ms-accent, #d35027) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 20px rgba(211, 80, 39, 0.22) !important;
}
.ms-checkout-bar .ms-cob-cta:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Show the sticky bar on every viewport now (reference design uses it everywhere) */
@media (min-width: 768px) {
  .ms-checkout-bar { display: flex !important; }
  .ms-co-wrap { max-width: 760px !important; }
}

/* Hide legacy elements that we replaced with the new cards */
.config .checkout-form-section > .row.d-none,
.config .checkout-form-section > .progress.d-none,
.config .bigbag_notice { display: none !important; }

/* Mobile tweaks */
@media (max-width: 575.98px) {
  .ms-co-wrap { padding-left: 12px; padding-right: 12px; }
  .ms-co-card { padding: 14px 14px 12px 14px; border-radius: 12px; }
  .ms-co-card-title { font-size: 15px; margin-bottom: 12px; }
  .ms-co-step-line { max-width: 60px; }
  .ms-checkout-bar .ms-cob-cta { min-width: 160px !important; }
  .ms-co-delivery-icon, .ms-co-pay-icon { width: 38px; height: 38px; font-size: 18px; }
  .ms-co-delivery-meta strong, .ms-co-pay-meta strong { font-size: 14px; }
}

/* ====================================================================
   v9.13 — Menu page in-page search box.
   Sits below the rounded category strip, above the offer banners.
   Compact, doesn't disrupt the existing layout. Auto-hides on
   /shop /cart /checkout (only used on the homepage menu).
   ==================================================================== */

.ms-menu-search {
  padding: 0 16px 6px 16px;
  margin: 6px 0 4px 0;
}
.ms-menu-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ms-surface, #fff);
  border: 1px solid var(--ms-border, #e3e5e9);
  border-radius: 12px;
  padding: 0 10px;
  height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
.ms-menu-search-inner:focus-within {
  border-color: var(--ms-accent, #d35027);
  box-shadow: 0 0 0 3px rgba(211, 80, 39, 0.10);
}
.ms-menu-search-icon {
  color: #8a8e98;
  font-size: 16px;
  margin: 0 8px 0 4px;
  flex: 0 0 auto;
}
.ms-menu-search-input {
  flex: 1 1 auto;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #1c1f24;
  padding: 0 4px;
  min-width: 0;
}
.ms-menu-search-input::placeholder {
  color: #b0b3ba;
}
.ms-menu-search-clear {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: #b0b3ba;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  transition: color .15s;
}
.ms-menu-search-clear:hover { color: #4d525c; }

/* Wider on desktop so the search bar matches the centre column */
@media (min-width: 992px) {
  .ms-menu-search {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* No-results empty state */
.ms-menu-search-empty {
  padding: 64px 24px;
  text-align: center;
  color: #4d525c;
}
.ms-menu-search-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #f5f6f8;
  color: #8a8e98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.ms-menu-search-empty h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1c1f24;
  margin: 0 0 6px 0;
}
.ms-menu-search-empty p {
  font-size: 14px;
  color: #8a8e98;
  margin: 0;
}

/* ====================================================================
   v9.14 — Orders page (themed) + Shop / search results layout.
   ==================================================================== */

/* ---------- /user/orders ---------- */
.ms-orders { padding: 4px 0 40px 0; }
.ms-orders-head { margin-bottom: 18px; }
.ms-orders-title {
  font-size: 22px;
  font-weight: 800;
  color: #1c1f24;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.ms-orders-sub {
  font-size: 13px;
  color: #8a8e98;
  margin: 0;
}
.ms-orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-order-card {
  display: block;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 14px;
  padding: 16px;
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow .15s, border-color .15s, transform .12s;
}
.ms-order-card:hover {
  border-color: #d6d9df;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.ms-order-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ms-order-card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(211, 80, 39, 0.10);
  color: var(--ms-accent, #d35027);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.ms-order-card-meta { flex: 1 1 auto; min-width: 0; }
.ms-order-card-no {
  font-size: 14px;
  font-weight: 700;
  color: #1c1f24;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.ms-order-card-date {
  font-size: 12px;
  color: #8a8e98;
  margin-top: 2px;
}
.ms-order-card-total {
  font-size: 16px;
  font-weight: 800;
  color: #1c1f24;
  flex: 0 0 auto;
}
.ms-order-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.ms-order-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
}
.ms-order-chip.is-success { background: rgba(22, 163, 74, 0.10); color: #15803d; }
.ms-order-chip.is-warn    { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.ms-order-chip.is-info    { background: rgba(14, 165, 233, 0.12); color: #0369a1; }
.ms-order-chip.is-danger  { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.ms-order-chip.is-muted   { background: #f5f6f8; color: #4d525c; }
.ms-order-chip i { font-size: 11px; }
.ms-order-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.ms-order-card-link {
  color: var(--ms-accent, #d35027);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Empty state */
.ms-orders-empty {
  padding: 60px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 14px;
}
.ms-orders-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #f5f6f8;
  color: #8a8e98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.ms-orders-empty h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1c1f24;
  margin: 0 0 6px 0;
}
.ms-orders-empty p {
  font-size: 14px;
  color: #8a8e98;
  margin: 0 0 16px 0;
}
.ms-orders-empty-cta {
  display: inline-block;
  padding: 10px 22px;
  background: var(--ms-accent, #d35027);
  color: #fff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(211, 80, 39, 0.22);
}
.ms-orders-pagination { display: flex; justify-content: center; }
.ms-orders-pagination .pagination { gap: 4px; }

/* Override breadcrumb on dashboard pages so it looks lighter */
.dashboard-container .breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}
.dashboard-container .breadcrumb-item a {
  color: #8a8e98;
  font-size: 12px;
  text-transform: capitalize;
}
.dashboard-container .breadcrumb-item.active a,
.dashboard-container .breadcrumb-item:last-child a {
  color: var(--ms-accent, #d35027);
  font-weight: 600;
}

/* Soften the left sidebar in /user/* pages so it matches the theme */
.dashboard-container .dash__box {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 14px;
  box-shadow: none;
}
.dashboard-container .dash__pad-1 { padding: 16px; }
.dashboard-container .dash__text {
  display: block;
  font-size: 13px;
  color: #8a8e98;
  margin-bottom: 10px;
}
.dashboard-container .dash__text b { color: #1c1f24; font-weight: 700; }
.dashboard-container .list-group .list-group-item {
  border: 0;
  padding: 8px 10px;
  border-radius: 10px;
}
.dashboard-container .list-group .list-group-item a {
  display: block;
  color: #4d525c;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
}
.dashboard-container .list-group .list-group-item a:hover,
.dashboard-container .list-group .list-group-item a.dash-active {
  background: rgba(211, 80, 39, 0.08);
  color: var(--ms-accent, #d35027);
  padding: 8px 10px;
  border-radius: 10px;
  margin: 0 -2px;
}

/* ---------- /shop_products ---------- */
.ms-shop { padding: 8px 0 100px 0; }
.ms-shop-search {
  max-width: 720px;
  margin: 0 auto 8px auto;
  padding: 0 16px;
}
.ms-shop-result-head {
  max-width: 720px;
  margin: 0 auto 4px auto;
  padding: 8px 20px 0 20px;
  font-size: 13px;
  color: #4d525c;
}
.ms-shop-result-head strong { color: #1c1f24; }
.ms-shop-back-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--ms-accent, #d35027);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
}
.ms-shop-list-wrap { padding-top: 4px; }
.ms-shop-list-wrap .section-center { padding: 0 16px; }
.ms-shop-pagination {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.ms-shop-pagination .pagination { gap: 4px; }
@media (min-width: 992px) {
  .ms-shop-list-wrap { max-width: 760px; margin: 0 auto; }
}

/* ====================================================================
   v9.15 — Desktop homepage polish
   - Hide the duplicate in-page search (header search drives the filter)
   - Hide the category "scroll" arrow icons next to the CATEGORY label
   - Tighten the gap between the sticky header and the category chip strip
   - Tweak the banner slider so it actually slides on desktop
   ==================================================================== */

@media (min-width: 992px) {
  /* 1) Hide my added in-page search on desktop — header already has one */
  .ms-menu-search { display: none !important; }

  /* 2) Hide the left/right scroll arrows that sat next to "CATEGORY".
        They were the two small circles users saw on the right. */
  .cate-bar-arrow,
  .cate-bar-arrow-l,
  .cate-bar-arrow-r { display: none !important; }

  /* 3) Pull the category strip flush against the header — remove the
        empty white gap that sat between them. */
  .rounded-cate-container {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .cate-bar { padding-top: 0 !important; padding-bottom: 8px !important; }

  /* 4) Banner slider — give each slide proper proportions so it actually
        slides on desktop (instead of three static columns). */
  .banner-container.s-banner .slick-list { overflow: hidden !important; }
  .banner-container.s-banner .slick-slide { padding: 0 6px !important; }
  .banner-container.s-banner img.bnr-img {
    height: 220px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }
  .banner-container.s-banner .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
}

/* =========================================================================
   v10 — Right-side sticky cart panel polish.
   Replaces the spaghetti string-built cart (empty white header, mismatched
   buttons, no images, no line totals) with a clean Swiggy/Zomato-style
   panel. All classes are `rc-*` so it never collides with legacy cart CSS.
   ========================================================================= */
.rc-cart {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
}
.rc-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
  border-bottom: 1px solid #f0f0f0;
}
.rc-cart-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #1a1a1a;
}
.rc-cart-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
}
.rc-cart-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.rc-cart-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6a6a6a;
  background: #f3f3f3;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 4px;
}
.rc-cart-clear {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #c0392b;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
}
.rc-cart-clear:hover { background: #fee9e7; }

/* Items list */
.rc-cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 14px;
  -webkit-overflow-scrolling: touch;
}
.rc-cart-items::-webkit-scrollbar { width: 6px; }
.rc-cart-items::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius: 3px; }

.rc-cart-item {
  display: flex;
  align-items: flex-start;   /* don't stretch — short content shouldn't pull stepper down */
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed #ececec;
}
.rc-cart-item:last-child { border-bottom: 0; }
.rc-item-info { flex: 1; min-width: 0; padding-top: 2px; }
.rc-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 4px;
  word-break: break-word;
}
.rc-item-variants {
  font-size: 11px;
  color: #8a8a8a;
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.rc-item-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  /* sits on the LEFT under the name — no auto-margin pushing it sideways */
}
.rc-item-price {
  font-size: 12px;
  color: #6a6a6a;
  font-weight: 500;
}
/* Unit-price chip — only shown when qty > 1, e.g. "₹40 × 2" */
.rc-item-unit {
  font-size: 11px;
  color: #8a8a8a;
  font-weight: 500;
  letter-spacing: .01em;
}
.rc-item-line-total {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 800;
  /* no margin-left: auto — let it sit naturally to the left */
}
.rc-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;   /* tight stack, not space-between */
  gap: 10px;
  flex-shrink: 0;
}
.rc-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  height: 30px;
}
.rc-step-btn {
  border: 0;
  background: #fff;
  color: #1a1a1a;
  width: 26px;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.rc-step-btn:hover { background: #1a1a1a; color: #fff; }
.rc-step-qty {
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  border-left: 1px solid #1a1a1a;
  border-right: 1px solid #1a1a1a;
  padding: 0 6px;
  line-height: 28px;
}
.rc-item-remove {
  border: 0;
  background: transparent;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #8a8a8a;
  cursor: pointer;
  font-size: 11px;
  transition: all .15s;
}
.rc-item-remove:hover {
  background: #fee9e7;
  color: #c0392b;
}

/* Totals */
.rc-cart-totals {
  padding: 14px 16px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}
.rc-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -.01em;
}
.rc-cart-note {
  font-size: 11px;
  color: #8a8a8a;
  margin-top: 4px;
}

/* CTA */
.rc-cart-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 16px 16px;
  padding: 14px 18px;
  background: #1a1a1a;
  color: #fff !important;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 12px;
  text-decoration: none !important;
  transition: all .15s;
  border: 0;
}
.rc-cart-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.rc-cart-cta.is-disabled {
  background: #d0d0d0;
  cursor: not-allowed;
  pointer-events: none;
}
.rc-cart-cta i { font-size: 12px; }

/* Empty state */
.rc-cart-empty {
  padding-bottom: 24px;
  min-height: 320px;
}
.rc-empty-illustration {
  display: grid;
  place-items: center;
  padding: 32px 16px 12px;
}
.rc-empty-illustration img { max-width: 110px; height: auto; opacity: .85; }
.rc-empty-illustration i { font-size: 60px; color: #d0d0d0; }
.rc-empty-text {
  text-align: center;
  padding: 4px 20px 20px;
  display: grid;
  gap: 6px;
}
.rc-empty-text strong {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
}
.rc-empty-text span {
  font-size: 13px;
  color: #8a8a8a;
  line-height: 1.4;
}

/* Track Order floating button — pull it INSIDE the page boundary so it doesn't look orphaned */
.track-order, .track-order-btn, #track-order {
  bottom: 18px !important;
  right: 18px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}