/* ============================================================
   Pawtrait — Stitch visual layer (Kinfolk & Canine Editorial)
   Loaded AFTER pawtrait.css / pawtrait-2.css / pawtrait-3.css.
   Strategy: "reskin, not rebuild" — every legacy component keeps
   its class names & DOM structure; this layer swaps the design
   tokens (:root) plus a handful of component flourishes taken
   from the Stitch prototype (code.html + DESIGN.md).

   Nothing here touches JS, hooks, ids, or API behaviour.
   ============================================================ */

/* ---------- 1. Design tokens (Stitch) ---------- */
:root{
  /* surfaces */
  --bg:#fdf9f2;                /* Stitch: surface / background */
  --bg-2:#f1ede6;             /* surface-container */
  --sand:#ebe8e1;             /* surface-container-high */
  --surface:#ffffff;          /* surface-container-lowest */
  /* ink */
  --ink:#1c1c18;              /* on-surface */
  --ink-soft:#4b4640;        /* on-surface-variant */
  --muted:#7c766f;           /* outline */
  --line:#e6e2db;            /* surface-variant — hairline frames */
  /* accents */
  --terracotta:#87503a;      /* Stitch secondary — the brand accent */
  --terracotta-deep:#79452f; /* on-secondary-container */
  --sage:#998d7e;            /* warm neutral (Stitch: on-tertiary-container) */
  --sage-light:#f1ede6;
  --gold:#a08a6d;            /* muted gilding, used sparingly */
  --gold-soft:#efe0d0;      /* tertiary-fixed */
  --navy:#31302c;            /* inverse-surface — footer / newsletter */
  /* elevation (Stitch: shadow-[0_12px_36px_rgba(20,19,17,0.06)]) */
  --shadow:0 12px 36px rgba(20,19,17,.06);
  --shadow-lg:0 22px 52px rgba(20,19,17,.11);
  /* corners: Stitch cards use rounded-lg (4px) / frames rounded-xl (8px) */
  --radius:5px;
  --radius-lg:10px;
  /* type: body switches Inter -> Manrope (loaded in page <head>) */
  --font-sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --body:var(--font-sans);
  --sans:var(--font-sans);
}

/* ---------- 2. Base ---------- */
body{background:var(--bg)}
::selection{background:var(--terracotta);color:#fff}
h1,h2,h3,.serif,.fancy{text-wrap:balance}

/* ---------- 3. Header (Stitch: fixed, surface/90, blur, whisper shadow) ---------- */
.header{
  background:rgba(253,249,242,.90);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,226,219,.6);
  box-shadow:0 1px 8px rgba(20,19,17,.03);
}
.brand .mark{background:var(--terracotta);border-radius:8px}   /* rounded square, not circle */
.brand-name{font-weight:600}
.main-nav > a, .nav-drop > a{
  text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:600;
  color:var(--ink-soft);border-radius:6px;padding:9px 12px;
}
.main-nav > a:hover, .nav-drop > a:hover{color:var(--ink);background:transparent}
.cart-badge{background:var(--terracotta);border-radius:999px}

/* ---------- 4. Buttons & chips (Stitch: soft radius + tracked uppercase) ---------- */
.btn{border-radius:6px;letter-spacing:.05em}
.btn-cta{background:var(--navy);color:#fdf9f2}
.btn-cta:hover{background:var(--terracotta)}
.btn-primary{background:var(--terracotta);color:#fff}
.btn-primary:hover{background:var(--terracotta-deep)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--navy);border-color:var(--navy);color:#fdf9f2}
.btn-lg{padding:16px 30px}
.ml-cta{background:var(--navy);border-radius:6px;letter-spacing:.04em}
.ml-card:hover .ml-cta{background:var(--terracotta)}
.chip,.ps-chip,.var-chip{border-radius:6px}
.chip.active,.chip.on,.ps-chip.on,.var-chip.on{background:var(--navy);border-color:var(--navy);color:#fdf9f2}

/* ---------- 5. Cards & media frames (Stitch: hairline + lifted surface) ---------- */
.story-card,.product-card,.ml-card,.why-item,.belief,
.confirm-card,.order-box,.form-card,.pay-qr,.ps-aside,.ps-done{
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.ml-card:hover,.story-card:hover,.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.ml-media,.pdp-main{background:var(--sand)}
.hero-media img{
  border-radius:8px;
  box-shadow:0 12px 36px rgba(20,19,17,.08),0 0 0 1px rgba(230,226,219,.9);
}
.pdp-main{border-radius:var(--radius-lg)}

/* ---------- 6. Section bands (Stitch alternates surface / container-low) ---------- */
.section.alt{background:#f7f3ec}
.section.cream{background:var(--bg)}
.page-hero{background:#f7f3ec}
.page-hero .inner{padding:46px 0}
.quote-band{background:var(--navy);color:#f4f0e9}
.quote-band .q{color:#fdf9f2}

/* ---------- 7. Micro labels (Stitch: tracked, secondary accent) ---------- */
.kicker,.eyebrow,.ml-cat,.pc-cat,.story-body .tag{color:var(--terracotta);letter-spacing:.12em}
.tag-custom,.ml-flag{background:rgba(255,255,255,.92);border-color:var(--line);color:var(--terracotta-deep)}
.note-callout{background:var(--gold-soft);border-left:3px solid var(--gold-soft)}

/* ---------- 8. Footer / newsletter (Stitch inverse surface) ---------- */
.footer,.newsletter{background:var(--navy)}
.footer a{color:#c9c3b8}
.footer a:hover{color:#fdf9f2}
.footer h4,.footer-grid-5 h4,.footer .f-col h4,.footer-legal h4{color:#f4f0e9}
.footer-bottom{color:#8f887c}
.entity-note{color:#8f887c}
.news-form input,.newsletter input{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#f4f0e9;
}
.news-form input::placeholder,.newsletter input::placeholder{color:rgba(244,240,233,.45)}

/* ---------- 9. Status / trust accents ---------- */
.status-step.done .dot{background:var(--terracotta);box-shadow:0 0 0 2px var(--terracotta)}
.tl-step.done{border-left-color:var(--terracotta)}
.tl-step.done .tl-dot{background:var(--terracotta)}
.tl-step.current{border-left-color:var(--terracotta)}
.tl-step.current .tl-dot{background:var(--terracotta);box-shadow:0 0 0 3px rgba(135,80,58,.18)}
.verified,.pdp-assure-item svg,.tips-list svg,.ts-item .ic{color:var(--terracotta)}
.ts-item .ic,.why-item .ic,.step .ic{background:var(--gold-soft);color:var(--terracotta-deep);border-radius:8px}

/* ---------- 10. Product detail (PDP) ---------- */
.pdp-thumb{border-radius:6px}
.pdp-thumb.active{border-color:var(--terracotta)}
.pdp-emotive,.pd-info .emotional{color:var(--terracotta)}
.pd-extra .px,.pd-extra .px b{background:#f7f3ec;border-color:var(--line);border-radius:6px}
.pd-extra .px{background:#fff}

/* ---------- 11. Admin & toasts stay functional (dark chrome, neutral) ---------- */
.adm .top{background:#1c1c18}
.toast{background:#1c1c18}

/* ---------- 12. Announcement bar ---------- */
.announce{background:#f7f3ec;border-bottom:1px solid var(--line)}
.announce-item svg{color:var(--terracotta)}

/* ---------- 13. WhatsApp FAB: keep brand green (functional affordance) ---------- */
/* intentionally untouched */