/* =====================================================================
   Katrien Cambré — Gedeelde basisstijlen
   --------------------------------------------------------------------
   Bevat alle stijlen die op elke pagina nodig zijn:
   - typografie / body
   - nav-link onderlijn
   - scrollbar
   - basisanimaties (fadeUp, anim-0..4)
   - kaart-hover patronen (jewel/related/page-nav)
   - accordeon (FAQ + detail)
   - grain texture utility
   ===================================================================== */

body { font-family: 'Jost', sans-serif; }

/* ---------- Grain overlay ------------------------------------------ */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.15;
  pointer-events: none;
}

/* ---------- Nav links --------------------------------------------- */
.nav-link {
  position: relative;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: #b8943a;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #b8943a; }

/* ---------- Animaties --------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-0 { animation: fadeUp 1.2s 0.0s ease both; }
.anim-1 { animation: fadeUp 1.2s 0.2s ease both; }
.anim-2 { animation: fadeUp 1.2s 0.4s ease both; }
.anim-3 { animation: fadeUp 1.2s 0.6s ease both; }
.anim-4 { animation: fadeUp 1.2s 0.8s ease both; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
.scroll-bounce { animation: bounce 2s ease infinite; }

/* ---------- Juweelkaart (collectie/producten) --------------------- */
.jewel-card .card-img { transition: transform 0.55s ease; }
.jewel-card:hover .card-img { transform: scale(1.045); }
.jewel-card .card-over { opacity: 0; transition: opacity 0.35s ease; }
.jewel-card:hover .card-over { opacity: 1; }

/* ---------- Verwante producten kaart ----------------------------- */
.related-card .rel-img { transition: transform 0.5s ease; }
.related-card:hover .rel-img { transform: scale(1.05); }
.related-card .rel-over { opacity: 0; transition: opacity 0.35s; }
.related-card:hover .rel-over { opacity: 1; }

/* ---------- Page-navigatie kaarten (Ontdek-blok) ------------------ */
.page-nav-card { position: relative; overflow: hidden; }
.page-nav-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: #b8943a;
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.page-nav-card:hover::after { transform: scaleX(1); }

/* ---------- Accordeon (detail + FAQ) ------------------------------ */
.accordion-body {
  transition: max-height 0.4s ease, opacity 0.3s ease;
  overflow: hidden;
}

/* ---------- Scrollbar --------------------------------------------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #b8943a; border-radius: 3px; }

/* ---------- Form controls ----------------------------------------- */
.kc-input,
.kc-textarea,
.kc-select {
  width: 100%;
  background: #ffffff;
  border: 1px solid #f5ede0;
  border-bottom: 1px solid #b8943a;
  padding: 0.9rem 0.25rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  color: #2c2217;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.kc-input:focus,
.kc-textarea:focus,
.kc-select:focus {
  outline: none;
  border-bottom-color: #2c2217;
  background-color: #fdf9f4;
}
.kc-textarea { resize: vertical; min-height: 9rem; }
.kc-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #8a7060;
  margin-bottom: 0.5rem;
}

/* ---------- Hulpklassen voor productenpagina ---------------------- */
.tag-chip {
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border: 1px solid #f5ede0;
  color: #8a7060;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tag-chip:hover { border-color: #b8943a; color: #b8943a; }
.tag-chip.is-active {
  background: #2c2217;
  color: #ffffff;
  border-color: #2c2217;
}

/* ---------- Range slider (prijsfilter) ---------------------------- */
.kc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: #f5ede0;
  outline: none;
}
.kc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b8943a;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #b8943a;
}
.kc-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b8943a;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #b8943a;
}

/* ---------- Openingsuren styling ---------------------------------- */
.openingsuren-tekst p {
  margin-bottom: 0.5rem;
}
.openingsuren-tekst ul,
.openingsuren-tekst ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.openingsuren-tekst li {
  border-bottom: 1px solid rgba(44, 34, 23, 0.1);
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
}
.openingsuren-tekst li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}