.restaurant-font-modern {
    font-family: "DM Sans", Arial, sans-serif;
}

.restaurant-font-system {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.restaurant-font-classic {
    font-family: Georgia, "Times New Roman", serif;
}

.restaurant-font-humanist {
    font-family: "Trebuchet MS", Arial, sans-serif;
}

body.restaurant-branded {
    --restaurant-surface: #fff;
    --restaurant-surface-soft: #f6f8f5;
    --restaurant-surface-ink: #17201d;
    --restaurant-surface-muted: #626d68;
    --restaurant-surface-line: #e1e5e2;
    background: var(--restaurant-brand-background);
    color: var(--restaurant-brand-text);
}

body.restaurant-branded :where(h1, h2, h3, h4, p, button, input, select, textarea) {
    font-family: inherit;
}

body.restaurant-branded .guest-header {
    border-bottom-color: rgba(127, 127, 127, .35);
    background: var(--restaurant-brand-background);
    color: var(--restaurant-brand-text);
}

body.restaurant-branded .guest-header .guest-location small,
body.restaurant-branded .guest-header .guest-location strong,
body.restaurant-branded .good-eating-co-brand {
    color: inherit;
}

body.restaurant-branded .guest-main,
body.restaurant-branded .detail-main {
    background: var(--restaurant-brand-background);
    color: var(--restaurant-brand-text);
}

body.restaurant-branded .menu-title h2,
body.restaurant-branded .related-heading h2,
body.restaurant-branded .restaurant-service-reviews > .related-heading h2 {
    color: var(--restaurant-brand-text);
}

body.restaurant-branded :is(
    .ordering-mode,
    .preorder-field,
    .product-card,
    .cart-panel,
    .modal-card,
    .cookie-banner,
    .table-service-panel,
    .review-card,
    .review-form,
    .detail-card,
    .related-card,
    .language-switch > div,
    .catalog-empty.compact
) {
    background: var(--restaurant-surface);
    color: var(--restaurant-surface-ink);
}

body.restaurant-branded :is(
    .category-nav button:not(.active),
    .guest-header .button.ghost,
    .guest-header .icon-button,
    .guest-header .language-button,
    .guest-header .cart-mobile,
    .language-switch summary,
    .quantity button
) {
    background: var(--restaurant-surface);
    color: var(--restaurant-surface-ink);
}

body.restaurant-branded .mode:not(.active),
body.restaurant-branded :is(
    .product-options-modal fieldset label,
    .product-detail-order fieldset label,
    .extra-option-row,
    .checkout-payment-choice label
) {
    background: var(--restaurant-surface-soft);
    color: var(--restaurant-surface-ink);
}

body.restaurant-branded :is(
    .preorder-field,
    .cart-panel,
    .modal-card,
    .table-service-panel,
    .review-form,
    .detail-card
) :is(input, textarea, select) {
    border-color: var(--restaurant-surface-line);
    background: var(--restaurant-surface);
    color: var(--restaurant-surface-ink);
}

body.restaurant-branded :is(
    .menu-title,
    .related-heading,
    .restaurant-service-reviews > .related-heading,
    .product-reviews > .related-heading
) > .eyebrow {
    color: var(--restaurant-brand-text);
    opacity: .78;
}

body.restaurant-branded .guest-footer :is(p, a, button),
body.restaurant-branded .public-site-footer p {
    color: var(--restaurant-brand-text);
    opacity: .78;
}

body.restaurant-branded .guest-footer .brand,
body.restaurant-branded .public-site-footer .brand {
    opacity: 1;
}

body.restaurant-branded .public-site-footer nav a {
    color: var(--restaurant-brand-text);
}

.restaurant-co-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.restaurant-co-branding .good-eating-co-brand,
.restaurant-co-branding .restaurant-owned-brand {
    flex: 0 1 auto;
}

.restaurant-header-contacts {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.restaurant-header-phone,
.restaurant-header-whatsapp {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.restaurant-header-phone:hover,
.restaurant-header-phone:focus-visible {
    background: var(--restaurant-surface);
    color: var(--restaurant-surface-ink);
}

.restaurant-header-whatsapp {
    border-color: #178a4c;
    background: #178a4c;
    color: #fff;
}

.restaurant-header-whatsapp:hover,
.restaurant-header-whatsapp:focus-visible {
    border-color: #106f3c;
    background: #106f3c;
    color: #fff;
}

.restaurant-mini-logo.logo-image {
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.restaurant-mini-logo.logo-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.restaurant-menu-guest-header .guest-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
}

.restaurant-menu-guest-header .restaurant-co-branding {
    grid-column: 1;
    justify-self: start;
}

.restaurant-menu-guest-header .guest-actions {
    grid-column: 2;
    justify-self: end;
}

.product-detail-guest-header .guest-header-inner {
    max-width: 1360px;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
}

.product-detail-guest-header .restaurant-co-branding {
    grid-column: 1;
    justify-self: start;
}

.product-detail-guest-header .guest-actions {
    grid-column: 2;
    justify-self: end;
}

.co-brand-separator {
    font-size: 18px;
    font-weight: 800;
    opacity: .5;
}

.restaurant-owned-brand,
.restaurant-owned-brand > div {
    min-width: 0;
}

.restaurant-owned-brand strong {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restaurant-contact-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 0 20px;
}

.restaurant-contact-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: var(--restaurant-brand-background);
    color: var(--restaurant-brand-text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.restaurant-contact-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(20, 40, 34, .12);
}

.restaurant-contact-action.whatsapp {
    border-style: dashed;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 820px) {
    .product-detail-guest-header .guest-header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 8px;
    }

    .product-detail-guest-header .restaurant-co-branding {
        grid-column: 1;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .product-detail-guest-header .guest-actions {
        grid-column: 2;
        justify-self: end;
        min-width: 0;
    }

    .restaurant-co-branding {
        gap: 7px;
    }

    .restaurant-co-branding .good-eating-co-brand > span:last-child,
    .co-brand-separator {
        display: none;
    }

    .restaurant-co-branding .restaurant-owned-brand {
        display: flex;
    }

    .restaurant-owned-brand strong {
        max-width: 120px;
    }
}

@media (max-width: 1050px) {
    .restaurant-header-phone-number,
    .restaurant-header-whatsapp-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .restaurant-header-phone,
    .restaurant-header-whatsapp {
        width: 40px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .restaurant-owned-brand > div small {
        display: none;
    }

    .restaurant-owned-brand strong {
        max-width: 78px;
    }

    .restaurant-contact-actions {
        justify-content: flex-start;
        padding: 0 14px;
    }

    .restaurant-contact-action {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    body.restaurant-branded .public-site-footer nav a {
        background: var(--restaurant-surface);
        color: var(--restaurant-surface-ink);
    }
}

@media (max-width: 480px) {
    body.restaurant-branded .guest-header-inner {
        height: auto;
        min-height: 72px;
        padding-top: 7px;
        padding-bottom: 7px;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }

    body.restaurant-branded .restaurant-co-branding,
    body.restaurant-branded .product-detail-guest-header .restaurant-co-branding {
        grid-column: 1;
        grid-row: 1;
        justify-self: stretch;
        width: 100%;
        overflow: hidden;
    }

    body.restaurant-branded .restaurant-header-phone {
        width: auto;
        max-width: 132px;
        padding: 7px 9px;
    }

    body.restaurant-branded .restaurant-header-contacts {
        margin-left: auto;
        gap: 5px;
    }

    body.restaurant-branded .restaurant-header-whatsapp {
        width: 40px;
        padding: 0;
    }

    body.restaurant-branded .restaurant-header-phone-number {
        position: static;
        width: auto;
        height: auto;
        min-width: 0;
        overflow: hidden;
        clip: auto;
        text-overflow: ellipsis;
    }

    body.restaurant-branded .guest-actions,
    body.restaurant-branded .product-detail-guest-header .guest-actions {
        grid-column: 1;
        grid-row: 2;
        justify-self: stretch;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.restaurant-branded .guest-actions::-webkit-scrollbar {
        display: none;
    }
}