/* Keuzeregels met tegels: gedeeld door de systeempagina (product.js) en de losse camerapagina (build_simple_pdps.py).
   Dicht: regel met waarde en "Wijzig". Open: tegels met beeld, korte uitleg en prijsverschil. */
.rh b small{margin-left:10px;font-size:14.5px;font-weight:400;color:#5b6673}
.rw.op .rh b small{display:none}
.rh:focus-visible,.ot:focus-visible{outline:2px solid #0086c8;outline-offset:2px}
.ots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;padding:0 0 14px}
.ots.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ot{display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:8px 12px 8px 8px;box-sizing:border-box;background:#fff;border:1.5px solid #dfe3e8;border-radius:8px;font:inherit;text-align:left;text-decoration:none;color:#3a4552;cursor:pointer;transition:border-color var(--dur) ease,background-color var(--dur) ease,transform var(--dur) var(--ease-out)}
.ot.on{border-color:#0086c8;background:#eef5fb;box-shadow:0 0 0 1px #0086c8 inset;cursor:default}
@media (hover:hover) and (pointer:fine){.ot:not(.on):hover{border-color:#153259}}
.ot-i{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:48px;background:#f3f6f9;border-radius:6px}
.ot-i img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ot.on .ot-i{background:#fff}
.ot-i.ic{color:#0086c8}.ot-i.ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ot-n{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ot-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.ot-h b{font-size:15.5px;font-weight:500;color:#153259}
.ot-n small{font-size:13.5px;font-weight:400;color:#3a4552}.ot-n small span{display:block}
.ot-d{font-size:14px;font-weight:500;color:#153259;white-space:nowrap;font-variant-numeric:tabular-nums}
.ot-c{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#0086c8;color:#fff}
.ot-c svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ots.n3 .ot{flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px 10px}
.ots.n3 .ot-i{width:100%;height:56px}
@media (max-width:860px){
.rh b small{display:block;margin:1px 0 0;font-size:13.5px}
.ot{gap:9px;padding:8px}.ot-i{width:42px;height:42px}.ot-h{gap:4px}.ot-h b{font-size:15px}.ot-n small{font-size:12.5px}.ot-d{font-size:13px}
.ots.n3 .ot{padding:8px}.ots.n3 .ot-i{height:46px}
}
.ots.n3 .ot-i{display:none}.ots.n3 .ot{padding:10px 12px 11px;gap:4px}
@media (max-width:860px){.ots.n3 .ot{padding:9px 9px 10px}}
/* Losse camerapagina: zelfde regels, als gewone links */
.sp-rs{margin:0 0 16px}.sp-rs .rw:last-child{border-bottom:1px solid #e3e8ee}.sp-rs .rw:not(.op) .ots{display:none}
.sp-f a{color:inherit;font-weight:500;white-space:nowrap}
@media (max-width:860px){.ot-i{width:36px;height:38px}.ot{gap:8px}}
.om9{margin:10px 0 14px;font-size:14.5px;line-height:1.4;color:#5b6673}.om9 a{color:#0086c8;font-weight:500}
/* Aantal met prijs per systeem, gelijk aan de configurator. */
.cn.cnp button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:auto;min-height:54px;padding:7px 0}
.cn.cnp b{font-size:17px;font-weight:500;line-height:1.2}.cn.cnp small{font-size:12.5px;font-weight:400;line-height:1.2;color:#5b6673;font-variant-numeric:tabular-nums}
.cn.cnp button.on small{color:#153259}

/* 360 px: serietegels (drie naast elkaar) net passend, prijsverschil niet afgebroken. */
@media (max-width:400px){.ots.n3{gap:6px}.ots.n3 .ot{padding:8px 7px 9px}.ots.n3 .ot-h b{font-size:14.5px}.ots.n3 .ot-d{font-size:12.5px}.ots.n3 .ot-n small{font-size:12px}.ots.n3 .ot-h{gap:2px}}
.ab8 small{white-space:nowrap}
/* 360 px: aansluittegels (met icoon) onder elkaar, zodat de uitleg op een regel past. */
@media (max-width:400px){.ots:has(.ot-i.ic){grid-template-columns:minmax(0,1fr)}}
/* Drukreactie op keuzetegels en aantallen; open rijen komen rustig in beeld. */
button.ot:not(.on):active,a.ot:active{transform:scale(.98)}
.cn button{transition:border-color var(--dur) ease,background-color var(--dur) ease,transform var(--dur) var(--ease-out)}.cn button:active{transform:scale(.97)}
.rw>.ots,.rw>.cn,.rw>.om9{transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
@starting-style{.rw>.ots,.rw>.cn,.rw>.om9{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){button.ot:active,a.ot:active,.cn button:active{transform:none}@starting-style{.rw>.ots,.rw>.cn,.rw>.om9{transform:none}}}