/* assets/dp-rec.css — productblokken uit snippets/dp-rec.rain (vervangen de HelloRetail-blokken).
   Slider-opmaak = die van het thema voor #home-block-products (style.css), hier voor .dp-rec. */
.dp-rec:not(.is-vol) { height: 0; padding: 0 !important; margin: 0; overflow: hidden; }
.dp-rec.is-vol { padding: 50px 0 0; }
.dp-rec h2, .dp-rec h3 { margin-bottom: 0; }
.dp-rec .slider-wrap { margin-left: -25px; overflow: hidden; width: calc(100% + 50px); }
.dp-rec .product-slider.owl-carousel { margin-left: 25px; width: calc(100% - 50px); }
.dp-rec .product-slider { margin-top: 15px; position: relative; }
.dp-rec .product-slider .product { position: relative; }
.dp-rec .product-slider .owl-item.active::before,
.dp-rec .product-slider .owl-item.active::after { background: var(--lines); content: ""; height: calc(100% - 45px); position: absolute; top: 15px; width: 1px; }
.dp-rec .product-slider .owl-item.active::before { left: -1px; }
.dp-rec .product-slider .owl-item.active::after { background-color: transparent; right: 0; }
.dp-rec .product-slider .owl-item:hover { z-index: 1; }
.dp-rec .product-slider .owl-item:hover::before,
.dp-rec .product-slider .owl-item:hover::after { background: var(--white); }
.dp-rec .product-slider .owl-item.active::before,
.dp-rec .product-slider .owl-item.active:hover ~ .owl-item::before { display: none; }
.dp-rec .product-slider .owl-item.active ~ .owl-item::before { display: block; }
.dp-rec .product-slider .owl-item:not(.active) .product { pointer-events: none; }
.dp-rec .product-slider .owl-item:not(.active) .product:hover { box-shadow: none; }
.dp-rec .product-slider .product .wrap { padding: 30px; }
.dp-rec .product-slider.owl-carousel .owl-stage-outer { overflow: visible; }
.dp-rec .product-slider.owl-carousel .owl-stage { display: flex; margin-bottom: 30px; }
.dp-rec .product-slider.owl-carousel .product { height: 100%; max-width: 100%; width: 100%; }
.dp-rec .product-slider.owl-carousel .owl-dots { display: none; }

