/* ==========================================================================
   PX Non-Profit Theme - Base Design System
   Overgenomen van Bricks Builder design tokens
   ========================================================================== */

/* ==========================================================================
   1. COLOR PALETTE
   ========================================================================== */

:root {
  /* Brand Colors */
  --action: #0093F5;
  --navy: #105070;
  --yellow: #F0BC00;
  --coral: #F07575;
  --sand: #C1B2A5;

  /* Neutrals */
  --gray-dark: #333333;
  --gray-mid: #8D8D8D;
  --white: #FFFFFF;
  --black: #000000;
  --transparent: transparent;

  /* Accents */
  --sky-blue: #80C9FA;
  --blue-light: #CCE9FD;
  --sand-light: #F3F0ED;

  /* Semantic Colors */
  --bg-site: var(--sand-light);
  --bg-section-alt: var(--white);
  --text-base: var(--gray-dark);
  --text-heading: var(--gray-dark);
  --text-active: var(--action);
  --divider-primary: var(--action);

  /* Button Semantic */
  --btn-focus-ring: var(--gray-dark);
  --btn-disabled-text: var(--gray-mid);
  --btn-disabled-bg: var(--sand-light);
  --btn-conv-radius: var(--radius-m);

  /* Button Padding — twee tiers, overschreven op mobiel */
  --btn-pad: calc(var(--space-d075) - 3px) calc(var(--space-d1) - 3px);
  --btn-cta-pad: calc(var(--space-d1) - 3px) calc(var(--space-d125) - 3px);
}


/* ==========================================================================
   2. FONT FAMILIES
   ========================================================================== */

:root {
  --font-display: 'Lexend', sans-serif;
  --font-body: 'IBM Plex Serif', serif;
}


/* ==========================================================================
   3. FONT WEIGHTS
   ========================================================================== */

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}


/* ==========================================================================
   4. LINE HEIGHTS
   ========================================================================== */

:root {
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.75;
}


/* ==========================================================================
   5. LETTER SPACINGS
   ========================================================================== */

:root {
  --ls-tight: -0.01em;
  --ls-none: 0em;
}


/* ==========================================================================
   6. TYPOGRAPHY SCALE (fluid responsive)
   Min screen: 390px (24.38rem) / Max screen: 2200px (137.5rem)
   ========================================================================== */

:root {
  --text-d001: clamp(0.13rem, calc(0 * (100vw - 24.38rem) + 0.13rem), 0.13rem);
  --text-d025: clamp(0.22rem, calc(0.0007956152758132955 * (100vw - 24.38rem) + 0.22rem), 0.31rem);
  --text-d05: clamp(0.44rem, calc(0.0016796322489391795 * (100vw - 24.38rem) + 0.44rem), 0.63rem);
  --text-d075: clamp(0.66rem, calc(0.0024752475247524744 * (100vw - 24.38rem) + 0.66rem), 0.94rem);
  --text-d1: clamp(0.88rem, calc(0.0032708628005657706 * (100vw - 24.38rem) + 0.88rem), 1.25rem);
  --text-d125: clamp(1.09rem, calc(0.004154879773691654 * (100vw - 24.38rem) + 1.09rem), 1.56rem);
  --text-d15: clamp(1.31rem, calc(0.005038896746817538 * (100vw - 24.38rem) + 1.31rem), 1.88rem);
  --text-d2: clamp(1.75rem, calc(0.00663012729844413 * (100vw - 24.38rem) + 1.75rem), 2.5rem);
  --text-d3: clamp(2.63rem, calc(0.009900990099009901 * (100vw - 24.38rem) + 2.63rem), 3.75rem);
  --text-d5: clamp(4.38rem, calc(0.016531117397454033 * (100vw - 24.38rem) + 4.38rem), 6.25rem);
  --text-d10: clamp(8.75rem, calc(0.03315063649222065 * (100vw - 24.38rem) + 8.75rem), 12.5rem);

  /* Body text token — central control for mobile override */
  --text-body: var(--text-d1);

  /* Narrow-column h2: follows --text-d3, but under 439px it may drop below
     the d3 floor (9.7vw, min 1.9rem). Above that width both are equal, so no
     media query is needed. Opt in per heading wrapper with
     "--text-d3: var(--text-d3-fit)". Never set it on a module root, because
     --bg-split-offset reads --text-d3 there. */
  --text-d3-fit: clamp(1.9rem, 9.7vw, var(--text-d3));
}


/* ==========================================================================
   7. SPACING SCALE (fluid responsive)
   ========================================================================== */

:root {
  --space-d001: clamp(0.13rem, calc(0 * (100vw - 24.38rem) + 0.13rem), 0.13rem); /* D001 */
  --space-d025: clamp(0.22rem, calc(0.0007956152758132955 * (100vw - 24.38rem) + 0.22rem), 0.31rem); /* D025 */
  --space-d05: clamp(0.44rem, calc(0.0016796322489391795 * (100vw - 24.38rem) + 0.44rem), 0.63rem); /* D05 */
  --space-d075: clamp(0.66rem, calc(0.0024752475247524744 * (100vw - 24.38rem) + 0.66rem), 0.94rem); /* D075 */
  --space-d1: clamp(0.88rem, calc(0.0032708628005657706 * (100vw - 24.38rem) + 0.88rem), 1.25rem); /* D1 */
  --space-d125: clamp(1.09rem, calc(0.004154879773691654 * (100vw - 24.38rem) + 1.09rem), 1.56rem); /* D125 */
  --space-d15: clamp(1.31rem, calc(0.005038896746817538 * (100vw - 24.38rem) + 1.31rem), 1.88rem); /* D15 */
  --space-d2: clamp(1.75rem, calc(0.00663012729844413 * (100vw - 24.38rem) + 1.75rem), 2.5rem); /* D2 */
  --space-d3: clamp(2.63rem, calc(0.009900990099009901 * (100vw - 24.38rem) + 2.63rem), 3.75rem); /* D3 */
  --space-d5: clamp(4.38rem, calc(0.016531117397454033 * (100vw - 24.38rem) + 4.38rem), 6.25rem); /* D5 */
  --space-d10: clamp(8.75rem, calc(0.03315063649222065 * (100vw - 24.38rem) + 8.75rem), 12.5rem); /* D10 */
}


/* ==========================================================================
   7b. HERO OVERLAP (negative pull-up over hero)
   ========================================================================== */

:root {
  --hero-overlap: clamp(-80px, -6vw, -50px);       /* intro-text, intro-cta */
  --hero-overlap-lg: clamp(-125px, -9vw, -60px);    /* lp-content */
}


/* ==========================================================================
   8. BORDER RADIUS
   ========================================================================== */

:root {
  --radius-xs: var(--space-d05);
  --radius-s: var(--space-d075);
  --radius-m: var(--space-d1);
  --radius-full: 50%;
  --radius-pill: 999rem;
}


/* ==========================================================================
   9. LAYOUT
   ========================================================================== */

:root {
  --row-width: 1250px;
  --row-width-narrow: 1040px;

  /* Hero heights — used by px-hero and px-lp-content hero */
  --hero-height: 900px;
  --hero-height-tablet: 720px;
  --hero-height-mobile: 620px;
}


/* ==========================================================================
   10. BOX SHADOWS
   ========================================================================== */

:root {
  /* Box shadows */
  --shadow-subtle: 1px 1px 2px 0px #00000059;
  --shadow-hover: 1px 3px 4px 0px #33333333;
  --shadow-pressed: 1px 2px 3px 0px #33333333;
  --shadow-elevated: 2px 4px 10px 0px #33333326;
  --shadow-elevated-fluid: var(--space-d05) var(--space-d075) var(--space-d2) 0px #00000040;

  /* Text shadow (for text over images) */
  --shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   11. TRANSITIONS & ANIMATIONS
   ========================================================================== */

:root {
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-btn: background-color var(--duration-normal) var(--ease-smooth),
                    border-color var(--duration-normal) var(--ease-smooth),
                    box-shadow var(--duration-normal) var(--ease-smooth),
                    width var(--duration-normal) var(--ease-smooth),
                    fill var(--duration-normal) var(--ease-smooth);
}


/* ==========================================================================
   12. GRADIENTS
   ========================================================================== */

:root {
  /* Directional navy overlay for full-width image sections (hero, banner) */
  --gradient-img-overlay-right: linear-gradient(to right, color-mix(in srgb, var(--navy) 45%, transparent) 30%, transparent 71.5%);
  --gradient-img-overlay-left:  linear-gradient(to left,  color-mix(in srgb, var(--navy) 45%, transparent) 30%, transparent 71.5%);

  /* Diagonal navy overlay for cards */
  --gradient-card-overlay: linear-gradient(205deg, transparent 27.81%, color-mix(in srgb, var(--navy) 45%, transparent) 68.72%);

  /* Mobile hero gradient (full overlay for readability) */
  --gradient-hero-mobile: linear-gradient(160deg, transparent 35%, color-mix(in srgb, var(--navy) 75%, transparent) 70%);

  /* Scroll indicator (shows more content on horizontal scroll) */
  --gradient-scroll-indicator: linear-gradient(to right, transparent, var(--sand-light));
}


/* ==========================================================================
   13. BASE / RESET
   ========================================================================== */

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

@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;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background-color: var(--bg-site);
  color: var(--text-base);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-none);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

@media screen and (max-width: 992px) {
  h1, h2 {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

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

/* Skip link (keyboard nav) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: var(--space-d05) var(--space-d075);
  background: var(--action);
  color: var(--white);
  font-family: var(--font-display);
}

.skip-link:focus {
  top: 0;
}

/* Global focus-visible - alleen bij keyboard navigatie */
:focus-visible {
  outline: solid 3px var(--btn-focus-ring);
  outline-offset: 2px;
}

/* Verberg standaard focus ring bij muis, toon bij keyboard */
:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   13. TYPOGRAPHY CLASSES
   ========================================================================== */

.heading {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-tight);
  overflow-wrap: break-word;
}

.heading--h1 {
  font-size: var(--text-d5);
  line-height: var(--lh-tight);
  row-gap: var(--space-d1);
}

.heading--h2 {
  font-size: var(--text-d3);
  line-height: var(--lh-tight);
  row-gap: var(--space-d075);
}

.heading--h3 {
  font-size: var(--text-d2);
  line-height: var(--lh-snug);
  row-gap: var(--space-d05);
}

.heading--h4 {
  font-size: var(--text-d125);
  line-height: var(--lh-snug);
  row-gap: var(--space-d05);
}

/* Heading divider (colored bar above heading) */
.heading__divider {
  display: flex;
  flex-direction: column;
}

.heading__divider::before {
  content: "";
  display: block;
  background-color: var(--divider-primary);
}

.heading__divider.heading--h1::before {
  width: 2em;
  height: 0.15em;
}

.heading__divider.heading--h2::before {
  width: 1.66em;
  height: 0.166em;
}

.heading__divider.heading--h3::before {
  width: 1.5em;
  height: 0.125em;
}

.heading__divider.heading--h4::before {
  width: 2.4em;
  height: 0.2em;
}

/* Hide <br> in headings on mobile */
@media screen and (max-width: 767px) {
  .px-heading br {
    display: none;
  }
}

/* Body text */
.text {
  font-family: var(--font-body);
}

.text--body {
  font-size: var(--text-body);
  color: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-none);
}

@media screen and (max-width: 767px) {
  :root {
    --text-body: var(--text-d125);
    --btn-pad: calc(var(--space-d1) - 3px) calc(var(--space-d125) - 3px);
    --btn-cta-pad: calc(var(--space-d125) - 3px) calc(var(--space-d15) - 3px);
  }
}


/* ==========================================================================
   14. LAYOUT CLASSES
   ========================================================================== */

.px-section {
  --px-section-gutter: var(--space-d3);

  display: flex;
  justify-content: center;

  /*
   * The section owns only the responsive inline gutter.
   * Components own their block spacing and can override either gutter edge.
   */
  padding-inline:
    var(--px-section-gutter-start, var(--px-section-gutter))
    var(--px-section-gutter-end, var(--px-section-gutter));
}

@media screen and (max-width: 992px) {
  .px-section {
    --px-section-gutter: var(--space-d2);
  }
}

@media screen and (max-width: 767px) {
  .px-section {
    --px-section-gutter: var(--space-d1);
  }

}

.container {
  max-width: 86.25rem;
  width: 100%;
}

/* Module container utility — shared base for all px-*__container divs */
.px-container {
  max-width: var(--row-width);
  /* width: calc(100% - 2 * var(--space-d3));
  margin-left: auto;
  margin-right: auto;*/
}

@media screen and (max-width: 992px) {
  .px-container {
    /*width: calc(100% - 2 * var(--space-d2));*/
  }
}


/* ==========================================================================
   15. BUTTON CLASSES
   ========================================================================== */

/* -- Button Group -- */
.btn-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-d1);
  width: fit-content;
}


/* ─── Tier 1: All button variants ─────────────────────────────────────────── */

.btn--prim,
.btn--sec,
.btn--conv1,
.btn--conv2,
.btn--tert,
.btn--icon,
.btn--body,
.px-rich-text a {
  transition: var(--transition-btn);
  cursor: pointer;
}

.btn--prim svg path,
.btn--sec svg path,
.btn--conv1 svg path,
.btn--conv2 svg path,
.btn--tert svg path,
.btn--icon svg path {
  transition: var(--transition-btn);
}


/* ─── Tier 2: Solid button base — prim, sec, conv1, conv2 ─────────────────── */

.btn--prim,
.btn--sec,
.btn--conv1,
.btn--conv2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-none);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-d05);

  position: relative;

  border: 3px solid var(--transparent);

  box-shadow: var(--shadow-subtle);
}


/* ─── Tier 3: Small button base — prim + sec ──────────────────────────────── */

.btn--prim,
.btn--sec {
  font-size: var(--text-d125);

  padding: var(--btn-pad);

  border-radius: var(--radius-s);
}

.btn--prim svg,
.btn--sec svg {
  width: var(--space-d1);
  height: var(--space-d1);
}

.btn--prim:focus-visible,
.btn--sec:focus-visible {
  color: var(--gray-dark);
  background-color: var(--white);
  outline: solid 5px var(--btn-focus-ring);
  outline-offset: 0;
  border-color: var(--action);
  box-shadow: none;
}


/* ─── Tier 4: Conv button base — conv1 + conv2 ────────────────────────────── */

.btn--conv1,
.btn--conv2 {
  font-size: var(--text-d125);

  padding: var(--btn-cta-pad);

  border-radius: var(--btn-conv-radius);
}

.btn--conv1 svg,
.btn--conv2 svg {
  width: var(--space-d15);
  height: var(--space-d15);

  fill: var(--coral);
}

.btn--conv1:focus,
.btn--conv2:focus {
  outline: solid 5px var(--btn-focus-ring);
  outline-offset: 0;
  border-color: var(--yellow);
  box-shadow: none;
}


/* ─── Disabled — prim, sec, conv1, conv2 ──────────────────────────────────── */

.btn--prim:disabled,  .btn--prim[aria-disabled="true"],
.btn--sec:disabled,   .btn--sec[aria-disabled="true"],
.btn--conv1:disabled, .btn--conv1[aria-disabled="true"],
.btn--conv2:disabled, .btn--conv2[aria-disabled="true"] {
  color: var(--btn-disabled-text);
  background-color: var(--btn-disabled-bg);
  border-color: var(--transparent);
  outline: none;
  box-shadow: none;
}

.btn--prim:disabled path,  .btn--prim[aria-disabled="true"] path,
.btn--sec:disabled path,   .btn--sec[aria-disabled="true"] path,
.btn--conv1:disabled path, .btn--conv1[aria-disabled="true"] path,
.btn--conv2:disabled path, .btn--conv2[aria-disabled="true"] path {
  fill: var(--btn-disabled-text);
}


/* ─── Primary Button ──────────────────────────────────────────────────────── */

.btn--prim {
  color: var(--white);

  background-color: var(--action);
}

.btn--prim:hover {
  color: var(--gray-dark);

  background-color: var(--white);
  border-color: var(--action);
  box-shadow: var(--shadow-hover);
}

.btn--prim:hover path {
  fill: var(--gray-dark);
}

.btn--prim:active {
  color: var(--white);

  background-color: var(--navy);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}

.btn--prim:active path {
  fill: var(--white);
}


/* ─── Secondary Button ────────────────────────────────────────────────────── */

.btn--sec {
  color: var(--gray-dark);

  background-color: var(--white);
}

