/* FMX EPOS customer sites: one stylesheet for every site; its colours, fonts and corners are the variables the site's appearance sets (SiteThemes.Css). */

:root {
    /* The site's appearance sets the colours, fonts and corners (SiteThemes.Css); these are the messages' own, the
       shades drawn from the site's colours, and the depth and motion every page shares. */
    --site-error: #b42318;
    --site-error-soft: #fef3f2;
    --site-success: #067647;
    --site-success-soft: #ecfdf3;
    --site-warning: #b54708;
    --site-warning-soft: #fffaeb;
    --site-track: color-mix(in srgb, var(--site-text) 7%, var(--site-surface));
    --site-hover: color-mix(in srgb, var(--site-text) 4%, var(--site-surface));
    --site-shadow-sm: 0 1px 2px rgb(16 24 40 / .06);
    --site-shadow-md: 0 1px 3px rgb(16 24 40 / .08), 0 6px 16px rgb(16 24 40 / .07);
    --site-shadow-lg: 0 18px 48px rgb(16 24 40 / .2);
    --site-ease: cubic-bezier(.2, .8, .2, 1);
    --site-content: 82rem;
    font-family: var(--site-font-body);
    color: var(--site-text);
    background: var(--site-page);
    -webkit-text-size-adjust: 100%;
}

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

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--site-page);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Focus remains functional, without a browser or application focus decoration. */
:focus {
    outline: none;
}

a {
    color: var(--site-accent);
    text-underline-offset: .15em;
}

button,
a,
label,
summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* The icons beside words (SiteIcon): the text's colour and size. */
.site-icon {
    flex: none;
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.18em;
}

.site-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    min-height: 100vh;
    min-height: 100dvh;
}

.site-header {
    position: relative;
    z-index: 5;
    background: var(--site-header-bg);
    color: var(--site-header-text);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--site-header-text) 12%, transparent);
}

.site-header-inner,
.site-footer-inner,
.site-main {
    width: 100%;
    max-width: var(--site-content);
    margin: 0 auto;
    padding-inline: 16px;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
}

.site-brand {
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--site-header-text);
    font-family: var(--site-font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
}

.site-brand img {
    display: block;
    max-width: 12rem;
    max-height: 3rem;
    object-fit: contain;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: .9rem;
    border-radius: var(--site-radius-button);
    color: var(--site-header-text);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--site-header-text) 12%, transparent);
}

.site-main {
    flex: 1;
    padding-block: 1.5rem 4rem;
}

.site-footer {
    border-top: 1px solid var(--site-border);
    background: var(--site-surface);
    color: var(--site-muted);
    font-size: .9rem;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 2rem;
}

.site-footer strong {
    color: var(--site-text);
    font-family: var(--site-font-heading);
    font-size: 1rem;
}

.site-footer p {
    margin: .35rem 0 0;
}

.site-footer a {
    color: var(--site-text);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.site-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;
}

.site-footer-small {
    align-self: flex-end;
}

h1,
h2,
h3 {
    font-family: var(--site-font-heading);
    line-height: 1.2;
    margin: 0 0 .75rem;
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.75rem, 3.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

h3 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
}

.site-hero {
    padding: 2rem 0 1rem;
}

.site-brand-hero {
    display: grid;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 0;
    overflow: hidden;
}

.site-brand-hero.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.site-hero-copy {
    align-self: center;
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.site-hero-logo {
    display: block;
    width: min(100%, 14rem);
    height: 5.5rem;
    margin-bottom: 1.25rem;
    object-fit: contain;
    object-position: left center;
}

.site-brand-hero h1 {
    max-width: 15ch;
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.site-hero-image {
    width: 100%;
    height: 100%;
    min-height: 18rem;
    max-height: 25rem;
    object-fit: cover;
}

/* The banner across the top of the home page and the ordering page: the width of the page, never taller than a third of it. */
.site-banner {
    display: block;
    width: 100%;
    height: clamp(9rem, 24vw, 19rem);
    border-radius: var(--site-radius);
    background: var(--site-track);
    object-fit: cover;
}

.site-banner.site-order-banner {
    height: clamp(7rem, 12vw, 10rem);
}

.site-lead {
    max-width: 40rem;
    margin: 0;
    color: var(--site-muted);
    font-size: 1.1rem;
}

.site-section {
    margin-top: 2rem;
}

.site-card {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 1.25rem;
    box-shadow: var(--site-shadow-sm);
}

.site-card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.site-card-row p {
    margin: 0;
}

.site-muted {
    color: var(--site-muted);
}

.site-prose {
    max-width: 44rem;
}

.site-prose h2 {
    margin-top: 1.75rem;
}

.site-form-page {
    max-width: 26rem;
    margin: 0 auto;
}

.site-form-page:has(.site-form) {
    margin-top: 1rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 1.5rem;
    box-shadow: var(--site-shadow-sm);
}

.site-form {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.site-form-compact {
    border-top: 1px solid var(--site-border);
    margin-top: 1.25rem;
    padding-top: .25rem;
}

.site-form-danger {
    border-top: 1px solid var(--site-border);
    margin-top: 1.5rem;
    padding-top: .25rem;
}

.site-field {
    display: grid;
    min-width: 0;
    gap: .4rem;
}

.site-field-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem;
    gap: 1rem;
}

.site-field-pair-balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-field label {
    font-size: .9rem;
    font-weight: 600;
}

.site-field input,
.site-field select,
.site-field textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-control);
    background: var(--site-surface);
    color: var(--site-text);
    padding: .6rem .8rem;
    font: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.site-field input:hover,
.site-field select:hover,
.site-field textarea:hover {
    border-color: color-mix(in srgb, var(--site-text) 30%, var(--site-border));
}

.site-field input:disabled,
.site-field select:disabled,
.site-field textarea:disabled {
    background: var(--site-page);
    color: var(--site-muted);
}

.site-field input[aria-invalid="true"],
.site-field select[aria-invalid="true"],
.site-field textarea[aria-invalid="true"] {
    border-color: var(--site-error);
}

.site-field textarea {
    resize: vertical;
}

.site-field-error {
    color: var(--site-error);
    font-size: .85rem;
}

.site-field-hint {
    margin: 0;
    color: var(--site-muted);
    font-size: .875rem;
}

.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    border: 1px solid var(--site-accent);
    border-radius: var(--site-radius-button);
    background: var(--site-accent);
    color: var(--site-on-accent);
    padding: .6rem 1.25rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}

.site-button:hover {
    background: var(--site-accent-dark);
    border-color: var(--site-accent-dark);
}

.site-button:active:not(:disabled) {
    transform: scale(.98);
}

.site-button-quiet {
    background: var(--site-surface);
    border-color: var(--site-border);
    color: var(--site-text);
}

.site-button-quiet:hover {
    background: var(--site-hover);
    border-color: color-mix(in srgb, var(--site-text) 30%, var(--site-border));
}

.site-button-danger {
    background: var(--site-error);
    border-color: var(--site-error);
    color: #fff;
}

.site-button-danger:hover {
    background: #912018;
    border-color: #912018;
}

.site-button-wide {
    width: 100%;
}

.site-button:disabled {
    border-color: var(--site-track);
    background: var(--site-track);
    color: var(--site-muted);
    cursor: not-allowed;
}

.site-form-links {
    margin-top: 1.25rem;
    color: var(--site-muted);
    font-size: .92rem;
}

.site-notice {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 1rem 0 0;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--site-radius-control);
    padding: .75rem 1rem;
    font-size: .92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.site-notice-error {
    border-color: color-mix(in srgb, var(--site-error) 35%, transparent);
    background: var(--site-error-soft);
    color: var(--site-error);
}

.site-notice-success {
    border-color: color-mix(in srgb, var(--site-success) 35%, transparent);
    background: var(--site-success-soft);
    color: var(--site-success);
}

/* The store's allergy notice: above the menu on every ordering page and on every review step. */
.site-allergy-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--site-warning) 45%, transparent);
    border-left: 4px solid var(--site-warning);
    border-radius: var(--site-radius-control);
    background: var(--site-warning-soft);
    padding: .8rem 1rem;
    color: var(--site-warning);
    font-weight: 600;
    line-height: 1.45;
}

.site-allergy-notice > .site-icon,
.site-allergy-notice summary > .site-icon {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: .1rem;
}

/* Above the menu: on a phone one line with its warning icon, which a tap opens to the whole notice (see the phone
   rules); wider screens show it whole. */
details.site-allergy-notice {
    display: block;
    padding: 0;
}

.site-allergy-notice summary {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem 1rem;
    list-style: none;
}

.site-allergy-notice summary::-webkit-details-marker {
    display: none;
}

.site-allergy-notice summary > span {
    flex: 1;
    min-width: 0;
}

.site-allergy-notice summary > .site-icon:last-child {
    display: none;
    transform: rotate(90deg);
    transition: transform 150ms ease;
}

