/**
 * Checkout. Inherits the token block from auth.css, so the brand colour and all
 * three themes apply here with no extra work.
 */

.gms-checkout {
  --gms-ink: #14161a; --gms-ink-2: #5b6270; --gms-ink-3: #6b7280;
  --gms-line: rgba(20,22,26,.12); --gms-line-2: rgba(20,22,26,.07);
  --gms-surface: #fff; --gms-tint: #f6f7f9;
  --gms-accent: var(--gms-brand, #2563eb); --gms-accent-ink: var(--gms-brand-ink, #fff);
  --gms-good: #067647; --gms-bad: #b42318;
  --gms-r: 12px; --gms-r-lg: 18px; --gms-r-pill: 999px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  font-size: 16px;
  color: var(--gms-ink);
  align-items: start;
}

.gms-checkout,
.gms-checkout * { box-sizing: border-box; }
.gms-checkout--received { grid-template-columns: minmax(0, 720px); justify-content: center; }

.gms-co-placebar { display: none; }

@media (max-width: 940px) {
  .gms-checkout { grid-template-columns: minmax(0, 1fr); }

  /* Summary above the form: people want to see what they are paying for before
     they start typing. The button does not come with it — offering "Place
     order" above an empty form invites a click that can only fail. */
  .gms-checkout__side { order: -1; }

  .gms-checkout__side .gms-co-place,
  .gms-checkout__side .gms-co-secure { display: none; }

  /* Pinned instead, so it is reachable from anywhere in a long form without
     ever sitting in front of the fields. */
  .gms-co-placebar {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--gms-bottom-chrome, 0px);
    z-index: 99988;
    display: block;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--gms-surface);
    border-top: 1px solid var(--gms-line-2);
    box-shadow: 0 -4px 16px -8px rgba(0, 0, 0, .2);
  }

  .gms-co-placebar .gms-co-place { margin: 0; }

  /* Room for the bar, so the last field is never trapped underneath it. */
  .gms-checkout { padding-bottom: calc(96px + var(--gms-bottom-chrome, 0px)); }
}

.gms-co-card {
  background: var(--gms-surface);
  border: 1px solid var(--gms-line-2);
  border-radius: var(--gms-r-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.gms-co-card__title {
  margin: 0 0 16px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gms-ink-3);
}

/* saved addresses */

/* Capped and scrollable. A customer with eight saved addresses had a list that
   pushed the payment options and the pay button off the screen, and the "add
   another" row at the bottom of it was never seen. About three and a half rows
   are visible, which is enough to show the list continues. */
.gms-co-saved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for the focus ring, which a flush overflow container would clip. */
  padding: 2px;
  margin-inline: -2px;
}

/* Always visible, below the list rather than inside it. */
.gms-co-addnew {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--gms-line);
  border-radius: var(--gms-r);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gms-accent);
  cursor: pointer;
}

.gms-co-addnew:hover { border-color: var(--gms-accent); }
.gms-co-addnew input { accent-color: var(--gms-accent); }

.gms-co-saved__item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.gms-co-saved__item:hover { border-color: var(--gms-ink-3); }
.gms-co-saved__item.is-on { border-color: var(--gms-accent); background: color-mix(in srgb, var(--gms-accent) 5%, transparent); }
.gms-co-saved__item input { margin-top: 3px; accent-color: var(--gms-accent); }
.gms-co-saved__item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Named, not inherited. A theme that styles `strong` — or a selected-state
   background of its own — otherwise decides what colour a customer's own name
   is on the card they are about to ship to. */
.gms-co-saved__item strong { font-size: .9375rem; color: var(--gms-ink); }
.gms-co-saved__item em { font-style: normal; font-size: .8125rem; color: var(--gms-ink-2); }
.gms-co-saved__item small { font-size: .8125rem; color: var(--gms-ink-3); line-height: 1.45; }

.gms-co-newaddr[hidden] { display: none; }
.gms-co-newaddr { margin-top: 14px; }

.gms-co-check { display: flex; align-items: center; gap: 9px; font-size: .875rem; cursor: pointer; margin-top: 6px; }
.gms-co-check input { accent-color: var(--gms-accent); width: 16px; height: 16px; }

/* payment */
.gms-co-pay { display: flex; flex-direction: column; gap: 9px; }

.gms-co-pay__opt {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}

