/* Checkout typography — measured against the live Shopify checkout, not eyeballed.
   Numbers come from scripts/measure-checkout-parity.mjs, which drives a real browser to both pages and
   diffs computed styles. Re-run it after touching anything here.

   SCOPED TO CHECKOUT ON PURPOSE. The Shopify checkout renders in Poppins; the rest of the funnel (offer
   page, upsells, thank-you) is TT Commons, which is the Qure brand face used in the Figma designs.
   Marko's call 2026-08-12: match Shopify on the checkout, leave the brand font everywhere else. Loading
   this file on any other page would restyle work Magda has already signed off. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/Poppins/Poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/Poppins/Poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/Poppins/Poppins-600.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/Poppins/Poppins-700.woff2) format("woff2"); }

/* Self-hosted rather than pulled from fonts.googleapis.com: this is the page that takes money, and a
   render-blocking third-party request there is a latency and availability dependency we don't need.
   Latin subset only — 4 weights, ~8KB each. */

body.up-page.co2-checkout,
body.up-page.co2-checkout input,
body.up-page.co2-checkout select,
body.up-page.co2-checkout button,
body.up-page.co2-checkout textarea {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
}

/* ---- measured against the reference (SHOPIFY -> was OURS) ---- */

/* Section headings. "Shipping method" is genuinely smaller than the others in the reference —
   16px/19.2 against 20px/24 — which reads as a deliberate sub-step rather than a peer of Contact and
   Delivery. Ours had all four at a flat 22px/27.5 w600. */
.co2-checkout .co2-block h2 { font-family: "Poppins", system-ui, sans-serif; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 0; }
.co2-checkout .co2-block--sub h2 { font-size: 16px; line-height: 19.2px; }

/* Order summary heading: 21px/28.4 w700, against ours at 16px/20 — it was reading as a label rather
   than the panel's title. */
.co2-checkout .co2-summary h3 { font-family: "Poppins", system-ui, sans-serif; font-size: 21px; line-height: 28.4px; font-weight: 700; }

/* Fields: 47px tall, 12px radius, 14px text. Ours were 53px tall at an 8px radius with 15px text.
   The reference's border sits on a wrapper (the input itself measures border-width 0); ours is on the
   input, which is visually equivalent, so the border stays and only the metrics move. */
.co2-checkout .co2-fl input,
.co2-checkout .co2-fl select { height: 47px; border-radius: 12px; font-size: 14px;
  padding: 21px 12px 4px; }
.co2-checkout .co2-fl select { padding-right: 36px; }
.co2-checkout .co2-fl label { font-size: 14px; }
/* The floated label and the value have to clear each other. Shrinking the field to 47px moved the value
   up but left the label at its 53px position (top:9px, ~13px tall) while the value still began at
   padding-top:19px — a 3px overlap, visible as "Country/Region" printed through "United States".
   Label now occupies 6-19px and the value starts at 21px, leaving a 2px gap. */
.co2-checkout .co2-fl input:focus ~ label,
.co2-checkout .co2-fl input:not(:placeholder-shown) ~ label,
.co2-checkout .co2-fl select ~ label { top: 6px; font-size: 11px; }
.co2-checkout .co2-fl.has-icon input { padding-right: 40px; }

/* Summary rows: the reference runs its figures in near-black, not grey. */
.co2-checkout .co2-trow { font-size: 14px; color: #000; }
.co2-checkout .co2-trow--pending { color: #6b7177; }
.co2-checkout .co2-total { font-size: 18px; line-height: 24px; font-weight: 700; color: #000;
  padding-top: 16px; }
/* 18px/24 matches the reference exactly (measured 18 / 24.3), but at that ratio Poppins' caps and the
   "$" glyph overflow their line box by ~1px, so with only 12px above they sat right on the rule and
   read as clipped. Nothing was ever actually cut — no ancestor clips and the ink fits the box — the
   glyphs just had no air. 4px more padding, type metrics untouched. */

/* Column split. The reference gives the form the wider half: summary panel 670/1440 = 46.5%, starting
   at 53.5%. Ours was a flat 50/50, which squeezed the fields (469px wide there vs 502px here) and made
   the mint panel dominate. */
.co2-checkout .co2-shell { grid-template-columns: 53.5% 46.5%; }

/* Panel fill, sampled off the reference. Ours sat a few points lighter. */
.co2-checkout .co2-right { background: rgb(203, 228, 222); }

/* Form width. The reference insets its form inside the left column — a 469px field in a 770px column —
   rather than letting it fill the width. Ours stretched to 552px, which made the same fields read as a
   wider, looser form than the one next to it.
   ONLY while the two-column layout is up (.co2-shell stacks at 900px). Applied at every width it capped
   the form on phones too, leaving it hugging the left edge with dead space beside it — the cap is a
   property of the wide layout, not of the form. */
@media (min-width: 901px) {
  .co2-checkout .co2-left > * { max-width: 469px; }
}

/* iOS zooms the viewport when a focused field is under 16px, and will not zoom back out on blur — the
   shopper is left pinching between every field. 14px matches the reference on desktop; at touch widths
   correctness beats parity, so the fields go to 16px. This rule has to live HERE as well as in
   upsell.css: `.co2-checkout .co2-fl input` (0,2,1) outranks the guard's `.co2-fl input` (0,1,1) and
   this file loads later, so without it the 14px simply wins again. */
@media (max-width: 768px) {
  .co2-checkout .co2-fl input,
  .co2-checkout .co2-fl select,
  .co2-checkout .co2-disc input { font-size: 16px; }
}