/* =============================================================================
   shopify-bike.css — AI Chatbot for Shopify Bike Stores
   (template-native.php, page-body/ai-chatbot-for-shopify-bike-store.php)
   Scoped to .bike-hero and .bike-* 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 .bike-hero{ text-align:center; }
.premium-main .bike-hero .ns-hero__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); }
.premium-main .bike-hero .ns-eyebrow{ justify-content:center; }

/* Hero assurance row */
.bike-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); }
.bike-assure li{ display:inline-flex; align-items:center; gap:var(--space-2); }
.bike-check{ color:var(--periwinkle); font-weight:700; }

/* ---------------------------------------------------------------------------
   Hero chat mockup — a small framed conversation, no external asset (fast LCP)
   --------------------------------------------------------------------------- */
.premium-main .bike-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; }
.bike-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); }
.bike-chat__dot{ width:9px; height:9px; border-radius:50%; background:var(--line-3); }
.bike-chat__label{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-40); }
.bike-chat__body{ padding:var(--space-5); display:grid; gap:var(--space-3); }
.bike-msg{ max-width:82%; padding:var(--space-3) var(--space-4); font-size:14px; line-height:var(--lh-normal); }
.bike-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); }
.bike-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 the AI-shop-assistant cards
   --------------------------------------------------------------------------- */
.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; }

/* ---------------------------------------------------------------------------
   "Confidence to buy" — two-column grid of real shopper questions
   --------------------------------------------------------------------------- */
.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; } }

.bike-note{ margin-top:var(--space-5); color:var(--ink-60); max-width:74ch; }


/* Visible freshness signal under the quick-answer block (AEO/GEO date lever) */
.premium-main .bike-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; }