/*
 SPDX-FileCopyrightText: 2024 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: GPL-2.0-or-later
 */
/*<editor-fold desc="font-face">*/

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Metropolis-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Metropolis-LightItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Metropolis-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Metropolis-RegularItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Metropolis-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Metropolis-BoldItalic.woff2') format('woff2');
}

/*</editor-fold>*/
/*<editor-fold desc="reset">*/

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

html {
    font-size: 62.5%;
    background-color: #fff;
    --color--dark-text: #040606;
    --color--text: #6d7070;
    --color--dark-bg: #312923;
    --color--error: #b81c23;
}

body {
    font-size: 1.6rem;
    line-height: 1.5;
    font-family: 'Metropolis', sans-serif;
    font-weight: 300;
    color: var(--color--text);
}

img, picture {
    display: block;
    max-width: 100%;
    height: auto;
}

strong {
    font-weight: 700;
}

[x-cloak], .carousel:not(.swiper-initialized) {
    display: none !important;
}

:any-link {
    color: var(--color--light-gray);
}

/*</editor-fold>*/
/*<editor-fold desc="screen reader">*/

.sr-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    word-wrap: normal !important;
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

.sr-text:focus {
    clip: auto;
    clip-path: none;
    display: block;
    height: auto;
    width: auto;
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    color: #21759b;
    font-size: 1.4rem;
    font-weight: bold;
    top: 5px;
    left: 5px;
    padding: 1.071428em 1.642857em 1em;
    z-index: 100000;
}

/*</editor-fold>*/
/*<editor-fold desc="form">*/

fieldset {
    border: none;
    padding: 0;
}

label {
    display: block;
}

label + label, label + fieldset, fieldset + label, fieldset + fieldset {
    margin-top: .5em;
}

form fieldset + footer {
    margin-top: 1em;
}

ul.error {
    padding: 0;
    margin: .5em 0 1.5em;
    color: var(--color--error);
    list-style: none;
}

:is(.cart, .payment, .auth, #toppings) button[type=submit] {
    font: inherit;
    padding: 1.5em;
    display: flex;
    align-items: center;
    gap: 1ch;
    cursor: pointer;
    border: none;
}

.auth button[type=submit] {
    background: #d7d9d5;
}

:is(.cart, .payment, #toppings) button[type=submit] {
    background: #5ae487;
}


/*</editor-fold>*/
/*<editor-fold desc="auth">*/

.auth [role="alert"] {
    background-color: #9fefb9;
    padding: .25em 1em;
}

#login main {
    display: flex;
    justify-content: stretch;
    gap: 5ch;
}

#login section {
    flex: 1;
}

@media (max-width: 48rem) {
    #login main {
        flex-direction: column;
        gap: 1em;
    }
}

.auth p button[type=submit] {
    display: inline-block;
    padding: .25em .5em;
}

#account-details > fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/*</editor-fold>*/
/*<editor-fold desc="layout">*/

a[href^="tel:"], a[href^="https://www.instagram.com/"], .icon_clock, .icon_pin {
    display: inline-flex;
    gap: .75ch;
}

a[href^="tel:"]::before, a[href^="https://www.instagram.com/"]::before, .icon_clock::before, .icon_pin::before {
    display: inline-block;
    width: 1.5em;
    aspect-ratio: 1;
    line-height: .1;
    flex-shrink: 0;
    vertical-align: middle;
}

a[href^="tel:"]::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%236d7070" viewBox="0 0 256 256"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>');
}

a[href^="https://www.instagram.com/"]::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%236d7070" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path></svg>');
}

h1 {
    margin-top: 3em;
}

h1 img {
    margin: 0 auto;
    max-width: 200px;
    box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, rgba(17, 17, 26, 0.1) 0 8px 24px, rgba(17, 17, 26, 0.1) 0 16px 56px;
}

body > header, main, body > footer:first-of-type {
    max-width: 112rem;
    margin-right: auto;
    margin-left: auto;
}

body > header {
    margin-top: .5em;
}

@media (max-width: 48em) {
    body > header {
        padding: .5em;
    }
}

body > :is(header, footer) nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1ch;
}

body > header nav {
    border-bottom: 1px solid var(--color--text);
    padding-bottom: .5em;
}

body > header ul + ul li:nth-child(3) {
    margin-left: auto;
}

body > header ul:first-of-type {
    justify-content: end;
    margin-bottom: .5em;
}

body > footer:first-of-type {
    border-top: 1px solid var(--color--text);
    max-width: 72rem;
    margin-top: 3em;
    padding-top: 1em;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}

