/* =============================================================================
   ecommerce-ai-agents.css — Ecommerce AI Agents (platform-neutral umbrella)
   (template-native.php, page-body/ecommerce-ai-agents.php)
   Scoped to .ecom-hero and .ecom-* helpers; nothing leaks. Tokens only.
   Most of the page is built from shared .ns-* components; these cover the few
   layouts the system has no canonical class for.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Hero — re-center the typographic hero (.premium-main left-aligns .ns-hero)
   --------------------------------------------------------------------------- */
.premium-main .ecom-hero{ text-align:center; }
.premium-main .ecom-hero .ns-hero__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); }
.premium-main .ecom-hero .ns-eyebrow{ justify-content:center; }

/* Hero assurance row */
.ecom-assure{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:var(--space-3) var(--space-5);
  font-family:var(--font-mono); font-size:var(--fs-caption,12px); color:var(--ink-60); }
.ecom-assure li{ display:inline-flex; align-items:center; gap:var(--space-2); }
.ecom-check{ color:var(--periwinkle); font-weight:700; }

/* ---------------------------------------------------------------------------
   Hero chat mockup — a small framed conversation, no external asset (fast LCP)
   --------------------------------------------------------------------------- */
.premium-main .ecom-chat{ max-width:560px; margin:var(--space-7) auto 0; background:var(--bg-elev);
  text-align:left; border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.ecom-chat__bar{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line-2); }
.ecom-chat__dot{ width:9px; height:9px; border-radius:50%; background:var(--line-3); }
.ecom-chat__label{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-40); }
.ecom-chat__body{ padding:var(--space-5); display:grid; gap:var(--space-3); }
.ecom-msg{ max-width:82%; padding:var(--space-3) var(--space-4); font-size:14px; line-height:var(--lh-normal); }
.ecom-msg--in{ justify-self:start; background:var(--bg-elev-2); border:1px solid var(--line-2);
  border-radius:var(--r-md) var(--r-md) var(--r-md) 4px; color:var(--ink-80); }
.ecom-msg--out{ justify-self:end; background:var(--grad-brand); color:#fff;
  border-radius:var(--r-md) var(--r-md) 4px var(--r-md); box-shadow:var(--shadow-md); }

/* ---------------------------------------------------------------------------
   Compact lists inside cards (parity with the sibling ecommerce pages)
   --------------------------------------------------------------------------- */
.premium-main .ns-card .ns-list--compact{ margin:var(--space-4) 0 0; gap:var(--space-2); max-width:none; }
.premium-main .ns-list--compact li{ color:var(--ink-60); font-size:14px; }

/* ---------------------------------------------------------------------------
   Real-question grid (the challenge section) — two columns
   --------------------------------------------------------------------------- */
.premium-main .ns-list--qs{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3) var(--space-6);
  max-width:none; margin-top:var(--space-6); }
.premium-main .ns-list--qs li{ padding-left:1.9em; color:var(--ink); font-weight:500; }
.premium-main .ns-list--qs li::before{ content:"\201C"; color:var(--periwinkle); font-weight:700;
  font-size:1.4em; line-height:1; top:.05em; }
@media (max-width:600px){ .premium-main .ns-list--qs{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   Vertical-guide link list — two columns, same rhythm as the question grid
   --------------------------------------------------------------------------- */
.premium-main .ecom-links{ display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--space-3) var(--space-6); max-width:none; margin-top:var(--space-6); }
.premium-main .ecom-links li{ color:var(--ink-60); }
.premium-main .ecom-links a{ color:var(--ink); font-weight:600; }
@media (max-width:600px){ .premium-main .ecom-links{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   Platform panels — two equal, self-contained cards (Shopify / WooCommerce).
   Deliberately NOT a comparison grid: the reader has already picked a platform,
   so each panel stands on its own strengths rather than against the other.
   --------------------------------------------------------------------------- */
.ecom-shared-label{ margin:var(--space-6) 0 var(--space-3); text-align:center;
  font-family:var(--font-mono); font-size:var(--fs-caption,12px); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-40); }
.premium-main .ecom-shared{ max-width:74ch; margin-inline:auto; }

.premium-main .ecom-platforms{ display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--space-5); margin-top:var(--space-7); }
@media (max-width:900px){ .premium-main .ecom-platforms{ grid-template-columns:1fr; } }

/* Card copy is left-aligned, so keep its CTA left too (the page-level rule
   centers bare .ns-btnrow, which reads wrong inside a text card). */
.premium-main .ecom-plat .ns-btnrow{ justify-content:flex-start; margin-top:var(--space-5); }
.premium-main .ecom-plat .ns-card__body > p:first-child{ color:var(--ink-80); }

/* Visible freshness signal under the quick-answer block (AEO/GEO date lever) */
.premium-main .ecom-updated{ margin-top:var(--space-5); font-family:var(--font-mono);
  font-size:var(--fs-caption,12px); color:var(--ink-60); letter-spacing:.02em; }

/* Section heads on this page are centered, so center the trailing CTAs to match
   (the bare .ns-btnrow defaults to left-aligned). */
.premium-main .ns-btnrow{ display:flex; flex-wrap:wrap; gap:var(--space-3);
  justify-content:center; align-items:center; }