:root{
  --blue:#35aee4; --dark:#08375c; --yellow:#ffd200; --cream:#fbfaf5; --text:#102033; --muted:#5c6b7a;
  --radius:28px; --shadow:0 22px 60px rgba(9,55,92,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--cream);color:var(--text)}
a{color:inherit} .wrap{width:min(1180px,calc(100% - 40px));margin:auto}.topbar{position:sticky;top:0;z-index:20;background:rgba(251,250,245,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(53,174,228,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;color:var(--dark)}.logo img{width:215px;max-height:92px;object-fit:contain}.links{display:flex;align-items:center;gap:22px;font-weight:850;color:var(--dark)}.links a{text-decoration:none}.btn{border:0;border-radius:999px;background:var(--yellow);color:#071b2d;font-weight:900;padding:15px 22px;box-shadow:0 7px 0 rgba(8,55,92,.12);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.secondary{background:white;border:2px solid #bde9fb;box-shadow:none;color:var(--dark)}.btn.dark{background:var(--dark);color:white}.btn.small{padding:10px 14px;font-size:.9rem}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center;padding:72px 0 58px}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:950;font-size:.85rem}.hero h1,.big-title{font-size:clamp(3.4rem,8vw,6.4rem);line-height:.88;letter-spacing:-.075em;margin:18px 0 24px;color:var(--dark);font-weight:1000}.hero h1 span{color:var(--blue)}.lead{font-size:1.22rem;line-height:1.55;color:#2f3b4a;max-width:650px}.hero-card{position:relative;background:var(--blue);border-radius:var(--radius);padding:24px;min-height:420px;overflow:hidden;box-shadow:var(--shadow)}.hero-card img{width:100%;height:360px;object-fit:cover;object-position:center;border-radius:22px;background:white}.hero-card:after{content:"";position:absolute;right:-80px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:var(--yellow)}.pill{position:absolute;left:42px;bottom:42px;background:white;color:var(--dark);font-weight:950;border-radius:999px;padding:13px 20px;z-index:2}
.section{padding:64px 0}.split-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:34px}.split-head h2{font-size:clamp(2.8rem,6vw,5rem);line-height:.9;letter-spacing:-.07em;margin:0;color:var(--dark)}.split-head p{font-size:1.1rem;line-height:1.65;color:var(--muted)}
.occasions{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.occasion{border-radius:24px;overflow:hidden;background:white;box-shadow:var(--shadow);min-height:280px;text-decoration:none;display:flex;flex-direction:column}.occasion img{height:210px;width:100%;object-fit:cover;object-position:center;background:#f2f7f7}.occasion .txt{padding:20px}.occasion h3{margin:0 0 8px;color:var(--dark);font-size:1.45rem}.occasion p{margin:0;color:var(--muted);line-height:1.45}/* occasion cards: all four deliberately get a color panel, so the block feels like one family */
.occasion.blue .txt{background:var(--blue)}
.occasion.blue h3,.occasion.blue p{color:white}
.occasion.yellow .txt{background:var(--yellow)}
.occasion.soft .txt{background:#dff5fb}
.occasion.dark .txt{background:var(--dark)}
.occasion.dark h3,.occasion.dark p{color:white}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}.chip{border:1px solid #d7e7ef;background:white;border-radius:999px;padding:10px 14px;font-weight:850;cursor:pointer;color:var(--dark)}.chip.active{background:var(--dark);color:white}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.product{background:white;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}.product img{width:100%;height:310px;object-fit:cover;object-position:center;background:#f2f7f7}.product .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}.meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.category{color:var(--blue);font-weight:900;font-size:.9rem}.price{font-weight:1000;color:var(--dark)}.product h3{font-size:1.55rem;margin:0;color:var(--dark)}.product p{margin:0;color:var(--muted);line-height:1.45}.product .actions{margin-top:auto;display:flex;gap:10px;align-items:center}.added{background:#eaf9ef!important;color:#176b36!important;box-shadow:none!important}
.about{display:grid;grid-template-columns:1fr .95fr;gap:44px;align-items:center;background:var(--blue);border-radius:var(--radius);padding:46px;box-shadow:var(--shadow);color:white}.about h2{font-size:clamp(3rem,6vw,5rem);line-height:.9;letter-spacing:-.06em;margin:0 0 22px}.about p{font-size:1.08rem;line-height:1.6}.about img{width:100%;height:420px;object-fit:cover;border-radius:24px;background:white}
.order{background:white;border-radius:var(--radius);padding:42px;box-shadow:var(--shadow)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{background:#f7fbfd;border-radius:22px;padding:24px}.num{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--yellow);font-weight:1000;color:#071b2d}.drawer{position:fixed;right:20px;bottom:20px;width:min(440px,calc(100% - 40px));background:white;border-radius:24px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.2);z-index:50;display:none}.drawer.open{display:block}.drawer h3{margin:0 0 12px;color:var(--dark)}.selected-list{display:flex;flex-direction:column;gap:8px;margin:12px 0;max-height:260px;overflow:auto}.selected-item{display:flex;justify-content:space-between;gap:10px;background:#f4f8fb;border-radius:14px;padding:10px}.remove{border:0;background:transparent;color:#c33;font-weight:900;cursor:pointer}.float-select{position:fixed;right:20px;bottom:20px;z-index:40}.footer{background:var(--dark);color:white;margin-top:70px;padding:42px 0}.footer img{width:150px}.footer p{color:#d8eaf4}.footer a{color:white;font-weight:900}
@media(max-width:900px){.hero,.split-head,.about{grid-template-columns:1fr}.occasions,.grid,.steps{grid-template-columns:1fr}.links{display:none}.hero{padding-top:42px}.hero-card{min-height:auto}.hero-card img{height:300px}.about{padding:28px}.about img{height:320px}}

/* v3 content refinements */
.product .btn.small{white-space:nowrap;}
.drawer .btn{margin-right:.5rem;margin-top:.7rem;}
.selected-note{width:100%;margin-top:8px;border:1px solid #d7e7ef;border-radius:12px;padding:9px 10px;font:inherit;font-size:.92rem;background:white;}
.selected-item{display:block;}
.selected-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}

/* v4 order refinements */
.selection-total{margin-top:12px;padding:12px 14px;border-radius:14px;background:#fff6c8;color:var(--dark);font-weight:1000;}
.shipping-note{margin:10px 0 4px;color:var(--muted);font-size:.92rem;line-height:1.35;}
.selected-label{display:block;margin-top:8px;color:var(--dark);font-weight:850;font-size:.9rem;}
.selected-qty{width:82px;margin-left:8px;border:1px solid #d7e7ef;border-radius:10px;padding:7px 9px;font:inherit;background:white;}
.selected-item small{color:var(--muted);line-height:1.4;}/* v7 photo presentation: tighter, calmer, no letterbox look */
.product img{height:330px;background:#fbfaf5;object-fit:cover;object-position:center;}
.occasion img{background:#fbfaf5;object-position:center;}
.hero-card img{object-position:center;}

/* v8 layout balance: logo alignment, footer consistency, safer scroll anchors */
[id]{scroll-margin-top:130px;}
.topbar{min-height:96px;}
.nav{min-height:96px;padding:12px 0;}
.logo img{width:170px;max-height:82px;object-fit:contain;display:block;}
.footer{margin-top:70px;padding:34px 0;}
.footer .wrap{width:min(1180px,calc(100% - 40px));}
.footer-inner{display:flex;align-items:center;justify-content:flex-start;gap:26px;min-height:110px;}
.footer-logo{width:150px;height:auto;max-height:92px;object-fit:contain;display:block;flex:0 0 auto;}
.footer-copy{display:flex;flex-direction:column;gap:4px;}
.footer-copy h2{margin:0;color:white;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;letter-spacing:-.04em;}
.footer-copy p{margin:0;color:#d8eaf4;line-height:1.45;}
.footer-small{font-size:.95rem;opacity:.85;}

/* v8 category cards: all four feel like one visual family */
.occasion.soft .txt{background:#dff5fb;}
.occasion.dark .txt{background:var(--dark);}
.occasion.dark h3,.occasion.dark p{color:white;}
.occasion.soft h3{color:var(--dark);}
.occasion.soft p{color:#3e596f;}

/* v8 product images: fill the image box calmly and keep product centered */
.product img{height:320px;object-fit:cover;object-position:center center;background:#fff;}
.occasion img{height:205px;object-fit:cover;object-position:center center;background:#fff;}
.hero-card img{object-fit:cover;object-position:center 55%;background:#fff;}

@media(max-width:900px){
  [id]{scroll-margin-top:105px;}
  .topbar{min-height:86px;}
  .nav{min-height:86px;justify-content:center;padding:8px 0;}
  .logo img{width:132px;max-height:74px;}
  .hero h1,.big-title{font-size:clamp(3.0rem,15vw,5rem);letter-spacing:-.065em;}
  .split-head h2{font-size:clamp(2.4rem,13vw,4.4rem);letter-spacing:-.06em;}
  .section{padding:44px 0;}
  .footer-inner{align-items:flex-start;gap:18px;}
  .footer-logo{width:120px;max-height:80px;}
  .footer-copy h2{font-size:1.6rem;}
}
@media(max-width:560px){
  .wrap{width:min(100% - 28px,1180px);}  
  .hero{padding:38px 0 42px;gap:34px;}
  .hero h1{font-size:clamp(3.1rem,18vw,4.6rem);}
  .lead{font-size:1.05rem;}
  .hero-card{padding:16px;min-height:auto;border-radius:22px;}
  .hero-card img{height:260px;border-radius:18px;}
  .pill{left:28px;bottom:28px;}
  .split-head{gap:18px;margin-bottom:24px;}
  .split-head h2{font-size:clamp(2.7rem,14vw,4rem);line-height:.92;}
  .steps{gap:14px;}
  .step{padding:20px;}
  .footer-inner{flex-direction:row;align-items:center;}
  .footer-logo{width:98px;max-height:68px;}
  .footer-copy h2{font-size:1.28rem;}
}

/* v9 fixes: no distorted photos, stronger logo, category cards as one family, simpler ordering text */
.logo img{width:230px;max-height:105px;}
.topbar{min-height:118px;}
.nav{min-height:118px;padding:10px 0;}
.footer-logo{width:135px;max-height:82px;}
.footer-inner{min-height:90px;align-items:center;}

.occasion{display:flex;flex-direction:column;min-height:360px;}
.occasion img{height:205px;object-fit:cover;object-position:center center;background:#fbfaf5;}
.occasion .txt{flex:1;display:flex;flex-direction:column;justify-content:flex-start;}
.occasion.blue .txt{background:var(--blue)}
.occasion.yellow .txt{background:var(--yellow)}
.occasion.soft .txt{background:#dff5fb}
.occasion.dark .txt{background:var(--dark)}
.occasion.dark h3,.occasion.dark p,.occasion.blue h3,.occasion.blue p{color:white}
.occasion.yellow h3,.occasion.soft h3{color:var(--dark)}
.occasion.yellow p,.occasion.soft p{color:#3e596f}

.product img{height:320px;object-fit:cover;object-position:center center;background:#fbfaf5;}
.hero-card img{object-fit:cover;object-position:center center;background:#fbfaf5;}
.split-head p{font-size:1.05rem;line-height:1.55;}
#bestellen .split-head p{max-width:620px;}

@media(max-width:900px){
  .logo img{width:160px;max-height:90px;}
  .topbar{min-height:96px;}
  .nav{min-height:96px;}
  .footer-logo{width:110px;max-height:76px;}
}


/* v10 strict photo cards: fill the box without stretching */
.logo img{width:270px;max-height:122px;}
.topbar{min-height:136px;}
.nav{min-height:136px;}
.product img,.occasion img,.hero-card img,.about img{width:100%;display:block;object-fit:cover;object-position:center center;background:#fff;}
.product img{height:330px;}
.occasion img{height:220px;}
.hero-card img{height:360px;}
.occasion{min-height:370px;}
.occasion .txt{flex:1;min-height:150px;}
#bestellen .split-head p{font-size:1.06rem;line-height:1.55;max-width:620px;}
@media(max-width:900px){.logo img{width:185px;max-height:100px}.topbar{min-height:108px}.nav{min-height:108px}.product img{height:300px}.occasion img{height:220px}}


/* v11 refinements from review */
.hero-card img{transform:scale(-1,-1);}
/* fine-tune only the few product photos that cropped awkwardly */
.product-klaas-konijn-kopjes img{object-position:center 38%;}
.product-maanhanger img{object-position:center 42%;}
.product-konijn-rammelaar-grijs img{object-position:center 38%;}
.product-bloem-en-aardbei-hangers img{object-position:center 82%;}
.product-aardbei-bloem-hangers img{object-position:center 72%;}
.product-klein-bloemenboeketje img{object-position:center 58%;}
.product-regenboog-sleutelhangers img{object-position:center 48%;}