/*
 * replica-checkout.css - Area E (cart-checkout): the demo checkout (/checkout) and the thank-you page (POST /checkout/complete).
 * Source of truth: raw/live/reference/checkout-live.webp + checkout-spec.md (the owner's screenshot of the live Shopify checkout).
 * QA round cd1 (04/10): the screenshot is a 1440 px viewport captured at ~1.39x (2000 px wide); scaled back to 1440 it falls pixel
 * on pixel over the headless capture qa/out/cd1-checkout/checkout-1440-live.png, so every measure below is in 1440 CSS px:
 * header 114 px (divider at y=114, logo 162 px wide at y=30, bag ink 20x22 ending 3 px before the container edge), centered
 * 980 px container (x 230-1210), form column 540 px (content 499 px, x 230-729), grey sidebar from x=770 (content 400 px,
 * x 810-1210) whose background runs to the right edge, 49 px inputs with 8 px radius and floating labels, 10 px between fields,
 * 18 px round checkboxes, section headings 20 px (h3 16 px), 64 px thumbnails with the 21 px black quantity badge, rows every
 * 80 px, "Total" 18 px, 14 px base font. The phone layout (390) uses the same header, a 63 px "Order summary" bar, 14 px gutters,
 * every address field full width and the "Total / n items / USD $x" row with the first thumbnail above "Pay now".
 * Everything is namespaced `co-` so it never collides with the Horizon theme CSS or with replica-cart.css.
 */

