/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

:root{
	--primary-black-color: #30302F;
	--secondary-orange-color: #F7941D;
	--secondary-grey-color: #D6D6D6;
	--secondary-light-grey-color: #F8F9FA;
	--secondary-green-color: #13B907;
	--extra-grey-color: #707070;
	--soft-hover-color: rgb(19 185 7 / 25%);
}

/* Dimensies */

@media 
(min-width: 1450px){

.container, 
body:not(#index) main .l-wrapper,
body:not(#index) main .container-xl,
footer#footer .container,
body#index .container{
max-width: 1450px;
}
}

/* Algemeen */

@font-face {
  font-family: Gilroy;
  font-weight: 700;
  src: url('/font/gilroy-extrabold.otf');
}

@font-face {
  font-family: Gilroy;
  font-weight: 400;
  src: url('/font/gilroy-light.otf');
}

body,
p,
li,
div,
em,
span,
a,
.products-section-title{
font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1, 
.h2, 
.h3,
.h4, 
.h5, 
.h6{
font-family: 'Gilroy', sans-serif;
}

body{
color: var(--primary-black-color);
font-size: 15px;
}

a{
color: var(--secondary-orange-color);
}

a:hover{
color: var(--primary-black-color);
}

.bold{
font-weight: 700;
}

.normal{
font-weight: 400;
}

ul.product-flags{
top: 15px;
}

h3.h2{
font-size: 1.5rem;
}

ul.product-flags .product-flags__flag--discount, 
ul.product-flags .product-flags__flag--discount-amount, 
ul.product-flags .product-flags__flag--discount-percentage{
background: var(--secondary-orange-color);
padding: 10px 15px;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: 3px !important;
border-top-right-radius: 3px !important;
line-height: normal;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle,
.btn-primary.disabled, 
.btn-primary:disabled{
background: var(--secondary-green-color);
border-color: var(--secondary-green-color);
color: #ffffff;
border-radius: 9px;
}

.btn-primary:hover{
background: var(--primary-black-color);
border-color: var(--primary-black-color);
}

.btn-primary.focus, 
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus, 
.btn-primary:not(:disabled):not(.disabled):active:focus, 
.show>.btn-primary.dropdown-toggle:focus{
background: var(--secondary-green-color);
border-color: var(--secondary-green-color);
box-shadow: var(--soft-hover-color);
}

.btn-secondary{
background: var(--secondary-green-color);
border-color: var(--secondary-green-color);
}

.btn-secondary:hover{
background: var(--primary-black-color);
border-color: var(--primary-black-color);
}

.btn-secondary svg{
fill: #ffffff;
}

.btn-outline-primary,
.btn-outline-secondary{
border-color: var(--primary-black-color);
color: var(--primary-black-color);
}

.btn-outline-primary i,
.btn-outline-secondary i{
color: var(--primary-black-color);
}

.alert-info{
background: var(--soft-hover-color);
border-color: var(--soft-hover-color);
color: var(--primary-black-color);
}

.alert-info p:last-of-type{
margin-bottom: unset;
}

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link{
background-color: var(--secondary-orange-color);
}

.custom-control-input:checked~.custom-control-label:before{
background: var(--secondary-orange-color);
border-color: var(--secondary-orange-color);
}

.price{
color: var(--primary-black-color);
}

nav ol.breadcrumb{
background: unset;
padding: .75rem 0;
flex-wrap: wrap;
gap: 5px;
}

nav ol.breadcrumb li.breadcrumb-item:first-child{
padding-left: unset;
}

nav ol.breadcrumb li.breadcrumb-item+ li.breadcrumb-item{
padding-left: unset;
}

nav ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item:before{
content: ">";
padding-right: unset;
}

nav ol.breadcrumb .breadcrumb-item.active{
color: var(--primary-black-color);
}

.orange{
color: var(--secondary-orange-color);
}

.swiper-button-custom{
color: #ffffff;
}

.wishlist-button-add i{
color: var(--secondary-orange-color);
}

@media (max-width: 1050px){

.visible__desktop{
display: none !important;
}
}

@media (min-width: 1050px){

.visible__mobile{
display: none !important;
}
}

/* Header */

body:not(#checkout) header#header{
margin-bottom: unset;
}

header#header div.header-top{
padding: unset;
}

header#header div.header-top div.grid-container{
display: grid;
grid-gap: 35px;
grid-template-columns: repeat(3, 1fr);
padding: 25px 15px;
}

@media (max-width: 1000px){

header#header div.header-top div.grid-container{
display: flex;
justify-content: space-between;
align-items: center;
grid-gap: 10px;
}
}

