body {   color: #000000; } body.s_layout_fixed {   background-color: #ffffff;   background-image: url('https://bkfietsonderdelen.nl/catalog/view/theme/tsb_theme/images/texture_2.png');   background-repeat: repeat;   background-position: top left;   background-attachment: scroll; } .s_main_color, #twitter li span a, .s_button_add_to_cart, .checkout-heading a, .s_plain .s_price, .s_plain .s_price * {   color: #71b013; } #welcome_message, #welcome_message a, #welcome_message .fa {   color: #000000; } #footer_categories h2 a:hover {   color: #65a800 !important; }   .s_main_color_bgr, .s_main_color_bgr input, #cart .s_icon, #shop_contacts .s_icon, .s_list_1 li:before, .s_button_add_to_cart .s_icon, #intro .s_button_prev, #intro .s_button_next, .buttons .button, .noty_message button.s_main_color_bgr, .s_notify .s_success_24, .s_button_wishlist .s_icon, .s_button_compare .s_icon, .s_product_row .s_row_number, .jcarousel-prev, .jcarousel-next, #listing_options .display input[type="submit"] {   background-color: #71b013; }  .fa, .cart_menu .s_icon, #menu_home .fa:hover, .categories ul li li a:hover, .site_search .fa-magnifying-glass, .wishlist-icon {   color: #71b013; }  .site_search .fa-magnifying-glass, #search_bar_mobile .fa-magnifying-glass {   background-color: #71b013; }   .buttons input[type=submit].button, .buttons input[type=button].button, .noty_message button.s_main_color_bgr {   border: 3px solid #71b013; } .s_secondary_color, a:hover, .categories > ul > li > a, .pagination a, #view_mode .s_selected a, #welcome_message a:hover {   color: #65a800; } #footer_categories h2, #footer_categories h2 a, #footer_nav .noneSEO_H2, #footer_nav .noneSEO_H2 .fa {   color: #000000; } #content a:hover, #shop_info a:hover, #footer a:hover, #intro h1 a:hover, #intro h2 a:hover, #content a:hover, #shop_info a:hover, #footer a:hover, #breadcrumbs a:hover {   color: #65a800; } .s_secondary_color_bgr, #view_mode .s_selected .s_icon, #view_mode a:hover .s_icon, .pagination a:hover, .s_button_add_to_cart:hover .s_icon, .s_notify .s_failure_24, #product_share .s_review_write:hover .s_icon, .s_button_wishlist:hover .s_icon, .s_button_compare:hover .s_icon, .noty_message button.s_secondary_color_bgr {   background-color: #65a800; } .noty_message button.s_secondary_color_bgr {   border: 3px solid #65a800; } #intro {   background-color: #FFFFFF; } #intro, #breadcrumbs a {   color: #385217; } #intro h1, #intro h1 *, #intro h2, #intro h2 * {   color: #111c05; } #intro .s_rating {   ~background-color: #FFFFFF; }   h1, h2, h3, .s_box h2, .box .box-heading {   color: #000000; }  .s_label .s_price, .s_label .s_price *, .s_plain .s_price, .s_plain .s_price *, .s_price_holder .s_price, .s_price_holder .s_price * {   color: #679916; }  *::-moz-selection {   color: #fff;   background-color: #71b013; } *::-webkit-selection {   color: #fff;   background-color: #71b013; } *::selection {   color: #fff;   background-color: #71b013; }  .scroll_top{ 	color: #111c05; 	background: #FFFFFF; } body #wrapper {   background-color: #ffffff; } .categories .s_submenu, .categories .s_submenu ul ul, .cart_menu .s_submenu, .s_switcher .s_options, .wishlist-icon {   background-color: #ffffff; } .main_navigation.desktop.is-sticky, .main_navigation.desktop.force-sticky, .main_navigation.mobile {   background-color: #ffffff; } :root {   --border-color: #f2f2f2;   --color-main: #71b013;   --color-secondary: #65a800;   --color-background: #ffffff;   --color-wrapper-bg: #ffffff;   --color-header-bg: #ffffff;   --color-text: #000000;   --color-title: #000000;   --color-intro: #FFFFFF;   --color-intro-text: #385217;   --color-intro-title: #111c05;   --color-price: #679916;   --color-price-text: #ffffff;   --color-promo-price: #f12b63;   --color-promo-price-text: #ffffff; }   /* =========================================================
   BK FIETSONDERDELEN - COMPLETE CUSTOM CSS
   ========================================================= */


/* =========================================================
   ALGEMEEN
   ========================================================= */

.product_discounts_table {
    border: 3px solid var(--border-color);
}

.right #shipping-method .checkout-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;
}

