body.category-page {
  --qp-nav-height: 4.5rem;
  --category-map-content-offset: 17rem;
  --category-products-overview-height: calc(
    100dvh - var(--category-map-content-offset) - var(--qp-nav-height, 4.5rem)
  );
  --productsMapOverviewMapHeight: var(--category-products-overview-height);
  --productsMapOverviewMapStickyTop: var(--qp-nav-height, 4.5rem);
}

body.category-page main {
  display: flex;
  flex-direction: column;
}

body.category-page qp-products-overview {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;

  /* Amsterdam Parken WL qp-dropdown (Storybook amsterdamparkreen-dropdown-theme) */
  --dropdownFontFamily-wl: var(--ap-font-family);
  --dropdownLabelColor-wl: var(--ap-grey-500);
  --dropdownValueColor-wl: var(--ap-teal-dark);
  --dropdownIconColor-wl: var(--ap-grey-500);
  --dropdownBg-wl: var(--ap-grey-100);
  --dropdownBgHover-wl: var(--ap-teal-pale);
  --dropdownBorderColor-wl: transparent;
  --dropdownBorderWidth-wl: 0.125rem;
  --dropdownBorderActive-wl: var(--ap-grey-500);
  --dropdownBorderError-wl: var(--ap-red);
  --dropdownErrorColor-wl: var(--ap-red);
  --dropdownMenuBg-wl: var(--ap-white);
  --dropdownOptionHoverBg-wl: var(--ap-grey-100);
  --dropdownDividerColor-wl: var(--ap-teal-pale);
  --dropdownShadow-wl: 0 0 1.25rem var(--ap-alpha-black-20);
  --dropdownBorderRadius-wl: 1rem;
  --dropdownMinHeight-wl: 3.5rem;
  --dropdownFocusShadow-wl: none;
}

@media (min-width: 48.001rem) {
  .qp-products-overview__map .qp-products-map-overview__map-panel {
    height: calc(100vh - 6.5rem);
    position: sticky;
    top: calc(5.5rem);
  }
}

body.category-page .ap-page-section {
  box-sizing: border-box;
}

body.category-page main > .ap-page-section {
  margin-bottom: 10rem;
}

body.category-page .ap-page-section--wide {
  margin-inline: auto;
  max-width: 90rem;
  width: 100%;
  padding-inline: 1.5rem;
}

body.category-page .ap-page-section--poi-gallery {
  background-color: var(--ap-teal-soft);
  max-width: 100%;
}

body.category-page .ap-page-section--poi-gallery qp-poi-cards-gallery {
  display: block;
  margin-inline: auto;
  max-width: 90rem;
  width: 100%;
}

body.category-page .ap-page-section--narrow {
  max-width: 41.875rem;
  margin-inline: auto;
  width: 100%;
  padding-inline: 1.5rem;
}

body.category-page qp-good-to-know .qp-good-to-know {
  padding: 0;
}

body.category-page .ap-page-section--py {
  padding-top: 0;
  padding-bottom: 0;
}

body.category-page {
  qp-poi-card,
  qp-poi-cards-gallery {
    --font-family: var(--ap-font-family);
    --font-family-bold: var(--ap-font-family-bold);
    --font-family-semibold: var(--ap-font-family-semibold);
  }
}

@media (max-width: 48rem) {
  body.category-page {
    overflow-x: clip;
  }

  body.category-page .qp-products-overview__map {
    transition: transform 0.25s ease;
  }

  body.category-page:has(qp-navigation-bar[data-hidden]) .qp-products-overview__map {
    transform: translateY(calc(-1 * var(--qp-nav-height)));
  }

  body.category-page .ap-page-section--products,
  body.category-page qp-products-overview {
    max-width: 100%;
    overflow-x: clip;
  }

  body.category-page main > .ap-page-section {
    margin-bottom: 6.25rem;
  }

  body.category-page qp-products-overview {
    height: auto;
    min-height: var(--category-products-overview-height);
  }

  body.category-page .ap-page-section--wide {
    padding-inline: 1rem;
  }

  body.category-page .ap-page-section--products {
    padding-inline: 0;
    max-width: none;
  }

  body.category-page .ap-page-section--narrow {
    margin-inline: auto;
    padding-inline: 1rem;
  }
}