/* Ron Tal Web — shared demo commerce UI. Scoped to .rtw-dialog; commerce.js
   writes the --rtw-* tokens inline from config.theme (see ./README.md). */

.rtw-dialog { --rtw-a: #1f5f52; --rtw-at: #ffffff; --rtw-s: #ffffff; --rtw-t: #1b1a19; --rtw-l: #d9d3c9; --rtw-r: 16px; --rtw-f: inherit; --rtw-q: color-mix(in oklab, var(--rtw-t) 62%, var(--rtw-s)); --rtw-fa: color-mix(in oklab, var(--rtw-t) 5%, var(--rtw-s)); --rtw-ti: color-mix(in oklab, var(--rtw-a) 10%, var(--rtw-s)); --rtw-danger: #b3261e; --rtw-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --rtw-from: 100%; padding: 0; border: 0; max-width: none; max-height: none; color: var(--rtw-t); background: transparent; font-family: var(--rtw-f); font-size: 1rem; line-height: 1.5; }
html[dir="rtl"] .rtw-dialog { --rtw-from: -100%; }
html[data-theme="dark"] .rtw-dialog { --rtw-danger: #ff9f96; }
.rtw-dialog::backdrop { background: rgba(14, 13, 12, 0.58); }

.rtw-dialog :where(*, *::before, *::after) { box-sizing: border-box; }
.rtw-dialog :where(p, h2, h3, ul, ol, dl, dd, fieldset) { margin: 0; padding: 0; }
.rtw-dialog :where(ul, ol) { list-style: none; }
.rtw-dialog fieldset { border: 0; min-width: 0; }
.rtw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.rtw-locked { overflow: hidden; }
.rtw-dialog :focus-visible { outline: 2px solid var(--rtw-a); outline-offset: 2px; border-radius: 4px; }

/* shells */
.rtw-cart { margin-block: 0; margin-inline: auto 0; width: min(25.5rem, 100%); height: 100dvh; }
.rtw-checkout { margin: auto; width: min(36rem, calc(100% - 1.5rem)); max-height: min(92dvh, 52rem); }
.rtw-shell { display: flex; flex-direction: column; height: 100%; max-height: inherit; overflow: hidden; background: var(--rtw-s); color: var(--rtw-t); }
.rtw-cart .rtw-shell { height: 100dvh; }
.rtw-checkout .rtw-shell { max-height: min(92dvh, 52rem); border-radius: var(--rtw-r); }
.rtw-cart[open] .rtw-shell { animation: rtw-slide 0.3s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.rtw-checkout[open] .rtw-shell { animation: rtw-rise 0.26s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
@keyframes rtw-slide { from { translate: var(--rtw-from) 0; } }
@keyframes rtw-rise { from { opacity: 0; translate: 0 10px; } }

/* head */
.rtw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem 0.9rem; border-block-end: 1px solid var(--rtw-l); }
.rtw-head__text { min-width: 0; }
.rtw-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rtw-q); }
.rtw-head h2 { font-size: clamp(1.28rem, 3.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.rtw-head h2 small { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--rtw-q); }
.rtw-x { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--rtw-l); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.rtw-x:hover { background: var(--rtw-fa); }

/* stepper */
.rtw-steps { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding: 0.7rem 1.35rem; border-block-end: 1px solid var(--rtw-l); }
.rtw-steps li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--rtw-q); }
.rtw-steps i { inline-size: 1.35rem; block-size: 1.35rem; display: grid; place-items: center; border: 1px solid var(--rtw-l); border-radius: 999px; font-size: 0.68rem; font-style: normal; font-variant-numeric: tabular-nums; }
.rtw-steps li[aria-current="step"] { color: var(--rtw-t); font-weight: 700; }
.rtw-steps li[aria-current="step"] i { background: var(--rtw-a); border-color: var(--rtw-a); color: var(--rtw-at); }
.rtw-steps li[data-done="1"] i { border-color: var(--rtw-a); color: var(--rtw-a); }

