@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");
/* Import base LOI styles */
/* Dependencies */
/*
* CSS Reset by Andy Bell
* Sourced and adapted from https://piccalil.li/blog/a-more-modern-css-reset/
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Prevent font size inflation */
html {
   -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
           text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: var(--line-height, 1.5);
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentcolor;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
  height: auto;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* Custom Media Queries - Standard Breakpoint System */
/* Orientation */
/* Standard Breakpoints (min-width) - above variants */
/* 480px */
/* 640px */
/* 768px */
/* 1024px */
/* 1280px */
/* 1536px */
/* 1920px */
/* Below variants (max-width) */
/* < 480px */
/* < 640px */
/* < 768px */
/* < 1024px */
/* < 1280px */
/* < 1536px */
/* < 1920px */
/* PDP 2026 tussenmaat: geen Tailwind t-shirt-maat (die springen op 1280/1536), maar een
   dedicated 1440px-grens voor de PDP-desktop-afwijkingen rond 1440 (#192). */
/* >= 1440px */
/* < 1440px */
/* Only variants (exclusive ranges) */
/* 480px-639px */
/* 640px-767px */
/* 768px-1023px */
/* 1024px-1279px */
/* 1280px-1535px */
/* 1536px-1919px */
/* 1920px+ */
/* Simplified aliases for common use */
/* Same as --xs-above */
/* Same as --sm-above */
/* Same as --md-above */
/* Same as --lg-above */
/* Same as --xl-above */
/* Same as --xxl-above */
/* Same as --3xl-above */
/* Max-width aliases for backward compatibility */
/* Same as --xs-below */
/* Same as --sm-below */
/* Same as --md-below */
/* Same as --lg-below */
/* Same as --xl-below */
/* Same as --xxl-below */
/* Same as --3xl-below */
:root {
  /* Breakpoint Variables - Easily adjustable */
  --xs: 30rem; /* 480px */
  --sm: 40rem; /* 640px */
  --md: 48rem; /* 768px */
  --lg: 64rem; /* 1024px */
  --xl: 80rem; /* 1280px */
  --xxl: 96rem; /* 1536px */
  --3xl: 120rem; /* 1920px */

  /* Container Width Variables */
  --container-3xs: 16rem; /* 256px */
  --container-2xs: 18rem; /* 288px */
  --container-xs: 20rem; /* 320px */
  --container-sm: 24rem; /* 384px */
  --container-md: 28rem; /* 448px */
  --container-lg: 32rem; /* 512px */
  --container-xl: 36rem; /* 576px */
  --container-2xl: 42rem; /* 672px */
  --container-3xl: 48rem; /* 768px */
  --container-4xl: 56rem; /* 896px */
  --container-5xl: 64rem; /* 1024px */
  --container-6xl: 72rem; /* 1152px */
  --container-7xl: 80rem; /* 1280px */

  /* Spacing base unit */
  --mini-spacing: 4px;
  --tiny-spacing: 6px;
  --smaller-spacing: 8px;
  --small-spacing: 10px;
  --spacing: 1rem;
  --medium-spacing: 1.5rem; /* = 24px */
  --big-spacing: 2rem; /* = 32px */
  --huge-spacing: 3rem; /* = 48px */
  --mega-spacing: 4rem; /* = 64px */

  /* Colors */
  --color-primary-400: #F2FAFE;
  --color-primary-500: #E5F5FC;
  --color-primary-600: #DAF1FB;
  --color-primary-700: #C2E8F9;
  --color-primary-900: #009FE3;

  --red: oklch(0.5915 0.202 21.24); /* #dc3545; */
  --orange: oklch(74.16% 0.1718 50.83deg); /* #FE8633FF */
  --orange-faint: #F1F1F1;
  --orange-hover: #EB7C2F;
  --green: oklch(68.08% 0.231665 142.4953deg); /* #00B900FF*/
  --green-hover: #00AC00;
  --blue: var(--color-primary-900); /* blue 009FE3FF */
  --white: oklch(100% 0 0deg); /* FFFFFFFF */
  --grey: oklch(95.81% 0 0deg); /* F1F1F1FF */
  --black: oklch(37.32% 0.0036 308.35deg); /* #414042 */
  --brown: oklch(50.98% 0.0471 45.56deg); /* brown 7D5E4FFF */
  --ghost: oklch(0.9867 0.0084 225.08); /* ghost F5FCFFFF */

  --light-baby-blue: oklch(0.9195 0.0288 224.71); /* #D1E9F8 */
  --dark-blue: oklch(0.4292 0.1171 248.56); /* #00528c */
  --brand-color: var(--blue);
  --brand-color-hover: #008fcc;
  --brand-color-mid: oklch(74.36% 0.1231 229.43deg); /* sky 46BAEAFF */
  --brand-color-light: oklch(93.85% 0.0227 229.08deg); /* ice DCEEF7FF */
  --brand-color-pale: var(--color-primary-700);
  --menu-color: #EAF7FC;
  --brand-color-faint: oklch(97.54% 0.0134 226.56deg); /* mist EEF9FEFF */
  --brand-color-faint-hover: #D4EFFB;
  --brand-color-ghost: var(--ghost);
  --text-color: var(--black);
  --text-color-neutral: #62748E;
  --text-color-neutral-300: #E2E8F0;
  --text-color-neutral-400: #CAD5E2;
  --text-color-neutral-500: #7D8CA1;
  --text-color-neutral-600: #62748E;
  --text-color-neutral-700: #45556C;
  --text-color-neutral-800: #0F172B;
  --background-color-neutral: #F6F8FA;

  --text-color-light: oklch(50.32% 0 0deg); /* #646464FF */
  --text-color-lighter: #8D8C8E;
  --text-color-faint: oklch(76.47% 0.0018 325.59deg); /* #B3B2B3FF */
  --cta-blue: var(--blue); /* #009FE3 */
  --cta-blue-hover: var(--brand-color-hover); /* ##008fcc */
  --cta-orange: var(--orange); /* #FE8633 */
  --cta-orange-hover: var(--orange-hover);
  --cta-red: var(--red);
  --cta-green: var(--green); /* #00B900 */
  --cta-green-hover: var(--green-hover);
  --cta-white: var(--white); /* #FFFFFF */

  --subtle-black: oklch(0 0 0 / 16.08%); /* #00000029 */
  --subtle-grey: oklch(from var(--text-color) l c h / 25%); /* #333340 */
  --light-grey: oklch(0.8408 0.0026 228.79); /* #c9cbcc */
  --lighter-grey: oklch(0.9708 0.0026 228.79);
  --silver-mist: #B3B2B2;

  --surface-light: oklch(97.63% 0.0029 84.56deg); /* cream F8F7F5FF */
  --surface-mid: oklch(96.35% 0.0108 95.16deg); /* bone F5F3EBFF */
  --surface-dark: oklch(93.43% 0.0131 71.33deg); /* sand EFE8E0FF */


  /* Sizes */
  --padding-small: 10px;
  --padding-medium: 15px;

  --corner-size-small: 5px;
  --corner-size-medium: 0.625rem; /* 10px */
  --corner-size-large: 1.25rem; /* 20px */
  --icon-size: 1.5rem; /* 24px */
  --root-size: 16px;
  --font-size: 15px;
  --header-height: 50px;
  --navbar-height: 3.25rem; /* 52px */
  --breadcrumbs-height: 3rem; /* 48px */
  --footer-height: 46rem;
  --footer-height-checkout: 24rem;
  --menu-height: 3.25rem;
  --hero-height: 28rem;
  --aside-width: 13.75rem;
  --aside-content-gap: 6rem;
  --form-element-size: 2.5rem;
  --large-form-element-size: calc(var(--form-element-size) + var(--root-size));
  --floating-header-height: 4.5rem;
  --result-row-height: 5rem;
  --below-header: calc(var(--header-height) + var(--breadcrumbs-height));
  --pagination-height: 44px;
  --small-icon-dot-height: 16px;
  --medium-icon-dot-height: 24px;
  --big-icon-dot-height: 30px;
  --social-icons-height: 30px;
  --review-stars-height: 30px;

  /* Grid System Variables with Responsive Values */
  --gutter: var(--col-gap);
  --col-gap: 10px;
  --grid-row-gap: 10px;
  --row-gap: 30px;

  --col-count: 8;
  --columns: var(--default-columns); /* Default to tablet-m */

  --inner-col-padding-x: 15px;
  --inner-col-padding-y: 20px;

  /* this is the result of 5 items min-width 250px + 4 gaps of 20px */
  --max-container-width: 1330px;
  --desktop-safezone: 960px;
  --col-size: min(
    /* viewport-sized middle */ calc((100% - (var(--col-count) - 1) * var(--col-gap)) / var(--col-count)),
            /* 1260px-capped middle */ calc((var(--max-container-width) - (var(--col-count) - 1) * var(--col-gap)) / var(--col-count))
  );
  --desktop-columns: [full-start] 1fr [content-start] repeat(var(--col-count), minmax(0, var(--col-size))) [content-end] 1fr [full-end];
  --default-columns: 0 repeat(var(--col-count), 1fr) 0;

  /* Mobile S, 3 columns */
  --mobile-safezone: 480px;

  /* Typography */
  --line-height: 1.5;
  --text-copy-xxxs: 0.5625rem; /* 9px */
  --text-copy-xxs: 0.625rem; /* 10px */
  --text-copy-xs: 0.75rem; /* 12px */
  --text-copy-s: 0.875rem; /* 14px */
  --text-copy-sm: 0.9375rem; /* 15px */
  --text-copy-m: 1rem; /* 16px */
  --text-copy-l: 1.125rem; /* 18px */
  --text-subheading-size: 1.25rem; /* 20px */
  --text-title-size: 1.5rem; /* 24px */
  --text-heading-size: 1.625rem; /* 26px */
  --text-coursename-size: 2.25rem; /* 40px */
  --text-hero-size-mobile: 1.625rem; /* 26px */
  --line-height-hero-size-mobile: 1.875rem; /* 30px */
  --text-hero-size: 3.25rem; /* 52 */
  --line-height-hero-size: 3.75rem; /* 60 */
  --text-giant-size: 4.6875rem; /* 75px */
  --brand-headline: "Barlow Condensed", arial, "Helvetica Neue", helvetica;
  --brand-typeface: "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-bold-typeface: "Roboto Bold", "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-regular-typeface: var(--brand-typeface);
  --brand-medium-typeface: "Roboto Medium", "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-light-typeface: "Roboto Light", "Roboto", arial, "Helvetica Neue", helvetica;
  --hero-typeface: "Barlow Condensed", "Roboto Bold", "Roboto", arial, "Helvetica Neue", helvetica;
  --button-typeface: var(--brand-regular-typeface);
  --heading-typeface: var(--brand-bold-typeface);

  /* Animations */
  --quick-transition: all 0.05s ease-out;
  --standard-transition: all 0.3s ease-out;
  --slow-transition: all 3s ease-out;
  --box-shadow: 0px 3px 10px oklch(0% 0 0deg);
  --subtle-shadow: 0px 3px 6px oklch(from currentcolor l c h / 30%);
  --faint-shadow: 0px 0px 5px oklch(from currentcolor l c h / 15%);
  --button-shadow: 0px 3px 6px oklch(0 0 0 / 16.08%);

  @media (width < 40rem) {
    --text-heading-size: 1.3125rem; /* 21px */
    --text-coursename-size: 1.625rem; /* 21px */
  }

  @media (width >= 48rem) {
    --header-height: 4rem;
    --col-count: 20;
    --inner-col-padding-x: 30px;
    --inner-col-padding-y: 25px;
  }

  @media (width >= 64rem) {
    --columns: var(--desktop-columns);
    --below-header: calc(var(--header-height) + var(--navbar-height) + var(--breadcrumbs-height));
    --col-gap: 15px;
  }

  @media (width >= 80rem) {
    --col-gap: 20px;
    --grid-row-gap: 15px;
    --row-gap: 50px;
  }

}
/**
  --tiny-spacing: 6px;
  --spacing: 1rem;
  --big-spacing: 2rem;
 */
.mt-0 {
  margin-top: 0 !important;
}
.mt-tiny {
  margin-top: var(--tiny-spacing);
}
.mt-small {
  margin-top: var(--small-spacing);
}
.mt-normal,
.mt-regular {
  margin-top: var(--spacing);
}
.mt-big {
  margin-top: var(--big-spacing);
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-tiny {
  margin-bottom: var(--tiny-spacing);
}
.mb-small {
  margin-bottom: var(--small-spacing);
}
.mb-regular {
  margin-bottom: var(--spacing);
}
.mb-big {
  margin-bottom: var(--big-spacing);
}
.ml-tiny {
  margin-left: var(--tiny-spacing);
}
.ml-small {
  margin-left: var(--small-spacing);
}
.ml-regular {
  margin-left: var(--spacing);
}
.ml-big {
  margin-left: var(--big-spacing);
}
.mr-tiny {
  margin-right: var(--tiny-spacing);
}
.mr-small {
  margin-right: var(--small-spacing);
}
.mr-regular {
  margin-right: var(--spacing);
}
.mr-big {
  margin-right: var(--big-spacing);
}
.pt-tiny {
  padding-top: var(--tiny-spacing);
}
.pt-small {
  padding-top: var(--small-spacing);
}
.pt-normal,
.pt-regular {
  padding-top: var(--spacing);
}
.pt-big {
  padding-top: var(--big-spacing);
}
.pb-tiny {
  padding-bottom: var(--tiny-spacing);
}
.pb-small {
  padding-bottom: var(--small-spacing);
}
.pb-regular {
  padding-bottom: var(--spacing);
}
.pb-big {
  padding-bottom: var(--big-spacing);
}
.pl-tiny {
  padding-left: var(--tiny-spacing);
}
.pl-small {
  padding-left: var(--small-spacing);
}
.pl-regular {
  padding-left: var(--spacing);
}
.pl-big {
  padding-left: var(--big-spacing);
}
.pr-tiny {
  padding-right: var(--tiny-spacing);
}
.pr-small {
  padding-right: var(--small-spacing);
}
.pr-regular {
  padding-right: var(--spacing);
}
.pr-big {
  padding-right: var(--big-spacing);
}
.flex_row {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
}
.flex_grow {
  flex-grow: 1;
}
.tooltip {
  display: none;
  opacity: 0;
  background: var(--cta-orange);
  color: var(--white);
  border-radius: var(--corner-size-small);
  padding-inline: 8px;
  padding-block: 6px;
  font-size: var(--text-copy-xs);
  position: absolute;
  top: -27px;
  left: 50%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  transform: translateX(-100%);
  margin-left: 8px;
  z-index: 30;

  &::before {
    display: block;
    content: "";
    position: absolute;
    background: var(--cta-orange);
    right: 8px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    rotate: 45deg;
  }

  &.shown {
    display: block; /* zichtbaar zodra popover geopend is */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

  @media (width < 40rem) {
    &.shown {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: calc(100vw - 2rem);
      width: auto;
      margin-left: 0;
      z-index: 100;
    }

    &.shown::before {
      display: none;
    }
  }

}
/* Info Popover - blue "i" trigger with white balloon */
.info_popover_trigger {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../img/icons/i-blue.svg') center / contain no-repeat;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;

  &:hover,
  &:active {
    transform: none;
  }
}
.info_popover {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--white);
  border-radius: var(--corner-size-medium);
  box-shadow: 0 4px 20px oklch(0 0 0 / 15%);
  padding: 16px 20px;
  max-width: 320px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: var(--text-copy-s);
  font-weight: normal;
  line-height: 1.5;
  color: var(--text-color);

  &.shown {
    display: block;
  }
}
.info_popover_close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-color-light);
  padding: 2px 6px;

  &:hover {
    color: var(--text-color);
  }
}
.info_popover_content {
  padding-right: 16px;

  & p {
    margin: 0 0 8px;

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

  & a {
    color: var(--cta-blue);
    text-decoration: underline;
  }

  & ul {
    list-style-type: disc;
  }

  & ol {
    list-style-type: decimal;
  }

  & ul, & ol {
    list-style-position: outside;
    padding-left: 16px;
    margin: 0 0 8px;
    line-height: var(--line-height);

    & li {
      padding-left: var(--text-copy-xxs);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}
.info_popover_arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--white);
  transform: rotate(45deg);
  box-shadow: -2px 2px 4px oklch(0 0 0 / 8%);
}
.account_for_chevron_right {
  padding-right: 12px;
}
.chevron_right_icon {
  position: relative;

  &::after {
    content: "";
    -webkit-mask: url(../../../themes/loi/img/icons/chevron-right.svg) no-repeat 50% 50%;
            mask: url(../../../themes/loi/img/icons/chevron-right.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
            mask-size: cover;
    background-color: currentColor;
    float: right;
    white-space: nowrap;
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;

    @media (width >= 48rem) {
      width: 24px;
      height: 24px;
    }
  }

  &.blue_chevron {
    &::after {
      background-color: var(--blue);
    }
  }
}
.chevron_left_icon {
  position: relative;

  &::after {
    content: "";
    -webkit-mask: url(../../../themes/loi/img/icons/chevron-left.svg) no-repeat 50% 50%;
            mask: url(../../../themes/loi/img/icons/chevron-left.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
            mask-size: cover;
    background-color: currentColor;
    width: 24px;
    height: 24px;
    float: right;
    white-space: nowrap;
    position: absolute;
    left: 0;
    /*top: 2px;*/
  }
}
.has-bg-focus-point {
  /**
   * FocusX: Decimal number between -1 & 1, where -1 is far left, 0 is center, 1 is far right.
   * FocusY: Decimal number between -1 & 1, where -1 is top, 0 is center, 1 is bottom.
   */
  background-position: calc((var(--focus-point-x, 0) + 1) * 50%) calc((var(--focus-point-y, 0) + 1) * 50%) !important;
}
.has-focus-point {
  /**
   * FocusX: Decimal number between -1 & 1, where -1 is far left, 0 is center, 1 is far right.
   * FocusY: Decimal number between -1 & 1, where -1 is top, 0 is center, 1 is bottom.
   */

  .image-with-focus-point {
    -o-object-position: calc((var(--focus-point-x, 0) + 1) * 50%) calc((var(--focus-point-y, 0) + 1) * 50%) !important;
       object-position: calc((var(--focus-point-x, 0) + 1) * 50%) calc((var(--focus-point-y, 0) + 1) * 50%) !important;
  }
}
.has-mobile-bg-focus-point {
  @media (width < 48rem) {
    background-position: calc((var(--mobile-focus-point-x, var(--tablet-focus-point-x, var(--focus-point-x, 0))) + 1) * 50%) calc((var(--mobile-focus-point-y, var(--tablet-focus-point-y, var(--focus-point-y, 0))) + 1) * 50%) !important;
  }
}
.has-tablet-bg-focus-point {
  @media (48rem <= width < 64rem) {
    background-position: calc((var(--tablet-focus-point-x, var(--focus-point-x, 0)) + 1) * 50%) calc((var(--tablet-focus-point-y, var(--focus-point-y, 0)) + 1) * 50%) !important;
  }
}
/* Background color utility classes */
.bg-blue {
  background-color: var(--blue);
}
.bg-dark-blue {
  background-color: var(--dark-blue);
}
.bg-orange {
  background-color: var(--orange);
}
.bg-green {
  background-color: var(--green);
}
.bg-white {
  background-color: var(--white);
}
.bg-grey {
  background-color: var(--grey);
}
.bg-black {
  background-color: var(--black);
}
.bg-brown {
  background-color: var(--brown);
}
.bg-ghost {
  background-color: var(--ghost);
}
.bg-brand-light {
  background-color: var(--brand-color-light);
}
.bg-brand-faint {
  background-color: var(--brand-color-faint);
}
/*
 * Self-hosted Roboto + Barlow Condensed (gitnti/loi#132 #1 + #10).
 *
 * Replaces the previous render-blocking
 *   @import url('https://fonts.googleapis.com/css2?...');
 * which fetched fonts from fonts.googleapis.com + fonts.gstatic.com.
 *
 * Roboto is a variable font (one woff2 covers weights 100-900 + italic
 * as a separate file). Barlow Condensed is shipped only for the weights
 * actually used in the theme (300/400/500/700/900 + italic 400) — drop
 * a file and add a new @font-face when a new weight is wired up.
 *
 * Latin subset only — `unicode-range: U+0000-00FF, ...` matches Google's
 * latin subset, so any non-latin glyph falls through to the next listed
 * family in the var(--brand-typeface) cascade.
 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto/roboto-latin-variable.woff2') format('woff2-variations');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto/roboto-latin-italic-variable.woff2') format('woff2-variations');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/barlow-condensed/barlow-condensed-latin-300.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-condensed/barlow-condensed-latin-400.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-condensed/barlow-condensed-latin-500.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-condensed/barlow-condensed-latin-600.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-condensed/barlow-condensed-latin-700.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/barlow-condensed/barlow-condensed-latin-900.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-condensed/barlow-condensed-latin-italic-400.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Definitions */
html, body {
  scroll-behavior: smooth;
}
body {
  background: var(--white);
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows:
    var(--header-height)
    var(--menu-height)
    var(--breadcrumbs-height)
    var(--hero-height)
    auto
    var(--footer-height);
  grid-column-gap: var(--col-gap);

  &.checkout {
    grid-template-rows:
    var(--header-height)
    var(--menu-height)
    var(--breadcrumbs-height)
    var(--hero-height)
    auto
    var(--footer-height-checkout);
  }
}
body > header {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  top: 0;
  z-index: 3;
  padding-block: 8px;
  background: var(--brand-color);
  position: static;
  transition: transform 300ms ease-out;

  @media (width < 48rem) {
    box-shadow: 0 3px 4px #00000029;
  }

  &.header-scroll-up {
    padding-inline: 10px;
    position: fixed;
    width: 100%;
    transform: translateY(0);
  }

  &.header-scroll-down {
    position: fixed;
    width: 100%;
    transform: translateY(-100%);
  }

  @media (width >= 48rem) {
    padding-block: var(--root-size);
  }

  @media (width >= 64rem) {
    position: -webkit-sticky;
    position: sticky;

    &.header-scroll-up,
    &.header-scroll-down {
      position: -webkit-sticky;
      position: sticky;
      transform: none;
    }
  }

  .inner {
    grid-column: 2 / -2;
    grid-row: 1 / 2;
    display: grid;
    grid-column-gap: 10px;
    grid-template-rows: 100%;
    grid-template-columns: -webkit-min-content minmax(0, 1fr) -webkit-min-content;
    grid-template-columns: min-content minmax(0, 1fr) min-content;

    @media (width >= 48rem) {
      grid-column-gap: 30px;
      grid-template-columns: 150px minmax(0, 1fr) -webkit-max-content;
      grid-template-columns: 150px minmax(0, 1fr) max-content;
    }

    @media (width >= 64rem) {
      grid-template-columns: 200px minmax(0, 1fr) -webkit-max-content;
      grid-template-columns: 200px minmax(0, 1fr) max-content;
    }
  }

  #menu_icon {
    z-index: 10;
    display: block;
    position: relative;
    width: 20px;
    margin: -3px -2px;

    @media (width >= 64rem) {
      display: none;
    }
  }

  & #header_logo {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;

    .mobile_menu_icon {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      margin-right: 10px;
      font-family: var(--brand-light-typeface);

      > span {
        display: inline-flex;
        justify-content: center;
        color: #FFF;
        font-size: var(--text-copy-xxxs);
        line-height: var(--text-copy-xxxs);
        transform: translateY(4px);
      }

      /* Icon verbergen pas vanaf 1024, waar de desktop-hoofdnav (#menu_container, --lg-above)
         het overneemt. Deed dit eerder al vanaf 768 -> gat 768-1023 zonder nav-toegang (#192). */
      @media (width >= 64rem) {
        display: none;
      }
    }

    & svg#logo_mark {
      & text {
        display: none;

        @media (width >= 48rem) {
          display: inline;
        }
      }
    }

    & a {
      display: flex;
      align-items: center;
      width: 35px;
      height: 34px;
      overflow: hidden;

      @media (width >= 48rem) {
        width: 90px;
      }

      & svg {
        height: 34px;
        overflow: hidden;
        color: var(--white);
      }
    }
  }

  & #header_search {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;

    & label {
      visibility: hidden;
    }

    & > input {
      --form-element-size: 34px;
      outline: none;
      border: none;
      flex-grow: 1;

      &::-moz-placeholder {
        font-size: var(--text-copy-xs);
      }

      &::placeholder {
        font-size: var(--text-copy-xs);
      }
    }

    & > #header_search_icon,
    & > #clear_search_icon {
      justify-self: end;
      position: absolute;
      right: var(--spacing);
      height: var(--text-copy-m);
      aspect-ratio: 1;
      transition: var(--standard-transition);

      &#clear_search_icon {
        right: calc(2.5 * var(--text-copy-m));
      }
    }

    & #header_search_input:not(:-moz-placeholder) {
      + #header_search_icon {
        opacity: 0;
      }
    }

    & #header_search_input:not(:placeholder-shown) {
      + #header_search_icon {
        opacity: 0;
      }
    }

    & > #header_search_results {
      position: absolute;
      top: calc(100% + var(--root-size));
      width: 100%;
      height: 0;
      max-height: 0;
      padding-block: 0;
      padding-inline: var(--text-subheading-size);
      overflow: hidden;
      background: var(--white);
      font-size: var(--text-copy-s);
      transition: var(--standard-transition);

      @media (width < 48rem) {
        position: fixed;
        top: var(--header-height);
        width: auto;
        left: 0;
        right: 0;
      }
    }
  }

  & #header_links {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
    font-size: var(--text-copy-xs);
    font-family: var(--brand-light-typeface);
    color: var(--white);

    @media (width >= 64rem) {
      gap: 15px;
    }

    & > a {
      flex-direction: column;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      font-size: 9px;

      &:not(.hidden) {
        display: flex;
      }

      &:not(.hidden):not(:has(img)) {
        @media (width < 64rem) {
          display: none;
        }
      }

      @media (width >= 64rem) {
        font-size: var(--text-copy-xs);
        width: auto;
        flex-direction: row;
      }

      &:not(:last-of-type) {
        @media (width >= 64rem) {
          border-right: 1px solid var(--brand-color-mid);
          padding-right: 15px;
          margin-left: 3px;
        }
      }

      & > img {
        height: var(--root-size);
        aspect-ratio: 1;
        display: inline-block;
        filter: brightness(100); /* Force white */
        transform: translateY(4px);
        @media (width >= 48rem) {
          transform: none;
        }
      }
    }


  }
}
/* Show search results when body has .search-active class */
body.search-active {
  > header {
    #header_search {
      #header_search_results:not(.hidden) {
        height: auto;
        max-height: 100vh;
        overflow-y: scroll;
        scrollbar-width: thin;
        padding-block: var(--text-subheading-size);
      }
    }
  }
}
/* Prevent iOS Safari zoom on focus (requires >= 16px) */
@media (width < 48rem) {
  body.is_safari #header_search > input,
  body.is_ios #header_search > input {
    font-size: 16px;
  }
}
body #menu_container {
  display: none;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height);
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  z-index: 1;
  box-shadow: 0 2px 2px var(--subtle-black);

  @media (width >= 64rem) {
    display: grid;
  }

  &.menu-active > #menu_drawer {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding-block: var(--breadcrumbs-height) var(--header-height);
  }

  & > :is(menu, #menu_drawer) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
  }

  & #menu_header {
    grid-row: 2 / 3;
    top: var(--header-height);
    align-items: center;
    background: var(--menu-color);
    z-index: 2;

    & li {
      height: 100%;
      display: grid;
      align-items: center;
      cursor: pointer;

      &:first-of-type {
        grid-column: 2 / -7;

        & > menu {
          position: relative;
          inset: 0 calc(var(--root-size) * -1);
          height: 100%;
          display: flex;
          align-items: center;

          & > li {
            padding-inline: var(--root-size);

            &:is(:hover, :focus, .active) {
              background: var(--white);
            }

            .sticker_container {
              grid-column-start: none;

              .sticker {
                margin-left: 6px;
                padding: 2px 6px;
                line-height: 130%;
                font-size: var(--text-copy-xxs);
              }
            }
          }
        }
      }

      &:not(:first-of-type) {
        grid-column: auto/ span 5;
        justify-items: end;
        white-space: nowrap;

        & > menu {
          position: relative;
          /*inset: 0 calc(var(--root-size) * -1);*/
          height: 100%;
          display: flex;
          align-items: center;
          align-content: flex-end;

          & > li:not(:last-of-type) {
            margin-right: var(--root-size);
          }

          /*& > li {*/
          /*  padding-inline: calc(var(--root-size) / 2);*/
          /*}*/
        }
      }
    }
  }

  & #menu_drawer {
    position: relative;
    top: var(--menu-height);
    z-index: 1;
    display: grid;
    grid-template-columns: subgrid;
    height: 0;
    overflow: hidden;
    background: var(--white);

    & > div.menu_lists_container {
      display: none;

      &.active {
        display: contents;
      }

      .sticker_container {
        .sticker {
          font-size: var(--text-copy-xxs);
          padding: 2px 3px;
          margin-left: 3px;
          line-height: 130%;
        }
      }

      & > div {
        grid-column: auto / span 5;
        font-size: var(--text-copy-s);
        line-height: 160%;

        & > a.fallback_link {
          display: block;
          margin-top: var(--root-size);
        }

        & .menu_title {
          margin-bottom: var(--root-size);

          .sticker_container {
            position: relative;
            top: -2px;
          }
        }

        &:nth-of-type(1) {
          grid-column-start: 2;
        }
      }
    }
  }
}
body > main {
  grid-column: 1 / -1;
  grid-row: 3 / 6;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  grid-auto-rows: auto;
  width: 100vw;
  padding-bottom: var(--header-height);
  background: var(--white);
  isolation: isolate;

  /*make sure any floating nav-items dont trigger scrollbars in certain resolutions*/
  overflow-x: clip;

  & > nav {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    height: var(--breadcrumbs-height);
    top: calc(var(--header-height) + var(--menu-height));
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr;
    z-index: 2;
    background: oklch(from var(--white) l c h / 95%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    position: static;

    @media (width >= 64rem) {
      position: -webkit-sticky;
      position: sticky;
    }

    & > #crumbtrail {
      grid-column: 2 / span 10;
      grid-row: 1 / -1;
    }

    & > .ticks_list {
      grid-column: 10 / -2;
      grid-row: 1 / -1;
      /* Mobile-first: hidden by default so it is not painted on the
         breadcrumb viewport. Penthouse renders critical CSS at the mobile
         viewport; a default display:none means it drops this element
         entirely, preventing the ticks_list from overlapping the
         breadcrumb in the critical-only paint (gitnti/loi#164). Shown
         from --lg-above; the mobile hide rule in responsive.css is now
         redundant and removed. */
      display: none;
      align-items: center;
      justify-content: end;
      gap: var(--text-copy-xs);

      @media (width >= 64rem) {
        display: flex;
      }

      & li {
        white-space: nowrap;
      }
    }
  }

  & > section#hero {
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
    aspect-ratio: 2.75/1;
    max-height: var(--desktop-bg-height, -webkit-fit-content);
    max-height: var(--desktop-bg-height, -moz-fit-content);
    max-height: var(--desktop-bg-height, fit-content);
    grid-template-columns: subgrid;
    grid-template-rows: 13px repeat(5, 1fr) 13px;
    display: none;

    @media (width >= 48rem) {
      grid-template-rows: 34px repeat(5, 1fr) 34px;
    }

    &.hero_mobile {
      display: grid;

      &.hero_bigger {
        @media (width < 48rem) {
          height: 170px;
        }
      }

      &:not(.hero_desktop) {
        @media (width >= 48rem) {
          display: none;
        }
      }
    }

    &.hero_desktop {
      @media (width >= 48rem) {
        display: grid;
      }
    }

    &.smaller {
      aspect-ratio: 4/1;
    }

    .hero_alignment {
      z-index: 2;
      grid-column: 2 / -2;
      grid-row: 2 / 3;

      &:not(:has(.hero_usps)) {
        grid-column: 2 / 12;
      }
    }

    /* Decorative ripple. Outer wrapper spans the FULL hero (1 / -1) with overflow:hidden
       so the graphic is clipped to the hero box (section#hero itself must stay
       overflow:visible for the mobile banner strip). The inner element sits on the
       CONTENT columns (2 / -2) so the SVG is anchored to the left of the content (not the
       window) and offset per the design. Behind the text (z-index 1), never blocks clicks. */
    .hero_ripple {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      overflow: hidden;
      position: relative;
      z-index: 1;
      pointer-events: none;
    }

    .hero_ripple .hero_ripple_inner {
      grid-column: 2 / -2;
      position: relative;

      img {
        position: absolute;
        /* Mobile: 306 x 297.8, left of content -170px, top aligned at 0 */
        width: 306px;
        height: 297.8px;
        left: -170px;
        top: 0;
      }

      @media (width >= 48rem) {
        img {
          /* Desktop: 906 x 881.72, left of content -519px, bottom aligned at -391px */
          width: 906px;
          height: 881.72px;
          left: -519px;
          top: auto;
          bottom: -391px;
        }
      }
    }

    .blog_publish_date--mobile {
      font-size: var(--text-copy-s);
      color: var(--white);

      @media (width >= 48rem) {
        display: none;
      }
    }

    & .cta {
      /* z-index above .hero_ripple (z-index:1) so the decorative SVG doesn't
         overlay the CTA. position:relative required for z-index to apply on
         the grid item (gitnti/loi#168). */
      position: relative;
      z-index: 2;
      grid-column: 2 / auto;
      place-self: start;
      white-space: nowrap;

      @media (width < 48rem) {
        padding: 8px 12px;
        font-size: var(--text-copy-xs);
        min-height: 35px;
      }
    }
  }

  & > .container {
    display: block;
    grid-column: 1 / -1;

    > .page_title_block {
      grid-column: 2 / -2;
    }

    > .element, > .content_block {
      grid-column: 2 / -2;

      /* Make breakouts possible */

      &:has(.breakout) {
        @media (width < 80rem) {
          grid-column: 2 / -1;
          > :not(.breakout) {
            grid-column: 1 / -2;
          }
        }
      }

      &.element_content_card {
        grid-column: 1 / -1;

        @media (width >= 48rem) {
          grid-column: 2 / -2;
        }

      }
    }
  }

  & > .container--regular {
    grid-column: 2 / -2;
  }

  & > .container--grid {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    row-gap: var(--row-gap);

    &:not(:first-of-type) {
      /* if there's no hero, make sure there's space for the breadcrumbs */
      padding-top: 20px;

      @media (width >= 48rem) {
        padding-top: 30px;
      }
    }

    body:has(#crumbtrail) &:not(:first-of-type) {
      /* if there's no hero, make sure there's space for the breadcrumbs */
      padding-top: calc(var(--breadcrumbs-height) + var(--tiny-spacing));
    }

    > .span_grid {
      width: 100%;
      display: grid;
      grid-column: 1 / -1;
    }

    > .page_title_with_meta {
      grid-column: 2 / -2;
    }

    .blog_publish_date--desktop {
      display: none;

      @media (width >= 48rem) {
        display: block;
      }
    }

  }

  & > section.checkout {
    grid-column: 2 / -2;
    grid-row: 2 / 3;
    padding-top: var(--menu-height);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;

    & > div#checkout_form_container {
      grid-row: 1 / 2;
      grid-column: 1 / 14;
      height: 50dvh;
    }

    & > div#checkout_cost_summary {
      --heading-color: var(--brand-color-mid);

      grid-row: 1 / 2;
      grid-column: 14 / -1;
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      border-radius: var(--corner-size-medium);
      padding: var(--form-element-size);
      box-shadow: var(--subtle-shadow);
      display: flex;
      flex-direction: column;
      gap: var(--root-size);
      color: var(--brand-color-mid);
      position: relative;

      & h3 {
        display: flex;
        align-items: center;
      }

      & .flex_row {
        gap: var(--root-size);

        & label {
          flex: 1;
        }
      }

      & .cost_breakdown {
        --text-color: var(--text-color-faint);
        font-size: var(--text-copy-s);

        & p {
          display: flex;
          justify-content: space-between;

          & span {
            --text-color: var(--grey);
            color: var(--text-color);
          }
        }

        & hr {
          border: none;
          margin-block: var(--root-size);
          height: 1px;
          background: var(--subtle-grey);
        }

        & small {
          color: var(--text-color-faint);
          font-size: var(--text-copy-xxs);
          font-style: italic;
        }

        & hr ~ small:first-of-type {
          display: block;
          margin-top: var(--root-size);
        }
      }
    }

    & h4 {
      --heading-color: var(--text-color);

      font-size: var(--text-copy-s);
    }
  }

  &:not(:has(section#hero)) {
    & > .container--grid {
      grid-row: 1 / 3;
      margin-top: calc(var(--breadcrumbs-height) + 10px);

      &.no-breadcrumb {
        margin-top: 0;
      }
    }

    & > nav {
      grid-row: 1 / 2;
    }
  }
}
body.width-small > main {
  & > .container--grid {
    @media (width >= 48rem) {
      grid-column: 5 / -5;
    }
  }
}
body.with_sidebar {
  & section#hero h1 {
    grid-column: 7 / -5;
  }

  & .container--grid {
    grid-column: 7 / -2;
  }
}
body aside {
  --sidebar-offset: calc(var(--header-height) + var(--menu-height));

  grid-column: 2 / 6;
  grid-row: 1 / -1;
  position: relative;
  translate: 0 var(--breadcrumbs-height);

  & > div#sidebar {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    padding-inline: var(--root-size);
    padding-bottom: var(--root-size);
    background: var(--grey);
    position: -webkit-sticky;
    position: sticky;
    top: var(--sidebar-offset);

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100dvh;
      background: var(--grey);
    }
  }
}
body > footer {
  grid-column: 1 / -1;
  grid-row: -2 / span 1;
  width: 100dvw;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto auto;
  z-index: 0;
  background: var(--white);
  border-top: var(--breadcrumbs-height) solid var(--white);
  overflow: hidden;

  & div#footer_nav {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
    background: var(--brand-color);

    & details {
      border-top: 1px solid var(--brand-color-mid);

      @media (width >= 48rem) {
        border-top: none;
      }

      @media (width >= 64rem) {
        grid-column: auto / span 5;
      }

      & summary {
        padding-block: var(--padding-small);
        padding-inline: 0;
        cursor: pointer;
        pointer-events: unset;
        position: relative;

        @media (width >= 48rem) {
          pointer-events: none;
          cursor: default;
        }

        .icon_dot {
          width: var(--small-icon-dot-height);
          height: var(--small-icon-dot-height);
          background-color: var(--white);

          @media (width >= 48rem) {
            display: none;
          }
        }
      }

      /* Mobile: hide content unless open */

      &:not([open]) > :not(summary) {
        display: none;

        @media (width >= 48rem) {
          display: block;
        }
      }

      /* Desktop: always show content */
      @media (width >= 48rem) {
        &:not([open]) > :not(summary) {
          display: block;
        }
      }

      &.footer_socials {
        & ul {
          display: flex;
          gap: var(--root-size);
          padding-block: var(--text-copy-xs);

          & img {
            height: var(--social-icons-height);
            aspect-ratio: 1;
          }
        }
      }
    }
    .footer_first_row {
      grid-column: 2 / -2;
      grid-row: 1 / 2;
      display: flex;
      flex-direction: column; /* Mobile: stack vertically */
      gap: var(--root-size);

      @media (width >= 64rem) {
        flex-direction: row; /* Desktop: side by side */
        gap: var(--col-gap);
        border-bottom: 1px solid var(--brand-color-mid);
      }

      .personal_advice {
        gap: var(--mini-spacing);
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid var(--brand-color-mid);
        padding-top: 20px;

        @media (width >= 64rem) {
          flex-shrink: 0;
          gap: var(--col-gap);
          width: calc(50% - var(--col-gap) / 2);
          border-bottom: none;
          padding-top: 0;
        }

        & .personal_advice_img {
          width: 167px;
          flex-shrink: 0;
          align-self: end;

          @media (width >= 48rem) {
            width: 230px;
          }

          img {
            max-width: 167px;
            height: auto;
            width: 100%;
            -o-object-fit: contain;
               object-fit: contain;
            -o-object-position: center;
               object-position: center;

            @media (width >= 48rem) {
              max-width: 200px;
              height: 100%;
              width: auto;
              -o-object-position: left bottom;
                 object-position: left bottom;
            }
          }
        }

        & .personal_advice_text {
          flex: 1;
          display: flex;
          justify-content: center;
          flex-direction: column;
          gap: var(--spacing);

          .cta {
            @media (width < 48rem) {
              font-size: var(--text-copy-xs);
            }
          }

          @media (width >= 64rem) {
            width: 50%;
          }
        }
      }

      #newsletter_signup {
        width: 100%;

        @media (width >= 64rem) {
          padding: 0;
        }

        & #newsletter_signup_form {
          input, select, button {
            width: 100%;
            font-size: var(--text-copy-xs);
          }

          select {
            -webkit-appearance: menulist;
               -moz-appearance: menulist;
                    appearance: menulist;
          }

          @media (width >= 64rem) {
            .preferences, .submit_button {
              width: 150px;
            }
          }
        }
      }
    }

    .footer_second_row {
      margin-top: var(--root-size);
      grid-column: 2 / -2;
      grid-row: 2 / 3;
      display: flex;
      flex-direction: column; /* Mobile: stacked accordion */

      @media (width >= 64rem) {
        margin-top: var(--gutter);
        display: grid;
        grid-template-columns: subgrid;
      }

      .footer_nav_title {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        font-size: var(--text-subheading-size);
        font-weight: 700;
        margin-top: var(--root-size);
        margin-bottom: var(--root-size);

        @media (width >= 48rem) {
          display: none;
        }
      }

      .footer_second_row_inner {
        display: flex;
        flex-direction: column; /* Mobile: stacked accordion */
        grid-column: 1 / -1;
        grid-row: 1 / auto;

        @media (width >= 48rem) {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-row-gap: var(--spacing);
          padding-bottom: 20px;
        }

        @media (width >= 64rem) {
          grid-template-columns: subgrid;
          padding-bottom: 0;
        }



      }

    }
  }

  & div#signoff {
    grid-column: 1 / -1;
    grid-row: 2 / span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--text-heading-size);
    border-top: 1px solid var(--grey);

    & svg {
      width: 171px;
      height: auto;
    }

    & #signoff_links {
      display: grid;
      gap: var(--mini-spacing) var(--tiny-spacing);
      grid-template-columns: repeat(3, auto);
      place-items: center;

      @media (width >= 64rem) {
        display: flex;
        align-items: center;
        gap: var(--text-subheading-size);
      }

      & a {
        display: block;
        grid-column: auto / span 1;
        grid-row: 1 / 2;
      }

      & span {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2 / 3;
      }
    }
  }

  & div#footer_nav + div#signoff {
    border-top: none;
  }

  & div#reviews {
    grid-column: 1 / -1;
    grid-row: 3 / span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--grey);

    & > p {
      display: flex;
      align-items: center;

      & svg {
        --empty-color: var(--grey);
        --filled-color: gold;

        position: relative;
        height: var(--review-stars-height);
        aspect-ratio: 5/ 1;
      }
    }
  }
}
body.checkout > footer {
  grid-template-rows: auto auto;

  & div#signoff,
  & div#reviews {
    grid-row: auto;
  }
}
/* Grid is based on divisors of 20, so 2, 4, 5 and 10   */
[class*="subgrid"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;

  /* first text elements always span full width */
  > h1, > h2, > h3, > h4, > h5, > h6, > p, ul, > ol {
    grid-column: 1 / -1;
  }

  > .span_grid, .fullwidth.subgrid {
    grid-column: 1 / -1;
  }

  &[class*='-2cols'] > * {
    grid-column: auto / span 10;
  }

  &[class*='-4cols'] > * {
    grid-column: auto / span 5;
  }

  &[class*='-5cols'] {
    & > * {
      grid-template-rows: repeat(3, auto);

      @media (width >= 48rem) {
        grid-template-rows: auto;
      }
    }

    /* Mobile-first: 2 columns on small screens */

    &:has(.min-w-\[250px\]) {
      grid-template-columns: repeat(2, 1fr);

      @media (width >= 48rem) {
        grid-template-columns: repeat(5, minmax(250px, 1fr));
      }
    }

  }

  &[class*='-10cols'] > * {
    grid-column: auto / span 2;
  }

  /* add the media breakpoints for the subgrid */


  &[class*='-cardrow'] {
    grid-template-rows: 1fr auto;
  }

  &.one_third {
    grid-column: auto / span round(up, calc(var(--col-count) * 0.33), 1);
  }

  &.two_thirds {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.66), 1);
  }

  &.half {
    grid-column: auto / span calc(var(--col-count) / 2);
  }

  &.one_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.2), 1);
  }

  &.two_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.4), 1);
  }

  &.three_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.6), 1);
  }

  &.four_fifth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.8), 1);
  }

  &.one_fourth {
    grid-column: auto / span calc(var(--col-count) / 4);
  }

  &.three_fourth {
    grid-column: auto / span round(down, calc(var(--col-count) * 0.75), 1);
  }

  /*
  In some cases, like a content block with three one-thirds, using subgrid just doesn't play out nicely
  So, instead, let's use flex as a fallback
   */

  .flexed_grid {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--col-gap);

    & > * {
      flex: 1;
    }
  }
}
/* Grid wrapper */
.row {
  /* fit it into grid setup from main site */
  grid-column: 2 / -2;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  display: flex;
  gap: var(--col-gap);
  flex-direction: column;

  @media (width >= 64rem) {
    flex-direction: row;
  }

  > * {
    white-space: normal; /* this is otherwise inheriting the nowrap */
  }

  /* Ensure full width in content blocks */

  .element & {
    grid-column: 1 / -1;
  }

  &.breakout {
    grid-auto-columns: 1fr !important;

    &:has( > .w-1\/5) {
      grid-template-columns: repeat(5, 1fr);
    }

    &:has( > .w-1\/4) {
      grid-template-columns: repeat(4, 1fr);
    }

    &:has( > .w-1\/3) {
      grid-template-columns: repeat(3, 1fr);
    }

    &:has( > .w-1\/2) {
      grid-template-columns: repeat(2, 1fr);
    }

    .w-1\/5 {
      width: 100%;
    }

    .w-1\/4 {
      width: 100%;
      min-width: 200px;
    }

    .w-1\/3 {
      width: 100%;
      min-width: 150px;
    }

    .w-1\/2 {
      width: 100%;
      min-width: 100px;
    }


  }

  .row {
    display: block;
  }
}
/* Font variants */
.font-bold {
  font-weight: 700;
}
.font-normal {
  font-weight: 400;
}
.font-light {
  font-weight: 300;
}
.font-thin {
  font-weight: 200;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-xs {
  font-size: var(--text-copy-xs);
}
.text-sm {
  font-size: var(--text-copy-s);
}
.text-base {
  font-size: var(--text-copy-m);
}
.text-lg {
  font-size: var(--text-copy-l);
}
.text-xl {
  font-size: var(--text-heading-size);
}
.text-2xl {
  font-size: var(--text-title-size);
}
/* Tailwind-style fractional widths */
.min-w-\[250px\] {
  min-width: 250px;
}
.min-w-\[230px\] {
  min-width: 230px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.w-\[50px\] {
  width: 50px;
}
.w-\[75px\] {
  width: 75px;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[250px\] {
  width: 250px;
}
.w-\[300px\] {
  width: 300px;
}
/* Full width */
.w-full {
  width: 100%;
}
/* Halves */
.w-1\/2 {
  width: 50%;
}
/* Thirds */
.w-1\/3 {
  width: 33.333333%;
}
.w-2\/3 {
  width: 66.666667%;
}
/* Quarters */
.w-1\/4 {
  width: 25%;
}
.w-2\/4 {
  width: 50%;
}
.w-3\/4 {
  width: 75%;
}
/* Fifths */
.w-1\/5 {
  width: 20%;
}
.w-2\/5 {
  width: 40%;
}
.w-3\/5 {
  width: 60%;
}
.w-4\/5 {
  width: 80%;
}
/* Sixths */
.w-1\/6 {
  width: 16.666667%;
}
.w-2\/6 {
  width: 33.333333%;
}
.w-3\/6 {
  width: 50%;
}
.w-4\/6 {
  width: 66.666667%;
}
.w-5\/6 {
  width: 83.333333%;
}
/* Twelfths (preserving compatibility) */
.w-1\/12 {
  width: 8.333333%;
}
.w-2\/12 {
  width: 16.666667%;
}
.w-3\/12 {
  width: 25%;
}
.w-4\/12 {
  width: 33.333333%;
}
.w-5\/12 {
  width: 41.666667%;
}
.w-6\/12 {
  width: 50%;
}
.w-7\/12 {
  width: 58.333333%;
}
.w-8\/12 {
  width: 66.666667%;
}
.w-9\/12 {
  width: 75%;
}
.w-10\/12 {
  width: 83.333333%;
}
.w-11\/12 {
  width: 91.666667%;
}
.w-12\/12 {
  width: 100%;
}
/* Auto sizing */
.w-auto {
  width: auto;
}
/* Container-based widths */
.w-3xs {
  width: var(--container-3xs);
}
.w-2xs {
  width: var(--container-2xs);
}
.w-xs {
  width: var(--container-xs);
}
.w-sm {
  width: var(--container-sm);
}
.w-md {
  width: var(--container-md);
}
.w-lg {
  width: var(--container-lg);
}
.w-xl {
  width: var(--container-xl);
}
.w-2xl {
  width: var(--container-2xl);
}
.w-3xl {
  width: var(--container-3xl);
}
.w-4xl {
  width: var(--container-4xl);
}
.w-5xl {
  width: var(--container-5xl);
}
.w-6xl {
  width: var(--container-6xl);
}
.w-7xl {
  width: var(--container-7xl);
}
/* Special width utilities */
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.w-dvw {
  width: 100dvw;
}
.w-dvh {
  width: 100dvh;
}
.w-lvw {
  width: 100lvw;
}
.w-lvh {
  width: 100lvh;
}
.w-svw {
  width: 100svw;
}
.w-svh {
  width: 100svh;
}
.w-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.w-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.w-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
/* Size utilities (width and height) */
.size-auto {
  width: auto;
  height: auto;
}
.size-px {
  width: 1px;
  height: 1px;
}
.size-full {
  width: 100%;
  height: 100%;
}
.size-dvw {
  width: 100dvw;
  height: 100dvw;
}
.size-dvh {
  width: 100dvh;
  height: 100dvh;
}
.size-lvw {
  width: 100lvw;
  height: 100lvw;
}
.size-lvh {
  width: 100lvh;
  height: 100lvh;
}
.size-svw {
  width: 100svw;
  height: 100svw;
}
.size-svh {
  width: 100svh;
  height: 100svh;
}
.size-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
}
.size-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}
.size-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
/* Size utilities with spacing multipliers */
.size-0 {
  width: 0;
  height: 0;
}
.size-1 {
  width: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 1);
}
.size-2 {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
}
.size-3 {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}
.size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
.size-5 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
.size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.size-8 {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}
.size-10 {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}
.size-12 {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
}
.size-16 {
  width: calc(var(--spacing) * 16);
  height: calc(var(--spacing) * 16);
}
.size-20 {
  width: calc(var(--spacing) * 20);
  height: calc(var(--spacing) * 20);
}
.size-24 {
  width: calc(var(--spacing) * 24);
  height: calc(var(--spacing) * 24);
}
.size-32 {
  width: calc(var(--spacing) * 32);
  height: calc(var(--spacing) * 32);
}
.size-40 {
  width: calc(var(--spacing) * 40);
  height: calc(var(--spacing) * 40);
}
.size-48 {
  width: calc(var(--spacing) * 48);
  height: calc(var(--spacing) * 48);
}
.size-56 {
  width: calc(var(--spacing) * 56);
  height: calc(var(--spacing) * 56);
}
.size-64 {
  width: calc(var(--spacing) * 64);
  height: calc(var(--spacing) * 64);
}
/* Size utilities with fractions */
.size-1\/2 {
  width: 50%;
  height: 50%;
}
.size-1\/3 {
  width: 33.333333%;
  height: 33.333333%;
}
.size-2\/3 {
  width: 66.666667%;
  height: 66.666667%;
}
.size-1\/4 {
  width: 25%;
  height: 25%;
}
.size-3\/4 {
  width: 75%;
  height: 75%;
}
.size-1\/5 {
  width: 20%;
  height: 20%;
}
.size-2\/5 {
  width: 40%;
  height: 40%;
}
.size-3\/5 {
  width: 60%;
  height: 60%;
}
.size-4\/5 {
  width: 80%;
  height: 80%;
}
.size-1\/6 {
  width: 16.666667%;
  height: 16.666667%;
}
.size-5\/6 {
  width: 83.333333%;
  height: 83.333333%;
}
/* Border radius utilities */
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: var(--corner-size-small);
}
.rounded-md {
  border-radius: var(--corner-size-medium);
}
.rounded-lg {
  border-radius: var(--corner-size-large);
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
/* Background position utilities */
.bg-top-left {
  background-position: top left;
}
.bg-top {
  background-position: top;
}
.bg-top-right {
  background-position: top right;
}
.bg-left {
  background-position: left;
}
.bg-center {
  background-position: center;
}
.bg-right {
  background-position: right;
}
.bg-bottom-left {
  background-position: bottom left;
}
.bg-bottom {
  background-position: bottom;
}
.bg-bottom-right {
  background-position: bottom right;
}
.swiped\:rounded-none {
  .mobile_swipe & {
    @media (width < 48rem) {
      border-radius: 0;
    }
  }
}
.swiped\:rounded-sm {
  .mobile_swipe & {
    @media (width < 48rem) {
      border-radius: var(--corner-size-small);
    }
  }
}
.swiped\:rounded-md {
  .mobile_swipe & {
    @media (width < 48rem) {
      border-radius: var(--corner-size-medium);
    }
  }
}
.swiped\:rounded-lg {
  .mobile_swipe & {
    @media (width < 48rem) {
      border-radius: var(--corner-size-large);
    }
  }
}
/* Responsive border radius utilities - Small */
@media (width >= 40rem) {
  .sm\:rounded-none {
    border-radius: 0;
  }

  .sm\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .sm\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .sm\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .sm\:rounded {
    border-radius: 0.25rem;
  }

  .sm\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Medium */
@media (width >= 48rem) {
  .md\:rounded-none {
    border-radius: 0;
  }

  .md\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .md\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .md\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .md\:rounded {
    border-radius: 0.25rem;
  }

  .md\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Large */
@media (width >= 64rem) {
  .lg\:rounded-none {
    border-radius: 0;
  }

  .lg\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .lg\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .lg\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .lg\:rounded {
    border-radius: 0.25rem;
  }

  .lg\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Extra Large */
@media (width >= 80rem) {
  .xl\:rounded-none {
    border-radius: 0;
  }

  .xl\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .xl\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .xl\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .xl\:rounded {
    border-radius: 0.25rem;
  }

  .xl\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive border radius utilities - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:rounded-none {
    border-radius: 0;
  }

  .xxl\:rounded-sm {
    border-radius: var(--corner-size-small);
  }

  .xxl\:rounded-md {
    border-radius: var(--corner-size-medium);
  }

  .xxl\:rounded-lg {
    border-radius: var(--corner-size-large);
  }

  .xxl\:rounded {
    border-radius: 0.25rem;
  }

  .xxl\:rounded-full {
    border-radius: 9999px;
  }
}
/* Responsive variants - Small */
@media (width >= 40rem) {
  .sm\:w-full {
    width: 100%;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-1\/3 {
    width: 33.333333%;
  }

  .sm\:w-2\/3 {
    width: 66.666667%;
  }

  .sm\:w-1\/4 {
    width: 25%;
  }

  .sm\:w-2\/4 {
    width: 50%;
  }

  .sm\:w-3\/4 {
    width: 75%;
  }

  .sm\:w-1\/5 {
    width: 20%;
  }

  .sm\:w-2\/5 {
    width: 40%;
  }

  .sm\:w-3\/5 {
    width: 60%;
  }

  .sm\:w-4\/5 {
    width: 80%;
  }

  .sm\:w-1\/6 {
    width: 16.666667%;
  }

  .sm\:w-2\/6 {
    width: 33.333333%;
  }

  .sm\:w-3\/6 {
    width: 50%;
  }

  .sm\:w-4\/6 {
    width: 66.666667%;
  }

  .sm\:w-5\/6 {
    width: 83.333333%;
  }

  .sm\:w-1\/12 {
    width: 8.333333%;
  }

  .sm\:w-2\/12 {
    width: 16.666667%;
  }

  .sm\:w-3\/12 {
    width: 25%;
  }

  .sm\:w-4\/12 {
    width: 33.333333%;
  }

  .sm\:w-5\/12 {
    width: 41.666667%;
  }

  .sm\:w-6\/12 {
    width: 50%;
  }

  .sm\:w-7\/12 {
    width: 58.333333%;
  }

  .sm\:w-8\/12 {
    width: 66.666667%;
  }

  .sm\:w-9\/12 {
    width: 75%;
  }

  .sm\:w-10\/12 {
    width: 83.333333%;
  }

  .sm\:w-11\/12 {
    width: 91.666667%;
  }

  .sm\:w-12\/12 {
    width: 100%;
  }

  .sm\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Medium */
@media (width >= 48rem) {
  .md\:w-full {
    width: 100%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-2\/4 {
    width: 50%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-1\/5 {
    width: 20%;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

  .md\:w-4\/5 {
    width: 80%;
  }

  .md\:w-1\/6 {
    width: 16.666667%;
  }

  .md\:w-2\/6 {
    width: 33.333333%;
  }

  .md\:w-3\/6 {
    width: 50%;
  }

  .md\:w-4\/6 {
    width: 66.666667%;
  }

  .md\:w-5\/6 {
    width: 83.333333%;
  }

  .md\:w-1\/12 {
    width: 8.333333%;
  }

  .md\:w-2\/12 {
    width: 16.666667%;
  }

  .md\:w-3\/12 {
    width: 25%;
  }

  .md\:w-4\/12 {
    width: 33.333333%;
  }

  .md\:w-5\/12 {
    width: 41.666667%;
  }

  .md\:w-6\/12 {
    width: 50%;
  }

  .md\:w-7\/12 {
    width: 58.333333%;
  }

  .md\:w-8\/12 {
    width: 66.666667%;
  }

  .md\:w-9\/12 {
    width: 75%;
  }

  .md\:w-10\/12 {
    width: 83.333333%;
  }

  .md\:w-11\/12 {
    width: 91.666667%;
  }

  .md\:w-12\/12 {
    width: 100%;
  }

  .md\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Large */
@media (width >= 64rem) {
  .lg\:w-full {
    width: 100%;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-2\/3 {
    width: 66.666667%;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:w-2\/4 {
    width: 50%;
  }

  .lg\:w-3\/4 {
    width: 75%;
  }

  .lg\:w-1\/5 {
    width: 20%;
  }

  .lg\:w-2\/5 {
    width: 40%;
  }

  .lg\:w-3\/5 {
    width: 60%;
  }

  .lg\:w-4\/5 {
    width: 80%;
  }

  .lg\:w-1\/6 {
    width: 16.666667%;
  }

  .lg\:w-2\/6 {
    width: 33.333333%;
  }

  .lg\:w-3\/6 {
    width: 50%;
  }

  .lg\:w-4\/6 {
    width: 66.666667%;
  }

  .lg\:w-5\/6 {
    width: 83.333333%;
  }

  .lg\:w-1\/12 {
    width: 8.333333%;
  }

  .lg\:w-2\/12 {
    width: 16.666667%;
  }

  .lg\:w-3\/12 {
    width: 25%;
  }

  .lg\:w-4\/12 {
    width: 33.333333%;
  }

  .lg\:w-5\/12 {
    width: 41.666667%;
  }

  .lg\:w-6\/12 {
    width: 50%;
  }

  .lg\:w-7\/12 {
    width: 58.333333%;
  }

  .lg\:w-8\/12 {
    width: 66.666667%;
  }

  .lg\:w-9\/12 {
    width: 75%;
  }

  .lg\:w-10\/12 {
    width: 83.333333%;
  }

  .lg\:w-11\/12 {
    width: 91.666667%;
  }

  .lg\:w-12\/12 {
    width: 100%;
  }

  .lg\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Extra Large */
@media (width >= 80rem) {
  .xl\:w-full {
    width: 100%;
  }

  .xl\:w-1\/2 {
    width: 50%;
  }

  .xl\:w-1\/3 {
    width: 33.333333%;
  }

  .xl\:w-2\/3 {
    width: 66.666667%;
  }

  .xl\:w-1\/4 {
    width: 25%;
  }

  .xl\:w-2\/4 {
    width: 50%;
  }

  .xl\:w-3\/4 {
    width: 75%;
  }

  .xl\:w-1\/5 {
    width: 20%;
  }

  .xl\:w-2\/5 {
    width: 40%;
  }

  .xl\:w-3\/5 {
    width: 60%;
  }

  .xl\:w-4\/5 {
    width: 80%;
  }

  .xl\:w-1\/6 {
    width: 16.666667%;
  }

  .xl\:w-2\/6 {
    width: 33.333333%;
  }

  .xl\:w-3\/6 {
    width: 50%;
  }

  .xl\:w-4\/6 {
    width: 66.666667%;
  }

  .xl\:w-5\/6 {
    width: 83.333333%;
  }

  .xl\:w-1\/12 {
    width: 8.333333%;
  }

  .xl\:w-2\/12 {
    width: 16.666667%;
  }

  .xl\:w-3\/12 {
    width: 25%;
  }

  .xl\:w-4\/12 {
    width: 33.333333%;
  }

  .xl\:w-5\/12 {
    width: 41.666667%;
  }

  .xl\:w-6\/12 {
    width: 50%;
  }

  .xl\:w-7\/12 {
    width: 58.333333%;
  }

  .xl\:w-8\/12 {
    width: 66.666667%;
  }

  .xl\:w-9\/12 {
    width: 75%;
  }

  .xl\:w-10\/12 {
    width: 83.333333%;
  }

  .xl\:w-11\/12 {
    width: 91.666667%;
  }

  .xl\:w-12\/12 {
    width: 100%;
  }

  .xl\:w-auto {
    width: auto;
  }
}
/* Responsive variants - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:w-full {
    width: 100%;
  }

  .xxl\:w-1\/2 {
    width: 50%;
  }

  .xxl\:w-1\/3 {
    width: 33.333333%;
  }

  .xxl\:w-2\/3 {
    width: 66.666667%;
  }

  .xxl\:w-1\/4 {
    width: 25%;
  }

  .xxl\:w-2\/4 {
    width: 50%;
  }

  .xxl\:w-3\/4 {
    width: 75%;
  }

  .xxl\:w-1\/5 {
    width: 20%;
  }

  .xxl\:w-2\/5 {
    width: 40%;
  }

  .xxl\:w-3\/5 {
    width: 60%;
  }

  .xxl\:w-4\/5 {
    width: 80%;
  }

  .xxl\:w-1\/6 {
    width: 16.666667%;
  }

  .xxl\:w-2\/6 {
    width: 33.333333%;
  }

  .xxl\:w-3\/6 {
    width: 50%;
  }

  .xxl\:w-4\/6 {
    width: 66.666667%;
  }

  .xxl\:w-5\/6 {
    width: 83.333333%;
  }

  .xxl\:w-1\/12 {
    width: 8.333333%;
  }

  .xxl\:w-2\/12 {
    width: 16.666667%;
  }

  .xxl\:w-3\/12 {
    width: 25%;
  }

  .xxl\:w-4\/12 {
    width: 33.333333%;
  }

  .xxl\:w-5\/12 {
    width: 41.666667%;
  }

  .xxl\:w-6\/12 {
    width: 50%;
  }

  .xxl\:w-7\/12 {
    width: 58.333333%;
  }

  .xxl\:w-8\/12 {
    width: 66.666667%;
  }

  .xxl\:w-9\/12 {
    width: 75%;
  }

  .xxl\:w-10\/12 {
    width: 83.333333%;
  }

  .xxl\:w-11\/12 {
    width: 91.666667%;
  }

  .xxl\:w-12\/12 {
    width: 100%;
  }

  .xxl\:w-auto {
    width: auto;
  }
}
/* Responsive variants - 3XL */
@media (width >= 120rem) {
  .\33xl\:w-full {
    width: 100%;
  }

  .\33xl\:w-1\/2 {
    width: 50%;
  }

  .\33xl\:w-1\/3 {
    width: 33.333333%;
  }

  .\33xl\:w-2\/3 {
    width: 66.666667%;
  }

  .\33xl\:w-1\/4 {
    width: 25%;
  }

  .\33xl\:w-2\/4 {
    width: 50%;
  }

  .\33xl\:w-3\/4 {
    width: 75%;
  }

  .\33xl\:w-1\/5 {
    width: 20%;
  }

  .\33xl\:w-2\/5 {
    width: 40%;
  }

  .\33xl\:w-3\/5 {
    width: 60%;
  }

  .\33xl\:w-4\/5 {
    width: 80%;
  }

  .\33xl\:w-1\/6 {
    width: 16.666667%;
  }

  .\33xl\:w-2\/6 {
    width: 33.333333%;
  }

  .\33xl\:w-3\/6 {
    width: 50%;
  }

  .\33xl\:w-4\/6 {
    width: 66.666667%;
  }

  .\33xl\:w-5\/6 {
    width: 83.333333%;
  }

  .\33xl\:w-1\/12 {
    width: 8.333333%;
  }

  .\33xl\:w-2\/12 {
    width: 16.666667%;
  }

  .\33xl\:w-3\/12 {
    width: 25%;
  }

  .\33xl\:w-4\/12 {
    width: 33.333333%;
  }

  .\33xl\:w-5\/12 {
    width: 41.666667%;
  }

  .\33xl\:w-6\/12 {
    width: 50%;
  }

  .\33xl\:w-7\/12 {
    width: 58.333333%;
  }

  .\33xl\:w-8\/12 {
    width: 66.666667%;
  }

  .\33xl\:w-9\/12 {
    width: 75%;
  }

  .\33xl\:w-10\/12 {
    width: 83.333333%;
  }

  .\33xl\:w-11\/12 {
    width: 91.666667%;
  }

  .\33xl\:w-12\/12 {
    width: 100%;
  }

  .\33xl\:w-auto {
    width: auto;
  }
}
/* Responsive width utilities - XS */
@media (width >= 30rem) {
  .xs\:w-full {
    width: 100%;
  }

  .xs\:w-1\/2 {
    width: 50%;
  }

  .xs\:w-1\/3 {
    width: 33.333333%;
  }

  .xs\:w-2\/3 {
    width: 66.666667%;
  }

  .xs\:w-1\/4 {
    width: 25%;
  }

  .xs\:w-2\/4 {
    width: 50%;
  }

  .xs\:w-3\/4 {
    width: 75%;
  }

  .xs\:w-1\/5 {
    width: 20%;
  }

  .xs\:w-2\/5 {
    width: 40%;
  }

  .xs\:w-3\/5 {
    width: 60%;
  }

  .xs\:w-4\/5 {
    width: 80%;
  }

  .xs\:w-1\/6 {
    width: 16.666667%;
  }

  .xs\:w-2\/6 {
    width: 33.333333%;
  }

  .xs\:w-3\/6 {
    width: 50%;
  }

  .xs\:w-4\/6 {
    width: 66.666667%;
  }

  .xs\:w-5\/6 {
    width: 83.333333%;
  }

  .xs\:w-1\/12 {
    width: 8.333333%;
  }

  .xs\:w-2\/12 {
    width: 16.666667%;
  }

  .xs\:w-3\/12 {
    width: 25%;
  }

  .xs\:w-4\/12 {
    width: 33.333333%;
  }

  .xs\:w-5\/12 {
    width: 41.666667%;
  }

  .xs\:w-6\/12 {
    width: 50%;
  }

  .xs\:w-7\/12 {
    width: 58.333333%;
  }

  .xs\:w-8\/12 {
    width: 66.666667%;
  }

  .xs\:w-9\/12 {
    width: 75%;
  }

  .xs\:w-10\/12 {
    width: 83.333333%;
  }

  .xs\:w-11\/12 {
    width: 91.666667%;
  }

  .xs\:w-12\/12 {
    width: 100%;
  }

  .xs\:w-auto {
    width: auto;
  }
}
/* Responsive container widths and special widths */
@media (width >= 30rem) {
  .xs\:w-3xs {
    width: var(--container-3xs);
  }

  .xs\:w-2xs {
    width: var(--container-2xs);
  }

  .xs\:w-xs {
    width: var(--container-xs);
  }

  .xs\:w-sm {
    width: var(--container-sm);
  }

  .xs\:w-md {
    width: var(--container-md);
  }

  .xs\:w-lg {
    width: var(--container-lg);
  }

  .xs\:w-xl {
    width: var(--container-xl);
  }

  .xs\:w-2xl {
    width: var(--container-2xl);
  }

  .xs\:w-3xl {
    width: var(--container-3xl);
  }

  .xs\:w-4xl {
    width: var(--container-4xl);
  }

  .xs\:w-5xl {
    width: var(--container-5xl);
  }

  .xs\:w-6xl {
    width: var(--container-6xl);
  }

  .xs\:w-7xl {
    width: var(--container-7xl);
  }

  .xs\:w-px {
    width: 1px;
  }

  .xs\:w-screen {
    width: 100vw;
  }

  .xs\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .xs\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .xs\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 40rem) {
  .sm\:w-3xs {
    width: var(--container-3xs);
  }

  .sm\:w-2xs {
    width: var(--container-2xs);
  }

  .sm\:w-xs {
    width: var(--container-xs);
  }

  .sm\:w-sm {
    width: var(--container-sm);
  }

  .sm\:w-md {
    width: var(--container-md);
  }

  .sm\:w-lg {
    width: var(--container-lg);
  }

  .sm\:w-xl {
    width: var(--container-xl);
  }

  .sm\:w-2xl {
    width: var(--container-2xl);
  }

  .sm\:w-3xl {
    width: var(--container-3xl);
  }

  .sm\:w-4xl {
    width: var(--container-4xl);
  }

  .sm\:w-5xl {
    width: var(--container-5xl);
  }

  .sm\:w-6xl {
    width: var(--container-6xl);
  }

  .sm\:w-7xl {
    width: var(--container-7xl);
  }

  .sm\:w-px {
    width: 1px;
  }

  .sm\:w-screen {
    width: 100vw;
  }

  .sm\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .sm\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .sm\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 48rem) {
  .md\:w-3xs {
    width: var(--container-3xs);
  }

  .md\:w-2xs {
    width: var(--container-2xs);
  }

  .md\:w-xs {
    width: var(--container-xs);
  }

  .md\:w-sm {
    width: var(--container-sm);
  }

  .md\:w-md {
    width: var(--container-md);
  }

  .md\:w-lg {
    width: var(--container-lg);
  }

  .md\:w-xl {
    width: var(--container-xl);
  }

  .md\:w-2xl {
    width: var(--container-2xl);
  }

  .md\:w-3xl {
    width: var(--container-3xl);
  }

  .md\:w-4xl {
    width: var(--container-4xl);
  }

  .md\:w-5xl {
    width: var(--container-5xl);
  }

  .md\:w-6xl {
    width: var(--container-6xl);
  }

  .md\:w-7xl {
    width: var(--container-7xl);
  }

  .md\:w-px {
    width: 1px;
  }

  .md\:w-screen {
    width: 100vw;
  }

  .md\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .md\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .md\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 64rem) {
  .lg\:w-3xs {
    width: var(--container-3xs);
  }

  .lg\:w-2xs {
    width: var(--container-2xs);
  }

  .lg\:w-xs {
    width: var(--container-xs);
  }

  .lg\:w-sm {
    width: var(--container-sm);
  }

  .lg\:w-md {
    width: var(--container-md);
  }

  .lg\:w-lg {
    width: var(--container-lg);
  }

  .lg\:w-xl {
    width: var(--container-xl);
  }

  .lg\:w-2xl {
    width: var(--container-2xl);
  }

  .lg\:w-3xl {
    width: var(--container-3xl);
  }

  .lg\:w-4xl {
    width: var(--container-4xl);
  }

  .lg\:w-5xl {
    width: var(--container-5xl);
  }

  .lg\:w-6xl {
    width: var(--container-6xl);
  }

  .lg\:w-7xl {
    width: var(--container-7xl);
  }

  .lg\:w-px {
    width: 1px;
  }

  .lg\:w-screen {
    width: 100vw;
  }

  .lg\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .lg\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .lg\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 80rem) {
  .xl\:w-3xs {
    width: var(--container-3xs);
  }

  .xl\:w-2xs {
    width: var(--container-2xs);
  }

  .xl\:w-xs {
    width: var(--container-xs);
  }

  .xl\:w-sm {
    width: var(--container-sm);
  }

  .xl\:w-md {
    width: var(--container-md);
  }

  .xl\:w-lg {
    width: var(--container-lg);
  }

  .xl\:w-xl {
    width: var(--container-xl);
  }

  .xl\:w-2xl {
    width: var(--container-2xl);
  }

  .xl\:w-3xl {
    width: var(--container-3xl);
  }

  .xl\:w-4xl {
    width: var(--container-4xl);
  }

  .xl\:w-5xl {
    width: var(--container-5xl);
  }

  .xl\:w-6xl {
    width: var(--container-6xl);
  }

  .xl\:w-7xl {
    width: var(--container-7xl);
  }

  .xl\:w-px {
    width: 1px;
  }

  .xl\:w-screen {
    width: 100vw;
  }

  .xl\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .xl\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .xl\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 96rem) {
  .xxl\:w-3xs {
    width: var(--container-3xs);
  }

  .xxl\:w-2xs {
    width: var(--container-2xs);
  }

  .xxl\:w-xs {
    width: var(--container-xs);
  }

  .xxl\:w-sm {
    width: var(--container-sm);
  }

  .xxl\:w-md {
    width: var(--container-md);
  }

  .xxl\:w-lg {
    width: var(--container-lg);
  }

  .xxl\:w-xl {
    width: var(--container-xl);
  }

  .xxl\:w-2xl {
    width: var(--container-2xl);
  }

  .xxl\:w-3xl {
    width: var(--container-3xl);
  }

  .xxl\:w-4xl {
    width: var(--container-4xl);
  }

  .xxl\:w-5xl {
    width: var(--container-5xl);
  }

  .xxl\:w-6xl {
    width: var(--container-6xl);
  }

  .xxl\:w-7xl {
    width: var(--container-7xl);
  }

  .xxl\:w-px {
    width: 1px;
  }

  .xxl\:w-screen {
    width: 100vw;
  }

  .xxl\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .xxl\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .xxl\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (width >= 120rem) {
  .\33xl\:w-3xs {
    width: var(--container-3xs);
  }

  .\33xl\:w-2xs {
    width: var(--container-2xs);
  }

  .\33xl\:w-xs {
    width: var(--container-xs);
  }

  .\33xl\:w-sm {
    width: var(--container-sm);
  }

  .\33xl\:w-md {
    width: var(--container-md);
  }

  .\33xl\:w-lg {
    width: var(--container-lg);
  }

  .\33xl\:w-xl {
    width: var(--container-xl);
  }

  .\33xl\:w-2xl {
    width: var(--container-2xl);
  }

  .\33xl\:w-3xl {
    width: var(--container-3xl);
  }

  .\33xl\:w-4xl {
    width: var(--container-4xl);
  }

  .\33xl\:w-5xl {
    width: var(--container-5xl);
  }

  .\33xl\:w-6xl {
    width: var(--container-6xl);
  }

  .\33xl\:w-7xl {
    width: var(--container-7xl);
  }

  .\33xl\:w-px {
    width: 1px;
  }

  .\33xl\:w-screen {
    width: 100vw;
  }

  .\33xl\:w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }

  .\33xl\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .\33xl\:w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
/* Visibility utilities */
/* Display utilities - Base */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.list-item {
  display: list-item;
}
.hidden {
  display: none;
}
.hidden\! {
  display: none !important;
}
.text-nowrap {
  white-space: nowrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
/* Flex direction utilities - Base */
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
/* Responsive flex direction utilities - Extra Small */
@media (width >= 30rem) {
  .xs\:flex-row {
    flex-direction: row;
  }

  .xs\:flex-col {
    flex-direction: column;
  }

  .xs\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Small */
@media (width >= 40rem) {
  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Medium */
@media (width >= 48rem) {
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

}
/* Responsive flex direction utilities - Large */
@media (width >= 64rem) {
  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Extra Large */
@media (width >= 80rem) {
  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:flex-col {
    flex-direction: column;
  }

  .xl\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:flex-row {
    flex-direction: row;
  }

  .xxl\:flex-col {
    flex-direction: column;
  }

  .xxl\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive flex direction utilities - 3XL */
@media (width >= 120rem) {
  .\33xl\:flex-row {
    flex-direction: row;
  }

  .\33xl\:flex-col {
    flex-direction: column;
  }

  .\33xl\:flex-wrap {
    flex-wrap: wrap;
  }
}
/* Responsive display utilities - Extra Small */
@media (width >= 30rem) {
  .xs\:block {
    display: block;
  }

  .xs\:inline-block {
    display: inline-block;
  }

  .xs\:inline {
    display: inline;
  }

  .xs\:flex {
    display: flex;
  }

  .xs\:inline-flex {
    display: inline-flex;
  }

  .xs\:grid {
    display: grid;
  }

  .xs\:inline-grid {
    display: inline-grid;
  }

  .xs\:contents {
    display: contents;
  }

  .xs\:list-item {
    display: list-item;
  }

  .xs\:hidden {
    display: none;
  }

  .xs\:table {
    display: table;
  }

  .xs\:table-caption {
    display: table-caption;
  }

  .xs\:table-cell {
    display: table-cell;
  }

  .xs\:table-column {
    display: table-column;
  }

  .xs\:table-column-group {
    display: table-column-group;
  }

  .xs\:table-footer-group {
    display: table-footer-group;
  }

  .xs\:table-header-group {
    display: table-header-group;
  }

  .xs\:table-row-group {
    display: table-row-group;
  }

  .xs\:table-row {
    display: table-row;
  }

  .xs\:flow-root {
    display: flow-root;
  }
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-column {
  display: table-column;
}
.table-column-group {
  display: table-column-group;
}
.table-footer-group {
  display: table-footer-group;
}
.table-header-group {
  display: table-header-group;
}
.table-row-group {
  display: table-row-group;
}
.table-row {
  display: table-row;
}
.flow-root { /* never use a clearfix again... */
  display: flow-root;
}
.tiny-spacing {
  gap: var(--tiny-spacing);
}
.spacing {
  gap: var(--spacing);
}
.big-spacing {
  gap: var(--big-spacing);
}
.huge-spacing {
  gap: var(--huge-spacing);
}
.mega-spacing {
  gap: var(--mega-spacing);
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
/* Responsive display utilities - Small */
@media (width >= 40rem) {
  .sm\:block {
    display: block;
  }

  .sm\:block\! {
    display: block !important;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:inline-grid {
    display: inline-grid;
  }

  .sm\:contents {
    display: contents;
  }

  .sm\:list-item {
    display: list-item;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:hidden\! {
    display: none !important;
  }

  .sm\:table {
    display: table;
  }

  .sm\:table-caption {
    display: table-caption;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:table-column {
    display: table-column;
  }

  .sm\:table-column-group {
    display: table-column-group;
  }

  .sm\:table-footer-group {
    display: table-footer-group;
  }

  .sm\:table-header-group {
    display: table-header-group;
  }

  .sm\:table-row-group {
    display: table-row-group;
  }

  .sm\:table-row {
    display: table-row;
  }

  .sm\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Medium */
@media (width >= 48rem) {
  .md\:block {
    display: block;
  }

  .md\:block\! {
    display: block !important;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:inline-grid {
    display: inline-grid;
  }

  .md\:contents {
    display: contents;
  }

  .md\:list-item {
    display: list-item;
  }

  .md\:hidden {
    display: none;
  }

  .md\:hidden\! {
    display: none !important;
  }

  .md\:table {
    display: table;
  }

  .md\:table-caption {
    display: table-caption;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:table-column {
    display: table-column;
  }

  .md\:table-column-group {
    display: table-column-group;
  }

  .md\:table-footer-group {
    display: table-footer-group;
  }

  .md\:table-header-group {
    display: table-header-group;
  }

  .md\:table-row-group {
    display: table-row-group;
  }

  .md\:table-row {
    display: table-row;
  }

  .md\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Large */
@media (width >= 64rem) {
  .lg\:block {
    display: block;
  }

  .lg\:block\! {
    display: block !important;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:inline-grid {
    display: inline-grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:list-item {
    display: list-item;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:hidden\! {
    display: none !important;
  }

  .lg\:table {
    display: table;
  }

  .lg\:table-caption {
    display: table-caption;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:table-column {
    display: table-column;
  }

  .lg\:table-column-group {
    display: table-column-group;
  }

  .lg\:table-footer-group {
    display: table-footer-group;
  }

  .lg\:table-header-group {
    display: table-header-group;
  }

  .lg\:table-row-group {
    display: table-row-group;
  }

  .lg\:table-row {
    display: table-row;
  }

  .lg\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Extra Large */
@media (width >= 80rem) {
  .xl\:block {
    display: block;
  }

  .xl\:inline-block {
    display: inline-block;
  }

  .xl\:inline {
    display: inline;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:inline-flex {
    display: inline-flex;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:inline-grid {
    display: inline-grid;
  }

  .xl\:contents {
    display: contents;
  }

  .xl\:list-item {
    display: list-item;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:table {
    display: table;
  }

  .xl\:table-caption {
    display: table-caption;
  }

  .xl\:table-cell {
    display: table-cell;
  }

  .xl\:table-column {
    display: table-column;
  }

  .xl\:table-column-group {
    display: table-column-group;
  }

  .xl\:table-footer-group {
    display: table-footer-group;
  }

  .xl\:table-header-group {
    display: table-header-group;
  }

  .xl\:table-row-group {
    display: table-row-group;
  }

  .xl\:table-row {
    display: table-row;
  }

  .xl\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - Extra Extra Large */
@media (width >= 96rem) {
  .xxl\:block {
    display: block;
  }

  .xxl\:inline-block {
    display: inline-block;
  }

  .xxl\:inline {
    display: inline;
  }

  .xxl\:flex {
    display: flex;
  }

  .xxl\:inline-flex {
    display: inline-flex;
  }

  .xxl\:grid {
    display: grid;
  }

  .xxl\:inline-grid {
    display: inline-grid;
  }

  .xxl\:contents {
    display: contents;
  }

  .xxl\:list-item {
    display: list-item;
  }

  .xxl\:hidden {
    display: none;
  }

  .xxl\:table {
    display: table;
  }

  .xxl\:table-caption {
    display: table-caption;
  }

  .xxl\:table-cell {
    display: table-cell;
  }

  .xxl\:table-column {
    display: table-column;
  }

  .xxl\:table-column-group {
    display: table-column-group;
  }

  .xxl\:table-footer-group {
    display: table-footer-group;
  }

  .xxl\:table-header-group {
    display: table-header-group;
  }

  .xxl\:table-row-group {
    display: table-row-group;
  }

  .xxl\:table-row {
    display: table-row;
  }

  .xxl\:flow-root {
    display: flow-root;
  }
}
/* Responsive display utilities - 3XL */
@media (width >= 120rem) {
  .\33xl\:block {
    display: block;
  }

  .\33xl\:inline-block {
    display: inline-block;
  }

  .\33xl\:inline {
    display: inline;
  }

  .\33xl\:flex {
    display: flex;
  }

  .\33xl\:inline-flex {
    display: inline-flex;
  }

  .\33xl\:grid {
    display: grid;
  }

  .\33xl\:inline-grid {
    display: inline-grid;
  }

  .\33xl\:contents {
    display: contents;
  }

  .\33xl\:list-item {
    display: list-item;
  }

  .\33xl\:hidden {
    display: none;
  }

  .\33xl\:table {
    display: table;
  }

  .\33xl\:table-caption {
    display: table-caption;
  }

  .\33xl\:table-cell {
    display: table-cell;
  }

  .\33xl\:table-column {
    display: table-column;
  }

  .\33xl\:table-column-group {
    display: table-column-group;
  }

  .\33xl\:table-footer-group {
    display: table-footer-group;
  }

  .\33xl\:table-header-group {
    display: table-header-group;
  }

  .\33xl\:table-row-group {
    display: table-row-group;
  }

  .\33xl\:table-row {
    display: table-row;
  }

  .\33xl\:flow-root {
    display: flow-root;
  }
}
/* Visibility helpers - Show/Hide at specific breakpoints */
.sm-only {
  @media (width >= 40rem) {
    display: none;
  }
}
.md-only {
  @media (width < 40rem),(width >= 48rem) {
    display: none;
  }
}
.lg-only {
  @media (width < 48rem),(width >= 64rem) {
    display: none;
  }
}
.xl-only {
  @media (width < 64rem),(width >= 80rem) {
    display: none;
  }
}
.xxl-only {
  @media (width < 80rem) {
    display: none;
  }
}
/* Hide below specific breakpoints */
.hide-below-sm {
  @media (width < 40rem) {
    display: none;
  }
}
.hide-below-md {
  @media (width < 48rem) {
    display: none;
  }
}
.hide-below-lg {
  @media (width < 64rem) {
    display: none;
  }
}
.hide-below-xl {
  @media (width < 80rem) {
    display: none;
  }
}
.hide-below-xxl {
  @media (width < 96rem) {
    display: none;
  }
}
/* Hide above specific breakpoints */
.hide-above-sm {
  @media (width >= 40rem) {
    display: none;
  }
}
.hide-above-md {
  @media (width >= 48rem) {
    display: none;
  }
}
.hide-above-lg {
  @media (width >= 64rem) {
    display: none;
  }
}
.hide-above-xl {
  @media (width >= 80rem) {
    display: none;
  }
}
.hide-above-xxl {
  @media (width >= 96rem) {
    display: none;
  }
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.top-0 {
  top: 0;
}
.top-below-header {
  top: var(--below-header);
}
.bg-white {
  background-color: var(--white);
}
/* Utility for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
/* Float utilities - Tailwind style */
/* Base float utilities */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}
/* xs breakpoint (≥480px) */
@media (width >= 30rem) {
  .xs\:float-left {
    float: left;
  }

  .xs\:float-right {
    float: right;
  }

  .xs\:float-none {
    float: none;
  }
}
/* sm breakpoint (≥640px) */
@media (width >= 40rem) {
  .sm\:float-left {
    float: left;
  }

  .sm\:float-right {
    float: right;
  }

  .sm\:float-none {
    float: none;
  }
}
/* md breakpoint (≥768px) */
@media (width >= 48rem) {
  .md\:float-left {
    float: left;
  }

  .md\:float-right {
    float: right;
  }

  .md\:float-none {
    float: none;
  }
}
/* lg breakpoint (≥1024px) */
@media (width >= 64rem) {
  .lg\:float-left {
    float: left;
  }

  .lg\:float-right {
    float: right;
  }

  .lg\:float-none {
    float: none;
  }
}
/* xl breakpoint (≥1280px) */
@media (width >= 80rem) {
  .xl\:float-left {
    float: left;
  }

  .xl\:float-right {
    float: right;
  }

  .xl\:float-none {
    float: none;
  }
}
/* xxl breakpoint (≥1536px) */
@media (width >= 96rem) {
  .xxl\:float-left {
    float: left;
  }

  .xxl\:float-right {
    float: right;
  }

  .xxl\:float-none {
    float: none;
  }
}
/* 3xl breakpoint (≥1920px) */
@media (width >= 120rem) {
  .\33xl\:float-left {
    float: left;
  }

  .\33xl\:float-right {
    float: right;
  }

  .\33xl\:float-none {
    float: none;
  }
}
.align-baseline {
  vertical-align: baseline;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-bottom {
  vertical-align: bottom;
}
:root {
  font-family: var(--brand-regular-typeface), sans-serif;
  font-size: var(--root-size);
  color: var(--text-color);
}
body {
  font-size: var(--font-size);
}
h1, h2, h3 {
  font-family: var(--heading-typeface), sans-serif;
  color: var(--heading-color);
}
h4, h5, h6 {
  font-family: var(--brand-typeface), sans-serif;
  color: var(--heading-color);
}
h5, h6 {
  font-size: var(--text-copy-s);
  font-weight: 300;
}
h1 {
  font-size: var(--text-title-size);
}
h2 {
  font-size: var(--text-heading-size);
}
h3 {
  font-size: var(--text-subheading-size);
}
h4 {
  font-size: var(--root-size);
  font-weight: 700;
}
/* Heading classes - allows styling as a heading while using semantic tags */
.h1, .h2, .h3 {
  font-family: var(--heading-typeface), sans-serif;
  color: var(--heading-color);
  font-weight: bold;
}
.h4, .h5, .h6 {
  font-family: var(--brand-typeface), sans-serif;
  color: var(--heading-color);
}
.h5, .h6 {
  font-size: var(--text-copy-s);
  font-weight: 300;
}
.h1 {
  font-size: var(--text-title-size);
}
.h2 {
  font-size: var(--text-heading-size);
}
.h3 {
  font-size: var(--text-subheading-size);
}
.h4 {
  font-size: var(--root-size);
  font-weight: 700;
}
ul, ol, li, p,
blockquote, figcaption, dt, dd, .dialog_content {
  color: var(--text-color);
}
.font-regular {
  font-weight: 400;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
/* Color utility classes */
.text-dark-blue {
  color: var(--dark-blue);
}
.text-orange {
  color: var(--orange);
}
.text-green {
  color: var(--green);
}
.text-white {
  color: var(--white);
}
.text-grey {
  color: var(--grey);
}
.text-subtle-grey {
  color: var(--subtle-grey);
}
.text-black {
  color: var(--black);
}
.text-brown {
  color: var(--brown);
}
.text-brand {
  color: var(--brand-color);
}
.text-blue {
  color: var(--blue);
}
.text-brand-mid {
  color: var(--brand-color-mid);
}
.text-brand-light {
  color: var(--brand-color-light);
}
.text-brand-faint {
  color: var(--brand-color-faint);
}
.text-regular {
  color: var(--text-color);
}
.text-light {
  color: var(--text-color-light);
}
.text-faint {
  color: var(--text-color-faint);
}
nav ul.ticks_list {
  --text-color: var(--text-color-faint);
  font-size: var(--text-copy-xs);
}
section#hero {
  --heading-color: var(--white);
  --text-color: var(--white);

  & .hero_title {
    font-family: var(--brand-headline), system-ui, sans-serif;
    line-height: 125%;
    font-size: var(--text-hero-size-mobile);

    & strong {
      line-height: var(--line-height-hero-size-mobile);
      font-weight: 700;

      @media (width >= 64rem) {
        font-size: var(--text-hero-size);
        line-height: var(--line-height-hero-size);
      }
    }
  }

  & > .button.cta {
    font-size: var(--text-subheading-size);
  }
}
.page_subtitle {
  color: var(--blue);
  font-weight: 300;
  font-size: var(--text-subheading-size);
  margin-bottom: var(--tiny-spacing);
}
.page_title {
  font-weight: 700;
  font-size: var(--text-title-size);
}
#footer_nav {
  --heading-color: var(--white);
  --text-color: var(--white);

  color: var(--text-color);

  & .personal_advice_header {
    font-size: var(--text-copy-l);
    @media (width >= 64rem) {
      font-size: var(--text-subheading-size);
    }
  }

  & summary {
    @media (width >= 48rem) {
      font-weight: 700;
      font-size: var(--text-copy-l);
    }
  }

  & li {
    font-size: var(--text-copy-s);
    padding-block: 0.25rem;
  }
}
#signoff {
  --text-color: var(--brand-color);
  color: var(--text-color);
  font-size: var(--text-copy-xs);

  & #signoff_links span {
    color: var(--text-color-light);
  }
}
#reviews {
  font-size: var(--text-copy-xxs);

  & > p:nth-of-type(2) {
    color: var(--text-color-light);
  }
}
#menu_drawer {
  .menu_title {
    color: var(--text-color);
    font-weight: bold;
    font-size: var(--root-size);
  }
}
/* Typography for content */
.typography {

  .smaller {
    font-size: calc(var(--root-size) * 0.9);
  }

  p:has(+ ul, + ol) {
    margin-bottom: calc(var(--root-size) * 0.5);
  }

  p:has(+ p, + h2, + h3, + h4, + h5, + h6),
  ul:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  ol:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h2:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h3:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h4:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h5:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6),
  h6:has(+ p, + ul, + ol, + h2, + h3, + h4, + h5, + h6) {
    margin-bottom: var(--root-size);

    &.smaller {
      margin-bottom: calc(var(--root-size) * 0.5);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
  }

  p, ul, li {
    a:not(.button):not(.cta) {
      color: var(--brand-color);
    }
  }

  ul {
    list-style-type: disc;
  }

  ol, ul {
    /* ticks_list defined in components.css */
    list-style-position: outside;
    padding-left: 16px;
    line-height: var(--line-height);

    li {
      padding-left: var(--text-copy-xxs);

      + li {
        /*margin-top: var(--tiny-spacing);*/
      }
    }
  }

  .left {
    float: left;
    margin: 0 1em 1em 0;
  }

  .right {
    float: right;
    margin: 0 0 1em 1em;
  }

  .center {
    display: block;
    margin: 0 auto 0 auto;
    text-align: center;
  }

  .leftAlone {
    float: left;
    margin-right: 100%;
  }

  .rightAlone {
    float: right;
    margin-left: 100%;
  }

  img {
    -o-object-fit: contain;
       object-fit: contain;
    height: auto;

    &.w-\[50px\] {
      width: 50px;
    }

    &.w-\[75px\] {
      width: 75px;
    }

    &.w-\[100px\] {
      width: 100px;
    }

    &.w-\[150px\] {
      width: 150px;
    }

    &.w-\[200px\] {
      width: 200px;
    }

    &.w-\[250px\] {
      width: 250px;
    }

    &.w-\[300px\] {
      width: 300px;
    }

    &.w-full {
      width: 100%;
    }

    &.w-half {
      width: 50%;
    }

    &.w-one_third {
      width: 33%;
    }

    &.w-two_thirds {
      width: 66%;
    }

    &.w-one_fourth {
      width: 25%;
    }

    &.w-two_fourths {
      width: 50%;
    }

    &.w-three_fourths {
      width: 75%;
    }

    &.w-one_fifth {
      width: 20%;
    }

    &.w-two_fifths {
      width: 40%;
    }

    &.w-three_fifths {
      width: 60%;
    }

    &.w-four_fifths {
      width: 80%;
    }

  }

}
/* / Typography for content */
/*
* Generic HTML tag styling first
*/
/* Hyperlinks */
a {
  --chevron-color: var(--brand-color);
  --cta-color: var(--cta-blue);

  /*padding-block: 0.2rem;*/
  color: currentcolor;
  text-decoration: none;

  &:visited {
    color: currentcolor;
  }

  &:hover {
    color: var(--brand-color);
  }

  &.classic {
    color: var(--brand-color);
  }

  &.underline {
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

  &.monotone {
    --chevron-color: currentcolor;

    &:hover {
      color: currentcolor;
      text-decoration: underline;
    }
  }

  &.chevron::before {
    content: "⟩";
    margin-inline: var(--text-copy-xxs);
    font-weight: 900;
    color: var(--chevron-color);
  }

  &.fallback_link:not(:hover) {
    text-decoration: underline;
  }

  &.with_chevron_dot {
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--text-copy-xxs);

    &::before {
      content: '⟩';
      width: var(--text-copy-l);
      height: var(--text-copy-l);
      font-size: var(--text-copy-xs);
      font-weight: 900;
      color: var(--brand-color);
      background: var(--brand-color-light);
      border-radius: 999px;
      display: grid;
      place-items: center;
    }
  }

  &.small {
    font-size: var(--text-copy-s);
  }

}
/* not in a button */
p a:not([class]),
ul a:not([class]),
ol a:not([class]) {
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}
button.regular {
  background: transparent;
  display: inline-block;
  text-align: start;

  &.link_regular {
    color: var(--brand-color);
    text-decoration: underline;
  }
}
:is(.button, .cta, button:not(.plain):not(.regular), input[type="submit"]) {
  min-height: var(--form-element-size);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 8px 15px;
  border-radius: var(--corner-size-small);
  place-items: center;
  text-decoration: none;
  transition: var(--quick-transition);

  &:is(a.button, .cta, input[type="submit"]) {
    display: inline-flex;
  }

  &.cta:not(.blue):not(.green):not(.white):not(.orange):not(.red):not(.black),
  &:is(input[type="submit"]),
  &.blue {
    --cta-color: var(--cta-blue);
    color: var(--white);

    &:hover {
      --cta-color: var(--cta-blue-hover);
    }
  }

  &.green {
    --cta-color: var(--cta-green);
    color: var(--white);

    &:hover {
      --cta-color: var(--cta-green-hover);
    }
  }

  &.white {
    --cta-color: var(--cta-white);
    color: var(--blue);
    border: 1px solid var(--blue);
  }

  &.orange {
    --cta-color: var(--cta-orange);
    color: var(--white);

    &:hover {
      --cta-color: var(--cta-orange-hover);
    }
  }

  &.red {
    --cta-color: var(--cta-red);
    color: var(--white);
  }

  &.black {
    --cta-color: var(--black);
    color: var(--white);
  }

  &:not(:is(.ghost, .cta, .secondary, .square, .round)) {
    font-size: var(--text-copy-m);
  }

  &.secondary {
    place-items: unset;
    align-items: center;
    justify-content: space-between;
    gap: var(--root-size);
    padding: calc(var(--root-size) * 0.5);
    position: relative;
    background: var(--brand-color-light);
    border: 1px solid var(--brand-color-mid);
    color: var(--text-color);
    font-size: var(--text-copy-s);
    box-shadow: none;
    font-family: Roboto, Arial, system-ui, sans-serif;
    text-align: left;
    font-weight: 700;

    &.center {
      justify-content: center;
    }

    & > span {
      flex: 1;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &::after {
      width: 20px;
      height: 20px;
      right: 2px;
      top: 0.65em;
    }

    &.faint {
      background: var(--brand-color-faint);

      &:hover {
        background-color: var(--brand-color-faint-hover);
      }
    }
  }

  &.cta,
  &:is(input[type="submit"]) {
    background: var(--cta-color);
    font-size: var(--text-copy-m);
    min-width: calc(var(--root-size) * 2.5);

    &::after {
      width: 22px;
      height: 22px;
      right: 8px;
    }

    &.full {
      width: 100%;
      justify-content: center;
    }
  }

  &.ghost {
    --ghost-button-padding: calc(var(--root-size) * 0.5);

    min-height: unset;
    padding: var(--ghost-button-padding);
    border: 1px solid var(--brand-color-light);
    background: transparent;
    color: var(--brand-color-mid);
    font-size: var(--text-copy-xxs);
    font-weight: unset;
    box-shadow: none;
    transition: all 0.4s ease-in-out;

    &:hover {
      background: oklch(100% 0 0deg);
      transform: none;
      border-color: var(--brand-color);
    }

    &.large {
      padding-inline: var(--root-size);
      background: oklch(100% 0 0deg);
      font-size: var(--text-copy-s);
    }
  }

  &.big {
    font-family: var(--heading-typeface);
    font-size: var(--text-hero-size);
  }

  &.shadow {
    border: 0;
    box-shadow: 0 -3px rgba(0, 0, 0, .25) inset;

    &:hover {
      box-shadow: 0 -1px rgba(0, 0, 0, .25) inset;
      margin-top: 2px;
    }
  }
}
button:has( > [data-show-on="active"]) {
  [data-show-on="active"] {
    display: none;
    height: 100%;
    align-items: center;
    justify-content: center;
    place-self: center;
  }

  [data-hide-on="active"] {
    display: inline-flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    place-self: center;
  }

  &.active {
    [data-show-on="active"] {
      display: inline-flex;
    }

    [data-hide-on="active"] {
      display: none;
    }
  }
}
button, input[type="submit"], a.button {
  &.square {
    --text-color: var(--text-color-light);
    text-align: center;
    place-items: center;
    min-width: var(--form-element-size);
    border: 1px solid var(--grey);
    border-radius: var(--corner-size-small);
    /*padding-inline: var(--text-copy-xs);*/
    background: transparent;
    color: var(--text-color-light);
    font-size: var(--text-copy-s);

    &.classic {
      color: var(--brand-color);
    }

    &.active {
      color: var(--brand-color);
      font-weight: 700;
      border-color: var(--brand-color-light);
    }
  }
}
button, input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  cursor: pointer;

  &.round {
    display: grid;
    place-items: center;
    width: var(--form-element-size);
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--white);
    color: var(--brand-color);
    box-shadow: var(--subtle-shadow);
    transition: scale 0.2s ease-in-out;
    transform-origin: center;

    &:hover {
      scale: 1.05;
    }

    &:active {
      scale: 0.95;
    }
  }

  &[disabled] {
    color: var(--subtle-grey);
  }

  &.fixed-height {
    height: var(--form-element-size);
  }

  &.cta {
    color: var(--white);
    border-radius: var(--corner-size-small);
    /*box-shadow: 0 3px var(--text-copy-xs) var(--text-color-faint);*/
    padding-inline: var(--root-size);
    height: var(--form-element-size);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--root-size);
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    white-space: nowrap;

    &.green {
      --cta-color: var(--cta-green);
    }

    &.blue {
      --cta-color: var(--cta-blue);
    }

    &.white {
      --cta-color: var(--cta-white);
    }

    &.orange {
      --cta-color: var(--cta-orange);
    }

    &.red {
      --cta-color: var(--cta-red);
    }

    & img {
      width: var(--root-size);
      aspect-ratio: 1;
    }

    &.tiny {
      font-size: var(--text-copy-s);
    }
  }

  &.large {
    padding: var(--root-size);
    height: var(--large-form-element-size);
  }

  &.chevron_left_icon::after {
    width: 22px;
    height: 22px;
    left: 0.5em;
  }

}
button, input[type="submit"], a.button, .cta {
  &.chevron_right_icon {
    padding-right: 25px;

    &:before {
      width: 22px;
      height: 22px;
      right: 0.5em;
    }
  }
}
input:is([type="search"], [type="email"], [type="number"]) {
  min-width: 0;
  min-height: var(--form-element-size);
  padding-inline: var(--padding-medium);
  border-radius: var(--corner-size-small);
  border: 1px solid var(--subtle-grey);
  font-size: var(--text-copy-s);

  &::-moz-placeholder {
    opacity: 0.6;
  }

  &::placeholder {
    opacity: 0.6;
  }
}
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-width: 0;
  height: var(--form-element-size);
  padding-inline: var(--padding-medium);
  font-size: var(--text-copy-s);
  border-radius: var(--corner-size-small);
  transition: border 300ms;

  &.blue {
    background-color: var(--brand-color);
    color: var(--brand-color-light);
    border: 1px solid var(--brand-color-mid);
  }

  &.small {
    height: auto;
    padding: 4px 8px;
  }

  &.ghost {
    --text-color: var(--text-color-faint);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-color: var(--grey);
    color: var(--text-color-faint);
    padding-right: var(--form-element-size);
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5' stroke-linecap='round' stroke-linejoin='round' stroke='deepskyblue' stroke-width='2px'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
  }
}
ul, menu {
  list-style-type: none;
  list-style-position: outside;

  &.classic {
    list-style-position: inside;
    list-style-type: disc;
  }

  &.ticks_list {
    list-style-type: "✓";
    padding-left: var(--root-size);

    li {
      padding-left: var(--text-copy-xxs);

      &::marker {
        color: var(--cta-green);
        font-weight: 900;
      }
    }
  }
}
ul.zebra, ul.zebra_columns {
  padding: 0;
  list-style-type: none;

  & li {
    display: block;
    min-height: var(--form-element-size);
    padding: var(--text-copy-xxs) var(--text-copy-s);
    font-size: var(--text-copy-s);
  }

  & > li:is(:nth-of-type(even)) {
    background: var(--grey);
    border-radius: var(--corner-size-small);
  }

}
ul.zebra_columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: var(--form-element-size);
  grid-column-gap: var(--root-size);

  /* Target ever other set of 3 list items */

  & > li:is(:nth-of-type(even)) {
    background: unset;
  }

  & > li:is(:nth-of-type(6n+1), :nth-of-type(6n+2), :nth-of-type(6n+3)) {
    background: var(--grey);
    border-radius: var(--corner-size-small);
  }
}
ul.ecs {
  & .study_programme_phase_header {
    position: relative;

    & .module_header {
      font-weight: bold;
      font-size: var(--text-copy-xs);
    }

    & .ecs_header {
      position: absolute;
      right: var(--form-element-size);
      top: 50%;
      translate: 0 -50%;
      text-align: right;
      font-size: var(--text-copy-xs);
      font-weight: bold;
    }
  }

  & .phase_header {
    color: var(--brand-color);
    font-size: 110%;
  }

  & summary {
    position: relative;

    & > span {
      font-size: var(--text-copy-s);
      font-weight: normal;
      max-width: 75%;
      display: inline-block;

    }

    &::after {
      content: attr(data-ecs);
      position: absolute;
      right: var(--form-element-size);
      top: 50%;
      translate: 0 -50%;
      text-align: right;
      display: block;
    }
  }

  & li > h4 {
    font-size: var(--text-copy-s);
    margin-top: 0;
  }
}
.hero_title {
  display: block;
  margin-bottom: 4px;

  @media (width >= 48rem) {
    margin-bottom: 25px;
  }
}
/* Hero desktop content */
#hero {
  .hero_desktop {
    display: none !important;

    @media (width >= 48rem) {
      display: flex !important;
      &.cta {
        display: inline-flex !important;
      }
    }
  }
}
.hero_content {
  font-family: var(--brand-light-typeface), system-ui, sans-serif;
  font-size: var(--text-copy-l);
}
.hero_usps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tiny-spacing);
  font-family: var(--brand-light-typeface), system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: var(--text-copy-xs);

  @media (width >= 48rem) {
    font-size: var(--text-copy-l);
    margin-bottom: 29px;
  }

  & .hero_usp {
    display: flex;
    align-items: center;
    position: relative;
    line-height: 1.4;

    &::before {
      content: "";
      width: 14px;
      height: 14px;
      background: url("../img/icons/fa-check.svg") center / contain no-repeat;
      margin-right: 6px;
      flex-shrink: 0;

      @media (width >= 48rem) {
        width: 24px;
        height: 24px;
        margin-right: 13px;
      }
    }

    & .hero_usp_desktop {
      display: none;
      @media (width >= 48rem) { display: inline; }
    }

    & .hero_usp_mobile {
      display: inline;
      @media (width >= 48rem) { display: none; }
    }
  }

  /* Mobile: single line carousel — slide in from right, current slides out to left */
  @media (width < 48rem) {
    position: relative;
    display: block;
    gap: 0;
    min-height: calc(var(--text-copy-l) * 1.4);
    overflow: hidden;

    & .hero_usp {
      position: absolute;
      inset: 0;
      width: 100%;
      transform: translateX(100%);
      opacity: 0;
      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
      pointer-events: none;

      &.is-active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
      }

      &.is-leaving {
        transform: translateX(-100%);
        opacity: 0;
      }

      &.no-anim {
        transition: none;
      }
    }
  }
}
/* Hero promotional banner — desktop floating card placed via the hero's subgrid
   (cols 16-20 of 20, rows 3-6 of 7 = right side, middle-bottom). Mobile strip
   absolute-positioned below the hero. See gitnti/loi#78. */
section#hero {
  position: relative;
  /* allow the mobile strip to extend below the hero box without being clipped */
  overflow: visible;

  & > .hero_banner {
    display: none;
    z-index: 2;

    @media (width >= 48rem) {
      position: absolute;
      grid-column: 16 / -2;
      grid-row: 1 / 8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-self: end;
      align-self: start;
      width: 100%;
      max-width: 250px;
      /* Extra top buffer (60px padding-top + matching extra negative margin)
         keeps the backing covering the area above the hero edge while the
         bounce overshoots downward. Content position vs the hero unchanged. */
      height: 350px;
      padding: 60px 20px 30px;
      background: #F1F1F1;
      border-radius: 0 0 var(--corner-size-small) var(--corner-size-small);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
      text-align: center;
      /* Hero has `grid-template-rows: 34px repeat(5,1fr) 34px` and a 48px-tall
         empty breadcrumbs row sits above the hero on pages with no breadcrumbs.
         Negative margin pulls the banner up through the 34px top buffer so its
         top edge sits flush with the very top of the hero section. */
      margin-top: -108px;
      animation: hero-banner-drop 0.5s cubic-bezier(0.34, 1.15, 0.64, 1) both;
      animation-delay: 0.4s;
    }

    .hero_banner_text {
      font-family: var(--hero-typeface);
      font-size: 36px;
      line-height: 43px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(-4px);

      p {
        margin: 0;
      }
    }

    .hero_banner_button {
      margin-top: auto;
      align-self: center;
    }

    &.orange {
      &, p {
        color: var(--cta-orange);
      }
    }

    &.blue {
      &, p {
        color: var(--brand-color);
      }

      .hero_banner_button.cta.blue {
        background: #FFFFFF;
        border: 1px solid #009FE3;
        color: #414042;

        &:hover {
          background: #DCEEF7;
        }
      }
    }
  }

  &.hero_bigger > .hero_banner {
    @media (width >= 48rem) {
      height: 410px;
    }
  }
}
@keyframes hero-banner-drop {
  0%   { transform: translateY(-100%); /*opacity: 0;*/ }
  100% { transform: translateY(0);     /*opacity: 1;*/ }
}
@media (prefers-reduced-motion: reduce) {
  .hero_usps .hero_usp {
    transition: none;
  }

  #hero .hero_banner {
    animation: none;
  }
}
/* Mobile bar — absolute-positioned directly below the hero (1px gap).
   #hero gets `overflow: visible` above; section reserves room via margin-bottom
   so the next layout row isn't covered. */
.hero_banner_mobile {
  display: none;
}
@media (width < 48rem) {
  section#hero:has(> .hero_banner_mobile) {
    /* reserve room for the absolutely-positioned bar so following content
       (#content, breadcrumbs) isn't overlapped. ~40px covers the default bar. */
    margin-bottom: 40px;
  }

  .hero_banner_mobile {
    display: grid;
    grid-template-columns: 1fr auto;
    -moz-column-gap: 10px;
         column-gap: 10px;
    align-items: center;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 3px var(--gutter) 2px;
    text-decoration: none;
    z-index: 3;

    .hero_banner_mobile_text {
      min-width: 0;

      p {
        margin: 0;
        display: inline;
        color: inherit;
      }
    }

    .hero_banner_mobile_chevron {
      transform: translateY(-3px);
      font-size: 26px;
      line-height: 1;
      color: var(--blue);
    }

    &.orange {
      background: var(--cta-orange);
      color: var(--white);
      font-family: var(--brand-bold-typeface), system-ui, sans-serif;
      font-weight: 700;
      font-size: 15px;

      .hero_banner_mobile_chevron {
        color: var(--white);
      }
    }

    &.blue {
      background: #DCEEF7;
      color: #414042;
      font-family: var(--brand-typeface), system-ui, sans-serif;
      font-size: 12px;
    }
  }
}
/* Hero mobile content with toggle visibility pattern */
#hero_content_mobile {
  display: block;

  @media (width >= 48rem) {
    display: none;
  }
}
.hero_content_complete,
.hero_content_limited,
.hero_content_full {
  font-family: var(--brand-light-typeface), system-ui, sans-serif;
  font-size: var(--text-copy-s);

  a.toggle_link {
    background-color: var(--white);
    display: inline-block;
    z-index: 1;
    position: relative;
  }
}
.hero_content_full {
  /* fake floating element to account for the toggle link */

  p:last-of-type {
    &:after {
      content: "";
      display: block;
      width: 100px;
      height: calc(var(--line-height) * var(--text-copy-s));
      float: right;
    }
  }
}
a.toggle_link {
  &, &:visited {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    padding: 0;
    float: right;
  }

  p + & {
    /* on expanded state we want to align with the text above, which is in <p> */
    margin-top: calc(-1 * var(--line-height) * var(--text-copy-s));
  }
}
& .cta {
  grid-column: 2 / auto;
  grid-row: 4 / 5;
  place-self: start;
  white-space: nowrap;
  font-size: var(--text-subheading-size);
}
.app__elements__elementbuttongrid {
  &:has( + .element), &:has( + .content_block) {
    /* only border-bottom when next element is .element */
    @media (width >= 48rem) {
      border-bottom: 1px solid oklch(from var(--text-color-light) l c h / 25%);
      padding-bottom: var(--row-gap);
    }
  }
}
.link_wall {
  gap: var(--text-copy-xs) var(--text-subheading-size);

  /* Mobile-first: items take full width in grid cell */

  .link_wall_item {
    min-width: 0; /* Allow shrinking below min-content */
    width: 100%;

    a {
      font-weight: normal;

      @media (width >= 48rem) {
        font-weight: bold;
      }

    }
  }

  /* Mobile: remove breakout horizontal scroll behavior */

  &.breakout {
    overflow-x: visible;

    @media (width >= 48rem) {
      overflow-x: auto;
    }
  }
}
/* Button Grid with expand/collapse functionality */
.button_grid_container {
  grid-column: 1 / -1; /* Span all columns in subgrid parent */
  display: flex;
  flex-direction: column;
  gap: var(--root-size);
  width: 100%;
}
.button_grid_items {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* Mobile: 2 columns */
  -moz-column-gap: var(--col-gap);
       column-gap: var(--col-gap);
  row-gap: var(--grid-row-gap);

  @media (width >= 64rem) {
    grid-template-columns: repeat(5, 1fr) !important; /* Desktop: 5 columns */
    row-gap: 15px; /* gitnti/loi#80 */
  }
}
body.HomePage .element_cards + .element_button_grid {
  margin-top: -10px;
  @media (width >= 48rem) {
    margin-top: -20px;
  }
}
/* gitnti/loi#80 — button-grid styling overrides for .link_wall_item buttons */
.element_button_grid {
  & .element_title {
    h1, h2, h3, h4, h5, h6 {
      font-size: 18px;
    }
  }

  /* gitnti/loi#132 #4 — reserve row height before font load so the grid
     doesn't shift when Roboto swaps in (CLS 0.156 + 0.147 on #e5581). */
  & .button_grid_items {
    grid-auto-rows: minmax(42px, auto);
  }

  & .link_wall_item > a.button {
    min-height: 42px;
  }

  /* Specificity matches the global `:is(.button,…).secondary.faint` rule
     (spec 0-4-1) — chain .secondary.faint so we beat it (0-5-1). */
  .link_wall_item > a.button.secondary.faint {
    background: #DCEEF7;
    border: 0;
    border-radius: 6px;
    padding: 11px 12px;
    font-family: var(--brand-medium-typeface), system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;

    @media (width >= 48rem) {
      padding: 11px 15px;
    }

    &:after {
      right: 5px;
      top: 11px;

      @media (width >= 48rem) {
        right: 8px;
      }
    }

    &:hover {
      background: #C5E0EE;
    }
  }
}
/* Hide items beyond max rows when collapsed */
.button_grid_items.collapsed .link_wall_item:nth-child(n+7) {
  display: none; /* Mobile default: hide after 6 items (3 rows) */
}
@media (width >= 48rem) {
  .button_grid_items.collapsed .link_wall_item:nth-child(n+7) {
    display: block; /* Reset mobile hiding */
  }

  .button_grid_items.collapsed .link_wall_item:nth-child(n+11) {
    display: none; /* Desktop default: hide after 10 items (2 rows) */
  }
}
/*.button_grid_toggle {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--brand-color);
  cursor: pointer;
  padding: var(--text-copy-xxs) 0;
}*/
.button_grid_toggle .button_grid_toggle_hide {
  display: none;
}
.button_grid_toggle[data-expanded="true"] .button_grid_toggle_show {
  display: none;
}
.button_grid_toggle[data-expanded="true"] .button_grid_toggle_hide {
  display: inline;
}
body #menu_container > #menu_header {
  --text-color: var(--brand-color);
  font-weight: 700; /* brand medium gives a light weight on windows */
  font-size: var(--text-copy-sm);

  .ghost {
    font-size: var(--text-copy-xs);
    font-weight: normal;
    color: var(--brand-color);
    border-color: var(--brand-color-pale);
  }
}
article ul.classic {
  padding-left: 24px;
}
.price_indication {
  font-weight: bold;
  font-family: var(--heading-typeface), system-ui, sans-serif;
  font-size: var(--text-heading-size);

  & .term_label {
    font-size: var(--text-copy-s);
    font-weight: normal;
  }

  .price_original {
    opacity: 0.6;
    font-size: var(--text-copy-m);
  }

  &.block {
    font-size: var(--text-coursename-size);

    & .price_line {
      font-size: var(--text-subheading-size);
    }

    & .term_label {
      font-size: var(--text-copy-s);
      font-weight: normal;
    }

  }
}
.cost_overview_trigger {
  display: block;
  text-align: right;
  font-size: var(--text-copy-xs);
  font-weight: normal;
  cursor: pointer;

  & span {
    text-decoration: underline;
  }

  &::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../img/icons/i-blue.svg') center / contain no-repeat;
    margin-left: calc(var(--mini-spacing) / 2);
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}
.fixed_course_header .cost_overview_trigger::after {
  margin-left: var(--mini-spacing);
  width: 12px;
  height: 12px;
}
.fixed_course_header .cost_overview_trigger span {
  text-decoration: none;
}
details {
  list-style: none;

  & summary {
    list-style: none;
    position: relative;

    &::-webkit-details-marker,
    &::marker {
      display: none;
    }
  }
}
fieldset {
  display: grid;
  grid-template-columns: var(--text-subheading-size) 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  grid-row-gap: var(--text-copy-xxs);
  padding-bottom: var(--root-size);
  border: none;

  &:not(form.userform fieldset):not(:last-of-type) {
    border-bottom: 1px solid var(--grey);
  }

  & legend {
    display: block;
    padding-block: var(--root-size);

    &.filter_title {
      display: flex;
      align-items: center;
      gap: var(--text-copy-xxs);
      width: 100%;

      &:has(.info_popover_trigger) {
        gap: 0;
      }

      font-size: var(--text-copy-s);
      font-weight: 700;

      /*&::after {
        content: url("../../../themes/loi/img/info.svg");
        display: inline-block;
        width: var(--root-size);
        aspect-ratio: 1;
      }*/
    }
  }

  & > label {
    grid-column: 1 / 3;
    grid-row: auto / span 1;
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    justify-content: flex-start;
    position: relative;
    justify-self: flex-start;
    width: 100%;
    font-size: var(--text-copy-s);

    & span {
      display: block;
      position: relative;
      flex: 1;

      &::after {
        content: attr(data-count);
        display: grid;
        place-items: center;
        width: var(--root-size);
        aspect-ratio: 1;
        background: var(--brand-color-light);
        border-radius: var(--corner-size-large);
        font-size: var(--text-copy-xxs);
        color: var(--brand-color);
        font-weight: 700;
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 -50%;
      }
    }
  }

  & > div.span_grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto var(--form-element-size) auto;
    grid-template-rows: 1fr 1fr;
    gap: var(--big-spacing) var(--root-size);
    position: relative;

    & > :is(input, span) {
      grid-column: auto / span 1;
      grid-row: 1 / 2;
    }

    & > input[type="number"] {
      padding-left: var(--text-heading-size);
    }

    & > span {
      --text-color: var(--text-color-light);
      display: flex;
      align-items: center;
      color: var(--text-color-light);

      &::before, &::after {
        content: "€";
      }

      &::before {
        position: absolute;
        left: var(--text-copy-xxs);
      }

      &::after {
        position: relative;
        left: calc(100% + var(--text-copy-xxs));
      }
    }

    & > tc-range-slider {
      grid-row: 2 / 3;
      grid-column: 1 / -1;
      padding-inline: var(--root-size);
    }
  }

  & :is(div, li):has( > input[type="radio"]) {
    grid-column: 1 / -1;
    /*height: var(--form-element-size);*/
    border-radius: var(--corner-size-small);
    border: 1px solid var(--brand-color-mid);
    background: var(--brand-color-faint);
    padding-left: var(--text-copy-xs);
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    font-size: var(--text-copy-s);

    &:not(.use-utility-width) {
      width: -webkit-min-content;
      width: -moz-min-content;
      width: min-content;
    }

    > label {
      padding-top: var(--text-copy-xxs);
      padding-bottom: var(--text-copy-xxs);
      padding-right: var(--root-size) !important;
    }
  }
}
small.incentive {
  color: var(--cta-green);
  font-size: var(--text-copy-xs);
  padding: 4px 6px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* -------------------------
  Then the "components"
------------------------- */
#crumbtrail {
  display: flex;
  gap: var(--text-copy-xxs);
  align-items: center;
  font-size: var(--text-copy-xs);
  color: var(--text-color-faint);
  overflow: hidden;

  & img {
    height: 14px;
  }

  & a, & span {
    --chevron-color: currentcolor;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;

    &:hover {
      color: currentcolor;
      text-decoration: underline;
    }

    &.breadcrumb {
      text-decoration: underline;
    }

    span& {
      pointer-events: none;
    }

    &:not(:has(img#home)) {
      position: relative;
      padding-left: var(--root-size);

      &::before {
        content: "";
        -webkit-mask: url(../../../themes/loi/img/icons/chevron-right.svg) no-repeat 50% 50%;
                mask: url(../../../themes/loi/img/icons/chevron-right.svg) no-repeat 50% 50%;
        -webkit-mask-size: 14px 14px;
                mask-size: 14px 14px;
        background-color: var(--brand-color);
        width: 17px;
        height: 17px;
        left: -6px;
        white-space: nowrap;
        position: absolute;
      }
    }
  }
}
div.element, div.content_block {
  position: relative;

  & > h2, > h3, .content_card_block_title {
    color: var(--heading-color);
    margin-bottom: var(--root-size);
    font-size: var(--text-title-size);

    &:has(+ .content_card_block_image_mobile) {
      @media (width < 48rem) {
        margin-bottom: 0;
      }
    }
  }

  & > h3 {
    --heading-color: var(--text-color);
  }

  & > img {
    width: 100%;

    /*
    Enabling this rule caused a grid  blowout on Safari.
    Let's keep it around to see if we run into other issues without it
    height: 100%;
    */

    -o-object-fit: cover;

       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    overflow: hidden;
    max-width: 100%;

  }

  /*
  & > .content_block_inner {
    & > * {
      margin-bottom: var(--root-size);
    }
  }
  */

  &.backdrop {
    padding: calc(var(--root-size) * 2);
    border-radius: var(--corner-size-large);
    background-color: var(--brand-color-light);

    &.surface {
      background-color: var(--surface-light);
    }
  }

  &.backdrop_desktop {
    @media (width >= 48rem) {
      padding: calc(var(--root-size) * 2);
      border-radius: var(--corner-size-large);
      background-color: var(--brand-color-light);

      &.surface {
        background-color: var(--surface-light);
      }
    }
  }

  &:first-of-type {
    border-top: none;
  }

  .old_breakout {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: -webkit-min-content;
    grid-template-columns: min-content;
    grid-auto-columns: -webkit-min-content;
    grid-auto-columns: min-content;
    grid-column-gap: var(--col-gap);
    padding-right: var(--root-size);

    @media (width >= 48rem) {
      overflow: hidden;
      overflow-x: auto;
      padding-bottom: var(--root-size); /* account for any scrollbar */
    }

    &[class*="cols"] > * {
      grid-column: auto / span 1;
    }

    &[data-mobile-grid-row="3"] {
      @media (40rem <= width < 48rem) {
        grid-template-rows: repeat(3, auto);
        -moz-column-gap: var(--col-gap);
             column-gap: var(--col-gap);
      }
    }

    &[class*='-cardrow'] {
      -moz-column-gap: var(--col-gap);
           column-gap: var(--col-gap);
      grid-template-rows: 1fr auto;

      > * {
        width: 240px;
      }
    }
  }

}
div.element_cards,
div.element_button_grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  grid-auto-flow: row;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  row-gap: 0;

  @media (width >= 48rem) {
    row-gap: 7px;
  }
}
div.subgrid,
div.element_cards,
div.element_button_grid {
  > .element_intro {
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    + .row {
      grid-row: 3 / -1;
    }
  }

  .row:first-child {
    /* without the intro, the first row needs to span the entire block */
    grid-row: 1 / -1;
  }
}
div.element_content_card {
  .element_intro {
    /* not part of the grid, add custom padding to align gutter with the grid */
    padding-inline: var(--gutter);
  }

  div.content_card_blocks {
    width: 100%;
    display: flex;
    gap: var(--col-gap);

    /* Default: stacked on mobile (mobile_stack class or no mobile class) */
    flex-wrap: wrap;

    /* Swipeable mobile layout */
    @media (width < 48rem) {
      &.mobile_swipe {
        flex-wrap: nowrap;
        padding-bottom: var(--root-size);
        gap: var(--root-size);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: var(--gutter);
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        /* First card gets left margin for viewport padding */

        div.content_card_block:first-child {
          margin-left: var(--gutter);
        }

        /* Last card gets right margin for viewport padding */

        div.content_card_block:last-child {
          margin-right: var(--gutter);
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }

      div.content_card_block {
        /* Mobile: card sizing for swipeable */
        flex: 0 0 calc(85vw - var(--root-size));
        scroll-snap-align: start;

        &.half {
          flex: 0 0 calc(85vw - var(--root-size)); /* Mobile: show peek of next */
        }

        &.one_fourth {
          flex: 0 0 calc(70vw - var(--root-size)); /* Mobile: smaller cards */
        }

        &.three_fourth {
          flex: 0 0 calc(90vw - var(--root-size));
        }
      }
    }

    /* Stacked mobile layout */

    &.mobile_stack {
      flex-wrap: wrap;
      overflow: visible;
      scroll-snap-type: none;

      div.content_card_block {
        flex: 1 1 100%; /* Full width on mobile */
      }
    }

    div.content_card_block {
      @media (width >= 48rem) {
        flex: 1 1 100%;
      }

      &.one_third {
        @media (width >= 48rem) {
          flex: 1 1 calc(50% - var(--col-gap));
        }
        @media (width >= 64rem) {
          flex: 1 1 calc(33.333% - var(--col-gap));
        }
      }

      &.two_thirds {
        @media (width >= 48rem) {
          flex: 1 1 calc(50% - var(--col-gap));
        }
        @media (width >= 64rem) {
          flex: 2 1 calc(66.666% - var(--col-gap));
        }
      }

      &.half {
        @media (width >= 48rem) {
          flex: 1 1 calc(50% - var(--col-gap));
        }
      }

      &.one_fourth {
        @media (width >= 48rem) {
          flex: 1 1 calc(50% - var(--col-gap));
        }
        @media (width >= 64rem) {
          flex: 1 1 calc(25% - var(--col-gap));
        }
      }

      &.three_fourth {
        @media (width >= 48rem) {
          flex: 1 1 calc(50% - var(--col-gap));
        }
        @media (width >= 64rem) {
          flex: 3 1 calc(75% - var(--col-gap));
        }
      }
    }
  }
}
.element_intro,
.element_reviews_cards {
  .link_align_right {
    margin-top: calc(-1 * var(--tiny-spacing));
    float: right;
  }
}
.element_intro {

  .element_title {
    position: relative;

    > h2, > h3 {
      display: block;
      color: var(--heading-color);
      margin-bottom: var(--root-size);
    }

    > h2 {
      --heading-color: var(--brand-color);
    }

    > h3 {
      --heading-color: var(--text-color);
    }

    > .absolute_right {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .intro_line {
    grid-column: 1 / -1;
    margin-bottom: var(--root-size);
  }

}
.product_teaser_blocks {
  display: flex;
  gap: var(--col-gap);
}
.container--grid div.element, .container--grid div.content_block {

  /* Outer title with option intro */

  & > img {
    grid-column: 1 / span 6;
    grid-row: 2 / 3;
    width: 100%;

    /*
    Enabling this rule caused a grid  blowout on Safari.
    Let's keep it around to see if we run into other issues without it
    height: 100%;
    */

    -o-object-fit: cover;

       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    overflow: hidden;
    max-width: 100%;

  }

  :has(.content_block.nested),
  .fullwidth.subgrid {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;

    & > *:not([class*="subgrid"] ) {
      grid-column: 1 / -1;

      &:not(.button_grid_container) {
        margin-block: var(--root-size);
      }
    }
  }

  &.fullwidth.minwidth {
    min-width: 100%;
  }

  &.nested {
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
  }

  &.backdrop {
    padding: calc(var(--root-size) * 2);
    border-radius: var(--corner-size-large);
    background-color: var(--brand-color-light);

    &.surface {
      background-color: var(--surface-light);
    }

  }

  .blog_post_summary {
    grid-column: auto / span 1;
  }

  &:has(.content_card_block) {
    grid-template-rows: auto;
  }
}
.container--grid div.additional_content {
  grid-column: 2 / -2;
  display: grid;
  grid-auto-flow: row;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}
div.element article:has(ul.zebra_columns),
div.content_block article:has(ul.zebra_columns) {
  grid-column: 1 / -1;
  padding: 0;
}
div.element:has(article ul.link_wall),
div.content_block:has(article ul.link_wall) {
  --heading-color: var(--text-color);
}
div.contactbar {
  --text-color: var(--white);
  color: var(--white);
  grid-column: 2 / -2;
  background: var(--brand-color);
  border-radius: var(--corner-size-medium);
  height: var(--large-form-element-size);
  display: flex;
  font-size: var(--text-copy-s);

  & > img {
    height: 150%;
    scale: -1 1;
    position: relative;
    top: -50%;
  }

  & ul {
    flex: 1;
    display: flex;
    align-items: center;

    & li {
      flex: 1;

      & a {
        display: flex;
        gap: var(--text-copy-xxs);
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: var(--text-copy-xs);
      }

      &:first-child {
        font-weight: 900;
      }
    }
  }
}
.serp_course_details {
  --text-color: var(--text-color-lighter);
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  font-size: var(--text-copy-xs);

  & li {
    display: block;
    padding-right: var(--tiny-spacing);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    + li {
      padding-left: var(--tiny-spacing);
    }

    &:not(:last-of-type) {
      border-right: 1px solid var(--brand-color-mid);
    }
  }
}
/* -------------------------------------------- */
div.header_search_section {
  font-size: var(--text-copy-s);
  display: flex;
  flex-direction: column;
  gap: var(--text-copy-xxs);
  padding-top: var(--root-size);
  list-style-type: none;

  &.hidden {
    display: none;
  }

  & > .found_results_count {
    border-top: 2px dotted var(--brand-color);
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: bold;
    padding-top: 0.6rem;
  }

  & > ul {
    padding-left: 0;
  }
}
.mini_cards {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-row-gap) var(--col-gap);

  @media (width >= 64rem) {
    grid-template-columns: repeat(5, 1fr);
  }
}
.mini_card {
  --text-color: var(--white);
  --heading-color: var(--white);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--brand-color);
  min-height: 44px;

  /* Mobile-only cards: hide on md-above */
  &.mobile_only {
    @media (width >= 48rem) {
      display: none;
    }
  }

  & > img {
    width: 100%;
    aspect-ratio: 1.75;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    z-index: 1;
  }

  & > .mini_card_content {
    width: 100%;
    height: 100%;
    padding: 11px 12px;
    font-size: var(--text-copy-xs);

    @media (width >= 48rem) {
      padding: 12px 15px 15px;
      font-size: var(--text-copy-s);
    }

    &:has( > a) {
      padding: 0;

      > a {
        padding: 11px 12px;

        @media (width >= 48rem) {
          padding: 12px 15px 15px;
        }
      }
    }

    & > a {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      color: var(--white);
      text-decoration: none;
      transition: background-color 0.15s ease-out;

      &:hover {
        background-color: var(--cta-blue-hover);
      }

      @media (width >= 48rem) {
        justify-content: flex-start;
      }
    }

    & .mini_card_title {
      font-family: var(--brand-medium-typeface), system-ui, sans-serif;
      font-weight: 500;
      font-size: 15px;

      &:after {
        right: -9px;
        top: 1px;
      }

      @media (width >= 48rem) {
        font-family: var(--brand-bold-typeface), system-ui, sans-serif;
        font-weight: 700;
        margin-bottom: calc(var(--text-copy-xxs) * 0.5);
        font-size: var(--text-copy-m);
      }
    }

    /* Secondary content under the title: 12px regular #BFE7F8 (gitnti/loi#79) */
    & .mini_card_content {
      --text-color: #BFE7F8;
      display: none;
      font-size: var(--text-copy-xs);
      font-weight: normal;

      @media (width >= 48rem) {
        display: block;
      }
    }
  }
}
figure.promo {
  display: flex;
  gap: var(--root-size);

  & img {
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center top;
       object-position: center top;
    flex: 1;
    overflow: hidden;
  }

  & figcaption {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: start;

    & p {
      font-size: var(--text-copy-s);
    }
  }
}
.element_content_card {
  /* the row-holder of the content_card_block */

  + .element_content_card:not(:has(.element_intro)) {
    margin-top: calc(0px - var(--row-gap));

    @media (width >= 48rem) {
      margin-top: 0;
    }

  }

}
.content_card_block {
  --backdrop-color: var(--surface-light);
  --content-padding: var(--inner-col-padding-y) var(--inner-col-padding-x);

  display: flex;
  position: relative;
  /*min-height: fit-content;*/
  /*height: auto;*/
  /*border-radius: var(--corner-size-large);*/
  background-color: var(--backdrop-color);
  background-repeat: no-repeat;
  background-size: cover;
  padding: var(--content-padding);
  overflow: hidden; /* for border-radius */
  gap: var(--inner-col-padding-x) var(--inner-col-padding-y);

  .content_card_block_image {
    display: none;

    @media (width >= 48rem) {
      display: block;
    }
  }

  .content_card_block_image_mobile {
    display: block;

    @media (width >= 48rem) {
      display: none;
    }

    img {
      border-radius: var(--corner-size-medium);
    }

    &.ratio img {
      width: 100%;
      height: auto;
      -o-object-fit: contain;
         object-fit: contain;
    }

    &.limitheight {
      overflow: hidden;
      height: 150px;
      position: relative;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
    }
  }

  > .content_card_block_image,
  > .acronica_video {
    width: 100%;

    .video_wrapper,
    .video_thumbnail_wrapper {
      height: 100%;

      @media (width >= 64rem) {
        width: 332px;
      }
    }
  }

  &.bg_color_blue {
    --backdrop-color: var(--brand-color);
  }

  /*             "blue"  => "Blue",
            "sky"  => "Sky",
            "ice" => "Ice",
            "mist" => "Mist",
            "cream" => "Cream",
            "bone" => "Bone",
            "sand" => "Sand",
            "gray"  => "Gray",
            "orange" => "Orange",
            "green" => "Green",
            "white" => "White",
            "black" => "Black",
*/

  &.bg_color_sky {
    --backdrop-color: var(--brand-color-mid);
  }

  &.bg_color_ice {
    --backdrop-color: var(--brand-color-light);
  }

  &.bg_color_mist {
    --backdrop-color: var(--brand-color-faint);
  }

  &.bg_color_cream {
    --backdrop-color: var(--surface-light);
  }

  &.bg_color_bone {
    --backdrop-color: var(--surface-mid);
  }

  &.bg_color_sand {
    --backdrop-color: var(--surface-dark);
  }

  &.bg_color_gray {
    --backdrop-color: var(--grey);
  }

  &.bg_color_orange {
    --backdrop-color: var(--cta-orange);
  }

  &.bg_color_green {
    --backdrop-color: var(--cta-green);
  }

  &.bg_color_white {
    --backdrop-color: var(--white);
  }

  &.bg_color_black {
    --backdrop-color: var(--black);
  }

  &.text_color_green .content_card_block_content {
    --text-color: var(--cta-green);
    color: var(--cta-green);
  }

  &.text_color_orange .content_card_block_content {
    --text-color: var(--cta-orange);
    color: var(--cta-orange);
  }

  &.text_color_blue .content_card_block_content {
    --text-color: var(--brand-color);
    color: var(--brand-color);
  }

  &.text_color_brown .content_card_block_content {
    --text-color: var(--brown);
    color: var(--brown);
  }

  &.text_color_white .content_card_block_content {
    --text-color: var(--white);
    color: var(--white);
  }

  &.text_color_black .content_card_block_content {
    --text-color: var(--black);
    color: var(--black);
  }

  &.title_color_green .content_card_block_title {
    --heading-color: var(--cta-green);
  }

  &.title_color_orange .content_card_block_title {
    --heading-color: var(--cta-orange);
  }

  &.title_color_blue .content_card_block_title {
    --heading-color: var(--brand-color);
  }

  &.title_color_brown .content_card_block_title {
    --heading-color: var(--brown);
  }

  &.title_color_white .content_card_block_title {
    --heading-color: var(--white);
  }

  &.title_color_black .content_card_block_title {
    --heading-color: var(--black);
  }

  & .content_card_block_inner {
    grid-column: 1 / -1;
    height: 100%;
    width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: var(--text-subheading-size);
    z-index: 1;

    .content_card_block_title {
      margin-bottom: 0;
    }

    &:has(.button.cta) {
      & > *:nth-last-child(2):not(.content_card_block_title) {
        flex: 1;
      }

      .button.cta {
        margin-top: auto;
        align-self: flex-start;
      }
    }

    &.content_padding {
      padding: var(--content-padding);
    }
  }

  /* image very small in three_fourth */

  &.three_fourth {
    .content_card_block_image,
    .acronica_video {
      grid-column: 1/-1;
    }
  }

  /* / image very small in three_fourth */

  &.img_position_background {
    min-height: 200px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%), var(--mobile-bg);

    @media (width >= 48rem) {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%), var(--tablet-bg);
    }
    @media (width >= 64rem) {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%), var(--desktop-bg);
    }
  }

  &.half:not(.custom_img_position),
  &.custom_img_position.img_position_top,
  &.custom_img_position.img_position_bottom {
    flex-direction: column;
    padding: 0;

    &:has(.content_card_block_image),
    &:has(.acronica_video) {
      gap: 0;
    }

    & .content_card_block_inner {
      --backdrop-color: var(--surface-dark);
      padding: var(--content-padding);

      & > p, h2 {
        mix-blend-mode: luminosity;
      }
    }

    &.blue {
      & .content_card_block_inner {
        --backdrop-color: var(--brand-color-light);
      }
    }

    &:not(:has(.content_card_block_image)):not(:has(.acronica_video)) {
      aspect-ratio: unset;
    }

    & > .content_card_block_image,
    & > .acronica_video {
      img {
        -o-object-fit: cover;
           object-fit: cover;
        z-index: 0;
        width: 100%;
        height: 150px;

        @media (width >= 48rem) {
          height: 300px;
        }

        @media (width >= 64rem) {
          height: 420px;
        }
      }

      &.acronica_video {
        img {
          height: 100%;
        }
      }
    }

  }

  &.custom_img_position.img_position_top {
    & > .content_card_block_image,
    & > .acronica_video {
      @media (width >= 48rem) {
        order: 1;
      }
    }

    & > .content_card_block_inner {
      @media (width >= 48rem) {
        order: 2;
      }
    }
  }

  &.custom_img_position.img_position_bottom {
    & > .content_card_block_image,
    & > .acronica_video {
      @media (width >= 48rem) {
        order: 2
      }
    }

    & > .content_card_block_inner {
      @media (width >= 48rem) {
        order: 1;
      }
    }
  }

  &.custom_img_position.img_position_background {
    --heading-color: var(--white);
    --text-color: var(--white);
  }

  &.custom_img_position.img_position_background,
  &.one_third:not(.custom_img_position) {
    position: relative;
    overflow: hidden;

    & .content_card_block_inner {
      background-color: transparent;
    }

    &:has(> .content_card_block_image),
    &:has(> .acronica_video) {
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent linear-gradient(135deg, rgba(0, 0, 0, .5) 0, rgba(128, 128, 128, .1) 100%) 0 0 no-repeat padding-box;
        pointer-events: none;
      }
    }

    & .content_card_block_image,
    & .acronica_video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      z-index: 0;
    }
  }

  &.custom_img_position.img_position_right,
  &.custom_img_position.img_position_left,
  &.two_thirds:not(.custom_img_position),
  &.full:not(.custom_img_position) {

    & .content_card_block_inner {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      grid-row: auto / span 1;

      &:first-child {
        grid-row-start: 1;
      }
    }

    & .content_card_block_image,
    & .acronica_video {
      flex-basis: 120px;

      img, video {
        border-radius: var(--corner-size-medium);
        width: 100%;
        height: 150px;
        -o-object-fit: cover;
           object-fit: cover;

        @media (width >= 48rem) {
          height: 100%;
          /*object-fit: contain;*/
        }
      }
    }

    & .acronica_video {
      img {
        height: 100%;
      }
    }
  }

  &.full:not(.custom_img_position) {
    & .content_card_block_image,
    & .acronica_video {
      @media (width >= 64rem) {
        width: 27%;
      }

      #trial-lesson-page & {
        @media (width >= 64rem) {
          width: 50%;
        }
      }
    }
  }

  &.custom_img_position.img_position_right,
  &.custom_img_position.img_position_left,
  &.two_thirds:not(.custom_img_position) {
    flex-direction: column;
    @media (width >= 64rem) {
      flex-direction: row;
    }

    & .content_card_block_image,
    & .acronica_video {
      @media (width >= 64rem) {
        width: 40%;
        flex-basis: 332px;
      }
    }
  }

  /* position right  */

  &.custom_img_position.img_position_right,
  &.two_thirds:not(.custom_img_position) {

    & .content_card_block_inner {
      @media (width >= 48rem) {
        order: 1;
      }
    }

    & .content_card_block_image,
    & .acronica_video {
      @media (width >= 48rem) {
        order: 2;
      }
    }

  }

  &.card_listing {
    grid-template-rows: -webkit-max-content;
    grid-template-rows: max-content;
    border-radius: var(--corner-size-large);

    /*> img {*/
    /*  border-radius: var(--corner-size-large) var(--corner-size-large) 0 0 ;*/
    /*  grid-row: 1 / 1;*/
    /*}*/

    > .img {
      border-radius: var(--corner-size-large) var(--corner-size-large) 0 0;
      grid-row: 1 / 1;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 200px;

      &.with-bg-image {
        background-image: var(--image-bg);
        height: var(--image-bg-height, 200);
      }
    }

    > article {
      grid-row: 2 / 2;
      border-radius: 0 0 var(--corner-size-large) var(--corner-size-large);
    }
  }
}
section#hero,
.element_image_banner .content_block_inner {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 150px;

  @media (width >= 48rem) {
    height: 320px;
  }

  body.HomePage & {
    @media (width >= 48rem) {
      height: 462px;
    }
  }

  &.with-bg-image {
    /* Mobile-first (gitnti/loi#166 mobile follow-up): default to --mobile-bg
       so the critical CSS that Penthouse extracts at its mobile viewport
       paints the right image on mobile browsers, instead of downloading the
       desktop background. Fallback chain protects pages that only set a
       DefaultImage (no MobileImage / TabletImage in CMS):
       --mobile-bg → --desktop-bg. The desktop/tablet @media blocks below
       are lifted into the critical file by build-critical.mjs's
       injectHeroDesktop plugin, so desktop first-paint is also correct. */
    background-image: var(--mobile-bg, var(--desktop-bg));

    @media (width >= 48rem) {
      background-image: var(--tablet-bg, var(--desktop-bg));
    }

    @media (width >= 64rem) {
      background-image: var(--desktop-bg);
    }

    &.bg-position-left {
      background-position: left center;
    }

    &.bg-position-left-top {
      background-position: left top;
    }

    &.bg-position-left-bottom {
      background-position: left bottom;
    }

    &.bg-position-right {
      background-position: right center;
    }

    &.bg-position-right-top {
      background-position: right top;
    }

    &.bg-position-right-bottom {
      background-position: right bottom;
    }

    &.bg-position-center {
      background-position: center center;
    }

    &.bg-position-center-top {
      background-position: center top;
    }

    &.bg-position-center-bottom {
      background-position: center bottom;
    }
  }
}
.element_image_banner {
  .content_block_inner {
    min-height: 250px;
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);

    padding-inline: var(--gutter);

    &.with-bg-image {
      min-height: var(--desktop-bg-height);

      &.with-mobile-bg-image {
        min-height: var(--mobile-bg-height);

        @media (width >= 80rem) {
          min-height: var(--desktop-bg-height);
        }
      }

      &.with-tablet-bg-image {
        @media (width >= 48rem) {
          min-height: var(--tablet-bg-height);
        }

        @media (width >= 64rem) {
          min-height: var(--desktop-bg-height);
        }
      }
    }

    .element_image_banner_inner {
      --heading-color: var(--white);
      --text-color: var(--white);
      color: var(--text-color);
      grid-column: 2 / -2;

      @media (width < 64rem) {
        grid-column: 2 / -2;
      }

      &:has(blockquote) {
        &:before {
          content: " ";
          position: absolute;
          top: calc(var(--header-height) - 10px);
          left: var(--gutter);
          width: 100px;
          border-top: 2px solid #fff;
        }
      }

      h2 {
        font-family: var(--brand-typeface), sans-serif;
        font-weight: 500;
        line-height: 125%;
        font-size: var(--text-hero-size);
        margin-bottom: var(--spacing);

        & strong {
          line-height: 125%;
          font-weight: 700;
        }
      }

      blockquote {
        position: relative;
        display: block;
        font-size: var(--text-coursename-size);
        font-style: italic;
        width: 50%;
        padding-bottom: var(--root-size);

        &::before {
          content: "“";
          top: 0;
          left: 0;
          font-size: var(--text-coursename-size);
        }

        &::after {
          content: "”";
          bottom: 0;
          right: 0;
          font-size: var(--text-coursename-size);
        }

        p {
          display: inline;
        }
      }

      & > a {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        color: var(--white);
        text-decoration: underline;
      }

    }
  }

  &.banner-breakout, &:has(.banner-breakout) {
    grid-column: 1 / -1 !important;

    .content_block_inner {
      .content {
        grid-column: 2 / -2;

        @media (width < 64rem) {
          grid-column: 3 / -3;
        }
      }
    }
  }

}
.figure_strip {
  /* Mobile: horizontal scroll */
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  gap: var(--root-size);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--root-size);

  &::-webkit-scrollbar {
    display: none;
  }

  @media (width >= 48rem) {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fit, minmax(120px, auto));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  figure {
    flex: 0 0 120px; /* Mobile: fixed width */
    scroll-snap-align: start;
    aspect-ratio: 1;

    @media (width >= 48rem) {
      flex: 1 1 auto;
    }

    & img {
      grid-row: 1 / 2;
      width: 90%;
      height: 90%;
      place-self: center;
      aspect-ratio: 1;
      padding: var(--text-copy-l);
      -o-object-position: center;
         object-position: center;
      -o-object-fit: contain;
         object-fit: contain;
      background: var(--white); /* White background per design #308 */
      border-radius: 50%; /* Circular shape */
    }

    & figcaption {
      margin-top: 10px;
      text-align: center;
      font-size: var(--text-copy-s);

      @media (width >= 48rem) {
        white-space: wrap;
        font-size: inherit;
      }

      & *:is(a, em) {
        font-weight: normal;
      }

      & em {
        display: block;
        font-size: var(--text-copy-m);
        font-style: normal;
        color: var(--text-color-light);
      }
    }
  }

  &.squares {
    & figure {
      flex-grow: 0;

      & img {
        background-color: var(--white);
        border-radius: var(--corner-size-small);
      }
    }
  }

  &.circles {
    & figure {
      flex: 0 0 110px; /* Mobile: smaller circles */

      @media (width >= 48rem) {
        flex: 1 1 auto;
      }

      & img {
        width: 90%;
        height: auto;
        background-color: var(--white);
        border-radius: 999px;
      }
    }
  }
}
.blog_card {
  --heading-color: var(--brand-color);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  row-gap: var(--root-size);
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
  padding: var(--text-copy-l);
  border: 1px solid var(--light-baby-blue);
  border-radius: var(--corner-size-small);
  background-color: var(--brand-color-faint);

  & .course_card_title {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    font-size: var(--text-copy-l);
    font-weight: bold;
  }

  & a {
    --cta-color: var(--cta-green);

    grid-column: 2 / 3;
    grid-row: 3 / 4;
    place-self: end;
    white-space: nowrap;
  }
}
.course_card {
  --heading-color: var(--brand-color);
  display: flex;
  flex-direction: column;
  min-height: 208px;
  padding: var(--text-copy-l);
  border: 1px solid var(--light-baby-blue);
  border-radius: var(--corner-size-small);
  background-color: var(--brand-color-faint);

  & .course_card_title {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    color: var(--heading-color);
    font-size: var(--text-copy-m);
    font-weight: bold;
    line-height: 1.33;
    margin-bottom: var(--tiny-spacing);

    @media (width >= 48rem) {
      font-size: var(--text-copy-l);
    }
  }

  .course_card_footer {
    position: relative;
    margin-top: auto;
    padding-top: var(--spacing);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .course_details {
    --text-color: var(--text-color);
  }

  .price_indication {
    font-size: var(--text-copy-l);

    .term_label {
      font-size: var(--text-copy-xs);
      font-weight: bold;
    }
  }

  & a.button {
    --cta-color: var(--cta-green);
    white-space: nowrap;
  }
}
*:has(.course_draw) {
  counter-reset: drawCount;
}
.course_draw {
  --heading-color: var(--brand-color);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  row-gap: var(--text-copy-l);
  outline: 1px solid var(--brand-color-light);
  padding: var(--text-subheading-size);
  border-radius: var(--corner-size-small);
  box-shadow: var(--subtle-shadow);
  color: var(--text-color-faint);

  ul.ticks_list {
    font-size: var(--text-copy-xs);
    line-height: 1.75;
  }

  & .course_draw_title {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--grey);
    padding-bottom: var(--text-copy-l);
    counter-increment: drawCount;
    font-size: var(--text-copy-l);

    &::before {
      content: counter(drawCount);
      display: inline-grid;
      place-items: center;
      width: var(--text-subheading-size);
      aspect-ratio: 1;
      margin-right: var(--text-copy-xxs);
      border-radius: 999px;
      background: var(--cta-orange);
      font-size: var(--text-copy-xxs);
      color: var(--white);
    }
  }
}
.blog_card {
  --heading-color: var(--text-color-light);
  --cta-color: var(--cta-orange);

  background-color: var(--surface-mid);
  outline: none;

  & p {
    grid-column: 1 / -1;
  }

  & a {
    --cta-color: var(--cta-orange);
  }
}
.jobopening_card {
  --heading-color: var(--brand-color);

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--form-element-size) auto var(--form-element-size);
  gap: var(--root-size);

  & :not(ul) {
    grid-column: 1 / 2;
    grid-row: auto / span 1;
  }

  & h2 {
    font-weight: normal;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: calc(var(--root-size) * -1);
      width: calc(var(--large-form-element-size) * 2);
      height: 2px;
      background-color: var(--brand-color);
    }
  }

  & ul {
    grid-column: 2 / 3;
    grid-row: 1 / -1;

    & li {
      background: var(--grey);
      padding: 6px var(--root-size);
      display: flex;

      & strong {
        font-weight: bold;
        flex: 1;
        margin-right: var(--root-size);
      }

      &:last-child {
        background: var(--subtle-grey);
      }
    }
  }
}
.review_carousel {
  display: flex;
  flex-direction: column;
  gap: var(--root-size);
  position: relative;

  /* Mobile: edge-to-edge swipeable cards */

  & .scrollable {
    display: flex;
    gap: var(--col-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: var(--root-size);

    &::-webkit-scrollbar {
      display: none;
    }

    @media (width >= 48rem) {
      display: grid;
      grid-template-columns: 50%;
      grid-auto-columns: calc(50% - var(--col-gap));
      grid-auto-flow: column;
      overflow: hidden;
      gap: var(--col-gap);
    }

    & .review {
      display: flex;
      flex-direction: column;
      border-radius: var(--corner-size-medium);
      flex: 0 0 calc(100% - 60px); /* Show peek of next card */
      scroll-snap-align: start;
      background-color: var(--brand-color-faint);
      border: 1px solid var(--light-baby-blue);

      &:not(:first-child) {
        border-left: 1px solid oklch(from var(--subtle-grey) l c h / 10%);
      }

      @media (width >= 48rem) {
        background: var(--white);
        border: 0;
        flex-direction: row;
        flex: none;
        background: transparent;
        border-radius: 0;
        padding: 0;
      }

      /* Last card gets right margin for viewport padding */

      &:last-child:not(:first-child) {
        margin-right: var(--gutter);

        @media (width >= 48rem) {
          margin-right: 0;
        }
      }

      & .review_image_desktop {
        width: 215px;
        overflow: hidden;
        display: none;
        @media (width >= 48rem) {
          display: block;
        }

        img {
          width: 100%;
          height: auto;
          aspect-ratio: 1/1;
          -o-object-position: center;
             object-position: center;
          border-radius: 999px;
          -o-object-fit: contain;
             object-fit: contain;
        }
      }

      /* Mobile: Image at bottom with cite info */

      & .review_footer {
        display: flex;
        align-items: center;
        gap: var(--root-size);
        margin-top: auto;
        border-top: 1px solid var(--light-baby-blue);
        padding: var(--padding-medium);

        @media (width >= 48rem) {
          display: none;
        }

        & img {
          width: 50px;
          min-width: 50px;
          height: 50px;
          aspect-ratio: 1/1;
          -o-object-position: center;
             object-position: center;
          -o-object-fit: cover;
             object-fit: cover;
          border-radius: 999px;
          border: 2px solid var(--brand-color-faint);

          @media (width >= 48rem) {
            width: 100%;
            min-width: auto;
            height: auto;
            translate: 0 12.5%;
            border: none;
            order: -1;
          }
        }
      }

      .review_quote_and_cite {
        flex: 1;
        text-align: left;
        display: flex;
        flex-direction: column;
        padding: var(--padding-medium);

        @media (width >= 48rem) {
          padding-block: 0;
          padding-inline: 25px;
        }
      }

      & blockquote {
        display: block;
        font-style: italic;
        position: relative;
        margin: 0;
        font-size: 20px;
        line-height: 28px;
        color: var(--text-color);
        padding-left: calc(var(--root-size) * 1.5);
        padding-top: var(--text-copy-xs);
        flex: 1;

        @media (width >= 48rem) {
          font-size: 28px;
          line-height: 35px;
          padding-left: 0;
          padding-top: 0;
        }

        & svg {
          display: block;
          position: absolute;
          height: 18px;
          width: 18px;
          color: oklch(from var(--black) l c h / 0.1);

          @media (width >= 48rem) {
            height: 32px;
            width: 32px;
          }

          &:nth-of-type(1) {
            left: 0;
            top: 0;

            @media (width >= 48rem) {
              left: -36px;
              top: -4px;
            }
          }

          &:nth-of-type(2) {
            display: block;
            bottom: 0;
            right: 0;
            translate: 0 50%;
          }
        }
      }

      & cite {
        display: none; /* Hide in quote section on mobile - shown in footer */

        @media (width >= 48rem) {
          display: block;
          font-style: normal;
          margin-top: var(--root-size);
          font-size: var(--text-copy-s);
          color: var(--text-color-light);
        }

        & strong {
          display: block;
          color: var(--text-color);
          font-weight: 600;
        }
      }

      /* Mobile cite styling - shown next to image */

      & .review_cite_mobile {
        display: flex;
        flex-direction: column;
        font-size: var(--text-copy-s);
        color: var(--text-color-light);

        @media (width >= 48rem) {
          display: none;
        }

        & strong {
          color: var(--text-color);
          font-weight: 600;
        }
      }

      + .review {
        @media (width >= 48rem) {
          padding-left: var(--col-gap);
        }
      }

    }
  }

  /* Mobile: dots only, hide arrow buttons */

  & .carousel_controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}
.has_2, .has_3, .has_4 {
  .review_carousel {
    & .scrollable {
      @media (width >= 48rem) {
        grid-template-columns: 100%;
        grid-auto-columns: 100%;

        .review {
          border-left: none;
        }
      }
    }
  }
}
div.carousel_controls {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;

}
.progress_dots {
  display: flex;
  gap: 10px;
  align-items: center;

  .progress_dot {
    height: 10px;
    aspect-ratio: 1;
    border-radius: 999px;
    background-color: var(--brand-color-mid);
    transition: background-color 200ms ease-out;

    &.active {
      background-color: var(--brand-color);
    }
  }
}
.bottom_dots {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);

  @media (width >= 48rem) {
    display: none;
  }
}
div.carousel_controls button,
button.carousel_button {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;

  &[disabled] {
    opacity: 0.3;
  }
}
.carousel {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  flex-direction: column;
  position: relative;


  & .scrollable {
    display: flex;
    gap: var(--col-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: var(--root-size);

    &::-webkit-scrollbar {
      display: none;
    }

    @media (width >= 48rem) {
      display: grid;
      grid-template-columns: 25%;
      grid-auto-columns: calc(25% - var(--col-gap));
      grid-auto-flow: column;
      overflow: hidden;
      gap: var(--col-gap);
    }

    & > .course_card,
    & > .blog_card {
      flex: 0 0 calc(100% - 60px); /* Show peek of next card */
      scroll-snap-align: start;

      @media (width >= 48rem) {
        flex: none;
      }
    }
  }

  & > button {
    &.carousel_button_backward {
      display: none;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);

      @media (width >= 48rem) {
        display: flex;
        transform: translate(-20px, -50%);
      }
    }

    &.carousel_button_forward {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(calc(-1 * var(--small-spacing)), -50%);
      box-shadow: var(--button-shadow);

      @media (width >= 48rem) {
        transform: translate(20px, -50%);
      }
    }

    &[disabled] {
      background: var(--grey);
    }
  }
}
/* Mobile swipeable carousel enhancements */
.mobile_swipe,
.carousel_with_gradients,
.review_carousel {
  /* Gradient edge indicators on mobile */

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65px;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 200ms ease;
  }

  &::before {
    left: 0;
    background: none;
  }

  &::after {
    right: calc(-1 * var(--gutter));
    background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF00 100%);
  }

  &.at-end::after {
    background: transparent;
  }

  &.at-end::before {
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF00 100%);
  }

  /* Hide gradients on desktop */
  @media (width >= 48rem) {
    &::before,
    &::after {
      display: none;
    }
  }
}
.review_carousel:not(.has-scroll-right) {
  &::after {
    display: none;
  }
}
/* Mobile dot pagination for carousels */
.carousel_dots {
  display: flex;
  justify-content: center;
  gap: var(--text-copy-xxs);
  padding: var(--root-size) 0;
}
.carousel_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-color-mid, #ccc);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;

  &.active,
  &:hover {
    background: var(--brand-color);
  }

  &.active {
    transform: scale(1.25);
  }
}
/* Show nav buttons with gradient background on larger mobile */
@media (width >= 40rem) and (width < 48rem) {
  .carousel > .carousel_controls > button,
  .review_carousel > .carousel_controls > button {
    display: flex;
    background: linear-gradient(to right, var(--white) 60%, transparent) !important;
    border: none;
    width: 60px;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    padding-left: var(--text-copy-xs);

    &.carousel_button_forward {
      background: linear-gradient(to left, var(--white) 60%, transparent) !important;
      justify-content: flex-end;
      padding-left: 0;
      padding-right: var(--text-copy-xs);
    }

    &::before {
      content: '';
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--brand-color);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
div.course_categories_banner {
  grid-column: 1 / -1;
  /*grid-row: 1 / -1;*/
  height: var(--form-element-size);
  display: flex;
  align-items: center;
  gap: var(--root-size);
  padding-inline: var(--root-size);
  background: var(--brand-color-faint);
  border-radius: var(--corner-size-small);
  font-size: var(--text-copy-xs);
}
div.course_finder {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: var(--form-element-size) 0 auto;
  grid-auto-rows: minmax(var(--result-row-height), auto);
  row-gap: var(--text-subheading-size);

  /*&.fits_viewport {*/
  padding-bottom: 50px;
  grid-auto-rows: auto;
  /*}*/

  .filter_container {
    grid-row: 1 / -1;
    flex-direction: column;
    gap: var(--root-size);
    position: relative;
    display: none;

    &:has(.as_dialog) {
      display: flex;
      @media (width >= 64rem) {
        grid-column: 1 / -1;
      }
    }

    @media (width >= 64rem) {
      grid-column: 1 / span 5;
      display: flex;
    }

    & > button.cta {
      position: -webkit-sticky;
      position: sticky;
      bottom: var(--form-element-size);
      margin-block: var(--root-size);
      width: 100%;
      z-index: 25;
    }

    form.filter {
      display: none;

      @media (width >= 64rem) {
        display: block;
      }

      &.as_dialog {
        display: block;
        width: 100%;
        height: 100vh;
        z-index: 999;
        background: var(--white);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: scroll;

        .filter_fieldset {
          padding: var(--root-size);
        }
      }

      > header {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 3;
        background: var(--brand-color);
        padding-inline: var(--gutter);
        color: var(--white);

        @media (width >= 64rem) {
          display: none;
        }
      }

      > footer {
        position: -webkit-sticky;
        position: sticky;
        background: var(--white);
        padding: var(--root-size);
        bottom: 0;
        z-index: 50;
        box-shadow: 0 0 5px var(--subtle-grey);
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--text-copy-xs);

        @media (width >= 64rem) {
          display: none;
        }

        button {
          display: flex;
          justify-content: center;
          grid-column: auto;
          grid-row: auto;
          width: 100%;
        }

        [data-filter-clear] {
          color: var(--text-color-lighter);
          border-color: var(--text-color-lighter);
        }

      }
    }
  }

  & > .course_finder_results {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--text-subheading-size);

    @media (width >= 64rem) {
      grid-column: 7 / -1;
    }

    &.global {
      grid-column: 3 / 19;
      grid-row: 1 / -1;
    }

    &.full {
      grid-column: 1 / -1;
    }

    & > .metadata {
      --gap: var(--text-copy-xxs);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: var(--text-color-faint);
      gap: var(--gap);

      & small:first-of-type {
        flex: 1;
      }
    }

    /* Top level "course cards" */

    & > .search_row {
      --gap: var(--text-copy-xxs);
      --heading-color: var(--brand-color);

      border: 1px solid oklch(from var(--subtle-grey) l c h / 12.5%);
      border-radius: var(--corner-size-small);
      box-shadow: var(--faint-shadow);

      .search_first_line {
        display: flex;
        flex-direction: column;
        padding: 13px;

      }

      &.search_product {
        .search_first_line {
          @media (width >= 48rem) {
            display: grid;
            grid-template-columns: 28px 1fr -webkit-min-content;
            grid-template-columns: 28px 1fr min-content;
            padding: 18px;
            flex-direction: row;
          }
        }
      }

      & input[type="checkbox"] {
        grid-column: 1 / 2;
        grid-row: 1 / -1;
        width: var(--root-size);
      }


      .search_link {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap);
        width: 100%;
        min-width: 0;
        color: inherit;
        order: 0;

        @media (width >= 48rem) {
          flex-direction: row;
          padding-right: var(--gap);
          order: 1;
        }
      }

      .search_product_compare {
        padding: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100%;
        order: 2;
        flex: 0 0 40px;

        @media (width >= 48rem) {
          place-items: center;
          order: 0;
        }

        .checkbox_holder {
          position: absolute;
          top: 8px;
          left: 0;


          > svg {
            z-index: 1;
          }

          > label {
            display: block;
            font-size: var(--text-copy-xs);
            position: absolute;
            left: calc(9px + var(--text-copy-l));
            top: 3px;
            color: var(--text-color-lighter);

            @media (width >= 48rem) {
              display: none;
            }
          }

        }

      }

      .search_product_left {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 0;
        gap: 5px;

        .sticker_container {
          display: flex;
          @media (width >= 48rem) {
            display: none;
          }
        }
      }

      .search_product_right {
        display: flex;
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
        height: 100%;
        flex-direction: row;
        align-items: center;
        gap: var(--root-size);
        order: 2;
        justify-content: flex-start;

        @media (width >= 48rem) {
          justify-content: center;
          margin-left: auto;
          order: 1;
        }

        .sticker_container {
          display: none;
          @media (width >= 48rem) {
            display: flex;
            height: 100%;
          }
        }
      }

      .search_product_specializations {
        flex: 1 1 100%;
        margin-inline: 13px;

        @media (width >= 48rem) {
          margin-left: calc(28px + var(--root-size));
          margin-right: var(--root-size);
        }

        summary {
          padding-left: 0;
          margin-top: var(--root-size);
          color: var(--text-color-lighter);
          font-size: var(--text-copy-s);
        }

        .specialization_item {
          display: flex;
          font-size: var(--text-copy-xs);
          margin-bottom: var(--text-copy-s);
          padding-block: var(--text-copy-xs);
          border-radius: var(--corner-size-small);
          outline: 1px solid var(--grey);

          .lucide {
            margin-inline: var(--tiny-spacing);
            color: var(--brand-color);
            align-self: flex-start;
            transform: translateY(2px);
            flex-shrink: 0;
          }
        }
      }

      .sticker_container {
        place-items: center;
      }

      .search_product_title {
        font-size: var(--text-copy-l);
        line-height: 1.1;
        color: var(--heading-color);
        font-weight: bold;
        font-family: var(--heading-typeface), system-ui, sans-serif;
        overflow: hidden;
      }

      .description {
        display: none;
      }

      & ul.course_details {
        display: flex;
        font-size: var(--text-copy-xs);
      }

      & .price_indication {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        justify-self: end;
        font-size: var(--text-copy-l);
        margin-right: auto;

        .term_label {
          font-size: var(--text-copy-xs);
        }
      }

      & .ghost {
        height: 40px;
      }

      & .favorite { /* the fav button */

        & img {
          width: 18px;
          flex-shrink: 0;
        }
      }

      & details {
        grid-column: 2 / -1;
        max-height: calc(1.5 * var(--form-element-size));
        /*margin-top: var(--root-size);*/
        padding-bottom: var(--root-size);
        border-top: 1px solid var(--subtle-grey);
        overflow: hidden;
        transition: max-height 2s ease-out;

        &[open] {
          max-height: 100dvh;
          overflow: visible;

          summary {
            margin-bottom: var(--root-size);

            &::before {
              rotate: -90deg;
            }
          }
        }
      }

      /* Non-product search results (pages, blogs, faqs) */

      &.search_page {
        .search_page_link {
          display: block;
          padding: var(--root-size);
          color: inherit;

          @media (width >= 48rem) {
            padding: var(--root-size) var(--normal-spacing);
          }

        }

        .search_page_content {
          display: flex;
          flex-direction: column;
          gap: var(--tiny-spacing);
        }

        .search_page_title {
          font-size: var(--text-copy-l);
          line-height: 1.2;
          color: var(--heading-color);
          font-weight: bold;
          font-family: var(--heading-typeface), system-ui, sans-serif;
        }

        .search_page_nolink {
          .search_page_title {
            color: var(--text-color);
          }
        }

        .search_page_type {
          font-size: var(--text-copy-xs);
          color: var(--text-color-lighter);
          text-transform: capitalize;
        }

        .search_page_description {
          font-size: var(--text-copy-s);
          color: var(--text-color-light);
          line-height: 1.4;
        }
      }

      &:nth-of-type(4):not(:last-child),
      &:nth-of-type(8):not(:last-child),
      &:nth-of-type(12):not(:last-child) {
        position: relative;
        margin-bottom: var(--menu-height);
        padding-bottom: 6px; /* the margin-bottom property screws with the row's height */
        overflow: visible;

        &::after {
          position: absolute;
          bottom: calc(0px - var(--menu-height));
          width: 100%;
          translate: 0 -50%;
          font-size: var(--text-copy-xs);
          text-align: center;
          color: var(--text-color-faint);
          @media (width >= 48rem) {
            content: "✔︎ Flexibel studeren   ✔︎ Je docent is 24/7 bereikbaar   ✔︎ Erkende diploma's en certificaten";
          }
        }
      }

      &:nth-of-type(4):not(:last-child) {
        &::after {
          @media (width < 48rem) {
            content: "✔︎ Flexibel studeren";
          }
        }
      }

      &:nth-of-type(8):not(:last-child) {
        &::after {
          @media (width < 48rem) {
            content: "✔︎ Je docent is 24/7 bereikbaar";
          }
        }
      }

      &:nth-of-type(12):not(:last-child) {
        &::after {
          @media (width < 48rem) {
            content: "✔︎ Erkende diploma's en certificaten";
          }
        }
      }
    }
  }

  & .pagination_controls,
  & .bottom_content {
    grid-column: 1 / -1;

    @media (width >= 64rem) {
      grid-column: 7 / -1;
    }
  }

  & > button#course_compare_cta {
    --cta-color: var(--cta-orange);
    grid-column: 2 / -2;
    /*grid-row: 2 / 3;*/
    grid-row: auto;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    bottom: 100px;
    z-index: 2;
    min-height: calc(var(--form-element-size) * 1);
    display: flex;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;

    @media (width >= 64rem) {
      grid-column: 8 / -2;
    }

    &.hidden {
      display: none;
    }
  }

  & > button#course_form_cta {
    --cta-color: var(--cta-green);
    grid-column: 2 / -2;
    /*grid-row: 2 / 3;*/
    grid-row: auto;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    bottom: 42px;

    min-height: calc(var(--form-element-size) * 1);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;

    @media (width >= 64rem) {
      display: none;
    }
  }
}
div.pagination_controls {
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  gap: var(--root-size);


  .button {
    height: var(--pagination-height);
  }

  & > .browse_button {
    display: flex;
    place-items: center;
  }

  /* Pagination number containers */

  & .pagination_numbers {
    gap: calc(var(--root-size) / 2);
    align-items: center;
    height: var(--pagination-height);

    a, button {
      flex-grow: 1;
      height: 100%;
    }
  }

  /* Style for dots between page numbers */

  & .dots {
    padding: 0 calc(var(--root-size) / 2);
    color: var(--text-color-muted, #666);
  }
}
section.locations {
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  padding-top: var(--root-size);

  & > div {
    flex: 1;

    & > details {
      padding: var(--text-copy-xs) var(--text-copy-s);
      border-radius: var(--corner-size-small);

      &[open] {
        summary {
          font-weight: 900;
          color: var(--brand-color);
        }
      }

      &:nth-child(odd) {
        background: var(--grey);
      }

      & > p {
        &.guaranteed::after {
          content: "Start gegarandeerd";
          display: inline-block;
          margin-left: var(--root-size);
          padding: 1px 3px;
          border-radius: var(--corner-size-small);
          background-color: var(--cta-green);
          transform: translateY(-2px);
          color: var(--white);
          font-size: var(--text-copy-xxs);
          font-weight: 600;
        }
      }
    }
  }

  & svg, img {
    flex: 2;
    aspect-ratio: 6 / 7;
    height: 16rem;
  }

}
.review_stars {
  --empty-color: var(--grey);
  --filled-color: gold;

  position: relative;
  height: var(--text-subheading-size);
  aspect-ratio: 5/ 1;
}
.review_stars.aspect-auto {
  aspect-ratio: auto;
}
.form_progress_bar {
  --stage-dot-size: var(--text-subheading-size);

  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 60%;
  margin: 0 auto;
  margin-bottom: var(--header-height); /* TEMPORARY */;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--stage-dot-size);
    translate: 0 -50%;
    width: calc(100% - (2 * var(--stage-dot-size)));
    height: 2px;
    background: var(--brand-color-light);
  }

  & div.stage {
    --stage-glyph: "";
    --text-color: var(--text-color-faint);

    width: var(--stage-dot-size);
    height: var(--stage-dot-size);
    border-radius: 999px;
    border: 2px solid var(--brand-color-light);
    background: var(--brand-color-light);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    & span {
      translate: 0 150%;
      text-align: center;
      font-size: var(--text-copy-s);
      color: var(--text-color);
      white-space: nowrap;
    }

    &::after {
      content: var(--stage-glyph);
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      color: var(--brand-color);
      font-size: var(--text-copy-xxs);

    }

    &.completed {
      --stage-glyph: "✔︎";
    }

    &.in_progress {
      --text-color: var(--text-color-light);
      --stage-glyph: "●";
    }

    &.upcoming {
      background: none;
    }
  }
}
/* -------------------------
Finally specifically targeted elements
------------------------- */
#newsletter_signup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--root-size);
  font-size: var(--text-copy-s);

  #newsletter_signup_form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--padding-medium);
    padding: 0;

    & label {
      display: none;
    }

    & input {
      flex: 2;
    }

    & select {
      flex: 1;
    }
  }
}
#sidebar.link_list {
  & > h4 {
    border-top: none;
  }

  & li {
    padding-block: var(--text-copy-xxs);
    border-top: 2px dotted var(--subtle-grey);

    & a.chevron::before {
      margin-left: 0;
    }
  }
}
#course_compare_cta {
  anchor-name: --course-compare-anchor;
}
@keyframes slide-in-from-bottom {
  from {
    translate: 0 100vh;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}
@keyframes slide-out-to-bottom {
  from {
    translate: 0 0;
    opacity: 1;
  }

  to {
    translate: 0 100vh;
    opacity: 0;
  }
}
@keyframes slide-in-from-right {
  from {
    translate: 100% 0;
  }

  to {
    translate: 0 0;
  }
}
@keyframes slide-out-to-right {
  from {
    translate: 0 0;
  }

  to {
    translate: 100% 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
/* opener should have cursor pointer */
[data-dialog-open] {
  cursor: pointer;
}
.dialog_overlay {
  margin: auto;
  border: none;
  border-radius: var(--corner-size-small);
  box-shadow: var(--subtle-shadow);
  padding: var(--padding-medium);
  transition: opacity 0.16s ease-in, transform 0.16s ease-in, display 0.16s ease-in;
  transition-behavior: allow-discrete;
  @media (width >= 48rem) {
    padding: var(--form-element-size);
  }

  &:not(.from-right) {
    place-self: center;
    animation: slide-in-from-bottom 0.16s ease-out;
    @media (width >= 48rem) {
      width: 60dvw;
    }

    &:not([open]) {
      opacity: 0;
      transform: translateY(100vh);
    }
  }

  &.from-right {
    place-self: center end;
    width: 480px;
    height: 100vh;
    animation: slide-in-from-right 0.16s ease-out;
    margin-right: var(--root-size);

    &:not([open]) {
      opacity: 0;
      transform: translateX(100vw);
    }
  }

  & .overlay_close {
    position: absolute;
    right: var(--root-size);
    top: var(--root-size);
    box-shadow: none;
    color: var(--text-color);
    z-index: 999;
  }

  &::backdrop {
    background: oklch(from var(--text-color) l c h / 50%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
}
/* Fetch content dialog - for loading remote page content in a modal */
.fetch_content_dialog {
  & .dialog_loading,
  & .dialog_error {
    padding: calc(var(--form-element-size) * 2);
    text-align: center;
  }

  & .dialog_error {
    color: var(--red, #c00);
  }
}
& #compare_courses_submit {
  position: absolute;
  bottom: var(--form-element-size);
  right: var(--form-element-size);
}
& ul.course_compare_list {
  display: flex;
  flex-direction: column;
  gap: var(--root-size);
  counter-reset: course_compare_counter;
  margin-bottom: var(--root-size);

  & li.course_compare_candidate {
    display: flex;
    align-items: center;
    padding-inline: var(--root-size);
    counter-increment: course_compare_counter;
    position: relative;
    font-size: var(--text-copy-s);
    border-radius: var(--corner-size-small);
    padding-block: var(--padding-small);
    min-height: var(--form-element-size);

    &.unassigned {
      border: 1px dashed var(--grey);
    }

    &.assigned {
      background: var(--brand-color-faint);
      gap: var(--root-size);
      color: var(--brand-color);

      &::before {
        content: counter(course_compare_counter);
        width: var(--root-size);
        height: var(--root-size);
        background: var(--brand-color);
        color: var(--white);
        border-radius: 999px;
        font-size: var(--text-copy-xxs);
        display: grid;
        place-items: center;
      }

      & span {
        flex: 1;
      }

      & img {
        width: var(--root-size);
        aspect-ratio: 1;
      }
    }
  }
}
.embed-html {
  position: relative;
  width: 100%;
  height: 0;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}
body.PopupIframePage {
  > main {
    --root-size: var(--text-heading-size);
    --heading-color: var(--white);
    --text-title-size-temp: var(--text-giant-size);
    --text-color: var(--white);

    background: radial-gradient(circle farthest-corner at bottom left, #019ce0 0%, #000650 100%);

    h2 {
      font-size: var(--text-hero-size);
    }

    .quote_carousel {
      color: var(--white);
    }

    div.typography {
      --text-color: var(--white);
      font-size: var(--text-heading-size);

      ul.ticks_list {
        ::marker {
          color: var(--white);
        }
      }

    }
  }
}
.quote_carousel {
  --swiper-navigation-top-offset: calc(50% - 30px);
  --swiper-pagination-bottom: -6px;
  --swiper-theme-color: var(--white);
  --swiper-pagination-bullet-inactive-color: var(--white);

  width: 100%;

  @media (width >= 48rem) {
    margin-top: -60px;
    width: 400px;
    flex-grow: 1;
  }

  .quote_carousel_item {
    padding-left: var(--root-size);
    padding-right: var(--root-size);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
  }


  .swiper-button-prev,
  .swiper-button-next {
    color: var(--white);

    svg {
      height: 50%;
    }
  }

  .swiper-button-next {
    top: 138px
  }

  @media (max-width: 767px) {
    .swiper-button-next {
      top: 65px
    }
  }

  .swiper-button-next:after {
    font-family: Arial, sans-serif;
    font-size: 15px
  }

  .swiper-button-prev {
    top: 138px
  }

  @media (max-width: 767px) {
    .swiper-button-prev {
      top: 65px
    }
  }

  .swiper-button-prev:after {
    font-family: Arial, sans-serif;
    font-size: 15px
  }

  .quote_carousel_image_container {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    img {
      width: 130px;
      height: 130px;
      border: 4px solid #fff;
      -o-object-fit: cover;
         object-fit: cover;
      border-radius: 65px;
      flex-grow: 0;

      @media (width >= 48rem) {
        width: 270px;
        height: 270px;
        border-radius: 135px;
        border: 6px solid #fff;
      }
    }
  }

  .quote_carousel_text {
    text-align: center;
    font-size: var(--text-subheading-size);
  }

  @media (max-width: 767px) {
    .quote_carousel-text {
      margin-bottom: 32px;
      font-size: 15px
    }
  }


}
.blog_posts {
  display: grid;
  /* two per columns, multiple rows */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;

  gap: var(--root-size);

  > .blog_post_summary {

    > .img {
      border-radius: var(--corner-size-medium);
      width: 50%;
      flex: 1;
    }

    > article {
      display: flex;
      flex-direction: column;
      flex: 1;

      > :nth-last-child(2) {
        margin-bottom: 20px;
      }

      > :last-child {
        flex-grow: 0;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
      }
    }
  }

  @media (width >= 48rem) {
    > .blog_post_summary > article > :last-child {
      margin-top: auto;
    }
  }

  @media (width < 48rem) {
    grid-template-columns: 1fr;
  }
}
.swipeable {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;

  /* use mouse drag to scroll */
  cursor: grab;
  gap: var(--root-size);
  padding-bottom: var(--root-size);
  margin-bottom: calc(0px - var(--root-size));

  .swipe_item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-behavior: smooth;
  }

}
.comparison_page {
  position: relative;

  @media (width < 48rem) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: var(--page-margin);
  }
}
.comparison_scroll_arrow {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 64px;
  height: 64px;
  border-radius: 32px !important;
  background-color: var(--text-color-lighter);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--quick-transition);
  color: var(--white);
  border: none;

  &:hover {
    background-color: var(--text-color-light) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) !important;
  }

  &.hidden {
    opacity: 0;
    pointer-events: none;
  }

  @media (width < 48rem) {
    display: flex;
  }

  .lucide-large {
    width: 48px;
    height: 48px;
  }
}
.comparison_scroll_left {
  left: -32px;

  .lucide {
    transform: translateX(12px);
  }
}
.comparison_scroll_right {
  right: -32px;

  .lucide {
    transform: translateX(-12px);
  }
}
table.comparison_table {
  table-layout: fixed;
  width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  display: table;

  @media (width < 48rem) {
    min-width: 700px;

    tbody, thead {
      tr {
        td, th {
          padding: 10px 5px;
          font-size: var(--text-copy-s);
        }

        td:first-child, th:first-child {
          padding: var(--small-spacing);
        }
      }
    }
  }

  tbody, thead {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;

    tr {
      td, th {
        position: relative;
        vertical-align: top;
        padding: 15px 20px 15px 20px;
      }

      td:after, th:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20px;
        width: calc(100% - 40px);
        border-bottom: 2px dotted #ccc;
      }
    }

    tr:last-child {
      td:after {
        border-bottom: none;
      }
    }

    .comparison_bottom-border:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 20px;
      width: calc(100% - 20px);
      border-bottom: 2px dotted #ccc;
    }
  }
}
.comparison_remove_button {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #333;
  color: white;
  transition: var(--quick-transition);

  svg {
    color: white;
    stroke: white;
  }

  &:hover {
    background-color: #555;
    color: white;
  }
}
.comparison_link {
  display: inline-flex;
  align-items: center;
  color: var(--brand-color);
  text-decoration: underline;
  font-weight: 500;
  transition: var(--quick-transition);

  &:hover {
    color: var(--brand-color-dark);
    text-decoration: none;
  }
}
.onclick_link {
  cursor: pointer;
}
.soft_conversion_links {
  .onclick_link {
    cursor: pointer;
    font-size: var(--text-copy-s);
    color: var(--brand-color);
    gap: var(--tiny-spacing);
    padding-block: 0.2rem;

    &.underline {
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }
    }
  }
}
.contactbar {
  .onclick_link {
    display: flex;
    gap: var(--text-copy-xxs);
    align-items: center;
    white-space: nowrap;
    font-size: var(--text-copy-xs);
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}
.banner_box {
  --backdrop-color: var(--surface-light);
  position: relative;
  min-height: -moz-fit-content;
  min-height: -webkit-fit-content;
  min-height: fit-content;
  height: auto;
  padding: var(--big-spacing);
  border-radius: var(--corner-size-large);
  background-color: var(--backdrop-color);

  img {
    border-radius: var(--corner-size-small);
    margin-bottom: var(--spacing);
  }

  p + a {
    margin-top: var(--small-spacing);
  }
}
.product_title_block {
  display: flex;
  align-items: start;
  margin-bottom: var(--spacing);
  flex-direction: column;
  gap: var(--tiny-spacing);

  @media (width >= 48rem) {
    align-items: center;
    flex-direction: row;
    gap: var(--root-size);
  }
}
.product_title {
  color: var(--brand-color);
  font-size: var(--text-coursename-size);

  &[data-tag]:after {
    content: attr(data-tag);
    background: var(--heading-color);
    padding: 2px 6px;
    border-radius: var(--corner-size-small);
    font-size: var(--text-copy-xs);
    font-weight: normal;
    color: var(--white);
  }
}
.category_title_block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: var(--small-spacing);
       column-gap: var(--small-spacing);
  row-gap: var(--tiny-spacing);
  grid-column: 1 / -1;
}
.sticker_container {
  display: inline-flex;
  gap: var(--tiny-spacing);

  .sticker {
    --sticker-color: var(--brand-color);
    background: var(--sticker-color);
    padding: 2px 6px;
    border: 1px solid var(--sticker-color);
    border-radius: var(--corner-size-small);
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    font-size: var(--text-copy-xs);
    font-weight: normal;
    color: var(--white);

    &.ghost {
      background: var(--brand-color-ghost);
      color: var(--brand-color);
      border: 1px solid var(--brand-color);
    }

    &.orange {
      --sticker-color: var(--orange);
    }

    &.red {
      --sticker-color: var(--red);
    }

    &.blue {
      --sticker-color: var(--blue);
    }

    &.green {
      --sticker-color: var(--green);
    }
  }
}
.fixed_course_header {
  --heading-color: var(--brand-color);
  height: var(--floating-header-height);
  width: 100vw;
  position: fixed;
  display: grid;
  left: 0;
  grid-template-columns: var(--columns);
  grid-column-gap: var(--col-gap);
  align-items: center;
  background-color: var(--white);
  z-index: 50;
  box-shadow: var(--faint-shadow);
  color: var(--text-color-light);
  white-space: nowrap;
  transition: var(--standard-transition);
  bottom: 0;

  @media (width >= 64rem) {
    transform: translateY(-200%);
    top: 0;
    bottom: unset;

    .aboveViewport + & {
      transform: translateY(0);
    }
  }

  .title_group {
    display: none;
    align-items: center;
    gap: 20px;
    @media (width >= 64rem) {
      display: flex;
    }

    .course_header_title {
      font-size: 18px;
      margin-right: 10px;
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }

    ul {
      font-size: var(--text-copy-xs);
      gap: 30px;
      color: var(--silver-mist);
      white-space: nowrap;
      flex-shrink: 0;

      li {
        padding-left: 5px;
        color: inherit;
      }
    }

    .rating {
      gap: 2px;
      align-items: center;
      color: var(--silver-mist);
      white-space: nowrap;
      flex-shrink: 0;

      small {
        font-size: var(--text-copy-xs);
        line-height: 18px;
      }

      .review_stars {
        aspect-ratio: 100 / 24;
      }
    }

  }

  .cta_group {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--col-gap);

    @media (width >= 48rem) {
      gap: var(--mega-spacing);
      justify-content: center;
    }

    @media (width >= 64rem) {
      gap: var(--spacing);
      justify-content: end;
    }

    .cta.green {
      max-width: 300px;
      @media (width < 64rem) {
        flex-grow: 1;
      }
    }

    & p.price_indication {
      font-size: var(--text-subheading-size);
    }

    .price_line {
      white-space: nowrap;
    }

    .cost_overview_trigger {
      white-space: nowrap;
      margin-top: -2px;
    }
  }

  .price_original {
    display: block;
    font-weight: normal;
    font-size: var(--text-copy-xs);

    + .price_line {
      margin-left: 0;
    }
  }

  button.cta.green {
    align-self: center;
  }

  .cta_group .favorite {
    display: grid;
    place-items: center;
    width: var(--form-element-size);
    padding: 0;

    img {
      width: 20px;
    }
  }
}
.product_intro {
  display: flex;
  width: 100%;
  gap: var(--row-gap);
  flex-direction: column;

  @media (width >= 64rem) {
    flex-direction: row;
    gap: var(--mega-spacing);
  }
}
.pills_details_holder {
  grid-column: 1 / -1;
  grid-row: 2 / 3;

  .pills_details_summary {
    margin-bottom: var(--spacing);
  }

  .pills_details_title {
    font-size: var(--text-copy-m);
    align-self: center;
    font-weight: bold;
    margin-bottom: var(--small-spacing);
    @media (width >= 48rem) {
      margin-bottom: var(--spacing);
    }
  }

  .button.pill.ghost {
    gap: var(--tiny-spacing);

    @media (width < 48rem) {
      white-space: nowrap;
      font-size: 12px !important;
      padding-block: var(--mini-spacing) !important;
      padding-inline: var(--tiny-spacing) !important;
      color: var(--text-color-lighter);
      background-color: var(--brand-color-ghost);
    }
  }

  .pills_details {
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    flex-wrap: nowrap;
    font-size: var(--text-copy-xs);
    padding-bottom: var(--tiny-spacing); /* for the mobile scrollbar */
    gap: var(--small-spacing);
    /* snap */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    @media (width >= 48rem) {
      gap: var(--spacing);
      overflow: hidden;
      flex-wrap: wrap;
      height: -webkit-min-content;
      height: -moz-min-content;
      height: min-content;
      padding-bottom: 0;
    }

    & li {
      border: none;
      display: flex;
      flex-direction: row;
      text-overflow: ellipsis;
    }

    a.ghost {
      color: var(--cta-blue);
    }
  }
}
div.pdp_block {
  display: flex;
  flex-direction: column;

  & .course_blurb {
    @media (width >= 64rem) {
      width: 75%;
    }
  }

  .trustbuilders_group {
    display: flex;
    flex-direction: column;
    gap: var(--big-spacing);

    @media (width >= 64rem) {
      flex-direction: row;
    }

    .course_vid {
      flex: 1;
      min-height: 20px;
    }
  }

  .usps_group {
    width: 100%;

    @media (width >= 48rem) {
      flex: 1;
    }

    div.trustbuilders {
      border-top: 1px solid var(--grey);
      padding-top: var(--root-size);
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: var(--text-copy-xs), auto;
      row-gap: var(--root-size);

      .course_usps + & {
        margin-top: var(--spacing);
      }

      & .trustbuilders_title {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        font-size: var(--text-copy-xs);
        font-weight: 400;
      }

      .logos {
        display: flex;
        place-items: center;
        gap: var(--col-gap);
        grid-column: 1 / -1;
        grid-row: 2 / 3;

        & img {
          -o-object-fit: contain;
             object-fit: contain;
          height: 75px;
          filter: grayscale(1);
          opacity: 0.5;
        }
      }

    }
  }

  .course_vid {
  }

  & .pills_details_holder {
    margin-bottom: var(--big-spacing);
  }

  & .course_signup {
    display: flex;
    flex-direction: column;
    gap: var(--root-size);

    @media (width >= 64rem) {
      min-width: 320px;
      width: 25%;
    }

    & .flex_row {
      align-items: stretch;
      gap: var(--root-size);
      height: var(--large-form-element-size);

      .cta {
        flex-grow: 1;
      }
    }

    & .pricing_info {
      color: var(--cta-green);
      font-size: var(--text-copy-xs);
    }
  }
}
.video_thumbnail_wrapper,
.video_wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: none;
  border-radius: var(--corner-size-medium);

  img, video, iframe {
    width: 100%;
    height: 100%;
  }
}
.video_thumbnail_wrapper {
  /* add play_button overlay */
  position: relative;
  cursor: pointer;

  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: url('../../../themes/loi/img/icons/play_button.png') no-repeat center center;
    background-size: contain;
    pointer-events: none;
  }
}
.acronica_video {
  .initially_hidden {
    display: none;
  }
}
ul.course_usps {
  grid-column: 2 / 3;
  grid-row: auto / span 1;
  font-size: var(--text-copy-s);
  line-height: 1.7;

  li {
    display: flex;
    align-items: center;
    gap: var(--tiny-spacing);
    flex-shrink: 0;

    svg {
      flex-shrink: 0;
    }
  }
}
.course_variants {
  .course_variants_title {
    margin-bottom: var(--tiny-spacing);

    & .info_popover_trigger {
      margin-left: 0;
      position: relative;
      top: -2px;
    }
  }

  .course_variants_options {
    display: flex;
    gap: var(--spacing);

    + .flex_row {
      margin-top: var(--big-spacing);
    }
  }

  .course_variant {
    display: flex;
    flex-grow: 1;
    gap: var(--tiny-spacing);
    font-size: var(--text-copy-xs);
    align-items: center;
    background: var(--brand-color-faint);
    padding: var(--padding-small) var(--padding-medium);
    border: 1px solid var(--brand-color-light);
    border-radius: var(--corner-size-small);


    .variant-price {
      font-size: 85%;
      color: var(--text-color-light);
    }
  }
}
.course_price {
  p.price_indication {
    font-size: var(--text-title-size);
  }

  .price_original {
    opacity: 0.6;
    font-size: var(--text-copy-m);
  }


  .price_discounted {
    font-size: var(--text-title-size);
  }

  button.cost_overview_trigger {
    display: block;
  }
}
.conversion_links_title {
  font-size: var(--text-copy-s);
  font-weight: bold;
  margin-bottom: 0;
}
details {
  --heading-color: var(--brand-color);

  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--root-size);
    position: relative;
    cursor: pointer;

    .icon_dot {
      transition: rotate 0.2s ease-out;
      rotate: 0;
      width: var(--medium-icon-dot-height);
      height: var(--medium-icon-dot-height);


      @media (width >= 48rem) {
        width: var(--big-icon-dot-height);
        height: var(--big-icon-dot-height);
      }
    }
  }

  &[open] {
    > summary {

      .icon_dot {
        rotate: -180deg;
      }
    }
  }

  &.accordion {
    > summary {
      border-top: 1px solid var(--grey);
      border-bottom: 1px solid var(--grey);
      padding-block: var(--small-spacing);
      padding-inline: 0;

      > h1, > h2, > h3, > h4 {
        --heading-typeface: var(--brand-typeface);
        font-size: var(--text-copy-m);
        font-weight: normal;
        margin: 0;
      }

    }

    &[open] {
      border-bottom: 1px solid var(--grey);

      > summary {
        border-bottom: none;
      }

    }

    > ::details-content,
    > .details_content /* fallback */
    {
      padding-block: var(--spacing);
    }

    + .accordion {
      > summary {
        border-top: none;
      }
    }
  }
}
.element_accordion,
.product_element_accordion {
  + .element_accordion,
  + .product_element_accordion {
    margin-top: 0 !important;

    details {
      &.accordion {
        > summary {
          border-top: 0;
        }
      }
    }
  }
}
.content_section_container {
  .content_block_inner.typography {
    h2, .content_block_title {
      font-size: var(--text-copy-l);
      font-weight: 700;
      margin-bottom: var(--root-size);
    }
  }
}
.introduction_to_accordions {
  grid-column: 1 / -1;
  padding-inline: var(--gutter);
  font-weight: bold;

  @media (width >= 48rem) {
    display: none;
  }
}
.course_info_accordion {
  border-radius: var(--corner-size-large);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  grid-column: 1 / -1;

  @media (width >= 48rem) {
    gap: var(--root-size);
    padding: var(--root-size);
    grid-column: 2 / -2;
    background: var(--brand-color-faint);
  }

  .element {
    + .element {
      margin-top: var(--spacing);
    }
  }

  & details:has(:last-child:is(section.backdrop)) {
    padding-bottom: 0;
  }

  & > details {
    --heading-color: var(--brand-color);
    min-height: var(--large-form-element-size);
    background: var(--white);
    border-bottom: 1px solid var(--grey);

    &:first-of-type {
      border-top: 1px solid var(--grey);
    }

    &[open] {
      border-bottom: none;
    }

    @media (width >= 48rem) {
      border: 1px solid var(--grey);
      border-radius: var(--corner-size-small);
    }

    & > summary {
      height: var(--large-form-element-size);
    }


    & > section, > details {
      --heading-color: var(--text-color);
      padding-block: var(--root-size);

      .element {
        margin-inline: var(--root-size);

        &:has(> .banner-breakout) {
          margin-inline: 0;
        }
      }

      &.backdrop {
        color: var(--white);
        margin-inline: 0;
        padding-block: 0;
        display: grid;
        grid-template-columns: var(--large-form-element-size) 2fr 1fr;
        grid-template-rows: 1fr auto var(--large-form-element-size) var(--form-element-size) 1fr;
        grid-auto-flow: row;
        grid-auto-rows: auto;
        row-gap: var(--root-size);
        overflow: hidden;
        border-radius: 0 0 var(--corner-size-small) var(--corner-size-small);

        & > img {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
        }

        & > blockquote {
          grid-column: 2 / 3;
          grid-row: 2 / 3;
          font-size: var(--text-heading-size);
          font-weight: 700;
          font-style: oblique;
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 16%;
            height: 2px;
            background-color: var(--white);
            position: absolute;
            top: calc(var(--form-element-size) * -1);
          }
        }

        & > cite {
          grid-column: 2 / 3;
          grid-row: 3 / 4;
          font-style: normal;

          & span {
            display: block;

            &.name {
              font-weight: 700;
            }
          }
        }

        & > a {
          grid-column: 2 / 3;
          grid-row: 4 / 5;
          color: var(--white);
          text-decoration: underline;
        }
      }
    }

    & div.course_reviews {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      position: relative;
      -moz-column-gap: var(--form-element-size);
           column-gap: var(--form-element-size);

      & > p {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
      }

      & > img {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        max-height: var(--form-element-size);
        justify-self: end;
      }

      & .review {
        display: flex;
        flex-direction: column;
        gap: var(--text-copy-xs);
        align-items: start;
        padding-top: var(--form-element-size);
        position: relative;

        &::after {
          position: absolute;
          right: 0;
          translate: 0 50%;
          content: attr(data-score) "/10";
          font-size: var(--text-copy-s);
        }

        & blockquote {
          font-style: oblique;
        }

        & cite {
          font-style: normal;
        }

        & svg {
          --empty-color: var(--grey);
          --filled-color: gold;

          height: var(--form-element-size);
          position: relative;
        }
      }
    }

    & .leadgen {
      display: grid;
      grid-template-rows: var(--text-subheading-size) auto var(--form-element-size);
      grid-template-columns: auto;
      grid-column-gap: var(--root-size);
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      background-color: var(--brand-color-faint);

      & h3, button.cta {
        grid-column: 1 / -1;
      }

      &:has(img) {
        grid-template-columns: repeat(2, auto);

        & h3 {
          grid-column: 1 / 2;
        }

        & img {
          grid-column: 2 / 3;
          grid-row: 1 / -1;
        }
      }
    }

    & h4 + :is(p, ul) {
      margin-top: 0;
    }

    & table td {
      padding-right: var(--root-size);
    }

    &[open] {
      & > *:not(:first-child) {
        @media (width >= 48rem) {
          border-top: 1px solid var(--grey);
        }
      }

      > :last-child:not(.backdrop) {
        padding-bottom: var(--form-element-size);
      }
    }
  }
}
.content_block_inner {
  > .flow-root {
    @media (width < 48rem) {
      display: flex;
      flex-direction: column;
    }
  }
}
.leadgenerator_holder {
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);

  @media (width < 48rem) {
    order: 1;
  }

  &[class*='float-'] {
    @media (width >= 48rem) {
      margin: 0 0 var(--small-spacing) var(--spacing);
      width: 409px;
    }
  }
}
.leadgenerator {
  background-color: var(--brand-color-faint);
  padding: var(--big-spacing);
  border-radius: var(--corner-size-large);

  .leadgenerator_inner {
    display: flex;
    gap: var(--spacing);

    + * {
      margin-top: var(--spacing);
    }
  }

  .leadgenerator_title {
    font-size: var(--text-copy-l);
  }

  .leadgenerator_image {
    order: 2;
    max-width: 40%;
  }
}
.cost-table-footer {
  font-size: var(--text-copy-xs);
  color: var(--text-color-light);
  margin-top: var(--tiny-spacing);
}
.study_programme_row {
  details {
    font-size: var(--text-copy-xs);
  }

  summary {
    padding: 0;
  }

  details[open] {
    summary {
      margin-bottom: var(--spacing);
    }
  }
}
/* ========================================
   Promotions & Discounts
   ======================================== */
/* Price display with discounts */
.price_original {
  text-decoration: line-through;
  display: inline-block;

  + .price_line {
    margin-left: var(--tiny-spacing);
    display: flex;
    gap: var(--tiny-spacing);
  }
}
.price_discounted {
  font-weight: bold;
  line-height: 1;
}
/* Active promotions panel */
.active_promotions {
  background: #f0f9ff;
  border-left: 4px solid var(--green, #28a745);
  padding: 1em;
  margin: 1em 0;

  .promotion_item {
    margin-bottom: 0.5em;

    strong {
      color: var(--green, #28a745);
    }

    .promotion_subline {
      margin-top: 0.25em;

      small {
        opacity: 0.8;
      }
    }
  }
}
.product_group_title {
  color: var(--text-color);
  font-size: 14px;
  font-weight: normal;

  @media (width >= 48rem) {
    color: var(--heading-color);
    font-size: var(--text-subheading-size);
    font-weight: bold;
    margin-bottom: 0;
  }
}
/* Promo figure with promotions */
.promo {
  .promo_shortcode {
    font-weight: 300;
  }

  figcaption {
    p.discount_amount {
      color: var(--green, #28a745);
      font-weight: bold;
      margin-top: 0.5em;
    }
  }
}
#cost_overview_dialog {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  border: none;
  box-shadow: var(--subtle-shadow);
  width: 30%;
  min-width: 420px;
  max-width: 650px;
  height: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0 0 0 auto;
  z-index: 9999;
  background: var(--white);

  @media (width < 48rem) {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  &::backdrop {
    background: oklch(from var(--text-color) l c h / 25%);
  }

  &[open] {
    display: flex;
  }

  &[opening] {
    animation: slide-in-from-right 300ms forwards;

    @media (width < 48rem) {
      animation: slide-in-from-bottom 300ms forwards;
    }

    &::backdrop {
      animation: fade-in 300ms forwards;
    }
  }

  &[closing] {
    animation: slide-out-to-right 300ms forwards;
    pointer-events: none;
    inset: 0;

    @media (width < 48rem) {
      animation: slide-out-to-bottom 300ms forwards;
    }

    &::backdrop {
      animation: fade-out 300ms forwards;
    }
  }

  & .title_container {
    padding: var(--gutter);
    position: relative;
    background: var(--brand-color);
    height: var(--header-height);

    & .title {
      color: var(--white);
      font-size: var(--text-title-size);
      font-weight: bold;
      margin: 0;

      &:focus,
      &:focus-visible {
        outline: none;
      }
    }

    & button {
      top: 12px;
    }
  }

  & .info_container {
    padding: var(--gutter);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;

    & .included_costs {
      padding-top: var(--spacing);
      padding-bottom: var(--spacing);

      & .ticks_list {
        padding-left: 12px;
      }
    }

    & .discount_info {
      margin: 0 0 2rem 0;
      border: 1px solid var(--green);
      padding: 0.3rem;
    }

    & .title {
      color: var(--text-color);
      margin: 0 0 var(--small-spacing);
    }

    & .dialog_variant_options {
      display: flex;
      gap: var(--small-spacing);
      margin-bottom: var(--spacing);

      & .dialog_variant_option {
        cursor: pointer;
        transition: var(--standard-transition);

        &:has(input:checked) {
          border-color: var(--brand-color);
        }
      }
    }

    & .dialog_variant_options_title,
    & .dialog_payment_type_options_title {
      margin-top: var(--spacing);
    }

    & .dialog_payment_type_options {
      display: flex;
      gap: var(--small-spacing);
      margin-bottom: var(--spacing);

      & .dialog_payment_type_option {
        cursor: pointer;
        transition: var(--standard-transition);

        &:has(input:checked) {
          border-color: var(--brand-color);
        }

        &.disabled {
          opacity: 0.4;
          pointer-events: none;
        }
      }
    }

    & .discount_info {
      display: flex;
      align-items: center;
      gap: var(--small-spacing);
      font-size: var(--text-copy-xs);
      color: #00B900;
      margin-bottom: var(--spacing);
    }

    & .price_details dl:first-child {
      margin-top: var(--spacing);
    }

    & .price_details dl {
      display: flex;
      flex-flow: row wrap;
      font-size: var(--text-copy-s);
      border-bottom: 1px solid var(--grey);
      padding-bottom: 1rem;
      margin-bottom: 1rem;

      & dt {
        flex-basis: 60%;
        padding: 2px 0;
        text-align: left;
        color: var(--text-color-lighter);

        &.small {
          font-size: var(--text-copy-xxs);
          font-style: italic;
        }
      }

      & dd {
        flex-basis: 40%;
        flex-grow: 1;
        margin: 0;
        padding: 2px 4px;
        text-align: right;
        white-space: nowrap;

        &.small {
          font-size: var(--text-copy-xxs);
          font-style: italic;
        }
      }

      & .discount {
        color: #00B900;

        & > strong {
          position: relative;

          & > span {
            position: absolute;
            right: -7px;
          }
        }
      }

      &.dl_total {
        border: none;
        padding-bottom: 0;
        margin-bottom: 0;

        & dt {
          color: var(--text-color);
        }
      }
    }

    & .subtitle_price {
      color: var(--text-color-lighter);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: 0 0 var(--small-spacing);

      &.discount {
        color: var(--orange);

        & .price_wrapper {
          color: var(--orange);
        }
      }

      &.starting_new_section {
        border-top: 1px solid var(--subtle-grey);
        padding-top: var(--spacing);
      }

      & .price_wrapper {
        text-wrap: nowrap;
        flex-shrink: 0;
        margin-left: 0.5rem;
        color: var(--text-color);

        & .price {
          font-weight: 700;
        }
      }
    }

    & .price_details {
      & .subtitle_price {

        &.starting_new_section {
          margin-top: var(--spacing);
        }

        &.small {
          font-style: italic;
          font-size: var(--text-copy-xxs);
        }
      }
    }

    & .total_amount_wrapper {
      color: var(--text-color);
      border-top: 1px solid var(--subtle-grey);
      margin: 0;

      & select {
        padding: var(--small-spacing);
        border: 1px solid var(--brand-color-light);
        border-radius: var(--corner-size-small);
        cursor: pointer;
      }
    }

    & .cta_group {
      display: flex;
      flex-direction: column;
      margin: 3rem 0;
      gap: var(--root-size);

      & .button_icon {
        display: inline;
        vertical-align: -3px;
        margin-right: 4px;
      }
    }

    & .info_text {
      font-style: italic;
      font-size: var(--text-copy-xxs);
      color: var(--text-color-faint);

      & + .info_text {
        border-top: 1px solid var(--grey);
        margin-top: 12px;
        padding-top: 12px;
      }
    }

    & .paymenttype_group .info_text + .info_text {
      border-top: none;
      margin-top: 0;
      padding-top: 0;
    }

    & .visual_promotion_wrapper {
      margin-top: 15px;
      padding: 10px;
      border: 1px solid var(--green);

      strong {
        font-size: 16px;
        display: block;
        margin-bottom: 4px;
      }

      p {
        font-size: 12px;
        color: var(--text-color-lighter);
      }
    }

    & .bottom_alignment {
      margin-top: auto;

      & .info_text + .info_text {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
      }

      &:has(.external_exam_costs:not(.hidden\!)) > .info_text:last-child {
        border-top: 1px solid var(--grey);
        margin-top: 12px;
        padding-top: 12px;
      }
    }
  }
}
.kostentabel {
  border-collapse: collapse;
  margin-bottom: 10px;
  max-width: 420px;

  th, td {
    border: 1px solid #d9d9d9;
    padding: 5px 10px;
  }

  th {
    text-align: left;
    background: #f1f1f1;
  }

  + .exam_costs_external {
    margin-top: 10px;
  }

  + .cost-table-footer {
    margin-top: 10px;
  }
}
.leadform_holder {
  .dialog_overlay &.mt-big {
    margin-top: 0;

    .element_intro {
      width: calc(100% - 50px);
    }
  }

  .element_title {
    h1 {
      font-size: var(--text-heading-size);
      margin-bottom: var(--spacing)
    }
  }

  fieldset {
    padding-bottom: var(--small-spacing);

    div.field {
      row-gap: 0;

      &.optionset,
      &.fieldgroup {
        > label.left {
          font-weight: bold;
        }
      }

      & :is( div, li ):has( > input[type="radio"]) {
        outline: none;
        padding: 0;
        gap: 5px;

        > label {
          padding-right: 0;
        }

        &.odd, &.even {
          margin-bottom: 0;
        }

        &:has( > input:checked) {
          background: transparent;
        }
      }

    }
  }

  .leadform_footnote {
    margin-top: var(--big-spacing);
  }
}
/* #feedback2: promo-note in de kostentabel - RichText-tekst links, i-tje/tekstlink rechts
   ernaast (i.p.v. eronder). Gedeeld door de oude PDP (i-tje) en PDP 2026 (tekstlink);
   pdp.css zit in de app.css-bundle en wordt dus op beide geladen. */
.visual_promotion small {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Het <small>-element verkleint standaard ~0.83x -> 10px; expliciet terug naar 12px (#191). */
  font-size: var(--text-copy-xs);
}
.visual_promotion__text {
  flex: 1 1 auto;
}
.visual_promotion__info {
  flex: 0 0 auto;
}
/* =============================================================================
   PDP 2026 (new hardcoded product page). Mobile-first.
   Toggle: Product.UsePdPv2 (ProductPdpV2Extension). Figma: PDP Re-design - edit (5:749).
   Desktop styles layered on top later (P6) via --md-above etc.
   ============================================================================= */
#pdp_v2 {
  --text-color: #0F172B;
  --pdp-card-border: #E2E8F0;
  --pdp-radius: 12px;
  --pdp-sticky-height: 72px;
  --pdp-pad: var(--spacing);

  @media (width >= 48rem) {
    --pdp-pad: 20px;
    /* Content container. Mobile-first, incrementeel omhoog: vanaf 768px 24px gutter per kant
       (48px totaal), vanaf 1280px 50px per kant (zie --xl-above). 1330px cap, full-bleed
       lamel-achtergronden; alleen de content-wrappers gebruiken deze breedte (#192). */
    --pdp-container: min(1330px, 100% - 48px);
    /* Shared two-column geometry, tweakable in one place. The hero panel's right column is
       --pdp-aside; blocks that sit edge-to-edge in the container (e.g. na-deze) add the panel's
       20px inner padding to line their right column up with it (--pdp-aside-edge). Left column
       is always the remaining 1fr; gap is --pdp-col-gap. */
    --pdp-col-gap: 40px;
    --pdp-aside: 300px;
    --pdp-aside-edge: calc(var(--pdp-aside) + var(--pdp-pad));
  }

  /* Vanaf 1280px de originele maten: 55px schermrand-marge per kant + bredere aside (#192). */
  @media (width >= 80rem) {
    --pdp-container: min(1330px, 100% - 110px);
    --pdp-aside: 402px;
  }

  /* Product Layout sits inside <main>'s named-column grid; span every track so
     the PDP is full-bleed (hero image edge-to-edge) instead of collapsing into
     a 0-width gutter track. */
  grid-column: 1 / -1;
  width: 100%;
  color: var(--text-color);
  font-size: var(--text-copy-s);
  line-height: 1.57;

}
/* ---- Breadcrumb (overlays the hero image) -------------------------------- */
.pdp_breadcrumb {
  position: absolute;
  z-index: 3;
  inset: 0 auto auto 0;
  padding: var(--small-spacing) var(--pdp-pad);

  /* Desktop: align the trail to the 1330 container (absolute + left/right 0 + margin auto
     centres it). padding-inline:0 zet de linkerrand op de container-rand = uitgelijnd met
     het logo en menu (#188). padding-top 15px = 5px lager dan voorheen (#188). */
  @media (width >= 48rem) {
    inset: 0 0 auto 0;
    width: var(--pdp-container);
    margin-inline: auto;
    padding-top: 15px;
    padding-inline: 0;
  }
}
.pdp_breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-copy-xs);

  /* Desktop shows the full trail instead. */
  @media (width >= 48rem) {
    display: none;
  }
}
/* Full desktop trail: Home > ...ancestors. Hidden on mobile (back-link shows there). */
.pdp_breadcrumb__full {
  display: none;

  @media (width >= 48rem) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-copy-xs);
    color: var(--white);
  }
}
.pdp_breadcrumb__crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* Chevron-right separator before every crumb except the first. White, like the trail. */

  & + &::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--white);
    -webkit-mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
            mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
    opacity: 0.85;
  }
}
.pdp_breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
/* White over the hero image (the theme's link colour would otherwise win over the
   hero's inherited white). Only the desktop trail uses these links. */
.pdp_breadcrumb__full .pdp_breadcrumb__link {
  color: var(--white);
}
.pdp_breadcrumb__link:hover {
  text-decoration: underline;
}
/* Home crumb: house icon + label. */
.pdp_breadcrumb__home {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: currentcolor;
  -webkit-mask: url("../img/icons/home-open.svg") center / contain no-repeat;
          mask: url("../img/icons/home-open.svg") center / contain no-repeat;
}
/* back.svg hardcodes stroke="white", so mask it with currentcolor instead of
   using it as a background-image - that way it follows the breadcrumb's text
   colour if the desktop variant ever sits on a light background. */
.pdp_breadcrumb__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentcolor;
  -webkit-mask: url("../img/icons/back.svg") center / 16px 16px no-repeat;
          mask: url("../img/icons/back.svg") center / 16px 16px no-repeat;
}
/* ---- Hero = the image banner, and only that ------------------------------
   Colour root for everything drawn on top of the photo (breadcrumb, kicker,
   H1). The panel below is a separate block (.pdp_top__panel) on the page's
   own white background.
   ------------------------------------------------------------------------- */
.pdp_hero {
  position: relative;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Fallback behind the photo (and visible where the crop doesn't reach). */
  background: var(--brand-color);
  color: var(--white);

  /* Desktop: fixed 300px band (Figma), full-bleed image with the content + ripple
     overlaid on the left. The panel below is pulled up 53px to overlap the band, so the
     headline (flex-end aligned) gets a matching 53px bottom padding to sit 53px higher. */
  @media (width >= 48rem) {
    min-height: 300px;
    padding-bottom: 53px;
  }


  .hero_ripple {
    overflow: hidden;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    width: 306px;
    height: 298px;
    top: 0;

    /* Vanaf 768px is de hero 300px hoog (mobiel 160px), dus de ripple proportioneel
       mee-schalen: factor 300/160 = 1,875 op de mobiele maten (#192). */
    @media (width >= 48rem) {
      width: 574px;
      height: 559px;
      top: -90px;
    }

    /* Pas vanaf 1440px de grote clipping-window op het horizontale midden van de band
       (right:50%), naar links uitstrekkend (Figma 1027 x 1000). Onder 1440 blijft de
       mobiele ripple staan, anders schuift-ie t.o.v. de content naar links (#192). */
    @media (width >= 90rem) {
      right: 50%;
      left: auto;
      top: 0;
      width: 1027px;
      height: 1000px;
    }

    .hero_ripple_inner {
      position: relative;

      img {
        position: absolute;
        /* Mobile: 306 x 297.8, left of content -170px, top aligned at 0 */
        width: 306px;
        height: 297.8px;
        left: -170px;
        top: 0;
        /* The global img reset caps width at 100% of the (narrow) container; the desktop
           ripple is wider than its window, so opt out. */
        max-width: none;
      }

      /* Vanaf 768px de mobiele ripple-afbeelding proportioneel mee-schalen (1,875x,
         hero 160px -> 300px): 306->574, 297.8->558, left -170->-319 (#192). */
      @media (width >= 48rem) {
        img {
          width: 574px;
          height: 558px;
          left: -289px;
        }
      }

      @media (width >= 90rem) {
        img {
          /* Desktop (>=1440): 906 x 881.72 (Figma). */
          width: 1027px;
          height: 1000px;
          left: -200px;
          top: -310px;
          bottom: auto;
        }
      }
    }
  }


}
.pdp_hero__img {
  position: absolute;
  inset: 0;
  z-index: 1;

  &:after {
    content: '';
    background: linear-gradient(270.05deg, rgba(0, 0, 0, 0) 31.88%, rgba(0, 0, 0, 0.5) 99.96%);
  }

  picture {
    height: 100%;
  }

  img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 50% 0;
       object-position: 50% 0;
  }

}
/* Veil over the photo so the white breadcrumb (top) and headline (bottom)
   both stay legible against a bright image. */
.pdp_hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
          180deg,
          rgb(0 0 0 / 35%) 0%,
          rgb(0 0 0 / 0%) 30%,
          rgb(0 0 0 / 0%) 45%,
          rgb(0 0 0 / 55%) 100%
  );
}
/* The theme sets an explicit `color` on p/h1/a, so they never inherit the
   white above. Force it back for everything drawn on top of the photo. */
.pdp_hero :is(p, h1, a) {
  color: inherit;
}
.pdp_hero__headline {
  position: relative;
  z-index: 3;
  padding: var(--pdp-pad);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 35px; /* to make sure the labels never go over the crumbs */

  /* Desktop: text column centred in the 1330 container (image stays full-bleed). The
     20px --pdp-pad sits inside that width. */
  @media (width >= 48rem) {
    width: var(--pdp-container);
    margin-inline: auto;
    padding-top: 45px; /* to make sure the labels never go over the crumbs */
  }
}
/* Meta row above the kicker: rating (when the product has reviews) + labels. */
.pdp_hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--small-spacing);

  /* Desktop: when the labels sit on their OWN row (not compact), the row-gap between the rating
     and the labels is 20px; when compact (inline after the rating) keep the tighter gap. */
  @media (width >= 48rem) {
    gap: 20px;

    .pdp_hero__headline--compact & {
      gap: var(--small-spacing);
    }
  }
}
.pdp_hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pdp_hero__rating .review_stars {
  height: 14px;
  width: 55px;
  aspect-ratio: auto;

  @media (width >= 48rem) {
    width: 67px;
    height: 16px;
  }

}
.pdp_hero__rating-count {
  font-family: var(--brand-typeface);
  font-weight: 500;
  font-size: 8px;
  line-height: 16px;
  /* Figma: -0.3%, i.e. -0.003em. */
  letter-spacing: -0.003em;
  text-transform: uppercase;
  text-box: trim-both cap alphabetic;
}
/* Kicker is nu een block-span binnen de H1 (#189). */
.pdp_hero__kicker {
  display: block;
  margin: 0;
  font-family: var(--brand-headline);
  font-weight: 300;
  font-size: 24px;
  line-height: 32px;

  @media (width >= 48rem) {
    font-size: 32px;
    line-height: 40px;
  }
}
.pdp_hero__title {
  margin: 0;
  font-family: var(--brand-headline);
  font-weight: 700;
  font-size: 28px;
  line-height: 32px;

  @media (width >= 48rem) {
    font-size: 40px;
    line-height: 48px;
  }
}
/* Titeltekst-span binnen de H1 (naast de kicker); erft de H1-typografie. */
.pdp_hero__title-main {
  display: block;
}
.pdp_hero__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smaller-spacing);
  margin: 0;

  /* AC: labels sit on their own line between the rating and the title when there is room, else
     inline after the rating. Mobile is ALWAYS inline (auto basis). Desktop defaults to the own
     line; a JS fit check (initPdpHeroLabels) adds `--compact` to the headline when the title
     wraps (no room), which drops the labels back inline. */
  @media (width >= 48rem) {
    flex-basis: 100%;

    .pdp_hero__headline--compact & {
      flex-basis: auto;
    }
  }
}
/* Labels in the hero meta row are neutral grey chips, not the coloured stickers
   used elsewhere. `--sticker-color` drives both background and border in
   components.css, so overriding it is enough; only the text colour is separate.
   Needs (0,4,0) to beat `.blue:is(.sticker_container .sticker)` at (0,3,0)
   without depending on stylesheet order. */
.pdp_hero .pdp_hero__labels.sticker_container .sticker {
  --sticker-color: #f3f5f7;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  color: var(--text-color-neutral-700);
  opacity: 1;
  font-family: var(--brand-typeface);
  font-weight: 400;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0;

  /* Figma's leading-trim: CAP_HEIGHT. Progressive enhancement - ignored by
     browsers without text-box support, which just keeps the default half-leading. */
  text-box: trim-both cap alphabetic;
}
/* ---- Panel (content under the hero banner) ------------------------------ */
.pdp_top__panel {
  padding: var(--pdp-pad);
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    /* Frosted card centred in the 1330 container (hero image above is full-bleed), Figma
       Frame 88: 20px padding, 24px radius, translucent white. Height grows with content. */
    width: var(--pdp-container);
    margin-inline: auto;
    padding: var(--pdp-pad);
    border-radius: 24px;
    /* Overlap the hero band by 53px (Figma), sitting visibly ON TOP of it. Pull up with
       negative margin-top (NOT transform): a transformed ancestor becomes the containing
       block for its position:fixed descendants, which would trap the intro drawer inside the
       1330 panel and leave it visible in the gutter. */
    position: relative;
    z-index: 2;
    margin-top: -53px;

    /* Two columns (Figma): left (specs/accred/week) fills, right (intro/CTA/usps/leads) is the
       shared --pdp-aside width, --pdp-col-gap gap. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pdp-aside);
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    align-items: start;

    /* Frosted glass: the hero shows through the panel, slightly blurred. backdrop-filter on
       the panel itself would (like transform) make it the containing block for its
       position:fixed intro drawer and drop it in the gutter - so the fill + blur sit on a
       pseudo behind the content (z-index:-1). Only the 53px overlapping the hero has an image
       to blur; the rest is over the white page. */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: 24px;
      background: rgb(255 255 255 / 87%);
      -webkit-backdrop-filter: blur(5px);
              backdrop-filter: blur(5px);
    }

    /* Gradient border (Figma #FFF -> #E2E8F0) via a mask ring: border-image ignores
       border-radius (square corners) and an opaque border-box layer would hide the blur. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: 24px;
      padding: 1px;
      background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }
  }
}
/* Panel columns. Mobile: display:contents so the wrappers vanish and the flat mobile order
   is preserved (via the per-item `order` below) - mobile DOM/render unchanged. Desktop: each
   wrapper becomes a grid column that stacks its own cards. */
.pdp_top__col {
  display: contents;

  @media (width >= 48rem) {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }
}
.pdp_top__col--main {
  @media (width >= 48rem) {
    grid-column: 1;
  }
}
.pdp_top__col--aside {
  @media (width >= 48rem) {
    grid-column: 2;
  }
}
/* One `order` sequence that both (a) reproduces the flat mobile order when the wrappers are
   display:contents, and (b) sorts each desktop column. No media query needed: partitioning
   these values into the two wrappers keeps each column's internal order correct too. */
.pdp_top__panel .pdp_top__intro {
  order: 1;
}
.pdp_top__panel .pdp_specs {
  order: 2;
}
/* Promoties direct onder de specs: zelfde order als specs, DOM staat ze erna, dus ze
   vallen tussen specs (2) en accred (3). Zonder order zouden ze naar order:0 = bovenaan. */
.pdp_top__panel .pdp_top__promos {
  order: 2;
}
.pdp_top__panel .pdp_accred_slider {
  order: 3;
}
.pdp_top__panel .pdp_top__actions {
  order: 4;
}
.pdp_top__panel .pdp_week {
  order: 5;
}
.pdp_top__panel .pdp_top__cta {
  order: 6;
}
.pdp_top__panel .pdp_usps {
  order: 7;
}
.pdp_top__panel .pdp_leads {
  order: 8;
}
/* "Introductie" heading above the intro - desktop only (Figma: Barlow 32/40). Mobile has no
   such heading, so it stays hidden there. */
.pdp_top__intro-title {
  display: none;

  @media (width >= 48rem) {
    display: block;
    margin: 0 0 8px;
    font-family: var(--brand-headline);
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
  }
}
/* Intro. $IntroText is rich text, and the theme sets an explicit `color` on p/li,
   so colouring the wrapper alone would never reach the copy. */
.pdp_top__intro-text,
.pdp_top__intro-text :is(p, li, span) {
  color: var(--text-color-neutral);

  /* Desktop: Roboto Light 16/24 (Figma). */
  @media (width >= 48rem) {
    font-family: var(--brand-light-typeface);
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
  }
}
.pdp_top__intro-text[data-clamp] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;

  /* Desktop: 3 lines (mobile keeps 4). */
  @media (width >= 48rem) {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}
.pdp_top__intro-text:empty {
  display: none;
}
/* "Meer informatie over deze studie" link: 12px mobile (#187), 16/24 desktop (Figma). */
.pdp_top__intro .pdp_link {
  font-size: 12px;

  @media (width >= 48rem) {
    font-size: 14px;
    line-height: 22px;
  }
}
/* Rendered as a <button> (opens the intro modal) but must read as a link.
   A bare <button> in this theme inherits the CTA pill chrome - reset it. */
.pdp_link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--tiny-spacing);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;

  &, &:visited {
    color: var(--brand-color);
  }

  &:hover {
    text-decoration: underline; /* #188 */
  }

  &:after {
    content: "";
    width: 16px;
    height: 16px;
    background: currentcolor;
    -webkit-mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
            mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
  }

  &.smaller {
    font-size: var(--text-copy-xs);

    &:after {
      width: 14px;
      height: 14px;
    }
  }
}
/* ---- Intro drawer: native <dialog> slide-in from the right --------------- */
/* Full-cover on mobile, 477px on desktop. The native <dialog> box IS the panel
   (pinned right); ::backdrop is the dim overlay. transform animates via
   @starting-style + allow-discrete so both enter and exit slide. */
.pdp_drawer {
  /* The drawer can be body-appended (mobile <details> drawer) outside the #pdp_v2
     scope, so redeclare the pdp-scoped tokens it uses here - otherwise --pdp-pad /
     --pdp-card-border / --text-color are undefined and padding/borders break. */
  --pdp-card-border: #E2E8F0;
  --pdp-radius: 12px;
  --pdp-pad: var(--spacing);
  --text-color: #0F172B;

  position: fixed;
  inset: 0 0 0 auto; /* pin to the right edge, full height */
  z-index: 100;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0; /* override the UA-centred dialog */
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--text-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  transform: translateX(100%);
  transition: transform 0.3s ease,
  overlay 0.3s ease allow-discrete,
  display 0.3s ease allow-discrete;

  /* Desktop: narrow right-hand slide-in panel (Figma) instead of full-width. Stays full
     viewport height. */
  @media (width >= 48rem) {
    width: 440px;

    /* Content-height variant (grows with content, capped at 100dvh). Commented out - Terry
       prefers full-height for now; re-enable to switch. */
    /* inset: 0 0 auto auto;
    height: auto;
    max-height: 100dvh; */
  }
}
.pdp_drawer[open] {
  transform: translateX(0);
}
/* Enter from off-screen right. */
@starting-style {
  .pdp_drawer[open] {
    transform: translateX(100%);
  }
}
.pdp_drawer::backdrop {
  background: rgb(0 0 0 / 40%);
  opacity: 0;
  transition: opacity 0.3s ease,
  overlay 0.3s ease allow-discrete,
  display 0.3s ease allow-discrete;
}
.pdp_drawer[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .pdp_drawer[open]::backdrop {
    opacity: 0;
  }
}
.pdp_drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  padding: var(--spacing) var(--pdp-pad);
  border-bottom: 1px solid var(--pdp-card-border);

  @media (width >= 48rem) {
    border-bottom: 0;
    padding-top: 40px;
    padding-inline: 40px;
  }
}
.pdp_drawer__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp_drawer__subtitle {
  --text-color: var(--text-color-neutral-700);
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}
/* Phase drawer (design #31): shaded body behind the white module cards. */
.pdp_drawer--phase .pdp_drawer__body {
  background: #F3F5F7;
}
.pdp_drawer__title {
  margin: 0;
  font-family: var(--brand-headline);
  font-weight: 300;
  font-size: 24px;
  line-height: 32px;
  color: var(--text-color);
}
.pdp_drawer__close {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  background: #f3f5f7;
}
/* X = two 1.25px diagonals of a 10×10 box (diagonal = 10·√2 ≈ 14.14px). CSS
   strokes instead of an SVG mask so the 1.25px width is exact. */
.pdp_drawer__close::before,
.pdp_drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14.14px;
  height: 1.25px;
  border-radius: 1px;
  background: var(--text-color-neutral);
}
.pdp_drawer__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.pdp_drawer__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.pdp_drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--spacing) var(--pdp-pad);

  @media (width >= 48rem) {
    padding-inline: 40px;
    padding-bottom: var(--mega-spacing);
  }
}
.pdp_drawer__body :is(p, li) {
  color: var(--text-color-neutral-600);
}
/* Intro drawer rich-text opmaak (#187): bullets als opsomming, koppen niet te groot,
   witregels tussen paragrafen. Gescoped op de intro-dialog zodat phase/andere drawers
   ongemoeid blijven. */
#pdp_intro_dialog .pdp_drawer__body {
  & :is(ul, ol) {
    margin: 0 0 var(--spacing);
    padding-left: 1.25em;
  }

  & ul {
    list-style: disc;
  }

  & ol {
    list-style: decimal;
  }

  & li {
    margin-bottom: 0;
  }

  & p {
    margin: 0 0 var(--spacing);
  }

  & :is(p, ul, ol):last-child {
    margin-bottom: 0;
  }

  & :is(h2, h3, h4) {
    margin: var(--spacing) 0 0; /* margin-bottom 0 */
    font-weight: 700;
    font-size: var(--text-copy-s); /* 14px */
    line-height: 1.5;
    color: var(--text-color-neutral-700);
  }

  & :is(h2, h3, h4):first-child {
    margin-top: 0;
  }
}
/* Sticky footer: full-width "Sluiten" outline button (2px border, radius 8). */
.pdp_drawer__foot {
  flex: 0 0 auto;
  padding: var(--small-spacing) var(--pdp-pad);
  padding-bottom: calc(var(--small-spacing) + env(safe-area-inset-bottom, 0px));

  @media (width >= 48rem) {
    padding-bottom: 28px;
    padding-inline: 40px;
  }
}
.pdp_drawer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 2px solid var(--brand-color-pale);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-color);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
@media (width >= 48rem) {
  .pdp_drawer,
  .pdp_drawer[open] {
    width: 477px;
    max-width: 477px;
  }
}
/* ---- Specifications: ONE pale card, 2-col grid of icon-tile cells -------- */
.pdp_specs {
  padding: var(--spacing);
  background: #F2FAFE;
  border: 1px solid var(--brand-color-pale);
  border-radius: var(--pdp-radius);

  @media (width >= 48rem) {
    padding: 24px; /* tussenmaat 768+; #192 */
  }

  @media (width >= 80rem) {
    padding: 40px; /* origineel vanaf 1280 */
  }
}
.pdp_specs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing);

  /* Tussenmaat (768-1279) houdt de mobiele 2-koloms-layout; pas vanaf 1280 de 3-koloms
     desktop-rij (Figma: studieduur | contactdag | lesgeld) (#192 #70). */
  @media (width >= 80rem) {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.pdp_specs__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon value" "icon subvalue";
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-content: flex-start;

  /* Mobiel EN tussenmaat (< 1280): ShowOnMobile=off verbergen; studieduur (duration) +
     lesgeld (price_per_term) als laatste twee tegels. Mobile-first: dit is de basis, de
     desktop-set overschrijft pas vanaf 1280 (#185/#192 #70). */
  &.pdp_specs__item--no-mobile {
    display: none;
  }

  &[data-spec-type="duration"] {
    order: 1;
  }

  &[data-spec-type="price_per_term"] {
    order: 2;
  }

  /* Vanaf 1280: desktop-set - mobiel-verborgen tegels weer tonen, natuurlijke volgorde,
     en HideOnDesktop-tegels verbergen. */
  @media (width >= 80rem) {
    &.pdp_specs__item--no-mobile {
      display: grid;
    }

    &[data-spec-type="duration"],
    &[data-spec-type="price_per_term"] {
      order: 0;
    }

    &.pdp_specs__item--no-desktop {
      display: none;
    }
  }
}
.pdp_specs__icon {
  grid-area: icon;
  align-self: start;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-600);

  @media (width >= 48rem) {
    width: 48px;
    height: 48px;
  }
}
.pdp_specs__label {
  grid-area: label;
  font-size: var(--text-copy-xxs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color-neutral);
  margin-top: 3px;

  @media (width >= 48rem) {
    margin-top: 5px;
    font-size: 12px;
    line-height: 16px;
  }
}
.pdp_specs__value {
  grid-area: value;
  font-size: var(--text-copy-xs);

  @media (width >= 48rem) {
    font-size: 14px;
    line-height: 22px;
  }
}
/* Small sub-line under a spec value (e.g. duration -> "Bij 15-20 uur per week"). */
.pdp_specs__subvalue {
  grid-area: subvalue;
  font-size: 10px;
  line-height: 20px;
  color: var(--text-color-neutral-600);
  white-space: nowrap;

  @media (width >= 48rem) {
    font-size: 12px;
    line-height: 20px;
  }
}
.pdp_specs__value a {
  color: inherit;
}
/* Lesgeld-value ("€ 228,65 p/m") nooit afbreken; overige spec-values mogen wel wrappen. */
.pdp_specs__item[data-spec-type="price_per_term"] .pdp_specs__value {
  white-space: nowrap;
}
/* Lesgeld met korting: oude prijs doorgestreept naast de nieuwe prijs. */
.pdp_specs__old {
  color: var(--text-color-neutral-600);
  text-decoration: line-through;
}
/* Kortingsuiting onder het lesgeld ("Nu met [x] korting"), oranje en klikbaar. */
.pdp_specs__subvalue--discount {
  color: #FE8633;
  white-space: normal;
}
/* Bij korting: verberg de termijnen-subvalue, alleen de kortingsuiting tonen. */
.pdp_specs__item:has(.pdp_specs__subvalue--discount) .pdp_specs__subvalue:not(.pdp_specs__subvalue--discount) {
  display: none;
}
.pdp_specs__discount-link {
  background: transparent;
  color: #FE8633;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}
/* The icon glyph itself: a mask so it takes the brand colour. Keyed on the
   SpecificationDefinition.Icon value (filename in themes/loi/img/icons). */
.pdp_specs__icon[data-icon]::before,
.pdp_lead__icon[data-icon]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-color);
  -webkit-mask: var(--icon) center / 24px 24px no-repeat;
          mask: var(--icon) center / 24px 24px no-repeat;
}
.pdp_specs__icon[data-icon=""]::before,
.pdp_lead__icon[data-icon=""]::before {
  content: none;
}
[data-icon="certificate"] {
  --icon: url("../img/icons/certificate.svg");
}
[data-icon="student-hat"] {
  --icon: url("../img/icons/student-hat.svg");
}
[data-icon="calendar"] {
  --icon: url("../img/icons/calendar.svg");
}
[data-icon="clock"] {
  --icon: url("../img/icons/clock.svg");
}
[data-icon="euro"] {
  --icon: url("../img/icons/euro.svg");
}
[data-icon="werk"] {
  --icon: url("../img/icons/werk.svg");
}
[data-icon="ervaring"] {
  --icon: url("../img/icons/ervaring.svg");
}
[data-icon="book"] {
  --icon: url("../img/icons/book.svg");
}
/* Not offered by SpecificationDefinition::getIconOptions(), but still emitted by
   Product::getConversionLinks() for the kostenoverzicht lead button. */
[data-icon="checklist"] {
  --icon: url("../img/icons/checklist.svg");
}
[data-icon="proefles"] {
  --icon: url("../img/icons/proefles.svg");
}
[data-icon="studiegids"] {
  --icon: url("../img/icons/studiegids.svg");
}
[data-icon="kostenoverzicht"] {
  --icon: url("../img/icons/kostenoverzicht.svg");
}
[data-icon="laptop-play"] {
  --icon: url("../img/icons/laptop-play.svg");
}
[data-icon="classroom-online-1"] {
  --icon: url("../img/icons/classroom-online-1.svg");
}
[data-icon="teacher"] {
  --icon: url("../img/icons/teacher.svg");
}
[data-icon="people"] {
  --icon: url("../img/icons/people.svg");
}
[data-icon="badge"] {
  --icon: url("../img/icons/badge.svg");
}
[data-icon="hourglass"] {
  --icon: url("../img/icons/hourglass.svg");
}
[data-icon="money"] {
  --icon: url("../img/icons/money.svg");
}
[data-icon="select-from-list"] {
  --icon: url("../img/icons/select-from-list.svg");
}
[data-icon="chat"] {
  --icon: url("../img/icons/chat.svg");
}
/* info.svg carries its own stroke colour (#45556C), so use it as a
   background-image rather than a mask. The button is empty - its accessible
   name comes from aria-label. A bare <button> inherits the theme's CTA chrome
   (padding + min-width + radius), so reset all of it, not just padding. */
.pdp_info {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../img/icons/info.svg") center / 16px 16px no-repeat;
  vertical-align: middle;
  /* Hover-i'tjes krijgen de "help"-cursor (#185 r86); pure-klik i'tjes (zonder
     data-tooltip-hover) houden pointer via de regel hieronder. */
  cursor: help;
}
/* Consistente cursors voor de info-i'tjes: hover-tooltip = help, alleen-klik = pointer. */
[data-tooltip-hover] {
  cursor: help;
}
.pdp_info[data-info-popover]:not([data-tooltip-hover]) {
  cursor: pointer;
}
/* ---- Accreditations: white card, hairline-separated rows ----------------- */
.pdp_accred {
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);

  /* GRID (<=2): mobiel + tussenmaat (<1280) gestapeld met rij-padding + divider (als op mobiel,
     #71); pas >=1280 side-by-side met card-inset. De SLIDER krijgt de card-inset al vanaf 768
     (hieronder) omdat de track daar binnen scrollt en de padding niet mag wegscrollen (#69). */
  @media (width >= 80rem) {
    padding: 40px;
  }
}
.pdp_accred--slider {
  @media (width >= 48rem) {
    padding: 24px; /* slider-inset vanaf 768 */
  }

  /* Expliciet, want deze regel staat NA `.pdp_accred @xl { padding:40 }` met gelijke
     specificiteit - anders zou de 24px hierboven ook >=1280 blijven winnen. */
  @media (width >= 80rem) {
    padding: 40px;
  }
}
/* Layout/scroll-laag binnen de gepadde kaart, ZONDER eigen padding. GRID: pas >=1280 naast
   elkaar (daaronder block = gestapeld). De slider-track staat apart (altijd flex). */
.pdp_accred__track {
  @media (width >= 80rem) {
    display: flex;
    gap: 80px; /* origineel: 40+40 row-padding = 80px tussen erkenningen */
  }
}
.pdp_accred__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: var(--spacing);
  padding: 24px var(--spacing);

  @media (width >= 48rem) {
    gap: 20px; /* #188: 20px tussen afbeelding en tekst (inner grid-gap) */
  }

  /* GRID >=1280: side-by-side, de kaart draagt de inset, rijen zelf padding 0. */
  @media (width >= 80rem) {
    flex: 1 1 0;
    padding: 0;
  }
}
.pdp_accred__row + .pdp_accred__row {
  border-top: 1px solid var(--pdp-card-border);

  /* GRID side-by-side (>=1280): geen horizontale divider meer. */
  @media (width >= 80rem) {
    border-top: 0;
  }
}
.pdp_accred__logo img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
}
.pdp_accred__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp_accred__title {
  font-weight: 700;
  font-size: 12px; /* mobiel 12px (#187); desktop 16px hieronder */
  line-height: 18px;

  @media (width >= 48rem) {
    font-family: var(--brand-bold-typeface);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }
}
/* Roboto Light. NB: not var(--brand-light-typeface) - that names a "Roboto Light"
   family which no @font-face declares, so it silently falls back to regular
   Roboto. Roboto is a variable font (100-900), so weight 300 is the real Light. */
.pdp_accred__sub {
  font-family: var(--brand-typeface);
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-color-neutral);

  @media (width >= 48rem) {
    font-size: 14px; /* #188 */
  }
}
/* Bij meer dan 2 erkenningen: horizontale slider (desktop + mobiel), scroll-snap. De SCROLL
   zit op de track (niet de kaart), zodat de kaart-padding als vaste inset blijft staan. */
.pdp_accred--slider .pdp_accred__track {
  /* Ook op mobiel een horizontale slider (1 card + peek), dus hier display:flex (de generieke
     .pdp_accred__track is pas vanaf md flex) (#192). */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  /* Ruimte tussen slider-cards (mobiel: geen gap, daar doet de border-left de scheiding). */
  @media (width >= 48rem) {
    gap: 20px;
  }

  @media (width >= 80rem) {
    gap: 80px;
  }

  /* Geen scroll-padding nodig: de track scrollt binnen de gepadde kaart, dus de inset staat
     er sowieso al en verdwijnt niet bij scrollen (#192 #69). */

  /* Sleepbaar met de muis op desktop. Tijdens het slepen (.is-dragging, gezet in
     initPdpAccredSlider) snap uit + geen tekstselectie. */
  @media (width >= 48rem) {
    cursor: grab;

    &.is-dragging {
      cursor: grabbing;
      scroll-snap-type: none;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }

  & .pdp_accred__row {
    flex: 0 0 calc(100% - 50px);
    scroll-snap-align: start;

    /* Vanaf 768 draagt de kaart de inset, dus de rij zelf geen padding meer (mobiel wel:
       daar heeft de kaart geen padding). */
    @media (width >= 48rem) {
      flex-basis: calc(100% - 65px);
      padding: 0;
    }

    @media (width >= 64rem) {
      flex-basis: 50%;
    }
  }

  /* Verticale scheidingslijn tussen items i.p.v. de horizontale rij-divider. */
  & .pdp_accred__row + .pdp_accred__row {
    border-top: 0;
    border-left: 1px solid var(--pdp-card-border);

    @media (width >= 48rem) {
      border-left: none;
    }
  }
}
.pdp_accred_slider {
  position: relative;
}
/* Prev/next-knoppen alleen op desktop (mobiel = swipe/scroll). */
.pdp_accred__nav {
  display: none;

  @media (width >= 48rem) {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: -21px;
  }
}
.pdp_accred__nav-btn {
  padding: 0 !important;

  &[disabled] {
    background-color: var(--brand-color-pale);
    cursor: default;
  }
}
/* ---- Button system ------------------------------------------------------
   Figma buttons are rounded RECTANGLES (~8px), not pills.
   ------------------------------------------------------------------------- */
.pdp_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: var(--text-copy-s);
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.pdp_btn--primary {
  background: var(--orange);

  &, &:visited {
    color: var(--white);
  }
}
.pdp_btn--primary:hover {
  background: var(--orange-hover);
  /* Keep the label white; the theme's generic a:hover otherwise turns it blue. */
  color: var(--white);
}
/* Ghost: white fill, pale-blue border, DARK text (not brand blue). Lead buttons use
   this variant and want a 2px border (#187). */
.pdp_btn--ghost {
  background: var(--white);
  color: var(--text-color);
  border-color: var(--text-color-neutral-400);
  border-width: 2px;
}
.pdp_btn--block {
  width: 100%;
}
.pdp_btn--arrow::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentcolor;
  -webkit-mask: url("../img/icons/arrow-right.svg") center / contain no-repeat;
          mask: url("../img/icons/arrow-right.svg") center / contain no-repeat;
}
/* Phone icon before the label (currentcolor mask; phone.svg is single-colour). */
.pdp_btn--phone::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentcolor;
  -webkit-mask: url("../img/icons/phone.svg") center / contain no-repeat;
          mask: url("../img/icons/phone.svg") center / contain no-repeat;
}
/* Proefles icon before the label (currentcolor mask; proefles.svg is single-colour). */
.pdp_btn--proefles::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentcolor;
  -webkit-mask: url("../img/icons/proefles.svg") center / contain no-repeat;
          mask: url("../img/icons/proefles.svg") center / contain no-repeat;
}
/* Kostenoverzicht icon before the label (currentcolor mask; single-colour stroke). */
.pdp_btn--kostenoverzicht::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentcolor;
  -webkit-mask: url("../img/icons/kostenoverzicht.svg") center / contain no-repeat;
          mask: url("../img/icons/kostenoverzicht.svg") center / contain no-repeat;
}
/* Mobile: proefles + inschrijven pinned as a sticky bar at the viewport bottom.
   Reset to a normal 2-col row on desktop (--md-above). env(safe-area-inset-bottom)
   clears the iOS home indicator. Panel reserves bottom space below so the fixed
   bar never covers the last content. */
.pdp_top__actions {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--small-spacing);
  padding: var(--small-spacing) var(--pdp-pad);
  padding-bottom: calc(var(--small-spacing) + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--pdp-card-border);
  box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);

  @media (width >= 48rem) {
    /* Hidden on desktop: the right-column .pdp_top__cta is the single enrol CTA. */
    display: none;
  }
}
.pdp_top__actions .pdp_btn {
  width: 100%;
  /* Sticky footer buttons: 40px tall, 16px label (#187). */
  height: 40px;
  padding-block: 0;

  &.pdp_btn--primary {
    font-size: 16px;
  }
}
/* CTA + favorite row */
.pdp_top__cta {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
}
.pdp_top__cta .pdp_btn {
  flex: 1;
  /* Inschrijf CTA: 16px label (#187). */
  font-size: 16px;
}
/* Favorite: rounded SQUARE with an outline heart, not a circle. */
.pdp_fav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 2px solid var(--text-color-neutral-400); /* #187: neutral-400, 2px */
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s;
}
/* Zelfde hover als de lead buttons (#188). */
.pdp_fav:hover {
  border-color: var(--text-color-neutral-500);
}
/* Heart via mask (not background-image): the svg hardcodes a blue stroke, so
   mask it to recolour the outline to --text-color (#0F172B). */
.pdp_fav::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background: var(--text-color);
  -webkit-mask: url("../img/icons/heart-outline.svg") center / contain no-repeat;
          mask: url("../img/icons/heart-outline.svg") center / contain no-repeat;
}
/* Saved state. main.js already toggles `.active` on every button[data-favorite-id]
   (and mirrors it across duplicates of the same ID) - there was simply no rule for
   it here. Swap to the filled heart in brand blue, matching heart-fill.svg's own
   colour and the outline/fill swap the search-result cards use. Only mask-image is
   overridden so the position/size/repeat from the shorthand above still apply. */
.pdp_fav.active::before {
  background: var(--brand-color);
  -webkit-mask-image: url("../img/icons/heart-fill.svg");
          mask-image: url("../img/icons/heart-fill.svg");
}
/* Study-characteristics list: plain grey bullet dots. */
.pdp_bullets {
  display: flex;
  flex-direction: column;
  gap: var(--tiny-spacing);
}
.pdp_bullets li {
  position: relative;
  padding-left: 22px;
  color: var(--text-color-light);
}
.pdp_bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentcolor;
}
/* Guarantees list: green checks, bold text. Fed by $InheritedProductUsps. */
.pdp_usps {
  display: flex;
  flex-direction: column;
  gap: var(--tiny-spacing);
}
.pdp_usps__item {
  position: relative;
  padding-left: 28px;
  font-weight: 700;
  color: var(--text-color-neutral);

  @media (width >= 48rem) {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
  }
}
.pdp_usps__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--green);
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
          mask: url("../img/icons/check.svg") center / contain no-repeat;
}
/* ---- Lead download buttons: centred label, left icon, NO chevron --------- */
.pdp_leads {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%; /* <button> vult niet vanzelf zoals de vorige block-<a> */
  padding: 12px;
  background: var(--white);
  border: 2px solid var(--text-color-neutral-400); /* #187: primary-700 -> neutral-400 */
  border-radius: 8px;
  font-weight: 700;
  color: var(--text-color);
  transition: border-color 0.15s;
}
/* Hover: donkerder border (neutral-500), geen background-wissel (#188). */
.pdp_lead:hover {
  border-color: var(--text-color-neutral-500);
  color: var(--text-color);
}
.pdp_lead__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.pdp_lead__icon[data-icon]::before {
  background: var(--text-color);
  -webkit-mask-size: 22px 22px;
          mask-size: 22px 22px;
}
/* ---- Weekplanner (interactive <pdp-weekplanner>, see js/main.js) ---------- */
.pdp_week {
  /* Custom element renders inline by default; the box styling needs block. */
  display: block;
  padding: 24px var(--spacing);
  background: var(--background-color-neutral);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);

  /* Desktop (screenshot): slider full-width on top, then two columns - intro/bullets left,
     week grid (head + days + legend + dots) right. DOM order is intro, slider, head, days,
     legend, dots; grid placement reorders it. Intro spans the right column's rows so the two
     stacks don't couple heights. */
  @media (width >= 64rem) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 40px;
         column-gap: 40px;
    align-items: start;
    padding: 20px;
  }
}
.pdp_week__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  margin-bottom: var(--spacing);

  @media (width >= 64rem) {
    grid-column: 2;
    grid-row: 2;
  }
}
.pdp_week__title {
  margin: 0;
  font-size: var(--text-copy-s);
  font-weight: 700;
}
.pdp_week__chip {
  flex: 0 0 auto;
  /* #187: white chip, 12px regular, 6px 12px padding. */
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--white);
  color: var(--brand-color);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  /* JS fades opacity to 0 → text swap → back to 1 on scenario change. */
  transition: opacity 0.35s ease;
}
/* Intro: card heading + study-trait bullets (rendered by the component). */
.pdp_week__intro {
  margin-bottom: var(--spacing);

  /* Desktop: left column, spanning the right column's rows (2-5) so it top-aligns and the
     columns' heights stay independent. */
  @media (width >= 64rem) {
    grid-column: 1;
    grid-row: 2 / 6;
    margin-bottom: 0;
    padding-left: 20px; /* #188: +20 => totaal 40 vanaf de kaartrand (kaart-padding 20 + 20) */
  }
}
/* #188: rechter-kolom items 20px extra rechts => 40 totaal vanaf de kaartrand. */
@media (width >= 64rem) {
  .pdp_week :is(.pdp_week__head, .pdp_week__days, .pdp_week__legend, .pdp_week__dots) {
    padding-right: 20px;
  }
}
.pdp_week__heading {
  margin: 0 0 var(--small-spacing);
  font-size: var(--text-copy-m);
  font-weight: 700;
  color: var(--text-color);
}
/* Slider: label + range + live readout. Range accent = brand blue. */
.pdp_week__slider {
  background-color: var(--white);
  align-items: center;
  gap: var(--small-spacing);
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-radius: 10px;
  padding: var(--spacing);

  /* Desktop: full-width row on top, everything inline: DEMO | label | slider | readout. */
  @media (width >= 64rem) {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin-bottom: 40px;
  }
}
/* DEMO badge sits left of the slider label. */
.pdp_week__slider-top {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pdp_week__demo {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 6px;
  background: #E5F5FC;
  color: var(--text-color-neutral-600);
  font-size: var(--text-copy-xxs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pdp_week__slider-range {
  display: flex;
  align-items: baseline;
  gap: var(--small-spacing);
  margin-top: var(--spacing);

  /* Desktop: sits inline in the slider row and grows to fill the middle. */
  @media (width >= 64rem) {
    gap: 49px;
    flex: 1;
    align-items: center;
    margin-top: 0;
  }
}
.pdp_week__slider-label {
  display: block;
  font-size: var(--text-copy-m);
  font-weight: 700;
  color: var(--text-color-neutral-700);
}
/* Custom range: grey track (#E2E8F0), brand-blue fill (#009FE3), square white
   thumb. accent-color can't split the track, so Chrome gets the fill via a
   gradient driven by --pct (set in JS on input); Firefox uses ::-moz-range-progress. */
.pdp_week__range {
  flex: 1 1 140px;
  min-width: 120px;
  height: 17px; /* room for the 17px thumb; visual track is 4px via pseudo */
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.pdp_week__range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(
          to right,
          var(--brand-color) var(--pct, 0%),
          var(--pdp-card-border) var(--pct, 0%)
  );
}
.pdp_week__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--text-color-neutral);
  box-sizing: border-box;
  margin-top: -6px; /* centre 17px thumb on the 5px track: (5-17)/2 */
}
.pdp_week__range::-moz-range-track {
  height: 5px;
  border-radius: 4px;
  background: var(--pdp-card-border);
}
.pdp_week__range::-moz-range-progress {
  height: 5px;
  border-radius: 4px;
  background: var(--brand-color);
}
.pdp_week__range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--text-color-neutral);
  box-sizing: border-box;
}
/* "8 uur / week": whole readout is brand blue (Figma); the number is bigger. */
.pdp_week__readout {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--text-copy-m);
  font-weight: 700;
  color: var(--brand-color);
  font-variant-numeric: tabular-nums;

  @media (width >= 64rem) {
    flex: 0 0 100px;
    text-align: right;
  }
}
.pdp_week__readout b {
  font-weight: 800;
}
.pdp_week__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;

  @media (width >= 64rem) {
    grid-column: 2;
    grid-row: 3;
  }
}
.pdp_week__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pdp_week__hours {
  font-size: var(--text-copy-xs);
  font-weight: 700;
  min-height: 1.2em;
  color: var(--brand-color);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.35s ease;
}
/* Zero-hour day: keep the slot's height, hide the "0 u" text. */
.pdp_week__hours.off {
  opacity: 0;
}
/* The column: a grey "rest of day" track with a blue "studeren" fill at the
   bottom, sized by the inline --fill custom property. */
.pdp_week__bar {
  position: relative;
  width: 100%;
  height: 92px;
  border-radius: 6px;
  background: var(--brand-color-light);
  overflow: hidden;
}
.pdp_week__bar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--fill, 0%);
  background: var(--brand-color);
  border-radius: 6px;
  transition: height 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Day label sits OVER the bar (roughly its vertical centre), not below it.
   translateY lifts it into the bar; the matching negative margin-bottom collapses
   the space it vacated so the legend doesn't get a ~60px gap under the grid. */
.pdp_week__label {
  position: relative;
  z-index: 1;
  transform: translateY(-60px);
  margin-bottom: -10px;
  font-size: var(--text-copy-xxs);
  color: var(--text-color-neutral-500);
}
.pdp_week__legend {
  display: flex;
  gap: var(--spacing);
  margin: var(--spacing) 0 0;
  font-size: var(--text-copy-xs);
  color: var(--text-color-light);

  @media (width >= 64rem) {
    grid-column: 2;
    grid-row: 4;
  }
}
.pdp_week__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pdp_week__key::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.pdp_week__key--rest::before {
  background: var(--brand-color-light);
}
.pdp_week__key--study::before {
  background: var(--brand-color);
}
/* Scenario dots: pill tabs. The active dot is wider and slowly fills with the
   brand colour over the rotation interval - a progress bar counting down to the
   next slide. --pdp-week-rotate is set from JS so the fill duration always
   matches the actual timer (single source of truth). */
.pdp_week__dots {
  display: flex;
  gap: 8px;
  margin-top: var(--spacing);

  @media (width >= 64rem) {
    grid-column: 2;
    grid-row: 5;
  }
}
.pdp_week__dot {
  position: relative;
  overflow: hidden;
  height: 6px;
  width: 25px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--pdp-card-border);
  cursor: pointer;
}
/* Fill layer on the active dot: grows left→right over the rotation period,
   scaleX (compositor-cheap). JS toggles `.is-filling` (+ a reflow) to restart
   the keyframes from 0 each period; `.on` is aria-only. */
.pdp_week__dot.is-filling::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--brand-color);
  animation: pdp-week-fill var(--pdp-week-rotate, 7000ms) linear forwards;
}
/* Hover/focus pauses rotation (JS toggles .is-paused); freeze the fill too. */
.pdp_week.is-paused .pdp_week__dot.is-filling::before {
  animation-play-state: paused;
}
@keyframes pdp-week-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdp_week__bar::after,
  .pdp_week__chip,
  .pdp_week__hours {
    transition: none;
  }

  /* No auto-rotation under reduced-motion: JS skips .is-filling, so mark the
     active dot solid-filled via .on instead. */
  .pdp_week__dot.on::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand-color);
  }
}
/* ---- Lamellen (accordion sections) -------------------------------------- */
.pdp_lamel {
  /* Chevron-box fill differs by row parity (set here, read by __toggle::after). */
  --lamel-chevron-bg: #f3f5f7; /* odd/white rows */
  border-top: 1px solid var(--pdp-card-border);
  background: var(--white);

  @media (width >= 48rem) {
    border-top: 0;
  }
}
.pdp_lamel:nth-of-type(even) {
  --lamel-chevron-bg: var(--pdp-card-border); /* even/grey rows: #E2E8F0 */
  background: var(--background-color-neutral);
}
/* Close the stack: the last lamel needs a bottom border (rows only have border-top). */
.pdp_lamel:last-of-type {
  border-bottom: 1px solid var(--pdp-card-border);
}
.pdp_lamel__head {
  margin: 0;
  /* Sticky: the lamel title stays in view while its body scrolls. Offset by the site
     header height so it sits below the scroll-up header; when the header is hidden
     (scroll down, :root.header-scroll-down set in main.js) it sticks to top:0 instead.
     Inherit the row's white/grey background so scrolling content does not show through. */
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height);
  z-index: 2;
  background: inherit;
  /* Match the header's .3s transform so top slides in sync instead of jumping. */
  transition: top 0.3s ease-out;

  :root.header-scroll-down & {
    top: 0;
  }

  /* Desktop: content centred in the 1330 container (row background stays full-bleed). */
  @media (width >= 48rem) {
    width: var(--pdp-container);
    margin-inline: auto;
  }

  /* De PDP sticky-bar verschijnt pas vanaf 1024; alleen daar plakt de lamel-kop eronder
     (offset = sticky-header-hoogte, ongeacht de site-header scroll-state). Op 768-1023 is er
     geen sticky-bar, dus gedraagt de kop zich als mobiel (onder de site-header, top:0 als die
     verborgen is) - anders plakte 'ie 72px te laag (#192). */
  @media (width >= 64rem) {
    top: var(--pdp-sticky-height);

    :root.header-scroll-down & {
      top: var(--pdp-sticky-height);
    }
  }
}
.pdp_lamel__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  padding: var(--big-spacing) var(--pdp-pad);
  font-family: var(--brand-headline);
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  /* iOS Safari kleurt <button>-tekst standaard blauw; forceer de normale tekstkleur op de
     lamel-kop (#193). -webkit-text-fill-color erbij omdat die op iOS de `color` overrulet. */
  color: var(--text-color);
  -webkit-text-fill-color: currentColor;

  /* Open lamel: tighter gap to its body. */

  .pdp_lamel.is-open & {
    padding-bottom: 24px;
  }

  @media (width >= 48rem) {
    padding-inline: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 32px;
    line-height: 40px;

    .pdp_lamel.is-open & {
      padding-bottom: 24px;
    }
  }
}
/* Chevron sits in a grey rounded box (like the modal close). background holds
   BOTH the #F3F5F7 fill and the #62748E chevron (8×4) - an image, not a mask,
   so the two layers coexist. */
.pdp_lamel__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--lamel-chevron-bg) center / 8px 4px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4' fill='none'%3E%3Cpath d='M1 1L4 3L7 1' stroke='%2362748E' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;

  @media (width >= 48rem) {
    width: 40px;
    height: 40px;
  }
}
.pdp_lamel__toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.pdp_lamel__body {
  padding: 0 var(--pdp-pad) var(--big-spacing);

  /* Desktop: content centred in the 1330 container (row background full-bleed). */
  @media (width >= 48rem) {
    width: var(--pdp-container);
    margin-inline: auto;
    padding-inline: 0;
  }
}
/* Geanimeerd open/dicht klappen (#188): JS animeert de height (0 <-> scrollHeight).
   overflow:hidden alleen tijdens de animatie, zodat een geopende lamel geen info-popovers
   clipt. Uit bij prefers-reduced-motion. */
.pdp_lamel__body.is-animating {
  overflow: hidden;
}
/* Children faden weg tijdens de open/dicht-animatie (#188). Bij dichtklappen blijft .is-fade
   staan (fade-out); bij openklappen haalt JS 'm er direct af zodat de children mee-infaden
   terwijl de height uitklapt (niet pas na de hele transitie). */
.pdp_lamel__body.is-fade > * {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pdp_lamel__body {
    transition: height 0.3s ease;
  }

  .pdp_lamel__body > * {
    transition: opacity 0.15s ease;
  }

  /* De open-state bottom-padding hangt aan .is-open (schakelt instant); mee laten animeren
     zodat de header niet verspringt bij het klikken (#188). */
  .pdp_lamel__toggle {
    transition: padding-bottom 0.15s ease;
  }
}
.pdp_placeholder {
  color: var(--text-color-light);
  font-style: italic;
}
/* ---- Lamel body content (STUBS, global styling) ------------------------- */
/* Prose blocks: theme sets explicit colour on p/li, so target them directly. */
.pdp_prose :is(p, li) {
  color: var(--text-color-neutral);
}
.pdp_prose p {
  margin: 0 0 var(--small-spacing);
}
.pdp_prose p:last-child {
  margin-bottom: 0;
}
.pdp_prose a {
  color: var(--brand-color);
  font-weight: 700;
}
/* Lists inside rich text (e.g. the extended stage content) must render as a real list;
   the theme's base reset strips bullets otherwise (#187). Exempt .pdp_checklist, which
   deliberately swaps bullets for check icons. */
.pdp_prose :is(ul, ol):not(.pdp_checklist) {
  margin: 0 0 var(--small-spacing);
  padding-left: 1.25em;
}
.pdp_prose ul:not(.pdp_checklist) {
  list-style: disc;
}
.pdp_prose ol:not(.pdp_checklist) {
  list-style: decimal;
}
/* Laatste blok in de prose (p OF lijst): geen ondermarge, anders stapelt die op de
   container-padding - o.a. de studieduur die op een <ul> eindigt (#191).
   :not(.pdp_checklist) tilt de specificiteit boven de ul/ol-margin-regel hierboven. */
.pdp_prose > :last-child:not(.pdp_checklist) {
  margin-bottom: 0;
}
/* Check-bullet list: add class="pdp_checklist" to a <ul> (works in HTMLText too) to
   swap the default bullets for check icons. check.svg is single-colour, so the mark
   follows the brand colour. */
.pdp_checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Items: <li> in HTMLText-authored lists, <p> in the PDP templates (SEO #170: no list
   markup on the page). Both share the check-icon styling. */
.pdp_checklist :is(li, p) {
  position: relative;
  padding-left: 28px;
}
.pdp_checklist :is(li, p) + :is(li, p) {
  margin-top: var(--tiny-spacing);
}
.pdp_checklist :is(li, p)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: var(--cta-green);
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
          mask: url("../img/icons/check.svg") center / contain no-repeat;
}
.pdp_lamel__body > * + * {
  margin-top: var(--spacing);
}
/* "Na deze": follow-up choice cards. Naast elkaar by default; --stacked = onder. */
.pdp_choices {
  display: grid;
  gap: var(--small-spacing);
  grid-template-columns: repeat(2, 1fr);

  @media (width < 48rem) {
    /* Cards stack on narrow screens regardless of the flag. */
    grid-template-columns: 1fr;
  }
}
.pdp_choices.pdp_choices--stacked {
  grid-template-columns: 1fr;
}
.pdp_choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
}
.pdp_choice__title {
  font-weight: 700;
}
.pdp_choice__text {
  color: var(--text-color-neutral);
  font-size: var(--text-copy-xs);
}
.pdp_choice__link {
  margin-top: auto;
  color: var(--brand-color);
  font-weight: 700;
}
/* "Dit ga je leren": 2-col vakkenlijst with check bullets. */
.pdp_courselist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tiny-spacing) var(--spacing);

  @media (width < 48rem) {
    grid-template-columns: 1fr;
  }
}
.pdp_courselist li {
  position: relative;
  padding-left: 26px;
  color: var(--text-color-neutral);
}
.pdp_courselist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--brand-color);
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
          mask: url("../img/icons/check.svg") center / contain no-repeat;
}
/* "Studieduur en kosten": definition rows, hairline separated. */
.pdp_facts {
  margin: 0;
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  overflow: hidden;
}
.pdp_fact {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing);
  padding: var(--small-spacing) var(--spacing);
}
.pdp_fact + .pdp_fact {
  border-top: 1px solid var(--pdp-card-border);
}
.pdp_fact__label {
  color: var(--text-color-neutral);
}
.pdp_fact__value {
  font-weight: 700;
  text-align: right;
}
/* "Studentverhalen": quote cards. */
.pdp_stories {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_story {
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
}
.pdp_story__quote {
  margin: 0 0 var(--small-spacing);
  color: var(--text-color);
  font-style: italic;
}
.pdp_story__meta {
  display: flex;
  flex-direction: column;
}
.pdp_story__name {
  font-weight: 700;
}
.pdp_story__role {
  color: var(--text-color-neutral);
  font-size: var(--text-copy-xs);
}
/* "Veelgestelde vragen": card accordion, mirrors the cursus module accordion
   (pdp_learn__module) - bordered card + chevron in a rounded grey square. */
.pdp_faq {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    row-gap: 8px;
    align-items: start;

    /* Inside the studieduur/kosten lamel the FAQ sits in one narrow column - keep it single-col
       (full-width items), not the 2-col grid. */
    .pdp_cost & {
      display: flex;
      flex-direction: column;
      /* Reset the grid rule's align-items:start, else flex items shrink to content width. */
      align-items: stretch;
    }
  }
}
.pdp_faq__item {
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  transition: border-color 0.15s;

  @media (width >= 48rem) {
    padding: 16px 16px 16px 24px;
  }
}
/* Chevron-item: border neutral-400 bij hover (#188). */
.pdp_faq__item:hover {
  border-color: var(--text-color-neutral-400);
}
.pdp_faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  padding-inline: 0;
  cursor: pointer;
  list-style: none;
}
.pdp_faq__q::-webkit-details-marker {
  display: none;
}
.pdp_faq__q-text {
  font-weight: 700;

  @media (width >= 48rem) {
    font-family: var(--brand-bold-typeface);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }
}
.pdp_faq__chevron {
  flex: 0 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-neutral-100, #f1f5f9);
}
.pdp_faq__chevron::after {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background: var(--text-color-neutral-600);
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.pdp_faq__item[open] .pdp_faq__chevron::after {
  transform: rotate(180deg);
}
.pdp_faq__a {
  padding-top: var(--small-spacing);
}
.pdp_faq__a p {
  margin: 0;
  color: var(--text-color-neutral);
}
/* ---- "Na deze opleiding/cursus" block 1 (AfterStudyRow1) --------------------- */
/* Two units side by side on desktop (content + photo), stacked on mobile. Height
   follows the taller column. */
.pdp_after_study {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  /* Mobile order: content, media, then row2 (DOM is content, row2, media because row2 now lives
     inside this grid's left column - see PdpAfterStudy.ss). Desktop uses explicit grid placement
     below, so order only bites on the mobile flex column. */

  & > .pdp_after_study__content {
    order: 1;
  }

  & > .pdp_after_study__media {
    order: 2;
  }

  & > .pdp_after_study2 {
    order: 3;
  }

  @media (width >= 48rem) {
    display: grid;
    /* Right column lines up with the hero panel's right column: --pdp-aside plus the 20px inner
       padding the panel has (this block is edge-to-edge in the container). Same gap + a 1fr left
       so the left column matches the panel's. Rows: content is auto, row2 is 1fr so it absorbs any
       extra height the media's min-height forces (row2 stretches when the left column is shorter
       than the minimum image). */
    grid-template-columns: minmax(0, 1fr) var(--pdp-aside-edge);
    grid-template-rows: auto 1fr;
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    row-gap: var(--medium-spacing);
    align-items: start;

    /* Left column stacks content (row1) + row2 (row2); the media spans both on the right and sets
       the minimum height (526px). row2 stretches to fill when the content is shorter than that. */
    & > .pdp_after_study__content {
      grid-column: 1;
      grid-row: 1;
    }

    & > .pdp_after_study2 {
      grid-column: 1;
      grid-row: 2;
      align-self: stretch;
    }

    & > .pdp_after_study__media {
      grid-column: 2;
      grid-row: 1 / span 2;
      min-height: 526px;
    }

    /* Row2 set to "Volle breedte" in the CMS (--fullwidth): it drops BELOW the content + media and
       spans the full width; the media then only occupies row 1. If an extra block exists it still
       renders, sitting on the right at aside-edge width (see .pdp_after_study2--fullwidth grid). */
    &:has(> .pdp_after_study2--fullwidth) {
      /* Media only occupies row 1 and matches the content card's height (no forced 526px). */

      & > .pdp_after_study__media {
        grid-row: 1;
        min-height: 0;
        align-self: stretch;
      }

      & > .pdp_after_study2 {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: start;
      }

      /* The image is taller than the content card; left as-is its intrinsic height drives row 1 and
         the media grows past the content. Pin the picture so the frame contributes no intrinsic
         height - the stretched media then follows the content height and the image covers it. */

      .pdp_after_study__media-frame picture {
        position: absolute;
        inset: 0;
      }
    }
  }
}
/* Left content = pale-blue card. */
.pdp_after_study__content {
  padding: var(--spacing);
  background: var(--color-primary-400);
  border-radius: var(--pdp-radius);
  border: 1px solid var(--brand-color-pale);

  @media (width >= 48rem) {
    padding: var(--medium-spacing);
  }
}
.pdp_after_study__title {
  margin: 0 0 var(--medium-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);

  &:has(+ .pdp_after_study__text) {
    margin-bottom: var(--small-spacing);
  }
}
.pdp_after_study__text {
  margin-bottom: var(--spacing);
}
/* Checks: stacked (default) or side-by-side (--cols, desktop only). */
.pdp_after_study__checks {
  display: grid;
  gap: 16px;

  &:has(+ .pdp_after_study__footnote) {
    margin-bottom: var(--small-spacing);
  }

  + .pdp_after_study__more {
    margin-bottom: var(--big-spacing);
  }

}
@media (width >= 48rem) {
  .pdp_after_study__checks--cols {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing);

    /* Screenshot: in the columned variant the check icon sits ABOVE the title+text (stacked
       and left-aligned), not to the left. Flexbox column instead of the icon-left grid: the
       icon (::before), title and text become vertically stacked, all flush-left. Grid
       placement was fragile here (generated ::before + auto rows shifted the text). */

    .pdp_after_study__check {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    /* The global `:has(text) .check-title { align-self: end }` means bottom in the icon-left
       GRID, but in this flex column align-self is the horizontal (cross) axis - end would push
       the title right. Force flush-left. Needs (0,4,0) to beat that (0,3,0) rule. */

    .pdp_after_study__check:has(.pdp_after_study__check-text) .pdp_after_study__check-title {
      align-self: flex-start;
    }
  }
}
.pdp_after_study__check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 0;
}
/* Blue rounded-square check icon before each vinkje. */
.pdp_after_study__check::before {
  content: "";
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-primary-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%23009FE3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
/* Mobile: regular weight. Desktop: bold (Figma). */
/* Shared content title + subtext, reused across lamel items (checks, stats,
   suitability). Title = bold + dark; sub = neutral + smaller. Apply alongside the
   per-block BEM class (which keeps only layout: grid-column / align-self / margin). */
/* Shared check/stat title + subtext - the EXACT Figma values (do not change weight/
   size/family/colour; these follow Figma). Extracted so they live in one place. */
.pdp_ctitle {
  font-weight: 500;
}
.pdp_ctext {
  color: var(--text-color-neutral-700);
  font-family: var(--brand-light-typeface);
  font-size: var(--text-copy-s);
}
.pdp_after_study__check-title {
  align-self: start;
}
/* When a check has subtext, top-align the title with the icon instead of centring. */
.pdp_after_study__check:has(.pdp_after_study__check-text) .pdp_after_study__check-title {
  align-self: end;
}
/* Icon-left check with NO description: centre the title vertically against the 40px icon (span
   its two rows). Scoped to the non-cols variant - in the cols flex layout align-self is the
   horizontal axis, so it must not apply there. */
.pdp_after_study__checks:not(.pdp_after_study__checks--cols) .pdp_after_study__check:not(:has(.pdp_after_study__check-text)) .pdp_after_study__check-title {
  grid-row: 1 / span 2;
  align-self: center;
}
.pdp_after_study__check-text {
  grid-column: 2;
}
.pdp_after_study__text :is(p, li),
.pdp_after_study__footnote :is(p, li) {
  color: var(--text-color-neutral);
}
.pdp_after_study__text :first-child,
.pdp_after_study__footnote :first-child {
  margin-top: 0;
}
.pdp_after_study__footnote {
  font-size: 14px;

  @media (width >= 48rem) {
    margin-top: 40px;
    color: #45556C;
  }
}
/* "Bekijk alle vaardigheden" toggle: mobile-only. Desktop shows every check and
   hides the button. Collapsible list hides checks 4+ until .is-expanded. */
.pdp_after_study__more {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--spacing);
  background: none;
  color: var(--brand-color);
  font-weight: 700;
  font-size: var(--text-copy-xs);
  cursor: pointer;
}
.pdp_after_study__more-chevron {
  width: 16px;
  height: 16px;
  background: var(--brand-color);
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.pdp_after_study__more[aria-expanded="true"] .pdp_after_study__more-chevron {
  transform: rotate(180deg);
}
@media (width < 48rem) {
  .pdp_after_study__checks--collapsible > .pdp_after_study__check:nth-child(n + 4) {
    display: none;
  }

  .pdp_after_study__checks--collapsible.is-expanded > .pdp_after_study__check:nth-child(n + 4) {
    display: grid;
  }

  .pdp_after_study__more {
    display: flex;
  }
}
/* Right media: image with a white caption pill overlaid bottom-left. */
.pdp_after_study__media {
  position: relative;
  margin: 0;

  @media (width >= 48rem) {
    /* Fill the spanned rows (content + row2) so the frame + image can stretch to that height.
       Flex column so the frame takes the space left after the caption (dynamic "100% - caption",
       no magic number). */
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
}
/* .Picture wraps the img in a <picture>; it's the containing block for the img's height, so it
   must fill too (default inline picture has no height -> img height:100% collapses). */
.pdp_after_study__media picture {
  display: block;
  width: 100%;

  @media (width >= 48rem) {
    height: 100%;
  }
}
.pdp_after_study__media img {
  display: block;
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--pdp-radius);

  @media (width >= 48rem) {
    height: 100%;
  }
}
.pdp_after_study__caption {
  margin-top: var(--small-spacing);
  font-size: var(--text-copy-xs);
}
.pdp_after_study__caption :is(p) {
  margin: 0;
}
.pdp_after_study__media-frame {
  position: relative;

  @media (width >= 48rem) {
    /* Fills the grid's right column (--pdp-aside-edge = 422px). flex:1 takes the span height
       minus the caption (if any); min-height:0 lets it shrink. The image stretches to cover it. */
    width: 100%;
    flex: 1;
    min-height: 0;
  }
}
/* Button overlay: centered over the image, 20px from the bottom. Shadow lifts it
   off the image (only this over-image button gets it, not every ghost button). */
.pdp_after_study__media-btn {
  position: absolute;
  left: 50%;
  top: 132px;
  transform: translateX(-50%);
  white-space: nowrap;
  border-width: 1px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

  /* Desktop: relative to the frame height (Figma top 270 of a 526 frame = 51.33%), so it keeps
     its place as the frame grows. */
  @media (width >= 48rem) {
    top: calc(270 / 526 * 100%);
  }

  /* Hover: darken the white, keep the dark label (the theme a:hover would turn it blue). */

  &:hover {
    background: #F3F5F7;
    color: var(--text-color);
  }
}
/* ---- "Na deze" block 2 (AfterStudyRow2): white card, main + optional extra ---- */
.pdp_after_study2 {
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);

  @media (width >= 48rem) {
    /* In the grid's left column now; row-gap handles the spacing to the content above. */
    margin-top: 0;
    padding: var(--medium-spacing);
  }
}
/* Split = main beside extra; stacked (extra under main) below 1024, side-by-side from
   1024 (#192: 768-1023 keeps the stacked mobile layout). */
@media (width >= 64rem) {
  .pdp_after_study2--split {
    display: grid;
    /* Extra column same width as the fullwidth variant (aside-edge minus the card's 24px padding). */
    grid-template-columns: minmax(0, 1fr) calc(var(--pdp-aside-edge) - var(--medium-spacing));
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    /* Stretch so the extra card fills the height (row2 is stretched to the media's min height). */
    align-items: stretch;
  }

  /* Fullwidth row2 (spans the whole container) that still has an extra block: keep the extra on the
     right, lined up with the media frame above. Card keeps its 24px padding, so the extra column is
     aside-edge minus that padding (422 - 24) - its left edge then sits at the media frame's left
     edge. Extra sizes to its own content. */
  .pdp_after_study2--fullwidth:has(.pdp_after_study2__extra) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--pdp-aside-edge) - var(--medium-spacing));
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    align-items: start;
  }
}
.pdp_after_study2__title,
.pdp_after_study2__extra-title {
  margin: 0 0 var(--small-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);
}
.pdp_after_study2__text :is(p, li),
.pdp_after_study2__extra-text :is(p, li) {
  color: var(--text-color-neutral-600);
}
.pdp_after_study2__text {
  margin-bottom: var(--spacing);
}
/* Checks: green check glyph, title + optional subtext. Stacked or columns. */
.pdp_after_study2__checks {
  display: grid;
  gap: 16px;
}
@media (width >= 48rem) {
  .pdp_after_study2__checks--cols {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing);
  }
}
.pdp_after_study2__check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 0;
}
/* Grey rounded-square check box (#F3F5F7) with a #62748E check - per Figma. */
.pdp_after_study2__check::before {
  content: "";
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f3f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%2362748E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.pdp_after_study2__check-title {
  align-self: center;
}
/* Top-align the title with the box when there is subtext. */
.pdp_after_study2__check:has(.pdp_after_study2__check-text) .pdp_after_study2__check-title {
  align-self: end;
}
/* No description: centre the title vertically against the 40px icon (span its two rows). */
.pdp_after_study2__check:not(:has(.pdp_after_study2__check-text)) .pdp_after_study2__check-title {
  grid-row: 1 / span 2;
  align-self: center;
}
.pdp_after_study2__check-text {
  grid-column: 2;
}
/* Extra block (e.g. Diplomasafe): grey card, logo + title + text + modal link. */
.pdp_after_study2__extra {
  margin-top: var(--spacing);
  padding: var(--spacing);
  background: #F3F5F7;
  border: 1px solid #E2E8F0;
  border-radius: var(--pdp-radius);

  /* Desktop: content (title/text/link) stacked in the left column, the 151px logo centred in the
     right column (20px gap). Force every non-logo child into col1 so the title doesn't span. */
  @media (width >= 48rem) {
    padding: var(--medium-spacing); /* 24px desktop */
    /* Only reserve the 151px logo column when there actually is a logo; without an image the block
       stays single-column so there's no empty space on the right. */
    &:has(.pdp_after_study2__logo) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 151px;
      -moz-column-gap: 20px;
           column-gap: 20px;
      align-items: start;

      & > :not(.pdp_after_study2__logo) {
        grid-column: 1;
      }
    }
  }
}
/* "Lees verder" modal link: 12px, brand blue. */
.pdp_after_study2__extra .pdp_link {
  font-size: 12px;
  color: #009fe3;
}
@media (width >= 64rem) {
  /* Side-by-side only from 1024: below that the extra stacks under main and keeps its
     top margin for separation (#192). */
  .pdp_after_study2--split .pdp_after_study2__extra,
  .pdp_after_study2--fullwidth .pdp_after_study2__extra {
    margin-top: 0;
  }
}
.pdp_after_study2__logo {
  display: block;
  margin-bottom: var(--small-spacing);

  @media (width >= 48rem) {
    grid-column: 2;
    grid-row: 1 / span 99; /* span all content rows so it sits beside the whole left column */
    align-self: center;
    justify-self: center;
    margin-bottom: 0;
  }
}
.pdp_after_study2__logo img {
  height: auto;
  max-height: 48px;
  width: auto;

  @media (width >= 48rem) {
    /* Show the Fit(160,64) logo at its own size, centred - don't upscale it. */
    max-width: 100%;
    max-height: none;
  }
}
.pdp_after_study2__extra-text {
  margin-bottom: var(--small-spacing);
  font-size: var(--text-copy-xs);
}
/* ---- "Na deze" block 3 (AfterStudyRow3): baankans + salaris ------------------ */
.pdp_after_study3 {
  margin-top: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    margin-top: var(--medium-spacing);
    gap: var(--medium-spacing);

    /* Split (main + extra) side by side, stretched so both grow to equal height. */
    &:not(.pdp_after_study3--noextra) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      -moz-column-gap: var(--pdp-col-gap);
           column-gap: var(--pdp-col-gap);
      align-items: stretch;
    }
  }
}
.pdp_after_study3__main,
.pdp_after_study3__extra {
  padding: var(--spacing);
  border: 1px solid #C2E8F9;
  border-radius: var(--pdp-radius);

  @media (width >= 48rem) {
    padding: var(--medium-spacing);
  }
}
.pdp_after_study3__main {
  background: #F2FAFE;
  border: 1px solid #C2E8F9;

  @media (width >= 48rem) {
    border-color: #E2E8F0;
    background-color: transparent;
  }
}
.pdp_after_study3__title,
.pdp_after_study3__extra-title {
  margin: 0 0 var(--small-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);
}
.pdp_after_study3__text,
.pdp_after_study3__extra-text {
  margin-bottom: var(--spacing);
}
.pdp_after_study3__text :is(p, li),
.pdp_after_study3__extra-text :is(p, li) {
  color: var(--text-color-neutral);
}
/* Stat rows: icon + bold value + subtext. Stacked by default; side-by-side when
   there is no extra block (Figma). */
.pdp_after_study3__stats {
  display: grid;
  gap: var(--spacing);
}
@media (width >= 48rem) {
  .pdp_after_study3--noextra .pdp_after_study3__stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
.pdp_after_study3__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 0;
}
/* Icon in a light-blue rounded square (var(--color-primary-600)), glyph in brand blue (#009FE3). */
.pdp_after_study3__stat-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-primary-600);
}
.pdp_after_study3__stat-icon[data-icon]::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: #009fe3;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.pdp_after_study3__stat-bold {
  align-self: end;
}
/* No sub-line: centre the bold value vertically against the 40px icon (span its two rows). */
.pdp_after_study3__stat:not(:has(.pdp_after_study3__stat-sub)) .pdp_after_study3__stat-bold {
  grid-row: 1 / span 2;
  align-self: center;
}
.pdp_after_study3__stat-sub {
  grid-column: 2;
}
/* Extra block checks: grey box + grey check, like Row 2. */
.pdp_after_study3__checks {
  display: grid;
  gap: var(--spacing); /* 16px - match Row2 checks (#187) */
}
@media (width >= 48rem) {
  .pdp_after_study3__checks--cols {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing);
  }
}
.pdp_after_study3__check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 0;
}
.pdp_after_study3__check::before {
  content: "";
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f3f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%2362748E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.pdp_after_study3__check-title {
  align-self: center;
}
.pdp_after_study3__check:has(.pdp_after_study3__check-text) .pdp_after_study3__check-title {
  align-self: end;
}
.pdp_after_study3__check-text {
  grid-column: 2;
}
/* ---- Generic extra last-row blocks (image + text), reused per lamel ---------- */
.pdp_extra {
  margin-top: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    margin-top: var(--medium-spacing);
    gap: var(--medium-spacing);

    /* Two blocks side by side (desktop), stretched so both grow to equal height; single block =
       full width. */
    &:not(.pdp_extra--single) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      -moz-column-gap: var(--pdp-col-gap);
           column-gap: var(--pdp-col-gap);
      align-items: stretch;
    }
  }
}
.pdp_extra__block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  padding: var(--spacing); /* 16px mobile */
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  background: var(--white);

  @media (width >= 48rem) {
    gap: var(--medium-spacing);
  }
}
/* Image on the right → below on mobile, right on desktop. Media stays first in
   the DOM; flex reordering does the rest. */
.pdp_extra__block--img-right {
  flex-direction: column-reverse;
}
@media (width >= 48rem) {
  .pdp_extra__block {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--medium-spacing); /* 24px desktop */
  }

  .pdp_extra__block--img-right {
    flex-direction: row-reverse;
  }
}
.pdp_extra__media {
  flex: 0 1 44%;

  @media (width >= 48rem) {
    flex: 0 0 200px;
    width: 200px;
    /* Stretch to the card height so the image fills 100% (no grey gap when the body
       text is taller than the intrinsic 151px). Needs align-self:stretch because the
       block sets align-items:flex-start. */
    align-self: stretch;
    min-height: 151px;
  }
}
.pdp_extra__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;

  /* Fill the stretched frame on desktop; cover to keep aspect. */
  @media (width >= 48rem) {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.pdp_extra__body {
  flex: 1 1 auto;
}
.pdp_extra__title {
  margin: 0 0 var(--small-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);
}
.pdp_extra__text :is(p, li) {
  color: var(--text-color-neutral);
}
.pdp_extra__text :first-child {
  margin-top: 0;
}
/* ---- "Past dit bij jou?" (SuitabilityRow1) ----------------------------------- */
/* Four grid cells. Mobile: single column, video pulled under the "minder" block.
   Desktop: 2×2 (items|video, minder|lead). */
/* Mobile: one column. The left/right wrappers are display:contents so all four
   cells become direct flex children and flow in `order` (positems → negitems →
   video → lead). Cells are conditional; flex skips absent ones so there are no
   empty-row gaps (the reason we dropped grid-template-areas). */
.pdp_suitability {
  display: flex;
  flex-direction: column;
  gap: var(--medium-spacing);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    row-gap: 24px;
  }
}
.pdp_suitability__left,
.pdp_suitability__right {
  display: contents;
}
.pdp_suitability__positems {
  order: 1;
}
.pdp_suitability__negitems {
  order: 2;
}
.pdp_suitability__video {
  order: 3;
}
.pdp_suitability__lead {
  order: 4;
}
@media (width >= 48rem) {
  /* 2x2 grid - wrappers stay display:contents so the four blocks are direct grid items:
     positems | video on row 1, negitems | lead on row 2. So the video sits beside "past bij jou
     als" and "minder passend" lines up (top) with the lead ("twijfel je...") block. */
  .pdp_suitability__positems {
    grid-column: 1;
    grid-row: 1;
  }

  .pdp_suitability__video {
    grid-column: 2;
    grid-row: 1;
  }

  /* Row 2: de "Minder passend als"-items lijnen bovenaan uit (direct onder de heading) i.p.v.
     onderaan (#185). */
  .pdp_suitability__negitems {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
  }

  .pdp_suitability__negitems .pdp_suitability__items {
    margin-top: 0;
  }

  .pdp_suitability__lead {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }
}
.pdp_suitability__heading {
  margin: 0 0 var(--small-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);
}
.pdp_suitability__items {
  display: flex;
  flex-direction: column;
  gap: var(--smaller-spacing);
}
/* Each item is a bordered card: icon + title + optional text. */
.pdp_suitability__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  -moz-column-gap: var(--spacing);
       column-gap: var(--spacing);
  padding: var(--spacing);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  background: #FFF;

  @media (width >= 48rem) {
    -moz-column-gap: 16px;
         column-gap: 16px;
    padding: 24px;
  }
}
.pdp_suitability__item-icon {
  display: grid;
  place-items: center;
  color: var(--green);
  background-color: #7EBB421A;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.pdp_suitability__item-icon svg {
  width: 22px;
  height: 22px;
}
/* "Minder passend als" items: same info icon, neutral colour. */
.pdp_suitability__item--minder {
  --text-color: var(--text-color-neutral);

  .pdp_suitability__item-icon {
    color: var(--blue);
    background-color: var(--color-primary-500);
  }
}
/* No description: centre the title vertically against the icon, like the stacked checks. */
.pdp_suitability__item:not(:has(.pdp_suitability__item-text)) .pdp_suitability__item-body {
  align-self: center;
}
.pdp_suitability__item-title {
  --text-color: var(--text-color-neutral-800);
  margin: 0;
  font-weight: 700;

  .pdp_suitability__negitems & {
    font-weight: 400;
  }
}
.pdp_suitability__item-text {
  --text-color: var(--text-color-neutral-600);
  font-size: var(--text-copy-xs);
}
.pdp_suitability__item-text :is(p) {
  margin: 0;
}
.pdp_suitability__item-text a {
  color: var(--brand-color);
  font-weight: 700;
}
/* Video: thumbnail + play overlay + caption. */
.pdp_suitability__video {
  margin: 0;

  /* Desktop: fill the grid cell (row height = "past bij jou als"); flex column so the preview
     image grows and the caption sits at the bottom, like .pdp_after_study__media. */
  @media (width >= 48rem) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}
.pdp_suitability__video-play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--pdp-radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  background: var(--pdp-card-border);

  /* Desktop: stretch to fill the cell (minus the caption) instead of a fixed ratio, so a
     shorter caption leaves a slightly larger image. */
  @media (width >= 48rem) {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
}
/* Inline embed injected by the play handler (js/main.js). */
.pdp_suitability__video-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--pdp-radius);
  overflow: hidden;
  background: #000;
}
.pdp_suitability__video-embed :is(iframe, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.pdp_suitability__video-play img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pdp_suitability__video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23009FE3'%3E%3Cpath d='M6 4l10 6-10 6z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
  transition: transform 0.15s;
}
/* Playknop vergroten bij hover over de video (#188). */
.pdp_suitability__video-play:hover::after {
  transform: scale(1.12);
}
.pdp_suitability__video-cap {
  display: flex;
  flex-wrap: wrap;
  /* column-gap 0: de 12px afstand komt van de divider-marges (::before); row-gap 4px blijft. */
  gap: 4px 0;
  margin-top: var(--small-spacing);
  font-size: var(--text-copy-xs);
}
.pdp_suitability__video-title {
  font-weight: 700;
}
.pdp_suitability__video-sub {
  color: var(--text-color-neutral);
}
/* #feedback2: divider-streepje (9px, neutral-400) tussen video-titel en beschrijving -
   alleen wanneer er ZOWEL een titel als een beschrijving is (adjacent sibling). */
.pdp_suitability__video-title + .pdp_suitability__video-sub::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 9px;
  margin: 0 12px; /* 12px afstand aan beide zijden van de divider */
  background: var(--text-color-neutral-400);
  vertical-align: middle;
}
/* Adviesgesprek lead: pale-blue card, orange CTA. */
.pdp_suitability__lead {
  padding: var(--spacing);
  background: var(--color-primary-500);
  border: 1px solid var(--brand-color-pale);
  border-radius: var(--pdp-radius);

  @media (width >= 48rem) {
    padding: var(--medium-spacing) 24px;
    text-align: center;
  }
  @media (width >= 80rem) {
    padding: var(--medium-spacing) 40px;
  }
}
/* Lead-block primary CTA: smaller label (Figma). Shared by every PDP lead block. */
:is(.pdp_suitability__lead, .pdp_learn__lead, .pdp_cost__lead) .pdp_btn--primary {
  font-size: var(--text-copy-s);
  font-weight: 500;
}
.pdp_suitability__lead-title {
  margin: 0 0 var(--tiny-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);
  line-height: 1.5;
}
.pdp_suitability__lead-text {
  margin: 0 0 var(--spacing);
  color: var(--text-color-neutral-700);
  font-size: var(--text-copy-xs);
}
/* ---- "Dit ga je leren en doen" (LearnRow) - intro + structuur + lead ------ */
.pdp_learn {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    gap: 40px;
  }
}
.pdp_learn__intro {

  &:has(+ .pdp_learn__block) {
    &:after {
      content: '';
      margin: var(--spacing) 0 var(--tiny-spacing);
      border-top: 1px solid #E2E8F0;
      display: block;

      /* No divider on desktop. */
      @media (width >= 48rem) {
        display: none;
      }
    }
  }

  :is(p, li) {
    color: var(--text-color-neutral);
  }
}
.pdp_learn__cols {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    -moz-column-gap: 40px;
         column-gap: 40px;
    row-gap: var(--medium-spacing);
  }
}
/* Mobiel: als er een intro is, komt de stage & werkplek-tekst TUSSEN intro en structuur.
   cols/left/right worden display:contents zodat alle learn-blokken directe flex-items van
   .pdp_learn worden en herordend kunnen worden. De stage krijgt een divider boven+onder
   (1px #E2E8F0, 28px afstand). Desktop ongewijzigd (kolommen naast elkaar). */
@media (width < 48rem) {
  .pdp_learn--has-intro {
    & .pdp_learn__cols,
    & .pdp_learn__left,
    & .pdp_learn__right {
      display: contents;
    }

    & .pdp_learn__intro {
      order: 1;
    }

    & .pdp_learn__block,
    & .pdp_learn__iconlink {
      order: 2;
      /* Divider boven (tussen intro en stage) EN onder de stage; 28px afstand. */
      border-block: 1px solid #E2E8F0;
      padding-block: 28px;
    }

    & .pdp_learn__structuur {
      order: 3;
    }

    & .pdp_learn__programme,
    & .pdp_learn__programme-text,
    & .pdp_learn__programme-extra,
    & .pdp_learn__modules {
      order: 4;
    }

    & .pdp_learn__links {
      order: 5;
    }

    & .pdp_learn__lead {
      order: 6;
    }
  }
}
.pdp_learn__left,
.pdp_learn__right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}
/* Mobiel: horizontale divider onder de structuur/fases, vóór de rechterkolom eronder stapelt
   (#187). Zelfde stijl als de intro-divider; verborgen op desktop (kolommen naast elkaar). */
/* Right column stretches so the proefles lead can bottom-align. */
@media (width >= 48rem) {
  .pdp_learn__right {
    height: 100%;
    gap: 40px;
  }

  .pdp_learn__lead {
    margin-top: auto;
  }

  /* Intro in the right column (LearnIntroInRightColumn): the intro stays first in the DOM (above
     the structuur, so it is always above on mobile); on desktop --intro-right turns .pdp_learn
     into the 2-col grid (cols become display:contents) and places the intro at the top of the
     right column, under the full-width structuur. */
  .pdp_learn--intro-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 40px;
         column-gap: 40px;
    align-items: start;

    .pdp_learn__cols {
      display: contents;
    }

    .pdp_learn__structuur {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .pdp_learn__intro {
      grid-column: 2;
      grid-row: 2;
      font-size: 14px;
      line-height: 22px;
      font-weight: 400;

      :is(p, li) {
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
      }
    }

    .pdp_learn__left {
      grid-column: 1;
      grid-row: 2 / span 2;
    }

    .pdp_learn__right {
      grid-column: 2;
      grid-row: 3;
    }
  }
}
/* Opleidingsstructuur: pale-blue box with stat tiles. */
.pdp_learn__structuur {
  padding: var(--spacing);
  background: var(--color-primary-400);
  border-radius: var(--pdp-radius);
  border: 1px solid var(--brand-color-pale);

  @media (width >= 48rem) {
    padding: var(--medium-spacing);
  }
}
.pdp_learn__structuur-title {
  margin: 0 0 var(--spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);
}
.pdp_learn__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--small-spacing);
}
.pdp_learn__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing) var(--small-spacing);
  background: var(--color-primary-600);
  border-radius: 8px;
  text-align: center;
}
/* Optioneel info-i'tje rechtsboven op de tegel (#193). */
.pdp_learn__tile-info {
  position: absolute;
  top: 8px;
  right: 8px;

  @media (width >= 48rem) {
    top: 16px;
    right: 16px;
  }
}
/* NB: 28px is for short count values (design "7", "240"). The tiles currently
   reuse the existing specs (long text) until the count-tiles @todo lands, so wrap
   + cap to avoid overflow. Restore a bigger size once tiles are numeric. */
.pdp_learn__tile-value {
  font-family: var(--brand-headline);
  font-weight: 300;
  font-style: Light;
  font-size: 32px;
  leading-trim: CAP_HEIGHT;
  line-height: 40px;
  letter-spacing: -0.3%;
  text-align: center;


}
.pdp_learn__tile-label {
  font-size: var(--text-copy-xxs);
  text-transform: uppercase;
  letter-spacing: -0.3%;
  color: var(--text-color-neutral-600);
}
/* Studieprogramma (cursus): module-overzicht als accordion-kaarten (design #24).
   Elke module = bordered card; met beschrijving = <details> + chevron, zonder = statisch. */
.pdp_learn__modules {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_learn__module {
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  transition: border-color 0.15s;
}
/* Eigen studieprogramma-tekst: los kadertje i.p.v. het module-overzicht. */
.pdp_learn__programme-text,
.pdp_learn__programme-extra {
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);

  @media (width >= 48rem) {
    padding: 20px;
  }
}
/* Chevron-item: border neutral-400 bij hover; niet op de statische (niet-klikbare) variant (#188). */
.pdp_learn__module:not(.pdp_learn__module--static):hover {
  border-color: var(--text-color-neutral-400);
}
.pdp_learn__module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  padding-inline: 0;
  cursor: pointer;
  list-style: none;
}
.pdp_learn__module-head::-webkit-details-marker {
  display: none;
}
.pdp_learn__module-title {
  font-weight: 500;
}
.pdp_learn__module-chevron {
  flex: 0 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-neutral-100, #f1f5f9);
}
.pdp_learn__module-chevron::after {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background: var(--text-color-neutral-600);
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.pdp_learn__module[open] .pdp_learn__module-chevron::after {
  transform: rotate(180deg);
}
.pdp_learn__module-body {
  padding-top: var(--small-spacing);

  /* Prose sets an explicit colour on p/li, so target them directly. */

  :is(p, li) {
    color: var(--text-color-neutral-700);
  }
}
/* ---- Studieprogramma opleidingen (design #30): Fase / Optie card rows ---------- */
.pdp_learn__programme {
  display: flex;
  flex-direction: column;
  gap: var(--smaller-spacing);
}
/* A phase block = one bordered card wrapping the "Fase" row + (optionally) its "Optie"
   rows, so a fase with specialisations reads as a single unit. */
.pdp_learn__phase-block {
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  overflow: hidden; /* clip the option bg to the rounded bottom corners */
  transition: border-color 0.15s;
}
/* Fase-rij (chevron, opent drawer): border neutral-400 bij hover, net als de andere
   chevron-items (#188). */
.pdp_learn__phase-block:has(> .pdp_learn__phase--Fase:hover) {
  border-color: var(--text-color-neutral-400);
}
/* Inner rows carry no border/radius of their own; the block owns them. */
.pdp_learn__phase {
  padding: var(--spacing);
  background: var(--white);
}
/* Options bundle: attaches directly under the fase (no top gap); 4px gap between
   options (white shows through); each option shaded. */
.pdp_learn__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdp_learn__phase--Optie {
  background: #F6F8FA;
}
.pdp_learn__phase-head {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  padding-inline: 0;
  cursor: pointer;
  list-style: none;
}
.pdp_learn__phase-head::-webkit-details-marker {
  display: none;
}
/* "Fase X" badge = light grey; "Optie" badge = pale blue. */
.pdp_learn__phase-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: var(--smaller-spacing) var(--smaller-spacing);
  border-radius: 8px;
  font-weight: 700;
  font-size: var(--text-copy-s);
  line-height: 1.5;
  background: #F3F5F7;
  color: var(--text-color-neutral-800);
}
.pdp_learn__phase--Optie .pdp_learn__phase-badge {
  background: #DAF1FB;
  color: var(--brand-color);
}
.pdp_learn__phase-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp_learn__phase-title {
  font-weight: 500;
  color: var(--text-color);
}
.pdp_learn__phase-ec {
  font-size: var(--text-copy-xs);
  color: var(--text-color-neutral-700);
}
.pdp_learn__phase-chevron {
  flex: 0 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--text-color-neutral-300);
}
.pdp_learn__phase-chevron::after {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background: var(--text-color-neutral-600);
  -webkit-mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
}
.pdp_learn__phase-modules {
  list-style: none;
  margin: var(--small-spacing) 0 0;
  padding: 0;
}
.pdp_learn__phase-module {
  display: flex;
  justify-content: space-between;
  gap: var(--small-spacing);
  padding: 8px 0;
  border-top: 1px solid var(--pdp-card-border);
}
.pdp_learn__phase-module-ec {
  flex: 0 0 auto;
  color: var(--text-color-neutral-600);
}
/* ---- Module cards inside a phase body / drawer (design #31) -------------------- */
.pdp_learn__phase-desc {
  margin-bottom: var(--small-spacing);
}
.pdp_learn__modulecards {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_learn__modulecard {
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
}
.pdp_learn__modulecard-head,
.pdp_learn__modulecard--static {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  cursor: pointer;
  list-style: none;

  &:is(summary) {
    padding-inline: 0;
  }
}
.pdp_learn__modulecard--static {
  cursor: default;
}
.pdp_learn__modulecard-head::-webkit-details-marker {
  display: none;
}
/* Blue EC badge, e.g. "5 EC". */
.pdp_learn__modulecard-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 8px;
  border-radius: 100px;
  background: #DAF1FB;
  color: var(--brand-color);
  font-size: var(--text-copy-xxs);
  font-weight: 500;
}
.pdp_learn__modulecard-title {
  flex: 1 1 auto;
  color: #0F172B;
  font-size: 14px;
  font-weight: 400;
}
.pdp_learn__modulecard-chevron {
  flex: 0 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-neutral-100, #f1f5f9);
}
.pdp_learn__modulecard-chevron::after {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background: var(--text-color-neutral-600);
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.pdp_learn__modulecard[open] .pdp_learn__modulecard-chevron::after {
  transform: rotate(180deg);
}
.pdp_learn__modulecard-body {
  padding-top: var(--small-spacing);
}
.pdp_learn__modulecard-body :is(p, li) {
  color: var(--text-color-neutral-700);
  font-size: 12px;
}
/* Mobile: a <details data-mobile-dialog> opens its body in a modal (JS) instead of
   toggling inline, so its chevron points RIGHT (content opens elsewhere). Desktop keeps
   the native toggle + down chevron. Mobile-first: right is the default, reset above md. */
[data-mobile-dialog] .pdp_faq__chevron::after,
[data-mobile-dialog] .pdp_learn__module-chevron::after,
[data-dialog-always] .pdp_faq__chevron::after,
[data-dialog-always] .pdp_learn__module-chevron::after {
  transform: rotate(-90deg);
}
/* Only the mobile-only variant resets to a down chevron on desktop; data-dialog-always opens the
   modal on desktop too, so it keeps the right chevron. */
@media (width >= 48rem) {
  [data-mobile-dialog] .pdp_faq__chevron::after,
  [data-mobile-dialog] .pdp_learn__module-chevron::after {
    transform: none;
  }
}
/* Stage & werkplek block + generic bordered blocks. */
.pdp_learn__block {

  @media (width >= 48rem) {
    padding: var(--spacing);
    border: 1px solid var(--pdp-card-border);
    border-radius: var(--pdp-radius);
  }

  .pdp_link {
    font-size: var(--text-copy-xs);
  }
}
.pdp_learn__block-title {
  font-size: var(--text-copy-s);
  margin: 0 0 var(--tiny-spacing);
  font-weight: 700;

  @media (width >= 48rem) {
    font-size: var(--text-copy-m);
  }
}
.pdp_learn__block-text {
  margin-bottom: var(--small-spacing);
}
.pdp_learn__block-text :is(p, li) {
  color: var(--text-color-neutral-700);
}
/* Links block: title + chevron cards that open a page in a modal. */
.pdp_learn__links {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_learn__iconlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  width: 100%; /* <button> vult niet vanzelf zoals de vorige block-<a> */
  padding: var(--spacing);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  font-weight: 700;
  color: var(--text-color);
  text-decoration: none;
  text-align: left;
  transition: border-color 0.15s;
}
.pdp_learn__iconlink::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--brand-color);
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  transform: rotate(-90deg);
}
/* Link items = identical to the module accordion card (pdp_learn__module): white card,
   title weight 500, chevron in a grey rounded square. Navigational, so chevron points
   right (never a down/expand affordance). */
.pdp_learn__linkitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  width: 100%; /* <button> vult niet vanzelf zoals de vorige block-<a> */
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
  text-decoration: none;
  text-align: left;
  transition: border-color 0.15s;
}
/* Items met chevron-icoontje: border neutral-400 bij hover (#188). */
.pdp_learn__iconlink:hover,
.pdp_learn__linkitem:hover {
  border-color: var(--text-color-neutral-400);
}
.pdp_learn__linkitem-title {
  font-weight: 500;
  color: var(--text-color);
}
.pdp_learn__linkitem-chevron {
  flex: 0 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-neutral-100, #f1f5f9);
}
.pdp_learn__linkitem-chevron::after {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background: var(--text-color-neutral-600);
  -webkit-mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
}
/* Proefles lead. */
.pdp_learn__lead {
  padding: var(--spacing);
  background: var(--color-primary-500);
  border-radius: var(--pdp-radius);
  border: 1px solid var(--brand-color-pale);

  @media (width >= 48rem) {
    padding: var(--medium-spacing) 24px;
    /* Content (title/text/button) left, decorative image right, 40px between.
       Beeld-kolom minmax(0, 253px): krimpt mee zodat de smalle tussenmaat de __right-kolom
       niet oprekt; capt op 253px op breed desktop (#192 #72). */
    display: grid;
    grid-template-columns: 1fr auto;
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    align-items: center;
  }

  @media (min-width: 890px) {
    grid-template-columns: 1fr minmax(100px, 253px);
  }

  @media (width >= 80rem) {
    padding: var(--medium-spacing) 40px;
  }

  @media (width >= 96rem) {
  }
}
/* Proefles image: desktop only, right of the content. */
.pdp_learn__lead-media {
  display: none;

  @media (width >= 48rem) {
    display: block;
    width: 100%;
    align-self: stretch;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
  }
}
.pdp_learn__lead-media img {
  display: block;
  width: 100%;
  height: auto;

  @media (width >= 48rem) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.pdp_learn__lead-title {
  margin: 0 0 var(--tiny-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);

  @media (width >= 48rem) {
    font-family: var(--brand-bold-typeface);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }
}
.pdp_learn__lead-text {
  --text-color: var(--text-color-neutral-700);
  margin: 0 0 var(--spacing);
  font-size: var(--text-copy-xs);
  white-space: nowrap;
}
/* ---- "Studieduur en kosten" lamel ---------------------------------------- */
.pdp_cost {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    gap: 40px;
  }
}
.pdp_cost__body {
  padding: var(--spacing);
  border-radius: var(--pdp-radius);
  background: #FFF;
  border: 1px solid var(--text-color-neutral-300);
  color: var(--text-color-neutral-800); /* #feedback2: studieduur-tekst neutral-800 */

  /* .pdp_prose :is(p,li) zet kleur direct op de p -> wrapper-color erft niet door.
     Zelfde p/li hier hoger specifiek overschrijven (alleen studieduur-blok). */
  & .pdp_prose :is(p, li) {
    color: var(--text-color-neutral-800);
  }

  @media (width >= 48rem) {
    padding: var(--medium-spacing);
    font-family: var(--brand-light-typeface);
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
  }
}
.pdp_cost__body ul {
  list-style: disc;
  padding-left: 1.25em;

  li {
    --text-color: var(--text-color-neutral-800);
    /* #191: 8px tussenruimte tussen de studieduur-list-items (was --small-spacing = 10px). */
    margin-bottom: 8px;
  }

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

  li::marker {
    color: #CAD5E2;
  }
}
@media (width >= 48rem) {
  .pdp_cost {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .pdp_cost__right {
    height: 100%;
  }

  /* Promo + lead sit together at the bottom of the right column. Without a promo it is
     just the lead. */
  .pdp_cost__bottom {
    margin-top: auto;
  }
}
/* Wrapper for promo + lead so they group at the column bottom with the normal gap. */
.pdp_cost__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    gap: 40px;
  }
}
.pdp_cost__left,
.pdp_cost__right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}
/* Mobiel: horizontale divider onder de tabellen (studieduur/kosten/betaalopties), vóór de
   rechterkolom (FAQ e.d.) eronder stapelt (#187). Verborgen op desktop (kolommen naast elkaar). */
.pdp_cost__left:has(+ .pdp_cost__right)::after {
  content: '';
  display: block;
  margin: var(--smaller-spacing) 0; /* 8px 0 */
  border-top: 1px solid #E2E8F0;

  @media (width >= 48rem) {
    display: none;
  }
}
.pdp_cost__title {
  margin: 0 0 var(--small-spacing);
  font-weight: 700;
  font-size: var(--text-copy-m);
}
/* Cost table (reused $CostOverview / .kostentabel). Styled per design #27. */
.pdp_cost__table table {
  width: 100%;
  /* The generated table carries class `kostentabel`; old pdp.css caps it at max-width:420px,
     which overrode width:100%. Lift the cap here (this selector is more specific). */
  max-width: none;
  border: 1px solid var(--text-color-neutral-400);
  border-radius: var(--pdp-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.pdp_cost__table :is(th, td) {
  /* Mobiel 16px padding; desktop 24px (#feedback2). */
  padding: var(--spacing);
  line-height: 24px;
  /* Geen font-size hier: de tabel erft 14px (--text-copy-s) van de PDP-root. Een eerdere
     12px-regel (#feedback2) verkleinde per ongeluk de HELE tabel i.p.v. alleen de
     visual-promotion-rij (die 12px houdt via .visual_promotion td). Teruggezet (#191). */
  text-align: left;
  color: var(--text-color-neutral-700);
  border: 0; /* reset old pdp.css .kostentabel cell borders; only row separators below */

  @media (width >= 48rem) {
    padding: var(--medium-spacing);
  }
}
/* "Let op"-note onder de tabel: 12px, mobiel linkslijnend (#feedback2). */
.exam_costs_external {
  font-size: var(--text-copy-xs);
  text-align: left;

  .pdp_cost__table & {
    color: var(--text-color-neutral-700);
  }
}
/* De melding staat in een <small> (gedeelde CostOverview.ss), die de tekst standaard
   verkleint. Laat de small de 12px van de wrapper erven i.p.v. te verkleinen (#191). */
.exam_costs_external small {
  font-size: inherit;
}
/* Header row: grey fill + darker text. */
.pdp_cost__table thead :is(th, td) {
  background: var(--text-color-neutral-300);
  color: var(--text-color-neutral-800);
  font-weight: 700;
}
/* First body row: no separator (override the old pdp.css .kostentabel td border). */
.pdp_cost__table tbody tr:first-child :is(th, td) {
  border-top: 0;
}
.pdp_cost__table tbody :is(th, td) {
  background: #FFF;
}
/* Body rows after the first: 1px separator on top. */
.pdp_cost__table tbody tr + tr :is(th, td) {
  border-top: 1px solid var(--text-color-neutral-300);
}
.pdp_cost__table td:last-child,
.pdp_cost__table th:last-child {
  text-align: right;
}
/* First column (Omschrijving) body cells: Roboto Light per design. */
.pdp_cost__table tbody td:first-child {
  font-family: var(--brand-light-typeface);
}
.pdp_cost__table tr td + td {
  font-weight: 300;
  color: var(--text-color-neutral-500); /* '(éénmalig)' e.d. = neutral500 (#187) */

  /* Bedragen = neutral800 (#187). Span dekt de reguliere rijen; strong dekt de discounted
     inschrijfkosten die geen span-wrapper heeft. */

  :is(span, strong) {
    font-weight: 400;
    color: var(--text-color-neutral-800);
  }

  span {
    display: block;
    white-space: nowrap;
  }
}
.pdp_cost__table s {
  color: var(--text-color-light);
}
/* #185: promotie-tooltiptrigger in de v2-kostentabel is geen icoontje maar een tekstlink
   "Lees hier hoe het werkt" (#009FE3); klik opent de popover. De CostOverview-template is
   gedeeld met v1, dus dit gebeurt CSS-only binnen de .pdp_cost__table-scope. */
.pdp_cost__table .info_popover_trigger {
  width: auto;
  height: auto;
  margin-left: 4px;
  background: none;
  font: inherit;
  color: #009FE3;
  vertical-align: baseline;
}
.pdp_cost__table .info_popover_trigger::after {
  content: "Lees hier hoe het werkt";
}
.pdp_cost__table tr.visual_promotion {
  td {
    background-color: #f1f1f1;
    text-align: left !important; /* #feedback2: mobiel ook linkslijnend (was center) */
    font-size: var(--text-copy-xs);
    line-height: 20px;

    .promotion_title {
      font-family: var(--brand-bold-typeface);
      font-weight: 700;
      color: #FE8633;
      font-size: 14px;

      @media (width >= 48rem) {
        font-size: 16px;
      }

    }
  }
}
/* ---- Betaalopties (payment frequency options), design #29 ------------------- */
/* White card, one row per option, 12px rounded outer corners, neutral-300 border. */
.pdp_cost__payopts {
  background: var(--white);
  border: 1px solid var(--text-color-neutral-300);
  border-radius: 12px;
}
.pdp_cost__payopt {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing);
  padding: var(--spacing);

  &:has(.pdp_cost__payopt-badge) {
    padding-top: var(--big-spacing);
  }


  @media (width >= 48rem) {
    padding: var(--big-spacing) var(--medium-spacing) var(--medium-spacing);
  }
}
/* Rows after the first: 1px separator. */
.pdp_cost__payopt + .pdp_cost__payopt {
  border-top: 1px solid var(--text-color-neutral-300);
}
.pdp_cost__payopt-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-color-neutral-800);
}
.pdp_cost__payopt-sub {
  margin: 4px 0 0;
  font-size: var(--text-copy-xs);
  line-height: 20px;
  color: var(--text-color-neutral-600);
}
.pdp_cost__payopt-info {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--text-color-neutral-600);
  -webkit-mask: url("../img/icons/info.svg") center / contain no-repeat;
          mask: url("../img/icons/info.svg") center / contain no-repeat;
  cursor: help;
}
.pdp_cost__payopt-pricing {
  flex: 0 0 auto;
  text-align: right;
  line-height: 22px;
}
.pdp_cost__payopt-price {
  margin: 0;
  font-size: var(--text-copy-s);
  color: var(--text-color-neutral-800);
}
.pdp_cost__payopt-period {
  font-size: var(--text-copy-xs);
  color: var(--text-color-neutral-600);
}
.pdp_cost__payopt-discount {
  margin: 4px 0 0;
  font-size: var(--text-copy-xs);
  line-height: 20px;
  font-weight: 700;
  color: var(--brand-color);
}
/* "3% KORTING" pill: straddles the row's top border, aligned to the content right. */
.pdp_cost__payopt-badge {
  position: absolute;
  top: 0;
  right: 24px;
  padding: 4px 12px;
  background: var(--brand-color);
  color: var(--white);
  font-family: var(--brand-bold-typeface);
  font-size: var(--text-copy-xxs);
  line-height: 16px;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
}
/* Bij 1 promo (volle breedte) ZONDER afbeelding lijnt de voorwaarden-link rechtsonder uit;
   MET afbeelding blijft 'ie links onder de tekst (zoals in de kosten-positie, #191). Bij 2
   promo's staat 'ie onder de tekst (default). Telt .pdp_promo-divs; de dialogs zijn <dialog>
   en tellen dus niet mee. */
.pdp_top__promos:not(:has(.pdp_promo:nth-of-type(2))) .pdp_promo:not(.pdp_promo--has-image) .pdp_promo__link {
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
  margin-left: auto;
}
/* Promoties onder de specs in de hero (#169): 1 = volle breedte, 2 = naast elkaar
   (desktop) / onder elkaar (mobiel). auto-fit vult 1 promo over de volle breedte. */
.pdp_top__promos {
  display: grid;
  gap: var(--spacing);

  @media (width >= 48rem) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
/* Promoties in de kosten lamel */
.pdp_cost__promo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);

  @media (width >= 48rem) {
    gap: 20px;
  }

}
/* Promotie banner (studieduur & kosten, rechterkolom). Mobile-first: 16px padding,
   image on top; desktop 40px padding, image right. */
.pdp_promo {
  position: relative;
  padding: var(--medium-spacing) var(--spacing) var(--spacing);
  background: var(--orange-faint);
  border: 1px solid #cad5e2;
  border-radius: var(--pdp-radius);
  transition: border-color 0.15s;

  /* #feedback2: hele banner klikbaar (JS zet data-promo-dialog) + hover-border neutral-500. */
  &[data-promo-dialog] {
    cursor: pointer;
  }

  &:hover {
    border-color: var(--text-color-neutral-500);
  }

  @media (width >= 48rem) {
    padding: 40px 24px;
  }

  @media (width >= 80rem) {
    padding: 40px;
  }
}
/* Blauwe variant (overige promotie); oranje is de standaard op .pdp_promo. */
/* Blauwe variant: zelfde kaart-achtergrond + border als oranje (hero-patroon
   .hero_banner .orange/.blue deelt bg/border), alleen de accentkleur wisselt:
   titel + badge naar brand-color. */
.pdp_promo--blue {
  & .pdp_promo__badge {
    background: var(--brand-color);
  }

  & .pdp_promo__title {
    color: var(--brand-color);
  }
}
.pdp_promo__badge {
  /* Stuck against the card's top border; square top, rounded bottom. */
  position: absolute;
  top: 0;
  /* Left uitlijnen met de card-padding-left van .pdp_promo per breakpoint:
     16px base / 24px @md (tussenmaat) / 40px @xl. */
  left: var(--spacing);
  padding: 2px 12px;
  background: var(--orange);
  color: var(--white);
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  font-size: var(--text-copy-xxs);
  line-height: 20px;

  @media (width >= 48rem) {
    left: 24px;
  }

  @media (width >= 80rem) {
    left: 40px;
  }
}
.pdp_promo__row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Clear the absolute badge on mobile (card padding-top is only 16px). */
  padding-top: 16px;

  /* #feedback2: afbeelding ook op mobiel rechts naast de content. */
  .pdp_promo--has-image & {
    flex-direction: row;
    align-items: center;
  }

  @media (width >= 48rem) {
    /* Desktop card padding (40px) already clears the badge. */
    padding-top: 0;
  }
}
.pdp_promo__title {
  margin: 0 0 8px;
  color: var(--orange);
  font-family: var(--brand-headline);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;

  @media (width >= 48rem) {
    font-size: 24px;
    line-height: 32px;
  }
}
.pdp_promo__text {
  margin: 0;
  color: var(--text-color-neutral-800); /* #feedback2 */
  font-size: var(--text-copy-s);
  font-weight: 300;
}
/* Als de tekst uit een RichText-omschrijving komt (`.pdp_prose`), zet `.pdp_prose :is(p,li)`
   de kleur direct op de <p> en overrulet zo de wrapper-kleur hierboven (te licht). Forceer
   neutral-800 op die p/li (#191). */
.pdp_promo__text.pdp_prose :is(p, li) {
  color: var(--text-color-neutral-800);
}
.pdp_promo__body {
  /* 20px padding-right on the text next to the image (desktop only). */
  @media (width >= 48rem) {
    .pdp_promo--has-image & {
      padding-right: 20px;
    }
  }
}
.pdp_promo__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  font-size: var(--text-copy-xs);
}
.pdp_promo__link:hover {
  text-decoration: underline; /* #188 */
}
.pdp_promo__link-chevron {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
/* #feedback2: afbeelding rechts naast de content (ook mobiel). */
.pdp_promo__media {
  .pdp_promo--has-image & {
    order: 0;
    margin-left: auto;
  }
}
.pdp_promo__media img {
  border-radius: 8px;
  height: 100px;
  width: 150px;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Lead kostenoverzicht. */
.pdp_cost__lead {
  padding: var(--spacing);
  background: var(--color-primary-500);
  border-radius: var(--pdp-radius);
  border: 1px solid var(--brand-color-pale);

  @media (width >= 48rem) {
    padding: var(--medium-spacing) 24px;
    /* Title + text left, 3 checks right, button full-width below (screenshot). */
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 40px;
         column-gap: 40px;
    row-gap: 0;
    align-items: start;

    .pdp_cost__lead-title {
      grid-column: 1;
      grid-row: 1;
      margin-bottom: 0;
    }

    .pdp_cost__lead-text {
      grid-column: 1;
      grid-row: 2;
      margin-bottom: 0;
    }

    .pdp_cost__lead-checks {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    .pdp_btn {
      grid-column: 1 / -1;
      margin-top: 28px;
    }
  }

  @media(width >= 80rem) {
    padding: var(--medium-spacing) 40px;
  }
}
.pdp_cost__lead-title {
  margin: 0 0 var(--tiny-spacing);
  font-weight: 700;

  @media (width >= 48rem) {
    font-family: var(--brand-bold-typeface);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }
}
.pdp_cost__lead-text {
  --text-color: var(--text-color-neutral-700);
  margin: 0 0 var(--spacing);
  font-size: var(--text-copy-xs);

  @media (width >= 48rem) {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
  }
}
/* Lead bullets (the 3 checks): match the lead text on desktop. */
.pdp_cost__lead-checks {
  --text-color: var(--text-color-neutral-700);
  margin-bottom: var(--spacing);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;

  @media (width >= 48rem) {
    margin-bottom: 0;
  }

  li {
    color: var(--text-color-neutral-700);
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
  }
}
/* ---- Inline studiegids lead block --------------------------------------- */
.pdp_leadform {
  display: flex;
  gap: var(--spacing);
  margin: var(--pdp-pad);
  padding: var(--spacing);
  background: var(--brand-color-faint);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);

  /* Narrow phones: image on top, text below. */
  @media (width < 26rem) {
    flex-direction: column;
  }
}
.pdp_leadform__media {
  flex: 0 0 auto;
}
.pdp_leadform__media img {
  display: block;
  width: 88px;
  height: auto;
  border-radius: 6px;
}
.pdp_leadform__body {
  display: flex;
  flex-direction: column;
  gap: var(--tiny-spacing);
  min-width: 0;
}
.pdp_leadform__kicker,
.pdp_contact__kicker {
  margin: 0;
  color: var(--brand-color);
  font-weight: 700;
  font-size: var(--text-copy-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdp_leadform__title,
.pdp_contact__title {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  @media (width >= 48rem) {
    font-family: var(--brand-headline);
  }
}
.pdp_leadform__usps {
  margin: var(--tiny-spacing) 0;
}
.pdp_leadform__usps .pdp_usps__item {
  font-weight: 400;
  font-size: var(--text-copy-xs);
}
.pdp_leadform .pdp_btn:not(.pdp_leadform__submit) {
  margin-top: var(--tiny-spacing);
}
/* ---- Studieadviseurs contact block -------------------------------------- */
.pdp_contact {
  margin: var(--pdp-pad);
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);
}
.pdp_contact__body {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_contact__text {
  margin: 0;
  color: var(--text-color-neutral);
}
.pdp_contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--small-spacing);
  margin-top: var(--tiny-spacing);
}
.pdp_contact__actions .pdp_btn {
  flex: 1 1 auto;
}
/* ---- Studentverhalen lamel (design #32 desktop / #33 mobile) ------------------ */
.pdp_stories__intro {
  margin: 0 0 var(--spacing);
  color: var(--text-color-neutral-700);

  /* SiteConfig rich-text carries its own <p>; strip its default margins. */

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}
.pdp_stories__grid {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing);
    align-items: start;
  }
}
.pdp_story {
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid #E2E8F0;
  border-radius: var(--pdp-radius);
}
/* SEO #189: de grid is de enige kopie in de HTML en bevat ALLE kaarten; op de PDP tonen we er
   maar 3, de rest is verborgen (en zichtbaar zodra ze in de dialog gekloond worden). */
.pdp_stories__grid--collapsed > .pdp_story:nth-child(n + 4) {
  display: none;
}
/* "Bekijk alle studentverhalen" opens the pdp_stories_dialog drawer; all cards stack
   in a single column inside it. */
.pdp_stories__modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
/* In de dialog tonen we de volledige quotes: hef de per-kaart clamp op en verberg de
   inline "Lees verder"-uitklap (de losse ReadMoreLink-variant blijft). */
.pdp_stories__modal-list .pdp_story__body[data-story-clamp] {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.pdp_stories__modal-list .pdp_story__more:not(.pdp_story__more--link) {
  display: none;
}
.pdp_story__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: var(--small-spacing);
  border-bottom: 1px solid #E2E8F0;
}
/* Quote badge overlaps the image by 8px on the left. */
.pdp_story__media {
  position: relative;
  flex: 0 0 auto;
  margin-left: 28px;
}
.pdp_story__avatar {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
}
.pdp_story__avatar img:not(.pdp_story__avatar-icon) {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pdp_story__avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F5F7;
  color: var(--text-color-neutral-600);
}
.pdp_story__avatar-icon {
  width: auto;
  height: 24px;
}
.pdp_story__quote {
  position: absolute;
  top: 50%;
  left: -28px;
  transform: translateY(-50%);
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #DAF1FB url("../img/icons/quote.svg") center / 20px 20px no-repeat;
}
.pdp_story__meta {
  flex: 1 1 auto;
  min-width: 0;
}
.pdp_story__meta .review_stars {
  width: 55px;
  height: 14px;
  color: #FDB022;
  --filled-color: #FEC833;
  --empty-color: #E2E8F0;

  @media (width >= 48rem) {
    width: 67px;
    height: 16px;
  }
}
.pdp_story__name {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--text-color);
}
.pdp_story__role,
.pdp_story__source {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-color-neutral-600);
}
.pdp_story__body {
  margin-top: var(--small-spacing);
  color: var(--text-color-neutral-700);
}
/* Clamp to 4 lines until expanded via "Lees verder". */
.pdp_story__body[data-story-clamp]:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.pdp_story__more {
  margin-top: var(--tiny-spacing);
}
/* The button carries the `hidden` attribute until the JS confirms the quote overflows,
   but .pdp_link sets display:inline-flex which outranks the UA [hidden]{display:none}.
   Re-assert it (class+attr specificity) so a hidden "Lees verder" actually stays hidden. */
.pdp_story__more[hidden] {
  display: none;
}
/* "Lees verder" chevron points DOWN (expands the quote), not the pdp_link right chevron.
   Flips up when expanded ("Lees minder"). */
.pdp_story__more::after {
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.pdp_story__more.is-expanded::after {
  transform: rotate(180deg);
}
/* ReadMoreLink variant: a real link (opens the interview page/modal), chevron points RIGHT
   and never rotates. */
.pdp_story__more--link::after {
  -webkit-mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
  transform: none;
}
.pdp_stories__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--spacing);
  color: var(--brand-color);
  font-weight: 700;
  cursor: pointer;
  background: transparent;
}
.pdp_stories__toggle:hover {
  text-decoration: underline; /* #188 */
}
/* "Bekijk alle studentverhalen" opens the modal drawer, so the chevron points RIGHT
   (convention: modal = chevron-right, inline expand = chevron-down). */
.pdp_stories__toggle-chevron {
  width: 16px;
  height: 16px;
  background: currentcolor;
  -webkit-mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-right.svg") center / contain no-repeat;
}
.pdp_stories__cta {
  margin-top: var(--medium-spacing);
  padding: var(--spacing);
  background: var(--color-primary-400);
  border: 1px solid var(--brand-color-pale);
  border-radius: var(--pdp-radius);

  @media (width >= 48rem) {
    padding: var(--medium-spacing);
    text-align: center;
  }
}
.pdp_stories__cta-title {
  margin: 0;
  font-weight: 700;
}
.pdp_stories__cta-text {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-color-neutral-700);

  @media (width >= 48rem) {
    margin-top: 6px;
  }
}
/* ---- Inline studiegids lead form (design #34 mobile / #35 desktop) ------------ */
.pdp_leadform {
  margin-top: var(--spacing);
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  background: var(--background-color-neutral);
  border: 1px solid var(--pdp-card-border);
  border-radius: var(--pdp-radius);

  /* Card centred in the 1330 container on desktop. */
  @media (width >= 48rem) {
    width: var(--pdp-container);
    margin-inline: auto;
    margin-top: 40px;
  }
}
.pdp_leadform__media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.pdp_leadform__title {
  margin: 0;
  font-size: var(--text-copy-m);
  font-weight: 700;

  @media (width >= 48rem) {
    font-family: var(--brand-headline);
    font-weight: 300;
    font-size: 28px;
    line-height: 36px;
  }
}
.pdp_leadform__text {
  margin: 4px 0 var(--spacing);
  color: var(--text-color-neutral-700);
}
.pdp_leadform__fields,
.pdp_leadform__row {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_leadform__input {
  &, &:is([type="search"], [type="email"], [type="number"]) {
    width: 100%;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--pdp-card-border) !important;
    border-radius: 8px;
    color: var(--text-color);
    font: inherit;

    /* Desktop: Roboto Light 14/22. Must sit on this type-specific selector (like the box
       styling) so it beats the denser theme rule that targets input[type="email"] etc; the
       placeholder inherits the font. */
    @media (width >= 48rem) {
      font-family: var(--brand-light-typeface);
      font-weight: 300;
      font-size: 14px;
      line-height: 22px;
    }
  }

  &::-moz-placeholder {
    color: var(--text-color-neutral-500) !important;
    opacity: 1 !important; /* email inputs get opacity:0.6 from a denser theme rule */
  }

  &::placeholder {
    color: var(--text-color-neutral-500) !important;
    opacity: 1 !important; /* email inputs get opacity:0.6 from a denser theme rule */
  }
}
.pdp_leadform__actions {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
  margin-top: var(--small-spacing);
}
.pdp_leadform__whatsapp {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Zelfde typografie als .pdp_leadform__text (#187): geen eigen font-props, erft identiek.
     Alleen layout + kleur hier. */
  color: var(--text-color-neutral-700);
  cursor: pointer;
  line-height: 22px;

  @media (width >= 48rem) {
    align-items: center;
  }
}
.pdp_leadform__whatsapp input {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 15px;
  height: 15px;
}
.pdp_leadform__submit {
  width: 100%;
  --corner-size-small: 8px;
}
.pdp_leadform__privacy {
  margin-top: var(--small-spacing);
  font-size: 12px;
  color: var(--text-color-neutral-600);
  text-align: center;

  /* :not([class]) om de globale `p a:not([class])` (specificity 0,1,2) te verslaan - de
     privacy-links hebben geen class. */

  a:not([class]) {
    color: #009FE3;
    text-decoration: none;

    &:hover {
      text-decoration: underline; /* #188 */
    }
  }
}
/* Desktop: image left, form right; field grids; actions on one row. */
@media (width >= 48rem) {
  .pdp_leadform {
    flex-direction: row;
    align-items: stretch;
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
    padding: 24px 40px 24px 24px;
  }

  .pdp_leadform__media {
    flex: 0 0 40%;
    max-width: 413px;
  }

  .pdp_leadform__body {
    flex: 1 1 auto;
  }

  .pdp_leadform__row--name {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .pdp_leadform__row--contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pdp_leadform__actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .pdp_leadform__submit {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto; /* keep the button right-aligned when WhatsApp opt-in is hidden */
  }

  .pdp_leadform__privacy {
    text-align: left;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
  }
}
/* PDP v2 only: the full-bleed contact ends flush against the footer. The global layout adds a
   white gap below - `body > main { padding-bottom: header-height }` and the footer's white
   `border-top: breadcrumbs-height`. Drop both on this page (scoped via :has(#pdp_v2)). */
body:has(#pdp_v2) > main {
  padding-bottom: 0;
}
body:has(#pdp_v2) > footer {
  border-top: 0;
}
/* ---- Studieadviseurs contact block (design #36 desktop / #37 mobile) ---------- */
.pdp_contact {
  display: grid;
  grid-template-columns: 112px 1fr;
  grid-template-areas:
    "media head"
    "options options";
  gap: var(--spacing);
  margin-top: var(--spacing);
  padding: var(--spacing);
  padding-bottom: 28px; /* mobile; desktop sets its own below */
  /* Full width (edge-to-edge): no side margin/radius/border. Ends flush against the footer -
     no bottom border, no bottom margin (the other .pdp_contact rule adds border:1px + margin). */
  margin-inline: 0;
  margin-bottom: 0;
  border-inline: 0;
  border-bottom: 0;
  border-radius: 0;
  background-color: #E5F5FC;

  @media (width >= 48rem) {
    background-color: #F2FAFE;
    /* Full-bleed band (stays edge-to-edge like mobile); the content aligns to the 1330 container
       via a side padding equal to the gutter. 60px above (space to the leadform). */
    margin-top: 60px;
    padding-top: 60px;
    padding-bottom: 40px;
    padding-inline: calc((100% - var(--pdp-container)) / 2);
    -moz-column-gap: var(--pdp-col-gap);
         column-gap: var(--pdp-col-gap);
  }
}
.pdp_contact__media {
  grid-area: media;
}
.pdp_contact__media img {
  display: block;
  width: 112px;
  height: 112px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.pdp_contact__head {
  grid-area: head;
  align-self: center;
}
.pdp_contact__title {
  margin: 0;
  font-weight: 500;
  color: #0F172B;
  font-size: 16px;
  line-height: 24px;

  @media (width >= 48rem) {
    font-family: var(--brand-bold-typeface);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
  }
}
.pdp_contact__text {
  margin: 4px 0 0;
  font-weight: 300;
  color: #0F172B;
  font-size: 12px;
  line-height: 1.6;

  @media (width >= 48rem) {
    font-family: var(--brand-light-typeface);
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
  }
}
.pdp_contact__options {
  grid-area: options;
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
}
.pdp_contact__option {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  width: 100%; /* button-varianten vullen niet vanzelf zoals block-<a> */
  padding: var(--spacing);
  background: var(--white);
  border: 1px solid #C2E8F9;
  border-radius: var(--pdp-radius);
  text-decoration: none;
  color: var(--text-color);
  text-align: left;
}
.pdp_contact__option-icon {
  flex: 0 0 auto;
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #E5F5FC;
}
.pdp_contact__option-icon::after {
  content: "";
  width: 20px;
  height: 20px;
  margin: auto;
  background: var(--brand-color); /* #009FE3 */
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}
.pdp_contact__option-icon--whatsapp::after {
  -webkit-mask-image: url("../img/icons/whatsapp.svg");
          mask-image: url("../img/icons/whatsapp.svg");
}
.pdp_contact__option-icon--phone::after {
  -webkit-mask-image: url("../img/icons/phone.svg");
          mask-image: url("../img/icons/phone.svg");
}
.pdp_contact__option-icon--email::after {
  -webkit-mask-image: url("../img/icons/email.svg");
          mask-image: url("../img/icons/email.svg");
}
.pdp_contact__option-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pdp_contact__option-title {
  font-weight: 700;
  color: #0F172B;

  @media (width >= 48rem) {
    font-family: var(--brand-bold-typeface);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }
}
.pdp_contact__option-sub {
  font-size: 12px;
  color: var(--text-color-neutral-600);
}
/* Arrow only makes sense on a clickable (<a>) card. */
.pdp_contact__option-arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: var(--text-color-neutral-400, #CAD5E2);
  -webkit-mask: url("../img/icons/arrow-right.svg") center / contain no-repeat;
          mask: url("../img/icons/arrow-right.svg") center / contain no-repeat;
}
/* 768-1023: title/text centered on top, 3 cards in a row, no photo (#192). */
@media (width >= 48rem) {
  .pdp_contact {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "options";
  }

  .pdp_contact__media {
    display: none;
  }

  .pdp_contact__head {
    text-align: center;
  }

  .pdp_contact__options {
    flex-direction: row;
  }

  .pdp_contact__option {
    flex: 1 1 0;
  }
}
/* From 1024: photo (183px) back on the right. */
@media (width >= 64rem) {
  .pdp_contact {
    grid-template-columns: 1fr 183px;
    grid-template-areas:
      "head media"
      "options media";
    align-items: center;
  }

  .pdp_contact__media {
    display: block;
    align-self: center;
  }

  .pdp_contact__media img {
    width: 183px;
    height: 183px;
  }
}
/* ---- Sticky header (#169/#170) ------------------------------------------
   Verschijnt bovenaan bij scrollen (geen prijs, geen favoriet; secundaire knop
   proefles met studiegids-fallback). #pdp_v2-scope (id-specificiteit) zodat de
   oude .fixed_course_header-stijlen (bottom-bar in pdp.css) overschreven worden,
   ongeacht laadvolgorde. main.js zet .aboveViewport op de site-header bij scrollen. */
#pdp_v2 .pdp_sticky {
  /* Reset de geerfde oude .fixed_course_header-layout uit pdp.css (display:grid +
     grid-template-columns:var(--columns) + width:100vw + vaste height) - anders zit de
     inner in een smalle grid-track en is de balk niet vol. */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: auto;
  min-height: var(--pdp-sticky-height);
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--pdp-card-border);
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  transform: translateY(-100%);
  transition: transform 0.3s ease;

  /* Alleen vanaf 1024px tonen (net als v1). */
  display: none;

  @media (width >= 64rem) {
    display: block;
    /* reset oude .fixed_course_header grid-layout uit pdp.css */
    grid-template-columns: none;
    width: 100%;
    height: auto;
  }

  /* Sticky header niet op mobiel tonen. */
  @media (width < 48rem) {
    display: none;
  }
}
:root:has(body > header.aboveViewport) #pdp_v2 .pdp_sticky {
  transform: translateY(0);
}
#pdp_v2 .pdp_sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing);
  padding: 12px var(--pdp-pad);

  /* Desktop: exact dezelfde container als de PDP-content (breadcrumbs/specs/lamellen):
     container-breedte, gecentreerd, padding-inline:0 zodat de rand op de container-rand ligt. */
  @media (width >= 48rem) {
    width: var(--pdp-container);
    margin-inline: auto;
    padding-inline: 0;
  }
}
/* Titel + USP-ticks + rating links (zoals productie). Groep krijgt de vrije ruimte
   zodat de titel niet meer wordt platgedrukt. */
#pdp_v2 .pdp_sticky__info {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  flex: 1 1 auto;
}
#pdp_v2 .pdp_sticky__title {
  margin: 0;
  color: var(--brand-color);
  font-family: var(--brand-bold-typeface);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  /* Max 2 regels, dan afkappen (zoals productie: "HBO-bachelor / Toegepaste...").
     white-space:normal expliciet: de titel erft anders nowrap van .fixed_course_header
     (pdp.css) en blijft dan 1 regel. */
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: 0 1 auto;
}
#pdp_v2 .pdp_sticky__usps {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
#pdp_v2 .pdp_sticky__usps .pdp_usps__item {
  color: var(--silver-mist);
}
#pdp_v2 .pdp_sticky__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
  line-height: 20px;
  color: var(--silver-mist);
}
#pdp_v2 .pdp_sticky__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
/* USP-ticks + rating hebben ruimte nodig: alleen op brede viewports tonen. */
@media (width < 64rem) {
  #pdp_v2 .pdp_sticky__usps,
  #pdp_v2 .pdp_sticky__rating {
    display: none;
  }
}
body.has-open-mobile-menu {
  overflow: hidden;
  height: 100vh;

  .mobile-menu-container {
    transform: translate3d(0, 0, 0);
  }
}
.mobile-menu-title {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  height: 50px;
  padding: 17px 16px;
  font-size: 14px;
  background-color: #009fe3;
  color: #fff;
  overflow-y: hidden;

  &:has(button.mobile-menu-back) {
    padding: 0;
  }

  &.mobile-menu-title-big {
    padding-top: 10px;
    font-size: 20px;
  }

}
.mobile-menu-container {
  overflow: hidden;
  z-index: 100;
  position: fixed;
  top: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
  transform: translate3d(100%, 0, 0);
  transition: transform 200ms ease-out;

  &[data-active-level="1"] {
    .menu-level[data-level="0"] {
      transform: translateX(-100%);
    }
    .menu-level[data-level="1"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="2"] {
    .menu-level:is([data-level="0"],[data-level="1"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="2"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="3"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="3"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="4"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="4"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="5"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="5"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="6"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="6"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="7"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"],[data-level="6"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="7"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="8"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"],[data-level="6"],[data-level="7"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="8"]:not(.is-active) {
      display: none;
    }
  }

  &[data-active-level="9"] {
    .menu-level:is([data-level="0"],[data-level="1"],[data-level="2"],[data-level="3"],[data-level="4"],[data-level="5"],[data-level="6"],[data-level="7"],[data-level="8"]) {
      transform: translateX(-100%);
    }
    .menu-level[data-level="9"]:not(.is-active) {
      display: none;
    }
  }

  .menu-level {
    overflow-y: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    transform: translateX(100%);
    transition: transform 200ms ease-in-out;

    &.is-active {
      transform: translateX(0%);
    }

    .mobile-menu-back {
      position: relative;
      background-color: #009fe3;
      padding: 17px 16px;
      margin: 0 16px 0 0;
      color: #eaf7fc;
      font-size: 10px;
      border: 0;
      border-right: 1px solid #35b6ee;
      cursor: pointer;
      font-family: inherit;

      &::before {
        font-size: calc(var(--root-size) * 1.25);
        line-height: calc(var(--root-size) * 1);
        content: "⟨";
        text-align: center;
        padding: 0;
      }
    }


    .mobile-menu-list {
      list-style: none;
      padding: 0 0 126px 0;
    }

    .mobile-menu-item {
      border-top: solid 1px #ebebeb;
      padding: 0 16px;

      &:last-child {
        border-bottom: solid 1px #ebebeb
      }
    }

    .mobile-menu-item-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding-top: 17px;
      padding-bottom: 17px;
      color: #333;

      /* Drill-down variant renders as <button>; strip native button chrome
         so it matches the <a> variant visually. */
      background: transparent;
      border: 0;
      font: inherit;
      width: 100%;
      text-align: left;
      cursor: pointer;
    }

    .mobile-menu-item-link::before {
      order: 1;
      margin-left: 1em;
      font-size: calc(var(--root-size) * 0.6);
      color: #009fe3;
      background-color: #dceef7;
      border: 5px solid #dceef7;
      border-radius: 999px;
      content: "⟩";
      width: calc(var(--root-size) * 1.5);
      height: calc(var(--root-size) * 1.5);
      text-align: center;
      padding: 0;
    }

    /* Drill-down anchors carry `href="#"` (added so Lighthouse'
       crawlable-anchors audit accepts them). Treat them like the
       no-href case and keep showing the chevron — only hide it on
       anchors that link to a real URL. */
    .mobile-menu-item-link[href]:not([href$="#"])::before {
      display: none;
    }

    .mobile-menu-item-link .sticker {
      --sticker-color: var(--brand-color);
      background: var(--sticker-color);
      position: relative;
      left: 5px;
      color: #fff;
      font-family: "Roboto", sans-serif;
      font-size: 11px;
      font-weight: bold;
      padding: 1px 6px;
      vertical-align: 2px;

      &.orange {
        --sticker-color: var(--orange);
      }

      &.red {
        --sticker-color: var(--red);
      }

      &.blue {
        --sticker-color: var(--blue);
      }

      &.green {
        --sticker-color: var(--green);
      }
    }
  }

  .menu-list-bottom {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    padding: 16px;
  }

  .menu-item-bottom {
    padding-top: 4px;

    a {
      color: #333;

      &::before {
        color: #009fe3;
        display: inline-block;
        min-width: 16px;
        margin-right: 4px;
        text-align: center
      }

      &.icon.handshake::before {
        font-size: 12px
      }
    }
  }
}
@media (width >= 64rem) {
  .mobile-menu-container {
    display: none
  }
}
.close_button,
.filter-close,
.mobile-menu-close {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;

  &::before {
    content: "✕";
    color: var(--white);
    font-size: calc(var(--root-size) * 1.75);
  }

  &:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}
.mobile-nav-sidebar-close-button,
.mobile-nav-close {
  display: none;
  z-index: 21;
  position: fixed;
  top: 106px;
  right: 20px;
  border-radius: 50%;
  padding: 4px;
  width: 18px;
  height: 18px;
  background: #333;
  color: #fff;
}
@media (width < 48rem) {
  .mobile-nav-sidebar-close-button.is-open.is-visible,
  .mobile-nav-close.is-open.is-visible {
    display: block;
  }
}
.mobile-nav-sidebar-close-button::before,
.mobile-nav-close::before {
  display: block;
  font-size: 10px;
  line-height: 1;
}
.nav-sidebar {
  position: relative;
  width: 100%;
  top: 0;
  transition: opacity 500ms;
}
form {
  --form-span: calc(var(--col-count) + 2);
  /*padding: var(--root-size);*/
  grid-column: 2 / calc(var(--form-span));

  /* First, establish some utilities from sizing the form as a whole */

  &.one_fourth {
    --form-span: round(down, calc(var(--col-count) * 0.25));
  }

  &.half, &.two_fourths {
    --form-span: calc(var(--col-count) * 0.5);
  }

  &.three_fourths {
    --form-span: round(down, calc(var(--col-count) * 0.75));
  }

  &.one_third {
    --form-span: round(down, calc(var(--col-count) * 0.33));
  }

  &.two_thirds {
    --form-span: round(down, calc(var(--col-count) * 0.66));
  }

  &.one_fifth {
    --form-span: round(down, calc(var(--col-count) * 0.2));
  }

  &.two_fifths {
    --form-span: round(down, calc(var(--col-count) * 0.4));
  }

  &.three_fifths {
    --form-span: round(down, calc(var(--col-count) * 0.6));
  }

  &.four_fifths {
    --form-span: round(down, calc(var(--col-count) * 0.8));
  }

  &.filter {
    padding: 0;
  }
}
/* padding fix*/
.flatpickr-month {
  .flatpickr-current-month {
    padding-top: 0;
  }
}
/* Vacancy filter styles */
.filter_option_disabled {
  opacity: 0.5;
  pointer-events: none;
  color: var(--subtle-grey);

  input {
    cursor: not-allowed;
  }
}
/* Add the proper icons to the inputs that should have one */
div.middleColumn:has( > :is(select, input)) {
  --input-icon: "";
  position: relative;

  & ::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%203V7M8%203V7M4%2011H20M4%207C4%206.46957%204.21071%205.96086%204.58579%205.58579C4.96086%205.21071%205.46957%205%206%205H18C18.5304%205%2019.0391%205.21071%2019.4142%205.58579C19.7893%205.96086%2020%206.46957%2020%207V19C20%2019.5304%2019.7893%2020.0391%2019.4142%2020.4142C19.0391%2020.7893%2018.5304%2021%2018%2021H6C5.46957%2021%204.96086%2020.7893%204.58579%2020.4142C4.21071%2020.0391%204%2019.5304%204%2019V7Z%22%20stroke%3D%22oklch(66.67%25%200.1473%20237.8deg)%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');

  }

  &:has( > input[type="date"], > input[type="datetime-local"]) {
    --input-icon: url("../../../themes/loi/img/icons/calendar.svg")
  }

  &:has( > input[type="time"]) {
    --input-icon: url("../../../themes/loi/img/icons/clock.svg")
  }

  &:has( > select) {
    --input-icon: url("../../../themes/loi/img/icons/chevron-down.svg");

    &::after {
      translate: 0 -40%;
    }
  }
}
.checkbox_holder {
  position: relative;
  width: var(--text-copy-l);
  height: var(--text-copy-l);
  margin-right: 12px;

  input[type="checkbox"] {
    &:has(+ .lucide_checkbox_empty + .lucide_checkbox_checked) {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      z-index: 2;
      width: 14px;
      height: 14px;
      cursor: pointer;
    }

    + .lucide_checkbox_empty {
      display: inline;
      color: var(--light-grey);
      z-index: 1;
      cursor: pointer;

      + .lucide_checkbox_checked {
        display: none;
        cursor: pointer;
        color: var(--brand-color);
      }
    }

    &:checked + .lucide_checkbox_empty {
      display: none;

      & + .lucide_checkbox_checked {
        display: inline;
      }
    }
  }

  > input, > svg {
    width: var(--text-copy-l);
    height: var(--text-copy-l);
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(0);
    flex-shrink: 0;
  }
}
fieldset.filter_fieldset {
  .filter_fieldset_inputs {
    grid-column: 1 / 3;
    grid-row: auto / span 1;
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    justify-content: flex-start;
    position: relative;
    justify-self: flex-start;
    width: 100%;
    font-size: var(--text-copy-s);
    color: var(--text-color-lighter);

    label + label {
      margin-left: -15px;

      &:has(.filter_count) {
        padding-right: 22px;
      }
    }
  }
}
span.filter_count {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background: var(--brand-color-light);
  border-radius: var(--corner-size-large);
  font-size: var(--text-copy-xxxs);
  color: var(--brand-color);
  font-weight: 700;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
/* Start styling the basic building blocks of the form, regardless of its nesting or parent */
div.field:not(.fieldgroup),
fieldset:not(.filter_fieldset),
div.fieldgroup > .middleColumn,
[class*="fieldholder"] {
  --form-input-border: 1px solid var(--subtle-grey);
  --form-transition: all 0.3s ease-out;
  --label-offset-multiplier: 1;
  --padding-size: var(--text-copy-xxs);
  --control-width: 100%;

  position: relative;
  width: var(--control-width);
  display: flex;
  flex-direction: column;
  gap: var(--text-copy-xxs);

  &:has( > .left, > .right) > *:not(input[type="checkbox"]) {
    flex: 0 1 auto;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;

    &.middleColumn {
      display: unset;
    }
  }

  /* Radio buttons have some unique styling that require selecting the input's parent as well */

  & div.middleColumn > div:has( > input[type="radio"]) {
    position: relative;
    display: flex;
    gap: var(--padding-size);

    & > label {
      --label-offset-multiplier: 3;
      left: calc(var(--padding-size) * var(--label-offset-multiplier));
    }
  }

  /*
  If we're dealing with a checkbox, the label needs no fancy treatment or transition,
  so we can simply place it inline
   */

  &:has( > input[type="checkbox"], > div.middleColumn > input[type="checkbox"]) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /*
  Now, set up the labels so that the transitions may work. However, we need to target the nodes that house the labels,
  not the labels themselves. Regular styles in common first
  */
  &:not(:has(.form__fieldgroup)) label, div > label {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 1;
    background: var(--white);
    color: var(--text-color-lighter);
    font-size: var(--text-copy-s);

    &:is(.optionset li > label) {
      margin-left: 2px;
    }

    /* Only target those inputs whose labels need transition by filtering out labels that need no transition */

    &:not(
      :is(li, .optionset, .fieldgroup) > label,
      input[type="checkbox"] + label,
      input[type="radio"] + label,
      .checkboxset > label,
      .right,
      :has(.middleColumn > div.form__fieldgroup) > label
    ) {
      position: absolute;
      top: calc(var(--form-element-size) / 2);
      left: calc(var(--padding-size) * var(--label-offset-multiplier));
      right: 5px;
      translate: 0 -50%;
      pointer-events: none;

      &.with_prefix {
        left: calc(var(--padding-size) * var(--label-offset-multiplier) + 50px);
      }
    }

    /*  Those same filtered out labels? Add their own styling here. */

    &:is(
      input[type="checkbox"] + label,
      .checkboxset > label,
      .optionset > label,
      .fieldgroup > label
    ) {
      font-size: var(--text-copy-s);
      color: inherit;

      + .middleColumn.fieldgroup {
        margin-top: var(--small-spacing);
      }
    }
  }

  /* If the container has a right item as well, neatly align it all  */

  &:has( > label.right) {
    flex-direction: row;
    align-items: center;

    & label {
      /*white-space: nowrap;*/
    }
  }

  /* Now, to style the actual (normal) inputs themselves */

  /* `:not(.flatpickr-calendar *)` keeps this generic input styling off flatpickr's
     internal controls (month <select>, year <input type="number">). With
     `static: true` the calendar renders inside the fieldholder, so without this
     exclusion the picker's own widgets pick up the full form-input treatment. */
  & input:not([type="checkbox"]):not([type="radio"]):not(.flatpickr-calendar *),
  & select:not(.flatpickr-calendar *),
  & textarea,
  & sl-select {
    min-height: var(--form-element-size);
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: var(--padding-size);
    outline: none;
    border: var(--form-input-border);
    border-radius: var(--corner-size-small);
    background: var(--white);
    color: var(--text-color);
  }

  /* If the input is a radio button, style the container & label to make it appear as one component */

  & :is( div, li ):has( > input[type="radio"]) {
    --outline-color: var(--subtle-grey);

    /*min-height: var(--form-element-size);*/
    /*margin-bottom: var(--text-copy-xs);*/
    border: none;
    border-radius: var(--corner-size-small);
    outline: 1px solid var(--outline-color);
    background: transparent;

    &.odd, &.even {
      margin-bottom: var(--text-copy-xs);
    }

    &:not(.use-utility-width) {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
    }

    & label {
      left: unset;
      background: none;
      width: 100%;
      flex-grow: 1;
      /*white-space: nowrap;*/
      color: var(--text-color);
    }

    &:has( > input:checked) {
      --outline-color: var(--brand-color-mid);
      background: var(--brand-color-faint);
    }
  }

  /* Remove horizontal gap when a tooltip trigger is present, keep vertical spacing */

  &.optionset:has(.info_popover_trigger) {
    -moz-column-gap: 0;
         column-gap: 0;

    & .info_popover_trigger {
      margin-left: 0;
      position: relative;
      top: -2px;
    }
  }

  /* Align checkboxes in an optionset (instead of singular instances) */

  ul.optionset {
    display: flex;
    flex-direction: column;
  }

  ul.optionset.horizontal {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    flex-direction: row;
    gap: 0;
    flex-basis: 40px;
  }

  & .optionset li {
    display: flex;
    align-items: center;
    gap: var(--text-copy-xxs);
    margin-bottom: var(--text-copy-xs);

    & label {
      font-size: unset;
      color: unset;
    }
  }

  /* When the CompositeField class is used, we want inputs laid out as a row, now as the default column */

  &.CompositeField:not(.userform-fields > .CompositeField) {
    flex-direction: column;

    @media (width >= 48rem) {
      flex-direction: row;
    }

    & > [class*="compositefield-child"] {
      flex: 1;
    }
  }

  /* Hide some specific classes to bait bad actors */

  & :is([id*="_Url_Holder"], [id*="_Comment_Holder"], [class*="uploadfield-holder"]) {
    display: none;
  }

  /* This div usually serves us no purpose, and is more of a hindrance */

  & .middleColumn {
    display: contents;
  }

  /* fieldgroups should be rendered as columns */

  & .fieldgroup {
    > .fieldgroup-field > .fieldgroup,
    > .middleColumn {
      display: flex;
      flex-direction: column;
      gap: var(--text-copy-xs);

      @media (width >= 48rem) {
        flex-direction: row;
        width: 100%;

        > .fieldgroup-field {
          flex: 1;
        }
      }
    }

    /*
     * `:not(.inline-pair)` scopes this "optionset grows to fit-content inside
     * the default row-layout" rule to non-inline-pair fieldgroups. Inside an
     * `.inline-pair` block below we want the optionset to be content-sized
     * (`flex: 0 1 auto`), not grow, so the sibling input keeps its space.
     * Without this :not() the default rule wins on specificity and the inline
     * pair override is ignored for Salutation.
     */
    > .fieldgroup-field > .fieldgroup:not(.inline-pair) {
      > .fieldholder-small.optionset.horizontal {
        flex: 1 1 fit-content;
      }
    }

    /*
     * `.inline-pair` forces a fieldgroup to render its two child fields
     * side-by-side on every viewport (not just md-above). Used on lead-form
     * name rows (Salutation+Firstname, Infix+Surname) so mobile also gets
     * the compact two-column layout the design calls for.
     *
     * When a FieldGroup sits inside another FieldGroup, SilverStripe renders
     * WITHOUT a wrapping `.middleColumn` — the direct children of the inner
     * `.fieldgroup` become `.fieldholder-small` elements. The existing rule
     * above targets `> .middleColumn` and `> .fieldgroup-field > .fieldgroup`,
     * which DOES set flex on `.inline-pair` itself (flex-direction column on
     * mobile). Override here on BOTH possible children so the pair stays row
     * no matter which rendering path applies.
     */
    &.inline-pair,
    &.inline-pair > .middleColumn {
      flex-direction: row !important;
      width: 100%;

      /*
       * Mobile-safe baseline: content-sized, allowed to shrink, no greedy grow.
       * Keeps a horizontal optionset (e.g. Salutation) compact and prevents the
       * sibling text input being pushed off-screen on narrow viewports.
       */
      > :is(.fieldholder-small, .fieldgroup-field) {
        flex: 0 1 auto;
        min-width: 0;
      }
    }
  }

  /*
   * Desktop-only layout for `.inline-pair` rows inside the outer Gegevens
   * FieldGroup: flatten the pair wrappers so all 4 name fields (Salutation,
   * Firstname, Infix, Surname) become flex siblings of the outer middleColumn.
   * Salutation stays content-sized, the other 3 share the remaining row space
   * equally.
   *
   * `display: contents` removes the wrapper elements from the box tree, so the
   * flex children of Gegevens's `.middleColumn` are effectively the deepest
   * `.fieldholder-small` elements (even though the DOM still has the wrappers).
   */
  @media (width >= 48rem) {
    & .fieldgroup > .middleColumn:has(> .fieldgroup-field > .fieldgroup.inline-pair) {
      > .fieldgroup-field:has(> .fieldgroup.inline-pair),
      > .fieldgroup-field > .fieldgroup.inline-pair {
        display: contents;
      }
    }

    /* After flattening, set flex on the deepest fieldholder-smalls.
       `flex: 0 1 fit-content` — basis `fit-content` includes padding/border so
       the optionset has the right natural width, grow=0 keeps it from eating
       leftover row space, shrink=1 lets it yield on narrow viewports. */
    & .fieldgroup.inline-pair .fieldholder-small.optionset.horizontal {
      flex: 0 1 fit-content;
    }
    & .fieldgroup.inline-pair .fieldholder-small:not(.optionset):not(.horizontal) {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  /*
  Similar to the .right selector? Same, but different
  Reinstate the middleColumn div so we make room for additional clarifying text.
  Add some special cases for when radio or checkboxes are used
  */

  & > :has(.right-title ) {
    flex-direction: row;
    align-items: center;

    & div.middleColumn {
      flex: 1;
      display: flex;
      flex-direction: column;

      &:has(div > input[type="radio"]) {
        gap: calc(var(--padding-size));
      }

      &:has(> input[type="checkbox"]) {
        flex-direction: row;
        gap: calc(var(--padding-size));
      }
    }

    & .right-title {
      flex: 1;
    }
  }

  /*---------------*/

  /* Finally, offer some utilities to set the width of the inputs, regardless of the form's own sizing */

  &.one_fourth {
    --control-width: 25%;
  }

  &.half, .two_fourths {
    --control-width: 50%;
  }

  &.three_fourths {
    --control-width: 75%;
  }

  &.one_third {
    --control-width: 33%;
  }

  &.two_thirds {
    --control-width: 66%;
  }

  &.one_fifth {
    --control-width: 20%;
  }

  &.two_fifths {
    --control-width: 40%;
  }

  &.three_fifths {
    --control-width: 60%;
  }

  &.four_fifths {
    --control-width: 80%;
  }
}
/* Validation messages */
span.message,
p.message {
  font-size: var(--text-copy-xs);
  color: var(--red);

  &.required,
  &.bad,
  &.validation {
    color: var(--red);
  }

  &.good {
    color: var(--green, #27ae60);
  }
}
/* Form-level error message */
form > p.message {
  padding: var(--text-copy-xxs) var(--text-copy-xs);
  border: 1px solid var(--red);
  border-radius: var(--corner-size-small);
  background: color-mix(in oklch, var(--red) 8%, white);
}
/* Field-level: red border on invalid fields */
div.field:has(> span.message.required),
div.field:has(> span.message.bad) {
  & input,
  & select,
  & textarea {
    border-color: var(--red);
  }
}
div.field {
  padding-bottom: var(--root-size);
}
fieldset div.field, [class*="fieldgroup"] div.field, [class*="fieldholder"] div.field {
  padding-bottom: inherit;
}
/*
For clarity's sake, add the label interactivity as a separate CSS section;
in this case, developer comprehension outweighs CSS brevity :)

Again, target the basic form blocks
*/
div.field, fieldset:not(.filter_fieldset), [class*="fieldgroup"], [class*="fieldholder"] {

  /*
  The design repurposes labels as label _and_ placeholder: in other words, the actual placeholder "nodes" are useless.
  Make them invisible
  */

  & ::-moz-placeholder {
    opacity: 0;
  }

  & ::placeholder {
    opacity: 0;
  }

  /* Set the transition speed and the likes*/

  & label {
    transition: var(--form-transition);
  }

  /*
  If the naughty inputs have no (valid) entry yet, hide the "value" text browsers add themselves
  otherwise, it'd interface with the label
  */

  &:has(input:is([type="date"], [type="time"], [type="datetime-local"]):invalid) > div.middleColumn > input {
    color: transparent;
  }

  /* Ah, but _do_ show the default value whenever the input has focus  */

  &:has(input:is([type="date"], [type="time"], [type="datetime-local"])):focus-within > div.middleColumn > input {
    color: inherit;
  }

  /*
  Prepare for some complex selectors :)
  In a nutshell: we target .fields that have either focus or user-entered values
  Unfortunately, not all inputs are created equal, so we need to target each differently.

  Basic <inputs /> (text, number, password, textarea) when focused, user input detected
  More exotic <inputs /> (date, time, datetime) need the :required attribute as well
  <Selects> need their first option to be disabled so we can detect when the user has made a conscious selection
  */

  select:invalid {
    color: var(--text-color-faint);

    option:not([value=""]):not(:disabled) {
      color: var(--text-color);
    }
  }

  select:valid {
    option[value=""], option:disabled {
      color: var(--text-color-faint);
    }
  }

  input:-moz-read-only:not(.has-flatpickr):not([type="checkbox"]):not([type="radio"]) {
    opacity: 1;
    color: var(--text-color-light);
    background-color: var(--lighter-grey) !important;
  }

  select:disabled,
  input:disabled,
  input:read-only:not(.has-flatpickr):not([type="checkbox"]):not([type="radio"]) {
    opacity: 1;
    color: var(--text-color-light);
    background-color: var(--lighter-grey) !important;
  }

  .field:not(.checkbox):not(.optionset):not(:has(.has-flatpickr)):has(
    select:disabled:not(:-moz-placeholder),
    input:disabled:not(:-moz-placeholder),
    input:read-only:not([type="checkbox"]):not([type="radio"]):not(:-moz-placeholder)
  ) {
    > label {
      top: 0 !important;
      background: var(--lighter-grey) !important;
      font-size: var(--text-copy-xs) !important;
      color: var(--text-color-light) !important;
      border-radius: 6px;
      padding: 0 5px;
    }
  }

  .field:not(.checkbox):not(.optionset):not(:has(.has-flatpickr)):has(
    select:disabled:not(:placeholder-shown),
    input:disabled:not(:placeholder-shown),
    input:-moz-read-only:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown)
  ) {
    > label {
      top: 0 !important;
      background: var(--lighter-grey) !important;
      font-size: var(--text-copy-xs) !important;
      color: var(--text-color-light) !important;
      border-radius: 6px;
      padding: 0 5px;
    }
  }

  .field:not(.checkbox):not(.optionset):not(:has(.has-flatpickr)):has(
    select:disabled:not(:placeholder-shown),
    input:disabled:not(:placeholder-shown),
    input:read-only:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown)
  ) {
    > label {
      top: 0 !important;
      background: var(--lighter-grey) !important;
      font-size: var(--text-copy-xs) !important;
      color: var(--text-color-light) !important;
      border-radius: 6px;
      padding: 0 5px;
    }
  }

  /* Disabled/read-only fields that already hold content: drop the grey pill so
     the label doesn't render as a raised sliver over the greyed field.
     The :not([type=…]) filters mirror rule #1 — without them this :has() has
     lower specificity and rule #1's !important wins. */
  .field:not(.checkbox):not(.optionset):not(:has(.has-flatpickr)):has(
    select:disabled:not(:-moz-placeholder),
    input:disabled:not([type="checkbox"]):not([type="radio"]):not(:-moz-placeholder),
    input:read-only:not([type="checkbox"]):not([type="radio"]):not(:-moz-placeholder),
    textarea:disabled:not(:-moz-placeholder),
    textarea:read-only:not(:-moz-placeholder)
  ) {
    > label {
      background: white !important;
    }
  }
  .field:not(.checkbox):not(.optionset):not(:has(.has-flatpickr)):has(
    select:disabled:not(:placeholder-shown),
    input:disabled:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown),
    input:-moz-read-only:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown),
    textarea:disabled:not(:placeholder-shown),
    textarea:-moz-read-only:not(:placeholder-shown)
  ) {
    > label {
      background: white !important;
    }
  }
  .field:not(.checkbox):not(.optionset):not(:has(.has-flatpickr)):has(
    select:disabled:not(:placeholder-shown),
    input:disabled:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown),
    input:read-only:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown),
    textarea:disabled:not(:placeholder-shown),
    textarea:read-only:not(:placeholder-shown)
  ) {
    > label {
      background: white !important;
    }
  }

  &:not(:has(.form__fieldgroup, .fieldgroup)) {
    &:has( :is(input:not([type="date"], [type="time"], [type="datetime-local"]), textarea):is(:focus, :not(:placeholder-shown), :-webkit-autofill)),
    &:has( input:is([type="date"], [type="time"], [type="datetime-local"]):is(:valid, :focus-within, :active)), /* Date inputs need the required attribute for the selector to work*/
    &:has( select option:disabled:not(:checked)), /* Requires an option with the disabled attribute set (commonly the first one) */
    &:has( select option:checked:not(:disabled)) /* For any preselected selects */
    {
      & > :is(label, div.middleColumn > label):not(
        input[type="checkbox"] + label,
        .optionset > label,
        .checkboxset > label
        ) {
        top: 0;
        background: var(--white);
        font-size: var(--text-copy-xs);

        &.with_prefix {
          left: calc(var(--padding-size) * var(--label-offset-multiplier));
        }
      }
    }
  }
}
.userform {
  padding: 0;

  .userform-progress {
    .page-progress {
      text-align: center;
      padding-bottom: var(--root-size);
    }

    .progress {
      .progress-bar {
      }
    }
  }

  nav {
    ul.step-buttons {
      display: flex;
      justify-content: center;
      -moz-column-gap: calc(var(--col-gap) / 2);
           column-gap: calc(var(--col-gap) / 2);
      padding-bottom: var(--root-size);

      li.step-button-wrapper {
        &.current {
        }

        &.viewed {
        }

        .step-button-jump {
          margin-left: inherit !important;
        }

        &:has(button[style*='display: none']) {
          display: none !important;
        }
      }
    }

    &.step-navigation {
      ul.step-buttons {
        display: flex;
        justify-content: flex-start;

        li.step-button-wrapper {
          &.current {
          }

          &.viewed {
          }

          .step-button-jump {

          }
        }
      }
    }
  }

  .hide {
    /* Must win over the base field rule `div.field:not(.fieldgroup)` (specificity 0,2,1).
       userforms toggles this class for conditional display rules; a hidden field must stay hidden. */
    display: none !important;
  }

  .progress-title {

  }

  .userform-fields {
    padding-top: var(--root-size);

    .FormHeading {
      font-size: var(--text-subheading-size);
    }

    fieldset {
      legend {
        font-weight: 600;
        padding-bottom: var(--padding-small);
      }
    }
  }
}
.react-international-phone-input-container {
  .react-international-phone-country-selector-button {
    border: var(--form-input-border);
    padding-bottom: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .react-international-phone-country-selector-dropdown {
    z-index: 10;
  }

  input.react-international-phone-input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}
/**
 * Flatpickr date picker styles
 * When altInput is enabled, flatpickr creates a visible input and hides the original.
 * The original input should have type="hidden" but we add this as a fallback.
 */
.flatpickr-input[readonly]:not(.active) + .has-flatpickr {
  /* The alt input - ensure it looks like our form inputs */
}
/* Hide the original input when followed by the alt input (flatpickr altInput mode) */
input.flatpickr-input:not([type="hidden"]) + input.has-flatpickr[readonly] {
  /* Alt input is visible, but original should be hidden */
}
/* Target the original input that should be hidden in altInput mode */
.middleColumn > input.flatpickr-input:first-child:not([readonly]) {
  display: none;
}
/* Ensure the alt input (readonly) is properly styled */
.middleColumn > input.has-flatpickr[readonly] {
  cursor: pointer;
  background-color: white;
}
/*
 * Floating-label override for `.fieldholder-small` wrappers used by lead-form
 * field groups (RequestStudyGuideForm, RequestTrialLessonForm, StudyAdviceForm,
 * RequestCostOverviewForm). The generic `[class*="fieldholder"] label` rule
 * higher up SHOULD have handled these, but the nested `:not(<complex>)` chain
 * (~lines 241-269) fails to apply `position: absolute` reliably in practice, so
 * labels stack above the input instead of floating inside it.
 *
 * This explicit rule is scoped to `.fieldholder-small > .fieldholder-small-label`
 * and restores the intended placeholder-style look: label vertically centered
 * inside the input at rest, floating to top:0 on focus / has-content / autofill.
 */
.fieldholder-small {
  position: relative;
}
.fieldholder-small > .fieldholder-small-label {
  position: absolute;
  top: calc(var(--form-element-size) / 2);
  left: calc(var(--padding-size) * var(--label-offset-multiplier, 1));
  right: 5px;
  translate: 0 -50%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 1;
  padding-inline: 2px;
  background: var(--white);
  color: var(--text-color-faint);
  font-size: var(--text-copy-s);
  pointer-events: none;
  transition: top 0.15s ease-out, font-size 0.15s ease-out;
}
.fieldholder-small:has(
  > input:is(
    :focus,
    :not([type="date"]):not([type="time"]):not([type="datetime-local"]):not(:placeholder-shown),
    :-webkit-autofill
  )
) > .fieldholder-small-label,
.fieldholder-small:has(
  > input:is([type="date"], [type="time"], [type="datetime-local"]):is(:valid, :focus-within, :active)
) > .fieldholder-small-label,
.fieldholder-small:has(
  > textarea:is(:focus, :not(:placeholder-shown), :-webkit-autofill)
) > .fieldholder-small-label {
  top: 0;
  font-size: var(--text-copy-xs);
}
/*
 * Mobile: lead-form submit buttons span the full row so they're easy to tap.
 * Desktop keeps the default compact button width.
 */
@media (width < 48rem) {
  form:is(
    .study-guide-form,
    .trial-lesson-form,
    .cost-overview-form,
    .study-advice-form
  ) :is(input[type="submit"], button[type="submit"], button.action) {
    width: 100%;
  }
}
/*
 * The outer div.field.fieldgroup wrappers (e.g. Gegevens) inherit padding-bottom
 * from the fieldset via the generic reset rule, creating extra visual space between
 * field groups (the gap between the Tussenvoegsel/Achternaam row and E-mailadres is
 * larger than the rest — gitnti/loi#123 point 3). Zero it out for all lead forms.
 */
:is(
  .cost-overview-form,
  .study-guide-form,
  .trial-lesson-form,
  .study-advice-form
) div.field.fieldgroup {
  padding-bottom: 0;

  + [id*="_Holder"].field.checkbox,
  + input[type="hidden"] + [id*="_Holder"].field.checkbox{
    margin-top: var(--small-spacing);
  }
}
/* Lead-form field labels pick up the global 2px inline padding (above), which makes
   them sit slightly indented relative to the input text (gitnti/loi#123 point 4).
   Zero it for all lead forms. */
:is(
  .cost-overview-form,
  .study-guide-form,
  .trial-lesson-form,
  .study-advice-form
) :is(
  div.field:not(.fieldgroup),
  fieldset:not(.filter_fieldset),
  [class*="fieldholder"]
) > label:first-of-type {
  padding-inline: 0;
}
/* Studiegids form: hide the accepted-but-internal "Unknown" salutation option. The PDP
   inline form posts Salutation=Unknown; the visible form stays Mw./Dhr. only. */
.study-guide-form input[name="Salutation"][value="Unknown"],
.study-guide-form input[name="Salutation"][value="Unknown"] + label,
.study-guide-form li:has(input[name="Salutation"][value="Unknown"]) {
  display: none;
}
body > :is(main, footer) {
  transition: var(--standard-transition);
}
/*
Search visibility now controlled via JavaScript with .search-active class
This prevents issues with pointer-events and gives us better control
 */
/* Dim background when menu is open (only when a submenu is active) */
body:has(#menu_container.menu-active) > :is(main, footer) {
  filter: brightness(0.1);
  pointer-events: none;
}
/* Dim background when search is active - controlled by JS */
body.search-active > :is(main, footer) {
  filter: brightness(0.1);
  pointer-events: none;
}
body #menu_container.menu-active > #menu_drawer {
  padding-block: var(--menu-height);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
body:not(.checkout) > header,
body > nav#menu_container,
body > main > nav {
  translate: 0 0;
  transition: transform 0.3s ease-out;

  &.aboveViewport {
    @media (width >= 64rem) {
      translate: 0 -160px;
    }
  }
}
/* Reserveer de scrollbar-gutter altijd, zodat het verbergen van de scrollbar bij een geopende
   slide-in/dialog (overflow:hidden hieronder) de pagina niet laat verspringen (#188). Op mobiel
   met overlay-scrollbars heeft dit geen effect. */
html {
  scrollbar-gutter: stable;
}
body:has(dialog[open], .as_dialog) {
  overflow: hidden;
}
body:has(form.filter.as_dialog) {
  > header,
  #menu_container,
  main > nav,
  > footer {
    display: none;
  }
}
@keyframes spinner-rotation {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
body.is_loading,
form.filter.is_loading,
form.is_loading {
  position: relative;
  pointer-events: none;

  &::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9998;
  }

  &::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border: 5px solid var(--subtle-grey);
    border-bottom-color: var(--brand-color);
    border-radius: 50%;
    animation: spinner-rotation 1s linear infinite;
    z-index: 9999;
  }
}
form.filter.is_loading,
form.is_loading {
  &::before,
  &::after {
    position: absolute;
  }
}
form.is_loading button[type="submit"],
form.is_loading input[type="submit"] {
  pointer-events: none;
  opacity: 0.6;
}
/* Search results visibility is now in layout.css inside #header_search_results */
/*
#header_search #clear_search_icon {
  opacity: 1;
  transition: var(--standard-transition);
}

#header_search:has(input:placeholder-shown) #clear_search_icon {
  opacity: 0;
}
*/
/* this is an unparsed icon */
i[data-lucide] {
  display: none;
}
/* this is a SVG */
.lucide {
  display: inline-flex;
  /* self align center */
  align-self: center;
  width: var(--text-copy-xs);
  height: var(--text-copy-xs);
}
.icon_container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
}
.icon_dot {
  display: inline-grid;
  place-items: center;
  width: var(--text-copy-l);
  height: var(--text-copy-l);
  font-size: var(--text-copy-xs);
  font-weight: 900;
  color: var(--brand-color);
  background: var(--brand-color-light);
  border-radius: 100%;
}
.lucide-medium {
  width: var(--text-copy-m);
  height: var(--text-copy-m);
}
.lucide-large {
  width: var(--icon-size);
  height: var(--icon-size);
}
/* for dropdown chevron rotation */
.lucide-chevron-down {
  transition: transform 0.2s ease-out;
}
details[open] {
  /* not in another details open */
  :not(:has(details:not([open]))) & {
    .lucide-chevron-down {
      transform: rotate(180deg);
      color: var(--brand-color);
    }
  }
}
@media (width < 80rem) {

  /* review_carousel styles moved to mobile-first in components.css */

  article.mobile_column {
    .subgrid.one_fourth {
      .course_details + p {
        grid-row: 3 / 4;
      }

      .button {
        grid-row: 4 / 5;
      }
    }
  }


  ul.zebra_columns {
    grid-template-columns: repeat(auto-fit, minmax(200px, -webkit-max-content));
    grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
    grid-auto-flow: dense;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;

    & li {
      white-space: nowrap;
    }

    & > li:is(:nth-of-type(6n+1), :nth-of-type(6n+2), :nth-of-type(6n+3)) {
      background: unset;
    }

    & > li:is(:nth-of-type(even)) {
      background: var(--grey);
    }
  }

  div.pdp_block {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: var(--large-form-element-size);
         column-gap: var(--large-form-element-size);


    & > h2 {
      grid-column: 1 / -1;
      grid-row: 1 / span 1;
      font-size: var(--text-heading-size);
    }

    & > .course_signup {
      grid-column: 2 / 3;
    }
  }

  div.contactbar {
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
    margin: var(--root-size);

    & > img {
      position: absolute;
      scale: unset;
      height: var(--large-form-element-size);
      translate: 0 calc(0px - var(--large-form-element-size) * 0.275);
      top: 0;
      right: 0;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-auto-flow: row;
      align-items: start;
      padding: var(--root-size);
      gap: var(--root-size);

      & li {
        & a {
          justify-content: start;
        }

        &:first-child {
          grid-column: 1 / -1;
          border-bottom: 1px solid var(--brand-color-mid);
        }
      }
    }
  }

}
@media (width < 64rem) {

  body:is(body, body.with_sidebar) > main {
    > nav {
      top: var(--header-height);
      grid-row: 1 / span 1;

      & > #crumbtrail {
        -webkit-padding-start: var(--root-size);
                padding-inline-start: var(--root-size);
        grid-column: 1 / -1;
      }

      /* ticks_list is now hidden by default (mobile-first) in layout.css
         and only shown from --lg-above, so the explicit mobile hide that
         lived here is redundant (gitnti/loi#164). */
    }

    > section#hero + nav {
      top: inherit;
      grid-row: inherit;
    }
  }

  body:is(body, body.with_sidebar) > main {
    grid-row: 2 / 6;
  }

  .content_card_block {

    &.two_thirds {
    }

    &.half {
      grid-template-rows: 7fr 8fr;
    }
  }

  /* review_carousel styles moved to mobile-first in components.css */

  article.mobile_column {
    .subgrid.one_fourth {
      .course_details + p {
        grid-row: inherit;
      }

      .button {
        grid-row: inherit;
      }
    }
  }

  body > footer {
    grid-template-rows: auto minmax(33dvh, auto) minmax(15dvh, auto);
  }
}
/*Phone width as used by NTI: (max-width: 767px)*/
@media (width < 64rem) {
  :root {
    --footer-height: auto;
  }

  div.content_block {

    &.element_image_banner {
      padding-inline: inherit;
      padding-right: inherit;
    }

    grid-template-rows: auto;

    & > [class*="subgrid"] {
      &.content_card_block {
        &.half {
          grid-template-rows: 5fr 8fr;
        }
      }
    }
  }

  div.pdp_block {
    grid-template-columns: 1fr;

    & > .course_signup {
      grid-column: 1 / -1;
      grid-row: 3 / span 1;
    }
  }

  /* review_carousel responsive styles moved to mobile-first in components.css */

  .flexed_grid {
    flex-direction: column;
  }
}
#checkout-overview-button {
  display: none !important;
}
@media (width < 64rem) {
  #checkout-overview-button {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: .85rem;
    min-height: inherit;
    height: inherit;
    margin-left: 1rem;
    margin-top: 1px;
    border: none;

    /* Override the .ghost hover/active state (white bg + border) */
    &:hover,
    &:focus,
    &.open {
      background: transparent;
      border: none;
    }

    /* Round arrow "dot" mirrors the PDP .icon_dot: a circle holding the chevron. */
    .checkout-overview-arrow {
      display: inline-grid;
      place-items: center;
      width: var(--text-copy-l);
      height: var(--text-copy-l);
      color: var(--brand-color);
      background: var(--brand-color-light);
      border-radius: 100%;
      flex-shrink: 0;

      &::after {
        content: "";
        width: 16px;
        height: 16px;
        -webkit-mask: url(../../../themes/loi/img/icons/chevron-down.svg) no-repeat 50% 50%;
        mask: url(../../../themes/loi/img/icons/chevron-down.svg) no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        background-color: currentColor;
      }
    }

    &.open .checkout-overview-arrow::after {
      -webkit-mask-image: url(../../../themes/loi/img/icons/chevron-up.svg);
      mask-image: url(../../../themes/loi/img/icons/chevron-up.svg);
    }
  }

  body.checkout {
    /* Keep the header visible while scrolling on mobile checkout. Fixed (not sticky):
       the body grid already reserves a --header-height row, so pinning the header to
       the viewport leaves that space and content doesn't jump underneath it.
       padding-inline restores the side gutter that the body grid normally provides
       (the header leaves the grid when fixed) — same value as .header-scroll-up. */
    header,
    header.header-scroll-up,
    header.header-scroll-down {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding-inline: 10px;
      /* Neutralise the scroll-hide transform the JS applies via header-scroll-down. */
      transform: none;
    }

    footer {
      border-top: none !important;
    }

    main, footer {
      position: relative;

      &::after {
        content: '';
        inset: 0;
        background-color: black;
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
        z-index: 1;
      }
    }

    &.mobile-menu-open {
      main, footer {
        &::after {
          opacity: 0.5;
        }
      }
    }
  }
}
@media (width < 48rem) {
  /*.field > .flex*/
  .flex {
    display: block;

    [class^='w-'] {
      width: 100%;

      &:not(:has([class^='w-'])) {
        margin-bottom: .75rem;
      }
    }
  }
}
label[for="acceptedTerms"] :is(a.open_in_modal, a[target="modal"]) {
  color: var(--blue);
  text-decoration: underline;
}
/*
* {
  outline: 1px solid red;
}

iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  min-height: 400vh;
  opacity: 0.2;
  mix-blend-mode: difference;
}
*/
/* Open Props */
/*@import "open-props/style";*/
/**
 * above not working, bug in postcss in combination with open props,
 * see: https://github.com/postcss/postcss-import/issues/492 and https://github.com/argyleink/open-props/issues/545
 **/
:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--ease-circ-in:cubic-bezier(.6,.04,.98,.335);--ease-circ-in-out:cubic-bezier(.785,.135,.15,.86);--ease-circ-out:cubic-bezier(.075,.82,.165,1);--ease-cubic-in:cubic-bezier(.55,.055,.675,.19);--ease-cubic-in-out:cubic-bezier(.645,.045,.355,1);--ease-cubic-out:cubic-bezier(.215,.61,.355,1);--ease-expo-in:cubic-bezier(.95,.05,.795,.035);--ease-expo-in-out:cubic-bezier(1,0,0,1);--ease-expo-out:cubic-bezier(.19,1,.22,1);--ease-quad-in:cubic-bezier(.55,.085,.68,.53);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-quad-out:cubic-bezier(.25,.46,.45,.94);--ease-quart-in:cubic-bezier(.895,.03,.685,.22);--ease-quart-in-out:cubic-bezier(.77,0,.175,1);--ease-quart-out:cubic-bezier(.165,.84,.44,1);--ease-quint-in:cubic-bezier(.755,.05,.855,.06);--ease-quint-in-out:cubic-bezier(.86,0,.07,1);--ease-quint-out:cubic-bezier(.23,1,.32,1);--ease-sine-in:cubic-bezier(.47,0,.745,.715);--ease-sine-in-out:cubic-bezier(.445,.05,.55,.95);--ease-sine-out:cubic-bezier(.39,.575,.565,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-2:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-3:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-4:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-5:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}
@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}
@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}
@keyframes scale-up{to{transform:scale(1.25)}}
@keyframes scale-down{to{transform:scale(.75)}}
@keyframes slide-out-up{to{transform:translateY(-100%)}}
@keyframes slide-out-down{to{transform:translateY(100%)}}
@keyframes slide-out-right{to{transform:translateX(100%)}}
@keyframes slide-out-left{to{transform:translateX(-100%)}}
@keyframes slide-in-up{0%{transform:translateY(100%)}}
@keyframes slide-in-down{0%{transform:translateY(-100%)}}
@keyframes slide-in-right{0%{transform:translateX(-100%)}}
@keyframes slide-in-left{0%{transform:translateX(100%)}}
@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}
@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}
@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes ping{90%,to{opacity:0;transform:scale(2)}}
@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}
@keyframes float{50%{transform:translateY(-25%)}}
@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}
@keyframes pulse{50%{transform:scale(.9)}}
@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}
@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}
/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */
:root{--swiper-theme-color:#007aff}
:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}
.swiper-vertical>.swiper-wrapper{flex-direction:column}
.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}
.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}
.swiper-horizontal{touch-action:pan-y}
.swiper-vertical{touch-action:pan-x}
.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}
.swiper-slide-invisible-blank{visibility:hidden}
.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}
.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}
.swiper-backface-hidden .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}
.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}
.swiper-3d .swiper-wrapper{transform-style:preserve-3d}
.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}
.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}
.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}
.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}
.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}
.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}
.swiper-lazy-preloader-black{--swiper-preloader-color:#000}
@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}
.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}
.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}
.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}
:root{--swiper-navigation-size:44px}
.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}svg{height:100%;-o-object-fit:contain;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}
.swiper-button-lock{display:none}
.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}
.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon{transform:rotate(180deg)}}
.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}
.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon{transform:rotate(0deg)}}}
.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon{transform:rotate(90deg)}}}
.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}
.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}
.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}
.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}
.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}
.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}
.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}
.swiper-pagination-lock{display:none}
.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}
.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}
.swiper-scrollbar-cursor-drag{cursor:move}
.swiper-scrollbar-lock{display:none}
.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}}
.swiper-slide-zoomed{cursor:move;touch-action:none}
.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}
.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}
.swiper-grid>.swiper-wrapper{flex-wrap:wrap}
.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}
.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}
.swiper.swiper-cube{overflow:visible}
.swiper-cube{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}
.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}
.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:0}}
.swiper.swiper-flip{overflow:visible}
.swiper-flip{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}
.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:0}}
.swiper-creative{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}
.swiper.swiper-cards{overflow:visible}
.swiper-cards{.swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;box-sizing:border-box;touch-action:manipulation;background:#fff;box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}
.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}
.flatpickr-calendar.open{display:inline-block;z-index:99999}
.flatpickr-calendar.animate.open{animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}
.flatpickr-calendar.inline{display:block;position:relative;top:2px}
.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}
.flatpickr-calendar.static.open{z-index:999;display:block}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none !important}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}
.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}
.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}
.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}
.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}
.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}
.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}
.flatpickr-calendar:before{border-width:5px;margin:0 -5px}
.flatpickr-calendar:after{border-width:4px;margin:0 -4px}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}
.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}
.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}
.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}
.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}
.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}
.flatpickr-calendar:focus{outline:0}
.flatpickr-wrapper{position:relative;display:inline-block}
.flatpickr-months{display:flex}
.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;flex:1}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}
.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}
.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{transition:fill .1s;fill:inherit}
.numInputWrapper{position:relative;height:auto}
.numInputWrapper input,.numInputWrapper span{display:inline-block}
.numInputWrapper input{width:100%}
.numInputWrapper input::-ms-clear{display:none}
.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);box-sizing:border-box}
.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}
.numInputWrapper span:active{background:rgba(0,0,0,0.2)}
.numInputWrapper span:after{display:block;content:"";position:absolute}
.numInputWrapper span.arrowUp{top:0;border-bottom:0}
.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}
.numInputWrapper span.arrowDown{top:50%}
.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}
.numInputWrapper span svg{width:inherit;height:auto}
.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}
.numInputWrapper:hover{background:rgba(0,0,0,0.05)}
.numInputWrapper:hover span{opacity:1}
.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}
.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}
.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}
.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}
.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}
.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}
.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}
.flatpickr-current-month input.cur-year:focus{outline:0}
.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}
.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}
.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:28px}
.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}
span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:bolder}
.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}
.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:307.875px}
.flatpickr-days:focus{outline:0}
.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}
.dayContainer + .dayContainer{box-shadow:-1px 0 0 #e6e6e6}
.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;justify-content:center;text-align:center}
.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}
.flatpickr-day.today{border-color:#959ea9}
.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}
.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}
.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 0 #569ff7}
.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}
.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}
.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}
.flatpickr-day.hidden{visibility:hidden}
.rangeMode .flatpickr-day{margin-top:1px}
.flatpickr-weekwrapper{float:left}
.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 #e6e6e6}
.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}
.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}
.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}
.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}
.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}
.flatpickr-time:after{content:"";display:table;clear:both}
.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}
.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}
.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}
.flatpickr-time.hasSeconds .numInputWrapper{width:26%}
.flatpickr-time.time24hr .numInputWrapper{width:49%}
.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}
.flatpickr-time input.flatpickr-hour{font-weight:bold}
.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}
.flatpickr-time input:focus{outline:0;border:0}
.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}
.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}
.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}
.flatpickr-input[readonly]{cursor:pointer}
@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* optional imports that use the props */
/*@import "../../node_modules/open-props/normalize.min.css";*/
/*@import "../../node_modules/open-props/buttons.min.css";*/
/* just light or dark themes */
/*@import "../../node_modules/open-props/normalize.dark.min.css";*/
/*@import "../../node_modules/open-props/buttons.dark.min.css";*/
/*@import "../../node_modules/open-props/normalize.light.min.css";*/
/*@import "../../node_modules/open-props/buttons.light.min.css";*/
/* individual imports */
/*@import "../../node_modules/open-props/indigo.min.css";*/
/*@import "../../node_modules/open-props/easings.min.css";*/
/*@import "../../node_modules/open-props/animations.min.css";*/
/*@import "../../node_modules/open-props/sizes.min.css";*/
/*@import "../../node_modules/open-props/gradients.min.css";*/
/* see PropPacks for the full list */
/* Dependencies */
:root {
  --kidzz-white: oklch(0.997 0 89.876);
  --kidzz-white-half: oklch(0.997 0 89.876 / 0.8);
  --kidzz-grey: oklch(0.839 0 89.876);
  --kidzz-grey-transparent: oklch(0.839 0 89.876 / 0.1);
  --kidzz-blue-light: oklch(0.954 0.018 234.499);
  --kidzz-blue: oklch(0.6527 0.184 249.827);
  --kidzz-blue-dark: oklch(0.3805 0.2 264.7);
  --kidzz-orange-light: oklch(0.931 0.043 58.106);
  --kidzz-orange: oklch(0.6657 0.187 45.90);
  --kidzz-green: oklch(0.699 0.22 139.41);

  /*!* Color overrides *!*/
  --brand-color: var(--kidzz-blue);
  --brand-color-light: var(--kidzz-blue-light);
  --brand-color-faint: var(--kidzz-blue-light);
  --white: var(--kidzz-white);
  --grey: var(--kidzz-grey);
  --cta-orange: var(--kidzz-orange);
  --cta-green: var(--kidzz-green);
  --orange: var(--kidzz-orange);

  /*!* Color overrides (base theme) *!*/
  --blue: #0093fa;
  --brand-color-hover: #0084E1;
  --cta-blue-hover: #0084E1;

  /*!* Color assignments *!*/
  --header-background-color: var(--kidzz-white);
  --heading-color: var(--kidzz-orange);

  --quote-font-family: 'Kalam', "Open Sans", "Roboto", arial, "Helvetica Neue", helvetica;

  --header-height: 5.375rem;
  --footer-height: auto;

}
/* Checkout uses orange brand color for Kidzz */
#react-root[data-component="checkout"],
#react-root[data-component="product-search"] {
  --brand-color: var(--kidzz-orange);
}
/* Overrides */
:root {
  --brand-typeface: "Open Sans", Roboto;
  --brand-bold-typeface: "Open Sans", "Roboto Bold", "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-medium-typeface: "Open Sans", "Roboto Medium", "Roboto", arial, "Helvetica Neue", helvetica;
  --brand-light-typeface: "Open Sans", "Roboto Light", "Roboto", arial, "Helvetica Neue", helvetica;
  /* gitnti/loi#76-80 added --brand-headline: "Barlow Condensed" to the LOI base.
     Kidzz keeps its own typography stack — point it back at the bold face so
     the hero title doesn't render in Barlow on the Kidzz subsite. */
  --brand-headline: var(--brand-bold-typeface);

  /* Restore the production hero font scale + line-heights that the LOI
     ticket bumped (mobile 24 → 26 px, desktop 43.2 → 52 px) and added
     dedicated line-height vars for. Kidzz matches the pre-ticket numbers. */
  --text-hero-size: 2.7rem;
  --text-hero-size-mobile: var(--text-title-size);
  --line-height-hero-size: 1.25;
  --line-height-hero-size-mobile: 1.25;
}
:is(.button, .cta, button:not(.plain):not(.regular), input[type="submit"]).secondary {
  font-family: "Open Sans", Roboto, Arial, system-ui, sans-serif;
}
.mobile-menu-container {
  .menu-level {
    font-family: "Open Sans", "Roboto", sans-serif;
  }

  .mobile-menu-item-link .sticker {
    font-family: "Open Sans", "Roboto", sans-serif;
  }
}
.mobile-menu-title {
  background: var(--kidzz-orange);
}
body > main {
  grid-row-start: 2;

  & nav:has(#crumbtrail) {
    display: none;
  }

  &:not(:has(section#hero)) {
    & > .container--grid {
      grid-row: 1 / 3;
      margin-top: var(--big-spacing);
    }
  }

  & > .container--grid {
    &:not(:first-of-type) {
      @media (width < 48rem) {
        padding-top: var(--spacing);
      }
    }
  }
}
body > header {
  padding-block: unset;
  background: var(--kidzz-white);

  .inner {
    grid-template-columns: 110px 1fr -webkit-max-content;
    grid-template-columns: 110px 1fr max-content;

    @media (width >= 48rem) {
      grid-template-columns: 80px 1fr -webkit-max-content;
      grid-template-columns: 80px 1fr max-content;
    }

    @media (width >= 80rem) {
      grid-template-columns: 100px 1fr -webkit-max-content;
      grid-template-columns: 100px 1fr max-content;
    }
  }

  #header_logo {
    a {
      height: 100%;
      @media (width < 48rem) {
        width: 65px;
      }
    }
  }
}
#kiddz-header-page-nav {
  display: none;

  @media (width >= 48rem) {
    display: flex;
    flex: 1;
  }

  & a.kidzz-header-page-link {
    color: var(--kidzz-orange);
    font-size: var(--text-subheading-size);
    font-weight: 700;
    display: flex;
    align-items: center;
    padding-inline: var(--col-gap);

    &.active, &:hover, &:focus, &:active {
      background: var(--kidzz-orange-light);
    }
  }
}
#logo_mark {
  height: 3.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
body header {
  #header_links {
    display: none;
    gap: var(--col-gap);

    @media (width >= 48rem) {
      display: flex;
    }

    > a {
      &:first-of-type {
        margin-left: 0;
      }

      > img {
        filter: brightness(0);
      }
    }
  }

  #mobile_phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--mini-spacing);
    font-size: var(--text-copy-xxs);
    color: var(--text-color);

    .telephonenumber {
      font-weight: 700;
      font-size: var(--text-copy-s);
    }

    @media (width >= 48rem) {
      display: none;
    }
  }
}
body header #header_links a,
body header #header_links a:not(:last-of-type) {
  color: var(--text-color);
  font-size: var(--root-size);
  border-right: none;
  padding-right: var(--ghost-button-padding);

  &.button {
    border: 1px solid var(--text-color);
  }
}
/* Keep header_links visible on checkout pages so #checkout-overview-button renders on mobile (kidzz hides #header_links below md elsewhere). */
body.checkout header #header_links {
  display: flex;
  align-items: center;
}
/* Kidzz header is white, so the ghost button's default light font is invisible —
   use the kidzz orange for the overview button label. The taller kidzz header (86px
   vs ~35px on LOI) also needs the button vertically centered, not top-aligned. */
body.checkout header #checkout-overview-button {
  color: var(--kidzz-orange);
  align-self: center;
  margin-top: 0;
}
/* The kidzz header is 86px tall (--header-height: 5.375rem) which is too high for the
   compact mobile checkout. Lower it on mobile checkout only. The header is position:fixed
   there, so its height is content-driven — the --header-height var alone won't shrink it;
   set an explicit height (and keep the reserved grid row in sync) plus a smaller logo. */
@media (width < 64rem) {
  body.checkout {
    --header-height: 4rem;
  }

  body.checkout header {
    height: 4rem;
    min-height: 0;
  }

  body.checkout header #logo_mark {
    height: 2.5rem;
  }
}
/* Footer */
body > footer {
  background: var(--white);
  overflow: hidden;
  grid-template-rows: auto 3rem;

  @media (width < 48rem) {
    grid-template-rows: auto;
  }

  & div#footer_nav {
    --text-color: var(--text-color);
    --heading-color: var(--kidzz-orange);

    padding-block: 50px 75px;
    background: #fff;
    border-top: 3px solid var(--kidzz-orange);

    & > nav {
      grid-row-start: 1;
      display: flex;
      grid-column: 2 / -2;

      & > img {
        max-height: 75px;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: left;
           object-position: left;
      }
    }
  }

  & #socials {
    display: flex;
    align-items: center;
    gap: var(--icon-size);
    padding-top: 40px;

    & img {
      flex: unset;
      height: 30px;
    }
  }

  #signoff {
    --text-color: var(--kidzz-orange);
    > img {
      height: 75px;
    }
  }

  & #disclaimer {
    display: flex;
    background: var(--kidzz-orange);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--white);
    grid-column: 1 / -1;
    font-size: var(--text-copy-s);
    gap: var(--mini-spacing);
    padding-block: var(--small-spacing);

    @media (width >= 48rem) {
      padding-block: unset;
      flex-direction: row;
      gap: var(--big-spacing);
    }

    & a {
      position: relative;
      display: flex;
    }
  }
}
footer {

}
body > footer {
  & div#footer_nav {
    > nav {
      display: flex;
      flex-direction: column;
      @media (width >= 48rem) {
        flex-direction: row;

        > * {
          flex: 1;

        }
      }

      details {
        border-top: 0;
        border-bottom: 1px solid var(--kidzz-orange);

        &:is(:first-of-type) {
          margin-top: var(--spacing);

          @media (width >= 48rem) {
            margin-top: 0;
          }
        }

        @media (width >= 48rem) {
          border-bottom: none;
        }

        &:open {
          padding-bottom: var(--padding-medium);

        }

        summary {
          padding-left: 0;
          color: var(--kidzz-orange);

          .icon_dot {
            color: var(--kidzz-white);
            background-color: var(--kidzz-orange);
          }
        }
      }
    }
  }
}
/* =====================================================================
   Revert LOI hero/header rework (gitnti/loi#76-80) for the Kidzz subsite.
   The base theme grew a HeroBanner element, a bounce-in animation, a
   Barlow Condensed hero title, tighter header spacing and a new
   13px/34px grid-template-rows padding around hero_desktop. Kidzz did
   NOT sign off on any of that, so the rules below pin Kidzz back to the
   pre-ticket visual state without touching the shared LOI source.
   ===================================================================== */
/* Hero title spacing reverted to the pre-ticket defaults. */
section#hero .hero_title {
  margin-bottom: var(--small-spacing);

  @media (width >= 48rem) {
    margin-bottom: var(--big-spacing);
  }
}
/* Descendant `.hero_desktop` elements (hero content paragraph, CTA wrappers
   etc.) were `display: block` on production; the LOI rework switched them to
   `display: flex` so the new HeroBanner CTA could align nicely. Kidzz keeps
   block so the existing content layout doesn't reflow into a flex row. */
#hero .hero_desktop {
  @media (width >= 48rem) {
    display: block !important;

    &.cta {
      display: inline-flex !important;
    }
  }
}
/* Kidzz never asked for the new floating HeroBanner card or its mobile
   strip — hide both so the CMS field stays harmless on Kidzz pages. */
section#hero .hero_banner,
section#hero .hero_banner_mobile,
section#hero:has(> .hero_banner_mobile) {
  display: none !important;
}
/* Restore the old hero section sizing on Kidzz. The LOI ticket added
   `aspect-ratio: 2.75/1` + `max-height: var(--desktop-bg-height, fit-content)`
   to body > main > & > section#hero, which caps the HomePage hero to the
   image height (400 px) and overrides the long-standing
   `body.HomePage section#hero @media (>=48rem) { height: 462px }` rule.
   Production was 462 px — restore it by dropping both new caps. */
body > main > section#hero {
  aspect-ratio: auto;
  max-height: none;
}
/* Restore the dark left-side gradient overlay on hero background images
   so the white hero title text stays readable. LOI dropped the overlay
   in the hero rework (gitnti/loi#77) when it began rendering the title
   inside a separate alignment box. Kidzz keeps the overlay. */
section#hero.with-bg-image,
.element_image_banner .content_block_inner.with-bg-image {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 65%),
    var(--desktop-bg);

  &.with-mobile-bg-image {
    @media (width < 48rem) {
      background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%),
        var(--mobile-bg);
    }
  }
}
body > main > section#hero.hero_desktop {
  /* Drop the 13px/34px top+bottom rail rows added for the HeroBanner so
     the hero content sits at its old vertical position on Kidzz. */
  grid-template-rows: repeat(5, 1fr);

  @media (width >= 48rem) {
    grid-template-rows: repeat(5, 1fr);
  }

  /* HomePage mobile hero height bumped 150 → 170px on LOI for the new
     bottom mobile banner — Kidzz keeps the original 150px. */
  &.hero_mobile.hero_bigger {
    @media (width < 48rem) {
      height: 150px;
    }
  }

  /* Hero CTA: restore the green CTA + position/font tweaks that the
     LOI ticket dropped to make room for the white "blue" variant. */
  & .cta {
    --cta-color: var(--cta-green);
    grid-row: 4 / 5;
    font-size: var(--text-subheading-size);

    &:hover {
      --cta-color: var(--cta-green-hover);
    }

    @media (width < 48rem) {
      padding: revert;
      font-size: revert;
      min-height: revert;
    }
  }
}
/* Restore the persistent header box-shadow that LOI dropped when it
   switched to a mobile-only `0 3px 4px #00000029` shadow.
   Padding-block stays `unset` (Kidzz default at line 50 above) — LOI's
   new 8px padding-block does NOT apply on Kidzz in production. */
body > header {
  box-shadow: 0 2px 2px var(--subtle-black);

  @media (width < 48rem) {
    box-shadow: 0 2px 2px var(--subtle-black);
  }
}
/* Header tweaks: undo the font-family + 1-px transform additions that
   LOI added to .mobile_menu_icon. (grid-column-gap is NOT overridden —
   production Kidzz inherits the LOI base value, whatever it currently is.) */
body > header .inner > .mobile_menu_icon {
  font-family: inherit;

  > span {
    transform: translateY(3px);
  }
}
/* #menu_icon spacing pinned to the production Kidzz values. LOI's base
   rule sets `width: 20px; margin: -3px -2px;`; Kidzz drops the width
   constraint and uses padding + a slightly different left margin so the
   icon sits where the designer wants it next to the logo. */
body > header #menu_icon {
  width: auto;
  padding: 0 14px 0 0;
  margin-left: -4px;
}
body > header #header_links {
  font-family: inherit;
  gap: var(--col-gap);

  @media (width >= 64rem) {
    gap: var(--col-gap);
  }

  & > a > img {
    transform: none;
  }
}
.text-blue {
  color: var(--kidzz-blue);
}
.text-orange {
  color: var(--kidzz-orange);
}
.element_intro {
  & .element_title {
    > h2 {
      --heading-color: var(--text-color);
    }
  }
}
.content_card_block_title,
.content_card_block_content > h3 {
  --heading-color: var(--text-color);
}
/* Change the styling of the FooterReviews */
body > footer > #footer_nav > nav > div > #reviews {
  display: block;
  text-align: left;
  margin-top: var(--spacing);
  border: 0px;
}
#reviews h3 {
  color: var(--black);
  font-size: var(--text-copy-l);
  margin-top: var(--root-size);
}
#reviews > #anchor_reference {
  font-size: var(--text-copy-s);
}
#reviews > p > #stars {
  aspect-ratio: auto;
}
body {
  > main {
    /* :is(.hero_desktop, .hero_mobile) bumps the selector specificity to
       (1,2,3) — same as the LOI new rule
       `body > main > & > section#hero.hero_desktop .hero_alignment`
       (gitnti/loi#77). Without the bump LOI's rule overrides this block
       and the Kidzz hero_alignment positioning + gradient backdrop are
       lost. Both Kidzz hero variants always carry one of these classes,
       so the visual selector match is unchanged. */
    > section#hero:is(.hero_desktop, .hero_mobile) {
      .hero_title {
        margin-bottom: 0;
        @media (width >= 48rem) {
          margin-bottom: var(--spacing);
        }
      }

      .hero_alignment {
        grid-column: 1 / 7;
        grid-row: 1 / 6 !important;
        background-image: linear-gradient(to right, oklch(0.14 0 0 / 0) 0%, oklch(0.14 0 0 / 0.6) 50%, transparent 100%);
        padding: var(--inner-col-padding-x);

        @media (width >= 48rem) {
          grid-column: 2 / 12;
          border-radius: 10px;
          background-color: var(--white);
          background-image: none;
          padding: 35px;
          grid-row: 4 / 5 !important;
        }

        h1, h2, h3, p {
          --heading-color: var(--kidzz-white);
          --text-color: var(--black);

          @media (width >= 48rem) {
            --heading-color: var(--kidzz-orange);
          }
        }
      }
    }
  }

  &.checkout {
    > main {
      @media (width >= 48rem) {
        margin-top: var(--huge-spacing);
      }
    }
  }

  /*
   * Change cookiebanner labels to be aligned correctly
   */
  #CybotCookiebotDialogBodyFieldsetInnerContainer > div > label
  {
    position: static !important;
  }

}
.product_title {
  --brand-color: var(--kidzz-orange);
}
.product_title_block {
  @media (width < 48rem) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: var(--small-spacing);
         column-gap: var(--small-spacing);

    .product_title {
      flex: 0 0 100%;
    }
  }
}
.product_title_block .rating {
  font-weight: normal;
  color: var(--text-color);
  font-size: var(--text-copy-m);
  gap: var(--tiny-spacing);
  align-items: center;

  .review_stars {
    height: 22px;
  }

  span {
    color: var(--text-color-lighter);
  }
}
.course_usps {
  .lucide {
    align-self: flex-start;
    margin-top: 4px;
  }
}
.course_info_accordion {
  background-color: transparent;
  padding: 0;
  border-radius: 0;

  .kidzz_elements {
    > .element {
      .content_card_block {
        &.bg_color_white {
          padding-inline: 0;

          & .content_card_block_inner {
            padding-inline: 0;
          }
        }
      }

      .md\:rounded-lg {
        border-radius: 0;
      }

      &:first-child {
        .bg_color_white {
          --backdrop-color: var(--kidzz-grey-transparent);
          padding: var(--content-padding);
        }
      }

      .element_intro {
        padding-inline: 0;

        .element_title {
          > h2, > h3 {
            --heading-color: var(--kidzz-orange);
            font-size: var(--text-subheading-size);
          }
        }

      }
    }
  }
}
.course_variant {
  --brand-color-light: var(--kidzz-blue);
}
div.pdp_block {
  .course_signup {
    padding: var(--big-spacing);
    background-color: #CACACA1A;

    @media (width >= 48rem) {
      min-width: 370px;
    }

    .price_original {
      display: block;
      font-weight: normal;
      text-decoration: none;

      del {
        text-decoration: line-through;
      }

      + .price_discounted {
        margin-left: 0;
      }
    }
  }
}
.has_2, .has_3, .has_4 {
  .review_carousel {
    & .scrollable {
      .review {
        .review_image_desktop {
          width: 167px;

          img {
            width: 167px;
            height: 167px;
          }
        }

        blockquote {
          font-style: normal;
          font-family: var(--quote-font-family);
        }
      }
    }
  }
}
/* Product Gallery for LOI Kidzz */
.product_gallery {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  flex: 1;
}
.gallery_highlight {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--kidzz-grey);

  & img,
  & video,
  & iframe {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  & .gallery_highlight_image {
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: scale(1.02);
    }
  }
}
.gallery_nav {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto !important;
  width: 77px;
  background: #2F2F2F4D;
  border: none;
  border-radius: 0 !important;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background-color 0.2s ease, display 0.2s ease;
  z-index: 2;

  &:hover {
    background-color: #2F2F2F80 !important;
    transform: translateY(0) !important;
  }

  & i,
  & svg {
    width: 32px;
    height: 32px;
  }

  &[hidden] {
    display: none;
  }
}
.gallery_nav_prev {
  left: 0;
  border-radius: 8px 0 0 8px;
}
.gallery_nav_next {
  right: 0;
  border-radius: 0 8px 8px 0;
}
.gallery_highlight_scroll {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}
.gallery_slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;

  & img,
  & video,
  & iframe {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  & .gallery_highlight_image {
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: scale(1.02);
    }
  }
}
.gallery_thumbnails {
  width: 100%;
  overflow: hidden;
}
.gallery_thumbnails_scroll {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;

  &::-webkit-scrollbar {
    display: none;
  }
}
.gallery_thumbnail {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
  background: var(--kidzz-grey);
  scroll-snap-align: start;
  position: relative;
  transition: border-color 0.2s ease, opacity 0.2s ease;

  &:hover {
    border-color: var(--kidzz-orange-light);
  }

  &.active {
    border-color: var(--kidzz-orange);
  }

  & img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.gallery_thumbnail_play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
  }
}
/* Element Navigator */
.element_navigator {
  background-color: var(--white);
  margin-bottom: var(--spacing);
}
.element_navigator_scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;

  &::-webkit-scrollbar {
    display: none;
  }
}
.element_navigator_item {
  flex: 0 0 auto;
  padding: var(--tiny-spacing) var(--small-spacing);
  border: 1px solid var(--kidzz-blue);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--text-color);
  font-size: var(--text-copy-m);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;

  &:hover {
    background-color: var(--kidzz-grey-transparent);
  }

  &.active {
    border-width: 2px;
    padding: calc(0.625rem - 1px) calc(1.25rem - 1px);
  }
}