/* =============================================================
   Four Performance — brand theme
   Loaded AFTER style.css. The base sheet is token-driven, so
   remapping its custom properties re-skins every shared page
   (cart, checkout, account, blog) in one shot. Below that are
   the components unique to a kit-first store.
   ============================================================= */

:root {
  /* ---- Brand palette ---- */
  --fp-purple:        #372480;   /* primary — buttons, headings, dark bands */
  --fp-purple-deep:   #241858;
  --fp-violet:        #7052F2;   /* bright accent — announce bar, links */
  --fp-violet-soft:   #8F79F5;
  --fp-lavender:      #BFB1F9;   /* alternating headline lines */
  --fp-lavender-pale: #EDE9FE;
  --fp-ink:           #0E0816;
  --fp-grey:          #F5F5F5;   /* section background */
  --fp-grey-2:        #E7E5EC;
  --fp-lime:          #C9F24E;   /* savings / per-vial pill */
  --fp-green:         #03A16C;
  --fp-red:           #DF2121;

  /* ---- Remap the base design tokens ---- */
  --c-paper:       #FFFFFF;
  --c-ink:         var(--fp-ink);
  --c-ink-2:       var(--fp-purple);
  --c-navy:        var(--fp-purple);
  --c-teal:        var(--fp-purple);
  --c-teal-light:  var(--fp-violet);
  --c-teal-bright: var(--fp-violet-soft);
  --c-muted:       #5C5470;
  --c-line:        rgba(14, 8, 22, 0.10);
  --c-line-strong: rgba(14, 8, 22, 0.18);

  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    var(--fp-grey);
  --surface-soft: var(--fp-grey);

  --font-sans:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Clash Display", "Public Sans", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;

  /* Kits4Less runs tight radii — 4px controls, 8px cards */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(14, 8, 22, 0.06);
  --shadow-md: 0 8px 26px -10px rgba(55, 36, 128, 0.18), 0 2px 6px rgba(14, 8, 22, 0.04);
  --shadow-lg: 0 30px 60px -22px rgba(55, 36, 128, 0.28), 0 8px 20px -12px rgba(14, 8, 22, 0.08);

  --container: 1280px;
}

/* -------------------------------------------------------------
   Type
   ------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--fp-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display, .nav-wordmark-main {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.02;
  color: var(--fp-purple);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-violet);
}

.muted { color: var(--c-muted); }

/* -------------------------------------------------------------
   Buttons — square-ish, Clash Display, 0.5px tracking
   ------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--r-sm);
  padding: 11px 22px;
  font-size: 1rem;
  border: 1.5px solid transparent;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn-lg { padding: 15px 30px; font-size: 1.12rem; }
.btn-sm { padding: 8px 15px; font-size: 0.88rem; }

.btn-primary { background: var(--fp-purple); color: #fff; border-color: var(--fp-purple); }
.btn-primary:hover { background: var(--fp-purple-deep); border-color: var(--fp-purple-deep); transform: translateY(-1px); }

.btn-secondary { background: #fff; color: var(--fp-purple); border-color: var(--fp-purple); }
.btn-secondary:hover { background: var(--fp-purple); color: #fff; }

.btn-teal { background: var(--fp-violet); color: #fff; border-color: var(--fp-violet); }
.btn-teal:hover { background: var(--fp-purple); border-color: var(--fp-purple); }

.btn-ghost { background: transparent; color: var(--fp-purple); border-color: var(--c-line-strong); }
.btn-ghost:hover { border-color: var(--fp-purple); background: var(--fp-lavender-pale); }

.btn-lime { background: var(--fp-lime); color: var(--fp-ink); border-color: var(--fp-lime); }
.btn-lime:hover { filter: brightness(0.95); }

/* -------------------------------------------------------------
   Announcement bar
   ------------------------------------------------------------- */
.fp-announce {
  background: var(--fp-violet);
  color: #fff;
  text-align: center;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 11px 18px;
  letter-spacing: 0.01em;
}
.fp-announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------
   Navigation — deep purple bar, white links
   ------------------------------------------------------------- */
