/* The album is the whole scene; the photograph scales with the viewport. */
[hidden] { display: none !important; }
.payment-choice { margin: 20px 0; display: grid; gap: 10px; text-align: left; }
.payment-choice label { border: 1px solid var(--line); padding: 14px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.payment-choice label:has(input:checked) { border-color: var(--berry); background: var(--lilac); }
.payment-choice input { width: auto; margin-right: 8px; accent-color: var(--berry); }
.payment-choice small { display: block; font-size: 10px; margin-left: 25px; color: var(--muted); }
.account-dialog { max-height: calc(100dvh - 40px); overflow: auto; }
#account-signin .button { margin-top: 18px; }
.saved-albums { display: grid; gap: 10px; margin: 22px 0; }
.saved-album { text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.saved-album:hover { background: var(--lilac); }
.saved-album strong, .saved-album span { display: block; }
.saved-album span { font-size: 11px; color: var(--muted); margin-top: 5px; }
#fullscreen-dialog {
  background: var(--album-paper);
  color: var(--theme-ink);
  padding: 28px clamp(24px, 4vw, 100px);
  isolation: isolate;
}
#fullscreen-dialog[open] { gap: 24px; grid-template-rows: auto minmax(min-content, 1fr) auto; }
#fullscreen-dialog > .particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#fullscreen-dialog .fullscreen-label { color: var(--theme-ink); opacity: .7; padding-inline: 48px; text-align: center; }
#fullscreen-dialog .fullscreen-close { position: fixed; top: 24px; right: 24px; z-index: 3; background: var(--album-paper); color: var(--theme-ink); }
#fullscreen-dialog .icon-button { border-color: color-mix(in srgb, var(--theme-ink) 25%, transparent); }
#fullscreen-dialog .icon-button:hover { background: var(--theme-bg); }
#fullscreen-content { width: min(1600px, 100%); }
#fullscreen-content .album-card { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
#fullscreen-content .album-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(48px, 6vw, 150px);
  padding: 28px 12px;
}
.fullscreen-photo-panel { min-width: 0; }
#fullscreen-content .album-photo-wrap { width: 100%; padding: clamp(10px, 1vw, 20px) clamp(10px, 1vw, 20px) clamp(28px, 3vw, 58px); }
#fullscreen-content .album-photo-wrap > img {
  width: 100%; height: clamp(300px, 55dvh, 780px); aspect-ratio: auto; object-fit: contain; background: #f4f0ed;
}
#fullscreen-content .album-photo-ornament { width: clamp(56px, 5vw, 90px); height: clamp(56px, 5vw, 90px); font-size: clamp(32px, 3.5vw, 56px); }
#fullscreen-content .album-photo-nav { margin-top: 28px; font-size: 12px; gap: 24px; }
#fullscreen-content .album-photo-nav button { min-width: 44px; min-height: 44px; }
#fullscreen-content .album-occasion { display: block; font-size: clamp(12px, 1vw, 16px); margin-bottom: 28px; }
#fullscreen-content .album-card h3 { font-size: clamp(48px, 5vw, 94px); margin: 0 0 28px; text-wrap: balance; }
#fullscreen-content .album-card p { font-size: clamp(15px, 1.2vw, 20px); max-width: 42ch; margin: 0 auto 30px; line-height: 1.8; }
#fullscreen-content .album-date { font-size: clamp(12px, 1vw, 15px); }
#fullscreen-content .album-signature { font-size: clamp(22px, 2vw, 32px); margin-top: 40px; }
#fullscreen-dialog .fullscreen-controls { position: relative; z-index: 1; gap: 28px; }
#fullscreen-dialog .fullscreen-controls .text-button { font-size: 13px; min-height: 44px; }
@media (max-width: 800px) {
  #fullscreen-dialog { padding: 74px 24px 24px; }
  #fullscreen-dialog[open] { gap: 24px; }
  #fullscreen-dialog .fullscreen-label { padding: 0; font-size: 10px; }
  #fullscreen-content { width: min(500px, 100%); }
  #fullscreen-content .album-inner { grid-template-columns: 1fr; gap: 24px; padding: 12px 8px; }
  #fullscreen-content .album-photo-wrap { width: 92%; padding: 10px 10px 28px; }
  #fullscreen-content .album-photo-wrap > img { height: auto; max-height: 50dvh; aspect-ratio: 1.12; }
  #fullscreen-content .album-photo-nav { margin-top: 16px; }
  #fullscreen-content .album-occasion { margin-bottom: 16px; font-size: 11px; }
  #fullscreen-content .album-card h3 { font-size: clamp(38px, 9vw, 54px); margin-bottom: 20px; }
  #fullscreen-content .album-card p { font-size: 13px; margin-bottom: 20px; }
  #fullscreen-content .album-date { font-size: 11px; }
  #fullscreen-content .album-signature { font-size: 22px; margin-top: 24px; }
}

.saved-album-row { margin: 12px 0; }
.saved-album-row .saved-album { width: 100%; margin-bottom: 6px; }
.saved-album-public { display: inline-block; margin: 2px 14px 8px; font-size: 12px; color: var(--berry); text-underline-offset: 3px; }
.share-link-field { display: grid; gap: 8px; margin: 18px 0; color: var(--muted); font-size: 12px; text-align: left; }
.share-link-field input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; }

.button-spinner { display: none; width: 17px; height: 17px; flex-shrink: 0; border: 2px solid #ffffff65; border-top-color: currentColor; border-radius: 50%; }
#pay-album[aria-busy="true"] { opacity: 1; cursor: progress; gap: 10px; }
#pay-album[aria-busy="true"] .button-spinner { display: inline-block; animation: checkout-spin .8s linear infinite; }
.checkout-progress { text-align: center; margin: 10px 0 16px; }
#checkout-error:not(:empty) { padding: 12px 14px; margin: 12px 0 6px; border-left: 3px solid #a12b44; background: #a12b4409; border-radius: 4px; font-size: 12px; }
.checkout-edit-address { display: block; margin: 0 0 18px; padding: 4px 0; color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.slug-input:has(input[aria-invalid="true"]) { border-color: #a12b44; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #pay-album[aria-busy="true"] .button-spinner { animation: none; border-style: dashed; } }