#noStockMessage,
.notifyme {
    font-size: 13px;
}

#product_description {
    display: block;
}

#footer_inner .simple_link {
    border: none !important;
}

.s_category_thumb,
#payments_types img {
    width: auto;
    height: auto;
}

.wishlist-icon {
    background: transparent;
}


/* =========================================================
   PRODUCTPAGINA
   ========================================================= */

@media only screen and (min-width: 1000px) {

    #product_images {
        width: 40%;
    }

    #product_image_preview img {
        padding: 100px;
    }
}

@media only screen and (min-width: 768px) {

    #productfilm {
        width: 500px !important;
        height: 300px !important;
    }
}


/* =========================================================
   PRODUCTOVERZICHT
   ========================================================= */

.s_item_info {
    align-items: center;
}

.s_item_info div.s_actions {
    justify-content: center;
}

.s_item_info h3,
#blog_wrapper .entry {
    text-align: center;
}

.s_item_info .post_description h3,
.post_description h3 a {
    text-align: left !important;
}

.s_listing_subcategory {
    margin-bottom: 50px;
}

#s_listing_subcategory .s_thumb {
    height: 230px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* =========================================================
   BANNER
   ========================================================= */

.banner-container {
    text-align: center;
}

.banner {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 15%;
}

@media (min-width: 1000px) {
    .banner {
        max-width: 85%;
    }
}

@media (max-width: 600px) {
    .banner {
        max-width: 90%;
    }
}


/* =========================================================
   PRODUCTGRID
   ========================================================= */

.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
}

.image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   PRODUCTTITELS
   ========================================================= */

.product-title {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 5px 0;
    min-height: 57px;
    line-height: 19px;
}

.s_item_info h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 36ch;
    min-height: 57px;
    line-height: 19px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-bottom: 5px;
}


/* =========================================================
   RATINGS
   ========================================================= */

.product-rating {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
    min-height: 20px;
}