.nav {
  background: var(--fp-purple);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: none;
}
.nav-inner { min-height: 74px; gap: 22px; }

.nav-brand { display: flex; align-items: center; gap: 10px; }
.fp-logo { height: 38px; width: auto; display: block; }

.nav-links { gap: 26px; }
.nav-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: #F8F6FE;
  letter-spacing: 0;
}
.nav-link:hover { color: var(--fp-lavender); }
.nav-link.is-active { color: var(--fp-lime); }

.nav-actions { gap: 16px; color: #F8F6FE; }
.nav-actions .nav-link { color: #F8F6FE; }
.nav-cart { color: #F8F6FE; position: relative; }
.nav-cart:hover { color: var(--fp-lavender); }
.nav-cart-badge {
  background: var(--fp-lime);
  color: var(--fp-ink);
  font-weight: 800;
  font-size: 0.68rem;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: absolute;
  top: -6px;
  right: -8px;
  padding: 0 5px;
}
.nav-toggle { color: #F8F6FE; }

/* -------------------------------------------------------------
   Hero
   ------------------------------------------------------------- */
.fp-hero {
  background: var(--fp-grey);
  padding: clamp(48px, 6vw, 92px) 0 clamp(52px, 6vw, 96px);
  overflow: hidden;
}
.fp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(28px, 3.4vw, 54px);
  align-items: center;
}
/* Sized so "Introducing kits." holds on one line in the text column —
   the three-line stack is the whole point of the treatment. */
.fp-hero h1 {
  font-size: clamp(2.35rem, 4.25vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.fp-hero h1 .alt { color: var(--fp-lavender); display: block; }
.fp-hero h1 .base { color: var(--fp-purple); display: block; }
.fp-hero-sub {
  margin-top: 22px;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
  color: #3D3552;
  max-width: 46ch;
  font-weight: 400;
}
.fp-hero-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Floating mini product cards, right of the headline */
.fp-hero-cards { display: grid; gap: 14px; }
.fp-hero-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fp-hero-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.fp-hero-card img { width: 84px; height: 84px; object-fit: contain; flex: 0 0 84px; }
.fp-hero-card-name { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--fp-purple); }
.fp-hero-card-desc { font-size: 0.85rem; color: var(--c-muted); margin-top: 3px; line-height: 1.45; }
.fp-hero-card-price { margin-top: 6px; font-weight: 700; font-size: 0.92rem; color: var(--fp-ink); }
.fp-hero-card-price .per { color: var(--fp-violet); font-weight: 700; }

@media (max-width: 940px) {
  .fp-hero-grid { grid-template-columns: 1fr; }
  .fp-hero-cards { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   Purple review band
   ------------------------------------------------------------- */
.fp-band {
  background: var(--fp-purple);
  color: #fff;
  padding: clamp(34px, 4vw, 56px) 0;
  text-align: center;
}
.fp-band h2 { color: #fff; font-size: clamp(1.7rem, 3.1vw, 2.7rem); }
.fp-band p { color: var(--fp-lavender); margin-top: 10px; font-size: 1.05rem; font-weight: 500; }
.fp-band-logos {
  margin-top: 26px;
  display: flex;
  gap: clamp(20px, 4vw, 54px);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0.92;
}
.fp-band-logo { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; letter-spacing: 0.02em; }
.fp-band-logo span { display: block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; color: var(--fp-lavender); letter-spacing: 0.06em; margin-top: 2px; }

/* -------------------------------------------------------------
   Section scaffolding
   ------------------------------------------------------------- */
.fp-section { padding: clamp(46px, 5.5vw, 84px) 0; }
.fp-section-grey { background: var(--fp-grey); }
.fp-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.fp-section-head h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin: 0; }
.fp-section-head p { color: var(--c-muted); margin-top: 10px; max-width: 58ch; line-height: 1.6; }

/* -------------------------------------------------------------
   Kit cards — the core product unit
   ------------------------------------------------------------- */
.fp-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: clamp(14px, 1.7vw, 24px);
}
.fp-kit {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.fp-kit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(55, 36, 128, 0.25); }

.fp-kit-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fp-grey);
  display: grid;
  place-items: center;
  padding: 14px;
}
.fp-kit-media img { width: 100%; height: 100%; object-fit: contain; }

/* per-vial pill — the "cheapest way to buy" hook */
.fp-per-vial {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--fp-lime);
  color: var(--fp-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(14, 8, 22, 0.12);
}
.fp-save-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--fp-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-sm);
}
.fp-sold-out {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.66);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fp-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fp-kit-body { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.fp-kit-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.22;
  color: var(--fp-purple);
}
.fp-kit-spec {
  margin-top: 5px;
  font-size: 0.83rem;
  color: var(--c-muted);
  letter-spacing: 0.01em;
}
.fp-kit-foot { margin-top: auto; padding-top: 14px; }
.fp-kit-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fp-kit-price .now { font-family: var(--font-display); font-weight: 600; font-size: 1.34rem; color: var(--fp-ink); }
.fp-kit-price .was { font-size: 0.94rem; color: var(--c-muted); text-decoration: line-through; }
.fp-kit-cta { margin-top: 12px; width: 100%; justify-content: center; display: inline-flex; }

/* -------------------------------------------------------------
   Category tiles
   ------------------------------------------------------------- */
.fp-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}
.fp-cat {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 26px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--fp-ink);
  font-weight: 600;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.fp-cat:hover { transform: translateY(-3px); border-color: var(--fp-violet); background: var(--fp-lavender-pale); }