/* Header ~ Logo & Mobile menu */

header#header div.header-top div.header-top__block--logo svg{
width: 100%;
max-width: 325px;
display: block;
height: auto;
}

@media (max-width: 1000px){

header#header div.header-top a.header-top__link,
header#header div.header-top button#menu-icon{
padding: unset;
}

header#header div.header-top div.header-top__block--logo svg{
max-width: 175px;
}

div#mobile_top_menu_wrapper .modal-header{
background: var(--secondary-orange-color);
color: #ffffff;
border-top-left-radius: unset;
border-top-right-radius: unset;
}

div#mobile_top_menu_wrapper .modal-header .modal-title,
div#mobile_top_menu_wrapper .modal-header span{
color: #ffffff;
}

div#_mobile_contact_link div#contact-link a{
display: flex;
align-items: center;
grid-gap: 5px;
font-weight: 700;
color: var(--primary-black-color);
text-decoration: unset;
}

div#_mobile_contact_link div#contact-link svg{
height: 16px;
width: auto;
fill: var(--secondary-orange-color);
}
}

/* Header ~ Search */

header#header div.header-top div.header__search{
display: grid;
align-items: center;
}

header#header div.header-top div.header__search form.search-form{
max-width: 450px;
margin: 0 auto;
}

header#header div.header-top div.header__search div.search-form__form-group{
display: grid;
}

header#header div.header-top div.header__search div.search-form__form-group > *{
grid-column: 1;
grid-row: 1;
}

header#header div.header__search div.search-form__form-group input{
border-radius: 10px;
color: var(--primary-black-color);
border: 2px solid var(--secondary-grey-color);
padding: 0 2.375rem 0 0.75rem;
font-size: 13px;
}

header#header div.header__search div.search-form__form-group input::placeholder{
color: var(--primary-black-color);
}

header#header div.header__search div.search-form__form-group button.search-form__btn{
position: unset;
margin-left: auto;
padding: 0 15px;
}

header#header div.header__search div.search-form__form-group button.search-form__btn svg,
header#header div.header__search div.search-form__form-group button.search-form__btn svg path{
fill: var(--secondary-orange-color);
stroke: var(--secondary-orange-color);
}

/* Header ~ Info & CTA */

header#header div.header__right{
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 10px;
justify-content: flex-end;
}

header#header div.header__right div.header-top__block--cart,
header#header div.header__right div.header-top__block--cart div.js-blockcart{
display: grid;
}

header#header div.header__right .header-info{
display: grid;
justify-content: center;
grid-gap: 5px;
color: var(--primary-black-color);
}

header#header div.header__right .header-info:hover{
font-weight: 700;
text-decoration: unset;
background: unset !important;
}

header#header div.header__right .header-info div.icon-container{
display: grid;
justify-content: center;
position: relative;
}

header#header div.header__right .header-info div.icon-container svg{
height: 21px;
width: auto;
fill: var(--secondary-orange-color);
}

header#header div.header__right .header-info.search-toggler div.icon-container svg path{
fill: var(--secondary-orange-color);
stroke: var(--secondary-orange-color);
}

header#header div.header__right .header-info span.cart-products-count{
position: absolute;
top: -15px;
right: 5px;
background: var(--secondary-orange-color);
color: #ffffff;
border-radius: 50%;
width: 21px;
padding: 3px;
text-align: center;
}

header#header div.header__right .header-info div.text-container{
display: grid;
}

header#header div.header__right .header-info div.text-container span{
line-height: normal;
font-size: 14px;
}

@media (min-width: 1000px){

header#header div.header__right .header-info.d-lg-grid{
display: grid !important;
}
}

