/* Gedeelde stijl voor de Dokter Love-subpagina's (pakketten, vacatures, privacy, voorwaarden).
   BEWUST een apart bestand: de homepage (views/dokterloveshop-home.html) heeft zijn eigen
   inline <style> en wordt hier NIET door geraakt. Zelfde ontwerptokens, zodat het één merk blijft. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --rose:#e83a5a;--rose-deep:#c31d3e;--pink:#ff8fab;--peach:#ffb678;
  --cream:#fff5ea;--cream-2:#ffe7cf;--paper:#fffdf8;
  --ink:#2b1a26;--green:#1f8a4c;--green-deep:#0e3b1f;--blue:#1f5fd0;--gold:#f6c34b;
  --bd:3px solid var(--ink);
  --pop:6px 6px 0 var(--ink);
}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.display{font-family:'Baloo 2',cursive;font-weight:800;line-height:.98;letter-spacing:-.01em}

/* ── OPENING SOON-balk ── */
.soon{background:var(--gold);border-bottom:var(--bd);padding:9px 0;overflow:hidden}
.soon .in{display:flex;align-items:center;justify-content:center;gap:12px;font-family:'Baloo 2',cursive;font-weight:800;font-size:14px;text-align:center;flex-wrap:wrap}
.soon .dot{width:9px;height:9px;border-radius:50%;background:var(--rose);border:2px solid var(--ink);flex:none;animation:blip 1.6s ease-in-out infinite}
@keyframes blip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:1240px;margin:0 auto;padding:0 28px;gap:20px}
.logo{display:flex;align-items:center;gap:12px}
.logo .emblem{width:38px;height:38px;border-radius:50%;background:var(--rose);border:var(--bd);flex:none;position:relative}
.logo .emblem::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:4px;background:var(--cream);border-radius:2px}
.logo .emblem::before{content:"";position:absolute;inset:0;margin:auto;width:4px;height:16px;background:var(--cream);border-radius:2px}
.logo .txt{font-family:'Baloo 2',cursive;font-weight:800;font-size:23px;letter-spacing:-.01em;line-height:.9}
.logo .txt small{display:block;font-family:'Nunito';font-weight:700;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
.nav-links{display:flex;gap:26px;font-weight:700;font-size:15px}
.nav-links a:hover{color:var(--rose)}
.nav-cta{background:var(--rose);color:var(--cream);font-family:'Baloo 2',cursive;font-weight:700;font-size:12.5px;padding:7px 15px;border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);transition:.12s;display:inline-block}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
@media(max-width:820px){.nav-links{display:none}}

/* ── PAGINAKOP ── */
.phead{position:relative;background:radial-gradient(80% 60% at 80% 10%,rgba(255,143,171,.4),transparent 60%),radial-gradient(70% 50% at 0% 90%,rgba(255,182,120,.4),transparent 55%),var(--cream);padding:52px 0 46px;border-bottom:var(--bd);overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;opacity:.06;background-image:radial-gradient(var(--ink) 1.4px,transparent 1.5px);background-size:15px 15px;pointer-events:none}
.phead .in{position:relative;max-width:74ch}
.burst{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--ink);font-family:'Baloo 2',cursive;font-weight:700;font-size:13px;padding:8px 16px;border:var(--bd);border-radius:999px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-3deg)}
.phead h1{font-size:clamp(32px,4.4vw,48px);line-height:1.08;margin:18px 0 0}
.phead h1 .r{color:var(--rose)}
.phead p.lead{font-size:18px;line-height:1.55;margin-top:16px;font-weight:600;max-width:62ch}
.crumb{font-size:13px;font-weight:700;color:var(--rose);margin-bottom:4px}
.crumb a:hover{text-decoration:underline}

/* ── SECTIES ── */
section{padding:64px 0}
h2.sec{font-family:'Baloo 2',cursive;font-weight:800;font-size:clamp(26px,3vw,36px);margin-bottom:10px}
h3{font-family:'Baloo 2',cursive;font-weight:800;font-size:21px;margin:26px 0 8px}
p{line-height:1.65;font-weight:500}
section p+p{margin-top:12px}
.sec-lead{font-size:17px;font-weight:600;max-width:62ch;margin-bottom:34px}