.site-allergy-notice[open] summary > .site-icon:last-child {
    transform: rotate(-90deg);
}

.site-account-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-account-header h1 {
    margin: 0;
}

.site-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.site-address-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-address-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-control);
    padding: .5rem .75rem;
}

.site-address-list li div {
    display: grid;
    min-width: 0;
    gap: .15rem;
    overflow-wrap: anywhere;
}

.site-address-list li > :is(a, form) {
    flex: none;
    align-self: center;
}

.site-notice > .site-icon {
    margin-top: .15rem;
}

.site-notice p {
    min-width: 0;
    margin: 0;
    white-space: pre-line;
}

.site-empty-state {
    margin: 0;
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius-control);
    background: var(--site-page);
    padding: .85rem 1rem;
}

.site-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-allergy {
    color: var(--site-error);
    font-weight: 600;
}

/* A header over the page's banner: see-through, its text white over the picture (the site's header style), under the
   announcement when there is one. */
.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) {
    display: grid;
    grid-template-areas: "notice" "content" "footer";
    grid-template-rows: auto 1fr auto;
}

.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) .site-announcement {
    grid-area: notice;
}

.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) .site-header {
    grid-area: content;
    align-self: start;
    z-index: 5;
    background: linear-gradient(to bottom, rgb(0 0 0 / .5), transparent);
    color: #fff;
    box-shadow: none;
}

.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) :is(.site-brand, .site-nav a, .site-header-info) {
    color: #fff;
    text-shadow: 0 1px 3px rgb(0 0 0 / .5);
}

.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) .site-main {
    grid-area: content;
    padding-top: 0;
}

.site-shell.site-header-over-banner .site-main > .site-landing:not(.is-plain):first-child {
    margin-top: 0;
}

.site-shell.site-header-over-banner .site-main > .site-landing.is-height-screen:not(.is-plain):first-child .site-landing-frame {
    min-height: 100vh;
    min-height: 100svh;
}

.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) .site-footer {
    grid-area: footer;
}

.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) .site-banner {
    width: 100vw;
    height: clamp(14rem, 34vw, 26rem);
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
}

.site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) .site-order-banner {
    height: clamp(13rem, 22vw, 18rem);
}

.site-header-over-banner .site-brand-hero.has-image {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.site-header-over-banner .site-brand-hero.has-image .site-hero-image {
    grid-row: 1;
    width: 100vw;
    height: clamp(16rem, 30vw, 23rem);
    min-height: 0;
    margin-inline: calc(50% - 50vw);
}

.site-header-over-banner .site-brand-hero.has-image .site-hero-copy {
    grid-row: 2;
    padding: 2rem 0 .5rem;
}

/* Where a restaurant is today: a word on a tint, with a dot of its colour. */
.site-store-state {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    justify-self: start;
    width: fit-content;
    margin: 0;
    border-radius: 999px;
    background: var(--site-track);
    color: var(--site-muted);
    padding: .2rem .75rem .2rem .6rem;
    font-size: .85rem;
    font-weight: 700;
}

.site-store-state::before {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
}

.site-store-state.is-open {
    background: var(--site-success-soft);
    color: var(--site-success);
}

.site-store-state.is-paused,
.site-store-state.is-openslater {
    background: var(--site-warning-soft);
    color: var(--site-warning);
}

/* The owner's site: its restaurants to choose from. */
.site-store-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-store-choice {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    color: var(--site-text);
    padding: 1.1rem 1.1rem 1.1rem 1.25rem;
    text-decoration: none;
    box-shadow: var(--site-shadow-sm);
    transition: border-color 150ms ease, box-shadow 200ms ease, transform 200ms var(--site-ease);
}

.site-store-choice:hover {
    border-color: color-mix(in srgb, var(--site-accent) 45%, var(--site-border));
    box-shadow: var(--site-shadow-md);
    transform: translateY(-1px);
}

.site-store-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--site-radius-control);
    background: var(--site-accent-soft);
    color: var(--site-accent-dark);
    font-family: var(--site-font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
}

.site-store-choice-text {
    display: grid;
    flex: 1;
    gap: .35rem;
    min-width: 0;
}

.site-store-choice strong {
    font-family: var(--site-font-heading);
    font-size: 1.1rem;
}

.site-store-choice > .site-icon {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--site-muted);
    transition: color 150ms ease, transform 200ms var(--site-ease);
}

.site-store-choice:hover > .site-icon {
    color: var(--site-accent);
    transform: translateX(2px);
}

.site-store-services {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.site-store-services span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    background: var(--site-track);
    color: var(--site-text);
    padding: .15rem .65rem;
    font-size: .8rem;
    font-weight: 600;
}

/* A store's ordering page (docs/cloud-specs/04 §8.1): the menu beside the basket; on a phone the basket is a bar at the
   foot of the screen. The store's card sits over the foot of the banner when there is one. */
.site-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 23rem;
    align-items: start;
    gap: 1.5rem;
}

.site-store-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 1.5rem;
}

.site-store-copy {
    display: grid;
    gap: .55rem;
    min-width: 0;
}

.site-store-logo {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    border-radius: var(--site-radius-control);
    background: var(--site-surface);
    object-fit: contain;
}

.site-banner + .site-order .site-store-card {
    position: relative;
    margin: -3rem 1.25rem 0;
    box-shadow: var(--site-shadow-md);
}

.site-banner + .site-order .site-basket {
    margin-top: -3rem;
}

.site-store-card h1,
.site-store-card p {
    margin: 0;
}

.site-store-eyebrow,
.site-store-address {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--site-muted);
}

.site-store-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.site-store-note {
    color: var(--site-muted);
}

.site-store-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .45rem 0 0;
    padding: 0;
    list-style: none;
}

.site-store-facts li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.25rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    padding: .25rem .8rem;
    font-size: .875rem;
    font-weight: 500;
}

.site-store-facts .site-icon {
    color: var(--site-accent);
}

.site-store-facts a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    text-decoration: none;
}

.site-store-facts a:hover {
    text-decoration: underline;
}

/* The service choice, allergy notice, menu search and any no-results message are part of an ordering page only. */
.site-order .site-service-panel,
.site-order .site-allergy-notice {
    margin-top: 1.25rem;
}

.site-order .site-service-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    border-radius: var(--site-radius-control);
    background: var(--site-track);
    padding: .3rem;
}

.site-order .site-service-picker button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: max(0px, calc(var(--site-radius-control) - .15rem));
    background: transparent;
    color: var(--site-muted);
    padding: .5rem .75rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.site-order .site-service-picker button > .site-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.site-order .site-service-picker button > span {
    display: grid;
    gap: .05rem;
    text-align: left;
}

.site-order .site-service-picker button small {
    color: inherit;
    font-size: .75rem;
    font-weight: 500;
    opacity: .78;
}

.site-order .site-service-picker button:hover {
    color: var(--site-text);
}

.site-order .site-service-picker button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.site-order .site-service-picker button[aria-pressed="true"] {
    border-color: var(--site-accent);
    background: var(--site-surface);
    color: var(--site-accent);
    box-shadow: var(--site-shadow-sm);
}

/* On a computer the basket sits beside this choice and does not repeat it; on a phone the basket opens over the page
   and keeps its own. */
@media (min-width: 60.0625rem) {
    .site-order:has(.site-service-picker) .site-basket-channels {
        display: none;
    }
}

.site-order .site-service-detail {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin: .65rem 0 0;
    color: var(--site-muted);
    font-size: .9rem;
}

.site-order .site-service-detail span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.site-order .site-order-search {
    position: relative;
    display: block;
    flex: 0 1 21rem;
    min-width: 0;
}

.site-menu-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-top: 1.5rem;
}

.site-menu-heading h2 {
    margin: 0;
    font-size: 1.6rem;
}

.site-menu-workspace,
.site-menu-sections {
    min-width: 0;
}

.site-category-heading {
    display: none;
}

.site-order-search > .site-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--site-muted);
    pointer-events: none;
}

.site-order .site-order-search input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-control);
    background: var(--site-surface);
    color: var(--site-text);
    padding: .65rem .85rem .65rem 2.75rem;
    font: inherit;
    box-shadow: var(--site-shadow-sm);
}

.site-order .site-order-search input::placeholder {
    color: var(--site-muted);
    opacity: 1;
}

.site-order .site-menu-empty {
    margin: 1.5rem 0 0;
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    color: var(--site-muted);
    padding: 1.25rem;
    text-align: center;
}

/* The categories: a bar of chips that stays in view as the menu scrolls, the category being read marked. */
.site-category-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 1.5rem 0 0;
    background: var(--site-page);
    box-shadow: 0 1px 0 var(--site-border);
}

.site-category-bar ul {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin: 0;
    padding: .75rem 0;
    list-style: none;
    scrollbar-width: none;
}

