/* Zamakan checkout: content-first modal, no scrolling unless the viewport is truly too short.
   Only the checkout modal is affected; no changes to gateway, other dialogs or site. */
#checkoutModalOverlay.checkout-modal-overlay.is-active{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:clamp(8px,1.6dvh,16px)!important;
  box-sizing:border-box!important;
}
#checkoutModalOverlay.is-active > .checkout-modal-card{
  box-sizing:border-box!important;
  flex:0 1 auto!important;
  min-height:0!important;
  height:auto!important;
  margin:0 auto!important;
  max-height:calc(100dvh - clamp(16px,3.2dvh,32px))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important; /* only scrolls if genuine content exceeds max-height */
  overscroll-behavior:contain;
}
#checkoutModalOverlay #checkoutFormView .checkout-stepper,
#checkoutModalOverlay .checkout-modal-card:has(#funnelStep3.is-active) #checkoutStepper{
  margin-top:4px!important;
  margin-bottom:9px!important;
}
#checkoutModalOverlay #checkoutFormView .literary-checkout-quote{
  margin:2px auto 7px!important;
}
#checkoutModalOverlay .checkout-modal-card:has(#checkoutSuccessView[style*="block"]){
  padding:clamp(10px,1.6dvh,16px) 16px!important;
}
@media(min-width:900px){
  #checkoutModalOverlay.is-active > .checkout-modal-card{
    width:min(920px,calc(100vw - 40px))!important;
    max-width:min(920px,calc(100vw - 40px))!important;
    padding:clamp(12px,1.8dvh,18px) 24px!important;
  }
  #checkoutModalOverlay #checkoutFormView .checkout-grid-container{
    gap:12px!important;
  }
}
@media(max-width:600px){
  #checkoutModalOverlay.checkout-modal-overlay.is-active{
    align-items:center!important;
    padding:8px!important;
  }
  #checkoutModalOverlay.is-active > .checkout-modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 16px)!important;
    margin:0 auto!important;
    padding:10px 12px!important;
  }
}
@media(max-height:620px){
  #checkoutModalOverlay.is-active > .checkout-modal-card{
    max-height:calc(100dvh - 12px)!important;
  }
  #checkoutModalOverlay #checkoutFormView .checkout-stepper{
    margin-bottom:6px!important;
  }
}

/* Layout-fit step 3: the review and price breakdown are independent cards.
   Present them side by side rather than stacking two tall cards.
   Preserve every input, consent checkbox and payment action. */
@container checkout-card (min-width:720px) {
  #checkoutModalOverlay #funnelStep3.is-active {
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)!important;
    grid-template-areas:
      "review prices"
      "review newsletter"
      "review terms"
      "actions actions";
    gap:7px 12px!important;
    align-items:start!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active > .order-review-card{
    grid-area:review;
    margin:0!important;
    min-width:0!important;
    padding:10px 12px!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active > .checkout-summary-box{
    grid-area:prices;
    margin:0!important;
    min-width:0!important;
    padding:10px 12px!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active > .form-row:nth-last-child(3){
    grid-area:newsletter;
    margin:0!important;
    align-self:end!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active > .form-row:nth-last-child(2){
    grid-area:terms;
    margin:0!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active > .step-footer-actions{
    grid-area:actions;
    margin:3px 0 0!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active .order-review-item{
    padding-block:4px!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active .summary-row{
    padding-block:6px!important;
  }
}
/* Give step 3's progress titles a clearer break before the two cards. */
#checkoutModalOverlay .checkout-modal-card:has(#funnelStep3.is-active) #checkoutStepper {
  margin-bottom:28px!important;
}
@media (max-width:600px) {
  #checkoutModalOverlay .checkout-modal-card:has(#funnelStep3.is-active) #checkoutStepper {
    margin-bottom:22px!important;
  }
}
/* Keep the two consent rows close together, without changing text size. */
@container checkout-card (min-width:720px) {
  #checkoutModalOverlay #funnelStep3.is-active {
    row-gap:2px!important;
  }
  #checkoutModalOverlay #funnelStep3.is-active > .form-row:has(#newsletterOptIn),
  #checkoutModalOverlay #funnelStep3.is-active > .form-row:has(#termsAgreementCheckbox) {
    padding:0!important;
    margin:0!important;
  }
}
/* Two cards only when modal itself provides room. Smaller cards stay stacked. */

/* Layout-fit recipient/shipping: use available width rather than stacking
   the shipping options below six fields. No controls are removed. */
@container checkout-card (min-width:720px) {
  #checkoutModalOverlay #funnelStep2.is-active {
    display:grid!important;
    grid-template-columns:minmax(0,65fr) minmax(0,35fr)!important;
    column-gap:16px!important;
    row-gap:4px!important;
    align-items:start!important;
  }
  #checkoutModalOverlay #funnelStep2.is-active > .funnel-form-grid-2 {
    grid-column:1!important;
    min-width:0!important;
  }
  #checkoutModalOverlay #funnelStep2.is-active > .funnel-form-grid-2:nth-child(1) {grid-row:1!important;}
  #checkoutModalOverlay #funnelStep2.is-active > .funnel-form-grid-2:nth-child(3) {grid-row:2!important;}
  #checkoutModalOverlay #funnelStep2.is-active > .funnel-form-grid-2:nth-child(4) {grid-row:3!important;}
  #checkoutModalOverlay #funnelStep2.is-active > .form-helper-text {
    display:none!important; /* pre-existing empty helper element only */
  }
  #checkoutModalOverlay #funnelStep2.is-active > .carrier-selection-container {
    grid-column:2!important;
    grid-row:1 / span 4!important;
    min-width:0!important;
    margin:0!important;
  }
  #checkoutModalOverlay #funnelStep2.is-active > .carrier-selection-container .carrier-cards-list {
    gap:6px!important;
  }
  #checkoutModalOverlay #funnelStep2.is-active > .step-footer-actions {
    grid-column:1 / -1!important;
    grid-row:5!important;
    margin:6px 0 0!important;
  }
  #checkoutModalOverlay #funnelStep2.is-active > .funnel-form-grid-2 .form-row {
    margin-bottom:6px!important;
  }
  #checkoutModalOverlay #funnelStep2.is-active > .carrier-selection-container > .form-label {
    margin-bottom:7px!important;
  }
}
/* Narrower dialogs remain stacked and can scroll only if genuinely needed. */

