﻿@font-face {
    font-family: Graphik;
    src: url(assets/font/2450c780b423a7e51b2009c50aa4173b.woff2) format("woff2"),url(assets/font/4e5774a9bb5c23a3bea68d90b377b6bd.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Graphik;
    src: url(assets/font/cb12149d7a062d205165114c1f307a33.woff2) format("woff2"),url(assets/font/829a22f53590743ffa497a3a8a7a4254.woff) format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Graphik;
    src: url(assets/font/c8521e6e708e195f46322c6ad01df404.woff2) format("woff2"),url(assets/font/e85e40ea19bd206db6cc197b3c7ece05.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Graphik;
    src: url(assets/font/450bd22143737f55db1836e21cc265e1.woff2) format("woff2"),url(assets/font/dfb621069321970895618c4e9312086e.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Graphik;
    src: url(assets/font/e8796b2e1dc3bb6575be58441009c332.woff2) format("woff2"),url(assets/font/36020c029b1cb89a5e28805e752e3078.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Graphik;
    src: url(assets/font/39b7852765645dc27ea05842ec3bbd0f.woff2) format("woff2"),url(assets/font/0c10a923e2a009ec10f47dd860c5c478.woff) format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap
}

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --primary: 9 99.2% 52.5%;
    --primary-foreground: 0 0% 100%;
    --cta: 9 99.2% 52.5%
    --cta-foreground: 0 0% 100%;
    --border: 0deg 0% 86.67%;
    --input: 0deg 1.2% 80.8%;
    --radius: 1.5625rem;
}


:root {
    --background: 0 0% 95%;
    --foreground: 0 0% 26%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 26%;
    --primary: 26deg 87% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 333deg 78% 68%;
    --secondary-foreground: 0 0% 100%;
    --border: 0 0% 80%;
    --cta: var(--primary);
    --cta-foreground: var(--primary-foreground);
    --success: 144.64deg 84.85% 25.88%;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --background: 0 0% 5%;
        --foreground: 0 0% 100%;
        --card: 0 0% 13%;
        --card-foreground: 0 0% 62%;
        --primary: 26deg 87% 55%;
        --primary-foreground: 0 0% 100%;
        --secondary: 333deg 78% 68%;
        --secondary-foreground: 0 0% 100%;
        --border: 0 0% 50%;
        --input: 0 0% 50%;
    }
}

button.border-primary.text-primary {
    color: hsl(var(--secondary));
    border-color: hsl(var(--secondary));
    accent-color: hsl(var(--secondary));
}
.progress-stepper--wrapper.bg-card {
    --card: var(--secondary);
    --card-foreground: var(--secondary-foreground);
    --border: 0 0% 100%;
    --info: var(--secondary-foreground);
    --success: var(--secondary-foreground);
}

#summary-mobile {
    --tw-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 -1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 -1px 3px 0 var(--tw-shadow-color), 0 -1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 
}

.price {
    white-space: normal;
}

body {
    font-family: Graphik,sans-serif;
}

.logo-link {
    margin-top: -12px;
    margin-bottom: -12px;
}
img.logo {
    max-height: 80px;
}

.e-btn,
.btn {
    border-radius: 100px;
    text-transform: uppercase;
    font-weight: 600;
}
.btn.bg-cta {
    font-weight: 700;
}

.typography.heading {
    font-family: Graphik,sans-serif;
    font-weight: 900;
}

header.bg-card {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.product-list .price small {
    font-size: var(--text-xs-size);
    line-height: var(--text-xs-line-height);
    font-weight: 300;
    display: block;
}

/**
 ** Product List
 **/
 .product-list .product-item .more-information,
 .product-list .product-item h4 {
     display: none;
 }
 .product-list .price br {
     display: none;
 }
 .product-list .prose br:last-child {
     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;
 }

/*
 * Footer
 */
.footer--container {
    background-color: #000;
    color: #fff;
}
.footer--content {
    display: grid;
    gap: 18px;
    align-items: center;
}
.footer--content a {
    color: hsl(var(--primary));
    transition: color 300ms ease 0ms;
}
.footer--content a:hover {
    color: inherit;
}
.footer--content .social-links {
    display: flex;
    gap: 8px;
}
.footer--content .social-links a {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 3px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.footer--content .social-links a:hover {
    color: #000;
}
.footer--content img {
    max-height: 32px;
    width: auto;
}
.footer--content .social-links a span {
    display: none;
}
.footer--content table {
    width: 100%;
    text-align: left;
}
.footer--content .heading {
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 480px) {
    .footer--content {
        grid-template-columns: 152px 1fr;
    }

    .footer--content > *:last-child {
        grid-column: 1 / span 2;
    }
}

@media screen and (min-width: 768px) {
    .footer--content {
        grid-template-columns: 152px 173px 1fr;
    }

    .footer--content > *:last-child {
        grid-column: auto;
    }

    .footer--content > div:last-child {
        text-align: right;
    }
}