/* Pagina /displays: displaymodules voor de speciaalzaak (31-10-2026). Alleen geladen door pages/displays.blade.php, na brand.css en pages.css.
   Klassen: .mps-dp-* (module-blokken, feitenlijst, inhoudstabel, stappen, voorwaarden). */
.mps-dp-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 3rem}
.mps-dp-jump a{margin:0;display:inline-flex;align-items:center;padding:.55rem .95rem;border:1px solid hsl(var(--border));background:hsl(var(--background));font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--foreground));text-decoration:none}
.mps-dp-jump a:hover{border-color:hsl(var(--foreground))}
.mps-dp-jump a:focus-visible{outline:2px solid var(--mps-pen);outline-offset:2px}

.mps-dp-mod{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:4rem;align-items:start;padding:3.5rem 0;border-top:1px solid hsl(var(--border));scroll-margin-top:6rem}
.mps-dp-mod:first-of-type{border-top:0;padding-top:0}
.mps-dp-mod.is-flip .mps-dp-media{order:2}
.mps-dp-media{position:relative;display:grid;gap:1rem;min-width:0}
.mps-dp-photo{margin:0;background:#fff;border:1px solid hsl(var(--border));padding:.5rem;box-shadow:0 26px 44px -30px rgba(20,30,45,.5)}
.mps-dp-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.mps-dp-photo:first-child{transform:rotate(-.8deg)}
.mps-dp-photo.is-small{width:46%;justify-self:end;margin-top:-4.5rem;transform:rotate(1.4deg);position:relative;z-index:1}
.mps-dp-photo.is-small img{aspect-ratio:1/1}
.mps-dp-mod.is-flip .mps-dp-photo.is-small{justify-self:start;transform:rotate(-1.4deg)}

.mps-dp-body{display:flex;flex-direction:column;gap:1rem;min-width:0}
.mps-dp-body h3,.mps-dp-body p{margin:0}
.mps-dp-tag{font-size:1.45rem;line-height:1.15;color:var(--mps-pen)}
.mps-dp-idea{font-size:1.02rem;line-height:1.7;color:hsl(var(--muted-foreground));max-width:38rem}
.mps-dp-facts{list-style:none;margin:.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:hsl(var(--border));border:1px solid hsl(var(--border))}
.mps-dp-facts li{display:flex;flex-direction:column;gap:.25rem;background:hsl(var(--background));padding:.9rem 1rem;min-width:0}
.mps-dp-facts li>span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:hsl(var(--muted-foreground))}
.mps-dp-facts li:first-child>span{font-family:var(--font-heading),sans-serif;font-size:1.15rem;font-weight:500;text-transform:none;letter-spacing:-.01em;color:hsl(var(--foreground))}
.mps-dp-facts strong{font-family:var(--font-heading),sans-serif;font-size:1.15rem;font-weight:500;font-variant-numeric:tabular-nums;color:hsl(var(--foreground))}
.mps-dp-facts small{font-size:.78rem;font-weight:400;color:hsl(var(--muted-foreground))}
.mps-dp-season{font-size:.92rem;line-height:1.55}
.mps-dp-dims{font-size:.8rem;line-height:1.5;color:hsl(var(--muted-foreground))}
.mps-dp-login{font-size:.88rem;padding:.75rem 1rem;border:1px dashed hsl(var(--border));color:hsl(var(--muted-foreground))}
.mps-dp-login a{color:hsl(var(--foreground));font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:.25rem}

.mps-dp-list{border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border))}
.mps-dp-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.2em}
.mps-dp-list summary::-webkit-details-marker{display:none}
.mps-dp-list summary::after{content:"+";font-family:var(--mps-hand);font-size:2rem;line-height:.6;color:var(--mps-pen);transition:transform .2s}
.mps-dp-list[open] summary::after{transform:rotate(45deg)}
.mps-dp-list summary:focus-visible{outline:2px solid var(--mps-pen);outline-offset:3px}
.mps-dp-table-wrap{overflow-x:auto;padding-bottom:1rem}
.mps-dp-table{width:100%;border-collapse:collapse;font-size:.86rem}
.mps-dp-table th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:hsl(var(--muted-foreground));text-align:left;padding:.5rem .5rem .5rem 0;border-bottom:1px solid hsl(var(--border));white-space:nowrap}
.mps-dp-table td{padding:.55rem .5rem .55rem 0;border-bottom:1px solid hsl(var(--border));vertical-align:middle}
.mps-dp-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mps-dp-art{display:flex;align-items:center;gap:.7rem;min-width:13rem}
.mps-dp-art img,.mps-dp-noimg{flex:none;width:44px;height:44px;object-fit:cover;background:hsl(var(--muted));border:1px solid hsl(var(--border))}
.mps-dp-art a{color:hsl(var(--foreground));text-decoration:none;font-weight:500}
.mps-dp-art a:hover{text-decoration:underline;text-underline-offset:3px}
.mps-dp-art small{display:block;font-size:.78rem;color:hsl(var(--muted-foreground))}

