/*
Theme Name: Debbarista V4
Theme URI: https://debbarista.nl
Author: Debbarista
Author URI: https://debbarista.nl
Description: Mobiele koffiebar op locatie voor uw bedrijfsfeest, bruiloft en event, met vers gebrande speciality koffie.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: debbarista
Tags: custom-logo, custom-menu, featured-images, one-column, two-columns
*/

/* ============================================
   GOOGLE FONTS - Loaded via functions.php wp_enqueue_style
   ============================================ */

/* ============================================
   MODERN CSS RESET & BASE STYLES
   ============================================ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove default margin and padding */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements */
ul[role='list'],
ol[role='list'],
ul,
ol {
  list-style: none;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
  max-width: 100%;
  overflow-x: hidden;
}

html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  max-width: 100%;
  overflow-x: hidden;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Remove default input styles */
input,
textarea,
select {
  border: none;
  outline: none;
  background: transparent;
}

/* Make sure textareas can only be resized vertically */
textarea {
  resize: vertical;
}

/* Remove default link underline */
a {
  text-decoration: none;
  color: inherit;
}

/* Remove default fieldset styles */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
}

/* Remove default table styles */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Better default for horizontal rules */
hr {
  border: none;
  border-top: 1px solid;
  margin: 0;
  opacity: 0.1;
}

/* ============================================
   DEBBARISTA - CSS VARIABLES & DESIGN SYSTEM
   ============================================ */

:root {
  /* ===== BRAND COLORS ===== */
  --color-primary: #89452C;           /* Rich Brown - Primary brand */
  --color-primary-dark: #6B3521;      /* Darker brown for hover states */
  --color-primary-light: #A05838;     /* Lighter brown for accents */

  --color-secondary: #CEA68E;         /* Warm Beige - Secondary */
  --color-secondary-light: #E8DDD0;   /* Light Beige - Backgrounds */
  --color-secondary-dark: #B8906F;    /* Darker beige for contrast */

  --color-accent: #D9BFB4;            /* Soft Pink Beige - Accents */

  /* ===== ACCENT COLORS (V4 - warm neutrals) ===== */
  --color-pastel-pink: #EDE4DF;
  --color-pastel-mint: #E8E4E0;
  --color-pastel-lavender: #E8E4E0;
  --color-pastel-peach: #EDE4DF;
  --color-pastel-cream: #F8F4F0;
  --color-pastel-blue: #E8E4E0;

  /* ===== NEUTRAL COLORS ===== */
  --color-white: #FFFFFF;
  --color-black: #2A2A2A;
  --color-gray-dark: #4A4A4A;
  --color-gray: #7A7A7A;
  --color-gray-light: #BEBEBE;
  --color-gray-lighter: #E8E8E8;
  --color-gray-lightest: #F5F5F5;

  /* ===== SEMANTIC COLORS ===== */
  --color-success: #4A8B57;
  --color-error: #C54A4A;
  --color-warning: #D4963B;
  --color-info: #5B8FB9;

  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 4rem;        /* 64px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ===== SPACING ===== */
  --space-xs: 0.25rem;      /* 4px */
  --space-sm: 0.5rem;       /* 8px */
  --space-md: 1rem;         /* 16px */
  --space-lg: 1.5rem;       /* 24px */
  --space-xl: 2rem;         /* 32px */
  --space-2xl: 3rem;        /* 48px */
  --space-3xl: 4rem;        /* 64px */
  --space-4xl: 5rem;        /* 80px */
  --space-5xl: 6rem;        /* 96px */

  /* ===== LAYOUT ===== */
  --container-max-width: 1360px;
  --container-padding: var(--space-lg);
  --section-padding-y: var(--space-3xl);
  --section-padding-y-mobile: var(--space-2xl);

  /* Breakpoints (for reference in media queries) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ===== BORDERS ===== */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Header Shadow */
  --shadow-header: 0 2px 10px rgba(0, 0, 0, 0.1);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-slower: 500ms ease-in-out;

  /* ===== Z-INDEX ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ===== HEADER SPECIFIC ===== */
  --header-height: 80px;
  --header-height-mobile: 70px;
  --header-bg: rgba(255, 255, 255, 0.95);
  --header-bg-scroll: rgba(255, 255, 255, 0.98);

  /* Logo Sizes */
  --logo-size-desktop: 60px;
  --logo-size-mobile: 45px;

  /* ===== BUTTONS ===== */
  --button-padding-y: 0.75rem;
  --button-padding-x: 2rem;
  --button-padding-y-sm: 0.5rem;
  --button-padding-x-sm: 1.25rem;
  --button-padding-y-lg: 1rem;
  --button-padding-x-lg: 2.5rem;

  /* ===== FORMS ===== */
  --input-padding-y: 0.75rem;
  --input-padding-x: 1rem;
  --input-border-color: var(--color-gray-light);
  --input-border-focus: var(--color-primary);
  --input-bg: var(--color-white);

  /* ===== ANIMATIONS ===== */
  --animation-duration: 0.6s;
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== DARK MODE SUPPORT (Optional for future) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Keep light theme for Debbarista - override if needed */
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  :root {
    --color-primary: #000000;
    --color-white: #FFFFFF;
    --shadow-md: none;
    --shadow-lg: none;
  }
}

/* ============================================
   DEBBARISTA - MAIN GLOBAL STYLES
   ============================================ */

/* ===== BASE TYPOGRAPHY ===== */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  background-color: var(--color-secondary-light);
}

/* ===== HEADINGS ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--font-size-3xl);
}

h4 {
  font-size: var(--font-size-2xl);
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

/* Responsive headings */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }

  h3 {
    font-size: var(--font-size-2xl);
  }

  h4 {
    font-size: var(--font-size-xl);
  }
}

/* ===== PLAYFAIR DISPLAY: always normal (not italic) ===== */
.footer__column-title,
.hero__subtitle,
.hero-v4__subtitle,
.intro__stat-number,
.event-hero__title,
.event-hero__stat-value,
.event-why__title,
.event-why__item-title,
.event-process__title,
.event-process__step-title,
.event-packages__title,
.event-package__name,
.event-package__price-amount,
.event-testimonials__title,
.event-faq__title,
.event-faq__question,
.event-gallery__title,
.event-final-cta__title,
.google-reviews__score,
.google-reviews__avatar,
.extra-option-card__title,
.about-story__title,
.about-stats__number,
.about-stats__suffix,
.about-quote__text,
.about-combined__title,
.about-combined__avatar,
.about-timeline__title,
.about-timeline__heading,
.social-media__title,
.quiz-result__title,
.quiz-result__card-title {
  font-style: normal;
}

/* ===== PARAGRAPHS ===== */
p {
  margin-bottom: var(--space-md);
  color: var(--color-gray-dark);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray);
}

/* ===== LINKS ===== */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* ===== LAYOUT CONTAINERS ===== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-fluid {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Responsive container padding */
@media (max-width: 768px) {
  .container,
  .container-fluid {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 480px) {
  .container,
  .container-fluid {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* ===== SECTIONS ===== */
section {
  padding: var(--section-padding-y) 0;
}

section.no-padding {
  padding: 0;
}

section.padding-top {
  padding-bottom: 0;
}

section.padding-bottom {
  padding-top: 0;
}

/* Responsive section padding */
@media (max-width: 768px) {
  section {
    padding: var(--section-padding-y-mobile) 0;
  }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--button-padding-y) var(--button-padding-x);
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
  user-select: none;
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Primary */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Button Secondary */
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Button Outline */
.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Button Sizes */
.btn-sm {
  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
  font-size: var(--font-size-lg);
}

@media (max-width: 768px) {
  .btn-lg {
    padding: 0.6rem 1.5rem;
    font-size: var(--font-size-base);
  }
}

/* Button Block */
.btn-block {
  display: flex;
  width: 100%;
}

/* Button Loading State */
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.6s linear infinite;
  opacity: 1;
}

.btn-primary.loading::after {
  border-color: var(--color-white);
  border-top-color: transparent;
}

.btn-outline.loading::after {
  border-color: var(--color-primary);
  border-top-color: transparent;
}

/* Ensure minimum touch target on mobile */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== FORMS ===== */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-dark);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-label.required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  background-color: var(--input-bg);
  border: var(--border-width) solid var(--input-border-color);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(137, 69, 44, 0.1);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-light);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Time Picker - dual dropdown */
/* ===== TIJDBLOK PILOT (Google Calendar stijl) ===== */
.tijdblok {
  background: #fff;
  border: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Kalender ── */
.tijdblok__cal {
  padding: 0.75rem 1rem 0.6rem;
  border-bottom: 1px solid var(--color-border, #e8ddd3);
}

.tijdblok__cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.tijdblok__cal-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary, #4a2c17);
  letter-spacing: 0.01em;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.tijdblok__cal-title:hover {
  background: var(--color-cream, #faf6f1);
  text-decoration: underline;
}

.tijdblok__cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-primary, #4a2c17);
  cursor: pointer;
  transition: background 0.15s;
}
.tijdblok__cal-nav:hover {
  background: var(--color-cream, #faf6f1);
}

.tijdblok__cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.15rem;
}
.tijdblok__cal-weekdays span {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: #9e9e9e;
  padding: 0.1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tijdblok__cal-weekdays .tijdblok__cal-weekend {
  color: #c0a090;
}

.tijdblok__cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

.tb-day {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 0.78rem;
  color: var(--color-text, #3a2010);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
  flex-shrink: 0;
}
.tb-day:hover:not(:disabled):not(.tb-day--selected) {
  background: var(--color-cream, #faf6f1);
}
.tb-day--empty {
  cursor: default;
  pointer-events: none;
}
.tb-day--past {
  color: #ccc;
  cursor: default;
}
.tb-day--today:not(.tb-day--selected) {
  color: var(--color-primary, #4a2c17);
  font-weight: 700;
  border: 1.5px solid var(--color-primary, #4a2c17);
}
.tb-day--selected {
  background: var(--color-primary, #4a2c17);
  color: #fff !important;
  font-weight: 700;

}

/* ── Gasten rij (in tijdblok) ── */
.tijdblok__guests-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-border, #e8ddd3);
  background: var(--color-cream, #faf6f1);
}

.tijdblok__guests-bar svg {
  flex-shrink: 0;
  color: #9e9e9e;
}

.tijdblok__guests-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9e9e9e;
  white-space: nowrap;
}

.tijdblok__guests-input {
  background: #fff;
  border: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary, #4a2c17);
  width: 110px;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.tijdblok__guests-input::-webkit-outer-spin-button,
.tijdblok__guests-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tijdblok__guests-input:focus {
  outline: none;
  border-color: var(--color-primary, #4a2c17);
}
.tijdblok__guests-input::placeholder {
  color: #aaa;
  font-weight: 400;
  opacity: 1;
}

/* Maand-picker cellen */
.tb-month {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 52px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  color: var(--color-text, #3a2010);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.tb-month:hover:not(:disabled):not(.tb-day--selected) {
  background: var(--color-cream, #faf6f1);
}
.tb-month.tb-day--today {
  color: var(--color-primary, #4a2c17);
  font-weight: 700;
  border: 1.5px solid var(--color-primary, #4a2c17);
}
.tb-month.tb-day--selected {
  background: var(--color-primary, #4a2c17);
  color: #fff !important;
  font-weight: 700;
}
.tb-month.tb-day--past {
  color: #ccc;
}

/* ── Tijdsbalk ── */
.tijdblok__time-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border, #e8ddd3);
  background: var(--color-cream, #faf6f1);
  flex-wrap: wrap;
}

.tijdblok__time-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.tijdblok__time-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9e9e9e;
}

.tijdblok__time-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a2c17' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  border: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: 8px;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary, #4a2c17);
  cursor: pointer;
  min-width: 90px;
  transition: border-color 0.15s;
}
.tijdblok__time-select:focus {
  outline: none;
  border-color: var(--color-primary, #4a2c17);
}

.tijdblok__time-arrow {
  color: #9e9e9e;
  flex-shrink: 0;
  margin-top: 1.2rem;
}

.tijdblok__dur-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: auto;
  margin-top: 1.2rem;
}

/* ── Samenvattingsregel ── */
.tijdblok__summary {
  display: none;
  padding: 0.8rem 1.25rem;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 0.875rem;
}
.tijdblok__summary--visible {
  display: block;
}

/* ── Adres sectie binnen tijdblok ── */
.tijdblok__address {
  padding: 0.55rem 1rem 0.5rem;
  border-top: 1px solid var(--color-border, #e8ddd3);
}
.tijdblok__address-fields {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.tijdblok__address-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.tijdblok__address-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-gray, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tijdblok__address-input {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  height: auto !important;
  width: auto;
}
.tijdblok__address .adres-preview--found {
  margin-top: 0.3rem;
  font-size: 0.75rem;
}
.tijdblok__address .form-help {
  font-size: 0.72rem;
  margin-top: 0.1rem;
}

@media (max-width: 520px) {
  .tijdblok__time-bar {
    gap: 0.5rem;
  }
  .tijdblok__time-select {
    min-width: 80px;
    font-size: 0.95rem;
  }
  .tijdblok__dur-badge {
    margin-left: 0;
    margin-top: 0;
  }
}

/* ── Mobiele fix: tijdblok binnen marges houden ── */
@media (max-width: 576px) {
  /* Zorg dat grid items kunnen krimpen */
  .form-group-full {
    min-width: 0;
    max-width: 100%;
  }

  /* Verklein padding in tijdblok zodat het binnen de kaart valt */
  .tijdblok {
    width: 100%;
    min-width: 0;
  }

  .tijdblok__cal {
    padding: 0.75rem 0.6rem 0.6rem;
  }

  .tijdblok__time-bar {
    padding: 0.75rem 0.75rem;
  }

  .tijdblok__guests-bar {
    padding: 0.6rem 0.75rem;
  }

  .tijdblok__address {
    padding: 0.55rem 0.75rem 0.5rem;
  }

  /* Adresvelden naast elkaar op mobiel */
  .tijdblok__address-fields {
    flex-wrap: wrap;
  }

  .tijdblok__address-field {
    min-width: 0;
    flex: 1 1 calc(50% - 0.375rem);
  }

  .tijdblok__address-input {
    width: 100% !important;
  }
}

/* Extra kleine schermen: form-container padding verkleinen */
@media (max-width: 400px) {
  .offerte-form-container {
    padding: var(--space-md);
  }

  .tijdblok__cal {
    padding: 0.75rem 0.35rem 0.6rem;
  }

  .tijdblok__time-bar {
    padding: 0.75rem 0.5rem;
  }

  .tijdblok__guests-bar {
    padding: 0.6rem 0.5rem;
  }

  .tijdblok__address {
    padding: 0.55rem 0.5rem 0.5rem;
  }
}

/* Zeer kleine schermen: kalender cellen en gasten input verkleinen */
@media (max-width: 360px) {
  .tb-day {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }
  .tijdblok__guests-input {
    width: 80px;
  }
  .tijdblok__guests-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
/* ===== /TIJDBLOK PILOT ===== */

.time-picker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.time-picker__hour,
.time-picker__min {
  flex: 1;
  min-width: 0;
}

.time-picker__separator {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray);
  line-height: 1;
}

.form-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  animation: fadeIn 0.3s ease-out;
}

.form-group.has-error .form-input,
.form-group.has-error .form-textarea,
.form-group.has-error .form-select {
  border-color: var(--color-error);
  background-color: rgba(197, 74, 74, 0.05);
}

.form-group.has-success .form-input,
.form-group.has-success .form-textarea,
.form-group.has-success .form-select {
  border-color: var(--color-success);
  background-color: rgba(74, 139, 87, 0.05);
}

.form-help {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.adres-preview {
  display: none;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-gray);
}
.adres-preview--found {
  display: block;
  color: #2e7d32;
}

/* ── Phone field: custom dial-code picker + number input ── */
.phone-field {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: 8px;
  overflow: visible; /* allow panel to overflow */
  transition: border-color 0.2s;
  position: relative;
}
.phone-field:focus-within {
  border-color: var(--color-primary, #4a2c17);
}
/* Dial button (trigger) */
.phone-field__dial-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  border: none;
  border-right: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: 6px 0 0 6px;
  background: transparent;
  padding: 0 0.65rem 0 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  color: inherit;
}
.phone-field__dial-btn:focus-visible {
  outline: 2px solid var(--color-primary, #4a2c17);
  outline-offset: -2px;
}
.phone-field__dial-arrow {
  opacity: 0.5;
  flex-shrink: 0;
}
/* Number input */
.phone-field__input {
  flex: 1;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  box-shadow: none !important;
  background: transparent;
  min-width: 0;
}
.phone-field__input:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
}
/* Dropdown panel */
.phone-dial-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9999;
  width: 280px;
  background: #fff;
  border: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}
.phone-dial-panel[hidden] { display: none; }
.phone-dial-panel__search-wrap {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--color-border, #e8ddd3);
}
.phone-dial-panel__search {
  width: 100%;
  border: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  outline: none;
}
.phone-dial-panel__search:focus {
  border-color: var(--color-primary, #4a2c17);
}
.phone-dial-panel__list {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.phone-dial-panel__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  border-radius: 0;
  transition: background 0.12s;
}
.phone-dial-panel__item:hover,
.phone-dial-panel__item:focus,
.phone-dial-panel__item.is-selected {
  background: var(--color-cream, #f9f3ec);
  outline: none;
}
.phone-dial-panel__item-flag { font-size: 1.1rem; flex-shrink: 0; }
.phone-dial-panel__item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-dial-panel__item-code { color: var(--color-gray, #888); font-size: 0.8rem; flex-shrink: 0; }
.phone-dial-panel__empty { padding: 0.75rem; color: var(--color-gray, #888); font-size: 0.875rem; text-align: center; }

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: var(--border-width-thick) solid var(--color-gray-light);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-label {
  flex: 1;
  cursor: pointer;
  color: var(--color-gray-dark);
  line-height: var(--line-height-snug);
}

/* ===== CARDS ===== */
.card {
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.card-body {
  padding: var(--space-xl);
}

.card-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.card-text {
  color: var(--color-gray);
  margin-bottom: var(--space-lg);
}

/* ===== UTILITIES ===== */

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-white { color: var(--color-white); }
.text-gray { color: var(--color-gray); }
.text-muted { color: var(--color-gray-light); }

/* Background colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary-light); }
.bg-white { background-color: var(--color-white); }
.bg-cream { background-color: var(--color-pastel-cream); }
.bg-accent { background-color: var(--color-accent); }

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }
.mt-5 { margin-top: var(--space-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }
.mb-5 { margin-bottom: var(--space-2xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-sm); }
.pt-2 { padding-top: var(--space-md); }
.pt-3 { padding-top: var(--space-lg); }
.pt-4 { padding-top: var(--space-xl); }
.pt-5 { padding-top: var(--space-2xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--space-sm); }
.pb-2 { padding-bottom: var(--space-md); }
.pb-3 { padding-bottom: var(--space-lg); }
.pb-4 { padding-bottom: var(--space-xl); }
.pb-5 { padding-bottom: var(--space-2xl); }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: var(--space-sm); }
.gap-2 { gap: var(--space-md); }
.gap-3 { gap: var(--space-lg); }
.gap-4 { gap: var(--space-xl); }

/* Responsive utilities */
@media (max-width: 991px) {
  .d-lg-none { display: none; }
  .d-lg-block { display: block; }
}

@media (max-width: 767px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
}

@media (max-width: 575px) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in {
  animation: fadeIn var(--animation-duration) ease-out;
}

.fade-in-up {
  animation: fadeInUp var(--animation-duration) ease-out;
}

/* ===== LOADING STATES ===== */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ===== SKIP TO CONTENT (Accessibility) ===== */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  z-index: 9999;
}

.skip-to-content:focus {
  top: 0;
}

/* ============================================
   DEBBARISTA - HEADER & NAVIGATION
   ============================================ */

/* ===== HEADER CONTAINER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--transition-base);
  z-index: var(--z-fixed);
}

/* Scrolled state */
.header.scrolled {
  background-color: var(--header-bg-scroll);
  box-shadow: var(--shadow-header);
}

/* Ensure container fills header height so header__container height:100% works */
.header > .container {
  height: 100%;
}

/* Header inner container */
.header__container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

/* ===== LOGO ===== */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.header__logo:hover {
  transform: scale(1.05);
}

.header__logo-img {
  width: auto;
  height: var(--logo-size-desktop);
  max-width: 160px;
  object-fit: contain;
}

/* ===== NAVIGATION ===== */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  flex: 1;
}

/* Menu list */
.header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Menu items */
.header__menu-item {
  position: relative;
}

/* Menu links */
.header__menu-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
}

.header__menu-link:hover {
  color: var(--color-primary-dark);
}

.header__menu-link--nowrap {
  white-space: nowrap;
}

/* Active link indicator */
.header__menu-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-md);
  right: var(--space-md);
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--border-radius-sm);
}

/* Dropdown arrow icon */
.header__menu-icon {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}

.header__menu-item:hover .header__menu-icon {
  transform: rotate(180deg);
}

/* ===== DROPDOWN MENU ===== */
.header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
}

/* Show dropdown on hover */
.header__menu-item:hover .header__dropdown,
.header__menu-item.touch-active .header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__menu-item.touch-active .header__menu-icon {
  transform: rotate(180deg);
}

/* Dropdown list */
.header__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dropdown items */
.header__dropdown-item {
  margin: 0;
}

/* Dropdown links */
.header__dropdown-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
}

.header__dropdown-link:hover {
  background-color: var(--color-secondary-light);
  color: var(--color-primary);
  transform: translateX(4px);
}

/* ===== CTA BUTTON ===== */
.header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
}

.header__cta-btn {
  padding: 0.6rem var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  line-height: 1;
}

/* ===== HAMBURGER MENU ===== */
.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: var(--z-fixed);
}

.header__hamburger-line {
  width: 26px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-base);
}

.header__hamburger-line:not(:last-child) {
  margin-bottom: 6px;
}

/* Hamburger active state (X) */
.header__hamburger.active .header__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header__hamburger.active .header__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px);
}

.header__hamburger.active .header__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== MOBILE MENU - V4 Fullscreen Overlay ===== */
.header__mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-white);
  padding: 0 0 var(--space-2xl);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--z-modal);
}

.header__mobile-menu.active {
  transform: translateX(0);
}

/* Menu header: logo + close button */
.header__mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--color-gray-lighter);
  position: sticky;
  top: 0;
  background-color: var(--color-white);
  z-index: 1;
  min-height: 64px;
}

.header__mobile-logo img {
  display: block;
  border-radius: 50%;
}

.header__mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--color-gray-lightest);
  cursor: pointer;
  color: var(--color-primary);
  border-radius: 50%;
  transition: background-color var(--transition-fast);
}

