:root { --orange:#b30d1b; --ink:#240608; --muted:#80666a; --cream:#fff9f8; --line:#eedfe0; }
* { box-sizing:border-box; } body { margin:0; background:#f7eeee; color:var(--ink); font-family:Alexandria, Tahoma, sans-serif; padding-bottom:94px; }
button,input { font:inherit; } button { cursor:pointer; border:0; } .app-shell { max-width:900px; margin:auto; background:var(--cream); min-height:100vh; }
.hero { min-height:253px; color:white; padding:23px clamp(22px,5vw,48px); position:relative; overflow:hidden; background:linear-gradient(125deg,#210304 0%,#58080b 45%,#a40b16 100%); }
.hero:after { content:""; position:absolute; width:250px; height:250px; border-radius:50%; background:#e0a344; opacity:.17; left:-105px; bottom:-170px; box-shadow:210px -30px 0 -80px #b30d1b; } .top-actions { display:flex; gap:9px; direction:ltr; } .icon-button { color:#fff; background:#ffffff20; border:1px solid #ffffff38; width:38px; height:38px; border-radius:12px; font-size:13px; }
.brand { margin-top:58px; display:flex; align-items:center; gap:13px; } .logo { display:grid; place-items:center; width:52px; height:52px; background:#fff; color:#9d0b16; font-size:27px; font-weight:800; border-radius:18px 18px 6px 18px; } .eyebrow { margin:0 0 5px; font-size:11px; opacity:.78; }.brand h1 { margin:0; font-size:25px; }
.restaurant-meta { display:flex; align-items:center; gap:9px; margin-top:20px; font-size:11px; }.open-dot { background:#f7e8d1; color:#7d2800; padding:6px 10px; border-radius:20px; font-weight:700; }
.content { padding:20px clamp(17px,4vw,40px) 28px; }.offer-card { color:white; min-height:126px; border-radius:23px; padding:18px 21px; display:flex; justify-content:space-between; align-items:center; overflow:hidden; background:linear-gradient(118deg,#72080e,#c3101e); }.quick-order-banner{min-height:210px;padding:26px 30px}.offers-banner{margin-top:14px}.offer-card p { margin:0 0 6px; font-size:12px; opacity:.8; }.offer-card strong { display:block; font-size:16px; }.quick-order-banner strong{font-size:21px}.quick-order-banner .offer-link{font-size:12px;padding:10px 15px}.offer-link { color:#870b14; margin-top:13px; background:#fff; padding:7px 11px; border-radius:9px; font-size:10px; font-weight:700; }.offer-illustration { font-size:70px; transform:rotate(-12deg); filter:drop-shadow(0 9px 7px #3a0006aa); }
.search { height:49px; margin:20px 0 25px; border:1px solid var(--line); background:#fff; border-radius:15px; display:flex; align-items:center; gap:10px; padding:0 15px; color:var(--muted); }.search span { font-size:26px; transform:rotate(15deg); }.search input { border:0; outline:0; background:transparent; flex:1; font-size:12px; }.section-heading { display:flex; align-items:center; justify-content:space-between; }.section-heading h2 { font-size:16px; margin:0; }.section-heading button { color:var(--orange); background:transparent; font-size:11px; }.categories { display:flex; gap:11px; overflow:auto; padding:15px 0 27px; scrollbar-width:none; }.category { background:white; border:1px solid var(--line); min-width:73px; padding:8px 6px 9px; border-radius:16px; color:#5d5651; font-size:10px; }.category span { display:grid; place-items:center; width:35px; height:35px; margin:auto auto 6px; background:#fff0f1; border-radius:11px; font-size:20px; }.category.active { background:var(--orange); border-color:var(--orange); color:#fff; }.category.active span { background:#ffffff25; }.products-heading { margin-bottom:15px; }.products-heading p { margin:5px 0 0; color:var(--muted); font-size:10px; }.filter-button { color:var(--ink)!important; width:36px; height:36px; border:1px solid var(--line)!important; border-radius:11px; font-size:19px!important; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.product { background:#fff; border:1px solid #f0e3e4; border-radius:18px; overflow:hidden; text-align:right; transition:transform .18s; }.product:hover { transform:translateY(-3px); }.product-image { height:116px; display:grid; place-items:center; font-size:64px; position:relative; background:var(--product-bg); }.tag { position:absolute; top:9px; right:9px; background:#fff; color:#a20b16; padding:4px 7px; border-radius:7px; font-size:8px; font-weight:700; }.fav { position:absolute; left:9px; top:9px; background:#ffffffdf; color:#8c7275; width:27px; height:27px; border-radius:50%; font-size:15px; }.product-info { padding:11px; }.product h3 { margin:0; font-size:12px; }.product p { margin:6px 0 9px; color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.product-footer { display:flex; align-items:center; justify-content:space-between; }.price { color:var(--orange); font-size:12px; font-weight:800; }.add { width:27px; height:27px; color:#fff; background:var(--orange); border-radius:8px; font-size:19px; line-height:1; }
.bottom-nav { position:fixed; z-index:3; bottom:0; right:50%; transform:translateX(50%); width:min(900px,100%); display:flex; justify-content:space-around; padding:10px max(15px,calc((100vw - 900px)/2 + 15px)) 13px; background:#fff; border-top:1px solid var(--line); box-shadow:0 -5px 22px #55321b0d; }.bottom-nav button { color:#958c87; background:transparent; font-size:9px; display:grid; gap:4px; place-items:center; position:relative; }.bottom-nav span { font-size:20px; }.bottom-nav .active { color:var(--orange); }.cart-nav b { position:absolute; background:var(--orange); color:#fff; border-radius:20px; font-size:8px; min-width:15px; min-height:15px; display:none; place-items:center; top:-4px; right:-11px; }.cart-nav b.visible { display:grid; }.cart-chip { position:fixed; z-index:2; bottom:82px; right:50%; transform:translateX(50%); width:min(470px,calc(100% - 34px)); background:#29211e; color:#fff; border-radius:14px; padding:12px 16px; font-size:11px; box-shadow:0 8px 25px #0003; }.cart-chip span { display:inline-grid; place-items:center; width:20px; height:20px; background:var(--orange); border-radius:50%; margin-left:6px; }.cart-chip strong { float:left; }
dialog { border:0; padding:0; width:min(430px,calc(100% - 32px)); border-radius:24px; box-shadow:0 18px 70px #0005; } dialog::backdrop { background:#211e1c90; }.close { float:left; margin:13px; width:30px; height:30px; border-radius:50%; background:#f5eee9; font-size:23px; }.modal-image { height:210px; display:grid; place-items:center; font-size:110px; background:var(--product-bg); }.modal-copy { padding:19px 22px 24px; }.modal-copy h2 { margin:0; font-size:20px; }.modal-copy p { color:var(--muted); font-size:12px; line-height:1.9; }.modal-price { color:var(--orange); font-weight:800; }.modal-add { width:100%; margin-top:15px; padding:13px; color:#fff; background:var(--orange); border-radius:12px; font-size:13px; font-weight:700; }
dialog { border:0; padding:0; width:min(430px,calc(100% - 32px)); border-radius:24px; box-shadow:0 18px 70px #0005; } dialog::backdrop { background:#211e1c90; }.close { float:left; margin:13px; width:30px; height:30px; border-radius:50%; background:#f5eee9; font-size:23px; }.modal-image { height:210px; display:grid; place-items:center; font-size:110px; background:var(--product-bg); }.modal-copy { padding:19px 22px 24px; }.modal-copy h2 { margin:0; font-size:20px; }.modal-copy p { color:var(--muted); font-size:12px; line-height:1.9; }.modal-price { color:var(--orange); font-weight:800; }.modal-add { width:100%; margin-top:15px; padding:13px; color:#fff; background:var(--orange); border-radius:12px; font-size:13px; font-weight:700; }.product-options { display:grid; gap:7px; margin:16px 0 4px; }.product-options h3 { margin:0 0 3px; font-size:12px; }.sauce-options { display:grid; gap:7px; margin-top:8px; padding:11px; background:#fffafa; border:1px dashed #dcaeb3; border-radius:12px; }.sauce-options h4 { margin:0 0 2px; color:var(--orange); font-size:12px; }.sauce-options h4 small { color:var(--muted); font-size:9px; font-weight:400; }.option-choice { display:flex; align-items:center; gap:8px; padding:10px; background:#fff5f5; border:1px solid #f0dede; border-radius:10px; font-size:11px; }.option-choice input { accent-color:var(--orange); }.option-choice b { margin-right:auto; color:var(--orange); font-size:10px; }.checkout { padding:21px 22px 25px; }.checkout h2 { margin:0 0 6px; font-size:19px; }.checkout-subtitle { margin:0 0 15px; color:var(--muted); font-size:10px; }.cart-lines { max-height:190px; overflow:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.cart-line { padding:11px 0; display:flex; gap:8px; align-items:center; font-size:11px; }.cart-line strong { margin-left:auto; color:var(--orange); }.cart-line button { width:25px; height:25px; color:var(--orange); background:#fff1f2; border-radius:7px; font-size:16px; }.checkout-total { display:flex; justify-content:space-between; padding:14px 0; font-size:13px; }.checkout-total strong { color:var(--orange); }.checkout-form { display:grid; gap:9px; }.checkout-form input,.checkout-form textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:11px; outline-color:var(--orange); font-size:11px; }.checkout-form textarea { min-height:62px; }.send-order { width:100%; padding:13px; color:#fff; background:#15803d; border-radius:12px; font-size:12px; font-weight:700; }
@media (min-width:640px) { .hero { min-height:270px; }.product-grid { grid-template-columns:repeat(3,1fr); }.product-image { height:145px; }.offer-card { max-width:620px; }.content { padding-top:27px; } }

/* Keep the food photograph separate from the product details in the dialog. */
#dialog-content { display:flex; flex-direction:column; background:#fff; }
#dialog-content .modal-image { height:200px; min-height:200px; max-height:200px; overflow:hidden; flex:none; }
#dialog-content .modal-image .product-photo { width:100%; height:100%; object-fit:cover; object-position:center; }
#dialog-content .modal-copy { position:relative; z-index:1; background:#fff; color:var(--ink); }
#dialog-content .modal-copy h2 { color:#240608; font-size:21px; line-height:1.45; }
#dialog-content .modal-copy p { color:#6f5357; }

/* Product photos must never overlap the title, description, or price. */
.product-image { width:100%; height:auto; aspect-ratio:1 / 1; overflow:hidden; isolation:isolate; line-height:0; }
.product-image .product-photo { width:100%; height:100%; min-height:100%; max-height:100%; object-fit:cover; object-position:center; }
.product-info { position:relative; z-index:1; background:#fff; }
.product-info h3 { color:#240608; }