/* DPW 3 luik 1.0.0: hero + muurbreedte-kiezer op /product-categorie/diamond-painting-3-luik/ */
.dpw-3l-hero, .dpw-3l, .dpw-3l-onder { --l-ink: #111a2e; --l-zacht: #4a5468; --l-lijn: #e3e6ec; --l-goud: #8a6a1f; --l-paneel: #b8922f; }

html body .dpw-3l-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: center; margin: .5rem 0 2.5rem; }
html body .dpw-3l-hero h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; color: var(--l-ink); margin: .35rem 0 1rem; text-transform: none; }
html body .dpw-3l-oog { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l-goud); margin: 0; }
html body .dpw-3l-hero p:not(.dpw-3l-oog) { font-size: 1.0625rem; line-height: 1.65; color: var(--l-zacht); margin: 0 0 1rem; max-width: 34rem; }
html body .dpw-3l-hero figure { margin: 0; }
html body .dpw-3l-hero img { display: block; width: 100%; height: auto; border-radius: 6px; }
html body .dpw-3l-hero figcaption { font-size: .875rem; line-height: 1.45; color: var(--l-zacht); margin-top: .6rem; }
html body .dpw-3l-hero figcaption a { color: var(--l-ink); text-decoration: underline; text-underline-offset: 2px; }
html body .dpw-3l-hero .dpw-3l-naar { display: inline-block; padding: .8rem 1.3rem; background: var(--l-ink) !important; color: #fff !important; border-radius: 8px !important; font-weight: 700; text-decoration: none; }
html body .dpw-3l-hero .dpw-3l-naar:hover { background: #26324d !important; }

html body .dpw-3l { margin: 0 0 3rem; padding-top: 2.5rem; border-top: 1px solid var(--l-lijn); scroll-margin-top: 90px; }
html body .dpw-3l-kop h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.15; color: var(--l-ink); margin: 0 0 .5rem; }
html body .dpw-3l-kop p { color: var(--l-zacht); max-width: 40rem; margin: 0 0 1.5rem; line-height: 1.6; }

html body .dpw-3l-invoer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem 1.25rem; align-items: center; max-width: 46rem; margin: 0 0 1rem; }
html body .dpw-3l-invoer label { font-weight: 700; color: var(--l-ink); margin: 0; text-transform: none !important; letter-spacing: 0; font-size: 1rem; }
html body .dpw-3l-invoer input[type=range] { width: 100%; margin: 0; padding: 0; height: 2rem; min-height: 0; border: 0 !important; box-shadow: none !important; background: transparent; accent-color: var(--l-paneel); }
html body .dpw-3l-cm { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--l-ink); }
html body .dpw-3l-cm input { width: 5rem; margin: 0; height: 2.6rem; min-height: 0; padding: 0 .5rem; text-align: right; font-weight: 700; font-size: 1.0625rem; color: var(--l-ink); border: 1px solid #8c96aa; border-radius: 6px; box-shadow: none; font-variant-numeric: tabular-nums; }
html body .dpw-3l-stand { font-size: 1.125rem; font-weight: 700; color: var(--l-ink); margin: 0 0 .5rem; min-height: 1.6em; }

html body .dpw-3l-lijst { list-style: none; margin: 0 !important; padding: 0 !important; }
html body .dpw-3l-rij { display: grid; grid-template-columns: 80px minmax(0, 1fr) 11rem 5.5rem auto; gap: 1.5rem; align-items: center; padding: .9rem 0; margin: 0 !important; border-bottom: 1px solid var(--l-lijn); }
html body .dpw-3l.is-js .dpw-3l-rij.is-extra { display: none; }
html body .dpw-3l.is-js .dpw-3l-lijst.is-alles .dpw-3l-rij.is-extra { display: grid; }
html body .dpw-3l-beeld img { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: 6px; }
html body .dpw-3l-wat { display: flex; flex-direction: column; gap: .1rem; min-width: 0; color: var(--l-ink); line-height: 1.4; }
html body .dpw-3l-naam { font-weight: 700; color: var(--l-ink) !important; text-decoration: none; }
html body .dpw-3l-naam:hover { text-decoration: underline; }
html body .dpw-3l-klein { font-size: .875rem; color: var(--l-zacht); }
html body .dpw-3l-prijs { font-weight: 700; color: var(--l-ink); font-variant-numeric: tabular-nums; }
html body .dpw-3l-koop { display: inline-block; padding: .5rem .9rem; background: var(--l-ink); color: #fff !important; border-radius: 8px; font-size: .9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
html body .dpw-3l-koop:hover { background: #26324d; }

/* muur op schaal: de breedte van dit vlak is de vrije muur, de vakken zijn de doeken */
html body .dpw-3l-muur { display: flex; align-items: flex-end; justify-content: center; gap: var(--naad, 3%); padding-bottom: .4rem; border-bottom: 2px solid #c9ced8; }
html body .dpw-3l-muur i { display: block; flex: none; background: #f1e7cd; box-shadow: inset 0 0 0 1px var(--l-paneel); transition: width .18s ease-out; }

html body .dpw-3l-rij.is-niet .dpw-3l-beeld img { opacity: .55; }
html body .dpw-3l-rij.is-niet .dpw-3l-muur i { background: #eceef2; box-shadow: inset 0 0 0 1px #8c96aa; }
html body .dpw-3l-rij.is-niet .dpw-3l-koop { background: #fff; color: var(--l-ink) !important; box-shadow: inset 0 0 0 1px var(--l-ink); }

html body .dpw-3l-meer { margin: 1rem 0 0 !important; padding: .6rem 1.1rem !important; background: #fff !important; color: var(--l-ink) !important; border: 1px solid var(--l-ink) !important; border-radius: 8px !important; font-weight: 700; text-transform: none; letter-spacing: 0; min-height: 0; line-height: 1.3; }
html body .dpw-3l:not(.is-js) .dpw-3l-meer { display: none; }
html body .dpw-3l-noot { font-size: .8125rem; line-height: 1.55; color: var(--l-zacht); max-width: 46rem; margin: 1rem 0 0; }

html body .dpw-3l-onder { max-width: 46rem; margin: 3rem 0 2rem; }
html body .dpw-3l-onder h2 { font-size: 1.6rem !important; line-height: 1.2; margin: 2.2rem 0 .7rem !important; color: var(--l-ink); }
html body .dpw-3l-onder p { font-size: 1rem; line-height: 1.7 !important; color: #3a4357 !important; }
html body .dpw-3l-onder a { color: var(--l-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* sterren en aantallen op de productkaarten: te licht op wit */
html body .dp-card-stars { color: #8a6a1f; }
html body .dp-card-stars .dp-card-count { color: #5a6478; }

@media (max-width: 849px) {
  html body .dpw-3l-hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  html body .dpw-3l-invoer { grid-template-columns: minmax(0, 1fr) auto; }
  html body .dpw-3l-invoer label { grid-column: 1 / -1; }
  html body .dpw-3l-rij { grid-template-columns: 64px minmax(0, 1fr) auto; gap: .6rem .9rem; }
  html body .dpw-3l-beeld img { width: 64px; height: 64px; }
  html body .dpw-3l-muur { grid-column: 1 / 3; grid-row: 2 / 4; align-self: center; width: min(100%, 11rem); }
  html body .dpw-3l-wat { grid-column: 2 / -1; }
  html body .dpw-3l-prijs { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }
  html body .dpw-3l-koop { grid-column: 3; grid-row: 3; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html body .dpw-3l-muur i { transition: none; }
}