:root {
  --cf-ink: #151310;
  --cf-ink-soft: #625b53;
  --cf-paper: #f4ecdf;
  --cf-paper-deep: #eadfce;
  --cf-card: #fffaf3;
  --cf-white: #fff;
  --cf-red: #c4161c;
  --cf-red-dark: #9f0f14;
  --cf-red-soft: #f9dedb;
  --cf-green: #276749;
  --cf-line: #d8cbbc;
  --cf-shadow: 0 22px 60px rgb(39 30 22 / 12%);
  --cf-radius: 22px;
  --cf-display: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --cf-body: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.configurator-page {
  min-width: 320px;
  margin: 0;
  background:
    linear-gradient(90deg, rgb(196 22 28 / 035%) 1px, transparent 1px),
    linear-gradient(rgb(196 22 28 / 035%) 1px, transparent 1px),
    var(--cf-paper);
  background-size: 40px 40px;
  color: var(--cf-ink);
  font-family: var(--cf-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.configurator-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 9% 4%, rgb(255 250 243 / 96%) 0 13rem, transparent 31rem),
    radial-gradient(circle at 92% 24%, rgb(196 22 28 / 8%) 0 8rem, transparent 25rem);
  content: "";
  pointer-events: none;
}

body.configurator-page button,
body.configurator-page input,
body.configurator-page a {
  font: inherit;
}

body.configurator-page button,
body.configurator-page a {
  -webkit-tap-highlight-color: transparent;
}

body.configurator-page button {
  color: inherit;
}

body.configurator-page button:focus-visible,
body.configurator-page a:focus-visible,
body.configurator-page input:focus-visible,
body.configurator-page dialog:focus-visible {
  outline: 3px solid var(--cf-red);
  outline-offset: 3px;
}

.cf-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cf-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  padding: 11px 16px;
  border-radius: 8px;
  background: var(--cf-ink);
  color: var(--cf-white);
  transform: translateY(-160%);
}

.cf-skip-link:focus {
  transform: translateY(0);
}

/* Header */
.cf-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(21 19 16 / 14%);
  background: rgb(244 236 223 / 92%);
  backdrop-filter: blur(16px);
}

.cf-header-inner {
  display: grid;
  grid-template-columns: 230px 1fr auto;
  gap: 24px;
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
}

.cf-brand {
  display: block;
  line-height: 0;
}

.cf-brand img {
  display: block;
  width: 220px;
  height: auto;
  mix-blend-mode: multiply;
}

.cf-header-meta {
  justify-self: center;
  color: var(--cf-ink-soft);
  font-size: 0.83rem;
  font-weight: 650;
}

.cf-header-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--cf-green);
  box-shadow: 0 0 0 4px rgb(39 103 73 / 12%);
}

.cf-home-link {
  color: var(--cf-ink);
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
}

.cf-home-compact {
  display: none;
}

.cf-home-link:hover {
  color: var(--cf-red);
}

/* Intro */
/* Compact gehouden: de penning en de keuzes horen meteen in beeld te staan,
   niet onder een schermvullende kop. */
.cf-intro {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(16px, 2.6vw, 28px) 0 12px;
}

.cf-kicker,
.cf-preview-kicker {
  margin: 0 0 8px;
  color: var(--cf-red);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cf-intro h1 {
  margin: 0;
  color: var(--cf-ink);
  font-family: var(--cf-display);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.02;
}

/* Progress */
.cf-progress {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 18px;
}

/* Kolommen volgen het aantal stappen; dat aantal ligt niet meer vast. */
.cf-stepper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cf-step {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 70px;
  gap: 11px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 14px 14px 0 0;
  background: transparent;
  color: var(--cf-ink-soft);
  text-align: left;
  cursor: pointer;
}

.cf-step::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 99px;
  background: var(--cf-line);
  content: "";
}

.cf-step:hover:not(:disabled) {
  background: rgb(255 250 243 / 55%);
  color: var(--cf-ink);
}

.cf-step:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cf-step.is-current {
  background: var(--cf-card);
  color: var(--cf-ink);
}

.cf-step.is-current::after {
  background: var(--cf-red);
}

.cf-step.is-visited:not(.is-current)::after {
  background: var(--cf-ink);
}

.cf-step-number {
  display: grid;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--cf-line);
  border-radius: 50%;
  background: var(--cf-card);
  font-size: 0.78rem;
  font-weight: 850;
}

.cf-step.is-current .cf-step-number {
  border-color: var(--cf-red);
  background: var(--cf-red);
  color: var(--cf-white);
}

.cf-step.is-visited:not(.is-current) .cf-step-number {
  border-color: var(--cf-ink);
  background: var(--cf-ink);
  color: var(--cf-white);
}

.cf-step strong,
.cf-step small {
  display: block;
}

.cf-step strong {
  color: inherit;
  font-size: 0.86rem;
}

.cf-step small {
  margin-top: 1px;
  font-size: 0.7rem;
}

/* Main builder */
.cf-builder {
  width: min(1160px, calc(100% - 24px));
  /* Kleine onderafstand: het fotoblok sluit er direct op aan */
  margin: 0 auto 12px;
  padding: 12px;
  border: 1px solid rgb(21 19 16 / 11%);
  border-radius: 30px;
  background: rgb(255 250 243 / 58%);
  box-shadow: 0 40px 100px rgb(58 42 29 / 10%);
}

.cf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.68fr);
  gap: 14px;
  align-items: start;
}

.cf-panel {
  min-height: 590px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  background: var(--cf-card);
}

