/* ============================================================
   LA FUENTE MÍA — LIGHT THEME OVERRIDE
   Warm, Aesop-inspired light palette
   ============================================================ */

/* ---------- ROOT VARIABLES ---------- */
:root {
  --color-bg: #F5F0EA;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle: #F5F0EA;
  --color-text: #2C2421;
  --color-text-muted: #3D3835;
  --color-text-subtle: #4A4540;
  --color-accent: #8B7355;
  --color-border: rgba(58,42,26,0.10);
  --color-border-accent: rgba(139,115,85,0.35);
  
  /* Nieuwe variabelen voorheen hardcoded */
  --color-primary-dark: #3A2A1A;
  --color-primary-light: #F0EDE8;
  --color-accent-gold: #C4A882;
  --color-card-bg: #E8DFD3;
  
  --space-breadcrumb-y: 1.25rem;
  --space-first-section-top: 2rem;
  --space-first-article-top: 2rem;
  --space-intro-gap: 1.5rem;
}

/* ---------- BODY ---------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}
main img { border-radius: 18px; }

/* ---------- NAVIGATION ---------- */
.nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(58,42,26,0.08);
  transition: background 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; position: relative; z-index: 100001; }
.nav__logo { position: absolute; left: 50%; transform: translateX(-50%); line-height: 0; }
.nav__logo img { height: 32px; }
.nav__link { color: var(--color-text-muted); transition: color 0.4s ease; }
.nav__link:hover { color: var(--color-text); }
.nav__link.active { color: var(--color-accent); }
.nav__link::after { background: var(--color-accent); }
.nav__search-btn { color: var(--color-text-muted); transition: color 0.4s ease; }
.nav__search-btn:hover { color: var(--color-text); }

/* Mobile menu elements */
.nav__hamburger { display: none; flex-direction: column; gap: 6px; padding: 10px; background: none; border: none; cursor: pointer; z-index: 99999; }
.nav__hamburger span { width: 24px; height: 1.5px; background: var(--color-text); transition: background 0.4s ease; }
.nav__hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav__mobile-menu { display: none; position: fixed; top: 70px; left: 0; right: 0; bottom: 0; background: var(--color-bg); padding: 2rem; flex-direction: column; z-index: 99998; overflow-y: auto; }
.nav__mobile-menu.active { display: flex; }
.nav__mobile-menu a { font-family: var(--font-display); font-size: 1.5rem; font-style: normal; padding: 0.75rem 0; border-bottom: 1px solid rgba(58,42,26,0.08); color: var(--color-text); }
.nav__backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; transition: opacity 0.3s; }
.nav__backdrop.active { display: block; opacity: 1; }

/* Nav over hero — transparent with light text (homepage only) */
.nav--hero { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }
.nav--hero .nav__link { color: rgba(240,237,232,1); }
.nav--hero .nav__link:hover { color: var(--color-primary-light); }
.nav--hero .nav__link.active { color: var(--color-accent-gold); }
.nav--hero .nav__link::after { background: var(--color-accent-gold); }
.nav--hero .nav__search-btn, .nav--hero .nav__account-btn, .nav--hero .nav__cart-btn { color: rgba(240,237,232,1); }
.nav--hero .nav__search-btn:hover, .nav--hero .nav__account-btn:hover, .nav--hero .nav__cart-btn:hover { color: var(--color-primary-light); }

/* When scrolled, revert to normal */
.nav--hero.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(58,42,26,0.08); }
.nav--hero.scrolled .nav__link, .nav--hero.scrolled .nav__search-btn, .nav--hero.scrolled .nav__account-btn, .nav--hero.scrolled .nav__cart-btn { color: var(--color-text-muted); }
.nav--hero.scrolled .nav__link:hover, .nav--hero.scrolled .nav__search-btn:hover, .nav--hero.scrolled .nav__account-btn:hover, .nav--hero.scrolled .nav__cart-btn:hover { color: var(--color-text); }
.nav--hero.scrolled .nav__link.active { color: var(--color-accent); }

/* Nav hide on scroll-down */
.nav--hidden { transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease; }
.nav.visible { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, background 0.5s ease; }

