/**
 * Single product — premium composition.
 *
 * Token discipline: every colour, space, radius, shadow and motion value comes
 * from the theme's --sm-* layer, which already derives from wepro-design-tokens
 * (--wdt-*) with fallbacks in main.css. Nothing here invents a literal colour,
 * shadow or timing. Product-page-private values are declared once in
 * .sm-prod below, so a site-level adjustment is a token change, not a hunt.
 *
 * Motion: transform/opacity only. Nothing is hidden by default — the JS layer
 * sets its own start state ONLY after confirming it may animate, so with JS
 * off or reduced-motion on, everything is simply visible.
 */

.sm-prod {
  /* Product-page-private tokens, all derived. */
  --sm-prod-gap: clamp(28px, 5vw, 64px);
  --sm-prod-pad: clamp(28px, 4.5vw, 72px);
  --sm-prod-card-radius: var(--sm-radius);
  --sm-prod-rule: var(--sm-line);
  --sm-prod-surface: var(--sm-bg);
  --sm-prod-surface-alt: var(--sm-mist);
  --sm-prod-ink: var(--sm-ink);
  --sm-prod-ink-soft: var(--sm-ink-soft);
  --sm-prod-accent: var(--sm-accent);
  --sm-prod-accent-soft: var(--sm-accent-soft);
  --sm-prod-shadow: var(--sm-lift-shadow);
  --sm-prod-dur: var(--sm-dur);
  --sm-prod-ease: var(--sm-ease);

  /* Neither --sm-on-dark nor --sm-header-h exists in this theme (verified by
     grep against main.css, not assumed). Declared here as product-page-private
     tokens so the values are named and overridable in ONE place rather than
     scattered as literals:
       - on-dark text: prefer a design-token if the stack ever ships one.
       - header height: the real sticky header is `top:0` with
         `min-height:74px` (main.css:232,240) — measured, not guessed. */
  --sm-prod-on-dark: var(--wdt-color-on-dark, #fff);
  --sm-prod-header-h: var(--sm-header-h, 74px);
}

/* ── Stage ─────────────────────────────────────────────────────────── */

.sm-prod-stage {
  padding: var(--sm-prod-pad) 0 clamp(20px, 3vw, 40px);
  background: var(--sm-prod-surface);
}

.sm-prod-stage__grid {
  display: grid;
  gap: var(--sm-prod-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .sm-prod-stage__grid {
    /* minmax(0,…) on both tracks: a long unbroken spec value or product name
       must not blow the grid out. This is the recurring overflow cause in this
       theme's witness history. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 4vw, 72px);
  }

  .sm-prod-stage__media { position: sticky; top: calc(var(--sm-prod-header-h) + 18px); }
}

.sm-prod-stage__figure,
.sm-prod-gallery__main .sm-prod-gallery__slide {
  border-radius: var(--sm-prod-card-radius);
  overflow: hidden;
  background: var(--sm-prod-surface-alt);
}

/* Reserve the box so CLS is 0 before the image decodes. */
.sm-prod-gallery__main { position: relative; aspect-ratio: 4 / 3; }
.sm-prod-gallery__slide { margin: 0; position: absolute; inset: 0; }
.sm-prod-gallery__slide img,
.sm-prod-stage__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sm-prod-gallery__thumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none;
}

.sm-prod-gallery__thumb {
  display: block; width: 68px; aspect-ratio: 1; border-radius: var(--sm-radius-s);
  overflow: hidden; border: 2px solid transparent; background: var(--sm-prod-surface-alt);
  transition: border-color var(--sm-dur-fast) var(--sm-prod-ease);
}
.sm-prod-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-prod-gallery__thumb.is-current { border-color: var(--sm-prod-accent); }
.sm-prod-gallery__thumb:focus-visible { outline: 3px solid var(--sm-prod-accent); outline-offset: 2px; }

.sm-prod-eyebrow {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 10px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.sm-prod-brand { font-weight: 700; color: var(--sm-prod-ink); }
.sm-prod-cat {
  color: var(--sm-prod-ink-soft); padding: 3px 10px; border-radius: 999px;
  background: var(--sm-prod-surface-alt); text-transform: none; letter-spacing: 0;
}

.sm-prod-title {
  margin: 0 0 12px;
  font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.7rem);
  line-height: 1.14;
  /* German compound product names are long and unbreakable. */
  hyphens: auto; overflow-wrap: anywhere;
}

.sm-prod-lead { margin: 0 0 20px; color: var(--sm-prod-ink-soft); font-size: 1.05rem; line-height: 1.62; }
.sm-prod-soon {
  margin: 0 0 14px; padding: 8px 12px; border-radius: var(--sm-radius-s);
  background: var(--sm-prod-accent-soft); color: var(--sm-prod-ink);
  /* Never colour-only: the sentence itself carries the meaning. */
}

.sm-prod-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }

/* Jump nav */
.sm-prod-jump { border-top: 1px solid var(--sm-prod-rule); padding-top: 16px; }
.sm-prod-jump ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.sm-prod-jump a { color: var(--sm-prod-ink-soft); text-decoration: none; border-bottom: 1px solid transparent; padding: 4px 0; }
.sm-prod-jump a:hover, .sm-prod-jump a:focus-visible { color: var(--sm-prod-ink); border-bottom-color: var(--sm-prod-accent); }

/* ── Sections ──────────────────────────────────────────────────────── */

.sm-prod-section { padding: var(--sm-prod-pad) 0; }
.sm-prod-section--tight { padding-top: 0; }
.sm-prod-section--trust { background: var(--sm-prod-surface-alt); }
.sm-prod-h2 { margin: 0 0 clamp(16px, 2vw, 26px); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); }

/* KPIs */
.sm-prod-kpis {
  display: grid; gap: 12px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.sm-prod-kpi {
  padding: 16px 18px; border: 1px solid var(--sm-prod-rule);
  border-radius: var(--sm-prod-card-radius); background: var(--sm-prod-surface);
}
.sm-prod-kpi dt { margin: 0 0 4px; font-size: .8rem; color: var(--sm-prod-ink-soft); }
.sm-prod-kpi dd { margin: 0; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }

/* Specs */
.sm-prod-specs { width: 100%; border-collapse: collapse; }
.sm-prod-specs th, .sm-prod-specs td {
  text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--sm-prod-rule);
  vertical-align: top; overflow-wrap: anywhere;
}
.sm-prod-specs th { width: 46%; font-weight: 600; color: var(--sm-prod-ink-soft); }
.sm-prod-specs td { font-weight: 600; }
.sm-prod-specs tr:nth-child(odd) td, .sm-prod-specs tr:nth-child(odd) th { background: color-mix(in srgb, var(--sm-prod-surface-alt) 55%, transparent); }

@media (max-width: 560px) {
  /* Stacked rows below 560px — a 2-col table at 320px forces either overflow
     or unreadable wrapping. */
  .sm-prod-specs, .sm-prod-specs tbody, .sm-prod-specs tr, .sm-prod-specs th, .sm-prod-specs td { display: block; width: auto; }
  .sm-prod-specs tr { padding: 10px 0; border-bottom: 1px solid var(--sm-prod-rule); }
  .sm-prod-specs th, .sm-prod-specs td { border: 0; padding: 2px 0; background: none !important; }
  .sm-prod-specs th { font-size: .84rem; }
}

.sm-prod-more { margin-top: 14px; }
.sm-prod-more > summary {
  cursor: pointer; padding: 12px 14px; border: 1px solid var(--sm-prod-rule);
  border-radius: var(--sm-radius-s); font-weight: 600; min-height: 44px;
  display: flex; align-items: center;
}
.sm-prod-more > summary:focus-visible { outline: 3px solid var(--sm-prod-accent); outline-offset: 2px; }

/* Lists */
.sm-prod-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sm-prod-list__item {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--sm-prod-rule); border-radius: var(--sm-prod-card-radius);
}
.sm-prod-list__ico { flex: 0 0 auto; color: var(--sm-prod-accent); line-height: 1; margin-top: 2px; }

