/* ===== Amino House — Purchase flow (checkout / confirmation / order / 404) =====
   Matches the navy + Source Serif system in polish.css. Loaded last. */

/* ---------- Checkout ---------- */
.co { min-height: 100vh; background: var(--off); }
/* C2 — iOS reports 100vh as the chrome-collapsed height, so a min-height:100vh page overshoots the
   visible area on first paint. dvh tracks the real viewport; the vh line above stays as fallback. */
@supports (height: 100dvh) { .co { min-height: 100dvh; } }
.co-topbar { background: #fff; border-bottom: 1px solid var(--border); }
.co-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.co-logo { display: inline-flex; align-items: center; }
.co-logo .logo, .co-logo img { height: 40px; }
.co-topbar-left { display: inline-flex; align-items: center; gap: 16px; }
.co-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 11px; border-radius: 100px;
  border: 1px solid var(--border); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.co-back-btn svg { stroke: currentColor; }
.co-back-btn:hover {
  background: var(--off);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  color: var(--accent);
}
@media (max-width: 480px) {
  .co-topbar-left { gap: 10px; }
  .co-back-btn span { display: none; }
  .co-back-btn { padding: 9px; }
  .co-logo .logo, .co-logo img { height: 34px; }
}
.co-secure {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: -0.005em;
}
.co-secure svg { stroke: var(--accent); }

.co-body {
  display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 56px;
  padding-top: 48px; padding-bottom: 96px; align-items: start;
}
/* Let the grid columns shrink below their content's intrinsic width so inputs
   never force the step wider than the viewport (min-width:auto is the default). */
.co-main, .co-rail { min-width: 0; }
.co-back {
  display: inline-block; margin-bottom: 24px;
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: -0.005em;
}
.co-back:hover { color: var(--accent); }

/* Steps */
.co-step { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.co-step.active { border-color: var(--border-strong); box-shadow: 0 10px 30px rgba(11,37,69,0.06); }
.co-step.locked { opacity: 0.55; }
.co-step-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
.co-step.done .co-step-head { cursor: pointer; }
.co-step-n {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 100px;
  background: var(--off); border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.co-step.active .co-step-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.co-step.done .co-step-n { background: #16a34a; border-color: #16a34a; color: #fff; }
.co-step-label { font-family: inherit; font-style: normal; font-size: 20px; font-weight: 600; color: var(--ink); flex: 1; letter-spacing: -0.01em; }
.co-step-edit { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; }
.co-step-edit:hover { text-decoration: underline; }
.co-step-summary { padding: 0 24px 20px 66px; margin-top: -6px; font-size: 14px; color: var(--muted); }
.co-step-body { padding: 4px 24px 26px; }

/* Fields */
.co-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.co-field--full { grid-column: 1 / -1; }
.co-field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-field-label { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.co-field input {
  height: 48px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 9px;
  font-size: 15px; color: var(--ink); background: #fff; font-family: inherit;
  min-width: 0; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.co-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,37,69,0.08); }
.co-field input:disabled { background: var(--off); color: var(--muted); }

/* The country control. It matches the text inputs exactly, because it sits in the same grid and is
   the same kind of question — a select that looks like a different species of field reads as an
   afterthought bolted onto the form. appearance:none removes the platform chrome so the caret can
   be ours and identical on all three engines. */
.co-select {
  height: 48px; padding: 0 38px 0 14px; border: 1.5px solid var(--border); border-radius: 9px;
  font-size: 15px; color: var(--ink); background: #fff; font-family: inherit;
  min-width: 0; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6172' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
.co-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,37,69,0.08); }
/* Until a country is chosen the placeholder reads as placeholder text, not as an answer. */
.co-select:invalid, .co-select option[value=""] { color: var(--muted); }

/* A field the person still has to fill in, marked ON the field. The old flow raised an alert()
   that named no field; this points at the one that needs attention and clears the moment it does. */
.co-field-invalid, .co-field input.co-field-invalid, select.co-field-invalid {
  border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185,28,28,.08);
}

/* Contact, collapsed — a signed-in customer's email, stated rather than asked for. */
.co-step--collapsed .co-step-summary--static {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.co-known-email { color: var(--ink); font-weight: 500; }
.co-signout { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.co-signout:hover { color: var(--ink); }

.co-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.co-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.co-continue, .co-place { margin-top: 22px; width: 100%; }
.btn.co-continue:disabled, .btn.co-place:disabled { opacity: 0.4; cursor: not-allowed; }

.co-note, .co-cold, .co-pay-secure {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 12.5px; color: var(--muted); line-height: 1.4;
}
.co-note svg, .co-cold svg, .co-pay-secure svg { stroke: var(--accent); flex-shrink: 0; }

/* Delivery */
.co-delivery { display: flex; flex-direction: column; gap: 10px; }
.co-deliv {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.co-deliv:hover { border-color: var(--border-strong); }
.co-deliv.on { border-color: var(--accent); background: var(--accent-soft); }
.co-deliv-radio { width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid var(--border-strong); border-radius: 100px; position: relative; }
.co-deliv.on .co-deliv-radio { border-color: var(--accent); }
.co-deliv.on .co-deliv-radio::after { content: ''; position: absolute; inset: 4px; background: var(--accent); border-radius: 100px; }
/* Name and description are two lines, not two inline spans that ran together ("DHL Paket1–3
   business days" — round 2, task 1). The name line also carries the carrier mark, after the name. */
.co-deliv-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-deliv-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.co-deliv-desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 0; line-height: 1.4; }
.co-deliv-price { font-size: 15px; font-weight: 600; color: var(--ink); }
.co-free { color: #16a34a; font-weight: 700; }

/* Payment */
.co-pay-chips { display: flex; gap: 8px; margin-top: 16px; }
.co-pay-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 5px 9px; background: var(--off);
}
.co-ruo { margin-top: 14px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* Summary rail */
.co-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.co-summary { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.co-summary-head { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.co-summary-items { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.co-sum-item { display: flex; align-items: center; gap: 12px; }
.co-sum-thumb {
  width: 52px; height: 52px; border-radius: 9px; position: relative; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--border);
}
.co-sum-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.co-sum-thumb .vial { width: 16px; height: 34px; background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); border: 1px solid rgba(11,37,69,0.18); border-radius: 3px 3px 5px 5px; }
.co-sum-meta { flex: 1; min-width: 0; }
.co-sum-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.co-sum-variant { font-size: 12px; color: var(--muted); margin-top: 2px; }
.co-sum-price { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── Discount code (DIVERGENCES.md §28) ─────────────────────────────────────
   Site row grammar: the input is the same 44px pill as every other field, the Apply button is the
   ghost weight so it never competes with "Place order", and the applied state replaces the form
   rather than sitting beside it — two controls for one decision reads as an unfinished action. */
.co-coupon { padding: 16px 0 4px; border-bottom: 1px solid var(--border); }
.co-coupon-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.co-coupon-row { display: flex; gap: 8px; align-items: stretch; }
.co-coupon-input {
  flex: 1; min-width: 0; /* min-width:auto on a flex child is the classic overflow bug */
  height: 44px; padding: 0 14px; font: inherit; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 100px; background: #fff; color: var(--ink);
  transition: border-color .15s ease;
}
.co-coupon-input::placeholder { letter-spacing: normal; text-transform: none; color: var(--muted); }
.co-coupon-input:focus { outline: none; border-color: var(--ink); }
.co-coupon-apply {
  flex-shrink: 0; height: 44px; padding: 0 20px; font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--ink); border-radius: 100px; background: #fff; color: var(--ink);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.co-coupon-apply:hover { background: var(--ink); color: #fff; }
.co-coupon.is-busy { opacity: .6; pointer-events: none; }
.co-coupon--error .co-coupon-input { border-color: #b91c1c; }
.co-coupon-err { margin-top: 8px; font-size: 13px; line-height: 1.45; color: #b91c1c; }

/* Applied state: the code, what it is worth, and one way out. */
.co-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-coupon-tag {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  padding: 8px 14px; border-radius: 100px;
  background: var(--green-soft, #e7f6ee); color: #16a34a;
  font-size: 13px; font-weight: 600;
}
.co-coupon-tag b { letter-spacing: .06em; text-transform: uppercase; color: #0f7a45; }
.co-coupon-tag span { color: #0f7a45; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-coupon-remove {
  flex-shrink: 0; position: relative; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer;
}
.co-coupon-remove:hover { color: var(--ink); }

.co-summary-lines { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.co-line { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.co-line span:last-child { color: var(--ink); font-weight: 500; }
.co-line--save span:last-child { color: #16a34a; font-weight: 600; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; font-size: 16px; font-weight: 600; color: var(--ink); }
.co-total span:last-child { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.co-total small { font-size: 11px; color: var(--muted); font-weight: 600; margin-right: 4px; }

.co-protect {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.co-protect:hover { border-color: var(--border-strong); }
.co-protect.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(11,37,69,0.05); }
.co-protect-check {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.co-protect.on .co-protect-check { background: var(--accent); border-color: var(--accent); }
.co-protect-icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.co-protect-meta { flex: 1; min-width: 0; }
.co-protect-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.co-protect-fee { color: var(--accent); font-weight: 700; }
.co-protect-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

.co-promo { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.co-promo-row { display: flex; gap: 8px; }
.co-promo-row input { flex: 1; height: 42px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.co-promo-row input:focus { outline: none; border-color: var(--accent); }
.co-promo-row .btn { height: 42px; }
.co-promo-on { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #16a34a; font-weight: 600; }
.co-promo-on svg { stroke: #16a34a; }

.co-trust { display: flex; flex-direction: column; gap: 12px; padding: 4px 6px; }
.co-trust-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.co-trust-item svg { stroke: var(--accent); flex-shrink: 0; }

/* Checkout empty */
.co-empty { max-width: 460px; margin: 0 auto; text-align: center; padding: 120px 24px; }
.co-empty-icon { width: 84px; height: 84px; margin: 0 auto 28px; border-radius: 100px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.co-empty h1 { font-size: 36px; margin-bottom: 12px; }
.co-empty p { color: var(--muted); margin-bottom: 28px; font-size: 16px; }

/* ---------- Order confirmation ---------- */
.oc { padding: 64px 0 110px; background: var(--off); min-height: 80vh; }
.oc-hero { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.oc-check {
  width: 76px; height: 76px; margin: 0 auto 26px; border-radius: 100px;
  background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(22,163,74,0.32);
}
.oc-hero .eyebrow { color: #16a34a; display: block; margin-bottom: 14px; }
.oc-hero h1 { font-size: clamp(40px, 5vw, 60px); margin-bottom: 16px; }
.oc-hero p { color: var(--muted); font-size: 17px; line-height: 1.5; }
.oc-id { margin-top: 20px; display: inline-block; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 10px 18px; }

.oc-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start; max-width: 1000px; margin: 0 auto; }
.oc-card, .oc-receipt { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 32px; }
.oc-card h2 { font-size: 26px; margin-bottom: 22px; }
.oc-steps { list-style: none; counter-reset: oc; display: flex; flex-direction: column; gap: 20px; }
.oc-steps li { position: relative; padding-left: 44px; font-size: 14.5px; color: var(--muted); line-height: 1.5; counter-increment: oc; }
.oc-steps li b { color: var(--ink); font-weight: 600; }
.oc-steps li::before {
  content: counter(oc); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 100px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.oc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }

.oc-receipt-head { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.oc-receipt-items { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.oc-ship-to { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.oc-ship-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.oc-ship-addr { font-size: 14px; color: var(--ink); line-height: 1.6; }

/* ---------- Order detail / tracking ---------- */
.od { padding: 48px 0 110px; min-height: 80vh; }
.od-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 18px 0 40px; flex-wrap: wrap; }
.od-head h1 { font-size: clamp(38px, 4.5vw, 56px); margin: 8px 0 10px; }
.od-head p { color: var(--muted); font-size: 15px; }
.od-status { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 16px; border-radius: 100px; white-space: nowrap; }
.od-status--processing { background: var(--accent-soft); color: var(--accent); }
.od-status--in-transit, .od-status--shipped { background: #fef3e2; color: #b45309; }
.od-status--delivered { background: #f0fdf4; color: #16a34a; }

.od-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 24px; align-items: start; }
.od-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 30px; }
.od-card h2 { font-size: 24px; margin-bottom: 26px; }
.od-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 18px; }
.od-side { display: flex; flex-direction: column; gap: 24px; }

/* Timeline */
.od-timeline { position: relative; display: flex; flex-direction: column; gap: 4px; }
.od-tl { display: flex; gap: 18px; position: relative; padding-bottom: 26px; }
.od-tl:last-child { padding-bottom: 0; }
.od-tl-marker { position: relative; flex-shrink: 0; width: 22px; display: flex; justify-content: center; }
.od-tl-marker span { width: 14px; height: 14px; border-radius: 100px; background: #fff; border: 2px solid var(--border-strong); margin-top: 3px; z-index: 1; }
.od-tl:not(:last-child) .od-tl-marker::after { content: ''; position: absolute; top: 16px; bottom: -14px; left: 50%; width: 2px; transform: translateX(-50%); background: var(--border); }
.od-tl.done .od-tl-marker span { background: #16a34a; border-color: #16a34a; }
.od-tl.done:not(:last-child) .od-tl-marker::after { background: #16a34a; }
.od-tl.current .od-tl-marker span { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(11,37,69,0.12); }
.od-tl-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.od-tl:not(.done) .od-tl-label { color: var(--muted); }
.od-tl-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

.od-track-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.od-track-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.od-track-num { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; color: var(--ink); }

.od-items { display: flex; flex-direction: column; gap: 14px; }
.od-item { display: flex; align-items: center; gap: 12px; }
.od-item-thumb { width: 48px; height: 48px; border-radius: 9px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.od-item-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.od-item-thumb .vial { width: 15px; height: 30px; background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); border: 1px solid rgba(11,37,69,0.18); border-radius: 3px 3px 5px 5px; }
.od-item-meta { flex: 1; min-width: 0; }
.od-item-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.od-item-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.od-addr { font-size: 14px; color: var(--ink); line-height: 1.6; }
.od-help p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }

/* ---------- 404 ---------- */
.nf { padding: 130px 0; text-align: center; min-height: 70vh; display: flex; align-items: center; }
.nf-inner { max-width: 560px; margin: 0 auto; }
.nf-code { font-family: inherit; font-style: normal; font-size: 100px; font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -0.03em; opacity: 0.9; }
.nf h1 { font-size: clamp(36px, 4.5vw, 52px); margin: 10px 0 16px; }
.nf p { color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 44ch; margin: 0 auto 32px; }
.nf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nf-links { display: flex; gap: 24px; justify-content: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.nf-links a { font-size: 13px; font-weight: 600; color: var(--muted); }
.nf-links a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .co-body { grid-template-columns: 1fr; gap: 24px; }
  /* Form-first on mobile: steps (Contact + Continue button) sit at the top,
     order summary flows below — instead of scrolling past the whole summary. */
  .co-rail { position: static; order: 1; }
  .co-main { order: 0; }
  .oc-grid, .od-grid { grid-template-columns: 1fr; }
  .od-side { order: -1; }
}
@media (max-width: 900px) {
  /* Compact the whole flow on phones/tablets so each step is smaller and quicker
     to click through. (Was ≤560px, which missed ~600–900px devices entirely.) */
  .co-topbar-inner { height: 58px; }
  .co-logo .logo, .co-logo img { height: 32px; }
  .co-secure { font-size: 12px; gap: 6px; }

  .co-body { padding-top: 22px; padding-bottom: 60px; }
  .co-back { margin-bottom: 16px; font-size: 12.5px; }

  /* Steps */
  .co-step { border-radius: 10px; margin-bottom: 10px; }
  .co-step-head { padding: 13px 15px; gap: 11px; }
  .co-step-n { width: 24px; height: 24px; font-size: 12px; }
  .co-step-label { font-size: 16px; }
  .co-step-summary { padding: 0 15px 13px 50px; margin-top: -4px; font-size: 12.5px; }
  .co-step-body { padding: 2px 15px 18px; }

  /* Fields */
  .co-field-grid { grid-template-columns: 1fr; gap: 11px; }
  .co-field-row2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .co-field { gap: 5px; }
  .co-field-label { font-size: 11.5px; }
  .co-field input { height: 42px; padding: 0 12px; font-size: 14px; border-radius: 8px; }
  .co-check { font-size: 12.5px; margin-top: 12px; gap: 8px; }
  .co-check input { width: 16px; height: 16px; }
  .co-continue, .co-place { margin-top: 16px; }
  .co-note, .co-cold, .co-pay-secure { font-size: 11.5px; margin-top: 12px; gap: 7px; }

  /* Delivery */
  .co-delivery { gap: 8px; }
  .co-deliv { padding: 12px 14px; gap: 11px; border-radius: 9px; }
  .co-deliv-radio { width: 18px; height: 18px; }
  .co-deliv-name { font-size: 13.5px; }
  .co-deliv-desc { font-size: 11.5px; }
  .co-deliv-price { font-size: 14px; }

  /* Payment */
  .co-pay-chips { gap: 6px; margin-top: 12px; }
  .co-pay-chip { font-size: 9px; padding: 4px 7px; }
  .co-ruo { font-size: 11px; margin-top: 12px; }

  /* Summary rail */
  .co-rail { gap: 12px; }
  .co-summary { padding: 16px; border-radius: 10px; }
  .co-summary-head { font-size: 11px; margin-bottom: 14px; letter-spacing: 0.12em; }
  .co-summary-items { gap: 11px; padding-bottom: 14px; }
  .co-sum-item { gap: 10px; }
  .co-sum-thumb { width: 44px; height: 44px; border-radius: 8px; }
  .co-sum-name { font-size: 13px; }
  .co-sum-variant { font-size: 11px; }
  .co-sum-price { font-size: 13px; }
  /* The Remove link is small text; give it a real 44px target without growing the visual. */
  .co-coupon-remove::after { content: ""; position: absolute; inset: -14px -10px; }
  .co-coupon-row { gap: 6px; }
  .co-coupon-apply { padding: 0 16px; }
  .co-summary-lines { gap: 8px; padding: 14px 0; }
  .co-line { font-size: 13px; }
  .co-total { padding-top: 14px; font-size: 15px; }
  .co-total span:last-child { font-size: 19px; }

  /* Protect / promo / trust */
  .co-protect { padding: 12px; border-radius: 10px; gap: 10px; }
  .co-protect-check { width: 18px; height: 18px; }
  .co-protect-name { font-size: 13px; }
  .co-protect-sub { font-size: 11.5px; }
  .co-promo { padding: 12px; border-radius: 10px; }
  .co-promo-row input { height: 38px; font-size: 13px; }
  .co-promo-row .btn { height: 38px; }
  .co-trust { gap: 9px; }
  .co-trust-item { font-size: 11.5px; gap: 9px; }
}
@media (max-width: 560px) {
  .oc-card, .oc-receipt, .od-card { padding: 22px; }
  .nf-links { flex-wrap: wrap; gap: 14px; }

  /* Order detail / tracking */
  .od { padding: 28px 0 80px; }
  .od-head { margin: 12px 0 28px; gap: 14px; }
  .od-head h1 { font-size: 32px; }
  .od-card h2 { font-size: 20px; margin-bottom: 20px; }
  .od-track-row { gap: 12px; }
  .od-track-row .btn { width: 100%; }
}


/* ===== Payment-provider-connected variant (window.AH_PAYMENTS) =====
   Method picker built from the same card language as the delivery-method
   rows: hairline border, 12px radius, accent border + tint when selected. */
.co-paym { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.co-paym-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit; text-align: left;
  transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
}
.co-paym-opt:hover { border-color: var(--ink); }
.co-paym-opt.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 5%, #fff); }
.co-paym-radio {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 100px;
  border: 2px solid var(--border-strong, #ccd2dd); transition: border-color .15s ease, background .15s ease;
}
.co-paym-opt.on .co-paym-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, #fff 46%); }
.co-paym-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-paym-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.co-paym-sub { font-size: 12.5px; color: var(--muted); }
.co-paym-mark {
  margin-left: auto; flex-shrink: 0; padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--off);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}
.co-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.co-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.co-card input {
  height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff;
  font-variant-numeric: tabular-nums;
}
.co-card input:focus { outline: none; border-color: var(--ink); }
/* NB: distinct from .co-secure, which is the checkout topbar trust badge. */
.co-paysecure {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.co-paysecure svg { flex-shrink: 0; margin-top: 1px; stroke: var(--green); }
@media (max-width: 640px) {
  .co-paym-opt { padding: 12px; gap: 10px; }
  .co-paym-sub { display: none; }          /* 390: name + mark is enough */
  .co-card-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .co-card input { height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME-ONLY — not in design-source/v3/preview/checkout.css.
     · .co-tier*    checkout loyalty strip — ARCHIVED (nothing renders while the
                    loyalty flag is off); kept so the restore path stays intact
   Re-append after any future verbatim port of checkout.css.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ===== v2 Checkout C2: loyalty tier strip ===== */
.co-tier {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px; margin-bottom: 18px;
  background: var(--off); border: 1px solid var(--border);
}

.co-tier-badge {
  flex: 0 0 auto; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px; background: var(--ink); color: #fff;
}

.co-tier-badge[data-tier="silver"] { background: #64748b; }

.co-tier-badge[data-tier="gold"] { background: #c99a3a; }

.co-tier-badge[data-tier="platinum"] { background: linear-gradient(135deg,#475569,#94a3b8); }

.co-tier-txt { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.co-tier-txt b { color: var(--ink); font-weight: 700; }
/* ── Address autocomplete ──────────────────────────────────────────────────────
 *
 * Google's own widget is not used, so none of this is fighting `.pac-container`; the list is our
 * markup and inherits the checkout's card, radius and type directly. Sizes are deliberate: every
 * row clears 44px so it is a real touch target on a phone, and the list is capped in height so it
 * cannot cover the fields under it on a short viewport.
 */
.ah-ac-wrap { position: relative; display: block; }

.ah-ac-list {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(13, 15, 26, 0.12);
  max-height: 288px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ah-ac-list[hidden] { display: none; }

.ah-ac-item {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-height: 44px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.ah-ac-item.is-active { background: var(--off); }
.ah-ac-main { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ah-ac-sub { font-size: 12.5px; color: var(--muted); line-height: 1.3; }

/* Announced to screen readers, shown to nobody. */
.ah-ac-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 720px) {
  /* One finger, one row: more padding and a shorter list so the keyboard still leaves it visible. */
  .ah-ac-item { min-height: 48px; padding: 10px 12px; }
  .ah-ac-list { max-height: 240px; }
}

/* ── Card fields inside the payment step ───────────────────────────────────────
 *
 * The gateway paints its own inputs into this container and we style the container, not its
 * contents: a processor's iframe is not ours to reach into, and a rule that assumes one gateway's
 * markup breaks the day the processor changes. Indented under the chosen option so it reads as
 * belonging to it, in the same card grammar as the rest of the step. */
.co-pay-fields {
  margin: -4px 0 12px; padding: 16px; border: 1.5px solid var(--border);
  border-top: 0; border-radius: 0 0 12px 12px; background: #fff;
}
.co-pay-fields[hidden] { display: none; }
/* The processor's method mark, sat on the method's own name. Sized rather than restyled: these are
 * somebody else's trademarks and Mollie's brand rules do not permit recolouring or cropping them,
 * so the only thing we set is how much room they take. `img` is a descendant selector because the
 * gateway decides the markup inside, not us. */
.co-pay-mark { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; }
.co-pay-mark img { height: 20px; width: auto; max-width: 46px; display: block; }
/* `hidden` is a UA `display:none`, and an explicit `display:flex` in a class rule beats it. Both
 * reassurance lines painted at once until this existed. */
.co-pay-secure[hidden] { display: none; }
.co-pay-note { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.co-pay-test {
  margin: 10px 0 0; font-size: 11.5px; color: var(--muted);
  padding: 7px 9px; background: var(--off); border-radius: 7px;
}
.co-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-card-grid .co-field--full { grid-column: 1 / -1; }

/* THE PAYMENT METHOD LIST.
 *
 * `.co-reserve` is styled in polish.css as a single flex ROW — it was built when the payment step
 * held one explanatory panel, and with one child that looked right. Give it three children and the
 * options lay out as columns beside each other. So the list is scoped by its data attribute and
 * restyled as a stack, leaving the original rule alone for any other use.
 *
 * The options themselves borrow the delivery step's grammar exactly (`.co-deliv`): same border,
 * radius, radio dot, selected tint. A customer choosing how to pay should be looking at the same
 * control they just used to choose how it ships. */
.co-reserve[data-co-pay-list] {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  border: 0; background: none; padding: 0; margin-bottom: 14px;
}
.co-reserve[data-co-pay-list] .co-reserve-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start;
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
/* THE COMPACT ROW (processor methods): radio, name, marks on one line, no sentence. 44px is the
 * touch floor, kept as a min-height so the tighter padding can never shrink the target under it.
 * Logical properties only, so /ar/ mirrors without a rule of its own. */
.co-reserve[data-co-pay-list] .co-reserve-opt--compact { align-items: center; min-height: 44px; padding: 8px 14px; }
.co-reserve[data-co-pay-list] .co-reserve-opt--compact .co-deliv-radio { margin-top: 0; }
.co-reserve[data-co-pay-list] .co-reserve-opt--compact .co-reserve-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 28px; }
.co-reserve[data-co-pay-list] .co-reserve-opt--compact .co-pay-mark { margin-inline-start: 0; margin-top: 0; }
.co-reserve[data-co-pay-list] .co-reserve-opt:hover { border-color: var(--border-strong); }
.co-reserve[data-co-pay-list] .co-reserve-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.co-reserve[data-co-pay-list] .co-reserve-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.co-reserve[data-co-pay-list] .co-reserve-opt.on .co-deliv-radio { border-color: var(--accent); }
.co-reserve[data-co-pay-list] .co-reserve-opt.on .co-deliv-radio::after {
  content: ''; position: absolute; inset: 4px; background: var(--accent); border-radius: 100px;
}
/* The radio has to sit on the first line of text, not centred against a three-line paragraph. */
.co-reserve[data-co-pay-list] .co-deliv-radio { margin-top: 1px; }
.co-reserve-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.co-reserve-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.co-reserve-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* The option directly above an open field panel loses its bottom rounding so the two read as one. */
.co-reserve[data-co-pay-list] .co-reserve-opt.on:has(+ .co-pay-fields:not([hidden])) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -10px;
}

@media (max-width: 720px) {
  .co-pay-fields { padding: 12px; }
  .co-card-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ── In-page payments (inc/payments/provider.php) ──────────────────────────────
 *
 * Two hooks the provider's elements mount into, styled in the step's own grammar and with its
 * own tokens; the elements themselves are the provider's iframes, sized by their appearance
 * config from the same tokens (payments-native.js reads them off :root). Nothing here is new
 * visual language: the lead is the summary head's small caps, the divider is the border colour,
 * the panel is the existing .co-pay-fields shell. Absent entirely on the hosted path. */
.co-express { margin: 0 0 16px; }
.co-express[hidden] { display: none; }
.co-express-lead {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
/* The platform draws the button; this only reserves the row so the tiles do not jump when it lands. */
.co-express-mount { min-height: 48px; }
.co-express-or {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  font-size: 12.5px; color: var(--muted);
}
.co-express-or::before, .co-express-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.co-pay-fields--native { padding: 16px 18px 14px; }
/* Reserves the card form's height before the iframe paints, so the panel opens once, not twice. */
.co-native-card { min-height: 52px; }
.co-native-card[data-co-native-card-ready] { min-height: 0; }
/* While the browser is confirming, the tiles are not for changing. */
form.is-paying [data-co-pay-list] { pointer-events: none; opacity: .7; }
@media (max-width: 720px) {
  .co-express { margin-bottom: 14px; }
  .co-pay-fields--native { padding: 12px; }
}

/* Sign in at the contact step (round 6, task 5): the site's own field, button and error line. */
.co-signin { margin: 2px 0 14px; font-size: 13.5px; color: var(--muted); }
.co-signin-lead { margin: 0; }
.co-signin-toggle { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.co-signin-panel { display: grid; gap: 10px; margin-top: 12px; }
.co-signin-panel[hidden] { display: none; }
.co-signin-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.co-signin-forgot { color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.co-signin [data-co-signin-err][hidden] { display: none; }