/*
 * 3D-PRINTEN — foto, extra informatieblok en de contactknop
 *
 * Gewone CSS: pas een waarde aan, sla op en vernieuw de pagina.
 * Regels binnen @media gelden voor de genoemde schermbreedte.
 */

.mini-note {
  margin-top: 40px;
  padding: 22px 26px;
  border: 1px solid #cccac3;
  border-radius: 20px;
  font-size: 13px;
  line-height: 1.75;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 23px;
}

.mini-note strong {
  font-size: 13px;
}

.mini-note p {
  color: #626159;
}

.focus-box {
  border-left: 3px solid var(--orange);
  padding: 1px 0 1px 23px;
  margin-top: 25px;
}

.focus-box h3 {
  font-size: 24px;
  margin-bottom: 13px;
}

.focus-box p {
  font-size: 14px;
  color: #bebbb3;
}

.light .focus-box p {
  color: #64635b;
}

@media (max-width: 800px) {
  .mini-note {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .mini-note {
    margin-top: 29px;
    padding: 21px;
    font-size: 12px;
    border-radius: 17px;
    gap: 11px;
  }

  .mini-note strong {
    font-size: 13px;
  }

  .focus-box {
    padding-left: 20px;
  }

  .focus-box h3 {
    font-size: 23px;
  }

  .focus-box p {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .focus-box p {
    font-size: 14px;
  }

  .mini-note {
    padding: 18px;
    font-size: 14px;
  }
}

/* Grote voorbeeldfoto: 1 betekent vierkant; cover vult het fotovak. */
.detail-hero .visual > img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* Ruimte boven de knop bij de extra mogelijkheden. */
.extra-contact {
  margin-top: 28px;
}