/* Muize-Pluis: megamenu, productkaarten, winkel met filters, afrekenen */

/* ============ Megamenu ============ */
.mp-nav a, .mp-nav a:hover { text-decoration: none !important; }
.mp-mega { max-width: var(--wp--style--global--wide-size, 1240px); margin: 0 auto; }
.mp-nav { position: relative; }
.mp-mega__open, .mp-mega__kop { display: none; }
.mp-mega__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .2rem; }
.mp-mega__top { display: flex; align-items: center; }
.mp-mega__link { display: block; padding: .8rem .75rem; color: var(--wp--preset--color--white); font-weight: 600; font-size: .95rem; border-radius: 8px; transition: background .2s; }
.mp-mega__top:hover > .mp-mega__link, .mp-mega__top.is-open > .mp-mega__link, .mp-mega__link:focus-visible { background: rgba(255,255,255,.14); color: var(--wp--preset--color--white); }
.mp-mega__klap { background: none; border: 0; color: inherit; width: 1.2rem; margin-left: -.55rem; padding: 0; cursor: pointer; }
.mp-mega__klap::before { content: ""; display: inline-block; width: .42em; height: .42em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.mp-mega__paneel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
  box-shadow: 0 18px 40px rgba(74,56,44,.16); border-top: 3px solid var(--wp--preset--color--accent); padding: 1.6rem max(1.25rem, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2));
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.mp-mega__top.heeft-paneel:hover > .mp-mega__paneel, .mp-mega__top.heeft-paneel:focus-within > .mp-mega__paneel, .mp-mega__top.is-open > .mp-mega__paneel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mp-mega__kolommen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.4rem 2rem; }
.mp-mega__kolkop { display: block; font-family: var(--wp--preset--font-family--cormorant); font-size: 1.25rem; font-weight: 600; color: var(--wp--preset--color--contrast); margin-bottom: .35rem; }
.mp-mega__kol ul { list-style: none; margin: 0; padding: 0; }
.mp-mega__kol li a { display: block; padding: .22rem 0; color: var(--wp--preset--color--contrast-2); font-size: .95rem; }
.mp-mega__kol li a:hover, .mp-mega__kolkop:hover { color: var(--wp--preset--color--accent-2); }
.mp-mega__alles { display: inline-block; margin-top: 1.2rem; font-weight: 700; font-size: .9rem; color: var(--wp--preset--color--primary-dark); }
html.mp-geen-scroll { overflow: hidden; }

