/*
 * Magneet Pure — Klant-customizations
 *
 * Pas hier project-specifieke styling aan, NIET in style.css.
 * Bij theme-update overschrijft style.css, dit bestand blijft behouden.
 *
 * Pattern: alle aanpassingen via CSS custom properties (`:root` overrides).
 *
 * Volgorde:
 *   1. Brand kleuren
 *   2. Typografie (fonts, optioneel grootte-scaling)
 *   3. Spacing / radius (zelden nodig)
 *   4. Component overrides (alleen in uitzonderlijke gevallen)
 *
 * @package MagneetPure
 */


/* ═══════════════════════════════════════════════════════════════════════
   1. BRAND KLEUREN
   ═══════════════════════════════════════════════════════════════════════
   
   Default in style.css zijn neutraal (zwart/grijs). 
   Vervang minstens primary + accent voor herkenbare branding.
   
   Tip: Gebruik tools als coolors.co of palettes.shecodes.io om consistente
   kleurensets te genereren. Test contrast op contrast-ratio.com.
*/

:root {
    /* Primaire kleur — buttons, links, focus states */
    /* --color-primary:        #000000; */
    /* --color-primary-hover:  #1a1a1a; */
    /* --color-primary-light:  rgba(0, 0, 0, 0.06); */

    /* Secondaire kleur — minder dominant, gebruikt voor outlines/accenten */
    /* --color-secondary:       #555555; */
    /* --color-secondary-hover: #333333; */

    /* Accent kleur — voor highlights, badges, attention-grabbers */
    /* --color-accent:        #ff3300; */
    /* --color-accent-hover:  #cc2900; */
}


/* ═══════════════════════════════════════════════════════════════════════
   2. TYPOGRAFIE
   ═══════════════════════════════════════════════════════════════════════
   
   Default gebruikt system fonts. Vervang voor klant-specifiek lettertype.
   Upload webfont eerst via Bricks → Custom Fonts (of ander mechanisme),
   dan hier de var aanpassen.
*/

:root {
    /* Primaire body font (lopende tekst) */
    /* --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */

    /* Secondaire (headings) — kan zelfde zijn als primary */
    /* --font-secondary: 'Playfair Display', Georgia, serif; */

    /* Monospace (code blocks) */
    /* --font-mono: 'JetBrains Mono', ui-monospace, monospace; */
}


/* ═══════════════════════════════════════════════════════════════════════
   3. SPACING & RADIUS (zelden nodig)
   ═══════════════════════════════════════════════════════════════════════
   
   Default radius is 8px. Voor meer "gerond" / playful: 16px+.
   Voor zakelijke / strak: 4px of 0.
*/

:root {
    /* --radius-sm:   4px; */
    /* --radius-md:   8px; */
    /* --radius-lg:  16px; */
    /* --radius-xl:  24px; */
    /* --radius-full: 999px; */

    /* Container max-width — default 1280px */
    /* --container-max: 1280px; */
}


/* ═══════════════════════════════════════════════════════════════════════
   4. COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════════════════
   
   Alleen als CSS variabelen niet genoeg zijn. Bij voorkeur bug-fix /
   project-uitzondering. Niet hier hele blokken herschrijven.
*/

/* Voorbeeld: button met extra subtle shadow voor klant X
.pri-cta {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
*/


/* ═══════════════════════════════════════════════════════════════════════
   PRINT STYLES (klant-specifiek logo, etc.)
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    /* Project-specifieke print overrides */
}


/* ═══════════════════════════════════════════════════════════════════════
   UPI LABORATORIES — Layout overrides (v1.1.0)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HEADER LOGO ──
   UPI logo is breder dan Magneet Pure default (max 220px ipv flex-auto),
   en mag tot 60px hoog. Beide als MAX (niet vast) zodat de aspect ratio
   behouden blijft en het volledige logo zichtbaar blijft.
*/
.bm-header-logo {
    width: 100%;
    max-width: 220px;
}

.bm-header-logo img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ── FOOTER ──
   v1.5.4: van volledige oranje achtergrond naar donkergrijs (#1a1a1a) met
   oranje accent-lijn. Reden (design principe): oranje als vulkleur op grote
   oppervlakken doodt het signaal — als alles oranje is, valt niets meer op.
   In een industrial precision context werkt donkergrijs als visuele "rust-
   anchor" en mag oranje terugkomen als dunne kicker-lijn boven copyright.
*/
.bm-footer.bg-donker {
    background: #1a1a1a;
    position: relative;
}

/* Dunne oranje accent-lijn aan de bovenkant van de footer = signaalkleur als
   pagina-overgang, niet als vulkleur. */
.bm-footer.bg-donker::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-primary);
}

/* Sociale links: subtiel licht op donkergrijze achtergrond */
.bm-footer-social .bm-social-link {
    background: rgba(255, 255, 255, 0.08);
    transition: background 180ms, color 180ms;
}

.bm-footer-social .bm-social-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Grid scheidingslijn fijn op donkere achtergrond */
.bm-footer-grid {
    border-bottom-color: rgba(255, 255, 255, 0.10);
}


/* ═══════════════════════════════════════════════════════════════════════
   UPI LABORATORIES — Hero refinements (v1.5.5)
   ═══════════════════════════════════════════════════════════════════════

   Twee problemen opgelost:
   1. Hero te klein voor het brand-statement dat UPI wil maken
   2. Tekst onleesbaar op drukke achtergrondafbeelding (industriële setting
      met metallic objecten = veel midden-luminance, dark text valt weg)

   Aanpak:
   - Min-height op heroes met media zodat ze visueel een "statement" zijn
   - Scrim-panel achter de content wanneer dark text op media-bg: een
     semi-transparant wit panel met backdrop-blur ("frosted glass") geeft
     tekst een solide drager terwijl de afbeelding eromheen zichtbaar blijft.
     Past goed bij industriële precisie-merken: paneel voelt als data-overlay
     ipv decoratie. Geen donker overlay over de hele afbeelding nodig.
*/

/* ── Hero met media: stevige min-height ── */
.s-bm-hero--has-media {
    min-height: clamp(560px, 65vh, 760px);
    display: flex;
    align-items: center;
}

/* ── Readability scrim ──
   Frosted-glass paneel achter hero-content, alleen wanneer dark text op
   media bg. Bij light text + media is de bestaande overlay-flow goed.

   Specificiteit: 0,3,0 — gelijk aan andere hero rules, maar deze regel komt
   later in de cascade dus wint. */
.s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--gap-xl) var(--gap-xl);
    max-width: 640px;
    /* Subtle bordertje voor definition op witte/lichte achtergronden */
    border-left: 3px solid var(--color-primary);
}

/* Op smal scherm: scrim mag volle breedte minus padding pakken, padding
   binnenin iets kleiner houden om ruimte te besparen. */
@media (max-width: 768px) {
    .s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
        padding: var(--gap-lg) var(--gap-md);
        max-width: none;
    }
}

/* Lead-tekst leesbaarheid bumpen — donkerder dan gray-500 default zodat
   't ook in het scrim panel pop-uit-paper voelt. */
.s-bm-hero--has-media.bm-hero-tekst-donker .lead {
    color: var(--color-gray-800);
}

/* Eyebrow boven scrim — gebruik primary-text als signaal-kicker
   (donker oranje, WCAG-veilig). */
.s-bm-hero--has-media.bm-hero-tekst-donker .bm-eyebrow {
    color: var(--color-primary-text);
}


/* ═══════════════════════════════════════════════════════════════════════
   ly_tabs — UPI tabbed interface (Test Methods / Quality Standards /
   Company / Downloads). Iconen-variant = grote tegels zoals UPI design.
   ═══════════════════════════════════════════════════════════════════════ */
.s-bm-tabs {
    padding-block: var(--space-md);
}
.c-bm-tabs {
    max-width: var(--breedte-normaal, 1240px);
    margin-inline: auto;
}
.bm-tabs-header { margin-bottom: var(--gap-xl); text-align: center; }
.bm-tabs-header h2 { margin: 0 0 var(--gap-sm); }
.bm-tabs-intro { max-width: 760px; margin: 0 auto; color: var(--color-gray-700, #555); }

/* ── Tabs NAV ──
   v1.5.15: underline tab pattern — schoner, B2B/precision feel, gebaseerd op
   klant-referentie (banking-style underline tabs). Was: 3-koloms grid met
   gap tussen losse witte kaarten. Wordt: tabs op één rij met gedeelde
   onderlijn als visuele basis, active = oranje underline. */
.bm-tabs-nav {
    display: grid;
    gap: 0;
    margin-bottom: var(--gap-lg);
    border-bottom: 1px solid var(--color-gray-200);
    list-style: none;
    padding: 0;
}
.bm-tabs-nav--kolommen-2 { grid-template-columns: repeat(2, 1fr); }
.bm-tabs-nav--kolommen-3 { grid-template-columns: repeat(3, 1fr); }
.bm-tabs-nav--kolommen-4 { grid-template-columns: repeat(4, 1fr); }
.bm-tabs-nav--kolommen-5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.bm-tabs-nav--kolommen-6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

@media (max-width: 768px) {
    .bm-tabs-nav { grid-template-columns: repeat(2, 1fr); }
}

.bm-tabs-tab {
    /* v1.5.15: underline tab pattern.
       Background transparant, geen border behalve onder, active = 3px primary
       bottom border. Past bij UPI's industrial/precision feel + werkt met
       de orange/white icon asset pair (white icon in active orange cirkel). */
    appearance: none;
    background: transparent;
    border: 0;
    /* 3px transparante onderkant zodat hoogte gelijk blijft tussen states */
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* overlap met nav border-bottom voor smooth join */
    padding: var(--gap-lg) var(--gap-md);
    cursor: pointer;
    font: inherit;
    /* Muted inactive label; active wordt dark */
    color: var(--color-gray-600);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-md);
    transition: color 180ms, border-color 180ms, background 180ms;
    text-align: center;
}

.bm-tabs-tab:hover {
    /* Hover: bg shift naar gray-50, label krijgt full dark */
    color: var(--color-dark);
    background: var(--color-gray-50);
}

.bm-tabs-tab[aria-selected="true"] {
    /* Active: dark label + 3px primary bottom underline. Geen bg shift —
       de oranje icon-cirkel hieronder is signaal genoeg. */
    color: var(--color-dark);
    border-bottom-color: var(--color-primary);
    background: transparent;
}

.bm-tabs-tab[aria-selected="true"]:hover {
    /* Lichte bg op hover van active = bevestiging dat het clickable is */
    background: var(--color-gray-50);
}

.bm-tabs-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* ── Icon styling per variant ──
   v1.5.15: in active state krijgt icon-area een oranje cirkel-bg met witte
   icon binnenin. Inactive = icon op transparante achtergrond.
   v1.5.16: icons groter + CSS filter voor wit-conversie in active state.
   v1.5.17: gebruiker heeft icon-assets met INGEBAKKEN label tekst onderin.
   Dat zorgde voor duplicate labels (asset-tekst + .bm-tabs-label). Fix:
   bottom van het asset wegclippen via container overflow + img verschoven.
   Plus container groter + icon image groter. */
.s-bm-tabs--iconen .bm-tabs-tab { min-height: 150px; }
.s-bm-tabs--iconen .bm-tabs-icon {
    /* v1.5.21: cirkel-container — icoon zit gewoon in het midden.
       (Was: overflow:hidden + flex-start om embedded label te clippen, maar
       met icon-only assets is dat niet meer nodig en zorgde voor visuele
       offset waarbij icoon iets te hoog stond in de cirkel.) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: transparent;
    transition: background 180ms;
}
.s-bm-tabs--iconen .bm-tabs-icon img {
    /* v1.5.21: icoon met padding binnen cirkel (standaard icon-in-circle
       pattern). 40px in 72px cirkel = ~16px ruimte rondom = comfortabele
       optische balans. */
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: filter 180ms;
}

/* Hover op inactive tab: icon krijgt lichte peach bg-tint */
.s-bm-tabs--iconen .bm-tabs-tab:hover:not([aria-selected="true"]) .bm-tabs-icon {
    background: var(--color-cream);
}

/* Active tab: icon-area wordt oranje cirkel + icon wordt geforced wit via
   CSS filter (brightness 0 + invert 1 = pure white silhouette). Werkt op elke
   PNG ongeacht oorspronkelijke kleur — robuster dan asset-swap. */
.s-bm-tabs--iconen .bm-tabs-tab[aria-selected="true"] .bm-tabs-icon {
    background: var(--color-primary);
}
.s-bm-tabs--iconen .bm-tabs-tab[aria-selected="true"] .bm-tabs-icon img {
    filter: brightness(0) invert(1);
}

.s-bm-tabs--tegels .bm-tabs-tab { min-height: 100px; }
.s-bm-tabs--tegels .bm-tabs-icon { width: 56px; height: 56px; }
.s-bm-tabs--tegels .bm-tabs-icon img { width: 56px; height: 72px; object-fit: contain; object-position: top center; }

.s-bm-tabs--tegels .bm-tabs-tab { min-height: 90px; }
.s-bm-tabs--tegels .bm-tabs-icon img { width: 32px; height: 32px; object-fit: contain; }

.s-bm-tabs--pills { }
.s-bm-tabs--pills .bm-tabs-nav { display: flex; gap: var(--gap-sm); justify-content: center; }
.s-bm-tabs--pills .bm-tabs-tab { padding: var(--gap-sm) var(--gap-lg); min-height: 0; }
.s-bm-tabs--pills .bm-tabs-icon { display: none; }

/* Active icon swap (when data-src-active provided) — done via JS */

/* ── Pagination indicator ── */
.bm-tabs-pagination {
    text-align: center;
    /* v1.5.8: --color-primary-text (WCAG-veilig) ipv --color-primary */
    color: var(--color-primary-text);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.10em;
    margin: 0 0 var(--gap-lg);
}
.bm-tabs-pagination-sep { margin: 0 0.5em; opacity: 0.4; }

/* ── Tab panels ── */
.bm-tabs-panel {
    border-top: 1px solid var(--color-gray-200, #e0e0e0);
    padding-top: var(--gap-xl);
}
.bm-tabs-panel-titel {
    /* v1.5.15: visueel verstoppen maar voor screen-readers behouden.
       Reden: panel-titel rendert alleen wanneer er een linked-post is, en die
       linked-post heeft meestal zélf een H2 met dezelfde titel. Resultaat was
       3x dezelfde titel: tab-label + panel-titel eyebrow + content H2.
       Nu: tab-label + content H2 (2x is acceptabel — tab-label is nav-cue,
       H2 is page heading). */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.bm-tabs-panel-cta { margin-top: var(--gap-lg); }
.bm-tabs-panel[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   ARCHIVE PRODUCT + SINGLE PRODUCT (UPI design — v1.3)
   ═══════════════════════════════════════════════════════════════════════ */

/* Page hero met oranje wave pattern */
.upi-page-hero {
    position: relative;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-lg) 0;
    overflow: hidden;
    margin-bottom: var(--space-md);
}
.upi-page-hero__pattern {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 60px,
            rgba(255,255,255,0.06) 60px,
            rgba(255,255,255,0.06) 90px);
    pointer-events: none;
}
.upi-page-hero h1 {
    position: relative;
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Section title (OUR PRODUCTS) */
.upi-products-section { padding: var(--space-md) 0 var(--space-lg); }
.upi-products-section__title {
    font-family: var(--font-secondary);
    font-weight: 400;
    color: var(--color-gray-600, #747a7c);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.25rem;
    margin: 0 0 var(--gap-xl);
}
.upi-products-section__title .orange {
    color: var(--color-primary);
    font-weight: 700;
}

/* Filter rijen */
.upi-product-filters {
    display: flex;
    align-items: stretch;
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
}
.upi-product-filters__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1rem;
}
.upi-product-filters__buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    flex: 1;
    border: 1px solid var(--color-gray-200, #e0e0e0);
}
.upi-filter-btn {
    appearance: none;
    background: var(--color-white);
    border: 0;
    border-right: 1px solid var(--color-gray-200, #e0e0e0);
    /* v1.5.4: min-height 48px voor WCAG 2.5.5 tap target. */
    min-height: 48px;
    padding: var(--gap-sm) var(--gap-md);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-gray-700, #555);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 180ms, color 180ms;
}
.upi-filter-btn:last-child { border-right: 0; }
.upi-filter-btn:hover { background: var(--color-gray-50, #f7f7f7); }
.upi-filter-btn.is-active {
    background: var(--color-gray-700, #555);
    color: var(--color-white);
}
.upi-product-filters--methods .upi-filter-btn.is-active,
.upi-filter-btn--primary.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .upi-product-filters__buttons { grid-auto-flow: row; }
    .upi-filter-btn { border-right: 0; border-bottom: 1px solid var(--color-gray-200, #e0e0e0); }
    .upi-filter-btn:last-child { border-bottom: 0; }
}

/* Product groepen */
.upi-product-groups { margin-top: var(--space-md); }
.upi-product-group { margin-bottom: var(--space-lg); }
.upi-product-group__heading {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-gray-700, #555);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1rem;
    margin: 0 0 var(--gap-lg);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--color-gray-200, #e0e0e0);
}

/* Product grid */
.upi-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-xl);
}
@media (max-width: 1024px) { .upi-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .upi-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .upi-product-grid { grid-template-columns: 1fr; } }

/* Product card
   v1.5.4: meerdere verbeteringen voor visuele rust + accessibility:
   - __img-wrap: 1/1 aspect-ratio met object-fit:cover (was 1/0.85 + contain)
   - __code: van oranje (faalt WCAG AA, 2.1:1) naar dark (~17:1)
   - __method: border-bottom van oranje naar gray-200 (decoratie → rust)
   - __btn: min-height 48px (was ~32px → faalde 44px tap target)
   - __excerpt: line-clamp 2 (was overflow zonder limiet)
*/
.upi-product-card { display: flex; flex-direction: column; }
.upi-product-card__img-wrap {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--color-gray-50, #f7f7f7);
    margin-bottom: var(--gap-md);
    overflow: hidden;
}
.upi-product-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.upi-product-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
}
.upi-product-card__code {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.upi-product-card__method {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-gray-700, #555);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--color-gray-200, #e4e4e7);
    padding-bottom: var(--gap-sm);
    margin-bottom: var(--gap-sm);
}
.upi-product-card__excerpt {
    color: var(--color-gray-700, #555);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--gap-md);
    /* v1.5.4: max 2 regels — voorkomt dat lange beschrijvingen het grid-ritme
       breken (research: Stan Vision card design guide 2026). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.upi-product-card__excerpt p { margin: 0 0 0.25em; display: inline; }
.upi-product-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    /* v1.5.4: min-height 48px voor WCAG 2.5.5 tap target (was ~32px). */
    min-height: 48px;
    padding: 0.875rem 1.5rem;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-text);
    background: transparent;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 180ms, color 180ms;
}
.upi-product-card__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Filter visibility: handled by upi-products-filter.js — zet style.display
   direct inline op kaarten. Een CSS-regel die hier hide doet zou de inline
   style="" (= leeg, niet hidden) overrulen voor zichtbare kaarten, en
   :not([data-cat*=""]) is geen valide manier om op active-filter te matchen
   in pure CSS (zou substring uit ander element vereisen). */

.upi-product-empty {
    text-align: center;
    color: var(--color-gray-600, #747a7c);
    padding: var(--space-md);
}

/* ─── SINGLE PRODUCT ─── */
.upi-single-product { background: var(--color-white); }
.upi-single-product__hero {
    background: linear-gradient(180deg, #f4f3f1 0%, #e8e6e3 100%);
    padding: var(--space-lg) 0;
    text-align: center;
}
.upi-single-product__hero img {
    max-width: 480px;
    max-height: 400px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}
.upi-single-product__intro {
    padding: var(--space-md) 0 var(--gap-md);
}
.upi-single-product__code {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 2rem;
    letter-spacing: 0.02em;
    margin: 0 0 var(--gap-sm);
}
.upi-single-product__badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
}
.upi-single-product__details-header {
    display: inline-block;
    background: var(--color-gray-700, #555);
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 1.5rem;
    margin: var(--gap-lg) 0 var(--gap-md);
}
.upi-single-product__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    margin-bottom: var(--space-md);
}
@media (max-width: 768px) {
    .upi-single-product__specs { grid-template-columns: 1fr; }
}
.upi-single-product__specs p { margin: 0 0 0.7rem; line-height: 1.5; }
.upi-single-product__specs strong { color: var(--color-gray-900, #111); }
.upi-single-product__cta {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.85rem 1.75rem;
    font-family: var(--font-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 180ms;
}
.upi-single-product__cta:hover { background: var(--color-primary-hover); color: var(--color-white); }


/* ═══════════════════════════════════════════════════════════════════════
   UPI — v1.4: footer + gallery + tabs adjustments
   ═══════════════════════════════════════════════════════════════════════ */

/* v1.5.8: footer-brand WEER tonen — eerdere "UPI design heeft die niet"
   override verwijderd. Klant heeft een logo_licht ge-upload in thema opties
   en wil dat in de footer zien op de donkere achtergrond. */
.bm-footer-brand {
    /* default styles uit style.css doen het werk; we hoeven hier niets */
}

/* v1.5.8: logo size constraint binnen de footer — UPI logo is van origine
   1024x190 (wide wordmark), 220px max breedte past in de brand-kolom zonder
   het grid te verstoren. */
.bm-footer-logo {
    display: inline-block;
    max-width: 220px;
}
.bm-footer-logo img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Footer kolom titels (Sitemap/etc) — UPI styling */
.bm-footer h2,
.bm-footer-kolom-titel {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    margin: 0 0 var(--gap-md);
}

/* Footer navigation styling — UPI design heeft kleine tekst, witte links */
.bm-footer nav a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.8;
    display: block;
}
.bm-footer nav a:hover { text-decoration: underline; }

/* ─── Gallery in 2x2 grid (UPI's Company page foto's) ─── */
.s-bm-media--grid .c-bm-media,
.s-bm-media--grid .bm-media-grid {
    display: grid;
    gap: var(--gap-md);
    grid-template-columns: repeat(2, 1fr);
}
.s-bm-media--grid .bm-media-grid > * {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.s-bm-media--grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 600px) {
    .s-bm-media--grid .bm-media-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   UPI LABORATORIES — Contact formulier styling (Fluent Forms binnen contact block)
   v1.5.7
   ═══════════════════════════════════════════════════════════════════════

   Doel: Fluent Forms output integreert visueel in onze design language.
   Aanpak per element:
   - Wrapper: lichtgrijze achtergrond + 3px oranje accent-lijn bovenaan
     (zelfde signaal-pattern als footer + search overlay)
   - Labels: Futura caps mini (is-ui-label patroon)
   - Inputs: scharpe hoeken, dunne border, focus = oranje border
   - Submit button: pri-cta look (Futura caps + 48px min-height)
   - Error/success states: gebruik onze feedback kleuren
*/

.bm-contact-form {
    background: var(--color-gray-50);
    padding: var(--gap-xl);
    position: relative;
    border-top: 3px solid var(--color-primary);
}

/* ── v1.5.9: INTRO-ZONE (eyebrow + titel + response-time) ──
   Eerste impressie van het form. "Header" zone die context geeft VOOR de
   gebruiker bij de velden komt. */
.bm-contact-form-intro {
    margin-bottom: var(--gap-lg);
    padding-bottom: var(--gap-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.bm-contact-form-eyebrow {
    display: inline-block;
    margin-bottom: var(--gap-sm);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-primary-text);
}

.bm-contact-form-titel {
    margin: 0 0 var(--gap-sm);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    line-height: var(--lh-heading);
}

/* Response-time regel: clock-icoon + reassuring text. Klein maar zichtbaar. */
.bm-contact-form-response {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-family: var(--font-content);
    font-size: 0.9375rem;
    color: var(--color-gray-700);
    line-height: 1.4;
}

.bm-contact-form-response-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-primary-text);
}

/* ── v1.5.9: USPs (checklist boven form-velden) ──
   v1.5.10: refresh — orange gevulde cirkels weg (te luid, voelde decoratief).
   Nu: alleen check-icoon in --color-action (groen), grotere icoon-size, meer
   ademruimte. Thematische samenhang met de groene submit-button: groen =
   "positieve actie / wat je krijgt", oranje blijft voor brand/accents. */
.bm-contact-form-usps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gap-xl);
    display: grid;
    gap: var(--gap-md);
}

.bm-contact-form-usps li {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    font-family: var(--font-content);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: var(--color-gray-800);
}

.bm-contact-form-usp-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v1.5.10: geen background-fill meer, geen border-radius — alleen het
       check-icoon in actie-groen. Voelt schoner, zelfverzekerder. */
    color: var(--color-action);
}

.bm-contact-form-usp-check svg {
    width: 24px;
    height: 24px;
}

.bm-contact-form-usp-tekst {
    flex: 1;
}

/* ── v1.5.9: PRIVACY-REGEL onder submit ──
   Reassurance dat data veilig is. Standaard onder de submit, klein maar
   zichtbaar. Lock-icoon + tekst.
   v1.5.12: justify-content: center toegevoegd zodat tekst horizontaal
   gecentreerd staat onder de groene knop. */
.bm-contact-form-privacy {
    margin: var(--gap-md) 0 0;
    padding-top: var(--gap-md);
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    font-family: var(--font-content);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    line-height: 1.4;
}

.bm-contact-form-privacy-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-gray-500);
}

/* ── v1.5.9: TRUST-STRIP (accreditaties) in kolom 1 ──
   Onder de contactinfo. Geeft visueel gewicht aan kolom 1 zodat die niet
   "leeg" voelt naast de form-kolom. */
.bm-contact-trust {
    margin-top: var(--gap-xl);
    padding-top: var(--gap-lg);
    border-top: 1px solid var(--color-gray-200);
}

.bm-contact-trust-label {
    display: block;
    margin-bottom: var(--gap-md);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-gray-600);
}

.bm-contact-trust-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-lg) var(--gap-xl);
}

.bm-contact-trust-logos img {
    height: auto;
    width: auto;
    max-height: 56px;
    max-width: 100px;
    object-fit: contain;
    /* v1.5.9: filter grayscale + lichte opacity zodat logos voelen als trust-
       proof ipv reclame. Bij hover: full color (alleen relevant als ze linkbaar zouden zijn). */
    filter: grayscale(100%) contrast(1.05);
    opacity: 0.7;
    transition: filter var(--transition-base), opacity var(--transition-base);
}

.bm-contact-trust-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ── Fluent Forms structuur ── */
.bm-contact-form .fluentform .ff-el-group {
    margin-bottom: var(--gap-md);
}

.bm-contact-form .fluentform .ff-el-group:last-child {
    margin-bottom: 0;
}

/* Twee-koloms rij van Fluent Forms (voor- en achternaam etc) */
.bm-contact-form .fluentform .ff-t-cell {
    padding-inline: var(--gap-xs);
}

/* ── Labels — Futura caps mini ── */
.bm-contact-form .fluentform .ff-el-input--label label,
.bm-contact-form .fluentform label {
    display: block;
    margin-bottom: var(--gap-xs);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-800);
    line-height: 1.4;
}

