/* =====================================================
   Woomka brand overrides — navy palette + rounded font
   Loaded AFTER the theme CSS so !important wins.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --woomka-navy:        #0F2557;
  --woomka-navy-deep:   #0A1938;
  --woomka-navy-hover:  #091840;
  --woomka-accent:      #4A7BC7;
  --woomka-accent-soft: #B8CFEA;
  --woomka-cream:       #F5F0E8;
  --woomka-ink:         #0D0D0D;
}

/* ---------- Wordmark: simple "Woomka" in Nunito Black ---------- */
.woomka-wordmark {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  letter-spacing: -0.03em !important;
  color: var(--woomka-navy) !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1 !important;
}
.woomka-wordmark--light { color: #fff !important; }
.woomka-wordmark:hover { color: var(--woomka-navy-hover) !important; }

/* Replace the broken <img> logos with the wordmark using pure CSS.
   The img is set to display:none and its parent gets a Woomka text via ::after. */
img.header__heading-logo { display: none !important; }
.header__heading-logo-wrapper { display: inline-block !important; overflow: visible !important; }
.header__heading-logo-wrapper::after {
  content: 'Woomka';
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--woomka-navy);
  line-height: 1;
  display: inline-block;
}
img.footer-logo-image { display: none !important; }
.footer-brand::before {
  content: 'Woomka';
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: #fff;
  display: inline-block;
  margin-bottom: 8px;
}

/* ---------- HIDE (never delete) items that don't apply to a single-product pillow shop ---------- */
/* Country / localization selector */
localization-form,
.header-localization,
.menu-drawer__localization,
.disclosure__button.localization-selector,
.localization-selector,
.localization-form,
.country-selector,
.header__localization { display: none !important; }

/* Menu items pointing to legacy Shopify apps we no longer use */
a[href*="parcelpanel"],
a[href*="loop_subscriptions"],
a[href*="customer_authentication"],
a[href*="/account"],
a[href*="/gift-card"],
a[href*="/apps/"],
a[href*="/policies/subscription"],
a[href*="/pages/subscription"] { display: none !important; }
li:has(> a[href*="parcelpanel"]),
li:has(> a[href*="loop_subscriptions"]),
li:has(> a[href*="customer_authentication"]),
li:has(> a[href*="/account"]),
li:has(> a[href*="/gift-card"]),
li:has(> a[href*="/apps/"]) { display: none !important; }

/* Account icon (Log in) — Shopify hosted checkout handles this */
.header__icon--account { display: none !important; }

