/* =====================================================================
   Checkout, upsells and confirmation (checkout.html).
   Loaded after tokens / base / sections / product.
   ===================================================================== */

/* ---------- header / preview note / footer ---------- */
.co-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 22px var(--pad-x); border-bottom: 1px solid var(--c-beige-dark); }
.co-head__back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-2); justify-self: start; }
.co-head__back:hover { color: var(--c-black); }
.co-head__logo { grid-column: 2; }
.co-head__secure { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text-2); }
.co-preview { margin: 0; padding: 10px var(--pad-x); background: var(--c-green); color: var(--c-black); text-align: center; font-size: 13px; line-height: 1.4; }
.co-foot { padding: 28px var(--pad-x) 36px; border-top: 1px solid var(--c-beige-dark); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.co-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 13px; }
.co-foot__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.co-foot__copy { font-size: 12px; color: var(--c-text-2); }

.co { padding: 40px var(--pad-x) 72px; min-height: 60vh; }

/* ---------- checkout layout ---------- */
.co-checkout { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; }
.co-checkout[hidden] { display: none; }
.co-title { font-family: var(--f-display); font-weight: 400; font-size: 44px; letter-spacing: -.04em; color: var(--c-black); margin-bottom: 8px; }
.co-form { display: flex; flex-direction: column; gap: 28px; }
.co-block { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-block__title { padding: 0; margin-bottom: 4px; font-family: var(--f-label); font-weight: 500; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--c-black); }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-row--3 { grid-template-columns: 1.3fr 1fr 1fr; }
.co-card .co-row--3 { grid-template-columns: 1fr 1fr 1.6fr; }

.co-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.co-field label { font-size: 13px; color: var(--c-text); }
.co-optional { color: var(--c-text-2); }
.co-field input, .co-field select {
  height: 52px; width: 100%; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--c-beige-dark);
  background: var(--c-white); color: var(--c-black); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.co-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-2) 50%), linear-gradient(135deg, var(--c-text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.co-field input::placeholder { color: var(--c-muted); }
.co-field input:focus, .co-field select:focus { outline: none; border-color: var(--c-text); box-shadow: 0 0 0 3px rgba(84,74,66,.12); }
.co-error { display: none; font-size: 12.5px; color: #b3261e; }
.is-invalid .co-error { display: block; }
.is-invalid input, .is-invalid select { border-color: #b3261e; }

.co-check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--c-text); cursor: pointer; }
.co-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-text); }
.co-consent { padding: 16px 18px; border-radius: var(--r-sm); background: var(--c-white); border: 1px solid var(--c-beige-dark); }
.co-consent.is-invalid { border-color: #b3261e; }
.co-consent .co-error { margin: 8px 0 0 30px; }
.co-check--consent { font-size: 13.5px; color: var(--c-black); }
/* the recurring terms as a note rather than another box to tick: no checkbox, so no indent */
.co-consent--note { background: transparent; border: 0; padding: 0 2px; }
.co-consent__text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--c-text-2); }

.co-ship { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--r-sm); background: var(--c-white); box-shadow: inset 0 0 0 2px var(--c-text); cursor: pointer; }
.co-ship input { accent-color: var(--c-text); width: 18px; height: 18px; margin: 0; }
.co-ship__body { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--c-text-2); }
.co-ship__body b { font-weight: 500; font-size: 14px; color: var(--c-black); }
.co-ship__price { font-weight: 500; color: var(--c-black); }

.co-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); }
.co-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-md); background: var(--c-card); }

/* The one button the whole page exists for. It was the same height as a form field, which made it
   read as one more row rather than as the end of the task. */
/* flex:none matters: .buy__add carries flex:1, and in this column form that resolves to a
   flex-basis of 0 on the main axis, which is the height — the button collapses to its text. */
