body { color: #000000; } body.s_layout_fixed { background-color: #ffffff; background-image: none; 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: #000000; } #welcome_message, #welcome_message a, #welcome_message .fa { color: #000000; } #footer_categories h2 a:hover { color: #000000 !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: #000000; } .fa, .cart_menu .s_icon, #menu_home .fa:hover, .categories ul li li a:hover, .site_search .fa-magnifying-glass, .wishlist-icon { color: #000000; } .site_search .fa-magnifying-glass, #search_bar_mobile .fa-magnifying-glass { background-color: #000000; } .buttons input[type=submit].button, .buttons input[type=button].button, .noty_message button.s_main_color_bgr { border: 3px solid #000000; } .s_secondary_color, a:hover, .categories > ul > li > a, .pagination a, #view_mode .s_selected a, #welcome_message a:hover { color: #000000; } #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: #000000; } .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: #000000; } .noty_message button.s_secondary_color_bgr { border: 3px solid #000000; } #intro { background-color: #ffffff; } #intro, #breadcrumbs a { color: #000000; } #intro h1, #intro h1 *, #intro h2, #intro h2 * { color: #000000; } #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: #000000; } *::-moz-selection { color: #fff; background-color: #000000; } *::-webkit-selection { color: #fff; background-color: #000000; } *::selection { color: #fff; background-color: #000000; } .scroll_top{ color: #000000; 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: #000000; --color-secondary: #000000; --color-background: #ffffff; --color-wrapper-bg: #ffffff; --color-header-bg: #ffffff; --color-text: #000000; --color-title: #000000; --color-intro: #ffffff; --color-intro-text: #000000; --color-intro-title: #000000; --color-price: #000000; --color-price-text: #ffffff; --color-promo-price: #f12b63; --color-promo-price-text: #ffffff; } #product_price p.s_price_tax {display:none !important;}
.s_cell_model {display: none; }
#stock_counter {display: none !important; }
.s_module_content.text.full_width {
padding: 0;
}
.smartbar_wrapper .s_wrap {
padding: 0 !important;
width: 100%;
}
.stock_styled option {color: green; }
.stock_styled option[disabled] {color: red; }
/* Algemeen: container instellingen voor productcategorieen */
.listitempage,
.s_listing {
display: flex;
flex-wrap: wrap;
gap: 30px 2%;
}
/* Algemeen: gap voor tablet/mobiel */
@media only screen and (max-width: 768px) {
.listitempage,
.s_listing {
gap: 15px 2%;
}
}
/* Categoriepagina's / Zoeken: 4 op een rij voor grote schermen */
.s_grid_view.size_2 .s_item {
flex: 0 1 23.5%;
}
/* Categoriepagina's / Zoeken: 3 op een rij voor grote schermen */
.s_grid_view.size_1 .s_item {
flex: 0 1 32%;
}
/* Home: 6 op een rij voor grote schermen */
.s_page_common_home .s_grid_view.size_2 .s_item {
flex: 0 1 14.85%;
}
/* Home: 4 op een rij voor grote schermen */
.s_page_common_home .s_grid_view.size_1 .s_item {
flex: 0 1 23.3%;
}
/* Home (met linker- of rechterkolom): 4 op een rij */
.s_2_cols.s_page_common_home .s_grid_view.size_2 .s_item {
flex: 0 1 23.4%;
}
@media only screen and (max-width: 991px) {
/* Algemeen: 3 op een rij voor home op tablet */
.s_page_common_home .s_grid_view.size_2 .s_item {
flex: 0 1 32%;
}
/* Home met linker- of rechterkolom: 2 op tablet */
.s_2_cols.s_page_common_home .s_grid_view.size_2 .s_item {
flex: 0 1 49%;
}
/* Home: 2 op tablet bij keuze voor 4 op home (size_1) */
.s_page_common_home .s_grid_view.size_1 .s_item {
flex: 0 1 49%;
}
}
/* Algemeen: 2 op een rij voor mobiel */
@media only screen and (max-width: 480px) {
.s_grid_view .s_item {
flex: 0 1 49% !important;
}
}
/* CSS hieronder verwijderen */
.s_grid_view .s_item {
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
@media only screen and (max-width: 768px) {
.s_subcategory:nth-child(2n+1), .s_grid_view .s_item:nth-of-type(2n+1) {
clear: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {
.pcategory.s_2_cols .s_grid_view.size_2 .s_item, .pmanufacturer.s_2_cols .s_grid_view.size_2 .s_item {
width: auto !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.s_grid_view.size_2 .s_item {
width: auto;
}
}
/* Product hover helemaal uit */
.s_grid_view .s_item:hover {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
}
.s_actions {
display: none !important; }
#home .s_grid_view.size_2 .s_item {
width: auto !important; }
.s_module_content .clearfix:before,
.s_listing.clearfix:before {
content: none !important;
}
span.clear {display: none !important; }
.s_listing.clearfix:before, .s_listing.clearfix:after, .s_listing .s_wrap:after, .s_listing .s_wrap:before, .s_listing .s_item:before, .s_listing .s_item:after,
#s_listing .clearfix:before, #s_listing .clearfix:after, #s_listing .s_wrap:after, #s_listing .s_wrap:before, #s_listing .s_item:before, #s_listing .s_item:after {
content: none !important;
}
/* Verklein de afbeelding in de productstickers */
.s_label img {
width: 50px;
height: auto;
}
a[title*="UltraGrip"] ~ .voorraad-info {
display: none;
}
.bekijkmeer-button {
background: linear-gradient(90deg, #171717, #b39b10);
color: white !important;
padding: 10px 24px;
text-decoration: none;
font-weight: 600;
font-family: 'Norwester', sans-serif;
border-radius: 8px;
display: inline-block;
transition: background 0.3s ease;
text-transform: uppercase;
}
.bekijkmeer-button:hover {
background: linear-gradient(90deg, #1463a3, #000000);
}
.bekijkmeer-button {
margin: 25px 0;
}
body.product-product-ultragrip .maatmelding {
display: none !important;
}
/* VERBERG carrousel standaard overal */
.s_carousel {
display: none !important;
}
/* VERBERG logo carousel overal */
.swiper.carouselSwiper0 {
display: none !important;
}
/* TOON logo carousel alleen op CLUBS & ACADEMIES */
body.category-101 .swiper.carouselSwiper0 {
display: block !important;
}
.warning_select_other_option {display: none !important; }
/* =========================================================
PRODUCTTITEL — ALTIJD VERBERGEN
========================================================= */
body.s_page_product_product #intro h1 {display: none !important;}
/* ============================================
N1 info-balk
============================================ */
@media (min-width: 769px) {.n1-info-bar { display: none !important; }}
@media (max-width: 768px) {.n1-info-bar { display: block !important; }}
/* ============================================
KLEDINGPRODUCTEN: vervang tekst naar 2–7 werkdagen (alleen mobiel)
============================================ */
@media (max-width: 768px) {
/* Alle kleding-product IDs in één groep */
body.product-14875 .n1-info-bar,
body.product-14876 .n1-info-bar,
body.product-14877 .n1-info-bar,
body.product-14871 .n1-info-bar,
body.product-14874 .n1-info-bar,
body.product-14889 .n1-info-bar,
body.product-14888 .n1-info-bar,
body.product-14873 .n1-info-bar {
position: relative;
color: transparent !important; /* verberg originele (1–2 dagen) tekst */
}
/* Gemeenschappelijke ::after styling */
html[lang] body.product-14875 .n1-info-bar::after,
html[lang] body.product-14876 .n1-info-bar::after,
html[lang] body.product-14877 .n1-info-bar::after,
html[lang] body.product-14871 .n1-info-bar::after,
html[lang] body.product-14874 .n1-info-bar::after,
html[lang] body.product-14889 .n1-info-bar::after,
html[lang] body.product-14888 .n1-info-bar::after,
html[lang] body.product-14873 .n1-info-bar::after {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #4e5f70;
font: 12px/1.2 Aptos, sans-serif;
pointer-events: none; /* laat clicks door */
white-space: nowrap; /* netjes op één regel houden */
}
/* NL (html lang begint met nl) */
html[lang^="nl"] body.product-14875 .n1-info-bar::after,
html[lang^="nl"] body.product-14876 .n1-info-bar::after,
html[lang^="nl"] body.product-14877 .n1-info-bar::after,
html[lang^="nl"] body.product-14871 .n1-info-bar::after,
html[lang^="nl"] body.product-14874 .n1-info-bar::after,
html[lang^="nl"] body.product-14889 .n1-info-bar::after,
html[lang^="nl"] body.product-14888 .n1-info-bar::after,
html[lang^="nl"] body.product-14873 .n1-info-bar::after {
content: "✔️ Levering 2–7 werkdagen ✔️ Achteraf betalen mogelijk";
}
/* EN (html lang begint met en) */
html[lang^="en"] body.product-14875 .n1-info-bar::after,
html[lang^="en"] body.product-14876 .n1-info-bar::after,
html[lang^="en"] body.product-14877 .n1-info-bar::after,
html[lang^="en"] body.product-14871 .n1-info-bar::after,
html[lang^="en"] body.product-14874 .n1-info-bar::after,
html[lang^="en"] body.product-14889 .n1-info-bar::after,
html[lang^="en"] body.product-14888 .n1-info-bar::after,
html[lang^="en"] body.product-14873 .n1-info-bar::after {
content: "✔️ Delivery 2–7 business days ✔️ Buy now, pay later available";
}
/* FR (html lang begint met fr) */
html[lang^="fr"] body.product-14875 .n1-info-bar::after,
html[lang^="fr"] body.product-14876 .n1-info-bar::after,
html[lang^="fr"] body.product-14877 .n1-info-bar::after,
html[lang^="fr"] body.product-14871 .n1-info-bar::after,
html[lang^="fr"] body.product-14874 .n1-info-bar::after,
html[lang^="fr"] body.product-14889 .n1-info-bar::after,
html[lang^="fr"] body.product-14888 .n1-info-bar::after,
html[lang^="fr"] body.product-14873 .n1-info-bar::after {
content: "✔️ Livraison 2–7 jours ouvrés ✔️ Paiement différé possible";
}
}
/* ============================================
ACCESSOIRES (Ultragrip 14853 + Glove Holder 14931)
– verberg maattabel + niet-op-voorraad tekstblok
============================================ */
body.product-14853 .product_widget_top,
body.product-14931 .product_widget_top {
display: none !important;
}
/* Kledingproducten: product-IDs waarvoor levertijd 2–7 moet zijn */
:root {
--n1-usp-fs: 12px;
--n1-usp-color: #4e5f70;
}
/* ⛳ target alleen de eerste regel (span) en laat de rest met rust */
body.product-14875 .n1-usp .n1-usp-line1,
body.product-14876 .n1-usp .n1-usp-line1,
body.product-14877 .n1-usp .n1-usp-line1,
body.product-14871 .n1-usp .n1-usp-line1,
body.product-14874 .n1-usp .n1-usp-line1,
body.product-14889 .n1-usp .n1-usp-line1,
body.product-14888 .n1-usp .n1-usp-line1,
body.product-14873 .n1-usp .n1-usp-line1 {
font-size: 0 !important; /* verberg inhoud van alleen de 1e regel */
position: relative;
display: inline-block;
}
/* Basisstijl voor de vervangende tekst */
html[lang] body.product-14875 .n1-usp .n1-usp-line1::after,
html[lang] body.product-14876 .n1-usp .n1-usp-line1::after,
html[lang] body.product-14877 .n1-usp .n1-usp-line1::after,
html[lang] body.product-14871 .n1-usp .n1-usp-line1::after,
html[lang] body.product-14874 .n1-usp .n1-usp-line1::after,
html[lang] body.product-14889 .n1-usp .n1-usp-line1::after,
html[lang] body.product-14888 .n1-usp .n1-usp-line1::after,
html[lang] body.product-14873 .n1-usp .n1-usp-line1::after {
font-size: var(--n1-usp-fs);
color: var(--n1-usp-color);
line-height: 1.6;
content: ""; /* taal-specifiek hieronder */
}
/* ???????? NL */
html[lang^="nl"] body.product-14875 .n1-usp .n1-usp-line1::after,
html[lang^="nl"] body.product-14876 .n1-usp .n1-usp-line1::after,
html[lang^="nl"] body.product-14877 .n1-usp .n1-usp-line1::after,
html[lang^="nl"] body.product-14871 .n1-usp .n1-usp-line1::after,
html[lang^="nl"] body.product-14874 .n1-usp .n1-usp-line1::after,
html[lang^="nl"] body.product-14889 .n1-usp .n1-usp-line1::after,
html[lang^="nl"] body.product-14888 .n1-usp .n1-usp-line1::after,
html[lang^="nl"] body.product-14873 .n1-usp .n1-usp-line1::after {
content: "✅ Levering binnen 2–7 werkdagen";
}
/* ???????? EN */
html[lang^="en"] body.product-14875 .n1-usp .n1-usp-line1::after,
html[lang^="en"] body.product-14876 .n1-usp .n1-usp-line1::after,
html[lang^="en"] body.product-14877 .n1-usp .n1-usp-line1::after,
html[lang^="en"] body.product-14871 .n1-usp .n1-usp-line1::after,
html[lang^="en"] body.product-14874 .n1-usp .n1-usp-line1::after,
html[lang^="en"] body.product-14889 .n1-usp .n1-usp-line1::after,
html[lang^="en"] body.product-14888 .n1-usp .n1-usp-line1::after,
html[lang^="en"] body.product-14873 .n1-usp .n1-usp-line1::after {
content: "✅ Delivery within 2–7 business days";
}
/* ???????? FR */
html[lang^="fr"] body.product-14875 .n1-usp .n1-usp-line1::after,
html[lang^="fr"] body.product-14876 .n1-usp .n1-usp-line1::after,
html[lang^="fr"] body.product-14877 .n1-usp .n1-usp-line1::after,
html[lang^="fr"] body.product-14871 .n1-usp .n1-usp-line1::after,
html[lang^="fr"] body.product-14874 .n1-usp .n1-usp-line1::after,
html[lang^="fr"] body.product-14889 .n1-usp .n1-usp-line1::after,
html[lang^="fr"] body.product-14888 .n1-usp .n1-usp-line1::after,
html[lang^="fr"] body.product-14873 .n1-usp .n1-usp-line1::after {
content: "✅ Livraison sous 2–7 jours ouvrés";
}
/* Hero-banner optimalisatie */
.banner-home img {
width: 100%;
height: auto;
border-radius: 0;
}
@media (max-width: 768px) {
.banner-home {
margin-top: 0;
}
}
/* =========================================================
aanpassing 19-1 witruime boven bannerfoto mobiel
========================================================= */
/* Mobile spacing fix (logo hack verwijderd) */
@media (max-width: 768px) {
body #content.s_wrap,
body #wrapper .s_wrap {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
/* =========================================================
N1 LANGUAGE PROMOTIEBAK – WITTE TAALBALK COMPACT
========================================================= */
.n1-language-bar{
position:relative !important;
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
background:#ffffff !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.n1-language-bar-inner{
position:relative !important;
width:100% !important;
max-width:100% !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
background:#ffffff !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
}
.n1-language-switch{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
font-family:'Poppins', Arial, sans-serif !important;
line-height:1 !important;
transform:translateY(-1px) !important;
}
.n1-language-switch a{
color:#000000 !important;
text-decoration:none !important;
font-size:11px !important;
font-weight:500 !important;
opacity:.72 !important;
border-bottom:1px solid transparent !important;
padding:0 0 1px 0 !important;
}
.n1-language-switch a.active{
opacity:1 !important;
border-bottom:1px solid #000000 !important;
}
.n1-language-switch span{
color:#000000 !important;
opacity:.28 !important;
font-size:11px !important;
line-height:1 !important;
}
.n1-language-bar-inner::after{
content:"" !important;
position:absolute !important;
left:50% !important;
transform:translateX(-50%) !important;
bottom:0 !important;
width:150px !important;
height:1px !important;
background:rgba(0,0,0,.08) !important;
}
@media (max-width:768px){
.n1-language-bar{
height:28px !important;
min-height:28px !important;
max-height:28px !important;
}
.n1-language-bar-inner{
height:28px !important;
min-height:28px !important;
max-height:28px !important;
}
.n1-language-switch{
gap:6px !important;
}
.n1-language-switch a,
.n1-language-switch span{
font-size:10px !important;
}
.n1-language-bar-inner::after{
width:120px !important;
}
}
/* Desktop verbergen */
@media (min-width: 769px){
.n1-language-bar{
display:none !important;
}
}
/* =========================================================
???? LANGUAGE PROMOTIEBAK — ALLEEN OP HOMEPAGE (SHOPBUILDERS FIX)
========================================================= */
/* standaard: overal uit */
.n1-language-bar {
display: none !important;
}
/* homepage: aan */
body[class*="common-home"] .n1-language-bar {
display: block !important;
}
/* Desktop altijd verbergen (ook op homepage) */
@media (min-width: 769px){
body[class*="common-home"] .n1-language-bar {
display: none !important;
}
}
/* ========================================
FIX: lege ruimte onder zwarte balk
======================================== */
@media (max-width:768px){
#header,#header .s_wrap,#header .s_col_12{
margin:0!important;
padding:0!important;
height:0!important;
min-height:0!important;
line-height:0!important;
overflow:hidden!important;
}
}
/* =========================================================
N1 ROTATOR SMARTBAR – FIX witruimte boven/onder (ALLE TALEN)
Oorzaak: Shopbuilders wrapper .s_wrap.sm_row (vaste hoogte/spacing)
========================================================= */
/* 0) Alleen smartbars (veilig) */
div.smartbar_wrapper[id^="smartbar_"]{
margin:0 !important;
padding:0 !important;
border:0 !important;
display:block !important;
}
/* 1) Container/wrap structuur resetten */
div.smartbar_wrapper[id^="smartbar_"] .container,
div.smartbar_wrapper[id^="smartbar_"] .s_wrap,
div.smartbar_wrapper[id^="smartbar_"] .row,
div.smartbar_wrapper[id^="smartbar_"] [class*="col-"]{
margin:0 !important;
padding:0 !important;
border:0 !important;
height:auto !important;
min-height:0 !important;
}
/* 2) BOOSDOENER: .s_wrap.sm_row (in jouw inspectie 430.4 x 46) */
div.smartbar_wrapper[id^="smartbar_"] .s_wrap.sm_row{
margin:0 !important;
padding:0 !important;
border:0 !important;
height:auto !important;
min-height:0 !important;
line-height:0 !important; /* haalt “baseline” ruimte weg */
font-size:0 !important; /* idem */
}
/* 3) Vaak zit je HTML in .col-xs-12; ook die kan baseline/ruimte maken */
div.smartbar_wrapper[id^="smartbar_"] .s_wrap.sm_row > .col-xs-12{
margin:0 !important;
padding:0 !important;
border:0 !important;
line-height:0 !important;
font-size:0 !important;
}
/* 4) Jouw balk zelf: tekst weer normaal aanzetten */
div.smartbar_wrapper[id^="smartbar_"] .n1-rotator-bar{
margin:0 !important;
padding:0 !important;
border:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
font-size:14px !important; /* tekst weer zichtbaar */
line-height:1.2 !important;
}
/* 5) HTML-wijzigingen maken soms /
aan → die geven weer ruimte */
div.smartbar_wrapper[id^="smartbar_"] p{
margin:0 !important;
padding:0 !important;
}
div.smartbar_wrapper[id^="smartbar_"] br{
display:none !important;
}
/* 6) Element direct na smartbar (vaak header/slider) – top gap weg */
div.smartbar_wrapper[id^="smartbar_"] + *{
margin-top:0 !important;
padding-top:0 !important;
}
/* 7) FIX: smartbar kan shrink-to-fit door float/inline-block → forceer full width */
div.smartbar_wrapper[id^="smartbar_"],
div.smartbar_wrapper[id^="smartbar_"] .smartbar,
div.smartbar_wrapper[id^="smartbar_"] .tb-customizer-welcome-content,
div.smartbar_wrapper[id^="smartbar_"] .s_wrap,
div.smartbar_wrapper[id^="smartbar_"] .row,
div.smartbar_wrapper[id^="smartbar_"] [class*="col-"]{
float: none !important;
display: block !important;
width: 100% !important;
}
/* =========================================================
⚡ N1 – Mobiele bannerbuttons (Nike look + glasachtig effect)
========================================================= */
.banner-btn {
background: rgba(255, 255, 255, 0.92) !important;
color: #171717 !important;
font-family: 'Poppins', sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase;
border-radius: 12px !important;
padding: 10px 28px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
letter-spacing: 0.5px !important;
font-size: 14px !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
display: inline-block !important;
backdrop-filter: blur(4px);
transform: translateY(10px);
}
.banner-btn:hover {
background: #ffffff !important;
color: #000 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
transform: translateY(-2px);
}
/* Tweede knop subtiel grijzer */
.banner-btn.second-btn {
background: rgba(245, 245, 245, 0.92) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
/* Tap / active effect */
.banner-btn:active {
transform: scale(0.97);
transition: transform 0.1s ease-out;
}
/* ✨ Fade-in animatie */
@keyframes fadeInMobileButtons {
0% {
opacity: 0;
transform: translate(-50%, 25px);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* --- Header zichtbaar houden --- */
header,
.header-wrapper,
#header,
.s_header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
position: relative !important;
z-index: 999 !important;
}
/* --- Verberg alleen intro op mobiel homepage --- */
@media (max-width: 768px) {
body.s_page_home #intro {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* =========================================================
✅ N1 2025 – Professionele lichtgrijze knoppen
========================================================= */
.s_button_1 {
background: linear-gradient(180deg, #f8f8f8 0%, #ededed 100%) !important;
color: #000000 !important; /* zwarte tekst */
font-family: 'Poppins', sans-serif !important;
font-weight: bold !important;
border-radius: 6px !important;
border: 1px solid #dcdcdc !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; /* subtiele schaduw */
transition: all 0.3s ease !important;
}
/* Hover: iets donkerder grijs + iets sterkere schaduw */
.s_button_1:hover {
background: linear-gradient(180deg, #e6e6e6 0%, #d9d9d9 100%) !important;
color: #000000 !important;
border-color: #cfcfcf !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}
/* Tekst altijd zwart, ook bij varianten */
.s_button_1 .s_text,
.s_button_1.s_ddd_bgr .s_text {
color: #000000 !important;
}
/* Winkelmand-icoon ook zwart */
.s_button_1 i,
.s_button_1 svg {
color: #000000 !important;
fill: #000000 !important;
}
/* Andere knoppen (Bekijk meer, Custom) dezelfde stijl */
.custom-button,
.bekijkmeer-button,
.custom-green-button {
background: linear-gradient(180deg, #f8f8f8 0%, #ededed 100%) !important;
color: #000000 !important;
font-family: 'Poppins', sans-serif !important;
font-weight: 600 !important;
border-radius: 6px !important;
border: 1px solid #dcdcdc !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
text-transform: uppercase;
padding: 0 20px !important;
line-height: 28px !important;
transition: all 0.3s ease !important;
}
.custom-button:hover,
.bekijkmeer-button:hover,
.custom-green-button:hover {
background: linear-gradient(180deg, #e6e6e6 0%, #d9d9d9 100%) !important;
color: #000000 !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}
/* Forceer zwart winkelmandje zonder fontaanpassing */
button.s_button_1 .s_text .fa-shopping-basket,
a.s_button_1 .s_text .fa-shopping-basket,
.s_button_1 .s_text .fa.fa-shopping-basket {
color: #000000 !important;
opacity: 1 !important;
filter: none !important;
}
/* Zorg dat tekst niet dikker wordt, alleen kleur */
button.s_button_1 .s_text,
a.s_button_1 .s_text,
.s_button_1 .s_text {
color: #000000 !important;
font-weight: normal !important;
font-family: inherit !important;
}
#button-confirm {color: #fff !important;}
/* Hover: subtiel donkerder */
button.s_button_1:hover .fa-shopping-basket,
a.s_button_1:hover .fa-shopping-basket,
.s_button_1:hover .fa-shopping-basket {
color: #111111 !important;
}
/* Extra fix voor thema-laag (.s_main_color_bgr) die wit forceert */
a#add_to_cart.s_button_1.s_main_color_bgr .fa-shopping-basket,
a#add_to_cart.s_button_1.s_main_color_bgr .s_text {
color: #000000 !important;
fill: #000000 !important;
}
/* =========================================================
⚡ N1 2025 — SIRIUS 2.0 (mobiel + desktop) — CLEAN FINAL
========================================================= */
/* ---------- MOBIEL ---------- */
.n1-sirius-mobile {
display: block;
width: 100%;
background: #fff;
text-align: center;
overflow: hidden;
margin-bottom: 20px; /* ✅ was 40px → nu correcte spacing onder button */
}
.n1-sirius-mobile .n1-video-wrapper {
position: relative;
width: 100%;
padding-top: 75%; /* verhouding voor mobiel (meer vierkant scherm) */
overflow: hidden;
background: #000;
}
.n1-sirius-mobile .n1-video-wrapper iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border: 0;
object-fit: cover;
}
.n1-sirius-mobile .n1-premium-text {
font-family: 'Poppins', sans-serif;
color: #000;
background: #fff;
padding: 26px 18px 10px; /* onderkant verminderd van 16px naar 10px */
text-align: center;
}
.n1-sirius-mobile .n1-premium-text h2 {
font-weight: 800;
text-transform: uppercase;
letter-spacing: .8px;
margin: 0 0 12px;
font-size: 22px;
}
.n1-sirius-mobile .n1-premium-text p {
color: #171717;
line-height: 1.6;
font-size: 14px;
margin: 0 0 16px;
}
.n1-sirius-mobile .banner-btn {
display: inline-block;
background: #fff;
color: #171717;
font-weight: 600;
border-radius: 10px;
padding: 10px 28px;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 2px 6px rgba(0,0,0,.12);
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
transition: .3s;
margin-bottom: 6px; /* ✅ voorkomt te veel witruimte onder de knop */
}
.n1-sirius-mobile .banner-btn:hover {
background: #f3f3f3;
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
/* ---------- DESKTOP ---------- */
@media (min-width:769px){
/* Verberg mobiel, toon desktop */
.n1-sirius-mobile {
display: none !important;
}
.n1-sirius-desktop {
display: block !important;
position: relative;
width: 100%;
background: #000;
margin: 40px auto 24px;
overflow: hidden;
text-align: left;
}
/* ✅ Video verhouding */
.n1-sirius-desktop .n1-video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
background: #000;
}
.n1-sirius-desktop .n1-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
/* ✅ Tekst OP video */
.n1-sirius-desktop .n1-premium-text {
position: absolute;
top: 29%;
left: 6%;
z-index: 2;
width: 38%;
max-width: 560px;
margin: 0;
padding: 0;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: left;
animation: s_fadeUp 1s ease both;
}
/* Titel */
.n1-sirius-desktop .n1-premium-text h2 {
font-size: 38px;
font-weight: 900;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.05;
color: #ffffff !important;
text-shadow:
0 10px 28px rgba(0,0,0,0.55),
0 2px 4px rgba(0,0,0,0.45);
}
/* Tekst */
.n1-sirius-desktop .n1-premium-text p {
font-size: 13px;
line-height: 1.7;
letter-spacing: 1.1px;
text-transform: uppercase;
margin: 0 0 20px;
color: rgba(255,255,255,0.92);
max-width: 460px;
}
/* Button */
.n1-sirius-desktop .banner-btn {
display: inline-block;
padding: 11px 30px;
font-size: 12px;
letter-spacing: .7px;
background: #fff;
color: #171717;
font-weight: 700;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 2px 6px rgba(0,0,0,.12);
text-decoration: none;
text-transform: uppercase;
transition: .25s ease;
}
.n1-sirius-desktop .banner-btn:hover {
background: #f3f3f3;
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
/* ✅ Laptop */
@media (max-width: 1200px){
.n1-sirius-desktop .n1-premium-text{
top: 27%;
width: 44%;
}
.n1-sirius-desktop .n1-premium-text h2{
font-size: 34px;
}
.n1-sirius-desktop .n1-premium-text p{
font-size: 12px;
}
}
/* ✅ Grote schermen */
@media (min-width: 1600px){
.n1-sirius-desktop .n1-premium-text{
top: 30%;
width: 34%;
max-width: 620px;
}
.n1-sirius-desktop .n1-premium-text h2{
font-size: 42px;
}
}
@keyframes s_fadeUp {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
/* ✅ Verberg desktopversie volledig op mobiel */
@media (max-width: 768px) {
.n1-sirius-desktop {
display: none !important;
}
}
/* ✅ Fine tune mobiel */
.n1-sirius-mobile {
margin-bottom: 8px;
}
/* =========================================================
???? HARD RESET voor knoppenstijl (verwijdert ALLE shadows)
========================================================= */
html body .n1-scorpius-visual .banner-btn,
html body .n1-scorpius-visual .banner-btn:hover,
html body .n1-scorpius-visual .banner-btn:focus {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
background-image: none !important;
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
color: #171717 !important;
}
@media (max-width:768px){
.tb-customizer-slot[data-customizer-slot-index="8"]{
display:none !important;
}
}
/* =========================================================
⚡️ N1 2025 — NIEUW BINNEN: ZEUS 2.0 COLLECTIE (Perfecte spacing)
========================================================= */
.n1-newin-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: #fff;
padding: 24px 16px 30px 16px; /* ✅ iets meer onderruimte (was 28px) */
text-align: center;
box-sizing: border-box;
}
/* =========================================================
????️ Titel & subtitel
========================================================= */
.n1-newin-section .n1-section-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 18px;
color: #000;
position: relative;
}
.n1-newin-section .n1-section-title::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #000 0%, #c9a44f 100%);
margin: 10px auto 0;
border-radius: 2px;
}
.n1-newin-section .n1-section-subtitle {
font-family: 'Poppins', sans-serif;
font-size: 15px;
color: #666;
margin: -6px 0 24px 0;
letter-spacing: 0.3px;
}
@media (max-width: 768px) {
.n1-newin-section .n1-section-subtitle {
font-size: 13px;
margin-bottom: 18px;
}
}
/* =========================================================
???? Productgrid
========================================================= */
.n1-newin-section .n1-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
justify-content: center;
align-items: stretch;
}
/* =========================================================
???? Productkaarten
========================================================= */
.n1-newin-section .n1-product {
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.n1-newin-section .n1-product:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
/* =========================================================
????️ Afbeeldingen
========================================================= */
.n1-newin-section .n1-product a {
display: block;
line-height: 0;
}
.n1-newin-section .n1-product img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
background: #fff;
transition: transform 0.3s ease;
}
.n1-newin-section .n1-product:hover img {
transform: scale(1.03);
}
/* =========================================================
???? Producttekst
========================================================= */
.n1-newin-section .n1-product-name {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: #000;
margin: 10px 0 4px 0;
}
.n1-newin-section .n1-product-price {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 700;
color: #000;
margin-bottom: 10px;
}
/* =========================================================
⚡️ ZEUS 2.0 Button — Sirius-stijl
========================================================= */
.n1-newin-section .n1-btn-wrapper {
margin-top: 22px; /* ✅ iets minder ruimte boven (was 30px) */
margin-bottom: 10px; /* ✅ iets meer ruimte onder (was 0px) */
text-align: center;
}
.n1-newin-section .n1-btn-wrapper .banner-btn,
.n1-newin-section .n1-section-btn {
display: inline-block;
background: #fff;
color: #171717;
font-weight: 600;
border-radius: 10px;
padding: 12px 32px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
transition: all 0.3s ease;
}
/* Hover-effect */
.n1-newin-section .n1-btn-wrapper .banner-btn:hover,
.n1-newin-section .n1-section-btn:hover {
background: #f3f3f3;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
/* =========================================================
???? Responsive grid-aanpassing
========================================================= */
@media (max-width: 768px) {
.n1-newin-section {
padding: 16px 12px 26px 12px; /* ✅ iets meer onderruimte (was 24px) */
}
.n1-newin-section .n1-product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.n1-newin-section .n1-product-name {
font-size: 12px;
}
.n1-newin-section .n1-product-price {
font-size: 13px;
}
}
/* =========================================================
???? Tablet grid-aanpassing
========================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
.n1-newin-section .n1-product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================
???? Cleanup — geen dubbele witruimte onder sectie
========================================================= */
.n1-newin-section + .lazy-load-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
.n1-newin-section .n1-fix {
display: none !important;
}
/* =========================================================
N1 — HOMEPAGE NEW + LIMITED EDITION BADGES
========================================================= */
.n1-newin-section .n1-product {
position: relative;
}
/* =========================================================
Badge base
========================================================= */
.n1-newin-section .n1-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
line-height: 1;
padding: 6px 12px;
border-radius: 999px;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* =========================================================
NEW badge
========================================================= */
.n1-newin-section .n1-badge--new {
color: #ffffff;
background: rgba(17,17,17,0.92);
border: 1px solid rgba(255,255,255,0.15);
}
/* =========================================================
LIMITED EDITION badge
========================================================= */
.n1-newin-section .n1-badge--limited {
color: #ffffff;
background: rgba(17,17,17,0.92);
border: 1px solid rgba(255,255,255,0.15);
}
/* =========================================================
Mobiel
========================================================= */
@media (max-width: 768px) {
.n1-newin-section .n1-badge {
top: 8px;
left: 8px;
padding: 4px 8px;
font-size: 9px;
}
}
/* =========================================================
⚡️ N1 2025 — Populaire Modellen (Nike-style)
========================================================= */
.n1-popular-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: #fff;
padding: 24px 16px 0px 16px;
text-align: center;
box-sizing: border-box;
}
/* Titel */
.n1-popular-section .n1-section-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 18px;
color: #000;
position: relative;
}
.n1-popular-section .n1-section-title::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #000 0%, #c9a44f 100%);
margin: 10px auto 0 auto;
border-radius: 2px;
}
/* Grid */
.n1-popular-section .n1-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
justify-content: center;
align-items: stretch;
}
/* Productkaarten */
.n1-popular-section .n1-product {
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none !important;
color: inherit !important;
}
.n1-popular-section .n1-product:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
/* Afbeeldingen */
.n1-popular-section .n1-product img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
background: #fff;
border: none;
transition: transform 0.3s ease;
}
.n1-popular-section .n1-product:hover img {
transform: scale(1.03);
}
/* Tekst */
.n1-popular-section .n1-product-name {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: #000;
margin: 10px 0 4px 0;
}
.n1-popular-section .n1-product-price {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 700;
color: #000;
margin-bottom: 10px;
}
/* Responsive */
@media (max-width: 768px) {
.n1-popular-section {
padding: 16px 12px 30px 12px;
}
.n1-popular-section .n1-product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.n1-popular-section .n1-product-name {
font-size: 12px;
}
.n1-popular-section .n1-product-price {
font-size: 13px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.n1-popular-section .n1-product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Verwijder de extra witruimte door de lege n1-fix spacer */
.n1-fix{
display: none !important;
}
/* =========================================================
N1 — Minder witruimte onder bestseller button
========================================================= */
.n1-popular-section {
padding-bottom: 24px !important;
}
.n1-popular-section .n1-btn-wrapper {
margin-bottom: 16px !important;
padding-bottom: 0 !important;
}
@media (max-width: 768px) {
.n1-popular-section {
padding-bottom: 20px !important;
}
.n1-popular-section .n1-btn-wrapper {
margin-bottom: 10px !important;
padding-bottom: 0 !important;
}
}
/* =========================================================
???? N1 – AFSLUITBLOK ZWART ‘BE THE NUMBER ONE’
========================================================= */
.n1-brand-end {
background: linear-gradient(180deg, #111 0%, #000 100%);
color: #fff;
text-align: center;
padding: 100px 20px 80px; /* desktop */
position: relative;
overflow: hidden;
}
.n1-brand-inner {
max-width: 800px;
margin: 0 auto;
}
/* Titel */
.n1-brand-end h2 {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 34px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
margin-bottom: 16px;
}
/* Subtekst */
.n1-brand-end p {
font-family: 'Poppins', sans-serif;
font-size: 18px;
line-height: 1.6;
color: #ccc; /* subtiel grijs, in lijn met footer */
margin-bottom: 32px;
}
/* Knop */
.n1-brand-end .banner-btn {
background: #fff;
color: #000;
padding: 14px 36px;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.n1-brand-end .banner-btn:hover {
background: #b39b10; /* goudaccent bij hover */
color: #fff;
}
/* ==========================================
???? Mobiele optimalisatie
========================================== */
@media (max-width: 767px) {
.n1-brand-end {
padding: 60px 20px 50px; /* compacter: minder hoogte */
}
.n1-brand-end h2 {
font-size: 26px;
margin-bottom: 10px;
}
.n1-brand-end p {
font-size: 15px;
margin-bottom: 24px;
}
.n1-brand-end .banner-btn {
padding: 12px 28px;
font-size: 14px;
}
}
/* =========================================================
⚡ N1 — CATEGORIE-INFOSTRIP (zwarte premium variant – compact)
========================================================= */
.n1-cat-info {
background: linear-gradient(180deg, #111 0%, #000 100%);
color: #fff;
text-align: center;
padding: 45px 18px 32px;
font-family: 'Poppins', sans-serif;
position: relative;
z-index: 1; /* voorkomt overlap met filter */
overflow: visible; /* laat inhoud natuurlijk doorlopen */
border-bottom: 1px solid #111;
margin-bottom: 30px; /* ruimte naar filter/sorteren */
}
.n1-cat-info .n1-cat-inner {
max-width: 800px;
margin: 0 auto;
}
/* Titel */
.n1-cat-info h2 {
font-weight: 800;
font-size: 26px; /* iets kleiner */
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
color: #fff;
}
/* Subtekst */
.n1-cat-info p {
font-size: 15px; /* kleiner */
line-height: 1.5; /* dichter op elkaar */
color: #ccc;
margin: 0;
}
/* Mobiel optimalisatie */
@media (max-width: 768px) {
.n1-cat-info {
padding: 30px 14px 24px; /* flink compacter mobiel */
}
.n1-cat-info h2 {
font-size: 20px;
margin-bottom: 6px;
}
.n1-cat-info p {
font-size: 13px;
line-height: 1.45;
}
}
/* =========================================================
⚡ Toon enkel juiste tekst per categorie
========================================================= */
/* Alles standaard verbergen */
.n1-cat-info .n1-cat-inner > div {
display: none;
}
/* ZEUS 2.0 — subcategorie 86 */
body[class*="category-86"] .n1-cat-info .text-zeus { display: block; }
/* SIRIUS 2.0 — subcategorie 98 */
body[class*="category-98"] .n1-cat-info .text-sirius { display: block; }
/* ARES 2.0 — subcategorie 77 */
body[class*="category-77"] .n1-cat-info .text-ares { display: block; }
/* HORUS 2.0 — subcategorie 82 */
body[class*="category-82"] .n1-cat-info .text-horus { display: block; }
/* SCORPIUS 2.0 — subcategorie 83 */
body[class*="category-83"] .n1-cat-info .text-scorpius { display: block; }
/* GEA — subcategorie 100 */
body[class*="category-100"] .n1-cat-info .text-gea { display: block; }
/* KIDS — hoofdcategorie 85 */
body[class*="category-85"] .n1-cat-info .text-kids { display: block; }
/* ULTRA GRIP — hoofdcategorie 89 */
body[class*="category-89"] .n1-cat-info .text-ultra { display: block; }
/* KEEPERSKLEDING — hoofdcategorie 93 */
body[class*="category-93"] .n1-cat-info .text-kleding { display: block; }
/* =========================================================
⚡ Responsive tekstlengte voor categorie-infoblok
========================================================= */
/* Standaard: lange tekst tonen, korte verbergen */
.n1-cat-info p.short {
display: none;
}
.n1-cat-info p.long {
display: block;
}
/* Op mobiel: korte tekst tonen, lange verbergen */
@media (max-width: 768px) {
.n1-cat-info p.short {
display: block;
}
.n1-cat-info p.long {
display: none;
}
}
/* =========================================================
⚡ N1 – Mobiel: full-width maar met nette zijmarges
========================================================= */
/* --- FIX SCROLL JUMPS CAT-INFO MOBIEL --- */
@media (max-width: 991px) {
.n1-cat-info {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
box-sizing: border-box !important;
}
.n1-cat-info h2 {
font-size: 20px;
margin-bottom: 8px;
}
.n1-cat-info p {
font-size: 13.5px;
line-height: 1.45;
padding: 0 6px; /* lucht aan tekst zelf */
}
}
/* =========================================================
⚡ Overige visuele correcties
========================================================= */
/* Dubbele
-titel bovenaan verbergen */
body[class*="category-"] h1 {
display: none !important;
}
/* =========================================================
⚡ N1 – Verberg 'Sorteren op / Blokken / Vergelijken' balk
========================================================= */
#listing_options {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
✔ Permanente prijs-typografie fix voor alle homepage-secties
✔ Matcht Shopbuilders (Russo One + spacing + normal weight)
========================================================= */
/* KIDS */
.n1-kids-section .n1-product-price,
.n1-kids-section .n1-product-price::before,
.n1-kids-section .n1-product-price::after {
font-family: 'Russo One', sans-serif !important;
letter-spacing: 1px !important;
font-weight: 400 !important;
}
/* NIEUW BINNEN */
.n1-newin-section .n1-product-price,
.n1-newin-section .n1-product-price::before,
.n1-newin-section .n1-product-price::after {
font-family: 'Russo One', sans-serif !important;
letter-spacing: 1px !important;
font-weight: 400 !important;
}
/* POPULAIRE MODELLEN */
.n1-popular-section .n1-product-price,
.n1-popular-section .n1-product-price::before,
.n1-popular-section .n1-product-price::after {
font-family: 'Russo One', sans-serif !important;
letter-spacing: 1px !important;
font-weight: 400 !important;
}
/* ==========================================================================
FULL-WIDTH DESKTOP BANNER FIX
========================================================================== */
body.category-101 .n1-banner-desktop {
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
overflow: hidden !important;
}
body.category-101 .n1-banner-desktop img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
}
/* =========================================================
FIX: lege lazy-load module (met .n1-cat-banner) volledig verwijderen
(anders blijft flex-gap ruimte geven)
========================================================= */
/* Moderne browsers (Chrome/Samsung Internet): parent selector */
@media (max-width: 768px) {
body:not(.category-101) #category > .lazy-load-section:has(.n1-cat-banner) {
display: none !important;
}
}
/* Extra (mag ook desktop meenemen, safe) */
body:not(.category-101) #category > .lazy-load-section:has(.n1-cat-banner) {
display: none !important;
}
/* =========================================================
N1 RETOURPAGINA – BREEDTE FIX + BUTTONSTYLE + H1 VERBORGEN
========================================================= */
/* Verberg de standaard titel op informatiepagina's */
body[class*="information-"] #content > h1,
body[class*="information-"] h1 {
display: none !important;
}
/* 2. Maak de hele informatiepagina full-width */
body.information-6 #page.s_info_page {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 3. Forceer ook #content breed */
body.information-6 #content.s_wrap {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 4. Premium N1 button style (2025) */
.n1-btn {
display:inline-block;
background: linear-gradient(180deg, #f7f7f7 0%, #e3e3e3 100%);
padding:12px 26px;
border-radius:10px;
font-family:'Poppins', sans-serif;
font-weight:700;
text-transform:uppercase;
border:1px solid #d0d0d0;
color:#000 !important;
text-decoration:none;
font-size:13px;
letter-spacing:.5px;
box-shadow:0 3px 8px rgba(0,0,0,0.10);
transition:0.25s ease;
}
.n1-btn:hover {
background:#fff;
box-shadow:0 5px 14px rgba(0,0,0,0.15);
}
/* 5. Extra comfort op mobiel (mooie padding) */
@media (max-width: 600px) {
body.information-6 section {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* =============================================
verkort breadcrumbs
============================================= */
#breadcrumbs {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Verwijder de vaste hoogte van het hele intro-blok */
#intro_wrap {
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Soms zit de ruimte in s_wrap binnen intro */
#intro .s_wrap {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* En als de H1 erboven ook lucht geeft */
#intro h1 {
margin: 0 !important;
padding: 0 !important;
}
/* =============================================
witruimte rondom logo mobiel verkleinen
============================================= */
/* (hier stond nog geen code, dit laat ik exact zo) */
/* =============================================
witruimte onder filter mobiel verkleinen
============================================= */
/* Verwijder witruimte onder het filterblok */
#left_col .box.filter_module,
.filter-toggle-wrapper {
margin-bottom: 6px !important;
}
/* Verberg standaard */
#n1-global-hero-allemodellen {
display: none;
}
/* =========================================================
ALLE pagina's mobiel volledige breedte
(UITGEZONDERD productpagina's)
========================================================= */
@media (max-width: 768px) {
/* ???? Niet toepassen op productpagina's:
body heeft o.a.: pproduct, class-product-product, s_page_product_product */
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #wrapper,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #content.s_wrap,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) .s_wrap,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #page,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) .main,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) .content,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) .container,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) .s_content_outer {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Kleine zijmarge voor mooie look (niet op productpagina's) */
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) .s_wrap > *:not(.fullwidth),
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #content.s_wrap > *:not(.fullwidth),
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) .content > *:not(.fullwidth) {
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box;
}
/* Breedte fix voor titels / banners (ook niet op productpagina's) */
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #intro_wrap,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #intro .s_wrap,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #intro,
body:not(.pproduct):not(.class-product-product):not(.s_page_product_product) #breadcrumbs {
width: 100% !important;
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
margin: 0 !important;
box-sizing: border-box;
}
}
/* =========================================================
FOOTER UITSLUITEN VAN BREEDTE FIX (altijd normale layout)
========================================================= */
@media (max-width: 768px) {
/* Footer wrapper nooit breder maken */
#footer_inner.s_wrap,
#footer_nav.s_row,
#footer_copyright_wrapper {
width: auto !important;
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}
/* Footer kolommen terug naar originele styling */
#footer_inner .s_col_3 {
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box;
}
}
/* ==========================================================================
N1 — PAGINA SWIPER BOVENIN VOOR KEUZE
(HOOFDCATEGORIE + ALLE MODELLEN) — PREMIUM LIGHT
========================================================================== */
/* Hide on desktop */
.n1-models-header {
display: none;
}
/* Show on mobile */
@media (max-width: 768px) {
.n1-models-header {
display: block;
}
}
/* Header wrapper */
.n1-models-header{
width: 100%;
text-align: center;
margin: 12px 0 18px;
padding: 0 12px;
box-sizing: border-box;
position: relative;
z-index: 2;
}
/* Title */
.n1-models-header .n1-models-title{
font-family: Poppins, sans-serif;
font-weight: 700; /* iets lichter = premium */
font-size: 22px;
letter-spacing: 0.6px;
color: #000;
margin: 18px 0 6px;
text-transform: uppercase;
}
/* Gold line */
.n1-models-header .n1-models-line{
width: 56px;
height: 3px;
margin: 0 auto 12px;
background: linear-gradient(90deg, #111 0%, #A88A3D 100%);
border-radius: 3px;
}
/* Scroll wrapper */
.n1-models-header .n1-topnav-wrapper{
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 6px 0 10px;
margin: 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.n1-models-header .n1-topnav-wrapper::-webkit-scrollbar{
display: none;
}
/* Tabs row */
.n1-models-header .n1-topnav{
display: flex;
gap: 16px !important;
padding: 0 6px;
white-space: nowrap;
align-items: flex-end;
justify-content: flex-start !important;
}
/* Tab link */
.n1-models-header .n1-tab{
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 2px;
background: transparent;
border: 0;
border-radius: 0;
font-family: Poppins, sans-serif;
font-size: 13px;
font-weight: 600; /* ???? HIER zit de aanpassing */
letter-spacing: 0.25px;
color: #111 !important;
text-decoration: none !important;
opacity: 0.65; /* rustiger */
transition: opacity 0.18s ease;
margin: 0 !important;
flex: 0 0 auto;
}
.n1-models-header .n1-tab:hover{
opacity: 0.9;
}
/* Active tab */
.n1-models-header .n1-tab[aria-current="page"],
.n1-models-header .n1-tab.is-active{
opacity: 1;
}
/* Gold underline active */
.n1-models-header .n1-tab[aria-current="page"]::after,
.n1-models-header .n1-tab.is-active::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background: #A88A3D;
border-radius: 2px;
}
/* Small screens */
@media (max-width: 480px){
.n1-models-header{
margin: 10px 0 16px;
padding: 0 10px;
}
.n1-models-header .n1-models-title{
font-size: 20px;
}
.n1-models-header .n1-tab{
font-size: 13px;
padding: 10px 2px;
}
}
/* ==========================================================================
Tekst onder tabs pagina ALLE MODELLEN (meer dan 500.000 keepers vertrouwen wereldwijd op N1 etc)
========================================================================== */
.n1-trustline{
margin: 10px 12px 18px !important;
padding: 8px 0 0 !important;
text-align: center !important;
box-sizing: border-box !important;
}
.n1-trustline .n1-trustline-main{
display: block !important;
font-family: Poppins, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #111 !important;
line-height: 1.25 !important;
margin: 0 0 4px !important;
}
.n1-trustline .n1-trustline-sub{
display: block !important;
font-family: Poppins, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
color: rgba(0,0,0,0.55) !important;
line-height: 1.25 !important;
margin: 0 !important;
}
/* ==========================================================
N1 — Categorie Intro trkst Scorpius, Zeus etc. (zelfde stijl als homepage)
(SPACING FIX: minder witruimte tussen filter en intro)
========================================================== */
.n1-catintro {
width: 100%;
max-width: 900px;
margin: 0 auto 18px; /* was 26px */
padding: 12px 16px 8px; /* was 20px 16px 10px */
text-align: center;
box-sizing: border-box;
}
.n1-catintro-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: 0.6px;
text-transform: uppercase;
margin-bottom: 10px;
color: #000;
}
.n1-catintro-line {
width: 60px;
height: 3px;
margin: 0 auto 14px;
background: linear-gradient(90deg, #000 0%, #c9a44f 100%);
border-radius: 3px;
}
.n1-catintro-sub {
font-family: 'Poppins', sans-serif;
font-size: 15px;
line-height: 1.55;
color: #666;
letter-spacing: 0.2px;
margin-bottom: 4px;
}
/* Extra compact op mobiel */
@media (max-width: 768px){
.n1-catintro{
margin: 0 auto 14px !important;
padding: 6px 14px 6px !important;
}
}
@media (max-width: 480px) {
.n1-catintro-title {
font-size: 20px;
}
.n1-catintro-sub {
font-size: 14px;
}
}
/* =========================================================
N1 — CATEGORIEPAGINA catintro MOBIEL: witruimte boven intro fix
========================================================= */
@media (max-width: 768px){
#category .tb-customizer-position[data-customizer-position="content_top"]{
display: none !important;
}
}
/* =========================================================
N1 – PRODUCT MINI-BANNER (GRIP15 – JANUARI CAMPAGNE)
========================================================= */
.n1-product-discount {
display: inline-block;
background: rgba(255, 255, 255, 0.92);
color: #111;
padding: 6px 15px;
margin: 10px auto 16px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500; /* iets rustiger dan 600 */
text-transform: uppercase;
letter-spacing: 0.4px;
border-radius: 9px; /* net iets strakker */
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
white-space: nowrap; /* blijft altijd 1 regel */
}
/* Code accent – visueel hoofdrol */
.n1-inline-code {
font-family: 'Russo One', sans-serif;
margin-left: 4px;
letter-spacing: 1px;
}
/* Mobiel */
@media (max-width: 768px) {
.n1-product-discount {
padding: 5px 13px;
font-size: 12.5px;
margin: 8px auto 14px;
border-radius: 8px;
}
}
/* =========================================================
MINI-BANNER VERBERGEN OP KLEDING EN ACCESSOIRES
========================================================= */
body[data-customizer-product-id="14876"] .n1-product-discount,
body[data-customizer-product-id="14875"] .n1-product-discount,
body[data-customizer-product-id="14871"] .n1-product-discount,
body[data-customizer-product-id="14874"] .n1-product-discount,
body[data-customizer-product-id="14889"] .n1-product-discount,
body[data-customizer-product-id="14888"] .n1-product-discount,
body[data-customizer-product-id="14931"] .n1-product-discount,
body[data-customizer-product-id="14934"] .n1-product-discount,
body[data-customizer-product-id="14933"] .n1-product-discount,
body[data-customizer-product-id="14853"] .n1-product-discount {
display: none !important;
}
/* ============================================================
N1 SUBMENU — CLEAN SALE VERSION
============================================================ */
/* ============================================================
1) MOBIEL MENU
============================================================ */
@media (max-width: 991px) {
#hoofdmneu,
#hoofdmneu .s_menu_group,
.s_submenu {
background: #ffffff !important;
}
/* Hoofditems */
.s_submenu li a {
display: block;
color: #111111 !important;
font-weight: 400 !important;
font-size: 16px;
line-height: 1.2;
padding: 6px 0 2px !important;
text-transform: none !important;
}
/* Subtitels */
.s_submenu li a::after {
display: block;
margin-top: 2px !important;
margin-bottom: 12px !important;
font-size: 13px;
font-weight: 400;
color: #777777 !important;
content: var(--desc);
line-height: 1.3;
}
/* Hover */
.s_submenu li a:hover,
.s_submenu li.active > a {
color: #000000 !important;
background: none !important;
}
/* ALLE MODELLEN + BESTSELLERS */
.s_submenu ul li:nth-child(1) > a,
.s_submenu ul li:nth-child(2) > a {
color: #000000 !important;
font-weight: 500 !important;
background: none !important;
}
/* BESTSELLERS ster */
.s_submenu ul li:nth-child(2) > a span {
color: #000000 !important;
}
}
/* ============================================================
2) DESKTOP MENU
============================================================ */
@media (min-width: 992px) {
/* Menu items */
.s_submenu li a {
color: #111 !important;
font-weight: 500 !important;
padding: 10px 0 0 !important;
text-transform: none !important;
transition: all 0.18s ease !important;
}
/* Subtitels */
.s_submenu li a::after {
display: block;
color: #888 !important;
font-size: 13px;
margin-top: 3px !important;
margin-bottom: 16px !important;
font-weight: 400;
line-height: 1.3;
content: var(--desc);
}
/* Hover */
.s_submenu li:hover > a {
color: #000 !important;
background: #f5f5f5 !important;
border-radius: 4px;
padding-left: 6px !important;
}
.s_submenu li:hover > a::after {
color: #555 !important;
}
/* ALLE MODELLEN + BESTSELLERS */
.s_submenu ul li:nth-child(1) > a,
.s_submenu ul li:nth-child(2) > a {
font-weight: 600 !important;
color: #111 !important;
background: none !important;
padding-left: 0 !important;
}
/* BESTSELLERS ster */
.s_submenu ul li:nth-child(2) > a span {
color: #000 !important;
}
/* Extra lucht */
.s_submenu ul li:nth-child(2) {
margin-bottom: 10px !important;
}
/* Hover ook op bovenste items */
.s_submenu ul li:nth-child(1):hover > a,
.s_submenu ul li:nth-child(2):hover > a {
background: #f5f5f5 !important;
color: #000 !important;
padding-left: 6px !important;
border-radius: 4px;
}
.s_submenu ul li:nth-child(2):hover > a span {
color: #000 !important;
}
}
/* ============================================================
3) SUBTITELS PER MODEL — NL / EN / FR
============================================================ */
/* NL */
.s_submenu a[href*="/nl/keepershandschoenen/zeus-2-0"] { --desc: "Premium grip"; }
.s_submenu a[href*="/nl/keepershandschoenen/sirius-2-0"] { --desc: "3 polssluitingen"; }
.s_submenu a[href*="/nl/keepershandschoenen/scorpius-2-0"] { --desc: "Lichtgewicht"; }
.s_submenu a[href*="/nl/keepershandschoenen/horus-2-0"] { --desc: "Stevig & beschermend"; }
.s_submenu a[href*="/nl/keepershandschoenen/gea-ugt-plus"] { --desc: "Beste prijs kwaliteit"; }
.s_submenu a[href*="/nl/keepershandschoenen/ares-2-0"] { --desc: "Pro-level fit"; }
/* EN */
.s_submenu a[href*="/en/goalkeeper-gloves/zeus-2-0"] { --desc: "Premium grip"; }
.s_submenu a[href*="/en/goalkeeper-gloves/sirius-2-0"] { --desc: "3 wrist straps"; }
.s_submenu a[href*="/en/goalkeeper-gloves/scorpius-2-0"] { --desc: "Lightweight"; }
.s_submenu a[href*="/en/goalkeeper-gloves/horus-2-0"] { --desc: "Strong & protective"; }
.s_submenu a[href*="/en/goalkeeper-gloves/gea-ugt-plus"] { --desc: "Best price quality"; }
.s_submenu a[href*="/en/goalkeeper-gloves/ares-2-0"] { --desc: "Pro-level fit"; }
/* FR */
.s_submenu a[href*="/fr/gants-de-gardien/zeus-2-0"] { --desc: "Adhérence premium"; }
.s_submenu a[href*="/fr/gants-de-gardien/sirius-2-0"] { --desc: "3 fermetures poignet"; }
.s_submenu a[href*="/fr/gants-de-gardien/scorpius-2-0"] { --desc: "Ultra léger"; }
.s_submenu a[href*="/fr/gants-de-gardien/horus-2-0"] { --desc: "Solide & protecteur"; }
.s_submenu a[href*="/fr/gants-de-gardien/gea-ugt-plus"] { --desc: "Meilleur rapport qualité prix"; }
.s_submenu a[href*="/fr/gants-de-gardien/ares-2-0"] { --desc: "Coupe pro-level"; }
/* =========================================================
N1 — END OF SEASON SALE INFOBALK
========================================================= */
.n1-salebar {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
background: linear-gradient(180deg, #c40000 0%, #8d0000 100%);
padding: 10px 14px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255,255,255,0.14);
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Inner */
.n1-salebar-inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
font-family: 'Poppins', sans-serif;
}
/* Main title */
.n1-salebar-title {
font-size: 15px;
font-weight: 900;
letter-spacing: 1.1px;
text-transform: uppercase;
color: #ffffff;
line-height: 1.15;
margin-bottom: 3px;
}
/* Discount line */
.n1-salebar-sub {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #ffffff;
line-height: 1.2;
margin-bottom: 2px;
}
/* Scarcity line */
.n1-salebar-note {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.9);
line-height: 1.25;
}
/* Desktop refinement */
@media (min-width: 768px) {
.n1-salebar {
padding: 11px 18px;
}
.n1-salebar-title {
font-size: 17px;
}
.n1-salebar-sub {
font-size: 14px;
}
.n1-salebar-note {
font-size: 12.5px;
}
}
/* =========================================================
N1 — SALEBALK OP CATEGORIEPAGINA'S
Desktop binnen content, mobiel full width
========================================================= */
.n1-salebar-cat {
margin-top: 16px !important;
margin-bottom: 24px !important;
}
/* Alleen desktop/tablet: binnen contentbreedte houden */
@media (min-width: 769px) {
.n1-salebar-cat {
width: 100% !important;
left: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Mobiel: dezelfde full width stijl als homepage */
@media (max-width: 768px) {
.n1-salebar-cat {
width: 100vw !important;
position: relative !important;
left: 50% !important;
margin-left: -50vw !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 24px !important;
}
}
/* =========================================================
AANSLUITING MET HERO & VOLGENDE SECTION
========================================================= */
/* Hero direct boven salebar */
.hero,
.hero-banner,
.home-banner,
.home-slider,
.homepage-slider {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Eerste section NA salebar */
.n1-salebar + section,
.n1-salebar + .container,
.n1-salebar + .row {
margin-top: 0 !important;
padding-top: 16px;
}
/* =========================
MOBIEL
========================= */
@media (max-width: 768px) {
.n1-salebar {
padding: 9px 12px;
}
.n1-salebar-title {
font-size: 14px;
margin-bottom: 3px;
line-height: 1.1;
}
.n1-salebar-sub {
font-size: 12px;
margin-bottom: 2px;
line-height: 1.15;
}
.n1-salebar-note {
font-size: 11.5px;
line-height: 1.2;
}
}
=========================================================
N1 — CHECKOUT DISCOUNT REMINDER (GRIP15) Pagina: afrekenen
========================================================= */
.n1-gripbar.n1-gripbar--checkout{
width: 100%;
position: static; /* <- voorkomt rare overflow in checkout */
left: auto;
margin-left: 0;
background: linear-gradient(180deg, #0e0e0e 0%, #000 100%);
padding: 12px 14px;
box-sizing: border-box;
border-radius: 8px; /* checkout oogt netter met radius */
border: 1px solid rgba(255,255,255,0.08);
margin: 10px 0 14px 0;
}
/* Inner */
.n1-gripbar--checkout .n1-gripbar-inner{
max-width: 1100px;
margin: 0 auto;
text-align: center;
font-family: 'Poppins', sans-serif;
}
/* Main line: NIET meer nowrap -> mag wrappen als het moet */
.n1-gripbar--checkout .n1-gripbar-main{
font-size: 14px;
line-height: 1.35;
color: #cfcfcf;
white-space: normal; /* <- sleutel: geen afkappen */
margin-bottom: 8px;
}
/* Price: bij elkaar houden */
.n1-gripbar--checkout .n1-price{
color: #ffffff;
font-weight: 600;
white-space: nowrap; /* <- prijs blijft één stuk */
}
/* Code row */
.n1-gripbar--checkout .n1-gripbar-code{
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap; /* <- op smalle schermen netjes onder elkaar */
justify-content: center;
}
/* Label */
.n1-gripbar--checkout .n1-code-label{
font-size: 13px;
color: #9a9a9a;
opacity: 0.85;
white-space: nowrap;
}
/* Code value */
.n1-gripbar--checkout .n1-code-value{
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
color: #ffffff;
padding: 4px 10px;
border-radius: 4px;
background: rgba(255,255,255,0.05);
border: 1px dotted rgba(255,255,255,0.35);
opacity: 0.92;
user-select: all;
cursor: text;
}
.n1-gripbar--checkout .n1-code-value:focus{
outline: none;
background: rgba(255,255,255,0.08);
}
/* =========================
MOBIEL
========================= */
@media (max-width: 768px){
.n1-gripbar.n1-gripbar--checkout{
padding: 11px 12px;
border-radius: 7px;
}
.n1-gripbar--checkout .n1-gripbar-main{
font-size: 13px;
margin-bottom: 7px;
}
.n1-gripbar--checkout .n1-code-label{
font-size: 12px;
}
.n1-gripbar--checkout .n1-code-value{
font-size: 12px;
padding: 3px 8px;
}
}
/* =========================================================
N1 – CHECKOUT KORTINGSCODE MELDING (subtiel rood accent)
========================================================= */
/* Basis */
.s_server_msg.s_msg_red{
/* layout */
margin: 14px 0 18px !important;
padding: 14px 16px !important;
/* look */
background: transparent !important; /* weg met groot vlak */
border: 0 !important;
border-left: 4px solid #d01919 !important; /* duidelijke rode cue */
border-radius: 0 !important;
/* text */
text-align: center !important;
}
/* Tekst binnenin */
.s_server_msg.s_msg_red p{
margin: 0 !important;
padding: 0 !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
line-height: 1.45 !important;
color: #d01919 !important;
font-weight: 500 !important; /* NIET bold */
}
/* Desktop: iets subtieler/strakker */
@media (min-width: 769px){
.s_server_msg.s_msg_red{
padding: 12px 16px !important;
}
.s_server_msg.s_msg_red p{
font-size: 13.5px !important;
}
}
/* Mobiel: minder groot, minder hoge “rode lijn”, beter leesbaar */
@media (max-width: 768px){
.s_server_msg.s_msg_red{
padding: 10px 12px !important;
border-left-width: 3px !important; /* lijn minder dominant */
text-align: left !important; /* leest rustiger op mobiel */
}
.s_server_msg.s_msg_red p{
font-size: 13px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
N1 — PRODUCTSTICKERS 2026
35% korting + NEW + LIMITED EDITION
========================================================= */
/* ---------- Base badge ---------- */
#s_listing .listitem.s_item{
position: relative !important;
overflow: hidden !important;
}
#s_listing .listitem.s_item::after{
content: "" !important;
display: none !important;
position: absolute !important;
top: 12px !important;
left: 12px !important;
z-index: 50 !important;
padding: 6px 12px !important;
border-radius: 999px !important;
font-family: 'Poppins', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
line-height: 1 !important;
pointer-events: none !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
/* =========================================================
35% OFF
Ares 2.0 Orange, Ares 2.0 Blue Pink, Horus Red
========================================================= */
#s_listing .listitem.s_item.product_14880::after, /* Ares Orange */
#s_listing .listitem.s_item.product_14879::after, /* Ares Blue Pink */
#s_listing .listitem.s_item.product_14904::after /* Horus All Red */
{
display: inline-flex !important;
content: "-35%" !important;
color: #ffffff !important;
background: #d10000 !important;
border: 1px solid rgba(255,255,255,0.18) !important;
}
/* =========================================================
NEW
========================================================= */
#s_listing .listitem.s_item.product_14931::after,
#s_listing .listitem.s_item.product_14934::after,
#s_listing .listitem.s_item.product_14933::after,
#s_listing .listitem.s_item.product_14932::after {
display: inline-flex !important;
content: "NEW" !important;
color: #ffffff !important;
background: rgba(17,17,17,0.92) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
}
/* =========================================================
LIMITED EDITION — Gloves of Nations
========================================================= */
#s_listing .listitem.s_item.product_14935::after, /* Zeus Gloves of Nations Belgium */
#s_listing .listitem.s_item.product_14936::after /* Zeus Gloves of Nations Holland */
{
display: inline-flex !important;
content: "LIMITED EDITION" !important;
color: #ffffff !important;
background: rgba(17,17,17,0.92) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
}
/* =========================================================
MOBILE PERFECT FIT
========================================================= */
@media (max-width: 480px){
#s_listing .listitem.s_item::after{
top: 6px !important;
left: 6px !important;
padding: 3px 7px !important;
font-size: 8.5px !important;
letter-spacing: 0.3px !important;
border-radius: 999px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}
}
/* =========================================================
LIMITED EDITION — Mobile compact position
========================================================= */
@media (max-width: 480px){
#s_listing .listitem.s_item.product_14935::after,
#s_listing .listitem.s_item.product_14936::after{
top: 5px !important;
left: 5px !important;
padding: 3px 6px !important;
font-size: 7px !important;
letter-spacing: 0.15px !important;
line-height: 1 !important;
max-width: calc(100% - 48px) !important;
white-space: nowrap !important;
}
}
/* =========================================================
Homepage break tussen Sale en Premium Zeus
GRATIS VERZENDING VA €50 (laten staan tot 1 feb 2026)
- Minder ruimte boven
- Meer ruimte onder
========================================================= */
.n1-breakbar{
width: 100%;
background: #0e0e0e;
padding: 8px 0; /* hoogte van de balk zelf */
margin-top: 0px; /* minder witruimte erboven */
margin-bottom: 0px; /* extra witruimte eronder */
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Text inside break bar – gelijk aan rotator stijl */
.n1-breakbar-inner{
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
text-align: center;
font-family:'Roboto', Arial, sans-serif;
font-weight:400;
font-size:14px;
letter-spacing:0.25px;
color:#ffffff;
text-transform:none;
line-height:1;
}
/* Mobiel gelijk aan rotator */
@media (max-width:768px){
.n1-breakbar-inner{
font-size:13px;
}
}
/* =========================================================
FIX NA GROTE UPDATE JAN 2026 — homepage flex-gap door lege lazy modules (DESKTOP)
========================================================= */
@media (min-width: 769px) {
body.s_page_common_home #home {
row-gap: 0 !important;
}
body.s_page_common_home #home > .lazy-load-section {
flex: 0 0 auto !important;
min-height: 0 !important;
}
body.s_page_common_home #home > .lazy-load-section:has(.n1-gripbar) {
margin-top: 0 !important;
}
}
/* =========================================================
N1 FIX NA GROTE UPDATE JAN 2026 — Definitieve fix mobiel homepage:
1) witruimte tussen sections weg
2) geen shift naar rechts
========================================================= */
@media (max-width: 768px) {
/* 1) WITRUIMTE: jouw werkende fix */
body.s_page_common_home #home,
body.s_page_common_home #home > * {
row-gap: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 2) SHIFT NAAR RECHTS: hard voorkomen zonder je fullwidth bars te slopen */
html, body {
overflow-x: clip !important; /* beter dan hidden (minder “jump”) */
}
body.s_page_common_home #wrapper,
body.s_page_common_home #content.s_wrap,
body.s_page_common_home #home {
max-width: 100% !important;
overflow-x: clip !important;
}
}
/* =========================================================
N1 PROMOTIEBALK – ROTERENDE TEKST (FULL WIDTH ZWART)
Scope: .n1-rotator-bar (voorkomt side-effects)
========================================================= */
* wrapper: pakt de witruimte van de widget/container af */
.n1-rotator-bar{
background:#000000 !important;
margin:0 !important;
padding:0 !important;
line-height:0 !important; /* voorkomt ‘extra’ ruimte door inline/line-height */
}
/* full width balk zelf */
.n1-rotator-bar .n1-fade-rotator{
position:relative !important;
display:block !important;
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
height:36px !important;
line-height:36px !important;
text-align:center !important;
overflow:hidden !important;
background:#000000 !important;
}
/* roterende tekst */
.n1-rotator-bar .n1-fade-rotator span{
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
opacity:0;
white-space:nowrap;
animation:n1Fade 18s infinite;
transition:opacity .8s ease;
font-family:'Roboto', Arial, sans-serif !important;
font-weight:400 !important;
font-size:14px !important;
letter-spacing:0.25px !important;
color:#ffffff !important;
}
/* fallback */
.n1-rotator-bar .n1-fade-rotator span:first-child{opacity:1}
/* delays */
.n1-rotator-bar .n1-fade-rotator span:nth-child(1){animation-delay:0s}
.n1-rotator-bar .n1-fade-rotator span:nth-child(2){animation-delay:4.5s}
.n1-rotator-bar .n1-fade-rotator span:nth-child(3){animation-delay:9s}
.n1-rotator-bar .n1-fade-rotator span:nth-child(4){animation-delay:13.5s}
@keyframes n1Fade{
0%,5%{opacity:0}
12%,28%{opacity:1}
32%,100%{opacity:0}
}
/* mobiel */
@media (max-width:768px){
.n1-rotator-bar .n1-fade-rotator span{font-size:13px !important}
}
/* =========================================================
CATEGORY (Shopbuilders #s_listing) — cards align met homepage
========================================================= */
#s_listing .s_item{
background:#fff !important;
border-radius:14px !important;
box-shadow:0 4px 10px rgba(0,0,0,0.06) !important;
overflow:hidden !important;
transition:transform .25s ease, box-shadow .25s ease !important;
}
#s_listing .s_item:hover{
transform:translateY(-2px) !important;
box-shadow:0 6px 12px rgba(0,0,0,0.12) !important;
}
/* “lucht” binnen de kaart (probeer beide: update kan wrapper veranderd hebben) */
#s_listing .s_item .caption,
#s_listing .s_item .s_caption,
#s_listing .s_item .s_info,
#s_listing .s_item .s_item_info{
padding:12px 12px 14px 12px !important;
}
/* =========================================================
CATEGORY (Shopbuilders #s_listing) — name & price align homepage
========================================================= */
#s_listing .s_item .name,
#s_listing .s_item .name a,
#s_listing .s_item .s_title,
#s_listing .s_item .s_title a,
#s_listing .s_item h3,
#s_listing .s_item h3 a{
font-family:'Poppins',sans-serif !important;
font-size:13px !important;
font-weight:500 !important;
color:#000 !important;
margin:10px 0 4px 0 !important;
line-height:1.25 !important;
}
/* prijs (Shopbuilders listing) — alleen typografie, GEEN kleur */
#s_listing .s_item .price,
#s_listing .s_item .s_price,
#s_listing .s_item .price-new,
#s_listing .s_item .price-old,
#s_listing .s_item .s_price_new,
#s_listing .s_item .s_price_old{
font-family:'Poppins',sans-serif !important;
font-size:14px !important;
font-weight:700 !important;
margin:0 0 10px 0 !important;
}
/* =========================================================
FIX TYPOGRAFIE 'BEKIJK OOK' (RELATED PRODUCTS) - MOBIEL
Hard reset binnen #related_products, verder nergens
========================================================= */
@media (max-width: 768px) {
body #related_products {
font-family: Poppins, sans-serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
/* reset: alles binnen related products terug naar basis */
body #related_products,
body #related_products * {
font-size: 13px !important;
line-height: 1.35 !important;
}
/* productnaam iets groter */
body #related_products .product-name,
body #related_products .name,
body #related_products .product-name a,
body #related_products .name a,
body #related_products h3,
body #related_products h4 {
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
}
/* prijs iets kleiner / strak */
body #related_products .price,
body #related_products .price-new,
body #related_products .price-old {
font-size: 13px !important;
line-height: 1.3 !important;
}
}
/* =========================================================
BEKIJK OOK (#related_products) – STRAKKE UITLIJNING MOBIEL
Titels vrij (1–2 regels), prijzen altijd op dezelfde lijn
========================================================= */
@media (max-width: 768px) {
/* maak elke productkaart een flex-kolom */
body #related_products .product-thumb,
body #related_products .product-item,
body #related_products .product-layout {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* titel – gewoon natuurlijk laten afbreken */
body #related_products .product-name,
body #related_products .name,
body #related_products .product-name a,
body #related_products .name a {
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
}
/* prijs altijd onderaan = alles netjes uitgelijnd */
body #related_products .price,
body #related_products .product-price,
body #related_products .caption .price {
margin-top: auto !important;
font-size: 13px !important;
line-height: 1.3 !important;
}
/* old / new prijs op één lijn houden */
body #related_products .price-old,
body #related_products .price-new {
display: inline-block !important;
white-space: nowrap !important;
}
}
/* =========================================================
⚡ N1 2025 — CELTON BIAI Visual (MOBILE ONLY)
Exact zoals jouw “goede” versie, maar:
✅ alleen mobiel zichtbaar
✅ werkt op alle talen
========================================================= */
/* ✅ Desktop uit (alles >= 769px) */
@media (min-width: 769px){
.n1-celton-visual{
display: none !important;
}
}
/* ✅ Mobiel aan (<= 768px) */
@media (max-width: 768px){
.n1-celton-visual{
position: relative;
width: 100%;
overflow: hidden;
margin: 0;
background: #000;
}
/* Afbeelding — ongewijzigd */
.n1-celton-visual img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: brightness(1.05) contrast(1.02) saturate(1.08);
}
/* Overlay — ongewijzigd */
.n1-celton-visual::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.08) 0%,
rgba(0,0,0,0.28) 100%
);
z-index: 1;
}
/* Tekstblok — positie exact gelijk */
.n1-celton-visual .n1-visual-text{
position: absolute;
top: 16%;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 90%;
max-width: 900px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: center;
}
/* Bovenregel (jouw classnaam in HTML) */
.n1-celton-visual .n1-celton-kicker{
font-size: 12px;
letter-spacing: 2.2px;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
margin-bottom: 12px;
}
/* Titel */
.n1-celton-visual .n1-visual-text h2{
font-size: 30px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 14px;
color: #ffffff !important;
text-shadow:
0 3px 12px rgba(0,0,0,0.55),
0 1px 2px rgba(0,0,0,0.45);
}
/* Subregel */
.n1-celton-visual .n1-visual-text p{
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
margin: 0;
}
/* Accentlijn */
.n1-celton-visual .n1-visual-text::after{
content: "";
display: block;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #b39b10 0%, #ffffff 100%);
margin: 20px auto 0;
border-radius: 2px;
}
}
/* =========================================================
N1 — Celton mobile visibility fix
========================================================= */
@media (max-width: 768px){
.n1-brand-visual.n1-celton-visual{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 1px !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
background: #000 !important;
}
.n1-brand-visual.n1-celton-visual picture{
display: block !important;
width: 100% !important;
}
.n1-brand-visual.n1-celton-visual img{
display: block !important;
width: 100% !important;
height: auto !important;
}
}
/* =========================================================
⚡ N1 2025 — CELTON BIAI Visual (DESKTOP ONLY) — NEW
Doel:
✅ desktop minder “kaal”
✅ tekst groter + meer presence
✅ zwarte vlak voelt bewust (rechts donkerder)
========================================================= */
/* ✅ Mobiel uit (alles <= 768px) */
@media (max-width: 768px){
.n1-celton-visual-desktop{
display: none !important;
}
}
/* ✅ Desktop aan (>= 769px) */
@media (min-width: 769px){
.n1-celton-visual-desktop{
position: relative;
width: 100%;
overflow: hidden;
margin: 0;
background: #000;
}
/* Afbeelding */
.n1-celton-visual-desktop img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: brightness(1.06) contrast(1.03) saturate(1.10);
}
/* Overlay — rechts sterker donker zodat het niet “leeg” voelt */
.n1-celton-visual-desktop::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(0,0,0,0.06) 0%,
rgba(0,0,0,0.40) 58%,
rgba(0,0,0,0.72) 100%
);
z-index: 1;
}
/* Tekstblok — meer richting midden in het zwarte vlak + groter */
.n1-celton-visual-desktop .n1-visual-text{
position: absolute;
top: 22%;
left: 52%;
transform: translateX(0);
z-index: 2;
width: 46%;
max-width: 680px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: left;
}
/* Kicker */
.n1-celton-visual-desktop .n1-celton-kicker{
font-size: 12px;
letter-spacing: 2.6px;
text-transform: uppercase;
color: rgba(255,255,255,0.80);
margin-bottom: 14px;
}
/* Titel — groter voor desktop impact */
.n1-celton-visual-desktop .n1-visual-text h2{
font-size: 60px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 14px;
color: #ffffff !important;
text-shadow:
0 10px 28px rgba(0,0,0,0.55),
0 2px 4px rgba(0,0,0,0.45);
}
/* Subregel — iets groter + leesbaarder */
.n1-celton-visual-desktop .n1-visual-text p{
font-size: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
margin: 0;
}
/* Accentlijn */
.n1-celton-visual-desktop .n1-visual-text::after{
content: "";
display: block;
width: 54px;
height: 2px;
background: linear-gradient(90deg, #b39b10 0%, #ffffff 100%);
margin: 22px 0 0;
border-radius: 2px;
}
/* ✅ Extra finesse voor kleinere desktops (laptops) */
@media (max-width: 1200px){
.n1-celton-visual-desktop .n1-visual-text{
top: 20%;
left: 50%;
width: 48%;
}
.n1-celton-visual-desktop .n1-visual-text h2{
font-size: 52px;
}
.n1-celton-visual-desktop .n1-visual-text p{
font-size: 15px;
}
}
/* ✅ Extra finesse voor brede schermen */
@media (min-width: 1600px){
.n1-celton-visual-desktop .n1-visual-text{
top: 24%;
left: 54%;
max-width: 760px;
}
.n1-celton-visual-desktop .n1-visual-text h2{
font-size: 64px;
}
}
}
/* =========================================================
⚡zorg dat alle lettertypen over foto's hetzelfde zijn op homepage.
========================================================= */
/* Basis hero text styling */
.n1-visual-text,
.n1-scorpius-visual .n1-visual-text,
.n1-celton-visual .n1-visual-text{
font-family: 'Poppins', sans-serif !important;
text-align: center;
}
/* Titel — overal exact gelijk */
.n1-visual-text h2,
.n1-scorpius-visual .n1-visual-text h2,
.n1-celton-visual .n1-visual-text h2{
font-size: 40px !important;
font-weight: 800 !important; /* was 900 bij Celton */
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin: 0 0 12px !important;
color: #ffffff !important;
}
/* Subtekst — overal exact gelijk */
.n1-visual-text p,
.n1-scorpius-visual .n1-visual-text p,
.n1-celton-visual .n1-visual-text p{
font-size: 18px !important;
font-weight: 400 !important;
letter-spacing: 0 !important; /* Celton had 2px */
text-transform: none !important; /* Celton had uppercase */
color: #eee !important;
margin: 0 !important;
}
/* Accentlijn overal identiek */
.n1-visual-text::after,
.n1-scorpius-visual .n1-visual-text::after,
.n1-celton-visual .n1-visual-text::after{
content: "";
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #b39b10 0%, #ffffff 100%);
margin: 18px auto 0;
border-radius: 2px;
}
/* Mobiel consistent */
@media (max-width:768px){
.n1-visual-text h2,
.n1-scorpius-visual .n1-visual-text h2,
.n1-celton-visual .n1-visual-text h2{
font-size: 24px !important;
}
.n1-visual-text p,
.n1-scorpius-visual .n1-visual-text p,
.n1-celton-visual .n1-visual-text p{
font-size: 14px !important;
}
.n1-visual-text::after,
.n1-scorpius-visual .n1-visual-text::after,
.n1-celton-visual .n1-visual-text::after{
width: 40px;
height: 2px;
}
}
#product_gallery ul.s_thumbs li {
aspect-ratio: 1 / 1;
height: auto !important;
overflow: hidden;
}
/* =========================================================
zorg dat omtrek van productfoto's weer vierkant is
========================================================= */
#product_gallery ul.s_thumbs li img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
}
/* =========================================================
N1 CATEGORY BANNER — DUBBELE BANNER FIX
========================================================= */
/* Desktop: eerste losse customizer-banner boven filter verbergen */
@media (min-width: 769px){
#content > .swiperwrapper.customizer-module:first-of-type{
display: none !important;
}
}
/* Mobiel: eerste losse customizer-banner juist tonen */
@media (max-width: 768px){
#content > .swiperwrapper.customizer-module:first-of-type{
display: block !important;
width: 100% !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
overflow: hidden !important;
line-height: 0 !important;
}
#content > .swiperwrapper.customizer-module:first-of-type .banner.banner-static{
display: block !important;
width: 100% !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
#content > .swiperwrapper.customizer-module:first-of-type .banner.banner-static img{
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* =========================================================
N1 — ZEUS CATEGORY BANNER — MOBILE ONLY — FINAL
Volledige vervanging voor eerdere Zeus category CSS
========================================================= */
.n1-model-strip {
background: transparent;
margin: 0 0 16px 0;
box-sizing: border-box;
}
/* ---------- BANNER ---------- */
.n1-model-banner {
background: #111111;
padding: 15px 16px 13px;
margin: 0 0 10px 0;
box-sizing: border-box;
}
.n1-model-banner-title {
font-size: 25px;
font-weight: 600; /* ← aangepast (was 800) */
line-height: 1;
text-transform: uppercase;
color: #ffffff;
letter-spacing: -0.3px;
margin: 0;
}
.n1-model-banner-sub {
font-size: 10px;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
letter-spacing: 0.4px;
margin-top: 4px;
}
/* ---------- PERFORMANCE ---------- */
.n1-model-performance {
background: #f6f6f4;
border-top: 1px solid #dfdfdb;
border-bottom: 1px solid #dfdfdb;
padding: 14px 16px 13px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.n1-model-banner,
.n1-model-performance {
width: calc(100% + 30px);
margin-left: -15px;
margin-right: -15px;
}
}
.n1-model-strip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 12px;
}
.n1-model-strip-item {
min-width: 0;
}
.n1-model-strip-label {
font-size: 9px;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
color: #111111;
letter-spacing: 0.3px;
margin-bottom: 5px;
}
.n1-model-strip-bar {
height: 6px;
background: #dddddd;
border-radius: 20px;
overflow: hidden;
}
.n1-model-strip-fill-dark,
.n1-model-strip-fill-mid,
.n1-model-strip-fill-light {
height: 6px;
border-radius: 20px;
}
.n1-model-strip-fill-dark {
background: #1f6b34;
}
.n1-model-strip-fill-mid {
background: #4caf50;
}
.n1-model-strip-fill-light {
background: #8bc34a;
}
/* ---------- FEATURE LABELS ---------- */
.n1-model-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.n1-model-feature {
display: inline-block;
padding: 6px 10px;
font-size: 9px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.2px;
color: #2f2f2f;
background: #ffffff;
border: 1px solid #dddddd;
text-align: center;
box-sizing: border-box;
}
/* FULL WIDTH IMAGE FIX */
.n1-model-image {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.n1-model-image img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
@media (min-width: 769px) {
.n1-model-strip {
display: none;
}
}
/* ==============================================================
MOBIEL — Strakke full width filter + breadcrumbs verborgen
============================================================== */
@media (max-width: 768px) {
/* Breadcrumbs volledig verbergen */
#breadcrumbs,
.breadcrumb,
ul.breadcrumb,
.breadcrumbs {
display: none !important;
}
/* Minder onrust bovenin */
#left_col {
margin-top: 0 !important;
}
/* Filter heading: full width, strak en subtiel */
.box.filter_module .box-heading {
background: #f8f8f8 !important;
border: 1px solid #e3e3e3 !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 9px 14px !important;
margin: 0 !important;
width: calc(100% + 30px) !important;
max-width: none !important;
margin-left: -15px !important;
margin-right: -15px !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: 0.2px !important;
text-align: center !important;
color: #111111 !important;
}
/* Eventuele iconen/tekens in filter netjes uitlijnen */
.box.filter_module .box-heading * {
vertical-align: middle !important;
}
/* Filter content ook full width en strak */
.box.filter_module .box-content {
background: #fafafa !important;
border: 1px solid #e3e3e3 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 10px 14px !important;
width: calc(100% + 30px) !important;
max-width: none !important;
margin: -8px 0 8px 0 !important;
margin-left: -15px !important;
margin-right: -15px !important;
}
}
@media (max-width: 768px) {
#content.s_wrap {
padding-top: 0 !important;
margin-top: 0 !important;
gap: 0 !important;
}
#category {
margin-top: 0 !important;
padding-top: 0 !important;
}
#left_col {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* =========================================================
✅ N1 2026 — Mobiele banner homepage zeus breeze (Nike-style met fade-in)
========================================================= */
/* --- Desktopbanner uitschakelen op mobiel --- */
@media (max-width: 768px) {
.slide-image,
.slider-wrapper,
.swiper-container {
display: none !important;
}
}
/* --- Alleen mobiele banner tonen --- */
.n1-mobile-banner {
display: none;
}
@media (max-width: 768px) {
.n1-mobile-banner {
display: block;
position: relative;
width: 100%;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
.n1-mobile-banner img {
width: 100%;
height: auto;
display: block;
}
/* --- Overlay met twee knoppen naast elkaar --- */
.banner-overlay {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
text-align: center;
animation: fadeInMobileButtons 1.3s ease forwards;
opacity: 0;
}
/* --- Mobiele banner zonder witruimte onderaan --- */
.n1-mobile-banner {
margin-top: -4px !important;
margin-bottom: 0 !important;
}
}
/* =========================================================
⚡ N1 – Mobiele bannerbuttons (Nike look + glasachtig effect)
========================================================= */
.banner-btn {
background: rgba(255, 255, 255, 0.92) !important;
color: #171717 !important;
font-family: 'Poppins', sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase;
border-radius: 12px !important;
padding: 9px 16px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
letter-spacing: 0.5px !important;
font-size: 13px !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
display: inline-block !important;
backdrop-filter: blur(4px);
transform: translateY(10px);
white-space: nowrap;
}
.banner-btn:hover {
background: #ffffff !important;
color: #000 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
transform: translateY(-2px);
}
/* Tweede knop subtiel grijzer */
.banner-btn.second-btn {
background: rgba(245, 245, 245, 0.92) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
/* Tap / active effect */
.banner-btn:active {
transform: scale(0.97);
transition: transform 0.1s ease-out;
}
/* ✨ Fade-in animatie */
@keyframes fadeInMobileButtons {
0% {
opacity: 0;
transform: translate(-50%, 25px);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* --- Header zichtbaar houden --- */
header,
.header-wrapper,
#header,
.s_header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
position: relative !important;
z-index: 999 !important;
}
/* --- Verberg alleen intro op mobiel homepage --- */
@media (max-width: 768px) {
body.s_page_home #intro {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* =========================================================
???? N1 HOMEPAGE BANNER UPGRADE (SUBTIEL & PREMIUM)
========================================================= */
@media (max-width: 768px) {
/* --- Subtiele gradient voor betere leesbaarheid --- */
.n1-mobile-banner::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 55%;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.15),
transparent
);
pointer-events: none;
z-index: 1;
}
/* Zorg dat overlay boven gradient blijft */
.banner-overlay {
z-index: 2;
}
/* --- Buttons net iets krachtiger --- */
.banner-btn {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
backdrop-filter: blur(6px);
}
/* --- Klein hover/tap extra premium --- */
.banner-btn:active {
transform: scale(0.96);
}
/* --- Iets meer spacing tussen buttons (lucht) --- */
.banner-overlay {
gap: 12px;
}
}
@media (max-width: 768px) {
.banner-btn {
background: #ffffff !important;
color: #111 !important;
font-weight: 700 !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
}
.banner-btn.second-btn {
background: rgba(255, 255, 255, 0.85) !important;
}
}
/* =========================================================
✅ N1 2026 — Desktopbanner Zeus Breeze
Alleen voor desktop, veilig naast je mobiele CSS
========================================================= */
.n1-desktop-banner {
position: relative;
width: 100vw;
margin: 0 auto 0 auto;
overflow: hidden;
display: block;
border-radius: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.n1-desktop-banner img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* subtiele gradient zoals mobiel */
.n1-desktop-banner::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 55%;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.15),
transparent
);
pointer-events: none;
z-index: 1;
}
/* overlay met buttons onderin, gecentreerd */
.banner-overlay-desktop {
position: absolute;
bottom: 11%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
text-align: center;
z-index: 3;
white-space: nowrap;
}
/* DESKTOP BUTTONS — bewust scoped */
.banner-overlay-desktop .banner-btn {
display: inline-block !important;
position: relative;
z-index: 4;
background: #ffffff !important;
color: #171717 !important;
font-family: 'Poppins', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
letter-spacing: 0.5px !important;
font-size: 16px !important;
line-height: 1 !important;
padding: 14px 38px !important;
border-radius: 12px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 1 !important;
visibility: visible !important;
}
.banner-overlay-desktop .banner-btn:hover {
background: #ffffff !important;
color: #111111 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
transform: translateY(-2px);
}
.banner-overlay-desktop .banner-btn.second-btn {
background: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
}
/* verberg desktopbanner op mobiel */
@media (max-width: 768px) {
.n1-desktop-banner {
display: none !important;
}
}
/* header stabiel houden */
body {
overflow-x: hidden !important;
}
.header,
#header,
#topbar {
position: relative !important;
z-index: 1000 !important;
}
/* =========================================================
⚡ N1 2026 — SCORPIUS 2.0 Visual (DESKTOP ONLY)
========================================================= */
/* ✅ Mobiel uit */
@media (max-width: 768px){
.n1-scorpius-visual-desktop{
display: none !important;
}
}
/* ✅ Desktop aan */
@media (min-width: 769px){
.n1-scorpius-visual-desktop{
position: relative;
width: 100%;
overflow: hidden;
margin: 40px 0 24px;
background: #000;
}
.n1-scorpius-visual-desktop img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: brightness(1.06) contrast(1.03) saturate(1.08);
}
/* Geen overlay op desktop */
.n1-scorpius-visual-desktop::before,
.n1-scorpius-visual-desktop::after{
content: none !important;
display: none !important;
}
/* Tekstblok — LINKS */
.n1-scorpius-visual-desktop .n1-visual-text{
position: absolute;
top: 24%;
left: 6%;
transform: none;
z-index: 2;
width: 46%;
max-width: 720px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: left;
}
/* Kicker */
.n1-scorpius-visual-desktop .n1-scorpius-kicker{
font-size: 12px;
letter-spacing: 2.6px;
text-transform: uppercase;
color: rgba(255,255,255,0.82);
margin-bottom: 14px;
}
/* Titel */
.n1-scorpius-visual-desktop .n1-visual-text h2{
font-size: 62px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 14px;
color: #ffffff !important;
text-shadow:
0 10px 28px rgba(0,0,0,0.55),
0 2px 4px rgba(0,0,0,0.45);
}
/* Subregel */
.n1-scorpius-visual-desktop .n1-visual-text p{
font-size: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(255,255,255,0.90);
margin: 0 0 22px;
max-width: 560px;
}
/* Button */
.n1-scorpius-visual-desktop .banner-btn{
display: inline-block;
background: #fff;
color: #171717;
font-weight: 700;
border-radius: 10px;
padding: 12px 36px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.6px;
transition: all 0.25s ease;
}
.n1-scorpius-visual-desktop .banner-btn:hover{
background: #f3f3f3;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
/* Geen accentlijn */
.n1-scorpius-visual-desktop .n1-visual-text::after{
content: none !important;
display: none !important;
}
/* ✅ Laptop */
@media (max-width: 1200px){
.n1-scorpius-visual-desktop .n1-visual-text{
top: 22%;
width: 52%;
}
.n1-scorpius-visual-desktop .n1-visual-text h2{
font-size: 54px;
}
.n1-scorpius-visual-desktop .n1-visual-text p{
font-size: 15px;
}
}
/* ✅ Brede schermen */
@media (min-width: 1600px){
.n1-scorpius-visual-desktop .n1-visual-text{
top: 26%;
width: 44%;
max-width: 780px;
}
.n1-scorpius-visual-desktop .n1-visual-text h2{
font-size: 66px;
}
}
}
/* =========================================================
⚡ N1 2026 — SCORPIUS 2.0 Visual (MOBILE ONLY) —
========================================================= */
/* Desktop verbergen */
@media (min-width: 769px){
.n1-scorpius-visual-mobile{ display:none !important; }
}
@media (max-width: 768px){
.n1-scorpius-visual-mobile{
position: relative;
width: 100%;
overflow: hidden;
margin: 0 0 24px 0;
background: #000;
text-align: center;
}
/* ✅ Kill-switch: als er globaal een overlay op n1-brand-visual zit */
.n1-scorpius-visual-mobile::before,
.n1-scorpius-visual-mobile::after{
content: none !important;
display: none !important;
}
/* Afbeelding — HARD CLEAN */
.n1-scorpius-visual-mobile img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: none !important;
opacity: 1 !important;
}
/* ✅ Eigen overlay (heel subtiel) */
.n1-scorpius-visual-mobile .n1-scorpius-overlay{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.00) 0%,
rgba(0,0,0,0.04) 60%,
rgba(0,0,0,0.14) 100%
);
}
/* Tekstblok */
.n1-scorpius-visual-mobile .n1-visual-text{
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 90%;
max-width: 520px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: center;
text-shadow: 0 3px 10px rgba(0,0,0,0.50);
}
/* ✅ Goudlijn hard uit */
.n1-scorpius-visual-mobile .n1-visual-text::after{
content: none !important;
display: none !important;
}
.n1-scorpius-visual-mobile .n1-scorpius-kicker{
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
opacity: 0.9;
}
.n1-scorpius-visual-mobile .n1-visual-text h2{
font-size: 28px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 10px;
color: #ffffff !important;
}
.n1-scorpius-visual-mobile .n1-visual-text p{
font-size: 14px;
line-height: 1.6;
margin: 0 0 20px;
}
/* Button (zonder tekstschaduw) */
.n1-scorpius-visual-mobile .banner-btn{
display: inline-block;
background: #ffffff;
color: #171717;
font-weight: 600;
border-radius: 10px;
padding: 10px 28px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.6px;
transition: all 0.25s ease;
text-shadow: none !important;
}
.n1-scorpius-visual-mobile .banner-btn:hover{
background: #f3f3f3;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
text-shadow: none !important;
}
}
/* =========================================================
⚡️ N1 2025 — KIDS COLLECTIE (zelfde stijl + gecorrigeerde spacing)
========================================================= */
.n1-kids-section {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: #fff;
padding: 24px 16px 30px 16px; /* ✅ was 40px → nu gelijk aan ZEUS */
text-align: center;
box-sizing: border-box;
}
/* Titel */
.n1-kids-section .n1-section-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 18px;
color: #000;
position: relative;
}
.n1-kids-section .n1-section-title::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #000 0%, #c9a44f 100%);
margin: 10px auto 0 auto;
border-radius: 2px;
}
.n1-kids-subtitle {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #171717;
line-height: 1.6;
max-width: 540px;
margin: 0 auto 26px auto;
}
/* Grid */
.n1-kids-section .n1-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
justify-content: center;
align-items: stretch;
}
/* Productkaarten */
.n1-kids-section .n1-product {
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none !important;
color: inherit !important;
}
.n1-kids-section .n1-product:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
/* Afbeeldingen */
.n1-kids-section .n1-product img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
background: #fff;
border: none;
transition: transform 0.3s ease;
}
.n1-kids-section .n1-product:hover img {
transform: scale(1.03);
}
/* Tekst */
.n1-kids-section .n1-product-name {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: #000;
margin: 10px 0 4px 0;
}
.n1-kids-section .n1-product-price {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 700;
color: #000;
margin-bottom: 10px;
}
/* Knop (⚡ gelijk aan ZEUS spacing) */
.n1-kids-section .n1-btn-wrapper {
margin-top: 22px; /* ✅ was 32px → iets minder bovenruimte */
margin-bottom: 10px; /* ✅ toegevoegd → iets meer onderruimte */
text-align: center;
}
.n1-kids-section .n1-btn-wrapper .banner-btn {
display: inline-block;
background: #fff;
color: #171717;
font-weight: 600;
border-radius: 10px;
padding: 12px 32px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* ✅ gelijk aan ZEUS-knop */
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
transition: all 0.3s ease;
}
.n1-kids-section .n1-btn-wrapper .banner-btn:hover {
background: #f3f3f3;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Responsive */
@media (max-width: 768px) {
.n1-kids-section {
padding: 16px 12px 26px 12px; /* ✅ was 30px → consistent met ZEUS */
}
.n1-kids-section .n1-product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.n1-kids-section .n1-product-name {
font-size: 12px;
}
.n1-kids-section .n1-product-price {
font-size: 13px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.n1-kids-section .n1-product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================
⚡️ N1 2026 — GRIP SOCKS VISUAL MOBILE ONLY
========================================================= */
/* Desktop uit */
@media (min-width: 769px){
.n1-gripsocks-visual{
display: none !important;
}
}
/* Link wrapper */
.n1-gripsocks-link{
display: block;
text-decoration: none !important;
color: inherit !important;
}
.n1-gripsocks-link,
.n1-gripsocks-link *{
text-decoration: none !important;
border: none !important;
box-shadow: none !important;
}
.n1-gripsocks-link::before,
.n1-gripsocks-link::after{
display: none !important;
content: none !important;
}
/* Mobiel aan */
@media (max-width: 768px){
.n1-gripsocks-visual{
position: relative;
width: 100%;
overflow: hidden;
margin: 0;
background: #000;
cursor: pointer;
}
.n1-gripsocks-visual img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: brightness(1.03) contrast(1.02) saturate(1.02);
}
.n1-gripsocks-visual::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.45) 0%,
rgba(0,0,0,0.18) 45%,
rgba(0,0,0,0.25) 100%
);
z-index: 1;
}
.n1-gripsocks-visual .n1-visual-text{
position: absolute;
top: 13%;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 90%;
max-width: 900px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: center;
}
.n1-gripsocks-visual .n1-gripsocks-kicker{
font-size: 12px;
letter-spacing: 2.2px;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
margin-bottom: 12px;
}
.n1-gripsocks-visual .n1-visual-text h2{
font-size: 29px;
line-height: 1.08;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 14px;
color: #ffffff !important;
text-shadow:
0 3px 12px rgba(0,0,0,0.45),
0 1px 2px rgba(0,0,0,0.35);
}
.n1-gripsocks-visual .n1-visual-text p{
font-size: 13px;
letter-spacing: 0.6px;
color: rgba(255,255,255,0.92);
margin: 0;
}
.n1-gripsocks-visual .n1-visual-text::after{
content: "";
display: block;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #b39b10 0%, #ffffff 100%);
margin: 20px auto 0;
border-radius: 2px;
}
}
.n1-gripsocks-visual{
cursor: pointer;
}
/* =========================================================
⚡ N1 2026 — GRIP SOCKS SPLIT VISUAL (DESKTOP ONLY)
========================================================= */
/* Standaard: alles uit */
.n1-gripsocks-header,
.n1-gripsocks-split-desktop{
display: none !important;
}
/* Alleen desktop aan */
@media screen and (min-width: 769px){
.n1-gripsocks-header{
display: block !important;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 24px 16px 20px;
text-align: center;
box-sizing: border-box;
}
.n1-gripsocks-header .n1-section-title{
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 18px;
color: #000;
position: relative;
}
.n1-gripsocks-header .n1-section-title::after{
content: "";
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #000 0%, #c9a44f 100%);
margin: 10px auto 0 auto;
border-radius: 2px;
}
.n1-gripsocks-subtitle{
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #171717;
line-height: 1.6;
max-width: 540px;
margin: 0 auto 20px auto;
}
.n1-gripsocks-split-desktop{
display: flex !important;
gap: 20px;
width: 100%;
margin: 0;
padding: 0;
background: #ffffff;
}
.n1-gripsocks-split-desktop .n1-gripsocks-split-item{
display: block;
width: calc(50% - 10px);
text-decoration: none !important;
color: inherit !important;
overflow: hidden;
background: #ffffff;
}
.n1-gripsocks-split-desktop .n1-gripsocks-split-item img{
width: 100%;
height: 600px;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
}
.n1-gripsocks-split-desktop .n1-gripsocks-split-item:hover img{
transform: scale(1.02);
}
}
/* =========================================================
N1 2026 — ZEUS 2.0 LUNAR Visual (MOBILE ONLY)
========================================================= */
@media (min-width: 769px){
.n1-lunar-visual-mobile{
display:none !important;
}
}
@media (max-width: 768px){
.n1-lunar-visual-mobile{
position: relative;
width: 100%;
overflow: hidden;
margin: 24px 0 0 0;
background: #000;
text-align: center;
}
.n1-lunar-visual-mobile::before,
.n1-lunar-visual-mobile::after,
.n1-lunar-visual-mobile .n1-visual-text::before,
.n1-lunar-visual-mobile .n1-visual-text::after{
content: none !important;
display: none !important;
}
.n1-lunar-visual-mobile img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: none !important;
opacity: 1 !important;
}
.n1-lunar-visual-mobile .n1-lunar-overlay{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.00) 0%,
rgba(0,0,0,0.06) 46%,
rgba(0,0,0,0.42) 100%
);
}
.n1-lunar-visual-mobile .n1-visual-text{
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 90%;
max-width: 520px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: center;
text-shadow: 0 3px 10px rgba(0,0,0,0.65);
}
.n1-lunar-visual-mobile .n1-lunar-kicker{
font-size: 13px;
font-weight: 800;
letter-spacing: 5px;
text-transform: uppercase;
margin-bottom: 10px;
opacity: 1;
}
.n1-lunar-visual-mobile .n1-visual-text h2{
display: inline-block;
font-size: 34px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 16px;
padding: 0;
color: #ffffff !important;
background: transparent;
text-shadow: 0 3px 10px rgba(0,0,0,0.65);
line-height: 1;
}
.n1-lunar-visual-mobile .n1-visual-text p{
font-size: 18px;
font-weight: 400;
letter-spacing: 0.8px;
text-transform: uppercase;
line-height: 1.3;
margin: 0 0 24px;
color: #ffffff;
}
.n1-lunar-visual-mobile .banner-btn{
display: inline-block;
background: #ffffff;
color: #171717;
font-weight: 800;
border-radius: 12px;
padding: 15px 38px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.22);
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 0.6px;
transition: all 0.25s ease;
text-shadow: none !important;
}
.n1-lunar-visual-mobile .banner-btn:hover{
background: #f3f3f3;
box-shadow: 0 4px 12px rgba(0,0,0,0.22);
text-shadow: none !important;
}
}
/* =========================================================
N1 2026 — ZEUS 2.0 LUNAR Visual (DESKTOP ONLY)
========================================================= */
/* Mobiel uit */
@media (max-width: 768px){
.n1-lunar-visual-desktop{
display: none !important;
}
}
/* Desktop aan */
@media (min-width: 769px){
.n1-lunar-visual-desktop{
position: relative;
width: 100%;
overflow: hidden;
margin: 40px 0 24px;
background: #000;
}
.n1-lunar-visual-desktop img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: brightness(1.04) contrast(1.04) saturate(1.05);
}
/* Geen overlays */
.n1-lunar-visual-desktop::before,
.n1-lunar-visual-desktop::after,
.n1-lunar-visual-desktop .n1-visual-text::before,
.n1-lunar-visual-desktop .n1-visual-text::after{
content: none !important;
display: none !important;
}
/* =========================================================
Tekstblok
========================================================= */
.n1-lunar-visual-desktop .n1-visual-text{
position: absolute;
top: 27%;
right: 12%;
transform: none;
z-index: 2;
width: 30%;
max-width: 440px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-align: center;
text-shadow:
0 4px 14px rgba(0,0,0,0.55),
0 2px 4px rgba(0,0,0,0.35);
}
/* Kicker */
.n1-lunar-visual-desktop .n1-lunar-kicker{
font-size: 13px;
font-weight: 800;
letter-spacing: 5px;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 14px;
opacity: 1;
}
/* Titel */
.n1-lunar-visual-desktop .n1-visual-text h2{
display: inline-block;
font-size: 54px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 18px;
padding: 0;
color: #ffffff !important;
background: transparent;
text-shadow:
0 4px 14px rgba(0,0,0,0.55),
0 2px 4px rgba(0,0,0,0.35);
line-height: 1;
}
/* Subtekst */
.n1-lunar-visual-desktop .n1-visual-text p{
font-size: 18px;
font-weight: 400;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(255,255,255,0.96);
margin: 0 0 28px;
}
/* Button */
.n1-lunar-visual-desktop .banner-btn{
display: inline-block;
background: #ffffff;
color: #171717;
font-weight: 800;
text-transform: uppercase;
text-decoration: none;
border-radius: 12px;
padding: 15px 44px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow:
0 4px 12px rgba(0,0,0,0.22),
0 2px 4px rgba(0,0,0,0.12);
font-size: 15px;
letter-spacing: 0.6px;
transition: all 0.25s ease;
text-shadow: none !important;
}
.n1-lunar-visual-desktop .banner-btn:hover{
background: #f3f3f3;
box-shadow:
0 6px 18px rgba(0,0,0,0.24),
0 2px 4px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
/* =========================================================
Laptop
========================================================= */
@media (max-width: 1200px){
.n1-lunar-visual-desktop .n1-visual-text{
top: 25%;
right: 8%;
width: 34%;
}
.n1-lunar-visual-desktop .n1-visual-text h2{
font-size: 46px;
}
.n1-lunar-visual-desktop .n1-visual-text p{
font-size: 16px;
}
.n1-lunar-visual-desktop .banner-btn{
padding: 14px 38px;
font-size: 14px;
}
}
/* =========================================================
Grote schermen
========================================================= */
@media (min-width: 1600px){
.n1-lunar-visual-desktop .n1-visual-text{
top: 29%;
right: 13%;
width: 28%;
max-width: 480px;
}
.n1-lunar-visual-desktop .n1-visual-text h2{
font-size: 60px;
}
}
}
/* =========================================================
**WK TIJDELIJK** N1 — Special delivery note for Gloves of Nations
Products: Belgium 14935, Holland 14936
========================================================= */
.n1-special-delivery-note {
display: none;
}
body.product-14935 .n1-special-delivery-note,
body.product-14936 .n1-special-delivery-note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin: 12px 0 16px 0;
padding: 11px 12px;
border-radius: 8px;
background: #fff3e8;
border: 1px solid #ff6a00;
color: #111;
font-family: Poppins, sans-serif;
font-size: 12px;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.n1-special-delivery-note__label {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
background: #ff4b1f;
color: #fff;
font-weight: 800;
font-size: 10px;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
}
.n1-special-delivery-note__text {
font-weight: 700;
}
@media (max-width: 480px) {
body.product-14935 .n1-special-delivery-note,
body.product-14936 .n1-special-delivery-note {
gap: 10px;
padding: 10px 8px;
}
.n1-special-delivery-note__label {
font-size: 9px;
padding: 4px 7px;
}
.n1-special-delivery-note__text {
font-size: 12px;
line-height: 1.35;
}
}
/* =========================================================
NEW SEASON – 15% KORTING
========================================================= */
.n1-hero-restock-badge {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
width: 100%;
padding: 7px 10px;
box-sizing: border-box;
color: #111111;
background: #ffffff;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
/* Bovenste regel */
.n1-hero-restock-badge__main {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
line-height: 1;
}
/* Rode kortingsbadge */
.n1-hero-restock-badge__label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
color: #ffffff !important;
background: #d10000 !important;
border-radius: 3px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.3px;
line-height: 1;
white-space: nowrap;
}
/* Het woord CODE */
.n1-hero-restock-badge__code-label {
color: #111111;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
/* Zwarte kortingscode */
.n1-hero-restock-badge__code {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 7px;
color: #ffffff !important;
background: #111111;
border-radius: 3px;
font-size: 12px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
/* Kleine tekst onder de actie */
.n1-hero-restock-badge__scope {
color: #555555;
font-size: 10px;
font-weight: 500;
line-height: 1.1;
white-space: nowrap;
}
/* Mobiel */
@media screen and (max-width: 480px) {
.n1-hero-restock-badge {
gap: 3px;
padding: 7px 5px;
}
.n1-hero-restock-badge__main {
gap: 5px;
}
.n1-hero-restock-badge__label {
padding: 5px 7px;
font-size: 10px;
}
.n1-hero-restock-badge__code-label {
font-size: 11px;
}
.n1-hero-restock-badge__code {
padding: 4px 6px;
font-size: 11px;
}
.n1-hero-restock-badge__scope {
font-size: 9px;
}
}