.header__mobile-close:hover {
  background-color: var(--color-gray-lighter);
}

/* Mobile menu list */
.header__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile menu items */
.header__mobile-item {
  border-bottom: 1px solid var(--color-gray-lighter);
}

.header__mobile-item:first-child {
  border-top: 1px solid var(--color-gray-lighter);
}

/* Mobile menu links - icon + text + chevron layout */
.header__mobile-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  min-height: 56px;
}

.header__mobile-link:hover,
.header__mobile-link:active {
  background-color: var(--color-secondary-light);
}

/* Icon container */
.header__mobile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-gray-lightest);
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Text label fills the remaining space */
.header__mobile-text {
  flex: 1;
}

/* Chevron for non-dropdown items (static >) */
.header__mobile-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-gray-light);
  flex-shrink: 0;
}

/* Dropdown toggle button (> that rotates to V) */
.header__mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-gray);
  transition: transform 0.25s ease, color 0.2s ease;
  flex-shrink: 0;
  border-radius: 50%;
}

.header__mobile-toggle:hover {
  background-color: var(--color-gray-lightest);
  color: var(--color-primary);
}

.header__mobile-toggle.active {
  transform: rotate(90deg);
  color: var(--color-primary);
}

/* Mobile dropdown */
.header__mobile-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--color-gray-lightest);
}

.header__mobile-dropdown.active {
  max-height: 500px;
}

/* Mobile dropdown list */
.header__mobile-dropdown-list {
  list-style: none;
  padding: var(--space-sm) 0;
  margin: 0;
}

/* Mobile dropdown links - indented with left border accent */
.header__mobile-dropdown-link {
  display: block;
  padding: var(--space-md) var(--space-xl) var(--space-md) calc(var(--space-xl) + 40px + var(--space-md));
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}

.header__mobile-dropdown-link:hover,
.header__mobile-dropdown-link:active {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* Section divider */
.header__mobile-section {
  padding: var(--space-lg) var(--space-xl) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile CTA */
.header__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding: 0 var(--space-xl);
}

.header__mobile-cta .btn {
  width: 100%;
  justify-content: center;
  border-radius: var(--border-radius-full);
  padding-top: var(--button-padding-y);
  padding-bottom: var(--button-padding-y);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet and below - Show hamburger, hide desktop menu */
@media (max-width: 991px) {
  .header {
    height: var(--header-height-mobile);
  }

  .header__logo-img {
    width: auto;
    height: var(--logo-size-mobile);
    max-width: 120px;
  }

  .header__nav {
    display: none;
  }

  .header__cta,
  .header__cta-dual {
    display: none;
  }

  .header__hamburger {
    display: flex;
  }
}

/* Desktop - Hide mobile menu elements */
@media (min-width: 992px) {
  .header__hamburger {
    display: none;
  }

  .header__mobile-menu {
    display: none;
  }
}

/* Large desktop - Increase spacing */
@media (min-width: 1400px) {
  .header__menu {
    gap: var(--space-2xl);
  }
}

/* ===== ACCESSIBILITY ===== */
.header__menu-link:focus-visible,
.header__dropdown-link:focus-visible,
.header__mobile-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Skip to main content */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-to-main:focus {
  top: var(--space-md);
}

/* ===== SCROLL LOCK (when mobile menu is open) ===== */
body.menu-open {
  overflow: hidden;
}

/* ===== PRINT STYLES ===== */
@media print {
  .header {
    position: relative;
    box-shadow: none;
    background: white;
  }

  .header__hamburger,
  .header__mobile-menu,
  .header__cta {
    display: none;
  }
}

/* ============================================
   DEBBARISTA - FOOTER
   ============================================ */

.footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.footer__container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

/* Footer columns */
.footer__column {
  display: flex;
  flex-direction: column;
}

.footer__column-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-lg);
  color: var(--color-white);
  font-family: var(--font-display);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__list-item {
  margin-bottom: var(--space-sm);
}

.footer__link {
  color: var(--color-secondary-light);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
}

.footer__link:hover {
  color: var(--color-white);
  padding-left: var(--space-xs);
}

/* Footer text */
.footer__text {
  color: var(--color-secondary-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-base);
}

.footer__text a {
  color: var(--color-secondary-light);
  text-decoration: none;
  transition: all var(--transition-fast);
  display: block;
}

.footer__text a:hover {
  color: var(--color-white);
  padding-left: var(--space-xs);
}

/* Social media */
.footer__social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--color-white);
  transition: all var(--transition-base);
}

.footer__social-link:hover {
  background-color: var(--color-secondary);
  transform: translateY(-4px);
}

.footer__social-icon {
  width: 20px;
  height: 20px;
}

/* Newsletter form */
.footer__newsletter {
  margin-top: var(--space-md);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.footer__newsletter-input {
  flex: 1;
  padding: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-md);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: var(--font-size-base);
}

.footer__newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.footer__newsletter-input:focus {
  outline: none;
  border-color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.15);
}

.footer__newsletter-btn {
  padding: var(--space-md) var(--space-xl);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border: none;
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.footer__newsletter-btn:hover {
  background-color: var(--color-white);
  transform: translateY(-2px);
}

.footer__newsletter-success {
  display: none;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--color-success);
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

.footer__newsletter-error {
  display: none;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--color-error);
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

/* Footer bottom */
.footer__bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
}

.footer__copyright {
  color: var(--color-secondary-light);
  font-size: var(--font-size-sm);
}

.footer__legal {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__legal-link {
  color: var(--color-secondary-light);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--color-white);
}

/* Responsive */
@media (max-width: 992px) {
  .footer {
    padding: var(--space-2xl) 0 var(--space-lg);
  }

  .footer__container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
}

@media (max-width: 576px) {
  .footer {
    padding: var(--space-xl) 0 var(--space-md);
  }

  .footer__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
  }

  .footer__column-title {
    margin-bottom: var(--space-md);
  }

  .footer__newsletter-form {
    flex-direction: column;
  }

  .footer__newsletter-btn {
    width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--space-lg);
  }

  .footer__legal {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }
}

/* Print styles */
@media print {
  .footer {
    display: none;
  }
}

/* ============================================
   DEBBARISTA - SCROLL NAVIGATION
   Sticky quick navigation voor homepage sections
   ============================================ */

.scroll-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-lighter);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: var(--z-sticky);
  transform: translateY(-100%);
  opacity: 0;
  transition: all var(--transition-base);
}

.scroll-nav.visible {
  transform: translateY(0);
  opacity: 1;
}

.scroll-nav__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.scroll-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.scroll-nav__list::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.scroll-nav__item {
  flex-shrink: 0;
}

.scroll-nav__link {
  display: block;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 3px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.scroll-nav__link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-secondary);
}

.scroll-nav__link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .scroll-nav {
    top: var(--header-height-mobile);
  }

  .scroll-nav__list {
    justify-content: flex-start;
    padding: 0 var(--space-md);
  }

  .scroll-nav__link {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-xs);
  }
}

/* Hide on very small screens to save space */
@media (max-width: 480px) {
  .scroll-nav__link {
    padding: var(--space-sm);
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 60px);
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: calc(var(--header-height-mobile) + 50px);
  }
}

/* Progress indicator (optional enhancement) */
.scroll-nav__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 0%;
  transition: width 0.3s ease-out;
}

/* Accessibility */
.scroll-nav__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--border-radius-sm);
}

/* Print styles */
@media print {
  .scroll-nav {
    display: none;
  }
}

/* ============================================
   DEBBARISTA - INSTAGRAM FEED STYLING
   ============================================ */

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
}

/* Individual post */
.instagram__post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: var(--color-gray-lightest);
  transition: all var(--transition-base);
}

.instagram__post:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

/* Post image */
.instagram__post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.instagram__post:hover .instagram__post-image {
  transform: scale(1.1);
}

/* Overlay on hover */
.instagram__post-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(137, 69, 44, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.instagram__post:hover .instagram__post-overlay {
  opacity: 1;
}

/* Placeholder styling (for development) */
.instagram__post--placeholder .instagram__post-placeholder-img {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary-light) 100%);
  color: var(--color-primary);
}

.instagram__post-number {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-sm);
}

/* Placeholder (no posts state) */
.instagram__placeholder {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  background: var(--color-gray-lightest);
  border-radius: var(--border-radius-xl);
  color: var(--color-gray);
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-base);
  min-height: 300px;
}

.instagram__placeholder:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.instagram__placeholder svg {
  margin-bottom: var(--space-lg);
}

.instagram__placeholder span {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Error state */
.instagram__error {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-2xl);
  background: var(--color-gray-lightest);
  border-radius: var(--border-radius-lg);
  color: var(--color-gray-dark);
}

.instagram__error a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}

.instagram__error a:hover {
  color: var(--color-primary-dark);
}

/* Loading state */
.instagram__grid.loading {
  opacity: 0.6;
  pointer-events: none;
}

.instagram__grid.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.8s linear infinite;
}

/* Mobile grid */
@media (max-width: 768px) {
  .instagram__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin: var(--space-xl) 0;
  }
}

@media (max-width: 480px) {
  .instagram__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .instagram__placeholder {
    min-height: 200px;
    padding: var(--space-2xl) var(--space-md);
  }
}

/* Loaded state */
.instagram__grid--loaded {
  animation: fadeIn 0.6s ease-out;
}

/* Accessibility */
.instagram__post:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Print styles */
@media print {
  .instagram__post-overlay {
    display: none;
  }
}

/* ============================================
   DEBBARISTA - HOME PAGE STYLES
   ============================================ */

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-4xl) 0;
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(137, 69, 44, 0.7) 0%,
    rgba(206, 166, 142, 0.5) 100%
  );
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  animation: fadeInUp 1s ease-out;
}

.hero__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.hero__subtitle {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  color: var(--color-white);
  margin-bottom: var(--space-3xl);
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}

.hero__cta {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.hero__cta .btn {
  min-width: 220px;
}

.hero__cta .btn-outline {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: var(--color-white);
  border-color: var(--color-white);
}

.hero__cta .btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-3xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  animation: bounce 2s infinite;
}

.hero__scroll-text {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero__scroll-icon {
  color: var(--color-white);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

@keyframes bounce-v4 {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
  .hero {
    min-height: 90vh;
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__scroll {
    display: none;
  }
}

/* ===== INTRO SECTION ===== */
.intro {
  padding: var(--space-3xl) 0;
  background-color: #f8f4f0;
}

.intro__content {
  max-width: 1000px;
  margin: 0 auto;
}

.intro__title {
  margin-bottom: var(--space-xl);
}

.intro__text {
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
}

.intro__keyword {
  color: var(--color-primary-light);
  font-weight: var(--font-weight-medium);
}

.intro__usps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.intro__usp {
  text-align: center;
  padding: var(--space-xl);
}

.intro__usp-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-lg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  border-radius: 50%;
  transition: all var(--transition-base);
}

.intro__usp:hover .intro__usp-icon {
  transform: scale(1.1) rotate(5deg);
  background-color: var(--color-secondary);
}

.intro__usp-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.intro__usp-text {
  color: var(--color-gray);
}

.intro__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-3xl);
  flex-wrap: wrap;
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-gray-lighter);
  border-bottom: 1px solid var(--color-gray-lighter);
}

.intro__stat {
  text-align: center;
}

.intro__stat-number {
  display: block;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-family: var(--font-display);
  margin-bottom: var(--space-sm);
}

.intro__stat-label {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .intro {
    padding: var(--space-2xl) 0;
  }

  .intro__usps {
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
  }

  .intro__stats {
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
  }

  .intro__stat-number {
    font-size: var(--font-size-3xl);
  }
}

/* ===== INTRO SPLIT LAYOUT ===== */
.intro__tagline {
  font-size: var(--font-size-xl);
  color: var(--color-gray);
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
  line-height: 1.6;
}

.intro__split {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.intro__split-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-2xl);
  border-radius: var(--border-radius-xl);
}

.intro__split-card--event {
  background: linear-gradient(135deg, var(--color-pastel-cream) 0%, var(--color-accent) 100%);
}

.intro__split-card--shop {
  background: var(--color-white);
  border: 2px solid var(--color-accent);
}

.intro__split-icon {
  width: 80px;
  height: 80px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl);
  color: var(--color-white);
  flex-shrink: 0;
}

.intro__split-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.intro__split-text {
  color: var(--color-gray);
  margin-bottom: var(--space-xl);
  flex: 1;
  line-height: 1.7;
}

.intro__split-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-xl);
  flex-shrink: 0;
}

.intro__split-divider span {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-gray);
  background: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: 50px;
  border: 2px solid var(--color-accent);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .intro__tagline {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2xl);
  }

  .intro__split {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .intro__split-divider {
    padding: 0;
  }
}

/* ===== SERVICES SECTION ===== */
.services {
  padding: var(--space-3xl) 0;
  background-color: #F5E6D8;
}

.services__header {
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
}

.services__title {
  margin-bottom: var(--space-lg);
}

.services__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  will-change: transform;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
  border: 1px solid var(--color-gray-lighter);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl);
}

