/* ============================================================
 * InterRides — Homepage styles
 * Scoped under .interrides-elements and .ir-* classes so it
 * cannot leak into Bricks Builder or WooCommerce defaults.
 * ============================================================ */

/* Hide Bricks default page title + break out of constrained
 * content wrappers when the homepage shortcode is rendered.
 * Uses :has() (Chrome 105+, Safari 15.4+, Firefox 121+). */
#brx-content:has(> .interrides-elements),
#brx-content:has(> .interrides-elements) > * {
    max-width: none !important;
}
#brx-content:has(> .interrides-elements) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
#brx-content:has(> .interrides-elements) > h1:first-child,
#brx-content:has(> .interrides-elements) > .entry-title,
#brx-content:has(> .interrides-elements) > .page-title {
    display: none !important;
}
/* Fallback for browsers without :has — homepage by ID/class */
body.home #brx-content > h1:first-child,
body.home #brx-content > .entry-title { display: none; }
body.home #brx-content { padding: 0; margin: 0; max-width: none; }

.interrides-elements,
.interrides-elements *,
.interrides-elements *::before,
.interrides-elements *::after {
    box-sizing: border-box;
}

.interrides-elements {
    --ir-blue:      #007BFF;
    --ir-blue-2:    #007BFF;   /* hover stays the same blue */
    --ir-blue-deep: #007BFF;   /* deep accent stays the same blue */
    --ir-blue-soft: #e8f2fe;
    --ir-blue-tint: #f0f7ff;
    --ir-green:     #1ecb5c;
    --ir-green-2:   #16b04e;
    --ir-ink:       #0b0f2e;
    --ir-ink-2:     #2a2f4a;
    --ir-muted:     #6b7290;
    --ir-line:      rgba(11, 15, 46, .10);
    --ir-line-2:    rgba(11, 15, 46, .06);
    --ir-radius:    18px;
    --ir-radius-sm: 12px;
    --ir-radius-pill: 999px;
    --ir-shadow:    0 8px 28px rgba(11, 15, 46, .06);
    --ir-shadow-2:  0 14px 40px rgba(11, 15, 46, .10);

    color: var(--ir-ink);
    font-family: inherit;
    line-height: 1.45;
}

.interrides-elements img {
    max-width: 100%;
    height: auto;
    display: block;
}

.interrides-elements a {
    color: inherit;
    text-decoration: none;
}

.interrides-elements button {
    font: inherit;
    cursor: pointer;
}

/* BULLETPROOF: WooCommerce/Bricks add a `.product` class to <main> on single
 * product pages, which can inherit flex/grid layout that places our IR
 * sections side-by-side. Force vertical block stacking. */
body.single-product main,
body.single-product main#brx-content,
body.single-product #brx-content,
main#brx-content.product,
main.product {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    column-count: auto !important;
}
body.single-product main#brx-content > *,
main#brx-content.product > *,
main.product > * {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    flex: 1 0 100% !important;
    float: none !important;
    clear: both !important;
    display: block;
}
/* Sections themselves keep their semantic block display */
body.single-product main#brx-content > section,
body.single-product main#brx-content > footer,
main#brx-content.product > section,
main#brx-content.product > footer {
    display: block !important;
}

/* Single source of truth for the centered content container.
 * Used by every IR section: header, hero, product hero, tabs, related,
 * reviews, footer, etc. Always max 1280px with 24px gutter padding. */
.ir-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .ir-container { padding-left: 16px; padding-right: 16px; }
}

.ir-section {
    padding: 56px 0;
}
@media (max-width: 760px) {
    .ir-section { padding: 36px 0; }
}

.ir-section__head { margin-bottom: 28px; }
.ir-section__head h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.01em;
}
.ir-section__head--xl h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.2;
    max-width: 980px;
}

/* ---------- Inline icon helper ---------- */
.ir-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Buttons ----------
 * Double-ring style: solid color background + 3px inset white ring
 * + 3px outer color ring (via box-shadow). All solid IR buttons use
 * this look so the brand feels consistent everywhere. */
.ir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: var(--ir-radius-pill);
    font-weight: 700;
    font-size: 15px;
    border: 0;
    background: transparent;
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

/* All solid IR buttons — uniform brand style:
 *   Default: #007BFF blue with white inner ring + blue outer ring
 *   Hover:   #000000 black with white inner ring + black outer ring
 * Same colors across blue/green/yellow variants for site-wide consistency.
 * !important on color because the parent Bricks theme applies link colors
 * with high specificity and would otherwise win on <a class="ir-btn">. */
.ir-btn--blue,
.ir-btn--green,
.ir-btn--yellow {
    background: #007BFF;
    color: #fff !important;
    box-shadow:
        inset 0 0 0 3px #fff,
        0 0 0 3px #007BFF;
}
.ir-btn--blue:hover,
.ir-btn--green:hover,
.ir-btn--yellow:hover,
.ir-btn--blue:focus,
.ir-btn--green:focus,
.ir-btn--yellow:focus,
.ir-btn--blue:visited,
.ir-btn--green:visited,
.ir-btn--yellow:visited {
    color: #fff !important;
}
.ir-btn--blue:hover,
.ir-btn--green:hover,
.ir-btn--yellow:hover {
    background: #000000;
    box-shadow:
        inset 0 0 0 3px #fff,
        0 0 0 5px #000000,
        0 6px 16px rgba(0, 0, 0, .25);
    transform: translateY(-1px);
}
/* Inherit white into any text/icon descendants. */
.ir-btn--blue *,
.ir-btn--green *,
.ir-btn--yellow * {
    color: inherit !important;
}
.ir-btn--blue svg,
.ir-btn--green svg,
.ir-btn--yellow svg {
    color: #fff;
    stroke: currentColor;
}

/* White / secondary on dark hero — keeps single-tone look (a white-on-white
 * ring would be invisible). Hover follows the same brand → black pattern. */
.ir-btn--white {
    background: #fff;
    color: var(--ir-ink);
    box-shadow: inset 0 0 0 1px var(--ir-line);
}
.ir-btn--white:hover {
    background: #000000;
    color: #fff;
    box-shadow:
        inset 0 0 0 2px #000000,
        0 6px 16px rgba(0, 0, 0, .15);
    transform: translateY(-1px);
}

.ir-btn--sm { padding: 10px 18px; font-size: 14px; }

/* Icon variant: cirkel + tekst als ÉÉN groep gecentreerd in de button.
 * Werkt strak op zowel smalle (auto-width) als brede (full-width) buttons:
 * de groep blijft compact, geen rare lege ruimte tussen cirkel en tekst. */
.ir-btn--icon {
    padding: 6px 24px 6px 6px;
    gap: 12px;
}
.ir-btn__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 auto;
}
.ir-btn__circle svg,
.ir-btn__circle .ir-ico {
    width: 16px;
    height: 16px;
}
.ir-btn--white .ir-btn__circle { background: rgba(11, 15, 46, .06); color: var(--ir-ink); }

/* ============================================================
 * HEADER
 * ============================================================ */

.ir-header {
    background: #fff;
    border-bottom: 1px solid var(--ir-line-2);
    /* Identical positioning + z-index everywhere — no per-page drift */
    position: relative;
    z-index: 50;
}

/* Bricks wraps the rendered header template in #brx-header. Make THAT the
 * sticky element so the header (incl. USP bar) stays consistently pinned
 * to the top of every page — homepage, shop, product, archives, posts. */
#brx-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    transition: box-shadow .2s ease;
}
#brx-header.is-scrolled {
    box-shadow: 0 4px 16px rgba(11, 15, 46, .08);
}

/* Make sure the slide-in drawer + overlay always sit ABOVE a sticky header */
.ir-header__overlay { z-index: 998; }
.ir-header__drawer  { z-index: 999; }

/* Backdrop tijdens live-search — dimt + blurt page content (sterk).
 * Sleiderink-stijl: nadrukkelijke darkening met duidelijke blur op de
 * achtergrond zodat alleen de search + dropdown er bovenuit komen. */
.ir-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 46, .58);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 150;
}
.ir-search-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Tijdens zoeken: header omhoog boven backdrop zodat het search-form scherp
 * blijft. Header-bg + border-bottom + box-shadow worden TRANSPARANT zodat de
 * backdrop blur er doorheen werkt en je geen harde "snijlijn" onder de header
 * meer ziet. Andere header-onderdelen (logo, nav, acties, USP-bar) krijgen
 * handmatig dezelfde blur+dim — alleen de zoekbalk + dropdown poppen eruit. */
body.is-search-active #brx-header,
body.is-search-active #brx-header.is-scrolled {
    z-index: 300;
    background: transparent;
    box-shadow: none;
    transition: background .25s ease, box-shadow .25s ease;
}
body.is-search-active .ir-header,
body.is-search-active header.brxe-ir-header {
    background: transparent;
    border-bottom-color: transparent;
    transition: background .25s ease, border-color .25s ease;
}
body.is-search-active .ir-header__logo,
body.is-search-active .ir-header__nav-wrap,
body.is-search-active .ir-header__nav,
body.is-search-active .ir-header__actions,
body.is-search-active .ir-usp {
    filter: blur(10px);
    opacity: .25;
    pointer-events: none;
    transition: filter .25s ease, opacity .25s ease;
    user-select: none;
}
/* Search form + dropdown blijven scherp — bovenop alles binnen de header. */
.ir-search-results { z-index: 100; }
body.is-search-active .ir-header__search { z-index: 10; position: relative; }

.ir-header__top { padding: 14px 0; }
.ir-header__top-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

.ir-header__logo img { max-height: 40px; width: auto; }
.ir-header__logo-text {
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.02em;
    color: var(--ir-ink);
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.ir-header__logo-text span {
    color: var(--ir-blue);
    font-style: italic;
    font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0;
}

.ir-header__search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius-pill);
    height: 46px;
    padding-right: 4px;
    position: relative;
}
.ir-header__search input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 15px;
    padding: 0 22px;
    outline: none;
    color: var(--ir-ink);
    width: 100%;
}
.ir-header__search input::placeholder { color: #8f8f8f; }
.ir-header__search button {
    width: 38px; height: 38px;
    border: 0;
    background: var(--ir-blue);
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.ir-header__search button:hover { background: var(--ir-blue-2); }

/* === Live search dropdown === */
.ir-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(11, 15, 46, .12);
    z-index: 100;
    max-height: 70vh;
    overflow-y: auto;
    padding: 12px;
}
.ir-search-results[hidden] { display: none; }
.ir-search-results.is-loading::after {
    content: '';
    display: block;
    width: 24px; height: 24px;
    margin: 20px auto;
    border: 2px solid var(--ir-line);
    border-top-color: var(--ir-blue);
    border-radius: 50%;
    animation: ir-spin 0.7s linear infinite;
}

.ir-search-results__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px 12px;
    border-bottom: 1px solid var(--ir-line-2);
    margin-bottom: 6px;
}
.ir-search-results__head span:first-child {
    font-weight: 800;
    font-size: 14px;
    color: var(--ir-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ir-search-results__count {
    font-size: 12px;
    color: var(--ir-muted);
}

.ir-search-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ir-search-results__item {
    border-bottom: 1px solid var(--ir-line-2);
}
.ir-search-results__item:last-child { border-bottom: 0; }
.ir-search-results__item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    text-decoration: none;
    color: var(--ir-ink);
    border-radius: 10px;
    transition: background .15s;
}
.ir-search-results__item a:hover {
    background: var(--ir-blue-soft);
}

.ir-search-results__media {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #f6f8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.ir-search-results__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 4px;
}
.ir-search-results__ph {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #e3eaff, #cfdaff);
}

.ir-search-results__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ir-search-results__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ir-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ir-search-results__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ir-search-results__price-now {
    font-size: 16px;
    font-weight: 800;
    color: var(--ir-ink);
}
.ir-search-results__price-old {
    font-size: 13px;
    color: var(--ir-muted);
    text-decoration: line-through;
}
.ir-search-results__savings {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #ff3b30;
    padding: 2px 8px;
    border-radius: 999px;
}

.ir-search-results__empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--ir-muted);
    font-size: 14px;
}
.ir-search-results__empty strong { color: var(--ir-ink); }

.ir-search-results__more {
    display: block;
    text-align: center;
    padding: 12px 8px 6px;
    margin-top: 6px;
    border-top: 1px solid var(--ir-line-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--ir-blue);
    text-decoration: none;
}
.ir-search-results__more:hover { text-decoration: underline; }

