/* =========================================================================
   Producten (identiteit, 14 okt 2026): de productblokken op de homepage
   ("Wat Ragently doet", ProductBlokken.razor) en het menu "Producten" in de
   header. Eigen bestand, zodat landing.css niet verder groeit. Bouwt op de
   tokens en kaarten van landing.css (.rg-listcard, .rg-duo).
   ========================================================================= */

/* --- Productblokken ----------------------------------------------------- */

.landing-root .rg-producten__prijs {
  margin: 1rem 0 0.875rem;
  font-family: var(--rg-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rg-ink);
}
.landing-root .rg-producten__verder {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--rg-text-soft);
}
.landing-root .rg-producten__verder a { color: var(--rg-primary); font-weight: 600; }

/* --- Menu "Producten" in de header (Header.razor) ----------------------- */

.landing-root .rg-producten-menu { position: relative; }
.landing-root .rg-producten-menu__knop { display: inline-flex; align-items: center; gap: 0.375rem; }
.landing-root .rg-producten-menu__pijl { font-size: 0.65rem; transition: transform 200ms ease; }
.landing-root .rg-producten-menu__knop[aria-expanded="true"] .rg-producten-menu__pijl { transform: rotate(180deg); }
.landing-root .rg-producten-menu__paneel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: 22rem;
  padding: 0.5rem;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow-lg);
}
.landing-root .rg-producten-menu__paneel[hidden] { display: none; }
.landing-root .rg-producten-menu__paneel ul { list-style: none; margin: 0; padding: 0; }
.landing-root .rg-producten-menu__link {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--rg-ink);
}
.landing-root .rg-producten-menu__link:hover,
.landing-root .rg-producten-menu__link:focus-visible { background: var(--rg-primary-wash); }
.landing-root .rg-producten-menu__naam { font-weight: 600; font-size: 0.9375rem; }
.landing-root .rg-producten-menu__belofte { font-size: 0.8125rem; color: var(--rg-text-soft); }

/* Mobiel menu: een kopje met de vier producten eronder. */
.landing-root .rg-producten-mobiel { display: grid; gap: 0.75rem; }
.landing-root .rg-producten-mobiel__kop {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text-soft);
}
.landing-root .rg-producten-mobiel__link { padding-left: 0.75rem; }