.cf-panel h2 {
  max-width: 620px;
  margin: 0;
  color: var(--cf-ink);
  font-family: var(--cf-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.cf-panel-intro {
  max-width: 590px;
  margin: 12px 0 30px;
  color: var(--cf-ink-soft);
}

.cf-fieldset {
  min-width: 0;
  padding: 0;
  margin: 0 0 27px;
  border: 0;
}

.cf-fieldset legend,
.cf-field-label {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
  color: var(--cf-ink);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cf-field-label-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.cf-counter {
  color: var(--cf-ink-soft);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.cf-counter.is-near {
  color: var(--cf-red-dark);
}

.cf-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cf-choice-grid--colors {
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
}

/* De figuren bij het telefoonnummer. Geen vast aantal kolommen: er komen er
   waarschijnlijk nog rassen bij, en dan hoort het raster mee te groeien in
   plaats van met een losse tegel op een halve regel te eindigen. */
.cf-choice-grid--figures {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.cf-choice-grid--symbols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cf-choice {
  position: relative;
  min-height: 88px;
  padding: 13px 11px;
  border: 1.5px solid var(--cf-line);
  border-radius: 14px;
  background: var(--cf-white);
  color: var(--cf-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cf-choice:hover {
  border-color: var(--cf-ink);
  transform: translateY(-2px);
}

.cf-choice[aria-pressed="true"] {
  border-color: var(--cf-red);
  background: #fff7f5;
  box-shadow: 0 0 0 2px rgb(196 22 28 / 9%);
}

.cf-choice[aria-pressed="true"]::after {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--cf-red);
  color: var(--cf-white);
  content: "";
}

.cf-choice-icon {
  display: grid;
  width: 46px;
  height: 34px;
  margin-bottom: 8px;
  place-items: center;
  color: var(--cf-red);
}

.cf-choice-icon svg {
  display: block;
  width: 46px;
  height: 34px;
}

.cf-choice-title,
.cf-choice-sub {
  display: block;
}

.cf-choice-title {
  padding-right: 16px;
  font-size: 0.92rem;
  font-weight: 800;
}

.cf-choice-sub {
  margin-top: 2px;
  color: var(--cf-ink-soft);
  font-size: 0.72rem;
  line-height: 1.35;
}

.cf-choice-price {
  display: block;
  margin-top: 7px;
  color: var(--cf-red-dark);
  font-size: 0.76rem;
  font-weight: 850;
}

.cf-popular {
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--cf-ink);
  color: var(--cf-white);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cf-color-chip {
  display: block;
  height: 31px;
  margin-bottom: 9px;
  border: 1px solid rgb(21 19 16 / 10%);
  border-radius: 8px;
  box-shadow: inset 0 -8px 14px rgb(0 0 0 / 11%);
}

.cf-icon-preview {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0 auto 6px;
  place-items: center;
  color: var(--cf-red);
  font-size: 1.1rem;
  line-height: 1;
}

.cf-icon-preview--small {
  width: 22px;
  height: 22px;
  margin: 0;
}

/* Vier vierkante hoektegels op een rij, over de volle breedte. Het keuzemenu
   klapt eroverheen.

   Bewust een vast aantal kolommen in plaats van auto-fit: bij tussenbreedtes
   gaf dat een rafelige rij van 3 + 1. Ook op een telefoon blijven het er vier;
   bij 375px is dat zo'n 70px per tegel, ruim boven de 44px die een vinger
   nodig heeft, en de vier hoeken staan zo in een enkele strook in plaats van
   een blok van ruim 300px hoog. Terugvallen op twee kolommen zou bovendien de
   nth-child-regels verderop omgooien, die op vier kolommen gebouwd zijn. */
.cf-corner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: none;
}

.cf-corner {
  position: relative;
}

.cf-corner summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  aspect-ratio: 1;
  align-content: center;
  justify-items: center;
  padding: 8px;
  border: 1.5px solid var(--cf-line);
  border-radius: 13px;
  background: var(--cf-white);
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.cf-corner summary::-webkit-details-marker {
  display: none;
}

.cf-corner summary:hover {
  border-color: var(--cf-red);
}

.cf-corner summary:focus-visible {
  outline: 3px solid var(--cf-red);
  outline-offset: 2px;
}

.cf-corner[open] summary {
  border-color: var(--cf-red);
  box-shadow: 0 0 0 3px var(--cf-red-soft);
}

/* Meeschalend met de tegel in plaats van een vaste maat: anders past het figuur
   niet meer zodra de tegel klein wordt en verliest die zijn vierkante vorm. */
.cf-corner-art {
  display: grid;
  width: 56%;
  max-width: 68px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--cf-red);
  font-size: 1.1rem;
  line-height: 1;
}

.cf-corner-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hoekteken linksboven in de tegel, buiten de weg van het figuur */
.cf-corner-mark {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 13px;
  height: 13px;
  color: var(--cf-ink);
  opacity: 0.5;
}

.cf-corner[open] .cf-corner-mark,
.cf-corner summary:hover .cf-corner-mark {
  color: var(--cf-red);
  opacity: 1;
}

.cf-corner-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  left: 0;
  width: min(324px, calc(100vw - 36px));
  padding: 12px;
  border: 1.5px solid var(--cf-line);
  border-radius: 15px;
  background: var(--cf-white);
  box-shadow: 0 18px 42px rgb(39 30 22 / 20%);
}

/* De keuzes zijn vierkanten op een rij: alleen het figuur, geen naam. */
.cf-corner-menu .cf-choice-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.cf-corner-menu .cf-choice {
  display: grid;
  /* De basisknop heeft een min-height; samen met aspect-ratio trok die ook de
     breedte op, waardoor de knoppen buiten het menu staken. */
  min-height: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: 5px;
}

.cf-corner-menu .cf-icon-preview {
  width: 78%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
}

/* Tegels in de rechterhelft krijgen hun menu rechts uitgelijnd, anders steekt
   het buiten het paneel. Bij vier kolommen zijn dat de derde en vierde. */
.cf-corner:nth-child(n + 3) .cf-corner-menu {
  right: 0;
  left: auto;
}

/* Smaller paneel: een rij van vijf past niet meer onder de middelste tegels,
   dus drie per rij en een navenant smaller menu. */
@media (max-width: 560px) {
  .cf-corner-menu {
    width: min(212px, calc(100vw - 36px));
  }

  .cf-corner-menu .cf-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cf-corner-menu-title {
  margin: 0 0 9px;
  color: var(--cf-ink);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .cf-corner summary {
    transition: none;
  }
}

.cf-icon-preview svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cf-font-sample {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  color: var(--cf-ink);
  font-size: 1.25rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-input-wrap {
  margin-bottom: 23px;
}

.cf-input {
  display: block;
  width: 100%;
  min-height: 51px;
  padding: 12px 14px;
  border: 1.5px solid var(--cf-line);
  border-radius: 12px;
  background: var(--cf-white);
  color: var(--cf-ink);
  font-size: 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cf-input:hover {
  border-color: #9a8e80;
}

.cf-input:focus {
  border-color: var(--cf-red);
  box-shadow: 0 0 0 4px rgb(196 22 28 / 10%);
}

.cf-input[aria-invalid="true"] {
  border-color: var(--cf-red);
  background: #fff8f7;
}

.cf-help,
.cf-error {
  margin: 6px 0 0;
  font-size: 0.76rem;
}

.cf-help {
  color: var(--cf-ink-soft);
}

.cf-error {
  color: var(--cf-red-dark);
  font-weight: 750;
}

.cf-error[hidden] {
  display: none;
}

/* Bezorgadres op de bestelstap. Een echte fieldset, want dit is een groep bij
   elkaar horende velden; schermlezers noemen de legend dan bij elk veld. */
.cf-fieldset {
  margin: 0 0 23px;
  padding: 18px 18px 6px;
  border: 1.5px solid var(--cf-line);
  border-radius: 12px;
}

.cf-legend {
  padding: 0 8px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cf-ink-soft);
}

/* Postcode en plaats naast elkaar: ze horen bij elkaar en de postcode heeft de
   volle breedte niet nodig. Onder de 430px past dat niet meer naast elkaar. */
.cf-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.cf-field-row > .cf-input-wrap {
  flex: 1 1 190px;
}

.cf-field-row > .cf-field-narrow {
  flex: 0 1 148px;
}

@media (width <= 430px) {
  .cf-field-row > .cf-field-narrow {
    flex-basis: 100%;
  }
}

/* Vaste productspecificatie — vervangt het keuzeraster zolang er één vorm is */
.cf-spec {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  margin-bottom: 22px;
  border: 1.5px solid var(--cf-line);
  border-radius: 15px;
  background: var(--cf-white);
}

.cf-spec-icon {
  display: grid;
  width: 54px;
  height: 42px;
  place-items: center;
  color: var(--cf-ink);
}

.cf-spec-icon svg {
  width: 100%;
  height: 100%;
}

.cf-spec-body strong {
  display: block;
  color: var(--cf-ink);
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.cf-spec-body span {
  display: block;
  margin-top: 3px;
  font-size: 0.81rem;
  opacity: 0.75;
}

.cf-spec-price {
  color: var(--cf-red-dark);
  font-size: 1.12rem;
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .cf-spec {
    grid-template-columns: 42px 1fr;
    row-gap: 10px;
  }

  .cf-spec-price {
    grid-column: 2;
  }
}

.cf-workshop-tip {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 11px;
  align-items: start;
  padding: 14px;
  margin: 2px 0 0;
  border: 1px solid #e5c5c0;
  border-radius: 13px;
  background: var(--cf-red-soft);
  color: #4c2524;
  font-size: 0.82rem;
}

.cf-workshop-tip strong {
  display: block;
  margin-bottom: 2px;
  color: var(--cf-ink);
}

.cf-tip-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--cf-red);
  color: var(--cf-white);
  font-weight: 900;
}

.cf-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-top: 22px;
  margin-top: 30px;
  border-top: 1px solid var(--cf-line);
}

.cf-actions > :only-child {
  margin-left: auto;
}

.cf-button {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1.5px solid transparent;
  border-radius: 11px;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.cf-button:hover {
  transform: translateY(-1px);
}

.cf-button-primary {
  border-color: var(--cf-red);
  background: var(--cf-red);
  color: var(--cf-white);
  box-shadow: 0 9px 20px rgb(196 22 28 / 22%);
}

.configurator-page .cf-button-primary {
  color: var(--cf-white);
}

.configurator-page .cf-button-primary:hover {
  border-color: var(--cf-red-dark);
  background: var(--cf-red-dark);
  color: var(--cf-white);
}

.cf-button-secondary {
  border-color: var(--cf-ink);
  background: transparent;
  color: var(--cf-ink);
}

.configurator-page .cf-button-secondary:hover {
  background: var(--cf-ink);
  color: var(--cf-white);
}

.cf-link-button {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--cf-ink-soft);
  font-weight: 750;
  cursor: pointer;
}

.cf-link-button:hover {
  color: var(--cf-red);
}

/* Summary */
.cf-summary {
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-radius: 15px;
}

.cf-summary-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.72fr) minmax(0, 1.28fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid var(--cf-line);
}

.cf-summary-row:last-child {
  border-bottom: 0;
}

.cf-summary-row:nth-child(odd) {
  background: rgb(234 223 206 / 30%);
}

.cf-summary dt,
.cf-summary dd {
  margin: 0;
}

.cf-summary dt {
  color: var(--cf-ink-soft);
  font-size: 0.8rem;
}

.cf-summary dd {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  font-weight: 800;
}

.cf-edit-button {
  min-height: 38px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--cf-red-dark);
  font-size: 0.74rem;
  font-weight: 850;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf-final-note {
  padding: 14px 16px;
  margin: 18px 0 0;
  border-left: 4px solid var(--cf-ink);
  background: var(--cf-paper);
  color: var(--cf-ink-soft);
  font-size: 0.82rem;
}

.cf-final-note strong {
  color: var(--cf-ink);
}

/* Preview */
.cf-preview-wrap {
  position: sticky;
  top: 90px;
}

.cf-preview-card {
  padding: clamp(18px, 2.6vw, 28px);
  overflow: hidden;
  border: 1px solid var(--cf-ink);
  border-radius: var(--cf-radius);
  background:
    radial-gradient(circle at 70% 18%, rgb(196 22 28 / 8%), transparent 38%),
    var(--cf-ink);
  color: var(--cf-white);
  box-shadow: var(--cf-shadow);
}

.cf-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 15px;
}

.cf-preview-kicker {
  margin-bottom: 2px;
  color: #ff8e89;
}

.cf-preview-head h2 {
  margin: 0;
  color: var(--cf-white);
  font-family: var(--cf-display);
  font-size: 1.55rem;
}

.cf-side-control {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.cf-side-control > span {
  color: #bfb7ae;
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.cf-side-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 9px;
  background: rgb(255 255 255 / 8%);
}

.cf-side-toggle button {
  min-width: 57px;
  min-height: 36px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #d7d1c9;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.cf-side-toggle button[aria-pressed="true"] {
  background: var(--cf-card);
  color: var(--cf-ink);
}

.cf-preview-switcher {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.cf-preview-switcher-label {
  color: #d8d1c9;
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cf-view-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 16px;
  background: rgb(255 255 255 / 7%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.cf-view-toggle button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #d7d1c9;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.cf-view-toggle button:hover {
  border-color: rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 6%);
}

.cf-view-toggle button:active {
  transform: translateY(1px);
}

.cf-view-toggle button[aria-pressed="true"] {
  border-color: #eadfce;
  background: var(--cf-card);
  color: var(--cf-ink);
  box-shadow: 0 4px 0 #c4161c, 0 9px 18px rgb(0 0 0 / 18%);
  transform: translateY(-2px);
}

.cf-view-copy {
  display: grid;
  min-width: 0;
  line-height: 1.12;
}

.cf-view-copy strong {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-view-copy small {
  margin-top: 4px;
  color: #aaa198;
  font-size: 0.56rem;
  font-weight: 650;
  white-space: nowrap;
}

.cf-view-toggle button[aria-pressed="true"] .cf-view-copy small {
  color: var(--cf-ink-soft);
}

.cf-view-icon {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
}

.cf-view-toggle button[aria-pressed="true"] .cf-view-icon {
  border-color: #efcbc7;
  background: var(--cf-red-soft);
}

.cf-view-icon--tag::before {
  width: 18px;
  height: 14px;
  border: 2px solid currentcolor;
  border-radius: 5px 5px 7px 7px;
  content: "";
  transform: rotate(-5deg);
}

.cf-view-icon--tag::after {
  position: absolute;
  top: 7px;
  width: 4px;
  height: 4px;
  border: 1.5px solid currentcolor;
  border-radius: 50%;
  content: "";
}

.cf-view-icon--collar::before {
  width: 20px;
  height: 10px;
  border: 2px solid currentcolor;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  content: "";
}

.cf-view-icon--collar::after {
  position: absolute;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border: 2px solid currentcolor;
  border-radius: 50%;
  content: "";
}

.cf-view-icon i {
  position: absolute;
  top: 7px;
  width: 22px;
  border-top: 2px solid currentcolor;
}

.cf-view-icon--tag i {
  display: none;
}

.cf-stage {
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 10%), transparent 55%),
    #211e1a;
}

.cf-stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 330px;
}

.cf-stage[hidden],
.cf-dog-preview[hidden] {
  display: none;
}

.cf-dog-preview {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 15px;
  background: #f2a5bc;
  isolation: isolate;
}

/* De metalen ring van de halsband zit op 52,5% van de breedte en 75,2% van de
   hoogte van de bronfoto, dus niet in het midden. De penning hangt bewust wel
   midden in het kader, dus schuift de foto in plaats van de penning: hij staat
   een fractie breder dan het kader en een stukje naar links, zodat de ring
   precies onder het ophanggat uitkomt. Onder 5,3% overbreedte valt er na die
   verschuiving een kier aan de rechterkant; 6,5% houdt daar wat marge op. */
.cf-dog-preview > img {
  display: block;
  width: 106.5%;
  /* Zonder dit wint de max-width: 100% uit styles.css en blijft de foto toch
     precies zo breed als het kader, waardoor de verschuiving niets doet. */
  max-width: none;
  height: 100%;
  min-height: 320px;
  margin-left: -5.88%;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  /* Precies de plek van de ring in de bronfoto. Een percentage in
     object-position legt dát punt van de foto op hetzelfde percentage van het
     kader, dus blijft de ring op dezelfde plek staan hoe groot het kader ook
     wordt — anders zou hij bij elke schermbreedte iets verschuiven. */
  object-position: 52.47% 75.16%;
}

/* `top` en `left` wijzen de metalen ring van de halsband aan, niet de bovenrand
   van de penning: de verschuiving hieronder hangt de penning aan haar ophanggat
   op. Hoe diep dat gat in het kader zit verschilt per vorm, dus die maat komt
   uit het script (--cf-tag-hole); de waarde hier is die van het bot, als de
   opmaak eerder klaar is dan het script. De SVG gebruikt een strak viewBox rond
   het product, zodat de gravure leesbaar blijft. */
.cf-dog-tag {
  position: absolute;
  z-index: 2;
  top: 75.1%;
  left: 50%;
  display: block;
  width: 17%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 5px 4px rgb(27 5 14 / 45%));
  /* De extra 6% tilt de penning nog net iets verder op, zodat de ring niet
     midden op het gat ligt maar er bovenin doorheen steekt. Als deel van de
     penninghoogte, dus even veel bij elke vorm en elke schermbreedte. */
  transform: translate(-50%, calc(var(--cf-tag-hole, -14.9%) - 6%));
  transform-origin: 50% 0;
}

