/* ============================================================
   Noalys Roses — schetsboek-stijl
   ============================================================ */

:root {
  --creme: #fbf4ef;
  --creme-2: #f6e9e2;
  --papier: #fffaf6;
  --roze: #b76e79;
  --roze-donker: #9c5763;
  --roze-licht: #ecd3d4;
  --goud: #c9a04a;
  --goud-licht: #f1d68f;
  --mauve: #7a4450;
  --inkt: #5b3a42;
  --inkt-zacht: #84626a;

  --hand: "Caveat", "Segoe Print", cursive;
  --serif: "Cormorant Garamond", "Lora", Georgia, serif;

  --schets: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --schets-2: 15px 225px 15px 255px / 255px 15px 225px 15px;
  --max: 1180px;
  --schaduw: 0 1px 2px rgba(91, 58, 66, 0.08), 0 8px 24px -8px rgba(91, 58, 66, 0.22);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* subtiele papierstructuur */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .4 0 0 0 0 .38 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

h1,
h2,
h3,
.hand {
  font-family: var(--hand);
  font-weight: 600;
  color: var(--roze);
  line-height: 1.05;
  margin: 0 0 0.4em;
}

h1 {
  font-size: clamp(3rem, 7vw, 5rem);
}
h2 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}
h3 {
  font-size: 2rem;
}

p {
  margin: 0 0 1em;
}

.klein {
  font-size: 1rem;
  color: var(--inkt-zacht);
}

.caps {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mauve);
}

.container {
  width: min(var(--max), 100% - 32px);
  margin-inline: auto;
}

section {
  position: relative;
  padding: clamp(56px, 9vw, 110px) 0;
}

.sectie-kop {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

/* getekende krul onder kopjes */
.krul {
  display: inline-block;
  position: relative;
}
.krul::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -0.18em;
  height: 0.35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 4, 120 6, 170 10 S 260 16, 285 8 q 10 -4 6 -7' fill='none' stroke='%23c9a04a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

/* links met getekende krul */
.link {
  text-decoration: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 15 1, 30 5 T 60 5 T 90 5 T 118 4' fill='none' stroke='%23b76e79' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
    left bottom / 0% 8px no-repeat;
  padding-bottom: 6px;
  transition: background-size 0.45s ease;
}
.link:hover,
.link:focus-visible,
.link.actief {
  background-size: 100% 8px;
}

/* ---------- knoppen ---------- */
.knop {
  --k-bg: var(--roze);
  --k-fg: var(--papier);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--hand);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.55em 1.2em 0.6em;
  border: 2.5px solid var(--roze);
  border-radius: var(--schets);
  background: var(--k-bg);
  color: var(--k-fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, color 0.2s, border-radius 0.4s;
  box-shadow: 3px 4px 0 -1px rgba(122, 68, 80, 0.25);
}
.knop:hover,
.knop:focus-visible {
  animation: wiebel 0.5s ease-in-out;
  border-radius: var(--schets-2);
  background: var(--roze-donker);
}
.knop.licht {
  --k-bg: transparent;
  --k-fg: var(--roze);
}
.knop.licht:hover,
.knop.licht:focus-visible {
  background: var(--roze-licht);
}
.knop.groot {
  font-size: 1.8rem;
}
.knop svg {
  width: 1em;
  height: 1em;
}
@keyframes wiebel {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-2deg) scale(1.03);
  }
  60% {
    transform: rotate(1.5deg) scale(1.03);
  }
}