.service-card__image {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover .service-card__image img {
  transform: scale(1.05);
}

.service-card__badge {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-card__content {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.service-card__description {
  color: var(--color-gray-dark);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-relaxed);
}

.service-card__features {
  list-style: none;
  margin-bottom: var(--space-xl);
  padding: 0;
}

.service-card__features li {
  position: relative;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-sm);
  color: var(--color-gray);
  font-size: var(--font-size-sm);
}

.service-card__features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

@media (max-width: 768px) {
  .services {
    padding: var(--space-2xl) 0;
  }

  .services__header {
    margin-bottom: var(--space-2xl);
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ===== EVENTS SECTION ===== */
.events {
  padding: var(--space-3xl) 0;
  background: linear-gradient(
    180deg,
    var(--color-secondary-light) 0%,
    var(--color-white) 100%
  );
}

.events__header {
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
}

.events__title {
  margin-bottom: var(--space-lg);
}

.events__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
}

.events__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.event-card {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  text-decoration: none;
  display: block;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.event-card__image {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.event-card:hover .event-card__image img {
  transform: scale(1.1);
}

.event-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(137, 69, 44, 0.8) 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.event-card:hover .event-card__overlay {
  opacity: 1;
}

.event-card__cta {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--font-size-sm);
}

.event-card__content {
  padding: var(--space-xl);
}

.event-card__title {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.event-card__text {
  color: var(--color-gray);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.events__cta {
  margin-top: var(--space-3xl);
}

@media (max-width: 768px) {
  .events {
    padding: var(--space-2xl) 0;
  }

  .events__header {
    margin-bottom: var(--space-2xl);
  }

  .events__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
  }

  .events__cta {
    margin-top: var(--space-2xl);
  }
}

/* ===== ABOUT SECTION ===== */
.about {
  padding: var(--space-3xl) 0;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.about__image {
  position: relative;
}

.about__img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
}

.about__badge {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-xl);
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
}

.about__badge-text {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about__content {
  padding: var(--space-xl);
}

.about__title {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-xl);
}

.about__text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
  color: var(--color-gray-dark);
}

.about__text strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.about__cta {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

@media (max-width: 992px) {
  .about {
    padding: var(--space-2xl) 0;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .about__cta {
    flex-direction: column;
    margin-top: var(--space-xl);
  }

  .about__cta .btn {
    width: 100%;
  }
}

/* ===== SHOP TEASER SECTION ===== */
.shop-teaser {
  padding: var(--space-3xl) 0 var(--space-xl);
}

.shop-teaser__header {
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
}

.shop-teaser__title {
  margin-bottom: var(--space-lg);
}

.shop-teaser__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
}

.shop-teaser__products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.product-preview {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border: 1px solid var(--color-gray-lighter);
}

.product-preview:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.product-preview__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface, #FAF7F4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-preview__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--transition-base);
}

.product-preview:hover .product-preview__image img {
  transform: scale(1.05);
}

.product-preview__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-preview__badge--single-origin {
  background-color: #ffd230;
  color: #ffffff;
}

.product-preview__badge--decaf {
  background-color: #277021;
}

.product-preview__content {
  padding: var(--space-lg);
  text-align: center;
}

.product-preview__title {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-semibold);
}

.product-preview__price {
  font-size: var(--font-size-2xl);
  color: var(--color-black);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.product-preview__rating {
  color: var(--color-warning);
  font-size: var(--font-size-sm);
}

.shop-teaser__quiz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
  border-radius: var(--border-radius-xl);
  padding: var(--space-3xl);
  margin: var(--space-xl) 0 0;
}

.shop-teaser__quiz-content {
  padding: var(--space-xl);
}

.shop-teaser__quiz-title {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.shop-teaser__quiz-text {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-xl);
  line-height: var(--line-height-relaxed);
}

.shop-teaser__quiz-image img {
  width: 100%;
  height: auto;
  max-width: 400px;
  margin: 0 auto;
  display: block;
  border-radius: var(--border-radius-xl);
}

.shop-teaser__cta {
  margin-top: var(--space-3xl);
}

@media (max-width: 992px) {
  .shop-teaser {
    padding: var(--space-2xl) 0;
  }

  .shop-teaser__header {
    margin-bottom: var(--space-2xl);
  }

  .shop-teaser__products {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
  }

  .shop-teaser__quiz {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    margin: var(--space-2xl) 0;
  }

  .shop-teaser__quiz-content {
    padding: 0;
  }

  .shop-teaser__quiz-image {
    order: -1;
  }
}

/* ===== TESTIMONIALS SECTION ===== */
.testimonials {
  padding: var(--space-3xl) 0;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-accent) 100%);
}

.testimonials__header {
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
}

.testimonials__title {
  margin-bottom: var(--space-lg);
}

.testimonials__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
}

.testimonials__slider {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-3xl);
  box-shadow: var(--shadow-xl);
  text-align: center;
  margin: 0 var(--space-md);
}

.testimonial-card__rating {
  color: var(--color-warning);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-lg);
}

.testimonial-card__text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-dark);
  font-style: italic;
  margin-bottom: var(--space-xl);
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.testimonial-card__author strong {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.testimonial-card__author span {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
}

.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.testimonials__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-gray-light);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.testimonials__dot.active {
  background-color: var(--color-primary);
  transform: scale(1.3);
}

.testimonials__dot:hover {
  background-color: var(--color-primary-light);
}

@media (max-width: 768px) {
  .testimonials {
    padding: var(--space-2xl) 0;
  }

  .testimonials__header {
    margin-bottom: var(--space-2xl);
  }

  .testimonial-card {
    padding: var(--space-2xl);
  }
}

/* ===== INSTAGRAM SECTION ===== */
.instagram {
  padding: var(--space-3xl) 0;
}

.instagram__header {
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
}

.instagram__title {
  margin-bottom: var(--space-lg);
}

.instagram__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.instagram__placeholder {
  aspect-ratio: 1;
  background: var(--color-accent);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-base);
}

.instagram__placeholder:hover {
  background: var(--color-secondary);
  transform: translateY(-4px);
}

.instagram__placeholder svg {
  color: var(--color-primary);
}

.instagram__placeholder span {
  font-weight: var(--font-weight-semibold);
}

.instagram__cta {
  margin-top: var(--space-2xl);
}

@media (max-width: 768px) {
  .instagram {
    padding: var(--space-2xl) 0;
  }

  .instagram__header {
    margin-bottom: var(--space-2xl);
  }

  .instagram__grid {
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
  }
}

/* ===== FINAL CTA SECTION ===== */
.final-cta {
  position: relative;
  padding: var(--space-3xl) 0;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.final-cta__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.final-cta__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-cta__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(137, 69, 44, 0.85) 0%,
    rgba(206, 166, 142, 0.75) 100%
  );
  z-index: 2;
}

.final-cta__content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  margin: 0 auto;
}

.final-cta__title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.final-cta__text {
  font-size: var(--font-size-xl);
  color: var(--color-white);
  margin-bottom: var(--space-2xl);
  line-height: var(--line-height-relaxed);
}

.final-cta__contact {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.final-cta__contact p {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.final-cta__phone,
.final-cta__email {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.final-cta__phone:hover,
.final-cta__email:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .final-cta {
    min-height: 400px;
    padding: var(--space-2xl) 0;
  }

  .final-cta__content .btn {
    width: 100%;
  }
}

/* ============================================
   WORDPRESS SPECIFIC OVERRIDES
   ============================================ */

/* Body padding for fixed header */
body {
  padding-top: 80px;
}

@media (max-width: 991px) {
  body {
    padding-top: var(--header-height-mobile);
  }
}

@media (max-width: 991px) {
  body {
    padding-top: 70px;
  }
}

/* WordPress admin bar compatibility */
body.admin-bar .header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
}

/* === EVENEMENTEN CSS === */
/**
 * ============================================
 * DEBBARISTA - EVENEMENTEN PAGES STYLES
 * ============================================
 * Styling voor bruiloften, zakelijk, uitvaarten, festivals en jubilea pagina's
 */

/* ===== EVENT HERO ===== */
.event-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-3xl) 0;
}

.event-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(137, 69, 44, 0.85) 0%,
    rgba(74, 37, 24, 0.75) 100%
  );
  z-index: 1;
}

.event-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.event-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.event-hero__badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  backdrop-filter: blur(10px);
}

.event-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-lg);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.4);
}

.event-hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2xl);
  opacity: 0.95;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.event-hero__stats {
  display: flex;
  gap: var(--space-2xl);
  justify-content: center;
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.event-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.event-hero__stat-value {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  font-family: var(--font-heading);
  line-height: 1;
}

.event-hero__stat-label {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  font-weight: 500;
}

.event-hero__cta {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.event-hero__cta .btn {
  flex: 1 1 0;
  max-width: 260px;
  justify-content: center;
}

.event-hero__cta .btn-outline {
  background-color: #F5E6D8;
  color: var(--color-primary);
  border-color: #F5E6D8;
}

.event-hero__cta .btn-outline:hover {
  background-color: #E8D0B8;
  border-color: #E8D0B8;
  color: var(--color-primary);
}


/* Event specific hero variations */
.event-hero--bruiloft .event-hero__overlay,
.event-hero--zakelijk .event-hero__overlay,
.event-hero--uitvaart .event-hero__overlay,
.event-hero--festival .event-hero__overlay,
.event-hero--jubileum .event-hero__overlay,
.event-hero--overons .event-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(74, 37, 24, 0.35) 0%,
    rgba(74, 37, 24, 0.65) 60%,
    rgba(50, 20, 10, 0.75) 100%
  );
}

/* Bruiloft: show more of the couple on mobile */
@media (max-width: 768px) {
  .event-hero--bruiloft .event-hero__bg-image {
    object-position: 25% center;
  }
}

/* Diensten hero image position */
.event-hero--diensten .event-hero__bg-image {
  object-position: center 70%;
}

/* Diensten service page hero overlays */
.event-hero--contact .event-hero__overlay,
.event-hero--diensten .event-hero__overlay,
.event-hero--evenementen .event-hero__overlay,
.event-hero--koffietrailer .event-hero__overlay,
.event-hero--mobiele-bar .event-hero__overlay,
.event-hero--barista .event-hero__overlay,
.event-hero--veluwsche-overvloed .event-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(74, 37, 24, 0.35) 0%,
    rgba(74, 37, 24, 0.65) 60%,
    rgba(50, 20, 10, 0.75) 100%
  );
}

/* ===== EVENT WHY SECTION ===== */
/* ===== EVENT MOSAIC (Waarom + Impressie gecombineerd) ===== */
.event-mosaic {
  padding: var(--space-3xl) 0;
}

.event-mosaic__header {
  margin-bottom: var(--space-2xl);
}

.event-mosaic__title {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.event-mosaic__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.event-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.event-mosaic__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.event-mosaic__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.event-mosaic__photo:hover img {
  transform: scale(1.05);
}

.event-mosaic__card {
  aspect-ratio: 4 / 3;
  background: var(--color-cream);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  cursor: default;
}

.event-mosaic__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(137, 69, 44, 0.15);
}

.event-mosaic__card-icon svg {
  stroke: var(--color-primary);
}

.event-mosaic__card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

.event-mosaic__card-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

.event-mosaic__grid--cards-only {
  grid-template-columns: repeat(4, 1fr);
}

.event-mosaic__grid--cards-only .event-mosaic__card {
  aspect-ratio: auto;
  min-height: 220px;
}

/* Kaarten met ingesloten foto */
.event-mosaic__card--with-photo {
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
}

.event-mosaic__card--with-photo .event-mosaic__card-photo-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  border-radius: var(--border-radius-lg);
}

.event-mosaic__card--with-photo .event-mosaic__card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform var(--transition-base);
}

.event-mosaic__card--with-photo:hover .event-mosaic__card-photo {
  transform: scale(1.04);
}

.event-mosaic__card--with-photo .event-mosaic__card-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 1024px) {
  .event-mosaic__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .event-mosaic__grid--cards-only {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .event-mosaic__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .event-mosaic__card {
    padding: var(--space-md);
    aspect-ratio: auto;
    min-height: 180px;
  }

  /* Reduce inner padding so text is as wide as the photo */
  .event-mosaic__card--with-photo .event-mosaic__card-body {
    padding: var(--space-sm) var(--space-xs);
  }

  .event-mosaic__card--with-photo .event-mosaic__card-title {
    font-size: var(--font-size-sm);
  }

  .event-mosaic__card--with-photo .event-mosaic__card-text {
    font-size: var(--font-size-xs);
  }
}

/* ===== (oud) EVENT-WHY ===== */
.event-why {
  padding: var(--space-3xl) 0;
}

.event-why__header {
  margin-bottom: var(--space-3xl);
}

.event-why__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.event-why__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
}

.event-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
}

.event-why__item {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-base);
}

.event-why__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(137, 69, 44, 0.15);
}

.event-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-bottom: var(--space-lg);
  color: var(--color-primary);
}

.event-why__item-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.event-why__item-text {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* ===== EVENT PROCESS ===== */
.event-process {
  padding: var(--space-3xl) 0;
  background: var(--color-accent);
}

.event-process__header {
  margin-bottom: var(--space-3xl);
}

.event-process__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.event-process__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
}

.event-process__timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.event-process__timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary-light);
}

.event-process__step {
  position: relative;
  padding-left: 80px;
  margin-bottom: var(--space-2xl);
}

.event-process__step:last-child {
  margin-bottom: 0;
}

.event-process__step-number {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  font-family: var(--font-heading);
  box-shadow: 0 4px 15px rgba(137, 69, 44, 0.3);
  z-index: 1;
}

.event-process__step-content {
  background: var(--color-white);
  padding: var(--space-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.event-process__step-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.event-process__step-text {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* ===== EVENT PACKAGES ===== */
.event-packages {
  padding: var(--space-3xl) 0;
}
.event-packages.bg-cream {
  background-color: #F5E6D8;
}

.event-packages__header {
  margin-bottom: var(--space-3xl);
}

.event-packages__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.event-packages__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
}

.event-packages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.event-package {
  position: relative;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
}

.event-package:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(137, 69, 44, 0.15);
  border-color: var(--color-primary);
}

.event-package__photo {
  margin: calc(-1 * var(--space-2xl)) calc(-1 * var(--space-2xl)) var(--space-xl);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  overflow: hidden;
  height: 280px;
}

.event-package__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.event-package:hover .event-package__photo img {
  transform: scale(1.05);
}

.event-package--featured {
  border-color: var(--color-primary);
  box-shadow: 0 8px 30px rgba(137, 69, 44, 0.2);
  transform: scale(1.05);
}

.event-package--featured:hover {
  transform: scale(1.05) translateY(-8px);
}

.event-package__badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.event-package__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.event-package__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.event-package__subtitle {
  color: var(--color-text-light);
  font-size: var(--font-size-base);
}

.event-package__price {
  text-align: center;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 2px solid var(--color-border);
}

.event-package__price-amount {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.event-package__price-note {
  display: block;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.event-package__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2xl) 0;
  flex-grow: 1;
}

.event-package__features li {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-xl);
  position: relative;
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.event-package__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-size-lg);
}

.event-packages__note {
  max-width: 700px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg);
  background: #CEA68E;
  border-radius: var(--border-radius-md);
  color: var(--color-text-light);
}

/* ===== EVENT TESTIMONIALS ===== */
.event-testimonials {
  padding: var(--space-3xl) 0;
  background: var(--color-accent);
}

.event-testimonials__header {
  margin-bottom: var(--space-3xl);
}

.event-testimonials__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.event-testimonials__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
}

.event-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
}

.event-testimonial {
  background: var(--color-white);
  padding: var(--space-2xl);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-base);
}

.event-testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(137, 69, 44, 0.15);
}

.event-testimonial__stars {
  color: #FFA500;
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.event-testimonial__text {
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
  font-style: italic;
}

.event-testimonial__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.event-testimonial__author strong {
  color: var(--color-primary);
  font-weight: 600;
}

.event-testimonial__author span {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* ===== EVENT FAQ ===== */
.event-faq {
  padding: var(--space-3xl) 0;
}

.event-faq__header {
  margin-bottom: var(--space-3xl);
}

.event-faq__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary);
}

.event-faq__list {
  max-width: 900px;
  margin: 0 auto;
}

.event-faq__item {
  background: var(--color-secondary-light);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-md);
  transition: all var(--transition-base);
  overflow: hidden;
}

.event-faq__item:hover {
  border-color: var(--color-primary-light);
  background: var(--color-pastel-cream);
}

.event-faq__item.active {
  border-color: var(--color-primary);
  background: var(--color-pastel-cream);
  box-shadow: var(--shadow-sm);
}

.event-faq__item.active .event-faq__answer {
  max-height: 500px;
  padding: 0 var(--space-xl) var(--space-xl);
  opacity: 1;
}

.event-faq__item.active .event-faq__icon,
.event-faq__item.active .event-faq__question svg {
  transform: rotate(180deg);
}

.event-faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary-dark);
  transition: all var(--transition-fast);
}

.event-faq__question:hover {
  color: var(--color-primary-dark);
}

.event-faq__icon,
.event-faq__question svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-primary);
}

.event-faq__answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all var(--transition-base);
}

.event-faq__answer p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* ===== EVENT GALLERY ===== */
.event-gallery {
  padding: var(--space-3xl) 0;
  background: var(--color-white);
}

.event-gallery__header {
  margin-bottom: var(--space-3xl);
}

.event-gallery__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary);
}

.event-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.event-gallery__grid--single {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 0 auto;
}

.event-gallery__grid--single .event-gallery__item {
  aspect-ratio: 16 / 9;
}

.event-gallery__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-base);
}

.event-gallery__item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(137, 69, 44, 0.2);
}

.event-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.event-gallery__item:hover img {
  transform: scale(1.1);
}

/* ===== EVENT FINAL CTA ===== */
.event-final-cta {
  padding: var(--space-3xl) 0;
}

.event-final-cta__content {
  max-width: 800px;
  margin: 0 auto;
}

.event-final-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.event-final-cta__text {
  font-size: var(--font-size-lg);
  color: var(--color-white);
  opacity: 0.95;
  margin-bottom: var(--space-2xl);
  line-height: var(--line-height-relaxed);
}

.event-final-cta__buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.event-final-cta__note {
  color: var(--color-white);
  opacity: 0.85;
  font-size: var(--font-size-sm);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .event-hero {
    min-height: 60vh;
    padding: var(--space-2xl) 0;
  }

  .event-hero__title {
    font-size: 2rem;
  }

  .event-hero__stats {
    gap: var(--space-lg);
  }

  .event-packages__grid {
    grid-template-columns: 1fr;
  }

  .event-package--featured {
    transform: scale(1);
  }

  .event-package--featured:hover {
    transform: translateY(-8px);
  }

  .event-process__timeline::before {
    left: 20px;
  }

  .event-process__step {
    padding-left: 60px;
  }

  .event-process__step-number {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }

  .event-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .event-gallery__grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .event-final-cta__buttons {
    flex-direction: column;
  }

  .event-final-cta__buttons .btn {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .event-hero {
    min-height: 50vh;
  }

  .event-hero__cta {
    flex-direction: column;
    align-items: center;
  }

  .event-hero__cta .btn {
    width: 100%;
    max-width: 320px;
  }

  .event-why__grid {
    grid-template-columns: 1fr;
  }

  .event-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== BUTTON VARIANTS FOR EVENT PAGES ===== */
.btn-white {
  background: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-white);
}

.btn-white:hover {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline-white {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.btn-outline-white:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

/* ===== PRINT STYLES ===== */
@media print {
  .event-hero,
  .event-final-cta {
    display: none;
  }
}

/* === OFFERTE CSS === */
/* ============================================
   DEBBARISTA - OFFERTE AANVRAGEN PAGE
   ============================================ */

/* Hero Section */
.offerte-hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary-light) 100%);
  text-align: center;
}

.offerte-hero__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.offerte-hero__subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-gray-dark);
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
  line-height: var(--line-height-relaxed);
}

.offerte-hero__steps {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
  max-width: 480px;
}

.offerte-hero__steps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.85);
  counter-increment: steps;
}

.offerte-hero__steps li::before {
  content: counter(steps);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.offerte-hero__steps {
  counter-reset: steps;
}

.offerte-hero__steps li strong {
  color: #fff;
}

.offerte-hero__benefits {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.benefit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.benefit svg {
  color: var(--color-primary);
}

/* Form Section */
.offerte-form-section {
  padding: var(--space-3xl) 0;
  background-color: var(--color-white);
}

.offerte-form-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* Progress Bar */
.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3xl);
  padding: var(--space-xl);
  background-color: var(--color-gray-lightest);
  border-radius: var(--border-radius-lg);
}

