.c--filters {
  margin-block-end: 1.5rem;
}

  .c--filters h4 {
    margin-block-end: 1.25rem;
    font-family: var(--f-f);
    font-weight: 500;
    color: #222;
  }

  .c--filters .w-pills {
    margin-block-end: 2rem;
  }

  .c--filters .w-pills .bef-links ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }

  .c--filters .w-pills a.bef-link {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.625rem;
      padding: 0.625rem 1.25rem;
      border: 1px solid #E6E6E6;
      border-radius: var(--b-r_pill);
      font-family: var(--f-f);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.625rem;
      color: var(--body_c);
      -webkit-text-decoration: none;
      text-decoration: none;
      white-space: nowrap;
      transition: border-color 0.2s ease, color 0.2s ease;
    }

  .c--filters .w-pills a.bef-link:hover {
        border-color: #0081CC;
      }

  .c--filters .w-pills a.bef-link svg,
      .c--filters .w-pills a.bef-link img,
      .c--filters .w-pills a.bef-link .icon {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
      }

  .c--filters .w-pills a.bef-link--selected {
      border-color: #0081CC;
    }

  /* Sector pills: icon from the theme's icons/ directory, shown after the
       label, 40x40 with a 10px gap (provided by a.bef-link's `gap`). */

  .c--filters .w-pills a.bef-link[class*="bef-link--sector-"]::after {
      content: "";
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }

  .c--filters .w-pills a.bef-link--sector-all-sectors::after {
      background-image: url("../../../icons/all-sectors.svg");
    }

  .c--filters .w-pills a.bef-link--sector-agriculture::after {
      background-image: url("../../../icons/agriculture.svg");
    }

  .c--filters .w-pills a.bef-link--sector-forest::after {
      background-image: url("../../../icons/forest.svg");
    }

  .c--filters .w-pills a.bef-link--sector-urban::after {
      background-image: url("../../../icons/urban.svg");
    }

  .c--filters .w-pills a.bef-link--sector-hydromorphology::after {
      background-image: url("../../../icons/hydromorphology.svg");
    }

  .c--filters .w-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
  }

  .c--filters .w-filters-row > *:nth-child(1) {
      z-index: 7;
    }

  .c--filters .w-filters-row > *:nth-child(2) {
      z-index: 6;
    }

  .c--filters .w-filters-row > *:nth-child(3) {
      z-index: 5;
    }

  .c--filters .w-filters-row > *:nth-child(4) {
      z-index: 4;
    }

  .c--filters .w-filters-row .c--dropdown {
      --dropdown_f-s: 1rem;
      --dropdown_f-w: 400;
      --dropdown_bg: #F6F6F6;
      --dropdown_b-r: 1.375rem;
      --dropdown_summary_p-b: 0.625rem;
      --dropdown_summary_p-i: 1.25rem;
      --dropdown_summary_m-w: 20rem;
    }

  .c--filters .w-filters-row .c--dropdown .dropdown__summary {
        width: 20rem;
        font-family: var(--f-f);
        line-height: 150%;
        color: #000;
      }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes,
      .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
        width: 100% !important;
      }

  /* The control stays on the label's first line: these option labels
           wrap often, and neither centring them against the wrapped block nor
           letting the label drop below the box reads as one row. */

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes .form-item--type-checkbox,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes .form-item--type-radio,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios .form-item--type-checkbox,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios .form-item--type-radio {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          flex-wrap: nowrap;
          width: 100%;
          gap: 0.5rem;
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes label,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios label {
          margin: 0;
        }

  /* Custom checkbox/radio — 12px, sharp corners on the checkbox,
           round for the radio, filled brown when checked. Drawn from
           scratch (appearance: none) instead of `accent-color`, which in
           combination with .c--input's text-input padding renders an
           oversized, misshapen control in some browsers. */

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="checkbox"],
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="radio"],
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="checkbox"],
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="radio"] {
          flex-shrink: 0;
          width: 0.75rem !important;
          height: 0.75rem !important;
          padding: 0;
          margin: 0;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          background-color: var(--c-white) !important;
          background-repeat: no-repeat;
          background-position: center;
          border: 1px solid #cccccc;
          cursor: pointer;
          transition: var(--t--b);
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="checkbox"], .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="checkbox"] {
          border-radius: 0;
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="radio"], .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="radio"] {
          border-radius: 50%;
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="checkbox"]:checked, .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="checkbox"]:checked {
          background-color: var(--c-earth) !important;
          background-image: url("../../../icons/check.svg") !important;
          background-size: 0.625rem 0.625rem;
          border-color: var(--c-earth);
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="radio"]:checked, .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="radio"]:checked {
          border-color: var(--c-earth);
          background-image: radial-gradient(circle, var(--c-earth) 40%, transparent 41%) !important;
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="checkbox"]:focus-visible,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="radio"]:focus-visible,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="checkbox"]:focus-visible,
        .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="radio"]:focus-visible {
          outline: 2px solid var(--c-blue, var(--c-primary));
          outline-offset: 1px;
        }

  /* Custom checkbox — 12px square with sharp corners, filled Earth
           brown when checked. */

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="checkbox"], .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="checkbox"] {
          flex-shrink: 0;
          width: 0.75rem !important;
          height: 0.75rem !important;

          /* These inputs also carry .c--input, whose 12px inline padding
             would floor the border-box width at 26px and swallow the size
             set here. */
          padding: 0;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          background-color: var(--c-white);
          border: 1px solid #cccccc;
          border-radius: 0;
          cursor: pointer;
          transition: var(--t--b);
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="checkbox"]:checked, .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="checkbox"]:checked {
            background-color: var(--c-earth);
            background-image: url("../../../icons/check.svg");
            background-repeat: no-repeat;
            background-position: center;

            /* Scale the 12px tick down to the 10px content box. */
            background-size: 0.625rem 0.625rem;
            border-color: var(--c-earth);
          }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes input[type="checkbox"]:focus-visible, .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios input[type="checkbox"]:focus-visible {
            outline: 2px solid var(--c-blue);
            outline-offset: 1px;
          }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes label, .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios label {
          flex: 1 0 auto;
        }

  .c--filters .w-filters-row .c--dropdown .dropdown__content .form-checkboxes label.visually-hidden, .c--filters .w-filters-row .c--dropdown .dropdown__content .form-radios label.visually-hidden {
          position: static !important;
          height: auto !important;
          display: inline !important;
          margin-top: -2px;
        }

  .c--filters .w-filters-row input.search-input {
      width: 20rem;
      padding: 0.625rem 1.25rem 0.625rem 2.875rem;
      border: none;
      border-radius: 1.375rem;
      background-color: #F6F6F6;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2300447C' stroke-width='1.8'%3e%3ccircle cx='9' cy='9' r='6.5'/%3e%3cpath d='M18 18l-4.5-4.5' stroke-linecap='round'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: 20px center;
      background-size: 1.125rem 1.125rem;
      font-family: var(--f-f);
      font-size: 1rem;
      font-weight: 400;
      line-height: 150%;
      color: var(--body_c);
    }

  .c--filters .w-filters-row input.search-input::-moz-placeholder {
        color: #555555;
      }

  .c--filters .w-filters-row input.search-input::placeholder {
        color: #555555;
      }