:focus-visible {
  outline: 2.5px dashed var(--goud);
  outline-offset: 4px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 244, 239, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C 200 1, 400 7, 600 4 S 1000 2, 1200 5' fill='none' stroke='%23b76e79' stroke-opacity='.45' stroke-width='1.5'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.header-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}
.logo-link img {
  height: 64px;
  width: auto;
}
.hoofdmenu ul {
  list-style: none;
  display: flex;
  gap: clamp(14px, 2.4vw, 34px);
  margin: 0;
  padding: 0;
}
.hoofdmenu a {
  font-family: var(--hand);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--inkt);
}
.hoofdmenu a.actief {
  color: var(--roze);
}
.header-acties {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icoon-knop {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: var(--roze);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, transform 0.2s;
}
.icoon-knop:hover {
  background: var(--roze-licht);
  transform: rotate(-6deg);
}
.icoon-knop svg {
  width: 30px;
  height: 30px;
}
.teller {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--goud);
  color: #fff;
  font: 700 0.8rem/22px var(--serif);
  text-align: center;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.5, 1.8, 0.5, 1);
}
.teller.zichtbaar {
  transform: scale(1);
}
.menu-knop {
  display: none;
}

@media (max-width: 860px) {
  .menu-knop {
    display: grid;
  }
  .logo-link img {
    height: 52px;
  }
  .header-binnen {
    height: 72px;
  }
  .hoofdmenu {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--creme);
    padding: 16px 24px 32px;
    border-bottom: 2px solid var(--roze-licht);
    transform: translateY(-120%);
    transition: transform 0.35s ease;
    z-index: -1;
  }
  .hoofdmenu.open {
    transform: none;
  }
  .hoofdmenu ul {
    flex-direction: column;
    gap: 6px;
  }
  .hoofdmenu a {
    font-size: 2rem;
  }
}

/* ---------- iconen (lijnstijl) ---------- */
.lijn-icoon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* zelf-tekenende lijnen */
[data-teken] path,
[data-teken] circle,
[data-teken] ellipse,
[data-teken] line,
[data-teken] polyline {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
[data-teken].getekend path,
[data-teken].getekend circle,
[data-teken].getekend ellipse,
[data-teken].getekend line,
[data-teken].getekend polyline {
  animation: teken var(--duur, 1.6s) ease forwards;
  animation-delay: var(--vertraging, 0s);
}
@keyframes teken {
  to {
    stroke-dashoffset: 0;
  }
}

/* verschijnen bij scrollen */
[data-onthul] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--vertraging, 0s);
}
[data-onthul].zichtbaar {
  opacity: 1;
  transform: none;
}

/* ---------- sterretjes ---------- */
.ster {
  position: absolute;
  width: var(--g, 18px);
  height: var(--g, 18px);
  color: var(--goud);
  pointer-events: none;
  animation: twinkel var(--t, 2.6s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.ster.stip {
  border-radius: 50%;
  background: var(--goud);
  width: var(--g, 7px);
  height: var(--g, 7px);
}
@keyframes twinkel {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.6) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(20deg);
  }
}

.glitter-laag {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.glitter-laag .ster {
  opacity: 0;
  animation-name: twinkel-in;
}
@keyframes twinkel-in {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(0);
  }
  45%,
  55% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}
.glitter-glans {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s;
  background-image: radial-gradient(circle, rgba(255, 238, 190, 0.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 0.8px, transparent 1.4px);
  background-size: 23px 19px, 17px 29px;
  background-position: 0 0, 9px 7px;
  mix-blend-mode: screen;
  animation: glinster 1.8s steps(3) infinite;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.met-glitter .glitter-glans {
  opacity: 0.75;
}
@keyframes glinster {
  0% {
    background-position: 0 0, 9px 7px;
  }
  33% {
    background-position: 6px 4px, 3px 12px;
  }
  66% {
    background-position: 11px 9px, 14px 2px;
  }
}

/* sparkle-spoor achter de muis */
.spoor-ster {
  position: fixed;
  z-index: 200;
  width: 14px;
  height: 14px;
  pointer-events: none;
  color: var(--goud);
  animation: spoor 0.9s ease-out forwards;
}
@keyframes spoor {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 22px)) scale(0.2) rotate(90deg);
  }
}

