/* ==========================================================================
 * headless.css - Headless WooCommerce page (product 625), WS16 CHG-20261005-WS16-01
 * Spec: docs/seo-aio-program/36-SPEC-headless-commerce-woo-migration-20261005.md
 * Builds on luxury.css (.lx-*) + ui-cards.css. Tokens only (templates/cmsmart/css/tokens.css).
 * Scoped to .hl-page so nothing leaks to other solution pages.
 * ========================================================================== */

.hl-page {
  display: block;
  color: var(--c-ink-700);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
.hl-page a { color: var(--c-navy-500); }
.hl-page a:hover { color: var(--c-brand-600); }

/* ---------- Buttons (explicit, so lane restyles of .cm-btn--primary cannot outline it) ---------- */
.hl-page .cm-btn.cm-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lx-btn-min-h-lg);
  padding: 0 var(--sp-30);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-family: var(--font-heading);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}
.hl-page .cm-btn.cm-btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}
.hl-btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-btn-min-h-lg);
  padding: 0 var(--sp-24);
  border: 1px solid var(--c-lx-on-dark-muted);
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.hl-page .hl-btn-ghost,
.hl-page .hl-btn-ghost:hover { color: var(--c-surface-0); text-decoration: none; }
.hl-page .hl-btn-ghost:hover { border-color: var(--c-surface-0); }

/* ---------- Hero: statement inset card ---------- */
.hl-page .hl-hero {
  margin: var(--sp-16) var(--cm-card-inset-wide) 0;
}
.hl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: var(--lx-split-gap);
  align-items: center;
  padding: var(--lx-hero-pad-y) var(--lx-hero-pad-x);
  min-height: var(--lx-hero-min-h);
  box-sizing: border-box;
}
.hl-hero__copy { max-width: var(--lx-hero-copy-w); }
.hl-hero .lx-eyebrow { color: var(--c-brand-400); }
.hl-page .hl-hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--c-surface-0);
  text-transform: none;
  text-align: left;
}
.hl-hero__sub {
  margin: var(--sp-20) 0 0;
  font-size: var(--text-lead);
  line-height: var(--lh-body);
  color: var(--c-lx-on-dark-muted);
}
.hl-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
}
.hl-hero__entity {
  margin: var(--sp-24) 0 0;
  padding-left: var(--sp-12);
  border-left: 2px solid var(--c-lx-line-dark);
  font-size: var(--fs-14);
  color: var(--c-lx-on-dark-muted);
}

