/* Checkout v61: final theme-safe presentation layer. Loaded after all theme files. */
#checkoutModal.checkoutPageModal,
html[data-desktop-template="tilda"] #checkoutModal.checkoutPageModal {
  --checkout-accent: #20a85a;
  --checkout-ink: #172033;
  --checkout-muted: #8490a4;
  --checkout-line: #e3e9f1;
  --checkout-panel: #fff;
  --checkout-canvas: #f7f9fc;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: flex !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 24px !important;
  background: var(--checkout-canvas) !important;
  color: var(--checkout-ink) !important;
}

#checkoutModal.checkoutPageModal.hidden,
html[data-desktop-template="tilda"] #checkoutModal.checkoutPageModal.hidden {
  display: none !important;
}

body.checkoutOpen #accountOverlay,
body.checkoutOpen #accountBackdrop,
body.checkoutOpen #searchOverlay,
body.checkoutOpen #searchBackdrop,
#checkoutModal > .checkoutDesktopAccount {
  display: none !important;
}

#checkoutModal .checkoutPageCard,
html[data-desktop-template="tilda"] #checkoutModal .checkoutPageCard {
  position: relative !important;
  flex: 0 0 auto !important;
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 24px 22px 52px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#checkoutModal .checkoutPageHeader,
html[data-desktop-template="tilda"] #checkoutModal .checkoutPageHeader {
  position: static !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) 40px !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 0 22px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#checkoutModal .checkoutPageBack,
html[data-desktop-template="tilda"] #checkoutModal .checkoutPageBack {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--checkout-ink) !important;
  box-shadow: 0 5px 16px rgba(18,32,51,.05) !important;
}

#checkoutModal .checkoutPageTitle,
html[data-desktop-template="tilda"] #checkoutModal .checkoutPageTitle {
  color: var(--checkout-ink) !important;
  font: 800 clamp(25px,3vw,34px)/1.1 var(--font-main) !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  text-transform: none !important;
}

#checkoutModal .checkoutPageIntro {
  margin: 6px 0 0 !important;
  color: var(--checkout-muted) !important;
  font-size: 14px !important;
  text-align: left !important;
}

#checkoutModal .checkoutPageLayout {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 340px !important;
  gap: 22px !important;
  align-items: start !important;
}

#checkoutModal .checkoutPageMain {
  display: grid !important;
  gap: 16px !important;
}

#checkoutModal .checkoutPageSection,
html[data-desktop-template="tilda"] #checkoutModal .checkoutPageSection {
  margin: 0 !important;
  padding: 22px !important;
  overflow: visible !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 16px !important;
  background: var(--checkout-panel) !important;
  box-shadow: 0 9px 28px rgba(18,32,51,.045) !important;
}

#checkoutModal .checkoutSectionHeading {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

#checkoutModal .checkoutStepNumber {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--checkout-accent) !important;
  color: #fff !important;
}

#checkoutModal .checkoutStepTitle,
html[data-desktop-template="tilda"] #checkoutModal .checkoutStepTitle {
  color: var(--checkout-ink) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

#checkoutModal .checkoutHint {
  color: var(--checkout-muted) !important;
  font-size: 12px !important;
}

#checkoutModal .checkoutContactGrid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

#checkoutModal .checkoutField {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
}

#checkoutModal .checkoutFieldWide { grid-column: 1 / -1 !important; }

#checkoutModal .checkoutFieldIcon {
  position: absolute !important;
  z-index: 2 !important;
  left: 15px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  color: #94a0b3 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

#checkoutModal .checkoutFieldIcon svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#checkoutModal .checkoutFieldLabel {
  position: absolute !important;
  z-index: 2 !important;
  left: 45px !important;
  top: 50% !important;
  max-width: calc(100% - 60px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #687489 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
  transition: all .15s ease !important;
}

#checkoutModal .checkoutFieldLabel i { color: #ef4444 !important; }

#checkoutModal .checkoutField .fInput,
html[data-desktop-template="tilda"] #checkoutModal .checkoutField .fInput {
  width: 100% !important;
  min-height: 54px !important;
  padding: 16px 14px 5px 44px !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--checkout-ink) !important;
  font: 14px var(--font-main) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

#checkoutModal .checkoutField:focus-within .checkoutFieldLabel,
#checkoutModal .checkoutField:has(.fInput:not(:placeholder-shown)) .checkoutFieldLabel {
  top: 10px !important;
  font-size: 10px !important;
  transform: none !important;
}

#checkoutModal .checkoutField:focus-within .checkoutFieldIcon { color: var(--checkout-accent) !important; }