.s_actions.s_rating,
.listitempage .s_actions.s_rating {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   BESTELKNOPPEN
   ========================================================= */

.s_button_add_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    margin-top: auto;

    background-image: linear-gradient(135deg, #c0d56e, #419bd6);
    background-size: 200% 200%;

    border: none;
    border-radius: 30px;

    color: #fff;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: clamp(12px, 2vw, 16px);

    text-decoration: none;
    cursor: pointer;

    transition: all 0.5s ease;

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    box-sizing: border-box;
}

.s_button_add_to_cart span,
.s_button_add_to_cart span.s_icon_16 {
    color: #fff !important;
}

.s_button_add_to_cart.in-stock {
    color: #00ff00;
}

.s_button_add_to_cart.in-stock:hover {
    transform: scale(1.05);
    background-image: linear-gradient(135deg, #a8c65a, #3580c1);
    animation: gradientShift 3s ease infinite,
               glowPulse 2s ease-in-out infinite;
}

.s_button_add_to_cart.in-stock:hover span.s_icon_16 {
    color: #222 !important;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes glowPulse {
    0% {
        box-shadow:
            0 6px 20px rgba(0,0,0,0.25),
            0 0 10px rgba(255,255,255,0.2);
    }

    50% {
        box-shadow:
            0 6px 25px rgba(0,0,0,0.25),
            0 0 25px rgba(255,255,255,0.35);
    }

    100% {
        box-shadow:
            0 6px 20px rgba(0,0,0,0.25),
            0 0 10px rgba(255,255,255,0.2);
    }
}

.s_button_add_to_cart:focus,
.s_button_add_to_cart:active {
    outline: none;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}


/* Niet op voorraad */

.s_button_add_to_cart.out-of-stock {
    color: #ff0000;
    background: #cccccc;
    cursor: not-allowed;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.s_button_add_to_cart.out-of-stock:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background: #cccccc;
}


/* Mobiel productknoppen */

@media (max-width: 480px) {

    .image-container {
        height: 150px;
    }

    .s_button_add_to_cart {
        height: 44px;
        padding: 0 20px;
        font-size: clamp(10px, 3vw, 14px);
    }

    .s_button_add_to_cart.out-of-stock {
        font-size: 11px;
    }
}


/* =========================================================
   NIEUWE DESKTOP MENUBALK
   ========================================================= */

@media only screen and (min-width: 1001px) {

    /* Complete rij: menu + winkelmand */
    .logo_menu_wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 70px !important;
        align-items: stretch !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        column-gap: 0 !important;
    }

    /* Sticky logo niet in deze rij */
    .logo_menu_wrapper > .logo.logo-sticky {
        display: none !important;
    }


    /* =====================================================
       GROENE MENUBALK
       ===================================================== */

    .logo_menu_wrapper > .categories.s_nav.with_cart {
        grid-column: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #2b8717 !important;

        border: none !important;
        border-radius: 7px 0 0 7px !important;

        box-sizing: border-box !important;
    }

    .categories.s_nav.with_cart[style] {
        width: 100% !important;
    }


    /* =====================================================
       HOOFDMENU
       ===================================================== */

    .categories.s_nav.with_cart > ul.full_menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: none !important;
        border-radius: 0 !important;

        list-style: none !important;

        box-sizing: border-box !important;
    }

    .categories.s_nav.with_cart > ul.full_menu > li {
        position: relative !important;

        display: flex !important;
        align-items: stretch !important;

        float: none !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        flex: 1 1 auto !important;
    }

    /* Home compact */
    .categories.s_nav.with_cart > ul.full_menu > #menu_home {
        flex: 0 0 56px !important;
    }

    /* Blog compacter */
    .categories.s_nav.with_cart > ul.full_menu > .menu_124 {
        flex: 0 1 auto !important;
    }


    /* =====================================================
       HOOFDMENU LINKS
       ===================================================== */

    .categories.s_nav.with_cart > ul.full_menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 54px !important;

        padding: 0 10px !important;

        background: transparent !important;

        color: #fff !important;

        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
        text-decoration: none !important;

        border: none !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        box-sizing: border-box !important;

        transition:
            background-color 0.18s ease,
            color 0.18s ease !important;
    }

    .categories.s_nav.with_cart > ul.full_menu > li:hover > a {
        background: #216c11 !important;
        color: #fff !important;
    }

    .categories.s_nav.with_cart .main-mcat {
        background: transparent !important;
        color: #fff !important;

        border: none !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }


    /* =====================================================
       HOME
       ===================================================== */

    .categories.s_nav.with_cart #menu_home > a {
        width: 56px !important;
        padding: 0 !important;

        color: #fff !important;

        border-radius: 7px 0 0 7px !important;
    }

    .categories.s_nav.with_cart #menu_home > a i {
        color: #fff !important;
        font-size: 17px !important;
    }


    /* =====================================================
       ALGEMENE DROPDOWNS
       ===================================================== */

    .categories.s_nav.with_cart
    .s_category_menu > .s_submenu {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;

        z-index: 9999 !important;

        padding: 22px 24px !important;

        background: #fff !important;
        color: #222 !important;

        border: 1px solid #e8e8e8 !important;
        border-top: none !important;

        border-radius: 0 0 10px 10px !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,0.12) !important;

        box-sizing: border-box !important;
    }

    .categories.s_nav.with_cart .s_category_group {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        background: #fff !important;
    }

    .categories.s_nav.with_cart
    .s_category_group > h3.mobile {
        display: none !important;
    }


    /* Algemene dropdown-link styling */

    .categories.s_nav.with_cart
    .s_list_1 {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .categories.s_nav.with_cart
    .s_list_1 > li {
        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        box-sizing: border-box !important;
    }

    .categories.s_nav.with_cart
    .s_list_1 > li > a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        padding: 6px 10px !important;

        box-sizing: border-box !important;

        font-size: 14px !important;
        font-weight: 400 !important;

        line-height: 20px !important;

        white-space: normal !important;

        color: #333 !important;
        background: transparent !important;

        border: none !important;
        border-radius: 6px !important;

        text-decoration: none !important;

        transition:
            background-color 0.15s ease,
            color 0.15s ease !important;
    }

    .categories.s_nav.with_cart
    .s_list_1 > li > a:hover,
    .categories.s_nav.with_cart
    .s_list_1 > li > a:focus,
    .categories.s_nav.with_cart
    .s_list_1 > li > a:active {
        padding: 6px 10px !important;

        background: #f1f8ee !important;

        color: #2b8717 !important;
    }


    /* =====================================================
       FIETSONDERDELEN
       29 items
       10 + 10 + 9
       ===================================================== */

    .categories.s_nav.with_cart
    .menu_60 > .s_submenu {
        width: 900px !important;
    }

    .categories.s_nav.with_cart
    .menu_60 .s_list_1 {
        display: grid !important;

        grid-auto-flow: column !important;
        grid-template-rows: repeat(10, minmax(40px, auto)) !important;
        grid-template-columns: repeat(3, 1fr) !important;

        column-gap: 34px !important;
        row-gap: 0 !important;

        position: relative !important;
    }


    /* =====================================================
       FIETSACCESSOIRES
       20 items
       EXACT 7 + 7 + 6
       boven -> beneden -> volgende kolom
       ===================================================== */

    .categories.s_nav.with_cart
    .menu_125 > .s_submenu {
        width: 800px !important;
    }

    .categories.s_nav.with_cart
    .menu_125 .s_list_1 {
        display: grid !important;

        grid-auto-flow: column !important;

        grid-template-rows:
            repeat(7, minmax(42px, auto)) !important;

        grid-template-columns:
            repeat(3, 1fr) !important;

        column-gap: 34px !important;
        row-gap: 0 !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
    }


    /* Verticale lijn tussen kolommen */

    .categories.s_nav.with_cart
    .menu_125 .s_list_1::before,

    .categories.s_nav.with_cart
    .menu_125 .s_list_1::after {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        width: 1px;

        background: #eeeeee;

        pointer-events: none;
    }

    .categories.s_nav.with_cart
    .menu_125 .s_list_1::before {
        left: 33.333%;
    }

    .categories.s_nav.with_cart
    .menu_125 .s_list_1::after {
        left: 66.666%;
    }

    .categories.s_nav.with_cart
    .menu_125 .s_list_1 > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }

    .categories.s_nav.with_cart
    .menu_125 .s_list_1 > li > a {
        display: flex !important;
        align-items: center !important;

        min-height: 42px !important;

        padding: 6px 10px !important;

        line-height: 20px !important;

        white-space: normal !important;
    }


    /* =====================================================
       FIETSGEREEDSCHAP
       17 items
       6 + 6 + 5
       ===================================================== */

    .categories.s_nav.with_cart
    .menu_131 > .s_submenu {
        width: 760px !important;
    }

    .categories.s_nav.with_cart
    .menu_131 .s_list_1 {
        display: grid !important;

        grid-auto-flow: column !important;

        grid-template-rows:
            repeat(6, minmax(40px, auto)) !important;

        grid-template-columns:
            repeat(3, 1fr) !important;

        column-gap: 34px !important;
        row-gap: 0 !important;

        position: relative !important;
    }


    /* =====================================================
       FIETSEN
       5 items
       ===================================================== */

    .categories.s_nav.with_cart
    .menu_112 > .s_submenu {
        width: 280px !important;
    }

    .categories.s_nav.with_cart
    .menu_112 .s_list_1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 0 !important;
    }


    /* =====================================================
       WINKELMAND
       ===================================================== */

    .logo_menu_wrapper > .desktop-menu-icons {
        grid-column: 2 !important;

        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;

        width: 70px !important;
        min-width: 70px !important;

        height: 54px !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #2b8717 !important;

        border-radius: 0 7px 7px 0 !important;

        box-sizing: border-box !important;
    }

    .logo_menu_wrapper >
    .desktop-menu-icons >
    .force-sticky-icons {
        display: none !important;
    }

    .logo_menu_wrapper >
    .desktop-menu-icons >
    .cart_menu.s_nav {
        width: 70px !important;
        min-width: 70px !important;

        height: 54px !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #2b8717 !important;

        border: none !important;

        border-radius: 0 7px 7px 0 !important;

        box-sizing: border-box !important;
    }

    .logo_menu_wrapper >
    .desktop-menu-icons >
    .cart_menu.s_nav >
    a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 70px !important;
        height: 54px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        color: #fff !important;

        border: none !important;
        border-radius: 0 7px 7px 0 !important;

        transition:
            background-color 0.18s ease !important;
    }

    .logo_menu_wrapper .fa-bag-shopping {
        color: #fff !important;
        font-size: 18px !important;
    }

    .logo_menu_wrapper >
    .desktop-menu-icons >
    .cart_menu.s_nav >
    a:hover {
        background: #216c11 !important;
    }


    /* Winkelwagen dropdown */

    .desktop-menu-icons
    .cart_menu
    .s_cart_holder {
        background: #fff !important;
        color: #222 !important;

        border: 1px solid #e8e8e8 !important;

        border-radius: 0 0 8px 8px !important;

        box-shadow:
            0 10px 25px rgba(0,0,0,0.12) !important;
    }

    .desktop-menu-icons
    .cart_menu
    .s_cart_wrapper {
        background: #fff !important;
        color: #222 !important;
    }

    .desktop-menu-icons
    .cart_menu
    .empty {
        color: #666 !important;
    }
}


