/*
Theme Name: Leflite child
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child thema van het thema Leflite
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

@media (min-width: 1360px) {
    .container {
        max-width: 1530px!important;
    }
}

.lef-animations [data-animation]{
	filter: blur(10px)!important;
	-webkit-transition: filter 0.4s ease-in-out!important;
	-moz-transition: filter 0.4s ease-in-out!important;
	-o-transition: filter 0.4s ease-in-out!important;
	transition: filter 0.4s ease-in-out!important;
}
.lef-animations [data-animation].animate__animated {
	filter: blur(0px)!important;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

body {
    overflow: unset;
}

.product-range[data-component]:not([data-component=menu-bar]):not([data-folder]), footer[data-component]:not([data-component=menu-bar]):not([data-folder]) {
    visibility: visible!important;
}

.border-bottom {
    border-bottom: 1px solid var(--primary);
    padding: 40px;
}

.margin-around {
    margin: 0 20px;
}

#primary-menu * {
    color: var(--primary);
}

.padding-right {
    padding-right: 50px;
}


.padding-left {
    padding-left: 50px;
}

.logo-outer {
    margin-right: 30px!important;
}

.clip-path-right {
    /* Diagonal top edge: right side 70px higher than the left top */
    clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
    padding-top: 180px;
}

/* Utility: give cards a sloped top edge (same diagonal language as the hero/
   sidebar — right side higher). Add the class to a wrapper around the cards.
   Extra top padding compensates for the 24px slope so content isn't clipped. */
.sloped-top .card {
    clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%);
    padding-top: 64px;
}

.content-white * {
    color: white;
}

@media only screen and (max-width: 992px) {
   .content-white *:not(a.btn) {
        color: var(--black);
    }
}

/* FOOTER */
.footer-inner {
    padding: 110px 0!important;
}
footer {
    margin-top: 50px;
}
footer img {
    width: auto;
}

body {
    background-color: var(--gray);
}
body.single-post {
    background-color: var(--white);
}

/* Header */
.topbar, header {
    margin: 0 20px;     
    width: calc(100% - 40px)!important;
    z-index: 10;
    position: relative;
}
.home-hero {
    margin-top: -50px;
    z-index: 0;
    /* Diagonal bottom edge: right side 70px higher than the left bottom */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
}
/* Same diagonal bottom edge as the home hero. */
.page-header {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
    padding-bottom: 100px;
    margin-top: -50px;
}
/* Primary color overlay at 30% opacity, above the video background, below the content */
.home .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--primary) 30%, transparent);
    z-index: 2;
    pointer-events: none;
}
.home-hero .container {
  position: static;
}

/* 3. The video background — fills the entire section */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* above .background-image-wrapper (z-index:1), adjust if needed */
  overflow: hidden;
}

.video-background iframe, .video-background .code-wrapper {
    width: 100%;
    height: 100%;
}
.video-background video {
    transform: scale(1.2);
}

/* 4. Content columns must sit above the video background */
.home-hero .container .row > .wp-block-custom-section-block-col:not(.video-background) {
  position: relative;
  z-index: 3;
}
section.full-background-overlay .background-image-wrapper img {
    opacity: .7;
}

.top-layer * {
    font-weight: 900!important;
    color: var(--black)!important;
}

.counter-ondertitle {
    color: var(--primary);
}

.counter-outer .col-lg-3:not(:last-of-type) {
    border-right: 1px solid var(--primary);
}
.counter-prefix {
    margin-right: 8px;
}

/* Metric / Imperial switch ([measurement_toggle]) — segmented control. */
.measurements-system-toggle {
    display: inline-flex;
    flex-direction: row;
    background: var(--white);
    border: 1px solid var(--gray);
    overflow: hidden;
    width: fit-content;
}

.measurement-system {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    color: var(--primary);
    font-size: 16px;
    line-height: 1;
    transition: background 0.15s ease;
    user-select: none;
}

.measurement-system + .measurement-system {
    border-left: 1px solid var(--gray);
}

.measurement-system.active {
    background: var(--gray);
    color: var(--primary);
}

.measurement-system:not(.active) {
    cursor: pointer;
}

.measurement-system:not(.active):hover {
    background: var(--gray);
}

/* Fixed, rotated side-of-screen variant: [measurement_toggle floating="true"] */
.measurements-system-toggle.floating {
    position: fixed;
    top: 50%;
    right: -1px;
    z-index: 1000000;
    border-radius: 0 0 10px 10px;
    transform-origin: top right;
    transform: translateY(-50%) rotate(90deg);
}

/* =========================================================================
   Product range block (temperature slider + category tabs + AJAX)
   Refined industrial/editorial styling — muted grey meta, red accent only.
   ========================================================================= */
.product-range {
    color: var(--black);
}

.product-range *,
.product-range *::before,
.product-range *::after {
    box-sizing: border-box;
}

.product-range a {
    text-decoration: none !important;
}

.product-range.is-loading .product-range-results {
    opacity: .45;
    pointer-events: none;
}

.product-range-results {
    transition: opacity .2s ease;
}

/* ---- Tabs ---- */
.product-range-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--gray);
    margin-bottom: 30px;
}

.product-range-tab {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 20px 18px;
    margin-bottom: -1px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    border: 1px solid var(--gray);
    transition: color .18s ease, border-color .18s ease;
    margin: 0!important;
    margin-left: -1px!important;
}

.product-range-tab:hover {
    color: var(--primary);
    background-color: var(--gray)!important;
}

.product-range-tab.active {
    color: var(--primary);
    font-weight: 800;
    background-color: var(--gray)!important;
}

/* ---- Slider ---- */
.product-range-slider-holder {
    margin: 0 0 56px;
}

.product-range-slider-label {
    display: flex;
    align-items: baseline;
    /* Extra room above the track for the value tooltip that floats over the handle. */
    margin-bottom: 10px;
}