.mps-dp-steps{list-style:none;margin:0;padding:0}
.mps-dp-stepnr{font-size:2.4rem;line-height:1;color:var(--mps-pen)}
.mps-dp-terms{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid hsl(var(--background)/.2)}
.mps-dp-terms li{padding:1.1rem 0 1.1rem 2rem;border-bottom:1px solid hsl(var(--background)/.2);position:relative;line-height:1.6;color:hsl(var(--background)/.85)}
.mps-dp-terms li::before{content:"✓";position:absolute;left:0;top:1.05rem;font-weight:700;color:hsl(var(--background))}

@media (max-width:1023px){
  .mps-dp-mod{grid-template-columns:1fr;gap:2rem;padding:2.5rem 0}
  .mps-dp-mod.is-flip .mps-dp-media{order:0}
  .mps-dp-photo:first-child,.mps-dp-photo.is-small{transform:none}
  .mps-dp-photo.is-small{width:40%;margin-top:-3.5rem}
}
@media (max-width:480px){
  .mps-dp-facts{grid-template-columns:1fr}
  .mps-dp-photo.is-small{display:none}
  .mps-dp-art{min-width:11rem}
}
@media (prefers-reduced-motion:reduce){
  .mps-dp-list summary::after{transition:none}
}

/* knoppen op /displays + bestelpagina /displays/{module}/bestellen (31-10-2026) */
.mps-dp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:.4rem}
.mps-dp-actions .mps-pg-link{margin-top:0;padding-top:0}
.mps-do-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:hsl(var(--foreground));color:hsl(var(--background));padding:1rem 1.6rem;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;border:0;cursor:pointer;transition:background .15s}
.mps-do-btn:hover{background:hsl(var(--foreground)/.88)}
.mps-do-btn:focus-visible{outline:2px solid var(--mps-pen);outline-offset:3px}
.mps-do-btn[disabled]{opacity:.4;cursor:not-allowed}
.mps-do-back{display:inline-block;margin-bottom:1.8rem;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:hsl(var(--muted-foreground));text-decoration:none}
.mps-do-back:hover{color:hsl(var(--foreground))}
.mps-do-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:3rem;align-items:center;margin-bottom:2.5rem}
.mps-do-head>div{display:flex;flex-direction:column;gap:1.2rem}
.mps-do-head h1,.mps-do-head p{margin:0}
.mps-do-photo{transform:rotate(1.2deg)}
.mps-do-photo img{aspect-ratio:4/3}
.mps-do-alert{margin:0 0 1.8rem;padding:.9rem 1.1rem;border:1px solid #f1b3ad;background:#fdf1ef;color:#8a2a20;font-size:.92rem;line-height:1.5}
.mps-do-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:2.5rem;align-items:start}
.mps-do-main{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.mps-do-card{background:hsl(var(--background));border:1px solid hsl(var(--border));padding:1.8rem;display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.mps-do-h2{display:flex;align-items:center;gap:.7rem;margin:0;font-family:var(--font-heading),sans-serif;font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
.mps-do-step{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border:1.5px solid var(--mps-pen);border-radius:50%;color:var(--mps-pen);font-size:1.35rem;line-height:1}
.mps-do-display{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem;border:1px dashed hsl(var(--border));background:hsl(var(--muted)/.35)}
.mps-do-display .mps-sketch{width:3.4rem;height:2.9rem}
.mps-do-display p{margin:0}
.mps-do-display-name{font-weight:600}
.mps-do-display-name span{margin-left:.4rem;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--mps-pen)}
.mps-do-display-price{text-align:right;font-family:var(--font-heading),sans-serif;font-size:1.15rem;font-variant-numeric:tabular-nums}
.mps-do-display-price small{display:block;font-family:inherit;font-size:.75rem;color:hsl(var(--muted-foreground))}
.mps-do-sub{margin:0;font-size:.82rem;line-height:1.55;color:hsl(var(--muted-foreground))}
.mps-do-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.4rem}
.mps-do-fields .is-wide{grid-column:1/-1}
.mps-do-label{display:block;margin-bottom:.35rem;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em}
.mps-do-input{width:100%;border:0;border-bottom:1px solid hsl(var(--foreground)/.22);background:transparent;padding:.6rem 0;font-size:.92rem;color:hsl(var(--foreground))}
.mps-do-input:focus{outline:none;border-bottom-color:hsl(var(--foreground))}
textarea.mps-do-input{resize:vertical}
.mps-do-terms{list-style:none;margin:0;padding:0;border-top:1px solid hsl(var(--border))}
.mps-do-terms li{position:relative;padding:.75rem 0 .75rem 1.7rem;border-bottom:1px solid hsl(var(--border));font-size:.9rem;line-height:1.55}
.mps-do-terms li::before{content:"✓";position:absolute;left:0;top:.72rem;color:var(--mps-pen);font-weight:700}
.mps-do-check{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.5;cursor:pointer}
.mps-do-check input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex:none;accent-color:hsl(var(--foreground))}
.mps-do-check a{color:hsl(var(--foreground));text-decoration:underline;text-underline-offset:3px}
.mps-do-side{position:sticky;top:6.5rem}
.mps-do-summary{background:hsl(var(--foreground));color:hsl(var(--background));padding:1.8rem;display:flex;flex-direction:column;gap:1rem}
.mps-do-summary .mps-kicker{color:hsl(var(--background)/.6)}
.mps-do-summary .mps-do-sub{color:hsl(var(--background)/.7)}
.mps-do-sum-title{margin:0;font-family:var(--font-heading),sans-serif;font-size:1.6rem;letter-spacing:-.01em}
.mps-do-summary dl{margin:0;display:grid;gap:0;border-top:1px solid hsl(var(--background)/.2)}
.mps-do-summary dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid hsl(var(--background)/.2);font-size:.88rem}
.mps-do-summary dt{color:hsl(var(--background)/.8)}
.mps-do-summary dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.mps-do-summary .is-total{font-family:var(--font-heading),sans-serif;font-size:1.25rem;border-bottom:0}
.mps-do-summary .is-total dt{color:hsl(var(--background))}
.mps-do-summary .mps-do-btn{background:hsl(var(--background));color:hsl(var(--foreground));width:100%}
.mps-do-summary .mps-do-btn:hover{background:hsl(var(--background)/.9)}
.mps-do-note{margin:0;font-size:1.3rem;line-height:1.15;color:hsl(var(--background))}
@media (max-width:1023px){
  .mps-do-head,.mps-do-grid{grid-template-columns:1fr}
  .mps-do-photo{display:none}
  .mps-do-side{position:static}
}
@media (max-width:560px){
  .mps-do-fields{grid-template-columns:1fr}
  .mps-do-card,.mps-do-summary{padding:1.3rem}
  .mps-do-display{grid-template-columns:minmax(0,1fr) auto}
  .mps-do-display .mps-sketch{display:none}
}