.progress-bar__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  transition: all var(--transition-base);
}

.progress-bar__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-gray-light);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  transition: all var(--transition-base);
}

.progress-bar__step.active .progress-bar__circle {
  background-color: var(--color-primary);
  transform: scale(1.1);
}

.progress-bar__step.completed .progress-bar__circle {
  background-color: var(--color-success);
}

.progress-bar__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  font-weight: var(--font-weight-medium);
  text-align: center;
  transition: color var(--transition-base);
}

.progress-bar__step.active .progress-bar__label {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.progress-bar__line {
  flex: 1;
  height: 2px;
  background-color: var(--color-gray-light);
  margin: 0 var(--space-sm);
  position: relative;
  top: -12px;
}

/* Mobile progress bar */
@media (max-width: 768px) {
  .progress-bar {
    padding: var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .progress-bar__label {
    display: none;
  }

  .progress-bar__circle {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-base);
  }

  .progress-bar__line {
    margin: 0 var(--space-xs);
    top: 0;
  }
}

/* Very small screens - prevent progress bar overflow */
@media (max-width: 400px) {
  .progress-bar {
    padding: var(--space-sm) var(--space-xs);
  }

  .progress-bar__circle {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }

  .progress-bar__line {
    margin: 0 2px;
  }
}

/* Form section divider (used in combined step 4) */
.form-section__subtitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-lg);
}

.form-section__divider {
  border: none;
  border-top: 1px solid var(--color-gray-light);
  margin: var(--space-lg) 0 var(--space-md);
}

/* Box around contactgegevens — matches tijdblok border style */
.form-section__box {
  background: #fff;
  border: 1.5px solid var(--color-border, #e8ddd3);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-lg);
}

/* Compact inputs inside the contact box */
.form-section__box .form-input,
.form-section__box .form-select,
.form-section__box .form-textarea {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.form-section__box .form-group {
  margin-bottom: var(--space-sm);
}

.form-section__box .form-label {
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
}

.form-section__box .form-grid {
  gap: var(--space-sm);
}

.form-section__box .form-textarea {
  min-height: 70px;
}

/* Locatie adres label above postcode/huisnummer */
.tijdblok__address-section-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray);
  margin-bottom: 0.5rem;
}

/* Form Container */
.offerte-form-container {
  background-color: var(--color-white);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2xl);
}

/* Form Steps */
.form-step {
  display: none;
  animation: fadeInUp 0.4s ease-out;
}

.form-step.active {
  display: block;
}

.form-step__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  text-align: center;
}

.form-step__description {
  text-align: center;
  color: var(--color-gray);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2xl);
}

.form-step__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.form-step__actions .btn {
  min-width: 180px;
}

@media (max-width: 576px) {
  .offerte-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .offerte-hero__benefits {
    gap: var(--space-lg);
  }

  .offerte-form-section {
    padding: var(--space-2xl) 0;
  }

  .offerte-form-container {
    padding: var(--space-lg);
  }

  .form-step__description {
    margin-bottom: var(--space-xl);
  }

  .form-step__actions {
    flex-direction: column;
    margin-top: var(--space-xl);
  }

  .form-step__actions .btn {
    width: 100%;
  }
}

/* Event Type Cards */
.event-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.event-type-card {
  position: relative;
  cursor: pointer;
}

.event-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.event-type-card__content {
  background-color: var(--color-gray-lightest);
  border: 3px solid var(--color-gray-lighter);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-2xl);
}

.event-type-card:hover .event-type-card__content {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.event-type-card input:checked ~ .event-type-card__content {
  background-color: var(--color-accent);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.event-type-card__icon {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--color-primary);
}

.event-type-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.event-type-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

/* Event Type Cards - Mobile: 2 kolommen, compacter */
@media (max-width: 576px) {
  .event-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .event-type-card__content {
    padding: var(--space-md);
    border-width: 2px;
  }

  .event-type-card__icon svg {
    width: 32px;
    height: 32px;
  }

  .event-type-card__icon {
    margin-bottom: var(--space-sm);
  }

  .event-type-card__title {
    font-size: var(--font-size-base);
  }

  .event-type-card__text {
    font-size: var(--font-size-xs);
  }
}

/* Service Selection */
.service-selection {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.service-card-select {
  position: relative;
  cursor: pointer;
}

.service-card-select input[type="radio"],
.service-card-select input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.service-card-select__content {
  display: flex;
  gap: var(--space-lg);
  background-color: var(--color-gray-lightest);
  border: 3px solid var(--color-gray-lighter);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.service-card-select:hover .service-card-select__content {
  border-color: var(--color-secondary);
  transform: translateX(4px);
}

.service-card-select input:checked ~ .service-card-select__content {
  background-color: var(--color-accent);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.service-card-select__image {
  width: 240px;
  height: 160px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.service-card-select__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card-select__info {
  flex: 1;
}

.service-card-select__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.service-card-select__text {
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-sm);
}

.service-card-select__tag {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.service-card-select__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(137, 69, 44, 0.07);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.service-card-select__note svg {
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--color-primary);
}

@media (max-width: 576px) {
  .service-card-select__content {
    flex-direction: column;
  }

  .service-card-select__image {
    width: 100%;
    height: 180px;
  }
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.form-group-full {
  grid-column: 1 / -1;
}

@media (max-width: 576px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Guest Selection */
.guest-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.guest-card {
  position: relative;
  cursor: pointer;
}

.guest-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.guest-card__content {
  background-color: var(--color-gray-lightest);
  border: 3px solid var(--color-gray-lighter);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-base);
  height: 100%;
}

.guest-card:hover .guest-card__content {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
}

.guest-card input:checked ~ .guest-card__content {
  background-color: var(--color-accent);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.guest-card__icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.guest-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.guest-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

/* Success/Error Messages */
.offerte-success,
.offerte-error {
  text-align: center;
  padding: var(--space-3xl);
  animation: fadeIn 0.5s ease-out;
}

.offerte-success__icon,
.offerte-error__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2xl);
  color: var(--color-success);
}

.offerte-error__icon {
  color: var(--color-error);
}

.offerte-success__title,
.offerte-error__title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-lg);
}

.offerte-success__title {
  color: var(--color-success);
}

.offerte-error__title {
  color: var(--color-error);
}

.offerte-success__text,
.offerte-error__text {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
  line-height: var(--line-height-relaxed);
}

.offerte-success__actions,
.offerte-error__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* Trust Section */
.offerte-trust {
  padding: var(--space-3xl) 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.trust-item {
  text-align: center;
  padding: var(--space-xl);
}

.trust-item__icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-md);
}

.trust-item h3 {
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.trust-item p {
  color: var(--color-gray);
  font-size: var(--font-size-base);
}

/* Form Validation */
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--color-error);
}

.form-input:invalid:not(:placeholder-shown),
.form-select:invalid,
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.form-input:valid:not(:placeholder-shown),
.form-select:valid:has(option:checked:not([value=""])),
.form-textarea:valid:not(:placeholder-shown) {
  border-color: var(--color-success);
}

.form-input--error {
  border-color: var(--color-error) !important;
}

.form-error {
  display: block;
  color: var(--color-error);
  font-size: var(--font-size-xs);
  margin-top: var(--space-xs);
}

/* Auto-save Indicator */
.auto-save-indicator {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  background: var(--color-success);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: var(--z-sticky);
}

.auto-save-indicator.show {
  opacity: 1;
  transform: translateY(0);
}

.auto-save-indicator svg {
  width: 16px;
  height: 16px;
}

/* Loading State */
.offerte-form.loading {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}

.offerte-form.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.8s linear infinite;
}

/* === QUIZ CSS === */
/* Coffee Quiz Styles - See pages/coffee-quiz.html */
/* Simplified CSS - full version available */

.quiz-hero {
  padding: var(--space-3xl) 0;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary-light) 100%);
}

.quiz-hero__content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.quiz-section {
  padding: var(--space-3xl) 0;
}

.quiz-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-xl);
}

.quiz-progress__bar {
  height: 12px;
  background: var(--color-gray-lighter);
  border-radius: var(--border-radius-full);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.quiz-progress__fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
  width: 20%;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
}

.quiz-option {
  background: var(--color-gray-lightest);
  border: 3px solid var(--color-gray-lighter);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
}

.quiz-option:hover {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.quiz-option__icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-lg);
}

.quiz-results-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-3xl);
}

.result-product {
  background: var(--color-accent);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  margin: var(--space-2xl) 0;
}

.result-product__image {
  width: 250px;
  height: 250px;
  margin: 0 auto var(--space-xl);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

/* Quiz: Selected option state */
.quiz-option.selected {
  border-color: var(--color-primary);
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: translateY(-4px);
}

/* Quiz: Back button */
.quiz-back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: none;
  color: var(--color-text-light);
  cursor: pointer;
  font-size: var(--font-size-base);
  padding: var(--space-md) 0;
  margin-top: var(--space-lg);
  transition: color var(--transition-base);
}
.quiz-back-btn:hover { color: var(--color-primary); }

/* Quiz: Hero features (3 checkmarks) */
.quiz-hero__features {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
  flex-wrap: wrap;
}
.quiz-hero__feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.quiz-hero__feature svg { color: var(--color-primary); flex-shrink: 0; }

/* Quiz: Two-column layout for Q7 */
.quiz-options--two {
  grid-template-columns: repeat(2, 1fr);
}
.quiz-option--large {
  padding: var(--space-2xl) var(--space-xl);
  position: relative;
}
.quiz-option--recommended {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-accent) 0%, #fff 100%);
}
.quiz-option__badge {
  position: absolute;
  top: -12px;
  right: var(--space-lg);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   QUIZ RESULTS - V4 Intelligent Results
   ============================================ */
.quiz-results {
  padding: var(--space-3xl) 0;
  background: var(--color-gray-lightest);
}
.quiz-results-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 0;
}

/* Result header */
.quiz-result__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.quiz-result__confetti {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}
.quiz-result__title {
  font-size: var(--font-size-3xl);
  color: var(--color-text);
}

/* Primary product recommendation */
.quiz-result__primary {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-2xl);
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-2xl);
}
.quiz-result__product-image {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--color-gray-lighter);
}
.quiz-result__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quiz-result__match-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-full);
}
.quiz-result__product-name {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-xs);
}
.quiz-result__product-tagline {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lg);
}
.quiz-result__product-desc {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}
.quiz-result__product-details {
  margin-bottom: var(--space-lg);
}
.quiz-result__detail {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
}
.quiz-result__detail .star { color: var(--color-gray-light); font-size: 1.1em; }
.quiz-result__detail .star.filled { color: #f59e0b; }
.quiz-result__tags { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.quiz-result__tag {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-full);
}

/* Quantity calculation section */
.quiz-result__quantity {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-2xl);
}
.quiz-result__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xl);
  color: var(--color-text);
}
.quiz-result__section-title svg {
  color: var(--color-primary);
  flex-shrink: 0;
}
.quiz-result__calc {
  margin-bottom: var(--space-xl);
}
.quiz-result__calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-lighter);
  font-size: var(--font-size-base);
}
.quiz-result__calc-label { color: var(--color-text-light); }
.quiz-result__calc-value { font-weight: var(--font-weight-semibold); }
.quiz-result__calc-total {
  border-bottom: none;
  border-top: 2px solid var(--color-primary);
  margin-top: var(--space-sm);
  padding-top: var(--space-lg);
}
.quiz-result__calc-total .quiz-result__calc-label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  font-size: var(--font-size-lg);
}
.quiz-result__calc-total .quiz-result__calc-value {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}
.quiz-result__recommendation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  background: var(--color-accent);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  border-left: 4px solid var(--color-primary);
}
.quiz-result__rec-icon { font-size: 2rem; flex-shrink: 0; }
.quiz-result__rec-text strong {
  display: block;
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}
.quiz-result__rec-text p {
  color: var(--color-text-light);
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
}

/* Purchase options (eenmalig vs abonnement) */
.quiz-result__purchase {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-2xl);
}
.quiz-result__purchase-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.quiz-result__option {
  border: 2px solid var(--color-gray-lighter);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  text-align: center;
  position: relative;
  transition: all var(--transition-base);
}
.quiz-result__option:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}
.quiz-result__option--selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.quiz-result__option--recommended {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-white) 100%);
}
.quiz-result__option-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--border-radius-full);
  white-space: nowrap;
}
.quiz-result__option h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}
.quiz-result__option-price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.quiz-result__option-price small {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
}
.quiz-result__option-size {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
}
.quiz-result__option-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  text-align: left;
}
.quiz-result__option-perks li {
  padding: var(--space-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  position: relative;
  padding-left: var(--space-lg);
}
.quiz-result__option-perks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}
.btn-block { display: block; width: 100%; text-align: center; }

/* Secondary suggestion */
.quiz-result__secondary {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-2xl);
}
.quiz-result__secondary-card {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  background: var(--color-gray-lightest);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}
.quiz-result__secondary-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  flex-shrink: 0;
}
.quiz-result__secondary-info h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}
.quiz-result__secondary-info p {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

/* Result actions */
.quiz-result__actions {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ===== Quiz Share Widget ===== */
.quiz-share-widget {
  background: linear-gradient(135deg, #1A0D05 0%, #2C1A0E 60%, #89452C 100%);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  margin: 2.5rem 0 1rem;
  border: 1px solid rgba(232, 201, 160, 0.2);
}
.quiz-share-widget__header h3 {
  color: #fff;
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
}
.quiz-share-widget__header p {
  color: rgba(232, 201, 160, 0.75);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.quiz-share-preview {
  background: linear-gradient(160deg, #1A0D05, #89452C);
  border-radius: 10px;
  padding: 1.5rem 1rem;
  margin: 0 auto 1.5rem;
  width: 200px;
  height: 355px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 201, 160, 0.25);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.quiz-share-preview::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(137, 69, 44, 0.25);
}
.quiz-share-preview__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  position: relative;
}
.quiz-share-preview__brand {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 1.1rem;
  font-weight: bold;
  color: #E8C9A0;
  letter-spacing: 2px;
}
.quiz-share-preview__label {
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: rgba(232, 201, 160, 0.65);
  text-transform: uppercase;
}
.quiz-share-preview__product {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 1.7rem;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  margin: 0.25rem 0;
}
.quiz-share-preview__tagline {
  font-style: italic;
  font-size: 0.65rem;
  color: #E8C9A0;
}
.quiz-share-preview__badge {
  background: rgba(232, 201, 160, 0.12);
  border: 1px solid rgba(232, 201, 160, 0.6);
  color: #fff;
  font-weight: bold;
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  margin: 0.4rem 0;
}
.quiz-share-preview__flavor {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
}
.quiz-share-preview__url {
  font-size: 0.5rem;
  color: rgba(232, 201, 160, 0.45);
  margin-top: 0.4rem;
}
.quiz-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.quiz-share-widget__note {
  font-size: 0.78rem;
  color: rgba(232, 201, 160, 0.45);
  margin: 0;
}

/* Quiz CTA section */
.quiz-cta {
  padding: var(--space-3xl) 0;
}

@media (max-width: 768px) {
  .quiz-hero {
    padding: var(--space-2xl) 0;
  }
  .quiz-hero__features {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }
  .quiz-section {
    padding: var(--space-2xl) 0;
  }
  .quiz-container {
    padding: var(--space-xl);
  }
  .quiz-options {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin: var(--space-xl) 0;
  }
  .quiz-options--two {
    grid-template-columns: repeat(2, 1fr);
  }
  .quiz-option {
    padding: var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .quiz-option__icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-sm);
  }
  .quiz-option__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-xs);
    line-height: var(--line-height-snug);
  }
  .quiz-option__text {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
    margin: 0;
  }
  .quiz-result__primary {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .quiz-result__product-image {
    max-width: 250px;
    margin: 0 auto;
  }
  .quiz-result__purchase-options {
    grid-template-columns: 1fr;
  }
  .quiz-result__secondary-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   V4 NEW STYLES - FLOATING CONTACT BUTTON
   ============================================ */
.floating-contact {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: var(--color-white);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all var(--transition-base);
  animation: floatingPulse 3s ease-in-out infinite;
}

.floating-contact:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
  color: var(--color-white);
}

.floating-contact svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.floating-contact__text { display: none; }

@keyframes floatingPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6); }
}

@media (max-width: 768px) {
  .floating-contact {
    bottom: 1rem;
    right: 1rem;
  }
}

/* ============================================
   V4 NEW STYLES - REVIEW BAR (Card Scroller)
   ============================================ */
/* Google Reviews Carousel */
.google-reviews {
  padding: var(--space-3xl) 0;
  background: #CEA68E;
}

.google-reviews__header {
  margin-bottom: var(--space-2xl);
}

.google-reviews__title {
  margin-bottom: var(--space-xl);
}

.google-reviews__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-white);
  border-radius: var(--border-radius-full);
  padding: var(--space-sm) var(--space-xl);
  box-shadow: var(--shadow-md);
}

.google-reviews__google-icon {
  flex-shrink: 0;
}

.google-reviews__rating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.google-reviews__score {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-dark);
}

.google-reviews__stars {
  color: #FBBC05;
  font-size: var(--font-size-lg);
  letter-spacing: 1px;
}

.google-reviews__count {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.google-reviews__carousel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
}

.google-reviews__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-primary);
  transition: all var(--transition-fast);
}

.google-reviews__arrow:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.google-reviews__track-wrapper {
  flex: 1;
  overflow: hidden;
  /* padding/margin zodat box-shadow van kaarten zichtbaar is */
  padding: 6px;
  margin: -6px;
  touch-action: pan-y;
}