/* ---------- doorlopende steel ---------- */
.steel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.steel .steel-pad {
  fill: none;
  stroke: var(--roze);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0.7;
}
.steel .groei {
  fill: none;
  stroke: var(--roze);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.steel .groei.blad {
  fill: var(--creme);
}
.steel .groei.gegroeid {
  opacity: 0.8;
  transform: scale(1);
}
main,
.site-footer {
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .steel {
    display: none;
  }
}

/* ---------- polaroid ---------- */
.polaroid {
  position: relative;
  background: var(--papier);
  padding: 14px 14px 18px;
  box-shadow: var(--schaduw);
  transform: rotate(var(--rot, -1.5deg));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.polaroid::before {
  /* washi-tape */
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 28px;
  transform: translateX(-50%) rotate(var(--tape, -4deg));
  background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.35) 0 6px,
      transparent 6px 12px
    ),
    var(--tape-kleur, rgba(236, 211, 212, 0.85));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  z-index: 4;
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.polaroid.goud-tape {
  --tape-kleur: rgba(241, 214, 143, 0.8);
}
.polaroid .foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: radial-gradient(ellipse at 50% 60%, #fff 0%, var(--creme-2) 75%);
  overflow: hidden;
}
.polaroid .foto img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(91, 58, 66, 0.22));
  transition: transform 0.5s ease;
}
.polaroid .bijschrift {
  font-family: var(--hand);
  font-size: 1.7rem;
  color: var(--inkt);
  text-align: center;
  margin-top: 10px;
  line-height: 1.1;
}

/* ---------- productkaart ---------- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 48px 32px;
}
.kaart {
  position: relative;
}
.kaart .polaroid {
  cursor: pointer;
}
.kaart:nth-child(4n + 1) .polaroid {
  --rot: -2deg;
  --tape: -6deg;
}
.kaart:nth-child(4n + 2) .polaroid {
  --rot: 1.5deg;
  --tape: 3deg;
  --tape-kleur: rgba(241, 214, 143, 0.75);
}
.kaart:nth-child(4n + 3) .polaroid {
  --rot: -0.8deg;
  --tape: 5deg;
}
.kaart:nth-child(4n + 4) .polaroid {
  --rot: 2deg;
  --tape: -3deg;
  --tape-kleur: rgba(183, 110, 121, 0.35);
}
.kaart .polaroid:hover {
  transform: rotate(0) translateY(-6px) scale(1.02);
  box-shadow: 0 2px 4px rgba(91, 58, 66, 0.1), 0 22px 36px -12px rgba(91, 58, 66, 0.35);
}
.kaart .polaroid:hover .foto img {
  transform: scale(1.04) rotate(-1deg);
}
.kaart-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.prijs {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--mauve);
}
.prijs small {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
}
.kaart .kleurlabel {
  font-size: 0.95rem;
  color: var(--inkt-zacht);
  text-align: center;
  margin: 0;
}
.kaart-acties {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  gap: 10px;
}
.mini-knop {
  font-family: var(--hand);
  font-size: 1.35rem;
  font-weight: 600;
  border: 2px solid var(--roze);
  border-radius: var(--schets);
  background: transparent;
  color: var(--roze);
  padding: 0.2em 0.8em 0.3em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mini-knop:hover {
  background: var(--roze);
  color: var(--papier);
  animation: wiebel 0.5s;
}

@media (max-width: 600px) {
  .raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 14px;
  }
  .polaroid {
    padding: 8px 8px 10px;
  }
  .polaroid::before {
    width: 64px;
    height: 20px;
    top: -10px;
  }
  .polaroid .bijschrift {
    font-size: 1.35rem;
  }
  .kaart .kleurlabel {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-top: 4px;
  }
  .kaart-acties {
    flex-wrap: wrap;
    margin-top: 8px;
    gap: 6px;
  }
  .kaart .bekijk {
    display: none;
  }
  .kaart .toevoegen {
    width: 100%;
  }
  .sticker {
    right: -4px;
    font-size: 1.1rem;
    padding: 0 10px 2px;
  }
}

/* handgeschreven labeltje */
.sticker {
  position: absolute;
  z-index: 6;
  top: 10px;
  right: -12px;
  font-family: var(--hand);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--papier);
  background: var(--roze);
  padding: 2px 14px 4px;
  border-radius: var(--schets);
  transform: rotate(8deg);
  box-shadow: 2px 3px 0 rgba(122, 68, 80, 0.2);
}
.sticker.goud {
  background: var(--goud);
}

/* briefje met pijl */
.briefje {
  position: absolute;
  font-family: var(--hand);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--roze);
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 7;
}
.briefje svg {
  display: block;
  width: 70px;
  height: 56px;
}

/* ---------- glitter-schakelaar ---------- */
.glitter-schakelaar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hand);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--inkt-zacht);
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  user-select: none;
}
.glitter-schakelaar .optie {
  transition: color 0.3s;
}
.glitter-schakelaar[aria-checked="false"] .uit,
.glitter-schakelaar[aria-checked="true"] .aan {
  color: var(--roze);
}
.glitter-schakelaar[aria-checked="true"] .aan {
  color: var(--goud);
}
.schakel-baan {
  position: relative;
  width: 74px;
  height: 38px;
  border: 2.5px solid var(--roze);
  border-radius: 40px 34px 38px 32px / 34px 40px 32px 38px;
  background: var(--papier);
  transition: background 0.3s;
  flex: none;
}
.schakel-knop {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 27px;
  height: 27px;
  color: var(--roze);
  transition: transform 0.45s cubic-bezier(0.5, 1.6, 0.4, 1), color 0.3s;
}
.glitter-schakelaar[aria-checked="true"] .schakel-baan {
  background: #fbf0d5;
  border-color: var(--goud);
}
.glitter-schakelaar[aria-checked="true"] .schakel-knop {
  transform: translateX(35px) rotate(180deg);
  color: var(--goud);
}
.glitter-schakelaar.klein {
  font-size: 1.2rem;
  gap: 6px;
  flex-direction: row-reverse;
}
.glitter-schakelaar.klein .uit {
  display: none;
}
.glitter-schakelaar.klein .schakel-baan {
  width: 50px;
  height: 26px;
}
.glitter-schakelaar.klein .schakel-knop {
  width: 18px;
  height: 18px;
  top: 2px;
  left: 3px;
}
.glitter-schakelaar.klein[aria-checked="true"] .schakel-knop {
  transform: translateX(23px) rotate(180deg);
}

/* ---------- krijtkleur-rondjes ---------- */
.krijt-groep {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  padding: 0;
  margin: 0;
  border: 0;
}
.krijt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font-family: var(--hand);
  font-size: 1.2rem;
  color: var(--inkt);
}
.krijt .bol {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c);
  filter: url(#krijt-filter);
  transition: transform 0.25s;
}
.krijt .bol.mix {
  background: conic-gradient(#c0202e 0 33%, #f3a6b8 0 66%, #fff 0);
}
.krijt .bol.alles {
  background: conic-gradient(#c0202e 0 25%, #f3a6b8 0 50%, #fff 0 75%, #c9a04a 0);
}
.krijt::after {
  /* getekend cirkeltje rond de gekozen kleur */
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translateX(-50%) rotate(-12deg) scale(0.6);
  border: 2.5px solid var(--roze);
  border-radius: 52% 48% 55% 45% / 48% 55% 45% 52%;
  opacity: 0;
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.5, 1.8, 0.5, 1);
}
.krijt:hover .bol {
  transform: scale(1.08) rotate(8deg);
}
.krijt[aria-pressed="true"]::after,
.krijt[aria-checked="true"]::after {
  opacity: 1;
  transform: translateX(-50%) rotate(-12deg) scale(1);
}
.krijt[aria-pressed="true"],
.krijt[aria-checked="true"] {
  color: var(--roze);
  font-weight: 700;
}

/* keuze-chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  font-family: var(--hand);
  font-size: 1.35rem;
  font-weight: 600;
  padding: 0.2em 0.9em 0.3em;
  background: var(--papier);
  color: var(--inkt);
  border: 2px solid var(--roze-licht);
  border-radius: var(--schets);
  cursor: pointer;
  transition: all 0.2s;
}
.chip:hover {
  border-color: var(--roze);
}
.chip[aria-checked="true"],
.chip[aria-pressed="true"] {
  background: var(--roze);
  border-color: var(--roze);
  color: var(--papier);
  transform: rotate(-1.5deg);
}
.chip small {
  font-family: var(--serif);
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ---------- formulieren ---------- */
.veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}
.veld label {
  font-family: var(--hand);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--roze);
}
.veld input,
.veld textarea,
.veld select {
  font: inherit;
  font-size: 1.1rem;
  color: var(--inkt);
  background: var(--papier);
  border: 2px solid var(--roze-licht);
  border-radius: 14px 4px 16px 5px / 5px 16px 4px 14px;
  padding: 10px 14px;
  transition: border-color 0.2s;
}
.veld input:focus,
.veld textarea:focus,
.veld select:focus {
  outline: none;
  border-color: var(--roze);
}

/* ---------- getekend kader ---------- */
.schets-kader {
  position: relative;
  background: var(--papier);
  border: 2.5px solid var(--roze);
  border-radius: var(--schets);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 6px 7px 0 -2px var(--roze-licht);
}
.schets-kader.goud {
  border-color: var(--goud);
  box-shadow: 6px 7px 0 -2px #f3e3bb;
}

/* ---------- winkelmandje ---------- */
.mandje-scherm {
  position: fixed;
  inset: 0;
  background: rgba(91, 58, 66, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 300;
}
.mandje-scherm.open {
  opacity: 1;
  pointer-events: auto;
}
.mandje {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--creme);
  z-index: 301;
  transform: translateX(105%);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.4, 1);
  display: flex;
  flex-direction: column;
  border-left: 2.5px solid var(--roze);
}
.mandje.open {
  transform: none;
}
.mandje-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px 24px;
}
.mandje-kop h2 {
  font-size: 2.6rem;
  margin: 0;
}
.mandje-lijst {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
  list-style: none;
  margin: 0;
}
.mandje-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1.5px dashed var(--roze-licht);
}
.mandje-item .duim {
  width: 76px;
  height: 90px;
  background: var(--papier);
  padding: 5px;
  box-shadow: var(--schaduw);
  transform: rotate(-3deg);
  display: grid;
  place-items: center;
}
.mandje-item .duim img {
  max-height: 100%;
  object-fit: contain;
}
.mandje-item .duim svg {
  width: 100%;
  height: 100%;
}
.mandje-item h4 {
  font-family: var(--hand);
  font-size: 1.5rem;
  color: var(--inkt);
  margin: 0;
  line-height: 1.1;
}
.mandje-item .opties {
  font-size: 0.9rem;
  color: var(--inkt-zacht);
  line-height: 1.35;
}
.aantal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.aantal button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--roze);
  background: none;
  color: var(--roze);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.mandje-item .rechts {
  text-align: right;
}
.weg-knop {
  background: none;
  border: 0;
  color: var(--inkt-zacht);
  font-family: var(--hand);
  font-size: 1.1rem;
  cursor: pointer;
  text-decoration: underline;
}
.mandje-voet {
  padding: 18px 24px 26px;
  border-top: 2px solid var(--roze-licht);
}
.mandje-totaal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--hand);
  font-size: 2rem;
  color: var(--inkt);
  margin-bottom: 12px;
}
.mandje-leeg {
  text-align: center;
  padding: 50px 10px;
  color: var(--inkt-zacht);
}
.mandje-leeg svg {
  width: 120px;
  margin: 0 auto 10px;
  color: var(--roze);
}

/* ---------- melding ---------- */
.melding {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 400;
  transform: translate(-50%, 140%);
  background: var(--inkt);
  color: var(--papier);
  font-family: var(--hand);
  font-size: 1.5rem;
  padding: 8px 22px 10px;
  border-radius: var(--schets);
  transition: transform 0.4s cubic-bezier(0.4, 1.6, 0.5, 1);
  max-width: calc(100% - 32px);
  text-align: center;
}
.melding.zichtbaar {
  transform: translate(-50%, 0);
}

