/* ===========================================================================
   LIPEDEMA GURU — CHECKOUT PAGE
   Requires base.css.

   One sheet, near-full-screen, split in two:
     LEFT  — the payment terminal (Stripe Elements)
     RIGHT — the configurator: what you're buying, plus the test add-ons

   Below `lg` the two stack and the configurator comes FIRST, so the visitor
   settles what they're buying before they're asked to pay for it.
   =========================================================================== */

.lgb--checkout { background: var(--canvas); }

.lgb__co-shell {
  min-height: 100vh;
  min-height: 100svh;           /* mobile browser chrome */
  display: grid;
  place-items: center;
  padding: var(--tight);
}
@media (min-width: 48rem) {
  .lgb__co-shell { padding: var(--gutter); }
}

/* Once the two panels sit side by side, the sheet is sized to the VIEWPORT and
   each panel scrolls inside it. Letting the sheet grow instead pushes the
   total and the pay button below the fold on any short screen — you should
   always be able to see the whole card. Stacked, the page scrolls normally;
   nested scrolling on a phone is worse than a page scroll. */
@media (min-width: 64rem) {
  .lgb__co-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    /* Flex, not centred grid: `place-items: center` sizes the row to the
       item's content, so a percentage height on the sheet resolves circularly
       and it grows past the screen instead of being clamped by it. A flex
       container with a definite height gives `max-height: 100%` something
       real to resolve against. */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.lgb__co-sheet {
  width: 100%;
  max-width: 1320px;
  display: grid;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}
@media (min-width: 64rem) {
  .lgb__co-sheet {
    height: min(960px, 100%);
    grid-template-columns: 0.85fr 1fr;
    /* `minmax(0, 1fr)`, not the implicit `auto`: a grid row sized `auto` grows
       to fit its content even when the grid itself has a fixed height, so the
       panel outgrew the sheet and `overflow: hidden` cut the total and the pay
       button off the bottom. The 0 minimum lets the row be constrained. */
    grid-template-rows: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   LEFT — the image

   Inset rather than bled to the sheet edge: a photo with its own radius sitting
   on the Y2 ground reads as placed, where a hard-cropped half reads as a
   background someone forgot to style. The panel colour shows as a warm frame,
   which also ties the photograph to the palette instead of leaving it a
   rectangle of unrelated colour.

   A very slow drift keeps the panel from reading as a flat asset. It is
   decoration — the photo carries an empty alt, because the page says everything
   it does.

   Desktop only. Stacked on a phone it sits above the form and pushes the thing
   the visitor came to do off the first screen, which is a poor trade for a
   decorative image.
   --------------------------------------------------------------------------- */
.lgb__co-media {
  display: none;              /* stacked, it only pushes the form down */
  order: 1;
  position: relative;
  margin: 0;
  background: var(--surface);
}
@media (min-width: 64rem) {
  .lgb__co-media {
    display: block;
    padding: var(--gutter);
    height: auto;
  }
}

.lgb__co-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: var(--radius-card);
  animation: lgb-drift 32s var(--ease-standard) infinite alternate;
}

/* Scale only — no translate, so the crop never pulls the subject off frame. */
@keyframes lgb-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .lgb__co-media img { animation: none; }
}

/* ---------------------------------------------------------------------------
   RIGHT — the content panel (selector on step 1, payment on step 2)
   --------------------------------------------------------------------------- */
.lgb__co-panel {
  order: 2;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  padding: var(--gutter);
}
.lgb__co-panel--white { background: var(--white); }

@media (min-width: 48rem) {
  .lgb__co-panel { padding: var(--gap); }
}
@media (min-width: 64rem) {
  .lgb__co-panel {
    padding: 24px 50px 0;       /* the pinned footer supplies the bottom */
    min-height: 0;              /* without this a grid child refuses to scroll */
  }
}

/* The part that scrolls, so the header and footer can stay put. */
@media (min-width: 64rem) {
  .lgb__co-scroll { flex: 1 1 auto; }
}

.lgb__co-step {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lgb__co-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-shrink: 0;
  margin-bottom: var(--card);
}

.lgb__co-back {
  display: inline-flex;
  align-items: center;
  gap: var(--hair);
  min-height: 44px;             /* tap minimum */
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--duration-control) var(--ease-standard);
}
.lgb__co-back:hover { color: var(--ink); }
.lgb__co-back svg { width: 16px; height: 11px; transform: rotate(180deg); }
.lgb__co-back svg path { fill: currentColor; }

