@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary: 0deg 100% 42.94%;
    --primary-foreground: 0 0% 100%;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --primary: 0deg 100% 42.94%;
        --primary-foreground: 0 0% 100%;
        --card: 0 0% 15%;
        --card-foreground: 0 0% 90%;
        --border: 215 27.9% 26.9%;
        --input: 215 27.9% 26.9%;
    }
}

html {
    font-family: 'Source Sans 3', sans-serif;
}

.btn {
    text-transform: uppercase;
    font-weight: 700;
}

/**
 ** Product List
 **/
 
.product-list .product-item .more-information,
.product-list .product-item h4 {
    display: none;
}

.product-list .price br {
    display: none;
}

/**
 ** Product Detail
 **/
.product-detail--html-description  .activiteiten-content > *:first-child {
    margin-top: 0;
}
.product-detail--html-description img {
    max-height: 350px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/**
 ** Fix issue with Font Awesome and prose
 **/
 .prose .fa { display: none; }

/**
 ** Upsell
 **/
 .upsell-item--image *:not(img),
 .upsell-item--html-description img,
 .upsell-item--html-description br {
    display: none;
 }

/**
 ** FOOTER
 **/
.footer--container {
    background: #222222;
    color: #ffffff;
    text-align: center;
}
.footer--content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: end;
}
.footer--content > * {
    flex-shrink: 0;
    flex-grow: 1;
}
.footer--title {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}
.footer--content img {
    width: 100%;
    height: auto;
    position: relative;
    bottom: -0.75rem;
}
.footer--content .image--container {
    order: 1;
    position: relative;
}

@media (min-width: 480px)
{
    .footer--container {
        text-align: right;
    }
    .footer--content {
        grid-template-columns: clamp(50px,50%,275px) 1fr;
    }
    .footer--content .image--container {
        order: 0;
        margin-top: -2.5rem;
    }
}