@media (max-width: 48em) {
    body > footer:first-of-type {
        display: flex;
        flex-direction: column;
        padding: 1em;
    }
}

body > footer > address {
    color: var(--color--dark-text);
    font-style: normal;
    grid-row: span 2;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%236d7070" viewBox="0 0 256 256"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>') no-repeat top left;
    padding-left: calc(32px + .75ch);
}

body > footer:last-of-type {
    font-size: .75em;
    margin-top: 2em;
    background-color: var(--color--text);
    color: white;
    padding: 1em .5em;
}

body > footer:first-of-type a {
    margin: .25em 0;
}

body > footer:last-of-type a, #order-cta a, #cart-intro a {
    color: inherit;
}

body > footer nav ul {
    justify-content: center;
    text-transform: uppercase;
    flex-wrap: wrap;
}

body > footer nav li + li::before {
    content: "|";
    margin-right: 1ch;
}

/*</editor-fold>*/
/*<editor-fold desc="welcome">*/

#slogan p, #closing {
    color: var(--color--dark-text);
    text-transform: uppercase;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#slogan p {
    font-size: 2.675em;
    max-width: 75%;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

@media (max-width: 48em) {
    #slogan p {
        max-width: 100%;
    }
}

#slogan::before, #slogan::after, #cart-intro::before {
    content: '';
    display: block;
    width: 100%;
}

#slogan::before, #cart-intro::before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 400px;
    margin-top: -6em;
}

#slogan::before {
    background-image: url('slogan.jpg');
}

#slogan::after {
    background: url('logo-no-text.png') no-repeat center;
    height: 149px;
}

#introduction {
    position: relative;
    margin-top: 4em;
    padding: 4em 1em 1em;
}

#introduction::before {
    content: '';
    background-color: #efefec;
    position: absolute;
    top: 0;
    bottom: -15em;
    left: -1000px;
    right: -1000px;
    z-index: -1;
}

#introduction > div:first-of-type {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    font-size: 1.15em;
    margin-bottom: 3em;
}

#introduction > div:first-of-type > * {
    margin: 0;
    flex: 1;
}

#introduction .heading {
    color: var(--color--dark-text);
    font-size: 2.1em;
    text-transform: uppercase;
}

#introduction > div:nth-of-type(2) {
    columns: 2;
    margin-bottom: 6em;
}

@media (max-width: 48em) {
    #introduction > div:first-of-type {
        flex-direction: column;
    }

    #introduction > div:nth-of-type(2) {
        columns: 1;
    }
}

#introduction > div:nth-of-type(2) > p:first-of-type {
    margin-top: 0;
}

#order-cta {
    background: url('order-cta.jpg') no-repeat 20% top / contain var(--color--text);
    color: #fff;
    margin-top: 6em;
    padding: 3em 0 3em 50%;
}

@media (max-width: 64em) {
    #order-cta {
        background-position: -20% top;
    }
}

@media (max-width: 48em) {
    #order-cta {
        padding-left: 1em;
        padding-right: 1em;
        background-image: none;
    }
}

#order-cta p:first-of-type, #cart-intro .heading {
    font-size: 2em;
    text-transform: uppercase;
}

#order-cta a[href^="tel:"] {
    font-size: 1.25em;
}

:is(#order-cta, #cart-intro) a[href^="tel:"]::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 256 256"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg>');
}

#order-cta p:last-of-type {
    display: flex;
    margin-bottom: 4em;
}

.icon_clock::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"></path></svg>')
}

#order-cta em, #cart-intro em {
    font-style: normal;
    text-transform: uppercase;
}

.order-button {
    background-color: var(--color--dark-bg);
    color: #fff;
    padding: .5em 1ch;
    text-decoration: none;
    text-transform: uppercase;
}

#closing {
    font-size: 1.675em;
    max-width: 60%;
    margin-top: 4em;
    margin-bottom: 4em;
}

#whatsapp {
    position: fixed;
    right: 2.5rem;
    bottom: 2.5rem;
    z-index: 10;
    filter: drop-shadow(0 3px 6px rgb(0 0 0 / 25%));
}

#whatsapp a {
    display: flex;
    align-items: center;
    gap: 1ch;
    text-decoration: none;
}

#whatsapp span {
    background: #fff;
    padding: .3125em .9375em;
    border-radius: 10px;
    position: relative;
}

#whatsapp span::after {
    content: '';
    border: 5px solid transparent;
    border-right-width: 0;
    border-left-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -5px;
}

/*</editor-fold>*/
/*<editor-fold desc="cart">*/

#cart-intro {
    background-color: var(--color--text);
    color: #fff;
}

#cart-intro::before {
    background-image: url('cart-intro.jpg');
}