/* Product sub-nav */
.nav__products { background: rgba(247,247,245,0.88); border-top: none; transition: background 0.5s ease, border-color 0.5s ease; }
.nav__product-link { color: var(--color-text-muted); transition: color 0.4s ease; }
.nav__product-link:hover { color: var(--color-text); }
.nav--hero .nav__products { background: transparent; border-top: 1px solid rgba(240,237,232,0.12); }
.nav--hero .nav__product-link { color: rgba(240,237,232,0.9); }
.nav--hero .nav__product-link:hover { color: var(--color-primary-light); }
.nav--hero.scrolled .nav__products { background: rgba(247,247,245,0.88); border-top: none; }
.nav--hero.scrolled .nav__product-link { color: var(--color-text-muted); }
.nav--hero.scrolled .nav__product-link:hover { color: var(--color-text); }

/* Hamburger colors */
.nav__hamburger.active span { background: var(--color-text); }
.nav--hero .nav__hamburger span { background: var(--color-primary-light); }
.nav--hero.scrolled .nav__hamburger span { background: var(--color-text); }

/* Help dropdown */
.nav__help-panel { background: var(--color-card-bg); border: 1px solid rgba(58,42,26,0.1); box-shadow: 0 8px 32px rgba(58,42,26,0.12); }
.nav__help-panel::before { background: var(--color-card-bg); border-left: 1px solid rgba(58,42,26,0.1); border-top: 1px solid rgba(58,42,26,0.1); }
.nav__help-link { color: var(--color-text-muted); border-bottom-color: rgba(58,42,26,0.06); }
.nav__help-link:hover { color: var(--color-accent); }

/* Waarom dropdown */
.nav__waarom-wrap { position: relative; display: flex; align-items: center; }
.nav__waarom-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; z-index: 10001; }
.nav__waarom-wrap:hover .nav__waarom-dropdown { display: block; }

/* ---------- HERO SECTION ---------- */
.hero { background: var(--color-primary-dark); }
.hero__bg { filter: grayscale(8%) brightness(0.92); }
.hero__bg.revealed { opacity: 0.65; }
.hero__gradient { background: rgba(58,42,26,0.35); z-index: 1; }
.hero__glow { display: none; }

.hero__eyebrow { color: var(--color-accent-gold); text-shadow: 0 1px 6px rgba(0,0,0,0.3); letter-spacing: 0.3em; }
.hero__eyebrow::before, .hero__eyebrow::after { background: var(--color-accent-gold); }
.hero__title { color: #FFFFFF; text-shadow: 0 2px 20px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2); }
.hero__title-line { color: #FFFFFF; }
.hero__subtitle { color: rgba(240,237,232,0.9); text-shadow: 0 1px 10px rgba(0,0,0,0.4); }

.hero__cta { color: rgba(255,255,255,0.9); background: transparent; border: 1px solid rgba(255,255,255,0.5); box-shadow: none; }
.hero__cta:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--color-primary-dark); box-shadow: none; }
.hero__scroll { color: rgba(240,237,232,0.5); }
.hero__scroll-line::after { background: linear-gradient(180deg, transparent, var(--color-accent-gold), transparent); }
.hero__botanical svg g { stroke: rgba(240,237,232,0.8); }