.btn--sec svg path {
  fill: var(--gray-dark);
}

.btn--sec:hover {
  color: var(--gray-dark);

  background-color: var(--white);
  border-color: var(--action);
  box-shadow: var(--shadow-hover);
}

.btn--sec:hover path {
  fill: var(--gray-dark);
}

.btn--sec:active {
  color: var(--gray-dark);

  background-color: var(--sky-blue);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}

.btn--sec:active path {
  fill: var(--gray-dark);
}


/* ─── Conversion Button 1 (Yellow) ───────────────────────────────────────── */

.btn--conv1 {
  color: var(--gray-dark);

  background-color: var(--yellow);
}

.btn--conv1:hover {
  background-color: var(--white);
  border-color: var(--yellow);
  box-shadow: var(--shadow-hover);
}

.btn--conv1:focus {
  background-color: var(--white);
}

.btn--conv1:active {
  color: var(--white);

  background-color: var(--navy);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}


/* ─── Conversion Button 2 (Navy) ─────────────────────────────────────────── */

.btn--conv2 {
  color: var(--white);

  background-color: var(--navy);
}

.btn--conv2:hover {
  color: var(--gray-dark);

  background-color: var(--white);
  border-color: var(--navy);
  box-shadow: var(--shadow-hover);
}

.btn--conv2:focus {
  background-color: var(--white);
}

.btn--conv2:active {
  color: var(--gray-dark);

  background-color: var(--yellow);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}


/* ─── Tertiary Button (Text Link) ────────────────────────────────────────── */

.btn--tert {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-none);
  color: var(--gray-dark);
  text-decoration: underline;

  display: grid;
  grid-template-columns: auto 0fr;
  align-items: center;
  gap: 0;

  padding: var(--space-d05) 0;

  background-color: var(--transparent);
  border-radius: var(--radius-xs);
  border: none;
}

.btn--tert svg {
  overflow: hidden;
  width: 0;
  transition: var(--transition-btn);
}

.btn--tert:hover {
  color: var(--action);
  text-decoration: none;

  grid-template-columns: auto 1fr;
  gap: var(--space-d05);
}

.btn--tert:hover svg {
  width: var(--space-d1);
  height: var(--space-d1);
}

.btn--tert:focus {
  color: var(--action);
  text-decoration: none;

  background-color: var(--white);
  outline: 5px solid var(--btn-focus-ring);
}

.btn--tert:active {
  color: var(--action);

  outline: none;
}

.btn--tert:active svg {
  width: 0;
}


/* ─── Icon Button (Circle) ───────────────────────────────────────────────── */

.btn--icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: calc(3.75rem - 3px);
  height: calc(3.75rem - 3px);

  background-color: var(--white);
  border: 3px solid var(--transparent);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-subtle);
}

.btn--icon svg {
  width: var(--space-d15);
  height: var(--space-d15);
}

.btn--icon:hover {
  border-color: var(--action);
  box-shadow: var(--shadow-hover);
}

.btn--icon:hover svg path {
  fill: var(--action);
}

.btn--icon:focus {
  outline: var(--btn-focus-ring);
  border-color: var(--transparent);
  box-shadow: var(--shadow-hover);
}

.btn--icon:active {
  background-color: var(--sky-blue);
  box-shadow: var(--shadow-pressed);
}

.btn--icon:active svg path {
  fill: var(--action);
}


/* ─── Icon Left modifier ─────────────────────────────────────────────────── */

.btn--icon-left {
  flex-direction: row-reverse;
}


/* ─── Body Text Link ─────────────────────────────────────────────────────── */

.btn--body,
.px-rich-text a:not(.px-menu-link):not(.px-share__btn):not([class*="btn--"]) {
  color: var(--action);
  text-decoration: underline;

  border-radius: var(--space-d025);
  /*border: var(--space-d025) solid var(--transparent);*/
}

.btn--body:hover,
.px-rich-text a:not(.px-menu-link):not(.px-share__btn):not([class*="btn--"]):hover {
  text-decoration: none;
}

.btn--body:focus,
.px-rich-text a:not(.px-menu-link):not(.px-share__btn):not([class*="btn--"]):focus {
  text-decoration: none;
  padding: 0 var(--space-d025);
  border-color: var(--btn-focus-ring);
  outline: none;
}

.btn--body:active,
.px-rich-text a:not(.px-menu-link):not(.px-share__btn):not([class*="btn--"]):active {
  color: var(--coral);
  text-decoration: underline;
  padding: 0;
  border-color: var(--transparent);
}

.px-rich-text h2,
.px-rich-text h3 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-size: var(--text-d125);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 1.5em 0 0.5em;
}

.px-rich-text h2:first-child,
.px-rich-text h3:first-child {
  margin-top: 0;
}

.px-rich-text p {
  margin: 0 0 1em;
}

.px-rich-text p:last-child:not(:has(> img:only-child)) {
  margin-bottom: 0;
}

.px-rich-text img {
  height: 100px !important;
  width: auto;
  display: block;
}

.px-rich-text p:has(> img:only-child) {
  line-height: 0;
}


/* ─── Mobile-only Button ─────────────────────────────────────────────────── */

.btn--mobile {
  display: none;
}

@media screen and (max-width: 475px) {
  .btn--mobile {
    display: flex;
  }
}



/* ==========================================================================
   16. COMPACT MODE
   Zoom is managed by PX_Zoom_Slider class in functions.php.
   ========================================================================== */


/* ==========================================================================
   17. UTILITY CLASSES
   ========================================================================== */



/* === px-404.css === */
/* ==========================================================================
   PX 404 Page — fallback (without BB Themer layout)
   When the px-404 BB module is used in a Themer layout, these styles
   are not needed — the module's own css/frontend.css handles everything.
   ========================================================================== */

.px-404__inner {
  max-width: var(--row-width-narrow);
  margin: 0 auto;
  padding: var(--space-d5) var(--space-d3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-d2);
}

.px-404__title {
  margin: 0;
}

.px-404__body {
  font-size: var(--text-d125);
  color: var(--black);
}

.px-404__body p {
  margin: 0;
}

@media (max-width: 768px) {
  .px-404__inner {
    padding: var(--space-d3) var(--space-d1);
  }
}

/* === px-accordion.css === */
/**
 * PX Accordion (FAQ) - Shared CSS
 *
 * Reusable accordion item styles used by multiple modules (px-faq, px-intro-text).
 * Section-level layout lives in each module's own css/frontend.css.
 */

/* ==========================================================================
   Container (centered items list)
   ========================================================================== */

.px-accordion__container {
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);

	max-width: var(--row-width);
	width: 100%;

	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Item
   ========================================================================== */

.px-accordion__item {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   Question heading + button
   ========================================================================== */

.px-accordion__heading {
	margin: 0 !important;
}

.px-accordion__question {
	display: flex;
	align-items: flex-start;
	gap: var(--space-d05);

	text-align: left;
	color: var(--text-base);

	padding: var(--space-d025) 0;
	margin: 0;

	width: 100%;

	border: none;

	background: none;

	cursor: pointer;

	transition: color var(--duration-normal) var(--ease-smooth);
}

.px-accordion__question:hover {
	color: var(--action);
}

/* Open state: blue text */
.is-open .px-accordion__question {
	color: var(--action);
}

/* Focus ring */
.px-accordion__question:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Question text
   ========================================================================== */

.px-accordion__question-text {
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-accordion__question:hover .px-accordion__question-text {
	text-decoration: none;
}

/* Open state: blue text, semibold */
.is-open .px-accordion__question-text {
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

/* ==========================================================================
   Icon (caret-circle-down, rotates 180° on open)
   ========================================================================== */

.px-accordion__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: var(--space-d1);
	height: var(--space-d1);

	margin-top: var(--space-d025);

	transition: transform var(--duration-normal) var(--ease-smooth);
}

.px-accordion__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Open: rotate the arrow 180° */
.is-open .px-accordion__icon {
	transform: rotate(180deg);
}

/* ==========================================================================
   Answer panel (animated height via CSS grid 0fr → 1fr)
   ========================================================================== */

.px-accordion__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--duration-normal) var(--ease-smooth);
}

.is-open .px-accordion__answer-wrap {
	grid-template-rows: 1fr;
}

.px-accordion__answer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d075);

	padding-left: calc(var(--space-d1) + var(--space-d05));

	overflow: hidden;
	visibility: hidden;

	transition: padding var(--duration-normal) var(--ease-smooth),
	            visibility 0s linear var(--duration-normal);
}

.is-open .px-accordion__answer {
	visibility: visible;

	padding-top: var(--space-d05);
	padding-bottom: var(--space-d025);
	
	transition: padding var(--duration-normal) var(--ease-smooth),
	            visibility 0s linear 0s;
}

/* ==========================================================================
   Answer body text
   ========================================================================== */

.px-accordion__answer-text p {
	margin: 0 0 var(--space-d05) 0;
}

.px-accordion__answer-text p:last-child {
	margin-bottom: 0;
}

.px-accordion__answer-text ul,
.px-accordion__answer-text ol {
	margin: 0;
}

@media (max-width: 767px) {
	.px-accordion__answer-text ul,
	.px-accordion__answer-text ol {
		padding-inline-start: 20px;
	}
}

/* ==========================================================================
   Answer CTA button
   ========================================================================== */

.px-accordion__answer-btn {
	margin-top: var(--space-d025);
}


/* ==========================================================================
   Responsive – Mobile: larger icon for touch targets
   ========================================================================== */

@media (max-width: 767px) {
	.px-accordion__icon {
		width: var(--space-d15);
		height: var(--space-d15);
	}
}
/* === px-button.css === */
/**
 * PX Button - Static CSS
 */

.px-btn-wrap {
	display: flex;
}

.px-btn {
	display: inline-flex;
}

.px-btn:not(.btn--tert) {
	text-decoration: none;
}

.px-btn-text {
	pointer-events: none;
}

.px-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.px-btn-icon svg {
	display: block;
}

.px-btn-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-d1);
	width: fit-content;
}

/* === px-contact-card.css === */
/**
 * PX Contact Card — Shared card-level styles
 *
 * Reusable styles for individual contact cards, used by both:
 * - The standalone px-contact-cards module (grid layout)
 * - The minibuilder inside card/hero modules (vertical layout)
 *
 * Section/grid-specific layout lives in the module's own css/frontend.css.
 */


/* ==========================================================================
   Single Card
   ========================================================================== */

.px-contact-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-d15);
}


/* ==========================================================================
   Photo
   ========================================================================== */

.px-contact-card__image {
	width: 6.5rem;
	height: 6.5rem;
	border-radius: var(--radius-full);
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--white);
}

.px-contact-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   Text Group
   ========================================================================== */

.px-contact-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}


/* ==========================================================================
   Name (heading with divider)
   ========================================================================== */

.px-contact-card__name {
	font-size: var(--text-d125);
	margin-bottom: var(--space-d025);
}


/* ==========================================================================
   Role
   ========================================================================== */

.px-contact-card__role {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	margin: 0 0 var(--space-d075) 0;
}


/* ==========================================================================
   Contact List
   ========================================================================== */

.px-contact-card__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
}

.px-contact-card__contact-item {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}


/* ==========================================================================
   Contact Icon
   ========================================================================== */

.px-contact-card__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--action);
}

.px-contact-card__contact-icon svg {
	width: 1em;
	height: 1em;
}

/* Force currentColor on paths with hardcoded fills (e.g. LinkedIn) */
.px-contact-card__contact-icon svg path {
	fill: currentColor;
}


/* ==========================================================================
   Contact Link
   ========================================================================== */

.px-contact-card__contact-link {
	color: var(--gray-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-contact-card__contact-link:hover {
	color: var(--action);
}


/* ==========================================================================
   Vertical layout (minibuilder context)
   ========================================================================== */

.px-card__contact-cards,
.px-hero__contact-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-d2);
}

.px-card__contact-cards .px-contact-card:last-child,
.px-hero__contact-cards .px-contact-card:last-child {
	margin-bottom: var(--space-d1);
}


/* ==========================================================================
   Responsive — Mobile (≤767px)
   ========================================================================== */

@media screen and (max-width: 767px) {
	.px-contact-card {
		gap: var(--space-d1);
	}

	.px-contact-card__image {
		width: 5rem;
		height: 5rem;
	}
}


/* === px-downloads.css === */
/**
 * PX Downloads - Shared CSS
 *
 * Light list of download links: a small download icon plus the title as an
 * underlined link (same treatment as body links). No boxes, no dividers.
 * Rendered by the minibuilder inside card / hero modules.
 */

.px-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
}

.px-downloads__item {
	margin: 0;
}

.px-downloads__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-d05);
	width: -webkit-fit-content;
	width: fit-content;
	text-decoration: none;
	font-family: var(--font-display);
}

.px-downloads__icon {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--action);
}

.px-downloads__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.px-downloads__name {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	line-height: var(--lh-snug);
	color: var(--action);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.px-downloads__link:hover .px-downloads__name {
	text-decoration: none;
}

.px-downloads__link:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 3px;
	border-radius: 2px;
}

.px-downloads__link:focus-visible .px-downloads__name {
	text-decoration: none;
}

/* === px-cookiebot.css === */
/* ==========================================================================
   Cookiebot Dialog – Dorcas Theme Overrides
   !important needed: Cookiebot injects inline styles that override normal CSS.
   ========================================================================== */

/* ── Base dialog ── */
#CybotCookiebotDialog {
  font-family: var(--font-body) !important;
  color: var(--gray-dark) !important;
  border-radius: var(--radius-m) !important;
}

#CybotCookiebotDialog *,
#CybotCookiebotDialogBodyUnderlay * {
  font-family: inherit !important;
}

/* ── Header ── */
#CybotCookiebotDialogHeader {
  border-bottom-color: var(--sand) !important;
}

#CybotCookiebotDialogPoweredbyCybot svg {
  fill: var(--navy) !important;
}

/* ── Navigation tabs ── */
#CybotCookiebotDialogNav {
  border-bottom-color: var(--sand) !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--gray-dark) !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  border-bottom-color: var(--action) !important;
  color: var(--navy) !important;
}

/* ── Body content ── */
#CybotCookiebotDialogBodyContentTitle,
#CybotCookiebotDialog .CybotCookiebotDialogBodyContentHeading {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  color: var(--navy) !important;
}

#CybotCookiebotDialogBodyContentText {
  line-height: var(--lh-relaxed) !important;
}

/* ── Toggle sliders ── */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--sand) !important;
  border-radius: var(--radius-pill) !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--action) !important;
}

#CybotCookiebotDialog form input[type=checkbox][disabled]:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--sky-blue) !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider:before {
  background-color: var(--white) !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider:before {
  background-color: var(--white) !important;
}

/* ── Category level labels ── */
#CybotCookiebotDialogBodyLevelButtonsSelectPane {
  border-bottom-color: var(--sand) !important;
}

#CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonDescription {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
}

/* ── Buttons ── */
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  border-radius: var(--radius-m) !important;
  padding: var(--space-d075) var(--space-d1) !important;
  transition: opacity 0.2s ease, transform 0.1s ease !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:hover {
  opacity: 0.9 !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:active {
  transform: scale(0.98) !important;
}

/* Accept all */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept {
  background-color: var(--action) !important;
  border-color: var(--action) !important;
  color: var(--white) !important;
}

/* Selection / Customize */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize {
  background-color: var(--white) !important;
  border-color: var(--navy) !important;
  color: var(--navy) !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow {
  border-color: var(--navy) !important;
}

/* Decline / Necessary only */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline {
  background-color: var(--white) !important;
  border-color: var(--sand) !important;
  color: var(--gray-dark) !important;
}

/* ── Detail view: cookie cards ── */
#CybotCookiebotDialog .CookieCard {
  border-bottom-color: var(--sand) !important;
}

#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab {
  font-family: var(--font-display) !important;
}

.CybotCookiebotDialogDetailBodyContentCookieContainerButton:before,
.CybotCookiebotDialogDetailBodyContentIABv2Tab:before {
  border-color: var(--action) !important;
}

#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieGroup {
  border-color: var(--sand) !important;
  border-radius: var(--radius-s) !important;
}

#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieInfo {
  background-color: var(--sand-light) !important;
  border-color: var(--sand) !important;
  border-radius: var(--radius-s) !important;
}

#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieInfoTitle {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--navy) !important;
}