#checkoutModal .checkoutField .fInput:focus {
  border-color: var(--checkout-accent) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(32,168,90,.11) !important;
}

#checkoutModal .checkoutContactSection > .checkoutHint {
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid #d9f0e2 !important;
  border-radius: 10px !important;
  background: #f0faf4 !important;
  color: #168847 !important;
}

#checkoutModal .checkoutChoices {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(170px,1fr)) !important;
  gap: 12px !important;
}

#checkoutModal .checkoutChoiceWrap,
#checkoutModal .checkoutChoiceWrap.isOpen,
html[data-desktop-template="tilda"] #checkoutModal .checkoutChoiceWrap {
  min-width: 0 !important;
  height: 100% !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#checkoutModal .checkoutChoice,
#checkoutModal .checkoutChoiceWrap.isOpen .checkoutChoice,
html[data-desktop-template="tilda"] #checkoutModal .checkoutChoice {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: 5px 11px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 112px !important;
  padding: 16px !important;
  overflow: visible !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--checkout-ink) !important;
  box-shadow: none !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#checkoutModal .checkoutChoice.isActive,
#checkoutModal .checkoutChoiceWrap.isOpen .checkoutChoice.isActive,
html[data-desktop-template="tilda"] #checkoutModal .checkoutChoice.isActive {
  padding: 15px !important;
  border: 2px solid var(--checkout-accent) !important;
  background: linear-gradient(145deg,#fff,#f0faf4) !important;
  box-shadow: 0 10px 25px rgba(32,168,90,.1) !important;
}

#checkoutModal .checkoutChoiceIcon,
#checkoutModal .checkoutChoice.isActive .checkoutChoiceIcon,
html[data-desktop-template="tilda"] #checkoutModal .checkoutChoiceIcon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #f0faf4 !important;
  color: var(--checkout-accent) !important;
}

#checkoutModal .checkoutMethodSvg {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#checkoutModal .checkoutChoiceWrap[data-method-id="telegram"] .checkoutChoiceIcon { color:#229ed9 !important; background:#edf9ff !important; }
#checkoutModal .checkoutChoiceWrap[data-method-id="courier"] .checkoutChoiceIcon { color:#20293a !important; background:#f3f5f8 !important; }
#checkoutModal .checkoutChoiceWrap[data-method-id="cdek"] .checkoutChoiceIcon { color:#13a04b !important; background:#edf9f1 !important; }
#checkoutModal .checkoutChoiceWrap[data-method-id="pickup"] .checkoutChoiceIcon { color:#df8a14 !important; background:#fff8e9 !important; }
#checkoutModal .checkoutChoiceWrap[data-method-id="ozon"] .checkoutChoiceIcon { color:#1769ff !important; background:#eef4ff !important; }
#checkoutModal .checkoutChoiceWrap[data-method-id="yookassa"] .checkoutChoiceIcon { color:#7047eb !important; background:#f3efff !important; }
#checkoutModal .checkoutChoiceWrap[data-method-id="tbank_card"] .checkoutChoiceIcon { color:#08a652 !important; background:#edf9f1 !important; }
#checkoutModal .checkoutChoiceWrap[data-method-id="tbank_sbp"] .checkoutChoiceIcon { color:#1677ff !important; background:#eef5ff !important; }

#checkoutModal .checkoutChoiceText {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  min-width: 0 !important;
}

#checkoutModal .checkoutChoiceTitle {
  color: var(--checkout-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#checkoutModal .checkoutChoiceHint {
  margin-top: 5px !important;
  color: var(--checkout-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#checkoutModal .checkoutChoicePrice {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--checkout-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#checkoutModal .checkoutChoiceMark,
#checkoutModal .checkoutChoice.isActive .checkoutChoiceMark {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  display: grid !important;
  place-items: center !important;
  width: 21px !important;
  height: 21px !important;
  border: 1px solid #cfd7e3 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: transparent !important;
}

#checkoutModal .checkoutChoice.isActive .checkoutChoiceMark {
  border-color: var(--checkout-accent) !important;
  background: var(--checkout-accent) !important;
  color: #fff !important;
}

#checkoutModal .checkoutFields.checkoutChoiceDetailsPanel,
#checkoutModal #yookassaReceiptFields,
html[data-desktop-template="tilda"] #checkoutModal .checkoutFields.checkoutChoiceDetailsPanel,
html[data-desktop-template="tilda"] #checkoutModal #yookassaReceiptFields {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 16px !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 12px !important;
  background: #fbfcfe !important;
  box-shadow: none !important;
}

