/* /collections in de MPS-deckstijl (06-10-2026). Alleen deze pagina; tokens uit brand.css (--mps-pen, --mps-deal, --mps-sketch). */
.mps-cx{background:hsl(var(--background))}

/* kop: titel + zoeken links, productzoeker rechts */
.mps-cx-hero{border-bottom:1px solid hsl(var(--border));padding-block:clamp(2rem,4vw,3.5rem)}
.mps-cx-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.mps-cx-title{font-size:clamp(2.2rem,1.3rem + 2.8vw,3.7rem);line-height:1.02;letter-spacing:-.02em;margin:.5rem 0 1rem;text-wrap:balance}
.mps-cx-lead{color:hsl(var(--muted-foreground));max-width:34rem;line-height:1.65;margin:0 0 1.5rem}
.mps-cx-search{position:relative;max-width:34rem}
.mps-cx-search input{width:100%;border:1.5px solid hsl(var(--foreground) / .8);background:#fff;border-radius:999px;padding:.95rem 3.6rem .95rem 1.4rem;font-size:1rem;color:hsl(var(--foreground))}
.mps-cx-search input:focus{outline:none;border-color:var(--mps-pen);box-shadow:0 0 0 4px rgba(58,127,192,.16)}
.mps-cx-search button{position:absolute;right:.38rem;top:50%;transform:translateY(-50%);width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--mps-pen);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.mps-cx-search button:hover{background:#2f6aa3}
.mps-cx-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.mps-cx-jump a{margin:0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .85rem;border:1px solid hsl(var(--border));border-radius:999px;background:#fff;color:hsl(var(--foreground));text-decoration:none;transition:border-color .2s,color .2s}
.mps-cx-jump a:hover,.mps-cx-jump a:focus-visible{border-color:var(--mps-pen);color:var(--mps-pen);outline:none}

/* productzoeker */
.mps-cx-finder{background:#fff;border:1px solid hsl(var(--border));padding:clamp(1.25rem,2vw,1.75rem);box-shadow:0 26px 54px -40px rgba(20,30,45,.5)}
.mps-cx-finder h2{font-size:clamp(1.35rem,1.1rem + .6vw,1.7rem);line-height:1.15;margin:.4rem 0 .1rem;letter-spacing:-.01em}
.mps-cx-finder .mps-hand{margin:0 0 1.1rem}
.pf-q{display:flex;align-items:center;gap:.55rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--muted-foreground));margin:0 0 .75rem}
.pf-n{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;border:1.5px solid var(--mps-pen);color:var(--mps-pen);font:600 .72rem/1 Inter,system-ui,sans-serif;letter-spacing:0}
.pf-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.pf-opts>button{display:flex;align-items:center;gap:.75rem;text-align:left;background:hsl(var(--background));border:1px solid hsl(var(--border));padding:.75rem .85rem;cursor:pointer;color:hsl(var(--foreground));font:inherit;transition:border-color .2s,background .2s,box-shadow .2s}
.pf-opts>button:hover,.pf-opts>button:focus-visible{border-color:var(--mps-pen);background:#fff;box-shadow:0 8px 20px -14px rgba(58,127,192,.6);outline:none}
.pf-ico{flex:none;width:3rem;height:2.6rem}
.pf-t{display:flex;flex-direction:column;gap:.15rem;font-size:.9rem;font-weight:600;line-height:1.2}
.pf-t small{font-size:.72rem;font-weight:400;color:hsl(var(--muted-foreground));line-height:1.35}
.pf-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.pf-chips a{padding:.6rem .95rem;border:1px solid hsl(var(--border));border-radius:999px;background:#fff;color:hsl(var(--foreground));font-size:.85rem;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.pf-chips a:hover,.pf-chips a:focus-visible{border-color:var(--mps-pen);color:var(--mps-pen);outline:none}
.pf-chips a.is-all{background:hsl(var(--foreground));border-color:hsl(var(--foreground));color:hsl(var(--background))}
.pf-chips a.is-all:hover,.pf-chips a.is-all:focus-visible{background:var(--mps-pen);border-color:var(--mps-pen);color:#fff}
.pf-back{background:none;border:0;padding:0;margin:0 0 .9rem;color:hsl(var(--muted-foreground));font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;cursor:pointer}
.pf-back:hover,.pf-back:focus-visible{color:var(--mps-pen);outline:none}
.pf-hidden{display:none!important}

/* secties */
.mps-cx-sec{padding-block:clamp(2.25rem,4vw,3.5rem)}
.mps-cx-sec+.mps-cx-sec{border-top:1px solid hsl(var(--border))}
.mps-cx-sec.is-deals{background:linear-gradient(180deg,#FFF9E0 0%,hsl(var(--background)) 78%)}
.mps-cx-sec-head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.mps-cx-sec-ico{flex:none;width:3.6rem;height:3.1rem}
.mps-cx-sec-t h2{font-size:clamp(1.55rem,1.15rem + 1.1vw,2.2rem);line-height:1.05;letter-spacing:-.015em;margin:0}
.mps-cx-sec-t .mps-hand{margin:.2rem 0 0}
.mps-cx-all{margin-left:auto;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:hsl(var(--foreground));text-decoration:none;border-bottom:1.5px solid var(--mps-pen);padding-bottom:.2rem;white-space:nowrap}
.mps-cx-all span{color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.mps-cx-all:hover,.mps-cx-all:focus-visible{color:var(--mps-pen);outline:none}

/* kaarten */
.mps-cx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.mps-cx-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mps-cx-card{display:flex;flex-direction:column;background:#fff;border:1px solid hsl(var(--border));color:hsl(var(--foreground));text-decoration:none;transition:border-color .2s,box-shadow .25s,transform .25s}
.mps-cx-card:hover{border-color:hsl(var(--foreground) / .45);box-shadow:0 20px 40px -30px rgba(20,30,45,.6);transform:translateY(-2px)}
.mps-cx-card:focus-visible{outline:2px solid var(--mps-pen);outline-offset:3px}
.mps-cx-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#F1EEE8}
.mps-cx-grid.cols-3 .mps-cx-img{aspect-ratio:16/10}
.mps-cx-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mps-cx-card:hover .mps-cx-img img{transform:scale(1.04)}
.mps-cx-meta{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem .95rem}
.mps-cx-name{display:block;font-family:var(--font-heading),sans-serif;font-size:1.08rem;line-height:1.2}
.mps-cx-count{display:block;margin-top:.2rem;font-size:.78rem;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.mps-cx-go{flex:none;margin-left:auto;width:2.15rem;height:2.15rem;border-radius:50%;border:1.5px solid hsl(var(--foreground) / .75);display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
.mps-cx-card:hover .mps-cx-go{background:var(--mps-pen);border-color:var(--mps-pen);color:#fff}

/* dealstickers (zelfde taal als de prijskaarten en het uitverkochtbord) */
.mps-cx-stk{position:absolute;left:.75rem;top:.85rem;z-index:2;padding:.3rem .78rem .35rem;color:#fff;font:italic 900 1.1rem/1 var(--mps-deal);letter-spacing:.01em;border:2.5px solid #111;border-radius:7px;transform:rotate(-5deg);box-shadow:3px 3px 0 #111;white-space:nowrap;pointer-events:none}
.mps-cx-stk.is-red{background:linear-gradient(180deg,#FF3030 0%,#E30613 55%,#C40010 100%);text-shadow:0 2px 0 rgba(90,0,6,.6)}
.mps-cx-stk.is-black{background:linear-gradient(180deg,#3b3b3b 0%,#1a1a1a 58%,#0f0f0f 100%);text-transform:uppercase;transform:rotate(4deg)}
.mps-cx-stk.is-pen{background:linear-gradient(180deg,#4F93D3 0%,#3A7FC0 60%,#2F6AA3 100%)}
.mps-cx-stk.is-navy{background:linear-gradient(180deg,#2B4C78 0%,#1F3A5F 60%,#172C49 100%);transform:rotate(3deg)}

@media (max-width:1023px){
  .mps-cx-hero-grid{grid-template-columns:1fr;align-items:start}
  .mps-cx-grid,.mps-cx-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mps-cx-grid,.mps-cx-grid.cols-3{gap:.6rem}
  .mps-cx-grid.cols-3 .mps-cx-img{aspect-ratio:4/3}
  .mps-cx-meta{padding:.65rem .7rem .75rem}
  .mps-cx-name{font-size:.95rem}
  .mps-cx-go{display:none}
  .mps-cx-stk{font-size:.88rem;left:.5rem;top:.6rem}
  .pf-opts{grid-template-columns:1fr}
  .mps-cx-all{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .mps-cx-card,.mps-cx-img img{transition:none}
  .mps-cx-card:hover{transform:none}
  .mps-cx-card:hover .mps-cx-img img{transform:none}
}