/* =========================================================
   MOBIEL / TABLET
   Originele sidenav behouden
   ========================================================= */

@media only screen and (max-width: 1000px) {

    .categories.s_nav.with_cart,
    ul.full_menu,
    .desktop-menu-icons {
        background: transparent !important;
    }
}

/* =========================================================
   NIEUW IN ONS ASSORTIMENT BANNER
   ========================================================= */

/* Basis */
img[src*="banner-nieuwe-onderdelen2.png"] {
    display: block !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* Oude position/transform instellingen uitschakelen */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media only screen and (min-width: 1001px) {

    img[src*="banner-nieuwe-onderdelen2.png"] {
        width: 1320px !important;
        max-width: calc(100vw - 220px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (min-width: 601px) and (max-width: 1000px) {

    img[src*="banner-nieuwe-onderdelen2.png"] {
        width: 94% !important;
        max-width: 94% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media only screen and (max-width: 600px) {

    img[src*="banner-nieuwe-onderdelen2.png"] {
        width: 96% !important;
        max-width: 96% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

}


/* =========================================================
   BK FIETSONDERDELEN - ONDERSTE FOOTER
   Informatie / Mijn account / Klantenservice
   ========================================================= */


/* =========================================================
   BASIS
   ========================================================= */

#footer-first-column,
#footer-third-column,
#footer-fourth-column {
    position: relative !important;
    box-sizing: border-box !important;
}


/* =========================================================
   TITELS
   ========================================================= */

#footer-first-column > .noneSEO_H2,
#footer-third-column > .noneSEO_H2,
#footer-fourth-column > .noneSEO_H2 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    position: relative !important;

    color: #111111 !important;

    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    margin: 0 0 16px 0 !important;
    padding: 0 0 14px 0 !important;
}


/* =========================================================
   GROENE ICONEN
   ========================================================= */

#footer-first-column > .noneSEO_H2 i,
#footer-third-column > .noneSEO_H2 i,
#footer-fourth-column > .noneSEO_H2 i {
    color: #2b8717 !important;

    font-size: 22px !important;

    width: 24px !important;
    min-width: 24px !important;

    text-align: center !important;
}


/* =========================================================
   GROEN STREEPJE ONDER TITEL
   ========================================================= */

#footer-first-column > .noneSEO_H2::after,
#footer-third-column > .noneSEO_H2::after,
#footer-fourth-column > .noneSEO_H2::after {
    content: "" !important;

    position: absolute !important;

    left: 36px !important;
    bottom: 0 !important;

    width: 30px !important;
    height: 2px !important;

    background: #2b8717 !important;

    border-radius: 2px !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media only screen and (min-width: 1001px) {

    /* -----------------------------------------------------
       INFORMATIE
       7 links = 4 links links / 3 links rechts
       ----------------------------------------------------- */

    #footer-first-column > ul.s_list_1 {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows:
            repeat(4, auto) !important;

        grid-auto-flow: column !important;

        column-gap: 20px !important;
        row-gap: 14px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* -----------------------------------------------------
       MIJN ACCOUNT
       4 links = 2 + 2
       ----------------------------------------------------- */

    #footer-third-column > ul.s_list_1 {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows:
            repeat(2, auto) !important;

        grid-auto-flow: column !important;

        column-gap: 25px !important;
        row-gap: 14px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* -----------------------------------------------------
       KLANTENSERVICE
       4 links = 2 + 2
       ----------------------------------------------------- */

    #footer-fourth-column > ul.s_list_1 {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows:
            repeat(2, auto) !important;

        grid-auto-flow: column !important;

        column-gap: 25px !important;
        row-gap: 14px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* -----------------------------------------------------
       VERTICALE SCHEIDINGSLIJNEN
       ----------------------------------------------------- */

    #footer-third-column,
    #footer-fourth-column {
        padding-left: 40px !important;
    }

    #footer-third-column::before,
    #footer-fourth-column::before {
        content: "" !important;

        position: absolute !important;

        left: -1px !important;
        top: -8px !important;
        bottom: -18px !important;

        width: 1px !important;

        background: #e5e5e5 !important;

        pointer-events: none !important;
    }
}


/* =========================================================
   LI ELEMENTEN
   ========================================================= */

#footer-first-column > ul.s_list_1 > li,
#footer-third-column > ul.s_list_1 > li,
#footer-fourth-column > ul.s_list_1 > li {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    background: transparent !important;
    background-image: none !important;

    border: none !important;
}


/* =========================================================
   GROENE PIJLTJES
   ========================================================= */

#footer-first-column > ul.s_list_1 > li::before,
#footer-third-column > ul.s_list_1 > li::before,
#footer-fourth-column > ul.s_list_1 > li::before {
    content: "›" !important;

    position: absolute !important;

    left: 0 !important;
    top: 50% !important;

    transform: translateY(-52%) !important;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    border: none !important;

    color: #2b8717 !important;

    font-size: 21px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    pointer-events: none !important;
}


