﻿@font-face {
    font-family: 'ayita_probold';
    src: url('../fonts/ayitapro-bold-webfont.woff2') format('woff2'),
         url('../fonts/ayitapro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ayita_profat';
    src: url('../fonts/ayitapro-fat-webfont.woff2') format('woff2'),
         url('../fonts/ayitapro-fat-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    --background: 0 0% 96%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --primary: 240deg 37.69% 39.02%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --cta: 72.61deg 83.81% 41.18%;
    --cta-foreground: 0 0% 100%;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --background: 0 0% 0%;
        --foreground: 0 0% 80%;
        --card: 226.86deg 70.47% 9.22%;
        --card-foreground: 0 0% 80%;
        --primary: 240deg 37.69% 54.02%;
        --primary-foreground: 210 20% 98%;
        --secondary: 220 14.3% 95.9%;
        --secondary-foreground: 220.9 39.3% 11%;
        --cta: 72.61deg 83.81% 41.18%;
        --cta-foreground: 0 0% 100%;
        --input: 215 27.9% 26.9%;
    }
}

body {
    font-family: 'Roboto', sans-serif;
}

.site-background {
    background: url(../Images/content-bg.jpg) no-repeat right;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -10;
    overflow: hidden;
}

.e-btn,
.btn:not(.qty) {
    font-family: "ayita_profat" !important;
    border-radius: 0 10px !important;
    gap: .75rem;
}

#sidebar div.bg-card {
    border-radius: 0 10px;
}

.logo {
    max-width: auto;
    width: auto;
    aspect-ratio: 29 / 30;
    max-height: 70px;
}

.heading {
    font-family: "ayita_profat";
}


@media (prefers-color-scheme: light) {
    .contact-info {
        color: hsl(var(--primary));
    }

    .bg-card .heading {
        color: hsl(var(--primary));
    }
}

/**
 ** 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;
}

/**
 ** Footer
 **/

.footer {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.footer .container {
    display: grid;
    gap: 30px;
    padding: 50px;
}

.footer .address ul {
    list-style: none;
    padding: 0;
}

.footer .address ul li {
    display: inline-block;
}

.footer .address ul li + li:before {
    margin: 0 15px 0 10px;
    content: "-";
    vertical-align: middle;
}