/* === g-product — greenfield section (single-product masthead + included) ===
 * Ported from the Dodgen robbery-kit prototype: dodgen-sections.css §13
 * (.g-product masthead), the .ss-buy--masthead purchase column, the stepper
 * control (§.ss-buy__stepper) and §14 (.g-contents "what's included" panel).
 * Per build brief this section consumes the suite-wide --shell-* tokens
 * DIRECTLY — no per-section --g-product-* slot family, no color literals.
 * Tone-swappable colors are aliased to local --gp-* vars so the tone variants
 * only re-point a handful of tokens. Selectors target .ssla-g-product and the
 * Hub-projected variant classes .ssla-g-product--{dim}-{value}.
 */

/* ── Tone-swappable local aliases (default = light) ── */
.ssla-g-product {
  --gp-bg:        var(--shell-bg, #ffffff);
  --gp-fg:        var(--shell-t, #424242);
  --gp-heading:   var(--shell-h, #031e53);
  --gp-muted:     var(--shell-text-muted, #5f5f5f);
  --gp-accent:    var(--shell-accent, #031e53);
  --gp-card:      var(--shell-card, #ffffff);
  --gp-hairline:  var(--shell-hairline, #e5e5e5);
  --gp-hairline-strong: var(--shell-hairline-strong, #c4c4c4);
  --gp-check-bg:  var(--shell-accent, #031e53);
  --gp-check-fg:  var(--shell-text-on-dark, #ffffff);
}

/* ── Base layout ── */
.ssla-g-product {
  width: 100%;
  position: relative;
  background-color: var(--ssla-bg-color, var(--gp-bg));
  color: var(--gp-fg);
}
.ssla-g-product-inner {
  max-width: var(--shell-maxw, 1200px);
  margin: 0 auto;
  padding: clamp(2.25rem, 4vw, 3.75rem) var(--shell-pad-x, clamp(1.25rem, 5vw, 3rem));
}
.alignfull .ssla-g-product-inner { max-width: 100%; }

/* ── Masthead grid: media + purchase column ── */
.ssla-g-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: stretch;
}

/* ── Media column ── */
.ssla-g-product-media {
  position: relative;
  border-radius: var(--shell-radius-media, 0);
  overflow: hidden;
  background: var(--shell-bg-dark, #031e53);
  box-shadow: var(--shell-shadow-md, 0 14px 34px rgba(3, 30, 83, .16));
}
.ssla-g-product-media:empty {
  min-height: clamp(22rem, 40vw, 33rem);
}
.ssla-g-product-media img {
  width: 100%;
  height: 100%;
  min-height: clamp(22rem, 40vw, 33rem);
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Purchase column ── */
.ssla-g-product-buy {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ssla-g-product-eyebrow {
  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(--gp-accent);
  margin: 0 0 .7rem;
}
.ssla-g-product-eyebrow:empty { display: none; }
.ssla-g-product-heading {
  font-family: var(--shell-hf);
  font-size: clamp(1.85rem, 1.25rem + 1.9vw, 2.55rem);
  font-weight: var(--paint-heading-weight, 800);
  line-height: 1.12;
  letter-spacing: var(--shell-track-tight, -.018em);
  color: var(--gp-heading);
  margin: 0 0 .7rem;
}
.ssla-g-product-body {
  color: var(--gp-fg);
  font-family: var(--shell-bf);
  font-size: var(--shell-fs-body, 1rem);
  line-height: 1.6;
  margin: 0 0 1.4rem;
}
.ssla-g-product-body p { margin: 0 0 .8rem; }
.ssla-g-product-body p:last-child { margin-bottom: 0; }

/* ── Color chips (v3.54.02 — colors repeater; presentation-only) ──
   Square swatch chips between the description and the price row. Empty
   (no authored colors) → :empty → hidden, so pre-.02 pages are untouched.
   The first chip reads as the default color (accent ring); live chip→photo
   swap behavior belongs to the storefront app layer, not ss-launch. */
.ssla-g-product-colors-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(--gp-muted);
  margin: 0 0 .55rem;
}
.ssla-g-product-colors-label:empty { display: none; }
.ssla-g-product-colors {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1.35rem;
}
.ssla-g-product-colors:empty { display: none; }
.ssla-g-product-color {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--gp-hairline-strong);
  background-clip: padding-box;
  overflow: hidden;
}
.ssla-g-product-color-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* first chip = the default color; token ring per the prototype's selected state */
.ssla-g-product-color:first-child {
  box-shadow: 0 0 0 2px var(--gp-bg), 0 0 0 4px var(--gp-accent);
}
/* a11y text node — visually hidden, never a layout box */
.ssla-g-product-color-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Price ── */
.ssla-g-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .65rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--gp-hairline);
  margin: 0 0 1.1rem;
}
.ssla-g-product-amount {
  font-family: var(--shell-hf);
  font-weight: 800;
  font-size: clamp(2.15rem, 1.5rem + 2.1vw, 2.95rem);
  line-height: 1;
  letter-spacing: var(--shell-track-tight, -.018em);
  color: var(--gp-accent);
}
.ssla-g-product-compare {
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-body, 1rem);
  color: var(--gp-muted);
  text-decoration: line-through;
}
.ssla-g-product-compare:empty { display: none; }

/* ── Quantity stepper (presentation-only shell) ──
   Live stepper behavior is owned by ss-store (Track C); ss-launch ships no
   per-section JS. Hidden unless quantity=stepper. Reuses the prototype
   .ss-buy__stepper visual language. */
.ssla-g-product-stepper {
  display: none;
  align-items: stretch;
  width: max-content;
  border: 1px solid var(--gp-hairline-strong);
  border-radius: var(--shell-radius-media, 0);
  overflow: hidden;
  margin: 0 0 1.35rem;
}
.ssla-g-product--quantity-stepper .ssla-g-product-stepper { display: inline-flex; }
.ssla-g-product-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(--gp-accent);
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  user-select: none;
}
.ssla-g-product-num {
  width: 3.25rem;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--gp-hairline-strong);
  background: var(--gp-bg);
  color: var(--shell-text-body, #1a1a1a);
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-body, 1rem);
  accent-color: var(--gp-accent); /* native input control tint per house rule */
  -moz-appearance: textfield;
}
.ssla-g-product-num::-webkit-outer-spin-button,
.ssla-g-product-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Actions ── */
.ssla-g-product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.4rem;
  margin: 0 0 .9rem;
}
.ssla-g-product-cta {
  display: inline-block;
  background: var(--ssla-button-fill, var(--shell-btn-bg, var(--gp-accent)));
  color: var(--ssla-button-text, var(--shell-btn-t, #ffffff));
  padding: var(--shell-btn-pad, 1.05rem 2.2rem);
  border-radius: var(--shell-radius, 8px);
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-btn-size, .86rem);
  letter-spacing: var(--shell-btn-track, .13em);
  text-transform: uppercase;
  text-decoration: none;
}
.ssla-g-product-cta:empty { display: none; }
.ssla-g-product-secondary {
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-small, .95rem);
  color: var(--gp-accent);
  text-decoration: none;
}
.ssla-g-product-secondary:empty { display: none; }

/* ── Fulfillment hint (CSS content per fulfillment variant) ── */
.ssla-g-product-fulfillment {
  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(--gp-muted);
  margin: auto 0 0;
  padding-top: 1.1rem;
}
.ssla-g-product--fulfillment-physical   .ssla-g-product-fulfillment::before { content: "Ships in 3\2013 5 days"; }
.ssla-g-product--fulfillment-digital    .ssla-g-product-fulfillment::before { content: "Instant download"; }
.ssla-g-product--fulfillment-enrollment .ssla-g-product-fulfillment::before { content: "Immediate access"; }

/* ── "What's included" checklist panel (ported from g-contents §14) ── */
.ssla-g-product-included {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  background: var(--gp-card);
  border: 1px solid var(--gp-hairline-strong);
  border-radius: var(--shell-radius-media, 0);
  box-shadow: var(--shell-shadow-sm, 0 2px 10px rgba(3, 30, 83, .16));
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
}
.ssla-g-product-included-head {
  margin: 0 0 .8rem;
  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(--gp-accent);
}
.ssla-g-product-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3.2vw, 3rem);
}
.ssla-g-product-feature {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 0;
  border-top: 1px solid var(--gp-hairline);
}
.ssla-g-product-check {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
  background: var(--gp-check-bg);
  color: var(--gp-check-fg);
  border-radius: var(--shell-radius-media, 0);
}
.ssla-g-product-check svg { width: .95rem; height: .95rem; }
.ssla-g-product-feature-body { min-width: 0; }
.ssla-g-product-feature-text {
  display: block;
  font-family: var(--shell-hf);
  font-weight: 700;
  font-size: var(--shell-fs-body, 1rem);
  line-height: 1.42;
  letter-spacing: var(--shell-track-tight, -.018em);
  color: var(--gp-heading);
}
.ssla-g-product-feature-detail {
  display: block;
  font-family: var(--shell-bf);
  font-weight: 400;
  font-size: var(--shell-fs-small, .95rem);
  line-height: 1.5;
  color: var(--gp-muted);
  margin-top: .25rem;
}
.ssla-g-product-feature-detail:empty { display: none; }

/* ── Structural variant: included (v3.54.02) ──
   included=hidden removes the "What's included" panel entirely (quote-first
   products with no kit checklist). Default shown — existing pages untouched.
   fulfillment=none simply has no ::before rule, so no hint renders. */
.ssla-g-product--included-hidden .ssla-g-product-included { display: none; }

/* ── Structural variant: media_side ── */
.ssla-g-product--media-side-right .ssla-g-product-media { order: 2; }
.ssla-g-product--media-side-right .ssla-g-product-buy   { order: 1; }
.ssla-g-product--media-side-stacked .ssla-g-product-grid { grid-template-columns: minmax(0, 1fr); }

/* ── Tone variants ── */
.ssla-g-product--tone-dark {
  --gp-bg:       var(--shell-bg-dark, #031e53);
  --gp-fg:       var(--shell-text-on-dark-muted, #c8d6ea);
  --gp-heading:  var(--shell-text-on-dark, #ffffff);
  --gp-muted:    var(--shell-text-on-dark-muted, #c8d6ea);
  --gp-accent:   var(--shell-cta-bg, #c6dcf5);
  --gp-card:     var(--shell-surface-dark, #06295f);
  --gp-hairline: var(--shell-line-on-dark-soft, rgba(255, 255, 255, .10));
  --gp-hairline-strong: var(--shell-line-on-dark, rgba(255, 255, 255, .18));
  --gp-check-bg: var(--shell-cta-bg, #c6dcf5);
  --gp-check-fg: var(--shell-accent, #031e53);
}
.ssla-g-product--tone-accent {
  --gp-bg:       var(--shell-accent, #031e53);
  --gp-fg:       var(--shell-cta-t, #ffffff);
  --gp-heading:  var(--shell-cta-t, #ffffff);
  --gp-muted:    var(--shell-text-on-dark-muted, #c8d6ea);
  --gp-accent:   var(--shell-cta-bg, #c6dcf5);
  --gp-card:     var(--shell-surface-dark, #06295f);
  --gp-hairline: var(--shell-line-on-dark-soft, rgba(255, 255, 255, .10));
  --gp-hairline-strong: var(--shell-line-on-dark, rgba(255, 255, 255, .18));
  --gp-check-bg: var(--shell-cta-bg, #c6dcf5);
  --gp-check-fg: var(--shell-accent, #031e53);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ssla-g-product-grid { grid-template-columns: minmax(0, 1fr); }
  .ssla-g-product-media img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .ssla-g-product-buy { height: auto; }
  .ssla-g-product-fulfillment { margin-top: 1.1rem; }
}
@media (max-width: 620px) {
  .ssla-g-product-features { grid-template-columns: minmax(0, 1fr); }
}