/* Matches the register-style heading of a standard Stripe form: stated, not
   shouted. Sans rather than the display face — this half of the sheet is a
   form, and the display face belongs to the thing being bought. */
.lgb__co-heading {
  margin-bottom: var(--gutter);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Field labels — sentence case at 14px, the convention every payment form
   uses. The uppercase eyebrow reads as editorial and fights the form. */
.lgb__co-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lgb__co-form { display: flex; flex-direction: column; }

.lgb__co-field { margin-bottom: var(--card); }

/* Stripe mounts an iframe here; it arrives with no height until ready, so the
   panel would visibly jump. A min-height holds the space. */
.lgb__co-mount { min-height: 44px; }
.lgb__co-mount--payment { min-height: 180px; }
.lgb__co-mount--address { min-height: 300px; }

.lgb__co-actions { margin-top: auto; padding-top: var(--gutter); flex-shrink: 0; }

/* Pinned once the panels scroll: the whole card fits the screen, so the two
   things the page exists for — the total and the pay button — must not be the
   parts that fall inside the scroll. The gradient keeps text from appearing to
   collide as it passes underneath. */
@media (min-width: 64rem) {
  .lgb__co-actions {
    padding-bottom: 40px;
    background: var(--white);
  }
  /* ::before fade removed. It belonged to the retired sticky-footer design:
     with `position: sticky` gone, the absolutely-positioned gradient lost its
     anchor and attached to the nearest positioned ancestor — on WordPress the
     theme's `.row`, painting a full-width strip directly under the site nav
     (white on the checkout page, invisibly cream on the configurator). The
     scroll fade is the `.lgb__co-more` hint's job now. */
}

.lgb__co-error {
  margin-bottom: var(--gutter);
  padding: var(--tight) var(--card);
  border-radius: var(--radius-control);
  background: #f8e6e4;
  color: var(--error);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
}

/* The lock sits hard right, as it does on Stripe's own button, rather than
   riding beside the label. */
.lgb__co-pay { position: relative; }
.lgb__co-lock {
  position: absolute;
  right: var(--gutter);
  width: 14px;
  height: 14px;
}
.lgb__cta[data-busy="true"] .lgb__co-lock { visibility: hidden; }

/* Every field complete and consent given: the gate is open, so the padlock
   comes off. Class managed by syncLock() in checkout.js. */
.lgb__cta--unlocked .lgb__co-lock { display: none; }

.lgb__co-fineprint {
  margin-top: var(--card);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* Shown when Stripe.js can't load or no publishable key is configured — the
   panel must never sit silently blank. */
.lgb__co-unconfigured {
  padding: var(--gutter);
  border: 1px dashed var(--ink-soft);
  border-radius: var(--radius-card);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
.lgb__co-unconfigured code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   RIGHT — the configurator
   --------------------------------------------------------------------------- */

.lgb__co-title { margin-top: 2px; }

.lgb__co-rule {
  height: 1px;
  background: var(--sand);
  margin: 32px 0;
}
@media (min-width: 64rem) {
  .lgb__co-rule { margin: 36px 0; }
}

/* --- the lab test rows ----------------------------------------------------
   Stacked, not two-up: at row height the title, price and check all sit on one
   line, which reads as a form you act on rather than two tiles you read.

   The card is a div with a STRETCHED LABEL rather than a <label> wrapper, so
   the whole row toggles while the (i) button — later in the stacking order —
   stays clickable without flipping the checkbox.

   Selection is the Answer pattern (Figma 1:12534): Y1 fill plus an ink check.
   They sit on Y2, so the resting fill is Y3 rather than the Y2 the full-size
   cards use, and unselected rows keep a visible border so they read as
   actionable before anything is chosen.
   ------------------------------------------------------------------------- */
.lgb__co-section-title { margin-top: 0; }

.lgb__co-section-note {
  margin-top: var(--hair);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.lgb__co-tests {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tight);
  margin-top: var(--card);
}

.lgb__co-test {
  position: relative;
  /* Grid, not flex: the description spans the price column too, instead of
     being squeezed into a narrow middle column while space sits empty. */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title side"
    "desc  desc";
  align-items: center;
  column-gap: var(--card);
  row-gap: 8px;
  min-height: 68px;
  border-radius: var(--radius-card);
  padding: var(--card) var(--gutter);
  /* Unselected sits BACK: a translucent Y3 that settles toward the Y2 panel
     rather than a solid block on top of it. */
  background: rgb(251 242 233 / 0.34);
  box-shadow: inset 0 0 0 0 rgb(55 36 38 / 0);
  transition: background-color var(--duration-control) var(--ease-standard),
              box-shadow var(--duration-control) var(--ease-standard);
}
.lgb__co-test:hover { background: rgb(251 242 233 / 0.7); }

/* Selected reads BRIGHTER and crisper, not darker and heavier. A solid Y3 fill
   against the settled-back unselected rows, a 1px hairline, and the brand's
   raised elevation — rather than a Y1 block behind a thick outline, which is a
   lot of weight for what is only a checkbox.

   With Standard sitting selected from the start, one row always demonstrates
   what "chosen" looks like, which is what makes the others read as choosable. */
.lgb__co-test:has(:checked),
.lgb__co-test--standard {
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px rgb(55 36 38 / 0.85), var(--shadow-raised);
}
/* Not a control — nothing to hover, nothing to press. */
.lgb__co-test--standard:hover { background: var(--canvas); }
.lgb__co-test:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The stretched control is a <button> on the Standard row and a <label> on the
   add-ons; neither should show a border or its own focus ring. */
.lgb__co-test-hit {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.lgb__co-test-hit:focus-visible { outline: none; }
.lgb__co-test:has(:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Covers the row, sits under the info button. */
.lgb__co-test-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
  border-radius: inherit;
}

.lgb__co-test-title {
  grid-area: title;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.03em;
}
@media (min-width: 64rem) {
  .lgb__co-test-title { font-size: 30px; }
}

.lgb__co-test-desc {
  grid-area: desc;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.lgb__co-test-side {
  grid-area: side;
  display: flex;
  align-items: center;
  gap: var(--tight);
  flex-shrink: 0;
}

.lgb__co-test-price {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The (i). Above the stretched label so it never toggles the row. */
.lgb__co-info {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;                  /* tap minimum, though the glyph is 20px */
  height: 44px;
  margin: -11px 0;              /* keep the 44px target without bloating the row */
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--duration-control) var(--ease-standard);
}
.lgb__co-info:hover { color: var(--ink); }
.lgb__co-info svg { width: 20px; height: 20px; }


/* --- totals -------------------------------------------------------------- */
.lgb__co-totals { margin-top: auto; padding-top: var(--gutter); flex-shrink: 0; }

@media (min-width: 64rem) {
  .lgb__co-totals {
    padding-bottom: 40px;
    background: var(--surface);
  }
  /* ::before fade removed. It belonged to the retired sticky-footer design:
     with `position: sticky` gone, the absolutely-positioned gradient lost its
     anchor and attached to the nearest positioned ancestor — on WordPress the
     theme's `.row`, painting a full-width strip directly under the site nav
     (white on the checkout page, invisibly cream on the configurator). The
     scroll fade is the `.lgb__co-more` hint's job now. */
}

.lgb__co-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--card);
  padding: 6px 0;
}
.lgb__co-line-label { color: var(--ink-soft); }
.lgb__co-line-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

.lgb__co-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--card);
  margin-top: var(--tight);
  padding-top: var(--card);
  border-top: 1px solid var(--ink);
}
.lgb__co-total-amount {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 64rem) {
  .lgb__co-total-amount { font-size: 54px; }
}

/* ---------------------------------------------------------------------------
   Confirmation page
   --------------------------------------------------------------------------- */
.lgb__cf-sheet {
  width: 100%;
  max-width: 640px;
  background: var(--white);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  padding: var(--gap) var(--gutter);
  text-align: center;
}
@media (min-width: 48rem) {
  .lgb__cf-sheet { padding: 60px 50px; }
}

.lgb__cf-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--gutter);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--ink);
}
.lgb__cf-badge svg { width: 26px; height: 19px; }
.lgb__cf-badge path { stroke: var(--canvas); }

