:root {
    color-scheme: dark;
    --color-bg: #090a0a;
    --color-surface: #151716;
    --color-surface-2: #20221f;
    --color-surface-3: #2a2418;
    --color-text: #fff7e8;
    --color-muted: #bdb2a0;
    --color-accent: #d6a43d;
    --color-accent-2: #f0c76c;
    --color-danger: #ef6b5d;
    --color-success: #75d58f;
    --radius-card: 8px;
    --shadow-card: 0 18px 46px rgba(0, 0, 0, 0.36);
    --color-line: rgba(255, 247, 232, 0.13);
    --color-line-strong: rgba(214, 164, 61, 0.42);
    --color-ink: #11100c;
    --space-page: 14px;
    --header-height: 72px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background:
        linear-gradient(145deg, rgba(214, 164, 61, 0.09), transparent 30rem),
        linear-gradient(200deg, rgba(255, 247, 232, 0.035), transparent 34rem),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
        var(--color-bg);
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.modal-open,
body.drawer-open,
body.checkout-open,
body.offer-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button:disabled {
    cursor: wait;
    opacity: 0.62;
}

a {
    color: inherit;
    text-decoration: none;
}

a,
button,
input,
select,
textarea {
    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-accent);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 8px;
    font-size: clamp(2.55rem, 13vw, 5.2rem);
    line-height: 0.9;
    overflow-wrap: anywhere;
}

h2 {
    margin-bottom: 4px;
    font-size: 1.45rem;
    line-height: 1.1;
}

h3 {
    margin-bottom: 6px;
    font-size: 1.02rem;
    line-height: 1.18;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.numberish {
    direction: ltr;
    unicode-bidi: isolate;
}

.skip-link {
    position: absolute;
    inset-block-start: -80px;
    inset-inline-start: 16px;
    z-index: 60;
    padding: 10px 14px;
    border-radius: var(--radius-card);
    background: var(--color-accent);
    color: var(--color-ink);
    font-weight: 900;
}

.skip-link:focus {
    inset-block-start: 12px;
}

.site-header {
    border-bottom: 1px solid var(--color-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0)),
        linear-gradient(140deg, rgba(214, 164, 61, 0.12), transparent 46%),
        #111312;
}

.site-header.compact {
    position: sticky;
    top: 0;
    z-index: 20;
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--header-height);
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px var(--space-page);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 4px;
    border-radius: 10px;
}

.brand-lockup strong,
.brand-lockup small {
    display: block;
}

.brand-lockup strong {
    color: var(--color-text);
    font-size: 1.12rem;
    line-height: 1;
}

.brand-lockup small {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    gap: 8px;
}

.header-order-chip {
    display: grid;
    min-width: 0;
    max-width: 190px;
    min-height: 42px;
    padding: 7px 10px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-card);
    background: rgba(214, 164, 61, 0.13);
    color: var(--color-text);
}

.header-order-chip span,
.header-order-chip small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-order-chip span {
    font-size: 0.88rem;
    font-weight: 900;
}

.header-order-chip small {
    color: var(--color-accent-2);
    font-size: 0.72rem;
    font-weight: 900;
}

.header-order-chip.needs-confirmation {
    border-color: rgba(239, 107, 93, 0.72);
    background: rgba(239, 107, 93, 0.2);
    box-shadow: 0 0 0 2px rgba(239, 107, 93, 0.08);
}

.header-order-chip.is-ready {
    border-color: rgba(117, 213, 143, 0.58);
    background: rgba(117, 213, 143, 0.14);
}

.language-control {
    flex: 0 0 auto;
}

.language-control select {
    min-height: 40px;
    max-width: 122px;
    padding: 8px 30px 8px 11px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
    font-weight: 800;
}

[dir="rtl"] .language-control select {
    padding: 8px 11px 8px 32px;
}

.hero-panel {
    display: grid;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px var(--space-page) 24px;
}

.hero-copy,
.hero-action,
.hero-showcase {
    min-width: 0;
}

.hero-copy {
    align-self: end;
}

.eyebrow {
    margin: 0 0 7px;
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tagline {
    margin-bottom: 7px;
    color: var(--color-text);
    font-size: clamp(1.13rem, 4vw, 1.58rem);
    font-weight: 900;
}

.meta-line,
.section-heading p,
.field-hint,
.cart-footer p,
.checkout-note,
.status-card p,
.item-description,
.cart-line-options,
.hero-action p {
    color: var(--color-muted);
}

.hero-action {
    display: grid;
    gap: 10px;
    align-content: end;
}

.hero-action p {
    margin: 0;
    font-size: 0.93rem;
}

.hero-cta {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-showcase {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid rgba(214, 164, 61, 0.28);
    border-radius: var(--radius-card);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-card);
}

.hero-showcase img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    display: block;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.04);
}

.hero-showcase::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 34%, rgba(9, 10, 10, 0.76));
    pointer-events: none;
}

.pickup-card {
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 12px;
    z-index: 1;
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 247, 232, 0.18);
    border-radius: var(--radius-card);
    background: rgba(17, 19, 18, 0.82);
    backdrop-filter: blur(10px);
}

.pickup-card span {
    color: var(--color-accent-2);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pickup-card strong {
    color: var(--color-text);
}

.pickup-card.needs-confirmation {
    border-color: rgba(239, 107, 93, 0.72);
    background: rgba(70, 29, 24, 0.88);
}

.pickup-card.is-ready {
    border-color: rgba(117, 213, 143, 0.58);
    background: rgba(23, 54, 34, 0.86);
}

.hero-steps {
    display: grid;
    gap: 7px;
    margin: 2px 0 0;
    padding: 0;
    counter-reset: hero-step;
    list-style: none;
}

.hero-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.035);
    color: var(--color-text);
    font-weight: 800;
}

.hero-steps li::before {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-ink);
    counter-increment: hero-step;
    content: counter(hero-step);
    font-size: 0.72rem;
    font-weight: 900;
}

main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px var(--space-page) 100px;
}

.menu-section {
    scroll-margin-top: 18px;
}

.menu-section:focus {
    outline: none;
}

.status-main {
    display: grid;
    min-height: calc(100vh - var(--header-height));
    place-items: start center;
    padding-top: 18px;
}

.status-banner,
.form-error {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface-2);
    color: var(--color-text);
}

.current-order-banner {
    margin-bottom: 14px;
}

.current-order-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-card);
    background:
        linear-gradient(135deg, rgba(214, 164, 61, 0.16), rgba(255, 255, 255, 0.035)),
        var(--color-surface);
    box-shadow: var(--shadow-card);
}

.current-order-card.needs-confirmation {
    border-color: rgba(240, 199, 108, 0.74);
    background:
        linear-gradient(135deg, rgba(240, 199, 108, 0.22), rgba(239, 107, 93, 0.1)),
        var(--color-surface);
}

.current-order-card.is-ready {
    border-color: rgba(117, 213, 143, 0.55);
    background:
        linear-gradient(135deg, rgba(117, 213, 143, 0.14), rgba(255, 255, 255, 0.035)),
        var(--color-surface);
}

.current-order-card.is-terminal {
    border-color: var(--color-line);
    background: var(--color-surface-2);
    box-shadow: none;
}

.current-order-copy h2 {
    margin-bottom: 6px;
}

.current-order-copy p:not(.eyebrow) {
    margin-bottom: 0;
    color: var(--color-muted);
}

.current-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.current-order-meta span {
    padding: 5px 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: rgba(0, 0, 0, 0.16);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.current-order-actions {
    display: grid;
    gap: 9px;
}

.current-order-actions .primary-action,
.current-order-actions .ghost-button {
    display: grid;
    place-items: center;
    width: 100%;
    text-align: center;
}

.time-offer-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    align-items: end;
    padding: 18px var(--space-page);
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(8px);
}

.time-offer-sheet {
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(240, 199, 108, 0.68);
    border-radius: var(--radius-card);
    background:
        linear-gradient(150deg, rgba(240, 199, 108, 0.18), rgba(239, 107, 93, 0.12)),
        #151716;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

.time-offer-sheet h2 {
    margin-bottom: 8px;
}

.time-offer-sheet p:not(.eyebrow) {
    color: var(--color-muted);
}

.time-offer-minutes {
    display: block;
    margin-bottom: 8px;
    color: var(--color-accent-2);
    font-size: 1.55rem;
    line-height: 1.05;
}

.time-offer-actions {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.time-offer-error {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(239, 107, 93, 0.58);
    border-radius: var(--radius-card);
    background: rgba(239, 107, 93, 0.12);
    color: #ffd9d3;
}

.form-error {
    border-color: rgba(239, 107, 93, 0.58);
    background: rgba(239, 107, 93, 0.12);
    color: #ffd9d3;
}

.form-error p {
    margin-bottom: 10px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 12px;
}

.section-heading h2 {
    margin: 0;
}

.section-heading > p,
.section-heading div + p {
    margin-bottom: 1px;
    text-align: end;
}

.category-tabs {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--space-page) * -1) 14px;
    padding: 10px var(--space-page);
    overflow-x: auto;
    border-block: 1px solid var(--color-line);
    background: rgba(9, 10, 10, 0.88);
    backdrop-filter: blur(12px);
    scrollbar-width: thin;
}