/* ── Links ── */
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a,
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink,
#CybotCookiebotDialogDetailBodyContentTextAbout a {
  color: var(--action) !important;
}

/* ── GPC toast ── */
#CybotCookiebotDialog .CybotCookiebotDialogGpcContainer {
  border-bottom-color: var(--sand) !important;
}

#CybotCookiebotDialogGpcIcon svg path {
  fill: var(--action) !important;
}

/* ── Detail footer ── */
#CybotCookiebotDialogDetailFooter a {
  color: var(--action) !important;
}

/* ── Focus styles ── */
#CybotCookiebotDialog :focus-visible,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper input:focus-visible + span {
  outline-color: var(--navy) !important;
}

/* ── Scrollbar theming ── */
#CybotCookiebotDialog .CybotCookiebotScrollContainer > div:first-of-type::-webkit-scrollbar-thumb {
  background: var(--navy) !important;
}

#CybotCookiebotDialog .CybotCookiebotScrollContainer > div:first-of-type::-webkit-scrollbar-track {
  background: var(--sand-light) !important;
}

/* ── Edge template: "More details" link ── */
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
  color: var(--action) !important;
  font-family: var(--font-display) !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a:after {
  border-color: var(--action) !important;
}

/* ── Bulk consent count badges ── */
#CybotCookiebotDialogTabContent .CybotCookiebotDialogDetailBulkConsentCount {
  background-color: var(--blue-light) !important;
  color: var(--navy) !important;
}

/* === px-crowdfunding.css === */
/**
 * PX Crowdfunding — Campaign stats, progress bar, photo.
 * Plugin CSS dequeued in enqueue.php via px_dequeue_plugin_styles().
 */


/* ==========================================================================
   1. STATS CARD — [crowdfunding] shortcode output
   ========================================================================== */

.crowdfunding-card-container {
	background: var(--navy);
	color: var(--white);
	padding: var(--space-d1) 0;
	margin: var(--space-d1) 0;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	box-shadow: var(--space-d3) 0 0 var(--navy), calc(var(--space-d3) * -1) 0 0 var(--navy);
}

.crowdfunding-amount span {
	font-size: var(--text-d2) !important;
}

.crowdfunding-goal-container,
.crowdfunding-progress-container {
	display: inline-block;
}

.crowdfunding-bar-container {
	height: 29px;
	max-width: 355px;
	margin-top: var(--space-d1);
	margin-bottom: var(--space-d075);
	overflow: hidden;
	background-color: var(--sand-light);
	border-radius: var(--radius-pill);
	padding: var(--space-d025);
	border: solid 2px var(--white);
}

.crowdfunding-bar {
	float: left;
	max-width: 100%;
	width: 0%;
	height: 15px;
	background-color: var(--action);
	border-radius: var(--radius-pill);
	transition: width var(--duration-slow) var(--ease-smooth);
	animation: crowdfunding-bar-fill 1.4s var(--ease-in) 1;
}

@keyframes crowdfunding-bar-fill {
	0% { width: 0%; }
}

@media (max-width: 767px) {
	.crowdfunding-amount-container {
		margin-bottom: var(--space-d075);
	}

	.crowdfunding-count-container {
		margin-top: var(--space-d025);
	}
}


/* ==========================================================================
   2. CAMPAIGN PHOTO — [crowdfunding_photo] shortcode output
   ========================================================================== */

.digicollect-photo:not(.organisatie),
.digicollect-photo:not(.organisatie) img {
	border-radius: var(--radius-full) !important;
	height: 150px;
	width: 150px;
	object-fit: cover;
	border: solid 2px var(--action);
}

.digicollect-photo.organisatie,
.digicollect-photo.organisatie img {
	height: auto;
	max-height: 50px;
	width: auto;
	object-fit: contain;
	border-radius: 0 !important;
	border: none;
}

/* === px-scroll-cue.css === */
/**
 * PX Scroll Cue - wijzer onder een vlak dat overloopt.
 *
 * Gebruikt door het gedeelde venster, de sponsorlijst en de winkelagenda.
 * De omhullende laag heeft data-px-scroll-cue-host, het scrollvlak zelf
 * data-px-scroll-region.
 */



.px-scroll-cue__fade,
.px-scroll-cue {
	display: none;
}

.px-scroll-cue-host--overflow .px-scroll-cue__fade {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	height: 5.5rem;
	display: block;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white) 78%);
	pointer-events: none;
	transition: opacity var(--duration-normal) var(--ease-smooth);
}

.px-venster > .px-scroll-cue__fade {
	right: 4px;
}

.px-scroll-cue-host--at-end .px-scroll-cue__fade {
	opacity: 0;
}

.px-scroll-cue-host--overflow .px-scroll-cue {
	position: absolute;
	z-index: 4;
	bottom: -32px;
	left: 50%;
	width: 18rem;
	max-width: calc(100vw - 2rem);
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-d05);
	padding-left: 1.1rem;
	border-radius: var(--radius-pill);
	background: var(--white);
	box-shadow: var(--shadow-hover);
	transform: translateX(-50%);
}

.px-scroll-cue__label {
	min-width: 0;
	flex: 1 1 auto;
	display: grid;
	overflow: hidden;
	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: 0.86rem;
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	white-space: nowrap;
}

.px-scroll-cue__text {
	grid-area: 1 / 1;
	pointer-events: none;
	transition: opacity 0.24s var(--ease-smooth), transform var(--duration-normal) var(--ease-smooth);
}

.px-scroll-cue__text--more {
	opacity: 1;
	transform: translateY(0);
}

.px-scroll-cue__text--top {
	opacity: 0;
	transform: translateY(0.35rem);
}

.px-scroll-cue-host--at-end .px-scroll-cue__text--more {
	opacity: 0;
	transform: translateY(-0.35rem);
}

.px-scroll-cue-host--at-end .px-scroll-cue__text--top {
	opacity: 1;
	transform: translateY(0);
}

.px-scroll-cue__button {
	width: 60px;
	height: 60px;
	flex: 0 0 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	color: var(--gray-dark);
	box-shadow: -1px 0 0 var(--sand-light), var(--shadow-subtle);
	cursor: pointer;
	appearance: none;
	transition: color var(--duration-normal) var(--ease-smooth), background-color var(--duration-normal) var(--ease-smooth), border-color var(--duration-normal) var(--ease-smooth), box-shadow var(--duration-normal) var(--ease-smooth);
}

.px-scroll-cue__button svg {
	width: 30px;
	height: 30px;
	display: block;
}

.px-scroll-cue__button:hover {
	border: 3px solid var(--action);
	color: var(--action);
	box-shadow: var(--shadow-hover);
}

.px-scroll-cue__button:focus-visible {
	border: 0;
	color: var(--action);
	outline: 5px solid var(--gray-dark);
	outline-offset: 3px;
	box-shadow: var(--shadow-hover);
}

.px-scroll-cue__button:active {
	border: 0;
	background: var(--sky-blue);
	color: var(--action);
	outline: 0;
	box-shadow: var(--shadow-pressed);
}


/* ── Responsief ──────────────────────────────── */

@media (max-width: 767px) {
	.px-scroll-cue-host--overflow .px-scroll-cue {
		padding-left: 1rem;
	}

	.px-scroll-cue__label {
		font-size: 0.78rem;
	}
}

/* === px-venster.css === */
/**
 * PX Venster - de gedeelde basis voor elk modaal venster op de site.
 *
 * Eén vorm en één route: elk venster is een echte <dialog>. De browser regelt
 * daarmee zelf de focusval, de Escape toets, de laag bovenop de pagina en het
 * dimmen van de achtergrond. assets/js/px-venster.js doet alleen openen,
 * sluiten, de klik naast de kaart en het vastzetten van de pagina eronder.
 *
 * Opmaak:
 *   <dialog class="px-venster px-venster--m" id="…">
 *     <button class="px-venster__sluit" data-venster-sluit>…</button>
 *     <div class="px-venster__kaart">…</div>
 *   </dialog>
 *
 * De maat is de enige modifier: --s, --m, --l en --media. De vorm is voor elk
 * venster gelijk: witte kaart, donkerblauwe achtergrond met een waas, en de
 * sluitknop wit erboven.
 */


/* ── Venster ─────────────────────────────────── */

.px-venster {
	width: min(var(--venster-breedte, 34rem), calc(100vw - var(--space-d2) * 2));
	max-width: none;
	max-height: calc(100vh - var(--space-d2) * 2);
	padding: 0;
	color: var(--text-base);
	background-color: var(--transparent);
	border: none;
	overflow: visible;
}

.px-venster--s { --venster-breedte: 28rem; }
.px-venster--m { --venster-breedte: 34rem; }
.px-venster--l { --venster-breedte: 45rem; }
.px-venster--media { --venster-breedte: 60rem; }

/* Alleen een geopend venster krijgt deze layout. Zonder [open] zou de regel de
   verborgen stand van de browser overrulen en stond een gesloten venster
   gewoon in de pagina. */
.px-venster[open] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-d075);
	animation: px-venster-in var(--duration-normal) var(--ease-smooth) both;
}

.px-venster::backdrop {
	background-color: rgba(16, 80, 112, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

@keyframes px-venster-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.px-venster[open] {
		animation: none;
	}
}


/* ── Kaart ───────────────────────────────────── */

.px-venster__kaart {
	position: relative;
	width: 100%;
	/* min-height 0 laat de kaart krimpen in de flexkolom, zodat de maximale
	   hoogte van het venster wint op een laag scherm. */
	min-height: 0;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
	padding: var(--space-d2);
	background-color: var(--white);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.px-venster__kaart::-webkit-scrollbar {
	width: 4px;
}

.px-venster__kaart::-webkit-scrollbar-track {
	background: transparent;
}

.px-venster__kaart::-webkit-scrollbar-thumb {
	background: var(--sand);
	border-radius: 4px;
}


/* ── Sluitknop, wit boven de kaart ───────────── */

.px-venster__sluit {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--white);
	background: none;
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-smooth);
}

.px-venster__sluit:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.px-venster__sluit:focus-visible {
	outline: solid 3px var(--white);
	outline-offset: 2px;
}

.px-venster__sluit svg {
	width: 24px;
	height: 24px;
}


/* ── Kop, tekst en inhoud ────────────────────── */

.px-venster__titel {
	margin: 0;
}

.px-venster__tekst {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-d1);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
}

.px-venster__inhoud > *:first-child {
	margin-top: 0;
}

.px-venster__inhoud > *:last-child {
	margin-bottom: 0;
}

.px-venster__inhoud p {
	margin: 0 0 var(--space-d05) 0;
}

.px-venster__inhoud p:last-child {
	margin-bottom: 0;
}

.px-venster__inhoud ul,
.px-venster__inhoud ol {
	margin: 0;
	padding-left: 1.5em;
}

.px-venster__inhoud li {
	margin-bottom: 0.25em;
}


/* ── Beeld en video lopen door tot de rand ───── */

.px-venster--media .px-venster__kaart {
	max-height: none;
	padding: 0;
	background-color: var(--black);
	overflow: hidden;
}

.px-venster__speler {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--black);
	overflow: hidden;
}

.px-venster__speler iframe {
	width: 100%;
	height: 100%;
	border: 0;
}


/* ── QR-code in een venster ──────────────────── */

/* De code komt kaal uit de shortcode van de crowdfunding plugin; de vorm is
   van het thema. Deze regels staan hier en niet bij px-actie, zodat een
   QR-venster overal op de site dezelfde vorm heeft. */

.px-venster .crowdfunding-qr {
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
	margin: 0;
	text-align: left;
}

.px-venster .crowdfunding-qr-preview {
	display: block;
	width: 15rem;
	max-width: 100%;
}

/* De rustzone van de code krijgt de kleur van de kaart, zodat er geen tweede
   wit vlak omheen valt. In de plugin staat die kleur nu nog vast op wit. */
.px-venster .crowdfunding-qr-preview canvas,
.px-venster .crowdfunding-qr-preview img {
	background-color: var(--white);
}

.px-venster .crowdfunding-qr-actions {
	display: flex;
	justify-content: flex-start;
	margin: 0;
}

/* De plugin geeft deze knop nu nog een eigen, kale stijl die over btn--sec heen
   valt. Hier staat de gewone witte knop van de site weer terug. */
.px-venster .crowdfunding-qr-button {
	width: auto;
	padding: var(--btn-pad);
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-none);
	color: var(--gray-dark);
	background-color: var(--white);
	border: solid 3px var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-subtle);
}

.px-venster .crowdfunding-qr-button:hover {
	background-color: var(--white);
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
}

.px-venster .crowdfunding-qr-button:active {
	background-color: var(--sky-blue);
	border-color: var(--transparent);
	box-shadow: var(--shadow-pressed);
}

.px-venster .crowdfunding-qr-button svg {
	width: var(--space-d1);
	height: var(--space-d1);
}

.px-venster .crowdfunding-qr-button svg path {
	fill: var(--gray-dark);
}


/* ── Responsief ──────────────────────────────── */

@media (max-width: 767px) {
	.px-venster {
		width: min(var(--venster-breedte, 34rem), calc(100vw - var(--space-d1) * 2));
	}

	.px-venster__kaart {
		padding: var(--space-d15);
	}
}

/* === px-footer-base.css === */
/**
 * PX Footer Base — Shared styles for all footer modules
 *
 * Logo section + bottom bar (cert, copyright, legal links).
 * Used by: px-footer, px-lp-footer, px-winkel-footer.
 */


/* ==========================================================================
   Back to Top
   ========================================================================== */

.px-footer-base__back-top {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: calc(-1 * var(--space-d15));
}


/* ==========================================================================
   Logo
   ========================================================================== */

.px-footer-base__logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d15);
}

.px-footer-base__logo svg {
	width: clamp(165px, 15vw, 263px);
	height: auto;
}


/* ==========================================================================
   Footer Bottom
   ========================================================================== */

.px-footer-base__bottom {
	max-width: var(--row-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d3);
}

/* Certification logos */
.px-footer-base__certs {
	display: flex;
	align-items: center;
	gap: var(--space-d15);
	flex-wrap: nowrap;
}

.px-footer-base__cert-link {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.px-footer-base__cert-link:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
}

.px-footer-base__cert {
	height: calc((var(--space-d2) + var(--space-d3)) / 2);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

/* Bottom bar: copyright + legal links in a horizontal row */
.px-footer-base__bottom-bar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-d1);
	width: 100%;
}

/* Copyright text */
.px-footer-base__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--text-d075);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
}

/* Legal links nav */
.px-footer-base__legal {
	display: flex;
	gap: var(--space-d1);
}

.px-footer-base__legal-link {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-d075);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	text-decoration: underline;
	padding: var(--space-d05) 0;
	transition: color var(--duration-normal) var(--ease-smooth);
}

.px-footer-base__legal-link:hover {
	color: var(--action);
	text-decoration: none;
}

.px-footer-base__legal-link:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Cookie settings button: a real button because it opens a dialog instead of
   navigating, styled to be indistinguishable from the links next to it. */
button.px-footer-base__legal-link {
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}


/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */

@media screen and (max-width: 767px) {
	.px-footer-base__bottom-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-d05);
	}

	.px-footer-base__legal {
		flex-wrap: wrap;
		gap: var(--space-d05);
	}
}

/* === px-forms.css === */
/**
 * PX Forms – Global Gravity Forms styles
 * Replaces GF's disabled default CSS with theme-consistent styling.
 */


/* ==========================================================================
   1. Wrapper & body reset
   ========================================================================== */



/* ==========================================================================
   2. Hidden elements
   ========================================================================== */

.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend,
.gform_wrapper .admin-hidden-markup,
.gform_wrapper .gfield_description:not(.gfield_validation_message),
.gform_validation_errors,
.gform_wrapper .gfield.hidden_label > .gfield_label,
.gform_wrapper .gfield.hidden_label > legend.gfield_label {
	display: none;
}

/* Required indicator (*) verbergen — verwijder !important om terug te zetten */
.gform_wrapper .gfield_required {
	display: none !important;
}

/* Honeypot, hidden fields & anti-spam: visually hidden but present in DOM */
.gfield--type-honeypot,
.gfield_visibility_hidden,
.gfield_visibility_administrative,
.gform_hidden,
.gform_validation_container,
.gfield_total,
.gform_wrapper .gfield.px-mandatory-hidden-field,
.gform_wrapper .gfield.px-hide-price-field {
	position: absolute !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	pointer-events: none;
}

