/* ── Error status strip — below header, top-center ── */
.snk-strip {
  position: fixed;
  /* Mobile: below safe area + header (~72px padding×2 + logo 48px) + 8px gap */
  top: calc(env(safe-area-inset-top, 0px) + 72px + 8px);
  left: 16px;
  right: 16px;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100vw - 32px);
  /* No transform needed — left/right + margin:auto centers it */
  z-index: 9999; /* just below header (1000) so it never covers it */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #1C1C1C;
  border-radius: 100px;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

/* Desktop: below taller header (~80px padding×2 + logo 52px) */
@media (min-width: 768px) {
  .snk-strip {
    top: 96px; /* 80px header + 16px gap; safe-area-inset-top is 0 on desktop */
    max-width: 420px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* Subtle red dot — the only hint it's an error */
.snk-strip-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F87171;
}

/* Message */
.snk-strip-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* ─────────────────────────────────────────────────────────────────
   Payment Options page (reached from cart → Place Order).
   Mobile-first; on ≥768px the content sits in a single centred
   column under the global desktop header, like Swiggy web.
   ───────────────────────────────────────────────────────────────── */

.po-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--wb-page-body-bg-color, #F5F3F0);
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────── */
.po-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--wb-card-bg-color, #FFFFFF);
  border-bottom: 1px solid var(--wb-border-subtle-color, #EBEBEB);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.po-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.po-back {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}

.po-back:hover {
  background: #F5F5F5;
}

.po-back svg {
  width: 20px;
  height: 20px;
  color: var(--wb-text-primary-color, #1C1C1C);
}

.po-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.po-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wb-text-primary-color, #1C1C1C);
  margin: 0;
  line-height: 1.2;
}

.po-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--wb-text-secondary-color, #6B6B6B);
  margin: 0;
  line-height: 1.25;
}

.po-subtitle-savings {
  color: #1BA672;
  font-weight: 700;
}

/* ── Content shell ───────────────────────────────────────────── */
.po-content {
  flex: 1;
  padding: 14px 14px 32px;
}

.po-shell {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Store + address strip ───────────────────────────────────── */
.po-trip {
  display: flex;
  gap: 12px;
  background: var(--wb-card-bg-color, #FFFFFF);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.po-trip-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
  flex-shrink: 0;
}

.po-trip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--wb-button-button-bg-color, #E17100);
  box-sizing: border-box;
}

.po-trip-line {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: repeating-linear-gradient(
    to bottom,
    var(--wb-border-subtle-color, #D8D8D8) 0 3px,
    transparent 3px 6px
  );
}

.po-trip-pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-button-button-bg-color, #E17100);
}

.po-trip-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.po-trip-row {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--wb-text-secondary-color, #6B6B6B);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.po-trip-strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-text-primary-color, #1C1C1C);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.po-trip-sep {
  color: var(--wb-border-subtle-color, #D8D8D8);
  flex-shrink: 0;
}

.po-trip-eta {
  color: #5B4EDB;
  font-weight: 600;
  white-space: nowrap;
}

.po-trip-address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Savings strip ───────────────────────────────────────────── */
.po-offer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #E4F7EE;
  border: 1px solid #C6EBD9;
}

.po-offer-icon {
  font-size: 18px !important;
  color: #1BA672;
  flex-shrink: 0;
}

.po-offer-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #12805A;
}

/* ── Sections ────────────────────────────────────────────────── */
.po-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.po-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-text-secondary-color, #6B6B6B);
  margin: 0 0 0 2px;
}

.po-card {
  background: var(--wb-card-bg-color, #FFFFFF);
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* ── Method row ──────────────────────────────────────────────── */
.po-method + .po-method {
  border-top: 1px solid var(--wb-border-subtle-color, #EFEFEF);
}

.po-method-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s;
}

.po-method-row:hover:not(:disabled) {
  background: #FAFAFA;
}

.po-method-row.selected {
  background: rgba(0, 0, 0, 0.02);
}

.po-method-row:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.po-method-icon-box {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--wb-border-subtle-color, #EBEBEB);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}

.po-method-icon {
  font-size: 20px !important;
  color: #5A5A5A;
}

.po-method-icon-accent {
  color: var(--wb-button-button-bg-color, #E17100);
}

.po-method-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.po-method-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--wb-text-primary-color, #1C1C1C);
  letter-spacing: -0.01em;
}

.po-method-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wb-text-secondary-color, #8A8A8A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-radio {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid #CFCFCF;
  box-sizing: border-box;
  transition: border-color 0.15s, border-width 0.15s, box-shadow 0.15s;
}

.po-radio.on {
  border-color: var(--wb-button-button-bg-color, #E17100);
  border-width: 6px;
  box-shadow: 0 0 0 2px rgba(225, 113, 0, 0.15);
}

/* ── Expanded action area ────────────────────────────────────── */
.po-method-action {
  overflow: hidden;
}

.po-method-action-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}

.po-upi-input-row {
  position: relative;
  display: flex;
  align-items: center;
}

.po-upi-input {
  width: 100%;
  height: 44px;
  padding: 0 38px 0 14px;
  border-radius: 10px;
  border: 1.5px solid var(--wb-border-subtle-color, #E5E5E5);
  background: #FAFAFA;
  font-size: 14px;
  font-weight: 600;
  color: var(--wb-text-primary-color, #1C1C1C);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.po-upi-input:focus {
  border-color: var(--wb-button-button-bg-color, #E17100);
  background: #FFFFFF;
}

.po-upi-input.verified {
  border-color: #1BA672;
}

.po-upi-check {
  position: absolute;
  right: 12px;
  font-size: 20px !important;
  color: #1BA672;
}

.po-pay-btn {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 12px;
  background: var(--wb-button-button-bg-color, #E17100);
  color: var(--wb-button-button-text-color, #FFFFFF);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
}

.po-pay-btn:hover:not(:disabled) {
  opacity: 0.92;
}

.po-pay-btn:active:not(:disabled) {
  transform: scale(0.99);
}

.po-pay-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Secure badge ────────────────────────────────────────────── */
.po-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: #A5A5A5;
}

.po-secure-icon {
  font-size: 13px !important;
  color: #BBBBBB;
}

/* ── Overlay ─────────────────────────────────────────────────── */
.po-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.po-overlay-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.po-overlay-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-text-primary-color, #1C1C1C);
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* The global desktop header (HeaderNew, ~72px) sits above this page. */
  .po-page {
    min-height: calc(100dvh - 72px);
  }

  .po-header-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .po-back {
    margin-left: 0;
  }

  .po-title {
    font-size: 19px;
  }

  .po-content {
    padding: 20px 14px 48px;
  }

  .po-method-row {
    padding: 16px;
  }
}

.btn{
    margin:.5rem 1rem !important;
    /* padding: .2rem .5rem; */
    color:'#fff' !important;
    font-size: 14 !important;
    font-weight: 700 !important;
    background-color: #0f8241 !important;
}
.btn:hover{
    background-color: #0f8241 !important;
}
.add-card-btn {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.payment-type {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 3.5rem  0 1rem 0;
}

.saved-card {
    margin: 1rem;
    padding: .5rem;
    border-bottom: 1px solid #e5e5e5;
}

.cvv-pay-btn {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
}

.add-card-container {
    margin: 1rem;
}

.card-form-inputs {
    display: flex;
    flex-direction: column;
    width: 90vw;
    align-self: center;
    margin: 0.2rem 0;
}
.menu-back-heading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.875rem;
    position: fixed;
    top: 0;
    /* margin-bottom: 100px; */
    /* background-color: white !important; */
    width: 100% !important;
    z-index: 1000;
    padding: 10px 0px 10px 10px;
}

.menu-back-heading.restaurant-header {
    background-color: #b96b42 !important;
}

.wishlist-div{
    margin-right: 20px;
    background-color: white;
    padding: 0 3px;
    border-radius: 50%;
}
body {
  background-color: #FFFFFF !important;
  font-family: 'Roboto', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  margin: 0 !important;
  padding: 0 !important;
}

html {
  background-color: #FFFFFF !important;
}

/* Hide scrollbar for desktop */
@media screen and (min-width: 769px) {
  /* Hide scrollbar for Chrome, Safari and Opera */
  *::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  * {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }

  /* Fix for iOS Safari viewport height issues */
  .ios-safe-area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Fix for iOS scrolling momentum */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Handle dynamic viewport height changes when keyboard opens */
  .mobile-keyboard-handler {
    min-height: 100dvh;
    min-height: 100vh; /* fallback for browsers that don't support dvh */
  }

  /* Ensure fixed elements stay in place when keyboard opens */
  .fixed-header {
    position: fixed !important;
    z-index: 1000 !important;
  }

  .fixed-bottom {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 1000 !important;
  }
}

   /* ANDROID / MOBILE SPECIFIC */
   @media screen and (max-width: 768px) {
    /* Ensure text and font scaling doesn't break layout */
    body {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
    }
  
    /* Smooth scrolling for Android */
    * {
      -webkit-overflow-scrolling: touch; 
    }
  
    .mobile-keyboard-handler {
      min-height: 100vh; /* fallback for older Android browsers */
      height: 100vh;
    }
  
    .fixed-header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 1000 !important;
    }
  
    /* Fixed bottom elements (search bars, buttons) */
    .fixed-bottom {
      position: fixed !important;
      bottom: max(0px, env(keyboard-inset-height, 0px)) !important; /* adjusts above keyboard */
      left: 0;
      right: 0;
      z-index: 1000 !important;
      transition: bottom 0.3s ease-in-out;
    }
  
    /* Optional: padding for “safe areas” on modern devices */
    .android-safe-area {
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      padding-left: env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
  }
  
.netwrok-status-offline {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}

.bankCard{
    display: flex;
    flex: 1;
    padding: 0.3rem;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem;
}
.container{
    flex:1;
    display: flex;
    padding:1rem;
    flex-direction: column;
}
.upi-container{
    flex:1;
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}
.add-upi-container{
    display: flex;
    flex:1;
    flex-direction: column;
    padding:1rem;
}
.upi-app-card{
    display: flex;
    flex: 1;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: space-between; */
    margin:0.2rem 0;
}
.checkBoxRow{
    display: flex;
    flex:1;
    align-items: center;
    margin-bottom: 1rem;
}
.saved-vpa-card{
    display: flex;
    flex:1;
    align-items: center;
    justify-content: space-between;
    padding:0.5rem;
    margin:0.5rem;
}

.styled-btn:hover {
  background-color: none !important;
}

.product-card {
  /* margin-top: 2rem; */
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  /* height: 16rem; */
  /* width: 12rem; */
  /* width: 200px; */
  background-color: #ffff;
  border-radius: 1rem;
  position: relative;
  border: 1px solid #b5d2ca;
}

.product-details {
  display: flex;
  flex-direction: column;
  width: 200px;

  border-radius: 14px;
}
.product-image-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 120px;
  padding-top: 0.5rem;
}

.product-image {
  /* height: 6rem; */
  /* width: 7rem; */
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prod-img {
  height: 100%;
  /* width: 100%; */
  /* margin-top: 25px; */
  width: 80%;
  object-fit: cover;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.product-discount {
  position: absolute;
  /* top: 1px;
  left: 5px; */
  height: 1.6rem;
  width: 4rem;
  /* background-color: #0f8241; */
  background-color: var(--discount-bg);
  color: #ffff !important;
  border-top-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
}

.discount-details {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.discount-text {
  color: #ffff !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
}

.product-wishlist {
  position: absolute;
  /* top: 2px;
  right: 15px; */
  top: 5px;
  right: 5px;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  /* background-color: #f9f5f2; */
  background-color: black;
  /* visibility: hidden; */
}

.whishlist-details {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.wishlist-icon,
.wishlist-icon-added {
  /* color: #fe0000; */
  font-size: 1.2rem;
}

/* .product-name {
  padding: 0.6rem 0.6rem 0 0.6rem;
} */

.product-name-text {
  /* font-size: 0.8rem !important; */
  font-size: 12px !important;
  color: darkgrey !important;
  min-height: 20px !important;
  margin-top: 10px !important;
}

/* .product-description {
  padding: 0 0.6rem 0 0.6rem;
} */
.product-description-text {
  min-height: 40px !important;
  max-height: 40px !important;
  overflow: hidden !important;
  /* font-size: 0.8rem !important; */
  font-size: 12px !important;
  color: black;
}

/* .product-quantity {
  padding: 0.3rem 0 0 0.6rem;
} */

.product-quantity-text {
  /* font-size: 0.8rem !important; */
  font-size: 12px !important;
  color: black;
}

.product-price-details {
  /* padding: 0.5rem 0 0.6rem 0.6rem; */
  padding: 0.2rem 0rem 0.4rem 0rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.price-description {
  display: flex;
  flex-direction: column;
  /* gap: 0.3rem; */
}

.price-description-not-applicable {
  /* font-size: 0.8rem !important; */
  font-size: 12px !important;
  color: darkgrey !important;
  text-decoration: line-through !important;
}

.price-description-applicable {
  /* font-size: 0.9rem !important; */
  font-size: 13px !important;
  font-weight: bold !important;
  color: black !important;
}

.product-add-btn {
  /* padding: 0 0 0 0.6rem; */
  font-weight: bold;
  /* background-color: #e7f3ec !important; */
}

.add-btn {
  background-color: #e7f3ec !important;
  color: #0f8241 !important;
  position: relative !important;
  right: 0.1rem !important;
  top: 0.2rem !important;
  width: 6rem !important;
  border-radius: 0.5rem !important;
  padding: 2.5px 8px !important;
  /* border: 1px solid rgb(49 134 22) !important; */
}

.product-qty-counter {
  /* background-color: rgb(173, 26, 25); */
  width: 6rem !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px !important;
  position: relative;
  right: 0.5rem !important;
  top: 0.2rem !important;
  gap: 10px;
  color: #000000;
  padding: 2px 4px;
  vertical-align: middle;
  border: 1px solid #e6e6e6;
}

.decrement-qty,
.increment-qty {
  color: #b96b42;
}

.product-qty {
  color: #000000 !important;
  font-size: 10px !important;
  font-weight: 500;
}

.alice-carousel__prev-btn,
.alice-carousel__next-btn {
  display: none !important;
}
.alice-carousel__prev-btn-item,
.alice-carousel__next-btn-item {
  display: none;
}

.alice-carousel__dots {
  margin: 1rem 0 0 0 !important;
}

/* .carousel { */
/* margin-top: 8rem; */
/* margin-top: 6rem; */
/* margin-top: -132px; */
/* } */
.horizontal-product-card-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0.6rem 0 0.6rem;
}

.variant-product-card {
  margin-top: 2rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  width: 100%;
  background-color: #ffff;
  border-radius: 1rem;
  position: relative;
  border: 1px solid #b5d2ca;
  /* height: 118px; */
}
.variant-product-card-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.variant-product-details {
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  width: 100%;
  padding: 5px;
}
.variant-product-image {
  object-fit: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}
.variant-product-price-details {
  padding: 0.2rem 0rem 0.4rem 0rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.var-prod-img {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
/* .product-qty-counter {
    background-color: #e7f3ec !important;
    width: 6rem !important;
    display: flex
;
    justify-content: space-around;
    align-items: center;
    border-radius: 1rem;
    position: relative;
    right: 0.5rem !important;
    top: -0.8rem !important;
} */
.variant-product-card.disabled {
  background-color: #f0f0f0;
}

.chip_display_box {
  display: flex;
  overflow-x: scroll;
  margin-bottom: 10px;
}
.chip_display_box::-webkit-scrollbar {
  display: none;
}
.product-list-container {
  /* height: calc(100vh - 48px); */
  overflow: scroll;
}
.product-list-container::-webkit-scrollbar {
  display: none;
}

/* display: grid;
padding: 1em;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2.2em;
grid-template-columns: repeat(4); */

/* ══════════════════════════════════════════════════════════
   PremiumLoader — Brand-themed micro-animations
   Colors: amber #E17100 / near-black #1C1C1C / warm bg #F5F3F0
   ══════════════════════════════════════════════════════════ */

/* ── Root layout ──────────────────────────────────────────── */
.RITtP4xfsYmnjiktddRo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.wVdmSicutNRwCC2mwGBL {
  position: fixed;
  inset: 0;
  background: rgba(245, 243, 240, 0.92);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

.bHlcsKexekTrEhINIFHQ {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.JDOLYOKKvuPzajkBRi23 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #8A8A8A;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   1. MODERN ORBITAL SPINNER — general page loader
   ══════════════════════════════════════════════════════════ */

.TpPHMfbGDsbTvi6DFnze {
  position: relative;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer arc — rotates clockwise */
.Adu2uwph47JdzSCtWk6D {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #E17100;
  border-right-color: rgba(225, 113, 0, 0.25);
  animation: SQARgEnlUNX9lw7rx4mU 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Inner arc — rotates counter-clockwise */
.kQJVUwIxmPGOSmJpOrTd {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #AF5E00;
  border-left-color: rgba(175, 94, 0, 0.2);
  animation: RtQwT4q1Uhxb8JZFQab4 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Pulsing brand-color dot at centre */
.jsSvcZeK4kMjpXa10wN7 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FF9A4A, #E17100);
  box-shadow: 0 0 8px rgba(225, 113, 0, 0.5);
  animation: x0VqbD95JeE2xcp7QOYW 1s ease-in-out infinite;
}

@keyframes SQARgEnlUNX9lw7rx4mU {
  to { transform: rotate(360deg); }
}

@keyframes RtQwT4q1Uhxb8JZFQab4 {
  to { transform: rotate(-360deg); }
}

@keyframes x0VqbD95JeE2xcp7QOYW {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   2. DOTS — compact inline loader
   ══════════════════════════════════════════════════════════ */

.nBXrC9nxAEV32HTnJUzr {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pNPHrrmQJ32jJU_kn4Kh {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E17100;
  animation: g1IZqfZduZo3Qju1xJpw 1.2s ease-in-out infinite;
}

.pNPHrrmQJ32jJU_kn4Kh:nth-child(1) { animation-delay: 0s; }
.pNPHrrmQJ32jJU_kn4Kh:nth-child(2) { animation-delay: 0.18s; }
.pNPHrrmQJ32jJU_kn4Kh:nth-child(3) { animation-delay: 0.36s; }

/* Small variant (for inside buttons) */
.YUWTZRaXRv4MjPhVfLRR {
  width: 5px;
  height: 5px;
  gap: 4px;
}

@keyframes g1IZqfZduZo3Qju1xJpw {
  0%, 60%, 100% { transform: translateY(0px); opacity: 0.6; }
  30%           { transform: translateY(-9px); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   3. ORDER — scooter delivery animation
   ══════════════════════════════════════════════════════════ */

.IfoFBD5Kp6w9xIfqiYnY {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.aah0aDaP9XMqg6gEaFCg {
  position: relative;
  width: 140px;
  height: 80px;
  overflow: hidden;
}

.ae8nACD0KSyI_BwfJE8g {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  animation: YV58vmGobU066xhMDW9N 0.55s ease-in-out infinite alternate;
}

.s5Q9HBiLbsrZZa3QI7K2 {
  display: block;
  width: 90px;
  height: 58px;
  filter: drop-shadow(0 4px 10px rgba(225,113,0,0.25));
}

/* Wheel spin — applied to wheel <circle> elements via class */
.nK39QH7C8T01ZAhVmtYO {
  transform-box: fill-box;
  transform-origin: center;
  animation: Rb3Gm4sbS3T_uW1GeFe0 0.6s linear infinite;
}

/* Road dashes */
.MHf9royOdkbuzzjnNJdl {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    #E17100 0px,
    #E17100 10px,
    transparent 10px,
    transparent 20px
  );
  animation: QAzuZ0OGkgUg9nuMVcxh 0.5s linear infinite;
}

/* Speed lines behind scooter */
.qHuVmilpd8ybJpHzJ5xu {
  position: absolute;
  bottom: 28px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.jVKH6qyOVnxQA8mJ36pA {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right, transparent, rgba(225,113,0,0.5));
  animation: d5JsHH_zxpH3Z5h2xmnC 0.6s ease-out infinite;
}

.jVKH6qyOVnxQA8mJ36pA:nth-child(1) { width: 22px; animation-delay: 0s; }
.jVKH6qyOVnxQA8mJ36pA:nth-child(2) { width: 16px; animation-delay: 0.12s; }
.jVKH6qyOVnxQA8mJ36pA:nth-child(3) { width: 10px; animation-delay: 0.24s; }

/* Floating steam puffs above delivery box */
.XndmkLgUKGHYT31boOGw {
  position: absolute;
  top: 2px;
  left: 60%;
  display: flex;
  gap: 4px;
}

.yzJjmghUZHgxQSg_qUcN {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(225, 113, 0, 0.5);
  animation: LwUUuYpjXNjuOXg30wuw 1.2s ease-out infinite;
}

.yzJjmghUZHgxQSg_qUcN:nth-child(2) { animation-delay: 0.4s; }
.yzJjmghUZHgxQSg_qUcN:nth-child(3) { animation-delay: 0.8s; }

.JuicvIE9TDctKMVbFrT3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #AF5E00;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: zgrNmSaLi1J8HNv3FM0Z 2s ease-in-out infinite;
}

@keyframes YV58vmGobU066xhMDW9N {
  from { transform: translateX(-50%) rotate(-1.5deg) translateY(0px); }
  to   { transform: translateX(-50%) rotate(1.5deg) translateY(-3px); }
}

@keyframes Rb3Gm4sbS3T_uW1GeFe0 {
  to { transform: rotate(360deg); }
}

@keyframes QAzuZ0OGkgUg9nuMVcxh {
  from { background-position: 0 0; }
  to   { background-position: -20px 0; }
}

@keyframes d5JsHH_zxpH3Z5h2xmnC {
  0%   { opacity: 0; transform: scaleX(0.3); }
  50%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0.3); }
}

@keyframes LwUUuYpjXNjuOXg30wuw {
  0%   { transform: translateY(0px) scale(1); opacity: 0.7; }
  100% { transform: translateY(-18px) scale(1.8); opacity: 0; }
}

@keyframes zgrNmSaLi1J8HNv3FM0Z {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ══════════════════════════════════════════════════════════
   4. SEARCH — magnifying glass sweep
   ══════════════════════════════════════════════════════════ */

.Mv2qyQ_r2XWRNdzMLcxh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.caeg1MdoNYklTsKQMBTk {
  position: relative;
  width: 64px;
  height: 64px;
}

.bnkz8x2XPbsGOFufMmsP {
  display: block;
  width: 64px;
  height: 64px;
  animation: OUZgv6ogbm1iY34ABrrB 1.8s ease-in-out infinite;
  transform-origin: 60% 60%;
  filter: drop-shadow(0 2px 6px rgba(225,113,0,0.2));
}

.fOSOs_fVBkVD8ckt8vYb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(225,113,0,0.15), transparent 65%);
  animation: DWhkP6RiZpzPszUygKdQ 1.8s ease-in-out infinite;
}

.krs0a9XUcql5sy98xBPy {
  display: flex;
  gap: 6px;
}

.Xl2V_y56tpDF9LEWoU_n {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E17100;
  animation: _4fSvU4jbp8FayX_w2BN9 1.4s ease-in-out infinite;
}

.Xl2V_y56tpDF9LEWoU_n:nth-child(2) { animation-delay: 0.2s; }
.Xl2V_y56tpDF9LEWoU_n:nth-child(3) { animation-delay: 0.4s; }

@keyframes OUZgv6ogbm1iY34ABrrB {
  0%   { transform: rotate(-12deg); }
  50%  { transform: rotate(12deg); }
  100% { transform: rotate(-12deg); }
}

@keyframes DWhkP6RiZpzPszUygKdQ {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

@keyframes _4fSvU4jbp8FayX_w2BN9 {
  0%, 60%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  30%           { transform: scaleY(1.4); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   5. CART — bouncing bag with flying items
   ══════════════════════════════════════════════════════════ */

.y6HiPm6o7REOhcGjsmnS {
  position: relative;
  width: 90px;
  height: 80px;
}

.IPv8ApcmaElgimMATKUj {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: ejeRqYcuaZxf5S77x10m 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite alternate;
}

.d8AqSEucrAqIRZbFAjZU {
  width: 60px;
  height: 64px;
  filter: drop-shadow(0 6px 12px rgba(225,113,0,0.22));
}

/* Items flying into the bag */
.NqjuZFrlAfxcR1ezu15R {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #E17100;
  animation: CpK1g66wQAuxv4k2vrvH 1.6s ease-in infinite;
  opacity: 0;
}

.NqjuZFrlAfxcR1ezu15R:nth-child(1) { top: 10px; right: 0px; animation-delay: 0s;    background: #E17100; }
.NqjuZFrlAfxcR1ezu15R:nth-child(2) { top: 20px; right: -8px; animation-delay: 0.45s; background: #FF6B6B; border-radius: 50%; }
.NqjuZFrlAfxcR1ezu15R:nth-child(3) { top: 4px;  right: 4px;  animation-delay: 0.9s;  background: #AF5E00; width: 8px; height: 8px; }

@keyframes ejeRqYcuaZxf5S77x10m {
  from { transform: translateX(-50%) translateY(0px) scaleY(1); }
  to   { transform: translateX(-50%) translateY(-10px) scaleY(1.04); }
}

@keyframes CpK1g66wQAuxv4k2vrvH {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  80%  { opacity: 0.8; transform: translate(-34px, 28px) scale(0.7); }
  100% { opacity: 0; transform: translate(-40px, 32px) scale(0); }
}

/* ══════════════════════════════════════════════════════════
   6. PAYMENT — spinning coin  
   ══════════════════════════════════════════════════════════ */

.D9DQwUydTX_REr24N_y2 {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cLLMt2OSMWvVEDriTT8q {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700 0%, #E17100 60%, #AF5E00 100%);
  box-shadow: 0 4px 20px rgba(225, 113, 0, 0.45), inset 0 2px 4px rgba(255,255,255,0.3);
  animation: T0Jp62I4WV3sKvDEODMW 1.6s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.yo9YSGaJdcO8LR_zDiMg {
  font-size: 22px;
  line-height: 1;
  user-select: none;
  animation: eMO6KP5TUUHvUQ7NYvIA 1.6s ease-in-out infinite;
}

.UTh9hXDjP18ST4FvudG9 {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(225,113,0,0.25);
  animation: F2AUn813RgzTdVg8fbyh 1.6s ease-out infinite;
}

.KRL9WxVaqpUONrxtmiFB {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(225,113,0,0.12);
  animation: F2AUn813RgzTdVg8fbyh 1.6s ease-out infinite 0.3s;
}

@keyframes T0Jp62I4WV3sKvDEODMW {
  0%    { transform: rotateY(0deg) scaleX(1); }
  40%   { transform: rotateY(90deg) scaleX(0); }
  50%   { transform: rotateY(180deg) scaleX(0); }
  90%   { transform: rotateY(270deg) scaleX(1); }
  100%  { transform: rotateY(360deg) scaleX(1); }
}

@keyframes eMO6KP5TUUHvUQ7NYvIA {
  0%, 40%  { opacity: 1; }
  41%, 89% { opacity: 0; }
  90%, 100%{ opacity: 1; }
}

@keyframes F2AUn813RgzTdVg8fbyh {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.custom-square-radio-container {
    display: flex;
  }
  
  .custom-square-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #9d9d9d;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    cursor: pointer;
    margin-right: 8px;
    position: relative;
    border-radius: 2px;
  }
  
  .custom-square-radio.checked {
    background-color: #fff;
  }
  
  .square-radio-content {
    position: absolute;
    top: -13px;
    right: -6px;
    font-size: 26px;
    color: #9d9d9d;
  }
  
  .custom-square-radio.checked .square-radio-content {
    display: block;
  }
  
  .loader-screen-position{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .loader-gif{
    height:8rem
  }

  /* QR dine-in: custom green spinner */
  .qr-loader-spinner {
    width: 52px;
    height: 52px;
    border: 5px solid #e8f5e9;
    border-top-color: #2e7d32;
    border-radius: 50%;
    animation: qr-spin 0.8s linear infinite;
  }

  @keyframes qr-spin {
    to { transform: rotate(360deg); }
  }
.horizontal-product-card-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.home {
  height: 100%;
  background-color: #FFFFFF;
  position: relative;
  z-index: 99999;
}
.home::-webkit-scrollbar {
  display: none;
}

.header-top {
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 0.5rem;
  margin-bottom: 10px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
  height: 64px;
  box-sizing: border-box;
}
.header-top-grocery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border-radius: 0 !important;
}
.header-top-left {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.home-search {
  /* position: fixed; */
  top: 55px;
  padding: 0.5rem;
  z-index: 1000;
  /* width: 100%; */

  /* padding-top: 0.5rem; */
}

/* Parent Container - Responsive Grid */
.products-by-category {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: scroll;
  align-items: stretch;
  min-width: 0;
}

.products-by-category::-webkit-scrollbar {
  display: none;
}

.home-header {
  position: relative;
  width: 100%;
  z-index: 998;
  margin-top: 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.home-header-background {
  position: relative;
}
.custom-slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.un-serviceable {
  padding: 0.5rem;
}

/* .end-footer {
  padding-bottom: 6rem !important;
  margin-top: 140px;
} */

/* left: 0; */
/* home-cart-view */
/* background-color: #f3f8ff; */
.home-cart-view {
  position: fixed;
  /* position: absolute; */
  /* top: 10px; */
  bottom: 50px;
  width: 100%;
  height: 13rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* .home-cart-view {
  position: absolute;
  bottom: 0;
  top: 1px;
  right: 0;

  width: 100%;
  height: 8rem;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
} */

.home-cart-details {
  background: #b96b42;
  height: 4rem;
  width: 40% !important;
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1rem;
  margin-left: 0.2rem;
  flex-wrap: wrap;
  box-shadow: 0 4px 12px rgba(185, 107, 66, 0.3);
}

.home-cart-amount-details {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
  position: relative;
  width: 50%;
}

.cart-icon {
  color: white !important;
}
.cart-line {
  height: 1.5rem;
  width: 0.2rem;
  background: white;
}

.home-cart-redirect {
  margin-right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.home-total-cart-items {
  position: absolute;
  bottom: 1.2rem;
  left: 0.5rem;
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-top-right {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.store-icon {
  color: #b96b42 !important;
}

.store-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 55%;
  width: 90%;
  /* background-color: white; */
  border-radius: 1rem;
  outline: none !important;
  padding: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  overflow: scroll;
}

.store-list-item {
  height: 5rem;
  width: 5rem;
  padding: 1rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 1rem;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.store-active {
  background: #b96b42 !important;
  color: #ffffff !important;
}

.cart-total-amount-saved {
  background-color: #9a5835;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1.2rem;
  border-radius: 1rem;
  width: 5rem;
}

.carousel-banner {
  /* margin-top: -235px !important; */
  margin-bottom: 10px;
  pointer-events: none; /* Prevents blocking interactions below */
  z-index: 2;
  position: relative;
}

.carousel-banner * {
  pointer-events: auto;
}

/* .carousel-banner {

  margin-top: -235px !important;
  margin-bottom: 55px;
} */
.home-content {
  background-color: #FFFFFF;
}
/* Tablets: 600px to 768px */
/* @media (max-width: 768px) and (min-width: 600px) {
  .carousel-banner {
    margin-bottom: 0px;
  }
} */
@media (max-width: 840px) and (min-width: 1280px) {
  .home-cart-details {
    background: #b96b42;
    height: 4rem;
    width: 34% !important;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem;
    margin-left: 0.2rem;
    flex-wrap: wrap;
  }
}

/* @media (max-width: 768px) and (min-width: 600px) {
} */
@media (max-width: 852px) and (min-width: 1280px) {
  .carousel-banner {
    margin-top: -162px;
  }
}

@media (max-width: 599px) and (min-width: 479px) {
  .cart-total-amount-saved {
    margin-left: 0px;
    width: 0rem;
  }
}
/* Mobile, medium and tablet devices: up to 768px */
@media (max-width: 768px) {
  .home-header {
    margin-top: 64px;
  }
}

/* Mobile devices: 320px to 480px */
@media (max-width: 480px) and (min-width: 320px) {
  .carousel-banner {
    margin-top: 0px !important;
    margin-bottom: 0px;
  }
  .home {
    margin-bottom: 0rem;
  }
  .home-cart-details {
    background: #b96b42;
    height: 4rem;
    width: 74% !important;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem;
    margin-left: 0.2rem;
    flex-wrap: wrap;
  }
  .cart-total-amount-saved {
    margin-left: 0.1rem;
  }
  .home-cart-view {
    width: 80%;
  }
}

@media (max-width: 540px) and (min-width: 720px) {
  .carousel-banner {
    margin-top: 55px;
  }
  .home-cart-view {
    width: 50%;
  }
}
@media (max-width: 375px) and (min-width: 667px) {
  .carousel-banner {
    margin-top: -55px;
  }
  .home-cart-view {
    width: 30%;
  }
}

@media (max-width: 344px) and (min-width: 479px) {
  .home-cart-details {
    width: 82% !important;
    flex-wrap: wrap;
  }
  .home-cart-view {
    width: 30%;
  }
}

/* Desktop: align Tags and Category with Banner padding */
@media (min-width: 769px) {
  .tags-section {
    padding: 0 15%;
  }

  .category-section {
    padding: 0 15%;
  }
}

/* for responsiveness */
@media (max-width: 600px) {
  .header-top {
    justify-content: space-between;
  }

  .cart-btn-items-img {
    height: 1.5rem !important;
    width: 1.5rem !important;
  }

  .cart-btn-items-btn {
    height: 1.5rem !important;
    width: 1.5rem !important;
  }
}


.new-home-ui__root {
  height: 100vh;          
  height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: #FFFFFF !important;
  background-image: none !important;
}

.new-home-ui__scroll-container {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;         
  background: inherit;
}

.new-home-ui__loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40vh;
}

.new-home-ui__content-wrapper {
  width: 100%;
  padding-bottom: 1rem;
}

.new-home-ui__carousel-anchor {
  height: 0;
  width: 100%;
}

.new-home-ui__shimmer-wrapper {
  padding: 0;
  overflow: hidden;
  width: 100%;
}

.new-home-ui__shimmer-category-row {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  overflow-x: hidden;
}

.new-home-ui__shimmer-section {
  padding: 0.5rem 12px;
  margin-top: 8px;
}

.new-home-ui__shimmer-cards-row {
  display: flex;
  gap: 12px;
  overflow-x: hidden;
}

.new-home-ui__shimmer-card {
  min-width: 160px;
  flex: 1 1 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
}

.new-home-ui__shimmer-card-body {
  padding: 8px;
}

.new-home-ui__shimmer-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.new-home-ui__main-content {
  margin-bottom: 1rem;
  width: 100%;
}

.new-home-ui__desktop-banner-pair {
  display: none;
}

.new-home-ui__category-section {
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  background-color: #F9F9F9 !important;
}

.new-home-ui__category-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--wb-category-category-title-text-color, #171717);
}

.new-home-ui__filter-section {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--Surface-White, #ffffff);
}

.new-home-ui__not-serviceable {
  width: 100%;
  min-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.new-home-ui__tags-container {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 16px 16px 8px;
}

.new-home-ui__tag-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wb-tag-tag-title-text-color, #171717);
}

/* ─── Responsive: Tablet (601px – 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .new-home-ui__shimmer-card {
    min-width: 180px;
  }

  .new-home-ui__shimmer-section {
    padding: 0.5rem 20px;
  }
}

/* ─── Responsive: Desktop (1025px+)*/
@media (min-width: 1025px) {
  .new-home-ui__scroll-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
  }

  .new-home-ui__desktop-banner-pair {
    display: block;
  }

  .carousel-banner {
    margin-bottom: 0;
  }

  .new-home-ui__shimmer-card {
    min-width: 200px;
  }

  .new-home-ui__shimmer-section {
    padding: 0.5rem 32px;
  }

  .new-home-ui__category-title {
    font-size: 1.125rem;
  }

  .new-home-ui__tags-container {
    gap: 16px;
    padding: 24px 32px 10px;
  }

  .new-home-ui__tag-heading {
    font-size: 1.5rem;
  }

  .new-home-ui__tags-container .products-by-category {
    gap: 16px;
    padding-bottom: 4px;
  }
}

/* ─── Responsive: Small Mobile (max 390px) */
@media (max-width: 390px) {
  .new-home-ui__shimmer-card {
    min-width: 140px;
  }

  .new-home-ui__shimmer-category-row {
    gap: 0.5rem;
    padding: 0.75rem;
  }
}

/* ── Root container ──────────────────────────────────────────── */
.U6FPunnFeTs52FwTwfQY {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72vh;
  padding: 40px 24px 60px;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Ambient floating orbs ───────────────────────────────────── */
.aRaqOHhElH_CCiQjOvmS {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.AoNT8MWZfLsquR2g1uW3 {
  position: absolute;
  bottom: 20%;
  border-radius: 50%;
  filter: blur(2px);
}

/* ── Content stack ───────────────────────────────────────────── */
.VTxeUSJpnb0An8RYJYhp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
  max-width: 320px;
  width: 100%;
}

/* ── Heart illustration wrapper ──────────────────────────────── */
.dZvqkd98yuWdtsA8Jgtg {
  margin-bottom: 8px;
}

.EJUQmsnfbYydaFcxuUws {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulsing glow ring behind the heart */
.NQQEkBPqX9ZidR615jsf {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 113, 0, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.acwBjF_RZ1hYV2k345Ig {
  width: 80px;
  height: 74px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 18px rgba(225, 113, 0, 0.3));
}

/* Sparkle dot around heart */
.i0SQBYZHOQDYmsx6hCAh {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF9A4A;
  box-shadow: 0 0 6px rgba(225, 113, 0, 0.5);
  transform: translate(-50%, -50%);
}

/* ── Typography ──────────────────────────────────────────────── */
.X9NnLKfLaqml3bFe6ofq {
  font-size: 26px;
  font-weight: 900;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.04em;
  text-align: center;
  line-height: 1.15;
}

.xLP_DPbd5Iwc4lcEZFxU {
  font-size: 15px;
  font-weight: 400;
  color: #8A8A8A;
  margin: 0;
  text-align: center;
  line-height: 1.6;
  max-width: 260px;
}

.tkav72nFDjCfrIFr7VmX {
  color: #E17100;
  font-size: 15px;
  display: inline-block;
}

/* ── CTA button ──────────────────────────────────────────────── */
.IDJnG5c6rjUqi61_B4O_ {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1C1C1C;
  color: #FFFFFF;
  border: none;
  border-radius: 100px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: background 0.15s;
}

.IDJnG5c6rjUqi61_B4O_:hover {
  background: #2A2A2A;
}

.aItCXyYDHYS85jfZ_fJ9 {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  background-color: #2b3443;
  height: 80px;
  /* width: 100% !important; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.header-wrapper {
  display: flex;
  justify-items: flex-start;
  align-items: center;
  gap: 0.25rem;
  margin-left: 6px;
  height: 64px;
}

.header-wrapper img {
  width: auto !important;
  height: 64px !important;
  aspect-ratio: auto;
  object-fit: contain;
}

.restro-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  /* color: "black"; */
  /* font-family: Arial, Helvetica, sans-serif; */
}

.heading-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.header-navbar-nav-icon {
  color: #ffffff !important;
}

/* for responsiveness */
@media (max-width: 600px) {
  .header-wrapper {
    margin-left: -0.25rem;
  }

  .restro-title {
    margin: 0;
  }

  .header-wrapper img {
    width: 100px !important;
    height: 64px !important;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .heading-right {
    flex: none;
  }

  .header-navbar-nav-icon {
    min-width: auto !important;
    padding: 0 0.5rem !important;
  }
}
.repeat-order-drawer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* font-family: sans-serif; */
  gap: 5px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}
.addon-title-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.addon-title {
  /* font-family: monospace; */
  font-weight: 500;
  font-size: 17px;
}
.box-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 220px;
}
.box-container-quantity {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: black; */
  border-radius: 4px;
  padding: 5px;
  gap: 15px;
  border: 1px solid #e6e6e6;
}
.add-btn-addon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 14px;
  font-weight: 700;
  display: block;
  margin: 0 auto;
  margin-top: 16px;
}
.restro-product-image-addon {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}
@media (max-width: 600px) {
  /* .box-container {
    flex-direction: column;
    align-items: flex-start;
  } */

  .box-container-quantity {
    margin-top: 8px;
  }
}

.customize-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #d3d3d3b3;

  box-shadow: 0 2px 6px rgb(187 178 157 / 40%);
  border-radius: 4px;
}
.customize-title-image-wrapper {
  padding-left: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.customize-heading-title {
  /* font-family: sans-serif; */
  font-weight: 600;
  font-size: 16px;
}
.additional-note-title {
  /* font-family: sans-serif; */
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}
/* .customize-product-qty-counter {
  background-color: black !important;
  width: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  position: relative;
  right: 0.5rem !important;
  top: 0.2rem !important;
  gap: 10px;
  color: white;
  padding: 6px;
} */
.customize-product-qty-counter {
  /* background-color: rgb(173, 26, 25); */
  width: 6rem !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px !important;
  position: relative;
  right: 0.5rem !important;
  top: 0.2rem !important;
  gap: 10px;
  color: #b96b42;
  padding: 2px 4px;
  vertical-align: middle;
  border: 1px solid #b96b42;
}
.added-qty {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.product-quantity {
  color: #b96b42 !important;
  font-size: 0.9rem !important;
}
.addon-title-data {
  /* font-family: sans-serif; */
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  /* text-align: center; */
  color: #111;
}
.checkbox-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.checkbox-inner-data {
  gap: 12px;
  display: flex;
  justify-items: center;
  align-items: center;
}
.addon-button-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  padding: 7px;
  border-radius: 9px;
  margin-top: 13px;
}
.button-add-on {
  color: white !important;
  background: #b96b42 !important;
  font-weight: 700 !important;
  width: 60%;
}

.restro-product-name {
  /* font-family: sans-serif; */
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: left;
}
.restro-product-description {
  /* font-family: sans-serif; */
  font-weight: 400;
  font-size: 1rem;
  /* line-height: 130%; */
  /* letter-spacing: 0; */
}
.restro-product-image {
  border-radius: 8px;
  object-fit: contain;
}
.restro-product-header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}
.restro-product-additional-info {
  /* font-family: sans-serif; */
  font-weight: 700;
  font-size: 1rem;
  /* line-height: 100%;
  letter-spacing: 0%; */
  text-align: center;
  margin-bottom: 0;
}
.restro-product-additional-info-box {
  display: flex;
  align-items: flex-start;
  justify-content: left;
  gap: 5px;
  padding: 0.2rem;
  border-radius: 0.5rem;
}
.restro-product-additional-info-box p {
  margin: 0;
}
.restro-product-additional-customization {
  padding: 0.2rem;
  border-radius: 0.5rem;
}
.restro-product-description-info {
  /* font-family: sans-serif; */
  font-weight: 600;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: 0px;
  color: #333333;
}
.customization-title {
  /* font-family: sans-serif; */
  font-weight: 700;
  font-size: 12;
  /* line-height: 100%;
  letter-spacing: 0%; */
  text-align: left;
  margin-bottom: 0.25rem;
}
.restro-product-customization-size-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 16px 16px 12px 15px;
  margin: 12px 0;
  gap: 12px;
}
.restro-customize-font {
  /* font-family: sans-serif; */
  font-weight: 600;
  font-size: 12px;
  /* line-height: 100%;
  letter-spacing: 0%;
  text-align: center; */
}
.restro-product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-top: 1px solid #e0e0e0;
}
.custom-title {
  color: #91acc2;
  /* font-family: sans-serif; */
  font-weight: 500;
  cursor: pointer;
}
.add-cooking-title {
  /* font-family: sans-serif; */
  font-weight: 500;
  font-size: 14px;
  /* line-height: 100%;
  letter-spacing: 0%; */
  text-align: left;
}
/* .drawer-page {
  margin: 10px !important;
} */
.detail-page-tooping {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.details-radio-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.drawer-btn-wrapper-par {
  /* bottom: 1rem !important; */
  /* to show above the bottom notch and inside safe area */
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  left: 1rem;
  right: 1rem;
  width: auto !important;
  background-color: #ffffff;
  gap: 0.5rem;
  padding: 0.5rem;
  z-index: 10001;
}

.drawer-qty-btn-par {
  left: 0;
  top: 0 !important;
  flex: 1;
  padding: 4px;
}

.drawer-add-btn-1 {
  flex: 1.5;
}

.desc-drawer-required-text {
  font-weight: normal;
  color: lightgray;
  font-size: 0.8em;
}

/* Tablets: 600px to 768px */
@media (max-width: 860px) and (min-width: 800px),
  (max-width: 768px) and (min-width: 600px),
  (max-width: 599px) and (min-width: 540px),
  (max-width: 480px) and (min-width: 320px),
  (max-width: 360px) and (min-width: 321px) {
  .restro-product-image {
    border-radius: 8px;
    object-fit: cover;
  }
}

@media (max-width: 1024px) {
  .restro-product-image {
    object-fit: cover !important;
    height: 180px !important;
  }
}

.MuiModal-root.MuiDrawer-root {
  z-index: 1500 !important;
}
.custom-heading-position {
  /* position: sticky !important; */
  display: flex;
  width: auto;
  box-sizing: border-box;
  position: fixed !important;
  top: 3.9rem;
  /* margin-bottom: 2rem !important; */
  
  background-color: #b96b42 !important;
}

.menulist-no-product {
  /* margin-top: 2rem; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: small;
  font-weight: 400;
  color: #978585;
}

.add-button-plus-icon-1 {
  position: absolute;
  top: -6px;
  right: 3px;
  font-weight: 400;
  font-size: 1.25rem;
}

.customisable-button-text-1 {
  font-size: 0.8rem;
  margin-top: 1.15rem;
}

.customisable-button-not-img {
  position: absolute;
  top: 3.25rem;
  margin-top: 0rem !important;
}

.item-cart-inc-dsc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-card-img-btn-parent {
  width: 140px;
  min-height: 180px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-cart-btn-2 {
  width: 98px !important;
  font-weight: 600;
  border-radius: 6px !important;
  font-size: 1rem;
  padding: 2px !important;
  background-color: #f5e6de;
  border: 1px solid #b96b42;
  left: 50%;
  transform: translateX(-50%);
  right: 0 !important;
  top: 120px !important;
  position: absolute;
  box-sizing: border-box;
  height: 34px;
}

.item-cart-btn-2-not-img {
  top: 1rem !important;
}

.item-cart-btn-prod-qty {
  color: #b96b42 !important;
  font-size: 1rem !important;
}

.item-card-icon-btn-par {
  height: 32px;
  width: 32px;
  border: 1px solid lightgrey !important;
  border-radius: 50% !important;
}

.item-list-no-more-par {
  margin: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile-specific fixes for iOS */
@media screen and (max-width: 768px) {
  .custom-heading-position {
    /* top: 0 !important; */
    background-color: #b96b42 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* Fix for iOS filter chips horizontal scrolling */
  .MuiBox-root[style*="overflowX"] {
    -webkit-overflow-scrolling: touch;
  }
}
.filter-chips-container-scroll {
  overflow-x: auto;
  height: 100vh;
}
.share-btn {
  font-size: 12px;
  margin-top: 4px;
  color: #333;
  /* font-family: sans-serif; */
}
.copy-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  border: 1px solid rgba(62, 174, 196, 0.187);
  padding: 0.5rem;
  /* font-family: sans-serif; */
  border-radius: 0.5rem;
}

.clear-div {
  position: absolute;
  top: 14px;
  right: 10px;
  color: darkgray;
  cursor: pointer;
  z-index: 10;
}

.menulist-name-text {
  color: #000000 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  /* font-family: sans-serif !important; */
  padding: 12px;
}
.add-icon {
  background-color: white;
  border-radius: 50%;
}
.common {
  display: flex;
  align-items: center;
}
.menu-items-wrapper {
  justify-content: center;
  gap: 4px;
}
.menu-items-container {
  justify-content: space-between;
}
.check {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.open-product-listing {
  cursor: pointer;
}
.menulist-dialog-container {
  position: absolute;
  bottom: 130px;
  right: 10px;
  margin: 0;
  width: 450px;
  border-radius: 8px;
  background-color: #ffffff;
  color: #000000;
}

@media (max-width: 344px) and (min-width: 479px) {
  .menulist-name-text {
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    /* font-family: sans-serif !important; */
    padding: 7px;
  }
  .menulist-dialog-container {
    position: absolute;
    bottom: 130px;
    right: 10px;
    margin: 0;
    width: 250px;
    border-radius: 8px;
    background-color: #ffffff;
    color: #000000;
  }
}

.fav-listing-container {
  padding: 16px;
  /* max-width: 500px; */
  margin: auto;
  /* font-family: sans-serif; */
  /* margin-top: 29px; */
  padding-top: 0;
  padding-bottom: 6rem;
}

.fav-header {
  display: flex;
  justify-content: center;

  margin-top: 16px;
  margin-bottom: 12px;
}

.filters {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid rgb(173, 26, 25);
  background: white;
  color: rgb(173, 26, 25);
  border-radius: 8px;
  cursor: pointer;
}

.filter-btn.active {
  background: rgb(173, 26, 25);
  color: white;
}

.fav-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fav-card {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ddd;
  padding: 0.5rem;
  border-radius: 8px;
}

.fav-card-left {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

.food-type-indicator {
  height: 3rem;
  width: 3rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.food-type-indicator img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-type-indicator .veg-dot,
.food-type-indicator .nonveg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.veg-dot {
  background-color: green;
}

.nonveg-dot {
  background-color: red;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.item-name {
  font-weight: bold;
}

.item-price {
  color: #666;
  font-size: 14px;
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid rgb(173, 26, 25);
  border-radius: 4px;
  /* overflow: hidden; */
}

.quantity-control button {
  background: rgb(173, 26, 25);
  color: white;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}

.quantity-control input {
  width: 32px;
  text-align: center;
  border: none;
}

.restro-add-btn {
  background: rgb(173, 26, 25);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 0.5rem;
  cursor: pointer;
}

.delete-btn {
  background: none;
  border: none;
  color: rgb(173, 26, 25);
  font-size: 18px;
  cursor: pointer;
}

.delete-btn svg {
  fill: rgb(173, 26, 25);
  height: 28px;
  font-size: 2rem !important;
}

.loader {
  text-align: center;
  padding: 20px;
}

.empty-state {
  text-align: center;
  color: #777;
  padding: 20px;
}

.dashed_line_p {
  position: relative;
}

.dashed_line_p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px; /* thickness */
  background: repeating-linear-gradient(
    to right,
    var(--gray-3, #dadde3) 0,
    /* start of dash */ var(--gray-3, #dadde3) 5px,
    /* end of dash length */ transparent 5px,
    /* start of gap */ transparent 6.5px /* end of gap */
  );
}

/* --- TABLET & DESKTOP LAYOUT (768px and up) --- */
@media (min-width: 768px) {
  .fav-items {
    display: grid;
    /* Create responsive columns that are at least 340px wide */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem 1.5rem; /* Space between rows and columns */
    align-items: start;
  }

  /* Target the empty state to make it span full width if no items are found */
  .empty-state {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Hide the dashed lines on desktop for a cleaner card layout */
  .dashed_line_p::after {
    display: none;
  }
}

.F2Yj9UtlwjNc2rAwlC7g {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── ADD / Stepper button container ───────────────────────── */
.GZl01u3jFdOhviTUhc3U {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #FFFFFF;
  border-radius: 8px;
  border: 1.5px solid var(--wb-button-button-bg-color, #AF5E00);
  overflow: hidden;

  width: 96px;
  height: 34px;
  padding: 0 4px;
  box-shadow: 0 1px 4px rgba(175, 94, 0, 0.12);
}

/* ── Icon buttons (− / +) ─────────────────────────────────── */
.uLEJQQAYA9Chfx5PRyTN {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.2rem;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  transition: opacity 0.12s ease;
}

.uLEJQQAYA9Chfx5PRyTN:active {
  opacity: 0.6;
}

.S9jRfLYe8tJyMvEVKKFR {
  width: 16px;
  height: 16px;
  color: var(--wb-button-button-bg-color, #AF5E00);
  stroke-width: 2.5;
}

._QFasoFiVt8K_eHDqft5 {
  width: 16px;
  height: 16px;
  color: #1C1C1C;
  stroke-width: 2.5;
}

/* ── Quantity text ────────────────────────────────────────── */
.n4A4q7t2iJ620GK812BO {
  flex: 1;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}

/* ── ADD state ────────────────────────────────────────────── */
.jDi57WPyMOGNVa_ckmgD {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  background: transparent;
  border: none;
  color: var(--wb-button-button-bg-color, #AF5E00);
  font-size: 0.9375rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.t6xwjO16SjSpQrQzkWYp {
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD — mobile-first
══════════════════════════════════════════════════════════ */
.j2VliZhXuyYNO4ezAk5F {
  background-color: #FFFFFF;
  padding: 14px 16px;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #F2F0ED;
  transition: background-color 0.12s ease;
  cursor: pointer;
}

.j2VliZhXuyYNO4ezAk5F:last-child {
  border-bottom: none;
}

.j2VliZhXuyYNO4ezAk5F:active {
  background-color: #FBF9F7;
}

.R1SKcx6U5KjB85wP2XVd {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 14px;
  align-items: flex-start;
}

.RGU0Zo372rN8zI2jJ9E5 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.BiR05vI7bppe2UN1ZO7h {
  margin-top: 0;
}

.bFJqtAeFmrS72w3Bnnp8 {
  position: relative;
}

/* ── Top: food type icon + name ──────────────────────── */
.R0mdLOZyblh_WvC5oz6u {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.zprPRV26NgB7ye7hgRNl {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.R7WvE8y0_A0e7W0YERcQ {
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.R7WvE8y0_A0e7W0YERcQ img {
  object-fit: cover;
  height: 18px;
  width: 18px;
}

/* ── Name ────────────────────────────────────────────── */
.kXrkOlRKXoP1KRwDiyuJ {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1C1C1C;
  line-height: 1.35;
  margin-top: 0;
  letter-spacing: -0.01em;
}

.gNFTdVSpKlTdKVe2S7rD {
  flex: 1;
  min-width: 0;
  padding-right: 8rem;
}

/* ── Price + Description ─────────────────────────────── */
.ky9td4adgfp6wEnz9QPQ {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ht0Y3e_5pKBw1nEGlFpV {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}

.fA1GRwUATEJl6ckNLNxw {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #999490;
  line-height: 1.5;
}

/* ── Image ───────────────────────────────────────────── */
.bcMhsIES841whfChiY2V {
  flex-shrink: 0;
}

.uv63B0HChfZuAXZLG9cU {
  width: 118px;
  height: 118px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #F0EDE8;
  position: relative;
  background-color: #F7F5F2;
  flex-shrink: 0;
}

.FTFyJ4AvJDM3Jov42ZRi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Bottom row: add button ──────────────────────────── */
.WVW9PVqaDlpxmCZGyuQ8 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding-top: 6px;
}

.E8l0dK3ENwbY_BBcVUnf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.iZGrGtABGZtjKtU59MoW {
  display: flex;
  gap: 0.5rem;
}

.iZGrGtABGZtjKtU59MoW .wishlist-icon,
.iZGrGtABGZtjKtU59MoW .wishlist-icon-added {
  color: #C0B8B0 !important;
}

.ZSUK2TBKMQ6d7LntNazV {
  font-size: 0.625rem;
  font-weight: 500;
  color: #999490;
  letter-spacing: 0.01em;
  text-align: center;
}

.VXma9qrroCrw_BrUGUmX {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 1rem;
}

/* ── Badge + heart row ───────────────────────────────── */
.qAuWP36wiANCPKM7IB6Q {
  width: 100%;
}

.xpRjmipp67W9kLDl2T_W {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

/* ── Delivery slot badge ─────────────────────────────── */
.rLEmsdiKvh9yAFdeyI4O {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background-color: #FFF8EF;
  border-radius: 6px;
  padding: 3px 7px;
}

.Ngn0Sh4f9Y2P4AC5rAAA {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #C77D0B;
  letter-spacing: 0.01em;
}

.iv5MjwGjXDN8AGnAITry svg {
  width: 11px;
  height: 11px;
  color: #C77D0B;
}

/* ── Text clamp ──────────────────────────────────────── */
.OVnFt7hOpwWSzp_R13_i {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.i7G8Cu1H965EbKkXrp_U {
  background: none;
  border: none;
  color: #93959F;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0;
  margin-top: 2px;
  cursor: pointer;
}

/* Desktop-only ADD row inside image column (hidden on mobile) */
.WXuJLd19b6oore0NMhm3 {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP GRID CARD (768px+)
   Horizontal card: image right, content left (2-per-row grid)
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Card shell — bordered, rounded, lifted */
  .j2VliZhXuyYNO4ezAk5F {
    padding: 16px;
    border-bottom: none;
    border-radius: 14px;
    border: 1px solid #EDE9E3;
    background: #FFFFFF;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    overflow: visible;
  }

  .j2VliZhXuyYNO4ezAk5F:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
  }

  .j2VliZhXuyYNO4ezAk5F:active {
    transform: translateY(0);
    background: #FEFCFA !important;
  }

  /* Keep horizontal: image right, content left */
  .R1SKcx6U5KjB85wP2XVd {
    flex-direction: row-reverse;
    gap: 16px;
    align-items: flex-start;
  }

  /* Right column: image + button stacked */
  .bcMhsIES841whfChiY2V {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Image — compact but tall enough */
  .uv63B0HChfZuAXZLG9cU {
    width: 144px;
    height: 120px;
    border-radius: 10px;
    border: 1px solid #F0EDE8;
    background: #F5F2EE;
  }

  /* Left column fills remaining width */
  .RGU0Zo372rN8zI2jJ9E5 {
    flex: 1;
    min-width: 0;
    gap: 6px;
    justify-content: flex-start;
  }

  /* Move ADD button + customisable text into the right column
     by hiding the bottom row on desktop and showing it under the image */
  .WVW9PVqaDlpxmCZGyuQ8 {
    /* hide the left-column button row */
    display: none;
  }

  /* Show the ADD button that we render inside imageButtonContainer */
  .WXuJLd19b6oore0NMhm3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .kXrkOlRKXoP1KRwDiyuJ {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .ht0Y3e_5pKBw1nEGlFpV {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 2px;
  }

  .fA1GRwUATEJl6ckNLNxw {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

.EgfmvM5TfYquuUFZHC06 {
  border-radius: 0.5rem;
  border: 1px solid var(--blue-400, #0860E6);
  font-size: 1rem;
  font-weight: 700;

  transition: all 0.15s ease-in-out;
  white-space: nowrap;

  padding: 0.5rem;
}

.EgfmvM5TfYquuUFZHC06:hover:not(:disabled) {
  opacity: 0.9;
}

.HE0tF1y6ZOQsrBuqWlIT {
  /* Flex container for icon and text */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.hkrlO4PdWMHSW9gsJ7vV {
  /* Ensures text doesn't shrink or wrap unncessarily */
  flex-shrink: 0;
}

.d9lpnqV7nag5d4BzlfOq {
  /* Ensures icon is centered and uses currentColor for dynamic coloring */
  display: flex;
  align-items: center;

  width: 18px;
  height: 18px;

  stroke-width: 2.75;
}
.UFXr88_8tuAl7vLSmiNV {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  padding: 14px 16px;
}

.vm3FYenzS2qqikeM4rzU {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.OGdehDgOOCtt9UhHUuAq {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}

/* optional badge */
.OGdehDgOOCtt9UhHUuAq::after {
  content: "OPTIONAL";
  font-size: 0.625rem;
  font-weight: 700;
  color: #93959F;
  background: #F5F5F5;
  border-radius: 100px;
  padding: 2px 7px;
  letter-spacing: 0.06em;
  margin-left: 8px;
  vertical-align: middle;
}

.b6uOh7fNEVJJBBqBCqar {
  position: relative;
  margin-bottom: 10px;
}

.IurhxRbgamuznMDJBwTF {
  width: 100%;
  min-height: 80px;
  padding: 10px 40px 10px 12px;
  border: 1.5px solid #EBEBEB;
  border-radius: 12px;
  font-size: 0.875rem;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #FAFAFA;
  color: #1C1C1C;
  line-height: 1.5;
  box-sizing: border-box;
}

.IurhxRbgamuznMDJBwTF::placeholder {
  color: #ADADAD;
}

.IurhxRbgamuznMDJBwTF:focus {
  border-color: #AF5E00;
  box-shadow: 0 0 0 3px rgba(175, 94, 0, 0.08);
  background: #FFFFFF;
}

.T9etAEEqxc4E9UrRgH8y {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #ADADAD;
}

/* Horizontal scrolling tag chips */
.cWXMY3svaawWfy0FHgi9 {
  display: flex;
  overflow-x: auto;
  gap: 7px;
  padding-bottom: 2px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cWXMY3svaawWfy0FHgi9::-webkit-scrollbar {
  display: none;
}

.jlatXISpSb_eEvIqrO_e {
  background: transparent;
  color: #3D3D3D;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 13px;
  border-radius: 100px;
  border: 1.5px solid #EBEBEB;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}

.jlatXISpSb_eEvIqrO_e:hover {
  background: #FFF3E8;
  border-color: #AF5E00;
  color: #AF5E00;
}

/* ── Small header (non-details mode) ────────────────────────── */
.CjNm24QRaKbZT5V5cEZz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #F2F2F2;
  background: #FFFFFF;
}

.cZh51GAlatjRWjmINrn2 {
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #F0F0F0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.cZh51GAlatjRWjmINrn2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.X5I2TvIwgmyqg3bvdWiw {
  font-size: 1rem;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}

/* ── Drag handle ─────────────────────────────────────────────── */
.sV3dxyyqVCExAD3g9IxT {
  width: 36px;
  height: 4px;
  border-radius: 100px;
  background: #E0E0E0;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

/* ── Main shell ──────────────────────────────────────────────── */
/* NOTE: The MUI inner Box (overflowY:auto, flexGrow:1) is the ONE
   true scroll container for this drawer. Do NOT create a nested
   scroll container here — it collapses heights and hides content. */
.Z9uqFzMv2NAh7M5yCrLg {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

.X3d4qvTzPi83GNa5u8Ig {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 90px; /* bottom pad keeps last item above sticky footer */
}

/* Mobile: customizations are just stacked in the column flow */
.i7nyrOw0mdgysgY7YoQm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Hero image block ────────────────────────────────────────── */
.whRQ9vSuxvwnnJsrLqk2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #EDE8E0;
  margin-top: 4px;
}

.WzKuhFYGQZWzr7ACXCgo {
  position: relative; /* contains the ::after gradient overlay */
  height: 200px;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.WzKuhFYGQZWzr7ACXCgo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* No gradient overlay — clean sharp image edge on all screen sizes */

/* Row: delivery badge + wishlist icon side by side */
.R_LlJNeAgM8awZPaQNYT {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 0;
}

/* Delivery slot badge */
.OtyeWjSXK1u10c6NkFMk {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  background: #FFF3E0;
  border-radius: 100px;
  padding: 4px 10px 4px 6px;
  border: 1px solid #F5D799;
}

.wxGgc0GnZA4ncOEMJgQ9 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #B86200;
  letter-spacing: 0.01em;
}

.ehReRApj7dGV8k54tYL_ svg {
  width: 13px;
  height: 13px;
  color: #E17100;
}

/* Food type + product name */
.qPkqXu9zyUfhHEBnkbj6 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px 0;
}

.HMw18vT2Lf9WrvThu3ZK {
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  margin-top: 3px;
}

.HMw18vT2Lf9WrvThu3ZK img {
  height: 18px;
  width: 18px;
  object-fit: contain;
}

.k1s9wOfdBi_cJxv2B1VA {
  font-size: 1.125rem;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.w4rHpLIHQZuwQH9Iw7Lo {
  font-size: 0.875rem;
  font-weight: 400;
  color: #8A8A8A;
  line-height: 1.5;
  padding: 6px 14px 0;
}

.hANle300Cmy0xmzvMDVw {
  display: flex;
  gap: 0.5rem;
  padding: 8px 14px 14px;
}

/* ── Brand + weight row ──────────────────────────────────────── */
.e9HdRu1drJe3phLReiPP {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 0;
  flex-wrap: wrap;
}

.wubfZt3w666H53ZBhwxo {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #9A9A9A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.p_zOlicQi_fkXLAqvlue {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #707070;
  background: #F2F2F2;
  border-radius: 100px;
  padding: 2px 8px;
}

/* ── Price row ───────────────────────────────────────────────── */
.GAQZW9AXzPDDh8g3mlVZ {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 14px;
  flex-wrap: wrap;
}

.PskwWxXfsXoEZlObRkmy {
  font-size: 1.125rem;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.02em;
}

.FqXWdIzLSX5Aofvu0b_Q {
  font-size: 0.875rem;
  font-weight: 400;
  color: #BBBBBB;
  text-decoration: line-through;
}

.D0oby3ZlfDehx90PYOgR {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #1A7F3C;
  background: #E8F7EE;
  border: 1px solid #B8E0C8;
  border-radius: 100px;
  padding: 3px 8px;
  letter-spacing: 0.01em;
}

/* ── Section cards (variants / addons) ───────────────────────── */
.Fk7NSeR1GL__0sz3xTxi {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #EDE8E0;
}

/* Section header row */
.aGtFI5NMB9RLSPjH0jm8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}

.U2WgzltIUh3ZDifPoKL9 {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}

/* "Select any 1 option" badge */
.w6Mjy4LdMAuJyo3mab5b {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #AF5E00;
  background: #FFF3E8;
  border: 1px solid #F0D8C0;
  border-radius: 100px;
  padding: 3px 9px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Thin divider — full-bleed */
.mTHDKPYP2FCkuHyVqdsO {
  height: 1px;
  background: #F2F2F2;
}

.o_glLzRCDzqnwBkX1r4l {
  padding: 4px 0 4px;
}

/* Each option row */
.aQ5Vw9AYADjAYXKCJr9M {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s ease;
  border-left: 3px solid transparent;
  position: relative;
}

/* Hairline between rows */
.aQ5Vw9AYADjAYXKCJr9M + .aQ5Vw9AYADjAYXKCJr9M::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: #F5F5F5;
}

.aQ5Vw9AYADjAYXKCJr9M:hover {
  background: #FAFAFA;
}

/* Selected row highlight */
.hOY0cGGLg6h2Gw0oXSRU {
  background: #FFF8F0 !important;
  border-left-color: #AF5E00 !important;
}

.yRXgOwLaeufaKHd0Nbd4 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1C1C1C;
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

/* Expand / Collapse more/less */
.w7DZcISi_M9lyrXsOxwE {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #AF5E00;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.o18uniqZtRpirDnK0zlg {
  width: 14px;
  height: 14px;
  fill: #AF5E00;
}

/* ── Bottom footer ────────────────────────────────────────────── */
/* Sticky relative to the MUI outer scroll container (overflowY:auto) */
.y8OQvOjsbbzHuiwCttB4 {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  padding: 12px 16px 18px;
  border-top: 1px solid #F2F2F2;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
}

/* Qty pill — left side */
.LStyNYfQldzejSQwMUdJ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  background: #FFFFFF;
  border: 2px solid #E8E8E8;
  border-radius: 12px;
  padding: 6px 4px;
  width: 108px;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.LStyNYfQldzejSQwMUdJ:focus-within {
  border-color: #AF5E00;
}

.sUJROOwrauldN0Hu5lTU {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.sUJROOwrauldN0Hu5lTU:hover {
  background: #FFF3E8;
}

.sUJROOwrauldN0Hu5lTU:active {
  background: #F0D8C0;
}

.eqSolFgcYJYwep8rtpeg {
  width: 17px;
  height: 17px;
  color: #AF5E00;
  stroke-width: 2.75;
}

.NnGtRR4iY1vC0HeNR5V5 {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}

/* ── Add-on qty stepper (inline in row) ──────────────────────── */
.H2tcsiizq6yYY611mKnQ {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dvThYOfy5IkeAZ_mm0aS {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1C1C1C;
}

.ddtL31i2gqbmnPnsRrRA {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #FFF3E8;
  border: 1.5px solid #F0D8C0;
  border-radius: 10px;
  padding: 3px 4px;
}

.rg90gpTxdhbM38hb07Dy {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.1s ease;
}

.rg90gpTxdhbM38hb07Dy:hover {
  background: rgba(175,94,0,0.12);
}

.bvW7EW_oVYDdxs8RPu3r {
  width: 13px;
  height: 13px;
  color: #AF5E00;
  stroke-width: 3;
}

.jqiGq3s5IHzPsGav2xy5 {
  min-width: 22px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 800;
  color: #AF5E00;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP OVERRIDES  (≥ 600 px — MUI sm breakpoint)
   Two-column layout: product image sticks left, options scroll right
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  /* No drag handle on desktop */
  .sV3dxyyqVCExAD3g9IxT {
    display: none;
  }

  /* Background: pure white, no tint */
  .Z9uqFzMv2NAh7M5yCrLg {
    background: #FFFFFF;
  }

  /* ── Two-column flex row ───────────────────────────────────── */
  .X3d4qvTzPi83GNa5u8Ig {
    flex-direction: row;
    align-items: flex-start; /* needed for position:sticky on left col */
    padding: 0;
    gap: 0;
  }

  /* ── LEFT COLUMN: product image + info ────────────────────── */
  .whRQ9vSuxvwnnJsrLqk2 {
    width: 270px;
    flex-shrink: 0;
    /* Stick to the top as the right column scrolls */
    position: sticky;
    top: 0;
    /* Reset mobile card styles */
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    background: #FFFFFF;
    border-right: 1.5px solid #F2EDE8;
    /* Prevent overflowing the dialog */
    overflow: hidden;
  }

  /* Taller image on desktop, sharp bottom edge */
  .WzKuhFYGQZWzr7ACXCgo {
    height: 290px;
    border-radius: 0;
  }

  /* Tighten top info row in left column */
  .R_LlJNeAgM8awZPaQNYT {
    padding: 8px 14px 0;
  }

  .qPkqXu9zyUfhHEBnkbj6 {
    padding: 6px 14px 0;
  }

  .k1s9wOfdBi_cJxv2B1VA {
    font-size: 1rem;
  }

  .w4rHpLIHQZuwQH9Iw7Lo {
    padding: 4px 14px 8px;
    font-size: 0.75rem;
  }

  .hANle300Cmy0xmzvMDVw {
    padding: 0 14px 12px;
  }

  /* ── RIGHT COLUMN: variants, add-ons, cooking note ─────────── */
  .i7nyrOw0mdgysgY7YoQm {
    flex: 1;
    min-width: 0;
    /* No top padding — card goes flush to the top of the right column */
    padding: 0 12px 0;
    gap: 0;
  }

  /* Flush top corners on desktop — sits against the dialog edge */
  .Fk7NSeR1GL__0sz3xTxi {
    border-radius: 0 0 12px 12px;
    border-top: none;
    border-left: none;
    border-right: none;
  }

  /* Shift badge left of the absolute-positioned × button
     (button: right:10px, width:32px → needs ~44px clearance) */
  .aGtFI5NMB9RLSPjH0jm8 {
    padding-right: 48px;
  }

  /* ── Footer: full width below both columns ─────────────────── */
  .y8OQvOjsbbzHuiwCttB4 {
    /* Keep position:sticky — the MUI scroll box is the scroll ancestor */
    border-top: 1.5px solid #F2EDE8;
    background: #FFFFFF;
    padding: 12px 16px;
    border-radius: 0 0 16px 16px;
  }
}

.jGfkVGNoYI8s_4zI6j3U {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(
    --wb-cart-cart-qty-control-bg-color,
    var(--pink-1, #fffbeb)
  );
  border-radius: 6px;
  border: 1px solid
    var(--wb-cart-cart-qty-control-bg-color, var(--pink-1, #fffbeb));
  overflow: hidden;

  width: 6.5rem;
  height: 2.2rem;
  padding: 0 0.25rem;
}

.V83JHNKiM4zJwHuTxGJ9 {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.15rem;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* Adjust icon size + color */
.wa5PU1hsXcjhZVJvbEgm {
  width: 18px;
  height: 18px;
  color: var(--wb-cart-cart-qty-control-icon-color, var(--blue-400, #af5e00));

  stroke-width: 2.25; /* increase thickness */
}

.tHnyBLcm3l41RdOrA6hs {
  width: 18px;
  height: 18px;
  color: var(
    --wb-cart-cart-qty-control-icon-color,
    var(--text-Secondary-2, #333333)
  );

  stroke-width: 2.25; /* increase thickness */
}

/* Quantity text */
.hhM8w_KsIeMuP1h4XBTV {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(
    --wb-cart-cart-qty-control-text-color,
    var(--text-Secondary-2, #333333)
  );
}

.FQMIwEkLKQd0uGEHmZpN {
  display: flex;
  gap: 12px;
  background-color: transparent;
  width: 100%;
  align-items: flex-start;
  padding: 8px 0;
}

/* Left side: Image */
.ij86cddbTtl0zgJjypQA {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--wb-cart-cart-card-bg-color, #f5f5f5);
}

.KyB6QYguUOdq1HHFF85W {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right side: Details & Controls */
.iLw5qSOqXtAlCfpX1DwU {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
}

/* Title Row */
.KfBOAvXNecVGE8k9ofOe {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.gmUWXbjuQxzPKHY3wXCM {
  height: 16px;
  width: 16px;
  object-fit: contain;
  /* margin-top: 1px; */
  flex-shrink: 0;
}

.lJPbDRBTv4Oku81EOgcb {
  font-size: 16px;
  font-weight: 600;
  color: var(--wb-cart-cart-primary-text-color, var(--text-Primary-1, #171717));
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Variant Row */
.VDmtskDoFssQ1DLE269Z {
  font-size: 14px;
  color: var(--wb-cart-cart-secondary-text-color, var(--grey-n-2, #737373));
  margin: 0;
  font-weight: 400;
}

/* Note / Comments Row */
.AIfD5rz_FNsjZXVkW5lF {
  margin: 0;
  font-size: 14px;
}

.LuExTMTwpRajEE3ftT6N {
  color: var(--wb-cart-cart-secondary-text-color, var(--blue-400, #af5e00));
  font-style: italic;
  font-weight: 600;
}

.SZrfJfPsZMq965sevN9G {
  color: var(--wb-cart-cart-secondary-text-color, var(--grey-n-2, #737373));
  font-style: italic;
  font-weight: 400;
}

/* Addons */
._1_qzg9lkjKO_uoYtKxqi {
  font-size: 13px;
  font-weight: 400;
  color: var(--wb-cart-cart-secondary-text-color, #717680);
  margin: 0;
}

/* Edit Button */
.yfbAhcwfZ011MbxR6h7q {
  color: var(--wb-cart-cart-accent-color, var(--blue-400, #af5e00));
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
  margin-top: 2px;
}

.YOwV3xD8fUwAOfRA6l3M {
  display: flex;
  align-items: center;
  gap: 2px;
}

.jgxak5SVOC_1mK6o7tgT {
  height: 14px;
  width: 14px;
  stroke-width: 2.5;
}

.vrFuWS_eOwKiYYkzEhsJ {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Price & Controls Row */
.u70toVumxvbi2GRQrBlr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px; /* Pushes the controls slightly down */
}

.IG9mx7tpSIw2LNujivSV {
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-cart-cart-primary-text-color, var(--text-Primary-1, #171717));
  margin: 0;
}

.EhyIKL_mSGK__LUipQIo {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* Acts as anchor for the fixed bottom button */
}

.bIesR0ST_eXAK7zkxY3Y {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  padding: 1rem;
  overflow-y: auto;
  flex: 1; /* Takes up remaining space */
  padding-bottom: 5rem; /* Ensures the last item is not hidden behind the fixed button */
}

.nXn0IlfW3K6d2lrhEzsV {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-3, #dadde3);
  background-color: var(--Surface-White, #ffffff);
}

.mfVdgfzFxROItpbUSNsA {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.s7sNTcqN5QkBED1xhAGt {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-Primary-1, #252b37);
  text-transform: capitalize;
  margin: 0;
}

.GQT0mVeNXur_oLamDmJc {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-1, #af5e00); /* Theme color */
  margin: 0;
  cursor: pointer;
}

/* Fixed Bottom Button Styles */
.LKEhdYf4TTUSfkEG8CDx {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--Surface-White, #ffffff);
  padding: 1rem;
  border-top: 1px solid var(--grey-200, #e9eaeb);
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.WeFfnWVwbJ9fpMPBl1MR {
  background: transparent;
  border: none;
  color: var(--blue-1, #af5e00); /* Theme color */
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.5rem;
  width: 100%;
  text-align: center;
}

.WeFfnWVwbJ9fpMPBl1MR:hover {
  opacity: 0.8;
}

/* dashed lines below the cards */
.TuFudcI3Zg8aBWgWTzmR {
  position: relative;
}

.TuFudcI3Zg8aBWgWTzmR::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px; /* thickness */
  background: repeating-linear-gradient(
    to right,
    var(--gray-3, #dadde3) 0,
    /* start of dash */ var(--gray-3, #dadde3) 5px,
    /* end of dash length */ transparent 5px,
    /* start of gap */ transparent 6.5px /* end of gap */
  );
}

.huCFSH4Up3Thae652F7J {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  border-bottom: 1px solid
    var(--wb-page-header-page-header-bottom-border-color, #dadde3);
  /* Push content below the iPhone status bar / notch on Chrome.
     env() is only non-zero on devices that expose a safe-area-inset-top
     (iPhone notch / Dynamic Island). Falls back to 0px on all other devices
     so desktop and Android layouts are completely unaffected. */
  padding-top: env(safe-area-inset-top, 0px);
}

.ZVWDwaAOSkR6amimKEro {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  padding-bottom: 0.75rem;
  /* background-color handled by inline style */
}

.qRT6MSUWTyausJgdV3Tq {
  width: 42px;
  height: 42px;
  cursor: pointer;
  margin-left: -0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.qRT6MSUWTyausJgdV3Tq svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.75;
  margin-left: -0.25rem;
}

.tciqgu7fsDh2nMrSdVlY {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: inherit;
}

.about-us-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3%;
    margin-bottom: 3%;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important;
}
.activity-screen {
  height: 100%;
  height: 100vh;
  background-color: #f4f7fc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.map-image {
  height: 12rem;
  width: 12rem;
}

.map-gif {
  height: 100%;
}

.Z_zlzgdN9chzqLGO1UVG {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background-color: #E17100;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 16px rgba(225, 113, 0, 0.32);
}

.Z_zlzgdN9chzqLGO1UVG:hover:not(:disabled) {
  background-color: #C96500;
  box-shadow: 0 6px 20px rgba(225, 113, 0, 0.42);
}

.Z_zlzgdN9chzqLGO1UVG:active:not(:disabled) {
  transform: scale(0.98);
}

.Z_zlzgdN9chzqLGO1UVG:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.t0Gmc94FywDa7L9IoyLU {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.gm4FEr5i8KIHumBPAb5A {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.QbV56gwSYb6QWg5VgSU0 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}

/* ── Card ─────────────────────────────────────────── */
.DqX8cAzFijZAS8ushOeu {
  display: flex;
  gap: 12px;
  padding: 14px 14px 12px;
  background: #ffffff;
  border: 1px solid #EEEBE8;
  border-left: 3.5px solid #E8E0D8;
  border-radius: 12px;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.DqX8cAzFijZAS8ushOeu:hover {
  border-left-color: #E17100;
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
}

/* Selected / active address */
.gSghYlNJdZx7SmOSuBLQ {
  border-color: #E17100;
  border-left-color: #E17100;
  background: #FFFCF8;
  box-shadow: 0 2px 12px rgba(225,113,0,0.12);
}

/* ── Loader overlay ───────────────────────────────── */
.jMb4jouruBcFbw21t_Eq {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.72);
  z-index: 10;
}

/* ── Left icon column ─────────────────────────────── */
.em8pHWw_thnPqcYZiOl3 {
  flex-shrink: 0;
  padding-top: 2px;
}

.cx6KPK8QdSRITYMkjGva {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFF3E0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gSghYlNJdZx7SmOSuBLQ .cx6KPK8QdSRITYMkjGva {
  background: #FFECD3;
}

.i8SidL93CLjOzg3fYlBL {
  width: 20px;
  height: 20px;
  color: #E17100;
  stroke-width: 2;
}

/* ── Right content column ─────────────────────────── */
.Ir6l2Pwb2iPa4J2XSjhO {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.fD8b9Clm9m5XifgRfp3r {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.RWx4yc4jAH9q1jip8H6D {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.01em;
}

/* "Default" badge */
.K5d9UmylGHRWwI7ga1Lw {
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.OYYRBlXG7K1s54jWKJnS {
  font-size: 12.5px;
  color: #888888;
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Action buttons ───────────────────────────────── */
.AhfHSoviMHZtYGKSrZmQ {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.Qp0ls3XbTAl7dNE0np9M {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #F7F5F2;
  border: 1px solid #E8E4DF;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.Qp0ls3XbTAl7dNE0np9M:hover:not(:disabled) {
  background: #FFF3E0;
  border-color: #E17100;
  color: #E17100;
}

.Qp0ls3XbTAl7dNE0np9M:hover:not(:disabled) .I1zsb9WwkqPVvVOetJxN {
  color: #E17100;
}

/* Delete button tint on hover */
.Qp0ls3XbTAl7dNE0np9M:last-child:hover:not(:disabled) {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

.Qp0ls3XbTAl7dNE0np9M:last-child:hover:not(:disabled) .I1zsb9WwkqPVvVOetJxN {
  color: #DC2626;
}

.Qp0ls3XbTAl7dNE0np9M:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.I1zsb9WwkqPVvVOetJxN {
  width: 14px;
  height: 14px;
  color: #777;
  stroke-width: 2;
  flex-shrink: 0;
}

.address-book-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 0.8rem !important;
  cursor: pointer;
}

.address-book-list-head{
display: flex;
justify-content: space-between;
background-color: whitesmoke;
}

.edit-icon-address{
  color: rgb(12, 121, 36) !important;
  margin-left: 8px;
  cursor: pointer;
}

.delete-icon-address{
  color:#dc5454 !important;
  margin-left: 8px;
  cursor: pointer;
}
.VMCChQQk9OVXWiMm2hCX {
  position: sticky;
  top: 70px;
  z-index: 10;
  background-color: var(--Surface-White, #ffffff);
  padding: 1rem;
  box-shadow: 0 4px 6px -6px rgba(0, 0, 0, 0.1);
}

.vrtDfn9LI45eVZsA3uHf {
  padding: 1rem 1rem 4rem;
  display: flex;
  flex-direction: column;
}

.rGoHMk7ydP3bgBnrNP7x {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* Header row — title left, button right */
.amepj61t3x71PTfoQToa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.rTobiGEeQb5KIyPrOanr {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Compact "+ Address" pill button */
.dxhmVfi9UEzWAoz6faHF {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 8px;
  background: #E17100;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(225, 113, 0, 0.28);
}
.dxhmVfi9UEzWAoz6faHF:hover  { opacity: 0.88; }
.dxhmVfi9UEzWAoz6faHF:active { opacity: 0.78; }

.mcg_PeduXqUjihQi31ck {
  width: 14px;
  height: 14px;
  stroke-width: 3;
  flex-shrink: 0;
}

/* Gap between address cards */
.AqhbPklsg1hNTD4F7foS {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ip8rpoxTDtded4ltiV9j {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-Primary-1, #171717);
  margin: 8px 16px;
}

._2JgYWyuKKexNp9_VNzN_ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.LXMriiHsL7jP6qFdh5vX {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

._byOtPVEh8C26hJl8n1C {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600, #535861);
  margin: 0;
  padding-left: 4px;
}

.oDVlL17ZNDULvf1Kj1Ld {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600, #535861);
  margin-left: -4px;
  padding-left: 0;
}

/* Container holding the actual input field (for border and background) */
.Z_s2sIw2I3sjHTGrNYc3 {
  position: relative;
  display: flex;
  /* align-items: center; */
  border: 1px solid var(--grey-n-6, #e5e5e5);
  border-radius: 12px;
  background-color: var(--Surface-White, #ffffff);
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}

/* Change border color on focus */
.Z_s2sIw2I3sjHTGrNYc3:focus-within {
  border-color: #a0aab4;
}

/* The actual input element */
.MQ3fuj69iUkv47qOFq6Z {
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text-Primary-1, #171717);
  background-color: transparent;
  width: 100%;
  padding: 0;
}

/* Placeholder styling matching the image */
.MQ3fuj69iUkv47qOFq6Z::placeholder {
  color: #8c949d;
  font-weight: 400;
}

/* Disabled Input Styling */
.ZXjrdc2rMc1cUa1BVG93 {
  color: #8c949d;
  cursor: not-allowed;
}

/* Icon positioning */
._CxXs6mjwo4ACVy8xpwt {
  display: flex;
  justify-content: center;
  margin-right: 8px;
  pointer-events: none;
}

.RKc5b5mGQQFQ9PXTfoY4 {
  width: 20px;
  height: 20px;
  color: #8c949d;
}

.pI4vLGQRxNBbKbpyLb2Q {
  padding: 8px 0;
}

.DKYfkX8zWeql06FN3yyL svg {
  width: auto;
  height: 18px;
  color: var(--Surface-White, #ffffff);
  stroke-width: 2.5;
}

.cfEZggV4o8DcB1sLMmUM {
  color: var(--red-200, #e90000);
}

.DKYfkX8zWeql06FN3yyL .s2t2GXUWgrIZThLw1ct2.aeAIiNNJj3a64m3sgdji {
  box-shadow: none !important;
}

/* Textarea specific styling */
.lMoznj2_6_DzMjl1Zeka {
  resize: none;
  line-height: 1.4;
  padding-top: 2px;
}

/* Adjust icon to sit near the top for multiline textareas instead of the middle */
.GUxeapvxAEA6sT19VVcp {
  top: 14px !important;
  transform: none !important;
}

/* ── Hide Google branding UI ──────────────────────────────────── */
.gm-svpc,
.gmnoprint,
.gm-style-mtc-bbw,
.gm-control-active,
.gm-fullscreen-control {
  display: none !important;
}

#map {
  width: 100%;
  height: 100%;
}

/* ════════════════════════════════════════════════════════════════
   PAGE LAYOUTS
   ════════════════════════════════════════════════════════════════ */

/* Mobile: fills remaining flex space inside the 100dvh parent column set by MapView */
.map-page-mobile {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Desktop: horizontal split — left info pane + right map
   Header is outside the scroll container (fixed/sticky at ~76px).
   We subtract that so the panes don't overflow. */
.map-page-desktop {
  display: flex;
  flex-direction: row;
  height: calc(100dvh - 76px);
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   LEFT PANE (desktop only)
   ════════════════════════════════════════════════════════════════ */
.map-left-pane {
  width: 380px;
  min-width: 340px;
  max-width: 420px;
  flex-shrink: 0;
  background: var(--wb-card-bg-color, #ffffff);
  border-right: 1px solid var(--wb-border-subtle-color, #F0EDE8);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow-y: auto;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.06);
  z-index: 2;
}

.map-left-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--wb-page-body-bg-color, #F5F3F0);
  flex-shrink: 0;
}

.map-left-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--wb-border-subtle-color, #EBEBEB);
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--wb-text-primary-color, #1C1C1C);
  transition: background 0.15s ease;
}

.map-left-back-btn:hover {
  background: #F0EDE8;
}

.map-left-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--wb-text-primary-color, #1C1C1C);
  letter-spacing: -0.02em;
}

/* Desktop search — sits in the left pane */
.map-search-desktop {
  margin: 16px 20px 0 !important;
  position: relative !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--wb-page-body-bg-color, #F8F6F3) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  border: 1.5px solid var(--wb-border-subtle-color, #EBEBEB) !important;
}

.map-left-address-card {
  margin: 16px 20px 0;
  padding: 16px;
  background: #FFF8F0;
  border: 1.5px solid #F0D8C0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
}

.map-left-locate-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wb-button-button-hover-bg-color, #AF5E00);
  text-decoration: none;
  transition: opacity 0.15s ease;
  margin-top: 4px;
}

.map-left-locate-btn:hover {
  opacity: 0.75;
}

.map-left-pane .map-bottom-btn {
  margin: 16px 20px 0 !important;
  width: calc(100% - 40px) !important;
}

/* ════════════════════════════════════════════════════════════════
   RIGHT PANE / MAP AREA
   ════════════════════════════════════════════════════════════════ */
.map-right-pane {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* mobile: fill remaining height in the flex column */
.map-page-mobile .map-right-pane {
  flex: 1;
  min-height: 0;
}

.map-loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ── Search bar (mobile floating overlay) ─────────────────────── */
.map-search-container {
  position: relative !important;
  margin: 12px 12px 0 12px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--wb-card-bg-color, #ffffff) !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
}

.map-search-icon {
  position: absolute !important;
  left: 14px !important;
  color: var(--wb-button-button-hover-bg-color, #AF5E00) !important;
  font-size: 20px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.map-search-input {
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px 0 46px !important;
  border-radius: 24px !important;
  background: transparent !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--wb-text-primary-color, #1C1C1C) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
}

.map-search-input::placeholder {
  color: var(--wb-text-secondary-color, #B0B0B0) !important;
}

/* ── Center pin ───────────────────────────────────────────────── */
.map-center-pin {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-center-pin-shadow {
  width: 10px;
  height: 5px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 50%;
  margin-top: 1px;
  filter: blur(2px);
}

/* ── Locate me FAB (mobile only) ──────────────────────────────── */
.map-locate-fab {
  position: absolute;
  bottom: 196px;
  right: 16px;
  z-index: 5;
  background: var(--wb-card-bg-color, #ffffff);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.map-locate-fab:hover {
  box-shadow: 0 4px 16px rgba(175, 94, 0, 0.25);
  transform: scale(1.05);
}

.map-locate-fab:active {
  transform: scale(0.96);
}

/* ── Bottom address card (mobile only) ───────────────────────── */
.map-bottom-card {
  position: absolute;
  z-index: 6;
  background: var(--wb-card-bg-color, #ffffff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
  padding: 20px 20px 12px;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.map-bottom-card__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-bottom-resolving {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--wb-text-secondary-color, #8A8A8A);
  font-size: 14px;
}

.map-bottom-maptext {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-button-button-hover-bg-color, #AF5E00);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

.map-bottom-locname {
  font-size: 17px;
  font-weight: 800;
  color: var(--wb-text-primary-color, #1C1C1C);
  letter-spacing: -0.02em;
  margin: 2px 0 0;
  line-height: 1.2;
}

.map-bottom-address {
  font-size: 13px;
  font-weight: 400;
  color: var(--wb-text-secondary-color, #8A8A8A);
  margin: 4px 0 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-bottom-btn {
  margin-top: 0 !important;
  width: 100% !important;
}

/* ── Full-screen loader ────────────────────────────────────────── */
.location-finding-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .map-bottom-card {
    border-radius: 16px 16px 0 0;
    padding: 16px 16px 10px;
  }
}

.powered-by-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  background: #fff;
  text-decoration: none;
  border-top: 1px solid #f0f0f0;
}

.powered-by-label {
  font-size: 9px;
  font-weight: 500;
  color: #aaa;
  letter-spacing: 0.2px;
}

.powered-by-logo {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.powered-by-name {
  font-size: 9px;
  font-weight: 700;
  color: #0066ff;
  letter-spacing: 0.2px;
}

.bottom-navigation {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

/* ── Hide mobile bottom nav on tablet/desktop ── */
@media (min-width: 768px) {
  .footer {
    display: none !important;
  }
}
.animated-placeholder {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 16px;
  pointer-events: none;
  /* font-family: inherit; */
  overflow: hidden;
  height: 24px;
}

.placeholder-animate {
  position: absolute;
  white-space: nowrap;
}

.skeleton-suggestion-item {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-top: 1rem;
  margin-left: 1rem;
}

.skeleton-suggestion-description {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
}

.suggestion-search-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  margin-left: 1rem;
}

.suggestion-item-img {
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggestion-search-item-img {
  height: 100%;
  object-fit: cover;
}

.suggestion-item-description {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.search-item-bottom-text {
  display: flex;
  gap: 0.5rem;
}

.suggestion-text-value {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  /* margin-left: 1rem; */
}

.search-icon {
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-val {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.search-seperator {
  width: 100%;
  height: 0.1rem;
  margin: 0.8rem 0;
  background-color: lightgrey;
}

.no-search-results {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.popular-search {
  margin-top: -16px;
}

/* Handle keyboard opening on mobile devices * */
@media screen and (max-width: 768px) {
  .search-main-container {
    /* Use dynamic viewport height to account for keyboard */

     min-height: 100dvh !important; 

  }
  /* Ensure headers stay visible when keyboard opens */
  .header-top {
    /* position: fixed !important; */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    /* background: linear-gradient(rgb(0, 0, 0) 5%, rgba(217, 217, 217, 1) 146%) !important; */
  }
  .header-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #2b3443;
    display: flex;
    align-items: center;
    padding: 0.5rem;
  }
  /* Fixed bottom search bar that adjusts for keyboard */
  .bottom-search-bar {
    /* Position above keyboard when open, fallback to bottom when closed */
    bottom: max(0px, env(keyboard-inset-height, 0px)) !important;
    transition: bottom 0.3s ease-in-out;
  }

  /* Adjust main content to account for fixed headers and bottom bar */
  .main-content-area {
    /* height: calc(100dvh - 160px - env(keyboard-inset-height, 0px)) !important; */
    /* overflow-y: auto !important; */
    padding-bottom: calc(80px + env(keyboard-inset-height, 0px)) !important;
  }
}

/* Additional iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  .search-main-container {
    min-height: -webkit-fill-available;
  }
}
/* ─── Wrapper ─────────────────────────────────────────────────────────────── */
.ns-wrapper {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Decorative blurred blobs */
.ns-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ns-blob-tr {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -80px;
  background: radial-gradient(circle, var(--wb-button-button-bg-color, #AF5E00) 0%, transparent 70%);
  opacity: 0.08;
  filter: blur(40px);
  animation: blobDrift 8s ease-in-out infinite alternate;
}
.ns-blob-bl {
  width: 240px;
  height: 240px;
  bottom: -80px;
  left: -60px;
  background: radial-gradient(circle, var(--wb-button-button-bg-color, #AF5E00) 0%, transparent 70%);
  opacity: 0.06;
  filter: blur(40px);
  animation: blobDrift 10s ease-in-out infinite alternate-reverse;
}
@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(16px, 12px) scale(1.06); }
}

/* ─── Card ──────────────────────────────────────────────────────────────────── */
.ns-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.055);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 20px rgba(0, 0, 0, 0.06),
    0 24px 56px rgba(175, 94, 0, 0.08);
  width: 100%;
  max-width: 380px;
  padding: 2.5rem 2.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* ─── Illustration ──────────────────────────────────────────────────────────── */
.ns-illus-wrap {
  margin-bottom: 1.5rem;
  line-height: 0;
}
.ns-illustration {
  display: block;
  overflow: visible;
}

/* ── Pin float ────────────────────────────────────────────────────────────── */
.ns-pin-float {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pinFloat 3.2s ease-in-out infinite;
}
.ns-pin-shadow {
  transform-box: fill-box;
  transform-origin: center center;
  animation: shadowPulse 3.2s ease-in-out infinite;
}
@keyframes pinFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}
@keyframes shadowPulse {
  0%, 100% { transform: scaleX(1);    opacity: 1; }
  50%       { transform: scaleX(0.65); opacity: 0.55; }
}

/* ── Pulse rings — not serviceable ───────────────────────────────────────── */
.ns-pulse {
  transform-box: fill-box;
  transform-origin: center center;
  opacity: 0;
  animation: nsPulse 2.6s ease-out infinite;
}
.ns-pulse-1 { animation-delay: 0s; }
.ns-pulse-2 { animation-delay: 0.55s; }
.ns-pulse-3 { animation-delay: 1.1s; }
@keyframes nsPulse {
  0%   { opacity: 0.65; transform: scale(0.88); }
  100% { opacity: 0;    transform: scale(1.18); }
}

/* ── Pulse rings — fetching location ─────────────────────────────────────── */
.fl-pulse {
  transform-box: fill-box;
  transform-origin: center center;
  opacity: 0;
  animation: flPulse 2.2s ease-out infinite;
}
.fl-pulse-1 { animation-delay: 0s; }
.fl-pulse-2 { animation-delay: 0.48s; }
.fl-pulse-3 { animation-delay: 0.96s; }
@keyframes flPulse {
  0%   { opacity: 0.55; transform: scale(0.86); }
  100% { opacity: 0;    transform: scale(1.14); }
}

/* ── Spinning arc — fetching location ────────────────────────────────────── */
.fl-spin {
  transform-box: fill-box;
  transform-origin: center center;
  animation: gpsSpin 1.6s linear infinite;
}
@keyframes gpsSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Typography ────────────────────────────────────────────────────────────── */
.ns-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.6rem 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.ns-subtext {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.65;
  margin: 0 0 1.75rem 0;
  max-width: 30ch;
}

/* ─── CTA Button ────────────────────────────────────────────────────────────── */
.ns-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wb-button-button-bg-color, #AF5E00);
  color: var(--wb-button-button-text-color, #ffffff);
  border: none;
  border-radius: var(--wb-button-button-border-radius, 10px);
  padding: 0.78rem 1.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  letter-spacing: 0.01em;
  width: 100%;
  max-width: 220px;
  box-shadow:
    0 2px 6px rgba(175, 94, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

.ns-cta-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Shine sweep on hover */
.ns-cta-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(255, 255, 255, 0.30) 50%,
    transparent 65%
  );
  background-size: 240% 100%;
  background-position: -100% 0;
  z-index: 0;
  pointer-events: none;
}
.ns-cta:hover .ns-cta-shine {
  animation: shineSweep 0.52s ease forwards;
}
@keyframes shineSweep {
  from { background-position: -100% 0; }
  to   { background-position: 200% 0; }
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ns-wrapper {
    min-height: 50vh;
    padding: 1.5rem 0.75rem;
  }
  .ns-card {
    padding: 2rem 1.5rem 1.75rem;
    border-radius: 20px;
    max-width: 340px;
  }
  .ns-heading {
    font-size: 1.125rem;
  }
  .ns-subtext {
    font-size: 0.84rem;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .ns-card {
    max-width: 400px;
    padding: 3rem 2.5rem 2.75rem;
  }
  .ns-heading {
    font-size: 1.375rem;
  }
}

.cart {
  padding: 1rem;
  padding-top: 4.5rem;
  margin-bottom: 4rem;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.cart-nonLoggedIn {
  padding: 0.5rem;
  padding-top: 4.5rem;
  margin-bottom: 7rem;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.empty-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  gap: 1rem;
  background: white;
}

.empty-cart-img {
  height: 14rem;
  width: 14rem;
}

.cart-img {
  height: 100%;
}

.end-footer-cart {
  margin-top: 2rem;
}

.review-cart-heading-par div {
  font-size: 1rem !important;
}

.cart-slots-items-section-1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.25rem;
}

.cart-slots-items-section-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: 5px;
}

.cart-slots-selected-text {
  color: #b96b42;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

.cart-slots-button-new {
  color: #555;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2rem;
}

.cart-slots-button-new svg {
  width: 18px;
  height: 14px;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 0px rgba(255, 87, 34, 0);
  }
  50% {
    box-shadow: 0 0 8px rgba(255, 87, 34, 0.6);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 87, 34, 0);
  }
}

.cart-slots-button-new.highlight {
  animation: glowPulse 2s ease-in-out infinite;
  border-radius: 6px;
  padding: 2px 0px 2px 6px;
  color: #ff5722;
  font-weight: 600;
}

/* ── Desktop 2-column cart layout ──────────────────────────────── */
.cart-desktop-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cart-desktop-left,
.cart-desktop-right {
  width: 100%;
}

@media (min-width: 768px) {
  .cart {
    max-width: 1160px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    margin-bottom: 0;
  }

  .cart-nonLoggedIn {
    max-width: 1160px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    margin-bottom: 0;
  }

  .cart-desktop-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
  }

  .cart-desktop-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .cart-desktop-right {
    width: 100%;
    position: sticky;
    top: 64px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

.cart-amount-saved {
  /* box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; */
  height: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3.5rem;
  /* position: fixed; */
  /* z-index: 99999; */
  /* border-radius: 1rem; */
  border-radius: 8px;
  background-color: #ffffff;
  margin-bottom: 1rem;
}

.amount-saving {
  margin-left: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}



.amount-saved-img {
  height: 100%;
}

.cart-coupons {
  position: relative;
  margin-top: 5px;
  /* box-shadow: rgba(0, 0, 0, 0.15) 1px 1.95px 1.95px 1.95px; */
  height: 3rem;
  width: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 2rem;
  background-color: white;
 
}

.cart-coupons-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cart-coupons-icon {
  height: 1.5rem;
  width: 1.5rem;
}

.coupon-icon {
  height: 100%;
}

.cart-coupon-description {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  margin: 15px 0px 5px 4px;
}

.cart-coupons-details {
  display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
}

.cart-item-card {
  display: flex;
  gap: 1rem;
  /* box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; */
  /* height: 5rem; */
  height: auto;
  border-radius: 1rem;
  padding: 0.6rem;
  position: relative;
  background-color: white;
  
  /* background-color: #fff; */
}

.cart-item-image {
  height: 3rem;
  width: 3rem;

  overflow: hidden;
  border-radius: 6px;
}

.cart-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #e1e1e1;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
}

.cart-item-qty-counter {
  position: absolute;
  right: 0;
  bottom: 10px;
}

.remove-product {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  cursor: pointer;
  border-radius: 30%;
}

.cart-items {
  /* margin-top: 2rem; */
  background-color: #ffffff;
  border-radius: 0.5rem;
}

.cart-items-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #c8bcbc33;
  padding: 6px;
  /* position: absolute;
  width: 100%;
  top: 3.5rem; */
}

.cart-items-list {
  /* margin-top: 1rem; */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 8px;
  max-height: 282px;
  overflow-y: scroll;
}

.cart-delete-icon {
  color: #b96b42 !important;
  font-size: 1rem !important;
}

.cart-items-not-available-parent {
  display: flex;
  flex-direction: column;
  border: 1px solid lightgray;
  border-radius: 0.5rem;
}

.cart-not-available-p {
  font-size: 0.75rem;
  margin: 0;
  color: rgb(173, 26, 25);
}

.not-available-btn-text-parent {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem;
}
.cart-loyalty {
  position: relative;
  margin-top: 7px;
  /* box-shadow: rgba(0, 0, 0, 0.15) 1px 1.95px 1.95px 2.6px; */
  height: 3rem;
  width: 100%;
  border-radius: 8px;
  display: flex;
  margin-bottom: 4px;
  align-items: center;
  gap: 2rem;
  background-color: white;
}

.cart-loyalty-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.redeem-icon {
  color: #596fb7 !important;
}

.cart-loyalty-description {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  margin: 15px 0px 5px 4px;
}

.cart-loyalty-details {
  display: flex;

  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0rem 1rem;
}

.loyalty-applied {
  display: flex;
  gap: 0.2rem;
}

.delivery-slot-root-div {
  padding: 10px;
  /* background-color: #ffffff; */
  margin: -7px 0px;
  /* border-radius: 1rem; */
}
.select-time-slot-div {
  border: 1px solid gainsboro;
  border-radius: 10px;
  padding: 5px;
  margin-top: 5px;
}
.dropdown-icon {
  width: auto !important;
  height: 16px !important;
  color: grey !important;
  transform: rotate(90deg) !important;
  margin-top: 3px !important;
}

.review-order {
  margin-top: 12px;
  background-color: #ffffff;
  padding: 14px;
  border-radius: 8px;
}

.review-order-details {
  margin-top: 1rem;
  /* box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; */
  /* height: 9rem; */
  width: 94%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 12px;
  /* margin: 10px; */
  /* margin-bottom: 12px; */
}

.order-details-top,
.order-details-bottom {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
}

.review-order-clock-icon {
  color: #0b0b0b !important;
  font-size: 12px;
}

.review-order-rupee-icon {
  height: 1.4rem;
  width: 1.6rem;
  border-radius: 50%;
  background: #0b0b0b !important;
  color: white !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rupee-icon {
  color: #ffff !important;
  font-size: 12px !important;
}

.review-horizontal-line {
  width: 95%;
  margin-top: 0.5rem;
}

.select-address-div {
  padding: 10px;
  background-color: #ffffff;
  margin: 16px 0px;
  border-radius: 8px;
}
.select-address-div-alt {
  padding: 10px;
  background-color: #ffffff;
  margin: 16px 0px;
  border-radius: 8px;
  margin-top: 3rem;
}
.cart-delivery-address-wrapper {
  background-color: #ffffff;
  padding: 6px;
  border-radius: 4px;
}

/* ─── Bottom Navigation ─── */
.qr-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 64px;
  border-top: 1px solid #e5e7eb;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.qr-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  width: 100%;
  height: 100%;
  gap: 4px;
  transition: transform 0.15s ease;
}

.qr-bottom-nav-item:active {
  transform: scale(0.9);
}

.qr-bottom-nav-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: #2e7d32;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ═══════════════════════════════════════
   QR Cart
═══════════════════════════════════════ */

.qr-cart-container {
  height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 0;
  overflow-y: auto;
}

/* Header */
.qr-cart-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.qr-cart-header-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

/* User info card */
.qr-cart-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  margin: 10px 12px 0;
  padding: 14px 14px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.qr-cart-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-cart-user-phone {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

.qr-cart-user-verified {
  font-size: 11px;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cart items wrapper — wraps the reused B2C CartItems */
.qr-cart-items-wrapper {
  background: #ffffff;
  margin: 10px 12px 0;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Remove inner scroll on items list — let the page scroll instead */
.qr-cart-items-wrapper .cart-items-list {
  max-height: none !important;
  overflow-y: visible !important;
}

/* Override brownish (#b96b42) colors within QR cart — B2C untouched */

/* Delete icons → green */
.qr-cart-items-wrapper .cart-delete-icon {
  color: #2e7d32 !important;
}
.qr-cart-items-wrapper .remove-product .MuiSvgIcon-root {
  color: #2e7d32 !important;
}

/* +/- qty buttons → green */
.qr-cart-items-wrapper .decrement-qty,
.qr-cart-items-wrapper .increment-qty {
  color: #2e7d32 !important;
}

/* Product names & labels — Heading component uses sakuraRestroColor (#b96b42)
   when retailType=RESTAURANT. Override to black within QR cart. */
.qr-cart-items-wrapper .MuiTypography-root {
  color: #1a1a1a !important;
}

/* Shared section card */
.qr-cart-section {
  background: #ffffff;
  margin: 10px 12px 0;
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.qr-cart-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.6px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* Cooking requests textarea */
.qr-cart-cooking-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #374151;
  resize: none;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.qr-cart-cooking-textarea:focus {
  border-color: #2e7d32;
}

.qr-cart-cooking-textarea::placeholder {
  color: #9ca3af;
}

/* Bill rows */
.qr-cart-bill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #374151;
  margin-bottom: 8px;
}

.qr-cart-bill-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 10px 0;
}

.qr-cart-bill-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Payment section — fixed at bottom above the nav */
.qr-cart-payment-section {
  position: fixed;
  bottom: 64px;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 12px 16px 12px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9;
}

.qr-cart-payment-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.6px;
  margin: 0 0 10px;
  text-transform: uppercase;
  text-align: center;
}

.qr-cart-pay-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Shared base for both payment buttons */
.qr-cart-pay-counter-btn,
.qr-cart-pay-online-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, background 0.15s;
}

.qr-pay-btn-icon {
  margin-bottom: 2px;
}

/* Pay at Counter — outlined */
.qr-cart-pay-counter-btn {
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
}

.qr-cart-pay-counter-btn .qr-pay-btn-icon {
  color: #2e7d32;
}

.qr-cart-pay-counter-btn:active:not(:disabled) {
  background: #f9fafb;
}

.qr-cart-pay-counter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pay Online — filled green with shadow */
.qr-cart-pay-online-btn {
  border: none;
  background: #2e7d32;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
}

.qr-cart-pay-online-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.qr-cart-pay-online-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty state */
.qr-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.qr-cart-empty-text {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 6px;
}

.qr-cart-empty-sub {
  font-size: 13px;
  color: #9ca3af;
  margin: 0 0 24px;
}

.qr-cart-browse-btn {
  background: #2e7d32;
  color: #ffffff;
  border: none;
  border-radius: 24px;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ═══════════════════════════════════════
   QR Login Modal (bottom sheet)
   — shared by QRCart, QROrders, QRProfile
═══════════════════════════════════════ */

.qr-login-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
}

.qr-login-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 36px;
  z-index: 101;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  animation: qr-slide-up 0.25s ease-out;
}

@keyframes qr-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.qr-login-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-login-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}

.qr-login-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 24px;
}

.qr-login-field-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.qr-login-phone-row {
  display: flex;
  align-items: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #f9fafb;
  transition: border-color 0.2s;
}

.qr-login-phone-row:focus-within {
  border-color: #2e7d32;
  background: #fff;
}

.qr-login-prefix {
  display: flex;
  align-items: center;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  border-right: 1.5px solid #e5e7eb;
  white-space: nowrap;
  background: #f3f4f6;
}

.qr-login-phone-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #1a1a1a;
  padding: 12px 14px;
  font-family: inherit;
}

.qr-login-phone-input::placeholder {
  color: #9ca3af;
  font-size: 13px;
}

.qr-login-error {
  font-size: 12px;
  color: #e53935;
  margin: 6px 0 0;
}

.qr-login-cta {
  display: block;
  width: 100%;
  margin-top: 24px;
  margin-bottom: 16px;
  height: 50px;
  background: #2e7d32;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.qr-login-cta:hover:not(:disabled) {
  background: #256427;
}

.qr-login-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qr-login-terms {
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  margin: 12px 0 0;
}

/* ═══════════════════════════════════════
   QR View Cart Floating Bar
   — shared by QRHome and QRSearch
═══════════════════════════════════════ */

/* Outer wrapper — positions the card above bottom nav with side padding */
.qr-view-cart-outer {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0 16px 8px;
  max-width: 430px;
  margin: 0 auto;
  pointer-events: none;
  animation: qr-slide-up 0.22s ease-out;
}

/* The visible rounded green card */
.qr-view-cart-card {
  background: #2e7d32;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.qr-view-cart-card:active {
  transform: scale(0.97);
}

.qr-view-cart-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qr-view-cart-count {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.qr-view-cart-price {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.qr-view-cart-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.footer-container {
  /* padding: 12px; */
  /* background-color: #f5f5f5; */
  min-height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* padding: 16px; */
  /* padding-bottom: 52px; */
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  /* width: 100vw; */
  width: 100%;
  box-sizing: border-box;
}

.footer-text {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: 600;
  /* font-family: "Nunito Sans", sans-serif; */
  color: #b9b9b9;
  /* max-width: 60%; */
  padding-bottom: 30px;
  padding-left: 93px;
  flex: 1;
}
.quotes {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: xxx-large;
}
.footer-text-row {
  align-items: center;
  justify-content: flex-start;
}

.footer-word.highlight {
  color: #28a745; /* green highlight */
}

.footer-image {
  width: 80px;
  height: 65px;
  object-fit: cover;
}

.footer-heart-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 25px;
  font-weight: 700;
  color: white;
  /* font-family: "Nunito Sans", sans-serif; */
}

.footer-heart {
  color: red;
}
.footer-fssai {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.footer-img-wrapper {
  width: 20%;
}

@media (min-width: 897px) and (min-width: 900px) {
  .footer-text {
    padding-left: 20px !important;
  }
}

@media (max-width: 852px) and (min-width: 1280px) {
  .footer-image {
    width: 90px;
    height: 70px;
    object-fit: cover;
  }
}
@media (min-width: 540px) and (max-width: 600px) {
  .footer-text {
    padding-left: 12px;
  }
  .quotes {
    font-size: xx-large;
  }
}
@media (min-width: 601px) and (max-width: 630px) {
  .footer-text {
    padding-left: 36px !important;
  }
}
@media (max-width: 568px) and (min-width: 850px) {
  .quotes {
    gap: 5px;
    font-size: xx-large;
  }
}
@media (max-width: 811px) and (min-width: 631px) {
  .footer-text {
    padding-left: 36px !important;
  }
}
@media (max-width: 540px) and (min-width: 720px) {
  .footer-image {
    width: 75px;
    height: 55px;
    object-fit: cover;
  }
}

@media (max-width: 538px) and (min-width: 393px) {
  .quotes {
    gap: 5px;
    font-size: large;
  }
  .footer-text {
    padding-top: 38px;
    padding: 20px;
  }
  .footer-image {
    width: 55px !important;
    height: 35px !important;
    object-fit: cover;
  }
}
@media (min-width: 360px) and (max-width: 400px) {
  .footer-text {
    padding-left: 13px;
    /* padding-top: 30px; */
  }
  .quotes {
    font-size: x-large;
  }
}
@media (min-width: 375px) and (max-width: 392px) {
  .quotes {
    gap: 5px;
    font-size: large !important;
  }
  .quotes {
    gap: 5px;
    font-size: medium;
  }
  .footer-text {
    padding-left: 27px !important;
    /* padding-top: 42px !important; */
  }
  .footer-heart-row {
    font-size: 16px;
  }
}
@media (max-width: 375px) and (min-width: 539px) {
  .quotes {
    gap: 5px;
    font-size: medium;
  }
  .footer-image {
    width: 75px;
    height: 55px;
    object-fit: cover;
  }
  .footer-heart-row {
    font-size: 15px;
  }
  .footer-text {
    padding-left: 23px;
  }
}
@media (min-width: 414px) and (max-width: 420px) {
  .footer-text {
    padding-left: 16px;
  }
}

@media (max-width: 344px) and (min-width: 374px) {
  .quotes {
    gap: 5px;
    font-size: medium;
  }
  .footer-image {
    width: 75px;
    height: 55px;
    object-fit: cover;
  }
  .footer-text {
    padding-left: 23px !important;
  }
}


.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 2px;
  padding: 12px 16px 6px;
}

.footer-legal-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #6B6560;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 1.4;
}

.footer-legal-link:hover {
  color: #E17100;
  background: rgba(225, 113, 0, 0.06);
}

.footer-legal-sep {
  font-size: 11px;
  color: #C0B8B0;
  pointer-events: none;
  user-select: none;
}

.powered-by-pallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 6px;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

.powered-by-pallet:hover {
  opacity: 1;
}

.powered-by-text {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  letter-spacing: 0.3px;
}

.pallet-logo {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.pallet-name {
  font-size: 12px;
  font-weight: 700;
  color: #0066ff;
  letter-spacing: 0.2px;
}

/* for responsiveness */
@media (max-width: 1024px) {
  .footer-container {
    padding-bottom: calc(max(1rem, env(safe-area-inset-bottom))*3.5);
  }
}

@media (max-width: 600px) {
  .footer-container {
    padding-bottom: calc(max(1rem, env(safe-area-inset-bottom))*1.75);
  }
}
.floating-wrapper {
  display: inline-block;
}

.floating-border {
  /* border: 2px solid #ccc; */
  border-radius: 8px;
  /* overflow: hidden; */
  width: fit-content;
}

.cart-wallet {
  margin-top: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  height: 3rem;
  width: 100%;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  background-color: #fff;
}

.cart-wallet-checked {
  margin-top: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  height: 6rem;
  width: 100%;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  background-color: #fff;
}

.cart-wallet-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
}

.cart-wallet-checked-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem;
}

.cart-wallet-left {
  display: flex;
  align-items: center;
}

.cart-wallet-left-loading {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.cart-wallet-breakup {
  display: flex;
  flex-direction: column;
}

.wallet-amount-applicable,
.wallet-amount-remaining {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-no-delivery-address {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 1.95px 2.6px;
  height: 4rem;
  width: 91%;
  position: fixed;
  bottom: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 999;
}

.cart-checkout-order {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  height: 4rem;
  width: 92%;
  position: fixed;
  bottom: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}

@media (min-width: 768px) {
  .cart-no-delivery-address {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    margin-bottom: 0;
    z-index: auto !important;
  }

  .cart-checkout-order {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0;
    padding: 0;
    z-index: auto !important;
    bottom: auto !important;
  }

  .cart-place-order {
    background-color: #E17100 !important;
    border-radius: 12px;
    height: 52px;
    width: 100%;
    margin: 0;
    gap: 0.75rem;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(225,113,0,0.30);
    transition: opacity 0.18s, box-shadow 0.18s;
  }

  .cart-place-order:hover {
    box-shadow: 0 5px 16px rgba(225,113,0,0.40);
    opacity: 0.94;
  }
}

/* Extra safety: when inside the desktop right column, never float over the page */
.cart-desktop-right .cart-checkout-order,
.cart-desktop-right .cart-no-delivery-address {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  box-shadow: none !important;
}

.cart-payment-method {
  margin: 1rem;
  display: flex;
  flex-direction: column;
}

.payment-method-type {
  display: flex;
}

.payment-dropdown-icon,
.payments-icon {
  color: rgb(12, 121, 36) !important;
}

.payments-icon {
  margin-right: 0.3rem !important;
}

.cart-place-order {
  /* background-color: rgb(12, 121, 36); */
  height: 2.5rem;
  width: 100%;
  border-radius: 1rem;
  margin: 0.7rem;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  padding: 0.2rem;
}

.checkout-cart-line {
  height: 1rem;
  width: 0.1rem;
  background: white;
}

.cash-on-delivery {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: white;
  height: 2rem;
  width: 100%;
  border-radius: 2rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
}

.cart-online-payment {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: white;
  height: 10rem;
  width: 100%;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}

.online-payment-details {
  padding: 0.5rem;
  display: flex;
  align-items: center;
}

.online-payment-img {
  height: 4rem;
  width: 100%;
}

.payment-img {
  height: 100%;
  width: 96%;
  object-fit: cover;
}

.non-logged-in {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  height: 7rem;
  width: 96%;
  position: fixed;
  bottom: 0;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 0;
  z-index: 999;
}

.non-logged-in-details {
  margin-left: 1rem !important;
}

.parent-container-cart {
  background-color: #ffffff;
  padding: 6px;
  border-radius: 8px;
  margin-top: -5px;
}

.deliverySlotNewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

.deliverySlotNewTitle {
  font-size: 16px;
  font-weight: 600;
}

.deliverySlotNewContent {
  padding: 12px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.deliverySlotNewSection {
  margin-bottom: 20px;
}

.deliverySlotNewSectionTitle {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.deliverySlotNewTime {
  font-size: 14px;
  color: #222;
}

.deliverySlotNewSlot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
}

.deliverySlotNewDisabled {
  opacity: 0.8;
  cursor: not-allowed;
}

.deliverySlotNewSelected {
  border-color: #b96b42;
  background: #fff7f2;
}

.deliverySlotNewBookBtn {
  background: #b96b42;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.deliverySlotNewFull {
  color: #d32f2f;
  font-size: 12px;
  font-weight: 600;
}

.deliverySlotNewSelectedText {
  color: #2e7d32;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
}

/* Hide scrollbar but keep scroll working */
.deliverySlotNewDrawerContent {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  scrollbar-width: none; /* Firefox */
}

/* Chrome, Safari, Edge */
.deliverySlotNewDrawerContent::-webkit-scrollbar {
  display: none;
}

.deliverySlotNewLoader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 50vh;
}

.deliverySlotNewError {
  color: #d32f2f;
  text-align: center;
  padding: 20px;
}

.deliverySlotNewAction {
  min-width: 72px;       
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.deliverySlotNewBookBtn,
.deliverySlotNewSelectedText,
.deliverySlotNewFull {
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
}
.order-processing {
  padding: 0.5rem;
  background-color: #f4f7fc;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.order-processing-loader {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.processing-loader {
  height: 100%;
}

.order-success {
  padding: 0.5rem;
  background-color: var(--Surface-White, #ffffff);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* gap: 1rem; */
}

.order-success-btn-par {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.order-success-btn {
  width: 120px;
  border-radius: var(--wb-button-button-border-radius, 16px);
  border: 1px solid
    var(--wb-button-button-border-color, #050505);
  background-color: var(--wb-button-button-bg-color, #af5e00);
  color: var(--wb-button-button-text-color, #ffffff);
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 16px;
}

.category-div {
  border-radius: 1rem;
  /* object-fit: contain; */
  height: 100px;
  width: 170px;
  height: 100px;
  background-color: #c6eac6;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.category-text-image-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.brand-div {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  /* background-color: #ffffff; */
}

.category-items-root-div {
  /* margin-top: 6rem; */
  /* margin-bottom: 3.5rem; */
  height: 100vh;
  overflow: scroll;
  background-color: #f4f7fc;
  position: relative;
  z-index: 100;
}
.category-items-root-div::-webkit-scrollbar {
  display: none;
}

.category-items-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background-color: #f4f7fc;
  z-index: 1000;
}

.category-items-list {
  padding: 60px 0.5rem 90px;
  position: relative;
}
.category-items-list.with-chips {
  padding-top: 112px;
}

/* L2 filter chip bar — fixed just below the Menuback nav */
.l2-chip-bar {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px 10px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.l2-chip-bar::-webkit-scrollbar {
  display: none;
}

/* .brand-div-image {
  padding: 0.5rem;
} */
@media (max-width: 480px) and (min-width: 320px) {
  .category-div {
    width: 60px;
    height: 100%;
    border-radius: 4px;
  }
}
@media (max-width: 599px) and (min-width: 540px) {
  .category-div {
    width: 60px;
    height: 100%;
    border-radius: 4px;
  }
}

.categories-root-div {
  background-color: #f4f7fc;
}
.categories-root-div::-webkit-scrollbar {
  display: none;
}
.categories-listing {
  padding: 1em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 2.2em;
}

@media (max-width: 1024px) and (min-width: 801px) {
  .categories-listing {
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
  }
}
/* Tablets: 600px to 768px */
@media (max-width: 860px) and (min-width: 800px) {
  .categories-listing {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) and (min-width: 600px) {
  .categories-listing {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 599px) and (min-width: 540px) {
  .categories-listing {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
  }
}
@media (max-width: 360px) and (min-width: 321px) {
  .categories-listing {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
  }
}
@media (max-width: 480px) and (min-width: 320px) {
  .categories-listing {
    grid-template-columns: repeat(2, 1fr);
    padding: 4px;
    gap: 6px;
  }
}
/* Mobile devices: 320px to 480px */
@media (max-width: 480px) and (min-width: 320px) {
  .categories-listing {
    grid-template-columns: repeat(4, 1fr);
    padding: 4px;
    gap: 6px;
  }
}

.QCnvWALKUQ7C4rUidxUI {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #FFFFFF !important;

  display: flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.5rem 1rem calc(16px + env(safe-area-inset-bottom));
  z-index: 1000;
  border-top: 1px solid #EBEBEB;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

/* ── Hide on tablet/desktop — search + nav live in the header ── */
@media (min-width: 768px) {
  .QCnvWALKUQ7C4rUidxUI {
    display: none;
  }
}

.epQKSexiRH9oMBt8bXlX {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;

  border-width: 1px;
  border-style: solid;
  transition: all 0.2s ease-in-out;
  /* Smooth transition for focus effect */
}

.Q9KBLJQKdyh8cSlspjKv {
  margin-right: 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 1.5rem;
  width: 1.5rem;
}

.Q9KBLJQKdyh8cSlspjKv svg {
  height: 100%;
  width: 100%;
}

.saksodBhHq9zUVKXhyd3 {
  flex-grow: 1;
  border: none;
  outline: none;
  /* Color and font-size handled dynamically via props */
  background-color: transparent;
  padding: 0;
  min-width: 0;
  flex: 1;
}

/* Critical CSS to apply dynamic placeholder color using a CSS variable */
.saksodBhHq9zUVKXhyd3::placeholder {
  color: var(--custom-placeholder-color, #8a93a7);
  opacity: 1;
}

/* ── Grocery cart icon ───────────────────────────────────────── */
.nZxSF910cOdj6wXKbBgn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  cursor: pointer;
  gap: 2px;
}

.M8N4yMzktqZ6MlbF9WaA {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background-color: var(--wb-button-button-bg-color, #AF5E00);
}

.GVMSxVA6Th0uMEvKbwGP {
  width: 1.4rem;
  height: 1.4rem;
  color: #ffffff;
  stroke-width: 2;
}

.pQ13vbFRrd8tZFqlrVp_ {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e53935;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  line-height: 1;
}

.smuo8GD5kzsnbtLC9iZE {
  font-size: 11px;
  font-weight: 700;
  color: var(--wb-button-button-bg-color, #AF5E00);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ── Restaurant / default cart icon ─────────────────────────── */
.dF8qNTVt7mITKcqAV9mg {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  cursor: pointer;
}

.MaoEs7Ptu2bWnR6bC18z {
  position: relative;
  display: inline-block;
}

.izQUqiSCaMDhe09Y9mlM {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  object-fit: cover;
}

.LafXwb9rsbSShpDrhw5V {
  position: absolute;
  top: -4px;
  right: -12px;

  background-color: #eee9e9;
  color: var(--wb-search-bar-search-bar-text-color, #1f1c1a);
  width: 30px;
  height: 30px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 10px;
  font-weight: 500;
}

.JQquKCGIOy149qDXg7Kw {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-search-bar-search-bar-text-color, #171717);
}

/* ── Compact vertical product card (2-per-row grid) ── */
.ZM8YmlsLaVXDrsonJQqg {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.13s ease;
  min-width: 0;
}

.ZM8YmlsLaVXDrsonJQqg:active {
  transform: scale(0.97);
}

/* Square product image */
.TDFDcOEcoQqid8hBmWSo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
  overflow: hidden;
  flex-shrink: 0;
}

.N654chaBOPgzlrOPDee_ {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text body */
._3oa6y42p4Snn9Fnvm5Tg {
  padding: 7px 8px 2px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._Lf2ZwXRrk9Tq4_tXy3s {
  font-size: 12px;
  font-weight: 500;
  color: #1c1c1c;
  line-height: 1.3;
  margin: 0;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.HXslHqi9LD4_1pvTQFG5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-button-button-bg-color, #AF5E00);
  margin: 0;
}

.D8TnCOit9TnGFo6DyptB {
  font-size: 9px;
  color: #888;
  margin: 0;
  font-style: italic;
}

/* ADD / +- button row */
.Qwc5CmX623AHuUSVXejP {
  padding: 6px 8px 8px;
  display: flex;
  justify-content: center;
}

/* ── Page shell ── */
.YxMXAnjHljtae4ljDWlT {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  overflow: hidden;
}

/* ── Sticky header ── */
.z3DEb1l6tngRYuVuv5h0 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
  z-index: 100;
}

.MXCsUNR68YivZSZndoQL {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.eBIYj0omS54SrQQNOrQQ {
  width: 22px;
  height: 22px;
  color: #1c1c1c;
  stroke-width: 2.5;
}

.Mv2cvqbI0ss_0rFuF4mt {
  font-size: 17px;
  font-weight: 600;
  color: #1c1c1c;
}

/* ── Split-pane body ── */
.xF47Yb01eP8dThGWLHWu {
  flex: 1;
  display: flex;
  overflow: hidden;
  /* leave room for bottom nav */
  padding-bottom: 70px;
}

/* ── Left sidebar ── */
.SZt3jp2xajWAQNlWqJLw {
  width: 82px;
  flex-shrink: 0;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid #ebebeb;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* hide scrollbar visually */
  scrollbar-width: none;
}
.SZt3jp2xajWAQNlWqJLw::-webkit-scrollbar { display: none; }

.WqQUJjSHs12fUFTjtOOf {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: center;
  transition: background 0.14s, border-color 0.14s;
}

.JWNmby8yqQb0M0zZxTXj {
  background: #fdf4eb;
  border-left-color: var(--wb-button-button-bg-color, #AF5E00);
}

.LjqyVs5Iv5ctG1IhJf52 {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  flex-shrink: 0;
}

.Id3gTTsZSnWw_jrjQZUs {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t2YW0ezr1Mbp1xsbI2zw {
  font-size: 10px;
  font-weight: 500;
  color: #444;
  line-height: 1.25;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.JWNmby8yqQb0M0zZxTXj .t2YW0ezr1Mbp1xsbI2zw {
  color: var(--wb-button-button-bg-color, #AF5E00);
  font-weight: 600;
}

/* Sidebar skeleton */
.AzFXehEaGmYtElF1zGj0 {
  width: 60px;
  height: 70px;
  margin: 8px auto;
  border-radius: 10px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: Re5oFhYcRe4Cm6BJaAI2 1.4s infinite linear;
}

/* ── Right panel ── */
.HM4q1ywA19wdZceTKKmZ {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 16px;
  scrollbar-width: none;
}
.HM4q1ywA19wdZceTKKmZ::-webkit-scrollbar { display: none; }

/* Sub-category heading in right panel */
._s6x85F1vMBunzdK3ogw {
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1c;
  margin: 0 0 10px 2px;
}

/* 2-column product grid */
.y60DpXxxHUjM5aeMryCQ {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Product skeleton */
.ysEQFQD3v9JZJyVO0aLC {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: Re5oFhYcRe4Cm6BJaAI2 1.4s infinite linear;
}

/* ── Empty state ── */
.alsXQIYqaXFIF21Oa0jK {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #aaa;
  font-size: 14px;
  margin: 0;
}

/* ── Shimmer animation ── */
@keyframes Re5oFhYcRe4Cm6BJaAI2 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.I5tDJoeBrT35bcCUvTRc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1.5px solid #EDE9E3;
  border-radius: 14px;
  padding: 14px 16px;
  gap: 12px;
  box-sizing: border-box;
  overflow: visible;
  transition: border-color 0.2s, background 0.2s;
}

.EbzUlxNelWIdQQB_HwkG {
  border-color: #E17100;
  background: #FFFAF5;
}

/* Ticket notches */
.sYQE8teZpKBodPv02TlE,
.tMIlVEecASSp5M7oQ3Gg {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F5F3F0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.sYQE8teZpKBodPv02TlE  { left: -7px;  border: 1.5px solid #EDE9E3; }
.tMIlVEecASSp5M7oQ3Gg { right: -7px; border: 1.5px solid #EDE9E3; }
.EbzUlxNelWIdQQB_HwkG .sYQE8teZpKBodPv02TlE,
.EbzUlxNelWIdQQB_HwkG .tMIlVEecASSp5M7oQ3Gg { border-color: #E17100; }

/* Dashed vertical separator */
.doJWdO2SWvqJqz2u9FwA {
  position: absolute;
  right: 96px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    #E0DAD3 0,
    #E0DAD3 5px,
    transparent 5px,
    transparent 9px
  );
}

/* Left content */
.uOEhnPtNgOZCvzQ4amb8 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.XPPFiv6TI1K7ToFx9aes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.josApaewv1QXbUUv5WYW {
  font-size: 15px;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: 0.06em;
  font-family: 'Courier New', Courier, monospace;
}

.hzLHCZRa6qEVpyrrG4Pa {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #E17100;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.03em;
}
.Je5mbdEguAv2yNQ4eKgU {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}

.HrhXXFpI9_ZCcydA3l6P {
  font-size: 12px;
  color: #6B6560;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m4cGSuFd5Ppd_yE6oVPL {
  font-size: 11px;
  color: #B0AAA3;
  margin: 0;
}

/* Right: apply button */
.S07LoXwGGeqmTBZtxmdR {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keCohuah8z8U47IkCGmg {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1.5px solid #E17100;
  color: #E17100;
  background: transparent;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keCohuah8z8U47IkCGmg:hover:not(:disabled) {
  background: #FFF3E8;
}
.keCohuah8z8U47IkCGmg:disabled {
  opacity: 0.6;
  cursor: default;
}

.X5tX_50Jfgq0ompguNyr {
  background: #E17100;
  color: #fff;
  border-color: #E17100;
}

.gxhzHqbmsToZov_zsiw9 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #F0EDE9;
}

.QhYuCp1y5yd8IesudsUY {
  width: 20px;
  height: 20px;
  color: #E17100;
  flex-shrink: 0;
}

.iXLf8JXvDfv3MPKk891S {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ── Drawer body ── */
.qxb39O8plA1l7zpI0Ezv {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Manual code entry ── */
.nSeqbw07a9Y0rXu4KZBZ {
  display: flex;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #F0EDE9;
  background: #FDFCFB;
  flex-shrink: 0;
}

.mvYKB8IlcmfvobPmANrZ {
  flex: 1;
  height: 42px;
  border: 1.5px solid #E8E4DF;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #1C1C1C;
  background: #fff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.18s;
}
.mvYKB8IlcmfvobPmANrZ:focus {
  border-color: #E17100;
}
.mvYKB8IlcmfvobPmANrZ::placeholder {
  font-weight: 400;
  letter-spacing: 0;
  color: #B0AAA3;
}

.fmEeHXBMjGrkqaHwtY_Y {
  height: 42px;
  padding: 0 18px;
  background: linear-gradient(135deg, #E17100 0%, #AF5E00 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
}
.fmEeHXBMjGrkqaHwtY_Y:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Loader ── */
.xAzTyunvfXIKRIXDldEE {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

/* ── Empty state ── */
.rW_scHMUDgPZmL4fCBTc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  padding: 40px 24px;
}
.Bra71MBTlRQg9nV7dcyQ {
  width: 48px;
  height: 48px;
  color: #D4C9BC;
}
.iJjEKvH7RXDVVm7mDp9z {
  font-size: 14px;
  color: #9E978F;
  margin: 0;
}

/* ── List wrapper ── */
.NEaMM1cCYel4YW4G86xD {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 12px 16px 0;
  gap: 10px;
}

/* ── Search bar ── */
.nx9OWpjIEkoz1Ah9PHzI {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F5F3F0;
  border-radius: 10px;
  padding: 0 12px;
  height: 40px;
  flex-shrink: 0;
}
.SpXYsPuJFfMB6n4fHXpV {
  width: 16px;
  height: 16px;
  color: #9E978F;
  flex-shrink: 0;
}
.KQNyx9T0aLqvTxy3224j {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: #1C1C1C;
  font-family: inherit;
}
.KQNyx9T0aLqvTxy3224j::placeholder { color: #B0AAA3; }

.vm5FOTruHDfnUyRbOTF9 {
  font-size: 12px;
  font-weight: 500;
  color: #9E978F;
  margin: 0;
  flex-shrink: 0;
}

.KO5A0twULWtxrQUOSNgD {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-bottom: 2rem;
  scrollbar-width: none;
}
.KO5A0twULWtxrQUOSNgD::-webkit-scrollbar { display: none; }

.tbFHrr8BpoM3G9e0WE7q {
  font-size: 13px;
  color: #9E978F;
  text-align: center;
  padding: 24px 0;
  margin: 0;
}

.guestLogin {
  display: flex;
  flex-direction: column;
  /* gap:1rem; */
  height: 90vh;
  padding: 0.5rem;
  background-color: #f4f7fc;
  margin-top: 3rem;
}

.wrapper-input-box {
  padding: 6px;
  border-radius: 0.5rem !important;
  display: flex;
  align-items: center;
  color: lightgray;
  background: #fff;
  transition: all 0.3s ease;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important;
  margin-top: 0px !important;
  position: relative;
  border: none !important;
}
.wrapper-input-box input {
  border: none;
  outline: none;
  flex: 1;
}
.wrapper-input-box:hover {
  border: none !important;
}

.search-icon {
  /* color: lightgray; */
  color: rgb(173, 26, 25);
  font-size: 1.2rem;
  margin: 0 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.search-wrapper {
  position: relative;
  width: 300px;
}

.search-input {
  border: none;
  background-color: transparent;
  width: 100%;
  font-size: 0.9rem;
}

.search-input::placeholder {
  color: #999;
}

.search-input:focus {
  outline: none;
}

.order-item-img-box {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  /* margin-right: 20px; */
}

.order-item-img-box2 {
  width: 30%;
  /* height: 60px; */
  height: 5rem;
  /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important; */
}

.order-item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-balance-count {
  /* width: 70px; */
  /* padding: 14px 0; */
  width: 30%;
  /* padding: 14px 3px; */
  border: 2px solid rgb(12, 121, 36);
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #faf9fe !important;
  border-radius: 0.5rem;
}

.order-card-total {
  display: flex;
  /* justify-content: space-between; */
}

.order-card-stat {
  display: flex;
  justify-content: space-between;
}

.order-card-button {
  color: white;
  background-color: rgb(12, 121, 36) !important;
  font-size: 8px !important;
  width: 120px !important;
}

.order-sub-card {
  /* background-color: whitesmoke; */
  background-color: white;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-cub-card-box {
  padding: 15px 10px;
  background-color: white;
}

.order-card-main {
  /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important; */
  border-radius: 1rem !important;
  margin-bottom: 1rem;
}

/* .order-list-count{
    margin-top: 5px !important;
} */

.order-status-badge {
  padding: 3px 5px !important;
  font-size: 10px !important;
  color: white !important;
  border-radius: 0.25rem !important;
}

.defaultOrderColor {
  background-color: #607d8b;
}
.deliveredOrder {
  background-color: #4caf50;
}
.cancelledOrder {
  background-color: #f44336;
}

/* ── Page shell ─────────────────────────────────────────────────── */
.veD696h34LadCJSNie5g {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #F5F3F0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile sticky back bar ── */
.Jq4u8XlNlm6cVEA7mf1m {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #EBEBEB;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.eQVfnXsOdEqihw1NqEcI {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #1C1C1C; border-radius: 50%; width: 36px; height: 36px;
  margin-left: -6px; transition: background 0.15s; flex-shrink: 0;
}
.eQVfnXsOdEqihw1NqEcI:hover { background: #F0F0F0; }
.L4YWju_4NFQSa2lAxQDT { width: 22px; height: 22px; stroke-width: 2.5; color: #1C1C1C; }
._pjW2TdJ6i0QEpHzIXHN { font-size: 17px; font-weight: 800; color: #1C1C1C; letter-spacing: -0.02em; }

/* ── Mobile amber hero ── */
.JTb6t3OopfMk2q2ilvNt {
  position: relative;
  background: linear-gradient(155deg, #E17100 0%, #9A4100 100%);
  padding: 28px 24px 52px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.JTb6t3OopfMk2q2ilvNt::before {
  content: ""; position: absolute;
  top: -60px; right: -60px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.JTb6t3OopfMk2q2ilvNt::after {
  content: ""; position: absolute;
  bottom: -1px; left: 0; right: 0; height: 32px;
  background: #F5F3F0; border-radius: 32px 32px 0 0;
}
.D6zXZkhojB2iJqcMSuo6 { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; width: 100%; }
.cvmvJQXEbrs54HUDJnwk { width: 36px; height: 36px; color: #FFFFFF; }
.m9Aot51Hd_wLb7Rzklbk { display: flex; flex-direction: column; gap: 5px; }
.S7ZrF2ag1Ub2tB1F5c0J { font-size: 22px; font-weight: 900; color: #FFFFFF; letter-spacing: -0.03em; line-height: 1.15; }
.oSZRA6sUq6k8zWaS7iVP { display: flex; align-items: center; gap: 6px; }
.TAKwDyxpXLNLwUhw8D4I { width: 13px; height: 13px; color: rgba(255,255,255,0.72); stroke-width: 2; flex-shrink: 0; }
.VodKJeTUkjtyk5INTSAP { font-size: 13px; color: rgba(255,255,255,0.82); }

/* ── Page body wrapper ── */
.ZimPZYhKZQbK9h3OrpC6 { flex: 1; display: flex; flex-direction: column; }

/* ── Sidebar — hidden on mobile ── */
.Ayhc8Cbp5CxdXPrHgB8Q { display: none; }

/* ── Content area ── */
.r5XUg_MkFN5FQ8o2Oi0T { flex: 1; display: flex; flex-direction: column; }

/* ── Mobile horizontal tab bar ── */
.SDWAAtlZoSSPlQE41pps {
  display: flex; gap: 6px; padding: 14px 14px 10px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex-shrink: 0;
  background: #F5F3F0;
}
.SDWAAtlZoSSPlQE41pps::-webkit-scrollbar { display: none; }
.R3wfvLvmUAbnJsxeep86 {
  flex-shrink: 0; padding: 8px 16px;
  background: #FFFFFF; border: 1.5px solid #E8E8E8; border-radius: 100px;
  font-size: 13px; font-weight: 600; color: #7A7A7A; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.R3wfvLvmUAbnJsxeep86:hover { border-color: #AF5E00; color: #AF5E00; }
.lL6mPkkAEcjnlS5fYTbw { background: #1C1C1C; border-color: #1C1C1C; color: #FFFFFF; }

/* ── Tab content ── */
.IioNG7EAQ9zJP4wmNECW { flex: 1; padding: 4px 14px 80px; display: flex; flex-direction: column; gap: 10px; }

/* ── Padded body inside outer tab card (Orders & Addresses) ── */
.q0jWYOczYEMLhD2toF58 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Logout mobile: visible in overview tab on mobile, hidden on desktop */
.KLqWlZp90NUcnQ_nioKk { display: flex; }

/* ══════════════════════════════════════════════════════════════════
   DESKTOP  ≥ 769px
══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .veD696h34LadCJSNie5g { background: #F2F0ED; }

  /* Hide mobile-only elements */
  .Jq4u8XlNlm6cVEA7mf1m { display: none; }
  .JTb6t3OopfMk2q2ilvNt { display: none; }
  .SDWAAtlZoSSPlQE41pps { display: none; }
  .KLqWlZp90NUcnQ_nioKk { display: none !important; }

  /* Full-width page with max-width container */
  .ZimPZYhKZQbK9h3OrpC6 {
    flex-direction: row;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 24px 80px;
    gap: 28px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── SIDEBAR ── */
  .Ayhc8Cbp5CxdXPrHgB8Q {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
  }

  .PnnY6F4iW7LluhKRmHq6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 28px 20px 24px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  }

  .VTwhBe8IThxrtcO9qCFI { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; }
  .I6Ktd8UkeA5WitWmkeRA { display: block; font-size: 17px; font-weight: 800; color: #1C1C1C; letter-spacing: -0.02em; line-height: 1.2; }
  .CR_353lqIuQAGhVgyDoL { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #888; justify-content: center; }
  .t9qwMo2TBE3aZd0tfOMq { display: block; width: 12px; height: 12px; stroke-width: 2; color: #BBBBBB; flex-shrink: 0; }

  /* Nav links */
  .E51H0CmG3AxtUlCiy_QA {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  }

  .LKUhFYSXr0DSFGTLjEq8 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #F5F5F5;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    border-radius: 0;
    width: 100%;
  }
  .LKUhFYSXr0DSFGTLjEq8:last-child { border-bottom: none; }
  .LKUhFYSXr0DSFGTLjEq8:hover { background: #FFF6EE; color: #E17100; }
  .dtyLekBGkhHDHd31Beyi { background: #FFF6EE; color: #E17100; border-left: 3px solid #E17100; }

  .yVlC_lzkEeN14YvS_UhJ { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }

  /* Logout side button */
  .hCS75Vue8nG7Nx3RK9vQ {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #FFFFFF;
    border: 1.5px solid #FFE0E0;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #D93030;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    box-sizing: border-box;
  }
  .hCS75Vue8nG7Nx3RK9vQ:hover { background: #FFF5F5; border-color: #F5B0B0; }
  .QBANGhnKqaZmlCNyEiyV { display: block; width: 18px; height: 18px; stroke-width: 2; color: #D93030; }

  /* ── Content area ── */
  .r5XUg_MkFN5FQ8o2Oi0T { flex: 1; min-width: 0; }
  .IioNG7EAQ9zJP4wmNECW { padding: 0; gap: 16px; }

  /* ── Tab card body — desktop ── */
  .q0jWYOczYEMLhD2toF58 {
    padding: 24px;
    gap: 12px;
  }

  /* Bigger section labels on desktop */
  .YOYAjJHuZSVe3OjYJ5wO {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1C1C1C !important;
    letter-spacing: -0.02em;
    text-transform: none !important;
  }

  /* Overview grid */
  .V1lUebVi8Ao7u4V0ucfT { gap: 20px; }

  /* Bigger cards on desktop */
  .in44QjfDczkxXRhTSi5g { border-radius: 20px !important; box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important; }
  .J7DzoBJsnF5do6Y54Ggs { padding: 18px 22px 14px !important; }
  .ush7alXo1kTlLEF23T0w { padding: 16px 22px !important; }
  .rDc9rDm9G5yc7RDpszEq { padding: 16px 22px !important; }

  /* FAQ larger spacing */
  .LlbNV3bHYMetTO0aas8v { border-radius: 16px !important; }
  .fAgzTtdwL7MvdHX9ThPQ { padding: 18px 22px !important; }
  .K03Ks3Sllpp_L9UcVu0T { padding: 14px 22px 20px !important; font-size: 14.5px !important; }
  .kcPzpS927hfY9KRYbeDg { gap: 10px !important; }

  /* Empty state */
  .ijQW8Ob4pfeNrqWhMDix { border-radius: 20px; padding: 60px 40px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); }
}

/* ══════════════════════════════════════════════════════════════════
   SHARED / COMPONENT STYLES
══════════════════════════════════════════════════════════════════ */
.yVlC_lzkEeN14YvS_UhJ { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }

.V1lUebVi8Ao7u4V0ucfT { display: flex; flex-direction: column; gap: 12px; }

/* Account info card */
.in44QjfDczkxXRhTSi5g {
  background: #FFFFFF; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.J7DzoBJsnF5do6Y54Ggs { display: flex; align-items: center; padding: 16px 18px 12px; border-bottom: 1px solid #F2F2F2; }
.Zie3hWGR36UJ7qcqY7lE { font-size: 11px; font-weight: 700; color: #8A8A8A; text-transform: uppercase; letter-spacing: 0.08em; }

.ush7alXo1kTlLEF23T0w {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #F5F5F5; transition: background 0.12s;
}
.ush7alXo1kTlLEF23T0w:last-child { border-bottom: none; }
.YT3G5ujR6XSzvBTYhZ5l { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.eeWybr53tFPQjCm4Ck00 { font-size: 10px; font-weight: 700; color: #AAAAAA; text-transform: uppercase; letter-spacing: 0.07em; }
.F2q2jLzoszI6rp5V6zQB { font-size: 15px; font-weight: 600; color: #1C1C1C; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpEx0pc77I9jjkjntOnJ { color: #BBBBBB; font-style: italic; font-weight: 400; }

.OPuH2MdFtlRtXFpaUu6m {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; color: #1A7A1A;
  background: #EBF7EB; border: 1px solid #B8E0B8; border-radius: 100px; padding: 2px 8px;
}

.xQdgKRA6r0qdQXAxuIpA {
  background: #F5F5F5; border: none; border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.xQdgKRA6r0qdQXAxuIpA:hover { background: #EBEBEB; }
.Bq2Tnu6IVYoyFKWh5Pxx { width: 15px; height: 15px; stroke-width: 2; color: #555; }

.rDc9rDm9G5yc7RDpszEq { padding: 14px 18px; border-bottom: 1px solid #F5F5F5; display: flex; flex-direction: column; gap: 10px; }
.D42FpYd06mHV5FF6pmjg { font-size: 10px; font-weight: 700; color: #AAAAAA; text-transform: uppercase; letter-spacing: 0.07em; }
.Z8UjRhFB4jicC_n1AjxY {
  width: 100%; border: 1.5px solid #E8E8E8; border-radius: 10px;
  padding: 12px 14px; font-size: 15px; font-weight: 500; color: #1C1C1C;
  background: #FAFAFA; outline: none; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s;
}
.Z8UjRhFB4jicC_n1AjxY:focus { border-color: #E17100; box-shadow: 0 0 0 3px rgba(225,113,0,0.1); background: #FFFFFF; }
.hveAaKJ8zBMQ2ooYsW9_ { display: flex; gap: 8px; }
.MDmfEjsqNqYaWRBI9_Hz {
  flex: 1; height: 42px; background: #1C1C1C; color: #FFFFFF; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: opacity 0.15s;
}
.MDmfEjsqNqYaWRBI9_Hz:disabled { opacity: 0.6; cursor: not-allowed; }
.wba9jL2Bf3MgZTsUHnUf {
  height: 42px; padding: 0 18px; background: #F5F5F5; color: #555;
  border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.wba9jL2Bf3MgZTsUHnUf:hover { background: #EBEBEB; }

/* Mobile logout button */
.Gqfe8ACAMrFRlEceLxbw {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #FFFFFF; border: 1.5px solid #FFE0E0; border-radius: 16px;
  padding: 16px 18px; font-size: 15px; font-weight: 700; color: #D93030;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.Gqfe8ACAMrFRlEceLxbw:hover { background: #FFF5F5; border-color: #F5B0B0; }
.T8kuFKUOwvHu6lg_2NKz { width: 20px; height: 20px; stroke-width: 2; color: #D93030; }

/* Orders */
.i5_BPbQDvc8RRyafrCA2 { display: flex; justify-content: center; align-items: center; padding: 60px 0; }
.ijQW8Ob4pfeNrqWhMDix { background: #FFFFFF; border-radius: 18px; padding: 48px 24px; text-align: center; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.jOpmbHAZO27F3N7hUQ5f { font-size: 40px; margin-bottom: 12px; }
.D3e7BqeQleVH9476hbP4 { font-size: 16px; font-weight: 700; color: #1C1C1C; margin-bottom: 6px; }
.sdcwFK4rVLpkThU2FC3_ { font-size: 13px; color: #888; line-height: 1.5; }
.mhQJvONhkhq9tyOTzj16 { display: flex; flex-direction: column; gap: 10px; }

.YOYAjJHuZSVe3OjYJ5wO { font-size: 11px; font-weight: 700; color: #8A8A8A; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }

/* FAQs */
.kcPzpS927hfY9KRYbeDg { display: flex; flex-direction: column; gap: 8px; }
.LlbNV3bHYMetTO0aas8v { background: #FFFFFF; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.05); transition: box-shadow 0.2s; }
.TIlap1oQgSwo3E_LRH_g { box-shadow: 0 4px 16px rgba(0,0,0,0.09); }
.fAgzTtdwL7MvdHX9ThPQ {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; cursor: pointer; width: 100%; background: transparent;
  border: none; -webkit-tap-highlight-color: transparent; user-select: none; gap: 10px; text-align: left;
}
.NWEamq1o37Ua0CHKGXns { font-size: 14px; font-weight: 600; color: #1C1C1C; line-height: 1.4; flex: 1; }
.ZdaAgFK2kvD29Eu1o3Sh { flex-shrink: 0; display: flex; align-items: center; }
.IbUbkPzLHcX5g8w0HGEQ { width: 18px; height: 18px; stroke-width: 2.5; color: #E17100; transition: transform 0.2s; }
.K03Ks3Sllpp_L9UcVu0T { padding: 12px 16px 16px; font-size: 14px; color: #6B6B6B; line-height: 1.65; border-top: 1px solid #F2F2F2; }

/* Static content (Terms/Privacy) */
.Gxm_9AwDgEuy1kOph4nw { background: #FFFFFF; border-radius: 16px; padding: 20px; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.jhM2pBjiup1jtbgzWUcU { text-align: center; color: #8A8A8A; font-size: 14px; padding: 20px 0; margin: 0; line-height: 1.6; }
.t_49p2LiGka3dtY65eJ5 { display: flex; justify-content: center; align-items: center; padding: 28px 0; }
.pFizGfdQ_VTx7RGwzFXy { font-size: 14px; line-height: 1.7; color: #3A3A3A; overflow-wrap: anywhere; }
.pFizGfdQ_VTx7RGwzFXy h1,.pFizGfdQ_VTx7RGwzFXy h2,.pFizGfdQ_VTx7RGwzFXy h3 { color: #1C1C1C; font-weight: 700; margin: 14px 0 8px; }
.pFizGfdQ_VTx7RGwzFXy p { margin: 0 0 10px; }
.pFizGfdQ_VTx7RGwzFXy ol,.pFizGfdQ_VTx7RGwzFXy ul { margin: 8px 0 12px; padding-left: 20px; }
.pFizGfdQ_VTx7RGwzFXy li { margin-bottom: 8px; }

/* Logout modal */
.bKUpZI55KnbbnJP7l640 { width: 60px; height: 60px; border-radius: 50%; background: #FFF0F0; border: 1.5px solid #FFDEDE; display: flex; align-items: center; justify-content: center; margin: 8px auto 18px; }
.F0vI8Z6pwMV9ZzLvpZR4 { width: 28px; height: 28px; stroke-width: 1.8; color: #D93030; }
.AjiBGpLldlCj432Kg3Lu { font-size: 19px; font-weight: 800; color: #1C1C1C; margin: 0 0 6px; letter-spacing: -0.02em; }
.xXFyAS7n6wPz5qKuNVoF { font-size: 14px; color: #7A7A7A; margin: 0 0 22px; line-height: 1.5; }
.hVW3_gTN9K9XKEJ9v4cj { display: flex; gap: 10px; }
._tN67qwDrJXvR2QrQ4VJ { flex: 1; height: 48px; background: #F5F5F5; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; color: #555; cursor: pointer; transition: background 0.15s; }
._tN67qwDrJXvR2QrQ4VJ:hover { background: #EBEBEB; }
.QMIaXs2l8FAFQx4cUNH5 { flex: 1; height: 48px; background: #D93030; border: none; border-radius: 12px; font-size: 14px; font-weight: 700; color: #FFFFFF; cursor: pointer; transition: opacity 0.15s; }
.QMIaXs2l8FAFQx4cUNH5:hover { opacity: 0.88; }

/* ── FAQ page shell ── */
.faq-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #F5F3F0;
  overflow-y: auto;
}

/* ── Page header (replaces Menuback) ── */
.faq-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.faq-back-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: -4px;
  transition: background 0.15s;
}
.faq-back-btn:hover { background: #F0F0F0; }

.faq-back-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.5;
  color: #1C1C1C;
}

.faq-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.faq-header-title {
  font-size: 16px;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.faq-header-sub {
  font-size: 11.5px;
  color: #AAAAAA;
  font-weight: 500;
}

/* ── FAQ list content ── */
.faq-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 80px;
}

/* ── Individual FAQ item ── */
.faq-item {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}
.faq-item-open {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  gap: 10px;
  text-align: left;
}

.faq-question-text {
  font-size: 14px;
  font-weight: 600;
  color: #1C1C1C;
  line-height: 1.45;
  flex: 1;
}

.faq-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.faq-chevron-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  color: #E17100;
  transition: transform 0.2s;
}

.faq-answer {
  padding: 12px 16px 16px;
  font-size: 14px;
  color: #6B6B6B;
  line-height: 1.65;
  border-top: 1px solid #F2F2F2;
}

/* ── Desktop ── */
@media (min-width: 769px) {
  .faq-root { background: #F2F0ED; }

  .faq-page-header {
    padding: 16px 24px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
  }
  .faq-header-title { font-size: 17px; }

  .faq-content {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 28px 24px 80px;
    gap: 10px;
    box-sizing: border-box;
  }

  .faq-item { border-radius: 16px; }
  .faq-question { padding: 18px 22px; }
  .faq-question-text { font-size: 14.5px; }
  .faq-answer { padding: 14px 22px 20px; font-size: 14.5px; }
}

/* Override styles for dots - positioned inside banner */
.alice-carousel {
  position: relative;
}

.alice-carousel__dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.alice-carousel__dots-item {
  width: 8px !important;
  height: 8px !important;
  margin: 0 4px !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.alice-carousel__dots-item.__active {
  background-color: #fff !important;
  transform: scale(1.1);
}

.alice-carousel__dots-item:not(.__custom) {
  width: 8px !important;
  height: 8px !important;
  cursor: pointer;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.alice-carousel__dots-item:not(.__custom).__active {
  background-color: #fff !important;
}

.alice-carousel__dots-item:not(.__custom):not(:last-child) {
  margin-right: 6px !important;
}

/* wrapper  */
.alice-carousel__wrapper {
  /* border-radius: 1rem; */
  overflow: hidden;
}

/* Desktop: add horizontal padding for banner */
@media (min-width: 769px) {
  .carousel-libr {
    padding: 2% 15%;
  }

  .alice-carousel__wrapper {
    border-radius: 12px;
  }
}

.alice-carousel__wrapper img {
  /* max-height: 500px !important; */
  min-height: 300px !important;
  width: 100%;
  object-fit: cover;
  /* margin-top: 201px; */
  /* object-fit: contain; */
}

/* Desktop: limit banner height */
@media (min-width: 769px) {
  .alice-carousel__wrapper img {
    max-height: 400px !important;
    min-height: 300px !important;
    object-fit: cover;
  }
}

.alice-carousel__stage-item {
  margin-top: 0px !important;
}
.home_banner_img {
  min-height: 377px !important;
}
/* Tablets: 600px to 768px */
@media (max-width: 768px) and (min-width: 600px) {
  .alice-carousel__wrapper img {
    min-height: 220px !important;
  }
}

@media (max-width: 540px) and (min-width: 720px) {
  .alice-carousel__wrapper img {
    min-height: 220px !important;
    /* margin-top: 210px !important; */
  }
}

@media (max-width: 599px) and (min-width: 400px) {
  .alice-carousel__wrapper img {
    min-height: 186px !important;
    margin-top: 0px !important;
  }
}

/* Mobile devices: 320px to 480px */
@media (max-width: 399px) and (min-width: 320px) {
  .alice-carousel__wrapper img {
    min-height: 160px !important;
    margin-top: 0px !important;
  }
}

.home-banner-layout {
  width: 100%;
}

.home-banner-desktop-grid {
  display: none;
}

.home-banner-desktop-card {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(23, 23, 23, 0.1);
}

.home-banner-desktop-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7.2;
  object-fit: cover;
}

@media (min-width: 1025px) {
  .home-banner-layout {
    padding: 10px 24px 10px;
    box-sizing: border-box;
  }

  .home-banner-desktop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .home-banner-desktop-card {
    box-shadow: none;
  }
}

/* .titleBox{
    
} */
.no-products-found {
  height: 7rem;
  width: 7rem;
}

.no-products-found-img {
  height: 100%;
}
/* Card Styling */
.tag-card-1-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(50% - 6px);
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease;

  background: var(--wb-tag-tag-bg-color, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--wb-tag-tag-border-color, #e5e5e5);
  padding: 0.75rem 0.75rem 0.25rem;
}

/* Image Section */
.tag-card-1-image-box {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.tag-card-1-fav-par {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: var(--wb-theme-colors-theme-primary-color, #fe9a00e5);
  color: var(--Surface-White, #ffffff);
  height: 28px;
  width: 28px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-card-1-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Best Seller Badge (Top Overlay) */
.best-seller-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #b96b42 0%, #d4a373 100%);
  color: var(--Surface-White, #ffffff);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  border-bottom-right-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

/* Content Section */
.tag-card-1-content {
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* pushes footer-1 to bottom */
}

.deliverySlotContainer {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--wb-tag-tag-slot-bg-color, #fdedd6);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
  align-self: flex-start;
}

.slotText {
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-tag-tag-slot-text-color, #c77d0b);
  margin: 0;
}

.slotIcon svg {
  width: 12px;
  height: 12px;
  color: var(--wb-tag-tag-slot-text-color, #fe9a00);
}

.foodTypeNameContainer {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}

.productName {
  font-size: 14px;
  font-weight: 600;
  color: var(--wb-tag-tag-text-color, #171717);
  margin: 0;
  line-height: 1.2em;
  height: 1.2em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-card-1-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--wb-tag-tag-text-color, #171717);
  margin: 8px 0;
}

/* Footer / Button Area */
.tag-card-1-footer-1 {
  margin-top: auto; /* aligns to bottom of the content flex container */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tag-card-1-add-btn {
  width: 100% !important;
  border: 1.5px solid var(--wb-tag-tag-button-border-color, #af5e00) !important;
  background-color: var(--wb-tag-tag-button-bg-color, #ffffff) !important;
  color: var(--wb-tag-tag-button-text-color, #af5e00) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  height: 40px;
}

.customizablePlaceholder {
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

.customizable-text {
  font-size: 10px;
  color: var(--wb-tag-tag-secondary-text-color, #737373);
  margin: 0;
  padding: 0;
}

.tag-card-1-qty-counter {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background-color: var(--wb-tag-tag-button-bg-color, #ffffff);
  border: 1px solid var(--wb-tag-tag-button-border-color, #af5e00);
  border-radius: 10px;
  color: var(--wb-tag-tag-button-text-color, #af5e00);
}

.tag-card-1-qty-icon,
.tag-card-1-qty-text {
  color: var(--wb-tag-tag-button-text-color, #af5e00) !important;
}

@media (min-width: 600px) {
  .tag-card-1-card {
    flex: 0 0 200px;
    width: 200px;
  }
}

@media (min-width: 1025px) {
  .tag-card-1-card {
    flex: 0 0 calc((100% - 64px) / 5);
    width: calc((100% - 64px) / 5);
    max-width: calc((100% - 64px) / 5);
    min-height: 100%;
    border-radius: 14px;
    padding: 1rem 1rem 0.5rem;
    box-shadow: 0 12px 30px rgba(23, 23, 23, 0.08);
  }

  .tag-card-1-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(23, 23, 23, 0.12);
  }

  .tag-card-1-image-box {
    height: 156px;
    border-radius: 12px;
  }

  .tag-card-1-img {
    border-radius: 12px;
  }

  .tag-card-1-fav-par {
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
  }

  .tag-card-1-content {
    padding-top: 16px;
  }

  .deliverySlotContainer {
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
  }

  .slotText {
    font-size: 12px;
  }

  .slotIcon svg {
    width: 14px;
    height: 14px;
  }

  .foodTypeNameContainer {
    gap: 8px;
    margin-bottom: 6px;
  }

  .productName {
    font-size: 18px;
    line-height: 1.3em;
    height: 2.6em;
    -webkit-line-clamp: 2;
  }

  .tag-card-1-price {
    font-size: 28px;
    margin: 12px 0;
  }

  .tag-card-1-add-btn,
  .tag-card-1-qty-counter {
    height: 46px;
    border-radius: 12px;
  }

  .tag-card-1-add-btn {
    font-size: 17px !important;
  }

  .tag-card-1-qty-icon,
  .tag-card-1-qty-text {
    font-size: 18px !important;
  }

  .customizablePlaceholder {
    height: 22px;
    margin-top: 6px;
  }

  .customizable-text {
    font-size: 12px;
  }
}

.alice-carousel .animated {
  animation-fill-mode: both;
}

.alice-carousel .animated-out {
  z-index: 1;
}

.alice-carousel .fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.alice-carousel {
  position: relative;
  width: 100%;
  margin: auto;
  direction: ltr;
}

.alice-carousel__wrapper {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}

.alice-carousel__stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transform-style: flat;
  -webkit-transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.alice-carousel__stage-item {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  vertical-align: top;
  white-space: normal;
  line-height: 0;
}
.alice-carousel__stage-item * {
  line-height: initial;
}
.alice-carousel__stage-item.__hidden {
  opacity: 0;
  overflow: hidden;
}

.alice-carousel__prev-btn,
.alice-carousel__next-btn {
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 5px;
}
.alice-carousel__prev-btn [data-area]::after,
.alice-carousel__next-btn [data-area]::after {
  position: relative;
  content: attr(data-area);
  text-transform: capitalize;
}

.alice-carousel__prev-btn {
  text-align: right;
}

.alice-carousel__next-btn {
  text-align: left;
}

.alice-carousel__prev-btn-item,
.alice-carousel__next-btn-item {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  margin: 0;
  color: #465798;
}
.alice-carousel__prev-btn-item:hover,
.alice-carousel__next-btn-item:hover {
  color: darkred;
}
.alice-carousel__prev-btn-item.__inactive,
.alice-carousel__next-btn-item.__inactive {
  opacity: 0.4;
  pointer-events: none;
}

.alice-carousel__play-btn {
  position: absolute;
  top: 30px;
  left: 20px;
  display: inline-block;
}
.alice-carousel__play-btn:hover {
  cursor: pointer;
}
.alice-carousel__play-btn-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.alice-carousel__play-btn-item {
  position: absolute;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border: 0;
  outline: none;
  background: transparent;
}
.alice-carousel__play-btn-item::before, .alice-carousel__play-btn-item::after {
  position: absolute;
  pointer-events: none;
  display: block;
  width: 0;
  height: 0;
  content: "";
  transition: all 0.4s linear;
  border-width: 8px 0 8px 15px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #465798;
}
.alice-carousel__play-btn-item::before {
  left: 5px;
  height: 14px;
}
.alice-carousel__play-btn-item::after {
  top: 7px;
  left: 18px;
}
.alice-carousel__play-btn-item.__pause::before, .alice-carousel__play-btn-item.__pause::after {
  height: 30px;
  border-width: 0 0 0 10px;
}
.alice-carousel__play-btn-item.__pause::after {
  top: 0;
  left: 18px;
}

.alice-carousel__dots {
  margin: 30px 3px 5px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.alice-carousel__dots > li {
  display: inline-block;
}
.alice-carousel__dots-item:not(.__custom) {
  width: 8px;
  height: 8px;
  cursor: pointer;
  border-radius: 50%;
  background-color: #e0e4fb;
}
.alice-carousel__dots-item:not(.__custom):not(:last-child) {
  margin-right: 20px;
}
.alice-carousel__dots-item:not(.__custom):hover, .alice-carousel__dots-item:not(.__custom).__active {
  background-color: #6e7ebc;
}

.alice-carousel__slide-info {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-block;
  padding: 5px 10px;
  color: #465798;
  border-radius: 5px;
  background-color: rgba(224, 228, 251, 0.6);
}
.alice-carousel__slide-info-item {
  vertical-align: middle;
  line-height: 0;
}
.brands-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 1.2em;
  margin-top: 2rem;
}

@media (max-width: 768px) and (min-width: 600px) {
  .brands-card {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 599px) and (min-width: 479px) {
  .brands-card {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) and (min-width: 320px) {
  .brands-card {
    grid-template-columns: repeat(3, 1fr);
  }
}

.horizontal-scroll-container {
  display: flex;
  overflow-x: auto;
  padding: 0.5rem 0.5rem;
  gap: 0.75rem;
  scroll-behavior: smooth;
  background-color: transparent;
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.horizontal-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.category-badge {
  white-space: nowrap;
  padding: 0.5rem 1.25rem;
  background-color: white;
  color: #b96b42;
  font-weight: 500;
  border-radius: 9999px;
  font-size: 0.95rem;
  flex-shrink: 0;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  max-width: 100%;
  transition: all 0.3s;
  cursor: pointer;
  /* font-family: sans-serif; */
  height: 23px;
  border: 2px solid #b96b42;
}

.category-badge:hover {
  background-color: #f5f5f5;
  border-color: #a05a36;
  color: #a05a36;
}

.category-badge.active {
  background-color: #b96b42;
  color: white;
  border: 2px solid #b96b42;
}

.category-badge.active:hover {
  background-color: #a05a36;
  border-color: #a05a36;
  color: white;
}
.view-all-badge {
  background-color: #333;
}
.modal-content {
  background-color: white;
  color: black;
  padding: 20px;
  width: 80%;
  max-width: 400px;
  margin: 50px auto;
  border-radius: 12px;
  outline: none;
  border: 1px solid #b96b42;
}

.modal-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabs {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin: 16px;
  flex-wrap: wrap;
  width: 420px;
}

.tab {
  flex: 1 1 12%;
  background-color: #b96b42;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 8px 4px;
  text-align: center;
  /* font-family: Arial, sans-serif; */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tab .tab-title {
  font-size: 10px;
  font-weight: 500;
}

.tab .tab-sub {
  font-size: 12px;
  opacity: 0.9;
}

.tab.selected {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e0e0e0;
}

.tab.selected .tab-sub {
  opacity: 0.7;
}

/* @media (min-width: 400px) and (max-width: 900px) {
  .tab {
    width: 40%;
    height: 30%;
    display: flex;
  }
} */


/* for responsiveness */
@media (max-width: 1024px) {
  .tabs {
    margin: 1rem 0.5rem;
    box-sizing: border-box;
  }

  .tab .tab-title {
    font-size: 1rem;
  }

  .tab .tab-sub {
    font-size: 1.25rem;
  }
}

@media (max-width: 600px) {
  .tabs {
    width: auto;
  }

  .tab .tab-title {
    font-size: 0.75rem;
  }

  .tab .tab-sub {
    font-size: 1rem;
  }
}
.VCOcjE5wv6otwVTDYbRP {
  width: 100%;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #EBEBEB;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
}

.xdgnUNS_ssgko1Go_IkZ {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── LEFT ── */
.Q_ozdPq8JtXJWIS9gKz4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.Oknez4zbAWUoJDDyOrgg {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  border-radius: 4px;
}

/* ── MIDDLE ── */
.lyPyB6A2OzkmsbPqtzw5 {
  display: none;
  flex: 1;
  padding: 0 24px;
  justify-content: center;
}

.tWjfjZVuuM9YTBVjuXfG {
  width: 100%;
  max-width: 420px;
  background: #FAFAF8;
  border: 1.5px solid #EDE9E3;
  border-radius: 100px;
  padding: 6px 18px 6px 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  transition: border-color 0.18s, box-shadow 0.18s;
  cursor: pointer;
}

.tWjfjZVuuM9YTBVjuXfG:hover {
  border-color: #D4C5B0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

/* ── RIGHT ── */
.S_X3atsoQAqDK9u6vaWn {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

._jrCmr4njJYMe6QCZbzX {
  background: none;
  border: none;
  padding: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3D3D3D;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}

._jrCmr4njJYMe6QCZbzX:hover {
  background: #F5F3F0;
  color: #E17100;
}

.roqzXi3zBTY2T0M5Aatu {
  height: 26px;
  width: 26px;
  stroke-width: 1.8;
}

.CRCimHnviJrMPJzrXMz2 {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #E17100;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Cart button is redundant on mobile — the bottom nav bar has ViewCartButton */
.fepy8UNZ1keBdGyQ7peY,
.owXwmn1u3Akc2N5p5UXa,
.UxjKzE83SBv3WopaAc_9,
.hYsLEZTL2l6e_dUlbrpn {
  display: none;
}

.k_zdsdar_cIoTwNSL8Se {
  display: flex;
}

/* ── Mobile address bar strip ── */
.TbN33WS4mU68lOTsvRHL {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 4px;
  border-top: 1px solid #F2F2F2;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════
   NAV DRAWER — Premium redesign
══════════════════════════════════════════════════ */

/* Backdrop */
.g1mN0LrjIhxjvy16tm09 {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 5, 0.48);
  z-index: 1200;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Drawer shell */
.AGifGBwSCWbzYdbMrpg4 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #FDFCFB;
  z-index: 1201;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

/* Amber top accent bar */
.XRXGfkRw8aAzRI1_KiJZ {
  height: 3px;
  background: linear-gradient(90deg, #E17100 0%, #F5A623 60%, #FBD38D 100%);
  flex-shrink: 0;
}

/* ── Drawer Header ── */
.M9OO4gFUtbGFoxLDNXnG {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 16px;
  border-bottom: 1px solid #F0EDE8;
  flex-shrink: 0;
  background: #FFFFFF;
}

.lfVq75h8WLyF8NHdapyn {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

.UBCfQeMLni546461pqzK {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid #F0EDE8;
  background: #FFF8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.XaEOg8abASwNZzTdJhtj {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.j_71wabkKv1bNZS0mGeg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.eVZIaMi0uCf1yXcBMGfA {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.PB7OJ34ZvHoVL_BJ2BVl {
  font-size: 11px;
  color: #A09080;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.IsGR7kpb4BN27ha_Djhs {
  background: #F5F3F0;
  border: none;
  cursor: pointer;
  color: #6B6460;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  margin-left: 8px;
}

.IsGR7kpb4BN27ha_Djhs:hover {
  background: #EDE9E3;
  color: #1C1C1C;
}

/* ── Profile / Account card ── */
.xdRQZdVNrDQN_roOSYLP {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 14px 10px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #FFF8EE 0%, #FFF3E0 100%);
  border: 1.5px solid #FADDAB;
  border-radius: 14px;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s;
  text-align: left;
  flex-shrink: 0;
}

.xdRQZdVNrDQN_roOSYLP:hover {
  border-color: #E17100;
  box-shadow: 0 4px 16px rgba(225, 113, 0, 0.14);
}

.YURj7AwtkZ7Cti6t3U9Q {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFF0DC;
  border: 2px solid #F5C97A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.i9PdwzeFFWKW9VFtT8Ic {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xUV_6hAfwxWgw8GtQM8M {
  font-size: 13.5px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.wgHoqY25OLQzK2CEHVa1 {
  font-size: 11.5px;
  color: #A07830;
  font-weight: 500;
  line-height: 1.2;
}

.zirQ60Ns0fU7OKWY2Bl5 {
  width: 16px;
  height: 16px;
  color: #C48830;
  stroke-width: 2.2;
  flex-shrink: 0;
}

/* ── Nav Groups ── */
.omTJRlXRJHR5kMSNi4B2 {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: none;
}

.omTJRlXRJHR5kMSNi4B2::-webkit-scrollbar {
  display: none;
}

.yOb0srx3pKNP833ORX67 {
  margin-bottom: 4px;
}

.FL2u2XshUFosVV09vb9A {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C4B8A8;
  padding: 14px 10px 6px;
  margin: 0;
  line-height: 1;
}

/* Nav item */
.ILJU2auPJh5CEdehNGsj {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #3D3530;
  text-align: left;
  transition: background 0.14s, color 0.14s;
  width: 100%;
  letter-spacing: -0.01em;
  position: relative;
}

.ILJU2auPJh5CEdehNGsj:hover {
  background: #FFF4E8;
  color: #C06000;
}

.ILJU2auPJh5CEdehNGsj:hover .B8hTYjNago7MxEfJM7Ag {
  background: #FFE8C8;
  border-color: #F5C97A;
  color: #D07000;
}

/* Active state */
.j5QE2Y1J4gcl2HYqCVJ4 {
  background: #FFF0DC;
  color: #BF5C00;
  font-weight: 700;
}

.j5QE2Y1J4gcl2HYqCVJ4 .B8hTYjNago7MxEfJM7Ag {
  background: #FFE0A8;
  border-color: #F5B84A;
  color: #BF5C00;
}

/* Icon badge container */
.B8hTYjNago7MxEfJM7Ag {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F5F3F0;
  border: 1.5px solid #EDEAE5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  color: #5A5450;
}

.v3UoPDcpleVziQQUa8XP {
  background: #FFE0A8;
  border-color: #F5B84A;
  color: #BF5C00;
}

.XfcAyQpU6vssOrQ6tLde {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.QvkuNuX0EDQf3Nod7uMd {
  flex: 1;
}

/* Active indicator dot */
.rYQGMe_RUrD5wy2nGyQw {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E17100;
  flex-shrink: 0;
}

/* ── Sign Out nav item variants ── */
.Ac0HcLhV3ObGniri4Mmb {
  color: #D93030;
}
.Ac0HcLhV3ObGniri4Mmb:hover {
  background: #FFF5F5;
  color: #B02020;
}
.Ac0HcLhV3ObGniri4Mmb:hover .SXX65ZUKYn05qN68W9xY {
  background: #FFE5E5;
  border-color: #F5AAAA;
}
.SXX65ZUKYn05qN68W9xY {
  background: #FFF0F0;
  border-color: #FFDEDE;
  color: #D93030;
}

/* ── Sign Out confirm modal ── */
.FN7WNI1reOvEhFMB5CAQ { width: 60px; height: 60px; border-radius: 50%; background: #FFF0F0; border: 1.5px solid #FFDEDE; display: flex; align-items: center; justify-content: center; margin: 8px auto 18px; }
.UxSRoIjadBtnnqb174wf { width: 28px; height: 28px; stroke-width: 1.8; color: #D93030; }
.AkdvK0whX9zcIPXeHxUs { font-size: 19px; font-weight: 800; color: #1C1C1C; margin: 0 0 6px; letter-spacing: -0.02em; }
.Urw3mGIS6LKh7u1k8e_w { font-size: 14px; color: #7A7A7A; margin: 0 0 22px; line-height: 1.5; }
.RcKV4uXqFPksKHNoI32P { display: flex; gap: 10px; }
.SMcxOcSfy4ZFYjdIxV3Q { flex: 1; height: 48px; background: #F5F5F5; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; color: #555; cursor: pointer; transition: background 0.15s; }
.SMcxOcSfy4ZFYjdIxV3Q:hover { background: #EBEBEB; }
.YJsw5XJfFkyWOtHtv4MV { flex: 1; height: 48px; background: #D93030; border: none; border-radius: 12px; font-size: 14px; font-weight: 700; color: #FFFFFF; cursor: pointer; transition: opacity 0.15s; }
.YJsw5XJfFkyWOtHtv4MV:hover { opacity: 0.88; }

/* ── Footer ── */
.xttv7Hu_5A6x8GznMBOK {
  padding: 14px 18px 18px;
  border-top: 1px solid #F0EDE8;
  flex-shrink: 0;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gEg08dPCwo7HXCAqjsnH {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #3D3530;
  letter-spacing: -0.01em;
}

.DBM24t5a070cfkn7URrv {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E17100;
  flex-shrink: 0;
}

.Gjv_eHbfigi_bmKRxQyG {
  font-size: 11px;
  color: #C4B8A8;
  font-weight: 400;
  padding-left: 13px;
}

/* ── Tablet (768px+) ── */
@media (min-width: 768px) {
  .VCOcjE5wv6otwVTDYbRP {
    padding: 12px 32px;
  }

  /* Show cart and search in the header from tablet width up */
  .fepy8UNZ1keBdGyQ7peY,
  .owXwmn1u3Akc2N5p5UXa {
    display: flex;
  }

  .TbN33WS4mU68lOTsvRHL {
    display: none;
  }

  .AGifGBwSCWbzYdbMrpg4 {
    width: 360px;
  }
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
  .VCOcjE5wv6otwVTDYbRP {
    padding: 14px 40px;
  }

  .Oknez4zbAWUoJDDyOrgg {
    height: 52px;
  }

  .lyPyB6A2OzkmsbPqtzw5 {
    display: flex;
  }

  .S_X3atsoQAqDK9u6vaWn {
    gap: 4px;
  }

  .UxjKzE83SBv3WopaAc_9,
  .hYsLEZTL2l6e_dUlbrpn {
    display: flex;
  }

  /* Mobile profile button not needed on desktop — dedicated icons + hamburger handle it */
  .k_zdsdar_cIoTwNSL8Se {
    display: none;
  }

  .AGifGBwSCWbzYdbMrpg4 {
    width: 380px;
  }
}

.S0B_DF_nbIyvDn3eIycy {
  padding: 0;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1; /* Takes up remaining space below the header */

  /* The scrolling magic */
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.SNwzgXTqtT1G3q10jdoN {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.FEX7ffsb106DMQxlL8qR {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* Card Styling mimicking the image */
.Ex4WDUzO1cimbUPT4wgw {
  background-color: var(--grey-n-7, #f2f2f2);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.tU_Tf_LivVwjOHBhks9D {
  border-color: #b96b42;
  background-color: #fdf4e9;
}

.Ex4WDUzO1cimbUPT4wgw:active {
  transform: scale(0.98);
}

/* Row 1: Name and City */
.rvG5rwG08pZU5FmoJ1bx {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.zg6VUjFIohM1UoHDMgjN {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-Primary-1, #171717);
  margin: 0;
  line-height: 1.3;
}

/* Row 2: Address */
.KpFHXHTl_tdvWjbtlK2C {
  font-size: 13px;
  color: var(--text-Secondary-1, #8a93a7);
  margin: 0;
  line-height: 1.4;
  /* display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; */
  overflow: hidden;
}

/* Row 3: Distance, Time, Directions */
.COikCJMijdRD6FzdFB7J {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.aFWqn5jkMxYVYNAQOrrx {
  display: flex;
  align-items: center;
  gap: 12px;
}

.UIlk7XfmTIdXVwgLZOtA {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-Primary-1, #171717);
}

/* Small vertical line between distance and time */
.mmFELEwNeiHc3_fpJqYa {
  width: 1px;
  height: 12px;
  background-color: #d1d5db;
}

.cAobsF4Ox9rH3qwuZj47 {
  font-size: 13px;
  color: var(--text-Secondary-1, #8a93a7);
}

/* Directions Icon Button */
.HWuk2WXB1pl866LH_JJv {
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-1, #af5e00);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.HWuk2WXB1pl866LH_JJv:hover {
  opacity: 0.7;
}

/* Fixed Bottom Button Container */
.x0_92vSKsy_votlj7qrw {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--Surface-White, #ffffff);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

/* Sticky variant when rendered inside a bottom drawer */
.SCE2MnNS9XhmBXlh1uVL {
  position: sticky;
  bottom: 0;
  background-color: var(--Surface-White, #ffffff);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.WPyPQ8GFeL6jyokkofSv {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--Surface-White, #ffffff);

  min-height: 0;
}

/* ── Shell ──────────────────────────────────────────────────── */
.wn5q_g41acPYaRwpCcWn {
  display: flex;
  flex-direction: column;
  background: #FAFAFA;
}

.eb3JvAJVsZEAfLTDGGQm {
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background: #E0E0E0;
  margin: 12px auto 6px;
  flex-shrink: 0;
}

.qNKE0eM1QlQ4dtfe4Yxg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 16px 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8A8A8A;
}

.uF2YzKEuTtd0hezqLb55 {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}

/* ── Step wrapper ────────────────────────────────────────────── */
.IXRrOPMy_hzbSG5ILj7A {
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
}

.yQQY8rOjg8QgfT9sija3 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

/* ── Step 1: Delivery / Takeaway cards ───────────────────────── */
.yiPm6uqCZpgv_P2nE9ep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.DQuzNOMhZ5yttFRLVwiW {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  background: #FFFFFF;
  border: 2px solid #F0F0F0;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  text-align: center;
}

.DQuzNOMhZ5yttFRLVwiW:hover {
  border-color: rgba(175,94,0,0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.DQuzNOMhZ5yttFRLVwiW:active {
  transform: scale(0.97);
}

.XO9a4ulHdX4VQZJ01baX {
  border-color: #AF5E00;
  background: #FFF8F0;
}

.QIDiBAWg5b_WOELQ0r0X {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #FFF3E8;
  border: 1.5px solid #F0D8C0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.WBCwNPL0LE_aHUNKFauw {
  width: 22px;
  height: 22px;
  color: #AF5E00;
  stroke-width: 1.75;
}

.B5An0GPfsLnDybef7pKi {
  font-size: 1rem;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
  display: block;
}

.FhSJAS76y28E3qAB_MWD {
  font-size: 0.75rem;
  font-weight: 400;
  color: #8A8A8A;
  line-height: 1.3;
  display: block;
}

/* ── Step 2a: Delivery address options ───────────────────────── */
.ow7oHvYiemCbxAzEZio7 {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1.5px solid #F0F0F0;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  width: 100%;
  text-align: left;
}

.ow7oHvYiemCbxAzEZio7:hover {
  border-color: rgba(175,94,0,0.3);
  background: #FFF8F0;
}

.SZzyTIY5j5eL6m45Ww1e {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFF3E8;
  border: 1.5px solid #F0D8C0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.C07RcVxTzSAeP0wiYuFw {
  width: 20px;
  height: 20px;
  color: #AF5E00;
  stroke-width: 2;
}

.sMMmjudtEJlVbrLDaqgk {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.RUMU56ehEB0gpNJc_dr0 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1C1C1C;
  display: block;
}

.UnjBDBtfNtlmlExWsYd8 {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #8A8A8A;
  display: block;
}

.OA8RaEOLM3ImQ0E6TIvg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}

.BTp4AmBtTgGXOLOibIj6 {
  flex: 1;
  height: 1px;
  background: #EBEBEB;
}

.ydQMVEslFJt5rRqKQjAI {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #C0C0C0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.K68oMqNrSUkB0cTM8mTS {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1.5px solid #F0F0F0;
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1C1C1C;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  text-align: left;
}

.K68oMqNrSUkB0cTM8mTS:hover {
  border-color: rgba(175,94,0,0.3);
  background: #FAFAFA;
}

.WbhdoSNtAzo1DbQeZQm7 {
  width: 20px;
  height: 20px;
  color: #AF5E00;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── Delivery step: scrollable when tall ────────────────────── */
.DgIB_r4OHEiLIQ9mMQQQ {
  overflow-y: auto;
  max-height: calc(72vh - 60px);
}

/* ── Saved addresses section ─────────────────────────────────── */
.JYNsgQBGZlSbFrojbww7 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #AAAAAA;
  margin: 0 0 8px;
}

.YAap6tSWoMDM2L7iLdJC {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.x0lWcR3n9bbUTXCVQSlJ {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.N_9V5Csczp1wcTBqCMtD {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1.5px solid #F0F0F0;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  width: 100%;
  text-align: left;
}

.N_9V5Csczp1wcTBqCMtD:hover:not(:disabled) {
  border-color: rgba(175,94,0,0.3);
  background: #FFF8F0;
}

.N_9V5Csczp1wcTBqCMtD:disabled {
  opacity: 0.7;
  cursor: default;
}

.i_il8qUyTSnDBBRK3hWw {
  border-color: #AF5E00;
  background: #FFF8F0;
}

.CqPVuZ7uojUkfSWsI1tK {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFF3E8;
  border: 1.5px solid #F0D8C0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tEucQU_ULcT6G3cncWoN {
  width: 17px;
  height: 17px;
  color: #AF5E00;
  stroke-width: 2;
}

.JiwgxNG9ZEnR8SqSR3L7 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yfLSNQRW9Emlww04NaK0 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1C1C1C;
  display: block;
}

.Ma0rSzQzuZfWK4HdhkIj {
  font-size: 0.78rem;
  font-weight: 400;
  color: #8A8A8A;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.UuP6P2pHCddd7BOOPALC {
  flex-shrink: 0;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zKzDsxKA0xaRbTkhLjVp {
  width: 20px;
  height: 20px;
  color: #AF5E00;
}

.Zo43_pnSEqBuKEHT9035 {
  width: 16px;
  height: 16px;
  border: 2px solid #F0D8C0;
  border-top-color: #AF5E00;
  border-radius: 50%;
  animation: jBJP77tgJOtbgq1lhHLJ 0.7s linear infinite;
}

@keyframes jBJP77tgJOtbgq1lhHLJ {
  to { transform: rotate(360deg); }
}

/* ── Step 2b: Takeaway title (LocationList renders below) ─────── */

/* ── Button wrapper ─────────────────────────────────────────── */
.JG6S1dEkqA0aBWHBI51S {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 4px 5px 2px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: 10px;
  transition: background 0.15s;
}

/* ── Icon stack ──────────────────────────────────────────────── */
.mtulKODfKxhFXpyI95NH {
  flex-shrink: 0;
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dRLCSDOEqgbJ1RDyOPt5 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.dJDLIuCtNEW_IZC3ahJ4 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid #F0D8C0;
  background: #FFF3E8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.Rp73LUvQJEfJMXkDy17K {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── Single inline row ────────────────────────────────────────── */
.d0jjLptJ0cilTje846rW {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Mode tag chip */
.VaQZHdAF_1hERQYPZKCM {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 100px;
  border: 1px solid #F0D8C0;
  background: #FFF3E8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Live pulse dot */
.jVwQ14Aa10uS3EG2XuZo {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Vertical pipe divider */
.qYUBDrl8qWfphtUoRYmh {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #DDD8D2;
  flex-shrink: 0;
  border-radius: 1px;
}

/* Address text */
.o_79BG490kRvebM3K5lD {
  font-size: 13.5px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ── Chevron ──────────────────────────────────────────────────── */
.wSPucRyvJPD0ATTVdcLA {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tNkZOVXnp7Nx3B7d6NP9 {
  width: 16px;
  height: 16px;
  color: #6B6B6B;
  stroke-width: 2.5;
}

/* ── Desktop ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .mtulKODfKxhFXpyI95NH,
  .dJDLIuCtNEW_IZC3ahJ4 {
    width: 38px;
    height: 38px;
  }

  .Rp73LUvQJEfJMXkDy17K {
    width: 18px;
    height: 18px;
  }

  .o_79BG490kRvebM3K5lD {
    font-size: 14px;
  }
}

.yHewDyH5eVAuWVGV3hvC {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Header */
.Lnehnwo4R0IRXDDrY9H6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--grey-100, #eaecef);
}

.GotKhDR_kZzUXkKltHrd {
  font-size: 18px;
  font-weight: 700;
  color: var(--wb-category-category-title-text-color, #353434);
}

/* Scrollable content */
.brlquwZbOHAJFSnKIJrJ {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  overflow-x: hidden;
  padding: 1rem;
  box-sizing: border-box;
}

/* Grid */
.U4hyqE7GmHCW1Ts48jLY {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 0.5rem; /* row gap / column gap */
  width: 100%;
}

/* Category Item */
.SVzPeac_dvVUQQL_dcmW {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Image Wrapper */
.LAf2Wxwvc2VGJxHZsrZQ {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--wb-category-category-image-border-color, transparent);
}

.RZMtTmU48_xfFrOjfPo5 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Category Name */
.MfpymK8UEk1_WQgA7_6Q {
  font-size: 12px;
  font-weight: 500;
  color: var(--wb-category-category-text-color, #353434);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box; /* Prevents padding from blowing out the 100% width */
  word-break: break-word; /* Forces long words to wrap instead of stretching the column */
}

/* ── Wrapper ─────────────────────────────────────────────── */
.WN2jn5g_IyX0OKp6vqrg {
  width: 100%;
  background-color: #FFFFFF;
  padding: 0;
}

/* ── Section heading ─────────────────────────────────────── */
.BpcY_z6YotOm0IH5Oeyb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 10px 2px;
}

.Q7hIi6w1m78_AaPuqlzy {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}

/* ── Horizontal scroll row ───────────────────────────────── */
.Y8etIVUKFMaDuoEBj0Is {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 12px 2px;
  scrollbar-width: none;
}

.Y8etIVUKFMaDuoEBj0Is::-webkit-scrollbar {
  display: none;
}

/* ── Individual category button ──────────────────────────── */
.C143PLrSOta3y_9mfzuV {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 72px;
  transition: transform 0.15s ease;
}

.C143PLrSOta3y_9mfzuV:active {
  transform: scale(0.93);
}

/* ── Image wrapper — Blinkit/Zepto rounded-rect card ──────── */
.kbuvP7oKJwI_0hJALjTY {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: visible;          /* let image overflow top */
  background: #F0F7EC;        /* soft green — rotates via nth-child */
  position: relative;
  display: flex;
  align-items: flex-end;      /* anchor image to bottom of card */
  justify-content: center;
  transition: box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Rotate pastel backgrounds across cards */
.C143PLrSOta3y_9mfzuV:nth-child(6n+1)  .kbuvP7oKJwI_0hJALjTY { background: #EDF4FF; }
.C143PLrSOta3y_9mfzuV:nth-child(6n+2)  .kbuvP7oKJwI_0hJALjTY { background: #FFF3E0; }
.C143PLrSOta3y_9mfzuV:nth-child(6n+3)  .kbuvP7oKJwI_0hJALjTY { background: #F3F0FF; }
.C143PLrSOta3y_9mfzuV:nth-child(6n+4)  .kbuvP7oKJwI_0hJALjTY { background: #E8F8F2; }
.C143PLrSOta3y_9mfzuV:nth-child(6n+5)  .kbuvP7oKJwI_0hJALjTY { background: #FFF0F0; }
.C143PLrSOta3y_9mfzuV:nth-child(6n)    .kbuvP7oKJwI_0hJALjTY { background: #FFFBE6; }

.C143PLrSOta3y_9mfzuV:hover .kbuvP7oKJwI_0hJALjTY {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* ── Image — overflows the top of the card (Blinkit style) ── */
.LQevxVzFc8XajKgcbQSc {
  width: 64px;
  height: 80px;              /* taller than card so it overflows top */
  object-fit: contain;
  object-position: bottom;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ── Label ───────────────────────────────────────────────── */
.zEgKu5Az069bqIBuH3dL {
  font-size: 10.5px;
  font-weight: 600;
  color: #1C1C1C;
  width: 72px;
  text-align: center;
  line-height: 1.3;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.005em;
}

/* ── See All button ──────────────────────────────────────── */
.m7VxMFhxaZQl1op6LI40 {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.15s ease;
}

.C143PLrSOta3y_9mfzuV:hover .m7VxMFhxaZQl1op6LI40 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.K2H8iODCIxL3epnrBSib {
  font-size: 10.5px;
  font-weight: 700;
  color: #1C1C1C;
  width: 72px;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.N8LVXgJL87IdF2MIG9Ox {
  width: 24px;
  height: 24px;
  color: #555555;
  stroke-width: 2.5;
}

/* ── Desktop — wider cards, tighter grid feel ─────────────── */
@media (min-width: 1025px) {
  .Y8etIVUKFMaDuoEBj0Is {
    gap: 12px;
    padding: 6px 2px 16px 2px;
  }

  .C143PLrSOta3y_9mfzuV {
    width: 88px;
    gap: 7px;
  }

  .kbuvP7oKJwI_0hJALjTY,
  .m7VxMFhxaZQl1op6LI40 {
    width: 88px;
    height: 88px;
    border-radius: 16px;
  }

  .LQevxVzFc8XajKgcbQSc {
    width: 78px;
    height: 96px;
  }

  .zEgKu5Az069bqIBuH3dL,
  .K2H8iODCIxL3epnrBSib {
    font-size: 12px;
    width: 88px;
  }

  .N8LVXgJL87IdF2MIG9Ox {
    width: 28px;
    height: 28px;
  }
}

.VRDyIIx6QoFnvmRwiPlb {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 4px 16px 8px;
  background-color: var(--Surface-White, #ffffff);
  /* Hiding scrollbar for cleaner look */
  scrollbar-width: none; /* Firefox */
}

.VRDyIIx6QoFnvmRwiPlb::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Main Filter Button */
.H92ZF0lGLzWcpfxu8OD6 {
  display: flex;
  height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid #252b37;
  background-color: #252b37;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--Surface-White, #ffffff);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.DiDrRVLVG1KLp0iIBvt4 {
  height: 16px;
  width: 16px;
}

.iu32SI6tHkNF0aTPcknH {
  margin-left: 4px;
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #4ade80;
}

/* Food Type Toggle Buttons */
.ekp5AicISjLLwPbBVXOH {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #EAECEF;
  background-color: var(--Surface-White, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ekp5AicISjLLwPbBVXOH.iiQ4iIZkASbqMuygYrwc {
  border-color: #c77d0b;
  background-color: #fdedd6;
}

.pN9RyKcbAO6tW_LofnOM {
  width: 16px;
  height: 16px;
}

.NOilxbDC5GM7v2A_VxyV {
  width: 16px;
  height: 16px;
  color: #c77d0b;
}

.UrTCoaaxsA0W85xIsMc7 {
  display: none;
}

@media (min-width: 1025px) {
  .VRDyIIx6QoFnvmRwiPlb {
    gap: 12px;
    padding: 8px 32px 12px;
    overflow-x: visible;
  }

  .H92ZF0lGLzWcpfxu8OD6 {
    height: 42px;
    gap: 8px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(37, 43, 55, 0.12);
  }

  .DiDrRVLVG1KLp0iIBvt4 {
    height: 18px;
    width: 18px;
  }

  .iu32SI6tHkNF0aTPcknH {
    margin-left: 2px;
  }

  .ekp5AicISjLLwPbBVXOH {
    height: 42px;
    gap: 8px;
    padding: 0 14px;
    border-radius: 12px;
    border-color: #d7dce3;
    box-shadow: 0 8px 20px rgba(23, 23, 23, 0.05);
  }

  .ekp5AicISjLLwPbBVXOH:hover {
    border-color: #cfd5dd;
    background-color: #fafafa;
  }

  .ekp5AicISjLLwPbBVXOH.iiQ4iIZkASbqMuygYrwc {
    border-color: #e2a03a;
    background-color: #fff3df;
    box-shadow: 0 10px 24px rgba(199, 125, 11, 0.12);
  }

  .pN9RyKcbAO6tW_LofnOM {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .UrTCoaaxsA0W85xIsMc7 {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #3d434d;
    white-space: nowrap;
  }

  .ekp5AicISjLLwPbBVXOH.iiQ4iIZkASbqMuygYrwc .UrTCoaaxsA0W85xIsMc7 {
    color: #8b5b08;
  }

  .NOilxbDC5GM7v2A_VxyV {
    width: 14px;
    height: 14px;
  }
}

.NZ6sRyQwjGSbLJuUcRgn {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.qjHdxti1qpGHtf2CDGm3 {
  position: relative;
  background-color: #ffffff;
  padding: 12px 16px 0;
  border-bottom: 1px solid #e6e6e6;
}

.gBrJ0Pna9MeB6YKH4ijU {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.tA1z7MwMwrhtC6llQ1Fw {
  height: 4px;
  width: 40px;
  border-radius: 9999px;
  background-color: #e6e6e6;
}

.wNuboybnNbRm9IZK3bpZ {
  display: flex;
  justify-content: flex-start;
  padding: 0 8px 8px;
}

.TmPa7tvdxPdMu7RAoq2c {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
}

.h02yg0YzBnW90oBe3Blq {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
}

.BPYvUILyw97ixceM7YjH {
  display: flex;
  flex-direction: column;
  position: relative;
}

.W6N0WdrjiKrjHhYe9fML {
  border-bottom: 1px solid #eaecef;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.gIuUQKaoMOl1wejry5OM {
  pointer-events: none;
}

.ObvJWif_nKxSNl9lxtnj {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
  z-index: 10;
}

.vPlLTDdA3dF50lJ7j3bq {
  display: flex;
  height: 40px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.lVIfzKlDAHCqtVIPH3y_ {
  cursor: not-allowed;
}

.gPK8ksH7FHfFD0Pmgm_U {
  font-size: 16px;
  font-weight: 500;
  color: #181d27;
}

.Ac4uTblNiL0gzbwMNZai {
  height: 20px;
  width: 20px;
  color: #798097;
  transition: transform 0.2s ease;
}

.Lr8FCru12qzTwLRxd3_s {
  transform: rotate(180deg);
}

.x7eXNcXLRxkhwwPzDrbD {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.AMa5gtnBYKZt6XcrZ4PU {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
}

.ueBRu9ZfqD88jsETwKjW {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 1;
  text-align: left;
}

.vGQwwYtXuzfY3y8O2unj {
  font-size: 16px;
  font-weight: 500;
  color: #535862;
}

.M1PnkmXHlCLPC_VVd5RO {
  height: 16px;
  width: 16px;
  object-fit: contain;
}

.vaMslVsxp0ykmCFqME6W {
  flex-shrink: 0;
  border-top: 1px solid #e9eaeb;
  background-color: #ffffff;
  padding: 16px;
}

.BxoQGichHMPu1arNxhxt {
  display: flex;
  align-items: center;
  gap: 12px;
}

.KLcp8uqjz1IqK8vNGGhS,
.MOVjdGvMxsyzLExY9koC {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.KLcp8uqjz1IqK8vNGGhS {
  border: 1px solid #e90000;
  color: #e90000;
  background: white;
}

.MOVjdGvMxsyzLExY9koC {
  background-color: var(--wb-button-button-bg-color, #af5e00);
  color: var(--wb-button-button-text-color, #ffffff);
  border: 1px solid
    var(
      --wb-button-button-border-color,
      var(--wb-button-button-bg-color, #af5e00)
    );
  border-radius: var(--wb-button-button-border-radius, 8px);
}

.r8kkzm0W8YRNuKp1H7FN {
  opacity: 0.3;
  cursor: not-allowed;
}

.i_hMWoerVCViVKFsIEux {
  height: 20px;
  width: 20px;
}

/* ─── Root ──────────────────────────────────────────────────────────────────── */
.C13wOULD9Ow1M81LscCt {
  position: relative;
  background-color: var(--wb-footer-footer-bg-color, #111111);
  color: var(--wb-footer-footer-secondary-text-color, #9ca3af);
  padding: 64px 0 160px;
  width: 100%;
  overflow: hidden;
}

/* Decorative radial glow */
.wiWvlPI5mNHso9fTMV2b {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(
    ellipse at center,
    rgba(175, 94, 0, 0.13) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* ─── Container ─────────────────────────────────────────────────────────────── */
.xg5knwBNc238Bg74gYbr {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Top Grid ──────────────────────────────────────────────────────────────── */
.HT1iR6C6BdPR3uztJA9G {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .HT1iR6C6BdPR3uztJA9G {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
}

/* ─── Brand Column ──────────────────────────────────────────────────────────── */
.sE1mp4r6wRNsLELS9d7r {
  flex: 1 1 42%;
  padding-right: 0;
}

@media (min-width: 768px) {
  .sE1mp4r6wRNsLELS9d7r {
    padding-right: 44px;
  }
}

.w_fbsNyAByRqWqMhZcHf {
  margin-bottom: 16px;
}

.RaznXiHBGb3vycwEgakA {
  height: 52px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}

.bqpHV8yoFRz3rhUZlTds {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wb-footer-footer-primary-text-color, #ffffff);
  margin: 0 0 12px 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.KG1FPquFxI4vAReXA8ML {
  font-size: 0.875rem;
  line-height: 1.75;
  font-weight: 300;
  max-width: 38ch;
  margin: 0 0 28px 0;
  color: var(--wb-footer-footer-secondary-text-color, #9ca3af);
}

/* ── Social icons ── */
.QaKCpi5c6_JDgwN7ABXp {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.MvjQFe7_S2Rsdc5edXJ8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wb-footer-footer-top-border-color, #2a2a2a);
  color: var(--wb-footer-footer-secondary-text-color, #9ca3af);
  background: transparent;
  text-decoration: none;
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  flex-shrink: 0;
}

.MvjQFe7_S2Rsdc5edXJ8:hover {
  color: var(--wb-button-button-bg-color, #AF5E00);
  border-color: var(--wb-button-button-bg-color, #AF5E00);
  background: rgba(175, 94, 0, 0.08);
  box-shadow: 0 0 0 4px rgba(175, 94, 0, 0.1);
}

.MvjQFe7_S2Rsdc5edXJ8 svg {
  width: 18px;
  height: 18px;
}

/* ─── FSSAI ─────────────────────────────────────────────────────────────────── */
._JA1fVZaUo0GH7hrQhX7 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--wb-footer-footer-top-border-color, #2a2a2a);
  border-radius: 10px;
  width: fit-content;
}

.kb9O6kxHuDNyzM1sjDD4 {
  width: 48px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(1.1);
}

.phIDEV5afZWZ3ekRKDz5 {
  font-size: 11px;
  font-weight: 500;
  color: var(--wb-footer-footer-secondary-text-color, #9ca3af);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ─── Vertical Divider ──────────────────────────────────────────────────────── */
.Y70OitGxDZfET7SuBEUW {
  display: none;
}

@media (min-width: 768px) {
  .Y70OitGxDZfET7SuBEUW {
    display: block;
    width: 1px;
    align-self: stretch;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--wb-footer-footer-top-border-color, #2a2a2a) 20%,
      var(--wb-footer-footer-top-border-color, #2a2a2a) 80%,
      transparent 100%
    );
    flex-shrink: 0;
    margin: 0;
  }
}

/* ─── Quick Links Column ────────────────────────────────────────────────────── */
.t7w9tOFWe6ILqxqdIjA9 {
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .t7w9tOFWe6ILqxqdIjA9 {
    padding-left: 44px;
    padding-right: 44px;
    min-width: 160px;
  }
}

.RcSwbs5TRTa1F9smlrre {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.L2yAiOLAEJWQo8qX7pRQ {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wb-footer-footer-secondary-text-color, #9ca3af);
  text-align: left;
  transition: color 0.18s;
  line-height: 1.4;
}

.L2yAiOLAEJWQo8qX7pRQ:hover {
  color: var(--wb-footer-footer-primary-text-color, #ffffff);
}

.Mrdsbm2w5mlj4KnMGAJ5 {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wb-button-button-bg-color, #AF5E00);
  flex-shrink: 0;
  opacity: 0.7;
}

/* ─── Contact Column ────────────────────────────────────────────────────────── */
.pZvisgV3EWP051oHc83d {
  flex: 1 1 30%;
  padding-left: 0;
}

@media (min-width: 768px) {
  .pZvisgV3EWP051oHc83d {
    padding-left: 44px;
  }
}

.f2qMaZrYqnTpzlJGfRzT {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wb-footer-footer-primary-text-color, #ffffff);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 28px 0;
}

.jKy82TffqyAcKA6sENfg {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--wb-button-button-bg-color, #AF5E00);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Contact list ── */
.BJZaim7BrALQ3Gv5IRQy {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.BJZaim7BrALQ3Gv5IRQy li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kwZWQ8QxDwtSOYkbMzql {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--wb-footer-footer-top-border-color, #2a2a2a);
  color: var(--wb-button-button-bg-color, #AF5E00);
  flex-shrink: 0;
}

.kwZWQ8QxDwtSOYkbMzql svg {
  width: 16px;
  height: 16px;
}

.nymQtfjmBBSPCA64LPxt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.NnSWgqf_GhDW78V50unw {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wb-footer-footer-secondary-text-color, #6b7280);
  opacity: 0.75;
}

.FHFbCkM8_YF11lrEjUhu {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wb-footer-footer-secondary-text-color, #d1d5db);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s;
}

.BJZaim7BrALQ3Gv5IRQy a.FHFbCkM8_YF11lrEjUhu:hover {
  color: var(--wb-footer-footer-primary-text-color, #ffffff);
}

.OBZTPdQ55ZP0Sq5Su9YG .nymQtfjmBBSPCA64LPxt {
  padding-top: 2px;
}

/* ─── Horizontal Divider ────────────────────────────────────────────────────── */
.olCcpH5s_ro8kI9xOhTp {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--wb-footer-footer-top-border-color, #2a2a2a) 20%,
    var(--wb-footer-footer-top-border-color, #2a2a2a) 80%,
    transparent 100%
  );
  margin-bottom: 28px;
}

/* ─── Bottom Bar ────────────────────────────────────────────────────────────── */
.uWOqKa6BkTEDIpxshgEj {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.EJhWIGlRXZSb_h8kyQwi {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--wb-footer-footer-secondary-text-color, #6b7280);
  margin: 0;
}

.kpo6m9PGLu5LyDWzQL39 {
  color: var(--wb-footer-footer-secondary-text-color, #9ca3af);
  font-weight: 500;
}

.iOCegLWS0e8klwW0U9YQ {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--wb-footer-footer-secondary-text-color, #6b7280);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.UKtwdZud_9C2znSXRemS {
  color: #ef4444;
  font-size: 0.9rem;
}

.aKignjV2fHR5Tlhi6cG7 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wb-footer-footer-secondary-text-color, #6b7280);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.18s;
}

.aKignjV2fHR5Tlhi6cG7:hover {
  opacity: 0.8;
}

.fEY2CbhpaaSyq5_IZRkw {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}

.ii5JCzkk5_ibGzvmKhg0 {
  font-weight: 700;
  color: var(--wb-footer-footer-primary-text-color, #ffffff);
}

/* ─── Mobile Quick Links icon grid ─────────────────────────────────────────── */
.vzbnZY4TixXrpNGHUozi {
  display: none; /* hidden on desktop */
}

.saIB4jGailXLMWjgAG2i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 14px 8px 10px;
  cursor: pointer;
  color: var(--wb-footer-footer-secondary-text-color, #9ca3af);
  transition: background 0.18s, border-color 0.18s;
  width: 100%;
  text-align: center;
}

.saIB4jGailXLMWjgAG2i:hover,
.saIB4jGailXLMWjgAG2i:active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.XUHh7pcF8_ESG1SxMM2d {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--wb-button-button-bg-color, #AF5E00);
  flex-shrink: 0;
}

.p52nCuDxC3aAyufn3afy {
  width: 20px;
  height: 20px;
  color: #ffffff;
  stroke-width: 1.8;
}

.llGLzopAMxywbG9KrFLL {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

/* On mobile: show grid, hide text list */
@media (max-width: 767px) {
  .vzbnZY4TixXrpNGHUozi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .RcSwbs5TRTa1F9smlrre {
    display: none;
  }
}

/* ─── Mobile safe-area ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .C13wOULD9Ow1M81LscCt {
    padding-bottom: calc(160px + max(0px, env(safe-area-inset-bottom)));
  }
}

@media (max-width: 599px) {
  .C13wOULD9Ow1M81LscCt {
    padding: 48px 0 140px;
  }
  .xg5knwBNc238Bg74gYbr {
    padding: 0 20px;
  }
}

.BQAgsB9COoaUH4KdLZ4n {
  display: flex;
  flex-direction: column;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  background-color: var(--Surface-White, #ffffff);
  /* border-top-left-radius: 16px;
  border-top-right-radius: 16px; */
}

.MELe2Q5cGfS3H_6gokMg {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-Primary-1, #171717);
  margin: 0 0 16px 0;
}

/* Row containing the Delivery & Takeaway buttons */
.oQdn5cZyPedp94iGiSqz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.GlLCdHNbqoxBPWTVmJm0 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: transparent;
}

/* Active State */
.aEzplgoqV9RIiLiVpaM_ {
  border: 1px solid #f9c588;
  background-color: #fdf4e9;
  color: var(--orange-n-1, #d98523);
}

/* Inactive State */
.MjiY1o96pC7xFx5VOSQp {
  border: 1px solid var(--gray-200, #e9eaec);
  background-color: var(--Surface-White, #ffffff);
  color: var(--gray-500, #717680);
}

.Dqs9YzJmZKLgqeVv_cbz {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.ZLnvJqWysxduvRKMTt52 {
  width: 100%;
}

.JxBVdkSWR24DPoGBX8Hw {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding-top: 1rem;
}

.qr-circular-categories-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 4px 16px;
  scrollbar-width: none;
}

.qr-circular-categories-container::-webkit-scrollbar {
  display: none;
}

.qr-circular-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.qr-circular-category-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qr-category-icon-selected {
  border-color: #2e7d32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.qr-category-selected {
  transform: scale(1.05);
}

/* ─── Skeleton shimmer ─── */
.skeleton-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 480px) {
  .qr-circular-category-icon {
    width: 55px;
    height: 55px;
  }
}

/* ─── QR Product Card (text left, image right) ─── */
.qr-product-card {
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
  gap: 12px;
  border-bottom: 1px dashed #e0e0e0;
}

.qr-product-card:last-child {
  border-bottom: none;
}

.qr-product-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qr-product-card-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-product-card-price {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 2px 0 0;
}

.qr-product-card-desc {
  font-size: 13px;
  color: #888;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.qr-product-card-image-wrapper {
  width: 110px;
  flex-shrink: 0;
  position: relative;
}

.qr-product-card-img {
  width: 110px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

/* ─── Detail Drawer Customization (Scoped) ─── */
.qr-detail-drawer .MuiDrawer-paper {
  background-color: #f0fbfd !important;
}

.qr-detail-drawer .drawer-add-btn-1 {
  background-color: #2e7d32 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-size: 16px !important;
  box-shadow: none !important;
  width: 100%;
}

.qr-detail-drawer .addon-button-container {
  padding: 12px 16px !important;
  background-color: #fff !important;
  border-top: 1px solid #e0e0e0;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  position: sticky !important;
  bottom: -16px !important;
  left: 0 !important;
  width: calc(100% + 32px) !important;
  margin: 0 -16px -16px -16px !important;
  box-sizing: border-box !important;
  z-index: 10001;
}

.qr-detail-drawer .customize-product-qty-counter {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 4px 12px;
  background: #fff;
  height: 40px;
  display: flex;
  align-items: center;
}

.qr-detail-drawer .added-qty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qr-detail-drawer .product-quantity {
  font-weight: 600;
  font-size: 16px;
  color: #2e7d32;
}

.qr-detail-drawer .added-qty .MuiSvgIcon-root {
  color: #2e7d32 !important;
}

.qr-detail-drawer .added-qty .MuiCircularProgress-root {
  color: #2e7d32 !important;
}

.qr-detail-drawer .MuiTypography-root {
  color: #1a1a1a !important;
}

.qr-detail-drawer .restro-product-image {
  border-radius: 12px;
  margin-bottom: 12px;
  height: 220px !important;
  object-fit: cover;
}

.qr-detail-drawer .restro-product-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.qr-detail-drawer .restro-product-description {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}

.qr-detail-drawer .customization-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 16px 0 8px;
}

.qr-detail-drawer .restro-product-customization-size {
  background-color: #fff !important;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px !important;
  margin-bottom: 16px;
}

.qr-detail-drawer .MuiRadio-root,
.qr-detail-drawer .MuiCheckbox-root {
  color: #2e7d32 !important;
}
.qr-detail-drawer .Mui-checked {
  color: #2e7d32 !important;
}

.qr-detail-drawer .details-radio-items p:last-child {
  font-weight: 600;
  color: #333;
}

.qr-detail-drawer .add-cooking-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.qr-detail-drawer .MuiTextField-root {
  background-color: #f5f8fa !important;
  border-radius: 8px;
}
.qr-detail-drawer .MuiOutlinedInput-notchedOutline {
  border: none !important;
}

.qr-product-card-placeholder {
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: #bbb;
}

.qr-product-card-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: -16px;
  position: relative;
  z-index: 1;
}

.qr-product-add-btn {
  min-width: 70px !important;
  height: 28px;
  background: #fff !important;
  color: #2e7d32 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  border: 1px solid #2e7d32 !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.qr-product-qty-counter {
  min-width: 70px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  background: #fff;
  border: 1px solid #2e7d32;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.qr-product-qty-icon {
  font-size: 16px !important;
  color: #2e7d32;
  cursor: pointer;
}

.qr-product-qty-text {
  font-size: 13px;
  font-weight: 700;
  min-width: 14px;
  text-align: center;
  color: #2e7d32;
}

@media (max-width: 480px) {
  .qr-product-card-img {
    width: 100px;
    height: 90px;
  }
  .qr-product-card-image-wrapper {
    width: 100px;
  }
}

.qr-category-title-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.qr-category-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.qr-home-container {
  background-color: #f5f5f5;
  padding-bottom: 130px; /* space for bottom nav (64px) + view cart bar (52px) + buffer */
  overflow-y: auto;
  height: 100vh;
}

/* ─── Banner ─── */
.qr-home-banner-wrapper {
  padding: 12px 16px 0;
  background-color: #fff;
}

.qr-banner-slider {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

.qr-banner-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: opacity 0.5s ease;
}

.qr-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
  pointer-events: none;
}

.qr-banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  color: #fff;
}

.qr-banner-restaurant-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.2;
  color: #fff;
}

.qr-banner-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #e0e0e0;
}

.qr-banner-dots {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.qr-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.qr-banner-dot-active {
  background: #fff;
  width: 16px;
}

.qr-banner-fallback {
  background: #2e7d32;
  border-radius: 16px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
}

/* ─── Search Bar ─── */
.qr-home-search-container {
  padding: 12px 16px;
  background-color: #fff;
}

.qr-home-search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  gap: 8px;
}

.qr-search-placeholder {
  font-size: 14px;
  color: #9ca3af;
}

.qr-home-outlet-name {
  margin: 8px 0 0;
  font-size: 13px;
  color: #555;
}
.qr-home-outlet-name span {
  font-weight: 600;
  color: #1a1a1a;
}

/* ─── Categories Section ─── */
.qr-categories-section {
  background-color: #fff;
  padding: 16px 0 12px;
  margin-bottom: 4px;
}

.qr-categories-heading {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px 16px;
}

/* ─── Product List Section ─── */
.qr-home-products-section {
  background-color: #fff;
}

/* ═══════════════════════════════════════════════════
   ACTIVE ORDER BANNER (QR Home top banner)
   ═══════════════════════════════════════════════════ */
.qr-active-order-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: hidden; /* clip the sliding inner content */
  background: #2e7d32;
  color: #fff;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: background-color 0.15s ease;
}
.qr-active-order-banner:active {
  background: #1b5e20;
}

/* Left: icon + token block */
.qr-active-order-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qr-active-order-icon {
  opacity: 0.9;
}
.qr-active-order-token-block {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.qr-active-order-token-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.qr-active-order-token-number {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 2px;
  display: inline-block;
  overflow: hidden;
}

/* Inner flex row — slides as a whole unit on swipe */
.qr-active-order-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Card slide animations */
@keyframes cardSlideInLeft {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes cardSlideOutLeft {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes cardSlideInRight {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes cardSlideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

.qr-card-slide-in-left   { animation: cardSlideInLeft   0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.qr-card-slide-out-left  { animation: cardSlideOutLeft  0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.qr-card-slide-in-right  { animation: cardSlideInRight  0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.qr-card-slide-out-right { animation: cardSlideOutRight 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

/* Right: status text + chevron */
.qr-active-order-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qr-active-order-right-text {
  display: flex;
  flex-direction: column;
  text-align: right;
}
.qr-active-order-status {
  font-size: 13px;
  font-weight: 600;
}
.qr-active-order-tap {
  font-size: 10px;
  opacity: 0.72;
  margin-top: 1px;
}
.qr-active-order-chevron {
  opacity: 0.72;
  flex-shrink: 0;
}

/* Swipe dots — shown when multiple active orders */
.qr-active-order-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 2px;
}
.qr-active-order-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(46, 125, 50, 0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.qr-active-order-dot.active {
  background: #2e7d32;
  width: 18px;
  border-radius: 3px;
}

/* ─── QR Search Page ─── */
.qr-search-page {
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.qr-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.qr-search-back-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
}

.qr-search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 8px 12px;
}

.qr-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
}

.qr-search-input::placeholder {
  color: #9ca3af;
}

.qr-search-clear-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
}

.qr-search-results {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

.qr-search-result-count {
  font-size: 12px;
  color: #999;
  margin: 12px 0 4px;
}

.qr-search-loader {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.qr-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.qr-search-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px;
}

.qr-search-empty-subtitle {
  font-size: 13px;
  color: #999;
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   QR ORDER SUCCESS — Token Page
   ═══════════════════════════════════════════════════ */
.qr-token-page {
  height: 100vh;        /* constrain to viewport — enables scroll on small screens */
  overflow-y: auto;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

/* Green header */
.qr-token-header {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* prevent flex compression when page height is constrained */
  background: linear-gradient(160deg, #2e7d32 0%, #1b5e20 100%);
  padding: 48px 24px 72px;
  text-align: center;
  color: #fff;
}
.qr-token-back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}
.qr-token-back-btn:active {
  background: rgba(255, 255, 255, 0.28);
}
.qr-token-order-id {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  z-index: 1;
  letter-spacing: 0.2px;
}
.qr-token-deco-1 {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.qr-token-deco-2 {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.qr-token-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 6px;
}
.qr-token-number {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  margin: 0 0 10px;
}
.qr-token-customer {
  font-size: 13px;
  opacity: 0.85;
  margin: 0;
}

/* White card overlaps green header */
.qr-token-status-wrap {
  padding: 0 16px;
  margin-top: -48px;
  position: relative;
  z-index: 10;
}
.qr-token-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* Status badge */
.qr-token-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.qr-token-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.qr-token-status-chip.placed {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
}
.qr-token-status-chip.preparing {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}
.qr-token-status-chip.ready {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

/* Progress timeline */
.qr-token-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 24px 20px;
  width: 100%;
  box-sizing: border-box;
}
.qr-token-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.qr-token-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qr-token-step-icon.active {
  background: #dcfce7;
}
.qr-token-step-icon.inactive {
  background: #f3f4f6;
}
.qr-token-step-line {
  flex: 1;
  height: 2px;
  min-width: 32px;
  margin-bottom: 24px;
}
.qr-token-step-line.active {
  background-color: #16a34a;
}
.qr-token-step-line.inactive {
  background-color: #e5e7eb;
}
.qr-token-step-label {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.qr-token-step-label.active {
  color: #16a34a;
}
.qr-token-step-label.inactive {
  color: #9ca3af;
}

/* Items section */
.qr-token-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.qr-token-items-list {
  background: #f9fafb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  max-height: 140px; /* shows ~3 items; rest scrollable */
  overflow-y: auto;
}
.qr-token-item-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
}
.qr-token-item-row + .qr-token-item-row {
  border-top: 1px solid #f0f0f0;
}
.qr-token-item-qty {
  font-size: 13px;
  font-weight: 700;
  color: #2e7d32;
  min-width: 24px;
}
.qr-token-item-name-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qr-token-item-name {
  font-size: 13px;
  color: #1a1a1a;
}
.qr-token-item-addon {
  font-size: 11px;
  color: #666;
}
.qr-token-item-price {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

/* Payment row */
.qr-token-payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding-top: 14px;
}
.qr-token-payment-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
}
.qr-token-payment-amount {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

/* CTA Buttons */
.qr-token-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px 0;
}
.qr-token-home-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  padding: 12px;
  background-color: #fff;
  color: #555;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.qr-token-home-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.qr-token-cancel-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 12px;
  background-color: #fff;
  color: #c62828;
  border: 1.5px solid #ef9a9a;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.qr-token-cancel-btn:active {
  background-color: #ffebee;
}
.qr-token-cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Helper text */
.qr-token-helper {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  padding: 10px 8px 10px;
  margin: 0;
}

.qr-token-invoice-btn {
  width: 100%;
  padding: 13px;
  border: 1.5px solid #2e7d32;
  border-radius: 8px;
  background-color: #fff;
  color: #2e7d32;
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
  cursor: pointer;
}

/* ===== QR PROFILE ===== */
.qr-profile-container {
  height: 100vh;
  background: #f9fafb;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.qr-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #f0f0f0;
}

.qr-profile-back-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1f2937;
}

.qr-profile-header-title {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
}

.qr-profile-content {
  padding-top: 8px;
}

.qr-profile-guest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  margin: 16px;
  border-radius: 18px;
  padding: 28px 22px 24px;
  gap: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
  border: 1px solid #eef3ef;
  text-align: center;
}

.qr-profile-guest-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f5e9 0%, #f5fbf5 100%);
  border: 1px solid #d7e8d8;
}

.qr-profile-guest-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qr-profile-guest-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #1f2937;
}

.qr-profile-guest-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  text-align: center;
}

.qr-profile-login-btn {
  margin-top: 4px;
  min-width: 136px;
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(46, 125, 50, 0.2);
}

.qr-profile-login-btn:active {
  transform: translateY(1px);
}

.qr-profile-user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  margin: 16px 16px 0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  border: 1px solid #eef2f3;
}

.qr-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qr-profile-user-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.qr-profile-user-name {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-profile-user-phone {
  font-size: 13px;
  color: #6b7280;
}

.qr-profile-logged-badge {
  font-size: 11px;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  border-radius: 20px;
  padding: 2px 8px;
  display: inline-block;
  width: fit-content;
  margin-top: 2px;
}

.qr-profile-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 1px;
  margin: 22px 16px 6px;
  text-transform: uppercase;
}

.qr-profile-section-helper {
  margin: 0 16px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.qr-profile-menu-card {
  background: #fff;
  margin: 0 16px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  border: 1px solid #eef2f3;
}

.qr-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-height: 60px;
  cursor: pointer;
}

.qr-profile-menu-item:active {
  background: #f9fafb;
}

.qr-profile-menu-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  flex-shrink: 0;
}

.qr-profile-menu-label {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  flex: 1;
}

.qr-profile-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  margin: 24px 16px 0;
  padding: 13px;
  background: #fff;
  border: 1.5px solid #dc2626;
  border-radius: 12px;
  color: #dc2626;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.qr-profile-logout-btn:active {
  background: #fef2f2;
}

.qr-profile-content-page {
  height: 100vh;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
}

.qr-profile-content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #f0f0f0;
}

.qr-profile-content-back-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1f2937;
}

.qr-profile-content-title {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
}

.qr-profile-content-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.qr-profile-content-card {
  min-height: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.qr-profile-content-loader {
  flex: 1;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-profile-content-state {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.qr-profile-content-html {
  font-size: 14px;
  line-height: 1.75;
  color: #374151;
  overflow-wrap: anywhere;
}

.qr-profile-content-html p {
  margin: 0 0 12px;
}

.qr-profile-content-html ol,
.qr-profile-content-html ul {
  margin: 8px 0 14px;
  padding-left: 20px;
}

.qr-profile-content-html li {
  margin-bottom: 8px;
}

.qr-profile-content-html h1,
.qr-profile-content-html h2,
.qr-profile-content-html h3,
.qr-profile-content-html h4,
.qr-profile-content-html h5,
.qr-profile-content-html h6 {
  margin: 14px 0 10px;
  line-height: 1.35;
  color: #111827;
}

/* ===== QR ORDERS ===== */
.qr-orders-container {
  height: 100vh;
  overflow-y: auto;
  background: #f9fafb;
  padding-bottom: 100px;
}

.qr-orders-header {
  background: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.qr-orders-back-btn {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.qr-orders-title {
  flex: 1;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.qr-orders-count-badge {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
}

.qr-orders-guest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 16px;
  border-radius: 12px;
  padding: 40px 24px;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.qr-orders-guest-text {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

.qr-orders-login-btn {
  margin-top: 8px;
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.qr-orders-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

@keyframes qr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.qr-orders-spinner {
  animation: qr-spin 1s linear infinite;
}

.qr-orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

.qr-orders-empty-icon {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-bottom: 8px;
}

.qr-orders-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.qr-orders-empty-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 4px 0 0;
  max-width: 200px;
  line-height: 1.5;
}

.qr-orders-browse-btn {
  margin-top: 12px;
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(46,125,50,0.25);
}

.qr-orders-list {
  padding: 16px;
}

.qr-orders-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #f3f4f6;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.qr-orders-card:active {
  transform: scale(0.99);
}

.qr-orders-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.qr-orders-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qr-orders-status-icon.placed {
  background: #e8f5e9;
  color: #2e7d32;
}

.qr-orders-status-icon.preparing {
  background: #fffbeb;
  color: #92400e;
}

.qr-orders-status-icon.ready {
  background: #dcfce7;
  color: #166534;
}

.qr-orders-status-icon.cancelled {
  background: #fef2f2;
  color: #dc2626;
}

.qr-orders-token-label {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.qr-orders-status-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
}

.qr-orders-status-chip.placed {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
}

.qr-orders-status-chip.preparing {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}

.qr-orders-status-chip.ready {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.qr-orders-status-chip.cancelled {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

.qr-orders-date {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 3px;
}

.qr-orders-info-box {
  background: rgba(46,125,50,0.04);
  border: 1px solid rgba(46,125,50,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qr-orders-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.qr-orders-item-qty {
  color: #2e7d32;
  font-weight: 600;
  min-width: 24px;
  flex-shrink: 0;
}

.qr-orders-item-name {
  flex: 1;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-orders-item-price {
  color: #111827;
  font-weight: 500;
  flex-shrink: 0;
}

.qr-orders-sub-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.qr-orders-sub-tag.dine-in {
  background: #eff6ff;
  color: #1d4ed8;
}

.qr-orders-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.qr-orders-pay-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qr-orders-total {
  font-size: 17px;
  font-weight: 700;
  color: #2e7d32;
}

/* ── Page shell ─────────────────────────────────────────────────── */
.y71XMqh1MSHVlGHGo1ug {
  display: flex;
  flex-direction: row;
  height: 100dvh;
  width: 100%;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   LEFT BRAND PANEL
══════════════════════════════════════════════════════════════════ */
.Pp_ThanrMCnMyvtGB8zj {
  position: relative;
  width: 42%;
  flex-shrink: 0;
  background: linear-gradient(155deg, #E17100 0%, #7A3500 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 44px;
  overflow: hidden;
  color: #FFFFFF;
}

.FVB0vKEQ9j7cTNubcaZU {
  position: relative;
  z-index: 2;
}

.NwHK1apmZ2n1az8mV9LH {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}

.MTdYoOZA7B8u9ZAZbsWG {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.MRRN1fFmaiX7mtVEvl_J {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.mxLEqFw6xvyenycki5WR {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0;
  max-width: 300px;
}

/* Decorative circles */
.l95eqVuaOehFBKuAWdyu {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.KyX1dZ6UEaWTNBD0avDI {
  position: absolute;
  bottom: 120px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.D7MdslWCBLgocsX9CnlO {
  position: absolute;
  top: 140px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   RIGHT FORM PANEL
══════════════════════════════════════════════════════════════════ */
.l9on0h_wRonlfTiF4swn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
  background: #FFFFFF;
  overflow-y: auto;
}

.nWXh7xgksgFvUZ__HLNc {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #EBEBEB;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.nWXh7xgksgFvUZ__HLNc:hover {
  background: #F0F0F0;
  border-color: #D8D8D8;
}

.ZYeq5t82A8jFjwIqEeAG {
  width: 100%;
  max-width: 400px;
}

.srksjLRbHB86mTrjT9fO {
  font-size: 28px;
  font-weight: 900;
  color: #1C1C1C;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.AlNF7IHVzZQ1AI4FeNiA {
  font-size: 14px;
  color: #888;
  margin: 0 0 32px;
  line-height: 1.5;
}

/* ── Field ───────────────────────────────────────────────────────── */
.WUGJ5Z1XH4kVeczLb0xv {
  margin-bottom: 20px;
}

.ff_5Iowpdd3L9P55ynO1 {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #AAAAAA;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 10px;
}

/* ── Phone row ───────────────────────────────────────────────────── */
.atR05r7EYViIWI4wvsnY {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #E8E8E8;
  border-radius: 14px;
  overflow: visible;
  background: #FAFAFA;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}

.atR05r7EYViIWI4wvsnY:focus-within {
  border-color: #E17100;
  box-shadow: 0 0 0 3.5px rgba(225, 113, 0, 0.1);
  background: #FFFFFF;
}

/* ── Country dropdown ────────────────────────────────────────────── */
.POILYgu6g9ncoEJsxZZV {
  position: relative;
  flex-shrink: 0;
  z-index: 10;
}

.wAC2hdZYmtcUngFmEgR5 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 14px;
  height: 54px;
  background: transparent;
  border: none;
  border-right: 1.5px solid #E8E8E8;
  cursor: pointer;
  border-radius: 12px 0 0 12px;
  transition: background 0.15s;
  white-space: nowrap;
}

.wAC2hdZYmtcUngFmEgR5:hover {
  background: rgba(0, 0, 0, 0.03);
}

.cku4Gk6NR8cEG6A1Qwzc {
  font-size: 18px;
  line-height: 1;
}

.cev3sD7M9tiA3B9CmCkO {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1C;
  min-width: 34px;
}

/* Dropdown panel */
.IKid0Gv_6IWiTSlkStAQ {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: #FFFFFF;
  border: 1.5px solid #E8E8E8;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 200;
  overflow: hidden;
}

.NoyB8ApcfZbkEnTC6exp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #F0F0F0;
}

.hyjMkZO1xPUPy7rwwOtY {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  color: #1C1C1C;
  background: transparent;
}

.hyjMkZO1xPUPy7rwwOtY::placeholder {
  color: #BBBBBB;
}

.RLB70iCPorK36US_tFwp {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E0E0E0 transparent;
}

.RLB70iCPorK36US_tFwp::-webkit-scrollbar {
  width: 4px;
}

.RLB70iCPorK36US_tFwp::-webkit-scrollbar-thumb {
  background: #E0E0E0;
  border-radius: 4px;
}

.CgsEdG3aOezZ84hnHzPT {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s;
}

.CgsEdG3aOezZ84hnHzPT:hover {
  background: #FFF6EE;
}

.isvrm2IwtRjnsMB27cFO {
  background: #FFF6EE;
}

.ZuKXCdtNe38YMDihzN3k {
  font-size: 16px;
  flex-shrink: 0;
}

.UOO2yEVOssf_wVZMqKJ9 {
  flex: 1;
  font-size: 13px;
  color: #1C1C1C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.IByziuz9llAcOw3Mw0hg {
  font-size: 12px;
  color: #AAAAAA;
  font-weight: 600;
  flex-shrink: 0;
}

.RBw50wT8KH4j48NhnQlH {
  padding: 16px 14px;
  font-size: 13px;
  color: #AAAAAA;
  text-align: center;
}

/* ── Phone input ─────────────────────────────────────────────────── */
.QG0UVh1dBBqFk6brZD4x {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 16px;
  height: 54px;
  font-size: 16px;
  font-weight: 600;
  color: #1C1C1C;
  outline: none;
  letter-spacing: 0.04em;
  min-width: 0;
}

.QG0UVh1dBBqFk6brZD4x::placeholder {
  color: #C8C8C8;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 14px;
}

/* ── Send OTP button ─────────────────────────────────────────────── */
.K8oJxQSqAjhDw_GKKpmD {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  background: #E17100;
  letter-spacing: -0.01em;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  box-shadow: 0 4px 20px rgba(225, 113, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.K8oJxQSqAjhDw_GKKpmD:not(:disabled):hover {
  background: #C96500;
}

.K8oJxQSqAjhDw_GKKpmD:not(:disabled):active {
  transform: scale(0.98);
}

.K8oJxQSqAjhDw_GKKpmD:disabled {
  background: #E8E8E8;
  box-shadow: none;
  cursor: not-allowed;
  color: #BBBBBB;
}

.ND8MCPLYBQ36k8tN0yU7 {
  font-size: 17px;
  line-height: 1;
}

/* ── Divider ─────────────────────────────────────────────────────── */
.r6KpkUunPtE9kuaog9_X {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.z8V2j4DeTCz7fEctmCUR {
  flex: 1;
  height: 1px;
  background: #EEEEEE;
}

.cUEX1GtnpDQXG5sWtMc1 {
  font-size: 12px;
  color: #CCCCCC;
  font-weight: 500;
}

/* ── Guest button ────────────────────────────────────────────────── */
.cGE0aLqILPgcnfzgWxn2 {
  width: 100%;
  height: 50px;
  border: 1.5px solid #E8E8E8;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #555555;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 24px;
}

.cGE0aLqILPgcnfzgWxn2:hover {
  background: #FAFAFA;
  border-color: #D8D8D8;
}

/* ── Terms ───────────────────────────────────────────────────────── */
.QLTr20bPOc1XcSHidA22 {
  font-size: 11.5px;
  color: #BBBBBB;
  text-align: center;
  line-height: 1.7;
  margin: 0;
}

.QLTr20bPOc1XcSHidA22 span {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  color: #999;
  transition: color 0.15s;
}

.QLTr20bPOc1XcSHidA22 span:hover {
  color: #E17100;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE  (<= 768px): stack vertically
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .y71XMqh1MSHVlGHGo1ug {
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .Pp_ThanrMCnMyvtGB8zj {
    width: 100%;
    min-height: 120px;
    padding: 20px 24px 24px;
    justify-content: flex-end;
    clip-path: ellipse(120% 100% at 50% 0%);
  }

  .MRRN1fFmaiX7mtVEvl_J {
    font-size: 24px;
  }

  .mxLEqFw6xvyenycki5WR {
    font-size: 13px;
    max-width: 100%;
  }

  .l9on0h_wRonlfTiF4swn {
    flex: 1;
    padding: 20px 20px 16px;
    align-items: flex-start;
    overflow-y: auto;
  }

  .ZYeq5t82A8jFjwIqEeAG {
    max-width: 100%;
  }

  .srksjLRbHB86mTrjT9fO {
    font-size: 22px;
  }

  .AlNF7IHVzZQ1AI4FeNiA {
    margin: 0 0 20px;
  }

  .K8oJxQSqAjhDw_GKKpmD {
    margin-bottom: 14px;
  }

  .r6KpkUunPtE9kuaog9_X {
    margin-bottom: 14px;
  }

  .cGE0aLqILPgcnfzgWxn2 {
    margin-bottom: 14px;
  }

  .IKid0Gv_6IWiTSlkStAQ {
    width: 260px;
  }
}

.QE87l4G8gh8SVHCeLOuL {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #F0EDE9;
}

.DuIQVXJXIiFW4bDNBnuK {
  width: 20px;
  height: 20px;
  color: #E17100;
}

.inPoQhAuevxtBUykhp5w {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ── Scrollable body ── */
.YEfsJul0pI97j8Yfl_eR {
  padding: 16px 16px 100px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: none;
}
.YEfsJul0pI97j8Yfl_eR::-webkit-scrollbar { display: none; }

.CvrFF5m1vTH8TPKQEIpu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 200px;
}

.Hh9Bh1sNluwVmXT799im {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  padding: 40px 24px;
}
.tHh2HDMmIHTfWc4gUjX0 {
  width: 48px;
  height: 48px;
  color: #D4C9BC;
}
.v_i_Zb3_jGJ1aPRFL5kK {
  font-size: 14px;
  color: #9E978F;
  text-align: center;
  margin: 0;
}

/* ── Balance card ── */
.OGtnPZoiSz7cGMSqpm8P {
  position: relative;
  background: linear-gradient(135deg, #1C1C1C 0%, #2E2015 60%, #3A2510 100%);
  border-radius: 18px;
  padding: 20px 20px 18px;
  overflow: hidden;
}
.HxF0Tq6h6H1Qp6oZHMSe {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 113, 0, 0.3) 0%, transparent 70%);
  top: -60px;
  right: -40px;
  pointer-events: none;
}
.NAL3zjaYMLiQtm78qJZG {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.b5ERQRLPPiqgTK69nups {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.VNJw7BiUnL5lewPzqPoc {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1;
}
.Gx96itqPd9RUfcqUluCB {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
}
.pIbIBF25AMdMT84YjmoG {
  text-align: right;
}
.UfwEEGHcH5gjsyI4EOce {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin: 0 0 2px;
}
.rW5IA_q09YYfRgUHGtMX {
  font-size: 20px;
  font-weight: 700;
  color: #F5C97A;
  margin: 0;
}

/* ── Applied banner ── */
.uBuObT6dTDQ8LTvgZMst {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF3E8;
  border: 1.5px solid #E17100;
  border-radius: 14px;
  padding: 14px 16px;
}
.Ubr1WpFfmPRXXM_qgErP {
  width: 24px;
  height: 24px;
  color: #E17100;
  flex-shrink: 0;
}
.pMHxx4KSykTREdKIeuwX {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 2px;
}
.FIg9MTfcTovjbkl6qjwy {
  font-size: 12px;
  color: #E17100;
  margin: 0;
}

/* ── Redeem section ── */
.u9GUs1Iz9KzsyUmLp9AX {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.IgvVzmq23uhZQ1oENqO8 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.RWWo9TegznV5bzzY64JP {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
}
.EHNAM_Lrr6y8qeDPRhSV {
  font-size: 12px;
  color: #9E978F;
  margin: 0;
}

/* ── Quick select buttons ── */
.a8exJET3SC5zDHKTOOAS {
  display: flex;
  gap: 8px;
}
.UzDp1Dnlw5ln4CQYuW_0 {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1.5px solid #EDE9E3;
  background: #fff;
  color: #6B6560;
  transition: all 0.15s;
}
.UzDp1Dnlw5ln4CQYuW_0:hover:not(:disabled) {
  border-color: #E17100;
  color: #E17100;
}
.mGdBOUautEFs4TADAUMd {
  background: #E17100;
  border-color: #E17100;
  color: #fff;
}
.UzDp1Dnlw5ln4CQYuW_0:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Progress bar ── */
.D8VqbwmVGDEumreH2PiB {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.XvHvNC9D35fCElIZM9_2 {
  height: 6px;
  background: #F0EDE9;
  border-radius: 100px;
  overflow: hidden;
}
.i4nwV709PgpUWdBFV7Pa {
  height: 100%;
  background: linear-gradient(90deg, #F5C97A 0%, #E17100 100%);
  border-radius: 100px;
  min-width: 0;
}
.vZ6AKZYZ26ZrBwvfvnrx {
  font-size: 12px;
  color: #9E978F;
  margin: 0;
  text-align: right;
}

/* ── Custom input ── */
.BcuuNtwJeYJna7nwbq46 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.KC7Z3V_U9uf9ZoiKuXDO {
  font-size: 13px;
  color: #6B6560;
}
.FKXGGBdnj3fQIxo0aO9Q {
  width: 110px;
  height: 38px;
  border: 1.5px solid #E8E4DF;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1C1C1C;
  background: #fff;
  outline: none;
  font-family: inherit;
  text-align: right;
  transition: border-color 0.18s;
}
.FKXGGBdnj3fQIxo0aO9Q:focus { border-color: #E17100; }

/* ── Savings preview ── */
.d6wpc5WasgUmPkF3uJAW {
  background: #F5F3F0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #6B6560;
  text-align: center;
}
.d6wpc5WasgUmPkF3uJAW strong {
  color: #1C1C1C;
  font-size: 15px;
}

.HTnGs6SPI7eUsg17dqDJ {
  font-size: 12px;
  font-weight: 500;
  color: #d9534f;
  background: #fdf0f0;
  padding: 10px 12px;
  border-radius: 10px;
}

/* ── Footer ── */
.RnLMpKYwYJPM8WZHmQkh {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px 24px;
  background: #fff;
  border-top: 1px solid #F0EDE9;
}

.t5GuCelbv6aHG4RYdv0Y,
.lwt4nTmw7S9oAj69qraK {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.18s;
}
.t5GuCelbv6aHG4RYdv0Y {
  background: linear-gradient(135deg, #E17100 0%, #AF5E00 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(225, 113, 0, 0.3);
}
.lwt4nTmw7S9oAj69qraK {
  background: #FDF0F0;
  color: #d9534f;
  border: 1.5px solid #f5c6c6;
}
.t5GuCelbv6aHG4RYdv0Y:disabled,
.lwt4nTmw7S9oAj69qraK:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.R1quZ30y_Q6uKISDl8lR {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

/* ══════════════════════════════════════════════════════════
   ORDER DETAILS — premium card-based layout
   Brand: amber #E17100 / #AF5E00  ·  near-black #1C1C1C
   Warm page bg: #F5F3F0
══════════════════════════════════════════════════════════ */

/* ── Page roots ─────────────────────────────────────── */
.od-standalone {
  background: #F5F3F0;
  min-height: 100vh;
}

.od-track-root {
  background: #F5F3F0;
}

.od-bare {
  background: transparent;
}

/* ── Sticky page header (standalone /order-details page) ── */
.od-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.od-back-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #1C1C1C;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-left: -4px;
}
.od-back-btn:hover { background: #F0F0F0; }

.od-back-icon {
  width: 22px;
  height: 22px;
  color: #1C1C1C;
}

.od-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.od-header-title {
  font-size: 16px;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.od-header-sub {
  font-size: 11.5px;
  color: #AAAAAA;
  font-weight: 500;
}

/* ── Content wrapper ────────────────────────────────── */
.od-page-content {
  padding: 12px 12px 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.od-bare-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Card — universal building block ────────────────── */
.od-card {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}

.od-card-cancelled {
  background: #FFFAF7;
}

/* Section label above each card's content */
.od-card-label {
  padding: 14px 16px 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #BBBBBB;
}

.od-label-warning {
  color: #E17100;
}

/* Generic padded card body */
.od-card-body {
  padding: 10px 16px 16px;
}

/* ── Items list ─────────────────────────────────────── */
.od-items-list {
  padding: 4px 0 0;
}

/* Override cart-item-card inside order details */
.od-items-list .cart-item-card {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #F3F1EE;
}

/* Last item — remove divider */
.od-items-list .MuiBox-root:last-child .cart-item-card {
  border-bottom: none;
}

.od-items-list .cart-item-image {
  width: 52px !important;
  height: 52px !important;
  border-radius: 8px !important;
  flex-shrink: 0;
  overflow: hidden;
}

.od-items-list .cart-img {
  border-radius: 8px !important;
}

/* Faint strikethrough tint for cancelled items */
.od-items-cancelled .cart-item-card {
  opacity: 0.65;
}

/* ── Info table (Order Info card) ───────────────────── */
.od-info-table {
  padding-top: 8px;
}

.od-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #F5F3F0;
}

.od-info-row-last {
  border-bottom: none;
}

.od-info-key {
  font-size: 13px;
  color: #999999;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 8px;
}

.od-info-val {
  font-size: 13px;
  font-weight: 600;
  color: #1C1C1C;
  text-align: right;
}

/* monospace for order ID */
.od-mono {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #444;
}

/* ── Status pill ────────────────────────────────────── */
.od-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ods-pending   { background: #FEF3E2; color: #B45309; }
.ods-confirmed { background: #DBEAFE; color: #1D4ED8; }
.ods-packed    { background: #EDE9FE; color: #6D28D9; }
.ods-transit   { background: #FFF7ED; color: #C2410C; }
.ods-delivered { background: #DCFCE7; color: #166534; }
.ods-cancelled { background: #FEE2E2; color: #991B1B; }
.ods-paid      { background: #DCFCE7; color: #166534; }

/* ── Bill Summary card — strip CartBillDetails wrapper ── */
/* CartBillDetails outer Box: remove duplicate bg, margin, padding */
.od-bill-card > .MuiBox-root {
  margin-top: 0 !important;
  background: transparent !important;
  padding: 6px 16px 16px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hide the "Billing Summary" Heading inside CartBillDetails
   (od-card-label above already shows "Bill Summary") */
.od-bill-card > .MuiBox-root > .MuiTypography-root:first-child,
.od-bill-card > .MuiBox-root > p:first-child,
.od-bill-card > .MuiBox-root > h6:first-child {
  display: none;
}

/* Style the inner billing-rows box */
.od-bill-card > .MuiBox-root > .MuiBox-root {
  background: #F7F5F2 !important;
  border-radius: 10px !important;
}

/* ── Delivery / Pickup slot ─────────────────────────── */
.od-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.od-slot-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FEF3E2;
  flex-shrink: 0;
}

.od-slot-icon {
  width: 20px;
  height: 20px;
  color: #E17100;
}

.od-slot-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.od-slot-headline {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.od-slot-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: #999999;
}

/* ── Address row ────────────────────────────────────── */
.od-address-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.od-pin-icon {
  width: 16px;
  height: 16px;
  color: #E17100;
  flex-shrink: 0;
  margin-top: 2px;
}

.od-address-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #1C1C1C;
  line-height: 1.55;
}

/* ── Invoice button ─────────────────────────────────── */
.od-invoice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #E17100 0%, #AF5E00 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: opacity 0.15s;
  box-shadow: 0 4px 16px rgba(225,113,0,0.25);
  margin-top: 2px;
}
.od-invoice-btn:hover  { opacity: 0.91; }
.od-invoice-btn:active { opacity: 0.82; }

.od-invoice-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Cancel link (injected below invoice button on mobile) ── */
.od-cancel-link {
  text-align: center;
  padding-top: 16px;
}

/* ── Loader ─────────────────────────────────────────── */
.od-loader-wrap {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════
   DESKTOP ≥ 769px
══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  .od-standalone {
    background: #F2F0ED;
  }

  /* Sticky header sits below the 48px GlobalDesktopHeader */
  .od-page-header {
    padding: 16px 24px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    top: 48px;
  }

  .od-header-title { font-size: 17px; }

  /* Center-constrained content */
  .od-page-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 24px 80px;
  }

  /* Slightly larger card insets on desktop */
  .od-card-label {
    padding: 16px 20px 0;
    font-size: 10px;
  }

  .od-card-body {
    padding: 10px 20px 18px;
  }

  .od-info-table {
    padding-top: 6px;
  }

  .od-items-list .cart-item-card {
    padding: 14px 20px !important;
  }

  .od-bill-card > .MuiBox-root {
    padding: 6px 20px 18px !important;
  }

  .od-invoice-btn {
    border-radius: 12px;
    padding: 15px;
  }

  .od-card {
    border-radius: 16px;
  }
}

/* ── Confirmation dialog ──────────────────────────────────────────
   Used for destructive confirmations (cancel order, delete account),
   so the affirmative action carries the danger styling and the
   dismissal is the calm, neutral one. */

/* MUI injects its emotion styles at runtime, after this stylesheet, so every
   property it also sets on .MuiDialog-paper (sizing, margin, radius, surface)
   needs !important to survive — equal specificity otherwise loses on order. */
.hQ2TfBZgl7Ae344MP9_q {
  width: 100%;
  max-width: 360px !important;
  margin: 20px !important;
  padding: 26px 22px 20px;
  box-sizing: border-box;
  border-radius: 22px !important;
  background: var(--wb-card-bg-color, #ffffff) !important;
  text-align: center;
  box-shadow: 0 18px 50px rgba(16, 16, 16, 0.22) !important;
}

/* ── Icon ── */
.VwDWB0mb04NH6vTnsTDw {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fceeeb;
  color: #b4342a;
}

.pYgHIiOg0lT_cO7ZMPpX {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

/* ── Copy ── */
.eeH4kp9t3ceO0B56glvr {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--wb-text-primary-color, #1c1c1c);
}

.Dj9EvFW1JbFU1fIla0lI {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wb-text-secondary-color, #6f6f6f);
  /* Wrap on words, never mid-word — these strings carry order ids */
  overflow-wrap: anywhere;
}

/* ── Actions ── */
.ePSixeUenpdzZVjOxcAI {
  display: flex;
  gap: 10px;
}

._CWeRvvSn7xrIBtYsoDI,
.QClLGspiketR8V0QHMGh {
  flex: 1;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease,
    box-shadow 0.16s ease, transform 0.1s ease;
}

._CWeRvvSn7xrIBtYsoDI:active,
.QClLGspiketR8V0QHMGh:active {
  transform: scale(0.98);
}

._CWeRvvSn7xrIBtYsoDI {
  background: var(--wb-card-bg-color, #ffffff);
  color: var(--wb-text-primary-color, #1c1c1c);
  border: 1.5px solid var(--wb-border-subtle-color, #e4e4e4);
}

._CWeRvvSn7xrIBtYsoDI:hover {
  background: #f6f6f6;
  border-color: #d6d6d6;
}

.QClLGspiketR8V0QHMGh {
  background: #b4342a;
  color: #ffffff;
  border: 1.5px solid #b4342a;
  box-shadow: 0 4px 14px rgba(180, 52, 42, 0.28);
}

.QClLGspiketR8V0QHMGh:hover {
  background: #9d2c23;
  border-color: #9d2c23;
  box-shadow: 0 6px 18px rgba(180, 52, 42, 0.34);
}

._CWeRvvSn7xrIBtYsoDI:focus-visible,
.QClLGspiketR8V0QHMGh:focus-visible {
  outline: 2px solid #b4342a;
  outline-offset: 2px;
}

/* ── Narrow phones: stack so neither label truncates ── */
@media (max-width: 360px) {
  .ePSixeUenpdzZVjOxcAI {
    flex-direction: column-reverse;
  }
}

/* ════════════════════════════════════════
   ORDER TRACK PAGE
   Mobile-first, premium desktop at ≥768 px
   Brand: amber #E17100 / #AF5E00
   Bg:    warm #F5F3F0
   ════════════════════════════════════════ */

/* ── Mobile header wrapper (shown on mobile, hidden on desktop) ── */
.ot-mobile-header {
  display: block;
}

/* ── Page wrapper ── */
.ot-page-wrap {
  background-color: #F5F3F0;
  min-height: 100vh;
  padding-top: 3.5rem; /* clear mobile Menuback */
  overflow-x: hidden;
}

/* ── Stepper card (shared between mobile & desktop) ── */
.ot-stepper-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  padding: 1rem 0.75rem;
  margin: 0.75rem;
}

/* ══════════════════════════════════════════════════
   Beautiful order-status stepper
   (shared design — applies on mobile & desktop)
   ══════════════════════════════════════════════════ */
.MuiStepper-root {
  justify-content: center;
  align-items: flex-start;
}

/* Step circles */
.ot-stepper-card .MuiStepIcon-root {
  width: 30px;
  height: 30px;
  color: #E7E3DD; /* upcoming */
  border-radius: 50%;
  transition: color 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

/* Upcoming number — keep it readable on the light circle */
.ot-stepper-card .MuiStepIcon-root:not(.Mui-active):not(.Mui-completed) .MuiStepIcon-text {
  fill: #A79F94;
  font-weight: 700;
}

/* Active (current) step — brand amber with a gentle pulsing glow */
.ot-stepper-card .MuiStepIcon-root.Mui-active {
  color: #E17100;
  transform: scale(1.14);
  animation: ot-step-pulse 2.2s ease-in-out infinite;
}
.ot-stepper-card .MuiStepIcon-root.Mui-active .MuiStepIcon-text {
  fill: #ffffff;
  font-weight: 700;
}

/* Completed steps — deep amber check with a soft shadow */
.ot-stepper-card .MuiStepIcon-root.Mui-completed {
  color: #AF5E00;
  filter: drop-shadow(0 2px 4px rgba(175, 94, 0, 0.28));
}

/* Connector lines (alternativeLabel layout) */
.ot-stepper-card .MuiStepConnector-root {
  top: 15px;
  left: calc(-50% + 23px);
  right: calc(50% + 23px);
}
.ot-stepper-card .MuiStepConnector-line {
  border: 0;
  height: 3px;
  border-radius: 3px;
  background: #E7E3DD;
  transition: background 0.35s ease;
}
.ot-stepper-card .MuiStepConnector-root.Mui-active .MuiStepConnector-line,
.ot-stepper-card .MuiStepConnector-root.Mui-completed .MuiStepConnector-line {
  background: linear-gradient(90deg, #AF5E00 0%, #E17100 55%, #F59E0B 100%);
}

/* Step labels */
.ot-stepper-card .MuiStepLabel-label {
  margin-top: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #9A938A !important;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.ot-stepper-card .MuiStepLabel-label.Mui-active {
  color: #E17100 !important;
  font-weight: 800 !important;
}
.ot-stepper-card .MuiStepLabel-label.Mui-completed {
  color: #AF5E00 !important;
  font-weight: 700 !important;
}

@keyframes ot-step-pulse {
  0%, 100% {
    filter: drop-shadow(0 3px 6px rgba(225, 113, 0, 0.40));
  }
  50% {
    filter: drop-shadow(0 4px 12px rgba(225, 113, 0, 0.70));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ot-stepper-card .MuiStepIcon-root.Mui-active {
    animation: none;
    filter: drop-shadow(0 3px 6px rgba(225, 113, 0, 0.45));
  }
}

/* ── Cancel section (mobile) — kept for desktop sidebar; hidden on mobile via OrderDetails ── */
.cancel-order-section {
  margin-bottom: 5rem;
  padding: 1rem;
  text-align: center;
}

/* ── Cancel Order — secondary (destructive) button ── */
.cancel-order-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 13px 16px !important;
  background: transparent;
  color: #B4342A !important;
  border: 1.5px solid #EAC9C3;
  border-radius: 14px;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
    box-shadow 0.16s ease;
}
.cancel-order-text::before {
  content: "\2715"; /* ✕ */
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
}
.cancel-order-text:hover {
  background: #FCEEEB;
  border-color: #E0A99F;
  color: #97281F !important;
  box-shadow: 0 2px 10px rgba(180, 52, 42, 0.12);
}
.cancel-order-text:active {
  background: #F9E1DC;
  box-shadow: none;
}

/* ── In-flight: the ✕ becomes a spinner until the cancel API answers ── */
.cancel-order-text.is-cancelling {
  pointer-events: none;
  opacity: 0.7;
}
.cancel-order-text.is-cancelling::before {
  content: "";
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #EAC9C3;
  border-top-color: #B4342A;
  border-radius: 50%;
  animation: cancel-order-spin 0.6s linear infinite;
}
@keyframes cancel-order-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Mobile small devices ── */
@media (max-width: 600px) {
  .ot-page-wrap {
    padding-top: 2.5rem;
  }

  .ot-stepper-card {
    margin: 0.5rem 0.4rem;
    padding: 0.75rem 0.5rem;
    box-shadow: none;
    background: transparent;
  }

  .cancel-order-text {
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════
   DESKTOP PREMIUM LAYOUT (≥768px)
   ══════════════════════════════════════ */
@media (min-width: 768px) {

  /* Hide mobile header */
  .ot-mobile-header {
    display: none;
  }

  /* ── Desktop sub-header (page title row) ── */
  .ot-desktop-subheader {
    background: #ffffff;
    border-bottom: 1px solid #EBEBEB;
    position: sticky;
    top: 48px; /* below HeaderNew (48px tall) */
    z-index: 90;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  }

  .ot-desktop-subheader-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
  }

  .ot-dt-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #1C1C1C;
    flex-shrink: 0;
    transition: background 0.15s;
    margin-left: -4px;
  }
  .ot-dt-back-btn:hover {
    background: #F0F0F0;
  }

  .ot-dt-back-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    color: #1C1C1C;
  }

  .ot-dt-title-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .ot-dt-title {
    font-size: 17px;
    font-weight: 800;
    color: #1C1C1C;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .ot-dt-subtitle {
    font-size: 11.5px;
    color: #AAAAAA;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  /* ── Page wrap: no mobile padding, premium bg ── */
  .ot-page-wrap {
    padding-top: 0;
    background-color: #F5F3F0;
    min-height: calc(100vh - 102px); /* 48px header + 54px sub-header */
  }

  /* ── 2-column grid layout ── */
  .ot-layout-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
  }

  /* ── Left column ── */
  .ot-col-main {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ── Stepper card desktop ── */
  .ot-stepper-card {
    margin: 0 0 20px 0;
    padding: 1.75rem 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    background: #ffffff;
  }

  /* Slightly larger step labels on desktop (colours come from the
     shared stepper design above) */
  .ot-stepper-card .MuiStepLabel-label {
    font-size: 0.85rem !important;
  }

  /* ── Right sidebar ── */
  .ot-col-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 120px; /* 48px header + 54px sub-header + 18px gap */
  }

  /* ── Cancel section (desktop sidebar) ── */
  /* Cancel button stands on its own (the button carries its own styling) */
  .ot-cancel-section {
    margin-top: 12px;
  }
}

/* ── Extra-large screens ── */
@media (min-width: 1280px) {
  .ot-layout-grid {
    grid-template-columns: 1fr 420px;
    padding: 2.5rem 3rem 4rem;
  }
}

/* ── Page shell ─────────────────────────────────────────────────── */
.vvgBksYzgCTe_NuIgNaf {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: #FFFFFF;
  position: relative;
}

/* ══════════════════════════════════════════════════════════════════
   LEFT BRAND PANEL
══════════════════════════════════════════════════════════════════ */
.wUMciPYZDs59iF0XwwSQ {
  position: relative;
  width: 42%;
  flex-shrink: 0;
  background: linear-gradient(155deg, #E17100 0%, #7A3500 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 44px;
  overflow: hidden;
  color: #FFFFFF;
}

.ch3zBLYxfV0ImIhYYB_l {
  position: relative;
  z-index: 2;
}

.v10BBdPb3ZckFyjssU_o {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}

.GsRlrWZ90EX9Uiw_S3Zw {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.IhL17MWKaUs1eQ4YwOel {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.EcSVQsTTPALbMhKU4NTT {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0;
  max-width: 300px;
}

.WrposxmKGBfX8_KCA1Nm {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.TC6S_HaWp_5vp0jfBA0T {
  position: absolute;
  bottom: 120px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.OqFi1fbHeuZzCTq4uTGp {
  position: absolute;
  top: 140px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   RIGHT FORM PANEL
══════════════════════════════════════════════════════════════════ */
.jMXA5_1QgAfebdUP99pV {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: #FFFFFF;
  overflow-y: auto;
}

.QnhwW4rz9LgB7f7S2aWV {
  width: 100%;
  max-width: 400px;
}

/* ── Back button ─────────────────────────────────────────────────── */
.WoxICnamig0OPxw3wiIL {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F5F5F5;
  border: none;
  border-radius: 100px;
  padding: 8px 14px 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  margin-bottom: 32px;
  transition: background 0.15s;
}

.WoxICnamig0OPxw3wiIL:hover {
  background: #EBEBEB;
}

/* ── Headings ────────────────────────────────────────────────────── */
.XqvDxhhn6d1181YaklZk {
  font-size: 28px;
  font-weight: 900;
  color: #1C1C1C;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.Y7cEmFLTh6oMC3SiAnoX {
  font-size: 14px;
  color: #888;
  margin: 0 0 32px;
  line-height: 1.5;
}

.zVfSXoS1PWFKaGwEDcen {
  font-weight: 700;
  color: #1C1C1C;
}

/* ── OTP boxes ───────────────────────────────────────────────────── */
.dAvDWaXHtJfZUvNA7SYA {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 28px;
}

.dAvDWaXHtJfZUvNA7SYA input {
  border: 1.5px solid #E5E5E5 !important;
  border-radius: 12px !important;
  width: 52px !important;
  height: 58px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1C1C1C !important;
  background: #FAFAFA !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.dAvDWaXHtJfZUvNA7SYA input:focus {
  border-color: #E17100 !important;
  box-shadow: 0 0 0 3px rgba(225, 113, 0, 0.12) !important;
  background: #FFFFFF !important;
  outline: none !important;
}

/* ── Resend — centered on all screen sizes ───────────────────────── */
.lUXzE2zPkxdNeYpfhrTt {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.Jwjl1a0Om87PYTeS_WJC {
  margin: 0;
  font-size: 13px;
  color: #AAAAAA;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

._uXybQPQvftcLSHaHCdX {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  white-space: nowrap;
}

.X2ulZHVB14F6U5yKYEAN {
  font-size: 13px;
  color: #BBBBBB;
  font-weight: 500;
}

.IJdd1PHAxf8PQe9acNft {
  background: none;
  border: none;
  color: #E17100;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.IJdd1PHAxf8PQe9acNft:hover {
  color: #AF5E00;
}

/* ── Verify button ───────────────────────────────────────────────── */
.pgPuPGbT3mUNWWHKC8y5 {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  background: #E17100;
  letter-spacing: -0.01em;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  box-shadow: 0 4px 20px rgba(225, 113, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pgPuPGbT3mUNWWHKC8y5:not(:disabled):hover {
  background: #C96500;
}

.pgPuPGbT3mUNWWHKC8y5:not(:disabled):active {
  transform: scale(0.98);
}

.pgPuPGbT3mUNWWHKC8y5:disabled {
  background: #E8E8E8;
  box-shadow: none;
  cursor: not-allowed;
  color: #BBBBBB;
}

.zNsaUjEpUG2P7PVGo8G_ {
  font-size: 17px;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE  (<= 768px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vvgBksYzgCTe_NuIgNaf {
    flex-direction: column;
  }

  .wUMciPYZDs59iF0XwwSQ {
    width: 100%;
    min-height: 200px;
    padding: 64px 24px 40px;
    justify-content: flex-end;
    clip-path: ellipse(120% 100% at 50% 0%);
  }

  .IhL17MWKaUs1eQ4YwOel {
    font-size: 24px;
  }

  .EcSVQsTTPALbMhKU4NTT {
    font-size: 13px;
    max-width: 100%;
  }

  .jMXA5_1QgAfebdUP99pV {
    padding: 32px 20px 32px;
    align-items: flex-start;
  }

  .QnhwW4rz9LgB7f7S2aWV {
    max-width: 100%;
  }

  .XqvDxhhn6d1181YaklZk {
    font-size: 22px;
  }

  .dAvDWaXHtJfZUvNA7SYA {
    justify-content: center;
  }

  .dAvDWaXHtJfZUvNA7SYA input {
    width: 44px !important;
    height: 50px !important;
    font-size: 18px !important;
  }

}

.sakura-logo {
    width: 6rem !important;
    margin: auto !important;
    height: 6rem;
}

.sakura-logo-box {
    width: 100%;
    display: flex;
}

.aboutus-nav-links {
    display: flex;
    justify-content: center;
    text-decoration: underline;
    color: rgb(7, 60, 13) !important;
    cursor: pointer;
    transition: color 0.3s ease;
}

.aboutus-nav-links:hover {
    color: rgb(210, 25, 31) !important;
}

/* Privacy Policy Content Styling */
.privacy-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.privacy-section {
    margin-bottom: 1.5rem;
}

.privacy-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(210, 25, 31);
    margin-bottom: 1rem;
    text-align: center;
}

.privacy-subtitle {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.privacy-intro {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1.5rem;
}

.privacy-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(210, 25, 31);
    margin: 2rem 0 1rem 0;
}

.privacy-subheading {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin: 1.5rem 0 0.5rem 2rem;
}

.privacy-sub-subheading {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin: 1rem 0 0.5rem 4rem;
}

.privacy-body {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .privacy-content {
        margin-bottom: 4rem;
        padding: 0 0.5rem;
    }

    .privacy-title {
        font-size: 1.25rem;
    }

    .privacy-heading {
        font-size: 1rem;
        margin-left: 0;
    }

    .privacy-subheading {
        margin-left: 1rem;
    }

    .privacy-sub-subheading {
        margin-left: 2rem;
    }
}
/* .img_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
} */

/* ── Desktop: push Menuback below the sticky global header (72px tall) ── */
@media (min-width: 768px) {
  .register-page .menu-back-heading {
    top: 72px;
  }
}

/* ── QR Dine-In Register page overrides ── */

/* Page background: very light green instead of default white */
.qr-register-page {
  background-color: #f1f8e9 !important;
  min-height: 100vh;
}

/* Header: override orange restaurant-header to green */
.qr-register-page .menu-back-heading.restaurant-header {
  background-color: #2e7d32 !important;
}

/* Submit button: override orange MUI contained button to green */
.qr-register-page .MuiButton-contained {
  background-color: #2e7d32 !important;
}
.qr-register-page .MuiButton-contained:hover {
  background-color: #256427 !important;
}
.qr-register-page .MuiButton-contained:disabled {
  background-color: #a5d6a7 !important;
}

/* Input focus: override orange border/label to green */
.qr-register-page .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #2e7d32 !important;
}
.qr-register-page .MuiInputLabel-root.Mui-focused {
  color: #2e7d32 !important;
}

.CnYk8iQ6pzIH7phz7dGw {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  border: 1px solid #f0f0f0;
  margin: 24px 16px 16px;
  padding: 16px;
}

.fb00VEn4KFGvi11lYC7l {
  font-size: 14px;
  font-weight: 600;
  color: #252B37;
  margin-bottom: 12px;
}

.XggwrPqTMv9Z2Z4ZWkR2 {
  border-bottom: 1px solid #f0f0f0;
}

.XggwrPqTMv9Z2Z4ZWkR2:last-child {
  border-bottom: none;
}

.r3Egrrg0Ke5i6bLQzPeR {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--verified-text);
  background-color: var(--verified-bg);
  border-radius: 20px;
  padding: 2px 10px;
}

.fH8vfWr7CYkwCpWoiqP4 {
  min-height: 100vh;
  background: #F5F3F0;
  display: flex;
  flex-direction: column;
}

/* ── Hero ─────────────────────────────────────────────── */
.cOWMOwArV1W73gSCSLog {
  background: #1C1C1C;
  position: relative;
  overflow: hidden;
}

.cOWMOwArV1W73gSCSLog::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(225, 113, 0, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.cOWMOwArV1W73gSCSLog::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E17100 0%, #F5A623 55%, #FBD38D 100%);
}

.V7KuPkrkatBLanYLF2QV {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 20px 36px;
}

.we0SLJAzXM4Rmt8mSM7G {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  padding: 7px 14px 7px 10px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 28px;
}

.we0SLJAzXM4Rmt8mSM7G:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ud8kvWjXrbc1mpCw0WgU {
  width: 16px;
  height: 16px;
}

.A_TCgTpm92_1an9W1Sgw {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.STdxVZpxUYIKHqOIYVNO {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(225, 113, 0, 0.14);
  border: 1px solid rgba(225, 113, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.WqO0umjh4ylyiPGdIItO {
  width: 26px;
  height: 26px;
  color: #F5A623;
  stroke-width: 1.6;
}

.DiI1VRE6vPuAw9n0_rxN {
  flex: 1;
}

.KQZB9bUHeKVRslLibIp8 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E17100;
  margin: 0 0 6px;
  line-height: 1;
}

.DUR84aX1poOYhJHkAAII {
  font-size: 2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 8px;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.SKTMdDmVubU1Z8EPLKWC {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  line-height: 1.6;
}

/* ── Body ──────────────────────────────────────────────── */
.xtqPvbyAgJFD9BjXEy9g {
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 16px 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Contact list ─────────────────────────────────────── */
.mdoYd31iLXnF1TNPnVa7 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.XhAVyQ0Ir0SHk6NMWzPZ {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border: 1.5px solid #EDE8E0;
  border-radius: 16px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  cursor: pointer;
}

.XhAVyQ0Ir0SHk6NMWzPZ:hover {
  border-color: #E17100;
  box-shadow: 0 4px 20px rgba(225, 113, 0, 0.1);
}

._eopvAoxsNZME_b6iPOm {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #FFFFFF;
  border: 1.5px solid #EDE8E0;
  border-radius: 16px;
  padding: 18px 20px;
  cursor: default;
}

.jz2BzEGGzGBfQ06AcDxI {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #FFF8EE;
  border: 1.5px solid #FADDAB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tGUVdRSQBCDzs92lcQZV {
  width: 20px;
  height: 20px;
  color: #E17100;
  stroke-width: 1.7;
}

.osZSXHGxHYk5lMaTWJVn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.QsrMO4G7QYDmencFbMzA {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #A09080;
  line-height: 1;
}

.AgTm37eYn82V2fJNspT0 {
  font-size: 15px;
  font-weight: 600;
  color: #1C1C1C;
  letter-spacing: -0.01em;
  margin-top: 4px;
  word-break: break-word;
}

._cF_DxKguKirq8bP12t8 {
  font-size: 12.5px;
  color: #A09080;
  margin-top: 2px;
  line-height: 1.4;
}

.Cq0pIhx2Znfuq9vZss5H {
  width: 18px;
  height: 18px;
  color: #D4C8BC;
  flex-shrink: 0;
  stroke-width: 2;
}

/* ── Empty state ──────────────────────────────────────── */
.fK9jsxkHamyvzRdzilAD {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 24px;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #EDE8E0;
  text-align: center;
}

.KxL_JMqOFq_wuFfsrExb {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #F5F3F0;
  border: 1.5px solid #EDE8E0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.qUq2iojMiDiMKT4FcXCn {
  width: 28px;
  height: 28px;
  color: #C4B8A8;
}

.D_Yj5XfbcXneLfR2Biac {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.01em;
}

.iX7CHtVoSZ_z8gFg8wCr {
  font-size: 13.5px;
  color: #A09080;
  margin: 0;
  line-height: 1.5;
}

/* ── Other pages ──────────────────────────────────────── */
.zINJO2pISTj0PBQDjtSJ {
  padding: 20px 22px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #EDE8E0;
}

.JuJHhGt9gZ0025kvJyyd {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #C4B8A8;
  margin: 0 0 12px;
}

.ZDGcWnooj0lvc7fIbfgg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.GXDMlrQZkVnzR2vt5xDB {
  background: #F5F3F0;
  border: 1.5px solid #EDE8E0;
  border-radius: 100px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4540;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.GXDMlrQZkVnzR2vt5xDB:hover {
  border-color: #E17100;
  color: #E17100;
  background: #FFF8EE;
}

/* ── Responsive ───────────────────────────────────────── */
@media (min-width: 600px) {
  .V7KuPkrkatBLanYLF2QV {
    padding: 24px 32px 40px;
  }

  .DUR84aX1poOYhJHkAAII {
    font-size: 2.5rem;
  }

  .xtqPvbyAgJFD9BjXEy9g {
    padding: 36px 32px 88px;
  }
}

/* QR dine-in: override brownish restaurant header with green */
.qr-terms-page .menu-back-heading.restaurant-header {
    background-color: #2e7d32 !important;
}

.sakura-logo {
    width: 6rem !important;
    margin: auto !important;
    height: 6rem;
}

.sakura-logo-box{
    width: 100%;
    display: flex;
    background-color: black;
    
}

.aboutus-nav-links {
    display: flex;
    justify-content: center;
    text-decoration: underline;
    color: rgb(7, 60, 13) !important;
    cursor: pointer;
    transition: color 0.3s ease;
}

.aboutus-nav-links:hover {
    color: rgb(210, 25, 31) !important;
}

/* Terms of Use Content Styling */
.terms-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.terms-section {
    margin-bottom: 1.5rem;
}

.terms-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(210, 25, 31);
    margin-bottom: 1rem;
    text-align: center;
}

.terms-subtitle {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.terms-intro {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1.5rem;
}

.terms-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(210, 25, 31);
    margin: 2rem 0 1rem 0;
}

.terms-subheading {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin: 1.5rem 0 0.5rem 2rem;
}

.terms-sub-subheading {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin: 1rem 0 0.5rem 4rem;
}

.terms-body {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .terms-content {
        margin-bottom: 4rem;
        padding: 0 0.5rem;
    }

    .terms-title {
        font-size: 1.25rem;
    }

    .terms-heading {
        font-size: 1rem;
        margin-left: 0;
    }

    .terms-subheading {
        margin-left: 1rem;
    }

    .terms-sub-subheading {
        margin-left: 2rem;
    }
}
.transaction-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 1rem;
  gap: 10px;
  margin: 10px 0px;
  background-color: #ffffff;
}
.rupeeIcon { 
  font-size: 12px !important;
}
.refundIcon {
  background: #e7f3ec !important;
  color: #0f8241 !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
}
.debitIcon {
  background: #fef2f2 !important;
  color: #f20411 !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
}
.refundedColor {
  color: #0f8241 !important;
}
.debitedColor {
  color: #f20411 !important;
}

.wallet-root-div {
  overflow-y: scroll;
  height: 100vh;
  min-height: calc(100vh - 3.5rem);
  margin-top: 6rem;
  margin-bottom: 3.5rem;
  /* background-color: #f4f7fc; */
}

.wallet-root-loader {
  background-color: #f4f7fc;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wallet-loader-box {
  height: 5rem;
  width: 5rem;
  text-align: center;
}

.wallet-loader {
  height: 100%;
}

.wallet-header {
  /* padding: 10px; */

  /* border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem; */
  height: 6rem;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background-color: #f4f7fc;
  z-index: 1000 !important;
}
.wallet-content {
  overflow-y: scroll;
  height: 100vh;
  padding: 0.5rem;
}
.wallet-balance-div {
  border-radius: 1rem;
  padding: 10px;
  margin: 10px 0px;
  background-color: #ffffff;
}
.terms-and-conditions {
  color: darkgray !important;
  text-align: justify;
  line-height: 15px !important;
  font-weight: 100 !important;
  font-size: 9px !important;
}

/* ── Page shell ──────────────────────────────────────────────── */
.ua_3mu8p92o8v0ptMLCQ {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
}

@media (min-width: 768px) {
  .ua_3mu8p92o8v0ptMLCQ {
    background: #F5F3F0;
    top: 72px; /* leave room for the global desktop header */
  }
}

@media (min-width: 1024px) {
  .ua_3mu8p92o8v0ptMLCQ {
    top: 80px; /* taller header at 1024px+ */
  }
}

/* ── Sticky header ───────────────────────────────────────────── */
.SVy5j5N31yiQdmY5PoyG {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #FFFFFF;
  border-bottom: 1px solid #F2F2F2;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.BWeiVBIRIzZ7vodY2uqJ {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
}

.CTKoL_ULG9UFHwRKyqGt {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.CTKoL_ULG9UFHwRKyqGt:hover {
  background: #EBEBEB;
}

.CTKoL_ULG9UFHwRKyqGt svg {
  width: 18px;
  height: 18px;
  color: #1C1C1C;
  stroke: #1C1C1C;
  fill: #1C1C1C;
  stroke-width: 2;
}

.XK104dXMUSvy_m3BYTcu {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Query badge shown in header when user has typed */
.MJKXhWoh8UWwS_Z6t0jT {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6B6B6B;
}

/* ── Loading state ───────────────────────────────────────────── */
.FdjJZDwS5LfFz7s47wlT {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 60vh;
}

.pJJpT0_pPrCZ9ckDhV_E {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #8A8A8A;
  text-align: center;
  padding: 0 24px;
}

/* ── Product list ────────────────────────────────────────────── */
.nGPPuOhxoqFOHKGvpNY4 {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 100px;
}

.vl6rlIbiGh0XHzYdGbW7 {
  /* no extra margin — ProductCard's border-bottom handles separation */
}

.fLfmBRsdnYCSfTLanUas {
  display: none; /* card border-bottom handles it now */
}

.K12Wd6jnDhVH5zo2F8hH {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 100px;
}

.y_s15um4KrENTqP31cIE {
  font-size: 0.8125rem;
  color: #ADADAD;
  text-align: center;
  letter-spacing: 0.04em;
}

.YTPQXJW4y3bkFR_4to17 {
  font-size: 1rem;
  font-weight: 500;
  color: #6B6B6B;
  text-align: center;
  padding: 0 24px;
}

/* ── Idle / empty state ──────────────────────────────────────── */
._Wgbm72IrxcjSY5fNCt5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 120px;
  gap: 0;
}

/* Pulsing search rings */
.q73iIA2HIxbb1Ulmh76B {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.by9N2vrEUgBooPXxAzHB,
.ttjQVMBTO0ZXHx_DPvsN,
._zSWam_XKaz7ct8rnFOX {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #AF5E00;
  opacity: 0;
  animation: md5b2zwLm4GHIktefhkP 2.4s ease-out infinite;
}

.by9N2vrEUgBooPXxAzHB {
  width: 56px;
  height: 56px;
  animation-delay: 0s;
}

.ttjQVMBTO0ZXHx_DPvsN {
  width: 80px;
  height: 80px;
  animation-delay: 0.5s;
}

._zSWam_XKaz7ct8rnFOX {
  width: 108px;
  height: 108px;
  animation-delay: 1s;
}

@keyframes md5b2zwLm4GHIktefhkP {
  0%   { transform: scale(0.85); opacity: 0.5; }
  80%  { transform: scale(1);    opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}

.yqqeWDqPFMMN8j25yPpA {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF3E8 0%, #FFEDE0 100%);
  border: 2px solid #F0D8C0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(175, 94, 0, 0.15);
}

.dEiTVdIjj7xQxre9iQ1v {
  width: 24px;
  height: 24px;
  color: #AF5E00;
  stroke-width: 2;
}

.DC4jdKOZ4PyrCTnCqLFK {
  font-size: 1.375rem;
  font-weight: 800;
  color: #1C1C1C;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
}

.r9X1JFr9Kth3TVrfG89o {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #93959F;
  text-align: center;
  margin: 0 0 28px;
  line-height: 1.5;
}

/* "Browse categories" label above chips */
.smsxNHqx056aOmeJBWpW {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ADADAD;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-align: center;
}

/* Suggestion chips */
.IS1YUFq7OcieOhuaFUEU {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 340px;
}

.u55cPj8zMPhStcS600AO {
  background: #FFFFFF;
  border: 1.5px solid #EBEBEB;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3D3D3D;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.u55cPj8zMPhStcS600AO:hover {
  border-color: #AF5E00;
  color: #AF5E00;
  box-shadow: 0 2px 8px rgba(175, 94, 0, 0.14);
}

/* ── No-results state ────────────────────────────────────────── */
.kVo4YIVsYdQ0l0k_zKHe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px 120px;
  gap: 0;
  text-align: center;
}

.TRqlgbqrcE9YD3dVwIAQ {
  margin-bottom: 20px;
}

.s7kryPC1ahxgkJy9PzqN {
  width: 100px;
  height: 100px;
}

.LL1puXRJ76pb_spZ3pdr {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.iXGS2_5nbwjqvrKQdy6Q {
  color: #AF5E00;
}

.xUo9cGOWp4O7ZwrSCo3m {
  font-size: 0.9375rem;
  color: #93959F;
  margin: 0 0 20px;
  line-height: 1.5;
}

.SaYQ9TiQTZFJ2Xq0jPYR {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #FFF8F0;
  border: 1px solid #F0D8C0;
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 300px;
  text-align: left;
}

.D2Lq6KrDOWz3rSCCwzmf {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.SaYQ9TiQTZFJ2Xq0jPYR span:last-child {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #7A5000;
  line-height: 1.5;
}

/* ── Desktop search input (hidden on mobile) ─────────────────── */
.BLWlD0wYWdd3CeXk0gmg {
  display: none;
}

/* ── Tablet / Desktop grid ───────────────────────────────────── */
@media (min-width: 768px) {
  /* ── Header: single left-aligned row ────────────────────────── */
  .SVy5j5N31yiQdmY5PoyG {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    flex-direction: row;      /* single row: [back+search] [filters] */
    align-items: center;
    padding: 0 2rem;
    gap: 0;
  }

  /* Back button + search bar — left side, no centering */
  .BWeiVBIRIzZ7vodY2uqJ {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    flex-shrink: 0;
    /* No margin:auto — stays left */
    max-width: none;
    margin: 0;
  }

  /* Hide mobile title + badge — desktop has the inline input instead */
  .XK104dXMUSvy_m3BYTcu,
  .MJKXhWoh8UWwS_Z6t0jT {
    display: none;
  }

  /* Wider inline search bar — fixed width, left-anchored */
  .BLWlD0wYWdd3CeXk0gmg {
    display: flex;
    align-items: center;
    width: min(580px, 48vw);
    flex-shrink: 0;
    gap: 10px;
    background: #F5F3F0;
    border: 1.5px solid #E8E4DF;
    border-radius: 12px;
    padding: 0 14px;
    height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .BLWlD0wYWdd3CeXk0gmg:focus-within {
    border-color: #AF5E00;
    box-shadow: 0 0 0 3px rgba(175, 94, 0, 0.10);
    background: #fff;
  }

  .oxltgSRcHLVxlRPskJeb {
    width: 18px;
    height: 18px;
    color: #AF5E00;
    stroke-width: 2;
    flex-shrink: 0;
  }

  .UOmyB5Y96IO15PnAgjdK {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1C1C1C;
    line-height: 1;
  }

  .UOmyB5Y96IO15PnAgjdK::placeholder {
    color: #B0A89E;
    font-weight: 400;
  }

  .tBv3ucOUYfLX88Du1y6e {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #ADADAD;
    font-size: 0.8125rem;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
  }

  .tBv3ucOUYfLX88Du1y6e:hover {
    color: #AF5E00;
  }

  /* ── Filters inline with the search bar ─────────────────────── */
  /* The framer-motion wrapper: override height animation on desktop
     so filters slide in horizontally (flex child), not push row down */
  .vPK2lOjSujwqnvBFJLQo {
    height: auto !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    flex: 1;
  }

  /* ── Product cards: add proper row spacing ───────────────────── */
  .nGPPuOhxoqFOHKGvpNY4 {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 2rem 120px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px 1.5rem;   /* 20px row gap + 1.5rem column gap */
    align-items: start;
  }

  .nGPPuOhxoqFOHKGvpNY4 > .K12Wd6jnDhVH5zo2F8hH {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 1rem;
    padding-bottom: 2rem;
  }

  ._Wgbm72IrxcjSY5fNCt5 {
    padding-top: 80px;
  }

  .kVo4YIVsYdQ0l0k_zKHe {
    padding-top: 80px;
  }
}

@media (min-width: 1024px) {
  .nGPPuOhxoqFOHKGvpNY4 {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px 2rem;   /* bigger gap at wider viewport */
  }
}

.DAym2_mwJGb91GKCmKES {
  min-height: 100vh;
  background: #F5F3F0;
  display: flex;
  flex-direction: column;
}

/* ── Hero ─────────────────────────────────────────────── */
.CxYwTHuh0r9M_5udcbwF {
  background: #1C1C1C;
  position: relative;
  overflow: hidden;
}

.CxYwTHuh0r9M_5udcbwF::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(225, 113, 0, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.CxYwTHuh0r9M_5udcbwF::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E17100 0%, #F5A623 55%, #FBD38D 100%);
}

.D7cX4zumer5W64pMkknA {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 20px 36px;
}

.StmozzzDtzbmNnXKZkwd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  padding: 7px 14px 7px 10px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 28px;
}

.StmozzzDtzbmNnXKZkwd:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.fhGfe5CtLOMh_l7eX5XC {
  width: 16px;
  height: 16px;
}

.ITBCylpNXWUjrBD0IIMU {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.i4czQ1Zkztw6YpcF_T7q {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(225, 113, 0, 0.14);
  border: 1px solid rgba(225, 113, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.t52TvnttVm4dVIAHkqwI {
  width: 26px;
  height: 26px;
  color: #F5A623;
  stroke-width: 1.6;
}

.RViKBByJ4XovSi8PPC4P {
  flex: 1;
}

.TJ7N2TLE3aF5pArF3JJY {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E17100;
  margin: 0 0 6px;
  line-height: 1;
}

.pPobtRn3WAb3rnzgmHm2 {
  font-size: 2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 10px;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.PvoYBPR5EIxcgZqOxnso {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  line-height: 1.65;
  max-width: 52ch;
}

/* ── Page body ────────────────────────────────────────── */
.bTD7KIDHQXdEdQZHMS8C {
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 16px 72px;
  box-sizing: border-box;
}

/* ── Content card ─────────────────────────────────────── */
.orCioHGbewEkuU4U01Cp {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #EDE8E0;
  padding: 28px 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.045);
}

.rNIWueVytl83V_1xG2bH {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 0;
}

.Lb_HqfmdTz0FlkHJbxwZ {
  font-size: 14px;
  color: #A09080;
  margin: 0;
  font-weight: 500;
}

.bisAhqksvlomG8dhRX5I {
  text-align: center;
  color: #A09080;
  font-size: 0.9rem;
  padding: 56px 16px;
  margin: 0;
  font-weight: 500;
}

/* ── HTML content typography ──────────────────────────── */
.AvSiknpD3h68YbHo2jYr {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: #3C3830;
}

.AvSiknpD3h68YbHo2jYr h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.025em;
  margin: 0 0 0.75em;
  padding-bottom: 0.6em;
  border-bottom: 2px solid #F5F3F0;
  line-height: 1.2;
}

.AvSiknpD3h68YbHo2jYr h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.015em;
  margin: 2em 0 0.55em;
  line-height: 1.3;
}

.AvSiknpD3h68YbHo2jYr h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #2D2D2D;
  margin: 1.6em 0 0.45em;
  line-height: 1.4;
}

.AvSiknpD3h68YbHo2jYr h4,
.AvSiknpD3h68YbHo2jYr h5,
.AvSiknpD3h68YbHo2jYr h6 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #3C3830;
  margin: 1.2em 0 0.4em;
}

.AvSiknpD3h68YbHo2jYr p {
  margin: 0 0 0.9em;
}

.AvSiknpD3h68YbHo2jYr p:last-child {
  margin-bottom: 0;
}

.AvSiknpD3h68YbHo2jYr ul,
.AvSiknpD3h68YbHo2jYr ol {
  padding-left: 1.6em;
  margin: 0.5em 0 1em;
}

.AvSiknpD3h68YbHo2jYr li {
  margin-bottom: 0.45em;
}

.AvSiknpD3h68YbHo2jYr a {
  color: #E17100;
  text-decoration: underline;
  text-decoration-color: rgba(225, 113, 0, 0.35);
  transition: color 0.15s, text-decoration-color 0.15s;
}

.AvSiknpD3h68YbHo2jYr a:hover {
  color: #AF5E00;
  text-decoration-color: #AF5E00;
}

.AvSiknpD3h68YbHo2jYr strong,
.AvSiknpD3h68YbHo2jYr b {
  font-weight: 700;
  color: #1C1C1C;
}

.AvSiknpD3h68YbHo2jYr em {
  font-style: italic;
  color: #6B6460;
}

.AvSiknpD3h68YbHo2jYr blockquote {
  border-left: 3px solid #E17100;
  margin: 1.5em 0;
  padding: 0.5em 0 0.5em 1.25em;
  color: #6B6460;
  background: #FFF8F0;
  border-radius: 0 8px 8px 0;
}

.AvSiknpD3h68YbHo2jYr table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.875rem;
}

.AvSiknpD3h68YbHo2jYr th,
.AvSiknpD3h68YbHo2jYr td {
  padding: 10px 14px;
  border: 1px solid #EDE8E0;
  text-align: left;
}

.AvSiknpD3h68YbHo2jYr th {
  background: #F5F3F0;
  font-weight: 700;
  color: #1C1C1C;
}

.AvSiknpD3h68YbHo2jYr hr {
  border: none;
  border-top: 1px solid #EDE8E0;
  margin: 2em 0;
}

/* ── Related pages ────────────────────────────────────── */
.uIwT22wAnUlvhqBHF0rw {
  margin-top: 20px;
  padding: 20px 24px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #EDE8E0;
}

.j14oLmSEeLtgs5kjw0dA {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #C4B8A8;
  margin: 0 0 12px;
}

.un75b362gQsH5hUivJq7 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ucMlcpAN11HvWW6zJXw2 {
  background: #F5F3F0;
  border: 1.5px solid #EDE8E0;
  border-radius: 100px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4540;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.ucMlcpAN11HvWW6zJXw2:hover {
  border-color: #E17100;
  color: #E17100;
  background: #FFF8EE;
}

/* ── Responsive ───────────────────────────────────────── */
@media (min-width: 600px) {
  .D7cX4zumer5W64pMkknA {
    padding: 24px 32px 40px;
  }

  .pPobtRn3WAb3rnzgmHm2 {
    font-size: 2.5rem;
  }

  .PvoYBPR5EIxcgZqOxnso {
    font-size: 14.5px;
  }

  .bTD7KIDHQXdEdQZHMS8C {
    padding: 36px 32px 88px;
  }

  .orCioHGbewEkuU4U01Cp {
    padding: 40px 48px;
  }

  .uIwT22wAnUlvhqBHF0rw {
    padding: 22px 32px;
  }
}

@media (min-width: 900px) {
  .D7cX4zumer5W64pMkknA {
    padding: 28px 40px 44px;
  }
}

.F9E73KwCcQoG6Fgk6NG5 {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
  margin: 0 auto;
  width: auto;
  max-width: 480px;
  background: #1C1C1C;
  border-radius: 18px;
  /* Right padding reserves space for the always-visible close button */
  padding: 14px 52px 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Left: icon + text ────────────────────────────────────────── */
.KKYA8MST0h4WPobtzGto {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.AL0RnUkIDkFDwduE_7zw {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F5F3F0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ViaMOb9bPdKCIVWFbV9_ {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.utEKT58GWsKUgVE_1QGX {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.SZtNuF6uvxsoegnzKVwu {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.d4o5vPChC5STPGf45Zqk {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.cVZAu5RZH_kBY1T089pC {
  display: inline-block;
  font-size: 13px;
  transform: rotate(90deg);
  margin: 0 1px;
}

/* ── Actions: install button inline, close button pinned ──────── */
.zThcRDeYOJTRIPei9K1v {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dQl8ny47X44CW8noVfi1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wb-button-button-bg-color, #E17100);
  color: var(--wb-button-button-text-color, #FFFFFF);
  border: none;
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.18s, transform 0.15s;
  letter-spacing: -0.01em;
}

.dQl8ny47X44CW8noVfi1:hover {
  opacity: 0.88;
  transform: scale(1.03);
}

.dQl8ny47X44CW8noVfi1:active {
  transform: scale(0.97);
}

/* Close button — always pinned to top-right corner of the banner */
.JGEaC5DFd9M9THNpCjed {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.15s;
  flex-shrink: 0;
}

.JGEaC5DFd9M9THNpCjed:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

/* ── Desktop ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .F9E73KwCcQoG6Fgk6NG5 {
    bottom: 24px;
    max-width: 440px;
  }
}

:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* css variables */
  --Surface-White: #ffffff;
  --text-Primary-1: #171717;
  --text-Secondary-1: #8a93a7;
  --text-Secondary-2: #333333;

  --header-bg: #0C0807;
  --footer-bg: #171717;
  --footer-text: #A1A1A1;
  --grey-n-1: #F5F3F0;
  --text-grey-1: #525252;
  --pink-1: #FFFBEB;
  --grey-n-2: #737373;
  --grey-n-3: #EFECEC;
  --grey-n-4: #F5F5F5;
  --grey-n-5: #6B6565;
  --grey-n-6: #E5E5E5;
  --grey-n-7: #F2F2F2;
  --orange-n-1: #b96b42;

  --blue-1: #AF5E00;
  --blue-400: #AF5E00;
  --blue-3: #085dc5;
  --blue-50: #edfaff;
  --blue-100: #d6f2ff;
  --blue-200: #b5eaff;
  --blue-b3: #bfeaff;
  --blue-b4: #f4fbff;
  --blue-800: #263a83;

  --black-1: #343434;
  --gray-1: #d5d7db;
  --grey-100: #eaecef;
  --grey-600: #798097;
  --grey-200: #e9eaeb;
  --grey-300: #bdc4ce;
  --grey-800: #252b36;
  --gray-900: #181d27;
  --gray-500: #717680;
  --grey-50: #fafafa;
  --gray-50: #f6f7f8;
  --gray-3: #dadde3;
  --gray-600: #535861;
  --gray-700: #414651;
  --gray-200: #e9eaec;
  --grey-950: #31323a;
  --grey-900: #4c4f5c;
  --Surface-G5: #333;
  --Surface-G4: #6b6b6b;
  --Surface-G1: #e6e6e6;
  --red-200: #e90000;

  --green-400: #0b742c;
  --green-200: #87c55d;
  --green-600: #22973f;

  --backdrop-bg-color-1: #0b0b0b29;
  --color-warning-bg: #f59e0b;

  --green-400: #0b742c;
  --green-500: #34c759;

  --backdrop-bg-color-1: #0b0b0b29;
  --color-primary: #3b82f6;
  --color-danger: #ef4444;
  --Yellow-100: #fffec1;
  --Red-600: #ed2015;
  --eclipse-shadow: 8, 93, 197;

  --orange-gradient-1: linear-gradient(90deg, #E17100 0%, #BB4D00 100%);

  /* Brand */
  --brand-orange: #E17100;
  --brand-orange-dark: #BB4D00;
  --brand-gradient: linear-gradient(90deg, #E17100, #BB4D00);
  --brand-accent: #b96b42;

  /* Page background */
  --bg-page: #F5F3F0;

  /* Borders */
  --border-subtle: #f0f0f0;
  --border-light: #f5f5f5;
  --border-tab: #E8E4DF;

  /* Text scale */
  --text-primary: #252B37;
  --text-secondary: #6B7280;
  --text-muted: #4B5563;
  --text-tertiary: #9CA3AF;

  /* Verified badge */
  --verified-text: #2e7d32;
  --verified-bg: #e8f5e9;

  /* Danger */
  --danger-text: #dc2626;
  --danger-bg: #fff5f5;
  --danger-border: #fecaca;

  /* Cancel button */
  --btn-cancel-bg: #f5f5f5;

  /* Order status */
  --status-delivered-bg: #dcfce7;
  --status-delivered-text: #166534;
  --status-cancelled-bg: #fee2e2;
  --status-cancelled-text: #991b1b;
  --status-pending-bg: #fff7ed;
  --status-pending-text: #c2410c;
}

/* 1. Remove tap highlight (Android, Chrome, Safari iOS) */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Remove browser focus ring but keep element color untouched */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 3. Safari / iOS remove gray overlay */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 4. Remove Android WebView click flash without altering element color */
*:active {
  outline: none !important;
  box-shadow: none !important;
}

/* 5. Firefox remove dotted focus ring */
button::-moz-focus-inner,
*:focus::-moz-focus-inner {
  border: 0;
}

body,
html,
div {
  -ms-overflow-style: none;
  /* IE + Edge */
  scrollbar-width: none;
  /* Firefox */
}

body::-webkit-scrollbar,
html::-webkit-scrollbar,
div::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge (WebKit) */
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;

  user-select: none; /* prevents user from selecting the text content */

  -webkit-overflow-scrolling: touch; /* ios */
}

.pageBodyScrollContainer {
  /* Keep 100vh as a fallback for older browsers */
  height: 100vh;
  /* Use dvh so the container shrinks when the keyboard opens */
  height: 100dvh;
  overflow-y: auto;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  /* Prevents the elastic bounce effect that can shift the fixed layout */
  overscroll-behavior: none;

  background-color: var(--Surface-White, #ffffff);
}

/* ── Global desktop-only persistent header wrapper ─────────────
   Hidden on mobile (each page renders its own mobile header).
   Shown at ≥768 px for all routes except home (which has its own
   HeaderNew with the address bar already included).              */
.globalDesktopHeader {
  display: none;
}
@media (min-width: 768px) {
  .globalDesktopHeader {
    display: block;
  }
}
/* ═══════════════════════════════════════════════════════════
   BASE (mobile-first)
═══════════════════════════════════════════════════════════ */
.ASg76acer6Dm224xi1OQ {
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: #F5F3F0;
}

/* ── Mobile top bar ── */
.yihaGB7O0wKv2wvzGIfI {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
  border-bottom: 1px solid #EBEBEB;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}

.QRFk_phGkxg7ek2yWz3N {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border-bottom: 1px solid #EBEBEB;
}

.L24vj7sOY0LoCuQfQF8g {
  height: 42px;
  cursor: pointer;
  margin-left: -0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.L24vj7sOY0LoCuQfQF8g svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  stroke-width: 2.5;
  margin-left: -0.25rem;
}

.L7Z7cD1foqs4_HPfiGKW {
  font-size: 1rem;
  font-weight: 600;
  color: #171717;
}

.HXIQ1Cb8VxVEkOhHlI5N {
  padding: 0.5rem 1rem 0;
}

.GhtjA49ZsZvSKHQ3SPIM {
  padding-top: 4px;
}

/* ── Mobile sticky category title ── */
.OsgXj0YygCYByT9X2fCn {
  position: sticky;
  top: 210px;
  z-index: 15;
  background: #ffffff;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #252b37;
  border-bottom: 1px solid #EBEBEB;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* ── Desktop sidebar (hidden on mobile) ── */
.CTy_7SgA_CM4nqRcIeMQ {
  display: none;
}

/* ── Desktop sticky bar (hidden on mobile) ── */
.XWBb2hZ8Oo9i7rS6NjY3 {
  display: none;
}

/* ── Desktop category heading (hidden on mobile) ── */
.qMfFDYNSIUegeintR3JH {
  display: none;
}

/* ── Content wrapper (mobile: just a column) ── */
.Q03AVkrXVETJZIxA44xY {
  display: flex;
  flex-direction: column;
}

.OHaELY3kZhpDhVDEx41T {
  flex: 1;
  min-width: 0;
}

/* ── Products list ── */
.YTCn_UOcr_ryxfWI93NA {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0 125px;
  background: #ffffff;
}

.V_Qfycwe4Q_RChAxPtfu {
  position: relative;
}

.V_Qfycwe4Q_RChAxPtfu::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    #E8E4DF 0,
    #E8E4DF 5px,
    transparent 5px,
    transparent 10px
  );
}

.WQRAWTW8LZq33OZAxKt9 {
  text-align: center;
  padding: 3rem 1rem;
  color: #8a93a7;
  font-size: 0.9rem;
}

.XUHxY73qBM7LxI6WO27V {
  font-size: 0.875rem;
  color: #8a93a7;
  margin: 1.5rem 0;
  text-align: center;
}

.KugbQg6lgiPud70NrGIS {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

._9my5Ct7OVrbwjdCkMmsQ {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}

/* ── Empty state ── */
.nYErMQLLR9_6_wmdIrV_ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.U6ori9ZIu2n7v3qsJ6rb {
  color: #252b37;
  font-size: 18px;
  font-weight: 600;
}

.LsWPjk2U7HZIjEIjsizK {
  color: #8a93a7;
  margin-top: 6px;
  max-width: 240px;
  font-size: 14px;
  line-height: 1.5;
}

.kJzKV2UUuOfnvBVe_yNM {
  margin-top: 20px;
  background: transparent;
  border: none;
  color: #AF5E00;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP (768px+) — sidebar layout
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Page becomes the flex-column host, sidebar sticks inside it */
  .ASg76acer6Dm224xi1OQ {
    height: calc(100vh - 72px);
    background: #F5F3F0;
    overflow-y: auto;
  }

  /* Hide mobile-only elements */
  .yihaGB7O0wKv2wvzGIfI {
    display: none;
  }

  .OsgXj0YygCYByT9X2fCn {
    display: none;
  }

  /* Sidebar + content side-by-side */
  .Q03AVkrXVETJZIxA44xY {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-height: 100%;
  }

  /* ── Left sidebar — card with margin ── */
  .CTy_7SgA_CM4nqRcIeMQ {
    display: flex;
    flex-direction: column;
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
    height: calc(100vh - 72px - 32px);
    overflow-y: auto;
    margin: 16px 0 16px 16px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #EDE9E3;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    scrollbar-width: thin;
    scrollbar-color: #E0DAD3 transparent;
  }

  .CTy_7SgA_CM4nqRcIeMQ::-webkit-scrollbar {
    width: 4px;
  }
  .CTy_7SgA_CM4nqRcIeMQ::-webkit-scrollbar-track {
    background: transparent;
  }
  .CTy_7SgA_CM4nqRcIeMQ::-webkit-scrollbar-thumb {
    background: #E0DAD3;
    border-radius: 4px;
  }

  .WyhOVrVPcoevrBRZ4Oww {
    padding: 20px 16px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999490;
    border-bottom: 1px solid #F2EFEB;
    flex-shrink: 0;
  }

  .SMOjF8Df8rCjv2OplwFC {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
  }

  .tIOLfInxLc7KMjlgA9yb {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
  }

  .tIOLfInxLc7KMjlgA9yb:hover {
    background: #FBF9F7;
  }

  .X4opNjFNQuGVgSWbfuA_ {
    background: #FFF6EC !important;
    border-left-color: #E17100 !important;
  }

  .yymZQfLsDw2ef1i1nAb1 {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #F5F2EE;
    border: 1px solid #EDEBE8;
  }

  .EZVc0I_rIFUHv9Us_apl {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #3A3530;
    line-height: 1.35;
  }

  .X4opNjFNQuGVgSWbfuA_ .EZVc0I_rIFUHv9Us_apl {
    color: #C96200;
    font-weight: 600;
  }

  /* ── Main content area ── */
  .OHaELY3kZhpDhVDEx41T {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* ── Sticky search + filter bar ── */
  .XWBb2hZ8Oo9i7rS6NjY3 {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 15;
    background: #ffffff;
    border-bottom: 1px solid #EDEBE8;
    padding: 12px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }

  /* Search input */
  .cTYI3Lms4vWZ3vggyEbg {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F7F5F2;
    border: 1.5px solid #EDEBE8;
    border-radius: 10px;
    padding: 0 12px;
    height: 40px;
    flex: 1;
    max-width: 380px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .cTYI3Lms4vWZ3vggyEbg:focus-within {
    border-color: #E17100;
    box-shadow: 0 0 0 3px rgba(225, 113, 0, 0.10);
    background: #ffffff;
  }

  .fXmQeDfiNbViAbcHGspa {
    width: 16px;
    height: 16px;
    color: #999490;
    flex-shrink: 0;
    stroke-width: 2;
  }

  .F7rFHvuamo5F8SzVLqGO {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 0.875rem;
    color: #1C1C1C;
    font-family: inherit;
  }

  .F7rFHvuamo5F8SzVLqGO::placeholder {
    color: #B0AA9F;
  }

  .yUUGVgby0O3HufptjaNA {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8E4DF;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.12s ease;
  }

  .yUUGVgby0O3HufptjaNA:hover {
    background: #DDD9D3;
  }

  .RmuuZAauDQCdWTFakLaf {
    width: 11px;
    height: 11px;
    color: #6B6560;
    stroke-width: 2.5;
  }

  .ySMWmQfxTozM8cmgKctA {
    flex-shrink: 0;
  }

  /* ── Desktop category heading ── */
  .qMfFDYNSIUegeintR3JH {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 20px 24px 4px;
  }

  .YdHCSk9Fo5MWkIAjDv0g {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1C1C1C;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .mFuKXB8KrZYnbz9bMOhx {
    font-size: 0.8125rem;
    color: #999490;
    font-weight: 500;
  }

  /* ── Products container on desktop ── */
  .YTCn_UOcr_ryxfWI93NA {
    padding: 12px 20px 100px;
    background: transparent;
  }

  /* Desktop product grid — exactly 2 columns */
  .YTCn_UOcr_ryxfWI93NA > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }

  /* Hide dashed lines in grid */
  .V_Qfycwe4Q_RChAxPtfu::after {
    display: none;
  }

  /* Grid-level loaders + messages span full width */
  ._9my5Ct7OVrbwjdCkMmsQ,
  .XUHxY73qBM7LxI6WO27V,
  .nYErMQLLR9_6_wmdIrV_ {
    grid-column: 1 / -1;
    width: 100%;
  }

  .XUHxY73qBM7LxI6WO27V {
    padding: 24px 0 8px;
    margin: 0;
  }

  .KugbQg6lgiPud70NrGIS {
    min-height: 50vh;
  }
}

/* ═══════════════════════════════════════════════════════════
   LARGE DESKTOP (1200px+)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .CTy_7SgA_CM4nqRcIeMQ {
    width: 240px;
  }
}

.RSVNMlZqfLn4qHtq68VF {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.S6sYYwqlfll48pVTbpbA {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.Lyj7dJqy6hzk1BRbwaSs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
}

.hAGIw8DM57omHNgo3UBp {
  font-size: 14px;
  color: #555555;
  margin: 0;
  font-weight: 500;
}

.weNUVB6GST9YHczoEbh3 {
  font-size: 14px;
  color: #1C1C1C;
  margin: 0;
  font-weight: 500;
}

/* Sub-rows inside the expandable section */
.gOI1F4TP7WlQ99tLxZAF {
  padding: 5px 0;
}

.hoNfWzMf3Gj22YERWa45 {
  font-size: 13px;
  color: #7A7A7A;
  padding-left: 10px;
}

.gOI1F4TP7WlQ99tLxZAF .weNUVB6GST9YHczoEbh3 {
  font-size: 13px;
  color: #555;
}

/* Modifiers */
.GYMN4rmxK8utCTFNXb50 {
  color: #2A7A2A !important;
  font-weight: 600 !important;
}

.ijUS8bkITYDXabb6m4Xe {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #1C1C1C !important;
  letter-spacing: -0.02em;
}

/* Bold label for total row */
.jbwbQAV3SjYD6uBNdBJC {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
}

/* Expandable GST row */
.jPQ0jNBXqT4GH0jO1xO0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.i46ffGxKAHMo2jt1rcQw {
  width: 15px;
  height: 15px;
  color: #7A7A7A;
  stroke-width: 2.5;
  transition: transform 0.2s;
}

.s9tM97noDH6Ro12jfA5g {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Dividers */
.r3iE5_qsAWao7H9ehFR6 {
  height: 1px;
  background: #F0F0F0;
  margin: 6px 0;
  width: 100%;
}

.jDqAxEzKL2U9lYtviVh6 {
  height: 1.5px;
  background: #EBEBEB;
  margin: 8px 0;
  width: 100%;
}

.i90VUneqxI6KLAAdGzLp {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 1.5px solid #F2F2F2;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}

.i90VUneqxI6KLAAdGzLp:hover {
  box-shadow: 0 8px 28px rgba(175, 94, 0, 0.13);
  border-color: rgba(175, 94, 0, 0.22);
}

.lQYjzI8P2m4Uzzdskw_w {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wT3A2o1l66eDT84MSsX9 {
  font-size: 11px;
  font-weight: 700;
  color: #AF5E00;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
}

.b39relLHBKtzGlLARW30 {
  font-size: 12px;
  font-weight: 700;
  color: #AF5E00;
  background: #FFF3E8;
  border: none;
  border-radius: 20px;
  padding: 3px 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}

.b39relLHBKtzGlLARW30:hover {
  background: #FFE4C4;
}

.Ux6K25R1y31NrwwNVbMw {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.Uy45kOZEZjLe62NOuc2j {
  display: flex;
  align-items: center;
  gap: 6px;
}

.FNrIHPqaTNB_pW9gHcwm {
  width: 16px;
  height: 16px;
  color: #AF5E00;
  flex-shrink: 0;
}

.Vd5YpDECSKhk_lN2yXFt {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.01em;
}

.Rri_lCsRpzsHRaMSqqSO {
  font-size: 13px;
  font-weight: 400;
  color: #7A7A7A;
  margin: 0;
  line-height: 1.5;
  padding-left: 22px;
}

/* ── Toggle wrapper ───────────────────────────────────────────── */
.gcwEniEhkXamXwnDzH4V {
  background: var(--wb-card-bg-color, #FFFFFF);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}

.b2yhF7KPNpe6P6v9ZBzk {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-text-secondary-color, #6B6B6B);
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Segmented track ──────────────────────────────────────────── */
.lNvz8TEo5rxQLJfGwjbT {
  display: flex;
  align-items: center;
  background: var(--wb-page-body-bg-color, #F3F3F3);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
  flex: 1;
  max-width: 260px;
  margin-left: auto;
}

.nsKUYW4QT6WZewxw32jP {
  flex: 1;
  position: relative;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sliding background pill */
.LflzZX9j3pPGEaHHFxcj {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: var(--wb-card-bg-color, #FFFFFF);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  z-index: 0;
}

/* Option button */
.k77EgfpxrHgWpnAS0NNc {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.L77LbhZXR0t9D2NCyqQ_ {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  color: var(--wb-text-secondary-color, #9A9A9A);
  flex-shrink: 0;
  transition: color 0.25s;
}

.hrXDtWVs8cyLaVjhzVCo {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-text-secondary-color, #9A9A9A);
  transition: color 0.25s;
  white-space: nowrap;
}

.ts5qoiH6xI9S0x3Db7NX .L77LbhZXR0t9D2NCyqQ_,
.ts5qoiH6xI9S0x3Db7NX .hrXDtWVs8cyLaVjhzVCo {
  color: var(--wb-button-button-hover-bg-color, #AF5E00);
}

/* ── Price Impact Modal ────────────────────────────────────────── */
.CiDS8wPpRcPSm3MDE64L {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
}

.ldemGK91L6wJq6EJ6AFF {
  width: 100%;
  background: var(--wb-card-bg-color, #FFFFFF);
  border-radius: 24px 24px 0 0;
  padding: 16px 20px 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* ── Desktop: centered dialog, not bottom sheet ────────────────── */
@media (min-width: 768px) {
  .CiDS8wPpRcPSm3MDE64L {
    align-items: center;
    justify-content: center;
  }

  .ldemGK91L6wJq6EJ6AFF {
    width: 460px;
    max-width: calc(100vw - 48px);
    border-radius: 20px;
    padding: 32px 32px 32px;
  }

  .lK2dtswdtxE4BIVB8Nwa {
    display: none;
  }

  .QUkqUEbp2NmxkO_OVov0 {
    font-size: 20px;
  }

  .SrUHldT9zxv2p1iUNCF1 {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .GGtknfMTRuA79ByIjN4r,
  .dys4YypRuaW3t6nRbxfA {
    height: 52px;
    font-size: 15px;
  }
}

.lK2dtswdtxE4BIVB8Nwa {
  width: 36px;
  height: 4px;
  background: var(--wb-border-subtle-color, #E0E0E0);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.hmPThKaK7VKzSAYNs82K {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.KUu7XgDvx3UlNRq23xaP {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFF3E8;
  border: 1.5px solid #F0D8C0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.A_A_vIwjUvZJNH6LyQV6 {
  width: 22px;
  height: 22px;
  color: var(--wb-button-button-hover-bg-color, #AF5E00);
  stroke-width: 1.8;
}

.XJh8Jw0RXzj9rdUoTzVI {
  background: #F5F5F5;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wb-text-secondary-color, #555);
}

.QUkqUEbp2NmxkO_OVov0 {
  font-size: 18px;
  font-weight: 800;
  color: var(--wb-text-primary-color, #1C1C1C);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.SrUHldT9zxv2p1iUNCF1 {
  font-size: 14px;
  font-weight: 400;
  color: var(--wb-text-secondary-color, #6B6B6B);
  margin: 0 0 16px;
  line-height: 1.55;
}

.v2Njo1TN9eYjz7ZP3n63 {
  display: inline-flex;
  align-items: center;
  background: #F0FBF0;
  border: 1px solid #C3EBCA;
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.bOQOYRbExr_4UWRAGfxA {
  font-size: 13px;
  font-weight: 600;
  color: #2A7A2A;
}

.abVMoPPXUpUr0irUizff {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.GGtknfMTRuA79ByIjN4r {
  flex: 1;
  height: 48px;
  background: #F5F5F5;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wb-text-secondary-color, #555555);
  cursor: pointer;
  transition: background 0.15s;
}

.GGtknfMTRuA79ByIjN4r:hover {
  background: var(--wb-border-subtle-color, #EBEBEB);
}

.dys4YypRuaW3t6nRbxfA {
  flex: 1.4;
  height: 48px;
  background: var(--wb-button-button-bg-color, #1C1C1C);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--wb-button-button-text-color, #FFFFFF);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.dys4YypRuaW3t6nRbxfA:active {
  transform: scale(0.98);
}

.BlNHJR_VUy2AD0j9h9ut {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

.vH_iiRDH8PpNIDnYp5z6 {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 1.5px solid #F2F2F2;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  will-change: transform;
}

.vH_iiRDH8PpNIDnYp5z6:hover {
  box-shadow: 0 8px 28px rgba(175, 94, 0, 0.11);
  border-color: rgba(175, 94, 0, 0.2);
}

.ZHhG01kfvJBnYyWK7fy4 {
  border-color: rgba(40, 167, 69, 0.25);
  background: linear-gradient(135deg, #FAFFFE 0%, #F2FDF5 100%);
}

.ZHhG01kfvJBnYyWK7fy4:hover {
  box-shadow: 0 8px 28px rgba(40, 167, 69, 0.12);
  border-color: rgba(40, 167, 69, 0.35);
}

.jUy4j5diHBO1Lkz9FBZ7 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.C2UQADXJto5gg1mhl4dr {
  width: 36px;
  height: 36px;
  background: #FFF0DC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  will-change: transform;
}

.zUQ3MGzLRv4_Nn5oDRx7 {
  background: #DFFAEB;
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
  animation: gSsRu2pPuX7VohTV6IXO 2s infinite;
}

@keyframes gSsRu2pPuX7VohTV6IXO {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.35); }
  60% { box-shadow: 0 0 0 7px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.tXfv8oQXHMdD2BXV91gm {
  width: 20px;
  height: 20px;
  color: #AF5E00;
}

.lMo3hS2ssQAPi58NtOXZ {
  color: #28a745;
}

.mQ2TLRz3otO92kc78fvZ {
  display: flex;
  flex-direction: column;
}

.Obcajq1vGrDJ_twnbwT4 {
  font-size: 15px;
  font-weight: 600;
  color: #1C1C1C;
  margin: 0;
}

.dumjeUzortCq3FMdt_uF {
  font-size: 14px;
  font-weight: 700;
  color: #28a745;
  margin: 0;
}

.GNpq7XnwTQBWXiA5CPh1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vFqys5dBcRmqCPatcDjl {
  width: 18px;
  height: 18px;
  color: #AF5E00;
  stroke-width: 2.5;
}

.xqRQBV0oydz9jvxG4Llt {
  width: 22px;
  height: 22px;
  color: #d9534f;
  cursor: pointer;
}

.zaTuHr4nTBSMa5rVmE9z {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.V0btY3tUOvZA9QrO2k8_ {
  display: flex;
  gap: 12px;
  background-color: transparent;
  width: 100%;
  align-items: flex-start;
  padding: 8px 0;
}

/* Left side: Image */
.X25pcn9_UZtQD2qk7g5G {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: visible;
  position: relative;
  background-color: var(--wb-cart-cart-card-bg-color, #f5f5f5);
}

.fQjLPKma7i97mTmuBba7 {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* Food-type badge pinned to bottom-left of image */
.uNV63kCicc304U9WuEpd {
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--wb-card-bg-color, #fff);
  padding: 1px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
  object-fit: contain;
}

/* Right side: Details & Controls */
.mN1Oes9kqT4wchn_CE9i {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
}

/* Title Row */
.BVtbfzZygPb9UchSru5z {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.v4nidJWQPWMY0I741KQQ {
  height: 16px;
  width: 16px;
  object-fit: contain;
  /* margin-top: 1px; */
  flex-shrink: 0;
}

.hHupQ6TfAc0c8qtSPhi7 {
  font-size: 16px;
  font-weight: 600;
  color: var(--wb-cart-cart-primary-text-color, var(--text-Primary-1, #171717));
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Variant chip — shows weight/size for grocery */
.LTPaiXG70m0DUcF6iICW {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-button-button-hover-bg-color, #AF5E00);
  background: #FFF3E8;
  border: 1px solid rgba(175, 94, 0, 0.2);
  border-radius: 100px;
  padding: 2px 8px;
  line-height: 1.5;
  width: fit-content;
}

/* Note / Comments Row */
.uijr0nGAxJsrygBhHX6b {
  margin: 0;
  font-size: 14px;
}

.MwEdXY1Hnmo40Up7hpgp {
  color: var(--wb-cart-cart-secondary-text-color, var(--blue-400, #af5e00));
  font-style: italic;
  font-weight: 600;
}

.O_nTpqNdtSWwawpy2grX {
  color: var(--wb-cart-cart-secondary-text-color, var(--grey-n-2, #737373));
  font-style: italic;
  font-weight: 400;
}

/* Addons */
.PrhJxUlaDekaeST_vEb1 {
  font-size: 13px;
  font-weight: 400;
  color: var(--wb-cart-cart-secondary-text-color, #717680);
  margin: 0;
}

/* Edit Button */
.IKK1aItI_kk86RbJDroy {
  color: var(--wb-cart-cart-accent-color, var(--blue-400, #af5e00));
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
  margin-top: 2px;
}

.srARN3ySpLMoXv7og21r {
  display: flex;
  align-items: center;
  gap: 2px;
}

.SzfHvLCrV9wp5Nk6QBXZ {
  height: 14px;
  width: 14px;
  stroke-width: 2.5;
}

.zaxel6ab9oexiOQqsnP0 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Price & Controls Row */
.TStR0FLcaWf0Ld0RWuu8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px; /* Pushes the controls slightly down */
}

.ZUBe478Rf_2RCiKXNhfY {
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-cart-cart-primary-text-color, var(--text-Primary-1, #171717));
  margin: 0;
}

.v7IQicIHEJDTJs8rrPdE {
  display: flex;
  flex-direction: column;
  background-color: var(--wb-cart-cart-bg-color, var(--Surface-White, #ffffff));
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Header */
.E2sJnCqpGsI5m6bueO3K {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.etRMLpP34l0Q9UdV3wFQ {
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-cart-cart-primary-text-color, var(--text-Primary-1, #171717));
  margin: 0;
  margin-top: 4px;
}

/* Right side actions wrapper */
.hi3JvrZNcWMmT1LtWLxM {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-top: 2px;
}

/* Switch to Slotted Button */
.hGAMJFLsc0cMG5J4mVGs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  padding-right: 0;
}

/* Animated Wave Effect on Text */
.XLwt4XnmZ75_h2p2Kl_C {
  font-size: 14px;
  font-weight: 700;
  /* Uses the brownish-orange theme color and a lighter orange for the shine/wave */
  background: linear-gradient(
    90deg,
    var(--wb-cart-cart-accent-color, #b96b42) 0%,
    #f5a623 50%,
    var(--wb-cart-cart-accent-color, #b96b42) 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: RtGAtOu5HuHZmTMeN0fy 2s linear infinite;
}

.TFhkLGn9LFKHOCkfsOyH {
  width: 14px;
  height: 14px;
  color: var(--wb-cart-cart-accent-color, #b96b42);
  stroke-width: 2.5;
}

/* Keyframes for the wave animation */
@keyframes RtGAtOu5HuHZmTMeN0fy {
  to {
    background-position: 200% center;
  }
}

._W1qRmf7cbPwXSDX7wXB {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #d9534f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

._W1qRmf7cbPwXSDX7wXB:hover:not(:disabled) {
  background-color: #fdf0f0;
}

._W1qRmf7cbPwXSDX7wXB:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.xt9kDW6u2rx4RpbpXRj1 {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Delivery Sections */
.fAhxvPQC22dPJvzqPlag {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.fAhxvPQC22dPJvzqPlag:last-child {
  margin-bottom: 0;
}

._AZ0i2OAXqj6WW4vwu9q {
  font-size: 13px;
  font-weight: 500;
  color: var(--wb-cart-cart-secondary-text-color, var(--grey-n-2, #737373));
  margin-bottom: 12px;
}

.geutyUIlze_dxIRcamJO {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Subtle Divider between groups */
.WK6Y_LbvjQe8ID2t4gR6 {
  border-bottom: 1px solid
    var(--wb-cart-cart-border-color, var(--grey-n-3, #efecec));
  margin-bottom: 16px;
  width: 100%;
}

/* Not Available Section */
.TzoTzZ7PVk1sJmh5oFi4 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid
    var(--wb-cart-cart-border-color, var(--grey-n-3, #efecec));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wVvBOD5p4S7aWf2LjyZ2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fdf0f0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #fadcdc;
}

.JgewP1h_bzVk8vPkU0Ow {
  font-size: 13px;
  font-weight: 500;
  color: #c92a2a;
  margin: 0;
}

.xufWDxKBSmREvCM4J33f {
  background: none;
  border: none;
  color: #c92a2a;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.xufWDxKBSmREvCM4J33f:hover:not(:disabled) {
  background-color: #f8d7d7;
}

.xufWDxKBSmREvCM4J33f:disabled {
  cursor: not-allowed;
}

/* Loader Wrapper to keep icon size consistent */
.zQF6YM8Aefb4BMXYm80T {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.FyXDCx31fUBa7wkddy5C {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

.Z9lMjwjSmJtcSsywbqNL {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border: 1.5px solid #F2F2F2;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  will-change: transform;
}

.Z9lMjwjSmJtcSsywbqNL:hover {
  box-shadow: 0 8px 28px rgba(175, 94, 0, 0.11);
  border-color: rgba(175, 94, 0, 0.2);
}

.mrYGeggTMfI50hZIgrtw {
  border-color: rgba(225, 160, 0, 0.3);
  background: linear-gradient(135deg, #FFFDF5 0%, #FFF8E0 100%);
}

.mrYGeggTMfI50hZIgrtw:hover {
  box-shadow: 0 8px 28px rgba(225, 160, 0, 0.15);
  border-color: rgba(225, 160, 0, 0.45);
}

.dQTygBigiWOTpidyevmr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.HxhK8ONmN6YcsyOK9sfZ {
  width: 36px;
  height: 36px;
  background: #FFF0DC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  will-change: transform;
}

.r73nZvsGc2NKl_z90R8w {
  background: #FFF3C4;
  box-shadow: 0 0 0 0 rgba(225, 160, 0, 0.5);
  animation: OAn2Cen2OQhJmY7PHfDA 2s infinite;
}

@keyframes OAn2Cen2OQhJmY7PHfDA {
  0% { box-shadow: 0 0 0 0 rgba(225, 160, 0, 0.4); }
  60% { box-shadow: 0 0 0 8px rgba(225, 160, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 160, 0, 0); }
}

.qB8u82hOX54dAo0UmvK5 {
  width: 20px;
  height: 20px;
  color: #AF5E00;
}

.SiL6ubBSRIncZEb15x1w {
  color: #C98A00;
}

.ziHa9OCnpl5hQmkpzMGW {
  display: flex;
  flex-direction: column;
}

.fB_Uf6HdBrbUtCLyz7uw {
  font-size: 15px;
  font-weight: 600;
  color: #1C1C1C;
  margin: 0;
}

.ab0nd9bAjqqaLp4ryh6K {
  font-size: 14px;
  font-weight: 700;
  color: #B07A00;
  margin: 0;
}

.BYT7NRbmd8YnWXs_xVDi {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd8uvL48XwZMS9t7SL8d {
  width: 18px;
  height: 18px;
  color: #AF5E00;
  stroke-width: 2.5;
}

.KxNcwkblCaQNRpVT2sTg {
  width: 22px;
  height: 22px;
  color: #d9534f;
  cursor: pointer;
}

._sx5HXGzm5zGudAJxzLO {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* ── Fixed checkout bar (mobile) ─────────────────────────────────── */
.cYiyLtq_fZ_PTfE41Oka {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--wb-card-bg-color, #FFFFFF);
  padding: 12px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  z-index: 999;
  border-top: 1px solid var(--wb-border-subtle-color, #EBEBEB);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07);
}

/* ── Checkout row ─────────────────────────────────────────────── */
.sEIx2SWNmySdzKpJe98I {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Left: To Pay info */
.FPsclwZzQcUZxq25HBjw {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.RAgAKM4q4rWf14VUo_Nh {
  font-size: 11px;
  font-weight: 500;
  color: var(--wb-text-secondary-color, #8A8A8A);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.C1RHMNSOSeo2IVrfbLeh {
  font-size: 20px;
  font-weight: 900;
  color: var(--wb-text-primary-color, #1C1C1C);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Right: CTA button (mobile = primary text colour, desktop override = brand colour) */
.ZYoafbXZgrGD2OXCq4CK {
  flex: 1;
  height: 52px;
  background: var(--wb-text-primary-color, #1C1C1C);
  color: var(--wb-button-button-text-color, #FFFFFF);
  border: none;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.ZYoafbXZgrGD2OXCq4CK:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.ZYoafbXZgrGD2OXCq4CK:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.lBGQF6eKTdVCLQ3SA6UB {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.jBmWDAnG6zicrBIXTERH {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.l4n_XY7X5Zrw1MaU4lCV {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Sits above the shimmer sweep */
  position: relative;
  z-index: 1;
}

.vKKFc05_kLk7qT6VqVn9 {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── Busy: the CTA is working, not dead ──────────────────────────
   Must follow :disabled — equal specificity, so source order wins. */
.ZYoafbXZgrGD2OXCq4CK.D4ILatwQT_fPykjFCtN1 {
  opacity: 0.9;
  cursor: progress;
  position: relative;
  overflow: hidden;
}

/* Light sweep, so the wait reads as progress before the label is even read */
.ZYoafbXZgrGD2OXCq4CK.D4ILatwQT_fPykjFCtN1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: UMWlDDxZMhwE1s6lNVDC 1.5s ease-in-out infinite;
}

@keyframes UMWlDDxZMhwE1s6lNVDC {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ZYoafbXZgrGD2OXCq4CK.D4ILatwQT_fPykjFCtN1::after {
    animation: none;
  }
}

/* ── Desktop overrides (MUST stay at bottom so they win the cascade) ── */
@media (min-width: 768px) {
  .cYiyLtq_fZ_PTfE41Oka {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    z-index: auto;
    border-top: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .sEIx2SWNmySdzKpJe98I {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .FPsclwZzQcUZxq25HBjw {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  .RAgAKM4q4rWf14VUo_Nh {
    font-size: 12px;
  }

  .C1RHMNSOSeo2IVrfbLeh {
    font-size: 22px;
  }

  /* Desktop: use brand action colour for the Place Order button */
  .ZYoafbXZgrGD2OXCq4CK {
    flex: none;
    height: 58px;
    width: 100%;
    background: var(--wb-button-button-bg-color, #E17100);
    color: var(--wb-button-button-text-color, #FFFFFF);
    border-radius: 14px;
    /* Shadow derived from brand colour — updated via rgba approximation */
    box-shadow: 0 4px 14px rgba(225, 113, 0, 0.30);
    transition: opacity 0.15s, box-shadow 0.15s;
  }

  .ZYoafbXZgrGD2OXCq4CK:hover {
    opacity: 0.92;
    box-shadow: 0 6px 18px rgba(225, 113, 0, 0.40);
  }
}

.r5B9sCeITWd6CA8ffeyc {
  background: linear-gradient(135deg, #1A1A1A 0%, #2C1800 100%);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(225, 113, 0, 0.35);
  box-shadow:
    0 4px 24px rgba(225, 113, 0, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
  cursor: pointer;
}

.r5B9sCeITWd6CA8ffeyc:hover {
  box-shadow:
    0 8px 36px rgba(225, 113, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.4);
  border-color: rgba(225, 113, 0, 0.6);
}

.nvBjc9fqkKR5leLIf1E0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.PxOuyo5FVGGqHvKqLFOh {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.GHVW225H1zictZEJrX2Q {
  font-size: 11px;
  font-weight: 700;
  color: #1A1A1A;
  background: linear-gradient(90deg, #E17100 0%, #FF9833 100%);
  border: none;
  border-radius: 20px;
  padding: 4px 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(225, 113, 0, 0.4);
}

.GHVW225H1zictZEJrX2Q:hover {
  opacity: 0.9;
  transform: scale(1.04);
}

.ywUHrqT2fDUTRU6YfplW {
  display: flex;
  align-items: center;
  gap: 12px;
}

.RhHq4go3PZlWAeG_qLDz {
  width: 22px;
  height: 22px;
  color: #E17100;
  flex-shrink: 0;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(225, 113, 0, 0.6));
}

.qscftfFErJFfuK1skgfW {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  stroke-width: 2;
}

.AV6roIF2hVy70lQVOvk9 {
  width: 20px;
  height: 20px;
  color: #E17100;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(225, 113, 0, 0.7));
}

.IGxFizGmdnIT7Ra8Ts8O {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fRpGijgK8z_bQBmYkPqH {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
}

.ET3vJkV_zeWHcSygxcrF {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.R2CUftUYq6Fd7oVTujyM {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ── Drag handle ── */
.dsd-drag-handle {
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background: #D8D3CC;
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* ── Header ── */
.dsd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px;
  border-bottom: 1px solid #EDE9E3;
  background: #fff;
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
}
.dsd-header-icon {
  width: 20px;
  height: 20px;
  color: #E17100;
  flex-shrink: 0;
}
.dsd-header-title {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.02em;
  flex: 1;
}
.dsd-header-close {
  width: 32px !important;
  height: 32px !important;
  color: #9E978F !important;
  background: #F0EDE8 !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s !important;
}
.dsd-header-close:hover {
  background: #E5DFD8 !important;
  color: #1C1C1C !important;
}
.dsd-header-close svg {
  font-size: 16px !important;
}

/* ── Scrollable content ── */
.dsd-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 0;
}
.dsd-content::-webkit-scrollbar { display: none; }

.dsd-inner {
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Loader / error ── */
.dsd-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 0;
}
.dsd-error {
  color: #d32f2f;
  text-align: center;
  padding: 32px 24px;
  font-size: 14px;
  font-weight: 500;
}
.dsd-empty {
  text-align: center;
  padding: 32px 24px;
  color: #9E978F;
  font-size: 14px;
}

/* ── Instant delivery card ── */
.dsd-instant-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1C1C1C 0%, #2E2015 60%, #3A2510 100%);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dsd-instant-card.dsd-instant-selected {
  border-color: #E17100;
  box-shadow: 0 0 0 3px rgba(225, 113, 0, 0.18);
}
.dsd-instant-card.dsd-instant-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dsd-instant-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dsd-instant-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.dsd-instant-icon-wrap.dsd-instant-icon-active {
  background: #E17100;
}
.dsd-instant-bolt {
  width: 20px;
  height: 20px;
  color: #F5C97A;
}
.dsd-instant-label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px;
}
.dsd-instant-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.dsd-instant-badge {}
.dsd-badge-selected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #E17100;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}
.dsd-check {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.dsd-badge-available {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
}

/* ── Scheduled section ── */
.dsd-scheduled-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dsd-section-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.dsd-section-icon {
  width: 14px;
  height: 14px;
  color: #9E978F;
}
.dsd-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #9E978F;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Date group ── */
.dsd-date-group {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid #EDE9E3;
}
.dsd-date-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.dsd-date-header:hover {
  background: #FAFAF8;
}
.dsd-date-title {
  font-size: 14px;
  font-weight: 700;
  color: #1C1C1C;
}
.dsd-chevron-wrap {
  color: #9E978F;
  display: flex;
  align-items: center;
}

/* ── Slots grid ── */
.dsd-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 12px 14px;
  overflow: hidden;
}

@media (min-width: 480px) {
  .dsd-slots-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dsd-slot-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 8px;
  border-radius: 10px;
  border: 1.5px solid #EDE9E3;
  background: #FAFAF9;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  text-align: center;
}
.dsd-slot-pill:hover:not(:disabled) {
  border-color: #E17100;
  background: #FFF3E8;
}
.dsd-slot-selected {
  border-color: #E17100 !important;
  background: #FFF3E8 !important;
  box-shadow: 0 0 0 2px rgba(225, 113, 0, 0.15);
}
.dsd-slot-full {
  opacity: 0.4;
  cursor: not-allowed;
}

.dsd-slot-clock {
  width: 14px;
  height: 14px;
  color: #9E978F;
  flex-shrink: 0;
}
.dsd-slot-time {
  font-size: 12px;
  font-weight: 600;
  color: #1C1C1C;
  line-height: 1.2;
  white-space: nowrap;
}
.dsd-slot-full-tag {
  font-size: 10px;
  font-weight: 700;
  color: #d32f2f;
  background: #FDECEA;
  padding: 1px 6px;
  border-radius: 4px;
}
.dsd-slot-check {
  width: 12px;
  height: 12px;
  color: #E17100;
  flex-shrink: 0;
}

/* ── Root container ── */
.r3s05yGT_2qSCZbw6jdT {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 32px 24px 48px;
  background: #F5F3F0;
  overflow: hidden;
}

/* ── Ambient particles SVG (full cover, non-interactive) ── */
.VaKn4o_KggP87dhUVVa2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Glow ring behind bowl ── */
.SjbJKXh8Vz9K16_h4kc0 {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 113, 0, 0.18) 0%, rgba(225, 113, 0, 0) 70%);
  pointer-events: none;
}

/* ── Basket wrapper ── */
.VOC4xaugwMfAAgFE8RQ_ {
  position: relative;
  width: 220px;
  height: auto;
  margin-bottom: 8px;
  z-index: 1;
}

/* ── Basket SVG ── */
.EUwtNa6rW3SOCmhPhchv {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(225, 113, 0, 0.2));
}

/* ── Text block ── */
.Vb2qSRshX95gWqBA2rIR {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 1;
  text-align: center;
  margin-top: 4px;
}

/* ── Overline label ── */
.Zz1G3U2nokYbXDzywyG1 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #E17100;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: 0.7;
}

/* ── Heading ── */
.sW6M5RuO8OiSKVObIGlL {
  font-size: 26px;
  font-weight: 800;
  color: #1C1C1C;
  margin: 0 0 10px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* ── Subtitle ── */
.owoBdYDUykO9nZya4LKR {
  font-size: 14px;
  font-weight: 400;
  color: #6B6560;
  margin: 0 0 32px;
  line-height: 1.5;
  max-width: 240px;
}

/* ── CTA button ── */
.v1aCgAbDbkAMdyJ5_ng5 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #E17100 0%, #AF5E00 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  overflow: hidden;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(225, 113, 0, 0.36), 0 2px 6px rgba(0,0,0,0.12);
  font-family: inherit;
}

.v1aCgAbDbkAMdyJ5_ng5:active {
  box-shadow: 0 4px 12px rgba(225, 113, 0, 0.3);
}

/* Arrow icon */
.efSw9DaYB6h2QOMmUSi9 {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.v1aCgAbDbkAMdyJ5_ng5:hover .efSw9DaYB6h2QOMmUSi9 {
  transform: translateX(3px);
}

/* Shimmer sweep */
.j6KZC7EIEyTOfditDYAb {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  animation: ITg0S2Vv9YMBaD7dxzcl 3s ease-in-out infinite;
}

@keyframes ITg0S2Vv9YMBaD7dxzcl {
  0%   { left: -80%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

.eAHj7QfBztYZ0HTs_gCj {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--wb-cart-cart-bg-color, var(--Surface-White, #ffffff));
  padding: 12px 16px 16px;
  /* Adds padding at the bottom for iPhones with a home indicator */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  z-index: 999;

  border-top: 1.5px solid
    var(--wb-cart-cart-border-color, var(--grey-n-4, #f5f5f5));
}

/* White box wrapper for the info */
.zdldLy1LP85hLRKLt6iH {
  background-color: var(--wb-cart-cart-bg-color, var(--Surface-White, #ffffff));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Text Content */
.HVSelpfxr7Dl6skDvsoY {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bjsTXmW8aerGDD5OMeVL {
  font-size: 18px;
  font-weight: 700;
  color: var(--wb-cart-cart-primary-text-color, var(--text-Primary-1, #171717));
  margin: 0;
}

.jUy99LXIVLJHsq33_Gi2 {
  font-size: 13px;
  font-weight: 500;
  color: var(
    --wb-cart-cart-secondary-text-color,
    var(--text-Secondary-1, #8a93a7)
  );
  margin: 0;
}

/* Main Call to Action Button */
.HakB5WbvW6zY5tUV9fbx {
  width: 100%;
  height: 48px;
  background-color: var(--wb-button-button-bg-color, var(--blue-1, #af5e00));
  color: var(--wb-button-button-text-color, var(--Surface-White, #ffffff));
  border: 1px solid
    var(
      --wb-button-button-border-color,
      var(--wb-button-button-bg-color, var(--blue-1, #af5e00))
    );
  border-radius: var(--wb-button-button-border-radius, 8px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.HakB5WbvW6zY5tUV9fbx:hover {
  background-color: var(--wb-button-button-bg-color, var(--blue-1, #af5e00));
}

.HakB5WbvW6zY5tUV9fbx:active {
  transform: scale(0.98);
}

@media (min-width: 768px) {
  .eAHj7QfBztYZ0HTs_gCj {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    z-index: auto;
    border-top: none;
    box-shadow: none;
    padding: 16px;
    background: var(--wb-card-bg-color, #FFFFFF);
    border-radius: 16px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    max-width: 1100px;
    box-sizing: border-box;
  }
}

.wFoJ6S05S2WQ5NnFy2cg {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  background-color: var(--wb-page-body-bg-color, #F5F3F0);
}

/* ── Sticky header ─────────────────────────────────────────────── */
.qTBvFdil1ublnWLxkXaB {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--wb-card-bg-color, #FFFFFF);
  border-bottom: 1px solid var(--wb-border-subtle-color, #EBEBEB);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.wPucLz_yq5av3U2j1qtT {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 16px 12px;
  background: var(--wb-card-bg-color, #FFFFFF);
}

.ztjMEIlfNgQN0zvgvYZj {
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}

.ztjMEIlfNgQN0zvgvYZj:hover {
  background: #F5F5F5;
}

.ztjMEIlfNgQN0zvgvYZj svg {
  width: 22px;
  height: 22px;
  color: var(--wb-text-primary-color, #1C1C1C);
  fill: var(--wb-text-primary-color, #1C1C1C);
  stroke: var(--wb-text-primary-color, #1C1C1C);
  stroke-width: 2.5;
}

.UkANdB9tYkXyl0qKIXkf {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fWh33f4u4SypVUUwzDvP {
  font-size: 18px;
  font-weight: 800;
  color: var(--wb-text-primary-color, #1C1C1C);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.BisFdU6RY1b_e4SaTjst {
  font-size: 12px;
  font-weight: 500;
  color: var(--wb-text-secondary-color, #6B6B6B);
  margin: 0;
  line-height: 1.2;
}

/* ── Cart content ──────────────────────────────────────────────── */
.VYITZR5NpmxgI6lk5GiA {
  padding: 0 0 10rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.H6kuUiR2pWQp2pXPq2XR {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 0;
}

/* Mobile: interleave columns */
._Vw9B8TrFBDzsgdPdBqm,
.z_lZZEc4oSJu9OAY5ftG {
  display: contents;
}

/* Order for mobile */
.OzSSfxjJZqX_9A5EmaLS { order: 0; }
.jLTwJM22SdcEhPIjLF_1    { order: 1; }
.UmAviS67WyBRS3Wl5X_u      { order: 2; }
.reaUdM1QEnO1DeMfWeog    { order: 3; }
.kBbvHOvgbRgOK_zvAikZ    { order: 4; }

/* ── Section headers ───────────────────────────────────────────── */
.fdRrMc0KDiueH4DIjMnW {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.yokMjYhkpQkZUhQgKlxH {
  width: 3px;
  height: 16px;
  background: linear-gradient(
    180deg,
    var(--wb-button-button-bg-color, #E17100) 0%,
    var(--wb-button-button-hover-bg-color, #AF5E00) 100%
  );
  border-radius: 2px;
  flex-shrink: 0;
}

.G7hzgpHmbhjQm4hcZgjj {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-text-primary-color, #1C1C1C);
  flex: 1;
}

.G7hzgpHmbhjQm4hcZgjj::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background: var(--wb-border-subtle-color, #EBEBEB);
  vertical-align: middle;
  margin-left: 8px;
}

/* ── Cards ─────────────────────────────────────────────────────── */
.UmAviS67WyBRS3Wl5X_u {
  background: var(--wb-card-bg-color, #FFFFFF);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.kBbvHOvgbRgOK_zvAikZ {
  background: var(--wb-card-bg-color, #FFFFFF);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.reaUdM1QEnO1DeMfWeog {
  background: var(--wb-card-bg-color, #FFFFFF);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* ── Checkout visibility split ─────────────────────────────────── */
/* Mobile: show fixed bottom bar, hide inline */
.Ygr4xORssdMWqoRRRGb0 {
  display: none;
}
.U8BBbqPjYsCyc3bi_P3u {
  display: block;
}

/* ── Desktop layout ────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* The global app header (HeaderNew, ~72px, position:sticky) sits above
     this container in the DOM. `height: 100dvh` would overflow the viewport
     by that 72px, cutting off bottom content. Subtract the header height
     so pageContainer fits exactly in the remaining viewport and scrolls
     its own content — no body-scroll dependency needed. */
  .wFoJ6S05S2WQ5NnFy2cg {
    height: calc(100dvh - 72px);
    overflow-y: auto;
  }

  .qTBvFdil1ublnWLxkXaB {
    padding: 0;
    top: 0;
  }

  .wPucLz_yq5av3U2j1qtT {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding-left: 28px;
    padding-right: 28px;
  }

  .VYITZR5NpmxgI6lk5GiA {
    padding-bottom: 7rem;
  }

  .H6kuUiR2pWQp2pXPq2XR {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 20px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 28px 0;
  }

  ._Vw9B8TrFBDzsgdPdBqm,
  .z_lZZEc4oSJu9OAY5ftG {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .OzSSfxjJZqX_9A5EmaLS,
  .jLTwJM22SdcEhPIjLF_1,
  .UmAviS67WyBRS3Wl5X_u,
  .kBbvHOvgbRgOK_zvAikZ,
  .reaUdM1QEnO1DeMfWeog {
    order: 0;
  }

  .z_lZZEc4oSJu9OAY5ftG {
    height: fit-content;
  }

  .UmAviS67WyBRS3Wl5X_u {
    background: var(--wb-card-bg-color, #FFFFFF);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    padding: 16px;
  }

  /* On desktop: show inline checkout, hide fixed mobile bar */
  .Ygr4xORssdMWqoRRRGb0 {
    display: block;
  }
  .U8BBbqPjYsCyc3bi_P3u {
    display: none;
  }

  /* Reduce bottom padding since fixed bar is gone */
  .VYITZR5NpmxgI6lk5GiA {
    padding-bottom: 2rem;
  }
}

.B8F8o9dW6Y2Iw81eZa7l {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: var(--Surface-White, #ffffff);
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

/* Close Button mapping to handleGuestLogin */
.j4qzQs6KveCbwUEKfkUJ {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Surface-White, #ffffff);
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.j4qzQs6KveCbwUEKfkUJ:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Top half with QR dine-in green gradient */
.JQujhYgaJoFHfhKex2m4 {
  background: linear-gradient(90deg, #2e7d32 0%, #1b5e20 100%);
  flex: 0.45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--Surface-White, #ffffff);
  padding: 20px;
}

.I7yDzE4NMfJkD1rp6xoG {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.izXrp3r0xMsy9NuvhNVt {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 10px 0;
  letter-spacing: 0.5px;
}

.empQXLDNhFk7ErW_D7l_ {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* Bottom half holding the input and actions */
.r_rAbDOqwtatqTs3ZyuY {
  flex: 0.55;
  background-color: var(--Surface-White, #ffffff);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}

.BiCtF6UVyIHLs99YKS1V {
  margin-bottom: 24px;
}

.HJjvKDF2LWi_ZpjtJxsZ {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #4a525d;
  margin-bottom: 10px;
}

._6ClgI3ek7wjGAM4Oa68 {
  display: flex;
  gap: 10px;
}

/* Static +91 Box */
.qy6PLsHEg4z9YEhAmcNP {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f5f7;
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-Primary-1, #171717);
}

/* Main Phone Number Input */
.cwDUqr1QNExgYBlfwD4H {
  flex: 1;
  border: 1px solid var(--grey-n-6, #e5e5e5);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text-Primary-1, #171717);
  outline: none;
  background-color: var(--Surface-White, #ffffff);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.cwDUqr1QNExgYBlfwD4H::placeholder {
  color: #8c949d;
  font-weight: 400;
}

.cwDUqr1QNExgYBlfwD4H:focus {
  border-color: #2e7d32;
}

/* Submit Button */
.sM9dvGQh6eaCPPFePceQ {
  background-color: #2e7d32;
  color: var(--Surface-White, #ffffff);
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  margin-bottom: 20px;
  transition: opacity 0.2s ease;
}

.sM9dvGQh6eaCPPFePceQ:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sM9dvGQh6eaCPPFePceQ:not(:disabled):hover {
  opacity: 0.9;
}

/* Bottom small Terms text */
.XXVuVuT5suEoeickDVBo {
  font-size: 12px;
  color: var(--gray-600, #535861);
  text-align: left;
  line-height: 1.6;
  margin: 0;
}

.XXVuVuT5suEoeickDVBo span {
  text-decoration: underline;
  cursor: pointer;
}

.rCqqsK6LwxaHz2Ukz_8f {
  position: relative;
  width: 100%;
}

.CgLyleGgnJ0VgjM8ZWyQ {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.IWQx6IoAistQlHMGfZx7 {
  position: absolute;
  left: 14px;
  color: var(--wb-button-button-bg-color, #AF5E00);
  font-size: 22px !important;
  pointer-events: none;
}

.DXWb8j8RRDoEGQ6ZK0fa {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 42px 0 44px;
  border: 1.5px solid #ececec;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  background: #f8f8f8;
  transition: border-color 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease;
}

.DXWb8j8RRDoEGQ6ZK0fa::placeholder {
  color: #9a9a9a;
}

.DXWb8j8RRDoEGQ6ZK0fa:focus {
  border-color: var(--wb-button-button-bg-color, #AF5E00);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(175, 94, 0, 0.08);
}

.DXWb8j8RRDoEGQ6ZK0fa:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pfZMmaTjDGNfAEOoEppW {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #e8e8e8;
  color: #555;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pfZMmaTjDGNfAEOoEppW:hover {
  background: #dcdcdc;
}

/* Suggestions dropdown */
.Pjuk2inYq9FLmY4OQPtg {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px 0;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.PKgrAQLqtnmtcAHpLhaG {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.PKgrAQLqtnmtcAHpLhaG:hover {
  background: #faf4ec;
}

.OVZ6avDkdt56GDzo8mQj {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #b0b0b0;
  flex-shrink: 0;
}

.wE_teeFHU0SfP4pCmhcv {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ikKpMXcw7mEmy0fhYRG2 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xZnDSRLSgGTlyXwVzR5w {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kQ_SCfn0N_yWSa4YrfIp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #777;
}

.miUXJ46IvJL4h7NZtbXC {
  padding: 14px 16px;
  font-size: 13px;
  color: #999;
  text-align: center;
}

/* ── Positioner: fills the modal, aligns sheet to bottom ─────── */
.l9MfbvAdaYoDw1Mnkez6 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  outline: none;
}

/* ── Bottom sheet ─────────────────────────────────────────────── */
.iFX5LpsBJsTSun5ySQtv {
  pointer-events: all;
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.18);
  outline: none;
  overflow: hidden;
  /* On desktop: card style with bottom spacing */
}

@media (min-width: 640px) {
  .l9MfbvAdaYoDw1Mnkez6 {
    align-items: center;
  }
  .iFX5LpsBJsTSun5ySQtv {
    border-radius: 24px;
    margin-bottom: 0;
    max-width: 460px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  }
  .iqQE6VxW8q3Z_JtJ6wt2 {
    display: none;
  }
}

/* ── Drag handle (mobile only) ────────────────────────────────── */
.iqQE6VxW8q3Z_JtJ6wt2 {
  width: 40px;
  height: 4px;
  background: #E0DDD9;
  border-radius: 100px;
  margin: 12px auto 0;
}

/* ── Header ───────────────────────────────────────────────────── */
.OjdHNob70YIMO2ZSzddk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
}

.yefNkU5xv3w816nwjdDf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.RInb9_Weutk23cobRQNs {
  width: 22px;
  height: 22px;
  color: #E17100;
  flex-shrink: 0;
}

.GgSDj_KpCGHkpaAJ2hCS {
  flex: 1;
  min-width: 0;
}

.Kz4aHkzGeBzy6eEo9uxm {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #1C1C1C;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.XnBdwezHvgvuKJE9fpUZ {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #7A7A7A;
  font-weight: 400;
}

.BcDTxR_Vil8PoJmh44ww {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #F2F0EE;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-top: 2px;
}

.BcDTxR_Vil8PoJmh44ww:hover {
  background: #E6E2DE;
}

.VLyrN9x8scaCaHyMQItU {
  width: 18px;
  height: 18px;
  color: #555;
}

/* ── Body ─────────────────────────────────────────────────────── */
.JNrS6H0D8qeQYGRUAiHA {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 28px;
}

.EqcIslbMyt5597wAnXNF {
  width: 100%;
}

/* ── OR divider ───────────────────────────────────────────────── */
.dGQVmW_tOB1KOC7A0YeF {
  display: flex;
  align-items: center;
  text-align: center;
  color: #ADADAD;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.dGQVmW_tOB1KOC7A0YeF::before,
.dGQVmW_tOB1KOC7A0YeF::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #EDEAE7;
}

.dGQVmW_tOB1KOC7A0YeF span {
  padding: 0 14px;
}

/* ── "Enter Location Manually" button ────────────────────────── */
.VT5x1UJyolAcRP09d0KU {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: #F5F3F0;
  border: 1.5px solid #E8E4DF;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: #3D3D3D;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  letter-spacing: -0.01em;
}

.VT5x1UJyolAcRP09d0KU:hover {
  background: #EDE9E3;
  border-color: #D4C5B0;
}

.VT5x1UJyolAcRP09d0KU:active {
  transform: scale(0.985);
}

.VT5x1UJyolAcRP09d0KU:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bbzc4DTllGcSMmZBoOKL {
  width: 19px;
  height: 19px;
  stroke-width: 2;
  color: #6B6B6B;
  flex-shrink: 0;
}

/* ── Loader row ───────────────────────────────────────────────── */
.VeHx8r3wrYpCXRngWDHY {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  padding: 2px 0;
}

/* ── Not serviceable / cart error ─────────────────────────────── */
.JFx9Gh7y6SN77gzL39uA {
  margin: 0;
  font-size: 13px;
  color: #C0392B;
  background: #FEF0EE;
  border: 1px solid #FAD5D0;
  padding: 11px 14px;
  border-radius: 10px;
  line-height: 1.45;
}

/* ── Login row ────────────────────────────────────────────────── */
._9HocD68FjNxCAtArAa72 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.TDnPo9XX_G7BdCFwUISd {
  width: 16px;
  height: 16px;
  color: #ADADAD;
  flex-shrink: 0;
}

.O13g1mSCaYidi9RZqGeX {
  font-size: 13.5px;
  color: #7A7A7A;
  flex: 1;
}

.Oyxy1ifAKQikQwBaZwsC {
  padding: 7px 18px;
  border: 1.5px solid #D4C5B0;
  border-radius: 100px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #3D3D3D;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.Oyxy1ifAKQikQwBaZwsC:hover {
  border-color: #E17100;
  color: #E17100;
  background: #FFF8F0;
}

/* ── Location hint ────────────────────────────────────────────── */
.A2g3lNO8CwKoo83oDjwF {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #8a4b00;
  background: #fff7ee;
  border: 1px solid #ffe2c2;
  padding: 10px 12px;
  border-radius: 10px;
}

/* ── Location-blocked guidance card ──────────────────────────── */
.uXQAVHZsnnpqQkFwMMaN {
  margin: 10px 0 0;
  background: #fff7ee;
  border: 1.5px solid #ffe2c2;
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iBKU9r0SmguzCdNUKPQm {
  display: flex;
  align-items: center;
  gap: 8px;
}

.CY15TTBnHfRtb64PNBAE {
  width: 18px;
  height: 18px;
  color: #AF5E00;
  flex-shrink: 0;
}

.MJ_PSzuvrqo1ydLuwRDa {
  font-size: 13px;
  font-weight: 700;
  color: #7a3a00;
  margin: 0;
  line-height: 1.3;
}

.x914yCJH70DSDJzgMDUv {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.saNjvytZ_sIzpRZWsjTa {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #5a3000;
}

.c7zSSeJgpRXTgTgRNCTe {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #AF5E00;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.jg8dABedUcwC50ReyzGU {
  font-size: 12px;
  color: #9a6a30;
  margin: 0;
  border-top: 1px solid #ffd8a0;
  padding-top: 8px;
}