/* === g-checkout — greenfield section (branded order summary) ===
 * v3.67.06 — payment-step simplification (Glenn, after seeing the v0.11.0
 * reskinned Stripe drawer live: "no more product image and information
 * needed, just payment simple in the center and wider" — payment step
 * ONLY, step 1 unchanged). Removes step 2's order-recap block entirely
 * (thumb/name/qty/amount, previously a left-hand column beside the widget
 * above 860px per v3.59.0 below) along with the 860px two-column grid that
 * housed it — both are dead weight once step 1 already shows the product
 * and step 2 no longer repeats it. Step 2 is now one centered column
 * (`.ssla-g-checkout-step-2 { max-width: 40rem; margin: 0 auto; }`), and
 * the widget's own drawer is overridden wider than ss-store's generic
 * 500px cap via a step-2-scoped selector (`.ssla-g-checkout-step-2
 * .ssstore-checkout-drawer { max-width: 100%; }`) rather than editing
 * ss-store's own checkout.css, which stays correct for every other
 * consumer/context. See the "Step 2 payment step" comment further down for
 * the rules themselves; the old "Step 2 payment row (v3.59.0)" and "Order
 * recap (v3.58.0)" comments/rules they replace are gone.
 *
 * v3.56.0 — unified-panel rebuild. Was a two-column layout ported from the
 * Dodgen checkout prototype (dodgen-sections.css §18): a LEFT product panel
 * and a RIGHT order card, rendered as two visually disconnected boxes with
 * the price shown twice (unit price + Subtotal). Now ONE card
 * (.ssla-g-checkout-panel): top row (thumb + name/line) / included-items
 * 2-col grid / order block (qty, Subtotal, note, CTA, widget) — each
 * separated by a hairline, unit price dropped so Subtotal is the one price
 * shown. The actionable secure-checkout widget (including ITS OWN CTA
 * button) is NOT built here — it comes from the embedded [ssstore_checkout]
 * shortcode (owned by ss-store); this file scopes a solid-fill presentation
 * override onto that button's class (.ssstore-checkout-button) plus styles
 * this section's own presentation shell + the live stepper markup.
 * Consumes the suite-wide --shell-* tokens DIRECTLY — no color literals.
 * Selectors target .ssla-g-checkout and .ssla-g-checkout--{dim}-{value}.
 *
 * v3.57.0 — wide/integrated rebuild (client feedback on the v3.56.0 live
 * result). `.ssla-g-checkout-panel`'s bordered/shadowed card treatment is
 * GONE — no boxed-card look anywhere, top or bottom; content sits directly
 * on the page background. The old stacked "top row" (thumb + name/line)
 * then a full-width "what's included" block below are merged into ONE
 * two-column area, `.ssla-g-checkout-info` (thumb LEFT ~208px, everything
 * else — name/line/included — together in ONE right column,
 * `.ssla-g-checkout-info-body`). `.ssla-g-checkout-inner` widens to
 * `min(1250px, 80%)`. `.ssla-g-checkout-order` (unchanged as the container
 * ss-store's checkout.js `.closest()`s onto) becomes a real two-column cart
 * row: LEFT `.ssla-g-checkout-order-details` (qty → Subtotal → bulk note),
 * RIGHT `.ssla-g-checkout-order-cta` (the ss-store CTA widget → ship-note →
 * secure caption). The ONLY hairline left anywhere in this section sits
 * between `.ssla-g-checkout-info` and `.ssla-g-checkout-order`. Both new
 * two-column areas collapse to one column at the 768px floor.
 *
 * v3.59.0 — step 2 payment-row fix. Client-reported bug: on desktop, step 2
 * (recap + the ss-store [ssstore_checkout] widget) rendered visibly
 * lopsided — the widget's Stripe drawer is hard-capped at 500px by ss-store's
 * OWN checkout.css with no centering margin, so inside this section's much
 * wider step panel (~1000px+ on a typical desktop, since .ssla-g-checkout-
 * inner caps at min(1250px,80%)) it sat flush against the left edge with a
 * large empty gap to its right. Two changes, one in each repo: (1) ss-store's
 * `.ssstore-checkout-drawer` gained `margin: ... auto` so it centers in
 * whatever column it's given — correct regardless of this section's layout;
 * (2) THIS file adds a real two-column layout to `.ssla-g-checkout-step-2`
 * above a new 860px breakpoint (recap LEFT as a fixed-width order-summary
 * column, the secure-widget RIGHT filling the remainder) — using the space
 * productively instead of just centering a small box in a big empty panel,
 * the standard "order summary beside payment" shape most checkout pages
 * use. `.ssla-g-checkout-back-btn` spans both columns as its own grid row.
 * Below 860px, step 2 stays single-column (recap above, widget below,
 * unchanged from v3.58.0) — chosen over the section's usual 768px floor
 * because the widget's own drawer wants ~500px minimum to read comfortably
 * beside a recap column that needs its own ~260-320px, and 768px is too
 * narrow to fit both without cramping either.
 *
 * v3.58.0 — two-step flow rebuild. The whole section content now sits
 * inside a slide track: .ssla-g-checkout-steps (overflow:hidden) >
 * .ssla-g-checkout-track (flex, 200% wide, `transform` transition) > two
 * .ssla-g-checkout-step panels at 50% of the track each (= 100% of the
 * viewport). Toggling `.is-step-2` on the track (sibling ss-store's
 * checkout.js, not built yet as of this version) slides from step 1
 * (product info + buy row, v3.57.0 content unchanged except the buy row's
 * RIGHT column now holds this section's own .ssla-g-checkout-continue-btn
 * instead of the ss-store widget) to step 2 (.ssla-g-checkout-back-btn, a
 * small .ssla-g-checkout-recap row, then the relocated [ssstore_checkout]
 * widget). The widget's own CTA button is hidden ONLY inside step 2
 * (.ssla-g-checkout-step-2 .ssstore-checkout-button) — scoped, not global,
 * so any OTHER [ssstore_checkout] embed on a site is unaffected.
 * .ssla-g-checkout-step is deliberately reused as BOTH the new panel
 * wrapper class AND the existing qty +/- stepper span class (see
 * .ssla-g-checkout-stepper below) — ss-store's checkout.js already
 * disambiguates the stepper spans via the [data-step] attribute, which the
 * panel divs never carry. CSS needs its own disambiguation since a bare
 * `.ssla-g-checkout-step {...}` rule would paint BOTH: the panel width rule
 * is scoped `.ssla-g-checkout-track > .ssla-g-checkout-step` (the panels'
 * real parent) and the pre-existing stepper-span rule is rescoped
 * `.ssla-g-checkout-stepper > .ssla-g-checkout-step` (the spans' real
 * parent) — verified via headless render that panels and spans no longer
 * cross-contaminate each other's box model. prefers-reduced-motion: reduce
 * removes the transition (instant snap), not the sliding mechanism itself.
 * The v3.57.0 .ssla-g-checkout-info hairline (a border-bottom) is replaced
 * by an explicit <hr class="ssla-g-checkout-sep"> between the info and
 * order blocks — same one-hairline result, now a real element so it can
 * sit between the two <div>s under the new step-1 wrapper. The old
 * .ssla-g-checkout-secure caption rule is removed — the template no longer
 * emits that class (dropped entirely; being on a dedicated payment step
 * already implies "opens secure checkout").
 */