.site-category-bar ul::-webkit-scrollbar {
    display: none;
}

.site-category-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-button);
    background: var(--site-surface);
    color: var(--site-text);
    padding: 0 1rem;
    font-size: .925rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.site-category-bar a:hover {
    border-color: color-mix(in srgb, var(--site-text) 30%, var(--site-border));
    background: var(--site-hover);
}

.site-category-bar a[aria-current] {
    border-color: var(--site-accent);
    background: var(--site-accent);
    color: var(--site-on-accent);
}

.site-order-category {
    margin-top: 1.75rem;
    scroll-margin-top: 4.75rem;
}

.site-order-category h2 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
}

.site-category-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
}

/* The products: a card each, two to a row where there is room, the picture on the right and its add button at its corner. */
.site-dishes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-dishes li {
    display: flex;
}

.site-dish {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    width: 100%;
    height: 100%;
    min-height: 8rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    color: var(--site-text);
    padding: 1rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 200ms ease;
}

.site-dish:hover {
    border-color: color-mix(in srgb, var(--site-accent) 40%, var(--site-border));
    box-shadow: var(--site-shadow-md);
}

.site-dish-text {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding-right: 3rem;
}

.site-dish:has(.site-dish-picture) .site-dish-text {
    padding-right: 0;
}

.site-dish-name {
    font-family: var(--site-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.site-dish-description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--site-muted);
    font-size: .875rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.site-dish-price {
    margin: auto 0 0;
    padding-top: .35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.site-dish-picture {
    align-self: center;
    width: 7rem;
    height: 7rem;
    border-radius: var(--site-radius-control);
    background: var(--site-track);
    object-fit: cover;
}

.site-dish-add {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: var(--site-surface);
    color: var(--site-accent);
    box-shadow: var(--site-shadow-sm);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.site-dish-add .site-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.5;
}

.site-dish:has(.site-dish-picture) .site-dish-add {
    right: 1.4rem;
    bottom: calc((100% - 7rem) / 2 + .4rem);
    border-color: transparent;
    box-shadow: var(--site-shadow-md);
}

.site-dish:hover .site-dish-add {
    border-color: var(--site-accent);
    background: var(--site-accent);
    color: var(--site-on-accent);
}

.site-dish:active .site-dish-add {
    transform: scale(.9);
}

/* Layout templates share the same ordering controls and basket. */
.site-shell[data-menu-layout="classic"] .site-order {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1.75rem;
}

.site-shell[data-menu-layout="classic"] .site-store-card {
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

.site-shell[data-menu-layout="classic"] .site-dishes {
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
}

.site-shell[data-menu-layout="classic"] .site-dish {
    min-height: 7.25rem;
    padding: .85rem;
}

.site-shell[data-menu-layout="classic"] .site-dish-picture {
    width: 6rem;
    height: 6rem;
}

.site-shell[data-menu-layout="classic"] .site-dish:has(.site-dish-picture) .site-dish-add {
    right: 1.2rem;
    bottom: calc((100% - 6rem) / 2 + .35rem);
}

.site-shell[data-menu-layout="market"] .site-order {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 2rem;
}

.site-shell[data-menu-layout="market"] .site-store-card {
    border-color: color-mix(in srgb, var(--site-accent) 25%, var(--site-border));
    background: color-mix(in srgb, var(--site-accent-soft) 42%, var(--site-surface));
    padding: 1.5rem;
}

.site-shell[data-menu-layout="market"] .site-category-bar {
    margin-top: 1.75rem;
}

.site-shell[data-menu-layout="market"] .site-category-bar a {
    border-radius: 999px;
}

.site-shell[data-menu-layout="market"] .site-dishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
}

.site-shell[data-menu-layout="market"] .site-dish {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 17rem;
    gap: .8rem;
    overflow: hidden;
    padding: .75rem;
}

.site-shell[data-menu-layout="market"] .site-dish-picture {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--site-radius) - .2rem);
}

.site-shell[data-menu-layout="market"] .site-dish-text {
    grid-row: 2;
    grid-column: 1;
    padding: .2rem .25rem .35rem;
}

.site-shell[data-menu-layout="market"] .site-dish:not(:has(.site-dish-picture)) {
    min-height: 8rem;
    grid-template-rows: auto;
}

.site-shell[data-menu-layout="market"] .site-dish:not(:has(.site-dish-picture)) .site-dish-text {
    grid-row: 1;
}

.site-shell[data-menu-layout="market"] .site-dish-add,
.site-shell[data-menu-layout="market"] .site-dish:has(.site-dish-picture) .site-dish-add {
    right: 1rem;
    bottom: 1rem;
    border-color: transparent;
    background: var(--site-accent);
    color: var(--site-on-accent);
}

.site-shell[data-menu-layout="editorial"] .site-order {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 2.5rem;
}

.site-shell[data-menu-layout="editorial"] .site-menu-workspace {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: 1.5rem;
}

.site-shell[data-menu-layout="editorial"] .site-store-card {
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    padding: 1.25rem 0;
    box-shadow: none;
}

.site-shell[data-menu-layout="editorial"] .site-category-bar {
    align-self: start;
    top: 1rem;
    margin: 2.25rem 0 0;
    box-shadow: none;
}

.site-shell[data-menu-layout="editorial"] .site-category-bar ul {
    flex-direction: column;
    gap: .15rem;
    overflow: visible;
    padding: 0;
}

.site-shell[data-menu-layout="editorial"] .site-category-bar a {
    width: 100%;
    min-height: 44px;
    border-width: 0;
    border-radius: 0;
    background: transparent;
    padding: .45rem 0;
}

.site-shell[data-menu-layout="editorial"] .site-category-bar a[aria-current] {
    background: transparent;
    color: var(--site-accent);
}

.site-shell[data-menu-layout="editorial"] .site-order-category {
    margin-top: 2.25rem;
}

.site-shell[data-menu-layout="editorial"] .site-dishes {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--site-border);
}

.site-shell[data-menu-layout="editorial"] .site-dish {
    min-height: 7.5rem;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    padding: 1rem 0;
}

.site-shell[data-menu-layout="editorial"] .site-dish:hover {
    border-color: var(--site-border);
    box-shadow: none;
}

.site-shell[data-menu-layout="editorial"] .site-dish-picture {
    width: 6.5rem;
    height: 6.5rem;
}

.site-shell[data-menu-layout="editorial"] .site-basket {
    border-width: 1px 0;
    border-radius: 0;
    box-shadow: none;
}

/* The basket: beside the menu, staying in view. */
.site-basket {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 1.25rem;
    box-shadow: var(--site-shadow-md);
}

.site-basket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid var(--site-border);
    padding-bottom: .75rem;
}

