@import url("https://fonts.googleapis.com/css2?family=Caprasimo&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800;6..12,900&display=swap");

:root {
  --kw-burgundy: #4a001f;
  --kw-burgundy-deep: #310014;
  --kw-pink: #ed9bc3;
  --kw-pink-light: #f7c5dc;
  --kw-yellow: #ffcf3f;
  --kw-orange: #ffad32;
  --kw-cream: #fff7e5;
  --kw-paper: #fffaf0;
  --kw-brown: #663514;
  --kw-blue: #8fd6d0;
  --kw-coral: #f25c54;
  --kw-line: #dfcdb7;
  --kw-display: "Caprasimo", Georgia, serif;
  --kw-body: "Nunito Sans", sans-serif;
  --kw-shadow: 0 24px 60px rgb(74 0 31 / 15%);
}

.kwispel-page,
.kwispel-builder {
  --cf-ink: var(--kw-brown);
  --cf-ink-soft: #765d4d;
  --cf-paper: var(--kw-cream);
  --cf-paper-deep: #f6e8d2;
  --cf-card: var(--kw-paper);
  --cf-red: var(--kw-burgundy);
  --cf-red-dark: var(--kw-burgundy-deep);
  --cf-red-soft: var(--kw-pink-light);
  --cf-line: var(--kw-line);
  --cf-display: var(--kw-display);
  --cf-body: var(--kw-body);
  color: var(--kw-brown);
  font-family: var(--kw-body);
}

/* --kw-veld is het verloop achter de pagina. Het staat in een variabele omdat
   de kopbalk het ook nodig heeft; zie de toelichting daar. */
.kwispel-page {
  --kw-veld: linear-gradient(135deg, #e88ec0 0%, #f1aab3 28%, #ffcd3b 100%);
  --kw-kop-hoek: 18px 18px 0 0;
  background: var(--kw-veld);
  background-attachment: fixed;
}

.kwispel-page > .kw-header,
.kwispel-page > .kw-productbalk,
.kwispel-page > main,
.kwispel-page > .kw-footer {
  width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
}

.kwispel-page > main {
  background: var(--kw-cream);
  box-shadow: 0 20px 80px rgb(74 0 31 / 14%);
}

.kw-logo {
  display: inline-flex;
  align-items: baseline;
  color: var(--kw-pink);
  font-family: var(--kw-display);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -.045em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.kw-logo span { color: var(--kw-yellow); }

/* Het logo met een ondertitel eronder. De ondertitel staat bewust naast en niet
   in .kw-logo: de regel hierboven kleurt élke span daarbinnen geel, en dat is
   voor het puntje van "kwispel." bedoeld. */
.kw-brand {
  display: grid;
  gap: 3px;
  justify-items: start;
  line-height: 1;
}

/* De ondertitel moet binnen de breedte van het woord erboven blijven, anders
   steekt hij eronderuit en oogt het als twee losse dingen.

   Dezelfde vorm van clamp() als .kw-logo hierboven, met de vw-waarde in
   verhouding: zo krimpt en groeit de ondertitel mee met het logo en blijft de
   verhouding op elk scherm gelijk. Met vaste stappen per schermbreedte klopte
   het alleen precies op de breedtes waarop het was nagemeten.

   De letterruimte is klein gehouden. Achttien tekens keer een royale spatiëring
   was in zijn eentje al bijna twintig pixels breedte. */
.kw-brand-by {
  color: rgb(255 247 229 / 58%);
  font-family: var(--kw-body);
  font-size: clamp(0.42rem, 0.76vw, 0.6rem);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* De kopbalk plakt bovenaan én heeft afgeronde bovenhoeken. Dat botst: alles
   wat eronder doorschuift — de crème plaat — kwam in die twee hoekjes
   tevoorschijn zodra je scrollde.
   Vandaar de omkering. De kopbalk zelf krijgt het verloop van de pagina als
   ondergrond, en het bordeaux ligt er als afgerond vlak overheen. In de hoekjes
   zie je dan gewoon de achtergrond, precies zoals ernaast. `fixed` laat dat
   verloop op dezelfde plek staan als dat van de pagina, bij elke scrollstand,
   zodat de naad onzichtbaar blijft. */
.kw-header.site-header,
.kwispel-builder .kw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border: 0;
  background: var(--kw-veld) fixed;
  color: var(--kw-cream);
  box-shadow: none;
}

/* z-index -1 zet dit vlak achter de inhoud van de kopbalk maar vóór haar eigen
   ondergrond: de kopbalk maakt een eigen stapelcontext, dus verder naar achteren
   dan dit gaat het niet. */
.kw-header.site-header::before,
.kwispel-builder .kw-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--kw-kop-hoek, 0);
  background: var(--kw-burgundy);
}

.kw-header .nav-shell {
  min-height: 78px;
}

.kw-header .site-nav {
  gap: clamp(.9rem, 2vw, 1.8rem);
}

.kw-header .site-nav a:not(.button) {
  color: var(--kw-cream);
  font-family: var(--kw-body);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kw-header .site-nav a:not(.button):hover { color: var(--kw-yellow); }
.kw-header .site-nav .kw-back { color: var(--kw-pink); }

.kwispel-page .button,
.kwispel-builder .cf-button {
  border-radius: 8px;
  font-family: var(--kw-body);
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.kwispel-page .button--primary,
.kw-header .button--primary {
  border: 2px solid var(--kw-yellow);
  background: var(--kw-yellow);
  color: var(--kw-burgundy);
  box-shadow: 0 8px 0 #c88911;
}

.kwispel-page .button--primary:hover,
.kw-header .button--primary:hover {
  background: #ffdc69;
  color: var(--kw-burgundy);
  transform: translateY(-2px);
  box-shadow: 0 10px 0 #c88911;
}

.kwispel-page h1,
.kwispel-page h2,
.kwispel-page h3,
.kwispel-builder h1,
.kwispel-builder h2,
.kwispel-builder h3 {
  font-family: var(--kw-display);
  font-weight: 400;
  letter-spacing: -.035em;
}

.kwispel-page .eyebrow,
.kwispel-builder .cf-kicker,
.kwispel-builder .cf-preview-kicker {
  color: var(--kw-pink);
  font-family: var(--kw-body);
  font-weight: 900;
  letter-spacing: .12em;
}

/* Landing hero */
.kwispel-page .dog-hero {
  padding: clamp(3.5rem, 8vw, 7.5rem) 0 clamp(6rem, 10vw, 9rem);
  overflow: hidden;
  background: var(--kw-burgundy);
  color: var(--kw-cream);
}

.kwispel-page .dog-hero::before {
  position: absolute;
  inset: 5% auto auto 4%;
  width: 340px;
  height: 340px;
  border: 1px solid rgb(237 155 195 / 22%);
  border-radius: 50%;
  box-shadow: 60px 12px 0 -1px var(--kw-burgundy), 60px 12px 0 0 rgb(237 155 195 / 18%), 120px 28px 0 -1px var(--kw-burgundy), 120px 28px 0 0 rgb(237 155 195 / 14%);
  content: "";
  transform: rotate(-20deg) scaleX(1.8);
}

.kwispel-page .dog-hero::after {
  right: -2%;
  bottom: 0;
  left: 0;
  width: auto;
  height: 26px;
  min-width: 0;
  border-radius: 0;
  background: radial-gradient(circle at 14px -2px, transparent 17px, var(--kw-cream) 18px) 0 0 / 28px 28px repeat-x;
  transform: none;
}

.kwispel-page .dog-hero__grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, .9fr) minmax(410px, .8fr);
  gap: clamp(2rem, 6vw, 6rem);
}

.kwispel-page .dog-hero__claim {
  max-width: 9ch;
  margin: .75rem 0 1.5rem;
  color: var(--kw-pink-light);
  font-size: clamp(3.4rem, 7.3vw, 6.8rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.kwispel-page .dog-hero__claim span { color: var(--kw-yellow); }

/* De H1 is sinds de SEO-ronde de zakelijke regel bovenaan, niet de grote
   claim eronder. Klein gezet, maar wel de kopregel die zegt waar de pagina
   over gaat. */
.kwispel-page .dog-hero__kop {
  max-width: 26ch;
  margin: .5rem 0 .4rem;
  color: var(--kw-pink-light);
  font-family: inherit;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
  opacity: .85;
}

.kwispel-page .dog-hero__lead {
  color: #f8dfeb;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
}

.kwispel-page .dog-hero__price strong { color: var(--kw-yellow); }
.kwispel-page .dog-hero__price small,
.kwispel-page .dog-hero__checks { color: #f4d9e5; }
.kwispel-page .dog-hero__checks svg { color: var(--kw-yellow); }

.kwispel-page .dog-hero__visual {
  aspect-ratio: 4 / 5;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--kw-pink) 0%, var(--kw-yellow) 100%);
  box-shadow: var(--kw-shadow);
  transform: rotate(1.5deg);
}

.kwispel-page .dog-hero__visual::before { display: none; }

.kwispel-page .dog-hero__visual img {
  border-radius: 14px;
  object-position: center center;
}

.kwispel-page .dog-hero__tag {
  right: -1.2rem;
  bottom: 2.5rem;
  padding: 1rem 1.2rem;
  border: 3px solid var(--kw-burgundy);
  border-radius: 12px;
  background: var(--kw-cream);
  color: var(--kw-brown);
  box-shadow: 8px 9px 0 var(--kw-burgundy);
  transform: rotate(-3deg);
}

.kwispel-page .dog-hero__tag span:first-child {
  color: var(--kw-coral);
  font-weight: 900;
  text-transform: uppercase;
}

/* Mosaic */
.kw-mosaic {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--kw-cream);
}

.kw-mosaic__heading {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.kw-mosaic__heading h2 {
  margin: .45rem 0 .8rem;
  color: var(--kw-brown);
  font-size: clamp(2.7rem, 5.5vw, 5rem);
  line-height: 1;
}

.kw-mosaic__heading p { margin-inline: auto; }

.kw-mosaic__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr .7fr;
  grid-template-rows: 240px 190px;
  gap: 16px;
}

.kw-tile {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border-radius: 14px;
  color: var(--kw-burgundy);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

a.kw-tile:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: var(--kw-shadow); }
.kw-tile--pink { grid-row: 1 / 3; background: linear-gradient(160deg, var(--kw-pink) 0%, var(--kw-yellow) 100%); }
.kw-tile--photo { grid-row: 1 / 3; margin: 0; padding: 0; }
.kw-tile--yellow { background: var(--kw-yellow); }
.kw-tile--blue { background: var(--kw-blue); }