.tab-button {
    flex: 0 0 auto;
    min-height: 42px;
    max-width: 220px;
    padding: 9px 13px;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-button.active {
    border-color: var(--color-line-strong);
    background: #2b2417;
    color: var(--color-accent);
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}

.menu-card {
    display: grid;
    grid-template-columns: 94px 1fr;
    gap: 13px;
    min-height: 136px;
    padding: 11px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background:
        linear-gradient(150deg, rgba(255, 247, 232, 0.045), transparent 54%),
        rgba(21, 23, 22, 0.96);
    box-shadow: var(--shadow-card);
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.menu-card:hover {
    border-color: rgba(214, 164, 61, 0.34);
    background:
        linear-gradient(150deg, rgba(214, 164, 61, 0.08), transparent 54%),
        rgba(21, 23, 22, 0.98);
    transform: translateY(-1px);
}

.menu-media,
.menu-card img,
.menu-image-placeholder {
    width: 94px;
    height: 108px;
}

.menu-card img,
.menu-image-placeholder {
    display: block;
    border-radius: var(--radius-card);
    background: var(--color-surface-2);
}

.menu-card img {
    object-fit: cover;
}

.menu-image-placeholder {
    display: grid;
    place-items: center;
    padding: 10px;
    border: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.menu-card-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.menu-card-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;
}

.menu-card h3 {
    margin: 0;
    overflow-wrap: anywhere;
}

.price-pill {
    padding: 3px 7px;
    border: 1px solid rgba(214, 164, 61, 0.28);
    border-radius: 999px;
    background: rgba(214, 164, 61, 0.1);
    color: var(--color-accent-2);
    font-weight: 900;
    white-space: nowrap;
}

.item-description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.94rem;
}

.modal-description {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.primary-action,
.ghost-button,
.small-button,
.danger-button,
.icon-button {
    border-radius: var(--radius-card);
    font-weight: 900;
}

.primary-action {
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 231, 164, 0.28);
    background: linear-gradient(180deg, #f0c76c, var(--color-accent));
    color: var(--color-ink);
    box-shadow: 0 10px 24px rgba(214, 164, 61, 0.2);
}

.primary-action:hover {
    filter: brightness(1.04);
}

.primary-action.wide,
.ghost-button.wide,
.danger-button.wide {
    width: 100%;
}

.ghost-button {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--color-line);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text);
}

.small-button {
    min-height: 40px;
    margin-top: auto;
    padding: 8px 12px;
    border: 1px solid rgba(214, 164, 61, 0.26);
    background: rgba(214, 164, 61, 0.12);
    color: var(--color-accent-2);
}

.danger-button {
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid rgba(239, 107, 93, 0.45);
    background: rgba(239, 107, 93, 0.18);
    color: #ffd6d0;
}

.icon-button {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--color-line);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1.25rem;
}

.cart-drawer {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: flex;
    width: 100%;
    max-height: min(84vh, 760px);
    transform: translateY(105%);
    flex-direction: column;
    border: 1px solid var(--color-line);
    border-block-end: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(21, 23, 22, 0.99);
    box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.45);
    transition: transform 180ms ease;
}

.cart-drawer.open {
    transform: translateY(0);
}

.drawer-handle {
    width: 44px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: rgba(255, 247, 232, 0.26);
}

.drawer-header,
.cart-footer {
    padding: 14px;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--color-line);
}

.drawer-header h2 {
    margin: 0;
}

.cart-items {
    flex: 1;
    overflow: auto;
    padding: 4px 14px;
}

.cart-line {
    display: grid;
    gap: 8px;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-line);
}

.cart-line-title {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.cart-line-title strong {
    overflow-wrap: anywhere;
}

.cart-line-options {
    font-size: 0.92rem;
}

.dot-separator {
    color: var(--color-line-strong);
}

.quantity-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-row button {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-weight: 900;
}

.quantity-row strong {
    display: inline-grid;
    min-width: 32px;
    place-items: center;
}

.quantity-row .remove-line {
    width: auto;
    min-width: 80px;
    margin-inline-start: auto;
    padding: 0 12px;
}

.quantity-row-large button {
    width: 46px;
    height: 46px;
}

.cart-footer {
    border-top: 1px solid var(--color-line);
    background: rgba(32, 34, 31, 0.92);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 1.08rem;
}

.cart-total strong {
    color: var(--color-accent);
}

.sticky-cart {
    position: fixed;
    inset-inline: 14px;
    bottom: 14px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    max-width: 560px;
    margin-inline: auto;
    padding: 12px 16px;
    border: 1px solid rgba(255, 231, 164, 0.34);
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, #e0b14b, var(--color-accent));
    color: var(--color-ink);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
    font-weight: 900;
}

.sticky-cart strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--color-ink);
    color: var(--color-accent);
}

.checkout-panel,
.status-card {
    max-width: 720px;
    margin: 0 auto;
}

.order-summary {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.checkout-form {
    display: grid;
    gap: 10px;
}

label {
    font-weight: 900;
}

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
    color: rgba(189, 178, 160, 0.68);
}

textarea {
    min-height: 96px;
    resize: vertical;
}

.field-hint {
    margin: -3px 0 4px;
    font-size: 0.92rem;
}

.checkout-note {
    margin: 6px 0 4px;
    padding: 12px;
    border-inline-start: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--color-surface);
}

[dir="rtl"] .checkout-note {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.72);
}

.item-modal {
    position: relative;
    width: min(100%, 640px);
    max-height: 92vh;
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--color-surface);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.55);
}

.modal-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
}

.modal-image {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--radius-card);
    background: var(--color-surface-2);
}

.item-modal h2 {
    padding-inline-end: 48px;
}

.option-group,
.variant-group {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
}

.choice-option {
    display: block;
}

.choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-option span {
    display: grid;
    min-height: 46px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-weight: 800;
}

.choice-option input:checked + span {
    border-color: var(--color-line-strong);
    background: #2b2417;
    color: var(--color-accent);
}

.modal-actions {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.status-card {
    width: min(100%, 720px);
    padding: 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: rgba(21, 23, 22, 0.96);
    box-shadow: var(--shadow-card);
}

.status-card.centered {
    margin-top: 10px;
}

.status-card h1 {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 8vw, 3.2rem);
    line-height: 1;
}

.status-card h2 {
    margin-bottom: 8px;
}

.status-details {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.status-meta,
.status-items {
    display: grid;
    gap: 9px;
}

.status-items {
    margin-top: 4px;
}

.status-items h3 {
    margin-bottom: 0;
    color: var(--color-accent);
}

.status-line,
.status-order-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--color-line);
}

.status-line-total strong,
.status-order-line > strong {
    color: var(--color-accent);
}

.status-order-line p {
    margin: 4px 0 0;
}

.status-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.empty-state {
    padding: 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-muted);
}

@media (max-width: 559px) {
    .header-bar {
        flex-wrap: wrap;
        gap: 8px;
        width: 100vw;
        max-width: 100vw;
    }

    .site-header,
    main {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .brand-lockup strong {
        font-size: 1rem;
    }

    .brand-lockup small {
        font-size: 0.7rem;
    }

    h1 {
        font-size: 3rem;
        line-height: 0.96;
    }

    .header-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 6px;
        width: calc(100vw - (var(--space-page) * 2));
        max-width: calc(100vw - (var(--space-page) * 2));
        min-width: 0;
    }

    .header-order-chip {
        flex: 1 1 auto;
        max-width: 146px;
        padding-inline: 8px;
    }

    .language-control {
        margin-inline-start: 0;
    }

    .language-control select {
        width: 104px;
        max-width: 104px;
        padding-inline-start: 10px;
    }

    .hero-panel,
    .hero-copy,
    .hero-action,
    .hero-showcase {
        max-width: 100%;
    }

    .meta-line,
    .hero-action p {
        overflow-wrap: anywhere;
    }
}

