/* 2026 design preview: warm editorial storefront on the existing order flow. */
:root {
  --page: #f8f7f1;
  --paper: #fffefa;
  --forest: #183d2b;
  --forest-deep: #103120;
  --sage: #e8eee1;
  --lime: #dded90;
  --line-warm: #e5e8dd;
  --muted: #59685a;
  --display: Georgia, "Times New Roman", serif;
  --fl-wrap: 1240px;
}

body { background: var(--page); color: var(--forest-deep); }
.wrap { padding-inline: clamp(20px, 4vw, 48px); }
a { color: var(--forest); }

/* The preview label is deliberately visible: orders never reach the kitchen. */
.topstrip { background: var(--forest); color: #fff; padding: 9px 0; font-size: 12px; letter-spacing: .015em; }
.topstrip p { color: #fff; font-weight: 500; }
.topstrip-divider { color: var(--lime); margin-inline: 5px; }
.topstrip a { color: #fff; font-weight: 500; }
.topstrip a:hover { color: var(--lime); }
.topstrip a:focus-visible { outline-color: #fff; }
.topstrip img { filter: brightness(0) invert(1); }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line-warm); }
.site-header[data-stuck="true"] { box-shadow: 0 8px 26px #183d2b12; }
.header-inner { padding-top: 20px; padding-bottom: 20px; }
.site-header[data-stuck="true"] .header-inner { padding-top: 10px; padding-bottom: 10px; }
.logo img { width: 182px; }
.site-header[data-stuck="true"] .logo img { width: 150px; }
.cart-toggle { border: 1px solid var(--line-warm); border-radius: 100px; box-shadow: none; padding: 11px 15px 11px 18px; background: #fff; font-size: 13px; }
.cart-toggle:hover { background: var(--sage); border-color: #adbf9d; }
.cart-toggle .cart-count { background: var(--forest); min-width: 22px; font-size: 12px; }
.cart-toggle .cart-subtotal { color: var(--forest); }

.main-nav { background: var(--paper); border-bottom: 1px solid var(--line-warm); }
.main-nav ul { gap: 22px; min-height: 52px; }
.main-nav a, .main-nav button { color: var(--forest) !important; text-transform: none; font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 9px 2px; border-radius: 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav button:hover { color: var(--fl-green-strong-hover) !important; background: none; border-bottom-color: var(--forest); }
@media (min-width: 768px) { .main-nav li:last-child button { display: none; } }

/* Hero: product photography is given its own space rather than covered by a tint. */
.hero-band { padding: 0; color: var(--forest-deep); background: #edf1e5; overflow: hidden; }
.hero-layout { min-height: 555px; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: stretch; gap: 38px; }
.hero-inner { min-height: 555px; align-items: flex-start; gap: 0; padding: 55px 0 48px; position: relative; z-index: 1; }
.eyebrow, .section-kicker { color: var(--fl-green-strong-hover); font-weight: 700; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 27px; }
.eyebrow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fl-green); box-shadow: 0 0 0 5px #d7e8c6; }
.hero-band h1 { font-family: var(--display); font-size: clamp(49px, 5vw, 79px); line-height: .98; letter-spacing: -.055em; font-weight: 400; color: var(--forest-deep); max-width: 660px; margin: 0 0 27px; }
.hero-band h1 em { color: var(--fl-green-strong); font-weight: 400; }
.hero-usp { color: #3c5240; font-size: 15px; line-height: 1.8; font-weight: 400; max-width: 480px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 19px; }
.hero-cta { margin: 0; border-radius: 100px; padding: 14px 22px; font-size: 13px; gap: 22px; box-shadow: none; }
.hero-cta span { font-size: 19px; line-height: 1; font-weight: 400; }
.hero-text-link { background: none; border: 0; border-bottom: 1px solid var(--forest); padding: 11px 0 8px; color: var(--forest); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.hero-text-link:hover { color: var(--fl-green-strong-hover); border-color: currentColor; }
.hero-text-link span { margin-left: 9px; }
.hero-smallprint { margin: 38px 0 0; font-size: 11px; font-weight: 600; color: #4e624d; }
.hero-smallprint span { color: var(--fl-green-dark); margin-inline: 8px; }
.hero-visual { position: relative; min-height: 555px; align-self: stretch; }
.hero-photo { position: absolute; inset: 24px -12vw 24px 0; background: url("../img/hero/broodjesservice.jpg") center / cover no-repeat; border-radius: 220px 0 0 220px; }
.hero-sticker { position: absolute; right: -15px; bottom: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 113px; height: 113px; border-radius: 50%; background: var(--lime); color: var(--forest); transform: rotate(12deg); box-shadow: 0 12px 30px #183d2b25; line-height: 1; }
.hero-sticker span { font-family: var(--display); font-style: italic; font-size: 23px; }
.hero-sticker strong { font-family: var(--display); font-style: italic; font-size: 30px; }

.benefit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line-warm); border-radius: 20px; transform: translateY(-1px); box-shadow: 0 12px 32px #183d2b08; }
.benefit { display: flex; align-items: center; gap: 15px; padding: 25px 31px; }
.benefit + .benefit { border-left: 1px solid var(--line-warm); }
.benefit-icon { width: 45px; height: 45px; border-radius: 50%; background: var(--sage); display: grid; place-items: center; color: var(--forest); font-size: 25px; flex: 0 0 auto; }
.benefit div { display: flex; flex-direction: column; }
.benefit strong { font-size: 13px; }
.benefit div span { color: var(--muted); font-size: 11px; margin-top: 2px; }

.discover { padding: 93px 0 88px; }
.section-head, .shop-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 29px; }
.section-head h2, .shop-heading h2 { font-family: var(--display); font-weight: 400; font-size: clamp(35px, 3.5vw, 54px); line-height: 1.02; letter-spacing: -.045em; margin: 12px 0 0; color: var(--forest-deep); }
.section-head p, .shop-heading p { max-width: 350px; margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.discover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.discover-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-warm); border-radius: 16px; background: #fff; padding: 0; color: var(--forest); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 5px 20px #183d2b08; transition: transform .22s ease, box-shadow .22s ease; }
.discover-card:hover, .discover-card:focus-visible { transform: translateY(-5px); box-shadow: 0 15px 30px #183d2b18; }
.discover-card img { width: 100%; aspect-ratio: 1.62; object-fit: cover; background: #f1eee6; }
.discover-card:first-child img { object-position: center 42%; }
.discover-copy { position: relative; display: grid; gap: 7px; min-height: 100px; padding: 17px 54px 21px 22px; }
.discover-number { color: var(--fl-green-strong-hover); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.discover-copy strong { font-family: var(--display); font-size: 25px; font-weight: 400; line-height: 1.1; letter-spacing: -.025em; }
.discover-arrow { position: absolute; right: 18px; bottom: 19px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #c8d5be; display: grid; place-items: center; font-size: 16px; }

.shop-heading { padding-top: 4px; }
.toolbar { padding: 24px; background: var(--paper); border: 1px solid var(--line-warm); border-radius: 20px; scroll-margin-top: 90px; }
.group-switch { gap: 6px; }
.group-btn, .chip { border: 1px solid #d5ddcf; background: #fff; color: var(--forest); font-size: 12px; padding: 9px 15px; }
.group-btn:hover, .chip:hover { border-color: var(--fl-green-strong); background: var(--sage); }
.group-btn[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); box-shadow: none; }
.search-field label { color: var(--forest); font-size: 11px; }
.search-field input { border: 1px solid #d5ddcf; border-radius: 10px; padding: 10px 14px; font-size: 12px; }
.chip-row { padding-top: 19px; }
.result-count { margin-top: 17px; font-size: 11px; color: var(--muted); }
.product-grid { gap: 18px; padding-top: 22px; padding-bottom: 54px; }
.product-card { border: 1px solid var(--line-warm); border-radius: 16px; box-shadow: 0 5px 19px #183d2b08; background: var(--paper); }
.product-media { aspect-ratio: 1.42; background: #f3f1e9; }
.product-media img { object-fit: cover; transition: transform .3s ease; }
@media (hover: hover) { .product-card:hover .product-media img { transform: scale(1.045); } }
.product-body { padding: 20px 21px 22px; }
.product-body h3 { font-family: var(--display); font-size: 26px; font-weight: 400; letter-spacing: -.02em; margin-bottom: 8px; }
.product-desc { color: var(--muted); font-size: 12px; line-height: 1.6; min-height: 38px; }
.option-row { border-top-color: var(--line-warm); }
.option-label { font-size: 11px; }
.option-price { color: var(--forest); font-size: 13px; }
.btn { background: var(--forest); border-color: var(--forest); border-radius: 100px; box-shadow: none; font-size: 12px; }
.btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); box-shadow: 0 9px 18px #183d2b24; }
.btn-secondary { color: var(--forest) !important; background: #fff; }
.btn-small { padding: 8px 13px; border-radius: 100px; }
.stepper { border-color: var(--forest); border-radius: 100px; }
.stepper button { color: var(--forest); }

.usp-strip { justify-content: center; gap: 30px; padding: 30px 0 58px; border-top: 1px solid var(--line-warm); }
.usp-strip .usp { color: var(--forest); font-size: 11px; }
.usp-strip img { width: 30px; height: 30px; }
.site-footer { margin-top: 20px; background: var(--forest-deep); color: #fff; padding: 40px 0; font-size: 11px; }
.site-footer .wrap { gap: 8px 30px; }
.site-footer a { color: #fff; text-decoration-color: #a7ba9a; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
.site-footer a:hover { color: var(--lime); }
.checkout { padding-top: 56px; }
.checkout h1, .confirmation h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4vw, 58px); letter-spacing: -.045em; }
.panel { background: var(--paper); border-color: var(--line-warm); border-radius: 17px; }
.cart-panel { background: var(--paper); }
.cart-head { background: var(--sage); }
.cart-head h2 { font-family: var(--display); font-size: 28px; font-weight: 400; }

/* Informational page keeps the same visual system and live contact routes. */
.info-order-link { display: inline-flex; align-items: center; gap: 16px; color: #fff; background: var(--forest); text-decoration: none; border-radius: 100px; padding: 12px 19px; font-size: 12px; font-weight: 700; }
.info-order-link:hover { background: var(--forest-deep); }
.info-main h1, .info-main h2, .info-main h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; }
.info-main em { color: var(--fl-green-strong); font-weight: 400; }
.info-hero { background: #edf1e5; }
.info-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; align-items: center; min-height: 510px; }
.info-hero-grid > div { padding-block: 70px; }
.info-hero h1 { font-size: clamp(54px, 5.5vw, 82px); line-height: .98; margin: 24px 0; }
.info-hero p { max-width: 500px; color: #3c5240; font-size: 14px; line-height: 1.8; margin-bottom: 26px; }
.info-hero img { width: 100%; height: 420px; object-fit: cover; border-radius: 230px 14px 14px 230px; }
.info-section { scroll-margin-top: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-top: 110px; padding-bottom: 110px; }
.info-section h2 { font-size: clamp(39px, 4vw, 62px); line-height: 1.04; margin-top: 14px; }
.info-text { padding-top: 26px; max-width: 510px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.info-text p { margin-bottom: 20px; }
.info-text a { font-weight: 700; text-underline-offset: 5px; }
.locations-section { scroll-margin-top: 95px; background: #eaf0e6; padding: 96px 0 102px; }
.location-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.location-card { background: var(--paper); border: 1px solid #dce4d4; border-radius: 17px; padding: 33px 31px; min-height: 260px; display: flex; flex-direction: column; }
.location-index { color: var(--fl-green-strong-hover); letter-spacing: .15em; font-size: 10px; font-weight: 700; }
.location-card h3 { font-size: 34px; line-height: 1.06; margin: 24px 0 16px; }
.location-card p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.location-card a { margin-top: auto; font-size: 12px; font-weight: 700; text-underline-offset: 5px; }
.location-note { margin: 20px 0 0; color: var(--muted); font-size: 11px; }
.careers-section { scroll-margin-top: 100px; display: grid; grid-template-columns: 1fr .75fr; gap: 50px; align-items: center; padding-top: 100px; padding-bottom: 100px; }
.careers-copy { max-width: 600px; }
.careers-copy h2 { font-size: clamp(42px, 4.5vw, 68px); line-height: 1.04; margin: 14px 0 19px; }
.careers-copy p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-bottom: 22px; }
.careers-art { min-height: 320px; border-radius: 160px 160px 16px 16px; background: var(--forest); color: var(--lime); display: grid; place-items: center; transform: rotate(3deg); }
.careers-art span { font-family: var(--display); font-size: clamp(46px, 5vw, 76px); line-height: 1; letter-spacing: -.05em; transform: rotate(-3deg); }
.careers-art em { color: #fff; }

@media (max-width: 1050px) {
  .hero-layout { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero-band h1 { font-size: clamp(44px, 5.5vw, 65px); }
  .benefit { padding: 20px 16px; }
  .benefit-icon { width: 36px; height: 36px; font-size: 21px; }
}

@media (max-width: 767px) {
  .topstrip { font-size: 10px; }
  .topstrip .wrap { justify-content: center; }
  .topstrip-contact { display: none !important; }
  .header-inner { padding-block: 13px; }
  .logo img { width: 145px; }
  .site-header[data-stuck="true"] .logo img { width: 125px; }
  .cart-toggle { gap: 5px; padding: 8px 10px; font-size: 0; }
  .cart-toggle .cart-icon { width: 22px; height: 22px; }
  .cart-toggle .cart-count { font-size: 11px; }
  .main-nav ul { gap: 16px; min-height: 47px; }
  .main-nav a, .main-nav button { white-space: nowrap; font-size: 12px; padding: 10px 0; }
  .hero-band { background: #edf1e5; text-align: left; }
  .hero-layout { display: flex; flex-direction: column; gap: 0; padding-top: 31px; }
  .hero-inner { min-height: 0; align-items: flex-start; padding: 12px 0 33px; }
  .eyebrow { margin-bottom: 20px; font-size: 9px; }
  .hero-band h1 { font-size: clamp(44px, 12vw, 63px); max-width: 620px; margin-bottom: 17px; }
  .hero-usp { font-size: 12px; line-height: 1.65; }
  .hero-actions { gap: 16px; margin-top: 17px; }
  .hero-cta { padding: 12px 16px; font-size: 11px; }
  .hero-text-link { font-size: 11px; }
  .hero-smallprint { font-size: 9px; margin-top: 24px; }
  .hero-smallprint span { margin-inline: 3px; }
  .hero-visual { min-height: 270px; margin-inline: -20px; }
  .hero-photo { inset: 0; border-radius: 120px 0 0 0; background-position: center 47%; }
  .hero-sticker { right: 22px; bottom: 16px; width: 74px; height: 74px; }
  .hero-sticker span { font-size: 16px; }
  .hero-sticker strong { font-size: 20px; }
  .benefit-row { grid-template-columns: 1fr; margin-top: 18px; }
  .benefit { padding: 13px 18px; }
  .benefit + .benefit { border-left: 0; border-top: 1px solid var(--line-warm); }
  .discover { padding: 65px 0 64px; }
  .section-head, .shop-heading { align-items: start; flex-direction: column; gap: 10px; }
  .section-head h2, .shop-heading h2 { font-size: 40px; }
  .section-head p, .shop-heading p { font-size: 12px; }
  .discover-grid { grid-template-columns: 1fr; gap: 12px; }
  .discover-card { flex-direction: row; min-height: 122px; }
  .discover-card img { width: 39%; aspect-ratio: auto; object-fit: cover; }
  .discover-copy { flex: 1; min-height: 122px; align-content: center; padding: 14px 33px 14px 15px; }
  .discover-copy strong { font-size: 21px; }
  .discover-arrow { right: 9px; bottom: 12px; width: 25px; height: 25px; font-size: 13px; }
  .toolbar { padding: 17px; }
  .group-switch { flex-wrap: nowrap; overflow-x: auto; }
  .group-btn, .chip { white-space: nowrap; font-size: 11px; padding: 8px 12px; }
  .product-grid { gap: 15px; }
  .product-media { aspect-ratio: 1.7; }
  .product-body { padding: 17px; }
  .product-body h3 { font-size: 25px; }
  .usp-strip { justify-content: flex-start; gap: 15px; }
  .site-footer .wrap { flex-direction: column; }
  .info-order-link { padding: 10px 12px; font-size: 10px; gap: 5px; }
  .info-hero-grid { display: flex; flex-direction: column; gap: 0; }
  .info-hero-grid > div { padding: 62px 0 35px; }
  .info-hero h1 { font-size: clamp(49px, 12vw, 70px); }
  .info-hero p { font-size: 12px; }
  .info-hero img { height: 250px; border-radius: 110px 110px 0 0; }
  .info-section { display: block; padding-top: 70px; padding-bottom: 75px; }
  .info-section h2 { font-size: 42px; }
  .info-text { padding-top: 12px; font-size: 12px; }
  .locations-section { padding: 70px 0; }
  .location-grid { grid-template-columns: 1fr; gap: 11px; }
  .location-card { min-height: 0; padding: 25px; }
  .location-card h3 { font-size: 28px; margin: 17px 0 12px; }
  .careers-section { display: flex; flex-direction: column; gap: 25px; align-items: stretch; padding-top: 75px; padding-bottom: 75px; }
  .careers-copy h2 { font-size: 45px; }
  .careers-copy p { font-size: 12px; }
  .careers-art { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}