.elementor-kit-15{--e-global-color-primary:#FAF9F6;--e-global-color-secondary:#C8A882;--e-global-color-text:#2C2017;--e-global-color-accent:#8B6B47;--e-global-color-d67833d:#F0EAE0;--e-global-color-82463ac:#DDD1B8;--e-global-color-dc350b9:#6B6255;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Cormorant Garamond";--e-global-typography-accent-font-weight:300;--e-global-typography-accent-font-style:italic;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --holos-klei:#DDD1B8; --holos-warm-white:#FAF9F6; --holos-zand:#F0EAE0; --holos-terracotta:#C8A882; --holos-koper:#8B6B47; --holos-donker:#2C2017; --holos-grijs:#6B6255; --holos-grijs-warm:#8B7B6A; --holos-tekst:#3D2F1F; }
/* Start custom CSS *//* ================================================================
   HOLOS by Vanessa — Global CSS (Premium, Production)
   Digital Lab Solutions — DL_042
   ----------------------------------------------------------------
   Architecture: CSS Cascade Layers
   ----------------------------------------------------------------
   Why layers? Elementor emits per-widget CSS (sidebar settings,
   responsive breakpoints) as UNLAYERED stylesheet rules. Per the
   cascade spec:

     Normal declaration priority:
       unlayered  >  layered (later layers)  >  layered (earlier)

     !important declaration priority:
       layered (earlier)  >  layered (later)  >  unlayered

   Consequence we exploit here:
     - Properties WITHOUT !important inside a layer  → Elementor wins
     - Properties WITH    !important inside a layer  → we win

   Strategy per property type:
     COLORS / FONT-WEIGHT / TYPOGRAPHY  → in layer, NO !important
        → Vanessa can recolor any heading/text per widget, per
          breakpoint, via the Elementor sidebar.
     BUTTONS / FORMS / LAYOUT / SPACING → in layer, WITH !important
        → Locked. She can't accidentally break the design system.
     PAGE-SPECIFIC (privacy/AV)         → in pages layer, !important
        → Highest precedence; legal pages always render correctly.

   Layer order (lowest → highest for normal cascade):
     holos-reset → holos-base → holos-typography
       → holos-utilities → holos-components → holos-pages
   ================================================================ */

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

@layer holos-reset, holos-base, holos-typography, holos-utilities, holos-components, holos-pages;

/* ================================================================
   LAYER: holos-base
   Design tokens — unlayered logically (custom properties resolve
   at use-site), but kept here for source-organisation clarity.
   ================================================================ */
@layer holos-base {

  :root {
    /* Brand palette */
    --holos-warm-white: #FAF9F6;
    --holos-zand:       #F0EAE0;
    --holos-klei:       #DDD1B8;
    --holos-terracotta: #C8A882;
    --holos-koper:      #8B6B47;
    --holos-koper-dark: #6F5538;
    --holos-donker:     #2C2017;
    --holos-grijs:      #6B6255;
    --holos-grijs-warm: #8B7B6A;
    --holos-tekst:      #3D2F1F;

    /* Semantic */
    --color-bg:            var(--holos-warm-white);
    --color-text:          var(--holos-tekst);
    --color-heading:       var(--holos-donker);
    --color-muted:         var(--holos-grijs);
    --color-accent:        var(--holos-terracotta);
    --color-cta:           var(--holos-koper);
    --color-cta-hover:     var(--holos-donker);
    --color-border:        rgba(44, 32, 23, 0.08);
    --color-border-strong: rgba(44, 32, 23, 0.15);

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Fluid type scale */
    --fs-h1:      clamp(2.5rem, 5vw, 3rem);
    --fs-h2:      clamp(1.5rem, 2.8vw, 1.95rem);
    --fs-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
    --fs-h4:      clamp(1.125rem, 1.5vw, 1.25rem);
    --fs-lead:    clamp(1.0625rem, 1.3vw, 1.25rem);
    --fs-body:    1rem;
    --fs-sm:      0.9375rem;
    --fs-xs:      0.8125rem;
    --fs-eyebrow: 0.75rem;

    /* Line heights */
    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-base:  1.6;
    --lh-prose: 1.8;
    --lh-loose: 1.9;

    /* Spacing & layout */
    --section-py:           120px;
    --section-py-md:        96px;
    --section-py-sm:        72px;
    --container-max:        1280px;
    --container-px:         40px;
    --container-px-mobile:  24px;
    --prose-max:            640px;

    /* HFE header offset for anchor scrolling */
    --header-h: 88px;

    /* Radii */
    --radius-sm: 2px;
    --radius:    4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Motion */
    --transition-fast: 0.15s ease;
    --transition:      0.2s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(44, 32, 23, 0.04);
    --shadow:    0 4px 16px rgba(44, 32, 23, 0.06);
    --shadow-lg: 0 12px 40px rgba(44, 32, 23, 0.08);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(200, 168, 130, 0.45);
  }

  /* Body base — NO !important so Elementor Site Settings → Background
     can override at site or page level. */
  body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
  }

}