/* ---------- Hero redesign (full-bleed background, contained content) ---------- */
.lv-hero {
  background: linear-gradient(160deg, #E8EEF9 0%, #C8D6EE 50%, #A6BDE0 100%) !important;
  padding: 80px 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.lv-hero > * { position: relative; z-index: 1; }
/* Inner grid contained; full-bleed background stays flush edge-to-edge */
@media (min-width: 900px) {
  .lv-hero {
    padding: 100px calc((100vw - 1200px) / 2) !important;
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
    min-height: 640px !important;
  }
  .lv-hero-img-wrap { margin-bottom: 0 !important; max-width: none !important; width: 100% !important; }
  .lv-hero-content { max-width: 560px !important; }
}
@media (min-width: 1400px) {
  .lv-hero { padding: 120px calc((100vw - 1280px) / 2) !important; gap: 100px !important; }
}
.lv-hero-img-wrap {
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(15, 37, 87, 0.18) !important;
}
.lv-hero-stars { color: var(--woomka-navy) !important; letter-spacing: 2px !important; font-size: 15px !important; }
.lv-hero-rating-text { color: rgba(15, 37, 87, 0.75) !important; font-size: 14px !important; }
.lv-hero-rating-text strong { color: var(--woomka-navy) !important; font-weight: 800 !important; }
.lv-hero-script {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 900 !important;
  color: var(--woomka-navy-deep) !important;
  font-size: clamp(42px, 5.5vw, 68px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
.lv-accent {
  color: var(--woomka-navy) !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
}
.lv-hero-sub {
  color: rgba(15, 37, 87, 0.75) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}
.lv-hero-btn {
  background: var(--woomka-navy) !important;
  border-radius: 12px !important;
  padding: 18px 32px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: 0 8px 24px rgba(15, 37, 87, 0.25) !important;
}
.lv-hero-btn:hover {
  background: var(--woomka-navy-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(15, 37, 87, 0.35) !important;
}
.lv-hero-guarantee {
  color: rgba(15, 37, 87, 0.6) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.lv-hero-guarantee span { color: var(--woomka-navy) !important; }

/* ---------- Global font override on headings ---------- */
h1, h2, h3, h4, h5,
.lv-hero-script, .lv-feel-headline, .lv-testi-wrap h2,
.lv-hiw-intro h2, .lv-ing-intro h2, .lv-faq-intro h2,
.lv-ba-intro h2, .lv-stats-headline, .lv-hiw-title,
.shop-product-title, .product-title,
.hero__heading {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
body, p, li, span, div, .lv-hero-sub, .lv-feel-body {
  font-family: 'Nunito', system-ui, sans-serif !important;
}

/* Cormorant serif → rounded sans */
[class*="feel-headline"] em,
[class*="hiw-title"] em,
[class*="stats-headline"] em,
h2 em, h3 em {
  font-style: normal !important;
  color: var(--woomka-accent) !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
}

/* ---------- Color swap: red → navy ---------- */

/* Buttons */
.button, button, input[type="submit"],
.product-form__submit, .shop-add-to-cart-button,
.shopify-payment-button__button,
.lv-hero-btn, .lv-feel-cta, .lv-fcta-cta,
.lv-urgency-cta, .cart__checkout-button,
[class*="add-to-cart"] {
  background: var(--woomka-navy) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  transition: background 0.2s, transform 0.15s !important;
}
.button:hover, button:hover, input[type="submit"]:hover,
.product-form__submit:hover, .shop-add-to-cart-button:hover,
.lv-hero-btn:hover, .lv-feel-cta:hover, .lv-fcta-cta:hover,
.lv-urgency-cta:hover, .cart__checkout-button:hover,
[class*="add-to-cart"]:hover {
  background: var(--woomka-navy-hover) !important;
  transform: translateY(-1px);
}

/* Accents (text, borders, icons) */
.lv-accent, .lv-hero-benefits__intro strong,
.lv-hiw-eyebrow, .lv-feel-eyebrow, .lv-testi-hdr h2 em,
.lv-ba-eyebrow, .lv-stats-eyebrow, .lv-ing-eyebrow,
.lv-faq-eyebrow,
.lv-hiw-title em, .lv-ba-intro h2 em, .lv-stats-headline em,
.lv-feel-headline em, .lv-testi-wrap h2 em,
.lv-tc-stars, .lv-tc-author span,
.lv-faq-icon, .lv-hero-rating-text strong,
.lv-hero-stars {
  color: var(--woomka-navy) !important;
}
.lv-feel-tag {
  background: rgba(15, 37, 87, 0.06) !important;
  border-left-color: var(--woomka-navy) !important;
  color: var(--woomka-navy-deep) !important;
  font-style: normal !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
}
.lv-feel-tag:hover { background: rgba(15, 37, 87, 0.1) !important; }

/* Trust bar */
.lv-trust { background: var(--woomka-navy) !important; }

/* Before / after grid */
.lv-ba-col.lv-after { background: var(--woomka-navy) !important; }

/* Ingredients dark section */
.lv-ing-wrap {
  background: linear-gradient(160deg, var(--woomka-navy-deep) 0%, var(--woomka-navy) 55%, var(--woomka-navy-deep) 100%) !important;
}
.lv-ing-eyebrow { color: var(--woomka-accent-soft) !important; }
.lv-ing-dose { color: var(--woomka-accent-soft) !important; }

/* Urgency bar */
.lv-urgency-wrap { background: var(--woomka-navy-deep) !important; }
.lv-urgency-text strong { color: var(--woomka-accent-soft) !important; }

/* Final CTA */
.lv-fcta-wrap { background: var(--woomka-navy-deep) !important; }

/* Variant picker */
#woomka-variant-picker .wv-opt input:checked + .wv-card {
  border-color: var(--woomka-navy) !important;
  box-shadow: 0 0 0 3px rgba(15, 37, 87, 0.12) !important;
}
#woomka-variant-picker .wv-badge { background: var(--woomka-navy) !important; }
#woomka-variant-picker .wv-price-now { color: var(--woomka-navy) !important; }
#woomka-variant-picker .wv-title { font-family: 'Nunito', system-ui, sans-serif !important; font-weight: 700 !important; }

/* Header */
.header, .site-header, .shopify-section-header {
  border-bottom: 1px solid rgba(15, 37, 87, 0.08) !important;
}
.header__menu-item, .header__inline-menu a {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--woomka-navy-deep) !important;
}

/* Footer */
.footer, .footer-container, [class*="footer"] {
  font-family: 'Nunito', system-ui, sans-serif !important;
}

/* Kill leftover red backgrounds/borders */
[style*="9B1C1C"] { background-color: var(--woomka-navy) !important; }
[style*="7A1212"] { background-color: var(--woomka-navy-hover) !important; }
[style*="c0392b"], [style*="C0392B"] { color: var(--woomka-navy) !important; background-color: transparent !important; }
[style*="2A0808"] { background-color: var(--woomka-navy-deep) !important; }

/* ---------- Hide the country/localization selector (French-only shop) ---------- */
.header-localization,
.header__localization,
.menu-drawer__localization,
localization-form,
.disclosure__button.localization-selector,
.localization-selector,
.localization-form { display: none !important; }

/* ---------- FAQ contrast — questions bold navy, answers dark grey ---------- */
.lv-faq-wrap { background: #FAFBFD !important; }
.lv-faq-inner { max-width: 780px !important; }
.lv-faq-intro h2 {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 800 !important;
  color: var(--woomka-navy-deep) !important;
  font-size: clamp(30px, 3.5vw, 44px) !important;
  letter-spacing: -0.02em !important;
}
.lv-faq-intro h2 em {
  color: var(--woomka-navy) !important;
  font-style: normal !important;
  font-family: inherit !important;
}
.lv-faq-eyebrow { color: var(--woomka-navy) !important; font-weight: 700 !important; }
.lv-faq-q {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: var(--woomka-navy-deep) !important;
  font-size: 18px !important;
}
.lv-faq-a p {
  font-family: 'Nunito', system-ui, sans-serif !important;
  color: #4A5568 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.lv-faq-icon {
  color: var(--woomka-navy) !important;
  border-color: rgba(15, 37, 87, 0.25) !important;
}
.lv-faq-item { border-color: rgba(15, 37, 87, 0.1) !important; }

/* ---------- Header polish — clean white, navy wordmark, no confused country chip ---------- */
.header, .site-header, sticky-header, .header-wrapper {
  background: #fff !important;
  border-bottom: 1px solid rgba(15, 37, 87, 0.08) !important;
}
.header__heading, .header__heading a { color: var(--woomka-navy) !important; }
.header__inline-menu a, .header__menu-item {
  color: var(--woomka-navy-deep) !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.header__inline-menu a:hover { color: var(--woomka-navy) !important; }
.header__icons svg, .header__icon svg { color: var(--woomka-navy) !important; }

/* Kill any leftover red heart / accent glyph in guarantee text */
.lv-hero-guarantee span,
.lv-fcta-guarantee span,
[class*="guarantee"] span:not([class]) { color: var(--woomka-navy) !important; }

/* ---------- Mobile-first optimizations (< 768px) ---------- */
@media (max-width: 767px) {
  /* Hero — tight vertical rhythm, bigger CTA */
  .lv-hero { padding: 40px 20px 56px !important; }
  .lv-hero-img-wrap { max-width: 100% !important; margin-bottom: 28px !important; }
  .lv-hero-content { text-align: left !important; }
  .lv-hero-script { font-size: clamp(34px, 10vw, 44px) !important; line-height: 1.1 !important; }
  .lv-hero-sub { font-size: 15px !important; margin-bottom: 24px !important; }
  .lv-hero-btn {
    display: block !important;
    width: 100% !important;
    padding: 18px 24px !important;
    font-size: 16px !important;
  }
  .lv-hero-rating { flex-wrap: wrap; }

  /* Trust bar — 2 columns on mobile so text stays readable */
  .lv-trust { flex-wrap: wrap; }
  .lv-trust-item { min-width: 50% !important; padding: 14px 10px !important; }

  /* Feel-tags — cleaner stack, no weird margins */
  .lv-feel { padding: 56px 20px !important; }
  .lv-feel-headline { font-size: clamp(28px, 8vw, 40px) !important; }
  .lv-feel-tag { font-size: 15px !important; padding: 13px 16px !important; margin-left: 0 !important; }
  .lv-feel-cta {
    display: block !important;
    text-align: center !important;
    padding: 16px 20px !important;
    font-size: 15px !important;
  }

  /* Testimonials cards — narrower for horizontal scroll */
  .lv-tc { min-width: 260px !important; max-width: 260px !important; padding: 20px 18px !important; }
  .lv-tc blockquote { font-size: 15px !important; }

  /* Variant picker — 1 column full width */
  #woomka-variant-picker {
    grid-template-columns: 1fr !important;
    margin: 16px 0 20px !important;
  }
  #woomka-variant-picker .wv-card { padding: 16px 14px !important; }

  /* ATC button — full width, bigger tap target */
  .shop-add-to-cart-button, .product-form__submit {
    width: 100% !important;
    padding: 18px 20px !important;
    font-size: 16px !important;
    min-height: 56px !important;
  }

  /* How it works — reduce lateral padding */
  .lv-hiw-wrap { padding: 56px 20px !important; }
  .lv-hiw-step { grid-template-columns: 60px 1fr !important; padding: 32px 0 !important; }
  .lv-hiw-num { font-size: 44px !important; }
  .lv-hiw-title { font-size: 22px !important; }

  /* Ingredients / materials — 1 column stack */
  .lv-ing-wrap { padding: 56px 20px !important; }
  .lv-ing-row { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* FAQ — smaller vertical spacing */
  .lv-faq-wrap { padding: 56px 20px !important; }
  .lv-faq-intro h2 { font-size: clamp(26px, 7vw, 34px) !important; }
  .lv-faq-q { font-size: 17px !important; padding: 20px 0 !important; }

  /* Before/After — single column on mobile */
  .lv-ba-wrap { padding: 0 20px 56px !important; }
  .lv-ba-grid { grid-template-columns: 1fr !important; gap: 2px !important; }
  .lv-ba-col { padding: 28px 20px !important; }
  .lv-ba-item { font-size: 16px !important; }

  /* Wordmark — slightly smaller on mobile */
  .woomka-wordmark { font-size: 26px !important; }
  .woomka-wordmark::before { width: 22px !important; height: 16px !important; }

  /* Body font — no less than 16px anywhere for readability */
  body { font-size: 16px !important; }
}

/* ---------- Extra small (< 380px) ---------- */
@media (max-width: 380px) {
  .lv-hero-script { font-size: 32px !important; }
  .lv-trust-item { min-width: 100% !important; }
}
