/* Landing page krasvrije kookplaat (classes prefixed lpg-) */

/* ---------- rhythm and type ---------- */
.lpg{background:var(--ground)}
.lpg-sec{padding-block:clamp(56px,7vw,104px)}
.lpg-head{max-width:640px;margin-bottom:clamp(24px,3vw,40px)}
.lpg-head--center{max-width:720px;margin-inline:auto;text-align:center}
.lpg .label{display:block;font-size:12px;letter-spacing:.16em;color:var(--accent)}
.lpg-h2{margin-top:12px;font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.lpg-h3{font-size:clamp(19px,1.6vw,22px);line-height:1.2;font-weight:600;letter-spacing:-.015em}
.lpg-tx{margin-top:16px;max-width:56ch;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--ink-2)}
.lpg-tx--ink{color:var(--ink);font-weight:500}
.lpg-head .lpg-tx{margin-top:14px}
.lpg-split-copy .lpg-head{margin-bottom:0}
.lpg-split-copy .lpg-tx--ink{margin-top:14px}
.lpg .chk{margin-top:22px}
.lpg .chk li{font-size:15.5px}

/* keyboard focus stays visible on the dark bands and on the video poster */
.lpg-night :focus-visible,.lpg-cta :focus-visible,.lpg-player .play:focus-visible{outline-color:#fff}

/* light code chip (the global one is the green applied-code chip) */
.lpg .code-chip{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:1px 8px;border:1px dashed var(--accent);border-radius:6px;background:#fff;color:var(--accent-2);font:600 12px/1.5 var(--font);letter-spacing:.1em;cursor:pointer;vertical-align:1px;transition:background-color .2s}
.lpg .code-chip:hover{background:var(--accent-soft)}

/* ---------- quotes and customer photos ---------- */
.lpg-quote{margin:28px 0 0;padding:0 0 0 18px;border-left:2px solid var(--accent)}
.lpg-quote blockquote{margin:0}
.lpg-quote p{font-size:clamp(16.5px,1.35vw,19px);line-height:1.5;letter-spacing:-.01em;color:var(--ink);font-weight:500;text-wrap:pretty}
.lpg-quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.lpg-quote figcaption b{font-weight:600;color:var(--ink)}
.lpg-quote--dark{border-left-color:#E58A63}
.lpg-quote--dark p{color:#fff}
.lpg-quote--dark figcaption{color:rgba(255,255,255,.62)}
.lpg-quote--dark figcaption b{color:#fff}
.lpg-quote--dark .stars-fill .stars{color:rgba(255,255,255,.25)}
.lpg-quote--dark .stars-fill .on .stars{color:#E58A63}

.lpg-photo{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-l);overflow:hidden;background:#e9e5de;cursor:zoom-in}
.lpg-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.lpg-photo:hover img{transform:scale(1.03)}
.lpg-photo--43{aspect-ratio:4/3}
.lpg-photo-cap{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 28px);padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.94);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.3;text-align:left;box-shadow:0 2px 10px rgba(20,18,17,.14)}
.lpg-photo-cap svg{width:14px;height:14px;flex:none;color:var(--accent)}

/* ---------- split sections: copy and quote beside the media, stacked in their own order on phones ---------- */
.lpg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5.5vw,88px);row-gap:0;align-items:center}
.lpg-split-copy{grid-area:copy;align-self:end}
.lpg-split-media{grid-area:media;align-self:center}
.lpg-split-quote{grid-area:quote;align-self:start}
.lpg-split-quote:empty{display:none}
.lpg-split--r{grid-template-areas:"copy media" "quote media"}
.lpg-split--l{grid-template-areas:"media copy" "media quote"}
/* media with the quote under it, copy beside both */
.lpg-split--lq{grid-template-areas:"media copy" "quote copy"}
.lpg-split--lq .lpg-split-copy{align-self:center}
.lpg-split--lq .lpg-split-media{align-self:end}
.lpg-split--lq .lpg-split-quote .lpg-quote{margin-top:24px}

/* ---------- 1. hero ---------- */
.lpg-hero{padding-block:44px;background:var(--ground)}
.lpg-hero-in{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:64px;align-items:center}
.lpg-hero .label{font-size:13px}
.lpg-h1{margin-top:14px;font-size:clamp(28px,7.6vw,52px);line-height:1.04;font-weight:600;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.lpg-hero-sub{margin-top:16px;max-width:46ch;font-size:18px;line-height:1.55;color:var(--ink-2)}
.lpg-rate{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:0;border:0;background:none;font-size:14px;color:var(--ink-2);text-align:left;cursor:pointer}
.lpg-rate b{font-weight:600;color:var(--ink)}
.lpg-rate:hover span{text-decoration:underline;text-underline-offset:3px}
.lpg-hero-prices{margin-top:20px;display:grid;gap:4px}
.lpg-hero-price{font-size:17px;color:var(--ink-2)}
.lpg-hero-price b{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.lpg-hero-sale{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;color:var(--ink-2)}
.lpg-hero-sale b{font-size:17px;font-weight:700;color:var(--accent-2)}
.lpg-hero-cta{margin-top:24px}
.lpg-hero-btn{min-height:56px;padding-inline:28px}
.lpg-hero-btn svg{width:18px;height:18px}
.lpg-facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink)}
.lpg-facts li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.lpg-facts svg{width:16px;height:16px;flex:none;color:var(--accent);stroke-width:2.2}
.lpg-hero-media{position:relative;height:512px}
.lpg-hero-photo{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-l);background:#1b1a19}
.lpg-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:60% 60%;animation:lpgZoom 14s ease-in-out infinite alternate}
@keyframes lpgZoom{from{transform:scale(1)}to{transform:scale(1.05)}}
.lpg-inset{position:absolute;left:-32px;bottom:32px;z-index:2;width:208px;padding:4px;border-radius:12px;background:#fff;box-shadow:0 24px 48px -18px rgba(20,18,17,.45),0 2px 6px rgba(20,18,17,.08)}
.lpg-inset-v{overflow:hidden;aspect-ratio:1;border-radius:9px;background:#2a2927}
.lpg-inset-v video{width:100%;height:100%;object-fit:cover}
.lpg-inset-chip{display:flex;align-items:center;gap:6px;padding:9px 8px 6px;font-size:13px;font-weight:600;color:var(--ink)}
.lpg-inset-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- 2. trust band ---------- */
.lpg-trust{border-top:1px solid var(--line)}
.lpg-trust .known-in{padding:22px 0 10px}
.lpg-scores{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;padding:0 0 20px;font-size:13px;color:var(--ink-2)}
.lpg-scores span{display:inline-flex;align-items:center;gap:6px}
.lpg-scores svg{width:15px;height:15px;color:var(--ok)}

/* ---------- 3. mat glas ---------- */
.lpg-mat .lpg-photo img{object-position:50% 45%}
.lpg-mat-sale{margin-top:14px;max-width:56ch;font-size:15px;line-height:1.7;color:var(--ink-2)}
.lpg-mat-sale b{font-weight:700;color:var(--accent-2)}
.lpg-mat-sale .nw{white-space:nowrap}

/* ---------- 4. glass test ---------- */
.lpg-glas-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"copy media" "quote media";column-gap:clamp(32px,5vw,72px);row-gap:0;align-items:center}
.lpg-glas-copy{grid-area:copy;align-self:end}
.lpg-glas-media{grid-area:media}
.lpg-glas-quote{grid-area:quote;align-self:start}
.lpg-glas-copy .lpg-head{margin-bottom:0}
.lpg-player{max-width:880px;box-shadow:0 30px 60px -30px rgba(20,18,17,.45)}
.lpg-result{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:center;gap:28px;max-width:880px;margin-top:16px;padding:12px 28px 12px 12px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.lpg-photo--result{aspect-ratio:1;border-radius:10px}
.lpg-photo--result img{object-position:50% 74%}
.lpg-photo--result .lpg-photo-cap{left:8px;bottom:8px;padding:4px 7px;font-size:11px}
.lpg-result .lpg-quote{margin:0}

/* ---------- 5a. extraction band ---------- */
.lpg-night{background:var(--night);color:#fff}
.lpg-night .label{color:#E58A63}
.lpg-night .lpg-h2{color:#fff}
.lpg-night .lpg-tx{color:rgba(255,255,255,.7)}
.lpg-night-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.lpg-night-v{overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-l);background:#2a2927}
.lpg-night-v video{width:100%;height:100%;object-fit:cover}
.lpg-night-copy .lpg-head{margin-bottom:0}
.lpg-stats{display:grid;gap:0;margin:28px 0 0}
.lpg-stats div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.lpg-stats dt{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.lpg-stats dd{margin:0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.62)}
.lpg-night-proof{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center;gap:32px;margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3.4vw,40px);border-top:1px solid rgba(255,255,255,.12)}
.lpg-night-proof .lpg-photo{aspect-ratio:5/3;border-radius:10px}
.lpg-night-proof .lpg-photo-cap{left:8px;bottom:8px;padding:4px 7px;font-size:11px;white-space:nowrap}
.lpg-night-proof .lpg-quote p{font-size:clamp(18px,1.8vw,24px)}
.lpg-night-proof .lpg-photo-cap svg{display:none}
.lpg-night-proof .lpg-quote{margin:0;max-width:44rem}

/* ---------- 6. cooking ---------- */
.lpg-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:26px 0 0}
.lpg-feats div{padding:14px 0;border-top:1px solid var(--line)}
.lpg-feats dt{font-size:15px;font-weight:600;color:var(--ink)}
.lpg-feats dd{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.lpg-koken .lpg-photo img{object-position:50% 60%}

/* ---------- 7. reviews ---------- */
.lpg-rev-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:end;gap:24px 64px;margin-bottom:clamp(28px,3.4vw,44px)}
.lpg-rev-top .lpg-head{margin-bottom:0}
.lpg-rev-score{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;padding:20px 22px;border-radius:var(--r-l);background:#fff}
.lpg-rev-big{display:grid;justify-items:center;gap:6px}
.lpg-rev-big b{font-size:44px;font-weight:600;line-height:1;letter-spacing:-.03em}
.lpg-dist{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.lpg-dist li{display:grid;grid-template-columns:28px minmax(0,1fr) 26px;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.lpg-dist .k{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:var(--ink)}
.lpg-dist .k svg{width:11px;height:11px;color:var(--accent)}
.lpg-dist .bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.lpg-dist .bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.lpg-dist .n{text-align:right}
.lpg-wall .review{box-shadow:0 1px 2px rgba(20,18,17,.04)}

/* ---------- 8. chooser ---------- */
.lpg-kies-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.lpg-stage-col{position:sticky;top:calc(var(--hh) + 60px)}
.lpg-stage{position:relative;container-type:inline-size;aspect-ratio:6/5;border-radius:var(--r-l);background:var(--ground-2)}
/* no transform on the plate: it would isolate the multiply blend from the stage colour */
.lpg-plate{position:absolute;left:0;right:0;top:calc(47% - 84cqw * .2889);margin-inline:auto;width:calc(84% * var(--s,1));height:calc(84cqw * .5778);transition:width .3s var(--ease)}
.lpg-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;transition:opacity .25s ease}
.lpg-plate img.is-on{opacity:1}
.lpg-ruler{position:absolute;left:0;right:0;top:calc(100% + 26px);height:1px;background:var(--ink-3)}
.lpg-ruler::before,.lpg-ruler::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--ink-3)}
.lpg-ruler::before{left:0}
.lpg-ruler::after{right:0}
.lpg-ruler span{position:absolute;left:50%;top:-10px;padding:0 10px;transform:translateX(-50%);background:var(--ground-2);font-size:13px;font-weight:600;line-height:20px;color:var(--ink);white-space:nowrap}

.lpg-panel{padding:32px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:0 30px 60px -40px rgba(20,18,17,.35)}
.lpg-ctl+.lpg-ctl{margin-top:18px}
.lpg-ctl-k{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--ink)}
.lpg-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.lpg-seg button{display:grid;align-content:center;justify-items:center;gap:2px;min-height:62px;padding:8px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:center;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.lpg-seg button:hover{border-color:var(--ink-3)}
.lpg-seg button b{font-size:15px;font-weight:600;line-height:1.25;color:var(--ink)}
.lpg-seg button span{font-size:13px;line-height:1.3;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lpg-seg button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.lpg-seg button[aria-pressed="true"] span{color:var(--accent-2)}
.lpg-p-info{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.lpg-p-name{font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.lpg-p-rate{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.lpg-p-rate b{font-weight:600;color:var(--ink)}
.lpg-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:18px 0 0}
.lpg-specs div{min-width:0}
.lpg-specs dt{font-size:12.5px;color:var(--ink-2)}
.lpg-specs dd{margin:1px 0 0;font-size:14.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.lpg-specs a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lpg-deal{margin-top:18px}
.lpg-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:20px}
.lpg-price b{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.lpg-price s{font-size:16px;color:var(--ink-3)}
.lpg-price .btw{font-size:13px;color:var(--ink-3)}
.lpg-offer{margin-top:12px}
.lpg-deadline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.lpg-deadline .klok .n{color:var(--ink)}
.lpg-deadline .klok .l,.lpg-sheet .klok .l{color:var(--ink-2)}
.lpg .klok .c{color:var(--accent)}
.lpg-panel .delivery,.lpg-sheet .delivery{margin-top:12px;padding:12px 16px;gap:.25rem;border-radius:12px;background:var(--ground-2);font-size:14px}
.lpg-panel .delivery--late,.lpg-sheet .delivery--late{background:var(--warn-soft)}
.lpg-cta-row{margin-top:16px}
.lpg-add{width:100%;min-height:56px;border-radius:10px}
.lpg-add svg{width:20px;height:20px}
.lpg-add.is-done{background:var(--ok)}
.lpg-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;margin-top:14px}
.lpg-textbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0;border:0;background:none;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;cursor:pointer}
.lpg-textbtn:hover{text-decoration-color:currentColor}
.lpg-textbtn svg{width:15px;height:15px;color:var(--ink-2)}

/* risk row */
.lpg-risk{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.lpg-risk li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.lpg-risk .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ground-2);color:var(--accent)}
.lpg-risk .ic svg{width:18px;height:18px}
.lpg-risk b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.lpg-risk li>span>span,.lpg-risk a{display:block;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.lpg-risk a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;white-space:nowrap}
.lpg-risk--dark{border-top-color:rgba(255,255,255,.14);grid-template-columns:repeat(4,minmax(0,1fr));text-align:left}
.lpg-risk--dark .ic{background:rgba(255,255,255,.08);color:#E58A63}
.lpg-risk--dark b{color:#fff}
.lpg-risk--dark li>span>span,.lpg-risk--dark a{color:rgba(255,255,255,.72)}
.lpg-risk--dark a{text-decoration-color:rgba(255,255,255,.3)}

/* ---------- 9. open kitchens ---------- */
.lpg-echt-img{overflow:hidden;max-width:640px;border-radius:var(--r-l);aspect-ratio:1040/605;background:#e9e5de}
.lpg-echt-img img{width:100%;height:100%;object-fit:cover}
.lpg-echt .echt{margin-top:clamp(40px,5vw,64px)}

/* ---------- 10. does it fit ---------- */
.lpg-past-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.lpg-sizes{width:100%;border-collapse:collapse;font-size:14.5px}
.lpg-sizes th,.lpg-sizes td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.lpg-sizes thead th{padding-top:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.lpg-sizes tbody th{font-weight:600;color:var(--ink)}
.lpg-sizes td{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.lpg-sizes a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.lpg-sizes a:hover{text-decoration-color:currentColor}
.lpg-sizes td .k{display:block;font-size:12px;line-height:1.3;color:var(--ink-3)}
.lpg-sizes a svg{width:15px;height:15px;color:var(--accent)}
.lpg-past .chk{margin-top:28px}
.lpg-fit{padding:24px;border-radius:var(--r-l);background:var(--ground-2)}
.lpg-fit .tool{margin-top:14px}
.lpg-fit .fit-list li{background:#fff}
.lpg-fit .field input{background:#fff}
.lpg-past-quote .lpg-quote{margin-top:28px}
.lpg-manuals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.lpg-manual{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.lpg-manual:hover{border-color:var(--ink-3);box-shadow:var(--sh-1)}
.lpg-manual .cv{overflow:hidden;width:64px;aspect-ratio:367/520;border-radius:4px;border:1px solid var(--line-2);background:#fff}
.lpg-manual .cv img{width:100%;height:100%;object-fit:cover}
.lpg-manual b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.lpg-manual .tx>span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2)}
.lpg-zoofy{margin-top:clamp(40px,5vw,64px);background:var(--ground-2)}
.lpg-zoofy .muted{display:block;max-width:60ch;font-size:14.5px}

/* ---------- 11. faq ---------- */
.lpg-faq .faq2 h2{font-size:clamp(28px,2.8vw,38px);line-height:1.1;letter-spacing:-.02em}
.lpg-live{margin-top:14px;font-size:14px}
.lpg-faq .acc{border-top:1px solid var(--line)}
.lpg-faq .acc summary{font-size:16px}
.lpg-faq .acc-body p{max-width:62ch;font-size:15px;line-height:1.65}

/* ---------- 12. final cta ---------- */
.lpg-cta{position:relative;overflow:hidden;background:var(--night);color:#fff;text-align:center;isolation:isolate}
.lpg-cta-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.3}
.lpg-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,17,.6) 0%,rgba(20,18,17,.82) 60%,rgba(20,18,17,.94) 100%)}
.lpg-cta-in{display:grid;justify-items:center;max-width:980px}
.lpg-cta .lpg-h2{margin-top:0;max-width:18ch;color:#fff;font-size:clamp(30px,4vw,52px)}
.lpg-cta-sale{display:grid;justify-items:center;gap:14px;margin-top:22px}
.lpg-cta-sale p,.lpg-cta-nosale{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(255,255,255,.8)}
.lpg-cta-nosale{margin-top:22px}
.lpg-cta-offer{display:contents}
.lpg-cta-sale b,.lpg-cta-nosale b{color:#fff;font-weight:700}
.lpg-cta .code-chip{padding:1px 8px;border:1px dashed rgba(229,138,99,.7);background:rgba(192,85,48,.18);color:#F0A585}
.lpg-cta .code-chip:hover{background:rgba(192,85,48,.3)}
.lpg-cta .klok .c{color:#E58A63}
.lpg-cta-btn{margin-top:28px;min-height:58px;padding-inline:32px}
.lpg-cta-btn svg{width:18px;height:18px}
.lpg-cta .lpg-risk{width:100%;margin-top:clamp(36px,4vw,56px)}

/* ---------- sticky bar and sheet ---------- */
.lpg-sticky .container{gap:12px}
.lpg-sticky-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.lpg-sticky .frame{background:var(--ground-2)}
.lpg-sticky .frame img{padding:5px;mix-blend-mode:multiply}
.lpg-sticky .t{line-height:1.3}
.lpg-sticky .t b.lpg-sticky-name{font-size:13.5px;font-weight:600}
.lpg-sticky-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:14px;color:var(--ink);white-space:nowrap}
.lpg-sticky-price>b{font-weight:700}
.lpg-sticky .save-mini{margin-left:0;color:var(--accent-2);font-size:12.5px}
.lpg-sticky-btn{flex:none;min-height:46px;padding:0 16px;font-size:14.5px}
@media (min-width:1024px){.lpg-sticky{display:none}}
@media (max-width:420px){
  .lpg-sticky .frame{width:44px;height:44px}
  .lpg-sticky .container{gap:10px}
  .lpg-sticky-info{gap:10px}
  .lpg-sticky-btn{padding:0 14px;font-size:14px}
}
@media (max-width:400px){.lpg-sticky .frame{display:none}}

.lpg-sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0;padding-bottom:12px;color:var(--ink)}
.lpg-sheet-stage{position:relative;min-width:0;aspect-ratio:16/9;border-radius:12px;background:var(--ground-2)}
.lpg-sheet-stage img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.lpg-sheet .lpg-ctl+.lpg-ctl{margin-top:0}
.lpg-sheet-info{padding-top:16px;border-top:1px solid var(--line)}
.lpg-sheet .lpg-p-name{font-size:19px}
.lpg-sheet-glas{margin-top:2px;font-size:13.5px;color:var(--ink-2)}
.lpg-sheet .lpg-price{margin-top:14px}
.lpg-sheet .lpg-price b{font-size:26px}
#side-sheet .side-body:has(>.lpg-sheet){padding-bottom:0}
.lpg-sheet{padding-bottom:0}
.lpg-sheet-foot{position:sticky;bottom:0;z-index:2;margin-top:14px;padding:12px 0 calc(16px + env(safe-area-inset-bottom,0px));background:#fff;box-shadow:0 -14px 16px -14px rgba(20,18,17,.22)}
.lpg-sheet-add{min-height:54px;border-radius:10px}
.lpg-sheet-stage{aspect-ratio:2/1}

/* ---------- motion stays on with reduced motion (owner rule) ---------- */
@media (prefers-reduced-motion:reduce){
  .lpg-hero-photo img{animation-duration:14s!important}
  .lpg-plate{transition-duration:.3s!important}
  .lpg-plate img{transition-duration:.25s!important}
}

/* ---------- small laptop ---------- */
@media (min-width:1024px) and (max-width:1199px){
  .lpg-hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
  .lpg-h1{font-size:40px}
  .lpg-hero-media{height:480px}
  .lpg-inset{left:-24px;width:176px}
  .lpg-facts{gap:6px 16px}
}

/* ---------- tablet ---------- */
@media (max-width:1023px){
  .lpg-hero-in{grid-template-columns:1fr;gap:28px}
  .lpg-hero-media{order:-1;height:clamp(240px,48vw,420px)}
  .lpg-inset{display:none}
  .lpg-split,.lpg-glas-grid,.lpg-night-grid,.lpg-past-grid,.lpg-kies-grid{grid-template-columns:1fr}
  .lpg-split,.lpg-glas-grid{row-gap:28px}
  .lpg-split--r{grid-template-areas:"copy" "media" "quote"}
  .lpg-glas-grid{grid-template-areas:"copy" "quote" "media"}
  .lpg-split--l,.lpg-split--lq{grid-template-areas:"media" "copy" "quote"}
  .lpg-split--lq .lpg-split-quote .lpg-quote{margin-top:0}
  .lpg-split-quote .lpg-quote,.lpg-glas-quote .lpg-quote{margin-top:0}
  .lpg-rev-top{grid-template-columns:1fr;align-items:start}
  .lpg-rev-score{max-width:440px}
  .lpg-stage-col{position:static;width:100%;max-width:640px;margin-inline:auto}
  .lpg-stage{aspect-ratio:4/3}
  .lpg-plate{width:calc(88% * var(--s,1));height:calc(88cqw * .5778);top:calc(45% - 88cqw * .2889)}
  .lpg-kies-grid{gap:24px}
  .lpg-panel{padding:0;border:0;box-shadow:none;background:none}
  .lpg-risk--dark{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lpg-echt-img{max-width:none}
}

/* ---------- phone ---------- */
@media (max-width:767px){
  .lpg-hero{padding-block:0 24px}
  .lpg-hero-in{gap:0}
  .lpg-hero-media{height:150px;margin-inline:calc(var(--gut) * -1)}
  .lpg-hero-photo{border-radius:0}
  /* matte glass, controls and finger; the marble worktop below the glass stays out of the crop */
  .lpg-hero-photo img{object-position:50% 36%}
  .lpg-hero-copy{padding-top:14px}
  .lpg-hero .label{font-size:12px;line-height:16px;letter-spacing:.1em}
  .lpg-h1{margin-top:8px;line-height:1.08}
  .lpg-hero-sub{margin-top:8px;font-size:15px;line-height:1.5}
  .lpg-rate{margin-top:10px;gap:7px;font-size:12.5px}
  .lpg-rate .stars-fill{--sz:13px!important}
  .lpg-hero-prices{margin-top:10px;gap:2px}
  .lpg-hero-price{font-size:15px}
  .lpg-hero-price b{font-size:18px}
  .lpg-hero-sale{font-size:14px}
  .lpg-hero-sale b{font-size:16px}
  .lpg-hero-cta{margin-top:12px}
  .lpg-hero-btn{width:100%;min-height:52px}
  .lpg-facts{margin-top:12px;gap:4px 14px;font-size:13px}
  .lpg-fact-af{display:none!important}
  .lpg-facts svg{width:14px;height:14px}

  .lpg-trust .known-in{padding:16px 0 8px}
  .lpg-scores{flex-direction:column;align-items:center;gap:2px;padding-bottom:16px;font-size:12.5px;text-align:center}

  .lpg-quote p{font-size:16.5px}
  .lpg-photo-cap{left:10px;bottom:10px;font-size:11.5px}

  .lpg-mat .lpg-split-media{margin-top:-4px}
  .lpg-result{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:8px 14px 8px 8px}
  .lpg-result .lpg-quote{padding-left:12px}
  .lpg-result .lpg-quote p{font-size:15px}
  .lpg-photo--result .lpg-photo-cap{left:6px;bottom:6px;padding:3px 6px;font-size:10.5px}
  .lpg-photo--result .lpg-photo-cap svg{display:none}
  .lpg-glas-grid{gap:28px}
  .lpg-glas-media{order:0}
  .lpg-player .play{width:64px;height:64px}

  .lpg-night-grid{gap:24px}
  .lpg-stats div{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .lpg-night-proof{grid-template-columns:1fr;gap:18px}
  .lpg-night-proof .lpg-photo{aspect-ratio:16/9}
  .lpg-night-proof .lpg-photo-cap{left:10px;bottom:10px;padding:5px 8px;font-size:11.5px}

  .lpg-feats{grid-template-columns:1fr}

  .lpg-rev-score{grid-template-columns:1fr;gap:14px;padding:18px}
  .lpg-rev-big{grid-auto-flow:column;justify-content:start;align-items:center;gap:12px}
  .lpg-rev-big b{font-size:36px}

  .lpg-kies .lpg-head--center{text-align:left}
  .lpg-seg button{min-height:58px;padding-inline:4px}
  .lpg-seg button b{font-size:14px}
  .lpg-seg button span{font-size:12.5px}
  .lpg-specs{gap:10px 14px}
  .lpg-p-name{font-size:20px}

  .lpg-sizes thead{display:none}
  .lpg-sizes,.lpg-sizes tbody{display:block}
  .lpg-sizes tbody{display:grid;gap:10px}
  .lpg-sizes tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"name name" "glas inbouw" "link link";gap:10px 14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px}
  .lpg-sizes tbody th,.lpg-sizes td{display:grid;gap:1px;padding:0;border:0;white-space:normal}
  .lpg-sizes tbody th{grid-area:name;font-size:15px;line-height:1.3}
  .lpg-sizes td{font-size:14px;color:var(--ink)}
  .lpg-sizes td::before{content:attr(data-k);font-size:12px;color:var(--ink-2)}
  .lpg-sizes td[data-k="Glas"]{grid-area:glas}
  .lpg-sizes td[data-k="Inbouw"]{grid-area:inbouw}
  .lpg-sizes td[data-k="Inbouw"]::before{content:none}
  .lpg-sizes td .k{color:var(--ink-2)}
  .lpg-sizes td[data-k="Maattekening"]{grid-area:link;display:block;padding-top:10px;border-top:1px solid var(--line-2)}
  .lpg-sizes td[data-k="Maattekening"]::before{content:none}
  .lpg-past-grid{gap:0}
  .lpg-past-a,.lpg-past-b{display:contents}
  .lpg-sizes{order:1}
  .lpg-fit{order:2;margin-top:28px;padding:18px}
  .lpg-past .lpg-past-chk{order:3}
  .lpg-past-quote{order:4}
  .lpg-manuals{order:5}
  .lpg-fit .form-row{grid-template-columns:1fr 1fr;gap:10px}
  .lpg-manuals{grid-template-columns:1fr;gap:10px}
  .lpg-manual{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:10px 12px}
  .lpg-manual .cv{width:44px}
  .lpg-risk{gap:16px 12px}
  .lpg-risk li{grid-template-columns:20px minmax(0,1fr);align-items:start;gap:8px}
  .lpg-risk .ic,.lpg-risk--dark .ic{width:20px;height:20px;background:none}
  .lpg-risk .ic svg{width:20px;height:20px}
  .lpg-risk b{font-size:13px}
  .lpg-risk li>span>span,.lpg-risk a{font-size:12px}
  .lpg-zoofy .btn{width:100%}

  .lpg-cta .lpg-h2{font-size:clamp(28px,8vw,36px)}
  .lpg-cta-btn{width:100%}
  .lpg-cta .lpg-risk{text-align:left}
}
@media (max-width:380px){
  .lpg-risk{grid-template-columns:1fr}
}

/* ---------- page chrome on the hob page (html.is-lp-hob is set while this view is mounted) ---------- */
/* promo bar: only the offer of the hobs (the first row), no percentage line; one row on phones so the hero CTA stays on the
   first screen; no bar while the hobs have no offer (is-lp-hob-nobar, set by lp-kookplaten.js) */
html.is-lp-hob-nobar #promo,html.is-lp-hob .promo-offer--more{display:none}
html.is-lp-hob .promo-t b,html.is-lp-hob .promo-t .sep{display:none}
/* a code without an accent word (KOOK-30): the percentage leads instead, "30% extra korting met code KOOK-30" ("30% met code" on phones) */
html.is-lp-hob .promo-t .promo-short{display:inline}
html.is-lp-hob .promo-t .soft-w{color:#fff}
@media (max-width:767px){
  html.is-lp-hob .promo-row{flex-wrap:nowrap;gap:10px;min-height:44px;padding-block:4px}
  html.is-lp-hob .promo-t{font-size:13px;white-space:nowrap}
  html.is-lp-hob .promo-t .promo-kw{display:none}
  html.is-lp-hob .promo-row>.code-chip{display:inline-flex;flex-shrink:0;white-space:nowrap}
  html.is-lp-hob .promo-row>.promo-clock{flex-shrink:0}
  html.is-lp-hob .promo-row>.promo-clock{display:flex}
  html.is-lp-hob .promo-clock .nog,html.is-lp-hob .promo-mob,html.is-lp-hob .promo-note{display:none}
}
/* footer: hobs are connected by an electrician, and this page sells no taps */
html.is-lp-hob .ft-actions>.btn,html.is-lp-hob .ft-brand p b,html.is-lp-hob .ft-usps-in>div:nth-child(4){display:none}
html.is-lp-hob .ft-usps-in{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){
  html.is-lp-hob .ft-usps-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.is-lp-hob .ft-usps-in>div:nth-child(3){grid-column:1/-1}
}

/* calmer page (owner 17-09): the loupe photo without the extra tiles in the mat glass section */
.lpg-mat .gf-spiegel-tiles{display:none}
/* .bar is also the header bar class (display:grid, auto columns), which squeezed the fill to zero width */
.lpg-dist .bar{display:block;gap:0}

/* trust scores under the logos (same as the tap page) */
.lpg-scores{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;margin:0;padding:0 0 20px;list-style:none;font-size:13px;line-height:1.4;color:var(--ink-2)}
.lpg-scores li{display:inline-flex;align-items:center;gap:6px}
.lpg-scores svg{width:13px;height:13px;flex:none;color:var(--accent)}
@media (max-width:640px){
  .lpg-scores{flex-direction:column;align-items:center;gap:2px;padding-bottom:16px}
  .lpg-hero-media{height:232px}
  .lpg-past-quote{display:none}
}
/* phone: the size check comes first and the size cards scroll sideways, so "past hij?" is answered in one screen */
@media (max-width:767px){
  .lpg-past .lpg-fit{order:0}
  .lpg-past .lpg-sizes{margin-top:22px}
  .lpg-sizes tbody{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 10px;scrollbar-width:none}
  .lpg-sizes tbody::-webkit-scrollbar{display:none}
  .lpg-sizes tr{flex:0 0 82%;scroll-snap-align:center;background:#fff}
}

/* the try-at-home line under the buy button */
.lpg-try{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.lpg-try svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent-2)}