/* ---------- product-venster ---------- */
.venster {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(980px, calc(100% - 24px));
  width: 100%;
  max-height: calc(100% - 24px);
  overflow: visible;
}
.venster::backdrop {
  background: rgba(91, 58, 66, 0.4);
}
.venster-binnen {
  position: relative;
  background: var(--creme);
  border: 2.5px solid var(--roze);
  border-radius: 28px 10px 32px 12px / 12px 30px 10px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 40px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.venster .sluit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}
.venster h2 {
  margin-bottom: 0.1em;
}
.venster .optie-kop {
  font-family: var(--hand);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--inkt);
  margin: 18px 0 8px;
}
.venster .prijs-groot {
  font-family: var(--hand);
  font-size: 2.6rem;
  color: var(--mauve);
  margin: 18px 0 10px;
}
@media (max-width: 760px) {
  .venster-binnen {
    grid-template-columns: 1fr;
    padding: 28px 20px;
    gap: 18px;
  }
  .venster .polaroid {
    max-width: 300px;
    margin: 16px auto 0;
  }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--roze);
  color: var(--papier);
  margin-top: 80px;
  padding: 70px 0 30px;
}
.site-footer::before {
  /* golvende, getekende bovenrand */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -38px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 150 5, 300 40, 450 22 S 750 2, 900 20 S 1100 38, 1200 14 L1200 40 L0 40Z' fill='%23b76e79'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.footer-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
}
.footer-raster img {
  width: 230px;
}
.site-footer h4 {
  font-family: var(--hand);
  font-size: 1.8rem;
  margin: 0 0 8px;
  color: var(--goud-licht);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  margin-bottom: 4px;
}
.site-footer .link {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 15 1, 30 5 T 60 5 T 90 5 T 118 4' fill='none' stroke='%23f1d68f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.footer-onder {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1.5px dashed rgba(255, 250, 246, 0.4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.95rem;
  opacity: 0.85;
}
.footer-tagline {
  font-style: italic;
  font-size: 1.3rem;
  margin-top: 8px;
}
@media (max-width: 860px) {
  .footer-raster {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .footer-raster {
    grid-template-columns: 1fr;
  }
}

/* ---------- paginakop (subpagina's) ---------- */
.pagina-kop {
  text-align: center;
  padding: clamp(48px, 7vw, 80px) 0 clamp(24px, 4vw, 40px);
}
.pagina-kop p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.3rem;
}

/* ---------- bewegingsvoorkeur ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-teken] path,
  [data-teken] circle,
  [data-teken] ellipse,
  [data-teken] line,
  [data-teken] polyline {
    stroke-dashoffset: 0;
  }
  .ster {
    opacity: 0.8;
  }
}

/* keuze satijn / foam */
.soort-keuze .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.1;
  padding: 0.35em 0.9em 0.45em;
}
.soort-keuze .chip small {
  font-size: 0.82rem;
  margin-top: 2px;
}

/* kleuren die binnenkort weer op voorraad zijn: grijs en doorgestreept */
.krijt small {
  font-family: var(--serif);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--inkt-zacht);
  margin-top: -2px;
}
.krijt.binnenkort {
  cursor: not-allowed;
  color: var(--inkt-zacht);
}
.krijt.binnenkort .bol {
  position: relative;
  opacity: 0.45;
  filter: grayscale(0.85) url(#krijt-filter);
}
.krijt.binnenkort::before {
  /* getekende streep door het rondje */
  content: "";
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 50%;
  width: 54px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--roze);
  transform: translateX(-50%) rotate(-35deg);
  pointer-events: none;
}
.krijt.binnenkort:hover .bol {
  transform: none;
}

/* levertijd bij boeketten */
.levertijd {
  font-family: var(--hand);
  font-size: 1.15rem;
  color: var(--inkt-zacht);
  text-align: center;
  margin: 0;
}
.levertijd.klaar {
  color: #2f6b2a;
  font-weight: 700;
}
/* varianten die al gemaakt klaarstaan */
.chip.staat-klaar {
  position: relative;
}
.chip.staat-klaar::after {
  content: "✦";
  position: absolute;
  top: -9px;
  right: -7px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 0.75rem;
  color: #fff;
  background: #5c9a56;
  border-radius: 50%;
}