.google-reviews__track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.google-reviews__card {
  /* Breedte via CSS-variabele, ingesteld door JS op basis van wrapper-breedte */
  flex: 0 0 var(--review-card-width, 320px);
  width: var(--review-card-width, 320px);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.google-reviews__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.google-reviews__card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.google-reviews__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.google-reviews__avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.google-reviews__author-info {
  flex: 1;
  min-width: 0;
}

.google-reviews__author {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-dark);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-reviews__time {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

.google-reviews__card-stars {
  color: #FBBC05;
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
  flex-shrink: 0;
}

.google-reviews__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.google-reviews__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.google-reviews__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.google-reviews__dot.active {
  background: var(--color-white);
  transform: scale(1.2);
}

.google-reviews__footer {
  margin-top: var(--space-xl);
}

.google-reviews__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.google-reviews__link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Tablet: pijlen iets kleiner */
@media (max-width: 992px) {
  .google-reviews__arrow {
    width: 36px;
    height: 36px;
  }
}

/* Mobiel: pijlen verbergen, swipe is actief */
@media (max-width: 600px) {
  .google-reviews {
    padding: var(--space-2xl) 0;
    overflow: hidden; /* voorkom horizontale overflow door negatieve margin op wrapper */
  }

  .google-reviews__badge {
    padding: var(--space-sm) var(--space-lg);
    gap: var(--space-sm);
  }

  .google-reviews__rating {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .google-reviews__count {
    width: 100%;
    text-align: center;
    font-size: var(--font-size-xs);
  }

  .google-reviews__arrow {
    display: none;
  }

  /* Carousel zonder pijlen: volle breedte, overflow ingesnoerd */
  .google-reviews__carousel {
    padding: 0;
    overflow: hidden;
  }
}

/* ============================================
   V4 NEW STYLES - HERO REDESIGN
   ============================================ */
.hero-v4 {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
}

.hero-v4__background {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}

.hero-v4__background-img {
  width: 100%; height: 100%; object-fit: cover;
}

.hero-v4__overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(100, 69, 44, 0.6) 0%, rgba(206, 166, 142, 0.55) 100%);
  z-index: 2;
}

.hero-v4__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  animation: fadeInUp 1s ease-out;
}

.hero-v4__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);
  line-height: var(--line-height-tight);
}

.hero-v4__subtitle {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-white);
  margin-bottom: var(--space-2xl);
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.95;
}

.hero-v4__buttons {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

.hero-v4__buttons .btn {
  /* Equal explicit width ensures the gap falls exactly on the center axis */
  flex: 0 0 260px;
  width: 260px;
  padding: 1rem 2.5rem;
  font-size: var(--font-size-lg);
  justify-content: center;
}

.hero-v4__buttons .btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-full);
}

.hero-v4__buttons .btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.hero-v4__buttons .btn-secondary-hero {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-white);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-full);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.hero-v4__buttons .btn-secondary-hero:hover {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.hero-v4__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  opacity: 0.8;
  margin-top: var(--space-lg);
  animation: bounce-v4 2s infinite;
}

.hero-v4__scroll-text {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 991px) {
  .hero-v4 { padding: calc(var(--header-height-mobile) + var(--space-2xl)) 0 var(--space-2xl); }
}

@media (max-width: 768px) {
  .hero-v4 { min-height: 80vh; }
  .hero-v4__buttons { flex-direction: column; align-items: stretch; }
  .hero-v4__buttons .btn { flex: 1 1 auto; width: 100%; min-width: unset; padding: 0.55rem 1.5rem; font-size: var(--font-size-base); }
  .hero-v4__scroll { display: none; }
}

/* ============================================
   V4 NEW STYLES - COMPACT INSTAGRAM
   ============================================ */
.instagram-compact {
  padding: var(--space-2xl) 0;
  background-color: var(--color-gray-lightest);
}

.instagram-compact .instagram__header {
  margin-bottom: var(--space-xl);
}

.instagram-compact .instagram__grid {
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

@media (max-width: 992px) {
  .instagram-compact .instagram__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
  .instagram-compact .instagram__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   V4 NEW STYLES - WEBSHOP SUB-HEADER
   ============================================ */
.header__sub-nav {
  display: none;
  background-color: var(--color-primary);
  padding: 0;
  height: 50px;
}

.header__sub-nav.active { display: block; }

.header__sub-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  list-style: none;
  margin: 0; padding: 0;
  height: 100%;
}

.header__sub-nav-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) 0;
  transition: all var(--transition-fast);
  position: relative;
  letter-spacing: 0.3px;
}

.header__sub-nav-link:hover,
.header__sub-nav-link.active { color: var(--color-white); }

.header__sub-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background-color: var(--color-white);
  transition: width var(--transition-fast);
}

.header__sub-nav-link:hover::after,
.header__sub-nav-link.active::after { width: 100%; }

.header__sub-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50px;
}

.header__sub-nav-cart {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header__sub-nav-cart:hover { color: var(--color-white); }

.header__sub-nav-cart-count {
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (max-width: 991px) {
  .header__sub-nav { display: none !important; }
}

/* ============================================
   V4 NEW STYLES - HEADER DUAL CTA
   ============================================ */
.header__cta-dual {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.header__cta-dual .btn {
  border-radius: var(--border-radius-full);
}

/* ===== SPLIT CTA BUTTON (desktop + mobile) ===== */
.header__cta-split {
  display: inline-flex;
  align-items: center;
  background-color: #F5E6D8;
  border: var(--border-width-thick) solid #F5E6D8;
  border-radius: var(--border-radius-full);
  overflow: hidden;
  text-decoration: none;
}

.header__cta-split__text {
  display: flex;
  align-items: center;
  padding: 0.6rem var(--space-sm) 0.6rem var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  line-height: 1;
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header__cta-split__text:hover {
  background-color: #EBCDB5;
  color: var(--color-primary-dark);
}

.header__cta-split__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(139, 90, 43, 0.3);
  margin: 7px 0;
  flex-shrink: 0;
}

.header__cta-split__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem var(--space-lg);
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header__cta-split__cart:hover {
  background-color: #EBCDB5;
  color: var(--color-primary-dark);
}
.header__cta-split__cart svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.header__cta-split__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  background: var(--color-primary);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Mobile variant — full width, outline style */
.header__cta-split--mobile {
  display: flex;
  width: 100%;
  background-color: transparent;
  border-color: var(--color-primary);
}
.header__cta-split--mobile .header__cta-split__text {
  flex: 1;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--font-size-base);
}
.header__cta-split--mobile .header__cta-split__text:hover {
  background-color: rgba(62, 39, 35, 0.06);
}
.header__cta-split--mobile .header__cta-split__divider {
  background: rgba(62, 39, 35, 0.3);
}
.header__cta-split--mobile .header__cta-split__cart {
  color: var(--color-primary);
  padding: var(--button-padding-y) var(--space-lg);
}
.header__cta-split--mobile .header__cta-split__cart:hover {
  background-color: rgba(62, 39, 35, 0.06);
}

@media (max-width: 991px) {
  .header__cta-dual { display: none; }
}

/* ============================================
   V4 NEW STYLES - POPULARITY LABELS
   ============================================ */
.popular-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.popular-label--green { background: linear-gradient(135deg, var(--color-success) 0%, #5ba366 100%); }
.popular-label--peach { background: linear-gradient(135deg, #E67E22 0%, #F39C12 100%); }

/* ============================================
   V4 NEW STYLES - EVENEMENTEN LANDING PAGE
   ============================================ */
.events-landing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

.events-landing-card {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.events-landing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.events-landing-card__image {
  position: relative;
  width: 100%; height: 300px;
  overflow: hidden;
  flex-shrink: 0;
}

.events-landing-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.events-landing-card:hover .events-landing-card__image img {
  transform: scale(1.08);
}

.events-landing-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
}

.events-landing-card__content { padding: var(--space-xl); flex: 1; display: flex; flex-direction: column; }

.events-landing-card__title {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.events-landing-card__text {
  color: var(--color-gray);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
  flex: 1;
}

.events-landing-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
  transition: gap var(--transition-fast);
}

.events-landing-card__link:hover { gap: var(--space-md); }

@media (max-width: 1024px) {
  .events-landing__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
}
@media (max-width: 640px) {
  .events-landing__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.events-landing__grid--5col {
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-lg);
}
.events-landing__grid--5col > *:nth-child(-n+3) { grid-column: span 2; }
.events-landing__grid--5col > *:nth-child(4)    { grid-column: 2 / span 2; }
.events-landing__grid--5col > *:nth-child(5)    { grid-column: 4 / span 2; }

@media (max-width: 1024px) {
  .events-landing__grid--5col { grid-template-columns: repeat(2, 1fr); }
  .events-landing__grid--5col > *,
  .events-landing__grid--5col > *:nth-child(4),
  .events-landing__grid--5col > *:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 640px) {
  .events-landing__grid--5col { grid-template-columns: 1fr; gap: var(--space-md); }
  .events-landing__grid--5col > *,
  .events-landing__grid--5col > *:nth-child(4),
  .events-landing__grid--5col > *:nth-child(5) { grid-column: span 1; }
}

/* ============================================
   V4 UPDATED STYLES - OFFERTE CLICKABLE STEPS
   ============================================ */
.progress-bar__step.clickable { cursor: pointer; }

.progress-bar__step.clickable:hover .progress-bar__circle {
  background-color: var(--color-primary-light);
  color: var(--color-white);
  transform: scale(1.1);
}

.progress-bar__step.completed .progress-bar__circle {
  background-color: var(--color-success);
  color: var(--color-white);
}

.progress-bar__circle { transition: all var(--transition-fast); }

/* Incomplete step = red (niet ingevuld) */
.progress-bar__step.incomplete .progress-bar__circle {
  background-color: var(--color-error);
  color: var(--color-white);
}

.progress-bar__step.incomplete .progress-bar__label {
  color: var(--color-error);
}

.form-group--conditional {
  display: none;
  animation: slideDown 0.3s ease-out;
}

.form-group--conditional.active { display: block; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   V4 STYLE - LINE-ART ICONS & SOFTER CONTAINERS
   ============================================ */
.intro__usp-icon {
  border-radius: var(--border-radius-xl);
  background: linear-gradient(135deg, var(--color-pastel-cream) 0%, var(--color-accent) 100%);
}

.event-why__icon {
  background: linear-gradient(135deg, var(--color-pastel-cream) 0%, var(--color-pastel-peach) 100%);
  border-radius: var(--border-radius-xl);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}

/* ============================================
   V4 NEW STYLES - EXTRA OPTIES (Step 4)
   ============================================ */
.extras-section-box {
  background: var(--color-surface, #FAF7F4);
  border: 2px solid var(--color-border, #e8ddd3);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

@media (max-width: 768px) {
  .extras-grid { grid-template-columns: 1fr; }
}

.extra-option-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.extra-option-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.extra-option-card__content {
  padding: var(--space-xl);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: all var(--transition-fast);
  background: var(--color-white);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.extra-option-card input[type="checkbox"]:checked + .extra-option-card__content {
  border-color: var(--color-primary);
  background: rgba(137, 69, 44, 0.08);
  box-shadow: 0 0 0 3px rgba(137, 69, 44, 0.18), 0 6px 20px rgba(137, 69, 44, 0.12);
  transform: translateY(-3px);
}

.extra-option-card__content:hover {
  border-color: var(--color-primary);
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(137, 69, 44, 0.15);
  background: rgba(137, 69, 44, 0.04);
}

.extra-option-card__icon {
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  display: flex;
  justify-content: center;
  align-items: center;
}

.extra-option-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.extra-option-card__text {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-sm);
}

/* Sub-options for Verse Thee */
.extra-option-card__sub-options {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.extra-option-card__sub-options.active {
  display: flex;
}

.extra-sub-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.extra-sub-option:hover {
  border-color: var(--color-primary);
  background: var(--color-pastel-cream);
}

.extra-sub-option input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* Service card info tag variant */
.service-card-select__tag--info {
  background: linear-gradient(135deg, var(--color-pastel-blue, #B0D4F1) 0%, #8CB8E0 100%);
  color: var(--color-text);
}

/* ============================================
   V4 NEW STYLES - OFFERTE SUCCESS EMAIL NOTICE
   ============================================ */
.offerte-success__email-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: rgba(206, 166, 142, 0.15);
  border-radius: var(--border-radius-lg);
  border: 2px solid var(--color-primary);
  margin: var(--space-xl) auto;
  max-width: 500px;
  color: var(--color-primary-dark);
  font-size: var(--font-size-base);
}

.offerte-success__email-notice svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* ============================================
   V4 NEW STYLES - COMPARISON TABLE
   ============================================ */
.comparison-section {
  padding: var(--space-4xl) 0;
  background: var(--color-gray-light, #f8f6f3);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.comparison-table td:first-child {
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: var(--color-pastel-cream); }

.comparison-table .check { color: var(--color-primary); font-weight: bold; }
.comparison-table .cross { color: var(--color-gray); }

/* ============================================
   V4 NEW STYLES - SIMPLIFIED SHOP (3 Melanges)
   ============================================ */
.shop-teaser__products--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .shop-teaser__products--three { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .shop-teaser__products--three { grid-template-columns: 1fr; }

  .product-preview__sizes {
    gap: var(--space-sm);
  }

  .product-preview__size {
    padding: var(--space-xs) var(--space-sm);
  }

  .product-preview__size-price {
    font-size: var(--font-size-base);
  }

  .product-preview__size-label {
    font-size: 0.6rem;
  }
}

.product-preview__desc {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.product-preview__sizes {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.product-preview__size {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-pastel-cream);
}

.product-preview__size-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.product-preview__size-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.product-preview__btn {
  width: 100%;
  text-align: center;
}

/* ============================================
   OVER ONS PAGE
   ============================================ */

/* Story section - image + text grid */
.about-story {
  padding: var(--space-4xl) 0;
}

.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 768px) {
  .about-story__grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-story__grid--reverse {
    direction: rtl;
  }
  .about-story__grid--reverse > * {
    direction: ltr;
  }
}

.about-story__image img {
  width: 100%;
  border-radius: var(--border-radius-lg);
  object-fit: cover;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}

.about-story__label {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.about-story__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: #89452C;
  margin-bottom: var(--space-lg);
}

.about-story__text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-md);
}

.about-story__text strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Values grid */
.about-values {
  padding: var(--space-4xl) 0;
}

.about-values__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
  margin-top: var(--space-sm);
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
}

.about-values__card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.about-values__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.about-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-secondary-light);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.about-values__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}

.about-values__text {
  color: var(--color-gray-dark);
  line-height: var(--line-height-relaxed);
}

/* Trailer features */
.about-trailer {
  padding: var(--space-4xl) 0;
}

.about-trailer__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.about-trailer__feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
}

.about-trailer__feature svg {
  flex-shrink: 0;
}

/* Reviews */
.about-reviews {
  padding: var(--space-4xl) 0;
}

.about-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.about-reviews__card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
}

.about-reviews__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
}

.about-reviews__text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-dark);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

.about-reviews__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-reviews__author strong {
  color: var(--color-primary-dark);
}

.about-reviews__author span {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

/* Social links */
.about-social {
  padding: var(--space-4xl) 0;
}

.about-social__links {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.about-social__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--border-radius-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.about-social__btn--instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
}

.about-social__btn--instagram:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.about-social__btn--facebook {
  background: #1877f2;
  color: white;
}

.about-social__btn--facebook:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   OVER ONS — STATS STRIP
   ============================================ */

.about-stats {
  background: var(--color-primary-dark);
  padding: var(--space-3xl) 0;
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl) var(--space-xl);
  text-align: center;
}

@media (min-width: 768px) {
  .about-stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .about-stats__item + .about-stats__item {
    border-left: 1px solid rgba(255,255,255,0.15);
  }
}

.about-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-lg);
}

.about-stats__number-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.about-stats__number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1;
}

.about-stats__suffix {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary-light);
  line-height: 1;
}

.about-stats__label {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-semibold);
}

/* ============================================
   OVER ONS — PULL QUOTE
   ============================================ */

.about-quote {
  background: var(--color-secondary-light);
  padding: var(--space-4xl) 0;
}

.about-quote__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.about-quote__mark {
  color: var(--color-primary);
  opacity: 0.25;
  width: 48px;
  height: auto;
  flex-shrink: 0;
}

.about-quote__text {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.5;
  color: var(--color-primary-dark);
  font-style: italic;
  font-weight: normal;
}

.about-quote__author {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  letter-spacing: 0.05em;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
}

/* ============================================
   OVER ONS — TEAM & TRAILER COMBINED
   ============================================ */

.about-combined {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .about-combined {
    grid-template-columns: 1fr 3fr;
  }
}

.about-combined__media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.about-combined__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-combined__panel {
  background: var(--color-secondary-light);
  padding: var(--space-3xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .about-combined__panel {
    padding: var(--space-4xl) var(--space-3xl);
  }
}

.about-combined__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-primary-dark);
  line-height: 1.3;
}

.about-combined__intro {
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  line-height: var(--line-height-relaxed);
}

/* Person cards (3-col grid) */
.about-combined__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.about-combined__card {
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  padding: 10px var(--space-md) var(--space-md);
  box-shadow: var(--shadow-sm);
  /* Subgrid: card spans 5 rows, children share tracks with sibling cards */
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 4px;
  justify-items: center;
  text-align: center;
  align-items: start;
}

.about-combined__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  flex-shrink: 0;
  letter-spacing: 0;
}

.about-combined__avatar--1 { background: var(--color-primary); }
.about-combined__avatar--2 { background: var(--color-primary-light); }
.about-combined__avatar--3 { background: #7a5c45; }

.about-combined__card-name {
  font-size: var(--font-size-sm);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.about-combined__card-role {
  font-size: 0.7rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-semibold);
}

.about-combined__card-bio {
  font-size: 0.75rem;
  color: var(--color-gray);
  line-height: 1.4;
  margin-top: 2px;
}

.about-combined__funfact {
  font-size: 0.72rem;
  color: var(--color-primary);
  background: rgba(137, 69, 44, 0.07);
  border-left: 2px solid var(--color-secondary);
  padding: 4px 8px;
  border-radius: 0 6px 6px 0;
  line-height: 1.4;
  width: 100%;
  align-self: end;
}

.about-combined__funfact-label {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 5px;
  color: var(--color-primary-light);
}

/* Trailer specs inside panel */
.about-combined__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}

.about-combined__spec {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  line-height: 1.4;
}

.about-combined__spec svg {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}

/* ── Mobiele fix: team sectie ── */
@media (max-width: 767px) {
  /* Panel: minder horizontale padding */
  .about-combined__panel {
    padding: var(--space-xl) var(--space-lg);
  }

  /* Kaarten: 1 per rij */
  .about-combined__cards {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Kaart: horizontale layout via grid (avatar links, tekst rechts) */
  .about-combined__card {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: var(--space-md);
    row-gap: 2px;
    align-items: start;
    text-align: left;
  }

  /* Avatar spans alle rijen */
  .about-combined__avatar {
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: center;
    margin-bottom: 0;
  }

  .about-combined__card-name,
  .about-combined__card-role,
  .about-combined__card-bio {
    grid-column: 2;
    text-align: left;
  }

  /* Fun fact: onderaan, gecentreerd over volle breedte */
  .about-combined__funfact {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: var(--space-sm);
    text-align: center;
    border-left: none;
    border-top: 2px solid var(--color-secondary);
    border-radius: 0 0 6px 6px;
    padding: 6px var(--space-sm);
  }
}

/* ============================================
   OVER ONS — TIJDLIJN
   ============================================ */

.about-timeline {
  padding: var(--space-3xl) var(--container-padding);
  background: var(--color-white);
}

.about-timeline__header {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-3xl);
}

.about-timeline__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}

.about-timeline__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
}