.kw-tile--photo img { width: 100%; height: 100%; object-fit: cover; }
.kw-tile__label { font-size: .72rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.kw-tile strong { max-width: 8ch; font-family: var(--kw-display); font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1; }

.kw-tag-shape {
  display: grid;
  width: 150px;
  height: 88px;
  place-items: center;
  align-self: center;
  border: 8px solid #ffd7e9;
  border-radius: 46% 54% 40% 60% / 56% 42% 58% 44%;
  background: var(--kw-coral);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 9px 0 rgb(74 0 31 / 18%);
  transform: rotate(-6deg);
}

.kw-tag-shape--round { width: 94px; height: 94px; border-radius: 50%; background: var(--kw-burgundy); }
.kw-tag-shape--fish {
  width: 112px;
  height: 82px;
  border-radius: 58% 45% 45% 58%;
  background: #2374a6;
  clip-path: polygon(0 10%, 28% 31%, 36% 22%, 59% 16%, 84% 26%, 100% 50%, 84% 74%, 59% 84%, 36% 78%, 28% 69%, 0 90%, 13% 50%);
  transform: rotate(4deg);
}

/* Campaign gallery */
.kw-pack {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: var(--kw-burgundy);
  color: var(--kw-cream);
}

.kw-pack__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: 2rem;
}

.kw-pack__heading h2 {
  max-width: 10ch;
  margin: .45rem 0 0;
  color: var(--kw-pink-light);
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  line-height: .98;
}

.kw-pack__heading > p { margin: 0; color: #f6deea; font-size: 1.03rem; }

.kw-pack__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.kw-dog-card {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--kw-cream);
  border-radius: 15px;
  box-shadow: 8px 9px 0 var(--kw-yellow);
}

