/* ==========================================================================
   Checkout — basket review, details, delivery, payment, confirmation.
   Shared components (lines, notice, kraft, ticket, progress, pay-marks) keep
   their base look; anything page-specific is prefixed .co-.
   ========================================================================== */

/* Quiet chrome: the checkout drops the announcement bar (SPEC §10.8). */
body[data-page="checkout"] .announce { display: none; }

/* ---------- Page head ---------- */
.co-page { padding-block: clamp(24px, 2vw + 12px, 48px) var(--section-y); }
.co-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-bottom: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--c-line);
}
.co-head__text { display: grid; gap: var(--s-3); }
.co-head__title { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); }
.co-head__back { font-size: var(--fs-small); }
.co-notices:not(:empty) { margin-bottom: clamp(24px, 3vw, 40px); }
.co-opt { font-weight: 500; color: var(--c-ink-soft); }

/* ---------- Empty basket ---------- */
.co-empty .empty { padding-top: var(--s-6); }
.co-empty__mark { width: 56px; height: 76px; margin-bottom: var(--s-2); }
.co-empty .empty .muted { max-width: 40ch; }
.co-suggest { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--c-line); }

/* ---------- Grid ---------- */
.co-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
  .co-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 88px); }
  .co-form { grid-column: 1; grid-row: 1; }
  .co-summary { grid-column: 2; grid-row: 1; }
}
@media (min-width: 900px) and (min-height: 700px) {
  .co-summary { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ---------- Order summary ---------- */
.co-summary__details {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.co-summary__toggle {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 56px; padding: 10px var(--s-5);
  font-weight: 700;
  border-radius: var(--r-lg);
}
.co-summary__toggle::-webkit-details-marker { display: none; }
.co-summary__toggle:focus-visible { outline-offset: -3px; }
.co-summary__toggle-label { display: inline-flex; align-items: center; gap: 0.5em; color: var(--c-shopfront); }
.co-summary__chev { transition: transform var(--dur-2) var(--ease-out); }
.co-summary__details[open] .co-summary__chev { transform: rotate(180deg); }
.co-summary__toggle-total { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.co-summary__details[open] .co-summary__toggle { border-bottom: 1px solid var(--c-line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
@media (min-width: 900px) {
  .co-summary__toggle { display: none; }
}
.co-summary__body { padding: clamp(20px, 2.2vw, 32px); display: grid; gap: var(--s-5); }
.co-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.co-summary__head h2:focus { outline: none; }
.co-summary__head h2:focus-visible { outline: 3px solid var(--c-raspberry); }

/* Lines (variant of the drawer lines) */
.co-lines .line { grid-template-columns: 64px minmax(0, 1fr) auto; }
.co-lines .line:last-child { border-bottom: 0; padding-bottom: 0; }
.co-lines .line__media img { width: 100%; height: 100%; }
.co-line__note { font-size: var(--fs-fine); color: var(--c-ink-soft); font-style: normal; }
.co-line__each { display: block; margin-top: 2px; font-size: var(--fs-fine); color: var(--c-ink-soft); font-weight: 500; }
.co-lines .line__price .price { justify-content: flex-end; }

/* Promo */
.co-promo { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.co-promo .input { min-height: 46px; text-transform: uppercase; letter-spacing: 0.04em; }
.co-promo .input::placeholder { text-transform: none; letter-spacing: 0; }
.co-promo .btn { min-height: 46px; }
.co-promo__applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.co-promo__label { font-size: var(--fs-small); color: var(--c-success); font-weight: 700; }
.co-promo__note { flex-basis: 100%; }
.co-promo .promo-msg:empty { display: none; }

/* Totals */
.co-totals { display: grid; gap: 10px; margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.co-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: var(--fs-small); }
.co-row dt { color: var(--c-ink-soft); }
.co-row dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-row__sub { display: block; font-size: var(--fs-fine); }
.co-row--discount dt, .co-row--discount dd { color: var(--c-success); font-weight: 700; }
.co-row--total { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--c-line); align-items: center; }
.co-row--total dt { font-size: var(--fs-4); font-weight: 700; color: var(--c-ink); }
.co-row--total dd { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.1rem); line-height: 1; }
.co-row__cur { font-family: var(--font-body); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: var(--c-ink-soft); }
.co-recurring { display: flex; gap: 0.5em; align-items: flex-start; margin-top: calc(var(--s-2) * -1); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--c-butter); }
.co-recurring .icon { margin-top: 0.2em; color: var(--c-shopfront); }
.co-fx { margin-top: calc(var(--s-3) * -1); }
.co-fx:empty { display: none; }
.co-assure { padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.co-marks .pay-marks { gap: 5px; }

/* ---------- Form steps ---------- */
.co-form { display: grid; min-width: 0; }
.co-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-5); }
.co-step + .co-step { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--c-line); }
.co-step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.co-step__head h2:focus { outline: none; }
.co-step__head p:empty { display: none; }
.co-fields { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-fields > .field { align-content: start; }
.co-span-2 { grid-column: 1 / -1; }
.co-delivery { display: grid; gap: var(--s-5); min-width: 0; }
@media (max-width: 560px) { .co-fields { grid-template-columns: minmax(0, 1fr); } }
.co-address { min-height: 84px; }
input[type="date"].input { color-scheme: light; }
input[type="date"].input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Radio cards (delivery + payment) */
.co-options { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.co-option {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px var(--s-3);
  padding: 16px 18px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.co-option:hover { border-color: var(--c-field-line); }
.co-option:has(input:checked) { border-color: var(--c-shopfront); background: var(--c-white); }
.co-option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-shopfront); cursor: pointer; }
.co-option__body { display: grid; gap: 2px; min-width: 0; }
.co-option__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; line-height: 1.35; }
.co-option__note { font-size: var(--fs-fine); color: var(--c-ink-soft); line-height: 1.45; }
.co-option__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.co-option__was { margin-left: 4px; color: var(--c-ink-soft); font-weight: 500; font-size: var(--fs-fine); }
.co-option__marks { display: inline-flex; gap: 4px; }
.co-option__marks .pay-mark { height: 22px; font-size: 0.66rem; }

/* Methods that aren't open yet: one calm grouped note, never a dead button */
.co-soon { padding: 4px var(--s-4); border-radius: var(--r-md); background: rgba(235, 221, 214, 0.32); }
.co-soon__list { list-style: none; padding: 0; margin: 0; display: grid; }
.co-soon__list li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s-3);
  padding: 12px 0; font-size: var(--fs-small); color: var(--c-ink-soft);
}
.co-soon__list li + li { border-top: 1px solid var(--c-line); }
.co-soon__list strong { color: var(--c-ink); font-weight: 700; }
.co-soon__list .badge { flex: none; transform: translateY(-1px); }