.product-range-slider-caption {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--primary);
}

.product-range-slider.noUi-target {
    height: 2px;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    background: var(--gray);
}

.product-range-slider .noUi-connect {
    background: var(--secondary);
}

.product-range-slider .noUi-handle {
    width: 24px!important;
    height: 24px!important;
    right: -12px !important;
    top: -11px !important;
    background: var(--white);
    border: 2px solid var(--secondary);
    border-radius: 50%;
    box-shadow: 0 2px 6px var(--darkgray);
    cursor: grab;
}

.product-range-slider .noUi-handle:active {
    cursor: grabbing;
}

.product-range-slider .noUi-handle::before,
.product-range-slider .noUi-handle::after {
    display: none;
}

/* Value tooltip floating above the handle */
.product-range-slider .noUi-tooltip {
    border: 0;
    background: var(--secondary);
    color: var(--white);
    font-family: var(--heading-font, inherit);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 4px;
    bottom: 165%;
}

/* Increment labels underneath the slider */
.product-range-slider .noUi-pips-horizontal {
    height: auto;
    padding: 0;
    top: 100%;
    font-family: var(--btn-font, inherit);
}

.product-range-slider .noUi-marker-horizontal.noUi-marker {
    width: 1px;
    height: 6px;
    margin-left: 0;
    background: var(--gray);
}

.product-range-slider .noUi-marker-horizontal.noUi-marker-large {
    display: none;
}

.product-range-slider .noUi-value-horizontal {
    margin-top: 6px;
    padding-top: 2px;
    font-size: 14px;
    font-weight: 300;
    color: var(--primary);
    transform: translate(-50%, 0);
}

/* Keep the first/last increment labels inside the track bounds (classes set in JS). */
.product-range-slider .noUi-value.is-min {
    transform: translate(0, 0);
}

.product-range-slider .noUi-value.is-max {
    transform: translate(-100%, 0);
}

/* ---- Results layout (native Bootstrap .row > .col-lg-5 / .col-lg-7) ----
   Columns stretch (Bootstrap default), so the featured fills the height of
   the product list on the right. */

/* Vertical spacing when the columns stack below the lg breakpoint. */
@media (max-width: 991.98px) {
    .product-range-featured {
        margin-bottom: 32px;
    }
}

/* ---- Shared meta line ---- */
.product-range-meta {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--darkgray);
    margin: 0 0 10px;
}

/* ---- Shared actions / buttons ---- */
/* "Product details" uses the theme button (.btn bg-secondary btn-medium position-after). */
.product-range-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: 18px;
}

.product-range-datasheet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--btn-font, inherit);
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    transition: color .18s ease;
}

.product-range-datasheet .product-range-dl-icon {
    transition: transform .18s ease;
}

.product-range-datasheet:hover {
    color: var(--secondary);
}

.product-range-datasheet:hover .product-range-dl-icon {
    transform: translateY(2px);
}

/* ---- Featured (left) ---- */
/* The Bootstrap column stretches to the row height; the inner fills it so the
   featured panel is always as tall as the product list on the right. */
.product-range-featured {
    display: flex;
}

.product-range-featured-inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 460px;
    padding: 34px;
    background: var(--black) center/cover no-repeat;
    overflow: hidden;
}

.product-range-featured-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--transparent) 35%, var(--black) 100%);
}

.product-range-featured-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.product-range-featured-content .product-range-meta {
    color: var(--white);
    opacity: .75;
}

.product-range-featured-title {
    margin: 0 0 16px;
    color: var(--white);
    line-height: 1.1;
}

.product-range-featured-title a {
    color: inherit;
    text-transform: uppercase;
}

.product-range-featured-excerpt {
    margin: 0 0 18px;
    max-width: 42ch;
    color: var(--white);
    opacity: .85;
}

.product-range-featured .product-range-actions {
    margin-top: 0;
}

.product-range-featured .product-range-datasheet {
    color: var(--white);
}

.product-range-featured .product-range-datasheet:hover {
    color: var(--white);
    opacity: .7;
}

/* ---- List (right) ---- */
.product-range-list {
    display: flex;
    flex-direction: column;
}

.product-range-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 50px 40px;
    border-top: 1px solid var(--gray);
}
.product-range-row:hover {
    background-color: var(--gray);
}

.product-range-list > .product-range-row:first-child {
    border-top: 0;
}

.product-range-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.product-range-row-title {
    margin: 0 0 14px;
    line-height: 1.2;
}

.product-range-row-title a {
    color: var(--black);
    transition: color .18s ease;
}

.product-range-row:hover .product-range-row-title a {
    color: var(--secondary);
}

.product-range-row-excerpt {
    /* margin: 0 0 16px;
    max-width: 52ch;
    color: var(--darkgray);
    font-size: 14px;
    line-height: 1.6; */
}

.product-range-row .product-range-actions {
    margin-top: 0;
}

.product-range-row-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--secondary);
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.product-range-row:hover .product-range-row-arrow {
    opacity: 1;
    transform: translateX(0);
    background: var(--gray);
}

@media (max-width: 600px) {
    .product-range-row-arrow {
        display: none;
    }
}

/* ---- Footer / states ---- */
.product-range-footer {
    margin-top: 28px;
}

.product-range-empty,
.product-range-list-empty {
    padding: 16px 0;
    color: var(--darkgray);
}

/* =========================================================================
   Knowledge base archive filter ([archive_widget_area post_type="knowledge_base"])
   Restyle the checkbox filter widgets into two horizontal pill-button rows:
   Type on top, Category below. Selectors are matched to the parent theme's
   `.archive-filter .filter-item` depth so they win on specificity, and scoped
   to --knowledge_base so product/other filters are untouched.
   ========================================================================= */

