/* Reviews as a sideways rail: one card in view with the next one peeking, swipe for more.
   Keeps the song page short on phones; long reviews show the first lines and open on tap. */
.shared-review-grid, #checkoutReviewList, #reviewList.rd-review-grid {
  display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 14px; margin: 0 -2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #d9c4c8 transparent;
}
.shared-review-grid > .shared-review-card, #checkoutReviewList > .shared-review-card, #reviewList > * {
  flex: 0 0 min(84%, 360px); scroll-snap-align: start; display: flex; flex-direction: column; cursor: pointer;
}
.shared-review-grid::-webkit-scrollbar, #checkoutReviewList::-webkit-scrollbar, #reviewList::-webkit-scrollbar { height: 4px; }
.shared-review-grid::-webkit-scrollbar-thumb, #checkoutReviewList::-webkit-scrollbar-thumb, #reviewList::-webkit-scrollbar-thumb { background: #d9c4c8; border-radius: 2px; }
.shared-review-card blockquote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.shared-review-card.is-open blockquote { display: block; -webkit-line-clamp: unset; }
.shared-review-card figcaption { margin-top: auto; }
.rr-hint { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font: 500 13px/1.3 "Albert Sans", sans-serif; color: var(--rd-muted, #6c5c60); }
.rr-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { #reviewList > * { flex-basis: calc((100% - 24px) / 3); } }
/* Song page: one review row only, beside the buy button, three cards. The extra block lower down is dropped. */
#view-preview [data-shared-reviews] { display: none !important; }
#checkoutReviewList > .shared-review-card:nth-child(n + 4) { display: none; }
/* Price-line test (public/price-line.js): one quiet line at the top of the quiz. */
.pl-line { margin: 0 0 14px; font: 500 14px/1.4 "Albert Sans", sans-serif; color: var(--rd-muted, #6c5c60); text-align: center; }
/* Language picker (public/i18n.js), quiet in the footer. */
.lang-pick { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; }
.lang-pick label { display: inline-flex; color: var(--rd-muted, #6c5c60); }
.lang-pick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-pick select { min-height: 40px; padding: 6px 30px 6px 10px; border: 1px solid var(--rd-line, #e1d5cd); border-radius: 6px; background: var(--rd-white, #fffdfb); color: var(--rd-ink, #302329); font: 500 14px/1.2 "Albert Sans", sans-serif; }
.lang-pick .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Song-language choice in the quiz (app.js "How should it feel?"): seven languages wrap onto two lines on a phone. */
.voice-row.lang-row .chips { display: flex !important; flex-wrap: wrap; gap: 8px; grid-template-columns: none; overflow: visible; }
.voice-row.lang-row .chip { flex: 0 1 auto; width: auto; min-height: 46px; padding: 10px 14px; margin: 0 !important; }

/* Checkout sheet: the "Loading secure checkout" line sits under Stripe's frame until the form has drawn. */
#embeddedCheckout { position: relative; min-height: 200px; }
.pay-sheet-wait { text-align: center; color: #6b625b; font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; position: absolute; inset: 0 0 auto; margin: 60px 0 0; }
#embeddedCheckoutMount { position: relative; z-index: 1; }
.pay-sheet.pay-sheet-preload { visibility: hidden; pointer-events: none; }
.email-bad { margin: 8px 0 0; color: #a3271f; font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }