/* =========================================================
   Productpagina (single-kleurplaat)
   Twee kolommen op desktop: groot voorbeeld links op een wit
   vel, rechts de titel, knoppen, beoordeling en printtips.
   ========================================================= */

.dkp-product__kolommen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 4px;
}
@media (min-width: 900px) {
  .dkp-product__kolommen {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 40px;
    align-items: start;
  }
}

/* Voorbeeld op het witte vel */
.dkp-product__velleeg {
  font-size: 14px;
  color: #A9A2B3;
}

.dkp-product__minis {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.dkp-product__mini {
  display: block;
  width: 70px;
  aspect-ratio: 1 / 1.414;
  border: 1px solid var(--dkp-lijn);
  border-radius: 10px;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #FCFAF6, #FCFAF6 8px, var(--dkp-mist) 8px, var(--dkp-mist) 16px);
}
.dkp-product__mini--actief { border: 2px solid var(--dkp-koraal); }
.dkp-product__mini--leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dkp-mist);
  padding: 4px;
  font-size: 11px;
  line-height: 1.3;
  color: #A9A2B3;
  text-align: center;
}
.dkp-product__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #FFFFFF;
}

/* Labels en titel */
.dkp-product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.dkp-product__titel {
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
@media (min-width: 782px) {
  .dkp-product__titel { font-size: 34px; }
}

.dkp-product__sterren {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.dkp-product__sterren:empty { display: none; }
@media (min-width: 782px) {
  .dkp-product__sterren { margin-bottom: 18px; }
}

.dkp-product__beschrijving {
  font-size: 15px;
  color: var(--dkp-subtekst);
  line-height: 1.6;
  margin: 0 0 18px;
}
@media (min-width: 782px) {
  .dkp-product__beschrijving { font-size: 16px; margin-bottom: 22px; }
}

/* Actieknoppen */
.dkp-product__acties {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dkp-product__actierij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Zonder pdf schuift de png-download naar de hoofdknop en blijft
   alleen de printknop over: die mag dan de hele rij vullen. */
.dkp-product__actierij > :only-child {
  grid-column: 1 / -1;
}
.dkp-product__acties .dkp-btn--primair {
  width: 100%;
  font-size: 17px;
  padding: 16px;
}
.dkp-product__acties .dkp-btn--secundair {
  width: 100%;
  font-size: 15px;
  padding: 13px;
  border-radius: 12px;
}

.dkp-product__bewaar {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--dkp-subtekst);
  background: var(--dkp-mist);
  border: 1px solid var(--dkp-lijn);
  border-radius: 12px;
  padding: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dkp-product__bewaar:hover { background: #EDE8DE; }
.dkp-product__bewaar.is-bewaard {
  color: var(--dkp-koraal-donker);
  background: var(--dkp-tint-koraal);
  border-color: #FFD3C9;
}
.dkp-product__hart { font-size: 17px; line-height: 1; }
.dkp-product__bewaar.is-bewaard .dkp-product__hart { color: var(--dkp-koraal); }

/* Beoordelingsblok: sterren en duim omhoog */
.dkp-product__beoordeling {
  margin-top: 16px;
  border: 1px solid var(--dkp-lijn);
  border-radius: 14px;
  padding: 14px 16px;
}
.dkp-product__beoordeling-vraag {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}
.dkp-product__beoordeling-acties {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dkp-product__sterrij { display: inline-flex; gap: 2px; }
.dkp-product__ster {
  border: none;
  background: none;
  padding: 2px;
  font-size: 26px;
  line-height: 1;
  color: var(--dkp-lijn);
  cursor: pointer;
  transition: color 0.1s ease, transform 0.1s ease;
}
.dkp-product__ster.is-vol { color: var(--dkp-geel); }
.dkp-product__ster:hover { transform: scale(1.12); }

.dkp-product__duim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--dkp-lijn);
  background: #FFFFFF;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 14px;
  color: var(--dkp-inkt);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dkp-product__duim:hover {
  background: var(--dkp-tint-groen);
  border-color: var(--dkp-groen);
}

.dkp-product__beoordeling-status {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--dkp-groen);
}
.dkp-product__beoordeling.is-klaar .dkp-product__ster,
.dkp-product__beoordeling.is-klaar .dkp-product__duim {
  pointer-events: none;
}
.dkp-product__beoordeling.is-klaar .dkp-product__duim { opacity: 0.5; }

/* Printtips */
.dkp-product__printtips { margin-top: 20px; }

/* Subtiele upsell naar bundel of Premium */
.dkp-product__upsell {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF4E0;
  border-radius: 14px;
  padding: 14px 16px;
}
.dkp-product__upsell-icoon { font-size: 22px; line-height: 1; }
.dkp-product__upsell-tekst {
  flex: 1;
  margin: 0;
  font-size: 14px;
  color: var(--dkp-subtekst);
  line-height: 1.4;
}
.dkp-product__upsell-tekst strong { color: var(--dkp-inkt); }
.dkp-product__upsell-link {
  font-weight: 700;
  font-size: 14px;
  color: var(--dkp-koraal);
  white-space: nowrap;
}
.dkp-product__upsell-link:hover { color: var(--dkp-koraal-donker); }

/* Lange uitlegtekst onder de kolommen */
.dkp-product__uitleg { margin-top: 32px; }

/* Meer zoals deze: scrollrij op mobiel, 5 kolommen op desktop */
.dkp-product__meer { margin-top: 36px; }
.dkp-product__meerraster {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.dkp-product__meerraster > * {
  width: 150px;
  flex: none;
}
@media (min-width: 600px) {
  .dkp-product__meerraster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    overflow: visible;
    padding-bottom: 0;
  }
  .dkp-product__meerraster > * { width: auto; }
}
@media (min-width: 900px) {
  .dkp-product__meerraster { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================
   Printstylesheet: alleen de kleurplaat op papier.
   Alles buiten het pad naar het beeld gaat op display:none,
   zodat er geen lege vellen of herhaalde pagina's ontstaan.
   Het beeld zelf blijft gewoon in de flow: precies 1 x A4.
   ========================================================= */
@media print {
  @page { size: A4 portrait; margin: 1cm; }

  body.single-kleurplaat > *:not(.dkp-site),
  body.single-kleurplaat .dkp-site > *:not(.dkp-main),
  body.single-kleurplaat .dkp-main > *:not(.dkp-product),
  body.single-kleurplaat .dkp-product > *:not(.dkp-product__kolommen),
  body.single-kleurplaat .dkp-product__kolommen > *:not(.dkp-product__voorbeeld),
  body.single-kleurplaat .dkp-product__voorbeeld > *:not(.dkp-vel) {
    display: none !important;
  }

  body.single-kleurplaat {
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
  }
  body.single-kleurplaat .dkp-main,
  body.single-kleurplaat .dkp-product,
  body.single-kleurplaat .dkp-product__kolommen,
  body.single-kleurplaat .dkp-product__voorbeeld {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  body.single-kleurplaat .dkp-vel {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
  }
  body.single-kleurplaat .dkp-product__velbeeld {
    aspect-ratio: auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    display: block !important;
    overflow: visible !important;
  }
  body.single-kleurplaat .dkp-product__velleeg { display: none !important; }
  body.single-kleurplaat .dkp-product__velbeeld img {
    display: block;
    width: 100%;
    height: auto;
    /* A4 min de paginamarges, zodat het beeld nooit doorloopt naar vel 2. */
    max-height: 27.7cm;
    object-fit: contain;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}