/** Shopify CDN: Minification failed

Line 18:19 Unexpected "*"
Line 19:78 Unterminated string token

**/
/*
  lp-cro.css — CRO/SOP rebuild tokens and shared component styles for theme-v2.

  Loaded once from layout/theme.liquid, after the tailwind.config fontSize pin (which stays
  in place — it's the fix for the ~11px root font-size bug and every tw-text-* class depends
  on it). This file does not touch that pin; it adds new tokens/classes on top.
*/

/* Poppins everywhere, including native Dawn elements (buttons, nav, footer) that
   use Shopify's own font-picker setting (--font-body-family/--font-heading-family)
   rather than our gcs-sans/gcs-serif classes. Without this override, only the
   custom lp-*/gcs-* sections would actually render in Poppins and the rest of the
   page would stay on whatever font Dawn's type settings specify - exactly the
   inconsistency this change was meant to fix. */
body, button, input, select, textarea {
  font-family: 'Poppins', sans-serif !important;
}

:root {
  /* The one exclusive CTA colour. Every real buy/next-step button renders through
     snippets/lp-cta-button.liquid and nothing else on the page may use this colour —
     see the CTA audit notes in references/landing-page-template.md once written. Chosen to
     sit apart from every other colour already doing a job on this page: gold/orange is the
     review-star colour (native reviews + Loox), red is the "was" price, green is the "now"
     price, navy/charcoal/cream are the background palette. */
  --lp-cta: #2E5AAC;
  --lp-cta-hover: #24468A;
  --lp-cta-label: #ffffff;

  /* Price pair. Kept visually distinct from --lp-cta so a price is never mistaken for a
     button, and from the gold/orange review-star colour so proof and price don't blur. */
  --lp-price-was: #C0392B;
  --lp-price-now: #1F7A45;

  /* Square off every badge (sale %, sold-out) so they read as labels/tags, not buttons —
     part of the "nothing else on the page should look clickable" rule. Overrides the
     theme's global --badge-corner-radius; loads after it in <head> so this wins. */
  --badge-corner-radius: 0px;
}

/* ---------------------------------------------------------------------------------------
   Price pair (snippets/lp-price.liquid)
--------------------------------------------------------------------------------------- */
.lp-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
}

.lp-price__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4em;
}

.lp-price__was {
  color: var(--lp-price-was);
  font-size: 0.6em;
  font-weight: 500;
  text-decoration: line-through;
  opacity: 0.9;
}

.lp-price__now {
  color: var(--lp-price-now);
  font-size: 0.85em;
  font-weight: 700;
}

/* The sticky ATC bar has its own native price-size rules (section-main-product.css's
   .sticky-atc__price .price-item--regular) that set the "regular"/was price to a larger
   rem size than anything touches the "sale"/now price at each breakpoint - so inside the
   sticky bar the crossed-out price was rendering bigger than the real one. Pin both
   explicitly here so was stays smaller than now everywhere, same as the rest of the page. */
.sticky-atc__price .lp-price__was {
  font-size: 1.2rem !important;
}
.sticky-atc__price .lp-price__now {
  font-size: 1.8rem !important;
}
@media screen and (min-width: 750px) {
  .sticky-atc__price .lp-price__was {
    font-size: 1.4rem !important;
  }
  .sticky-atc__price .lp-price__now {
    font-size: 2.2rem !important;
  }
}

/* Single-price case (no compare-at set) shouldn't shrink — .lp-price__now is the only
   child, so let it read at its natural surrounding size rather than the "now" boost. */
.lp-price:not(.lp-price--on-sale) .lp-price__now {
  font-size: 1em;
  color: inherit;
  font-weight: inherit;
}

/* The "Save X%" badge sits under the price pair as its own small label — .lp-price
   is a column flex container so this is naturally sized to its own content, not
   stretched to the row's full width (a flex-basis:100% approach was tried first and
   backfired: flex-basis overrides width in the layout algorithm, so the badge
   stretched edge-to-edge instead of hugging its own text). */
.lp-price .badge {
  width: fit-content;
}

/* ---------------------------------------------------------------------------------------
   CTA button (snippets/lp-cta-button.liquid)
--------------------------------------------------------------------------------------- */
.lp-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: var(--lp-cta);
  color: var(--lp-cta-label);
  border: none;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  padding: 0.9em 1.4em;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lp-cta-button:hover,
.lp-cta-button:focus-visible {
  background: var(--lp-cta-hover);
}

.lp-cta-button__price {
  font-weight: 700;
}

/* ---------------------------------------------------------------------------------------
   Variant picker pills — widened into small cards so the extra description text
   (snippets/product-variant-options.liquid) has room, and recoloured to the same
   exclusive CTA colour when selected, so it's clear which option leads into the buy
   button below it.
--------------------------------------------------------------------------------------- */
.product-form__input--pill input[type='radio'] + label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.3em;
  max-width: 320px;
  width: fit-content;
  white-space: normal !important;
  text-align: left !important;
  line-height: 1.35;
  padding: 1.1rem 1.6rem !important;
}

.pill-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: normal;
}

.pill-description {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  opacity: 0.85;
}

.product-form__input--pill input[type='radio']:checked + label {
  background-color: var(--lp-cta) !important;
  border-color: var(--lp-cta) !important;
  color: var(--lp-cta-label) !important;
}

/* ---------------------------------------------------------------------------------------
   Native buy buttons (snippets/buy-buttons.liquid, the sticky ATC's own button) — these
   render through the theme's core product-form/checkout machinery, so instead of
   rebuilding them we retint them to the one exclusive CTA colour via the theme's own
   --color-button custom-property system (the same mechanism the sticky_atc block already
   used for its "custom button colour" setting). Scoped to .product-form__submit, which is
   specific to "submit this product form" buttons — not the generic .button--primary class
   used elsewhere in the theme (cart, other pages).
--------------------------------------------------------------------------------------- */
.product-form__submit.button {
  --color-button: 46, 90, 172; /* var(--lp-cta) as an RGB triplet */
  --color-button-text: 255, 255, 255;
}

/* ---------------------------------------------------------------------------------------
   Sticky ATC — cart-aware state (snippets/lp-js-sticky-atc.liquid)
--------------------------------------------------------------------------------------- */
.sticky-atc {
  /* Safety-net z-index: keeps the bar above any third-party app embed (Klaviyo's on-site
     popup, etc.) that injects its own fixed-position UI without coordinating with the theme.
     This is a backstop, not the fix — the Klaviyo popup's own position/timing should be set
     in Klaviyo's dashboard so it doesn't compete with this bar in the first place. */
  z-index: 9999;
}

.sticky-atc--converted .sticky-atc__button .button {
  --color-button: 46, 90, 172; /* var(--lp-cta) as an RGB triplet, for the theme's --color-button custom-property system */
  background: var(--lp-cta);
  color: var(--lp-cta-label);
}

/* ---------------------------------------------------------------------------------------
   Mobile type floor — layered on top of the tailwind fontSize pin, not a replacement.
   ~16px is the CTA/mobile body-text floor from the CRO notes; secondary/framing text
   (subtext, callouts, the urgency banner) is deliberately exempt — see
   references/landing-page-template.md.
--------------------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .lp-body-text {
    font-size: 16px;
  }
}