@media (min-width: 560px) {
    :root {
        --space-page: 20px;
    }

    .current-order-card {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
        align-items: center;
    }

    .hero-action {
        min-width: 220px;
    }

    .hero-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 760px) {
    :root {
        --space-page: 24px;
    }

    .hero-panel {
        grid-template-areas:
            "copy showcase"
            "action showcase";
        grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
        align-items: stretch;
        gap: 22px;
        padding-block: 30px;
    }

    .hero-copy {
        grid-area: copy;
    }

    .hero-showcase {
        grid-area: showcase;
        min-height: 320px;
    }

    .hero-showcase img {
        min-height: 320px;
    }

    .hero-action {
        grid-area: action;
        grid-template-columns: minmax(180px, 250px) 1fr;
        align-items: center;
    }

    .hero-action p {
        margin: 0;
    }

    .hero-steps {
        grid-column: 1 / -1;
    }

    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-card {
        grid-template-columns: 112px 1fr;
    }

    .menu-media,
    .menu-card img,
    .menu-image-placeholder {
        width: 112px;
        height: 126px;
    }

    .modal-backdrop {
        align-items: center;
    }

    .item-modal {
        border-radius: var(--radius-card);
    }
}

@media (min-width: 900px) {
    .cart-drawer {
        inset: 0 0 0 auto;
        width: min(100vw, 430px);
        max-height: none;
        transform: translateX(105%);
        border-block-end: 1px solid var(--color-line);
        border-inline-end: 0;
        border-radius: 0;
        box-shadow: -24px 0 48px rgba(0, 0, 0, 0.44);
    }

    .cart-drawer.open {
        transform: translateX(0);
    }

    [dir="rtl"] .cart-drawer {
        inset: 0 auto 0 0;
        transform: translateX(-105%);
        box-shadow: 24px 0 48px rgba(0, 0, 0, 0.44);
    }

    [dir="rtl"] .cart-drawer.open {
        transform: translateX(0);
    }

    .drawer-handle {
        display: none;
    }

    .sticky-cart {
        inset-inline: auto 24px;
        width: min(380px, calc(100vw - 48px));
        margin-inline: 0;
    }

    [dir="rtl"] .sticky-cart {
        inset-inline: 24px auto;
    }
}

@media (min-width: 1080px) {
    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Redesign v1: compact ordering-first storefront. */
:root {
    --color-bg: #0d0d0b;
    --color-surface: #171714;
    --color-surface-2: #22211d;
    --color-surface-3: #2a261d;
    --color-text: #fff8ea;
    --color-muted: #c8bdab;
    --color-accent: #c9932f;
    --color-accent-2: #f2cf7a;
    --color-danger: #e86558;
    --color-success: #6fce88;
    --color-line: rgba(255, 248, 234, 0.12);
    --color-line-strong: rgba(242, 207, 122, 0.38);
    --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.28);
    --header-height: 64px;
}

body {
    background:
        radial-gradient(circle at 24% -10%, rgba(201, 147, 47, 0.16), transparent 27rem),
        linear-gradient(180deg, #12110e 0, #0d0d0b 420px, #0b0b0a 100%);
}

h1 {
    max-width: 760px;
    font-size: 3.15rem;
    line-height: 0.98;
    letter-spacing: 0;
}

h2 {
    font-size: 1.35rem;
    letter-spacing: 0;
}

.site-header {
    padding-top: var(--header-height);
    border-bottom: 1px solid rgba(255, 248, 234, 0.09);
    background: rgba(13, 13, 11, 0.94);
}

.site-header.compact {
    position: static;
}

.header-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 35;
    max-width: none;
    min-height: var(--header-height);
    padding: 9px max(var(--space-page), calc((100vw - 1180px) / 2 + var(--space-page)));
    background: rgba(13, 13, 11, 0.9);
    backdrop-filter: blur(16px);
}

.brand-lockup {
    padding: 2px 0;
}

.brand-lockup strong {
    font-size: 1.04rem;
    letter-spacing: 0;
}

.brand-lockup small {
    margin-top: 2px;
    color: rgba(255, 248, 234, 0.6);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
}

.header-actions {
    gap: 10px;
}

.header-order-chip {
    max-width: 220px;
    min-height: 40px;
    padding: 7px 11px;
    border-color: rgba(242, 207, 122, 0.34);
    background: rgba(242, 207, 122, 0.1);
    box-shadow: none;
}

.header-order-chip.needs-confirmation {
    border-color: rgba(232, 101, 88, 0.76);
    background: rgba(232, 101, 88, 0.18);
}

.language-control select {
    min-height: 38px;
    max-width: 118px;
    border-color: rgba(255, 248, 234, 0.16);
    background: rgba(255, 255, 255, 0.045);
    color: var(--color-text);
    font-size: 0.9rem;
}

.hero-panel {
    grid-template-columns: minmax(0, 1.12fr) minmax(260px, 360px);
    grid-template-areas:
        "copy showcase"
        "action showcase";
    gap: 16px 24px;
    max-width: 1180px;
    padding-block: 18px 20px;
}

.hero-copy {
    grid-area: copy;
}

.hero-copy > .eyebrow {
    display: none;
}

.hero-action {
    grid-area: action;
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 12px;
    align-items: center;
}

.hero-action p {
    margin: 0;
    max-width: 390px;
    font-size: 0.9rem;
}

.hero-showcase {
    grid-area: showcase;
    min-height: 210px;
    border-color: rgba(255, 248, 234, 0.1);
    background:
        linear-gradient(145deg, rgba(242, 207, 122, 0.12), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
        #181815;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.hero-showcase::after {
    background:
        linear-gradient(180deg, transparent 34%, rgba(13, 13, 11, 0.76)),
        linear-gradient(90deg, rgba(13, 13, 11, 0.22), transparent);
}

.hero-dish-graphic {
    position: absolute;
    inset: 18px 18px 72px;
    border: 1px solid rgba(255, 248, 234, 0.08);
    border-radius: var(--radius-card);
    background:
        radial-gradient(circle at 34% 42%, rgba(242, 207, 122, 0.52) 0 12px, transparent 13px),
        radial-gradient(circle at 66% 34%, rgba(111, 206, 136, 0.32) 0 9px, transparent 10px),
        radial-gradient(circle at 58% 64%, rgba(232, 101, 88, 0.36) 0 10px, transparent 11px),
        linear-gradient(135deg, rgba(255, 248, 234, 0.08), rgba(255, 248, 234, 0.01));
    overflow: hidden;
}

.dish-line,
.dish-dot {
    position: absolute;
    display: block;
    border-radius: 999px;
}

.dish-line {
    height: 13px;
    background: rgba(255, 248, 234, 0.32);
}

.dish-line-one {
    inset-block-start: 36%;
    inset-inline: 22% 18%;
    transform: rotate(-7deg);
}

.dish-line-two {
    inset-block-start: 55%;
    inset-inline: 15% 28%;
    background: rgba(201, 147, 47, 0.52);
    transform: rotate(8deg);
}

.dish-dot {
    width: 32px;
    height: 32px;
    background: rgba(232, 101, 88, 0.38);
}

.dish-dot-one {
    inset-block-start: 18%;
    inset-inline-start: 14%;
}

.dish-dot-two {
    inset-block-end: 20%;
    inset-inline-end: 16%;
    background: rgba(111, 206, 136, 0.28);
}

.pickup-card {
    inset-inline: 14px;
    inset-block-end: 14px;
    border-color: rgba(255, 248, 234, 0.12);
    background: rgba(18, 17, 14, 0.86);
}

.tagline {
    max-width: 560px;
    margin-bottom: 6px;
    font-size: 1.24rem;
}

.meta-line {
    max-width: 620px;
    margin-bottom: 0;
}

.hero-steps {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}

.hero-steps li {
    min-height: 34px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.028);
    color: rgba(255, 248, 234, 0.86);
    font-size: 0.88rem;
}

main {
    padding-top: 12px;
}

.current-order-banner,
.cart-preview,
.status-banner {
    margin-bottom: 12px;
}

.current-order-card,
.cart-preview-card,
.order-summary,
.status-card,
.empty-state {
    border-color: rgba(255, 248, 234, 0.11);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        rgba(23, 23, 20, 0.96);
}

.current-order-card {
    padding: 15px;
    border-color: rgba(242, 207, 122, 0.34);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.current-order-card.needs-confirmation {
    border-color: rgba(242, 207, 122, 0.7);
    background:
        linear-gradient(135deg, rgba(242, 207, 122, 0.16), rgba(232, 101, 88, 0.08)),
        rgba(23, 23, 20, 0.98);
}

.current-order-card.is-ready {
    border-color: rgba(111, 206, 136, 0.5);
    background:
        linear-gradient(135deg, rgba(111, 206, 136, 0.13), rgba(255, 255, 255, 0.025)),
        rgba(23, 23, 20, 0.98);
}

.current-order-actions {
    align-self: stretch;
}

.cart-preview-card {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(220px, 1fr) minmax(170px, 210px);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}

.cart-preview-card.is-secondary {
    opacity: 0.88;
    box-shadow: none;
}

.cart-preview-copy h2,
.cart-preview-copy p {
    margin-bottom: 0;
}

.cart-preview-copy p:not(.eyebrow) {
    color: var(--color-muted);
}

.cart-preview-lines {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-preview-lines li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    color: rgba(255, 248, 234, 0.86);
    font-size: 0.93rem;
}

.cart-preview-lines span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-preview-more {
    display: block !important;
    color: var(--color-muted) !important;
}

.cart-preview-actions {
    display: grid;
    gap: 8px;
}

.section-heading {
    margin-top: 8px;
    margin-bottom: 10px;
}

.section-heading .eyebrow {
    margin-bottom: 5px;
}

.category-tabs {
    top: var(--header-height);
    margin-bottom: 12px;
    border-block-color: rgba(255, 248, 234, 0.09);
    background: rgba(13, 13, 11, 0.88);
}

.tab-button {
    min-height: 38px;
    padding: 8px 12px;
    border-color: rgba(255, 248, 234, 0.12);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 248, 234, 0.82);
    font-size: 0.9rem;
}

