/* Purchase and receipt surfaces share Moodies' existing type and palette. */
html { overflow-x: clip; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ffeb3e; outline-offset: 5px; }
#shop, #purchase, .policies details { scroll-margin-top: 90px; }
.pack strong { white-space: nowrap; }
.checkout-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.order-summary h3 { font-size: clamp(32px, 4vw, 48px); margin: 10px 0 24px; }
.order-summary .total { display: flex; justify-content: space-between; font-size: 22px; margin-top: 22px; }
.order-summary .btn { margin: 18px 0 8px; }
.order-summary .empty { padding: 24px 0; color: var(--muted); }
.order-summary .cart-msg { margin-top: 18px; }
.payment-surface { min-width: 0; }
.checkout-panel.is-confirmed { grid-template-columns: 1fr; }
.checkout-panel.is-confirmed .order-summary { display: none; }
.checkout-panel.is-confirmed .payment-surface { max-width: 680px; }
#paymentIntro { padding: 36px 0; }
#paymentIntro h3 { font: 900 clamp(32px, 4vw, 52px)/1.05 var(--display); letter-spacing: -.02em; margin: 14px 0 22px; }
#paymentIntro p { color: var(--muted); max-width: 35ch; }
#embeddedCheckout { min-height: 380px; border-radius: 12px; background: #fff; overflow: hidden; }
.text-button { background: transparent; color: inherit; border: 0; border-bottom: 1px solid currentColor; padding: 8px 0; cursor: pointer; font: inherit; }
.commercial { padding-top: 40px; padding-bottom: 60px; }
.commercial-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.commercial-grid h2 { font-size: clamp(30px, 4vw, 52px); margin: 16px 0; }
.commercial-grid p { color: var(--muted); }
.film-poster { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #190f25; width: 100%; color: #fff8ef; }
.film-poster img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.film-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #ffeb3e; color: #2a0d3f; font-size: 24px; }
.film-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 18px 14px; text-align: left; font-weight: 700; background: linear-gradient(transparent, rgba(14,7,22,.9)); }
.film-dialog { width: min(1000px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 16px; border: 1px solid #544261; border-radius: 12px; background: #190f25; color: #fff8ef; }
.film-dialog::backdrop { background: rgba(14,7,22,.86); }
.film-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.film-dialog-head h2 { font: 700 16px/1.3 var(--body); margin: 0; }
.film-dialog video { width: 100%; max-height: 75svh; }
.policy-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin-top: 18px; }
.policy-grid details { border-top: 1px solid var(--line); padding: 18px 0; }
.policy-grid summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.policy-grid p { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.policy-grid a { text-underline-offset: 3px; }
.policies { padding-top: 32px; }
.receipt-moods { display: flex; gap: 6px; margin: 12px 0 24px; }
.receipt-moods span { width: 25px; height: 25px; border-radius: 50%; background: var(--c); }
.purchase-receipt h2 { font: 900 clamp(36px,5vw,60px)/1.04 'Nunito', 'Avenir Next',sans-serif; letter-spacing: -.03em; margin: 14px 0 18px; }
.purchase-receipt h3 { font-size: 18px; margin-top: 24px; }
.purchase-receipt p { line-height: 1.65; }
.purchase-receipt ul { list-style: none; padding: 0; }
.purchase-receipt li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.purchase-receipt dl { margin: 24px 0; }
.purchase-receipt dl div { display: flex; justify-content: space-between; gap: 20px; padding: 4px 0; }
.purchase-receipt dd { margin: 0; }
.purchase-receipt .receipt-total { border-top: 1px solid rgba(255,255,255,.15); margin-top: 12px; padding-top: 14px; font-size: 22px; font-weight: 800; }
.purchase-receipt .receipt-order { color: #ffeb3e; font-weight: 700; }
.purchase-receipt .receipt-note { color: #b9aecb; font-size: 15px; }
.purchase-receipt a { color: inherit; text-underline-offset: 4px; }
.purchase-shell { max-width: 800px; margin: auto; padding: 32px 24px 64px; color: #fff8ef; font-family: 'Nunito Sans','Avenir Next',sans-serif; }
.purchase-shell header { padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 36px; }
.purchase-shell .receipt-logo { width: 150px; height: auto; }
.purchase-shell .receipt-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.purchase-shell .receipt-button { display: inline-block; background: #ffeb3e; color: #2a0d3f; font-weight: 800; padding: 13px 22px; border-radius: 999px; border: 0; text-decoration: none; cursor: pointer; font: inherit; }
@media(max-width: 760px) {
  .checkout-panel, .commercial-grid { grid-template-columns: 1fr; }
  .checkout-panel { gap: 16px; margin-top: 32px; }
  #paymentIntro { padding: 16px 0; }
  .policy-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 500px) {
  .policy-grid { grid-template-columns: 1fr; gap: 0; }
  .film-dialog { padding: 12px; }
  .line { grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; font-size: 14px; }
  .line .sw { width: 32px; height: 32px; }
  .line .qty { gap: 4px; }
}