.site-basket-head h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.site-basket-close,
.site-dialog-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--site-track);
    color: var(--site-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.site-basket-close:hover,
.site-dialog-close:hover {
    background: color-mix(in srgb, var(--site-text) 12%, var(--site-surface));
}

.site-basket-close {
    display: none;
}

.site-basket [data-basket-body] {
    display: grid;
    gap: 1rem;
}

/* An empty basket: a picture of a bag and what to do. */
.site-basket-empty {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .3rem;
    margin: 0;
    padding: 1.5rem .5rem 1rem;
    color: var(--site-muted);
    font-size: .925rem;
    text-align: center;
}

.site-basket-empty::before {
    content: "";
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: var(--site-track);
}

.site-basket-empty::after {
    content: "";
    position: absolute;
    top: 2.45rem;
    left: 50%;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--site-muted);
    transform: translateX(-50%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.site-basket-empty strong {
    color: var(--site-text);
    font-size: 1rem;
}

/* A choice of two or three: a track with the chosen one raised on it. */
.site-segmented {
    display: flex;
    gap: .25rem;
    border-radius: var(--site-radius-button);
    background: var(--site-track);
    padding: .25rem;
}

.site-segmented:not(:has(> *)) {
    display: none;
}

.site-segmented > button,
.site-segmented > label {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 0;
    border-radius: var(--site-radius-button);
    background: transparent;
    color: var(--site-muted);
    padding: .3rem .5rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.site-segmented > button:hover,
.site-segmented > label:hover {
    color: var(--site-text);
}

.site-segmented > label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.site-segmented small {
    color: var(--site-muted);
    font-size: .75rem;
    font-weight: 500;
}

.site-segmented > button[aria-pressed="true"],
.site-segmented > label:has(input:checked) {
    background: var(--site-surface);
    color: var(--site-text);
    box-shadow: 0 1px 3px rgb(16 24 40 / .12), 0 1px 2px rgb(16 24 40 / .06);
}

.site-basket-lines {
    display: grid;
    gap: .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-basket-lines li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem .75rem;
    border-bottom: 1px solid var(--site-border);
    padding-bottom: .9rem;
}

.site-basket-line {
    display: grid;
    min-width: 0;
    gap: .1rem;
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
}

.site-basket-line strong {
    font-weight: 600;
}

.site-basket-line small {
    color: var(--site-muted);
}

.site-basket-line small.site-field-error {
    color: var(--site-error);
}

.site-basket-lines .site-stepper {
    justify-self: start;
}

.site-basket-money {
    align-self: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.site-basket-short {
    margin: 0;
    border-radius: var(--site-radius-control);
    background: var(--site-warning-soft);
    color: var(--site-warning);
    padding: .6rem .8rem;
    font-size: .9rem;
    font-weight: 600;
}

.site-basket .site-button {
    min-height: 52px;
}

/* Where a delivery goes (docs/cloud-specs/04 §8.2 step 4): the checked address with Change, or the way to enter it. */
.site-basket-address,
.site-checked-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin: 0;
    border-radius: var(--site-radius-control);
    background: var(--site-track);
    padding: .6rem .8rem;
    font-size: .95rem;
}

.site-checked-address > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-text-button,
.site-checked-address a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--site-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.site-text-button:hover,
.site-checked-address a:hover {
    text-decoration: underline;
}

/* A quantity: minus and plus either side of the number. */
.site-stepper {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: .15rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    padding: .15rem;
}

.site-stepper button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--site-accent);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.site-stepper button:hover {
    background: var(--site-accent-soft);
}

.site-stepper span {
    min-width: 1.75rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.site-basket-bar {
    display: none;
}

/* A priced order: the lines and the money, in the basket, the checkout and the order's page. */
.site-summary-lines {
    display: grid;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-summary-lines li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: .5rem;
}

.site-checkout-basket .site-summary-lines {
    gap: .9rem;
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.site-shell[data-menu-layout="signature"] .site-order {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.75rem;
}

.site-shell[data-menu-layout="signature"] .site-menu-workspace {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1.5rem;
}

.site-shell[data-menu-layout="signature"] .site-category-bar {
    align-self: start;
    top: 1rem;
    margin-top: 1.75rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: .8rem;
    box-shadow: none;
}

.site-shell[data-menu-layout="signature"] .site-category-heading {
    display: block;
    margin: .2rem .6rem .65rem;
    font-size: .85rem;
}

.site-shell[data-menu-layout="signature"] .site-category-bar ul {
    flex-direction: column;
    gap: .25rem;
    overflow: visible;
    padding: 0;
}

.site-shell[data-menu-layout="signature"] .site-category-bar a {
    width: 100%;
    border-color: transparent;
    padding: .5rem .6rem;
    white-space: normal;
}

.site-shell[data-menu-layout="signature"] .site-category-bar a[aria-current] {
    background: var(--site-accent-soft);
    color: var(--site-accent);
}

.site-shell[data-menu-layout="signature"] .site-dishes {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
}

.site-shell[data-menu-layout="signature"] .site-dish {
    padding: 1.25rem;
}

.site-shell[data-menu-layout="signature"] .site-dish-name {
    font-size: 1.1rem;
}

.site-shell[data-menu-layout="signature"] .site-dish-add {
    border-color: var(--site-accent);
    background: var(--site-accent);
    color: var(--site-on-accent);
}

.site-checkout-basket {
    border: 1px solid color-mix(in srgb, var(--site-accent) 24%, var(--site-border));
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 1rem 1.1rem;
    box-shadow: var(--site-shadow-sm);
}

.site-checkout-basket .site-summary-lines li {
    border-bottom: 1px solid var(--site-border);
    padding-bottom: .9rem;
}

.site-checkout-basket .site-summary-lines li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.site-summary-item {
    display: grid;
    min-width: 0;
    gap: .15rem;
    overflow-wrap: anywhere;
}

.site-summary-item small {
    color: var(--site-muted);
}

.site-summary-item small.site-allergy {
    color: var(--site-error);
}

.site-summary-quantity,
.site-summary-money {
    align-self: start;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-summary-totals {
    display: grid;
    gap: .4rem;
    margin: .9rem 0 0;
}

.site-summary-totals div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.site-summary-totals dt,
.site-summary-totals dd {
    margin: 0;
}

.site-summary-totals dt {
    color: var(--site-muted);
}

.site-summary-totals dd {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.site-summary-total {
    border-top: 1px solid var(--site-border);
    padding-top: .6rem;
    font-size: 1.125rem;
    font-weight: 800;
}

.site-summary-total dt {
    color: var(--site-text);
}

/* The product window: centred on a computer, a sheet from the foot of a phone's screen. */
.site-dialog {
    width: min(32rem, calc(100vw - 2rem));
    max-height: min(46rem, calc(100vh - 2rem));
    max-height: min(46rem, calc(100dvh - 2rem));
    overscroll-behavior: contain;
    border: 0;
    border-radius: var(--site-radius);
    background: var(--site-surface);
    color: var(--site-text);
    padding: 0;
    box-shadow: var(--site-shadow-lg);
}

.site-dialog[open] {
    animation: site-pop 220ms var(--site-ease);
}

.site-dialog-small {
    width: min(24rem, calc(100vw - 2rem));
}

.site-dialog::backdrop {
    background: rgb(16 24 40 / .55);
    animation: site-fade 220ms ease-out;
}

.site-dialog-body {
    --site-dialog-x: 1.5rem;
    --site-dialog-y: 1.5rem;
    position: relative;
    display: grid;
    gap: 1.1rem;
    padding: var(--site-dialog-y) var(--site-dialog-x);
}

/* The product window's problem line takes no row, and so adds no gap, until it has something to say. */
.site-dialog-body > .site-field-error:empty {
    display: none;
}

.site-dialog-body h2 {
    margin: 0;
    padding-right: 3rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.site-dialog-body > h2 + .site-dish-price {
    margin-top: -.6rem;
    padding: 0;
    font-size: 1.05rem;
}

.site-dialog-picture {
    display: block;
    width: calc(100% + 2 * var(--site-dialog-x));
    height: auto;
    aspect-ratio: 16 / 10;
    margin: calc(-1 * var(--site-dialog-y)) calc(-1 * var(--site-dialog-x)) 0;
    background: var(--site-track);
    object-fit: cover;
}

/* The whole photo, fitted in its square with clear edges: shown whole, never cut to the window's shape. */
.site-dialog-picture.is-whole {
    object-fit: contain;
}

.site-dialog-body > .site-dialog-picture:first-of-type {
    border-radius: var(--site-radius) var(--site-radius) 0 0;
}

.site-dialog-picture + h2 {
    padding-right: 0;
}

.site-dialog-close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 1;
    background: var(--site-surface);
    box-shadow: var(--site-shadow-md);
}

.site-dialog-group {
    display: grid;
    min-width: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--site-border);
    padding: 1rem 0 0;
}

.site-dialog-group legend {
    float: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: 0 0 .4rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.site-dialog-group legend + * {
    clear: both;
}

.site-dialog-group legend small {
    flex: none;
    border-radius: 999px;
    background: var(--site-track);
    color: var(--site-muted);
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 700;
}

.site-dialog-group legend small.is-required {
    background: var(--site-accent-soft);
    color: var(--site-accent-dark);
}

.site-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 52px;
    border-bottom: 1px solid var(--site-border);
    cursor: pointer;
}

.site-option:last-child {
    border-bottom: 0;
}

.site-option input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--site-accent);
}

.site-option small {
    color: var(--site-muted);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.site-dialog-actions {
    position: sticky;
    bottom: calc(-1 * var(--site-dialog-y));
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 calc(-1 * var(--site-dialog-x)) calc(-1 * var(--site-dialog-y));
    border-top: 1px solid var(--site-border);
    background: var(--site-surface);
    padding: 1rem var(--site-dialog-x) calc(1rem + env(safe-area-inset-bottom));
}

.site-dialog-actions .site-button {
    flex: 1;
    min-width: 0;
    min-height: 52px;
}

/* The checkout, a table's and the counter's order: one column of panels, the price shown once reviewed. */
.site-checkout {
    max-width: 42rem;
    margin: 0 auto;
}

.site-checkout-form {
    display: grid;
    gap: 1rem;
}

.site-checkout-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.site-checkout-head h1 {
    margin: 0;
}

.site-checkout-form > .site-muted {
    margin: -.5rem 0 .15rem;
    font-size: .95rem;
}

.site-back-link {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
}

.site-back-link:hover {
    text-decoration: underline;
}

.site-panel {
    display: grid;
    min-width: 0;
    gap: 1rem;
    margin: 0;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--site-shadow-sm);
}

.site-panel > legend {
    float: left;
    width: 100%;
    margin-bottom: .1rem;
    font-family: var(--site-font-heading);
    font-size: 1.15rem;
    font-weight: 800;
}

.site-panel > legend + * {
    clear: both;
}

.site-panel[hidden],
.site-field[hidden],
.site-address-fields[hidden] {
    display: none;
}

.site-address-fields {
    display: grid;
    gap: 1rem;
}

.site-choice-list {
    display: grid;
    gap: .5rem;
}

.site-choice-list label {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-height: 48px;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-control);
    padding: .7rem .85rem;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.site-choice-list label:hover {
    background: var(--site-hover);
}

.site-choice-list label:has(input:checked) {
    border-color: var(--site-accent);
    background: var(--site-accent-soft);
}

.site-choice-list input {
    margin-top: .2rem;
    accent-color: var(--site-accent);
}

.site-review {
    border-color: color-mix(in srgb, var(--site-accent) 45%, var(--site-border));
    background: color-mix(in srgb, var(--site-accent-soft) 28%, var(--site-surface));
    box-shadow: var(--site-shadow-md);
}

.site-review h2 {
    margin: 0;
}

.site-review-time {
    margin: 0;
    border-left: 3px solid var(--site-accent);
    background: var(--site-surface);
    padding: .65rem .8rem;
    font-weight: 600;
}

.site-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.site-review-head .site-button {
    padding: .4rem 1rem;
}

/* The details the customer gave, read back on the review step (docs/cloud-specs/04 §8.5). */
.site-review-details {
    display: grid;
    gap: .55rem;
    margin: 0;
    border-bottom: 1px solid var(--site-border);
    padding-bottom: 1rem;
}

.site-review-details div {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: stretch;
    gap: .25rem .75rem;
}

.site-review-details dt {
    color: var(--site-muted);
    font-size: .9rem;
    font-weight: 600;
}

.site-review-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.site-coupon-row {
    display: flex;
    gap: .5rem;
}

.site-coupon-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.site-coupon-row .site-button {
    flex: none;
}

/* The points payment on the review step (docs/cloud-specs/04 §8.5): the payer's card and phone, then the blocks to use; applied, what they pay. */
.site-points {
    display: grid;
    gap: .75rem;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--site-border);
    padding: 1rem 0 0;
    min-width: 0;
}

.site-points legend {
    margin-bottom: .5rem;
    padding: 0;
    font-weight: 700;
}

.site-points-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    font-weight: 600;
}

/* The tip of an order paid online, on the review step (docs/cloud-specs/04 §16): the presets, none, or the customer's own. */
.site-tip {
    display: grid;
    gap: .75rem;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--site-border);
    padding: 1rem 0 0;
    min-width: 0;
}

