/* input(14513,12): run-time error CSS1030: Expected identifier, found ':' input(14513,13): run-time error CSS1031: Expected selector, found 'not(' input(14513,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14514,12): run-time error CSS1030: Expected identifier, found ':' input(14514,13): run-time error CSS1031: Expected selector, found 'not(' input(14514,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14516,12): run-time error CSS1030: Expected identifier, found ':' input(14516,13): run-time error CSS1031: Expected selector, found 'not(' input(14516,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14517,12): run-time error CSS1030: Expected identifier, found ':' input(14517,13): run-time error CSS1031: Expected selector, found 'not(' input(14517,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14520,12): run-time error CSS1030: Expected identifier, found ':' input(14520,13): run-time error CSS1031: Expected selector, found 'not(' input(14520,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14528,12): run-time error CSS1030: Expected identifier, found ':' input(14528,13): run-time error CSS1031: Expected selector, found 'not(' input(14528,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14533,12): run-time error CSS1030: Expected identifier, found ':' input(14533,13): run-time error CSS1031: Expected selector, found 'not(' input(14533,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14541,12): run-time error CSS1030: Expected identifier, found ':' input(14541,13): run-time error CSS1031: Expected selector, found 'not(' input(14541,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14547,12): run-time error CSS1030: Expected identifier, found ':' input(14547,13): run-time error CSS1031: Expected selector, found 'not(' input(14547,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14559,12): run-time error CSS1030: Expected identifier, found ':' input(14559,13): run-time error CSS1031: Expected selector, found 'not(' input(14559,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14569,12): run-time error CSS1030: Expected identifier, found ':' input(14569,13): run-time error CSS1031: Expected selector, found 'not(' input(14569,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14573,12): run-time error CSS1030: Expected identifier, found ':' input(14573,13): run-time error CSS1031: Expected selector, found 'not(' input(14573,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14587,12): run-time error CSS1030: Expected identifier, found ':' input(14587,13): run-time error CSS1031: Expected selector, found 'not(' input(14587,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14594,12): run-time error CSS1030: Expected identifier, found ':' input(14594,13): run-time error CSS1031: Expected selector, found 'not(' input(14594,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14599,12): run-time error CSS1030: Expected identifier, found ':' input(14599,13): run-time error CSS1031: Expected selector, found 'not(' input(14599,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14603,12): run-time error CSS1030: Expected identifier, found ':' input(14603,13): run-time error CSS1031: Expected selector, found 'not(' input(14603,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14605,12): run-time error CSS1030: Expected identifier, found ':' input(14605,13): run-time error CSS1031: Expected selector, found 'not(' input(14605,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14608,12): run-time error CSS1030: Expected identifier, found ':' input(14608,13): run-time error CSS1031: Expected selector, found 'not(' input(14608,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14619,12): run-time error CSS1030: Expected identifier, found ':' input(14619,13): run-time error CSS1031: Expected selector, found 'not(' input(14619,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14646,12): run-time error CSS1030: Expected identifier, found ':' input(14646,13): run-time error CSS1031: Expected selector, found 'not(' input(14646,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14655,12): run-time error CSS1030: Expected identifier, found ':' input(14655,13): run-time error CSS1031: Expected selector, found 'not(' input(14655,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14657,12): run-time error CSS1030: Expected identifier, found ':' input(14657,13): run-time error CSS1031: Expected selector, found 'not(' input(14657,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14669,12): run-time error CSS1030: Expected identifier, found ':' input(14669,13): run-time error CSS1031: Expected selector, found 'not(' input(14669,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14675,12): run-time error CSS1030: Expected identifier, found ':' input(14675,13): run-time error CSS1031: Expected selector, found 'not(' input(14675,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14677,12): run-time error CSS1030: Expected identifier, found ':' input(14677,13): run-time error CSS1031: Expected selector, found 'not(' input(14677,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14684,12): run-time error CSS1030: Expected identifier, found ':' input(14684,13): run-time error CSS1031: Expected selector, found 'not(' input(14684,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14685,12): run-time error CSS1030: Expected identifier, found ':' input(14685,13): run-time error CSS1031: Expected selector, found 'not(' input(14685,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14686,12): run-time error CSS1030: Expected identifier, found ':' input(14686,13): run-time error CSS1031: Expected selector, found 'not(' input(14686,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14687,12): run-time error CSS1030: Expected identifier, found ':' input(14687,13): run-time error CSS1031: Expected selector, found 'not(' input(14687,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14689,12): run-time error CSS1030: Expected identifier, found ':' input(14689,13): run-time error CSS1031: Expected selector, found 'not(' input(14689,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14691,12): run-time error CSS1030: Expected identifier, found ':' input(14691,13): run-time error CSS1031: Expected selector, found 'not(' input(14691,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14693,12): run-time error CSS1030: Expected identifier, found ':' input(14693,13): run-time error CSS1031: Expected selector, found 'not(' input(14693,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14695,12): run-time error CSS1030: Expected identifier, found ':' input(14695,13): run-time error CSS1031: Expected selector, found 'not(' input(14695,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14699,12): run-time error CSS1030: Expected identifier, found ':' input(14699,13): run-time error CSS1031: Expected selector, found 'not(' input(14699,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14701,12): run-time error CSS1030: Expected identifier, found ':' input(14701,13): run-time error CSS1031: Expected selector, found 'not(' input(14701,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14702,12): run-time error CSS1030: Expected identifier, found ':' input(14702,13): run-time error CSS1031: Expected selector, found 'not(' input(14702,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14703,12): run-time error CSS1030: Expected identifier, found ':' input(14703,13): run-time error CSS1031: Expected selector, found 'not(' input(14703,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14704,12): run-time error CSS1030: Expected identifier, found ':' input(14704,13): run-time error CSS1031: Expected selector, found 'not(' input(14704,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14705,12): run-time error CSS1030: Expected identifier, found ':' input(14705,13): run-time error CSS1031: Expected selector, found 'not(' input(14705,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14706,12): run-time error CSS1030: Expected identifier, found ':' input(14706,13): run-time error CSS1031: Expected selector, found 'not(' input(14706,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14707,12): run-time error CSS1030: Expected identifier, found ':' input(14707,13): run-time error CSS1031: Expected selector, found 'not(' input(14707,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14708,12): run-time error CSS1030: Expected identifier, found ':' input(14708,13): run-time error CSS1031: Expected selector, found 'not(' input(14708,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14711,12): run-time error CSS1030: Expected identifier, found ':' input(14711,13): run-time error CSS1031: Expected selector, found 'not(' input(14711,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14714,12): run-time error CSS1030: Expected identifier, found ':' input(14714,13): run-time error CSS1031: Expected selector, found 'not(' input(14714,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14718,12): run-time error CSS1030: Expected identifier, found ':' input(14718,13): run-time error CSS1031: Expected selector, found 'not(' input(14718,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14719,12): run-time error CSS1030: Expected identifier, found ':' input(14719,13): run-time error CSS1031: Expected selector, found 'not(' input(14719,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14720,12): run-time error CSS1030: Expected identifier, found ':' input(14720,13): run-time error CSS1031: Expected selector, found 'not(' input(14720,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14721,12): run-time error CSS1030: Expected identifier, found ':' input(14721,13): run-time error CSS1031: Expected selector, found 'not(' input(14721,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14722,12): run-time error CSS1030: Expected identifier, found ':' input(14722,13): run-time error CSS1031: Expected selector, found 'not(' input(14722,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14724,12): run-time error CSS1030: Expected identifier, found ':' input(14724,13): run-time error CSS1031: Expected selector, found 'not(' input(14724,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14725,12): run-time error CSS1030: Expected identifier, found ':' input(14725,13): run-time error CSS1031: Expected selector, found 'not(' input(14725,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14726,12): run-time error CSS1030: Expected identifier, found ':' input(14726,13): run-time error CSS1031: Expected selector, found 'not(' input(14726,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14747,12): run-time error CSS1030: Expected identifier, found ':' input(14747,13): run-time error CSS1031: Expected selector, found 'not(' input(14747,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14748,12): run-time error CSS1030: Expected identifier, found ':' input(14748,13): run-time error CSS1031: Expected selector, found 'not(' input(14748,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14749,12): run-time error CSS1030: Expected identifier, found ':' input(14749,13): run-time error CSS1031: Expected selector, found 'not(' input(14749,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14750,12): run-time error CSS1030: Expected identifier, found ':' input(14750,13): run-time error CSS1031: Expected selector, found 'not(' input(14750,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14756,12): run-time error CSS1030: Expected identifier, found ':' input(14756,13): run-time error CSS1031: Expected selector, found 'not(' input(14756,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14765,12): run-time error CSS1030: Expected identifier, found ':' input(14765,13): run-time error CSS1031: Expected selector, found 'not(' input(14765,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14771,12): run-time error CSS1030: Expected identifier, found ':' input(14771,13): run-time error CSS1031: Expected selector, found 'not(' input(14771,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14773,12): run-time error CSS1030: Expected identifier, found ':' input(14773,13): run-time error CSS1031: Expected selector, found 'not(' input(14773,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14775,12): run-time error CSS1030: Expected identifier, found ':' input(14775,13): run-time error CSS1031: Expected selector, found 'not(' input(14775,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14779,12): run-time error CSS1030: Expected identifier, found ':' input(14779,13): run-time error CSS1031: Expected selector, found 'not(' input(14779,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14781,12): run-time error CSS1030: Expected identifier, found ':' input(14781,13): run-time error CSS1031: Expected selector, found 'not(' input(14781,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14784,12): run-time error CSS1030: Expected identifier, found ':' input(14784,13): run-time error CSS1031: Expected selector, found 'not(' input(14784,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14788,12): run-time error CSS1030: Expected identifier, found ':' input(14788,13): run-time error CSS1031: Expected selector, found 'not(' input(14788,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14789,12): run-time error CSS1030: Expected identifier, found ':' input(14789,13): run-time error CSS1031: Expected selector, found 'not(' input(14789,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14790,12): run-time error CSS1030: Expected identifier, found ':' input(14790,13): run-time error CSS1031: Expected selector, found 'not(' input(14790,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14793,12): run-time error CSS1030: Expected identifier, found ':' input(14793,13): run-time error CSS1031: Expected selector, found 'not(' input(14793,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(14795,12): run-time error CSS1030: Expected identifier, found ':' input(14795,13): run-time error CSS1031: Expected selector, found 'not(' input(14795,13): run-time error CSS1025: Expected comma or open brace, found 'not(' input(15163,29): run-time error CSS1030: Expected identifier, found '.' input(15163,37): run-time error CSS1025: Expected comma or open brace, found ')' input(15329,28): run-time error CSS1030: Expected identifier, found '.' input(15329,42): run-time error CSS1025: Expected comma or open brace, found ')' */ /*! perfect-scrollbar - v0.5.8 * http://noraesae.github.com/perfect-scrollbar/ * Copyright (c) 2014 Hyunje Alex Jun; Licensed MIT */ .ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:8px}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;-ms-filter:"alpha(Opacity=60)";filter:alpha(opacity=60)}.ps-container:hover>.ps-scrollbar-x-rail.in-scrolling,.ps-container:hover>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999} /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @-webkit-keyframes shake { 10%, 90% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 20%, 80% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } 30%, 50%, 70% { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } 40%, 60% { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } } @-moz-keyframes shake { 10%, 90% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 20%, 80% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } 30%, 50%, 70% { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } 40%, 60% { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } } @keyframes shake { 10%, 90% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 20%, 80% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } 30%, 50%, 70% { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } 40%, 60% { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } } @-webkit-keyframes swiping { 30%, 70% { -webkit-transform: rotate(-70deg); -ms-transform: rotate(-70deg); transform: rotate(-70deg); } 60%, 100% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } } @-moz-keyframes swiping { 30%, 70% { -webkit-transform: rotate(-70deg); -ms-transform: rotate(-70deg); transform: rotate(-70deg); } 60%, 100% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } } @keyframes swiping { 30%, 70% { -webkit-transform: rotate(-70deg); -ms-transform: rotate(-70deg); transform: rotate(-70deg); } 60%, 100% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } } @-webkit-keyframes widthplay { 30% { width: 55%; opacity: .2; } 65% { width: 50%; opacity: .6; } 100% { width: 100%; opacity: .4; } } @-moz-keyframes widthplay { 30% { width: 55%; opacity: .2; } 65% { width: 50%; opacity: .6; } 100% { width: 100%; opacity: .4; } } @keyframes widthplay { 30% { width: 55%; opacity: .2; } 65% { width: 50%; opacity: .6; } 100% { width: 100%; opacity: .4; } } @-webkit-keyframes updating { 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes updating { 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes updating { 100% { -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes emailing { 0% { -webkit-transform: scale(.2); -ms-transform: scale(.2); transform: scale(.2); opacity: 0; } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @-moz-keyframes emailing { 0% { -webkit-transform: scale(.2); -ms-transform: scale(.2); transform: scale(.2); opacity: 0; } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes emailing { 0% { -webkit-transform: scale(.2); -ms-transform: scale(.2); transform: scale(.2); opacity: 0; } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes stars { 0% { -webkit-transform: scale(.8) rotate(-15deg); -ms-transform: scale(.8) rotate(-15deg); transform: scale(.8) rotate(-15deg); } 25% { -webkit-transform: scale(.8) rotate(15deg); -ms-transform: scale(.8) rotate(15deg); transform: scale(.8) rotate(15deg); } 40% { -webkit-transform: scale(1.2) rotate(0deg); -ms-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-moz-keyframes stars { 0% { -webkit-transform: scale(.8) rotate(-15deg); -ms-transform: scale(.8) rotate(-15deg); transform: scale(.8) rotate(-15deg); } 25% { -webkit-transform: scale(.8) rotate(15deg); -ms-transform: scale(.8) rotate(15deg); transform: scale(.8) rotate(15deg); } 40% { -webkit-transform: scale(1.2) rotate(0deg); -ms-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes stars { 0% { -webkit-transform: scale(.8) rotate(-15deg); -ms-transform: scale(.8) rotate(-15deg); transform: scale(.8) rotate(-15deg); } 25% { -webkit-transform: scale(.8) rotate(15deg); -ms-transform: scale(.8) rotate(15deg); transform: scale(.8) rotate(15deg); } 40% { -webkit-transform: scale(1.2) rotate(0deg); -ms-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg); } 100% { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @-webkit-keyframes loader { 0% { border-width: 3px; } 15% { opacity: 1; } 100% { border-width: 3px; opacity: 0; width: 50px; height: 50px; } } @-moz-keyframes loader { 0% { border-width: 3px; } 15% { opacity: 1; } 100% { border-width: 3px; opacity: 0; width: 50px; height: 50px; } } @keyframes loader { 0% { border-width: 3px; } 15% { opacity: 1; } 100% { border-width: 3px; opacity: 0; width: 50px; height: 50px; } } /*********** CSS RESET **********/ * { margin: 0; outline: none; padding: 0; text-decoration: none; box-sizing: border-box; } *:before, *:after { font-family: "emporium-icons"; box-sizing: border-box; } html { margin: 0 !important; -webkit-text-size-adjust: none; } ol, ul { list-style: none; } a img { border: none; } a:active { outline: none; } button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { margin: 0; border: 0; padding: 0; } input[type="button"], input[type="submit"], input[type="reset"], input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input::-moz-placeholder { opacity: 1; } input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px #fff; } script { display: none !important; } /*********** GLOBAL STYLES **********/ @font-face { font-family: 'emporium-icons'; src: local('Open Sans,Arial,Helvetica,Verdana,sans-serif'), url('../Themes/Emporium/Content/icons/emporium-icons.woff') format('woff'), url('../Themes/Emporium/Content/icons/emporium-icons.svg#emporium-icons') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } body { max-width: 100%; overflow-x: hidden; /* responsive navigation & filters scroll bug fix*/ background-color: #fff; font: normal 12px Open Sans,Arial,Helvetica,Verdana,sans-serif; color: #111; } table { width: 100%; border-collapse: collapse; } p { line-height: 20px; } a { color: inherit; cursor: pointer; } img { max-width: 100%; } a img { opacity: 0.99; /*firefox scale bug fix*/ } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select { height: 45px; border: 1px solid #e7e7e7; border-radius: 3px; padding: 0 20px; vertical-align: middle; font-size: 15px; color: #8c8c8c; font-family: Open Sans,Arial,Helvetica,Verdana,sans-serif; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { /* Chrome/Opera/Safari */ color: #8c8c8c !important; } input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #8c8c8c; } input[type="text"]::-moz-input-placeholder, input[type="password"]::-moz-input-placeholder, input[type="email"]::-moz-input-placeholder, input[type="tel"]::-moz-input-placeholder, textarea::-moz-input-placeholder { /* Firefox 19+ */ color: #8c8c8c; } input[type="text"]::-ms-input-placeholder, input[type="password"]::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="tel"]::-ms-input-placeholder, textarea::-ms-input-placeholder { /* IE 10+ */ color: #8c8c8c; } input[type="text"]::input-placeholder, input[type="password"]::input-placeholder, input[type="email"]::input-placeholder, input[type="tel"]::input-placeholder, textarea::input-placeholder { /* Firefox 18- */ color: #8c8c8c; } textarea { min-height: 150px; padding: 15px 20px; } select { min-width: 50px; padding: 0 6px; cursor: pointer; } select::-ms-expand { display: none; } input[type="checkbox"], input[type="radio"] { position: absolute; left: -9999px; } input[type="checkbox"], input[type="radio"], input[type="checkbox"] + *, input[type="radio"] + * { vertical-align: middle; } input[type="radio"] + label, input[type="checkbox"] + label { font-weight: 300; color: #8c8c8c; user-select: none; cursor: pointer; } input[type="radio"] + label:before, input[type="checkbox"] + label:before { content: ""; display: inline-block; margin-right: 10px; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #e7e7e7; vertical-align: text-top; background-color: #fff; } input[type="checkbox"] + label:before { border-radius: 0; } input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before { margin-left: 1px; margin-top: 1px; width: 16px; height: 16px; box-shadow: 0 0 0 1px #e7e7e7; border: 3px solid #fff; background-color: #97c300; } input[type="button"], input[type="submit"], button { cursor: pointer; } label, label + * { vertical-align: middle; } .product-grid, .category-grid, .topic-block, .news-list-homepage { position: relative; z-index: 0; /* giving priority to header and header-menu */ margin: 0 auto 50px; } .product-grid:last-child, .category-grid:last-child, .topic-block:last-child, .news-list-homepage:last-child { margin-bottom: 0; } .master-wrapper-content { overflow: hidden; padding: 40px 10px 80px; } .master-wrapper-content select, .k-window select { height: 45px; width: auto; max-width: 100%; padding: 0 35px 0 20px; border: 1px solid #e7e7e7; border-radius: 3px; background: #fff url('../Themes/Emporium/Content/img/select-arrow-dark.svg') no-repeat right 15px center; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .master-wrapper-content select::ms-expand, .k-window select::ms-expand { display: none; } .master-column-wrapper:after { content: ""; display: block; clear: both; } .center-2 .product-grid, .center-2 .category-grid, .center-2 .topic-block { width: 100%; } .center-2, .side-2 { margin: 0 0 50px; } .side-2:last-child { margin-bottom: 0; } .page { min-height: 200px; text-align: center; } .manufacturer-page .manufacturer-description { text-align: left; } .category-page .category-description { text-align: left; } .page-title { padding: 0 10px; margin: 0 0 5px; text-align: center; } .page-title h1 { font-size: 26px; color: #444444; } .page:after, .page-title:after, .page-body:after { content: ""; display: block; clear: both; } .buttons { text-align: center; } .link-rss { display: none; width: 24px; height: 24px; font-size: 0 !important; } .link-rss:before { content: "\73"; display: block; font-size: 24px; color: #8c8c8c; text-transform: none; font-weight: normal; transition: color .2s ease; } .link-rss:hover:before { color: #97c300; } .category-description ul, .manufacturer-description ul, .full-description ul, .topic-html-content ul, .topic-page ul, .custom-tab ul { margin: 12px 0; padding: 0 0 0 36px; list-style: disc; text-align: left; font-size: 15px; color: #8c8c8c; font-weight: 400; } .post-body ul { margin: 12px 0; padding: 0 0 0 20px; list-style: disc; text-align: left; font-size: 16px; color: #111111; font-weight: 400; } .category-description ol, .manufacturer-description ol, .full-description ol, .topic-html-content ol, .post-body ol, .custom-tab ol { margin: 12px 0; padding: 0 0 0 36px; list-style: decimal; text-align: left; font-size: 15px; color: #8c8c8c; font-weight: 400; } .topic-page ol { margin: 12px 0; padding: 0 0 0 36px; list-style: decimal; text-align: left; font-size: 15px; color: #111111; font-weight: 400; } .category-description p, .manufacturer-description, .vendor-description, .manufacturer-description p, .vendor-description p, .full-description p, .topic-html-content p, .topic-page p, .news-body p, .custom-tab p, .ui-dialog-content p { margin: 10px 0; line-height: 1.4; font-size: 14px; color: #8c8c8c; font-weight: 400; } .post-body p { margin: 10px 0 20px 0; line-height: 1.5; font-size: 15px; color: #111111; font-weight: 400; } /*********** GLOBAL FORMS ***********/ .fieldset, .section { position: relative; margin: 0 0 20px; } .fieldset .title, .section .title { margin: 0 0 10px; } .fieldset .title strong, .section .title strong { font-weight: 300; font-size: 16px; color: #444; } .form-fields { position: relative; font-size: 14px; line-height: 1.5; color: #444; } .form-fields > a { color: #8c8c8c; text-decoration: underline; } .inputs { position: relative; margin: 20px 0 0; text-align: center; white-space: nowrap; /*fix for 'required' elements*/ font-size: 0; } .inputs:first-child { margin-top: 0; } .inputs:after { content: ""; display: block; clear: both; } .inputs > label { display: inline-block; max-width: calc(100% - 10px); width: auto; font-size: 14px; margin: 0 0 8px; font-weight: bold; color: #444444; text-align: left; white-space: normal; } .inputs > .required { position: absolute; top: 0; right: 0; } .inputs > * { float: left; clear: both; } .inputs.reversed > * { float: none; } .inputs input[type="text"], .inputs input[type="password"], .inputs input[type="email"], .inputs input[type="tel"], .inputs select, .inputs textarea { height: 45px; color: #8c8c8c; border-radius: 3px; width: 100%; vertical-align: middle; } .inputs select:only-of-type { width: 100%; } .inputs .option-list { display: inline-block; vertical-align: middle; white-space: normal; } .inputs .option-list li { float: left; margin: 0 10px 15px 0; } .inputs .option-list label { display: inline; width: auto; margin: 0 3px; } .login-form-in-header .inputs.reversed { text-align: center; } .required { margin: 0 0 0 5px; /*siblings offset*/ font-size: 15px; color: #444; font-weight: 700; } .message-error, .field-validation-error, .field-validation-error *, .username-not-available-status, .poll-vote-error, .password-error { display: block; margin: 2px 0 0; font-size: 13px; color: #ff4f60; font-weight: 700; text-align: left; white-space: normal; } .page-body > .message-error, .enter-address > .message-error, .payment-info form > .message-error { line-height: 1.5; margin-bottom: 15px; } .input-validation-error { border-bottom: 2px solid #ff4f60 !important; } .field-validation-valid, .username-available-status { display: block; line-height: 17px; font-size: 13px; color: #97c300; font-weight: 700; } .captcha-box { margin: 25px 0 0; text-align: center; line-height: 0; /*firefox line-height bug fix*/ } .captcha-box > div { display: inline-block; } .captcha-box input { height: auto; } /*********** GLOBAL TABLES ***********/ .table-wrapper { overflow-x: auto; } .cart, .data-table, .compare-products-table, .forums-table-section table { margin: 0 0 20px; border-collapse: initial; border-spacing: 0px; } .cart th, .data-table th, .forums-table-section th { border-top: 1px solid #eee; background-color: #f9f9f9; padding: 20px; white-space: nowrap; font-size: 17px; color: #959595; font-weight: 300; } .cart td, .data-table td, .forums-table-section td { min-width: 50px; border-bottom: 1px solid #eee; background-color: #fff; padding: 20px; font-size: 15px; color: #444; font-weight: 400; } td.product-picture { font-size: 0 !important; } td.product-picture a { display: inline-block; width: 80px; } .data-table td { font-size: 17px; } .cart th:first-child, .data-table th:first-child, .forums-table-section th:first-child, .cart td:first-child, .data-table td:first-child, .forums-table-section td:first-child { border-left: 1px solid #eee; } .cart th:last-child, .data-table th:last-child, .forums-table-section th:last-child, .cart td:last-child, .data-table td:last-child, .forums-table-section td:last-child { border-right: 1px solid #eee; } .cart tr:first-child th:first-child, .data-table tr:first-child th:first-child, .forums-table-section table tr:first-child th:first-child { border-top-left-radius: 3px; } .cart tr:first-child th:last-child, .data-table tr:first-child th:last-child, .forums-table-section table tr:first-child th:last-child { border-top-right-radius: 3px; } .cart tr:last-child td:first-child, .data-table tr:last-child td:first-child, .forums-table-section table tr:last-child td:first-child { border-bottom-left-radius: 3px; } .cart tr:last-child td:last-child, .data-table tr:last-child td:last-child, .forums-table-section table tr:last-child td:last-child { border-bottom-right-radius: 3px; } td .attributes { padding: 20px 0; margin: 0; } .cart a, .data-table a, .compare-products-table a, .forums-table-section a { color: #97c300; } .cart .product a, .data-table .product a, .compare-products-table .product a, .forums-table-section .product a { color: #444; transition: all .2s ease; } .cart .product a:hover, .data-table .product a:hover, .compare-products-table .product a:hover, .forums-table-section .product a:hover { color: #97c300; } .cart .edit-item a, .data-table .edit-item a, .compare-products-table .edit-item a, .forums-table-section .edit-item a { color: #97c300; font-size: 13px; text-transform: uppercase; font-weight: 700; } .cart .attributes, .data-table .attributes, .compare-products-table .attributes, .forums-table-section table .attributes { font-size: 15px; color: #8c8c8c; max-width: none; } .cart td.date, .data-table td.date, .compare-products-table td.date, .forums-table-section td.date { white-space: nowrap; } td.product-picture { font-size: 0; } .select, .select-boxes { position: relative; overflow: hidden; } .select input[type="checkbox"], .select-boxes input[type="checkbox"] { position: absolute; left: -9999px; } .select label, .select-boxes label { display: block !important; width: 17px; height: 17px; border-radius: 0; border: 1px solid #eeeeee; vertical-align: text-top; background-color: #fff; cursor: pointer; } .select input[type="checkbox"]:checked + label, .select-boxes input[type="checkbox"]:checked + label { margin-left: 1px; margin-top: 1px; width: 16px; height: 16px; box-shadow: 0 0 0 1px #e7e7e7; border: 3px solid #fff; background-color: #97c300; } .select label:before, .select-boxes label:before { content: none !important; display: none !important; } .cart .product, .data-table .product, .data-table .message, .data-table .info, .data-table .name, .forum-table .forum-details, .forum-table .topic-details { text-align: left; } .cart .remove-from-cart, .cart .add-to-cart, .data-table .select-boxes, .data-table .order { text-align: center; } .cart .unit-price { white-space: nowrap; } .cart .qty-input, .cart .qty-dropdown { margin: -5px 0; padding: 0 7px; width: 40px; height: 40px; font-size: 14px; color: #444; text-align: center; background-position: right 10px center } .cart .qty-dropdown { text-align: left; padding: 0 20px 0 5px; } .cart .subtotal span { display: inline-block; color: #444; white-space: nowrap; font-weight: 700; } .cart .subtotal .discount, .cart .discount-additional-info { white-space: nowrap; font-size: 12px; } .cart .remove-from-cart { position: relative; } .cart .remove-from-cart button { /*position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;*/ width: 24px; height: 24px; border: none; background: none; transition: 0.2s ease; } .cart .remove-from-cart button:after { content: "\7a"; display: block; font-size: 18px; color: #444; } .cart .remove-from-cart button:hover { transform: rotate(-90deg); } .td-title { font-weight: 300; color: #8c8c8c; } .td-title + span { display: inline-block; vertical-align: middle; } .button-1 { border: none; height: 45px; padding: 10px 25px; border-radius: 3px; background-color: #eebe00; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 14px; transition: all .2s ease; } .button-1:hover { background-color: #e8af00; } /*********** NOTIFICATIONS & POPUPS ***********/ .bar-notification { display: none; position: fixed; bottom: 0; left: 0; z-index: 1040; width: 100%; padding: 20px 6%; min-height: 60px; color: #fff; overflow: hidden; } .bar-notification.success { background-color: rgba(151,195,0,.8); } .bar-notification.warning { background-color: rgba(255,79,96,.8); } .bar-notification.error { background-color: rgba(255,79,96,.8); } .bar-notification .content { float: left; max-width: calc(100% - 50px); font-size: 15px; color: #fff; font-weight: 700; margin: 0 10px 0 0; } .bar-notification .content a { color: #fff; text-decoration: underline; } .bar-notification .close { float: right; cursor: pointer; opacity: 0.7; font-size: 0; } .bar-notification .close:before { content: "\7a"; display: block; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 20px; color: #fff; text-transform: none; font-weight: normal; } .bar-notification .close:hover { opacity: 1; } .noscript { background-color: #ff9; padding: 10px; text-align: center; } .ajax-loading-block-window { position: fixed; top: 0; left: 0; z-index: 1030; width: 100% !important; height: 100% !important; background-color: rgba(255,255,255,.7); } .ajax-loading-block-window:before, .ajax-loading-block-window:after { content: ""; position: fixed; display: inline-block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; height: 0; border: 0px solid #97c300; border-radius: 50%; -webkit-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; -moz-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; } .ajax-loading-block-window:after { animation-delay: .8s; } .ui-dialog { position: absolute !important; left: 50% !important; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding-bottom: 30px; width: 600px !important; max-width: 95%; box-shadow: 0 0 20px rgba(0,0,0,.15); background-color: #fff; z-index: 1050; } .ui-dialog-titlebar { display: block; padding: 25px 0; margin: 0 auto; width: calc(100% - 100px); font-size: 22px; text-transform: none; font-weight: 700; color: #444; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ui-dialog-titlebar .ui-dialog-title { font-size: 22px; font-weight: 700; color: #444; } .ui-dialog-titlebar button { position: absolute; top: 25px; right: 25px; border: none; background: transparent; overflow: hidden; font-size: 0; text-align: center; opacity: 0.5; } .ui-dialog-titlebar button:before { content: "\7a"; text-transform: none; font-weight: normal; font-size: 20px; line-height: 24px; } .ui-dialog-titlebar button:hover { opacity: 0.9; } .ui-dialog-content { padding: 0 30px; height: auto !important; overflow: auto; } .ui-dialog-content .page { min-height: 0; text-align: left; } .ui-dialog-content .page-title { margin: 0 0 12px; padding: 0; } .ui-dialog-content .page-title h1 { font-size: 15px; text-transform: uppercase; color: #8c8c8c; } .ui-dialog-content .tooltip { margin: 5px 0; line-height: 20px; } .ui-dialog-content button { margin-top: 20px; } .eu-cookie-bar-notification { position: fixed; top: 50%; left: 50%; z-index: 1050; width: 90%; max-width: 600px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 3px; box-shadow: 0 0 20px rgba(0,0,0,0.2); background-color: #fff; padding: 20px; text-align: center; } .eu-cookie-bar-notification .text { margin-bottom: 20px; line-height: 1.5; font-size: 15px; color: #8c8c8c; } .eu-cookie-bar-notification button { height: 45px; margin: 10px 0 20px; border: none; background-color: #eebe00; border-radius: 3px; padding: 0 25px; font-size: 14px; color: #fff; font-weight: 700; text-transform: uppercase; transition: all .1s ease; } .eu-cookie-bar-notification button:hover { background-color: #e8af00; } .eu-cookie-bar-notification a { display: block; font-size: 13px; color: #8c8c8c; font-weight: 700; text-transform: uppercase; } .scroll-back-button { display: none !important; position: fixed; bottom: 20px; right: 6vw; width: 50px; height: 50px; border: 1px solid #97c300; border-radius: 3px; text-align: center; background: rgba(255,255,255,.6); cursor: pointer; } .scroll-back-button:before { content: '\77'; display: inline-block; position: absolute; color: #97c300; font-size: 14px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(180deg); -ms-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } /*********** HEADER ***********/ .admin-header-links { background-color: #333; text-align: center; color: #fff; } .admin-header-links .impersonate { display: inline-block; } .admin-header-links a, .admin-header-links span { display: inline-block; margin: 0 10px; line-height: 35px; font-weight: bold; } .header { margin: 0 auto; text-align: center; } .header:after { content: ""; display: block; clear: both; } .header-logo a { display: inline-block; max-width: 100%; line-height: 0; /*firefox line-height bug fix*/ } .header-logo a img { max-width: 100%; max-height: 45px; } .header-links-wrapper { position: relative; margin: 0 0 20px; } .personal-button { position: relative; } .profile-menu-box { position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-top: 25px; width: 150px; padding: 10px 0; border-radius: 3px; background: #fff; font-size: 13px; opacity: 0; visibility: hidden; text-align: left; pointer-events: none; box-shadow: 0 0 20px rgba(0,0,0,.16); z-index: 1020; transition: all .2s ease; } .profile-menu-box:after { content: " "; bottom: 100%; left: 50%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 8px; margin-left: -8px; } .profile-menu-box.open { margin-top: 8px; opacity: 1; visibility: visible; pointer-events: auto; } .profile-menu-box > a, .header-form-holder > a { display: block !important; padding: 10px 17px; color: #444444; } .profile-menu-box span:before, .profile-menu-box a:before { display: inline-block !important; color: #8e8e8e; font-size: 17px; vertical-align: middle; margin-right: 10px; min-width: 20px; font-weight: normal; text-transform: none; } .close-side-menu { display: none; } /*********** FLYOUT CART MOBILE ***********/ a.ico-cart { display: inline-block; font-size: 13px; color: #8c8c8c; transition: color .2s ease; } a.ico-cart:before { display: block; margin-bottom: 4px; font-size: 26px; color: #8e8e8e; transition: color .2s ease; } .mini-shopping-cart .close-side-menu { display: none; } .mini-shopping-cart .flyout-cart-scroll-area { position: relative; width: 100%; padding: 20px 0 0; background-color: #fff; } .flyout-lower { background-color: #f6f6f6; border-radius: 0 0 3px 3px; } .mini-shopping-cart:after { content: ""; display: block; clear: both; } .mini-shopping-cart .count { float: left; padding: 20px 0 20px 15px; } .mini-shopping-cart .count a { font-size: 14px; color: #8c8c8c; } .mini-shopping-cart .count a:hover { color: #97c300; text-decoration: none; } .mini-shopping-cart .count a:before { content: "\64"; display: inline-block; vertical-align: bottom; margin: 0 5px 0 0; font-size: 20px; } .flyout-cart-scroll-area > p { padding: 0 20px 20px; font-size: 14px; color: #8c8c8c; text-align: center; } .flyout-cart .items { position: relative; padding: 0 10px; margin-bottom: 15px; border-radius: 3px 3px 0 0; background: #fff; text-align: left; overflow: hidden; } .mini-shopping-cart .item { overflow: hidden; margin: 15px 0 0; } .mini-shopping-cart .item.first { margin-top: 0; } .mini-shopping-cart .picture { float: left; width: 78px; height: auto; border: 1px solid #eee; border-radius: 3px; text-align: center; overflow: hidden; font-size: 0; } .mini-shopping-cart .picture a { display: block; position: relative; overflow: hidden; } .mini-shopping-cart .picture a:before { content: ""; display: block; padding-top: 100%; margin: 0; } .mini-shopping-cart .picture img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; } .mini-shopping-cart .product { position: relative; margin: 0 30px 0 90px; text-align: left; } .mini-shopping-cart .product:after { content: ""; display: block; clear: both; } .mini-shopping-cart .product .remove-item { position: absolute; top: 0; right: -30px; left: auto; font-size: 0; width: 18px; height: 18px; text-align: center; border-radius: 2px; background-color: #f1f1f1; text-decoration: none; transition: all .1s ease; } .mini-shopping-cart .product .remove-item:after { content: "\7a"; display: block; font-size: 8px; line-height: 18px; color: #8e8e8e; transition: all .1s ease; } .mini-shopping-cart .product .remove-item:hover { background-color: #e9e9e9; text-decoration: none; } .mini-shopping-cart .product .remove-item:hover::after { text-decoration: none; } .mini-shopping-cart .name a { display: block; margin: 0 0 5px; font-size: 14px; color: #444444; } .mini-shopping-cart .attributes { padding: 0; margin: 0 0 5px; font-size: 14px; color: #8c8c8c; } .mini-shopping-cart .right { display: inline-block; } .mini-shopping-cart .quantity { margin: 0 4px 0 0; font-size: 0; color: #8c8c8c; float: left; } .mini-shopping-cart .quantity span { font-weight: bold; font-size: 16px; } .mini-shopping-cart .quantity:after { content: "x"; display: inline-block; margin-left: 3px; font-size: 16px; font-weight: 700; color: #8c8c8c; text-transform: none; font-family: Open Sans,Arial,Helvetica,Verdana,sans-serif; } .mini-shopping-cart .price { font-size: 16px; font-weight: bold; color: #97c300; float: right; } .mini-shopping-cart .totals { float: right; padding: 20px 15px 20px 0; font-size: 15px; text-align: right; color: #8c8c8c; } .mini-shopping-cart .totals strong { color: #97c300; font-size: 18px; } .mini-shopping-cart .buttons { padding: 0 15px 15px; margin-bottom: 0; text-align: right; clear: both; } .mini-shopping-cart .buttons button { display: inline-block; width: 100%; padding: 0 15px; } .mini-shopping-cart button + button { margin-top: 10px; background-color: #ddd; color: #8c8c8c; } .mini-shopping-cart .buttons button:hover { background-color: #e8af00; } .mini-shopping-cart button + button:hover { background-color: #d1d1d1 !important; } /******** LOGIN FORM IN HEADER ********/ .profile-menu-box.login-form-in-header { padding: 20px 0 0; width: 255px; } .login-form-in-header .fieldset { margin: 0; } .login-form-in-header .returning-wrapper .form-fields { padding: 0; min-height: 0; } .login-form-in-header .form-fields { font-size: 0; } .login-form-in-header .external-authentication > * { padding: 20px; background-color: #f6f6f6; border-radius: 0 0 3px 3px; } .login-form-in-header form { padding: 0 20px; } .login-form-in-header .external-authentication { margin: 0; } .login-form-in-header .in-header-register { text-align: center; } .login-form-in-header .in-header-register .register-button { display: inline-block; background-color: transparent; border: none; padding: 15px 0 15px 20px; font-size: 12px; text-transform: uppercase; color: #8c8c8c; font-weight: bold; background: url('../Themes/Emporium/Content/img/register-icon.png') left center no-repeat; transition: all .2s ease; } .login-form-in-header .in-header-register .register-button:hover { color: #97c300; } .login-form-in-header .title { display: none; } .login-form-in-header .inputs { margin: 6px 0 0; } .login-form-in-header .inputs:first-child { margin-top: 0; } .login-form-in-header .inputs label { display: none; } .login-form-in-header .forgot-password { width: 100%; } .login-form-in-header .inputs.reversed { margin: 0 0 15px; } .login-form-in-header .inputs.reversed label { display: inline-block; width: auto; margin: 0; font-size: 12px; line-height: 17px; height: 17px; color: #8c8c8c; text-align: left; cursor: pointer; user-select: none; } .login-form-in-header .inputs.reversed label:before { vertical-align: text-bottom; } .inputs.reversed input[type="checkbox"] { position: absolute; left: -9999px; } .inputs.reversed input[type="checkbox"] + label { cursor: pointer; } .login-form-in-header .inputs input[type="text"], .login-form-in-header .inputs input[type="email"], .login-form-in-header .inputs input[type="password"] { height: 45px; padding: 0 35px 0 15px; line-height: 45px; border-radius: 3px; } .login-form-in-header .inputs input:focus + .inputs-icons { color: #97c300; } input + .inputs-icons { position: absolute; top: 0; right: 15px; left: auto; } .inputs-icons { display: none; font-size: 15px; color: #8e8e8e; line-height: 45px; font-family: "emporium-icons"; } .button-1.checkout-as-guest-button { margin: 0 10px 10px 0; background-color: #f1f1f1; color: #8c8c8c; } .button-1.checkout-as-guest-button:hover { background-color: #eaeaea; } .login-form-in-header .inputs-icons { display: inline-block; text-transform: lowercase; } .login-form-in-header .login-button { display: block; width: 100%; border: none; height: 45px; border-radius: 3px; background-color: #eebe00; color: #fff; font-size: 13px; font-weight: bold; text-transform: uppercase; } .login-form-in-header .login-button:hover { background-color: #e8af00; } .login-form-in-header a.facebook-btn { display: block; width: 100%; height: 35px; border-radius: 3px; line-height: 35px; background-color: #3270ab; color: #fff !important; font-size: 13px; text-transform: uppercase; text-align: center; background-image: none !important; } .login-form-in-header a.facebook-btn:hover { background-color: #4065a3; } .login-form-in-header a.facebook-btn:before { content: "\6e"; display: inline-block; margin-right: 10px; font-size: 17px; color: #fff !important; text-transform: none; } .login-form-in-header a.facebook-btn:after { content: "log in with facebook"; display: inline-block; font-family: Open Sans,Arial,Helvetica,Verdana,sans-serif; } .login-form-in-header .forgot-password { display: block; margin-bottom: 15px; } .login-form-in-header .forgot-password a { display: block; width: 100%; background-color: #f6f6f6; padding: 5px 10px; font-size: 11px; color: #8c8c8c; font-weight: 700; text-align: center; text-transform: uppercase; } /******** END OF LOGIN FORM IN HEADER ********/ .header-links ul { display: inline-block; font-size: 0; } .ico-wishlist:before { content: "\63"; } .ico-cart:before { content: "\64"; } .personal-button > span:before, .ico-account:before { content: "\61"; } .profile-menu-box .ico-inbox { font-size: 0; } .ico-inbox span { font-size: 14px; vertical-align: middle; } .ico-inbox:before { content: "\41"; } .ico-compare:before { content: "\62"; } .ico-logout:before { content: "\42"; } .ico-login:before { content: "\78"; } .ico-register:before { content: "\79"; } .search-box { position: relative; } .search-box form { position: relative; } .search-box form:after { content: ""; display: block; clear: both; } .search-box input.search-box-text { float: left; height: 45px; border: 1px solid #eeeeee; border-right: 0; font-size: 14px; color: #959595; border-radius: 3px 0 0 3px; } .search-box input.search-box-text::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #959595; } .search-box input.search-box-text::-moz-placeholder { /* Firefox 19+ */ color: #959595; } .search-box input.search-box-text:-ms-input-placeholder { /* IE 10+ */ color: #959595; } .search-box input.search-box-text:-moz-placeholder { /* Firefox 18- */ color: #959595; } .search-box .search-box-button { float: left; width: 45px; height: 45px; padding: 0; border: none; background: #ccc url('../Themes/Emporium/Content/img/search-button.png') center no-repeat; font-size: 0; border: 1px solid #eeeeee; border-left: 0; border-radius: 0 3px 3px 0; } .search-box .search-box-button:hover { background-color: #e8af00; } .ui-helper-hidden-accessible { display: none; } .ui-autocomplete { position: absolute; padding: 5px 0; max-width: 100%; border-radius: 0 0 3px 3px; overflow: hidden; background-color: #fff; box-shadow: 0 0 13px rgba(0,0,0,.1); z-index: 1070; } .ui-autocomplete li:first-child { border-top: none; } .ui-autocomplete a { display: block; padding: 5px 10px; text-align: left; font-size: 14px; color: #444444; } .ui-autocomplete a.ui-state-focus { background-color: #f6f6f6; } .ui-autocomplete img { display: inline-block; width: 50px; margin-right: 10px; border: 1px solid #eeeeee; border-radius: 2px; vertical-align: middle; } .ui-autocomplete span { display: inline-block; vertical-align: middle; max-width: calc(100% - 60px); } .header-selectors-wrapper { font-size: 0; } .header-selectors-wrapper > div { display: inline-block; margin: 0 5px 10px; vertical-align: middle; } .language-list { max-width: 100%; font-size: 0; } .language-list li { display: inline-block; margin: 0 1px; } .language-list a { display: block; position: relative; width: 32px; height: 32px; line-height: 0; } .language-list img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .slider-wrapper.theme-custom { margin: 0 auto 30px; /*overrides default slider*/ } /*********** FOOTER ***********/ .footer { border-top: 3px solid #f6f6f6; background-color: #fff; text-align: center; overflow: hidden; } .footer-upper { margin: 55px 0; overflow: hidden; } .footer-logo { margin: 0 0 25px; } .footer-block a { font-size: 15px; color: #959595; transition: color .2s ease; } .footer-block a:hover { color: #97c300; } .footer .newsletter .title { margin: 0 0 13px; font-size: 15px; color: #8c8c8c; text-transform: none; } .newsletter .title strong { font-weight: normal; } .newsletter-email { display: block; overflow: hidden; max-width: 255px; margin: 0 auto; } .newsletter-email .newsletter-subscribe-text { float: left; width: calc(100% - 47px); height: 47px; border-radius: 3px 0 0 3px; border-right: 0; } .newsletter-email .newsletter-subscribe-text:focus { border-color: #e7e7e7; } .newsletter-email .newsletter-subscribe-text::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #959595; } .newsletter-email .newsletter-subscribe-text::-moz-placeholder { /* Firefox 19+ */ color: #959595; } .newsletter-email .newsletter-subscribe-text:-ms-input-placeholder { /* IE 10+ */ color: #959595; } .newsletter-email .newsletter-subscribe-text:-moz-placeholder { /* Firefox 18- */ color: #959595; } .newsletter-email .newsletter-subscribe-button { float: left; width: 47px; height: 47px; padding: 0; border: none; border-radius: 0 3px 3px 0; background: #eebe00 url('../Themes/Emporium/Content/img/subscribe-button.png') center no-repeat; font-size: 0; transition: all .2s ease; } .newsletter-email .newsletter-subscribe-button:hover { background-color: #e8af00; } .newsletter-email .options { height: 0; overflow: hidden; clear: both; } .newsletter-validation, .newsletter-result { margin: 10px 0; line-height: 20px; font-size: 13px; color: #444; } .newsletter-validation .please-wait { display: none !important; } .footer-middle { margin-bottom: 50px; overflow: hidden; } .footer-middle .social-icons, .footer-middle .pay-options { margin-top: 40px; } .pay-options img { margin: 0 2px; max-width: 30px; } .social-sharing ul { font-size: 0; } .social-sharing li { display: inline-block; margin: 0 3px; } .social-sharing a { display: block; width: 32px; height: 32px; line-height: 32px; text-align: center; } .social-sharing a:before { display: block; font-size: 22px; color: #8e8e8e; transition: color .2s ease; } .social-sharing a:hover:before { color: #97c300; } .social-sharing .facebook:before { content: "\6e"; } .social-sharing .twitter:before { content: "\6f"; } .social-sharing .google:before { content: "\70"; } .social-sharing .pinterest:before { content: "\44"; } .social-sharing .instagram:before { content: "\74"; } .social-sharing .linkedin:before { content: "\75"; } .social-sharing .vimeo:before { content: "\71"; } .social-sharing .youtube:before { content: "\72"; } .social-sharing .rss:before { content: "\73"; } .footer-lower { overflow: hidden; font-size: 11px; } .footer-lower > div { display: block; margin: 5px 10px 0; color: #a0a0a0; font-size: 14px; } .footer-lower > div:first-child { margin-top: 0; } .footer-lower > div a { color: #ededed; } .footer-lower .theme-selector { margin: 15px 0 0; } .theme-selector select { width: 170px; height: 36px; } .footer-block ul { display: none; padding: 10px 0; background-color: #f6f6f6; } .footer-block ul li { padding: 8px; } .footer-block { border-bottom: 1px solid #eeeeee; } .footer-block:first-child { border-top: 1px solid #eeeeee; } .footer .title { margin-bottom: 15px; text-transform: uppercase; color: #444444; font-size: 14px; } .footer-block .title { position: relative; margin: 0; padding: 15px 45px; text-transform: uppercase; color: #444444; font-size: 14px; cursor: pointer; } .footer-block .title:before, .footer-block .title:after { content: "\77"; position: absolute; display: inline-block; top: 50%; left: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 9px; color: #97c300; text-transform: none; transition: all .3s ease; } .footer-block .title:after { left: auto; right: 20px; } .footer-block .title.open:before, .footer-block .title.open:after { -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .footer-lower { padding: 30px 20px; background-color: #444444; } /*********** SMALL PRODUCT CAROUSELS ***********/ .small-products .nop-jcarousel.product-grid .slick-carousel { margin: 0 !important; } .small-products .nop-jcarousel .slick-slide { padding: 0 !important; } .small-products .item-box { border-radius: 3px !important; overflow: hidden; max-height: 120px; } .small-products .item-box .product-item { font-size: 0; } .small-products .item-box .product-item > div { display: inline-block; vertical-align: top; } .small-products .item-box .prices .actual-price { display: block; margin: 0; } .small-products .item-box .product-item > div:first-child { width: 120px; } .small-products .item-box .picture { margin: 0; border-radius: 0; } .small-products .item-box .picture > a:before { padding-top: 100%; } .small-products .item-box .details { width: calc(100% - 120px); padding: 13px; text-align: left; } .small-products .item-box .prices { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .small-products .item-box .buttons, .small-products .item-box .btn-wrapper { display: none; } .small-products .item-box .product-title, .small-products .item-box .title { padding: 0; height: auto; max-height: 50px; } .small-products .item-box .prices > *:last-child:not(:empty) { margin: 0; } .two-row-carousels { padding: 0 20px; } .two-row-carousels .product-grid .title { font-size: 24px; } .two-row-carousels:after { content: ""; display: block; clear: both; } .two-row-carousels .slick-slide { min-height: 241px; } .two-row-carousels .slick-arrow { position: absolute; top: auto; bottom: 101px; width: 40px; height: 40px; background-color: #fff; cursor: pointer; border: 1px solid #eee; border-radius: 50%; text-align: center; font-size: 0; transition: all .2s ease; z-index: 1; } .two-row-carousels .slick-arrow:before { display: block; color: #d0d0d0; font-size: 12px; line-height: 40px; transition: all .2s ease; text-transform: none; } .two-row-carousels .slick-arrow:hover { background-color: #97c300; border: 1px solid #97c300; } .two-row-carousels .slick-arrow:hover:before { color: #fff; } .two-row-carousels .slick-prev:before { content: "\6b"; } .two-row-carousels .slick-prev { left: 0; margin-left: -20px; } .two-row-carousels .slick-next:before { content: "\6a"; } .two-row-carousels .slick-next { right: 0; margin-right: -20px; } .two-row-carousels .slick-list { border: 1px solid #eee; border-radius: 3px; } .two-row-carousels .slick-slide > div { font-size: 0; } .two-row-carousels .slick-slide > div:first-child { border-bottom: 1px solid #eee; } .two-row-carousels .item-box { float: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; height: 0; /*hidden until fully loaded*/ overflow: hidden; } .two-row-carousels .slick-slide .item-box { height: auto; } /*********** LEFT/RIGHT COLUMN ***********/ .block { border: 1px solid #eee; border-radius: 3px; margin: 0 0 10px; text-align: center; } .block .title { position: relative; padding: 14px 20px 14px 50px; font-size: 17px; color: #444444; background-color: #f6f6f6; cursor: pointer; text-align: left; } .block .title strong { font-weight: 300; display: block; } .block .title:before { content: "\77"; display: inline-block; position: absolute; left: 25px; top: 50%; -webkit-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); font-size: 10px; color: #97c300; text-transform: none; transition: all .4s ease; } .block .title.open:before { -webkit-transform: translateY(-50%) rotate(0deg); -ms-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .block .listbox { display: none; padding: 18px; text-align: left; } .block .listbox:after { content: ""; display: block; clear: both; } .block .poll { padding: 10px 0; } .block .list li.active > a { color: #97c300; font-weight: bold; } .block .list a { display: inline-block; padding: 8px 0; font-size: 15px; color: #8c8c8c; transition: all .2s ease; } .block-recently-viewed-products a.product-picture { padding: 0; } .block .list a:hover { color: #97c300; } .block .list .product-picture { display: none; } .block .sublist { padding: 0 15px; } .block .view-all { margin: 7px 0; } .block .view-all a { display: block; margin: 15px 0 0; font-weight: bold; font-size: 13px; text-transform: uppercase; color: #97c300; transition: all .2s ease; } .block .view-all a:hover { color: #5c7600; } .block .tags { margin: 0 0 10px; } .block .tags ul { font-size: 0; } .block .tags li, .product-tags-all-page li { display: inline-block; position: relative; margin: 0 10px; overflow: hidden; font-size: 16px !important; /*setting base size*/ } .block .tags li a, .product-tags-all-page li a { float: left; line-height: 30px; color: #8c8c8c; transition: all .2s ease; } .block .tags li a:hover, .product-tags-all-page li a:hover { color: #97c300 } .poll > strong { display: block; margin: 0 0 20px; font-size: 18px; color: #97c300; } .poll-options, .poll-results { margin: 0 0 15px; overflow: hidden; } .home-page-polls .poll-options li { margin-bottom: 5px; text-align: left; } .home-page-polls .poll .buttons { margin-top: 30px; } .home-page-polls .poll-total-votes { margin-top: 0; } .home-page-polls .answer label { display: block; border: 1px solid #eeeeee; border-radius: 3px; padding: 20px; font-size: 16px; font-weight: bold; color: #444444; cursor: pointer; transition: all .2s ease; } .home-page-polls .answer input[type="radio"]:checked + label:before { border: 4px solid #fff; background-color: #97c300; } .home-page-polls .answer:hover label { background-color: #f6f6f6; } .home-page-polls .poll { max-width: 500px; margin: 0 auto; } .poll .buttons, .poll-total-votes { margin-top: 15px; } .poll .buttons button { padding: 10px 20px; border: none; background-color: #f1f1f1; font-weight: bold; text-transform: uppercase; font-size: 13px; color: #8c8c8c; transition: all .2s ease; } .poll .buttons button:hover { background-color: #e8af00; color: #fff; } .home-page-polls .poll button { border-radius: 3px; background-color: #eebe00; padding: 15px 30px; color: #fff; } .poll-total-votes { display: block; margin: 10px 0 0; font-weight: bold; text-align: right; font-size: 13px; text-transform: uppercase; color: #8c8c8c; } .block .poll .buttons { text-align: left; } .block .poll-options li, .poll-results li { display: block; margin-bottom: 15px; font-size: 15px; color: #8c8c8c; text-align: left; } .block .poll-options li:last-child { margin-bottom: 0; } .block .poll-results li:last-child { margin-bottom: 10px; } .home-page-polls { text-align: center; margin: 0 10px 50px; } .home-page-polls .title { margin: 0 0 20px; font-size: 28px; color: #444444; } .home-page-polls .title strong { font-weight: bold; } .answer { position: relative; overflow: hidden; } .answer input[type="radio"] { position: absolute; left: -9999px; } .answer label { display: block; padding: 7px 0; font-size: 15px; color: #8c8c8c; cursor: pointer; transition: all .2s ease; } .block .answer label:hover { color: #97c300; } .block .answer:after { content: ""; display: block; clear: both; } .answer span:last-child { float: right; font-size: 13px; } .answer span strong { display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 15px; color: #444444; } .answer label:before { content: ""; display: inline-block; margin-right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #eeeeee; vertical-align: bottom; background-color: #fff; } .answer input[type="radio"]:checked + label:before { margin-left: 1px; width: 17px; height: 17px; margin-right: 9px; box-shadow: 0 0 0 1px #e7e7e7; border: 3px solid #fff; background-color: #97c300; } .block.product-filters .listbox { color: #444444; padding: 18px 30px; font-size: 15px; } .product-filters .listbox .filter-title { padding: 5px 0px; color: #444; font-size: 15px; } .product-filters .selected-price-range { overflow: hidden; margin: 5px 0 12px; font-size: 15px; } .product-filters .selected-price-range .from { float: left; } .product-filters .selected-price-range .to { float: right; } .product-filters .listbox .filter-content .group { padding: 0px 0px 0px 0px; } .product-filters .listbox .filter-content .name { padding: 5px 0px 3px 0px; } .product-filters .listbox .filter-title strong { font-size: 16px; } .product-filters .listbox .filter-title strong, .product-filters .listbox .filter-content .name strong { font-weight: 400; } .product-filters .listbox .product-spec-filter .filter-content { padding: 10px 0px 10px 0px; } .product-filters .listbox .filter-content li.item { padding: 8px 0px; } .product-filters .ui-slider { position: relative; width: auto; height: 10px; margin: 0 10px 22px; max-width: 257px; padding: 10px 0 0; border-bottom: 3px solid #c5c5c5; } .product-filters .ui-slider-range { position: absolute; height: 3px; background-color: #97c300; } .product-filters .ui-slider-handle { position: absolute; top: 2px; width: 19px; height: 19px; margin-left: -8px; background: #fff; border: 1px solid #97c300; border-radius: 50%; } .product-filters .ui-slider-handle span { position: absolute; top: -35px; left: 50%; margin-left: -19px; min-width: 38px; height: 18px; padding: 0 2px; line-height: 18px; color: rgba(255,255,255,.7); font-size: 11px; text-align: center; background: #2c2c2c; } .product-filters .ui-slider-handle span:before { content: ""; position: absolute; bottom: -3px; left: 50%; margin-left: -2px; width: 0; height: 0; border-style: solid; border-width: 4px 3px 0 3px; border-color: #2c2c2c transparent transparent transparent; } /********** CATEGORY PAGE **********/ .breadcrumb { margin: 0 20px 5px; text-align: center; } .center-1 .breadcrumb { margin-bottom: 20px; } .breadcrumb ul { font-size: 0; } .breadcrumb li { display: inline-block; font-size: 14px; /*reset zeroing*/ line-height: 1.5; color: #a9a9a9; } .breadcrumb li:last-child span { display: none; } .breadcrumb li > a, .breadcrumb li > span, .breadcrumb li > strong { margin: 0 3px; transition: color .2s ease; } .breadcrumb strong { font-weight: normal; } .breadcrumb a:hover, .breadcrumb a:hover span { color: #97c300; } .breadcrumb .delimiter { display: inline-block; margin-right: 5px; font-size: 0; } .breadcrumb .delimiter:before { content: "\6a"; display: block; font-size: 7px; } .category-description, .manufacturer-description, .vendor-description, .contact-vendor { margin: 0 0 40px; } .contact-vendor-button { border: none; padding: 0 25px; height: 45px; background-color: #eebe00; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; border-radius: 3px; transition: all .1s ease; } .contact-vendor-button:hover { background-color: #e8af00; } .filters-button-wrapper { display: none !important; } .product-selectors { margin: 0 0 20px; text-align: center; font-size: 0; } .product-selectors:after { content: ""; display: block; clear: both; } .product-selectors .product-sorting, .product-selectors .product-page-size { width: calc(50% - 4px); display: inline-block; vertical-align: top; } .product-selectors .product-page-size { margin-left: 8px; } .product-selectors select { display: block; padding: 0 40px 0 20px; width: 100%; height: 50px; border: none; background-color: #f1f1f1; background-image: url('../Themes/Emporium/Content/img/select-arrow-dark.svg'); font-size: 14px; font-weight: bold; text-transform: uppercase; color: #8c8c8c; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #products-pagesize-desktop { display: none; } .product-selectors .product-viewmode { display: none; } .product-selectors .product-viewmode span { vertical-align: middle; } .product-selectors .product-viewmode a { display: inline-block; width: 30px; height: 45px; margin: 0 8px 0 0; background-position: center; background-repeat: no-repeat; vertical-align: middle; font-size: 0; opacity: 0.5; } .product-selectors .product-viewmode a:last-child { margin: 0; } .product-selectors .product-viewmode a.grid { background-image: url('../Themes/Emporium/Content/img/view-grid.png'); } .product-selectors .product-viewmode a.list { background-image: url('../Themes/Emporium/Content/img/view-list.png'); } .product-selectors .product-viewmode a.selected { opacity: 1; } .item-grid:after { content: ""; display: block; clear: both; } .item-box { position: relative; width: 49%; float: left; margin: 0 0 2% 2%; border: 1px solid #eeeeee; background-color: #fff; border-radius: 3px; overflow: hidden; } .item-box:nth-child(2n+1) { margin-left: 0; clear: both; } .item-box .picture { z-index: 1; overflow: hidden; background-color: #fff; margin: 0 0 5px; border-radius: 2px 2px 0 0; } .item-box .picture > a { display: block; position: relative; overflow: hidden; } .item-box .picture > a:before { content: ""; display: block; padding-top: 100%; } .item-box .picture > a img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); max-width: none; height: 100%; } .item-box .manufacturer-item .picture > a img, .item-box .vendor-item .picture > a img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-transform: none; -ms-transform: none; transform: none; max-width: 100%; height: auto; } .item-box .details { padding: 10px; } .item-box .product-title, .item-box .title { height: 75px; margin: 0 0 7px; overflow: hidden; font-size: 15px; font-weight: normal; color: #444444; } .item-box .product-title a, .item-box .title a { display: block; } .item-box .sku { display: none; /*remove if you want to show sku*/ font-size: 13px; color: #8c8c8c; margin-bottom: 5px; } .item-box .product-rating-box { display: inline-block; margin: 0 0 8px; } .item-box .rating { background: url('../Themes/Emporium/Content/img/rating1.gif') repeat-x; width: 65px; height: 12px; } .item-box .rating div { background: url('../Themes/Emporium/Content/img/rating2.gif') repeat-x; height: 12px; } .item-box .description { display: none; /*hidden by design*/ height: 30px; margin: 0 0 10px; overflow: hidden; } .item-box .description a { display: block; overflow: hidden; } .item-box .prices { overflow: hidden; } .item-box .prices *:empty { display: none; } .item-box .prices * { display: inline-block; } .item-box .old-price { font-size: 14px; color: #999; text-decoration: line-through; } .item-box .actual-price { font-size: 18px; color: #97c300; font-weight: bold; } .item-box .old-price + .actual-price, .item-box .actual-price + .tax-shipping-info { margin-left: 5px; } .item-box .tax-shipping-info { color: #8c8c8c; } .item-box .tax-shipping-info a { color: #97c300; } .item-box .base-price-pangv { color: #8c8c8c; } .item-box .buttons { display: none; font-size: 0; } .item-box button { height: 40px; padding: 0 5%; vertical-align: middle; border: none; text-overflow: ellipsis; overflow: hidden; } .item-box .button-2 { width: 100%; background-color: #f1f1f1; border-radius: 3px; font-weight: bold; font-size: 14px; color: #8c8c8c; text-transform: uppercase; transition: all .2s ease; } .item-box .buttons .button-2:hover { background-color: #eebe00; color: #fff; } .item-box .product-rating-box { margin-bottom: 10px; } .item-box .btn-wrapper { display: none; font-size: 0; } .item-box .btn-wrapper .button-2 { margin-left: 4px; width: 40px; height: 40px; line-height: 40px; font-size: 0; border-radius: 30px; background-color: #f1f1f1; border: 0; font-size: 0; backface-visibility: hidden; transition: all .1s ease; } .item-box .btn-wrapper button:before { transition: all .1s ease; text-transform: none; font-weight: normal; font-size: 18px; color: #8e8e8e; } .item-box .btn-wrapper .add-to-wishlist-button:before { content: "\63"; } .item-box .btn-wrapper .add-to-compare-list-button:before { content: "\62"; } .item-box .btn-wrapper button:hover { background-color: #97c300; } .item-box .btn-wrapper button:hover:before { color: #fff; } .home-page-category-grid, .sub-category-grid, .manufacturer-grid { margin: 0 auto 45px; } .home-page-category-grid .item-box { background-color: #fff; } .category-grid .item-box { border: 1px solid f6f6f6; } .category-grid .item-box .picture { border: none; background: transparent; margin: 0; } .category-grid .item-box .picture a:before { padding-top: 73.33%; } .vendor-item .picture, .manufacturer-item .picture { margin-bottom: 0 } .vendor-item .title, .manufacturer-item .title, .category-grid .item-box .title { margin-bottom: 0; height: auto; } .vendor-item .title a, .manufacturer-item .title a, .category-grid .item-box .title a { display: block; padding: 16px 15px; font-size: 13px; color: #444444; font-weight: bold; /*letter-spacing: 2px; text-transform: uppercase;*/ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: color .2s ease; } .sub-category-grid .item-box .title a { white-space: normal; text-overflow: initial; } .vendor-item:hover .title a, .manufacturer-item:hover .title a, .category-grid .item-box:hover .title a { color: #97c300; } .home-page-advantages { margin-bottom: 45px; overflow: hidden; } .advantages-item { padding: 10px 15px; margin-bottom: 5px; background-color: #f6f6f6; overflow: hidden; text-align: left; } .advantages-item > div { display: inline-block; vertical-align: middle; } .advantages-item .description { display: none; } .advantages-item .picture { width: 40px; height: 40px; } .advantages-item .picture img { max-height: 100%; max-width: 100%; } .advantages-item .info { width: calc(100% - 55px); padding-left: 10px; } .advantages-item .title { font-size: 15px; color: #444444; font-weight: bold; text-transform: normal; letter-spacing: 3px; } .advantages-item .title a { transition: all .2s ease; } .advantages-item .title a:hover { color: #97c300; } .product-grid .title { margin: 0 0 25px; font-size: 28px; color: #444444; font-weight: bold; text-align: center; } .pager { margin: 0 0 20px; } .pager:last-child { margin-bottom: 0; } .pager ul { text-align: center; font-size: 0; } .pager li { display: inline-block; margin: 0 5px; vertical-align: middle; } .pager li a, .pager li span { display: block; width: 38px; height: 38px; line-height: 37px; border-radius: 50%; text-align: center; font-size: 15px; /*reset zeroing*/ cursor: pointer; color: #8c8c8c; transition: all .3s ease; } .pager li a:hover, .pager li span { color: #fff; background-color: #97c300; border-color: #97c300 !important; } .pager li a:hover::before { color: #fff; } .pager li a:before { display: block; font-size: 12px; color: #d0d0d0; line-height: 37px; transition: all .3s ease; } .pager li.previous-page a, .pager li.next-page a, .pager li.first-page a, .pager li.last-page a { font-size: 0; background-color: #fff; } .pager li.previous-page a:hover, .pager li.next-page a:hover, .pager li.first-page a:hover, .pager li.last-page a:hover { background-color: #97c300; } .previous-page a, .next-page a, .first-page a, .last-page a { border: 1px solid #e4e4e4; } .previous-page a:before, .next-page a:before { content: "\6b"; } .next-page a:before { content: "\6a"; } .first-page a:before { content: "\56"; } .last-page a:before { content: "\57"; } /********** PRODUCT PAGE **********/ .product-details-page .product-grid { width: 100%; } .mobile-name-holder { margin-bottom: 30px; } .mobile-name-holder .breadcrumb { margin: 0 0 20px; } .product-essential { margin: 0 0 20px; } .product-essential:after { content: ""; display: block; clear: both; } .gallery { margin: 0 auto 40px; max-width: 500px; } .gallery .picture { position: relative; max-width: 100%; margin: 0 auto; border-radius: 3px; overflow: hidden; background-color: #fff; text-align: center; font-size: 0; } .gallery .picture:before { content: ""; display: block; width: 100%; padding-top: 100%; } .gallery .picture img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; max-height: 100%; } .gallery .picture-thumbs { margin: 10px 0 0; overflow: hidden; text-align: center; font-size: 0; } .gallery .thumb-item { display: inline-block; position: relative; width: 85px; margin: 0 4px 10px; border-radius: 3px; border: 1px solid #eeeeee; overflow: hidden; background-color: #fff; cursor: pointer; } .gallery .thumb-item:before { content: ""; display: block; padding-top: 100%; } .gallery .thumb-item img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; max-height: 100%; margin: auto; } .overview { position: relative; margin: 0 0 20px; } .product-name .manufacturers, .overview .manufacturers { font-size: 15px; color: #8c8c8c; } .product-name .manufacturers .value, .overview .manufacturers .value { color: #97c300; } .product-name .manufacturers .value:hover, .overview .manufacturers .value:hover { color: #7c9a16; } .discontinued-product { margin: 0 0 20px; color: #ff4f60; } .overview .product-name { margin: 0 0 25px; } .product-name h1 { margin-bottom: 10px; font-size: 26px; color: #444444; font-weight: bold; } .overview .short-description { margin: 0 0 30px; padding: 0 10px; font-size: 14px; line-height: 1.6; color: rgba(0,0,0, .78) } .product-reviews-overview { margin: 0 0 20px; /*not present in variant-overview*/ } .product-review-box { display: inline-block; margin: 0 0 5px; } .product-review-box .rating { width: 65px; height: 12px; background: url('../Themes/Emporium/Content/img/rating1.gif') repeat-x; } .product-review-box .rating div { height: 12px; background: url('../Themes/Emporium/Content/img/rating2.gif') repeat-x; } .product-no-reviews a { font-size: 14px; color: #8c8c8c; transition: color .2s ease; } .product-review-links a:hover, .product-no-reviews a:hover { color: #97c300; } .product-review-links { font-size: 14px; color: #8c8c8c; } .product-review-links .separator { margin: 0 5px; } .product-review-links a { transition: color .2s ease; } .overview .compare-products { margin-bottom: 40px; } .compare-products .add-to-compare-list-button { font-size: 12px; line-height: 16px; font-weight: bold; color: #8c8c8c; text-transform: uppercase; border: none; background: transparent; transition: all .2s ease; } .compare-products .add-to-compare-list-button:before { content: "\62"; display: inline-block; vertical-align: text-bottom; margin-right: 10px; font-size: 18px; color: #8c8c8c; text-transform: none; font-weight: normal; transition: all .2s ease; } .compare-products .add-to-compare-list-button:hover, .compare-products .add-to-compare-list-button:hover:before { color: #97c300; } .compare-products .add-to-compare-list-button:hover:before { -webkit-transform: rotate3d(1,0,0,180deg); -ms-transform: rotate3d(1,0,0,180deg); transform: rotate3d(1,0,0,180deg); } .overview .stock, .variant-overview .stock { display: inline-block; padding: 10px 20px; margin: 0 0 20px; font-weight: bold; font-size: 13px; color: #8c8c8c; text-transform: uppercase; background-color: #f6f6f6; border-radius: 2px; } .overview .stock .label, .variant-overview .stock .label { display: none; } .back-in-stock-subscription { margin: 0 0 15px; font-size: 0; backface-visibility: hidden; } .back-in-stock-subscription:before { content: "\45"; display: inline-block; margin-right: 7px; vertical-align: bottom; color: #8c8c8c; font-size: 17px; transition: color .2s ease; } .back-in-stock-subscription:hover:before { color: #97c300; -webkit-animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; -moz-animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; } .back-in-stock-subscription button { background: transparent; border: none; font-size: 12px; font-weight: bold; color: #8c8c8c; text-transform: uppercase; transition: color .2s ease; } .overview .additional-details, .variant-overview .additional-details { margin-bottom: 30px; } .overview .additional-details div, .variant-overview .additional-details div { margin: 0 0 5px; font-size: 15px; color: #8c8c8c; } .overview .additional-details div .value, .variant-overview .additional-details div .value { color: #444444; } .overview .additional-details div .value a, .variant-overview .additional-details div .value a { color: #97c300; text-decoration: none; } .overview .additional-details div .value a:hover, .variant-overview .additional-details div .value a:hover { color: #7c9a16; } .overview .delivery { margin: 20px 0 10px; } .variant-overview .delivery { margin: 20px 0 0; } .delivery .free-shipping { color: #8c8c8c; font-size: 14px; } .delivery .delivery-date { font-size: 14px; color: #8c8c8c; } .free-shipping + .delivery-date { margin: 5px 0 0; } .download-sample { font-size: 0; margin: 30px 0; } .download-sample a { font-size: 13px; color: #97c300; font-weight: bold; text-transform: uppercase; } .download-sample a:before { content: "\4a"; display: inline-block; margin-right: 10px; font-size: 18px; text-transform: none; font-weight: normal; vertical-align: text-bottom; } .overview-buttons div { display: inline-block; margin: 0 5px 10px; } .attributes { padding: 10px; font-size: 15px; text-align: left; margin: 0 auto 20px; } .attributes:only-child { margin-bottom: 0; } .attributes-wrapper > div { max-width: 320px; margin-left: auto; margin-right: auto; } .attributes-wrapper > div.product-prices-box { max-width: none; } .attributes dl { overflow: hidden; } .attributes dt, .attributes .attribute-label, .giftcard label { display: block; font-size: 15px; margin: 0 0 5px; white-space: nowrap; font-weight: bold; color: #444444; } .attributes dt, .attributes dd { text-align: center; } .attributes dd li { text-align: left; } .attributes .required { color: #444444; } .attributes dd { margin: 0 0 20px; } .attributes dd:last-child { margin-bottom: 0; } .attributes li { margin: 8px 0 10px; } .attributes dd select, .product-details-page .attributes dd select:only-child { max-width: 100%; } .product-details-page .attributes dd select { max-width: calc(100% - 60px); } .attributes select + .qty-box { margin-top: 10px; } .attributes dd input[type="text"], .attributes dd input[type="password"], .attributes dd input[type="tel"], .attributes dd input[type="email"], .attributes dd select:only-child { width: 100%; line-height: 45px; } .attributes option.disabled { color: #ddd; } .attributes li.disabled { pointer-events: none; opacity: 0.5; } .attributes li.disabled label { text-decoration: line-through; } .attribute-squares li.disabled { position: relative; opacity: 1; } .attribute-squares li.disabled:before { content: "\7a"; position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px; border-radius: 2px; background-color: #fff; text-align: center; font-size: 19px; line-height: 30px; color: rgb(255,79,96); } .attributes.rental-attributes { font-size: 0; } .attributes.rental-attributes > div { display: inline-block; width: 49%; } .attributes.rental-attributes > div:nth-child(2n) { margin-left: 2% } .attributes.rental-attributes > div:only-child { width: 100%; margin-left: 0; } .attributes.rental-attributes input { height: 45px; padding: 0 20px; border-radius: 3px; text-align: left; } .product-estimate-shipping { margin: 20px 0 10px; color: #8c8c8c; } .product-estimate-shipping a { display: block; } .product-estimate-shipping i { display: inline-block; transform: rotate(45deg); margin: 0 0 3px 9px; border: solid black; border-width: 0 1px 1px 0; padding: 3px 3px; vertical-align: middle; } .product-estimate-shipping .shipping-loading { display: none !important; /*disable preloader*/ } .product-estimate-shipping .shipping-title { margin: 0 0 5px; font-size: 15px; } .product-estimate-shipping .shipping-price { margin: 0 0 0 5px; vertical-align: middle; color: #000; } .product-estimate-shipping .shipping-address { white-space: nowrap; font-size: 12px; } .product-estimate-shipping .shipping-address span { display: inline-block; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .product-estimate-shipping .shipping-date { margin: 15px 0 0; font-size: 14px; } .product-social-buttons { margin-bottom: 30px; } .product-social-label { display: inline-block; margin-bottom: 20px; font-size: 15px; font-weight: bold; color: #444444; } .product-social-sharing li { display: inline-block; margin: 0 5px; vertical-align: top; } .product-social-sharing li a { display: block; font-size: 0; backface-visibility: hidden; } .product-social-sharing li a:before, .email-a-friend:before { display: block; font-size: 22px; color: #8e8e8e; transition: all .5s ease; } .product-social-sharing li a:hover:before, .product-social-sharing .email-a-friend:hover:before { -webkit-transform: rotate3d(0,1,0,360deg); -ms-transform: rotate3d(0,1,0,360deg); transform: rotate3d(0,1,0,360deg); } .product-social-sharing a.twitter:before { content: "\6f"; } .product-social-sharing a.facebook:before { content: "\6e"; } .product-social-sharing a.pinterest:before { content: "\44"; } .product-social-sharing a.google:before { content: "\70"; } .product-social-sharing .email-a-friend:before { content: "\6d"; position: absolute; top: 0; left: 0; pointer-events: none; } .product-social-sharing .email-a-friend { position: relative; } .product-social-sharing .email-a-friend button { width: 22px; height: 22px; border: none; background: transparent; font-size: 0; } .product-social-sharing li a:hover:before, .email-a-friend:hover:before { color: #97c300; } .attributes .qty-box { margin: 0 0 0 5px; } .attributes .qty-box label { display: none; } .attributes .qty-box input[type="text"] { width: 50px; height: 45px; text-align: center; border-radius: 3px; } .gender label, .option-list li label, .inputs.accept-consent label, td.remove-from-cart label, td.add-to-cart label, .terms-of-service label, .terms-of-agreement label, .selector label, .use-reward-points label { display: inline-block; font-size: 15px; cursor: pointer; transition: all .2s ease; } .attributes .datepicker { width: 100%; text-align: center; } .ui-datepicker { width: 280px; background-color: #fff; text-align: center; box-shadow: 0 0 15px rgba(0,0,0,.1); border-radius: 3px; overflow: hidden; } .ui-datepicker-header { position: relative; height: 32px; background-color: #97c300; color: #fff; overflow: hidden; } .ui-datepicker-header a { position: absolute; top: 0; z-index: 1; width: 40px; height: 32px; line-height: 32px; font-size: 0; transition: all .2s ease; } .ui-datepicker-header a:hover { background-color: rgba(0,0,0,.1); } .ui-datepicker-header a:before { display: block; font-size: 10px; color: #fff; } .ui-datepicker-header a.ui-datepicker-prev { left: 0; } .ui-datepicker-header a.ui-datepicker-prev:before { content: "\6b"; } .ui-datepicker-header a.ui-datepicker-next { right: 0; } .ui-datepicker-header a.ui-datepicker-next:before { content: "\6a"; } .ui-datepicker-title { position: relative; z-index: 0; line-height: 32px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; } .ui-datepicker-calendar th { background-color: #f6f6f6; } .ui-datepicker-calendar th, .ui-datepicker-calendar td { width: 14.285%; } .ui-datepicker-calendar th span, .ui-datepicker-calendar td a { display: block; font-size: 14px; color: #8c8c8c; min-height: 32px; line-height: 32px; border-radius: 3px; transition: all .2s ease; } .ui-datepicker-calendar th span { font-size: 13px; } .ui-datepicker-calendar td a:hover { background-color: #f1f1f1; } .ui-datepicker-calendar a.ui-state-active:hover, .ui-datepicker-calendar a.ui-state-active { background-color: #97c300; color: #fff; } .attribute-squares { font-size: 0; } .attribute-squares li { display: inline-block; margin: 0 5px 5px; line-height: normal !important; text-align: center; } .attribute-squares label { display: block; margin: 0 !important; overflow: hidden; } .attribute-squares input[type="radio"] { position: absolute; left: auto; z-index: -1; opacity: 0; margin-top: -25px; } .attribute-squares span { display: block; user-select: none; } .attribute-square { display: block !important; width: 32px !important; height: 32px !important; border: 2px solid #e7e7e7; border-radius: 3px; cursor: pointer; } .selected-value .attribute-square { border-color: #868686; } .image-squares .tooltip-container { position: absolute; display: block; width: 200px; color: #000000; background: #FFFFFF; border: 1px solid #eeeeee; text-align: center; visibility: hidden; border-radius: 5px; } .image-squares .tooltip-container:before { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -7px; width: 0; height: 0; border-bottom: 7px solid #eeeeee; border-right: 7px solid transparent; border-left: 7px solid transparent; } .image-squares .tooltip-container:after { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -6px; width: 0; height: 0; border-bottom: 6px solid #f6f6f6; border-right: 6px solid transparent; border-left: 6px solid transparent; } .image-squares li:hover .tooltip-container { visibility: visible; margin-left: -83px; margin-top: 5px; z-index: 999; } .image-squares .tooltip-header { background-color: #f6f6f6; height: 25px; border-top-right-radius: 4px; border-top-left-radius: 4px; padding-left: 10px; padding-top: 5px; text-align: left; color: #8c8c8c; width: 198px; font-size: 13px; border-bottom: 1px #EEEEEE solid; } .image-squares .tooltip-body { margin: 5px; } .image-squares .tooltip-body img { border: 0px #FFF; width: 190px; } .giftcard { margin: 0 0 20px; overflow: hidden; clear: both; } .giftcard div { margin: 0 0 20px; } .giftcard label { display: block; margin: 0 0 5px; } .giftcard input, .giftcard textarea { width: 100%; height: 45px; line-height: 45px; border-radius: 3px; } .giftcard textarea { height: 150px; line-height: 1.5; } .overview .prices, .variant-overview .prices { margin: 10px 0; overflow: hidden; font-size: 14px; color: #8c8c8c } .overview .prices > div, .variant-overview .prices > div { margin: 0 0 5px; } .overview .old-product-price, .variant-overview .old-product-price { color: #8c8c8c; } .old-product-price span:last-child { position: relative; text-decoration: none; /* Standaard lijn weghalen */ } .old-product-price span:last-child::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; /* Dikte van de lijn */ background: rgba(128, 128, 128, 0.4); /* grijze lijn met 40% transparantie */ pointer-events: none; /* Zorgt ervoor dat de lijn geen interactie blokkeert */ } .overview .old-product-price span, .overview .old-product-price label, .variant-overview .old-product-price span, .variant-overview .old-product-price label { font-size: 17px; } .overview .non-discounted-price, .variant-overview .non-discounted-price { font-size: 14px; color: #8c8c8c; } .overview .product-price, .variant-overview .product-price { font-size: 25px; color: #97c300; font-weight: bold; } .grouped-product-box { margin-bottom: 40px; } .grouped-product-box label { display: none; margin: 0 0 15px; color: #787878; text-transform: uppercase; font-weight: bold; font-size: 13px; } .grouped-btn { display: block; max-width: 320px; height: 45px; line-height: 45px; margin: 0 auto; padding: 0 15px; text-align: center; background-color: #f1f1f1; border-radius: 3px; font-size: 13px; color: #8c8c8c; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-transform: uppercase; font-weight: bold; transition: all .2s ease; } .grouped-btn:before { content: "\4b"; display: inline-block; vertical-align: bottom; margin-right: 10px; font-size: 12px; color: #8e8e8e; text-transform: none; transition: all .2s ease; } .grouped-btn:hover { background-color: #eebe00; color: #fff; } .grouped-btn:hover:before { color: #fff; } .grouped-btn span { display: inline-block; vertical-align: top; margin-right: 5px; } .grouped-btn strong { display: inline-block; vertical-align: top; } .tier-prices { margin: 20px 0 30px; font-size: 15px; color: #8c8c8c; } .tier-prices .title { margin-bottom: 10px; font-size: 15px; font-weight: bold; color: #444444; } .tier-prices .prices-table { border: 1px solid #e7e7e7; overflow: hidden; border-radius: 3px; } .tier-prices .prices-row { float: left; width: 50%; } .tier-prices .prices-row > div { padding: 10px; } .tier-prices .item-price { color: #97c300; } .tier-prices .tbody { border-left: 1px solid #e7e7e7; } .customer-entered-price { margin: 30px 0; overflow: hidden; padding: 10px; } .customer-entered-price .price-input { margin-bottom: 5px; } .customer-entered-price .price-input label { display: block; font-size: 15px; margin: 0 0 5px; font-weight: bold; color: #444444; } .customer-entered-price .enter-price-input { border-radius: 3px; height: 45px; width: 150px; text-align: center; } .customer-entered-price .price-range { color: #8c8c8c; } .overview .add-to-cart { display: inline-block; vertical-align: top; margin: 0 0 10px; width: calc(100% - 55px); max-width: 330px; } .variant-overview .add-to-cart { display: inline-block; } .variant-overview .add-to-wishlist { display: inline-block; vertical-align: top; font-size: 0; margin-left: 5px; } .overview .min-qty-notification, .variant-overview .min-qty-notification { margin: 0 0 10px; font-size: 14px; color: #8c8c8c; } .overview .add-to-cart-panel { position: relative; font-size: 0; } .variant-overview .add-to-cart-panel { position: relative; font-size: 0; display: inline-block; vertical-align: top; } .overview .qty-label, .variant-overview .qty-label { position: absolute; left: -25px; line-height: 36px; display: none !important; } .overview .qty-input, .variant-overview .qty-input, .overview .qty-dropdown, .variant-overview .qty-dropdown { border-radius: 3px; height: 45px; padding: 12px; text-align: center; color: #444444; font-size: 14px; vertical-align: top; } .overview .qty-dropdown, .variant-overview .qty-dropdown { margin-right: 10px; width: 73px; padding: 0 33px 0 17px; border: 1px solid #e7e7e7; border-radius: 3px; background: url(../Themes/Emporium/Content/img/select-arrow-dark.svg) no-repeat right 15px center; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .variant-overview .qty-dropdown, .variant-overview .add-to-cart-qty-wrapper { margin-right: 5px; } .overview .qty-input, .variant-overview .qty-input { padding-right: 27px; width: 80px; } .variant-buttons-wrapper { font-size: 0; } .overview .qty-dropdown + .add-to-cart-button { width: calc(100% - 85px); max-width: 250px; } .overview .add-to-cart-qty-wrapper + .add-to-cart-button { padding: 0; width: calc(100% - 90px); max-width: 250px; } .add-to-cart-qty-wrapper { position: relative; display: inline-block; vertical-align: top; margin-right: 10px; } /*iOS bug fix start*/ .add-to-cart-qty-wrapper { width: 80px; border-radius: 3px; box-shadow: inset 0 0 0 1px #e7e7e7; text-align: left; } .add-to-cart-qty-wrapper .qty-input, .add-to-cart-qty-wrapper .qty-dropdown { width: 62px; border: none; background: none; padding-right: 9px; } /*iOS bug fix end, makes buttons clickable*/ .add-to-cart-qty-wrapper .plus, .add-to-cart-qty-wrapper .minus { position: absolute; top: 0; right: 0; left: auto; display: inline-block; width: 15px; height: 18px; margin: 3px; background-color: #f1f1f1; text-align: center; font-family: "emporium-icons"; font-size: 7px; line-height: 18px; color: #8e8e8e; cursor: pointer; user-select: none; transition: all .2s ease; } .add-to-cart-qty-wrapper .minus { top: auto; bottom: 0; } .add-to-cart-qty-wrapper .plus:hover, .add-to-cart-qty-wrapper .minus:hover { background-color: #eaeaea; } .overview .add-to-cart-button, .variant-overview .add-to-cart-button { padding: 0 15px; font-size: 15px; vertical-align: top; text-align: center; text-overflow: ellipsis; overflow: hidden; } .variant-overview .add-to-cart-button { padding: 0 14px; width: 140px; } .overview .add-to-wishlist { display: inline-block; margin-left: 5px; } .overview .add-to-wishlist button { display: block; width: 45px; height: 45px; line-height: 45px; border: none; border-radius: 3px; font-weight: bold; color: #8c8c8c; font-size: 0; text-transform: uppercase; text-align: center; background-color: #f1f1f1; transition: all .1s ease; } .overview .add-to-wishlist button:hover { background-color: #eaeaea; } .overview .add-to-wishlist button:before { content: "\63"; display: inline-block; vertical-align: bottom; color: #8c8c8c; font-size: 17px; text-transform: none; font-weight: normal; } .pre-order-availability-date { display: block; margin-top: 10px; font-size: 14px; color: #8c8c8c; } .pre-order-availability-date label { vertical-align: top; } .full-description, .product-specs-box { margin: 0 -10px; padding: 0 10px; background-color: #f6f6f6; clear: both; } .full-description { padding: 20px; line-height: 1.5; font-size: 15px; color: #8c8c8c; font-weight: 400; } .product-specs-box { padding: 10px 10px 30px; } .product-specs-box thead { display: none; } .product-specs-box .spec-group-name { display: none !important; } .product-details-page .related-products-grid, .product-details-page .also-purchased-products-grid { margin-top: 70px; } .product-collateral .title { margin: 0 0 10px; letter-spacing: 2px; font-size: 15px; color: #444; font-weight: 700; text-transform: uppercase; } .product-tags-box .title, .product-details-page .product-grid .title { font-size: 24px; color: #444444; font-weight: bold; text-transform: none; letter-spacing: normal; } .product-specs-box .data-table { border: 1px solid #eeeeee; border-radius: 3px; text-align: left; margin: 0; } .product-specs-box .data-table td { padding: 20px 25px; border: none; } .data-table td .color-squares { margin: -5px 0; display: inline-block; vertical-align: middle; } .product-specs-box .data-table td.spec-value { font-size: 16px; color: #444444; border-left: 1px solid #eeeeee; } .product-specs-box .data-table td.spec-name { font-size: 17px; color: #8c8c8c; font-weight: 300; } .attributes-wrapper { margin-bottom: 30px; border: 1px solid #eeeeee; border-radius: 3px; padding: 10px; } .product-variant-line .attributes-wrapper { border: none; } .product-tags-list { font-size: 0; } .product-tags-box { margin: 50px 0 85px; } .product-tags-box:last-child { margin-bottom: 0; } .product-tags-box .title { margin-bottom: 20px; } .product-tags-list li { display: inline-block; color: #8c8c8c; font-size: 16px; /*reset zeroing*/ } .product-tags-list li.separator { margin: 0 5px 0 3px; } .product-tags-list a { display: inline-block; line-height: 24px; color: #97c300; transition: color .2s ease; } .product-tags-list a:hover { color: #7c9a16; } .product-collateral > div.product-variant-list { margin: 50px 0; } .product-variant-line { margin: 0 0 15px; border: 1px solid #eeeeee; border-radius: 3px; padding: 30px 10px; } .product-variant-line:after { content: ""; display: block; clear: both; } .variant-picture { position: relative; width: 100%; max-width: 330px; max-height: 330px; margin: 0 auto 15px; border-radius: 3px; overflow: hidden; } .variant-picture img { max-width: 100%; } .variant-overview { width: 100%; } .variant-overview .variant-name { margin: 0 0 10px; font-size: 22px; color: #444444; font-weight: bold; } .variant-overview .variant-description { margin: 0 0 15px; line-height: 1.5; font-size: 15px; color: #8c8c8c; } .variant-overview .add-to-wishlist-button { display: block; float: none; clear: both; width: 45px; height: 45px; margin: 0 auto; font-size: 0; border: none; background-color: #f2f2f2; border-radius: 3px; transition: all .1s ease; } .variant-overview .add-to-wishlist-button:before { display: block; content: "\63"; font-size: 20px; color: #8e8e8e; transition: all .2s ease; } .variant-overview .add-to-wishlist-button:hover { background-color: #eaeaea; } .ui-tabs { margin: 0 0 20px; } .ui-tabs .ui-tabs-nav { overflow: hidden; text-align: center; } .ui-tabs .ui-tabs-nav li { display: inline-block; margin: 0 15px; } .ui-tabs .ui-tabs-nav li a { display: inline-block; padding: 15px; font-size: 15px; letter-spacing: 1px; font-weight: 700; color: #8c8c8c; border-bottom: 2px solid transparent; text-transform: uppercase; transition: all .1s ease; } .ui-tabs .ui-tabs-nav li a:hover { color: #97c300; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-state-active.ui-tabs-active a { color: #97c300; border-bottom: 2px solid #97c300; } .ui-tabs .ui-tabs-panel { background-color: #f6f6f6; padding: 40px 20px; margin: 0 -10px; } .ui-tabs .ui-tabs-hide { display: none; } /********** ESTIMATE SHIPPING **********/ .estimate-shipping-popup { position: relative; max-width: 800px; margin: auto; background-color: #fff; padding: 25px; transform: scale(0.8); transition: all 0.2s ease; opacity: 0; } .estimate-shipping-popup strong { visibility: hidden; font-weight: 300; text-transform: uppercase; color: #222; } .mfp-ready .estimate-shipping-popup { transform: scale(1); opacity: 1; } .mfp-removing .estimate-shipping-popup { transform: scale(0.8); opacity: 0; } .estimate-shipping-popup-zoom-in.mfp-removing { transition: all 0.3s ease; opacity: 0; } .estimate-shipping-row { display: flex; display: -webkit-flex; align-items: center; position: relative; } .estimate-shipping-row-item { flex: 0 1 100%; } .mfp-container .address-item { display: block; width: auto; margin: 10px 0 0 !important; border: none; padding: 0; } .mfp-container .address-item + div { padding: 0 0 0 15px; } .estimate-shipping-address-control { width: 100%; } select.estimate-shipping-address-control { padding: 0 27px 0 20px; background: #fff url(../Themes/Emporium/Content/img/select-arrow-dark.svg) no-repeat right 10px center; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .mfp-container .address-item .required { position: absolute; top: -6px; right: -9px; } .mfp-container .shipping-options { position: relative; /*preloader referrence*/ margin: 10px 0 30px; } .mfp-container .shipping-header-item { align-self: flex-end; border: none !important; padding: 12px 5px !important; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; } .mfp-container .shipping-options-body { display: table; table-layout: fixed; width: 100%; border: 1px solid #f0f0f0; border-collapse: collapse; } .mfp-container .shipping-option { display: table-row; font-size: 14px; cursor: pointer; } .mfp-container .shipping-option.active { background-color: #f2f2f2; } .mfp-container .shipping-option > div { display: table-cell; border-top: 1px solid #f0f0f0; padding: 12px 11px 11px; } .mfp-container .shipping-item { overflow: hidden; padding: 8px 0; overflow-wrap: break-word; } .estimate-shipping-row-item-radio { flex: 0 0 30px; width: 24px; } .estimate-shipping-radio { display: none; } .estimate-shipping-radio:checked + label:before { margin: 0 !important; position: relative; bottom: 1px; } .estimate-shipping-radio:checked + label:after { display: none; } .apply-shipping-button-container { text-align: center; } .mfp-container .apply-shipping-button { min-width: 120px; border: none; height: 45px; padding: 0 25px; border-radius: 3px; background-color: #eebe00; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 14px; transition: all .2s ease; } .mfp-container .apply-shipping-button:hover { background-color: #e8af00; } .mfp-container .no-shipping-options { padding: 30px 15px; text-align: center; } .mfp-container .message-failure { margin: 10px 0 -5px; } @media all and (max-width: 600px) { .estimate-shipping-popup { padding: 25px 3%; } .mfp-container .shipping-address { flex-flow: column; } .mfp-container .address-item { width: 100%; } .mfp-container .address-item + div { padding: 0; } } /********** PRODUCT REVIEWS **********/ .product-reviews-page h1 a { font-style: italic; transition: all .1s ease; } .product-reviews-page h1 a:hover { color: #8c8c8c; } .write-review .title, .comment-form-btn { position: relative; height: 45px; margin: 0 0 45px; } .write-review .title strong, .comment-form-btn strong { position: absolute; display: inline-block; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 0 25px; height: 45px; max-width: 100%; border-radius: 3px; font-size: 14px; line-height: 45px; text-transform: uppercase; font-weight: 700; background-color: #eebe00; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; transition: all .3s ease; } .write-review .title strong span, .comment-form-btn strong span { transition: all .1s ease; } .product-reviews-page .title strong:before, .comment-form-btn strong:before, .close-comment-form:before { display: inline-block; vertical-align: bottom; margin-right: 10px; font-size: 16px; text-transform: none; font-weight: normal; transition: all .1s ease; } .product-reviews-page .title .close-review-form, .comment-form-btn .close-comment-form { background-color: #e5e5e5; color: #8c8c8c; width: 0; max-width: 0; padding: 0; opacity: .4; } .product-reviews-page .title .close-review-form:before, .comment-form-btn .close-comment-form:before { content: "\76"; color: #8c8c8c; font-size: 12px; } .product-reviews-page .title .write-review-title:before { content: "\79"; color: #fff; opacity: .6; } .product-reviews-page .title .close-review-form:hover { background-color: #eaeaea; } .product-reviews-page .title .write-review-title:hover { background-color: #e8af00; } .comment-form-btn .open-comment-form, .product-reviews-page .title .write-review-title { transition: width .3s ease .3s, max-width .3s ease .3s, padding .3s ease .3s, opacity .3s ease .3s, background-color .2s ease 0s; opacity: 1; } .comment-form-btn.open .open-comment-form, .product-reviews-page .title.open .write-review-title { width: 0; max-width: 0; padding: 0; opacity: .4; transition-delay: 0s; } .comment-form-btn .open-comment-form span, .comment-form-btn .open-comment-form:before, .product-reviews-page .title .write-review-title span, .product-reviews-page .title .write-review-title:before { opacity: 1; } .comment-form-btn.open .open-comment-form span, .comment-form-btn.open .open-comment-form:before, .product-reviews-page .title.open .write-review-title span, .product-reviews-page .title.open .write-review-title:before { opacity: 0; } .comment-form-btn.open .close-comment-form, .product-reviews-page .title.open .close-review-form { width: auto; max-width: 280px; padding: 0 25px; opacity: 1; transition: width .3s ease .3s, max-width .3s ease .3s, padding .3s ease .3s, opacity .3s ease .3s, background-color .2s ease 0s; } .comment-form-btn .close-comment-form:before, .comment-form-btn .close-comment-form span, .product-reviews-page .title .close-review-form span, .product-reviews-page .title .close-review-title:before { opacity: 0; } .comment-form-btn.open .close-comment-form:before, .comment-form-btn.open .close-comment-form span, .product-reviews-page .title.open .close-review-form span, .product-reviews-page .title.open .close-review-title:before { opacity: 1; } .write-review { margin: 0 0 50px; text-align: center; } .write-review-collapse { display: none; padding: 20px; max-width: 740px; margin: 0 auto; border-radius: 3px; border: 1px solid #eeeeee; background-color: #fff; } .write-review .form-fields { margin: 0 0 15px; } .write-review .review-rating { text-align: center; margin-top: 20px; } .write-review .review-rating > label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; } .review-rating .tooltip { position: relative; } .review-rating .tooltip:hover .tooltiptext { opacity: 1; } .review-rating .tooltiptext { position: absolute; bottom: 100%; margin-bottom: 10px; background: #e5e5e5; left: 50%; padding: 8px 15px; border-radius: 3px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-weight: normal; color: #444; opacity: 0; pointer-events: none; transition: all .2s ease; } .review-rating .tooltiptext:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #e5e5e5; border-width: 8px; margin-left: -8px; } .review-rating ul { font-size: 0; vertical-align: middle; } .rating-options { display: inline-block; overflow: hidden; font-size: 0; } .write-review .rating-options * { float: left; } .write-review .rating-options input { position: absolute; z-index: -1; opacity: 0; } .write-review .rating-options label { position: relative; display: inline-block; width: 25px; height: 25px; background-position: 0 0; background-size: contain; font-size: 0; cursor: pointer; } .write-review .rating-options label:before, .write-review .rating-options input[type="radio"]:checked + label:before { display: inline-block; content: "\e900"; color: #ffcd46; font-size: 25px; border: none; background-color: transparent; box-shadow: none; margin: 0; width: 25px; height: 25px; line-height: 1; transition: all .2s ease; } .write-review .rating-options:hover label:before { color: #ffcd46 !important; } .write-review .rating-options:hover label:hover:before, .write-review .rating-options:hover input:checked ~ label:before, .write-review .rating-options input:checked ~ label:hover:before { color: #ffcd46; } .write-review .rating-options label:hover ~ label:before { color: #e0e0e0 !important; } .write-review .rating-options:hover input:checked ~ label:hover ~ label:before, .write-review .rating-options input:checked ~ label:hover ~ label:before, .write-review .rating-options input:checked ~ label ~ label:before { color: #e0e0e0; } .write-review .rating-options input:checked + label:before { -webkit-animation: stars .7s linear; -moz-animation: stars .7s linear; animation: stars .7s linear; } .write-review .review-rating li.first { color: #ff4f60; } .write-review .product-review-links, .write-review .product-review-box { margin: 0 0 15px; } .write-review .product-review-links a { font-size: 16px; color: #8c8c8c; font-weight: 700; transition: all .1s ease; } .write-review .product-review-links a:hover { color: #444; } .write-review .captcha-box { margin: 15px 0 0; } .write-review .button-1 { display: block; border: none; padding: 0 25px; height: 45px; width: 100%; border-radius: 3px; background-color: #eebe00; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 700; transition: all .2s ease; } .write-review .button-1:hover { background-color: #e8af00; } .product-reviews-page .result, .product-reviews-page .message-error { margin: 0 0 20px; } .product-review-list { overflow: hidden; margin-bottom: 30px; border: 1px solid #e7e7e7; background-color: #fff; border-radius: 3px; } .product-review-list:last-child { margin-bottom: 0; } .product-review-item { border-bottom: 1px solid #e7e7e7; padding: 30px 20px; text-align: center; overflow: hidden; } .product-review-item:last-child { border-bottom: 0; } .product-review-item .product-review-box { display: block; margin-bottom: 12px; margin: 0 0 5px; } .product-review-item .product-review-box .rating { margin: 0 auto; } .product-review-item .review-item-head { margin: 0 0 15px; text-align: center; } .product-review-item .review-title { font-size: 15px; font-weight: 400; color: #444; } .product-review-item .review-text { margin: 0 0 25px; font-size: 15px; color: #8c8c8c; } .review-type-rating-ext .review-title { display: none; } .product-review-item .review-text:last-child { margin-bottom: 0; } .product-review-item .review-info { margin: 0 0 10px; } .product-review-item .review-info .avatar { margin: 15px 0; font-size: 0; } .product-review-item .review-info .avatar a { display: block; font-size: 0; line-height: normal; } .product-review-item .review-info a, .product-review-item .review-info span span { display: inline-block; font-weight: 300; font-size: 17px; line-height: 18px; color: #8c8c8c; transition: all .1s ease; } .product-review-item .review-info .user, .product-review-item .review-info .user a { font-size: 17px; color: #8c8c8c; } .product-review-helpfulness { margin-top: 30px; } .product-review-item .review-info a:hover { color: #444; } .product-review-item .review-info span span { font-size: 14px; } .product-review-item .review-info span { display: block; vertical-align: middle; line-height: 18px; } .product-review-item .review-info .separator { margin: 0 5px; font-size: 18px; font-weight: 300; visibility: hidden; } .product-review-item .review-info span label { display: none; } .product-review-helpfulness > span { display: block; margin-top: 10px; font-size: 15px; color: #8c8c8c; } .product-review-helpfulness > span:first-child { margin-top: 0; } .vote-stats > span { display: inline-block; margin: 0 3px; } .product-review-helpfulness .vote { display: inline-block; padding: 5px 5px 0 5px; font-size: 0; cursor: pointer; } .product-review-helpfulness .vote:before { display: block; font-size: 20px; color: #8c8c8c; transition: all .2s ease; } .product-review-helpfulness .vote:hover:before { color: #97c300; } .product-review-helpfulness .vote:first-child:before { content: "\46"; } .product-review-helpfulness .vote:last-child:before { content: "\47"; } .product-review-helpfulness .vote:first-child:hover:before { content: "\e902"; } .product-review-helpfulness .vote:last-child:hover:before { content: "\e901"; } .product-review-helpfulness .result { margin: 0 0 0 10px; } .product-review-item .reply { margin: 30px 0 0; padding: 15px; border-radius: 3px; background-color: #f6f6f6; } .product-review-item .reply-header { margin: 0 0 10px; font-weight: bold; font-size: 15px; color: #444; } .product-review-item .reply-text { font-size: 14px; } /********** WISHLIST & COMPARE LIST **********/ .wishlist-content { margin: 0 0 20px; } .wishlist-content > .message-error { margin: 0 0 20px !important; text-align: center; } .wishlist-content .tax-shipping-info { margin: 0 0 30px; font-size: 15px; color: #444; } .wishlist-content .cart { margin-bottom: 30px; } .wishlist-content .buttons { font-size: 0; } .wishlist-content .button-2 { position: relative; display: block; border: none; height: 45px; width: 255px; line-height: 45px; padding: 0 20px; margin: 0 auto 7px; background-color: #f1f1f1; border-radius: 3px; font-size: 14px; text-transform: uppercase; color: #8c8c8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .1s ease; } .wishlist-content .button-2:hover { background-color: #eaeaea; } .wishlist-content .wishlist-add-to-cart-button:before { content: "\64"; } .update-wishlist-button, .email-a-friend-wishlist-button { position: relative; overflow: hidden; } .update-wishlist-button span, .email-a-friend-wishlist-button span { position: relative; z-index: 1; } .update-wishlist-button:before { content: "\59"; } .update-wishlist-button:hover:before { -webkit-animation: updating 1s linear infinite; -moz-animation: updating 1s linear infinite; animation: updating 1s linear infinite; } .update-wishlist-button:hover::after { height: 100%; opacity: .6; transition: all .5s ease-in; } .email-a-friend-wishlist-button:before { content: "\6d"; } .email-a-friend-wishlist-button:hover:before { -webkit-animation: emailing .2s linear; -moz-animation: emailing .2s linear; animation: emailing .2s linear; } .wishlist-page .share-info { margin: 70px -10px 50px; background-color: #f9f9f9; padding: 30px 20px; } .wishlist-page .share-label { display: block; margin-bottom: 10px; font-size: 15px; color: #8c8c8c; } .wishlist-page .share-info a { display: block; font-size: 15px; color: #97c300; } .compare-products-page .page-body { text-align: center; } .compare-products-page .clear-list { position: relative; display: inline-block; padding: 0 25px; margin: 0 0 8px; font-weight: 700; border-radius: 3px; color: #8c8c8c; background-color: #f6f6f6; font-size: 13px; height: 45px; line-height: 45px; text-transform: uppercase; overflow: hidden; transition: all .2s ease; } .compare-products-page .clear-list span { position: relative; z-index: 1; } .compare-products-page .clear-list:before { content: "\5a"; position: relative; display: inline-block; vertical-align: bottom; margin-right: 10px; font-size: 20px; color: #8c8c8c; text-transform: none; font-weight: normal; transition: all .2s ease !important; z-index: 1; } .compare-products-page .clear-list:hover:before { -webkit-animation: swiping 0.82s cubic-bezier(0.035, 0.225, 0.885, 0.290) both; -moz-animation: swiping 0.82s cubic-bezier(0.035, 0.225, 0.885, 0.290) both; animation: swiping 0.82s cubic-bezier(0.035, 0.225, 0.885, 0.290) both; } .compare-products-table { display: none; } .compare-products-mobile { border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; margin: 0 -10px; } .compare-products-mobile .compare-section > ul { padding: 17px 10px; text-align: left; overflow: hidden; } .compare-products-mobile .product { overflow: hidden; } .compare-products-mobile .product .item { position: relative; } .compare-products-mobile .product-name { padding-right: 40px; font-size: 15px; color: #444; font-weight: 700; } .compare-products-mobile .item { padding: 3px 10px; } .compare-products-mobile .item .picture, .compare-products-mobile .item img { display: inline-block; vertical-align: middle; margin-right: 10px; max-width: 50px; } .compare-products-mobile .item .details, .compare-products-mobile .item > span, .compare-products-mobile .item > p { display: inline-block; vertical-align: middle; max-width: calc(100% - 63px); font-size: 15px; font-weight: 400; color: #8c8c8c; } .compare-products-mobile .item p { vertical-align: top; margin-bottom: 20px } .compare-products-mobile .title { padding: 15px 20px; font-size: 17px; color: #8c8c8c; font-weight: 300; background-color: #f6f6f6; } .compare-section.product .title { display: none; } .compare-products-page .remove-button { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 3px; background-color: #f1f1f1; text-align: center; font-size: 0; border: none; transition: all .1s ease; } .compare-products-page .remove-button:hover { background-color: #e9e9e9; } .compare-products-page .remove-button:before { content: "\4d"; display: block; color: #8c8c8c; font-size: 16px; } .compare-products-mobile .remove-button { position: absolute; top: 8px; right: 5px; left: auto; } .compare-products-mobile .price .item span { font-size: 17px; font-weight: 700; color: #97c300; } .compare-products-page .attribute-squares { display: inline-block; vertical-align: middle; } .compare-products-page .attribute-square { margin: 0 auto; } /*********** TOPICS ***********/ .topic-block { margin: 0 auto 30px; padding: 0 10px; text-align: center; max-width: 1000px; } .home-page .topic-block { margin: 0 0 30px; } .topic-block-title { margin: 0 0 20px; } .topic-block-title h1 { font-weight: 700; color: #444; } .topic-block-title h2 { font-weight: 700; color: #8c8c8c; } .topic-block-body p { line-height: 1.5; font-size: 16px; color: #8c8c8c; font-weight: 400; } .topic-block-body li { font-size: 15px; color: #8c8c8c; line-height: 2; } .topic-block a, .topic-page a { text-decoration: underline; } .topic-page .page-body { line-height: 20px; max-width: 1000px; margin: 0 auto; } .topic-page ul, .topic-page ol { font-size: 15px; line-height: 1.5; color: #8c8c8c; } .home-page .topic-block { margin: 0 auto 50px; text-align: center; } .home-page .topic-block-title h2 { font-size: 28px; color: #444444; } .home-page .topic-block-body { padding: 0 10px; } .popup-window .topic-page { padding: 15px; } .not-found-page p { margin: 30px 0; } .topic-password { text-align: center; } .enter-password-title { margin: 0 0 20px; color: #8c8c8c; font-size: 15px; } .enter-password-form { display: inline-block; overflow: hidden; } .enter-password-form input[type="password"] { float: left; width: calc(100% - 100px); height: 36px; border-radius: 3px 0 0 3px; } .enter-password-form button { float: left; width: 100px; height: 36px; border: none; border-radius: 0 3px 3px 0; padding: 0 20px; } .password-error { margin: 0 0 10px; } /*********** CONTACT & EMAIL A FRIEND ***********/ .contact-page .form-fields, .email-a-friend-page .form-fields, .apply-vendor-page .form-fields { margin: 0 0 15px; } .contact-page .message-error, .email-a-friend-page .message-error, .apply-vendor-page .message-error { margin: 0 0 10px; } .contact-page .topic-block { margin-bottom: 40px; } .email-a-friend-page .title { margin: 0 0 30px; font-size: 16px; } .email-a-friend-page .title h2 { font-size: 16px; font-weight: 300; } .email-a-friend-page .title a { color: #97c300; } .apply-vendor-page .terms-of-service { margin: 30px 0; } .bb-code-editor-wrapper { margin-bottom: 5px; } /********** REGISTRATION, LOGIN, ACCOUNT PAGES **********/ .login-page .title strong, .registration-page .title strong { font-weight: 300; color: #8c8c8c; } .registration-page .page-title + .message-error { margin-bottom: 30px; } .gender { font-size: 0; } .gender span:first-child { display: inline-block; margin-right: 40px; } .gender label { display: inline-block; padding: 8px 0; width: auto !important; cursor: pointer; font-weight: 300; } .gender input:checked + label { color: #444; } .date-picker-wrapper { width: 100%; } .date-of-birth .date-picker-wrapper select { border-radius: 0; padding: 0 25px 0 10px; width: 46%; background: #fff url(../Themes/Emporium/Content/img/select-arrow-dark.svg) no-repeat right 10px center; } .date-of-birth .date-picker-wrapper select:first-child { border-radius: 3px 0 0 3px; width: 27%; } .date-of-birth .date-picker-wrapper select:last-child { border-radius: 0 3px 3px 0; width: 27%; } .date-of-birth select + select { margin: 0 0 0 -1px; } #check-availability-button { display: block; border: none; border-radius: 3px; vertical-align: top; background-color: #f1f1f1; color: #8c8c8c; text-transform: uppercase; padding: 0 20px; margin: 10px auto 0; height: 45px; font-size: 13px; font-weight: 700; transition: all .1s ease; } #check-availability-button:hover { background-color: #eaeaea; } #username-availabilty { display: block; margin: 5px 0 0; text-align: center; font-size: 13px; } #username-availabilty:empty { display: none; } .login-page .forgot-password { font-size: 13px !important; font-weight: 700 !important; } .vat-status, .vat-note { display: block; margin: 5px 0 0; text-align: center; font-size: 12px; /*reset zeroing*/ white-space: normal; } .inputs.accept-consent { margin: 0 0 20px; text-align: center; } .inputs.accept-consent .read { margin-left: 5px; font-size: 15px; color: #97c300; cursor: pointer; clear: none; transition: all .1s ease; } .center-2 .product-list .item-box .buttons .button-2:hover { background-color: #e8af00; } .email-a-friend-page .button-1:only-child, .contact-page .buttons .button-1:only-child, .forum-edit-page .button-1:only-child, .registration-page .button-1:only-child, .apply-vendor-page .button-1:only-child { width: 100%; } .forum-edit-page .buttons, .private-message-send-page .buttons, .move-topic-page .buttons { font-size: 0; } .forum-edit-page .buttons button, .private-message-send-page .buttons button, .move-topic-page .buttons button { width: 49%; margin: 0 0 0 2%; } .forum-edit-page .buttons button:nth-child(2n+1), .private-message-send-page .buttons button:nth-child(2n+1), .move-topic-page .buttons button:nth-child(2n+1) { margin-left: 0; } .account-page .button-1, .return-request-page .button-1, .user-agreement-page .button-1 { width: auto; min-width: 125px; } .account-page .save-customer-info-button { min-width: 100px !important; } .registration-result-page .result { margin: 0 0 30px; color: #8c8c8c; } .login-page .in-header-register { display: none; } .page.login-page { text-align: center; } .login-page .page-title, .registration-page .page-title { text-align: center; } .login-page .customer-blocks { margin: 0 0 50px; } .login-page .customer-blocks:after { content: ""; display: block; clear: both; } .login-page .customer-blocks + .topic-block { margin-bottom: 50px; } .login-page .new-wrapper, .login-page .returning-wrapper form, .registration-page .page-body, .email-a-friend-page .page-body form, .password-recovery-page .page-body, .private-message-send-page .page-body, .contact-page .page-body form, .apply-vendor-page .page-body form, .forum-edit-page .page-body, .form-style, .move-topic-page .page-body { max-width: 600px; margin: 0 auto 30px; border: 1px solid #eee; border-radius: 3px; } .registration-page .page-body, .email-a-friend-page .page-body form, .contact-page .page-body form, .apply-vendor-page .page-body form, .forum-edit-page .page-body, .password-recovery-page .page-body, .private-message-send-page .page-body, .move-topic-page .page-body { max-width: none; margin-bottom: 0; } .registration-page, .email-a-friend-page, .contact-page, .apply-vendor-page, .forum-edit-page, .password-recovery-page, .private-message-send-page, .move-topic-page { max-width: 800px; margin: 0 auto; } .email-a-friend-page .page-body form, .contact-page .page-body form, .apply-vendor-page .page-body form, .forum-edit-page .page-body, .form-style, .password-recovery-page .page-body, .private-message-send-page .page-body, .move-topic-page .page-body { padding: 40px 20px; } .login-page .title, .registration-page .title { margin: 0; padding: 18px; font-size: 18px; color: #8c8c8c; background-color: #f9f9f9; border-radius: 3px 3px 0 0; text-align: center; } .login-page .topic-block-title h2 { color: #444; } .title + .message-error { margin: 20px 20px 0; } .login-page .title strong { font-weight: 300; } .login-page .text { padding: 30px 20px 20px; font-size: 16px; line-height: 1.8; font-weight: 400; color: #8c8c8c; } .new-wrapper .text:before { content: "\79"; display: block; margin-bottom: 15px; font-size: 55px; line-height: initial; color: #c6c6c6; } .returning-wrapper .form-fields, .registration-page .form-fields { padding: 30px 20px 20px; } label[for="Newsletter"], .inputs.accept-consent label { color: #444 !important; clear: none; } .login-page .buttons, .registration-page .buttons { padding: 10px 20px 20px; } .login-page .inputs.reversed label, .login-page .inputs.reversed span { margin: 0; width: auto; font-size: 13px; /*reset zeroing*/ color: #8c8c8c; font-weight: 400; } .login-page .inputs.reversed label { float: left; clear: none; } .login-page .inputs.reversed span { float: right; clear: none; } .login-page .inputs.reversed a:hover { color: #444; } .login-page .inputs.reversed input[type="checkbox"] + label:before { vertical-align: bottom; } .login-page .returning-wrapper .external-authentication { clear: both; } .login-page .external-authentication > * { margin: 30px -10px 0; padding: 30px 0; width: calc(100% + 20px); background-color: #f9f9f9; text-align: center; } .login-page .external-authentication .buttons { margin: 0; padding: 0; } .external-authentication .title { display: none; } .password-recovery-page .tooltip { margin: 0 0 20px; font-size: 15px; color: #8c8c8c; line-height: 1.5; } .password-recovery-page .result { margin: 0 0 5px; font-weight: bold; } .select-navigation { padding: 20px; background-color: #f6f6f6; text-align: center; } .select-navigation select { background-color: #fff; width: 300px; } .html-account-page .side-2 { margin-bottom: 3px; } .html-account-page .master-wrapper-content { padding: 40px 0 0; } .account-page { padding: 40px 10px; background-color: #f6f6f6; } .account-page .data-table { text-align: center; } .account-page .fieldset { margin-bottom: 40px; } .registration-page .fieldset { margin-bottom: 20px; } .account-page .section > .title, .reward-points-overview, .forum-subscriptions-page .description { text-align: center; } .account-page .title { margin-bottom: 20px; font-size: 18px; color: #8c8c8c; text-align: center; } .account-page .title strong { font-size: 18px; color: #8c8c8c; font-weight: 300; } .customer-info-page .page-body, .change-password-page .page-body, .check-gift-card-balance-page .page-body, .avatar-page .page-body, .address-edit-page .page-body, .vendorinfo-page .page-body { padding: 20px; max-width: 740px; margin: 0 auto; border-radius: 3px; border: 1px solid #eeeeee; background-color: #fff; } .account-page .inputs { text-align: left; } .account-page .button-2 { border: none; padding: 0 20px; height: 40px; /*line-height: 40px;*/ border-radius: 3px; vertical-align: top; background-color: #f1f1f1; font-size: 13px; color: #8c8c8c; text-transform: uppercase; font-weight: 700; transition: all .1s ease; } .account-page .button-2:hover { background-color: #eaeaea; } .account-page .button-2.return-items-button { display: block; width: auto; height: auto; margin: 20px auto 0; padding: 0; background-color: transparent; transition: all .2s ease; } .account-page .button-2.return-items-button:before { content: "\4f"; display: inline-block; vertical-align: bottom; margin-right: 10px; font-size: 14px; color: #8c8c8c; text-transform: none; font-weight: normal; transition: all .2s ease; } .account-page .button-2.return-items-button:hover, .account-page .button-2.return-items-button:hover:before { color: #97c300; } .account-page .edit-address { margin: 0 0 20px; } .account-page .description, .reward-points-overview, .result { margin-bottom: 20px; line-height: 1.5; font-size: 17px; color: #8c8c8c; font-weight: 300; text-align: center; } .result { text-align: center; } .html-account-page .multi-factor-authentication-page .page-title { padding: 0 0 0 0; } .multi-factor-authentication-page .page-body { width: 90%; margin: 0 auto; } .multi-factor-authentication-page .page-body .description { text-align: left; line-height: 26px; } .multi-factor-authentication-page .form-fields { position: relative; padding: 30px 15px; background-color: #ffffff; border-radius: 3px; border: 1px solid #eeeeee; } .multi-factor-authentication-page .fieldset { padding: 20px 0px 0px 0px; } .account-page.multi-factor-authentication-page .buttons { text-align: center; margin: 40px auto 10px; } .multi-factor-authentication-page .payment-method .method-list li { padding: 0; } .multi-factor-authentication-page .payment-method .payment-logo { text-align: center; } .multi-factor-authentication-config-page table { margin: 20px 0px; } .multi-factor-authentication-config-page .buttons { margin-top: 20px; } .account-page.multi-factor-authentication-page .payment-method .method-list input[type="radio"] + label:before { position: initial; left: 0; top: 0; margin-top: 2px; transform: none; } .account-page.multi-factor-authentication-page .payment-method .method-list li { max-width: 740px; padding: 30px 65px; } .address-item, .add-button, .order-item, .request-item { padding: 40px 20px; margin-bottom: 20px; background-color: #fff; border: 1px solid #eee; border-radius: 3px; vertical-align: top; } .add-button:before { display: block; margin-bottom: 40px; content: "\55"; font-size: 100px; color: #8e8e8e; } .address-item .title, .order-item .title, .request-item .title { margin-bottom: 12px; color: #444; } .address-item .title strong, .order-item .title strong, .request-item .title strong { font-weight: 700; color: #444; font-size: 18px; } .email-to-revalidate, .email-to-revalidate-note { display: inline-block; margin: 10px 5px; vertical-align: top; font-size: 12px; /*reset zeroing*/ white-space: normal; } .address-item .info, .order-item .info { margin: 0 0 30px; } .address-item li, .order-item li, .request-item li { margin-bottom: 3px; font-size: 16px; color: #959595; line-height: 1.3; } .address-list-page .info li > label, .order-list-page .info li > label { display: none; } .address-item .name, .address-item .email { font-weight: 700; font-size: 16px; color: #444; } .address-item .email { margin-bottom: 10px; } .button-2.edit-address-button, .button-2.delete-address-button { border: none; border-radius: 3px; width: 40px; height: 40px; margin: 0 2px; background-color: #f1f1f1; background-position: center; background-repeat: no-repeat; font-size: 0; } .button-2.edit-address-button { background-image: url('../Themes/Emporium/Content/img/edit-icon.png'); } .button-2.delete-address-button { background-image: url('../Themes/Emporium/Content/img/delete-icon.png'); } .return-request-list-page a { font-weight: bold; color: #444; } .return-request-list-page .comments { margin: 15px 0 0; } .user-agreement-page .terms-of-agreement { margin: 0 0 20px; text-align: center; } .reward-points-overview { margin: 0 0 15px; } .avatar-page .message-error { margin: 0 0 10px; } .avatar-page .fieldset { margin: 0 auto 30px; text-align: center; } .avatar-page .image { margin: 0 0 10px; } .account-page .button-1 { height: 40px; /*line-height: 40px;*/ font-size: 13px; font-weight: 700; } .avatar-page .info { margin: 0 0 30px; font-size: 15px; color: #959595; text-align: center; } .account-page.avatar-page .buttons { text-align: center; } .avatar-page .upload-image { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .avatar-page .upload-image + label { display: inline-block; cursor: pointer; } .avatar-page .upload-image.valid + label { background-color: #97c300; color: #fff; } .avatar-page .upload-image.valid + label:hover { background-color: #5c7600; } .avatar-page .upload-image.valid + label:before { content: "\30"; display: inline-block; vertical-align: middle; margin-right: 10px; color: #fff; text-transform: lowercase; font-size: 13px; } .avatar-page .upload-image:focus + label, .avatar-page .upload-image + label:hover { background-color: #eaeaea; } .vendorinfo-page .vendor-picture { margin: 10px 0 0; text-align: center; } .vendorinfo-page .vendor-picture img { display: block; margin: 0 auto 10px; } .reward-points-history { margin-bottom: 0; } .gdpr-tools-page .form-fields + .buttons { margin-top: 30px; } .check-gift-card-balance-page .captcha-box { margin-bottom: 25px; } /********** SHOPPING CART **********/ .order-progress { margin: 0 0 40px; text-align: center; } .order-progress ul { font-size: 0; } .order-progress li { display: inline-block; } .order-progress a { position: relative; width: 50px; height: 50px; display: block; font-size: 0; /*reset zeroing*/ } .order-progress a:before { content: ""; position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 15px; height: 15px; background-color: #eee; border-radius: 50%; border: 0; color: #fff; box-shadow: none; z-index: 1; transition: all .5s ease 0s, color .4s ease .4s; } .order-progress .active-step.last a:before { content: "\64"; font-size: 20px; text-indent: -2px; background-color: #fff; width: 50px; height: 50px; color: #8e8e8e; line-height: 43px; text-align: center; font-weight: normal; text-transform: none; border: 3px solid #97c300; box-shadow: 0 0 15px rgba(0,0,0,.2); } .order-progress a:after { content: ""; position: absolute; display: block; width: 100%; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 3px; background-color: #eee; z-index: 0; } .order-progress li:first-child a:after, .order-progress li:last-child a:after { width: 50%; } .order-progress li:first-child a:after { right: 0; left: auto; } .order-progress .active-step a { cursor: pointer; } .order-progress .active-step:not(.last) a:hover:before { background-color: #97c300; width: 20px; height: 20px; transition: all .3s ease; } .order-progress li.inactive-step a { cursor: default; } .checkout-buttons .button-1 { width: 100%; font-size: 15px; } .no-data { text-align: center; font-size: 15px; color: #8c8c8c; } .shopping-cart-page .common-buttons button, .shopping-cart-page .cart-collaterals .button-2, .checkout-page .button-2, .order-details-page .page-title a { display: inline-block; border: none; height: 45px; line-height: 45px; padding: 0 25px; margin: 0 2px; background-color: #f1f1f1; border-radius: 3px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #8c8c8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .1s ease; } .order-details-page .repost .button-2 { display: inline-block; border: none; height: 45px; line-height: 45px; padding: 0 25px; margin: 0 2px; background-color: #0a6dbe; border-radius: 3px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .1s ease; } .shopping-cart-page .common-buttons button:hover, .shopping-cart-page .cart-collaterals .button-2:hover, .checkout-page .button-2:hover, .order-details-page .page-title a:hover { background-color: #eaeaea; } .order-details-page .repost .button-2:hover { background-color: #0065b3; } .shopping-cart-page .common-buttons { margin-bottom: 50px; font-size: 0; } .shopping-cart-page .common-buttons button { position: relative; display: block; margin: 0 auto 7px; padding: 0 20px; width: 255px; } .shopping-cart-page .common-buttons button:before, .wishlist-content .button-2:before { position: relative; display: inline-block; vertical-align: bottom; margin-right: 10px; font-size: 20px; color: #8c8c8c; font-weight: normal; text-transform: none; transition: all .2s ease !important; z-index: 1; } .continue-shopping-button:before { content: "\64"; } .update-cart-button:before { content: "\59"; } .clear-cart-button:before { content: "\5a"; } .clear-cart-button:hover:before { -webkit-animation: swiping 0.82s cubic-bezier(0.035, 0.225, 0.885, 0.290) both; -moz-animation: swiping 0.82s cubic-bezier(0.035, 0.225, 0.885, 0.290) both; animation: swiping 0.82s cubic-bezier(0.035, 0.225, 0.885, 0.290) both; } .clear-cart-button span, .update-cart-button span { position: relative; z-index: 1; } .update-cart-button:hover:before { -webkit-animation: updating 1s linear infinite; -moz-animation: updating 1s linear infinite; animation: updating 1s linear infinite; } .shopping-cart-page .tax-shipping-info { margin: 0 0 30px; font-size: 14px; color: #444; } .shopping-cart-page .product-grid { clear: both; float: left; width: 100%; margin: 70px 0 0; } .remove-discount-button, .remove-gift-card-button { width: 16px; height: 16px; border-radius: 3px; margin: 0 0 0 5px; border: none; background: #f1f1f1 url('../Themes/Emporium/Content/img/close.png') center no-repeat; cursor: pointer; } .remove-discount-button:hover, .remove-gift-card-button:hover { background-color: #e9e9e9; } .shopping-cart-page .message-error { margin: 0 0 20px !important; font-size: 13px; } .shopping-cart-page .order-summary-content > .message-error { text-align: center; } .cart-options { margin: 0; text-align: center; } .cart-options > *:last-child { margin-bottom: 2px; } .cart-options .common-buttons { font-size: 0; } .cart-options .common-buttons button { min-width: 150px; margin: 0 5px 5px; } .cart-options .checkout-attributes { text-align: left; } .cart-options .checkout-attributes dl { max-width: 400px; margin: 0 auto; } .cart-options .checkout-attributes dt { margin: 0 0 5px; font-weight: bold; } .cart-options .checkout-attributes dd { margin: 0 0 15px; } .cart-options .checkout-attributes li { line-height: 24px; } .section.options { margin-bottom: 3px; } .checkout-attributes, .selected-checkout-attributes { padding: 30px 20px; margin: 20px 0 0; border-radius: 3px; background-color: #f6f6f6; font-size: 15px; color: #444; } .cart-footer:after { content: ""; display: block; clear: both; } .cart-footer .total-info { margin: 0 0 30px; } .cart-footer .total-info:only-child { margin: 0; } .totals { border-radius: 3px; padding: 50px 20px; background-color: #f6f6f6; } .totals > div { max-width: 400px; margin-left: auto !important; margin-right: auto !important; } .cart-total td { width: 50%; padding: 7px 5px; font-size: 16px; color: #444; font-weight: 400; } .cart-total td label { font-size: 16px; color: #444; font-weight: 400; } .order-total td label, .order-total td span { font-size: 22px; color: #97c300; font-weight: 700; } .cart-total-left { text-align: left; } .cart-total-right { text-align: right; } .cart-total .order-total { font-size: 16px; color: #97c300; } .terms-of-service { margin: 0 0 30px; text-align: center; } .terms-of-service input[type="checkbox"] + label { display: inline; cursor: pointer; font-weight: 400; font-size: 16px; } .terms-of-service input[type="checkbox"] + label:before { vertical-align: middle; } .terms-of-service .read { margin: 0 0 0 3px; font-size: 15px; font-weight: 400; cursor: pointer; color: #97c300; } .terms-of-service .read:hover { color: #7c9a16; } .cart-footer .addon-buttons > img:first-child, .cart-footer .addon-buttons > p:first-child { margin: 20px 0 0; } .cart-collaterals { max-width: 100%; margin: 0 auto 30px; } .cart-collaterals > div { border: 1px solid #eee; border-radius: 3px; margin: 0 0 10px; overflow: hidden; } .cart-collaterals > div > .title { position: relative; display: block; height: 60px; padding: 0 20px 0 20px; margin: 0; line-height: 60px; color: #444; font-size: 18px; font-weight: 300; text-align: center; background-color: #f6f6f6; border-radius: 3px 3px 0 0; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all .1s ease; } .cart-collaterals > div > .title a { display: block; margin: 0 -20px; padding: 0 20px; } .cart-collaterals > div > .title:hover { color: #97c300; } .cart-collaterals > div > .title:before { content: "\57"; position: absolute; display: inline-block; top: 50%; left: 20px; font-size: 10px; color: #97c300; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-transform: none; transition: all .3s ease; } .cart-collaterals .deals .title.open:before { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .cart-collaterals > div > .list { display: none; padding: 30px 20px; } .cart-collaterals .title { margin: 0 0 10px; font-size: 18px; color: #444; } .cart-collaterals .hint { margin: 0 0 20px; font-size: 15px; color: #8c8c8c; } .cart-collaterals .coupon-code { overflow: hidden; font-size: 0; } .cart-collaterals .coupon-code input[type="text"], .cart-collaterals .coupon-code input[type="email"], .cart-collaterals .coupon-code input[type="tel"] { float: left; width: calc(100% - 105px); } .cart-collaterals .coupon-code button { float: left; width: 100px; padding: 0 15px; height: 45px; margin: 0 0 0 5px; border-radius: 3px; } .cart-collaterals .message-failure { margin: 5px 0 0; color: #ff4f60; font-size: 13px; font-weight: 700 } .cart-collaterals .message-success { margin: 5px 0 0; color: #97c300; font-size: 13px; font-weight: 700 } .cart-collaterals .current-code { margin: 7px 0 0; color: #444; font-size: 14px; } .coupon-code + .current-code { margin-top: 10px; } .cart-collaterals .shipping-results { margin: 30px 0 0; } .cart-collaterals .shipping-results li { margin: 10px 0 0; font-size: 14px; color: #8c8c8c; } .cart-collaterals .shipping-results li strong { color: #444; } .cart-collaterals .shipping-results li:first-child { margin-top: 0; } .cart-collaterals .shipping-results .option-description { font-weight: 400; } .coupon-box + .giftcard-box, .shipping-options .buttons { margin-top: 30px; } .estimate-shipping-result { margin-top: 20px; font-size: 13px; font-weight: 700; text-align: center; color: #ff4f60; } /********** CHECKOUT **********/ .checkout-page .section { margin: 0 0 50px; } .checkout-page .section .title { margin: 0 0 30px; text-align: center; } .checkout-page .add-button:before { content: none; display: none; } .checkout-page .select-billing-address > .title { display: none; } .checkout-page .order-summary > .title strong { font-size: 24px; font-weight: 700; } .checkout-page .min-amount-warning { display: block; margin: 0 0 25px; text-align: center; font-size: 13px; color: #ff4f60; font-weight: 700; } .ship-to-same-address, .pickup-in-store { margin-top: 40px !important; text-align: center; } .ship-to-same-address input[type="checkbox"] + label, .pickup-in-store input[type="checkbox"] + label { font-weight: 700; color: #444; } .pickup-in-store .description { margin: 10px 0 0; font-size: 15px; color: #8c8c8c; font-weight: 400; } .pickup-points .message-error { text-align: center; margin: 20px 0 !important; } .checkout-page .address-grid { overflow: hidden; font-size: 0; } .address-grid > div { max-width: 550px; margin-left: auto; margin-right: auto; } .checkout-page .message-error { text-align: center; margin-top: 25px; } .checkout-page .multiple-locations { text-align: center; margin-bottom: 25px; font-weight: 700; color: #97c300; } .checkout-page .add-button .btn-holder:before { display: block; margin-bottom: 40px; content: "\55"; font-size: 100px; color: #8e8e8e; transition: all .3s ease; } .checkout-page .add-button .btn-holder.open:before { color: #97c300; } .checkout-page .add-button .enter-address { display: none; } .checkout-page .btn-holder { position: relative; padding-bottom: 45px; } .checkout-page .btn-holder label { position: absolute; display: inline-block; top: auto; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); line-height: 45px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: all .3s ease; } .add-button .btn-holder .open-address-form { transition: width .3s ease .3s, max-width .3s ease .3s, padding .3s ease .3s, opacity .3s ease .3s, background-color .2s ease 0s; opacity: 1; } .add-button .btn-holder.open .open-address-form { max-width: 0; padding: 0; opacity: .4; transition-delay: 0s; } .checkout-page .btn-holder .close-address-form { max-width: 0; padding: 0; opacity: .4; } .add-button .btn-holder.open .close-address-form { max-width: 280px; padding: 0 25px; opacity: 1; transition: width .3s ease .3s, max-width .3s ease .3s, padding .3s ease .3s, opacity .3s ease .3s, background-color .2s ease 0s; } .checkout-page .edit-address { padding-top: 40px; margin: 0 0 30px; } .checkout-page .address-box { margin: 0 0 25px; } .checkout-page .address-item li { padding: 2px 0; } .checkout-page .address-item li.name { margin: 0; } .checkout-page .address-item li.country { margin: 5px 0 0; font-size: 16px; } .checkout-page .pickup-points .title { display: none; margin: 0 0 40px; } .checkout-page .select-pickup-point { text-align: center; } .checkout-page .select-pickup-point li { display: inline-block; margin: 0 5px; font-size: 15px; color: #444; font-weight: 700; } .checkout-page .select-address select { max-width: 100%; } .checkout-page .pickup-points-map { height: 300px; margin: 20px 0 0; } .payment-logo { margin-bottom: 10px; } .shipping-method .method-list, .payment-method .method-list { margin: 0 0 30px; } .shipping-method .method-list li, .payment-method .method-list li { position: relative; border: 1px solid #ddd; border-radius: 3px; padding: 22px 22px 22px 70px; max-width: 560px; text-align: left; margin: 0 auto 10px; } .payment-method .method-list li:hover { border: 1px solid #d9d9d9; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .shipping-method .method-list li:hover { border: 1px solid #d9d9d9; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .shipping-method .method-list li label, .payment-method .method-list li label { display: block; width: 100%; font-weight: 700; color: #444; font-size: 18px; } .shipping-method .method-list input[type="radio"] + label:before, .payment-method .method-list input[type="radio"] + label:before { position: absolute; top: 50%; left: 25px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .shipping-method .method-description, .payment-method .payment-description { margin: 5px 0 0; font-size: 16px; color: #8c8c8c; font-weight: 400; } .order-details-page .payment-method-status { padding-bottom: 20px; } .order-details-page .hint { padding-top: 20px; } .shipping-method .pickup-points ~ .method-list[style*="display: none;"] ~ .buttons { display: none; } .checkout-page .select-pickup-point label { display: none; } .use-reward-points { margin: 0 0 30px; text-align: center; } .payment-info .info { margin: 0 0 30px; } .payment-info .info table { max-width: 800px; border: 1px solid #eee; border-radius: 3px; margin: 0 auto; } .payment-info .info td { padding: 5px; } .payment-info .info tr:first-child td { padding-top: 30px; } .payment-info .info tr:last-child td { padding-bottom: 30px; } .payment-info .info td label { font-size: 14px; } .payment-info .info td:first-child { text-align: right; } .payment-info .info td:only-child { text-align: center; } .payment-info .info td + td { text-align: left; } .payment-info .info td select:only-of-type, .payment-info .info td input:only-of-type { width: 100% !important; max-width: 250px; } .payment-info .info td p { margin: 10px 0; font-size: 16px; color: #444; } .message-error.validation-summary-errors { text-align: center; } .order-confirm-page .order-review-data .billing-info .title, .order-confirm-page .order-review-data .shipping-info .title, .opc .order-review-data .billing-info .title, .opc .order-review-data .shipping-info .title { margin: -45px -20px 30px; height: 60px; line-height: 60px; background-color: #f9f9f9; border-radius: 3px 3px 0 0; } .order-review-data > div .info-list .name, .order-review-data > div .title { margin-bottom: 10px; } .order-review-data > div .info-list .name, .order-review-data > div .title strong { font-weight: 700; font-size: 16px; color: #444; } .confirm-order .terms-of-service { text-align: center; } .order-completed .details { max-width: 800px; border: 1px solid #eee; border-radius: 3px; padding: 30px; margin: 0 auto 30px; text-align: center; } .order-completed .details a { display: inline-block; margin: 20px 0 0; padding: 0 20px; max-width: 100%; height: 45px; line-height: 45px; background-color: #eee; color: #8c8c8c; border-radius: 3px; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 700; text-transform: uppercase; } .order-completed .order-number { font-size: 18px; font-weight: 700; color: #97c300; } .opc { max-width: 1000px; margin: 0 auto; } .opc > li { border: 1px solid #eee; border-radius: 3px; margin-bottom: 10px; overflow: hidden; } .opc > li:last-child { margin-bottom: 0; } .opc .step-title { position: relative; height: 60px; line-height: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #f6f6f6; padding: 0 40px; text-align: center; } .opc > li.allow:not(.active) .step-title:after { content: "\30"; position: absolute; display: inline-block; top: 0; right: 20px; left: auto; color: #97c300; font-size: 20px; line-height: 60px; } .opc input[type="checkbox"] ~ label:before { content: ""; display: inline-block; margin-right: 10px; width: 17px; height: 17px; border: 1px solid #eeeeee; vertical-align: text-top; background-color: #fff; } .opc input[type="checkbox"]:checked ~ label:before { margin-left: 1px; width: 16px; height: 16px; box-shadow: 0 0 0 1px #e7e7e7; border: 3px solid #fff; background-color: #97c300; } .opc input[type="checkbox"] ~ label { font-weight: 700; color: #444; } .opc .ship-to-same-address, .opc .pickup-in-store { margin-top: 0 !important; } .opc .section.new-billing-address, .opc .section.new-shipping-address { max-width: 600px; margin: 0 auto; } .opc .allow .step-title, .opc .allow .step-title .number, .opc .allow .step-title .title { cursor: pointer; } .opc .step-title .number, .opc .step-title .title { display: inline-block; font-size: 18px; color: #444; font-weight: 300; } .opc .step-title .number { margin: 0 5px 0 0; } .opc > li.active .step-title .number, .opc > li.active .step-title .title { font-weight: 700; color: #97c300; } .opc .step { padding: 40px 20px; overflow: hidden; } .opc .section { margin: 0 0 15px; text-align: center; } .opc .section > label, .opc .select-pickup-points > label { display: block; font-weight: 700; color: #444; font-size: 15px; margin: 0 0 10px; } .opc .payment-info .info { margin: 0; } .opc .payment-info .info table { border: none; } .opc input[type="text"], .opc input[type="email"], .opc input[type="tel"], .opc input[type="password"], .opc select:only-of-type { max-width: 100%; } .opc select { padding: 0 27px 0 20px; background: #fff url(../Themes/Emporium/Content/img/select-arrow-dark.svg) no-repeat right 10px center; } .opc .buttons { margin-bottom: 0; font-size: 0; } .opc .pickup-points .buttons { display: none; } .opc #opc-confirm_order .buttons, .opc #opc-payment_info .buttons, .opc .checkout-data > div:not(.section) { float: left; clear: both; width: 100%; margin: 30px 0 0; } .opc .back-link { display: inline-block; vertical-align: top; margin: 0 10px 10px 0; } .opc .back-link small { display: none; } .opc .back-link a { display: block; padding: 0 20px; border-radius: 3px; background-color: #eee; height: 45px; min-width: 95px; line-height: 45px; color: #959595; font-size: 14px; text-transform: uppercase; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opc .back-link, .opc .back-link + .button-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opc .please-wait { display: block; margin: 10px 0 0; } .opc .terms-of-service { text-align: center; } /*********** ORDER DETAILS & RETURN REQUEST ***********/ .order-review-data, .order-details-area, .shipment-details-area { margin: 0 0 50px; overflow: hidden; } .order-details-page, .order-overview { text-align: center; } .order-review-data > div, .order-details-area > div, .shipment-details-area > div { padding: 45px 20px; margin: 0 0 20px; border: 1px solid #eee; border-radius: 3px; text-align: center; } .order-review-data > div > div, .order-details-area > div > div, .shipment-details-area > div > div { margin-bottom: 40px; } .order-review-data > div > div:last-child, .order-details-area > div > div:last-child, .shipment-details-area > div > div:last-child { margin-bottom: 0; } .order-review-data li, .order-details-area li, .shipment-details-area li { padding: 2px 0; font-size: 16px; color: #8c8c8c; } .order-review-data .title, .order-details-area .title, .shipment-details-area .title { margin: 0 0 15px; font-size: 18px; color: #444; } .order-details-page .page-title { margin: 0 0 40px; overflow: hidden; } .order-details-page .page-title h1 { margin: 0 0 30px; } .order-details-page .order-overview { margin: 0 0 40px; line-height: 20px; } .order-details-page .order-overview .order-number { margin-bottom: 15px; font-size: 20px; font-weight: 700; color: #97c300; } .order-overview-content li { font-size: 16px; color: #8c8c8c; line-height: 1.5; font-weight: 300; } .order-overview-content li strong { color: #444; } .order-details-page .tax-shipping-info { margin: 0 0 10px; font-size: 15px; color: #444; } .order-details-page .actions { margin: 20px 0 0; overflow: hidden; font-size: 0; } .order-details-page .actions button { display: inline-block; vertical-align: top; width: 100%; margin: 5px 0 0; padding: 0 20px; height: 45px; border-radius: 3px; border: none; font-size: 14px; color: #fff; text-transform: uppercase; } .order-details-page .actions button:first-child { margin-top: 0; } .order-details-page .actions .button-2 { background-color: #e7e7e7; color: #8c8c8c; } .section.shipments { margin-bottom: 50px; } td.view-details a, td.download a { display: inline-block; padding: 10px 20px; margin: -7px 0; border-radius: 3px; background-color: #f1f1f1; color: #8c8c8c; font-size: 13px; font-weight: 700; text-transform: uppercase; transition: all .2s ease; } td.view-details a:hover, td.download a:hover { background-color: #eaeaea; } .downloadable-products-page td.order a { color: #444; } .return-request-file > div { display: inline-block; width: 100%; vertical-align: middle; font-size: 13px; overflow: hidden; } .qq-uploader .qq-upload-drop-area, .qq-uploader .qq-upload-list { float: left; width: calc(100% - 45px); height: 45px; line-height: 45px; border: 1px solid #e7e7e7; border-right: none; border-radius: 3px; background-color: #fff; padding: 0 0 0 20px; text-align: left; font-size: 13px; color: #000; } .qq-uploader .qq-upload-button { width: 45px; height: 45px; line-height: 45px; padding: 0; display: inline-block; float: right; border: none; border-radius: 0 3px 3px 0; background-color: #eebe00; font-size: 0; transition: all .2s ease; } .qq-uploader .qq-upload-button:before { content: "\e903"; font-size: 16px; color: #fff; } .qq-uploader .qq-upload-button:hover { background-color: #e8af00; } .return-request-page .qq-upload-list li { background-color: transparent !important; font-size: 13px; color: #444 !important; padding: 0 !important; line-height: 45px; } .qq-uploader .qq-upload-drop-area, .qq-uploader .qq-upload-extra-drop-area { width: calc(100% - 45px); height: 100%; min-height: 45px; background: #fff9e0; text-align: left; } .qq-uploader .qq-upload-drop-area span { top: 0; left: 0; margin: 0; } /*********** SEARCH & SITEMAP ***********/ .search-page .search-input .fieldset { margin: 0; } .search-page .search-input form { background-color: #f6f6f6; margin: 0 -10px 40px; padding: 30px 0; } .search-input input + label { display: inline; margin: 0 0 0 2px; } .basic-search { padding: 0 20px 30px; } .advanced-search { padding: 30px 20px; border-top: 2px solid #fff; } .basic-search > .inputs, .advanced-search > .inputs { max-width: 600px; margin-left: auto; margin-right: auto; } .search-page .search-input form .buttons { padding: 0 20px; max-width: 640px; margin-left: auto; margin-right: auto; } .search-page .search-input form button { width: 100%; } .advanced-search .price-range { display: block; width: 100%; font-size: 0; } .advanced-search .price-range input { width: calc(50% - 5px); font-size: 13px; } .advanced-search .price-range input:nth-child(2) { margin-left: 10px; } .search-input .warning, .search-results .result { display: block; margin: 10px 0 0; font-weight: normal; color: #ff4f60; } .search-results { margin: 30px 0 0; } .sitemap-page .description { margin: 0 auto 30px; max-width: 1000px; font-size: 15px; color: #8c8c8c; text-align: center; } .sitemap-page .entity { border: 1px solid #eee; border-radius: 3px 3px 0 0; border-bottom: none; padding: 30px 20px; text-align: center; } .sitemap-page .entity + .entity { border-radius: 0; } .sitemap-page .entity:last-child { border-radius: 0 0 3px 3px; border-bottom: 1px solid #eee; } .sitemap-page .entity-title { margin: 0 0 20px; } .sitemap-page .entity-title h2 { font-size: 17px; color: #444; text-transform: uppercase; letter-spacing: 2px; } .sitemap-page .entity-body { line-height: 24px; } .sitemap-page li { display: inline-block; margin: 0 5px; } .sitemap-page a { display: block; padding: 5px; color: #97c300; font-size: 15px; transition: all .2s ease; } .sitemap-page a:hover { color: #7c9a16; } .sitemap-page a:empty { display: none; } /********** BLOG & NEWS **********/ .block-blog-archive .year { margin-top: 10px; } .year strong { display: block; cursor: default; } .blog-page .post, .news-items .news-item { position: relative; margin: 0 0 20px; border: 1px solid #eeeeee; border-radius: 3px; overflow: hidden; } .blog-page .post-details, .news-items .news-item { padding: 30px 15px; } .center-2 .blog-page .post, .center-2 .news-items .news-item { text-align: left; } .blog-page .post:after, .news-items .item:after { content: ""; display: block; clear: both; } .post-title, .news-title { display: block; margin: 0 0 20px; font-size: 25px; font-weight: 600; color: #111111; } .post-date, .news-date { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 1.3px; color: #97c300; margin-bottom: 10px; text-transform: uppercase; } .post-date + .read-comments { margin-left: 15px; } .post-body, .news-body { line-height: 1.75; font-size: 16px; color: #111111; font-weight: 400; } .post-body p { line-height: 1.75; } .post-body h1, .post-body h2, .post-body h3, .news-body h1, .news-body h2, .news-body h3 { color: #111111; font-weight: 500; margin: 15px 0 10px 0; } .post-body h1, .news-body h1 { line-height: 1.6; } .post-body h2, .news-body h2 { line-height: 1.5; } .post-body h3, .news-body h3 { line-height: 1.3; } .post-body ul, .news-body ul { line-height: 1.4; } .post-body + .buttons, .news-body + .buttons { margin-top: 25px; } .post-body p:first-child, .news-body p:first-child { margin-top: 0; } .back-to-all-button { display: inline-block; margin: 0 auto 20px; width: auto; text-align: center; font-size: 13px; color: #959595; text-transform: uppercase; font-weight: 700; transition: all .2s ease; } .back-to-all-button:before { content: "\6b"; display: inline-block; margin-right: 7px; color: #959595; text-transform: none; font-weight: normal; font-size: 10px; transition: all .2s ease; } .back-to-all-button:hover, .back-to-all-button:hover:before { color: #97c300; } .blogpost-page .page-title, .news-item-page .page-title { margin-bottom: 15px; } .blogpost-page .post-date, .news-item-page .news-date { display: block; margin-bottom: 25px; } .blogpost-page .post-body, .news-item-page .news-body { margin: 0 auto; padding: 0 0 20px; max-width: 900px; text-align: justify; } .blogpost-page .post-body { border-bottom: 1px solid #eee; padding: 0 30px; margin: 0 -10px 20px; } .blog-page .tags, .blogpost-page .tags { margin: 0 0 5px; overflow: hidden; } .blog-page .tags label, .blogpost-page .tags label { display: inline-block; font-size: 0; } .blog-page .tags label:before, .blogpost-page .tags label:before { content: "\58"; display: inline-block; margin-right: 7px; font-size: 16px; color: #8c8c8c; } .blog-page .tags ul, .blogpost-page .tags ul { display: inline-block; font-size: 0; } .blog-page .tags li, .blogpost-page .tags li { display: inline-block; font-size: 13px; text-transform: uppercase; font-weight: 700; } .blog-page .tags li.separator, .blogpost-page .tags li.separator { margin: 0 5px 0 3px; } .blog-page .tags a, .blogpost-page .tags a { display: inline-block; color: #97c300; line-height: 24px; transition: all .2s ease; } .blog-page .tags a:hover, .blogpost-page .tags a:hover { color: #7c9a16; } .blog-posts .buttons, .news-items .buttons { text-align: left; } .blog-posts .read-more, .news-items .read-more { display: inline-block; padding: 0 25px; border-radius: 3px; background-color: #eebe00; height: 45px; line-height: 45px; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; transition: all .2s ease; } .blog-posts .read-more:hover, .news-items .read-more:hover { background-color: #e8af00; } .read-comments { font-size: 13px; color: #8c8c8c; font-weight: 700; transition: all .2s ease; } .read-comments:before { content: "\52"; display: inline-block; vertical-align: middle; margin-right: 7px; font-weight: normal; text-transform: none; color: #8c8c8c; font-size: 16px; transition: all .2s ease; } .read-comments:hover, .read-comments:hover:before { color: #97c300; } .new-comment { padding: 40px 20px; } .comment-list { padding: 0 10px 40px; } .new-comment, .comment-list { margin: 70px -10px 0; background-color: #f6f6f6; } .new-comment > *, .comment { max-width: 900px; margin-left: auto; margin-right: auto; } .new-comment + .comment-list { margin-top: 0; } .new-comment .title { margin: 0 auto 20px; } .new-comment .title strong { font-weight: 700; font-size: 26px; color: #444; } .new-comment form { display: none; } .comment-form-btn strong:before { display: inline-block; vertical-align: bottom; margin-right: 10px; font-size: 16px; text-transform: none; font-weight: normal; } .open-comment-form:hover { background-color: #e8af00; } .open-comment-form:before { content: "\52"; color: #fff; } .new-comment .notifications { font-size: 15px; color: #8c8c8c; } .new-comment .result { margin: 20px 0 0; color: #97c300; } .comment-list .comment { background-color: #fff; border: 1px solid #eee; border-top: none; padding: 30px 20px; text-align: left; } .comment-list .comment:first-child { border-top: 1px solid #eee; border-radius: 3px 3px 0 0; } .comment-list .comment:last-child { border-radius: 0 0 3px 3px; } .new-comment .form-fields { padding-top: 30px; margin: 0 auto 15px; max-width: 500px; } .new-comment textarea { width: 100%; } .comment-list .title { margin: 0 0 10px; font-weight: bold; } .blog-comment:after, .news-comment:after { content: ""; display: block; clear: both; } .comment-info { margin: 0 0 15px; font-size: 0; overflow: hidden; } .comment-info .username { display: inline-block; margin-bottom: 3px; font-size: 17px; color: #444; font-weight: 700; } .comment-info .avatar { position: relative; display: inline-block; vertical-align: middle; width: 70px; height: 70px; overflow: hidden; } .comment-info .avatar img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; height: auto; margin: auto; } .name-and-time { display: inline-block; vertical-align: middle; margin-left: 10px; width: calc(100% - 80px); text-align: left; } .comment-time { font-size: 14px; color: #aaa; } .comment-body, .comment-text { font-size: 15px; color: #8c8c8c; line-height: 1.5; } .news-item-page .inputs:first-child label { display: block; } .news-list-homepage { margin: 0 auto 50px; text-align: center; } .news-list-homepage .title { margin: 0 0 7px; font-size: 28px; color: #444444; } .news-list-homepage .title strong { font-weight: bold; } .news-list-homepage .view-all { margin-bottom: 15px; } .news-list-homepage .view-all a { display: inline-block; line-height: 32px; color: #97c300; letter-spacing: 1.3px; text-transform: uppercase; font-size: 13px; font-weight: bold; transition: all .2s ease; } .news-list-homepage .view-all a:after { content: "\57"; display: inline-block; margin-left: 7px; font-size: 8px; color: #97c300; vertical-align: bottom; text-transform: none; transition: all .2s ease; } .news-list-homepage .view-all a:hover, .news-list-homepage .view-all a:hover:after { color: #7c9a16; } .post-details, .news-item { padding: 30px 15px; } /********** FORUM & PROFILE **********/ .forums-main-page .topic-block { margin-bottom: 0; } .forums-main-page .topic-block-title h2 { color: #444; font-size: 28px; } .forums-header { margin: 0 0 30px; text-align: center; } .forums-header:after { content: ""; display: block; clear: both; } .current-time { margin: 27px 0 30px; color: #97c300; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; font-size: 16px; } .forum-search-box { margin: 0 0 45px; text-align: center; } .forum-search-box { display: block; padding: 0 !important; margin: 0 auto 20px; width: 100%; max-width: 600px; } .forum-search-box form { padding: 0 !important; } .forum-search-box .basic { overflow: hidden; margin: 0 0 15px; } .forum-search-box.search-box input.search-box-text { padding: 0 5px 0 15px; width: calc(100% - 45px); height: 45px; } .forum-search-box.search-box .search-box-button { float: left; width: 45px; height: 45px; border: none; background: #ccc url('../Themes/Emporium/Content/img/search-button.png') center no-repeat; font-size: 0; border: 1px solid #eeeeee; border-left: 0; border-radius: 0 3px 3px 0; } .forum-search-box.search-box .search-box-button:hover { background-color: #97c300; } .forum-search-box .advanced > a { font-size: 15px; color: #8c8c8c; transition: color .2s ease } .forum-search-box .advanced > a:hover { color: #97c300; } .forum-search-page .basic-search .forum-search-text { text-align: center; font-size: 15px; } .forum-search-page .basic-search .forum-search-text::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #aaa; } .forum-search-page .basic-search .forum-search-text::-moz-placeholder { /* Firefox 19+ */ color: #aaa; } .forum-search-page .basic-search .forum-search-text:-ms-input-placeholder { /* IE 10+ */ color: #aaa; } .forum-search-page .basic-search .forum-search-text:-moz-placeholder { /* Firefox 18- */ color: #aaa; } .forum-search-page .inputs.reversed { text-align: center; } .forum-search-page .advanced-search { margin: 0 -10px 30px; padding: 30px; max-width: 800px; background-color: #f6f6f6; } .forum-search-page .search-error { padding: 15px; margin: 30px 0 0; font-size: 13px; color: #ff4f60; font-weight: 700; text-align: center; } .forum-search-page .fieldset { margin: 0; } .forum-search-page .search-results { margin: 40px 0 0; } .no-result { font-size: 15px; color: #8c8c8c; text-align: center; } /* forum group */ .forums-table-section { margin: 0 0 50px; } .forums-table-section a { vertical-align: middle; } .forums-table-section-title { margin: 0 0 25px; overflow: hidden; text-align: center; } .forums-table-section-title > a, .forums-table-section-title strong { font-size: 24px; font-weight: 700; color: #444; } .forums-table-section .view-all a { display: inline-block; margin-top: 10px; height: 45px; line-height: 45px; padding: 0 25px; border-radius: 3px; background-color: #eebe00; color: #fff !important; font-weight: 700; text-transform: uppercase; font-size: 15px; transition: all .2s ease; } .forums-table-section .view-all a:hover { background-color: #e8af00; } .forums-table-section .image div { font-size: 0; width: 24px; height: 24px; margin: auto; } .forums-table-section .image div:before { content: "\32"; display: block; color: #8e8e8e; font-size: 24px; font-weight: normal; text-transform: none; } .forums-table-section .image div.sticky:before { color: #ffa20f; } .forums-table-section .image div.announcement:before { color: #e5323f; } .forums-table-section .latest-post { white-space: nowrap; } /* forum-page, topic-page */ .forum-page .forum-info, .forum-topic-page .topic-name, .forum-page .forum-name { margin: 0 0 30px; text-align: center; } .forum-page .forums-table-section { margin: 0; } .forum-page .forum-description { margin-top: -5px; } .forum-page .forum-description p { font-size: 15px; color: #8c8c8c; } .forum-actions, .topic-actions { margin: 0 0 25px; font-size: 0; text-align: center; } .forum-actions .actions a, .topic-actions .actions a { display: inline-block; padding: 0 10px; margin: 0 0 6px 6px; width: calc(50% - 3px); height: 45px; line-height: 45px; font-size: 13px; color: #8c8c8c; text-transform: uppercase; font-weight: 700; background-color: #f1f1f1; border-radius: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: all .2s ease; } .topic-actions .actions a:nth-child(2n), .forum-actions .actions a:nth-child(2n+1) { margin-left: 0; } .topic-actions .pager { margin-top: 50px; } .pager.upper { display: none; } .forum-actions .actions a:hover, .topic-actions .actions a:hover { background-color: #eaeaea; } .forum-actions .actions a:before, .topic-actions .actions a:before, .topic-post .post-actions a:before { display: inline-block; vertical-align: bottom; margin-right: 10px; color: #8c8c8c; font-size: 17px; text-transform: none; font-weight: normal; } .forum-actions .actions a.edit-topic-button, .topic-actions .actions a.edit-topic-button { width: 100%; margin: 0 0 6px; } .forum-actions .actions .new-topic:before { content: "\52"; } .forum-actions .actions .watch-forum:before, .topic-actions .actions .watch-forum:before, .topic-actions .watch-topic-button:before { content: "\31"; } .topic-actions .reply-topic-button:before { content: "\4f"; } .topic-actions .move-topic-button:before { content: "\33"; } .topic-actions .edit-topic-button:before { content: "\4c"; } .topic-actions .delete-topic-button:before { content: "\4d"; } .topic-actions.lower .actions { display: none; } .forum-table a { color: #444; font-weight: 700; transition: color .2s ease; } .forum-table a:hover { color: #97c300; } .forum-details .forum-title a, .topic-details .topic-title a { font-size: 18px; } .forum-description, .topic-details .topic-pager, .topic-details .topic-starter, .topic-details .topic-starter, td.latest-post { font-size: 16px; color: #8c8c8c; } .forum-page .pager { margin-top: 30px; } td.topics, td.posts, td.views, td.replies, td.votes { font-weight: 700; } /* topic post */ .topic-post { margin: 0 0 20px; border: 1px solid #eee; border-radius: 3px; overflow: hidden; } .topic-post:after { content: ""; display: block; clear: both; } .topic-post .post-head { padding: 0 17px; background-color: #f6f6f6; text-align: left; height: 45px; } .topic-post .post-time { display: inline-block; } .topic-post .post-time span, .topic-post .post-time label { display: inline-block; color: #aaa; font-size: 14px; line-height: 43px; } .topic-post .post-link-button { float: right; font-size: 15px; font-weight: 700; line-height: 43px; color: #8c8c8c; } .topic-post .post-info { padding: 15px 10px; text-align: left; font-size: 0; } .topic-post .user-info { position: relative; display: inline-block; vertical-align: top; min-height: 105px; padding-left: 120px; } .topic-post .username { display: block; margin-bottom: 5px; font-size: 17px; color: #444; font-weight: 700; } .topic-post .avatar { position: absolute; display: inline-block; top: 0; left: 0; vertical-align: top; width: 105px; overflow: hidden; font-size: 0; } .topic-post .avatar a { display: block; } .topic-post .avatar img { max-width: 100%; } .topic-post .user-stats { margin: 0 0 15px; font-size: 14px; color: #8c8c8c; line-height: 1.1; } .topic-post .user-stats span { margin: 0 0 0 3px; } .topic-post .pm-button { display: inline-block; margin: 0; padding: 0; height: auto; background-color: transparent; font-size: 13px; line-height: 16px; } .topic-post .pm-button:before { position: static; margin-right: 10px; vertical-align: bottom; color: #97c300; } .topic-post .post-actions { font-size: 0; text-align: right; overflow: hidden; } .topic-post .post-actions > div { display: inline-block; float: right; vertical-align: top; } .topic-post .post-actions a { display: inline-block; vertical-align: top; margin: 0 0 0 5px; font-size: 0; width: 40px; height: 40px; line-height: 40px; background-color: #f1f1f1; border-radius: 3px; text-align: center; transition: all .2s ease; } .topic-post .post-actions a:hover { background-color: #eaeaea; } .topic-post .post-actions a:before { margin: 0; } .topic-post .post-actions .edit-post-button:before { content: "\4c"; } .topic-post .post-actions .delete-post-button:before { content: "\4d"; } .topic-post .post-actions .quote-post-button { width: auto; padding: 0 25px; background-color: #eebe00; color: #fff; font-size: 13px; text-transform: uppercase; font-weight: 700; } .topic-post .post-actions .quote-post-button:hover { background-color: #e8af00; } .topic-post .post-content { padding: 20px; } .topic-post .post-body { position: relative; text-align: left; font-size: 15px; margin-bottom: 40px; } .topic-post .user-posted-image, .latest-posts .user-posted-image { max-width: 100%; height: auto; } .topic-post .quote, .latest-posts .quote { margin: 10px 0; background-color: #f6f6f6; border-radius: 3px; padding: 15px 10px; } .topic-post .post-actions > div.post-vote { float: left; } .topic-post .post-vote > span { display: inline-block; vertical-align: top; width: 25px; height: 40px; line-height: 40px; cursor: pointer; } .topic-post .post-vote > span:before { display: block; font-size: 20px; color: #8c8c8c; text-align: center; } .topic-post .post-vote > .vote.up:before { content: "\46"; } .topic-post .post-vote > .vote.down:before { content: "\47"; } .topic-post .post-vote > .vote.up:hover:before { content: "\e902"; color: #97c300; } .topic-post .post-vote > .vote.down:hover:before { content: "\e901"; color: #97c300; } .topic-post .post-vote > div { display: inline-block; vertical-align: top; margin: 0 5px; text-align: center; font-size: 14px; line-height: 40px; font-weight: 700; color: #8c8c8c; } .topic-post .signature { border-top: 1px dashed #eee; padding: 20px 0 0; margin-bottom: 30px; font-size: 15px; color: #aaa; text-align: left; } /* forum edit & send message */ .forum-edit-page strong, .private-message-send-page a { font-size: 18px; font-weight: normal; vertical-align: middle; } .forum-edit-page .buttons, .private-message-send-page .buttons { margin: 15px 0 0; text-align: center; } .forum-edit-page .buttons button, .move-topic-page .buttons button, .private-messages .buttons button { min-width: 115px; border: none; padding: 0 25px; height: 45px; color: #fff; border-radius: 3px; font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .1s ease; } .forum-edit-page button.button-2, .move-topic-page button.button-2, .private-messages button.button-2 { color: #8c8c8c; background-color: #f1f1f1; } .forum-edit-page button.button-2:hover, .move-topic-page button.button-2:hover, .private-messages button.button-2:hover { background-color: #dfdfdf; } .forum-edit-page .inputs span { vertical-align: middle; margin-left: 5px; font-size: 12px; /*reset zeroing*/ } .private-message-send-page .message label { display: none; } /* inbox & view message */ .private-message-view-page .buttons .button-2 { background-color: #f1f1f1; } .private-messages .page-title { text-align: center; } .private-messages-page td.date { white-space: normal; } .private-messages-page .td-title { display: none; } .private-messages .data-table a, .private-messages .data-table td { color: #8c8c8c; font-weight: 400; } .private-messages-page td, .private-messages-page th { text-align: left; } .private-messages-page .data-table .pm-unread { color: #444; font-weight: 700; } .private-messages-page .buttons button { width: 80%; max-width: 200px; margin: 0 5px; } .private-messages-page buttons + button { margin-top: 15px; } .private-message-view-page .view-message { border: 1px solid #eee; border-radius: 3px; padding: 30px 20px; margin: 0 auto 30px; max-width: 800px; } .private-message-view-page .message-head li { margin-bottom: 10px; font-size: 15px; color: #8c8c8c; } .private-message-view-page .message-head label { font-weight: 300; } .private-message-view-page .message-head { margin-bottom: 30px; } .private-message-view-page .message-head span { font-weight: 700; margin: 0 0 0 5px; vertical-align: middle; } .private-message-view-page .message-body { font-size: 15px; line-height: 1.5; font-weight: 400; color: #8c8c8c; } .private-message-view-page .message { display: block !important; margin: 15px 0; border: 1px solid #ccc; padding: 15px; } .private-message-view-page .buttons { font-size: 0; } .private-message-view-page .reply-pm-button, .private-message-view-page .delete-pm-button { display: inline-block; width: calc(40% - 5px); margin-bottom: 10px; max-width: 150px; } .private-message-view-page .reply-pm-button { margin-right: 10px; } .private-message-view-page .back-pm-button { display: block; margin: 0 auto; width: 80%; max-width: 310px; } /* profile page */ .profile-info-box { overflow: hidden; border: 1px solid #eee; border-radius: 3px; padding: 30px 20px; max-width: 650px; margin: 0 auto; background-color: #fff; text-align: center; } .profile-info-box .avatar { margin: 0 auto 20px; font-size: 0; } .profile-info-box .profile-stats { margin: 0 0 10px; } .profile-info-box .title { margin: 0 0 13px; font-size: 16px; color: #444; } .profile-info-box .avatar { max-width: 180px; border-radius: 3px; overflow: hidden; } .profile-info-box .stats { font-size: 15px; color: #8c8c8c; font-weight: 300; } .profile-info-box .stats li { margin-bottom: 6px; } .profile-info-box .stats span { font-weight: 700; } .profile-page .ui-tabs-nav, .private-messages-page .ui-tabs-nav { font-size: 0; } .profile-page .ui-tabs-nav li, .private-messages-page .ui-tabs-nav li { max-width: calc(50% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 5px; } .profile-page .topic { padding: 30px 20px; background-color: #fff; border: 1px solid #eee; border-top: 0; } .profile-page .topic:first-child { border-top: 1px solid #eee; border-radius: 3px 3px 0 0; } .profile-page .topic:last-child { border-radius: 0 0 3px 3px; } .profile-page .topic:only-child { border-radius: 3px; } .profile-page .topic-title { margin: 0 0 7px; font-size: 16px; } .profile-page .topic-title label { font-weight: 300; color: #8c8c8c; } .profile-page .topic-title a { font-weight: 700; color: #444; } .profile-page .topic-data { color: #8c8c8c; font-size: 14px; margin-bottom: 15px; font-weight: 300; } .profile-page .topic-body { font-size: 15px; font-weight: 400; color: #8c8c8c; line-height: 1.5; } .pm-button { position: relative; display: inline-block; border: none; height: 45px; line-height: 45px; max-width: 80%; padding: 0 25px 0 55px; margin: 15px auto 0; background-color: #f1f1f1; border-radius: 3px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #8c8c8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .1s ease, padding .3s ease; } .pm-button:before { content: "\6d"; position: absolute; display: inline-block; top: 0; left: 25px; font-size: 20px; color: #8c8c8c; text-transform: none; transition: all .3s linear !important; font-weight: normal; } .pm-button:hover::before { -webkit-animation: emailing .2s linear; -moz-animation: emailing .2s linear; animation: emailing .2s linear; } .csharpcode { margin: 10px 0; padding: 10px 15px; color: #444; white-space: normal; text-align: left; border: 1px dotted #cacaca; border-radius: 3px; } /* ========================================= DHZ-PROSHOP — CLS STABILISATIE (SAFE, GENERIEK) — DEFINITIEF Emporium / SevenSpikes (slick/jcarousel) Doel: - CLS omlaag zonder bestandsnaam-specifieke regels - Geen “absolute overlay” hacks die andere carousels slopen - Termly banner fixed, footer link blijft normaal Plaats: helemaal onderaan styles.css (of styles.min.css) Verwijder: alle oudere/andere CLS + Termly varianten ========================================= */ /* 1) Fonts: stabiele fallback (voorkomt CLS door font swap) */ body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* 2) Header/logo: vaste ruimte zodat header niet "springt" */ .header-logo { display: flex; align-items: center; min-height: 40px; } .header-logo a img, a.logo img { width: 250px; height: auto; aspect-ratio: 250 / 60; display: block; } .header.is-sticky { transition: none !important; } /* 3) Hero/slider: reserveer ruimte boven de vouw (CLS omlaag) */ .home-page .home-page-main-slider { width: 100%; aspect-ratio: 16 / 9; min-height: 250px; background-color: #f4f4f4; } @media (min-width: 1001px) { .home-page .home-page-main-slider { aspect-ratio: 21 / 9; min-height: 450px; } } .home-page .home-page-main-slider img, .home-page .home-page-main-slider picture, .home-page .home-page-main-slider picture img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 4) Geen globale wrapper-trucs (vermijdt onverwachte layout shifts) */ .master-wrapper-content { min-height: auto !important; contain: none !important; } /* 5) Productafbeeldingen (thumbnails): vaste ratio zodat thumbs niet verspringen */ .home-page .item-box .picture a { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: #fff; } .home-page .item-box .picture img { width: 100%; height: 100%; object-fit: contain; display: block; } /* 6) Grootste CLS-bron: carousel container die tijdens init "groeit" -> LOCK alleen grote carousels, NIET small-products (recent bekeken) */ /* Grote carousels (bestsellers e.d.) */ .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid { /* height: 380px !important; max-height: 380px !important;*/ overflow: hidden !important; position: relative !important; } @media (min-width: 1001px) { /* .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid { height: 440px !important; max-height: 440px !important; }*/ } /* Binnenste containers niet laten "duwen" */ .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid .jcarousel-wrapper, .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid .jcarousel, .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid .jcarousel ul, .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid .slick-carousel { height: 100% !important; max-height: 100% !important; overflow: hidden !important; } /* Items mogen hoogte niet beïnvloeden tijdens init */ .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid .item-box, .home-page .jCarouselMainWrapper:not(.small-products) .nop-jcarousel.product-grid.home-page-product-grid .jcarousel li { height: 100% !important; max-height: 100% !important; } /* Small-products (Recent bekeken): expliciet UNLOCK */ .home-page .jCarouselMainWrapper.small-products .nop-jcarousel.product-grid.home-page-product-grid { height: auto !important; max-height: none !important; overflow: visible !important; position: static !important; } .home-page .jCarouselMainWrapper.small-products .nop-jcarousel.product-grid.home-page-product-grid .jcarousel-wrapper, .home-page .jCarouselMainWrapper.small-products .nop-jcarousel.product-grid.home-page-product-grid .jcarousel, .home-page .jCarouselMainWrapper.small-products .nop-jcarousel.product-grid.home-page-product-grid .jcarousel ul, .home-page .jCarouselMainWrapper.small-products .nop-jcarousel.product-grid.home-page-product-grid .slick-carousel, .home-page .jCarouselMainWrapper.small-products .nop-jcarousel.product-grid.home-page-product-grid .item-box, .home-page .jCarouselMainWrapper.small-products .nop-jcarousel.product-grid.home-page-product-grid .jcarousel li { height: auto; min-height: 200px; overflow: hidden; } /* 7) Overige content-wrapper: licht stabiliseren (geen absurde min-height) */ .home-page .master-wrapper-content { min-height: 100vh; } /* ========================= */ /* TERMly POPUP FIX */ /* ========================= */ /* Zorg dat de cookie banner altijd boven alles zweeft */ .termly-styles-root, .termly-styles-message, .termly-styles-overlay { position: fixed !important; bottom: 0 !important; left: 0 !important; transform: translateX(-50%) !important; z-index: 2147483647 !important; max-width: 100% !important; width: auto !important; } /* Zorg dat hij niet in layout wordt meegerekend */ body { padding-bottom: 0 !important; } @media all and (max-width: 480px) { .private-messages-page thead { display: none; } .private-messages-page .data-table, .private-messages-page tbody, .private-messages-page tr, .private-messages-page td { display: block; } .private-messages-page tr { margin: 0 0 20px; border: 1px solid #eee !important; border-radius: 3px; } .private-messages-page tr:last-child { margin: 0; } .private-messages-page td { border-left: none !important; border-right: none !important; background-color: #fff; text-align: center; } .private-messages-page td:first-child { border-radius: 3px 3px 0 0 !important; border-top: 0 !important; } .private-messages-page td:last-child { border-radius: 0 0 3px 3px !important; border-bottom: 0; } .private-messages-page .select label { margin: 0 auto; } .private-messages-page .select input[type="checkbox"]:checked + label { margin-left: auto; margin-bottom: 1px; } .private-messages-page .td-title { display: inline-block; } } @media all and (max-width: 1024px) { /*.order-details-page .data-table .attributes, .shipment-details-page .data-table .sku,*/ .order-details-page .shipments thead, .order-details-page .products thead, .order-list-page .recurring-payments thead, .return-request-page .data-table thead, .shipment-details-page .data-table thead, .downloadable-products-page .data-table thead, .reward-points-history .data-table thead, .wishlist-page thead, .cart thead { display: none; } .order-details-page .shipments .data-table, .order-details-page .shipments tbody, .order-details-page .shipments tr, .order-details-page .shipments td, .order-details-page .products .data-table, .order-details-page .products tbody, .order-details-page .products tr, .order-details-page .products td, .order-list-page .recurring-payments td, .order-list-page .recurring-payments tr, .return-request-page .data-table tbody, .return-request-page .data-table tr, .return-request-page .data-table td, .shipment-details-page .data-table, .shipment-details-page .data-table tbody, .shipment-details-page .data-table tr, .shipment-details-page .data-table td, .reward-points-history .data-table tr, .reward-points-history .data-table td, .downloadable-products-page .data-table tr, .downloadable-products-page .data-table td, .wishlist-page tbody, .wishlist-page tr, .wishlist-page td, .cart tbody, .cart tr, .cart td { display: block; } .order-details-page .shipments tr, .order-details-page .products tr, .return-request-page .data-table tr, .shipment-details-page .data-table tr, .order-list-page .recurring-payments tr, .reward-points-history .data-table tr, .downloadable-products-page .data-table tr, .wishlist-page tr, .cart tr { margin: 0 0 20px; border: 1px solid #eee !important; border-radius: 3px; } .downloadable-products-page .data-table td.product, .reward-points-history .data-table td.message { text-align: center; } .order-details-page .products tr, .cart tr, .wishlist-page tr { position: relative; background-color: #fff; overflow: hidden; padding-bottom: 70px; } .order-details-page .shipments tr:last-child, .order-details-page .products tr:last-child, .shipment-details-page .data-table tr:last-child, .return-request-page .data-table tr:last-child, .order-list-page .recurring-payments tr:last-child, .reward-points-history .data-table tr:last-child, .downloadable-products-page .data-table tr:last-child .wishlist-page tr:last-child, .cart tr:last-child { margin-bottom: 0; } .order-details-page .shipments td, .shipment-details-page .data-table td, .order-details-page .products td, .return-request-page .data-table td, .order-list-page .recurring-payments td, .reward-points-history .data-table td, .downloadable-products-page .data-table td, .wishlist-page td, .cart td { border-left: none !important; border-right: none !important; background-color: #fff; text-align: center; } .order-details-page .shipments td:first-child, .order-details-page .products td:first-child, .return-request-page .data-table td:first-child, .shipment-details-page .data-table td:first-child, .order-list-page .recurring-payments td:first-child, .reward-points-history .data-table td:first-child, .downloadable-products-page .data-table td:first-child, .wishlist-page td:first-child, .cart td:first-child { border-radius: 3px 3px 0 0 !important; border-top: 0 !important; } .order-details-page .shipments td:last-child, .order-details-page .products td:last-child, .shipment-details-page .data-table td:last-child, .return-request-page .data-table td:last-child, .order-list-page .recurring-payments td:last-child, .reward-points-history .data-table td:last-child, .downloadable-products-page .data-table td:last-child, .wishlist-page td:last-child, .cart td:last-child { border-radius: 0 0 3px 3px !important; border-bottom: 0; } .order-details-page .products td.unit-price, .cart td.unit-price, .wishlist-page td.unit-price { position: absolute; top: auto; left: auto; bottom: 35px; right: 0; float: right; background-color: #f6f6f6 !important; padding: 9px 20px 2px 10px; width: 65%; height: 35px; border-top: 1px solid #eee !important; border-bottom: 0 !important; text-align: right; overflow: hidden; } .order-details-page .products td.unit-price *, .cart td.unit-price *, .wishlist-page td.unit-price * { color: #8c8c8c !important; font-weight: 700 !important; font-size: 15px !important; } .order-details-page .products td.total, .order-details-page .products td.subtotal, .cart td.total, .cart td.subtotal, .wishlist-page td.total, .wishlist-page td.subtotal { position: absolute; bottom: 0; right: 0; left: auto; top: auto; background-color: #f6f6f6 !important; width: 62%; height: 35px; border: none !important; padding: 0px 20px 9px 10px; text-align: right; overflow: hidden; } .order-details-page .products td.total *, .order-details-page .products td.subtotal *, .cart td.total *, .cart td.subtotal *, .wishlist-page td.total *, .wishlist-page td.subtotal * { font-weight: 700 !important; color: #444 !important; } .order-details-page .products td.quantity, .cart td.quantity, .wishlist-page td.quantity { position: absolute; top: auto; left: 0; bottom: 0; width: 38%; height: 70px; padding: 20px 5px 20px 20px; overflow: hidden; border-top: 1px solid #eee !important; border-bottom: 0 !important; background-color: #f6f6f6 !important; text-align: left; } .order-details-page .products td.quantity, .cart td.quantity, .wishlist-page td.quantity { color: #8c8c8c !important; } .order-details-page .products td.quantity span, .cart td.quantity span, .wishlist-page td.quantity span { line-height: 30px; } td.shipment-id { background-color: #f6f6f6 !important; } td.quantity label.td-title { display: inline-block; max-width: calc(100% - 45px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td label { color: #8c8c8c; font-weight: 300; } td .attributes { padding: 7px 0; margin: 0; } td.remove-from-cart, td.add-to-cart { padding: 10px; font-size: 0; } td.remove-from-cart input[type="checkbox"] + label, td.add-to-cart input[type="checkbox"] + label { font-size: 13px; text-transform: uppercase; font-weight: 700; user-select: none; } td.remove-from-cart input[type="checkbox"] + label:before, td.add-to-cart input[type="checkbox"] + label:before { vertical-align: bottom; } td.product-picture { padding: 4px !important; float: left; width: 90px; border: none !important; } td.product { border: none !important; padding: 15px; } td.product-picture + td.product { margin-left: 90px; text-align: left; } } @media all and (min-width: 768px) and (max-width: 1024px) { .order-details-page .products tr, .shipment-details-page .data-table tr, .return-request-page .data-table tr, .reward-points-history .data-table tr, .downloadable-products-page .data-table tr, .wishlist-page tr, .cart tr { display: inline-block; vertical-align: top; width: calc(50% - 10px); margin-left: 20px; } .order-details-page .products tr:nth-child(2n+1), .return-request-page .data-table tr:nth-child(2n+1), .shipment-details-page .data-table tr:nth-child(2n+1), .reward-points-history .data-table tr:nth-child(2n+1), .downloadable-products-page .data-table tr:nth-child(2n+1), .wishlist-page tr:nth-child(2n+1), .cart tr:nth-child(2n+1) { margin-left: 0; } .shipment-details-page .data-table, .return-request-page .data-table, .order-details-page .products .data-table, .account-page .cart, .account-page .data-table, .account-page .compare-products-table, .account-page .forums-table-section table, .wishlist-page .cart, .cart { text-align: left; font-size: 0; } .cart td.product, .data-table td.product, .data-table td.message, .data-table td.info, .data-table td.name, .forum-table td.forum-details, .forum-table td.topic-details { text-align: left; } } @media all and (min-width: 769px) and (max-width: 1600px) { .account-page .recurring-payments .data-table td label { display: inline-block; } .account-page .recurring-payments .data-table thead { display: none; } .account-page .recurring-payments .data-table tbody, .account-page .recurring-payments .data-table tr, .account-page .recurring-payments .data-table td { display: block; } .order-list-page .recurring-payments tr { display: inline-block; vertical-align: top; width: calc(50% - 12.5px); margin-left: 25px; } .order-list-page .recurring-payments tr:nth-child(2n+1) { margin-left: 0; } } @media all and (min-width: 1025px) and (max-width: 1600px) { .order-list-page .recurring-payments td { border-left: none !important; border-right: none !important; } .order-list-page .recurring-payments td:first-child { border-radius: 3px 3px 0 0 !important; border-top: 1px solid #eee; } .compare-products-table td { vertical-align: top; } .cart td, .compare-products-table td, .forums-table-section td { font-size: 16px; } } @media all and (max-width: 1024px) { .header-upper .header-selectors-wrapper { display: none; } .desktop { display: none !important; } .category-navigation-title, .category-navigation-list-wrapper { display: none !important; } .admin-header-links { position: fixed; top: 0; z-index: 1030; width: 100%; } .responsive-nav-wrapper-parent { position: fixed; top: 0; z-index: 1020; width: 100%; background-color: #fff; border-bottom: 3px solid #eeeeee; } .admin-header-links ~ .responsive-nav-wrapper-parent { top: 35px; } .admin-header-links ~ .responsive-nav-wrapper-parent ~ .header { margin-top: 100px; } .header { margin-top: 65px; } .mobile-selector { overflow: hidden; } .header-selectors-wrapper > div { margin: 0; display: block; position: relative; } .profile-menu-box > a, .selector-title { display: block; padding: 15px 20px; line-height: 18px; font-size: 13px; color: #8c8c8c; font-weight: 700; background-color: #f6f6f6; border-top: 3px solid #fff; cursor: pointer; text-transform: uppercase; } .selector-title:after { content: "\6a"; display: inline-block; float: right; font-size: 9px; font-family: "emporium-icons"; transform: rotate(90deg); text-transform: none; color: #8c8c8c; transition: all .3s ease; } .selector-title.open:after { transform: rotate(-90deg); } .mobile-collapse { display: none; background-color: #efefef; padding: 10px 0; } .header-selectors-wrapper > div input[type="radio"] { display: none; } .header-selectors-wrapper > div label { display: block; padding: 10px 38px; line-height: 18px; font-size: 14px; font-weight: 400; } .header-selectors-wrapper > div input[type="radio"]:checked + label { color: #97c300; } .header-selectors-wrapper > div input[type="radio"] + label:before { content: none; display: none; } /* RESPONSIVE NAV WRAPPER */ .responsive-nav-wrapper { position: relative; padding: 11px 0; background-color: #fff; text-align: center; font-size: 0; width: calc(100% - 20px); margin: 0 auto; } .header-logo { display: none; } .mobile-logo { position: relative; display: inline-block; text-align: center; max-width: calc(100% - 180px); } .mobile-logo .logo { position: relative; display: block; max-width: 100%; height: 40px; width: 200px; margin: 0 auto; } .mobile-logo img { position: absolute; display: inline-block; width: auto; max-width: 100%; max-height: 100%; height: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .responsive-nav-wrapper:after { content: ""; display: block; clear: both; } .responsive-nav-wrapper > div { position: relative; display: inline-block; vertical-align: top; } .responsive-nav-wrapper > div > span, .responsive-nav-wrapper > div > a { position: relative; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 0; cursor: pointer; } .responsive-nav-wrapper > div > span:before, .responsive-nav-wrapper > div > a:before { display: inline-block; font-family: "emporium-icons"; font-size: 18px; color: #8e8e8e; } .responsive-nav-wrapper .menu-title span:before { content: "\67"; } .responsive-nav-wrapper .search-wrap span:before { content: "\65"; } .shopping-cart-link > a { position: relative; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 0; } .shopping-cart-link > a:before { content: "\64"; display: inline-block; font-family: "emporium-icons"; font-size: 24px; } .shopping-cart-link .cart-qty { position: absolute; top: 0; right: 0; background-color: #97c300; font-size: 10px; height: auto; padding: 0 1px; width: auto; min-width: 15px; display: inline-block; min-height: 15px; line-height: 15px; border-radius: 50%; color: #fff; } .responsive-nav-wrapper .menu-title, .responsive-nav-wrapper .search-wrap { float: left; } .responsive-nav-wrapper .shopping-cart-link, .responsive-nav-wrapper .personal-button { float: right; } /* RESPONSIVE MENU */ .overlayOffCanvas { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1060; background-color: rgba(0,0,0,0); transition: background 0.3s ease; } .overlayOffCanvas.show { background-color: rgba(0,0,0,0.4); } .scrollYRemove { overflow: hidden !important; -ms-touch-action: none !important; -webkit-overflow-scrolling: touch !important; } .header-menu.ps-container .ps-scrollbar-y-rail { visibility: hidden !important; /*scroll is active, but invisible*/ } .header-menu, .profile-menu-box, .store-search-box { position: fixed; top: 0; left: -100%; width: 320px; max-width: 100%; height: 100%; overflow: hidden; background-color: #fff; text-align: left; margin-top: 0 !important; opacity: 1; padding: 0; border-radius: 0; pointer-events: auto; transition: all 0.3s ease; -webkit-transform: none; -ms-transform: none; transform: none; box-shadow: none; z-index: 1070 !important; } .store-search-box { width: 400px; } .header-menu.open, .profile-menu-box.open, .store-search-box.open { left: 0; } .header-menu .close-menu, .close-side-menu, .mobile-flyout-wrapper .close-side-menu { display: block; padding: 15px 20px; background-color: #97c300; color: #fff; } .close-menu span, .close-side-menu span { display: inline-block; line-height: 17px; font-size: 14px; color: #fff; text-transform: uppercase; } .close-menu .close-menu-text, .close-side-menu .close-side-menu-text { font-weight: 700; letter-spacing: 1px; } .close-menu .close-menu-btn, .close-side-menu-btn { float: right; font-size: 0 !important; } .close-menu-text:before, .close-side-menu-text:before { content: "\67"; display: inline-block; margin-right: 15px; font-family: "emporium-icons"; font-size: 18px; font-weight: normal; letter-spacing: 0; color: #fff !important; text-transform: none; vertical-align: bottom; } .profile-menu-box .close-side-menu-text:before { content: "\61"; } .store-search-box .close-side-menu-text:before { content: "\65"; } .close-menu-btn:before, .close-side-menu-btn:before { content: "\7a"; display: inline-block; margin: 0 !important; font-family: "emporium-icons"; text-transform: none; font-size: 16px; color: #fff !important; vertical-align: bottom; } .header-menu .all-categories, .header-menu .all-categories li { background-color: #f6f6f6; } .header-menu > ul li:after { content: ""; display: block; clear: both; } .header-menu > ul li > a, .header-menu > ul li > span, .profile-menu-box > a, .header-form-holder > a { display: block; position: relative; z-index: 0; padding: 16px 18px !important; font-size: 13px; line-height: 17px; color: #8c8c8c; font-weight: 700; text-transform: uppercase; } .header-menu > ul li { border-bottom: 3px solid #fff; } .header-menu .top-menu > li { border-bottom: 0; } .header-menu > ul li:last-child, .header-menu > ul li:last-child, .header-menu > ul li.back-button { border-bottom: 0; } .header-menu > ul li > .with-subcategories { float: left; width: calc(100% - 50px); } .header-menu .all-categories > span { float: left; width: calc(100% - 50px); cursor: default; } .header-menu .all-categories > span:before { content: "\66"; display: inline-block; margin-right: 10px; font-size: 17px; vertical-align: bottom; font-family: "emporium-icons"; color: #8c8c8c; font-weight: normal; text-transform: none; transition: all .2s ease; } .plus-button { position:relative; z-index: 1; float: right; width: 50px; height: 50px; cursor: pointer; } .plus-button:before { content: "\6a"; position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: "emporium-icons"; font-size: 10px; color: #8c8c8c; } .ico-compare, .ico-wishlist { display: block; padding: 15px 20px; line-height: 18px; font-size: 13px; font-weight: 700; color: #8c8c8c; background-color: #f6f6f6; border-top: 3px solid #fff; cursor: pointer; text-transform: uppercase; } .ico-compare:before, .ico-wishlist:before { display: inline-block; font-family: "emporium-icons"; margin-right: 10px; font-size: 17px; color: #8e8e8e; font-weight: normal; text-transform: none; vertical-align: bottom; } /* NEW ACCOUNT STYLING */ .personal-button { position: static !important; } /* END ACCOUNT STYLING */ .wishlist-qty { display: none; } .header-menu { overflow-y: auto; } .header-menu .sublist-wrap { position: fixed; top: 0; left: 0; z-index: 2; width: 320px; height: 100%; box-shadow: 1px 0 5px rgba(0,0,0,0.5); overflow-y: auto; background-color: #fff !important; transition: all 0.3s ease; } .header-menu .sublist-wrap { left: -100%; } .header-menu .sublist-wrap.active { left: 0; } .header-menu ul li.back-button { background-color: #97c300; } .header-menu .back-button span { padding: 15px 20px !important; text-align: right; color: #fff; text-transform: uppercase; cursor: pointer; } .header-menu .back-button span:before { content: "\6b"; display: inline-block; margin-right: 10px; font-family: "emporium-icons"; font-size: 10px; text-transform: none; } /*********** MOBILE FLYOUT CART ************/ .mobile-flyout-wrapper .close-side-menu-text:before { content: "\64"; } .mobile-flyout-wrapper .flyout-cart-scroll-area { max-height: calc(100vh - 97px); overflow-y: scroll; } .mobile-flyout-wrapper { position: fixed; top: 0; left: -100%; width: 400px; max-width: 100%; height: 100%; overflow: hidden; background-color: #fff; text-align: left; margin-top: 0 !important; opacity: 1; padding: 0; border-radius: 0; pointer-events: auto; transition: all 0.3s ease; -webkit-transform: none; -ms-transform: none; transform: none; box-shadow: none; z-index: 1070 !important; } .mobile-flyout-wrapper.open { left: 0; } .mobile-flyout-wrapper .close-side-menu { display: block; } /******** LOGIN FORM IN HEADER ********/ .profile-menu-box.login-form-in-header { padding: 0; width: 320px; } .login-form-in-header form { padding: 20px 20px 0; } /* SEARCH BOX */ .search-box form { padding: 20px; } .search-box input.search-box-text { width: calc(100% - 45px); padding: 0 5px 0 15px; } .ui-autocomplete { width: calc(100% - 40px) !important; } /* HEADER LINKS */ #topcartlink { display: none; } .header-links-wrapper .header-links > ul { display: none; } .header-links-wrapper.open { display: block; } /* ACCOUNT PAGES */ .html-account-page .block { float: none; width: auto; text-align: center; } .html-account-page .block .listbox { display: block !important; } .item-box .btn-wrapper { display: none !important; } } @media all and (min-width: 481px) { /* GLOBAL STYLES */ .side-2:after { content: ""; display: block; clear: both; } /* FOOTER */ .footer-middle { text-align: center; font-size: 0; } .footer-block { display: inline-block; border-bottom: 0; width: 31.33%; margin: 0 1%; vertical-align: top; } .footer-block .title { padding: 0 15px 5px; border: none; } .footer-block:first-child { border-top: none; } .footer-block ul { display: block; background-color: transparent; } .footer-block .title:before, .footer-block .title:after { display: none; } .social-icons { padding-top: 35px; border-top: 1px solid #eeeeee; } .newsletter-email { max-width: 355px; } /* LEFT/RIGHT COLUMN */ .block { float: left; width: 48%; margin: 0 1% 2%; text-align: left; } .block:nth-of-type(2n+1) { clear: left; } .block .tags li, .product-tags-all-page li { margin: 0 5px; } /* CATEGORY PAGE & GRIDS */ .item-box { width: 32%; text-align: center; } .item-box:nth-child(2n+1) { margin-left: 2%; clear: none; } .item-box:nth-child(3n+1) { margin-left: 0; clear: both; } /* PRODUCT PAGE */ .attributes-wrapper { max-width: 560px; margin: 0 auto 30px; } .product-additional { margin: 0 -10px 60px; } .attributes select + .qty-box { margin-top: 0; vertical-align: top; } /* REVIEW PAGE */ /* WISHLIST & COMPARE LIST */ /* TOPICS */ .enter-password-form input[type="password"] { width: 300px !important; } /* CONTACT PAGE & EMAILaFRIEND */ /* REGISTRATION, LOGIN, MY ACCOUNT */ .login-page .title strong, .registration-page .title strong { font-size: 18px; } .date-of-birth .date-picker-wrapper select { padding: 0 35px 0 20px; background: #fff url(../Themes/Emporium/Content/img/select-arrow-dark.svg) no-repeat right 15px center; } .account-page { padding: 40px 20px; } .customer-info-page .page-body, .change-password-page .page-body, .check-gift-card-balance-page .page-body, .avatar-page .page-body, .address-edit-page .page-body, .vendorinfo-page .page-body { padding: 50px; } .date-of-birth .date-picker-wrapper select, .date-of-birth .date-picker-wrapper select:first-child, .date-of-birth .date-picker-wrapper select:last-child { width: 33.33%; } .address-item .title, .order-item .title, .request-item .title { text-align: center; } .address-item:first-child, .add-button:first-child, .order-item:first-child, .request-item:first-child { margin-top: 0; } /* SHOPPING CART & CHECKOUT */ .cart-collaterals > div > .list { padding: 30px; } .order-review-data, .order-details-area, .shipment-details-area { font-size: 0; margin: 0 0 30px; text-align: center; } .order-review-data > div, .order-details-area > div, .shipment-details-area > div { display: inline-block; vertical-align: top; width: calc(50% - 12.5px); margin-left: 25px; max-width: 590px; } .order-review-data > div:nth-child(2n + 1), .order-details-area > div:nth-child(2n + 1), .shipment-details-area > div:nth-child(2n + 1) { margin-left: 0; } .checkout-page .edit-address { padding: 40px 20px 0; } .payment-logo { display: inline-block; margin: 0 15px 0 0; vertical-align: middle; } .payment-logo + .payment-details { display: inline-block; vertical-align: middle; max-width: calc(100% - 90px); } .shipping-method .method-list li, .payment-method .method-list li { padding: 22px 22px 22px 85px; } .shipping-method .method-list input[type="radio"] + label:before, .shipping-method .method-list input[type="checkbox"] + label:before, .payment-method .method-list input[type="radio"] + label:before, .payment-method .method-list input[type="checkbox"] + label:before { left: 35px; } /* SEARCH PAGE & SITEMAP */ /* BLOG & NEWS */ /* FORUM & PROFILE */ .forum-actions .actions a, .forum-actions .actions a:nth-child(2n+1) { padding: 0 20px; margin: 0 3px; width: auto; } .topic-post .post-info { padding: 30px 30px 25px; } .topic-post .avatar { width: 160px; } .topic-post .user-info { padding-left: 175px; min-height: 160px; } .topic-post .username { margin: 5px 0; } .topic-post .post-content { padding: 0 30px 30px; } .topic-post .post-vote > span { width: 30px; } }@media all and (max-width: 481px) {.post-body, .news-body { line-height: 1.75; font-size: 15px; color: #111111; font-weight: 400;}.item-box .actual-price { padding-bottom: 10px; }} @media all and (min-width: 768px) { /* GLOBAL STYLES */ .master-wrapper-content, .html-account-page .master-wrapper-content { padding: 60px 20px; } .page { clear: both; text-align: left; } .link-rss { display: block; float: right; margin: 5px 0 0; } /* NOTIFICATIONS & POPUPS */ .eu-cookie-bar-notification { padding: 50px; } .bar-notification { padding: 14px 20px 14px 40px; } .bar-notification .content { font-size: 17px; line-height: 32px; } /* LEFT/RIGHT COLUMN */ .center-2 { margin: 0 0 50px; } .block { width: 31.3333%; margin: 0 1% 2%; } .block:nth-of-type(2n+1) { clear: none; } .block:nth-of-type(3n+1) { clear: left; } /* CATEGORY PAGE & GRIDS */ .two-row-carousels { padding: 0 10px; } .home-page .topic-block-body { padding: 0 20px; } .vendor-item .title a, .manufacturer-item .title a, .category-grid .item-box .title a { padding: 19px 15px; } .home-page .topic-block-title h2, .product-grid .title, .news-list-homepage .title, .home-page-polls .title { font-size: 30px; } .shopping-cart-page .product-grid .title { font-size: 26px; } .item-box .product-title, .item-box .title { padding: 0 10px; } .home-page-advantages { font-size: 0; } .advantages-item { display: inline-block; width: calc(50% - 2.5px); margin: 0 0 5px 5px; } .advantages-item:nth-child(2n+1) { margin-left: 0; } .advantages-item:only-child { width: 100%; margin: 0; } .news-list-homepage:after { content: ""; display: block; clear: both; } .news-list-homepage .news-item { float: left; padding: 30px; width: 49.3%; margin-left: 1.4%; } .news-list-homepage .news-item:nth-child(2n+1) { margin-left: 0; clear: left; } .breadcrumb { margin: 0 0 5px; } .page-title, .category-description, .manufacturer-description, .vendor-description { text-align: center; } .item-box .picture { position: relative; backface-visibility: hidden; } .item-box .btn-wrapper { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; min-width: 130px; pointer-events: none; transition: opacity .2s ease; } .item-box:hover .btn-wrapper { opacity: 1; pointer-events: auto; } .item-box .buttons { display: block; } .item-box .product-rating-box { margin-bottom: 12px; } .item-box .prices > *:last-child:not(:empty) { margin-bottom: 19px; } .pager li { margin: 0 2px; } /* PRODUCT PAGE */ .product-details-page { text-align: center; } .full-description, .product-specs-box { margin: 0 -20px; padding: 40px 30px; } .full-description + .product-collateral .product-specs-box { padding-top: 0; padding-bottom: 40px; } .product-tags-box { margin-top: 60px; } .attributes-wrapper > div.product-prices-box, .attributes-wrapper > div.tier-prices { padding: 0; } .overview-buttons { text-align: left; } .overview-buttons div { margin: 0 10px 10px 0; } .overview .qty-label, .variant-overview .qty-label { position: static; left: 0; margin: 0 5px 0 0; } .variant-picture { float: left; } .variant-picture + .variant-overview { width: auto; text-align: left; margin: 0 0 0 350px; } .variant-overview .tax-shipping-info { text-align: left; } .product-variant-line .attributes-wrapper, .product-variant-line .attributes { padding: 0; } .product-variant-line .attributes dt, .product-variant-line .attributes dd { text-align: left; } .product-variant-line .attributes-wrapper > div { margin-left: 0; } .tier-prices .table-wrapper { border: 1px solid #e7e7e7; border-radius: 3px; } .tier-prices .prices-table { display: table; width: 100%; border: none; border-collapse: collapse; } .tier-prices .prices-row { display: table-row; border-top: 1px solid #e7e7e7; float: none; width: auto; } .tier-prices .prices-row:first-child { border-top: 0; } .tier-prices .tbody { border-left: none; } .tier-prices .prices-row > div { display: table-cell; } .tier-prices .field-header { min-width: 100px; } .rental-attributes dt { min-width: 75px; } .attribute-squares { text-align: center; } .attribute-squares li { margin: 0 10px 10px 0; } .attributes-wrapper > div.tier-prices { max-width: none; } /* REVIEW PAGE */ .write-review-collapse { padding: 40px 60px; } /* TABLES */ /* WISHLIST & COMPARE LIST */ .share-info, .tax-shipping-info, .wishlist-content .buttons { text-align: center; } .wishlist-content .button-2 { display: inline-block; margin: 0 3.5px 7px; } .wishlist-content .wishlist-add-to-cart-button { display: block; width: 517px; margin: 0 auto; } .wishlist-content .button-2, .wishlist-content .wishlist-add-to-cart-button { display: inline-block; min-width: 200px; width: auto; margin: 0 3.5px; font-weight: 700; } .wishlist-page .share-info { margin: 70px -20px 50px; } .compare-products-page img { width: 100%; max-width: 280px; } .compare-products-mobile { margin: 0 -20px; } .compare-products-table td { padding: 20px 10px; font-size: 15px; color: #8c8c8c; font-weight: 400; text-align: center; } .compare-products-table .remove-product td { padding: 0; } .compare-products-table .product-price td { color: #97c300; font-size: 17px; font-weight: 700; } .compare-products-table .product-name td { font-size: 16px; font-weight: 700; } .compare-products-table .product-picture td { padding: 10px; } .compare-products-table .remove-product td { position: relative; text-align: right; } .compare-products-table .remove-product td button { position: absolute; top: 5px; right: 5px; z-index: 1; } .compare-products-table .product-name td a { color: #444; } .compare-products-table tr td:first-child { padding: 20px; min-width: 170px; max-width: 170px; color: #8c8c8c; font-size: 17px; background-color: #f6f6f6; text-align: right; font-weight: 300; } .compare-products-table tr td.empty:first-child { padding: 0; font-size: 0; } .compare-products-table .full-description { display: none; } .compare-products-table-mobile img { max-width: 160px; } /* TOPICS */ /* CONTACT PAGE & EMAILaFRIEND */ .registration-page, .private-messages, .email-a-friend-page, .contact-page, .apply-vendor-page, .forum-edit-page, .registration-page .page-title, .private-messages .page-title, .email-a-friend-page .page-title, .contact-page .page-title, .apply-vendor-page .page-title, .forum-edit-page .page-title { text-align: center; } .private-messages-page button + button { margin-top: 0; } .ui-tabs .ui-tabs-panel { margin: 0 -20px; padding: 50px 6vw; } .private-messages-page td.date, .private-messages-page th.date { white-space: nowrap; width: 20%; } /* REGISTRATION, LOGIN, MY ACCOUNT */ .customer-info-page .page-body, .change-password-page .page-body, .check-gift-card-balance-page .page-body, .avatar-page .page-body, .address-edit-page .page-body, .vendorinfo-page .page-body, .form-style { padding: 50px 65px; } .login-page .external-authentication > * { margin: 30px -20px 0; width: calc(100% + 40px); } .account-page #Username, .registration-page #Username { max-width: calc(100% - 200px); } #check-availability-button { position: absolute; top: 30px; right: 0; left: auto; width: 190px; margin: 0; float: none; clear: none; } .address-list, .order-list, .return-request-list-page .page-body { font-size: 0; } .address-item, .add-button, .order-item, .request-item, .address-grid > div { display: inline-block; width: calc(50% - 12.5px); margin: 25px 0 0 25px; text-align: center; } .address-item:nth-child(2), .order-item:nth-child(2), .request-item:nth-child(2), .address-grid > div:nth-child(2) { margin-top: 0; } .address-item:nth-child(2n+1), .order-item:nth-child(2n+1), .request-item:nth-child(2n+1), .address-grid > div:nth-child(2n+1) { margin-left: 0; } .checkout-page .address-grid .add-button:only-child { display: block !important; margin-left: auto !important; margin-right: auto; float: none; } /* SHOPPING CART & CHECKOUT */ .cart-collaterals:after{ content: ""; display: block; clear: both; } .cart-collaterals > div { float: left; width: calc(50% - 5px); margin: 0 0 10px 10px; } .cart-collaterals > div:nth-child(2n+1) { margin-left: 0; } .shopping-cart-page .common-buttons { text-align: center; } .shopping-cart-page .common-buttons button { display: inline-block; margin: 0 3.5px 7px; } .cart-options { text-align: right; } .cart-options .common-buttons button { margin: 0 0 0 10px; } .cart-options .checkout-attributes { padding: 40px; } .cart-options .attribute-squares { text-align: left; } .cart-options dd:last-child { margin-bottom: 0; } .order-details-page .options, .order-details-page .tax-shipping-info { text-align: center; } .order-details-page .total-info { overflow: hidden; } .order-details-page .actions { text-align: center; } .order-details-page .actions button { min-width: 0; } .order-progress { overflow: hidden; padding-top: 10px; margin: -40px 0 50px; } .order-progress a { padding: 0 5px; margin-bottom: 40px; width: 120px; height: 70px; } .order-progress a span { position: absolute; display: block; top: 80px; left: 0; width: 100%; text-align: center; font-size: 13px; color: #8c8c8c; font-weight: 700; text-transform: uppercase; } .order-progress .inactive-step span { color: #b7b7b7; } .order-progress .active-step.last a span { color: #97c300; } .order-progress .active-step.last a:before { font-size: 22px; width: 65px; height: 65px; line-height: 57px; } /* SEARCH & SITEMAP */ .search-page .search-input form { margin: 0 -20px 40px; padding: 45px 0; } /* BLOG & NEWS */ .center-2 .news-items:after, .center-2 .blog-page:after { content: ""; display: block; clear: both; } .center-2 .blog-page .post, .center-2 .news-items .news-item { float: left; width: calc(50% - 15px); margin: 0 0 30px 30px; } .center-2 .blog-page .post-details, .center-2 .news-items .news-item { padding: 40px; } .center-2 .blog-page .post:nth-child(2n+1), .center-2 .news-items .news-item:nth-child(2n+1) { margin-left: 0; clear: left; } .blogpost-page .post-body, .news-item-page .news-body { padding: 0 0 20px; margin: 0 auto 20px; } .blogpost-page .post-body p { padding: 0 5px; } .blog-page .tags, .blogpost-page .tags { text-align: center; } .blogpost-page, .news-item-page { text-align: center; } .post-date, .news-date { text-align: center; } .new-comment, .comment-list { margin-left: -20px; margin-right: -20px; } .comment-list { padding: 0 20px 50px; } .new-comment { text-align: center; } .new-comment textarea { width: 500px; } .comment-list .comment { position: relative; padding: 35px; } .comment-info { float: left; margin: 0; } .comment-info .avatar { width: 125px; height: 125px; } .name-and-time { position: absolute; top: 35px; left: 180px; width: auto; margin-left: 0; } .comment-info + .comment-content { margin: 55px 0 0 145px; } /* FORUM & PROFILE */ .forum-name h1 { margin: 0 40px; } .forums-main-page .topic-block-title h2 { font-size: 30px; } .forums-table-section-title .link-rss { float: right; margin: 0; } .forums-table-section .view-all { text-align: center; } .forum-actions .pager.upper { display: block; } .topic-actions .actions a, .topic-actions .actions a.edit-topic-button { display: inline-block; width: auto; padding: 0 18px; margin: 0 2.5px; } .topic-actions .actions a:nth-child(2n) { margin-left: 3px; } .forum-topic-page .topic-options { float: left; } .topic-post .quote, .latest-posts .quote { padding: 15px 25px; } .forum-search-page .advanced-search { margin: 0 auto 30px; padding: 35px 30px 40px; } .private-message-view-page .message-head li { display: inline-block; margin-right: 20px; } .private-message-view-page .message-head span:after { content: "|"; margin: 0 0 0 25px; } .private-message-view-page .message-head li:last-child span:after { content: none; } .private-message-view-page .buttons button { display: inline-block; margin: 0 5px; width: auto; width: 25%; max-width: 220px; } .profile-info-box { padding: 40px; } .profile-page .topic { padding: 33px 50px; overflow: hidden; } .profile-page .topic-title, .profile-page .topic-data { float: left; width: 22%; clear: both; } .profile-page .topic-body { margin-left: 24%; } } @media all and (min-width: 1025px) { /* GLOBAL STYLES */ .mobile { display: none !important; } .admin-header-links { float: left; font-size: 12px; background: none; color: #bbb; } .admin-header-links:only-child { float: none; display: block; } .admin-header-links a, .admin-header-links span { line-height: 30px; font-weight: normal; transition: 0.2s ease; } .admin-header-links a:hover { color: #fff; } .product-grid, .category-grid, .topic-block, .news-list-homepage { margin: 0 auto 50px; } .product-grid:last-child, .category-grid:last-child, .topic-block:last-child, .news-list-homepage:last-child { margin-bottom: 0; } .center-2 .category-grid { margin: 0 0 30px; } .center-2 .product-grid, .center-2 .category-grid, .center-2 .topic-block { width: 100%; } .category-description, .manufacturer-description, .vendor-description { margin: 0 0 30px; } .center-2 { margin: 0 0 50px 0; float: right; width: 70%; } .side-2 { border: 1px solid #eeeeee; float: left; width: 27%; } .inputs { text-align: left; } /* HEADER */ .header { position: relative; z-index: 1020; margin: 0 auto; text-align: left; } .header-upper { background-color: #444444; text-align: right; } .header-selectors-wrapper:after { content: ""; display: block; clear: both; } .header-selectors-wrapper select { padding: 0 15px 0 0; background: transparent; border: none; color: #ababab; height: 30px; font-size: 13px; min-width: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .currency-selector.desktop, .language-selector.desktop .select-wrap, .tax-display-type-selector { position: relative; } .currency-selector.desktop:before, .language-selector.desktop .select-wrap:before, .tax-display-type-selector:before { content: "\6b"; position: absolute; top: 50%; left: auto; right: 0; transform: translateY(-50%) rotate(-90deg); display: inline-block; font-family: "emporium-icons"; font-size: 7px; color: #ababab; pointer-events: none; } .header-selectors-wrapper, .header-lower { width: calc(100% - 110px); margin: 0 auto; } .header-menu { padding: 0 55px; } .all-categories { display: none !important; } .header-menu:after { content: ""; display: block; clear: both; } .header-menu > ul { float: right; } .header-menu-parent { font-size: 0; } .category-navigation-list-wrapper { display: inline-block; position: relative; border-right: 3px solid #fff; overflow: hidden; } .category-navigation-list-wrapper * { font-size: 0; } .category-navigation-list { position: absolute; top: 100%; left: 0; margin-top: 10px; padding: 10px 0; border: 1px solid #eeeeee; opacity: 0; pointer-events: none; width: 100%; background-color: #fff; transition: all .3s ease; z-index: 1099; box-shadow: 0 0 15px rgba(0,0,0,.1); } .category-navigation-list > li > .sublist-wrap { margin-top: -16px; } .category-navigation-list > li > .sublist-wrap .sublist-wrap { margin-left: -1px; } .category-navigation-list-wrapper .sublist-wrap { position: absolute; font-size: 0; top: 0; margin: 0; width: 0 !important; left: 100%; border: none; padding: 15px 0; background: url(../Themes/Emporium/Content/img/shadow-top.png) top left repeat-x, url(../Themes/Emporium/Content/img/shadow-bottom.png) bottom left repeat-x; pointer-events: none; overflow: hidden; transition: all .3s ease; } .category-navigation-list-wrapper .sublist-wrap .sublist { border: 1px solid #eeeeee; border-width: 1px 0; padding: 10px 0; background-color: #fff; } .category-navigation-list .plus-button { display: none; } .category-navigation-list-wrapper .sublist > li { opacity: 0; } .category-navigation-list-wrapper ul li a, .category-navigation-list-wrapper ul li > span { position: relative; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 35px 0 20px; height: 40px; line-height: 40px; color: #8c8c8c; font-size: 15px; font-weight: bold; transition: all .2s ease; } .category-navigation-list-wrapper ul li span { font-size: 15px; } .category-navigation-list-wrapper ul li:hover > .sublist-wrap { opacity: 1; pointer-events: auto; overflow: visible; width: 100% !important; } .category-navigation-list-wrapper ul li:hover > .sublist-wrap > .sublist { border-width: 1px; } .category-navigation-list-wrapper ul li:hover > .sublist-wrap > .sublist > li { opacity: 1; transition: all .1s ease-in .3s; } .category-navigation-list-wrapper ul li:hover > a, .category-navigation-list-wrapper ul li:hover > span { background-color: #f6f6f6; color: #97c300; } .category-navigation-list-wrapper ul li:hover > a:after { color: #97c300; } .category-navigation-title { position: relative; z-index: 1100; display: block; width: 280px; padding: 0 15px; line-height: 50px; height: 50px; font-size: 14px; cursor: pointer; text-transform: uppercase; color: #444444; font-weight: bold; transition: all .2s ease; } .category-navigation-title:before { content: "\66"; display: inline-block; margin-right: 10px; font-size: 17px; vertical-align: bottom; font-family: "emporium-icons"; color: #8c8c8c; font-weight: normal; text-transform: none; transition: all .2s ease; } .category-navigation-list-wrapper:hover { overflow: visible; } .category-navigation-list-wrapper:hover .category-navigation-title { background-color: #eebe00; color: #fff; } .category-navigation-list-wrapper:hover .category-navigation-title:before { color: #fff; } .category-navigation-list-wrapper:hover .category-navigation-list { margin-top: 0; opacity: 1; pointer-events: auto; } .category-navigation-list-wrapper .with-subcategories:after { content: "\6a"; position: absolute;; top: 50%; right: 20px; left: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: "emporium-icons"; font-size: 8px; color: #8e8e8e; } .header-lower { padding: 20px 0 18px; text-align: center; font-size: 0; } .header-lower:after { content: ''; display: block; clear: both; } .header-logo { float: left; width: 25%; text-align: left; padding-right: 10px; } .header-links-wrapper { float: right; width: 35%; margin-bottom: 0; text-align: right; } .header-links { display: table; width: 100%; } .header-links ul { font-size: 0; padding-left: 10px; display: inline-table; } .header-links li { position: relative; display: table-cell; text-align: center; vertical-align: top; } .header-links li + li { padding-left: 10px; } .header-links a { display: inline-block; font-size: 13px; color: #8c8c8c; transition: color .2s ease; } .header-links .profile-menu-box .ico-inbox { font-size: 0; } .header-links .profile-menu-box span:before, .header-links .profile-menu-box a:before { font-size: 17px; margin: 0 6px 0 3px; } .header-links span:before, .header-links a:before { display: block; margin-bottom: 4px; font-family: "emporium-icons"; font-size: 24px; color: #8e8e8e; transition: color .2s ease; } .header-links a.ico-cart:before { font-size: 26px; } .header-links a:hover, .header-links a:hover:before { color: #97c300; } .ico-wishlist .wishlist-qty, .ico-cart .cart-qty { position: absolute; display: inline-block; top: -5px; left: 50%; -webkit-transform: translateX(-50%) translateX(25px); -ms-transform: translateX(-50%) translateX(25px); transform: translateX(-50%) translateX(25px); background-color: #97c300; font-size: 10px; height: auto; padding: 0 3px; width: auto; min-width: 15px; min-height: 15px; line-height: 15px; border-radius: 20px; color: #fff; text-align: center; } .ico-cart .cart-label { font-weight: bold; display: inline-block; height: 15px; white-space: nowrap; } .search-box { display: inline-block; font-size: 0; } .header-lower .search-box { float: left; width: 40%; } .search-box .search-box-button { width: 47px; height: 47px; border: none; background: #eebe00 url(../Themes/Emporium/Content/img/search-button-desktop.png) center no-repeat; transition: background-color .1s ease; } .search-box form { display: block; } .search-box input.search-box-text { height: 47px; color: #8c8c8c; width: calc(100% - 47px); } .mobile-flyout-wrapper { position: relative; display: table-cell; width: 1%; vertical-align: top; text-align: center; padding-left: 10px; z-index: 1200; } .mini-shopping-cart { display: none; position: absolute; top: 98%; right: 0; padding-top: 8px; z-index: 1030; } .mobile-flyout-wrapper:hover .mini-shopping-cart { display: block; } .mini-shopping-cart > div:before { content: " "; position: absolute; bottom: 100%; left: auto; right: 17px; border: solid transparent; height: 0; width: 0; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 8px; margin-left: -8px; } .mini-shopping-cart .flyout-cart-scroll-area { border-radius: 3px; box-shadow: 0 0 15px rgba(0,0,0,0.15); width: 430px; } .flyout-cart .items { padding: 0 20px; max-height: calc(100vh - 320px); overflow: hidden; } .mini-shopping-cart .right { float: right; clear: right; max-width: 80px; text-align: right; } .mini-shopping-cart .left { width: calc(100% - 90px); float: left; } .mini-shopping-cart .name a { margin: 0 0 10px; } .mini-shopping-cart .attributes { margin-bottom: 10px; } .mini-shopping-cart .quantity { font-size: 16px; float: none; margin: 0; } .mini-shopping-cart .quantity:after { content: none; } .mini-shopping-cart .price { float: none; } .ui-autocomplete { width: calc(100% - 47px) !important; z-index: 1015; /*should be lower than header but equal or higher than header-menu*/ } .ui-autocomplete { padding: 8px 0; } .ui-autocomplete a { padding: 5px 15px; } .ui-autocomplete img { width: 77px; } .ui-autocomplete span { max-width: calc(100% - 90px); } .header-selectors-wrapper > div { margin: 0 10px; } .responsive-nav-wrapper-parent { display: none; } /* HEADER MENU */ .menu-title, .close-menu, .header-menu .back-button { display: none; } .overlayOffCanvas { display: none !important; } .header-menu { text-align: left; position: relative; z-index: 1010; margin: 0 0 3px; background-color: #f6f6f6; } .header-menu > ul { margin: 0 auto; font-size: 0; } .header-menu > ul > li { display: inline-block; vertical-align: middle; } .header-menu > ul > li > a, .header-menu > ul > li > span { display: block; padding: 0 15px; height: 50px; line-height: 50px; font-size: 13px; /*reset zeroing*/ cursor: pointer; text-transform: uppercase; color: #8c8c8c; font-weight: bold; transition: color .2s ease; } .header-menu > ul > li:hover > a, .header-menu > ul > li:hover > span { color: #444444; } .top-menu { display: block; } .header-menu .sublist .back-button { display: none; } /* FOOTER */ .footer:after { content: ""; display: block; clear: both; } .footer-upper { width: 28%; float: left; clear: left; text-align: left; padding-left: 3%; } .footer-middle { float: right; width: 72%; margin: 55px 0; padding: 0 3% 0 1.5%; clear: right; text-align: left; } .footer-lower { clear: both; } .footer-logo { margin-top: 0; } .footer-block { width: 20.5%; margin: 0 1.5%; } .footer-block ul { padding-bottom: 0; } .footer-block .title { padding: 0; margin-bottom: 7px; } .footer-block ul li { padding: 9px 0; } .footer-middle .socials-and-payments { width: 27%; float: right; } .footer-middle .social-icons { padding: 0; border: none; margin-top: 0; } .footer-lower { padding: 13px; } .footer-lower > div { display: inline-block; margin: 0 0 0 5px; } .footer-lower > div:before { content: ""; display: inline-block; margin-right: 5px; width: 4px; height: 4px; vertical-align: middle; border-radius: 50%; font-size: 0; background-color: #c8c8c8; } .footer-lower > div:first-child { margin-left: 0; } .footer-lower > div:first-child:before, .footer-lower > div.theme-selector:before { display: none; } .footer-lower > div.theme-selector { margin: -9px 0 -9px 5px; } /* LEFT/RIGHT COLUMN */ .product-selectors { margin: 0 0 20px; } .block { float: none; width: auto; margin: 0 0 3px; } .block .title { cursor: default; padding: 14px 30px; } .block .title:before { content: none; display: none; } .block.block-recently-viewed-products .title { padding: 15px 20px; } .block.block-recently-viewed-products .title:before { display: none; } .block.block-recently-viewed-products .listbox { padding: 0; } .block.block-recently-viewed-products .listbox li { padding: 10px; border-top: 1px solid #eeeeee; } .block.block-recently-viewed-products .listbox li:first-child { border-top: 0; } .block.block-recently-viewed-products .list a { color: #444444; } .block.block-recently-viewed-products .list a:hover { color: #97c300; } .block.block-recently-viewed-products .product-picture { display: inline-block; margin-right: 16px; width: 84px; vertical-align: middle; } .block .product-picture img { display: block; max-width: 100%; } .block .product-name { display: inline-block; width: calc(100% - 103px); vertical-align: middle; } /* CATEGORY PAGE & GRIDS */ .vendor-item .title a, .manufacturer-item .title a, .category-grid .item-box .title a { font-size: 17px; } .home-page .topic-block, .home-page-category-grid, .sub-category-grid, .manufacturer-grid, .product-grid, .category-grid, .topic-block, .news-list-homepage, .home-page-polls { margin-bottom: 70px; } .center-2 .product-grid { margin-bottom: 50px; } .home-page-advantages { padding: 35px 20px; margin: -60px -20px 70px; background-color: #f6f6f6; text-align: center; } .advantages-item { padding: 0 1%; width: 25%; margin: 0; background-color: transparent; text-align: center; vertical-align: top; } .advantages-item > div { display: block; } .advantages-item .picture { margin-bottom: 15px; width: 100%; height: auto; } .advantages-item .info { width: 100%; } .advantages-item .description { display: block; margin-top: 10px; color: #8c8c8c; font-size: 15px; } .advantages-item .description p { line-height: 1.7; } .center-2 .page-title, .category-description, .manufacturer-description, .vendor-description, .center-2 .product-grid .title { text-align: left; } .block { border: none; } .block .listbox { display: block; } .center-1 .breadcrumb { text-align: center; } .breadcrumb { text-align: left; margin: 0 0 15px 0; } .mobile-name-holder .breadcrumb { text-align: center; } .breadcrumb li * { line-height: normal; } #products-pagesize-mobile { display: none !important; } #products-pagesize-desktop { display: inline-block; } .product-selectors > div > span { display: inline-block; vertical-align: middle } .product-selectors .product-page-size { margin-left: 0; width: auto; } .product-selectors { font-size: 13px; text-align: left; color: #8c8c8c; font-weight: bold; text-transform: uppercase; } .product-selectors select { display: inline-block; margin: 0 10px; width: auto; height: 45px; background-color: #fff; border: 1px solid #e7e7e7; border-radius: 2px; font-weight: normal; text-transform: none; background-image: url('../Themes/Emporium/Content/img/select-arrow-dark.svg'); } .product-selectors .product-sorting { display: inline-block; float: right; margin: 0; width: auto; } .product-selectors .product-viewmode { display: inline-block; float: right; margin: 0; font-size: 0; } .item-box { width: 24.25%; margin: 0 0 1% 1%; } .item-box:nth-child(2n+1), .item-box:nth-child(3n+1) { margin-left: 1%; clear: none; } .item-box:nth-child(4n+1) { margin-left: 0; clear: both; } .product-grid .item-box .picture > a:after { content:""; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #444; opacity: 0; transition: all .1s ease; } .product-grid .item-box:hover .picture > a:after { opacity: .4; } .carousel-wrapper .item-box .picture > a:after, .two-row-carousels .item-box .picture > a:after { content: none; display: none; } .product-list { margin-bottom: 30px; } .product-list .add-to-cart-qty-wrapper .plus, .product-list .add-to-cart-qty-wrapper .minus { height: 16px; line-height: 16px; } .center-2 .product-list .product-item:after { content: ""; display: block; clear: both; } .center-2 .product-list .item-box { position: relative; width: 100%; margin: 0 0 15px !important; text-align: left; } .center-2 .product-list .item-box .picture { float: left; width: 260px; margin-bottom: 0; overflow: visible; } .center-2 .product-list .item-box .picture > a:before { padding-top: 100% !important; } .center-2 .product-list .item-box .picture img { border-radius: 3px 0 0 3px; } .center-2 .product-list .item-box .details { margin: 0 30% 0 290px; padding: 30px 0 0; max-height: 172px; overflow: hidden; } .center-2 .product-list .item-box .add-info { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 30%; padding: 0 20px; text-align: center; } .product-list .prices > span { display: block; } .product-list .item-box .old-price { font-size: 16px; color: #444444; } .product-list .item-box .actual-price { font-size: 20px; margin: 4px 0; } .center-2 .product-list .item-box .buttons .button-2 { width: auto; background-color: #eebe00; color: #fff; height: 40px; padding: 0 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .center-2 .product-list .item-box .btn-wrapper button { line-height: 45px; border-radius: 3px; background-color: #f2f2f2; } .center-2 .product-list .item-box .btn-wrapper button:hover { background-color: #eaeaea; } .center-2 .product-list .item-box .btn-wrapper button:before { font-size: 19px; } .center-2 .product-list .item-box .btn-wrapper button:hover:before { color: #8c8c8c; } .product-list .item-box .product-title, .product-list .item-box .title { height: auto; font-size: 18px; font-weight: bold; padding: 0; } .product-list .item-box .product-rating-box { margin-bottom: 15px; } .product-list .item-box .description { display: block; height: auto; max-height: 81px; margin: 0; line-height: 20px; font-size: 15px; color: #8c8c8c; } .product-list .item-box .btn-wrapper { left: 100%; top: auto; bottom: 30px; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; width: 200px; padding-left: 30px; } .product-list .item-box button, .product-list .item-box .btn-wrapper .button-2 { width: 45px; height: 45px; } .product-list .item-box button:hover { background-color: #eaeaea; } .page-title h1 { font-size: 30px; } .topic-block-title h2 { font-size: 25px; } .center-2 .page-title { padding: 0; } .center-2 .item-box { width: 32.66%; } .center-2 .item-box:nth-child(2n+1), .center-2 .item-box:nth-child(4n+1) { margin-left: 1%; clear: none; } .center-2 .item-box:nth-child(3n+1) { margin-left: 0; clear: both; } .news-list-homepage .news-item { width: 32.4%; } .news-list-homepage .news-item:nth-child(2n+1) { margin-left: 1.4%; clear: none; } .news-list-homepage .news-item:nth-child(3n+1) { margin-left: 0; clear: left; } /* PRODUCT PAGE */ .gallery .picture { width: auto; } .attribute-squares { text-align: left; } .product-tags-box .title, .product-details-page .product-grid .title, .shopping-cart-page .product-grid .title { font-size: 26px; } .product-variant-line .attributes-wrapper { margin-left: 0; } /* REVIEW PAGE */ .product-reviews-page .page-title { text-align: center; } .product-review-item { text-align: left; } .product-review-item .review-content { overflow: hidden; } .product-review-item .product-review-box { padding: 2px 0 0; } .product-review-item .product-review-box .rating { margin: 0; } .product-review-item .review-item-head { text-align: left; } .product-review-item .review-info { float: left; padding: 0 20px 0 0; width: 13%; margin: 0; } .product-review-helpfulness { float: right; width: 20%; margin: 0; text-align: center; padding-left: 20px; } .review-body { width: 67%; float: left; } .product-review-item .review-info .separator { display: none; } .product-review-item .product-review-box, .review-info .user { margin-bottom: 10px; } /* TABLES */ .data-table td label, .td-title { display: none; } td.remove-from-cart label, td.add-to-cart label { font-size: 0; } /* WISHLIST & COMPARE LIST */ .compare-products-page .page-body { position: relative; margin: 0 -20px; } .compare-products-page .clear-list { position: absolute; top: 0; left: 0; width: 170px; text-align: center; border-bottom: 1px solid #eee; z-index: 1; } .compare-products-table { display: table; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .compare-products-table td { border-right: 1px solid #eee; } .compare-products-mobile { display: none; } /* REGISTRATION, LOGIN, MY ACCOUNT */ .login-page .new-wrapper { position: relative; float: right; width: 49%; max-width: none; min-height: 440px; z-index: 1; } .login-page .returning-wrapper form { float: left; width: 49%; max-width: none; min-height: 440px; } .login-page .customer-blocks + .topic-block { margin-bottom: 0; } .returning-wrapper .form-fields, .login-page .text, .registration-page .form-fields { padding: 45px 13% 20px; } .login-page .text { min-height: 255px; } .new-wrapper .text:before { margin: 20px 0; } .login-page .buttons, .registration-page .buttons, .registration-page .buttons { padding: 10px 13% 45px; } .login-page .inputs.reversed label, .login-page .inputs.reversed span { font-size: 15px; line-height: 17px; } .login-page .external-authentication > * { padding: 45px 0; margin: 30px 0 0; width: 100%; } .email-a-friend-page .page-body form, .contact-page .page-body form, .apply-vendor-page .page-body form, .forum-edit-page .page-body, .password-recovery-page .page-body, .private-message-send-page .page-body, .move-topic-page .page-body { padding: 45px 13%; } .html-account-page .center-2 { width: 73%; } .account-page { padding: 40px; } .account-page .address-item > .title, .account-page .order-item > .title, .account-page .request-item > .title { text-align: center; } .account-page .buttons { text-align: left; } .html-account-page .page-title { text-align: center; padding: 0 0 0 27%; } .html-account-page .side-2 { border: none; } .block-account-navigation.block .title { display: none; } .block-account-navigation.block .listbox { padding: 0; text-align: right; } .block-account-navigation.block .list a { position: relative; display: block; padding: 15px 65px 15px 0; max-width: 100%; font-size: 14px; text-transform: uppercase; font-weight: bold; color: #b7b7b7; transition: all .2s ease; } .block-account-navigation.block .list a:hover, .block-account-navigation.block .list a:hover:after { color: #97c300; } .block-account-navigation.block .list .active a { border-right: 2px solid #97c300; color: #97c300; } .block-account-navigation.block .list a:after { position: absolute; top: 50%; left: auto; right: 23px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; vertical-align: middle; margin-left: 23px; font-family: "emporium-icons"; font-size: 20px; font-weight: normal; text-transform: none; color: #b7b7b7; transition: all .2s ease; } .account-page .title { margin-bottom: 30px; } .block-account-navigation.block .list .active a:after { color: #97c300; } .block-account-navigation .customer-info a:after, .block-account-navigation .customer-vendor-info a:after { content: "\61"; } .block-account-navigation .customer-addresses a:after { content: "\4e"; } .block-account-navigation .customer-orders a:after { content: "\64"; } .block-account-navigation .return-requests a:after { content: "\4f"; } .block-account-navigation .downloadable-products a:after { content: "\4a"; } .block-account-navigation .back-in-stock-subscriptions a:after { content: "\45"; } .block-account-navigation .reward-points a:after { content: "\50"; } .block-account-navigation .change-password a:after { content: "\78"; } .block-account-navigation .customer-check-gift-card-balance a:after { content: "\e90b"; } .block-account-navigation .customer-avatar a:after { content: "\51"; } .block-account-navigation .forum-subscriptions a:after { content: "\52"; } .block-account-navigation .customer-reviews a:after { content: "\53"; } .block-account-navigation .customer-gdpr a:after { content: "\e90a"; } .block-account-navigation .customer-multiFactor-authentication a:after { content: "\e90c"; font-size: 17px !important; } .block-account-navigation .vendor-info a:after { content: "\54"; } .address-item .info { margin-bottom: 0; } .address-item .buttons { position: absolute; top: 10px; right: 10px; } .address-item .title { padding: 0 80px; } .order-item .buttons { text-align: center; } .account-page .product-review-item .review-info { width: 210px; } .account-page .product-review-item .review-body { width: calc(100% - 210px); } .order-details-page .page-body { overflow: hidden; } .order-details-page .section.products, .order-summary-content .table-wrapper { float: left; width: 70%; } .order-details-page .options, .order-details-page .totals, .order-summary-content .cart-footer { float: right; width: calc(30% - 20px); } .shopping-cart-page .cart-footer, .shopping-cart-page .table-wrapper { float: none; width: 100%; } .selected-checkout-attributes { margin-top: 0; } .check-gift-card-balance-page .captcha-box { text-align: left; } /* SHOPPING CART & CHECKOUT */ .shopping-cart-page .common-buttons { text-align: left; } .shopping-cart-page .common-buttons button { margin: 0 7px 0 0; padding: 0 25px; width: auto; } .shopping-cart-page .continue-shopping-button { margin: 0 !important; float: right; } .address-grid > div { max-width: none; } /* SEARCH & SITEMAP */ .search-page .page-title { text-align: center; } .search-page .search-input form { margin: 0 0 40px; } .search-page .search-input form .inputs { text-align: center; } /* BLOG & NEWS */ .news-item-page .inputs:first-child label { display: inline-block; } .new-comment textarea { display: block; margin: auto; } /* FORUM & PROFILE */ .topic-block { padding: 0; } .forums-main-page .forums-table-section td:first-child, .forum-page .forums-table-section td:first-child { padding-left: 40px !important; } .forums-main-page .forums-table-section td:last-child, .forum-page .forums-table-section td:last-child { padding-right: 40px !important; } .forums-table-section .image div { width: 40px; height: 40px; } .forums-table-section .image div:before { font-size: 40px; } .topic-post .post-info { width: 190px; float: left; padding: 30px 0 30px 30px; } .topic-post .user-info { padding: 0; } .topic-post .username { margin: 0 0 10px; } .topic-post .avatar { position: static; margin-bottom: 10px; } .topic-post .post-content { position: relative; float: right; width: calc(100% - 190px); padding: 55px 30px 30px; } .topic-post .post-actions { position: absolute; top: 10px; right: 10px; } .topic-post .post-actions > div.post-vote { float: right; clear: both; } .topic-post .post-vote > div, .topic-post .post-vote > span { height: 50px; line-height: 50px; } .topic-post .post-body { width: 70%; max-width: 1000px; } } @media all and (min-width: 1281px) { /* GLOBAL STYLES */ .master-wrapper-content, .html-account-page .master-wrapper-content { padding: 70px 6vw; } .home-page .topic-block { width: 80%; } /* HEADER-MENU */ .header-selectors-wrapper, .header-lower { width: 88%; } .header-menu { padding: 0 6vw; } .header-logo { padding-right: 20px; } .header-links li + li { padding-left: 20px; } /* FOOTER */ .footer-upper { padding-left: 6vw; } .footer-middle { padding: 0 6vw 0 4.5vw; } .footer-lower .theme-selector { margin-top: 0; } .footer-lower > div:before { margin-right: 15px; } .footer-lower > div, .footer-lower > div.theme-selector { margin-left: 15px; } .newsletter-email { margin: 0; } .theme-selector { margin-top: 0; } /* SMALL PRODUCTS CAROUSELS */ .small-products { margin: 70px 0 0 !important; padding: 0; } .small-products .item-box { max-height: 150px; } .small-products .item-box .product-item > div:first-child { width: 150px; } .small-products .item-box .details { padding: 27px 5%; width: calc(100% - 150px); } .two-row-carousels .product-grid .title { font-size: 26px; } .two-row-carousels > div { float: left; width: 47%; } .two-row-carousels > div:nth-child(2) { margin-left: 6%; } .two-row-carousels > div:only-child { width: 100%; } .two-row-carousels .slick-slide { min-height: 301px; } .two-row-carousels .slick-next, .two-row-carousels .slick-prev { bottom: 132px; } /* LEFT/RIGHT COLUMN */ .side-2 { width: 24%; } .center-2 { width: 73%; } .html-account-page .center-2 { width: calc(100% - 280px); } .html-account-page .side-2 { width: 280px; } .html-account-page .page-title { padding: 0 0 0 280px; } /* CATEGORY PAGE & GRIDS */ .news-list-homepage .news-item { padding: 40px; } .home-page-advantages { padding: 35px 7%; margin: -70px -6vw 70px; } .advantages-item { padding: 0 2%; } .item-box { width: 19.2%; } .item-box:nth-child(4n+1) { margin-left: 1%; clear: none; } .item-box:nth-child(5n+1) { margin-left: 0; clear: both; } .center-2 .item-box { width: 24.25%; } .center-2 .item-box:nth-child(3n+1), .center-2 .item-box:nth-child(5n+1) { margin-left: 1%; clear: none; } .center-2 .item-box:nth-child(4n+1) { margin-left: 0; clear: both; } .center-2 .product-list .item-box .details { margin: 0 25% 0 290px; } .center-2 .product-list .item-box .add-info { width: 25%; } .block .listbox { padding: 18px 30px; } /* PRODUCT PAGE */ .product-details-page .breadcrumb { text-align: left; } .full-description, .product-specs-box { margin: 0 -6vw; padding: 40px 22%; } .mobile-name-holder { display: none; } .gallery { float: left; width: 30%; max-width: none; } .gallery .picture { max-width: 500px; } .gallery .thumb-item { max-width: 22%; } .product-name h1 { font-size: 28px; } .overview { position: relative; float: right; width: 68%; padding-right: 325px; margin-left: 0; text-align: left; } .overview .short-description { padding: 0; } .overview .breadcrumb { margin-bottom: 25px; } .overview .prices { margin: 50px 0 25px; } .overview .add-to-cart { display: block; margin: 0 auto 30px; width: calc(100% - 40px); max-width: none; } .overview .add-to-wishlist { display: block; width: 100%; margin-left: 0; } .overview .add-to-wishlist button { width: 100%; font-size: 13px; } .overview .add-to-wishlist button:before { margin-right: 10px; } .grouped-product-box label { display: block; } .product-variant-line { font-size: 0; text-align: left; } .variant-picture { display: inline-block; vertical-align: middle; float: none; margin-bottom: 0; } .variant-picture + .variant-overview { position: relative; display: inline-block; vertical-align: middle; float: none; margin-bottom: 0; width: calc(100% - 350px); margin-left: 20px; text-align: left; } .variant-info > div:last-child { margin-bottom: 0; } .variant-info { display: inline-block; margin-right: 20px; width: calc(100% - 320px); vertical-align: middle; } .variant-overview .tax-shipping-info { text-align: center; } .product-variant-box { display: inline-block; vertical-align: middle; width: 300px; text-align: center; } .product-prices-box { position: absolute; top: 0; right: 0; left: auto; width: 300px; text-align: center; } .grouped-product-box { position: absolute; top: 0; right: 0; left: auto; width: 300px; text-align: center; border: 1px solid #eeeeee; border-radius: 3px; padding: 10px; } .grouped-product-box label { margin: 10px 0 20px; } .product-prices-box > div:first-child { border: 1px solid #eeeeee; border-radius: 3px; padding: 0 10px 10px; } .attributes-wrapper { border: none; padding: 0; max-width: none; } .attributes-wrapper > div { padding: 0; margin-left: 0; } .attributes { max-width: 320px; } .attributes dt, .attributes dd { text-align: left; } .overview .stock { display: block; border-radius: 3px 3px 0 0; margin: 0 -10px 12px; } .breadcrumb li > a, .breadcrumb li > span, .breadcrumb li > strong { margin: 0 6px 0 0; } .breadcrumb .delimiter { margin-right: 10px; } .overview .product-name { display: inline-block; width: 59%; min-height: 100px; } .product-reviews-overview { margin-bottom: 15px; } .overview .reviews-and-compare { float: right; text-align: right; width: 40%; margin: 0; } .overview .compare-products { margin: 0; } .product-review-box { margin: 10px 0 5px 0; } .ui-tabs .inputs label { width: 290px; } .product-social-label { margin: 0 10px 0 0; } .product-social-sharing { display: inline-block; } /* REVIEW PAGE */ .product-review-item { padding: 40px 3%; } /* WISHLIST & COMPARE LIST */ .wishlist-page .share-info { margin: 70px 0 50px; } .compare-products-page .page-body { margin: 0; } .compare-products-table td { padding: 20px; } .compare-products-table tr td:first-child { min-width: 200px; max-width: 200px; } .compare-products-page .clear-list { width: 200px; } /* TOPICS */ /* CONTACT PAGE & EMAILaFRIEND */ /* REGISTRATION, LOGIN, MY ACCOUNT */ /* SHOPPING CART & CHECKOUT */ .order-progress a { width: 180px; } .cart-collaterals > div { float: none; width: 100%; margin: 0 0 10px; } .shopping-cart-page form { overflow: hidden; } .shopping-cart-page form:after { content: ""; display: block; clear: both; } .shopping-cart-page .product-grid { clear: both; } .shopping-cart-page .table-wrapper { float: left; clear: left; width: 70%; } .shopping-cart-page .cart-footer { float: right; clear: right; width: calc(30% - 30px); } .cart-footer > div, .cart-footer > div > div { display: block; width: 100%; } /* SEARCH & SITEMAP */ /* BLOG & NEWS */ .new-comment, .comment-list { margin-left: -6vw; margin-right: -6vw; } /* FORUM & PROFILE */ .ui-tabs .ui-tabs-panel { margin: 0 -6vw; padding: 50px 7%; } .profile-page .topic-title, .profile-page .topic-data { width: 18%; } .profile-page .topic-body { margin-left: 20%; } } @media all and (min-width:1601px) { /*HEADER*/ .header-lower .search-box { width: 50%; } .header-links-wrapper { width: 30%; } .header-logo { width: 20%; } /* CATEGORY PAGE */ .center-2 { width: 78%; } .side-2 { width: 20%; } .item-box { width: 15.83%; } .item-box:nth-child(5n+1) { margin-left: 1%; clear: none; } .item-box:nth-child(6n+1) { margin-left: 0; clear: both; } .center-2 .item-box { width: 19.2%; } .center-2 .item-box:nth-child(4n+1), .center-2 .item-box:nth-child(6n+1) { margin-left: 1%; clear: none; } .center-2 .item-box:nth-child(5n+1) { margin-left: 0; clear: both; } .center-2 .product-list .item-box .buttons .button-2 { padding: 0 30px; } /*FEATURED PRODUCTS ON CATALOG PAGE*/ /* .category-page .featured-product-grid { background-color: #f6f6f6; padding: 45px; } .category-page .featured-product-grid > .title { display: none; } .category-page .featured-product-grid .item-box { width: calc(50% - 7px); margin: 14px 0 0 14px; background-color: #fff; } .category-page .featured-product-grid .product-item { font-size: 0; } .category-page .featured-product-grid .product-item > div { display: inline-block; vertical-align: middle; width: 50%; margin: 0; clear: none; } .category-page .featured-product-grid .item-box:nth-child(1), .category-page .featured-product-grid .item-box:nth-child(2) { margin-top: 0; } .category-page .featured-product-grid .item-box:nth-child(2n+1) { margin-left: 0; } .category-page .featured-product-grid .item-box .details { padding: 20px; } .category-page .featured-product-grid .item-box .product-title { font-size: 18px; height: auto; } .category-page .featured-product-grid .item-box .actual-price { font-size: 22px; } .category-page .featured-product-grid .item-box .product-rating-box { margin-bottom: 30px; } .category-page .featured-product-grid .item-box .buttons { margin-top: 10px; } .category-page .featured-product-grid .item-box .buttons button { width: auto; background-color: #f3cb2d; color: #fff; } .category-page .featured-product-grid .item-box .buttons button:hover { background-color: #e8af00; }*/ /*PRODUCT PAGE*/ .overview { width: 62%; padding-right: 415px; } .product-prices-box, .grouped-product-box { width: 380px; } .gallery { width: 36%; } .gallery:after { content: ''; display: block; clear: both; } .gallery > div:first-child { float: right; width: calc(100% - 95px); } .gallery .picture { max-width: none; } .gallery .picture-thumbs { float: left; width: 15%; max-width: 87px; margin: 0; } .gallery .thumb-item { display: block; margin: 0 0 10px; max-width: none; } .overview .reviews-and-compare { width: 33%; } .overview .product-name { width: 64%; } /* CHECKOUT */ .address-grid > div { width: calc(33.33% - 16.66px); } .address-grid > div:nth-child(2n+1) { margin-left: 25px; } .address-grid > div:nth-child(3n+1) { margin-left: 0; } .address-grid > div:nth-child(3) { margin-top: 0; } } /* ============================================================ DHZ design-laag — site-breed. Geeft álle nopCommerce-pagina's de DHZ-look (knoppen, velden, koppen, blokken, tabellen, account-menu), ook pagina's zonder eigen design-CSS. Lage specificiteit: pagina-specifieke design-CSS (#dhz-header, .ct-wrap, .login-card, .cl-wrap, .dhz-account, ...) wint altijd. ============================================================ */ /* LIVE-DIVERGENTIE: content-laag afgeschermd voor niet-geporte SevenSpikes-pagina's (home/categorie/product/manufacturer/blog/news/search) via :where()-gate (0 specificiteit). Test houdt de ongegatete versie (site-brede DHZ-look = gewenst daar). */ :root{ --dhz-blue:#1b63d6; --dhz-blue-dark:#1450b0; --dhz-blue-soft:#eef4fd; --dhz-green:#5aa726; --dhz-green-dark:#4d9120; --dhz-amber:#e0a020; --dhz-red:#d6242c; --dhz-ink:#16202e; --dhz-text:#4a586a; --dhz-muted:#8b97a6; --dhz-line:#e6eaf0; --dhz-hair:#eef1f5; --dhz-soft:#f6f8fb; --dhz-card:#fff; --dhz-r:11px; --dhz-font:'Roboto',Arial,Helvetica,sans-serif; --muted:#8b97a6; --ink:#16202e; } /* ---- typografie / basis ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content{ color:var(--dhz-text); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content h1{ color:var(--dhz-ink); font-weight:700; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content a{ color:var(--dhz-blue); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content a:hover{ color:var(--dhz-blue-dark); } /* ---- knoppen ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .button-1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content button.button-1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input.button-1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content a.button-1{ background:var(--dhz-blue); border:1px solid var(--dhz-blue); color:#fff; border-radius:9px; padding:11px 20px; font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; transition:background .15s,border-color .15s; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .button-1:hover, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content button.button-1:hover, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input.button-1:hover, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content a.button-1:hover{ background:var(--dhz-blue-dark); border-color:var(--dhz-blue-dark); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .button-2, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content button.button-2, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input.button-2, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content a.button-2{ background:#fff; border:1.5px solid var(--dhz-blue); color:var(--dhz-blue); border-radius:9px; padding:10px 18px; font-weight:600; font-size:13.5px; font-family:inherit; cursor:pointer; transition:background .15s; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .button-2:hover, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content button.button-2:hover, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input.button-2:hover, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content a.button-2:hover{ background:var(--dhz-blue-soft); } /* ---- formuliervelden ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=text], html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=email], html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=password], html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=tel], html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=number], html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=search], html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content select, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content textarea{ border:1.5px solid var(--dhz-line); border-radius:8px; padding:9px 12px; font-family:inherit; font-size:14px; color:var(--dhz-ink); background:#fff; outline:none; transition:border-color .15s,box-shadow .15s; max-width:100%; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=text]:focus, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=email]:focus, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=password]:focus, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=tel]:focus, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=number]:focus, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content input[type=search]:focus, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content select:focus, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content textarea:focus{ border-color:var(--dhz-blue); box-shadow:0 0 0 3px var(--dhz-blue-soft); } /* ---- blokken / sidebars ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .block .title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .block-account-navigation .title{ color:var(--dhz-ink); font-weight:700; font-size:15px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .fieldset .title strong, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .section .title strong{ color:var(--dhz-ink); font-weight:700; } /* ---- account-navigatie (zijbalk) ---- */ .block-account-navigation .listbox{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); overflow:hidden; } .block-account-navigation .list li a{ display:block; padding:11px 16px; color:var(--dhz-text); text-decoration:none; border-bottom:1px solid var(--dhz-hair); font-size:14px; transition:background .12s,color .12s; } .block-account-navigation .list li:last-child a{ border-bottom:none; } .block-account-navigation .list li a:hover{ background:var(--dhz-soft); color:var(--dhz-blue); } .block-account-navigation .list li.active a{ background:var(--dhz-blue-soft); color:var(--dhz-blue); font-weight:600; box-shadow:inset 3px 0 0 var(--dhz-blue); } /* ---- tabellen (orderhistoriek, mandje, adressen, ...) ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content table.cart, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .data-table, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content table.order-list, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .table-wrapper > table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); overflow:hidden; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .data-table th, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content table.cart th{ background:var(--dhz-soft); color:var(--dhz-muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.3px; padding:12px 14px; text-align:left; border-bottom:1px solid var(--dhz-line); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .data-table td, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content table.cart td{ padding:12px 14px; border-bottom:1px solid var(--dhz-hair); color:var(--dhz-text); } /* ---- meldingen ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .message-error, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .field-validation-error{ color:var(--dhz-red); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .message-success{ color:var(--dhz-green); } /* ---- algemene 'card'-secties in account/checkout ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page.account-page .section, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .order-details-page .section{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:18px; margin-bottom:16px; } /* ============================================================ Generieke content-/preview-loze pagina's: consistente gecentreerde container + prominente titel + kaart. (product/categorie/cart/login/register/contact hebben hun eigen .pp-wrap/.cl-wrap/…-design en worden NIET geraakt.) ============================================================ */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .sitemap-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .registration-result-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .password-recovery-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .account-activation-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .email-a-friend-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .apply-vendor-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .product-reviews-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .new-products-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .order-completed-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .wishlist-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .compare-products-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-list-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-item-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blogpost-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .email-wishlist-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .product-email-a-friend-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .return-request-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .order-details-page, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .shipment-details-page{ max-width:1180px; margin:0 auto; padding:24px 18px 48px; } /* prominente paginatitel op de generieke contentpagina's (Emporium verbergt .page-title soms) */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .sitemap-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .registration-result-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .password-recovery-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .product-reviews-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .new-products-page > .page-title{ display:block; } /* Emporium verbergt topic-titels met hoge specificiteit → expliciet terugzetten */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page > .page-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page > .page-title h1{ display:block !important; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .sitemap-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .registration-result-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .password-recovery-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .product-reviews-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .new-products-page > .page-title h1{ font-size:26px; font-weight:700; color:var(--dhz-ink); margin:0 0 20px; display:block; } /* tekst-/contentpagina's krijgen een nette kaart */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page .page-body, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page .page-body, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .info-page .page-body{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:26px 28px; line-height:1.7; color:var(--dhz-text); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page .page-body h2, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page .page-body h3{ color:var(--dhz-ink); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .topic-page .page-body p{ margin:0 0 14px; } /* ============================================================ Meerstaps-checkout (OPC staat uit): consistente dhz-opmaak. Uitsluitend CSS op standaard nopCommerce-markup → raakt de checkout-logica/AJAX niet. Scope: .checkout-page. ============================================================ */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress{ margin:0 0 26px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress ul{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li{ flex:1; min-width:110px; text-align:center; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li a, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li span{ display:block; padding:11px 8px; font-size:13px; font-weight:600; color:var(--dhz-muted); border-bottom:3px solid var(--dhz-line); text-decoration:none; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li.active a, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li.active span{ color:var(--dhz-blue); border-bottom-color:var(--dhz-blue); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li.done a, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li.done span{ color:var(--dhz-green); border-bottom-color:var(--dhz-green); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-progress li.inactive a{ pointer-events:none; opacity:.7; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .checkout-data .section, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-summary{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:20px 22px; margin-bottom:18px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .checkout-data .section > .title strong, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-summary > .title strong{ font-size:16px; font-weight:700; color:var(--dhz-ink); display:block; margin-bottom:14px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .address-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .address-item{ border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:14px 16px; display:flex; flex-direction:column; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .address-box{ list-style:none; margin:0 0 12px; padding:0; font-size:13.5px; color:var(--dhz-text); line-height:1.55; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .address-box .name{ font-weight:700; color:var(--dhz-ink); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .address-item .select-button{ margin-top:auto; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .buttons{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .selector label{ margin-left:8px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .method-list, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .shipping-methods, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .payment-methods{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .method-list li, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .shipping-methods li, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .payment-methods li{ border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:13px 16px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .method-name label, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .payment-details label{ font-weight:600; color:var(--dhz-ink); } /* ---- One-page checkout (accordion) → dhz-kaarten (CSS-only, flow ongemoeid) ---- */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc > li.tab-section{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); box-shadow:0 1px 2px rgba(16,24,40,.03),0 4px 16px rgba(16,24,40,.045); overflow:hidden; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc > li .step-title{ padding:14px 18px; background:var(--dhz-soft); border-bottom:1px solid var(--dhz-hair); cursor:pointer; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc > li .step-title .title{ margin:0; font-size:15px; font-weight:700; color:var(--dhz-ink); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc > li.hidden .step-title .title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc > li.inactive .step-title .title{ color:var(--dhz-muted); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc > li .step{ padding:18px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .opc .buttons{ margin-top:14px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page #opc-confirm_order .confirm-order, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .checkout-page .order-summary-content{ background:var(--dhz-soft); border:1px solid var(--dhz-hair); border-radius:var(--dhz-r); padding:16px; } /* ============================================================ Beheerbalk (enkel zichtbaar voor beheerders) — zwarte topbalk. ============================================================ */ .dhz-adminbar{ display:flex; align-items:center; gap:16px; background:#0f172a; color:#e2e8f0; padding:8px 6vw; font-family:var(--dhz-font); font-size:13px; line-height:1.2; } .dhz-adminbar .dhz-adminbar-tag{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:#fff; } .dhz-adminbar .dhz-adminbar-tag svg{ width:15px; height:15px; color:#fbbf24; } .dhz-adminbar .dhz-adminbar-store{ color:#94a3b8; font-size:12.5px; } .dhz-adminbar .dhz-adminbar-actions{ display:inline-flex; align-items:center; gap:16px; } .dhz-adminbar .dhz-adminbar-btn{ background:#fbbf24; color:#0f172a; font-weight:700; padding:6px 15px; border-radius:7px; text-decoration:none; white-space:nowrap; } .dhz-adminbar .dhz-adminbar-btn:hover{ background:#f59e0b; color:#0f172a; text-decoration:none; } .dhz-adminbar .dhz-adminbar-link{ color:#cbd5e1; text-decoration:none; font-size:12.5px; white-space:nowrap; } .dhz-adminbar .dhz-adminbar-link:hover{ color:#fff; text-decoration:underline; } @media (max-width:640px){ .dhz-adminbar{ flex-wrap:wrap; gap:10px 14px; padding:8px 14px; } .dhz-adminbar .dhz-adminbar-btn{ margin-left:0; } } /* 404-pagina helpers */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page .dhz-404-lead{ font-size:15px; margin:0 0 20px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page .dhz-404-search{ display:flex; gap:10px; max-width:520px; margin:0 0 18px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page .dhz-404-search input{ flex:1; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .page-not-found-page .dhz-404-links{ display:flex; flex-wrap:wrap; gap:18px; font-weight:600; } /* ============================================================ Extra contentpagina's (wishlist, vergelijken, nieuws, blog, lege-staten) — consistente titel + kaart + lege-staat. ============================================================ */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .wishlist-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .compare-products-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-list-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-item-page .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-page > .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blogpost-page .page-title h1, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .account-page > .page-title h1{ display:block!important; font-size:24px; font-weight:700; color:var(--dhz-ink); margin:0 0 18px; } /* lege-staat ('geen data') als nette kaart */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .no-data{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:34px 26px; text-align:center; color:var(--dhz-muted); font-size:15px; } /* nieuws & blog */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-posts, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-items{ display:grid; gap:16px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-post, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-item{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:20px 22px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-post .post-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-post .post-title a, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-item .news-title, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-item .news-title a{ font-size:18px; font-weight:700; color:var(--dhz-ink); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-post .post-date, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-item .news-date{ font-size:12.5px; color:var(--dhz-muted); margin:4px 0 10px; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blogpost-page .page-body, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .news-item-page .news-body, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blogpost-page .post-body{ background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); padding:24px 26px; line-height:1.7; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blog-page .tags, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .blogpost-page .tags{ margin-top:14px; } /* wishlist: knoppen + deel-link */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .wishlist-page .buttons{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .wishlist-page .share-info{ margin-top:18px; font-size:13px; color:var(--dhz-muted); } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .wishlist-page .tax-shipping-info{ margin-top:12px; font-size:12.5px; color:var(--dhz-muted); } /* vergelijken: tabel */ html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .compare-products-page .compare-products-table, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .compare-products-page table{ width:100%; background:#fff; border:1px solid var(--dhz-line); border-radius:var(--dhz-r); border-collapse:separate; border-spacing:0; overflow:hidden; } html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .compare-products-page td, html:where(:not(.html-home-page):not(.html-category-page):not(.html-product-details-page):not(.html-manufacturer-list-page):not(.html-manufacturer-page):not(.html-blog-page):not(.html-blogpost-page):not(.html-news-list-page):not(.html-news-item-page):not(.html-search-page):not(.html-products-by-tag-page):not(.html-product-tags-all-page):not(.html-recently-viewed-products-page):not(.html-vendor-page)) .master-wrapper-content .compare-products-page th{ padding:12px 14px; border-bottom:1px solid var(--dhz-hair); } /* Vaste verticale scrollbar -> geen layout-shift bij navigatie/btw-toggle */ html{overflow-y:scroll} /* beheerbalk: links met icoon netjes uitlijnen + icoon klein houden */ .dhz-adminbar a{display:inline-flex;align-items:center;gap:6px} .dhz-adminbar a svg{width:14px;height:14px;flex:none} .dhz-adminbar .dhz-adminbar-btn svg{width:auto;height:auto} /* ============================================================ "Bewaar in lijst"-popover (verlanglijsten) — globaal ============================================================ */ .dhz-stl-pop{position:absolute;width:280px;background:#fff;border:1px solid #e6eaf0;border-radius:12px;box-shadow:0 18px 44px rgba(20,40,80,.18);padding:10px;z-index:9999;display:none} .dhz-stl-pop.open{display:block} .dhz-stl-h{font-size:13px;font-weight:700;color:#16202e;padding:4px 6px 8px} .dhz-stl-lists{max-height:220px;overflow-y:auto} .dhz-stl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:none;background:none;text-align:left;padding:9px 8px;border-radius:8px;font-family:inherit;font-size:13.5px;color:#16202e;cursor:pointer} .dhz-stl-row:hover{background:#f6f8fb;color:#1b63d6} .dhz-stl-row .c{background:#f6f8fb;color:#8b97a6;font-size:11px;font-weight:700;border-radius:10px;padding:2px 8px} .dhz-stl-empty{padding:10px 8px;color:#8b97a6;font-size:13px} .dhz-stl-new{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid #eef1f5} .dhz-stl-new input{flex:1;min-width:0;height:36px;border:1.5px solid #e6eaf0;border-radius:8px;padding:0 10px;font-size:13px;font-family:inherit} .dhz-stl-new input:focus{outline:none;border-color:#1b63d6} .dhz-stl-new button{flex:none;height:36px;padding:0 12px;border:none;border-radius:8px;background:#1b63d6;color:#fff;font-weight:600;font-size:13px;cursor:pointer} .dhz-stl-new button:hover{background:#1450b0} .dhz-stl-msg{font-size:12px;color:#d6242c;padding:6px 6px 0;min-height:0} .dhz-stl-msg.ok{color:#4d9120} /* ============================================================ Zoekpagina: "Bedoelde je…?" + Advies/blog-sectie ============================================================ */ .dhz-didyoumean{margin:10px 0 14px;font-size:15px;color:#4a586a} .dhz-didyoumean a{color:#1b63d6;font-weight:700;text-decoration:underline} .dhz-advies{margin:26px 0 8px;border:1px solid #e6eaf0;border-radius:12px;background:#fff;padding:16px 18px} .dhz-advies-h{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:#16202e;margin-bottom:10px} .dhz-advies-h svg{width:20px;height:20px;color:#1b63d6} .dhz-advies-row{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:8px;text-decoration:none;color:#16202e;font-size:14px;border-top:1px solid #eef1f5} .dhz-advies-row:first-of-type{border-top:none} .dhz-advies-row:hover{background:#f6f8fb;color:#1b63d6} .dhz-advies-row .ic{width:18px;height:18px;flex:none;color:#8b97a6} .dhz-advies-row span{flex:1;min-width:0} .dhz-advies-row .ar{width:15px;height:15px;flex:none;color:#cbd5e3} .dhz-advies-row:hover .ar{color:#1b63d6} /* ============================================================================ DHZ-Proshop — Footer, variant A "Licht & minimaal" (dhz-footer.css) Bron: footer-preview.html. Site-breed geladen via de Footer-component. (De globale body{}-regel uit de preview is hier WEGGELATEN — die zou de hele site raken; de site heeft al z'n eigen body-stijlen.) ============================================================================ */ :root{ --ink:#16202e; --text:#4a586a; --muted:#8b97a6; --line:#e6eaf0; --hair:#eef1f5; } .ft a{text-decoration:none} .ft .row{max-width:1560px;margin:0 auto;padding:0 28px} .ft{border-top:1px solid var(--line);background:#fff} .ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:30px;padding:36px 0 30px} .ft .h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 13px;display:flex;align-items:center;justify-content:space-between} .ft .h svg{width:14px;height:14px;color:var(--muted);display:none;transition:transform .15s} .ft .col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px} .ft .col ul a{color:var(--text)} .ft .col ul a:hover{color:var(--dhz-blue)} /* merkblok */ .ft .about .logo{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px} .ft .about .logo .a{color:var(--dhz-red)} .ft .about .logo .b{color:var(--ink);font-weight:300} .ft .about p{font-size:13px;color:var(--text);margin:0 0 12px;max-width:300px} .ft .about .more{font-size:13px;font-weight:600;color:var(--dhz-blue)} /* nieuwsbrief + kiyoh */ .ft .nws form{display:flex;max-width:330px} .ft .nws input{flex:1;height:42px;border:1.5px solid var(--line);border-right:none;border-radius:9px 0 0 9px;padding:0 13px;font-size:13px;font-family:inherit;color:var(--ink);min-width:0} .ft .nws input:focus{outline:none;border-color:var(--dhz-blue)} .ft .nws button{height:42px;width:48px;border:none;border-radius:0 9px 9px 0;background:var(--dhz-green);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center} .ft .nws button:hover{background:var(--dhz-green-dark)} .ft .nws button svg{width:17px;height:17px} .ft .nws .priv{font-size:11px;color:var(--muted);margin-top:8px;max-width:330px} .ft .nws .priv a{color:var(--muted);text-decoration:underline} .ft .kiyoh{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text);margin-top:16px} .ft .kiyoh .stars{color:var(--dhz-amber);letter-spacing:1px;font-size:13px} .ft .kiyoh b{color:var(--ink)} /* social + betaalmethodes */ .ft .soc{display:flex;gap:8px} .ft .soc a{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--text)} .ft .soc a:hover{border-color:var(--dhz-blue);color:var(--dhz-blue)} .ft .soc svg{width:16px;height:16px} .ft .paychips{display:flex;gap:6px;flex-wrap:wrap} .ft .paychips .chip{font-size:10px;font-weight:700;border-radius:5px;padding:4px 8px;background:#fff;color:var(--ink);border:1px solid var(--line)} /* onderbalk */ .ft .bot{border-top:1px solid var(--hair)} .ft .bot .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px;font-size:11.5px;color:var(--muted)} .ft .bot .legal{margin-left:auto;display:flex;gap:14px} .ft .bot a{color:var(--muted)} .ft .bot a:hover{color:var(--dhz-blue)} /* mobiel: linkkolommen worden accordeons */ @media (max-width:980px){.ft .cols{grid-template-columns:1fr 1fr}} @media (max-width:680px){ .ft .row{padding:0 16px} .ft .cols{grid-template-columns:1fr;gap:0;padding:14px 0 16px} .ft .about{padding:10px 0 16px;border-bottom:1px solid var(--hair)} .ft .col.last{padding-top:16px} .ft .col.acc{border-bottom:1px solid var(--hair)} .ft .col.acc .h{margin:0;padding:15px 0;cursor:pointer} .ft .col.acc .h svg{display:block} .ft .col.acc.open .h svg{transform:rotate(180deg)} .ft .col.acc ul{display:none;padding:0 0 15px} .ft .col.acc.open ul{display:grid} .ft .bot .legal{margin-left:0} } /* onderbalk in de blauwe hoofdkleur (merkconsistentie met de categoriebalk bovenaan) */ .ft .bot{background:var(--dhz-blue);border-top:none} .ft .bot .row{color:rgba(255,255,255,.85)} .ft .bot a{color:rgba(255,255,255,.85)} .ft .bot a:hover{color:#fff} /* cookievoorkeuren-link: geen box op de blauwe balk, strak als de andere legal-links */ .ft .bot .legal{align-items:center} .ft .bot #consentPrefs{border:none;background:none;padding:0;margin:0;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit;color:rgba(255,255,255,.85)} .ft .bot #consentPrefs:hover{color:#fff} /* USP/geruststellings-strip bovenaan de footer (extra info, vooral nuttig mobiel) */ .ft-usps{border-bottom:1px solid var(--hair);background:#fff} .ft-usps .row{display:flex;align-items:center;gap:10px 24px;padding:16px 28px} .ft-usp{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:var(--text);flex:1 1 0;min-width:0;text-align:center;white-space:nowrap} .ft-usp svg{width:19px;height:19px;color:var(--dhz-green-dark);flex:none} .ft-usp b{color:var(--ink);font-weight:600} /* merkblok: aparte over-ons-box + hulp-nodig-box */ .ft .about .ft-box{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:14px} .ft .about .ft-about-box{margin-top:0} /* bovenkant gelijk met de kolomtitels (Algemene info, …) */ .ft .about .ft-about-box p{margin:0 0 8px;font-size:13px;color:var(--text);max-width:none} .ft .about .ft-about-box .more{font-size:13px;font-weight:600;color:var(--dhz-blue)} .ft .about .ft-help-box{background:var(--dhz-blue-soft);border-color:transparent} .ft .about .ft-help-box .ft-box-h{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:4px} .ft .about .ft-help-box a{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--dhz-blue);padding:5px 0} .ft .about .ft-help-box a:hover{color:var(--dhz-blue-dark)} .ft .about .ft-help-box svg{width:17px;height:17px;flex:none} /* rating-item in de USP-strip (amber sterren) */ .ft-usp.ft-usp-rating{color:var(--text)} .ft-usp.ft-usp-rating .stars{color:var(--dhz-amber);letter-spacing:1px;font-size:14px;flex:none} .ft-usp.ft-usp-rating b{color:var(--ink)} @media (max-width:680px){ /* USP's: net als de header één per keer tonen (roterend via dhz-footer.js) */ .ft-usps .row{justify-content:center;padding:13px 16px;min-height:44px} .ft-usp{display:none;flex:0 1 auto} .ft-usp.usp-on{display:flex} } /* nws-kolom: grijze scheidingslijn boven Sociale media & Betaalmethodes */ .ft .nws .h.sep{border-top:1px solid var(--hair);margin-top:18px;padding-top:16px} /* USP-strip: per breekpunt minder items tonen zodat de zichtbare op 1 lijn passen (geen wrap) */ @media (min-width:681px) and (max-width:1480px){ .ft-usps .ft-usp:nth-child(5){display:none} } @media (min-width:681px) and (max-width:1320px){ .ft-usps .ft-usp:nth-child(4){display:none} } @media (min-width:681px) and (max-width:1080px){ .ft-usps .ft-usp:nth-child(3){display:none} } :root{ --dhz-blue:#1b63d6; --dhz-blue-dark:#1450b0; --dhz-blue-soft:#eef4fd; --dhz-green:#5aa726; --dhz-green-dark:#4d9120; --dhz-amber:#e0a020; --dhz-red:#d6242c; --dhz-ink:#16202e; --dhz-text:#4a586a; --dhz-muted:#8b97a6; --dhz-line:#e6eaf0; --dhz-hair:#eef1f5; --dhz-soft:#f6f8fb; --dhz-r:11px; --dhz-font:'Roboto', Arial, Helvetica, sans-serif; }#dhz-header{font-family:var(--dhz-font);color:var(--dhz-text);-webkit-font-smoothing:antialiased;overflow-x:clip}#dhz-header .hd-main a, #dhz-header .hd-stripall a, #dhz-header .hd-uspbottom a{text-decoration:none;color:inherit}#dhz-header .hd-main .row, #dhz-header .hd-stripall .striprow, #dhz-header .hd-uspbottom .row{max-width:none;margin:0;padding:0 6vw}#dhz-header .hd-main{background:#fff;position:relative;z-index:40}#dhz-header .hd-main .row{display:flex;gap:20px;align-items:center;height:78px}#dhz-header .hd-logo{font-size:28px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;line-height:1;flex:none}#dhz-header .hd-logo .a{color:var(--dhz-red);font-weight:700}#dhz-header .hd-logo .b{color:var(--dhz-ink);font-weight:300}#dhz-header .hd-catsbtn{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;background:#fff;color:var(--dhz-blue);border:1.5px solid var(--dhz-blue);border-radius:var(--dhz-r);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;flex:none}#dhz-header .hd-catsbtn:hover{background:var(--dhz-blue-soft);border-color:var(--dhz-blue-dark);color:var(--dhz-blue-dark)}#dhz-header .hd-catsbtn svg{width:18px;height:18px;color:var(--dhz-blue)}#dhz-header .hd-catsbtn .chev{width:13px;height:13px;color:var(--dhz-blue);opacity:.9}#dhz-header .hd-rightnav{display:flex;align-items:center;gap:26px;flex:none;margin-left:auto}#dhz-header .hd-rightnav .megawrap > a{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--dhz-text);white-space:nowrap;padding:10px 0;cursor:pointer}#dhz-header .hd-rightnav .megawrap > a:hover{color:var(--dhz-blue)}#dhz-header .hd-rightnav .chev{width:12px;height:12px;margin-left:6px;opacity:.7}#dhz-header .hd-search{flex:1 1 440px;min-width:240px;margin:0 18px;display:flex;height:38px;border:1.5px solid var(--dhz-line);border-radius:var(--dhz-r);overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s}#dhz-header .hd-search:focus-within{border-color:var(--dhz-blue);box-shadow:0 0 0 3px rgba(27,99,214,.12)}#dhz-header .hd-search input{flex:1;border:none;padding:0 18px;font-size:14.5px;font-family:inherit;color:var(--dhz-ink);outline:none;background:transparent}#dhz-header .hd-search button{width:50px;border:none;background:var(--dhz-blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}#dhz-header .hd-search button svg{width:18px;height:18px}#dhz-header .hd-search button:hover{background:var(--dhz-blue-dark)}#dhz-header .hd-search button svg{width:20px;height:20px}#dhz-header .hd-actions{flex:none;display:flex;align-items:center;gap:7px}#dhz-header .hd-vat{display:inline-flex;align-items:center;color:var(--dhz-muted)}#dhz-header .hd-vat .seg{display:inline-flex;background:var(--dhz-soft);border:1px solid var(--dhz-line);border-radius:8px;padding:2px}#dhz-header .hd-vat .seg a,#dhz-header .hd-vat .seg button{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;font-family:inherit;font-size:11px;font-weight:600;color:var(--dhz-muted);padding:5px 11px;border-radius:6px;cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap}#dhz-header .hd-vat .seg a:hover,#dhz-header .hd-vat .seg button:hover{color:var(--dhz-text)}#dhz-header .hd-vat .seg a.on,#dhz-header .hd-vat .seg button.on{background:#fff;color:var(--dhz-ink);box-shadow:0 1px 2px rgba(16,24,40,.1)}#dhz-header .hd-lang{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--dhz-text);font-weight:600;font-size:13px;margin-right:4px}#dhz-header .hd-lang svg{width:14px;height:14px;color:var(--dhz-muted)}#dhz-header .hd-sep{width:1px;height:24px;background:var(--dhz-line);margin:0 5px;flex:none}#dhz-header .hd-ic{position:relative;width:46px;height:46px;border-radius:var(--dhz-r);display:flex;align-items:center;justify-content:center;color:var(--dhz-ink);cursor:pointer}#dhz-header .hd-ic:hover{background:var(--dhz-soft);color:var(--dhz-blue)}#dhz-header .hd-ic svg{width:23px;height:23px}#dhz-header .hd-ic .badge{position:absolute;top:5px;right:6px;min-width:17px;height:17px;border-radius:9px;background:var(--dhz-blue);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}#dhz-header .hd-cart{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 14px;margin-left:6px;border:1.5px solid var(--dhz-line);border-radius:var(--dhz-r);color:var(--dhz-ink);cursor:pointer;position:relative;background:#fff}#dhz-header .hd-cart:hover{border-color:#c4d4ee;background:var(--dhz-soft)}#dhz-header .hd-cart .cic{position:relative;display:flex;align-items:center}#dhz-header .hd-cart .cic svg{width:22px;height:22px;color:var(--dhz-ink)}#dhz-header .hd-cart .ct{display:flex;flex-direction:column;line-height:1.15}#dhz-header .hd-cart .ct b{font-size:13.5px;color:var(--dhz-ink);font-weight:700}#dhz-header .hd-cart .ct small{font-size:10.5px;color:var(--dhz-muted)}#dhz-header .hd-cart .cic .badge{position:absolute;top:-11px;right:-11px;width:18px;height:18px;border-radius:50%;background:var(--dhz-green);color:#fff;font-size:9.5px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;border:2px solid #fff}#dhz-header .hd-act{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:56px;padding:4px;color:var(--dhz-ink);cursor:pointer}#dhz-header .hd-act:hover{color:var(--dhz-blue)}#dhz-header .hd-act .ic{position:relative;display:flex;align-items:center;justify-content:center;height:24px}#dhz-header .hd-act .ic svg{width:23px;height:23px}#dhz-header .hd-act .lb{font-size:10.5px;font-weight:500;color:var(--dhz-text);white-space:nowrap;line-height:1}#dhz-header .hd-act:hover .lb{color:var(--dhz-blue)}#dhz-header .hd-act .badge{position:absolute;top:-7px;right:-14px;width:18px;height:18px;border-radius:50%;background:var(--dhz-blue);color:#fff;font-size:9.5px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;border:2px solid #fff}#dhz-header .hd-act .chk{position:absolute;top:-6px;right:-9px;width:14px;height:14px;border-radius:50%;background:var(--dhz-blue);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff}#dhz-header .hd-act .chk svg{width:9px;height:9px}#dhz-header .hd-act .chk.chk-out{background:#f5821f}#dhz-header .hd-act.cart .badge{background:var(--dhz-green)}#dhz-header .hd-act.cart .lb{display:flex;flex-direction:column;align-items:center;line-height:1.05}#dhz-header .hd-act.cart .lb b{font-size:12px;font-weight:700;color:var(--dhz-ink)}#dhz-header .hd-act.cart .lb small{font-size:9px;color:var(--dhz-muted)}#dhz-header .hd-act.cart:hover .lb b{color:var(--dhz-blue)}#dhz-header .megawrap{position:relative}#dhz-header .mega{position:absolute;top:calc(100% + 8px);left:0;width:300px;background:#fff;border:1px solid var(--dhz-line);border-radius:12px;box-shadow:0 18px 44px rgba(20,40,80,.16);padding:8px;display:none;z-index:60}#dhz-header .megawrap:hover .mega{display:block}#dhz-header .mega::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}#dhz-header .mega a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--dhz-ink)}#dhz-header .mega a:hover{background:var(--dhz-soft);color:var(--dhz-blue)}#dhz-header .mega a svg{width:14px;height:14px;color:var(--dhz-muted)}#dhz-header .mega .hint{padding:6px 12px 4px;font-size:11px;color:var(--dhz-muted);text-transform:uppercase;letter-spacing:.04em}#dhz-header .mega .div{height:1px;background:var(--dhz-hair);margin:6px 4px}#dhz-header .mega .mega-opts{display:none;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 6px}#dhz-header .mega .mega-langs{display:inline-flex;gap:6px}#dhz-header .mega .mega-langs a{padding:5px 9px;border:1px solid var(--dhz-line);border-radius:7px;font-size:12px;font-weight:600;color:var(--dhz-text)}#dhz-header .mega .mega-langs a.active{border-color:var(--dhz-blue);color:var(--dhz-blue);background:var(--dhz-blue-soft)}#dhz-header .hd-drawer .dr-vat{padding:14px 18px 0}#dhz-header .hd-rightnav .megawrap:hover .rmenu{display:block}#dhz-header .rmenu{position:absolute;top:calc(100% + 14px);right:0;background:#fff;border:1px solid var(--dhz-line);border-radius:12px;box-shadow:0 18px 44px rgba(20,40,80,.16);padding:16px;display:none;z-index:60}#dhz-header .rmenu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}#dhz-header .rmenu .rm-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--dhz-muted);font-weight:600;padding:0 6px 10px}#dhz-header .rmenu .rm-all{display:inline-flex;align-items:center;gap:6px;margin:12px 6px 2px;font-size:13px;font-weight:600;color:var(--dhz-blue)}#dhz-header .rmenu .rm-all svg{width:14px;height:14px}#dhz-header .rmenu-tips{width:520px}#dhz-header .rmenu .rm-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}#dhz-header .rmenu .rm-grid a{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:8px}#dhz-header .rmenu .rm-grid a:hover{background:var(--dhz-soft)}#dhz-header .rmenu .rm-grid a b{font-size:14px;color:var(--dhz-ink);font-weight:600}#dhz-header .rmenu .rm-grid a span{font-size:12px;color:var(--dhz-muted)}#dhz-header .rmenu .rm-grid a:hover b{color:var(--dhz-blue)}#dhz-header .hd-langwrap:hover .rmenu{display:block}#dhz-header .hd-lang{cursor:pointer}#dhz-header .hd-lang .chev{width:11px;height:11px;margin-left:3px;color:var(--dhz-muted)}#dhz-header .rlang{width:196px;padding:8px}#dhz-header .rlang a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--dhz-ink)}#dhz-header .rlang a:hover{background:var(--dhz-soft);color:var(--dhz-blue)}#dhz-header .rlang a.active{color:var(--dhz-blue);font-weight:600}#dhz-header .rlang a .fl{display:inline-flex;align-items:center;justify-content:center;width:26px;height:18px;border-radius:4px;background:var(--dhz-soft);font-size:10px;font-weight:700;color:var(--dhz-text);flex:none}#dhz-header .rlang a.active .fl{background:var(--dhz-blue-soft);color:var(--dhz-blue)}#dhz-header .rlang a .ck{width:15px;height:15px;margin-left:auto;color:var(--dhz-green)}#dhz-header .rmenu-brands{width:430px}#dhz-header .rmenu .rm-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}#dhz-header .rmenu .rm-brands a{padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--dhz-ink)}#dhz-header .rmenu .rm-brands a:hover{background:var(--dhz-soft);color:var(--dhz-blue)}#dhz-header .hd-actions .megawrap{position:relative;display:flex;align-items:center}#dhz-header .hd-actions .megawrap:hover > .rmenu{display:block}#dhz-header .acctmenu{width:238px;right:0;padding:8px}#dhz-header .acctmenu .welk{padding:8px 10px 10px;font-size:15px;font-weight:700;color:var(--dhz-blue)}#dhz-header .acctmenu .div{height:1px;background:var(--dhz-hair);margin:5px 4px}#dhz-header .acctmenu a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--dhz-ink)}#dhz-header .acctmenu a:hover{background:var(--dhz-soft);color:var(--dhz-blue)}#dhz-header .acctmenu a svg{width:17px;height:17px;color:var(--dhz-muted);flex:none}#dhz-header .acctmenu a:hover svg{color:var(--dhz-blue)}#dhz-header .cartmenu{width:430px;right:0;padding:0}#dhz-header .cartmenu .cart-list{max-height:348px;overflow-y:auto;padding:4px}#dhz-header .cartmenu .cart-row{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-bottom:1px solid var(--dhz-hair)}#dhz-header .cartmenu .cart-row:last-child{border-bottom:none}#dhz-header .cartmenu .thumb{width:52px;height:52px;border:1px solid var(--dhz-line);border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}#dhz-header .cartmenu .thumb img{width:100%;height:100%;object-fit:contain}#dhz-header .cartmenu .thumb svg{width:24px;height:24px;color:var(--dhz-muted)}#dhz-header .cartmenu .info{flex:1;min-width:0}#dhz-header .cartmenu .nm{font-size:12.5px;font-weight:500;color:var(--dhz-ink);line-height:1.3}#dhz-header .cartmenu .qty{font-size:11px;color:var(--dhz-muted);margin-top:3px}#dhz-header .cartmenu .pr{flex:none;text-align:right;white-space:nowrap;font-size:13px;font-weight:700;color:var(--dhz-blue)}#dhz-header .cartmenu .pr small{display:block;font-weight:400;color:var(--dhz-muted);font-size:10px}#dhz-header .cartmenu .rm{flex:none;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--dhz-muted);font-size:18px;line-height:1;cursor:pointer;width:24px;height:24px;border-radius:50%;text-decoration:none;align-self:center}#dhz-header .cartmenu .rm:hover{background:var(--dhz-soft);color:var(--dhz-red)}#dhz-header .cartmenu .foot{padding:14px;border-top:1px solid var(--dhz-line)}#dhz-header .cartmenu .foot .sum{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}#dhz-header .cartmenu .foot .sum .lbl{font-size:12.5px;color:var(--dhz-muted);display:inline-flex;align-items:center;gap:7px}#dhz-header .cartmenu .foot .sum .lbl svg{width:16px;height:16px}#dhz-header .cartmenu .foot .sum .tot{font-size:12.5px;color:var(--dhz-text)}#dhz-header .cartmenu .foot .sum .tot b{font-size:17px;color:var(--dhz-blue);margin-left:6px}#dhz-header .cartmenu .foot .btn{display:block;text-align:center;background:var(--dhz-green);color:#fff;padding:12px;border-radius:9px;font-weight:700;font-size:14px}#dhz-header .cartmenu .foot .btn:hover{background:var(--dhz-green-dark)}#dhz-header .hd-stripall{position:relative;background:var(--dhz-soft);border-top:1px solid var(--dhz-hair);border-bottom:1px solid var(--dhz-hair);z-index:30}#dhz-header .hd-stripall .striprow{display:flex;align-items:center;height:40px;padding:0 6vw;overflow:visible}#dhz-header .hd-stripall .cats{display:flex;align-items:center;gap:22px;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth} #dhz-header .hd-stripall .cats::-webkit-scrollbar{display:none} #dhz-header .hd-stripall .cats .scat{flex:none}#dhz-header .hd-stripall .cats .scat{font-size:13px;font-weight:600;color:var(--dhz-text);white-space:nowrap;padding:10px 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}#dhz-header .hd-stripall .cats .scat:hover, #dhz-header .hd-stripall .cats .scat.active{color:var(--dhz-blue);border-bottom-color:var(--dhz-blue)}#dhz-header .flyout{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--dhz-line);box-shadow:0 22px 44px rgba(20,40,80,.13);padding:24px 6vw 28px;display:none;z-index:35}#dhz-header .flyout.open{display:block}#dhz-header .flyout .flyhead{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--dhz-hair)}#dhz-header .flyout .flyhead .nm{font-size:15px;font-weight:700;color:var(--dhz-ink)}#dhz-header .flyout .flyhead a{font-size:13px;font-weight:600;color:var(--dhz-blue);display:inline-flex;align-items:center;gap:5px}#dhz-header .flyout .flyhead a svg{width:14px;height:14px}#dhz-header .flyout .sublist{column-width:215px;column-gap:38px}#dhz-header .flyout .sublist a{display:flex;align-items:center;gap:9px;break-inside:avoid;padding:8px 0;font-size:13.5px;color:var(--dhz-text)}#dhz-header .flyout .sublist a:hover{color:var(--dhz-blue)}#dhz-header .flyout .sublist a::before{content:'';width:5px;height:5px;border-radius:50%;background:#cbd5e3;flex:none}#dhz-header .flyout .sublist a:hover::before{background:var(--dhz-blue)}#dhz-header .flyout .groups{column-width:235px;column-gap:44px}#dhz-header .flyout .grp{break-inside:avoid;margin-bottom:20px}#dhz-header .flyout .grp .gh{display:block;font-size:13px;font-weight:700;color:var(--dhz-ink);margin:0 0 6px;padding:4px 0}#dhz-header .flyout .grp .gh:hover{color:var(--dhz-blue)}#dhz-header .flyout .grp a:not(.gh){display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;color:var(--dhz-text)}#dhz-header .flyout .grp a:not(.gh):hover{color:var(--dhz-blue)}#dhz-header .flyout .grp a:not(.gh)::before{content:'';width:5px;height:5px;border-radius:50%;background:#cbd5e3;flex:none}#dhz-header .flyout .grp a:not(.gh):hover::before{background:var(--dhz-blue)}#dhz-header .hd-uspbottom{background:#fff;border-bottom:1px solid var(--dhz-hair)}#dhz-header .hd-uspbottom .row{display:flex;align-items:center;justify-content:space-between;height:38px;gap:18px}#dhz-header .hd-uspbottom .items{display:flex;align-items:center;gap:18px;font-size:12.5px;color:var(--dhz-text);overflow:hidden}#dhz-header .hd-uspbottom .items .it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}#dhz-header .hd-uspbottom .items svg{width:15px;height:15px;color:var(--dhz-green-dark);flex:none}#dhz-header .hd-uspbottom .items b{color:var(--dhz-blue);font-weight:600}#dhz-header .hd-uspbottom .items a.it:hover, #dhz-header .hd-uspbottom .items a.it:hover b{color:var(--dhz-blue-dark)}#dhz-header .hd-uspbottom .items a.it{cursor:pointer}#dhz-header .hd-uspbottom .items .stars{color:var(--dhz-amber);font-size:13px;letter-spacing:1px}#dhz-header .hd-uspbottom .sec{display:flex;align-items:center;gap:20px;flex:none}#dhz-header .hd-uspbottom .sec a{font-size:13px;font-weight:600;color:var(--dhz-blue)}#dhz-header .hd-uspbottom .sec a:hover{color:var(--dhz-blue-dark)}#dhz-header .hd-uspbottom .sec a.hl{color:var(--dhz-green-dark);display:inline-flex;align-items:center;gap:6px}#dhz-header .hd-uspbottom .sec a.hl:hover{color:var(--dhz-green)}#dhz-header .hd-uspbottom .sec a.hl svg{width:14px;height:14px} @keyframes dhzUspIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}#dhz-header .hd-drawer-overlay{position:fixed;inset:0;background:rgba(16,32,60,.45);opacity:0;visibility:hidden;transition:opacity .2s;z-index:90}#dhz-header .hd-drawer-overlay.open{opacity:1;visibility:visible}#dhz-header .hd-drawer{position:fixed;top:0;left:0;height:100%;width:86%;max-width:360px;background:#fff;transform:translateX(-100%);transition:transform .25s ease;z-index:100;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}#dhz-header .hd-drawer.open{transform:translateX(0);box-shadow:0 0 50px rgba(16,32,60,.25)}#dhz-header .hd-drawer .dr-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--dhz-hair);position:sticky;top:0;background:#fff}#dhz-header .hd-drawer .dr-title{font-size:15px;font-weight:700;color:var(--dhz-ink)}#dhz-header .hd-drawer .dr-close{border:none;background:none;font-size:26px;line-height:1;color:var(--dhz-muted);cursor:pointer;width:34px;height:34px}#dhz-header .hd-drawer .dr-cat{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-bottom:1px solid var(--dhz-hair);font-family:inherit;font-size:14.5px;font-weight:600;color:var(--dhz-ink);padding:14px 18px;cursor:pointer;text-align:left}#dhz-header .hd-drawer a.dr-cat{text-decoration:none}#dhz-header .hd-drawer .dr-cat svg{width:16px;height:16px;color:var(--dhz-muted);transition:transform .15s;flex:none}#dhz-header .hd-drawer .dr-cat.open{color:var(--dhz-blue)}#dhz-header .hd-drawer .dr-cat.open svg{transform:rotate(180deg);color:var(--dhz-blue)}#dhz-header .hd-drawer .dr-sub{display:none;padding:6px 0 12px;background:var(--dhz-soft);border-bottom:1px solid var(--dhz-hair)}#dhz-header .hd-drawer .dr-sub.open{display:block}#dhz-header .hd-drawer .dr-sub a{display:block;padding:9px 26px;font-size:13.5px;color:var(--dhz-text)}#dhz-header .hd-drawer .dr-sub a:hover{color:var(--dhz-blue)}#dhz-header .hd-drawer .dr-links{padding:6px 0;border-bottom:1px solid var(--dhz-hair)}#dhz-header .hd-drawer .dr-links a{display:flex;align-items:center;gap:11px;padding:12px 18px;font-size:14px;color:var(--dhz-ink);font-weight:500}#dhz-header .hd-drawer .dr-links a svg{width:18px;height:18px;color:var(--dhz-muted);flex:none}#dhz-header .hd-drawer .dr-lang{display:flex;gap:8px;padding:14px 18px}#dhz-header .hd-drawer .dr-lang a{padding:7px 13px;border:1px solid var(--dhz-line);border-radius:8px;font-size:13px;font-weight:600;color:var(--dhz-text)}#dhz-header .hd-drawer .dr-lang a.active{border-color:var(--dhz-blue);color:var(--dhz-blue);background:var(--dhz-blue-soft)} @media (max-width:1440px){#dhz-header .hd-actions .hd-vat, #dhz-header .hd-actions .hd-langwrap, #dhz-header .hd-sep{display:none}#dhz-header .mega .mega-opts{display:flex}} @media (max-width:1280px){#dhz-header .hd-main .row, #dhz-header .hd-stripall .striprow, #dhz-header .hd-uspbottom .row{padding:0 20px}#dhz-header .hd-main .row{gap:14px}#dhz-header .hd-search{margin:0 8px}#dhz-header .hd-actions{gap:4px}#dhz-header .hd-uspbottom .items .it:nth-child(n+4){display:none}} @media (max-width:1200px){#dhz-header .hd-stripall .cats{gap:18px}} @media (max-width:1160px){#dhz-header .hd-rightnav{display:none}#dhz-header .hd-stripall .striprow{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}#dhz-header .hd-stripall .striprow::-webkit-scrollbar{display:none}#dhz-header .hd-stripall .cats{overflow:visible}} @media (max-width:1100px){#dhz-header .hd-act.hd-compare{display:none}#dhz-header .hd-logo{font-size:24px}#dhz-header .hd-search{min-width:170px}#dhz-header .hd-cart .ct small{display:none}} @media (max-width:1024px){#dhz-header .hd-main .row{flex-wrap:wrap;height:auto;row-gap:10px;padding-top:10px;padding-bottom:12px}#dhz-header .hd-search{order:5;flex:1 1 100%;min-width:0;margin:0;height:42px}#dhz-header .hd-actions{margin-left:auto}#dhz-header .hd-stripall{display:none}#dhz-header .mega{display:none!important}#dhz-header .flyout{display:none!important}} @media (max-width:920px){#dhz-header .hd-act.hd-wishlist{display:none}#dhz-header .hd-sep{display:none}#dhz-header .hd-uspbottom .sec{display:none}} @media (max-width:780px){#dhz-header .hd-main .row{gap:10px;padding:10px 14px}#dhz-header .hd-catsbtn{width:44px;height:44px;padding:0;justify-content:center;font-size:0;gap:0;flex:none}#dhz-header .hd-catsbtn svg{width:21px;height:21px}#dhz-header .hd-catsbtn .chev{display:none}#dhz-header .hd-logo{order:1;font-size:22px;margin:0 auto;padding:0 6px}#dhz-header .hd-actions{order:2;margin-left:0;gap:10px}#dhz-header .hd-search{order:3;height:44px}#dhz-header .hd-act{min-width:0;padding:4px 8px}#dhz-header .hd-act .lb{display:none}#dhz-header .hd-act.hd-compare, #dhz-header .hd-act.hd-wishlist{display:none}#dhz-header .hd-cart{height:40px;padding:0 11px;margin-left:2px}#dhz-header .hd-cart .ct{display:none}#dhz-header .hd-stripall .striprow{height:42px;padding:0 14px}#dhz-header .hd-stripall .cats{gap:18px}#dhz-header .hd-rightnav{display:none}#dhz-header .flyout{display:none!important}#dhz-header .mega{display:none!important}#dhz-header .hd-uspbottom .row{justify-content:center;height:34px;gap:0}#dhz-header .hd-uspbottom .items{overflow:visible}#dhz-header .hd-uspbottom .items .it{display:none}#dhz-header .hd-uspbottom .items .it.usp-on{display:inline-flex;animation:dhzUspIn .35s ease}#dhz-header .hd-uspbottom .sec{display:none}#dhz-header .rmenu{max-width:calc(100vw - 20px)}#dhz-header .cartmenu{width:calc(100vw - 20px);right:-8px}} @media (max-width:360px){#dhz-header .hd-logo{font-size:19px}#dhz-header .hd-actions{gap:6px}} /* ===== Zoekbalk = echte nopCommerce SearchBox; strak als de preview ===== De wrapper .hd-search is de enige pill (rand + radius + focus-ring + overflow:hidden). Input en knop vullen de hoogte (geen eigen rand/radius/hoogte) zodat er geen dubbele rand of verticale afknipping ontstaat; het vergrootglas staat exact gecentreerd. */ #dhz-header .hd-search form{display:flex;width:100%;height:100%;margin:0} #dhz-header .hd-search input.search-box-text{flex:1;min-width:0;align-self:stretch;height:auto;border:none;background:transparent;padding:0 18px;font-size:14.5px;font-family:inherit;color:var(--dhz-ink);outline:none;border-radius:0;box-shadow:none} #dhz-header .hd-search input.search-box-text:focus{border:none;box-shadow:none;outline:none} #dhz-header .hd-search .search-box-button{flex:none;align-self:stretch;width:50px;min-width:50px;height:auto;padding:0;margin:0;border:none;border-radius:0;background:var(--dhz-blue);color:transparent;font-size:0;cursor:pointer;position:relative} #dhz-header .hd-search .search-box-button:hover{background:var(--dhz-blue-dark)} #dhz-header .hd-search .search-box-button::after{content:'';position:absolute;inset:0;background:no-repeat center/20px url("data:image/svg+xml;utf8,")} /* logo via standaard nopCommerce-instellingen (admin); enkel netjes inpassen in de balk */ #dhz-header .hd-logo img{display:block;max-height:46px;width:auto} /* Emporium-thema rendert een eigen mobiele headerbalk (.responsive-nav-wrapper-parent) vóór onze _Header; onze header is zelf volledig responsive -> die van Emporium uit (anders dubbele header op mobiel). */ .responsive-nav-wrapper-parent{display:none!important} /* ============================================================ DHZ header-fixes 2026-06-20 ============================================================ */ /* zoekveld: tekst verticaal gecentreerd (input zit in een form) */ #dhz-header .hd-search, #dhz-header .hd-search form{align-items:center} #dhz-header .hd-search input.search-box-text{align-self:center;height:auto;line-height:1.2;padding-top:0;padding-bottom:0} #dhz-header .hd-search .search-box-button{align-self:stretch} /* categorie-strip: fijne blauwe onderlijn onderaan de balk (zoals preview) */ #dhz-header .hd-stripall .cats .scat{border-bottom:none;margin-bottom:0;box-shadow:none;position:relative} #dhz-header .hd-stripall .cats .scat:hover, #dhz-header .hd-stripall .cats .scat.active{color:var(--dhz-blue)} #dhz-header .hd-stripall .cats .scat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dhz-blue);opacity:0;transition:opacity .15s} #dhz-header .hd-stripall .cats .scat:hover::after, #dhz-header .hd-stripall .cats .scat.active::after{opacity:1} /* flyout-kop: naam en 'Alles in ...'-link op één lijn */ #dhz-header .flyout .flyhead{align-items:baseline} #dhz-header .flyout .flyhead .nm{line-height:1} #dhz-header .flyout .flyhead a{line-height:1;display:inline-flex;align-items:baseline} #dhz-header .flyout .flyhead a svg{align-self:center} /* mega 'Alle categorieën': subcategorieën als aangrenzend paneel, even hoog als de mega-box */ #dhz-header .mega .mega-item{position:static} #dhz-header .mega .mega-item > a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--dhz-ink)} #dhz-header .mega .mega-item > a:hover, #dhz-header .mega .mega-item:hover > a{background:var(--dhz-soft);color:var(--dhz-blue)} #dhz-header .mega .mega-item > a svg{width:14px;height:14px;color:var(--dhz-muted)} #dhz-header .mega .mega-item:hover > a svg{color:var(--dhz-blue)} #dhz-header .mega .mega-sub{position:absolute;left:calc(100% + 10px);top:0;min-height:100%;max-height:82vh;width:296px;background:#fff;border:1px solid var(--dhz-line);border-radius:12px;box-shadow:0 18px 44px rgba(20,40,80,.16);padding:8px;display:none;z-index:70;overflow-y:auto} #dhz-header .mega .mega-item:hover > .mega-sub{display:block} #dhz-header .mega .mega-sub .ms-head{padding:8px 12px;font-size:11px;color:var(--dhz-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;border-bottom:1px solid var(--dhz-hair);margin-bottom:4px} #dhz-header .mega .mega-sub a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--dhz-ink)} #dhz-header .mega .mega-sub a:hover{background:var(--dhz-soft);color:var(--dhz-blue)} /* mega-subsub: hover-brug over de tussenruimte zodat het paneel openblijft */ #dhz-header .mega .mega-sub::before{content:'';position:absolute;left:-14px;top:0;width:14px;height:100%} /* rechtse dropdowns (Onze merken / Tips & blogs): minder afstand tot de tekst */ #dhz-header .hd-rightnav .rmenu{top:calc(100% + 6px)} #dhz-header .hd-rightnav .rmenu::before{top:-8px;height:8px} /* ============================================================ Zoek-suggesties (jQuery UI autocomplete) in dhz-stijl ============================================================ */ .ui-autocomplete.ui-menu{position:absolute;z-index:1000;list-style:none;margin:8px 0 0!important;padding:6px!important;background:#fff!important;border:1px solid var(--dhz-line)!important;border-radius:12px!important;box-shadow:0 18px 44px rgba(20,40,80,.16)!important;max-height:72vh;overflow-y:auto;min-width:340px;font-family:var(--dhz-font);color:var(--dhz-ink)} .ui-autocomplete .ui-menu-item{list-style:none;margin:0;border:none;background:none} .ui-autocomplete .ui-menu-item a, .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper{display:flex!important;align-items:center;gap:12px;padding:8px 10px!important;margin:0!important;border:none!important;border-radius:8px!important;color:var(--dhz-ink)!important;font-size:13.5px;font-weight:500;line-height:1.3;text-decoration:none;cursor:pointer} .ui-autocomplete .ui-menu-item a img{width:42px;height:42px;object-fit:contain;flex:none;border:1px solid var(--dhz-hair);border-radius:7px;background:#fff;padding:3px} .ui-autocomplete .ui-menu-item a span{flex:1;min-width:0} .ui-autocomplete .ui-menu-item a:hover, .ui-autocomplete .ui-menu-item a.ui-state-active, .ui-autocomplete .ui-menu-item .ui-state-active{background:var(--dhz-soft)!important;color:var(--dhz-blue)!important} .ui-autocomplete .ui-autocomplete-category{font-size:11px!important;text-transform:uppercase;letter-spacing:.04em;color:var(--dhz-muted)!important;font-weight:700!important;padding:9px 10px 4px!important;border:none!important;pointer-events:none} .ui-autocomplete .ui-autocomplete-category div{padding:0} .ui-helper-hidden-accessible{display:none} /* mobiel: logo + account/mandje op één lijn (zoekbalk eronder) */ @media (max-width:780px){ #dhz-header .hd-main .row{flex-wrap:wrap;align-items:center} #dhz-header .hd-main .row > .megawrap{order:1;flex:none} /* logo onder 780px: zelfde grootte als op brede schermen (46px hoog, natuurlijke breedte), maar gewoon GECENTREERD i.p.v. links. De .hd-logo neemt de vrijgekomen breedte (flex:1) en centreert het logo erin; het beeld vult die ruimte NIET. */ #dhz-header .hd-logo{order:2;flex:1 1 0;min-width:0;margin:0!important;display:flex;justify-content:center;align-items:center} #dhz-header .hd-logo a{display:flex;width:100%;justify-content:center} #dhz-header .hd-logo img{width:auto;max-width:100%;height:auto;max-height:46px!important} #dhz-header .hd-actions{order:3;margin-left:8px!important;gap:0;flex:none} #dhz-header .hd-catsbtn{width:40px!important;height:40px!important} #dhz-header .hd-act{padding:4px 5px!important} /* account↔mandje-afstand komt nu van hd-cart margin-left (6px ingelogd / 15px uitgelogd via :has(.chk-out)) i.p.v. de flex-gap */ #dhz-header .hd-cart{padding:0 9px!important} #dhz-header .hd-search{order:4;flex:1 1 100%} } /* mega-lijst compacter (zelfde stijl, minder verticale ruimte) */ #dhz-header .mega{padding:6px} #dhz-header .mega a, #dhz-header .mega .mega-item > a, #dhz-header .mega .mega-sub a{padding:7px 12px;font-size:13.5px} #dhz-header .mega .div{margin:4px 4px} #dhz-header .mega .hint{padding:5px 12px 3px} /* zoekbalk: net kruisje om de tekst te wissen (type=search) */ #dhz-header .hd-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:18px;width:18px;margin:0 6px;cursor:pointer;border-radius:50%;background:no-repeat center/12px #e6eaf0 url("data:image/svg+xml;utf8,")} #dhz-header .hd-search input[type=search]::-webkit-search-cancel-button:hover{background-color:#d6242c;background-image:url("data:image/svg+xml;utf8,")} /* ============================================================ Mega 'Alle categorieën' — Coolblue-stijl: verbonden 2-paneel (categorieën links, subcategorieën rechts in dezelfde box) ============================================================ */ #dhz-header .mega{width:300px} #dhz-header .mega .mega-item{position:static} #dhz-header .mega .mega-item > a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--dhz-ink)} #dhz-header .mega .mega-item:hover > a{background:var(--dhz-soft);color:var(--dhz-blue)} #dhz-header .mega .mega-item > a svg{width:14px;height:14px;color:var(--dhz-muted)} #dhz-header .mega .mega-item:hover > a svg{color:var(--dhz-blue)} /* rechterpaneel: vast aan de mega, even hoog, fijne scheidingslijn */ #dhz-header .mega .mega-sub{position:absolute;left:calc(100% - 1px);top:0;height:auto;bottom:auto;min-height:100%;max-height:82vh;width:300px;background:#fff;border:1px solid var(--dhz-line);border-radius:12px;box-shadow:0 18px 44px rgba(20,40,80,.16);padding:8px;display:none;z-index:69;overflow-y:auto} #dhz-header .mega .mega-sub::before{content:'';position:absolute;left:-12px;top:0;width:12px;height:100%;display:block} #dhz-header .mega .mega-item.open > .mega-sub,#dhz-header .mega .mega-item:hover > .mega-sub{display:block} #dhz-header .mega .mega-item:hover > .mega-sub{display:block} #dhz-header .mega .mega-sub .ms-head{padding:4px 8px 10px;font-size:11px;color:var(--dhz-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;border-bottom:1px solid var(--dhz-hair);margin-bottom:6px} #dhz-header .mega .mega-sub a{display:block;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--dhz-ink)} #dhz-header .mega .mega-sub a:hover{background:var(--dhz-soft);color:var(--dhz-blue)} /* mega-subbox open houden via JS-class (hover-intent) */ #dhz-header .mega .mega-item.open > .mega-sub{display:block} #dhz-header .mega .mega-item.open > a{background:var(--dhz-soft);color:var(--dhz-blue)} #dhz-header .mega .mega-item.open > a svg{color:var(--dhz-blue)} /* ============================================================ Sticky header op desktop (>1024px): logo+zoekbalk (hd-main) en categoriebalk (hd-stripall) blijven staan bij scrollen; de USP- balk scrollt weg. Onder 1024px: ongewijzigd (geen sticky). ============================================================ */ @media (min-width:1025px){ #dhz-header{display:contents} #dhz-header .hd-main{position:sticky;top:0;z-index:50} #dhz-header .hd-stripall{position:sticky;top:78px;z-index:49} } /* ============================================================ Drawer: hoofdcategorie klikbaar (link) + apart pijltje voor sub ============================================================ */ #dhz-header .hd-drawer .dr-cat-row{display:flex;align-items:stretch} #dhz-header .hd-drawer .dr-cat-row .dr-cat{flex:1} #dhz-header .hd-drawer .dr-acc{flex:none;width:54px;border:none;background:none;color:var(--dhz-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;border-left:1px solid var(--dhz-hair)} #dhz-header .hd-drawer .dr-acc svg{width:18px;height:18px;transition:transform .2s} #dhz-header .hd-drawer .dr-acc.open svg{transform:rotate(180deg)} /* drawer-onderlinks: icoongrootte */ #dhz-header .hd-drawer .dr-links a{display:flex;align-items:center;gap:11px} #dhz-header .hd-drawer .dr-links a svg{width:18px;height:18px;flex:none;color:var(--dhz-muted)} /* ============================================================ Zoek-suggesties (SevenSpikes InstantSearch / Kendo) in huisstijl ============================================================ */ .instantSearch,.k-animation-container.instantSearch{width:100%!important;background:#fff!important;border:1px solid var(--dhz-line)!important;border-radius:12px!important;box-shadow:0 18px 44px rgba(20,40,80,.16)!important;margin-top:11px!important;padding:6px!important} .instantSearch .k-list,.instantSearch .k-list-scroller{padding:0!important;background:#fff!important;border:none!important} .instantSearch .k-item,.instantSearch .k-list .k-item{border:none!important;border-radius:8px!important;padding:0!important;background:#fff!important} .instantSearch .k-item.k-state-hover,.instantSearch .k-item.k-state-focused,.instantSearch .k-item:hover{background:var(--dhz-soft)!important;color:var(--dhz-ink)!important} .instantSearch .instant-search-item{display:flex!important;align-items:center;gap:12px;padding:9px 11px!important} .instantSearch .instant-search-item .img-block,.instantSearch .instant-search-item img{width:44px;height:44px;object-fit:contain;flex:none;border:1px solid var(--dhz-hair);border-radius:7px;background:#fff;padding:3px} .instantSearch .instant-search-item .detail{flex:1;min-width:0} .instantSearch .instant-search-item .title{font-size:13.5px;font-weight:500;color:var(--dhz-ink);line-height:1.3} .instantSearch .instant-search-item .price{font-size:13px;font-weight:700;color:var(--dhz-blue);margin-top:2px} /* ============================================================ Zoek-wis-kruisje (custom, cross-browser) ============================================================ */ #dhz-header .hd-search{position:relative;overflow:visible} #dhz-header .hd-search .search-box-button{border-radius:0 calc(var(--dhz-r) - 1.5px) calc(var(--dhz-r) - 1.5px) 0} #dhz-header .hd-search input[type=search]::-webkit-search-cancel-button{display:none} #dhz-header .hd-search button.hd-search-clear{position:absolute;right:60px;top:50%;transform:translateY(-50%);width:20px;height:20px;box-sizing:border-box;padding:0;border:none;border-radius:50%;background:#e6eaf0;color:#6b7686;font:700 15px/1 Arial,sans-serif;cursor:pointer;display:none;align-items:center;justify-content:center;flex:none;z-index:3;-webkit-appearance:none;appearance:none} #dhz-header .hd-search button.hd-search-clear:hover{background:var(--dhz-red);color:#fff} /* mandje-dropdown tonen op hover wanneer gevuld */ #dhz-header .hd-actions .megawrap:hover .cartmenu{display:block} /* afstand account-icoon ↔ mandje: ingelogd 6px, uitgelogd 15px (de oranje ✕-badge steekt dan richting het mandje → meer lucht). !important omdat het thema in zijn eigen 780-blok nog margin-left:2px op .hd-cart zet. */ #dhz-header .hd-actions .hd-cart{margin-left:6px !important} #dhz-header .hd-actions:has(.chk-out) .hd-cart{margin-left:15px !important} /* mobiel/tablet: mini-cart dropdown openen op TIK (.open via JS); sticky :hover op touch uitschakelen zodat enkel .open telt (anders blijft hij open na het sluiten) */ @media (max-width:1024px){ #dhz-header .cart-mw:hover .cartmenu{display:none} #dhz-header .cart-mw.open .cartmenu{display:block} } /* drawer-links: blauwe hover-stijl (zoals de rest van de header) */ #dhz-header .hd-drawer .dr-cat:hover, #dhz-header .hd-drawer .dr-links a:hover, #dhz-header .hd-drawer .dr-sub a:hover{color:var(--dhz-blue)} #dhz-header .hd-drawer .dr-links a:hover svg, #dhz-header .hd-drawer .dr-acc:hover, #dhz-header .hd-drawer .dr-cat-row:hover .dr-cat{color:var(--dhz-blue)} /* ============================================================ Drawer Coolblue-stijl: inschuivende subschermen ============================================================ */ #dhz-header .hd-drawer{overflow:hidden} #dhz-header .hd-drawer .dr-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;transform:translateX(100%);transition:transform .26s ease;overflow-y:auto;-webkit-overflow-scrolling:touch} #dhz-header .hd-drawer .dr-panel[data-panel-id="main"]{transform:translateX(0)} #dhz-header .hd-drawer .dr-panel.active{transform:translateX(0)} #dhz-header .hd-drawer .dr-top{display:flex;align-items:center;gap:8px;position:sticky;top:0;background:#fff;z-index:2} #dhz-header .hd-drawer .dr-top .dr-title{flex:1;min-width:0} #dhz-header .hd-drawer .dr-back{flex:none;width:34px;height:34px;border:none;background:none;color:var(--dhz-ink);cursor:pointer;display:flex;align-items:center;justify-content:center} #dhz-header .hd-drawer .dr-back svg{width:22px;height:22px} #dhz-header .hd-drawer .dr-cats{display:flex;flex-direction:column} #dhz-header .hd-drawer .dr-nav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 16px;border:0;border-bottom:1px solid var(--dhz-hair);background:none;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--dhz-ink);cursor:pointer} #dhz-header .hd-drawer .dr-nav:hover{color:var(--dhz-blue)} #dhz-header .hd-drawer .dr-nav > span{flex:1;min-width:0} #dhz-header .hd-drawer .dr-nav-img{width:34px;height:34px;object-fit:contain;flex:none;border-radius:6px;background:var(--dhz-soft)} #dhz-header .hd-drawer .dr-nav .dr-chev{width:18px;height:18px;flex:none;color:var(--dhz-muted)} #dhz-header .hd-drawer .dr-nav.dr-all{color:var(--dhz-blue);font-weight:700} /* mobiel: account-dropdown openen op tik (i.p.v. meteen doorsturen) */ @media (max-width:1024px){ #dhz-header .hd-actions .megawrap.acct-mw.open .acctmenu{display:block} } /* drawer-verfijningen: titelbalk hoger + accentkleur, btw-toggle padding, compactere onderlinks */ #dhz-header .hd-drawer .dr-top{padding:10px 18px;background:var(--dhz-soft);border-bottom:1px solid var(--dhz-line)} #dhz-header .hd-drawer .dr-top .dr-title{font-size:15px} #dhz-header .hd-drawer .dr-vat{padding:14px 18px 26px} #dhz-header .hd-drawer .dr-links a{padding:9px 18px} /* TEST: 2de header (categoriebalk) in de blauwe hoofdkleur op desktop */ @media (min-width:1025px){ #dhz-header .hd-stripall{background:var(--dhz-blue);border-top:1px solid var(--dhz-blue-dark);border-bottom:1px solid var(--dhz-blue-dark)} #dhz-header .hd-stripall .cats .scat{color:#fff} #dhz-header .hd-stripall .cats .scat:hover,#dhz-header .hd-stripall .cats .scat.active{color:#fff} #dhz-header .hd-stripall .cats .scat::after{background:#fff} #dhz-header .hd-stripall .hd-rightnav .megawrap > a{color:#fff} #dhz-header .hd-stripall .hd-rightnav .megawrap > a:hover{color:#fff;opacity:.82} #dhz-header .hd-stripall .hd-rightnav .chev{color:#fff;opacity:.85} } /* ============================================================ Barcode-scanner (mobiel): knop in zoekbalk + camera-overlay ============================================================ */ #dhz-header .hd-search button.hd-search-scan{position:absolute;right:60px;top:50%;transform:translateY(-50%);width:26px;height:26px;box-sizing:border-box;padding:0;border:none;background:none;color:var(--dhz-muted);cursor:pointer;display:none;align-items:center;justify-content:center;flex:none;z-index:3} #dhz-header .hd-search button.hd-search-scan:hover{color:var(--dhz-blue)} #dhz-header .hd-search button.hd-search-scan svg{width:22px;height:22px} /* scan-icoon enkel op mobiel/tablet (desktop heeft het niet nodig) */ @media (min-width:1025px){ #dhz-header .hd-search button.hd-search-scan{display:none!important} } .dhz-scan-ov{position:fixed;inset:0;background:#0b0f14;z-index:10000;display:none;flex-direction:column} .dhz-scan-ov.open{display:flex} .dhz-scan-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;color:#fff;font-weight:600;font-size:15px} .dhz-scan-close{background:none;border:none;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:0 4px} .dhz-scan-stage{flex:1;position:relative;overflow:hidden} .dhz-scan-video{width:100%;height:100%;object-fit:cover;display:block} .dhz-scan-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78%;max-width:420px;height:150px;border:2px solid #fff;border-radius:14px;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)} .dhz-scan-hint{padding:18px 20px 30px;text-align:center;color:#fff;font-size:14px;line-height:1.4} /* sticky merkbalk: blauwe onderlijn + lichte schaduw zodra gescrold (desktop) */ @media (min-width:1025px){ body.dhz-scrolled #dhz-header .hd-main{box-shadow:0 1px 0 0 var(--dhz-line),0 6px 16px rgba(20,40,80,.06)} } /* mandje-dropdown: geen box rond 'Hoeveelheid: x' (algemene .qty-stapperregel neutraliseren) */ #dhz-header .cartmenu .qty{display:block;border:none;border-radius:0;height:auto;background:none;padding:0;overflow:visible} /* USP-balk: hele items wegvallen op breekpunten + clip-vangnet (alleen desktop; mobiel <=780 blijft ongemoeid -> gecentreerd, roterend). Item 4 valt al weg <1280. */ @media (min-width:781px){ #dhz-header .hd-uspbottom .items{flex:1 1 auto;min-width:0} #dhz-header .hd-uspbottom .row{gap:24px} } @media (min-width:781px) and (max-width:1200px){ #dhz-header .hd-uspbottom .items .it:nth-child(2){display:none} } @media (min-width:781px) and (max-width:1040px){ #dhz-header .hd-uspbottom .items .it:nth-child(3){display:none} } /* drawer: 'Hulp nodig?'-blok met contactgegevens */ #dhz-header .hd-drawer .dr-help{margin:14px 14px 0;padding:13px 15px;background:var(--dhz-blue-soft);border-radius:10px} #dhz-header .hd-drawer .dr-help-h{font-size:13.5px;font-weight:700;color:var(--dhz-ink);margin-bottom:6px} #dhz-header .hd-drawer .dr-help-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;font-weight:600;color:var(--dhz-blue)} #dhz-header .hd-drawer .dr-help-row:hover{color:var(--dhz-blue-dark)} #dhz-header .hd-drawer .dr-help-row svg{width:18px;height:18px;flex:none} /* mandje-dropdown: gratis-levering-voortgangsbalk */ #dhz-header .cartmenu .cart-ship{padding:12px 14px;border-bottom:1px solid var(--dhz-hair)} #dhz-header .cartmenu .cart-ship .cs-txt{font-size:12.5px;color:var(--dhz-text);margin-bottom:8px;display:flex;align-items:center;gap:6px} #dhz-header .cartmenu .cart-ship .cs-txt b{color:var(--dhz-ink);font-weight:700} #dhz-header .cartmenu .cart-ship.reached .cs-txt,#dhz-header .cartmenu .cart-ship.reached .cs-txt b{color:var(--dhz-green-dark)} #dhz-header .cartmenu .cart-ship.reached .cs-txt svg{width:15px;height:15px;color:var(--dhz-green)} #dhz-header .cartmenu .cart-ship .cs-bar{height:7px;border-radius:5px;background:var(--dhz-soft);overflow:hidden} #dhz-header .cartmenu .cart-ship .cs-bar span{display:block;height:100%;background:var(--dhz-green);border-radius:5px;transition:width .3s} /* USP-balk: items eerder als heel item laten wegvallen nu de servicelinks (incl. 'Reeds besteld') breder zijn — geen afgekapte tekst meer. Desktop-only zodat de mobiele rotatie (<=780) intact blijft. */ @media (min-width:781px) and (max-width:1520px){ #dhz-header .hd-uspbottom .items .it:nth-child(n+4){display:none} } @media (min-width:781px) and (max-width:1320px){ #dhz-header .hd-uspbottom .items .it:nth-child(n+3){display:none} } @media (min-width:781px) and (max-width:1120px){ #dhz-header .hd-uspbottom .items .it:nth-child(n+2){display:none} } /* Verlanglijst-dropdown */ #dhz-header .wishlistmenu{width:280px;right:0;padding:8px} #dhz-header .wishlistmenu .rm-head{padding:6px 10px 8px} #dhz-header .wishlistmenu .wl-lists{max-height:300px;overflow-y:auto} #dhz-header .wishlistmenu .wl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px;color:var(--dhz-ink);font-weight:500} #dhz-header .wishlistmenu .wl-row:hover{background:var(--dhz-soft);color:var(--dhz-blue)} #dhz-header .wishlistmenu .wl-row .wl-ct{background:var(--dhz-soft);color:var(--dhz-muted);font-size:11px;font-weight:700;border-radius:10px;padding:2px 8px;min-width:22px;text-align:center} #dhz-header .wishlistmenu .wl-empty{padding:12px 10px;color:var(--dhz-muted);font-size:13px} #dhz-header .wishlistmenu .wl-new{display:flex;align-items:center;gap:8px;padding:10px;margin-top:4px;border-top:1px solid var(--dhz-hair);font-size:13.5px;font-weight:600;color:var(--dhz-blue)} #dhz-header .wishlistmenu .wl-new svg{width:16px;height:16px} #dhz-header .wishlistmenu .wl-new:hover{color:var(--dhz-blue-dark)} #dhz-header .wishlistmenu .rm-all{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;font-size:13px;font-weight:600;color:var(--dhz-blue)} #dhz-header .wishlistmenu .rm-all svg{width:14px;height:14px} /* ============================================================ Zoekbalk focus-paneel (recent / populair / categorieën) ============================================================ */ #dhz-header .hd-search .dhz-searchfocus{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--dhz-line);border-radius:12px;box-shadow:0 18px 44px rgba(20,40,80,.16);padding:14px 16px;display:none;z-index:60;max-height:78vh;overflow:auto;overscroll-behavior:contain} #dhz-header .hd-search .dhz-searchfocus.open{display:block} .dhz-searchfocus .sf-sec{margin-bottom:14px} .dhz-searchfocus .sf-sec:last-child{margin-bottom:0} .dhz-searchfocus .sf-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dhz-muted);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between} .dhz-searchfocus .sf-clear{border:none;background:none;color:var(--dhz-blue);font-size:11px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0} .dhz-searchfocus .sf-clear:hover{color:var(--dhz-blue-dark)} .dhz-searchfocus .sf-chips{display:flex;flex-wrap:wrap;gap:8px} .dhz-searchfocus .sf-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--dhz-line);border-radius:18px;font-size:13px;color:var(--dhz-ink);background:#fff} .dhz-searchfocus .sf-chip svg{width:13px;height:13px;color:var(--dhz-muted)} .dhz-searchfocus .sf-chip:hover{border-color:var(--dhz-blue);color:var(--dhz-blue);background:var(--dhz-blue-soft)} .dhz-searchfocus .sf-chip:hover svg{color:var(--dhz-blue)} .dhz-searchfocus .sf-cats{display:grid;grid-template-columns:1fr 1fr;gap:2px} .dhz-searchfocus .sf-cat{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--dhz-ink)} .dhz-searchfocus .sf-cat:hover{background:var(--dhz-soft);color:var(--dhz-blue)} .dhz-searchfocus .sf-cat svg{width:16px;height:16px;color:var(--dhz-muted);flex:none} .dhz-searchfocus .sf-cat:hover svg{color:var(--dhz-blue)} /* InstantSearch: term-highlight + "toon alle resultaten"-link */ .instantSearch mark{background:#fff3cd;color:inherit;font-weight:700;border-radius:2px;padding:0 1px} .instantSearch .dhz-seeall{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-top:1px solid var(--dhz-line);font-size:13px;font-weight:600;color:var(--dhz-blue);text-decoration:none} .instantSearch .dhz-seeall:hover{background:var(--dhz-soft)} .instantSearch .dhz-seeall svg{width:14px;height:14px} /* zoek focus-paneel: geen-resultaten + bedoelde-je */ .dhz-searchfocus .sf-noresult{font-size:14px;color:var(--dhz-text);padding:2px 2px 13px;margin-bottom:14px;border-bottom:1px solid var(--dhz-hair)} .dhz-searchfocus .sf-noresult b{color:var(--dhz-ink)} .dhz-searchfocus .sf-dym{font-size:13.5px;padding:0 2px 12px} .dhz-searchfocus .sf-dym:empty{padding:0} .dhz-searchfocus .sf-dym a{color:var(--dhz-blue);font-weight:700} /* bij eigen no-results-paneel: InstantSearch's eigen 'geen resultaten'-popup verbergen (geen dubbele dropdown) */ /* De kale Kendo InstantSearch-dropdown is volledig vervangen door ons eigen federated paneel -> altijd verbergen (voorkomt dubbele/verkeerd gepositioneerde dropdowns bij snel typen/backspacen). */ .instantSearch{display:none!important} .k-animation-container:has(.instantSearch){display:none!important} /* ---- federated zoek-paneel: suggesties / producten / advies ---- */ .dhz-searchfocus .sf-compls{display:flex;flex-direction:column;gap:1px} .dhz-searchfocus .sf-compl{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;font-size:14px;color:var(--dhz-text)} .dhz-searchfocus .sf-compl svg{width:14px;height:14px;color:var(--dhz-muted);flex:none} .dhz-searchfocus .sf-compl b{color:var(--dhz-ink);font-weight:700} .dhz-searchfocus .sf-compl:hover,.dhz-searchfocus .sf-compl.sf-active{background:var(--dhz-blue-soft);color:var(--dhz-blue)} .dhz-searchfocus .sf-prods{display:flex;flex-direction:column;gap:2px} .dhz-searchfocus .sf-prod{display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:9px;color:var(--dhz-ink)} .dhz-searchfocus .sf-prod:hover,.dhz-searchfocus .sf-prod.sf-active{background:var(--dhz-soft)} .dhz-searchfocus .sf-prod-img{width:44px;height:44px;flex:none;border:1px solid var(--dhz-hair);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;color:#cbd5e3} .dhz-searchfocus .sf-prod-img img{width:100%;height:100%;object-fit:contain} .dhz-searchfocus .sf-prod-img svg{width:20px;height:20px} .dhz-searchfocus .sf-prod-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .dhz-searchfocus .sf-prod-name{font-size:13.5px;line-height:1.3;color:var(--dhz-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dhz-searchfocus .sf-prod-name mark{background:#fff3cd;color:inherit;border-radius:2px;padding:0 1px} .dhz-searchfocus .sf-prod-price{font-size:13px;font-weight:700;color:var(--dhz-ink)} .dhz-searchfocus .sf-allres{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;padding:9px;border-top:1px solid var(--dhz-hair);font-size:13px;font-weight:700;color:var(--dhz-blue)} .dhz-searchfocus .sf-allres svg{width:14px;height:14px} .dhz-searchfocus .sf-allres:hover,.dhz-searchfocus .sf-allres.sf-active{background:var(--dhz-soft)} .dhz-searchfocus .sf-adv{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;font-size:13.5px;color:var(--dhz-ink)} .dhz-searchfocus .sf-adv svg:first-child{width:17px;height:17px;color:var(--dhz-muted);flex:none} .dhz-searchfocus .sf-adv span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dhz-searchfocus .sf-adv:hover,.dhz-searchfocus .sf-adv.sf-active{background:var(--dhz-soft);color:var(--dhz-blue)} .dhz-searchfocus .sf-adv-t,.dhz-advies-row .sf-adv-t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dhz-muted);border:1px solid var(--dhz-line);border-radius:5px;padding:2px 6px;flex:none} .dhz-searchfocus .sf-chip.sf-active{border-color:var(--dhz-blue);color:var(--dhz-blue);background:var(--dhz-blue-soft)} .dhz-searchfocus .sf-cat.sf-active{background:var(--dhz-soft);color:var(--dhz-blue)} /* ============================================================= DHZ — Inline login in de account-dropdown (desktop) + mobiel drawer Terugkomende klanten loggen meteen vanuit de header in. ============================================================= */ #dhz-header .acctmenu.acct-guest{width:296px;padding:13px} #dhz-header .acctmenu.acct-guest .welk{padding:0 2px 8px} #dhz-header .acct-login{display:flex;flex-direction:column;gap:13px} #dhz-header .acct-fld{display:flex;flex-direction:column;gap:4px} /* vaste rijhoogte + center, zodat e-mail (1 item) en wachtwoord (label + 'vergeten?'-link) exact dezelfde spatie tot hun invoerveld houden — anders verschilt de rijhoogte door baseline-alignment */ #dhz-header .acct-fld-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:16px;line-height:16px} #dhz-header .acct-lbl{font-size:12px;font-weight:600;color:var(--dhz-text);line-height:16px} #dhz-header .acct-forgot{font-size:11.5px;font-weight:500;color:var(--dhz-blue);white-space:nowrap;line-height:16px} /* links in .acctmenu krijgen standaard de menu-item-stijl (grijze hover-box) — voor de form-/CTA-links neutraliseren */ #dhz-header .acctmenu a.acct-forgot{display:inline;padding:0;border-radius:0;background:none;gap:0} #dhz-header .acctmenu a.acct-forgot:hover{background:none;color:var(--dhz-blue-dark);text-decoration:underline} #dhz-header .acctmenu a.acct-reg-btn:hover{background:var(--dhz-blue-soft);color:var(--dhz-blue-dark)} /* reset de globale thema-input-stijl (45px bordered box uit styles.css) */ #dhz-header .acct-login input[type=email], #dhz-header .acct-login input[type=password], #dhz-header .dr-login input[type=email], #dhz-header .dr-login input[type=password]{ width:100%;height:37px;min-height:0;margin:0;padding:0 12px; border:1.5px solid var(--dhz-line) !important;border-radius:9px !important;background:#fff !important; font-size:14px;color:var(--dhz-ink);font-family:inherit;box-shadow:none !important;transition:border-color .15s,box-shadow .15s} #dhz-header .acct-login input:focus, #dhz-header .dr-login input:focus{outline:none;border-color:var(--dhz-blue) !important;box-shadow:0 0 0 3px rgba(27,99,214,.12) !important} #dhz-header .acct-remember{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dhz-text);cursor:pointer} /* thema verbergt elke native checkbox off-screen (position:absolute;left:-9999px) — hier terughalen als echte checkbox */ #dhz-header .acct-remember input[type=checkbox]{position:static;left:auto;width:16px;height:16px;margin:0;flex:none;appearance:auto;-webkit-appearance:auto;accent-color:var(--dhz-blue);cursor:pointer} #dhz-header .acct-login-btn{width:100%;height:42px;border:none;border-radius:9px;background:var(--dhz-green);color:#fff; font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 4px 12px rgba(90,167,38,.24);transition:background .15s,transform .05s} #dhz-header .acct-login-btn:hover{background:var(--dhz-green-dark)} #dhz-header .acct-login-btn:active{transform:translateY(1px)} #dhz-header .acct-reg{margin-top:11px;padding-top:12px;border-top:1px solid var(--dhz-hair);display:flex;flex-direction:column;gap:8px;text-align:left} #dhz-header .acct-reg-cap{font-size:12px;font-weight:600;color:var(--dhz-muted)} #dhz-header .acct-reg-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border:1.5px solid var(--dhz-blue);border-radius:9px;background:#fff;color:var(--dhz-blue);font-size:13.5px;font-weight:700;text-decoration:none;transition:background .15s,color .15s,border-color .15s} #dhz-header .acct-reg-btn svg{width:16px;height:16px} #dhz-header .acct-reg-btn:hover{background:var(--dhz-blue-soft);border-color:var(--dhz-blue-dark);color:var(--dhz-blue-dark)} /* Mobiel: zelfde formulier bovenaan het drawer-menu */ #dhz-header .dr-login{display:flex;flex-direction:column;gap:13px;padding:16px;margin:0 0 6px;border-bottom:1px solid var(--dhz-hair)} #dhz-header .dr-login-h{font-size:16px;font-weight:700;color:var(--dhz-blue);margin-bottom:2px} /* Mobiel: account-dropdown horizontaal GECENTREERD op het scherm (niet rechts t.o.v. het icoon — het account-icoon is niet het meest rechtse element, het mandje staat ernaast, dus right:0 hing de box te ver naar links). De top wordt door dhz-header.js gezet op basis van de icoon-positie (robust tegen een groter logo / hogere header); de top hieronder is enkel een fallback als JS niet draait. */ @media (max-width:780px){ #dhz-header .hd-actions .acct-mw .acctmenu{ position:fixed;top:96px;left:50%;right:auto;transform:translateX(-50%); width:min(360px,calc(100vw - 20px)); max-height:calc(100vh - 120px);overflow-y:auto} /* op touch geen sticky-:hover (anders blijft de dropdown open na een tik) — alleen .open toont/verbergt */ #dhz-header .hd-actions .acct-mw:hover .acctmenu{display:none} #dhz-header .hd-actions .acct-mw.open .acctmenu{display:block} } /* desktop (>1024px): laat .open de account-dropdown óók openhouden — de bestaande .open-regels zaten enkel in de mobiele/tablet-media-queries. Zonder dit overleeft de dropdown geen hover-verlies (bv. naar de browser-autofill). */ #dhz-header .hd-actions .acct-mw.open .acctmenu{display:block} /* zoek-overlay laad-status (instant feedback terwijl producten laden) */ .dhz-searchfocus .sf-loading{display:flex;align-items:center;gap:10px;padding:18px 4px;color:var(--dhz-muted);font-size:13.5px;font-weight:500} .dhz-searchfocus .sf-spin{width:16px;height:16px;border:2px solid var(--dhz-line);border-top-color:var(--dhz-blue);border-radius:50%;flex:none;animation:dhzSfSpin .6s linear infinite} @keyframes dhzSfSpin{to{transform:rotate(360deg)}} /* * Copyright 2019 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com) * http://www.nop-templates.com/t/licensinginfo */ /* AJAX LOADER & ERRORS */ .k-overlay { position: fixed; top: 0; left: 0; z-index: 1060; width: 100%; height: 100%; background-color: rgba(68,68,68,.6); } .nopAjaxCartPanelAjaxBusy, .miniProductDetailsPanelAjaxBusy { position: fixed; top: 0; left: 0; z-index: 1070; width: 100% !important; height: 100% !important; background-color: rgba(255,255,255,.7); } .miniProductDetailsPanelAjaxBusy { display: none; } .nopAjaxCartPanelAjaxBusy:before, .nopAjaxCartPanelAjaxBusy:after, .miniProductDetailsPanelAjaxBusy:before, .miniProductDetailsPanelAjaxBusy:after { content:""; position: fixed; display: inline-block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; height: 0; border: 0px solid #97c300; border-radius: 50%; -webkit-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; -moz-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; } .nopAjaxCartPanelAjaxBusy:after, .miniProductDetailsPanelAjaxBusy:after { animation-delay: .8s; } .ajaxCart .product-grid .picture > a:before { padding-top: 100%; } .addProductVariantToCartErrors { color: #ff4f60; font-weight: 700; text-align: center; } .addProductVariantToCartErrors ul { margin: 20px; } .addProductVariantToCartErrors li { margin: 0 0 10px 0; } .productQuantityTextBox { float: left; width: 20px; text-align: center; font-size: 16px; } /* item box styles */ select.productQuantityDropdown, input.productQuantityTextBox { font-size: 14px !important; color: #444 !important; } .ajax-cart-button-wrapper .product-box-add-to-cart-button { width: 100%; } .product-grid .ajax-cart-button-wrapper .add-to-cart-qty-wrapper, .product-grid .item-box .productQuantityDropdown { width: 60px; margin-right: 3px; vertical-align: top; } .product-grid .ajax-cart-button-wrapper .add-to-cart-qty-wrapper .plus, .product-grid .ajax-cart-button-wrapper .add-to-cart-qty-wrapper .minus { height: 16px; line-height: 16px; } .product-grid .item-box .productQuantityDropdown { height: 40px; padding: 0 25px 0 10px; background-position: right 10px center; } .product-grid .item-box .productQuantityDropdown ~ .product-box-add-to-cart-button, .product-grid .ajax-cart-button-wrapper .add-to-cart-qty-wrapper + .product-box-add-to-cart-button { width: calc(100% - 63px); vertical-align: top; } .add-to-cart-qty-wrapper + .ajax-cart-button-wrapper { display: inline-block; vertical-align: top; width: calc(100% - 90px); max-width: 250px; } .variant-overview .add-to-cart-qty-wrapper + .ajax-cart-button-wrapper { width: 140px; } .add-to-cart-qty-wrapper + .ajax-cart-button-wrapper button { width: 100%; } .qty-dropdown + .ajax-cart-button-wrapper { display: inline-block; vertical-align: top; } .product-prices-box .qty-dropdown + .ajax-cart-button-wrapper { width: calc(100% - 83px); } .product-prices-box .qty-dropdown + .ajax-cart-button-wrapper button { width: 100%; } .product-grid .item-box .productQuantityTextBox { width: 100%; height: 40px; padding-left: 2px; } /* general styles */ .ajaxCart { position: absolute; left: 50% !important; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 0 !important; width: 700px !important; max-width: 100%; height: auto !important; background: #fff; text-align: left; z-index: 1070; } .ajaxCart li { list-style: none; } .ajaxCart .k-window-titlebar.k-header { padding: 0; font-size: 0; margin: 0 !important; overflow: hidden; } .ajaxCart .k-window-titlebar.k-header .k-window-actions { position: absolute; top: 25px; right: 25px; font-size: 0; z-index: 1; } .ajaxCart .k-window-titlebar.k-header .k-window-actions a, .ajaxCart .k-window-titlebar.k-header .k-window-actions .k-icon { display: block; font-size: 0; } .ajaxCart .k-window-titlebar.k-header .k-window-actions .k-icon:before { content: "\7a"; display: block; font-size: 20px; font-weight: normal; color: #444; opacity: .6; transition: opacity .1s ease; } .ajaxCart .k-window-titlebar.k-header .k-window-actions .k-icon:hover:before { color: #97c300; } .productAddedToCartWindow, .miniProductDetailsView { padding: 0; color: #444; } .productAddedToCartItem { padding: 0 30px 30px; overflow: hidden; } .productAddedToCartWindowImage { float: left; overflow: hidden; margin: 0 !important; width: 35%; height: auto; text-align: left; } .productAddedToCartWindowImage a { display: block; overflow: hidden; line-height: 0; border-radius: 3px; } .productAddedToCartWindowImage img { max-width: 100%; } .productAddedToCartWindowDescription { margin: 0 0 0 38%; padding: 10px 0 0; width: auto; } .productAddedToCartWindowDescription h1 { margin: 0 0 15px; font-weight: normal; font-size: 18px; color: #444; } .productAddedToCartWindowDescription strong { display: inline-block; margin-bottom: 20px; font-size: 24px; color: #97c300; font-weight: bold; } .productAddedToCartWindowDescription span { font-size: 15px; color: #8c8c8c; } .productAddedToCartWindowSummary { clear: both; padding: 30px; text-align: center; font-size: 0; } .productAddedToCartWindowSummary a, .productAddedToCartWindowSummary div { display: inline-block; vertical-align: top; width: calc(50% - 5px); font-size: 14px; } .productAddedToCartWindowSummary div, .productAddedToCartWindowSummary a + a { margin-left: 10px; } .productAddedToCartWindowSummary a + a + div { margin: 10px 0 0; width: 100%; } .productAddedToCartWindowSummary a { border: none; height: 45px; line-height: 45px; padding: 0 25px; border-radius: 3px; background-color: #f1f1f1; color: #8c8c8c; font-weight: 700; text-transform: uppercase; font-size: 14px; transition: all .2s ease; } .productAddedToCartWindowSummary a:hover { background-color: #e7e7e7; } .ajaxCart .productAddedToCartWindowCheckout { width: 100%; } /* grouped */ .miniProductDetailsView:focus, .productAddedToCartWindow:focus { outline: -webkit-focus-ring-color auto 0; } .ajaxCart .product-name, .ajaxCart .productAddedToCartWindowTitle, .ajaxCart .k-window-title { display: block; padding: 25px 0; margin: 0 auto; width: calc(100% - 100px); font-size: 22px; text-transform: none; font-weight: 700; color: #444; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajaxCart .k-window-title:empty { display: none; } .ajaxCart .product-details-page { padding: 0; } .miniProductDetailsView .product-variant-line { margin: 0; } .ajaxCart .product-overview-line { border-top: 1px solid #e7e7e7; padding-top: 30px; } .ajaxCart .product-overview-line:first-child { border-top: 0; padding-top: 0; } .miniProductDetailsView .product-essential { margin: 0; overflow: hidden; padding: 0 30px 30px; border: 0; } .miniProductDetailsView .product-essential .gallery { display: block; /*Cloud Zoom css override*/ float: left; overflow: hidden; width: 35%; margin: 0; } .miniProductDetailsView .product-essential .picture { margin: 0; float: none; overflow: hidden; width: auto !important; height: auto !important; line-height: normal !important; } .miniProductDetailsView .product-essential .picture img { z-index: 0 !important; } .ajaxCart .overview { position: static; width: auto; float: none; padding: 10px 0 0 !important; margin: 0 0 0 38%; } .miniProductDetailsView .product-variant-name, .productAddedToCartWindowDescription h1 a { margin-bottom: 12px; font-size: 20px; text-transform: none; font-weight: 700; color: #444; } .miniProductDetailsView .product-variant-name { display: none; } .miniProductDetailsView .short-description { margin: 0 0 20px; padding-top: 0; font-size: 15px; line-height: 1.5; border-top: none; } .miniProductDetailsView .prices { margin: 0 0 25px; } .miniProductDetailsView .overview .product-price { font-size: 24px; } .miniProductDetailsView .tax-shipping-info { display: inline; text-align: left; } .miniProductDetailsView .customer-entered-price { margin: 0 0 30px; padding: 0; } .miniProductDetailsView .enter-price-input { padding: 4px; width: 69px; } .miniProductDetailsView .product-overview-line .add-to-cart { margin: 0; overflow: hidden; } .ajaxCart .add-to-cart-qty-wrapper { margin-right: 6px; } .ajaxCart .attributeInfo { margin-bottom: 20px; font-size: 15px; line-height: 1.5; color: #8c8c8c; } .ajaxCart .attributeInfo:empty { margin-bottom: 0; } /*.ajaxCart .qty-input,*/ .miniProductDetailsView .add-info input[type="text"] { margin: 0; width: 43px; height: 43px; font-size: 16px; padding: 0; float: left; } /*.nopAjaxCartProductVariantAddToCartButton { float: left; }*/ .ajaxCart .product-collateral { margin: 0; padding: 20px 20px 0; } .miniProductDetailsView .message-error { display: block; float: left; clear: both; margin: 10px 0 0 0; font-weight: bold; text-align: left; font-size: 14px; color: #c00; } .miniProductDetailsView .message-error li { margin: 5px 0; } /* attributes */ .ajaxCart .attributes { margin: 0 0 20px; padding: 0; } .ajaxCart .attributes dt, .attributes dd { text-align: left; } .ajaxCart .attributes select { max-width: 100%; } .ajaxCart .overview .add-to-cart { width: 100%; max-width: 320px; font-size: 0; } /* giftcard */ .miniProductDetailsView .giftcard { margin: 0; padding: 0 20px 20px; background: #fff; text-align: left; } /* product grid */ .ajaxCart .product-grid { margin: 0 0 40px; } .ajaxCart .product-grid .title { padding: 0 30px 20px; margin: 0; font-size: 20px; text-align: center; } .ajaxCart .product-grid .item-grid { padding: 0 25px; } /*.ajaxCart .product-grid .item-box { text-align: center; width: calc(25% - 10px); margin: 0 5px; } .ajaxCart .product-grid .item-box .picture { margin: 0; } .ajaxCart .product-grid .item-box .product-title { height: 38px; margin: 0; font-size: 14px; overflow: hidden; } .ajaxCart .item-box .add-info, .ajaxCart .item-box .description, .ajaxCart .item-box .quick-view-button, .ajaxCart .item-box .product-rating-box { display: none !important; }*/ .ajaxCart .product-grid { font-size: 0; } .ajaxCart .product-grid .item-box { margin: 0 0 10px 0; width: 50%; max-height: 120px; border-left: 0; border-radius: 0 3px 3px 0; overflow: hidden; } .ajaxCart .product-grid .item-box .picture > a:after { content: none; display: none; } .ajaxCart .product-grid .item-box:nth-child(2n+1) { border-left: 1px solid #eee; margin-right: -1px; border-radius: 3px 0 0 3px; } .ajaxCart .product-grid .item-box .product-item > div { display: inline-block; vertical-align: top; } .ajaxCart .product-grid .item-box .product-item > div:first-child { width: 120px; } .ajaxCart .product-grid .item-box .picture { border-radius: 0; } .ajaxCart .product-grid .item-box .details { padding: 12px 4%; width: calc(100% - 120px); text-align: left; } .ajaxCart .product-grid .item-box .title, .ajaxCart .product-grid .item-box .product-title { padding: 0; height: auto; max-height: 39px; } .ajaxCart .product-grid .item-box .prices { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ajaxCart .product-grid .item-box .prices > *:last-child:not(:empty) { margin: 0; } .ajaxCart .product-grid .item-box .buttons, .ajaxCart .product-grid .item-box .btn-wrapper { display: none; } /* out of stock */ .ajaxCart .addProductToCartErrors { padding: 0 20px 30px; color: #8c8c8c; text-align: center; font-size: 15px; } @media all and (min-width:768px) { .ajaxCart .product-details-page { text-align: left; } } @media (max-width: 1024px) { .category-page .item-box .add-to-cart-qty-wrapper, .category-page .item-box .ajax-cart-button-wrapper select { display: none; } .item-box .ajax-cart-button-wrapper .add-to-cart-qty-wrapper, .item-box .productQuantityDropdown { display: none; } .product-grid .item-box .productQuantityDropdown ~ .product-box-add-to-cart-button, .product-grid .ajax-cart-button-wrapper .add-to-cart-qty-wrapper + .product-box-add-to-cart-button { width: 100%; } } @media all and (min-width:1025px) { .product-list .ajax-cart-button-wrapper .add-to-cart-qty-wrapper, .product-list .item-box .productQuantityDropdown { width: 60px; margin-right: 3px; vertical-align: top; } .product-list .item-box .productQuantityDropdown { height: 40px; padding: 0 25px 0 13px; background-position: right 10px center; } .product-list .item-box .productQuantityTextBox { width: 100%; height: 40px; padding-left: 2px; } .product-list .item-box .ajax-cart-button-wrapper .button-2 { max-width: calc(100% - 65px); } } /* quick view button */ .quick-view-button { display: inline-block; backface-visibility: hidden; vertical-align: top; } .quick-view-button:only-child a { padding: 0 15px; font-size: 13px; width: auto; white-space: nowrap; } .quick-view-button:only-child a:before { margin-right: 10px; } .quick-view-button a { display: block; width: 40px; height: 40px; border-radius: 30px; background: #f1f1f1; text-transform: uppercase; text-decoration: none; text-align: center; font-weight: 700; font-size: 0; line-height: 40px; color: #8e8e8e; backface-visibility: hidden; transition: all .1s ease; } .quick-view-button a:hover { background: #97c300; color: #fff; } .quick-view-button a:hover:before { color: #fff; } .quick-view-button a:before { content: "\e905"; display: inline-block; vertical-align: bottom; font-size: 18px; color: #8e8e8e; font-weight: normal; transition: all .1s ease; text-transform: none; } .quickViewData { display: none; } /********* SCREEN OVERLAY & DATA LOADER *********/ .k-overlay { position: fixed; z-index: 1060; top: 0; left: 0; width: 100%; height: 100%; background-color: #444; opacity: 0.6; } .quickView .k-loading-mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: auto !important; height: auto !important; } .quickView .k-loading-image { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50px; height: 50px; } .quickView .k-loading-image:before, .quickView .k-loading-image:after { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; height: 0; border: 0px solid #97c300; border-radius: 50%; -webkit-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; -moz-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; } .quickView .k-loading-image:after { animation-delay: .8s; } /********** MAIN QUICKVIEW WINDOW *********/ /********** PRODUCT OVERVIEW *********/ .quickView { position: absolute; left: 50% !important; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding-top: 0 !important; background: #fff; z-index: 1070; } .quickViewWindow { z-index: 100; /*check if z-index is necessary*/ } .quickView, .quickViewWindow { min-width: 0 !important; width: 915px !important; max-width: 100%; } .quickViewWindow button, .quickViewWindow a { cursor: pointer; } .quickView .k-window-titlebar.k-header { font-size: 0; margin-top: 0 !important; background: none !important; } .quickView .k-window-titlebar.k-header .k-window-actions { position: absolute; top: 25px; right: 25px; width: 20px; height: 20px; font-size: 0; } .quickView .k-window-titlebar.k-header .k-window-actions a { display: block; font-size: 0; } .quickView .k-window-titlebar.k-header .k-window-actions a:before { content: "\7a"; display: block; font-size: 20px; color: #444; opacity: .6; transition: color .1s ease; } .quickView .k-window-titlebar.k-header .k-window-actions a:hover:before { color: #97c300; } .quickViewWindow .product-essential { float: none; width: auto; border: 0; margin: 0; overflow: visible; } .quickViewWindow .product-essential:after { content: "."; display: block; clear: both; height: 0; font-size: 0; line-height: 0; visibility: hidden; } .quickViewWindow .popup-header { display: block; padding: 25px 0; margin: 0 auto; width: calc(100% - 100px); font-size: 22px; text-transform: none; font-weight: 700; color: #444; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .quickViewWindow .product-name { font-size: 22px; } .quickViewWindow .product-content { overflow: hidden; padding: 10px 55px 55px; } .quickView .product-name .manufacturers, .quickView .overview .manufacturers { margin-bottom: 10px; } /* Cloud Zoom CSS. (c)2012-2015 Star Plugins. */ .quickView .cloudzoom-blank { top: 0; right: 0; left: 0; margin: auto; background-image: url('../Plugins/SevenSpikes.Nop.Plugins.QuickView/Themes/Emporium/Content/images/blank.png'); } .quickView .cloudzoom-zoom-inside { z-index: 9; border: none; box-shadow: none; top: 0 !important; left: 0 !important; right: 0 !important; margin: auto; height: 100% !important; } .quickView .cloudzoom-zoom-inside img { right: auto !important; bottom: auto !important; max-width: none !important; max-height: none !important; } .quickView .cloudzoom-ajax-loader { position: absolute; top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50px; height: 50px; } .quickView .cloudzoom-ajax-loader:before, .quickView .cloudzoom-ajax-loader:after { content:""; position: absolute; display: inline-block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; height: 0; border: 0px solid #97c300; border-radius: 50%; -webkit-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; -moz-animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; animation: loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite; } .quickView .cloudzoom-ajax-loader:after { animation-delay: .8s; } .quickView .picture a + img { top: 0; right: 0; left: 0; margin: auto; } /* transitional image (on thumbnail click) */ .quickViewWindow .gallery { display: block; /*Cloud Zoom css override*/ float: left; margin-bottom: 0; overflow: visible; width: 40%; } .quickViewWindow .gallery .picture { margin: 0 0 10px; line-height: 0; } .quickViewWindow .gallery .picture img, .quickViewWindow .related-products-grid .picture img, .quickViewWindow .also-purchased-products-grid .picture img { z-index: 0 !important; } .quickViewWindow .product-grid .picture > a:before { padding-top: 100%; } .quickViewWindow .gallery .thumbnails { margin: 0 0 10px; overflow: hidden; } .quickViewWindow .gallery .thumbnails a, .quickViewWindow .gallery .thumbnails > img { position: relative; float: left; margin: 0 0 5px 5px; border: 1px solid #eee; width: calc(25% - 3.75px); overflow: hidden; } .quickViewWindow .gallery .thumbnails a:before { content: ""; display: block; width: 100%; padding-top: 100%; } .quickViewWindow .gallery .thumbnails a:nth-child(4n+1), .quickViewWindow .gallery .thumbnails > img:nth-child(4n+1) { margin-left: 0; } .quickViewWindow .gallery .thumbnails a img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; transition: all .2s ease; } .quickViewWindow .gallery .thumbnails a img:hover { opacity: 0.7; /*cloud zoom only*/ } .quickViewWindow .links-panel a { display: block; margin-top: 40px; text-align: center; font-size: 14px; color: #8c8c8c; font-weight: 700; height: 50px; line-height: 50px; border-radius: 3px; background-color: #f1f1f1; text-transform: uppercase; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .2s ease; } .quickViewWindow .links-panel a:after { content: "\6a"; display: inline-block; margin-left: 10px; vertical-align: bottom; font-size: 9px; color: #8c8c8c; text-transform: none; font-weight: normal; } .quickViewWindow .links-panel a:hover { background-color: #e7e7e7; } .quickViewWindow .overview { float: none; padding: 0; margin: 0 0 0 43%; width: auto; text-align: center; } .quickViewWindow #accordion > h3 { position: relative; padding: 0 55px; margin-top: 8px; height: 50px; border: 1px solid #eee; border-radius: 3px; line-height: 50px; background: #f9f9f9; font-size: 18px; font-weight: 300; color: #444; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; transition: all 0s ease .3s; } .quickViewWindow #accordion > h3.ui-accordion-header-active { border-bottom: 1px solid transparent; border-radius: 3px 3px 0 0; transition: all 0s ease 0s; } .quickViewWindow #accordion > h3:first-child { margin-top: 0; } .quickViewWindow #accordion > h3 span { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; } .quickViewWindow #accordion > h3 span:before { content: "\57"; display: block; font-size: 10px; color: #97c300; text-transform: none; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transition: all .3s ease; } .quickViewWindow .overview #accordion > h3 span.ui-icon-circle-arrow-e:before { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .quickViewWindow #accordion .product-details { position: relative; margin: 0; padding: 25px 30px; border: 1px solid #eee; border-top: 0; border-radius: 0 0 3px 3px; overflow: hidden; } .quickViewWindow .overview .additional-details { margin-bottom: 0; } .quickView .overview div .availability { margin: 20px 0 30px; } .quickView .overview .stock { display: inline-block; margin: 0; } .quickView .overview .stock + .back-in-stock-subscription { margin: 20px 0 0; } .quickView .overview .qty-dropdown { } .quickView .qty-dropdown + .ajax-cart-button-wrapper { width: calc(100% - 85px); } .quickView .qty-dropdown + .ajax-cart-button-wrapper button { width: 100%; } .quickView .overview .add-to-cart { display: inline-block; width: calc(100% - 55px); max-width: 320px; margin-bottom: 20px; } .quickViewWindow .overview .add-to-wishlist { display: inline-block; margin-left: 5px; width: auto; } .quickViewWindow .overview .add-to-wishlist button { display: block; width: 45px; height: 45px; line-height: 45px; border: none; border-radius: 3px; font-weight: bold; color: #8c8c8c; font-size: 0; text-transform: uppercase; text-align: center; background-color: #f1f1f1; transition: all .1s ease; } .quickViewWindow .overview .add-to-wishlist button:hover { background-color: #eaeaea; } .quickViewWindow .overview .add-to-wishlist button:before { margin: 0; } .quickViewWindow .overview .compare-products + .delivery { margin-top: 10px; } .quickViewWindow .overview .delivery { margin: 0; } .quickViewWindow .overview .delivery .free-shipping { margin: 0; } .quickViewWindow .overview .delivery-date { margin: 5px 0 0; } .quickViewWindow .tier-prices { clear: both; margin: 20px 0; } .quickViewWindow .tier-prices .field-header { min-width: 0; } .quickViewWindow .tier-prices table td { font-size: 12px !important; } .quickViewWindow .overview .purchase-area { } .quickViewWindow .overview .title, .quickViewWindow .overview .add-info, .quickViewWindow .overview .description { display: none; } .quickViewWindow .overview #accordion .purchase-area .prices { margin: 30px 0; text-align: center; } .quickViewWindow .overview #accordion .overview .product-price { font-size: 24px; } .quickViewWindow .overview #accordion .purchase-area .prices label { display: none; } .quickViewWindow .overview #accordion .purchase-area .prices .old-product-price { margin: 0; } .quickViewWindow .customer-entered-price { padding: 0; margin: 20px 0; } .quickViewWindow .overview .short-description { margin: 0; font-size: 15px; text-align: left; } .quickViewWindow .overview .full-description { background: transparent; text-align: left; } .quickViewWindow .overview .short-description + .full-description { margin: 20px 0 0; } .quickViewWindow .overview .full-description, .quickViewWindow .overview .product-specs-box { margin: 0; padding: 0; } /* variants */ .quickViewWindow #accordion .variants-in-grid { padding: 20px; } .quickViewWindow .product-variant-list { margin: 0; overflow: hidden; padding: 0; text-align: left; } .quickViewWindow .product-variant-list .item-row { overflow: hidden; margin-bottom: 10px; } .quickViewWindow .variant-grid-info { margin-bottom: 10px; } .quickViewWindow .product-variant { display: inline-block; position: relative; margin: 0 0 10px; float: left; width: 100%; height: 90px; font-size: 0; overflow: hidden; } .quickViewWindow .variant-picture { vertical-align: middle; width: 90px; height: 90px; overflow: hidden; } .quickViewWindow .variant-picture a { display: block; } .quickViewWindow .moreInfoHover { display: none; } .quickViewWindow .variant-info { width: calc(100% - 90px); padding: 12px 18px; margin: 0; text-align: left; } .quickViewWindow .variant-info .variant-name { margin-bottom: 8px; max-height: 38px; overflow: hidden; font-size: 16px; color: #444; font-weight: 400; } .quickViewWindow .variant-info .prices { margin: 0; } .quickViewWindow .product-variant .product-price { display: inline-block; font-size: 18px; color: #97c300; } .quickViewWindow .product-variant .tax-shipping-info { margin-left: 5px; text-align: left; } .quickViewWindow .tax-shipping-info a { display: inline-block; color: #444; } /* related/also-purchased products */ .quickViewWindow .product-grid { margin: 0 0 40px; } .quickViewWindow .product-grid .title { padding: 0 55px 20px; margin: 0; font-size: 20px; text-align: center; } .quickViewWindow .product-grid .item-grid { padding: 0 50px; } .quickViewWindow .product-grid { font-size: 0; } .quickViewWindow .product-grid .item-box { display: none; margin: 0 0 10px 0; width: 50%; max-height: 150px; border-left: 0; border-radius: 0 3px 3px 0; overflow: hidden; } .quickViewWindow .product-grid .item-box .picture > a:after { content: none; display: none; } .quickViewWindow .product-grid .item-box:nth-child(1), .quickViewWindow .product-grid .item-box:nth-child(2) { display: inline-block; } .quickViewWindow .product-grid .item-box:nth-child(2n+1) { border-left: 1px solid #eee; margin-right: -1px; border-radius: 3px 0 0 3px; } .quickViewWindow .product-grid .item-box .product-item > div { display: inline-block; vertical-align: top; } .quickViewWindow .product-grid .item-box .product-item > div:first-child { width: 150px; } .quickViewWindow .product-grid .item-box .picture { border-radius: 0; } .quickViewWindow .product-grid .item-box .details { padding: 27px 5%; width: calc(100% - 150px); text-align: left; } .quickViewWindow .product-grid .item-box .title, .quickViewWindow .product-grid .item-box .product-title { padding: 0; height: auto; max-height: 39px; } .quickViewWindow .product-grid .item-box .prices { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .quickViewWindow .product-grid .item-box .prices > *:last-child:not(:empty) { margin: 0; } .quickViewWindow .product-grid .item-box .buttons, .quickViewWindow .product-grid .item-box .btn-wrapper { display: none; } /* gift card */ .quickView .giftcard textarea { resize: none; } .quickView .giftcard label { text-align: left; } /* attributes */ .quickViewWindow .overview .attributes { max-width: 320px; padding: 0; margin: 0 auto; } .quickViewWindow .overview .attributes dl > * { max-width: 100%; } @media all and (min-width:1025px) { .product-list .quick-view-button a { background-color: #f2f2f2; width: 45px; height: 45px; line-height: 45px; border-radius: 3px; } .product-list .quick-view-button a:before { color: #8c8c8c; font-size: 19px; } .product-list .quick-view-button a:hover { background-color: #eaeaea; } .product-list .quick-view-button:only-child a { width: auto; } .product-list .quick-view-button:only-child a:hover { color: #8e8e8e; } } .qq-uploader{position:relative;width:100%}.qq-upload-button{display:block;width:105px;padding:7px 0;text-align:center;background:#800;border-bottom:1px solid #ddd;color:#fff}.qq-upload-button-hover{background:#c00}.qq-upload-button-focus{outline:1px dotted #000}.qq-upload-drop-area,.qq-upload-extra-drop-area{position:absolute;top:0;left:0;width:100%;height:100%;min-height:30px;z-index:2;background:#ff9797;text-align:center}.qq-upload-drop-area span{display:block;position:absolute;top:50%;width:100%;margin-top:-8px;font-size:16px}.qq-upload-extra-drop-area{position:relative;margin-top:50px;font-size:16px;padding-top:30px;height:20px;min-height:40px}.qq-upload-drop-area-active{background:#ff7171}.qq-upload-list{margin:0;padding:0;list-style:none}.qq-upload-list li{margin:0;padding:9px;line-height:15px;font-size:16px;background-color:#fff0bd}.qq-upload-cancel,.qq-upload-continue,.qq-upload-delete,.qq-upload-failed-text,.qq-upload-file,.qq-upload-pause,.qq-upload-retry,.qq-upload-size,.qq-upload-spinner{margin-right:12px;display:inline}.qq-upload-spinner{display:inline-block;background:url(../lib_npm/fine-uploader/fine-uploader/loading.gif);width:15px;height:15px;vertical-align:text-bottom}.qq-drop-processing{display:block}.qq-drop-processing-spinner{display:inline-block;background:url(../lib_npm/fine-uploader/fine-uploader/processing.gif);width:24px;height:24px;vertical-align:text-bottom}.qq-upload-continue,.qq-upload-delete,.qq-upload-pause{display:inline}.qq-upload-cancel,.qq-upload-continue,.qq-upload-delete,.qq-upload-pause,.qq-upload-retry{color:#000}.qq-upload-cancel,.qq-upload-continue,.qq-upload-delete,.qq-upload-pause,.qq-upload-retry,.qq-upload-size{font-size:12px;font-weight:400}.qq-upload-failed-text{display:none;font-style:italic;font-weight:700}.qq-upload-failed-icon{display:none;width:15px;height:15px;vertical-align:text-bottom}.qq-upload-fail .qq-upload-failed-text{display:inline}.qq-upload-retrying .qq-upload-failed-text{display:inline;color:#d60000}.qq-upload-list li.qq-upload-success{background-color:#5da30c;color:#fff}.qq-upload-list li.qq-upload-fail{background-color:#d60000;color:#fff}.qq-progress-bar{display:block;background:-moz-linear-gradient(top,rgba(30,87,153,1) 0,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(30,87,153,1)),color-stop(50%,rgba(41,137,216,1)),color-stop(51%,rgba(32,124,202,1)),color-stop(100%,rgba(125,185,232,1)));background:-webkit-linear-gradient(top,rgba(30,87,153,1) 0,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);background:-o-linear-gradient(top,rgba(30,87,153,1) 0,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);background:-ms-linear-gradient(top,rgba(30,87,153,1) 0,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);background:linear-gradient(to bottom,rgba(30,87,153,1) 0,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);width:0;height:15px;border-radius:6px;margin-bottom:3px}.qq-total-progress-bar{height:25px;border-radius:9px}.qq-total-progress-bar-container{margin:9px}INPUT.qq-edit-filename{position:absolute;opacity:0;z-index:-1}.qq-upload-file.qq-editable{cursor:pointer}.qq-edit-filename-icon.qq-editable{display:inline-block;cursor:pointer}INPUT.qq-edit-filename.qq-editing{position:static;margin-top:-5px;margin-right:10px;margin-bottom:-5px;opacity:1}.qq-edit-filename-icon{display:none;background:url(../lib_npm/fine-uploader/fine-uploader/edit.gif);width:15px;height:15px;vertical-align:text-bottom;margin-right:5px}.qq-hide{display:none}.qq-uploader DIALOG{display:none}.qq-uploader DIALOG[open]{display:block}.qq-uploader DIALOG{display:none}.qq-uploader DIALOG[open]{display:block}.qq-uploader DIALOG .qq-dialog-buttons{text-align:center;padding-top:10px}.qq-uploader DIALOG .qq-dialog-buttons BUTTON{margin-left:5px;margin-right:5px}.qq-uploader DIALOG .qq-dialog-message-selector{padding-bottom:10px}.qq-uploader DIALOG::backdrop{background-color:rgba(0,0,0,.7)}/*# sourceMappingURL=fine-uploader.min.css.map */ /* * Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com) * http://www.nop-templates.com/t/licensinginfo */ .ribbon-wrapper { position: relative; } @media all and (min-width: 769px) { .product-list .ribbon-wrapper { float: left; /*should not be applied on smaller resolutions where the product list looks like a grid*/ } } /* ribbon positioning */ .ribbon-position { font-size: 0; line-height: 0; position: absolute; z-index: 1; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .ribbon-position.top-left { top: 0; left: 0; } .ribbon-position.top-right { top: 0; right: 0; } .ribbon-position.bottom-left { bottom: 0; left: 0; } .ribbon-position.bottom-right { bottom: 0; right: 0; } .ribbon-position.top-middle { top: 0; left: 0; right: 0; text-align: center; } .ribbon-position.right-middle { top: 0; right: 0; bottom: 0; text-align: right; } .ribbon-position.bottom-middle { bottom: 0; left: 0; right: 0; text-align: center; } .ribbon-position.left-middle { top: 0; bottom: 0; left: 0; text-align: left; } .ribbon-position.center { top: 0; right: 0; bottom: 0; left: 0; text-align: center; } .ribbon-position.right-middle:before, .ribbon-position.left-middle:before, .ribbon-position.center:before { content: ""; display: inline-block; height: 100%; width: 0; vertical-align: middle; } /* ribbon wrapping element */ .product-ribbon { display: inline-block; vertical-align: middle; position: relative; } /* ribbon label without image*/ .ribbon-text { font-size: 12px; line-height: normal; } /* ribbon label with image */ .ribbon-image-text { font-size: 12px; line-height: normal; position: absolute; top: 0; left: 0; } /* * Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com) * http://www.nop-templates.com/t/licensinginfo */ .gallery .ribbon-wrapper { font-size: 0; overflow: hidden; } .gallery .ribbon-wrapper img { max-width: 100%; } .ribbon-position.top-right { top: 5px; right: 5px; } .ribbon-position.top-left { top: 5px; left: 5px; } .ribbon-position.top-middle { top: 5px; } .ribbon-position.bottom-right { bottom: 5px; right: 5px; } .ribbon-position.bottom-left { bottom: 5px; left: 5px; } .ribbon-position.bottom-middle { bottom: 5px; } .ribbon-position.right-middle { right: 5px; } .ribbon-position.left-middle { left: 5px; } @media all and (max-width:1024px) { .product-list .ribbon-wrapper { float: none !important; } } @media all and (min-width: 1025px) { .product-list .ribbon-wrapper + .details { margin: 0 0 0 240px; } .spc-categories .ribbon-wrapper { float: left; width: 45%; } .spc-categories .ribbon-wrapper .picture { width: 100%; } } @media all and (min-width: 1367px) { .spc-categories .ribbon-wrapper { width: 40%; } } .item-box .btn-wrapper button:hover, input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before, .select input[type="checkbox"]:checked + label, .select-boxes input[type="checkbox"]:checked + label, .two-row-carousels .slick-arrow:hover, .home-page-polls .answer input[type="radio"]:checked + label:before, .answer input[type="radio"]:checked + label:before, .pager li a:hover, .pager li span, .pager li.previous-page a:hover, .pager li.next-page a:hover, .pager li.first-page a:hover, .pager li.last-page a:hover, .ui-datepicker-header, .ui-datepicker-calendar a.ui-state-active:hover, .ui-datepicker-calendar a.ui-state-active, .order-progress .active-step:not(.last) a:hover:before, .opc .selector input[type="checkbox"]:checked ~ label:before, .forum-search-box.search-box .search-box-button:hover, .ico-wishlist .wishlist-qty, .ico-cart .cart-qty, .shopping-cart-link .cart-qty, .selected-options-list > li span, .header-menu .close-menu, .close-side-menu, .mobile-flyout-wrapper .close-side-menu, .header-menu ul li.back-button, .avatar-page .upload-image.valid + label, .ui-slider-range, .filters-button, .quick-view-button a:hover, .jCarouselMainWrapper .slick-next:hover, .jCarouselMainWrapper .slick-prev:hover, .blog-search-box .search-box-button:hover, .sale-of-the-day-offer .timer-info-box, .spc-products .slick-arrow:hover, .nivo-directionNav a:hover, .anywhere-slider .slick-arrow:hover, .theme-roller .open-button, .product-filters .ui-slider-range, .buttons .k-button { background-color: #0a6dbe; } .selected-options-list > li span:hover, .theme-roller .open-button:hover, .avatar-page .upload-image.valid + label:hover, .buttons .k-button:hover { background-color: #064375; } .link-rss:hover:before, .field-validation-valid, .username-available-status, .cart a, .data-table a, .compare-products-table a, .forums-table-section a, .cart .product a:hover, .data-table .product a:hover, .compare-products-table .product a:hover, .forums-table-section .product a:hover, .cart .edit-item a, .data-table .edit-item a, .compare-products-table .edit-item a, .forums-table-section .edit-item a, .mini-shopping-cart .count a:hover, .mini-shopping-cart .price, .mini-shopping-cart .totals strong, .login-form-in-header .in-header-register .register-button:hover, .login-form-in-header .inputs input:focus + .inputs-icons, .footer-block a:hover, .social-sharing a:hover:before, .footer-block .title:before, .footer-block .title:after, .block .title:before, .block .list li.active > a, .block .list a:hover, .block .view-all a, .block .tags li a:hover, .product-tags-all-page li a:hover, .poll > strong, .block .answer label:hover, .breadcrumb a:hover, .breadcrumb a:hover span, .item-box .actual-price, .item-box .tax-shipping-info a, .vendor-item:hover .title a, .manufacturer-item:hover .title a, .category-grid .item-box:hover .title a, .product-name .manufacturers .value, .overview .manufacturers .value, .product-review-links a:hover, .product-no-reviews a:hover, .compare-products .add-to-compare-list-button:hover, .compare-products .add-to-compare-list-button:hover:before, .back-in-stock-subscription:hover:before, .overview .additional-details div .value a, .variant-overview .additional-details div .value a, .download-sample a, .product-social-sharing li a:hover:before, .email-a-friend:hover:before, .overview .product-price, .variant-overview .product-price, .tier-prices .item-price, .product-tags-list a, .ui-tabs .ui-tabs-nav li a:hover, .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-state-active.ui-tabs-active a, .ui-tabs .submitReviewResult, .product-review-helpfulness .vote:hover:before, .wishlist-page .share-info a, .compare-products-mobile .price .item span, .email-a-friend-page .title a, .accept-privacy-policy .read, .account-page .button-2.return-items-button:hover, .account-page .button-2.return-items-button:hover:before, .order-total td label, .order-total td span, .cart-total .order-total, .terms-of-service .read, .cart-collaterals > div > .title:hover, .cart-collaterals > div > .title:before, .cart-collaterals .message-success, .checkout-page .add-button .btn-holder.open:before, .order-completed .order-number, .opc > li.allow:not(.active) .step-title:after, .opc > li.active .step-title .number, .opc > li.active .step-title .title, .order-details-page .order-overview .order-number, .sitemap-page a, .post-date, .news-date, .post-navigation a:before, .post-navigation a:after, .back-to-all-button:hover, .back-to-all-button:hover:before, .blog-page .tags li, .blogpost-page .tags a, .read-comments:hover, .read-comments:hover:before, .new-comment .result, .news-list-homepage .view-all a, .news-list-homepage .view-all a:after, .current-time, .forum-search-box .advanced > a:hover, .forum-table a:hover, .topic-post .pm-button:before, .topic-post .post-vote > .vote.up:hover:before, .topic-post .post-vote > .vote.down:hover:before, .compare-products-table .product-price td, .order-progress .active-step.last a span, .category-navigation-list-wrapper ul li:hover > a, .category-navigation-list-wrapper ul li:hover > span, .category-navigation-list-wrapper ul li:hover > a:after, .header-links a:hover, .header-links a:hover:before, .block.block-recently-viewed-products .list a:hover, .block-account-navigation.block .list a:hover, .block-account-navigation.block .list a:hover:after, .block-account-navigation.block .list a.active, .block-account-navigation.block .list a.active:after, .header-selectors-wrapper > div input[type="radio"]:checked + label, .ajaxCart .k-window-titlebar.k-header .k-window-actions .k-icon:hover:before, .productAddedToCartWindowDescription strong, .clearFilterOptionsAll:hover, .filter-block .toggleControl:before, .filter-block a.clearFilterOptions:hover:before, .filter-block a.clearPriceRangeFilter:hover:before, .picture-thumbs .slick-prev:hover:before, .picture-thumbs .slick-next:hover:before, .instant-search-item .detail .price, .home-page .jCarouselMainWrapper.small-products .nop-jcarousel .carousel-title:before, .mega-menu .sublist li:hover > a, .category-navigation-list .dropdown .box .title a, .category-navigation-list .dropdown .box .subcategory-item a:hover, .mega-menu .manufacturers .box:hover .title, .mega-menu .vendors .box:hover .title, .previous-product a:before, .next-product a:before, .quickView .k-window-titlebar.k-header .k-window-actions a:hover:before, .quickViewWindow #accordion > h3 span:before, .quickViewWindow .product-variant .product-price, .ropc .section .title:after, .ropc .coupon-box-panel .message-success, .ropc .giftcard-box-panel .message-success, .ropc .cart-total .cart-total-row span, .sale-of-the-day-offer .product-name a:hover, .sale-of-the-day-offer .price.actual-price, .sale-of-the-day-offer .slick-arrow:hover:before, .rich-blog-homepage .view-all a, .rich-blog-homepage .view-all a:after, .blog-search-results .search-term-highlighter, .share-post li a:hover:before, .post-relations li a, .spc-products .spc-header li:hover, .spc-categories .navigation li:hover, .spc-header li.active, .spc-categories .navigation li.active, .spc-categories .category-title, .spc-categories .category-sublist a:hover, .spc-categories .slick-prev:hover:before, .spc-categories .slick-next:hover:before, .advantages-item .title a:hover, .scroll-back-button:before, .inputs.accept-consent .read, .product-filters .selected-price-range { color: #0a6dbe; } .product-name .manufacturers .value:hover, .product-tags-list a:hover:hover, .overview .additional-details div .value a:hover, .variant-overview .additional-details div .value a:hover, .terms-of-service .read:hover, .download-sample a:hover, .sitemap-page a:hover, .blog-page .tags a:hover, .blogpost-page .tags a:hover, .product-tags-list a:hover, .cart .edit-item a:hover, .news-list-homepage .view-all a:hover, .news-list-homepage .view-all a:hover:after, .manufacturers .value:hover, .block .view-all a:hover, .data-table a:hover, .forums-table-section a:hover, .category-navigation-list .dropdown .box .title a:hover, .rich-blog-homepage .view-all a:hover, .rich-blog-homepage .view-all a:hover:after, .post-relations li a:hover, .spc-categories .category-title a:hover { color: #064375; } .ajax-loading-block-window:before, .ajax-loading-block-window:after, .two-row-carousels .slick-arrow:hover, .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-state-active.ui-tabs-active a, .order-progress .active-step.last a:before, .block-account-navigation.block .list a.active, .nopAjaxCartPanelAjaxBusy:before, .nopAjaxCartPanelAjaxBusy:after, .miniProductDetailsPanelAjaxBusy:before, .miniProductDetailsPanelAjaxBusy:after, .ui-slider-handle, .product-filters .ui-slider-handle, .productPanelAjaxBusy:before, .productPanelAjaxBusy:after, .infinite-scroll-loader:before, .infinite-scroll-loader:after, .cloudzoom-ajax-loader:before, .cloudzoom-ajax-loader:after, .jCarouselMainWrapper .slick-next:hover, .jCarouselMainWrapper .slick-prev:hover, .quickView .k-loading-image:before, .quickView .k-loading-image:after, .quickView .cloudzoom-ajax-loader:before, .quickView .cloudzoom-ajax-loader:after, .panel-loader-effect .spinner:before, .panel-loader-effect .spinner:after, .spc-categories .loading-overlay:before, .spc-categories .loading-overlay:after, .spc-body .loading-overlay:before, .spc-body .loading-overlay:after, .spc-products .slick-arrow:hover, .scroll-back-button, .nivoSlider:before, .nivoSlider:after, .anywhere-slider:before, .anywhere-slider:after, .jCarouselMainWrapper .loading-overlay:before, .jCarouselMainWrapper .loading-overlay:after { border-color: #0a6dbe; } .pager li a:hover, .pager li span { border-color: #0a6dbe !important; } .button-1, .eu-cookie-bar-notification button, .login-form-in-header .login-button, .category-navigation-list-wrapper:hover .category-navigation-title, .category-navigation-list-wrapper.menuItemsAreClickable.opened .category-navigation-title, .newsletter-email .newsletter-subscribe-button, .home-page-polls .poll button, .contact-vendor-button, .item-box .buttons .button-2:hover, .grouped-btn:hover, .write-review .title strong, .comment-form-btn strong, .mfp-container .apply-shipping-button, .write-review .button-1, .qq-uploader .qq-upload-button, .blog-posts .read-more, .news-items .read-more, .forums-table-section .view-all a, .topic-post .post-actions .quote-post-button, .ropc .complete-button button, .spc-categories .category-picture .spc-to-all-products, .jCarouselMainWrapper .slick-dots .slick-active button, .sale-of-the-day-offer li.slick-active button, .spc .slick-dots .slick-active button { background-color: #5cb85c; } .button-1:hover, .eu-cookie-bar-notification button:hover, .mini-shopping-cart .buttons button:hover, .login-form-in-header .login-button:hover, .search-box .search-box-button:hover, .newsletter-email .newsletter-subscribe-button:hover, .poll .buttons button:hover, .contact-vendor-button:hover, .product-reviews-page .title .write-review-title:hover, .mfp-container .apply-shipping-button:hover, .write-review .button-1:hover, .qq-uploader .qq-upload-button:hover, .blog-posts .read-more:hover, .news-items .read-more:hover, .open-comment-form:hover, .forums-table-section .view-all a:hover, .topic-post .post-actions .quote-post-button:hover, .ropc .complete-button button:hover { background-color: #47a447; } @media all and (min-width: 1025px) { .search-box .search-box-button, .center-2 .product-list .item-box .buttons .button-2 { background-color: #5cb85c; } .center-2 .product-list .item-box .buttons .button-2:hover { background-color: #47a447; } .block-account-navigation.block .list .active a, .block-account-navigation.block .list .active a:after { color: #0a6dbe; } .block-account-navigation.block .list .active a { border-color: #0a6dbe; } } .sale-of-the-day-offer { background-image: url('https://www.dhz-proshop.be/images/thumbs/0170980_3187a311-2188-468f-b0dd-cd5c50a239b4.webp'); }:root { --site-blue: #0a6dbe; --blue-background: #0a6dbe; --dhz-blue: #1b63d6; --dhz-blue-dark: #1450b0; --dhz-blue-soft: #eef4fd; --dhz-green: #5aa726; --dhz-green-dark: #4d9120; --dhz-red: #d6242c; --dhz-ink: #1e293b; --dhz-text: #475569; --dhz-muted: #94a3b8; --dhz-line: #e2e8f0; --dhz-bg: #f4f7fb; --dhz-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px rgba(16, 24, 40, .07); --dhz-card: #ffffff; } body.home-page-body .master-wrapper-content { padding-top: 10px !important; } body[data-page="klantbeoordelingen"] .page-title, .page.topic-page .page-title h1 { display: none; } /* ========================================================= DHZ Topbar USP-balk begin – Professioneel ========================================================= */ .dhz-topbar { background: #fff; /*border-bottom: 1px solid #e8e8e8;*/ font-size: 13px; } .filtersGroupPanel .checkbox-list input[type="checkbox"] + label:before { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #d6d6d6; } .responsive-nav-wrapper-parent { border-bottom: 1px solid #e8e8e8 !important; } .html-checkout-page .dhz-topbar { display: none !important; } .dhz-topbar-inner { width: 88%; margin: 0 auto; padding: 9px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .dhz-benefit:nth-child(2)::before { content: ""; display: none; } .dhz-benefit:nth-child(2) a::before { content: "★★★★★"; color: #f5a623; font-size: 11px; margin-right: 4px; vertical-align: middle; line-height: 1; display: inline-block; position: relative; top: -1px; } .dhz-topbar-left { display: flex; flex-wrap: nowrap; gap: 0; align-items: center; } .dhz-benefit { display: flex; align-items: center; gap: 6px; font-weight: 400; color: #444; font-size: 12.5px; white-space: nowrap; } .dhz-benefit::before { content: "✓"; color: #14a44d; font-weight: 900; font-size: 14px; line-height: 1; } .dhz-benefit strong { color: var(--site-blue, #0a6dbe); font-weight: 700; } .dhz-benefit + .dhz-benefit { padding-left: 15px; margin-left: 15px; border-left: 1px solid #e0e0e0; } .dhz-benefit a { color: inherit; text-decoration: none; } .dhz-benefit a:hover { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.25); } .dhz-benefit a strong { color: var(--site-blue, #0a6dbe); } .dhz-topbar-right { display: flex; gap: 4px; align-items: center; font-size: 13px; white-space: nowrap; } .dhz-topbar-right b { color: #999; font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 10px; } .dhz-topbar-right a { color: #222; text-decoration: none; font-weight: 700; font-size: 13px; padding: 2px 8px; letter-spacing: 0.3px; transition: color 0.15s ease; } .dhz-topbar-right a:hover { color: var(--site-blue, #0a6dbe); } .dhz-topbar-ticker { display: none !important; } .dhz-topbar-ticker strong { color: var(--site-blue, #0a6dbe); font-weight: 700; } /* --- Responsive breakpoints (groot naar klein) --- */ @media (max-width: 1650px) { .dhz-topbar-right { display: none; } .dhz-topbar-left { display: flex; } .dhz-benefit { font-size: 12px; } .dhz-benefit + .dhz-benefit { padding-left: 10px; margin-left: 10px; } .dhz-topbar-inner { gap: 10px; } } @media (max-width: 1145px) { .dhz-topbar-inner { width: 95%; gap: 8px; } .dhz-benefit { font-size: 12px; } .dhz-benefit + .dhz-benefit { padding-left: 6px; margin-left: 6px; } /* 4e benefit verbergen */ .dhz-topbar-left .dhz-benefit:nth-child(4) { display: none; } } @media (max-width: 1245px) and (min-width: 1026px) { .header-menu > ul > li > a { font-size: 12px; padding-left: 8px; padding-right: 8px; } } @media (max-width: 1310px) and (min-width: 1026px) { .header-menu > ul > li:last-child { display: none; } } @media (max-width: 768px) { .dhz-topbar-inner { width: 98%; padding: 9px 0; } .dhz-topbar-left { display: none !important; } .dhz-topbar-right { display: none !important; } .dhz-topbar-ticker { display: block !important; position: relative; overflow: hidden; height: 28px; width: 100%; text-align: center; } } /* Reserveer ruimte voor de USP-balk */ .dhz-topbar { min-height: 40px; /* Pas dit aan naar de werkelijke hoogte */ } /* ========================================================= DHZ Topbar USP-balk einde – Professioneel ========================================================= */ /* ================================================ SALE OF THE DAY - DHZ-Proshop Versie: 2.1 — clean CSS, geen !important Grid-based responsive layout + promo decoratie ================================================ */ .sale-of-the-day-grid:not(.slick-initialized) .product-element:nth-child(n+2) { display: none; } /* Zorg dat de grid niet verspringt als de slider laadt */ .sale-of-the-day-grid { display: block; min-height: 450px; /* Pas dit getal aan naar de gemiddelde hoogte van je banner */ } .sale-of-the-day-offer .slick-list, .sale-of-the-day-offer .slick-track { opacity: 1 !important; visibility: visible !important; display: block !important; } /* ── Outer wrapper ─────────────────────────────── */ .sale-of-the-day-offer { background: #f4f7fb; padding: 25px 16px; margin: 0 -10px 30px; border-top: none; font-family: 'Open Sans', Arial, sans-serif; position: relative; overflow: hidden; min-height: 548px; } .jCarouselMainWrapper .slick-list, .sale-of-the-day-offer .slick-list, .sale-of-the-day-offer .slick-track { opacity: 1 !important; visibility: visible !important; display: block !important; } .sale-of-the-day-offer .item-picture { aspect-ratio: 1 / 1; overflow: hidden; } .sale-of-the-day-offer .item-picture img { width: 100%; height: 100%; object-fit: contain; opacity: 1 !important; display: block !important; } /* Decoratieve % cirkels als achtergrondlaag — puur CSS via ::before, geen HTML aanraking nodig — SVG inline als data URI — 4 cirkels op de hoeken, half buiten beeld gesneden — opacity 15% via SVG fill/stroke opacity attribuut */ .sale-of-the-day-offer::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; /* 7 % cirkels verdeeld over de volledige breedte: L-boven groot | midden-boven middel | R-boven groot L-midden klein | R-midden klein L-onder middel | R-onder groot opacity 0.22 voor iets meer aanwezigheid */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Ccircle cx='65' cy='65' r='61' fill='none' stroke='%230a6dbe' stroke-width='3.5' opacity='0.22'/%3E%3Ctext x='65' y='87' text-anchor='middle' font-family='Arial,sans-serif' font-size='64' font-weight='700' fill='%230a6dbe' opacity='0.22'%3E%25%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75' viewBox='0 0 75 75'%3E%3Ccircle cx='37' cy='37' r='34' fill='none' stroke='%230a6dbe' stroke-width='2.5' opacity='0.22'/%3E%3Ctext x='37' y='50' text-anchor='middle' font-family='Arial,sans-serif' font-size='36' font-weight='700' fill='%230a6dbe' opacity='0.22'%3E%25%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='51' fill='none' stroke='%230a6dbe' stroke-width='3' opacity='0.22'/%3E%3Ctext x='55' y='74' text-anchor='middle' font-family='Arial,sans-serif' font-size='54' font-weight='700' fill='%230a6dbe' opacity='0.22'%3E%25%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Ccircle cx='29' cy='29' r='26' fill='none' stroke='%230a6dbe' stroke-width='2' opacity='0.22'/%3E%3Ctext x='29' y='39' text-anchor='middle' font-family='Arial,sans-serif' font-size='27' font-weight='700' fill='%230a6dbe' opacity='0.22'%3E%25%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65' viewBox='0 0 65 65'%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%230a6dbe' stroke-width='2' opacity='0.22'/%3E%3Ctext x='32' y='44' text-anchor='middle' font-family='Arial,sans-serif' font-size='31' font-weight='700' fill='%230a6dbe' opacity='0.22'%3E%25%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Ccircle cx='44' cy='44' r='40' fill='none' stroke='%230a6dbe' stroke-width='2.5' opacity='0.22'/%3E%3Ctext x='44' y='59' text-anchor='middle' font-family='Arial,sans-serif' font-size='42' font-weight='700' fill='%230a6dbe' opacity='0.22'%3E%25%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='105' height='105' viewBox='0 0 105 105'%3E%3Ccircle cx='52' cy='52' r='48' fill='none' stroke='%230a6dbe' stroke-width='3' opacity='0.22'/%3E%3Ctext x='52' y='70' text-anchor='middle' font-family='Arial,sans-serif' font-size='50' font-weight='700' fill='%230a6dbe' opacity='0.22'%3E%25%3C/text%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: -35px 15px, 25% -22px, calc(100% + 18px) 10px, -20px 55%, calc(100% + 15px) 50%, 12% calc(100% + 18px), calc(100% - 15px) calc(100% + 20px); background-size: 130px, 75px, 110px, 58px, 65px, 88px, 105px; } /* Zorg dat content boven decoratie staat */ .sale-of-the-day-offer .sotd-wrapper { position: relative; z-index: 1; } /* ── Titel ─────────────────────────────────────── */ .sale-of-the-day-offer .title { display: block; font-family: 'Open Sans', Arial, sans-serif; font-size: 18px; font-weight: 700; text-align: center; margin: 0 0 18px; padding: 0 0 10px; color: #5cb85c; border-bottom: 1px solid #e5e7eb; text-transform: uppercase; letter-spacing: 0.5px; background: transparent; } .sale-of-the-day-offer .title strong { font-weight: 700; color: #111; font-size: 24px; } /* ── Wrapper clearfix reset ────────────────────── */ .sale-of-the-day-offer .sotd-wrapper::before, .sale-of-the-day-offer .sotd-wrapper::after { display: none; } /* ── Card ──────────────────────────────────────── */ .sale-of-the-day-offer .grid { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .07); padding: 20px 18px; border: 1px solid #e5e7eb; } /* ── Naam & timer volgorde ─────────────────────── */ .sale-of-the-day-offer .name-and-timer { display: flex; flex-direction: column-reverse; } /* ── Productnaam ───────────────────────────────── */ .sale-of-the-day-offer .product-name { margin: 0 0 10px; } .sale-of-the-day-offer .product-name a { font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; font-weight: 700; color: #111; line-height: 1.35; text-decoration: none; } .sale-of-the-day-offer .product-name a:hover { color: #444; } /* ── Afbeeldingsblok ───────────────────────────── */ .sale-of-the-day-offer .item-gallery { margin: 0 0 16px; position: relative; } .sale-of-the-day-offer .item-gallery .item-picture { max-width: 280px; border-radius: 6px; background: #fafafa; border: 1px solid #ebebeb; overflow: hidden; box-shadow: none; position: relative; } /* ── Kortingslabel op afbeelding ───────────────── */ .sale-of-the-day-offer .sotd-korting-label { position: absolute; top: 12px; right: 12px; z-index: 3; background: #0a6dbe; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); display: inline-flex; align-items: center; padding: 5px 10px; font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; font-weight: 700; color: #fff; line-height: 1; } /* ── Korte omschrijving ────────────────────────── */ .sale-of-the-day-offer .short-description { font-size: 13px; line-height: 1.55; color: #6b7280; margin: 0 0 16px; } /* ── Countdown timer ───────────────────────────── */ .sale-of-the-day-offer .countdown-timer { display: inline-flex; gap: 4px; margin-bottom: 16px; } .sale-of-the-day-offer .timer-group { width: 48px; max-width: 48px; margin: 0 3px; text-align: center; } .sale-of-the-day-offer .timer-info-box { display: block; height: 40px; line-height: 40px; font-size: 20px; font-weight: 700; background: #5cb85c; border-radius: 4px 4px 0 0; color: #fff; } .sale-of-the-day-offer .timer-info-text { display: block; border: 1px solid #e5e7eb; border-top: 0; border-radius: 0 0 4px 4px; height: 18px; line-height: 18px; font-size: 9px; font-weight: 600; color: #9ca3af; background: #f9fafb; text-transform: uppercase; letter-spacing: .4px; } /* ── Prijsblok ─────────────────────────────────── */ .sale-of-the-day-offer .prices { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; } .sale-of-the-day-offer .price.old-price { font-size: 14px; font-weight: 400; color: #9ca3af; text-decoration: line-through; } .sale-of-the-day-offer .price.actual-price { font-size: 28px; font-weight: 700; color: #0a6dbe; line-height: 1; } .sale-of-the-day-offer .discount-badge { display: inline-block; background: #5cb85c; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 4px; } .sale-of-the-day-offer .tax-shipping-info { font-size: 11px; color: #9ca3af; width: 100%; margin-top: 2px; } .sale-of-the-day-offer .sotd-saving-text { display: block; font-size: 12px; color: #0a6dbe; font-weight: 600; margin: 4px 0 16px; } /* ── "Bekijk al onze vakmandeals" link ─────────── */ .sale-of-the-day-offer .sotd-all-deals-link { position: relative; z-index: 1; text-align: left; padding: 10px 18px 14px; background: #fff; border-top: none; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; border-radius: 0 0 8px 8px; margin-top: -8px; } .sale-of-the-day-offer .sotd-all-deals-link a { font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; font-weight: 600; color: #0a6dbe; text-decoration: none; } .sale-of-the-day-offer .sotd-all-deals-link a:hover { text-decoration: underline; color: #085fa8; } /* ── CTA knop ──────────────────────────────────── */ .sale-of-the-day-offer .go-to-product-page { display: inline-flex; align-items: center; justify-content: center; padding: 11px 26px; background: #0a6dbe; color: #fff; font-weight: 700; font-size: 13px; border-radius: 4px; box-shadow: none; transition: background .2s; text-decoration: none; text-transform: none; letter-spacing: 0; line-height: 1; height: auto; } .sale-of-the-day-offer .go-to-product-page:hover { background: #085fa8; } /* ── Thumbnails ────────────────────────────────── */ .sale-of-the-day-offer .picture-thumbs a span { border: 1px solid #e5e7eb; border-radius: 4px; } .sale-of-the-day-offer .picture-thumbs a:hover span, .sale-of-the-day-offer .picture-thumbs .slick-current span { border-color: #5cb85c; } /* ── Slick slider ──────────────────────────────── */ .sale-of-the-day-offer .slick-dots button { width: 8px; height: 8px; background: #d1d5db; border: none; border-radius: 50%; } .sale-of-the-day-offer li.slick-active button { background: #5cb85c; } .sale-of-the-day-offer .slick-arrow:hover::before { color: #5cb85c; } /* ================================================ RESPONSIVE ================================================ */ /* 100% Fix voor Layout Shift (CLS) op Mobiel */ @media screen and (max-width: 599px) { /* Reserveer ruimte voor de Sales of the Day banner */ .sale-of-the-day-offer { display: block; padding: 14px 10px; margin: 0 -10px 20px; min-height: 320px; } .sale-of-the-day-offer .grid { padding: 12px 12px 16px; } .sale-of-the-day-offer .sale-item { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "image name" "image info"; column-gap: 12px; } .sale-of-the-day-offer .name-and-timer { grid-area: name; align-self: start; margin-bottom: 6px; flex-direction: column-reverse; } .sale-of-the-day-offer .item-gallery { grid-area: image; margin: 0; align-self: start; } .sale-of-the-day-offer .item-gallery .item-picture { max-width: 120px; width: 120px; border-radius: 6px; } .sale-of-the-day-offer .overview { grid-area: info; align-self: start; } .sale-of-the-day-offer .short-description, .sale-of-the-day-offer .picture-thumbs { display: none; } .sale-of-the-day-offer .sotd-korting-label { font-size: 9px; padding: 3px 5px; top: 6px; right: 6px; } .sale-of-the-day-offer .product-name { margin-bottom: 6px; } .sale-of-the-day-offer .product-name a { font-size: 13px; line-height: 1.3; } .sale-of-the-day-offer .countdown-timer { margin-bottom: 8px; gap: 2px; } .sale-of-the-day-offer .timer-group { width: 36px; margin: 0 1px; } .sale-of-the-day-offer .timer-info-box { height: 30px; line-height: 30px; font-size: 14px; } .sale-of-the-day-offer .timer-info-text { font-size: 7px; height: 14px; line-height: 14px; } .sale-of-the-day-offer .prices { gap: 4px; margin-bottom: 2px; } .sale-of-the-day-offer .price.old-price { font-size: 11px; } .sale-of-the-day-offer .price.actual-price { font-size: 15px; line-height: 1.1; } .sale-of-the-day-offer .discount-badge { font-size: 10px; padding: 3px 6px; } .sale-of-the-day-offer .tax-shipping-info { font-size: 10px; } .sale-of-the-day-offer .sotd-saving-text { font-size: 11px; margin: 2px 0 8px; } .sale-of-the-day-offer .go-to-product-page { width: 100%; padding: 9px 10px; font-size: 12px; } .sale-of-the-day-offer .grid { min-height: 0 !important; } .sale-of-the-day-offer .name-and-timer, .sale-of-the-day-offer .overview, .sale-of-the-day-offer .item-gallery { min-height: 0 !important; } .sale-of-the-day-offer .sale-item { align-items: start; } .sale-of-the-day-offer .picture-thumbs { display: none !important; } } /* ── Tablet: horizontaal grid (600px–1279px) ───── */ @media all and (min-width: 600px) and (max-width: 1279px) { .sale-of-the-day-offer .picture-thumbs { display: none; } .sale-of-the-day-offer .grid { padding: 18px 20px; } .sale-of-the-day-offer .sale-item { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "image name" "image info"; column-gap: 24px; } .sale-of-the-day-offer .name-and-timer { grid-area: name; align-self: start; margin-bottom: 8px; } .sale-of-the-day-offer .item-gallery { grid-area: image; margin: 0; align-self: center; } .sale-of-the-day-offer .item-gallery .item-picture { max-width: 220px; width: 220px; } .sale-of-the-day-offer .overview { grid-area: info; align-self: start; } .sale-of-the-day-offer .short-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; margin-bottom: 12px; } .sale-of-the-day-offer .prices { margin-bottom: 4px; } .sale-of-the-day-offer .sotd-saving-text { margin-bottom: 10px; } .sale-of-the-day-offer .countdown-timer { margin-bottom: 10px; } } /* ── Tablet padding override (768px) ──────────── */ @media all and (min-width: 768px) { .sale-of-the-day-offer { padding: 30px 20px; margin: 0 -20px 30px; } .sale-of-the-day-offer .grid { padding: 25px 22px; } .sale-of-the-day-offer .title { font-size: 20px; } .sale-of-the-day-offer .product-name a { font-size: 20px; } .sale-of-the-day-offer .timer-group { width: 54px; } .sale-of-the-day-offer .timer-info-box { height: 44px; line-height: 44px; font-size: 22px; } } /* ── Desktop medium (1024px) ───────────────────── */ @media all and (min-width: 1024px) { .sale-of-the-day-offer { padding: 30px 50px; } } /* ── Desktop groot (1280px) ────────────────────── */ @media all and (min-width: 1280px) { .sale-of-the-day-offer { padding: 35px 70px; margin: 0 -6vw 30px; } .sale-of-the-day-offer .grid { padding: 28px 30px 1px 30px; } .sale-of-the-day-offer .item-gallery .item-picture { max-width: 340px; } } /* ── Widescreen (1600px) ───────────────────────── */ @media all and (min-width: 1600px) { .sale-of-the-day-offer { padding: 35px 175px; } .sale-of-the-day-offer .grid { padding: 30px 40px 0 40px; } .sale-of-the-day-offer .item-gallery .item-picture { max-width: 380px; } } /* ================================================ SALE OF THE DAY einde - DHZ-Proshop ================================================ */ /* ===== Mobiel ===== */ @media (max-width: 768px) { .dhz-topbar-inner { padding: 9px 14px; } .dhz-topbar-left { display: none; } .dhz-topbar-ticker { display: block; position: relative; overflow: hidden; height: 28px; width: 100%; } .dhz-topbar-right { display: none; } } @media (max-width:768px){ .dhz-benefits__row{padding:0} .dhz-benefits__list{display:none} .dhz-benefits__ticker{display:block} } @media (prefers-reduced-motion: reduce){ .dhz-ticker__line{position:static;transform:none;opacity:1} } body { font: normal 12px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; } .html-widget customized-info-boxes { display: none; } .category-navigation-list-wrapper { border-left: 3px solid #ffffff; } .home-page .topic-block-body h1 { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .home-page .jCarouselMainWrapper.small-products { margin: 50px 0 30px 0 !important } .header-menu-parent { margin-bottom: 5px } .master-wrapper-content { min-height: 800px; } .header-menu>ul>li>a { color: #404040; } .header-menu>ul>li>a:hover { color: var(--site-blue); } .nop-jcarousel .carousel-title { font-size: 17px } .header-selectors-wrapper select { color: #ffffff; } .overview .delivery { padding: 15px 5px 15px 5px; background-color: #f6f6f6; border: 1px solid #0a6dbe; } .overview .add-to-wishlist button { text-transform: none; } .tax-display-type-selector:before { color: #ffffff; width: 100%; aspect-ratio: auto 1 / 1; } .header-selectors-wrapper select option { color: #404040; } .header-links a { color: #404040; } .header-links a:before { color: #404040; } .header-logo a img { aspect-ratio: auto 225 / 45; width: 100%; } .category-navigation-title { color: #404040; } .category-navigation-list-wrapper ul li a { color: #404040; } .responsive-nav-wrapper>div>a:before { color: #404040; } .responsive-nav-wrapper>div>span:before { color: #404040; } .ico-cart .cart-label { font-weight: normal; } .ui-tabs .ui-tabs-panel { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16); background-color: #FFF; } .ui-tabs .ui-tabs-nav li a { text-transform: none !important; } .productTabs-body a.ui-tabs-anchor { color: var(--site-blue); } .full-description, .product-specs-box { background-color: #FFF } .full-description p { font-size: 15px; } .attachment-category ul { Text-align: left; } .file-attachments ul li a.attachmentLinkImg { width: 50px; max-height: 50px; } .category-grid .item-box .title a { font-size: 15px; color: var(--site-blue); } .category-page .category-grid .sub-category-item { border: 1px solid #eee; border-radius: 3px; } .category-page .category-grid .sub-category-item:hover { border-color: #ddd; } .category-navigation-list .box { border: 1px solid #eee; border-radius: 3px; } .category-navigation-list .box:hover { border-color: #ddd; } .category-page .category-grid .sub-category-item:hover { border-color: #ddd; } .search-box .search-box-button { background-color: var(--site-blue); } .search-box .search-box-button:hover { background-color: #0081ff; } .product-details-page .related-products-grid { display: none; } .blogpost-page .related-products-grid { margin-top: 40px; } .jCarouselMainWrapper { margin-top: 30px } .jCarouselMainWrapper .product-grid { padding-top: 10px; padding-bottom: 20px; } .center-2 .nop-jcarousel .carousel-title { font-size: 22px; } .nop-jcarousel .carousel-title strong { color: #111111; } .search-page .page-title { display: none; } .file-attachments ul li a.attachmentLink { font-size: 14px; padding-left: 10px; } .blog-post-page .related-products-grid { display: none; } .blog-post .post-body p { font-size: 15px; } .file-attachments .title { display: none; } .blog-page .tags, .blogpost-page .tags { display: none; } .product-tags-box { display: none; } .advantages-item .title { text-transform: none !important; } .bar-notification.success { background-color: #5cb85c; } .manufacturer-description h2, .manufacturer-description h3, .manufacturer-description h4 { color: #111 !important; } .breadcrumb li { font-size: 12px; } .product-name h1 { font-size: 18px } .item-box .product-title, .item-box .title { font-size: 13px; } .item-box .button-2 { text-transform: none; } .button-1 { text-transform: none; } div.block.block-popular-tags { display: none; } .mini-shopping-cart .name a { font-size: 12px; } .productAddedToCartWindowSummary a { text-transform: none; background-color: #f6f6f6; border: 1px solid #f6f6f6; } .productAddedToCartWindowSummary a:hover { background-color: #f6f6f6; border: 1px solid #0a6dbe; color: #0a6dbe; } .ajaxCart .product-name, .ajaxCart .productAddedToCartWindowTitle, .ajaxCart .k-window-title { font-size: 18px; text-align: left; } .ajaxCart .product-grid .title { font-size: 18px; text-align: left; } .miniProductDetailsView .short-description { font-size: 13px; } .miniProductDetailsView .overview .product-price { font-size: 20px } .productTabs .full-description, .productTabs .product-specs-box { margin: 0; padding: 0; text-align: left; } .overview .old-product-price span, .overview .old-product-price label, .variant-overview .old-product-price span, .variant-overview .old-product-price label { font-size: 14px; } .miniProductDetailsView .product-variant-name, .productAddedToCartWindowDescription h1 a { font-size: 16px; text-transform: none; } .overview .add-to-cart-button, .variant-overview .add-to-cart-button { font-size: 15px; } .quickViewWindow .product-name { font-size: 18px; } .quickViewWindow .links-panel a { background-color: #f6f6f6; border: 1px solid #f6f6f6; text-transform: none; font-size: 18px; font-weight: 500; } .quickViewWindow .links-panel a:hover { color: #0a6dbe; border: 1px solid #0a6dbe; background-color: #f6f6f6; } .quickViewWindow .popup-header { text-align: left; } .quickViewWindow .product-grid .title { text-align: left; } .quickViewWindow .overview .add-to-wishlist button { border: 1px solid #f6f6f6; background-color: #f6f6f6; } .quickViewWindow .overview .add-to-wishlist button:hover { background-color: #f6f6f6; } .quickViewWindow .links-panel a:hover:after { color: #0a6dbe; } .quickViewWindow .product-grid .item-box .title, .quickViewWindow .product-grid .item-box .product-title:hover { color: #0a6dbe; } .wishlist-content .button-2 { background-color: #f6f6f6; border: 1px solid #f6f6f6; } .wishlist-content .button-2 { background-color: #f6f6f6; border: 1px solid #f6f6f6; } .wishlist-content .button-2:hover { background-color: #f6f6f6; border: 1px solid #0a6dbe; color: #0a6dbe; } .wishlist-page .share-info a:hover { text-decoration: underline; } .product-collateral .title { text-transform: none; } .compare-products .add-to-compare-list-button { display: block; width: 45px; height: 45px; border: none; border-radius: 3px; font-weight: bold; color: #8c8c8c; font-size: 0; text-transform: none; text-align: center; background-color: #f6f6f6; transition: all .1s ease; margin-top: 15px; border: 1px solid #f6f6f6; } .compare-products .add-to-compare-list-button:hover { border: 1px solid #0a6dbe; color: #0a6dbe; } .overview .add-to-compare-list-button { width: 100%; font-size: 13px; } .overview .add-to-wishlist button { background-color: #f6f6f6; border: 1px solid #f6f6f6; } .overview .add-to-wishlist button:hover { border: 1px solid #0a6dbe; color: #0a6dbe; background-color: #f6f6f6; } .overview .add-to-wishlist button:hover:before { color: #0a6dbe; } .overview .add-to-cart { margin: 0 auto 25px; } .overview .stock, .variant-overview .stock { color: #0a6dbe; } .product-estimate-shipping { margin: 15px 0 10px 0; color: #8c8c8c; border: 1px solid #f6f6f6; padding: 15px 0 15px 0; } .delivery .delivery-date { color: #0a6dbe; } .overview .delivery { margin: 15px 0 15px; } .product-social-buttons { margin-bottom: 10px; } .product-details-total-price { background: #efefef; width: 100%; padding: 10px 20px; margin: 0 auto 15px !important; color: black; font-size: 18px; border-radius: 8px; } .product-details-total-price span { font-size: 14px; } /* Google Captcha */ .grecaptcha-badge { bottom: 110px !important; } /* cart */ .estimate-shipping-row-item #StateProvinceId, .estimate-shipping-row-item #ZipPostalCode, #updatecart { display: none; } .checkout-attributes textarea { width: 100%; } .cart td { padding: 20px 10px; } .cart td.quantity { min-width: 150px; } .cart td.quantity .qty-input { border-left: none; border-right: none; } .cart .qty-input, .cart .qty-dropdown { width: 60px; } .increase-qty, .decrease-qty { border: 1px solid #e7e7e7; background: none; height: 40px; vertical-align: middle; } .increase-qty:before, .decrease-qty:before { display: block; font-size: 15px; color: #8e8e8e; padding: 0 3px; } .increase-qty:before { content: "i"; } .decrease-qty:before { content: "h"; } /* Order Completed */ .order-completed .details { border: none; } /* Registration Page */ .registration-page .form-fields { text-align: left; } .hidden { display: none !important; } #company { text-align: left; } #company>.inputs { display: inline-block; min-width: 125px; } .sale-of-the-day-offer .go-to-product-page { line-height: 25px; } .valid { /* border: 1px solid #96CC39 !important; */ clear: none; } .valid+.valid-icon { position: absolute; top: 6px; right: 15px; width: 14px; height: 14px; } .valid+.valid-icon:before { display: block; } .valid-icon:before { font-family: "emporium-icons"; content: "0"; display: none; font-size: 6px; font-weight: bold; background: var(--dhz-blue); color: white; border-radius: 50%; text-align: center; padding: 2px; } .address-edit-page .valid+.valid-icon { top: 35px; } .address-edit-page .inputs>.required { top: 25px; right: -10px; } .ajax-cart-button-wrapper { display: inline; } .login-popup { width: 360px; } .login-popup .returning-wrapper .form-fields { padding: 30px 20px; } .login-popup .inputs.reversed label { margin-left: 20px; } .login-popup .inputs.reversed label:before { content: none; } .login-popup .remember-me { width: 50%; float: left; } .login-popup .forgot-password { text-align: right; clear: none; float: right; } #RememberMe1 { left: 0; } .ico-address:before { content: "N"; } .ico-orders:before { content: "d"; } /* Hide extra content */ .extra-content { display: none; } .content-button { background: var(--site-blue); padding: 10px 20px; border-radius: 3px; color: white; border: none; margin: 5px 0px; font-size: 15px; } .register-link { display: inline-block; padding: 0px 20px 10px; } .item-box .buttons { display: block; } .product-essential .breadcrumb li:last-child, .product-essential .breadcrumb li:nth-last-child(2) .delimiter { display: none; } .back-button { margin-bottom: 20px; } .back-button a { background-color: #f1f1f1; padding: 10px 20px 10px 20px; color: var(--site-blue); border-radius: 3px; text-transform: none; font-weight: 700; } .back-button a:hover { background-color: #e6e6e6; } /* oude order-details-tabel-regel verwijderd — nieuwe tabel (.dhz-od-ptbl) wordt in dhz-account-hub.css gestyled */ .filter-show-more { color: var(--site-blue) !important; } .filter-show-more:hover { text-decoration: underline; } .order-items-button { margin-left: 10px; } .section.order-item { height: auto !important; } .order-item .table-wrapper { display: none; margin-top: 20px; } .order-items-button:before { content: "1"; font-family: "emporium-icons"; font-size: 16px; } .order-item .data-table th, .order-item .data-table td { font-size: 14px; padding: 10px; } .order-item .data-table .quantity { width: 50px; } .order-item .data-table .sku { width: 120px; } .html-widget .home-page-advantages { margin: auto; } .html-widget .advantages-item { display: none; padding: 10px 30px 10px 40px; width: 100%; } .html-widget .advantages-item .picture { width: 40px; height: 40px; } .html-widget .advantages-item>div { display: inline-block; vertical-align: middle; } .html-widget .advantages-item .info { width: calc(100% - 55px); padding-left: 10px; } .html-widget .home-page-advantages .description { display: none; } .profile-menu-box.login-popup a { font-size: 13px; } .order-summary-content .nop-jcarousel.product-grid { display: none; } .shopping-cart-page .nop-jcarousel.product-grid { display: block; } .termly-display-preferences { color: white; font-size: 13px; padding: 5px 10px; border: 1px solid white; margin: 0px 10px; } @media all and (min-width: 1921px) { .html-widget .advantages-item { width: 25% !important; display: inline-block; } } @media (min-width: 1281px) { .product-name h1 { font-size: 18px } .overview .prices { margin: 20px 0 20px; } } @media all and (min-width: 1025px) { .mobile-flyout-wrapper { padding-left: 20px; } .header-links a { font-size: 13px; } .header-menu>ul>li>a, .header-menu>ul>li>span { text-transform: none; font-size: 14px; } .category-navigation-title { font-size: 15px; text-transform: none; } .mini-shopping-cart .quantity { font-size: 12px; } .mini-shopping-cart .quantity span { font-size: 12px } .order-progress a { font-size: 14px; padding-top: 80px; } .logged-in .ico-account.opener:after, .logged-out .ico-account.opener:after { padding: 4px; border-radius: 8px; color: white; position: absolute; top: -5px; left: 40px; font-size: 8px; } .logged-in .ico-account.opener:after { content: "0"; background: var(--site-blue); } .logged-out .ico-account.opener:after { content: "v"; background: gray; } .login-popup .title { padding: 10px 20px 0px; } .login-popup .title strong, .profile-menu-box .title strong { color: #5cb85c !important; font-weight: bold !important; font-size: 18px; } .profile-menu-box .close-side-menu { display: block; background: none; } .logged-in .profile-menu-box { width: 200px; } .logged-in .profile-menu-box .title { padding: 10px 20px 20px; } .block-account-navigation.block .listbox { text-align: left; } .block-account-navigation.block .list a { padding: 15px 15px 15px 40px; } .block-account-navigation.block .list a:after { content: none; } .block-account-navigation.block .list a:before { position: absolute; top: 50%; left: 0px; right: unset; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; vertical-align: middle; margin-left: 5px; font-family: "emporium-icons"; font-size: 20px; font-weight: normal; text-transform: none; color: #b7b7b7; transition: all .2s ease; } .block-account-navigation .customer-info a:before { content: "a"; } .block-account-navigation .customer-addresses a:before { content: "N"; } .block-account-navigation .customer-orders a:before { content: "d"; } .block-account-navigation .change-password a:before { content: "x"; } .block-account-navigation .customer-reviews a:before { content: "S"; } .block-account-navigation .customer-gdpr a:before { content: "\e90a"; } .block-account-navigation .return-requests a:before { content: "\4f"; } .order-details-page .products table .shipped-quantity { width: 65px; } .order-details-page .products table .open-shipping-quantity, .order-details-page .products table .total, .order-details-page .products table .sku, .order-details-page .products table .price, .order-details-page .products table .eta { width: 100px; } .order-details-page .products table .product { min-width: 250px; } .html-widget .home-page-advantages { padding: 0px; } .html-widget .advantages-item { width: 50%; } .html-widget .advantages-item .picture { width: 60px !important; height: 60px !important; } .html-widget .advantages-item .picture { margin-bottom: 0px; } .html-widget .advantages-item .info { width: calc(100% - 65px); } } @media all and (min-width: 769px) { .product-details-page { text-align: center; } .custom-tab .product-faq { text-align: left !important; } .nop-jcarousel .carousel-title { font-size: 22px; } .display-inline { display: inline-block; } .inputs.display-inline { width: calc(50% - 17px); } .margin-r-30 { margin-right: 30px; } .html-widget .advantages-item .picture { width: 40px; height: 40px; } .html-widget .advantages-item>div { display: inline-block; vertical-align: middle; } .html-widget .advantages-item .info { width: calc(100% - 67px); padding-left: 30px; text-align: left; } } @media all and (max-width: 768px) { .prev, .next { cursor: pointer; position: absolute; top: 30%; width: auto; padding: 1px 8px; color: #808080; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 14px; } /* Position the "next button" to the right */ .next { right: 0; } .next:before { content: "j"; } .prev { left: 0; } .prev:before { content: "k"; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; } /*@keyframes fade { from { opacity: .4 } to { opacity: 1 } }*/ } @media screen and (max-width:1024px) { .cart td.quantity label { display: none; } .termly-parent { margin-top: 15px !important; } } /* ========================================================= DHZ-proshop — BLOG opmaak (geoptimaliseerd, CSS-only) — opgeschoond Eén stylesheet voor: bloglijst + blogdetail + .dhz-guide content. Zelfde klassennamen → bestaande posts blijven werken. Plaatsing: in je thema-/custom-CSS, NA de thema-CSS. Opbouw: 1) bloglijst + thema-aanpassingen 2) blogdetail (kop/datum/hero) 3) .dhz-guide componenten (basis-uitzicht) 4) THEMA-OVERRIDES (!important) — alle fixes op één plek, gebundeld. Bewust op ".blogpost-page .post-body" (NIET ".dhz-guide"), zodat ze ook werken als de .dhz-guide-wrapper in een post brak is. 5) responsive ========================================================= */ /* ---------- design tokens (alleen binnen blog) ---------- */ .dhz-guide, .blog-page, .blogpost-page{ --bl:#1b63d6; --bl-dark:#1450b0; --bl-soft:#eef4fd; --ink:#16202e; --tx:#3f4b5b; --mut:#8b97a6; --line:#e6eaf0; --hair:#eef1f5; --soft:#f6f8fb; --amber:#e0a020; --amber-soft:#fff8e6; --amber-line:#f0e2b6; --r:12px; --shadow:0 4px 16px rgba(20,40,80,.05); --shadow-h:0 10px 26px rgba(20,40,80,.10); } /* ========================================================= 1) BLOGLIJST + ALGEMENE THEMA-AANPASSINGEN ========================================================= */ .page.blog-page .page-title, .page.blog-page .page-title h1{display:none!important} .page.blog-page .page-body{margin-top:0!important;padding-top:0!important} .block-blog-archive{display:none!important} /* tag-chips */ .block-popular-blogtags .listbox ul{display:flex;flex-wrap:wrap;gap:8px;max-height:220px;overflow:auto;padding:0;margin:0} .block-popular-blogtags .listbox li{list-style:none;margin:0} .block-popular-blogtags .listbox a{display:inline-flex;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;line-height:1;text-decoration:none;color:var(--tx);transition:.15s} .block-popular-blogtags .listbox a:hover{border-color:var(--bl);color:var(--bl);background:var(--bl-soft)} .block .tags li a,.product-tags-all-page li a{line-height:15px!important} /* lijst-cards: gelijke beeldhoogte + tekstruimte */ .blog-posts .post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:.15s} .blog-posts .post:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)} .blog-posts .post .post-details{display:flex;flex-direction:column;flex-grow:1;padding:14px 16px 16px} .blog-posts .post .buttons{margin-top:auto} .blog-posts .post .rich-blog-image{height:200px;overflow:hidden} .blog-posts .post .rich-blog-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s} .blog-posts .post:hover .rich-blog-image img{transform:scale(1.04)} .blog-posts .post .read-comments{display:inline-block;margin-bottom:10px} .blog-posts .post a.post-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.25;min-height:calc(1.25em * 2);font-weight:700;color:var(--ink)} .blog-posts .post a.post-title:hover{color:var(--bl)} .blog-posts .post .post-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;line-height:1.5;min-height:calc(1.5em * 4);color:var(--tx);font-size:14px} .post-date+.read-comments{margin-left:0!important} /* ========================================================= 2) BLOGDETAIL — kop, datum, hero-afbeelding ========================================================= */ .blogpost-page .page-title h1{text-align:left;color:var(--ink);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:4px 0 6px} .blogpost-page .post-date{color:var(--mut);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em} .blogpost-page .post-body img{max-width:100%;height:auto;border-radius:14px} /* ========================================================= 3) .dhz-guide — basis-typografie + componenten ========================================================= */ .dhz-guide{margin:26px 0 0;color:var(--tx);line-height:1.7;font-size:15px;max-width:1200px;text-align:left} .dhz-guide h2{font-size:21px;line-height:1.25;margin:0 0 14px;color:var(--ink);font-weight:700;letter-spacing:-.01em;text-align:left} .dhz-guide h3{font-size:16.5px;line-height:1.3;margin:22px 0 8px;color:var(--ink);font-weight:600;text-align:left} .dhz-guide p{margin:0 0 14px;text-align:left} .dhz-guide ul,.dhz-guide ol{margin:0 0 14px;padding-left:22px;text-align:left} .dhz-guide li{margin:0 0 8px;text-align:left} .dhz-guide a{color:var(--bl);text-decoration:none;font-weight:500} .dhz-guide a:hover{text-decoration:underline} .dhz-guide strong{color:var(--ink)} .dhz-guide-hero{padding:0 0 6px} .dhz-guide-hero h1,.dhz-guide-hero h1 span{font-size:26px;line-height:1.22;font-weight:700;letter-spacing:-.2px;color:var(--ink);padding-bottom:10px} /* "kort antwoord" callout (zonder ::before-label — thema zet icoonfont op ::before) */ .dhz-direct-answer{position:relative;font-size:15.5px;line-height:1.65;color:var(--ink);background:var(--bl-soft);border:1px solid #d9e6fb;border-left:4px solid var(--bl);padding:14px 18px 16px;border-radius:0 10px 10px 0;margin:0 0 16px} /* sprongnavigatie (chips) */ .dhz-guide-nav{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px} .dhz-guide-nav a{font-size:13px;font-weight:600;text-decoration:none;color:var(--bl);border:1px solid #d8e2f0;border-radius:999px;padding:6px 13px;background:#fff;transition:.15s} .dhz-guide-nav a:hover{background:var(--bl);color:#fff;border-color:var(--bl);text-decoration:none} /* inhoudskaart */ .dhz-guide-card{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:22px 22px 10px;margin:0 0 18px;box-shadow:var(--shadow)} /* tip-blok */ .dhz-tip{position:relative;background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:10px;padding:13px 15px 13px 44px;margin:15px 0px 10px 0px;font-size:14px;line-height:1.6;color:#5b4a16} .dhz-tip::before{content:'💡';position:absolute;left:14px;top:12px;font-size:16px;line-height:1} /* vergelijkingstabel (overschrijft inline-styles) */ .dhz-table-wrapper{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .dhz-compare-table{border-collapse:collapse;width:100%;background:#fff;font-size:14px} .dhz-compare-table th,.dhz-compare-table td{padding:11px 14px!important;border:none!important;border-bottom:1px solid var(--line)!important;text-align:left!important;vertical-align:top} .dhz-compare-table thead th{background:var(--soft)!important;font-weight:700;color:var(--ink)} .dhz-compare-table tbody tr:nth-child(even){background:#fbfcfe} .dhz-compare-table tbody tr:hover{background:var(--bl-soft)} .dhz-compare-table tbody td:first-child{font-weight:600;color:var(--ink)} .dhz-compare-table tbody tr:last-child td{border-bottom:none!important} /* keuzegrid */ .dhz-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:4px 0 16px} .dhz-choice-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:16px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.15s} .dhz-choice-item:hover{border-color:#c4d4ee;box-shadow:var(--shadow-h);transform:translateY(-2px)} .dhz-choice-top{display:flex;align-items:center;gap:11px;margin:0 0 9px} .dhz-icon{font-size:20px;line-height:1;width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--bl-soft);border-radius:10px} .dhz-choice-title{font-weight:700;font-size:14.5px;color:var(--ink)} .dhz-choice-text{flex:1;margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--tx)} .dhz-choice-cta a{font-size:13px;font-weight:600;text-decoration:none;color:var(--bl);display:inline-flex;align-items:center;gap:4px;transition:gap .15s} .dhz-choice-cta a:hover{gap:8px;text-decoration:none} /* expert-bullets (basis-uitzicht; thema-bolletje wordt in sectie 4 weggehaald) */ .dhz-expert-bullets{list-style:none;padding-left:0} .dhz-expert-bullets li{position:relative;padding:9px 12px 9px 34px;background:var(--soft);border:1px solid var(--hair);border-radius:9px;margin:0 0 8px;font-size:14px;line-height:1.55} .dhz-expert-bullets li::before{content:'✓';position:absolute;left:13px;top:9px;color:var(--bl);font-weight:700} /* FAQ (accordeon met eigen chevron) */ .dhz-guide-faq details{border:1px solid var(--line);border-radius:10px;background:#fff;margin:0 0 9px;overflow:hidden;transition:.15s} .dhz-guide-faq details[open]{border-color:#c4d4ee;box-shadow:var(--shadow)} .dhz-guide-faq summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink);padding:13px 44px 13px 16px;position:relative;list-style:none} .dhz-guide-faq summary::-webkit-details-marker{display:none} .dhz-guide-faq summary:hover{color:var(--bl)} .dhz-guide-faq summary::after{content:'';position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:translateY(-65%) rotate(45deg);transition:transform .2s,border-color .2s} .dhz-guide-faq details[open] summary{border-bottom:1px solid var(--line)} .dhz-guide-faq details[open] summary::after{transform:translateY(-35%) rotate(-135deg);border-color:var(--bl)} .dhz-guide-faq details > div{padding:12px 16px 14px;font-size:14px;line-height:1.65;color:var(--tx)} .blogpost-page .rich-blog-image img{width:100%;height:auto;display:block} /* advieslijst met bolletjes */ .dhz-guide .dhz-advice-list{padding-left:18px;list-style:disc} /* ========================================================= 4) THEMA-OVERRIDES — alle fixes gebundeld (winnen van Emporium) Scope = .blogpost-page .post-body (robuust, ook bij brakke .dhz-guide). ========================================================= */ /* typografie: thema forceert font/lijnhoogte in .post-body */ .blogpost-page .post-body .dhz-guide p, .blogpost-page .post-body .dhz-guide li, .blogpost-page .post-body .dhz-guide ul, .blogpost-page .post-body .dhz-guide ol, .blogpost-page .post-body .dhz-guide-faq details > div{font-size:15px!important;line-height:1.7!important;color:var(--tx)!important} /* alinea-ritme herstellen + thema-indent (padding:0 5px) weg */ .blogpost-page .post-body .dhz-guide p{margin:0 0 14px!important} .blogpost-page .post-body .dhz-guide p:not(.dhz-direct-answer){padding:0!important} /* antwoordblok (een

): padding/marge terug */ .blogpost-page .post-body .dhz-direct-answer{padding:14px 18px 16px!important;margin:0 0 16px!important} /* kaarttitel: korte, dikkere lijn ONDER de titel (i.p.v. thema-onderlijn) */ .blogpost-page .post-body .dhz-guide-card > h2:first-child{display:inline-block!important;border-top:0!important;border-bottom:3px solid var(--bl)!important;padding-bottom:8px!important;margin-bottom:14px!important} /* FAQ: thema +/- marker weg (onze chevron blijft) */ .blogpost-page .post-body .dhz-guide-faq summary::before{content:none!important;display:none!important} .blogpost-page .post-body .dhz-guide-faq summary{font-size:14.5px!important;line-height:1.4!important;color:var(--ink)!important;list-style:none!important} /* expert-bullets: thema-bolletjes weg; eigen ✓ in normaal lettertype */ .blogpost-page .post-body .dhz-expert-bullets, .blogpost-page .post-body .dhz-expert-bullets li{list-style:none!important;margin-left:0!important;padding-left:0!important} .blogpost-page .post-body .dhz-expert-bullets li{padding:9px 12px 9px 34px!important} .blogpost-page .post-body .dhz-expert-bullets li::marker{content:''!important;font-size:0!important} .blogpost-page .post-body .dhz-expert-bullets li::before{content:'✓'!important;font-family:Arial,Helvetica,sans-serif!important;color:var(--bl)!important} /* tip-icoon in normaal (emoji)lettertype */ .blogpost-page .post-body .dhz-tip::before{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",Arial,sans-serif!important} /* ========================================================= 5) RESPONSIVE ========================================================= */ @media (max-width:768px){ .dhz-guide{font-size:14.5px} .dhz-guide h2{font-size:19px} .dhz-guide-card{padding:18px 16px 8px} .dhz-guide-hero h1,.dhz-guide-hero h1 span{font-size:20px;line-height:1.25} .blogpost-page .page-title h1{font-size:22px} } @media (max-width:481px){ .dhz-guide-hero h1,.dhz-guide-hero h1 span{font-size:18px;line-height:1.25;letter-spacing:0} .dhz-choice-grid{grid-template-columns:1fr} .dhz-guide-nav a{font-size:12.5px;padding:5px 11px} } /* ========================================================= DHZ SEO/GEO blocks (advies + FAQ) - herbruikbaar ========================================================= */ .dhz-seo-wrap { margin: 24px 0 10px; font-size: 16px; line-height: 1.75; } .dhz-seo-card { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; padding: 18px; margin: 0 0 16px; } .dhz-seo-card h2 { margin: 0 0 10px !important; line-height: 1.25; font-size: 22px !important; font-weight: 700; } .dhz-seo-card p { margin: 0 0 10px !important; line-height: 1.75 !important; font-size: 14px !important; } .dhz-advice-list { margin: 0 !important; padding-left: 18px !important; line-height: 1.9; font-size: 14px; } .dhz-advice-list li { margin: 0 0 6px; } .dhz-advice-list li:last-child { margin-bottom: 0; } .dhz-seo-accordion details { padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .08); } .dhz-seo-accordion details:first-of-type { border-top: 0; padding-top: 0; } .dhz-seo-accordion summary { list-style: none; cursor: pointer; font-weight: 600; line-height: 1.45; outline: none; position: relative; padding-left: 18px; } .dhz-seo-accordion summary::-webkit-details-marker { display: none; } .dhz-seo-accordion summary:before { content: "+"; position: absolute; left: 0; top: 0; color: var(--site-blue, #0a6dbe); font-weight: 800; } .dhz-seo-accordion details[open] summary:before { content: "–"; } .dhz-seo-accordion summary:hover { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); } .dhz-seo-accordion details>div { margin-top: 8px; line-height: 1.65; color: rgba(0, 0, 0, .78); font-size: 14px; } .dhz-seo-accordion a { color: var(--site-blue, #0a6dbe); text-decoration: none; } .dhz-seo-accordion a:hover { text-decoration: underline; } /* ========================================================= DHZ GUIDE tabel mobiel scrollbaar ========================================================= */ .dhz-guide .dhz-table-wrapper { margin-top: 12px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dhz-guide table.dhz-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; } .dhz-guide table.dhz-compare-table th, .dhz-guide table.dhz-compare-table td { text-align: left !important; vertical-align: top; } @media (max-width: 768px) { .dhz-guide table.dhz-compare-table { min-width: 720px; } } /* ========================================================= DHZ Adviespagina template (Topic pages) - .dhz-guide ========================================================= */ .dhz-guide { margin: 24px 0; } /* Links: blauw + geen underline, wél underline op hover */ .dhz-guide a { color: var(--site-blue, #0a6dbe); text-decoration: none; } .dhz-guide a:hover { text-decoration: underline; } .dhz-guide-hero { background: #FFF; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; padding: 22px; margin: 0 0 16px; } .dhz-guide-hero p { margin: 0 !important; font-size: 14px; line-height: 1.7; color: rgba(0, 0, 0, .78); max-width: none; } .dhz-guide-nav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; } .dhz-guide-nav a { display: inline-block; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); text-decoration: none; font-weight: 600; font-size: 13px; } .dhz-guide-nav a:hover { border-color: rgba(10, 109, 190, .35); text-decoration: none; } .dhz-guide-card { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; padding: 18px; margin: 0 0 16px; } .dhz-guide-card h2 { margin: 0 0 10px !important; font-size: 18px; line-height: 1.25; color: #111; font-weight: bold; } .dhz-guide-card p { margin: 0 0 10px !important; font-size: 14px; line-height: 1.75; color: rgba(0, 0, 0, .78); } /* Keuzehulp: per keuze 1 card (BELANGRIJK) */ .dhz-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:4px 0 16px} .dhz-choice-item { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; padding: 14px; } .dhz-choice-top { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; } .dhz-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(10, 109, 190, .10); display: flex; align-items: center; justify-content: center; font-size: 18px; } .dhz-choice-title { font-weight: 800; font-size: 14px; color: #111; line-height: 1.2; } .dhz-choice-text { font-size: 13px; line-height: 1.6; color: rgba(0, 0, 0, .75); margin: 0; } .dhz-choice-cta { margin-top: 10px; font-size: 13px; font-weight: 700; } /* FAQ op adviespagina */ .dhz-guide-faq details { padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .08); } .dhz-guide-faq details:first-of-type { border-top: 0; padding-top: 0; } .dhz-guide-faq summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.45; position: relative; padding-left: 18px; } .dhz-guide-faq summary::-webkit-details-marker { display: none; } .dhz-guide-faq summary:before { content: "+"; position: absolute; left: 0; top: 0; color: var(--site-blue, #0a6dbe); font-weight: 900; } .dhz-guide-faq details[open] summary:before { content: "–"; } .dhz-guide-faq summary:hover { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); } .dhz-guide-faq details>div { margin-top: 8px; font-size: 14px; line-height: 1.75; color: rgba(0, 0, 0, .78); } @media (max-width:768px) { .dhz-choice-grid { grid-template-columns: 1fr; } } /* ========================================================= DHZ Category Info – Clean (site-consistent) - .dhz-catinfo-clean ========================================================= */ .dhz-catinfo-clean { width: 100%; margin: 40px 0 60px; padding: 0; } .dhz-catinfo-clean .dhz-section { margin-bottom: 70px; } @media (max-width:992px) { .dhz-catinfo-clean .dhz-section { margin-bottom: 44px; } } .dhz-catinfo-clean .dhz-section:last-child { margin-bottom: 0; } .dhz-catinfo-clean h2 { font-size: 20px; line-height: 1.25; margin: 0 0 12px; color: #111; letter-spacing: -.1px; font-weight: 700; } .dhz-catinfo-clean p { font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, .72); margin: 0 0 12px; max-width: none !important; } .dhz-catinfo-clean a { color: var(--site-blue, #0a6dbe); text-decoration: none; } .dhz-catinfo-clean a:hover { text-decoration: underline; } /* HERO grid */ .dhz-catinfo-clean .dhz-question { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(18px, 4vw, 64px); align-items: start; padding: 10px 0 28px; margin: 0; } .dhz-catinfo-clean .dhz-hero-media { width: 100%; border-radius: 16px; overflow: hidden; background: #111; aspect-ratio: 16/9; box-shadow: 0 16px 46px rgba(0, 0, 0, .12); } .dhz-catinfo-clean .dhz-hero-media>img, .dhz-catinfo-clean .dhz-hero-media>iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; } /* Highlights bar */ .dhz-highlights-clean { margin: 18px 0 26px; padding: 12px 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); border-bottom: 1px solid rgba(0, 0, 0, .08); } .dhz-highlight { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 13px; line-height: 1.4; color: var(--site-blue, #0a6dbe); font-weight: 600; white-space: nowrap; } .dhz-highlight:before { content: "✓"; font-weight: 900; color: var(--site-blue, #0a6dbe); line-height: 1; } @media (max-width:992px) { .dhz-catinfo-clean .dhz-question { grid-template-columns: 1fr; gap: 16px; padding-bottom: 20px; } .dhz-highlights-clean { justify-content: flex-start; padding: 10px 0; } .dhz-highlight { width: 100%; padding: 8px 0; white-space: normal; } .dhz-highlight+.dhz-highlight { border-top: 1px solid rgba(0, 0, 0, .08); } } /* Topic cards */ .dhz-topics-clean { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } @media (max-width:992px) { .dhz-topics-clean { grid-template-columns: 1fr; } } .dhz-topic-clean { position: relative; display: block; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, .08); transition: box-shadow .18s ease; } .dhz-topic-clean:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .10); } .dhz-topic-clean img { width: 100%; height: 250px; object-fit: cover; display: block; } .dhz-topic-body { padding: 14px 14px 16px; } .dhz-topic-clean h3 { font-size: 15px; line-height: 1.25; margin: 0 0 6px; color: #111; font-weight: 700; } .dhz-topic-clean p { font-size: 14px; line-height: 1.6; margin: 0; color: rgba(0, 0, 0, .72); } .dhz-topic-clean .dhz-topic-overlay { position: absolute; inset: 0; z-index: 5; text-decoration: none !important; font-size: 0; color: transparent; } .dhz-topic-clean img, .dhz-topic-clean .dhz-topic-body { position: relative; z-index: 1; } .dhz-topic-clean a { cursor: pointer; } /* FAQ block (met beeld) */ .dhz-faq-clean { display: grid; grid-template-columns: .9fr 1.1fr; gap: 38px; align-items: start; } @media (max-width:992px) { .dhz-faq-clean { grid-template-columns: 1fr; gap: 20px; } } .dhz-faq-clean img { width: 100%; border-radius: 12px; display: block; object-fit: cover; box-shadow: 0 10px 26px rgba(0, 0, 0, .10); } @media (min-width:993px) { .dhz-catinfo-clean .dhz-faq-clean>div:first-child img { height: clamp(260px, 22vw, 360px) !important; object-fit: cover !important; object-position: center !important; } } .dhz-faq-clean details { padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, .08); } .dhz-faq-clean details:first-of-type { border-top: 0; padding-top: 0; } .dhz-faq-clean summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: #111; } .dhz-faq-clean summary::-webkit-details-marker { display: none; } .dhz-faq-clean summary:before { content: "+"; position: absolute; left: 0; top: 0; color: var(--site-blue, #0a6dbe); font-weight: 900; } .dhz-faq-clean details[open] summary:before { content: "–"; } .dhz-faq-clean summary:hover { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); } .dhz-faq-clean details>div { margin-top: 10px; font-size: 14px; line-height: 1.75; color: rgba(0, 0, 0, .72); max-width: 70ch; } /* ========================================================= DHZ – Adviesblok (onder categoriepagina) ========================================================= */ .dhz-catinfo-clean .dhz-advice-entry { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; gap: 18px !important; align-items: start !important; background: linear-gradient(180deg, #f3f7ff, #f7faff) !important; border-radius: 14px !important; padding: 18px 20px !important; margin: 40px 0 0 !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .06) !important; } .dhz-catinfo-clean .dhz-advice-entry h3 { margin: 0 0 6px !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.2 !important; color: #111 !important; } .dhz-catinfo-clean .dhz-advice-entry p { margin: 0 0 12px !important; font-size: 14px !important; line-height: 1.6 !important; color: rgba(0, 0, 0, .75) !important; max-width: none !important; } .dhz-catinfo-clean .dhz-advice-links { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid !important; gap: 6px !important; } @media (min-width:993px) { .dhz-catinfo-clean .dhz-advice-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 18px !important; row-gap: 8px !important; } } .dhz-catinfo-clean .dhz-advice-links li { margin: 0 !important; } .dhz-catinfo-clean .dhz-advice-links a { display: inline-flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 14px !important; font-weight: 400 !important; color: var(--site-blue, #0a6dbe) !important; text-decoration: none !important; } .dhz-catinfo-clean .dhz-advice-links a:hover { text-decoration: underline !important; } .dhz-catinfo-clean .dhz-advice-links a:before { content: "›" !important; font-size: 16px !important; opacity: .85 !important; line-height: 0.5 !important; margin-top: 1px !important; flex: 0 0 8px !important; } .dhz-catinfo-clean .dhz-advice-cta { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 16px !important; padding: 8px 12px !important; border-radius: 10px !important; background: rgba(10, 109, 190, .08) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--site-blue, #0a6dbe) !important; text-decoration: none !important; } .dhz-catinfo-clean .dhz-advice-cta:hover { text-decoration: none !important; background: rgba(10, 109, 190, .12) !important; } .dhz-catinfo-clean .dhz-advice-cta:after { content: "→" !important; } /* Advice icon */ .dhz-catinfo-clean .dhz-advice-icon { position: relative !important; width: 64px !important; height: 64px !important; min-width: 64px !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(10, 109, 190, .10), rgba(10, 109, 190, .06)) !important; box-shadow: 0 10px 22px rgba(10, 109, 190, .12) !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-indent: -9999px !important; } .dhz-catinfo-clean .dhz-advice-icon:before { content: "" !important; position: absolute !important; inset: -40% -40% auto auto !important; width: 120px !important; height: 120px !important; background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%) !important; transform: rotate(18deg) !important; z-index: 1 !important; } .dhz-catinfo-clean .dhz-advice-icon:after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; width: 45px !important; height: 45px !important; background-color: rgba(10, 109, 190, .95) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.486 2 2 5.936 2 10.772c0 2.64 1.365 5.019 3.62 6.64L5 22l4.02-2.27c.96.23 1.97.35 2.98.35 5.514 0 10-3.936 10-8.772C22 5.936 17.514 2 12 2zm.03 14.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zM14 10.35c-.62.45-.95.78-.95 1.65v.25h-2.1v-.4c0-1.4.62-2.1 1.43-2.7.54-.4.92-.72.92-1.25 0-.62-.5-1.05-1.25-1.05-.83 0-1.37.48-1.43 1.23H8.5c.1-2.02 1.7-3.38 3.98-3.38 2.32 0 3.87 1.29 3.87 3.1 0 1.35-.83 2.15-1.35 2.52z'/%3E%3C/svg%3E") center/contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.486 2 2 5.936 2 10.772c0 2.64 1.365 5.019 3.62 6.64L5 22l4.02-2.27c.96.23 1.97.35 2.98.35 5.514 0 10-3.936 10-8.772C22 5.936 17.514 2 12 2zm.03 14.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zM14 10.35c-.62.45-.95.78-.95 1.65v.25h-2.1v-.4c0-1.4.62-2.1 1.43-2.7.54-.4.92-.72.92-1.25 0-.62-.5-1.05-1.25-1.05-.83 0-1.37.48-1.43 1.23H8.5c.1-2.02 1.7-3.38 3.98-3.38 2.32 0 3.87 1.29 3.87 3.1 0 1.35-.83 2.15-1.35 2.52z'/%3E%3C/svg%3E") center/contain no-repeat !important; } /* Mobiel adviesblok */ @media (max-width:600px) { .dhz-catinfo-clean .dhz-advice-entry { grid-template-columns: 1fr !important; gap: 14px !important; } .dhz-catinfo-clean .dhz-advice-icon { margin: 0 auto !important; } } /* ========================================================= MOBIEL FIXES (helemaal onderaan) ========================================================= */ /* FAQ-afbeelding compacter op mobiel */ @media (max-width: 992px) { .dhz-catinfo-clean .dhz-faq-clean>div:first-child { border-radius: 12px; overflow: hidden; } .dhz-catinfo-clean .dhz-faq-clean>div:first-child img { width: 100% !important; height: 220px !important; object-fit: cover !important; object-position: center !important; display: block !important; } } /* Forceer links-uitlijning op mobiel */ @media (max-width: 992px) { .dhz-catinfo-clean, .dhz-catinfo-clean h1, .dhz-catinfo-clean h2, .dhz-catinfo-clean h3, .dhz-catinfo-clean p, .dhz-catinfo-clean li, .dhz-catinfo-clean summary, .dhz-catinfo-clean details>div, .dhz-guide, .dhz-guide h1, .dhz-guide h2, .dhz-guide h3, .dhz-guide p, .dhz-guide li, .dhz-guide summary, .dhz-guide details>div { text-align: left !important; } .dhz-guide .dhz-guide-nav { justify-content: flex-start !important; } } /* FIX: voorkom “uitgerekte”/gejustifyde tekst in de keuze-boxen */ .dhz-guide .dhz-choice-item, .dhz-guide .dhz-choice-item * { text-align: left !important; text-justify: auto !important; word-spacing: normal !important; letter-spacing: normal !important; } /* Extra: titel en tekst netjes laten “flowen” */ .dhz-guide .dhz-choice-title { text-align: left !important; white-space: normal !important; } .dhz-guide .dhz-choice-text { text-align: left !important; white-space: normal !important; } /* ========================================================= DHZ Compare block – only (categoriepagina) Fix: tabel leesbaar, netjes, responsive, theme-proof Scope: .dhz-catinfo-clean ========================================================= */ /* Wrapper: zorgt dat tabel op mobiel kan scrollen zonder layout-breuk */ .dhz-catinfo-clean .dhz-table-wrapper { margin-top: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; overflow: hidden; /* ronde hoeken correct */ box-shadow: 0 10px 26px rgba(0, 0, 0, .06); } /* Als de tabel breder wordt dan mobiel: horizontaal scrollen */ @media (max-width: 768px) { .dhz-catinfo-clean .dhz-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Tabel basis */ .dhz-catinfo-clean table.dhz-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; /* nette kolombreedtes */ } /* Kop */ .dhz-catinfo-clean table.dhz-compare-table thead th { text-align: left; padding: 14px 14px; font-size: 13px; line-height: 1.3; font-weight: 800; color: #111; background: rgba(10, 109, 190, .06); border-bottom: 1px solid rgba(0, 0, 0, .08); } /* Body cell */ .dhz-catinfo-clean table.dhz-compare-table tbody td { padding: 14px 14px; font-size: 14px; line-height: 1.55; color: rgba(0, 0, 0, .78); vertical-align: top; border-bottom: 1px solid rgba(0, 0, 0, .06); } /* Laatste rij: geen bottom border */ .dhz-catinfo-clean table.dhz-compare-table tbody tr:last-child td { border-bottom: 0; } /* Verticale scheidingslijnen (zacht) */ .dhz-catinfo-clean table.dhz-compare-table th+th, .dhz-catinfo-clean table.dhz-compare-table td+td { border-left: 1px solid rgba(0, 0, 0, .06); } /* Kolombreedtes: Eigenschap smaller, 2 vergelijkkolommen breder */ .dhz-catinfo-clean table.dhz-compare-table th:first-child, .dhz-catinfo-clean table.dhz-compare-table td:first-child { width: 34%; font-weight: 700; color: #111; } /* Zebra voor leesbaarheid */ .dhz-catinfo-clean table.dhz-compare-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .015); } /* Mobiel: maak de tabel minimaal scrollbaar zonder dat tekst raar breekt */ @media (max-width: 768px) { .dhz-catinfo-clean table.dhz-compare-table { min-width: 720px; /* forceert horizontaal scrollen i.p.v. geplet */ } } /* Extra: voorkom dat theme rare alignment/letterspacing forceert */ .dhz-catinfo-clean table.dhz-compare-table, .dhz-catinfo-clean table.dhz-compare-table * { text-align: left !important; letter-spacing: normal !important; word-spacing: normal !important; text-justify: auto !important; } /* ========================================================= PRODUCT FAQ – altijd open (zonder

) ========================================================= */ .html-product-details-page .product-faq { margin-top: 16px; } .html-product-details-page .product-faq h3 { margin: 0 0 14px; font-size: 18px; /* duidelijk groter dan vraag/antwoord */ font-weight: 700; /* echt titelgewicht */ line-height: 1.3; color: rgba(0, 0, 0, .95); } /* Elke Q/A */ .html-product-details-page .product-faq .faq-item { padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .12); } .html-product-details-page .product-faq .faq-item:first-of-type { border-top: 0; padding-top: 0; } /* Vraag */ .html-product-details-page .product-faq .faq-question { margin: 0; font-size: 14px; /* match met je theme */ font-weight: 600; line-height: 1.4; color: rgba(0, 0, 0, .90); } /* Antwoord */ .html-product-details-page .product-faq .faq-answer { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, .78); max-width: 100%; } /* Lijsten */ .html-product-details-page .product-faq .faq-answer ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; } .html-product-details-page .product-faq .faq-answer li { margin: 0 0 1px; color: rgba(0, 0, 0, .78); font-size: 14px; } .html-product-details-page .product-faq .faq-answer li:last-child { margin-bottom: 6px; } /* FAQ-tekst netjes links uitgelijnd op mobiel */ @media (max-width: 768px) { .product-faq { max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; } .product-faq h3, .product-faq p, .product-faq li { text-align: left; } } /* ========================================================= PRODUCT OMSCHRIJVING – zelfde leesstijl als FAQ ========================================================= */ /* Basis tekst */ .html-product-details-page #quickTab-description .full-description { font-size: 14px; line-height: 1.75; color: rgba(0, 0, 0, .78); max-width: 100%; } /* Paragrafen: meer ademruimte */ .html-product-details-page #quickTab-description .full-description p { margin: 0 0 14px; } /* Koppen binnen omschrijving */ .html-product-details-page #quickTab-description .full-description h3, .html-product-details-page #quickTab-description .full-description h4 { margin: 22px 0 8px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .90); } /* Lijsten: zelfde look & feel als FAQ */ .html-product-details-page #quickTab-description .full-description ul { margin: 8px 0 16px; padding-left: 18px; list-style: disc; } .html-product-details-page #quickTab-description .full-description li { margin: 0 0 1px; color: rgba(0, 0, 0, .78); font-size: 14px; } .html-product-details-page #quickTab-description .full-description li:last-child { margin-bottom: 0; } /* Links (bv. technische fiche) */ .html-product-details-page #quickTab-description .full-description a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .html-product-details-page #quickTab-description .full-description p { font-size: 14px; line-height: 1.75; color: rgba(0, 0, 0, .78); margin: 0 0 14px; } /* =========================================================== DHZ - CENTRALE STYLING VOOR TYPE-KIEZER + SEO-TEKST Plaats de inhoud van dit bestand 1x in: Thema-instellingen > Custom Head Styles (of Custom CSS). Daarna mag het