/* ── Tone-swappable local aliases (default = light) ── */
.ssla-g-checkout {
  --gc-bg:       var(--shell-surface-cool, #f3f6fb);
  --gc-fg:       var(--shell-t, #424242);
  --gc-heading:  var(--shell-h, #031e53);
  --gc-muted:    var(--shell-text-muted, #5f5f5f);
  --gc-accent:   var(--shell-accent, #031e53);
  --gc-accent-2: var(--shell-accent-2, #416e95);
  /* Panel surface. Deliberately NOT --shell-card: some presets (e.g. Dodgen)
     define surface-card as a DARK navy card, which would paint this light-
     tone panel navy-on-navy. The prototype's card was white/light, so
     consume the guaranteed-light page surface token instead. The dark/accent
     tone variants below override --gc-card explicitly, so this only governs
     the default light tone. */
  --gc-card:     var(--shell-bg, #ffffff);
  --gc-hairline: var(--shell-hairline, #e5e5e5);
  --gc-hairline-strong: var(--shell-hairline-strong, #c4c4c4);
}

/* ── Base ── */
.ssla-g-checkout {
  width: 100%;
  position: relative;
  background-color: var(--ssla-bg-color, var(--gc-bg));
  color: var(--gc-fg);
}
.ssla-g-checkout-inner {
  /* Client-specified: up to 1250px or 80% of the viewport, whichever is
     smaller. Same cap regardless of block alignment now (align-wide/-full
     no longer need a separate override — both resolved to the same
     absolute value under the old shell-maxw-based rule's narrower cap). */
  max-width: min(1250px, 80%);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) var(--shell-pad-x, clamp(1.25rem, 5vw, 3rem)) clamp(2.75rem, 5vw, 4.25rem);
}

/* ── Slide track (v3.58.0) — the two-step mechanism. .ssla-g-checkout-steps
   is the clipping viewport; .ssla-g-checkout-track is 200% wide (one step =
   50% of the track = 100% of the viewport) and slides via `transform` when
   sibling ss-store's checkout.js toggles `.is-step-2` on it. Percentages
   throughout mean this is already viewport-width-relative — the mobile
   768px collapse below needs no companion override here. ── */
.ssla-g-checkout-steps {
  overflow: hidden;
}
.ssla-g-checkout-track {
  display: flex;
  width: 200%;
  transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
}
.ssla-g-checkout-track.is-step-2 {
  transform: translateX(-50%);
}
/* Scoped with a direct-child combinator: .ssla-g-checkout-step is also the
   existing qty +/- stepper span's class (see .ssla-g-checkout-stepper
   further down) — those spans are deeply nested, never a direct child of
   the track, so this rule never reaches them. */
.ssla-g-checkout-track > .ssla-g-checkout-step {
  width: 50%;
  min-width: 0;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ssla-g-checkout-track {
    transition: none;
  }
}

/* ── Product-info area (v3.57.0): thumb LEFT + one merged right column
   (name/line/"what's included"). NO card chrome anywhere in this section —
   content sits directly on the page background. The border-bottom here is
   the ONE hairline this whole section still has, separating this area from
   the buy row below. Squared corners throughout: this suite ships ZERO
   border-radius. ── */
.ssla-g-checkout-info {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr); /* ~208px thumb column — modest, not a hero image */
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* The ONE hairline in this section (v3.58.0: now a real element instead of
   a border-bottom on .ssla-g-checkout-info, so it can sit cleanly between
   the info block and the order block under the step-1 panel). Margin on
   both sides carries the SAME spacing the old padding-bottom/padding-top
   pair did — visual result unchanged. */
.ssla-g-checkout-sep {
  border: 0;
  border-top: 1px solid var(--gc-hairline);
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0;
}
.ssla-g-checkout-thumb {
  width: 13rem; /* ~208px, per approved mock — modest, not a hero image */
  height: 13rem;
  border-radius: 0;
  overflow: hidden;
  background: var(--shell-bg-dark, #031e53);
}
.ssla-g-checkout-thumb:empty { aspect-ratio: 1 / 1; }
.ssla-g-checkout-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.ssla-g-checkout-info-body { min-width: 0; }
.ssla-g-checkout-product-name {
  margin: 0 0 .3rem;
  font-family: var(--shell-hf);
  color: var(--gc-heading);
  font-size: var(--shell-fs-h3, 1.25rem);
  line-height: 1.24;
  letter-spacing: var(--shell-track-tight, -.018em);
}
.ssla-g-checkout-product-line {
  margin: 0;
  color: var(--gc-fg);
  font-size: var(--shell-fs-small, .95rem);
  line-height: 1.5;
}

/* ── "What's included" — now lives inside .ssla-g-checkout-info-body,
   beside the thumbnail rather than below the whole row. No border of its
   own; the ONE hairline for this section is on .ssla-g-checkout-info
   itself (above). ── */
.ssla-g-checkout-included-block {
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
}
.ssla-g-checkout-included-head {
  margin: 0 0 .7rem;
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-meta, .82rem);
  letter-spacing: var(--shell-track-wide, .16em);
  text-transform: uppercase;
  color: var(--gc-accent);
}
.ssla-g-checkout-included {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1.5rem;
}
.ssla-g-checkout-included-item {
  position: relative;
  padding-left: 1.35rem;
  color: var(--gc-fg);
  font-size: var(--shell-fs-small, .95rem);
  line-height: 1.45;
}
.ssla-g-checkout-included-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .5rem;
  height: .5rem;
  background: var(--gc-accent-2);
}

/* ── Buy row (v3.57.0): a real two-column cart, not a stacked form.
   `.ssla-g-checkout-order` STAYS as the one container ss-store's
   checkout.js `.closest()`s onto from the embedded widget — only the two
   inner columns (`-details` / `-cta`) are new. LEFT = quantity → Subtotal →
   bulk note (least-common path, last); RIGHT = the actual buy action (the
   ss-store CTA widget) → ship-note → secure caption — price info one side,
   the buy action the other, reading as one integrated cart rather than a
   form with a plugged-in shortcode widget stacked below it. No card
   chrome — this row sits directly on the page background. ── */
.ssla-g-checkout-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.ssla-g-checkout-order-details,
.ssla-g-checkout-order-cta {
  min-width: 0;
}
.ssla-g-checkout-qty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.25rem;
  margin: 0 0 .65rem;
}
.ssla-g-checkout-qty-label {
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-meta, .82rem);
  letter-spacing: var(--shell-track-wide, .16em);
  text-transform: uppercase;
  color: var(--gc-accent);
}

/* Live stepper shell. ss-store's assets/js/checkout.js (Track C, sibling
   plugin) wires this markup via the class/data-attribute selectors below —
   ss-launch ships no per-section JS of its own. v3.58.0: scoped with a
   `.ssla-g-checkout-stepper >` child combinator (was a bare class rule) —
   .ssla-g-checkout-step is now ALSO the new step-panel wrapper class (see
   the slide-track rules above); the +/- buttons are always a direct child of
   .ssla-g-checkout-stepper, the panel divs never are, so this disambiguates
   without touching the class name JS/markup rely on. */
.ssla-g-checkout-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gc-hairline-strong);
  border-radius: 0;
  overflow: hidden;
}
.ssla-g-checkout-stepper > .ssla-g-checkout-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem; /* ~44px — comfortably tappable on mobile too */
  /* LNCH-0065 (v3.67.21) — was a <span>; now a real <button type="button">
     (native focusability + Enter/Space activation, no keydown JS needed
     anywhere). border/padding/cursor reset to match this file's existing
     .ssla-g-checkout-continue-btn/-back-btn button-reset convention, so the
     browser's own button chrome never shows and the visual result is
     byte-identical to the old span. */
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--shell-surface-cool, #f3f6fb);
  color: var(--gc-accent);
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  user-select: none;
}
.ssla-g-checkout-stepper > .ssla-g-checkout-step:focus-visible {
  outline: 2px solid var(--gc-accent-2);
  outline-offset: -2px; /* inset — the stepper's own border sits flush at the shell edge */
}
.ssla-g-checkout-num {
  width: 3.25rem;
  min-height: 2.75rem;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--gc-hairline-strong);
  background: var(--gc-card);
  color: var(--shell-text-body, #1a1a1a);
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-body, 1rem);
  font-variant-numeric: tabular-nums; /* digits don't jitter the layout as they change width */
  accent-color: var(--gc-accent); /* native input control tint per house rule */
  -moz-appearance: textfield;
}
.ssla-g-checkout-num::-webkit-outer-spin-button,
.ssla-g-checkout-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bulk-order note (v3.56.0). Renders ONLY when the bulk_contact_url field is
   non-empty. The href carries the raw {{bulk_contact_url}} token; an empty
   field substitutes to href="" (esc_url('') === ''), and this :has() guard
   hides the WHOLE line — copy included, not just the dead link — exactly
   the class of technique this codebase already uses elsewhere for "hide an
   element when a comparable field is empty" (about-bio.css's
   `:not(:has(img[src]:not([src=""])))`, content-split-deep.css's
   `:has(.csd-pillar-icon:empty)`). No PHP conditional exists for this shape
   (single non-`link`-type field gating a block of fixed copy + a token-
   driven href) and this section's own files are the only files this change
   may touch — see the class docblock for the full reasoning. Sits LAST in
   the left column (v3.57.0: quantity → Subtotal → bulk note), so it carries
   no bottom margin of its own — nothing follows it in this column. */