@media (max-width: 1000px){

header#header div.header__right{
grid-gap: 15px;
}

header#header div.header__right .header-info{
padding: unset;
}

header#header div.header__right .header-info.d-sm-none{
display: none !important;
}

header#header div.header__right div.text-container{
display: none !important;
}

header#header div.header__right .header-info span.cart-products-count{
right: -10px;
top: -20px;
}

div.search-modal div.modal-body{
padding-top: 3.25rem;
}

div.search-modal div.modal-body button.close{
background: var(--secondary-orange-color);
color: #ffffff;
padding: .75rem;
border-bottom-left-radius: 3px;
opacity: 1;
}

div.search-modal div.modal-body button.close span{
color: var(--primary-black-color);
}

div.search-modal div.modal-body button.search-form__btn svg path{
fill: var(--secondary-orange-color);
stroke: var(--secondary-orange-color);
}
}

/* Header ~ menu */

header#header div.nav-container{
border-top: 2px solid var(--secondary-grey-color);
background: transparent;
padding: 10px 0px;
}

header#header div.nav-container div.grid-container{
display: flex;
grid-gap: 25px;
align-items: center;
}

header#header div.nav-container ul.main-menu__dropdown[data-depth="0"]{
grid-gap: 10px;
}

header#header div.nav-container a.main-menu__item-link--top{
color: var(--primary-black-color);
font-size: 1rem;
font-weight: unset;
padding: unset;
}

header#header div.nav-container ul.main-menu__dropdown[data-depth="0"] .main-menu__item--1{
max-width: unset;
flex: unset;
}

header#header div.nav-container div.contact-info{
margin-left: auto;
}

header#header div.nav-container div.contact-info a{
color: var(--primary-black-color);
text-decoration: unset;
}

header#header div.nav-container div.contact-info a svg{
height: 16px;
width: auto;
fill: var(--secondary-orange-color);
}

@media (max-width: 765px){

header#header div.nav-container{
display: none !important;
}
}

/* Cat list */

div.category__links{
position: relative;
}

div.category__links div.category__header{
background: var(--secondary-orange-color);
border-radius: 13px;
color: #ffffff;
display: flex;
grid-gap: 35px;
align-items: center;
justify-content: space-between;
padding: 10px;
}

div.category__links div.category__header svg{
fill: #ffffff;
}

div.category__links div.category__list div.pos_container{
display: grid;
position: absolute;
z-index: 2000;
width: 100%;
}

div.category__links div.category__list div.cat_list{
width: 100%;
height: 100%;
overflow: hidden;
transition: 1s;
background: var(--secondary-light-grey-color);
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}

div.category__links div.category__list:not(.hide) div.cat_list{
padding: 10px 0;
}

div.category__links div.category__list.hide div.cat_list{
height: 0%;
}

div.category__links div.category__list div.cat_list div.cat__item{
padding: 10px 15px;
}

div.category__links div.category__list div.cat_list a{
color: var(--primary-black-color);
}

div.category__links div.category__list div.cat_list a:hover{
text-decoration: unset;
color: var(--secondary-orange-color);
}

/* Product miniaturen */

div.products{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(4, 1fr);
margin: unset;
}

article.product-miniature{
padding: unset;
}

article.product-miniature div.product-miniature__thumb img{
width: 100%;
}

article.product-miniature div.miniature__heading_block{
min-height: 2.75rem;
}

article.product-miniature .product-miniature__title{
font-size: .95rem;
line-height: normal;
height: unset;
margin-bottom: unset !important;
}

article.product-miniature div.product-miniature__brand{
margin-bottom: 15px;
}

article.product-miniature div.product-miniature__pricing span.price{
color: var(--primary-black-color);
font-size: .90rem;
}

@media (max-width: 1050px){

div.products{
grid-template-columns: repeat(2, 1fr);
}

article.product-miniature div.miniature__heading_block{
min-height: 4.75rem;
}
}

/* Product miniaturen ~ Klein */

article.product-miniature.product-miniature--smaller{
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 2fr;
grid-template-areas: "thumb title"
"thumb price";
}

