/* ===================================================================
   HANDPICKD THEME — presentational skin layer
   Reskins the existing (OneUI/Bootstrap) markup to the Handpickd
   warm gold + beige look. Business logic & markup are untouched;
   this file only overrides visuals. Loaded AFTER main.css/custom.css.
   =================================================================== */

:root {
  --hp-primary: #c4a265;
  --hp-primary-dark: #a88b4a;
  --hp-primary-light: #d4b87a;
  --hp-primary-bg: #f5efe2;
  --hp-bg: #f0edea;
  --hp-bg-warm: #f5f3ef;
  --hp-card: #ffffff;
  --hp-text: #333333;
  --hp-text-2: #888888;
  --hp-text-3: #bbbbbb;
  --hp-veg: #60b246;
  --hp-nonveg: #e43b4f;
  --hp-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --hp-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.1);
  --hp-radius: 16px;
  --hp-radius-sm: 12px;
  --hp-radius-pill: 999px;
  --hp-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --hp-font-hand: "Caveat", cursive;
}

/* -------------------------------------------------------------------
   1. Typography + base surfaces
   ------------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
.content,
.block,
.btn,
p, span, div, a, li,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hp-font) !important;
}

body,
#page-container,
.page-container,
.main-content,
.content-boxed {
  background-color: var(--hp-bg) !important;
  color: var(--hp-text);
}

/* Centered mobile app-shell on wider screens (safe: full-width on phones) */
@media (min-width: 480px) {
  #page-container {
    max-width: 450px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: var(--hp-bg-warm) !important;
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.06);
  }
}

.bg-white,
.bg-light {
  background-color: var(--hp-bg-warm) !important;
}

/* -------------------------------------------------------------------
   2. Brand accent — replace legacy orange/green accents with gold
   ------------------------------------------------------------------- */
.text-primary,
a.text-primary,
.text-warning {
  color: var(--hp-primary) !important;
}