.ssla-g-checkout-bulk-note {
  margin: 0;
  color: var(--gc-muted);
  font-size: var(--shell-fs-small, .95rem);
  line-height: 1.5;
}
.ssla-g-checkout-bulk-note a {
  color: var(--gc-accent-2);
  font-weight: 700;
  text-decoration: underline;
}
.ssla-g-checkout-bulk-note:has(a[href=""]) { display: none; }

/* Subtotal — the ONE price line this panel shows (the old second "unit
   price" echo is gone). No border/padding-top here: the ONE hairline left
   anywhere in this section is .ssla-g-checkout-sep (v3.58.0), between the
   info block and this buy row — this line sits directly below the
   quantity row in the left column of the two-column buy row. */
.ssla-g-checkout-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .9rem;
}
.ssla-g-checkout-line-label {
  color: var(--gc-fg);
  font-size: var(--shell-fs-body, 1rem);
  margin: 0;
}
.ssla-g-checkout-line-value {
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-price, 1.6rem);
  color: var(--shell-text-body, #1a1a1a);
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums; /* live-recalculated by ss-store's JS on qty change */
}

.ssla-g-checkout-note {
  margin: 0 0 1.1rem;
  color: var(--gc-muted);
  font-size: var(--shell-fs-small, .95rem);
  line-height: 1.5;
}