/* Required indicator: replace "(Vereist)" text with SVG asterisk */
.gform_wrapper .gfield_required {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.gform_wrapper .gfield_required_text {
	font-size: 0;
	line-height: 0;
}

/* .gform_wrapper .gfield_required_text::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: var(--action);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='4.97 1 10.06 10' fill='none'%3E%3Cpath d='M14.9072 8.7085C14.8632 8.77612 14.8051 8.8351 14.7362 8.88205C14.6674 8.92901 14.5892 8.96302 14.506 8.98215C14.4229 9.00128 14.3365 9.00515 14.2517 8.99355C14.167 8.98194 14.0855 8.95508 14.0121 8.9145L10.6522 7.0595V10.4C10.6522 10.5591 10.5834 10.7117 10.4611 10.8243C10.3388 10.9368 10.1729 11 9.99995 11C9.82698 11 9.66109 10.9368 9.53878 10.8243C9.41647 10.7117 9.34776 10.5591 9.34776 10.4V7.0595L5.98784 8.9145C5.9144 8.95505 5.833 8.98189 5.74828 8.99349C5.66356 9.00509 5.57719 9.00123 5.49409 8.98213C5.41099 8.96302 5.3328 8.92904 5.26398 8.88214C5.19515 8.83523 5.13705 8.77632 5.09297 8.70875C5.00396 8.5723 4.97752 8.4089 5.01946 8.25451C5.06141 8.10012 5.1683 7.96739 5.31662 7.8855L8.73251 6L5.31662 4.1145C5.24318 4.07395 5.17914 4.0205 5.12815 3.95718C5.07716 3.89387 5.04023 3.82193 5.01946 3.74549C4.9987 3.66904 4.9945 3.58958 5.00711 3.51164C5.01972 3.4337 5.0489 3.35881 5.09297 3.29125C5.13705 3.22368 5.19515 3.16477 5.26398 3.11786C5.3328 3.07096 5.41099 3.03698 5.49409 3.01787C5.57719 2.99877 5.66356 2.99491 5.74828 3.00651C5.833 3.01811 5.9144 3.04495 5.98784 3.0855L9.34776 4.9405V1.6C9.34776 1.44087 9.41647 1.28826 9.53878 1.17574C9.66109 1.06321 9.82698 1 9.99995 1C10.1729 1 10.3388 1.06321 10.4611 1.17574C10.5834 1.28826 10.6522 1.44087 10.6522 1.6V4.9405L14.0121 3.0855C14.0855 3.04495 14.1669 3.01811 14.2516 3.00651C14.3363 2.99491 14.4227 2.99877 14.5058 3.01787C14.5889 3.03698 14.6671 3.07096 14.7359 3.11786C14.8048 3.16477 14.8629 3.22368 14.9069 3.29125C14.951 3.35881 14.9802 3.4337 14.9928 3.51164C15.0054 3.58958 15.0012 3.66904 14.9804 3.74549C14.9597 3.82193 14.9227 3.89387 14.8718 3.95718C14.8208 4.0205 14.7567 4.07395 14.6833 4.1145L11.2674 6L14.6833 7.8855C14.8316 7.96734 14.9385 8.10001 14.9805 8.25435C15.0225 8.40868 14.9961 8.57204 14.9072 8.7085Z' fill='black'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='4.97 1 10.06 10' fill='none'%3E%3Cpath d='M14.9072 8.7085C14.8632 8.77612 14.8051 8.8351 14.7362 8.88205C14.6674 8.92901 14.5892 8.96302 14.506 8.98215C14.4229 9.00128 14.3365 9.00515 14.2517 8.99355C14.167 8.98194 14.0855 8.95508 14.0121 8.9145L10.6522 7.0595V10.4C10.6522 10.5591 10.5834 10.7117 10.4611 10.8243C10.3388 10.9368 10.1729 11 9.99995 11C9.82698 11 9.66109 10.9368 9.53878 10.8243C9.41647 10.7117 9.34776 10.5591 9.34776 10.4V7.0595L5.98784 8.9145C5.9144 8.95505 5.833 8.98189 5.74828 8.99349C5.66356 9.00509 5.57719 9.00123 5.49409 8.98213C5.41099 8.96302 5.3328 8.92904 5.26398 8.88214C5.19515 8.83523 5.13705 8.77632 5.09297 8.70875C5.00396 8.5723 4.97752 8.4089 5.01946 8.25451C5.06141 8.10012 5.1683 7.96739 5.31662 7.8855L8.73251 6L5.31662 4.1145C5.24318 4.07395 5.17914 4.0205 5.12815 3.95718C5.07716 3.89387 5.04023 3.82193 5.01946 3.74549C4.9987 3.66904 4.9945 3.58958 5.00711 3.51164C5.01972 3.4337 5.0489 3.35881 5.09297 3.29125C5.13705 3.22368 5.19515 3.16477 5.26398 3.11786C5.3328 3.07096 5.41099 3.03698 5.49409 3.01787C5.57719 2.99877 5.66356 2.99491 5.74828 3.00651C5.833 3.01811 5.9144 3.04495 5.98784 3.0855L9.34776 4.9405V1.6C9.34776 1.44087 9.41647 1.28826 9.53878 1.17574C9.66109 1.06321 9.82698 1 9.99995 1C10.1729 1 10.3388 1.06321 10.4611 1.17574C10.5834 1.28826 10.6522 1.44087 10.6522 1.6V4.9405L14.0121 3.0855C14.0855 3.04495 14.1669 3.01811 14.2516 3.00651C14.3363 2.99491 14.4227 2.99877 14.5058 3.01787C14.5889 3.03698 14.6671 3.07096 14.7359 3.11786C14.8048 3.16477 14.8629 3.22368 14.9069 3.29125C14.951 3.35881 14.9802 3.4337 14.9928 3.51164C15.0054 3.58958 15.0012 3.66904 14.9804 3.74549C14.9597 3.82193 14.9227 3.89387 14.8718 3.95718C14.8208 4.0205 14.7567 4.07395 14.6833 4.1145L11.2674 6L14.6833 7.8855C14.8316 7.96734 14.9385 8.10001 14.9805 8.25435C15.0225 8.40868 14.9961 8.57204 14.9072 8.7085Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	vertical-align: middle;
}


/* ==========================================================================
   3. Field layout
   ========================================================================== */

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-d1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gfield {
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
	grid-column: 1 / -1;
}

.gform_wrapper fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

/* Legend doesn't participate in flex gap, so use margin instead */
.gform_wrapper fieldset > legend.gfield_label {
	margin-bottom: var(--space-d075);
}

/* Lege legend (bv. extra checkbox veld zonder label) neemt geen ruimte in */
.gform_wrapper fieldset > legend.gfield_label:empty {
	display: none;
}


/* ==========================================================================
   3b. Field widths (desktop only, 12-column grid)
   ========================================================================== */

@media (min-width: 768px) {
	/* 50% — 6 of 12 kolommen */
	.gform_wrapper .gfield.gf_left_half,
	.gform_wrapper .gfield.gf_right_half,
	.gform_wrapper .gfield.gfield--width-half,
	.gform_wrapper .gfield.px-field-50 {
		grid-column: span 6;
	}

	/* 33% — 4 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-third {
		grid-column: span 4;
	}

	/* 25% — 3 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-quarter {
		grid-column: span 3;
	}

	/* 75% — 9 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-three-quarter {
		grid-column: span 9;
	}

	/* 66% — 8 of 12 kolommen */
	.gform_wrapper .gfield.gfield--width-two-thirds {
		grid-column: span 8;
	}

	/* --- Adresvelden (px-address) --- */

	/* Postcode: 7 van 12 kolommen (~58%) */
	.gform_wrapper .gfield.px-address-postal-code {
		grid-column: span 7;
	}

	/* Huisnummer: 3 van 12 kolommen (25%) */
	.gform_wrapper .gfield.px-address-house-number {
		grid-column: span 3;
	}

	/* Toevoeging: 2 van 12 kolommen (~17%) */
	.gform_wrapper .gfield.px-address-house-number-suffix {
		grid-column: span 2;
	}

	/* Straat: 6 van 12 kolommen (50%) */
	.gform_wrapper .gfield.px-address-street {
		grid-column: span 6;
	}

	/* Plaats: 6 van 12 kolommen (50%) */
	.gform_wrapper .gfield.px-address-city {
		grid-column: span 6;
	}
}

/* Uppercase op postcode, stad en IBAN (alleen getypte tekst, niet placeholder) */
.gform_wrapper .px-address-postal-code input,
.gform_wrapper .px-address-city input,
.gform_wrapper .px-direct-debit-iban input {
	text-transform: uppercase;
}

.gform_wrapper .px-address-postal-code input::placeholder,
.gform_wrapper .px-address-city input::placeholder,
.gform_wrapper .px-direct-debit-iban input::placeholder {
	text-transform: none;
}


/* ==========================================================================
   4. Labels
   ========================================================================== */

.gform_wrapper .gfield_label {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
	margin: 0;
	color: var(--text-base);

	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
}


/* ==========================================================================
   5. Text inputs
   ========================================================================== */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
	display: flex;
	align-items: center;
	align-self: stretch;
	width: 100%;

	padding: var(--space-d075) var(--space-d1);
	border-radius: var(--space-d05);
	border: var(--space-d001) solid var(--navy);
	background-color: var(--white);

	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
	transition: border-color var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: calc(var(--space-d1) + 1.5rem);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23105070' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-d1) center;
	background-size: 1.1rem;
}

.gform_wrapper textarea {
	height: calc(2lh + 2 * var(--space-d075));
	max-height: 200px;
	resize: none;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--gray-mid);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
}


/* ==========================================================================
   6. Focus states
   ========================================================================== */

/* Hover */
.gform_wrapper input[type="text"]:hover,
.gform_wrapper input[type="email"]:hover,
.gform_wrapper input[type="number"]:hover,
.gform_wrapper input[type="tel"]:hover,
.gform_wrapper input[type="url"]:hover,
.gform_wrapper textarea:hover,
.gform_wrapper select:hover {
	border-color: var(--action);
}

/* Active / Focus */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--action);
	outline: none;
}

.gform_wrapper input[type="text"]:focus-visible,
.gform_wrapper input[type="email"]:focus-visible,
.gform_wrapper input[type="number"]:focus-visible,
.gform_wrapper input[type="tel"]:focus-visible,
.gform_wrapper input[type="url"]:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
}

/* Filled — keep active border when input has a value */
.gform_wrapper input[type="text"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="email"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="number"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="tel"][placeholder]:not(:placeholder-shown),
.gform_wrapper input[type="url"][placeholder]:not(:placeholder-shown),
.gform_wrapper textarea[placeholder]:not(:placeholder-shown) {
	border-color: var(--action);
}

/* Error — field with validation error */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error input[type="url"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--coral);
}

/* Error — name compound field: only required sub-inputs get coral border */
.gform_wrapper .gfield_error.gfield--type-name input[type="text"]:not([aria-required="true"]) {
	border-color: var(--input-border);
}

/* Disabled */
.gform_wrapper input:disabled,
.gform_wrapper textarea:disabled,
.gform_wrapper select:disabled {
	border-color: var(--gray-mid);
	cursor: not-allowed;
}


/* ==========================================================================
   7. Radio buttons
   ========================================================================== */

/* -- List layout -- */

.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gf_list_inline .gfield_radio {
	flex-direction: row;
	flex-wrap: wrap;
}

/* -- Single item wrapper -- */

.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
}

/* -- Label -- */

.gform_wrapper .gfield_radio label {
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);
	cursor: pointer;
}

.gform_wrapper .gfield_radio label a,
.gform_wrapper .gfield_checkbox label a {
	color: var(--action);
	text-decoration: underline;
}

/* -- Circle -- */

.gform_wrapper input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--gray-dark);
	background-color: var(--white);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover — 3px action border + inner ring */
.gform_wrapper input[type="radio"]:hover {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
}

/* Focus — reset default outline */
.gform_wrapper input[type="radio"]:focus {
	outline: none;
}

/* Focus-visible — 3px gray ring + 3px action border + inner ring */
.gform_wrapper input[type="radio"]:focus-visible {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Checked — solid action dot, no inner ring */
.gform_wrapper input[type="radio"]:checked {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action);
}

/* Checked + focus-visible — focus ring around checked dot */
.gform_wrapper input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action),
	            0 0 0 3px var(--gray-dark);
}

/* Error — 3px coral border + inner ring */
.gform_wrapper .gfield_error input[type="radio"] {
	border-color: var(--coral);
	box-shadow: inset 0 0 0 1px var(--coral),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-dark);
}

/* Error + Checked — show action dot even in error state */
.gform_wrapper .gfield_error input[type="radio"]:checked {
	border-color: var(--gray-dark);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action);
}

/* Error + Checked + focus-visible */
.gform_wrapper .gfield_error input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 12.5px var(--action),
	            0 0 0 3px var(--gray-dark);
}

/* Disabled — gray-mid border + gray-mid inner ring */
.gform_wrapper input[type="radio"]:disabled {
	border-color: var(--gray-mid);
	box-shadow: inset 0 0 0 0 var(--gray-mid),
	            inset 0 0 0 3.5px var(--white),
	            inset 0 0 0 4.5px var(--gray-mid);
	cursor: not-allowed;
}


/* ==========================================================================
   8. Checkboxes
   ========================================================================== */

/* -- List layout -- */

.gform_wrapper .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -- Single item wrapper -- */

.gform_wrapper .gfield_checkbox .gchoice {
	display: flex;
	gap: var(--space-d025);
}

/* -- Label -- */

.gform_wrapper .gfield_checkbox label {
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--text-base);
	cursor: pointer;
	margin-top: 3px;
}

/* -- Tick box -- */