.cf-dog-preview-label {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  margin: 0;
  border: 1px solid rgb(73 0 33 / 18%);
  border-radius: 99px;
  background: rgb(255 250 243 / 92%);
  color: var(--cf-ink);
  box-shadow: 0 4px 14px rgb(73 0 33 / 15%);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}

.cf-dog-preview-label span {
  color: var(--cf-red);
  font-size: 0.7rem;
}

.cf-price-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  padding-top: 16px;
}

.cf-price {
  margin: 0;
  color: var(--cf-white);
  font-family: var(--cf-display);
  font-size: 1.85rem;
  font-weight: 700;
}

.cf-price small {
  display: block;
  margin-top: -2px;
  color: #c8c1b8;
  font-family: var(--cf-body);
  font-size: 0.68rem;
  font-weight: 500;
}

/* Staat er geen bedrag maar een mededeling, dan hoort die niet in het korps van
   een prijs: "Prijs op aanvraag" op 1,85rem schreeuwt over de hele kaart. De
   tweede selector is er om van `.cf-dialog-total strong` te winnen. */
.cf-price--ask,
.cf-dialog-total strong.cf-price--ask {
  font-size: 1.15rem;
}

.cf-included {
  padding: 5px 9px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 99px;
  background: rgb(255 255 255 / 9%);
  color: #f4e7dc;
  font-size: 0.65rem;
  font-weight: 800;
  white-space: nowrap;
}