.co-submit { flex: none; width: 100%; height: 76px; font-size: 19px; letter-spacing: .03em; border-radius: var(--r-btn); }
@media (max-width: 809px) { .co-submit { height: 68px; font-size: 17px; } }
.co-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 12.5px; color: var(--c-text-2); }
.co-trust li { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- order summary ---------- */
.co-summary { position: sticky; top: 24px; }
.co-summary__toggle { border-radius: var(--r-md); background: var(--c-white); padding: 8px 22px 22px; box-shadow: var(--shadow-card); }
.co-summary__toggle > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; border-bottom: 1px solid var(--c-beige-dark); }
.co-summary__toggle > summary::-webkit-details-marker { display: none; }
.co-summary__toggle > summary b { font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--c-black); }
/* The panel is open on desktop and never needs a control. Below 1023 it starts collapsed, so it
   needs to look like something you can tap - without this it reads as a plain heading and the
   shopper reaches the card field without ever seeing what they are buying. */
.co-summary__hint { display: none; }
.co-lines { display: flex; flex-direction: column; }
.co-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-beige-dark); }
/* No overflow clip: the quantity badge is deliberately hung outside the top-right corner, and
   hiding the overflow cropped it to a dark quarter-circle with the number cut off. The image is
   inset and object-fit: contain, so nothing needs clipping anyway. */
.co-line__img { position: relative; width: 64px; height: 70px; border-radius: 14px; background: var(--c-card); display: grid; place-items: center; }
/* A percentage height on a centred grid item resolves against an area the engine treats as
   indefinite, so the bottle took its own aspect ratio and hung out of the tile. Positioning it
   against the box — which has a definite size — gives object-fit something real to work with. */
.co-line__img img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.co-line__qty { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--c-text); color: var(--c-white); font-size: 11px; display: grid; place-items: center; }
.co-line__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--c-text-2); line-height: 1.35; }
.co-line__body b { font-weight: 500; font-size: 14px; color: var(--c-black); }
.co-line__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.co-line__price s { font-size: 12px; color: var(--c-text-2); }
.co-line__price b { font-weight: 500; color: var(--c-black); }
.co-totals { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.co-trow { display: flex; justify-content: space-between; font-size: 14px; }
.co-trow b { font-weight: 500; color: var(--c-black); font-variant-numeric: tabular-nums; }
.co-trow--save b { color: #2f7a3a; }
.co-trow--note { font-size: 12.5px; color: var(--c-text-2); }
.co-trow--total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--c-beige-dark); font-size: 16px; }
.co-trow--total b { font-family: var(--f-display); font-weight: 400; font-size: 28px; letter-spacing: -.02em; }

/* ---------- upsells ---------- */
.co-upsell { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.co-progress { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; font-family: var(--f-label); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--c-muted); }
.co-progress li + li::before { content: "\2192"; margin-right: 10px; color: var(--c-muted); }
.co-progress .is-done { color: var(--c-text-2); }
.co-progress .is-current { color: var(--c-black); }
.up { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.up__eyebrow { color: #b3261e; }
.up__title { max-width: 18ch; color: var(--c-black); }
.up__lede { max-width: 56ch; line-height: 1.45; color: var(--c-text); }
/* Highlighter on the downsell's offer. Drawn as a background that sits behind the lower two-thirds
   of the text rather than a full block, so it reads as a pen stroke and the descenders stay legible;
   it wraps with the line because it is a background on inline text, not a box. */
.up__mark { background: linear-gradient(to top, rgba(255,226,92,.85) 0, rgba(255,226,92,.85) 62%, transparent 62%);
  color: inherit; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) { .up__mark { transition: background-size .3s ease; } }
.up__card { margin-top: 18px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-card); text-align: left; }
/* White, not the page beige: the product shots are cut out against white and the stacks are
   photographed on it, so anything else puts a tinted ground behind a white-lit bottle. The hairline
   keeps the card reading as two halves now that both sides are white. */
.up__media { background: var(--c-white); display: grid; place-items: center; padding: 40px;
  min-height: 420px; border-right: 1px solid var(--c-beige-dark); }
.up__media img { max-height: 380px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(84,74,66,.2)); }
/* A three-jar offer shows three jars, fanned the way the pack cards on a product page are
   (.bcard__fan). Each bottle is placed by the offset, tilt and height that checkout.js computes, so
   they stand on one base line and overlap towards the middle. They used to be a wrapping flex row,
   which put the third jar on its own line below the other two. */