/* =========================================================
   LINKS
   ========================================================= */

#footer-first-column > ul.s_list_1 > li > a,
#footer-third-column > ul.s_list_1 > li > a,
#footer-fourth-column > ul.s_list_1 > li > a {
    display: block !important;

    margin: 0 !important;
    padding: 2px 0 2px 22px !important;

    background: transparent !important;
    background-image: none !important;

    border: none !important;

    color: #222222 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease !important;
}


/* =========================================================
   HOVER
   ========================================================= */

#footer-first-column > ul.s_list_1 > li:hover > a,
#footer-third-column > ul.s_list_1 > li:hover > a,
#footer-fourth-column > ul.s_list_1 > li:hover > a {
    color: #2b8717 !important;

    transform: translateX(3px) !important;

    text-decoration: none !important;
}


#footer-first-column > ul.s_list_1 > li:hover::before,
#footer-third-column > ul.s_list_1 > li:hover::before,
#footer-fourth-column > ul.s_list_1 > li:hover::before {
    color: #216c11 !important;
}


/* =========================================================
   TABLET EN MOBIEL
   ========================================================= */

@media only screen and (max-width: 1000px) {

    #footer-first-column,
    #footer-third-column,
    #footer-fourth-column {
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    #footer-third-column::before,
    #footer-fourth-column::before {
        display: none !important;
        content: none !important;
    }

    #footer-first-column > ul.s_list_1,
    #footer-third-column > ul.s_list_1,
    #footer-fourth-column > ul.s_list_1 {
        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;

        grid-auto-flow: row !important;

        gap: 12px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    #footer-first-column > .noneSEO_H2,
    #footer-third-column > .noneSEO_H2,
    #footer-fourth-column > .noneSEO_H2 {
        font-size: 20px !important;
        margin-bottom: 18px !important;
    }

    #footer-first-column > .noneSEO_H2 i,
    #footer-third-column > .noneSEO_H2 i,
    #footer-fourth-column > .noneSEO_H2 i {
        font-size: 20px !important;
    }

    #footer-first-column > ul.s_list_1 > li > a,
    #footer-third-column > ul.s_list_1 > li > a,
    #footer-fourth-column > ul.s_list_1 > li > a {
        white-space: normal !important;
    }
}