/* Stack the two filter widgets: Type row on top, Category row below. */
.archive-widget-area--knowledge_base .archive-filter {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.archive-widget-area--knowledge_base .widget {
    margin: 0;
}
.archive-widget-area--knowledge_base .widget:has(input[data-lef-filter="knowledge_base_type"]) {
    order: 0;
}
.archive-widget-area--knowledge_base .widget:has(input[data-lef-filter="knowledge_base_category"]) {
    order: 1;
}

.archive-widget-area--knowledge_base .archive-filter.filter-holder {
    gap: 10px;
}

/* Drop the grey box and the title/chevron — the screenshot shows bare pills. */
.archive-widget-area--knowledge_base .archive-filter .filter-item {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-title {
    display: none;
}
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-elements {
    display: block;
    margin: 0;
}
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-elements ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each taxonomy option becomes a pill button (borders collapse via -1px). */
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-elements li label,
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-elements > ul li label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 15px 24px;
    border: 1px solid var(--gray);
    background-color: var(--white);
    color: var(--primary);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-elements li:first-child label {
    margin-left: 0;
}
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-elements li label:hover {
    background-color: var(--gray);
}

/* "All" pill (injected by kb-filter-all.js) — active when nothing is selected. */
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-elements li.kb-all-pill.is-active label {
    font-weight: 800;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    position: relative;
    background-color: var(--primary);
    color: var(--white);
    z-index: 1;
}

/* Hide the native checkbox; the label is the button. */
.archive-widget-area--knowledge_base .archive-filter .filter-item input.checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Selected = primary outline, matching the screenshot's highlighted buttons. */
.archive-widget-area--knowledge_base .archive-filter .filter-item .filter-element:has(input:checked) label {
    font-weight: 800;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    background-color: var(--primary);
    color: var(--white);
    position: relative;
    z-index: 1;
}

.page-load-more {
    text-align: center;
}

/* =========================================================================
   Knowledge base card (components/card-knowledge_base/)
   Image with type badge, title, excerpt, type-aware primary CTA button.
   ========================================================================= */
.card-knowledge_base {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    overflow: hidden;
}

.card-knowledge_base .kb-card-media {
    display: block;
    position: relative;
    height: 155px;
    overflow: hidden;
    background: var(--gray);
}
.card-knowledge_base .kb-card-media .kb-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-knowledge_base .kb-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gray);
}

.card-knowledge_base .content-outer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    flex: 1 1 auto;
}

/* Outlined type badge above the title. */
.card-knowledge_base .kb-card-type {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.card-knowledge_base .kb-card-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}
.card-knowledge_base .kb-card-title a {
    color: var(--black);
    text-decoration: none !important;
}
.card-knowledge_base .kb-card-title a:hover {
    color: var(--primary);
    text-decoration: none !important;
}

.card-knowledge_base .kb-card-excerpt {
    margin: 0;
    color: var(--darkgray);
    font-size: 15px;
    line-height: 1.5;
}

/* Push the CTA to the bottom so cards in a row line up. */
.card-knowledge_base .kb-card-buttons {
    margin-top: auto;
}
.card-knowledge_base .kb-card-btn .icon {
    /* small gap before the arrow; position-after already orders it last */
    margin-left: 8px;
}

/* "X products found" count above the product grid. */
.products .products-count {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
}

/* =========================================================================
   Product range / selector — product cards (card-product override)
   Image + temperature badge, eyebrow, title, taxonomy meta, View + Datasheet.
   ========================================================================= */
.card-product--range {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--card-border-color);
    overflow: hidden;
}

.card-product--range .card-product-media {
    position: relative;
    height: 254px;
    background: transparent;
}
/* Clip the image (not the container) so the temperature badge stays intact.
   Mirror of the home-hero diagonal: bottom edge slopes up toward the left. */
.card-product--range .card-product-img,
.card-product--range .card-product-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: var(--gray);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px));
}

/* Temperature badge: white box, bottom-right of the image. */
.card-product--range .card-product-temp {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
    background: var(--white);
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--card-border-color);
}

.card-product--range .content-outer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px;
    flex: 1 1 auto;
}

.card-product--range .card-product-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--darkgray-darkened, var(--darkgray));
}

.card-product--range .card-product-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}
.card-product--range .card-product-title a {
    color: var(--black);
    text-decoration: none !important;
}
.card-product--range .card-product-title a:hover {
    color: var(--primary);
}

.card-product--range .card-product-meta {
    margin: 0;
    font-size: 13px;
    color: var(--darkgray-darkened, #9aa0a6);
    font-weight: 500;
}

.card-product--range .card-product-excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--card-content, var(--black));
}

/* Actions pinned to the bottom so cards in a row line up. */
.card-product--range .card-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}
.card-product--range .card-product-view .icon {
    margin-left: 8px;
}

/* Datasheet = outlined secondary button. */
.card-product--range .card-product-datasheet {
    background: transparent !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary);
}
.card-product--range .card-product-datasheet:hover {
    background: var(--gray) !important;
}
.card-product--range .card-product-datasheet .icon {
    margin-right: 8px;
}

/* =========================================================================
   Product archive filter sidebar — cleaner white-panel look
   (visual only; scoped to the product archive section).
   ========================================================================= */
.products .archive-filter {
    background: var(--white);
    border: 1px solid var(--card-border-color);
    padding: 50px 40px;
}
.products .archive-filter .filter-item {
    padding: 0px;
    background: var(--white);
}
.products .archive-filter .filter-item .filter-title h4 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--black);
}
.products .archive-filter .filter-item .filter-elements li label {
    display: flex;
    align-items: center;
    color: var(--card-content, var(--black));
    cursor: pointer;
}
/* Custom checkbox: rounded square with a light-grey border, solid primary
   (Vulcor blue) fill when checked. appearance:none drops the native tick so
   the checked state reads as a solid blue square, matching the design. */
