.button--cart {
    padding-left: 6rem;
}

    .button--cart span:before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='23' viewBox='0 0 24 23'%3E%3Cpath d='M9,20a1,1,0,1,1-1,1A1,1,0,0,1,9,20Zm11,0a1,1,0,1,1-1,1A1,1,0,0,1,20,20ZM1,1H5L7.68,14.39a2,2,0,0,0,2,1.61H19.4a2,2,0,0,0,2-1.61L23,6H6' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
        width: 2.4rem;
        height: 2.3rem;
        position: absolute;
        top: 0rem;
        left: -4rem;
        transition: var(--transition-default);
    }

    .button--cart:not(.button--cart-small) span:after {
        content: none;
    }

.button--cart-small {
    text-indent: -9000px;
    padding-left: 3rem;
    padding-right: 3rem;
    width: 8rem;
}

    .button--cart-small span {
        width: 2rem;
    }

        .button--cart-small span:before {
            left: -1.5rem;
        }

        .button--cart-small span:after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M8,1V15M1,8H15' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E");
            width: 1.2rem;
            right: -1.2rem;
        }

    .button--cart-small:hover span:after {
        right: -1.2rem;
        transform: scale(1.3);
    }

.productoverview__item {
    height: calc(100% - 5rem);
    position: relative;
    display: flex;
    flex-flow: column;
}

    .productoverview__item .productoverview__image {
        position: relative;
        border-bottom: .1rem solid var(--blue-light);
        margin-bottom: 1.5rem;
        overflow: hidden;
        min-height: 26rem;
        display: flex;
        justify-content: center;
        font-size: 0;
    }

        .productoverview__item .productoverview__image img {
            /* Safari/WebKit laat een <img> in een gecentreerde flex-container (justify-content: center)
               niet krimpen onder z'n intrinsieke breedte; overflow: hidden snijdt dan de zijkanten af.
               max-width + min-width: 0 dwingt de afbeelding binnen de tegel te blijven. */
            max-width: 100%;
            min-width: 0;
            height: auto;
            opacity: 1;
            transition: var(--transition-default);
        }

        .productoverview__item .productoverview__image.productoverview__image--multiple picture:last-of-type img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }

    .productoverview__item:hover .productoverview__image.productoverview__image--multiple picture:last-of-type img {
        opacity: 1;
    }

    .productoverview__item:hover .productoverview__image.productoverview__image--multiple picture:first-of-type img {
        opacity: 0;
    }

    .productoverview__item .productoverview__content {
        display: flex;
        flex-flow: column;
        height: 100%;
    }

    .productoverview__item .productoverview__title {
        margin-bottom: 1rem;
    }

        .productoverview__item .productoverview__title .subtitle {
            font-size: 1.6rem;
            line-height: 1;
            margin-bottom: .5rem;
        }

        .productoverview__item .productoverview__title h3 {
            font-size: 1.6rem;
            line-height: 2rem;
            font-weight: 700;
            margin-bottom: .2rem;
        }

            .productoverview__item .productoverview__title h3 span {
                font-size: 1.4rem;
                color: var(--grey);
                font-weight: 400;
            }

    .productoverview__item .productoverview__specs {
        padding-bottom: 1.2rem;
    }

        .productoverview__item .productoverview__specs > div {
            display: flex;
            margin-bottom: 1rem;
        }

    .productoverview__item .product__sku {
        background-color: var(--blue-light);
        border-radius: 1.2rem;
        padding: .6rem 1.2rem .6rem 1rem;
        font-size: 1rem;
        min-height: 2.4rem;
        line-height: 1;
    }

        .productoverview__item .product__sku strong {
            font-weight: 500;
        }

    .productoverview__item .product__stock {
        font-size: 1.1rem;
        line-height: 1;
        padding: .6rem 0;
        font-weight: 500;
        position: relative;
        margin-left: 3rem;
    }

        .productoverview__item .product__stock:before {
            content: "";
            position: absolute;
            top: .4rem;
            left: -2.2rem;
            width: 1.6rem;
            height: 1.6rem;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 1.6rem auto;
        }

        .productoverview__item .product__stock.product__stock--in:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M21,10.09V11a10,10,0,1,1-5.93-9.14' fill='none' stroke='%23009432' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpolyline points='21 3.01 11 13.02 8 10.02' fill='none' stroke='%23009432' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
        }

        .productoverview__item .product__stock.product__stock--out:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11,21A10,10,0,1,0,1,11,10,10,0,0,0,11,21ZM11,7v4m0,4h0' fill='none' stroke='%23f79f1f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
        }

    .productoverview__item .productoverview__specs p {
        font-size: 1.2rem;
        line-height: 2rem;
        color: var(--grey);
        margin-bottom: 0;
    }

    .productoverview__item .productoverview__buy {
        padding-top: 1.5rem;
        border-top: .1rem solid var(--blue-light);
        display: flex;
        justify-content: space-between;
        margin-top: auto;
        flex-wrap: wrap;
    }

    .productoverview__item .product__price {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        line-height: 1;
    }

    .productoverview__item .product__price-old {
        width: 100%;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--grey);
        text-decoration: line-through;
    }

    .productoverview__item .product__price-default,
    .productoverview__item .product__price-new {
        font-size: 2rem;
        font-weight: 700;
        margin-right: .5rem;
    }

    .productoverview__item .product__price-new {
        color: var(--green);
    }

    .productoverview__item .product__price-pu {
        font-size: 1.1rem;
        color: var(--grey);
        margin-top: .7rem;
    }

    .productoverview__item .button--cart {
        position: relative;
        z-index: 2;
    }

    .productoverview__item .product__link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