.btn-primary,
.btn-success,
.user-preferred,
.bg-primary {
  background-color: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover {
  background-color: var(--hp-primary-dark) !important;
  border-color: var(--hp-primary-dark) !important;
}

.btn-outline-primary {
  color: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
  background: transparent !important;
}

/* Generic pill styling for primary CTAs */
.btn-primary,
.btn-success {
  border-radius: var(--hp-radius-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 14px rgba(196, 162, 101, 0.28);
}

/* -------------------------------------------------------------------
   3. Top nav / search header
   ------------------------------------------------------------------- */
.sticky-top .block,
.search-box {
  background: var(--hp-bg-warm) !important;
}

.search-input,
.nav-location,
.search-navs-btns {
  background: #fff !important;
}

.search-box {
  border-bottom: 1px solid rgba(196, 162, 101, 0.18);
}

.nav-location-icon {
  color: var(--hp-primary) !important;
}

/* -------------------------------------------------------------------
   4. Restaurant cards (Home) + generic OneUI .block cards
   ------------------------------------------------------------------- */
.restaurant-block .block,
.restaurant-block .block-content {
  background: var(--hp-card) !important;
}

.restaurant-block .block {
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow) !important;
  overflow: hidden;
  margin-left: 12px;
  margin-right: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.restaurant-block .block:active {
  transform: scale(0.99);
}

.restaurant-image {
  border-radius: var(--hp-radius-sm) !important;
}

.restaurant-info > div,
.restaurant-info .text-dark {
  color: var(--hp-text) !important;
  font-weight: 600;
}

.restaurant-count {
  color: var(--hp-text-2) !important;
  letter-spacing: 0.4px;
}

/* Featured ribbon → gold */
.ribbon-warning .ribbon-box,
.ribbon-bookmark.ribbon-warning .ribbon-box {
  background-color: var(--hp-primary) !important;
}
.ribbon-bookmark.ribbon-warning .ribbon-box::before {
  border-color: var(--hp-primary-dark) !important;
  border-right-color: transparent !important;
}

/* Mock search block on home */
.mock-search-block > div {
  background: #fff !important;
  border-radius: var(--hp-radius-pill) !important;
  box-shadow: var(--hp-shadow) !important;
  color: var(--hp-text-2);
  padding: 12px 18px !important;
  border: 1px solid rgba(196, 162, 101, 0.18);
}
.mock-search-block .si-magnifier {
  color: var(--hp-primary) !important;
}

/* Preference toggle (delivery / self-pickup) */
.btn-preference-group {
  border: 1px solid rgba(196, 162, 101, 0.35) !important;
  border-radius: var(--hp-radius-pill) !important;
  overflow: hidden;
}
.btn-preference.user-preferred {
  background-color: var(--hp-primary) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------
   5. Item / menu cards + add buttons
   ------------------------------------------------------------------- */
.food-item,
.item-card,
.menu-item,
.store-item-card {
  background: var(--hp-card) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow) !important;
}

/* "ADD" style buttons commonly styled green — make them gold-outlined */
.add-to-cart,
.btn-add,
.add-btn,
.increment,
.decrement,
.qty-btn {
  color: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
}

.increment,
.qty-value,
.decrement {
  color: var(--hp-primary) !important;
}

/* Category chips / sliders */
.store-category-slider .active,
.category-active,
.slider-item.active {
  color: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
}

/* -------------------------------------------------------------------
   6. Footer / bottom navigation
   ------------------------------------------------------------------- */
.footer-fixed,
.footer-float {
  background: #fff !important;
  border-top: 1px solid rgba(196, 162, 101, 0.15);
}
.footer-float {
  border-radius: var(--hp-radius) var(--hp-radius) 0 0 !important;
  margin: 0 8px;
}

.footer-links {
  color: var(--hp-text-2) !important;
}
.footer-links .si {
  color: var(--hp-text-3);
  transition: color 0.2s ease;
}
.footer-links .active-footer-tab {
  color: var(--hp-primary) !important;
  font-weight: 700;
}
.footer-links:hover .si,
.active-footer-tab ~ .si {
  color: var(--hp-primary) !important;
}

/* Cart badge */
.cart-quantity-badge {
  background-color: var(--hp-primary) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------
   7. Cart / checkout accents
   ------------------------------------------------------------------- */
.cart-page,
.checkout-page {
  background: var(--hp-bg) !important;
}

.bill-details,
.cart-item,
.address-card,
.payment-option {
  background: var(--hp-card) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow) !important;
}

.grand-total,
.total-amount,
.price-highlight {
  color: var(--hp-primary-dark) !important;
}

/* Sticky checkout / place-order bar */
.place-order,
.checkout-btn,
.proceed-btn {
  background-color: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
  color: #fff !important;
  border-radius: var(--hp-radius-pill) !important;
}

/* -------------------------------------------------------------------
   8. Misc — spinners, links, veg/non-veg dots kept semantic
   ------------------------------------------------------------------- */
a:not(.btn):hover {
  color: var(--hp-primary-dark);
}

.spinner-border,
.loader {
  color: var(--hp-primary) !important;
}

/* Selection colour */
::selection {
  background: rgba(196, 162, 101, 0.25);
}

/* ===================================================================
   9. MENU PAGE — Handpickd category grid layout (stores/:slug)
   Replaces list rows + bottom 5-tab footer with grid + floating nav
   =================================================================== */

/* Hide legacy restaurant hero / back header on menu page */
.hp-menu-page .hp-menu-page__restaurant-info {
  display: none !important;
}

/* Top bar sits above sticky category tabs */
.hp-menu-page .hp-subcategory-tabs {
  top: 56px;
}

/* Side drawer open — dim main content slightly */
.hp-menu-page.hp-menu-page--drawer-open .hp-menu-page__content {
  pointer-events: none;
}

/* Hide legacy bottom footer & MENU fab on menu page */
.hp-menu-page .footer-fixed,
.hp-menu-page .footer-float,
.hp-menu-page .menu-button-block-main,
.hp-menu-page .menu-list-container {
  display: none !important;
}

/* Hide horizontal float-cart bar; cart via HPBottomNav */
.hp-menu-page .float-cart {
  display: none !important;
}

.hp-menu-page {
  background: var(--hp-bg) !important;
  padding-bottom: 88px !important;
}

.hp-menu-page .bg-grey-light,
.hp-menu-page .hp-menu-list {
  background: var(--hp-bg) !important;
}

/* Collapsed search — revealed when floating search tapped */
.hp-menu-page .hp-search-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}

.hp-menu-page .hp-search-wrap.hp-search-wrap--open {
  max-height: 80px;
  opacity: 1;
  margin-top: 0 !important;
  padding: 8px 12px !important;
  order: -1;
}

/* -------------------------------------------------------------------
   10. HOME PAGE — top wallet bar + floating nav, no footer
   ------------------------------------------------------------------- */
.hp-home-page {
  background: var(--hp-bg) !important;
  padding-bottom: 88px !important;
}

.hp-home-page .footer-fixed,
.hp-home-page .footer-float {
  display: none !important;
}

.hp-home-location {
  display: flex;
  align-items: center;
  width: calc(100% - 28px);
  margin: 0 14px 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(196, 162, 101, 0.2);
  border-radius: var(--hp-radius-pill);
  box-shadow: var(--hp-shadow);
  font-family: var(--hp-font);
  font-size: 0.85rem;
  color: var(--hp-text);
  cursor: pointer;
}

.hp-home-location .si-arrow-right {
  color: var(--hp-primary);
  font-size: 0.65rem;
}

/* Restaurant discovery cards — horizontal hybrid: thumb + info, featured on card */
.hp-home-page .restaurant-block .hp-home-rest-card {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px !important;
  padding: 12px !important;
  overflow: hidden;
  text-align: left !important;
}

/* Reset legacy custom.css float layout (float + negative margins) */
.hp-home-page .hp-home-rest-card .restaurant-image {
  float: none !important;
  margin-top: 0 !important;
  height: auto !important;
}

.hp-home-page .hp-home-rest-card .restaurant-info {
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

.hp-home-page .hp-home-rest-card .restaurant-meta {
  margin-top: 0 !important;
}

.hp-home-rest-card__featured {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 8px 8px 8px 0;
  background: var(--hp-primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(196, 162, 101, 0.4);
  pointer-events: none;
}

.hp-home-rest-card__thumb {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-width: 92px;
  height: 92px;
  border-radius: 12px;
  background: var(--hp-primary-bg);
  overflow: hidden;
}

.hp-home-page .hp-home-rest-card .restaurant-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 92px !important;
  max-height: 92px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: transparent;
  object-position: center;
}

.hp-home-rest-card__body {
  min-width: 0;
  flex: 1;
  padding: 2px 0 0 !important;
}

.hp-home-rest-card--featured .hp-home-rest-card__body {
  padding-right: 72px !important;
}

.hp-home-rest-card--featured .hp-home-rest-card__name {
  padding-right: 4px;
}

.hp-home-rest-card__body > .font-w600,
.hp-home-rest-card__name {
  overflow: hidden;
  margin-bottom: 2px !important;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-home-rest-card__body > .font-size-sm,
.hp-home-rest-card__desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-home-rest-card__divider {
  display: block !important;
  margin: 8px 0 7px !important;
  border: 0;
  border-top: 1px solid rgba(196, 162, 101, 0.18) !important;
  opacity: 1;
}

.hp-home-rest-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 5px;
  margin-top: 0 !important;
  text-align: left !important;
}

.hp-home-rest-card__meta .hp-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--hp-bg-warm);
  color: var(--hp-text-2);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.hp-home-rest-card__meta .hp-meta-pill--rating {
  background: #f1f8ec;
  color: var(--hp-veg);
}

.hp-home-rest-card__meta .hp-meta-pill--rating .fa-star {
  color: var(--hp-primary);
}

/* -------------------------------------------------------------------
   10b. EXPLORE PAGE — marketplace search shell + Handpickd nav
   ------------------------------------------------------------------- */
.hp-explore-page {
  min-height: 100vh;
  background: var(--hp-bg) !important;
  padding-bottom: 88px !important;
}

.hp-explore-page .footer-fixed,
.hp-explore-page .footer-float {
  display: none !important;
}

.hp-explore-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  background: var(--hp-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.hp-explore-search__back {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--hp-text);
  box-shadow: var(--hp-shadow);
  cursor: pointer;
}

.hp-explore-search__back .si-arrow-left {
  font-size: 0.85rem;
}

.hp-explore-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.hp-explore-search__input {
  width: 100%;
  padding: 12px 42px 12px 16px;
  border: 1px solid rgba(196, 162, 101, 0.18);
  border-radius: var(--hp-radius-pill);
  background: #fff;
  box-shadow: var(--hp-shadow);
  color: var(--hp-text);
  font-family: var(--hp-font);
  font-size: 0.9rem;
  outline: none;
}

.hp-explore-search__input::placeholder {
  color: var(--hp-text-2);
}

.hp-explore-search__input:focus {
  border-color: rgba(196, 162, 101, 0.45);
}

.hp-explore-search__icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--hp-primary);
  font-size: 0.95rem;
  pointer-events: none;
}