.products .archive-filter .filter-item {
    border-bottom: 1px solid var(--gray);
}
.products .archive-filter .filter-item input.checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
    border: 1px solid var(--primary);
    border-radius: 4px;
    background: var(--gray);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.products .archive-filter .filter-item input.checkbox:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.products .archive-filter .filter-item input.checkbox:hover {
    border-color: var(--primary);
}
.products .archive-filter .filter-item input.checkbox:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* =========================================================================
   Temperature filter widget (components/widget-filter-temperature/)
   Single-handle "rated up to" slider in the product archive sidebar.
   Mirrors the product-range slider look (thin track, red connect/handle).
   ========================================================================= */

.products .col-lg-4 > .sidebar-outer {
    position: sticky;
    margin-right: 50px;
    top: 160px;
}
@media only screen and (max-width: 992px) {
   .products .col-lg-4 > .sidebar-outer {
        position: relative;
        margin-right: unset;
        top: unset;
   }
}
.temperature-filter .filter-elements {
    list-style: none;
    margin: 0;
    padding: 6px 4px 4px;
}
.temperature-filter .temp-slider-holder {
    padding: 16px 12px 4px;
}
.temperature-filter .temp-slider.noUi-target {
    height: 2px;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    background: var(--gray);
}
.temperature-filter .temp-slider .noUi-connect {
    background: var(--secondary);
}
.temperature-filter .temp-slider .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    right: -10px !important;
    top: -10px !important;
    background: var(--white);
    border: 2px solid var(--secondary);
    border-radius: 50%;
    box-shadow: 0 1px 4px var(--darkgray);
    cursor: grab;
}
.temperature-filter .temp-slider .noUi-handle:active {
    cursor: grabbing;
}
.temperature-filter .temp-slider .noUi-handle::before,
.temperature-filter .temp-slider .noUi-handle::after {
    display: none;
}
.temperature-filter .temp-slider-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.temperature-filter .temp-min-label,
.temperature-filter .temp-max-label {
    padding: 8px 12px;
    background: var(--gray);
    font-size: 13px;
    font-weight: 600;
    color: var(--darkgray);
    white-space: nowrap;
}
.temperature-filter .temp-max-label {
    color: var(--black);
}

/* =========================================================================
   Filter reset button — Vulcor red + the theme's reset icon.
   The reset markup lives in the shared parent widget-filter.php (reset branch)
   with no hook, so the icon is added via ::before using the icomoon glyph
   (icon-arrow-rotate-left = \eeb5) rather than editing that component.
   ========================================================================= */
.reset-filter-holder .reset-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none !important;
    transition: opacity .15s ease;
}
.reset-filter-holder .reset-filter-label::before {
    content: "\eeb5"; /* icon-arrow-rotate-left (icomoon) */
    font-family: icomoon;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    font-size: 1.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: never;
}
.reset-filter-holder .reset-filter-label:hover {
    color: var(--secondary);
    opacity: .7;
    text-decoration: none !important;
}

/* =========================================================================
   Blog archive filter ([archive_widget_area post_type="post"])
   Single category row, restyled into horizontal pill buttons. Mirrors the
   knowledge base pills but scoped to --post so other archives are untouched.
   ========================================================================= */
.archive-widget-area--post .archive-filter {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.archive-widget-area--post .widget {
    margin: 0;
}
.archive-widget-area--post .archive-filter.filter-holder {
    gap: 10px;
}

/* Drop the grey box and the title/chevron — bare pills. */
.archive-widget-area--post .archive-filter .filter-item {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.archive-widget-area--post .archive-filter .filter-item .filter-title {
    display: none;
}
.archive-widget-area--post .archive-filter .filter-item .filter-elements {
    display: block;
    margin: 0;
}
.archive-widget-area--post .archive-filter .filter-item .filter-elements ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each taxonomy option becomes a pill button. */
.archive-widget-area--post .archive-filter .filter-item .filter-elements li label,
.archive-widget-area--post .archive-filter .filter-item .filter-elements > ul li label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 15px 24px;
    border: 1px solid var(--gray);
    background-color: var(--white);
    color: var(--primary);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.archive-widget-area--post .archive-filter .filter-item .filter-elements li:first-child label {
    margin-left: 0;
}
.archive-widget-area--post .archive-filter .filter-item .filter-elements li label:hover {
    background-color: var(--gray);
}

/* "All" pill (injected by kb-filter-all.js) — active when nothing is selected. */
.archive-widget-area--post .archive-filter .filter-item .filter-elements li.kb-all-pill.is-active label {
    font-weight: 800;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    position: relative;
    background-color: var(--primary);
    color: var(--white);
    z-index: 1;
}

/* Hide the native checkbox; the label is the button. */
.archive-widget-area--post .archive-filter .filter-item input.checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Selected = primary fill. */
.archive-widget-area--post .archive-filter .filter-item .filter-element:has(input:checked) label {
    font-weight: 800;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    background-color: var(--primary);
    color: var(--white);
    position: relative;
    z-index: 1;
}

/* =========================================================================
   Blog card (components/card-post/)
   Image, category + date meta line, title, excerpt, "Read more" CTA.
   ========================================================================= */
.card-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    overflow: hidden;
}

.card-post .post-card-media {
    display: block;
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--gray);
}
.card-post .post-card-media .post-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-post .post-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gray);
}

.card-post .content-outer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    flex: 1 1 auto;
}

/* Category + date meta line above the title. */
.card-post .post-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}
/* Outlined category badge — identical to the knowledge base type badge. */
.card-post .post-card-cat {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.card-post .post-card-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--darkgray);
}

.card-post .post-card-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}
.card-post .post-card-title a {
    color: var(--black);
    text-decoration: none !important;
}
.card-post .post-card-title a:hover {
    color: var(--primary);
    text-decoration: none !important;
}

