/* =============================================================================
   shopify-clothing.css — AI Chatbot for Shopify Clothing Stores
   (template-native.php, page-body/ai-chatbot-for-shopify-clothing-store.php)
   Scoped to .shc-hero and .shc-* 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 (the hero chat mockup, the
   hero assurance row, the questions grid, and compact in-card lists).
   ============================================================================= */

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

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

/* ---------------------------------------------------------------------------
   Hero media — muted autoplay product video, framed by .ns-hero__media
   --------------------------------------------------------------------------- */
.premium-main .shc-hero__media{ max-width:760px; margin:var(--space-7) auto 0; background:var(--bg-elev); }
/* Lock the hero video to 16:9 on every viewport (incl. mobile) and reserve the
   box before load so there is no CLS; cover crops if the source ratio drifts. */
.premium-main .shc-hero__media video{ width:100%; height:auto; display:block; aspect-ratio:16 / 9; object-fit:cover; }

/* ---------------------------------------------------------------------------
   Compact lists inside the AI-personal-shopper 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; }

/* ---------------------------------------------------------------------------
   "Common questions handled" — 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; } }

.shc-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 .shc-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, which left a button hanging off
   the bottom-left of every centered section). */
.premium-main .ns-btnrow{ display:flex; flex-wrap:wrap; gap:var(--space-3);
  justify-content:center; align-items:center; }

/* Benson proof video poster is set inline on the button (RUCSS strips remote
   url() backgrounds from extracted "used CSS"; an inline style survives it). */