/* ---------------------------------------------------------------- 0. store chrome off (a Shopify checkout has no theme header/footer) */
:is(body[data-template="checkout"], body[data-template="thank-you"]) :is(
  [data-announcement-bar], [data-header], [data-collection-links], [data-footer], #header-group,
  .shopify-section-group-header-group, .shopify-section-group-footer-group, .header-section, .footer-section,
  #cart-drawer, [data-cart-drawer], [data-cart-drawer-component], #cart-drawer-overlay, #search-modal, .skip-to-content-link
) { display: none !important; }
:is(body[data-template="checkout"], body[data-template="thank-you"]) { background: #fff; margin: 0; }
:is(body[data-template="checkout"], body[data-template="thank-you"]) .content-for-layout { padding: 0; margin: 0; min-height: 100vh; }
:is(body[data-template="checkout"], body[data-template="thank-you"]) > footer { display: none !important; }

/* ---------------------------------------------------------------- 1. root */
.co {
  --co-text: #1a1a1a;
  --co-muted: #707070;
  --co-border: #dedede;
  --co-divider: #e1e1e1;
  --co-accent: #1a1a1a;
  --co-grey: #f5f5f5;
  --co-radius: 8px;
  --co-container: 980px;
  --co-main-pad: 41px;
  --co-aside-pad: 40px;
  --co-green: #00b67a;
  --co-input-h: 49px;
  --co-button-h: 50px;
  --co-gutter: 14px;
  font-family: var(--font-body--family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--co-text);
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.co *, .co *::before, .co *::after { box-sizing: border-box; }
.co p, .co h1, .co h2, .co h3, .co dl, .co dd, .co dt, .co ul { margin: 0; padding: 0; }
.co a { color: var(--co-text); }
.co img { display: block; max-width: 100%; }
.co svg { display: block; }
.co .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.co [hidden] { display: none !important; }

/* ---------------------------------------------------------------- 2. header: centered logo block + bag icon at the right */
.co__header { background: #fff; border-bottom: 1px solid var(--co-divider); }
.co__header-inner {
  position: relative;
  width: 100%;
  max-width: var(--co-container);
  margin: 0 auto;
  /* 30 + logo 27 + 2.5 + 14 + 1 + 14 + 25.5 = 114: the divider lands on y=114 like the live header (desktop and phone) */
  padding: 30px 0 25.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.co__logo { display: block; text-decoration: none; color: inherit; }
.co__logo-img { width: 162px; height: auto; } /* live wordmark ink 160 px wide (the PNG has a 1 px margin), tagline included */
.co__logo-text { font-weight: 700; font-size: 22px; letter-spacing: .04em; }
.co .co__trust {
  margin-top: 2.5px;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 14px;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0;
  color: #111;
  white-space: nowrap;
}
.co__trust-item { display: inline-flex; align-items: center; gap: 3px; }
.co__trust-item svg { width: 9px; height: 9px; }
.co__trust-item--returns svg { color: var(--co-green); }
.co__trust-sep { color: #8a8a8a; font-weight: 400; }
.co .co__trustpilot {
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
  font-size: 7px;
  font-weight: 700;
  line-height: 14px;
  color: #111;
  white-space: nowrap;
}
.co__tp-stars { display: inline-flex; gap: 1px; }
.co__tp-star { width: 10px; height: 10px; background: var(--co-green); display: inline-flex; align-items: center; justify-content: center; }
.co__tp-star svg { width: 7px; height: 7px; color: #fff; }
.co__tp-brand { display: inline-flex; align-items: center; gap: 3px; }
.co__tp-brand svg { width: 8px; height: 8px; color: var(--co-green); }
/* bag outline 20x22 (live ink x 1188-1207, y 46-67 at 1440; x 354-373 at 390), vertically centered in the 114 px header */
.co__bag {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  color: var(--co-text);
}
.co__bag svg { width: 20px; height: 22px; }

/* ---------------------------------------------------------------- 3. two column page (desktop) */
.co__page {
  flex: 1 1 auto;
  display: grid;
  /* 1440: 230 | 540 (form 499 + 41) | 440 (40 + summary 400) | 230, the grey column starts at x=770 */
  grid-template-columns: minmax(16px, 1fr) minmax(0, 540px) minmax(0, 440px) minmax(16px, 1fr);
  width: 100%;
}
.co__main {
  grid-column: 2;
  grid-row: 1;
  padding: 42px var(--co-main-pad) 40px 0; /* "Contact" cap top at y=160 (46 px under the divider) */
  display: flex;
  flex-direction: column;
}
.co__main-inner { width: 100%; max-width: 499px; }
.co__aside {
  grid-column: 3 / 5;
  grid-row: 1;
  background: var(--co-grey);
  border-left: 1px solid var(--co-divider);
}
.co__aside-inner { width: 100%; max-width: calc(400px + var(--co-aside-pad)); padding: 40px 0 40px var(--co-aside-pad); } /* first thumbnail border at y=155 */

/* ---------------------------------------------------------------- 4. typography */
/* "Contact" / "Delivery" / "Payment": 20 px (live ink: cap 14 px, "Contact" 75 px wide = Inter Bold 20 px); "Shipping method" 16 px */
.co__h2 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--co-text);
}
.co__h3 {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--co-text);
}
.co__hint { color: var(--co-muted); font-size: 14px; line-height: 1.4; }
.co__link { color: var(--co-text); text-decoration: underline; text-underline-offset: 2px; font-size: 14px; }
.co__link:hover { color: #000; }

/* :first-of-type, not :first-child: the form starts with hidden inputs (moved to its end in checkout.html, kept safe here) */
.co__section { margin-top: 33px; }
.co__form > .co__section:first-of-type, .co__section:first-child { margin-top: 0; }
.co__section--shipping { margin-top: 24px; } /* live: 24 px from the "Save this information" row to the h3 */
.co__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.co__h2 + .co__hint { margin-top: 2px; }
.co__section-head + .co-field, .co__h2 + .co-field, .co__h2 + .co-row { margin-top: 12px; }
.co__h3 + .co__box, .co__h3 + .co__methods, .co__hint + .co__payment { margin-top: 14px; }

/* ---------------------------------------------------------------- 5. fields: floating label inputs like Shopify (placeholder=" " drives :placeholder-shown) */
.co-field { position: relative; margin-top: 10px; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 10px; }
.co-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.co-row--street { grid-template-columns: 2fr 1fr; } /* Brazil: "Street" twice as wide as "Building number" (owner's screenshot) */
.co-row > .co-field { margin-top: 0; }
.co-field--select .co-field__input:focus { padding-top: 14px; }
.co-field__input {
  display: block;
  width: 100%;
  height: var(--co-input-h);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--co-text);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, padding .1s ease;
}
.co-field__input::placeholder { color: transparent; }
.co-field__input:hover { border-color: #c4c4c4; }
.co-field__input:focus { outline: none; border-color: var(--co-accent); box-shadow: 0 0 0 1px var(--co-accent); }
.co-field__input[aria-invalid="true"] { border-color: #d72c0d; box-shadow: 0 0 0 1px #d72c0d; }
.co-field--icon .co-field__input { padding-right: 40px; }
.co-field__label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--co-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 26px);
  transition: top .12s ease, transform .12s ease, font-size .12s ease;
}
.co-field--icon .co-field__label { max-width: calc(100% - 52px); }
/* floated label: live "Country/Region" ink at 10 px under the border, the value 25 px under it */
.co-field__input:focus ~ .co-field__label,
.co-field__input:not(:placeholder-shown) ~ .co-field__label,
.co-field.is-filled .co-field__label,
.co-field--select .co-field__label { top: 8px; transform: none; font-size: 12px; }
.co-field__input:focus,
.co-field__input:not(:placeholder-shown),
.co-field.is-filled .co-field__input,
.co-field--select .co-field__input { padding-top: 14px; padding-bottom: 0; }
.co-field--select .co-field__input { padding-right: 36px; cursor: pointer; text-overflow: ellipsis; }
/* "?" help icon: 16 px, 12 px from the right border (live x 701-716 in the 230-728 input) */
.co-field__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--co-muted);
  pointer-events: none;
}
.co-field__icon svg { width: 100%; height: 100%; }
.co-field__icon--chevron { right: 16px; width: 10px; height: 10px; color: var(--co-text); } /* live chevron ink 8x5 at x 704-711 */
.co-field__icon--search { color: var(--co-text); }
.co-field__icon--button { pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer; }
.co .co-field__error { display: none; margin-top: 6px; font-size: 13px; color: #d72c0d; }
.co .co-field.has-error .co-field__error { display: block; }

/* 18 px ROUND checkbox (live and owner), 9 px under the field, 10 px before its label */
.co-check { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-left: 1px; font-size: 14px; color: var(--co-text); cursor: pointer; }
.co-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--co-border);
  border-radius: 50%;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.co-check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transition: transform .12s ease; }
