/* Gedeelde stijlen voor de hele site.

   Pas je hier iets aan, dan verandert het meteen op elke pagina die
   dit bestand inlaadt. Stijlen die maar voor één pagina gelden, staan
   nog altijd in die pagina zelf. */

:root{
  /* huisstijlkleuren */
  --cream:#FDF3EA;
  --cream-deep:#F5E4C9;
  --mustard:#FAC234;
  --mustard-deep:#E8A81A;
  --wine:#6D0021;
  --wine-deep:#530018;
  --pink:#F587A8;
  --ink:#3A2418;
  /* kleur per graad */
  --coral:#E8845F;
  --sage:#8FA377;
  /* lettertypes */
  --display:"Baloo 2", sans-serif;
  --script:"Caveat", cursive;
  --body:"Nunito", sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);line-height:1.6;overflow-x:hidden;}
a{color:inherit;}
img{max-width:100%;}
.urgency-bar{background:var(--wine);color:var(--cream);text-align:center;padding:0.65rem 1rem;font-weight:800;font-size:0.9rem;position:sticky;top:0;z-index:30;}
.urgency-bar a{text-decoration:underline;text-decoration-color:var(--mustard);text-underline-offset:3px;white-space:nowrap;}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 2.5rem;position:sticky;top:2.4rem;background:rgba(253,243,234,0.94);backdrop-filter:blur(6px);z-index:20;border-bottom:2px solid rgba(109,0,33,0.08);}
.wordmark{height:46px;display:block;}

/* ---------- navigatie ---------- */
.site-header nav{display:flex;align-items:center;gap:1.8rem;font-family:var(--body);font-weight:800;font-size:0.95rem;}
.site-header nav a{text-decoration:none;position:relative;padding-bottom:3px;}
.site-header nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--pink);border-radius:2px;transition:width .25s ease;}
.site-header nav a:hover::after{width:100%;}
.nav-cta{background:var(--mustard);color:var(--wine);padding:0.55rem 1.2rem;border-radius:999px;border:2px solid var(--wine);}
.nav-cta:hover{background:var(--wine);color:var(--cream);}
.nav-cta::after{display:none;}


/* ---------- logo linkt naar de homepage ---------- */
.wordmark-link{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}

/* ---------- menuknop voor smalle schermen ---------- */
.nav-toggle{display:none;align-items:center;gap:0.55rem;background:var(--mustard);color:var(--wine);
  border:2px solid var(--wine);border-radius:999px;padding:0.5rem 1rem;font-family:var(--body);
  font-weight:800;font-size:0.9rem;line-height:1;cursor:pointer;}
.nav-toggle-bars{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px;}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .2s ease, top .2s ease;}
.nav-toggle-bars::before{top:-6px;}
.nav-toggle-bars::after{top:6px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:rotate(-45deg);}

@media (max-width:900px){
  .site-header{flex-wrap:wrap;padding:0.9rem 1.2rem;}
  .nav-toggle{display:inline-flex;}
  .site-header nav.nav-menu{display:none;width:100%;flex-direction:column;align-items:stretch;
    gap:0;margin-top:0.9rem;font-size:1rem;}
  .site-header nav.nav-menu.is-open{display:flex;}
  .site-header nav.nav-menu a{padding:0.8rem 0.2rem;border-bottom:1.5px solid rgba(109,0,33,0.12);}
  .site-header nav.nav-menu a::after{display:none;}
  .site-header nav.nav-menu .nav-cta{margin-top:0.9rem;text-align:center;justify-content:center;
    border-bottom:2px solid var(--wine);}
}


/* ---------- e-mailveld bij het afrekenen ---------- */
.checkout-email{display:block;margin-bottom:1rem;}
.checkout-email span{display:block;font-weight:800;color:var(--wine);margin-bottom:0.4rem;}
.checkout-email input{width:100%;padding:0.75rem 1rem;border-radius:8px;
  border:1.5px solid rgba(109,0,33,0.2);font-family:var(--body);font-size:0.95rem;}
.checkout-email input:focus{outline:2px solid var(--mustard);outline-offset:1px;}

/* ---------- lichte knop, voor "nog in ontwikkeling"-kaarten ---------- */
.btn-ghost{background:transparent;color:var(--wine);border-color:rgba(109,0,33,0.35);}
.btn-ghost:hover{border-color:var(--wine);background:rgba(109,0,33,0.05);}


/* ---------- winkelmandje in de header ---------- */
.header-acties{display:flex;align-items:center;gap:0.7rem;}
.mandje-link{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;background:var(--cream-deep);text-decoration:none;
  font-size:1.15rem;flex-shrink:0;transition:background .15s ease;}
