:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#4f8cff;
  --ring:0 0 0 3px rgba(79,140,255,.25);
  --radius:18px;
  --border:#e5e7eb;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%,rgba(79,140,255,.08),transparent),
    radial-gradient(1200px 600px at 110% 110%,rgba(116,242,206,.08),transparent),
    #fff;
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
}

/* Navbar */
.navbar{
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--border);
}
.navbar .menu a{ margin-left:16px; text-decoration:none; color:#111827 }

/* Cart icon + badge */
.cart{ position:relative; display:inline-block; margin-left:16px; line-height:0 }
.cart svg{ display:block }
.cart [data-cart-count]{
  position:absolute; top:-6px; right:-10px;
  min-width:20px; height:20px; padding:0 6px;
  font:600 12px/20px system-ui, sans-serif;
  text-align:center; color:#fff; background:#e11d48;
  border-radius:999px; box-shadow:0 0 0 2px #fff;
  display:none;
}

/* Page */
.page{ max-width:1200px; margin:24px auto; padding:0 20px }
h1{ margin:0 0 16px }

/* Layout */
.layout{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:24px;
}

/* LEFT: media-kaart */
.media-card{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:16px;
}
.media-grid{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:16px;
  align-items:start;
}
.thumbs{ display:flex; flex-direction:column; gap:12px }
.thumb{
  border-radius:12px; overflow:hidden; cursor:pointer; outline:none;
  border:1px solid var(--border); background:#fff;
}
.thumb img{ display:block; width:100%; height:90px; object-fit:cover }
.thumb[aria-current="true"]{ box-shadow:var(--ring); border-color:rgba(79,140,255,.6) }
.thumb:focus-visible{ box-shadow:var(--ring) }

.main-image{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:14px;
  display:flex; align-items:center; justify-content:center;
  height:520px; overflow:hidden;
}
.main-image img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px }

.compat-card{
  margin-top:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:16px;
}
.compat-card h3{ margin:0 0 8px; font-size:16px }
.compat-card p{ margin:0; color:var(--muted); font-size:14px }

/* RIGHT: bestel + extra kaart */
.panel{
  background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:24px;
  position:sticky; top:20px; height:max-content;
}
.title{ font-size:20px; margin:0 0 6px }
.subtitle{ color:var(--muted); margin:0 0 14px; font-size:13px }
.price{ font-size:28px; font-weight:700; margin:6px 0 18px }
.row{ display:flex; align-items:center; gap:12px }
.qty{ display:inline-flex; align-items:center; border-radius:12px; overflow:hidden; border:1px solid var(--border) }
.qty button{ all:unset; padding:10px 12px; cursor:pointer }
.qty input{ width:64px; padding:10px; border:0; text-align:center; background:transparent; font-size:16px }
.qty button:hover{ background:#f3f4f6 }

.btn{
  appearance:none; border:0; border-radius:14px; padding:14px 18px; font-weight:700; cursor:pointer;
  background:linear-gradient(180deg,var(--accent),#356eea); color:#fff;
  box-shadow:0 12px 30px rgba(79,140,255,.25);
}
.meta{ margin-top:12px; color:var(--muted); font-size:14px }
.badge{
  display:inline-block; background:#ecfeff; border:1px solid #bae6fd; color:#0369a1;
  padding:4px 8px; border-radius:999px; font-size:12px
}

.side-card{
  margin-top:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:16px;
}
.side-card h3{ margin:0 0 8px; font-size:16px }
.side-card p{ margin:0; color:var(--muted); font-size:14px }

/* Utilities for margins that were inline */
.mb-12{ margin-bottom:12px }
.mb-14{ margin-bottom:14px }

/* Responsive */
@media (max-width:1024px){
  .layout{ grid-template-columns: 1fr }
  .panel{ position:static }
}
@media (max-width:640px){
  .media-grid{ grid-template-columns: 1fr }
  .thumbs{ order:2; flex-direction:row }
  .thumb img{ height:70px }
}