@media (max-width: 960px) {
  .mp-mega__open { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .75rem 1rem; background: none; border: 0; color: var(--wp--preset--color--white); font: 700 1rem var(--wp--preset--font-family--quicksand); letter-spacing: .03em; cursor: pointer; }
  .mp-mega__burger, .mp-mega__burger::before, .mp-mega__burger::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
  .mp-mega__burger::before, .mp-mega__burger::after { content: ""; position: absolute; left: 0; }
  .mp-mega__burger::before { top: -6px; }
  .mp-mega__burger::after { top: 6px; }
  .mp-mega__laag { position: fixed; inset: 0; z-index: 9999; background: rgba(74,56,44,.45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  .mp-mega.is-open .mp-mega__laag { opacity: 1; visibility: visible; transition-delay: 0s; }
  .mp-mega__lijst { position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); background: var(--wp--preset--color--base); display: block; overflow-y: auto; padding: 3.6rem 0 2rem; transform: translateX(-100%); transition: transform .25s ease; }
  .mp-mega.is-open .mp-mega__lijst { transform: none; }
  .mp-mega__kop { display: flex; justify-content: space-between; align-items: center; position: absolute; z-index: 2; top: 0; left: 0; width: min(88vw, 380px); box-sizing: border-box; padding: .8rem 1.2rem; background: var(--wp--preset--color--primary); color: #fff; transform: translateX(-100%); transition: transform .25s ease; }
  .mp-mega.is-open .mp-mega__kop { transform: none; }
  .mp-mega__sluit { background: none; border: 0; color: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
  .mp-mega__top { flex-wrap: wrap; border-bottom: 1px solid var(--wp--preset--color--base-3); }
  .mp-mega__link, .mp-mega__top:hover > .mp-mega__link, .mp-mega__top.is-open > .mp-mega__link { flex: 1; color: var(--wp--preset--color--contrast); padding: .9rem 1.2rem; border-radius: 0; font-size: 1.02rem; background: none; }
  .mp-mega__klap { width: 3.2rem; align-self: stretch; margin: 0; color: var(--wp--preset--color--contrast); border-left: 1px solid var(--wp--preset--color--base-3); }
  .mp-mega__top.is-open .mp-mega__klap::before { transform: rotate(225deg) translateY(-2px); }
  .mp-mega__paneel { position: static; flex-basis: 100%; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 1.2rem 1rem; background: var(--wp--preset--color--base-2); }
  .mp-mega__top.heeft-paneel:hover > .mp-mega__paneel, .mp-mega__top.heeft-paneel:focus-within > .mp-mega__paneel { display: none; }
  .mp-mega__top.is-open > .mp-mega__paneel { display: block; }
  .mp-mega__kolommen { grid-template-columns: 1fr; gap: .6rem; padding-top: .8rem; }
  .mp-mega__kolkop { font-size: 1.1rem; margin: 0; }
}

/* ============ Productkaarten ============ */
.mp-kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2rem 1.4rem; }
.mp-kaarten--rij { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .mp-kaarten--rij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mp-kaarten, .mp-kaarten--rij { grid-template-columns: repeat(2, 1fr); gap: 1.4rem .8rem; } }
.mp-kaart { display: flex; flex-direction: column; }
.mp-kaart__foto { position: relative; display: block; border-radius: var(--wp--custom--radius--medium); overflow: hidden; background: var(--wp--preset--color--white); aspect-ratio: 1; }
.mp-kaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mp-kaart:hover .mp-kaart__foto img { transform: scale(1.04); }
.mp-kaart__sale { position: absolute; top: .7rem; left: .7rem; background: var(--wp--preset--color--accent-2); color: #fff; font-size: .75rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; }
.mp-kaart__titel { font-family: var(--wp--preset--font-family--quicksand); font-size: .95rem; font-weight: 600; line-height: 1.35; text-align: center; margin: .8rem .3rem .5rem; flex: 1; }
.mp-kaart__titel a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mp-kaart__titel a:hover { color: var(--wp--preset--color--accent-2); }
.mp-kaart__onder { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .2rem; }
.mp-kaart__prijs { font-weight: 700; color: var(--wp--preset--color--primary-dark); font-size: 1rem; }
.mp-kaart__prijs del { color: var(--wp--preset--color--contrast-2); font-weight: 400; font-size: .85em; margin-right: .25em; }
.mp-kaart__prijs ins { text-decoration: none; }
.mp-kaart__prijs .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mp-kaart__uit { font-size: .8rem; color: var(--wp--preset--color--contrast-2); }

/* +/- knop */
.mp-aantal { display: inline-flex; align-items: center; height: 40px; border-radius: 999px; background: var(--wp--preset--color--primary); color: #fff; flex: 0 0 auto; transition: background .2s; }
.mp-aantal button, .mp-aantal .mp-aantal__plus { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; padding: 0; background: none; color: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; border-radius: 999px; }
.mp-aantal button:hover { background: rgba(255,255,255,.16); }
.mp-aantal__min, .mp-aantal__n { display: none !important; }
.mp-aantal.is-gevuld .mp-aantal__min { display: inline-flex !important; }
.mp-aantal.is-gevuld .mp-aantal__n { display: inline-block !important; min-width: 1.2em; text-align: center; font-weight: 700; font-size: .95rem; }
.mp-aantal.is-gevuld { background: var(--wp--preset--color--primary-dark); }
.mp-aantal.is-bezig { opacity: .6; pointer-events: none; }
.mp-aantal.is-gepuld { animation: mpPuls .4s ease; }
@keyframes mpPuls { 50% { transform: scale(1.12); } }
.mp-aantal--link, .mp-aantal--link:hover { color: #fff; text-decoration: none; }
.mp-aantal--link:hover { background: var(--wp--preset--color--primary-dark); }

/* ============ Winkel met filters ============ */
.mp-winkel { display: grid; grid-template-columns: 250px 1fr; gap: 2.4rem; align-items: start; margin-top: 1.2rem; }
.mp-winkel__filterknop { display: none; }
.mp-filter { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; padding-right: .3rem; }
.mp-filter__kop, .mp-filter__toon { display: none; }
.mp-filter__groep { border-bottom: 1px solid var(--wp--preset--color--base-3); padding: .8rem 0; }
.mp-filter__groep summary { font-family: var(--wp--preset--font-family--cormorant); font-size: 1.25rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mp-filter__groep summary::-webkit-details-marker { display: none; }
.mp-filter__groep summary::after { content: "\2212"; color: var(--wp--preset--color--contrast-2); }
.mp-filter__groep:not([open]) summary::after { content: "+"; }
.mp-filter__lijst { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.mp-filter__lijst label { display: flex; align-items: center; gap: .55rem; padding: .25rem 0; cursor: pointer; font-size: .95rem; }
.mp-filter__lijst label span { flex: 1; }
.mp-filter__lijst small { color: var(--wp--preset--color--contrast-2); font-size: .78rem; background: var(--wp--preset--color--base-2); border-radius: 999px; padding: 0 .5em; }
.mp-filter input[type=checkbox] { accent-color: var(--wp--preset--color--primary); width: 1.05rem; height: 1.05rem; }
.mp-prijs { padding: .9rem 0 .2rem; }
.mp-prijs__schuif { position: relative; height: 22px; }
.mp-prijs__schuif::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: var(--wp--preset--color--base-3); }
.mp-prijs__schuif input { position: absolute; left: 0; width: 100%; top: 0; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 22px; }
.mp-prijs__schuif input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--wp--preset--color--primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.mp-prijs__schuif input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--wp--preset--color--primary); border: 3px solid #fff; cursor: pointer; }
.mp-prijs__waarden { display: flex; justify-content: space-between; font-size: .9rem; margin-top: .4rem; }
.mp-filter__wis { margin-top: 1rem; background: none; border: 0; padding: 0; color: var(--wp--preset--color--accent-2); font: 600 .9rem var(--wp--preset--font-family--quicksand); cursor: pointer; text-decoration: underline; }
.mp-winkel__balk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; font-size: .95rem; }
.mp-winkel__sort select { margin-left: .4rem; padding: .45rem 1rem; border: 1px solid var(--wp--preset--color--base-3); border-radius: 999px; background: var(--wp--preset--color--white); font: inherit; color: inherit; }
.mp-winkel.is-laden .mp-kaarten { opacity: .45; transition: opacity .15s; }
.mp-winkel__meer { text-align: center; margin-top: 2rem; }
.mp-leeg { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--wp--preset--color--contrast-2); }

@media (max-width: 960px) {
  .mp-winkel { grid-template-columns: 1fr; gap: 1rem; }
  .mp-winkel__filterknop { display: inline-flex; justify-self: start; align-items: center; gap: .4rem; padding: .6rem 1.2rem; border-radius: 999px; border: 2px solid var(--wp--preset--color--primary); background: none; color: var(--wp--preset--color--primary-dark); font: 700 .95rem var(--wp--preset--font-family--quicksand); cursor: pointer; }
  .mp-filter { position: fixed; z-index: 9999; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); max-height: none; background: var(--wp--preset--color--base); padding: 0 1.2rem 1.2rem; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .mp-winkel.filters-open .mp-filter { transform: none; }
  .mp-filter__kop { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--wp--preset--color--base); padding: 1rem 0; z-index: 2; font-size: 1.2rem; }
  .mp-filter__sluit { background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: inherit; }
  .mp-filter__toon { display: block; width: 100%; margin-top: 1rem; position: sticky; bottom: 0; }
}

/* ============ Afrekenen ============ */
.mp-afreken-kop .mp-terug a { font-weight: 700; text-decoration: none; }
.mp-afreken-kop .mp-terug a:hover { text-decoration: underline; }
.mp-afreken-kop p { margin: 0; }
.mp-stappen a { color: inherit; }
@media (max-width: 600px) { .mp-afreken-kop .mp-veilig { display: none; } }
@media (max-width: 782px) { .mp-afreken-kop .mp-stappen-tekst { display: none; } }