/* Map display variant: pills sit on the map, dropdowns in a white card below. */
.c--filters--map {
  margin-block-end: 0;
}
.c--filters--map h4 {
    display: none;
  }
.c--filters--map .w-pills {
    margin-block-end: 1rem;
  }
.c--filters--map .w-pills a.bef-link {
      background: #fff;
      padding: 0.625rem 1rem;
      font-size: 0.9375rem;
      line-height: 1.25rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
/* Sector icons are a list-display-only affordance. */
.c--filters--map .w-pills a.bef-link[class*="bef-link--sector-"]::after {
      content: none;
    }
.c--filters--map .w-filters-row {
    flex-direction: column;
    /* Override the list variant's wrap: with it on, align-items: stretch
       stops clamping each .w-filter-group to this row's width, so a long
       selected option grows the trigger past the card instead of clipping. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1rem;
    max-width: 17.1875rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);

    /*
     * The generic .c--filters rule above styles direct children of
     * .form-checkboxes as rows, which also catches the inner
     * .bef-checkboxes wrapper. Force it back to a vertical list here.
     * .bef-radios (e.g. the Content type filter) gets the same treatment.
     */
  }
/* Caption + trigger pair (Figma "Group", 4px apart). The group is now the
       direct child the z-index ladder above lands on, so it has to be
       positioned for that to take effect - otherwise a lower dropdown's
       trigger paints over the open panel of the one above it. */
.c--filters--map .w-filters-row .w-filter-group {
      display: flex;
      position: relative;
      flex-direction: column;
      gap: 0.25rem;
    }
.c--filters--map .w-filters-row .w-filter-group__label {
      font-family: var(--f-f);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.03125rem;
      letter-spacing: 0.55px;
      text-transform: uppercase;
      color: #666;
    }
.c--filters--map .w-filters-row .c--dropdown {
      --dropdown_f-s: 0.875rem;
      --dropdown_c: #000;
      --dropdown_g: 0.5rem;
      --dropdown_summary_p-b: 0.375rem;
      --dropdown_summary_p-i: 1.25rem;

      /* The trigger is a pill, so say so rather than leaning on the 22px the
         list variant sets: at 36px tall it only ever renders as half the
         height, so 22px never applies and reads as a mistake. */
      --dropdown_b-r: var(--b-r_pill);
    }
/* Match the open panel to the trigger it hangs from. The component hard-codes
       `border-radius: 12px` and `padding: 12px` on .dropdown__content - both as
       plain declarations that its own custom properties cannot reach - so this
       has to out-specify them rather than set a token. 18px is the pill's
       effective radius at a 36px trigger; the insets repeat the trigger's own, so
       the checkboxes line up under its label and clear the chevron. */
.c--filters--map .w-filters-row .c--dropdown .dropdown__content {
      padding-block: 1rem;
      padding-inline: 1.25rem 1rem;
      border-radius: 1.125rem;
    }
.c--filters--map .w-filters-row .c--dropdown,
    .c--filters--map .w-filters-row .c--dropdown .dropdown__summary {
      width: 100%;
      min-width: 0;
    }
.c--filters--map .w-filters-row .c--dropdown .dropdown__summary {
      box-sizing: border-box;
      height: 2.25rem;
      /* The component sets both sides from one property; the design insets
         the chevron side less than the text side. */
      padding-inline-end: 1rem;
    }
/* One line, clipped - a long term must not grow the trigger. */
.c--filters--map .w-filters-row .c--dropdown .dropdown__summary-text {
      flex: 1 0 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.5;
    }
.c--filters--map .w-filters-row .c--dropdown .dropdown__summary > svg {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
    }
.c--filters--map .w-filters-row .c--dropdown .dropdown__content .form-checkboxes.bef-checkboxes,
    .c--filters--map .w-filters-row .c--dropdown .dropdown__content .form-radios.bef-radios {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      gap: 0.625rem;
    }
.c--filters--map .w-filters-row .c--dropdown .dropdown__content .bef-checkboxes .c--form-element,
    .c--filters--map .w-filters-row .c--dropdown .dropdown__content .bef-radios .c--form-element {
      align-items: flex-start !important;
      flex-wrap: nowrap !important;
      gap: 0.5rem;
    }
.c--filters--map .w-filters-row .c--dropdown .dropdown__content .bef-checkboxes .c--input,
    .c--filters--map .w-filters-row .c--dropdown .dropdown__content .bef-radios .c--input {
      width: auto !important;
      flex: 0 0 auto !important;
      margin: 0 !important;
    }
.c--filters--map .w-filters-row .c--dropdown .dropdown__content .bef-checkboxes .c--label,
    .c--filters--map .w-filters-row .c--dropdown .dropdown__content .bef-radios .c--label {
      flex: 1 1 auto;
      font-size: 0.8125rem;
      line-height: 1.3;
    }