/* glastest.js */
.gf-glastest-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.gf-glastest-tabs{display:flex;flex:1;min-width:0;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--ground-2)}
.gf-glastest-bar button,.gf-glastest-play{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer}
.gf-glastest-tabs button{flex:1 1 auto;justify-content:center;padding:0 18px;border-radius:999px;color:var(--ink-2);font-size:15px;white-space:nowrap;transition:background-color .2s,color .2s}
.gf-glastest-tabs [aria-selected=true]{background:var(--ink);color:#fff}
.gf-glastest-bar svg{width:18px;height:18px}
.gf-glastest-play svg{width:14px;height:14px;color:var(--accent)}
.gf-glastest-stage{position:relative;aspect-ratio:5/6;border-radius:var(--r-l,16px);background:var(--ink);overflow:hidden;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
/* armed keeps pan-y: a vertical swipe scrolls the page, a sideways stroke drives the clip (glass-glastest.js point) */
[data-lens].gf-glastest-stage{touch-action:none}
.gf-glastest-two{display:grid;grid-template-rows:1fr 1fr;gap:6px}
.gf-glastest-pane{position:relative;margin:0;min-height:0;overflow:hidden}
.gf-glastest-one .gf-glastest-pane,.gf-glastest-v,.gf-glastest-tags,.gf-glastest-hit{position:absolute;inset:0}
.gf-glastest-v{width:100%;height:100%;object-fit:cover;object-position:var(--pm)}
.gf-glastest-root [data-off]{opacity:0}
.gf-glastest-v,.gf-glastest-tags,.gf-glastest-tag,.gf-glastest-ring,.gf-glastest-cue{transition:opacity .3s}
.gf-glastest-tags{z-index:5;pointer-events:none}
.gf-glastest-tag,.gf-glastest-cue{position:absolute;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#141211b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 12.5px/1.2 var(--font);white-space:nowrap}
.gf-glastest-tag{inset:var(--tm)}
.gf-glastest-mat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.gf-glastest-hit{z-index:2}
.gf-glastest-ring,.gf-glastest-loupe{position:absolute;left:0;top:0;z-index:6;border-radius:50%;pointer-events:none}
.gf-glastest-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid #ffffffe6;box-shadow:0 0 0 1px #14121133,0 4px 16px #14121166}
.gf-glastest-cue{left:50%;top:50%;z-index:6;margin-top:34px;transform:translateX(-50%)}
.gf-glastest-ring,.gf-glastest-cue{opacity:0}
[data-armed] .gf-glastest-ring,[data-near]:not([data-lens]) .gf-glastest-ring,[data-armed]:not([data-moving]) .gf-glastest-cue{opacity:1}
[data-hint]:not([data-near]) .gf-glastest-ring{animation:gf-gt-sweep 1.3s cubic-bezier(.45,0,.55,1) 2}
@keyframes gf-gt-sweep{0%{opacity:0;translate:-56px 0}18%{opacity:1}50%{translate:56px 0}82%{opacity:1}100%{opacity:0;translate:-56px 0}}
.gf-glastest-prog{position:absolute;inset:auto 0 0;z-index:6;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.gf-glastest-start{position:absolute;inset:auto 0 0;z-index:4;height:40%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:0 16px 52px;background:linear-gradient(#14121100,#14121199);color:#fff;font-size:14px;line-height:1.3;pointer-events:none;transition:opacity .3s,visibility 0s}
.gf-glastest-go{min-width:180px;min-height:48px;pointer-events:auto;box-shadow:0 8px 24px #1412114d}
.gf-glastest-loupe{z-index:7;width:128px;height:128px;background:var(--ink) no-repeat;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--accent),0 10px 30px #14121159}
.gf-glastest-root :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gf-glastest-stage :focus-visible{outline-color:#fff}
.gf-glastest-hit:focus-visible{outline-offset:-4px;border-radius:14px}
.gf-glastest-cap{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.gf-glastest-out{margin-top:6px}
/* the play link folds away and the result unfolds; nothing reserves height before the test ran */
/* visibility turns on at once (so focus can move there in the same frame) and turns off only after the fade */
.gf-glastest-pre,.gf-glastest-post{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility 0s}
.gf-glastest-pre>div,.gf-glastest-post>div{min-height:0;overflow:hidden;margin:-4px;padding:4px}
.gf-glastest-start[data-off],.gf-glastest-post,[data-done]>.gf-glastest-pre{visibility:hidden;opacity:0}
.gf-glastest-start[data-off]{transition-delay:0s,.3s}
.gf-glastest-post,[data-done]>.gf-glastest-pre{transition-delay:0s,0s,.4s}
.gf-glastest-post,[data-done]>.gf-glastest-pre{grid-template-rows:0fr}
[data-done]>.gf-glastest-post{grid-template-rows:1fr;visibility:visible;opacity:1;transition-delay:0s}
.gf-glastest-res{margin-top:4px;font-size:17px;line-height:1.4;font-weight:600}
.gf-glastest-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gf-glastest-acts .btn{min-height:44px;padding:0 16px;font-size:14px}
.gf-glastest-lp[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.gf-glastest-care{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--ink-2)}
.gf-glastest-care span,.gf-glastest-cap,.gf-glastest-res{display:block;max-width:60ch}
.gf-glastest-care a{color:var(--ink);white-space:nowrap}
.gf-glastest-grid{display:grid;gap:28px}
@media (min-width:768px){
.gf-glastest-tabs{flex:none}
.gf-glastest-tabs button{padding:0 24px}
.gf-glastest-stage{aspect-ratio:16/9}
.gf-glastest-two{grid-template:none/1fr 1fr}
.gf-glastest-v{object-position:var(--pd)}
.gf-glastest-tag{inset:var(--td)}
.gf-glastest-loupe{width:176px;height:176px}
.gf-glastest-start{padding-bottom:22px}
}
@media (max-width:420px){.gf-glastest-tabs button{padding:0 12px;font-size:14px}}
/* three tabs on a phone: the share button keeps only its icon (the text stays its accessible name) */
@media (max-width:480px){[data-tabs="3"] .gf-glastest-share{justify-content:center;min-width:44px}[data-tabs="3"] .gf-glastest-sharet{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.gf-glastest-home .gf-spiegel-hit:focus-visible{outline:0}
/* app.css cuts all motion for reduced motion; these fades and the sweep stay (owner decision: motion plays for everyone) */
@media (prefers-reduced-motion:reduce){
.gf-glastest-v,.gf-glastest-tags,.gf-glastest-tag,.gf-glastest-ring,.gf-glastest-cue{transition-duration:.3s!important}
.gf-glastest-start{transition-duration:.3s,0s!important}
.gf-glastest-pre,.gf-glastest-post{transition-duration:.4s,.3s,0s!important}
.sticky-buy.is-on.gf-yield{transition-duration:.35s,0s!important}
.player.is-playing .gf-glastest-tags{transition-duration:.3s!important}
.gf-glastest-tabs button{transition-duration:.2s!important}
[data-hint]:not([data-near]) .gf-glastest-ring{animation-duration:1.3s!important}
}
/* the buy bar steps aside while it would cover the glass block (glass-glastest.js bar) */
.sticky-buy.is-on.gf-yield{transform:translateY(105%);visibility:hidden;transition:transform .35s var(--ease,ease),visibility 0s .35s}
/* plate labels over the scratch footage outside the test: product gallery tile and kookplaten header */
.pgrid-it.pgrid-glass{cursor:pointer;background:var(--ink)}
.pgrid-it.pgrid-glass .vt{top:10px;right:10px;bottom:auto;width:fit-content;padding:6px 10px;border-radius:12px;line-height:1.3;text-align:left}
.pgrid-it.pgrid-glass .vt svg{flex:none}
.player .gf-glastest-tags{transition:transform .3s}
.player.is-playing .gf-glastest-tags{transform:translateY(-48px)}
.gf-duel .gf-glastest-cap{margin-top:10px}
@media (min-width:1024px){.gf-glastest-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:center}}