/* ==========================================================================
   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 {
  /* Pure-white base for a brighter, more positive feel. --ms-bg2 keeps a
     whisper-soft tint for the few places that need separation on white
     (progress tracks, image placeholders, subtle hovers). */
  --ms-bg: #ffffff;
  --ms-bg2: #f4f6f8;
  --ms-surface: #ffffff;
  --ms-border: rgba(20, 20, 20, .10);
  --ms-border-strong: rgba(20, 20, 20, .16);
  --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;
}
/* Compact header — trimmed from the old 80–100px down to ~58px so the
   storefront shows more product above the fold. Logo + search + actions
   stay vertically centered inside the shorter bar. */
.config .header-navbar > .container-wrap { height: 58px !important; }
.config .header-navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: 58px !important;
}
.config .header-navbar .logo-container img {
  max-height: 38px !important;
  margin-left: 8px !important;
}
.config .header-navbar input[type="search"],
.config .header-navbar input.form-control {
  height: 40px !important;
}
.config .header-navbar .search-btn { height: 40px !important; }
@media (max-width: 768px) {
  .config .header-navbar { height: 64px !important; }
  .config .header-navbar > .container-wrap { height: 64px !important; }
  .config .header-navbar .logo-container img { max-height: 46px !important; }
  .config .header-navbar input[type="search"],
  .config .header-navbar input.form-control,
  .config .header-navbar .search-btn { height: 38px !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 {
    /* Was -100px, which pulled the slider up behind the sticky header.
       -51px leaves a ~3px gap between the header and the slider. */
    margin-top: -51px !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;
  /* Pin flush below the 58px compact header — no gap. */
  top: 58px !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; }
  /* height:auto here is critical — the drawer-menu carries height:100vh for
     the mobile slide-in panel, which on desktop forced the category box taller
     than its visible area and produced a stray scrollbar. Let it fit content. */
  .responsive-sidebar-container .drawer-menu {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* With the drawer no longer forcing full height, the sidebar box only scrolls
     if a store genuinely has a long category list — and then with a thin bar. */
  .section-left { scrollbar-width: thin; }
  .section-left::-webkit-scrollbar { width: 6px; }
  .section-left::-webkit-scrollbar-thumb { background: var(--ms-border-strong); border-radius: 3px; }
}
/* 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;
  /* Pin flush below the 58px compact header — no gap. */
  top: 58px !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 52px tall on mobile. Pin the chip bar flush below it. */
    top: 52px !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: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(440px, 92vw) !important;
    max-width: 100vw !important;
    /* Fit the drawer to its content (no empty white below the checkout
       button); only grow up to near-full-height, then the list scrolls. */
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    z-index: 200 !important;
    background: var(--ms-surface) !important;
    border: 1px solid var(--ms-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.22) !important;
    /* Slide in from the right; +20px keeps the shadow off-screen when closed. */
    transform: translateX(calc(100% + 20px)) !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
    flex-direction: column !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: 14px 14px 16px !important;
    margin: 0 !important;
    /* Size to content; scroll only when the cart is taller than the cap. */
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    height: auto !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) {
  /* Clean borderless icon button (bi-list) instead of the boxed bars. */
  .ms-mobile-menu-btn {
    display: inline-grid !important;
    place-items: center !important;
    position: relative !important;
    z-index: 3 !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    align-self: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .ms-mobile-menu-btn:active { background: color-mix(in oklab, var(--ms-accent) 10%, #fff) !important; }
  .ms-mobile-menu-btn i {
    font-size: 28px !important;
    line-height: 1 !important;
    color: var(--ms-text) !important;
  }

  /* 3-column mobile header: menu (left) · logo (true center) · cart (right). */
  .config .header-navbar .container.container-wrap {
    position: relative !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }
  /* Hide the desktop spacer + inline search on mobile so they don't break the
     3-column balance (search lives in the bottom nav on mobile). */
  .config .header-navbar .container.container-wrap > div[style*="width:auto"],
  .config .header-navbar .search-container { display: none !important; }

  /* Logo pinned to the true centre of the header, regardless of side widths. */
  .config .header-navbar .logo-icon-parent,
  .config .header-navbar > .container-wrap > a.logo-container {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
  .config .header-navbar .logo-container img {
    margin: 0 !important;
    max-height: 48px !important;
    width: auto !important;
  }
  .config .header-navbar .logo-container h5 { margin: 0 !important; }

  /* Cart cluster sits hard right; show only the cart, clean outline icon. */
  .config .header-navbar .nav-links-container {
    position: relative !important;
    right: 0 !important;
    margin-left: auto !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .config .nav-links-container .mob-navlink-category,
  .config .nav-links-container .mob-navlink-account { display: none !important; }
  .config .nav-links-container .mob-navlink-bag {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
  }
  /* Keep the badge (inside this div) but drop the "Cart" text label. */
  .config .nav-links-container .mob-navlink-bag > div { display: contents !important; }
  .config .nav-links-container .mob-navlink-bag > div > span { display: none !important; }
  .config .nav-links-container .mob-navlink-bag i {
    font-size: 25px !important;
    color: var(--ms-text) !important;
  }
  /* Count badge → small accent dot pinned to the bag's top-right. */
  .config .nav-links-container .mob-navlink-bag #cart_count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    background: var(--ms-accent) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
    text-shadow: none !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: 12px;
  padding: 12px 14px;
  min-height: 56px;             /* slim but still tappable on mobile */
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin: 0;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ms-co-delivery-opt:hover,
.ms-co-pay-opt:hover {
  border-color: #c7cad0;
}
.ms-co-delivery-opt.is-selected,
.ms-co-pay-opt.is-selected {
  background: rgba(211, 80, 39, 0.04);
  border-color: var(--ms-accent, #d35027);
  /* No border-width jump — layout stays still. */
}
/* Belt-and-braces: kill any browser-default radio dot leaking through
   from native input rendering. The visible ms-co-pay-check element on the
   right is the only "selected" indicator we want to render. */
.ms-co-pay-opt input[type="radio"],
.ms-co-delivery-opt input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0; left: 0;
  margin: 0 !important;
  cursor: pointer;
  z-index: 1;
  pointer-events: none;         /* let the label own the click — input still toggles via `for=` */
}
.ms-co-delivery-icon,
.ms-co-pay-icon {
  width: 32px; height: 32px;    /* slimmer icon chip */
  border-radius: 8px;
  background: #f4f4f6;
  color: #6b6f78;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  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: 14px;
  font-weight: 600;
  color: #1c1f24;
  line-height: 1.3;
  text-transform: none;          /* no all-caps; cleaner reading */
  letter-spacing: 0;
}
.ms-co-delivery-meta small,
.ms-co-pay-meta small {
  display: block;
  font-size: 12px;
  color: #8a8e98;
  margin-top: 1px;
}
.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: 18px; height: 18px;     /* minimal radio dot */
  border-radius: 50%;
  border: 1.5px solid #c7cad0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;                  /* hide the check glyph — dot-only style */
  transition: border-color .15s, background .15s;
  position: relative;
}
.ms-co-delivery-opt.is-selected .ms-co-delivery-check,
.ms-co-pay-opt.is-selected .ms-co-pay-check {
  border-color: var(--ms-accent, #d35027);
}
/* Inner dot when selected — like a native radio */
.ms-co-delivery-opt.is-selected .ms-co-delivery-check::after,
.ms-co-pay-opt.is-selected .ms-co-pay-check::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ms-accent, #d35027);
}

/* ---------- 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;
}

/* ============================================================
   v9.17 — Header/content gap fix
   The header is now a 58px STICKY (in-flow) bar. The legacy
   `top:100px` offsets in style.css were written for the old
   FIXED 100px header and now push content down ~100px, creating
   a gap below the header (both at the top of the page and when
   the category/menu columns stick while scrolling). Neutralize
   the push-down and pin sticky children flush under the header.
   ============================================================ */
.config .banner-container,
.config .rounded-cate-container,
.config section,
.config .search-box {
  top: 0 !important;
}
.config .section-title,
.config .section-left-container,
.config .section-right-container,
.config .section-left,
.config .section-right {
  top: 58px !important;
}
@media (max-width: 767px) {
  .config .section-title,
  .config .section-left-container,
  .config .section-right-container,
  .config .section-left,
  .config .section-right {
    top: 52px !important;
  }
}

/* v9.17 — Cart/checkout top-gap: the old fixed-header layout reserved
   80px above these containers. With the compact sticky header that
   becomes dead space. Trim it to a small, intentional breathing gap. */
.config .cart-container,
.config .single-banner {
  margin-top: 16px !important;
}

/* ============================================================
   v9.18 — Left category list + right "Your Order" panel polish
   ============================================================ */

/* ---- LEFT CATEGORY LIST: modern rows, accent active state, count pills ---- */
.config .section-left-container { padding: 10px !important; }
.config .section-left .cateList,
.config .section-left a.cateList {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ms-text-2) !important;
}
.config .section-left .cate-name { line-height: 1.25; }
.config .section-left .cate-count {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ms-muted);
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  padding: 2px 9px;
  border-radius: 999px;
  min-width: 26px;
  text-align: center;
}
.config .section-left .cateList:hover {
  background: var(--ms-bg) !important;
  color: var(--ms-text) !important;
}
.config .section-left li.active .cateList,
.config .section-left .cateList.active {
  background: color-mix(in oklab, var(--ms-accent) 12%, #fff) !important;
  color: var(--ms-accent) !important;
  box-shadow: inset 3px 0 0 var(--ms-accent) !important;
}
.config .section-left li.active .cate-count,
.config .section-left .cateList.active .cate-count {
  background: var(--ms-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---- RIGHT "YOUR ORDER" PANEL: accent-driven, more refined ---- */
.config .rc-cart { border-color: var(--ms-border) !important; box-shadow: 0 6px 22px rgba(20,17,15,.06) !important; }
.config .rc-cart-icon {
  background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-hover)) !important;
}
.config .rc-cart-count {
  color: var(--ms-accent) !important;
  background: color-mix(in oklab, var(--ms-accent) 12%, #fff) !important;
}
.config .rc-cart-item { padding: 13px 0 !important; }
/* Quantity stepper — accent outline + accent hover */
.config .rc-stepper {
  border-color: color-mix(in oklab, var(--ms-accent) 38%, #fff) !important;
  border-radius: 9px !important;
}
.config .rc-step-btn { color: var(--ms-accent) !important; }
.config .rc-step-btn:hover { background: var(--ms-accent) !important; color: #fff !important; }
.config .rc-step-qty {
  border-color: color-mix(in oklab, var(--ms-accent) 28%, #fff) !important;
  color: var(--ms-text) !important;
}
/* Totals block — subtle accent wash, stronger total */
.config .rc-cart-totals {
  background: color-mix(in oklab, var(--ms-accent) 5%, #fff) !important;
  border-top-color: var(--ms-border) !important;
}
/* Checkout CTA — on-brand accent gradient */
.config .rc-cart-cta {
  background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-hover)) !important;
  border-radius: 12px !important;
}

/* ============================================================
   v9.18 — Coupon card: premium "ticket" look, on-brand + trusted
   ============================================================ */
.config .ms-co-coupon {
  background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--ms-accent) 4%, #fff)) !important;
  border: 1px dashed color-mix(in oklab, var(--ms-accent) 40%, #fff) !important;
  border-radius: 14px !important;
  transition: box-shadow .18s ease, transform .18s ease !important;
}
.config .ms-co-coupon:hover {
  box-shadow: 0 8px 20px color-mix(in oklab, var(--ms-accent) 16%, transparent) !important;
  transform: translateY(-1px);
}
.config .ms-co-coupon-icon {
  background: color-mix(in oklab, var(--ms-accent) 14%, #fff) !important;
  color: var(--ms-accent) !important;
}
.config .ms-co-coupon-text strong { font-weight: 800 !important; }
.config .ms-co-coupon-text small {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: var(--ms-veg, #2f7d36) !important;   /* trust-green tick + copy */
}
.config .ms-co-coupon-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--ms-accent) !important;
  color: #fff !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--ms-accent) 28%, transparent) !important;
}
.config .ms-co-coupon-cta i { font-size: 12px; }
/* Coupon modal — clean input + on-brand Apply button */
.config #my_field {
  border-radius: 10px !important;
  height: 46px !important;
  border: 1px solid var(--ms-border-strong) !important;
  font-size: 14px !important;
}
.config #apply-coupon {
  background: var(--ms-accent) !important;
  border-color: var(--ms-accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 0 20px !important;
  height: 46px !important;
  margin-left: 8px !important;
}
.config #apply-coupon b { color: #fff !important; }

/* ============================================================
   v9.19 — Cart page item cards: clean, aligned rows
   (items are JS-rendered by cart.js into #removeCartCard)
   ============================================================ */
.config .cart-section #removeCartCard .card {
  display: block !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 10px rgba(20,17,15,.04) !important;
}
.config .cart-section .card-image-container {
  flex: 0 0 92px !important;
  width: 92px !important;
  max-width: 92px !important;
  height: 92px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--ms-bg) !important;
  border: 1px solid var(--ms-border) !important;
}
.config .cart-section .card-image-container .card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
.config .cart-section .col-md-9 { padding-left: 0 !important; }
.config .cart-section .card-body { padding: 0 0 0 16px !important; }
.config .cart-section .cart-product-name {
  margin: 0 !important;
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ms-text) !important;
  line-height: 1.3 !important;
}
.config .cart-section .cart-offer-price {
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--ms-accent) !important;
  margin-top: 4px !important;
}
/* qty + remove row: tighter, aligned */
.config .cart-section .card-body .mt-4 { margin-top: 12px !important; }
.config .cart-section .border.border-primary {
  border-color: color-mix(in oklab, var(--ms-accent) 40%, #fff) !important;
  color: var(--ms-accent) !important;
  border-radius: 9px !important;
}
.config .cart-section .remove-btn {
  background: transparent !important;
  color: var(--ms-nonveg, #c0392b) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  border: 1px solid color-mix(in oklab, var(--ms-nonveg, #c0392b) 30%, #fff) !important;
  border-radius: 8px !important;
}

/* ============================================================
   v9.19 — Coupon modal: clean ecommerce-style (Swiggy/Amazon)
   ============================================================ */
.config .cpn-modal { padding: 18px 18px 22px !important; }
.config .cpn-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ms-border-strong);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
  background: #fff;
  transition: border-color .15s ease;
}
.config .cpn-input-row:focus-within { border-color: var(--ms-accent); }
.config .cpn-input-ico { color: var(--ms-muted); font-size: 18px; }
.config .cpn-input {
  flex: 1 1 auto;
  border: 0 !important;
  outline: none !important;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  padding: 8px 4px;
  color: var(--ms-text);
}
.config .cpn-apply-btn {
  flex: 0 0 auto;
  border: 0;
  background: var(--ms-accent);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  padding: 10px 20px;
  border-radius: 9px;
  cursor: pointer;
  transition: filter .15s ease;
}
.config .cpn-apply-btn:hover { filter: brightness(.94); }

.config .cpn-list-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ms-muted);
  margin: 20px 0 10px;
}
.config .cpn-list { display: flex; flex-direction: column; gap: 12px; }
.config .cpn-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px dashed color-mix(in oklab, var(--ms-accent) 38%, #fff);
  background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--ms-accent) 4%, #fff));
  border-radius: 12px;
  padding: 14px 16px;
}
.config .cpn-card-left { min-width: 0; }
.config .cpn-code {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ms-accent);
  background: color-mix(in oklab, var(--ms-accent) 12%, #fff);
  border: 1px dashed color-mix(in oklab, var(--ms-accent) 45%, #fff);
  border-radius: 6px;
  padding: 3px 9px;
  margin-bottom: 8px;
}
.config .cpn-card-title { font-weight: 700; font-size: 15px; color: var(--ms-text); }
.config .cpn-card-title small { font-weight: 500; color: var(--ms-muted); font-size: 12px; }
.config .cpn-card-sub { font-size: 12.5px; color: var(--ms-muted); margin-top: 3px; }
.config .cpn-card-apply {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ms-accent);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
  padding: 8px 6px;
}
.config .cpn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 30px 16px 10px;
}
.config .cpn-empty-ico {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ms-bg);
  color: var(--ms-muted);
  font-size: 24px;
  margin-bottom: 6px;
}
.config .cpn-empty strong { font-size: 15px; color: var(--ms-text); }
.config .cpn-empty span { font-size: 13px; color: var(--ms-muted); }