.cf-size-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 11px;
  align-items: center;
  padding: 12px 0;
  color: #d8d1c9;
  font-size: 0.73rem;
  font-weight: 750;
}

.cf-size-track {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 18%);
}

.cf-size-track span {
  display: block;
  width: 70%;
  height: 100%;
  border-radius: inherit;
  background: var(--cf-red);
  transition: width 180ms ease;
}

.cf-trust-list {
  display: grid;
  gap: 5px;
  padding: 12px 0 0;
  margin: 0;
  border-top: 1px solid rgb(255 255 255 / 15%);
  color: #d8d1c9;
  font-size: 0.74rem;
  list-style: none;
}

.cf-trust-list span {
  margin-right: 6px;
  color: #ff8e89;
  font-weight: 900;
}

.cf-preview-note {
  padding: 0 8px;
  margin: 10px 0 0;
  color: var(--cf-ink-soft);
  font-size: 0.68rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Foto-gravure op hout
   --------------------------------------------------------------------------- */

/* Het paneeltje toont de uitsnede op het gekozen formaat, op de kleur van het
   gekozen hout. Verhouding en kleur komen als variabele uit het script. */
.cf-stage--photo {
  padding: 14px;
}

.cf-plate {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  margin: 0;
  aspect-ratio: var(--plaat-ratio, 4 / 3);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--hout-1, #d8b177), var(--hout-2, #a97c45));
  box-shadow: 0 14px 30px rgb(0 0 0 / 38%);
}

.cf-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cf-plate figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgb(0 0 0 / 62%));
  color: #fff;
  font-family: var(--cf-display);
  font-size: 1rem;
  text-align: center;
}