/* ================================================================
   LAYER: holos-reset
   Box-sizing, scroll, media defaults. Structural — no colors here.
   ================================================================ */
@layer holos-reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  img,
  picture,
  video,
  svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  figure { margin: 0; }

  hr {
    border: 0;
    height: 1px;
    background-color: var(--color-border);
    margin: 2rem 0;
  }

  /* Suppress Roboto / Roboto Slab fetched by Elementor/Hello defaults.
     NOTE: only effective if our CSS loads before Elementor's @font-face.
     If fonts still load: dequeue via functions.php (out of scope here). */
  @font-face {
    font-family: 'Roboto';
    size-adjust: 0%;
    src: local('Inter'), local('system-ui');
  }
  @font-face {
    font-family: 'Roboto Slab';
    size-adjust: 0%;
    src: local('Cormorant Garamond'), local('Georgia');
  }

}

/* ================================================================
   LAYER: holos-typography
   Default text styling. NO !important on color/weight — Elementor
   sidebar must win for per-widget and responsive color choices.
   !important kept ONLY on font-size + line-height for heading
   scales, because those are layout-critical (overflow control).
   ================================================================ */
@layer holos-typography {

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-weight: 300;
    line-height: var(--lh-snug);
    margin: 0 0 0.5em;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }

  p {
    margin: 0 0 1.25rem;
    text-wrap: pretty;
  }
  p:last-child { margin-bottom: 0; }

  a {
    color: var(--holos-koper);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(139, 107, 71, 0.4);
    transition: color var(--transition), text-decoration-color var(--transition);
  }

  a:hover {
    color: var(--holos-donker);
    text-decoration-color: var(--holos-donker);
  }

  ::selection {
    background-color: var(--holos-terracotta);
    color: var(--holos-donker);
  }

  ul, ol {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
  }

  li + li { margin-top: 0.4em; }

  strong, b { font-weight: 500; }

  /* Heading scales — applied when Elementor heading widget gets
     class "font-display". Font-size + line-height locked with
     !important (layout-critical). Color stays overridable. */
  h1.font-display,
  h1.font-display.e-heading-base {
    font-size: var(--fs-h1) !important;
    font-weight: 300;
    line-height: var(--lh-tight) !important;
    color: var(--holos-donker);
  }

  h2.font-display,
  h2.font-display.e-heading-base {
    font-size: var(--fs-h2) !important;
    font-weight: 300;
    line-height: var(--lh-snug) !important;
    color: var(--holos-donker);
  }

  h3.font-display,
  h3.font-display.e-heading-base {
    font-size: var(--fs-h3) !important;
    font-weight: 300;
    line-height: var(--lh-prose) !important;
  }

  h4.font-display,
  h4.font-display.e-heading-base {
    font-size: var(--fs-h4) !important;
    font-weight: 400;
    line-height: var(--lh-snug) !important;
  }

  /* Lead paragraph — color overridable */
  .lead,
  p.lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-prose);
    color: var(--color-text);
    font-weight: 300;
  }

}

/* ================================================================
   LAYER: holos-utilities
   Accessibility, layout helpers, color/background utilities.
   ----------------------------------------------------------------
   Background utilities keep !important (locked design tokens).
   Text-color utilities DROP !important so Elementor sidebar wins.
   Use .text-koper etc. as a baseline; sidebar = override path.
   ================================================================ */