article.product-miniature.product-miniature--smaller div.product-miniature__thumb{
grid-area: thumb;
}

article.product-miniature.product-miniature--smaller div.miniature__heading_block{
grid-area: title;
margin-top: auto;
}

article.product-miniature.product-miniature--smaller div.product-miniature__pricing{
grid-area: price;
margin-bottom: auto;
}

/* Heading blokken */

div.heading-block{
margin-bottom: 15px;
}

div.heading-block-center{
display: grid;
justify-content: center;
}

div.heading-block.border-bottom{
padding-bottom: 10px;
border-color: var(--secondary-orange-color);
display: flex;
justify-content: space-between;
}

div.heading-block.just-content{
display: flex;
align-items: center;
justify-content: space-between;
}

div.heading-block a{
margin-left: auto;
font-size: .85rem;
color: var(--primary-black-color);
}

div.heading-block a:hover{
color: var(--secondary-orange-color);
}

div.heading-block a svg{
fill: var(--secondary-orange-color);
}

div.heading-block h2,
div.heading-block h3{
color: var(--primary-black-color);
font-size: 1.5rem;
font-weight: 400;
margin-bottom: unset;
}

div.heading-block h2{
font-weight: 700;
}

div.heading-block h3:not(.h2){
font-size: 15px;
}

/* Sections */

section.product-section,
section.margin-section{
margin: 35px 0px;
display: inline-block;
width: 100%;
}

section.padding-section{
padding: 65px 0px;
}

/* Footer */

footer#footer{
padding-top: unset;
margin-top: unset;
}

footer#footer div.footer-top{
background: var(--secondary-light-grey-color);
padding: 35px 0px;
}

footer#footer div.footer-top .grid-container{
display: flex;
grid-gap: 60px;
}

footer#footer div.footer-top .grid-container div:is(:last-of-type).footer__block{
margin-left: auto;
}

footer#footer div.footer-top div.last_link__block ul.links-list{
display: grid;
grid-column-gap: 65px;
grid-template-columns: auto auto;
}

footer#footer div.footer-top .footer__title{
position: relative;
text-transform: unset;
color: var(--secondary-orange-color);
font-size: 20px;
font-weight: 400;
margin-bottom: 15px !important;
display: block;
}

footer#footer div.footer-top div,
footer#footer div.footer-top a,
footer#footer div.footer-top li,
footer#footer div.footer-top li span{
color: var(--primary-black-color);
font-size: 14px;
}

footer#footer div.footer-top div.footer__block a{
display: flex;
align-items: center;
grid-gap: 5px;
}

footer#footer div.footer-middle{
padding: 15px 0px;
border-bottom: 2px solid var(--secondary-light-grey-color);
}

footer#footer div.footer-middle div.grid-container{
display: flex;
justify-content: center;
}

footer#footer div.footer-bottom{
padding: 15px 0px;
background: var(--secondary-color-gray);
}

footer#footer div.footer-bottom div.grid-container{
display: flex;
justify-content: space-between;
font-size: 14px;
}

footer#footer div.footer-bottom div.grid-container .copyright{
display: flex;
grid-gap: 25px;
}

footer#footer div.footer-bottom div.grid-container a,
footer#footer div.footer-bottom div.grid-container span{
color: var(--primary-black-color);
}

footer#footer div.footer-bottom div.grid-container .build a{
color: var(--secondary-grey-color);
}

@media (max-width: 990px){

footer#footer div.footer-top .grid-container{
display: grid;
grid-gap: unset;
}

footer#footer div.footer-top .grid-container div:is(:last-of-type).footer__block,
footer#footer div.footer-top .grid-container div:last-of-type{
margin-left: unset;
}

footer#footer div.footer-top div.last_link__block ul.links-list{
display: block;
}

footer#footer div.footer-top div.footer__title_block{
display: flex;
justify-content: space-between;
}

footer#footer div.footer-top div.footer__title_block, 
footer#footer div.footer-top div.footer__block a{
justify-content: unset;
}

footer#footer div.footer-bottom div.grid-container{
display: grid;
grid-gap: 25px;
justify-content: center;
text-align: center;
}
}