.card-post .post-card-excerpt {
    margin: 0;
    color: var(--darkgray);
    font-size: 15px;
    line-height: 1.5;
}

/* Push the CTA to the bottom so cards in a row line up. */
.card-post .post-card-buttons {
    margin-top: auto;
}
.card-post .post-card-btn .icon {
    margin-left: 8px;
}

/* ---------------------------------------------------------------------------
 * "Geen resultaten" CTA (Vulcor opties) — shown under the WooCommerce
 * no-products-found notice on an empty product archive / keuzehulp result.
 * ------------------------------------------------------------------------- */
.no-results-cta {
    margin-top: 30px;
    padding: 40px var(--general-padding, 30px);
    border-radius: var(--general-border-radius, 0px);
}
.no-results-cta .no-results-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.no-results-cta .no-results-cta-content > *:last-child {
    margin-bottom: 0;
}
.no-results-cta .no-results-cta-button {
    margin-top: 24px;
}

/* =========================================================================
   Single product page (Vulcor design)
   Hero (gallery + stats + buttons), tabs (specs/forms/application/downloads),
   related products grid. Reuses theme colors, btn classes and icon font.
   ========================================================================= */

/* Only the hero spans wide (container-fluid); everything else uses the normal container. */
.vp-hero > .container-fluid {
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .vp-hero > .container-fluid { padding-left: 20px; padding-right: 20px; }
}

/* Shared uppercase eyebrow (hero + related) */
.vulcor-single-product .vp-eyebrow,
.vp-related .vp-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--darkgray-darkened, var(--darkgray));
    margin-bottom: 10px;
}

/* ---- Hero ------------------------------------------------------------- */
.vp-hero {
    background: var(--gray);
    padding: 130px 0 0px 0px;
    max-width: 1920px;
    margin: 0 auto;
}
.vp-hero-card {
    background: var(--white);
}
.vulcor-single-product .vp-hero-gallery {
    position: relative;
    top: auto;
}
.vp-hero #breadcrumbs {
    margin-bottom: 20px;
    display: block;
}
/* WooCommerce hides the gallery (opacity:0) until its deferred JS inits.
   The design only needs a static image, so keep it visible regardless. */
.vulcor-single-product .woocommerce-product-gallery {
    opacity: 1 !important;
}
.vulcor-single-product .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Hide WooCommerce's zoom/lightbox trigger (magnifier). */
.vulcor-single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}
/* Gallery nav arrows: larger white bordered boxes, bottom-right.
   Self-contained (the theme's woo gallery CSS isn't loaded on this page). */
.vulcor-single-product .vp-hero-gallery .gallery-control-buttons {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: auto;
    left: auto;
    right: 0px;
    bottom: 0px;
    gap: 0px;
    z-index: 4;
}
.vulcor-single-product .vp-hero-gallery .gallery-control-buttons .control-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--white);
    border: none;
    border-radius: 0;
    color: var(--primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.vulcor-single-product .vp-hero-gallery .gallery-control-buttons .control-button:hover {
    background: var(--gray);
}
/* Drop the flexslider thumbnail nav + default direction arrows — design shows only the main image. */
.vulcor-single-product .woocommerce-product-gallery .flex-control-nav,
.vulcor-single-product .woocommerce-product-gallery .flex-control-thumbs,
.vulcor-single-product .woocommerce-product-gallery .flex-direction-nav {
    display: none !important;
}
/* Temperature badge — same look as the product card badge, with breathing room. */
.vp-hero-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    padding: 10px 16px;
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--card-border-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
/* Vertically center the summary against the gallery image. */
.vp-hero-card .row {
    align-items: center;
}
.vp-hero-summary {
    padding: 0 220px 0 20px;
}
@media (max-width: 991px) {
    .vp-hero-summary { padding: 24px 0 0; }
}
.vp-hero-title {
    margin: 0 0 18px;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}
.vp-hero-description {
    color: var(--black);
    opacity: .8;
    margin-bottom: 26px;
}
.vp-hero-description > *:last-child { margin-bottom: 0; }

/* Hero stats row */
.vp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 28px;
}
.vp-stat {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--darkgray);
    padding-right: 20px;
}
.vp-stat:last-child {
    border-right: none;
    padding-right: 0;
}
.vp-stat-value {
    font-family: var(--heading-font, inherit);
    font-size: 37px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
}
.vp-stat-label {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--darkgray-darkened, var(--darkgray));
}

/* Hero buttons */
.vp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.vp-btn-quote .icon { margin-left: 8px; }

/* Outlined button (datasheet / forms) — same recipe as the card datasheet btn */
.vp-btn-outline {
    background: transparent !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary);
}
.vp-btn-outline:hover { background: var(--gray) !important; }
.vp-btn-outline .icon { margin-right: 8px; }

/* ---- Tabs (white section, 0 padding, normal container) ---------------- */
.vp-tabs-section {
    padding: 0;
    border-bottom: 1px solid var(--primary);
}
.vp-tabs-section .vp-tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border-bottom: 1px solid #d7e0e8;
}
.vp-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.vp-tab:first-child { padding-left: 0; }
.vp-tab:hover { color: var(--primary); }
.vp-tab.active {
    color: var(--primary);
    font-weight: 700;
    border-bottom-color: var(--primary);
}

/* ---- Content ---------------------------------------------------------- */
.vp-content {
    background: var(--gray);
    padding: 50px 0 60px;
}
.no-space-cards .wp-block-custom-section-block-col.col-lg-4 {
    padding: 0;
    margin: 0px!important;
}
.vp-tab-panel { display: none; }
.vp-tab-panel.active { display: block; }

.vp-section-title {
    margin: 0 0 22px;
    font-size: 22px;
    text-transform: uppercase;
}
.vp-empty { color: var(--darkgray-darkened, var(--darkgray)); }

