/* === g-checkout — greenfield section (branded order summary) ===
 * Ported from the Dodgen checkout prototype: dodgen-sections.css §18
 * (.g-checkout two-column order summary + the .ss-buy__stepper control). The
 * actionable secure-checkout widget is NOT styled here — it comes from the
 * embedded [ssstore_checkout] shortcode (owned by ss-store). This file styles
 * only the section's own presentation shell + the inert stepper placeholder.
 * Consumes the suite-wide --shell-* tokens DIRECTLY — no color literals.
 * Selectors target .ssla-g-checkout and .ssla-g-checkout--{dim}-{value}.
 */

/* ── 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 these light-tone
     order-summary panels 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 {
  max-width: var(--shell-maxw, 1200px);
  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);
}
.alignfull .ssla-g-checkout-inner { max-width: 100%; }

.ssla-g-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: stretch;
}

/* ── LEFT: product panel ── */
.ssla-g-checkout-product {
  display: flex;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--gc-card);
  border: 1px solid var(--gc-hairline-strong);
  border-radius: var(--shell-radius-media, 0);
  box-shadow: var(--shell-shadow-sm, 0 2px 10px rgba(3, 30, 83, .16));
}
.ssla-g-checkout-thumb {
  flex: 0 0 auto;
  align-self: flex-start;
  width: clamp(6rem, 20vw, 8.5rem);
  border-radius: var(--shell-radius-media, 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%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.ssla-g-checkout-product-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.ssla-g-checkout-product-name {
  margin: 0 0 .4rem;
  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 0 1rem;
  color: var(--gc-fg);
  font-size: var(--shell-fs-small, .95rem);
  line-height: 1.55;
}
.ssla-g-checkout-included-head {
  margin: 0 0 .55rem;
  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 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
}
.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);
}
.ssla-g-checkout-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .55rem;
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gc-hairline);
}
.ssla-g-checkout-unit-amount {
  font-family: var(--shell-hf);
  font-weight: 800;
  font-size: var(--shell-fs-price, 2.35rem);
  line-height: 1;
  letter-spacing: var(--shell-track-tight, -.018em);
  color: var(--gc-accent);
}
.ssla-g-checkout-unit-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-muted);
}

/* ── RIGHT: order card ── */
.ssla-g-checkout-order {
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--gc-card);
  border: 1px solid var(--gc-hairline-strong);
  border-radius: var(--shell-radius-media, 0);
  box-shadow: var(--shell-shadow-sm, 0 2px 10px rgba(3, 30, 83, .16));
}
.ssla-g-checkout-order-head {
  margin: 0 0 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--gc-hairline);
  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-qty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.25rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gc-hairline);
}
.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);
}

/* Inert stepper shell — reuses the prototype .ss-buy__stepper visual language.
   Live behavior belongs to ss-store's widget (Track C); this is readonly. */
.ssla-g-checkout-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gc-hairline-strong);
  border-radius: var(--shell-radius-media, 0);
  overflow: hidden;
}
.ssla-g-checkout-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  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-num {
  width: 3.25rem;
  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);
  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; }

/* metered lines: subtotal, shipping */
.ssla-g-checkout-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .85rem;
}
.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-body, 1rem);
  color: var(--shell-text-body, #1a1a1a);
  margin: 0;
  text-align: right;
}
.ssla-g-checkout-line--ship .ssla-g-checkout-line-value { color: var(--gc-accent-2); }

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

/* the emphasised order total */
.ssla-g-checkout-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gc-hairline-strong);
}
.ssla-g-checkout-total-label {
  font-family: var(--shell-hf);
  font-weight: 800;
  font-size: var(--shell-fs-meta, .82rem);
  letter-spacing: var(--shell-track-wide, .16em);
  text-transform: uppercase;
  color: var(--gc-heading);
  margin: 0;
}
.ssla-g-checkout-total-value {
  font-family: var(--shell-hf);
  font-weight: 800;
  font-size: var(--shell-fs-price, 2.35rem);
  line-height: 1;
  letter-spacing: var(--shell-track-tight, -.018em);
  color: var(--gc-accent);
  margin: 0;
}

/* the embedded ss-store secure-checkout widget wrapper */
.ssla-g-checkout-secure-widget { margin: 1.5rem 0 .7rem; }
.ssla-g-checkout-secure-widget:empty { margin: 0; }

.ssla-g-checkout-secure {
  text-align: center;
  font-family: var(--shell-hf);
  font-weight: 600;
  font-size: var(--shell-fs-meta, .82rem);
  color: var(--gc-muted);
  margin: 0;
}

/* ── 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));
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ssla-g-checkout-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ssla-g-checkout-product { flex-direction: column; }
  .ssla-g-checkout-thumb { width: 100%; max-width: 12rem; }
}