.site-tip legend {
    margin-bottom: .5rem;
    padding: 0;
    font-weight: 700;
}

/* An order's own page: a card saying where the order is, then what it holds. */
.site-order-status {
    display: grid;
    gap: 1rem;
    max-width: 40rem;
    margin: 0 auto;
}

.site-order-status h1,
.site-order-status p {
    margin: 0;
}

/* Stripe's checkout in the order's page: on Stripe's own white, whatever the site's colours. */
.site-stripe-checkout {
    min-height: 24rem;
    border-radius: var(--site-radius);
    background: #fff;
    color: #3f4651;
    padding: .5rem 0;
}

.site-stripe-checkout [data-checkout-loading] {
    padding: 1.5rem;
    color: inherit;
    text-align: center;
}

.site-status-card {
    display: grid;
    justify-items: center;
    gap: .4rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--site-shadow-sm);
}

.site-status-card h1 {
    margin-top: .15rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.site-status-card .site-lead {
    font-size: 1.05rem;
}

.site-status-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: var(--site-accent-soft);
    color: var(--site-accent-dark);
}

.site-status-icon .site-icon {
    width: 2rem;
    height: 2rem;
    stroke-width: 2.25;
}

.site-order-status.is-waiting .site-status-icon {
    animation: site-pulse 2s ease-out infinite;
}

.site-order-status.is-done .site-status-icon {
    background: var(--site-success-soft);
    color: var(--site-success);
}

.site-order-status.is-ended .site-status-icon {
    background: var(--site-track);
    color: var(--site-muted);
}

.site-order-status form .site-button {
    width: 100%;
}

@keyframes site-fade {
    from {
        opacity: 0;
    }
}

@keyframes site-pop {
    from {
        opacity: 0;
        transform: translateY(.75rem) scale(.98);
    }
}

@keyframes site-rise {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
}

@keyframes site-sheet {
    from {
        transform: translateY(100%);
    }
}

@keyframes site-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-accent) 35%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 16px transparent;
    }
}

/* A brief, dismissible site notice and its full detail stay readable on every theme. */
.site-announcement {
    border-bottom: 1px solid color-mix(in srgb, var(--site-accent) 20%, var(--site-border));
    background: var(--site-accent-soft);
    color: var(--site-text);
    font-size: .9rem;
    line-height: 1.45;
}

.site-announcement-inner {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    max-width: var(--site-content);
    min-height: 64px;
    margin-inline: auto;
    padding: .75rem 16px;
}

.site-announcement a {
    color: inherit;
}

.site-announcement-symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--site-radius-control);
    background: var(--site-surface);
    color: var(--site-accent);
}

.site-announcement-symbol .site-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.site-announcement-copy {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: .15rem;
}

.site-announcement-copy strong {
    font-family: var(--site-font-heading);
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.site-announcement-copy a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    justify-self: start;
    font-weight: 600;
}

.site-announcement-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: .5rem;
}

.site-announcement-copy span,
.site-announcement-message {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.site-announcement .site-button-quiet {
    flex: none;
    min-height: 44px;
    background: var(--site-surface);
    border-color: var(--site-border);
    color: var(--site-text);
}

.site-announcement .site-button-quiet:hover {
    background: var(--site-hover);
    border-color: var(--site-accent);
}

.site-announcement[data-tone="warning"] {
    background: var(--site-warning-soft);
    color: var(--site-warning);
    border-color: color-mix(in srgb, var(--site-warning) 25%, var(--site-border));
}

.site-announcement[data-tone="warning"] .site-announcement-symbol,
.site-announcement-dialog[data-tone="warning"] .site-announcement-symbol {
    background: var(--site-warning-soft);
    color: var(--site-warning);
}

.site-announcement[data-tone="offer"] {
    border-bottom-color: var(--site-accent);
}

.site-announcement-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    flex: none;
    border-radius: var(--site-radius-control);
    background: transparent;
    color: currentColor;
    font: inherit;
    font-size: 1.25rem;
    cursor: pointer;
}

.site-announcement-close:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.site-announcement-dialog {
    width: min(100% - 32px, 32rem);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    color: var(--site-text);
    padding: 0;
    box-shadow: var(--site-shadow-lg);
}

.site-announcement-dialog::backdrop {
    background: rgb(16 24 40 / .45);
}

.site-announcement-dialog .site-dialog-body {
    display: grid;
    gap: 1.25rem;
}

.site-announcement-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.site-announcement-heading h2 {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.site-announcement-dialog h2,
.site-announcement-dialog p {
    margin: 0;
}

.site-announcement-dialog form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--site-border);
}

.site-hero-actions {
    margin: 1.25rem 0 0;
}

.site-page-head {
    padding: 2rem 0 .5rem;
}

/* The portal's blocks (§13.2), one after another in the site's appearance. */
.site-block {
    margin-top: 3rem;
}


.site-block.block-width-narrow { max-width: 46rem; margin-inline: auto; }
.site-block.block-align-centre { text-align: center; }
.site-block.block-align-right { text-align: right; }
.block-align-centre .site-rich, .block-align-centre .site-hours { margin-inline: auto; }
.block-align-right .site-rich, .block-align-right .site-hours { margin-left: auto; }
.block-align-centre .site-social, .block-align-centre .site-map-actions { justify-content: center; }
.block-align-right .site-social, .block-align-right .site-map-actions { justify-content: flex-end; }
.site-block.block-space-compact { margin-top: 1rem; }
.site-block.block-space-spacious { margin-top: 5rem; }
.site-block.block-surface-soft { padding: 1.5rem; background: var(--site-accent-soft); border-radius: var(--site-radius); }
.site-block.block-surface-card { padding: 1.5rem; border: 1px solid var(--site-border); border-radius: var(--site-radius); }
.site-rich blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--site-accent); }

.site-block-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--site-radius);
    background: var(--site-accent-soft);
}

.site-block-banner-image {
    display: block;
    width: 100%;
    min-height: 14rem;
    max-height: 28rem;
    object-fit: cover;
}

.site-block-banner-text {
    padding: 1.5rem;
}

.site-block-banner h2 {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.site-block-banner p {
    margin: 0 0 1rem;
}

/* Over a picture the words sit on a shade of it, white. */
.site-block-banner:not(.is-plain) .site-block-banner-text {
    position: absolute;
    inset: auto 0 0;
    background: linear-gradient(to top, rgb(0 0 0 / .65), transparent);
    color: #fff;
}

.site-block-text.has-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.site-block-text.is-image-right .site-block-text-image {
    order: 2;
}

.site-block-text-image {
    width: 100%;
    border-radius: var(--site-radius);
    object-fit: cover;
}

.site-rich {
    max-width: 44rem;
}

.site-rich h2 {
    font-size: 1.4rem;
}

.site-rich p,
.site-rich ul,
.site-rich ol {
    margin: 0 0 .75rem;
}

.site-hours {
    width: 100%;
    max-width: 40rem;
    border-collapse: collapse;
}

.site-hours th,
.site-hours td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--site-border);
    text-align: left;
}