/* =========================================================
   BK FIETSONDERDELEN
   CATEGORIEPAGINA - DEFINITIEVE VERSIE
   Titel + compacte luxe categoriekaarten
   ========================================================= */


/* =========================================================
   PAGINATITEL
   ========================================================= */

h1 {
    position: relative !important;
    display: inline-block !important;

    margin-bottom: 8px !important;
    padding-bottom: 14px !important;

    color: #111111 !important;
    font-weight: 700 !important;
}


/* Groen streepje onder titel */

h1::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 52px !important;
    height: 4px !important;

    background: #2b8717 !important;
    border-radius: 4px !important;
}


/* =========================================================
   CATEGORIE OVERZICHT
   ========================================================= */

.s_listing_subcategory {
    display: grid !important;

    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr)) !important;

    gap: 24px !important;

    /* Rij iets dichter onder de titel */
    margin-top: -18px !important;
    margin-bottom: 50px !important;
}


/* =========================================================
   AFBEELDINGSVAK
   ========================================================= */

.s_listing_subcategory .s_thumb {
    display: flex !important;

    align-items: flex-end !important;
    justify-content: center !important;

    width: 100% !important;
    height: 205px !important;

    margin: 0 !important;

    padding:
        16px 18px
        6px 18px !important;

    background: #ffffff !important;

    border: 1px solid #eeeeee !important;
    border-bottom: none !important;

    border-radius: 10px 10px 0 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.06) !important;

    transition:
        box-shadow 0.25s ease !important;
}


/* Afbeelding */