/* scrolling body */
.rtw-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 1.15rem; }
.rtw-body > h3 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }

/* cart lines */
.rtw-lines { display: flex; flex-direction: column; gap: 0.9rem; }
.rtw-line { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 0.15rem 0.85rem; align-items: start; padding-block-end: 0.9rem; border-block-end: 1px solid var(--rtw-l); }
.rtw-line:last-child { border-block-end: 0; padding-block-end: 0; }
.rtw-line__art { grid-row: 1 / span 3; inline-size: 3.6rem; block-size: 3.6rem; border-radius: calc(var(--rtw-r) * 0.55); overflow: hidden; background: var(--rtw-fa); display: grid; place-items: center; }
.rtw-line__art img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.rtw-line__art span { font-size: 1rem; font-weight: 800; color: var(--rtw-q); }
.rtw-line__name { font-weight: 700; line-height: 1.3; }
.rtw-line__variant { font-size: 0.82rem; color: var(--rtw-q); }
.rtw-line__price { grid-column: 3; grid-row: 1; font-weight: 700; }
.rtw-line__unit { grid-column: 3; grid-row: 2; font-size: 0.76rem; color: var(--rtw-q); }
.rtw-qty { grid-column: 2 / span 2; grid-row: 3; margin-block-start: 0.45rem; display: flex; align-items: center; gap: 0.3rem; }
.rtw-qty button { inline-size: 2rem; block-size: 2rem; border: 1px solid var(--rtw-l); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.rtw-qty button:hover { background: var(--rtw-fa); }
.rtw-qty output { min-inline-size: 1.7rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rtw-qty .rtw-drop { margin-inline-start: auto; border: 0; inline-size: auto; padding-inline: 0.4rem; font-size: 0.78rem; color: var(--rtw-q); text-decoration: underline; text-underline-offset: 0.18em; }
.rtw-qty .rtw-drop:hover { color: var(--rtw-t); background: transparent; }

.rtw-empty { padding-block: 2.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.rtw-empty strong { font-size: 1.05rem; }
.rtw-empty span { color: var(--rtw-q); }

/* receipt rail (signature) */
.rtw-rail { position: relative; flex: none; padding: 1rem 1.35rem 1.15rem; background: var(--rtw-fa); --rtw-notch: 12px; mask: radial-gradient(circle at 50% 0, transparent 0 5px, #000 5.5px) top left / var(--rtw-notch) 200% repeat-x; }
.rtw-rail dl { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: baseline; }
.rtw-rail dt { color: var(--rtw-q); font-size: 0.86rem; }
.rtw-rail dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.rtw-rail .rtw-charge-t { border-block-start: 1px solid var(--rtw-l); padding-block-start: 0.45rem; margin-block-start: 0.2rem; font-weight: 700; color: var(--rtw-t); font-size: 0.9rem; }
.rtw-rail .rtw-charge-v { border-block-start: 1px solid var(--rtw-l); padding-block-start: 0.45rem; margin-block-start: 0.2rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.rtw-rail__note { margin-block-start: 0.55rem; font-size: 0.76rem; line-height: 1.45; color: var(--rtw-q); }
.rtw-rail__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rtw-rail__actions .rtw-btn { flex: 1 1 10rem; }
.rtw-rail .rtw-rail__actions { margin-block-start: 0.85rem; }

.rtw-amount { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* buttons */
.rtw-btn { min-height: 2.9rem; padding: 0.6rem 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid var(--rtw-l); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.95rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease; }
.rtw-btn:hover { background: var(--rtw-fa); }
.rtw-btn--primary { background: var(--rtw-a); border-color: var(--rtw-a); color: var(--rtw-at); }
.rtw-btn--primary:hover { background: color-mix(in oklab, var(--rtw-a) 86%, var(--rtw-t)); }
.rtw-btn--primary:focus-visible { outline-color: var(--rtw-t); }
.rtw-btn--quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }
.rtw-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* fieldsets, options, fields */
.rtw-block { display: flex; flex-direction: column; gap: 0.6rem; }
.rtw-block > legend,
.rtw-legend { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; padding: 0; margin-block-end: 0.55rem; }
.rtw-opts { display: flex; flex-direction: column; gap: 0.5rem; }
.rtw-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 0.15rem 0.7rem; align-items: start; padding: 0.75rem 0.9rem; border: 1px solid var(--rtw-l); border-radius: calc(var(--rtw-r) * 0.7); cursor: pointer; }
.rtw-opt:has(input:checked) { border-color: var(--rtw-a); background: var(--rtw-ti); box-shadow: inset 0 0 0 1px var(--rtw-a); }
.rtw-opt input { margin: 0.2rem 0 0; accent-color: var(--rtw-a); inline-size: 1.05rem; block-size: 1.05rem; }
.rtw-opt b { font-weight: 700; }
.rtw-opt .rtw-opt__fee { grid-column: 3; grid-row: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.rtw-opt small { grid-column: 2 / span 2; font-size: 0.8rem; line-height: 1.45; color: var(--rtw-q); }

.rtw-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rtw-chip { position: relative; }
.rtw-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rtw-chip span { padding: 0.5rem 0.85rem; min-height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--rtw-l); border-radius: 999px; font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rtw-chip input:checked + span { border-color: var(--rtw-a); background: var(--rtw-a); color: var(--rtw-at); }
.rtw-chip input:focus-visible + span { outline: 2px solid var(--rtw-a); outline-offset: 2px; }
.rtw-chip.is-off span { border-style: dashed; color: var(--rtw-q); text-decoration: line-through; }
.rtw-chip.is-off input { cursor: not-allowed; }
.rtw-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--rtw-q); }

.rtw-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.rtw-field { display: flex; flex-direction: column; gap: 0.3rem; }
.rtw-field--wide { grid-column: 1 / -1; }
.rtw-field label { font-size: 0.8rem; font-weight: 600; }
.rtw-field label span { font-weight: 500; color: var(--rtw-q); }
.rtw-field input { min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rtw-l); border-radius: calc(var(--rtw-r) * 0.55); background: var(--rtw-s); color: inherit; font: inherit; font-size: 1rem; }
.rtw-field input:focus-visible { outline: 2px solid var(--rtw-a); outline-offset: 1px; }
.rtw-field input[aria-invalid="true"] { border-color: var(--rtw-danger); box-shadow: inset 0 0 0 1px var(--rtw-danger); }
.rtw-err { font-size: 0.78rem; font-weight: 600; color: var(--rtw-danger); }
.rtw-errbox { padding: 0.65rem 0.85rem; border-inline-start: 3px solid var(--rtw-danger); background: color-mix(in oklab, var(--rtw-danger) 10%, var(--rtw-s)); font-size: 0.86rem; font-weight: 600; }

/* demo confirmation */
.rtw-confirm { display: flex; flex-direction: column; gap: 0.9rem; }
.rtw-confirm h3 { font-size: clamp(1.15rem, 3.2vw, 1.4rem); font-weight: 800; letter-spacing: -0.02em; }
.rtw-ledger { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; align-items: baseline; padding: 0.9rem 1rem; border: 1px solid var(--rtw-l); border-radius: calc(var(--rtw-r) * 0.7); }
.rtw-ledger dt { color: var(--rtw-q); font-size: 0.9rem; }
.rtw-ledger dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.rtw-ledger .rtw-big-t { grid-column: 1; font-size: 1rem; font-weight: 800; color: var(--rtw-t); border-block-start: 1px solid var(--rtw-l); padding-block-start: 0.6rem; margin-block-start: 0.25rem; }
.rtw-ledger .rtw-big-v { grid-column: 2; font-size: clamp(1.65rem, 5.5vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; border-block-start: 1px solid var(--rtw-l); padding-block-start: 0.6rem; margin-block-start: 0.25rem; color: var(--rtw-a); }
.rtw-verbatim { font-size: 0.95rem; line-height: 1.6; }

/* payment methods */
.rtw-banner { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.7rem 0.9rem; border: 1px dashed var(--rtw-l); border-radius: calc(var(--rtw-r) * 0.7); font-size: 0.86rem; line-height: 1.45; }
.rtw-banner b { font-weight: 800; }
.rtw-banner[data-mode="simulation"] { background: var(--rtw-fa); }
.rtw-banner[data-mode="sandbox"], .rtw-banner[data-mode="live"] { border-style: solid; background: var(--rtw-ti); }
.rtw-pay { display: flex; flex-direction: column; gap: 0.55rem; }
.rtw-method { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.9rem; align-items: baseline; padding: 0.8rem 0.95rem; border: 1px solid var(--rtw-l); border-radius: calc(var(--rtw-r) * 0.7); }
.rtw-method--main { border-color: var(--rtw-a); background: var(--rtw-ti); }
.rtw-method b { font-weight: 700; }
.rtw-method small { grid-column: 1 / -1; font-size: 0.8rem; line-height: 1.5; color: var(--rtw-q); }
.rtw-method b { white-space: nowrap; }
.rtw-method--main b { white-space: normal; }
.rtw-state { display: inline-flex; align-items: baseline; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; text-align: end; }
.rtw-state::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 2px; background: var(--rtw-q); translate: 0 -0.1em; }
.rtw-state[data-state="ready"] { color: var(--rtw-a); }
.rtw-state[data-state="ready"]::before { background: var(--rtw-a); }
.rtw-state[data-state="off"] { color: var(--rtw-q); }
.rtw-state[data-state="off"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rtw-q); }

/* simulated provider page */
.rtw-sim { border: 1px solid var(--rtw-l); border-radius: calc(var(--rtw-r) * 0.7); overflow: hidden; }
.rtw-sim__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; background: var(--rtw-fa); border-block-end: 1px solid var(--rtw-l); font-size: 0.78rem; font-weight: 700; }
.rtw-sim__bar code { font-family: var(--rtw-mono); font-size: 0.74rem; font-weight: 600; color: var(--rtw-q); direction: ltr; unicode-bidi: isolate; }
.rtw-sim__body { padding: 1rem 0.95rem; display: flex; flex-direction: column; gap: 0.9rem; }
.rtw-sim__amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.rtw-sim__amount span:first-child { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0; color: var(--rtw-q); }
.rtw-sim__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rtw-sim__acts .rtw-btn { flex: 1 1 7rem; }
.rtw-cards { font-size: 0.8rem; line-height: 1.6; }
.rtw-cards--later { color: var(--rtw-q); }
.rtw-cards dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; margin-block-start: 0.35rem; }
.rtw-cards dt { color: var(--rtw-q); }
.rtw-cards dd { font-family: var(--rtw-mono); direction: ltr; unicode-bidi: isolate; }