.site-hours thead th {
    color: var(--site-muted);
    font-weight: 600;
}

.site-map {
    display: block;
    width: 100%;
    height: 22rem;
    margin: .5rem 0 1rem;
    border: 0;
    border-radius: var(--site-radius);
}

.site-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.site-featured,
.site-gallery,
.site-social {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-featured {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
}

/* Centred, the dishes keep their width and sit in the middle. */
.block-align-centre .site-featured {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 18rem));
    justify-content: center;
}

.site-featured-dish {
    display: grid;
    align-content: start;
    gap: .35rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    color: var(--site-text);
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.site-featured-dish:hover {
    border-color: var(--site-accent);
    box-shadow: var(--site-shadow-sm);
}

.site-featured-dish img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--site-radius-control);
    object-fit: cover;
}

.site-featured-name {
    font-weight: 700;
}

.site-featured-dish:hover .site-featured-name {
    color: var(--site-accent);
}

.site-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .5rem;
}

.site-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--site-radius-control);
    object-fit: cover;
}

.site-gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The small line over a heading: small capitals or script, as the site's label style sets (SiteThemes.Variables). */
.site-eyebrow {
    margin: 0 0 .4rem;
    color: var(--site-accent);
    font-family: var(--site-label-font);
    font-size: var(--site-label-size);
    font-weight: var(--site-label-weight);
    letter-spacing: var(--site-label-spacing);
    line-height: 1.15;
    text-transform: var(--site-label-case);
}

/* A block's eyebrow, heading and lead. */
.site-section-head {
    margin-bottom: 1.25rem;
}

.site-section-head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.site-section-lead {
    max-width: 40rem;
    margin: .6rem 0 0;
    color: var(--site-muted);
    font-size: 1.05rem;
}

.block-align-centre .site-section-lead { margin-inline: auto; }
.block-align-right .site-section-lead { margin-left: auto; }

.site-button-outline {
    background: transparent;
    color: var(--site-accent);
}

.site-button-outline:hover {
    border-color: var(--site-accent);
    background: color-mix(in srgb, var(--site-accent) 14%, transparent);
}

/* A landing block (§13.2): a picture across the whole width, its words over a shade of it; without a picture, the
   header's colours. Full screen or tall, its words centred, split title and text, or in the bottom corner. */
.site-landing {
    --site-landing-shade: .45;
    position: relative;
    width: 100vw;
    margin: 3rem calc(50% - 50vw) 0;
    color: #fff;
}

.site-landing.is-shade-light { --site-landing-shade: .25; }
.site-landing.is-shade-strong { --site-landing-shade: .62; }

.site-main > .site-landing:first-child {
    margin-top: -1.5rem;
}

.site-landing-frame {
    position: relative;
    display: grid;
    min-height: clamp(30rem, 78vh, 46rem);
    overflow: hidden;
    background: var(--site-header-bg);
}

.site-landing.is-height-screen .site-landing-frame {
    min-height: calc(100vh - 4.5rem);
    min-height: calc(100svh - 4.5rem);
}

.site-landing.is-plain {
    color: var(--site-header-text);
}

.site-landing.is-framed {
    padding-inline: 16px;
}

.site-landing.is-framed .site-landing-frame {
    border-radius: var(--site-radius);
}

.site-landing-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-landing:not(.is-plain) .site-landing-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / var(--site-landing-shade));
}

.site-landing.is-corner:not(.is-plain) .site-landing-frame::before {
    background:
        linear-gradient(to top, rgb(0 0 0 / .5), transparent 65%),
        rgb(0 0 0 / var(--site-landing-shade));
}

.site-landing-inner {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 1.25rem;
    width: 100%;
    max-width: var(--site-content);
    margin-inline: auto;
    padding: 5.5rem 16px 3.5rem;
}

.site-landing.is-framed .site-landing-inner {
    padding-inline: clamp(16px, 4vw, 3.5rem);
}

.site-landing.is-centred .site-landing-inner {
    justify-items: center;
    text-align: center;
}

.site-landing.is-split .site-landing-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "head lead" "hours hours" "actions actions" "quote quote";
    column-gap: clamp(2rem, 6vw, 6rem);
}

.site-landing.is-split .site-landing-head { grid-area: head; }
.site-landing.is-split .site-landing-lead { grid-area: lead; align-self: center; }
.site-landing.is-split .site-landing-hours { grid-area: hours; justify-content: center; }
.site-landing.is-split .site-landing-actions { grid-area: actions; justify-content: center; }
.site-landing.is-split .site-landing-quote { grid-area: quote; }

.site-landing.is-corner .site-landing-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-areas: "head quote" "lead quote" "hours quote" "actions quote";
    align-content: end;
    column-gap: 2rem;
}

.site-landing.is-corner .site-landing-head { grid-area: head; }
.site-landing.is-corner .site-landing-lead { grid-area: lead; }
.site-landing.is-corner .site-landing-hours { grid-area: hours; }
.site-landing.is-corner .site-landing-actions { grid-area: actions; }
.site-landing.is-corner .site-landing-quote { grid-area: quote; align-self: end; }

.site-landing-head {
    min-width: 0;
}

.site-landing .site-eyebrow {
    color: inherit;
}

.site-landing-title {
    margin: 0;
    font-size: clamp(2.5rem, 6.5vw, 5.25rem);
    line-height: 1.04;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.site-landing-line {
    display: block;
}

.site-landing-lead {
    max-width: 34rem;
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.55;
}

.site-landing-hours {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2.5rem;
    margin: 0;
}

.site-landing.is-centred .site-landing-hours {
    justify-content: center;
}

.site-landing-hours dt {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.site-landing-hours dd {
    margin: .15rem 0 0;
    font-weight: 700;
}

.site-landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .5rem 0 0;
}

.site-landing.is-centred .site-landing-actions {
    justify-content: center;
}

/* Over a picture the second button is the words' own colour, outlined. */
.site-landing:not(.is-plain) .site-button-outline {
    border-color: currentColor;
    color: inherit;
}

.site-landing:not(.is-plain) .site-button-outline:hover {
    background: rgb(255 255 255 / .14);
}

.site-landing-quote {
    margin: 0;
    max-width: 22rem;
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: var(--site-radius);
    background: rgb(0 0 0 / .28);
    padding: 1.25rem 1.35rem;
    backdrop-filter: blur(10px);
}

.site-landing.is-plain .site-landing-quote {
    border-color: color-mix(in srgb, currentColor 22%, transparent);
    background: transparent;
    backdrop-filter: none;
}

.site-landing-quote blockquote {
    margin: 0;
}

.site-landing-quote p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.site-landing-quote p::before { content: "\201C"; }
.site-landing-quote p::after { content: "\201D"; }

.site-landing-quote figcaption {
    margin-top: .75rem;
    font-size: .85rem;
    font-weight: 700;
}

/* A statement beside its paragraphs, a picture under the statement. */
.site-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2rem clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.site-intro-heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.6vw, 2.9rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.site-intro-image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 2rem;
    aspect-ratio: 4 / 3;
    border-radius: var(--site-radius);
    object-fit: cover;
}

.site-intro-body {
    padding-top: .5rem;
    font-size: 1.05rem;
}

.site-intro-body > p {
    max-width: 34rem;
    margin: 0 0 1rem;
}

.site-intro-body > .site-section-lead {
    margin-top: 0;
    color: var(--site-text);
    font-size: 1.15rem;
}

.site-intro-actions {
    margin-top: 1.5rem;
}

/* A band of large words across the page; a moving band runs its words twice, end to end. */
.site-ticker {
    width: 100vw;
    margin: 3rem calc(50% - 50vw) 0;
    overflow: hidden;
    border-block: 1px solid var(--site-border);
    padding-block: 1.25rem;
}

.site-ticker.block-space-compact { margin-top: 1rem; }
.site-ticker.block-space-spacious { margin-top: 5rem; }

.site-ticker-track {
    display: flex;
    justify-content: center;
}

.site-ticker-run {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .25rem 2.5rem;
    padding-inline: 1.25rem;
}