/* Verplicht-asterisk in iets minder dominant rood */
.bm-contact-form .fluentform label .ff-el-is-required,
.bm-contact-form .fluentform label .ff_required {
    color: var(--color-accent);
    margin-left: 2px;
}

/* ── Inputs / textareas / selects ── */
.bm-contact-form .fluentform input[type="text"],
.bm-contact-form .fluentform input[type="email"],
.bm-contact-form .fluentform input[type="tel"],
.bm-contact-form .fluentform input[type="url"],
.bm-contact-form .fluentform input[type="number"],
.bm-contact-form .fluentform input[type="password"],
.bm-contact-form .fluentform input[type="date"],
.bm-contact-form .fluentform input[type="search"],
.bm-contact-form .fluentform textarea,
.bm-contact-form .fluentform select,
.bm-contact-form .fluentform .ff-el-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-content);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 0;
    box-shadow: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.bm-contact-form .fluentform input[type="text"]:focus,
.bm-contact-form .fluentform input[type="email"]:focus,
.bm-contact-form .fluentform input[type="tel"]:focus,
.bm-contact-form .fluentform input[type="url"]:focus,
.bm-contact-form .fluentform input[type="number"]:focus,
.bm-contact-form .fluentform input[type="password"]:focus,
.bm-contact-form .fluentform input[type="date"]:focus,
.bm-contact-form .fluentform input[type="search"]:focus,
.bm-contact-form .fluentform textarea:focus,
.bm-contact-form .fluentform select:focus,
.bm-contact-form .fluentform .ff-el-form-control:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: none;
}

.bm-contact-form .fluentform input::placeholder,
.bm-contact-form .fluentform textarea::placeholder {
    color: var(--color-gray-400);
    opacity: 1;
}

.bm-contact-form .fluentform textarea {
    min-height: 140px;
    resize: vertical;
}

.bm-contact-form .fluentform select {
    /* Custom dropdown arrow want appearance:none verbergt 'm */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    padding-right: 2.5rem;
}

/* ── Checkbox / Radio ── */
.bm-contact-form .fluentform input[type="checkbox"],
.bm-contact-form .fluentform input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: var(--gap-sm);
    accent-color: var(--color-primary);
    cursor: pointer;
}

.bm-contact-form .fluentform .ff-el-form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
}

.bm-contact-form .fluentform .ff-el-form-check label {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-content);
    font-weight: var(--fw-normal);
    font-size: var(--fs-body);
    color: var(--color-dark);
    cursor: pointer;
}

/* ── Submit button — pri-cta look ──
   v1.5.8: agressievere selectors + !important. Fluent Forms zet eigen
   button-styling met hoge specificity (vaak via .ff_btn_style of inline
   via form-designer settings). Zonder !important wint Fluent en blijft
   de knop blauw met lowercase tekst.
   v1.5.10: kleur naar --color-action (groen) en width naar 100% (full-width).
   Reden: orange = brand/structuur, groen = positieve actie. Visueel
   onderscheid tussen "brand-signaal" en "doe-actie". Full-width = sterk
   visueel slotelement + betere mobile tap target. */
.bm-contact-form .fluentform .ff-btn-submit,
.bm-contact-form .fluentform button[type="submit"],
.bm-contact-form .fluentform .ff_btn_style,
.bm-contact-form .fluentform .ff-btn,
.bm-contact-form form.fluentform button.ff-btn-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--gap-sm) !important;
    padding: 1em 1.75em !important;
    min-height: 56px !important;
    width: 100% !important;
    font-family: var(--font-display) !important;
    font-size: 0.875rem !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
    background: var(--color-action) !important;
    background-color: var(--color-action) !important;
    background-image: none !important;
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background 180ms !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.bm-contact-form .fluentform .ff-btn-submit:hover,
.bm-contact-form .fluentform button[type="submit"]:hover,
.bm-contact-form .fluentform .ff_btn_style:hover,
.bm-contact-form .fluentform .ff-btn:hover {
    background: var(--color-action-hover) !important;
    background-color: var(--color-action-hover) !important;
    color: var(--color-white) !important;
    opacity: 1 !important;
}

.bm-contact-form .fluentform .ff-btn-submit:focus-visible,
.bm-contact-form .fluentform button[type="submit"]:focus-visible {
    outline: 2px solid var(--color-action) !important;
    outline-offset: 3px !important;
}

/* ── Error states ── */
.bm-contact-form .fluentform .ff-el-is-error input,
.bm-contact-form .fluentform .ff-el-is-error textarea,
.bm-contact-form .fluentform .ff-el-is-error select,
.bm-contact-form .fluentform input.error,
.bm-contact-form .fluentform textarea.error,
.bm-contact-form .fluentform .has-error .ff-el-form-control {
    border-color: var(--color-accent);
    background: rgba(207, 47, 33, 0.03);
}

.bm-contact-form .fluentform .text-danger,
.bm-contact-form .fluentform .error,
.bm-contact-form .fluentform .ff-el-form-check-error {
    color: var(--color-accent);
    font-family: var(--font-content);
    font-size: 0.875rem;
    font-weight: var(--fw-normal);
    text-transform: none;
    letter-spacing: 0;
    margin-top: var(--gap-xs);
    display: block;
}

/* ── Success message na submit ── */
.bm-contact-form .fluentform .ff-message-success,
.bm-contact-form .ff_success_msg {
    padding: var(--gap-md) var(--gap-lg);
    border: 0;
    border-left: 3px solid var(--color-success);
    background: rgba(34, 197, 94, 0.08);
    color: var(--color-dark);
    font-family: var(--font-content);
    font-size: var(--fs-body);
}

/* ── Loader op submit ── */
.bm-contact-form .fluentform .ff_submit_btn_loader {
    margin-left: var(--gap-sm);
}

/* ── 2-koloms contact-grid met form: kolom-2 mag breder zijn ── */
.bm-contact-grid.bm-contact-grid--met-form {
    /* Form vraagt meer ruimte; kolom 1 (contact info) smaller, kolom 2 (form) ruimer */
    grid-template-columns: 1fr 1.4fr;
}

@media (max-width: 768px) {
    .bm-contact-grid.bm-contact-grid--met-form {
        grid-template-columns: 1fr;
    }
    .bm-contact-form {
        padding: var(--gap-lg) var(--gap-md);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.5.11 — LEAD-FORM SECTION VARIANT
   ═══════════════════════════════════════════════════════════════════════════
   Wordt geactiveerd door `s-bm-contact--leadform` class (PHP plaatst die
   automatisch wanneer kolom2_inhoud === 'formulier'). De hele section krijgt
   dan een complete "dashboard"-treatment:
   - Section bg: cream tint van brand oranje
   - Kolom 1: 4 witte info-tiles met oranje icon-badges
   - Kolom 2: wit form-paneel (bestaande styling blijft, alleen container)
   - Accreditatie-strip blijft onder de tiles op cream bg
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section achtergrond override ── */
.s-bm-contact--leadform {
    background: var(--color-cream) !important;
}

/* ── Hoofd-titel area op cream — leadtext moet leesbaar zijn ── */
.s-bm-contact--leadform .bm-contact-header .lead {
    color: var(--color-gray-800);
}

/* ── Contact items worden WITTE TILES ──
   Elke item (telefoon/email/adres/social) wordt een eigen "card" met
   subtiele border, witte bg, oranje icon-badge. Geeft dashboard-gevoel. */
.s-bm-contact--leadform .bm-contact-kolom--1 {
    display: grid;
    gap: var(--gap-md);
}

.s-bm-contact--leadform .bm-contact-item {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--gap-md) var(--gap-lg);
    /* v1.5.13: override base-theme negatieve margin op .bm-contact-item--linked.
       Die margin (-0.5rem) is bedoeld voor inline linked-items zonder card-styling
       en trekt tiles 1-3 (phone/email/adres = linked) visueel aan elkaar,
       terwijl volg-ons (div, niet linked) de echte grid-gap behoudt. */
    margin: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    /* Sharp corners — consistent met UPI design system (--radius-card: 0) */
    border-radius: 0;
    /* v1.5.11: thin orange left accent geeft brand-anchor en visuele rhythm */
    border-left: 3px solid var(--color-primary);
    text-decoration: none;
    transition: border-color var(--transition-base), background var(--transition-base);
}

/* Linkable items krijgen hover-feedback */
.s-bm-contact--leadform .bm-contact-item--linked:hover {
    /* v1.5.13: override base-theme hover (background gray-100 + translateY) —
       die zijn voor inline linked items zonder card-styling, niet voor tiles */
    background: var(--color-white);
    transform: none;
    border-color: var(--color-gray-400);
    border-left-color: var(--color-primary-text);
}

/* No-icon items (zoals social) krijgen wel de tile-stijl, maar het icon-blok
   is verborgen — content centreert dan zelf */
.s-bm-contact--leadform .bm-contact-item--no-icon {
    padding-left: var(--gap-lg);
}

/* ── Icon-badge: oranje gevulde cirkel met wit icon binnenin ──
   Dashboard-look (zie referentie image 1). Voelt stevig en branded. */
.s-bm-contact--leadform .bm-contact-item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    /* Uitzondering op --radius-card: 0 — icon-badges zijn UI primitives
       (zoals checkmark cirkels), niet card/button elementen */
    border-radius: 50%;
    color: var(--color-white);
}

.s-bm-contact--leadform .bm-contact-item-icon svg {
    width: 22px;
    height: 22px;
    /* Forceer wit op de svg-strokes (defaults uit theme zijn primary) */
    color: var(--color-white);
    stroke: var(--color-white);
}

/* ── Tile content: label boven, value onder ── */
.s-bm-contact--leadform .bm-contact-item-content {
    flex: 1;
    min-width: 0; /* prevents overflow als value lange URL/email is */
}

/* Label = "PHONE" / "EMAIL" / "ADDRESS" — Futura caps, primary-text */
.s-bm-contact--leadform .bm-contact-item-label {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-primary-text);
    line-height: 1;
}

/* Value = "+31 43 ..." — body size, dark voor leesbaarheid */
.s-bm-contact--leadform .bm-contact-item-value {
    font-family: var(--font-content);
    font-size: 1rem;
    font-weight: var(--fw-medium);
    color: var(--color-gray-900);
    line-height: 1.4;
    word-break: break-word;
}

/* Linkable hover op value — kleur shift naar primary-text */
.s-bm-contact--leadform .bm-contact-item--linked:hover .bm-contact-item-value {
    color: var(--color-primary-text);
}

/* ── Social item: speciale handling (geen value, maar icon-row) ──
   De social-tile heeft als value de social-icons; die rij moet horizontaal
   netjes flowen in de tile.
   v1.5.12: scheve uitlijning gefixt — de basis .bm-social-link is een
   36-40px cirkel; gecombineerd met de korte label "VOLG ONS" werd de
   content significant hoger dan andere tiles (telefoon/email/adres hebben
   alleen inline tekst). Met align-items: center op de tile werd het visueel
   "scheef" tov de rest. Fix: social-link kleiner (32px) in leadform context
   + extra margin-top weggehaald zodat label→value gap consistent is. */
.s-bm-contact--leadform .bm-contact-item .bm-contact-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.s-bm-contact--leadform .bm-contact-item .bm-contact-social .bm-social-link {
    width: 32px;
    height: 32px;
}

/* ── Accreditatie-strip blijft onder de tiles, op cream bg (geen tile) ──
   Visueel onderscheid: "trust signals" zijn meta-info, geen contact-actie. */
.s-bm-contact--leadform .bm-contact-trust {
    margin-top: var(--gap-xl);
    padding-top: var(--gap-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Form-paneel context: kolom 2 ──
   De bestaande .bm-contact-form heeft al gray-50 achtergrond. In de leadform
   section maken we hem PUUR WIT zodat hij contrasteert met de cream section
   bg en het paneel visueel "los" voelt van de tiles links. */
.s-bm-contact--leadform .bm-contact-form {
    background: var(--color-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — leadform variant
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   v1.5.19 — Block-alignment override voor "Smal — tekst links" layout
   ═══════════════════════════════════════════════════════════════════════════
   Aanleiding: `.bm-t-narrow` heeft default `margin-inline: auto` (v2.3.1 —
   auto-centers alle smal blokken). Tekst-block "Smal — tekst links" voegt
   nu ook `.bm-t-left` toe om die centering te override → blok daadwerkelijk
   links van de innerwidth. Matcht natuurlijke lezing van het label.

   Specificity: 2 classes (`.bm-t-narrow.bm-t-left`) > 1 class (`.bm-t-narrow`),
   wint dus van de default margin-inline:auto.

   v1.5.20: ook heading-sizes resetten. De v2.5.35 `.bm-t-narrow h2/h3` overrides
   maken headings KLEINER — bedoeld voor blog/centered context (smal reading width).
   Bij `.bm-t-left` is het juist een page section, daar horen normale h-sizes. */
.bm-t-narrow.bm-t-left {
    margin-inline: 0;
}

.bm-t-narrow.bm-t-left h1 { font-size: var(--fs-h1) !important; }
.bm-t-narrow.bm-t-left h2 { font-size: var(--fs-h2) !important; }
.bm-t-narrow.bm-t-left h3 { font-size: var(--fs-h3) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v1.5.22 — Grid kaart-link upgrade (premium B2B CTA)
   ═══════════════════════════════════════════════════════════════════════════
   Aanleiding: klant — "button opmaak hierin is nogal matig qua ux/ui".

   Wijzigingen tov v1.5.6 base:
   - CTA link krijgt top-separator (1px gray-100) zodat ie visueel als footer
     van de card afsteekt, niet als alinea-onderdeel.
   - Literal `→` vervangen door bm_icon('arrow-right', 14) (SVG, animatable,
     consistent met rest van het systeem).
   - Arrow translate(+4px) op card-hover — duidelijke "ga verder" affordance.
   - Card-hover: border-color → primary (was gray-400) + lichte translateY
     (-2px) + subtiele shadow. Refactoring UI: micro-interactie is OK zolang
     het hiërarchie respecteert en niet "danst".

   Specificity: 2-class selectors waar nodig om de 1-class base te overrulen. */

a.bm-grid-kaart {
    transition:
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

a.bm-grid-kaart:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.12);
}

.bm-grid-kaart .bm-grid-kaart-link {
    padding-top: var(--gap-md);
    border-top: 1px solid var(--color-gray-100);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
}

.bm-grid-kaart .bm-grid-kaart-link svg {
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

a.bm-grid-kaart:hover .bm-grid-kaart-link svg {
    transform: translateX(4px);
}

/* Body iets meer breathing room tussen titel/tekst/cta */
.bm-grid-kaart .bm-grid-kaart-body {
    gap: var(--gap-md);
}

@media (max-width: 768px) {
    .s-bm-contact--leadform .bm-contact-item {
        padding: var(--gap-sm) var(--gap-md);
    }
    .s-bm-contact--leadform .bm-contact-item-icon {
        width: 40px;
        height: 40px;
    }
    .s-bm-contact--leadform .bm-contact-item-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.5.13 — HERO PRESET: compact_brand
   ═══════════════════════════════════════════════════════════════════════════
   Selecteerbaar in hero-block onder variant "pagina" → preset "Compact".
   Korte subpagina hero zonder witte scrim card om de tekst.

   v1.5.14: spacing systeem werkt nu correct (was hardcoded padding override).
   Image bg kan ook gebruikt worden — orange pattern is alleen fallback wanneer
   geen afbeelding geupload is.
   ═══════════════════════════════════════════════════════════════════════════ */

.s-bm-hero.s-bm-hero--preset-compact_brand {
    position: relative;
    color: var(--color-white);
    overflow: hidden;
    /* v1.5.16: spacing-bug gevonden. `.s-bm-hero--pagina { padding-block: clamp(2rem, 4vw, 4rem) }`
       (style.css regel 2130) komt NA de generieke `.ge-top { padding-top: 0 }` etc
       (regel 691). Zelfde specificity → source-order wint → pagina padding kreeg
       altijd voorrang ongeacht ge/k/m/gr keuze van de admin.
       Fix: reset padding-block hier en re-implement de spacing-klassen met
       hogere specificity gescoped onder compact_brand. */
    padding-block: 0;
    min-height: 0;
    display: block;
}

/* Re-implement spacing klassen met hogere specificity dan .s-bm-hero--pagina,
   alleen binnen compact_brand context. Admin's keuze in ACF werkt nu echt. */
.s-bm-hero.s-bm-hero--preset-compact_brand.ge-top    { padding-top: 0; }
.s-bm-hero.s-bm-hero--preset-compact_brand.k-top     { padding-top: var(--space-sm); }
.s-bm-hero.s-bm-hero--preset-compact_brand.m-top     { padding-top: var(--space-md); }
.s-bm-hero.s-bm-hero--preset-compact_brand.gr-top    { padding-top: var(--space-lg); }
.s-bm-hero.s-bm-hero--preset-compact_brand.ge-bottom { padding-bottom: 0; }
.s-bm-hero.s-bm-hero--preset-compact_brand.k-bottom  { padding-bottom: var(--space-sm); }
.s-bm-hero.s-bm-hero--preset-compact_brand.m-bottom  { padding-bottom: var(--space-md); }
.s-bm-hero.s-bm-hero--preset-compact_brand.gr-bottom { padding-bottom: var(--space-lg); }

/* Fallback bg: oranje brand kleur — alleen wanneer geen image/video geupload
   (= geen .s-bm-hero--has-media class). Met image bg gebruiken we de upload. */
.s-bm-hero.s-bm-hero--preset-compact_brand:not(.s-bm-hero--has-media) {
    background: var(--color-primary);
}

/* Diagonal stripe pattern — alleen wanneer geen image (fallback styling).
   Via ::before zodat geen extra HTML nodig is. */
.s-bm-hero.s-bm-hero--preset-compact_brand:not(.s-bm-hero--has-media)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 60px,
            rgba(255, 255, 255, 0.06) 60px,
            rgba(255, 255, 255, 0.06) 90px);
    pointer-events: none;
    z-index: 0;
}

/* Container boven het pattern */
.s-bm-hero.s-bm-hero--preset-compact_brand .c-bm-hero {
    position: relative;
    z-index: 1;
}

/* ── Content styling: simpel, geen scrim card ──
   Werkt ongeacht of bg een image is of de orange pattern fallback */
.s-bm-hero.s-bm-hero--preset-compact_brand .bm-hero-content {
    background: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* H1 stijl: uppercase, Futura bold */
.s-bm-hero.s-bm-hero--preset-compact_brand h1 {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.1;
}

/* Eyebrow + lead in subtiel transparant wit voor hiërarchie */
.s-bm-hero.s-bm-hero--preset-compact_brand .bm-eyebrow {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--gap-md);
}

.s-bm-hero.s-bm-hero--preset-compact_brand .lead {
    color: rgba(255, 255, 255, 0.92);
    margin-top: var(--gap-md);
}

/* Terug-link */
.s-bm-hero.s-bm-hero--preset-compact_brand .bm-back-link {
    color: var(--color-white);
    opacity: 0.9;
}

.s-bm-hero.s-bm-hero--preset-compact_brand .bm-back-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.s-bm-hero.s-bm-hero--preset-compact_brand .bm-buttons {
    margin-top: var(--gap-lg);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.6.0 — Producten: archive sidebar filter + single product specs
   ─────────────────────────────────────────────────────────────────────
   Based on Baymard 2025 + WisePIM 2026 benchmark research:
   - Sidebar links (desktop) — superior over horizontal toolbar voor B2B
   - Counts per filter optie
   - Mobile: collapsable details (bottom-sheet pattern als upgrade later)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Archive layout ─────────────────────────────────────────────────── */
.upi-products-archive__hero {
    padding-top: var(--space-md);
    padding-bottom: var(--space-sm);
}
.upi-products-archive__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    color: var(--color-secondary);
    margin: 0 0 var(--gap-sm);
}
.upi-products-archive__title-method {
    color: var(--color-primary-text);
    font-weight: 400;
}
.upi-products-archive__intro {
    max-width: 70ch;
    margin-bottom: var(--space-sm);
}

.upi-products-archive__footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-200);
}
.upi-products-archive__footer-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-secondary);
    margin: 0 0 var(--gap-md);
}

/* ── Sidebar + content layout ───────────────────────────────────────── */
.upi-products-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-md);
    align-items: start;
}
@media (max-width: 900px) {
    .upi-products-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Filter sidebar ─────────────────────────────────────────────────── */
.upi-products-sidebar {
    position: sticky;
    top: var(--space-md);
}
@media (max-width: 900px) {
    .upi-products-sidebar {
        position: static;
    }
}

.upi-products-filter {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    padding: var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.upi-products-filter__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: var(--gap-sm);
}
.upi-products-filter__title {
    font-family: var(--font-display);
    font-size: var(--fs-h5);
    color: var(--color-secondary);
    margin: 0;
}
.upi-products-filter__clear {
    font-size: 0.875rem;
    color: var(--color-primary-text);
    text-decoration: underline;
}
.upi-products-filter__clear:hover {
    color: var(--color-primary);
}

.upi-products-filter__group {
    border: none;
    padding: 0;
    margin: 0;
}
.upi-products-filter__legend {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--gap-xs);
}

