/* Principio 5.7.9.3 — Cart & Checkout Final Polish
   CSS-only, scoped to customer flows. No body/root scroll locks and no workflow changes. */

:root{
  --px-flow-bg:#f7f3eb;
  --px-flow-line:rgba(196,184,164,.62);
  --px-flow-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* Common mobile resilience: prevent accidental horizontal expansion in customer overlays only. */
body[data-principio-role="customer-asporto"] :is(.cartDrawer,.smartCustomizeModal,.accountOverlay,.premiumCheckoutPage),
body[data-principio-role="customer-delivery"] :is(.cartDrawer,.smartCustomizeModal,.accountOverlay,.guidedCheckoutPage){
  max-width:100%;
}
body[data-principio-role="customer-asporto"] :is(.premiumCartPanel,.premiumCartItem,.smartOrderShelf,.smartCustomizeCard,.customizeSection,.checkoutOrderCard,.checkoutPremiumCard),
body[data-principio-role="customer-delivery"] :is(.premiumCartPanel,.premiumCartItem,.smartOrderShelf,.smartCustomizeCard,.customizeSection,.guidedStepPanel){
  min-width:0;
  box-sizing:border-box;
}

/* Cart: one isolated scroll surface, safe sticky summary, no content trapped below CTA. */
body[data-principio-role="customer-asporto"] .cartDrawer .premiumCartPanel,
body[data-principio-role="customer-delivery"] .cartDrawer .premiumCartPanel{
  height:100dvh !important;
  max-height:100dvh !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scroll-padding-top:116px;
  scroll-padding-bottom:calc(20px + var(--px-flow-safe-bottom)) !important;
}
body[data-principio-role="customer-asporto"] .cartDrawer .premiumCartSummary,
body[data-principio-role="customer-delivery"] .cartDrawer .premiumCartSummary{
  background:#fff !important;
  border-top:1px solid var(--px-flow-line);
  padding-bottom:calc(12px + var(--px-flow-safe-bottom)) !important;
  box-shadow:0 -10px 28px rgba(20,22,26,.10) !important;
  isolation:isolate;
}
body[data-principio-role="customer-asporto"] .cartDrawer .premiumCartItem,
body[data-principio-role="customer-delivery"] .cartDrawer .premiumCartItem{
  overflow-wrap:anywhere;
}
body[data-principio-role="customer-asporto"] .cartDrawer .smartOrderShelf,
body[data-principio-role="customer-delivery"] .cartDrawer .smartOrderShelf{
  scroll-margin-bottom:18px;
}

/* Personalization: keep header/footer usable while every option can scroll fully into view. */
body[data-principio-role="customer-asporto"] .smartCustomizeModal,
body[data-principio-role="customer-delivery"] .smartCustomizeModal{
  padding:0 !important;
  align-items:flex-end !important;
}
body[data-principio-role="customer-asporto"] .smartCustomizeCard,
body[data-principio-role="customer-delivery"] .smartCustomizeCard{
  max-height:100dvh !important;
  height:min(100dvh,900px);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scroll-padding-top:96px;
  scroll-padding-bottom:calc(126px + var(--px-flow-safe-bottom));
}
body[data-principio-role="customer-asporto"] .smartCustomizeHeader,
body[data-principio-role="customer-delivery"] .smartCustomizeHeader{
  background:var(--px-flow-bg) !important;
  opacity:1;
  isolation:isolate;
  box-shadow:0 1px 0 var(--px-flow-line),0 8px 18px rgba(247,243,235,.96);
}
body[data-principio-role="customer-asporto"] .customizeOptions,
body[data-principio-role="customer-delivery"] .customizeOptions{
  margin-bottom:calc(132px + var(--px-flow-safe-bottom)) !important;
}
body[data-principio-role="customer-asporto"] .smartCustomizeFooter,
body[data-principio-role="customer-delivery"] .smartCustomizeFooter{
  background:#fff !important;
  isolation:isolate;
  box-sizing:border-box;
}

/* Avoid iOS/Android browser zoom and clipped form controls in customer flows. */
@media (max-width:820px){
  body[data-principio-role="customer-asporto"] :is(.smartCustomizeCard,.premiumCheckoutPage,.accountPanel) input,
  body[data-principio-role="customer-asporto"] :is(.smartCustomizeCard,.premiumCheckoutPage,.accountPanel) select,
  body[data-principio-role="customer-asporto"] :is(.smartCustomizeCard,.premiumCheckoutPage,.accountPanel) textarea,
  body[data-principio-role="customer-delivery"] :is(.smartCustomizeCard,.guidedCheckoutPage,.accountPanel) input,
  body[data-principio-role="customer-delivery"] :is(.smartCustomizeCard,.guidedCheckoutPage,.accountPanel) select,
  body[data-principio-role="customer-delivery"] :is(.smartCustomizeCard,.guidedCheckoutPage,.accountPanel) textarea{
    font-size:16px !important;
  }
}

/* Asporto checkout: reserve exact space for the fixed submit summary and safe area. */
body[data-principio-role="customer-asporto"] .premiumCheckoutPage{
  box-sizing:border-box;
  padding-bottom:calc(164px + var(--px-flow-safe-bottom)) !important;
  scroll-padding-bottom:calc(164px + var(--px-flow-safe-bottom));
  overflow-x:clip;
}
body[data-principio-role="customer-asporto"] .checkoutStickySummary{
  box-sizing:border-box;
  background:#fff !important;
  border-top:1px solid var(--px-flow-line);
  padding-left:max(12px,env(safe-area-inset-left,0px)) !important;
  padding-right:max(12px,env(safe-area-inset-right,0px)) !important;
  isolation:isolate;
}
body[data-principio-role="customer-asporto"] :is(.checkoutCardHeading,.checkoutOrderItem,.checkoutSectionTitle,.checkoutPrivacyRow)>*{
  min-width:0;
}
body[data-principio-role="customer-asporto"] .checkoutOrderItem{
  overflow-wrap:anywhere;
}

/* Delivery guided checkout: same mobile safety contract as Asporto without changing steps. */
body[data-principio-role="customer-delivery"] .guidedCheckoutPage{
  box-sizing:border-box;
  padding-bottom:calc(88px + var(--px-flow-safe-bottom)) !important;
  scroll-padding-bottom:calc(88px + var(--px-flow-safe-bottom));
  overflow-x:clip;
}
body[data-principio-role="customer-delivery"] .guidedCheckoutMain,
body[data-principio-role="customer-delivery"] .guidedStepPanel,
body[data-principio-role="customer-delivery"] .guidedField,
body[data-principio-role="customer-delivery"] .guidedReviewList,
body[data-principio-role="customer-delivery"] .guidedOrderSummary{
  min-width:0;
  box-sizing:border-box;
}
body[data-principio-role="customer-delivery"] .guidedCheckoutFooter{
  box-sizing:border-box;
  background:#fff !important;
  isolation:isolate;
}
body[data-principio-role="customer-delivery"] :is(.guidedEditSummary,.guidedReviewList button,.guidedSuccessCard)>*{
  min-width:0;
}
body[data-principio-role="customer-delivery"] :is(.guidedEditSummary b,.guidedReviewList b,.guidedSuccessCard p){
  overflow-wrap:anywhere;
}

/* Account panels and toasts: remain reachable on short/notched phones. */
body[data-principio-role="customer-asporto"] .accountPanel,
body[data-principio-role="customer-delivery"] .accountPanel{
  box-sizing:border-box;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(112px + var(--px-flow-safe-bottom)) !important;
}
body[data-principio-role="customer-asporto"] .toast,
body[data-principio-role="customer-delivery"] .toast{
  width:max-content;
  max-width:calc(100vw - 28px);
  box-sizing:border-box;
  text-align:center;
  overflow-wrap:anywhere;
}

@media (max-width:560px){
  body[data-principio-role="customer-asporto"] .premiumCheckoutHeader{
    align-items:flex-start;
    gap:8px;
  }
  body[data-principio-role="customer-asporto"] .checkoutBackButton{
    flex:0 0 auto;
    width:auto;
    min-height:42px;
  }
  body[data-principio-role="customer-asporto"] .checkoutStickySummary,
  body[data-principio-role="customer-delivery"] .guidedCheckoutFooter{
    padding-bottom:calc(10px + var(--px-flow-safe-bottom)) !important;
  }
  body[data-principio-role="customer-asporto"] .smartCustomizeCard,
  body[data-principio-role="customer-delivery"] .smartCustomizeCard{
    border-radius:22px 22px 0 0 !important;
  }
  body[data-principio-role="customer-asporto"] .smartCustomizeFooter,
  body[data-principio-role="customer-delivery"] .smartCustomizeFooter{
    padding-bottom:calc(10px + var(--px-flow-safe-bottom)) !important;
  }
}

@media (max-height:680px) and (max-width:820px){
  body[data-principio-role="customer-asporto"] .smartCustomizeHeader,
  body[data-principio-role="customer-delivery"] .smartCustomizeHeader{
    padding-top:11px !important;
    padding-bottom:9px !important;
  }
  body[data-principio-role="customer-asporto"] .smartCustomizeHeader h2,
  body[data-principio-role="customer-delivery"] .smartCustomizeHeader h2{
    font-size:21px !important;
  }
}