.cf-plate--empty {
  display: grid;
  place-items: center;
  color: rgb(31 22 14 / 62%);
  font-size: 0.84rem;
}

/* Kiesvak voor het bestand. Het echte input-element staat er onzichtbaar
   achter; het label is de knop, zodat slepen en klikken allebei werken. */
.cf-drop {
  margin-bottom: 10px;
  border: 1.5px dashed var(--cf-line-strong, #c9b9a4);
  border-radius: 16px;
  background: rgb(255 255 255 / 45%);
  transition: border-color 140ms ease, background 140ms ease;
}

.cf-drop.is-over,
.cf-drop:focus-within {
  border-color: var(--cf-red);
  background: var(--cf-red-soft, rgb(196 22 28 / 6%));
}

.cf-drop.is-filled {
  border-style: solid;
  border-color: var(--cf-line);
  background: var(--cf-white);
}

.cf-drop-label {
  display: grid;
  gap: 4px;
  padding: 22px 18px;
  cursor: pointer;
  text-align: center;
}

.cf-drop-label strong {
  color: var(--cf-ink);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.cf-drop-label span {
  color: var(--cf-ink-soft);
  font-size: 0.8rem;
}

.cf-help--warn {
  color: var(--cf-ink);
}

.cf-privacy-note {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--cf-red);
  background: rgb(234 223 206 / 34%);
  color: var(--cf-ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.cf-privacy-note strong {
  display: block;
  color: var(--cf-ink);
}

.cf-tips {
  margin: 0;
  padding-left: 18px;
  color: var(--cf-ink-soft);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* Voorbeeldenblok, in hetzelfde kader als het fotoblok van de penning */
.cf-examples {
  width: min(1160px, calc(100% - 24px));
  margin: 0 auto 80px;
}

.cf-examples-box {
  padding: 16px;
  border: 1px solid rgb(21 19 16 / 11%);
  border-radius: 30px;
  background: rgb(255 250 243 / 58%);
  box-shadow: 0 40px 100px rgb(58 42 29 / 10%);
}

.cf-examples-title {
  margin: 2px 0 12px 4px;
  color: var(--cf-ink-soft);
  font-family: var(--cf-body);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* De foto en de gravure naast elkaar, even groot, zodat je ze kunt vergelijken */
.cf-examples-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cf-example {
  margin: 0;
}

.cf-example-media {
  position: relative;
  display: grid;
  overflow: hidden;
  /* Staand, want dierenportretten zijn dat vrijwel altijd. */
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid var(--cf-line);
  border-radius: 18px;
  background: var(--cf-card);
}

/* contain en niet cover: bij een gravure hoor je de hele plaat te zien, randen
   en al. Een uitsnede maakt er een detailfoto van en verbergt juist het
   vakmanschap aan de buitenkant.

   Absoluut geplaatst en niet height 100%: een hoogte die uit aspect-ratio komt
   telt niet als vaste hoogte om een percentage tegen af te rekenen, waardoor de
   afbeelding terugviel op haar eigen verhouding en onderuit het vakje stak. */
.cf-example img {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cf-example figcaption {
  padding: 7px 4px 0;
  color: var(--cf-ink-soft);
  font-size: 0.74rem;
  text-align: center;
}

/* Zolang er geen echt werk te tonen is, moet het vakje er ook leeg uitzien;
   anders glipt een namaakvoorbeeld ongemerkt mee naar productie. */
.cf-example--placeholder .cf-example-media {
  border-style: dashed;
  background: rgb(255 255 255 / 45%);
  color: var(--cf-ink-soft);
  font-size: 0.78rem;
  font-style: italic;
}

@media (max-width: 720px) {
  .cf-examples {
    width: calc(100% - 12px);
    margin-bottom: 40px;
  }

  /* Op een telefoon blijven de foto en de gravure náást elkaar staan: dat
     vergelijken is het hele punt van dit blok, en onder elkaar zie je ze niet
     meer samen. */
  .cf-examples-box {
    padding: 12px;
  }

  .cf-examples-pair {
    gap: 8px;
  }
}

/* Bestelstap: wat je koopt en wat het kost, op één regel */
.cf-order-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 18px;
  border: 1px solid var(--cf-line);
  border-radius: 16px;
  background: rgb(234 223 206 / 30%);
}

.cf-order-line strong {
  display: block;
  color: var(--cf-ink);
  font-size: 1rem;
}

.cf-order-line > div span {
  color: var(--cf-ink-soft);
  font-size: 0.84rem;
}

.cf-order-total {
  margin: 0;
  color: var(--cf-ink);
  font-family: var(--cf-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: right;
}

.cf-order-total small {
  display: block;
  color: var(--cf-ink-soft);
  font-family: var(--cf-body);
  font-size: 0.68rem;
  font-weight: 500;
}

/* Plek waar de betaalmodule komt. Bewust leeg en bewust als plaatshouder
   herkenbaar: een namaakknop "Afrekenen" die niets doet wekt de indruk dat er
   betaald is, en dat is het laatste wat een webwinkel moet suggereren. */
.cf-pay-slot {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 16px 18px 18px;
  border: 1.5px dashed var(--cf-line-strong, #c9b9a4);
  border-radius: 16px;
  background: rgb(255 255 255 / 45%);
  text-align: center;
}

/* Kopregel: waar het vak voor is, en of het al werkt. */
.cf-pay-slot-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.cf-pay-slot-status {
  color: var(--cf-ink-soft);
  font-size: 0.72rem;
}

/* Het aanhechtpunt zelf. De hoogte staat vast zodat de pagina niet verspringt
   op het moment dat de betaalmodule inlaadt: die is er nu niet, straks wel, en
   de knop eronder hoort niet weg te springen onder de muis van de bezoeker. */
.cf-pay-mount {
  display: grid;
  min-height: 116px;
  place-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 55%);
}

.cf-pay-mount p {
  margin: 0;
  color: var(--cf-ink-soft);
  font-size: 0.88rem;
}

/* Ruimte tussen de betaalknop en het zinnetje eronder, zonder dat de knop
   uitrekt over de hele breedte van het vak. */
.cf-pay-mount {
  gap: 10px;
  align-content: center;
  justify-items: center;
}

.cf-pay-hint {
  color: var(--cf-ink-soft);
  font-size: 0.76rem;
}

.cf-pay-error {
  margin: 0;
  color: var(--cf-red-dark, #a3121a);
  font-size: 0.84rem;
}

.cf-pay-error[hidden] {
  display: none;
}

.cf-pay-slot-label {
  color: var(--cf-ink-soft);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cf-pay-slot p {
  margin: 0;
  color: var(--cf-ink-soft);
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .cf-order-line {
    display: grid;
    justify-items: start;
  }

  .cf-order-total {
    text-align: left;
  }
}

/* Fotoblok, direct onder de configurator */
.cf-photos {
  width: min(1160px, calc(100% - 24px));
  margin: 0 auto 10px;
}

/* Zelfde kader als het configuratorblok */
.cf-photos-box {
  padding: 12px;
  border: 1px solid rgb(21 19 16 / 11%);
  border-radius: 30px;
  background: rgb(255 250 243 / 58%);
  box-shadow: 0 40px 100px rgb(58 42 29 / 10%);
}

/* Reviewstrook onder de foto's. Bewust laag: het is een randje bevestiging bij
   het ontwerp dat je net gemaakt hebt, geen eigen hoofdstuk. */
.cf-reviews {
  width: min(1160px, calc(100% - 24px));
  margin: 0 auto 80px;
}

.cf-reviews-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(21 19 16 / 11%);
  border-radius: 30px;
  background: rgb(255 250 243 / 58%);
  box-shadow: 0 40px 100px rgb(58 42 29 / 10%);
}

.cf-review {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 11px 15px;
  border: 1px solid var(--cf-line);
  border-radius: 20px;
  background: var(--cf-white);
}

/* Sterren en naam naast elkaar op één regel: onder elkaar werd elk vakje vier
   regels hoog en was het geen strook meer. */
.cf-review-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.cf-review-stars {
  color: var(--cf-red);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.cf-review blockquote {
  margin: 0;
  color: var(--cf-ink);
  font-size: 0.85rem;
  line-height: 1.45;
}

.cf-review figcaption {
  overflow: hidden;
  color: var(--cf-ink-soft);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zolang er geen echte reviews zijn staat hier een plaatshouder. Die moet er
   ook uitzien als een plaatshouder, anders glipt hij ongemerkt mee naar
   productie en staat er een verzonnen klant op de site. */
.cf-review--placeholder {
  border-style: dashed;
  background: rgb(255 255 255 / 45%);
}

.cf-review--placeholder .cf-review-stars {
  color: var(--cf-line-strong, #b9ab99);
}

.cf-review--placeholder blockquote {
  color: var(--cf-ink-soft);
  font-style: italic;
}

@media (max-width: 720px) {
  /* Naast elkaar wordt dit op een telefoon drie snippers tekst; onder elkaar
     blijft het leesbaar en nog steeds een dunne strook. */
  .cf-reviews {
    width: calc(100% - 12px);
    margin-bottom: 40px;
  }

  .cf-reviews-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.cf-carousel {
  position: relative;
}

.cf-carousel-viewport {
  overflow: hidden;
  border-radius: calc(var(--cf-radius) - 4px);
}

/* De baan schuift per stap op; het script rekent de stap uit de werkelijke
   itembreedte plus deze gap, zodat de waarde hier de enige bron is. */
.cf-carousel-track {
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cf-carousel-track.is-snapping {
  transition: none;
}

/* Drie tegelijk in beeld; onder 620px één, daar worden drie te smal. */
.cf-photo {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 3);
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  background: var(--cf-card);
}

@media (max-width: 620px) {
  .cf-photo {
    flex-basis: 100%;
  }
}

/* Tijdelijk: maakt zichtbaar dat er geroteerd wordt zolang alle foto's
   plaatshouders zijn. Weg zodra de echte foto's erin staan. */
.cf-photo-index {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 99px;
  background: rgb(21 19 16 / 62%);
  color: var(--cf-white);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}

.cf-carousel-nav {
  position: absolute;
  top: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--cf-line);
  border-radius: 50%;
  background: var(--cf-white);
  box-shadow: 0 6px 18px rgb(39 30 22 / 18%);
  color: var(--cf-ink);
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 140ms ease, color 140ms ease;
}

/* De pijlpunt erft kleur en lijndikte van de knop, zodat hover in één keer
   klopt en de lijn even zwaar blijft als de rand eromheen. */
.cf-carousel-nav svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cf-carousel-nav:hover {
  border-color: var(--cf-red);
  color: var(--cf-red);
}

.cf-carousel-nav:focus-visible {
  outline: 3px solid var(--cf-red);
  outline-offset: 2px;
}

.cf-carousel-nav--prev {
  left: 6px;
}

.cf-carousel-nav--next {
  right: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .cf-carousel-track {
    transition: none;
  }
}

.cf-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  background: var(--cf-card);
}

/* Vaste beeldverhouding met object-fit: de bronbestanden verschillen sterk van
   vorm, en zonder dit wordt het raster ongelijk. */
.cf-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 720px) {
  /* Zelfde breedte als .cf-builder, anders lopen de blokken niet gelijk */
  .cf-photos {
    width: calc(100% - 12px);
    margin-bottom: 40px;
  }

  .cf-photos-grid {
    gap: 10px;
  }
}

/* Mobile sticky action */
.cf-mobile-action {
  display: none;
}

/* Dialog */
.cf-dialog {
  width: min(600px, calc(100% - 28px));
  max-height: min(780px, calc(100dvh - 28px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--cf-ink);
  border-radius: 22px;
  background: var(--cf-card);
  color: var(--cf-ink);
  box-shadow: 0 30px 100px rgb(0 0 0 / 32%);
}

.cf-dialog::backdrop {
  background: rgb(21 19 16 / 72%);
  backdrop-filter: blur(4px);
}

.cf-dialog-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  padding: 25px 25px 15px;
}

.cf-dialog-header h2 {
  margin: 0;
  font-family: var(--cf-display);
  font-size: 2rem;
}

.cf-dialog-close {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--cf-line);
  border-radius: 50%;
  background: transparent;
  color: var(--cf-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.cf-dialog-close:hover {
  border-color: var(--cf-ink);
  background: var(--cf-ink);
  color: var(--cf-white);
}

.cf-concept-notice {
  padding: 13px 16px;
  margin: 0 25px 18px;
  border: 1px solid #e2b4b0;
  border-radius: 11px;
  background: var(--cf-red-soft);
  color: #542524;
  font-size: 0.82rem;
}

.cf-concept-notice strong {
  display: block;
  color: var(--cf-red-dark);
}

.cf-dialog-summary {
  padding: 0;
  margin: 0 25px;
  border-top: 1px solid var(--cf-line);
}

.cf-dialog-summary > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cf-line);
}

.cf-dialog-summary dt,
.cf-dialog-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.cf-dialog-summary dt {
  color: var(--cf-ink-soft);
}

.cf-dialog-summary dd {
  font-weight: 800;
}

.cf-dialog-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  align-items: baseline;
  padding: 18px 25px 0;
}

.cf-dialog-total span {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cf-dialog-total strong {
  color: var(--cf-red-dark);
  font-family: var(--cf-display);
  font-size: 1.75rem;
}

.cf-dialog-total small {
  grid-column: 1 / -1;
  color: var(--cf-ink-soft);
  font-size: 0.72rem;
}

.cf-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 25px 0;
}

.cf-dialog-footnote {
  padding: 0 25px 24px;
  margin: 8px 0 0;
  color: var(--cf-ink-soft);
  font-size: 0.7rem;
  text-align: center;
}

body.cf-dialog-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .cf-header-inner {
    grid-template-columns: 1fr auto;
  }

  .cf-header-meta {
    display: none;
  }

  .cf-layout {
    grid-template-columns: 1fr;
  }

  .cf-preview-wrap {
    position: static;
    order: -1;
  }

  .cf-preview-card {
    display: grid;
    grid-template-columns: minmax(155px, 0.9fr) minmax(180px, 1.1fr);
    gap: 12px 18px;
    padding: 17px;
  }

  .cf-preview-head {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .cf-preview-switcher {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .cf-stage,
  .cf-dog-preview {
    grid-column: 1;
    min-height: 166px;
  }

  .cf-dog-preview > img {
    min-height: 166px;
  }

  .cf-stage svg {
    max-height: 175px;
  }

  .cf-preview-meta {
    grid-column: 2;
    align-self: center;
  }

  .cf-price-row {
    display: block;
    padding-top: 0;
  }

  .cf-included {
    display: inline-block;
    margin-top: 4px;
  }

  .cf-trust-list li:not(:first-child) {
    display: none;
  }

  .cf-panel {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  body.configurator-page {
    padding-bottom: 86px;
    background-size: 28px 28px;
  }

  .cf-header-inner {
    width: min(100% - 28px, 1120px);
    min-height: 62px;
  }

  .cf-brand img {
    width: 165px;
  }

  .cf-home-link {
    font-size: 0.75rem;
  }

  .cf-intro {
    width: calc(100% - 30px);
    padding: 16px 0 10px;
  }

  .cf-intro h1 {
    font-size: 1.9rem;
  }

  .cf-progress {
    width: calc(100% - 20px);
    margin-bottom: 10px;
    overflow: hidden;
  }

  .cf-stepper {
    gap: 4px;
  }

  .cf-step {
    display: grid;
    min-height: 56px;
    place-items: center;
    padding: 8px 2px 10px;
    border-radius: 11px 11px 0 0;
    text-align: center;
  }

  .cf-step-number {
    width: 28px;
    height: 28px;
  }

  .cf-step strong {
    font-size: 0.64rem;
  }

  .cf-step small {
    display: none;
  }

  .cf-builder {
    width: calc(100% - 12px);
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 23px;
  }

  /* Op een telefoon naast elkaar zetten kostte de penning te veel: die kreeg
     een kolom van 128px terwijl de kaart er ruim 300 heeft. Nu onder elkaar,
     zodat de penning de volle breedte pakt en meteen leesbaar is. */
  .cf-preview-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    border-radius: 18px;
  }

  .cf-preview-head h2 {
    font-size: 1.15rem;
  }

  .cf-preview-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .cf-preview-kicker {
    display: none;
  }

  .cf-side-toggle button {
    min-width: 52px;
    min-height: 38px;
  }

  .cf-view-toggle button {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    min-height: 54px;
    padding: 7px;
  }

  .cf-view-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .cf-view-icon--collar i {
    top: 5px;
    width: 18px;
  }

  .cf-view-icon--collar::before {
    width: 17px;
    height: 8px;
  }

  .cf-view-icon--collar::after {
    bottom: 3px;
    width: 6px;
    height: 6px;
  }

  .cf-view-copy strong {
    overflow: visible;
    font-size: 0.66rem;
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
  }

  .cf-view-copy small {
    display: none;
  }

  .cf-stage,
  .cf-dog-preview,
  .cf-preview-meta {
    grid-column: 1 / -1;
  }

  .cf-stage {
    min-height: 0;
    padding: 2px;
  }

  .cf-stage svg {
    max-height: 200px;
  }

  .cf-dog-preview {
    min-height: 0;
  }

  .cf-dog-preview > img {
    min-height: 0;
    max-height: 350px;
  }

  /* Prijs en maat naast elkaar op een regel: onder elkaar zou de kaart weer
     onnodig lang worden nu de penning al hoger is. */
  .cf-preview-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 14px;
    align-items: center;
  }

  .cf-price-row {
    display: grid;
    gap: 2px;
  }

  .cf-size-readout {
    justify-self: end;
    text-align: right;
  }

  .cf-trust-list {
    grid-column: 1 / -1;
  }

  .cf-price {
    font-size: 1.42rem;
  }

  .cf-included {
    font-size: 0.57rem;
  }

  .cf-size-readout {
    display: block;
    padding: 8px 0;
    font-size: 0.72rem;
  }

  .cf-size-track {
    margin-top: 5px;
  }

  .cf-trust-list {
    padding-top: 8px;
    font-size: 0.64rem;
  }

  .cf-preview-note {
    display: none;
  }

  .cf-panel {
    padding: 27px 18px 25px;
    border-radius: 18px;
  }

  /* 2,2rem liep hier over drie regels en duwde de keuzes van het scherm af */
  .cf-panel h2 {
    font-size: 1.75rem;
  }

  .cf-panel-intro {
    margin-bottom: 18px;
    font-size: 0.84rem;
  }

  .cf-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Kleuren met z'n drieën: tien stuks in twee kolommen waren vijf rijen
     scrollen, en een staal heeft geen brede tegel nodig. Bij de vormen scheelt
     het bovendien een halflege tweede rij: drie vormen passen op één regel.

     Datzelfde geldt voor elke groep van drie: in twee kolommen staat er één
     alleen op de tweede rij, en dat leest als een vierde die ontbreekt. Met
     drie kolommen staan ze naast elkaar en worden de tegels bovendien vierkanter,
     net als bij de vormen. */
  .cf-choice-grid--colors,
  .cf-choice-grid--shapes,
  .cf-choice-grid--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cf-choice-grid--symbols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cf-choice {
    min-height: 83px;
  }

  .cf-actions {
    display: none;
  }

  .cf-mobile-action {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: 44px 1fr minmax(138px, auto);
    gap: 10px;
    align-items: center;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid rgb(21 19 16 / 20%);
    background: rgb(255 250 243 / 96%);
    box-shadow: 0 -12px 34px rgb(32 24 17 / 14%);
    backdrop-filter: blur(14px);
  }

  .cf-mobile-action > div {
    min-width: 0;
  }

  .cf-mobile-action span,
  .cf-mobile-action strong {
    display: block;
  }

  .cf-mobile-action span {
    color: var(--cf-ink-soft);
    font-size: 0.62rem;
  }

  .cf-mobile-action strong {
    font-family: var(--cf-display);
    font-size: 1.1rem;
  }

  .cf-mobile-action .cf-button {
    min-height: 46px;
    padding: 9px 13px;
    font-size: 0.77rem;
  }

  .cf-mobile-back {
    width: 44px;
    height: 44px;
    border: 1px solid var(--cf-line);
    border-radius: 10px;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 900;
  }

  .cf-mobile-back[hidden] {
    display: block;
    visibility: hidden;
  }

  body.cf-dialog-open .cf-mobile-action {
    display: none;
  }

  .cf-dialog-actions {
    grid-template-columns: 1fr;
  }

  /* Zolang er geen bedrag is staat er een zin waar een prijs hoort, en die is
     te breed voor deze twee plekken. De klasse wordt gezet zolang er geen prijs
     is ingevuld, dus zodra dat wel zo is valt dit vanzelf weg. */
  .cf-no-price .cf-preview-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .cf-no-price .cf-size-readout {
    justify-self: start;
    text-align: left;
  }

  /* "Op aanvraag" brak hier over twee regels en duwde de balk open. Zonder
     bedrag valt er in het midden toch niets te melden. */
  .cf-no-price .cf-mobile-action {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .cf-no-price .cf-mobile-action > div {
    display: none;
  }
}

@media (max-width: 410px) {
  .cf-home-link {
    width: auto;
    overflow: visible;
    white-space: normal;
  }

  .cf-home-full {
    display: none;
  }

  .cf-home-compact {
    display: inline;
  }

  .cf-home-link span {
    margin-left: 4px;
    font-size: 0.75rem;
  }

  .cf-price small {
    display: none;
  }

  /* Wijzig blijft op dezelfde regel staan, rechts uitgelijnd. Op een eigen
     regel eronder werd elke rij ruim 110px hoog en was de hele samenvatting
     een scrollpartij. */
  .cf-summary-row {
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .cf-edit-button {
    padding-right: 0;
    padding-left: 4px;
  }

  .cf-mobile-action {
    grid-template-columns: 42px minmax(55px, 0.6fr) minmax(135px, 1.4fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}