/* layered mini diagram (white card floating over the photo) */
.hl-hero__diagram {
  margin: 0;
  padding: var(--sp-24);
  border-radius: var(--lx-radius-sm);
  background: var(--c-surface-0);
  box-shadow: var(--shadow-lx-3);
  color: var(--c-navy-900);
}
.hl-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-10);
}
.hl-mini li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--c-lx-line);
  border-radius: var(--r-12);
  background: var(--c-surface-50);
}
.hl-mini li + li::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--sp-10));
  left: 50%;
  width: 2px;
  height: var(--sp-10);
  background: var(--c-brand-500);
}
.hl-mini li.is-accent {
  border-color: var(--c-brand-500);
  background: var(--c-brand-50);
}
.hl-mini__k {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.hl-mini__v {
  font-family: var(--font-heading);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}
.hl-hero__diagram figcaption {
  margin-top: var(--sp-16);
  font-size: var(--fs-14);
  color: var(--c-ink-500);
}

/* ---------- Answer-first block ---------- */
.hl-answer {
  max-width: var(--measure-block);
  margin: 0 auto;
  padding-left: var(--sp-24);
  border-left: 3px solid var(--c-brand-500);
}
.hl-page .hl-answer__q {
  margin: 0 0 var(--sp-12);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-transform: none;
}
.hl-answer__a {
  margin: 0;
  font-size: var(--text-lead);
  color: var(--c-ink-700);
}
.hl-meta {
  margin: var(--sp-16) 0 0;
  font-size: var(--fs-13);
  color: var(--c-ink-500);
}

/* ---------- Shared section bits ---------- */
.hl-page h2.lx-title.hl-left { margin-inline: 0; text-align: left; }
.hl-page .lx-head h2 { text-transform: none; }
.hl-lead {
  margin: var(--sp-16) 0 0;
  font-size: var(--text-lead);
  color: var(--c-ink-500);
}
.hl-split { margin-bottom: var(--lx-head-gap); }
.hl-media { aspect-ratio: 4 / 3; }
.hl-media--ui { aspect-ratio: auto; background: var(--c-surface-0); }
.hl-media--ui img { height: auto; object-fit: contain; }
.hl-page .hl-h3 {
  margin: var(--lx-head-gap) 0 var(--sp-16);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-transform: none;
}
.hl-page .hl-h3--flush { margin-top: 0; }
.hl-note { margin: var(--sp-16) 0 0; font-size: var(--fs-14); color: var(--c-ink-500); }

/* ---------- Tables (extractable; stack on phones) ---------- */
.hl-table-wrap {
  overflow-x: auto;
  border-radius: var(--lx-radius-sm);
  background: var(--c-surface-0);
  border: 1px solid var(--c-lx-line);
  box-shadow: var(--shadow-lx-1);
}
.hl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
}
.hl-table th,
.hl-table td {
  padding: var(--sp-16) var(--sp-20);
  border-bottom: 1px solid var(--c-lx-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.hl-table thead th {
  background: var(--c-surface-50);
  font-family: var(--font-heading);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.hl-table tbody th {
  width: 22%;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}
.hl-table tbody tr:last-child th,
.hl-table tbody tr:last-child td { border-bottom: 0; }
.hl-src {
  display: block;
  margin-top: var(--sp-8);
  font-size: var(--fs-13);
  color: var(--c-ink-500);
}
@media (max-width: 680px) {
  .hl-table thead { display: none; }
  .hl-table,
  .hl-table tbody,
  .hl-table tr,
  .hl-table th,
  .hl-table td { display: block; width: auto; }
  .hl-table tr { padding: var(--sp-16); border-bottom: 1px solid var(--c-lx-line); }
  .hl-table tbody tr:last-child { border-bottom: 0; }
  .hl-table th,
  .hl-table td { padding: 0; border: 0; }
  .hl-table tbody th { width: auto; margin-bottom: var(--sp-8); font-size: var(--fs-16); }
  .hl-table td + td { margin-top: var(--sp-10); }
  .hl-table td[data-l]::before {
    content: attr(data-l);
    display: block;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-ink-500);
  }
}

/* ---------- Insight + options ---------- */
.hl-insight {
  margin-top: var(--sp-24);
  padding: var(--sp-16) var(--sp-20);
  border-left: 3px solid var(--c-brand-500);
  border-radius: 0 var(--r-12) var(--r-12) 0;
  background: var(--c-brand-50);
  font-size: var(--fs-15);
}
.hl-insight p { margin: 0; }
.hl-insight__k {
  margin-bottom: var(--sp-4) !important;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}
.hl-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lx-grid-gap);
}
.hl-options li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-16);
  border-top: 2px solid var(--c-navy-900);
}
.hl-options strong { font-family: var(--font-heading); color: var(--c-navy-900); }
.hl-options span { color: var(--c-ink-500); font-size: var(--fs-15); }
.hl-options a { font-weight: var(--fw-semibold); }