/* Contact block */

div#footer_contact_list div.contact__method_list{
display: grid;
grid-gap: 15px;
}

div.contact__method{
display: grid;
grid-gap: 15px;
grid-template-columns: 40px 1fr;
}

div.contact__method div.icon__container div.inner__container{
padding: .15rem;
border-radius: 50%;
background: #ffffff;
box-shadow: 0px 0px 5px rgb(0, 0, 0, .25);
height: 40px;
width: 40px;
display: grid;
justify-content: center;
align-items: center;
}

div.contact__method div.icon__container svg{
width: 15px;
height: auto;
}

div.contact__method div.method__content{
font-weight: 700;
display: flex;
align-items: center;
color: var(--primary-black-color);
}

div.contact__method div.method__content.normal{
font-weight: normal;
}

div.contact__method div.method__content a{
color: var(--primary-black-color);
}

/* Verlanglijst -- Modal */

div.wishlist-modal div.modal-content{
border-radius: 5px;
border: unset;
}

div.wishlist-modal h5.modal-header{
color: var(--primary-color-black);
font-weight: 700;
font-size: 25px;
margin-bottom: unset;
}

div.wishlist-modal .close{
color: var(--primary-color-black);
}

div.wishlist-modal div.modal-body input{
border-radius: 5px !important;
}

div.wishlist-modal li.wishlist-list-item:hover{
background: var(--tertiary-soft-hover-color);
}

div.wishlist-modal div.modal-footer a.wishlist-add-to-new{
width: auto;
color: var(--primary-color-black) !important;
}

div.wishlist-modal div.modal-footer a.wishlist-add-to-new i{
color: var(--primary-color-black);
}

/* Verlanglijst -- Pagina */

body:is(#module-blockwishlist-lists, #view) section.page-wrapper{
border: unset;
}

body:is(#module-blockwishlist-lists, #view) section.card{
border-radius: 5px;
}

body:is(#module-blockwishlist-lists, #view) div.wishlist-container-header a,
body:is(#module-blockwishlist-lists, #view) div.wishlist-container-header a i,
body:is(#module-blockwishlist-lists, #view) div.wishlist-footer-links a,
body:is(#module-blockwishlist-lists, #view) div.wishlist-product-combinations a:hover{
color: var(--primary-color-black);
}

body:is(#module-blockwishlist-lists, #view) h1{
color: var(--primary-color-black);
font-size: 25px;
font-weight: 700;
text-transform: unset;
}

body:is(#module-blockwishlist-lists, #view) .wishlist-list-item:hover .wishlist-list-item-title{
color: var(--tertiary-color-brown);
}

body:is(#module-blockwishlist-lists, #view) .sort-by-row{
justify-content: flex-end !important;
grid-gap: 15px;
}

body:is(#module-blockwishlist-lists, #view) .sort-by-row > *{
width: auto;
max-width: unset;
flex: unset;
}

body:is(#module-blockwishlist-lists, #view) .sort-by-row button{
background: unset;
box-shadow: unset;
border: 1px solid var(--tertiary-soft-hover-color);
padding: 5px 15px;
border-radius: 3px;
}

body:is(#module-blockwishlist-lists, #view) .sort-by-row .dropdown-menu{
padding: 15px;
}

/* Cards */

.card:not(.user-form, .js-cart, .cart-container, .cart-summary){
background: var(--secondary-grey-color);
}

.card.user-form{
margin-bottom: 35px;
}

.card-header{
background: var(--secondary-light-grey-color);
}

.card-header .card-title,
.card-header .cart-title{
color: var(--primary-black-color);
}

/* USP blocks */

div:not(.left-container) > div.blockreassurance ul.usp-list{
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-gap: 5px;
}

div:not(.left-container) > div.blockreassurance ul.usp-list li{
text-align: left;
}

div:not(.left-container) > div.blockreassurance span.item-product svg{
width: auto;
height: 15px;
}

div:not(.left-container) > div.blockreassurance span{
margin-bottom: unset;
line-height: normal;
}

div.product-info-block ul.usp-list svg path#Path_173{
fill: var(--extra-grey-color);
}