.up__media--fan { display: block; position: relative; height: 340px; padding: 40px 0 0; }
.up__media--fan img { position: absolute; bottom: 0; left: 50%; width: auto; max-width: none;
  max-height: none; transform-origin: bottom center; }
/* what it is for, under the spec bullets */
.up__supports { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
/* The same yellow the highlighter above uses (.up__mark), so the two loud things on this panel are
   the same loud thing rather than two competing accents. Beige read as disabled on the white card,
   and --c-amber, the palette's orange, is soft enough that it still read as tan at this size.
   The ink is --c-dark, not --c-text: 10.6:1 on this yellow, and these sit at 12.5px. The tick goes
   dark for the same reason; the green one it used to carry disappears against yellow. */
.up__supports li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #ffe25c; font-size: 12.5px; color: var(--c-dark); }
.up__supports .icon { width: 14px; height: 14px; color: var(--c-dark); }
.up__body { padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 16px; }
/* The badge carries the urgency of the whole page, so it breathes rather than sitting still.
   Slow and small on purpose — it should read as alive, not as a flashing banner ad. */
.up__flag { align-self: flex-start; padding: 7px 12px; border-radius: 10px; background: var(--c-green); color: var(--c-black); font-size: 12px;
  animation: up-throb 1.9s var(--ease) infinite; transform-origin: left center; }
@keyframes up-throb {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(122, 196, 106, .55); }
  45%      { transform: scale(1.045); box-shadow: 0 0 0 10px rgba(122, 196, 106, 0); }
  70%      { transform: scale(1); box-shadow: 0 0 0 0 rgba(122, 196, 106, 0); }
}
@media (prefers-reduced-motion: reduce) { .up__flag { animation: none; } }
.up__name { font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1.02; letter-spacing: -.035em; color: var(--c-black); }
/* The per-unit price is the number that decides it, so it is the big one; the order total sits
   beside it as the supporting figure rather than the headline. */
.up__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.up__price s { color: var(--c-text-2); font-size: 15px; }
.up__price b { font-family: var(--f-display); font-weight: 400; font-size: 21px; letter-spacing: -.02em; color: var(--c-text); }
.up__each { font-family: var(--f-display); font-size: 40px; line-height: 1; letter-spacing: -.04em; color: var(--c-black); }
.up__each small { font-family: var(--f-body); font-size: 14px; letter-spacing: 0; color: var(--c-text-2); margin-left: 4px; }
.up__yes { width: 100%; min-height: 60px; height: auto; padding: 12px 20px; line-height: 1.25; }
.up__terms { font-size: 12.5px; text-align: center; }
.up__no { align-self: center; font-size: 13px; color: var(--c-text-2); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.up__no:hover { color: var(--c-black); }

/* ---------- confirmation ---------- */
.co-confirm { max-width: 980px; margin: 0 auto; }
.cf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.cf__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--c-green); color: var(--c-black); display: grid; place-items: center; margin-bottom: 6px; }
.cf__tick .icon { width: 30px; height: 30px; }
.cf__title { color: var(--c-black); }
.cf__lede { max-width: 56ch; line-height: 1.45; }
.cf__grid { margin-top: 20px; width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; text-align: left; }
.cf__box { padding: 26px; border-radius: var(--r-md); background: var(--c-white); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px; }
.cf__box .body { line-height: 1.5; }
.cf__gap { margin-top: 14px; }
.cf__subs { display: flex; flex-direction: column; gap: 6px; }
.cf__home { margin-top: 18px; height: 52px; border-radius: var(--r-btn); padding: 0 28px; }