.site-ticker-word {
    font-family: var(--site-font-heading);
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.site-ticker-word:nth-child(3n + 2) {
    color: var(--site-accent);
    font-weight: 400;
}

.site-ticker.is-moving .site-ticker-track {
    justify-content: flex-start;
    width: max-content;
}

.site-ticker.is-moving .site-ticker-run {
    flex-wrap: nowrap;
    white-space: nowrap;
    animation: site-ticker 40s linear infinite;
}

@keyframes site-ticker {
    to { transform: translateX(-100%); }
}

/* The header's layouts: the links centred with the ordering button on the right, or the name centred between the links
   and the button with the address and telephone above. */
.site-header-action {
    min-height: 44px;
    padding-block: .45rem;
    white-space: nowrap;
}

.site-shell:is([data-header-layout="centred-links"], [data-header-layout="centred-brand"]) .site-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.site-shell[data-header-layout="centred-links"] .site-header-inner { grid-template-areas: "brand nav action"; }
.site-shell[data-header-layout="centred-brand"] .site-header-inner { grid-template-areas: "nav brand action"; }
.site-shell[data-header-layout] .site-brand { grid-area: brand; }
.site-shell[data-header-layout] .site-nav { grid-area: nav; }
.site-shell[data-header-layout] .site-header-action { grid-area: action; justify-self: end; }
.site-shell[data-header-layout="centred-links"] .site-brand { justify-self: start; }
.site-shell[data-header-layout="centred-brand"] .site-brand { justify-self: center; }
.site-shell[data-header-layout="centred-brand"] .site-nav { justify-self: start; }

.site-header-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1.5rem;
    max-width: var(--site-content);
    margin-inline: auto;
    padding: .35rem 16px 0;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-header-info a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: inherit;
    text-decoration: none;
}

/* Gilded: Roman capitals in the main colour, gold rules, upper-case buttons with a rule after them, and dishes shown
   as a strip of pictures. */
.site-shell[data-page-style="gilded"] :is(h1, h2, h3) {
    font-weight: 400;
    letter-spacing: .03em;
}

.site-shell[data-page-style="gilded"] :is(.site-section-head h2, .site-intro-heading, .site-order-category h2) {
    color: var(--site-accent);
}

.site-shell[data-page-style="gilded"] .site-landing-title {
    font-size: clamp(2.1rem, 5.2vw, 4.25rem);
    line-height: 1.22;
}