.lgb__cf-badge--pending { background: var(--sand); }
.lgb__cf-badge--pending path { stroke: var(--ink); }
.lgb__cf-badge--failed { background: #f8e6e4; }
.lgb__cf-badge--failed path { stroke: var(--error); }

.lgb__cf-body { margin-top: var(--card); color: var(--ink-soft); }
.lgb__cf-actions { margin-top: var(--gap); }
.lgb__cf-secondary {
  display: inline-block;
  margin-top: var(--card);
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Info modal — the (i) affordance.

   Native <dialog> rather than a hand-rolled overlay: focus trapping, Esc to
   close, inertness of the page behind, and the top layer all come free and
   correct. One element, filled on open.
   --------------------------------------------------------------------------- */
.lgb__modal {
  /* Explicit centring rather than relying on the UA default: a theme that sets
     anything on `dialog` — position, margin, inset — otherwise pushes it off
     centre, and the right-hand edge is what falls off screen. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-width: calc(100vw - 2 * var(--gutter));
  max-height: min(720px, calc(100vh - 2 * var(--gutter)));
  padding: 0;
  border: none;
  border-radius: var(--radius-sheet);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sheet);
  overflow: auto;
  overscroll-behavior: contain;
}

.lgb__modal::backdrop {
  background: rgb(55 36 38 / 0.45);
  backdrop-filter: blur(2px);
}

/* Entry is skipped entirely under reduced motion — see the query below. */
.lgb__modal[open] {
  animation: lgb-modal-in var(--duration-overlay, 320ms) var(--ease-standard);
}
@keyframes lgb-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lgb__modal[open] { animation: none; }
}

.lgb__modal-inner {
  position: relative;
  padding: var(--gutter);
}
/* It only holds focus so the dialog opens at its heading; it is not itself
   an interactive target, so it draws no ring. */
.lgb__modal-inner:focus { outline: none; }
@media (min-width: 48rem) {
  .lgb__modal-inner { padding: var(--gap); }
}

.lgb__modal-close {
  position: absolute;
  top: var(--tight);
  right: var(--tight);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color var(--duration-control) var(--ease-standard),
              color var(--duration-control) var(--ease-standard);
}
.lgb__modal-close:hover { background: var(--surface); color: var(--ink); }
.lgb__modal-close svg { width: 14px; height: 14px; }

.lgb__modal-title { margin-top: var(--hair); padding-right: 44px; }
.lgb__modal-lede { margin-top: var(--card); color: var(--ink-soft); }

.lgb__modal-points {
  margin-top: var(--gutter);
  padding-top: var(--gutter);
  border-top: 1px solid var(--sand);
}
.lgb__modal-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tight);
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
}
@media (min-width: 64rem) {
  .lgb__modal-points li { font-size: 16px; }
}
.lgb__modal-points li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  border-radius: 999px;
  background: var(--ink);
}
.lgb__modal-points strong {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.lgb__modal-note {
  margin-top: var(--gutter);
  padding-top: var(--card);
  border-top: 1px solid var(--sand);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.lgb__modal-add { margin-top: var(--gutter); }

/* ---------------------------------------------------------------------------
   Booking-fee note — the instruction that actually gets the appointment made.

   Given its own ground rather than set as body copy: it carries an action the
   payer must take after paying, and a run of prose under the title is exactly
   where that would be skimmed past.
   --------------------------------------------------------------------------- */
.lgb__co-callout {
  margin-top: var(--card);
  padding: var(--card);
  border-radius: var(--radius-card);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink);
}
@media (min-width: 64rem) {
  .lgb__co-callout { font-size: 15px; }
}

.lgb__co-phone {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lgb__co-phone:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------------
   Success pop-up
   --------------------------------------------------------------------------- */
.lgb__modal--success {
  width: min(480px, calc(100vw - 2 * var(--gutter)));
  text-align: center;
}
.lgb__modal--success .lgb__modal-inner { padding: var(--gap) var(--gutter); }
@media (min-width: 48rem) {
  .lgb__modal--success .lgb__modal-inner { padding: 50px var(--gap); }
}
.lgb__modal--success .lgb__modal-title { padding-right: 0; }
.lgb__modal--success .lgb__modal-lede { margin-top: var(--card); }
.lgb__modal--success .lgb__modal-note {
  margin-top: var(--gutter);
  padding-top: var(--card);
}
.lgb__modal--success .lgb__cf-badge { margin-bottom: var(--gutter); }

/* ---------------------------------------------------------------------------
   Compact order summary — step 2 only.

   Deliberately small. The order was configured on the previous step; repeating
   it at full size would rebuild the screen we just split apart. It exists so
   nobody is ever asked to pay an amount they cannot see.
   --------------------------------------------------------------------------- */
.lgb__co-summary {
  margin-bottom: var(--gutter);
  padding: var(--card);
  border-radius: var(--radius-card);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
}
.lgb__co-summary .lgb__co-line { padding: 3px 0; }
.lgb__co-summary .lgb__co-line-label { color: var(--ink-soft); }

.lgb__co-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--card);
  margin-top: var(--tight);
  padding-top: var(--tight);
  border-top: 1px solid var(--sand);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Step 1's continue button sits under the total. */
.lgb__co-continue { margin-top: var(--gutter); }

/* ---------------------------------------------------------------------------
   The scroll region

   The scrollbar is pushed out toward the card edge — a negative right margin
   widens the scrolling box into the panel's padding, and an equal padding keeps
   the content where it was. So the bar sits away from the text rather than
   running down the middle of the column.

   `scrollbar-width`/`scrollbar-color` cover Firefox; the ::-webkit- rules cover
   Safari and Chrome. Neither is load-bearing — without them the panel still
   scrolls, it just wears the OS default.
   --------------------------------------------------------------------------- */
.lgb__co-scrollwrap {
  position: relative;
  display: flex;
  min-height: 0;
}
@media (min-width: 64rem) {
  .lgb__co-scrollwrap { flex: 1 1 auto; }
}

.lgb__co-scroll {
  min-width: 0;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sand) transparent;
}
@media (min-width: 64rem) {
  .lgb__co-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: none;
    margin-right: -34px;
    padding-right: 34px;
  }
}

