﻿/* @font-face {
    font-family: 'Campton';
    src: url('https://www.thecity.nl/app/Library/fonts/campton-bold/campton-bold.eot');
    src: url('https://www.thecity.nl/app/Library/fonts/campton-bold/campton-bold.eot?#iefix') format('embedded-opentype'), url('https://www.thecity.nl/app/Library/fonts/campton-bold/campton-bold.woff2') format('woff2'), url('https://www.thecity.nl/app/Library/fonts/campton-bold/campton-bold.woff') format('woff'), url('https://www.thecity.nl/app/Library/fonts/campton-bold/campton-bold.ttf') format('truetype'), url('https://www.thecity.nl/app/Library/fonts/campton-bold/campton-bold.svg#camptonbold') format('svg');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'Campton';
    src: url('https://www.thecity.nl/app/Library/fonts/campton-book/campton-book.eot');
    src: url('https://www.thecity.nl/app/Library/fonts/campton-book/campton-book.eot?#iefix') format('embedded-opentype'), url('https://www.thecity.nl/app/Library/fonts/campton-book/campton-book.woff2') format('woff2'), url('https://www.thecity.nl/app/Library/fonts/campton-book/campton-book.woff') format('woff'), url('https://www.thecity.nl/app/Library/fonts/campton-book/campton-book.ttf') format('truetype'), url('https://www.thecity.nl/app/Library/fonts/campton-book/campton-book.svg#camptonbook') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Campton';
    src: url('https://www.thecity.nl/app/Library/fonts/campton-light/campton-light.eot');
    src: url('https://www.thecity.nl/app/Library/fonts/campton-light/campton-light.eot?#iefix') format('embedded-opentype'), url('https://www.thecity.nl/app/Library/fonts/campton-light/campton-light.woff2') format('woff2'), url('https://www.thecity.nl/app/Library/fonts/campton-light/campton-light.woff') format('woff'), url('https://www.thecity.nl/app/Library/fonts/campton-light/campton-light.ttf') format('truetype'), url('https://www.thecity.nl/app/Library/fonts/campton-light/campton-light.svg#camptonlight') format('svg');
    font-weight: 300;
    font-style: normal
} */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');

body {
    font-size: 14px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

:root {
    --background: 248.57deg 13.21% 10.39%;
    --foreground: 0 0% 100%;
    --primary: 356.42deg 78.24% 37.84%;
    --primary-foreground: 0 0% 100%;
    --card-foreground: 230.77deg 40.21% 19.02%;
    --cta: 134.42deg 78.24% 37.84%;
    --cta-foreground: 0 0% 100%;
    --border: 0deg 0% 86.67%;
    --input: 210 14% 89%;

    --text-lg-size: 1rem;
    --text-xl-size: 1.25rem;
    --text-2xl-size: 1.5rem;
    --text-3xl-size: 1.75rem;
    --text-4xl-size: 2rem;
    --text-5xl-size: 2.25rem;
    --text-6xl-size: 2.5rem;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --background: 248.57deg 13.21% 10.39%;
        --foreground: 0 0% 100%;
        --card: var(--background);
        --card-foreground: var(--foreground);
        --primary: 356.47deg 100% 50%;
        --primary-foreground: 0 0% 100%;
        --input: 247.5deg 5.06% 30.98%;
        --border: 247.5deg 5.06% 30.98%;
    }
}

.heading {
    text-transform: none;
}

.bg-card .heading {
    --text-lg-size: 1rem;
    --text-xl-size: 1rem;
    --text-2xl-size: 1rem;
    --text-3xl-size: 1.25rem;
    --text-4xl-size: 1.5rem;
    --text-5xl-size: 1.75rem;
    --text-6xl-size: 2rem;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: .5em;
}

.prose h4,
.prose h5,
.prose h6 {
    font-size: 1rem;
}

.prose h1+*,
.prose h2+*,
.prose h3+*,
.prose h4+*,
.prose h5+*,
.prose h6+* {
    margin-top: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: .25rem;
    margin-bottom: .25rem;
}

.site-background {
    background-image: url(https://www.thecity.nl/uploads/assets/content-overlay.png);
    background-position: top center;
    background-repeat: no-repeat;
    position: fixed;
    inset: 0;
    z-index: -10;
}

strong {
    font-weight: bold;
}

.btn {
    border-radius: 5px;
}

.pagetitle-container .btn {
    --primary: 0 0% 100%;
}

header.z-10 {
    z-index: 11;
}

header .logo {
    max-height: 100px;
    margin: -12px 0;
}

header div.text-center.text-balance p.typography.text-base {
    font-weight: bold;
    font-size: var(--text-2xl-size);
    line-height: var(--text-2xl-line-height);
}

.progress-stepper--step,
main .bg-card:not(.mobile-filter-bar):not(.progress-stepper--wrapper):not(.category-anchors):not(#summary-mobile):not(.rounded-full) {
    border-radius: var(--radius);
}

main div.bg-card {
    box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.35);
}