.tab-button.active {
    border-color: rgba(242, 207, 122, 0.42);
    background: rgba(242, 207, 122, 0.13);
    color: var(--color-accent-2);
}

.menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.menu-card {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 124px;
    padding: 12px;
    border-color: rgba(255, 248, 234, 0.1);
    background:
        linear-gradient(145deg, rgba(255, 248, 234, 0.04), transparent 48%),
        rgba(23, 23, 20, 0.96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.19);
}

.menu-card:hover {
    border-color: rgba(242, 207, 122, 0.32);
    background:
        linear-gradient(145deg, rgba(242, 207, 122, 0.065), transparent 48%),
        rgba(23, 23, 20, 0.98);
}

.menu-media,
.menu-card img,
.menu-image-placeholder {
    width: 74px;
    height: 86px;
}

.menu-card img,
.menu-image-placeholder {
    border-radius: 7px;
}

.menu-image-placeholder {
    position: relative;
    border: 1px solid rgba(255, 248, 234, 0.08);
    background:
        linear-gradient(145deg, rgba(242, 207, 122, 0.18), rgba(255, 255, 255, 0.02)),
        #22211d;
    color: rgba(255, 248, 234, 0.72);
    font-size: 0;
    text-transform: none;
}

.menu-image-placeholder::before {
    content: attr(data-initial);
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 248, 234, 0.12);
    border-radius: 999px;
    background: rgba(13, 13, 11, 0.34);
    color: var(--color-accent-2);
    font-size: 1rem;
    font-weight: 900;
}

.menu-card-body {
    gap: 9px;
}

.menu-card-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.menu-card h3 {
    font-size: 1.04rem;
    line-height: 1.2;
}

.price-pill {
    padding: 4px 8px;
    border-color: rgba(242, 207, 122, 0.24);
    background: rgba(242, 207, 122, 0.075);
    color: #f6d88d;
    font-size: 0.9rem;
}

.item-description {
    -webkit-line-clamp: 2;
    color: rgba(255, 248, 234, 0.68);
    font-size: 0.92rem;
}

.small-button {
    min-height: 38px;
    margin-top: auto;
    border-color: rgba(242, 207, 122, 0.24);
    background: rgba(242, 207, 122, 0.095);
    color: var(--color-accent-2);
}

.primary-action {
    min-height: 46px;
    border: 0;
    background: linear-gradient(180deg, #f3d17b, #c9932f);
    box-shadow: 0 12px 24px rgba(201, 147, 47, 0.18);
}

.ghost-button {
    border-color: rgba(255, 248, 234, 0.13);
    background: rgba(255, 255, 255, 0.035);
}

.danger-button {
    border-color: rgba(232, 101, 88, 0.36);
    background: rgba(232, 101, 88, 0.1);
    color: #ffc6bf;
}

.cart-drawer {
    border-color: rgba(255, 248, 234, 0.12);
    background: rgba(18, 18, 16, 0.98);
    box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.4);
}

.drawer-header,
.cart-footer {
    padding: 15px 16px;
}

.drawer-header {
    background: rgba(255, 255, 255, 0.025);
}

.cart-items {
    padding-inline: 16px;
}

.cart-line {
    gap: 9px;
    padding-block: 14px;
}

.cart-line-title {
    align-items: start;
}

.quantity-row button {
    background: rgba(255, 255, 255, 0.035);
}

.quantity-row .remove-line {
    min-width: 74px;
}

.cart-footer {
    background: rgba(27, 27, 24, 0.98);
}

.sticky-cart {
    border: 0;
    background: linear-gradient(180deg, #f3d17b, #c9932f);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.checkout-panel {
    max-width: 760px;
}

.checkout-panel .section-heading,
.order-status .section-heading {
    margin-top: 0;
}

.order-summary,
.checkout-form,
.status-card {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: rgba(23, 23, 20, 0.96);
}

.checkout-form {
    padding: 16px;
    box-shadow: var(--shadow-card);
}

.checkout-note {
    border-inline-start-color: rgba(242, 207, 122, 0.72);
    background: rgba(242, 207, 122, 0.075);
}

input,
select,
textarea {
    border-color: rgba(255, 248, 234, 0.14);
    background: rgba(255, 255, 255, 0.035);
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(8px);
}

.item-modal {
    background: rgba(23, 23, 20, 0.99);
}

.choice-option span {
    background: rgba(255, 255, 255, 0.035);
}

.choice-option input:checked + span {
    border-color: rgba(242, 207, 122, 0.48);
    background: rgba(242, 207, 122, 0.12);
    color: var(--color-accent-2);
}

.status-main {
    place-items: start center;
    padding-top: 28px;
}

.status-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
}

.status-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    content: "";
    background: rgba(255, 248, 234, 0.14);
}

.status-card.centered {
    margin-top: 18px;
}

.status-card h1 {
    max-width: 620px;
    font-size: 2.28rem;
    line-height: 1.04;
}

.status-tone-time-offered::before {
    background: var(--color-accent-2);
}

.status-tone-ready::before {
    background: var(--color-success);
}

.status-tone-danger::before {
    background: var(--color-danger);
}

.status-tone-progress::before,
.status-tone-submitted::before {
    background: rgba(255, 248, 234, 0.26);
}

.status-line,
.status-order-line {
    border-bottom-color: rgba(255, 248, 234, 0.1);
}

.time-offer-overlay {
    background: rgba(0, 0, 0, 0.64);
    backdrop-filter: blur(10px);
}

.time-offer-sheet {
    border-color: rgba(242, 207, 122, 0.64);
    background:
        linear-gradient(150deg, rgba(242, 207, 122, 0.18), rgba(232, 101, 88, 0.08)),
        #171714;
}

.time-offer-actions .danger-button {
    background: rgba(232, 101, 88, 0.08);
}

@media (min-width: 900px) {
    .cart-drawer {
        width: min(100vw, 390px);
        border-inline-start: 1px solid rgba(255, 248, 234, 0.12);
        background: rgba(18, 18, 16, 0.99);
        box-shadow: -18px 0 46px rgba(0, 0, 0, 0.34);
    }

    [dir="rtl"] .cart-drawer {
        border-inline-start: 0;
        border-inline-end: 1px solid rgba(255, 248, 234, 0.12);
    }
}