.icon_clock, .icon_pin {
    display: flex;
}

#cart-intro .icon_pin::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 256 256"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>');
}

#cart-intro > div {
    padding: 6em 4em 2em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2ch;
}

#cart-intro .heading {
    margin: 0;
    line-height: 1.2;
}

small::before {
    content: '* ';
}

@media (max-width: 48em) {
    #cart-intro > div {
        display: flex;
        flex-direction: column;
        padding-left: 2em;
        padding-right: 2em;
    }
}

:is(.cart, .payment) [role="alert"] {
    background-color: var(--color--error);
    color: white;
    padding: .25em 1em;
    margin-top: .5em;
}

.cart > [role=alert], .payment section > [role=alert] {
    margin-top: 0;
    margin-bottom: 2em;
}

/*</editor-fold>*/
/*<editor-fold desc="legal">*/
.legal main, .payment main, .auth main {
    padding: 0 1em;
}

.legal h1, .payment h1, .auth h1 {
    margin-top: .67em;
}

.legal ul {
    margin-block-start: 1em;
    margin-block-end: 1em;
}

.legal main a[href^="tel:"]::before {
    display: none;
}

.legal :is(dt, dd) {
    display: inline;
}

.legal dl {
    padding-inline-start: 2.5em;
}

.legal dl > div {
    display: list-item;
}

.legal dfn, .legal .term-use {
    font-variant: small-caps;
}

.legal dt, .legal dfn {
    font-weight: bold;
}

.legal dt:not(.question)::after {
    content: ": ";
}

.legal dd {
    margin-left: 0;
}

.legal address, .legal dfn {
    font-style: normal;
}

.legal table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2em;
}

.legal table caption {
    font-weight: bold;
}

.legal table :is(th, td) {
    border: 1px solid black;
    padding: .25em;
}

.legal thead :is(th, td) {
    background-color: #b6dde8;
}

/*</editor-fold>*/
/*<editor-fold desc="payment">*/

dialog.redirect:modal {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart .htmx-request button[type=submit]::before, dialog.redirect::before, #toppings > div::before, #toppings .htmx-request button[type=submit]::before {
    content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="%23494949"><rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect></svg>');
}

.cart footer div {
    color: var(--color--error);
    margin-top: 1em;
}

.order-details {
    display: flex;
    flex-wrap: wrap;
    gap: 5ch;
}

.order-details :is(dt, dd) {
    padding: 0;
    margin: 0;
}

.order-details dt {
    font-weight: bold;
}

@media (max-width: 48rem) {
    .order-details {
        flex-direction: column;
        gap: 1em;
    }
}

#checkout form, #checkout form > fieldset, #checkout form > fieldset > fieldset:first-child, #account-details > fieldset {
    display: grid;
    grid-auto-rows: min-content;
}

#checkout label br {
    display: none;
}

#checkout form {
    grid-template-columns: 2fr 1fr;
    column-gap: 4ch;
    row-gap: 2em;
}

#checkout form > fieldset, #checkout form > fieldset > fieldset:first-child, #account-details > fieldset {
    grid-template-columns: 1fr 1fr;
    column-gap: 2ch;
    row-gap: 1em;
}

#checkout form > fieldset > fieldset:first-child,
#checkout form > fieldset > fieldset:first-child > :is(label:first-child, label:last-of-type, p),
#account-details > fieldset > label:last-child {
    grid-column: span 2;
}

#checkout form aside {
    grid-row: span 3;
}

:is(#checkout, .auth) :is(input[type=text], input[type=tel], input[type=email], input[type=password], select, textarea) {
    width: 100%;
    padding: .25em;
    font: inherit;
}

:is(#checkout, #account-details) :is(label, fieldset, fieldset p) {
    margin: 0;
}

#checkout label small {
    display: block;
    margin-top: .5em;
}

#checkout form > fieldset > label:last-of-type {
    grid-column: span 2;
}

#checkout button[type=submit] {
    margin-top: .5em;
}

#checkout tfoot {
    font-size: 1.2em;
    font-weight: bold;
}

#checkout table {
    width: 100%;
    border-collapse: collapse;
}

#checkout .numeric {
    text-align: right;
}

#checkout :is(td,th) {
    padding: .75em .5em;
}

#checkout tbody td {
    border-bottom: 1px solid #d7d9d5;
}

#checkout tfoot th {
    text-align: left;
}

#checkout aside h3 {
    margin-top: 0;
}

@media (max-width: 54rem) {
    #checkout form > fieldset {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 38rem) {
    #checkout form, #account-details > fieldset {
        display: flex;
        flex-direction: column;
    }
}

/*</editor-fold>*/