.co-check input:checked { background: var(--co-accent); border-color: var(--co-accent); }
.co-check input:checked::before { transform: scale(1); }
/* The theme (base.css, `:where(input[type=checkbox]):checked:after`) paints its own thin check mark on top of ours: two marks
   showed on the owner's phone. Ours (the ::before above) is the only one kept. */
.co-check input::after, .co-check input:checked::after { content: none !important; display: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.co-check input:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- 6. shipping method + payment */
.co__box {
  padding: 16px 16px; /* live box 51 px tall: 16 + 19.6 + 16 */
  border-radius: var(--co-radius);
  background: #f6f6f6;
  color: var(--co-muted);
  font-size: 14px;
  text-align: center;
}
.co__methods { border: 1px solid var(--co-border); border-radius: var(--co-radius); overflow: hidden; }
.co__box[hidden] + .co__methods { margin-top: 14px; }
/* .co__methods .co__method: two classes on purpose. The theme's base.css has
   `label:has(input[type=radio]) { display: inline-flex; gap: var(--padding-2xs) }`, whose :has() specificity beats a single
   class, so the row shrank to its content (half the box) and the gap came from the theme. */
.co__method, .co__methods .co__method {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: #fff;
  cursor: pointer;
}
/* selected state: the accent border goes on the rounded container itself (an inset shadow on the row left white slivers
   at the rounded corners); the row only turns grey */
.co__methods:has(input:checked) { border-color: var(--co-accent); }
.co__method:has(input:checked) { background: var(--co-grey); }
/* radio: selectors carry the extra class + attribute so the theme's input[type=radio] rules in base.css never win; the white
   dot is always painted when checked (it used to depend on a hover rule of the theme) */
.co__methods .co__method input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0 1px;
  padding: 0;
  border: 1.5px solid #8a8a8a;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  box-shadow: none;
  outline: none;
  cursor: pointer;
}
/* owner 04/10: same look as the Stripe Payment Element radio ("Card" row): dark 1px ring, white fill, dark 8px dot in the
   middle. Chromium does not paint ::before inside a radio input, so the dot is a radial gradient on the input itself. */