@media (max-width: 899px) {
    .hero-panel {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "showcase"
            "action";
        gap: 12px;
    }

    .hero-action {
        grid-template-columns: 1fr;
    }

    .hero-action p {
        max-width: none;
    }

    .hero-showcase {
        min-height: 136px;
    }

    .hero-dish-graphic {
        inset: 14px 14px 62px;
    }

    .cart-preview-card {
        grid-template-columns: 1fr;
    }

    .cart-preview-actions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 559px) {
    :root {
        --header-height: 94px;
        --space-page: 12px;
    }

    .header-bar {
        min-height: var(--header-height);
        padding-block: 8px;
    }

    .brand-lockup strong {
        font-size: 0.98rem;
    }

    .brand-lockup small {
        font-size: 0.66rem;
    }

    .header-actions {
        gap: 7px;
    }

    .header-order-chip {
        max-width: min(178px, calc(100vw - 142px));
        min-height: 38px;
    }

    .language-control select {
        width: 102px;
        max-width: 102px;
        min-height: 38px;
        font-size: 0.84rem;
    }

    .hero-panel {
        padding-block: 10px 12px;
        gap: 9px;
    }

    h1 {
        margin-bottom: 5px;
        font-size: 2.16rem;
        line-height: 1.02;
    }

    .tagline {
        margin-bottom: 4px;
        font-size: 1rem;
    }

    .meta-line {
        display: none;
        font-size: 0.9rem;
    }

    .hero-showcase {
        display: none;
    }

    .hero-cta {
        min-height: 42px;
    }

    .hero-action p {
        display: none;
    }

    .hero-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .hero-steps li {
        min-height: 30px;
        padding: 6px;
        gap: 5px;
        font-size: 0.74rem;
    }

    .hero-steps li::before {
        width: 16px;
        height: 16px;
        font-size: 0.66rem;
    }

    main {
        padding-top: 8px;
    }

    .current-order-card {
        gap: 12px;
        padding: 13px;
    }

    .current-order-meta span {
        font-size: 0.82rem;
    }

    .cart-preview-card {
        padding: 12px;
    }

    .cart-preview-lines {
        display: none;
    }

    .cart-preview-actions {
        grid-template-columns: 1fr;
    }

    .section-heading {
        align-items: flex-start;
        margin-top: 6px;
    }

    .section-heading > p,
    .section-heading div + p {
        max-width: 44%;
        font-size: 0.86rem;
    }

    .category-tabs {
        top: var(--header-height);
        margin-bottom: 10px;
        padding-block: 8px;
    }

    .tab-button {
        min-height: 36px;
        max-width: 164px;
        padding: 7px 11px;
        font-size: 0.86rem;
    }

    .menu-grid {
        gap: 10px;
    }

    .menu-card {
        grid-template-columns: 64px minmax(0, 1fr);
        min-height: 112px;
        padding: 10px;
        gap: 10px;
    }

    .menu-media,
    .menu-card img,
    .menu-image-placeholder {
        width: 64px;
        height: 74px;
    }

    .menu-image-placeholder::before {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .menu-card-header {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .menu-card h3 {
        font-size: 0.99rem;
    }

    .price-pill {
        width: max-content;
        font-size: 0.84rem;
    }

    .item-description {
        font-size: 0.88rem;
    }

    .small-button {
        min-height: 36px;
        padding-block: 7px;
    }

    .cart-drawer {
        max-height: min(86vh, 720px);
    }

    .drawer-header,
    .cart-footer,
    .cart-items {
        padding-inline: 13px;
    }

    .checkout-form,
    .status-card {
        padding: 14px;
    }

    .status-main {
        padding-top: 14px;
    }

    .status-card h1 {
        font-size: 1.82rem;
    }

    .time-offer-overlay {
        align-items: end;
        padding: 12px;
    }

    .time-offer-sheet {
        padding: 16px;
    }
}

/* Production prototype integration. Keep this layer last so it wins over MVP styles. */
:root {
    --bg: #080907;
    --surface: #11130f;
    --surface2: #171914;
    --surface3: #1d2019;
    --border: rgba(241, 218, 158, 0.15);
    --borderStrong: rgba(230, 175, 50, 0.42);
    --text: #f7f2e8;
    --muted: #aaa397;
    --gold: #e7b23c;
    --goldLight: #ffd66e;
    --green: #53c777;
    --amber: #f2b93d;
    --danger: #e87366;
    --radius: 16px;
    --radiusLg: 22px;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    --header: 74px;
    --max: 1460px;
    --side: 366px;
    --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
    color-scheme: dark;
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-surface-2: var(--surface2);
    --color-text: var(--text);
    --color-muted: var(--muted);
    --color-accent: var(--gold);
    --color-accent-2: var(--goldLight);
    --color-line: var(--border);
    --color-line-strong: var(--borderStrong);
    --radius-card: 12px;
    --header-height: var(--header);
}

html {
    background: var(--bg);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--text);
    background:
        linear-gradient(rgba(8, 9, 7, 0.94), rgba(8, 9, 7, 0.97)),
        url("/assets/stone.webp") center / 600px repeat,
        var(--bg);
    font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

body.modal-open,
body.drawer-open,
body.offer-open {
    overflow: hidden;
}

svg {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sprite {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: var(--header);
    padding-top: 0;
    border-bottom: 1px solid var(--border);
    background: rgba(8, 9, 7, 0.87);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(24px) saturate(130%);
}

.site-header.compact {
    position: sticky;
}

.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    width: min(var(--max), calc(100% - 40px));
    min-height: var(--header);
    margin: auto;
}

.header-bar {
    position: static;
    max-width: none;
    min-height: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}

.brand,
.brand-lockup {
    display: flex;
    min-width: max-content;
    flex-direction: column;
    gap: 1px;
    padding: 0;
}

.brand strong,
.brand-lockup strong {
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.025em;
}

.brand span,
.brand-lockup small {
    margin: 0;
    color: var(--gold);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    justify-self: center;
    gap: 5px;
}

.nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 10px;
    padding: 12px 15px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: 0.2s;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.order-chip,
.header-order-chip {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 0 9px;
    align-items: center;
    min-height: 44px;
    max-width: 250px;
    padding: 7px 12px;
    border: 1px solid rgba(83, 199, 119, 0.45);
    border-radius: 12px;
    background: rgba(16, 42, 26, 0.6);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.order-chip::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 14px rgba(83, 199, 119, 0.58);
    content: "";
}

.order-chip strong,
.order-chip small {
    grid-column: 2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chip strong {
    font-size: 0.77rem;
}

.order-chip small {
    color: var(--green);
    font-size: 0.68rem;
}

.order-chip.warning,
.order-chip.needs-confirmation {
    border-color: rgba(242, 185, 61, 0.55);
    background: rgba(48, 35, 14, 0.75);
}

.order-chip.warning::before,
.order-chip.needs-confirmation::before {
    background: var(--amber);
    box-shadow: 0 0 14px rgba(242, 185, 61, 0.55);
}

.order-chip.warning small,
.order-chip.needs-confirmation small {
    color: var(--amber);
}

.order-chip.ready::before,
.order-chip.is-ready::before {
    background: var(--green);
}

.cart-button {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--borderStrong);
    border-radius: 12px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(43, 36, 21, 0.82), rgba(22, 20, 15, 0.92));
    color: var(--text);
    cursor: pointer;
    transition: 0.2s;
}

.cart-button:hover {
    transform: translateY(-1px);
    border-color: var(--gold);
}

.cart-button b,
.mobile-bottom-nav b {
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #151006;
    font-size: 0.72rem;
}

.cart-button strong {
    color: var(--goldLight);
    font-size: 0.82rem;
    white-space: nowrap;
}

.language-control {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.language-control select {
    width: auto;
    min-width: 110px;
    min-height: 0;
    max-width: none;
    padding: 10px 34px 10px 13px;
    border: 0;
    border-radius: 0;
    appearance: none;
    background: transparent;
    color: var(--text);
    font-weight: 750;
    outline: 0;
}

.language-control:focus-within {
    border-color: rgba(242, 207, 122, 0.45);
    box-shadow: 0 0 0 3px rgba(242, 207, 122, 0.1);
}

.language-code {
    display: none;
}

.language-control option {
    background: #151712;
    color: var(--text);
}

.language-control svg {
    position: absolute;
    right: 10px;
    color: var(--muted);
    pointer-events: none;
}

[dir="rtl"] .language-control svg {
    right: auto;
    left: 10px;
}

.menu-button {
    width: 44px;
    height: 44px;
    display: none;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
}

.mobile-menu {
    padding: 8px 18px 15px;
    border-top: 1px solid var(--border);
}

.mobile-menu button,
.mobile-menu a {
    width: 100%;
    display: block;
    padding: 13px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--text);
    text-align: left;
}

.page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side);
    gap: 22px;
    align-items: start;
    width: min(var(--max), calc(100% - 40px));
    max-width: none;
    margin: 24px auto 82px;
    padding: 0;
    transition: grid-template-columns 0.35s var(--ease);
}

body.sidebar-collapsed .page-grid {
    grid-template-columns: minmax(0, 1fr) 72px;
}

.content-column {
    min-width: 0;
}

.hero {
    position: relative;
    min-height: 408px;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    grid-template-areas: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radiusLg);
    background: #11120f;
    box-shadow: var(--shadow);
}

.hero::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, rgba(6, 7, 6, 0.98) 0%, rgba(6, 7, 6, 0.88) 36%, rgba(6, 7, 6, 0.18) 70%, rgba(6, 7, 6, 0.05) 100%);
}

.hero-copy {
    position: relative;
    z-index: 2;
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
    align-self: center;
    padding: clamp(34px, 5vw, 68px);
    padding-right: 12px;
}

.hero-copy > .eyebrow {
    display: block;
}

