/* Cheapp SEO deal pages — brand tokens per Cheapp Design System (web/bier-*.html) */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('/aanbiedingen/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/aanbiedingen/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('/aanbiedingen/assets/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-display: swap; src: url('/aanbiedingen/assets/fonts/poppins-800.woff2') format('woff2'); }
:root {
  --c-ink: #0f3e46;
  --c-ink-soft: #37474f;
  --c-bg: #f2f8f9;
  --c-card: #ffffff;
  --c-orange: #f48741;
  --c-cta: #f48741;
  --c-cyan: #0891b2;
  --c-mint: #45d9c5;
  --c-mint-soft: #dffdff;
  --c-muted: #7c93a0;
  --shadow-card: 0 10px 30px rgba(15, 62, 70, .10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', -apple-system, sans-serif; background: var(--c-bg); color: var(--c-ink); }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Topbar */
.topbar { background: var(--c-card); border-bottom: 1px solid rgba(15,62,70,.08); }
.topbar .wrap { display: flex; align-items: center; gap: 32px; height: 68px; }
.topbar img.logo { height: 34px; }
.topbar nav { display: flex; gap: 24px; font-size: 15px; font-weight: 600; color: var(--c-ink-soft); }
.topbar nav a.active { color: var(--c-cyan); }
.topbar .cta { margin-left: auto; background: var(--c-cta); color: #fff; font-weight: 700; font-size: 15px; padding: 10px 20px; border-radius: 999px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--c-mint-soft); }
.hero .bg { position: absolute; inset: 0; background: url('/aanbiedingen/assets/brand/bg-supermarkt.svg') repeat-x bottom / auto 88%; opacity: .35; pointer-events: none; }
.hero .wrap { position: relative; padding: 56px 24px 48px; }
.hero .hero-flex { display: flex; align-items: center; gap: 48px; padding-bottom: 56px; }
.breadcrumb { font-size: 13px; color: var(--c-muted); font-weight: 600; margin-bottom: 16px; }
.breadcrumb b, .breadcrumb a:hover { color: var(--c-cyan); }
h1 { font-size: 44px; font-weight: 800; line-height: 1.1; max-width: 680px; }
h1 em { font-style: normal; color: var(--c-cta); }
.hero p.sub { margin-top: 14px; font-size: 17px; color: var(--c-ink-soft); max-width: 580px; }
.hero .updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; background: var(--c-card); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--c-ink-soft); box-shadow: var(--shadow-card); }
.hero .updated .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-mint); }
.hero .storebadge { flex: none; width: 168px; height: 168px; background: var(--c-card); border-radius: 32px; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; }
.hero .storebadge img { width: 110px; }
.hero .storebadge .fallback { font-size: 56px; font-weight: 800; color: var(--c-cyan); }

/* Deal van de week — zijkaart in de hero (hub) */
.hero .dealside { flex: none; width: 46%; max-width: 560px; background: var(--c-card); border-radius: 24px; box-shadow: var(--shadow-card); padding: 26px 30px; display: flex; gap: 24px; align-items: center; }
.hero .dealside .shot { width: 140px; height: 140px; object-fit: contain; flex: none; }
.hero .dealside .kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--c-cyan); }
.hero .dealside h2 { font-size: 20px; font-weight: 700; margin-top: 6px; line-height: 1.25; }
.hero .dealside .new { font-size: 28px; }
.priceline { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.priceline .old { font-size: 18px; color: var(--c-muted); text-decoration: line-through; font-weight: 600; }
.priceline .new { font-size: 34px; font-weight: 800; color: var(--c-cta); }
.pct { background: var(--c-orange); color: #fff; font-weight: 800; font-size: 15px; border-radius: 10px; padding: 4px 10px; }
.dealcheck { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; background: var(--c-mint-soft); color: var(--c-ink); font-size: 13px; font-weight: 600; border-radius: 999px; padding: 7px 14px; }
.storechip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--c-ink-soft); }
.storechip img { height: 22px; }

/* Secties */
section.wrap { padding: 72px 24px 8px; }
.sechead { margin-bottom: 8px; }
h3.sectitle { font-size: 26px; font-weight: 800; }
.sechead p.seclead { font-size: 15px; color: var(--c-ink-soft); margin-top: 6px; max-width: 640px; }