.upi-products-filter__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.upi-products-filter__option label {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: 6px 4px;
    cursor: pointer;
    border-radius: 0;
    transition: background-color var(--transition-base);
    font-size: 0.9375rem;
}
.upi-products-filter__option label:hover {
    background: var(--color-cream);
}
.upi-products-filter__option input[type="radio"] {
    margin: 0;
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}
.upi-products-filter__label {
    flex: 1;
    color: var(--color-gray-900);
}
.upi-products-filter__count {
    color: var(--color-gray-500);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.upi-products-filter__option--reset {
    margin-top: var(--gap-xs);
    padding-top: var(--gap-xs);
    border-top: 1px dashed var(--color-gray-200);
}
.upi-products-filter__reset-link {
    color: var(--color-primary-text);
    text-decoration: underline;
    font-size: 0.8125rem;
    padding: 4px;
    display: inline-block;
}

.upi-products-filter__apply {
    width: 100%;
    justify-content: center;
    margin-top: var(--gap-xs);
}

/* ── Results content header ─────────────────────────────────────────── */
.upi-products-content__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gap-md);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-products-content__count {
    margin: 0;
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}
.upi-products-content__sort select {
    border: 1px solid var(--color-gray-300);
    background: #fff;
    padding: 6px 30px 6px 10px;
    font-family: var(--font-content);
    font-size: 0.9375rem;
    color: var(--color-gray-900);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

.upi-products-pagination {
    margin-top: var(--space-md);
    text-align: center;
}

.upi-products-empty {
    padding: var(--space-md) 0;
    text-align: center;
    color: var(--color-gray-600);
}

/* ── Product card ───────────────────────────────────────────────────── */
.upi-product-card__method {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-text);
    margin-bottom: var(--gap-xs);
}
.upi-product-card__code {
    margin: 0 0 var(--gap-xs) !important;
}
.upi-product-card__img--placeholder {
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
}
.upi-product-card__img--placeholder span {
    font-family: var(--font-display);
    color: var(--color-primary-text);
    font-size: 1.5rem;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.6.0 — Single product
   ═══════════════════════════════════════════════════════════════════════ */

/* Breadcrumbs */
.upi-single-product__breadcrumbs {
    padding-top: var(--gap-sm);
    padding-bottom: var(--gap-sm);
    font-size: 0.875rem;
    color: var(--color-gray-600);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    align-items: center;
}
.upi-single-product__breadcrumbs a {
    color: var(--color-gray-700);
    text-decoration: none;
}
.upi-single-product__breadcrumbs a:hover {
    color: var(--color-primary-text);
    text-decoration: underline;
}
.upi-single-product__breadcrumbs-current {
    color: var(--color-gray-900);
    font-weight: 500;
}

/* One-liner under code */
.upi-single-product__oneliner {
    color: var(--color-gray-700);
    font-size: 1.125rem;
    margin-top: var(--gap-xs);
    margin-bottom: 0;
}

/* Specs table — replaces oude 2-koloms repeater layout */
.upi-single-product__specs-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gap-md) 0;
    background: #fff;
}
.upi-single-product__specs-table th,
.upi-single-product__specs-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.upi-single-product__specs-table th {
    width: 200px;
    font-weight: 600;
    color: var(--color-gray-900);
    background: var(--color-cream);
}
@media (max-width: 600px) {
    .upi-single-product__specs-table th {
        width: 140px;
        font-size: 0.875rem;
    }
}
.upi-single-product__specs-table td p:first-child {
    margin-top: 0;
}
.upi-single-product__specs-table td p:last-child {
    margin-bottom: 0;
}

.upi-single-product__footnote {
    background: var(--color-gray-50, #fafafa);
    color: var(--color-gray-600);
    font-size: 0.8125rem;
    font-style: italic;
    padding: 8px 14px !important;
}

/* Indenter boilerplate sections */
.upi-single-product__machines,
.upi-single-product__upi-paragraaf,
.upi-single-product__indenter-extra {
    margin: var(--gap-md) 0;
    line-height: 1.6;
}
.upi-single-product__machines-intro {
    margin-bottom: var(--gap-xs);
}
.upi-single-product__machines-list {
    color: var(--color-gray-700);
}
.upi-single-product__trademark {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-top: var(--gap-sm);
    line-height: 1.5;
}

/* Set contents */
.upi-single-product__set-intro {
    font-weight: 500;
    margin-bottom: var(--gap-sm);
}
.upi-single-product__set-contains-label {
    font-weight: 600;
    margin-bottom: var(--gap-xs);
}
.upi-single-product__set-contents {
    margin: 0 0 var(--gap-md);
    padding-left: 1.5em;
}
.upi-single-product__set-contents li {
    margin-bottom: 6px;
    line-height: 1.5;
}
.upi-single-product__set-caldetails {
    background: var(--color-cream);
    padding: var(--gap-md);
    border-left: 3px solid var(--color-primary);
    margin: var(--gap-md) 0;
}

.upi-single-product__cta {
    margin-top: var(--space-md);
}

/* Downloads */
.upi-single-product__downloads ul {
    list-style: none;
    padding: 0;
    margin: var(--gap-md) 0;
}
.upi-single-product__downloads li {
    margin-bottom: var(--gap-xs);
}
.upi-single-product__downloads a {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: 8px 12px;
    background: var(--color-cream);
    color: var(--color-gray-900);
    text-decoration: none;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}
.upi-single-product__downloads a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

/* Gallery */
.upi-single-product__gallery h2,
.upi-single-product__downloads h2,
.upi-single-product__related h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-secondary);
    margin: var(--space-md) 0 var(--gap-md);
}
.upi-single-product__gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gap-sm);
}
.upi-single-product__gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-base);
}
.upi-single-product__gallery-item:hover img {
    transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.6.1 — Single product design fixes
   ─────────────────────────────────────────────────────────────────────
   Aanleiding: producten zonder afbeelding toonden een gigantische grijze
   leegheid (hero met gradient bg + padding). DETAILS was een klein pillkop.
   Quotation request leek een full-width orange band.
   ═══════════════════════════════════════════════════════════════════════ */

/* Override v1.6.0 hero — wordt nu alleen gerenderd ALS er een image is.
   Plus: 2-koloms grid (image left, text right) op desktop. */
.upi-single-product__hero {
    background: linear-gradient(180deg, #f4f3f1 0%, #e8e6e3 100%);
    padding: var(--space-md) 0;
}
.upi-single-product__hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: center;
    min-height: 320px;
}
@media (max-width: 800px) {
    .upi-single-product__hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        text-align: center;
    }
}
.upi-single-product__hero-img {
    text-align: center;
}
.upi-single-product__hero-img img {
    max-width: 100%;
    max-height: 360px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}
.upi-single-product__hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    align-items: flex-start;
}
@media (max-width: 800px) {
    .upi-single-product__hero-text { align-items: center; }
}
.upi-single-product__hero-text .upi-single-product__code {
    margin: 0;
}
.upi-single-product__hero-cta {
    margin-top: var(--gap-md);
    margin-bottom: 0;
}

/* Variant zonder image: compact intro, geen grijze leegheid */
.upi-single-product__intro--no-image {
    padding: var(--space-md) 0 var(--gap-md);
    border-bottom: 1px solid var(--color-gray-200);
}

/* DETAILS sectie-header (was klein pillkop, nu echte H2 band) */
.upi-single-product__details {
    padding-top: var(--space-md);
}
.upi-single-product__details-header {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-secondary);
    text-transform: none;
    margin: 0 0 var(--gap-md);
    padding-bottom: var(--gap-xs);
    border-bottom: 3px solid var(--color-primary);
    display: inline-block;
    background: none;
    letter-spacing: 0;
}
/* Reset oude v1.6.0 pill styling — anders erft die door */
.upi-single-product__details-header.upi-single-product__details-header {
    background: transparent;
    color: var(--color-secondary);
    padding: 0 0 var(--gap-xs);
    border-radius: 0;
}

/* CTA onder details (geen-image variant) */
.upi-single-product__cta-bottom {
    margin-top: var(--space-md);
    text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.6.1 — AJAX filter grid: loading state
   ═══════════════════════════════════════════════════════════════════════ */
[data-upi-grid] {
    transition: opacity var(--transition-base);
    min-height: 200px;
}
[data-upi-grid].is-loading {
    opacity: 0.55;
    pointer-events: none;
    position: relative;
}
[data-upi-grid].is-loading::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: upi-spin 0.8s linear infinite;
    z-index: 2;
}
@keyframes upi-spin {
    to { transform: translate(-50%, 0) rotate(360deg); }
}

/* AJAX paginatie clickable */
.upi-products-pagination .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid var(--color-gray-200);
    background: #fff;
    color: var(--color-gray-900);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all var(--transition-base);
}
.upi-products-pagination .page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}
.upi-products-pagination .page-numbers.current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.6.3 — Single product page herontwerp
   ─────────────────────────────────────────────────────────────────────
   B2B technical product page (Mitutoyo/Bruker/Thermo-style):
   - Consistente container width op alle secties
   - Hero card met breathing room (geen lege grijze blok meer)
   - About-sectie voor boilerplate (left-border accent)
   - Specs in clean table met group titles
   - Prominent bottom CTA card — niet meer touching footer
   - Padding-bottom op main zodat alles ademruimte heeft
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Page wrapper ─── */
.upi-product {
    background: var(--color-white);
    padding-bottom: var(--space-xl);  /* fix: niet meer tegen footer */
}
.upi-product > section,
.upi-product > nav {
    margin-bottom: var(--gap-lg);
}
.upi-product > section:last-child {
    margin-bottom: 0;
}

/* ─── Breadcrumb ─── */
.upi-product__breadcrumb {
    padding-top: var(--gap-md);
    padding-bottom: var(--gap-md);
    font-size: 0.875rem;
    color: var(--color-gray-700);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.upi-product__breadcrumb a {
    color: var(--color-gray-700);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base);
}
.upi-product__breadcrumb a:hover {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary-text);
}
.upi-product__breadcrumb > span[aria-hidden] {
    color: var(--color-gray-400);
}
.upi-product__breadcrumb > [aria-current="page"] {
    color: var(--color-gray-900);
    font-weight: 600;
}

/* ─── Hero card ─── */
.upi-product-hero {
    background: var(--color-cream, #FFF7ED);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-card, 0);
    padding: var(--space-lg);
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}
.upi-product--has-image .upi-product-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.upi-product--no-image .upi-product-hero {
    grid-template-columns: 1fr;
}
@media (max-width: 800px) {
    .upi-product--has-image .upi-product-hero {
        grid-template-columns: 1fr;
    }
}

.upi-product-hero__media {
    text-align: center;
}
.upi-product-hero__media img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

.upi-product-hero__info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    align-items: flex-start;
}
.upi-product-hero__code {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    color: var(--color-primary-text);
    margin: 0;
    line-height: 1.05;
}
.upi-product-hero__badge {
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4em 0.9em;
    margin: 0;
    display: inline-block;
}
.upi-product-hero__intro {
    font-size: 1.125rem;
    color: var(--color-gray-900);
    margin: 0;
    line-height: 1.5;
}
.upi-product-hero__actions {
    margin-top: var(--gap-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-md);
}
.upi-product-hero__scroll-link {
    color: var(--color-gray-700);
    font-size: 0.875rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
}
.upi-product-hero__scroll-link:hover {
    color: var(--color-primary-text);
    border-bottom-color: var(--color-primary);
}

/* ─── About sectie (boilerplate, machine compat, etc.) ─── */
.upi-product-about {
    border-left: 3px solid var(--color-primary);
    padding: var(--gap-md) var(--space-md);
    background: #fafafa;
}
.upi-product-about__block + .upi-product-about__block {
    margin-top: var(--gap-md);
}
.upi-product-about__lede {
    margin: 0 0 var(--gap-xs);
    color: var(--color-gray-900);
    font-weight: 500;
    line-height: 1.5;
}
.upi-product-about__body {
    margin: 0;
    color: var(--color-gray-800);
    line-height: 1.6;
}
.upi-product-about__set-label {
    margin: var(--gap-md) 0 var(--gap-xs);
    color: var(--color-gray-900);
}
.upi-product-about__set-list {
    margin: 0;
    padding-left: var(--space-md);
    list-style-type: disc;
    color: var(--color-gray-800);
    line-height: 1.6;
}
.upi-product-about__set-list li + li { margin-top: 0.25rem; }
.upi-product-about__trademark {
    margin: var(--gap-md) 0 0;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

/* ─── Specs section ─── */
.upi-product-specs__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-secondary);
    margin: 0 0 var(--gap-md);
    padding-bottom: var(--gap-xs);
    border-bottom: 3px solid var(--color-primary);
    display: inline-block;
}
.upi-product-specs__table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-gray-200);
}
.upi-product-specs__table th,
.upi-product-specs__table td {
    padding: 1rem 1.25rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.upi-product-specs__table tr:last-child th,
.upi-product-specs__table tr:last-child td {
    border-bottom: none;
}
.upi-product-specs__table th {
    width: 30%;
    min-width: 200px;
    background: var(--color-cream, #FFF7ED);
    font-weight: 600;
    color: var(--color-gray-900);
}
.upi-product-specs__table td {
    color: var(--color-gray-800);
    background: var(--color-white);
}
.upi-product-specs__footnote {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    font-style: italic;
}

/* ─── Downloads ─── */
.upi-product-downloads__title,
.upi-product-gallery__title,
.upi-product-related__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-secondary);
    margin: 0 0 var(--gap-md);
    padding-bottom: var(--gap-xs);
    border-bottom: 3px solid var(--color-primary);
    display: inline-block;
}
.upi-product-downloads__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap-sm);
}
.upi-product-downloads__item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-sm) var(--space-sm);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-900);
    text-decoration: none;
    transition: all var(--transition-base);
}
.upi-product-downloads__item a:hover {
    border-color: var(--color-primary);
    background: var(--color-cream);
}
.upi-product-downloads__icon {
    color: var(--color-primary-text);
    font-size: 1.25rem;
    font-weight: bold;
}

/* ─── Gallery ─── */
.upi-product-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gap-sm);
}
.upi-product-gallery__item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--color-gray-200);
}

/* ─── Bottom Quote CTA — PROMINENT card ─── */
.upi-product-quote {
    background: linear-gradient(135deg, var(--color-cream, #FFF7ED) 0%, #FFEAD2 100%);
    border: 1px solid var(--color-primary);
    padding: var(--space-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    align-items: center;
}
@media (max-width: 800px) {
    .upi-product-quote {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.upi-product-quote__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-secondary);
    margin: 0 0 var(--gap-xs);
}
.upi-product-quote__lede {
    margin: 0;
    color: var(--color-gray-800);
    font-size: 1rem;
    line-height: 1.5;
}
.upi-product-quote__cta {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    align-items: flex-end;
}
@media (max-width: 800px) {
    .upi-product-quote__cta { align-items: center; }
}
.upi-product-quote__phone {
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base);
}
.upi-product-quote__phone:hover {
    color: var(--color-primary-text);
    border-bottom-color: var(--color-primary);
}

/* ─── Override de v1.6.1 hero styles die nu obsolete zijn ─── */
.upi-single-product__hero,
.upi-single-product__intro,
.upi-single-product__intro--no-image,
.upi-single-product__details,
.upi-single-product__details-header {
    /* Reset alles — niet meer in gebruik vanaf v1.6.3 */
    all: unset;
    display: revert;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.2 — Quote drawer + Quote toggle in header
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Quote toggle button in header ─── */
.upi-quote-toggle {
    position: relative;
    background: transparent;
    border: none;
    color: var(--color-gray-900);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--transition-base);
}
.upi-quote-toggle:hover {
    color: var(--color-primary-text);
}
.upi-quote-toggle-label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.upi-quote-count {
    position: absolute;
    top: 0.1rem;
    left: 1.5rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.upi-quote-count[hidden] { display: none !important; }

@media (max-width: 800px) {
    .upi-quote-toggle-label { display: none; }
}

/* ─── Drawer overlay + panel ─── */
.upi-quote-drawer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.25s;
}
.upi-quote-drawer[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
}
.upi-quote-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--transition-base);
}
.upi-quote-drawer[aria-hidden="false"] .upi-quote-drawer__backdrop {
    background: rgba(0, 0, 0, 0.4);
}
.upi-quote-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100%);
    background: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}
.upi-quote-drawer[aria-hidden="false"] .upi-quote-drawer__panel {
    transform: translateX(0);
}

body.upi-quote-drawer-open { overflow: hidden; }

/* ─── Drawer header ─── */
.upi-quote-drawer__head {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-quote-drawer__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.upi-quote-drawer__close {
    background: transparent;
    border: none;
    color: var(--color-gray-700);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color var(--transition-base);
}
.upi-quote-drawer__close:hover { color: var(--color-primary-text); }

/* ─── Drawer body ─── */
.upi-quote-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-md);
}

/* ─── Empty state ─── */
.upi-quote-drawer__empty {
    text-align: center;
    padding: var(--space-lg) var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
}
.upi-quote-drawer__empty-icon {
    color: var(--color-gray-400);
    margin-bottom: var(--gap-xs);
}
.upi-quote-drawer__empty-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--color-gray-900);
    margin: 0;
}
.upi-quote-drawer__empty-text {
    color: var(--color-gray-700);
    margin: 0 0 var(--gap-md);
    line-height: 1.5;
}

/* ─── Items list ─── */
.upi-quote-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.upi-quote-drawer__item {
    display: flex;
    gap: var(--gap-sm);
    padding: var(--gap-md) 0;
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-quote-drawer__item:last-child { border-bottom: none; }
.upi-quote-drawer__item-link {
    flex: 0 0 80px;
    height: 80px;
    background: var(--color-cream);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upi-quote-drawer__item-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.upi-quote-drawer__item-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.upi-quote-drawer__item-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    text-decoration: none;
    line-height: 1.3;
}
.upi-quote-drawer__item-title:hover { color: var(--color-primary-text); }
.upi-quote-drawer__item-meta {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    margin: 0;
}
.upi-quote-drawer__item-controls {
    margin-top: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}
.upi-quote-drawer__item-qty { color: var(--color-gray-700); }
.upi-quote-drawer__item-remove {
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color var(--transition-base);
    line-height: 0;
}
.upi-quote-drawer__item-remove:hover { color: var(--color-primary-text); }

/* ─── Footer ─── */
.upi-quote-drawer__foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-gray-200);
    padding: var(--space-md);
    background: var(--color-cream);
}
.upi-quote-drawer__note {
    margin: 0 0 var(--gap-sm);
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    text-align: center;
    line-height: 1.4;
}
.upi-quote-drawer__submit {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* ─── WC add-to-cart form binnen onze hero ─── */
.upi-product-hero__form {
    margin: var(--gap-md) 0;
    width: 100%;
    max-width: 420px;
}
.upi-product-hero__form .quantity {
    display: inline-flex;
    align-items: center;
    margin-right: var(--gap-sm);
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
}
.upi-product-hero__form .quantity input[type="number"] {
    width: 60px;
    padding: 0.6rem 0.5rem;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    -moz-appearance: textfield;
}
.upi-product-hero__form .quantity input::-webkit-outer-spin-button,
.upi-product-hero__form .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.upi-product-hero__form .single_add_to_cart_button,
.upi-product-hero__form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85em 1.5em;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    border-radius: var(--radius-button, 0);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-base);
    text-decoration: none;
}
.upi-product-hero__form .single_add_to_cart_button:hover,
.upi-product-hero__form button[type="submit"]:hover {
    background: #d97f00;
}
.upi-product-hero__form .single_add_to_cart_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* WC variation dropdown */
.upi-product-hero__form table.variations {
    width: 100%;
    margin: 0 0 var(--gap-sm);
    border: none;
}
.upi-product-hero__form table.variations th,
.upi-product-hero__form table.variations td {
    border: none;
    padding: 0.4rem 0;
    vertical-align: middle;
}
.upi-product-hero__form table.variations label {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-right: var(--gap-sm);
}
.upi-product-hero__form table.variations select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    font-family: var(--font-content);
    font-size: 0.9375rem;
    cursor: pointer;
}
.upi-product-hero__form .reset_variations {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-left: 0.5rem;
    text-decoration: none;
}
.upi-product-hero__form .single_variation_wrap {
    margin-top: var(--gap-sm);
}
/* WC adds price within variation — hide */
.upi-product-hero__form .woocommerce-variation-price,
.upi-product-hero__form .price {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.4 — Archive (Body & Fit grid) + Single (2-koloms layout)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Archive header ─── */
.upi-archive {
    padding: 0 0 var(--space-lg);
}
.upi-archive__head {
    padding: var(--space-md) 0;
}
.upi-archive__breadcrumb {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    margin-bottom: var(--gap-md);
}
.upi-archive__breadcrumb a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color var(--transition-base);
}
.upi-archive__breadcrumb a:hover { color: var(--color-primary-text); }
.upi-archive__breadcrumb [aria-current="page"] { color: var(--color-gray-900); font-weight: 600; }
.upi-archive__breadcrumb span[aria-hidden="true"] { margin: 0 0.4em; color: var(--color-gray-400); }

.upi-archive__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 var(--gap-sm);
}
.upi-archive__lede {
    font-size: 1.0625rem;
    color: var(--color-gray-700);
    max-width: 60ch;
    line-height: 1.5;
}

/* ─── 2-koloms layout ─── */
.upi-archive__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-md);
    align-items: start;
}
@media (max-width: 900px) {
    .upi-archive__layout {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

/* ─── Filter sidebar ─── */
.upi-filter {
    background: var(--color-cream);
    padding: var(--space-sm);
    border: 1px solid var(--color-gray-200);
    position: sticky;
    top: var(--space-md);
}
.upi-filter__heading {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-700);
    margin: 0 0 var(--gap-sm);
}
.upi-filter__all {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-gray-900);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--gap-sm);
    transition: color var(--transition-base);
}
.upi-filter__all:hover,
.upi-filter__all.is-active { color: var(--color-primary-text); }
.upi-filter__cats {
    list-style: none;
    margin: 0;
    padding: 0;
}
.upi-filter__cat { margin-bottom: var(--gap-xs); }
.upi-filter__cat-link {
    display: block;
    padding: 0.4rem 0;
    color: var(--color-gray-900);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-base);
}
.upi-filter__cat-link:hover,
.upi-filter__cat-link.is-active { color: var(--color-primary-text); }
.upi-filter__methods {
    list-style: none;
    margin: 0 0 var(--gap-sm) 0;
    padding: 0 0 0 var(--gap-sm);
    border-left: 2px solid var(--color-gray-200);
}
.upi-filter__method-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color var(--transition-base);
}
.upi-filter__method-link:hover,
.upi-filter__method-link.is-active {
    color: var(--color-primary-text);
    font-weight: 600;
}
.upi-filter__count {
    color: var(--color-gray-500);
    font-size: 0.8125rem;
}

/* ─── Toolbar boven grid ─── */
.upi-archive__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--gap-md);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--gap-md);
}
.upi-archive__count {
    margin: 0;
    color: var(--color-gray-700);
    font-size: 0.9375rem;
}
.upi-archive__toolbar .woocommerce-ordering select {
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    font-family: var(--font-content);
    font-size: 0.875rem;
}

/* ─── Product grid ─── */
.upi-archive__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}
@media (max-width: 900px) {
    .upi-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .upi-archive__grid { grid-template-columns: 1fr; }
}

.upi-archive__card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.upi-archive__card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.upi-archive__card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1 1 auto;
}
.upi-archive__card-media {
    background: var(--color-cream);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.upi-archive__card-img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform var(--transition-base);
}
.upi-archive__card:hover .upi-archive__card-img {
    transform: scale(1.05);
}
.upi-archive__card-img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-cream);
}
.upi-archive__card-body {
    padding: var(--gap-sm) var(--gap-md);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.upi-archive__card-badge {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-text);
}
.upi-archive__card-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
    line-height: 1.3;
}
.upi-archive__card-intro {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.upi-archive__card-cta {
    padding: 0 var(--gap-md) var(--gap-md);
}
.upi-archive__card-button {
    display: block;
    text-align: center;
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background var(--transition-base);
}
.upi-archive__card-button:hover {
    background: #d97f00;
    color: var(--color-white);
}

/* ─── Pagination — alleen <a> en <span> items, niet de <ul> ─── */
.upi-archive__pagination {
    margin-top: var(--space-md);
    display: flex;
    justify-content: center;
}
.upi-archive__pagination ul.page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
}
.upi-archive__pagination ul.page-numbers li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
}
.upi-archive__pagination ul.page-numbers li::before,
.upi-archive__pagination ul.page-numbers li::marker {
    content: none !important;
    display: none !important;
}
/* INDIVIDUELE ITEMS — alleen <a> en <span>, NIET de <ul class="page-numbers"> */
.upi-archive__pagination a.page-numbers,
.upi-archive__pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.6rem;
    color: var(--color-gray-700);
    text-decoration: none;
    border: 1px solid var(--color-gray-200);
    background: white;
    transition: border-color var(--transition-base), color var(--transition-base);
    font-size: 0.9375rem;
    font-weight: 500;
}
/* Hover: subtiele border + text color, NIET full background */
.upi-archive__pagination a.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: white;
}
/* Active (current page): full oranje fill */
.upi-archive__pagination span.page-numbers.current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-weight: 600;
}
/* "…" dots: geen border/background */
.upi-archive__pagination .page-numbers.dots {
    border: 0;
    background: transparent;
    color: var(--color-gray-500);
}
.upi-archive__empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-gray-700);
    background: var(--color-cream);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.4 — Single product Body & Fit layout (vervangt v1.7.2 hero)
   ═══════════════════════════════════════════════════════════════════════ */