.kw-dog-card:nth-child(2) { transform: translateY(22px) rotate(1deg); }
.kw-dog-card:nth-child(3) { transform: rotate(-1deg); }
.kw-dog-card img { width: 100%; height: 100%; object-fit: cover; }
.kw-dog-card figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: grid;
  gap: 2px;
  padding: .85rem 1rem;
  border: 2px solid var(--kw-burgundy);
  border-radius: 9px;
  background: rgb(255 247 229 / 94%);
  color: var(--kw-burgundy);
}
.kw-dog-card figcaption span { font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.kw-dog-card figcaption strong { font-family: var(--kw-display); font-size: clamp(1.1rem, 2vw, 1.45rem); }
.kw-pack__note { margin: 2.8rem 0 0; color: #f6deea; font-size: .82rem; text-align: center; }

/* Content blocks */
.kwispel-page .dog-benefits { background: var(--kw-paper); }
.kwispel-page .dog-benefits .section-heading { text-align: center; margin-inline: auto; }
.kwispel-page .section-heading h2 { color: var(--kw-brown); font-size: clamp(2.6rem, 5vw, 4.7rem); line-height: 1; }
.kwispel-page .dog-benefits__grid { gap: 14px; border: 0; }

.kwispel-page .dog-benefit {
  min-height: 250px;
  border: 1px solid var(--kw-line) !important;
  border-radius: 14px;
  background: var(--kw-cream);
}

.kwispel-page .dog-benefit:nth-child(2) { background: #f6d3e3; }
.kwispel-page .dog-benefit:nth-child(3) { background: #ffe58d; }
.kwispel-page .dog-benefit svg { color: var(--kw-burgundy); }
.kwispel-page .dog-benefit h3 { color: var(--kw-brown); }
.kwispel-page .dog-benefit p { color: #765d4d; }

.kwispel-page .dog-steps {
  position: relative;
  padding-bottom: clamp(6rem, 10vw, 9rem);
  overflow: hidden;
  background: var(--kw-yellow);
  color: var(--kw-brown);
}

.kwispel-page .dog-steps::after {
  position: absolute;
  right: -2%;
  bottom: 0;
  left: 0;
  height: 26px;
  background: radial-gradient(circle at 14px -2px, transparent 17px, var(--kw-cream) 18px) 0 0 / 28px 28px repeat-x;
  content: "";
}

.kwispel-page .dog-steps .eyebrow { color: var(--kw-burgundy); }
.kwispel-page .dog-steps .section-heading p { color: #70450e; }
.kwispel-page .dog-steps__grid { gap: 14px; background: transparent; }
.kwispel-page .dog-step { min-height: 300px; border: 2px solid var(--kw-burgundy); border-radius: 14px; background: var(--kw-cream); color: var(--kw-brown); box-shadow: 8px 9px 0 var(--kw-burgundy); }
.kwispel-page .dog-step:nth-child(2) { background: var(--kw-pink-light); transform: translateY(16px); }
.kwispel-page .dog-step:nth-child(3) { background: var(--kw-blue); }
.kwispel-page .dog-step__number { color: var(--kw-coral); }
.kwispel-page .dog-step p { color: #765d4d; }

.kwispel-page .dog-options { background: var(--kw-cream); }
.kwispel-page .dog-shape { border: 2px solid var(--kw-brown); border-radius: 12px; background: var(--kw-pink-light); box-shadow: 8px 8px 0 var(--kw-yellow); }
.kwispel-page .dog-shape svg { color: var(--kw-burgundy); }
.kwispel-page .dog-size { border-color: var(--kw-line); }
.kwispel-page .dog-size b { background: var(--kw-coral); }
.kwispel-page .button--text { color: var(--kw-burgundy); text-decoration-color: var(--kw-yellow); }

.kwispel-page .dog-material { background: var(--kw-burgundy); color: var(--kw-cream); }
.kwispel-page .dog-material h2 { color: var(--kw-pink-light); }
.kwispel-page .dog-material .eyebrow { color: var(--kw-yellow); }
.kwispel-page .dog-material__statement p { color: #f2dce6; }
.kwispel-page .dog-answers { border-color: rgb(255 247 229 / 25%); }
.kwispel-page .dog-answer { border-color: rgb(255 247 229 / 25%); }
.kwispel-page .dog-answer__icon { border-color: var(--kw-yellow); color: var(--kw-yellow); }
.kwispel-page .dog-answer h3 { color: var(--kw-cream); }
.kwispel-page .dog-answer p { color: #eacfdc; }

.kwispel-page .dog-faq { background: var(--kw-cream); }
.kwispel-page .dog-faq h2 { color: var(--kw-brown); }
.kwispel-page .dog-faq details { border-color: var(--kw-line); }
.kwispel-page .dog-faq summary { color: var(--kw-brown); }
.kwispel-page .dog-faq summary::after { color: var(--kw-coral); }

.kwispel-page .dog-final { background: var(--kw-cream); }
.kwispel-page .dog-final__card {
  border: 2px solid var(--kw-burgundy);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--kw-pink) 0%, var(--kw-yellow) 100%);
  color: var(--kw-burgundy);
  box-shadow: 10px 11px 0 var(--kw-burgundy);
}
.kwispel-page .dog-final h2 { color: var(--kw-burgundy); }
.kwispel-page .dog-final p { color: #704529; }
.kwispel-page .dog-final .button { background: var(--kw-burgundy); color: var(--kw-cream); }
.kwispel-page .dog-business { background: var(--kw-cream); }

/* Branded legal footer */
.kw-footer.site-footer {
  border-top: 0;
  background: var(--kw-burgundy-deep);
  color: var(--kw-cream);
}
.kw-footer .kw-logo--footer { margin-bottom: 1.25rem; font-size: 2.6rem; }
.kw-footer h3 { color: var(--kw-yellow); font-family: var(--kw-body); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.kw-footer p, .kw-footer a, .kw-footer span, .kw-footer small { color: #f0d6e1; }
.kw-footer .footer-bottom { border-color: rgb(255 247 229 / 18%); }

/* Configurator */
body.kwispel-builder {
  --kw-veld: linear-gradient(135deg, #e88ec0 0%, #f3aaa5 26%, #ffcb3f 100%);
  --kw-kop-hoek: 18px 18px 0 0;
  background: var(--kw-veld);
  background-attachment: fixed;
}

body.kwispel-builder::before { display: none; }

/* Geen border-radius en geen achtergrond hier: die zitten allebei op het vlak
   achter de kopbalk, zie de toelichting daar. */
.kwispel-builder .cf-site-header {
  width: min(1200px, calc(100% - 40px));
  margin: 24px auto 0;
}

.kwispel-builder .cf-header-inner {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 78px;
}
.kwispel-builder .cf-header-meta { justify-self: center; }
.kwispel-builder .cf-home-link { justify-self: end; }
.kwispel-builder .cf-site-header .kw-logo {
  color: var(--kw-pink);
  font-family: var(--kw-display);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.045em;
}
.kwispel-builder .cf-header-meta { color: #f2dce6; }
.kwispel-builder .cf-header-dot { background: var(--kw-yellow); box-shadow: 0 0 0 4px rgb(255 207 63 / 18%); }
.kwispel-builder .cf-home-link { color: var(--kw-pink-light); font-family: var(--kw-body); font-size: .88rem; font-weight: 800; }
.kwispel-builder .cf-home-link:hover { color: var(--kw-yellow); }

/* Productbalk op de bouwpagina's (ketting, hout): even breed als hun kopbalk. */
.kwispel-builder > .kw-productbalk {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.kwispel-builder main {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 1px 0 3.5rem;
  background: var(--kw-cream);
  box-shadow: var(--kw-shadow);
}

.kwispel-builder .cf-intro,
.kwispel-builder .cf-progress { width: min(1080px, calc(100% - 48px)); }
.kwispel-builder .cf-intro {
  display: grid;
  justify-items: center;
  padding: 18px 0 10px;
  text-align: center;
}
.kwispel-builder .cf-intro h1 {
  width: 100%;
  color: var(--kw-brown);
  font-size: clamp(2rem, 3.8vw, 3rem);
  text-wrap: balance;
}
.kwispel-builder .cf-intro > .cf-kicker {
  width: fit-content;
  max-width: none;
  /* Even veel lucht boven als onder. De ruimte erboven komt van de
     intro-padding; die twee stonden op 18 en 8. */
  margin-bottom: 10px;
  color: var(--kw-coral);
}
.kwispel-builder .cf-intro > .cf-intro-feiten {
  width: min(62ch, 100%);
  margin: 10px auto 0;
  text-wrap: balance;
}

.kwispel-builder .cf-step { border-radius: 10px 10px 0 0; }
.kwispel-builder .cf-step { color: #604935; }
.kwispel-builder .cf-step:disabled { opacity: .74; }
.kwispel-builder .cf-step.is-current { background: var(--kw-pink-light); }
.kwispel-builder .cf-step.is-current::after { background: var(--kw-burgundy); }
.kwispel-builder .cf-step.is-current .cf-step-number { border-color: var(--kw-burgundy); background: var(--kw-burgundy); }
.kwispel-builder .cf-step.is-visited:not(.is-current)::after,
.kwispel-builder .cf-step.is-visited:not(.is-current) .cf-step-number { background: var(--kw-yellow); border-color: var(--kw-yellow); color: var(--kw-burgundy); }

.kwispel-builder .cf-builder {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.kwispel-builder .cf-layout { gap: 18px; }

.kwispel-builder .cf-panel {
  border: 2px solid var(--kw-burgundy);
  border-radius: 14px;
  background: var(--kw-paper);
  box-shadow: 8px 9px 0 var(--kw-burgundy);
}
.kwispel-builder .cf-panel,
.kwispel-builder .cf-panel h2 { color: var(--kw-burgundy-deep); }
.kwispel-builder .cf-fieldset legend,
.kwispel-builder .cf-field-label { color: var(--kw-burgundy); }
.kwispel-builder .cf-panel-intro,
.kwispel-builder .cf-choice-sub,
.kwispel-builder .cf-help,
.kwispel-builder .cf-counter,
.kwispel-builder .cf-summary dt,
.kwispel-builder .cf-final-note,
.kwispel-builder .cf-link-button { color: #604935; }

.kwispel-builder .cf-choice {
  border-color: var(--kw-line);
  border-radius: 10px;
  background: var(--kw-cream);
}
.kwispel-builder .cf-choice:hover { border-color: var(--kw-burgundy); box-shadow: 0 7px 0 rgb(74 0 31 / 10%); }
.kwispel-builder .cf-choice[aria-pressed="true"] { border-color: var(--kw-burgundy); background: var(--kw-pink-light); box-shadow: 0 0 0 2px rgb(74 0 31 / 8%); }
.kwispel-builder .cf-choice[aria-pressed="true"]::after { background: var(--kw-yellow); }
.kwispel-builder .cf-choice-title,
.kwispel-builder .cf-choice-price,
.kwispel-builder .cf-font-sample,
.kwispel-builder .cf-corner-menu-title,
.kwispel-builder .cf-summary dd { color: var(--kw-burgundy-deep); }
.kwispel-builder .cf-choice-meer { background: var(--kw-burgundy); color: var(--kw-cream); }
.kwispel-builder .cf-choice-icon, .kwispel-builder .cf-icon-preview { color: var(--kw-burgundy); }
.kwispel-builder .cf-popular { background: var(--kw-yellow); color: var(--kw-burgundy); }

.kwispel-builder .cf-input {
  border: 2px solid var(--kw-line);
  border-radius: 10px;
  background: #fff;
}
.kwispel-builder .cf-input:focus { border-color: var(--kw-burgundy); box-shadow: 0 0 0 4px rgb(237 155 195 / 30%); }

.kwispel-builder .cf-button-primary {
  border-color: var(--kw-yellow);
  background: var(--kw-yellow);
  color: var(--kw-burgundy);
  box-shadow: 0 6px 0 #d39516;
}
.kwispel-builder .cf-button-primary:hover { background: #ffdf74; transform: translateY(-2px); }

.kwispel-builder .cf-preview-card {
  border: 2px solid var(--kw-burgundy);
  border-radius: 14px;
  background: var(--kw-paper);
  color: var(--kw-burgundy-deep);
  box-shadow: 8px 9px 0 var(--kw-yellow);
}
.kwispel-builder .cf-preview-head h2,
.kwispel-builder .cf-price,
.kwispel-builder .cf-price small,
.kwispel-builder .cf-size-readout,
.kwispel-builder .cf-preview-note,
.kwispel-builder .cf-trust-list { color: var(--kw-burgundy-deep); }
.kwispel-builder .cf-preview-kicker { color: #b82d35; }
.kwispel-builder .cf-side-toggle { border-color: var(--kw-burgundy); background: #f5e6d7; }
.kwispel-builder .cf-side-toggle button { color: var(--kw-burgundy); }
.kwispel-builder .cf-side-toggle button[aria-pressed="true"] { background: var(--kw-burgundy); color: #fff; }
.kwispel-builder .cf-stage,
.kwispel-builder .cf-spin-stage { border-color: var(--kw-burgundy); background: linear-gradient(180deg, #efabc9 0%, var(--kw-yellow) 100%); }
/* Op dat roze-gele vlak is een cremekleurige pil nauwelijks te onderscheiden.
   Bordeaux met creme erin is hier het contrast, net als de knop van de
   gravurezijde die aanstaat. */
.kwispel-builder .cf-spin-knop { border-color: var(--kw-burgundy); background: var(--kw-burgundy); color: var(--kw-cream); box-shadow: 0 3px 0 #310014; }
.kwispel-builder .cf-spin-knop:hover { background: #66082f; }
.kwispel-builder .cf-spin-hint { color: var(--kw-burgundy); opacity: .62; }
/* Zwart wordt een grauwe veeg op het roze; bordeaux hoort bij de rest. */
.kwispel-builder .cf-spin-schaduw { background: radial-gradient(closest-side, rgb(74 0 31 / 42%), transparent); }
.kwispel-builder .cf-included { background: var(--kw-yellow); color: var(--kw-burgundy); }
.kwispel-builder .cf-trust-list span { color: #b82d35; }

.kwispel-builder .cf-photos { padding-top: 2rem; }
.kwispel-builder .cf-photos-box { padding: clamp(14px, 3vw, 28px); border: 2px solid var(--kw-burgundy); border-radius: 14px; background: var(--kw-burgundy); box-shadow: 8px 9px 0 var(--kw-yellow); }
/* Het uitlegblok krijgt de lichte variant: het is lopende tekst om te lezen,
   niet een blok om naar te kijken zoals de fotostrook. */
.kwispel-builder .cf-uitleg-box { border: 2px solid var(--kw-line); border-radius: 14px; background: var(--kw-cream); box-shadow: 8px 9px 0 var(--kw-pink); }
.kwispel-builder .cf-uitleg-box h2, .kwispel-builder .cf-uitleg-box h3 { color: var(--kw-burgundy-deep); }
.kwispel-builder .cf-uitleg-lead { border-color: var(--kw-pink); }
.kwispel-builder .cf-uitleg-item { border-color: var(--kw-burgundy); }
.kwispel-builder .cf-uitleg-box a { color: var(--kw-burgundy); }
.kwispel-builder .cf-intro-feiten strong { color: var(--kw-burgundy-deep); }
.kwispel-builder .cf-photos-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.2rem; color: var(--kw-cream); }
.kwispel-builder .cf-photos-heading .cf-kicker { margin: 0; color: var(--kw-yellow); }
.kwispel-builder .cf-photos-heading h2 { margin: 0; color: var(--kw-pink-light); font-size: clamp(1.8rem, 4vw, 3.4rem); }
.kwispel-builder .cf-photo { border-radius: 12px; }
.kwispel-builder .cf-photo img { aspect-ratio: 4 / 5; }
/* De productfoto's zijn vierkant en uitgeknipt op wit; op 4 / 5 krijgen ze
   witte banen boven en onder, en het onderschrift komt dan los van de foto te
   staan. Deze regel hoort hier en niet in configurator.css: die staat eerder in
   de cascade en verliest bij gelijke specificiteit van de regel hierboven. */
.kwispel-builder .cf-photos--product .cf-photo img { aspect-ratio: 1; }
.kwispel-builder .cf-photo-index { top: auto; right: 10px; bottom: 10px; left: 10px; padding: 7px 10px; border: 2px solid var(--kw-burgundy); border-radius: 8px; background: rgb(255 247 229 / 94%); color: var(--kw-burgundy); text-transform: uppercase; }
/* Bij de Kwispel Club staat de hond in beeld en is een balk onderin prima. Bij
   de productfoto's hangt de penning juist onderaan, aan de halsband, en dekte
   die balk precies af waar het om gaat.
   De hond staat midden in beeld, dus de onderhoeken zijn achtergrond. Daar
   past een klein label dat de penning vrijlaat en toch onderaan staat. */
.kwispel-builder .cf-photos--product .cf-photo-index {
  top: auto; right: auto; bottom: 0; left: 0;
  padding: 3px 6px; border-width: 1.5px;
  /* De onderrand ligt op de rand van de foto en tekent daar een streep onder
     het woord. Er valt onder het label niets meer af te bakenen, dus weg. */
  border-bottom: 0;
  /* Tegen de hoek aan, dus alleen de kant die het beeld in steekt is rond. De
     andere twee hoeken lopen gelijk met de rand van de foto; die knipt de
     tegel zelf al af met zijn eigen ronding. */
  border-radius: 0 6px 0 0;
  font-size: 0.55rem; letter-spacing: 0.02em;
}
/* De tegel heeft een lijn van een pixel. Die valt weg zolang de foto op wit
   staat, maar op het donkere vlak leest hij als een kier tussen het label en
   de rand. De foto vult de tegel helemaal en heeft zijn eigen achtergrond, dus
   die lijn heeft hier niets te scheiden. */
.kwispel-builder .cf-photos--product .cf-photo { border: 0; }
.kwispel-builder .cf-reviews { display: none; }

/* ---------------------------------------------------------------------------
   Foto-gravure (fotogravure.html)

   Die pagina deelt de hele configuratoropbouw met de penning, dus het meeste
   hierboven geldt daar al. Wat hier staat zijn de onderdelen die alleen op die
   pagina voorkomen: het houten plaatje, het vak om een foto in te slepen en de
   twee voorbeelden onderaan.
   --------------------------------------------------------------------------- */

/* Geen roze-gele verloop achter het plaatje: het hout heeft zelf al een warme
   kleur en gaat daar troebel van staan. Bordeaux laat het juist oplichten. */
.kwispel-builder .cf-stage--photo {
  background: var(--kw-burgundy);
}

.kwispel-builder .cf-plate {
  border: 2px solid var(--kw-burgundy);
  border-radius: 10px;
  box-shadow: 6px 7px 0 var(--kw-yellow);
}

.kwispel-builder .cf-plate figcaption { font-family: var(--kw-display); }
.kwispel-builder .cf-plate--empty { color: rgb(74 0 31 / 62%); }

.kwispel-builder .cf-drop {
  border: 2px dashed var(--kw-burgundy);
  border-radius: 12px;
  background: rgb(255 255 255 / 62%);
}

.kwispel-builder .cf-drop.is-over,
.kwispel-builder .cf-drop:focus-within {
  border-color: var(--kw-coral);
  background: var(--kw-pink-light);
}

.kwispel-builder .cf-drop.is-filled {
  border-style: solid;
  border-color: var(--kw-burgundy);
  background: #fff;
}

.kwispel-builder .cf-drop-label strong { color: var(--kw-burgundy-deep); }
.kwispel-builder .cf-drop-label span,
.kwispel-builder .cf-tips,
.kwispel-builder .cf-help--warn { color: #604935; }

.kwispel-builder .cf-privacy-note {
  border-left: 4px solid var(--kw-coral);
  border-radius: 0 8px 8px 0;
  background: rgb(237 155 195 / 22%);
  color: #604935;
}

.kwispel-builder .cf-privacy-note strong { color: var(--kw-burgundy); }

/* Zelfde kader als de fotostrook bij de penning: bordeaux blok met een gele
   slagschaduw, zodat de twee pagina's onderaan hetzelfde ritme houden. */
/* De onderrand komt hier van de crème plaat zelf; de 80px uit de basis zou daar
   nog eens bovenop komen. */
.kwispel-builder .cf-examples { margin-bottom: 10px; padding-top: 2rem; }

.kwispel-builder .cf-examples-box {
  padding: clamp(14px, 3vw, 28px);
  border: 2px solid var(--kw-burgundy);
  border-radius: 14px;
  background: var(--kw-burgundy);
  box-shadow: 8px 9px 0 var(--kw-yellow);
}

.kwispel-builder .cf-examples-heading {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 1.2rem;
  color: var(--kw-cream);
}

.kwispel-builder .cf-examples-heading .cf-kicker { margin: 0; color: var(--kw-yellow); }

/* Van klein kapitaallabel naar een echte kop: in dit thema is dit blok geen
   bijschrift meer maar een eigen hoofdstuk. */
.kwispel-builder .cf-examples-title {
  margin: 0;
  color: var(--kw-pink-light);
  font-family: var(--kw-display);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
}

.kwispel-builder .cf-example-media {
  border: 2px solid var(--kw-burgundy);
  border-radius: 12px;
  background: var(--kw-cream);
}

.kwispel-builder .cf-example figcaption {
  padding-top: 9px;
  color: var(--kw-cream);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kwispel-builder .kw-footer {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto 24px;
  border-radius: 0 0 18px 18px;
}

.kwispel-builder .cf-mobile-action { border-color: var(--kw-burgundy); background: var(--kw-cream); }

/* De cookiebalk in de Kwispel-kleuren. De opbouw staat in styles.css; hier
   alleen de kleuren, zodat hij niet als een vreemde witte kaart onder een
   bordeauxe pagina hangt. */
.kwispel-page .cc-binnen,
.kwispel-builder .cc-binnen {
  border: 2px solid var(--kw-burgundy);
  border-radius: 14px;
  background: var(--kw-paper);
  box-shadow: 8px 9px 0 var(--kw-yellow);
}

.kwispel-page .cc-tekst h2,
.kwispel-builder .cc-tekst h2 { color: var(--kw-burgundy); font-family: var(--kw-display); font-weight: 400; }
.kwispel-page .cc-tekst p,
.kwispel-builder .cc-tekst p { color: #604935; }

.kwispel-page .cc-knop,
.kwispel-builder .cc-knop {
  border: 2px solid var(--kw-burgundy);
  border-radius: 10px;
  background: var(--kw-paper);
  color: var(--kw-burgundy);
  font-family: var(--kw-body);
  font-weight: 800;
}

.kwispel-page .cc-knop:hover,
.kwispel-builder .cc-knop:hover { background: var(--kw-pink-light); }

.kwispel-page .cc-knop--ja,
.kwispel-builder .cc-knop--ja {
  border-color: var(--kw-yellow);
  background: var(--kw-yellow);
  color: var(--kw-burgundy);
  box-shadow: 0 4px 0 #d39516;
}

.kwispel-page .cc-knop--ja:hover,
.kwispel-builder .cc-knop--ja:hover { background: #ffdf74; }

.kwispel-page .cc-voorkeuren:hover,
.kwispel-builder .cc-voorkeuren:hover { color: var(--kw-yellow); }

@media (max-width: 900px) {
  /* Op een klein scherm loopt de pagina van rand tot rand. Dan hoort de marge
     boven de kopbalk en onder de voettekst er ook af: die liet een streepje
     van de roze achtergrond zien, wat op een breed scherm een bewuste lijst om
     de pagina is maar op een telefoon een kier lijkt. */
  .kwispel-page > .kw-header,
  .kwispel-page > .kw-productbalk,
  .kwispel-page > main,
  .kwispel-page > .kw-footer,
  .kwispel-builder .cf-site-header,
  .kwispel-builder > .kw-productbalk,
  .kwispel-builder main,
  .kwispel-builder .kw-footer { width: 100%; margin-block: 0; margin-inline: 0; border-radius: 0; }

  /* Randloos betekent ook: geen ronding meer op het vlak achter de kopbalk. */
  .kwispel-page,
  body.kwispel-builder { --kw-kop-hoek: 0; }

  .kwispel-page .dog-hero__grid { grid-template-columns: 1fr; }
  .kwispel-page .dog-hero__visual { width: min(560px, 90%); }
  .kw-mosaic__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 250px 220px; }
  .kw-tile--pink, .kw-tile--photo { grid-row: auto; }
  .kw-tile--photo { grid-column: 2; grid-row: 1 / 3; }
  .kw-pack__heading { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 720px) {
  .kw-header .nav-shell { min-height: 68px; }
  .kw-header .nav-toggle span,
  .kw-header .nav-toggle::before,
  .kw-header .nav-toggle::after { background: var(--kw-cream); }
  .kw-header .site-nav { background: var(--kw-burgundy); }
  .kw-header .site-nav a:not(.button) { color: var(--kw-cream); }
  .kwispel-page .dog-hero { padding-top: 3rem; }
  .kwispel-page .dog-hero__claim { font-size: clamp(3.1rem, 15vw, 5rem); }
  .kwispel-page .dog-hero__visual { width: 94%; }
  .kwispel-page .dog-hero__tag { right: -.4rem; }
  .kw-mosaic__grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(220px, auto)); }
  .kw-tile--photo { grid-column: auto; grid-row: auto; min-height: 360px; }
  .kwispel-page .dog-step:nth-child(2) { transform: none; }
  .kw-pack__grid { grid-template-columns: 1fr; gap: 22px; }
  .kw-dog-card { width: min(520px, 100%); justify-self: center; box-shadow: 6px 7px 0 var(--kw-yellow); }
  .kw-dog-card:nth-child(2), .kw-dog-card:nth-child(3) { transform: none; }

  .kwispel-builder .cf-header-inner { grid-template-columns: 1fr auto; }
  .kwispel-builder .cf-header-meta { display: none; }
  .kwispel-builder .cf-intro,
  .kwispel-builder .cf-progress { width: min(100% - 28px, 1080px); }
  .kwispel-builder .cf-intro h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .kwispel-builder .cf-panel,
  .kwispel-builder .cf-preview-card { box-shadow: 5px 6px 0 var(--kw-burgundy); }
  /* Kleinere slagschaduw, net als bij de panelen: op deze breedte valt de
     volle 8 bij 9 buiten de marge van de balk en wordt hij afgesneden. */
  .kwispel-page .cc-binnen,
  .kwispel-builder .cc-binnen { box-shadow: 5px 6px 0 var(--kw-yellow); }

  .kwispel-builder .cf-photos-heading,
  .kwispel-builder .cf-examples-heading { display: block; }
  .kwispel-builder .cf-photos-heading h2,
  .kwispel-builder .cf-examples-title { margin-top: .4rem; }
}

@media (max-width: 520px) {
  .kwispel-page,
  .kwispel-builder { overflow-x: clip; }
  .kwispel-page .dog-hero__claim {
    max-width: 100%;
    font-size: clamp(2.85rem, 14.5vw, 4rem);
    overflow-wrap: break-word;
  }
  .kwispel-page .dog-hero__buy { display: grid; }
  .kwispel-page .dog-hero__price { padding-left: .15rem; }
  .kwispel-page .dog-hero__checks { display: grid; }
  .kw-tile { min-height: 230px; }
  .kw-footer .footer-grid { gap: 2.2rem; }

  .kwispel-builder .cf-header-inner { gap: 10px; }
  .kwispel-builder .cf-intro h1 {
    font-size: clamp(1.8rem, 8.5vw, 2.3rem);
    line-height: 1.02;
    text-wrap: balance;
  }
  .kwispel-builder .cf-preview-card { padding: 14px; }
  .kwispel-builder .cf-panel { padding-inline: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .kwispel-page *, .kwispel-page *::before, .kwispel-page *::after,
  .kwispel-builder *, .kwispel-builder *::before, .kwispel-builder *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   POOTRET OP HOUT — speels digitaal atelier
   -------------------------------------------------------------------------- */
.pootret-page { --pootret-green: #9bcf70; --pootret-ink: #4a001f; }
.pootret-page main { padding-bottom: 0; overflow: clip; }
.pootret-page .pootret-header .cf-header-inner { grid-template-columns: 1fr auto 1fr; }
.pootret-page .pootret-header .cf-home-link { justify-self: end; }
.pootret-nav { display: flex; gap: 1.5rem; }
.pootret-nav a { color: var(--kw-cream); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.pootret-nav a:hover { color: var(--kw-yellow); }

.pootret-hero {
  position: relative;
  display: grid;
  min-height: 650px;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 7vw, 6rem);
  overflow: hidden;
  background: var(--kw-burgundy);
  color: var(--kw-cream);
}
.pootret-hero::before { content: ""; position: absolute; width: 410px; height: 410px; left: -190px; bottom: -230px; border: 80px solid var(--kw-pink); border-radius: 50%; opacity: .72; }
.pootret-hero::after { content: ""; position: absolute; width: 180px; height: 90px; top: 30px; right: -35px; background: radial-gradient(circle, var(--kw-yellow) 0 7px, transparent 8px) 0 0 / 32px 32px; transform: rotate(12deg); }
.pootret-hero__copy, .pootret-hero__art { position: relative; z-index: 1; }
.pootret-pill { display: inline-block; padding: .5rem .8rem; margin: 0 0 1.1rem; border: 2px solid var(--kw-pink); border-radius: 999px; color: var(--kw-pink-light); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-2deg); }
.pootret-hero h1 { max-width: 8ch; margin: 0; color: var(--kw-cream); font-family: var(--kw-display); font-size: clamp(3.8rem, 7vw, 7.4rem); font-weight: 400; letter-spacing: -.045em; line-height: .88; }
.pootret-hero h1 span { color: var(--kw-yellow); }
.pootret-hero__lead { max-width: 53ch; margin: 1.5rem 0 1.7rem; color: #f0dce4; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.65; }
.pootret-hero .cf-button { display: inline-flex; min-height: 54px; align-items: center; padding-inline: 1.3rem; text-decoration: none; }
.pootret-proof { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; padding: 0; margin: 1.5rem 0 0; color: #ead2dc; font-size: .78rem; font-weight: 800; list-style: none; }
.pootret-proof span { color: var(--kw-yellow); }
.pootret-hero__art { min-height: 500px; }
.pootret-polaroid { position: absolute; width: min(49%, 300px); padding: 10px 10px 45px; margin: 0; border: 2px solid var(--kw-burgundy-deep); background: var(--kw-paper); box-shadow: 12px 15px 0 rgb(49 0 20 / 45%); }
.pootret-polaroid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pootret-polaroid figcaption { position: absolute; right: 0; bottom: 10px; left: 0; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: 1.15rem; text-align: center; }
.pootret-polaroid--photo { top: 8%; left: 0; transform: rotate(-7deg); }
.pootret-polaroid--wood { right: 0; bottom: 3%; transform: rotate(6deg); }
.pootret-polaroid--wood img { object-fit: contain; background: #c0925a; }
.pootret-arrow { position: absolute; z-index: 2; top: 46%; left: 47%; color: var(--kw-yellow); font-family: var(--kw-display); font-size: clamp(3rem, 6vw, 5rem); transform: rotate(13deg); }
.pootret-scribble { position: absolute; z-index: 3; top: 0; right: 2%; padding: .75rem 1rem; border-radius: 50%; background: var(--kw-yellow); color: var(--kw-burgundy); font-family: var(--kw-display); font-size: 1rem; line-height: 1.05; text-align: center; transform: rotate(8deg); }

.pootret-how { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 7vw, 6rem); background: var(--kw-cream); }
.pootret-section-heading { max-width: 750px; margin-bottom: 2.5rem; }
.pootret-section-heading h2, .pootret-studio__heading h2, .pootret-faq h2 { margin: 0; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 400; letter-spacing: -.035em; line-height: .96; }
.pootret-section-heading > p:last-child { max-width: 57ch; color: #765d4d; }
.pootret-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0; margin: 0; list-style: none; }
.pootret-how__grid li { position: relative; min-height: 270px; padding: 1.5rem; border: 2px solid var(--kw-burgundy); border-radius: 14px; background: var(--kw-paper); box-shadow: 7px 8px 0 var(--kw-burgundy); }
.pootret-how__grid li:nth-child(2) { background: var(--kw-pink-light); transform: translateY(16px) rotate(1deg); }
.pootret-how__grid li:nth-child(3) { background: var(--kw-yellow); transform: rotate(-1deg); }
.pootret-how__grid li > span { position: absolute; top: 1rem; right: 1rem; color: var(--kw-burgundy); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.pootret-how__grid li > div { margin: 1.5rem 0 2.2rem; font-size: 2.7rem; }
.pootret-how__grid h3 { margin: 0 0 .55rem; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: 1.45rem; font-weight: 400; }
.pootret-how__grid p { margin: 0; color: #604935; line-height: 1.55; }

.pootret-studio { padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem); background: var(--kw-pink); }
.pootret-studio__heading { display: grid; grid-template-columns: 1fr .7fr; gap: 2rem; align-items: end; max-width: 1080px; margin: 0 auto 2.5rem; }
.pootret-studio__heading > p { max-width: 52ch; margin: 0; color: var(--kw-burgundy); font-weight: 700; line-height: 1.6; }
.pootret-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: 18px; max-width: 1080px; margin: 0 auto; align-items: start; }
.pootret-controls { display: grid; gap: 12px; }
.pootret-control-group { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: clamp(1.2rem, 3vw, 2rem); border: 2px solid var(--kw-burgundy); border-radius: 14px; background: var(--kw-paper); box-shadow: 6px 7px 0 var(--kw-burgundy); }
.pootret-control-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--kw-burgundy); color: var(--kw-cream); font-size: .75rem; font-weight: 900; }
.pootret-control-group h3 { margin: 4px 0 1.2rem; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: 1.35rem; font-weight: 400; }
.pootret-drop { display: grid; min-height: 125px; place-items: center; align-content: center; gap: 3px; padding: 1rem; border: 2px dashed var(--kw-burgundy); border-radius: 10px; background: var(--kw-cream); color: var(--kw-burgundy); cursor: pointer; text-align: center; transition: .18s ease; }
.pootret-drop:hover, .pootret-drop.is-over { background: var(--kw-pink-light); transform: translateY(-2px); }
.pootret-drop.is-filled { border-style: solid; background: #fff; }
.pootret-drop__icon { display: grid; width: 34px; height: 34px; margin-bottom: 5px; place-items: center; border-radius: 50%; background: var(--kw-yellow); font-size: 1.35rem; font-weight: 900; }
.pootret-drop strong { max-width: 100%; overflow-wrap: anywhere; }
.pootret-drop small { color: #765d4d; }
.pootret-error { margin: .6rem 0 0; color: #9f121c; font-size: .8rem; font-weight: 800; }
.pootret-upload-note { margin: .7rem 0 0; color: #765d4d; font-size: .69rem; line-height: 1.45; }
.pootret-upload-note a { color: var(--kw-burgundy); font-weight: 900; text-underline-offset: 2px; }
.pootret-crop-hint { margin: 0 0 1rem; color: #765d4d; font-size: .72rem; font-weight: 700; line-height: 1.45; }
.pootret-range { display: grid; grid-template-columns: 44px 1fr 48px; gap: 10px; align-items: center; color: var(--kw-burgundy); font-size: .8rem; font-weight: 900; }
.pootret-range input { width: 100%; accent-color: var(--kw-burgundy); }
.pootret-range output { color: #765d4d; text-align: right; }
.pootret-nudge { display: grid; width: fit-content; grid-template-columns: repeat(4, 40px); gap: 6px; margin-top: 1rem; }
.pootret-nudge button { width: 40px; height: 40px; border: 2px solid var(--kw-burgundy); border-radius: 8px; background: var(--kw-cream); color: var(--kw-burgundy); font-weight: 900; cursor: pointer; }
.pootret-nudge button:hover { background: var(--kw-yellow); }
.pootret-text-button { padding: .7rem 0 0; border: 0; background: none; color: var(--kw-burgundy); font: inherit; font-size: .76rem; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pootret-choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pootret-choice-row button { display: grid; min-width: 0; gap: 2px; padding: .8rem .55rem; border: 2px solid var(--kw-line); border-radius: 10px; background: var(--kw-cream); color: var(--kw-burgundy); font: inherit; cursor: pointer; text-align: left; }
.pootret-choice-row button[aria-pressed="true"] { border-color: var(--kw-burgundy); background: var(--kw-pink-light); box-shadow: 0 4px 0 var(--kw-burgundy); transform: translateY(-2px); }
.pootret-choice-row strong { font-size: .8rem; }
.pootret-choice-row small { color: #765d4d; font-size: .66rem; }
.pootret-lines { display: block; width: 100%; height: 28px; margin-bottom: 6px; background: repeating-linear-gradient(165deg, transparent 0 4px, var(--kw-burgundy) 5px 6px); }
.pootret-lines--soft { opacity: .35; }
.pootret-lines--bold { background-size: auto; background-image: repeating-linear-gradient(165deg, transparent 0 2px, var(--kw-burgundy) 3px 5px); }
.pootret-choice-row--wood i { width: 28px; height: 28px; margin-bottom: 6px; border: 1px solid rgb(74 0 31 / 30%); border-radius: 50%; background: var(--chip); box-shadow: inset 0 0 0 4px rgb(255 255 255 / 25%); }
.pootret-name { position: relative; display: grid; gap: 7px; margin-top: 1.2rem; color: var(--kw-burgundy); font-size: .78rem; font-weight: 900; }
.pootret-name span small { color: #765d4d; font-weight: 600; }
.pootret-name input { min-height: 47px; padding: .7rem 3.5rem .7rem .8rem; border: 2px solid var(--kw-line); border-radius: 9px; background: #fff; color: var(--kw-burgundy); font: inherit; }
.pootret-name input:focus { border-color: var(--kw-burgundy); outline: 3px solid rgb(237 155 195 / 35%); }
.pootret-name output { position: absolute; right: 10px; bottom: 14px; color: #8c7261; font-size: .67rem; }

.pootret-preview { position: sticky; top: 96px; padding: clamp(1rem, 3vw, 1.6rem); border: 2px solid var(--kw-burgundy); border-radius: 14px; background: var(--kw-burgundy); color: var(--kw-cream); box-shadow: 8px 9px 0 var(--kw-yellow); }
.pootret-preview__top { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.pootret-preview__top p { margin: 0 0 2px; color: var(--kw-pink); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pootret-preview__top h3 { margin: 0; color: var(--kw-cream); font-family: var(--kw-display); font-size: 1.55rem; font-weight: 400; }
.pootret-toggle { display: flex; padding: 3px; border: 1px solid var(--kw-pink); border-radius: 8px; }
.pootret-toggle button { padding: .45rem .55rem; border: 0; border-radius: 5px; background: transparent; color: var(--kw-pink-light); font: inherit; font-size: .64rem; font-weight: 900; cursor: pointer; }
.pootret-toggle button[aria-pressed="true"] { background: var(--kw-pink); color: var(--kw-burgundy); }
.pootret-canvas-wrap { position: relative; display: grid; overflow: hidden; aspect-ratio: 1; place-items: center; border: 2px solid var(--kw-pink); border-radius: 10px; background: linear-gradient(145deg, #e5c99f, #be8e56); }
.pootret-canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.pootret-canvas-wrap canvas.is-dragging { cursor: grabbing; }
.pootret-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 5px; padding: 2rem; background: linear-gradient(145deg, #ead4b3, #c5965c); color: var(--kw-burgundy); text-align: center; }
.pootret-empty[hidden] { display: none; }
.pootret-empty span { font-size: 3.4rem; filter: grayscale(1) sepia(.4); }
.pootret-empty strong { font-family: var(--kw-display); font-size: 1.45rem; font-weight: 400; }
.pootret-empty small { color: #604935; }
.pootret-preview-stamp { position: absolute; right: 10px; top: 10px; padding: .25rem .45rem; border: 1px solid rgb(74 0 31 / 45%); border-radius: 4px; background: rgb(255 247 229 / 70%); color: var(--kw-burgundy); font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transform: rotate(4deg); }
.pootret-canvas-wrap.is-original .pootret-preview-stamp { display: none; }
.pootret-preview__foot { display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 0; }
.pootret-preview__foot div { display: grid; }
.pootret-preview__foot span { color: var(--kw-pink); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.pootret-preview__foot strong { color: var(--kw-cream); font-size: .9rem; }
.pootret-preview__foot p { max-width: 25ch; margin: 0; color: #e6cbd6; font-size: .68rem; line-height: 1.4; text-align: right; }
.pootret-order { width: 100%; justify-content: center; min-height: 52px; }
.pootret-order:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .55; transform: none; box-shadow: none; }
.pootret-ai-state { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: .75rem; margin: 0 0 .65rem; border: 1px solid rgb(247 197 220 / 45%); border-radius: 9px; background: rgb(255 247 229 / 8%); }
.pootret-ai-state__spark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--kw-pink); color: var(--kw-burgundy); font-size: 1rem; }
.pootret-ai-state strong, .pootret-ai-state small { display: block; }
.pootret-ai-state strong { color: var(--kw-cream); font-size: .76rem; }
.pootret-ai-state small { margin-top: 2px; color: #dcbeca; font-size: .63rem; line-height: 1.35; }
.pootret-ai-state[data-state="loading"] .pootret-ai-state__spark { animation: pootret-spark 1.15s linear infinite; background: var(--kw-yellow); }
.pootret-ai-state[data-state="done"] { border-color: rgb(155 207 112 / 70%); background: rgb(155 207 112 / 12%); }
.pootret-ai-state[data-state="done"] .pootret-ai-state__spark { background: var(--pootret-green); }
.pootret-ai-state[data-state="error"] { border-color: rgb(242 92 84 / 70%); }
.pootret-ai-state[data-state="error"] .pootret-ai-state__spark { background: var(--kw-coral); color: #fff; }
.pootret-ai-button { display: inline-flex; width: 100%; min-height: 43px; align-items: center; justify-content: center; gap: 7px; padding: .65rem 1rem; margin-bottom: .65rem; border: 1px solid var(--kw-pink); border-radius: 8px; background: transparent; color: var(--kw-pink-light); font: inherit; font-size: .72rem; font-weight: 900; cursor: pointer; }
.pootret-ai-button:hover:not(:disabled) { background: var(--kw-pink); color: var(--kw-burgundy); }
.pootret-ai-button:disabled { cursor: not-allowed; opacity: .5; }
@keyframes pootret-spark { to { transform: rotate(360deg); } }
.pootret-price-note { margin: .8rem 0 0; color: #dcbeca; font-size: .65rem; line-height: 1.45; text-align: center; }

.pootret-real { padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 7vw, 6rem); background: var(--kw-yellow); }
.pootret-real__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; max-width: 920px; margin: 0 auto; }
.pootret-real figure { margin: 0; }
.pootret-real figure > div { overflow: hidden; aspect-ratio: 4 / 5; border: 2px solid var(--kw-burgundy); border-radius: 12px; background: #bd8c53; box-shadow: 8px 9px 0 var(--kw-burgundy); }
.pootret-real figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pootret-real figure:nth-of-type(2) img { object-fit: contain; }
.pootret-real figcaption { margin-top: 1.2rem; color: var(--kw-burgundy); font-weight: 900; }
.pootret-real figcaption span { display: inline-grid; width: 34px; height: 34px; margin-right: 6px; place-items: center; border-radius: 50%; background: var(--kw-burgundy); color: var(--kw-yellow); font-size: .7rem; text-transform: uppercase; }
.pootret-real__arrow { color: var(--kw-burgundy); font-family: var(--kw-display); font-size: clamp(2rem, 5vw, 4rem); }

.pootret-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 7vw, 6rem); padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 7vw, 6rem); background: var(--kw-cream); }
.pootret-faq details { border-bottom: 2px solid var(--kw-line); }
.pootret-faq summary { position: relative; padding: 1.4rem 3rem 1.4rem 0; color: var(--kw-burgundy); font-weight: 900; cursor: pointer; list-style: none; }
.pootret-faq summary::-webkit-details-marker { display: none; }
.pootret-faq summary::after { content: "+"; position: absolute; right: .4rem; top: .85rem; color: var(--kw-coral); font-family: var(--kw-display); font-size: 1.8rem; }
.pootret-faq details[open] summary::after { content: "−"; }
.pootret-faq details p { max-width: 62ch; margin: -.2rem 3rem 1.4rem 0; color: #765d4d; line-height: 1.6; }
.pootret-page .kw-footer { margin-bottom: 24px; }

@media (max-width: 900px) {
  .pootret-page .pootret-header .cf-header-inner { grid-template-columns: 1fr auto; }
  .pootret-nav { display: none; }
  .pootret-hero { grid-template-columns: 1fr; }
  .pootret-hero__art { width: min(620px, 100%); margin: 0 auto; }
  .pootret-workbench { grid-template-columns: 1fr; }
  .pootret-preview { position: relative; top: 0; grid-row: 1; width: min(620px, 100%); margin: 0 auto 8px; }
}

@media (max-width: 680px) {
  .pootret-hero { min-height: 0; padding-block: 3.5rem; }
  .pootret-hero h1 { font-size: clamp(3.3rem, 17vw, 5.2rem); }
  .pootret-hero__art { min-height: 390px; }
  .pootret-how__grid { grid-template-columns: 1fr; }
  .pootret-how__grid li, .pootret-how__grid li:nth-child(2), .pootret-how__grid li:nth-child(3) { min-height: 230px; transform: none; }
  .pootret-studio__heading, .pootret-faq { grid-template-columns: 1fr; }
  .pootret-real__pair { grid-template-columns: 1fr; }
  .pootret-real__arrow { transform: rotate(90deg); text-align: center; }
}

@media (max-width: 480px) {
  .pootret-page .cf-header-inner { padding-inline: 14px; }
  .pootret-page .cf-home-full { display: none; }
  .pootret-page .cf-home-compact { display: inline; }
  .pootret-hero__art { min-height: 325px; }
  .pootret-polaroid { width: 51%; padding: 7px 7px 34px; }
  .pootret-polaroid figcaption { bottom: 6px; font-size: .85rem; }
  .pootret-scribble { font-size: .73rem; }
  .pootret-control-group { grid-template-columns: 30px 1fr; padding: 1rem .8rem; }
  .pootret-control-number { width: 27px; height: 27px; }
  .pootret-choice-row { grid-template-columns: 1fr; }
  .pootret-choice-row button { grid-template-columns: 36px 1fr; align-items: center; }
  .pootret-choice-row button i { grid-row: 1 / 3; margin: 0; }
  .pootret-preview__top { align-items: flex-start; }
  .pootret-toggle { display: grid; }
  .pootret-preview__foot { display: grid; }
  .pootret-preview__foot p { max-width: none; text-align: left; }
}

/* --------------------------------------------------------------------------
   KWISPELSHOP — overzicht van nu en straks
   -------------------------------------------------------------------------- */
.kw-shop-page main { overflow: clip; }
.kw-shop-hero { position: relative; display: grid; min-height: 500px; grid-template-columns: 1fr .45fr; gap: 3rem; align-items: center; padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 7vw, 6rem); overflow: hidden; background: var(--kw-burgundy); color: var(--kw-cream); }
.kw-shop-hero::after { content: ""; position: absolute; right: -70px; bottom: -105px; width: 300px; height: 300px; border: 55px solid var(--kw-yellow); border-radius: 50%; opacity: .88; }
.kw-shop-hero > * { position: relative; z-index: 1; }
.kw-shop-hero h1 { max-width: 10ch; margin: .6rem 0 1.3rem; color: var(--kw-cream); font-family: var(--kw-display); font-size: clamp(3.6rem, 7vw, 7rem); font-weight: 400; letter-spacing: -.05em; line-height: .88; }
.kw-shop-hero h1 span { color: var(--kw-yellow); }
.kw-shop-hero p:not(.eyebrow) { max-width: 53ch; color: #ebd4de; font-size: 1.08rem; line-height: 1.65; }
.kw-shop-hero__marks { display: grid; grid-template-columns: repeat(2, 120px); gap: 14px; justify-content: center; transform: rotate(5deg); }
.kw-shop-hero__marks span { display: grid; aspect-ratio: 1; place-items: center; border: 2px solid var(--kw-burgundy-deep); border-radius: 20px; background: var(--kw-pink); color: var(--kw-burgundy); box-shadow: 8px 9px 0 var(--kw-yellow); font-family: var(--kw-display); font-size: 3rem; }
.kw-shop-hero__marks span:nth-child(2) { background: var(--kw-yellow); transform: translateY(35px) rotate(-8deg); }
.kw-shop-hero__marks span:nth-child(3) { grid-column: 1 / 3; width: 120px; justify-self: center; background: var(--kw-blue); transform: rotate(7deg); }
.kw-shop-products, .kw-shop-coming { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5rem); }
.kw-shop-products { background: var(--kw-cream); }
.kw-shop-heading { max-width: 750px; margin-bottom: 2.5rem; }
.kw-shop-heading h2 { margin: 0; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 400; letter-spacing: -.035em; line-height: .96; }
.kw-shop-heading > p:last-child { color: #765d4d; line-height: 1.6; }
.kw-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.kw-product-card { overflow: hidden; border: 2px solid var(--kw-burgundy); border-radius: 15px; background: var(--kw-paper); box-shadow: 8px 9px 0 var(--kw-burgundy); }
.kw-product-card--portrait { transform: translateY(20px) rotate(.7deg); }
.kw-product-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; background: var(--kw-yellow); }
.kw-product-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.kw-product-card--portrait .kw-product-card__image img { object-fit: contain; background: #bd8c53; }
.kw-product-card:hover .kw-product-card__image img { transform: scale(1.035); }
.kw-product-card__image span { position: absolute; top: 14px; right: 14px; padding: .45rem .65rem; border: 2px solid var(--kw-burgundy); border-radius: 999px; background: var(--kw-yellow); color: var(--kw-burgundy); font-size: .66rem; font-weight: 900; text-transform: uppercase; transform: rotate(2deg); }
.kw-product-card__body { padding: clamp(1.4rem, 4vw, 2.4rem); }
.kw-product-card__body h3 { margin: .25rem 0 .75rem; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; }
.kw-product-card__body > p:not(.eyebrow) { min-height: 3.2em; color: #765d4d; line-height: 1.6; }
.kw-product-card__body > div { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 2px solid var(--kw-line); }
.kw-product-card__body strong { color: var(--kw-burgundy); font-size: 1.05rem; }
.kw-product-card__body a { color: var(--kw-burgundy); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kw-shop-coming { background: var(--kw-pink-light); }
.kw-coming-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kw-coming-grid article { min-height: 260px; padding: 1.5rem; border: 2px dashed var(--kw-burgundy); border-radius: 14px; background: rgb(255 250 240 / 65%); color: var(--kw-burgundy); }
.kw-coming-grid article > span { display: block; margin: 0 0 2.5rem; font-family: var(--kw-display); font-size: 2.4rem; }
.kw-coming-grid small { color: var(--kw-coral); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.kw-coming-grid h3 { margin: .45rem 0 .6rem; font-family: var(--kw-display); font-size: 1.45rem; font-weight: 400; }
.kw-coming-grid p { margin: 0; color: #765d4d; line-height: 1.55; }
.kw-shop-promise { display: grid; justify-items: center; padding: clamp(4rem, 8vw, 7rem) 1.5rem; background: var(--kw-yellow); color: var(--kw-burgundy); text-align: center; }
.kw-shop-promise p { margin: 0; font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.kw-shop-promise strong { max-width: 13ch; margin: .7rem 0 1.6rem; font-family: var(--kw-display); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 400; line-height: .96; }
.kw-shop-page > .kw-footer { margin-top: 0; }

/* Pootret-teaser op de Kwispel-home */
.kw-pootret-teaser { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--kw-yellow); }
.kw-pootret-teaser__card { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 2px solid var(--kw-burgundy); border-radius: 16px; background: var(--kw-burgundy); box-shadow: 10px 12px 0 var(--kw-pink); }
.kw-pootret-teaser__copy { display: grid; align-content: center; padding: clamp(2rem, 5vw, 4.5rem); color: var(--kw-cream); }
.kw-pootret-teaser__copy .eyebrow { color: var(--kw-pink); }
.kw-pootret-teaser__copy h2 { margin: .5rem 0 1rem; color: var(--kw-cream); font-family: var(--kw-display); font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 400; line-height: .92; }
.kw-pootret-teaser__copy h2 span { color: var(--kw-yellow); }
.kw-pootret-teaser__copy p { color: #e8ccd8; line-height: 1.6; }
.kw-pootret-teaser__copy .button { width: fit-content; margin-top: 1rem; }
.kw-pootret-teaser__image { position: relative; min-height: 520px; margin: 0; background: #bd8c53; }
.kw-pootret-teaser__image img { position: absolute; width: 50%; height: 100%; object-fit: cover; }
.kw-pootret-teaser__image img:last-child { right: 0; object-fit: contain; }
.kw-pootret-teaser__image figcaption { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: .55rem .75rem; border: 2px solid var(--kw-burgundy); border-radius: 8px; background: var(--kw-cream); color: var(--kw-burgundy); font-size: .7rem; font-weight: 900; transform: rotate(-2deg); }

@media (max-width: 760px) {
  .kw-shop-hero { grid-template-columns: 1fr; }
  .kw-shop-hero__marks { opacity: .65; transform: scale(.76) rotate(5deg); }
  .kw-product-grid, .kw-coming-grid, .kw-pootret-teaser__card { grid-template-columns: 1fr; }
  .kw-product-card--portrait { transform: none; }
  .kw-pootret-teaser__image { min-height: 420px; }
}

@media (max-width: 480px) {
  .kw-shop-hero__marks { display: none; }
  .kw-shop-hero h1 { font-size: clamp(3.2rem, 16vw, 4.6rem); }
  .kw-product-card__body > div { display: grid; }
}

/* --------------------------------------------------------------------------
   POOTRET — kostenbewuste tweestapsflow
   -------------------------------------------------------------------------- */
.pootret-free-chip { display: inline-flex; align-items: center; padding: .45rem .7rem; border: 1px solid rgb(255 247 229 / 45%); border-radius: 999px; background: var(--pootret-green); color: var(--kw-burgundy); font-size: .7rem; font-weight: 1000; letter-spacing: .05em; }
.pootret-ai-state--safe { border-color: rgb(155 207 112 / 70%); background: rgb(155 207 112 / 12%); }
.pootret-ai-state--safe .pootret-ai-state__spark { background: var(--pootret-green); }
.pootret-canvas-wrap canvas { box-shadow: inset 0 0 0 7px var(--pootret-frame, #e4c79b); }

.pootret-checkout-page { background: var(--kw-cream); }
.pootret-checkout-header { color: var(--kw-burgundy); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pootret-checkout { min-height: 78vh; padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 5vw, 5rem) clamp(5rem, 9vw, 8rem); background:
  radial-gradient(circle at 10% 18%, rgb(247 197 220 / 55%) 0 7%, transparent 7.2%),
  radial-gradient(circle at 92% 78%, rgb(255 207 51 / 50%) 0 9%, transparent 9.2%),
  var(--kw-cream); }
.pootret-progress { display: grid; width: min(760px, 100%); grid-template-columns: auto 1fr auto 1fr auto; gap: .8rem; align-items: center; margin: 0 auto clamp(2.5rem, 6vw, 5rem); color: #9a7f88; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pootret-progress span { display: flex; gap: .45rem; align-items: center; white-space: nowrap; }
.pootret-progress i { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid currentcolor; border-radius: 50%; font-style: normal; }
.pootret-progress b { height: 2px; background: #d9c5bc; }
.pootret-progress .is-done, .pootret-progress .is-current { color: var(--kw-burgundy); }
.pootret-progress .is-done i { border-color: var(--pootret-green); background: var(--pootret-green); }
.pootret-progress .is-current i { border-color: var(--kw-burgundy); background: var(--kw-yellow); }
.pootret-progress .is-done + b { background: var(--pootret-green); }
.pootret-checkout-hero { display: flex; gap: 2rem; align-items: end; justify-content: space-between; width: min(1180px, 100%); margin: 0 auto 2.2rem; }
.pootret-checkout-copy h1 { max-width: 16ch; margin: .45rem 0 .7rem; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 400; letter-spacing: -.035em; line-height: .94; }
.pootret-checkout-copy > p:last-child { max-width: 64ch; margin: 0; color: #705761; line-height: 1.6; }
.pootret-once-badge { display: inline-flex; flex: 0 0 auto; gap: .6rem; align-items: center; padding: .7rem .9rem; border: 2px solid var(--kw-burgundy); border-radius: 999px; background: var(--kw-pink); color: var(--kw-burgundy); font-size: .76rem; font-weight: 900; transform: rotate(2deg); }
.pootret-once-badge i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: var(--kw-burgundy); color: var(--kw-cream); font-style: normal; }
.pootret-checkout-grid { display: grid; width: min(1180px, 100%); grid-template-columns: minmax(0, 1.12fr) minmax(320px, .72fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; margin: 0 auto; }
.pootret-final-card, .pootret-order-summary { border: 2px solid var(--kw-burgundy); border-radius: 16px; }
.pootret-final-card { padding: clamp(.8rem, 2vw, 1.25rem); background: var(--kw-burgundy); box-shadow: 9px 10px 0 var(--kw-yellow); }
.pootret-final-card__label { display: flex; align-items: center; justify-content: space-between; padding: .15rem .25rem .85rem; color: var(--kw-cream); }
.pootret-final-card__label span { color: var(--kw-pink); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pootret-final-card__label strong { font-size: .8rem; }
.pootret-final-canvas { position: relative; display: grid; overflow: hidden; aspect-ratio: 1; place-items: center; border: 2px solid var(--kw-pink); border-radius: 11px; background: linear-gradient(145deg, #e5c99f, #be8e56); }
.pootret-final-canvas canvas { display: block; width: 100%; height: 100%; }
.pootret-generating { position: absolute; inset: 0; display: grid; z-index: 2; align-content: center; justify-items: center; padding: 2rem; background:
  repeating-linear-gradient(-10deg, transparent 0 17px, rgb(74 0 31 / 4%) 18px 19px),
  linear-gradient(145deg, #eed9b7, #cda163); color: var(--kw-burgundy); text-align: center; }
.pootret-generating[hidden] { display: none; }
.pootret-generating strong { margin: 1.2rem 0 .3rem; font-family: var(--kw-display); font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 400; }
.pootret-generating small { max-width: 38ch; line-height: 1.5; }
.pootret-dog-draw { position: relative; font-size: clamp(4rem, 10vw, 7rem); filter: grayscale(1) sepia(.4); animation: pootret-dog-bob 1.3s ease-in-out infinite; }
.pootret-dog-draw span { position: absolute; right: -38px; bottom: 5px; width: 55px; height: 5px; overflow: hidden; border-radius: 10px; background: rgb(74 0 31 / 15%); }
.pootret-dog-draw span::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--kw-burgundy); animation: pootret-pencil 1s ease-in-out infinite alternate; }
@keyframes pootret-dog-bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes pootret-pencil { to { transform: translateX(120%); } }
.pootret-final-disclaimer { margin: .85rem .25rem .1rem; color: #dbc1cc; font-size: .68rem; line-height: 1.45; text-align: center; }
.pootret-order-summary { position: sticky; top: 98px; padding: clamp(1.2rem, 3vw, 2rem); background: var(--kw-paper); box-shadow: 8px 9px 0 var(--kw-pink); }
.pootret-order-summary__head { display: grid; grid-template-columns: 1fr 72px; gap: 1rem; align-items: center; padding-bottom: 1.15rem; border-bottom: 2px solid var(--kw-line); }
.pootret-order-summary__head p { margin: 0 0 .2rem; color: var(--kw-coral); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pootret-order-summary__head h2 { margin: 0; color: var(--kw-burgundy); font-family: var(--kw-display); font-size: 1.7rem; font-weight: 400; line-height: 1; }
.pootret-order-summary__head img { width: 72px; aspect-ratio: 1; border: 2px solid var(--kw-burgundy); border-radius: 9px; object-fit: cover; transform: rotate(3deg); }
.pootret-order-details { margin: 0; padding: .55rem 0; }
.pootret-order-details > div { display: flex; justify-content: space-between; padding: .65rem 0; border-bottom: 1px dashed #d8c3b9; }
.pootret-order-details dt { color: #826b74; font-size: .76rem; }
.pootret-order-details dd { margin: 0; color: var(--kw-burgundy); font-size: .76rem; font-weight: 900; }
.pootret-generation-status { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; align-items: center; padding: .85rem; margin: .9rem 0; border: 1px solid #dcc1cc; border-radius: 10px; background: var(--kw-pink-light); color: var(--kw-burgundy); }
.pootret-generation-status > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--kw-pink); font-weight: 1000; }
.pootret-generation-status strong, .pootret-generation-status small { display: block; }
.pootret-generation-status strong { font-size: .76rem; }
.pootret-generation-status small { margin-top: 2px; color: #765d67; font-size: .63rem; line-height: 1.4; }
.pootret-generation-status[data-state="done"] { border-color: #9bcf70; background: #eff8e8; }
.pootret-generation-status[data-state="done"] > span { background: var(--pootret-green); }
.pootret-generation-status[data-state="error"] { border-color: var(--kw-coral); background: #fff0ec; }
.pootret-preview-actions { display: grid; gap: .7rem; }
.pootret-preview-actions .cf-button, .pootret-preview-actions .pootret-ai-button { width: 100%; justify-content: center; min-height: 50px; }
.pootret-preview-actions .pootret-text-button { justify-self: center; margin-top: .25rem; color: var(--kw-burgundy); }
.pootret-order-summary .pootret-price-note { color: #816b73; }
.pootret-no-draft { display: grid; width: min(620px, 100%); justify-items: center; margin: 5rem auto; padding: clamp(2rem, 6vw, 4rem); border: 2px solid var(--kw-burgundy); border-radius: 16px; background: var(--kw-paper); box-shadow: 9px 10px 0 var(--kw-yellow); color: var(--kw-burgundy); text-align: center; }
.pootret-no-draft > span { font-size: 4rem; }
.pootret-no-draft h1 { margin: .8rem 0 .4rem; font-family: var(--kw-display); font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 400; }
.pootret-no-draft p { max-width: 48ch; margin: 0 0 1.5rem; color: #755e68; line-height: 1.6; }

@media (max-width: 840px) {
  .pootret-checkout-grid { grid-template-columns: 1fr; }
  .pootret-order-summary { position: relative; top: 0; }
  .pootret-checkout-hero { align-items: start; }
}

@media (max-width: 620px) {
  body.pootret-page { overflow-x: hidden; }
  .pootret-page .pootret-header .cf-header-inner { box-sizing: border-box; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; padding-inline: 14px; }
  .pootret-page .kw-brand { min-width: 0; }
  .pootret-page .cf-home-link { min-width: 0; white-space: nowrap; }
  .pootret-page .cf-home-full { display: none !important; }
  .pootret-page .cf-home-compact { display: inline !important; }
  .pootret-hero > * { min-width: 0; }
  .pootret-hero__lead { overflow-wrap: anywhere; }
  .pootret-checkout-header { display: none; }
  .pootret-checkout { padding-inline: .8rem; }
  .pootret-progress { grid-template-columns: auto 1fr auto; gap: .45rem; }
  .pootret-progress span { font-size: 0; }
  .pootret-progress span i { font-size: .68rem; }
  .pootret-progress span:last-child, .pootret-progress b:nth-of-type(2) { display: none; }
  .pootret-checkout-hero { display: grid; gap: 1rem; }
  .pootret-once-badge { justify-self: start; }
  .pootret-final-card { box-shadow: 5px 6px 0 var(--kw-yellow); }
  .pootret-order-summary { box-shadow: 5px 6px 0 var(--kw-pink); }
}


/* Op een telefoon past "Ontwerp je eigen hondenpenning." pas op een regel bij
   20 pixels, en dat is kleiner dan de lopende tekst eronder. Twee regels dus,
   maar dan als een blok: balance maakt de regels even lang en de krappe
   regelafstand houdt ze bij elkaar in plaats van als twee losse zinnen. */
@media (max-width: 720px) {
  .kwispel-builder .cf-intro {
    padding-top: 10px;
  }

  .kwispel-builder .cf-intro h1 {
    text-wrap: balance;
    line-height: .98;
  }

  .kwispel-builder .cf-intro > .cf-intro-feiten {
    font-size: .88rem;
    line-height: 1.4;
  }
}

/* Shopoverzicht met drie producten (producten.html). Naast elkaar op een breed
   scherm; daaronder één kolom, want twee plus één los oogt als een vergissing. */
.kw-product-grid--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.kw-product-grid--drie .kw-product-card__body h3 { font-size: clamp(1.8rem, 2.4vw, 2.6rem); }
.kw-product-card--ketting { transform: translateY(10px) rotate(-.5deg); }
.kw-product-card--ketting .kw-product-card__image img { object-position: 50% 68%; }
@media (max-width: 1100px) {
  .kw-product-grid--drie { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .kw-product-card--ketting, .kw-product-grid--drie .kw-product-card--portrait { transform: none; }
}
/* De hartpenning hangt onderaan de foto; die mag niet weggesneden worden. */
.kw-product-card--hart .kw-product-card__image img { object-position: 50% 75%; }

/* Meerdere foto's per productkaart (assets/kwispel-fotos.js). De rij schuift
   met een transform; het vak eromheen knipt af, zodat je nooit de rand van de
   volgende foto ziet. */
.kw-fotos { overflow: hidden; }
.kw-fotos__rij { display: flex; height: 100%; transition: transform .4s cubic-bezier(.2,.8,.2,1); touch-action: pan-y; user-select: none; }
.kw-fotos__rij > a { flex: 0 0 100%; height: 100%; overflow: hidden; }
.kw-fotos__rij img { -webkit-user-drag: none; }
.kw-fotos__stippen { position: absolute; z-index: 2; left: 12px; top: 14px; display: flex; gap: 7px; padding: 5px 8px; border-radius: 999px; background: rgb(255 247 229 / 82%); }
.kw-fotos__stippen button { width: 10px; height: 10px; padding: 0; border: 2px solid var(--kw-burgundy); border-radius: 50%; background: transparent; cursor: pointer; }
.kw-fotos__stippen button[aria-current="true"] { background: var(--kw-burgundy); }
.kw-fotos__pijl { position: absolute; z-index: 2; top: 50%; width: 36px; height: 36px; padding: 0; border: 2px solid var(--kw-burgundy); border-radius: 50%; background: var(--kw-cream); color: var(--kw-burgundy); font-size: 1.4rem; line-height: 1; cursor: pointer; transform: translateY(-50%); opacity: .9; }
.kw-fotos__pijl--terug { left: 10px; }
.kw-fotos__pijl--verder { right: 10px; }
.kw-fotos__pijl:hover, .kw-fotos__pijl:focus-visible { opacity: 1; background: var(--kw-yellow); }
.kw-product-card--hart .kw-fotos__rij img { object-position: 50% 75%; }
.kw-product-card--ketting .kw-fotos__rij img { object-position: 50% 68%; }
@media (prefers-reduced-motion: reduce) { .kw-fotos__rij { transition: none; } }
/* Foto's waarop de penning laag hangt: de uitsnede zakt mee. */
.kw-product-card--ketting .kw-fotos__rij img.kw-foto--onder { object-position: 50% 92%; }
/* Pootret op hout: de nieuwe foto vult het vak; de foto van Noekie blijft heel in beeld. */
.kw-product-card--portrait .kw-fotos img:not(.kw-foto--onder) { object-fit: cover; }

/* Productbalk onder de kopbalk van de productpagina's: de drie Kwispel-producten
   naast elkaar, de huidige gemarkeerd. Hij staat in hetzelfde kader als de
   kopbalk en de pagina (zie .kwispel-page > .kw-productbalk bovenaan) en heeft
   de kleur van de kopbalk, zodat kop, balk en pagina één blok vormen. Op een
   telefoon schuift hij horizontaal. */
.kw-productbalk {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 16px 12px;
  background: var(--kw-burgundy);
}
/* Geen lijnen tussen kop, balk en pagina: de kopbalk verliest zijn onderrand
   als de balk eronder staat, en main krijgt geen 1px-opvulling meer (die liet
   een crème streepje zien); flow-root houdt de marges binnen main. */
body > .kw-header:has(+ .kw-productbalk) { border-bottom: 0; }
.kw-productbalk + main { padding-top: 0; display: flow-root; }
.kw-productbalk::-webkit-scrollbar { display: none; }
.kw-productbalk a {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid rgb(255 247 229 / 22%);
  border-radius: 999px;
  background: rgb(255 247 229 / 5%);
  color: var(--kw-cream);
  font-size: .78rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.kw-productbalk a:hover { border-color: var(--kw-cream); background: rgb(255 247 229 / 8%); }
.kw-productbalk a:focus-visible { outline: 3px solid var(--kw-yellow); outline-offset: 2px; }
.kw-productbalk strong { font-weight: 900; }
.kw-productbalk small { color: rgb(255 247 229 / 55%); font-size: .72rem; font-weight: 700; }
.kw-productbalk__kort { display: none; }
.kw-productbalk a[aria-current="page"] { border-color: var(--kw-yellow); background: var(--kw-yellow); color: var(--kw-burgundy); }
.kw-productbalk a[aria-current="page"] small { color: var(--kw-burgundy); }
/* Smal scherm: korte namen zonder prijs, zodat alle drie passen. */
/* Horizontaal schuiven alleen op een smal scherm: overflow maakt van de balk
   een eigen laag, en die liet op brede schermen een haarlijn onder de balk zien. */
@media (max-width: 560px) {
  .kw-productbalk { overflow-x: auto; scrollbar-width: none; }
  .kw-productbalk a { padding: 7px 16px; }
  .kw-productbalk small, .kw-productbalk__lang { display: none; }
  .kw-productbalk__kort { display: inline; }
}