/* Specifications table — same look as the forms/downloads table. */
.vp-specs {
    border: 1px solid #dfe6ec;
    background: var(--white);
    margin-bottom: 10px;
}
.vp-specs-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}
.vp-specs-row:nth-child(even) { background: var(--gray); }
.vp-specs-label {
    flex: 1 1 auto;
    color: var(--black);
}
.vp-specs-value {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 600;
    color: var(--black);
}

/* Available forms / downloads list — bordered, striped rows + download button. */
.vp-forms {
    display: flex;
    flex-direction: column;
    border: 1px solid #dfe6ec;
    background: var(--white);
}
.vp-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
}
.vp-form-row:nth-child(even) { background: var(--gray); }
.vp-form-info {
    display: flex;
    flex-direction: column;
}
.vp-form-name {
    font-weight: 700;
    color: var(--black);
}
.vp-form-sub {
    margin-top: 3px;
    font-size: 13px;
    color: var(--darkgray-darkened, var(--darkgray));
}
.vp-form-download { flex: 0 0 auto; white-space: nowrap; }

/* ---- Related products ------------------------------------------------- */
/* Half-white background: white behind the cards, gray below. */
.vp-related {
    padding: 60px 0 70px;
    background: linear-gradient(to bottom, var(--white) 0, var(--white) 62%, var(--gray) 62%, var(--gray) 100%);
}
.vp-related-heading {
    margin: 0 0 36px;
    font-size: 32px;
    text-transform: uppercase;
}
.vp-related-grid {
    row-gap: 30px;
}

/* ---- Mobile (Vulcor single product) ----------------------------------- */
@media (max-width: 767px) {
    .vp-hero { padding: 100px 0 30px; }
    .vp-hero-card { padding: 16px; }
    .vp-hero-title { font-size: 28px; margin-bottom: 14px; }
    .vp-hero-description { margin-bottom: 22px; }

    /* Stats stay on one row with dividers; shrink so they never overflow. */
    .vp-stats { gap: 0; margin-bottom: 24px; }
    .vp-stat { min-width: 0; padding-right: 14px; margin-right: 14px; }
    .vp-stat-value { font-size: 22px; overflow-wrap: anywhere; }
    .vp-stat-label { font-size: 10px; }

    /* Tabs scroll horizontally (hidden scrollbar), never vertically. */
    .vp-tabs-section .vp-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* IE/Edge */
    }
    .vp-tabs-section .vp-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
    .vp-tab { white-space: nowrap; padding: 14px 16px; }

    .vp-content { padding: 30px 0 40px; }
    .vp-section-title { font-size: 18px; }

    /* Available forms / downloads: icon-only square download button on mobile. */
    .vp-form-row { padding: 14px 16px; }
    .vp-form-download span { display: none; }
    .vp-form-download {
        aspect-ratio: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .vp-form-download .icon { margin-right: 0; }

    .vp-related { padding: 36px 0 46px; }
    .vp-related-heading { font-size: 24px; margin-bottom: 24px; }
}

/* =========================================================================
   Single news/blog post (Vulcor design) — single-post.php
   Dark hero (breadcrumbs + category pills + title) and a two-column body
   (the_content left, ACF-driven sidebar right). Reuses theme tokens, btn
   classes, the post-card-* styles and the icon font.
   ========================================================================= */

/* ---- Hero (always dark blue) ----------------------------------------- */
.news-single .news-hero {
    background: var(--primary);
    /* Full-bleed: blue runs edge to edge (no max-width cap). */
    padding: 150px 0 90px;
    /* Same diagonal bottom edge as the home hero / page headers:
       right side 70px higher than the left bottom. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
}
.news-single .news-hero #breadcrumbs,
.news-single .news-hero #breadcrumbs a,
.news-single .news-hero #breadcrumbs span {
    color: var(--white);
}
.news-single .news-hero #breadcrumbs {
    display: block;
    margin-bottom: 24px;
    opacity: .85;
}
.news-single .news-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.news-single .news-hero-cat {
    display: inline-block;
    padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, .5);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.news-single .news-hero-date {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    opacity: .9;
}
.news-single .news-hero-title {
    max-width: 900px;
    margin: 0;
    color: var(--white);
    font-size: 44px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

/* ---- Body: content + sidebar ----------------------------------------- */
.news-single .news-body {
    background: var(--white);
    padding: 60px 0 80px;
    /* Clip the sidebar background's right-edge bleed (see .news-sidebar-block::before). */
    overflow-x: clip;
}
.news-single .news-content {
    color: var(--black);
    font-size: 16px;
    line-height: 1.7;
}
.news-single .news-content > *:last-child {
    margin-bottom: 0;
}
.news-single .news-content img {
    max-width: 100%;
    height: auto;
}

/* ---- Sidebar --------------------------------------------------------- */
.news-single .news-sidebar {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Top padding clears the diagonal; the grey panel is the ::before below. */
    padding: 60px 24px 30px;
}
/* One unified grey panel for the whole sidebar, bleeding off the right edge of
   the screen with a sloped top. Overshoot clipped by .news-body (overflow-x: clip),
   so it never adds a horizontal scrollbar. */
.news-single .news-sidebar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: var(--gray);
    /* Sloped top edge, parallel to the hero's bottom diagonal (right side higher). */
    clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}
/* Blocks are just groupings now; the grey panel + bleed live on .news-sidebar. */
.news-single .news-sidebar-title {
    margin: 0 0 18px;
    text-transform: uppercase;
}

/* Let the reused product card fill the sidebar column. */
.news-single .news-sidebar .card-product {
    width: 100%;
}
/* The card uses height:100% for equal-height grids; in the single sidebar
   column that stretches it and leaves a big gap above the buttons. Hug content. */