/* Mobile drawer search dropdown adjustments */
.ir-header__search--mobile .ir-search-results {
    max-height: 50vh;
}

.ir-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ir-header__action {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--ir-line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ir-ink);
    position: relative;
    transition: border-color .2s, color .2s;
}
.ir-header__action:hover { border-color: var(--ir-blue); color: var(--ir-blue); }
.ir-header__cart-badge,
.ir-header__cart .ir-cart-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: #e63946;
    color: #fff;
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.ir-header__cart .ir-cart-count.is-empty {
    display: none;
}
.ir-cart-subtotal {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ir-ink);
}

.ir-header__nav-wrap {
    border-top: 1px solid var(--ir-line-2);
    padding: 6px 0;
}
.ir-header__nav-row {
    display: flex; align-items: center; gap: 16px;
}
.ir-header__nav { flex: 1; }
.ir-header__nav-list,
.ir-header__nav .menu,
.ir-header__nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
/* WP nav menu items + repeater fallback items */
.ir-header__nav .menu-item,
.ir-header__nav-item {
    position: relative;
}
.ir-header__nav .menu-item > a,
.ir-header__nav-item > a {
    display: inline-block;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ir-ink-2);
    border-radius: 8px;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.ir-header__nav .menu-item > a:hover,
.ir-header__nav-item > a:hover { color: var(--ir-blue); }
.ir-header__nav .current-menu-item > a,
.ir-header__nav .current-menu-ancestor > a,
.ir-header__nav-item.is-active > a { color: var(--ir-blue); }

/* Menu-item badge ("Binnenkort", "Nieuw", etc.) */
.ir-header__nav .menu-item.has-badge > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ir-header__nav-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.ir-header__nav .menu-item.has-badge:hover .ir-header__nav-badge {
    background: #fde68a;
}

/* Sub-menu (desktop hover) */
.ir-header__nav .sub-menu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--ir-line-2);
    border-radius: var(--ir-radius);
    box-shadow: 0 14px 30px rgba(11,15,46,.06);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 100;
}
.ir-header__nav .menu-item:hover > .sub-menu,
.ir-header__nav .menu-item:focus-within > .sub-menu { display: flex; }
.ir-header__nav .sub-menu .menu-item > a {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
}
.ir-header__nav .sub-menu .menu-item > a:hover { background: var(--ir-blue-soft); }

.ir-header__sales {
    background: #e63946;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}
.ir-header__sales:hover { background: #c92a37; color: #fff; }

.ir-header__burger {
    display: none;
    width: 40px; height: 40px;
    border: 1.5px solid var(--ir-line);
    border-radius: 8px;
    background: #fff;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
}
.ir-header__burger span {
    width: 18px; height: 2px; background: var(--ir-ink); border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.ir-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ir-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ir-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* USP bar — seamless marquee binnen de container (max 1280px).
 * .ir-usp blijft full-width voor de donkere band; .ir-usp__viewport is
 * de container-gewijde clipper waarin de track scrollt. */
.ir-usp {
    background: #0b0f1f;
    color: #fff;
    padding: 14px 0;
    position: relative;
}
.ir-usp__viewport {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    overflow: hidden;
    box-sizing: border-box;
    /* Soft fade-out aan de linker- en rechterkant — items verdwijnen
     * geleidelijk in de donkere achtergrond i.p.v. abrupt af te kappen. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
}
.ir-usp__track {
    display: flex;
    width: max-content;
    animation: ir-usp-marquee 35s linear infinite;
}
.ir-usp:hover .ir-usp__track { animation-play-state: paused; }

.ir-usp__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 0;
    flex-shrink: 0;
}
.ir-usp__item {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; color: rgba(255,255,255,.86);
    padding: 2px 32px;
    flex-shrink: 0;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,.14);
}
.ir-usp__item .ir-ico { color: var(--ir-blue); width: 20px; height: 20px; }
.ir-usp__item strong { color: #fff; font-weight: 700; }

@keyframes ir-usp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
 * HERO
 * ============================================================ */

.ir-hero { padding-top: 32px; }
.ir-hero__grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    min-height: 420px;
}
.ir-hero__main {
    grid-row: 1 / span 2;
    background: linear-gradient(135deg, #1f43b1 0%, #1638a0 60%, #102a85 100%);
    color: #fff;
    border-radius: 22px;
    padding: 40px 44px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 24px;
    /* Bricks Style → Card hoogtes → Hoofd-card */
    min-height: var(--ir-hero-main-h, auto);
}
.ir-hero__main::before {
    /* radial spotlight as in design */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.18), transparent 60%);
    pointer-events: none;
}
.ir-hero__main-text {
    position: relative;
    max-width: 420px;
}
.ir-hero__main-text h1 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.05;
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.ir-hero__main-text h1 em {
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(180deg, #fff 0%, #cfe0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ir-hero__main-text p {
    font-size: 14px;
    color: rgba(255,255,255,.82);
    margin: 0 0 22px;
    max-width: 360px;
}
.ir-hero__main-img {
    position: relative;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.ir-hero__main-img img {
    max-width: 110%;
    transform: translate(8%, 6%) rotate(-4deg);
    filter: drop-shadow(0 30px 28px rgba(0,0,0,.35));
}
.ir-hero__main-img-ph {
    width: 100%;
    aspect-ratio: 5/3;
    background:
        /* angled light beams as in design */
        linear-gradient(95deg, transparent 38%, rgba(255,255,255,.18) 42%, transparent 50%),
        linear-gradient(105deg, transparent 50%, rgba(255,255,255,.10) 56%, transparent 62%),
        radial-gradient(closest-side at 65% 60%, rgba(255,255,255,.20), transparent 70%),
        /* simple bike silhouette so it doesn't look empty */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'><g fill='none' stroke='%231a2f6e' stroke-width='3' stroke-linecap='round'><circle cx='110' cy='180' r='52' fill='%23121935'/><circle cx='110' cy='180' r='34' fill='none' stroke='%232a3f8a'/><circle cx='110' cy='180' r='6' fill='%232a3f8a'/><circle cx='300' cy='180' r='52' fill='%23121935'/><circle cx='300' cy='180' r='34' fill='none' stroke='%232a3f8a'/><circle cx='300' cy='180' r='6' fill='%232a3f8a'/><path d='M110 180 L180 100 L260 100 L300 180' stroke='%23e6ecff' stroke-width='4'/><path d='M180 100 L210 80 L260 80' stroke='%23e6ecff' stroke-width='4'/><rect x='195' y='110' width='70' height='22' rx='4' fill='%23e6ecff'/></g></svg>") center 60% / 75% no-repeat;
    background-color: transparent;
    border-radius: 18px;
}

.ir-hero__card {
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    min-height: 200px;
    background-color: #1f2740;
    background-size: cover;
    background-position: center;
    color: #fff;
    isolation: isolate;
}
.ir-hero__card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
    z-index: 1;
}
.ir-hero__card--repair {
    background-color: #2c2418;
    /* Bricks Style → Card hoogtes → Promo rechtsboven */
    min-height: var(--ir-hero-repair-h, 200px);
}
.ir-hero__card--kids {
    background-color: #235a8a;
    /* Bricks Style → Card hoogtes → Promo rechtsonder */
    min-height: var(--ir-hero-kids-h, 200px);
}
.ir-hero__card-body {
    position: relative;
    z-index: 2;
    padding: 22px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}
/* Buttons in repair / kids hero cards: auto-breed (geen stretch over hele
 * card-breedte). align-self: flex-start trekt 'm naar links binnen het body
 * flex-container — past beter bij Direct shoppen / Bel ons direct stijl. */
.ir-hero__card .ir-btn {
    align-self: flex-start;
}
.ir-hero__card h3 {
    margin: 0;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 800;
    line-height: 1.15;
    max-width: 220px;
}

@media (max-width: 980px) {
    .ir-hero__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .ir-hero__main { grid-row: auto; padding: 28px; }
    .ir-hero__main {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ir-hero__main-img { display: none; }
}
@media (max-width: 600px) {
    .ir-hero__main { padding: 24px; }
}

/* ============================================================
 * CATEGORY SLIDER + general slider
 * ============================================================ */

.ir-slider { position: relative; }
.ir-slider__viewport {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (3 * 18px)) / 4);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 16px;
}
.ir-slider__viewport::-webkit-scrollbar { display: none; }
.ir-slider__viewport > * { scroll-snap-align: start; }

.ir-slider__viewport--reviews {
    grid-auto-columns: calc((100% - (2 * 18px)) / 3);
}
.ir-slider__viewport--brands {
    grid-auto-columns: calc((100% - (3 * 18px)) / 4);
}

.ir-slider__controls {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 22px;
}
.ir-slider__progress {
    height: 4px;
    background: var(--ir-line-2);
    border-radius: 999px;
    overflow: hidden;
}
.ir-slider__progress span {
    display: block;
    height: 100%;
    width: 25%;
    background: var(--ir-blue);
    border-radius: inherit;
    transition: width .25s, transform .25s;
}
.ir-slider__nav { display: inline-flex; gap: 8px; }

/* Pagination dots — small circles, active is blue. Matches the design. */
.ir-slider__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}
.ir-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d4d8e8;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.ir-slider__dot:hover { background: #a8b3d9; }
.ir-slider__dot.is-active {
    background: var(--ir-blue);
    transform: scale(1.2);
}

.ir-slider__btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1.5px solid var(--ir-line);
    background: #fff;
    color: var(--ir-ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s, background .15s;
}
.ir-slider__btn:hover { border-color: var(--ir-blue); color: var(--ir-blue); }
.ir-slider__btn[disabled] { opacity: .4; cursor: not-allowed; }

@media (max-width: 980px) {
    .ir-slider__viewport { grid-auto-columns: 70%; }
    .ir-slider__viewport--reviews { grid-auto-columns: 80%; }
    .ir-slider__viewport--brands { grid-auto-columns: 50%; }
}
@media (max-width: 600px) {
    .ir-slider__viewport { grid-auto-columns: 78%; }
    .ir-slider__viewport--reviews { grid-auto-columns: 88%; }
    .ir-slider__viewport--brands { grid-auto-columns: 60%; }
}

/* Category card */
.ir-cat-card {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 220px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    color: var(--ir-ink);
}
.ir-cat-card:hover { border-color: var(--ir-blue); box-shadow: var(--ir-shadow); }
.ir-cat-card.is-active {
    border-color: var(--ir-blue);
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, .12), var(--ir-shadow);
}
.ir-cat-card.is-active .ir-cat-card__name { color: var(--ir-blue); }
.ir-cat-card__img {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 120px;
}
.ir-cat-card__img img {
    max-height: 130px;
    object-fit: contain;
}
.ir-cat-card__ph {
    width: 100%;
    aspect-ratio: 5/3;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'><g fill='none' stroke='%23a8b3d9' stroke-width='2' stroke-linecap='round'><circle cx='55' cy='90' r='24' fill='%23eef2fb'/><circle cx='145' cy='90' r='24' fill='%23eef2fb'/><path d='M55 90 L90 50 L130 50 L145 90'/><rect x='95' y='55' width='34' height='12' rx='2' fill='%23a8b3d9'/></g></svg>") center / 80% no-repeat,
        linear-gradient(135deg, #f5f7ff, #e9eefa);
    border-radius: 12px;
}
.ir-cat-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--ir-line-2);
    padding-top: 12px;
}
.ir-cat-card__name {
    font-weight: 700;
    font-size: 15px;
}
.ir-cat-card__go {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ir-blue);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.ir-cat-card:hover .ir-cat-card__go { background: var(--ir-blue-2); transform: rotate(8deg); }

/* ============================================================
 * BESTSELLERS
 * ============================================================ */

.ir-best__action { margin-top: 6px; text-align: center; }

.ir-prod {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s;
}
.ir-prod:hover { border-color: var(--ir-blue); box-shadow: var(--ir-shadow); }

