/*
  v215 Customer Branding + App Store Readiness
  Scope: customer ordering site only (.shop-page).
  Purpose:
  - Remove the remaining hardcoded/glowing hero pseudo panel from v213.
  - Make hero card, search, benefit cards, category rail, menu cards, cart panel and overlays follow Admin Branding variables.
  - Add native-wrapper/PWA safe-area and scroll stability styles.
*/
.shop-page{
  --cp-brand: var(--brand, var(--customer-theme-color, #f97316)) !important;
  --cp-ink: var(--ink, #0f172a) !important;
  --cp-bg: var(--customer-bg, #fffaf4) !important;
  --cp-card-base: var(--customer-card-bg, #ffffff) !important;
  --cp-card: color-mix(in srgb, var(--cp-card-base), transparent 3%) !important;
  --cp-muted: color-mix(in srgb, var(--cp-ink), transparent 42%) !important;
  --cp-line: color-mix(in srgb, var(--cp-ink), transparent 89%) !important;
  --cp-brand-soft: color-mix(in srgb, var(--cp-brand), white 90%) !important;
  --cp-brand-border: color-mix(in srgb, var(--cp-brand), white 68%) !important;
  --cp-shadow-brand: 0 18px 38px color-mix(in srgb, var(--cp-brand), transparent 82%) !important;
  --cp-shadow-neutral: 0 16px 34px color-mix(in srgb, var(--cp-ink), transparent 91%) !important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--cp-brand), white 84%) 0, transparent 28rem),
    linear-gradient(180deg, var(--cp-bg) 0%, color-mix(in srgb, var(--cp-bg), white 50%) 52%, var(--cp-bg) 100%) !important;
}

/* This was the remaining hardcoded gray/white box under the hero actions. */
.shop-page .premium-hero:after{
  display:none !important;
  content:none !important;
}

.shop-page .shop-header,
.shop-page .benefit-v212,
.shop-page .search-box,
.shop-page .category-strip,
.shop-page .category-rail,
.shop-page .premium-food-card,
.shop-page .order-panel,
.shop-page .checkout-summary,
.shop-page .premium-modal-card,
.shop-page .fulfillment-required{
  background: var(--cp-card) !important;
  border-color: var(--cp-line) !important;
  color: var(--cp-ink) !important;
  box-shadow: var(--cp-shadow-neutral) !important;
}

.shop-page .hero-card{
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cp-card-base), transparent 5%),
    color-mix(in srgb, var(--cp-brand), white 88%)
  ) !important;
  border: 1px solid color-mix(in srgb, var(--cp-brand), white 70%) !important;
  color: var(--cp-ink) !important;
  box-shadow: var(--cp-shadow-brand) !important;
  backdrop-filter: blur(10px);
}
.shop-page .hero-card span{
  color: color-mix(in srgb, var(--cp-brand), var(--cp-ink) 20%) !important;
}
.shop-page .hero-card strong{
  color: var(--cp-ink) !important;
}
.shop-page .hero-card small{
  color: var(--cp-muted) !important;
}

.shop-page .hero-badge{
  background: color-mix(in srgb, var(--cp-brand), transparent 76%) !important;
  border-color: color-mix(in srgb, var(--cp-brand), white 50%) !important;
  color: #fff !important;
}
.shop-page .secondary-cta{
  background: color-mix(in srgb, var(--cp-card-base), transparent 8%) !important;
  color: color-mix(in srgb, var(--cp-brand), var(--cp-ink) 28%) !important;
  border-color: color-mix(in srgb, var(--cp-brand), white 62%) !important;
}

.shop-page .search-box,
.shop-page .mode-switch,
.shop-page .category-strip,
.shop-page .category-rail{
  background: color-mix(in srgb, var(--cp-card-base), transparent 2%) !important;
}
.shop-page .search-box input{
  color: var(--cp-ink) !important;
}
.shop-page .search-box input::placeholder{
  color: color-mix(in srgb, var(--cp-ink), transparent 52%) !important;
}
.shop-page .search-box:focus-within{
  border-color: var(--cp-brand-border) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-brand), transparent 88%), var(--cp-shadow-neutral) !important;
}