.news-single .news-sidebar .card-product--range {
    height: auto;
}
.news-single .news-sidebar .card-product--range .content-outer {
    flex: 0 0 auto;
}

/* Compact "more news" card — reuses the post-card-* type styles. */
.news-single .news-mini-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: var(--white);
    /* Extra top padding clears the diagonal. */
    padding: 40px 20px 20px;
    /* Sloped top edge, matching the hero/sidebar diagonal (right side higher). */
    clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%);
}
.news-single .news-mini-card + .news-mini-card {
    margin-top: 16px;
}
.news-single .news-mini-card .post-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.news-single .news-mini-card .post-card-cat {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.news-single .news-mini-card .post-card-date {
    color: var(--darkgray);
    font-size: 13px;
    font-weight: 600;
}
.news-single .news-mini-card .post-card-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}
.news-single .news-mini-card .post-card-title a {
    color: var(--black);
    text-decoration: none !important;
}
.news-single .news-mini-card .post-card-title a:hover {
    color: var(--primary);
}
.news-single .news-mini-card .post-card-excerpt {
    margin: 0;
    color: var(--darkgray);
    font-size: 14px;
    line-height: 1.5;
}
.news-single .news-mini-card .post-card-btn .icon {
    margin-left: 8px;
}

/* "Meer nieuws" button spans the block width. */
/* Outlined, right-aligned "Meer nieuws" button (transparent + primary border). */
.news-single .news-more-btn {
    display: flex;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}
.news-single .news-more-btn:hover {
    background: var(--primary);
    color: var(--white);
}
.news-single .news-more-btn .icon {
    margin-left: 8px;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 991px) {
    .news-single .news-hero { padding: 120px 0 80px; }
    .news-single .news-hero-title { font-size: 30px; }
    .news-single .news-body { padding: 40px 0 56px; }
    .news-single .news-sidebar { margin-top: 40px; }
}
@media (max-width: 767px) {
    .news-single .news-hero { padding: 100px 0 70px; }
    .news-single .news-hero-title { font-size: 26px; }
}

/* =====================================================================
   Multisite switcher ([multisite_switcher] shortcode in the topbar)
   Horizontal segmented bar of network sites; active site filled with
   the primary color, others on a light tint. Two-line labels.
   ===================================================================== */
.multisite-switcher {
    display: flex;
    align-items: stretch;
    background: #eef2f5;
    overflow: hidden;
    max-width: 100%;
}
.multisite-switcher__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 22px;
    text-align: center;
    line-height: 1.15;
    text-decoration: none;
    color: var(--primary);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.multisite-switcher__item:first-child {
    border-left: 0;
}
.multisite-switcher__item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--primary);
}
.multisite-switcher__item.is-active {
    background: var(--primary);
    color: var(--white);
    border-left-color: transparent;
}
.multisite-switcher__item.is-active:hover {
    background: var(--primary-darkened, var(--primary));
    color: var(--white);
}
.multisite-switcher__title {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 14px;
}
.multisite-switcher__subtitle {
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 10px;
    opacity: 0.85;
}