/* Dealgrid (hub, beste deal per supermarkt) */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.deal { background: var(--c-card); border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px; display: flex; flex-direction: column; }
.deal .storehead { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(15,62,70,.07); }
.deal .storehead img { height: 24px; }
.deal .storehead .storename { font-weight: 700; font-size: 15px; }
.fallback { width: 26px; height: 26px; border-radius: 8px; background: var(--c-mint-soft); color: var(--c-cyan); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.deal .imgwrap { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; margin-top: 12px; }
.deal .imgwrap img.product { max-height: 120px; object-fit: contain; }
.deal .imgwrap .pct { position: absolute; top: 0; right: 0; font-size: 13px; }
.deal .name { font-size: 14px; font-weight: 600; line-height: 1.35; margin-top: 10px; min-height: 38px; }
.deal .priceline { margin-top: 8px; }
.deal .priceline .old { font-size: 13px; }
.deal .priceline .new { font-size: 22px; }
.scorepill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--c-mint-soft); color: var(--c-ink); align-self: flex-start; margin-top: 10px; }
.scorepill.top { background: var(--c-orange); color: #fff; }
.deal .more { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15,62,70,.07); font-size: 13px; font-weight: 700; color: var(--c-cyan); }
.deal .more::after { content: ' →'; }

/* Merk-ingangen (hub) */
.brandgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.brandcard { display: flex; align-items: center; gap: 16px; background: var(--c-card); border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px 20px; }
.brandcard img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.brandcard .noimg { width: 64px; height: 64px; border-radius: 14px; background: var(--c-mint-soft); color: var(--c-cyan); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex: none; }
.brandcard b { font-size: 16px; display: block; }
.brandcard .bestline { font-size: 13px; color: var(--c-ink-soft); margin-top: 3px; display: block; }
.brandcard .bestline strong { color: var(--c-cta); }
.brandcard .link { font-size: 13px; font-weight: 700; color: var(--c-cyan); margin-top: 6px; display: block; }
.brandcard .link::after { content: ' →'; }

/* Combi-ingangen */
.combi { background: var(--c-card); border-radius: 24px; box-shadow: var(--shadow-card); padding: 32px 36px; margin-top: 20px; }
.combi .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.combi h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.combi ul { list-style: none; }
.combi li { margin-bottom: 8px; }
.combi li a { font-size: 13px; font-weight: 600; color: var(--c-cyan); }

