.checkout-panel{padding:0;margin:0}
.checkout-badge{display:inline-block;padding:var(--space-1) var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);color:var(--text-secondary);font-size:var(--type-small);line-height:var(--leading-support)}
:is(.checkout-panel,.checkout-order-summary) p{margin:0 0 var(--space-4);color:var(--text-secondary);font-size:var(--type-support);line-height:var(--leading-body)}
.checkout-payment-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.checkout-payment-marks[hidden] { display: none; }
.checkout-payment-marks img {
  display: block;
  width: auto;
  height: 26px;
}
.checkout-summary{margin:var(--space-5) 0}
.checkout-summary>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-2) 0}
.checkout-summary dt{color:var(--text-secondary);flex:1}
.checkout-summary dd{margin:0;text-align:right;max-width:65%;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.checkout-summary .checkout-total{margin-top:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);font-weight:var(--weight-semibold)}
.checkout-summary .checkout-total dt{color:var(--text-primary)}
.checkout-message{font-size:var(--type-support);color:var(--text-secondary);min-height:1.5em}
@media(max-width:480px){.checkout-summary>div{gap:var(--space-2)}.checkout-dialog .dialog-actions{flex-direction:column-reverse}.checkout-dialog .dialog-actions>button{width:100%;flex:auto!important}}

/* One shared price hierarchy in the Book and Order side panels. */
.controls .gelato-price{font-size:var(--type-body);line-height:var(--leading-body);margin-top:var(--space-5)}
:is(.checkout-order-summary,.gelato-price) .checkout-summary{margin:var(--space-3) 0;font-size:var(--type-support);line-height:var(--leading-body)}
:is(.checkout-order-summary,.gelato-price) .checkout-summary dd{max-width:56%;color:var(--text-primary)}
:is(.checkout-order-summary,.gelato-price) .checkout-total{font-size:var(--type-body)}
:is(.checkout-order-summary,.gelato-price) .checkout-price-note{font-size:var(--type-small);line-height:var(--leading-body);color:var(--text-secondary);margin:var(--space-2) 0}
.checkout-order-summary .checkout-badge{margin:var(--space-4) 0 var(--space-2)}
.checkout-order-summary .checkout-message{margin:var(--space-3) 0 0}
.checkout-order-summary .checkout-message[hidden]{display:none}
.checkout-contact{overflow-wrap:anywhere}
.checkout-price-status{font-size:var(--type-support);color:var(--text-secondary)}
.checkout-book-price{font-weight:var(--weight-semibold);font-size:var(--type-body)}
.checkout-summary .checkout-book-price dt{color:var(--text-primary)}
.checkout-arrival{display:block;margin-top:var(--space-1);font-size:var(--type-small);font-weight:400;line-height:1.5;color:var(--text-secondary)}
.checkout-delivery-row dt{min-width:0}
.checkout-delivery-row dd{flex-shrink:0}
.checkout-panel {
  display: grid;
  align-items: start;
  gap: var(--space-5);
}
.delivery-panel,
.checkout-order-summary { min-width: 0; }
#review-panel :is(.delivery-panel, .book-preflight, .book-downloads) {
  max-inline-size: 34rem;
}
.checkout-order-summary {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.checkout-order-summary .button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  white-space: normal;
  line-height: 1.4;
}
.delivery-form fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.delivery-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;font-size:var(--type-support);color:var(--text-secondary)}
.delivery-field-wide{grid-column:1/-1}
.delivery-field[hidden]{display:none}
.delivery-field input,.delivery-field select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-control,10px);background:var(--surface-raised,#292929);color:var(--text-primary);font:inherit;font-size:16px;line-height:1.4}
.delivery-field input:focus-visible,.delivery-field select:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.delivery-field input[aria-invalid=true]{border-color:#e6a085}
.delivery-form fieldset:disabled{opacity:.65}
.checkout-panel .delivery-status{margin:var(--space-3) 0 0}
.delivery-status[hidden]{display:none}
.delivery-skeleton,.delivery-status.is-loading::before{
  display:inline-block;
  height:.68em;
  border-radius:var(--radius-pill,999px);
  background:var(--border-subtle) linear-gradient(90deg,transparent,var(--border-strong),transparent) no-repeat -100% 0 / 60% 100%;
  animation:delivery-shimmer 1.7s ease-in-out 180ms infinite;
}
.delivery-skeleton-price{width:5ch}
.checkout-arrival-placeholder{height:1.5em}
.delivery-skeleton-arrival{width:min(100%,24ch)}
.delivery-status.is-loading::before{
  content:'';
  width:1.25em;
  margin-inline-end:.55em;
  vertical-align:.04em;
}
@keyframes delivery-shimmer{to{background-position:230% 0}}
@media(prefers-reduced-motion:reduce){
  .delivery-skeleton,.delivery-status.is-loading::before{animation:none}
}

/* Checkout gets the workspace. The editor canvas stays available for browsing. */
#studio.is-reviewing {
  --checkout-gutter: clamp(16px, 3vw, 48px);
  --checkout-preview-height: clamp(112px, 23dvh, 192px);
  background: var(--surface-panel);
}
#studio .mobile-review-preview { display: none !important; }
#studio.is-reviewing .editor-tools,
#studio.is-reviewing .canvas-zoom-tools { display: none; }
#studio.is-reviewing #review-panel {
  width: min(100%, 62rem);
  margin-inline: auto;
}
.review-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.review-actions[hidden],
.exporting-proof .review-actions { display: none; }
#studio .review-actions .review-home {
  width: 44px;
  margin: 0;
}
#studio.is-reviewing .review-actions button {
  min-height: 44px;
  margin: 0;
  white-space: normal;
}
#studio.is-reviewing .review-actions .mobile-review-preview { margin-inline-start: auto; }