.hero-photo {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
    min-height: 408px;
    background:
        linear-gradient(90deg, rgba(8, 9, 7, 0.42), rgba(8, 9, 7, 0.02)),
        url("/assets/hero.webp") center / cover no-repeat;
    filter: saturate(1.03) contrast(1.04);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 0.71rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hero h1,
.hero-copy h1 {
    max-width: 620px;
    margin: 0;
    color: var(--text);
    font-size: clamp(2.6rem, 5vw, 4.85rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.hero-text {
    max-width: 620px;
    margin: 18px 0 20px;
    color: #d4cec2;
    font-size: clamp(1rem, 1.3vw, 1.16rem);
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0 0 23px;
    color: var(--muted);
}

.hero-facts span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hero-facts svg {
    color: var(--gold);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.button,
.primary-action,
.ghost-button,
.danger-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: none;
}

.button:hover,
.primary-action:hover,
.ghost-button:hover,
.danger-button:hover {
    transform: translateY(-1px);
}

.button.primary,
.primary-action {
    color: #171106;
    background: linear-gradient(180deg, var(--goldLight), var(--gold));
    box-shadow: 0 12px 30px rgba(231, 178, 60, 0.2);
}

.button.secondary,
.ghost-button {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(12, 13, 11, 0.62);
    color: var(--text);
}

.button.danger,
.danger-button {
    color: #ffd9d4;
    border-color: rgba(232, 115, 102, 0.45);
    background: rgba(53, 23, 20, 0.8);
}

.wide {
    width: 100%;
    margin-top: 14px;
}

.current-order-banner {
    margin: 16px 0 4px;
}

.cart-preview {
    display: none !important;
}

.menu-section {
    padding: 34px 0 0;
    scroll-margin-top: calc(var(--header) + 18px);
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 4px 18px;
}

.section-header h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.75rem, 2.6vw, 2.45rem);
    letter-spacing: -0.035em;
}

.menu-count {
    margin: -8px 4px 14px;
    color: var(--muted);
}

.link-button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    color: var(--gold);
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.categories,
.category-tabs {
    position: static;
    display: flex;
    gap: 9px;
    margin: 0;
    padding: 0 2px 18px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    scrollbar-width: none;
}

.categories::-webkit-scrollbar {
    display: none;
}

.category,
.tab-button {
    min-height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    color: #d7d0c5;
    font-weight: 750;
    cursor: pointer;
    transition: 0.2s;
}

.category:hover,
.tab-button:hover {
    border-color: var(--borderStrong);
    color: var(--text);
}

.category.active,
.tab-button.active {
    color: #181207;
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--goldLight), var(--gold));
}

.category i {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-style: normal;
}

.products,
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    transition: grid-template-columns 0.35s var(--ease);
}

body.sidebar-collapsed .products,
body.sidebar-collapsed .menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product,
.menu-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(27, 29, 23, 0.97), rgba(16, 18, 14, 0.99));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
    transition: 0.24s;
}

.product:hover,
.menu-card:hover {
    transform: translateY(-4px);
    border-color: rgba(231, 178, 60, 0.38);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.3);
}

.product-media,
.menu-media {
    position: relative;
    width: auto;
    height: auto;
    aspect-ratio: 1.42;
    overflow: hidden;
    background: #151712;
}

.product-media img,
.menu-card img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.product:hover img {
    transform: scale(1.045);
}

.product-media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 58%, rgba(8, 9, 7, 0.62));
}

.badge {
    position: absolute;
    z-index: 1;
    top: 11px;
    left: 11px;
    padding: 5px 9px;
    border: 1px solid rgba(231, 178, 60, 0.38);
    border-radius: 999px;
    background: rgba(15, 14, 10, 0.84);
    color: #f6df9a;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.product-body,
.menu-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.product-top,
.menu-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.product h3,
.menu-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.03rem;
    line-height: 1.24;
}

.price {
    flex: 0 0 auto;
    color: var(--goldLight);
    font-weight: 900;
    white-space: nowrap;
}

.description,
.item-description {
    min-height: 46px;
    margin: 9px 0 14px;
    color: var(--muted);
    font-size: 0.86rem;
}

.add-button,
.small-button {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    border: 1px solid rgba(231, 178, 60, 0.42);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(60, 46, 20, 0.66), rgba(33, 27, 16, 0.92));
    color: #f5d87c;
    font-weight: 850;
    cursor: pointer;
}

.add-button:hover,
.small-button:hover {
    color: #181207;
    background: linear-gradient(180deg, var(--goldLight), var(--gold));
}

.desktop-sidebar {
    position: sticky;
    top: calc(var(--header) + 24px);
    min-height: 520px;
    border: 1px solid var(--border);
    border-radius: var(--radiusLg);
    background: linear-gradient(180deg, rgba(24, 26, 21, 0.99), rgba(13, 15, 12, 0.99));
    box-shadow: var(--shadow);
    overflow: visible;
}

.collapse-sidebar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    cursor: pointer;
}

.collapse-sidebar svg {
    transform: rotate(-90deg);
    transition: 0.35s;
}

body.sidebar-collapsed .collapse-sidebar svg {
    transform: rotate(90deg);
}

.sidebar-content {
    padding: 58px 18px 18px;
}

.sidebar-rail {
    display: none;
    gap: 12px;
    padding: 66px 10px 14px;
}

body.sidebar-collapsed .sidebar-content {
    display: none;
}

body.sidebar-collapsed .sidebar-rail {
    display: grid;
}

.rail {
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    cursor: pointer;
}

.rail b {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #181207;
    font-size: 0.66rem;
}

.panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.panel + .panel {
    margin-top: 14px;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
}

.panel-head small,
.cart-meta,
.order-summary {
    color: var(--muted);
}

.panel-body {
    padding: 14px 16px 16px;
}

.empty,
.empty-state {
    padding: 24px 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    text-align: center;
}

.cart-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cart-row:first-child {
    padding-top: 0;
}

.cart-row:last-child {
    border-bottom: 0;
}

.cart-thumb,
.cart-thumb-fallback {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(231, 178, 60, 0.18), rgba(255, 255, 255, 0.03));
    color: var(--goldLight);
    font-weight: 900;
    object-fit: cover;
}

.cart-row h4 {
    margin: 0 0 2px;
    color: var(--text);
    font-size: 0.9rem;
}

.cart-meta {
    font-size: 0.75rem;
}

.line-price {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 850;
    white-space: nowrap;
}

.qty,
.quantity-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
}

.qty button,
.quantity-row button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
}

.qty span,
.quantity-row strong {
    min-width: 25px;
    color: var(--text);
    font-weight: 800;
    text-align: center;
}

.remove {
    margin-top: 6px;
    border: 0;
    background: transparent;
    color: #77736a;
    cursor: pointer;
}

.remove:hover {
    color: var(--danger);
}

.totals {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    color: var(--muted);
}

.total-line.final {
    margin-top: 4px;
    color: var(--text);
    font-size: 1.04rem;
    font-weight: 900;
}

.total-line strong {
    color: var(--goldLight);
}

.status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-size: 0.86rem;
    font-weight: 800;
}

.status-line::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    content: "";
}

.status-line.warning {
    color: var(--amber);
}

.status-line.danger {
    color: var(--danger);
}

.order-number {
    margin: 9px 0 2px;
    color: var(--text);
    font-size: 1.22rem;
    font-weight: 900;
}

.current-order-card {
    padding: 16px;
    border: 1px solid rgba(83, 199, 119, 0.35);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(16, 42, 26, 0.7), rgba(13, 20, 15, 0.9));
    box-shadow: none;
}

.current-order-card.needs-confirmation {
    border-color: rgba(242, 185, 61, 0.46);
    background: linear-gradient(180deg, rgba(48, 35, 14, 0.75), rgba(21, 18, 11, 0.94));
}

.current-order-card.is-ready {
    border-color: rgba(83, 199, 119, 0.55);
}

.current-order-card h2 {
    color: var(--text);
}

.mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    background: rgba(8, 9, 7, 0.92);
    backdrop-filter: blur(20px);
}

.mobile-bottom-nav button,
.mobile-bottom-nav a {
    position: relative;
    min-height: 64px;
    display: grid;
    place-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
}

.mobile-bottom-nav svg {
    font-size: 1.15rem;
}

.mobile-bottom-nav b {
    position: absolute;
    top: 8px;
    right: calc(50% - 24px);
}

.cart-drawer,
.mobile-cart {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 75;
    max-height: min(88vh, 720px);
    display: flex;
    transform: translateY(105%);
    flex-direction: column;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: #11130f;
    box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.55);
    transition: transform 0.24s var(--ease);
}

.cart-drawer.open {
    transform: translateY(0);
}

.drawer-handle {
    width: 46px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.drawer-head,
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-head h2,
.drawer-header h2 {
    margin: 0;
}

.icon-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
}

.cart-items {
    overflow: auto;
    padding: 14px 18px;
}

.cart-footer {
    padding: 0 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 19, 15, 0.98);
}

.modal-layer,
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(12px);
}

.modal {
    width: min(100%, 860px);
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #131611;
    box-shadow: var(--shadow);
}

.modal.wide {
    width: min(100%, 860px);
}

#modalContent {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-head h1,
.modal-head h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.1;
}

.modal-body {
    overflow: auto;
    padding: 22px;
}

.modal-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 9, 7, 0.42);
}

.product-modal-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.modal-image {
    width: 100%;
    max-height: none;
    aspect-ratio: 1.26;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
}