.gms-co-pay__opt:hover { border-color: var(--gms-ink-3); }
.gms-co-pay__opt.is-on { border-color: var(--gms-accent); background: color-mix(in srgb, var(--gms-accent) 5%, transparent); }
.gms-co-pay__opt.is-disabled { opacity: .5; cursor: not-allowed; }
.gms-co-pay__opt.is-disabled small { color: var(--gms-bad); }
.gms-co-pay__opt input { margin-top: 3px; accent-color: var(--gms-accent); }
.gms-co-pay__opt span { display: flex; flex-direction: column; gap: 2px; }
.gms-co-pay__opt strong { font-size: .9375rem; }
.gms-co-pay__opt small { font-size: .8125rem; color: var(--gms-ink-2); }

/* Saved addresses: the row is a container now, not a label, so the Edit and
   Set-as-default buttons inside it do not toggle the radio when clicked. */
.gms-co-saved__pick { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.gms-co-saved__item { display: flex; align-items: flex-start; gap: 10px; }

.gms-co-saved__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gms-accent);
  color: var(--gms-accent-ink);
  font-style: normal;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.gms-co-saved__acts { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }

.gms-co-saved__act {
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gms-accent);
  cursor: pointer;
  white-space: nowrap;
}

.gms-co-saved__act:hover { background: var(--gms-tint); }
.gms-co-saved__act:disabled { opacity: .5; cursor: default; }

.gms-co-newaddr__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--gms-ink-2);
}

.gms-co-newaddr__title[hidden] { display: none; }

.gms-co-split { margin: 4px 0 0; font-size: .8125rem; font-weight: 600; color: var(--gms-good); }

/* The same line, but the token has not cleared. Green here would colour an
   outstanding debt as good news — which is most of how the old "₹100 paid
   online" on an unpaid order got past everyone in the first place. */
.gms-co-split.is-due { color: var(--gms-bad); }

/* On a narrow screen the actions sit under the address rather than beside it. */
@media (max-width: 480px) {
  .gms-co-saved__item { flex-wrap: wrap; }
  .gms-co-saved__acts { flex-direction: row; width: 100%; padding-left: 26px; }
}

/* summary */
.gms-checkout__side { position: sticky; top: calc(var(--gms-stuck-top, 0px) + 20px); }

/* In a single column the summary is ordered above the form, and sticking it
   there makes it float over the address list and the payment options as the
   page scrolls. Declared after the base rule on purpose — the mobile block
   further up the file would lose to it on source order. */
@media (max-width: 940px) {
  .gms-checkout__side { position: static; top: auto; }
}

.gms-co-summary { padding: 18px; }

.gms-co-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.gms-co-item { display: flex; align-items: center; gap: 11px; }
.gms-co-item img { width: 46px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--gms-tint); flex: 0 0 46px; }
.gms-co-item > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gms-co-item__name { font-size: .875rem; font-weight: 550; line-height: 1.35; }
.gms-co-item__qty { font-size: .75rem; color: var(--gms-ink-3); }
.gms-co-item strong { font-size: .875rem; white-space: nowrap; }

.gms-co-rows { border-top: 1px solid var(--gms-line-2); padding-top: 12px; }
.gms-co-row { display: flex; justify-content: space-between; font-size: .875rem; color: var(--gms-ink-2); margin-bottom: 7px; }
.gms-co-row[hidden] { display: none; }
.gms-co-row.is-good span:last-child { color: var(--gms-good); font-weight: 650; }
.gms-co-row.is-bad span:last-child { color: var(--gms-bad); font-weight: 650; }

.gms-co-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--gms-line);
  padding-top: 12px; margin-top: 6px;
  font-size: 1.0625rem;
}

.gms-co-total strong { font-weight: 700; }

.gms-co-place {
  display: block; width: 100%;
  margin-top: 14px; padding: 15px;
  border: 0; border-radius: var(--gms-r-pill);
  background: var(--gms-accent); color: var(--gms-accent-ink);
  font: inherit; font-size: 1rem; font-weight: 650;
  cursor: pointer;
  transition: opacity .15s ease;
}

/* Place order is the last click in the shop. It must not change colour under
   the pointer because the theme styles bare buttons — see .gms-co-back. */
.gms-co-place:hover,
.gms-co-place:focus-visible {
  background: var(--gms-accent);
  border-color: var(--gms-accent);
  color: var(--gms-accent-ink);
  opacity: .92;
}
.gms-co-place[disabled] { opacity: .55; cursor: wait; }

.gms-co-secure { text-align: center; font-size: .75rem; color: var(--gms-ink-3); margin-top: 10px; }

