.payment-page {
  --payment-width: 1200px;
  --payment-narrow: 768px;
  --payment-header: 64px;
  --payment-title: clamp(36px, 4vw, 56px);
  --payment-section: 24px;
  --payment-label: 14px;
  --payment-body: 16px;
  --payment-surface: #f6f6f3;
  --payment-brand: #1f5a3a;
  --payment-field: 48px;
  --payment-field-line: #7b8478;
  line-height: 1.6;
}
.payment-masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--s20); min-height: var(--payment-header); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
.payment-brand { display: flex; align-items: center; min-height: var(--target); color: var(--payment-brand); }
.payment-brand img { height: var(--s22); width: auto; }
.payment-back { display: inline-flex; align-items: center; gap: var(--s12); min-height: var(--target); color: var(--muted); font-size: var(--payment-label); }
.payment-back:hover { color: var(--leaf); }
.checkout-page { max-width: calc(var(--payment-width) + 2 * var(--gutter)); margin-inline: auto; padding: var(--s64) var(--gutter) var(--s96); }
.checkout-heading { margin-bottom: var(--s56); }
.payment-page .section-label { font-family: var(--font); font-size: var(--caption); letter-spacing: .06em; }
.checkout-page h1 { font: 800 var(--payment-title)/1.15 var(--font); letter-spacing: -.04em; }
.checkout-intro { color: var(--muted); font-size: var(--payment-body); margin-top: var(--s20); }
.checkout-steps { display: flex; flex-wrap: wrap; gap: var(--s24); list-style: none; margin-top: var(--s32); color: var(--muted); font-size: var(--caption); }
.checkout-steps [aria-current] { color: var(--ink); font-weight: 700; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s80); align-items: start; }
.checkout-panel { min-width: 0; border-top: 1px solid var(--ink); padding-top: var(--s24); }
.checkout-order { position: sticky; top: var(--s32); }
.checkout-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s12); margin-bottom: var(--s28); }
.checkout-section-heading > span { color: var(--leaf); font-size: var(--caption); }
.checkout-section-heading h2 { font: 700 var(--payment-section)/1.3 var(--font); letter-spacing: -.03em; }
.checkout-section-heading small { margin-left: auto; color: var(--muted); font-size: var(--caption); }
.checkout-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--s24); }
.checkout-product-origin { color: var(--leaf); font-size: var(--caption); margin-bottom: var(--s8); }
.checkout-product-name { font: 700 var(--payment-section)/1.3 var(--font); letter-spacing: -.03em; margin-bottom: var(--s24); }
.checkout-panel label { display: block; font-size: var(--payment-label); font-weight: 500; }
.checkout-panel input:not([type="checkbox"]), .checkout-panel select { display: block; width: 100%; min-width: 0; min-height: var(--payment-field); margin-top: var(--s8); padding: var(--s12) var(--s16); color: var(--ink); background: var(--control); border: 1px solid var(--payment-field-line); border-radius: var(--radius); font: 400 var(--payment-body)/1.5 var(--font); }
.checkout-panel input::placeholder { color: var(--muted); opacity: 1; }
.checkout-panel :is(input, select):hover { background-color: var(--payment-surface); }
.checkout-panel :is(input, select):focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }
.checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); }
.checkout-wide { grid-column: 1 / -1; }
.checkout-optional { color: var(--muted); font-size: var(--caption); font-weight: 400; }
.checkout-note { font-size: var(--caption); line-height: 1.7; color: var(--muted); margin-top: var(--s16); }
.checkout-total { margin-top: var(--s24); padding-block: var(--s16); border-block: 1px solid var(--line); }
.checkout-total > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s16); padding-block: var(--s8); font-size: var(--payment-label); }
.checkout-total dt { color: var(--muted); }
.checkout-total strong { font-size: var(--s32); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.checkout-privacy { margin-top: var(--s32); padding-block: var(--s16); border-block: 1px solid var(--line); font-size: var(--caption); }
.checkout-privacy summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s16); cursor: pointer; min-height: var(--target); list-style: none; }
.checkout-privacy summary::-webkit-details-marker { display: none; }
.checkout-privacy summary::after { content: '+'; font-size: var(--s20); }
.checkout-privacy[open] summary::after { content: '−'; }
.checkout-privacy p { color: var(--muted); margin-block: var(--s8); line-height: 1.8; }
.checkout-panel .checkout-consent { display: flex; align-items: flex-start; gap: var(--s12); min-height: var(--target); padding-block: var(--s12); margin-top: var(--s12); line-height: 1.7; font-weight: 400; }
.checkout-consent input { flex-shrink: 0; width: var(--s20); height: var(--s20); accent-color: var(--ink); margin-top: 2px; }
.checkout-consent span { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.checkout-status { font-size: var(--payment-label); margin-block: var(--s24) var(--s16); padding: var(--s16); background: var(--payment-surface); }
.checkout-status[data-error="true"] { color: var(--ink); font-weight: 500; }
.checkout-submit { width: 100%; font-size: var(--payment-body); }
.payment-page button:not(:disabled):active { transform: translateY(1px); }
.checkout-submit:disabled, .payment-result .action:disabled { color: var(--muted); background: var(--paper); }
.payment-footer { max-width: calc(var(--payment-width) + 2 * var(--gutter)); margin-inline: auto; padding: var(--s24) var(--gutter) var(--s40); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s16); color: var(--muted); font-size: var(--caption); border-top: 1px solid var(--line); }
.payment-footer a { display: inline-flex; align-items: center; min-height: var(--target); }
.payment-dialog { width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius); background: var(--background); color: var(--ink); }
.payment-dialog::backdrop { background: rgba(15, 26, 12, .6); }
.payment-dialog-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s12); padding: var(--s12) var(--s24); border-bottom: 1px solid var(--line); }
.payment-dialog-bar h2 { font: 700 var(--payment-body)/1.5 var(--font); }
.payment-dialog button { min-height: var(--target); padding: var(--s8) var(--s12); color: var(--ink); font: inherit; cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); }
.payment-dialog button:hover { background: var(--paper); }
.payment-dialog-content { padding: var(--s24); font-size: var(--payment-body); }
.payment-dialog-content button { margin-top: var(--s24); width: 100%; background: var(--ink); color: var(--cream); }
.payment-dialog-content button:hover { background: var(--leaf); }
.payment-result { max-width: calc(var(--payment-narrow) + 2 * var(--gutter)); min-height: calc(100svh - var(--payment-header)); padding-top: var(--s96); }
.payment-result .checkout-panel { padding-block: var(--s32); }
.payment-result h1 { margin-bottom: var(--s24); }
.payment-result #resultMessage { color: var(--muted); font-size: var(--payment-body); }
.payment-result dl { margin-block: var(--s32); padding-block: var(--s16); border-block: 1px solid var(--line); }
.payment-result dl > div { display: grid; grid-template-columns: var(--s96) minmax(0, 1fr); gap: var(--s16); padding-block: var(--s8); font-size: var(--payment-body); }
.payment-result dt { color: var(--muted); font-size: var(--payment-label); }
.payment-result dd { overflow-wrap: anywhere; }
.payment-result .action { margin-top: var(--s32); transition: none; }
.payment-result .text-link { margin-top: var(--s16); font-size: var(--payment-label); }
@media (max-width: 900px) {
  .payment-page { --gutter: 20px; }
  .checkout-page { padding-block: var(--s32) var(--s64); }
  .checkout-heading { margin-bottom: var(--s40); }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s48); }
  .checkout-order { position: static; }
  .checkout-photo { width: var(--s120); aspect-ratio: 1; float: left; margin: 0 var(--s20) var(--s24) 0; }
  .checkout-order > label { clear: both; }
  .checkout-section-heading small { margin-left: 0; }
  .payment-result { padding-top: var(--s64); }
}
@media (max-width: 600px) {
  .payment-brand img { height: var(--s20); }
  .payment-back { font-size: var(--caption); gap: var(--s8); }
  .checkout-steps { gap: var(--s20); }
  .checkout-fields { grid-template-columns: minmax(0, 1fr); }
  .payment-footer { display: block; }
  .payment-footer a { display: flex; width: fit-content; margin-top: var(--s8); }
  .payment-result dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
}
@media (prefers-reduced-motion: reduce) { html:has(.payment-page) { scroll-behavior: auto; } .payment-page * { transition: none; } }