@media(min-width: 1500px) {
    .productoverview__item .productoverview__image.productoverview__image--multiple picture:last-of-type img {
        left: 3.5rem;
    }
}

@media(max-width: 767px) {
    .productoverview__item {
        flex-flow: row;
        flex-wrap: wrap;
        border-bottom: 0.1rem solid var(--blue-light);
        padding-bottom: 3rem;
        margin-bottom: 3rem;
        height: unset;
    }

        .productoverview__item .productoverview__image {
            max-width: 9rem;
            margin-right: 1.5rem;
            margin-bottom: 0;
            border: none;
            min-height: unset;
        }

        .productoverview__item .productoverview__content {
            width: calc(100% - 10.5rem);
        }

        .productoverview__item .productoverview__image img {
            width: 100%;
            height: auto;
        }

        .productoverview__item .productoverview__buy {
            border-top: none;
            padding-top: 0;
        }

    .pop .productoverview__item {
        margin-bottom: 3rem;
    }

    .productoverview__item .product__sku {
        max-width: 10.5rem;
        white-space: nowrap;
    }
}

.product__images {
    display: flex;
    width: 100%;
}

.product__imageslarge {
    position: relative;
    width: 100%;
}

.product__imagesthumbs + .product__imageslarge {
    width: calc(100% - 9.4rem);
}

.product__imageslarge .button {
    width: 4rem;
    height: 4rem;
    min-height: unset;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: #fff;
    border: .1rem solid var(--black);
    opacity: .2;
    top: calc(50% - 2rem);
}

    .product__imageslarge .button:hover {
        opacity: .5;
    }

.product__imageslarge .button--prev {
    left: 0;
    transform: scaleX(-1);
}

.product__imageslarge .button--next {
    right: 0;
}

.product__image {
    text-align: center;
}

    .product__image a {
		display: inline-flex;
		justify-content: center;
        cursor: zoom-in;
    }

    /* Zelfde Safari/WebKit flex-bug als bij de tegels: de galerij-afbeelding zit in een
       gecentreerde inline-flex (.product__image a) en wordt door Slick's overflow: hidden
       aan de zijkanten afgesneden zodra hij niet mag krimpen. Op álle breedtes begrenzen. */
    .product__imageslarge img {
        max-width: 100%;
        min-width: 0;
        height: auto;
    }

.product__imagesthumbs {
    width: 8.4rem;
    margin-right: 2rem;
}

/* Vertical thumbnail strip: Slick controls the list height so only the configured
   amount of thumbnails (6) is visible. The rest is reachable through the arrows. */
