/* DPW loep en kijktest v1.0.0 */
:root { --dpwl-ink: #111a2e; --dpwl-goud: #b78522; --dpwl-goud-licht: #f6efe0; --dpwl-lijn: #e4ddd0; --dpwl-grijs: #5a6070; }

/* knoppen die overal terugkomen */
.dpw-loep-knop, .dpw-loep-open-product, .dpw-kt-knop, .dpw-loep-cta-knop, .dpw-lv button, .dpw-loep-balk button, .dpw-loep-balk a {
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; min-height: 44px; padding: .6rem 1rem;
  border-radius: 6px; border: 2px solid var(--dpwl-ink); background: #fff; color: var(--dpwl-ink); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-transform: none; letter-spacing: 0; margin: 0;
}
.dpw-kt-knop, .dpw-loep-cta-knop { background: var(--dpwl-ink); color: #fff; }
.dpw-loep-knop:focus-visible, .dpw-loep-open-product:focus-visible, .dpw-kt-knop:focus-visible, .dpw-kt-link:focus-visible, .dpw-kt-keuze:focus-visible,
.dpw-lv button:focus-visible, .dpw-lv-podium:focus-visible, .dpw-gv-chips button:focus-visible, .dpw-loep-balk a:focus-visible, .dpw-loep-balk button:focus-visible, .dpw-loep-cta-knop:focus-visible {
  outline: 3px solid var(--dpwl-goud); outline-offset: 2px;
}
.dpw-loep-knop::before, .dpw-loep-open-product::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111a2e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E");
}

/* kaartknop in de winkel */
.product-small .box-image { position: relative; }
.dpw-loep-knop-kaart { position: absolute; left: 8px; top: 8px; z-index: 5; min-height: 40px; padding: .4rem .7rem; font-size: .95rem; border-width: 1px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.dpw-vlak-badge { display: inline-block; align-self: flex-start; font-size: .8rem; font-weight: 700; color: #6b4a0c; background: var(--dpwl-goud-licht); padding: .2rem .5rem; border-radius: 4px; margin: 0 0 .35rem; }

/* balk onderin als de loep aan staat */
.dpw-loep-balk { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9990; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  background: var(--dpwl-ink); color: #fff; padding: .5rem .6rem .5rem 1rem; border-radius: 10px; box-shadow: 0 6px 24px rgba(17,26,46,.28); max-width: calc(100vw - 24px); }
.dpw-loep-balk-tekst { font-weight: 700; margin-right: .25rem; }
.dpw-loep-balk a, .dpw-loep-balk button { min-height: 40px; padding: .45rem .8rem; border: 2px solid #fff !important; background: transparent !important; color: #fff !important; box-shadow: none !important; }
.dpw-loep-balk .dpw-loep-balk-filter { background: #fff !important; color: var(--dpwl-ink) !important; }
.dpw-loep-balk a:hover, .dpw-loep-balk button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* met de loep aan: geen wissel naar de tweede productfoto bij hover */
.dpw-loep-aan .product-small .box-image .back-image { display: none !important; }

/* muisloep */
.dpw-loep-lens { position: fixed; width: 200px; height: 200px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--dpwl-ink), 0 10px 30px rgba(0,0,0,.3);
  background-repeat: no-repeat; pointer-events: none; z-index: 9995; }

/* loepvenster */
.dpw-lv { width: min(1100px, calc(100vw - 16px)); max-width: none; max-height: calc(100vh - 16px); padding: 0; border: 0; border-radius: 10px; color: var(--dpwl-ink); background: #fff; overflow: auto; }
.dpw-lv[open] { animation: dpwLvIn .16s ease-out; }
.dpw-lv.dpw-lv-stil[open] { animation: none; }
@keyframes dpwLvIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.dpw-lv::backdrop { background: rgba(17,26,46,.72); }
.dpw-lv-kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--dpwl-lijn); }
.dpw-lv-kop h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.dpw-lv-podium { height: min(62vh, 640px); touch-action: none; cursor: grab; background: #f4f2ee; }
.dpw-lv-podium:active { cursor: grabbing; }
.dpw-lv-podium canvas { width: 100%; height: 100%; display: block; }
.dpw-lv-bediening { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; padding: .75rem 1rem 0; }
.dpw-lv-groep { display: inline-flex; gap: .35rem; }
.dpw-lv .dpw-lv-groep button, .dpw-lv .dpw-lv-sluit { background: #fff !important; color: var(--dpwl-ink) !important; border: 2px solid var(--dpwl-ink) !important; box-shadow: none !important; }
.dpw-lv .dpw-lv-groep button[aria-pressed="true"] { background: var(--dpwl-ink) !important; color: #fff !important; }
.product-small .dpw-loep-knop-kaart, .dpw-gv-item .dpw-loep-knop, .dpw-vlak-melding .dpw-loep-open-product { background: #fff !important; color: var(--dpwl-ink) !important; border: 1px solid var(--dpwl-ink) !important; }
.dpw-lv-formaat { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; margin: 0; }
.dpw-lv-formaat select { min-height: 44px; font-size: 1rem; margin: 0; width: auto; }
.dpw-lv-info { padding: .5rem 1rem 0; margin: 0; font-size: 1.05rem; line-height: 1.55; max-width: 72ch; }
.dpw-lv-link { padding: .25rem 1rem 1rem; margin: 0; font-weight: 700; }
.dpw-lv-link a { color: var(--dpwl-ink); text-decoration: underline; text-underline-offset: 3px; }

/* melding op de productpagina */
.dpw-vlak-melding { margin: 1rem 0; padding: .9rem 0 0; border-top: 1px solid var(--dpwl-lijn); }
.dpw-vlak-melding p { margin: 0 0 .6rem; font-size: 1rem !important; line-height: 1.55; font-weight: 400 !important; color: var(--dpwl-ink); }
.dpw-vlak-melding p strong { font-weight: 700; }
.dpw-vlak-melding a { color: var(--dpwl-ink); text-decoration: underline; text-underline-offset: 3px; margin-left: .5rem; }

/* kijktest */
.dpw-kt { margin: 2.6rem 0; padding: 1.6rem 0 0; border-top: 3px solid var(--dpwl-ink); max-width: 860px; }
.dpw-kt h2 { margin: 0 0 .8rem; font-size: 1.6rem; line-height: 1.25; }
.dpw-kt h3 { margin: 1.4rem 0 .5rem; font-size: 1.2rem; }
.dpw-kt p { font-size: 1.06rem; line-height: 1.7; max-width: 72ch; }
.dpw-kt-pas { margin: 1rem 0; height: 56px; }
.dpw-kt-pas span { display: block; height: 100%; width: 323px; max-width: 100%; background: var(--dpwl-goud); border-radius: 6px; }
.dpw-kt-vorm { border: 0; padding: 0; margin: 0 0 1rem; }
.dpw-kt-vorm legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.dpw-kt-vorm label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin: 0 1.2rem 0 0; font-size: 1.05rem; }
.dpw-kt-vorm input { width: 22px; height: 22px; margin: 0; accent-color: var(--dpwl-ink); }
.dpw-kt-schuif { display: block; font-weight: 600; margin: 0 0 1rem; }
.dpw-kt-schuif input { display: block; width: 100%; max-width: 720px; height: 44px; margin-top: .3rem; accent-color: var(--dpwl-ink); }
.dpw-kt-knoppen { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.dpw-kt-link { font: inherit; font-size: 1rem; background: none; border: 0; padding: .6rem 0; min-height: 44px; color: var(--dpwl-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.dpw-kt-veld-wrap { margin: 1rem 0; overflow-x: auto; }
.dpw-kt-veld { display: block; }
.dpw-kt-keuzes { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; }
.dpw-kt-keuze { font: inherit; font-size: 1.6rem; font-weight: 700; width: 64px; height: 64px; border: 2px solid var(--dpwl-ink); border-radius: 8px; background: #fff; color: var(--dpwl-ink); cursor: pointer; margin: 0; padding: 0; }
.dpw-kt-keuze:hover { background: var(--dpwl-goud-licht); }
.dpw-kt-uitslag-kop { font-size: 1.35rem !important; }
.dpw-kt-verder { font-weight: 600; }
.dpw-kt-verder a { color: var(--dpwl-ink); text-decoration: underline; text-underline-offset: 3px; }
.dpw-kt-noot { font-size: .95rem !important; color: var(--dpwl-grijs); }

/* ontwerpen met grote vlakken */
.dpw-gv { margin: 2.8rem 0; }
.dpw-gv h2 { margin: 0 0 .6rem; font-size: 1.6rem; line-height: 1.25; }
.dpw-gv-intro { font-size: 1.06rem; line-height: 1.7; max-width: 72ch; }
.dpw-gv-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.2rem; }
.dpw-gv-chips button { font: inherit; font-size: 1rem; font-weight: 600; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 2px solid var(--dpwl-ink); background: #fff; color: var(--dpwl-ink); cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.dpw-gv-chips button { background: #fff !important; color: var(--dpwl-ink) !important; border: 2px solid var(--dpwl-ink) !important; box-shadow: none !important; }
.dpw-gv-chips button[aria-selected="true"] { background: var(--dpwl-ink) !important; color: #fff !important; }
.dpw-gv-grid { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
.dpw-gv-item { margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: .35rem; }
.dpw-gv-item::before { display: none !important; content: none !important; }
.dpw-gv-beeld { display: block; aspect-ratio: 1; background: #f4f2ee; border-radius: 6px; overflow: hidden; }
.dpw-gv-beeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dpw-gv-naam { font-weight: 700; line-height: 1.35; }
.dpw-gv-naam a { color: var(--dpwl-ink); text-decoration: none; }
.dpw-gv-naam a:hover { text-decoration: underline; }
.dpw-gv-meting { font-size: .92rem; color: var(--dpwl-grijs); }
.dpw-gv-item .dpw-loep-knop { align-self: flex-start; min-height: 40px; padding: .35rem .75rem; border-width: 1px; }
.dpw-gv-meer { margin-top: 1.4rem; font-weight: 700; }
.dpw-gv-meer a { color: var(--dpwl-ink); text-decoration: underline; text-underline-offset: 3px; }
.dpw-loep-cta { margin: 1.4rem 0; }

@media (max-width: 849px) { .dpw-gv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 549px) {
  .dpw-gv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem .9rem; }
  .dpw-kt h2, .dpw-gv h2 { font-size: 1.4rem; }
  .dpw-lv-podium { height: 52vh; }
  .dpw-lv-bediening { gap: .6rem; }
  .dpw-lv button { padding: .5rem .7rem; }
  .dpw-loep-balk { bottom: 60px; padding-left: .7rem; }
  .dpw-loep-balk-tekst { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dpw-lv[open] { animation: none; } }

/* boven de theme-regel .dpw-fresh-live button { background: navy !important } */
html body .dpw-gv .dpw-gv-chips button,
html body .product-small .dpw-loep-knop-kaart,
html body .dpw-gv-item .dpw-loep-knop,
html body .dpw-vlak-melding .dpw-loep-open-product,
html body .dpw-lv .dpw-lv-groep button,
html body .dpw-lv .dpw-lv-sluit,
html body .dpw-kt .dpw-kt-keuze { background: #fff !important; color: var(--dpwl-ink) !important; }
html body .dpw-gv .dpw-gv-chips button[aria-selected="true"],
html body .dpw-lv .dpw-lv-groep button[aria-pressed="true"],
html body .dpw-kt .dpw-kt-knop { background: var(--dpwl-ink) !important; color: #fff !important; }
html body .dpw-kt .dpw-kt-link { background: none !important; color: var(--dpwl-ink) !important; border: 0 !important; box-shadow: none !important; padding: .6rem 0 !important; }
html body .dpw-loep-balk button, html body .dpw-loep-balk a { background: transparent !important; color: #fff !important; }
html body .dpw-loep-balk .dpw-loep-balk-filter { background: #fff !important; color: var(--dpwl-ink) !important; }
html body .dpw-kt .dpw-kt-keuze:hover { background: var(--dpwl-goud-licht) !important; }
html body .product .dpw-vlak-melding p { font-weight: 400 !important; font-size: 1rem !important; line-height: 1.55 !important; color: var(--dpwl-ink) !important; }
html body .product .dpw-vlak-melding p strong { font-weight: 700 !important; }
html body .dpw-loep-cta .dpw-loep-cta-knop, html body a.dpw-loep-cta-knop { background: var(--dpwl-ink) !important; color: #fff !important; border-color: var(--dpwl-ink) !important; text-decoration: none !important; }
html body a.dpw-loep-cta-knop:hover { background: #24304d !important; color: #fff !important; }

/* ---------- loepvenster v1.1.5: rustige bedieningsbalk, segmentknoppen, normale leestekst ---------- */
html body .dpw-lv { --lv-lijn: #d5dae3; font-weight: 400; }
html body .dpw-lv-kop { padding: 12px 20px; border-bottom: 1px solid #e6e8ee; }
html body .dpw-lv-kop h2 { font-size: 1.125rem !important; font-weight: 800; letter-spacing: -0.01em; }
html body .dpw-lv .dpw-lv-sluit { min-height: 40px; padding: 0 14px; border: 1px solid var(--lv-lijn) !important; border-radius: 8px !important; font-size: .9375rem; font-weight: 600; }
html body .dpw-lv-bediening { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 20px 0; border-top: 1px solid #e6e8ee; }
html body .dpw-lv-groep { display: inline-flex; gap: 0; }
html body .dpw-lv .dpw-lv-groep button { min-height: 40px; padding: 0 14px; border: 1px solid var(--lv-lijn) !important; border-radius: 0 !important; font-size: .9375rem; font-weight: 600; }
html body .dpw-lv .dpw-lv-groep button + button { margin-left: -1px; }
html body .dpw-lv .dpw-lv-groep button:first-child { border-radius: 8px 0 0 8px !important; }
html body .dpw-lv .dpw-lv-groep button:last-child { border-radius: 0 8px 8px 0 !important; }
html body .dpw-lv .dpw-lv-groep button[aria-pressed="true"] { border-color: var(--dpwl-ink) !important; position: relative; z-index: 1; }
html body .dpw-lv-formaat { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--dpwl-grijs); }
html body .dpw-lv-formaat select { min-height: 40px; height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--lv-lijn); border-radius: 8px; background-color: #fff; color: var(--dpwl-ink); font-size: .9375rem; font-weight: 600; box-shadow: none; }
html body .dpw-lv-info { padding: 12px 20px 0; font-size: .9375rem !important; font-weight: 400 !important; line-height: 1.6 !important; color: #3b4458 !important; max-width: 78ch; }
html body .dpw-lv-link { padding: 8px 20px 18px; font-size: .9375rem; font-weight: 700; }
@media (max-width: 549px) {
  html body .dpw-lv-kop { padding: 10px 16px; }
  html body .dpw-lv-bediening { padding: 12px 16px 0; gap: 10px; }
  html body .dpw-lv-groep { flex: 1 1 100%; }
  html body .dpw-lv .dpw-lv-groep button { flex: 1 1 0; padding: 0 8px; }
  html body .dpw-lv-formaat { flex: 1 1 calc(50% - 5px); flex-direction: column; align-items: stretch; gap: 4px; font-size: .8125rem; }
  html body .dpw-lv-formaat select { width: 100%; }
  html body .dpw-lv-info { padding: 10px 16px 0; font-size: .875rem !important; }
  html body .dpw-lv-link { padding: 6px 16px 16px; }
}
/* podium krijgt bij openen automatisch focus: ring binnenin en subtiel */
html body .dpw-lv-podium:focus-visible { outline: 2px solid rgba(183, 133, 34, .55); outline-offset: -2px; }

/* ---------- v1.2.0: bestellen vanuit het loepvenster + ruimte onderin ---------- */
html body .dpw-lv-info { padding: 12px 20px 18px; }
html body .dpw-lv-link { padding: 0 20px 20px; margin-top: -6px; }
html body .dpw-lv-koop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 20px 0; padding: 12px 14px; background: #f5f7fa; border: 1px solid #e6e8ee; border-radius: 10px; }
html body .dpw-lv-koop[hidden] { display: none; }
html body .dpw-lv-prijs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body .dpw-lv-prijs[hidden] { display: none; }
html body .dpw-lv-prijs strong { font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--dpwl-ink); font-variant-numeric: tabular-nums; }
html body .dpw-lv-prijs span { font-size: .875rem; color: var(--dpwl-grijs); line-height: 1.35; }
html body .dpw-lv .dpw-lv-mand { margin-left: auto; min-height: 44px; padding: 0 20px; border-radius: 8px !important; border: 1px solid var(--dpwl-ink) !important; background: var(--dpwl-ink) !important; color: #fff !important; font-size: .9375rem; font-weight: 700; }
html body .dpw-lv .dpw-lv-mand[hidden] { display: none; }
html body .dpw-lv .dpw-lv-mand:disabled { opacity: .55; cursor: default; }
html body .dpw-lv .dpw-lv-mand::before { content: ""; width: 18px; height: 18px; flex: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E"); }
html body .dpw-lv-naarproduct { font-weight: 700; color: var(--dpwl-ink); text-decoration: underline; text-underline-offset: 3px; }
html body .dpw-lv-naarproduct[hidden] { display: none; }
html body .dpw-lv-koopstatus { flex-basis: 100%; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--dpwl-ink); }
html body .dpw-lv-koopstatus:empty { display: none; }
html body .dpw-lv-koopstatus a { font-weight: 700; color: var(--dpwl-ink); text-decoration: underline; text-underline-offset: 3px; }

/* kaartjes: Loep + Bestellen naast elkaar */
html body .dpw-gv-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
html body .dpw-gv-item .dpw-gv-knoppen .dpw-loep-knop { min-height: 40px; padding: 0 12px; font-size: .9375rem; border-width: 1px; border-radius: 8px; }
html body .dpw-gv-item .dpw-gv-koop { background: var(--dpwl-ink) !important; color: #fff !important; border-color: var(--dpwl-ink) !important; }
html body .dpw-gv-item .dpw-gv-koop::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E"); }
@media (max-width: 549px) {
  html body .dpw-lv-koop { margin: 12px 16px 0; }
  html body .dpw-lv-info { padding: 10px 16px 18px; }
  html body .dpw-lv-link { padding: 0 16px 18px; }
  html body .dpw-gv-knoppen { flex-wrap: nowrap; }
  html body .dpw-gv-item .dpw-gv-knoppen .dpw-loep-knop:not(.dpw-gv-koop) { font-size: 0; width: 42px; padding: 0; flex: none; }
  html body .dpw-gv-item .dpw-gv-knoppen .dpw-gv-koop { flex: 1 1 auto; padding: 0 8px; font-size: .875rem; }
}
html body .dpw-lv .dpw-lv-mand:focus-visible { outline: 3px solid var(--dpwl-goud); outline-offset: 2px; }
html body .dpw-gv-item { height: 100%; }
html body .dpw-gv-item .dpw-gv-knoppen { margin-top: auto; padding-top: 6px; }
@media (max-width: 549px) {
  html body .dpw-lv-formaat select { padding: 0 26px 0 10px; font-size: .875rem; }
  html body .dpw-lv .dpw-lv-mand { flex: 1 1 100%; justify-content: center; }
}
html body .dpw-lv-zondermaat .dpw-lv-formaat, html body .dpw-lv-zondermaat .dpw-lv-groep [data-w] { display: none !important; }
html body .dpw-lv-zondermaat .dpw-lv-groep:has([data-w]) { display: none !important; }