/* Checkout and page viewer: a postcard dealt onto the table from the upper right. */
html.js dialog.checkout:not([data-ready]) { display: none; }
.checkout { border: 0; padding: 0; background: none; color: inherit; max-width: none; max-height: none; overflow: visible; }
html:not(.js) .checkout { display: block; margin: var(--s9) auto; width: min(92vw, 440px); }
html:not(.js) .viewer { display: none; }
html.js .checkout[data-ready] { position: fixed; inset: 0; margin: auto; width: min(92vw, 440px); height: max-content; max-height: 92svh; }
html.js .viewer[data-ready] { width: min(94vw, 1040px); }
.checkout::backdrop { background: rgba(14, 53, 80, 0.45); opacity: 0; transition: opacity 200ms ease; }
.checkout[data-open]::backdrop { opacity: 1; transition-duration: 250ms; }
.checkout__card {
  position: relative; display: grid; gap: var(--s4); max-height: 92svh; overflow: auto; padding: var(--s7) var(--s5) var(--s5);
  background: var(--paper); border-radius: 2px; box-shadow: 8px 14px 40px rgba(14, 53, 80, 0.3);
  transform: translate(34%, -70%) rotate(8deg); opacity: 0; transition: transform 200ms var(--ease-out), opacity 150ms ease;
  padding-bottom: max(var(--s5), env(safe-area-inset-bottom));
}
.checkout[data-open] .checkout__card { transform: rotate(-1deg); opacity: 1; transition: transform 460ms var(--ease-settle), opacity 200ms ease; }
html:not(.js) .checkout__card { transform: none; opacity: 1; }
.checkout__card h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); }
.checkout__card .hand { color: var(--sea-700); }
.checkout__card .btn--text { justify-self: start; margin-left: calc(var(--s3) * -1); }
.checkout__x { position: absolute; top: var(--s2); right: var(--s2); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--sea-900); cursor: pointer; }
.viewer .checkout__card { padding: 10px; }
.viewer img { width: 100%; height: auto; max-height: 82svh; object-fit: contain; background: #fff; }
.viewer .checkout__x { background: rgba(255, 255, 255, 0.95); top: var(--s4); right: var(--s4); }
html:not(.js) .checkout [data-close] { display: none; }
@media (max-width: 899px) {
  .viewer .checkout__card { overflow: auto; padding-top: 60px; }
  .viewer img { width: 220%; max-width: none; max-height: none; }
}
@media (min-width: 640px) { .checkout__card { transform: translate(14%, -40%) rotate(6deg); padding-inline: var(--s6); } html.js .checkout[data-ready] { width: 480px; } }
@media (hover: hover) and (pointer: fine) { .checkout__x:hover { background: var(--sea-100); } }
@media (prefers-reduced-motion: reduce) {
  .checkout__card, .checkout[data-open] .checkout__card { transform: rotate(-1deg); transition: opacity 150ms ease; }
}