/* Related */
.sm-prod-related { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sm-prod-related__card a {
  display: block; text-decoration: none; color: inherit; border: 1px solid var(--sm-prod-rule);
  border-radius: var(--sm-prod-card-radius); overflow: hidden; background: var(--sm-prod-surface);
  transition: transform var(--sm-dur-fast) var(--sm-prod-ease), box-shadow var(--sm-dur-fast) var(--sm-prod-ease);
}
.sm-prod-related__card a:hover, .sm-prod-related__card a:focus-visible { transform: translateY(-3px); box-shadow: var(--sm-prod-shadow); }
.sm-prod-related__card a:focus-visible { outline: 3px solid var(--sm-prod-accent); outline-offset: 2px; }
.sm-prod-related__meta { display: block; padding: 14px 16px; }
.sm-prod-related__brand { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sm-prod-ink-soft); }
.sm-prod-related__title { display: block; font-weight: 700; margin-top: 3px; overflow-wrap: anywhere; }

/* Trust */
.sm-prod-trust { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sm-prod-trust li { padding: 18px 20px; background: var(--sm-prod-surface); border-radius: var(--sm-prod-card-radius); }
.sm-prod-trust strong { display: block; margin-bottom: 5px; }
.sm-prod-trust span { color: var(--sm-prod-ink-soft); }

/* CTA */
.sm-prod-cta { padding: var(--sm-prod-pad) 0; background: var(--sm-dark); color: var(--sm-prod-on-dark); }
/* main.css:152 sets `h1,h2,h3,h4 { color: var(--sm-ink) }` globally, which beats
   the on-dark colour inherited from .sm-prod-cta and rendered this heading
   dark-on-dark. Caught by LOOKING at the screenshot — every DOM metric said OK.
   The theme hit the identical trap in its footer (main.css:832). */
.sm-prod-cta__h { margin: 0 0 10px; font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem); color: var(--sm-prod-on-dark); }
.sm-prod-cta .sm-prod-cta__note { color: var(--sm-prod-on-dark); }
.sm-prod-cta__note { margin: 0 0 18px; opacity: .86; max-width: 62ch; }

.sm-prod-prose { max-width: 70ch; }
.sm-prod-notes { border-top: 1px solid var(--sm-prod-rule); padding-top: clamp(20px, 3vw, 36px); }

/* Touch targets.
   `min-height` does nothing on an inline box, so the jump-nav anchors measured
   29px despite the rule — inline-flex is what actually gives them the height.
   Measured, not assumed: CDP reported 3x h=29 inside the product page before
   this change. */
.sm-prod-jump a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.sm-prod-gallery__thumb, .sm-prod-cta-btn { min-height: 44px; }

/* ── Motion ────────────────────────────────────────────────────────── */

/* The JS layer adds .sm-prod-anim ONLY when it has decided it may animate.
   Absent that class every element is at its natural, visible state — which is
   exactly what a no-JS or reduced-motion visitor gets. */
.sm-prod-anim [data-sm-stagger] > * { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .sm-prod-related__card a { transition: none; }
  .sm-prod-gallery__thumb { transition: none; }
  html { scroll-behavior: auto; }
}