.site-shell[data-page-style="gilded"] .site-landing:not(.is-plain) .site-landing-title {
    color: color-mix(in srgb, var(--site-accent) 70%, #fff);
}

.site-shell[data-page-style="gilded"] .site-button {
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-shell[data-page-style="gilded"] :is(.site-landing-actions, .site-intro-actions) .site-button::after {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
}

.site-shell[data-page-style="gilded"] .site-header-action {
    border-color: var(--site-accent);
    background: transparent;
    color: var(--site-header-text);
}

.site-shell[data-page-style="gilded"] .site-header-action:hover {
    background: color-mix(in srgb, var(--site-accent) 18%, transparent);
}

.site-shell[data-page-style="gilded"] .site-featured {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0;
}

/* Names and prices line up under the pictures, a dish without one included. */
.site-shell[data-page-style="gilded"] .site-featured-dish {
    align-content: end;
    gap: .2rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 1rem;
    text-align: center;
}

.site-shell[data-page-style="gilded"] .site-featured-dish img {
    aspect-ratio: 4 / 5;
    margin-bottom: .75rem;
    border-radius: 0;
}

.site-shell[data-page-style="gilded"] :is(.site-featured-name, .site-dish-name) {
    font-family: var(--site-font-heading);
    font-weight: 400;
    letter-spacing: .03em;
}

.site-shell[data-page-style="gilded"] :is(.site-featured-dish .site-dish-price, .site-dish-price) {
    color: var(--site-accent);
}

.site-shell[data-page-style="gilded"] :is(.site-ticker, .site-footer) {
    border-color: color-mix(in srgb, var(--site-accent) 45%, transparent);
}

/* Noir: large light type, headings in the main colour, the second line of a landing title bold, outlined buttons over
   pictures, and silver-shaded words in a band. */
.site-shell[data-page-style="noir"] :is(h1, h2, h3) {
    font-weight: 400;
    letter-spacing: -.01em;
}

.site-shell[data-page-style="noir"] :is(.site-section-head h2, .site-intro-heading) {
    color: var(--site-accent);
    font-weight: 400;
}

.site-shell[data-page-style="noir"] .site-landing-title {
    font-size: clamp(2.75rem, 7vw, 5.75rem);
    font-weight: 300;
}

.site-shell[data-page-style="noir"] .site-landing-line + .site-landing-line {
    font-weight: 700;
}

.site-shell[data-page-style="noir"] .site-landing .site-button {
    border-color: currentColor;
    background: transparent;
    color: inherit;
    font-weight: 400;
}

.site-shell[data-page-style="noir"] .site-landing .site-button:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.site-shell[data-page-style="noir"] .site-landing .site-button-outline {
    border-color: transparent;
}

.site-shell[data-page-style="noir"] .site-landing .site-button-outline::after {
    content: "\2192";
}

.site-shell[data-page-style="noir"] .site-landing-hours {
    font-size: .9rem;
    text-align: center;
}

.site-shell[data-page-style="noir"] .site-ticker {
    border: 0;
}

.site-shell[data-page-style="noir"] .site-ticker-word:nth-child(3n + 1) {
    background: linear-gradient(90deg, var(--site-text), color-mix(in srgb, var(--site-text) 40%, var(--site-page)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-shell[data-page-style="noir"] .site-ticker-word:nth-child(3n) {
    font-weight: 700;
}

.site-shell[data-page-style="noir"] :is(.site-featured-dish, .site-dish) {
    box-shadow: none;
}

.site-shell[data-page-style="noir"] .site-featured-dish {
    border-color: transparent;
    background: transparent;
    padding: 0;
}

/* Hearth: firm headings set tight, round buttons led by an arrow in a circle, and soft cards on white. */
.site-shell[data-page-style="hearth"] :is(h1, h2, h3) {
    font-weight: 600;
    letter-spacing: -.03em;
}

.site-shell[data-page-style="hearth"] :is(.site-landing-title, .site-intro-heading) {
    font-weight: 500;
    letter-spacing: -.035em;
}

.site-shell[data-page-style="hearth"] :is(.site-landing-actions, .site-intro-actions) .site-button:not(.site-button-outline) {
    position: relative;
    padding-left: 3.1rem;
}

.site-shell[data-page-style="hearth"] :is(.site-landing-actions, .site-intro-actions) .site-button:not(.site-button-outline)::before,
.site-shell[data-page-style="hearth"] :is(.site-landing-actions, .site-intro-actions) .site-button:not(.site-button-outline)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: .4rem;
    width: 2.1rem;
    height: 2.1rem;
    translate: 0 -50%;
    border-radius: 50%;
}

.site-shell[data-page-style="hearth"] :is(.site-landing-actions, .site-intro-actions) .site-button:not(.site-button-outline)::before {
    background: color-mix(in srgb, var(--site-on-accent) 22%, transparent);
}

.site-shell[data-page-style="hearth"] :is(.site-landing-actions, .site-intro-actions) .site-button:not(.site-button-outline)::after {
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 1rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.site-shell[data-page-style="hearth"] .site-featured-dish {
    border-color: transparent;
    box-shadow: var(--site-shadow-md);
}

.site-shell[data-page-style="hearth"] .site-ticker-word {
    font-weight: 600;
    letter-spacing: -.03em;
    text-transform: none;
}

/* A gallery's larger picture: shown while the address names it, closed by going back to the page. */
.site-lightbox {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    place-items: center;
    padding: 16px;
    background: rgb(0 0 0 / .85);
}

.site-lightbox:target {
    display: grid;
}

.site-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 32px);
}

.site-lightbox-close {
    position: absolute;
    top: 8px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(0 0 0 / .35);
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    text-decoration: none;
}

.site-social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 40rem) {
    .site-brand-hero.has-image {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-brand-hero .site-hero-image {
        grid-row: 1;
        min-height: 0;
        height: 13rem;
    }

    .site-brand-hero .site-hero-copy {
        padding: 1.5rem;
    }

    .site-store-logo {
        flex-basis: 3.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }

    .site-menu-heading {
        flex-wrap: nowrap;
        gap: 1rem;
        margin-top: 1rem;
    }

    .site-menu-heading h2 {
        font-size: 1.3rem;
    }

    .site-order .site-order-search {
        flex: 1 1 auto;
    }

    .site-order .site-service-panel,
    .site-order .site-allergy-notice {
        margin-top: .75rem;
    }

    .site-allergy-notice summary {
        padding-block: .7rem;
        cursor: pointer;
    }

    .site-allergy-notice:not([open]) summary > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-allergy-notice summary > .site-icon:last-child {
        display: block;
    }

    .site-shell[data-menu-layout] .site-category-bar {
        margin-top: .75rem;
    }

    .site-order-category {
        margin-top: 1rem;
    }

    .site-category-title {
        margin-bottom: .6rem;
    }

    .site-announcement-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: .65rem;
    }

    .site-announcement-copy {
        flex-basis: calc(100% - 3rem);
    }

    .site-gallery-columns-3,
    .site-gallery-columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-announcement-actions {
        margin-left: auto;
    }

    .site-main {
        padding-block: 1rem 3rem;
    }

    .site-field-pair,
    .site-account-grid {
        grid-template-columns: 1fr;
    }

    .site-form-page:has(.site-form) {
        margin-top: 0;
        padding: 1.25rem 1rem;
    }

    .site-hours th,
    .site-hours td {
        padding: .65rem .35rem;
        font-size: .875rem;
        font-variant-numeric: tabular-nums;
    }

    .site-hours td:not(:first-child) {
        white-space: nowrap;
    }

    .site-block-text.has-image {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-block-text.is-image-right .site-block-text-image {
        order: 0;
    }

    .site-panel {
        padding: 1.1rem 1rem;
    }

    /* The store's card is compact, so the first dishes are on the first screen. */
    .site-shell[data-menu-layout] .site-store-card {
        padding: .85rem 1rem;
    }

    .site-store-copy {
        gap: .35rem;
    }

    .site-store-card h1 {
        font-size: 1.4rem;
    }

    /* The banner runs the width of the screen, from the header down. */
    .site-main > .site-banner:first-child {
        width: calc(100% + 32px);
        height: clamp(9rem, 42vw, 13rem);
        margin: -1rem -16px 0;
        border-radius: 0;
    }

    .site-main > .site-order-banner:first-child {
        height: 5.5rem;
    }

    .site-shell.site-header-over-banner:has(.site-main > :is(.site-banner, .site-brand-hero.has-image, .site-landing:not(.is-plain)):first-child) .site-order-banner {
        height: 10rem;
    }

    .site-banner + .site-order .site-store-card {
        margin: -2rem 0 0;
    }

    /* The product window rises from the foot of the screen. */
    .site-dialog,
    .site-dialog-small {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: var(--site-radius) var(--site-radius) 0 0;
    }

    .site-dialog[open] {
        animation: site-sheet 280ms var(--site-ease);
    }

    .site-dialog-body {
        --site-dialog-x: 16px;
        --site-dialog-y: 1.25rem;
    }

    .site-dialog-body h2 {
        font-size: 1.3rem;
    }

    .site-dish {
        min-height: 7rem;
        padding: .9rem;
    }

    .site-dish-picture {
        width: 6rem;
        height: 6rem;
    }

    .site-dish:has(.site-dish-picture) .site-dish-add {
        right: 1.25rem;
        bottom: calc((100% - 6rem) / 2 + .35rem);
    }

    .site-status-card {
        padding: 1.75rem 1.1rem;
    }
}

@media (max-width: 60rem) {
    /* On a narrower screen the header's links scroll in a row under the name. */
    .site-header-inner {
        flex-wrap: wrap;
        gap: 0;
        min-height: 0;
        padding-block: .4rem;
    }

    .site-nav {
        width: calc(100% + 32px);
        min-width: 0;
        overflow-x: auto;
        margin-inline: -16px;
        padding-inline: 8px;
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav a {
        min-height: 44px;
        padding-inline: .75rem;
        font-size: .95rem;
    }

    .site-order {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-shell[data-menu-layout] .site-order {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .site-shell[data-menu-layout="editorial"] .site-menu-workspace,
    .site-shell[data-menu-layout="signature"] .site-menu-workspace {
        display: block;
    }

    .site-shell[data-menu-layout="editorial"] .site-store-card {
        border-width: 1px;
        border-radius: var(--site-radius);
        background: var(--site-surface);
        padding: 1.25rem;
        box-shadow: var(--site-shadow-sm);
    }

    .site-shell[data-menu-layout="editorial"] .site-category-bar,
    .site-shell[data-menu-layout="signature"] .site-category-bar {
        top: 0;
        margin-top: 1.5rem;
        border: 0;
        border-radius: 0;
        background: var(--site-page);
        padding-block: 0;
        box-shadow: 0 1px 0 var(--site-border);
    }

    .site-shell[data-menu-layout="signature"] .site-category-heading {
        display: none;
    }

    .site-shell[data-menu-layout="editorial"] .site-category-bar ul,
    .site-shell[data-menu-layout="signature"] .site-category-bar ul {
        flex-direction: row;
        overflow-x: auto;
        padding: .75rem 0;
    }

    .site-shell[data-menu-layout="editorial"] .site-category-bar a,
    .site-shell[data-menu-layout="signature"] .site-category-bar a {
        width: auto;
        min-height: 44px;
        border: 1px solid var(--site-border);
        border-radius: var(--site-radius-button);
        background: var(--site-surface);
        padding: 0 1rem;
        white-space: nowrap;
    }

    .site-shell[data-menu-layout="editorial"] .site-category-bar a[aria-current],
    .site-shell[data-menu-layout="signature"] .site-category-bar a[aria-current] {
        border-color: var(--site-accent);
        background: var(--site-accent);
        color: var(--site-on-accent);
    }

    .site-shell[data-menu-layout="editorial"] .site-order-category {
        margin-top: 1.75rem;
    }

    .site-shell[data-menu-layout="market"] .site-dishes {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-shell[data-menu-layout="market"] .site-dish {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: none;
        min-height: 8rem;
        overflow: visible;
        padding: .9rem;
    }

    .site-shell[data-menu-layout="market"] .site-dish-picture {
        grid-row: auto;
        grid-column: auto;
        width: 6rem;
        height: 6rem;
        aspect-ratio: auto;
    }

    .site-shell[data-menu-layout="market"] .site-dish-text {
        grid-row: auto;
        grid-column: auto;
        padding: 0;
    }

    .site-shell[data-menu-layout="market"] .site-dish:has(.site-dish-picture) .site-dish-add {
        right: 1.2rem;
        bottom: calc((100% - 6rem) / 2 + .35rem);
    }

    /* The categories run the width of the screen. */
    .site-category-bar {
        margin-inline: -16px;
        padding-inline: 16px;
    }

    /* On a phone the basket is a bar at the foot of the screen that opens it over the page. */
    .site-basket {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: none;
        align-content: start;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding: 1rem 16px calc(1.5rem + env(safe-area-inset-bottom));
        box-shadow: none;
    }

    .site-banner + .site-order .site-basket {
        margin-top: 0;
    }

    .site-basket.is-open {
        display: grid;
        animation: site-rise 260ms var(--site-ease);
    }

    .site-basket-close {
        display: grid;
    }

    .site-basket-bar:not([hidden]) {
        position: fixed;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 12px;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: .75rem;
        min-height: 56px;
        border: 0;
        border-radius: var(--site-radius-button);
        background: var(--site-accent);
        color: var(--site-on-accent);
        padding: 0 1.1rem;
        font: inherit;
        font-weight: 700;
        box-shadow: var(--site-shadow-lg);
        cursor: pointer;
        animation: site-rise 260ms var(--site-ease);
    }

    .site-basket-bar:active {
        background: var(--site-accent-dark);
    }

    .site-basket-bar > span:nth-child(2) {
        flex: 1;
        text-align: center;
    }

    .site-basket-bar-count {
        display: grid;
        place-items: center;
        min-width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--site-on-accent) 22%, transparent);
        padding: 0 .45rem;
        font-size: .85rem;
    }

    .site-basket-bar > span:last-child {
        font-variant-numeric: tabular-nums;
    }

    /* While the bar shows, the page ends its height (and the gap under it) lower, so it never covers the last words. */
    .site-shell:has(.site-basket-bar:not([hidden])) .site-footer-inner {
        padding-bottom: calc(2rem + 12px + 56px + env(safe-area-inset-bottom));
    }

    /* While the dish search has the focus the keyboard is up, and the bar steps aside. */
    .site-order[data-searching] .site-basket-bar {
        display: none;
    }
}

@media (max-width: 60rem) {
    /* The centred header layouts: the name and the ordering button on one row, the links scrolling under them. */
    .site-shell[data-header-layout] .site-header-inner {
        display: flex;
    }

    .site-shell[data-header-layout] .site-header-action {
        order: 2;
        margin-left: auto;
        padding-inline: 1rem;
    }

    .site-shell[data-header-layout] .site-nav {
        order: 3;
    }

    .site-landing-inner {
        padding-top: 8rem;
    }
}

@media (max-width: 40rem) {
    /* A landing's and a statement's parts one under another. */
    .site-landing.is-split .site-landing-inner,
    .site-landing.is-corner .site-landing-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "lead" "hours" "actions" "quote";
    }

    .site-landing.is-split :is(.site-landing-hours, .site-landing-actions) {
        justify-content: flex-start;
    }

    .site-landing-inner {
        padding-bottom: 2.5rem;
    }

    .site-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The contact bar keeps the telephone. */
    .site-header-info > span {
        display: none;
    }
}