.lgb__co-scroll::-webkit-scrollbar { width: 3px; }
.lgb__co-scroll::-webkit-scrollbar-track { background: transparent; }
.lgb__co-scroll::-webkit-scrollbar-thumb {
  background: var(--sand);
  border-radius: 999px;
}
.lgb__co-scroll:not(:hover)::-webkit-scrollbar-thumb { background: rgb(216 195 176 / 0.55); }
.lgb__co-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

.lgb__co-panel--white .lgb__co-scroll { scrollbar-color: #e8dccd transparent; }
.lgb__co-panel--white .lgb__co-scroll::-webkit-scrollbar-thumb { background: #e8dccd; }

/* ---------------------------------------------------------------------------
   "There is more below"

   Only present while there IS more — `data-more` is set from the scroll
   position, so reaching the bottom removes the signal rather than leaving a
   permanent decoration that means nothing.

   A wash into the panel colour, and a hairline that breathes. The glow is the
   whole of the animation: no movement, no arrow, nothing that competes with the
   pay button sitting directly beneath it.
   --------------------------------------------------------------------------- */
.lgb__co-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-surface, 240ms) var(--ease-standard);
  background: linear-gradient(to top, var(--surface) 12%, transparent 100%);
}
.lgb__co-panel--white .lgb__co-more {
  background: linear-gradient(to top, var(--white) 12%, transparent 100%);
}
.lgb__co-more[data-more="true"] { opacity: 1; }