/* Toplijst (store/brand/combi-pagina's) */
.toplist { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.toprow { display: flex; align-items: center; gap: 22px; background: var(--c-card); border-radius: 18px; box-shadow: var(--shadow-card); padding: 16px 26px 16px 18px; }
.toprow .rank { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--c-mint-soft); color: var(--c-cyan); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.toprow .shot { flex: none; width: 84px; height: 84px; object-fit: contain; }
.toprow .info { flex: 1; min-width: 0; }
.toprow .name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.toprow .size { font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.toprow .dealstore { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c-ink-soft); margin-left: 10px; }
.toprow .prices { flex: none; text-align: right; }
.toprow .old { font-size: 14px; color: var(--c-muted); text-decoration: line-through; font-weight: 600; }
.toprow .new { font-size: 26px; font-weight: 800; color: var(--c-cta); display: block; }
.toprow .pct { flex: none; }
.toprow.first { border: 2px solid var(--c-mint); padding-top: 22px; padding-bottom: 22px; position: relative; }
.toprow.first .rank { background: var(--c-orange); color: #fff; }
.toprow.first .shot { width: 110px; height: 110px; }
.toprow.first .name { font-size: 18px; }
.toprow.first .new { font-size: 32px; }
.toprow.first .crown { position: absolute; top: -13px; left: 22px; background: var(--c-mint); color: var(--c-ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; }

/* Teaser */
.teaser { display: flex; align-items: center; gap: 24px; background: linear-gradient(105deg, var(--c-ink) 0%, #17545e 100%); color: #fff; border-radius: 20px; padding: 26px 32px; margin-top: 22px; }
.teaser p { font-size: 15px; line-height: 1.5; max-width: 620px; }
.teaser b { color: var(--c-mint); }
.teaser .cta { margin-left: auto; flex: none; background: var(--c-cta); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 999px; }

/* Lege staat */
.empty-state { background: var(--c-card); border-radius: 20px; box-shadow: var(--shadow-card); padding: 36px 40px; }
.empty-state p { font-size: 15px; color: var(--c-ink-soft); margin-top: 10px; line-height: 1.55; max-width: 640px; }
.empty-state a { color: var(--c-cyan); font-weight: 700; }

/* Cross-nav chips */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.chip { display: inline-flex; align-items: center; gap: 10px; background: var(--c-card); border: 1.5px solid rgba(15,62,70,.10); border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-card); }
.chip img { height: 20px; }

/* USP-band */
.uspband { background: var(--c-ink); color: #fff; border-radius: 28px; padding: 44px 48px; margin-top: 56px; }
.uspband h3 { font-size: 26px; font-weight: 800; }
.usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 28px; }
.usp .icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(69,217,197,.18); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.usp b { display: block; font-size: 16px; margin-bottom: 6px; }
.usp p { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.5; }

/* App CTA */
.appcta { display: flex; align-items: center; gap: 40px; background: var(--c-card); border-radius: 28px; box-shadow: var(--shadow-card); padding: 40px 48px; margin-top: 72px; }
.appcta h3 { font-size: 24px; font-weight: 800; max-width: 420px; }
.appcta p { font-size: 15px; color: var(--c-ink-soft); margin-top: 10px; max-width: 460px; }
.badges { display: flex; gap: 12px; margin-left: auto; }
.badges img { height: 48px; }

/* FAQ */
.faq { max-width: 760px; margin-top: 20px; }
.faq details { background: var(--c-card); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px 22px; margin-bottom: 12px; }
.faq summary { font-weight: 700; font-size: 15px; cursor: pointer; }
.faq p { font-size: 14px; color: var(--c-ink-soft); margin-top: 10px; line-height: 1.55; }

/* Footer */
footer { margin-top: 72px; background: var(--c-card); border-top: 1px solid rgba(15,62,70,.08); padding: 32px 0 40px; }
footer .wrap { display: flex; align-items: center; gap: 24px; }
footer img.logo { height: 54px; }
footer .links { display: flex; gap: 20px; font-size: 13px; color: var(--c-muted); font-weight: 600; margin-left: auto; }
footer .payoff { font-size: 13px; color: var(--c-muted); }

@media (max-width: 900px) {
  h1 { font-size: 30px; }
  .topbar .wrap { flex-wrap: wrap; height: auto; padding: 12px 16px; row-gap: 8px; gap: 16px; }
  .topbar nav { gap: 16px; font-size: 14px; }
  .topbar .cta { font-size: 13px; padding: 8px 14px; }
  .hero.hero-hub .hero-flex { flex-direction: column; align-items: flex-start; }
  .grid, .brandgrid { grid-template-columns: repeat(2, 1fr); }
  .combi .cols { grid-template-columns: repeat(2, 1fr); }
  .usps { grid-template-columns: 1fr; }
  .hero .dealside { width: 100%; max-width: none; flex-direction: column; text-align: center; }
  .hero .dealside .priceline { justify-content: center; }
  .hero .hero-flex { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
  .hero .storebadge { width: 96px; height: 96px; border-radius: 22px; }
  .hero .storebadge img { width: 64px; }
  .toprow { flex-wrap: wrap; }
  .toprow .prices { text-align: left; }
  .teaser { flex-direction: column; align-items: flex-start; }
  .teaser .cta { margin-left: 0; }
  .appcta { flex-direction: column; text-align: center; }
  .badges { margin: 0 auto; }
}
@media (max-width: 560px) {
  .grid, .brandgrid { grid-template-columns: 1fr; }
  .combi .cols { grid-template-columns: 1fr; }
  h1 { font-size: 26px; }
}

/* Homepage */
.home-hero .wrap { display: flex; align-items: center; gap: 48px; padding: 72px 24px; }
.home-hero .phone { flex: none; width: 300px; }
.home-hero .phone img { width: 100%; filter: drop-shadow(0 24px 40px rgba(15,62,70,.22)); }
.btnrow { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.btn-primary { background: var(--c-cta); color: #fff; font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 999px; }
.btn-ghost { background: var(--c-card); color: var(--c-ink); font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 999px; border: 1.5px solid rgba(15,62,70,.14); }
.screens { display: flex; justify-content: center; gap: 32px; margin-top: 20px; flex-wrap: wrap; }
.screens img { width: 240px; border-radius: 24px; box-shadow: var(--shadow-card); }
.reviewgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.review { background: var(--c-card); border-radius: 18px; box-shadow: var(--shadow-card); padding: 20px 22px; }
.review .stars { color: var(--c-orange); font-size: 15px; letter-spacing: 2px; }
.review p { font-size: 14px; color: var(--c-ink-soft); line-height: 1.5; margin-top: 10px; }
.review .who { font-size: 13px; font-weight: 700; margin-top: 12px; }
.contact { background: var(--c-card); border-radius: 24px; box-shadow: var(--shadow-card); padding: 36px 40px; margin-top: 20px; max-width: 640px; }
.contact label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.contact input, .contact textarea { width: 100%; border: 1.5px solid rgba(15,62,70,.14); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 14px; background: var(--c-bg); color: var(--c-ink); }
.contact input:focus, .contact textarea:focus { outline: 2px solid var(--c-cyan); border-color: transparent; }
.contact button { margin-top: 18px; background: var(--c-cta); color: #fff; font: inherit; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer; }
@media (max-width: 900px) {
  .home-hero .wrap { flex-direction: column-reverse; }
  .home-hero .phone { width: 220px; }
  .reviewgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .reviewgrid { grid-template-columns: 1fr; }
}