@media (760px <= width < 1080px) {
  body:not(.exporting-proof) .checkout-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .delivery-field :is(input,select) { min-height: 48px; }
}

/* Keep the editor's normal artwork geometry while generating a PDF. */
body:not(.exporting-proof) #studio.is-reviewing .studio-layout {
  max-width: 92rem;
  margin-inline: auto;
}
body:not(.exporting-proof) #studio.is-reviewing .controls {
  width: 100%;
  min-height: 0;
  height: auto;
  padding: var(--space-5) var(--checkout-gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body:not(.exporting-proof) #studio.is-reviewing .preview-area {
  position: relative;
  inset: auto;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-panel);
  box-shadow: none;
}
body:not(.exporting-proof) #studio.is-reviewing .preview-area #book-preview {
  flex: none;
  width: 100%;
  min-height: 0;
  height: var(--checkout-preview-height);
  margin: 0;
  padding: 12px;
  transform: none;
}
body:not(.exporting-proof) #studio.is-reviewing #book-preview > .cover {
  width: min(90%, calc((var(--checkout-preview-height) - 24px) * var(--book-ratio, 1)));
  max-width: none;
  max-height: calc(var(--checkout-preview-height) - 24px);
}
body:not(.exporting-proof) #studio.is-reviewing #book-preview > .spread {
  width: min(100%, calc((var(--checkout-preview-height) - 24px) * 2 * var(--book-ratio, 1)));
}
body:not(.exporting-proof) #studio.is-reviewing .canvas-bottom-dock {
  position: relative;
  inset: auto;
  justify-content: center;
  margin: 0;
}
body:not(.exporting-proof) #studio.is-reviewing .canvas-browsing-tools { margin: 0; }

@media (min-width: 1080px) {
  #studio.is-reviewing { --checkout-preview-height: clamp(112px, 19dvh, 172px); }
  body:not(.exporting-proof) #studio.is-reviewing .studio-layout {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 400px);
    grid-template-rows: max-content max-content 1fr;
    row-gap: var(--space-3);
    padding-inline-end: var(--checkout-gutter);
    padding-block-end: var(--space-5);
    overflow: auto;
  }
  #studio.is-reviewing .review-actions {
    grid-area: 1 / 1 / 2 / -1;
    padding: var(--space-3) 0 0 var(--checkout-gutter);
  }
  body:not(.exporting-proof) #studio.is-reviewing .controls {
    grid-area: 2 / 1 / 4 / 2;
    padding-top: 0;
    overflow: visible;
  }
  body:not(.exporting-proof) #studio.is-reviewing .preview-area {
    grid-area: 2 / 2;
  }
  #studio.is-reviewing .studio-layout > .checkout-order-summary {
    grid-area: 3 / 2;
    align-self: start;
  }
}
#studio:not(.is-reviewing) .studio-layout > .checkout-order-summary,
body.exporting-proof #studio .studio-layout > .checkout-order-summary { display: none; }

@media (width < 1080px) {
  body:not(.exporting-proof) #studio.is-reviewing .studio-layout {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body:not(.exporting-proof) #studio.is-reviewing .controls { flex: 1 1 auto; }
  #studio.is-reviewing .review-actions {
    order: -2;
    flex: none;
    width: min(calc(100% - 2 * var(--checkout-gutter)), 62rem);
    margin: max(var(--space-3), env(safe-area-inset-top)) auto 0;
  }
  body:not(.exporting-proof) #studio.is-reviewing .preview-area {
    order: -1;
    flex: none;
    align-self: center;
    width: min(calc(100% - 2 * var(--checkout-gutter)), 62rem);
    margin-top: var(--space-2);
  }
  #studio.is-reviewing .mobile-review-preview:not([hidden]) { display: inline-flex !important; }
  body:not(.exporting-proof) #studio.is-reviewing:not(.mobile-review-preview-open) .preview-area {
    display: none;
  }
}