/* od-setup360.css · de 360-viewer, de kaartregel en de pop-up.
   Gebouwd uit het Claude Design-ontwerp 'Setup 360 · plaatsingsopties'.
   Alleen de .s360-regels reizen mee · de .x-opmaak van dat document is documentatie.
   De kleuren, maten en overgangen zijn die van het ontwerp en staan vast. */

.s360-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:transparent;border:1.5px solid rgba(0,0,0,.13);border-radius:14px;padding:9px 14px 9px 9px;margin:0 0 16px;cursor:pointer;font:inherit;transition:all 220ms cubic-bezier(.22,.61,.36,1)}
.s360-row:hover{border-color:rgba(0,0,0,.4);background:rgba(0,0,0,.04)}
.is-feat .s360-row{border-color:rgba(255,255,255,.16)}
.is-feat .s360-row:hover{border-color:rgba(111,224,0,.5);background:rgba(111,224,0,.07)}
.s360-thumb{width:64px;height:44px;border-radius:9px;flex-shrink:0}
.s360-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.s360-txt b{font-size:13.5px;white-space:nowrap;font-weight:700;color:#0A0A0A;letter-spacing:-.01em}
.is-feat .s360-txt b{color:#F8F5EE}
.s360-txt span{font-size:11.5px;color:#6a6a66}
.is-feat .s360-txt span{color:rgba(248,245,238,.6)}
.s360-row .s360-ico{margin-left:auto;flex-shrink:0;color:#3F8A00}
.is-feat .s360-row .s360-ico{color:#6FE000}
.s360-strip{background:#0A0A0A;border-radius:20px;padding:26px 26px 28px;margin-bottom:34px}
.s360-strip-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:20px}
.s360-strip-top p{margin:0;font-size:13.5px;color:rgba(248,245,238,.62);line-height:1.5}
.s360-strip-top .eye{margin:0}
.s360-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.s360-card{background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 10px 16px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:all 260ms cubic-bezier(.22,.61,.36,1)}
.s360-card:hover{border-color:rgba(111,224,0,.34);transform:translateY(-3px)}
.s360-card .s360-shot{position:relative;border-radius:10px;aspect-ratio:16/10;overflow:hidden}
.s360-badge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(10,10,10,.82);border:1px solid rgba(255,255,255,.16);color:#6FE000;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.s360-card h4{font-family:'Luxe Uno',sans-serif;font-size:15px;font-weight:700;margin:14px 0 5px;padding:0 6px;color:#F8F5EE}
.s360-card p{margin:0;padding:0 6px;font-size:12.5px;line-height:1.5;color:rgba(248,245,238,.6)}
.s360-inline{display:grid;grid-template-columns:330px minmax(0,1fr);gap:32px;align-items:start}
.s360-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.s360-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.s360-foot .s360-tabs{margin:0;flex:1}
.s360-panel .eye,.s360-strip-top .eye{font-size:12px}
.s360-tab{font:inherit;cursor:pointer;font-size:13px;font-weight:700;padding:10px 20px;border-radius:999px;background:transparent;border:1.5px solid rgba(255,255,255,.24);color:rgba(248,245,238,.86);transition:all 220ms cubic-bezier(.22,.61,.36,1)}
.s360-tab:hover{border-color:rgba(255,255,255,.45);color:#F8F5EE}
.s360-tab[aria-pressed="true"]{background:#6FE000;border-color:#6FE000;color:#000}
.s360-panel h3,.s360-panel h2{font-family:'Kardige',sans-serif;font-size:32px;font-weight:400;letter-spacing:-.02em;margin:0 0 10px;color:#F8F5EE}
.s360-panel > p:not(.eye){font-size:14.5px;line-height:1.6;color:rgba(248,245,238,.66);margin:0 0 22px}
.s360-spec{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.s360-spec li{display:flex;gap:10px;font-size:13.5px;line-height:1.45;color:rgba(248,245,238,.84)}
.s360-spec li svg{flex-shrink:0;color:#6FE000;margin-top:3px}
.s360-spec li em{font-style:normal;color:rgba(248,245,238,.6)}
.s360-view{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.s360-view.is-drag{cursor:grabbing}
.s360-view .ph{position:absolute;inset:0}
.s360-view .ph::after{color:rgba(255,255,255,.6)}
.s360-hud{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px}
.s360-hint{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(248,245,238,.82)}



.s360-overlay{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;pointer-events:none;transition:opacity .22s ease}
.s360-overlay.is-open{opacity:1;pointer-events:auto}
.s360-modal{width:min(1040px,100%);max-height:88vh;overflow:hidden;background:#141414;border:1px solid rgba(255,255,255,.13);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.6);padding:28px 30px 24px;transform:translateY(14px) scale(.98);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.s360-overlay.is-open .s360-modal{transform:none}
.s360-close{position:absolute;right:20px;top:20px;width:38px;height:38px;border-radius:11px;background:rgba(10,10,10,.6);border:1px solid rgba(255,255,255,.14);color:#F8F5EE;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 220ms cubic-bezier(.22,.61,.36,1)}
.s360-close:hover{border-color:#6FE000;color:#6FE000}
.s360-modal .s360-inline{grid-template-columns:minmax(0,1fr) 310px;gap:30px}
.s360-modal .s360-panel{order:2}
.s360-modal .s360-view{touch-action:none;aspect-ratio:auto;height:clamp(230px,47vh,460px)}
.s360-modal .s360-panel h3{padding-right:46px;font-size:27px;margin-bottom:8px}
.s360-modal .s360-panel > p:not(.eye){font-size:13.5px;margin-bottom:16px}
.s360-modal .s360-spec{gap:8px;margin-bottom:0}
.s360-modal .s360-spec li{font-size:13px}
.s360-modal-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.s360-modal-foot .s360-tabs{margin:0;flex:1;gap:7px}
.s360-modal-foot .s360-tab{padding:9px 15px;font-size:12.5px}
.s360-modal-foot .s360-link{font-size:13.5px;color:rgba(248,245,238,.68);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0;font-family:inherit}
.s360-modal-foot .s360-link:hover{color:#F8F5EE}
@media(max-width:1024px){.s360-inline{grid-template-columns:1fr}.s360-modal .s360-inline{grid-template-columns:minmax(0,1fr) 260px;gap:22px}}
@media(max-height:680px){.s360-modal{padding:22px 24px 20px}.s360-modal .s360-panel > p:not(.eye){display:none}.s360-modal .s360-panel h3{font-size:23px}.s360-modal .s360-spec li{font-size:12.5px}.s360-modal .s360-spec{gap:7px}.s360-modal .s360-view{height:clamp(170px,38vh,300px)}.s360-modal-foot{margin-top:15px;padding-top:14px}}
@media(max-width:820px){.s360-modal{overflow:auto;padding:26px 22px 24px}.s360-modal .s360-inline{grid-template-columns:1fr}.s360-modal .s360-panel{order:2}.s360-modal .s360-view{height:clamp(200px,34vh,320px)}}
@media(max-width:900px){.s360-cards{grid-template-columns:1fr}}