/* ---------- Architecture diagram (HTML, never cropped) ---------- */
.hl-arch {
  margin: 0;
  padding: var(--lx-inset-pad-x);
  border-radius: var(--lx-radius);
  background: var(--c-surface-0);
  border: 1px solid var(--c-lx-line);
  box-shadow: var(--shadow-lx-2);
}
.hl-arch__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sp-32) minmax(0, 1fr) var(--sp-32) minmax(0, 1fr) var(--sp-32) minmax(0, 1fr);
  align-items: stretch;
}
.hl-node {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-20);
  border: 1px solid var(--c-lx-line);
  border-radius: var(--r-12);
  background: var(--c-surface-50);
  color: var(--c-navy-900);
}
.hl-node strong { font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.hl-node__k {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.hl-node__v { font-size: var(--fs-14); color: var(--c-ink-500); }
.hl-node--dark { background: var(--c-navy-900); border-color: var(--c-navy-900); color: var(--c-surface-0); }
.hl-node--dark .hl-node__k { color: var(--c-brand-400); }
.hl-node--dark .hl-node__v { color: var(--c-lx-on-dark-muted); }
.hl-node--accent { background: var(--c-brand-50); border-color: var(--c-brand-500); }
.hl-node--accent .hl-node__k { color: var(--c-brand-600); }
.hl-arrow {
  position: relative;
  align-self: center;
  height: 2px;
  background: var(--c-brand-500);
}
.hl-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  border: var(--sp-4) solid transparent;
  border-left: var(--sp-8) solid var(--c-brand-500);
  border-right: 0;
  transform: translateY(-50%);
}
.hl-arch__side {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-20);
  padding-top: var(--sp-20);
  border-top: 1px dashed var(--c-lx-line);
}
.hl-arch__side span {
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--c-surface-100);
  font-size: var(--fs-13);
  color: var(--c-ink-700);
}
.hl-arch figcaption { margin-top: var(--sp-16); font-size: var(--fs-14); color: var(--c-ink-500); }
@media (max-width: 960px) {
  .hl-arch__flow { grid-template-columns: minmax(0, 1fr); }
  .hl-arrow { justify-self: center; width: 2px; height: var(--sp-24); }
  .hl-arrow::after {
    top: auto;
    bottom: 0;
    right: 50%;
    border: var(--sp-4) solid transparent;
    border-top: var(--sp-8) solid var(--c-brand-500);
    border-bottom: 0;
    transform: translateX(50%);
  }
}

/* ---------- Stays / rebuilt (editorial lists, not boxed cards) ---------- */
.hl-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lx-split-gap);
  margin-bottom: var(--lx-head-gap);
}
.hl-page .hl-list h3 {
  margin: 0 0 var(--sp-12);
  padding-top: var(--sp-16);
  border-top: 2px solid var(--c-navy-900);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-transform: none;
}
.hl-list--build h3 { border-top-color: var(--c-brand-500); }
.hl-list ul,
.hl-risks,
.hl-steps { margin: 0; padding: 0; list-style: none; }
.hl-list li,
.hl-steps li {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-8) var(--sp-30);
  border-bottom: 1px solid var(--c-lx-line);
}
.hl-list li::before,
.hl-risks li::before {
  content: "";
  position: absolute;
  left: var(--sp-4);
  top: calc(var(--sp-8) + .45em);
  width: var(--sp-12);
  height: var(--sp-8);
  border-left: 2px solid var(--c-brand-500);
  border-bottom: 2px solid var(--c-brand-500);
  transform: rotate(-45deg);
}
.hl-list--build li::before {
  width: var(--sp-10);
  height: var(--sp-10);
  border: 2px solid var(--c-navy-500);
  border-radius: var(--r-circle);
  transform: none;
}
.hl-designer { margin: 0; }

/* ---------- Phases + tall cards ---------- */
.hl-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lx-grid-gap);
  counter-reset: none;
}
.hl-phases li {
  display: flex;
  gap: var(--sp-16);
  padding-top: var(--sp-20);
  border-top: 1px solid var(--c-lx-line);
}
.hl-phases__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lx-chip);
  height: var(--lx-chip);
  border-radius: var(--r-circle);
  background: var(--c-brand-50);
  color: var(--c-brand-600);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
}
.hl-page .hl-phases h3 {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-heading);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-transform: none;
}
.hl-phases p { margin: 0; font-size: var(--fs-15); color: var(--c-ink-500); }
.hl-tall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lx-grid-gap);
  margin-top: var(--lx-head-gap);
}