.fp-cat-icon {
  width: 46px; height: 46px;
  margin: 0 auto 12px;
  border-radius: var(--r-sm);
  background: var(--fp-lavender-pale);
  color: var(--fp-purple);
  display: grid; place-items: center;
}
.fp-cat-name { font-size: 0.98rem; line-height: 1.3; }
.fp-cat-count { display: block; font-size: 0.8rem; color: var(--c-muted); font-weight: 400; margin-top: 4px; }

/* -------------------------------------------------------------
   Value props
   ------------------------------------------------------------- */
.fp-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 26px); }
.fp-value { text-align: left; }
.fp-value-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--fp-purple);
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.fp-value h3 { font-size: 1.28rem; margin-bottom: 8px; }
.fp-value p { color: var(--c-muted); line-height: 1.62; font-size: 0.97rem; }

/* -------------------------------------------------------------
   Savings comparison strip
   ------------------------------------------------------------- */
.fp-compare {
  background: var(--fp-purple);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
}
.fp-compare h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.fp-compare p { color: var(--fp-lavender); margin-top: 12px; line-height: 1.6; max-width: 48ch; }
.fp-compare-figs { display: flex; gap: clamp(14px, 2vw, 30px); }
.fp-compare-fig { text-align: center; }
.fp-compare-fig .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--fp-lime); line-height: 1; }
.fp-compare-fig .l { font-size: 0.8rem; color: var(--fp-lavender); margin-top: 7px; letter-spacing: 0.04em; }
@media (max-width: 760px) { .fp-compare { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------- */
.fp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.fp-quote {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.fp-quote p { line-height: 1.62; font-size: 0.95rem; color: #2E2740; }
.fp-quote-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: center; }
.fp-quote-who { font-weight: 700; color: var(--fp-purple); font-size: 0.92rem; }
.fp-quote-src { font-size: 0.78rem; color: var(--c-muted); }
.fp-stars { color: #F5A623; letter-spacing: 1px; font-size: 0.9rem; margin-bottom: 10px; }

/* -------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------- */
.fp-faq { border-top: 1px solid var(--c-line); }
.fp-faq details { border-bottom: 1px solid var(--c-line); }
.fp-faq summary {
  cursor: pointer;
  padding: 19px 40px 19px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fp-purple);
  list-style: none;
  position: relative;
}
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--fp-violet);
  transition: transform var(--t-fast);
}
.fp-faq details[open] summary::after { content: "\2212"; }
.fp-faq details > div { padding: 0 40px 20px 0; color: var(--c-muted); line-height: 1.66; font-size: 0.96rem; }

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */
.footer { background: var(--fp-ink); color: #C9C4D6; border-top: none; }
.footer a { color: #C9C4D6; }
.footer a:hover { color: var(--fp-lavender); }
.footer h4, .footer-wordmark { color: #fff; font-family: var(--font-display); font-weight: 600; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); color: #857E99; }

/* -------------------------------------------------------------
   Newsletter
   The base sheet paints this band with a dark gradient and sets
   color:#fff on the section, the h2 and the paragraph. Overriding
   only the background left white text on a pale panel — so keep it
   a dark band and just move it onto the brand purple, which also
   matches .fp-band and .fp-compare elsewhere on the page.
   ------------------------------------------------------------- */
.newsletter {
  background: linear-gradient(135deg, var(--fp-purple-deep) 0%, var(--fp-purple) 55%, #4A32A0 120%);
  color: #fff;
  padding: clamp(58px, 6.5vw, 92px) 0;
}
.newsletter::before {
  background:
    radial-gradient(circle at 15% 20%, rgba(112, 82, 242, 0.34), transparent 52%),
    radial-gradient(circle at 85% 80%, rgba(191, 177, 249, 0.18), transparent 52%);
}
.newsletter h2 { color: #fff; }
.newsletter p  { color: var(--fp-lavender); }
.newsletter .eyebrow { color: var(--fp-lime); }

.newsletter-form {
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
}
.newsletter-form input { color: #fff; }
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.58); }
.newsletter-form button {
  background: var(--fp-lime);
  color: var(--fp-ink);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.newsletter-form button:hover { filter: brightness(0.95); transform: translateY(-1px); }
.newsletter-msg { color: var(--fp-lime); }

/* -------------------------------------------------------------
   Misc shared-component touch-ups
   ------------------------------------------------------------- */
.badge-teal { background: var(--fp-lavender-pale); color: var(--fp-purple); }
.product-card { border-radius: var(--r-md); }
.product-card-title { font-family: var(--font-display); font-weight: 600; color: var(--fp-purple); }
.product-card-price { font-family: var(--font-display); font-weight: 600; color: var(--fp-ink); }

/* -------------------------------------------------------------
   Product page — per-vial block
   ------------------------------------------------------------- */
.fp-pdp-pervial {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  background: var(--fp-lime);
  color: var(--fp-ink);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  margin-bottom: 18px;
}
.fp-pdp-pervial .n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.24rem;
  letter-spacing: -0.01em;
}
.fp-pdp-pervial .l { font-size: 0.87rem; font-weight: 600; opacity: 0.78; }

/* -------------------------------------------------------------
   Reveal-on-scroll, fail-safe
   The base sheet sets .reveal { opacity: 0 } unconditionally, so if JS
   never runs — or IntersectionObserver is missing — every revealed
   block (including the kit cards) stays permanently invisible. Here
   .reveal is visible by default and only hidden once the inline head
   script has confirmed the observer exists.
   ------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
html.has-reveal .reveal { opacity: 0; transform: translateY(24px); }
html.has-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.has-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

.fp-trust {
  display: flex;
  gap: clamp(14px, 2.4vw, 38px);
  justify-content: center;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}
.fp-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--fp-purple); }
.fp-trust-item svg { color: var(--fp-violet); flex: 0 0 auto; }

@media (max-width: 860px) {
  /* The sticky bottom bar already carries Account and Cart, so the text
     "Sign in" link only competes with the logo and wraps onto two lines. */
  .nav-actions > .nav-link { display: none; }
  .nav-inner { min-height: 64px; gap: 12px; }
  .fp-logo { height: 32px; }
}

@media (max-width: 620px) {
  .fp-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .fp-kit-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .fp-kit-body { padding: 13px 13px 15px; }
  .fp-kit-name { font-size: 0.97rem; }
  .fp-kit-price .now { font-size: 1.16rem; }
  .fp-per-vial { font-size: 0.8rem; padding: 4px 8px; }
}