/* Apparatuur: info/aparatuur, aparatuur-category/*, aparatuur-merken/* in de nieuwe stijl (22 oktober 2026).
   Alles hangt onder .apxa. Studio leest en schrijft de lijsten (.cms-grid, .teams-collection, .content_collection-list)
   rechtstreeks in de html: daarom is daar NIETS aan de opbouw veranderd en gebeurt alles hier met css.
   Kleuren en maten zoals dagpas/faq/vestiging: zwart, kaart #131416, lijn #232323/#475467, blauw #4E71FF. */

.apxa { --kaart: #131416; --lijn: #232323; --lijn2: #475467; --grijs: #98A2B3; --licht: #B7BECC; --blauw: #4E71FF;
  --tegel: #ECEEF2;
  background: #000; color: #fff; font: 400 16px/1.55 Poppins, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; }
.apxa *, .apxa *::before, .apxa *::after { box-sizing: border-box; }
.apxa a { color: inherit; }
.apxa a:focus-visible, .apxa input:focus-visible, .apxa .w-dropdown-toggle:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; }
.apxa .uui-page-padding { padding-left: 16px; padding-right: 16px; }
.apxa .uui-padding-vertical-xhuge-99, .apxa.apxa-overzicht .uui-padding-vertical-xhuge { padding-top: 24px; padding-bottom: 48px; }
.apxa .uui-text-align-center { text-align: left; }
.apxa .uui-max-width-large.align-center { max-width: none; margin: 0; }