.product__thumbcarousel {
    position: relative;
}

    /* Reserve room below the strip for the down arrow, only when there is more to scroll. */
    .product__thumbcarousel--scrollable {
        padding-bottom: 3.6rem;
    }

    .product__thumbcarousel .slick-arrow {
        width: 3rem;
        height: 3rem;
        min-height: unset;
        padding: 0;
        border: .1rem solid var(--blue-light);
        border-radius: 50%;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 1.2rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        z-index: 2;
        font-size: 0;
    }

        /* Hide the default Slick font glyph; we use our own chevron background. */
        .product__thumbcarousel .slick-arrow:before {
            display: none;
        }

    .product__thumbcarousel .slick-prev {
        top: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7l5-5 5 5' fill='none' stroke='%231d1d1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .product__thumbcarousel .slick-next {
        bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1d1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* Hide the arrow at the strip edge it cannot move further towards (start/end). */
    .product__thumbcarousel .slick-disabled {
        display: none;
    }

@media (hover: hover) and (pointer: fine) {
    .product__thumbcarousel .slick-arrow:hover {
        border-color: var(--blue-light-hover);
        background-color: var(--blue-light);
    }
}

    .product__videothumbs {
        display: flex;
        flex-flow: column;
        gap: 1rem;
        border-top: .1rem solid var(--grey-light);
        margin-top: 1rem;
        padding-top: 1.5rem;
    }

.product__thumb,
.product__videothumb {
    width: 8.2rem !important;
    border: .1rem solid var(--blue-light);
    margin: 0;
    cursor: pointer;
    position: relative;
}

    .product__thumb img {
        width: 8rem !important;
    }

    .product__videothumb img {
        width: 8rem !important;
        height: 4.5rem !important;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .product__videothumb:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm-2.205-21.736a.64.64 0 0 0-.995.531v10.41a.64.64 0 0 0 .995.531l7.807-5.203a.64.64 0 0 0 0-1.066l-7.808-5.203h.001z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        transition: var(--transition-default);
    }

.slick-current .product__thumb {
    border-color: var(--blue-light-hover);
}

@media(min-width: 992px) {
    .product__videothumb:hover:after {
        transform: scale(1.2);
    }
}

@media(max-width: 991px) {
    .product__images {
        margin-bottom: 3rem;
        flex-flow: column;
    }

    .product__imageslarge {
        width: 100% !important;
    }

    .product__imagesthumbs {
        order: 1;
        width: 100%;
        margin-right: 0;
    }

    .product__thumbcarousel {
        display: none;
    }

    .product__imageslarge img {
        width: 100%;
        height: auto;
    }

    .product__imageslarge .button {
        display: none;
    }

    .product__imageslarge .slick-dots {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

        .product__imageslarge .slick-dots button {
            outline: none;
            box-shadow: none;
            border: none;
            border-radius: 50%;
            background-color: #e1e5e6;
            width: 1rem;
            height: 1rem;
            padding: 0;
            margin: 0 .5rem;
            text-indent: -9000px;
        }

        .product__imageslarge .slick-dots .slick-active button {
            background-color: var(--blue);
        }

    .product__videothumbs {
        flex-flow: row;
        justify-content: center;
        border-top: none;
    }
}

.sl-overlay {
    opacity: 1;
}

.sl-wrapper .sl-counter {
    font-size: 1.6rem;
    top: 2rem;
}

.sl-current {
    margin-right: .5rem;
}

.sl-total {
    margin-left: .5rem;
}

.sl-wrapper .sl-navigation button {
    background-color: var(--black);
    width: 4rem !important;
    height: 4rem !important;
    min-height: unset !important;
    padding: 0 !important;
}

    .sl-wrapper .sl-navigation button svg {
        transform: translateY(-.3rem);
    }

    .sl-wrapper .sl-navigation button.button--prev {
        transform: scaleX(-1);
    }

.sl-instructions {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 1rem;
    margin-bottom: 0;
    color: var(--grey);
}

.product__icons {
    display: flex;
    margin: 2rem 0 0 9rem;
}

.product__icon img,
.modal__product-icons td:first-of-type img {
    height: 6rem;
    width: auto;
    margin-right: 2rem;
    transition: var(--transition-default);
}

.product__icon:hover img {
    transform: scale(1.1);
}

.modal__product-icons td {
    vertical-align: top;
}

    .modal__product-icons td:first-of-type {
        padding-right: 2rem;
    }

        .modal__product-icons td:first-of-type img {
            margin-top: .5rem;
        }

.product__details .product__brand {
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 0;
}

.product__details h1 {
    font-size: 4rem;
    line-height: 4rem;
    margin-bottom: 2rem;
}

.product__details .product__usps {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .product__details .product__usps li {
        position: relative;
        padding-left: 3rem;
        padding-bottom: .8rem;
    }

        .product__details .product__usps li:before {
            content: "";
            width: 1.8rem;
            height: 1.8rem;
            position: absolute;
            top: .4rem;
            left: 0;
            background-color: var(--blue-light);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 18 13'%3E%3Cpolyline points='17 1 6 12 1 7' fill='none' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3C/svg%3E");
            background-size: .8rem auto;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            border-radius: 50%;
        }

.product__details .product__price {
    margin-top: 2rem;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

.product__details .product__price-default,
.product__details .product__price-new {
    font-size: 3.6rem;
    font-weight: 700;
    margin-right: 2rem;
}

    .product__details .product__price-default sup,
    .product__details .product__price-new sup {
        font-size: 2rem;
        top: -1.1rem;
    }

.product__details .product__price-new {
    color: var(--green);
}

.product__details .product__price-old {
    min-width: 100%;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--grey);
    text-decoration: line-through;
}

.productoverview__content .product__discounts,
.product__details .product__discounts,
.modal__add .product__discounts {
    display: flex;
    flex-flow: column;
}

.productoverview__content .product__discounts {
    margin-top: 1rem;
}

.product__details .product__discounts {
    margin: 1rem 0 0;
}

.productoverview__content .product__discount,
.product__details .product__discount,
.modal__add .product__discount {
    background-color: rgba(18, 137, 167, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.17' height='21.17' viewBox='0 0 21.17 21.17'%3E%3Cpath d='M19.59,12.41l-7.17,7.17a2,2,0,0,1-2.83,0L1,11V1H11l8.59,8.59A2,2,0,0,1,19.59,12.41ZM6,6H6' fill='none' stroke='%231289a7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 1.5rem auto;
    background-position: 2rem 1rem;
    background-repeat: no-repeat;
    min-height: 3.4rem;
    border-radius: 1.7rem;
    padding: .6rem 2rem .6rem 4.5rem;
    font-size: 1.2rem;
    line-height: 2.2rem;
    color: var(--blue);
    font-weight: 600;
}

.productoverview__content .product__discount {
    margin-top: 1rem;
}

.productoverview__buy .product__discount + .product__discount,
.product__details .product__discount + .product__discount,
.modal__add .product__discount + .product__discount {
    margin-top: .5rem;
}

.product__details .product__stock {
    font-size: 1.2rem;
    font-weight: 600;
}

    .product__details .product__stock.product__stock--in {
        color: var(--green);
    }

    .product__details .product__stock.product__stock--out {
        color: var(--orange);
    }

.product__details .product__stockreminder {
    margin-top: 3rem;
}

    .product__details .product__stockreminder p {
        font-weight: 600;
    }

.product__details hr {
    border-top: .1rem solid var(--blue-light);
    border-bottom: none;
    margin: 2rem 0;
}

.product__details .product__pu {
    margin-bottom: 2rem;
}

    .product__details .product__pu p span {
        color: var(--grey);
    }

.product__details .product__login {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

    .product__details .product__login .button {
        justify-content: center;
    }

.product__details .product__buy {
    display: flex;
    position: relative;
    min-height: 5.2rem;
}

    .product__details .product__buy input.product__amount {
        width: 12rem;
        margin-right: 1rem;
        text-align: center;
        padding-left: 2.75rem;
        padding-right: 1.25rem;
    }

    .product__details .product__buy .button {
        justify-content: center;
        width: 100%;
        padding-right: 5rem;
        padding-left: 7rem;
    }

    .product__details .product__buy .product__added {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 5rem;
        border-radius: 2.5rem;
        background-color: var(--green);
        color: #fff;
        font-size: 1.6rem;
        font-weight: 600;
        border: 0.1rem solid var(--grey-light);
        display: none;
        justify-content: center;
        align-items: center;
        opacity: 0;
    }

        .product__details .product__buy .product__added svg {
            margin-right: 1rem;
        }

    .product__details .product__buy.done input,
    .product__details .product__buy.done .button {
        display: none;
    }

    .product__details .product__buy.done .product__added {
        display: flex !important;
        opacity: 1;
        animation: productAdded .5s cubic-bezier(.68,-.55,.27,1.55) forwards;
    }

@keyframes productAdded {
    0% {
        transform: scale(.8);
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.product__details .usps {
    margin-top: 2rem;
}

.product__divider {
    margin: 7.5rem 0;
}

.product__description {
    display: flex;
    flex-flow: column;
}

    .product__description h3 {
        margin-bottom: 1.5rem;
    }

.product__specs {
    margin: 0 0 7.5rem;
}

    .product__specs ul {
        padding: 0;
        list-style: none;
        margin: 0;
    }

    .product__specs td:first-of-type {
        padding-right: 2rem;
        vertical-align: top;
    }

.product__related {
    margin-top: 2rem;
}

.featured .productoverview__item {
    height: 100%;
}

@media(max-width: 991px) {
    .product__details h1 {
        font-size: 3rem;
        line-height: 3rem;
    }

    .product__details .product__buy input.product__amount {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .product__divider {
        margin: 3rem 0;
        border-top-color: var(--blue-light);
    }

    .product__description p:last-of-type {
        margin-bottom: 3rem;
    }

    .product__icons {
        margin: 3rem 0;
    }
}