.lgb__co-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 34px;                  /* clear of the scrollbar's new position */
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ink-soft), transparent);
  animation: lgb-breathe 3.2s ease-in-out infinite;
}

@keyframes lgb-breathe {
  0%, 100% { opacity: 0.14; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .lgb__co-more::after { animation: none; opacity: 0.3; }
}

/* Stacked, the page scrolls as a whole — there is no inner region to hint at. */
@media (max-width: 63.99rem) {
  .lgb__co-more { display: none; }
}

/* ---------------------------------------------------------------------------
   Consent — sits directly above the button it gates, so the reason the button
   is inert is never off-screen from the button itself.
   --------------------------------------------------------------------------- */
.lgb__co-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--tight);
  margin-bottom: var(--card);
  cursor: pointer;
}

.lgb__co-consent-box {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-check);
  background: transparent;
  transition: background-color var(--duration-micro) var(--ease-standard);
}
.lgb__co-consent:has(:checked) .lgb__co-consent-box { background: var(--ink); }
.lgb__co-consent:has(:focus-visible) .lgb__co-consent-box {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.lgb__co-consent-box svg { width: 11px; height: 8px; }
.lgb__co-consent-box path {
  stroke: transparent;
  transition: stroke var(--duration-micro) var(--ease-standard);
}
.lgb__co-consent:has(:checked) .lgb__co-consent-box path { stroke: var(--canvas); }

.lgb__co-consent-text {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.lgb__co-consent-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Our own text input — matched to the Stripe Appearance rules in checkout.js
   so a field we render is indistinguishable from one they do. Change both or
   neither.
   --------------------------------------------------------------------------- */
.lgb__co-input {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #e2d4c6;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;              /* under 16px iOS zooms the page on focus */
  line-height: 1.4;
  letter-spacing: 0;
  transition: border-color var(--duration-control) var(--ease-standard);
}
.lgb__co-input::placeholder { color: var(--inactive-text); }
.lgb__co-input:focus {
  border-color: var(--ink);
  outline: none;
}
.lgb__co-input[aria-invalid="true"] {
  border-color: var(--error);
  color: var(--error);
}

.lgb__co-hint {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.lgb__co-hint--error { color: var(--error); }