.upi-product--bf {
    padding-bottom: var(--space-lg);
}
.upi-product__breadcrumb {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    margin: var(--space-md) auto var(--gap-md);
}
.upi-product__breadcrumb a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color var(--transition-base);
}
.upi-product__breadcrumb a:hover { color: var(--color-primary-text); }
.upi-product__breadcrumb [aria-current="page"] { color: var(--color-gray-900); font-weight: 600; }
.upi-product__breadcrumb span[aria-hidden="true"] { margin: 0 0.4em; color: var(--color-gray-400); }

/* ─── Hero grid: gallery | info ─── */
.upi-product__hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-md) 0;
}
@media (max-width: 900px) {
    .upi-product__hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

/* WC product gallery (links) */
.upi-product__gallery {
    position: sticky;
    top: var(--space-md);
}
.upi-product__gallery .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
}
.upi-product__gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    background: var(--color-cream);
}
.upi-product__gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    gap: 0.5rem !important;
    margin: var(--gap-sm) 0 0 !important;
    padding: 0 !important;
}
.upi-product__gallery .flex-control-thumbs li {
    width: 80px !important;
    flex: 0 0 80px !important;
    margin: 0 !important;
}
.upi-product__gallery .flex-control-thumbs img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--color-cream);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-base);
    opacity: 0.7;
}
.upi-product__gallery .flex-control-thumbs img:hover,
.upi-product__gallery .flex-control-thumbs img.flex-active {
    border-color: var(--color-primary);
    opacity: 1;
}

/* Product info (rechts) */
.upi-product__info {
    padding: 0;
}
.upi-product__code {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 0.25rem;
    line-height: 1.1;
}
.upi-product__badge {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-text);
    margin: 0 0 var(--gap-md);
}
.upi-product__intro {
    font-size: 1.125rem;
    color: var(--color-gray-900);
    line-height: 1.4;
    margin: 0 0 var(--gap-md);
}
.upi-product__bullets {
    list-style: none;
    margin: 0 0 var(--gap-md);
    padding: 0;
}
.upi-product__bullets li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.4rem;
    color: var(--color-gray-900);
    line-height: 1.5;
}
.upi-product__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.upi-product__buy {
    padding: var(--gap-md) 0;
    margin: var(--gap-md) 0;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-product__buy form.cart,
.upi-product__buy form.variations_form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gap-sm);
    margin: 0;
}
/* v1.7.4.2: force-show single_variation_wrap (WC hides by default until
   all attributes selected, but onze UX wil de qty + button van begin af
   zichtbaar). Button is initially disabled (WC re-enabled na selectie). */
.upi-product__buy .single_variation_wrap {
    display: block !important;
    flex: 1 1 100%;
    margin-top: var(--gap-sm);
}
.upi-product__buy .variations_button {
    display: flex !important;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--gap-sm);
}
.upi-product__buy table.variations {
    flex: 0 0 100%;
    margin: 0 0 var(--gap-sm);
    border: none;
}
.upi-product__buy table.variations th,
.upi-product__buy table.variations td {
    border: none;
    padding: 0.4rem 0;
    vertical-align: middle;
}
.upi-product__buy table.variations th {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    width: 140px;
}
.upi-product__buy table.variations select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    font-family: var(--font-content);
    font-size: 0.9375rem;
    cursor: pointer;
}
.upi-product__buy .reset_variations {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-left: 0.5rem;
    text-decoration: none;
}
.upi-product__buy .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
}
.upi-product__buy .quantity input[type="number"] {
    width: 60px;
    padding: 0.65rem 0.5rem;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    -moz-appearance: textfield;
}
.upi-product__buy .quantity input::-webkit-outer-spin-button,
.upi-product__buy .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.upi-product__buy .single_add_to_cart_button,
.upi-product__buy button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85em 1.6em;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    cursor: pointer;
    transition: background var(--transition-base);
    flex: 1 1 auto;
}
.upi-product__buy .single_add_to_cart_button:hover {
    background: #d97f00;
}
.upi-product__buy .single_add_to_cart_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* hide WC price in variation */
.upi-product__buy .woocommerce-variation-price,
.upi-product__buy .price { display: none !important; }

.upi-product__note {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.4;
}

/* Section titles */
.upi-product__section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 var(--gap-md);
    padding-bottom: var(--gap-sm);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* About-sectie + Specs */
.upi-product__about,
.upi-product__specs {
    padding: var(--space-md) 0;
}
.upi-product__set-list {
    list-style: disc;
    margin: 0 0 var(--gap-md) 1.5rem;
    padding: 0;
}
.upi-product__set-list li { margin-bottom: 0.4rem; }
.upi-product__trademark {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-top: var(--gap-md);
}
.upi-product__specs-table {
    width: 100%;
    border-collapse: collapse;
    max-width: 800px;
}
.upi-product__specs-table tr {
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-product__specs-table th {
    text-align: left;
    padding: var(--gap-sm) var(--gap-md) var(--gap-sm) 0;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-secondary);
    width: 30%;
    vertical-align: top;
}
.upi-product__specs-table td {
    padding: var(--gap-sm) 0;
    color: var(--color-gray-900);
    line-height: 1.5;
    vertical-align: top;
}
.upi-product__specs-footnote {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    padding: var(--gap-sm) 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.4.3 — View Transitions API (smooth fade tussen pages)
   ═══════════════════════════════════════════════════════════════════════ */
@view-transition {
    navigation: auto;
}

/* Fade animation voor pages die View Transitions ondersteunen */
::view-transition-old(root) {
    animation: 150ms cubic-bezier(0.4, 0, 1, 1) both upi-fade-out;
}
::view-transition-new(root) {
    animation: 200ms cubic-bezier(0, 0, 0.2, 1) 50ms both upi-fade-in;
}
@keyframes upi-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes upi-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5 — Single product layout via WC's standaard structure
   (Geen template overrides meer — alleen CSS Grid op WC's divs)
   ═══════════════════════════════════════════════════════════════════════ */

/* Page-wide container */
.single-product main.site-main,
.single-product .woocommerce-notices-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

/* WC's main product div → 2-koloms grid (gallery | summary) */
.single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}
@media (max-width: 900px) {
    .single-product div.product {
        grid-template-columns: 1fr;
    }
}

.single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
.single-product div.product .summary {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
/* About + Specs sections worden via woocommerce_after_single_product_summary
   gerendered. Deze landen na de div.product. We gebruiken hier GEEN grid-area
   ("after") want bij MEERDERE elementen met dezelfde grid-area gaan ze
   overlappen — dat was de bug die specs-tekst over elkaar liet renderen. */
.single-product .upi-product__about,
.single-product .upi-product__specs {
    display: block;
    width: 100%;
    max-width: var(--container-max);
    margin: var(--space-md) auto 0;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
    clear: both;
    position: relative;
}
/* Border-top als visuele scheiding tussen secties */
.single-product .upi-product__specs {
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--space-md);
}

/* Gallery (left column) */
.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    background: var(--color-cream);
}
.single-product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    gap: 0.5rem !important;
    margin: var(--gap-sm) 0 0 !important;
    padding: 0 !important;
}
.single-product .flex-control-thumbs li {
    width: 80px !important;
    flex: 0 0 80px !important;
    margin: 0 !important;
}
.single-product .flex-control-thumbs img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--color-cream);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-base);
    opacity: 0.7;
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
    border-color: var(--color-primary);
    opacity: 1;
}

/* Summary (right column) — title + badge + excerpt + bullets + ATC + note */
.single-product .summary .upi-product__code,
.single-product .summary .product_title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 0.25rem;
    line-height: 1.1;
}
.single-product .summary .upi-product__badge {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-text);
    margin: 0 0 var(--gap-md);
}
.single-product .summary .woocommerce-product-details__short-description {
    font-size: 1.125rem;
    color: var(--color-gray-900);
    line-height: 1.4;
    margin: 0 0 var(--gap-md);
}
.single-product .summary .woocommerce-product-details__short-description p {
    margin: 0 0 0.5rem;
}
.single-product .summary .upi-product__bullets {
    list-style: none;
    margin: 0 0 var(--gap-md);
    padding: 0;
}
.single-product .summary .upi-product__bullets li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.4rem;
    color: var(--color-gray-900);
    line-height: 1.5;
}
.single-product .summary .upi-product__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* WC's ATC form — styled */
.single-product .summary form.cart,
.single-product .summary form.variations_form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gap-sm);
    margin: var(--gap-md) 0;
    padding: var(--gap-md) 0;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Force single_variation_wrap visible (WC verbergt 'm standaard) */
.single-product .summary form.variations_form .single_variation_wrap {
    display: block !important;
    flex: 1 1 100%;
    margin-top: var(--gap-sm);
}
.single-product .summary form.variations_form .variations_button {
    display: flex !important;
    align-items: center;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

/* Variations table */
.single-product .summary table.variations {
    flex: 1 1 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
}
.single-product .summary table.variations th,
.single-product .summary table.variations td {
    border: none;
    padding: 0.4rem 0;
    vertical-align: middle;
}
.single-product .summary table.variations th {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    width: 140px;
    text-align: left;
}
.single-product .summary table.variations select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    font-family: var(--font-content);
    font-size: 0.9375rem;
    cursor: pointer;
}
.single-product .summary .reset_variations {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-left: 0.5rem;
    text-decoration: underline;
}

/* Quantity */
.single-product .summary .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
}
.single-product .summary .quantity input[type="number"] {
    width: 60px;
    padding: 0.65rem 0.5rem;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    -moz-appearance: textfield;
}
.single-product .summary .quantity input::-webkit-outer-spin-button,
.single-product .summary .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* THE ATC button */
.single-product .summary .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85em 1.6em;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    cursor: pointer;
    transition: background var(--transition-base);
    flex: 1 1 auto;
    min-width: 200px;
    text-decoration: none;
}
.single-product .summary .single_add_to_cart_button:hover {
    background: #d97f00;
    color: var(--color-white);
}
.single-product .summary .single_add_to_cart_button:disabled,
.single-product .summary .single_add_to_cart_button.disabled,
.single-product .summary .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hide price (B2B quote-only) */
.single-product .summary .price,
.single-product .summary .woocommerce-variation-price {
    display: none !important;
}
/* Hide stock indicators */
.single-product .summary .stock,
.single-product .summary .woocommerce-variation-availability {
    display: none !important;
}

/* Quote note */
.single-product .summary .upi-product__note {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.4;
    flex: 1 1 100%;
}

/* About + Specs sections (full-width onder) */
.upi-product__section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--gap-md);
    padding-bottom: var(--gap-sm);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}
.upi-product__about,
.upi-product__specs {
    padding: var(--space-md) 0;
}
.upi-product__set-list {
    list-style: disc;
    margin: 0 0 var(--gap-md) 1.5rem;
    padding: 0;
}
.upi-product__set-list li { margin-bottom: 0.4rem; }
.upi-product__trademark {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-top: var(--gap-md);
}
.upi-product__specs-table {
    width: 100%;
    border-collapse: collapse;
    max-width: 800px;
}
.upi-product__specs-table tr {
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-product__specs-table th {
    text-align: left;
    padding: var(--gap-sm) var(--gap-md) var(--gap-sm) 0;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    width: 30%;
    vertical-align: top;
}
.upi-product__specs-table td {
    padding: var(--gap-sm) 0;
    color: var(--color-gray-900);
    line-height: 1.5;
    vertical-align: top;
}
.upi-product__specs-footnote {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    padding: var(--gap-sm) 0 !important;
}

/* Remove WC tabs (we removed via hooks but defensive) */
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .upsells {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5 — Verwijder blauw uit ALLE titels en headings
   UPI heeft geen blauw — alleen oranje (#F39200) als accent
   
   v1.8.8.9 — .upi-archive__title en .upi-archive__head h1 zijn uit deze
   multi-rule weggehaald. Die selectors maakten de archive H1 grijs met
   !important + specificity (0,1,1) wat alle latere "oranje" overrides
   tegenhield. Archive H1 hoort sinds v1.8.8.0 oranje (klant wens, brand
   alignment). Override staat onderaan dit bestand in v1.8.8.1 sectie.
   ═══════════════════════════════════════════════════════════════════════ */
.upi-product__code,
.upi-product__section-title,
.upi-product__specs-table th {
    color: var(--color-gray-900) !important;
}

/* Quote drawer title ook zwart maken */
.upi-quote-drawer__title {
    color: var(--color-gray-900) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.2 — Layout fixes
   ═══════════════════════════════════════════════════════════════════════ */

/* Force grid op .upi-archive__grid — WC's default float-CSS verstoort anders */
ul.upi-archive__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--gap-md) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    clear: both;
}
@media (max-width: 900px) {
    ul.upi-archive__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 540px) {
    ul.upi-archive__grid {
        grid-template-columns: 1fr !important;
    }
}
ul.upi-archive__grid > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    list-style: none !important;
}
/* Override WC's .woocommerce ul.products li.product specifically */
.woocommerce ul.upi-archive__grid.products li.product,
.upi-archive__grid li.upi-archive__card {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0; /* allow shrinking inside grid */
}

/* Card button mag niet afkappen */
.upi-archive__card-button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Title fix: minder agressieve word-break, normale word-wrap */
.upi-archive__card-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    word-break: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.3 — Filter sidebar redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset oude v1.7.4 filter styles */
.upi-filter__cat,
.upi-filter__cats,
.upi-filter__methods,
.upi-filter__method,
.upi-filter__cat-link,
.upi-filter__method-link {
    all: revert;
}

.upi-filter {
    background: var(--color-white);
    padding: 0;
    border: 1px solid var(--color-gray-200);
    position: sticky;
    top: var(--space-md);
    font-family: var(--font-content);
}

/* Header */
.upi-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-md) var(--gap-md);
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-filter__heading {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-900);
    margin: 0;
}
.upi-filter__clear {
    font-size: 0.8125rem;
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.upi-filter__clear:hover {
    color: var(--color-gray-900);
}

/* All products */
.upi-filter__all {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem var(--gap-md);
    color: var(--color-gray-900);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--color-gray-200);
    transition: background var(--transition-base);
}
.upi-filter__all:hover {
    background: var(--color-cream);
    color: var(--color-gray-900);
}
.upi-filter__all.is-active {
    color: var(--color-primary-text);
    background: var(--color-cream);
}

/* Section */
.upi-filter__section {
    padding: var(--gap-md) 0;
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-filter__section:last-child {
    border-bottom: none;
}
.upi-filter__section-title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    padding: 0 var(--gap-md);
    color: var(--color-gray-700);
}
.upi-filter__section-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}
.upi-filter__section-title a:hover,
.upi-filter__section-title a.is-active {
    color: var(--color-primary-text);
}

/* Methods list */
.upi-filter__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.upi-filter__item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.upi-filter__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem var(--gap-md);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: background var(--transition-base), color var(--transition-base);
}
.upi-filter__link:hover {
    background: var(--color-cream);
    color: var(--color-gray-900);
}
.upi-filter__link.is-active {
    color: var(--color-primary-text);
    background: var(--color-cream);
    font-weight: 600;
}

/* Indicator dot (visual cue voor actieve filter) */
.upi-filter__indicator {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-gray-300);
    border-radius: 50%;
    flex: 0 0 14px;
    background: var(--color-white);
    transition: border-color var(--transition-base), background var(--transition-base);
    position: relative;
}
.upi-filter__link:hover .upi-filter__indicator,
.upi-filter__all:hover .upi-filter__indicator {
    border-color: var(--color-primary);
}
.upi-filter__link.is-active .upi-filter__indicator,
.upi-filter__all.is-active .upi-filter__indicator {
    border-color: var(--color-primary);
    background: var(--color-primary);
}
.upi-filter__link.is-active .upi-filter__indicator::after,
.upi-filter__all.is-active .upi-filter__indicator::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--color-white);
    border-radius: 50%;
}

.upi-filter__label {
    flex: 1 1 auto;
}
.upi-filter__count {
    color: var(--color-gray-500);
    font-size: 0.8125rem;
    flex: 0 0 auto;
}
.upi-filter__link.is-active .upi-filter__count {
    color: var(--color-primary-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.3 — Specs section polish (foto's tonen rare layout-issue)
   ═══════════════════════════════════════════════════════════════════════ */
.upi-product__specs-table {
    margin: 0;
}
.upi-product__specs-table tr:first-child th,
.upi-product__specs-table tr:first-child td {
    padding-top: 0;
}
.upi-product__specs-table tr:last-child {
    border-bottom: none;
}
/* In screenshot 1 zag ik kort tekst overlap met grijze waarden — relative
   positioning forceren om dat te voorkomen */
.upi-product__specs-table th,
.upi-product__specs-table td {
    position: static !important;
    transform: none !important;
}

/* v1.8.1.5: oude .upi-archive__archive-text-top rules verwijderd.
   Vervangen door clean .upi-archive__intro / .upi-archive__outro
   (zie v1.8.1.5 sectie onderaan). */

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.3 — Card button — override WC's default button styles
   ═══════════════════════════════════════════════════════════════════════ */
.upi-archive__card-button.button,
.upi-archive__card-button.add_to_cart_button {
    /* Override WC's default green/colored button */
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.7rem 1rem !important;
    font-family: var(--font-display) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    transition: background var(--transition-base) !important;
    box-shadow: none !important;
}
.upi-archive__card-button.button:hover,
.upi-archive__card-button.add_to_cart_button:hover {
    background: #d97f00 !important;
    color: var(--color-white) !important;
}

/* WC's "added" state ook stylen */
.upi-archive__card .added_to_cart {
    display: block !important;
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
    color: var(--color-primary-text);
    font-size: 0.8125rem;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.4 — Layout containers, typography, polish
   ═══════════════════════════════════════════════════════════════════════ */

/* === FIX: archive header + content binnen 1280px container === */
.upi-archive,
.upi-product--bf,
.single-product main.site-main,
.single-product .woocommerce-notices-wrapper {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    box-sizing: border-box;
}

/* Inner header / layout — geen extra container padding nesten */
.upi-archive > .breedte-normaal,
.upi-archive__head.breedte-normaal,
.upi-archive__layout.breedte-normaal {
    max-width: none;
    padding-inline: var(--container-padding);
}

/* === H1 typografie en spacing === */
.upi-archive__title {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
    margin: 0 0 var(--gap-sm) !important;
    line-height: 1.15;
}
.upi-archive__head {
    padding-top: var(--gap-md) !important;
    padding-bottom: var(--gap-md) !important;
}
.upi-archive__breadcrumb {
    margin-bottom: var(--gap-xs) !important;
    font-size: 0.875rem;
}

/* === FIX: eerste leeg item — WC's clearfix pseudo-element verwijderen === */
ul.upi-archive__grid::before,
ul.upi-archive__grid::after,
.woocommerce ul.upi-archive__grid::before,
.woocommerce ul.upi-archive__grid::after {
    content: none !important;
    display: none !important;
}

/* === Card secondary CTA — geen oranje button meer, subtle link === */
.upi-archive__card-cta {
    padding: 0 var(--gap-md) var(--gap-md) !important;
    margin: 0 !important;
}
.upi-archive__card-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    color: var(--color-gray-900);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--transition-base), gap var(--transition-base);
}
.upi-archive__card-link-cta:hover {
    color: var(--color-primary-text);
    gap: 0.7rem;
}
.upi-archive__card-arrow {
    transition: transform var(--transition-base);
}
.upi-archive__card-link-cta:hover .upi-archive__card-arrow {
    transform: translateX(2px);
}

/* === FIX: single product ATC button moet oranje, niet WC default === */
.single-product .summary .single_add_to_cart_button,
.single-product .summary button.single_add_to_cart_button,
.single-product .summary form.cart button.button,
.single-product .summary form.variations_form button.button,
.single-product .summary .button.alt {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.single-product .summary .single_add_to_cart_button:hover,
.single-product .summary button.single_add_to_cart_button:hover {
    background: #d97f00 !important;
    background-color: #d97f00 !important;
    color: var(--color-white) !important;
}

/* === Add to cart NOTICE — UPI styling === */
.woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
    background: var(--color-cream) !important;
    border: none !important;
    border-left: 4px solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding: var(--gap-md) var(--gap-md) var(--gap-md) calc(var(--gap-md) + 1.5rem) !important;
    color: var(--color-gray-900) !important;
    margin: 0 0 var(--gap-md) !important;
    box-shadow: none !important;
    font-family: var(--font-content);
    font-size: 0.9375rem;
    line-height: 1.5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    flex-wrap: wrap;
}
.woocommerce-message::before {
    content: '✓' !important;
    position: absolute !important;
    left: var(--gap-md) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-primary) !important;
    background: transparent !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
}
.woocommerce-message .button,
.woocommerce-message a.button.wc-forward {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: 0.6rem 1.2rem !important;
    font-family: var(--font-display) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: background var(--transition-base) !important;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button.wc-forward:hover {
    background: #d97f00 !important;
}

/* === Quote drawer polish === */
.upi-quote-drawer__title,
.upi-quote-drawer h2 {
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--color-gray-900) !important;
}
.upi-quote-drawer__close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--color-gray-700);
    transition: color var(--transition-base);
}
.upi-quote-drawer__close:hover {
    color: var(--color-gray-900);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.5 — DEFINITIEVE FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* === 1. WC button.alt = AUBERGINE PAARS standaard. Force ORANJE override
       met de exacte selectors uit WC's frontend.css (zelfde specificity) === */
.woocommerce #content input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page #content input.button.alt,
.woocommerce-page #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt,
.woocommerce button.single_add_to_cart_button.button.alt,
body .single_add_to_cart_button,
body button.single_add_to_cart_button {
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.woocommerce #content input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button.button.alt:hover,
body .single_add_to_cart_button:hover,
body button.single_add_to_cart_button:hover {
    background-color: #d97f00 !important;
    background: #d97f00 !important;
    color: #ffffff !important;
}
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.single_add_to_cart_button:disabled {
    background-color: var(--color-gray-400) !important;
    color: #ffffff !important;
    opacity: 0.5;
    cursor: not-allowed;
}

/* === 2. Notice container width — match 1280px === */
.woocommerce-notices-wrapper {
    width: 100%;
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding-inline: var(--container-padding) !important;
    box-sizing: border-box;
}
.woocommerce-notices-wrapper .woocommerce-message {
    margin: var(--gap-md) 0 0 !important;
}

/* === 3. SET BRINELL en andere "sets" specs — extra spacing tussen
       about (Set contents) en specs (Specifications) === */
.upi-product__about + .upi-product__specs {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

/* === 4. View Source debug banner subtieler === */
.upi-product__about[style*="background"] {
    /* Hier zit de admin diagnostic banner — sterk visueel onderscheid */
    margin: var(--space-md) auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.6 — DEFINITIEVE PRODUCTPAGE LAYOUT + STYLING
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. about + specs + debug → FULL-WIDTH in 2-col grid ─── */
.single-product div.product > .upi-product__about,
.single-product div.product > .upi-product__specs,
.single-product div.product > .upi-product__debug {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: 0 !important;
}

/* ─── 2. Debug banner → floating widget rechtsonder (admin only) ─── */
.upi-product__debug {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 280px;
    max-width: calc(100vw - 40px);
    max-height: 50vh;
    overflow-y: auto;
    background: #fff4cc !important;
    border: 1px solid #ffba00 !important;
    padding: 0.75rem 1rem !important;
    font-family: monospace !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    z-index: 99998 !important;
    border-radius: 4px !important;
    margin: 0 !important;
}
.upi-product__debug strong { font-weight: 600 !important; }

/* ─── 3. Verberg legacy WP sidebar + maak content full-width ─── */
.single-product #sidebar,
.archive.tax-product_cat #sidebar,
.post-type-archive-product #sidebar,
body.single-product div[role="complementary"],
body.archive.tax-product_cat div[role="complementary"],
body.post-type-archive-product div[role="complementary"],
.woocommerce.single-product #sidebar,
.woocommerce-page #sidebar,
.single-product aside.widget-area,
.archive.tax-product_cat aside.widget-area,
.post-type-archive-product aside.widget-area {
    display: none !important;
}
.single-product #primary,
.archive.tax-product_cat #primary,
.post-type-archive-product #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
}

/* ─── 4. Header → breadcrumb dichter bij h1, minder padding ─── */
.single-product .woocommerce-breadcrumb {
    max-width: var(--container-max);
    margin: var(--gap-md) auto var(--gap-xs) !important;
    padding-inline: var(--container-padding);
    font-size: 0.875rem;
    color: var(--color-gray-700);
}
.single-product .woocommerce-breadcrumb a {
    color: var(--color-gray-700);
    text-decoration: none;
}
.single-product .woocommerce-breadcrumb a:hover {
    color: var(--color-primary-text);
}

/* ─── 5. Product hero (gallery+summary) styling ─── */
.single-product div.product {
    padding: var(--gap-md) 0 var(--space-md) !important;
}
.single-product .summary.entry-summary {
    padding-top: 0 !important;
}

/* ─── 6. Product title kleiner + spacing ─── */
.single-product .product_title.upi-product__code,
.single-product h1.entry-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.4rem !important;
    color: var(--color-gray-900);
}

/* ─── 7. Badge styling polish ─── */
.single-product .upi-product__badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary-text);
    margin: 0 0 var(--gap-md) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* ─── 8. WC Variations dropdown → UPI styled ─── */
.single-product .variations,
.single-product table.variations {
    width: 100%;
    border: none !important;
    margin: 0 0 var(--gap-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 var(--gap-sm);
}
.single-product .variations th.label,
.single-product .variations td.value {
    border: none !important;
    padding: 0 0 0.4rem !important;
    background: transparent !important;
    display: block;
    width: 100%;
}
.single-product .variations th.label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-900);
    text-transform: none;
    letter-spacing: 0;
    padding-bottom: 0.25rem !important;
}
.single-product .variations th.label label {
    color: inherit;
    font-weight: inherit;
}
.single-product .variations select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.7rem 2.5rem 0.7rem 1rem !important;
    background-color: var(--color-white) !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 0 !important;
    font-family: var(--font-content) !important;
    font-size: 0.9375rem !important;
    color: var(--color-gray-900) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: border-color var(--transition-base);
}
.single-product .variations select:focus,
.single-product .variations select:hover {
    border-color: var(--color-primary) !important;
    outline: none !important;
}
.single-product .reset_variations {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    text-decoration: underline;
    padding-top: 0.5rem;
    display: inline-block;
}