.ir-prod__media {
    position: relative;
    background: #fff;
    aspect-ratio: 5/4;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ir-prod__media img,
.ir-prod__media .ir-prod__img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    transition: transform .3s;
}
.ir-prod:hover .ir-prod__img { transform: scale(1.04); }
.ir-prod__ph {
    width: 70%;
    aspect-ratio: 5/3;
    background: linear-gradient(135deg, #e3eaff, #cfdaff);
    border-radius: 12px;
}
.ir-prod__tag {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    background: var(--ir-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
    pointer-events: none;
}

.ir-prod__body {
    padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 12px;
    flex: 1;
}
.ir-prod__title {
    font-weight: 700;
    font-size: 14px;
    color: var(--ir-ink);
    line-height: 1.35;
    min-height: 2.7em;
}
.ir-prod__title:hover { color: var(--ir-blue); }

.ir-prod__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 10px;
}
.ir-prod__price {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.ir-prod__price del { color: var(--ir-muted); font-weight: 600; font-size: 14px; margin-right: 4px; }
.ir-prod__price ins { text-decoration: none; }
.ir-prod__price .woocommerce-Price-amount { font-weight: 800; }

.ir-prod__cart {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--ir-green);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
    border: 0;
}
.ir-prod__cart:hover { background: var(--ir-green-2); color: #fff; }
.ir-prod__cart.is-disabled {
    background: #c9d0e0;
    pointer-events: none;
}

/* ============================================================
 * ABOUT
 * ============================================================ */

.ir-about {
    background: var(--ir-blue-soft);
    padding: 80px 0;
}
.ir-about__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: center;
}
.ir-about__media {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    /* Ensure absolute children render: aspect-ratio collapses to 0 when the
     * element has no intrinsic width AND only absolutely-positioned children
     * (because absolute children don't contribute to layout). The width:100%
     * above already handles it; min-height is a belt-and-braces fallback for
     * edge browsers. */
    min-height: 1px;
}
.ir-about__shape {
    position: absolute;
    inset: 8% 8%;
    background: radial-gradient(circle at 50% 50%, var(--ir-blue) 0%, var(--ir-blue-deep) 70%);
    border-radius: 50%;
}
.ir-about__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 32px rgba(11, 15, 46, .25));
}
.ir-about__img--ph {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'><g fill='none' stroke='%23e6ecff' stroke-width='4' stroke-linecap='round'><circle cx='110' cy='180' r='52' fill='%231a2f6e'/><circle cx='110' cy='180' r='34' fill='none'/><circle cx='110' cy='180' r='6' fill='%23e6ecff'/><circle cx='300' cy='180' r='52' fill='%231a2f6e'/><circle cx='300' cy='180' r='34' fill='none'/><circle cx='300' cy='180' r='6' fill='%23e6ecff'/><path d='M110 180 L180 100 L260 100 L300 180'/><path d='M180 100 L210 80 L260 80'/><rect x='195' y='110' width='70' height='22' rx='4' fill='%23e6ecff'/></g></svg>") center 60% / 78% no-repeat;
    border-radius: 50%;
}

.ir-about__body h2 {
    margin: 0 0 14px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
}
.ir-about__body p {
    color: var(--ir-ink-2);
    margin: 0 0 22px;
    max-width: 480px;
}
.ir-about__bullets {
    list-style: none; padding: 0; margin: 0 0 26px;
    display: grid; gap: 12px;
}
.ir-about__bullets li {
    display: flex; align-items: center; gap: 12px;
    font-weight: 600;
    color: var(--ir-ink);
}
.ir-about__check {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--ir-blue);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.ir-about__check .ir-ico { width: 14px; height: 14px; }

@media (max-width: 880px) {
    .ir-about { padding: 56px 0; }
    .ir-about__grid { grid-template-columns: 1fr; gap: 32px; }
    .ir-about__media { max-width: 360px; }
}

/* ============================================================
 * REVIEWS
 * ============================================================ */

.ir-reviews { padding: 80px 0; }

.ir-review {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    padding: 26px;
    box-shadow: var(--ir-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 260px;
}
.ir-review__google { display: inline-flex; }
.ir-review__google .ir-ico { width: 28px; height: 28px; }
.ir-review__name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.ir-review__text {
    margin: 0;
    color: var(--ir-ink-2);
    font-size: 14px;
    line-height: 1.55;
    flex: 1;
}
.ir-review__stars {
    display: inline-flex; gap: 2px;
    color: #f5b300;
}
.ir-review__stars .ir-ico { width: 18px; height: 18px; }

/* ============================================================
 * BRANDS
 * ============================================================ */

.ir-brands {
    background: var(--ir-blue-soft);
    padding: 70px 0;
}
.ir-brand-card {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    height: 130px;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    transition: border-color .2s, box-shadow .2s;
}
.ir-brand-card:hover { border-color: var(--ir-blue); box-shadow: var(--ir-shadow); }
.ir-brand-card img { max-height: 60px; max-width: 80%; object-fit: contain; }
.ir-brand-card__name {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--ir-ink);
}

/* ============================================================
 * FAQ
 * ============================================================ */

.ir-faq { padding: 80px 0; }
.ir-faq__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
    align-items: stretch;
}
.ir-faq__list h2 {
    margin: 0 0 24px;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 800;
}

.ir-faq__item {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: 14px;
    padding: 0;
    margin-bottom: 12px;
    transition: border-color .2s, box-shadow .2s;
}
.ir-faq__item[open] { border-color: var(--ir-blue); box-shadow: var(--ir-shadow); }
.ir-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--ir-ink);
    gap: 16px;
}
.ir-faq__item summary::-webkit-details-marker { display: none; }
.ir-faq__chev {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ir-blue-soft);
    color: var(--ir-blue);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    transition: transform .25s, background .2s, color .2s;
}
.ir-faq__chev .ir-ico { width: 14px; height: 14px; }
.ir-faq__item[open] .ir-faq__chev {
    transform: rotate(45deg);
    background: var(--ir-blue);
    color: #fff;
}
.ir-faq__a {
    padding: 0 22px 20px;
    color: var(--ir-ink-2);
    font-size: 14px;
    line-height: 1.6;
}

.ir-faq__cta {
    background: var(--ir-blue);
    background-color: var(--ir-blue);
    background-size: cover;
    background-position: center;
    border-radius: var(--ir-radius);
    min-height: 460px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 28px;
    overflow: hidden;
}
.ir-faq__cta::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(31,67,177,.0) 50%, rgba(11,15,46,.4) 100%);
}
.ir-faq__cta-btn {
    position: relative; z-index: 2;
    box-shadow: 0 14px 30px rgba(11, 15, 46, .25);
}

@media (max-width: 880px) {
    .ir-faq { padding: 56px 0; }
    .ir-faq__grid { grid-template-columns: 1fr; }
    .ir-faq__cta { min-height: 320px; order: 2; }
}

/* ============================================================
 * SLOGAN / FOOTER CTA
 * ============================================================ */

.ir-slogan {
    background: #fff;
    padding: 44px 0;
    border-top: 1px solid var(--ir-line-2);
}
.ir-slogan__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.ir-slogan__text {
    margin: 0;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 800;
    color: var(--ir-ink);
    line-height: 1.25;
    letter-spacing: -.01em;
}
.ir-slogan__list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 22px;
}
.ir-slogan__list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px;
    color: var(--ir-ink-2);
    font-weight: 600;
}
.ir-slogan__check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ir-blue);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.ir-slogan__check .ir-ico { width: 12px; height: 12px; }

@media (max-width: 760px) {
    .ir-slogan__grid { grid-template-columns: 1fr; }
    .ir-slogan__list { grid-template-columns: 1fr; }
}

/* ============================================================
 * FOOTER
 * ============================================================ */

.ir-footer {
    background: #000;
    color: rgba(255,255,255,.85);
    padding-top: 80px;
    margin-top: 0;
}
.ir-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    padding-bottom: 60px;
}
.ir-footer__col h4 {
    color: #fff;
    margin: 0 0 28px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.ir-footer__col ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 18px;
}
.ir-footer__col a {
    color: rgba(255,255,255,.85);
    transition: color .15s;
    font-size: 15px;
    font-weight: 400;
}
.ir-footer__col a:hover { color: #fff; }

.ir-footer__addr {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.85);
}
.ir-footer__addr a { color: rgba(255,255,255,.85); }
.ir-footer__addr a:hover { color: #fff; }

/* WebwinkelKEUR badge — pink circle with check + 2-line text */
.ir-footer__keur {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    line-height: 1.1;
}
.ir-footer__keur-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e5189a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 6px 18px rgba(229, 24, 154, .35);
}
.ir-footer__keur-circle svg { display: block; }
.ir-footer__keur-text {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    line-height: 1.15;
}
.ir-footer__keur-text strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
}

/* Centered payment row */
.ir-footer__pay-wrap {
    padding: 40px 0 50px;
    display: flex;
    justify-content: center;
}
.ir-footer__pay {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.ir-footer__pay li {
    width: 44px;
    height: 33px;
    border-radius: 6px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    line-height: 0;
    color: transparent;
}
/* Official Mollie payment-method icons (locally hosted from
 * mollie.com/external/icons/payment-methods/*) */
.ir-footer__pay li[data-pm="ideal"]      { background-image: url("../img/payment-methods/ideal.svg"); }
.ir-footer__pay li[data-pm="creditcard"],
.ir-footer__pay li[data-pm="mastercard"],
.ir-footer__pay li[data-pm="visa"],
.ir-footer__pay li[data-pm="amex"]       { background-image: url("../img/payment-methods/creditcard.svg"); }
.ir-footer__pay li[data-pm="klarna"]     { background-image: url("../img/payment-methods/klarna.svg"); }
.ir-footer__pay li[data-pm="apple"],
.ir-footer__pay li[data-pm="applepay"]   { background-image: url("../img/payment-methods/applepay.svg"); }
.ir-footer__pay li[data-pm="bancontact"] { background-image: url("../img/payment-methods/bancontact.svg"); }
.ir-footer__pay li[data-pm="paypal"]     { background-image: url("../img/payment-methods/paypal.svg"); }
.ir-footer__pay li[data-pm="in3"]        { background-image: url("../img/payment-methods/in3.svg"); }
.ir-footer__pay li[data-pm="klarnapaylater"] { background-image: url("../img/payment-methods/klarnapaylater.svg"); }

/* Copyright bar — slightly darker */
.ir-footer__copy-bar {
    background: #0a0a0a;
    padding: 22px 0;
    text-align: center;
}
.ir-footer__copy {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.7);
}

@media (max-width: 980px) {
    .ir-footer { padding-top: 56px; }
    .ir-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 40px; }
}
@media (max-width: 520px) {
    .ir-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .ir-footer__pay-wrap { padding: 30px 0 40px; }
    .ir-footer__pay { gap: 8px; }
    .ir-footer__pay li { width: 32px; height: 32px; }
}

/* ============================================================
 * HEADER — slide-in mobile drawer + responsive
 * ============================================================ */

/* Drawer hidden by default (also on desktop; only shown < breakpoint) */
.ir-header__overlay,
.ir-header__drawer { display: none; }

/* Burger only on mobile */
.ir-header__burger { display: none; }

/* Backdrop overlay when drawer is open */
.ir-header__overlay {
    position: fixed; inset: 0;
    background: rgba(11, 15, 46, .55);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
body.ir-menu-open .ir-header__overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Drawer (slides in from LEFT) */
.ir-header__drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ir-drawer-w, 360px);
    max-width: 88vw;
    background: #fff;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,.0,.2,1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 4px 0 30px rgba(11, 15, 46, .15);
}
body.ir-menu-open .ir-header__drawer {
    display: flex;
    transform: translateX(0);
}

.ir-header__drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ir-line-2);
}
.ir-header__drawer-logo img { max-height: 36px; width: auto; }
.ir-header__drawer-close {
    width: 38px; height: 38px;
    border: 0;
    background: var(--ir-blue-soft);
    color: var(--ir-blue);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ir-header__drawer-close:hover {
    background: var(--ir-blue);
    color: #fff;
}

.ir-header__search--mobile {
    margin: 16px 20px;
    flex: 0 0 auto;
}

.ir-header__drawer-nav { padding: 8px 12px 16px; flex: 1; }
.ir-header__drawer-nav .menu,
.ir-header__drawer-nav .ir-header__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ir-header__drawer-nav .menu-item,
.ir-header__drawer-nav .ir-header__nav-item { position: static; }
.ir-header__drawer-nav .menu-item > a,
.ir-header__drawer-nav .ir-header__nav-item > a {
    display: block;
    padding: 14px 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ir-ink);
    border-radius: 8px;
    border-bottom: 1px solid var(--ir-line-2);
}
.ir-header__drawer-nav .menu-item:last-child > a,
.ir-header__drawer-nav .ir-header__nav-item:last-child > a {
    border-bottom: 0;
}
.ir-header__drawer-nav .sub-menu {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 8px 14px;
    background: transparent;
    display: flex !important;
    flex-direction: column;
}
.ir-header__drawer-nav .sub-menu .menu-item > a {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ir-ink-2);
    border-bottom: 0;
}

