:root{
  /* maatvoering overgenomen van mediamarkt.nl: 77rem container, ~1140px inhoud */
  --ct:1232px; --gut:46px;
  /* kleuren van De SchoonmaakWinkel: diep hemelsblauw als merkband, hun icoonblauw als accent */
  --brand:#0e6e9c; --brand-2:#0a5679; --sky:#79cdf6; --ink:#12181c;
  --bg:#ffffff; --bg-2:#f7f9fb; --bg-3:#eef3f7;
  --fg:#1b2126; --fg-2:#4a4a4a; --fg-3:#767f85;
  --line:#e3e3e3; --line-2:#f0f0f0;
  --sale:#c81e1e; --stock:#1a7f43;
  --on-brand:#ffffff; --on-sky:#0a222f; --plate:#ffffff;
  --sans:"Noto Sans Display","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1417; --bg-2:#161c21; --bg-3:#1d252b;
    --fg:#e8eef2; --fg-2:#aab7bf; --fg-3:#8896a0;
    --line:#2a333a; --line-2:#212a30;
    --sale:#f2685c; --stock:#4cc482;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1417; --bg-2:#161c21; --bg-3:#1d252b;
  --fg:#e8eef2; --fg-2:#aab7bf; --fg-3:#8896a0;
  --line:#2a333a; --line-2:#212a30;
  --sale:#f2685c; --stock:#4cc482;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--sky); outline-offset:2px}
.ct{max-width:var(--ct); margin-inline:auto; padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0; font-weight:700; line-height:1.2}

/* ===== merkband ===== */
.top{background:var(--brand); color:var(--on-brand)}
.top-in{display:flex; align-items:center; gap:18px; padding-block:13px}
.mark{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.mark-plate{background:var(--ink); padding:6px 8px; border-radius:3px}
.mark-plate img{width:74px}
.mark b{font-size:20px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; line-height:1}
.mark b i{font-style:normal; color:var(--sky)}
.find{flex:1 1 auto; min-width:0; position:relative; display:flex; background:#fff; border-radius:999px; overflow:hidden}
.find input{flex:1; min-width:0; border:0; padding:11px 16px 11px 44px; font:inherit; font-size:15px; color:#1b2126; background:transparent}
.find input::placeholder{color:#767f85}
.find .mag{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#4a4a4a}
.find button{background:transparent; color:#1b2126; padding:0 18px; font-weight:600; font-size:14.5px}
.find button:hover{color:var(--brand)}
.shop{display:flex; flex-direction:column; line-height:1.25; flex:0 0 auto}
.shop b{font-size:14.5px}
.shop span{font-size:12.5px; opacity:.85}
.icons{display:flex; align-items:center; gap:4px; flex:0 0 auto}
.icons a{position:relative; padding:8px; border-radius:999px; display:block}
.icons a:hover{background:rgba(255,255,255,.16)}
.icons .cnt{position:absolute; top:2px; right:1px; background:var(--sky); color:var(--on-sky); font-size:10px; font-weight:700; min-width:15px; height:15px; border-radius:999px; display:grid; place-items:center; padding:0 3px}

/* ===== categorierij ===== */
.catbar{background:var(--brand); color:var(--on-brand); border-top:1px solid rgba(255,255,255,.16)}
.catbar-in{display:flex; align-items:center; gap:4px; padding-bottom:11px; overflow-x:auto; scrollbar-width:none}
.catbar-in::-webkit-scrollbar{display:none}
.allcat{display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.6); border-radius:999px; padding:6px 15px; font-size:14.5px; font-weight:600; white-space:nowrap; flex:0 0 auto}
.allcat:hover{background:#fff; color:var(--brand); border-color:#fff}
.catbar a{padding:6px 12px; font-size:14.5px; white-space:nowrap; border-radius:999px}
.catbar a:hover{background:rgba(255,255,255,.16)}

/* ===== zwarte usp-strip ===== */
.usp{background:var(--ink); color:#fff}
.usp-in{display:flex; justify-content:space-around; gap:18px; padding-block:9px; font-size:13.5px; flex-wrap:wrap}
.usp a{text-decoration:underline; text-underline-offset:3px}
.usp a:hover{color:var(--sky)}

/* ===== meldingsstrip ===== */
.note{background:#e4f2fa; color:#0a3c56; text-align:center}
.note-in{display:flex; align-items:center; justify-content:center; gap:10px; padding-block:10px; font-size:14px}
.note a{text-decoration:underline; text-underline-offset:3px; font-weight:600}
:root[data-theme="dark"] .note,
:root:not([data-theme="light"]) .note{background:#12303f; color:#cfe9f7}

/* ===== secties ===== */
.sec{padding-top:30px}
.sec-first{padding-top:22px}
.sec-h{display:flex; align-items:baseline; gap:14px; margin-bottom:14px}
.sec-h h2{font-size:22px}
.sec-h a{margin-left:auto; font-size:14px; color:var(--brand); font-weight:600; white-space:nowrap}
.sec-h a:hover{text-decoration:underline}
:root[data-theme="dark"] .sec-h a,
:root:not([data-theme="light"]) .sec-h a{color:var(--sky)}

/* ===== grote promokaart ===== */
.promo{display:grid; grid-template-columns:1fr 1.55fr; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--bg)}
.promo-t{padding:30px 28px; display:flex; flex-direction:column; justify-content:center; gap:12px}
.chip{align-self:flex-start; border:1px solid var(--line); border-radius:999px; padding:3px 11px; font-size:12.5px; color:var(--fg-2)}
.promo-t h3{font-size:30px; font-style:italic; letter-spacing:-.01em}
.promo-t p{margin:0; color:var(--fg-2); font-size:15px; max-width:40ch}
.ghost{align-self:flex-start; margin-top:8px; display:inline-flex; align-items:center; gap:9px; border:1px solid var(--fg); border-radius:4px; padding:9px 18px; font-size:14.5px; font-weight:600}
.ghost:hover{background:var(--fg); color:var(--bg)}
.promo-i{position:relative; min-height:270px; background:var(--bg-3)}
.promo-i img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.promo-i .stamp{position:absolute; right:22px; top:22px; background:var(--sale); color:#fff; font-weight:700; font-size:17px; padding:9px 15px; border-radius:999px; transform:rotate(-7deg)}

/* ===== ronde categorietegels ===== */
.circles{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px}
.circle{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:10px 4px; border-radius:6px}
.circle:hover{background:var(--bg-2)}
.circle .disc{width:74px; height:74px; border-radius:999px; background:var(--bg-3); display:grid; place-items:center}
.circle svg{width:38px; height:38px; color:var(--brand)}
:root[data-theme="dark"] .circle svg,
:root:not([data-theme="light"]) .circle svg{color:var(--sky)}
.circle span{font-size:12.5px; line-height:1.25; color:var(--fg); overflow-wrap:break-word; hyphens:auto}

/* ===== productkaarten (mediamarkt-model) ===== */
.rail{display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:14px}
.pc{border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:14px; display:flex; flex-direction:column; gap:8px; position:relative}
.pc:hover{box-shadow:0 2px 14px rgba(20,25,29,.12)}
.pc .badge{position:absolute; top:13px; left:13px; z-index:2; border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:2px 10px; font-size:11.5px; color:var(--fg-2)}
.pc .save{position:absolute; top:13px; right:13px; z-index:2; background:var(--sale); color:#fff; border-radius:3px; padding:2px 7px; font-size:12px; font-weight:700}
.pc .shot{aspect-ratio:1; background:var(--plate); display:grid; place-items:center; padding:14px; border-radius:4px}
.pc .shot img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply}
.pc h3{font-size:13.5px; font-weight:400; line-height:1.35; color:var(--fg); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.pc:hover h3{text-decoration:underline}
.pc .grow{flex:1}
.was{font-size:12.5px; color:var(--fg-3); min-height:18px}
.was s{text-decoration:line-through}
.now{font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.05}
.now.deal{color:var(--sale)}
.vatline{font-size:11.5px; color:var(--fg-3)}
.instock{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--stock)}
.instock i{width:7px; height:7px; border-radius:999px; background:currentColor}
.cart{margin-top:4px; width:100%; background:var(--brand); color:var(--on-brand); border-radius:4px; padding:10px; font-size:14.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px}
.cart:hover{background:var(--brand-2)}
.pickers{display:flex; gap:5px; flex-wrap:wrap}
.pickers button{border:1px solid var(--line); border-radius:999px; padding:3px 11px; font-size:12.5px}
.pickers button:hover{border-color:var(--brand)}
.pickers button[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.pick-l{font-size:11.5px; color:var(--fg-2); font-weight:600}

/* ===== twee banners ===== */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ban{border-radius:6px; padding:26px; display:flex; flex-direction:column; gap:9px; justify-content:center; min-height:170px}
.ban.a{background:var(--ink); color:#fff}
.ban.b{background:var(--sky); color:var(--on-sky)}
.ban h3{font-size:22px}
.ban p{margin:0; font-size:14.5px; opacity:.9; max-width:44ch}
.ban .go{align-self:flex-start; margin-top:6px; border:1px solid currentColor; border-radius:4px; padding:8px 16px; font-size:14px; font-weight:600}
.ban.a .go:hover{background:#fff; color:var(--ink)}
.ban.b .go:hover{background:var(--on-sky); color:var(--sky)}

/* ===== merken ===== */
.brands{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px}
.brand{border:1px solid var(--line); border-radius:6px; height:66px; display:grid; place-items:center; font-weight:700; font-size:14.5px; color:var(--fg-2); letter-spacing:.02em; overflow-wrap:anywhere; text-align:center; padding:4px}
.brand:hover{border-color:var(--brand); color:var(--brand)}

/* ===== servicekolommen ===== */
.serv-in{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; padding-block:30px}
.serv{border-top:1px solid var(--line)}
.sv{border:1px solid var(--line); border-radius:6px; padding:20px; display:flex; gap:13px; min-width:0}
.sv svg{width:26px; height:26px; color:var(--brand); flex:0 0 26px}
:root[data-theme="dark"] .sv svg,
:root:not([data-theme="light"]) .sv svg{color:var(--sky)}
.sv h3{font-size:15px; margin-bottom:3px; overflow-wrap:anywhere}
.sv p{margin:0; font-size:13.5px; color:var(--fg-2)}

/* ===== tekstblok ===== */
.copy{background:var(--bg-2); margin-top:34px; padding-block:32px}
.copy h2{font-size:20px; margin-bottom:10px}
.copy p{margin:0 0 10px; font-size:14.5px; color:var(--fg-2); max-width:78ch}

/* ===== voettekst ===== */
.foot{background:var(--ink); color:#b9c4cb; font-size:14px}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-block:34px}
.foot h4{color:#fff; font-size:14.5px; margin-bottom:11px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.foot a:hover{color:var(--sky)}
.foot img{width:132px; margin-bottom:11px}
.pay{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.pay span{border:1px solid #333d44; border-radius:3px; padding:3px 9px; font-size:11.5px}
.foot-b{border-top:1px solid #2a343b; padding-block:14px 22px; display:flex; gap:12px 24px; flex-wrap:wrap; font-size:12.5px}


/* ===== linkkolommen ===== */
.links{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 26px}
.links a{min-width:0; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; gap:10px}
.links a:hover{color:var(--brand)}
.links a span{color:var(--fg-3); font-size:12px}
:root[data-theme="dark"] .links a:hover,
:root:not([data-theme="light"]) .links a:hover{color:var(--sky)}

/* ===== responsief ===== */
@media (max-width:1180px){
  .circles{grid-template-columns:repeat(7,minmax(0,1fr))}
  .brands{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:1000px){
  :root{--gut:26px}
  .rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .serv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop{display:none}
  .circles{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:820px){
  .top-in{flex-wrap:wrap; gap:12px}
  .find{order:3; flex-basis:100%}
  .icons{margin-left:auto}
  .promo{grid-template-columns:1fr}
  .promo-i{min-height:200px; order:-1}
  .duo{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--gut:16px}
  body{font-size:15px}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .circles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .circle .disc{width:60px; height:60px}
  .circle svg{width:30px; height:30px}
  .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .serv{grid-template-columns:1fr}
  .links{grid-template-columns:1fr}
  .usp-in{justify-content:flex-start; gap:12px; overflow-x:auto; white-space:nowrap; flex-wrap:nowrap}
  .promo-t h3{font-size:24px}
  .now{font-size:23px}
  .sec-h h2{font-size:19px}
  .foot-in{grid-template-columns:1fr}
  .mark b{font-size:17px}
  .mark-plate img{width:58px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}