/* the embedded ss-store secure-checkout widget wrapper, plus its CTA button.
   .ssstore-checkout-button is NOT this plugin's markup — it is printed by
   ss-store's own [ssstore_checkout] shortcode handler (render_checkout()).
   Scoping the override to .ssla-g-checkout-secure-widget keeps it from
   leaking onto any [ssstore_checkout] instance embedded outside this
   section elsewhere on a site. This is presentation only — the shortcode
   invocation/attributes in the html template above are untouched. */
.ssla-g-checkout-secure-widget { margin: 0 0 .7rem; }
.ssla-g-checkout-secure-widget:empty { margin: 0; }
.ssla-g-checkout-secure-widget .ssstore-checkout-button {
  display: block;
  width: 100%;
  min-height: 3rem; /* ~48px — comfortably tappable on mobile */
  background: var(--gc-accent);
  color: var(--brand-accent-fg, var(--shell-cta-t, #ffffff));
  border: 0;
  border-radius: 0;
  padding: 1rem 2rem;
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-btn-size, .86rem);
  letter-spacing: var(--shell-btn-track, .1em);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: filter .15s ease;
}
.ssla-g-checkout-secure-widget .ssstore-checkout-button:hover { filter: brightness(.92); }
.ssla-g-checkout-secure-widget .ssstore-checkout-button:focus-visible {
  outline: 2px solid var(--gc-accent-2);
  outline-offset: 2px;
}
.ssla-g-checkout-secure-widget .ssstore-checkout-button:disabled { cursor: not-allowed; filter: brightness(.85); }

/* v3.58.0: the real ss-store CTA button is relocated into step 2, but the
   shopper now only ever presses .ssla-g-checkout-continue-btn on step 1 —
   sibling ss-store's checkout.js is the intended owner of programmatically
   triggering this hidden button's existing click handler the instant
   Continue is clicked. Scoped to .ssla-g-checkout-step-2 specifically (NOT
   a bare .ssstore-checkout-button rule) so it never affects any OTHER
   [ssstore_checkout] embed on a site that isn't using this two-step
   pattern. The Stripe drawer this button's own JS mounts is a sibling
   element inside the same widget, unaffected by this rule. */
.ssla-g-checkout-step-2 .ssstore-checkout-button {
  display: none;
}

/* ── Continue button (v3.58.0) — this section's OWN inert primary action on
   step 1, taking over the visual role .ssstore-checkout-button used to
   have here. Same solid-fill treatment: --gc-accent background, squared
   corners, full-width, ~48px min-height. Zero behavior of its own; sibling
   ss-store's checkout.js wires the click. ── */
.ssla-g-checkout-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  width: 100%;
  min-height: 3rem; /* ~48px — comfortably tappable on mobile */
  background: var(--gc-accent);
  color: var(--brand-accent-fg, var(--shell-cta-t, #ffffff));
  border: 0;
  border-radius: 0;
  padding: 1rem 2rem;
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-btn-size, .86rem);
  letter-spacing: var(--shell-btn-track, .1em);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: filter .15s ease;
}
.ssla-g-checkout-continue-btn:hover { filter: brightness(.92); }
.ssla-g-checkout-continue-btn:focus-visible {
  outline: 2px solid var(--gc-accent-2);
  outline-offset: 2px;
}
.ssla-g-checkout-continue-btn:disabled { cursor: not-allowed; filter: brightness(.85); }

/* ── Back button (v3.58.0) — plain text-style link/button, same muted/
   accent link convention as .ssla-g-checkout-bulk-note a above (no fill,
   underline, --gc-accent-2). Zero behavior of its own; sibling ss-store's
   checkout.js wires the click. ── */
.ssla-g-checkout-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gc-accent-2);
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-small, .95rem);
  text-decoration: underline;
  cursor: pointer;
}
.ssla-g-checkout-back-btn:hover { filter: brightness(.85); }
.ssla-g-checkout-back-btn:focus-visible {
  outline: 2px solid var(--gc-accent-2);
  outline-offset: 2px;
}