.ir-header__drawer-foot {
    padding: 16px 20px 24px;
    border-top: 1px solid var(--ir-line-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ir-header__drawer-foot .ir-header__sales {
    text-align: center;
    margin-bottom: 6px;
}
.ir-header__drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ir-blue-soft);
    color: var(--ir-ink);
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s;
    position: relative;
}
.ir-header__drawer-link:hover { background: #d6e8fb; }
.ir-header__drawer-link .ir-cart-count {
    position: static;
    margin-left: auto;
}

/* Lock body scroll when drawer is open */
body.ir-menu-open {
    overflow: hidden;
}

/* Responsive — switch to mobile layout under breakpoint */
@media (max-width: 980px) {
    .ir-header__top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .ir-header__search--desktop { display: none; }
    .ir-header__nav-wrap { display: none; }
    .ir-header__burger {
        display: inline-flex;
        width: 42px; height: 42px;
        border: 1.5px solid var(--ir-line);
        border-radius: 10px;
        background: #fff;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
    }
    .ir-header__burger span {
        width: 18px; height: 2px;
        background: var(--ir-ink);
        border-radius: 2px;
        transition: transform .2s, opacity .2s;
    }
    body.ir-menu-open .ir-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.ir-menu-open .ir-header__burger span:nth-child(2) { opacity: 0; }
    body.ir-menu-open .ir-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .ir-usp__list { gap: 12px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
    .ir-usp__item { white-space: nowrap; }
}
}

/* prevent horizontal overflow site-wide on the homepage */
.interrides-elements { overflow-x: clip; }

/* ============================================================
 * SHOP ARCHIVE — toolbar + sidebar + grid
 * ============================================================ */

/* === Toolbar (title + sort) === */
.ir-shop-toolbar { padding: 36px 0 14px; }
.ir-shop-toolbar__head { margin-bottom: 24px; max-width: 720px; }
.ir-shop-toolbar__title {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--ir-ink);
    letter-spacing: -.01em;
}
.ir-shop-toolbar__sub {
    font-size: 15px;
    color: var(--ir-muted);
    margin: 0;
    line-height: 1.55;
}
.ir-shop-toolbar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ir-line-2);
    border-bottom: 1px solid var(--ir-line-2);
}
.ir-shop-toolbar__keuzehulp {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
}
.ir-shop-toolbar__count {
    margin-right: auto;
    margin-left: 14px;
}

/* Active filter chips row */
.ir-shop-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0 4px;
}
.ir-shop-toolbar__chips-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ir-muted);
    margin-right: 4px;
}
.ir-shop-toolbar__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--ir-blue-soft);
    color: var(--ir-blue);
    border: 1px solid rgba(0, 123, 255, .25);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.ir-shop-toolbar__chip:hover {
    background: var(--ir-blue);
    border-color: var(--ir-blue);
    color: #fff;
}
.ir-shop-toolbar__chip svg {
    flex: 0 0 auto;
    opacity: .7;
}
.ir-shop-toolbar__chip:hover svg { opacity: 1; }

.ir-shop-toolbar__chip-reset {
    margin-left: 4px;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ir-muted);
    text-decoration: underline;
}
.ir-shop-toolbar__chip-reset:hover { color: var(--ir-blue); }
.ir-shop-toolbar__count {
    font-size: 14px;
    color: var(--ir-muted);
}
.ir-shop-toolbar__count strong { color: var(--ir-ink); font-weight: 800; }
.ir-shop-toolbar__sort { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.ir-shop-toolbar__sort-label {
    font-size: 14px;
    color: var(--ir-muted);
}
.ir-shop-toolbar__sort .orderby {
    height: 40px;
    border: 1.5px solid var(--ir-line);
    border-radius: 10px;
    padding: 0 36px 0 14px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0f2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center / 14px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--ir-ink);
    cursor: pointer;
}

/* === Shop layout (sidebar + grid via parent) === */
.ir-shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: flex-start;
    padding: 24px 0 60px;
}
@media (max-width: 980px) {
    .ir-shop-layout { grid-template-columns: 1fr; }
}

/* "Filteren"-toggle in de toolbar — alleen zichtbaar op mobiel,
 * triggert de slide-in drawer. */
.ir-shop-toolbar__filter-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--ir-line);
    background: #fff;
    color: var(--ir-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.ir-shop-toolbar__filter-btn:hover { border-color: var(--ir-blue); color: var(--ir-blue); }
.ir-shop-toolbar__filter-btn svg { flex: 0 0 auto; }

/* Sidebar close button — alleen zichtbaar wanneer de sidebar als drawer staat. */
.ir-shop-sidebar__close {
    display: none;
    background: transparent;
    border: 0;
    padding: 4px;
    margin-left: auto;
    color: var(--ir-ink);
    cursor: pointer;
    line-height: 0;
}
.ir-shop-sidebar__close:hover { color: var(--ir-blue); }

/* Backdrop achter de drawer — wordt door JS in de DOM gezet. */
.ir-shop-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 46, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 998;
}
.ir-shop-sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
body.is-shop-drawer-open { overflow: hidden; }

@media (max-width: 980px) {
    .ir-shop-toolbar__filter-btn { display: inline-flex; }
}

/* === Sidebar === */
.ir-shop-sidebar {
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 16px;
    padding: 6px 22px 22px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
}
.ir-shop-sidebar__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 12px;
    border-bottom: 1px solid var(--ir-line-2);
}
.ir-shop-sidebar__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ir-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ir-shop-sidebar__title::before {
    content: '';
    width: 16px; height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0f2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M7 12h10M11 18h2'/></svg>") center / contain no-repeat;
}
.ir-shop-sidebar__reset {
    font-size: 12px;
    color: var(--ir-muted);
    text-decoration: underline;
}
.ir-shop-sidebar__reset:hover { color: var(--ir-blue); }

.ir-shop-sidebar__group {
    border-bottom: 1px solid var(--ir-line-2);
    padding: 0;
}
.ir-shop-sidebar__group:last-of-type { border-bottom: 0; }
.ir-shop-sidebar__group summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ir-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.ir-shop-sidebar__group summary::-webkit-details-marker { display: none; }
.ir-shop-sidebar__chev {
    width: 18px; height: 18px;
    display: inline-flex;
    transition: transform .2s;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0f2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / 14px no-repeat;
}
.ir-shop-sidebar__group[open] .ir-shop-sidebar__chev {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.ir-shop-sidebar__group-body { padding: 0 0 14px; }

.ir-shop-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 6px;
}
.ir-shop-sidebar__list::-webkit-scrollbar { width: 6px; }
.ir-shop-sidebar__list::-webkit-scrollbar-track { background: transparent; }
.ir-shop-sidebar__list::-webkit-scrollbar-thumb {
    background: var(--ir-line);
    border-radius: 3px;
}
.ir-shop-sidebar__list::-webkit-scrollbar-thumb:hover { background: var(--ir-muted); }

.ir-shop-sidebar__list li { line-height: 1.4; }
.ir-shop-sidebar__list a,
.ir-shop-sidebar__list label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ir-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s;
}
.ir-shop-sidebar__list a:hover,
.ir-shop-sidebar__list label:hover { color: var(--ir-blue); }

/* Custom checkboxes — square (4px radius) with brand-blue fill + white check when active */
.ir-shop-sidebar__list--checks input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    background: #fff;
    border: 2px solid #d4d8e8;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ir-shop-sidebar__list--checks input[type="checkbox"]:hover { border-color: var(--ir-blue); }
.ir-shop-sidebar__list--checks input[type="checkbox"]:checked {
    background: #007BFF;
    border-color: #007BFF;
    box-shadow: 0 2px 6px rgba(0, 123, 255, .25);
}
.ir-shop-sidebar__list--checks input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 65% no-repeat;
}
.ir-shop-sidebar__list--checks input[type="checkbox"]:checked + span,
.ir-shop-sidebar__list--checks label:has(input:checked) > span:first-of-type {
    color: #007BFF;
    font-weight: 700;
}
.ir-shop-sidebar__list--checks label > span:first-of-type { flex: 1; }
.ir-shop-sidebar__count {
    color: var(--ir-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.ir-shop-sidebar__cat {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
}

/* === Price slider === */
.ir-price-slider {
    position: relative;
    height: 28px;
    margin: 12px 0 18px;
}
.ir-price-slider__track {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 4px;
    background: #e9ecf3;
    border-radius: 999px;
    transform: translateY(-50%);
    overflow: hidden;
}
.ir-price-slider__range {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--ir-blue);
    border-radius: 999px;
}
.ir-price-slider__handle {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 28px;
    background: transparent;
    pointer-events: none;
    margin: 0;
}
/* WebKit needs an explicit margin-top of (track_height - thumb_height) / 2
 * to vertically center the thumb on the runnable-track. With a 4px track
 * and 18px thumb that's -7px. Without it the thumb sits below the line. */
.ir-price-slider__handle::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #007BFF;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 123, 255, .25);
    margin-top: -7px;
}
.ir-price-slider__handle::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #007BFF;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 123, 255, .25);
    box-sizing: border-box;
}
.ir-price-slider__handle::-webkit-slider-runnable-track { height: 4px; background: transparent; border: 0; }
.ir-price-slider__handle::-moz-range-track             { height: 4px; background: transparent; border: 0; }

/* Min/max number inputs row */
.ir-price-range {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ir-price-range__symbol {
    font-size: 14px;
    color: var(--ir-muted);
    font-weight: 600;
}
.ir-price-range__sep {
    font-size: 13px;
    color: var(--ir-muted);
}
.ir-price-range input {
    flex: 1;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid var(--ir-line);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ir-ink);
    background: #fff;
    text-align: center;
    -moz-appearance: textfield;
}
.ir-price-range input::-webkit-outer-spin-button,
.ir-price-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ir-price-range input:focus {
    outline: none;
    border-color: var(--ir-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}

.ir-shop-sidebar__apply {
    width: 100%;
    height: 46px;
    margin-top: 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
}

@media (max-width: 980px) {
    /* Sidebar wordt een full-height slide-in drawer vanuit links.
     * Deze rules staan bewust NA de basis .ir-shop-sidebar block zodat
     * ze winnen via cascade-volgorde (zelfde specificiteit). */
    .ir-shop-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 320px;
        max-width: 88vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        border-right: 1px solid var(--ir-line);
        padding: 8px 18px 22px;
        margin: 0;
        z-index: 999;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 0 0 24px rgba(11, 15, 46, .15);
    }
    .ir-shop-sidebar.is-open { transform: translateX(0); }
    .ir-shop-sidebar__close { display: inline-flex; }

    /* Header in drawer-modus iets compacter; de close-knop pakt de
     * margin-left:auto positie via de bestaande rule. */
    .ir-shop-sidebar__head { padding: 12px 0 10px; gap: 12px; }
}

/* AJAX loading state for the shop list */
.ir-shop-list.is-loading {
    position: relative;
    pointer-events: none;
}
.ir-shop-list.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.55);
    border-radius: 16px;
    z-index: 10;
}
.ir-shop-list.is-loading::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid #cfdaff;
    border-top-color: var(--ir-blue);
    border-radius: 50%;
    animation: ir-spin 0.7s linear infinite;
    z-index: 11;
}
@keyframes ir-spin { to { transform: rotate(360deg); } }

/* === Product list (single column, horizontal cards) === */
.ir-shop-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ir-shop-list--empty {
    padding: 40px;
    text-align: center;
    color: var(--ir-muted);
    background: #fff;
    border: 1.5px dashed var(--ir-line);
    border-radius: var(--ir-radius);
}