.gform_wrapper input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	border-radius: 3px;
	border: 2px solid var(--gray-dark);
	background: var(--white) no-repeat center;
	background-size: 100% 100%;
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover — 3px action border + inner frame */
.gform_wrapper input[type="checkbox"]:hover {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

/* Focus — reset default outline */
.gform_wrapper input[type="checkbox"]:focus {
	outline: none;
}

/* Focus-visible — 3px gray ring + 3px action border + inner frame */
.gform_wrapper input[type="checkbox"]:focus-visible {
	border-color: var(--action);
	box-shadow: inset 0 0 0 1px var(--action),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Checked — 2px gray border, blue fill with checkmark */
.gform_wrapper input[type="checkbox"]:checked {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.5 4.5 21 21'%3E%3Cpath d='M21.25 7.5H8.75C8.41848 7.5 8.10054 7.6317 7.86612 7.86612C7.6317 8.10054 7.5 8.41848 7.5 8.75V21.25C7.5 21.5815 7.6317 21.8995 7.86612 22.1339C8.10054 22.3683 8.41848 22.5 8.75 22.5H21.25C21.5815 22.5 21.8995 22.3683 22.1339 22.1339C22.3683 21.8995 22.5 21.5815 22.5 21.25V8.75C22.5 8.41848 22.3683 8.10054 22.1339 7.86612C21.8995 7.6317 21.5815 7.5 21.25 7.5ZM18.5672 13.5672L14.1922 17.9422C14.1341 18.0003 14.0652 18.0464 13.9893 18.0779C13.9135 18.1093 13.8321 18.1255 13.75 18.1255C13.6679 18.1255 13.5865 18.1093 13.5107 18.0779C13.4348 18.0464 13.3659 18.0003 13.3078 17.9422L11.4328 16.0672C11.3155 15.9499 11.2497 15.7909 11.2497 15.625C11.2497 15.4591 11.3155 15.3001 11.4328 15.1828C11.5501 15.0655 11.7091 14.9997 11.875 14.9997C12.0409 14.9997 12.1999 15.0655 12.3172 15.1828L13.75 16.6164L17.6828 12.6828C17.7409 12.6247 17.8098 12.5787 17.8857 12.5473C17.9616 12.5158 18.0429 12.4997 18.125 12.4997C18.2071 12.4997 18.2884 12.5158 18.3643 12.5473C18.4402 12.5787 18.5091 12.6247 18.5672 12.6828C18.6253 12.7409 18.6713 12.8098 18.7027 12.8857C18.7342 12.9616 18.7503 13.0429 18.7503 13.125C18.7503 13.2071 18.7342 13.2884 18.7027 13.3643C18.6713 13.4402 18.6253 13.5091 18.5672 13.5672Z' fill='%230093F5'/%3E%3C/svg%3E");
}

/* Checked + focus-visible — focus ring around checked box */
.gform_wrapper input[type="checkbox"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Error — 3px coral border + inner frame */
.gform_wrapper .gfield_error input[type="checkbox"] {
	border-color: var(--coral);
	box-shadow: inset 0 0 0 1px var(--coral),
	            inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
}

/* Error + Checked — show checkmark even in error state */
.gform_wrapper .gfield_error input[type="checkbox"]:checked {
	border-color: var(--gray-dark);
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.5 4.5 21 21'%3E%3Cpath d='M21.25 7.5H8.75C8.41848 7.5 8.10054 7.6317 7.86612 7.86612C7.6317 8.10054 7.5 8.41848 7.5 8.75V21.25C7.5 21.5815 7.6317 21.8995 7.86612 22.1339C8.10054 22.3683 8.41848 22.5 8.75 22.5H21.25C21.5815 22.5 21.8995 22.3683 22.1339 22.1339C22.3683 21.8995 22.5 21.5815 22.5 21.25V8.75C22.5 8.41848 22.3683 8.10054 22.1339 7.86612C21.8995 7.6317 21.5815 7.5 21.25 7.5ZM18.5672 13.5672L14.1922 17.9422C14.1341 18.0003 14.0652 18.0464 13.9893 18.0779C13.9135 18.1093 13.8321 18.1255 13.75 18.1255C13.6679 18.1255 13.5865 18.1093 13.5107 18.0779C13.4348 18.0464 13.3659 18.0003 13.3078 17.9422L11.4328 16.0672C11.3155 15.9499 11.2497 15.7909 11.2497 15.625C11.2497 15.4591 11.3155 15.3001 11.4328 15.1828C11.5501 15.0655 11.7091 14.9997 11.875 14.9997C12.0409 14.9997 12.1999 15.0655 12.3172 15.1828L13.75 16.6164L17.6828 12.6828C17.7409 12.6247 17.8098 12.5787 17.8857 12.5473C17.9616 12.5158 18.0429 12.4997 18.125 12.4997C18.2071 12.4997 18.2884 12.5158 18.3643 12.5473C18.4402 12.5787 18.5091 12.6247 18.5672 12.6828C18.6253 12.7409 18.6713 12.8098 18.7027 12.8857C18.7342 12.9616 18.7503 13.0429 18.7503 13.125C18.7503 13.2071 18.7342 13.2884 18.7027 13.3643C18.6713 13.4402 18.6253 13.5091 18.5672 13.5672Z' fill='%230093F5'/%3E%3C/svg%3E");
}

/* Error + Checked + focus-visible */
.gform_wrapper .gfield_error input[type="checkbox"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0 var(--gray-dark),
	            inset 0 0 0 0 var(--white),
	            inset 0 0 0 0 var(--gray-dark),
	            0 0 0 3px var(--gray-dark);
}

/* Disabled — gray-mid border, dark inner frame */
.gform_wrapper input[type="checkbox"]:disabled {
	border-color: var(--gray-mid);
	box-shadow: inset 0 0 0 3px var(--white),
	            inset 0 0 0 4px var(--gray-dark);
	cursor: not-allowed;
}


/* ==========================================================================
   9. Complex fields (name, address, email-confirm)
   ========================================================================== */

/* -- Name field -- */
.gform_wrapper .gfield--type-name > legend.gfield_label {
	margin-bottom: var(--space-d05);
}

.gform_wrapper .gfield--type-name .ginput_complex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-d1);
}

.gform_wrapper .gfield--type-name .name_first {
	flex: 2 1 0;
	min-width: 0;
}

.gform_wrapper .gfield--type-name .name_middle {
	flex: 1 1 0;
	min-width: 0;
}

.gform_wrapper .gfield--type-name .name_last {
	flex: 0 0 100%;
}

/* Hide sub-labels (First, Middle, Last) — except hidden_label name fields */
.gform_wrapper .gfield--type-name:not(.hidden_label) .gform-field-label--type-sub {
	display: none;
}

/* -- Name field floating sub-labels (hidden_label) -- */
.gform_wrapper .gfield.hidden_label.gfield--type-name .ginput_container_name > span {
	position: relative;
}

.gform_wrapper .gfield.hidden_label.gfield--type-name input {
	font-size: var(--text-d1);
	line-height: var(--lh-normal);
	padding: calc(var(--space-d05) + 0.325rem) var(--space-d1);
	transition: padding var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper .gfield.hidden_label.gfield--type-name input:focus::placeholder {
	color: transparent;
}

.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:focus) input,
.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:not(:placeholder-shown)) input {
	padding-top: calc(var(--space-d05) + 0.75rem);
	padding-bottom: calc(var(--space-d05) - 0.1rem);
}

.gform_wrapper .gfield.hidden_label.gfield--type-name .gform-field-label--type-sub {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 50%;
	left: var(--space-d1);
	transform: translateY(-50%);
	opacity: 0;

	font-family: var(--font-body);
	font-size: var(--text-d1);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-none);
	color: var(--gray-mid);

	padding: 0;
	margin: 0;
	background: transparent;

	transition: top var(--duration-normal) var(--ease-smooth),
	            transform var(--duration-normal) var(--ease-smooth),
	            font-size var(--duration-normal) var(--ease-smooth),
	            font-weight var(--duration-normal) var(--ease-smooth),
	            line-height var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth),
	            letter-spacing var(--duration-normal) var(--ease-smooth),
	            opacity var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:focus) .gform-field-label--type-sub,
.gform_wrapper .gfield.hidden_label.gfield--type-name span:has(input:not(:placeholder-shown)) .gform-field-label--type-sub {
	top: var(--space-d05);
	transform: translateY(0);
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--action);
	opacity: 1;
}


/* -- Email confirm (two inputs side by side) -- */
.gform_wrapper .gfield--type-email .gform-grid-row {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-d05);
	width: 100%;
}

.gform_wrapper .gfield--type-email .gform-grid-row span {
	width: 50%;
}

.gform_wrapper .gfield--type-email .gform-grid-row .gf_clear,
.gform_wrapper .gfield--type-email .gform-grid-row .gform-field-label--type-sub {
	display: none;
}


/* ==========================================================================
   10. Description / help text
   ========================================================================== */



/* ==========================================================================
   10b. HTML fields — links
   ========================================================================== */

.gform_wrapper .gfield_html a {
	color: var(--action);
	text-decoration: underline;
}

.gform_wrapper .gfield_html a:hover {
	color: var(--navy);
}


/* ==========================================================================
   11. Submit button
   ========================================================================== */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin-top: var(--space-d2);
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-d05);

	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-none);
	color: var(--white);

	padding: var(--btn-cta-pad);
	background-color: var(--navy);
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-subtle);

	cursor: pointer;
	transition: var(--transition-btn);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	color: var(--gray-dark);
	background-color: var(--white);
	border-color: var(--navy);
	box-shadow: var(--shadow-hover);
}

.gform_wrapper .gform_button:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	background-color: var(--white);
	border-color: var(--navy);
	box-shadow: none;
}

.gform_wrapper .gform_button:active,
.gform_wrapper input[type="submit"]:active {
	color: var(--gray-dark);
	background-color: var(--yellow);
	border-color: var(--transparent);
	box-shadow: var(--shadow-pressed);
}


/* -- Next button (primary, action blue + dark arrow right) -- */
.gform_wrapper .gform_next_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-d05);

	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-none);
	color: var(--white);

	margin-left: auto;
	padding: var(--btn-pad);
	background-color: var(--action);
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-subtle);

	cursor: pointer;
	transition: var(--transition-btn);
}

.gform_wrapper .gform_next_button .px-next-arrow {
	width: var(--space-d1);
	height: var(--space-d1);
	color: var(--gray-dark);
	flex-shrink: 0;
	transition: color var(--duration-fast) var(--ease-smooth);
}

.gform_wrapper .gform_next_button:hover {
	color: var(--gray-dark);
	background-color: var(--white);
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
}

.gform_wrapper .gform_next_button:hover .px-next-arrow {
	color: var(--gray-dark);
}

.gform_wrapper .gform_next_button:focus-visible {
	color: var(--gray-dark);
	background-color: var(--white);
	outline: solid 5px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
	box-shadow: none;
}

.gform_wrapper .gform_next_button:focus-visible .px-next-arrow {
	color: var(--gray-dark);
}

.gform_wrapper .gform_next_button:active {
	color: var(--white);
	background-color: var(--navy);
	border-color: var(--transparent);
	box-shadow: var(--shadow-pressed);
}

.gform_wrapper .gform_next_button:active .px-next-arrow {
	color: var(--white);
}


/* ==========================================================================
   12. Multi-page forms
   ========================================================================== */

/* -- Step indicators -- */

.px-form--hide-steps .form_steps {
	display: none;
}

.form_steps {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
	margin-bottom: var(--space-d2);
}

.form_steps__title {
	margin: 0 auto 0 0;
	padding-right: var(--space-d2);
}

.form_steps__step {
	display: flex;
	align-items: center;
}

.form_steps__connector {
	display: block;
	width: var(--space-d1);
	height: 5px;
	background-color: var(--sand);
	flex-shrink: 0;
}

.form_steps__step--active .form_steps__connector,
.form_steps__step--completed .form_steps__connector {
	background-color: var(--action);
}

.form_steps__number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--space-d2);
	height: var(--space-d2);

	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	text-align: center;

	border-radius: var(--space-d2);
	border: 1px solid var(--sand);
	color: var(--text-base);
	background-color: var(--sand-light);

	transition: background-color var(--duration-normal) var(--ease-smooth),
	            border-color var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth);
}

/* Active step */
.form_steps__step--active .form_steps__number {
	background-color: var(--action);
	border-color: var(--action);
	color: var(--white);
}

/* Completed step */
.form_steps__step--completed .form_steps__number {
	background-color: var(--action);
	border-color: var(--action);
	color: var(--white);
}

/* Pending step — uses defaults (sand-light bg, sand border) */

/* -- Page footer (next / prev buttons) -- */

.gform_wrapper .gform_page_footer {
	display: flex;
	align-items: center;
	gap: var(--space-d1);
}

/* -- Previous button (text-only with arrow) -- */
.gform_wrapper .gform_previous_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-d05);

	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-none);
	color: var(--gray-dark);

	padding: var(--btn-pad);
	background-color: var(--transparent);
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	box-shadow: none;

	cursor: pointer;
	transition: var(--transition-btn);
}

.gform_wrapper .gform_previous_button .px-prev-arrow {
	width: var(--space-d1);
	height: var(--space-d1);
	color: var(--gray-dark);
	flex-shrink: 0;
	transform: scaleX(-1);
	transition: color var(--duration-fast) var(--ease-smooth);
}

.gform_wrapper .gform_previous_button:hover {
	color: var(--gray-dark);
	background-color: var(--transparent);
	border-color: var(--transparent);
}

.gform_wrapper .gform_previous_button:focus-visible {
	color: var(--gray-dark);
	background-color: var(--transparent);
	outline: solid 5px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
	box-shadow: none;
}

.gform_wrapper .gform_previous_button:active {
	color: var(--gray-dark);
	background-color: var(--sky-blue);
	border-color: var(--transparent);
}

/* -- Last step: column layout, submit first -- */

.gform_wrapper .gform_page_footer:has(input[type="submit"]) {
	flex-direction: column;
	align-items: flex-start;
}

.gform_wrapper .gform_page_footer:has(input[type="submit"]) input[type="submit"] {
	order: -1;
	margin-right: auto;
}



/* ==========================================================================
   13. Validation & error states
   ========================================================================== */

.gform_wrapper .gfield_validation_message {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-d025);

	color: var(--text-base);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: 400;
	line-height: var(--lh-snug);
}

.gform_wrapper .gfield_validation_message::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: var(--coral);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 17.006l-6.832-11.865a2.25 2.25 0 0 0-3.336 0L1.5 17.006a2.25 2.25 0 0 0 1.668 2.806h13.664a2.25 2.25 0 0 0 1.668-2.806zM9.376 10.437a.625.625 0 0 1 1.25 0v3.125a.625.625 0 0 1-1.25 0v-3.125zm.625 6.875a.937.937 0 1 1 0-1.875.937.937 0 0 1 0 1.875z'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.5 17.006l-6.832-11.865a2.25 2.25 0 0 0-3.336 0L1.5 17.006a2.25 2.25 0 0 0 1.668 2.806h13.664a2.25 2.25 0 0 0 1.668-2.806zM9.376 10.437a.625.625 0 0 1 1.25 0v3.125a.625.625 0 0 1-1.25 0v-3.125zm.625 6.875a.937.937 0 1 1 0-1.875.937.937 0 0 1 0 1.875z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}


/* ==========================================================================
   14. Confirmation
   ========================================================================== */



/* ==========================================================================
   14b. Ajax spinner (pure CSS)
   ========================================================================== */

.gform_ajax_spinner {
	position: fixed;
	bottom: var(--space-d1);
	left: 50%;
	margin-left: -36px;
	z-index: 999999;

	width: 72px;
	height: 72px;
	padding: 14px;
	background: var(--white);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-elevated);
	border: none;
}


/* ==========================================================================
   15. Donation form — choose amount radio pills
   ========================================================================== */

.px-donation-form-choose-amount .gfield_radio {
	flex-direction: row;
	flex-wrap: wrap;
}

/* Hide native radio, style label as pill button */
.px-donation-form-choose-amount .gfield_radio .gchoice {
	gap: 0;
}

.px-donation-form-choose-amount .gfield_radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.px-donation-form-choose-amount .gfield_radio label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3em;
	min-height: 3em;
	gap: var(--space-d05);
	padding: var(--space-d075) var(--space-d1);
	border-radius: var(--space-d075);
	background: var(--white);
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
	border: 3px solid var(--transparent);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-smooth),
	            border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Hover */
.px-donation-form-choose-amount .gfield_radio label:hover {
	border-color: var(--sky-blue);
	background: var(--sky-blue);
	box-shadow: 1px 2px 3px 0 rgba(51, 51, 51, 0.20);
}

/* Selected (checked) */
.px-donation-form-choose-amount .gfield_radio input[type="radio"]:checked + label {
	border-color: var(--sky-blue);
	background: var(--sky-blue);
	box-shadow: 1px 2px 3px 0 rgba(51, 51, 51, 0.20);
}

/* Focus-visible on label via hidden radio */
.px-donation-form-choose-amount .gfield_radio input[type="radio"]:focus-visible + label {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
}


/* ==========================================================================
   15b. Donation purpose — chip badge, visible when pre-filled via URL
   ========================================================================== */

/* Hidden until JS removes .hide when the input has a value */
.gform_wrapper .gfield.px-donation-purpose.hide,
.gform_wrapper .gfield.px-donation-purpose[data-field-class~="hide"] {
	display: none;
}

/* Chip wrapper */
.gform_wrapper .gfield.px-donation-purpose {
	flex-direction: row;
	align-items: center;
	gap: var(--space-d05);
	width: 100%;
	justify-self: start;
	overflow: hidden;

	background: var(--white);
	padding: var(--space-d05) var(--space-d1) var(--space-d05) var(--space-d05);
	border-radius: 100px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Location pin icon — blue circle with white pin */
.gform_wrapper .gfield.px-donation-purpose::before {
	content: '';
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--action);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Label */
.gform_wrapper .gfield.px-donation-purpose .gfield_label {
	font-weight: var(--weight-medium);
	color: var(--gray-dark);
	margin: 0;
}

/* Input container */
.gform_wrapper .gfield.px-donation-purpose .ginput_container {
	display: inline-block;
	vertical-align: middle;
}

/* Value (read-only input styled as text) */
.gform_wrapper .gfield.px-donation-purpose input {
	padding: 0 !important;
	border: none;
	background: transparent;
	font-weight: var(--weight-semibold);
	color: var(--gray-dark);
	pointer-events: none;
	width: auto;
}


/* ==========================================================================
   16. Tooltip (info "i" button inside inputs)
   ========================================================================== */

/* Container: the ginput_container becomes the positioning anchor */
.ginput_container.px-tooltip-active {
	position: relative;
}

/* Push input text away from the button */
.ginput_container.px-tooltip-active > input {
	padding-right: calc(var(--space-d1) + var(--space-d15));
}

/* "i" button — inside the input, right side, vertically centered */
.px-tooltip__btn {
	position: absolute;
	right: var(--space-d075);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-d15);
	height: var(--space-d15);
	padding: 0;
	border: var(--space-d001) solid var(--sky-blue);
	border-radius: var(--radius-full);
	background: var(--blue-light);
	cursor: pointer;

	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	font-style: italic;
	line-height: 1;
	color: var(--action);

	transition: background-color var(--duration-fast) var(--ease-smooth),
	            border-color var(--duration-fast) var(--ease-smooth),
	            color var(--duration-fast) var(--ease-smooth);
}

