/* assets/dp-home-zakelijk.css — blok "Zakelijk bestellen bij Decoprof" op de homepage (snippets/dp-home-zakelijk.rain)
   Zelfde opbouw als de kop van /zakelijk-bestellen/ (assets/dp-zakelijk.css): lichtgrijs vlak (#FAFAFA, 27 okt), ronde foto met Trusted Shops-kaartje.
   Alle regels hangen onder #dphz. Kleuren en maten uit de huisstijl. */

#dphz { background: #FAFAFA; padding: 56px 0 64px; color: #666666; font-size: 15px; line-height: 1.6; }
#dphz *, #dphz *::before, #dphz *::after { box-sizing: border-box; }
#dphz a { text-decoration: none; }
#dphz .dphz-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px 56px; align-items: center; }
#dphz .dphz-txt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#dphz .dphz-h2 { margin: 0; color: #29384B; font-size: 28px; font-weight: 800; line-height: 1.2; }
#dphz .dphz-lead { margin: 0; max-width: 540px; font-size: 16px; }
#dphz .dphz-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 4px 0 0; padding: 0; list-style: none; }
#dphz .dphz-checks li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; color: #29384B; font-size: 14px; font-weight: 700; line-height: 1.4; }
#dphz .dphz-checks li::before { display: none; }
#dphz .dphz-vink { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: #70C067; color: #FFFFFF; }
#dphz .dphz-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 10px; }
#dphz .dphz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 2px solid #70C067; border-radius: 4px; background: #70C067; color: #FFFFFF; font-size: 15px; font-weight: 800; transition: background-color .15s, color .15s; }
#dphz .dphz-btn:hover { background: #FFFFFF; color: #29384B; }
#dphz .dphz-link { padding-bottom: 2px; border-bottom: 2px solid #70C067; color: #29384B; font-size: 15px; font-weight: 700; }
#dphz .dphz-link:hover { color: #3d8a35; }
#dphz .dphz-tel { display: inline-flex; align-items: center; gap: 8px; color: #29384B; font-size: 14px; }
#dphz .dphz-tel svg { color: #70C067; }
#dphz .dphz-tel:hover span { text-decoration: underline; }
#dphz .dphz-note { margin: 0; color: #898D93; font-size: 12px; }
#dphz .dphz-media { position: relative; justify-self: center; width: 100%; max-width: 400px; }
#dphz .dphz-media > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 18px rgba(255, 255, 255, .7); }
#dphz a.dphz-ts { position: absolute; left: -16px; bottom: 28px; display: grid; grid-template-columns: auto auto; gap: 0 10px; align-items: center; padding: 12px 16px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(41, 56, 75, .16); color: #29384B; }
#dphz .dphz-ts__sterren { grid-column: 1 / -1; color: #F5B400; font-size: 17px; letter-spacing: 2px; line-height: 1.2; }
#dphz .dphz-ts__score { font-size: 15px; }
#dphz .dphz-ts__score strong { font-size: 22px; font-weight: 800; }
#dphz .dphz-ts__door { color: #898D93; font-size: 12px; }

@media (max-width: 991px) {
  #dphz .dphz-grid { grid-template-columns: minmax(0, 1fr); }
  #dphz .dphz-media { order: -1; max-width: 300px; }
}
@media (max-width: 767px) {
  #dphz { padding: 32px 0 40px; }
  #dphz .dphz-h2 { font-size: 22px; }
  #dphz .dphz-lead { font-size: 15px; }
  #dphz .dphz-checks { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #dphz .dphz-media { max-width: 230px; }
  #dphz .dphz-media > img { box-shadow: 0 0 0 12px rgba(255, 255, 255, .7); }
  #dphz a.dphz-ts { left: auto; right: -56px; bottom: 4px; padding: 8px 12px; }
  #dphz .dphz-ts__score strong { font-size: 18px; }
  #dphz .dphz-ts__sterren { font-size: 14px; }
  #dphz .dphz-acties { flex-direction: column; align-items: stretch; gap: 10px; }
  #dphz .dphz-btn { width: 100%; }
  #dphz .dphz-link { align-self: center; }
  #dphz .dphz-tel { justify-content: center; }
  #dphz .dphz-note { text-align: center; }
}