.offcanvas.bg-card,
.offcanvas .bg-card {
    box-shadow: none;
}

.progress-stepper--wrapper {
    padding-bottom: .5rem;
}

#sidebar {
    margin-left: -.75rem;
    padding-left: .75rem;
    margin-right: -.75rem;
    padding-right: .75rem;
}


/**
 ** Product List
 **/
.product-list .product-item .more-information,
.product-list .product-item h4,
.product-list .product-item h5 {
    display: none;
}

.product-list .price small {
    opacity: .65;
}

.product-list .product-item {
    overflow: hidden;
}

.product-list .btn.bg-cta.text-xl {
    --text-xl-size: var(--text-base-size);
    --text-xl-line-height: var(--text-base-line-height);
}

.product-item--image img {
    aspect-ratio: 6 / 4;
    object-fit: cover;
}



.product-detail--html-description li,
.product-item--description li {
    list-style-type: none;
    t:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0yLjUgOGE1LjUgNS41IDAgMCAxIDguMjUtNC43NjQuNS41IDAgMCAwIC41LS44NjZBNi41IDYuNSAwIDEgMCAxNC41IDhhLjUuNSAwIDAgMC0xIDAgNS41IDUuNSAwIDEgMS0xMSAweiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0xNS4zNTQgMy4zNTRhLjUuNSAwIDAgMC0uNzA4LS43MDhMOCA5LjI5MyA1LjM1NCA2LjY0NmEuNS41IDAgMSAwLS43MDguNzA4bDMgM2EuNS41IDAgMCAwIC43MDggMGw3LTd6Ij48L3BhdGg+Cjwvc3ZnPg==");
    padding-left: 0;
}
.product-detail--html-description li:before,
.product-item--description li:before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0yLjUgOGE1LjUgNS41IDAgMCAxIDguMjUtNC43NjQuNS41IDAgMCAwIC41LS44NjZBNi41IDYuNSAwIDEgMCAxNC41IDhhLjUuNSAwIDAgMC0xIDAgNS41IDUuNSAwIDEgMS0xMSAweiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0xNS4zNTQgMy4zNTRhLjUuNSAwIDAgMC0uNzA4LS43MDhMOCA5LjI5MyA1LjM1NCA2LjY0NmEuNS41IDAgMSAwLS43MDguNzA4bDMgM2EuNS41IDAgMCAwIC43MDggMGw3LTd6Ij48L3BhdGg+Cjwvc3ZnPg==");
    float: left;
    margin-left: -1.625em;
    margin-top: 1px;
}
.product-detail--html-description .more-information li:before {
    background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzY1YTMwZCIgZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTlMMjEgN2wtMS40MS0xLjQxeiIvPjwvc3ZnPg==");
}

/**
 ** Product Detail
 **/
.product-detail--html-description img {
    max-height: 350px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius);
}

.product-detail--html-description .col-text {
    display: none;
}

.product-detail--html-description .more-information>br:first-child {
    display: none;
}



/**
 ** Table Order
 **/
.menu-list--item--card-front img{
    aspect-ratio: 1;
    object-fit: scale-down;
}


/*
 * 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;
    }
}


/* TEMP */
/*
@media (prefers-color-scheme: light) {
    .hidden.sm\:block.sticky img:not([src*='dark']),
    .menu-list > li > button img:not([src*='dark']) {
        filter: invert(1);
    }
}
@media (prefers-color-scheme: dark) {
    .hidden.sm\:block.sticky img[src*='dark'],
    .menu-list > li > button img[src*='dark'] {
        filter: invert(1);
    }
}
*/

.hidden.sm\:block.sticky img,
.menu-list > li > button img {
    aspect-ratio: 1;
    object-fit: scale-down;
    display: block;
}

.hidden.sm\:block.sticky .mt-auto.aspect-square.flex.items-center {
    aspect-ratio: auto;
}





/**
 ** TableOrder Category Icons
 **/

.mt-auto.aspect-square.flex.items-center {
    max-width: 80px;
    margin: 0 auto .5rem;
}
button.w-full.h-full.bg-card.text-card-foreground.p-3.flex.flex-col.relative.border-2.border-card .mt-auto:not(.typography) {
    max-width: 80px;
    margin: 0 auto 0.5rem;
    display: block;
}
button.w-full.h-full.bg-card.text-card-foreground.p-3.flex.flex-col.relative.border-2.border-card .mt-auto + * {
    margin: auto;
}