@layer holos-utilities {

  /* --- A11y: focus management --- */
  :focus { outline: none; }

  :focus-visible {
    outline: 2px solid var(--holos-koper);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* Respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Screen-reader-only utility */
  .sr-only,
  .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* CSS-driven uppercase — fixes hardcoded ALL CAPS a11y issue.
     Add class "uppercase" via Elementor Advanced → CSS Classes
     instead of typing CAPS in the content field. */
  .uppercase,
  .text-uppercase {
    text-transform: uppercase !important;
    letter-spacing: 0.08em;
  }

  /* --- Layout helpers (locked) --- */
  .section-py    { padding-top: var(--section-py);    padding-bottom: var(--section-py); }
  .section-py-md { padding-top: var(--section-py-md); padding-bottom: var(--section-py-md); }
  .section-py-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }

  .container-boxed {
    max-width: var(--container-max);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--container-px);
  }

  .prose-max {
    max-width: var(--prose-max);
    line-height: var(--lh-prose);
  }
  .prose-max p { margin-bottom: 1.5rem; }

  .text-center { text-align: center !important; }
  .text-left   { text-align: left   !important; }

  /* Accent line variants */
  .accent-line {
    width: 40px;
    height: 2px;
    background-color: var(--color-accent);
    margin: 0 0 24px;
    border: none;
    display: block;
  }
  .accent-line.is-center { margin-inline: auto; }
  .accent-line.is-koper  { background-color: var(--holos-koper); }
  .accent-line.is-donker { background-color: var(--holos-donker); }
  .accent-line.is-light  { background-color: var(--holos-warm-white); }

  /* --- Background utilities (locked) ---
     Use !important so a class on a container always wins. */
  .bg-warm-white { background-color: var(--holos-warm-white) !important; }
  .bg-zand       { background-color: var(--holos-zand)       !important; }
  .bg-klei       { background-color: var(--holos-klei)       !important; }
  .bg-donker     { background-color: var(--holos-donker)     !important; }
  .bg-koper      { background-color: var(--holos-koper)      !important; }

  /* Font-family utilities */
  .font-display { font-family: var(--font-display) !important; }
  .font-body    { font-family: var(--font-body)    !important; }

  /* --- Text-color utilities (overridable) ---
     NO !important: Elementor sidebar wins on a per-widget basis.
     Use these as defaults; override per breakpoint where needed. */
  .text-koper      { color: var(--holos-koper); }
  .text-donker     { color: var(--holos-donker); }
  .text-grijs      { color: var(--holos-grijs); }
  .text-white      { color: var(--holos-warm-white); }
  .text-terracotta { color: var(--holos-terracotta); }
  .text-italic     { font-style: italic !important; }

  /* --- Dark-section inversion ---
     Default text/link inversion inside .bg-donker. NO !important
     so Elementor sidebar still wins for per-widget overrides. */
  .bg-donker,
  .bg-donker p,
  .bg-donker h1,
  .bg-donker h2,
  .bg-donker h3,
  .bg-donker h4,
  .bg-donker h5,
  .bg-donker h6 {
    color: var(--holos-warm-white);
  }

  .bg-donker a:not(.btn-holos):not(.btn-holos-ghost) {
    color: var(--holos-terracotta);
    text-decoration-color: rgba(200, 168, 130, 0.5);
  }
  .bg-donker a:not(.btn-holos):not(.btn-holos-ghost):hover {
    color: var(--holos-warm-white);
    text-decoration-color: var(--holos-warm-white);
  }

  /* --- Mobile color safety net (opt-in) ---
     Use case: Elementor sidebar doesn't expose color for a given
     widget on mobile, OR you want a reusable mobile-only color
     swap without per-widget settings. Apply via Advanced → CSS
     Classes. !important here is intentional: opt-in = explicit. */
  @media (max-width: 767px) {
    .is-light-mobile,
    .is-light-mobile h1,
    .is-light-mobile h2,
    .is-light-mobile h3,
    .is-light-mobile h4,
    .is-light-mobile p,
    .is-light-mobile a { color: var(--holos-warm-white) !important; }

    .is-dark-mobile,
    .is-dark-mobile h1,
    .is-dark-mobile h2,
    .is-dark-mobile h3,
    .is-dark-mobile h4,
    .is-dark-mobile p,
    .is-dark-mobile a { color: var(--holos-donker) !important; }

    .is-koper-mobile,
    .is-koper-mobile h1,
    .is-koper-mobile h2,
    .is-koper-mobile h3,
    .is-koper-mobile h4,
    .is-koper-mobile p,
    .is-koper-mobile a { color: var(--holos-koper) !important; }
  }

  /* --- Image utilities --- */
  .img-rounded    { border-radius: var(--radius-md); overflow: hidden; }
  .img-rounded-lg { border-radius: var(--radius-lg); overflow: hidden; }
  .img-frame      { box-shadow: var(--shadow); border-radius: var(--radius-md); }

  /* --- Anchor scroll offset (sticky HFE header) --- */
  #hero, #herkenning, #wat-is-holos, #wat-er-gebeurt,
  #aanbod, #over-vanessa, #keramiek, #de-plek,
  #agenda, #voor-wie-twijfelt, #slot, #nieuwsbrief,
  [id^="section-"] {
    scroll-margin-top: calc(var(--header-h) + 16px);
  }

}