/* ─── 9. Add to cart wrapper → balance qty + button ─── */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--gap-sm);
    margin: var(--gap-md) 0 !important;
}
.single-product .quantity {
    flex: 0 0 auto;
    width: 80px;
    margin: 0 !important;
}
.single-product .quantity input.qty {
    width: 100% !important;
    height: 100% !important;
    min-height: 48px;
    padding: 0.7rem 0.5rem !important;
    text-align: center !important;
    font-family: var(--font-content) !important;
    font-size: 1rem !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 0 !important;
    background: var(--color-white) !important;
    box-sizing: border-box;
}
.single-product .single_add_to_cart_button {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 0.85em 1.5em !important;
    font-family: var(--font-display) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
/* Disabled (variation niet gekozen) styling — duidelijker dat user moet kiezen */
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button.wc-variation-selection-needed {
    background-color: var(--color-gray-400) !important;
    background: var(--color-gray-400) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
/* v1.8.0.1: ::after content met hint-tekst VERWIJDERD —
   was bron van layout-bug (text eet flex-ruimte → button getrunceerd).
   Button disabled-state (grijs + cursor not-allowed) is voldoende. */

/* ─── 10. "No prices" note subtieler maar duidelijker ─── */
.single-product .upi-product__note {
    background: var(--color-cream);
    border-left: 3px solid var(--color-primary);
    padding: 0.65rem 0.9rem !important;
    margin: 0 0 var(--gap-md) !important;
    font-size: 0.8125rem !important;
    color: var(--color-gray-700) !important;
    line-height: 1.45;
}

/* ─── 11. Specs sectie — duidelijke visuele scheiding ─── */
.upi-product__specs,
.upi-product__about {
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--space-md) !important;
    margin-top: var(--space-md) !important;
}
.upi-product__section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--gap-md) !important;
    padding-bottom: var(--gap-sm);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* ─── 12. Specs tabel consistent padding (wpautop fix) ─── */
.upi-product__specs-table {
    width: 100%;
    border-collapse: collapse;
    max-width: 900px;
}
.upi-product__specs-table tr {
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-product__specs-table tr:last-child {
    border-bottom: none;
}
.upi-product__specs-table th,
.upi-product__specs-table td {
    padding: 0.85rem var(--gap-md) 0.85rem 0 !important;
    vertical-align: top;
    text-align: left;
    line-height: 1.5;
}
.upi-product__specs-table th {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-gray-900);
    width: 30%;
    min-width: 200px;
}
.upi-product__specs-table td {
    color: var(--color-gray-700);
}
/* Reset wpautop margin */
.upi-product__specs-table td p {
    margin: 0 !important;
    padding: 0 !important;
}
.upi-product__specs-table td p + p {
    margin-top: 0.5rem !important;
}

/* ─── 13. Sticky summary op desktop (lange specs zichtbaar tijdens scroll) ─── */
@media (min-width: 1024px) {
    .single-product div.product .summary {
        position: sticky;
        top: var(--space-md);
        align-self: start;
    }
}

/* ─── 14. Footer terug-link na specs ─── */
.upi-product__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: var(--space-md) 0 0;
    color: var(--color-gray-700);
    font-family: var(--font-display);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--transition-base), gap var(--transition-base);
}
.upi-product__back-link:hover {
    color: var(--color-primary-text);
    gap: 0.7rem;
}

/* ─── 15. Gallery — geen lege thumbnail strip onderaan ─── */
.single-product .flex-control-thumbs {
    display: none !important;
}
.single-product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    /* re-enable als er meerdere images zijn */
}
.single-product .woocommerce-product-gallery--with-images.images li:nth-child(n+2) ~ .flex-control-thumbs,
.single-product .woocommerce-product-gallery[data-columns]:has(.flex-control-thumbs li:nth-child(2)) .flex-control-thumbs {
    display: flex !important;
}

/* Gallery image styling */
.single-product .woocommerce-product-gallery__image img {
    background: var(--color-cream) !important;
    padding: 2rem !important;
    box-sizing: border-box;
}

/* ─── 16. Notice container 1280px === al gedaan in v1.7.5.5 — bevestig ─── */
.woocommerce-notices-wrapper {
    max-width: var(--container-max);
    margin: var(--gap-md) auto 0 !important;
    padding-inline: var(--container-padding);
    width: 100%;
    box-sizing: border-box;
}

/* ─── 17. Back-link wrap → full-width in grid ─── */
.single-product div.product > .upi-product__back-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--gap-md) !important;
    margin-top: var(--space-md) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.7 — FUNDAMENTELE LAYOUT (gebaseerd op McMaster-Carr B2B model)
   Alles agressief geforceerd naar 1 consistent grid; flexbox-based zodat
   na-summary secties altijd op nieuwe regel volle breedte krijgen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Alle main-content containers identiek qua breedte/padding ─── */
.single-product .site-main,
.single-product #primary,
.single-product #main,
.single-product .content-area,
.archive .site-main,
.archive #primary,
.archive #main,
.post-type-archive-product .site-main,
.post-type-archive-product #primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 1 1 100% !important;
    grid-column: 1 / -1 !important;
}

/* ─── 2. Inner containers krijgen ALLEMAAL dezelfde 1280px boundary ─── */
.single-product .woocommerce-breadcrumb,
.single-product .woocommerce-notices-wrapper,
.single-product div.product,
.single-product .upi-product__back-wrap {
    width: 100% !important;
    max-width: var(--container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
    box-sizing: border-box !important;
}

/* ─── 3. FLEXBOX layout voor product hero — meer voorspelbaar dan grid ─── */
.single-product div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-md) !important;
    padding-top: var(--gap-md) !important;
    padding-bottom: var(--space-md) !important;
    align-items: flex-start !important;
}

/* Gallery + summary: 2 koloms layout op desktop, stacked op mobiel */
.single-product div.product .woocommerce-product-gallery {
    flex: 1 1 calc(50% - var(--space-md) / 2) !important;
    min-width: 280px !important;
    max-width: calc(50% - var(--space-md) / 2);
    margin: 0 !important;
    width: auto !important;
}
.single-product div.product .summary.entry-summary {
    flex: 1 1 calc(50% - var(--space-md) / 2) !important;
    min-width: 280px !important;
    max-width: calc(50% - var(--space-md) / 2);
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* ─── 4. Na-summary secties (about, specs, back) → 100% breedte op
       nieuwe flex-regel ─── */
.single-product div.product > .upi-product__about,
.single-product div.product > .upi-product__specs,
.single-product div.product > .upi-product__back-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Mobile: alles onder elkaar */
@media (max-width: 768px) {
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary.entry-summary {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ─── 5. STICKY summary — UIT (gaf eerder grote witruimte) ─── */
.single-product div.product .summary {
    position: static !important;
}

/* ─── 6. Specs tabel — meer padding, hover state, betere typografie ─── */
.upi-product__specs-table {
    width: 100%;
    border-collapse: collapse;
    max-width: 100%;
    margin: 0;
}
.upi-product__specs-table tr {
    border-bottom: 1px solid var(--color-gray-200);
    transition: background var(--transition-base);
}
.upi-product__specs-table tr:first-child {
    border-top: 1px solid var(--color-gray-200);
}
.upi-product__specs-table tr:hover {
    background: var(--color-cream);
}
.upi-product__specs-table th,
.upi-product__specs-table td {
    padding: 1.1rem 1.5rem !important;
    vertical-align: top;
    text-align: left;
    line-height: 1.55;
}
.upi-product__specs-table th {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    width: 30%;
    min-width: 220px;
    padding-left: 0 !important;
}
.upi-product__specs-table td {
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    padding-right: 0 !important;
}
.upi-product__specs-table td p {
    margin: 0 !important;
}
.upi-product__specs-table td p + p {
    margin-top: 0.6rem !important;
}

/* ─── 7. Section titles — onderlijn niet inline maar als rule onder de
       hele sectie title (cleaner B2B look) ─── */
.upi-product__section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--gap-md) !important;
    padding: 0 0 var(--gap-sm) !important;
    border-bottom: 2px solid var(--color-primary);
    display: block;
    width: 100%;
}

/* ─── 8. Section spacing — McMaster-style: clean borders, ample space ─── */
.single-product .upi-product__about,
.single-product .upi-product__specs {
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--space-md) !important;
    margin-top: var(--space-md) !important;
}
/* Geen extra border-top als specs direct na de hero komt (geen about ervoor) */
.single-product .upi-product__about + .upi-product__specs {
    border-top: none;
    padding-top: 0 !important;
    margin-top: var(--space-md) !important;
}

/* ─── 9. Back-link wrapper — geen border, ruim padding ─── */
.single-product div.product > .upi-product__back-wrap {
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--gap-md) !important;
    margin-top: var(--space-md) !important;
}

/* ─── 10. Gallery image — clean cream achtergrond ─── */
.single-product .woocommerce-product-gallery__image img {
    background: var(--color-cream) !important;
    padding: 3rem !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    display: block;
}
.single-product .woocommerce-product-gallery {
    position: relative;
}
.single-product .flex-control-thumbs {
    display: none !important;
}

/* ─── 11. Header (notice + breadcrumb) → consistente gap ─── */
.single-product .woocommerce-notices-wrapper:empty {
    display: none !important;
    margin: 0 !important;
}
.single-product .woocommerce-breadcrumb {
    margin-top: var(--gap-md) !important;
    margin-bottom: var(--gap-xs) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ─── 12. Debug banner: PHP rendert niets zonder ?debug=1, dus geen floating
       widget meer ─ extra safety: hide als hij ergens toch verschijnt ─── */
.upi-product__debug:not(:has(strong)) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.5.8 — UPI PDP (Product Detail Page)
   Eigen template, eigen CSS, geen conflict met WC default selectors.
   Naming: .upi-pdp__* (Product Detail Page)
   Layout: McMaster-Carr inspired — clean, B2B, generous padding, snel scanbaar
   ═══════════════════════════════════════════════════════════════════════ */

/* === Container === */
.upi-pdp {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--gap-md) var(--container-padding) var(--space-md);
    box-sizing: border-box;
    font-family: var(--font-content);
}

/* === HERO: gallery + summary === */
.upi-pdp__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    align-items: start;
}
@media (max-width: 768px) {
    .upi-pdp__hero {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }
}

/* === Gallery === */
.upi-pdp__gallery {
    width: 100%;
}
.upi-pdp__gallery .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    opacity: 1 !important;
}
.upi-pdp__gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    background: var(--color-cream);
    padding: 2rem;
    box-sizing: border-box;
    display: block;
}
.upi-pdp__gallery .flex-control-thumbs {
    display: none !important;
}
.upi-pdp__gallery .woocommerce-product-gallery__trigger {
    top: 1rem !important;
    right: 1rem !important;
}

/* === Summary / info === */
.upi-pdp__info {
    padding-top: 0;
}
.upi-pdp__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-gray-900);
    margin: 0 0 0.4rem;
}
.upi-pdp__badge {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary-text);
    margin: 0 0 var(--gap-md);
}
.upi-pdp__divider {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: var(--gap-md) 0;
    height: 0;
}

/* === Form (variations + qty + ATC) === */
.upi-pdp__form {
    margin: 0 0 var(--gap-md);
}
.upi-pdp__form .variations,
.upi-pdp__form table.variations {
    width: 100%;
    border: none;
    margin: 0 0 var(--gap-md);
    border-collapse: separate;
    border-spacing: 0;
}
.upi-pdp__form .variations th.label,
.upi-pdp__form .variations td.value {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    display: block;
    width: 100%;
}
.upi-pdp__form .variations th.label {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.4rem;
}
.upi-pdp__form .variations select {
    width: 100% !important;
    padding: 0.7rem 2.5rem 0.7rem 1rem !important;
    background-color: var(--color-white) !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M207%20381L13%20187c-9-9-9-25%200-34l23-22c9-10%2025-10%2034%200l154%20154%20155-154c9-10%2025-10%2034%200l22%2022c10%2010%2010%2025%200%2034L241%20381c-9%2010-25%2010-34%200z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 0 !important;
    font-family: var(--font-content) !important;
    font-size: 0.9375rem !important;
    color: var(--color-gray-900) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.upi-pdp__form .variations select:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
}
.upi-pdp__form .reset_variations {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    text-decoration: underline;
    margin-top: 0.5rem;
    display: inline-block;
}
/* qty + button wrap (binnen form.cart of variations) — alleen flex op
   de INNER wrap, niet op het hele form.cart (anders staat de variations table
   naast de qty+button) */
.upi-pdp__form .woocommerce-variation-add-to-cart,
.upi-pdp__form form.cart:not(.variations_form) {
    display: flex !important;
    gap: var(--gap-sm);
    margin: var(--gap-md) 0 0 !important;
    flex-wrap: wrap;
}
.upi-pdp__form .quantity {
    flex: 0 0 80px;
    margin: 0 !important;
}
.upi-pdp__form .quantity input.qty {
    width: 100% !important;
    height: 48px !important;
    padding: 0 0.5rem !important;
    text-align: center !important;
    font-family: var(--font-content) !important;
    font-size: 1rem !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}
.upi-pdp__form .single_add_to_cart_button {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 0 1.5rem !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: background var(--transition-base);
}
.upi-pdp__form .single_add_to_cart_button:hover {
    background: #d97f00 !important;
}
.upi-pdp__form .single_add_to_cart_button.disabled,
.upi-pdp__form .single_add_to_cart_button.wc-variation-selection-needed {
    background: var(--color-gray-400) !important;
    cursor: not-allowed;
    opacity: 0.75;
}

/* "No prices" note */
.upi-pdp__note {
    background: var(--color-cream);
    border-left: 3px solid var(--color-primary);
    padding: 0.65rem 0.9rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    line-height: 1.45;
}

/* === Sections (specs + about) === */
.upi-pdp__specs,
.upi-pdp__about {
    margin: 0 0 var(--space-md);
}
.upi-pdp__section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--gap-md);
    padding: 0 0 var(--gap-sm);
    border-bottom: 2px solid var(--color-primary);
}

/* === Specs tabel === */
.upi-pdp__specs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.upi-pdp__specs-table tr {
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-pdp__specs-table tr:first-child {
    border-top: 1px solid var(--color-gray-200);
}
.upi-pdp__specs-table tr:hover {
    background: var(--color-cream);
}
.upi-pdp__specs-table th,
.upi-pdp__specs-table td {
    padding: 1rem 1.5rem;
    vertical-align: top;
    text-align: left;
    line-height: 1.55;
    font-size: 0.9375rem;
}
.upi-pdp__specs-table th {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-gray-900);
    width: 30%;
    min-width: 200px;
    padding-left: 0;
}
.upi-pdp__specs-table td {
    color: var(--color-gray-700);
    padding-right: 0;
}
.upi-pdp__specs-table td p {
    margin: 0;
}
.upi-pdp__specs-table td p + p {
    margin-top: 0.5rem;
}
.upi-pdp__specs-footnote {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    margin: var(--gap-md) 0 0;
    font-style: italic;
}

/* === About sectie === */
.upi-pdp__about-body {
    color: var(--color-gray-700);
    line-height: 1.6;
    max-width: 75ch;
}
.upi-pdp__about-body p {
    margin: 0 0 1rem;
}
.upi-pdp__set-contents {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}
.upi-pdp__set-contents li {
    padding: 0.5rem 0 0.5rem 1.2rem;
    position: relative;
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-pdp__set-contents li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* === Footer back-link === */
.upi-pdp__footer {
    margin: var(--space-md) 0 0;
    padding: var(--gap-md) 0 0;
    border-top: 1px solid var(--color-gray-200);
}
.upi-pdp__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-gray-700);
    font-family: var(--font-display);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--transition-base), gap var(--transition-base);
}
.upi-pdp__back-link:hover {
    color: var(--color-primary-text);
    gap: 0.7rem;
}

/* === Debug (alleen ?debug=1) === */
.upi-pdp__debug {
    margin: var(--gap-md) 0 0;
    padding: 0.5rem 0.75rem;
    background: #fff4cc;
    border-left: 3px solid #ffba00;
    font-family: monospace;
    font-size: 11px;
    color: #666;
}

/* v1.8.0.1: ::after hint-tekst VERWIJDERD — zie regel ~4584 */

/* === Notice wrapper centreren + VIEW QUOTE button styling === */
.single-product .woocommerce-notices-wrapper {
    width: 100%;
    max-width: var(--container-max);
    margin: var(--gap-md) auto 0 !important;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}
.upi-quote-trigger.button,
button.upi-quote-trigger {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.6rem 1.2rem !important;
    font-family: var(--font-display) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    cursor: pointer;
    transition: background var(--transition-base);
}
.upi-quote-trigger.button:hover {
    background: #d97f00 !important;
}

/* === Hide ALL oude .upi-product__* sections (legacy nu unused) === */
.single-product .upi-product__about,
.single-product .upi-product__specs,
.single-product .upi-product__debug,
.single-product .upi-product__back-wrap,
.single-product .upi-product__badge,
.single-product .upi-product__bullets,
.single-product .upi-product__note,
.single-product .upi-product__code {
    display: none !important;
}
/* MAAR: niet de versie in CONTENT-SINGLE-PRODUCT.php */
.upi-pdp .upi-pdp__badge,
.upi-pdp .upi-pdp__title,
.upi-pdp .upi-pdp__note,
.upi-pdp .upi-pdp__specs,
.upi-pdp .upi-pdp__about,
.upi-pdp .upi-pdp__debug,
.upi-pdp .upi-pdp__footer {
    display: revert !important;
}
/* v1.8.0.1: ::after display rule VERWIJDERD (zie 4584) */

/* === Quote drawer cleanup === */
.upi-quote-drawer__head {
    padding: var(--gap-md) var(--gap-md) var(--gap-sm) !important;
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-quote-drawer__body {
    padding: 0 !important;
    overflow-y: auto;
}
.upi-quote-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.upi-quote-drawer__item {
    display: flex !important;
    gap: 0.85rem;
    padding: 0.85rem var(--gap-md) !important;
    border-bottom: 1px solid var(--color-gray-200);
    align-items: flex-start;
}
.upi-quote-drawer__item-link {
    flex: 0 0 64px;
    display: block;
}
.upi-quote-drawer__item-img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    background: var(--color-cream);
    border-radius: 0;
    margin: 0 !important;
    padding: 0.4rem;
    box-sizing: border-box;
    display: block;
}
.upi-quote-drawer__item-info {
    flex: 1 1 auto;
    min-width: 0;
}
.upi-quote-drawer__item-title {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-gray-900);
    margin: 0 0 0.25rem;
    text-decoration: none;
    word-break: break-word;
    /* Max 2 regels */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.upi-quote-drawer__item-title:hover {
    color: var(--color-primary-text);
}
.upi-quote-drawer__item-meta {
    font-size: 0.75rem;
    color: var(--color-gray-700);
    margin: 0 0 0.4rem;
}
.upi-quote-drawer__item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.2rem;
}
.upi-quote-drawer__item-qty {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}
.upi-quote-drawer__item-remove {
    display: inline-flex;
    padding: 0.25rem;
    color: var(--color-gray-500);
    transition: color var(--transition-base);
    background: transparent;
    border: none;
    cursor: pointer;
}
.upi-quote-drawer__item-remove:hover {
    color: var(--color-primary-text);
}

.upi-quote-drawer__foot {
    padding: var(--gap-md) !important;
    background: var(--color-cream);
    border-top: 1px solid var(--color-gray-200);
}
.upi-quote-drawer__note {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    margin: 0 0 var(--gap-sm);
    line-height: 1.45;
    text-align: center;
}
.upi-quote-drawer__submit {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85rem 1rem;
    background: var(--color-primary);
    color: var(--color-white) !important;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 0;
    transition: background var(--transition-base);
}
.upi-quote-drawer__submit:hover {
    background: #d97f00;
    color: var(--color-white) !important;
}

/* Inline footnote bij hardness values (asterisk uitleg etc.) */
.upi-pdp__specs-table .upi-pdp__inline-footnote {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    font-style: italic;
    margin: 0.5rem 0 0 !important;
}

/* === Intro subtitle (5mm Embedded Carbide Ball, etc.) === */
.upi-pdp__intro {
    font-size: 1rem;
    color: var(--color-gray-700);
    margin: 0 0 var(--gap-md);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.6.1 — Drie fixes
   ═══════════════════════════════════════════════════════════════════════ */

/* === 1. Vergrootglas / zoom-trigger weg === */
.upi-pdp__gallery .woocommerce-product-gallery__trigger,
.single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* === 2. Padding links in label-kolom (was 0) + reset row bg === */
.upi-pdp__specs-table tr {
    background: transparent !important;
}
.upi-pdp__specs-table tr:hover {
    background: var(--color-cream) !important;
}
.upi-pdp__specs-table th {
    padding-left: 1.5rem !important;
}
.upi-pdp__specs-table td {
    padding-right: 1.5rem !important;
}

/* === 3. Add to Quote feedback animation states === */
.upi-pdp__form .single_add_to_cart_button {
    position: relative;
    transition: background var(--transition-base), transform 0.15s ease-out;
}
.upi-pdp__form .single_add_to_cart_button.is-loading {
    background: var(--color-gray-500) !important;
    cursor: wait;
    pointer-events: none;
}
.upi-pdp__form .single_add_to_cart_button.is-success {
    background: var(--color-primary) !important;
    animation: upi-success-pulse 0.5s ease-out;
}
@keyframes upi-success-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
/* (v1.7.6.1 ::before checkmark verwijderd — vervangen door ::after in v1.7.6.2
    om button-width niet te veranderen) */

/* ═══════════════════════════════════════════════════════════════════════
   v1.7.6.2 — Tabel → DL flex, gallery 1:1, button full-width, gap tighten
   ═══════════════════════════════════════════════════════════════════════ */

/* === Specifications: <dl> met flex (responsief) === */
.upi-pdp__specs-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-gray-200);
}
.upi-pdp__specs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
    transition: background var(--transition-base);
}
.upi-pdp__specs-row:hover {
    background: var(--color-cream);
}
.upi-pdp__specs-label {
    flex: 0 0 220px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
    line-height: 1.5;
}
.upi-pdp__specs-value {
    flex: 1 1 320px;
    margin: 0;
    min-width: 0;
    line-height: 1.5;
}
.upi-pdp__specs-value > p:first-child { margin-top: 0; }
.upi-pdp__specs-value > p:last-child  { margin-bottom: 0; }