.product-info h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 1.42rem;
}

fieldset,
.option-group,
.variant-group {
    min-width: 0;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

legend,
.field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 850;
}

.chips,
.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip,
.choice-option {
    display: block;
}

.chip input,
.choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip span,
.choice-option span {
    min-height: 42px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-weight: 750;
}

.chip input:checked + span,
.choice-option input:checked + span {
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--goldLight), var(--gold));
    color: #171106;
}

.inline-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.inline-qty button {
    width: 40px;
    height: 40px;
}

.area,
textarea,
input.field,
input {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
}

.area,
textarea {
    min-height: 96px;
    resize: vertical;
}

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 16px;
}

.form-card,
.summary-card {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.help,
.field-hint {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.note,
.checkout-note {
    margin: 14px 0 0;
    border: 1px solid rgba(231, 178, 60, 0.18);
    border-radius: 12px;
    padding: 12px;
    background: rgba(231, 178, 60, 0.075);
    color: #d4cec2;
}

.error,
.form-error {
    margin-top: 12px;
    border: 1px solid rgba(232, 115, 102, 0.45);
    border-radius: 12px;
    padding: 12px;
    background: rgba(53, 23, 20, 0.72);
    color: #ffd9d4;
}

.order-summary .status-line,
.summary-row,
.status-order-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.status-details {
    display: grid;
    gap: 16px;
}

.status-meta {
    display: grid;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 4px 16px;
    background: rgba(255, 255, 255, 0.025);
}

.status-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.production-status-page,
.status-main {
    width: min(980px, calc(100% - 40px));
    min-height: calc(100vh - var(--header));
    margin: 34px auto;
    padding: 0;
    display: grid;
    place-items: start center;
}

.production-status-page .order-status,
.status-main .order-status {
    width: 100%;
}

.production-status-page .modal-layer,
.status-main .modal-layer,
.production-status-page .order-status,
.status-main .order-status {
    position: static;
    display: block;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}

.production-status-page .modal,
.status-main .modal {
    width: min(100%, 780px);
    margin: 0 auto;
}

.time-offer-overlay {
    z-index: 110;
    align-items: end;
    background: rgba(0, 0, 0, 0.72);
}

.time-offer-sheet {
    width: min(100%, 560px);
    margin: auto auto 0;
    border: 1px solid rgba(231, 178, 60, 0.76);
    border-radius: 22px;
    padding: 22px 18px;
    background: linear-gradient(180deg, rgba(42, 32, 15, 0.98), rgba(18, 16, 12, 0.99));
    box-shadow: var(--shadow);
}

.time-offer-sheet h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 1.65rem;
}

.time-offer-minutes {
    display: block;
    margin: 0 0 12px;
    color: var(--goldLight);
    font-size: 1.7rem;
    font-weight: 900;
}

.time-offer-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

@media (min-width: 901px) {
    .cart-drawer {
        display: none;
    }

    .mobile-bottom-nav {
        display: none;
    }
}

@media (max-width: 1180px) {
    .products,
    .menu-grid,
    body.sidebar-collapsed .products,
    body.sidebar-collapsed .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    :root {
        --header: 68px;
    }

    .header-inner {
        width: calc(100% - 24px);
        grid-template-columns: auto 1fr auto;
        gap: 10px;
    }

    .header-actions {
        grid-column: 3;
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        justify-self: end;
        justify-content: flex-end;
    }

    .main-nav,
    .desktop-sidebar,
    .cart-button span,
    .cart-button strong,
    .order-chip {
        display: none;
    }

    .menu-button {
        display: grid;
    }

    .cart-button {
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
    }

    .header-actions > .cart-button {
        display: none;
    }

    .header-actions .language-control {
        order: 3;
        width: 66px;
        justify-content: center;
        display: flex;
    }

    .header-actions .language-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-inline-end: 14px;
        color: var(--text);
        font-size: 0.86rem;
        font-weight: 850;
        letter-spacing: 0.06em;
        line-height: 1;
    }

    [dir="rtl"] .header-actions .language-code {
        padding-inline-end: 0;
        padding-inline-start: 14px;
    }

    .header-actions .language-control select {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0;
        opacity: 0;
        cursor: pointer;
    }

    .menu-button {
        order: 2;
    }

    .page-grid {
        width: calc(100% - 24px);
        display: block;
        margin-top: 12px;
        margin-bottom: 94px;
    }

    .hero {
        min-height: 464px;
        display: block;
        border-radius: 20px;
    }

    .hero::after {
        background: linear-gradient(180deg, rgba(6, 7, 6, 0.12) 0%, rgba(6, 7, 6, 0.46) 38%, rgba(6, 7, 6, 0.94) 100%);
    }

    .hero-photo {
        position: absolute;
        inset: 0;
        min-height: 0;
    }

    .hero-copy {
        min-height: 464px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 28px 16px 18px;
    }

    .hero-copy h1 {
        font-size: clamp(2.15rem, 11vw, 3.1rem);
        letter-spacing: -0.045em;
    }

    .hero-text {
        margin: 10px 0 14px;
    }

    .hero-facts {
        display: grid;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 0.88rem;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .menu-section {
        padding-top: 28px;
    }

    .section-header {
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .link-button {
        display: none;
    }

    .products,
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product,
    .menu-card {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 144px;
    }

    .product-media,
    .menu-media {
        height: 100%;
        min-height: 144px;
        aspect-ratio: auto;
    }

    .product-body,
    .menu-card-body {
        padding: 14px;
    }

    .description,
    .item-description {
        min-height: auto;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .mobile-bottom-nav {
        display: grid;
    }

    .modal-layer,
    .modal-backdrop {
        align-items: end;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
    }

    .product-modal-grid,
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .modal-image {
        max-height: 240px;
    }

    .modal-foot {
        grid-template-columns: 1fr;
    }

    .production-status-page,
    .status-main {
        width: calc(100% - 24px);
        margin-top: 18px;
    }

    .status-actions {
        grid-template-columns: 1fr;
    }
}

/* Order lifecycle polish: clear progress, multiple active orders, pickup-ready emphasis. */
.current-orders-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
}

.current-orders-head h2 {
    margin: 0;
    color: var(--text, var(--color-text));
}

.current-orders-list {
    display: grid;
    gap: 12px;
}

.current-order-card-compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-radius: 16px;
}

.current-order-card-compact .current-order-copy h3 {
    margin: 0 0 5px;
    color: var(--text, var(--color-text));
    font-size: 1.08rem;
    line-height: 1.2;
}

.current-order-card-compact .current-order-side {
    min-width: min(230px, 32vw);
    display: grid;
    gap: 10px;
}

.current-order-card-compact.is-ready {
    border-color: rgba(83, 199, 119, 0.74);
    background:
        linear-gradient(135deg, rgba(40, 128, 70, 0.48), rgba(19, 44, 27, 0.92)),
        rgba(13, 20, 15, 0.98);
    box-shadow: 0 0 0 1px rgba(83, 199, 119, 0.1), 0 18px 44px rgba(37, 112, 62, 0.24);
}

.mini-prep {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    color: var(--muted, var(--color-muted));
    font-size: 0.82rem;
    font-weight: 800;
    text-align: end;
}

.mini-prep-ring {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--gold, var(--color-accent)) var(--prep-progress, 0deg), rgba(255, 255, 255, 0.12) 0);
}

.mini-prep-ring::after {
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    background: #11130f;
    content: "";
}

.mini-prep-ring span {
    position: relative;
    z-index: 1;
    color: var(--text, var(--color-text));
    font-size: 0.68rem;
    font-weight: 900;
}

.current-order-card-compact.is-ready .mini-prep-ring {
    background: conic-gradient(var(--green, var(--color-success)) 360deg, rgba(255, 255, 255, 0.12) 0);
}