/* ================================================================
   LAYER: holos-components
   Buttons, forms, section-label, mailpoet/mailchimp.
   ----------------------------------------------------------------
   Buttons + forms: !important on EVERYTHING. Design system locked.
   Section label: !important on layout (size, spacing, transform)
                  but NOT on color → sidebar can recolor it.
   ================================================================ */
@layer holos-components {

  /* ============ BUTTONS — Primary (filled) ============ */
  .btn-holos,
  a.btn-holos,
  a.btn-holos.e-button-base,
  .btn-holos.e-button-base,
  button.btn-holos {
    display: inline-block;
    background-color: var(--holos-koper) !important;
    color: var(--holos-warm-white) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: none !important;
    text-decoration: none !important;
    padding: 14px 32px !important;
    border-radius: var(--radius) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background-color var(--transition),
                color var(--transition),
                transform var(--transition-fast) !important;
    cursor: pointer;
    line-height: 1.4 !important;
  }

  .btn-holos:hover,
  a.btn-holos:hover,
  a.btn-holos.e-button-base:hover,
  .btn-holos.e-button-base:hover,
  button.btn-holos:hover {
    background-color: var(--holos-donker) !important;
    color: var(--holos-warm-white) !important;
  }

  .btn-holos:active,
  a.btn-holos:active,
  button.btn-holos:active {
    transform: translateY(1px);
  }

  .btn-holos:focus-visible,
  a.btn-holos:focus-visible,
  button.btn-holos:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
  }

  .btn-holos[disabled],
  .btn-holos.is-disabled,
  button.btn-holos:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ============ BUTTONS — Ghost (outline) ============ */
  .btn-holos-ghost,
  a.btn-holos-ghost,
  a.btn-holos-ghost.e-button-base,
  .btn-holos-ghost.e-button-base,
  button.btn-holos-ghost {
    display: inline-block;
    background-color: transparent !important;
    color: var(--holos-koper) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    padding: 13px 31px !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--holos-koper) !important;
    box-shadow: none !important;
    transition: all var(--transition) !important;
    cursor: pointer;
    line-height: 1.4 !important;
  }

  .btn-holos-ghost:hover,
  a.btn-holos-ghost:hover,
  a.btn-holos-ghost.e-button-base:hover,
  .btn-holos-ghost.e-button-base:hover,
  button.btn-holos-ghost:hover {
    background-color: var(--holos-koper) !important;
    color: var(--holos-warm-white) !important;
  }

  .btn-holos-ghost:focus-visible,
  a.btn-holos-ghost:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
  }

  /* Ghost-on-dark variant */
  .bg-donker .btn-holos-ghost,
  .btn-holos-ghost.is-light {
    color: var(--holos-warm-white) !important;
    border-color: var(--holos-warm-white) !important;
  }
  .bg-donker .btn-holos-ghost:hover,
  .btn-holos-ghost.is-light:hover {
    background-color: var(--holos-warm-white) !important;
    color: var(--holos-donker) !important;
  }

  /* ============ SECTION LABEL (eyebrow) ============
     Layout/typography locked. Color overridable via sidebar. */
  .section-label,
  .section-label.e-heading-base {
    font-family: var(--font-body) !important;
    font-size: var(--fs-eyebrow) !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--holos-grijs);
    margin-bottom: 20px !important;
    display: block !important;
  }

  .bg-donker .section-label {
    color: var(--holos-terracotta);
  }

  /* ============ FORMS — generic baseline ============ */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--holos-warm-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    padding: 12px 16px;
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none;
    appearance: none;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--holos-grijs-warm);
    opacity: 1;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--holos-koper);
    box-shadow: var(--focus-ring);
  }

  label {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--color-text);
    margin-bottom: 6px;
  }

  /* ============ MAILPOET / MAILCHIMP ============ */
  .mailpoet_form,
  .mc-field-group,
  .mc4wp-form-fields {
    font-family: var(--font-body);
  }

  .mailpoet_submit,
  .mc4wp-form input[type="submit"] {
    background-color: var(--holos-koper) !important;
    color: var(--holos-warm-white) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius) !important;
    padding: 14px 32px !important;
    font-family: var(--font-body) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    cursor: pointer;
    transition: background-color var(--transition) !important;
  }

  .mailpoet_submit:hover,
  .mc4wp-form input[type="submit"]:hover {
    background-color: var(--holos-donker) !important;
  }

}

