/* LWN Pro — the same checkout on a phone, on both checkouts.

   Two phones, and they are not the same picture. Under 600px the block
   checkout hides its step header entirely and swaps in a single-step component
   with a progress bar; the classic checkout keeps its indicator and scrolls it
   sideways. Drawing one phone would have meant showing a screen one of the two
   checkouts never renders.

   The arrows move the steps. It is a few lines of script over markup that is
   already complete, so the section degrades to a static diagram rather than a
   broken one, and it is the nearest thing to a trial the site has. */

.mb {
  background: var(--color-surface);
  padding: var(--space-70) 40px;
  container-type: inline-size;
  font-family: var(--font-sans);
}
.mb__in {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 44px;
  align-items: center;
}

/* --- Copy, kept short ---------------------------------------------------- */

.mb__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.mb__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--color-contrast);
  margin: 0 0 26px;
}

/* The three lines that used to live here — swipe on classic, one step on
   block, thumb-height buttons — are affordances beside the controls now.
   A list telling you a thing can be swiped, three inches from the thing that
   swipes, is a caption for a picture you are already looking at. */
.mb__lede {
  max-width: 34ch;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink-600);
}

/* The gesture hint: an icon and one word, sat with the control it describes
   and quiet enough to read as a label rather than a button. */
.mb__afford {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  white-space: nowrap;
}
.mb__afford--card { margin-top: auto; margin-bottom: 6px; }
.mb__ai { display: inline-flex; color: var(--color-primary); }
.mb__ai svg { width: 17px; height: 17px; display: block; }

/* The swipe hand nudges side to side — the gesture, performed. Small enough
   to read as a hint rather than an animation demanding attention. */
@media (prefers-reduced-motion: no-preference) {
  .mb__afford .mb__ai { animation: mb-nudge 2.6s ease-in-out infinite; }
}
@keyframes mb-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  74% { transform: translateX(-2.5px); }
  88% { transform: translateX(2.5px); }
}

/* --- The two steppers, drawn as the plugin draws them -------------------- */

/* No phone bezel. A drawn phone is decoration around the thing worth looking
   at, and at bezel scale both components had to shrink until their labels
   stopped being readable. These are the components at a size you can read. */
/* Side by side: the section's point is that these two are different, and a
   difference reads at a glance when the things sit next to each other. Stacked
   they became a scroll, with the comparison happening from memory. */
.mb__stage { display: flex; flex-direction: row; gap: 24px; min-width: 0; }

/* Held to a phone's width. Given the full column the classic indicator fits
   all five steps and quietly disproves the sentence beside it — the whole
   claim is that it does not fit, and scrolls. At 340px it runs out of room
   after about two steps, which is what a shopper actually sees. */
.mb__item {
  margin: 0;
  width: 340px;
  max-width: 100%;
  /* Column, so the panel below the caption can be told to fill what is left
     and the two cards end up the same height whatever they contain. */
  display: flex;
  flex-direction: column;
}

.mb__cap {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}

/* Classic: numbers above labels, the current one underlined, the row scrolling
   sideways when it runs out of width. Faded at the right edge because running
   past the edge is the behavior being shown. */
.mb__panel {
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
  border-radius: 12px;
  padding: 22px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Snapping is what makes a swipe land on a step instead of stopping halfway
   between two. Proximity rather than mandatory, so a deliberate drag across
   several steps is not fought all the way. */
.mb__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.mb__scroll::-webkit-scrollbar { display: none; }
/* Every step the same width, with no gap between them: the spacing lives
   inside each column. Uneven widths would make the connector geometry
   impossible — it has to reach from one circle's edge to the next one's, and
   that arithmetic only works if every column is the same size. Two and a bit
   fit in a phone's width, which is what a shopper sees. */
.mb__track { display: flex; gap: 0; margin: 0; padding: 0 0 4px; list-style: none; }
.mb__s {
  position: relative;
  scroll-snap-align: center;
  flex: none;
  width: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
}
/* From this circle's edge to the next circle's edge, and no further. 18px is
   the circle's radius, so the line starts exactly where the circle stops
   rather than floating near it with a gap. */
.mb__s::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: #E4E8ED;
}
.mb__s:last-child::after { display: none; }
.mb__s.is-done::after { background: var(--color-primary); }