/* ---------- Kop: blauw label, grote kop, één korte zin ---------- */
.apxa-label { margin: 0 0 6px !important; font: 600 13px/1.4 Poppins, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw) !important; }
.apxa .apxa-kop h1, .apxa.apxa-held h1 { margin: 0; font-family: Montserrat, Poppins, sans-serif; font-weight: 700; font-size: 34px; line-height: 1.08;
  letter-spacing: -.01em; color: #fff; text-transform: uppercase; text-align: left; }
.apxa-intro { margin: 8px 0 0 !important; max-width: 40ch; font: 400 15px/1.55 Poppins, sans-serif; color: var(--licht); }

/* Snelkeuze: andere spiergroepen of merken. Telefoon: één rij om door te vegen; computer: alles zichtbaar. */
.apxa-chips { display: flex; gap: 8px; margin: 18px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.apxa-chips::-webkit-scrollbar { display: none; }
.apxa .apxa-chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--lijn2); border-radius: 999px;
  font: 500 14px/1.2 Poppins, sans-serif; color: var(--licht); text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.apxa .apxa-chip:hover { border-color: #fff; color: #fff; }
.apxa .apxa-chip[aria-current="page"] { background: #fff; border-color: #fff; color: #000; font-weight: 600; }
.apxa .apxa-chip-alles { color: #fff; }
.apxa .uui-space-xxlarge { margin-top: 20px; padding: 0; min-height: 0; }
/* merkpagina's: daar staat de lijst direct na de kop (zonder ruimteblok), dus zelfde ruimte als op de spiergroeppagina's */
.apxa .uui-padding-vertical-xhuge-99 > .uui-text-align-center + .w-dyn-list { margin-top: 20px; }

/* ---------- Kaarten op de categorie- en merkpagina's (zelfde opbouw, Studio-lijst) ---------- */
.apxa .collection-list-wrapper { width: 100%; }
.apxa .cms-grid, .apxa .teams-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.apxa .cms-card, .apxa .teams-collection > .w-dyn-item { height: 100%; min-width: 0; }
.apxa .card-block.aparatuur { height: 100%; margin: 0; display: flex; flex-direction: column; background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: 12px; overflow: hidden; box-shadow: none; transition: border-color .15s; }
.apxa .card-block.aparatuur:hover { border-color: var(--lijn2); box-shadow: none; }
.apxa .lightbox-link-3 { display: block; width: 100%; margin: 0; aspect-ratio: 1 / 1; align-self: stretch; padding: 10px; background: var(--tegel); cursor: default; }
/* op deze pagina's heeft Webflow geen vergroting bij de foto (lege lijst), dus geen vergrootglas tonen */
.apxa ._1-1-image { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.apxa .team-text-wrapper { flex: 1; height: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 12px 12px 4px; }
.apxa .team-text-wrapper h3 { margin: 0; font: 600 15px/1.3 Poppins, sans-serif; color: #fff; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; text-align: left; }
.apxa .team-text-wrapper .uui-space-xxsmall { display: none; }
.apxa .bottom-row-aparatuur { margin-top: auto; width: 100%; display: flex; justify-content: flex-start; align-items: center; }
/* merklogo als link: aanraakvlak 44 px hoog */
.apxa .link-block-2 { flex: none; display: inline-flex; align-items: center; justify-content: flex-start; align-self: flex-start; width: auto; max-width: 100%;
  height: auto; min-height: 44px; min-width: 44px; padding: 0; }
.apxa .link-block-2 img { display: block; width: auto; max-width: 110px; height: 22px; object-fit: contain; object-position: left center; }
/* doel-labels op de merkpagina's: link 44 px hoog, zichtbaar label kleiner */
.apxa .collection-list-wrapper-3 { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; }
.apxa .collection-list-5 { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 6px; }
.apxa a.link-block-3 { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border-radius: 0; font-size: 13px; text-decoration: none; color: #fff; }
.apxa a.link-block-3 > div { padding: 5px 10px; border: 1px solid var(--lijn2); border-radius: 999px; line-height: 1.2; transition: border-color .15s; }
.apxa a.link-block-3:hover > div { border-color: #fff; }

@media (min-width: 768px) {
  /* zelfde rand als kopbalk en footer: 32 px, inhoud maximaal 1280 px breed */
  .apxa .uui-page-padding { padding-left: 32px; padding-right: 32px; }
  .apxa .uui-padding-vertical-xhuge-99 > .uui-text-align-center, .apxa .uui-padding-vertical-xhuge-99 > .w-dyn-list { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .apxa .uui-padding-vertical-xhuge-99 > .uui-text-align-center + .w-dyn-list { margin-top: 32px; }
  .apxa .uui-padding-vertical-xhuge-99, .apxa.apxa-overzicht .uui-padding-vertical-xhuge { padding-top: 56px; padding-bottom: 80px; }
  .apxa .apxa-kop h1, .apxa.apxa-held h1 { font-size: 52px; }
  .apxa-intro { font-size: 17px; }
  .apxa-chips { flex-wrap: wrap; margin: 24px 0 0; padding: 0; overflow: visible; }
  .apxa .uui-space-xxlarge { margin-top: 32px; }
  .apxa .cms-grid, .apxa .teams-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .apxa .team-text-wrapper { padding: 16px 16px 6px; }
  .apxa .team-text-wrapper h3 { font-size: 17px; }
}
@media (min-width: 1100px) {
  .apxa .cms-grid, .apxa .teams-collection { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Overzicht info/aparatuur: kop met foto ---------- */
.apxa.apxa-held .background-video { background: #000; height: auto; min-height: 0; padding: 0; }
.apxa.apxa-held .header-image { min-height: 0; height: auto; padding: 0; display: flex; align-items: flex-end; aspect-ratio: 390 / 230;
  background-position: center 45%; background-size: cover; }
.apxa.apxa-held .padded-content-container-purchase-group { display: block; width: 100%; max-width: 1344px; margin: 0 auto; padding: 0 16px 16px; text-align: left; }
.apxa.apxa-held .apxa-label { color: #fff !important; }
.apxa.apxa-overzicht .uui-padding-vertical-xhuge { padding-top: 16px; }
.apxa.apxa-overzicht .uui-max-width-large > p { margin: 0; max-width: 60ch; font: 400 15px/1.6 Poppins, sans-serif; color: var(--licht); text-align: left; }
.apxa.apxa-overzicht .uui-max-width-large > p br { display: none; }
.apxa.apxa-overzicht .uui-space-xxlarge { margin-top: 20px; }

/* filter */
.apxa .main-wrapper, .apxa .filter_form-wrapper, .apxa .filter_form { margin: 0; }
.apxa .filter_wrapper .padding-vertical, .apxa .filter_wrapper .page-padding, .apxa .filter_wrapper .container-3 { padding: 0; margin: 0; max-width: none; }
.apxa .filter_grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.apxa .filter_column { border: 0; background: none; border-radius: 0; padding: 0; }
.apxa .filter_block { padding: 0; margin: 0 0 14px; border: 0; }
.apxa .filter_block:empty, .apxa .divider-line-filter { display: none; }
.apxa .filter_search-field { width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--lijn2); border-radius: 10px; background: var(--kaart);
  color: #fff; font: 400 16px/1.2 Poppins, sans-serif; }
.apxa .filter_search-field::placeholder { color: var(--grijs); opacity: 1; }
.apxa .filter_search-field:focus { border-color: var(--blauw); outline: none; box-shadow: 0 0 0 1px var(--blauw); }
.apxa .filter_block-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; padding: 0; }
.apxa .filter_options { padding: 0; }
.apxa .filter_results-text { font-size: 14px; line-height: 1.4; color: var(--licht); }
.apxa .filter_results-text br { display: none; }
.apxa .filter_results-text [fs-cmsfilter-element="items-count"]::before { content: " "; }
.apxa .filter_results-text .text-color-green { color: #fff; font-weight: 600; }
.apxa .filter_block-header .heading-small { margin: 0; font: 600 13px/1.4 Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); }
.apxa .filter_reset-all, .apxa .filter_reset { flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font: 500 14px/1.2 Poppins, sans-serif;
  color: #fff; text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 4px; }
.apxa .filter_options .w-dyn-items { display: flex; flex-wrap: wrap; gap: 8px; }
.apxa .checkbox_field { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--lijn2); border-radius: 999px; font: 500 14px/1.2 Poppins, sans-serif; color: var(--licht); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.apxa .checkbox_field:hover { border-color: #fff; color: #fff; }
.apxa .checkbox_input { display: none; }
.apxa .checkbox_label { margin: 0; color: inherit; }
.apxa .checkbox_field:has(input:checked), .apxa .checkbox_field.fs-cmsfilter_active { background: #fff; border-color: #fff; color: #000; font-weight: 600; }
.apxa .checkbox_field:has(input:focus-visible) { outline: 2px solid var(--blauw); outline-offset: 2px; }
.apxa .option-results { display: none; }

.apxa .filter_header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 0; gap: 8px 12px; margin: 0 0 12px; padding: 0; border: 0; }
.apxa .filter_tags-wrapper { flex: 1 1 auto; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--grijs); }
.apxa .filter_tags-wrapper:not(:has(.filter_tag:not([fs-cmsfilter-element="tag-template"]))) .filter_tags-text { display: none; }
.apxa .filter_tag { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--kaart); border: 1px solid var(--lijn2); color: #fff; }
.apxa .filter_tag-remove { width: 14px; height: 14px; cursor: pointer; filter: invert(1); }
.apxa .dropdown { flex: none; margin: 0; order: -1; }
.apxa .filter_sort-by { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--lijn2); border-radius: 10px;
  background: #000; color: #fff; font: 500 14px/1.2 Poppins, sans-serif; }
.apxa .filter_sort-by .dropdown_icon { position: static; margin: 0; order: 2; }
.apxa .dropdown_list.w--open { background: var(--kaart); border: 1px solid var(--lijn2); border-radius: 10px; padding: 4px; min-width: 100%; }
.apxa .sort_field { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #fff; text-decoration: none; font-size: 14px; white-space: nowrap; }
.apxa .sort_field:hover, .apxa .sort_field.fs-cmssort_active { background: #262B38; }

/* resultaten: op de telefoon een rij per apparaat (foto links), op de computer kaarten */
.apxa .content_filter { margin: 0; }
.apxa .content_collection-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.apxa .content_collection-list > .w-dyn-item { min-width: 0; }
.apxa .card-block.vertical { height: 100%; margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0; align-items: stretch;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 12px; overflow: hidden; box-shadow: none; }
.apxa .card-block.vertical:hover { border-color: var(--lijn2); box-shadow: none; }
.apxa .lightbox-link-4 { display: block; min-width: 0; max-width: none; width: 100%; height: 100%; min-height: 112px; padding: 8px; background: var(--tegel); cursor: zoom-in; }
.apxa .image-12 { display: block; width: 100%; height: 100%; max-height: 180px; object-fit: contain; -webkit-backdrop-filter: none; backdrop-filter: none; }
.apxa .content_card-block { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 12px 12px 6px 14px; text-align: left; }
.apxa .content_card-header { display: flex; align-items: center; justify-content: flex-start; min-height: 0; }
.apxa .machine-logo { width: auto; max-width: 100px; height: 18px; object-fit: contain; object-position: left center; }
.apxa .content_card-block h3 { margin: 0; font: 600 16px/1.3 Poppins, sans-serif; color: #fff; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; text-align: left; }
.apxa .content_card-info { display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.apxa .content_card-info-block { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 10px; min-height: 28px; }
.apxa .content_card-info-label { flex: none; width: 52px; font: 500 12px/1.4 Poppins, sans-serif; color: var(--grijs); }
.apxa div.link-block-3 { padding: 0; background: none; font-size: 14px; color: var(--licht); }
.apxa .content_card-info .collection-list-wrapper-3 { flex: 1; min-width: 0; width: auto; }
.apxa .link-block-3.next { display: inline-flex; gap: 1px; min-height: 28px; align-items: center; }
.apxa .text-block-14 { color: var(--licht); }
.apxa .filter_empty { display: none; padding: 24px 16px; border: 1px dashed var(--lijn2); border-radius: 12px; color: var(--licht); text-align: center; }
.apxa .filter_empty-icon { display: none; }
.apxa .fs-cmsfilter_highlight { background: rgba(78, 113, 255, .35); color: #fff; }

@media (min-width: 768px) {
  .apxa.apxa-held .header-image { aspect-ratio: auto; height: 380px; }
  .apxa.apxa-held .padded-content-container-purchase-group { max-width: 1344px; padding: 0 32px 32px; }
  .apxa.apxa-overzicht .uui-padding-vertical-xhuge > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .apxa.apxa-overzicht .uui-padding-vertical-xhuge { padding-top: 28px; }
  .apxa.apxa-overzicht .uui-max-width-large > p { font-size: 17px; }
  .apxa .content_collection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .apxa .card-block.vertical { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .apxa .lightbox-link-4 { aspect-ratio: 4 / 3; height: auto; padding: 14px; }
  .apxa .image-12 { max-height: none; }
  .apxa .content_card-block { padding: 14px 16px 8px; }
}
@media (min-width: 1024px) {
  .apxa .filter_grid { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
  .apxa .filter_column { position: sticky; top: 96px; }
  .apxa .filter_options .w-dyn-items { flex-direction: column; align-items: stretch; gap: 6px; }
  .apxa .checkbox_field { border-radius: 10px; }
}
@media (min-width: 1200px) {
  .apxa .content_collection-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Meer info (onderaan het overzicht) ---------- */
.apxa.apxa-meer { padding: 8px 0 56px; }
.apxa.apxa-meer .divider { display: block; height: auto; min-height: 0; max-width: 1376px; margin: 0 auto; padding: 0 16px; }
.apxa.apxa-meer .divider-line { display: none; }
.apxa.apxa-meer .divider-heading { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--lijn2); font: 700 24px/1.15 Montserrat, Poppins, sans-serif; letter-spacing: -.01em; color: #fff; text-transform: uppercase; text-align: left; }
.apxa.apxa-meer .uui-container-large { max-width: 1280px; margin: 0 auto; }
.apxa.apxa-meer .grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0 0; }
.apxa.apxa-meer .uui-container-large { padding: 0; }
.apxa.apxa-meer .dynamic-card { display: contents; }
.apxa.apxa-meer .collection-list-wrapper-4 { display: none; }
.apxa.apxa-meer .feature-wrapper { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; min-height: 96px; margin: 0; padding: 0;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 12px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: none; transition: border-color .15s; }
.apxa.apxa-meer .feature-wrapper:hover { border-color: var(--lijn2); }
.apxa.apxa-meer .div-block-26 { position: relative; min-height: 96px; height: 100%; margin: 0; background: #1d1f23 url("/assets/cdn.prod.website-files.com/6693cb4c8d4028378ebb9c29/6753038ba31667b83d0077c6_Apex-Team_0002_Apex-Foto%27s-2-p-500.png") center 20% / cover no-repeat; overflow: hidden; }
.apxa.apxa-meer .div-block-26:has(img) { background: #1d1f23; }
.apxa.apxa-meer .div-block-26 img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.apxa.apxa-meer .image-9.mobile { object-fit: contain; padding: 6px; }
.apxa.apxa-meer .div-block-29 { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; background: none; text-align: left; }
.apxa.apxa-meer .div-block-29 h3 { margin: 0; font: 600 16px/1.3 Poppins, sans-serif; color: #fff; text-transform: none; }
.apxa.apxa-meer .div-block-29 p { margin: 0; font: 400 14px/1.45 Poppins, sans-serif; color: var(--licht); }
.apxa.apxa-meer .text-block-13 { margin-top: 4px; font: 600 14px/1.3 Poppins, sans-serif; color: #fff; text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 4px; }
@media (min-width: 768px) {
  .apxa.apxa-meer .divider { max-width: 1344px; padding: 0 32px; }
  .apxa.apxa-meer .divider-heading { font-size: 32px; }
  .apxa.apxa-meer .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 20px; }
  .apxa.apxa-meer .feature-wrapper { grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px 1fr; }
  .apxa.apxa-meer .div-block-29 { justify-content: flex-start; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .apxa *, .apxa *::before, .apxa *::after { transition: none !important; scroll-behavior: auto !important; }
}