/* Inline footnote bij hardness values (asterisk uitleg) */
.upi-pdp__specs-value .upi-pdp__inline-footnote {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    font-style: italic;
    margin: 0.5rem 0 0;
}

/* Mobile: stack labels boven values */
@media (max-width: 640px) {
    .upi-pdp__specs-row {
        gap: 0.25rem;
        padding: 0.875rem 1rem;
    }
    .upi-pdp__specs-label,
    .upi-pdp__specs-value {
        flex: 1 1 100%;
    }
    .upi-pdp__specs-value {
        font-size: 0.9375rem;
        color: var(--color-gray-800);
    }
}

/* Oude tabel-styles uitschakelen (legacy) */
.upi-pdp__specs-table { display: none !important; }

/* === Gallery 1:1 aspect ratio met center cover === */
.upi-pdp__gallery .woocommerce-product-gallery__image,
.upi-pdp__gallery figure.woocommerce-product-gallery__wrapper > div {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-cream);
}
.upi-pdp__gallery .woocommerce-product-gallery__image a,
.upi-pdp__gallery .woocommerce-product-gallery__image > div {
    display: block;
    width: 100%;
    height: 100%;
}
.upi-pdp__gallery .woocommerce-product-gallery__image img,
.upi-pdp__gallery .woocommerce-product-gallery__image a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* === Minder witruimte tussen hero (gallery+info) en specs/about === */
.upi-pdp__hero {
    margin-bottom: 2.5rem;   /* was groter */
}
.upi-pdp__specs {
    margin-top: 0;
    padding-top: 0;
}
.upi-pdp__about {
    margin-top: 2rem;
}

/* === Form layout — apart voor simple vs variations === */
.upi-pdp__form form.cart {
    margin: 0;
}

/* SIMPLE product: qty + button direct in form, flex naast elkaar */
.upi-pdp__form form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: stretch;
}

/* VARIATIONS form: block layout — variations boven, qty+button daaronder */
.upi-pdp__form form.variations_form {
    display: block;
}

/* Variations attribute kiezer (Hardness value / Indenter type etc.) */
.upi-pdp__form form.variations_form .variations {
    width: 100%;
    margin: 0 0 1.25rem;
    border: 0;
    border-collapse: collapse;
}
.upi-pdp__form form.variations_form .variations tr {
    display: block;
}
.upi-pdp__form form.variations_form .variations th.label,
.upi-pdp__form form.variations_form .variations td.value {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}
.upi-pdp__form form.variations_form .variations th.label {
    margin-bottom: 0.5rem;
}
.upi-pdp__form form.variations_form .variations th.label label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    margin: 0;
}

/* "Clear" reset link onder de dropdown */
.upi-pdp__form form.variations_form .reset_variations {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    text-decoration: underline;
}
.upi-pdp__form form.variations_form .reset_variations:hover {
    color: var(--color-primary);
}

/* De "single_variation" div (prijs/SKU/availability) — bij UPI hidden */
.upi-pdp__form form.variations_form .single_variation {
    display: none !important;
}

/* De qty + button wrap onder de variations — DAT is wat flex moet zijn */
.upi-pdp__form form.variations_form .woocommerce-variation-add-to-cart,
.upi-pdp__form form.variations_form .variations_button {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: stretch;
    margin: 0;
    width: 100%;
}

/* Qty input (zelfde voor beide product types) */
.upi-pdp__form form.cart .quantity {
    flex: 0 0 80px;
    width: 80px;
    margin: 0;
}
.upi-pdp__form form.cart .quantity input.qty {
    width: 100%;
    height: 100%;
    min-height: 52px;
    text-align: center;
}

/* Add to Quote button — altijd flex-1, min-height consistent */
.upi-pdp__form form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Producten zonder variations (geen wrapper, button is direct child van form) */
.upi-pdp__form form.cart:not(.variations_form) .single_add_to_cart_button {
    flex: 1 1 100%;
}

/* Success state — alleen visueel, GEEN tekst-wijziging meer */
.upi-pdp__form .single_add_to_cart_button.is-loading {
    background: var(--color-gray-500) !important;
    cursor: wait;
}

/* v1.7.6.4 — Pulse + glow animation, ZONDER permanente checkmark.
   Auto-completes via keyframes; JS removes class na 900ms als safety. */
.upi-pdp__form .single_add_to_cart_button.is-success {
    animation: upi-success-flash 0.9s ease-out;
}
@keyframes upi-success-flash {
    0% {
        background: var(--color-primary);
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(243, 146, 0, 0);
    }
    35% {
        background: #d97e00;
        transform: scale(1.025);
        box-shadow: 0 0 0 8px rgba(243, 146, 0, 0.28);
    }
    100% {
        background: var(--color-primary);
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(243, 146, 0, 0);
    }
}

/* v1.7.6.4 — Hide WC's auto-toegevoegde "View quote" link na ATC.
   We hebben de quote drawer al, die opent automatisch. */
.upi-pdp__form a.added_to_cart,
.upi-pdp__form .added_to_cart,
.single-product .upi-pdp a.added_to_cart {
    display: none !important;
}

/* v1.7.6.5 — Verberg ALLE WC notices op single product page.
   We hebben de quote drawer als feedback — geen dubbele notices nodig. */
.single-product .woocommerce-notices-wrapper,
.single-product .woocommerce-message,
.single-product .woocommerce-info,
.single-product .woocommerce-error,
.upi-pdp__hero ~ .woocommerce-notices-wrapper {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.0 — Cart / Checkout / Thank-you eigen templates
   ═══════════════════════════════════════════════════════════════════════ */

/* === CART page (custom) === */
.upi-cart {
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 var(--container-padding);
}
.upi-cart__title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0 0 0.5rem;
}
.upi-cart__count {
    color: var(--color-gray-700);
    margin: 0 0 2rem;
}
.upi-cart__items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-gray-200);
}
.upi-cart__item {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-gray-200);
    align-items: flex-start;
}
.upi-cart__item-thumb {
    flex: 0 0 88px;
    aspect-ratio: 1 / 1;
    background: var(--color-cream);
    overflow: hidden;
}
.upi-cart__item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.upi-cart__item-body { flex: 1; min-width: 0; }
.upi-cart__item-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 0.25rem;
}
.upi-cart__item-name:hover { color: var(--color-primary); }
.upi-cart__item-meta {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin: 0.125rem 0;
}
.upi-cart__item-qty {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}
.upi-cart__item-remove {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-gray-600);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.upi-cart__item-remove:hover { color: var(--color-primary); }

.upi-cart__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0 1rem;
}
.upi-cart__continue {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
}
.upi-cart__continue:hover { color: var(--color-primary); }
.upi-cart__submit-cta {
    background: var(--color-primary);
    color: white;
    padding: 0.875rem 1.5rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--transition-base);
}
.upi-cart__submit-cta:hover { background: #d97e00; color: white; }
.upi-cart__note {
    background: var(--color-cream);
    border-left: 3px solid var(--color-primary);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.9375rem;
}

/* Empty cart */
.upi-cart--empty { text-align: left; }
.upi-cart--empty .upi-cart__intro {
    color: var(--color-gray-700);
    margin: 0 0 1.5rem;
}
.upi-cart__cta {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 0.875rem 1.5rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.upi-cart__cta:hover { background: #d97e00; color: white; }

/* === CHECKOUT page (custom) === */
.upi-checkout {
    max-width: var(--container-max);
    margin: 3rem auto;
    padding: 0 var(--container-padding);
}
.upi-checkout__title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0 0 0.5rem;
}
.upi-checkout__intro {
    color: var(--color-gray-700);
    margin: 0 0 2rem;
    max-width: 60ch;
}
.upi-checkout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 900px) {
    .upi-checkout__grid {
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
    }
}
.upi-checkout__section-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}
.upi-checkout__summary {
    background: var(--color-cream);
    padding: 1.5rem;
    position: sticky;
    top: 2rem;
}
.upi-checkout__items {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.upi-checkout__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.9375rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
}
.upi-checkout__item:last-child { border-bottom: 0; }
.upi-checkout__item-name { font-weight: 700; }
.upi-checkout__item-variation {
    grid-column: 1;
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}
.upi-checkout__item-qty {
    color: var(--color-gray-700);
    align-self: start;
}
.upi-checkout__submit { margin-top: 1.5rem; }

/* WC checkout payment block — overschrijf voor onze look */
.upi-checkout__submit .place-order .button {
    width: 100%;
    background: var(--color-primary);
    color: white;
    padding: 1rem 1.5rem;
    border: 0;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background var(--transition-base);
}
.upi-checkout__submit .place-order .button:hover { background: #d97e00; }

/* === THANK YOU page === */
.upi-thankyou {
    max-width: 720px;
    margin: 4rem auto;
    padding: 0 var(--container-padding);
}
.upi-thankyou__title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0 0 1rem;
    color: var(--color-primary);
}
.upi-thankyou__intro {
    font-size: 1.125rem;
    color: var(--color-gray-800);
    margin: 0 0 2rem;
    max-width: 60ch;
}
.upi-thankyou__reference {
    background: var(--color-cream);
    padding: 1.5rem;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
}
.upi-thankyou__reference dt {
    font-weight: 700;
    color: var(--color-gray-700);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.upi-thankyou__reference dd { margin: 0; }
.upi-thankyou__section-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0 0 1rem;
}
.upi-thankyou__items {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    border-top: 1px solid var(--color-gray-200);
}
.upi-thankyou__item {
    display: flex;
    justify-content: space-between;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-thankyou__item-qty { color: var(--color-gray-700); }
.upi-thankyou__actions { margin-top: 2rem; }
.upi-thankyou__actions .button {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 0.875rem 1.5rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.upi-thankyou__actions .button:hover { background: #d97e00; color: white; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.0.2 — Body & Fit-stijl checkout + thank-you (UPI kleuren/fonts)
   - Links: witte form column
   - Rechts: lichtgrijze aside met items
   - Geen prijzen, geen verzending
   ═══════════════════════════════════════════════════════════════════════ */

/* === Layout container — full-width B&F-stijl === */
.upi-checkout-bf,
.upi-thankyou-bf {
    background: white;
    margin: 0;
    padding: 0;
}
.upi-checkout-bf__container,
.upi-thankyou-bf__container {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 70vh;
}
@media (min-width: 900px) {
    .upi-checkout-bf__container,
    .upi-thankyou-bf__container {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* === LEFT: white form/content column === */
.upi-checkout-bf__main,
.upi-thankyou-bf__main {
    background: white;
    padding: 3rem 2rem;
}
@media (min-width: 900px) {
    .upi-checkout-bf__main,
    .upi-thankyou-bf__main {
        padding: 4rem 3.5rem 4rem 4rem;
    }
}

/* === RIGHT: light gray aside === */
.upi-checkout-bf__aside,
.upi-thankyou-bf__aside {
    background: #f6f6f6;
    padding: 3rem 2rem;
}
@media (min-width: 900px) {
    .upi-checkout-bf__aside,
    .upi-thankyou-bf__aside {
        padding: 4rem 4rem 4rem 3.5rem;
    }
}

/* === CHECKOUT — form === */
.upi-checkout-bf__heading {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}
.upi-checkout-bf__heading h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}
.upi-checkout-bf__heading p {
    color: var(--color-gray-700);
    margin: 0;
    max-width: 50ch;
    line-height: 1.5;
}

.upi-checkout-bf__form {
    display: block;
    margin: 0;
}
.upi-checkout-bf__section {
    border: 0;
    padding: 0;
    margin: 0 0 2rem;
}
.upi-checkout-bf__section legend {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
    padding: 0;
    width: 100%;
}
.upi-checkout-bf__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
@media (min-width: 540px) {
    .upi-checkout-bf__row {
        grid-template-columns: 1fr 1fr;
    }
}
.upi-checkout-bf__field {
    margin-bottom: 0.875rem;
}
.upi-checkout-bf__field--full {
    grid-column: 1 / -1;
}
.upi-checkout-bf__field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}
.upi-checkout-bf__req {
    color: var(--color-primary);
    margin-left: 0.125rem;
}
.upi-checkout-bf__opt {
    color: var(--color-gray-600);
    font-weight: 400;
    font-size: 0.8125rem;
}
.upi-checkout-bf__field input,
.upi-checkout-bf__field textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-gray-300);
    border-radius: 0;
    font-family: var(--font-content);
    font-size: 1rem;
    background: white;
    color: var(--color-text);
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.upi-checkout-bf__field input:focus,
.upi-checkout-bf__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.15);
}
.upi-checkout-bf__field textarea {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-content);
}

/* Submit button — UPI oranje, full width */
.upi-checkout-bf__submit {
    margin-top: 2rem;
}
.upi-checkout-bf__btn {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    border: 0;
    padding: 1.125rem 2rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    width: 100%;
    text-align: center;
}
.upi-checkout-bf__btn:hover {
    background: #d97e00;
    color: white;
}

/* === CHECKOUT — aside === */
.upi-checkout-bf__aside-header,
.upi-thankyou-bf__aside-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-300);
}
.upi-checkout-bf__aside-header h2,
.upi-thankyou-bf__aside-header h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}
.upi-checkout-bf__count,
.upi-thankyou-bf__count {
    color: var(--color-gray-700);
    font-size: 0.875rem;
    margin: 0;
}

/* Items list (works for both checkout aside and thankyou aside) */
.upi-checkout-bf__items,
.upi-thankyou-bf__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.upi-checkout-bf__item,
.upi-thankyou-bf__item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-gray-200);
    align-items: flex-start;
}
.upi-checkout-bf__item:last-child,
.upi-thankyou-bf__item:last-child {
    border-bottom: 0;
}
.upi-checkout-bf__item-thumb,
.upi-thankyou-bf__item-thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    background: white;
    overflow: hidden;
}
.upi-checkout-bf__item-thumb img,
.upi-thankyou-bf__item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.upi-checkout-bf__item-qty,
.upi-thankyou-bf__item-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-text);
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.upi-checkout-bf__item-body,
.upi-thankyou-bf__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.upi-checkout-bf__item-name,
.upi-thankyou-bf__item-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.9375rem;
    line-height: 1.3;
}
.upi-checkout-bf__item-variation,
.upi-thankyou-bf__item-variation {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    line-height: 1.4;
}

.upi-checkout-bf__aside-footer,
.upi-thankyou-bf__notes {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-300);
}
.upi-checkout-bf__note {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}
.upi-checkout-bf__aside-empty {
    color: var(--color-gray-600);
    font-style: italic;
}

/* === THANK YOU page-specific === */
.upi-thankyou-bf__check {
    width: 56px;
    height: 56px;
    background: var(--color-primary);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.upi-thankyou-bf__check svg {
    width: 28px; height: 28px;
}
.upi-thankyou-bf__reference {
    color: var(--color-gray-700);
    font-size: 0.875rem;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.upi-thankyou-bf__reference strong {
    color: var(--color-text);
    font-weight: 700;
}
.upi-thankyou-bf__heading h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0 0 0.75rem;
    color: var(--color-text);
}
.upi-thankyou-bf__intro {
    font-size: 1.0625rem;
    color: var(--color-gray-800);
    line-height: 1.55;
    margin: 0;
    max-width: 50ch;
}
.upi-thankyou-bf__heading--error h1 { color: #b71c1c; }

.upi-thankyou-bf__confirm,
.upi-thankyou-bf__contact-info {
    margin-top: 2.5rem;
}
.upi-thankyou-bf__confirm h2,
.upi-thankyou-bf__contact-info h2 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}
.upi-thankyou-bf__steps {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}
.upi-thankyou-bf__steps li {
    margin-bottom: 0.5rem;
}
.upi-thankyou-bf__contact-info dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}
.upi-thankyou-bf__contact-info dt {
    font-weight: 700;
    color: var(--color-gray-700);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.upi-thankyou-bf__contact-info dd {
    margin: 0;
    color: var(--color-text);
}

.upi-thankyou-bf__notes h3 {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.upi-thankyou-bf__notes p {
    margin: 0;
    color: var(--color-gray-700);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Hide WC's built-in totals/payment block in our checkout */
.upi-checkout-bf__form .woocommerce-checkout-review-order,
.upi-checkout-bf__form .woocommerce-checkout-payment,
.upi-checkout-bf__form #order_review,
.upi-checkout-bf__form #payment {
    display: none !important;
}

/* Hide oude template als beide voorkomen */
.upi-checkout { display: none !important; }
.upi-thankyou { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.0.3 — Force full-width 2-col grid voor WC checkout/thankyou
   Override WC's <div class="woocommerce"> wrap die als block-level
   geen breedte beperkt maar wel display-context geeft.
   ═══════════════════════════════════════════════════════════════════════ */

/* WC pages: main krijgt geen padding/width — onze templates regelen het zelf */
.main--wc-fullwidth {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* WC's auto-wrap div.woocommerce voor checkout/cart pages — neutraliseren */
body.woocommerce-checkout .woocommerce,
body.woocommerce-cart .woocommerce,
body.woocommerce-page .woocommerce {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Onze containers nemen volle viewport-width met eigen max-width internal */
.upi-checkout-bf,
.upi-thankyou-bf {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Container grid — verhogen specificity zodat geen wrapper het kan overrulen */
body .upi-checkout-bf .upi-checkout-bf__container,
body .upi-thankyou-bf .upi-thankyou-bf__container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
@media (min-width: 900px) {
    body .upi-checkout-bf .upi-checkout-bf__container,
    body .upi-thankyou-bf .upi-thankyou-bf__container {
        grid-template-columns: 1.4fr 1fr !important;
    }
}

/* MOBILE-FIRST: items aside boven form (klant wens v1.8.0.3) */
@media (max-width: 899px) {
    body .upi-checkout-bf .upi-checkout-bf__container,
    body .upi-thankyou-bf .upi-thankyou-bf__container {
        grid-template-rows: auto auto;
    }
    .upi-checkout-bf__aside,
    .upi-thankyou-bf__aside {
        order: -1;  /* aside (items) eerst */
    }
}

/* WC's notices wrapper (de "Kies productopties" error) — verberg in onze flow */
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-notices-wrapper {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.1.0 — Punten klant:
   1. Breadcrumb in PDP top
   2. WooCommerce.php root-template (al gedaan via woocommerce.php)
   3. tekst-combinatie formulier-variant: zelfde styling als contactblok
   ═══════════════════════════════════════════════════════════════════════ */

/* === 1. PDP Breadcrumb === */
.upi-pdp__breadcrumb {
    margin: 0 0 var(--gap-md);
    font-family: var(--font-content);
    font-size: 0.875rem;
}
.upi-pdp__breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
}
.upi-pdp__breadcrumb li {
    display: flex;
    align-items: center;
    color: var(--color-gray-700);
}
.upi-pdp__breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
    color: var(--color-gray-400);
}
.upi-pdp__breadcrumb a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color 0.15s;
}
.upi-pdp__breadcrumb a:hover {
    color: var(--color-primary);
}
.upi-pdp__breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
}

/* === 3. tekst-combinatie variant=formulier — zelfde styling als contactblok === */
.bm-tc-side--formulier .bm-tc-form-wrapper {
    background: var(--color-gray-50, #f7f7f7);
    padding: var(--gap-xl);
    position: relative;
    border-top: 3px solid var(--color-primary);
}

.bm-tc-side--formulier .bm-tc-form-titel {
    margin: 0 0 var(--gap-sm);
    font-family: var(--font-display);
    font-size: var(--fs-h3, 1.5rem);
    font-weight: var(--fw-bold, 700);
    color: var(--color-text);
    line-height: var(--lh-heading, 1.25);
}

.bm-tc-side--formulier .bm-tc-form-subtekst {
    margin: 0 0 var(--gap-lg);
    padding-bottom: var(--gap-lg);
    border-bottom: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bm-tc-side--formulier .bm-tc-form-usps {
    list-style: none;
    margin: 0 0 var(--gap-lg);
    padding: 0;
}
.bm-tc-side--formulier .bm-tc-form-usps li {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-sm);
    font-size: 0.9375rem;
    color: var(--color-text);
}
.bm-tc-side--formulier .bm-tc-form-usp-icoon {
    flex-shrink: 0;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
}

.bm-tc-side--formulier .bm-tc-form-onderkanttekst {
    margin-top: var(--gap-lg);
    padding-top: var(--gap-md);
    border-top: 1px solid var(--color-gray-200);
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    line-height: 1.4;
}

.bm-tc-side--formulier .bm-tc-form-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    align-items: center;
    margin: var(--gap-md) 0;
}
.bm-tc-side--formulier .bm-tc-form-trust img {
    max-height: 32px;
    width: auto;
    opacity: 0.75;
}

/* Fluent Form binnen tc form-wrapper: schoon, zonder eigen achtergrond */
.bm-tc-side--formulier .bm-tc-form .fluentform input[type="text"],
.bm-tc-side--formulier .bm-tc-form .fluentform input[type="email"],
.bm-tc-side--formulier .bm-tc-form .fluentform input[type="tel"],
.bm-tc-side--formulier .bm-tc-form .fluentform input[type="url"],
.bm-tc-side--formulier .bm-tc-form .fluentform select,
.bm-tc-side--formulier .bm-tc-form .fluentform textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-gray-300);
    border-radius: 0;
    font-family: var(--font-content);
    font-size: 1rem;
    background: white;
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bm-tc-side--formulier .bm-tc-form .fluentform input:focus,
.bm-tc-side--formulier .bm-tc-form .fluentform select:focus,
.bm-tc-side--formulier .bm-tc-form .fluentform textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.15);
}
.bm-tc-side--formulier .bm-tc-form .fluentform button[type="submit"],
.bm-tc-side--formulier .bm-tc-form .fluentform .ff-btn-submit {
    background: var(--color-action);
    color: white;
    border: 0;
    padding: 1rem 2rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    border-radius: 0;
}
.bm-tc-side--formulier .bm-tc-form .fluentform button[type="submit"]:hover,
.bm-tc-side--formulier .bm-tc-form .fluentform .ff-btn-submit:hover {
    background: var(--color-action-hover);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.1.1 — Checkout fine-tuning
   - Lege <p> tags uit wpautop neutraliseren
   - Spacing tussen velden iets minder
   - Submit button kleiner + matching met form-buttons
   - Items krijgen remove-link (× rechtsboven)
   ═══════════════════════════════════════════════════════════════════════ */

/* Lege paragraph-tags die wpautop creëert in checkout template:
   - Sluit ze visueel uit voor grid (display: contents werkt niet voor flex/grid
     in alle browsers; we gebruiken display: none op specifieke patterns) */
.upi-checkout-bf__container > p:empty,
.upi-checkout-bf__container > p:not(:has(*)),
.upi-checkout-bf__form > p:empty,
.upi-checkout-bf__form > p:not(:has(*)) {
    display: none !important;
}

/* Belt en bracetjes: alle <p>'s direct in container/form/section die ALLEEN
   whitespace bevatten of geen interactieve content */
.upi-checkout-bf__container > p {
    margin: 0;
    padding: 0;
}
.upi-checkout-bf__form p:empty {
    display: none !important;
}

/* Spacing tussen secties — was 2rem, naar 1.25rem */
.upi-checkout-bf__section {
    margin-bottom: 1.5rem !important;
}
.upi-checkout-bf__field {
    margin-bottom: 0.75rem;
}
.upi-checkout-bf__row {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Submit button: kleiner + meer in lijn met form-buttons (tekst-combinatie) */
.upi-checkout-bf__submit {
    margin-top: 1.5rem !important;
}
.upi-checkout-bf__btn {
    background: var(--color-primary) !important;
    padding: 1rem 2rem !important;
    font-size: 0.9375rem !important;
    width: auto !important;       /* niet meer full-width */
    min-width: 280px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.upi-checkout-bf__btn:hover {
    background: #d97e00 !important;
}

/* Items remove-link (× rechtsboven, klein, subtiel) */
.upi-checkout-bf__item {
    position: relative;
    padding-right: 2rem !important;
}
.upi-checkout-bf__item-remove {
    position: absolute;
    top: 0.75rem;
    right: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.15s;
    border-radius: 50%;
}
.upi-checkout-bf__item-remove:hover {
    color: var(--color-primary);
    background: rgba(243, 146, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.1.2 — Klantfeedback
   1. Checkout submit button: oranje → groen (--color-action), zelfde als
      Fluent Form submit buttons. Magneet Pure conventie: oranje = brand,
      groen = positieve actie.
   2. Pagination: zwarte ul/li dots wegwerken (default list-style: disc).
   ═══════════════════════════════════════════════════════════════════════ */

/* === 1. Checkout submit button → groen (matching FF submit) === */
.upi-checkout-bf__btn,
body .upi-checkout-bf__btn {
    background: var(--color-action) !important;
}
.upi-checkout-bf__btn:hover,
body .upi-checkout-bf__btn:hover {
    background: var(--color-action-hover) !important;
}

/* v1.8.1.3: pagination block uit deze v1.8.1.2-sectie verwijderd — de
   defintieve pagination CSS staat hierboven bij regel 3078 (specifieke
   selectors voor a.page-numbers / span.page-numbers, niet bare .page-numbers
   die de <ul> ook matchte). */

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.1.5 — Categorie content opschoning
   - Beide v1.8.1.3 en v1.8.1.4 overrides (`!important`-heavy hacks op
     `.upi-archive__archive-text-*`) verwijderd. Vervangen door:
     (a) cleane structuur in archive-product.php (`<section class="upi-archive__intro|outro">`)
     (b) ÉÉN simpele utility rule die de parent-theme tekst.php bug oplost
         (zie `.bm-t-narrow.bm-t-left` hieronder).
   ═══════════════════════════════════════════════════════════════════════ */

/* .upi-archive__intro + .upi-archive__outro
   ─────────────────────────────────────────────
   GEEN eigen spacing, padding, max-width of border. De ACF flex blocks
   binnenin (typisch het tekst-block met `.s-bm-tekst.m-top.m-bottom`
   classes en interne `.c-bm-tekst.breedte-normaal` wrapper) regelen
   hun eigen breedte en verticale ruimte via de admin-instellingen.
   Toevoegen van CSS hier dubbelt op de parent-theme spacing.
   Deze klassen zijn dus puur semantische markers, geen layout-containers. */

/* Parent-theme bug fix: .bm-t-narrow.bm-t-left
   ─────────────────────────────────────────────
   tekst.php (parent theme, regel ~57) voegt voor 'smal_links' variant zowel
   .bm-t-narrow als .bm-t-left toe, met deze comment:
       "v1.5.19: smal_links betekent 'blok LINKS van de innerwidth'. Default
        .bm-t-narrow heeft margin-inline:auto (v2.3.1 — auto-centers smal
        blokken). Hier overruled met margin inline 0 zodat het blok
        daadwerkelijk links zit."
   Maar de bijbehorende CSS rule bestaat NIET in parent style.css — dead
   letter. Klant koos in admin "Smal — tekst links (default)" → block bleef
   gecentreerd door .bm-t-narrow { margin-inline: auto }. We herstellen hier
   simpelweg de intent uit de PHP comment. Geen !important, geen scoping:
   het is gewoon de basisrule die in parent theme ontbreekt. */
.bm-t-narrow.bm-t-left {
    margin-inline: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.2.0 — Grid variant: Showcase (productenrij op subtiel oppervlak)
   
   Use case: homepage "Our Products" sectie, 4-6 productcategorieën naast
   elkaar. Producten "drijven" op een onzichtbaar oppervlak — geen card-
   achtergrond, alleen een soft-shadow onder de afbeelding suggereert dat
   het object op iets rust.
   
   UX-keuzes (afwijkend van oude UPI site):
   - Tekst-link met arrow ipv primaire button — categorie-navigatie is
     een verkennende actie, niet een commit.
   - Hover-lift (translateY) + arrow-shift ipv color-swap — subtieler.
   - Auto-fit grid voor flexibele aantal items, geen rigide kolommen.
   ═══════════════════════════════════════════════════════════════════════ */

.bm-grid--showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gap-md);
    align-items: end;
    margin: 0;
    padding: 0;
}

/* Per item — geen card, transparante achtergrond, hover lift */
.bm-grid-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: var(--gap-md) var(--gap-sm);
    background: transparent;
    border: 0;
    transition: transform 220ms ease;
    position: relative;
}
.bm-grid-showcase:hover,
.bm-grid-showcase:focus-visible {
    transform: translateY(-6px);
    text-decoration: none;
    outline: none;
}
.bm-grid-showcase:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Image wrapper — square aspect, contain, soft "ground shadow" eronder */
.bm-grid-showcase-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gap-md);
    position: relative;
    padding: 0.5rem;
}
/* v1.8.3.3: ground-shadow (radial-gradient ::after + hover variant) verwijderd
   op klantverzoek. Productfoto's hebben al hun eigen schaduw in de PNG. */
.bm-grid-showcase-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform 220ms ease;
}