.co-empty { max-width: 560px; margin: 40px auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.co-empty[hidden], .co-view[hidden] { display: none; }
.co-empty .btn--solid { height: 52px; border-radius: var(--r-btn); padding: 0 28px; }

/* =====================================================================
   ≤ 1023: summary moves above the form and starts collapsed
   ===================================================================== */
@media (max-width: 1023px) {
  .co-checkout { grid-template-columns: 1fr; gap: 24px; }
  .co-summary { position: static; order: -1; }
  .co-summary__hint { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--c-text-2); text-transform: none; letter-spacing: 0; }
  .co-summary__hint::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
  [data-summary-toggle][open] .co-summary__hint::after { transform: translateY(1px) rotate(225deg); }
  @media (prefers-reduced-motion: reduce) { .co-summary__hint::after { transition: none; } }
  .up__card { grid-template-columns: 1fr; }
  .up__media { min-height: 0; padding: 28px; }
  .up__media img { max-height: 240px; }
  /* the fan is sized in px by the script, so the panel scales rather than the bottles */
  .up__media--fan { height: 260px; padding-top: 24px; transform: scale(.78); transform-origin: bottom center; }
  .up__media--multi img { max-height: 200px; }
  .up__media--multi img:first-child, .up__media--multi img:last-child { max-height: 164px; }
}
@media (max-width: 809px) {
  .co { padding-top: 24px; }
  .co-head { grid-template-columns: auto 1fr; padding-block: 16px; }
  .co-head__back { display: none; }
  .co-head__logo { grid-column: 1; }
  .co-head__secure { grid-column: 2; }
  .co-title { font-size: 34px; }
  .co-row, .co-row--3, .co-card .co-row--3 { grid-template-columns: 1fr; }
  .co-row--3 { grid-template-columns: 1fr 1fr; }
  .co-row--3 > :first-child { grid-column: 1 / -1; }
  .co-card .co-row--3 { grid-template-columns: 1fr 1fr; }
  .co-card .co-row--3 > :last-child { grid-column: 1 / -1; }
  .co-card .co-row--3 > :first-child { grid-column: auto; }
  .up__body { padding: 26px 20px 24px; }
  .up__name { font-size: 28px; }
  .cf__grid { grid-template-columns: 1fr; }
  /* iOS Safari zooms the whole page in whenever a focused form control is under 16px, and the zoom
     stays put afterwards - through the offer views and the confirmation, since none of them is a
     fresh page load. That is the side-to-side scrolling. 16px on a phone is the whole fix. */
  .co-field input, .co-field select { font-size: 16px; }
}

/* ---------- live payments (Stripe Payment Element) ---------- */
.co-stripe { padding: 18px; border-radius: var(--r-md); background: var(--c-card); min-height: 120px; }
.co-pay-error { margin-top: 12px; padding: 12px 16px; border-radius: var(--r-sm); background: #fbeceb; color: #8c1d18; font-family: var(--f-body); font-size: 14px; line-height: 1.4; }
.up__notice { margin: 0 0 18px; }
.co-submit.is-busy { opacity: .75; cursor: progress; }
.co-submit:disabled { cursor: not-allowed; }

/* ---------- discount code ---------- */
/* A block of its own above Payment, so the field is visible without opening anything. Input and
   Apply share a 44px height for a comfortable tap target on a phone. */
.co-promo { display: flex; gap: 8px; }
.co-promo__input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--c-beige-dark); background: var(--c-bg); font-family: var(--f-body); font-size: 14px; text-transform: uppercase; }
.co-promo__input::placeholder { color: var(--c-muted); text-transform: none; }
.co-promo__input:focus { outline: none; border-color: var(--c-text); box-shadow: 0 0 0 3px rgba(84,74,66,.12); }
/* 16px on a phone, same reason as the fields above: below it iOS zooms and stays zoomed. */
@media (max-width: 809px) { .co-promo__input { font-size: 16px; } }
/* Outline, not solid: a second green button beside Place order reads as the main action. */
.co-promo__btn { height: 44px; flex: none; background: var(--c-white); }
.co-promo__btn:disabled { color: var(--c-muted); cursor: default; }
.co-promo__msg { font-family: var(--f-body); font-size: 13px; line-height: 1.4; color: #8c1d18; }
.co-promo__msg.is-applied { color: #2f7a3a; }
.co-promo__remove { margin-left: 8px; text-decoration: underline; color: var(--c-text-2); }
.co-trow--promo b { color: #2f7a3a; }