/* === Horizontal product row (matches fatbikeskopen design) === */
.ir-shop-row {
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 16px;
    padding: 20px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.ir-shop-row:hover {
    border-color: var(--ir-blue);
    box-shadow: 0 10px 30px rgba(11,15,46,.06);
}

/* Top header row: tags left, rating right */
.ir-shop-row__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.ir-shop-row__tags { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ir-shop-row__cat,
.ir-shop-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #e6faf0;
    color: #00874e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
}
.ir-shop-row__badge--new { background: #00b14e; color: #fff; }
.ir-shop-row__badge--new svg { color: #fff; }

.ir-shop-row__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e6faf0;
    color: #00874e;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.ir-shop-row__stars {
    --ir-rate: 0%;
    display: inline-block;
    width: 80px; height: 14px;
    background: linear-gradient(90deg, #00b14e var(--ir-rate), #b6e9cf var(--ir-rate));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'><g fill='black'><path d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(16 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(32 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(48 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(64 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/></g></svg>") no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'><g fill='black'><path d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(16 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(32 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(48 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/><path transform='translate(64 0)' d='M8 1l2.1 4.5 4.9.7-3.5 3.4.8 4.8L8 12l-4.3 2.4.8-4.8L1 6.2l4.9-.7z'/></g></svg>") no-repeat;
}

.ir-shop-row__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ir-ink);
    letter-spacing: -.01em;
}
.ir-shop-row__title a { color: inherit; text-decoration: none; }
.ir-shop-row__title a:hover { color: var(--ir-blue); }

.ir-shop-row__divider {
    border: 0;
    border-top: 1px solid var(--ir-line-2);
    margin: 0;
}

/* Main row: image | features | buy column */
.ir-shop-row__main {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    gap: 22px;
    align-items: stretch;
}
@media (max-width: 980px) {
    .ir-shop-row__main { grid-template-columns: 1fr; }
}

/* Image column */
.ir-shop-row__media {
    position: relative;
    aspect-ratio: 5/4;
    background: #f6f8ff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ir-shop-row__img,
.ir-shop-row__img-hover {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: opacity .25s;
}
.ir-shop-row__img-hover { opacity: 0; }
.ir-shop-row:hover .ir-shop-row__img       { opacity: 0; }
.ir-shop-row:hover .ir-shop-row__img-hover { opacity: 1; }

.ir-shop-row__sticker {
    position: absolute;
    top: 14px; right: 14px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #007BFF;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    z-index: 2;
    transform: rotate(-12deg);
    box-shadow: 0 6px 16px rgba(0, 123, 255, .35);
}
.ir-shop-row__sticker strong { font-size: 18px; line-height: 1; }

.ir-shop-row__ph {
    width: 70%; aspect-ratio: 5/3;
    background: linear-gradient(135deg, #e3eaff, #cfdaff);
    border-radius: 12px;
}

/* Features column */
.ir-shop-row__features {
    padding: 6px 4px;
    align-self: center;
}
.ir-shop-row__features h4 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ir-ink);
}
.ir-shop-row__features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.ir-shop-row__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--ir-ink-2);
    line-height: 1.4;
}
.ir-shop-row__features li svg {
    color: #00b14e;
    flex: 0 0 auto;
    margin-top: 4px;
}

/* Buy column (price + plans + CTA) */
.ir-shop-row__buy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
    align-self: center;
}
.ir-shop-row__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.ir-shop-row__price-now {
    font-size: 28px;
    font-weight: 800;
    color: var(--ir-ink);
    line-height: 1;
}
.ir-shop-row__price-old {
    font-size: 15px;
    color: var(--ir-muted);
    text-decoration: line-through;
}
.ir-shop-row__savings {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: #ff3b30;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Payment plan boxes */
.ir-shop-row__plan {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7f9fd;
    border: 1px solid var(--ir-line-2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ir-ink-2);
}
.ir-shop-row__plan-logo {
    width: 42px;
    height: 26px;
    flex: 0 0 auto;
    background: #fff url("../img/payment-methods/in3.svg") center / contain no-repeat;
    border: 1px solid var(--ir-line-2);
    border-radius: 4px;
    /* hide the "In3" text fallback */
    text-indent: -9999px;
    overflow: hidden;
    color: transparent;
    line-height: 0;
}
.ir-shop-row__plan-text strong { color: var(--ir-ink); font-weight: 800; }

/* CTA */
.ir-shop-row__cta {
    width: 100%;
    height: 48px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 999px;
    margin-top: 4px;
}

/* Delivery line */
.ir-shop-row__delivery {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 13px;
    color: #00874e;
    font-weight: 600;
}
.ir-shop-row__delivery-dot {
    width: 8px; height: 8px;
    background: #00b14e;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0, 177, 78, .2);
}

/* Pagination */
.ir-shop-list__pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 30px;
    padding: 22px 0 0;
    border-top: 1px solid var(--ir-line-2);
}
.ir-shop-list__pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 8px;
    color: var(--ir-ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.ir-shop-list__pagination .page-numbers:hover { border-color: var(--ir-blue); color: var(--ir-blue); }
.ir-shop-list__pagination .page-numbers.current {
    background: var(--ir-blue);
    border-color: var(--ir-blue);
    color: #fff;
}

/* "Laat meer zien"-knop, gerendered als laatste flex-child binnen
 * .ir-shop-list (zodat 'ie in dezelfde grid-kolom valt als de cards).
 * Brand pill met spinner als laad-indicator, centered. */
.ir-shop-list__more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 22px;
    margin-top: 8px;
    border-top: 1px solid var(--ir-line-2);
}
.ir-shop-list__more {
    min-width: 240px;
    height: 52px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ir-shop-list__more[disabled],
.ir-shop-list__more.is-loading {
    cursor: progress;
    opacity: .85;
}
.ir-shop-list__more-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    display: none;
    animation: ir-spin .8s linear infinite;
}
.ir-shop-list__more.is-loading .ir-shop-list__more-spinner { display: inline-block; }
.ir-shop-list__more.is-loading .ir-shop-list__more-text { opacity: .8; }
@keyframes ir-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
 * SINGLE PRODUCT — IR Product Detail
 * ============================================================ */

/* Product hero — full-width section. The inner .ir-container handles
 * the 1280px width constraint and gutter padding. */
.ir-pd {
    padding: 36px 0 60px;
}

.ir-pd__crumb {
    font-size: 14px;
    color: var(--ir-muted);
    margin-bottom: 24px;
}
.ir-pd__crumb a { color: var(--ir-muted); transition: color .15s; }
.ir-pd__crumb a:hover { color: var(--ir-blue); }
.ir-pd__crumb-sep { margin: 0 6px; color: var(--ir-muted); }
.ir-pd__crumb-current { color: var(--ir-ink); font-weight: 600; }

.ir-pd__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

/* Gallery */
.ir-pd__gallery { display: flex; flex-direction: column; gap: 14px; }
.ir-pd__main {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    padding: 24px;
    aspect-ratio: 1 / 0.92;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ir-pd__main img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .2s; }
.ir-pd__main-ph {
    width: 70%;
    aspect-ratio: 5/3;
    background: linear-gradient(135deg, #eef2fb, #d6deef);
    border-radius: 12px;
}

/* Thumbs slider: viewport scrolls, track translates, prev/next outside */
.ir-pd__thumbs-wrap {
    --ir-thumb-cols: 4;
    --ir-thumb-gap: 16px;
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
}
.ir-pd__thumbs-wrap:not(.is-slider) {
    grid-template-columns: 0 1fr 0;
    gap: 0;
}
.ir-pd__thumbs-viewport {
    overflow: hidden;
}
.ir-pd__thumbs {
    display: flex;
    gap: var(--ir-thumb-gap);
    transition: transform .25s ease;
    will-change: transform;
}
.ir-pd__thumbs-wrap:not(.is-slider) .ir-pd__thumbs {
    flex-wrap: wrap;
}
.ir-pd__thumbs-wrap .ir-pd__thumb {
    flex: 0 0 calc((100% - (var(--ir-thumb-cols) - 1) * var(--ir-thumb-gap)) / var(--ir-thumb-cols));
}
.ir-pd__thumbs-nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--ir-line);
    background: #fff;
    color: var(--ir-ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.ir-pd__thumbs-nav:hover:not(:disabled) {
    border-color: var(--ir-blue);
    color: var(--ir-blue);
}
.ir-pd__thumbs-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.ir-pd__thumbs-nav .ir-ico {
    width: 18px;
    height: 18px;
    color: currentColor;
}
.ir-pd__thumbs-nav[hidden] { display: none; }

.ir-pd__thumb {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    padding: 12px;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ir-pd__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ir-pd__thumb:hover    { border-color: var(--ir-blue); }
.ir-pd__thumb.is-active { border-color: var(--ir-blue); box-shadow: 0 0 0 2px rgba(0,123,255,.15); }

/* Info */
.ir-pd__info { padding-top: 8px; }
.ir-pd__title {
    margin: 0 0 16px;
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ir-ink);
    line-height: 1.2;
}
.ir-pd__price {
    display: flex; align-items: baseline; gap: 12px;
    margin: 0 0 14px;
}
.ir-pd__price-now {
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 800;
    color: var(--ir-ink);
    line-height: 1;
}
.ir-pd__price-old {
    font-size: 18px;
    font-weight: 600;
    color: var(--ir-muted);
    text-decoration: line-through;
}

.ir-pd__stock {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 22px;
}
.ir-pd__stock.is-in   { color: var(--ir-green-2); }
.ir-pd__stock.is-out  { color: #c62828; }
.ir-pd__stock .ir-ico { color: currentColor; width: 18px; height: 18px; }

/* Color picker panel (white box with label + swatches) */
.ir-pd__panel {
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    padding: 18px 22px;
    margin: 0 0 18px;
}
.ir-pd__panel-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ir-text, #0b0f2e);
    margin-bottom: 12px;
}
.ir-pd__colors { display: flex; gap: 12px; flex-wrap: wrap; }
.ir-pd__color {
    width: 32px; height: 32px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--ir-c, #000);
    /* Consistente solid border #F0F0F0 op elke swatch (ook zichtbaar op wit). */
    border: 1px solid #F0F0F0;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: border-color .15s, transform .15s;
}
.ir-pd__color:hover {
    transform: scale(1.06);
    border-color: #d9d9d9;
}
/* Checkmark inside the swatch — only shows when active. */
.ir-pd__color-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.ir-pd__color-check .ir-ico {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}
/* Light swatches (white, very light pastels) get a dark check so it stays visible. */
.ir-pd__color[data-ir-light="1"] .ir-pd__color-check { color: #0b0f2e; }
.ir-pd__color.is-active {
    /* Actief: zelfde solid #F0F0F0 border, vinkje binnenin geeft de actief-state aan. */
    border-color: #F0F0F0;
    box-shadow: none;
}
.ir-pd__color.is-active .ir-pd__color-check {
    opacity: 1;
    transform: scale(1);
}

/* Delivery select */
.ir-pd__field { margin: 0 0 18px; }
.ir-pd__field-label {
    display: block;
    font-size: 14px;
    color: var(--ir-muted);
    margin-bottom: 8px;
}
.ir-pd__select {
    width: 100%;
    height: 50px;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    padding: 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ir-ink);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0f2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 16px center / 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.ir-pd__select:focus { outline: 2px solid var(--ir-blue); outline-offset: 2px; }

/* Form: qty + add to cart */
.ir-pd__form {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    margin: 0 0 12px;
    align-items: stretch;
}
/* Unified qty stepper — used by .ir-pd__qty (product page) and .ir-minicart__qty
 * (drawer). One clean white pill — geen interne dividers, subtle border met
 * hover-tint op de buttons. */
.ir-pd__qty,
.ir-minicart__qty {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 999px;
    overflow: hidden;
    height: 52px;
    flex: 0 0 auto;
}
.ir-pd__qty-btn,
.ir-minicart__qty-btn {
    width: 44px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--ir-ink);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, background .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ir-pd__qty-btn:hover,
.ir-minicart__qty-btn:hover {
    color: #007BFF;
    background: rgba(0, 123, 255, .06);
}
.ir-pd__qty-input,
.ir-minicart__qty-input {
    width: 44px;
    height: 100%;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--ir-ink);
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
}
.ir-pd__qty-input::-webkit-outer-spin-button,
.ir-pd__qty-input::-webkit-inner-spin-button,
.ir-minicart__qty-input::-webkit-outer-spin-button,
.ir-minicart__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ir-pd__btn-primary,
.ir-pd__btn-secondary {
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 999px;
    padding: 0;
}
.ir-pd__btn-secondary { margin-bottom: 22px; }

/* Productpagina CTA's volgen de brand-ringstijl van de hero "Afspraak maken":
 * blauwe pill met witte inner ring + blauwe outer halo. Erven via .ir-btn--blue
 * — geen overrides hier nodig. */

/* -------------------------------------------------------------
 * Variable-product wrapper: hide WC's variations table when our
 * swatches are wired to drive selection, restyle WC's add-to-cart
 * button to match the site's pill style.
 * ----------------------------------------------------------- */
.ir-pd__variations.has-swatches table.variations,
.ir-pd__variations.has-swatches .variations_form .reset_variations { display: none !important; }

.ir-pd__variations form.variations_form { margin: 0; }

.ir-pd__variations .single_variation_wrap {
    display: flex; flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}
.ir-pd__variations .single_variation { display: none !important; }
.ir-pd__variations .single_variation .price {
    font-size: 16px; color: var(--ir-muted); font-weight: 600;
}
.ir-pd__variations .single_variation .stock { font-size: 13px; }

.ir-pd__variations .woocommerce-variation-add-to-cart {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: center;
    margin: 0;
}
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 999px;
    overflow: hidden;
    height: 52px;
    width: 100%;
}
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity input.qty {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--ir-ink);
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-outer-spin-button,
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity .action {
    flex: 0 0 44px;
    width: 44px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ir-ink);
    cursor: pointer;
    background: transparent;
    transition: color .15s ease, background .15s ease;
}
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity .action:hover {
    color: #007BFF;
    background: rgba(0, 123, 255, .06);
}
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity .action svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity .action.minus { order: 0; }
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity input.qty       { order: 1; }
.ir-pd__variations .woocommerce-variation-add-to-cart .quantity .action.plus  { order: 2; }
.ir-pd__variations .single_add_to_cart_button {
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: #007BFF;
    color: #fff !important;
    /* Brand ringstijl: witte inner ring + blauwe outer halo (zoals hero CTA). */
    box-shadow:
        inset 0 0 0 3px #fff,
        0 0 0 3px #007BFF;
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
}
.ir-pd__variations .single_add_to_cart_button:hover:not(.disabled):not(.wc-variation-selection-needed),
.ir-pd__variations .single_add_to_cart_button:focus:not(.disabled):not(.wc-variation-selection-needed) {
    background: #000;
    box-shadow:
        inset 0 0 0 3px #fff,
        0 0 0 5px #000,
        0 6px 16px rgba(0, 0, 0, .25);
    transform: translateY(-1px);
}
.ir-pd__variations .single_add_to_cart_button.disabled,
.ir-pd__variations .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}
.ir-pd__variations .woocommerce-variation-availability,
.ir-pd__variations .woocommerce-variation-description {
    font-size: 14px;
    color: var(--ir-muted);
    margin: 4px 0 0;
}

