:root {
    color-scheme: dark;
    --background: #090705;
    --surface: #15110e;
    --surface-raised: #201914;
    --surface-soft: #2a211a;
    --text: #f8f1e8;
    --muted: #bdb0a5;
    --gold: #c9934d;
    --gold-bright: #e2ad5c;
    --red: #df1830;
    --red-dark: #aa1021;
    --green: #17ad4b;
    --border: rgb(201 147 77 / 24%);
    --border-soft: rgb(255 255 255 / 8%);
    --frame: 31rem;
    --bottom-nav: 4.75rem;
    --radius-sm: .55rem;
    --radius: .75rem;
    --radius-lg: 1rem;
    --shadow: 0 .9rem 2.4rem rgb(0 0 0 / 34%);
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #050403;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 9.5rem; }
body { margin: 0; min-width: 0; line-height: 1.45; background: radial-gradient(circle at 50% 0, #2a1b12, #050403 31rem) fixed; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; background: var(--surface-raised); }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
:focus-visible { outline: .16rem solid var(--gold-bright); outline-offset: .2rem; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-shell { width: min(100%, var(--frame)); min-height: 100vh; margin-inline: auto; overflow: clip; background: var(--background); box-shadow: 0 0 3.5rem rgb(0 0 0 / 52%); }
.screen { min-height: 100vh; padding-bottom: calc(var(--bottom-nav) + env(safe-area-inset-bottom)); background: var(--background); }

/* Brand */
.brand { display: block; width: fit-content; text-decoration: none; }
.brand-image { display: block; height: auto; object-fit: contain; background: transparent; filter: drop-shadow(0 .65rem 1rem rgb(0 0 0 / 46%)); }
.brand-large .brand-image { width: clamp(9.5rem, 43vw, 11.25rem); }
.brand-small .brand-image { width: clamp(7rem, 25vw, 8.25rem); }

/* Shared navigation */
.topbar { position: relative; z-index: 20; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; min-height: 4rem; padding: .4rem .8rem; border-bottom: 1px solid var(--border-soft); background: var(--background); }
.topbar-overlay { position: absolute; inset: 0 0 auto; border: 0; background: linear-gradient(#080604ed 0%, #080604aa 58%, transparent 100%); }
.topbar h1 { margin: 0; overflow: hidden; font-size: clamp(.88rem, 3.6vw, 1rem); font-weight: 750; letter-spacing: .01em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.topbar-action { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--text); border: 0; border-radius: 50%; background: transparent; text-decoration: none; transition: color .16s ease, background-color .16s ease, transform .16s ease; }
.topbar-action:last-child { justify-self: end; }
.topbar-action svg { width: 1.4rem; }
.topbar-action:hover { color: var(--gold-bright); background: rgb(255 255 255 / 5%); }
.topbar-action:active { transform: scale(.94); }
.nav-badge { position: absolute; top: -.08rem; right: -.08rem; display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .22rem; color: #fff; border: 2px solid var(--background); border-radius: 2rem; background: var(--red); font-size: .67rem; font-weight: 800; line-height: 1; }
.bottom-nav { position: fixed; z-index: 40; right: 0; bottom: 0; left: 50%; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, var(--frame)); min-height: var(--bottom-nav); padding-bottom: env(safe-area-inset-bottom); transform: translateX(-50%); border-top: 1px solid var(--border); background: rgb(9 7 5 / 96%); backdrop-filter: blur(.85rem); }
.bottom-nav > a { position: relative; display: grid; place-items: center; align-content: center; gap: .24rem; min-height: 4.25rem; color: #a99e95; font-size: .72rem; font-weight: 650; text-decoration: none; transition: color .16s ease, transform .16s ease; }
.bottom-nav > a::before { content: ""; position: absolute; top: 0; width: 2.2rem; height: 2px; border-radius: 0 0 1rem 1rem; background: transparent; }
.bottom-nav > a.is-active { color: var(--red); }
.bottom-nav > a.is-active::before { background: var(--red); box-shadow: 0 0 .65rem rgb(223 24 48 / 45%); }
.bottom-nav > a:hover { color: var(--text); }
.bottom-nav > a:active { transform: translateY(1px); }
.bottom-nav svg { width: 1.45rem; }
.nav-icon-wrap { position: relative; }

/* Home */
.home-hero { position: relative; height: clamp(27rem, 72svh, 31.5rem); overflow: hidden; background: #120d09; }
.home-hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 52% 55%; background: #1b100a; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #080604e8 0%, #0a0704a8 22%, #08050345 47%, #0805036b 72%, var(--background) 100%), radial-gradient(circle at 50% 19%, transparent 0 17%, rgb(4 3 2 / 22%) 42%); }
.home-brand { position: absolute; z-index: 2; top: 2.35rem; left: 50%; display: grid; place-items: center; transform: translateX(-50%); }
.home-brand::before { content: ""; position: absolute; z-index: -1; width: 132%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(5 4 3 / 46%), transparent 69%); filter: blur(.25rem); }
.home-hero-content { position: absolute; z-index: 2; inset: clamp(13rem, 40svh, 15rem) 1rem auto; }
.service-info { display: grid; gap: .65rem; }
.service-info p { display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); gap: .45rem; margin: 0; }
.service-info svg { width: 1.08rem; margin-top: .15rem; color: var(--gold-bright); }
.service-info span { display: grid; gap: .02rem; }
.service-info strong { font-size: .79rem; font-weight: 750; line-height: 1.3; }
.service-info small { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.service-info p:first-child strong::before { content: ""; display: inline-block; width: .48rem; height: .48rem; margin-right: .4rem; border-radius: 50%; vertical-align: .06rem; background: var(--gold); box-shadow: 0 0 0 .2rem rgb(201 147 77 / 12%); }
.service-info.is-open p:first-child strong::before { background: #45c56f; box-shadow: 0 0 0 .2rem rgb(69 197 111 / 12%); }
.service-info.is-closed p:first-child strong::before { background: var(--red); box-shadow: 0 0 0 .2rem rgb(223 24 48 / 12%); }
.home-slogan { margin: 1.45rem 0 0 clamp(.5rem, 5vw, 1.35rem); color: var(--text); font-family: "Segoe Script", "Bradley Hand", cursive; font-size: clamp(1.35rem, 6vw, 1.72rem); font-weight: 600; line-height: 1.22; text-shadow: 0 .15rem .55rem #000; transform: rotate(-3deg); }
.home-slogan span { color: var(--gold-bright); }
.home-categories { position: relative; z-index: 3; display: flex; gap: .3rem; margin: -.85rem .75rem 0; padding: .36rem; overflow-x: auto; border: 1px solid var(--border); border-radius: .8rem; background: rgb(15 11 8 / 94%); box-shadow: 0 .55rem 1.5rem rgb(0 0 0 / 26%); scrollbar-width: none; }
.home-categories::-webkit-scrollbar { display: none; }
.home-categories a { display: grid; flex: 1 0 5.8rem; place-items: center; align-content: center; gap: .38rem; min-height: 4rem; padding: .35rem .45rem; color: var(--muted); border: 1px solid transparent; border-radius: .58rem; font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease; }
.home-categories a + a { border-left-color: var(--border-soft); }
.home-categories a:hover, .home-categories a:focus-visible { color: var(--text); border-color: rgb(223 24 48 / 35%); background: rgb(223 24 48 / 11%); }
.home-categories a:active { transform: scale(.97); }
.home-categories svg { width: 1.32rem; color: var(--gold-bright); }
.home-content { display: grid; gap: 1.35rem; padding: 1.15rem .75rem 1.5rem; }
.section-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; }
.section-heading::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--gold), transparent); }
.section-heading h2 { flex: 0 0 auto; margin: 0; color: var(--gold-bright); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.featured-card { position: relative; display: block; min-height: 11.75rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.featured-card > img { width: 100%; height: 11.75rem; object-fit: cover; object-position: center 56%; transition: transform .3s ease; }
.featured-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #080604e8 0%, #080604a8 45%, transparent 82%), linear-gradient(0deg, #0806049c, transparent 52%); }
.featured-copy { position: absolute; inset: auto 3.4rem 1rem .9rem; display: grid; max-width: 69%; }
.featured-copy strong { font-size: .95rem; line-height: 1.25; }
.featured-copy small { margin: .2rem 0 .42rem; color: #d8ccc2; font-size: .72rem; line-height: 1.35; }
.featured-copy b { color: var(--gold-bright); font-size: 1.08rem; }
.round-add { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #fff; border: 0; border-radius: 50%; background: var(--red); box-shadow: 0 .22rem .65rem rgb(223 24 48 / 25%); transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.round-add:hover { background: #ee2340; box-shadow: 0 .3rem .75rem rgb(223 24 48 / 34%); transform: translateY(-1px); }
.round-add:active { transform: scale(.93); }
.round-add svg { width: 1.05rem; }
.featured-card > .round-add { position: absolute; right: .75rem; bottom: .85rem; }
.featured-card:hover > img { transform: scale(1.018); }
.popular-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.popular-card { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.popular-card:hover { border-color: rgb(201 147 77 / 46%); transform: translateY(-1px); }
.popular-card > img { width: 100%; height: clamp(7rem, 30vw, 8.5rem); object-fit: cover; object-position: center 55%; }
.popular-card > span:not(.round-add) { display: grid; min-width: 0; padding: .65rem .65rem .75rem; }
.popular-card strong { display: -webkit-box; min-height: 2.5em; overflow: hidden; font-size: .81rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.popular-card small { margin-top: .32rem; color: var(--muted); font-size: .7rem; }
.popular-card b { padding-right: 2rem; color: var(--gold-bright); font-size: .86rem; }
.popular-card .round-add { position: absolute; right: .5rem; bottom: .6rem; width: 2rem; height: 2rem; }
.drinks-banner { position: relative; display: block; height: 7.75rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; }
.drinks-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: brightness(.68); transition: transform .3s ease; }
.drinks-banner:hover img { transform: scale(1.018); }
.drinks-banner > span { position: absolute; top: 50%; left: 1.25rem; transform: translateY(-50%) rotate(-3deg); font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 1.15rem; text-shadow: 0 .12rem .45rem #000; }
.drinks-banner small { display: block; color: var(--gold-bright); }

/* Menu */
.menu-logo { display: grid; place-items: center; min-height: 8.5rem; padding: .45rem 0 .7rem; background: radial-gradient(circle at 50% 45%, #24170f, transparent 52%); }
.menu-tools { position: sticky; z-index: 15; top: 0; padding: .7rem .75rem .5rem; border-bottom: 1px solid rgb(255 255 255 / 3%); background: rgb(9 7 5 / 96%); backdrop-filter: blur(.8rem); }
.search { display: flex; align-items: center; gap: .7rem; min-height: 3.1rem; padding: 0 .85rem; border: 1px solid var(--border-soft); border-radius: .7rem; background: var(--surface-raised); transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.search:focus-within { border-color: var(--gold); background: #251c16; box-shadow: 0 0 0 .2rem rgb(201 147 77 / 10%); }
.search svg { flex: 0 0 auto; width: 1.12rem; color: var(--muted); }
.search input { width: 100%; min-width: 0; padding: .78rem 0; color: var(--text); border: 0; outline: 0; background: transparent; font-size: .84rem; }
.search input::placeholder { color: #968980; opacity: 1; }
.category-tabs { display: flex; gap: .42rem; margin-top: .55rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs a { flex: 1 0 5.9rem; min-height: 2.55rem; padding: .66rem .85rem; scroll-snap-align: start; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 2rem; background: var(--surface); font-size: .74rem; font-weight: 750; text-align: center; text-decoration: none; transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease; }
.category-tabs a:hover { color: var(--text); border-color: rgb(223 24 48 / 40%); }
.category-tabs a:active { transform: scale(.97); }
.category-tabs a.is-active { color: #fff; border-color: rgb(223 24 48 / 70%); background: rgb(223 24 48 / 18%); box-shadow: inset 0 0 0 1px rgb(223 24 48 / 10%); }
.menu-list { padding: 0 .75rem 1.4rem; }
.menu-section { padding-top: 1.05rem; scroll-margin-top: 7.3rem; }
.js .menu-section { display: none; }
.js .menu-section.is-active { display: block; }
.menu-section > .section-heading { margin-bottom: .8rem; }
.menu-subcategory + .menu-subcategory { margin-top: 1.15rem; }
.menu-subcategory h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .32rem; color: var(--text); font-size: .82rem; font-weight: 750; letter-spacing: .01em; }
.menu-subcategory h3::before { content: ""; width: .22rem; height: .9rem; border-radius: 1rem; background: var(--red); }
.subcategory-products { display: grid; }
.product-list-item { display: grid; grid-template-columns: minmax(0, 1fr) 2.65rem; align-items: center; gap: .65rem; min-height: 6.3rem; padding: .62rem 0; border-bottom: 1px solid rgb(201 147 77 / 14%); }
.product-list-main { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: .75rem; min-width: 0; text-decoration: none; }
.product-list-main > img { width: 5rem; height: 5rem; object-fit: cover; object-position: center; border: 1px solid var(--border-soft); border-radius: .62rem; }
.product-list-copy { display: grid; min-width: 0; }
.product-list-copy > strong { display: -webkit-box; margin-bottom: .32rem; overflow: hidden; font-size: .86rem; line-height: 1.28; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-list-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.product-list-price b { color: var(--gold-bright); font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.product-list-item > .round-add { width: 2.25rem; height: 2.25rem; justify-self: end; text-decoration: none; }
.search-empty { margin: .95rem .75rem; padding: .95rem; color: var(--muted); border: 1px dashed var(--border); border-radius: .65rem; font-size: .8rem; text-align: center; }

/* Product detail */
.product-hero { width: 100%; height: clamp(16rem, 58vw, 20rem); object-fit: cover; object-position: center 55%; background: var(--surface-raised); }
.product-content { padding: 1.1rem .85rem 1.5rem; }
.product-content > h2 { margin: 0; font-size: clamp(1.08rem, 4.8vw, 1.35rem); line-height: 1.25; }
.product-description { margin: .42rem 0 1.15rem; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.product-form { display: grid; gap: 1rem; }
.detail-variants { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.detail-variants legend, .detail-field > span, .notes-field { color: var(--text); font-size: .78rem; font-weight: 750; }
.detail-variants label { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 3.55rem; padding: .7rem .8rem; color: var(--text); border: 1px solid var(--border-soft); border-radius: .68rem; background: var(--surface); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.detail-variants label:hover { border-color: rgb(201 147 77 / 42%); background: var(--surface-raised); }
.detail-variants label:has(input:checked) { border-color: rgb(223 24 48 / 72%); background: linear-gradient(90deg, rgb(223 24 48 / 16%), var(--surface-raised) 72%); box-shadow: inset .2rem 0 0 var(--red); }
.detail-variants input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--red); }
.detail-variants input:focus-visible { outline-offset: .22rem; }
.detail-variants span, .detail-variants strong { font-size: .84rem; }
.detail-variants strong { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.detail-addons { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.detail-addons legend { width: 100%; margin-bottom: .15rem; color: var(--text); font-size: .78rem; font-weight: 750; }
.detail-addons legend small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.detail-addons label { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 3.35rem; padding: .65rem .8rem; border: 1px solid var(--border-soft); border-radius: .68rem; background: var(--surface); cursor: pointer; }
.detail-addons label:has(input:checked) { border-color: rgb(201 147 77 / 65%); background: linear-gradient(90deg, rgb(201 147 77 / 13%), var(--surface-raised) 72%); box-shadow: inset .2rem 0 0 var(--gold); }
.detail-addons input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--red); }
.detail-addons span, .detail-addons strong { font-size: .82rem; }
.detail-addons strong { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.detail-field { display: grid; gap: .5rem; }
.quantity-control, .order-item-controls { display: flex; align-items: center; gap: .65rem; }
.quantity-control button, .order-item-controls button { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; padding: 0; color: var(--text); border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); font-size: 1.08rem; transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease; }
.quantity-control button:hover, .order-item-controls button:hover { color: var(--gold-bright); border-color: var(--gold); background: var(--surface-raised); }
.quantity-control button:active, .order-item-controls button:active { transform: scale(.94); }
.quantity-control output { min-width: 1.4rem; text-align: center; font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.notes-field { display: grid; gap: .45rem; }
.notes-field textarea { width: 100%; min-height: 6rem; resize: vertical; padding: .8rem .85rem; color: var(--text); border: 1px solid var(--border-soft); border-radius: .7rem; outline: 0; background: var(--surface-raised); font-size: .8rem; line-height: 1.45; transition: border-color .16s ease, box-shadow .16s ease; }
.notes-field textarea::placeholder { color: #968980; opacity: 1; }
.notes-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgb(201 147 77 / 10%); }
.primary-button, .whatsapp-button { display: flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; min-height: 3.35rem; padding: .75rem 1rem; color: #fff; border: 0; border-radius: .68rem; background: var(--red); box-shadow: 0 .45rem 1rem rgb(223 24 48 / 18%); font-size: .84rem; font-weight: 800; transition: filter .16s ease, transform .16s ease, box-shadow .16s ease; }
.primary-button:hover, .whatsapp-button:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 .55rem 1.2rem rgb(223 24 48 / 26%); transform: translateY(-1px); }
.primary-button:active, .whatsapp-button:active:not(:disabled) { transform: scale(.985); }
.primary-button svg, .whatsapp-button svg { width: 1.25rem; }
.related { margin-top: 1.5rem; }

/* Order */
.order-content { padding: .8rem .85rem 1.5rem; }
.order-items { display: grid; }
.order-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .5rem .7rem; padding: .75rem 0; border-bottom: 1px solid rgb(201 147 77 / 14%); }
.order-item > img { grid-row: 1 / 3; width: 4.5rem; height: 4.5rem; object-fit: cover; border: 1px solid var(--border-soft); border-radius: .58rem; }
.order-item-copy { min-width: 0; }
.order-item-copy h2 { display: -webkit-box; margin: 0; overflow: hidden; font-size: .84rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.order-item-copy p { margin: .18rem 0; color: var(--muted); font-size: .72rem; }
.order-item-copy strong { color: var(--gold-bright); font-size: .8rem; }
.order-item-addons { display: grid; gap: .12rem; margin: .3rem 0; padding: 0; color: var(--muted); font-size: .7rem; list-style: none; }
.order-item-addons li { display: flex; justify-content: space-between; gap: .6rem; }
.order-item-addons li span:last-child { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.order-item-copy small { display: -webkit-box; max-width: 15rem; margin-top: .22rem; overflow: hidden; color: #9f9288; font-size: .7rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.order-item-controls { grid-column: 2; gap: .5rem; }
.order-item-controls button { width: 2.15rem; height: 2.15rem; border-radius: 50%; font-size: .9rem; }
.order-item-controls strong { min-width: 1ch; font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; }
.remove-order-item { grid-column: 3; grid-row: 1 / 3; align-self: center; min-width: 2.75rem; min-height: 2.75rem; padding: .45rem; color: #b69da0; border: 0; border-radius: .45rem; background: transparent; font-size: .72rem; text-decoration: underline; text-underline-offset: .15rem; }
.remove-order-item:hover { color: #ef929c; background: rgb(223 24 48 / 8%); }
.empty-order { padding: 2.6rem .5rem 2.2rem; text-align: center; }
.empty-order h2 { margin: 0; font-size: 1.1rem; }
.empty-order p { margin: .45rem 0 0; color: var(--muted); font-size: .8rem; }
.add-more { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin: .85rem 0 1.25rem; padding: .62rem .7rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); font-size: .78rem; font-weight: 700; text-decoration: none; transition: border-color .16s ease, background-color .16s ease; }
.add-more:hover { border-color: rgb(201 147 77 / 48%); background: var(--surface-raised); }
.add-more .round-add { width: 1.9rem; height: 1.9rem; }
.add-more > svg { width: 1.05rem; color: var(--muted); }
.service-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.service-type legend { grid-column: 1 / -1; margin-bottom: .2rem; font-size: .78rem; font-weight: 750; }
.service-type label { position: relative; display: grid; place-items: center; min-height: 3.15rem; padding: .55rem; color: var(--muted); border: 1px solid var(--border-soft); border-radius: .65rem; background: var(--surface); cursor: pointer; text-align: center; transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease; }
.service-type label:hover { color: var(--text); border-color: rgb(201 147 77 / 42%); }
.service-type label:active { transform: scale(.98); }
.service-type label:has(input:checked) { color: #fff; border-color: rgb(223 24 48 / 72%); background: linear-gradient(180deg, rgb(223 24 48 / 21%), rgb(170 16 33 / 16%)); box-shadow: inset 0 0 0 1px rgb(223 24 48 / 9%); }
.service-type input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.service-type label:has(input:focus-visible) { outline: .16rem solid var(--gold-bright); outline-offset: .2rem; }
.service-type span { font-size: .75rem; font-weight: 750; }
.order-total { display: grid; gap: .55rem; padding: .85rem 0 1rem; border-top: 1px solid var(--border); }
.order-total p { display: flex; justify-content: space-between; margin: 0; color: var(--muted); font-size: .78rem; }
.order-total p strong { color: var(--text); font-variant-numeric: tabular-nums; }
.order-total p:last-child { padding-top: .65rem; color: var(--text); border-top: 1px solid var(--border-soft); font-size: .88rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.order-total p:last-child strong { color: var(--gold-bright); font-size: 1.15rem; }
.whatsapp-button { margin-top: .2rem; background: var(--green); box-shadow: 0 .45rem 1rem rgb(23 173 75 / 18%); }
.whatsapp-button:hover:not(:disabled) { box-shadow: 0 .55rem 1.2rem rgb(23 173 75 / 25%); }
.whatsapp-button[aria-busy="true"] { cursor: wait; }
.whatsapp-button[aria-busy="true"] svg { animation: checkout-pulse .9s ease-in-out infinite alternate; }
.whatsapp-button:disabled { cursor: not-allowed; box-shadow: none; filter: grayscale(.72); opacity: .46; }
.checkout-notice { margin: .7rem 0 0; padding: .15rem .25rem .15rem .75rem; color: var(--gold-bright); border: 0; border-left: .2rem solid var(--gold); background: transparent; font-size: .76rem; line-height: 1.4; }
.checkout-notice.is-error { color: #f2abb2; border-left-color: var(--red); }
.order-service { margin-top: 1.15rem; padding: .9rem; border-block: 1px solid var(--border); background: linear-gradient(90deg, rgb(201 147 77 / 5%), transparent); }
.order-service > p { margin: .75rem 0 0; padding-top: .7rem; color: var(--muted); border-top: 1px solid var(--border-soft); font-size: .72rem; line-height: 1.45; }
.order-banner { position: relative; height: 8.5rem; margin-top: 1rem; overflow: hidden; border-radius: .7rem; background: var(--surface-raised); }
.order-banner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.53); }
.order-banner p { position: absolute; top: 50%; left: 1rem; margin: 0; transform: translateY(-50%) rotate(-3deg); font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 1.05rem; text-shadow: 0 .12rem .4rem #000; }
.order-banner span { color: var(--gold-bright); }

/* Feedback and errors */
.toast { position: fixed; z-index: 60; top: .75rem; left: 50%; width: max-content; max-width: calc(100% - 1.5rem); padding: .7rem .9rem; transform: translate(-50%, -4.5rem); color: #fff; border: 1px solid var(--border); border-radius: 2rem; background: var(--surface-raised); box-shadow: var(--shadow); font-size: .78rem; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.intro { min-height: 100vh; padding: 4rem 1rem; background: radial-gradient(circle at 80% 30%, #2d1b10, var(--background) 45%); }
.intro-content { display: grid; gap: 1rem; }
.intro h1 { max-width: 12ch; margin: 0; font-family: Georgia, serif; font-size: clamp(2.3rem, 12vw, 4rem); line-height: 1; }
.intro-copy { max-width: 30rem; color: var(--muted); }
.status { width: fit-content; padding: .35rem .65rem; color: var(--muted); border: 1px solid var(--border); border-radius: 2rem; font-size: .75rem; }
.service-card { padding: .8rem; border-block: 1px solid var(--border); }
.service-card p { display: grid; grid-template-columns: 1.3rem 1fr; margin: 0; }
.service-card svg { grid-row: 1 / 3; width: 1rem; color: var(--gold); }
.service-card strong { font-size: .8rem; }
.service-card small { grid-column: 2; color: var(--muted); font-size: .72rem; }
.primary-link { display: flex; align-items: center; justify-content: center; gap: .55rem; width: fit-content; min-height: 3rem; padding: .7rem 1.05rem; color: #fff; border-radius: .6rem; background: var(--red); font-size: .8rem; font-weight: 800; text-decoration: none; }
.primary-link svg { width: 1.1rem; }
.card { margin: 2rem; padding: 1rem; border: 1px solid var(--border); background: var(--surface); }

@keyframes checkout-pulse { to { transform: scale(1.08); opacity: .7; } }

@media (max-width: 22rem) {
    .home-hero { height: 29rem; }
    .home-hero-content { top: 12.2rem; inset-inline: .75rem; }
    .home-slogan { margin-top: 1rem; font-size: 1.2rem; }
    .home-categories { margin-inline: .55rem; }
    .home-content, .menu-list { padding-inline: .6rem; }
    .product-list-main { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .58rem; }
    .product-list-main > img { width: 4.5rem; height: 4.5rem; }
    .product-list-item { grid-template-columns: minmax(0, 1fr) 2.35rem; }
    .order-item { grid-template-columns: 4rem minmax(0, 1fr) auto; }
    .order-item > img { width: 4rem; height: 4rem; }
    .remove-order-item { min-width: 2.35rem; padding-inline: .2rem; font-size: .7rem; }
}

@media (min-width: 48rem) {
    :root { --frame: 42rem; }
    .app-shell { border-inline: 1px solid var(--border); }
    .home-hero { height: 32rem; }
    .home-hero-content { inset-inline: 1.5rem; }
    .home-categories { margin-inline: 1rem; }
    .home-content, .menu-list { padding-inline: 1rem; }
    .featured-card, .featured-card > img { min-height: 14rem; height: 14rem; }
    .popular-card > img { height: 10rem; }
    .product-hero { height: 24rem; }
    .product-content, .order-content { padding-inline: 1.2rem; }
    .product-list-main { grid-template-columns: 5.4rem minmax(0, 1fr); }
    .product-list-main > img { width: 5.4rem; height: 5.4rem; }
}

@media (min-width: 72rem) {
    :root { --frame: 46rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.notice-body { min-height: 100vh; background: radial-gradient(circle at top, #382012 0, #0b0806 55%); color: #f7efe7; }
.public-notice { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 28px 20px; text-align: center; }
.public-notice-logo { border-radius: 50%; box-shadow: 0 25px 70px rgba(0,0,0,.48); height: auto; margin-bottom: -42px; position: relative; width: min(190px, 55vw); z-index: 1; }
.public-notice-card { background: rgba(25,19,15,.97); border: 1px solid #5a3e29; border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.45); max-width: 680px; padding: 70px clamp(24px, 7vw, 58px) 38px; width: 100%; }
.public-notice-eyebrow { color: #e9a23b; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.public-notice h1 { font-family: Georgia, serif; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.05; margin: 12px 0 18px; }
.public-notice p { color: #d7c7b9; font-size: clamp(1rem, 3vw, 1.16rem); line-height: 1.7; margin: 0; white-space: pre-line; }