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

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

/* ---------------------------------------------------------------------------
   Hero media — muted autoplay product video, framed by .ns-hero__media.
   The 16:9 lock + sizing live INLINE on the <video> (RUCSS strips the
   stylesheet rule on prod); these are the cosmetic frame fallbacks.
   --------------------------------------------------------------------------- */
.premium-main .fur-hero__media{ max-width:760px; margin:var(--space-7) auto 0; background:var(--bg-elev); }
.premium-main .fur-hero__media video{ width:100%; height:auto; display:block; aspect-ratio:16 / 9; object-fit:cover; }

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

.fur-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 .fur-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; }