/* ── Step 2 payment step (v3.67.06) — Glenn, after seeing the reskinned
   drawer live: "no more product image and information needed, just payment
   simple in the center and wider" (payment step ONLY; step 1 is untouched).
   Replaces the v3.58.0/v3.59.0 order-recap block and its 860px two-column
   grid entirely — the .ssla-g-checkout-recap* rules and the two-column
   media query are GONE (dead CSS otherwise, since g-checkout.php no longer
   prints that markup). Step 2 is now a single centered column: the back
   button sits directly above the widget, and the widget itself gets a
   wider cap than the old 500px ss-store default (overridden here, scoped
   to this step only, via a more specific selector — ss-store's own
   checkout.css default stays untouched for every other consumer/context). ── */
.ssla-g-checkout-step-2 {
  max-width: 40rem;
  margin: 0 auto;
}
.ssla-g-checkout-step-2 .ssstore-checkout-drawer {
  max-width: 100%;
}

/* ── Tone variants ── */
.ssla-g-checkout--tone-dark {
  --gc-bg:       var(--shell-bg-dark, #031e53);
  --gc-fg:       var(--shell-text-on-dark-muted, #c8d6ea);
  --gc-heading:  var(--shell-text-on-dark, #ffffff);
  --gc-muted:    var(--shell-text-on-dark-muted, #c8d6ea);
  --gc-accent:   var(--shell-cta-bg, #c6dcf5);
  --gc-accent-2: var(--shell-cta-bg, #c6dcf5);
  --gc-card:     var(--shell-surface-dark, #06295f);
  --gc-hairline: var(--shell-line-on-dark-soft, rgba(255, 255, 255, .10));
  --gc-hairline-strong: var(--shell-line-on-dark, rgba(255, 255, 255, .18));
}
.ssla-g-checkout--tone-accent {
  --gc-bg:       var(--shell-accent, #031e53);
  --gc-fg:       var(--shell-cta-t, #ffffff);
  --gc-heading:  var(--shell-cta-t, #ffffff);
  --gc-muted:    var(--shell-text-on-dark-muted, #c8d6ea);
  --gc-accent:   var(--shell-cta-bg, #c6dcf5);
  --gc-accent-2: var(--shell-cta-bg, #c6dcf5);
  --gc-card:     var(--shell-surface-dark, #06295f);
  --gc-hairline: var(--shell-line-on-dark-soft, rgba(255, 255, 255, .10));
  --gc-hairline-strong: var(--shell-line-on-dark, rgba(255, 255, 255, .18));
}
/* Dark/accent tones flip the CTA fill to --gc-accent (now a light chip
   color), so the button label needs dark ink instead of the constant
   --shell-cta-t white the light tone resolves to. Applies to BOTH the
   ss-store widget's own button (hidden in this context as of v3.58.0, but
   the rule stays generic/reusable for any other embedding) and this
   section's own .ssla-g-checkout-continue-btn, which took over its visual
   role on step 1. */
.ssla-g-checkout--tone-dark .ssstore-checkout-button,
.ssla-g-checkout--tone-accent .ssstore-checkout-button,
.ssla-g-checkout--tone-dark .ssla-g-checkout-continue-btn,
.ssla-g-checkout--tone-accent .ssla-g-checkout-continue-btn {
  color: var(--shell-h, #031e53);
}

/* ── Responsive — 768px is this codebase's standard mobile breakpoint
   (see docs/HANDOFF-2026-08-11-proset-debrand-and-mobile-floor.md and the
   ~90 section stylesheets that already key off it). v3.57.0: both new
   two-column areas collapse to one column — thumbnail above / text below
   in the info area (source order already puts the thumb first), quantity+
   Subtotal above / the CTA widget below in the buy row (source order
   already matches: -details then -cta). v3.58.0: the slide/track mechanism
   needs NO companion override here — it's already viewport-width-relative
   (percentages: track = 200%, each step = 50% of that = 100% of the
   viewport), so each step's own internal content resolves to the exact
   same effective width it had pre-v3.58.0, verified at 375px via headless
   render. ── */
@media (max-width: 768px) {
  .ssla-g-checkout-info {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  /* Shrink the thumbnail for the stacked layout — at a 375px viewport this
     size leaves comfortable room and never reads as a hero image (verified:
     container inner width ~337px, thumb well under half of that). */
  .ssla-g-checkout-thumb { width: 6rem; height: 6rem; }
  .ssla-g-checkout-included { grid-template-columns: minmax(0, 1fr); }
  .ssla-g-checkout-order {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}