.mb__sd {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: #EFF1F4;
  color: var(--color-ink-400);
}
.mb__s.is-done .mb__sd,
.mb__s.is-current .mb__sd { background: var(--color-primary); color: #FFFFFF; }

.mb__sl {
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--color-ink-500);
}
.mb__s.is-current .mb__sl {
  color: var(--color-contrast);
  font-weight: var(--weight-semibold);
}
/* The underline the classic stepper puts beneath the step you are on. */
.mb__s.is-current::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

/* The classic checkout's own arrows: plain, blue, right-aligned under the
   indicator — not chrome bolted on beside the component. The back arrow is
   there from the second step, as it is in the plugin. */
.mb__cnav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  /* auto rather than a fixed gap: the controls drop to the bottom of whichever
     card is taller, so the two rows of arrows sit on the same line. */
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-line-200);
}
/* 44x44. The glyph stays small; the target around it does not. Measured at
   25x29 before, which clears WCAG 2.2's 24px floor and still misses a thumb —
   and a control this section invites people to press should not be a near
   miss. The negative margin keeps the enlarged targets from pushing the row
   taller than the arrows look. */
.mb__afford { margin-right: auto; }
.mb__carrow {
  border: 0;
  background: none;
  width: 44px;
  height: 44px;
  /* Vertical only. A negative right margin pulled the last arrow 6px past the
     panel it sits in, which showed as a sliver along the edge. The row's height
     is what needed absorbing, not its width. */
  margin: -6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  color: var(--color-primary);
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.mb__carrow:hover:not(:disabled) { transform: translateX(2px); }
.mb__carrow[data-step="prev"]:hover:not(:disabled) { transform: translateX(-2px); }
.mb__carrow:disabled { opacity: 0.25; cursor: default; }
.mb__carrow:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 3px; border-radius: 4px; }

/* Block: the card that replaces the whole indicator below 600px. */
.mb__card {
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow: 0 10px 26px -22px rgba(23, 24, 26, 0.5);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mb__mstep { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mb__mnum {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.mb__mtext { display: flex; flex-direction: column; min-width: 0; }
.mb__mtitle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--color-contrast);
  line-height: 1.2;
}
.mb__mcount { font-size: var(--text-xs); color: var(--color-ink-400); margin-top: 2px; }

.mb__bar {
  height: 7px;
  border-radius: 4px;
  background: #E9ECF0;
  overflow: hidden;
  margin-bottom: 16px;
}
.mb__bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

/* Named neighbours, not Back and Next: the plugin composes "Next: <step>".

   Justified to the end with the back link pushed away by auto margin, rather
   than space-between: on the first step there is no back link, and
   space-between would slide the forward one across to the left. It stays put
   on the right where it was, which is where a thumb expects it. */
.mb__mnav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: -8px; }
/* The back link gives up width first. "Next: Review & Payment" is the one a
   customer is reading to decide whether to move on, and half of it is worse
   than a shortened name for the step behind them. */
.mb__mlink[data-prevlink] { margin-right: auto; min-width: 0; flex: 0 1 auto; }
.mb__mlink.is-next { flex: none; }
.mb__mlink {
  border: 0;
  background: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 4px 2px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.16s ease;
}
.mb__mlink:hover:not(:disabled) { color: var(--color-primary); }
.mb__mlink:disabled { opacity: 0.4; cursor: default; }
.mb__mlink:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 3px; border-radius: 4px; }
.mb__mlink.is-next { color: var(--color-contrast); font-weight: var(--weight-semibold); }


.mb__cap {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

@media (prefers-reduced-motion: reduce) {
  .mb__bar span, .mb__carrow, .mb__mlink { transition: none; }
}

/* --- Narrow -------------------------------------------------------------- */

@container (max-width: 1000px) {
  .mb__in { grid-template-columns: 1fr; gap: 36px; }
  .mb__stage { justify-content: center; }
}
@container (max-width: 760px) {
  .mb__stage { flex-direction: column; align-items: center; gap: 30px; }
}
@container (max-width: 560px) {
  .mb { padding: var(--space-60) 20px; }
  .mb__panel, .mb__card { padding: 18px 16px 16px; }
  .mb__mnum { width: 38px; height: 38px; }
  .mb__mtitle { font-size: var(--text-base); }
  .mb__carrow { font-size: 19px; }
}