.px-tooltip__btn[hidden] {
	display: none;
}

.px-tooltip__btn:hover {
	background: var(--blue-light);
	border-color: var(--action);
	color: var(--navy);
}

.px-tooltip__btn:focus-visible {
	outline: 3px solid var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Popup — positioned above the button */
.px-tooltip__popup {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--space-d05));
	z-index: 10;

	min-width: 200px;
	max-width: 320px;
	padding: var(--space-d05) var(--space-d075);
	border-radius: var(--radius-xs);
	background: var(--action);
	border: none;
	box-shadow: var(--shadow-elevated);

	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	color: var(--white);

	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s var(--duration-fast);
	pointer-events: none;
}

/* Arrow pointing down toward the button */
.px-tooltip__popup::before {
	content: '';
	position: absolute;
	bottom: -5px;
	right: var(--space-d075);
	width: 10px;
	height: 10px;
	background: var(--action);
	transform: rotate(45deg);
}

/* Visible state */
.px-tooltip__popup--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s 0s;
}

/* Suggestion highlight */
.px-tooltip__popup strong {
	font-weight: var(--weight-semibold);
	color: var(--white);
}


/* ==========================================================================
   18. Floating label (hidden_label velden)
   Inline float: label fungeert als placeholder, krimpt en schuift naar
   bovenin het invoerveld bij focus/typen. Alleen text-input + textarea.
   Gebruikt :has() — Chrome 105+, Safari 15.4+, Firefox 121+
   ========================================================================== */

/* Scope: alleen deze input-types */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) {
	position: relative;
	align-self: start;
}

/* Input: gelijke hoogte in rust en actief, padding herverdeeld bij focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
) input,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea textarea {
	font-size: var(--text-d1);
	line-height: var(--lh-normal);
	padding: calc(var(--space-d05) + 0.325rem) var(--space-d1);
	transition: padding var(--duration-normal) var(--ease-smooth);
}

/* Placeholder verbergen bij focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
) input:focus::placeholder,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea textarea:focus::placeholder {
	color: transparent;
}

/* Extra padding-top bij focus/invullen (ruimte voor floating label) */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) input,
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) input,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) textarea,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) textarea {
	padding-top: calc(var(--space-d05) + 0.75rem);
	padding-bottom: calc(var(--space-d05) - 0.1rem);
}

/* Label: verborgen op placeholder-positie in rust, animeert naar boven bij focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) > .gfield_label {
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 50%;
	left: var(--space-d1);
	transform: translateY(-50%);
	opacity: 0;

	font-family: var(--font-body);
	font-size: var(--text-d1);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-none);
	color: var(--gray-mid);

	padding: 0;
	margin: 0;
	background: transparent;

	transition: top var(--duration-normal) var(--ease-smooth),
	            transform var(--duration-normal) var(--ease-smooth),
	            font-size var(--duration-normal) var(--ease-smooth),
	            font-weight var(--duration-normal) var(--ease-smooth),
	            line-height var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth),
	            letter-spacing var(--duration-normal) var(--ease-smooth),
	            opacity var(--duration-normal) var(--ease-smooth);
}

/* Textarea: label bovenaan (niet gecentreerd) */
.gform_wrapper .gfield.hidden_label.gfield--type-textarea > .gfield_label {
	top: calc(var(--space-d05) + 0.75rem);
	transform: translateY(0);
	align-items: flex-start;
}

/* Required asterisk: placeholder-grootte in rust */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) > .gfield_label .gfield_required {
	width: 14px;
	height: 14px;
	align-self: center;
	transition: width var(--duration-normal) var(--ease-smooth),
	            height var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price,
	.gfield--type-textarea
) > .gfield_label .gfield_required_text::before {
	width: 8px;
	height: 8px;
	background-color: var(--gray-mid);
	transition: background-color var(--duration-normal) var(--ease-smooth),
	            width var(--duration-normal) var(--ease-smooth),
	            height var(--duration-normal) var(--ease-smooth);
}

/* --- Actief: focus of eerste letter getypt --- */

/* Text inputs — focus */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label,
/* Text inputs — gevuld */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label,
/* Textarea — focus */
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) > .gfield_label,
/* Textarea — gevuld */
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label {
	top: var(--space-d05);
	transform: translateY(0);
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--action);
	opacity: 1;
}

/* Asterisk: kleiner en action kleur bij actief */
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label .gfield_required,
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label .gfield_required,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) > .gfield_label .gfield_required,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label .gfield_required {
	width: 12px;
	height: 12px;
}

.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before {
	width: 7px;
	height: 7px;
	background-color: var(--action);
}

/* --- Error state --- */

.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label,
.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:focus) > .gfield_label,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label {
	color: var(--coral);
}

.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield_error:is(
	.gfield--type-text,
	.gfield--type-email,
	.gfield--type-phone,
	.gfield--type-number,
	.gfield--type-postcode,
	.gfield--type-url,
	.gfield--input-type-price
):has(input:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:focus) > .gfield_label .gfield_required_text::before,
.gform_wrapper .gfield.hidden_label.gfield_error.gfield--type-textarea:has(textarea:not(:placeholder-shown)) > .gfield_label .gfield_required_text::before {
	background-color: var(--coral);
}


/* ==========================================================================
   19. Error tooltip (waarschuwingsdriehoek met coral popup)
   Vervangt de standaard tekst-validatie onder het veld met een driehoek-icoon
   + hover/focus coral popup. JS (px-error-tooltip.js) injecteert de markup.
   ========================================================================== */

/* Verberg originele validatietekst wanneer error tooltip actief is */
.gform_wrapper .gfield_error.px-error-tooltip-active > .gfield_validation_message {
	display: none;
}

/* Verberg info tooltip wanneer error tooltip in hetzelfde veld zit */
.ginput_container.px-error-tooltip-active .px-tooltip__btn {
	display: none;
}

/* --- Button base --- */

.px-error-tooltip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
}

.px-error-tooltip__btn:focus-visible {
	outline: 3px solid var(--btn-focus-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Driehoek icon --- */

.px-error-tooltip__icon {
	width: var(--space-d15);
	height: var(--space-d15);
	flex-shrink: 0;
	transform: translateY(-0.25em);
	transition: filter var(--duration-fast) var(--ease-smooth);
}

.px-error-tooltip__btn:hover .px-error-tooltip__icon {
	filter: brightness(0.75);
}

/* --- Coral popup --- */

.px-error-tooltip__popup {
	position: absolute;
	z-index: 10;
	min-width: 200px;
	max-width: 320px;
	padding: var(--space-d05) var(--space-d075);
	border-radius: var(--radius-xs);
	background: var(--coral);
	box-shadow: var(--shadow-elevated);

	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	color: var(--white);

	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s var(--duration-fast);
	pointer-events: none;
}

.px-error-tooltip__popup::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--coral);
	transform: rotate(45deg);
}

/* Visible state */
.px-error-tooltip__popup--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s 0s;
}

/* --- Positie: in text input (rechts in het veld) --- */

.ginput_container.px-error-tooltip-active {
	position: relative;
}

.ginput_container.px-error-tooltip-active > input {
	padding-right: calc(var(--space-d1) + var(--space-d15));
}

.ginput_container > .px-error-tooltip__btn {
	position: absolute;
	right: var(--space-d075);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.ginput_container > .px-error-tooltip__btn .px-error-tooltip__popup {
	right: 0;
	bottom: calc(100% + var(--space-d05));
}

.ginput_container > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	right: var(--space-d075);
}

/* --- Positie: in name sub-field (compound name veld) --- */

.gfield--type-name .ginput_complex > span.px-error-tooltip-active {
	position: relative;
}

.gfield--type-name .ginput_complex > span.px-error-tooltip-active > input {
	padding-right: calc(var(--space-d1) + var(--space-d15));
}

.gfield--type-name .ginput_complex > span > .px-error-tooltip__btn {
	position: absolute;
	right: var(--space-d075);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.gfield--type-name .ginput_complex > span > .px-error-tooltip__btn .px-error-tooltip__popup {
	right: 0;
	bottom: calc(100% + var(--space-d05));
}

.gfield--type-name .ginput_complex > span > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	right: var(--space-d075);
}

/* --- Positie: naast label/legend (radio/checkbox met zichtbaar label) --- */

.gfield_label > .px-error-tooltip__btn,
legend.gfield_label > .px-error-tooltip__btn {
	align-self: center;
}

.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup,
legend.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup {
	left: 50%;
	right: auto;
	bottom: calc(100% + var(--space-d05));
	transform: translateX(-50%);
	white-space: nowrap;
}

.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup::before,
legend.gfield_label > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	left: 50%;
	right: auto;
	margin-left: -5px;
}

/* --- Positie: inline met opties (hidden_label radio/checkbox) --- */

.gfield_radio > .px-error-tooltip__btn,
.gfield_checkbox > .px-error-tooltip__btn {
	align-self: center;
}

.gfield_radio > .px-error-tooltip__btn .px-error-tooltip__popup,
.gfield_checkbox > .px-error-tooltip__btn .px-error-tooltip__popup {
	right: 0;
	bottom: calc(100% + var(--space-d05));
	white-space: nowrap;
}

.gfield_radio > .px-error-tooltip__btn .px-error-tooltip__popup::before,
.gfield_checkbox > .px-error-tooltip__btn .px-error-tooltip__popup::before {
	bottom: -5px;
	right: var(--space-d05);
}


/* ==========================================================================
   17. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.form_steps {
		flex-wrap: wrap;
		row-gap: var(--space-d15);
	}

	.form_steps__title {
		order: 1;
		width: 100%;
		margin: 0;
	}

	/* Adresvelden: huisnr + toev 50/50 op mobile */
	.gform_wrapper .gfield.px-address-house-number,
	.gform_wrapper .gfield.px-address-house-number-suffix {
		grid-column: span 6;
	}

}

/* === px-icon-picker.css === */
/**
 * PX Icon Picker — Beaver Builder custom field styling.
 * Phosphor Icons picker met zoek, categorieën en icon grid.
 */

/* ── Container ── */
.px-icon-picker {
	position: relative;
}

/* ── Trigger button ── */
.px-icon-picker__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
	color: #333;
	height: 40px;
	width: 100%;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}

.px-icon-picker__trigger:hover {
	border-color: #999;
}

.px-icon-picker__trigger:focus-visible {
	border-color: var(--action, #0093f5);
	box-shadow: 0 0 0 1px var(--action, #0093f5);
	outline: none;
}

/* ── Icon preview in trigger ── */
.px-icon-picker__preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.px-icon-picker__preview:empty {
	display: none;
}

.px-icon-picker__preview svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* ── Label in trigger ── */
.px-icon-picker__label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #999;
}

.px-icon-picker__input[value]:not([value=""]) ~ .px-icon-picker__trigger .px-icon-picker__label {
	color: #333;
}

.px-icon-picker__arrow {
	flex-shrink: 0;
	color: #999;
	transition: transform 0.2s;
}

/* ── Remove button ── */
.px-icon-picker__remove {
	display: inline-block;
	margin-top: 4px;
	padding: 0;
	background: none;
	border: none;
	color: #a00;
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
}

.px-icon-picker__remove:hover {
	color: #d00;
}

/* ── Loading state ── */
.px-icon-picker--loading .px-icon-picker__trigger::after {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid #ddd;
	border-top-color: #666;
	border-radius: 50%;
	animation: px-icon-spin 0.6s linear infinite;
	flex-shrink: 0;
}

@keyframes px-icon-spin {
	to { transform: rotate(360deg); }
}

/* ── Popup ── */
.px-icon-picker__popup {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 100;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	min-width: 320px;
	max-width: 520px;
	width: 100%;
	animation: px-icon-popup-in 0.15s ease-out;
}

@keyframes px-icon-popup-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Search ── */
.px-icon-picker__search-wrap {
	padding: 12px 12px 0;
}

.px-icon-picker__search {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 13px;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.px-icon-picker__search:focus {
	border-color: var(--action, #0093f5);
	box-shadow: 0 0 0 1px var(--action, #0093f5);
}

/* ── Category pills ── */
.px-icon-picker__categories {
	display: flex;
	gap: 6px;
	padding: 10px 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.px-icon-picker__categories::-webkit-scrollbar {
	display: none;
}

.px-icon-picker__cat-pill {
	flex-shrink: 0;
	padding: 4px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	background: #f8f8f8;
	color: #555;
	font-size: 11px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s;
	line-height: 1.4;
}

.px-icon-picker__cat-pill:hover {
	border-color: #bbb;
	background: #f0f0f0;
}

.px-icon-picker__cat-pill--active {
	background: var(--action, #0093f5);
	border-color: var(--action, #0093f5);
	color: #fff;
}

.px-icon-picker__cat-pill--active:hover {
	background: var(--action, #0093f5);
	border-color: var(--action, #0093f5);
	color: #fff;
}

/* ── Favorieten pill ── */
.px-icon-picker__cat-pill--featured {
	border-color: #e8d44d;
	background: #fdf8e1;
	color: #8a7400;
}

.px-icon-picker__cat-pill--featured:hover {
	border-color: #d4bf00;
	background: #fcf3c7;
}

.px-icon-picker__cat-pill--featured.px-icon-picker__cat-pill--active {
	background: #d4a800;
	border-color: #d4a800;
	color: #fff;
}

.px-icon-picker__cat-pill--featured.px-icon-picker__cat-pill--active:hover {
	background: #d4a800;
	border-color: #d4a800;
	color: #fff;
}

/* ── Favorite star ── */
.px-icon-picker__star {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bbb;
	opacity: 0;
	transition: opacity 0.1s, color 0.1s;
	pointer-events: auto;
	cursor: pointer;
	z-index: 2;
}

/* Non-favorite: outline star appears on hover, turns gold on star hover. */
.px-icon-picker__icon-btn:hover .px-icon-picker__star {
	opacity: 1;
}

.px-icon-picker__icon-btn:not(.px-icon-picker__icon-btn--fav) .px-icon-picker__star:hover {
	color: #d4a800;
}

/* Favorite: filled gold star, always visible. */
.px-icon-picker__icon-btn--fav .px-icon-picker__star {
	color: #d4a800;
	opacity: 1;
}

/* Favorite hover: star turns red to signal removal. */
.px-icon-picker__icon-btn--fav .px-icon-picker__star:hover {
	color: #c0392b;
}

/* ── Separator between featured and regular icons ── */
.px-icon-picker__separator {
	grid-column: 1 / -1;
	height: 1px;
	background: #e5e5e5;
	margin: 4px 0;
}

/* ── Icon grid ── */
.px-icon-picker__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 2px;
	padding: 4px 12px 12px;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
}

.px-icon-picker__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: none;
	color: #444;
	cursor: pointer;
	transition: all 0.1s;
	position: relative;
}

.px-icon-picker__icon-btn svg {
	display: block;
	width: 22px;
	height: 22px;
}

.px-icon-picker__icon-btn:hover {
	background: #f5f5f5;
	border-color: #e0e0e0;
	color: #111;
}

.px-icon-picker__icon-btn:focus-visible {
	border-color: var(--action, #0093f5);
	outline: none;
}

.px-icon-picker__icon-btn--selected {
	background: var(--action, #0093f5);
	border-color: var(--action, #0093f5);
	color: #fff;
}

.px-icon-picker__icon-btn--selected:hover {
	background: var(--action, #0093f5);
	color: #fff;
}

/* Tooltip on hover */
.px-icon-picker__icon-btn::after {
	content: attr(title);
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 8px;
	background: #333;
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	z-index: 10;
}

.px-icon-picker__icon-btn:hover::after {
	opacity: 1;
}

/* ── Empty state ── */
.px-icon-picker__empty {
	padding: 32px;
	text-align: center;
	color: #999;
	font-size: 13px;
}

/* === px-menu-link.css === */
/**
 * PX Menu Link - Reusable menu link with arrow reveal on hover.
 *
 * Used in: footer nav links, mega menu links, vacatures shortcode.
 *
 * Arrow rendered via ::after pseudo-element on .px-menu-link__text so it flows
 * inline with the last word. Negative margin-right cancels its space → no reflow.
 */


/* Container for a vertical list of px-menu-link items */
.px-menu-link-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d1);
}

.px-menu-link {
	display: block;
	padding: 0;
	margin-left: 0;
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-smooth);
}

/* Hide the HTML arrow span — replaced by ::after */
.px-menu-link__arrow {
	display: none;
}

/* Inline pseudo-element arrow */
.px-menu-link__text::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -0.05em;
	width: var(--space-d1);
	height: var(--space-d1);
	margin-left: var(--space-d05);
	margin-right: calc(-1 * (var(--space-d1) + var(--space-d05)));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M221.66,133.66l-72,72A8,8,0,0,1,136,200V136H40a8,8,0,0,1,0-16h96V56a8,8,0,0,1,13.66-5.66l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M221.66,133.66l-72,72A8,8,0,0,1,136,200V136H40a8,8,0,0,1,0-16h96V56a8,8,0,0,1,13.66-5.66l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: var(--gray-dark);
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--duration-normal) var(--ease-smooth);
}

.px-menu-link:hover {
	color: var(--action);
	text-decoration: underline;
	text-decoration-color: var(--action);
}

.px-menu-link:hover .px-menu-link__text::after {
	clip-path: inset(0 0 0 0);
}

.px-menu-link:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Icon variant — icon always visible, arrow fades in on hover */
.px-menu-link--has-icon {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-d05);
	box-decoration-break: unset;
	-webkit-box-decoration-break: unset;
	transition: color var(--duration-normal) var(--ease-smooth);
}

/* Icon variant uses the HTML arrow span (grid needs the element) */
.px-menu-link--has-icon .px-menu-link__arrow {
	display: flex;
	align-items: center;
	width: auto;
	margin-left: 0;
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-smooth);
}

.px-menu-link--has-icon .px-menu-link__arrow svg {
	width: var(--space-d1);
	height: var(--space-d1);
	flex-shrink: 0;
}

/* Hide ::after on icon variant (uses HTML arrow instead) */
.px-menu-link--has-icon .px-menu-link__text::after {
	display: none;
}

.px-menu-link--has-icon:hover .px-menu-link__arrow {
	opacity: 1;
}

.px-menu-link__icon {
	display: flex;
	align-items: center;
	height: calc(1em * var(--lh-normal));
}

.px-menu-link__icon svg {
	width: var(--space-d15);
	height: var(--space-d15);
}

/* === px-search-menu.css === */
/**
 * PX Search Menu - Static CSS
 *
 * Full-page search overlay following the same positioning pattern
 * as .px-mega-menu (fixed, z-index 999, below header).
 *
 * Includes scoped styles for embedded button-bar and accordion
 * so the module is self-contained.
 */

/* ==========================================================================
   Overlay
   ========================================================================== */

.px-search-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background-color: var(--blue-light);
	z-index: 999;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* Slide-down animation */
	opacity: 0;
	transform: translateY(-2rem);
	transition: opacity var(--duration-normal) var(--ease-smooth),
	            transform var(--duration-normal) var(--ease-smooth);
	pointer-events: none;
}

.px-search-menu[hidden] {
	display: block;
	visibility: hidden;
}

.px-search-menu.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	visibility: visible;
}

/* Body scroll lock */
body.px-search-open {
	overflow: hidden;
}


/* ==========================================================================
   Inner container
   ========================================================================== */

.px-search-menu__inner {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	/* Push below header + D5 spacing */
	padding: calc(var(--header-height, 80px) + var(--space-d5)) var(--space-d1) var(--space-d5);
	display: flex;
	flex-direction: column;
	gap: var(--space-d3);
}


/* ==========================================================================
   Search form section
   ========================================================================== */

.px-search-menu__search {
	display: flex;
	flex-direction: column;
	gap: var(--space-d15);
}

.px-search-menu__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
}

.px-search-menu__label {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	color: var(--gray-dark);
}

.px-search-menu__field {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--space-d05);
}