.s_listing_subcategory .s_thumb img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    margin: 0 auto !important;

    transition:
        transform 0.25s ease !important;
}


/* =========================================================
   CATEGORIENAAM
   ========================================================= */

.category_name {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    height: 68px !important;
    min-height: 68px !important;

    margin: 0 !important;

    padding:
        10px 42px
        10px 16px !important;

    background: #ffffff !important;

    border: 1px solid #eeeeee !important;
    border-top: none !important;

    border-radius: 0 0 10px 10px !important;

    box-sizing: border-box !important;

    color: #222222 !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-decoration: none !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.06) !important;

    transition:
        color 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* =========================================================
   GROEN PIJLTJE
   ========================================================= */

.category_name::after {
    content: "›" !important;

    position: absolute !important;

    right: 16px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    color: #2b8717 !important;

    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    transition:
        transform 0.25s ease,
        color 0.25s ease !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.s_listing_subcategory .s_thumb:hover {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.10) !important;
}


.s_listing_subcategory .s_thumb:hover img {
    transform: scale(1.03) !important;
}


.category_name:hover {
    color: #2b8717 !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.10) !important;

    text-decoration: none !important;
}


.category_name:hover::after {
    color: #216c11 !important;

    transform:
        translateY(-50%)
        translateX(3px) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (max-width: 768px) {

    .s_listing_subcategory {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 14px !important;

        margin-top: -10px !important;
    }


    .s_listing_subcategory .s_thumb {
        height: 165px !important;

        padding:
            12px 12px
            5px 12px !important;
    }


    .category_name {
        height: 64px !important;
        min-height: 64px !important;

        padding:
            9px 34px
            9px 12px !important;

        font-size: 14px !important;
    }


    .category_name::after {
        right: 12px !important;
        font-size: 24px !important;
    }


    h1 {
        margin-bottom: 6px !important;
        padding-bottom: 12px !important;
    }


    h1::after {
        width: 44px !important;
        height: 3px !important;
    }
}


/* =========================================================
   KLEIN MOBIEL
   ========================================================= */

@media only screen and (max-width: 480px) {

    .s_listing_subcategory {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        margin-top: -6px !important;
    }


    .s_listing_subcategory .s_thumb {
        height: 140px !important;

        padding:
            9px 9px
            4px 9px !important;
    }


    .category_name {
        height: 60px !important;
        min-height: 60px !important;

        font-size: 13px !important;
    }
}

/* =========================================================
   BK FIETSONDERDELEN
   PRODUCTOVERZICHT - DEFINITIEVE GECORRIGEERDE CSS
   ========================================================= */


/* =========================================================
   PRODUCTKAART
   ========================================================= */

.s_item {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;

    border: 1px solid #eeeeee !important;
    border-radius: 10px !important;

    padding: 14px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.05) !important;

    overflow: hidden !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Hover productkaart */
.s_item:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.10) !important;
}


/* =========================================================
   PRODUCTAFBEELDING
   ========================================================= */

.s_item .s_thumb {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 230px !important;

    margin: 0 0 8px 0 !important;

    /* vaste vrije ruimte voor hartje */
    padding: 28px 8px 6px 8px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    background: #ffffff !important;
}


/* Afbeelding */
.s_item .s_thumb img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    transition:
        transform 0.25s ease !important;
}


/* Afbeelding hover */
.s_item:hover .s_thumb img {
    transform: scale(1.025) !important;
}


/* =========================================================
   WISHLIST / HARTJES
   ========================================================= */

.s_item .wishlist-icon {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    z-index: 50 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;

    transition:
        transform 0.2s ease !important;
}


.s_item .wishlist-icon:hover {
    transform: scale(1.12) !important;
}


