:root {
  --ink: #152c31;
  --body: #374b50;
  --muted: #6c7c80;
  --brand: #1f6974;
  --brand-dark: #143f48;
  --accent: #d95f44;
  --paper: #ffffff;
  --canvas: #eef3f2;
  --line: #d7e0de;
  --focus: #ec7b52;
  --danger: #a7342c;
  --radius: 8px;
  --shadow: 0 18px 52px rgba(21, 44, 49, 0.12);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  letter-spacing: 0;
}
button, input, select { font: inherit; letter-spacing: 0; }
a { color: inherit; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 20; padding: 10px 14px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }

.site-header {
  min-height: 72px;
  padding: 10px max(24px, calc((100vw - 1220px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.1rem; line-height: 1.1; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; }
.secure-status { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-dark); font-size: 0.86rem; font-weight: 700; }
.secure-status svg, .pay-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.checkout-shell {
  width: min(1220px, calc(100% - 48px));
  margin: 42px auto;
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(520px, 1.18fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.product-context { position: relative; padding: 42px; background: var(--brand-dark); color: rgba(255, 255, 255, 0.82); overflow: hidden; }
.product-context::after { content: ""; position: absolute; inset: auto -90px -90px auto; width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.12); transform: rotate(24deg); }
.context-copy, .product-image-wrap, .trust-list { position: relative; z-index: 1; }
.eyebrow, .step-label { margin: 0 0 8px; color: #a9d8dd; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
h1, h2 { margin: 0; color: inherit; line-height: 1.12; letter-spacing: 0; }
h1 { max-width: 520px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 2.85rem; font-weight: 600; }
h2 { color: var(--ink); font-size: 1.45rem; }
.intro { max-width: 560px; margin: 18px 0 0; font-size: 1rem; }
.product-image-wrap { min-height: 300px; margin: 30px -10px 20px; display: grid; place-items: center; }
.product-image-wrap img { width: 100%; height: 310px; object-fit: contain; filter: drop-shadow(0 24px 32px rgba(0,0,0,.28)); }
.trust-list { margin: 24px 0 0; padding-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.trust-list div { min-width: 0; }
.trust-list dt { color: rgba(255,255,255,.55); font-size: 0.72rem; text-transform: uppercase; }
.trust-list dd { margin: 3px 0 0; color: #fff; font-size: 0.82rem; overflow-wrap: anywhere; }

.checkout-workspace { padding: 38px 42px 42px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-heading .step-label { color: var(--brand); }
.order-total { color: var(--ink); font-size: 1.65rem; font-weight: 800; }
.status-message { padding: 14px; background: #f3f7f6; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.product-list { display: grid; gap: 10px; margin-bottom: 30px; }
.product-row {
  min-height: 86px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.product-row.is-selected { border-color: var(--brand); box-shadow: inset 3px 0 var(--brand); background: #f8fbfa; }
.product-check { width: 22px; height: 22px; margin: 0 auto; accent-color: var(--brand); }
.product-name { color: var(--ink); font-weight: 760; }
.product-meta { margin-top: 3px; color: var(--muted); font-size: 0.78rem; }
.product-controls { display: grid; grid-template-columns: 76px auto; align-items: center; gap: 12px; }
.product-controls input { width: 76px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; }
.product-price { min-width: 82px; color: var(--ink); font-weight: 800; text-align: right; }

fieldset { margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 14px; color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field span { color: var(--ink); font-size: 0.82rem; font-weight: 720; }
.field em { color: var(--muted); font-style: normal; font-weight: 500; }
.field input, .field select { width: 100%; min-height: 44px; padding: 9px 11px; background: #fff; border: 1px solid #bdcac7; border-radius: 6px; color: var(--ink); }
.field input:focus, .field select:focus, .product-controls input:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(236,123,82,.35); outline-offset: 2px; border-color: var(--focus); }
.field input:user-invalid, .field select:user-invalid { border-color: var(--danger); }
.error-message { margin-top: 16px; padding: 12px 14px; color: var(--danger); background: #fff4f2; border: 1px solid #e6b7b0; border-radius: var(--radius); }
.pay-button { width: 100%; min-height: 52px; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.pay-button:hover:not(:disabled) { background: #c64d34; }
.pay-button:disabled { cursor: not-allowed; opacity: .52; }
.payment-note { margin: 10px 0 0; color: var(--muted); font-size: 0.76rem; text-align: center; }

footer { width: min(1220px, calc(100% - 48px)); margin: 0 auto 36px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 0.8rem; }
footer nav { display: flex; gap: 18px; }
.result-page { width: min(620px, calc(100% - 36px)); margin: 80px auto; padding: 48px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
.result-page h1 { color: var(--ink); font-size: 2.5rem; }
.result-page p { margin: 16px auto 0; max-width: 480px; }
.result-mark { width: 58px; height: 58px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #e3f2ed; color: #26735d; font-size: 1.8rem; font-weight: 900; }
.return-link { display: inline-flex; margin-top: 26px; padding: 11px 18px; border-radius: 6px; background: var(--brand-dark); color: #fff; font-weight: 800; text-decoration: none; }

@media (max-width: 920px) {
  .checkout-shell { grid-template-columns: 1fr; width: min(760px, calc(100% - 32px)); margin: 24px auto; }
  .product-context { padding: 34px; display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: center; }
  .product-image-wrap { min-height: 220px; margin: 0; }
  .product-image-wrap img { height: 240px; }
  .trust-list { grid-column: 1 / -1; }
  h1 { font-size: 2.45rem; }
}

@media (max-width: 620px) {
  .site-header { min-height: 64px; padding: 8px 16px; }
  .brand img { width: 38px; height: 38px; }
  .secure-status { font-size: 0; }
  .secure-status svg { width: 22px; height: 22px; }
  .checkout-shell { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .product-context { display: block; padding: 30px 22px 24px; }
  h1 { font-size: 2.15rem; }
  .product-image-wrap { min-height: 190px; margin: 16px 0 0; }
  .product-image-wrap img { height: 210px; }
  .trust-list { grid-template-columns: 1fr 1fr; }
  .trust-list div:last-child { grid-column: 1 / -1; }
  .checkout-workspace { padding: 28px 18px 34px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .product-row { grid-template-columns: 38px minmax(0, 1fr); }
  .product-controls { grid-column: 2; grid-template-columns: 76px 1fr; }
  .product-price { text-align: left; }
  footer { width: calc(100% - 36px); margin: 24px auto; }
  .result-page { margin: 36px auto; padding: 34px 22px; }
  .result-page h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}