@media (min-width: 901px) {
    .current-orders-list {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .current-order-card-compact {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .current-order-card-compact .current-order-side {
        width: 100%;
        min-width: 0;
    }

    .current-order-card-compact .current-order-actions {
        grid-template-columns: 1fr;
    }

    .current-order-card-compact .mini-prep {
        justify-content: start;
        text-align: start;
    }
}

.status-card.status-tone-ready {
    border-color: rgba(83, 199, 119, 0.72);
    background:
        linear-gradient(180deg, rgba(42, 132, 70, 0.5), rgba(18, 43, 27, 0.3) 180px, rgba(19, 22, 17, 0.98) 330px),
        #131611;
    box-shadow: 0 0 0 1px rgba(83, 199, 119, 0.12), 0 24px 70px rgba(26, 96, 52, 0.22);
}

.status-card.status-tone-ready::before {
    height: 10px;
    background: linear-gradient(90deg, rgba(83, 199, 119, 0.95), rgba(166, 247, 184, 0.9));
    box-shadow: 0 0 24px rgba(83, 199, 119, 0.42);
}

.status-card.status-tone-ready .modal-head {
    margin: -22px -22px 0;
    padding: 30px 22px 20px;
    border-bottom-color: rgba(166, 247, 184, 0.18);
    background: linear-gradient(180deg, rgba(43, 124, 67, 0.42), rgba(43, 124, 67, 0.12));
}

.status-card.status-tone-ready h1 {
    color: #f5fff3;
}

.order-progress-shell {
    display: grid;
    grid-template-columns: minmax(190px, 0.46fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.prep-timer,
.order-timeline,
.status-facts {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.prep-timer {
    display: grid;
    gap: 13px;
    justify-items: center;
    align-content: center;
    min-height: 230px;
    padding: 18px;
    text-align: center;
}

.prep-ring {
    position: relative;
    width: min(145px, 48vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--gold, var(--color-accent)) var(--prep-progress, 0deg), rgba(255, 255, 255, 0.12) 0);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.26);
}

.prep-ring::before {
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.08), transparent 35%),
        #11130f;
    content: "";
}

.prep-ring-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
    place-items: center;
    padding: 12px;
}

.prep-ring-inner strong {
    color: var(--text, var(--color-text));
    font-size: clamp(1.24rem, 3vw, 1.74rem);
    line-height: 1;
}

.prep-ring-inner span {
    max-width: 96px;
    color: var(--muted, var(--color-muted));
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.18;
}

.prep-copy h3,
.order-timeline h3 {
    margin: 0 0 5px;
    color: var(--text, var(--color-text));
    font-size: 0.95rem;
}

.prep-copy p {
    margin: 0;
    color: var(--muted, var(--color-muted));
    font-size: 0.88rem;
}

.prep-timer.is-ready {
    border-color: rgba(83, 199, 119, 0.46);
    background: linear-gradient(180deg, rgba(40, 128, 70, 0.26), rgba(255, 255, 255, 0.035));
}

.prep-timer.is-ready .prep-ring {
    background: conic-gradient(var(--green, var(--color-success)) 360deg, rgba(255, 255, 255, 0.12) 0);
    box-shadow: 0 0 36px rgba(83, 199, 119, 0.26);
}

.order-timeline {
    min-width: 0;
    padding: 18px 18px 15px;
}

.order-timeline ol {
    display: grid;
    gap: 0;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;
    min-height: 68px;
    padding: 0 0 17px;
    color: var(--muted, var(--color-muted));
}

.timeline-step:last-child {
    min-height: 38px;
    padding-bottom: 0;
}

.timeline-step:not(:last-child)::after {
    position: absolute;
    top: 31px;
    bottom: -2px;
    left: 15px;
    width: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
    content: "";
}

[dir="rtl"] .timeline-step:not(:last-child)::after {
    right: 15px;
    left: auto;
}

.timeline-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: #151711;
}

.timeline-dot::after {
    width: 9px;
    height: 9px;
    border-radius: inherit;
    background: currentColor;
    content: "";
}

.timeline-step strong,
.timeline-step small {
    display: block;
}

.timeline-step strong {
    margin: 2px 0 4px;
    color: var(--muted, var(--color-muted));
    font-size: 0.96rem;
    line-height: 1.2;
}

.timeline-step small {
    color: rgba(212, 206, 194, 0.78);
    font-size: 0.82rem;
    line-height: 1.26;
}

.timeline-step.is-done {
    color: var(--green, var(--color-success));
}

.timeline-step.is-done::after {
    background: linear-gradient(180deg, var(--green, var(--color-success)), rgba(83, 199, 119, 0.24));
}

.timeline-step.is-done .timeline-dot {
    border-color: rgba(83, 199, 119, 0.6);
    background: rgba(83, 199, 119, 0.16);
    box-shadow: 0 0 18px rgba(83, 199, 119, 0.25);
}

.timeline-step.is-done strong {
    color: #a8f0b9;
}

.timeline-step.is-active {
    color: var(--gold, var(--color-accent));
}

.timeline-step.is-active .timeline-dot {
    border-color: rgba(255, 214, 110, 0.78);
    background: rgba(231, 178, 60, 0.18);
    box-shadow: 0 0 22px rgba(231, 178, 60, 0.26);
}

.timeline-step.is-active strong {
    color: var(--text, var(--color-text));
}

.status-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
}

.status-fact {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.status-fact:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

[dir="rtl"] .status-fact:nth-child(odd) {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.status-fact span {
    color: var(--muted, var(--color-muted));
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.status-fact strong {
    color: var(--text, var(--color-text));
    font-size: 0.94rem;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .current-orders-head {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }

    .current-order-card-compact {
        grid-template-columns: 1fr;
    }

    .current-order-card-compact .current-order-side {
        width: 100%;
        min-width: 0;
    }

    .mini-prep {
        justify-content: start;
        text-align: start;
    }

    .order-progress-shell {
        grid-template-columns: 1fr;
    }

    .prep-timer {
        min-height: 0;
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        text-align: start;
    }

    .prep-ring {
        width: 108px;
    }

    .status-facts {
        grid-template-columns: 1fr;
    }

    .status-fact:nth-child(odd) {
        border-right: 0;
    }

    [dir="rtl"] .status-fact:nth-child(odd) {
        border-left: 0;
    }

    .status-card.status-tone-ready .modal-head {
        margin: -14px -14px 0;
        padding: 24px 14px 16px;
    }
}

@media (max-width: 420px) {
    .prep-timer {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .prep-ring {
        width: 128px;
    }

    .timeline-step {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 9px;
    }

    .timeline-dot {
        width: 28px;
        height: 28px;
    }

    .timeline-step:not(:last-child)::after {
        top: 28px;
        left: 13px;
    }

    [dir="rtl"] .timeline-step:not(:last-child)::after {
        right: 13px;
        left: auto;
    }
}

/* Checkout and kitchen-offer overlays must cover the full viewport, not the layout column. */
.checkout-panel.modal-layer {
    width: auto;
    max-width: none;
    margin: 0;
    z-index: 115;
    align-items: center;
    justify-items: center;
    padding: 28px;
}

.checkout-panel .checkout-modal {
    width: min(100%, 760px);
    max-height: min(92vh, 900px);
}

.checkout-panel .checkout-form {
    min-height: 0;
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.checkout-panel .modal-body {
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.checkout-panel .modal-foot {
    flex: 0 0 auto;
}

.time-offer-overlay.modal-layer {
    position: fixed;
    inset: 0;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 120;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
}

.time-offer-overlay .time-offer-sheet {
    max-height: calc(100vh - 40px);
    margin: 0;
    overflow: auto;
}

.time-offer-overlay.ready-overlay {
    background: rgba(2, 10, 5, 0.76);
}

.time-offer-overlay.ready-overlay .ready-sheet {
    width: min(100%, 500px);
    border-color: rgba(83, 199, 119, 0.82);
    background:
        linear-gradient(180deg, rgba(44, 142, 74, 0.94), rgba(18, 43, 27, 0.96) 44%, rgba(13, 18, 13, 0.99)),
        #101611;
    text-align: center;
    box-shadow: 0 26px 78px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(166, 247, 184, 0.1);
}

.ready-check {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, #b8ffc7, var(--green, var(--color-success)));
    box-shadow: 0 18px 42px rgba(83, 199, 119, 0.36);
}

.ready-check::after {
    position: absolute;
    left: 25px;
    top: 17px;
    width: 18px;
    height: 32px;
    border: solid #06220f;
    border-width: 0 6px 6px 0;
    border-radius: 2px;
    content: "";
    transform: rotate(45deg);
}

.ready-sheet h2 {
    color: #f5fff3;
}

.ready-sheet p:not(.eyebrow) {
    max-width: 340px;
    margin-inline: auto;
    color: rgba(245, 255, 243, 0.82);
}

.ready-actions .primary-action {
    border-color: rgba(166, 247, 184, 0.72);
    background: linear-gradient(180deg, #b8ffc7, var(--green, var(--color-success)));
    color: #041007;
    box-shadow: 0 14px 34px rgba(83, 199, 119, 0.24);
}

.ready-overlay-link {
    min-height: 42px;
    display: grid;
    place-items: center;
    color: rgba(245, 255, 243, 0.78);
    font-size: 0.94rem;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 900px) {
    .checkout-panel.modal-layer {
        align-items: center;
        justify-items: center;
        padding: 12px;
    }

    .checkout-panel .checkout-modal {
        width: min(100%, 720px);
        max-height: calc(100vh - 24px);
        border-radius: 22px;
    }

    .time-offer-overlay.modal-layer {
        align-items: center;
        justify-items: center;
        padding: 14px;
    }

    .time-offer-overlay .time-offer-sheet {
        width: min(100%, 560px);
        max-height: calc(100vh - 28px);
    }
}