/* Measure the actual dialog width rather than classifying the user's device.
   Above 820px available screen width, allow the modal to grow instead of
   inheriting the old tablet max-width, so layout can choose two columns. */
#checkoutModalOverlay.is-active > .checkout-modal-card {
  container:checkout-card / inline-size;
}
@media (min-width:821px) and (max-width:999px) {
  #checkoutModalOverlay.is-active > .checkout-modal-card {
    width:min(920px,calc(100vw - 32px))!important;
    max-width:min(920px,calc(100vw - 32px))!important;
  }
}

/* Step 1: horizontal edition choices, with a wider signature field directly
   beneath the choices and a compact quantity row. */
@container checkout-card (min-width:720px) {
  #checkoutModalOverlay #funnelStep1.is-active {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"editions" "dedications" "quantity" "actions"!important;
    grid-template-rows:auto auto auto auto!important;
    gap:10px!important;
    align-items:start!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active > .form-row:nth-child(1) {
    grid-area:editions!important;
    min-width:0!important;
    margin:0!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active .edition-selector-grid {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active .edition-card {
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active > #dedicationsWrapper {
    grid-area:dedications!important;
    width:min(100%,430px)!important;
    max-width:430px!important;
    min-width:0!important;
    justify-self:start!important;
    margin:0!important;
    padding:9px 12px!important;
    background:rgba(225,185,133,.045);
    border:1px solid rgba(225,185,133,.24);
    border-radius:12px;
    box-sizing:border-box!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active > .form-row:nth-child(2) {
    grid-area:quantity!important;
    min-width:0!important;
    margin:0!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active > .step-footer-actions {
    grid-area:actions!important;
    align-self:end!important;
    margin:0!important;
  }
  #checkoutModalOverlay #funnelStep2.is-active > .step-footer-actions,
  #checkoutModalOverlay #funnelStep3.is-active > .step-footer-actions {
    align-self:end;
  }
}
/* Narrow modal: preserve full-width cards, natural reading order and accessible
   height; never force the signature side by side on insufficient width. */

/* Approved compact step-one layout: editions side by side, optional two-name signature below. */
@container checkout-card (min-width:720px) {
  #checkoutModalOverlay #funnelStep1.is-active {
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    grid-template-areas:"editions" "dedications" "quantity" "actions"!important;
    gap:9px!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active .edition-selector-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active .edition-card {
    padding-block:10px!important;
  }
  #checkoutModalOverlay #funnelStep1.is-active > #dedicationsWrapper {
    width:min(320px,100%)!important;
    max-width:320px!important;
    box-sizing:border-box!important;
    padding:8px 10px!important;
    justify-self:start!important;
  }
}
#checkoutModalOverlay #funnelStep1 #dedicationsContainer {
  max-height:108px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
#checkoutModalOverlay #funnelStep1 #dedicationsWrapper {
  max-width:320px!important;
  box-sizing:border-box!important;
}
/* One visual gap below the bottom of all step titles, across all three steps.
   Override older compact-layout rules, including the step-three special case. */
#checkoutModalOverlay #checkoutFormView #checkoutStepper.checkout-stepper,
#checkoutModalOverlay .checkout-modal-card:has(#funnelStep3.is-active) #checkoutStepper.checkout-stepper {
  margin-bottom:28px!important;
}
@media(max-width:600px) {
  #checkoutModalOverlay #checkoutFormView #checkoutStepper.checkout-stepper,
  #checkoutModalOverlay .checkout-modal-card:has(#funnelStep3.is-active) #checkoutStepper.checkout-stepper {
    margin-bottom:22px!important;
  }
}