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; } } /* ========================================================= BK FIETSONDERDELEN LINKER FILTER - VERBETERDE VERSIE ========================================================= */ @media only screen and (min-width:1001px) { /* ===================================================== 1. FILTERKOLOM ===================================================== */ #left_col .filter_module.s_box { background: #ffffff !important; border: 1px solid #e6e6e6 !important; border-radius: 12px !important; padding: 14px 16px !important; box-shadow: 0 5px 14px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.06) !important; box-sizing: border-box !important; } /* ===================================================== 2. FILTER TITEL ===================================================== */ #left_col .filter_module .box-heading { margin: 0 0 12px !important; padding: 0 !important; } #left_col .filter_module .box-heading h2 { margin: 0 !important; padding: 0 0 8px !important; border-bottom: 3px solid #2b8717 !important; } /* ===================================================== 3. FILTERINHOUD ===================================================== */ #left_col .filter_module .box-content { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ===================================================== 4. FILTERGROEPEN ===================================================== */ #left_col .filter_module .box-filter { margin: 0 !important; padding: 0 !important; list-style: none !important; } #left_col .filter_module .box-filter > li { margin: 0 0 13px !important; padding: 0 0 11px !important; border-bottom: 1px solid #ececec !important; list-style: none !important; } #left_col .filter_module .box-filter > li:last-child { margin-bottom: 0 !important; } /* ===================================================== 5. GROEPTITELS ===================================================== */ #left_col .filter_module .box-filter > li > strong { display: block !important; margin: 0 0 7px !important; padding: 0 !important; color: #222 !important; line-height: 1.25 !important; } /* ===================================================== 6. OPTIES ===================================================== */ #left_col .filter_module .box-filter > li > ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } #left_col .filter_module .box-filter > li > ul > li { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ===================================================== 7. LABELS ===================================================== */ #left_col .filter_module .box-filter label { display: flex !important; align-items: center !important; gap: 7px !important; min-height: 31px !important; margin: 0 !important; padding: 3px 5px !important; border-radius: 6px !important; cursor: pointer !important; box-sizing: border-box !important; transition: background-color .15s ease, color .15s ease !important; } #left_col .filter_module .box-filter label:hover { background: #f3f8f1 !important; color: #216c11 !important; } /* ===================================================== 8. CHECKBOXES ===================================================== */ #left_col .filter_module input[type="checkbox"] { flex: 0 0 auto !important; margin: 0 !important; accent-color: #2b8717 !important; cursor: pointer !important; } /* ===================================================== 9. AANTALLEN ===================================================== */ #left_col .filter_module label span[id^="count"] { margin-left: auto !important; opacity: .58 !important; } /* ===================================================== 10. TOON MEER ===================================================== */ #left_col .filter_module .showmore { display: block !important; margin: 5px 0 0 !important; padding: 0 !important; } #left_col .filter_module .showmore .expand { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: #2b8717 !important; cursor: pointer !important; padding: 3px 0 !important; } /* ===================================================== 11. RESET ===================================================== */ #left_col .filter_module .s_submit { margin: 10px 0 0 !important; padding: 10px 0 0 !important; border-top: 1px solid #ececec !important; } #left_col .filter_module .s_submit .simple_link { color: #2b8717 !important; text-decoration: none !important; } #left_col .filter_module .s_submit .simple_link:hover { color: #216c11 !important; } } @media only screen and (min-width:1001px) { /* Filterkaart iets strakker */ #left_col .filter_module.s_box { padding: 12px 14px !important; } /* Titel compacter */ #left_col .filter_module .box-heading { margin-bottom: 8px !important; } #left_col .filter_module .box-heading h2 { position: relative !important; padding-bottom: 7px !important; border-bottom: none !important; } /* Kort groen streepje onder Filter */ #left_col .filter_module .box-heading h2::after { content: "" !important; display: block !important; width: 42px !important; height: 3px !important; margin-top: 7px !important; background: #2b8717 !important; border-radius: 3px !important; } /* Filtergroepen dichter op elkaar */ #left_col .filter_module .box-filter > li { margin-bottom: 9px !important; padding-bottom: 8px !important; } /* Groeptitels iets dichter bij opties */ #left_col .filter_module .box-filter > li > strong { margin-bottom: 4px !important; } /* Opties compacter */ #left_col .filter_module .box-filter label { min-height: 28px !important; padding-top: 2px !important; padding-bottom: 2px !important; } /* Reset iets compacter */ #left_col .filter_module .s_submit { margin-top: 7px !important; padding-top: 7px !important; } } /* ========================================================= BK FIETSONDERDELEN MOBIELE PRODUCTWEERGAVE CATEGORIEPAGINA'S ========================================================= */ @media only screen and (max-width:600px) { /* ----------------------------------------------------- HOOFDCONTAINER PRODUCTLIJST Alleen categoriepagina's ----------------------------------------------------- */ #category #s_listing { width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; float:none !important; box-sizing:border-box !important; overflow:visible !important; } /* ----------------------------------------------------- ECHTE PRODUCTGRID Altijd 2 producten naast elkaar ----------------------------------------------------- */ #category #s_listing > .listitempage { display:grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap:8px !important; row-gap:12px !important; width:92% !important; max-width:92% !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; padding:0 !important; float:none !important; clear:both !important; box-sizing:border-box !important; } /* ----------------------------------------------------- PRODUCTKAART ----------------------------------------------------- */ #category #s_listing > .listitempage > .listitem.s_item { position:relative !important; display:flex !important; flex-direction:column !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:8px !important; float:none !important; clear:none !important; background:#fff !important; border:1px solid #eeeeee !important; border-radius:10px !important; box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 9px 20px rgba(0,0,0,.08) !important; overflow:hidden !important; box-sizing:border-box !important; } /* Geen verschuiving bij aanraken */ #category #s_listing .listitem.s_item:hover { transform:none !important; } /* ----------------------------------------------------- PRODUCTAFBEELDING ----------------------------------------------------- */ #category #s_listing .s_item .s_thumb { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:135px !important; margin:0 0 6px !important; padding: 22px 4px 4px 4px !important; background:#fff !important; overflow:hidden !important; box-sizing:border-box !important; } #category #s_listing .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:auto !important; } /* ----------------------------------------------------- WISHLIST HART ----------------------------------------------------- */ #category #s_listing .s_item .wishlist-icon { position:absolute !important; top:8px !important; right:8px !important; z-index:20 !important; margin:0 !important; padding:0 !important; background:#fff !important; border:none !important; box-sizing:border-box !important; } /* ----------------------------------------------------- PRODUCTINFORMATIE ----------------------------------------------------- */ #category #s_listing .s_item_info { display:flex !important; flex-direction:column !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; } /* ----------------------------------------------------- PRODUCTTITEL Maximaal 4 regels ----------------------------------------------------- */ #category #s_listing .s_item_info h3 { width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; } #category #s_listing .s_item_info h3 a { display:-webkit-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:4 !important; white-space:normal !important; overflow:hidden !important; text-overflow:ellipsis !important; overflow-wrap:anywhere !important; word-break:break-word !important; line-height:17px !important; min-height:68px !important; max-height:68px !important; margin:0 0 5px !important; text-align:center !important; box-sizing:border-box !important; } /* ----------------------------------------------------- PRIJS ----------------------------------------------------- */ #category #s_listing .s_price_holder { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:2px 0 7px !important; padding:0 !important; box-sizing:border-box !important; } #category #s_listing .s_price, #category #s_listing .s_item_info .s_price { display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; margin:0 !important; color:#5caf16 !important; font-weight:600 !important; text-align:center !important; } /* ----------------------------------------------------- OUDE + ACTIEPRIJS ----------------------------------------------------- */ #category #s_listing .s_promo_price { flex-wrap:wrap !important; justify-content:center !important; text-align:center !important; } /* ----------------------------------------------------- RATING VERBERGEN IN PRODUCTOVERZICHT ----------------------------------------------------- */ #category #s_listing .s_actions.s_rating { display:none !important; height:0 !important; margin:0 !important; padding:0 !important; } /* ----------------------------------------------------- ACTIEBLOK ----------------------------------------------------- */ #category #s_listing .s_item_info > .s_actions, #category #s_listing .s_item_info div.s_actions { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } /* ----------------------------------------------------- BESTELKNOP Bestaande gradient blijft behouden ----------------------------------------------------- */ #category #s_listing .s_button_add_to_cart { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:40px !important; margin:2px 0 0 !important; padding: 0 5px !important; border-radius:22px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; box-sizing:border-box !important; } /* ----------------------------------------------------- PAGINERING Altijd volledige breedte onder producten ----------------------------------------------------- */ #category #s_listing .pagination, #category .pagination, #category .pagination-wrapper, #category .pagination_results, #category .s_pagination { grid-column:1 / -1 !important; width:100% !important; max-width:100% !important; clear:both !important; box-sizing:border-box !important; } /* ----------------------------------------------------- CLEAR ELEMENT VAN HET THEMA Mag de grid niet beïnvloeden ----------------------------------------------------- */ #category #s_listing > .listitempage > .clear { display:none !important; } } /* ========================================================= EXTRA SMALLE MOBIELE SCHERMEN Blijft altijd 2 kolommen ========================================================= */ @media only screen and (max-width:380px) { #category #s_listing > .listitempage { width:90% !important; max-width:90% !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-gap:6px !important; row-gap:10px !important; } #category #s_listing > .listitempage > .listitem.s_item { padding:6px !important; } #category #s_listing .s_item .s_thumb { height:120px !important; padding: 18px 3px 3px 3px !important; } #category #s_listing .s_item_info h3 a { line-height:16px !important; min-height:64px !important; max-height:64px !important; } #category #s_listing .s_button_add_to_cart { height:38px !important; padding: 0 4px !important; } #category #s_listing .s_item .wishlist-icon { top:6px !important; right:6px !important; } } @media only screen and (max-width:600px) { #category #s_listing .s_item_info h3 a { display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:4 !important; overflow:hidden !important; text-overflow:ellipsis !important; line-height:17px !important; min-height:68px !important; max-height:68px !important; } } /* ========================================================= HOMEPAGINA MOBIELE PRODUCTBLOKKEN 2 GELIJKE KOLOMMEN ========================================================= */ @media only screen and (max-width:600px) { /* Homepage productlijsten */ #home .s_listing.s_grid_view.size_2 { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:8px !important; row-gap:12px !important; width:92% !important; max-width:92% !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; padding:0 !important; box-sizing:border-box !important; } /* Productkaarten */ #home .s_listing.s_grid_view.size_2 > .s_item { display:flex !important; flex-direction:column !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:8px !important; float:none !important; clear:none !important; position:relative !important; background:#fff !important; border:1px solid #eee !important; border-radius:10px !important; box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 9px 20px rgba(0,0,0,.08) !important; overflow:hidden !important; box-sizing:border-box !important; } /* Afbeelding */ #home .s_listing.s_grid_view.size_2 .s_thumb { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:135px !important; margin:0 0 6px !important; padding: 22px 4px 4px 4px !important; overflow:hidden !important; box-sizing:border-box !important; } #home .s_listing.s_grid_view.size_2 .s_thumb img { width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; margin:auto !important; } /* Hart */ #home .s_listing.s_grid_view.size_2 .wishlist-icon { position:absolute !important; top:8px !important; right:8px !important; z-index:20 !important; } /* Productinformatie */ #home .s_listing.s_grid_view.size_2 .s_item_info { display:flex !important; flex-direction:column !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow:hidden !important; } /* Titel 4 regels */ #home .s_listing.s_grid_view.size_2 .s_item_info h3 { width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:0 !important; } #home .s_listing.s_grid_view.size_2 .s_item_info h3 a { display:-webkit-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:4 !important; line-clamp:4 !important; white-space:normal !important; overflow:hidden !important; text-overflow:ellipsis !important; overflow-wrap:anywhere !important; word-break:break-word !important; line-height:17px !important; min-height:68px !important; max-height:68px !important; margin:0 0 5px !important; text-align:center !important; box-sizing:border-box !important; } /* Prijs */ #home .s_listing.s_grid_view.size_2 .s_price_holder { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; margin:2px 0 7px !important; } /* Rating verbergen */ #home .s_listing.s_grid_view.size_2 .s_actions.s_rating { display:none !important; height:0 !important; margin:0 !important; padding:0 !important; } /* Bestelknop */ #home .s_listing.s_grid_view.size_2 .s_actions { width:100% !important; margin:0 !important; padding:0 !important; } #home .s_listing.s_grid_view.size_2 .s_button_add_to_cart { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:40px !important; margin:2px 0 0 !important; padding:0 5px !important; border-radius:22px !important; box-sizing:border-box !important; } /* Clear element niet laten meetellen in grid */ #home .s_listing.s_grid_view.size_2 > .clear { display:none !important; } } /* ========================================================= PRODUCTBEOORDELING STERREN VERBERGEN Desktop + mobiel ========================================================= */ #category #s_listing .s_actions.s_rating, #home .s_listing .s_actions.s_rating, .listitem.s_item .s_actions.s_rating { display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; min-height:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } /* ========================================================= MOBIEL - FILTER + SORTEREN Compact en modern ========================================================= */ @media only screen and (max-width:600px) { /* ===================================================== FILTER ===================================================== */ #left_col .filter_module.s_box { width:92% !important; max-width:92% !important; margin:18px auto 10px !important; padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; box-sizing:border-box !important; } #left_col .filter_module .box-heading { margin:0 !important; padding:0 !important; background:transparent !important; border:none !important; } #left_col .filter_module .box-heading h2 { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:46px !important; margin:0 !important; padding:0 18px !important; background:#fff !important; border:1px solid #e5e5e5 !important; border-radius:24px !important; box-shadow: 0 3px 8px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.05) !important; color:#222 !important; cursor:pointer !important; box-sizing:border-box !important; } /* Oude groene lijn verwijderen */ #left_col .filter_module .box-heading h2::after { display:none !important; content:none !important; } /* Eventueel icoon bij Filter groen */ #left_col .filter_module .box-heading h2 i { color:#2b8717 !important; margin-left:8px !important; } /* Filterinhoud wanneer geopend */ #left_col .filter_module .box-content { width:100% !important; margin:8px 0 0 !important; padding:12px 14px !important; background:#fff !important; border:1px solid #e7e7e7 !important; border-radius:12px !important; box-shadow:0 6px 18px rgba(0,0,0,.06) !important; box-sizing:border-box !important; } /* ===================================================== SORTEREN ===================================================== */ #listing_options { width:92% !important; max-width:92% !important; margin:0 auto 18px !important; padding:0 !important; box-sizing:border-box !important; } #listing_arrange { display:flex !important; align-items:center !important; width:100% !important; height:46px !important; margin:0 !important; padding:0 !important; background:#fff !important; border:1px solid #e5e5e5 !important; border-radius:24px !important; box-shadow: 0 3px 8px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.05) !important; overflow:visible !important; box-sizing:border-box !important; } /* "Sorteren op:" */ #listing_arrange .s_label { display:flex !important; align-items:center !important; height:44px !important; margin:0 !important; padding:0 6px 0 18px !important; background:transparent !important; border:none !important; white-space:nowrap !important; box-shadow:none !important; box-sizing:border-box !important; } /* Dropdown gedeelte */ #listing_sort { position:relative !important; display:flex !important; align-items:center !important; flex:1 1 auto !important; min-width:0 !important; height:44px !important; margin:0 !important; padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; box-sizing:border-box !important; } /* Geselecteerde sortering */ #listing_sort > .s_selected { display:flex !important; align-items:center !important; width:100% !important; height:44px !important; margin:0 !important; padding:0 18px 0 8px !important; background:transparent !important; border:none !important; color:#2b8717 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; box-sizing:border-box !important; } /* Dropdown lijst */ #listing_sort .s_options { position:absolute !important; top:50px !important; right:0 !important; min-width:190px !important; margin:0 !important; padding:5px !important; background:#fff !important; border:1px solid #e5e5e5 !important; border-radius:12px !important; box-shadow:0 8px 24px rgba(0,0,0,.12) !important; z-index:1000 !important; overflow:hidden !important; } #listing_sort .s_options li { margin:0 !important; padding:0 !important; } #listing_sort .s_options a { display:block !important; padding:10px 12px !important; background:#fff !important; color:#333 !important; border-radius:7px !important; text-decoration:none !important; } #listing_sort .s_options a:hover { background:#f1f8ef !important; color:#2b8717 !important; } } @media only screen and (max-width:600px) { /* Filterknop inhoud netjes centreren */ #left_col .filter_module .box-heading h2 { position:relative !important; gap:8px !important; } /* Los filter-icoon naar binnen trekken */ #left_col .filter_module .box-heading h2 i, #left_col .filter_module .box-heading .fa, #left_col .filter_module .box-heading .fas, #left_col .filter_module .box-heading .far, #left_col .filter_module .box-heading .fal { position:static !important; margin:0 !important; color:#2b8717 !important; font-size:15px !important; } /* Eventuele absoluut gepositioneerde iconen resetten */ #left_col .filter_module .box-heading { display:flex !important; justify-content:center !important; align-items:center !important; } } /* ========================================================= MOBIEL - WITRUIMTE FILTER / SORTEREN / PRODUCTEN VERKLEINEN ========================================================= */ @media only screen and (max-width:600px) { /* Ruimte boven Filter flink verkleinen */ #left_col .filter_module.s_box { margin-top:8px !important; margin-bottom:10px !important; } /* Minder ruimte rondom het hele filtergedeelte */ #left_col { margin-top:8px !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; } /* Sorteren dichter onder Filter */ #listing_options { margin-top:10px !important; margin-bottom:14px !important; padding-top:0 !important; padding-bottom:0 !important; } /* Eventuele extra ruimte van het categorieblok verwijderen */ #category { padding-top:0 !important; } /* Producten dichter onder Sorteren */ #category #s_listing { margin-top:0 !important; padding-top:0 !important; } #category #s_listing > .listitempage { margin-top:0 !important; } } @media only screen and (max-width:600px) { /* Bovenste categorieblok compacter maken */ #intro { margin-bottom:0 !important; padding-bottom:0 !important; } #intro_wrap { margin-bottom:0 !important; padding-bottom:0 !important; } #intro_wrap > .s_wrap { margin-bottom:0 !important; padding-bottom:12px !important; } /* Minder ruimte onder de titel */ #intro h1 { margin-bottom:8px !important; } /* Filter dichter onder categorie-intro */ #left_col { margin-top:0 !important; padding-top:0 !important; } #left_col .filter_module.s_box { margin-top:8px !important; } } /* ========================================================= MOBIEL - RUIMTE FILTER → SORTEREN VERKLEINEN ========================================================= */ @media only screen and (max-width:600px) { /* Geen extra ruimte tussen linker kolom en categorie */ #content { gap:0 !important; row-gap:0 !important; } /* Filterblok */ #left_col { margin-bottom:0 !important; padding-bottom:0 !important; } #left_col .filter_module.s_box { margin-bottom:10px !important; } /* Categorie begint direct na filter */ #category { margin-top:0 !important; padding-top:0 !important; } /* Sorteren */ #listing_options { margin-top:0 !important; margin-bottom:14px !important; } } /* ========================================================= DESKTOP - RUIMTE HOMEPAGINA VERBETEREN ========================================================= */ @media only screen and (min-width:1001px) { /* Meer ruimte tussen hoofdmenu en "Meepakkers:" */ #home h2, #home .s_module h2, #home .box-heading h2 { margin-top:22px !important; } /* Productblok compacter naar beneden */ #home .s_listing.s_grid_view.size_2 { margin-bottom:28px !important; padding-bottom:0 !important; } /* Minder ruimte vóór de onderste homepage tekst */ #home .category_description, #home #bottom_description, #home .bottom_description, #home .content_style { margin-top:28px !important; padding-top:0 !important; } } /* ========================================================= HOMEPAGINA DESKTOP RUIMTE TUSSEN MEEPAKKERS EN WELKOMSTTEKST VERKLEINEN ========================================================= */ @media only screen and (min-width:1001px) { /* Meepakkers-module: geen enorme ruimte eronder */ #home .tb-customizer-slot[data-customizer-module-code="featured"] { margin-bottom:0 !important; padding-bottom:0 !important; } #home .tb-customizer-slot[data-customizer-module-code="featured"] .s_module_featured { margin-bottom:0 !important; padding-bottom:0 !important; } #home .tb-customizer-slot[data-customizer-module-code="featured"] .s_listing { margin-bottom:0 !important; padding-bottom:0 !important; } /* Welkomsttekst dichter onder de producten */ #home .tb-customizer-slot[data-customizer-module-code="welcome"] { margin-top:35px !important; padding-top:0 !important; } #home .tb-customizer-slot[data-customizer-module-code="welcome"] .s_module_content { margin-top:0 !important; padding-top:0 !important; } #home .tb-customizer-slot[data-customizer-module-code="welcome"] .tb-customizer-welcome-content { margin-top:0 !important; padding-top:0 !important; } /* Eerste kop heeft zelf ook geen extra bovenruimte nodig */ #home .tb-customizer-slot[data-customizer-module-code="welcome"] .tb-customizer-welcome-content > h1:first-child { margin-top:0 !important; } } /* ========================================================= HOMEPAGINA DESKTOP WITRUIMTE TUSSEN MEEPAKKERS EN TEKST VERDER VERKLEINEN ========================================================= */ @media only screen and (min-width:1001px) { /* Hele content-top positie compacter */ #home .tb-customizer-position[data-customizer-position="content_top"] { margin-bottom:0 !important; padding-bottom:0 !important; } /* Featured slot volledig compact */ #home .tb-customizer-slot[data-customizer-module-code="featured"] { margin-bottom:0 !important; padding-bottom:0 !important; min-height:0 !important; height:auto !important; } #home .tb-customizer-slot[data-customizer-module-code="featured"] .s_module_featured { margin-bottom:0 !important; padding-bottom:0 !important; min-height:0 !important; height:auto !important; } #home .tb-customizer-slot[data-customizer-module-code="featured"] .s_listing { margin-bottom:0 !important; padding-bottom:0 !important; min-height:0 !important; height:auto !important; } /* Clear-element mag geen extra hoogte veroorzaken */ #home .tb-customizer-slot[data-customizer-module-code="featured"] .s_listing > .clear { display:none !important; height:0 !important; margin:0 !important; padding:0 !important; } /* Welkomsttekst dichter omhoog */ #home .tb-customizer-slot[data-customizer-module-code="welcome"] { margin-top:18px !important; padding-top:0 !important; } #home .tb-customizer-slot[data-customizer-module-code="welcome"] .lazy-load-section, #home .tb-customizer-slot[data-customizer-module-code="welcome"] .s_module_content, #home .tb-customizer-slot[data-customizer-module-code="welcome"] .tb-customizer-welcome-content { margin-top:0 !important; padding-top:0 !important; } #home .tb-customizer-slot[data-customizer-module-code="welcome"] .tb-customizer-welcome-content > h1:first-child { margin-top:0 !important; } } /* Hele gedeelte onder de H1 omhoog */ body.s_page_product_category #content { margin-top:-25px !important; padding-top:0 !important; } /* ========================================================= PRODUCTPAGINA - NIET OP VOORRAAD COMPLETE NIEUWE OPZET ========================================================= */ /* --------------------------------------------------------- 1. "Beschikbaar: 0" verbergen --------------------------------------------------------- */ #stock_counter.niet_op_voorraad { display:none !important; } /* --------------------------------------------------------- 2. EXTRA "BESCHIKBAAR" MELDING VERBERGEN bij producten die gewoon op voorraad zijn --------------------------------------------------------- */ #noStockMessage:not(:has(.notifyme)) { display:none !important; } /* --------------------------------------------------------- 3. NIET OP VOORRAAD MELDING --------------------------------------------------------- */ #noStockMessage:has(.notifyme) { display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:12px !important; width:100% !important; max-width:100% !important; margin:12px 0 16px !important; padding:12px 15px !important; background:#f7faf5 !important; border:1px solid #dbe8d7 !important; border-radius:10px !important; color:#444 !important; font-weight:600 !important; box-sizing:border-box !important; } /* Rood statusbolletje */ #noStockMessage:has(.notifyme)::before { content:"" !important; display:inline-block !important; width:8px !important; height:8px !important; flex:0 0 8px !important; background:#d71919 !important; border-radius:50% !important; } /* --------------------------------------------------------- 4. GEEF SEINTJE KNOP --------------------------------------------------------- */ #noStockMessage:has(.notifyme) .notifyme { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; margin:0 !important; padding:9px 17px !important; background:#2b8717 !important; border:2px solid #2b8717 !important; border-radius:22px !important; color:#fff !important; font-weight:700 !important; text-decoration:none !important; cursor:pointer !important; box-shadow:0 3px 9px rgba(43,135,23,.22) !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important; } /* Belletje wit */ #noStockMessage:has(.notifyme) .notifyme i { color:#fff !important; } /* Hover Geef seintje */ #noStockMessage:has(.notifyme) .notifyme:hover { background:#216c11 !important; border-color:#216c11 !important; color:#fff !important; transform:translateY(-1px) !important; box-shadow:0 5px 13px rgba(43,135,23,.30) !important; } #noStockMessage:has(.notifyme) .notifyme:hover i { color:#fff !important; } /* ========================================================= 5. UITGESCHAKELDE BESTELKNOP ========================================================= */ #product_buy #add_to_cart[style*="pointer-events: none"] { display:flex !important; align-items:center !important; justify-content:center !important; background:#e7e7e7 !important; background-image:none !important; border:1px solid #d0d0d0 !important; border-radius:6px !important; box-shadow:none !important; opacity:1 !important; cursor:not-allowed !important; pointer-events:none !important; box-sizing:border-box !important; } /* Originele "Bestel nu" verbergen */ #product_buy #add_to_cart[style*="pointer-events: none"] .s_text { font-size:0 !important; color:#666 !important; opacity:1 !important; } /* Nieuwe tekst */ #product_buy #add_to_cart[style*="pointer-events: none"] .s_text::after { content:"Tijdelijk niet bestelbaar" !important; font-size:14px !important; font-weight:700 !important; color:#666 !important; } /* Geen hover-effect */ #product_buy #add_to_cart[style*="pointer-events: none"]:hover { background:#e7e7e7 !important; background-image:none !important; border-color:#d0d0d0 !important; box-shadow:none !important; transform:none !important; } /* ========================================================= 6. MOBIEL ========================================================= */ @media only screen and (max-width:600px) { #noStockMessage:has(.notifyme) { gap:9px !important; margin:10px 0 14px !important; padding:11px 10px !important; } #noStockMessage:has(.notifyme) .notifyme { padding:8px 14px !important; } #product_buy #add_to_cart[style*="pointer-events: none"] .s_text::after { font-size:13px !important; } } /* ========================================================= PRODUCTPAGINA - UITGESCHAKELDE BESTELKNOP ========================================================= */ #product_buy #add_to_cart[style*="pointer-events: none"] { position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-height:54px !important; background:#e7e7e7 !important; background-image:none !important; border:1px solid #d0d0d0 !important; border-radius:6px !important; box-shadow:none !important; opacity:1 !important; cursor:not-allowed !important; pointer-events:none !important; box-sizing:border-box !important; } /* Originele "Bestel nu" volledig verbergen */ #product_buy #add_to_cart[style*="pointer-events: none"] .s_text { visibility:hidden !important; } /* Nieuwe tekst rechtstreeks op de knop */ #product_buy #add_to_cart[style*="pointer-events: none"]::after { content:"Tijdelijk niet bestelbaar" !important; position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#666 !important; font-size:14px !important; font-weight:700 !important; visibility:visible !important; } /* Geen hover-effect */ #product_buy #add_to_cart[style*="pointer-events: none"]:hover { background:#e7e7e7 !important; background-image:none !important; border-color:#d0d0d0 !important; box-shadow:none !important; transform:none !important; } /* Mobiel */ @media only screen and (max-width:600px) { #product_buy #add_to_cart[style*="pointer-events: none"]::after { font-size:13px !important; } } /* ========================================================= PRODUCTPAGINA - ACTIEVE BESTEL NU KNOP ========================================================= */ /* Actieve bestelknop */ #product_buy #add_to_cart:not([style*="pointer-events: none"]) { display:flex !important; align-items:center !important; justify-content:center !important; min-height:54px !important; background:linear-gradient( 135deg, #63b80f 0%, #2b8717 100% ) !important; border:1px solid #287d15 !important; border-radius:9px !important; box-shadow: 0 4px 10px rgba(43,135,23,.22), 0 8px 18px rgba(43,135,23,.16) !important; cursor:pointer !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } /* Tekst Bestel nu */ #product_buy #add_to_cart:not([style*="pointer-events: none"]) .s_text { display:inline-flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; font-weight:700 !important; } /* Tasje voor Bestel nu */ #product_buy #add_to_cart:not([style*="pointer-events: none"]) .s_text::before { content:"\f290" !important; font-family:"Font Awesome 6 Pro" !important; font-weight:400 !important; font-style:normal !important; display:inline-block !important; margin-right:9px !important; color:#fff !important; font-size:15px !important; line-height:1 !important; } /* Hover */ #product_buy #add_to_cart:not([style*="pointer-events: none"]):hover { background:linear-gradient( 135deg, #55a80d 0%, #216c11 100% ) !important; transform:translateY(-2px) !important; box-shadow: 0 6px 14px rgba(43,135,23,.27), 0 10px 22px rgba(43,135,23,.20) !important; } /* Klik-effect */ #product_buy #add_to_cart:not([style*="pointer-events: none"]):active { transform:translateY(0) !important; box-shadow: 0 3px 7px rgba(43,135,23,.20) !important; } /* ========================================================= MOBIEL ========================================================= */ @media only screen and (max-width:600px) { #product_buy #add_to_cart:not([style*="pointer-events: none"]) { min-height:52px !important; border-radius:9px !important; } #product_buy #add_to_cart:not([style*="pointer-events: none"]) .s_text::before { font-size:14px !important; margin-right:7px !important; } } /* ========================================================= PRODUCTPAGINA - PRIJSVAKJE VERWIJDEREN ========================================================= */ #product_price, .product_price, .s_price { background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:8px 0 14px !important; } /* Prijs zelf */ #product_price .s_price, .product_price .s_price, .s_price { color:#5caf16 !important; font-weight:700 !important; } /* Eventueel wit vlak van omliggende wrapper verwijderen */ #product_price_holder, .product_price_holder, .price_holder { background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; } /* ========================================================= PRODUCTPAGINA - PRIJSBADGE ONZE PRIJS | €0,50 ========================================================= */ .holder_price_reg { position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:185px !important; min-height:58px !important; margin:12px 0 20px !important; padding:0 18px 0 100px !important; background:linear-gradient( 135deg, #f8fcf6 0%, #eef8e9 100% ) !important; border:1px solid #d5e9cd !important; border-radius:10px !important; box-shadow: 0 4px 10px rgba(43,135,23,.07), 0 8px 18px rgba(43,135,23,.06) !important; color:#2b8717 !important; font-weight:700 !important; line-height:1 !important; box-sizing:border-box !important; } /* "ONZE PRIJS" links in dezelfde badge */ .holder_price_reg::before { content:"ONZE PRIJS" !important; position:absolute !important; left:15px !important; top:50% !important; transform:translateY(-50%) !important; display:flex !important; align-items:center !important; height:26px !important; padding-right:13px !important; border-right:1px solid #c8dfbe !important; color:#555 !important; font-size:10px !important; font-weight:700 !important; line-height:26px !important; letter-spacing:.4px !important; white-space:nowrap !important; } /* Klein subtiel hover-effect */ .holder_price_reg:hover { background:linear-gradient( 135deg, #f5fbf2 0%, #e9f6e4 100% ) !important; border-color:#c6e1bc !important; box-shadow: 0 5px 12px rgba(43,135,23,.09), 0 9px 20px rgba(43,135,23,.07) !important; } /* ========================================================= MOBIEL ========================================================= */ @media only screen and (max-width:600px) { .holder_price_reg { min-width:170px !important; min-height:54px !important; margin:10px 0 16px !important; padding:0 15px 0 94px !important; border-radius:9px !important; } .holder_price_reg::before { left:13px !important; height:24px !important; padding-right:11px !important; font-size:9px !important; line-height:24px !important; } } /* ========================================================= PRODUCTPAGINA - AANBIEDINGSPRIJS ========================================================= */ .s_price.s_promo_price { position:relative !important; display:inline-flex !important; align-items:center !important; gap:14px !important; width:auto !important; min-height:58px !important; margin:12px 0 18px !important; padding:10px 16px 10px 104px !important; background:linear-gradient( 135deg, #fff9f2 0%, #f7fbf5 100% ) !important; border:1px solid #eadfcf !important; border-radius:10px !important; box-shadow: 0 4px 10px rgba(0,0,0,.05), 0 8px 18px rgba(43,135,23,.05) !important; box-sizing:border-box !important; } /* Label links */ .s_price.s_promo_price::before { content:"AANBIEDING" !important; position:absolute !important; left:14px !important; top:50% !important; transform:translateY(-50%) !important; display:flex !important; align-items:center !important; height:26px !important; padding-right:13px !important; border-right:1px solid #dfd4c5 !important; color:#b24a00 !important; font-size:10px !important; font-weight:700 !important; line-height:26px !important; letter-spacing:.4px !important; white-space:nowrap !important; } /* Originele prijs */ .s_price.s_promo_price .old_price_wrapper { display:inline-flex !important; align-items:center !important; gap:4px !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:1 !important; } /* "Van" voor de oude prijs */ .s_price.s_promo_price .old_price_wrapper::before { content:"Van" !important; color:#777 !important; font-size:11px !important; font-weight:600 !important; } /* Oude prijs zelf */ .s_price.s_promo_price .holder_price_std { display:inline !important; color:#888 !important; font-size:13px !important; font-weight:600 !important; text-decoration:line-through !important; text-decoration-thickness:1px !important; } /* Nieuwe actieprijs */ .s_price.s_promo_price .holder_price_reg { display:inline-flex !important; align-items:center !important; min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; color:#2b8717 !important; font-weight:700 !important; line-height:1 !important; } /* Normale "ONZE PRIJS" badge binnen aanbieding uitschakelen */ .s_price.s_promo_price .holder_price_reg::before { display:none !important; content:none !important; } /* ========================================================= MOBIEL ========================================================= */ @media only screen and (max-width:600px) { .s_price.s_promo_price { gap:10px !important; min-height:54px !important; margin:10px 0 15px !important; padding:9px 12px 9px 96px !important; } .s_price.s_promo_price::before { left:12px !important; padding-right:10px !important; font-size:9px !important; } .s_price.s_promo_price .holder_price_std { font-size:12px !important; } } /* ========================================================= AANBIEDING IN PRODUCTKAARTEN Productpagina wordt hiermee NIET aangepast ========================================================= */ #category #s_listing .s_item .s_price.s_promo_price, #home .s_listing .s_item .s_price.s_promo_price { position:relative !important; display:grid !important; grid-template-columns:auto auto 1fr !important; align-items:center !important; column-gap:10px !important; width:100% !important; min-height:58px !important; margin:4px 0 12px !important; padding:9px 13px !important; background:linear-gradient( 135deg, #fffaf3 0%, #f7fbf4 100% ) !important; border:1px solid #eadfce !important; border-radius:10px !important; box-shadow: 0 3px 8px rgba(0,0,0,.04), 0 7px 15px rgba(43,135,23,.05) !important; box-sizing:border-box !important; } /* AANBIEDING */ #category #s_listing .s_item .s_price.s_promo_price::before, #home .s_listing .s_item .s_price.s_promo_price::before { content:"AANBIEDING" !important; position:static !important; transform:none !important; display:flex !important; align-items:center !important; height:28px !important; margin:0 !important; padding:0 11px 0 0 !important; border-right:1px solid #dfd5c8 !important; color:#c55a00 !important; font-size:9px !important; font-weight:700 !important; letter-spacing:.35px !important; white-space:nowrap !important; } /* Oude prijs */ #category #s_listing .s_item .old_price_wrapper, #home .s_listing .s_item .old_price_wrapper { display:flex !important; align-items:center !important; gap:4px !important; margin:0 !important; padding:0 10px 0 0 !important; border-right:1px solid #dfd5c8 !important; font-size:0 !important; white-space:nowrap !important; } /* "Van" */ #category #s_listing .s_item .old_price_wrapper::before, #home .s_listing .s_item .old_price_wrapper::before { content:"Van" !important; color:#777 !important; font-size:10px !important; font-weight:600 !important; } /* Doorgestreepte oude prijs */ #category #s_listing .s_item .holder_price_std, #home .s_listing .s_item .holder_price_std { color:#e25b5b !important; font-size:13px !important; font-weight:700 !important; text-decoration:line-through !important; text-decoration-thickness:2px !important; } /* Nieuwe aanbiedingsprijs */ #category #s_listing .s_item .s_price.s_promo_price .holder_price_reg, #home .s_listing .s_item .s_price.s_promo_price .holder_price_reg { display:flex !important; align-items:center !important; justify-content:flex-end !important; margin:0 !important; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important; color:#5c9d17 !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } /* Geen ONZE PRIJS label in aanbieding */ #category #s_listing .s_item .s_price.s_promo_price .holder_price_reg::before, #home .s_listing .s_item .s_price.s_promo_price .holder_price_reg::before { display:none !important; content:none !important; } /* ========================================================= AANBIEDINGSPRIJS PRODUCTKAARTEN Alles netjes op 1 regel ========================================================= */ #category #s_listing .s_item .s_price.s_promo_price, #home .s_listing .s_item .s_price.s_promo_price { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; min-height:58px !important; margin:4px 0 12px !important; padding:8px 10px !important; background:linear-gradient(135deg,#fffaf3 0%,#f7fbf4 100%) !important; border:1px solid #eadfce !important; border-radius:10px !important; box-shadow: 0 3px 8px rgba(0,0,0,.04), 0 7px 15px rgba(43,135,23,.05) !important; box-sizing:border-box !important; white-space:nowrap !important; } /* AANBIEDING */ #category #s_listing .s_item .s_price.s_promo_price::before, #home .s_listing .s_item .s_price.s_promo_price::before { content:"AANBIEDING" !important; position:static !important; transform:none !important; display:flex !important; align-items:center !important; height:28px !important; margin:0 9px 0 0 !important; padding:0 9px 0 0 !important; border-right:1px solid #dfd5c8 !important; color:#c55a00 !important; font-size:9px !important; font-weight:700 !important; letter-spacing:.2px !important; line-height:1 !important; white-space:nowrap !important; } /* Oude prijs blok */ #category #s_listing .s_item .old_price_wrapper, #home .s_listing .s_item .old_price_wrapper { display:flex !important; flex-direction:row !important; align-items:center !important; width:auto !important; height:28px !important; margin:0 9px 0 0 !important; padding:0 9px 0 0 !important; border-right:1px solid #dfd5c8 !important; font-size:0 !important; line-height:1 !important; white-space:nowrap !important; } /* Oude prijs zelf */ #category #s_listing .s_item .holder_price_std, #home .s_listing .s_item .holder_price_std { display:inline-block !important; margin:0 !important; padding:0 !important; color:#e25b5b !important; font-size:13px !important; font-weight:700 !important; line-height:1 !important; text-decoration:line-through !important; text-decoration-thickness:2px !important; white-space:nowrap !important; } /* Nieuwe aanbiedingsprijs */ #category #s_listing .s_item .s_price.s_promo_price > .holder_price_reg, #home .s_listing .s_item .s_price.s_promo_price > .holder_price_reg { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important; color:#5c9d17 !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } /* Eventuele extra labels/symbolen van eerdere CSS verwijderen */ #category #s_listing .s_item .s_price.s_promo_price > .holder_price_reg::before, #category #s_listing .s_item .s_price.s_promo_price > .holder_price_reg::after, #home .s_listing .s_item .s_price.s_promo_price > .holder_price_reg::before, #home .s_listing .s_item .s_price.s_promo_price > .holder_price_reg::after { content:none !important; display:none !important; } /* ========================================================= DESKTOP PRODUCTOVERZICHT - 4 PRODUCTEN PER RIJ ========================================================= */ @media only screen and (min-width:1001px) { #category #s_listing > .listitempage { display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:20px !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } #category #s_listing > .listitempage > .listitem.s_item { width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding-left:14px !important; padding-right:14px !important; float:none !important; clear:none !important; box-sizing:border-box !important; } #category #s_listing > .listitempage > .clear { display:none !important; } } /* ========================================================= MOBIEL - AANBIEDINGSPRIJS PRODUCTKAARTEN ========================================================= */ @media only screen and (max-width:600px) { #category #s_listing .s_item .s_price.s_promo_price, #home .s_listing .s_item .s_price.s_promo_price { display:grid !important; grid-template-columns:auto 1fr !important; grid-template-rows:auto auto !important; align-items:center !important; column-gap:8px !important; row-gap:6px !important; width:100% !important; min-width:0 !important; min-height:62px !important; margin:4px 0 10px !important; padding:8px 9px !important; background:linear-gradient(135deg,#fffaf3 0%,#f7fbf4 100%) !important; border:1px solid #eadfce !important; border-radius:9px !important; box-shadow: 0 3px 8px rgba(0,0,0,.04), 0 6px 12px rgba(43,135,23,.04) !important; box-sizing:border-box !important; overflow:hidden !important; } /* AANBIEDING bovenaan over hele breedte */ #category #s_listing .s_item .s_price.s_promo_price::before, #home .s_listing .s_item .s_price.s_promo_price::before { content:"AANBIEDING" !important; position:static !important; transform:none !important; grid-column:1 / -1 !important; grid-row:1 !important; display:block !important; height:auto !important; margin:0 !important; padding:0 !important; border:none !important; color:#c55a00 !important; font-size:8px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.25px !important; white-space:nowrap !important; } /* Oude prijs */ #category #s_listing .s_item .old_price_wrapper, #home .s_listing .s_item .old_price_wrapper { grid-column:1 !important; grid-row:2 !important; display:flex !important; align-items:center !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 8px 0 0 !important; border-right:1px solid #dfd5c8 !important; font-size:0 !important; white-space:nowrap !important; } #category #s_listing .s_item .holder_price_std, #home .s_listing .s_item .holder_price_std { display:inline !important; color:#e25b5b !important; font-size:12px !important; font-weight:700 !important; text-decoration:line-through !important; text-decoration-thickness:2px !important; white-space:nowrap !important; } } /* ========================================================= MOBIEL - AANBIEDINGSPRIJS DEFINITIEVE VERSIE HTML: € 8,95 € 7,50 ========================================================= */ @media only screen and (max-width:600px) { /* Complete aanbiedingsbox */ #category #s_listing .s_item .s_price.s_promo_price { display:grid !important; grid-template-columns:auto auto 1fr !important; grid-template-rows:auto auto !important; align-items:center !important; width:100% !important; min-width:0 !important; max-width:100% !important; margin:0 !important; padding:10px 9px !important; background:linear-gradient( 135deg, #fffaf3 0%, #f7fbf2 100% ) !important; border:1px solid #eadfc9 !important; border-radius:10px !important; box-shadow:0 3px 9px rgba(0,0,0,.05) !important; box-sizing:border-box !important; overflow:hidden !important; } /* ===================================================== AANBIEDING bovenaan ===================================================== */ #category #s_listing .s_item .s_price.s_promo_price::before { content:"AANBIEDING" !important; grid-column:1 / -1 !important; grid-row:1 !important; display:block !important; width:100% !important; margin:0 0 9px 0 !important; padding:0 !important; color:#d36b00 !important; font-size:9px !important; font-weight:700 !important; line-height:1 !important; text-align:center !important; letter-spacing:.2px !important; background:transparent !important; border:0 !important; } /* ===================================================== OUDE PRIJS bijvoorbeeld €8,95 ===================================================== */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price { grid-column:1 !important; grid-row:2 !important; display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 12px 0 0 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; text-decoration:line-through !important; text-decoration-thickness:2px !important; background:transparent !important; border:0 !important; } /* Euroteken oude prijs */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > .s_currency { display:inline !important; position:static !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; text-decoration:line-through !important; } /* Bedrag oude prijs */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > [itemprop="price"] { display:inline !important; position:static !important; width:auto !important; margin:0 !important; padding:0 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; text-decoration:line-through !important; } } /* ========================================================= MOBIEL - AANBIEDINGSPRIJS PRODUCTKAARTEN DEFINITIEVE FLEX-VERSIE ========================================================= */ @media only screen and (max-width:600px) { /* Complete aanbiedingsbox */ #category #s_listing .s_item .s_price.s_promo_price { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:100% !important; margin:0 !important; padding:9px 8px !important; background:linear-gradient( 135deg, #fffaf3 0%, #f7fbf2 100% ) !important; border:1px solid #eadfc9 !important; border-radius:10px !important; box-shadow:0 3px 9px rgba(0,0,0,.05) !important; box-sizing:border-box !important; overflow:hidden !important; column-gap:0 !important; row-gap:0 !important; } /* ===================================================== AANBIEDING - VOLLEDIGE EERSTE REGEL ===================================================== */ #category #s_listing .s_item .s_price.s_promo_price::before { content:"AANBIEDING" !important; position:static !important; transform:none !important; display:block !important; flex:0 0 100% !important; width:100% !important; margin:0 0 9px 0 !important; padding:0 !important; background:transparent !important; border:0 !important; color:#d36b00 !important; font-size:9px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.2px !important; text-align:center !important; white-space:nowrap !important; } /* ===================================================== OUDE PRIJS €8,95 ===================================================== */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price { display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; margin:0 9px 0 0 !important; padding:0 9px 0 0 !important; border-right:1px solid #dfd5c8 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; text-decoration:line-through !important; text-decoration-thickness:2px !important; white-space:nowrap !important; } /* € van oude prijs */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > .s_currency { display:inline !important; position:static !important; width:auto !important; margin:0 !important; padding:0 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; } /* 8,95 */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > [itemprop="price"] { display:inline !important; position:static !important; width:auto !important; margin:0 !important; padding:0 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; } /* ===================================================== NIEUWE PRIJS €7,50 ===================================================== */ /* Groen euroteken */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency { display:inline !important; position:static !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; margin:0 2px 0 0 !important; padding:0 !important; color:#5c9d17 !important; font-size:15px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* 7,50 direct achter € */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency + [itemprop="price"] { display:inline !important; position:static !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; color:#5c9d17 !important; font-size:15px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* Geen extra pseudo-content */ #category #s_listing .s_item .s_price.s_promo_price .s_currency::before, #category #s_listing .s_item .s_price.s_promo_price .s_currency::after, #category #s_listing .s_item .s_price.s_promo_price [itemprop="price"]::before, #category #s_listing .s_item .s_price.s_promo_price [itemprop="price"]::after { content:none !important; display:none !important; } } /* ========================================================= MOBIEL - AANBIEDINGSPRIJS NETJES EN COMPACT ========================================================= */ @media only screen and (max-width:600px) { /* Complete aanbiedingsbox */ #category #s_listing .s_item .s_price.s_promo_price { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; column-gap:9px !important; row-gap:0 !important; width:100% !important; min-width:0 !important; max-width:100% !important; margin:0 !important; padding:9px 8px !important; background:linear-gradient( 135deg, #fffaf3 0%, #f7fbf2 100% ) !important; border:1px solid #eadfc9 !important; border-radius:10px !important; box-shadow:0 3px 9px rgba(0,0,0,.05) !important; box-sizing:border-box !important; overflow:hidden !important; } /* AANBIEDING op eerste regel */ #category #s_listing .s_item .s_price.s_promo_price::before { content:"AANBIEDING" !important; position:static !important; transform:none !important; display:block !important; flex:0 0 100% !important; width:100% !important; margin:0 0 9px 0 !important; padding:0 !important; background:transparent !important; border:0 !important; color:#d36b00 !important; font-size:9px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.2px !important; text-align:center !important; white-space:nowrap !important; } /* Oude prijs €8,95 */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price { display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; max-width:max-content !important; margin:0 !important; padding:0 !important; border:0 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; text-decoration:line-through !important; text-decoration-color:#df2020 !important; text-decoration-thickness:2px !important; white-space:nowrap !important; } /* Oude prijs onderdelen */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > .s_currency, #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > [itemprop="price"] { display:inline !important; position:static !important; width:auto !important; margin:0 !important; padding:0 !important; color:#df2020 !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; text-decoration:none !important; } /* Groen euroteken */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency { display:inline !important; position:static !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; margin:0 2px 0 0 !important; padding:0 !important; color:#5c9d17 !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } /* Nieuwe prijs 7,50 */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency + [itemprop="price"] { display:inline !important; position:static !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; color:#5c9d17 !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } } /* ========================================================= MOBIEL - AANBIEDING OUDE PRIJS BOVEN NIEUWE PRIJS DEFINITIEVE VERSIE ========================================================= */ @media only screen and (max-width:600px) { /* Complete aanbiedingsbox */ #category #s_listing .s_item .s_price.s_promo_price { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:100% !important; gap:0 !important; margin:0 !important; padding:8px 8px 9px !important; background:linear-gradient( 135deg, #fffaf3 0%, #f7fbf2 100% ) !important; border:1px solid #eadfc9 !important; border-radius:10px !important; box-shadow:0 3px 9px rgba(0,0,0,.05) !important; box-sizing:border-box !important; overflow:hidden !important; } /* AANBIEDING */ #category #s_listing .s_item .s_price.s_promo_price::before { content:"AANBIEDING" !important; position:static !important; transform:none !important; display:block !important; width:100% !important; margin:0 0 5px !important; padding:0 !important; background:transparent !important; border:0 !important; color:#d36b00 !important; font-size:9px !important; font-weight:700 !important; line-height:1 !important; text-align:center !important; letter-spacing:.2px !important; } /* Oude prijs */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; max-width:max-content !important; margin:0 0 6px !important; padding:0 !important; color:#df2020 !important; font-size:13px !important; font-weight:700 !important; line-height:1 !important; text-decoration:line-through !important; text-decoration-color:#df2020 !important; text-decoration-thickness:2px !important; white-space:nowrap !important; } /* Onderdelen oude prijs */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > .s_currency, #category #s_listing .s_item .s_price.s_promo_price > .s_old_price > [itemprop="price"] { display:inline !important; position:static !important; width:auto !important; margin:0 !important; padding:0 !important; color:#df2020 !important; font-size:13px !important; font-weight:700 !important; line-height:1 !important; text-decoration:none !important; } /* Groen euroteken van nieuwe prijs */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency { display:inline !important; position:static !important; width:auto !important; margin:0 !important; padding:0 !important; color:#5c9d17 !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; } /* Nieuwe prijs */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency + [itemprop="price"] { display:inline !important; position:static !important; width:auto !important; margin:0 !important; padding:0 !important; color:#5c9d17 !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; } /* Nieuwe € en bedrag visueel als één regel */ #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency { margin-bottom:-16px !important; margin-right:32px !important; } #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency + [itemprop="price"] { margin-left:14px !important; } } /* ========================================================= STANDAARD PRIJS - "ONZE PRIJS" Alleen voor producten zonder aanbieding ========================================================= */ #category #s_listing .s_item .s_price:not(.s_promo_price) { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:150px !important; margin:4px auto 10px !important; padding:0 !important; background:linear-gradient(135deg,#fff 0%,#f7fbf2 100%) !important; border:1px solid #e2efd6 !important; border-radius:10px !important; box-shadow:0 3px 10px rgba(43,135,23,.07) !important; color:#5c9d17 !important; font-weight:700 !important; overflow:hidden !important; box-sizing:border-box !important; } /* Tekst "ONZE PRIJS" */ #category #s_listing .s_item .s_price:not(.s_promo_price)::before { content:"ONZE PRIJS" !important; display:inline-flex !important; align-items:center !important; align-self:stretch !important; margin-right:12px !important; padding:0 12px !important; border-right:1px solid #e2e2e2 !important; color:#555 !important; font-size:10px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } /* Euroteken */ #category #s_listing .s_item .s_price:not(.s_promo_price) .s_currency { color:#5c9d17 !important; font-weight:700 !important; margin-right:2px !important; } /* Bedrag */ #category #s_listing .s_item .s_price:not(.s_promo_price) [itemprop="price"] { color:#5c9d17 !important; font-weight:700 !important; } /* ========================================================= MOBIEL ========================================================= */ @media only screen and (max-width:600px) { #category #s_listing .s_item .s_price:not(.s_promo_price) { width:100% !important; min-width:0 !important; min-height:52px !important; margin:4px 0 9px !important; background:linear-gradient(135deg,#fff 0%,#f7fbf2 100%) !important; border:1px solid #e2efd6 !important; border-radius:10px !important; box-shadow:0 3px 10px rgba(43,135,23,.07) !important; } #category #s_listing .s_item .s_price:not(.s_promo_price)::before { content:"ONZE PRIJS" !important; margin-right:10px !important; padding:0 9px !important; border-right:1px solid #e2e2e2 !important; color:#555 !important; font-size:9px !important; font-weight:700 !important; white-space:nowrap !important; } #category #s_listing .s_item .s_price:not(.s_promo_price) .s_currency, #category #s_listing .s_item .s_price:not(.s_promo_price) [itemprop="price"] { color:#5c9d17 !important; font-weight:700 !important; } } /* ========================================================= NORMALE PRODUCTPRIJS - "ONZE PRIJS" CATEGORIEPAGINA + HOOFDPAGINA DESKTOP + MOBIEL Aanbiedingsprijzen (.s_promo_price) worden NIET aangepast ========================================================= */ /* ========================================================= DESKTOP / BROWSER ========================================================= */ @media only screen and (min-width:601px) { /* Normale prijs */ #category #s_listing .s_item .s_price:not(.s_promo_price), #home .s_listing .s_item .s_price:not(.s_promo_price) { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:155px !important; min-height:52px !important; margin:4px auto 10px !important; padding:0 !important; background:linear-gradient( 135deg, #ffffff 0%, #f7fbf2 100% ) !important; border:1px solid #e2efd6 !important; border-radius:10px !important; box-shadow: 0 3px 8px rgba(0,0,0,.04), 0 6px 14px rgba(43,135,23,.05) !important; color:#5c9d17 !important; font-weight:700 !important; overflow:hidden !important; box-sizing:border-box !important; } /* ONZE PRIJS */ #category #s_listing .s_item .s_price:not(.s_promo_price)::before, #home .s_listing .s_item .s_price:not(.s_promo_price)::before { content:"ONZE PRIJS" !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; align-self:stretch !important; margin:0 12px 0 0 !important; padding:0 12px !important; border-right:1px solid #e2e2e2 !important; color:#555 !important; font-size:10px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; box-sizing:border-box !important; } /* Euroteken */ #category #s_listing .s_item .s_price:not(.s_promo_price) .s_currency, #home .s_listing .s_item .s_price:not(.s_promo_price) .s_currency { color:#5c9d17 !important; font-weight:700 !important; margin-right:2px !important; } /* Bedrag */ #category #s_listing .s_item .s_price:not(.s_promo_price) [itemprop="price"], #home .s_listing .s_item .s_price:not(.s_promo_price) [itemprop="price"] { color:#5c9d17 !important; font-weight:700 !important; } } /* ========================================================= MOBIEL ========================================================= */ @media only screen and (max-width:600px) { /* Normale prijs */ #category #s_listing .s_item .s_price:not(.s_promo_price), #home .s_listing .s_item .s_price:not(.s_promo_price) { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:100% !important; min-height:52px !important; margin:4px 0 9px !important; padding:0 !important; background:linear-gradient( 135deg, #ffffff 0%, #f7fbf2 100% ) !important; border:1px solid #e2efd6 !important; border-radius:10px !important; box-shadow: 0 3px 8px rgba(0,0,0,.04), 0 6px 14px rgba(43,135,23,.05) !important; color:#5c9d17 !important; font-weight:700 !important; overflow:hidden !important; box-sizing:border-box !important; } /* ONZE PRIJS */ #category #s_listing .s_item .s_price:not(.s_promo_price)::before, #home .s_listing .s_item .s_price:not(.s_promo_price)::before { content:"ONZE PRIJS" !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; align-self:stretch !important; margin:0 9px 0 0 !important; padding:0 9px !important; border-right:1px solid #e2e2e2 !important; color:#555 !important; font-size:9px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; box-sizing:border-box !important; } /* Euroteken */ #category #s_listing .s_item .s_price:not(.s_promo_price) .s_currency, #home .s_listing .s_item .s_price:not(.s_promo_price) .s_currency { color:#5c9d17 !important; font-weight:700 !important; margin-right:2px !important; } /* Bedrag */ #category #s_listing .s_item .s_price:not(.s_promo_price) [itemprop="price"], #home .s_listing .s_item .s_price:not(.s_promo_price) [itemprop="price"] { color:#5c9d17 !important; font-weight:700 !important; } } /* ========================================================= MOBIEL - ONZE PRIJS + BEDRAG DICHTER BIJ ELKAAR ========================================================= */ @media only screen and (max-width:600px) { #category #s_listing .s_item .s_price:not(.s_promo_price), #home .s_listing .s_item .s_price:not(.s_promo_price) { min-height:48px !important; } /* ONZE PRIJS iets compacter */ #category #s_listing .s_item .s_price:not(.s_promo_price)::before, #home .s_listing .s_item .s_price:not(.s_promo_price)::before { margin-right:2px !important; padding-left:3px !important; padding-right:3px !important; } /* Euroteken dichter bij het bedrag */ #category #s_listing .s_item .s_price:not(.s_promo_price) .s_currency, #home .s_listing .s_item .s_price:not(.s_promo_price) .s_currency { margin-right:1px !important; } } /* ========================================================= WINKELMAND MELDING - DEFINITIEVE FIX Desktop + mobiel Voorkomt dat globale .s_item productkaart-CSS de winkelmand-popup kapot maakt ========================================================= */ /* --------------------------------------------------------- 1. VERBORGEN PRODUCTKAART IN NOTIFICATIE ECHT VERBERGEN --------------------------------------------------------- */ .noty_bar.s_notify .s_item, .noty_bar.s_notify .s_item.s_size_1 { display:none !important; } /* --------------------------------------------------------- 2. COMPLETE MELDING --------------------------------------------------------- */ .noty_bar.s_notify { position:relative !important; width:390px !important; max-width:calc(100vw - 24px) !important; min-height:0 !important; height:auto !important; margin:12px !important; padding:0 !important; background:#ffffff !important; border:1px solid #e3eadf !important; border-radius:12px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(43,135,23,.05) !important; overflow:hidden !important; box-sizing:border-box !important; } /* --------------------------------------------------------- 3. NOTY BINNENKANT --------------------------------------------------------- */ .noty_bar.s_notify .noty_message { display:block !important; width:100% !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:0 !important; background:#fff !important; box-sizing:border-box !important; } .noty_bar.s_notify .noty_text { display:block !important; width:100% !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:0 !important; } /* --------------------------------------------------------- 4. HEADER / TEKSTVAK --------------------------------------------------------- */ .noty_bar.s_notify .noty_header { position:relative !important; display:flex !important; align-items:center !important; width:100% !important; min-height:78px !important; height:auto !important; margin:0 !important; padding: 15px 50px 15px 18px !important; background: linear-gradient( 135deg, #ffffff 0%, #f7fbf4 100% ) !important; border:none !important; box-sizing:border-box !important; } /* Groen accent links */ .noty_bar.s_notify .noty_header::before { content:"✓" !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 34px !important; width:34px !important; height:34px !important; margin-right:13px !important; background:#eef8e9 !important; border-radius:50% !important; color:#2b8717 !important; font-size:18px !important; font-weight:700 !important; line-height:1 !important; box-sizing:border-box !important; } /* Tekst */ .noty_bar.s_notify .noty_header > span { display:block !important; flex:1 1 auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; color:#555 !important; font-size:13px !important; font-weight:400 !important; line-height:1.45 !important; text-align:left !important; } /* Productnaam */ .noty_bar.s_notify .noty_header > span > a:first-child { color:#222 !important; font-size:14px !important; font-weight:700 !important; text-decoration:none !important; } /* Winkelmandje-link */ .noty_bar.s_notify .noty_header > span > a:last-child { color:#2b8717 !important; font-weight:700 !important; text-decoration:none !important; } .noty_bar.s_notify .noty_header > span > a:last-child:hover { color:#216c11 !important; text-decoration:underline !important; } /* --------------------------------------------------------- 5. SLUITKRUIS --------------------------------------------------------- */ .noty_bar.s_notify .noty_close { position:absolute !important; top:50% !important; right:13px !important; transform:translateY(-50%) !important; display:flex !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; margin:0 !important; padding:0 !important; background:#f3f3f3 !important; border:none !important; border-radius:50% !important; color:#555 !important; cursor:pointer !important; box-sizing:border-box !important; transition: background-color .2s ease, color .2s ease !important; } .noty_bar.s_notify .noty_close:hover { background:#eaf5e5 !important; color:#2b8717 !important; } .noty_bar.s_notify .noty_close i { margin:0 !important; padding:0 !important; color:inherit !important; font-size:13px !important; line-height:1 !important; } /* ========================================================= MOBIEL ========================================================= */ @media only screen and (max-width:600px) { .noty_bar.s_notify { width:calc(100vw - 20px) !important; max-width:calc(100vw - 20px) !important; margin:10px !important; border-radius:11px !important; } .noty_bar.s_notify .noty_header { min-height:72px !important; padding: 12px 44px 12px 14px !important; } .noty_bar.s_notify .noty_header::before { flex-basis:30px !important; width:30px !important; height:30px !important; margin-right:10px !important; font-size:16px !important; } .noty_bar.s_notify .noty_header > span { font-size:12px !important; line-height:1.4 !important; } .noty_bar.s_notify .noty_header > span > a:first-child { font-size:13px !important; } .noty_bar.s_notify .noty_close { right:9px !important; width:27px !important; height:27px !important; } } @media only screen and (max-width:600px) { #category #s_listing .s_item .s_price.s_promo_price > .s_old_price { margin-right:5px !important; padding-right:5px !important; } #category #s_listing .s_item .s_price.s_promo_price > .s_old_price + .s_currency { margin-right:45px !important; } } #brand { display: flex; flex-direction: column; } #brand > .content_style { order: 9; } /* ========================================================= BK FIETSONDERDELEN - WINKELWAGEN COMPLETE CSS - DESKTOP + MOBIEL ========================================================= */ /* ========================================================= ALGEMEEN ========================================================= */ body.s_page_checkout_cart #shopping_cart, body.s_page_checkout_cart .cart_page_wrapper, body.s_page_checkout_cart #cart_form, body.s_page_checkout_cart .s_table_1 { box-sizing: border-box !important; } /* Dubbele modelnaam ALTIJD verbergen */ body.s_page_checkout_cart #shopping_cart .cart_product .s_cell_model { display: none !important; visibility: hidden !important; } /* ========================================================= DESKTOP ========================================================= */ @media only screen and (min-width: 1001px) { /* ----------------------------------------------------- HOOFDINDELING ----------------------------------------------------- */ body.s_page_checkout_cart .cart_page_wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px !important; gap: 28px !important; align-items: start !important; width: 100% !important; } body.s_page_checkout_cart #cart_form { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } body.s_page_checkout_cart .s_table_1 { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- PRODUCTKAART ----------------------------------------------------- */ body.s_page_checkout_cart .cart_product { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 22px !important; width: 100% !important; margin: 0 0 16px 0 !important; padding: 18px !important; background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 10px !important; box-sizing: border-box !important; float: none !important; } /* ----------------------------------------------------- AFBEELDING + PRODUCTINFORMATIE ----------------------------------------------------- */ body.s_page_checkout_cart .cart_product > .image_info { display: flex !important; align-items: center !important; gap: 16px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Afbeelding */ body.s_page_checkout_cart .cart_product .s_cell_image { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 100px !important; width: 100px !important; height: 100px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; border-radius: 7px !important; } body.s_page_checkout_cart .cart_product .s_cell_image a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100px !important; height: 100px !important; } body.s_page_checkout_cart .cart_product .s_cell_image img { display: block !important; width: 100px !important; height: 100px !important; max-width: 100px !important; max-height: 100px !important; object-fit: contain !important; margin: 0 !important; } /* ----------------------------------------------------- PRODUCTINFO ----------------------------------------------------- */ body.s_page_checkout_cart .cart_product_info { display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.s_page_checkout_cart .s_cell_name { display: block !important; margin: 0 0 7px 0 !important; padding: 0 !important; } body.s_page_checkout_cart .s_cell_name > a { color: #111 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 21px !important; text-decoration: none !important; } body.s_page_checkout_cart .s_cell_name > a:hover { color: #71b013 !important; } /* Modelnaam weg */ body.s_page_checkout_cart #shopping_cart #cart_form .cart_product .cart_product_info .s_cell_name a > span.s_cell_model { display: none !important; visibility: hidden !important; } /* Prijs */ body.s_page_checkout_cart .s_cell_price { display: block !important; margin: 4px 0 0 0 !important; padding: 0 !important; color: #679916 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 21px !important; } /* Producttotaal */ body.s_page_checkout_cart .s_cell_total { display: block !important; margin: 2px 0 0 0 !important; padding: 0 !important; } body.s_page_checkout_cart .s_cell_total small { color: #888 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 18px !important; } /* ----------------------------------------------------- AANTAL ----------------------------------------------------- */ body.s_page_checkout_cart .cart_product > .s_cell_quantity { display: flex !important; align-items: center !important; gap: 9px !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Min / aantal / plus */ body.s_page_checkout_cart .quantity-wrapper { display: grid !important; grid-template-columns: 34px 42px 34px !important; align-items: center !important; width: auto !important; height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; border: 1px solid #dcdcdc !important; border-radius: 21px !important; box-sizing: border-box !important; } body.s_page_checkout_cart .quantity-wrapper .qty-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #333 !important; font-size: 18px !important; font-weight: 500 !important; cursor: pointer !important; } body.s_page_checkout_cart .quantity-wrapper .qty-btn:hover { background: #f4f7f1 !important; color: #71b013 !important; } body.s_page_checkout_cart .quantity-wrapper input.quantity { display: block !important; width: 42px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; color: #222 !important; font-size: 15px !important; font-weight: 600 !important; text-align: center !important; appearance: textfield !important; -moz-appearance: textfield !important; } body.s_page_checkout_cart .quantity-wrapper input.quantity::-webkit-inner-spin-button, body.s_page_checkout_cart .quantity-wrapper input.quantity::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Refresh */ body.s_page_checkout_cart .quantity-refresh { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; color: #71b013 !important; font-size: 17px !important; cursor: pointer !important; } body.s_page_checkout_cart .quantity-refresh:hover { background: #f3f7ef !important; } /* ----------------------------------------------------- VERWIJDEREN ----------------------------------------------------- */ body.s_page_checkout_cart .cart_remove_icon { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; margin: 0 0 0 6px !important; padding: 0 !important; float: none !important; } body.s_page_checkout_cart .removeFromCart { position: relative !important; display: inline-block !important; padding-left: 22px !important; color: #777 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; } body.s_page_checkout_cart .removeFromCart::before { content: "\f2ed" !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", FontAwesome !important; font-size: 14px !important; font-weight: 400 !important; } body.s_page_checkout_cart .removeFromCart:hover { color: #c40000 !important; } /* ===================================================== BESTELOVERZICHT ===================================================== */ body.s_page_checkout_cart #cart_totals { display: block !important; width: 100% !important; margin: 0 !important; padding: 22px !important; float: none !important; background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 10px !important; box-sizing: border-box !important; } /* Titel */ body.s_page_checkout_cart #cart_totals::before { content: "Besteloverzicht" !important; display: block !important; margin: 0 0 17px 0 !important; padding: 0 0 15px 0 !important; color: #111 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 26px !important; border-bottom: 1px solid #eeeeee !important; } body.s_page_checkout_cart #cart_totals .s_total_wrapper { width: 100% !important; margin: 0 0 18px 0 !important; padding: 0 !important; } /* Regels */ body.s_page_checkout_cart #cart_totals .s_total { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 !important; padding: 8px 0 !important; float: none !important; color: #222 !important; font-size: 14px !important; line-height: 20px !important; box-sizing: border-box !important; } body.s_page_checkout_cart #cart_totals .s_total strong { font-weight: 600 !important; } /* Lege €0,00-regel verbergen */ body.s_page_checkout_cart #cart_totals .s_total:has(> strong:empty) { display: none !important; } /* Eindtotaal */ body.s_page_checkout_cart #cart_totals .s_total.last { margin-top: 7px !important; padding-top: 14px !important; border-top: 1px solid #e5e5e5 !important; color: #679916 !important; font-size: 18px !important; font-weight: 700 !important; } body.s_page_checkout_cart #cart_totals .s_total.last strong { color: #111 !important; font-size: 17px !important; font-weight: 700 !important; } /* ----------------------------------------------------- AFREKENKNOP ----------------------------------------------------- */ body.s_page_checkout_cart #button_continue_to_checkout { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 42px !important; background: #71b013 !important; border: 0 !important; border-radius: 24px !important; color: #fff !important; text-decoration: none !important; box-shadow: 0 4px 10px rgba(113,176,19,0.22) !important; box-sizing: border-box !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; } body.s_page_checkout_cart #button_continue_to_checkout .s_text { margin: 0 !important; padding: 0 !important; background: none !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 48px !important; } body.s_page_checkout_cart #