.px-search-menu__input {
	flex: 1;
	min-width: 0;
	padding: var(--space-d075) var(--space-d1);
	background-color: var(--white);
	border: 2px solid var(--gray-dark);
	border-radius: var(--radius-xs);
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
	line-height: var(--lh-relaxed);
	color: var(--gray-dark);
	outline: none;
	transition: border-color var(--duration-fast) var(--ease-smooth);
}

.px-search-menu__input::placeholder {
	color: var(--gray-mid);
}

.px-search-menu__input:focus {
	border-color: var(--action);
}

/* Search type input: remove browser defaults */
.px-search-menu__input::-webkit-search-cancel-button,
.px-search-menu__input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.px-search-menu__submit {
	flex-shrink: 0;
}


/* ==========================================================================
   Search results section
   ========================================================================== */

.px-search-menu__results {
	display: flex;
	flex-direction: column;
	gap: var(--space-d3);
}

.px-search-menu__results[hidden] {
	display: none;
}

.px-search-menu__results-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d15);
}

.px-search-menu__results-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-d3);
}


/* ==========================================================================
   Single search result
   ========================================================================== */

.px-search-menu__result {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	position: relative;
}

.px-search-menu__result-title {
	color: var(--gray-dark);
}

.px-search-menu__result-title a {
	color: inherit;
	text-decoration: none;
}

.px-search-menu__result-title a:hover {
	color: var(--action);
}

/* Title link covers the whole result, so the entire block is clickable. */
.px-search-menu__result-anchor::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.px-search-menu__result-anchor:focus-visible {
	outline: 3px solid var(--btn-focus-ring);
	outline-offset: 2px;
}

.px-search-menu__result-excerpt {
	margin: 0;
}

/* Result link — matches btn--tert pattern (icon slides in on hover) */
.px-search-menu__result-link {
	display: grid;
	grid-template-columns: auto 0fr;
	align-items: center;
	gap: 0;
	width: fit-content;

	padding: var(--space-d05) 0;

	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;

	background: none;
	border: none;
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: var(--transition-btn);
}

.px-search-menu__result-link-icon {
	display: flex;
	align-items: center;
}

.px-search-menu__result-link-icon svg {
	overflow: hidden;
	width: 0;
	transition: var(--transition-btn);
}

/* The result-wide title link sits on top, so the hover state is driven by the
   result block itself. Focus on the title mirrors it for keyboard users. */
.px-search-menu__result-link:hover,
.px-search-menu__result:hover .px-search-menu__result-link,
.px-search-menu__result-anchor:focus-visible ~ .px-search-menu__result-link,
.px-search-menu__result:has(.px-search-menu__result-anchor:focus-visible) .px-search-menu__result-link {
	color: var(--action);
	text-decoration: none;
	grid-template-columns: auto 1fr;
	gap: var(--space-d05);
}

.px-search-menu__result-link:hover .px-search-menu__result-link-icon svg,
.px-search-menu__result:hover .px-search-menu__result-link-icon svg,
.px-search-menu__result:has(.px-search-menu__result-anchor:focus-visible) .px-search-menu__result-link-icon svg {
	width: var(--space-d1);
	height: var(--space-d1);
}

.px-search-menu__result-link:focus-visible {
	color: var(--action);
	text-decoration: none;
	background-color: var(--white);
	outline: 5px solid var(--btn-focus-ring);
}

/* No results message */
.px-search-menu__no-results {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-relaxed);
	color: var(--gray-dark);
}

/* ==========================================================================
   Toon meer resultaten
   ========================================================================== */

.px-search-menu__more {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d075);
}

.px-search-menu__more[hidden] {
	display: none;
}

.px-search-menu__more-status {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-relaxed);
	color: var(--gray-dark);
}

.px-search-menu__more-btn[hidden] {
	display: none;
}


/* ==========================================================================
   Bottom section (quicklinks + FAQ)
   ========================================================================== */

.px-search-menu__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-d3);
}


/* ==========================================================================
   Quick links (button bar pattern)
   ========================================================================== */

.px-search-menu__quicklinks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-d075);
}

.px-search-menu__quicklinks-heading {
	font-family: var(--font-display);
	font-size: var(--text-d125);
	line-height: var(--lh-snug);
	text-align: center;
	color: var(--black);
	margin: 0;
}

.px-search-menu__quicklinks-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-d05);
}

.px-search-menu__quicklink {
	display: inline-flex;
	align-items: center;
	gap: var(--space-d025);
	padding: var(--space-d05) var(--space-d1) var(--space-d05) var(--space-d075);
	border: 2px solid var(--action);
	border-radius: var(--radius-pill);
	background-color: var(--white);
	color: var(--black);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.px-search-menu__quicklink:hover,
.px-search-menu__quicklink:focus-visible {
	background-color: var(--action);
	color: var(--white);
	border-color: var(--action);
}

.px-search-menu__quicklink-text {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-search-menu__quicklink-icon {
	display: flex;
}

.px-search-menu__quicklink-icon svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.px-search-menu__quicklink-icon svg path {
	fill: var(--text-base);
}


/* ==========================================================================
   FAQ section (scoped accordion styles, aligned with px-accordion component)
   ========================================================================== */

.px-search-menu__faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
}

.px-search-menu__faq-heading {
	margin: 0;
}

/* Item */
.px-search-menu__faq .px-accordion__item {
	display: flex;
	flex-direction: column;
}

/* Heading */
.px-search-menu__faq .px-accordion__heading {
	margin: 0;
}

/* Question button */
.px-search-menu__faq .px-accordion__question {
	display: flex;
	align-items: flex-start;
	gap: var(--space-d05);
	text-align: left;
	color: var(--text-base);
	padding: var(--space-d025) 0;
	margin: 0;
	width: 100%;
	border: none;
	background: none;
	cursor: pointer;
	transition: color var(--duration-normal) var(--ease-smooth);
}

.px-search-menu__faq .px-accordion__question:hover {
	color: var(--action);
}

.px-search-menu__faq .is-open .px-accordion__question {
	color: var(--action);
}

.px-search-menu__faq .px-accordion__question:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Question text */
.px-search-menu__faq .px-accordion__question-text {
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-search-menu__faq .px-accordion__question:hover .px-accordion__question-text {
	text-decoration: none;
}

.px-search-menu__faq .is-open .px-accordion__question-text {
	text-decoration: none;
}

/* Icon (arrow-down, rotates 180° on open) */
.px-search-menu__faq .px-accordion__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--space-d1);
	height: var(--space-d1);
	margin-top: var(--space-d025);
	transition: transform var(--duration-normal) var(--ease-smooth);
}

.px-search-menu__faq .px-accordion__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.px-search-menu__faq .is-open .px-accordion__icon {
	transform: rotate(180deg);
}

/* Answer panel (animated height via CSS grid 0fr → 1fr) */
.px-search-menu__faq .px-accordion__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--duration-normal) var(--ease-smooth);
}

.px-search-menu__faq .is-open .px-accordion__answer-wrap {
	grid-template-rows: 1fr;
}

.px-search-menu__faq .px-accordion__answer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d075);
	padding-left: calc(var(--space-d1) + var(--space-d05));
	overflow: hidden;
	visibility: hidden;
	transition: padding var(--duration-normal) var(--ease-smooth),
	            visibility 0s linear var(--duration-normal);
}

.px-search-menu__faq .is-open .px-accordion__answer {
	visibility: visible;
	padding-top: var(--space-d05);
	padding-bottom: var(--space-d025);
	transition: padding var(--duration-normal) var(--ease-smooth),
	            visibility 0s linear 0s;
}

/* Answer body text */
.px-search-menu__faq .px-accordion__answer-text p {
	margin: 0 0 var(--space-d05) 0;
}

.px-search-menu__faq .px-accordion__answer-text p:last-child {
	margin-bottom: 0;
}

/* Answer CTA button */
.px-search-menu__faq .px-accordion__answer-btn {
	margin-top: var(--space-d025);
}


/* ==========================================================================
   Loading state
   ========================================================================== */

.px-search-menu__loading {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	font-family: var(--font-display);
	font-size: var(--text-body);
	color: var(--gray-mid);
}

.px-search-menu__loading svg {
	width: var(--space-d1);
	height: var(--space-d1);
	animation: px-search-spin 1s linear infinite;
}

@keyframes px-search-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}


/* ==========================================================================
   Responsive — Mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.px-search-menu__inner {
		max-width: 100%;
		padding: calc(var(--header-height, 80px) + var(--space-d3)) var(--space-d15) var(--space-d3);
		gap: var(--space-d2);
	}

	.px-search-menu__bottom {
		gap: var(--space-d2);
	}

	/* Stack search field vertically */
	.px-search-menu__field {
		flex-direction: column;
		align-items: stretch;
	}

	.px-search-menu__submit {
		align-self: flex-start;
	}

	.px-search-menu__again {
		align-self: flex-start;
	}
}

/* === px-search.css === */
/* ==========================================================================
   PX Search Results
   ========================================================================== */

.px-search {
  padding-top: var(--space-d3);
  padding-bottom: var(--space-d5);
}

.px-search__header {
  margin-bottom: var(--space-d2);
}

.px-search__query {
  color: var(--action);
}

/* -- Result items -- */
.px-search__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-d2);
}

.px-search-result {
  padding-bottom: var(--space-d2);
  border-bottom: 1px solid var(--sand);
}

.px-search-result__title {
  margin-bottom: var(--space-d025);
}

.px-search-result__title a {
  color: var(--text-heading);
  transition: color var(--duration-normal) var(--ease-smooth);
}

.px-search-result__title a:hover {
  color: var(--action);
}

.px-search-result__excerpt {
  color: var(--gray-mid);
}

/* -- Pagination -- */
.px-search__pagination {
  margin-top: var(--space-d3);
}

.px-search__pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-d05);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

.px-search__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-d025) var(--space-d05);
  border-radius: var(--radius-s);
  transition: background-color var(--duration-normal) var(--ease-smooth),
              color var(--duration-normal) var(--ease-smooth);
}

.px-search__pagination .page-numbers:hover {
  background-color: var(--blue-light);
  color: var(--action);
}

.px-search__pagination .page-numbers.current {
  background-color: var(--action);
  color: var(--white);
}

/* -- No results -- */
.px-search__no-results {
  max-width: 40rem;
  margin-bottom: var(--space-d2);
}

.px-search__form {
  max-width: 30rem;
}

/* === px-section-bg.css === */
/**
 * PX Section Background - Static CSS
 *
 * Color mode: top 50% via ::before, bottom 50% via ::after.
 * Pattern mode: single ::before at full height.
 *
 * Uses isolation: isolate + z-index: 0/1 to keep pseudo-elements
 * behind content regardless of parent stacking context.
 */

.px-section-bg {
	position: relative;
	isolation: isolate;
}

/* Lift content above the background pseudo-elements */
.px-section-bg > * {
	position: relative;
	z-index: 1;
}

/* Top half — base structure (activates when any --top- class is present) */
[class*="px-section-bg--top-"]::before {
	content: "" !important;
	position: absolute;
	top: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: calc(50% + var(--bg-split-offset, 0px));
	z-index: 0;
}

/* Bottom half — base structure */
[class*="px-section-bg--bottom-"]::after {
	content: "" !important;
	position: absolute;
	bottom: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: calc(50% - var(--bg-split-offset, 0px));
	z-index: 0;
}

/* -- Top color variants -- */
.px-section-bg--top-white::before    { background-color: var(--white); }
.px-section-bg--top-sky-blue::before { background-color: var(--blue-light); }
.px-section-bg--top-yellow::before   { background-color: var(--yellow); }

/* -- Bottom color variants -- */
.px-section-bg--bottom-white::after    { background-color: var(--white); }
.px-section-bg--bottom-sky-blue::after { background-color: var(--blue-light); }
.px-section-bg--bottom-yellow::after   { background-color: var(--yellow); }


/* ==========================================================================
   Pattern backgrounds — single pseudo-element, full height
   ========================================================================== */