.co__methods .co__method input[type="radio"]:checked {
  border-color: var(--co-accent);
  background: radial-gradient(circle at center, var(--co-accent) 0 3px, #fff 3.6px);
}
.co__methods .co__method input[type="radio"]::before,
.co__methods .co__method input[type="radio"]::after { content: none !important; display: none !important; }
.co__methods .co__method input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.18); }
.co__method-label { flex: 1 1 auto; font-size: 14px; }
.co__method-price { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* live box 122 px tall: icon ink 61x43 starting 28 px under the top, text 17 px under the icon, 14 px under the text */
.co__payment {
  padding: 21px 16px 14px;
  border-radius: var(--co-radius);
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  color: var(--co-muted);
  font-size: 14px;
}
.co__payment-icon { width: 77px; height: 56px; color: #b8b8b8; }
.co__payment-icon svg { width: 100%; height: 100%; }
.co .co__demo-note { margin-top: 10px; font-size: 12px; line-height: 1.4; color: #8a8a8a; text-align: center; }

/* phone only (see section 9): "Total / n items / USD $x" row with the first thumbnail, between the payment box and "Pay now" */
.co-mob-total { display: none; }

.co__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--co-button-h); /* live 50 px, 14 px under the payment box */
  margin-top: 14px;
  padding: 0 24px;
  border: 1px solid #eee;
  border-radius: var(--co-radius);
  background: #fafafa;
  color: #8a8a8a;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.co__pay:hover { background: #ededed; color: #6b6b6b; }
.co__pay:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 2px; }
.co__pay.is-loading, .co__pay[aria-busy="true"] { cursor: progress; opacity: .7; }

.co__errors {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 24px;
  padding: 14px;
  border: 1px solid #d72c0d;
  border-radius: var(--co-radius);
  background: #fff4f4;
  color: #d72c0d;
}
.co__errors svg { flex: 0 0 16px; margin-top: 2px; }
.co__errors ul { list-style: none; }

.co__footer { margin-top: 61px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; } /* live links cap top 65 px under "Pay now" */
.co__footer a { color: var(--co-text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- 7. order summary */
.co-summary { display: block; }
.co-summary__bar { display: none; }
/* rows every 80 px (owner: thumbnails 66 px with borders + 14 px), title 14 px starting 14 px after the thumbnail */
.co-items { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.co-item { display: flex; align-items: center; gap: 14px; }
.co-item__thumb {
  position: relative;
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  border: 1px solid #e9e9e9; /* live border #ebebeb-ish */
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .05); /* the soft 5 px halo of the live thumbnails */
}
.co-item__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.co-item__thumb--protection { background: #f1f1f1; }
.co-item__thumb--protection img { object-fit: contain; padding: 3px; }
/* 21 px black badge sitting on the top right corner (live ink x 859-878, y 152-171 on a 155-220 thumbnail) */
.co-item__badge {
  position: absolute;
  top: -4px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 21px;
  text-align: center;
}
.co-item__info { flex: 1 1 auto; min-width: 0; }
.co-item__title { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--co-text); }
.co .co-item__variant { font-size: 12px; line-height: 1.4; color: var(--co-muted); margin-top: 2px; }
.co-item__price { font-size: 14px; font-weight: 400; white-space: nowrap; text-align: right; }

/* CSS shield used when assets/img/shipping-protection.png is missing (purple/orange gradient like the Shipcheck artwork) */
.co-shield { position: relative; width: 100%; height: 100%; border-radius: 7px; overflow: hidden; background: linear-gradient(135deg, #6a2df5 0%, #b031c8 45%, #ff7a3c 100%); }
.co-shield::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%); }
.co-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.co-shield img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* `.co .co-totals`: the `.co dl { margin: 0 }` reset (0,1,1) used to beat the plain class (0,1,0) and glue "Subtotal" to the rows.
   Live: "Subtotal" 19 px under the last thumbnail, 25 px from "Subtotal" to "Shipping" (14 px rows), "Total" 18 px bold 37 px lower. */
.co .co-totals { margin-top: 19px; display: flex; flex-direction: column; gap: 5.5px; }
.co-totals__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.co-totals__row--total { margin-top: 12.5px; }
.co-totals__row--total dt { font-size: 18px; font-weight: 700; line-height: 1.2; }
.co-totals__row--total dd { font-size: 18px; font-weight: 700; line-height: 1.2; }
.co-totals__currency { font-size: 12px; font-weight: 400; color: var(--co-muted); margin-right: 4px; vertical-align: 2px; }
.co-totals__muted { color: var(--co-muted); }

/* ---------------------------------------------------------------- 8. thank-you */
.co-ty__head { display: flex; align-items: center; gap: 16px; }
.co-ty__check { flex: 0 0 48px; width: 48px; height: 48px; color: var(--co-text); }
.co-ty__check svg { width: 100%; height: 100%; }
.co-ty__order { font-size: 14px; color: var(--co-muted); }
.co .co-ty__title { font-size: 20px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.co-ty__card { margin-top: 20px; padding: 18px 16px; border: 1px solid var(--co-border); border-radius: var(--co-radius); }
.co-ty__card-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.co-ty__card-title + .co__hint { margin-top: 8px; }
.co-ty__grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.co-ty__grid dt { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.co-ty__grid dd { font-size: 14px; color: var(--co-muted); line-height: 1.4; }
.co-ty__actions { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.co-ty__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--co-button-h);
  padding: 0 28px;
  border: 1px solid #000;
  border-radius: var(--co-radius);
  background: #000;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.co-ty__button:hover { background: #2a2a2a; border-color: #2a2a2a; }
.co-ty__help { font-size: 14px; }
.co-ty__help a { text-decoration: underline; text-underline-offset: 2px; }

/* empty cart on /checkout */
.co__empty { grid-column: 2 / 4; padding: 48px 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* ---------------------------------------------------------------- 9. tablet and phone (single column, collapsible summary bar) */
@media (max-width: 999px) {
  /* the live phone header is the desktop one (same 114 px, logo at y=30); only the bag moves to 16 px from the edge */
  .co__header-inner { padding-left: var(--co-gutter); padding-right: var(--co-gutter); }
  .co__bag { right: 16px; }
  .co__page { display: flex; flex-direction: column; }
  .co__main { padding: 22px var(--co-gutter) 32px; order: 2; } /* live: "Contact" cap top 26 px under the bar */
  .co__main-inner { max-width: none; }
  .co__aside { order: 1; border-left: 0; border-bottom: 1px solid var(--co-divider); }
  .co__aside-inner { max-width: none; padding: 0 var(--co-gutter) 24px; }
  /* 63 px grey bar (y 115-177 + the aside border): "Order summary" 16 px + chevron 8 px after it, total 18 px bold at the right */
  .co-summary__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18.5px var(--co-gutter);
    margin: 0 calc(-1 * var(--co-gutter));
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    line-height: 26px;
    color: var(--co-text);
  }
  .co-summary__bar::-webkit-details-marker { display: none; }
  .co-summary__bar::marker { content: ""; }
  .co-summary__bar-label { display: inline-flex; align-items: center; gap: 8px; }
  .co-summary__bar-label svg { width: 10px; height: 10px; transition: transform .15s ease; }
  .co-summary[open] .co-summary__bar-label svg { transform: rotate(180deg); }
  .co-summary__bar-total { font-size: 18px; font-weight: 700; }
  .co-summary[open] .co-summary__bar { border-bottom: 1px solid var(--co-divider); margin-bottom: 20px; }
  /* live 390: "Total" 1432 / "1 item" 1453 / USD pill 25x19 / "$98.90" / chevron, 42 px thumbnail, 32 px under the box, 14 px over "Pay now" */
  .co-mob-total {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 32px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--co-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .co .co__demo-note + .co-mob-total { margin-top: 20px; }
  .co-mob-total__thumb {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .05);
    overflow: hidden;
  }
  .co-mob-total__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .co-mob-total__thumb--protection { background: #f1f1f1; }
  .co-mob-total__thumb--protection img { object-fit: contain; padding: 2px; }
  .co-mob-total__text { flex: 1 1 auto; min-width: 0; }
  .co .co-mob-total__label { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; }
  .co .co-mob-total__count { display: block; font-size: 14px; line-height: 1.4; color: var(--co-muted); margin-top: -1px; }
  .co-mob-total__amount { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .co-mob-total__currency { display: inline-flex; align-items: center; height: 19px; padding: 0 3px; border-radius: 4px; background: #f1f1f1; color: var(--co-muted); font-size: 11px; font-weight: 600; line-height: 19px; }
  .co-mob-total__price { font-size: 18px; font-weight: 700; line-height: 1.2; }
  .co-mob-total__chevron { width: 10px; height: 10px; margin-left: 1px; color: var(--co-text); }
  .co-mob-total__chevron svg { width: 100%; height: 100%; }
  .co .co-mob-total + .co__pay { margin-top: 14px; }
  .co__footer { margin-top: 33px; } /* live 390: links cap top 37 px under "Pay now" */
  .co__empty { padding: 32px var(--co-gutter); }
  .co-ty__grid { grid-template-columns: 1fr; }
}
/* phone: every address field on its own line, 10 px apart (live 390: First name 444-492, Last name 503-551, ... State, Phone) */
@media (max-width: 749px) {
  .co-row, .co-row--3, .co-row--street { grid-template-columns: 1fr; gap: 10px 0; }
}

/* "Why Us?" block under the order summary totals (owner request 04/10) */
.co-why { margin-top: 28px; padding-top: 0; border-top: 0; }
.co-why .ub-why { margin: 0; padding: 0; border: 0; }
.co-why .ub-why__h { text-align: center; color: #707070; font-size: 14px; margin: 0 0 22px; }
.co-why .ub-why__item { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.co-why .ub-why__ico { width: 26px; height: 26px; flex: 0 0 26px; }
.co-why .ub-why__t { font-size: 15px; font-weight: 700; line-height: 1.25; margin: 0 0 5px; }
.co-why .ub-why__s { font-size: 13px; color: #707070; line-height: 1.35; margin: 0; }

/* ---------------------------------------------------------------- Stripe (ext_stripe.py + checkout.js initStripe)
   The Payment Element and the Express Checkout Element live in Stripe iframes: their inputs follow the Appearance API variables
   set in checkout.js (49 px inputs, radius 8, border #dedede, focus ring like .co-field__input). Only the wrappers are styled here. */
.co-stripe { margin-top: 14px; }
.co-stripe__express[hidden] { display: none; }
.co-stripe__express-mount { min-height: 50px; }
.co-stripe__or { display: flex; align-items: center; gap: 16px; margin: 16px 0; color: var(--co-muted); font-size: 12px; letter-spacing: .02em; }
.co-stripe__or::before, .co-stripe__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--co-divider); }
.co-stripe__payment { position: relative; min-height: 49px; }
/* three grey bars until Stripe mounts (the Payment Element replaces them); hidden once the mount reports ready */
.co-stripe__skeleton { display: grid; gap: 10px; }
.co-stripe__skeleton span { display: block; height: var(--co-input-h); border-radius: var(--co-radius); background: linear-gradient(90deg, #f3f3f3 25%, #e9e9e9 50%, #f3f3f3 75%); background-size: 200% 100%; animation: co-stripe-shimmer 1.4s linear infinite; }
.co-stripe.is-ready .co-stripe__skeleton, .co-stripe.is-failed .co-stripe__skeleton { display: none; }
@keyframes co-stripe-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.co .co-stripe__error { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: #d72c0d; }
.co .co-stripe__error[hidden] { display: none; }
.co .co-stripe__note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #8a8a8a; text-align: center; }
.co-stripe__badge { display: inline-block; vertical-align: middle; padding: 2px 8px; border-radius: 999px; background: #fff4c7; color: #6b4e00; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; text-transform: uppercase; }
/* live "Pay now" (black, white text) once a payment provider is connected; the grey demo button stays for the demo flow */
.co__pay--live { background: var(--co-accent); border-color: var(--co-accent); color: #fff; }
.co__pay--live:hover { background: #333; color: #fff; }
.co__pay--live:disabled, .co__pay--live.is-loading { background: #4d4d4d; border-color: #4d4d4d; color: #fff; opacity: 1; cursor: progress; }
/* thank-you: "Visa ending with 4242" + state */
.co-ty__pay-status { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #e4e5e7; color: #202223; font-size: 12px; font-weight: 500; line-height: 1.4; vertical-align: middle; }
.co-ty__pay-status--authorized, .co-ty__pay-status--pending { background: #ffd79d; color: #4f4700; }
.co-ty__pay-status--voided, .co-ty__pay-status--failed { background: #fed3d1; color: #8e1f0b; }
.co-ty__card--pending .co-ty__card-title { color: #6b4e00; }
.co-ty__card .co-stripe__badge { margin-left: 6px; }

/* ---------------------------------------------------------------- Express checkout block (owner 04/10: Shopify checkout layout)
   At the TOP of the form, before "Contact": centered "Express checkout" heading, the Stripe Express Checkout Element row (black
   Apple Pay / Google Pay / Link buttons), an "OR" divider, then the row of payment method icons (38x24, 1 px #dedede border, 4 px
   radius like the VZN reference). checkout.js hides the heading, the buttons and the divider when Stripe reports no wallet
   (`ready` with empty availablePaymentMethods); the icon row always stays. */
.co-express { margin-bottom: 30px; }
.co-express[hidden] { display: none; }
.co .co-express__title { text-align: center; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--co-text); margin: 0 0 14px; }
.co-express__buttons { min-height: 50px; }
.co-express__buttons[hidden] { display: none; }
.co-express__or { display: flex; align-items: center; gap: 16px; margin: 22px 0 20px; color: var(--co-muted); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.co-express__or::before, .co-express__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--co-divider); }
.co-express__or[hidden] { display: none; }
.co-express.is-no-wallet .co-express__title, .co-express.is-no-wallet .co-express__buttons, .co-express.is-no-wallet .co-express__or { display: none; }
.co-express.is-no-wallet { margin-bottom: 26px; }
.co-pay-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.co-pay-icons[hidden] { display: none; }
.co-pay-icons__item { display: block; width: 38px; height: 24px; border: 1px solid var(--co-border); border-radius: 4px; background: #fff; overflow: hidden; }
.co-pay-icons__item img { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- Shipping method row (owner 04/10): title + grey subtitle, "FREE" bold at the right */
.co__method-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co .co__method-sub { font-size: 12px; line-height: 1.4; color: var(--co-muted); }
.co__method-price--free { font-weight: 700; }

/* ---------------------------------------------------------------- Billing address (owner 04/10): checkbox "Use shipping address as billing address"
   + the billing fields when unchecked. The checkbox is the Shopify square one: blue (#1773b0) filled square with a white check. */
.co__section--billing .co__h2 + .co-check { margin-top: 12px; }
.co-check--square input { border-radius: 4px; }
.co-check--square input:checked { background: #1773b0; border-color: #1773b0; }
.co-check--square input:focus-visible { outline-color: #1773b0; }
.co-billing { margin-top: 10px; }
.co-billing[hidden] { display: none; }

/* ---------------------------------------------------------------- Google address suggestions (assets/js/address-autocomplete.js)
   Dropdown under the address input like the Shopify checkout: "SUGGESTIONS" header (uppercase grey) with an "x", up to 5 rows with the
   typed fragment in bold, the highlighted row blue (#1d4ed8) with white text, "powered by Google" footer (always visible). */
.co-field .co-places {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  background: #fff;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  overflow: hidden;
  font-size: 14px;
}
.co-field .co-places[hidden] { display: none; }
.co-places__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; }
.co .co-places__title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--co-muted); }
.co-places__close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px -6px -4px 0; padding: 0; border: 0; background: none; color: var(--co-muted); cursor: pointer; border-radius: 4px; }
.co-places__close svg { width: 12px; height: 12px; }
.co-places__close:hover { color: var(--co-text); background: var(--co-grey); }
.co .co-places__list { list-style: none; margin: 0; padding: 0; }
.co-places__item { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; cursor: pointer; color: var(--co-text); line-height: 1.35; }
.co-places__item strong { font-weight: 700; }
.co-places__main { font-size: 14px; }
.co-places__secondary { font-size: 12px; color: var(--co-muted); }
.co-places__item:hover { background: var(--co-grey); }
.co-places__item.is-active, .co-places__item.is-active:hover { background: #1d4ed8; color: #fff; }
.co-places__item.is-active .co-places__secondary { color: rgba(255, 255, 255, .85); }
.co-places__foot { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 12px 10px; border-top: 1px solid #efefef; font-size: 11px; color: var(--co-muted); }
.co-places__google { font-family: "Product Sans", Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: -.3px; line-height: 1; }
.co-places__google b { font-weight: 500; }

/* thank-you / account order: subtitle of the shipping method ("incl. Tracking Number") */
.co-ty__method-sub { display: block; font-size: 13px; line-height: 18px; color: #707070; }

/* Wallet placeholders in the express row (owner 04/10): black and white, not clickable, until the real Stripe button can
   show. Same height (50px, the Stripe buttonHeight) and radius as the Stripe buttons; with `is-inline` (set by checkout.js)
   they sit on the same row and each gets exactly one button's width, otherwise they stack as full-width rows. */
.co-express__buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.co-express.has-soon.is-inline { --co-express-w: calc((100% - (var(--co-express-n, 1) + var(--co-express-p, 1) - 1) * 8px) / (var(--co-express-n, 1) + var(--co-express-p, 1))); }
.co-express.has-soon.is-inline[data-soon="1"] .co-express__buttons { grid-template-columns: minmax(0, 1fr) var(--co-express-w); }
.co-express.has-soon.is-inline[data-soon="2"] .co-express__buttons { grid-template-columns: minmax(0, 1fr) var(--co-express-w) var(--co-express-w); }
.co-express__soon { display: none; height: 50px; border-radius: 8px; background: #ececec; border: 1px solid #dcdcdc; box-sizing: border-box; align-items: center; justify-content: center; cursor: not-allowed; user-select: none; }
.co-express.has-apay-soon .co-express__soon--apay, .co-express.has-gpay-soon .co-express__soon--gpay { display: flex; }
.co-express__soon img { height: 30px; width: auto; filter: grayscale(1) contrast(.9); opacity: .55; }
/* no real wallet at all: the Stripe mount is hidden and the placeholders share the row */
.co-express.is-no-wallet.has-soon .co-express__title { display: block; }
.co-express.is-no-wallet.has-soon .co-express__buttons { display: grid; }
.co-express.is-no-wallet.has-soon .co-express__or { display: flex; }
.co-express.is-no-wallet.has-soon .co-stripe__express-mount { display: none; }
.co-express.is-no-wallet.has-soon.is-inline[data-soon="2"] .co-express__buttons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.co-express.is-no-wallet.has-soon.is-inline[data-soon="1"] .co-express__buttons { grid-template-columns: minmax(0, 1fr); }
.co-express.is-no-wallet.has-soon { margin-bottom: 30px; }