.mandje-link:hover{background:var(--mustard);}
.mandje-teller{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--wine);color:var(--cream);font-size:0.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;}
.mandje-teller[hidden]{display:none;}

@media (max-width:900px){
  /* op een smal scherm: logo, mandje en menuknop op één regel, het menu eronder */
  .site-header nav.nav-menu{order:1;}
}


/* ---------- venstertje voor een gratis download ---------- */
/* ---------- melding bij een gratis download ---------- */
.gratis-venster{position:fixed;inset:0;background:rgba(58,36,24,0.55);display:none;
  align-items:center;justify-content:center;padding:1.5rem;z-index:60;}
.gratis-venster.open{display:flex;}
.gratis-binnen{background:var(--cream);border-radius:20px;padding:2rem;max-width:420px;width:100%;position:relative;}
.gratis-binnen h2{font-family:var(--display);color:var(--wine);font-size:1.3rem;margin:0 0 0.5rem;}
.gratis-binnen p{font-size:0.94rem;font-weight:600;opacity:0.85;margin:0 0 1.2rem;}
.gratis-binnen label span{display:block;font-weight:800;color:var(--wine);margin-bottom:0.4rem;font-size:0.9rem;}
.gratis-binnen input[type=email]{width:100%;padding:0.75rem 1rem;border-radius:8px;
  border:1.5px solid rgba(109,0,33,0.2);font-family:var(--body);font-size:0.95rem;}
.gratis-kleintje{font-size:0.82rem;font-weight:600;opacity:0.7;margin:0.9rem 0 1.2rem;line-height:1.5;}
.gratis-melding{margin-top:0.9rem;font-size:0.88rem;font-weight:700;min-height:1.2em;}
.gratis-sluiten{position:absolute;top:0.8rem;right:1rem;background:none;border:none;font-size:1.3rem;
  color:var(--wine);cursor:pointer;line-height:1;}

/* ---------- kleurkeuze bij een gratis download ---------- */
.gratis-varianten{margin-bottom:1.1rem;}
.varianten-titel{display:block;font-weight:800;color:var(--wine);margin-bottom:0.5rem;font-size:0.9rem;}
.varianten-rij{display:flex;flex-wrap:wrap;gap:0.5rem;}
.variantknop{display:inline-flex;align-items:center;gap:0.45rem;background:var(--cream-deep);
  color:var(--wine);border:2px solid transparent;border-radius:999px;padding:0.4rem 0.9rem 0.4rem 0.5rem;
  font-family:var(--body);font-weight:800;font-size:0.86rem;cursor:pointer;}
.variantknop:hover{border-color:rgba(109,0,33,0.3);}
.variantknop[aria-pressed="true"]{border-color:var(--wine);background:var(--mustard);}
.variantkleur{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(58,36,24,0.25);flex-shrink:0;}

/* ---------- badges op een productpagina ---------- */
/* "Nieuw" is het felste: vol geel met een wijnrode rand, zodat het meteen
   opvalt naast het gestippelde "Binnenkort". */
.badge-nieuw{display:inline-block;font-weight:800;font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.04em;background:var(--mustard);color:var(--wine);border:1.5px solid var(--wine);
  padding:0.28rem 0.7rem;border-radius:999px;margin-bottom:1rem;}

/* ---------- overzicht: wat is klaar, wat komt nog ---------- */
.statusgroep{margin-bottom:2.8rem;}
.statusgroep:last-child{margin-bottom:0;}
.statuskop{font-family:var(--display);font-size:1.35rem;color:var(--wine);margin:0 0 0.4rem;
  display:flex;align-items:center;gap:0.6rem;}
.statuskop::before{content:"";width:14px;height:14px;border-radius:50%;flex-shrink:0;}
.is-klaar .statuskop::before{background:var(--mustard);border:2px solid var(--wine);}
.is-komt .statuskop::before{background:transparent;border:2px dashed rgba(109,0,33,0.45);}
.statusuitleg{max-width:62ch;font-size:0.92rem;font-weight:600;opacity:0.75;margin:0 0 1.4rem;}
.is-komt .product-card{opacity:0.82;}
.is-komt .product-card:hover{opacity:1;}
.kaart-acties{margin-top:auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:0.9rem;}
.kaart-acties .btn{font-size:0.88rem;padding:0.68rem 1.2rem;}

/* ---------- bevestiging na een gratis download ---------- */
.gelukt{text-align:center;padding:0.6rem 0 0.2rem;}
.gelukt-vink{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:var(--mustard);color:var(--wine);font-size:1.9rem;font-weight:800;
  border:2px solid var(--wine);margin-bottom:1rem;}