/* pijltjes (het themablok heeft ze niet; met meer dan 4 producten handig op desktop) */
.dp-rec .product-slider .owl-nav { position: absolute; top: 34%; left: 0; right: 0; height: 0; pointer-events: none; }
.dp-rec .product-slider .owl-nav.disabled { display: none; }
.dp-rec .product-slider .owl-nav button.owl-prev,
.dp-rec .product-slider .owl-nav button.owl-next {
  pointer-events: auto; position: absolute; top: 0; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--lines, #ECECEC) !important; border-radius: 50%; background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(41, 56, 75, .12); color: #29384B !important; font-size: 28px; line-height: 40px; z-index: 2;
}
.dp-rec .product-slider .owl-nav button.owl-prev { left: -18px; }
.dp-rec .product-slider .owl-nav button.owl-next { right: -18px; }
.dp-rec .product-slider .owl-nav button.disabled { opacity: 0; pointer-events: none; }
.dp-rec .product-slider .owl-nav button:hover { background: #29384B !important; color: #FFFFFF !important; }

/* themategels in ons blok hebben de klasse .products (voor shopmonkey.js); de rand die daarbij hoort niet */
.dp-rec .product-slider.products, .dp-trend-grid.products { border: 0 !important; }

/* zonder Owl Carousel: horizontaal scrollen */
.dp-rec--zonder-owl .product-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.dp-rec--zonder-owl .product-slider > .product { flex: 0 0 50%; scroll-snap-align: start; }
@media (min-width: 992px) { .dp-rec--zonder-owl .product-slider > .product { flex-basis: 33.333%; } }
@media (min-width: 1200px) { .dp-rec--zonder-owl .product-slider > .product { flex-basis: 25%; } }

@media (max-width: 991.98px) {
  .dp-rec .product-slider .owl-nav { display: none; }
}
@media (max-width: 767.98px) {
  .dp-rec .product-slider.owl-carousel .owl-dots { display: block; bottom: 0; left: 50%; margin-top: 10px; position: absolute; transform: translateX(-50%); }
}
@media (max-width: 575.98px) {
  .dp-rec.is-vol { padding: 30px 0; }
  .dp-rec .slider-wrap { margin-left: -15px; width: calc(100% + 30px); }
  .dp-rec .product-slider { margin-top: 0; }
  .dp-rec .product-slider.owl-carousel { margin-left: 0; width: 100%; }
  .dp-rec .product-slider .product .wrap { padding: 15px; }
  .dp-rec .product-slider .owl-item:hover::before,
  .dp-rec .product-slider .owl-item:hover::after { background: var(--lines); }
  .dp-rec .product-slider .owl-item.active::before,
  .dp-rec .product-slider .owl-item.active::after { height: calc(100% - 15px); }
  .dp-rec .product-slider.owl-carousel .owl-dots { bottom: -30px; }
}

/* op categoriepagina's en de 404-pagina: wat lucht onder het blok */
.dp-rec--hardlopers.is-vol, .dp-rec--404.is-vol { padding-bottom: 30px; }

/* "Nu trending": raster van max. 8 producten, rijen van 4 (desktop) / 2 (mobiel), dunne lijnen ertussen.
   Ook gebruikt door het themablok op de homepage (snippets/home-block-producten.rain). */
.dp-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 15px 0 30px; overflow: hidden; }
@media (min-width: 992px) { .dp-trend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-trend-grid > .product { width: auto; max-width: none; flex: none; margin: 0; height: 100%; box-shadow: -1px 0 0 0 var(--lines, #ECECEC), 0 -1px 0 0 var(--lines, #ECECEC); }
.dp-trend-grid > .product .wrap { padding: 30px; height: 100%; }
@media (max-width: 575.98px) { .dp-trend-grid > .product .wrap { padding: 15px; } }

/* "Vergelijkbare producten" bij verf: vergelijkingstabel (dit product + 3), kolommen naast elkaar, op mobiel horizontaal scrollen */
.dp-rec--vergelijkbaar.is-vol { padding: 30px 0; }
.dp-vgl { margin-top: 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dp-vgl__tabel { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.dp-vgl__tabel th, .dp-vgl__tabel td { vertical-align: top; text-align: left; padding: 12px 16px; border-left: 1px solid var(--lines, #ECECEC); font-weight: 400; }
.dp-vgl__tabel th:first-child, .dp-vgl__tabel td:first-child { border-left: 0; }
.dp-vgl__tabel td { border-top: 1px solid var(--lines, #ECECEC); }
.dp-vgl__tabel .is-zelf { background: var(--light, #FAFAFA); }
.dp-vgl__kop { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.dp-vgl__dit { align-self: flex-start; font-size: 12px; font-weight: 700; color: #29384B; background: #FFFFFF; border: 1px solid var(--lines, #ECECEC); border-radius: 4px; padding: 2px 8px; }
.dp-vgl__beeld { position: relative; display: flex; justify-content: center; }
.dp-vgl__beeld img { max-width: 100%; height: 150px; width: auto; object-fit: contain; }
/* dit product: foto in een witte cirkel */
.dp-vgl__tabel th.is-zelf .dp-vgl__beeld { width: 170px; height: 170px; margin: 0 auto; border-radius: 50%; background: #FFFFFF; align-items: center; overflow: hidden; }
.dp-vgl__tabel th.is-zelf .dp-vgl__beeld img { width: 130px; height: 130px; }
.dp-vgl__titel { font-weight: 800; color: #29384B; line-height: 1.3; }
.dp-vgl .dp-vgl__kop .meta { margin: 0 !important; align-items: center; gap: 6px; font-size: 12px; }
.dp-vgl__oms { margin: 0; font-size: 12px; line-height: 1.5; color: #666666; }
.dp-vgl__prijs { color: #29384B; }
.dp-vgl__prijs .price { font-weight: 800; }
.dp-vgl__onder { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.dp-vgl__link { color: #0099E5; font-weight: 700; white-space: nowrap; text-decoration: none; }
.dp-vgl__link:hover { text-decoration: underline; }
.dp-vgl__label { display: block; font-size: 12px; font-weight: 700; color: #70C067; }
.dp-vgl__waarde { display: block; color: #29384B; }