/*
  v214 Customer Branding + Installed-App Stability
  Scope: customer ordering page only (.shop-page). Keeps staff/admin/driver untouched.

  Branding impact:
  - Uses Admin Branding values already exposed by the server:
    --brand            = primary_color / customer_app_theme_color
    --ink              = accent_color
    --customer-theme-color, --customer-bg, --customer-card-bg
  - Overrides v212/v213 hardcoded orange surfaces, PWA install prompts, mobile nav highlights,
    category chips, checkout CTA, modal CTA, and cart CTA.
*/
html.customer-pwa-scroll-v214,
body.customer-pwa-scroll-v214,
body.shop-page.customer-pwa-scroll-v214{
  height:auto !important;
  min-height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:auto !important;
  touch-action:pan-y;
}

.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: color-mix(in srgb, var(--customer-card-bg, #ffffff), transparent 4%) !important;
  --cp-line: color-mix(in srgb, var(--cp-ink), transparent 90%) !important;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--cp-brand), white 84%) 0, transparent 28rem),
    linear-gradient(180deg, var(--cp-bg) 0%, #fff 54%, var(--cp-bg) 100%) !important;
  color:var(--cp-ink) !important;
  min-height:100dvh;
}

.shop-page .premium-hero:not([style*="background-image"]){
  background-image:
    linear-gradient(100deg, color-mix(in srgb, var(--cp-ink), transparent 8%), color-mix(in srgb, var(--cp-ink), transparent 72%)),
    var(--restaurant-hero-url) !important;
  background-color:var(--cp-ink) !important;
  background-size:cover !important;
  background-position:center !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].active,
.shop-page [data-fulfillment-choice][aria-pressed="true"],
.shop-page .pwa-install-primary-v144,
.shop-page .pwa-install-primary-v136{
  background:linear-gradient(135deg, color-mix(in srgb, var(--cp-brand), #111 10%), var(--cp-brand)) !important;
  color:#fff !important;
  border-color:transparent !important;
}

.shop-page .secondary-cta,
.shop-page .cat-chip.active,
.shop-page .category-pill.active,
.shop-page .category-tab.active,
.shop-page .mini-options span,
.shop-page .checkout-summary,
.shop-page .pwa-install-secondary-v144,
.shop-page .pwa-install-secondary-v136{
  background:color-mix(in srgb, var(--cp-brand), white 91%) !important;
  border-color:color-mix(in srgb, var(--cp-brand), white 70%) !important;
  color:color-mix(in srgb, var(--cp-brand), var(--cp-ink) 28%) !important;
}

.shop-page .pwa-install-icon-v144,
.shop-page .pwa-install-icon-v136,
.shop-page .mobile-bottom-nav-v132 a.active,
.shop-page .mobile-bottom-nav-v132 button.active,
.shop-page .mobile-bottom-nav-v130 a.active,
.shop-page .mobile-bottom-nav-v130 button.active{
  background:color-mix(in srgb, var(--cp-brand), white 88%) !important;
  color:var(--cp-brand) !important;
}

.shop-page .brand-lockup img{
  object-fit:cover;
  background:#fff;
}

.shop-page .food-media{
  background:linear-gradient(145deg, color-mix(in srgb, var(--cp-brand), white 92%), #fff) !important;
}

@media (display-mode:standalone){
  html, body, body.shop-page{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    position:static !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:auto !important;
  }

  body.shop-page.cart-open{
    overflow:hidden !important;
    position:static !important;
  }

  body.shop-page:not(.cart-open) .order-panel{
    pointer-events:auto;
  }

  .shop-page .shop-header,
  .shop-page .category-rail,
  .shop-page .category-strip,
  .shop-page .order-panel{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }

  /* Installed PWAs can jank on heavy glass effects. Keep the look, reduce GPU pressure. */
  .shop-page .shop-header,
  .shop-page .order-panel,
  .shop-page .premium-food-card,
  .shop-page .category-rail{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
  }

  .shop-page .premium-food-card:hover{
    transform:none !important;
  }

  .shop-page .premium-hero:after{
    display:none !important;
  }
}

@media (max-width:767px){
  body.shop-page.customer-pwa-scroll-v214{
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important;
  }

  .shop-page .category-strip{
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }

  .shop-page .menu-grid{
    contain:layout style;
  }

  .shop-page .premium-food-card{
    contain:layout paint;
  }
}