/* ══════════════════════════════════════════
   TIJDLIJN
   Mobile:  dot-lijn links, tekst rechts
   Desktop: tekst | dot | foto wisselend
   ══════════════════════════════════════════ */

.about-timeline__track {
  position: relative;
}

/* Verticale lijn */
.about-timeline__track::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--color-secondary-light),
    var(--color-primary) 40%,
    var(--color-primary) 60%,
    var(--color-secondary-light));
  z-index: 0;
}

/* ── Mobile: 2 kolommen — dot | content ── */
.about-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto;
  gap: 0 var(--space-md);
  padding-bottom: var(--space-lg);
}

.about-timeline__center {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: center;
  padding-top: 18px;
  z-index: 1;
}

.about-timeline__cell--content {
  grid-column: 2;
  grid-row: 1;
}

/* Foto zichtbaar op mobiel, onder de tekst */
.about-timeline__cell--photo {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: flex-start;
  padding: var(--space-md) 0 var(--space-sm);
}

.about-timeline__cell--photo .tl-carousel {
  max-width: 100%;
  width: 100%;
  height: 200px;
}

@media (min-width: 900px) {
  .about-timeline__cell--photo .tl-carousel {
    max-width: 360px;
    height: auto;
    min-height: 200px;
    align-self: stretch;
  }
}

/* ── Dot ── */
.about-timeline__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
  flex-shrink: 0;
}

/* ── Content card ── */
.about-timeline__content {
  background: var(--color-secondary-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg) var(--space-xl);
  width: 100%;
}

.about-timeline__year {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: var(--color-primary);
  padding: 2px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.about-timeline__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-xs);
  line-height: 1.25;
}

.about-timeline__text {
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ── Foto ── */
.about-timeline__photo {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  width: 100%;
}

.about-timeline__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Timeline carousel (verbouwing) ── */
.tl-carousel {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 240px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  background: var(--color-primary-dark);
  flex-shrink: 0;
}

/* Desktop: hoogte volgt de content-kolom */
@media (min-width: 900px) {
  .tl-carousel {
    height: auto;
    min-height: 200px;
  }
}

.tl-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.tl-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.tl-carousel__slide.is-active { opacity: 1; }

.tl-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tl-carousel__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 32px 8px 22px;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.tl-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.32);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 3;
  padding: 0;
}
.tl-carousel__btn:hover { background: rgba(0,0,0,0.62); }
.tl-carousel__btn--prev { left: 7px; }
.tl-carousel__btn--next { right: 7px; }

.tl-carousel__dots {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.tl-carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}
.tl-carousel__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* ══════════════════════════════════════════
   DESKTOP LAYOUT  ≥ 900px
   3 kolommen: [tekst/foto] [60px dot] [foto/tekst]
   Expliciete grid-column per cel — geen order-bugs
   ══════════════════════════════════════════ */
@media (min-width: 900px) {

  .about-timeline__track::before {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Basis rij: 3 kolommen */
  .about-timeline__item {
    grid-template-columns: 1fr 60px 1fr;
    grid-template-rows: auto;
    gap: 0;
    padding-bottom: 2rem;
  }

  /* Standaard (links=tekst, rechts=foto) */
  .about-timeline__center {
    grid-column: 2;
    grid-row: 1;
    padding-top: 20px;
    justify-content: center;
  }

  .about-timeline__cell--content {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding-right: 2rem;
  }

  .about-timeline__cell--photo {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding-left: 2rem;
  }

  .about-timeline__content {
    max-width: 360px;
    width: 100%;
  }

  /* Foto past bij de content kaart */
  .about-timeline__photo {
    max-width: 180px;
    width: 100%;
    height: auto;
    align-self: stretch;
    aspect-ratio: unset;
    min-height: 0;
  }

  /* Carousel matcht de content-hoogte */
  .tl-carousel {
    align-self: stretch;
    height: auto;
    max-width: 180px;
    min-height: 200px;
    flex-shrink: 1;
  }

  /* Omgekeerd (links=foto, rechts=tekst) */
  .about-timeline__item--right .about-timeline__cell--content {
    grid-column: 3;
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 2rem;
  }

  .about-timeline__item--right .about-timeline__cell--photo {
    grid-column: 1;
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 2rem;
  }

  /* 2026: rechts, geen foto */
  .about-timeline__item--current .about-timeline__cell--content {
    grid-column: 3;
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 2rem;
  }
}

/* ══════════════════════════════════════════
   SCROLL-IN ANIMATIE
   Content schuift van links, foto van rechts
   Voor --right items andersom
   ══════════════════════════════════════════ */

/* Beginstand: onzichtbaar */
.about-timeline__item[data-tl] .about-timeline__cell--content,
.about-timeline__item[data-tl] .about-timeline__cell--photo,
.about-timeline__item[data-tl] .about-timeline__center {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Content schuift van links in */
.about-timeline__item[data-tl] .about-timeline__cell--content {
  transform: translateX(-32px);
}

/* Foto schuift van rechts in */
.about-timeline__item[data-tl] .about-timeline__cell--photo {
  transform: translateX(32px);
}

/* --right: tekst van rechts, foto van links */
.about-timeline__item--right[data-tl] .about-timeline__cell--content {
  transform: translateX(32px);
}

.about-timeline__item--right[data-tl] .about-timeline__cell--photo {
  transform: translateX(-32px);
}

/* Dot van onderen */
.about-timeline__item[data-tl] .about-timeline__center {
  transform: translateY(12px);
}

/* Zichtbaar — JS voegt .tl-visible toe */
.about-timeline__item[data-tl].tl-visible .about-timeline__cell--content {
  opacity: 1;
  transform: translateX(0);
}

.about-timeline__item[data-tl].tl-visible .about-timeline__cell--photo {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.15s;
}

.about-timeline__item[data-tl].tl-visible .about-timeline__center {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

/* ── Current year (2026) pulsing dot ── */
.about-timeline__item--current .about-timeline__dot {
  width: 26px;
  height: 26px;
  animation: timeline-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes timeline-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 6px rgba(137, 69, 44, 0.25); }
  50%       { box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 14px rgba(137, 69, 44, 0.0); }
}

.about-timeline__year-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.about-timeline__year-row .about-timeline__year {
  margin-bottom: 0;
}

.about-timeline__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  background: rgba(137, 69, 44, 0.1);
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.about-timeline__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  animation: live-dot-blink 1.4s ease-in-out infinite;
}

@keyframes live-dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

.about-timeline__content--current {
  background: linear-gradient(135deg, var(--color-secondary-light) 0%, rgba(206, 166, 142, 0.25) 100%);
  border: 1.5px dashed var(--color-secondary-dark);
}

/* ============================================
   COFFEE PROCESS LOADER - Film Animation V3
   Plant → bes valt → jutezak → branderij → bonen vallen → espresso → latte art
   Duur: 5s | Alle scenes passen binnen 5s
   ============================================ */

.db-loader {
  --db-loader-bg: #ffffff;
  --db-loader-color: #5D4037;
  --db-loader-accent: #89452C;
  --db-loader-cream: #E8DDD0;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--db-loader-bg);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.db-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.db-loader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Glow pulse behind animation */
.db-loader__inner::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(137, 69, 44, 0.08) 0%, transparent 70%);
  animation: glow-pulse 1.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes glow-pulse {
  from { transform: scale(0.8); opacity: 0.3; }
  to   { transform: scale(1.2); opacity: 0.6; }
}

.db-loader__film {
  width: 240px;
  height: 264px;
  color: var(--db-loader-color);
}

@media (min-width: 768px) {
  .db-loader__film {
    width: 300px;
    height: 330px;
  }
}

/* Progress bar */
.db-loader__bar {
  width: 240px;
  height: 3px;
  background: rgba(93, 64, 55, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .db-loader__bar {
    width: 300px;
  }
}

.db-loader__bar-fill {
  height: 100%;
  width: 0;
  background: var(--db-loader-accent);
  border-radius: 2px;
}

/* ===== DEFAULT: all scenes hidden ===== */
.film-plant,
.film-cherry-drop,
.film-roaster,
.film-bean-drop,
.film-espresso,
.film-latte { opacity: 0; }

.film-stem { stroke-dasharray: 50; stroke-dashoffset: 50; }
.film-leaf { transform: scale(0); }
.film-leaf--l { transform-origin: 50px 60px; }
.film-leaf--r { transform-origin: 50px 50px; }
.film-cherry { transform: scale(0); transform-origin: 38px 56px; }
.film-smoke { opacity: 0; }
.film-bean-in { opacity: 0; }
.film-spin--roasted { opacity: 0; }
.film-drip { stroke-dasharray: 12; stroke-dashoffset: 12; }
.film-steam { stroke-dasharray: 25; stroke-dashoffset: 25; opacity: 0; }
.film-coffee-fill { transform: scaleY(0); transform-origin: 50px 93px; }
.film-latte-art { opacity: 0; }
.film-rosetta-stem { stroke-dasharray: 36; stroke-dashoffset: 36; }
.film-rosetta-leaf { opacity: 0; transform: scale(0); }
.film-rosetta-leaf--1 { transform-origin: 50px 70px; }
.film-rosetta-leaf--2 { transform-origin: 50px 64px; }
.film-rosetta-leaf--3 { transform-origin: 50px 58px; }
.film-rosetta-leaf--4 { transform-origin: 50px 52px; }
.film-rosetta-leaf--5 { transform-origin: 50px 46px; }
.film-rosetta-heart { opacity: 0; transform: scale(0); transform-origin: 50px 40px; }
.film-gauge-needle { transform-origin: 50px 16px; }
.film-steam-wand { transform-origin: 22px 38px; }
.film-roaster-handle { transform-origin: 72px 55px; }

/* ===== ACTIVE: CSS animations triggered by .active class =====
   Timeline 5s (4 scenes, jute zak verwijderd):
   Scene 1 Plant:    0-28%   (0-1.4s)
   Bean drop:       20-30%   (1.0-1.5s)
   Scene 2 Roaster: 24-52%   (1.2-2.6s)
   Bean drop:       46-54%   (2.3-2.7s)
   Scene 3 Espresso:50-76%   (2.5-3.8s)
   Scene 4 Latte:   72-100%  (3.6-5s)
   ===== */

/* --- Scene 1: Plant groeit (0-28%) --- */
.db-loader.active .film-plant {
  animation: vis-plant 5s ease both;
}
@keyframes vis-plant {
  0%   { opacity: 0; transform: translateY(10px); }
  3%   { opacity: 1; transform: translateY(0); }
  22%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}

.db-loader.active .film-stem {
  animation: draw-stem 5s ease both;
}
@keyframes draw-stem {
  0%, 2%  { stroke-dashoffset: 50; }
  12%     { stroke-dashoffset: 0; }
}

.db-loader.active .film-leaf--l {
  animation: unfold-l 5s ease both;
}
@keyframes unfold-l {
  0%, 5%  { transform: scale(0) rotate(30deg); }
  14%     { transform: scale(1) rotate(0); }
}

.db-loader.active .film-leaf--r {
  animation: unfold-r 5s ease both;
}
@keyframes unfold-r {
  0%, 7%  { transform: scale(0) rotate(-30deg); }
  15%     { transform: scale(1) rotate(0); }
}

.db-loader.active .film-cherry {
  animation: grow-cherry 5s ease both;
}
@keyframes grow-cherry {
  0%, 9%  { transform: scale(0); }
  15%     { transform: scale(1.3); }
  18%     { transform: scale(1); }
}

/* --- Transitie: Lichte boon valt naar beneden (20-30%) --- */
.db-loader.active .film-cherry-drop {
  animation: drop-cherry 5s ease-in both;
}
@keyframes drop-cherry {
  0%, 20% { opacity: 0; transform: translateY(0); }
  22%     { opacity: 1; transform: translateY(0); }
  30%     { opacity: 0; transform: translateY(45px); }
  100%    { opacity: 0; }
}

/* --- Scene 2: Branderij (24-52%) --- */
.db-loader.active .film-roaster {
  animation: vis-roaster 5s ease both;
}
@keyframes vis-roaster {
  0%, 24% { opacity: 0; transform: scale(0.85); }
  30%     { opacity: 1; transform: scale(1); }
  46%     { opacity: 1; transform: scale(1); }
  52%     { opacity: 0; transform: scale(1.05); }
  100%    { opacity: 0; }
}

/* Lichte bonen vallen in de hopper */
.db-loader.active .film-bean-in--1 {
  animation: fall-in 5s ease-in both;
}
.db-loader.active .film-bean-in--2 {
  animation: fall-in 5s ease-in 0.1s both;
}
@keyframes fall-in {
  0%, 26% { opacity: 0; transform: translateY(-18px); }
  28%     { opacity: 1; transform: translateY(-12px); }
  32%     { opacity: 0.5; transform: translateY(10px); }
  34%     { opacity: 0; transform: translateY(18px); }
  100%    { opacity: 0; }
}

/* Lichte bonen draaien en verdwijnen */
.db-loader.active .film-spin--raw {
  transform-origin: 50px 52px;
  animation: spin-raw 5s linear both;
}
@keyframes spin-raw {
  0%, 30% { transform: rotate(0deg); opacity: 1; }
  38%     { opacity: 0.5; }
  46%     { transform: rotate(720deg); opacity: 0; }
  100%    { transform: rotate(720deg); opacity: 0; }
}

/* Gebrande donkerbruine bonen verschijnen */
.db-loader.active .film-spin--roasted {
  transform-origin: 50px 52px;
  animation: spin-roasted 5s linear both;
}
@keyframes spin-roasted {
  0%, 30% { transform: rotate(0deg); opacity: 0; }
  38%     { opacity: 0.5; }
  46%     { transform: rotate(720deg); opacity: 1; }
  100%    { transform: rotate(720deg); opacity: 1; }
}

/* Rook uit schoorsteen */
.db-loader.active .film-smoke--1 {
  animation: rise-smoke 5s ease both;
}
.db-loader.active .film-smoke--2 {
  animation: rise-smoke 5s ease 0.15s both;
}
@keyframes rise-smoke {
  0%, 28% { opacity: 0; transform: translateY(0); }
  36%     { opacity: 0.25; transform: translateY(-5px); }
  46%     { opacity: 0; transform: translateY(-14px); }
  100%    { opacity: 0; }
}

/* Hendel aan brander draait langzaam */
.db-loader.active .film-roaster-handle {
  animation: roaster-handle 5s ease both;
}
@keyframes roaster-handle {
  0%, 26% { transform: rotate(0deg); }
  30%     { transform: rotate(-15deg); }
  34%     { transform: rotate(-30deg); }
  38%     { transform: rotate(-40deg); }
  42%     { transform: rotate(-45deg); }
  52%     { transform: rotate(-45deg); }
  100%    { transform: rotate(-45deg); }
}

/* --- Transitie: Gebrande bonen vallen uit brander (46-54%) --- */
.db-loader.active .film-bean-drop--1 {
  animation: fall-bean 5s ease-in both;
}
.db-loader.active .film-bean-drop--2 {
  animation: fall-bean 5s ease-in 0.05s both;
}
.db-loader.active .film-bean-drop--3 {
  animation: fall-bean 5s ease-in 0.1s both;
}
@keyframes fall-bean {
  0%, 46% { opacity: 0; transform: translateY(0) rotate(0); }
  48%     { opacity: 1; transform: translateY(0) rotate(0); }
  54%     { opacity: 0; transform: translateY(30px) rotate(90deg); }
  100%    { opacity: 0; }
}

/* --- Scene 3: Espressomachine (50-76%) --- */
.db-loader.active .film-espresso {
  animation: vis-espresso 5s ease both;
}
@keyframes vis-espresso {
  0%, 50% { opacity: 0; }
  56%     { opacity: 1; }
  70%     { opacity: 1; }
  76%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* Filterdrager schuift omhoog */
.db-loader.active .film-pf {
  animation: slide-pf 5s ease-out both;
}
@keyframes slide-pf {
  0%, 52% { transform: translateY(12px); }
  59%     { transform: translateY(0); }
}

/* Gauge naald oscilleert heen en weer */
.db-loader.active .film-gauge-needle {
  animation: gauge-oscillate 5s ease both;
}
@keyframes gauge-oscillate {
  0%, 50% { transform: rotate(0deg); }
  54%     { transform: rotate(-25deg); }
  58%     { transform: rotate(15deg); }
  62%     { transform: rotate(-20deg); }
  66%     { transform: rotate(10deg); }
  70%     { transform: rotate(-5deg); }
  74%     { transform: rotate(0deg); }
}

/* Stoomstang beweegt zachtjes */
.db-loader.active .film-steam-wand {
  animation: steam-wand-move 5s ease both;
}
@keyframes steam-wand-move {
  0%, 50% { transform: rotate(0deg); }
  56%     { transform: rotate(3deg); }
  60%     { transform: rotate(-2deg); }
  64%     { transform: rotate(2deg); }
  68%     { transform: rotate(-1deg); }
  72%     { transform: rotate(0deg); }
}

/* Espresso druppelt naar beneden */
.db-loader.active .film-drip--l {
  animation: draw-drip 5s ease both;
}
.db-loader.active .film-drip--r {
  animation: draw-drip 5s ease 0.06s both;
}
@keyframes draw-drip {
  0%, 60% { stroke-dashoffset: 12; }
  68%     { stroke-dashoffset: 0; }
}

/* Koffie vult het kopje */
.db-loader.active .film-coffee-fill {
  animation: fill-coffee 5s ease both;
}
@keyframes fill-coffee {
  0%, 62% { transform: scaleY(0); }
  71%     { transform: scaleY(1); }
}

/* Stoom stijgt op */
.db-loader.active .film-steam--1 {
  animation: rise-steam 5s ease both;
}
.db-loader.active .film-steam--2 {
  animation: rise-steam 5s ease 0.1s both;
}
.db-loader.active .film-steam--3 {
  animation: rise-steam 5s ease 0.2s both;
}
@keyframes rise-steam {
  0%, 64% { stroke-dashoffset: 25; opacity: 0; }
  70%     { stroke-dashoffset: 10; opacity: 0.5; }
  76%     { stroke-dashoffset: 0; opacity: 0; }
  100%    { opacity: 0; }
}

/* --- Scene 4: Latte art bovenaanzicht met rosetta (72-100%) --- */
.db-loader.active .film-latte {
  animation: vis-latte 5s ease both;
}
@keyframes vis-latte {
  0%, 72% { opacity: 0; transform: scale(0.9); }
  78%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}

/* Rosetta latte art - stengel tekent, dan bladeren verschijnen sequentieel */
.db-loader.active .film-latte-art {
  animation: vis-rosetta-art 5s ease both;
}
@keyframes vis-rosetta-art {
  0%, 78% { opacity: 0; }
  80%     { opacity: 1; }
  100%    { opacity: 1; }
}

.db-loader.active .film-rosetta-stem {
  animation: draw-rosetta-stem 5s ease both;
}
@keyframes draw-rosetta-stem {
  0%, 80% { stroke-dashoffset: 36; }
  90%     { stroke-dashoffset: 0; }
}

.db-loader.active .film-rosetta-leaf--1 {
  animation: rosetta-leaf 5s ease-out both;
  animation-delay: 0s;
}
.db-loader.active .film-rosetta-leaf--2 {
  animation: rosetta-leaf 5s ease-out 0.08s both;
}
.db-loader.active .film-rosetta-leaf--3 {
  animation: rosetta-leaf 5s ease-out 0.16s both;
}
.db-loader.active .film-rosetta-leaf--4 {
  animation: rosetta-leaf 5s ease-out 0.24s both;
}
.db-loader.active .film-rosetta-leaf--5 {
  animation: rosetta-leaf 5s ease-out 0.32s both;
}
@keyframes rosetta-leaf {
  0%, 80% { opacity: 0; transform: scale(0); }
  88%     { opacity: 0.9; transform: scale(1.1); }
  92%     { opacity: 0.85; transform: scale(1); }
  100%    { opacity: 0.85; transform: scale(1); }
}

.db-loader.active .film-rosetta-heart {
  animation: rosetta-heart 5s ease-out both;
}
@keyframes rosetta-heart {
  0%, 90% { opacity: 0; transform: scale(0); }
  96%     { opacity: 0.9; transform: scale(1.15); }
  100%    { opacity: 0.9; transform: scale(1); }
}

/* Voortgangsbalk */
.db-loader.active .db-loader__bar-fill {
  animation: fill-bar 5s linear both;
}
@keyframes fill-bar {
  0%   { width: 0; }
  96%  { width: 100%; }
  100% { width: 100%; }
}

/* ============================================
   LOGO SLIDER (zakelijke events)
   ============================================ */

.logo-slider {
  background: var(--color-white);
  border-top: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 10px 0;
  overflow: hidden;
}

.logo-slider__track-wrap {
  /* Fade out edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  overflow: hidden;
}

.logo-slider__track {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  width: max-content;
  animation: logo-scroll 52s linear infinite;
  will-change: transform;
}

.logo-slider__track:hover {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

.logo-slider__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
}

.logo-slider__item img {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s, opacity 0.3s;
}

/* Prins Bouw: vierkant met witruimte → cover crop */
.logo-slider__item img[alt="Prins Bouw"] {
  width: 68px;
  object-fit: cover;
}

/* Lars: cirkellogo met witruimte links/rechts → crop zijkanten */
.logo-slider__item img[alt="Feestje met Lars"] {
  width: 48px;
  object-fit: cover;
}

.logo-slider__item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-slider__text-badge {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray);
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 6px 14px;
}

/* ============================================
   USP CAROUSEL (over-ons page)
   ============================================ */

.usp-carousel {
  padding: var(--space-3xl) 0;
}

.usp-carousel__nav-wrap {
  position: relative;
}

.usp-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.usp-carousel__btn:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(137, 69, 44, 0.3);
}

.usp-carousel__btn--prev { left: 0.75rem; }
.usp-carousel__btn--next { right: 0.75rem; }

.usp-carousel__track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.usp-carousel__track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  will-change: transform;
}

.usp-carousel__card {
  flex: 0 0 280px;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.usp-carousel__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(137, 69, 44, 0.15);
}

.usp-carousel__card-photo-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.usp-carousel__card-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition-base);
}