/* ================================================================
   LAYER: holos-pages
   Page-specific overrides. Highest precedence in the cascade for
   both normal and !important (because we keep !important here on
   anything that's legally/structurally critical).
   Scope: page-id-3 (privacybeleid) | page-id-97 (algemene-voorwaarden)
   ================================================================ */
@layer holos-pages {

  body.privacy-policy,
  body.page-id-97 {
    background-color: var(--holos-warm-white) !important;
  }

  .privacy-policy .e-con.e-parent,
  .page-id-97     .e-con.e-parent {
    background-color: var(--holos-warm-white) !important;
    min-height: 100vh;
  }

  .privacy-policy .elementor-widget-container,
  .page-id-97     .elementor-widget-container,
  .elementor-3    .elementor-widget-text-editor,
  .elementor-97   .elementor-widget-text-editor {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 32px 96px;
    background-color: var(--holos-warm-white);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: var(--lh-loose);
    color: var(--holos-tekst);
  }

  .privacy-policy .elementor-widget-container p,
  .page-id-97     .elementor-widget-container p,
  .elementor-3    .elementor-widget-text-editor p,
  .elementor-97   .elementor-widget-text-editor p {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    line-height: var(--lh-loose);
    color: var(--holos-tekst);
  }

  /* Address/info blocks (paragraphs containing <br>) */
  .privacy-policy .elementor-widget-container p:has(br),
  .page-id-97     .elementor-widget-container p:has(br) {
    background-color: var(--holos-zand);
    border-left: 2px solid var(--holos-terracotta);
    border-radius: 0 6px 6px 0;
    padding: 16px 24px;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--holos-koper);
  }

  .privacy-policy .elementor-widget-container a,
  .page-id-97     .elementor-widget-container a {
    color: var(--holos-koper);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--holos-terracotta);
    transition: color var(--transition);
  }

  .privacy-policy .elementor-widget-container a:hover,
  .page-id-97     .elementor-widget-container a:hover {
    color: var(--holos-donker);
    text-decoration-color: var(--holos-donker);
  }

  /* "Last updated" footer (last paragraph) */
  .privacy-policy .elementor-widget-container p:last-child,
  .page-id-97     .elementor-widget-container p:last-child {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--holos-grijs-warm);
    font-style: italic;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 0.5px solid var(--holos-klei);
  }

}

/* ================================================================
   RESPONSIVE
   Layout-only adjustments. Lives outside layers so it overrides
   layered defaults at the right breakpoint, but Elementor's own
   responsive sidebar output (unlayered) still wins on colors.
   ================================================================ */
@media (max-width: 1024px) {
  :root {
    --section-py: var(--section-py-md);
  }
}

@media (max-width: 768px) {
  :root {
    --section-py:    var(--section-py-sm);
    --section-py-md: var(--section-py-sm);
    --header-h:      72px;
    --container-px:  var(--container-px-mobile);
  }

  .privacy-policy .elementor-widget-container,
  .page-id-97     .elementor-widget-container,
  .elementor-3    .elementor-widget-text-editor,
  .elementor-97   .elementor-widget-text-editor {
    padding: 40px 20px 72px;
  }

  .privacy-policy .elementor-widget-container p:has(br),
  .page-id-97     .elementor-widget-container p:has(br) {
    padding: 12px 16px;
  }
}

/* ================================================================
   PRINT
   Privacy & Algemene Voorwaarden must print clean (legal habit).
   ================================================================ */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .btn-holos,
  .btn-holos-ghost,
  header, footer, nav,
  .elementor-location-header,
  .elementor-location-footer {
    display: none !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}/* End custom CSS */