.shop-page .cat-chip,
.shop-page .category-rail button{
  background: color-mix(in srgb, var(--cp-card-base), transparent 0%) !important;
  border-color: var(--cp-line) !important;
  color: var(--cp-ink) !important;
}
.shop-page .cat-chip.active,
.shop-page .category-rail button.active,
.shop-page .mini-options span{
  background: var(--cp-brand-soft) !important;
  border-color: var(--cp-brand-border) !important;
  color: color-mix(in srgb, var(--cp-brand), var(--cp-ink) 22%) !important;
}

.shop-page .primary-cta,
.shop-page .add-btn,
.shop-page .place-order,
.shop-page .modal-add-button-v33,
.shop-page .mobile-cart-button,
.shop-page .mode-btn.active,
.shop-page [data-fulfillment-choice]{
  background: linear-gradient(135deg, color-mix(in srgb, var(--cp-brand), #111 12%), var(--cp-brand)) !important;
  color:#fff !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--cp-brand), transparent 72%) !important;
}

.shop-page .mode-btn:not(.active){
  background: transparent !important;
  color: var(--cp-ink) !important;
  box-shadow:none !important;
}

.shop-page .food-media,
.shop-page .modal-image{
  background: linear-gradient(145deg, color-mix(in srgb, var(--cp-brand), white 91%), color-mix(in srgb, var(--cp-card-base), white 14%)) !important;
}
.shop-page .food-info p,
.shop-page .menu-toolbar p,
.shop-page .brand-lockup span,
.shop-page .benefit-v212 span,
.shop-page .summary-muted{
  color: var(--cp-muted) !important;
}

.shop-page .heart{
  background: color-mix(in srgb, var(--cp-card-base), transparent 4%) !important;
  border-color: var(--cp-line) !important;
  color: color-mix(in srgb, var(--cp-ink), transparent 28%) !important;
}
.shop-page .heart:hover{
  color: var(--cp-brand) !important;
  border-color: var(--cp-brand-border) !important;
}

.shop-page .featured-badge,
.shop-page .context-pill{
  background: color-mix(in srgb, var(--cp-ink), transparent 8%) !important;
  color: #fff !important;
}
.shop-page .grand-total{
  border-color: var(--cp-line) !important;
}

.shop-page .customer-push-nudge-v215{
  display:none;
  margin: 0 auto 16px;
  max-width: 1320px;
  border:1px solid var(--cp-brand-border);
  background: linear-gradient(135deg, var(--cp-brand-soft), var(--cp-card));
  color: var(--cp-ink);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: var(--cp-shadow-neutral);
  gap: 12px;
  align-items:center;
  justify-content:space-between;
}
.shop-page .customer-push-nudge-v215.is-visible{display:flex}
.shop-page .customer-push-nudge-v215 b{display:block}
.shop-page .customer-push-nudge-v215 span{color:var(--cp-muted);font-weight:650}
.shop-page .customer-push-nudge-v215 button{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:850;
  cursor:pointer;
}
.shop-page .customer-push-nudge-v215 .push-yes-v215{
  background:linear-gradient(135deg, color-mix(in srgb, var(--cp-brand), #111 12%), var(--cp-brand));
  color:#fff;
}
.shop-page .customer-push-nudge-v215 .push-later-v215{
  background:var(--cp-card);
  color:var(--cp-ink);
  border:1px solid var(--cp-line);
}

@supports (padding: max(0px)){
  body.shop-page{
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .shop-page .shop-header{
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .shop-page .mobile-cart-button,
  .shop-page .mobile-bottom-nav-v132{
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

body.native-app-v215.shop-page,
body.capacitor-app-v215.shop-page{
  overscroll-behavior-y: none;
  -webkit-user-select: none;
  user-select: none;
}
body.native-app-v215.shop-page input,
body.native-app-v215.shop-page textarea,
body.capacitor-app-v215.shop-page input,
body.capacitor-app-v215.shop-page textarea{
  -webkit-user-select:text;
  user-select:text;
}

@media (max-width:767px){
  .shop-page .hero-card{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin: 10px 18px 18px !important;
  }
  .shop-page .customer-push-nudge-v215{
    margin: 0 14px 14px;
    align-items:flex-start;
    flex-direction:column;
  }
}