.usp-carousel__card:hover .usp-carousel__card-photo-wrap img {
  transform: scale(1.04);
}

.usp-carousel__card-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.usp-carousel__card-icon svg {
  stroke: var(--color-primary);
}

.usp-carousel__card-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

.usp-carousel__card-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .usp-carousel__card {
    flex: 0 0 220px;
  }
}

/* ============================================
   V4 CEO FEEDBACK - SOCIAL MEDIA SECTION
   ============================================ */
.social-media {
  padding: var(--space-xl) 0 var(--space-3xl);
  background: #F5E6D8;
}

.social-media__header {
  margin-bottom: var(--space-2xl);
}

.social-media__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}

.social-media__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
}

.social-media__buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.social-media__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--border-radius-full);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-decoration: none;
  color: var(--color-white);
  transition: all var(--transition-fast);
  min-width: 180px;
  justify-content: center;
}

.social-media__btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}

.social-media__btn--instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-media__btn--facebook {
  background: #1877f2;
}

.social-media__btn--linkedin {
  background: #0a66c2;
}

@media (max-width: 640px) {
  .social-media__buttons {
    flex-direction: column;
    align-items: center;
  }
  .social-media__btn {
    width: 100%;
    max-width: 300px;
  }
}

/* ============================================
   V4 CEO FEEDBACK - COMPACT FINAL CTA
   ============================================ */
.final-cta--compact {
  min-height: auto;
  padding: var(--space-2xl) 0;
  background: var(--color-pastel-cream);
}

.final-cta--compact .final-cta__title {
  color: var(--color-primary-dark);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-md);
}

.final-cta--compact .final-cta__text {
  color: var(--color-gray-dark);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xl);
}

.final-cta__buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.final-cta__note {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
}

.final-cta--compact .final-cta__contact {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
}

.final-cta--compact .final-cta__contact p {
  color: var(--color-gray-dark);
}

.final-cta--compact .final-cta__phone {
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .final-cta--compact {
    padding: var(--space-xl) 0;
  }
  .final-cta__buttons {
    flex-direction: column;
    align-items: center;
  }
  .final-cta__buttons .btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ============================================
   V4 CEO FEEDBACK - MOBILE HEADER FIX
   ============================================ */
/* WordPress html{margin-top:32px} already offsets body by admin bar height,
   so body padding only needs to account for the theme header itself */
body.admin-bar {
  padding-top: 80px;
}

@media (max-width: 991px) {
  body.admin-bar {
    padding-top: 70px;
  }
}

@media (max-width: 782px) {
  body.admin-bar {
    padding-top: 70px;
  }
}

/* ============================================
   V4 CEO FEEDBACK - TRUST SECTION FIX
   ============================================ */
.trust-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: var(--color-secondary-light);
  color: var(--color-primary);
}

.trust-item__icon svg {
  width: 32px;
  height: 32px;
}

/* ============================================
   V4 FORM VALIDATION ERRORS
   ============================================ */
.validation-errors {
  background: rgba(220, 53, 69, 0.08);
  border: 2px solid var(--color-error, #dc3545);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
  color: var(--color-error, #dc3545);
  font-size: var(--font-size-sm);
  animation: fadeIn 0.3s ease;
}

.validation-errors strong {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-base);
}

.validation-errors ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.validation-errors li {
  margin-bottom: var(--space-xs);
  line-height: var(--line-height-relaxed);
}

/* ============================================
   V4 CEO FEEDBACK - EMAIL NOTICE STYLING FIX
   ============================================ */
.offerte-success__email-notice {
  background: rgba(206, 166, 142, 0.15);
  border: 2px solid var(--color-primary);
  color: var(--color-primary-dark);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-xl) auto;
  max-width: 480px;
  font-size: var(--font-size-base);
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.offerte-success__email-notice svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.offerte-success__email-notice span {
  min-width: 0;
  word-break: break-word;
}

.offerte-success__actions {
  margin-top: var(--space-2xl);
  gap: var(--space-xl);
}

.offerte-success__actions .btn {
  min-width: 180px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .offerte-success__email-notice {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
    max-width: 100%;
  }
  .offerte-success__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }
  .offerte-success__actions .btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}

/* ============================================
   COFFEE MATCHING QUIZ - GAMIFICATION STYLES
   ============================================ */

/* -- Quiz Hero two-column layout -- */
.quiz-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.quiz-hero__image {
  display: flex;
  justify-content: center;
}
.quiz-hero__image img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--border-radius-lg);
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  .quiz-hero__grid {
    grid-template-columns: 1fr;
  }
  .quiz-hero__image {
    order: -1;
  }
  .quiz-hero__image img {
    max-width: 260px;
  }
}
.quiz-hero .offerte-hero__benefits {
  justify-content: center;
}

/* -- Progress Bar: checkmark inside circles -- */
.quiz-progress .progress-bar__check {
  display: none;
}

.quiz-progress .progress-bar__step.completed .progress-bar__number {
  display: none;
}

.quiz-progress .progress-bar__step.completed .progress-bar__check {
  display: block;
}

.quiz-progress .progress-bar__step.completed .progress-bar__circle {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  animation: quizCheckPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes quizCheckPop {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* -- Quiz Fill Bar -- */
.quiz-fill-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding: 0 var(--space-sm);
}

.quiz-fill-bar__track {
  flex: 1;
  height: 8px;
  background: var(--color-pastel-cream);
  border-radius: 999px;
  overflow: hidden;
}

.quiz-fill-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.quiz-fill-bar__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: quizFillShimmer 2s infinite;
}

@keyframes quizFillShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.quiz-fill-bar__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  white-space: nowrap;
  font-weight: 500;
}

/* -- Quiz Step Enter Animation -- */
.quiz-step-enter {
  animation: quizStepFadeIn 0.5s ease-out;
}

@keyframes quizStepFadeIn {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -- Quiz Cards -- */
.quiz-card .event-type-card__content {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quiz-card:hover .event-type-card__content {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(137, 69, 44, 0.15);
}

.quiz-card input[type="radio"]:checked + .event-type-card__content {
  border-color: var(--color-primary);
  background: var(--color-pastel-cream);
  box-shadow: 0 0 0 3px rgba(137, 69, 44, 0.15);
}

/* -- Quiz Card Selection Pulse -- */
.quiz-card--selected .event-type-card__content {
  animation: quizCardPulse 0.5s ease-out;
}

@keyframes quizCardPulse {
  0% { box-shadow: 0 0 0 0 rgba(137, 69, 44, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(137, 69, 44, 0); }
  100% { box-shadow: 0 0 0 3px rgba(137, 69, 44, 0.15); }
}

/* -- Two-column quiz grid (step 3 & 5) -- */
.quiz-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.quiz-card--large .event-type-card__content {
  padding: var(--space-xl) var(--space-lg);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* -- Subscription badge -- */
.quiz-card__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 2;
  animation: quizBadgeBounce 2s infinite;
}

@keyframes quizBadgeBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.quiz-card--abo .event-type-card__content {
  position: relative;
  overflow: visible;
}

/* -- Quiz Result Screen -- */
.quiz-result {
  text-align: center;
  padding: var(--space-2xl) 0;
  position: relative;
  overflow: hidden;
  animation: quizResultFadeIn 0.8s ease-out;
}

@keyframes quizResultFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.quiz-result__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 20px;
  border-radius: 999px;
  margin-bottom: var(--space-lg);
}

.quiz-result__badge svg {
  width: 16px;
  height: 16px;
}

.quiz-result__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.quiz-result__description {
  color: var(--color-gray);
  max-width: 560px;
  margin: 0 auto var(--space-xl);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

/* -- Result Card -- */
.quiz-result__card {
  background: #fff;
  border: 2px solid var(--color-pastel-cream);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto var(--space-xl);
  text-align: left;
  box-shadow: 0 8px 32px rgba(137, 69, 44, 0.1);
  animation: quizCardFloat 3s ease-in-out infinite;
}

@keyframes quizCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.quiz-result__card-image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface, #FAF7F4);
  position: relative;
  overflow: hidden;
}

.quiz-result__card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.quiz-result__card-body {
  padding: var(--space-lg) var(--space-xl);
}

.quiz-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.quiz-result__tag {
  display: inline-block;
  background: var(--color-pastel-cream);
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
}

.quiz-result__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.quiz-result__card-text {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

.quiz-result__price {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.quiz-result__price-old {
  text-decoration: line-through;
  color: var(--color-gray);
  font-size: var(--font-size-sm);
}

.quiz-result__price-new {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.quiz-result__price-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

/* -- Quantity note -- */
.quiz-result__quantity-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-gray-lightest);
  border: 2px solid var(--color-gray-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin: 0 auto var(--space-md);
  max-width: 400px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.quiz-result__quantity-note svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* -- Subscription note -- */
.quiz-result__subscription-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-pastel-cream);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin: 0 auto var(--space-xl);
  max-width: 400px;
  font-size: var(--font-size-sm);
  color: var(--color-primary-dark);
}

.quiz-result__subscription-note svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* -- Result Actions -- */
.quiz-result__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

/* -- Share Section -- */
.quiz-result__share {
  border-top: 1px solid var(--color-pastel-cream);
  padding-top: var(--space-lg);
}

.quiz-result__share p {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
}

.quiz-result__share-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.quiz-result__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-pastel-cream);
  color: var(--color-primary);
  transition: background 0.2s ease, transform 0.2s ease;
}

.quiz-result__share-btn:hover {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.1);
}

/* -- Confetti Particles -- */
.quiz-result__confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.quiz-confetti-particle {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: quizConfettiFall 2.5s ease-out forwards;
}

@keyframes quizConfettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(400px) rotate(720deg) scale(0.3);
  }
}

/* -- Responsive -- */
@media (max-width: 768px) {
  .quiz-grid--two {
    grid-template-columns: 1fr;
    max-width: 320px;
  }

  .quiz-card--large .event-type-card__content {
    min-height: auto;
    padding: var(--space-lg);
  }

  .quiz-result__card {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }

  .quiz-result__actions {
    flex-direction: column;
    align-items: center;
  }

  .quiz-result__actions .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .quiz-fill-bar {
    margin-bottom: var(--space-lg);
  }

  .quiz-result__quantity-note,
  .quiz-result__subscription-note {
    flex-direction: column;
    text-align: center;
  }

  .quiz-card__badge {
    top: -8px;
    right: -4px;
    font-size: 0.65rem;
    padding: 3px 8px;
  }
}

/* Service card button centering is now in main .service-card__content */
.service-card__content .btn {
  align-self: center;
  margin-top: auto;
}

/* Product preview alignment */
.product-preview {
  display: flex;
  flex-direction: column;
}
.product-preview--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.product-preview--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.product-preview__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-preview__btn {
  align-self: center;
  margin-top: auto;
}

/* Google Reviews badge as link */
a.google-reviews__badge {
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast);
}
a.google-reviews__badge:hover {
  transform: scale(1.03);
}

/* ============================
   404 Error Page
   ============================ */
.error-404 {
  padding: calc(var(--space-3xl) * 2) 0 var(--space-3xl);
  text-align: center;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.error-404__content {
  max-width: 600px;
  margin: 0 auto;
}

.error-404__illustration {
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: center;
}

.error-404__cup {
  color: var(--color-primary);
}

/* Steam animation */
.error-404__steam {
  animation: steam 2s ease-in-out infinite;
  transform-origin: bottom center;
}

.error-404__steam--1 { animation-delay: 0s; }
.error-404__steam--2 { animation-delay: 0.3s; }
.error-404__steam--3 { animation-delay: 0.6s; }

@keyframes steam {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.error-404__title {
  font-size: var(--font-size-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.error-404__text {
  font-size: var(--font-size-lg);
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.error-404__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.error-404__home-link {
  display: block;
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.error-404__home-link:hover {
  color: var(--color-primary);
}

.error-404__suggestion {
  border-top: 1px solid var(--color-pastel-cream);
  padding-top: var(--space-xl);
}

.error-404__suggestion p {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

.error-404__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.error-404__links li {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.error-404__links a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.error-404__links a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .error-404 {
    padding: var(--space-3xl) 0 var(--space-xl);
  }

  .error-404__actions {
    flex-direction: column;
    align-items: center;
  }

  .error-404__actions .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* ============================================================
   KOFFIE KENNIS PAGINA — HERO
   ============================================================ */

.coffee-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: #2A1A0E;
  overflow: hidden;
}

.coffee-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.coffee-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.45;
}

.coffee-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(42,26,14,0.7) 0%, rgba(106,53,33,0.4) 100%);
  z-index: 1;
}

.coffee-hero .container {
  position: relative;
  z-index: 2;
}

.coffee-hero__content {
  max-width: 680px;
  padding: var(--space-5xl) 0 var(--space-4xl);
}

.coffee-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-lg);
}

.coffee-hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: rgba(255,255,255,0.88);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2xl);
  max-width: 560px;
}

.coffee-hero__scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  color: rgba(255,255,255,0.65);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coffee-hero__scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  font-size: 1.25rem;
  color: #fff;
  animation: heroScrollBounce 2s ease-in-out infinite;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ============================================================
   KOFFIE KENNIS — BEAN JOURNEY (scroll-verhaal)
   ============================================================ */

.bean-journey {
  padding: var(--space-5xl) 0;
}

.bean-journey__header {
  margin-bottom: var(--space-5xl);
}

.bean-journey__label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.bean-journey__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.bean-journey__intro {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 540px;
  margin: 0 auto;
  line-height: var(--line-height-relaxed);
}

.bean-journey__phase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-5xl);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.bean-journey__phase.is-visible {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) {
  .bean-journey__phase {
    grid-template-columns: 180px 1fr;
    gap: var(--space-3xl);
    align-items: flex-start;
  }

  .bean-journey__phase--reverse {
    grid-template-columns: 1fr 180px;
  }

  .bean-journey__phase--reverse .bean-journey__phase-visual {
    order: 2;
  }

  .bean-journey__phase--reverse .bean-journey__phase-content {
    order: 1;
  }
}

.bean-journey__phase-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.bean-journey__phase-number {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary-light);
  line-height: 1;
  opacity: 0.6;
}

.bean-journey__phase-icon {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bean-journey__phase-icon svg {
  width: 90px;
  height: 90px;
}

.bean-journey__phase-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.bean-journey__phase-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-lg);
}

.bean-journey__phase-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-md);
}