/* Displays visueel (31-10-2026): MPS-renders van de displays per module (public/mps/displays/d-*.webp, 4:5) + tegels als sprongmenu */
.mps-dp-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin:0 0 3.5rem}
.mps-dp-tile{display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:hsl(var(--foreground))}
.mps-dp-tile img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid hsl(var(--border));background:#dcdcdc;transition:transform .25s ease,box-shadow .25s ease}
.mps-dp-tile:hover img{transform:translateY(-4px);box-shadow:0 22px 36px -26px rgba(20,30,45,.55)}
.mps-dp-tile span{font-family:var(--font-heading),sans-serif;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.mps-dp-tile small{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:hsl(var(--muted-foreground))}
.mps-dp-tile:focus-visible{outline:2px solid var(--mps-pen);outline-offset:4px}
.mps-dp-photo.is-render img{aspect-ratio:4/5;background:#dcdcdc}
.mps-dp-photo.is-render+.mps-dp-photo.is-small{width:42%;margin-top:-7rem}
.mps-do-photo.is-render img{aspect-ratio:4/5}

/* Kopbord 60×80 (partials/displays/kopbord) — tekst schaalt mee met de breedte van het bord */
.mps-kb{--kb-bg:#5DA4D9;--kb-ink:#fff;container-type:inline-size;position:relative;aspect-ratio:3/4;width:100%;background:var(--kb-bg);color:var(--kb-ink);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.mps-kb-in{height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4cqi;padding:9cqi 8cqi}
.mps-kb p{margin:0;max-width:100%;overflow-wrap:break-word}
.mps-kb-logo{max-width:70%;height:20cqi;display:flex;align-items:center}
.mps-kb-logo[hidden],.mps-kb p[hidden]{display:none}
.mps-kb-logo img{max-width:100%;max-height:100%;object-fit:contain;object-position:left center}
.mps-kb-store{font-family:var(--font-heading),sans-serif;font-weight:600;font-size:8.5cqi;line-height:1.05;letter-spacing:-.01em}
.mps-kb-head{margin-top:auto!important;font-family:var(--font-heading),sans-serif;font-weight:800;font-size:10.5cqi;line-height:1;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.mps-kb-tag{font-size:5.6cqi;line-height:1.3;opacity:.92}
.mps-kb-rule{display:block;width:22cqi;height:1.4cqi;background:currentColor;opacity:.85}

/* Configurator op /displays */
.mps-kbc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;align-items:start}
.mps-kbc-views{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.5rem;align-items:end}
.mps-kbc-stage{position:relative;margin:0;border:1px solid hsl(var(--border));background:#dcdcdc}
.mps-kbc-stage>img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.mps-kbc-on{position:absolute;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.mps-kbc-on .mps-kb{height:100%;aspect-ratio:auto}
.mps-kbc-flat{display:flex;flex-direction:column;gap:.6rem}
.mps-kbc-flat .mps-kb{box-shadow:0 26px 44px -30px rgba(20,30,45,.55)}
.mps-kbc-cap{margin:0;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:hsl(var(--muted-foreground))}
.mps-kbc-form{display:flex;flex-direction:column;gap:1.1rem;background:hsl(var(--background));border:1px solid hsl(var(--border));padding:1.8rem}
.mps-kbc-form .mps-do-btn{align-self:flex-start}
.mps-kb-swatches{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;border:0;margin:0;padding:0}
.mps-kb-swatches legend{padding:0;margin-bottom:.45rem}
.mps-kb-sw{position:relative;display:inline-flex;cursor:pointer}
.mps-kb-sw input{position:absolute;opacity:0;width:1px;height:1px}
.mps-kb-sw span{display:block;width:2rem;height:2rem;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.mps-kb-sw input:checked+span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px hsl(var(--background)),0 0 0 4px hsl(var(--foreground))}
.mps-kb-sw input:focus-visible+span{outline:2px solid var(--mps-pen);outline-offset:4px}
.mps-kb-sw.is-custom span{background:conic-gradient(#e44,#ec4,#4c6,#4ae,#a4e,#e44)}
.mps-kb-pick{width:2.4rem;height:2rem;padding:0;border:1px solid hsl(var(--border));background:none;cursor:pointer}
.mps-kb-file{font-size:.85rem;max-width:100%}
.mps-kbc-steps{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:hsl(var(--border));border:1px solid hsl(var(--border))}
.mps-kbc-steps li{background:hsl(var(--background));padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.45rem}
.mps-kbc-steps strong{font-family:var(--font-heading),sans-serif;font-size:1.15rem;font-weight:500;letter-spacing:-.01em}
.mps-kbc-steps p{margin:0;font-size:.9rem;line-height:1.55;color:hsl(var(--muted-foreground))}

/* Bestelpagina: stap Design */
.mps-do-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.mps-do-mode{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid hsl(var(--border));cursor:pointer}
.mps-do-mode:has(input:checked){border-color:hsl(var(--foreground));box-shadow:inset 0 0 0 1px hsl(var(--foreground))}
.mps-do-mode input{margin-top:.25rem;accent-color:hsl(var(--foreground))}
.mps-do-mode strong{display:block;font-weight:600}
.mps-do-mode small{display:block;margin-top:.2rem;font-size:.82rem;line-height:1.45;color:hsl(var(--muted-foreground))}
.mps-do-design{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:1.6rem;align-items:start}
.mps-do-design[hidden]{display:none}
.mps-do-design .mps-kb{position:sticky;top:7rem}

@media (max-width:1023px){
  .mps-dp-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mps-kbc{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mps-dp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mps-kbc-views{grid-template-columns:1fr 1fr;gap:.8rem}
  .mps-kbc-form{padding:1.3rem}
  .mps-kbc-steps{grid-template-columns:1fr}
  .mps-do-modes,.mps-do-design{grid-template-columns:1fr}
  .mps-do-design .mps-kb{position:static;max-width:15rem}
}
@media (prefers-reduced-motion:reduce){
  .mps-dp-tile img{transition:none}
}
.mps-kb-sw .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}