html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-set);
    font-size: 1.05rem;
    line-height: 1.5rem;
    display: flex;
    flex-direction: column;
}

body * {
    font-family: inherit;
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* HEADERS */
h1,.h1 { font-family: "parisplus-std", sans-serif; font-weight: 700; color: #000; }
h2,.h2 { font-family: "parisplus-std", sans-serif; font-weight: 500; color: #000; font-size: 1.5rem;}
h3,.h3 { font-family: "parisplus-std", sans-serif; font-weight: 500; color: #000; font-size: 1.2rem; }
h4,.h4 { font-family: "parisplus-std", sans-serif; font-weight: 500; color: #000; font-size: 1.1rem;}
h5,.h5 { font-family: "parisplus-std", sans-serif; font-weight: 600; color: #000; font-size: 1rem; }
h6,.h6 { font-family: "parisplus-std", sans-serif; font-weight: 600; color: #000; font-size: 1rem; }

.header-border {
    display: block;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

p { margin-bottom: 0; }

/* COLORS */

.bg-gold {
    background-color: var(--wjs-primary-color);
}

.bg-gold-light {
    background-color: var(--primary-light-color);
}

.txt-gold {
    color: var(--wjs-primary-color);
}

.txt-white {
    color: #FFF;
}

.txt-grey {
    color: var(--grey);
}

.txt-paris {
    font-family: "parisplus-std", sans-serif;
}

.border-top-light {
    border-top: 1px solid var(--btn-secondary-bg-color);
}

.border-bottom-light {
    border-bottom: 1px solid var(--btn-secondary-bg-color);
}

.onderschrift {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

a {
    color: var(--primary-color);
    text-decoration: underline;
}

a.leesmeer-link {
    color: unset;
    text-decoration: none;
}

a.leesmeer-link:hover h1,
a.leesmeer-link:hover h2,
a.leesmeer-link:hover h3, 
a.leesmeer-link:hover h4,
a.leesmeer-link:hover h5,
a.leesmeer-link:hover h6 {
    color: var(--primary-color);
}

@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      max-width: 1550px;
    }
}

.small-shadow {
    -webkit-box-shadow: 2px 3px 8px 0px rgba(0,0,0,0.4); 
    box-shadow: 2px 3px 8px 0px rgba(0,0,0,0.4);
}


header .header-first-row .mobileMenuToggle {
    position: absolute;
    top: 12px;
    left: 15px;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    background-color: var(--link-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.26);
    box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.26);
}

header .header-first-row .mobileMenuToggle:hover {
    background-color: #FFF;
    color: var(--link-color);
}

#XSmenu-page-wrapper.XSmenu-expanded header .header-first-row .mobileMenuToggle  {
    left: 245px;
}
  
#XSmenu-page-wrapper.XSmenu-collapsed header .header-first-row .mobileMenuToggle  {
    left: 55px;
}

header .wjs-logo img {
    width: 100%;
    max-width: 100%;
    height: 70px;
}


.back-to-top   {
    position: fixed;
    right: 20px;
    bottom: -60px;
    z-index: 500;
    transition: all 0.3s;
}

body.scroll .back-to-top   {
    bottom: 20px;
}

footer {
    padding: 3rem 0; 
    border-top: 1px solid #FFF;
    background-color: var(--primary-light-color);
    font-size: 0.9rem;
    color: #696969;
    margin-top: 2.5rem;
}

/* NAVIGATION */
nav .nav-item .nav-link {
    color: #FFF;
    padding: 6px 1.25rem;
    border-radius: 30px;
    border: 1px solid var(--primary-color);
    margin-right: 0.5rem;
}

nav .nav-item .nav-link.active, 
nav .nav-item.active .nav-link {
    background-color: #FFF;
    color: var(--primary-color);
    border: 1px solid #FFF;
}

nav .nav-item .nav-link:hover {
    border: 1px solid var(--border-color);
}

/* BREADCRUMB */

.breadcrumb-container {
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb-item a {
    font-size: 0.9rem;
    color: var(--grey);
    text-decoration: none;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--border-color);
}


/* BUTTONS */
.btn {
    font-size: var(--btn-font-size);
    font-weight: 500;
    white-space: nowrap;
    border-radius: 50px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.btn-primary    { 
    background: var(--primary-color);
    border: 0;
}

.btn-primary:focus,
.btn-primary:hover    { 
    background: var(--primary-color-hover);
    border: 0;
}

.btn-white    { 
    background: #FFF;
    border-color: #FFF;
    color: var(--primary-color);
}

.btn-white:focus,
.btn-white.show,
.btn-white:active,
.btn-white.active,
.btn-white:hover    { 
    background: var(--primary-color);
    border-color: #FFF;
    color: #FFF;
}


.btn-outline-primary    { 
    background: var(--primary-color);
    border-color: var(--border-color);
    color: #FFF;
}

.btn-outline-primary:focus,
.btn-outline-primary:hover { 
    background: #FFF;
    border-color: #FFF;
    color: var(--primary-color);
}

.btn-secondary    { 
    background: var(--btn-secondary-bg-color);
    border-color: var(--btn-secondary-border-color);
    color: var(--btn-secondary-txt-color);
    border: 0;
}

.btn-secondary:focus,
.btn-secondary:hover    { 
    background: var(--btn-secondary-bg-color-hover);
    border-color: var(--btn-secondary-border-color-hover);
    color: var(--btn-secondary-txt-color-hover);
}

.btn-outline-secondary    { 
    background: #FFF;
    border-color: var(--border-color);
    color: var(--primary-color);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:hover    { 
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFF;
}

.btn-link   { text-decoration: none; }

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: var(--btn-disabled-color);
    pointer-events: none;
    background-color: var(--btn-disabled-bg);
    border-color: var(--btn-disabled-border-color);
    opacity: var(--btn-disabled-opacity);
}



#cart-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

#cart-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    background: var(--green);
    color: #ffffff;
    border-radius: 20px;
    margin-left: 0.5rem;
    margin-right: -1rem;
    font-size: 0.8rem;

}


/* FORMS */
.form-control {
    font-size: var(--btn-font-size);
}


/* SEARCH */

.input-search,
.input-group > .form-control:focus,
.btn-search    {
    background: #FFF;
    border-color: var(--border-color);
    color: var(--link-color);
}
.btn.btn-search:focus,
.btn.btn-search:active,
.btn-search:hover    {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFF;
}

#website-search {
    width: 100%;
    max-width: 380px;
}

#website-search .input-search {
    border-radius: 50px 0 0 50px;
    padding-left: 1.25rem;
    background: var(--primary-color);
    border-color: var(--border-color);
    color: #FFF;
}

.offcanvas-search .input-search {
    border-radius: 50px 0 0 50px;
}

input.input-search::placeholder {
  color: var(--border-color);
  opacity: 1;
}



/* DROPDOWN MENU */

.dropdown-item {
    /* padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x); */
    color: var(--link-color);
    background-color: transparent;
}

.dropdown-item:hover {
    color: var(--primary-color);
    background-color: transparent;
}


/* MOBILE MENU */
.offcanvas-title    { 
    color: var(--primary-color);
}

.offcanvas-account {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.offcanvas-primary-menu {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.offcanvas-primary-menu li {
    list-style-type: none;
    
}

.offcanvas-primary-menu li a.nav-link {
    font-weight: 700;
    margin-top: 1rem;
}

.offcanvas-primary-menu li .nav-link.dropdown-toggle::after {
    display: none;
}

.offcanvas-primary-menu li .dropdown-menu,
.offcanvas-primary-menu li .dropdown-menu.show {
    position: relative !important;
    translate: 0 !important;
    display: block !important;
    border: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.offcanvas-primary-menu a {
    display: block;
    margin: 0.25rem 0;
    font-size: 1.2rem;
    color: var(--link-color);
    text-decoration: none;
}

.offcanvas-secondary-menu a {
    display: block;
    margin: 0.25rem 0;
    color: var(--link-color);
    text-decoration: none;
}

.offcanvas-secondary-menu a.niv2 {
    margin-left: 0.8rem;
}

/* NAVBAR */
.navbar .btn,
.navbar span {
    margin-right: 0.5rem;
}


/* USP BAR */

.usp-item  {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 1rem 1rem;
    color: var(--primary-color);
    font-size: 0.9rem;
    line-height: 1.2rem;
}

/* min-width: 576px	Small devices (landscape phones)
min-width: 768px	Medium devices (tablets)
min-width: 992px	Large devices (desktops)
min-width: 1200px	Extra large desktops
min-width: 1400px	Larger screens */

@media (min-width: 1200px) {
    .usp-item  {
        font-size: 1rem;
        line-height: 1.3rem;
        padding: 1rem 0 1rem 1rem;
    }
}



/* PRODUCT SLIDER */

.swiper {
  position: relative;
}

.pe--product-slider {
    padding: 4rem 0;
}

.pe--product-slider h2 {
    margin-bottom: 2rem;
}

.pe--product-slider a.product-slide.card {
    text-decoration: none;
    color: #000;
    border: 0;
    background-color: unset;
}

.pe--product-slider .product-slide-image {
    padding: 0.5rem 0.5rem;
    transition: transform 0.2s ease-in-out;
}

.pe--product-slider a.product-slide.card:hover .product-slide-image {
    transform: scale(1.04);
}


.pe--product-slider .card-body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/**
 *  PRODUCTOVERZICHT PAGINA
 */
#sorting    { max-width: 280px; }




/**
 *  PRODUCT PAGINA
 */
@media only screen and (min-width:768px) {

    .checkout .header-logo img      { width: 180px; }

    .product-grid {
        display: grid;  
        min-height: 50vh;
        grid-auto-columns: 1fr; 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto auto 1fr; 
        gap: 0px 40px; 
        grid-template-areas: 
            "image info"
            "specs info"
            "specs groups";
    }

}

.image      { grid-area: image; }
.info       { grid-area: info; }
.specs      { grid-area: specs; }
.groups     { grid-area: groups; /*min-height: 215px;*/ }


/* titel informatie */
h1.product-title    { font-weight: 700; margin-bottom: 0; color: var(--primary-color); }
h3.product-title    { font-weight: 700; margin-bottom: 0; }
.product-subtitle   { font-size: 2rem; line-height: 2.4rem; font-weight: 600; word-break: break-all;  }
.product-author     { font-size: 1.0rem; font-weight: 500; margin-bottom: 10px; color: var(--grey); }


/* specifications */
.product-specs-table        { display: table; font-size: 0.8rem; line-height: 1.4rem; } 
.product-specs-label        { width: 45%; position: relative; color: var(--grey); }
.product-specs-data         { width: 55%; }
.product-specs-label:after  { content: ':'; position: absolute; top: 0px; right: .5rem; }

/* product-image */
.product-images             { position: relative; background-color: var(--blue-light); min-height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: center;  }
.product-image              { width:100%; text-align: center; padding: 1rem 0; padding-left: 4rem; cursor:zoom-in;  }
.product-image img          { max-width: 60%; -webkit-box-shadow: 0px 1px 9px 3px rgba(0,0,0,0.22); box-shadow: 0px 1px 9px 3px rgba(0,0,0,0.22); }
.product-image-controls     { background-color: var(--bg-color-grey); }
.product-grid-image         { display: block; text-align: center; padding: 2rem 1.5rem; background: var(--blue-light); }
.product-grid-image img     { max-width: 80%; max-height: 270px; box-shadow: 1px 2px 7px #acb9c1 }

.modal.product-image-modal .modal-header    { background-color: var(--blue-light); border: 0; }
.modal.product-image-modal .modal-body      { background-color: var(--blue-light); display: flex; justify-content: center; }
.modal.product-image-modal .modal-image     {
    display: block;
    max-width:100%;
    max-height:85vh;
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 9px 3px rgba(0, 0, 0, 0.22);
    box-shadow: 0px 1px 9px 3px rgba(0, 0, 0, 0.22);
}

.swiper-wrapper .product-grid-image     { display: flex; justify-content: center; align-items: center; height: 100%; }

/* product inkijkexemplaar */
.readiant-iframe    { 
    width: 100%;
    height: 100%;
 }


/* product image navigation */
.product-image-nav          { position: absolute; top: 0; left: 0; padding: 0.5rem; }
.image-nav                  { width: 3.2rem; padding: 0.5rem; margin-bottom: 5px; text-align: center; border: 1px solid #dfdfdf; }
.image-nav.active           { border-color: var(--grey); }
.image-nav:hover            { background: #FFF; cursor: pointer }
.image-nav img              { width: 90%; }


@media only screen and (min-width:768px) {
    .product-images         { min-height: 550px; }
    .product-image img      {  }
    .image-nav              { width: 3.7rem; }
}


/* price */
/* .product-price      { margin-bottom: 0.5rem; line-height: 1.5rem;} */
.product-price ins  { font-weight: bold; text-decoration: none; font-size: 1.5rem; white-space: nowrap; }
ins  { text-decoration: none; white-space: nowrap;  }

/* Korting */
.product-price .product-discount span {
    display: inline-block;
    background-color: var(--action);
    color: #fff;
    font: 700 0.75rem/1rem "parisplus-std", sans-serif;
    padding: 0.05rem 0.3rem;
    margin-right: 100%;
    border-radius: 4px;
    margin-bottom: 0.6rem;
}

/* rating */
.product-rating-review                          { display: flex; align-items: center; }
.product-rating                                 { display: flex; margin: 0 10px 0 0; }
.product-rating > .product-rating-star          { fill: var(--star-rating-empty); width: 16px; height: 16px; }
.product-rating .product-rating-star.active  { fill: var(--star-rating-active); }
.product-rating.not-rated:hover > .product-rating-star     { fill: var(--star-rating-hover); cursor: pointer;}
.product-rating.not-rated > .product-rating-star:hover ~ .product-rating-star { fill: var(--star-rating-empty); }

/* wishlist */
.btn-addtowishlist          { position: absolute; top: 10px; right: 10px; z-index: 5; display: none; width: 40px; height: 40px; background-color: #FFF; border: 1px solid var(--border-color-grey); border-radius: 3px; justify-content: center; align-items: center;  }
.product:hover .btn-addtowishlist,
.product-page:hover .btn-addtowishlist          { display: flex; }

/* leveringsmelding */
.product-delivery               { color: var(--green); font-weight: 700; line-height: 1rem; font-size: 0.95rem; }
.product-delivery .fa-check     { margin: 0 3px 0 0; }
.product-delivery-unavailable   { font-weight: 700; line-height: 1rem; }

/* collapse sections */
a.collapse-section              { text-decoration: none; border-top: 1px solid #e8e8e8; padding-top: 10px; } 
.collapse-section               { display: flex; justify-content: space-between; }
.collapse-section .chevron      { transform: rotate(90deg); margin-top: 3px; margin-right: 6px; } 
.collapse-section[aria-expanded="true"] .chevron    { transform: rotate(-90deg); margin-right: -6px; }

.product-description p      { margin: 0; }

/* .pe--product a {
    color: var(--primary-color);
    text-decoration: none;
} */

.grid-product                       { max-height: 670px; }
/* .grid-product .product-card         { border: 1px solid var(--border-color); border-radius: 0.37rem; } */
/* .grid-product .product-card:hover   { box-shadow: 0 4px 15px rgb(153 153 153 / 30%); transition: 0.3s; } */
.grid-product figure                { margin-bottom: 0; background-color: var(--primary-light-color); }
.product-list figure                { min-height: 100px; background-color: var(--primary-light-color); }
.grid-product .product-image        { padding: 1rem 0; }
.grid-product .product-card .product-content { padding: 1.5rem 1.5rem 1.5rem;  }
.grid-product .product-intro        { margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.3rem;}
.grid-product .product-price ins    { font-size: 1.1rem; }

.productset-icon            { position: absolute; top: 15px; right: 15px; height: 50px; width: 50px; color: #fff; background: var(--blue-mid); border-radius: 50%; font-size: 24px; }
.productset-item a          { color: var(--blue); font-size: 14px; line-height: 16px; font-weight: 500; }
.productset-item a h3       { color: var(--blue-dark); font-size: 16px; }
.productset-item-price      { font-weight: 600; }
.product-card .productset-icon  { top: unset; right: unset; bottom: 15px; left: 15px; height: 40px; width: 40px; font-size: 18px; }

.checkout .grid-product .product-card           { padding: 0 0 15px; }
.shop-flow .grid-product .product-card:hover,
.checkout .grid-product .product-card:hover     { box-shadow: none; }



/* FILTERS */
.filter-section             { margin-top: 1.5rem; } 
.filter-section-title       { font-size: 16px; }
.filter-section a           { text-decoration: none; }
.filter-section a[aria-expanded="true"] .fa-chevron-down    { transform: rotate(-180deg); }
.form-check                 { font-size: 15px; }
.form-check .disabled       { color: var(--grey); }


/**
 *  FORMULIEREN
 */
.pe--formulier H1 {
    color: var(--primary-color);
}


/**
 *  ARTIKEL
 */
.pe--artikel {
    padding: 2rem 0;
}

.pe--artikel .pe--article-float-image {
    max-width: 100%;
    margin-top: 5px;
}

@media (min-width: 768px) {  
    .pe--artikel .pe--article-float-image {
            max-width: 50%;
            float: left;
            margin: 5px 20px 5px 0;
    }
    
    .pe--artikel .row.image-right .pe--article-float-image {
            max-width: 50%;
            float: right;
            margin: 5px 0 5px 20px;
    }
}

.pe--artikel .image-right .image-column {
    order: 2 !important;
}



/**
 *  SHOPFLOW / CHECKOUT
 */

.bs-wizard .bs-wizard-stepnum {
    font-size: 0.9rem;
    font-family: 'parisplus-std';
    color: #999;
}

.bs-wizard .bs-wizard-step a {
    color: var(--primary-color);
    text-decoration: none;
}

.bs-wizard .bs-wizard-step.active a {
    color: #000;
}

form .form-group {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

label { 
    font-family: 'parisplus-std';
    font-size: 0.9rem;
    color: #777777;
    margin-bottom: 0.1rem; 
    cursor: pointer;
}

form .form-text {
    font-size: .8em;
}

.payment-icons img {
    height: 16px;
    margin-left: 0.5rem;
}


.pe--checkout-cart .product-price,
.pe--checkout_confirm .product-price,
.checkout .product-price {
    display: flex;
    justify-content: end;
    align-items: center;
    font-family: "parisplus-std", sans-serif;
}

.product-meta {
    font-size: 0.85rem;
}





