/* Notolio — thema A "Kruidenier".
   Kleuren, letters en versieringen. Voor een ander thema (B of C) maak je
   een nieuw bestand met dezelfde variabelen en klassen, en pas je de
   <link> in de HTML aan. */

@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Courier+Prime:wght@400;700&family=Work+Sans:wght@400;500;600&display=swap");

:root {
  --c-bg: #F5EFDC;          /* papier */
  --c-surface: #FFFFFF;
  --c-ink: #2A2A14;         /* inkt */
  --c-accent: #A4182D;      /* rood van de koppen */
  --c-primary: #3D6A48;     /* groen van het blik */
  --c-on-primary: #F5EFDC;
  --c-tin: #CFC844;         /* geelgroen */
  --c-tin-2: #B9B53A;
  --c-olive: #8C8F2E;
  --c-orange: #F4A21C;
  --c-pink: #E9A3C6;
  --c-focus: #F4A21C;
  --c-muted: #E4DAC0;

  --f-display: "Alfa Slab One", Georgia, serif;
  --w-display: 400;
  --f-body: "Work Sans", system-ui, sans-serif;
  --f-mono: "Courier Prime", "Courier New", monospace;

  --line: 3px solid var(--c-ink);
  --shadow: 4px 4px 0 var(--c-ink);
  --radius: 6px;
  --radius-groot: 10px;

  --strepen: repeating-linear-gradient(90deg, var(--c-tin) 0 26px, var(--c-olive) 26px 52px);
  --strepen-blik: repeating-linear-gradient(90deg, var(--c-tin) 0 30px, var(--c-tin-2) 30px 60px);
  --blokken: repeating-conic-gradient(var(--c-orange) 0 25%, var(--c-olive) 0 50%);
}

/* Strepenrand boven en onder */
.strepen { height: 18px; background: var(--strepen); }

/* Labelprinter-strook */
.label { background: var(--c-ink); color: var(--c-bg); padding: 4px 12px; transform: rotate(-1.5deg); }
.label--licht { background: var(--c-pink); color: var(--c-ink); transform: rotate(-2deg); }
.label--onder { margin-top: -14px; position: relative; transform: rotate(2deg); align-self: center; }

/* Hero */
.boog {
  width: 100%; max-width: 440px; padding: 26px;
  border-radius: 220px 220px 10px 10px; border: var(--line);
  background: var(--strepen-blik);
}
.boog img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 4px 4px; border: var(--line); }
.stempel { position: absolute; width: 170px; height: 170px; left: -10px; bottom: -20px; transform: rotate(-14deg); }
.tak { position: absolute; width: 190px; top: -10px; right: -24px; transform: rotate(22deg); }
@media (max-width: 600px) {
  .tak { width: 130px; right: 0; top: 0; }
  .stempel { width: 130px; height: 130px; left: 0; }
}
.onderstreep { position: relative; display: inline-block; }
.onderstreep svg { position: absolute; left: -4px; bottom: -14px; width: calc(100% + 8px); height: 20px; }
.btn { box-shadow: none; }

/* Band met blokken */
.band { background: var(--blokken) 0 0 / 64px 64px; border-top: var(--line); border-bottom: var(--line); }
.band__tekst { background: var(--c-bg); border: var(--line); padding: 12px 28px; font-family: var(--f-display); font-size: 22px; color: var(--c-accent); transform: rotate(-1deg); }

/* Producten */
.product { border: var(--line); }
.product--blik { background: var(--strepen-blik); }
.product--blik .product__naam { color: var(--c-accent); }
.product--groen { background: var(--c-primary); color: var(--c-on-primary); }
.product--groen .product__naam { color: var(--c-tin); }
.product--binnenkort { border-style: dashed; justify-content: center; gap: 12px; }
.product--binnenkort h3 { font-size: 32px; color: var(--c-accent); line-height: 1.1; }
.prijs { background: var(--c-bg); color: var(--c-ink); border: var(--line); transform: rotate(-4deg); }
.product--groen .prijs { transform: rotate(3deg); }

/* Secties */
.sectie--wit { border-top: var(--line); border-bottom: var(--line); }
.sectie--donker .kop { color: var(--c-bg); }
.sectie--donker .label { background: transparent; color: var(--c-tin); padding: 0; transform: none; }

/* Verhaal */
.foto-plek { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; background: var(--c-muted); border: var(--line); transform: rotate(-1.5deg); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 16px; }
.handtekening { font-family: var(--f-mono); font-weight: 700; font-size: 18px; }

/* Instagram/blog-teaser */
.teaser { background: var(--c-bg); color: var(--c-ink); border: var(--line); box-shadow: 5px 5px 0 var(--c-ink); border-radius: 8px; padding: 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }

/* Nieuwsbrief */
.nieuwsbrief__rand { max-width: 1000px; margin: 0 auto; padding: 20px; background: var(--blokken) 0 0 / 40px 40px; border: var(--line); }
.nieuwsbrief__binnen { background: var(--c-bg); border: var(--line); }
.nieuwsbrief h2 { font-size: clamp(30px, 3.5vw, 38px); line-height: 1.1; color: var(--c-accent); }

/* Footer */
.footer { background: var(--c-ink); color: var(--c-bg); }
.footer a { color: var(--c-bg); }
.footer a:hover { color: var(--c-tin); }
.footer__logo { font-family: var(--f-display); font-size: 30px; color: var(--c-tin); }
.footer .mono { font-weight: 400; }

/* Bestelpagina */
.regel { border: var(--line); }
.regel--blik { background: var(--strepen-blik); }
.regel--blik .regel__naam { color: var(--c-accent); }
.regel--groen { background: var(--c-primary); color: var(--c-on-primary); }
.regel--groen .regel__naam { color: var(--c-tin); }
.teller { background: var(--c-bg); border: var(--line); }
.teller button { background: transparent; color: var(--c-ink); }
.teller button.plus { background: var(--c-primary); color: var(--c-on-primary); }
.teller output { color: var(--c-ink); }
.keuze span { background: #FFFFFF; border: var(--line); font-weight: 600; }
.keuze input:checked + span { background: var(--c-orange); }
.keuzes--levering .keuze input:checked + span { background: var(--c-ink); color: var(--c-bg); }
.keuze input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.overzicht { background: var(--c-bg); border: var(--line); border-radius: 8px; box-shadow: 6px 6px 0 var(--c-ink); overflow: hidden; }
.overzicht__rand { height: 24px; background: var(--blokken) 0 0 / 24px 24px; border-bottom: var(--line); }
.overzicht__binnen { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.overzicht h2 { font-size: 28px; color: var(--c-accent); margin-bottom: 6px; }
.overzicht__totaal { border-top: 3px dashed var(--c-ink); }
.fout { background: #FBE3E5; border: 2px solid var(--c-accent); color: var(--c-accent); }
.bedankt h1 { font-size: clamp(40px, 5vw, 54px); color: var(--c-accent); }