/* result */
.rtw-result { display: flex; flex-direction: column; gap: 1rem; }
.rtw-result h3 { font-size: clamp(1.3rem, 4vw, 1.75rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.rtw-order-no { display: inline-block; padding: 0.35rem 0.7rem; border: 1px dashed var(--rtw-l); border-radius: 6px; font-family: var(--rtw-mono); font-size: 0.86rem; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
/* Labels keep their own width (no three-line "display value" on a phone); a long value — the pickup address — wraps instead. */
.rtw-recap { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: 0.35rem 1rem; align-items: baseline; font-size: 0.9rem; }
.rtw-recap dt { color: var(--rtw-q); }
.rtw-recap dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
.rtw-recap__lines { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding-block-end: 0.6rem; margin-block-end: 0.2rem; border-block-end: 1px solid var(--rtw-l); }
.rtw-recap__lines span:nth-child(even) { font-weight: 700; font-variant-numeric: tabular-nums; }

/* premium tier — html[data-tier="premium"]; commerce.js mirrors it onto the dialog.
   Same logic, branded presentation: display type, a larger product thumbnail, a
   staged open and the order number set in the brand face. */
.rtw-dialog[data-tier="premium"] { --rtw-fd-use: var(--rtw-fd, var(--rtw-f)); }
.rtw-dialog[data-tier="premium"] .rtw-head { padding-block: 1.35rem 1.05rem; }
.rtw-dialog[data-tier="premium"] .rtw-head h2 { font-family: var(--rtw-fd-use); font-size: clamp(1.45rem, 3.9vw, 1.9rem); font-weight: 700; letter-spacing: -0.025em; }
.rtw-dialog[data-tier="premium"] .rtw-eyebrow { letter-spacing: 0.2em; }
.rtw-dialog[data-tier="premium"] .rtw-legend,
.rtw-dialog[data-tier="premium"] .rtw-body > h3 { font-family: var(--rtw-fd-use); font-size: 0.9rem; letter-spacing: 0.01em; }
.rtw-dialog[data-tier="premium"] .rtw-line { grid-template-columns: 4.6rem 1fr auto; }
.rtw-dialog[data-tier="premium"] .rtw-line__art { inline-size: 4.6rem; block-size: 4.6rem; border-radius: calc(var(--rtw-r) * 0.7); }
.rtw-dialog[data-tier="premium"] .rtw-line__art span { font-family: var(--rtw-fd-use); font-size: 1.3rem; }
.rtw-dialog[data-tier="premium"] .rtw-line__name { font-family: var(--rtw-fd-use); font-size: 1.05rem; font-weight: 700; }
.rtw-dialog[data-tier="premium"] .rtw-confirm h3,
.rtw-dialog[data-tier="premium"] .rtw-result h3 { font-family: var(--rtw-fd-use); font-weight: 700; letter-spacing: -0.02em; }
.rtw-dialog[data-tier="premium"] .rtw-result .rtw-order-no { font-family: var(--rtw-fd-use); font-size: clamp(1.2rem, 3.6vw, 1.55rem); font-weight: 700; letter-spacing: 0.01em; padding: 0.5rem 0.95rem; margin-block-start: 0.3rem; border-style: solid; border-color: var(--rtw-a); background: var(--rtw-ti); }
.rtw-dialog[data-tier="premium"] .rtw-result h3 + p { color: var(--rtw-q); }
.rtw-dialog[data-tier="premium"][open] .rtw-head,
.rtw-dialog[data-tier="premium"][open] .rtw-steps,
.rtw-dialog[data-tier="premium"][open] .rtw-body,
.rtw-dialog[data-tier="premium"][open] .rtw-rail { animation: rtw-stage 0.44s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.rtw-dialog[data-tier="premium"][open] .rtw-steps { animation-delay: 0.07s; }
.rtw-dialog[data-tier="premium"][open] .rtw-body { animation-delay: 0.11s; }
.rtw-dialog[data-tier="premium"][open] .rtw-rail { animation-delay: 0.17s; }
@keyframes rtw-stage { from { opacity: 0; translate: 0 9px; } }

/* small screens */
@media (max-width: 40rem) {
  .rtw-cart { margin-block: auto 0; margin-inline: auto; inline-size: 100%; block-size: fit-content; max-block-size: 88dvh; --rtw-from: 0; }
  .rtw-cart .rtw-shell { block-size: auto; max-block-size: 88dvh; border-start-start-radius: var(--rtw-r); border-start-end-radius: var(--rtw-r); }
  .rtw-cart[open] .rtw-shell { animation-name: rtw-up; }
  @keyframes rtw-up { from { translate: 0 100%; } }
  .rtw-checkout { inline-size: 100%; max-inline-size: none; margin-block: auto 0; block-size: fit-content; max-height: 94dvh; }
  .rtw-checkout .rtw-shell { max-height: 94dvh; border-end-start-radius: 0; border-end-end-radius: 0; }
  .rtw-head, .rtw-steps, .rtw-body, .rtw-rail { padding-inline: 1.05rem; }
  .rtw-steps li:not([aria-current="step"]) span { display: none; }
  .rtw-steps { gap: 0.5rem; }
  .rtw-line { grid-template-columns: 3rem 1fr auto; }
  .rtw-line__art { inline-size: 3rem; block-size: 3rem; }
  .rtw-dialog[data-tier="premium"] .rtw-line { grid-template-columns: 3.7rem 1fr auto; }
  .rtw-dialog[data-tier="premium"] .rtw-line__art { inline-size: 3.7rem; block-size: 3.7rem; }
}
/* Short phone screens (a 390×664 visible area, say): the summary under the form used to stay put and
   take half the sheet, leaving ~150 px for the form itself. There the sheet scrolls as one column —
   the form first, then the totals and "Continue" — with the title bar kept on top. */
@media (max-width: 40rem) and (max-height: 760px) {
  .rtw-checkout .rtw-shell { overflow-y: auto; overscroll-behavior: contain; }
  .rtw-checkout .rtw-body { flex: none; overflow: visible; }
  .rtw-checkout .rtw-head { position: sticky; top: 0; z-index: 2; background: var(--rtw-s); }
}
@media (max-width: 24.5rem) {
  .rtw-head h2 { font-size: 1.2rem; }
  .rtw-rail__actions .rtw-btn { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rtw-dialog :where(*) { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Demo-status line under the prescribed confirmation text, and the outcome caption on the simulated provider page. */
.rtw-simnote { margin: 0.55rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--rtw-fa); border: 1px solid var(--rtw-l); font-size: 0.88rem; line-height: 1.5; color: var(--rtw-t); }
.rtw-simnote--lead { margin: 0 0 0.75rem; font-size: 0.92rem; }
.rtw-simnote--short { margin-block-end: 0.55rem; padding-block: 0.4rem; }
.rtw-confirm .rtw-simnote--lead { margin-block: 0.6rem 0.2rem; }
.rtw-simnote--realpay { margin-block: 0 0.75rem; }
.rtw-simnote--realpay a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rtw-sim__pick { margin: 0 0 0.55rem; font-size: 0.82rem; color: var(--rtw-q); }
/* Real payment (Tik central payments, 2026-10-03): a chosen method, the seller, the terms, the receipt. */
.rtw-pay--choose { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.rtw-pay--choose legend { font-weight: 700; margin-block-end: 0.35rem; padding: 0; }
.rtw-pay--choose .rtw-method { grid-template-columns: auto 1fr; cursor: pointer; align-items: center; min-block-size: 44px; }
.rtw-pay--choose .rtw-method input { inline-size: 1.15rem; block-size: 1.15rem; margin: 0; accent-color: var(--rtw-a); }
.rtw-pay--choose .rtw-method small { grid-column: 2; }
.rtw-pay--choose .rtw-method--main { border-color: var(--rtw-l); background: transparent; }
.rtw-pay--choose .rtw-method:has(input:checked) { border-color: var(--rtw-a); background: var(--rtw-ti); }
.rtw-pay--choose .rtw-method:has(input:focus-visible) { outline: 3px solid var(--rtw-a); outline-offset: 2px; }
.rtw-pay--choose .rtw-method[data-state="off"] { cursor: not-allowed; opacity: 0.62; }
.rtw-seller { margin: 0.6rem 0 0; }
.rtw-terms { display: flex; gap: 0.6rem; align-items: flex-start; margin-block-start: 0.75rem; font-size: 0.9rem; line-height: 1.5; cursor: pointer; }
.rtw-terms input { flex: none; inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.15rem; accent-color: var(--rtw-a); }
.rtw-terms input[aria-invalid="true"] { outline: 2px solid #b3261e; outline-offset: 2px; }
.rtw-terms a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
.rtw-receipt { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: baseline; padding: 0.7rem 0.9rem; border: 1px solid var(--rtw-a); border-radius: calc(var(--rtw-r) * 0.7); background: var(--rtw-ti); margin-block: 0.6rem; }
.rtw-receipt a { font-weight: 700; color: inherit; text-decoration: underline; }