@media (max-width: 767px) {
    .multisite-switcher {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .multisite-switcher__item {
        flex: 0 0 auto;
        padding: 8px 16px;
    }
}

/* =========================================================================
   ACF block buttons — "apply colour to border only" (outline / ghost button)
   ACF toggle: button_apply_border_color  →  adds .btn-border-only (see
   leflite-child/partials/content/button.php). The chosen bg-{colour} drives
   the border + text colour while the fill stays transparent; hover inverts
   to a solid button. `currentColor` keeps the border in sync with the text.
   ========================================================================= */
.btn.btn-border-only {
    background-color: transparent;
    border: 1px solid currentColor;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Resting state: text + border take the selected colour, no fill. */
.btn.btn-border-only.bg-primary   { color: var(--primary); }
.btn.btn-border-only.bg-secondary { color: var(--secondary); }
.btn.btn-border-only.bg-white     { color: var(--white); }
.btn.btn-border-only.bg-black     { color: var(--black); }

/* "Transparent" has no colour of its own, so the content (text + border)
   falls back to the primary colour. */
.btn.btn-border-only.bg-transparent { color: var(--primary); }

/* Hover: invert to a solid button — fill with the colour, flip the content to
   its readable -content pair, and match the border to the fill. */
.btn.btn-border-only.bg-primary:hover {
    background-color: var(--primary);
    color: var(--primary-content);
    border-color: var(--primary);
}
.btn.btn-border-only.bg-secondary:hover {
    background-color: var(--secondary);
    color: var(--secondary-content);
    border-color: var(--secondary);
}
.btn.btn-border-only.bg-white:hover {
    background-color: var(--white);
    color: var(--white-content);
    border-color: var(--white);
}
.btn.btn-border-only.bg-black:hover {
    background-color: var(--black);
    color: var(--black-content);
    border-color: var(--black);
}
.btn.btn-border-only.bg-transparent:hover {
    background-color: var(--primary);
    color: var(--primary-content);
    border-color: var(--primary);
}

/* -------------------------------------------------------------------------
   Plain transparent buttons (bg-transparent WITHOUT border-only).
   The theme's default --transparent-content is white, which disappears on
   light sections. Make the content (text + icon) the primary colour, and
   keep it primary on hover (the theme otherwise flips it back to white).
   ------------------------------------------------------------------------- */
.btn.bg-transparent:not(.btn-border-only),
.button.bg-transparent:not(.btn-border-only),
main button.bg-transparent:not(.btn-border-only) {
    color: var(--primary);
    border: 0;
}
.btn.bg-transparent:not(.btn-border-only):hover,
.button.bg-transparent:not(.btn-border-only):hover,
main button.bg-transparent:not(.btn-border-only):hover {
    color: var(--primary);
}

/* ...except on dark sections (e.g. the bg-black hero or a bg-primary band) and
   inside .content-white blocks, where primary text would lose contrast. There
   the theme already shows light content, so keep these buttons white/legible. */
.bg-black .btn.bg-transparent:not(.btn-border-only),
.bg-primary .btn.bg-transparent:not(.btn-border-only),
.content-white .btn.bg-transparent:not(.btn-border-only),
.bg-black .btn.bg-transparent:not(.btn-border-only):hover,
.bg-primary .btn.bg-transparent:not(.btn-border-only):hover,
.content-white .btn.bg-transparent:not(.btn-border-only):hover {
    color: var(--white);
}

/* =========================================================================
   Mobile menu — secondary menu (primary-2) + brand switcher
   Added via leflite-child/components/mobile-navigation/mobile-navigation.php.
   The parent nav.mobile-navigation is a flex row (it only ever held one
   menu); stack its sections and make the toggle, action buttons and brand
   switcher full-width like the design.
   ========================================================================= */
nav.mobile-navigation {
    flex-direction: column;
    gap: 28px;
}
.mobile-navigation-secondary,
.mobile-navigation-switcher {
    width: 100%;
}

/* ---- Secondary menu: Metric/Imperial toggle + action buttons ---- */
.mobile-navigation-secondary .menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.mobile-navigation-secondary .menu > li {
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Reset the primary-menu link padding the items inherit via the parent's
   `nav.mobile-navigation .menu a { padding:15px }` (which loads after this
   file, so we need the extra specificity to win). Without this the toggle and
   buttons sit ~30px too far apart. */
nav.mobile-navigation .mobile-navigation-secondary .menu > li > a {
    display: block;
    width: 100%;
    padding: 0;
    flex: none;
}
/* Metric / Imperial toggle: span the full width as two equal halves. */
.mobile-navigation-secondary .measurements-system-toggle {
    display: flex;
    width: 100%;
}
.mobile-navigation-secondary .measurement-system {
    flex: 1 1 0;
}
/* Action buttons (Request Quote / Product selector): full-width blocks. */
.mobile-navigation-secondary .menu-item-button {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* ---- Brand / multisite switcher: stack vertically, full width ---- */
.mobile-navigation-switcher .multisite-switcher {
    flex-direction: column;
    overflow: visible;
}
.mobile-navigation-switcher .multisite-switcher__item {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px 22px;
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.mobile-navigation-switcher .multisite-switcher__item:first-child {
    border-top: 0;
}

/* =========================================================================
   Archive filter — mobile show/hide toggle (Knowledge Base / News)
   Below 992px the filter collapses behind a full-width primary button.
   Markup: functions/extensions/archive-widget-area.php · JS:
   functions/extensions/assets/archive-filter-mobile.js
   ========================================================================= */
.archive-filter-mobile-toggle {
    display: none; /* desktop: filter is always shown, no toggle */
}

@media only screen and (max-width: 991px) {
    .archive-filter-mobile-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 16px 20px;
        border: 0;
        cursor: pointer;
        font: inherit;
        font-weight: 700;
        line-height: 1;
        text-align: left;
        transition: background-color 0.2s ease;
    }
    .archive-filter-mobile-toggle:hover {
        background-color: var(--primary-darkened, var(--primary));
    }
    .archive-filter-mobile-toggle .icon {
        font-size: 1.1em;
        line-height: 1;
    }
    /* CSS chevron (rotates when open) — no icon-font dependency. */
    .archive-filter-mobile-toggle__chevron {
        width: 9px;
        height: 9px;
        margin-left: auto;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.25s ease;
    }
    .archive-filter-mobile.is-open .archive-filter-mobile-toggle__chevron {
        transform: rotate(-135deg);
    }
    /* Label swaps with state (Filteren ⇄ Filters verbergen). */
    .archive-filter-mobile-toggle__label--open {
        display: none;
    }
    .archive-filter-mobile.is-open .archive-filter-mobile-toggle__label--closed {
        display: none;
    }
    .archive-filter-mobile.is-open .archive-filter-mobile-toggle__label--open {
        display: inline;
    }
    /* The filter itself: hidden until the toggle is opened. */
    .archive-filter-mobile > .sidebar-outer {
        display: none;
    }
    .archive-filter-mobile.is-open > .sidebar-outer {
        display: block;
        margin-top: 14px;
        animation: lefFilterReveal 0.25s ease both;
    }
}

@keyframes lefFilterReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Contact page — "How can we help?" form section (page 162)
   Left col-8 = subtitle/title + Gravity Form; right col-4 = info card whose
   phone/email/address are pulled from Algemene opties via [theme_option].
   ========================================================================= */
.contact-form-section .row {
    align-items: flex-start; /* top-align the info card with the form */
}

/* Form: uppercase labels, hide the "(Vereist)" required text (match design). */
.contact-form-section .gfield_label {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.contact-form-section .gfield_required {
    display: none;
}
/* Submit button bottom-right, like the design. */
.contact-form-section .gform_footer {
    text-align: right;
    justify-content: flex-end;
}

/* Info card: clear spacing between the four blocks. */
.contact-info-card .card {
    height: 100%;
}
.contact-info-card h4 {
    margin-bottom: 4px;
}
.contact-info-card h4:not(:first-child) {
    margin-top: 26px;
}
.contact-info-card p {
    margin-bottom: 6px;
}
.contact-info-card a {
    font-weight: 600;
}

@media only screen and (max-width: 991px) {
    /* Stack: form first, info card below. */
    .contact-form-section .gform_footer {
        text-align: left;
    }
}

/* Footer widget menus (NAVIGATION / PRODUCTS / DOCUMENTS) — plain link lists. */
footer .footer-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
footer .footer-menu li {
    margin-bottom: 8px;
}
footer .footer-menu li:last-child {
    margin-bottom: 0;
}