/* ---------- PAGE HEADERS (subpages) ---------- */
.page-header { background: var(--color-primary-dark); margin-top: 0; padding: clamp(10rem, 18vh, 14rem) 0 clamp(4rem, 8vh, 6rem); }
.page-header__bg { opacity: 0.3; filter: grayscale(12%) brightness(0.88); }
.page-header::before { background: rgba(58,42,26,0.45); }
.page-header__eyebrow { color: #B89A76; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.3em; }
.page-header__eyebrow::before, .page-header__eyebrow::after { background: #B89A76; }
.page-header__title { color: #FFFFFF; text-shadow: 0 2px 16px rgba(0,0,0,0.45); }
.page-header__subtitle { color: rgba(240,237,232,0.75); text-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* ---------- BREADCRUMB ---------- */
.breadcrumb { padding: var(--space-breadcrumb-y) 0; border-bottom: 1px solid rgba(58,42,26,0.08); color: var(--color-text-subtle); }
.breadcrumb a { color: var(--color-text-muted); }

/* ---------- TRUST BAR ---------- */

/* ---------- EDITORIAL / CONTENT SECTIONS ---------- */
.editorial { background: var(--color-bg); }
.editorial__ghost { color: rgba(58,42,26,0.05); }
.editorial__botanical svg g { stroke: rgba(166,139,107,0.12); }
.editorial__label { color: #6B5D4D; font-weight: 500; }
.editorial__text { color: var(--color-text); font-size: 1.05rem; line-height: 1.85; }
.editorial__link { color: #6B5D4D; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(107,93,77,0.3); text-underline-offset: 3px; }

/* NO-list section */
.nolist { background: var(--color-primary-dark); color: var(--color-primary-light); }
 .nolist p { color: rgba(240,237,232,0.8); }
.nolist-items { background: transparent; color: var(--color-text-muted); }
.nolist-items li { background: transparent; color: var(--color-text-muted); border-bottom-color: rgba(58,42,26,0.06); }
.nolist-items li::before { color: var(--color-accent); }
.nolist-reason { background: transparent; color: var(--color-text-subtle); }
.nolist-cta { background: transparent; color: var(--color-accent); }

/* ---------- CARDS ---------- */
 .ingredient-card, .article-card {
  background: var(--color-bg-elevated);
  border: 1px solid rgba(58,42,26,0.06);
  box-shadow: 0 1px 3px rgba(58,42,26,0.04), 0 4px 16px rgba(58,42,26,0.06);
}
.product-card, .help-contact__card {
  background: var(--color-card-bg);
  border: 1px solid rgba(58,42,26,0.08);
  box-shadow: 0 1px 3px rgba(58,42,26,0.04);
}
 .product-card:hover, .ingredient-card:hover, .article-card:hover {
  box-shadow: 0 2px 8px rgba(58,42,26,0.06), 0 12px 32px rgba(58,42,26,0.1);
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

/* Article specific overrides — Apple card effect */
.article-grid .article-card {
  background: #FFFFFF;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(196,168,130,0.15);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
}
.article-grid .article-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(166,139,107,0.18), 0 6px 16px rgba(0,0,0,0.08);
  border-color: rgba(196,168,130,0.3);
  background: #FFFFFF;
}
/* Stagger reveal animation */
.article-grid.revealed .article-card {
  animation: article-card-in 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.article-grid.revealed .article-card:nth-child(1) { animation-delay: 0.5s; }
.article-grid.revealed .article-card:nth-child(2) { animation-delay: 0.87s; }
.article-grid.revealed .article-card:nth-child(3) { animation-delay: 1.24s; }
.article-grid.revealed .article-card:nth-child(4) { animation-delay: 1.61s; }
.article-grid.revealed .article-card:nth-child(5) { animation-delay: 1.98s; }
.article-grid.revealed .article-card:nth-child(6) { animation-delay: 2.35s; }
.article-grid.revealed .article-card:nth-child(7) { animation-delay: 2.72s; }
.article-grid.revealed .article-card:nth-child(8) { animation-delay: 3.09s; }
@keyframes article-card-in {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Lees meer fade-in label */
.article-card .article-card__link {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8B6F47;
}
.article-card:hover .article-card__link {
  opacity: 1;
  transform: translateY(0);
}

/* Help specific overrides */

/* ---------- CONTENT SECTIONS ALTERNATING ---------- */
.section:nth-of-type(odd) { background: var(--color-bg); }
.cta-section { border-top: none; }

/* ---------- FORMS & INPUTS ---------- */
.newsletter__input, .tracker__input {
  background: var(--color-card-bg);
  border: 1px solid rgba(58,42,26,0.12);
  color: var(--color-text);
}
.newsletter__input:focus, .tracker__input:focus { border-color: var(--color-accent); }
.tracker { background: var(--color-card-bg); border: 1px solid rgba(58,42,26,0.08); }
.tracker__input { background: var(--color-bg); }

/* ---------- ACCORDION / TABS ---------- */
.accordion-item { border-bottom-color: rgba(58,42,26,0.08); }
.accordion-item__trigger { color: var(--color-text); }
.accordion-item__trigger:hover { color: var(--color-accent); }
.accordion-item__trigger svg { color: var(--color-accent); }
.accordion-item__content { transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.accordion-item__content p { color: var(--color-text-muted); }

/* ---------- INCI TABLE ---------- */

/* ---------- BUTTONS & LINKS ---------- */
.btn, .tracker__btn { transition: all 0.35s cubic-bezier(0.16,1,0.3,1); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,115,85,0.2); }
.tracker__btn { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.tracker__btn:hover { background: var(--color-accent); border-color: var(--color-accent); font-weight: 500; }

a { color: inherit; }
a:hover { color: var(--color-accent); }
.content-narrow a { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(139,115,85,0.3); text-underline-offset: 2px; }
.content-narrow a:hover { text-decoration-color: var(--color-accent); }

/* ---------- FOOTER ---------- */
.footer { background: var(--color-primary-dark); color: var(--color-primary-light); border-top: none; padding: 2rem 0 1.5rem; }
.footer__top { border-bottom-color: rgba(240,237,232,0.1); display: flex; align-items: center; gap: 2rem; padding-bottom: 1.25rem; }
.footer__social { display: flex; gap: 1.25rem; padding: 0; margin-left: auto; border-bottom: none; }
.footer__link { color: rgba(240,237,232,0.6); }
.footer__link:hover { color: var(--color-primary-light); }
.footer__link::after { background: #B89A76; }
.footer__social-link { color: rgba(240,237,232,0.5); }
.footer__social-link:hover { color: #B89A76; }
.footer__bottom { color: #FFFFFF; padding-top: 0.85rem; }
.footer__legal a { color: rgba(240,237,232,0.6); }
.footer__row1 { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(240,237,232,0.1); gap: 2.5rem; position: relative; }
.footer__nav { display: flex; gap: 2.5rem; position: absolute; left: 50%; transform: translateX(-50%); }
.footer__row2 { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; }
.footer__center { display: flex; gap: 0.75rem; align-items: center; }
.footer__badge { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,237,232,0.5); border: 1px solid rgba(240,237,232,0.15); padding: 0.3rem 0.75rem; }
.footer__payments { display: flex; gap: 0.5rem; align-items: center; }
.footer__payment { display: inline-flex; opacity: 0.85; transition: opacity 0.2s; }
.footer__payment:hover { opacity: 1; }
.footer__legal { display: flex; align-items: center; gap: 1.5rem; }
.footer__legal p, .footer__copyright p { margin: 0; font-size: 0.7rem; color: rgba(240,237,232,0.6); }
.footer__logo img { height: 24px; width: auto; transition: opacity 0.3s ease; }
.footer__logo:hover img { opacity: 0.6; }

/* ---------- PRELOADER & SEARCH OVERLAY ---------- */
.preloader { background: var(--color-bg); }
.preloader__line { background: var(--color-accent); }
.search-overlay__close { color: var(--color-text-muted); }

/* ---------- CUSTOM CURSOR ---------- */
.cursor { border-color: rgba(44,36,33,0.4); background: rgba(44,36,33,0.06); mix-blend-mode: normal; }
.cursor.hover { border-color: var(--color-accent); }

/* ---------- LANGUAGE SELECTORS ---------- */
.nav__lang-wrap { position: relative; display: flex; align-items: center; }
.nav__lang-dropdown { display: none; position: absolute; top: 100%; right: 0; padding-top: 12px; z-index: 10001; }
.nav__lang-wrap:hover .nav__lang-dropdown { display: block; }
.nav__lang-panel { background: var(--color-card-bg); border: 1px solid rgba(58,42,26,0.1); box-shadow: 0 8px 32px rgba(58,42,26,0.12); padding: 0.5rem 0; min-width: 170px; display: flex; flex-direction: column; }
.nav__lang-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; font-size: 0.8rem; color: var(--color-text-muted); transition: color 0.25s ease, background 0.25s ease; text-transform: none; letter-spacing: 0; }
.nav__lang-option:hover { color: var(--color-text); background: rgba(58,42,26,0.04); }
.nav__lang-option--active { color: var(--color-text); font-weight: 500; }
.nav__lang-option--active::after { content: '\2713'; color: var(--color-accent); font-size: 0.7rem; margin-left: auto; }

.lang-select { padding: 2.5rem 0; border-top: 1px solid rgba(240,237,232,0.08); background: var(--color-primary-dark); text-align: center; }
.lang-select__title { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-gold); margin-bottom: 1.25rem; }
.lang-select__grid { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.lang-select__option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border: 1px solid rgba(240,237,232,0.12); color: rgba(240,237,232,0.6); font-size: 0.8rem; transition: all 0.25s ease; text-transform: none; letter-spacing: 0; }
.lang-select__option:hover, .lang-select__option--active { border-color: var(--color-accent-gold); color: var(--color-primary-light); }
.lang-select__option--active::after { content: '\2713'; color: var(--color-accent-gold); font-size: 0.7rem; margin-left: 0.25rem; }

/* ---------- MISC MODULES ---------- */
.helpful-links { background: var(--color-card-bg); border: 1px solid rgba(58,42,26,0.08); }
.helpful-links__title { color: var(--color-accent); }
.helpful-links__item { background: var(--color-bg); border: 1px solid rgba(58,42,26,0.08); color: var(--color-text-muted); }
.helpful-links__item:hover { border-color: var(--color-accent); color: var(--color-text); }

/* ---------- SCROLL REVEAL & GENERAL ---------- */
.reveal { opacity: 0; transform: translateY(28px) scale(0.97); }
.reveal.revealed { animation: reveal-in 3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

p { color: var(--color-text-muted); }
h1, h2, h3 { color: var(--color-text); font-family: var(--font-display); font-style: normal; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.5rem; }
strong { color: var(--color-text); }

/* Ingredient row hover */
.ing-row { transition: background 0.3s ease; padding: 0.5rem 0.75rem; margin: 0 -0.75rem; border-radius: 4px; }
.ing-row:hover { background: rgba(58,42,26,0.03); }

/* NO-list item hover */

/* Spacing and sections */
.section { padding: clamp(5rem, 12vw, 8rem) 0; }
main > .section:first-child { padding-top: var(--space-first-section-top); }
main > .article:first-of-type { padding-top: var(--space-first-article-top); }


.waarom-intro, .content-narrow, .bb-intro, .category-section__header { margin-bottom: var(--space-intro-gap); }

/* Collapsible regulatory block */

/* ---------- MOBILE QUERIES (Consolidated) ---------- */
@media (max-width: 991px) {
  /* Navigation */
  .nav__links, .nav__products, .nav__help-wrap, .nav__lang-wrap, .nav__waarom-wrap { display: none; }
  .nav__inner { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; gap: 0; }
  .nav__hamburger { display: flex; order: -1; flex-shrink: 0; padding: 8px 0; margin-right: 1rem; }
  .nav__logo { position: static; left: auto; transform: none; flex: 1; display: flex; justify-content: center; align-items: center; }
  .nav__logo img { height: 28px; width: auto; max-width: 110px; }
  .nav__right { display: flex; align-items: center; flex-shrink: 0; gap: 0; padding-right: 0; }
  
  .nav__search-btn { order: 1; }
  .nav__account-btn { order: 2; }
  .nav__cart-btn { order: 3; }
  
  .nav__cart-btn, .nav__search-btn, .nav__account-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nav__cart-btn svg, .nav__search-btn svg, .nav__account-btn svg { width: 20px; height: 20px; }
}

@media (max-width: 768px) {
  /* Footer Mobile */
  .footer__row1 { flex-direction: column; gap: 1.5rem; text-align: center; }
  .footer__nav { justify-content: center; position: static; transform: none; }
  .footer__social { justify-content: center; width: 100%; }
  .footer__row2 { flex-direction: column; gap: 1rem; text-align: center; }
  .footer__center { justify-content: center; }
  .footer__legal { justify-content: center; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .footer__copyright p { text-align: center; }
  .footer__payments { justify-content: center; }
  .footer__logo img { height: 20px; }
}

/* ---------- PRINT ---------- */
@media print {
  .nav, .footer, .cursor, .preloader { display: none; }
  body { background: #fff; color: #000; }
}