#checkoutModal .checkoutFields .fInput,
html[data-desktop-template="tilda"] #checkoutModal .checkoutFields .fInput {
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--checkout-ink) !important;
  text-transform: none !important;
}

#checkoutModal .checkoutFields textarea.fInput { padding: 13px 14px !important; }

#checkoutModal .cdekWidgetHost,
html[data-desktop-template="tilda"] #checkoutModal .cdekWidgetHost {
  overflow: hidden !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#checkoutModal .checkoutSafetyNote {
  margin-top: 14px !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  background: #f0faf4 !important;
  color: #168847 !important;
}

#checkoutModal .checkoutOrderColumn {
  position: sticky !important;
  top: 20px !important;
  display: grid !important;
  gap: 14px !important;
}

#checkoutModal .checkoutOrderCard,
#checkoutModal .checkoutGuarantee,
html[data-desktop-template="tilda"] #checkoutModal .checkoutOrderCard,
html[data-desktop-template="tilda"] #checkoutModal .checkoutGuarantee {
  padding: 20px !important;
  border: 1px solid var(--checkout-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 9px 28px rgba(18,32,51,.045) !important;
}

#checkoutModal .checkoutOrderItem img { border-radius: 9px !important; }

#checkoutModal #submitOrder,
html[data-desktop-template="tilda"] #checkoutModal #submitOrder {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg,var(--checkout-accent),#28bd68) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(32,168,90,.22) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#checkoutModal .checkoutGuarantee > span { color: var(--checkout-accent) !important; }

@media (max-width:1023px) {
  #checkoutModal.checkoutPageModal,
  html[data-desktop-template="tilda"] #checkoutModal.checkoutPageModal { padding: 0 !important; }
  #checkoutModal .checkoutPageCard,
  html[data-desktop-template="tilda"] #checkoutModal .checkoutPageCard {
    min-height: 100dvh !important;
    padding: 12px 10px calc(var(--bottomnav-h, 76px) + 42px + env(safe-area-inset-bottom)) !important;
  }
  #checkoutModal .checkoutPageHeader,
  html[data-desktop-template="tilda"] #checkoutModal .checkoutPageHeader {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 4px 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #checkoutModal .checkoutPageHeader > div,
  html[data-desktop-template="tilda"] #checkoutModal .checkoutPageHeader > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #checkoutModal .checkoutPageBack,
  #checkoutModal .checkoutPageHeaderSpacer {
    display: none !important;
  }
  #checkoutModal .checkoutPageTitle,
  #checkoutModal .checkoutPageIntro {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
  }
  #checkoutModal .checkoutPageLayout { grid-template-columns: minmax(0,1fr) !important; }
  #checkoutModal .checkoutOrderColumn { position: static !important; }
}

@media (max-width:600px) {
  #checkoutModal .checkoutPageTitle { font-size: 25px !important; }
  #checkoutModal .checkoutPageSection,
  html[data-desktop-template="tilda"] #checkoutModal .checkoutPageSection {
    padding: 17px 14px !important;
    border-radius: 15px !important;
  }
  #checkoutModal .checkoutContactGrid,
  #checkoutModal .checkoutChoices { grid-template-columns: minmax(0,1fr) !important; }
  #checkoutModal .checkoutFieldWide { grid-column: auto !important; }
  #checkoutModal .checkoutChoice,
  html[data-desktop-template="tilda"] #checkoutModal .checkoutChoice {
    min-height: 88px !important;
    grid-template-columns: 43px minmax(0,1fr) !important;
    padding: 13px !important;
  }
  #checkoutModal .checkoutChoice.isActive { padding: 12px !important; }
  #checkoutModal .checkoutChoiceIcon { width: 43px !important; height: 43px !important; }
}

/* v64 — final desktop geometry. Older theme files made .isOpen span the
   entire grid and narrowed the header to a legacy three-column modal. */