/* ---------- Risks ---------- */
.hl-risks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--lx-split-gap);
}
.hl-risks li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-16) 0 var(--sp-16) var(--sp-30);
  border-bottom: 1px solid var(--c-lx-line);
}
.hl-risks li::before { top: calc(var(--sp-16) + .45em); }
.hl-risks strong { font-family: var(--font-heading); color: var(--c-navy-900); }
.hl-risks span { font-size: var(--fs-15); color: var(--c-ink-500); }

/* ---------- TCO formula ---------- */
.hl-formula {
  margin: 0 0 var(--sp-24);
  padding: var(--sp-24);
  overflow-x: auto;
  border-radius: var(--lx-radius-sm);
  border: 1px solid var(--c-lx-line);
  background: var(--c-surface-50);
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  line-height: var(--lh-loose);
  color: var(--c-navy-900);
  white-space: pre;
}

/* ---------- Experience + delivery ---------- */
.hl-delivery { margin: 0; }
.hl-steps { counter-reset: hlstep; margin-bottom: var(--sp-16); }
.hl-steps li { counter-increment: hlstep; }
.hl-steps li::before {
  content: counter(hlstep);
  position: absolute;
  left: 0;
  top: var(--sp-8);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-600);
}

/* ---------- FAQ ---------- */
.hl-faq-wrap { max-width: var(--measure-block); }
.hl-faq details {
  border-bottom: 1px solid var(--c-lx-line);
}
.hl-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-16);
  min-height: var(--btn-min-h);
  padding: var(--sp-16) 0;
  cursor: pointer;
  list-style: none;
}
.hl-faq summary::-webkit-details-marker { display: none; }
.hl-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: var(--fs-24);
  color: var(--c-brand-600);
}
.hl-faq details[open] summary::after { content: "\2212"; }
.hl-page .hl-faq h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-transform: none;
}
.hl-faq p { margin: 0 0 var(--sp-20); color: var(--c-ink-700); }

/* ---------- Final CTA: content-width inset card ---------- */
.hl-page .hl-cta { margin-block: var(--lx-section-y-tight) 0; }
.hl-cta__body {
  max-width: var(--lx-hero-copy-w);
  padding: var(--lx-hero-pad-y) var(--lx-hero-pad-x);
}
.hl-page .hl-cta h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--c-surface-0);
  text-transform: none;
}
.hl-cta__body p { margin: var(--sp-16) 0 0; font-size: var(--text-lead); color: var(--c-lx-on-dark-muted); }

/* ---------- Related + sources ---------- */
.hl-page .hl-related-h { margin-bottom: var(--sp-20); font-size: var(--text-h3); }
.hl-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-sources { border-top: 1px solid var(--c-lx-line); }
.hl-page .hl-sources__h {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-transform: none;
}
.hl-sources ol { margin: var(--sp-16) 0 0; padding-left: var(--sp-20); font-size: var(--fs-14); }
.hl-sources li { margin-bottom: var(--sp-4); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hl-options,
  .hl-phases,
  .hl-tall { grid-template-columns: minmax(0, 1fr); }
  .hl-tall .lx-card--tall { flex-direction: row; }
  .hl-tall .lx-card--tall .lx-card__media { flex: 0 0 40%; aspect-ratio: auto; }
}
@media (max-width: 900px) {
  .hl-page .hl-hero { margin-inline: var(--cm-card-inset); }
  .hl-hero__bg { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; }
  .hl-hero__bg::after { background: linear-gradient(180deg, var(--c-lx-scrim-soft) 40%, var(--c-lx-scrim-strong) 100%); }
  .hl-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: var(--sp-24) var(--lx-inset-pad-x) var(--sp-32);
  }
  .hl-page .hl-hero h1 { font-size: var(--text-h1); }
  .hl-two,
  .hl-risks,
  .hl-related { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hl-hero__cta { flex-direction: column; align-items: stretch; }
  .hl-hero__cta a { justify-content: center; }
  .hl-tall .lx-card--tall { flex-direction: column; }
  .hl-tall .lx-card--tall .lx-card__media { flex-basis: auto; aspect-ratio: 16 / 10; }
  .hl-answer { padding-left: var(--sp-16); }
  .hl-formula { font-size: var(--fs-13); padding: var(--sp-16); }
}