.gelukt h2{font-family:var(--display);color:var(--wine);font-size:1.4rem;margin:0 0 0.5rem;}
.gelukt-tekst{font-size:0.95rem;font-weight:600;opacity:0.85;margin:0 0 1.4rem;}
.gelukt-klein{font-size:0.82rem;font-weight:600;opacity:0.65;margin:1.1rem 0 0;line-height:1.5;}
.gelukt-klein a{color:var(--wine);text-decoration:underline;text-decoration-color:var(--mustard);}


/* ---------- labels op productkaarten (winkel én overzichtspagina's) ----------
   Bewust gebonden aan .kaart-labels: de agendapagina gebruikt zelf ook een
   klasse 'label' voor de kaft, en die mag hier niets van meekrijgen. */
.kaart-labels{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.8rem;}
/* Alle labels krijgen dezelfde onzichtbare rand, zodat ze even hoog blijven
   ook als er eentje wél een rand toont. */
.kaart-labels .label{font-weight:800;font-size:0.68rem;letter-spacing:0.04em;text-transform:uppercase;
  padding:0.26rem 0.6rem;border-radius:999px;background:rgba(109,0,33,0.08);color:var(--wine);
  border:1.5px solid transparent;}
.kaart-labels .label-graad-1{background:var(--coral);color:#fff;}
.kaart-labels .label-graad-2{background:var(--sage);color:#fff;}
.kaart-labels .label-graad-3{background:var(--mustard-deep);color:var(--wine);}
/* "Nieuw" is het felste label van allemaal: vol geel met een wijnrode rand. */
.kaart-labels .label-nieuw{background:var(--mustard);color:var(--wine);border-color:var(--wine);}
/* "Gratis" mag opvallen, maar niet met "nieuw" concurreren — zelfde geel, zachter. */
.kaart-labels .label-gratis{background:rgba(250,194,52,0.32);color:var(--wine);}
.kaart-labels .label-binnenkort{background:transparent;color:var(--wine);border-style:dashed;border-color:rgba(109,0,33,0.4);}

/* ---------- voorbeeldafbeelding op een productkaart ---------- */
.kaart-beeld{display:block;margin:-0.2rem 0 1rem;border-radius:12px;overflow:hidden;
  border:1px solid rgba(109,0,33,0.12);box-shadow:0 8px 20px rgba(109,0,33,0.13);
  background:#fff;line-height:0;}
.kaart-beeld img{width:100%;height:150px;object-fit:cover;object-position:top center;display:block;
  transition:transform .35s ease;}
.kaart-beeld:hover img{transform:scale(1.04);}
.kaart-belofte{margin:0.7rem 0 0;font-size:0.8rem;font-weight:800;opacity:0.6;
  letter-spacing:0.02em;}
.btn-groot{font-size:0.95rem !important;padding:0.85rem 1.5rem !important;}

/* ---------- beweging ----------
   De verbergende regels hangen aan .beweegt, en die klasse zet assets/beweging.js
   zelf. Zonder JavaScript blijft dus gewoon alles zichtbaar. */
.beweegt .onthul{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1);}
.beweegt .onthul.is-zichtbaar{opacity:1;transform:none;}

/* kaarten die reageren op je muis */
.product-card,.winkel-kaart{transition:transform .25s ease, box-shadow .25s ease;}
.product-card:hover,.winkel-kaart:hover{transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(109,0,33,0.16);}

/* knoppen die even indrukken */
.btn:active{transform:translateY(1px);}

/* het mandje veert op als er iets bijkomt */
@keyframes mandje-pop{
  0%{transform:scale(1);}
  40%{transform:scale(1.22) rotate(-6deg);}
  70%{transform:scale(0.96);}
  100%{transform:scale(1);}
}
.mandje-link.popt{animation:mandje-pop .45s ease;}

/* de menuknop en het venstertje komen zachtjes op */
@keyframes venster-op{from{opacity:0;transform:translateY(14px) scale(0.98);}to{opacity:1;transform:none;}}
.beweegt .gratis-venster.open .gratis-binnen{animation:venster-op .3s ease;}

html{scroll-behavior:smooth;}

/* Wie minder beweging wil, krijgt niets van dit alles. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .onthul{opacity:1 !important;transform:none !important;}
  .product-card:hover,.winkel-kaart:hover{transform:none;}
  .mandje-link.popt{animation:none;}
  .beweegt .gratis-venster.open .gratis-binnen{animation:none;}
  .kaart-beeld:hover img{transform:none;}
}