@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 > 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 h1 {
  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 h1 span { color: var(--kw-yellow); }

.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 { min-height: 78px; }
.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); }

.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 { padding: 34px 0 18px; text-align: center; }
.kwispel-builder .cf-intro h1 { color: var(--kw-brown); font-size: clamp(2.7rem, 5.6vw, 5rem); }
.kwispel-builder .cf-kicker { color: var(--kw-coral); }

.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-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 { border-color: var(--kw-burgundy); background: linear-gradient(180deg, #efabc9 0%, var(--kw-yellow) 100%); }
.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); }
.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; }
.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; }
.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 > main,
  .kwispel-page > .kw-footer,
  .kwispel-builder .cf-site-header,
  .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 h1 { 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(2.6rem, 12vw, 4rem); }
  .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 h1 {
    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(2.3rem, 11.5vw, 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); }
}