/* Design tokens below were sampled directly from the live madeasme.com site
   (computed styles + Tailwind class names, via in-browser inspection) —
   not approximated. See DEVELOPER-INTEGRATION.md for the full list of what
   was matched and how. */
:root {
  --cream: #FAF9F8;        /* real site's body background (rgb(250,249,248)) */
  --ink: #1C1C1B;          /* real site's body text color (rgb(28,28,27)) */
  --navy: #1A1E49;         /* real site's "connect with stylist" accent box background */
  --navy-soft: #2C3066;
  --gold-1: #C9A959;       /* mid-point of the real gold gradient used on "AI Stylist" nav + logo */
  --gold-2: #E6C263;       /* real gold gradient start (from-[#E6C263]) */
  --gold-3: #908A75;       /* real gold gradient end (to-[#908A75]) */
  --gold-border: #E5D5A1;  /* real navy accent-box border color */
  --gold-cta: #D8CA9F;     /* real "Get Coupon Code" button background */
  --line: #E7E3DA;
  --line-dark: rgba(255,255,255,0.22);
  --muted: #8a8a86;
  --glass-card: #221E1E;   /* real AI Stylist hero card background (bg-[#221E1E3D], ~24% alpha) */

  --shadow-sm: 0 1px 2px rgba(28,24,20,0.04), 0 1px 3px rgba(28,24,20,0.06);
  --shadow-md: 0 4px 14px rgba(28,24,20,0.09), 0 2px 4px rgba(28,24,20,0.04);
  --shadow-lg: 0 16px 40px rgba(28,24,20,0.16), 0 4px 12px rgba(28,24,20,0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(28,24,20,0.15); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(28,24,20,0.28); }

/* ---------------- Motion primitives ---------------- */

@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.35); } 50% { box-shadow: 0 0 0 8px rgba(37,211,102,0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- Header (mirrors the live site's chrome) ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(28,24,20,0.03);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
}
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger span { display: block; width: 100%; height: 1.5px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.logo { display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.logo-mark { font-family: 'Roboto', sans-serif; font-size: 24px; font-style: italic; }
.logo-word { font-family: 'Roboto', sans-serif; font-size: 17px; letter-spacing: 0.06em; display: flex; flex-direction: column; line-height: 1.1; }
.logo-word small { font-family: 'Roboto', sans-serif; font-size: 8px; letter-spacing: 0.25em; color: var(--muted); font-weight: 500; }

.header-search { flex: 1; max-width: 420px; margin: 0 auto; position: relative; }
.header-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 38px 8px 16px;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
}
.header-search .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.6; }

.header-icons { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-icons .icon { position: relative; font-size: 16px; cursor: default; }
.header-icons .cart em {
  position: absolute; top: -7px; right: -9px;
  background: var(--navy); color: #fff;
  font-style: normal; font-size: 9px; font-weight: 600;
  border-radius: 999px; width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
}

.main-nav {
  display: flex;
  gap: 26px;
  justify-content: center;
  padding: 0 24px 12px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em; /* matches the real nav's tracking-[2px] */
  font-weight: 500;
  text-transform: uppercase;
}
.main-nav a { color: var(--ink); text-decoration: none; transition: color 0.15s ease; }
/* Real site renders the active "AI Stylist" nav item with a gold gradient
   (bg-gradient-to-r from-[#E6C263] to-[#908A75], bg-clip-text) — reproduced
   exactly here rather than a flat gold. */
.main-nav a.active {
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.main-nav a:hover { color: var(--navy); }

/* ---------------- Budget / mode banner ---------------- */

.mode-banner {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  background: #f1ede3;
  color: #6b5c33;
  transition: background 0.3s ease, color 0.3s ease;
  animation: fadeSlideDown 0.4s ease both;
}
.mode-banner.live { background: #eef1ea; color: #3c4a2e; }
.mode-banner.mock { background: #fbf1df; color: #8a5a12; }

/* ---------------- Layout shell ---------------- */

.stylist-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

/* ---------------- FAQ (static, zero AI cost, shown first) ---------------- */

/* Hidden per request — was adding clutter above the hero. The markup and
   window.FAQ_ITEMS data (index.html) stay in place so this is a one-line
   flip to bring back if wanted later; nothing else depends on it being
   visible. */
.faq-section { display: none; margin-bottom: 18px; }
.faq-heading { font-family: 'Roboto', sans-serif; font-size: 18px; margin: 0 0 10px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover { box-shadow: var(--shadow-md); border-color: #ded7c6; }
.faq-item.open { border-color: var(--gold-1); box-shadow: var(--shadow-md); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  padding: 13px 16px; font-size: 13.5px; font-weight: 500; color: var(--ink);
  text-align: left; font-family: inherit;
}
.faq-q:active { transform: scale(0.995); }
.faq-caret { color: var(--muted); font-size: 15px; transition: transform 0.25s var(--ease-out), color 0.2s ease; }
.faq-item.open .faq-caret { transform: rotate(45deg); color: var(--gold-1); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.28s var(--ease-out), padding 0.28s var(--ease-out), opacity 0.2s ease;
  font-size: 13px; line-height: 1.55; color: #55534d; padding: 0 16px; opacity: 0;
}
.faq-item.open .faq-a { max-height: 240px; padding: 0 16px 15px; opacity: 1; }

/* Compact variant reused inline after quick-search results — lives inside
   the dark stage background, so text needs the light-on-dark treatment. */
.faq-section.inline { margin: 16px 0 4px; animation: fadeSlideUp 0.4s var(--ease-out) both; }
.faq-section.inline .faq-heading { font-size: 15px; color: var(--cream); }

/* ---------------- The stage: full-bleed photographic backdrop ----------------
   The real /ai-stylist page is a full-bleed lifestyle photo (a warm,
   Indian-wedding-courtyard scene) with a dark, blurred glass card floating
   centered on top. We don't hotlink their actual photography, so this
   reproduces the same warm terracotta/sandstone mood with layered CSS
   gradients instead — same visual effect, no lifted image asset. Both the
   hero (landing) and the conversation (chat) live inside this one container
   so the backdrop never disappears once chat starts — only the hero's own
   card fades/collapses within it. */

.stylist-stage {
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,214,170,0.22) 0%, transparent 42%),
    radial-gradient(circle at 82% 75%, rgba(120,60,40,0.35) 0%, transparent 55%),
    linear-gradient(150deg, #c47a4f 0%, #9c4f30 32%, #5c2e22 68%, #2c1a16 100%);
  box-shadow: var(--shadow-lg);
}

/* ---------------- Hero / greeting card ----------------
   The dark translucent card matches the real site's exactly:
   bg-[#221E1E3D] (≈24% alpha) + backdrop-blur-lg + rounded-[20px] + border,
   floating over the photographic background above. */

/* Persistent heading — per request, stays visible above both the hero card
   and the conversation, on every screen (not just landing). Lives directly
   on the .stylist-stage backdrop, same as .hero used to before the title
   moved out of it. */
.stylist-heading {
  text-align: center;
  padding: 32px 16px 4px;
}
.stylist-heading .hero-title { margin: 0; }
.stylist-heading .greeting { margin: 6px 0 0; }

.hero {
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
  transition: opacity 0.45s var(--ease-out), max-height 0.45s var(--ease-out), min-height 0.45s var(--ease-out), padding 0.45s ease;
  max-height: 900px;
  overflow: hidden;
}
.hero.hero-collapsed {
  opacity: 0;
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.hero-card {
  width: 100%;
  max-width: 620px;
  text-align: center;
  color: var(--cream);
  background: rgba(34, 30, 30, 0.62); /* #221E1E at real-site opacity */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 40px 28px;
  box-shadow: var(--shadow-lg);
}

.hero-title {
  font-family: 'Roboto', sans-serif;
  font-size: 38px;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fadeSlideUp 0.55s var(--ease-out) both 0.05s;
}
.hero-title .thin { font-weight: 500; }
.hero-sub {
  font-family: 'Roboto', sans-serif;
  font-size: 11px; letter-spacing: 0.35em; color: var(--gold-2); margin-top: 4px; margin-bottom: 20px;
  animation: fadeSlideUp 0.55s var(--ease-out) both 0.15s;
}

.greeting {
  font-family: 'Roboto', sans-serif;
  font-size: 17px; font-weight: 400; margin: 0 0 24px; color: var(--cream);
  animation: fadeSlideUp 0.55s var(--ease-out) both 0.25s;
}

.chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px;
  animation: fadeSlideUp 0.55s var(--ease-out) both 0.35s;
}
.chip {
  font-family: 'Roboto', sans-serif;
  font-size: 13.5px;
  color: var(--cream);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.chip:hover { transform: translateY(-2px) scale(1.03); background: rgba(201,169,89,0.16); border-color: var(--gold-1); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.chip:active { transform: translateY(0) scale(0.97); }


.field-label { display: block; text-align: left; font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--cream); margin-bottom: 8px; }

.hero-card .composer { animation: fadeSlideUp 0.55s var(--ease-out) both 0.45s; }
.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.composer:focus-within { border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(201,169,89,0.22); }
.composer input { flex: 1; background: transparent; border: none; outline: none; color: var(--cream); font-size: 15px; padding: 10px 0; }
.composer input::placeholder { color: rgba(250,249,248,0.55); }
.send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(26,30,73,0.35);
  transition: background 0.15s ease, transform 0.15s var(--ease-out), box-shadow 0.15s ease;
}
.send-btn:hover { background: var(--navy-soft); transform: scale(1.07); }
.send-btn:active { transform: scale(0.93); }

/* ---------------- Conversation ---------------- */

.conversation { padding: 26px 22px 30px; opacity: 0; transition: opacity 0.4s ease; min-height: 320px; }
.conversation.conversation-visible { opacity: 1; }
.messages { display: flex; flex-direction: column; gap: 16px; }
/* Visible "Start Over" control — a real, one-click reset of the whole
   experience (server-side chat memory + every client-side flag) back to the
   landing hero, instead of the old hidden "type restart" text trick that
   only reset the AI's own memory and only worked once you were already
   mid-chat. See app.js resetToLanding(). */
.conversation-bar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.start-over-btn {
  font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(250,249,248,0.75); background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-dark); border-radius: 999px; padding: 6px 12px;
  cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.start-over-btn:hover { background: rgba(201,169,89,0.16); border-color: var(--gold-1); color: var(--cream); }

.msg {
  max-width: 78%; padding: 13px 17px; border-radius: 16px; font-size: 14.5px; line-height: 1.5;
  animation: fadeSlideUp 0.35s var(--ease-out) both;
}
.msg.user {
  align-self: flex-end; background: var(--navy-soft); color: var(--cream); border-bottom-right-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.msg.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.msg.assistant .tag { display: block; font-size: 10.5px; letter-spacing: 0.1em; color: var(--gold-1); margin-bottom: 6px; text-transform: uppercase; font-weight: 600; }
.msg.typing { padding: 15px 18px; }

.typing-dots { display: inline-flex; align-items: center; gap: 4px; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typingBounce 1.1s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

.products {
  align-self: flex-start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
}
.card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-sm);
  animation: fadeSlideUp 0.4s var(--ease-out) both;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.products .card:nth-child(1) { animation-delay: 0.04s; }
.products .card:nth-child(2) { animation-delay: 0.1s; }
.products .card:nth-child(3) { animation-delay: 0.16s; }
.products .card:nth-child(4) { animation-delay: 0.22s; }
.card-img {
  position: relative;
  aspect-ratio: 2 / 3; /* matches the real site's rendered product-image ratio exactly (measured: 325x488px on a 384x480/4:5-source photo) — using aspect-ratio instead of a fixed pixel height keeps this exact proportion at every card width, mobile included, rather than needing a separate mobile override */
  height: auto;
  overflow: hidden;
  background: linear-gradient(135deg, #efe6d4, #d9c7a3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif;
  color: #8a744a; font-size: 13px; text-align: center; padding: 10px;
  transition: transform 0.35s ease;
}
/* Fitment fix: .card-img has padding:10px for the no-photo text fallback
   above, but that padding was also shrinking every REAL photo by 10px on
   each side, leaving a visible cream matting border around it. Positioning
   the <img> absolutely fills the box edge-to-edge regardless of the
   parent's padding, while leaving the fallback text case untouched. */
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }
.card:hover .card-img { transform: scale(1.04); }
.card-wishlist { position: absolute; top: 8px; right: 10px; font-size: 15px; color: #fff; opacity: 0.85; transition: transform 0.15s ease, opacity 0.15s ease; z-index: 1; }
.card-wishlist:hover { transform: scale(1.15); opacity: 1; }
/* Real merchandising badges (Ready to ship / Best seller) — from the
   owner's exports via scripts/enrich-catalog.js, shown top-left of the
   photo so they never collide with the wishlist heart on the right. */
.card-badges { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.card-badge {
  font-family: 'Roboto', sans-serif; font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; color: #fff;
  background: rgba(28, 28, 27, 0.72); backdrop-filter: blur(4px);
  white-space: nowrap;
}
.card-badge-ships { background: rgba(44, 48, 102, 0.78); }
.card-badge-best { background: rgba(201, 169, 89, 0.85); color: var(--ink); }
.card-body { padding: 12px 14px 16px; }
.card-designer { font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.card-name { font-size: 13.5px; font-weight: 500; margin: 3px 0 6px; }
.card-price { font-size: 14px; font-weight: 700; color: var(--ink); }
.card-tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.card-tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #f4efe4; color: #8a744a; }
.card-delivery { margin-top: 8px; font-size: 10.5px; color: var(--muted); }
/* card-btn renders as a real <a href> for the ~5,300 items with a real
   product link (scripts/enrich-catalog.js / import-catalog.js), and as a
   <button> only for the few without one. An <a> defaults to display:inline
   with a text-decoration underline — inline elements ignore width:100% and
   don't respect margin-top as block spacing, so without an explicit
   display here the link rendered inline right where the text flow left off,
   overlapping the "Delivery: ..." line above it (the "view price is
   overlapping" / strikethrough-looking bug reported against the live
   catalog). display:block + no-underline fixes both the <a> and <button>
   cases identically. box-sizing:border-box keeps width:100%+padding from
   overflowing the card in either case. */
.card-btn {
  display: block; box-sizing: border-box; text-decoration: none; text-align: center;
  margin-top: 10px; width: 100%; padding: 9px;
  border-radius: 10px;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: 11.5px; letter-spacing: 0.04em; font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.card-btn:hover { background: var(--navy); color: #fff; }
.card-btn:active { transform: scale(0.97); }

/* ---------------- Quick-picks result block + tag chips ----------------
   Replaces the old 3-question qualifying flow (gender -> budget -> delivery
   asked before any result appeared). Now results show immediately on chip
   tap. The gender/budget/delivery refine PILLS that used to sit under
   results were removed per feedback (still read as "more questions"). The
   narrow-by-tag chip row that briefly replaced them (Festive & Parties,
   Mehendi Hues, Trousseau, Brunch, Best Sellers) has since also been removed
   per request — results now re-render in place only when the reply/product
   grid/presell note change, not via any tag row. */

.quick-results-wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; }

/* ---------------- Qualifying-flow quick replies ---------------- */

.quick-replies {
  align-self: flex-start; display: flex; flex-wrap: wrap; gap: 8px; max-width: 92%;
  animation: fadeSlideUp 0.35s var(--ease-out) both;
}
.quick-reply {
  font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--navy); background: #fff; border: 1px solid var(--navy);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out), background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.quick-reply:hover:not(:disabled) { background: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-reply:active:not(:disabled) { transform: translateY(0) scale(0.96); }
.quick-reply:disabled { opacity: 0.4; cursor: default; box-shadow: none; }

/* ---------------- Pre-sell / idle-nudge note ---------------- */

.msg.note {
  align-self: flex-start; background: #f4efe4; border: 1px solid var(--gold-2);
  color: #6b5c33; font-size: 13.5px; max-width: 88%; box-shadow: var(--shadow-sm);
}

/* ---------------- Lead capture card ("Surprise me") ---------------- */

.lead-card {
  align-self: flex-start; width: 100%; max-width: 360px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow-md);
  animation: fadeSlideUp 0.4s var(--ease-out) both;
}
.lead-card h4 { margin: 0 0 4px; font-family: 'Roboto', sans-serif; font-size: 17px; }
.lead-card p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.lead-card label { display: block; font-size: 11.5px; color: var(--muted); margin: 10px 0 4px; }
.lead-card input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font-size: 13.5px; font-family: inherit; color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lead-card input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,30,73,0.1); }
.lead-card .lead-submit {
  margin-top: 16px; width: 100%; padding: 11px; border: none; border-radius: 10px;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
  letter-spacing: 0.03em; cursor: pointer;
  box-shadow: 0 3px 10px rgba(26,30,73,0.25);
  transition: background 0.18s ease, transform 0.15s var(--ease-out), box-shadow 0.18s ease, opacity 0.15s ease;
}
.lead-card .lead-submit:hover:not(:disabled) { background: var(--navy-soft); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.lead-card .lead-submit:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.lead-card .lead-submit:disabled { opacity: 0.65; cursor: default; transform: none; }
.lead-card .lead-error { color: #b3402a; font-size: 12px; margin-top: 8px; display: none; }

/* ---------------- WhatsApp expert-stylist CTA ---------------- */

.whatsapp-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #25D366; color: #1f7a44;
  border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 600;
  text-decoration: none; margin-top: 2px;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s var(--ease-out), box-shadow 0.18s ease;
  animation: fadeSlideUp 0.4s var(--ease-out) both, ctaPulse 1.6s ease-in-out 0.5s 2;
}
.whatsapp-cta:hover { background: #25D366; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.whatsapp-cta:active { transform: translateY(0) scale(0.97); }

/* ---------------- Bottom composer (chat-app style) ---------------- */

.composer-bottom {
  position: sticky;
  bottom: 0;
  z-index: 20;
  max-width: 980px;
  margin: 0 auto;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(28,24,20,0.05);
  animation: fadeSlideUp 0.4s var(--ease-out) both;
}
.composer-bottom[hidden] { display: none; }
.composer-bottom .composer { background: #fff; border: 2px solid var(--navy); box-shadow: 0 1px 6px rgba(26,30,73,0.12); }
.composer-bottom .composer:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,30,73,0.18); }
.composer-bottom input { color: var(--ink); }
.composer-bottom input::placeholder { color: #999; }
.composer-bottom .send-btn { box-shadow: 0 2px 8px rgba(26,30,73,0.25); }
body.chatting .stylist-shell { padding-bottom: 8px; }

.foot { text-align: center; font-size: 11.5px; color: #999; padding: 16px; }

/* ---------------- Mobile / Msite ---------------- */

@media (max-width: 680px) {
  .header-row { padding: 12px 16px; gap: 12px; }
  .hamburger { display: flex; }
  .header-search { display: none; }
  .logo-word { font-size: 14px; }
  .header-icons .icon:not(.cart) { display: none; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 20px 14px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--line); }

  .stylist-shell { padding: 16px 12px 24px; }
  .stylist-stage { border-radius: 18px; }
  .hero { min-height: 460px; padding: 18px 10px; }
  .hero-card { padding: 24px 18px; border-radius: 16px; }
  .hero-title { font-size: 26px; }
  .greeting { font-size: 14.5px; }
  .chips { gap: 8px; }
  .chip { font-size: 12.5px; padding: 8px 14px; }

  .conversation { padding: 18px 14px 24px; }
  .msg { max-width: 90%; font-size: 14px; }
  .products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-img { font-size: 11px; } /* aspect-ratio (set above) already keeps the 2:3 proportion correct at mobile widths — no fixed height override needed */

  .composer-bottom { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
}