/* Body: titel + subtekst + link */
.bm-grid-showcase-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
}
.bm-grid-showcase-titel {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--color-text);
    line-height: 1.2;
}
.bm-grid-showcase-tekst {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.4;
    /* v1.8.2.2: max-width: 22ch removed — was bottleneck waardoor zelfs
       met genoeg ruimte de tekst forceerde te wrappen. Combineert met
       nbsp-pipe in PHP voor nette wrap zonder hangende pipes. */
    max-width: 100%;
    text-wrap: balance; /* modern browsers — evenwichtige regelverdeling */
}

/* Link — tekst + arrow, geen button. Hover: arrow shift + kleur. */
.bm-grid-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    transition: gap 200ms ease, color 200ms ease;
}
.bm-grid-showcase-link-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 200ms ease;
}
.bm-grid-showcase:hover .bm-grid-showcase-link,
.bm-grid-showcase:focus-visible .bm-grid-showcase-link {
    gap: 0.625rem;
    color: var(--color-primary-hover, #d97e00);
}
.bm-grid-showcase:hover .bm-grid-showcase-link-arrow {
    transform: translateX(3px);
}

/* Section background — subtiele lichte tint zodat de witte productfoto's
   contrast hebben met de pagina-achtergrond. Werkt alleen als de admin
   "Achtergrond: Licht" heeft gekozen — anders bg-standaard (wit) blijft. */
.s-bm-grid--showcase.bg-licht {
    background: var(--color-gray-50, #f7f7f7);
}

/* Mobile: 2 cols. Tablet: auto-fit pakt 3-4. Desktop: alle items naast elkaar. */
@media (max-width: 640px) {
    .bm-grid--showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-sm);
    }
    .bm-grid-showcase {
        padding: var(--gap-sm) 0;
    }
    .bm-grid-showcase-titel {
        font-size: 0.875rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.2.1 — Showcase variant uitbreidingen
   1. Achtergrond #F3F4F6 (bg-licht-grijs) — klant wens
   2. Certified badge: tekst + check-circle icoon
   3. 5 cols op desktop (≥1024px), auto-fit fallback voor andere widths
   ═══════════════════════════════════════════════════════════════════════ */

/* === 1. Achtergrond optie #F3F4F6 === */
.bg-licht-grijs {
    background: #F3F4F6;
    color: var(--color-dark);
}

/* === 2. Certified badge — tussen subtekst en link === */
.bm-grid-showcase-cert {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.125rem 0 0;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.bm-grid-showcase-cert-icoon {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
}
.bm-grid-showcase-cert-icoon svg {
    width: 18px;
    height: 18px;
}

/* === 3. Desktop: 5 cols voor showcase (≥1024px) === */
@media (min-width: 1024px) {
    .bm-grid--showcase {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Tablet (640–1023px): 3 cols voor showcase */
@media (min-width: 640px) and (max-width: 1023px) {
    .bm-grid--showcase {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.3.0 — Trust badges (accreditations + recognitions)
   
   Twee layout-variants:
   - .upi-trust--footer : lichte horizontale strip BOVEN de donkere site-footer
   - .upi-trust--header : overlay rechts-boven binnen homepage hero
   
   Per oude UPI-site staan de RvA + ILAC logo's rechtsboven naast de hero
   tekst. Hier doen we hetzelfde maar net iets cleaner: kleiner formaat,
   meer ademruimte, fade-in mocht JS gewenst zijn (geen JS toegevoegd).
   ═══════════════════════════════════════════════════════════════════════ */

/* === Generic base === */
.upi-trust {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.upi-trust__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.upi-trust__badge img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── Footer variant: lichte strip boven de donkere footer ─── */
.upi-trust--footer {
    background: #fafafa;
    padding: 2.5rem 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 3rem;
    border-top: 1px solid #e5e7eb;
}
.upi-trust--footer .upi-trust__badge img {
    width: 90px;
    height: auto;
}

@media (max-width: 640px) {
    .upi-trust--footer {
        padding: 1.5rem 1rem;
        gap: 1.25rem 2rem;
    }
    .upi-trust--footer .upi-trust__badge img {
        width: 70px;
    }
}

/* ─── Header variant: overlay rechts-boven op de homepage hero ───
   .main--home heeft position: relative zodat absolute-childs gepositioneerd
   zijn t.o.v. de main content area (niet viewport — anders overlap met
   site-header). */
.main--home {
    position: relative;
}

/* v1.8.3.3: refactored — outer container krijgt EXACT dezelfde max-width
   en padding-inline als .breedte-normaal (de site-container). Inner cluster
   wordt via justify-content: flex-end naar rechts uitgelijnd. Daarmee
   staat de rechter-edge gegarandeerd gelijk aan de Contact-knop, ongeacht
   viewport-breedte of CSS-variabele aanpassingen.
   
   pointer-events: none op outer → klikken op hero werken; auto op cluster
   → badges blijven interactief. */
.upi-trust--header {
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    z-index: 5;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
}
.upi-trust__cluster {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* iets transparante vlek achter de logos zodat ze leesbaar blijven
       op donkere hero-foto's (RvA is paars, ILAC is blauw — beide werken
       slecht op zwart). Zacht en niet opdringerig. */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.875rem 1.25rem;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.upi-trust--header .upi-trust__badge img {
    width: 60px;
    height: auto;
}

/* Tablet en kleiner: niet als overlay — gewoon onder de hero centraal.
   1024px is het breakpoint waaronder de hero z'n eigen layout shift krijgt. */
@media (max-width: 1024px) {
    .upi-trust--header {
        position: static;
        justify-content: center;
        /* v1.8.3.4: meer onderruimte op mobiel — anders plakken de badges
           visueel tegen de eerste content-sectie eronder. */
        padding-block: 1.5rem 2.5rem;
    }
    .upi-trust__cluster {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        padding: 0;
        gap: 1rem;
    }
    .upi-trust--header .upi-trust__badge img {
        width: 55px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.3.2 — Container 1280px → 1400px + header menu nowrap
   
   Klant: "innerwidth is 1180, kan die nog wat breder? menu items passen
   niet goed in." Container max: 1280 → 1400. Inner content groeit van
   ~1180 naar ~1300 op brede schermen (na clamp padding).
   
   Plus: meerwoordige menu items als "TEST METHODS" / "QUALITY STANDARDS"
   konden midden in het item wrappen (TEST op regel 1, METHODS op regel 2).
   Dat was een aparte styling bug los van breedte — fix: white-space: nowrap.
   ═══════════════════════════════════════════════════════════════════════ */

/* Menu items mogen NOOIT midden door breken. Bij overflow van de hele nav
   triggert de mobile-hamburger breakpoint, dat is een aparte concern. */
.bm-header-menu a {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.3.4 — Archive filter offcanvas (tablet + mobiel)
   
   Desktop (>1024px): filter sidebar in 2-koloms grid (huidige gedrag).
   Tablet/mobile (≤1024px): sidebar wordt fixed offcanvas, opent via
   floating action button rechtsonder. Backdrop dimt content, ESC sluit.
   ═══════════════════════════════════════════════════════════════════════ */

/* Default (desktop): mobile-only elementen verbergen */
.upi-filter-fab,
.upi-filter-backdrop,
.upi-archive__sidebar-header {
    display: none;
}

@media (max-width: 1024px) {

    /* Content vol-width, sidebar wordt offcanvas */
    .upi-archive__layout {
        grid-template-columns: 1fr;
    }

    /* ─── Sidebar als offcanvas ─── */
    .upi-archive__sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 380px);
        z-index: 100;
        background: var(--color-white);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        padding: 0;
        margin: 0;
        /* Sticky-positionering uit Desktop CSS overrulen */
        position: fixed !important;
        top: 0 !important;
    }
    body.upi-filter-open .upi-archive__sidebar {
        transform: translateX(0);
    }

    /* Header binnen offcanvas: titel + close-X */
    .upi-archive__sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--color-gray-200);
        background: var(--color-white);
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .upi-archive__sidebar-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text);
    }
    .upi-archive__sidebar-close {
        background: transparent;
        border: 0;
        padding: 0.5rem;
        margin: -0.5rem -0.5rem -0.5rem 0;
        cursor: pointer;
        color: var(--color-text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background 150ms ease;
    }
    .upi-archive__sidebar-close:hover,
    .upi-archive__sidebar-close:focus-visible {
        background: var(--color-gray-100);
    }
    .upi-archive__sidebar-close:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Filter content krijgt eigen padding binnen offcanvas */
    .upi-archive__sidebar .upi-filter {
        position: static;
        border: 0;
        background: transparent;
        padding: var(--space-md);
    }

    /* ─── Floating action button — primary brand kleur, rechtsonder ─── */
    .upi-filter-fab {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        bottom: 1.25rem;
        right: 1.25rem;
        z-index: 50;
        background: var(--color-primary);
        color: var(--color-white);
        border: 0;
        padding: 0.875rem 1.25rem;
        border-radius: 999px;
        font-family: var(--font-display);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
        line-height: 1;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
        cursor: pointer;
        transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    }
    .upi-filter-fab:hover,
    .upi-filter-fab:focus-visible {
        transform: scale(1.04);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    }
    .upi-filter-fab:focus-visible {
        outline: 2px solid var(--color-white);
        outline-offset: 2px;
    }
    .upi-filter-fab svg {
        flex-shrink: 0;
    }

    /* FAB verstoppen als offcanvas open is (anders in de weg + dubbel UI) */
    body.upi-filter-open .upi-filter-fab {
        opacity: 0;
        pointer-events: none;
    }

    /* ─── Backdrop ─── */
    .upi-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 320ms ease;
    }
    body.upi-filter-open .upi-filter-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Body scroll lock wanneer offcanvas open is */
    body.upi-filter-open {
        overflow: hidden;
    }
}

/* Reduced motion: minder enthousiast animeren */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .upi-archive__sidebar,
    .upi-filter-backdrop,
    .upi-filter-fab {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.4.0 — Contact block form-variant: nieuwe elementen voor parity met
   tekst-combinatie. Subtekst, USPs onder, trust boven/onder, fallback.
   Bestaande .bm-contact-form-response en .bm-contact-form-privacy zijn al
   gestyled in style.css — alleen NIEUWE elementen hier toevoegen.
   ═══════════════════════════════════════════════════════════════════════ */

.bm-contact-form-subtekst {
    font-size: 0.9375rem;
    color: var(--color-gray-700);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

.bm-contact-form-trust {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
}
.bm-contact-form-trust--boven {
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 1rem;
}
.bm-contact-form-trust--onder {
    border-top: 1px solid var(--color-gray-200);
    margin-top: 1rem;
}
.bm-contact-form-trust img {
    height: 32px;
    width: auto;
    opacity: 0.7;
    transition: opacity 200ms ease;
}
.bm-contact-form-trust img:hover {
    opacity: 1;
}

.bm-contact-form-usps--onder {
    margin-top: 1.25rem;
}

.bm-contact-form-fallback {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-200);
    font-size: 0.875rem;
    color: var(--color-gray-700);
}
.bm-contact-form-fallback a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.bm-contact-form-fallback a:hover {
    text-decoration: underline;
}

/* === Tekst-combinatie: response + privacy parity met contact ===
   v1.8.4.1: niet apart stylen — same selector als .bm-contact-form-*
   zodat ze gegarandeerd identiek blijven. Eén bron, geen drift. */
.bm-contact-form-response,
.bm-tc-form-response {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-family: var(--font-content);
    font-size: 0.9375rem;
    color: var(--color-gray-700);
    line-height: 1.4;
}
.bm-contact-form-response-icon,
.bm-tc-form-response-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-primary-text);
}

.bm-contact-form-privacy,
.bm-tc-form-privacy {
    margin: var(--gap-md) 0 0;
    padding-top: var(--gap-md);
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    font-family: var(--font-content);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    line-height: 1.4;
}
.bm-contact-form-privacy-icon,
.bm-tc-form-privacy-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-gray-500);
}

/* v1.8.4.2: dubbele afstand fix — .bm-tc-form-wrapper heeft `gap: var(--gap-md)`
   tussen children, dus de extra margin-top op privacy gaf dubbele ruimte
   tussen de submit-button en de streep. Reset margin in TC; wrapper-gap +
   padding-top in group-selector geven exact dezelfde verticale ruimte als
   bij contact (waar geen wrapper-gap is). */
.bm-tc-form-wrapper > .bm-tc-form-privacy {
    margin-top: 0;
}

/* v1.8.4.3: Fluent Form `.ff-el-group:last-child` (submit-button row) heeft
   een default margin-bottom van ~1rem. Contact had die al gereset, TC niet —
   dat was de RESTERENDE bron van extra ruimte boven de streep. Beide blokken
   krijgen nu via group-selector dezelfde reset. */
.bm-contact-form .fluentform .ff-el-group:last-child,
.bm-tc-form .fluentform .ff-el-group:last-child {
    margin-bottom: 0;
}

/* === Grid kaarten tekst-div + WYSIWYG output styling (v1.8.4.0) ===
   tekst-veld is nu wysiwyg → output bevat <p> elementen. Wrap is <div>
   ipv <p> om geneste paragrafen te voorkomen. */
.bm-grid-kaart-tekst > p:first-child,
.bm-grid-cijfer-tekst > p:first-child,
.bm-grid-stap-tekst > p:first-child,
.bm-grid-voordeel-tekst > p:first-child,
.bm-grid-icoon-tekst > p:first-child {
    margin-top: 0;
}
.bm-grid-kaart-tekst > p:last-child,
.bm-grid-cijfer-tekst > p:last-child,
.bm-grid-stap-tekst > p:last-child,
.bm-grid-voordeel-tekst > p:last-child,
.bm-grid-icoon-tekst > p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.5.3 — Inline SVG logo's: class direct op <svg>, geen wrapper
   
   De helper upi_render_logo() injecteert de class direct in het <svg>
   element (geen <span> wrapper meer). Daardoor:
   - Parent theme show/hide rules (.bm-logo-licht { display: none })
     werken direct op de SVG, geen wrapper-conflict
   - Sizing-rules targeten svg.bm-logo-donker / svg.bm-logo-licht
   
   BELANGRIJK: geen `display` property hier — dat wordt door parent theme
   geregeld voor de show/hide logic. Wij doen alleen sizing.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header logo — inline SVG sizing (geen display, parent theme regelt show/hide) */
.bm-header-logo svg.bm-logo-donker,
.bm-header-logo svg.bm-logo-licht {
    height: 48px;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* Footer logo — inline SVG sizing */
.bm-footer-logo svg.bm-footer-logo-inner {
    height: 48px;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.7.0 — Homepage styling refresh + floating contact button

   Klant feedback (post-launch review): de homepage moet beter aansluiten bij
   de UPI brand. Zeven puntige veranderingen:

   1. Navigatiebalk-uitlijning — menu items rechts gegroepeerd naast actions
   2. "OUR PRODUCTS" links uitgelijnd (was: gecentreerd)
   3. Section H2-headers in Futura, all caps, oranje
   4. Hero white-card transparanter zodat instrumenten erachter zichtbaar
   5. RvA + ILAC trust badges groter + transparante achtergrond
   6. Cert-icoon in showcase grid: UPI brand icon ipv generic check-circle
      (HTML wijziging zit in template-parts/blocks/grid.php; hier alleen img sizing)
   7. Floating contact button — cirkelvormig, rechts-midden, altijd zichtbaar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Navigatiebalk-uitlijning ───
   Was: logo links, menu in midden (door flex:1 + space-between), actions rechts.
   Nu: logo links, menu + actions samen als cluster aan de rechterkant.
   Implementation: nav krijgt flex:0 (geen groei) + margin-left:auto duwt het
   richting rechts. Daarna sluit actions er direct op aan via standaard gap. */
.bm-header-inner {
    /* space-between overschrijven omdat we nu margin-left auto gebruiken */
    justify-content: flex-start;
}
.bm-header-nav {
    /* was: flex: 1 — die maakte nav full-width waardoor menu items
       gespreid raakten over alle beschikbare ruimte. Nu compact cluster. */
    flex: 0 0 auto;
    margin-left: auto;
}
/* Mobile: bm-header-nav is meestal verborgen op kleinere schermen. Geen
   override nodig — bestaande media queries blijven werken. */

/* ─── 2 + 3. Section H2-headers: links + oranje + all caps + Futura ───
   Alleen sectie-titels in content blocks (.bm-grid-header, .bm-tekst-header).
   Globale H1/H2 in andere context (artikels, FAQ, etc.) blijven onaangeroerd.

   Override van bm-t-center op showcase grid-header: klant wil "OUR PRODUCTS"
   nadrukkelijk LINKS, niet gecentreerd zoals andere homepage-secties.

   v1.8.8.0: kleur naar --color-primary (#F39200) ipv --color-primary-text (#b26b00).
   Klant wens nadrukkelijk de felle brand-oranje voor section headers. Note:
   #F39200 op wit faalt WCAG AA contrast (2.1:1 vs 4.5:1 minimum). Brand-keuze
   wint hier van toegankelijkheid; mocht WCAG-audit een issue worden, terug
   naar --color-primary-text. */
.bm-grid-header h2,
.bm-tekst-header h2,
.bm-tekst-combinatie h2,
.bm-faq-header h2,
.bm-artikelen-header h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.04em;
}

/* "OUR PRODUCTS" expliciet links — klant feedback punt #2 */
.s-bm-grid--showcase .bm-grid-header,
.s-bm-grid--showcase .bm-grid-header.bm-t-center {
    text-align: left;
}
.s-bm-grid--showcase .bm-grid-header.bm-t-center {
    /* bm-t-narrow zet max-width: 60ch + margin-inline: auto, dat moet weg
       om écht links uit te lijnen */
    max-width: none;
    margin-inline: 0;
}

/* ─── 4. Hero white-card transparanter (v1.8.8.0 — verdere verlaging) ───
   v1.8.7.0: 0.78 desktop / 0.88 mobile. Klant: nog niet transparant genoeg.
   v1.8.8.0: 0.55 desktop / 0.75 mobile, blur sterker (16px) zodat tekst leesbaar
       blijft ook met sterkere doorkijk. */
.s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
@media (max-width: 768px) {
    /* Op mobiel iets minder transparant — daar competeren tekst en achtergrond
       om beperkte ruimte, leesbaarheid wint van visueel effect. */
    .s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
        background: rgba(255, 255, 255, 0.75);
    }
}

/* ─── 5. RvA + ILAC trust badges groter + transparant ───
   Klant wens: logos prominenter zichtbaar, witte achtergrond/blur weg. */
.upi-trust--header .upi-trust__cluster {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    gap: 1.25rem;
}
.upi-trust--header .upi-trust__badge img {
    width: 105px;  /* was 60px — ruim 75% groter */
    height: auto;
}
@media (max-width: 1024px) {
    /* Op tablet: bestaande static positioning blijft (was al transparant),
       size proportioneel iets kleiner zodat ze niet domineren. */
    .upi-trust--header .upi-trust__badge img {
        width: 85px;
    }
}

/* ─── 6. UPI brand icon in showcase cert-badge ───
   HTML-wijziging zit in template-parts/blocks/grid.php (img tag ipv SVG).
   Hier alleen sizing om visuele consistentie met de oude SVG-check te houden.
   width 20px ~= matched aan oude check-circle 18px maar iets prominenter
   vanwege detail in het UPI-icoon. */
.bm-grid-showcase-cert-icoon {
    /* Reset color want img heeft eigen kleur, hoeft niet currentColor */
    color: inherit;
    line-height: 0;
}
.bm-grid-showcase-cert-icoon__img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    vertical-align: middle;
}

/* ─── 7. Floating contact button ───
   Cirkel met telefoon-icoon, rechts-midden verticaal. Always-on bij scrollen.
   Op hover: subtiele lift + iets donkerder oranje. Klant referentie:
   INNOVATEST website — vergelijkbaar gedrag, maar wij in --color-primary.

   z-index hoog genoeg om boven sticky content/cookie banners te staan, maar
   lager dan modal/overlay zodat hij niet conflicteert met quote-drawer.

   Mobile: lager geplaatst (rechts-onder ipv midden) om duim-bereik te respecteren. */
.upi-floating-contact {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    z-index: 90;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.upi-floating-contact:hover,
.upi-floating-contact:focus-visible {
    background: var(--color-primary-text);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    color: #fff;
}
.upi-floating-contact:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
.upi-floating-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.upi-floating-contact__icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}
/* Label is screen-reader-only — visueel zien we alleen het icoon, maar
   accessibility tools krijgen "Contact" als context. */
.upi-floating-contact__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile: rechts-onder ipv midden om duim-bereik te respecteren. Plus iets
   kleiner formaat zodat het niet over CTA's heen valt op smal scherm. */
@media (max-width: 768px) {
    .upi-floating-contact {
        top: auto;
        bottom: clamp(1rem, 4vw, 1.5rem);
        right: clamp(1rem, 4vw, 1.5rem);
        transform: none;
        width: 52px;
        height: 52px;
    }
    .upi-floating-contact:hover,
    .upi-floating-contact:focus-visible {
        transform: scale(1.06);
    }
    .upi-floating-contact__icon svg {
        width: 22px;
        height: 22px;
    }
}

/* Print: floating contact is niet relevant in geprinte versie */
@media print {
    .upi-floating-contact {
        display: none;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .upi-floating-contact {
        transition: none;
    }
    .upi-floating-contact:hover,
    .upi-floating-contact:focus-visible {
        transform: translateY(-50%);
    }
    @media (max-width: 768px) {
        .upi-floating-contact:hover,
        .upi-floating-contact:focus-visible {
            transform: none;
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.0 — Vervolg-feedback klant (post v1.8.7.0 review)

   Punten 1-11 uit klant feedback; CSS-onderdelen:

   #1  Hero card MEER transparant (was 0.78 → nu 0.55)
   #2  "OUR PRODUCTS" naar felle oranje #F39200 (was donker #b26b00)
   #3  TinyMCE style preset CSS (frontend rendering van .upi-heading--orange-caps)
   #5  PDP gallery thumbnail-strip styling
   #6  Archive H1 ("Products") naar oranje all-caps
   #8  Footer trust badges links uitlijnen (was: gecentreerd)
   #9  Tekst-block centering fix (block-center ipv text-center)
   #10 Floating contact button icon styling (vervangen door custom UPI SVG)
   #11 Cert-icoon: SVG inline ipv WebP — geen CSS impact, alleen sizing
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── #3. TinyMCE style preset — frontend rendering ───
   Klant kan in de WYSIWYG-editor een paragraaf/heading converteren naar
   "Heading X — UPI oranje caps". Die krijgt class .upi-heading--orange-caps
   plus de bijbehorende block-tag (h1/h2/h3). Hier definieren we hoe dat
   visueel op de frontend rendert.

   Backend preview is NIET ingeschakeld (klant-keuze v1.8.8.0); redacteur ziet
   in editor wel de TinyMCE default styling, maar op frontend rendert correct. */
.upi-heading--orange-caps,
h1.upi-heading--orange-caps,
h2.upi-heading--orange-caps,
h3.upi-heading--orange-caps {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.04em;
}

/* ─── #6. Archive title (.upi-archive__title) ───
   Klant: "Products" titel op de archive-pagina moet ook in caps + oranje.
   Sluiten aan bij de section-header styling uit v1.8.7.0 (zie eerdere v1.8.7.0
   sectie hierboven). Felle oranje, niet WCAG-veilige variant.

   v1.8.8.0 — let op: dit is een H1 (uitzondering op v1.8.7.0 regel die zei
   "hero H1 expliciet uitgesloten"). Archive title is een ANDERE H1, geen hero.

   v1.8.8.1 — !important toegevoegd op color: er staat een eerdere rule in dit
   stylesheet die `color: var(--color-gray-900) !important` zet op de combinatie
   (.upi-archive__title, .upi-archive__head h1, etc.), die wint van mijn cascade
   ondanks dat mijn rule later komt.

   v1.8.8.9 — ECHTE oplossing: bron-conflict opgeruimd. De vorige multi-rule
   bevatte naast `.upi-archive__title` ook `.upi-archive__head h1` met
   specificity (0,1,1) !important. Die laatste verslaat mijn (0,1,0)
   ongeacht !important of cascade-positie — hogere specificity wint altijd
   bij !important-tussen-!important. v1.8.8.1 fix met alleen !important kon
   dat nooit oplossen. Nu:
   - Bron-rule (regel 3826) heeft alleen nog product-selectors, archive-H1
     selectors zijn weggehaald
   - Mijn override hier is uitgebreid met `.upi-archive__head h1` (0,1,1)
     zodat het ook bij toekomstige conflicten via die specifiekere route wint
   - !important is hier nu strikt genomen niet meer nodig maar blijft als
     guard tegen toekomstige overrides */
.upi-archive__title,
.upi-archive__head h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--color-primary) !important;
    letter-spacing: 0.04em;
}

/* ─── #5. PDP gallery — main + thumbnail strip ───
   Custom render in woocommerce/content-single-product.php (v1.8.8.0).
   Main image bovenaan in vaste aspect-ratio, thumbnails eronder als flex-row
   die wrap'pen bij veel images. Klik op thumb wisselt main image (JS in
   assets/js/upi-pdp-gallery.js). */
.upi-pdp-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.upi-pdp-gallery__main {
    background: var(--color-gray-50, #fafafa);
    border-radius: 4px;
    overflow: hidden;
    /* Vaste aspect-ratio voor consistentie tussen producten; object-fit:contain
       zodat product visueel niet bijgesneden wordt. */
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upi-pdp-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.upi-pdp-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.upi-pdp-gallery__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 0;
    background: var(--color-gray-50, #fafafa);
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.upi-pdp-gallery__thumb:hover {
    border-color: var(--color-gray-300, #d4d4d4);
}
.upi-pdp-gallery__thumb.is-active {
    border-color: var(--color-primary);
}
.upi-pdp-gallery__thumb:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.upi-pdp-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ─── #8. Footer trust badges — links uitlijnen ───
   Klant: footer logos moeten links uitgelijnd staan, niet gecentreerd.
   Was: .upi-trust--footer { justify-content: center }.

   v1.8.8.0: max-width + padding-inline op de outer gezet — dat brak de
   full-width grijze achtergrond-strip (klant feedback: "de grijze achtergrond
   moet wel doorlopen over de breedte van de pagina").

   v1.8.8.1 FIX: HTML structuur opgesplitst (zie upi-trust-badges.php):
   - .upi-trust--footer = outer, full-width grijze strip met padding-block
   - .upi-trust__inner  = inner, max-width container met links-uitgelijnde flex
   
   Resultaat: grijze strip loopt over hele pagina-breedte; badges zelf zitten
   binnen de site-container links uitgelijnd met de overige content. */
.upi-trust--footer {
    /* Behoud bestaande full-bleed strip styling uit basis CSS regel 7036:
       background: #fafafa; padding: 2.5rem 1.5rem; border-top: 1px solid #e5e7eb;
       Override van flex-related rules zodat inner het werk doet: */
    display: block;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    /* Behoud de verticale padding van de basis (2.5rem) maar laat horizontal
       padding aan de inner-container over zodat alignment klopt. */
}
.upi-trust--footer .upi-trust__inner {
    /* De flex-row die voorheen op .upi-trust--footer zat, nu hier */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem 3rem;
    /* Site-container alignment */
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

@media (max-width: 640px) {
    .upi-trust--footer .upi-trust__inner {
        gap: 1.25rem 2rem;
        /* Op mobiel iets minder zij-padding zodat badges niet te krap staan */
        padding-inline: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.1 — Iteratie 3 klant feedback (live-test bevindingen)

   Zes punten — allemaal CSS, geen functional changes:
   #2  Hero trust badges op mobiel: witte achtergrond weg + rechts uitgelijnd
   #3  Hero card NOG transparanter (van 0.55 → 0.35)
   #4  Tekst-combinatie tekst-tekst: rechter tekst bovenin uitlijnen
   #6  PDP about-body teksten in 2 kolommen
   (Punten #1 en #5 hierboven al inline opgelost in bestaande sectie)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── #2. Hero trust badges mobiel ───
   v1.8.8.1 fix verwijderd in v1.8.8.7 — zat aan symptoom (cluster transparant
   maken) niet aan oorzaak (badges in document-flow ipv overlay op mobile).
   Echte fix in v1.8.8.7 sectie onderaan dit bestand. */

/* ─── #3. Hero card nog transparanter — v1.8.8.1 ───
   v1.8.7.0: 0.92 → 0.78
   v1.8.8.0: 0.78 → 0.55
   v1.8.8.1: 0.55 → 0.35 (klant blijft "transparanter" willen)
   
   Bij 0.35 wordt readability echt afhankelijk van de backdrop-filter blur
   (16px). Op heel druk/contrastrijke hero images kan dit lastig worden;
   mocht klant uiteindelijk klagen over leesbaarheid, terug naar 0.45 of een
   blur-only approach (background: transparent + sterkere blur).

   Mobile blijft op 0.65 want klein scherm + transparantie + lange text = lastig
   te lezen. */
.s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
@media (max-width: 768px) {
    .s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
        background: rgba(255, 255, 255, 0.65);
    }
}

/* ─── #4. Tekst-combinatie tekst-tekst: top-align ───
   Klant: "bij de tekst combinatie tekst-tekst moet de 2e tekst wel bovenin
   uitlijnen."

   Diagnose: .bm-tc-grid heeft waarschijnlijk align-items: center (typisch voor
   "media naast tekst" varianten waar afbeelding korter is en zich centreert).
   Voor tekst-tekst variant willen we top-align zodat beide kolommen op dezelfde
   regel beginnen.

   Aanpak: target alleen de tekst-variant via section class .s-bm-tc--tekst
   zodat andere varianten (media/lijst/personen/etc.) hun bestaande centering
   behouden. */
.s-bm-tc--tekst .bm-tc-grid {
    align-items: flex-start;
}

/* ─── #6. PDP about-body — 2 kolommen ───
   Klant: "teksten hierin <div class='upi-pdp__about-body'> verdelen over 2
   kolommen met css."

   CSS columns ipv flex/grid — kan met willekeurige content omgaan (paragrafen,
   lijsten, headings) en breekt natuurlijk zonder dat we de structuur moeten
   kennen. column-gap voorkomt dat paragrafen visueel tegen elkaar plakken.
   column-rule (verticale lijn tussen kolommen) bewust weggelaten — past niet
   bij de huidige minimalistische UPI styling.

   Mobile: 1 kolom (column-count: 1 via media query). Tablet en boven: 2 cols. */
.upi-pdp__about-body {
    column-count: 2;
    column-gap: 2.5rem;
    /* Voorkom dat paragrafen halverwege opgesplitst worden tussen kolommen */
}
.upi-pdp__about-body > * {
    break-inside: avoid;
    /* Eerste element niet onnodig kort om kolom-bovenkant niet ruim te laten */
    margin-top: 0;
}
.upi-pdp__about-body > * + * {
    margin-top: var(--gap-sm, 0.75rem);
}

@media (max-width: 768px) {
    .upi-pdp__about-body {
        column-count: 1;
    }
}

/* ─── #9. Tekst-block centering fix ───
   Klant: "De functionaliteit om de tekst fatsoenlijk uit te lijnen in het midden
   met tekstbreedte 690 werkt niet goed."

   Diagnose: smal_centered gebruikte bm-t-narrow + bm-t-center. bm-t-center zet
   text-align: center op alle regels — slecht leesbaar voor body text. Plus de
   "Uitlijning" knop (ly_tc_uitlijning) stond per ongeluk in het Tekst block-
   config en gaf een DUBBELE control. Beide nu opgeschoond:

   - PHP (tekst.php): smal_centered/normaal_centered gebruikt nu bm-t-centered-block
     (block-only centering, regels blijven links uitgelijnd voor leesbaarheid)
   - ACF (group_bm_content.json): duplicaat ly_tc_uitlijning veld weggehaald
   - CSS hier: bm-t-centered-block bestond al maar miste max-width regulering.
     Voegen toe zodat het correct beperkt wordt bij smal_centered combinatie. */
.bm-t-centered-block.bm-t-narrow {
    /* Beperking is al via bm-t-narrow (max-width: var(--max-narrow), ~690px).
       bm-t-centered-block voegt margin-inline:auto + text-align:left toe.
       Combinatie: blok 690px breed, gecentreerd in container, regels links. */
}

/* ─── #10. Floating contact button — SVG icon swap ───
   Klant heeft een custom UPI envelop-SVG aangeleverd. HTML in
   template-parts/upi-floating-contact.php is geüpdatet. Hier alleen wat
   styling-tweaks zodat de nieuwe SVG (200×200 viewBox, met circle achtergrond
   ingebakken in de SVG) goed gerenderd wordt.

   v1.8.8.0: de nieuwe SVG bevat ZELF een oranje circle als background, dus
   we hebben de eerdere .upi-floating-contact background nodig nog nauwelijks.
   Maar: we behouden 'm als fallback / focus indicator. SVG vult de hele knop. */
.upi-floating-contact__icon svg {
    /* SVG was 24x24, nieuwe SVG is een gevulde cirkel-svg die zichzelf
       centeert. We laten 'm de hele knop vullen want de circle is in de SVG. */
    width: 100%;
    height: 100%;
    color: inherit;
}
/* Achtergrond van de button kan transparant want de SVG heeft eigen circle */
.upi-floating-contact {
    background: transparent;
    box-shadow: none;
    /* Hover blijft de schaduw geven voor lift-effect, maar geen background */
}
.upi-floating-contact:hover,
.upi-floating-contact:focus-visible {
    background: transparent;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.upi-floating-contact__icon {
    /* Icon span vult nu de hele cirkel-knop */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* ─── #11. Cert-icoon SVG sizing (v1.8.8.0 — inline SVG ipv WebP) ───
   .bm-grid-showcase-cert-icoon__svg styling (was .__img in v1.8.7.0).
   Inline SVG is responsief van nature, maar we forceren consistente
   visuele grootte met de andere kaarten. */
.bm-grid-showcase-cert-icoon__svg {
    width: 20px;
    height: 20px;
    display: block;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.2 — Iteratie 4 klant feedback (live-test op v1.8.8.1)

   Vier punten — allemaal CSS, geen HTML/PHP changes:

   #1  PDP about-body 2 kolommen: nu te smal door max-width: 75ch op de parent.
       max-width naar none zodat de kolommen de volle container-breedte krijgen.
   #2  Hero card exact zoals klant aangegeven: bg 0.25, blur 5px (was 0.35 / 16px).
       Dit is de extreemste setting tot nu toe — readability hangt volledig op
       de blur en de overlay. Mocht te lastig: terug naar 0.35.
   #3  PDP gallery thumb border-radius: 4px → 0 (scherpe hoeken passen beter
       bij de UPI brand-stijl, klant wens).
   #4  Hero trust badges op mobile: blijken NOG niet transparant ondanks v1.8.8.1
       fix. Verdere debug: hard override op alle parent/child elementen die ooit
       een background-property kunnen hebben.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── #1. PDP about-body — kolommen breder ───
   v1.8.8.0 voegde column-count: 2 toe op .upi-pdp__about-body, maar regel 5223
   in dit zelfde stylesheet zet max-width: 75ch (gewone reading-width, gemaakt
   voor 1-kolom prose). Dat houdt de hele container smal, dus de 2 kolommen
   worden elk ~35ch breed wat te krap is.

   Fix: max-width override naar none zodat de container de hele parent-breedte
   benut. Daarbinnen blijft column-count: 2 met column-gap zoals v1.8.8.0. */
.upi-pdp__about-body {
    max-width: none;
}

/* ─── #2. Hero card — definitieve setting per klant-spec ───
   Klant aangeleverde CSS exact overgenomen:
     background: rgba(255, 255, 255, 0.25);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);

   Iteratie geschiedenis (voor latere ontwikkelaars):
     v1.8.7.0: 0.92/0.88, blur 10/12px
     v1.8.8.0: 0.55/0.75, blur 16px
     v1.8.8.1: 0.35/0.65, blur 16px
     v1.8.8.2: 0.25 (overal), blur 5px — DEZE setting
   
   NB: mobile heeft nu dezelfde transparantie als desktop (was: meer dekkend
   voor leesbaarheid). Mocht in praktijk mobile te lastig leesbaar zijn, mobile
   media query opnieuw activeren met een tussenwaarde. */
.s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
/* Override de eerdere v1.8.8.1 mobile rule die 0.65 zette */
@media (max-width: 768px) {
    .s-bm-hero--has-media.bm-hero-tekst-donker .bm-hero-content {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

/* ─── #3. PDP gallery thumb — scherpe hoeken ───
   v1.8.8.0 had border-radius: 4px (afgeronde corners, modern-friendly).
   Klant wens: scherpe hoeken voor brand-consistentie met andere elementen
   op de site (productkaarten, certificate badges — allemaal scherp). */
.upi-pdp-gallery__thumb {
    border-radius: 0;
}
/* Main image container: ook scherpe hoeken voor consistentie */
.upi-pdp-gallery__main {
    border-radius: 0;
}

/* ─── #4. Hero trust badges mobile ───
   v1.8.8.1 + v1.8.8.2 pleister-fixes verwijderd in v1.8.8.7.
   De cluster was correct transparant; het waargenomen wit kwam niet van het
   cluster maar van de pagina-achtergrond ERACHTER (position: static op mobile
   → badges renderen als gewoon block-element op witte body). Echte oplossing
   in v1.8.8.7 sectie onderaan dit bestand: position: absolute behouden op
   mobile zodat badges OP de hero blijven liggen. */

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.3 — Sec-CTA in hero: witte achtergrond

   Klant: in de homepage hero is "View products" (de .sec-cta) slecht zichtbaar.
   Logisch — de hero card is nu 25% wit + 5px blur (v1.8.8.2), dus een
   transparante CTA met alleen oranje border valt visueel weg.

   Fix: in de hero-scope krijgt .sec-cta een witte achtergrond. Buiten de hero
   blijft de standaard sec-cta styling (transparant met oranje border) intact —
   die werkt prima op normale witte/lichte pagina-achtergronden.

   Scope: .s-bm-hero (alle hero sections, niet alleen has-media). Reden: als
   later een hero zonder media-background komt en een sec-cta heeft, blijft die
   ook netjes leesbaar met witte fill — wit op wit valt niet op tegen oranje
   border, maar geeft definitie. Geen visueel nadeel.
   ═══════════════════════════════════════════════════════════════════════════ */
.s-bm-hero .sec-cta,
.s-bm-hero a.sec-cta,
.s-bm-hero .sec-cta:visited,
.s-bm-hero a.sec-cta:visited {
    background: #fff;
}
/* Hover state: behoudt de globale hover (oranje fill + witte tekst).
   Geen override nodig — de globale .sec-cta:hover rule wint omdat onze
   custom rule alleen :visited state expliciet noemt. Verifieerbaar: zonder
   :hover override blijft hover-gedrag intact. */


/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.4 — Blog/artikel hero links uitlijnen

   Klant: artikel-hero ("New! XL Brinell reference blocks") moet links
   uitgelijnd zijn ipv gecentreerd. Past beter bij de overige left-aligned
   content op de site (PDPs, archives, section headers per v1.8.7.0+).

   Override op de bestaande style.css regels (regel 2372-2399):
   - .bm-hero-content--artikel: align-items + margin-inline + text-align
   - .bm-hero-meta-info: justify-content + de ::after dot-separator
   ═══════════════════════════════════════════════════════════════════════════ */
.bm-hero-content--artikel {
    align-items: flex-start;   /* was: center */
    margin-inline: 0;          /* was: auto (gecentreerd in container) */
    text-align: left;          /* was: center */
    /* max-width: 800px blijft — beperkt regellengte voor leesbaarheid,
       maar nu staat het blok links ipv gecentreerd in de breedte-normaal. */
}

/* Meta-info (datum/updated/leestijd): nu links uitlijnen */
.bm-hero-content--artikel .bm-hero-meta-info {
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.6 — Blog hero eyebrow ook links uitlijnen (mistte in v1.8.8.4)

   In v1.8.8.4 hebben we .bm-hero-content--artikel naar links gezet
   (align-items: flex-start). Maar style.css regel 7489 zet expliciet
   align-self: center op de eyebrow (.bm-hero-cat--smal) binnen artikel-hero —
   was bewust ingebakken voor de oude gecentreerde layout (v2.5.48).
   
   Nu de hele hero links uitlijnt, moet die overrule ook weg.
   ═══════════════════════════════════════════════════════════════════════════ */
.bm-hero-content--artikel .bm-hero-cat--smal,
.bm-hero-content--artikel .bm-hero-cat {
    align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.7 — Trust badges op mobile: echte oplossing voor "witte achtergrond"

   Voorgeschiedenis (om herhaling te voorkomen):

   Klant meldde drie keer "badges hebben witte achtergrond op mobile". Mijn
   eerste drie fixes (v1.8.8.0/1/2) waren allemaal pleisters: cluster
   transparant maken met steeds meer !important. Dat WAS correct uitgevoerd —
   het cluster was écht transparant. Maar de waargenomen witte rechthoek
   kwam NIET van het cluster. Kwam van:

   Basis CSS (regel 7110-7129 in dit bestand, v1.8.3.0) had:
     @media (max-width: 1024px) {
         .upi-trust--header { position: static; ... }
     }

   Dat haalt de overlay-positionering weg op mobile. Resultaat: badges
   renderen als een gewoon block-element in de document-flow, VÓÓR de hero
   section. De element-eigen background is transparant, maar de pagina-body
   erachter is wit — dus visueel zie je een wit vlak met logo's erop.

   Echte fix: position: absolute behouden op mobile, anders positioneren
   zodat badges binnen het zichtbare hero-image gedeelte landen (achter de
   badges zit dan de blurry hero foto, niet wit). DOM-positie ongewijzigd
   (in page.php als direct child van .main--home, die position: relative is).

   v1.8.8.1 + v1.8.8.2 pleister-rules zijn in v1.8.8.7 uit dit bestand
   weggehaald (zie comments hierboven op de oude posities).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .upi-trust--header {
        /* OVERRULE v1.8.3.0 regel 7110: blijf absolute positioneren */
        position: absolute;
        top: 1rem;
        right: 1rem;
        left: auto;
        /* Container/padding overrides die we niet nodig hebben op mobile */
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
        padding-block: 0;
        justify-content: flex-end;
        /* Lager dan site-header (z-index: site-header is typisch 100+),
           hoog genoeg om boven hero te staan */
        z-index: 5;
        pointer-events: none;
    }
    .upi-trust--header .upi-trust__cluster {
        pointer-events: auto;
        /* Cluster blijft transparant (geen background nodig — hero image
           erachter geeft genoeg contrast/leesbaarheid). */
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        padding: 0;
        gap: 0.75rem;
    }
    .upi-trust--header .upi-trust__badge img {
        width: 55px;
    }
}

/* Smal mobile (<= 640px): badges iets kleiner, dichter tegen rand */
@media (max-width: 640px) {
    .upi-trust--header {
        top: 0.75rem;
        right: 0.75rem;
    }
    .upi-trust--header .upi-trust__badge img {
        width: 45px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8.8.8 — Sec-CTA in hero: hover state fix (wit op wit voorkomen)

   In v1.8.8.3 hebben we sec-cta in hero een witte fill gegeven omdat de
   transparante variant niet zichtbaar was tegen de extreem-transparante hero
   card. Maar de globale .sec-cta:hover rule (style.css regel 964-973) maakt
   de hover: oranje background + witte tekst. Met onze witte fill blijft de
   background dus wit op hover → oranje overrule niet zichtbaar → witte tekst
   op witte fill = onleesbaar.

   Fix: in hero-scope override de hover state. Fill blijft wit, maar tekst en
   border worden donkerder oranje (--color-primary-hover, #d97f00 — dezelfde
   kleur die de pri-cta op hover gebruikt). Visuele feedback bij hover via
   kleur-shift ipv background-flip.
   ═══════════════════════════════════════════════════════════════════════════ */
.s-bm-hero .sec-cta:hover,
.s-bm-hero a.sec-cta:hover,
.s-bm-hero .sec-cta:focus-visible,
.s-bm-hero a.sec-cta:focus-visible {
    background: #fff;          /* houd wit, niet flippen naar oranje */
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.s-bm-hero .sec-cta:hover .button-text,
.s-bm-hero .sec-cta:hover .button-icon,
.s-bm-hero a.sec-cta:hover .button-text,
.s-bm-hero a.sec-cta:hover .button-icon {
    /* Globale rule (style.css 971-973) zet deze op --color-white op hover.
       Hier overrulen met de donkere oranje variant. */
    color: var(--color-primary-hover);
}