.bean-journey__phase-stats {
  display: flex;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.bean-journey__phase-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bean-journey__phase-stat strong {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

.bean-journey__phase-stat span {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.bean-journey__fact {
  background: #FFF8E7;
  border-left: 4px solid var(--color-warning);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-dark);
  margin-top: var(--space-xl);
}

.bean-journey__fact-label {
  display: block;
  font-weight: var(--font-weight-bold);
  color: #B8700A;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bean-journey__methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

@media (min-width: 600px) {
  .bean-journey__methods {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bean-journey__method {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-primary-light);
}

.bean-journey__method-icon {
  font-size: 2.2rem;
  margin-bottom: var(--space-md);
}

.bean-journey__method strong {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}

.bean-journey__method p {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.bean-journey__roast-scale {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

@media (min-width: 600px) {
  .bean-journey__roast-scale {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bean-journey__roast-level {
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  color: var(--color-white);
}

.bean-journey__roast-color {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: var(--space-md);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.bean-journey__roast-level--light  { background: #C4885C; }
.bean-journey__roast-level--medium { background: #89452C; }
.bean-journey__roast-level--dark   { background: #3A2218; }

.bean-journey__roast-level--light .bean-journey__roast-color  { background: #C4885C; border: 3px solid rgba(255,255,255,0.4); }
.bean-journey__roast-level--medium .bean-journey__roast-color { background: #6B3521; border: 3px solid rgba(255,255,255,0.4); }
.bean-journey__roast-level--dark .bean-journey__roast-color   { background: #2A1A0E; border: 3px solid rgba(255,255,255,0.3); }

.bean-journey__roast-level strong {
  display: block;
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
}

.bean-journey__roast-level p {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.bean-journey__brew-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

@media (min-width: 600px) {
  .bean-journey__brew-methods {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bean-journey__brew-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.bean-journey__brew-icon  { font-size: 2rem; }

.bean-journey__brew-method strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
}

.bean-journey__brew-method span {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

/* ============================================================
   KOFFIE KENNIS — WERELDKAART
   ============================================================ */

.coffee-map-section {
  padding: var(--space-5xl) 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.coffee-map-section.is-visible {
  opacity: 1;
  transform: none;
}

.coffee-map-section__header { margin-bottom: var(--space-3xl); }

.coffee-map-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.coffee-map-section__intro {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 540px;
  margin: 0 auto;
  line-height: var(--line-height-relaxed);
}

.coffee-map-section__mobile-hint { display: none; }

@media (max-width: 767px) {
  .coffee-map-section__mobile-hint {
    display: inline;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
  }
}

.coffee-map {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--border-radius-xl);
  overflow: visible;
  box-shadow: var(--shadow-lg);
}

.coffee-map__leaflet {
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 300px;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.coffee-map__belt-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(139,105,20,0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255,250,240,0.72);
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
}

.coffee-map__belt-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(139,105,20,0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255,250,240,0.82);
  border: 1px solid rgba(139,105,20,0.3);
  padding: 3px 9px;
  border-radius: 10px;
  pointer-events: none;
}

.coffee-map__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 400;
}

/* Leaflet zoom control styling */
.leaflet-bar a {
  background: rgba(255,252,245,0.95) !important;
  color: #5D3A1A !important;
  border-color: rgba(139,105,20,0.3) !important;
}
.leaflet-bar a:hover { background: #fff !important; }

.coffee-map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
}

.coffee-map__marker-dot {
  width: 16px;
  height: 16px;
  background: #8B6914;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.32);
  transition: transform 0.2s;
  position: relative;
}

.coffee-map__marker-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
}

.coffee-map__marker-dot::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid #8B6914;
  animation: markerPulse 2.4s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes markerPulse {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%       { transform: scale(1.8); opacity: 0; }
}

.coffee-map__marker:hover .coffee-map__marker-dot,
.coffee-map__marker.is-active .coffee-map__marker-dot {
  background: var(--color-primary-dark);
  transform: scale(1.3);
}

/* Natural Earth world map country base style */
.coffee-map__countries path,
.coffee-map__countries .mainland {
  fill: rgba(248,242,232,0.97);
  stroke: #9A7050;
  stroke-width: 0.55;
  transition: fill 0.2s;
}

/* Coffee-producing country highlight with golden glow */
.coffee-map__countries .coffee-map__highlight,
.coffee-map__countries .coffee-map__highlight path,
.coffee-map__countries .coffee-map__highlight .mainland {
  fill: rgba(139,105,20,0.28);
  stroke: rgba(93,64,55,0.7);
  stroke-width: 0.9;
  filter: url(#country-glow-filter);
}

.coffee-map__tooltip {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 8px;
  width: 250px;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9) translateY(4px);
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  border-top: 3px solid var(--color-primary);
}

.coffee-map__marker.is-active {
  z-index: 200;
}

.coffee-map__marker.is-active .coffee-map__tooltip,
.coffee-map__tooltip.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.coffee-map__tooltip-rank {
  margin-left: auto;
  padding-left: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.45;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.coffee-map__marker-flag {
  display: flex;
  justify-content: center;
  margin-bottom: 3px;
  pointer-events: none;
  user-select: none;
}

.coffee-map__marker-flag .fi {
  font-size: 1.15rem;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.coffee-map__tooltip-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-lighter);
}

.coffee-map__tooltip-flag {
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  flex-shrink: 0;
}

.coffee-map__tooltip-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  color: var(--color-primary-dark);
}

.coffee-map__tooltip-label {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 1px;
}

/* Arabica / Robusta balk */
.coffee-map__bean-bar {
  margin-bottom: 10px;
}

.coffee-map__bean-bar-track {
  height: 6px;
  background: #5D4037;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}

.coffee-map__bean-bar-arabica {
  height: 100%;
  background: #8B6914;
  border-radius: 3px;
}

.coffee-map__bean-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  line-height: 1;
}

.coffee-map__bean-bar-label--arabica { color: #7A5810; }
.coffee-map__bean-bar-label--robusta { color: #5D4037; }

/* Smaak chips */
.coffee-map__flavors {
  margin-bottom: 10px;
}

.coffee-map__flavor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.coffee-map__flavor-chip {
  font-size: 0.62rem;
  padding: 2px 7px;
  background: rgba(139,105,20,0.1);
  border: 1px solid rgba(139,105,20,0.3);
  border-radius: 99px;
  color: var(--color-primary-dark);
  white-space: nowrap;
  line-height: 1.5;
}

.coffee-map__flavor-more {
  font-size: 0.6rem;
  padding: 2px 6px;
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 99px;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.15s;
}

.coffee-map__flavor-more:hover { background: rgba(0,0,0,0.06); }

.coffee-map__flavor-full {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.coffee-map__flavor-full.is-open { display: flex; }

/* 2-kolom grid: Regio + Hoogte */
.coffee-map__tooltip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.68rem;
  line-height: 1.35;
}

.coffee-map__tooltip-grid > div { display: flex; flex-direction: column; }

/* Compacte meta-rijen: Proces + Productie */
.coffee-map__tooltip-meta {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.coffee-map__tooltip-meta-row {
  display: flex;
  flex-direction: column;
  font-size: 0.68rem;
  line-height: 1.35;
}

/* ============================================================
   KOFFIE KENNIS — SMAAKWIEL
   ============================================================ */

.flavor-wheel-section {
  padding: var(--space-5xl) 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.flavor-wheel-section.is-visible {
  opacity: 1;
  transform: none;
}

/* Dark premium variant */
.flavor-wheel-section--dark {
  background: #130A06;
  color: #F8F0E8;
}
.flavor-wheel-section--dark .flavor-wheel-section__title { color: #E8C89A; }
.flavor-wheel-section--dark .flavor-wheel-section__intro { color: rgba(248,240,232,0.75); }
.flavor-wheel-section--dark .flavor-wheel__info-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: #F8F0E8;
}
.flavor-wheel-section--dark .flavor-wheel__info-header h3 { color: #E8C89A; }
.flavor-wheel-section--dark .flavor-wheel__info-desc { color: rgba(248,240,232,0.85); }
.flavor-wheel-section--dark .flavor-wheel__info-sub-tag {
  background: rgba(255,255,255,0.1);
  color: #F8F0E8;
}
.flavor-wheel-section--dark .flavor-wheel__info-default { color: rgba(248,240,232,0.6); }
.flavor-wheel-section--dark .flavor-wheel__info-default h3 { color: #E8C89A; }

.flavor-wheel-section__header { margin-bottom: var(--space-3xl); }

.flavor-wheel-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.flavor-wheel-section__intro {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 560px;
  margin: 0 auto;
  line-height: var(--line-height-relaxed);
}

.flavor-wheel-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .flavor-wheel-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.flavor-wheel {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.flavor-wheel__svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12));
}

.flavor-wheel__info-panel {
  min-height: 300px;
  display: flex;
  align-items: center;
}

.flavor-wheel__info-default {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-gray);
  width: 100%;
}

.flavor-wheel__info-default h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.flavor-wheel__info-default p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.flavor-wheel__info-icon {
  font-size: 3rem;
  margin-bottom: var(--space-lg);
  display: block;
}

.flavor-wheel__info-card {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.flavor-wheel__info-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.flavor-wheel__info-header .flavor-wheel__info-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 0;
}

.flavor-wheel__info-header h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}

.flavor-wheel__info-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flavor-wheel__info-sub-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--border-radius-full);
  background: var(--color-gray-lightest);
  color: var(--color-gray-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  transition: background 0.2s, color 0.2s;
}

.flavor-wheel__info-desc {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-md);
}

.flavor-wheel__info-sub {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  margin-bottom: var(--space-md);
}

.flavor-wheel__info-landen {
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-lighter);
}

/* Country buttons in info panel */
.flavor-wheel__info-countries {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.flavor-wheel-section:not(.flavor-wheel-section--dark) .flavor-wheel__info-countries {
  border-top-color: var(--color-gray-lighter);
}
.flavor-wheel__info-countries-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
  opacity: 0.8;
}
.flavor-wheel__info-country-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-md);
}
.flavor-wheel__country-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--border-radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #F8F0E8;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.flavor-wheel-section:not(.flavor-wheel-section--dark) .flavor-wheel__country-btn {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.05);
  color: var(--color-primary-dark);
}
.flavor-wheel__country-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
}
.flavor-wheel__map-btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--border-radius-full);
  border: 1px solid rgba(212,150,59,0.6);
  background: transparent;
  color: #D4963B;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.flavor-wheel__map-btn:hover {
  background: #D4963B;
  color: #fff;
}

/* Flavor filter banner boven de kaart */
.coffee-map__flavor-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 16px;
  border-radius: var(--border-radius-lg);
  background: rgba(212,150,59,0.15);
  border: 1px solid rgba(212,150,59,0.4);
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-md);
}
.coffee-map__flavor-banner.is-active { display: flex; }
.coffee-map__flavor-banner button {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0 4px;
}
.coffee-map__flavor-banner button:hover { opacity: 1; }

/* Marker highlight bij flavor-filter */
.coffee-map__marker.is-flavor-match .coffee-map__marker-dot {
  box-shadow: 0 0 0 4px rgba(212,150,59,0.5);
}

/* ============================================================
   KOFFIE KENNIS — MINI-QUIZ
   ============================================================ */

.coffee-quiz-section {
  padding: var(--space-5xl) 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.coffee-quiz-section.is-visible {
  opacity: 1;
  transform: none;
}

.coffee-quiz-section__header { margin-bottom: var(--space-3xl); }

.coffee-quiz-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.coffee-quiz-section__intro {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 480px;
  margin: 0 auto;
  line-height: var(--line-height-relaxed);
}

.coffee-quiz {
  max-width: 640px;
  margin: 0 auto;
}

.coffee-quiz__progress {
  height: 6px;
  background: var(--color-gray-lighter);
  border-radius: var(--border-radius-full);
  margin-bottom: var(--space-2xl);
  overflow: hidden;
}

.coffee-quiz__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-warning));
  border-radius: var(--border-radius-full);
  transition: width 0.4s ease;
}

.coffee-quiz__card {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.coffee-quiz__number {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.coffee-quiz__question {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-xl);
  line-height: var(--line-height-snug);
}

.coffee-quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.coffee-quiz__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-gray-lighter);
  border-radius: var(--border-radius-lg);
  background: var(--color-white);
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--font-primary);
}

.coffee-quiz__option:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-pastel-cream);
}

.coffee-quiz__option.is-correct {
  border-color: var(--color-success);
  background: rgba(74,139,87,0.08);
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.coffee-quiz__option.is-wrong {
  border-color: var(--color-error);
  background: rgba(197,74,74,0.08);
  color: var(--color-error);
}

.coffee-quiz__uitleg {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
}

.coffee-quiz__uitleg--correct {
  background: rgba(74,139,87,0.1);
  color: #2D6B3A;
  border-left: 4px solid var(--color-success);
}

.coffee-quiz__uitleg--wrong {
  background: rgba(197,74,74,0.08);
  color: #9A3030;
  border-left: 4px solid var(--color-error);
}

.coffee-quiz__next { margin-top: var(--space-md); }

.coffee-quiz__result {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.coffee-quiz__result-icon { font-size: 4rem; margin-bottom: var(--space-lg); }

.coffee-quiz__result-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.coffee-quiz__result-text {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 420px;
  margin: 0 auto var(--space-md);
  line-height: var(--line-height-relaxed);
}

.coffee-quiz__result-score {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-xl);
}

.coffee-quiz__result-products {
  margin: var(--space-xl) auto var(--space-xl);
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-surface, #FAF7F4);
  border-radius: var(--border-radius-lg);
}

.coffee-quiz__result-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--border-radius-md);
  object-fit: contain;
}

.coffee-quiz__result-cta-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  margin: 0;
  font-style: italic;
}

/* ============================================================
   KOFFIE KENNIS — MOBIEL
   ============================================================ */

@media (max-width: 767px) {
  .coffee-hero__content {
    padding: var(--space-4xl) 0 var(--space-3xl);
  }

  .bean-journey {
    padding: var(--space-3xl) 0;
  }

  .bean-journey__phase {
    margin-bottom: var(--space-3xl);
  }

  .bean-journey__phase-visual {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .bean-journey__phase-number {
    font-size: 3rem;
  }

  .coffee-map__belt-label,
  .coffee-map__belt-badge {
    display: none;
  }

  .coffee-map__tooltip {
    width: 180px;
    font-size: 11px;
  }

  .flavor-wheel-wrapper {
    gap: var(--space-xl);
  }

  .coffee-quiz__card {
    padding: var(--space-lg);
  }
}

/* ============================================================
   KOFFIE KENNIS — UITBREIDINGEN (SVG icons, pro tips, Maillard, kaart, roast)
   ============================================================ */

/* SVG iconen in verwerkings- en zetmethodes */
.bean-journey__method-svg {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}

.bean-journey__brew-svg {
  width: 44px;
  height: 44px;
  display: block;
  margin: 0 auto;
}

/* Pro tip accordion — brew-method uitbreidbaar */
.bean-journey__brew-method {
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.2s, transform 0.15s;
}

.bean-journey__brew-method:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.bean-journey__brew-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.bean-journey__brew-specs {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
}

.bean-journey__brew-chevron {
  color: var(--color-gray-light);
  transition: transform 0.3s ease;
  margin-top: 2px;
  flex-shrink: 0;
}

.bean-journey__brew-method.open .bean-journey__brew-chevron {
  transform: rotate(180deg);
}

.bean-journey__brew-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.bean-journey__brew-method.open .bean-journey__brew-body {
  max-height: 400px;
}

.bean-journey__brew-tip {
  margin: var(--space-md) 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(206,166,142,0.12);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray-dark);
  line-height: var(--line-height-relaxed);
  text-align: left;
}

.bean-journey__brew-perfect {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-style: italic;
  padding: 0 0 var(--space-sm);
  text-align: left;
  margin: 0;
}

/* Roast levels — betere leesbaarheid */
.bean-journey__roast-level {
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) var(--space-lg);
  color: var(--color-white);
}

.bean-journey__roast-color {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: var(--space-md);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.2);
}

.bean-journey__roast-level strong {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.bean-journey__roast-level p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Maillard-reactie tooltip */
.science-term {
  cursor: help;
  position: relative;
  border-bottom: 1.5px dotted var(--color-primary);
  color: inherit;
}

.science-term::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary-dark);
  color: #fff;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-md);
  width: 280px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 50;
  box-shadow: var(--shadow-lg);
  font-style: normal;
}

.science-term::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-primary-dark);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 51;
}

.science-term:hover::after,
.science-term:hover::before {
  opacity: 1;
}

/* Kaart — tooltip verbeteringen */
.coffee-map__tooltip {
  min-width: 230px;
  box-shadow: 0 8px 24px rgba(74,55,40,0.22);
}

.coffee-map__tooltip-flag {
  font-size: 1.5rem;
  line-height: 1;
}

.coffee-map__tooltip-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  color: var(--color-primary-dark);
}

/* SVG iconen in tooltip rijen */
.coffee-map__tooltip-icon svg {
  color: var(--color-primary);
  vertical-align: middle;
  margin-top: 2px;
}

/* ============================================
   SMAAKMAKERS — PARTNER TRUCK CARDS
   ============================================ */
.smaakmakers {
  padding: var(--space-xl) 0;
}

.smaakmakers__header {
  margin-bottom: var(--space-lg);
}

.smaakmakers__title {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: var(--space-sm);
}

.smaakmakers__subtitle {
  color: var(--color-gray);
  font-size: var(--font-size-lg);
}

.smaakmakers__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.smaakmakers__card {
  background: var(--color-white);
  border: 1px solid rgba(137, 69, 44, 0.12);
  border-radius: var(--border-radius-lg);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.smaakmakers__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(137, 69, 44, 0.12);
}

.smaakmakers__card--featured {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(137, 69, 44, 0.1);
}

.smaakmakers__card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-pastel-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.smaakmakers__card-icon svg {
  stroke: var(--color-primary);
}

.smaakmakers__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.smaakmakers__card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.smaakmakers__card-name {
  font-family: var(--font-display);
  color: var(--color-text);
  font-size: var(--font-size-xl);
  margin: 0;
  line-height: 1.2;
}

.smaakmakers__card-text {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  flex: 1;
  margin: 0;
}

.smaakmakers__card-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(137, 69, 44, 0.1);
}

.smaakmakers__card-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
  word-break: break-all;
}

.smaakmakers__card-contact-link:hover {
  color: var(--color-primary);
}

.smaakmakers__card-contact-link svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.smaakmakers__card-btn {
  margin-top: var(--space-xs);
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (max-width: 560px) {
  .smaakmakers__grid {
    grid-template-columns: 1fr;
  }
}


.smaakmakers__card-icon--logo {
  width: auto;
  height: auto;
  min-height: 56px;
  border-radius: 0;
  background: transparent;
  justify-content: flex-start;
  padding: 0;
}

.smaakmakers__card-logo {
  max-height: 56px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ============================================
   VELUWSCHE OVERVLOED — FOTOGALERIJ
   ============================================ */
.vo-gallery {
  padding: 0;
  overflow: hidden;
}

.vo-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.vo-gallery__item {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.vo-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.vo-gallery__item:hover .vo-gallery__img {
  transform: scale(1.03);
}

@media (max-width: 560px) {
  .vo-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* Smaakmakers card foto */
.smaakmakers__card-image {
  margin: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-xs);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 5;
}

.smaakmakers__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.smaakmakers__card:hover .smaakmakers__card-img {
  transform: scale(1.03);
}

/* Smaakmakers centrale CTA */
.smaakmakers__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(137, 69, 44, 0.1);
}

.smaakmakers__footer-text {
  color: var(--color-gray);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

/* "Perfect voor" tag-links */
.vo-tag-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--transition-fast);
}

.vo-tag-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}