/* USPs */
.ir-pd__usps {
    list-style: none; padding: 0; margin: 0 0 22px;
    display: grid; gap: 10px;
}
.ir-pd__usps li {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px;
    color: var(--ir-ink-2);
}
.ir-pd__usp-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ir-green);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.ir-pd__usp-check .ir-ico { width: 12px; height: 12px; }

/* Payment row inside product info column — Mollie-style chips: witte
 * achtergrond, dunne #ECECEC border, gelijke hoogte. Vierkante chip zodat
 * de (vierkante) iDEAL / in3 / PayPal logo's edge-to-edge passen zonder
 * witte rand links/rechts. Landscape logo's (creditcard, Klarna) krijgen
 * een minimale top/bottom marge — dat valt nauwelijks op. */
.ir-pd__pay {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.ir-pd__pay li {
    width: 43px;
    height: 32px;
    border-radius: 6px;
    background: #fff center / contain no-repeat;
    background-size: cover;
    border: 1px solid #ECECEC;
    overflow: hidden;
    text-indent: -9999px;
    line-height: 0;
    color: transparent;
}
/* Official Mollie payment-method icons */
.ir-pd__pay li[data-pm="ideal"]      { background-image: url("../img/payment-methods/ideal.svg"); }
.ir-pd__pay li[data-pm="creditcard"],
.ir-pd__pay li[data-pm="mastercard"],
.ir-pd__pay li[data-pm="visa"],
.ir-pd__pay li[data-pm="amex"]       { background-image: url("../img/payment-methods/creditcard.svg"); }
.ir-pd__pay li[data-pm="klarna"]     { background-image: url("../img/payment-methods/klarna.svg"); }
.ir-pd__pay li[data-pm="apple"],
.ir-pd__pay li[data-pm="applepay"]   { background-image: url("../img/payment-methods/applepay.svg"); }
.ir-pd__pay li[data-pm="bancontact"] { background-image: url("../img/payment-methods/bancontact.svg"); }
.ir-pd__pay li[data-pm="paypal"]     { background-image: url("../img/payment-methods/paypal.svg"); }
.ir-pd__pay li[data-pm="in3"]        { background-image: url("../img/payment-methods/in3.svg"); }

/* === Sticky add-to-cart bar (single product) ===
 * Verschijnt onderaan zodra de hoofd-CTA uit beeld scrollt. Re-uses de
 * bestaande WC variations_form via een proxy click op de sticky-knop. */
.ir-pd-sticky {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--ir-line);
    box-shadow: 0 -8px 24px rgba(11, 15, 46, .08);
    z-index: 90;
    transform: translateY(100%);
    transition: transform .3s ease;
}
.ir-pd-sticky.is-visible { transform: translateY(0); }
.ir-pd-sticky__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
}
.ir-pd-sticky__media {
    width: 56px; height: 56px;
    flex: 0 0 56px;
    background: #f6f7fb;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ir-pd-sticky__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ir-pd-sticky__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ir-pd-sticky__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--ir-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ir-pd-sticky__variant {
    font-size: 13px;
    color: var(--ir-muted);
    text-transform: capitalize;
}
.ir-pd-sticky__price {
    font-weight: 800;
    font-size: 18px;
    color: var(--ir-ink);
    flex: 0 0 auto;
}
.ir-pd-sticky__cta {
    flex: 0 0 auto;
    padding: 12px 28px;
    font-size: 15px;
    height: 44px;
}

@media (max-width: 600px) {
    .ir-pd-sticky__inner { gap: 10px; padding: 10px 16px; }
    .ir-pd-sticky__media { width: 44px; height: 44px; flex-basis: 44px; }
    .ir-pd-sticky__title { font-size: 13px; }
    .ir-pd-sticky__variant { display: none; }
    .ir-pd-sticky__price { font-size: 16px; }
    .ir-pd-sticky__cta { padding: 10px 18px; font-size: 14px; height: 40px; }
}

/* ============================================================
 * SINGLE PRODUCT — RESPONSIVE
 * Tablet: stack gallery + summary verticaal.
 * Mobile: tighter padding, kleinere typo, qty + cta op één lijn,
 * tabs horizontaal scrollbaar, payment chips iets kleiner.
 * ========================================================== */

/* Tablet en kleiner — 1 kolom layout (override de inline grid van .ir-pd__grid) */
@media (max-width: 980px) {
    .ir-pd__grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }
    .ir-pd__main { padding: 18px; aspect-ratio: 4 / 3; }
    .ir-pd__info { padding-top: 0; }
    .ir-pd__title { margin-bottom: 12px; }
    /* Thumbs als slider blijven netjes — nav arrows behouden voor swipe-gevoel. */
}

/* Mobile portrait — alles strakker, panels minder padding */
@media (max-width: 600px) {
    .ir-pd__crumb {
        font-size: 13px;
        margin-bottom: 16px;
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ir-pd__crumb::-webkit-scrollbar { display: none; }

    .ir-pd__main { padding: 12px; aspect-ratio: 4 / 3; }
    .ir-pd__title  { font-size: 22px; }
    .ir-pd__price-now { font-size: 28px; }
    .ir-pd__price-old { font-size: 16px; }
    .ir-pd__stock { margin-bottom: 16px; }
    .ir-pd__panel { padding: 14px 16px; margin-bottom: 14px; }
    .ir-pd__panel-label { margin-bottom: 10px; }

    /* Qty + add-to-cart op één lijn — qty krimpt naar content, knop pakt rest */
    .ir-pd__form,
    .ir-pd__variations .woocommerce-variation-add-to-cart {
        grid-template-columns: auto 1fr;
        gap: 10px;
    }
    .ir-pd__variations .woocommerce-variation-add-to-cart .quantity { width: auto; min-width: 132px; }

    .ir-pd__btn-primary,
    .ir-pd__btn-secondary,
    .ir-pd__variations .single_add_to_cart_button {
        font-size: 15px;
    }

    /* Thumbs: 4 kolommen en gap iets kleiner */
    .ir-pd__thumbs { gap: 10px; }
    .ir-pd__thumbs-wrap { --ir-thumb-cols: 4; --ir-thumb-gap: 10px; }

    /* Payment chips iets compacter zodat ze lekker passen op kleine scherm */
    .ir-pd__pay { gap: 6px; margin-top: 12px; }
    .ir-pd__pay li { width: 40px; height: 30px; }

    /* Tabs: horizontaal scrollbaar i.p.v. wrappen — voelt native */
    .ir-pt { padding: 16px 0 40px; }
    .ir-pt__tabs {
        gap: 18px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 16px;
    }
    .ir-pt__tabs::-webkit-scrollbar { display: none; }
    .ir-pt__tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 14px;
        padding: 10px 0;
    }
    .ir-pt__desc { font-size: 14px; line-height: 1.65; }

    /* Related + reviews secties strakker tegen onder-rand */
    .ir-rel { padding: 40px 0; }
}

/* Erg klein scherm — qty + cta stacken zodat de cta volle breedte krijgt */
@media (max-width: 380px) {
    .ir-pd__form,
    .ir-pd__variations .woocommerce-variation-add-to-cart {
        grid-template-columns: 1fr;
    }
    .ir-pd__qty,
    .ir-pd__variations .woocommerce-variation-add-to-cart .quantity {
        width: 100%;
        justify-self: stretch;
    }
    .ir-pd__variations .woocommerce-variation-add-to-cart .quantity input.qty {
        flex: 1 1 auto;
    }
}

/* ============================================================
 * IR Product Tabs
 * ============================================================ */

.ir-pt { padding: 24px 0 80px; }

.ir-pt__tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1.5px solid var(--ir-line);
    margin-bottom: 24px;
}
.ir-pt__tab {
    background: transparent;
    border: 0;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ir-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1.5px;
    transition: color .15s, border-color .15s;
}
.ir-pt__tab:hover { color: var(--ir-ink); }
.ir-pt__tab.is-active {
    color: var(--ir-blue);
    border-bottom-color: var(--ir-blue);
}

.ir-pt__panel { display: none; }
.ir-pt__panel.is-active { display: block; }
.ir-pt__panel.is-active.is-fading { opacity: 0; }

.ir-pt__desc { font-size: 15px; line-height: 1.7; color: var(--ir-ink-2); }
.ir-pt__desc h2, .ir-pt__desc h3 { color: var(--ir-ink); }
.ir-pt__empty { color: var(--ir-muted); font-style: italic; }

.ir-pt__specs {
    width: 100%;
    border-collapse: collapse;
    border: 1.5px solid var(--ir-line);
    border-radius: var(--ir-radius);
    overflow: hidden;
    font-size: 14px;
    color: var(--ir-ink);
}
.ir-pt__specs thead th {
    background: var(--ir-blue);
    color: #fff;
    text-align: left;
    font-weight: 700;
    padding: 14px 18px;
    font-size: 14px;
    letter-spacing: .01em;
}
.ir-pt__specs tbody tr:nth-child(odd)  td { background: #fff; }
.ir-pt__specs tbody tr:nth-child(even) td { background: #f6f7fb; }
.ir-pt__specs tbody tr:hover td        { background: rgba(0,123,255,.06); }
.ir-pt__specs td {
    padding: 12px 18px;
    border-top: 1px solid var(--ir-line-2);
    vertical-align: top;
}
.ir-pt__specs-label { font-weight: 600; color: var(--ir-ink); width: 35%; }
.ir-pt__specs-value { color: var(--ir-ink-2); }

@media (max-width: 600px) {
    .ir-pt__specs td { padding: 10px 12px; font-size: 13px; }
    .ir-pt__specs-label { width: 45%; }
}

/* ============================================================
 * IR Related Products
 * ============================================================ */

.ir-rel {
    background: var(--ir-blue-soft);
    padding: 70px 0;
}
.ir-rel .ir-prod.is-active {
    border-color: var(--ir-blue);
    box-shadow: 0 0 0 2px rgba(0,123,255,.15), var(--ir-shadow);
}

/* ============================================================
 * MINI CART (right-side drawer)
 * ============================================================ */
.ir-minicart {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
}
.ir-minicart.is-open {
    pointer-events: auto;
    visibility: visible;
}

.ir-minicart__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 15, 46, .55);
    opacity: 0;
    transition: opacity .3s ease;
}
.ir-minicart.is-open .ir-minicart__overlay { opacity: 1; }