/* confirmation */
.gms-co-thanks { text-align: center; padding: 34px 20px; }
.gms-co-thanks__tick {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gms-good) 12%, transparent);
  color: var(--gms-good);
  display: grid; place-items: center;
}
.gms-co-thanks h2 { margin: 0 0 6px; font-size: 1.3rem; }
.gms-co-thanks__num { margin: 0 0 4px; font-weight: 650; font-family: ui-monospace, Menlo, monospace; }
.gms-co-thanks__sub { margin: 0; color: var(--gms-ink-2); font-size: .9375rem; }
.gms-co-thanks__split {
  margin: 12px auto 0;
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--gms-r-pill);
  background: color-mix(in srgb, var(--gms-good) 10%, transparent);
  color: var(--gms-good);
  font-size: .8125rem;
  font-weight: 650;
}

/* The tick is drawn rather than typed, so it is the same shape in every font. */
.gms-co-thanks__tick::after {
  content: '';
  width: 16px;
  height: 27px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) translate(-2px, -3px);
}

/* ---- What happens next ------------------------------------------------- */

.gms-next {
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--gms-line-2);
  display: grid;
  gap: 0;
  text-align: left;
}

.gms-next li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 18px;
}

.gms-next li:last-child { padding-bottom: 0; }

/* The rail between the dots. */
.gms-next li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: -2px;
  width: 2px;
  background: var(--gms-line-2);
}

.gms-next li:last-child::before { display: none; }
.gms-next li.is-done::before { background: color-mix(in srgb, var(--gms-good) 45%, transparent); }

.gms-next__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--gms-line);
  background: var(--gms-surface);
  position: relative;
  z-index: 1;
  margin-top: 1px;
}

.gms-next li.is-done .gms-next__dot { border-color: var(--gms-good); background: var(--gms-good); }

.gms-next__body { display: grid; gap: 2px; }
.gms-next__body strong { font-size: .9375rem; font-weight: 650; }
.gms-next__body em { font-style: normal; font-size: .8125rem; color: var(--gms-ink-2); line-height: 1.5; }
.gms-next li:not(.is-done) .gms-next__body strong { color: var(--gms-ink-2); }

/* ---- Unpaid / recovery ------------------------------------------------- */

.gms-co-thanks--unpaid .gms-co-thanks__warn {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gms-bad) 12%, transparent);
  color: var(--gms-bad);
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700;
}

.gms-co-recover { margin-top: 22px; display: grid; gap: 14px; justify-items: center; }
.gms-co-recover .gms-co-place { width: 100%; max-width: 340px; }

.gms-co-recover__cod {
  width: 100%;
  max-width: 340px;
  padding-top: 14px;
  border-top: 1px solid var(--gms-line-2);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.gms-co-recover__cod[hidden] { display: none; }
.gms-co-recover__note { margin: 0; font-size: .8125rem; color: var(--gms-ink-2); }
.gms-co-recover__count { margin: 14px 0 0; font-size: .75rem; color: var(--gms-ink-3); }

.gms-co-addr { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--gms-ink-2); }
.gms-co-status { margin: 12px 0 0; font-size: .8125rem; color: var(--gms-ink-3); }

