:root { --red: #be2d22; --cream: #fff7e9; --ink: #281b16; --gold: #f3b13f; }
* { box-sizing: border-box; }
html,body { overflow-x: hidden; }
html,body { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body { margin: 0; background: #281b16; color: var(--ink); font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.order-shell { width: min(100%,520px); min-height: 100vh; margin: auto; padding-bottom: 105px; background: var(--cream); }
button { font: inherit; }
.food-head { display: flex; align-items: center; justify-content: space-between; padding: 18px; }
.food-head small { display: block; color: #9b8378; font-size: 10px; }
.food-head strong { display: block; margin-top: 3px; font-size: 17px; }
.food-head button { width: 38px; height: 38px; border: 1px solid #ead9c3; border-radius: 12px; background: #fff; }
.food-hero { position: relative; display: flex; min-height: 300px; margin: 0 14px; overflow: hidden; border-radius: 24px; background: linear-gradient(135deg,#b9271d,#73140f); color: #fff; }
.food-hero>div:first-child { position: relative; z-index: 2; padding: 36px 0 30px 25px; }
.food-hero span { color: #ffc45c; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.food-hero h1 { margin: 12px 0; font-family: "Songti SC",serif; font-size: 34px; line-height: 1.18; }
.food-hero p { font-size: 11px; opacity: .82; }
.order-now { margin-top: 18px; padding: 10px 17px; border: 0; border-radius: 999px; background: #ffc654; color: #5b160f; font-weight: 700; }
.dish { position: absolute; right: -48px; bottom: -44px; display: grid; width: 226px; height: 226px; place-items: center; border: 14px solid #eee4d2; border-radius: 50%; background: radial-gradient(circle,#f6c35b 0 35%,#6b351c 36% 58%,#f3eadc 59%); box-shadow: 0 16px 30px #28000066; font-size: 70px; transform: rotate(-7deg); }
.dish b { position: absolute; right: 54px; top: 12px; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #ffc654; color: #71150e; font-size: 14px; }
.quick-menu { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 18px 14px 12px; }
.quick-menu button { min-width: 0; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; padding: 11px 8px; border: 1px solid #eee0cb; border-radius: 14px; background: #fff; text-align: left; }
.quick-menu i { grid-row: 1/3; display: grid; place-items: center; color: var(--red); font-size: 22px; }
.quick-menu span { font-size: 11px; font-weight: 700; }
.quick-menu small { color: #a79285; font-size: 8px; }
.food-tabs { position: sticky; z-index: 7; top: 0; display: flex; gap: 9px; padding: 13px 14px; background: #fff7e9ee; backdrop-filter: blur(10px); }
.food-tabs button { padding: 8px 13px; border: 0; border-radius: 999px; background: #f2e7d7; color: #7f6b60; font-size: 11px; }
.food-tabs .active { background: var(--ink); color: #fff; }
.menu-list { display: grid; gap: 13px; padding: 0 14px; }
.menu-list article { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px #5f37280c; }
.meal { position: relative; display: grid; height: 126px; place-items: center; border-radius: 14px; font-size: 46px; }
.meal-a { background: #f4c768; }
.meal-b { background: #ddb071; }
.meal-c { background: #e88f68; }
.meal em { position: absolute; left: 7px; top: 7px; padding: 4px 7px; border-radius: 4px; background: var(--red); color: #fff; font-size: 8px; font-style: normal; }
.menu-list h2 { margin: 7px 0 6px; font-size: 14px; }
.menu-list p { margin: 0 0 6px; color: #806c61; font-size: 9px; }
.menu-list span { color: #b09b8e; font-size: 8px; }
.menu-list footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.menu-list strong { color: var(--red); font-size: 16px; }
.food-add { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--red); color: #fff; }
.cart-bar { position: fixed; z-index: 10; right: 0; bottom: 12px; left: 0; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; width: min(calc(100% - 28px),492px); margin: auto; padding: 8px 9px; border-radius: 18px; background: #281b16; color: #fff; box-shadow: 0 12px 30px #2c160f44; }
.cart-icon { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: var(--gold); color: #4d2012; font-size: 20px; }
.cart-icon b { position: absolute; right: -4px; top: -5px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-size: 9px; }
.cart-bar strong,.cart-bar small { display: block; }
.cart-bar strong { font-size: 12px; }
.cart-bar small { margin-top: 2px; color: #af9e95; font-size: 8px; }
.cart-bar button { padding: 12px 18px; border: 0; border-radius: 12px; background: var(--gold); font-size: 12px; font-weight: 700; }
.cart-bar button:disabled { background: #5a4b44; color: #92857f; }
@media (min-width:600px) {
  body { padding: 28px; }
  .order-shell { box-shadow: 0 24px 70px #0006; }
}
/*独立预览(桌面直接打开 ≥600px): 与首页一致的自适应手机外框, 仅本模板使用(原共享 ../frame.css 合并而来, 级联顺序保持最后)*/
@media (min-width: 600px) {
  html { min-height: 100%; }
  body { display: grid; min-height: 100dvh; place-items: center; margin: 0; padding: 0 1.5rem; }
  .order-shell { width: min(100%, 26rem); height: 100dvh; min-height: 0; overflow-x: hidden; overflow-y: auto; border: .625rem solid #151b26; border-radius: 2.2rem; box-shadow: 0 1.8rem 3.5rem rgba(24, 39, 68, .3); scrollbar-width: none; }
  .order-shell::-webkit-scrollbar { display: none; }
  .cart-bar { width: min(calc(100% - 3.75rem), 24.75rem); bottom: .625rem; }
  .food-app { background: radial-gradient(circle at 50% 15%, #5d3027 0, transparent 38%), #281b16; }
}
/*真实菜品素材与可交互购物车*/
.dish { overflow: hidden; border-color: #f6ead7; background: #fff; transform: rotate(-7deg); }
.dish img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dish b { z-index: 2; box-shadow: 0 5px 12px #6e1a1240; }
.meal { overflow: hidden; background: #f4c768; }
.meal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meal-a,.meal-b,.meal-c { background: #ead1a8; }
.quantity-control { display: flex; align-items: center; gap: 5px; }
.quantity-control button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
.quantity-control .food-add { background: var(--red); color: #fff; }
.food-minus,.food-qty { display: none; }
.quantity-control.selected .food-minus,.quantity-control.selected .food-qty { display: grid; place-items: center; }
.food-minus { background: #f6e5d4; color: var(--red); }
.food-qty { min-width: 16px; color: var(--ink); font-size: 12px; text-align: center; }
.cart-bar .cart-icon { border: 0; padding: 0; cursor: pointer; }
.cart-drawer { position: fixed; z-index: 20; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px 0; background: #22120d66; opacity: 0; pointer-events: none; transition: opacity .2s; }
.cart-drawer.open { opacity: 1; pointer-events: auto; }
.cart-panel { width: min(100% - 28px,492px); max-height: calc(100% - 24px); overflow: auto; padding: 18px 16px 16px; border-radius: 22px; background: #fffaf1; box-shadow: 0 -18px 50px #1d0e0c30; transform: translateY(20px); transition: transform .2s; }
.cart-drawer.open .cart-panel { transform: translateY(0); }
.cart-panel header,.cart-panel footer { display: flex; align-items: center; justify-content: space-between; }
.cart-panel header { padding-bottom: 13px; border-bottom: 1px solid #f0dfc9; font-size: 16px; }
.cart-panel header button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f5e8d7; color: #765e50; }
.cart-item { display: flex; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid #f4e7d6; color: #4a362c; font-size: 12px; }
.cart-item b { color: var(--red); }
.cart-item small { color: #987f70; font-weight: 400; }
.cart-empty { padding: 22px 0; color: #9b8378; font-size: 12px; text-align: center; }
.cart-panel footer { padding-top: 16px; }
.cart-panel footer strong { color: var(--red); font-size: 20px; }
.cart-panel footer button { padding: 11px 18px; border: 0; border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; }
.order-toast { position: fixed; z-index: 30; left: 50%; bottom: 92px; padding: 10px 15px; border-radius: 999px; background: #281b16eF; color: #fff; font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%,8px); transition: all .2s; }
.cart-bar { grid-template-columns: 48px minmax(0,1fr) auto; min-height: 60px; }
.cart-bar>div:nth-child(2) { min-width: 0; }
.cart-bar>div:nth-child(2) strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-toast.show { opacity: 1; transform: translate(-50%,0); }
/*页面背景保持浅色，购物车按手机内容区底部对齐，避免独立预览露出深色底。*/
body.food-app { background: #f3efe7; }

/* Improve checkout control readability and touch size. */
.cart-bar strong { font-size: 14px; }
.cart-bar small { font-size: 10px; }
.cart-bar button { min-height: 44px; font-size: 13px; }