.ir-minicart__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 440px;
    max-width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    box-shadow: -10px 0 40px rgba(11, 15, 46, .2);
}
.ir-minicart.is-open .ir-minicart__panel { transform: translateX(0); }

.ir-minicart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ir-line);
    flex: 0 0 auto;
}
.ir-minicart__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ir-ink);
    margin: 0;
    line-height: 1;
}
.ir-minicart__close {
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ir-ink);
    transition: background .15s ease, color .15s ease;
    padding: 0;
}
.ir-minicart__close:hover { background: rgba(0, 0, 0, .06); color: #007BFF; }

.ir-minicart__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: opacity .15s ease;
}
.ir-minicart__body.is-loading { opacity: .55; pointer-events: none; }

.ir-minicart__body-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Free-shipping progress (brand blue strip) */
.ir-minicart__shipping {
    background: #007BFF;
    color: #fff;
    padding: 18px 24px;
    flex: 0 0 auto;
}
.ir-minicart__shipping-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #fff;
}
.ir-minicart__shipping-text strong { color: #fff; font-weight: 800; }
.ir-minicart__shipping-text bdi { font-weight: 800; }
.ir-minicart__bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}
.ir-minicart__bar > span {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 999px;
    transition: width .4s ease;
}

/* Empty state */
.ir-minicart__empty {
    text-align: center;
    padding: 56px 24px 32px;
    color: var(--ir-muted);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ir-minicart__empty svg { color: var(--ir-line); margin-bottom: 14px; }
.ir-minicart__empty p { margin: 0 0 18px; font-size: 16px; }

/* Item list */
.ir-minicart__items {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}
.ir-minicart__item {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ir-line);
}
.ir-minicart__thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #f5f6fa;
    overflow: hidden;
    display: block;
}
.ir-minicart__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ir-minicart__info { min-width: 0; }
.ir-minicart__name {
    color: var(--ir-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ir-minicart__name:hover { color: #007BFF; }
.ir-minicart__price {
    font-size: 14px;
    color: var(--ir-muted);
}
.ir-minicart__price bdi { font-weight: 700; color: var(--ir-ink); }

/* .ir-minicart__qty styles share the unified .ir-pd__qty rule above.
 * Drawer-specific override: input is read-only (no caret/typing). */
.ir-minicart__qty-input { pointer-events: none; }

.ir-minicart__remove {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--ir-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, color .15s ease;
}
.ir-minicart__remove:hover { color: #d12b2b; background: rgba(209, 43, 43, .08); }

/* Totals */
.ir-minicart__totals {
    padding: 16px 24px;
    border-top: 1px solid var(--ir-line);
    background: #fafbfd;
    flex: 0 0 auto;
}
.ir-minicart__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 14px;
    color: var(--ir-muted);
}
.ir-minicart__row strong { color: var(--ir-ink); font-weight: 700; }
.ir-minicart__row--big {
    font-size: 16px;
    color: var(--ir-ink);
    border-top: 1px solid var(--ir-line);
    margin-top: 6px;
    padding-top: 12px;
}
.ir-minicart__row--big strong { font-size: 20px; font-weight: 800; }

/* CTAs */
.ir-minicart__ctas {
    padding: 16px 24px 24px;
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--ir-line);
    background: #fff;
    flex: 0 0 auto;
}
.ir-minicart__ctas .ir-btn {
    width: 100%;
    justify-content: center;
}

/* Body lock when drawer open */
body.ir-no-scroll { overflow: hidden; }

@media (max-width: 480px) {
    .ir-minicart__panel { width: 100%; }
    .ir-minicart__head,
    .ir-minicart__shipping,
    .ir-minicart__item,
    .ir-minicart__totals,
    .ir-minicart__ctas { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
 * PAGE HERO + LEGAL BODY — both Bricks elements
 *
 * IR Page Hero (.ir-page-hero):
 *   Reusable across Privacy beleid / Retourbeleid / Algemene
 *   voorwaarden / Klachtenafhandeling / Disclaimer / Contact.
 *   Renders title + breadcrumb + lead + "laatst bijgewerkt".
 *
 * IR Legal Content (.ir-legal-body):
 *   Body-only reading column for the 5 legal pages. Renders the
 *   post content with brand-blue accents, custom bullets, etc.
 * ============================================================ */

/* ------ IR Page Hero ------ */
.ir-page-hero {
    --ir-hero-accent: #007BFF;
    --ir-hero-width:  820px;
    display: block;
    width: 100%;
    padding: 64px 24px 56px;
    background: transparent;
    box-sizing: border-box;
}
.ir-page-hero--bg {
    background: linear-gradient(180deg, #f4f7fb 0, #f4f7fb 100%);
    border-bottom: 1px solid var(--ir-line);
}
.ir-page-hero__inner {
    width: 100%;
    max-width: var(--ir-hero-width);
    margin: 0 auto;
    box-sizing: border-box;
}
.ir-page-hero--center .ir-page-hero__inner { text-align: center; }
.ir-page-hero--center .ir-page-hero__crumb { justify-content: center; }

.ir-page-hero__crumb {
    font-size: 13px;
    color: var(--ir-muted);
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.ir-page-hero__crumb a {
    color: var(--ir-muted);
    text-decoration: none;
    transition: color .15s ease;
}
.ir-page-hero__crumb a:hover { color: var(--ir-hero-accent); }
.ir-page-hero__crumb-current { color: var(--ir-ink); font-weight: 600; }

.ir-page-hero__title {
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 800;
    color: var(--ir-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.ir-page-hero__lead {
    font-size: 17px;
    color: var(--ir-muted);
    line-height: 1.6;
    margin: 0 0 12px;
    max-width: 720px;
}
.ir-page-hero--center .ir-page-hero__lead { margin-left: auto; margin-right: auto; }
.ir-page-hero__updated {
    font-size: 13px;
    color: var(--ir-muted);
    margin: 12px 0 0;
}
.ir-page-hero__updated strong { color: var(--ir-ink); font-weight: 600; }

@media (max-width: 600px) {
    .ir-page-hero { padding: 40px 18px 32px; }
}

/* ------ IR Legal Content (body) ------ */
.ir-legal-body {
    --ir-legal-accent: #007BFF;
    --ir-legal-width:  820px;
    display: block;
    width: 100%;
    padding: 56px 24px 96px;
    background: #fff;
    box-sizing: border-box;
}
.ir-legal-body__inner {
    width: 100%;
    max-width: var(--ir-legal-width);
    margin: 0 auto;
    color: #2a2f4a;
    box-sizing: border-box;
}
.ir-legal-body__prose p,
.ir-legal-body__prose li { font-size: 16px; line-height: 1.75; }
.ir-legal-body__prose p { margin: 0 0 18px; }

.ir-legal-body__prose h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 800;
    color: var(--ir-ink);
    line-height: 1.25;
    margin: 56px 0 16px;
    padding-left: 18px;
    border-left: 4px solid var(--ir-legal-accent);
}
.ir-legal-body__prose h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--ir-ink);
    line-height: 1.3;
    margin: 32px 0 10px;
}
.ir-legal-body__prose h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ir-ink);
    margin: 24px 0 8px;
}
.ir-legal-body__prose ul,
.ir-legal-body__prose ol { margin: 0 0 24px; padding-left: 28px; }
.ir-legal-body__prose li { margin-bottom: 10px; }
.ir-legal-body__prose ul { list-style: none; padding-left: 8px; }
.ir-legal-body__prose ul li { position: relative; padding-left: 22px; }
.ir-legal-body__prose ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ir-legal-accent);
}
.ir-legal-body__prose ol { padding-left: 36px; }
.ir-legal-body__prose ol li::marker { color: var(--ir-legal-accent); font-weight: 800; }
.ir-legal-body__prose strong { color: var(--ir-ink); font-weight: 700; }
.ir-legal-body__prose a {
    color: var(--ir-legal-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .15s ease;
}
.ir-legal-body__prose a:hover { color: #000; }
.ir-legal-body__prose blockquote,
.ir-legal-body__prose pre {
    background: #f4f7fb;
    border-left: 4px solid var(--ir-legal-accent);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    margin: 18px 0;
    color: var(--ir-ink);
    font-style: normal;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-wrap;
}
.ir-legal-body__prose hr {
    border: 0;
    height: 1px;
    background: var(--ir-line);
    margin: 48px 0;
}
.ir-legal-body__prose table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    font-size: 15px;
}
.ir-legal-body__prose th,
.ir-legal-body__prose td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ir-line);
}
.ir-legal-body__prose th {
    background: #f4f7fb;
    color: var(--ir-ink);
    font-weight: 700;
}

@media (max-width: 600px) {
    .ir-legal-body { padding: 40px 18px 64px; }
    .ir-legal-body__prose h2 { padding-left: 14px; margin-top: 40px; }
}

/* ============================================================
 * IR ABOUT — variants for image-side + frame-style
 * ============================================================ */
.ir-about--img-right .ir-about__grid {
    grid-template-columns: 1fr 1.05fr;
}
.ir-about--img-right .ir-about__media { order: 2; }
.ir-about--img-right .ir-about__body  { order: 1; }

.ir-about--frame-rect .ir-about__media {
    aspect-ratio: 4/3;
    max-width: none;
    border-radius: 18px;
    overflow: hidden;
}
.ir-about--frame-rect .ir-about__shape { display: none; }
.ir-about--frame-rect .ir-about__img {
    object-fit: cover;
    filter: none;
    border-radius: 18px;
}

/* ============================================================
 * IR HERO BANNER (full-bleed bg-image hero)
 * ============================================================ */
.ir-hero-banner {
    --ir-banner-h: 460px;
    position: relative;
    width: 100%;
    min-height: var(--ir-banner-h);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.ir-hero-banner__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ir-hero-banner--ov-left   .ir-hero-banner__overlay { background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%); }
.ir-hero-banner--ov-bottom .ir-hero-banner__overlay { background: linear-gradient(0deg,  rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 70%); }
.ir-hero-banner--ov-full   .ir-hero-banner__overlay { background: rgba(0,0,0,.45); }
.ir-hero-banner--ov-none   .ir-hero-banner__overlay { display: none; }

.ir-hero-banner__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 64px 24px;
}
.ir-hero-banner__title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 720px;
}
.ir-hero-banner__lead {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
    max-width: 520px;
    margin: 0 0 26px;
}
.ir-hero-banner .ir-btn { color: #fff !important; }

@media (max-width: 720px) {
    .ir-hero-banner { --ir-banner-h: 380px; }
    .ir-hero-banner--ov-left .ir-hero-banner__overlay {
        background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.4) 100%);
    }
}

/* ============================================================
 * IR TEXT SPLIT (heading left / paragraph right)
 * ============================================================ */
