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 BETAAL-, VERZEND- EN SOCIALMEDIA-LOGO'S ========================================================= */ #payments_types { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 16px !important; width: 100% !important; margin: 26px 0 12px 0 !important; padding: 18px 0 0 0 !important; border-top: 1px solid #eeeeee !important; box-sizing: border-box !important; } /* Alle logo's gelijkmatig uitlijnen */ #payments_types img { display: block !important; width: auto !important; height: auto !important; max-height: 34px !important; max-width: 82px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } /* Kleine hover */ #payments_types img:hover { transform: translateY(-2px) !important; opacity: 0.85 !important; } /* Links rond Facebook / TikTok / Instagram netjes */ #payments_types a { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: none !important; text-decoration: none !important; } /* Blanco scheidingsafbeeldingen klein houden */ #payments_types img[src*="Blanco"] { width: 10px !important; max-width: 10px !important; height: 1px !important; opacity: 0 !important; } /* Social media iets compacter */ #payments_types a img { max-height: 32px !important; max-width: 32px !important; } /* Mobiel */ @media only screen and (max-width:600px) { #payments_types { gap: 12px !important; margin-top: 20px !important; padding-top: 15px !important; } #payments_types img { max-height: 29px !important; max-width: 68px !important; } #payments_types a img { max-height: 28px !important; max-width: 28px !important; } } /* ========================================================= FAVORIET HARTJES VASTE VRIJE RUIMTE BOVEN DE PRODUCTAFBEELDING ========================================================= */ /* Productkaart is het vaste referentiepunt */ .s_item { position: relative !important; } /* Hartje altijd rechtsboven in eigen vrije ruimte */ .s_item .wishlist-icon { position: absolute !important; top: 12px !important; right: 14px !important; left: auto !important; bottom: auto !important; z-index: 100 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================= BELANGRIJK: AFBEELDING BEGINT PAS ONDER HET HARTJE ========================================================= */ .s_item .s_thumb { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 230px !important; /* 45px vrije ruimte bovenaan. Hier staat alleen het hartje. */ padding: 45px 8px 6px 8px !important; box-sizing: border-box !important; overflow: hidden !important; background: #ffffff !important; } /* Productfoto mag uitsluitend binnen de resterende ruimte */ .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; } /* Tablet */ @media only screen and (max-width:1000px) { .s_item .wishlist-icon { top: 10px !important; right: 12px !important; } .s_item .s_thumb { padding-top: 42px !important; } } /* Mobiel */ @media only screen and (max-width:600px) { .s_item .wishlist-icon { top: 8px !important; right: 10px !important; } .s_item .s_thumb { padding-top: 38px !important; } } /* ========================================================= GROENE PIJLTJES VOOR DE TEKST IN HET MEGA MENU ========================================================= */ @media only screen and (min-width: 1001px) { .categories.s_nav.with_cart .s_submenu a { display: flex !important; align-items: center !important; padding-left: 0 !important; } .categories.s_nav.with_cart .s_submenu a::before { content: "›" !important; display: inline-block !important; margin-right: 10px !important; color: #2b8717 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; transition: transform 0.2s ease !important; } .categories.s_nav.with_cart .s_submenu a:hover::before { transform: translateX(3px) !important; } } /* ========================================================= BK FIETSONDERDELEN - PRODUCTKAARTEN ========================================================= */ /* PRODUCTKAART */ .s_item { position: relative !important; display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid #eeeeee !important; border-radius: 13px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important; padding: 0 !important; overflow: visible !important; min-height: 0 !important; } /* SUBTIELE HOVER */ .s_item:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,0,0,0.08) !important; } /* ========================================================= PRODUCTAFBEELDING ========================================================= */ .s_item .s_thumb { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 205px !important; padding: 10px 14px 0 !important; margin: 0 !important; background: #fff !important; overflow: visible !important; box-sizing: border-box !important; } .s_item .s_thumb img { display: block !important; width: auto !important; height: 190px !important; max-width: 100% !important; object-fit: contain !important; margin: 0 auto !important; } /* ========================================================= HARTJES / FAVORIETEN VOLLEDIG LOS VAN DE PRODUCTAFBEELDING ========================================================= */ .s_item { position: relative !important; } /* Hartje wanneer het direct in de productkaart staat */ .s_item > .wishlist-icon { position: absolute !important; top: 15px !important; right: 15px !important; left: auto !important; bottom: auto !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; z-index: 50 !important; cursor: pointer !important; } /* Hartje wanneer TSB hem binnen .s_thumb plaatst */ .s_item .s_thumb .wishlist-icon { position: absolute !important; top: 15px !important; right: 15px !important; left: auto !important; bottom: auto !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; z-index: 50 !important; } /* Hart zelf */ .s_item .wishlist-icon i { position: static !important; display: block !important; font-size: 25px !important; line-height: 1 !important; color: #75bd24 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= PRODUCTINFORMATIE ========================================================= */ .s_item_info { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 2px 14px 14px !important; text-align: center !important; box-sizing: border-box !important; min-height: 0 !important; } /* ========================================================= PRODUCTNAAM ========================================================= */ .s_item_info h3 { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 40px !important; margin: 4px 0 5px !important; padding: 0 !important; line-height: 1.25 !important; text-align: center !important; } /* Link niet veranderen qua lettertype */ .s_item_info h3 a { text-decoration: none !important; } /* ========================================================= PRIJS ========================================================= */ .s_price_holder { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 24px !important; margin: 4px 0 9px !important; padding: 0 !important; } .s_price { font-weight: 600 !important; } .s_currency { margin-right: 1px !important; } /* ========================================================= BESTEL NU ========================================================= */ .s_actions { width: 100% !important; margin-top: auto !important; padding: 0 !important; } .s_button_add_to_cart { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 47px !important; margin: 0 !important; padding: 0 15px !important; border: none !important; border-radius: 28px !important; background: linear-gradient( 100deg, #c3dc70 0%, #82bea0 100% ) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease !important; } .s_button_add_to_cart:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important; } /* ========================================================= PRODUCTGRID ========================================================= */ .s_items { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; } /* ========================================================= GEEN EXTRA WITTE RUIMTES ========================================================= */ .s_item, .s_item_info, .s_item .s_thumb { box-sizing: border-box !important; } /* Geen onnodige vaste hoogte */ .s_item_info > * { max-height: none !important; } /* ========================================================= MOBIEL ========================================================= */ @media (max-width: 767px) { .s_items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } .s_item .s_thumb { height: 155px !important; padding: 8px !important; } .s_item .s_thumb img { height: 145px !important; } .s_item > .wishlist-icon, .s_item .s_thumb .wishlist-icon { top: 10px !important; right: 10px !important; width: 28px !important; height: 28px !important; } .s_item .wishlist-icon i { font-size: 22px !important; } .s_item_info { padding: 2px 9px 10px !important; } .s_button_add_to_cart { min-height: 43px !important; } } /* ========================================================= FAVORIET HARTJE - LOS BOVEN DE PRODUCTAFBEELDING ========================================================= */ /* Productkaart */ .s_item { position: relative !important; overflow: visible !important; } /* Ruimte boven de productafbeelding */ .s_item .s_thumb { position: relative !important; padding-top: 42px !important; box-sizing: border-box !important; } /* Hartje - volledig los van de afbeelding */ .s_item .wishlist-icon, .s_item > .wishlist-icon, .s_item .s_thumb .wishlist-icon { position: absolute !important; top: 10px !important; right: 17px !important; left: auto !important; bottom: auto !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; z-index: 100 !important; } /* Hartje zelf */ .s_item .wishlist-icon i { position: static !important; margin: 0 !important; padding: 0 !important; font-size: 25px !important; line-height: 1 !important; color: #75bd24 !important; } /* Zorg dat de afbeelding niet achter het hartje komt */ .s_item .s_thumb img { position: relative !important; z-index: 1 !important; } /* ========================================================= FILTER + SORTEREN BK FIETSONDERDELEN ========================================================= */ /* --------------------------------------------------------- FILTER TITEL --------------------------------------------------------- */ .box-heading h2 { font-size: 22px !important; font-weight: 700 !important; margin: 0 0 14px 0 !important; padding: 0 !important; color: #111 !important; line-height: 1.2 !important; } /* Groene lijntje onder Filter */ .box-heading h2::after { content: ""; display: block; width: 40px; height: 3px; background: #238b16; border-radius: 3px; margin-top: 8px; } /* --------------------------------------------------------- FILTER BLOK --------------------------------------------------------- */ .box-content { background: #fff !important; border: 1px solid #e8e8e8 !important; border-radius: 14px !important; padding: 20px !important; box-shadow: 0 5px 18px rgba(0,0,0,0.06) !important; box-sizing: border-box !important; } /* Filtergroepen */ .box-filter { margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- FILTER GROEPSNAAM --------------------------------------------------------- */ .box-filter strong { display: block !important; font-size: 16px !important; font-weight: 700 !important; color: #111 !important; margin: 0 0 9px 0 !important; } /* Kleine scheidingslijn onder groepsnaam */ .box-filter strong::after { content: ""; display: block; width: 100%; height: 1px; background: #eeeeee; margin-top: 9px; } /* --------------------------------------------------------- FILTER ITEMS --------------------------------------------------------- */ .box-filter li { margin: 0 !important; padding: 0 !important; } /* Labels */ .box-filter label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 15px !important; line-height: 1.4 !important; color: #222 !important; cursor: pointer !important; padding: 5px 0 !important; } /* --------------------------------------------------------- CHECKBOXEN --------------------------------------------------------- */ .box-filter input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; border: 1.5px solid #999 !important; border-radius: 3px !important; background: #fff !important; margin: 0 !important; cursor: pointer !important; position: relative !important; } /* Aangevinkte checkbox */ .box-filter input[type="checkbox"]:checked { background: #238b16 !important; border-color: #238b16 !important; } /* Vinkje */ .box-filter input[type="checkbox"]:checked::after { content: "✓"; position: absolute; color: #fff; font-size: 13px; font-weight: 700; left: 2px; top: -1px; } /* --------------------------------------------------------- AANTALLEN --------------------------------------------------------- */ .box-filter label span { color: #8b8b8b !important; font-size: 14px !important; margin-left: 2px !important; } /* --------------------------------------------------------- TOON MEER --------------------------------------------------------- */ .box-filter .showmore { display: block !important; margin-top: 5px !important; } .box-filter .showmore .expand { color: #238b16 !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; padding: 5px 0 !important; } .box-filter .showmore .fa-angle-down { color: #238b16 !important; margin-right: 4px !important; } /* --------------------------------------------------------- RESET --------------------------------------------------------- */ .s_submit { border-top: 1px solid #eeeeee !important; margin-top: 12px !important; padding-top: 12px !important; } .s_submit .simple_link { color: #555 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; } .s_submit .simple_link:hover { color: #238b16 !important; } /* --------------------------------------------------------- SORTEREN --------------------------------------------------------- */ /* Gehele sorteergebied */ .s_sort { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; margin-bottom: 15px !important; } /* "Sorteren op:" */ .s_sort .s_label { font-size: 15px !important; font-weight: 600 !important; color: #222 !important; } /* Sorteerkeuze */ .s_sort .simple_link, .s_sort .s_selected { display: inline-flex !important; align-items: center !important; min-height: 42px !important; padding: 0 15px !important; background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 10px !important; color: #222 !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; box-shadow: 0 3px 10px rgba(0,0,0,0.04) !important; } /* Actieve sortering */ .s_sort .s_selected { color: #222 !important; } /* Hover */ .s_sort .simple_link:hover, .s_sort .s_selected:hover { border-color: #238b16 !important; color: #238b16 !important; } /* --------------------------------------------------------- SORTEREN - ONDERSTREPING WEG --------------------------------------------------------- */ .s_sort a { text-decoration: none !important; } /* --------------------------------------------------------- FILTER + PRODUCTEN NETJES OP ÉÉN LIJN --------------------------------------------------------- */ #product-list, .product-list { margin-top: 0 !important; } /* Voorkom extra witruimte boven de producten */ .s_products { margin-top: 0 !important; } /* --------------------------------------------------------- DESKTOP --------------------------------------------------------- */ @media (min-width: 992px) { .box-content { width: 100% !important; } .s_sort { margin-top: 0 !important; } } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 991px) { .box-content { padding: 17px !important; } .s_sort { justify-content: flex-start !important; margin-top: 15px !important; } } /* --------------------------------------------------------- MOBIEL --------------------------------------------------------- */ @media (max-width: 767px) { .box-heading h2 { font-size: 20px !important; } .box-content { border-radius: 12px !important; padding: 15px !important; } .s_sort { width: 100% !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 6px !important; } .s_sort .s_label { font-size: 14px !important; } .s_sort .simple_link, .s_sort .s_selected { min-height: 38px !important; padding: 0 12px !important; font-size: 14px !important; } } /* ========================================================= SORTEREN OP - NETTE AFGERONDE BOX ========================================================= */ /* Label */ .s_label { display: inline-flex !important; align-items: center !important; min-height: 42px !important; margin: 0 !important; padding: 0 0 0 12px !important; background: #ffffff !important; border-top: 1px solid #e4e8e1 !important; border-bottom: 1px solid #e4e8e1 !important; border-left: 1px solid #e4e8e1 !important; border-radius: 10px 0 0 10px !important; color: #444444 !important; font-weight: 600 !important; box-sizing: border-box !important; vertical-align: middle !important; } /* Geselecteerde sortering */ .simple_link.s_selected { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; margin: 0 !important; padding: 0 14px !important; background: #ffffff !important; border: 1px solid #e4e8e1 !important; border-left: 0 !important; border-radius: 0 10px 10px 0 !important; color: #333333 !important; text-decoration: none !important; box-sizing: border-box !important; box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important; } /* Hover */ .simple_link.s_selected:hover { background: #f5faf3 !important; border-color: #238b16 !important; color: #238b16 !important; } /* Zorg dat beide delen netjes naast elkaar blijven */ .s_label + .simple_link.s_selected { vertical-align: middle !important; } /* ========================================================= BK FIETSONDERDELEN CATEGORIEKAARTEN - CORRECT OP BASIS VAN JOUW HTML ========================================================= */ /* HOOFDCONTAINER */ #s_listing_subcategory { display: block !important; width: 100% !important; } /* ========================================================= DESKTOP - ALTIJD 6 PER RIJ ========================================================= */ @media only screen and (min-width:1001px) { #s_listing_subcategory .listitempage_subcategory { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 32px 28px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #s_listing_subcategory .listitempage_subcategory > .s_subcategory { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; float: none !important; clear: none !important; } } /* ========================================================= CATEGORIEKAART ========================================================= */ #s_listing_subcategory .s_subcategory { position: relative !important; display: flex !important; flex-direction: column !important; background: #ffffff !important; border: 1px solid #eeeeee !important; border-radius: 10px !important; box-sizing: border-box !important; overflow: hidden !important; box-shadow: 0 5px 18px rgba(0,0,0,0.05) !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } #s_listing_subcategory .s_subcategory:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important; } /* ========================================================= AFBEELDING ========================================================= */ #s_listing_subcategory .s_subcategory .s_thumb { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 230px !important; margin: 0 !important; padding: 12px !important; box-sizing: border-box !important; background: #ffffff !important; overflow: hidden !important; } #s_listing_subcategory .s_subcategory .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; } /* ========================================================= CATEGORIENAAM ========================================================= */ #s_listing_subcategory .s_subcategory .category_name { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: 10px 14px !important; box-sizing: border-box !important; background: #ffffff !important; border: none !important; border-top: 1px solid #eeeeee !important; color: #222222 !important; text-decoration: none !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* OUDE PIJL RECHTS VERWIJDEREN */ #s_listing_subcategory .s_subcategory .category_name::after { content: none !important; display: none !important; } /* ========================================================= GROENE > LINKS VAN DE TEKST ========================================================= */ #s_listing_subcategory .s_subcategory .category_name::before { content: "›" !important; display: inline-block !important; flex: 0 0 auto !important; margin: 0 !important; color: #2b8717 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; transition: transform 0.2s ease, color 0.2s ease !important; } /* HOVER */ #s_listing_subcategory .s_subcategory .category_name:hover { color: #2b8717 !important; background: #f8fbf7 !important; } #s_listing_subcategory .s_subcategory .category_name:hover::before { color: #216c11 !important; transform: translateX(2px) !important; } /* ========================================================= TABLET - 3 PER RIJ ========================================================= */ @media only screen and (min-width:601px) and (max-width:1000px) { #s_listing_subcategory .listitempage_subcategory { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #s_listing_subcategory .listitempage_subcategory > .s_subcategory { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; clear: none !important; } #s_listing_subcategory .s_subcategory .s_thumb { height: 190px !important; } } /* ========================================================= MOBIEL - 2 PER RIJ ========================================================= */ @media only screen and (max-width:600px) { #s_listing_subcategory .listitempage_subcategory { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #s_listing_subcategory .listitempage_subcategory > .s_subcategory { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; float: none !important; clear: none !important; } #s_listing_subcategory .s_subcategory .s_thumb { height: 150px !important; padding: 8px !important; } #s_listing_subcategory .s_subcategory .category_name { min-height: 54px !important; padding: 8px 10px !important; gap: 6px !important; } #s_listing_subcategory .s_subcategory .category_name::before { font-size: 18px !important; } } /* ========================================================= PRODUCTOVERZICHT - LAATSTE AFWERKING Minder witruimte + filter + sorteren + meer schaduw ========================================================= */ /* ========================================================= 1. MINDER WITRUIMTE BOVEN FILTER EN PRODUCTEN ========================================================= */ @media only screen and (min-width:1001px) { /* Ruimte onder paginatitel verkleinen */ #content > .s_page_title, #content .s_page_title { margin-bottom: 35px !important; } /* Product/listing gedeelte iets omhoog */ .s_listing { margin-top: 0 !important; padding-top: 0 !important; } } /* ========================================================= 2. FILTER IETS BREDER ========================================================= */ @media only screen and (min-width:1001px) { /* Linkerkolom/filter */ #filter, .filter, .filter_wrapper, .s_filter { min-width: 170px !important; } /* Filterkaart */ .filter_box, .filter-content, .filter_content { width: 100% !important; box-sizing: border-box !important; } } /* ========================================================= 3. FILTERKAART IETS DUIDELIJKER ========================================================= */ @media only screen and (min-width:1001px) { .filter_box, .filter-content, .filter_content { background: #ffffff !important; border: 1px solid #e7e7e7 !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(0,0,0,.06) !important; } } /* ========================================================= 4. SORTEREN NETTER BIJ PRODUCTEN ========================================================= */ @media only screen and (min-width:1001px) { .s_sort, .sort, .sort_by, .sorting, .sorting_wrapper { margin-top: 0 !important; margin-bottom: 32px !important; } } /* ========================================================= 5. PRODUCTKAARTEN - DUIDELIJK MEER SCHADUW ========================================================= */ .s_item { border: 1px solid #e9e9e9 !important; box-shadow: 0 5px 12px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.08) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } /* ========================================================= 6. PRODUCTKAART HOVER - NOG MEER DIEPTE ========================================================= */ .s_item:hover { transform: translateY(-4px) !important; border-color: #dedede !important; box-shadow: 0 8px 18px rgba(0,0,0,.08), 0 18px 38px rgba(0,0,0,.13) !important; } /* ========================================================= 7. ALLEEN PRODUCTKAARTEN IN PRODUCTOVERZICHT GEEN EFFECT OP CATEGORIEKAARTEN ========================================================= */ #s_listing_subcategory .s_subcategory { transform: none; } /* ========================================================= 8. MOBIEL - SCHADUW IETS RUSTIGER ========================================================= */ @media only screen and (max-width:600px) { .s_item { box-shadow: 0 4px 10px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.06) !important; } .s_item:hover { transform: none !important; } } /* ========================================================= SORTEREN + PRODUCTKAART SCHADUW ========================================================= */ /* SORTEREN */ @media only screen and (min-width:1001px) { #listing_arrange { display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 0 24px !important; padding: 0 !important; min-height: 44px !important; } #listing_arrange .s_label { display: flex !important; align-items: center !important; height: 44px !important; margin: 0 !important; padding: 0 14px !important; background: #fff !important; border: 1px solid #e5e5e5 !important; border-right: 0 !important; border-radius: 12px 0 0 12px !important; box-sizing: border-box !important; } #listing_sort { position: relative !important; display: flex !important; align-items: center !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 0 12px 12px 0 !important; box-sizing: border-box !important; } #listing_sort .s_selected { display: flex !important; align-items: center !important; height: 100% !important; padding: 0 16px !important; margin: 0 !important; background: transparent !important; border: none !important; text-decoration: none !important; } } /* ========================================================= PRODUCTKAARTEN - EXTRA SCHADUW ========================================================= */ .s_item { border: 1px solid #e7e7e7 !important; box-shadow: 0 6px 14px rgba(0,0,0,.07), 0 14px 30px rgba(0,0,0,.10) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } .s_item:hover { transform: translateY(-4px) !important; border-color: #dcdcdc !important; box-shadow: 0 10px 22px rgba(0,0,0,.10), 0 20px 42px rgba(0,0,0,.15) !important; } /* CATEGORIEKAARTEN NIET MEENEMEN IN PRODUCT-HOVER */ #s_listing_subcategory .s_subcategory:hover { transform: translateY(-3px) !important; } /* ========================================================= BK FIETSONDERDELEN FILTER BOVEN PRODUCTEN + STICKY + VOLLE BREEDTE Alleen desktop ========================================================= */ @media only screen and (min-width:1001px) { /* ===================================================== 1. HOOFDLAYOUT Filter bovenaan, producten volledige breedte ===================================================== */ #content.s_wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "filter" "products" !important; width: 100% !important; gap: 18px !important; box-sizing: border-box !important; } /* Oude linkerkolom wordt nu bovenbalk */ #content > #left_col.s_side_col { grid-area: filter !important; display: block !important; float: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; position: sticky !important; /* * Pas eventueel aan als jouw navigatie * tijdens scrollen ook sticky blijft. */ top: 10px !important; z-index: 500 !important; } /* Productgedeelte volledige breedte */ #content > #category.s_main_col { grid-area: products !important; float: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* ===================================================== 2. FILTERBALK ===================================================== */ #left_col .filter_module.s_box { display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 11px 16px !important; background: rgba(255,255,255,.97) !important; border: 1px solid #e4e4e4 !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(0,0,0,.07), 0 12px 28px rgba(0,0,0,.07) !important; box-sizing: border-box !important; } /* ===================================================== 3. KOP "FILTER" ===================================================== */ #left_col .filter_module .box-heading { display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin: 0 18px 0 0 !important; padding: 0 18px 0 0 !important; border-right: 1px solid #e5e5e5 !important; } #left_col .filter_module .box-heading h2 { margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* ===================================================== 4. FILTERINHOUD HORIZONTAAL ===================================================== */ #left_col .filter_module .box-content { display: flex !important; align-items: center !important; flex: 1 1 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; gap: 20px !important; background: transparent !important; border: none !important; box-shadow: none !important; box-sizing: border-box !important; } #left_col .filter_module .box-filter { display: flex !important; align-items: center !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #left_col .filter_module .box-filter > li { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ===================================================== 5. FILTERGROEP "KLEUR" ===================================================== */ #left_col .filter_module .kleur { display: flex !important; align-items: center !important; gap: 14px !important; } #left_col .filter_module #filter-group4 { display: block !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* ===================================================== 6. KLEUREN NAAST ELKAAR ===================================================== */ #left_col .filter_module .kleur > ul { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 7px 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #left_col .filter_module .kleur > ul > li { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ===================================================== 7. FILTEROPTIES ALS NETTE KEUZEBLOKJES ===================================================== */ #left_col .filter_module .kleur label { display: flex !important; align-items: center !important; gap: 6px !important; min-height: 34px !important; margin: 0 !important; padding: 0 11px !important; background: #f8f8f8 !important; border: 1px solid #e6e6e6 !important; border-radius: 8px !important; white-space: nowrap !important; cursor: pointer !important; box-sizing: border-box !important; transition: background-color .2s ease, border-color .2s ease !important; } #left_col .filter_module .kleur label:hover { background: #f3f8f1 !important; border-color: #b8d7b0 !important; } /* ===================================================== 8. CHECKBOX ===================================================== */ #left_col .filter_module input[type="checkbox"] { margin: 0 !important; cursor: pointer !important; accent-color: #2b8717 !important; } /* ===================================================== 9. RESET RECHTS ===================================================== */ #left_col .filter_module .s_submit { display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important; padding: 0 0 0 18px !important; border-left: 1px solid #e5e5e5 !important; } #left_col .filter_module .s_submit .simple_link { color: #2b8717 !important; text-decoration: none !important; white-space: nowrap !important; } #left_col .filter_module .s_submit .simple_link:hover { color: #216c11 !important; } /* ===================================================== 10. "TOON MEER" Niet nodig als opties horizontaal passen ===================================================== */ #left_col .filter_module .showmore { display: none !important; } /* ===================================================== 11. SORTEREN ===================================================== */ #listing_options { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; } #listing_arrange { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; min-height: 44px !important; } #listing_arrange .s_label { display: flex !important; align-items: center !important; height: 44px !important; margin: 0 !important; padding: 0 14px !important; background: #ffffff !important; border: 1px solid #e5e5e5 !important; border-right: none !important; border-radius: 12px 0 0 12px !important; box-sizing: border-box !important; } #listing_sort { position: relative !important; display: flex !important; align-items: center !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #e5e5e5 !important; border-radius: 0 12px 12px 0 !important; box-sizing: border-box !important; } #listing_sort .s_selected { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding: 0 16px !important; background: transparent !important; border: none !important; box-sizing: border-box !important; } /* ===================================================== 12. PRODUCTOVERZICHT VOLLE BREEDTE ===================================================== */ #category #s_listing { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #category #s_listing .listitempage { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ===================================================== 13. PRODUCTKAARTEN BESTAANDE SCHADUW BEHOUDEN / VERSTERKEN ===================================================== */ #s_listing .listitem.s_item { border: 1px solid #e7e7e7 !important; box-shadow: 0 6px 14px rgba(0,0,0,.07), 0 14px 30px rgba(0,0,0,.10) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } #s_listing .listitem.s_item:hover { transform: translateY(-4px) !important; border-color: #dcdcdc !important; box-shadow: 0 10px 22px rgba(0,0,0,.10), 0 20px 42px rgba(0,0,0,.15) !important; } } /* ========================================================= MOBIEL / TABLET Originele TSB filterwerking behouden ========================================================= */ @media only screen and (max-width:1000px) { #content.s_wrap { display: block !important; } #content > #left_col.s_side_col, #content > #category.s_main_col { width: auto !important; } }