/* ============================================================
   v9.19 — Shop / search results: full-width layout
   (the page reuses the menu's 3-column grid container, which
   squeezed results into a narrow column — render as one column)
   ============================================================ */
.config .ms-shop .sections-container {
  display: block !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}
.config .ms-shop .section-center { width: 100% !important; }
.config .ms-shop .menu-section .card { max-width: 100% !important; }

/* ============================================================
   v9.20 — Mobile header + category bar fixes
   ============================================================ */
@media (max-width: 767px) {
  /* The category chips bar must sit BELOW the 52px sticky header. A v9.17
     desktop gap-fix had set top:0 globally, which on mobile tucked the bar
     UNDER the header (it "disappeared"). Pin it just beneath the header and
     give it a clean white surface instead of the old dark band. */
  .config .rounded-cate-container {
    position: sticky !important;
    top: 52px !important;
    z-index: 40 !important;
    background: var(--ms-surface) !important;
    border-bottom: 1px solid var(--ms-border) !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .config .rounded-cate-container::-webkit-scrollbar { display: none; }
  .config .rounded-cate-container .cate-bar label { color: var(--ms-muted) !important; }

  /* Category chips — clean rounded pills, accent active state. */
  .config .rounded-category-container { gap: 8px !important; }
  .config .rounded-category {
    flex: 0 0 auto !important;
    border: 1px solid var(--ms-border) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    background: #fff !important;
    color: var(--ms-text-2) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .config .rounded-category.active,
  .config .rounded-category.is-active {
    background: color-mix(in oklab, var(--ms-accent) 12%, #fff) !important;
    border-color: var(--ms-accent) !important;
    color: var(--ms-accent) !important;
  }

  /* Kill horizontal page scroll on mobile — clamp wide children so the page
     itself never scrolls sideways. Use overflow-x: CLIP (not hidden): clip
     suppresses sideways scroll WITHOUT establishing a scroll container, so
     position: sticky on the .section-title inside still works. overflow-x:
     hidden would turn these into scroll containers and break the sticky
     category header. */
  html, body { overflow-x: clip !important; max-width: 100% !important; }
  .config #vandana,
  .config .sections-container,
  .config .section-center,
  .config .banner-container { max-width: 100% !important; overflow-x: clip !important; }
  /* slick-list is NOT an ancestor of .section-title — keep hidden for the slider. */
  .config .banner-container .slick-list { max-width: 100% !important; overflow-x: hidden !important; }
  .config .banner-container { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ============================================================
   v9.21 — Mobile header FIXED (user request)
   Pin the header to the viewport on phones and pad the page so
   content starts below it. The category chips bar (sticky top:52px)
   then sits flush beneath the fixed header.
   ============================================================ */
@media (max-width: 767px) {
  /* Header is STICKY (not fixed) — it stays pinned at the top while scrolling,
     but remains in normal flow so the category chips bar sits flush directly
     beneath it. A fixed header + padding-top produced a gap whenever the
     padding didn't exactly equal the rendered header height. */
  .config .header-navbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 6px rgba(20,17,15,.06) !important;
  }
  /* No body padding — sticky header occupies its own space, so there is
     nothing to offset and no gap. */
  body.config { padding-top: 0 !important; }
}

/* ============================================================
   v9.21 — Mobile checkout bar above footer + active chip
   ============================================================ */
@media (max-width: 767px) {
  /* Checkout CTA: when the cart has items the JS removes `d-none` from
     #checkout-page. Pin it as a fixed bar JUST ABOVE the bottom nav. */
  #checkout-page.view-cart-btn-mobile:not(.d-none),
  .view-cart-btn-mobile#checkout-page {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 56px !important;            /* clears the ~56px bottom nav */
    width: 100% !important;
    z-index: 60 !important;
    margin: 0 !important;
    padding: 8px 0 calc(8px) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 40%) !important;
    border: 0 !important;
  }
  #checkout-page .view-cart-btn-txt-mobile {
    margin: 0 14px !important;
    background: var(--ms-accent) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px color-mix(in oklab, var(--ms-accent) 30%, transparent) !important;
  }
  /* When the cart drawer is open it already has its own "Proceed to checkout",
     so hide the fixed bottom checkout bar to avoid two checkout buttons. */
  body.cart-open #checkout-page,
  body.cart-open #checkout-page.view-cart-btn-mobile:not(.d-none) {
    display: none !important;
  }

  /* /cart page: the in-card "Checkout" (.continue-btn.hide-btn) duplicates the
     fixed bottom mobile checkout bar. Hide the in-card one on mobile — the
     "I Accept Terms" checkbox above it stays, so the bottom bar's terms()
     check still works. */
  .config a.btn.continue-btn.hide-btn { display: none !important; }

  /* Active category chip in the mobile bar (was lost when the chips were
     restyled) — accent-tinted pill, set by the scroll-spy below. */
  .config .rounded-cate-container .rounded-category.active {
    background: color-mix(in oklab, var(--ms-accent) 14%, #fff) !important;
    border-color: var(--ms-accent) !important;
    color: var(--ms-accent) !important;
    font-weight: 700 !important;
  }
}

/* ============================================================
   v9.22 — Mobile: close header↔chips gap + sticky category title
   ============================================================ */
@media (max-width: 767px) {
  /* Hide the category chips strip on mobile (user request). The sticky
     section title below already shows the current category, and the bottom
     "Categories" nav button opens the full list. */
  .config .rounded-cate-container { display: none !important; }
  .config .rounded-cate-container + .ms-menu-search { margin-top: 0 !important; }

  /* Sticky category title — mirrors the desktop behaviour: the current
     category's name ("World Cuisine", "Pizzas", …) pins just below the
     header and is replaced by the next one as you scroll into it.
     No chips strip now, so it pins directly under the ~64px header. */
  .config .section-title {
    position: sticky !important;
    top: 64px !important;
    z-index: 30 !important;
    /* Tinted header so it clearly stands apart from the white item cards. */
    background: color-mix(in oklab, var(--ms-accent) 8%, #fff) !important;
    border-bottom: 2px solid color-mix(in oklab, var(--ms-accent) 28%, #fff) !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    box-shadow: 0 2px 6px rgba(20,17,15,.05) !important;
  }
  .config .section-title p {
    color: var(--ms-accent) !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }
}

/* ============================================================
   Smart Sales Module — upsell / cross-sell rail (v9_38)
   Swiggy/Zomato "Complete your meal" pattern: left-aligned
   compact cards, veg/non-veg dot, badge tag, price, and an
   outlined ADD button. Image-optional. Gated by the seller's
   smart_sales_enabled toggle (blade only renders when ON).
   ============================================================ */
.config .ss-rail {
  margin: 20px auto;
  max-width: 100%;
  padding: 16px 14px 18px;
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
}
.config .ss-rail-head { margin: 0 2px 13px; text-align: left; }
.config .ss-rail-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ms-accent);
  margin-bottom: 1px;
}
.config .ss-rail-title {
  margin: 0 !important;
  font-family: var(--ms-font) !important;
  font-size: 18px;
  font-weight: 800;
  color: var(--ms-text);
}
.config .ss-rail-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.config .ss-rail-track::-webkit-scrollbar { height: 0; }

.config .ss-rail .ss-card {
  flex: 0 0 168px;
  width: 168px;
  scroll-snap-align: start;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  text-align: left;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.config .ss-rail .ss-card:hover {
  box-shadow: 0 10px 24px rgba(20,17,15,.10);
  border-color: color-mix(in oklab, var(--ms-accent) 35%, var(--ms-border));
  transform: translateY(-2px);
}
.config .ss-rail .ss-card-img { position: relative; display: block; aspect-ratio: 16/11; background: var(--ms-bg); }
.config .ss-rail .ss-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.config .ss-rail .ss-customisable {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: rgba(20,17,15,.6);
  padding: 2px 6px; border-radius: 6px; text-transform: lowercase;
}
.config .ss-rail .ss-card-body {
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.config .ss-rail .ss-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-height: 16px; }
/* Veg / non-veg diet mark */
.config .ss-rail .ss-veg {
  width: 14px; height: 14px; flex: 0 0 14px;
  border: 1.5px solid; border-radius: 3px;
  display: inline-grid; place-items: center;
}
.config .ss-rail .ss-veg i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.config .ss-rail .ss-veg--veg { border-color: #1a8a3c; }
.config .ss-rail .ss-veg--veg i { background: #1a8a3c; }
.config .ss-rail .ss-veg--nonveg { border-color: #c0392b; }
.config .ss-rail .ss-veg--nonveg i { background: #c0392b; }
.config .ss-rail .ss-diet {
  font-size: 9px; font-weight: 800; letter-spacing: .03em;
  padding: 2px 5px; border-radius: 4px; color: #7a5c00; background: #fff5d6;
}
/* Sales badge tag (Most Loved, Bestseller, …) */
.config .ss-rail .ss-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 108px;
}
.config .ss-rail .ss-badge i { font-size: 10px; }
.config .ss-rail .ss-card-name {
  font-family: var(--ms-font);
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  color: var(--ms-text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 36px; margin-bottom: 8px;
}
.config .ss-rail .ss-card-foot {
  margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.config .ss-rail .ss-card-price {
  font-family: var(--ms-font); font-size: 14px; font-weight: 800;
  color: var(--ms-text); white-space: nowrap;
}
.config .ss-rail .ss-card-price del { font-size: 11px; font-weight: 500; color: var(--ms-muted); margin-left: 4px; }
/* Outlined ADD button — Swiggy/Zomato signature */
.config .ss-rail .ss-add {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--ms-surface);
  border: 1.5px solid color-mix(in oklab, var(--ms-accent) 55%, #fff);
  color: var(--ms-accent);
  font-family: var(--ms-font); font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 10px; cursor: pointer;
  text-decoration: none; box-shadow: 0 2px 6px rgba(20,17,15,.06);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.config .ss-rail .ss-add span { font-size: 13px; line-height: 1; }
.config .ss-rail .ss-add:hover { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }
.config .ss-rail .ss-add.is-loading { pointer-events: none; opacity: .7; }
.config .ss-rail .ss-add-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--ms-accent) 30%, #fff);
  border-top-color: var(--ms-accent); display: inline-block;
  animation: ss-spin .6s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  /* Tighter rail + ~1.25-card carousel (one full card + a peek of the next). */
  .config .ss-rail { margin: 14px 10px; border-radius: 14px; padding: 12px 10px 12px; }
  .config .ss-rail-head { margin: 0 2px 10px; }
  .config .ss-rail-title { font-size: 15px; }
  .config .ss-rail-track { gap: 9px; }
  .config .ss-rail .ss-card { flex: 0 0 80%; width: 80%; border-radius: 13px; }
  .config .ss-rail .ss-card-body { padding: 9px 11px 10px; }
  .config .ss-rail .ss-card-top { margin-bottom: 5px; }
  /* Wide card → name fits on one line, no reserved empty height. */
  .config .ss-rail .ss-card-name { -webkit-line-clamp: 1; min-height: 0; margin-bottom: 7px; }
}

/* ============================================================
   Store offers strip — vibrant auto-coupon + offers (v9_41)
   Swiggy/Zomato energy: warm gradients, animated unlock bar,
   celebratory "saved" state.
   ============================================================ */
.config .so-wrap { margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }

/* --- Auto-coupon "unlock" banner --- */
.config .so-coupon {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(105deg, #fff3e0 0%, #ffe6c7 55%, #ffd9b0 100%);
  border: 1px solid #ffd0a0;
  box-shadow: 0 6px 18px rgba(214,120,40,.12);
}
.config .so-coupon.is-unlocked {
  background: linear-gradient(105deg, #e9fbef 0%, #cdf4d8 60%, #b6efc6 100%);
  border-color: #9be3b0;
  box-shadow: 0 6px 18px rgba(26,138,60,.16);
}
.config .so-coupon-ic {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, #ff8a3d, #f4632b);
  box-shadow: 0 6px 14px rgba(244,99,43,.35);
}
.config .so-coupon.is-unlocked .so-coupon-ic {
  background: linear-gradient(135deg, #2ec362, #1a8a3c);
  box-shadow: 0 6px 14px rgba(26,138,60,.35);
}
.config .so-coupon-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.config .so-coupon-body strong { display: block; font-family: var(--ms-font); font-size: 15.5px; font-weight: 800; color: #5a2c00; line-height: 1.25; }
.config .so-coupon.is-unlocked .so-coupon-body strong { color: #0c5a26; }
.config .so-coupon-body small { display: block; font-size: 12px; color: #8a5a2a; margin-top: 2px; font-weight: 500; }
.config .so-coupon.is-unlocked .so-coupon-body small { color: #2a7a44; }
.config .so-coupon-bar {
  margin-top: 9px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.7); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(140,70,20,.15);
}
.config .so-coupon-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ff9a3d, #f4632b);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
  position: relative; overflow: hidden;
}
.config .so-coupon-bar span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%); animation: so-shimmer 1.6s ease-in-out infinite;
}
@keyframes so-shimmer { to { transform: translateX(100%); } }
.config .so-coupon-meta { margin-top: 4px; font-size: 10.5px; font-weight: 700; color: #b06a28; letter-spacing: .02em; }
/* Celebration sparkle on the unlocked banner */
.config .so-coupon-spark {
  position: absolute; top: 8px; right: 12px; font-size: 18px;
  animation: so-pop .5s ease-out both, so-float 2.4s ease-in-out .5s infinite;
}
@keyframes so-pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes so-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* --- Offers & deals --- */
.config .so-offers {
  padding: 13px 14px; border-radius: 16px;
  background: var(--ms-surface); border: 1px solid var(--ms-border);
}
.config .so-offers-head { font-family: var(--ms-font); font-size: 14px; font-weight: 800; color: var(--ms-text); margin-bottom: 11px; display: flex; align-items: center; gap: 7px; }
.config .so-offers-head i { color: var(--ms-accent); font-size: 16px; }
.config .so-offers-track { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 3px; }
.config .so-offers-track::-webkit-scrollbar { height: 0; }
.config .so-offer {
  flex: 0 0 248px; max-width: 248px;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 13px; border-radius: 13px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--ms-accent) 5%, #fff), #fff);
  border: 1px solid color-mix(in oklab, var(--ms-accent) 18%, var(--ms-border));
  transition: box-shadow .15s ease, transform .15s ease;
}
.config .so-offer:hover { box-shadow: 0 8px 18px rgba(20,17,15,.08); transform: translateY(-2px); }
.config .so-offer-ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, color-mix(in oklab, var(--ms-accent) 80%, #ff7a45), var(--ms-accent));
  box-shadow: 0 4px 10px color-mix(in oklab, var(--ms-accent) 30%, transparent);
}
.config .so-offer-body { min-width: 0; }
.config .so-offer-body strong { display: block; font-size: 13px; font-weight: 800; color: var(--ms-text); line-height: 1.3; }
.config .so-offer-body small { display: block; font-size: 11px; color: var(--ms-muted); margin-top: 2px; }
.config .so-offer-code {
  display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  color: var(--ms-accent); background: #fff; border: 1px dashed color-mix(in oklab, var(--ms-accent) 50%, #fff);
  padding: 3px 8px; border-radius: 6px;
}
@media (max-width: 767px) {
  .config .so-wrap { margin-bottom: 12px; gap: 10px; }
  .config .so-coupon { padding: 13px 14px; }
  .config .so-coupon-body strong { font-size: 14.5px; }
  .config .so-offer { flex-basis: 225px; }
}

/* ============================================================
   Coupon modal — applied banner + bank offer rows (v9_42)
   ============================================================ */
.config .cpn-applied {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; margin: 12px 0 4px; border-radius: 13px;
  background: linear-gradient(105deg, #e9fbef, #cdf4d8);
  border: 1px solid #9be3b0;
}
.config .cpn-applied-ic {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, #2ec362, #1a8a3c);
}
.config .cpn-applied-body strong { display: block; font-size: 14px; font-weight: 800; color: #0c5a26; }
.config .cpn-applied-body span { display: block; font-size: 12px; color: #2a7a44; margin-top: 1px; }

.config .cpn-card--offer { align-items: center; }
.config .cpn-card--offer .cpn-card-ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; margin-right: 10px;
  display: grid; place-items: center; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, color-mix(in oklab, var(--ms-accent) 80%, #ff7a45), var(--ms-accent));
}
.config .cpn-code--ghost {
  background: #fff !important; color: var(--ms-accent) !important;
  border: 1px dashed color-mix(in oklab, var(--ms-accent) 45%, #fff) !important;
}
.config .cpn-card-at {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: var(--ms-muted); background: var(--ms-bg);
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}

/* Coupon cards are tap-to-apply (v9_43) */
.config .cpn-card[role="button"], .config .cpn-card--offer[role="button"] { cursor: pointer; transition: box-shadow .14s ease, transform .14s ease; }
.config .cpn-card[role="button"]:hover, .config .cpn-card--offer[role="button"]:hover { box-shadow: 0 6px 16px rgba(20,17,15,.10); }
.config .cpn-card[role="button"]:active, .config .cpn-card--offer[role="button"]:active { transform: scale(.99); }