.px-section-bg--pattern-full::before {
	content: "" !important;
	position: absolute;
	top: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ==========================================================================
   Optical spacing outside standalone full blue backgrounds

   A full blue background absorbs the module's own vertical space visually.
   Add one spacing token as margin outside the blue area only where the touching
   edge of the adjacent module has no section background. Together with the
   adjacent module's own spacing this creates the intended double visual gap.
   The margin leaves the module-specific spacing inside the blue area unchanged.
   White and pattern backgrounds intentionally receive no compensation.
   ========================================================================== */

@media (min-width: 768px) {
	.fl-builder-content > .fl-module:not([class*="px-section-bg--bottom-"]):not(.px-section-bg--pattern-full)
		+ .fl-module.px-section-bg--full.px-section-bg--top-sky-blue.px-section-bg--bottom-sky-blue {
		margin-top: var(--space-d3);
	}

	.fl-builder-content > .fl-module.px-section-bg--full.px-section-bg--top-sky-blue.px-section-bg--bottom-sky-blue:has(
		+ .fl-module:not([class*="px-section-bg--top-"]):not(.px-section-bg--pattern-full)
	) {
		margin-bottom: var(--space-d3);
	}
}

/* ==========================================================================
   Mobile: hide all section backgrounds (colors + patterns)
   ========================================================================== */

@media (max-width: 767px) {
	[class*="px-section-bg--top-"]::before {
		display: none !important;
	}

	[class*="px-section-bg--bottom-"]::after {
		display: none !important;
	}

	.px-section-bg--pattern-full::before {
		display: none !important;
	}
}


/* -- Pattern image: Leaves -- */
.px-section-bg--pattern-leaves.px-section-bg--pattern-full::before {
	background-image: url('../images/patterns/leaves.jpg');
}

/* -- Pattern image: Winkels - Platenspeler -- */
.px-section-bg--pattern-winkels-platenspeler.px-section-bg--pattern-full::before {
	background-image: url('../images/patterns/winkels-platenspeler.png');
}

/* === px-share-buttons.css === */
/**
 * PX Share Buttons – Layout only.
 * Button styling (btn--sec) comes from base.css.
 * Same pattern as px-winkel-links in winkels shortcode.
 */

.px-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-d05);
	margin: var(--space-d15) 0;
}

.px-share__label {
	width: 100%;
	font-family: var(--font-body);
	font-style: italic;
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--text-base);
	margin: 0;
}

.px-share__btn svg {
	width: 1em;
	height: 1em;
}

/* Prevent wpautop() <p> wrappers from breaking flex layout */
.px-share p {
	display: contents;
}

/* === px-single.css === */
/* ==========================================================================
   PX Single Post
   ========================================================================== */

.px-single {
  padding-top: var(--space-d3);
  padding-bottom: var(--space-d5);
}

.px-single__header {
  margin-bottom: var(--space-d2);
}

.px-single__title {
  margin-bottom: var(--space-d075);
}

.px-single__meta {
  color: var(--gray-mid);
  font-family: var(--font-display);
  font-size: var(--text-d075);
}

.px-single__thumbnail {
  margin: 0 0 var(--space-d2);
}

.px-single__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-s);
}

.px-single__content {
  max-width: 50rem;
  margin-bottom: var(--space-d5);
}

.px-single__content p {
  margin-bottom: var(--space-d1);
}

.px-single__content a {
  color: var(--action);
  text-decoration: underline;
}

.px-single__content a:hover {
  color: var(--navy);
}

.px-single__content img {
  border-radius: var(--radius-s);
  margin-top: var(--space-d1);
  margin-bottom: var(--space-d1);
}

/* -- Post Navigation -- */
.px-single__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-d2);
  padding-top: var(--space-d2);
  border-top: 1px solid var(--sand);
}

.px-single__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-d025);
  max-width: 50%;
}

.px-single__nav-link--next {
  margin-left: auto;
  text-align: right;
}

.px-single__nav-label {
  font-family: var(--font-display);
  font-size: var(--text-d075);
  font-weight: var(--weight-medium);
  color: var(--gray-mid);
  text-transform: uppercase;
}

.px-single__nav-title {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  transition: color var(--duration-normal) var(--ease-smooth);
}

.px-single__nav-link:hover .px-single__nav-title {
  color: var(--action);
}

@media screen and (max-width: 768px) {
  .px-single__nav {
    flex-direction: column;
    gap: var(--space-d1);
  }

  .px-single__nav-link {
    max-width: 100%;
  }

  .px-single__nav-link--next {
    text-align: left;
  }
}

/* === px-vacatures.css === */
/* ==========================================================================
   PX Vacatures / Vacancies
   Content-specific cleanup for vacatures (NL) and vacancies (EN) CPTs.
   General post content styling lives in px-post-content/css/frontend.css.
   ========================================================================== */

/* Hide decorative separator dashes (white-colored em dashes from block editor) */
body:is(.single-vacatures, .single-vacancies) .px-post-content__body > .has-white-color {
  display: none;
}

/* === px-video.css === */
/**
 * PX Video - Shared CSS
 *
 * Play button facade styles used by both the inline video component
 * and the video popup component. Globally enqueued via CSS glob.
 */


/* ── Video wrapper ────────────────────────────── */

.px-video {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--space-d1);
	box-shadow: 2px 4px 10px 0 rgba(51, 51, 51, 0.15);
}

.px-video--ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.px-video--ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.px-video--ratio-1-1 {
	aspect-ratio: 1 / 1;
}


/* ── Poster button (click-to-play facade) ─────── */

.px-video__poster[hidden] {
	display: none;
}

.px-video__poster {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--space-d1);

	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;

	padding: var(--space-d3);

	border: none;
	background: none;
	cursor: pointer;
}


/* ── Thumbnail image ──────────────────────────── */

.px-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ── Centered overlay (play + duration) ───────── */

.px-video__overlay {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-d1);
}


/* ── Play icon ────────────────────────────────── */

.px-video__play {
	display: flex;
	transition: transform var(--duration-normal) var(--ease-smooth);
}

.px-video__play svg {
	width: 72px;
	height: 72px;
}

.px-video__poster:hover .px-video__play {
	transform: scale(1.1);
}


/* ── Duration badge ───────────────────────────── */

.px-video__duration {
	display: flex;
	padding: 0 var(--space-d05);
	justify-content: center;
	align-items: center;

	border-radius: var(--space-d025);
	background-color: var(--white);

	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: -0.2px;
}


/* ── Iframe (shown after click) ───────────────── */

.px-video__iframe-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.px-video__iframe-wrap[hidden] {
	display: none;
}

.px-video__iframe-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* === px-winkel-page.css === */
/* ==========================================================================
   PX Winkel Page — single-winkels.php template styles
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────── */

.px-winkel-page__hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: flex-end;
	background-color: var(--navy);
	overflow: hidden;
}

.px-winkel-page__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.px-winkel-page__hero-overlay {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: var(--space-d5) 0 var(--space-d3);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

.px-winkel-page__hero .px-winkel-page__container {
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
}

.px-winkel-page__hero .heading {
	color: var(--white);
}

.px-winkel-page__hero .open-now {
	color: var(--white);
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	font-size: var(--text-d125);
}


/* ── Container ───────────────────────────────────────────── */

.px-winkel-page__container {
	max-width: var(--row-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-d2);
	padding-right: var(--space-d2);
}


/* ── Sections ────────────────────────────────────────────── */

.px-winkel-page__section {
	padding: var(--space-d5) 0;
}

.px-winkel-page__section:nth-child(even) {
	background-color: var(--white);
}

.px-winkel-page__section > .px-winkel-page__container > .heading {
	margin-bottom: var(--space-d2);
}


/* ── Actueel ─────────────────────────────────────────────── */

.px-winkel-page__actueel-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-d2);
}

.px-winkel-page__actueel-foto img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-s);
}

@media (min-width: 768px) {
	.px-winkel-page__actueel-content {
		grid-template-columns: 1fr 2fr;
	}
}


/* ── Contact & Openingstijden ────────────────────────────── */

.px-winkel-page__contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-d3);
}

@media (min-width: 768px) {
	.px-winkel-page__contact-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.px-winkel-page__contact-info .heading {
	margin-bottom: var(--space-d1);
}

.px-winkel-page__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-d1);
}

.px-winkel-page__phone,
.px-winkel-page__email {
	margin: var(--space-d05) 0;
}

.px-winkel-page__phone a,
.px-winkel-page__email a {
	color: var(--action);
	text-decoration: none;
}

.px-winkel-page__phone a:hover,
.px-winkel-page__email a:hover {
	text-decoration: underline;
}

.px-winkel-contact__row > svg {
	vertical-align: middle;
	margin-right: .3em;
}

.px-winkel-contact__row a {
	color: var(--action);
	text-decoration: none;
}

.px-winkel-contact__row a:hover {
	text-decoration: underline;
}

/* ── Inline tooltip (herbruikbaar) ─────────────────────────── */

.px-inline-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.px-inline-tip__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: .65em;
	font-weight: var(--weight-semibold);
	font-style: italic;
	line-height: 1;
	color: var(--text);
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

.px-inline-tip__btn:hover {
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
}

.px-inline-tip__btn:focus-visible {
	outline: 3px solid var(--btn-focus-ring);
	outline-offset: 2px;
}

.px-inline-tip__popup {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% + var(--space-d05));
	z-index: 10;
	min-width: 140px;
	max-width: 280px;
	padding: var(--space-d05) var(--space-d075);
	border-radius: var(--radius-xs);
	background: var(--action);
	box-shadow: var(--shadow-elevated);
	font-family: var(--font-display);
	font-size: var(--text-d075);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
	color: var(--white);
	white-space: nowrap;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s var(--duration-fast);
	pointer-events: none;
}

.px-inline-tip__popup::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	margin-left: -5px;
	width: 10px;
	height: 10px;
	background: var(--action);
	transform: rotate(45deg);
}

.px-inline-tip__popup--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--duration-fast) var(--ease-smooth),
	            visibility 0s 0s;
}

/* ── Inline copy button (herbruikbaar) ────────────────────── */

.px-inline-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 3px;
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	color: var(--text);
	cursor: pointer;
	flex-shrink: 0;
	vertical-align: middle;
	transition: border-color var(--duration-fast) var(--ease-smooth),
	            box-shadow var(--duration-fast) var(--ease-smooth);
}

.px-inline-copy:hover {
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
}

.px-inline-copy:hover svg path {
	fill: var(--action);
}

.px-inline-copy--done {
	color: var(--green);
}

.px-winkel-contact__email-group {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	max-width: calc(100% - 1.75em);
	vertical-align: middle;
}

.px-winkel-contact__email-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}



.px-winkel-page__hours .heading {
	margin-bottom: var(--space-d1);
}

.px-winkel-page__hours-alert {
	background-color: var(--coral);
	color: var(--white);
	padding: var(--space-d05) var(--space-d1);
	border-radius: var(--radius-xs);
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-d1);
}

.px-ot-dag {
	display: inline-block;
	min-width: 7em;
}

.px-winkel-page__hours-table {
	width: 100%;
	border-collapse: collapse;
}

.px-winkel-page__hours-table td {
	padding: var(--space-d05) 0;
	border-bottom: 1px solid var(--sand-light);
}

.px-winkel-page__hours-table tr:last-child td {
	border-bottom: none;
}

.px-winkel-page__hours-table td:first-child {
	font-weight: var(--weight-medium);
	width: 40%;
}


/* ── FAQ ─────────────────────────────────────────────────── */

.px-winkel-page__faq-items,
.px-winkel-page__vacatures-items {
	margin-top: var(--space-d1);
}


/* ── Goederen / Spullen brengen ──────────────────────────── */

.px-winkel-page__goederen-text {
	margin-bottom: var(--space-d2);
}

.px-winkel-page__goederen-ot,
.px-winkel-page__goederen-bezorgen {
	margin-bottom: var(--space-d1);
}

.px-winkel-page__goederen-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-d1);
	margin-top: var(--space-d1);
}

@media (min-width: 768px) {
	.px-winkel-page__goederen-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.px-winkel-page__goederen-list ul {
	margin: 0;
	padding-left: 1.2em;
}

.px-winkel-page__goederen-list li {
	line-height: var(--lh-normal);
}



/* ── Gallery ─────────────────────────────────────────────── */

.px-winkel-page__video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--radius-s);
	margin-bottom: var(--space-d2);
}

.px-winkel-page__video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.px-winkel-page__team-foto {
	margin-bottom: var(--space-d2);
}

.px-winkel-page__team-foto img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-s);
}

.px-winkel-page__gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-d1);
}

@media (min-width: 768px) {
	.px-winkel-page__gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.px-winkel-page__gallery-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.px-winkel-page__gallery-item {
	overflow: hidden;
	border-radius: var(--radius-xs);
	aspect-ratio: 1;
}

.px-winkel-page__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-normal) var(--ease-smooth);
}

.px-winkel-page__gallery-item:hover img {
	transform: scale(1.05);
}


/* ── Locatie / Map ───────────────────────────────────────── */

.px-winkel-page__map {
	border-radius: var(--radius-s);
	overflow: hidden;
}

.px-winkel-page__map iframe {
	display: block;
	width: 100%;
}


/* ── Social Media ────────────────────────────────────────── */

.px-winkel-page__social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-d1);
	align-items: center;
}

.px-winkel-page__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-full);
	background-color: var(--navy);
	color: var(--white);
	transition: background-color var(--duration-normal) var(--ease-smooth);
	text-decoration: none;
}

.px-winkel-page__social-link:hover {
	background-color: var(--action);
}

.px-winkel-page__social-link svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.px-winkel-page__social-link img {
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}


/* ── Winkel Links (shortcode) ───────────────────────────── */

.px-winkel-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-d05);
	padding-bottom: var(--space-d025);
}

/* Override .px-rich-text a:not(.px-menu-link) (0-2-1) met (0-3-1) */
.px-winkel-links a.px-winkel-links__icon.btn--icon {
	text-decoration: none;
	color: var(--gray-dark);
	border-radius: var(--radius-full);
	padding: 0;
}

.px-winkel-links a.px-winkel-links__icon.btn--icon:hover {
	text-decoration: none;
	color: var(--gray-dark);
}

.px-winkel-links a.px-winkel-links__icon.btn--icon:active {
	padding: 0;
}

.px-winkel-links a.px-winkel-links__btn.btn--sec {
	text-decoration: none;
	color: var(--gray-dark);
	border-radius: var(--radius-s);
	display: inline-flex;
	align-items: center;
	gap: var(--space-d05);
}

.px-winkel-links a.px-winkel-links__btn.btn--sec:hover {
	text-decoration: none;
	color: var(--gray-dark);
}

.px-winkel-links a.px-winkel-links__btn.btn--sec:active {
	color: var(--gray-dark);
	padding: var(--btn-pad);
}



/* ── Partners ────────────────────────────────────────────── */

.px-winkel-page__partners-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-d2);
	align-items: center;
}

.px-winkel-page__partner-logo img {
	max-height: 60px;
	width: auto;
}


/* ── Winkel Popup (fly-in notification) ──────────────────── */

.px-winkel-popup {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 9999;
}

.px-winkel-popup[hidden] {
	display: none;
}

.px-winkel-popup__card {
	position: relative;
	max-width: 380px;
	width: calc(100vw - 48px);
	background: var(--white);
	box-shadow: var(--shadow-elevated);
}

.px-winkel-popup__close {
	position: absolute;
	top: var(--space-d075);
	right: var(--space-d075);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	border-radius: 50%;
	color: var(--black);
	cursor: pointer;
	padding: 0;
	transition: background-color var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth),
	            transform var(--duration-normal) var(--ease-smooth);
}

.px-winkel-popup__close:hover {
	background-color: var(--navy);
	color: var(--white);
	transform: scale(1.1);
}

.px-winkel-popup__close:active {
	transform: scale(0.95);
}

.px-winkel-popup__close:focus-visible {
	outline: solid 2px var(--btn-focus-ring);
	outline-offset: 2px;
}

.px-winkel-popup__close svg {
	width: 20px;
	height: 20px;
}

.px-winkel-popup__inner {
	padding: var(--space-d2);
}

.px-winkel-popup__label {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	font-size: var(--text-d15);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--gray-dark);
	display: flex;
	flex-direction: column;
	row-gap: var(--space-d05);
	margin: 0 0 var(--space-d1);
}

.px-winkel-popup__label::before {
	content: "";
	display: block;
	width: 1.5em;
	height: 0.125em;
	background: var(--action);
}

.px-winkel-popup__body {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
}

.px-winkel-popup__body p {
	margin: 0;
}


/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 767px) {
	.px-winkel-page__hero {
		min-height: 280px;
	}

	.px-winkel-page__section {
		padding: var(--space-d3) 0;
	}

	.px-winkel-page__container {
		padding-left: var(--space-d1);
		padding-right: var(--space-d1);
	}

	.px-winkel-popup {
		bottom: 0;
		right: 0;
		left: 0;
	}

	.px-winkel-popup__card {
		max-width: none;
		width: 100%;
	}
}


/* ==========================================================================
   Empty section auto-hide
   ========================================================================== */

.fl-module:has(.px-section-empty) {
	display: none;
}