:root{
  --bg:#0f1115;
  --card:#151925;
  --text:#e9edf7;
  --muted:#aab3c5;
  --pink:#ff4d8d;
  --line:rgba(255,255,255,.08);
  --radius:16px;
  --max:1100px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(255,77,141,.20), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,120,180,.18), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}

/* HEADER */
header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(15,17,21,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width:var(--max);
  margin:auto;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand img{
  width:44px;
  height:44px;
  object-fit:contain;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px;
}

.brand-title{
  font-family:'Dancing Script', cursive;
  font-size:30px;
  font-weight:700;
  color:var(--pink);
}

/* MENU */
nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

nav a{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
}

nav a:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.05);
}

/* LAYOUT */
.container{
  max-width:var(--max);
  margin:auto;
  padding:22px 14px;
}

.hero{
  background:linear-gradient(135deg, rgba(255,77,141,.22), rgba(255,120,180,.22));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  margin-bottom:24px;
}

.hero h1{
  margin:0 0 10px;
  font-family:'Dancing Script', cursive;
  font-size:42px;
  color:var(--pink);
}

.hero p{
  margin:0 0 14px;
  color:var(--muted);
}

.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  background:var(--pink);
  color:#fff;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr);}
}

.card{
  background:rgba(21,25,37,.85);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}

.card h3{
  margin-top:0;
  color:var(--pink);
}

.muted{color:var(--muted)}

.price{
  font-size:18px;
  font-weight:700;
  margin:8px 0;
  color:var(--pink);
}

/* THUMB */
.thumb-wrap{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.thumb{
  width:140px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
}

.thumb-placeholder{
  width:140px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px dashed var(--line);
  color:var(--muted);
}

/* FOOTER */
footer{
  margin-top:40px;
  border-top:1px solid var(--line);
  padding:16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;

/* =========================================================
   SHOP + PRODUCT (gedeeld)
========================================================= */

/* Layout */
.container{
  max-width:1100px;
  margin:auto;
  padding:24px 14px;
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:640px){
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .grid{ grid-template-columns:repeat(3,1fr); }
}

/* Card */
.card{
  display:block;
  background:rgba(21,25,37,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  transition:.15s;
}
.card:hover{
  transform:translateY(-2px);
  background:rgba(21,25,37,.95);
}

/* =========================================================
   SHOP
========================================================= */

.image-wrap{ position:relative; }

.thumb{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}

.thumb-placeholder{
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#aab3c5;
  font-size:13px;
}

.title{
  margin:10px 0 6px;
  font-weight:700;
}

.price{
  color:#ff4d8d;
  font-weight:800;
  margin-bottom:10px;
}

.btn{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:#ff4d8d;
  color:#fff;
  text-align:center;
}

/* Status badge */
.badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#fff;
}

.badge.beschikbaar{ background:#2ecc71; }
.badge.besteld{ background:#f1c40f; color:#222; }
.badge.verkocht{ background:#e74c3c; }

/* =========================================================
   PRODUCT PAGINA
========================================================= */

.product{
  display:flex;
  flex-direction:column;
  gap:18px;
}

@media (min-width:860px){
  .product{ flex-direction:row; }
  .info{ flex:1; }
}

.photo{
  width:100%;
  max-width:460px;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.20);
}

.notice{
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(46,204,113,.35);
  background:rgba(46,204,113,.12);
  color:#dff6e8;
}

/* Opties */
.options{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.opt{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  margin-bottom:10px;
}

.opt label{
  display:flex;
  gap:10px;
  cursor:pointer;
}

.opt input{
  margin-top:3px;
  transform:scale(1.1);
}

.opt-name{ font-weight:700; }
.opt-price{
  color:#ff4d8d;
  font-weight:800;
  white-space:nowrap;
}

/* Totaal */
.totalbox{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.totalbox strong{
  color:#ff4d8d;
  font-size:18px;
}

.sold-note{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#aab3c5;
}
}


/* =========================================================
   PRODUCT + SHOP (exact oude stijl)
========================================================= */

.container{
  max-width:1100px;
  margin:auto;
  padding:24px 14px;
}

.card{
  background:rgba(21,25,37,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:22px;
}

/* ---------------- PRODUCT LAYOUT ---------------- */

.product{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}

@media (min-width:860px){
  .product{ flex-direction:row; }
  .info{ flex:1; }
}

/* ---------------- IMAGE ---------------- */

.image-wrap{
  position:relative;
  width:100%;
  max-width:460px;
}

.photo{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.20);
  display:block;
}

/* ---------------- BADGE ---------------- */

.badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

.badge.beschikbaar{ background:rgba(46,204,113,.85); }
.badge.besteld{ background:rgba(241,196,15,.85); color:#1b1b1b; text-shadow:none; }
.badge.verkocht{ background:rgba(231,76,60,.85); }

/* ---------------- TITELS / PRIJS ---------------- */

h1{
  margin:0;
  font-family:'Dancing Script', cursive;
  font-size:44px;
  color:#ff4d8d;
  line-height:1.05;
}

.price{
  font-size:26px;
  font-weight:800;
  color:#ff4d8d;
  margin:10px 0;
}

.muted{
  color:#aab3c5;
  line-height:1.6;
}

/* ---------------- MELDING ---------------- */

.notice{
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(46,204,113,.35);
  background:rgba(46,204,113,.12);
  color:#dff6e8;
}

/* ---------------- OPTIES ---------------- */

.options{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.options h2{
  margin:0 0 10px;
  font-size:22px;
  color:#ff4d8d;
  font-family:'Dancing Script', cursive;
  font-weight:700;
}

.opt{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  margin-bottom:10px;
}

.opt label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
  width:100%;
}

.opt input{
  margin-top:3px;
  transform:scale(1.1);
}

.opt-name{ font-weight:700; }

.opt-price{
  color:#ff4d8d;
  font-weight:800;
  white-space:nowrap;
}

/* ---------------- TOTAAL ---------------- */

.totalbox{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.totalbox strong{
  color:#ff4d8d;
  font-size:18px;
}

/* ---------------- BUTTONS ---------------- */

.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  background:#ff4d8d;
  color:#fff;
  font-size:15px;
  margin-top:10px;
  border:0;
  cursor:pointer;
}

.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.sold-note{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#aab3c5;
  font-size:15px;
  margin-top:8px;
}

/* =========================================================
   CART (winkelwagen)
========================================================= */

/* Item rij */
.item{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* Thumbnail in cart */
.thumb{
  width:90px;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:#000;
  display:block;
}

/* Acties onderaan */
.footer-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Outline knop (verwijderen) */
.btn-outline{
  display:inline-block;
  margin-top:8px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  color:var(--muted);
  font-size:14px;
}

.btn-outline:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.4);
}

/* Lijst opties in cart */
.item ul{
  margin:6px 0 0 16px;
  padding:0;
}

.item li{
  font-size:13px;
  color:var(--muted);
}

/* ===============================
   CHECKLIST – ROZE & HANDGESCHREVEN
=============================== */

.checklist{
  list-style:none;        /* geen puntjes */
  padding:0;
  margin:14px 0 0;
}

.checklist li{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:10px;

  font-family:'Dancing Script', cursive; /* handgeschreven */
  font-size:22px;
  color:var(--pink);      /* roze tekst */
}

/* alleen het vinkje zichtbaar */
.checklist li::marker{
  content:none;
}

.checklist i{
  color:var(--pink);      /* roze vinkje */
  font-size:16px;
  flex-shrink:0;
}

.contactlist{
  list-style:none;        /* geen puntjes */
  padding:0;
  margin:14px 0 0;
}