/* Eventuele wrappers mogen positie niet beïnvloeden */
.s_item .wishlist,
.s_item .s_wishlist {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   PRODUCTINFO
   ========================================================= */

.s_item_info {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PRODUCTTITEL
   ========================================================= */

.s_item_info h3 {
    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
}


.s_item_info h3 a {
    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;

    overflow: hidden !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 57px !important;

    margin: 0 0 6px 0 !important;

    color: #222222 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 19px !important;

    text-align: center !important;
    text-decoration: none !important;

    transition:
        color 0.2s ease !important;
}


.s_item:hover .s_item_info h3 a {
    color: #2b8717 !important;
}


/* =========================================================
   PRIJS
   ========================================================= */

.s_item .s_price,
.s_item_info .s_price {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 28px !important;

    margin: 2px 0 10px 0 !important;

    color: #5caf16 !important;

    font-size: 17px !important;
    font-weight: 600 !important;

    line-height: 1.3 !important;

    text-align: center !important;
}


/* =========================================================
   ACTIES / BESTELKNOP
   ========================================================= */

/*
   Geen height:100% en geen margin-top:auto op de hele info.
   Daardoor verdwijnt de knop niet meer.
*/

.s_item_info .s_actions {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Bestaande bestelknop behouden */
.s_item .s_button_add_to_cart {
    width: 100% !important;
    height: 48px !important;

    margin: 4px 0 0 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 30px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   RATING
   ========================================================= */

.s_item .s_actions.s_rating,
.listitempage .s_actions.s_rating {
    display: none !important;

    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   PAGINERING
   ========================================================= */

.pagination,
.pagination-wrapper,
.pagination_results,
.s_pagination {
    position: relative !important;

    z-index: 10 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-wrap: wrap !important;

    width: 100% !important;

    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;

    clear: both !important;

    gap: 8px !important;

    margin-top: 30px !important;
    margin-bottom: 36px !important;

    padding: 0 !important;

    text-align: center !important;
}


/* Paginaknoppen */
.pagination a,
.pagination span,
.pagination-wrapper a,
.pagination-wrapper span,
.pagination_results a,
.pagination_results span,
.s_pagination a,
.s_pagination span {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 38px !important;
    height: 38px !important;

    padding: 0 12px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #dfe6dc !important;
    border-radius: 8px !important;

    color: #2b8717 !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Hover */
.pagination a:hover,
.pagination-wrapper a:hover,
.pagination_results a:hover,
.s_pagination a:hover {
    background: #f3f8f1 !important;

    border-color: #2b8717 !important;

    color: #216c11 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.06) !important;
}


/* Actieve pagina */
.pagination .active,
.pagination span.active,
.pagination-wrapper .active,
.pagination_results .active,
.s_pagination .active {
    background: #2b8717 !important;

    border-color: #2b8717 !important;

    color: #ffffff !important;

    box-shadow:
        0 4px 10px rgba(43,135,23,0.18) !important;
}


/* Disabled */
.pagination .disabled,
.pagination-wrapper .disabled,
.pagination_results .disabled,
.s_pagination .disabled {
    opacity: 0.45 !important;

    cursor: default !important;

    transform: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (max-width: 1000px) {

    .s_item {
        padding: 12px !important;
    }

    .s_item .s_thumb {
        height: 200px !important;

        padding:
            25px 6px
            5px 6px !important;
    }

    .s_item .wishlist-icon {
        top: 12px !important;
        right: 12px !important;
    }

    .s_item .s_button_add_to_cart {
        height: 46px !important;
    }
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media only screen and (max-width: 600px) {

    .s_item {
        padding: 10px !important;

        border-radius: 8px !important;
    }


    .s_item .s_thumb {
        height: 160px !important;

        padding:
            22px 4px
            4px 4px !important;

        margin-bottom: 4px !important;
    }


    .s_item .wishlist-icon {
        top: 10px !important;
        right: 10px !important;
    }


    .s_item_info h3 a {
        min-height: 54px !important;

        font-size: 13px !important;
        line-height: 18px !important;
    }


    .s_item .s_price,
    .s_item_info .s_price {
        min-height: 26px !important;

        font-size: 15px !important;
    }


    .s_item .s_button_add_to_cart {
        height: 44px !important;

        font-size: 13px !important;
    }


    .pagination,
    .pagination-wrapper,
    .pagination_results,
    .s_pagination {
        gap: 6px !important;

        margin-top: 24px !important;
        margin-bottom: 30px !important;
    }


    .pagination a,
    .pagination span,
    .pagination-wrapper a,
    .pagination-wrapper span,
    .pagination_results a,
    .pagination_results span,
    .s_pagination a,
    .s_pagination span {
        min-width: 34px !important;
        height: 34px !important;

        padding: 0 9px !important;

        font-size: 13px !important;

        border-radius: 7px !important;
    }
}

/* =========================================================
   TAWK CHAT - ZWARTE RAND / ACHTERGROND DEFINITIEF WEG
   ========================================================= */

/* Tawk hoofdcontainers transparant */
.tawk-min-container,
.tawk-min-container *,
[class*="tawk"],
[id*="tawk"] {
    outline: none !important;
}

/* Ronde knop zelf */
.tawk-min-container .tawk-button,
.tawk-min-container button {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}


