/* Only design tokens here: no loose colours, fonts or sizes. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface-creme);
  color: var(--ink);
  font-family: var(--font-sans);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Homepage middle section: a rounded hero, tiles, promos and example cards,
   laid out on the design-system container, side margins and section rhythm. */
.home {
  flex: 1;
  width: 100%;
  max-width: calc(var(--size-container) + 2 * var(--space-6));
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.home__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.home__title { margin: 0; font: 700 33px/40px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.home__intro { margin: 0; max-width: var(--size-measure); font: 400 16px/26px var(--font-sans); color: var(--ink-muted); }
.home__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.home__products { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home__products .rb-card:hover { transform: none; box-shadow: var(--shadow-1); }
.home__noprice { font: 600 15px/26px var(--font-sans); color: var(--ink-muted); }
.home__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .home .rb-cat, .home .rb-cat:hover, .home .rb-cat-arrow { transform: none; transition: none; }
}

/* Footer: dark, built from the same tokens as the announcement bar. */
.site-footer { background: var(--surface-inverse); color: var(--ink-inverse); padding: var(--space-7) var(--space-6) var(--space-5); }
.site-footer__inner {
  max-width: var(--size-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.site-footer__logo { width: 200px; max-width: 100%; height: auto; display: block; }
.site-footer__title { margin: 0 0 var(--space-4); font: 700 18px/26px var(--font-display); color: var(--ink-inverse); }
.site-footer__text { margin: var(--space-4) 0 0; font: 400 15px/24px var(--font-sans); color: var(--ink-inverse-muted); }
.site-footer__address { font-style: normal; display: grid; gap: var(--space-3); font: 400 15px/24px var(--font-sans); }
.site-footer__line { display: flex; gap: var(--space-3); align-items: flex-start; }
.site-footer__line .rb-icon { color: var(--lichtgroen); }
.site-footer a { color: inherit; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--lichtgroen); }
.site-footer a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring-inverse); }
.site-footer__hours { border-collapse: collapse; font: 400 15px/24px var(--font-sans); }
.site-footer__hours th { text-align: left; font-weight: 600; padding: var(--space-1) var(--space-4) var(--space-1) 0; }
.site-footer__hours td { padding: var(--space-1) 0; color: var(--ink-inverse-muted); }
.site-footer__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-footer__legal { max-width: var(--size-container); margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--olijf-diep); font: 400 13px/20px var(--font-sans); color: var(--ink-inverse-muted); }
@media (max-width: 820px) {
  .home__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home__cats { grid-template-columns: 1fr; }
  .home { padding: var(--space-5) var(--space-4) var(--space-6); gap: var(--space-6); }
  .home__title { font-size: 26px; line-height: 32px; }
  .home__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .site-footer { padding: var(--space-6) var(--space-4) var(--space-4); }
}

/* Opening window: sits over the middle of the mock-up, cannot be closed. */
.opening-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--surface-inverse) 18%, transparent); }
.opening { width: min(100%, 640px); box-sizing: border-box; padding: var(--space-6) var(--space-5); text-align: center; border-radius: var(--radius-l); background: color-mix(in srgb, var(--surface-raised) 82%, transparent); backdrop-filter: blur(2px); box-shadow: var(--shadow-3); color: var(--ink); }
.opening:focus { outline: 2px solid transparent; box-shadow: var(--shadow-3), var(--focus-ring); }
.opening__title { margin: 0 0 var(--space-2); font: 700 32px/40px var(--font-display); }
.opening__date { margin: 0 0 var(--space-5); font: 500 18px/26px var(--font-sans); }
.opening__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.opening__clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.opening__unit { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-2); border-radius: var(--radius-m); background: var(--surface-inverse); color: var(--ink-inverse); }
.opening__num { font: 700 40px/44px var(--font-display); font-variant-numeric: tabular-nums; }
.opening__label { font: 500 14px/20px var(--font-sans); color: var(--ink-inverse-muted); }
@media (max-width: 480px) {
  .opening { padding: var(--space-5) var(--space-4); }
  .opening__title { font-size: 24px; line-height: 30px; }
  .opening__num { font-size: 28px; line-height: 34px; }
  .opening__label { font-size: 12px; }
}
.open-page { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--surface-creme); font: 400 18px/28px var(--font-sans); color: var(--ink); }
.open-page__box { max-width: 560px; padding: var(--space-5); text-align: center; }
.open-page__logo { width: 240px; max-width: 100%; height: auto; }
.open-page__title { font: 700 36px/44px var(--font-display); margin: var(--space-5) 0 var(--space-3); }

/* Newsletter sign-up inside the opening window. */
.signup { margin-top: var(--space-5); display: grid; gap: var(--space-3); text-align: left; }
.signup__intro { margin: 0; font: 500 16px/24px var(--font-sans); text-align: center; }
.signup .rb-btn { width: 100%; }
.signup__error { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--fout); }
.signup__error[hidden] { display: none; }
.signup__ok { margin: 0; font: 600 15px/22px var(--font-sans); text-align: center; }
.signup__ok:empty { display: none; }
.signup__privacy { margin: 0; font: 500 13px/20px var(--font-sans); text-align: center; }
.signup__privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.signup__privacy a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }