/* ---------------------------------------------------------------------------
   Public store skin — /shop, /product, /product/:id/:slug, /package/:id/:slug
   ---------------------------------------------------------------------------
   The four public store templates each ship their own inline <style> block
   (they predate a shared sheet). This file is linked immediately AFTER those
   blocks in every one of them, so it wins on equal specificity and holds the
   decisions that must stay identical across all four:

     1. The try-on call to action is the one coloured element on the page —
        violet, not the grey it used to share with every other button, so the
        primary action reads as the primary action.
     2. The closing CTA band and the site footer are white with black type.
        No grey panels.

   Anything page-specific still lives in that page's own <style>.

   The black/white values here are hardcoded on purpose rather than pointed at
   theme tokens (so `npm run theme:check` flags them): the requirement is literal
   white and black, and --ink/--surface flip in the dark theme, which would put
   light text back on a white band. The accent is a token (--store-accent) because
   that one IS meant to be re-skinnable.

   See docs/STORE_MARKETPLACE.md.
   ------------------------------------------------------------------------- */

:root {
  --store-accent: #6d28d9;
  --store-accent-2: #9333ea;
  --store-accent-ink: #ffffff;
  --store-accent-grad: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
}

/* ---- Primary action: "Try it on your AI character" ---------------------- */
.mp-btn.primary,
.sh-btn.primary {
  background: var(--store-accent-grad);
  color: var(--store-accent-ink);
  border: none;
}
/* The shop's "Try something on" CTA is now a <button> that opens the in-page
   Outfit Studio instead of navigating away — buttons don't inherit the anchor
   defaults the .sh-btn styles were written against. */
button.sh-btn {
  font: inherit;
  cursor: pointer;
}
.mp-btn.primary:hover,
.sh-btn.primary:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #7e22ce 100%);
  color: var(--store-accent-ink);
}
.mp-buy .mp-btn.primary {
  box-shadow: 0 12px 30px -14px rgba(109, 40, 217, 0.55);
}
.mp-buy .mp-btn.primary:hover {
  box-shadow: 0 18px 40px -16px rgba(109, 40, 217, 0.6);
}
.mp-btn.primary:focus-visible,
.sh-btn.primary:focus-visible {
  outline: 2px solid var(--store-accent);
  outline-offset: 3px;
}

/* ---- Closing CTA band: white ground, black type ------------------------- */
.mp-cta-band,
.sh-cta {
  background: #ffffff;
  border: 1px solid #000000;
}
.mp-cta-band h2,
.sh-cta h2,
.mp-cta-band p,
.sh-cta p {
  color: #000000;
}

/* Inside the band the accent would fight the black outline, so the primary
   button is solid black and the secondary is its outlined twin. */
.mp-cta-band .mp-btn.primary,
.sh-cta .sh-btn.primary {
  background: #000000;
  color: #ffffff;
}
.mp-cta-band .mp-btn.primary:hover,
.sh-cta .sh-btn.primary:hover {
  background: #1a1a1a;
  color: #ffffff;
}
.mp-cta-band .mp-btn.ghost,
.sh-cta .sh-btn.ghost {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}
.mp-cta-band .mp-btn.ghost:hover,
.sh-cta .sh-btn.ghost:hover {
  background: #f2f2f2;
  color: #000000;
}

/* ---- Category chips / filters: black-and-white, no grey fills ----------- */
.sh-chip.active {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.sh-sort.active {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}


/* ---------------------------------------------------------------------------
   The shared chrome: nav + footer, re-toned for the store journey (2026-08-16)
   ---------------------------------------------------------------------------
   `/`, `/shop`, `/store/:slug`, `/product`, `/package` and `/shopify-import`
   all run the "warm paper editorial" system (warm cream ground, near-black ink,
   Georgia display headings, hairline rules — see docs/STORE_MARKETPLACE.md).
   The nav and the footer are shared partials, so they arrived on those pages
   still wearing the app's white/dark chrome: a pure-white sticky bar above a
   paper page, and a black footer under it. Both are re-toned here rather than
   in the partials' own stylesheets, because this file is loaded ONLY by the
   paper pages — the dashboard and the rest of the marketing site keep their
   chrome untouched.

   ONE MARKER CLASS. Every page in the journey carries `store-paper` on <body>
   alongside its own namespace class (`sh-body`, `mp-body`, `mi-body`), and the
   rules below key off that alone. They used to list each namespace class
   separately, which meant adding a page to the journey was five near-identical
   selector lists to remember and one of them always got missed.

   The ground was #faf9f7 until 2026-08-16 and read as plain white next to the
   app chrome; it is now a warm cream, matched by the `--*-bg` token in each
   page's own block.

   `!important` on the footer is unavoidable: the partial carries Bootstrap's
   `.bg-dark`/`.text-light` utilities, which are themselves `!important`.
   ------------------------------------------------------------------------ */

/* Nav: same paper ground as the page, one hairline underneath it, and the
   page's own editorial voice — a Georgia wordmark, small letter-spaced links —
   so the bar belongs to the shop instead of sitting on top of it. */
body.store-paper .pnav {
  background: #f5f0e8;
  border-bottom: 1px solid rgba(20, 18, 16, 0.14);
  box-shadow: none;
}
body.store-paper .pnav .pnav-brand,
body.store-paper .pnav .pnav-brand-ink {
  color: #141210;
}
/* `.pnav-brand-soft` keeps its own muted colour from public-nav.css — only the
   typeface is restated here, so the two-tone wordmark survives. */
body.store-paper .pnav .pnav-brand {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.store-paper .pnav .pnav-flat,
body.store-paper .pnav .pnav-login {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.store-paper .pnav .pnav-flat { color: #141210; }
body.store-paper .pnav .pnav-login { color: #6b6259; }
/* No grey pill on hover — a hairline under the word is the editorial move. */
body.store-paper .pnav .pnav-flat:hover {
  background: transparent;
  box-shadow: inset 0 -1px 0 #141210;
}
body.store-paper .pnav .pnav-login:hover {
  background: transparent;
  color: #141210;
}
/* The nav CTA is a sign-up, not the try-on action, so it stays black — the
   accent belongs to "try it on" alone (see the `.primary` note at the top). */
body.store-paper .pnav .pnav-cta {
  background: #141210;
  color: #ffffff;
  border-radius: 999px;
}
/* The mobile panel drops out of the same bar, so it gets the same ground. */
body.store-paper .pnav .pnav-mobile {
  background: #f5f0e8;
  border-top: 1px solid rgba(20, 18, 16, 0.14);
}
body.store-paper .pnav .pnav-mobile-flat { color: #141210; }

/* Footer: paper, not black. A dark slab directly under a light editorial page
   reads as a different site. */
body.store-paper .site-footer {
  background: #f5f0e8 !important;
  color: #141210 !important;
  border-top: 1px solid rgba(20, 18, 16, 0.14);
}
body.store-paper .site-footer a,
body.store-paper .site-footer p,
body.store-paper .site-footer li,
body.store-paper .site-footer span {
  color: #6b6259 !important;
}
body.store-paper .site-footer a:hover {
  color: #141210 !important;
}
body.store-paper .site-footer h1,
body.store-paper .site-footer h2,
body.store-paper .site-footer h3,
body.store-paper .site-footer h4,
body.store-paper .site-footer h5,
body.store-paper .site-footer strong {
  color: #141210 !important;
}