/* ============================================================
   LIPASAN / lipasanF® — Brand CSS (gemaess Brand CD §8)
   Aqua-Bio — helles Theme mit Cyan-Aqua + Microbe-Mint
   Body-Class: body.page-id-8 + body.brand-lipasan (Shop + Subpages)

   Wirkt ergaenzend zum bestehenden .lipasan-* Klassen-System (das bleibt).
   Diese Datei sorgt fuer Konsequenz auf generischen Klassen
   (.section, .feature-item, Buttons, etc.) damit Lipasan-Pages
   nirgendwo plötzlich dunkel werden.
   ============================================================ */

body.page-id-8,
body.brand-lipasan {
  --bg-deep:         #FBF8F0;   /* Cream-Light = Body-BG */
  --bg-card:         #FFFFFF;   /* White-Off Card-Highlight */
  --bg-elevated:     #D6EEF1;   /* Aqua-Pale */
  --bg-section-alt:  #F4ECD8;   /* Cream-Warm */

  /* Aqua als Primary-Accent (uebernimmt --orange Slot) */
  --orange:          #0E7C8A;   /* Aqua-Deep = CTA */
  --orange-bright:   #2A9AAB;   /* Aqua-Mid */
  --orange-dim:      #0A5D69;   /* dunkler Aqua */

  --teal:            #2A9AAB;
  --teal-dim:        #0E7C8A;
  --teal-deep:       #0A5D69;

  --text-primary:    #1A2D2A;   /* Anthracite mit Gruen-Anteil */
  --text-secondary:  #5C6F6B;
  --text-muted:      #8B9C97;

  --border:          rgba(14, 124, 138, 0.15);
  --border-accent:   rgba(14, 124, 138, 0.35);

  --font-display:    'Inter Display', -apple-system, sans-serif;

  /* Lipasan-spezifische Variablen (fuer bestehende .lipasan-* Klassen verfuegbar) */
  --aqua-deep:       #0E7C8A;
  --aqua-mid:        #2A9AAB;
  --aqua-light:      #5BBAC8;
  --aqua-pale:       #D6EEF1;
  --microbe-mint:    #7BC9A0;
  --mint-fresh:      #A0DDB8;
  --cream-warm:      #F4ECD8;
  --cream-light:     #FBF8F0;
}

/* ---- Body-BG: cream (helles Theme) ---- */
body.page-id-8,
body.brand-lipasan {
  background: var(--bg-deep);
  color: var(--text-primary);
}