/* Payment panels */
.co-panel {
  display: grid; gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  font-size: var(--fs-small);
}
.co-panel > p { max-width: 62ch; }
.co-panel .co-fields { margin-top: var(--s-1); }
.co-paypal { min-height: 48px; }
.co-paypal:empty { display: none; }
.co-collect { display: flex; gap: 0.6em; align-items: flex-start; color: var(--c-ink-soft); }
.co-collect .icon { margin-top: 0.25em; color: var(--c-shopfront); }

.co-nodeliver { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); color: var(--c-ink-soft); max-width: 60ch; }
.co-nodeliver .icon { margin-top: 0.15em; color: var(--c-success); }

.co-progress { margin-bottom: 0; }
.co-progress .link { font-size: var(--fs-fine); white-space: nowrap; }

/* Gift note */
.co-gift { border-top: 1px solid var(--c-line); }
.co-gift summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.6em;
  padding: var(--s-4) 0 0; font-weight: 700; font-size: var(--fs-small);
}
.co-gift summary::-webkit-details-marker { display: none; }
.co-gift summary .icon { color: var(--c-shopfront); }
.co-gift summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-2); }
.co-gift[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.co-gift__paper { margin-top: var(--s-4); padding: var(--s-4); display: grid; gap: var(--s-2); }
.co-gift__paper .textarea { background: rgba(255, 253, 250, 0.92); border-color: rgba(107, 85, 96, 0.55); min-height: 96px; }
.co-gift__hint { color: #4E3B45; }

/* Membership + nothing-available notes */
.co-member { align-items: flex-start; }
.co-member__btn { margin-top: var(--s-3); }
.co-none .notice, .co-member { line-height: 1.55; }

/* Errors + submit */
.co-errors { outline: none; }
.co-errors__list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.co-errors__list a { color: var(--c-error); font-weight: 700; text-underline-offset: 0.2em; }
.co-submit { display: grid; gap: var(--s-3); }
.co-submit__note { text-align: center; }
.co-submit__note:empty { display: none; }

/* ---------- Confirmation ---------- */
.co-done { padding-block: clamp(16px, 2vw, 32px) var(--section-y); }
.co-done__banner { height: clamp(150px, 18vw, 260px); border-radius: var(--r-lg); overflow: hidden; background: var(--c-blush); }
.co-done__banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.co-done__wrap { position: relative; margin-top: calc(clamp(72px, 9vw, 132px) * -1); }
.co-done__card { display: grid; gap: var(--s-4); padding: clamp(24px, 4vw, 48px); box-shadow: var(--sh-2); border-radius: var(--r-lg); }
.co-done__card .eyebrow { color: #8A1640; }
.co-done__card h1 { max-width: 20ch; }
.co-done__card h1:focus { outline: none; }
.co-done__lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 54ch; }
.co-done__ticket { margin-top: var(--s-2); }
.co-done__ticket .ticket__stub .fine { text-align: center; }
.co-done__actions { margin-top: var(--s-7); }

.co-receipt { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.co-receipt:empty { display: none; }
.co-receipt__block { display: grid; gap: var(--s-4); }
.co-rlines { list-style: none; padding: 0; margin: 0; display: grid; }
.co-rline {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line);
}
.co-rline:first-child { padding-top: 0; }
.co-rline__media { border-radius: var(--r-sm); }
.co-rline__info { display: grid; gap: 2px; min-width: 0; }
.co-rline__name { font-weight: 700; line-height: 1.3; }
.co-rline__opts { font-size: var(--fs-fine); color: var(--c-ink-soft); }
.co-rline__qty { font-size: var(--fs-small); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.co-rline__price { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.5ch; text-align: right; }
.co-receipt .co-totals { border-top: 0; padding-top: 0; }
.co-receipt__info { display: grid; gap: var(--s-5) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); padding-block: var(--s-6); border-block: 1px solid var(--c-line); }
.co-info { display: grid; gap: 6px; font-size: var(--fs-small); align-content: start; }
.co-info p { color: var(--c-ink-soft); }
.co-info--wide { grid-column: 1 / -1; }
.co-info__note { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; color: var(--c-ink) !important; }
.co-next { font-size: var(--fs-body); gap: var(--s-3); }

/* ---------- Mobile ---------- */
@media (max-width: 899px) {
  .co-head { margin-bottom: var(--s-5); }
  .co-summary__body { padding-top: var(--s-4); }
}
@media (max-width: 560px) {
  .co-head__back { display: none; }
  .co-option { padding: 14px; }
  .co-panel { padding: var(--s-4); }
  .co-rline { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .co-rline__qty { grid-column: 2; grid-row: 2; margin-top: -6px; }
  .co-rline__price { grid-column: 3; grid-row: 1 / span 2; }
  .co-rline__media { grid-row: 1 / span 2; }
}
@media (max-width: 380px) {
  .co-lines .line { grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); }
  .co-summary__toggle { padding-inline: var(--s-4); }
  .co-row--total dd { font-size: 1.6rem; }
}
.co-sticky .btn { flex: none; }

/* ---------- Terms + consent, right above the pay controls ---------- */
.co-before { display: grid; gap: var(--s-3); }
.co-before__list { list-style: none; padding: 0; margin: 0 0 var(--s-1); display: grid; gap: var(--s-3); font-size: var(--fs-small); line-height: 1.55; }
.co-before__item { display: flex; gap: 0.7em; align-items: flex-start; color: var(--c-ink-soft); }
.co-before__item .icon { flex: none; margin-top: 0.2em; color: var(--c-shopfront); }
.co-before__item strong { color: var(--c-ink); }
.co-before__item--sub { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-sky); color: var(--c-ink); }
.co-consent { gap: 0; }
.co-option__aside { margin: -2px 0 2px; padding: 0 4px; font-size: var(--fs-fine); line-height: 1.5; color: var(--c-ink-soft); }
.co-paypal-wrap { display: grid; gap: var(--s-2); }
.co-safety { margin-top: var(--s-1); }
.co-promo .promo-terms { margin-top: 4px; }
.co-sub-terms p { max-width: 68ch; color: var(--c-ink-soft); line-height: 1.6; }
@media (min-width: 900px) { .co-safety-sm { display: none; } }