/* themes */
body[data-gms-theme="babaji"] .gms-checkout { --gms-ink:#2a1f18; --gms-ink-2:#7a6355; --gms-ink-3:#8a6a52; --gms-line:#f2ddcb; --gms-line-2:#f8eae0; --gms-tint:#fff8f3; --gms-accent:#c2410c; --gms-accent-ink:#fff; }
body[data-gms-theme="leafora"] .gms-checkout { --gms-ink:#eaf0e6; --gms-ink-2:#a9b8a3; --gms-ink-3:#8d9d87; --gms-line:rgba(255,255,255,.14); --gms-line-2:rgba(255,255,255,.08); --gms-surface:rgba(255,255,255,.06); --gms-tint:rgba(255,255,255,.05); --gms-accent:#c3d8a5; --gms-accent-ink:#1d2a20; }

/* ---------------------------------------------------------------------------
   Test-mode notice at checkout.
   Deliberately loud: somebody testing needs to know the bank page is a
   simulation before they abandon it and report the payments as broken.
   --------------------------------------------------------------------------- */

.gms-co-testmode {
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid #f0c98a;
    border-left: 3px solid #d99b28;
    border-radius: 8px;
    background: #fdf6e8;
    color: #6b4a10;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.gms-co-testmode strong {
    display: inline-block;
    margin-right: 6px;
    color: #8a5c0c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
}

/* The arrival estimate, under the address it belongs to. Hidden until it has
   something to say, so a slow lookup leaves no empty line behind. */
.gms-co-saved__eta:empty { display: none; }

.gms-co-saved__eta {
  margin-top: 3px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gms-good, #0b7d3e);
}

.gms-co-saved__eta.is-bad { color: var(--gms-bad, #b42318); }

/* ---- Checkout as steps ----------------------------------------------------
   Applied only once the script has marked the container, so a page without
   JavaScript keeps every card open and stays the scrolling form it was. */

.gms-co-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: gms-co-step;
}

.gms-co-steps[hidden] { display: none; }

.gms-co-steps li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gms-ink-3, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The number, drawn rather than typed, so the markup carries only the label. */
.gms-co-steps li span {
  counter-increment: gms-co-step;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
}

.gms-co-steps li span::before { content: counter(gms-co-step); }

.gms-co-steps li.is-on { color: var(--gms-accent, #2563eb); }

.gms-co-steps li.is-done { color: var(--gms-ok, #15803d); cursor: pointer; }
.gms-co-steps li.is-done span { background: currentColor; border-color: currentColor; }

/* A tick replaces the number once the step is behind you. */
.gms-co-steps li.is-done span::before {
  content: '✓';
  color: var(--gms-surface, #fff);
  font-size: .75rem;
}

/* The connecting rule. Not on the last one, which connects to nothing. */
.gms-co-steps li:not(:last-child)::after {
  content: '';
  flex: 1 1 auto;
  height: 1.5px;
  background: currentColor;
  opacity: .3;
}

/* One card at a time — but only once stepped. */
.gms-checkout.is-stepped [data-co-step] { display: none; }
.gms-checkout.is-stepped [data-co-step].is-on { display: block; }

.gms-co-nav {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.gms-co-nav[hidden] { display: none; }

.gms-co-back,
.gms-co-next {
  padding: 13px 22px;
  border-radius: var(--gms-r-pill, 999px);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.gms-co-back {
  border: 1px solid var(--gms-line, #e6e2dc);
  background: transparent;
  color: var(--gms-ink-2, #57524a);
}

.gms-co-back[hidden] { display: none; }

/* Every property the theme's hover touches, restated.

   Shop themes style `body button:hover` and set background, colour and border
   together — this one paints its secondary-button colours over anything. Naming
   only the two we cared about left the third to the theme, so Continue turned
   into dark text on white the moment a pointer touched it and stopped reading
   as a button at all. */
.gms-co-back:hover,
.gms-co-back:focus-visible {
  background: transparent;
  border-color: var(--gms-ink, #14161a);
  color: var(--gms-ink, #14161a);
  opacity: 1;
}

.gms-co-next {
  flex: 1 1 auto;
  border: 0;
  background: var(--gms-ink, #14161a);
  color: #fff;
}

.gms-co-next[hidden] { display: none; }

/* See .gms-co-back above: opacity alone left the theme free to repaint the
   background and the label, which is exactly what it did. */
.gms-co-next:hover,
.gms-co-next:focus-visible {
  background: var(--gms-ink, #14161a);
  border-color: var(--gms-ink, #14161a);
  color: #fff;
  opacity: .9;
}

/* Place order belongs to the last step, in both of its positions.
   Offered on the contact step it invites a click that can only fail, and it
   competes with the Continue button that is the actual next thing to do.
   940px, matching the breakpoint above where the sidebar button gives way to
   the pinned bar — at 900 there was a 40px band where neither rule applied and
   the bar stayed up on every step. */
.gms-checkout.is-stepped .gms-checkout__side .gms-co-place,
.gms-checkout.is-stepped .gms-checkout__side .gms-co-secure { display: none; }

.gms-checkout.is-stepped.is-last-step .gms-checkout__side .gms-co-place,
.gms-checkout.is-stepped.is-last-step .gms-checkout__side .gms-co-secure { display: block; }

@media (max-width: 940px) {
  .gms-checkout.is-stepped .gms-co-placebar { display: none; }
  .gms-checkout.is-stepped.is-last-step .gms-co-placebar { display: block; }

  /* The sidebar button stays hidden at this width whatever the step — the
     pinned bar is the one that shows. */
  .gms-checkout.is-stepped.is-last-step .gms-checkout__side .gms-co-place,
  .gms-checkout.is-stepped.is-last-step .gms-checkout__side .gms-co-secure { display: none; }

  /* Only the last step needs room for the pinned bar. */
  .gms-checkout.is-stepped:not(.is-last-step) { padding-bottom: 24px; }
}

/* An address that cannot be delivered to. Nothing validates one on the way
   into the address book, so a record saved with only a pincode looks
   selectable and produces an order no courier can complete. */
.gms-co-saved__item.is-incomplete { border-color: var(--gms-warn, #b45309); }

.gms-co-saved__warn {
  display: block;
  margin-top: 4px;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gms-warn, #b45309);
}

/* ---- The customer's own recent orders --------------------------------------
   Top of the checkout, signed-in customers only. Recognition, and a guard
   against the double order: somebody unsure the first one went through places
   a second and finds out when two parcels arrive. */

.gms-recent__warn {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gms-warn, #b45309) 10%, transparent);
  color: var(--gms-warn-ink, #7c3f06);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.45;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .gms-recent__warn { background: #fef3e2; }
}

.gms-recent__list { margin: 0; padding: 0; list-style: none; }

.gms-recent__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gms-line-2, #f0ede8);
  font-size: .8125rem;
}

.gms-recent__row:last-child { border-bottom: 0; }

.gms-recent__num { font-weight: 650; text-decoration: none; color: var(--gms-ink, #14161a); }
.gms-recent__num:hover { text-decoration: underline; }

/* Under the number on a narrow screen rather than squeezed beside it. */
/* Quieter than the order number but not fainter than legible: at 11px this
   needs 4.5:1, and the usual muted grey measured 3.09 against the card. */
.gms-recent__when {
  grid-column: 1;
  grid-row: 2;
  font-size: .6875rem;
  color: var(--gms-ink-2, #57524a);
}

.gms-recent__state {
  grid-row: 1 / span 2;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gms-tint, rgba(0, 0, 0, .05));
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gms-ink-2, #57524a);
}

.gms-recent__state--delivered { background: #dcfce7; color: #14532d; }
.gms-recent__state--cancelled,
.gms-recent__state--failed { background: #fee2e2; color: #7f1d1d; }

.gms-recent__sum {
  grid-row: 1 / span 2;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Coupons at checkout ------------------------------------------------
   The box and the suggestions are one block, because they answer the same
   question: "is there a discount I am missing?". Split apart, a customer
   reads the empty box, decides the answer is no, and never sees the code
   that was sitting right underneath it. */

.gms-co-coupons {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--gms-line-2);
  border-radius: var(--gms-r);
  background: var(--gms-tint);
}

.gms-co-coupons__on {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.gms-co-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 11px;
  border-radius: var(--gms-r-pill);
  background: var(--gms-good);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.gms-co-chip__x {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.gms-co-chip__x:hover { background: rgba(255, 255, 255, .38); }

.gms-co-coupons__list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.gms-co-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--gms-line);
  border-radius: var(--gms-r);
  background: var(--gms-surface);
}

/* One a customer can take right now gets the solid edge; one they are short
   of stays dashed and quiet. The difference has to be legible at a glance or
   the list reads as four identical things to try one by one. */
.gms-co-offer.is-ready { border-style: solid; border-color: var(--gms-good); }

.gms-co-offer__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }

.gms-co-offer__code {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--gms-ink);
}

.gms-co-offer__what { font-size: 12px; color: var(--gms-ink-2); }

.gms-co-offer__apply {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 0;
  border-radius: var(--gms-r-pill);
  background: var(--gms-good);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.gms-co-offer__apply:hover { filter: brightness(1.08); }
.gms-co-offer__apply:disabled { opacity: .6; cursor: default; }

.gms-co-offer__gap {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--gms-ink-3);
}

.gms-co-coupons__entry { display: flex; gap: 8px; }

.gms-co-coupons__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r);
  background: var(--gms-surface);
  font: inherit;
  font-size: 13px;
  color: var(--gms-ink);
  text-transform: uppercase;
}

.gms-co-coupons__input::placeholder { text-transform: none; color: var(--gms-ink-3); }
.gms-co-coupons__input:focus-visible { outline: 2px solid var(--gms-accent); outline-offset: 1px; }

.gms-co-coupons__go {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--gms-ink);
  border-radius: var(--gms-r);
  background: var(--gms-ink);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.gms-co-coupons__go:hover { background: var(--gms-ink-2); border-color: var(--gms-ink-2); }
.gms-co-coupons__go:disabled { opacity: .6; cursor: default; }

.gms-co-coupons__error {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gms-bad);
}

.gms-co-coupons__error[hidden] { display: none; }

/* The two-choice dialog on arriving at checkout. */
.gms-modal__choices { display: grid; gap: 10px; margin-top: 4px; }
.gms-modal__choices .gms-btn-solid { width: 100%; }