/* ── PAKKETKAARTEN ── */
.pak{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:960px){.pak{grid-template-columns:1fr}}
.card{background:var(--paper);border:var(--bd);border-radius:22px;box-shadow:var(--pop);padding:28px;display:flex;flex-direction:column;position:relative}
.card.best{background:linear-gradient(180deg,var(--cream-2),var(--paper))}
.card .tag{position:absolute;top:-15px;right:20px;background:var(--rose);color:var(--cream);font-family:'Baloo 2',cursive;font-weight:800;font-size:12px;padding:6px 13px;border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink)}
.card .nm{font-family:'Baloo 2',cursive;font-weight:800;font-size:25px}
.card .pr{font-family:'Baloo 2',cursive;font-weight:800;font-size:40px;color:var(--rose);margin:6px 0 2px;line-height:1}
.card .pr small{font-size:14px;color:var(--ink);font-weight:700}
.card ul{list-style:none;margin:18px 0 0;display:grid;gap:9px}
.card li{display:flex;gap:9px;align-items:flex-start;font-weight:600;font-size:15px;line-height:1.4}
.card li::before{content:"♥";color:var(--rose);font-weight:800;flex:none}
.card .btm{margin-top:auto;padding-top:22px}
.card .btm .nav-cta{width:100%;text-align:center;font-size:14px;padding:11px 15px}

/* ── VACATURES ── */
.vacs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.vac{background:var(--paper);border:var(--bd);border-radius:20px;box-shadow:var(--pop);padding:26px;display:flex;flex-direction:column}
.vac .ico{font-size:34px;line-height:1}
.vac .tags{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 12px}
.vac .tag2{background:var(--cream-2);border:2px solid var(--ink);border-radius:999px;font-size:11.5px;font-weight:800;padding:4px 10px}
.vac p{font-size:15px}
.vac .btm{margin-top:auto;padding-top:20px}

/* ── PROZA (privacy / voorwaarden) ── */
.prose{max-width:78ch}
.prose h2{font-family:'Baloo 2',cursive;font-weight:800;font-size:25px;margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose ul{margin:10px 0 0 22px;display:grid;gap:7px}
.prose li{line-height:1.6;font-weight:500}
.prose .box{background:var(--paper);border:var(--bd);border-radius:18px;box-shadow:var(--pop);padding:22px 24px;margin:24px 0}
.prose .box strong{font-family:'Baloo 2',cursive;font-size:17px}
.prose table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.prose td{padding:7px 0;vertical-align:top;font-weight:500}
.prose td:first-child{width:190px;font-weight:800}
.upd{font-size:13px;font-weight:700;color:var(--rose);margin-top:34px}

/* ── FOOTER ── */
footer{background:var(--ink);color:rgba(255,245,234,.66);padding:46px 0;font-weight:600}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap}
.foot-in .logo .txt{color:var(--cream)}
.foot-col{font-size:13px;line-height:1.75;max-width:38ch}
.foot-col a:hover{color:var(--gold)}
.foot-col .hd{font-family:'Baloo 2',cursive;font-weight:800;font-size:15px;color:var(--cream);margin-bottom:6px}
.foot-in a.pw{color:var(--gold)}
.foot-legal{border-top:1px solid rgba(255,245,234,.16);margin-top:30px;padding-top:18px;font-size:12px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.soon .dot{animation:none}}

/* ── Pakketfoto's (sfeerbeeld) ── */
.shot{margin:-6px 0 16px;border:var(--bd);border-radius:16px;overflow:hidden;background:var(--cream-2);position:relative}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.shot figcaption{position:absolute;left:10px;bottom:10px;background:rgba(43,26,38,.82);color:var(--cream);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.shot.wide{max-width:520px}

/* ── Mobiel: harde breedtes losl aten ──
   .prose td:first-child stond vast op 190px. Op een 320px-scherm blijft er dan te weinig
   over voor de waarde en loopt de tabel buiten beeld (horizontaal scrollen op de body).
   Onder 640px zetten we de tabel om naar gestapelde rijen. Lange codes zonder spatie
   (btw-nummer, e-mailadres) mogen overal afbreken. */
.prose td, .prose p, .foot-legal, .foot-col{overflow-wrap:anywhere}
@media(max-width:640px){
  .prose table, .prose tbody, .prose tr, .prose td{display:block;width:100%}
  .prose td:first-child{width:auto;padding-bottom:0}
  .prose tr{padding:8px 0;border-bottom:1px solid rgba(43,26,38,.12)}
  .wrap{padding:0 18px}
  section{padding:44px 0}
  .card{padding:22px}
}