.ir-text-split { padding: 80px 0; background: #fff; }
.ir-text-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.ir-text-split__title {
    margin: 0;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: var(--ir-ink);
    line-height: 1.2;
}
.ir-text-split__text {
    margin: 0;
    color: var(--ir-ink-2);
    font-size: 16px;
    line-height: 1.7;
}
@media (max-width: 720px) {
    .ir-text-split { padding: 56px 0; }
    .ir-text-split__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
 * IR FEATURES (4 circular feature tiles)
 * ============================================================ */
.ir-features { padding: 80px 0; background: #fff; }
.ir-features__title {
    text-align: center;
    margin: 0 auto 48px;
    max-width: 720px;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    color: var(--ir-ink);
    line-height: 1.25;
}
.ir-features__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.ir-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}
.ir-features__circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid var(--ir-blue);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ir-blue);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ir-features__circle .ir-ico {
    width: 52px;
    height: 52px;
}
.ir-features__item:hover .ir-features__circle {
    background: var(--ir-blue);
    color: #fff;
    transform: translateY(-4px);
}
.ir-features__label {
    font-weight: 700;
    color: var(--ir-ink);
    font-size: 15px;
    line-height: 1.35;
    max-width: 200px;
}
@media (max-width: 880px) {
    .ir-features__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .ir-features__circle { width: 110px; height: 110px; }
    .ir-features__circle .ir-ico { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
    .ir-features { padding: 56px 0; }
    .ir-features__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* IR Reviews — Google avatar + "when" label */
.ir-review__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f8;
    margin-bottom: 12px;
}
.ir-review__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ir-review__when {
    display: block;
    font-size: 12px;
    color: var(--ir-muted);
    margin: 2px 0 8px;
}

/* ============================================================
 * IR CONTACT — store info card + AJAX form
 * ============================================================ */
.ir-contact { padding: 80px 0; background: #fff; }
.ir-contact__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.ir-contact__heading {
    margin: 0 0 12px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: var(--ir-ink);
}
.ir-contact__lead {
    margin: 0;
    color: var(--ir-muted);
    font-size: 16px;
    line-height: 1.6;
}
.ir-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
.ir-contact__sub {
    font-size: 18px;
    font-weight: 800;
    color: var(--ir-ink);
    margin: 0 0 18px;
}

/* Info card */
.ir-contact__info {
    background: #f4f7fb;
    border-radius: 16px;
    padding: 28px;
}
.ir-contact__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ir-line);
    font-size: 15px;
    color: var(--ir-ink);
}
.ir-contact__row:last-of-type { border-bottom: 0; }
.ir-contact__row .ir-ico {
    width: 22px; height: 22px;
    flex: 0 0 auto;
    color: var(--ir-blue);
    margin-top: 2px;
}
.ir-contact__row a {
    color: var(--ir-ink);
    text-decoration: none;
    transition: color .15s ease;
}
.ir-contact__row a:hover { color: var(--ir-blue); }
.ir-contact__hours {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ir-line);
}
.ir-contact__hours h4 {
    font-size: 14px;
    font-weight: 800;
    color: var(--ir-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 10px;
}
.ir-contact__hours ul {
    list-style: none;
    margin: 0; padding: 0;
}
.ir-contact__hours li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--ir-ink-2);
}
.ir-contact__hours li strong { color: var(--ir-ink); font-weight: 700; }
.ir-contact__map {
    margin-top: 22px;
    border-radius: 12px;
    overflow: hidden;
}
.ir-contact__map iframe {
    width: 100%;
    height: 220px;
    border: 0;
    display: block;
}

/* Form */
.ir-contact__form {
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 16px;
    padding: 28px;
}
.ir-contact__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.ir-contact__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ir-contact__field-row .ir-contact__field { margin-bottom: 16px; }
.ir-contact__field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ir-ink);
    letter-spacing: .01em;
}
.ir-contact__field input,
.ir-contact__field textarea {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid #e5e7ef;
    border-radius: 10px;
    background: #fff;
    color: var(--ir-ink);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.ir-contact__field textarea {
    height: auto;
    min-height: 120px;
    line-height: 1.55;
    resize: vertical;
}
.ir-contact__field input:focus,
.ir-contact__field textarea:focus {
    outline: none;
    border-color: #007BFF;
    box-shadow: 0 0 0 3px rgba(0,123,255,.15);
}
.ir-contact__hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0;
    overflow: hidden;
}
.ir-contact__submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}
.ir-contact__notice {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
}
.ir-contact__notice.is-success {
    display: block;
    background: rgba(30, 203, 92, .12);
    color: #138a3f;
    border: 1px solid rgba(30, 203, 92, .35);
}
.ir-contact__notice.is-error {
    display: block;
    background: rgba(209, 43, 43, .08);
    color: #b21e1e;
    border: 1px solid rgba(209, 43, 43, .25);
}
.ir-contact__form.is-loading {
    opacity: .65;
    pointer-events: none;
}

/* Layout direction modifiers */
.ir-contact--form-left .ir-contact__grid {
    grid-template-columns: 1.2fr 1fr;
    direction: rtl;
}
.ir-contact--form-left .ir-contact__grid > * { direction: ltr; }
.ir-contact--stacked .ir-contact__grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
}
.ir-contact--align-left .ir-contact__head { text-align: left; margin-left: 0; }

/* ---------- Quick action buttons (Bel / WA / Reparatie) ---------- */
.ir-contact__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 980px;
    margin: 0 auto 36px;
}
.ir-contact__action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--ir-ink);
    transition: border-color .15s ease, transform .15s ease;
}
.ir-contact__action:hover {
    border-color: var(--ir-blue);
    transform: translateY(-1px);
}
.ir-contact__action .ir-ico {
    width: 26px; height: 26px;
    color: var(--ir-blue);
    flex: 0 0 auto;
}
.ir-contact__action--wa .ir-ico,
.ir-contact__action--wa svg { color: #25d366; }
.ir-contact__action--appt .ir-ico { color: var(--ir-green-2, #16a34a); }
.ir-contact__action span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ir-contact__action strong { font-size: 15px; font-weight: 700; color: var(--ir-ink); }
.ir-contact__action small { font-size: 13px; color: var(--ir-muted); }

/* ---------- Info card icon wrapper ---------- */
.ir-contact__row-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(0, 123, 255, .08);
    color: var(--ir-blue);
    flex: 0 0 auto;
}
.ir-contact__row-icon .ir-ico { width: 18px; height: 18px; color: inherit; margin-top: 0; }
.ir-contact__row .ir-ico--whatsapp,
.ir-contact__action--wa .ir-ico--whatsapp { color: #25d366; }

/* Override for new icon wrapper — top-row icons no longer need their own size */
.ir-contact__row > .ir-contact__row-icon + div,
.ir-contact__row > .ir-contact__row-icon + a { padding-top: 7px; }

/* ---------- Form lead text ---------- */
.ir-contact__form-lead {
    margin: 0 0 18px;
    color: var(--ir-muted);
    font-size: 14px;
    line-height: 1.55;
}
.ir-contact__field .req { color: #dc2626; }

/* ---------- Closed-day style ---------- */
.ir-contact__hours li.is-closed { color: var(--ir-muted); font-style: italic; }
.ir-contact__hours li.is-closed strong { color: var(--ir-muted); font-weight: 600; }

/* ---------- Better card finish ---------- */
.ir-contact__info,
.ir-contact__form {
    border: 1.5px solid var(--ir-line);
}

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
    .ir-contact { padding: 56px 0; }
    .ir-contact__grid,
    .ir-contact--form-left .ir-contact__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        direction: ltr;
    }
    .ir-contact__field-row { grid-template-columns: 1fr; gap: 0; }
    .ir-contact__actions { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
    .ir-contact__head { margin-bottom: 28px; }
}
@media (max-width: 600px) {
    .ir-contact__action { padding: 14px 16px; }
    .ir-contact__action small { font-size: 12px; }
}

/* ============================================================
 * IR WhatsApp QR — printable click-to-chat code card
 * ============================================================ */
.ir-waqr {
    display: flex;
    gap: 32px;
    padding: 28px;
    background: #fff;
    border: 1.5px solid var(--ir-line);
    border-radius: 20px;
    align-items: center;
    max-width: 720px;
}
.ir-waqr--side       { flex-direction: row; }
.ir-waqr--side-rev   { flex-direction: row-reverse; }
.ir-waqr--stacked    { flex-direction: column; max-width: 420px; align-items: center; text-align: center; }
.ir-waqr--align-center .ir-waqr__body { text-align: center; }

.ir-waqr__qr {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: 12px;
    padding: 8px;
    line-height: 0;
}
.ir-waqr__qr img { display: block; width: 100%; height: auto; }
.ir-waqr__body {
    flex: 1 1 auto;
    min-width: 0;
}
.ir-waqr__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: var(--ir-ink);
}
.ir-waqr__sub {
    margin: 0 0 14px;
    color: var(--ir-muted);
    font-size: 15px;
    line-height: 1.5;
}
.ir-waqr__num {
    margin: 0 0 18px;
    font-size: 14px;
}
.ir-waqr__num-label {
    color: var(--ir-muted);
    margin-right: 6px;
}
.ir-waqr__num a {
    color: var(--ir-ink);
    font-weight: 700;
    text-decoration: none;
}
.ir-waqr__num a:hover { color: #25d366; }
.ir-waqr__btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.ir-waqr__btn::before {
    content: "";
    width: 18px; height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.59 2 2.16 6.43 2.16 11.88c0 1.74.46 3.45 1.32 4.95L2 22l5.31-1.39a9.86 9.86 0 0 0 4.73 1.21h.01c5.45 0 9.88-4.43 9.88-9.88 0-2.64-1.03-5.12-2.88-6.99zM12.05 20.15c-1.49 0-2.96-.4-4.24-1.16l-.3-.18-3.15.83.84-3.07-.2-.32a8.21 8.21 0 0 1-1.26-4.37c0-4.54 3.7-8.23 8.23-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.23 8.23m4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.42-.55-.42-.14 0-.31-.02-.47-.02-.16 0-.43.06-.66.31-.23.25-.86.84-.86 2.05 0 1.21.88 2.38 1.01 2.54.12.16 1.74 2.66 4.22 3.74.59.25 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.11-.23-.18-.48-.3'/></svg>") no-repeat center / contain;
    flex: 0 0 auto;
}
.ir-waqr__download {
    margin: 12px 0 0;
    font-size: 13px;
}
.ir-waqr__download a {
    color: var(--ir-muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--ir-muted);
}
.ir-waqr__download a:hover {
    color: var(--ir-blue);
    border-color: var(--ir-blue);
}

@media (max-width: 720px) {
    .ir-waqr,
    .ir-waqr--side,
    .ir-waqr--side-rev {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .ir-waqr__body { text-align: center; }
    .ir-waqr__btn  { width: 100%; justify-content: center; }
}

/* Print: hide buttons + downloads, keep QR + number large */
@media print {
    .ir-waqr {
        border: none;
        page-break-inside: avoid;
        gap: 12px;
    }
    .ir-waqr__btn,
    .ir-waqr__download { display: none !important; }
    .ir-waqr__qr { border: 0; padding: 0; }
}

/* ============================================================
 * SHADOWS OFF — site-wide override
 * Strips drop shadows, hover lifts, and drop-shadow filters.
 * Keeps the button double-ring identity (inset white + colored
 * outer ring) and active color-swatch indicator since those are
 * functional UI cues, not depth shadows.
 * ============================================================ */

/* Nuke shadows on every IR component (cards, panels, drawers, sliders, etc.) */
[class*="brxe-ir-"],
[class^="ir-"],
[class*=" ir-"] {
    box-shadow: none !important;
}

/* Cancel drop-shadow filters (about image, hero motorcycle, etc.) */
.ir-about__img,
.ir-hero__img,
.ir-pd__main img,
[class*="brxe-ir-"] img,
[class^="ir-"] img {
    filter: none !important;
}

/* Cancel hover lift transforms that came with the shadow elevation */
.ir-btn--blue:hover,
.ir-btn--green:hover,
.ir-btn--yellow:hover,
.ir-btn--white:hover,
.ir-features__item:hover .ir-features__circle {
    transform: none !important;
}

/* Re-apply button double-ring identity (overridden by the strip above).
 * These are the only `box-shadow` that survives — they form the rings,
 * not depth. */
.ir-btn--blue,
.ir-btn--green,
.ir-btn--yellow {
    box-shadow:
        inset 0 0 0 3px #fff,
        0 0 0 3px #007BFF !important;
}
.ir-btn--blue:hover,
.ir-btn--green:hover,
.ir-btn--yellow:hover {
    box-shadow:
        inset 0 0 0 3px #fff,
        0 0 0 5px #000000 !important;
}
.ir-btn--white {
    box-shadow: inset 0 0 0 1px var(--ir-line) !important;
}
.ir-btn--white:hover {
    box-shadow: inset 0 0 0 2px #000000 !important;
}

/* Active color swatch — geen outer halo, solid #F0F0F0 border + interne check.
 * !important houdt deze stijl boven de generieke flatten-shadows reset. */
.ir-pd__color.is-active {
    border: 1px solid #F0F0F0 !important;
    box-shadow: none !important;
}

/* Active size/option swatch ring */
.ir-pd__thumb.is-active {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, .15) !important;
}

/* Form focus indicator (a11y — keep the ring) */
.ir-contact__field input:focus,
.ir-contact__field textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15) !important;
}