.hp-explore-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 24px;
  text-align: center;
}

.hp-explore-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--hp-primary-bg);
  color: var(--hp-primary);
  font-size: 1.6rem;
}

.hp-explore-empty__title {
  margin: 0 0 6px;
  color: var(--hp-text);
  font-size: 1rem;
  font-weight: 700;
}

.hp-explore-empty__hint {
  margin: 0;
  color: var(--hp-text-2);
  font-size: 0.82rem;
  line-height: 1.4;
}

.hp-explore-message {
  margin: 12px 14px;
  padding: 12px 14px;
  border-radius: var(--hp-radius-sm);
  font-size: 0.85rem;
  line-height: 1.35;
}

.hp-explore-message--error {
  background: #fff5f5;
  color: #b42318;
  border: 1px solid rgba(228, 59, 79, 0.2);
}

.hp-explore-message--empty {
  background: var(--hp-card);
  color: var(--hp-text-2);
  border: 1px solid rgba(196, 162, 101, 0.15);
  text-align: center;
}

.hp-explore-loader {
  padding: 8px 0;
}

/* -------------------------------------------------------------------
   11. MARKETPLACE SEARCH — cross-restaurant dish + store results
   ------------------------------------------------------------------- */
.hp-search-results {
  background: var(--hp-bg-warm);
  padding: 2px 0 86px;
}