/* ---- Accent-Bar: Aqua-Verlauf ---- */
body.page-id-8 .accent-bar,
body.brand-lipasan .accent-bar {
  background: linear-gradient(90deg,
    #0E7C8A 0%,
    #2A9AAB 35%,
    #7BC9A0 70%,
    #0E7C8A 100%);
}

/* ---- Nav: Aqua-Deep statt schwarz ---- */
body.page-id-8 .site-nav,
body.brand-lipasan .site-nav {
  background: #0E7C8A;
  color: #FFFFFF;
}
body.page-id-8 .site-nav .nav-logo,
body.brand-lipasan .site-nav .nav-logo,
body.page-id-8 .site-nav .nav-links a,
body.brand-lipasan .site-nav .nav-links a {
  color: #FFFFFF;
}
body.page-id-8 .site-nav .nav-logo-dot,
body.brand-lipasan .site-nav .nav-logo-dot {
  color: #7BC9A0;
}
body.page-id-8 .site-nav .nav-links a:hover,
body.brand-lipasan .site-nav .nav-links a:hover {
  color: #A0DDB8;
}
body.page-id-8 .site-nav .nav-links .current-menu-item > a,
body.brand-lipasan .site-nav .nav-links .current-menu-item > a {
  color: #7BC9A0;
}

/* ---- Generische page-hero (Fallback wenn keine .lipasan-* Klasse) ---- */
body.page-id-8 .page-hero:not(.lipasan-hero),
body.brand-lipasan .page-hero:not(.lipasan-hero) {
  background: linear-gradient(135deg, #0E7C8A 0%, #2A9AAB 100%);
  padding: 80px 0;
  position: relative;
}
body.page-id-8 .page-hero:not(.lipasan-hero) h1,
body.brand-lipasan .page-hero:not(.lipasan-hero) h1 {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---- Generische Sections ---- */
body.page-id-8 .section,
body.brand-lipasan .section {
  background: var(--bg-deep);
  color: var(--text-primary);
  padding: 80px 0;
}
body.page-id-8 .section:nth-of-type(even),
body.brand-lipasan .section:nth-of-type(even) {
  background: var(--bg-section-alt);
}

body.page-id-8 h2,
body.brand-lipasan h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  color: #0E7C8A;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
body.page-id-8 h3,
body.brand-lipasan h3 {
  font-family: var(--font-display);
  color: #0A5D69;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

body.page-id-8 p,
body.brand-lipasan p {
  color: var(--text-primary);
  line-height: 1.65;
}

/* ---- Generische feature-items / pillars ---- */
body.page-id-8 .feature-item,
body.brand-lipasan .feature-item,
body.page-id-8 .pillar,
body.brand-lipasan .pillar {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-top: 3px solid #5BBAC8;
  border-radius: 6px;
  padding: 28px 24px;
  transition: all .2s ease;
  box-shadow: 0 1px 3px rgba(14, 124, 138, 0.04);
}
body.page-id-8 .feature-item:hover,
body.brand-lipasan .feature-item:hover,
body.page-id-8 .pillar:hover,
body.brand-lipasan .pillar:hover {
  border-top-color: #2A9AAB;
  box-shadow: 0 8px 24px rgba(14, 124, 138, 0.10);
  transform: translateY(-2px);
}
body.page-id-8 .feature-item h3,
body.brand-lipasan .feature-item h3,
body.page-id-8 .pillar h3,
body.brand-lipasan .pillar h3 {
  color: #0E7C8A;
  font-size: 18px;
  margin: 0 0 12px;
}
body.page-id-8 .feature-item p,
body.brand-lipasan .feature-item p {
  color: #5C6F6B;
}
body.page-id-8 .feature-icon,
body.brand-lipasan .feature-icon {
  color: #2A9AAB;
}

/* ---- Buttons: Aqua-Deep ---- */
body.page-id-8 .btn-primary,
body.brand-lipasan .btn-primary {
  background: #0E7C8A;
  border-color: #0E7C8A;
  color: #FFFFFF;
  font-weight: 600;
}
body.page-id-8 .btn-primary:hover,
body.brand-lipasan .btn-primary:hover {
  background: #2A9AAB;
  border-color: #2A9AAB;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 124, 138, 0.20);
}
body.page-id-8 .btn-outline,
body.brand-lipasan .btn-outline {
  color: #0E7C8A;
  border-color: #0E7C8A;
  background: transparent;
}
body.page-id-8 .btn-outline:hover,
body.brand-lipasan .btn-outline:hover {
  background: #0E7C8A;
  color: #FFFFFF;
}

/* ---- Trust-Pills mit Microbe-Mint ---- */
body.page-id-8 .trust-pill,
body.brand-lipasan .trust-pill,
body.page-id-8 .badge-bio,
body.brand-lipasan .badge-bio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7BC9A0;
  color: #1A2D2A;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* ---- Links ---- */
body.page-id-8 a:not(.btn),
body.brand-lipasan a:not(.btn) {
  color: #0E7C8A;
}
body.page-id-8 a:not(.btn):hover,
body.brand-lipasan a:not(.btn):hover {
  color: #2A9AAB;
}

/* ---- Footer ---- */
body.page-id-8 .site-footer,
body.brand-lipasan .site-footer {
  background: #0E7C8A;
  color: #D6EEF1;
}
body.page-id-8 .site-footer a,
body.brand-lipasan .site-footer a {
  color: #D6EEF1;
}
body.page-id-8 .site-footer a:hover,
body.brand-lipasan .site-footer a:hover {
  color: #FFFFFF;
}

/* ---- Selection ---- */
body.page-id-8 ::selection,
body.brand-lipasan ::selection {
  background: #7BC9A0;
  color: #1A2D2A;
}

/* ---- Konsequenz-Brückens fuer bestehende .lipasan-* Klassen ---- */
/* Diese sollten bereits durch shop.css/lipasan-eigenes CSS gestylt sein.
   Hier nur Sicherheits-Net falls etwas durchrutscht. */
body.page-id-8 .lipasan-section,
body.brand-lipasan .lipasan-section {
  background: var(--bg-deep);
  color: var(--text-primary);
}