@media (min-width:1024px) {
  html body #checkoutModal.checkoutPageModal {
    padding: 92px 24px 36px !important;
  }

  html body #checkoutModal .checkoutPageCard {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    padding: 0 0 48px !important;
  }

  html body #checkoutModal .checkoutPageHeader {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body #checkoutModal .checkoutPageHeader > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #checkoutModal .checkoutPageBack,
  html body #checkoutModal .checkoutPageHeaderSpacer {
    display: none !important;
  }

  html body #checkoutModal .checkoutPageTitle {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  html body #checkoutModal .checkoutPageIntro {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
  }

  html body #checkoutModal .checkoutPageLayout {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 22px !important;
  }

  html body #checkoutModal #deliveryMethodChoices.checkoutChoices {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body #checkoutModal #paymentMethodChoices.checkoutChoices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #checkoutModal .checkoutChoiceWrap,
  html body #checkoutModal .checkoutChoiceWrap.isOpen {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
  }

  html body #checkoutModal .checkoutChoice,
  html body #checkoutModal .checkoutChoiceWrap.isOpen .checkoutChoice,
  html body #checkoutModal .checkoutChoiceWrap.isOpen .checkoutChoice.isActive {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 126px !important;
    height: 100% !important;
    padding: 16px !important;
  }

  html body #checkoutModal .checkoutChoice.isActive,
  html body #checkoutModal .checkoutChoiceWrap.isOpen .checkoutChoice.isActive {
    padding: 15px !important;
  }

  html body #checkoutModal .checkoutChoiceDetailsPanel {
    grid-column: 1 / -1 !important;
  }
}

/* v66 — stable method cards and reference-like CDEK field geometry. */
#checkoutModal .checkoutPageSection,
#checkoutModal .checkoutChoices,
#checkoutModal .checkoutChoiceWrap,
#checkoutModal .checkoutChoice {
  isolation: isolate !important;
}

#checkoutModal .checkoutChoiceWrap {
  position: relative !important;
  z-index: 1 !important;
}

#checkoutModal .checkoutChoiceWrap:hover,
#checkoutModal .checkoutChoiceWrap:focus-within,
#checkoutModal .checkoutChoiceWrap.isOpen {
  z-index: 4 !important;
}

@media (hover:hover) {
  html body #checkoutModal .checkoutChoice:hover {
    transform: none !important;
    border-color: #a9dcbc !important;
    box-shadow: 0 8px 20px rgba(18,32,51,.065) !important;
  }
}

@media (min-width:1024px) {
  html body #checkoutModal #deliveryMethodChoices.checkoutChoices {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  html body #checkoutModal #paymentMethodChoices.checkoutChoices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  html body #checkoutModal :is(#deliveryMethodChoices,#paymentMethodChoices) .checkoutChoiceWrap {
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  html body #checkoutModal :is(#deliveryMethodChoices,#paymentMethodChoices) .checkoutChoice {
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  html body #checkoutModal #deliveryFieldsBlock.checkoutChoiceDetailsPanel {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  html body #checkoutModal #deliveryFieldsBlock.checkoutChoiceDetailsPanel.hidden {
    display: none !important;
  }

  #checkoutModal #deliveryFieldsBlock > .checkoutStepTitleSub {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  #checkoutModal #cdekRegionSelect {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  #checkoutModal #cdekCitySelect {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  #checkoutModal #cdekPickupSelect {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  #checkoutModal #deliveryCity,
  #checkoutModal #ozonPickupSelect {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  #checkoutModal #cdekCityList {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  #checkoutModal #deliveryAddress {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

  #checkoutModal #cdekWidgetSection {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
    margin: 0 !important;
  }

  #checkoutModal #deliveryComment {
    grid-column: 1 / -1 !important;
    grid-row: 7 !important;
  }

  #checkoutModal #deliveryFieldsBlock > :is(select,input,textarea) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep the order summary visible while the long delivery form scrolls. */
  html body #checkoutModal .checkoutPageCard,
  html body #checkoutModal .checkoutPageLayout {
    overflow: visible !important;
  }

  html body #checkoutModal .checkoutOrderColumn {
    position: sticky !important;
    top: 24px !important;
    z-index: 8 !important;
    align-self: start !important;
    height: max-content !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }
}

/*
 * Mobile checkout is a full-screen layer, but the application's native
 * bottom navigation must remain available above it. Keep enough scroll
 * space below the checkout content so the last controls are not hidden.
 */
@media (max-width: 1023px) {
  html body.checkoutOpen #bottomNav,
  html body.checkoutOpen #bottomNav.isHidden {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: var(--bottomnav-h, 76px) !important;
    height: calc(var(--bottomnav-h, 76px) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 10100 !important;
  }

  html body.checkoutOpen #bottomNav .navBtn {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 6px 4px !important;
  }

  html body.checkoutOpen #bottomNav .navBtn .icon {
    width: 24px !important;
    height: 24px !important;
  }

  html body.checkoutOpen #bottomNav .navLabel {
    font-size: 11px !important;
  }

  html body.checkoutOpen #checkoutModal .checkoutPageCard {
    padding-bottom: calc(
      var(--bottomnav-h, 76px) + 42px + env(safe-area-inset-bottom)
    ) !important;
  }
}