.hp-search-results__title {
  padding: 14px 16px 4px;
  color: var(--hp-text);
  font-size: 1.1rem;
  font-weight: 700;
}

.hp-search-section {
  padding: 0 12px;
}

.hp-search-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 3px 8px;
}

.hp-search-section__head h2 {
  margin: 0;
  color: var(--hp-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.hp-search-section__head span {
  color: var(--hp-text-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.hp-item-result {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  margin-bottom: 10px;
  padding: 10px;
  background: var(--hp-card);
  border-radius: var(--hp-radius-sm);
  box-shadow: var(--hp-shadow);
  color: inherit !important;
  text-decoration: none !important;
}

.hp-item-result:active,
.hp-search-restaurant:active {
  transform: scale(0.99);
}

.hp-item-result__media {
  position: relative;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  overflow: visible;
}

.hp-item-result__media img.hp-item-result__thumb,
.hp-item-result__placeholder {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
}

.hp-item-result__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-primary-bg);
  color: var(--hp-primary);
}

.hp-item-result__veg-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  width: 14px !important;
  height: 14px !important;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.hp-item-result__body {
  flex: 1;
  min-width: 0;
}

.hp-item-result__name,
.hp-search-restaurant__name {
  overflow: hidden;
  color: var(--hp-text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-item-result__restaurant,
.hp-search-restaurant__description {
  overflow: hidden;
  margin-top: 3px;
  color: var(--hp-text-2);
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-item-result__restaurant strong {
  color: var(--hp-primary-dark);
  font-weight: 700;
}

.hp-item-result__price {
  margin-top: 4px;
  color: var(--hp-text);
  font-size: 0.8rem;
  font-weight: 700;
}

.hp-item-result__view {
  flex-shrink: 0;
  padding: 6px 10px;
  border: 1.5px solid var(--hp-primary);
  border-radius: 9px;
  color: var(--hp-primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
}

.hp-search-restaurant {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 11px;
  border: 0;
  border-radius: var(--hp-radius);
  background: var(--hp-card);
  box-shadow: var(--hp-shadow);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease;
}

.hp-search-restaurant__media {
  position: relative;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
}

.hp-search-restaurant__media img {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: var(--hp-primary-bg);
  object-fit: cover;
}

.hp-search-restaurant__featured {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 3px 7px;
  border-radius: 7px 7px 7px 0;
  background: var(--hp-primary);
  box-shadow: 0 2px 6px rgba(196, 162, 101, 0.4);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
}

.hp-search-restaurant__body {
  min-width: 0;
  flex: 1;
}

.hp-search-restaurant__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.hp-meta-pill {
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--hp-bg-warm);
  color: var(--hp-text-2);
  font-size: 0.66rem;
  font-weight: 600;
}

.hp-meta-pill--rating {
  background: #f1f8ec;
  color: var(--hp-veg);
}

.hp-menu-page .items-search-box {
  border-radius: var(--hp-radius-pill) !important;
  background: #fff !important;
  border: 1px solid rgba(196, 162, 101, 0.2) !important;
}

/* Hide legacy circular category slider — replaced by HPSubCategoryTabs */
.hp-menu-page .secondary-slider-wrapper {
  display: none !important;
}

/* Full-width content column */
.hp-menu-page .hp-menu-list,
.hp-menu-page .hp-menu-list > div,
.hp-menu-page .hp-category-section,
.hp-menu-page .Collapsible,
.hp-menu-page .Collapsible__contentOuter,
.hp-menu-page .Collapsible__contentInner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.hp-menu-page .hp-menu-list {
  padding: 0 8px !important;
}

/* Category tab sticking from left (Handpickd "≡ Dairy" style) */
.hp-menu-page .item-menu-category-header.Collapsible__trigger,
.hp-menu-page .item-menu-category-header.Collapsible__trigger.is-open {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  max-width: calc(100% - 24px);
  margin: 14px 0 10px !important;
  padding: 10px 18px 10px 14px !important;
  background: linear-gradient(135deg, #c4a265, #a88b4a) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 22px 22px 0 !important;
  font-family: "Caveat", cursive !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(196, 162, 101, 0.35);
}

.hp-menu-page .item-menu-category-header.Collapsible__trigger::before {
  content: "≡";
  font-family: var(--hp-font) !important;
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
}

.hp-menu-page .item-menu-category-header.Collapsible__trigger::after {
  display: none !important;
}

.hp-menu-page .Collapsible {
  background: transparent !important;
}

/* Hide nested sub-category accordion headers — show flat grid */
.hp-menu-page .Collapsible .Collapsible__trigger:not(.item-menu-category-header) {
  display: none !important;
}

.hp-menu-page .Collapsible .Collapsible__contentOuter {
  height: auto !important;
  overflow: visible !important;
}

/* ---- 3-column product grid (Handpickd) ---- */
.hp-menu-page .hp-product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px 8px !important;
  width: 100% !important;
  padding: 6px 6px 18px !important;
  box-sizing: border-box;
  align-items: stretch;
}

/* ------------------------------------------------------------------
   Product card — ROBUST flex column.
   Only relies on the 3 direct children of .hp-product-card:
     1) .item-list-thumb-wrap (image)   -> order 1
     2) .flex-item-name (name + price)  -> order 2
     3) .item-actions (+/- buttons)     -> absolute, top-right
   No display:contents (that previously exploded flex-item-name's
   children and broke the layout, esp. for addon items).
   ------------------------------------------------------------------ */
.hp-menu-page .hp-product-grid .hp-product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 8px 10px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
  box-sizing: border-box;
  overflow: hidden;
  float: none !important;
  column-gap: 0 !important;
}

/* Image wrapper */
.hp-menu-page .hp-product-card .item-list-thumb-wrap {
  order: 1;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 2;
}

.hp-menu-page .hp-product-card .item-list-thumb-link {
  width: 100%;
  display: block;
}

.hp-menu-page .hp-product-card .flex-item-image {
  width: 100% !important;
  max-width: 100% !important;
  height: 82px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  float: none !important;
  margin: 0 !important;
}

/* Name + price block (stacked) */
.hp-menu-page .hp-product-card .flex-item-name {
  order: 2;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 2px 0 !important;
  flex-grow: 0 !important;
  border: none !important;
}

.hp-menu-page .hp-product-card .item-name {
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: var(--hp-text) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: none !important;
}

.hp-menu-page .hp-product-card .item-price {
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  color: var(--hp-text-2) !important;
  font-weight: 700 !important;
  margin: 3px 0 0 !important;
}

.hp-menu-page .hp-product-card .item-price .strike-text {
  font-weight: 400 !important;
  text-decoration: line-through;
  color: var(--hp-text-3) !important;
}

/* +/- action buttons — own row at bottom-right (in normal flow, no overlap) */
.hp-menu-page .hp-product-card .item-actions {
  order: 3;
  position: static !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  margin-top: auto !important;
}

.hp-menu-page .hp-product-card .item-actions .btn-group {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #fff;
  display: inline-flex !important;
  align-items: center;
}

.hp-menu-page .hp-product-card .item-qty-count {
  min-width: 1.25rem;
  padding: 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hp-primary) !important;
  text-align: center;
  line-height: 1;
  user-select: none;
}

.hp-menu-page .hp-product-card .item-qty-count .si-check {
  font-size: 0.7rem;
  line-height: 1;
}

.hp-menu-page .hp-product-card .btn-add-remove {
  width: 2.1rem !important;
  height: 1.9rem !important;
  min-height: 0 !important;
  border-radius: 9px !important;
  border: 1.5px solid var(--hp-primary) !important;
  background: #fff !important;
  padding: 0 !important;
}

.hp-menu-page .hp-product-card .btn-dec,
.hp-menu-page .hp-product-card .btn-inc {
  color: var(--hp-primary) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* Hide noisy bits inside the compact card */
.hp-menu-page .hp-product-card .item-badge-collection,
.hp-menu-page .hp-product-card .item-badge,
.hp-menu-page .hp-product-card .react-show-more,
.hp-menu-page .hp-product-card .show-more,
.hp-menu-page .hp-product-card .item-description-text,
.hp-menu-page .hp-product-card .price-percentage-discount,
.hp-menu-page .hp-product-card .customizable-item-text,
.hp-menu-page .hp-product-card br {
  display: none !important;
}

/* Veg / non-veg dot — top-left of image */
.hp-menu-page .hp-product-card .veg-non-veg-badge,
.hp-menu-page .hp-product-card .veg-non-veg-badge-noimage {
  width: 12px !important;
  height: 12px !important;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
}

/* "Out of stock" / unavailable stack — keep compact */
.hp-menu-page .hp-product-card .item-unavailable-zomato-stack {
  transform: translate(-50%, 10%) scale(0.85);
}

/* ===================================================================
   10. ADDON / CUSTOMIZATION MODAL — Handpickd clean sheet
   =================================================================== */
[class*="styles_overlay__"] {
  align-items: flex-end !important;
  padding: 0 !important;
}

[class*="styles_modal__"] {
  border-radius: 22px 22px 0 0 !important;
  padding: 10px 16px 18px !important;
  max-width: 450px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: var(--hp-card) !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
}

[class*="styles_closeButton__"] {
  background: #f1ede4 !important;
  border-radius: 50% !important;
  padding: 6px !important;
  top: 12px !important;
  right: 14px !important;
}

[class*="styles_closeButton__"] svg {
  fill: var(--hp-text) !important;
}

/* Modal heading */
[class*="styles_modal__"] h3 {
  font-family: "Outfit", sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--hp-text) !important;
  margin-top: 0.5rem !important;
}

[class*="styles_modal__"] > div {
  margin-top: 1.5rem !important;
}

[class*="styles_modal__"] hr {
  border-color: #eee !important;
}

/* Addon category label */
.addon-category-name {
  font-family: "Caveat", cursive !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--hp-primary-dark) !important;
  margin-bottom: 10px !important;
}

/* Each addon row → card */
.addon-list {
  background: var(--hp-bg) !important;
  border: 1px solid #efe9dd !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  gap: 6px;
  flex-wrap: wrap;
}

.addon-list > div:first-child {
  width: auto !important;
  flex: 1 1 45% !important;
  font-weight: 600;
  color: var(--hp-text) !important;
  font-size: 0.9rem;
}

.addon-label-price {
  color: var(--hp-primary-dark) !important;
  font-weight: 700;
}

/* qty +/- group inside addon row */
.addon-list .btn-group {
  width: auto !important;
  gap: 8px;
  flex: 0 0 auto !important;
}

.addon-list .btn-add-remove {
  width: 2.4rem !important;
  height: 2.2rem !important;
  min-height: 0 !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--hp-primary) !important;
  background: #fff !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.addon-list .btn-add-remove .btn-dec,
.addon-list .btn-add-remove .btn-inc {
  color: var(--hp-primary) !important;
  font-size: 1.15rem !important;
  line-height: 1;
}

.addon-list > div:nth-child(3),
.addon-list > div:nth-child(4) {
  width: auto !important;
  flex: 0 0 auto !important;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hp-text-2) !important;
}

/* Alerts inside modal */
[class*="styles_modal__"] .alert {
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  border: none !important;
}

[class*="styles_modal__"] .alert-info {
  background: #fbf5e8 !important;
  color: var(--hp-primary-dark) !important;
}

[class*="styles_modal__"] .alert-danger {
  background: #fdeaea !important;
  color: #b4453a !important;
}

[class*="styles_modal__"] .btn-danger {
  border-radius: 20px !important;
  background: #b4453a !important;
  border: none !important;
}

/* Done / Add button */
.btn-customization-done {
  width: 100% !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, var(--hp-primary), var(--hp-primary-dark)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px !important;
  border: none !important;
  margin-top: 8px !important;
  box-shadow: 0 6px 18px rgba(196, 162, 101, 0.4) !important;
}

/* ===================================================================
   11. CART PAGE — item rows + remove
   =================================================================== */
.cart-item {
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}

.cart-quantity-badge {
  background: var(--hp-primary) !important;
  color: #fff !important;
}

/* ===================================================================
   12. DELIVERY APP — scoped Handpickd light skin
   Delivery pages tag <body> with the legacy ".delivery-dark-bg" hook.
   Rather than a mismatched dark UI, everything below reskins it to the
   same warm gold + white look as the customer app, while keeping the
   delivery app's semantic status colours (green = earnings/completed,
   orange = on-going, red = errors). Every rule is scoped under
   "body.delivery-dark-bg" so the customer-facing app is untouched.
   =================================================================== */

/* Login form section reuses the ".delivery-dark-bg" class name itself
   as a plain wrapper — repaint it to a warm card instead of navy */
body.delivery-dark-bg .height-70.delivery-dark-bg {
  background-color: var(--hp-bg-warm) !important;
}

/* ---- Shared "dark nav" header ---------------------------------------
   Used by: Orders tab header, Account header, ViewOrder's BackWithSearch */
body.delivery-dark-bg .nav-dark {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
  box-shadow: var(--hp-shadow);
}

body.delivery-dark-bg .search-navs-btns,
body.delivery-dark-bg p.search-input {
  background: var(--hp-card) !important;
  color: var(--hp-text) !important;
}

body.delivery-dark-bg .search-navs-btns > i,
body.delivery-dark-bg .search-input .nav-page-title {
  color: var(--hp-text) !important;
}

body.delivery-dark-bg .search-box {
  background: var(--hp-bg-warm) !important;
}

body.delivery-dark-bg .delivery-tab-title {
  color: var(--hp-text) !important;
  font-weight: 700;
}

body.delivery-dark-bg .btn-refreshOrders,
body.delivery-dark-bg .btn-delivery-logout {
  background-color: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
  color: #fff !important;
  border-radius: var(--hp-radius-pill) !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(196, 162, 101, 0.28);
}

/* ---- Bottom tab bar (react-tabs) ------------------------------------- */
body.delivery-dark-bg .react-tabs__tab-list {
  background-color: var(--hp-card) !important;
  border-top: 1px solid rgba(196, 162, 101, 0.15) !important;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
}

body.delivery-dark-bg .react-tabs__tab {
  color: var(--hp-text-3) !important;
}

body.delivery-dark-bg .react-tabs__tab--selected {
  background: var(--hp-primary-bg) !important;
  color: var(--hp-primary-dark) !important;
  font-weight: 700;
}

/* ---- Order list cards (New / Accepted / Picked-up) ------------------- */
body.delivery-dark-bg .delivery-list-wrapper .delivery-list-item {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
  border-radius: var(--hp-radius-sm) !important;
  box-shadow: var(--hp-shadow) !important;
}

body.delivery-dark-bg .list-delivery-store-name {
  color: var(--hp-primary-dark) !important;
}

body.delivery-dark-bg .list-delivery-commission {
  color: #18c775 !important;
}

body.delivery-dark-bg p.text-center.text-muted.bg-white {
  background: var(--hp-card) !important;
  color: var(--hp-text-2) !important;
  border-radius: var(--hp-radius-sm);
}

/* ---- Login page -------------------------------------------------------- */
body.delivery-dark-bg .delivery-login-title {
  color: var(--hp-text) !important;
}
body.delivery-dark-bg .delivery-login-subtitle {
  color: var(--hp-text-2) !important;
}
body.delivery-dark-bg .delivery-login-input {
  background-color: #fff !important;
  color: var(--hp-text) !important;
  border: 1px solid rgba(196, 162, 101, 0.25) !important;
  border-radius: var(--hp-radius-sm) !important;
}
body.delivery-dark-bg .delivery-login-input:focus {
  background-color: #fff !important;
  border-color: var(--hp-primary) !important;
}
body.delivery-dark-bg .delivery-login-button {
  background-color: var(--hp-primary) !important;
  color: #fff !important;
  border-radius: var(--hp-radius-pill) !important;
  box-shadow: 0 4px 14px rgba(196, 162, 101, 0.28);
}
body.delivery-dark-bg .delivery-language-select {
  background-color: #fff !important;
  color: var(--hp-text) !important;
  border: 1px solid rgba(196, 162, 101, 0.25) !important;
}

/* ---- Account page ------------------------------------------------------- */
body.delivery-dark-bg .delivery-block-transparent {
  background-color: var(--hp-card) !important;
  border: 1px solid rgba(196, 162, 101, 0.15);
  box-shadow: var(--hp-shadow) !important;
}
body.delivery-dark-bg .delivery-block-transparent .text-white {
  color: var(--hp-text) !important;
}

body.delivery-dark-bg .delivery-account-orders-block {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
  border-radius: var(--hp-radius-sm) !important;
  box-shadow: var(--hp-shadow) !important;
}
body.delivery-dark-bg .delivery-account-orders-block .text-white {
  color: var(--hp-text) !important;
}

/* ---- ViewOrder page ------------------------------------------------------ */
body.delivery-dark-bg .single-order-earnings-block {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
  box-shadow: var(--hp-shadow) !important;
}
body.delivery-dark-bg .single-order-total-earnings {
  color: #18c775 !important;
}
body.delivery-dark-bg .single-item-division-hr {
  border-color: rgba(196, 162, 101, 0.3) !important;
}

body.delivery-dark-bg .single-order-metas {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
}
body.delivery-dark-bg .delivery-address-timeline {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
}
body.delivery-dark-bg .delivery-address-timeline::before {
  background-color: var(--hp-card) !important;
  background-image: linear-gradient(
    rgba(196, 162, 101, 0.4) 33%,
    rgba(255, 255, 255, 0) 0%
  ) !important;
}
body.delivery-dark-bg .bg-del-timeline-icon {
  background-color: var(--hp-primary-bg) !important;
  color: var(--hp-primary-dark) !important;
}
body.delivery-dark-bg .btn-get-direction,
body.delivery-dark-bg .delivery-address-timeline .btn-get-direction {
  background-color: var(--hp-primary) !important;
  color: #fff !important;
  border-radius: var(--hp-radius-pill) !important;
  border: 0 !important;
}

body.delivery-dark-bg .single-order-items-title {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
}
body.delivery-dark-bg .single-order-items-list {
  background-color: var(--hp-card) !important;
  color: var(--hp-text) !important;
}
body.delivery-dark-bg .single-order-items-list .text-white {
  color: var(--hp-text) !important;
}

body.delivery-dark-bg .btn-cod {
  background-color: #fdf7ec !important;
  color: var(--hp-primary-dark) !important;
  border: 2px dashed var(--hp-primary) !important;
}
body.delivery-dark-bg .btn-payed-online {
  background-color: #fff !important;
  border: 3px dashed var(--hp-veg) !important;
  color: var(--hp-text) !important;
}
body.delivery-dark-bg .delivery-pin-block input {
  background-color: #fff !important;
  color: var(--hp-text) !important;
  border: 1px solid rgba(196, 162, 101, 0.3) !important;
}
body.delivery-dark-bg .delivery-pin-block input:focus {
  background-color: #fff !important;
  border-color: var(--hp-primary) !important;
}

body.delivery-dark-bg .delivery-error {
  background-color: #e43b4f !important;
  color: #fff !important;
}

/* ---- Swipe-to-confirm button (Accept / Picked Up / Delivered) ---------- */
body.delivery-dark-bg .rsbContainer,
body.delivery-dark-bg .slider-bg-color {
  background: linear-gradient(135deg, var(--hp-primary), var(--hp-primary-dark)) !important;
  box-shadow: 0 -4px 18px rgba(196, 162, 101, 0.35) !important;
}

body.delivery-dark-bg .rsbcSlider {
  background: var(--hp-primary-dark) !important;
  box-shadow: 2px 1px 6px 2px rgba(168, 139, 74, 0.45) !important;
}

body.delivery-dark-bg .rsbcSliderCircle {
  background: var(--hp-primary-dark) !important;
}

body.delivery-dark-bg .rsbcText,
body.delivery-dark-bg .rsbcSliderText {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Completed state button at the bottom */
body.delivery-dark-bg .btn-accept {
  background-color: var(--hp-primary) !important;
  color: #fff !important;
}

/* ---- Order history / earning status pills ----------------------------- */
body.delivery-dark-bg .btn-delivery-success,
body.delivery-dark-bg .delivery-wallet-deposit {
  border-radius: var(--hp-radius-pill) !important;
}

body.delivery-dark-bg .btn-delivery-ongoing,
body.delivery-dark-bg .delivery-wallet-withdraw {
  border-radius: var(--hp-radius-pill) !important;
}

/* ---- Misc leftovers ---------------------------------------------------- */
/* Loading overlay while order status updates */
body.delivery-dark-bg .overlay-loading {
  background-color: rgba(240, 237, 234, 0.85) !important;
}

/* Login error toast */
body.delivery-dark-bg .auth-error {
  background-color: #e43b4f !important;
  color: #fff !important;
}

/* Form labels (login + delivery pin) readable on beige */
body.delivery-dark-bg .edit-address-input-label {
  color: var(--hp-text-2) !important;
}