@charset "utf-8";

html { height: 100%; }

body.收银主体 { height: 100%; width: 100%; margin: 0; overflow: hidden; }

header.主页页眉 { position: relative; background: white; height: 3rem; width: calc(100% - 4vw); padding: 0 2vw; border-bottom: solid 1px #bdbdbd; display: flex ; align-items: center; z-index: 100; }

div.标识分区 { display: flex ; align-items: center; position: relative; cursor: pointer; }

div.标识分区:hover::before { background-color: #005a9c; bottom: 0; content: ""; height: 0.1875rem; left: 0; position: absolute; width: 100%; }

img.标识图片 { display: block; height: 1.5rem; margin-right: .5rem; }

h1.店名标题 { font-size: large; }

ul.页眉列表 { display: flex; list-style: none; }

li.页眉项目 { margin: 0 10px; position: relative; }

li.页眉项目:hover::before { background-color: #005a9c; bottom: 0; content: ""; height: 0.1875rem; left: 0; position: absolute; width: 100%; }

li.页眉最后项目 {margin-left: auto;display: flex;align-items: center;position: relative;}

li.页眉最后项目:hover::before { background-color: #005a9c; bottom: 0; content: ""; height: 0.1875rem; left: 0; position: absolute; width: 100%; }

img.头像图片 { width: 1.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; }

a.主导航链接 { display: block; width: 100%; padding: .8rem 0; color: black; text-decoration: none; font-weight: bold; }

main.主页主要 { height: calc(100% - 3.1rem); width: 100%; overflow: hidden; }

article.分页文章 { display: none; height: 100%; width: 100%; overflow: hidden; background: #f5f5f5; position: relative; }

section.点餐部分 { height: calc(100% - 1vw); display: flex ; justify-content: space-around; margin: .5vw; }

.菜单分区 { background: white; flex: 1; margin: .5vw; border-radius: 1vw; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.购物车分区 { background: white; margin: .5vw; border-radius: 1vw; display: flex ; flex-direction: column; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

table.购物车基础表格 { width: 100%; border-bottom: 1px dashed; }

table.购物车菜品表格 { width: 100%; border-bottom: 1px dashed; }

.购物车内容分区 { flex: 1; overflow: hidden auto; }

.购物车内容分区::-webkit-scrollbar { display: none; }

th.购物车菜品头 { text-align: left; }

button.加菜按钮 { width: 100%; border: 1px dotted black; background: whitesmoke; color: gray; }

button.购物车重置按钮 { border: none; background-color: #df2d2d; line-height: 1rem; font-size: 1rem; color: white; padding: 0.8rem; border-radius: 0.5rem; cursor: pointer; }

button.购物车重置按钮:hover { background-color: #bb2525; }

button.购物车挂账按钮 { border: none; background-color: #a1a100; line-height: 1rem; font-size: 1rem; color: white; padding: 0.8rem; border-radius: 0.5rem; cursor: pointer; }

button.购物车挂账按钮:hover { background-color: #7b7b00; }

button.确定按钮 { border: none; background-color: #056dff; line-height: 1rem; font-size: 1rem; color: white; padding: 0.8rem; border-radius: 0.5rem; cursor: pointer; }

button.确定按钮:hover { background-color: #0052c6; }

.购物车操作分区 { height: 3rem; display: flex ; justify-content: space-between; align-items: center; }

p.提示段落 { position: fixed; z-index: 5000; top: 50%; left: 50%; background: #4c4c4c; color: rgba(255,255,255,0.9); transform: translate(-50%,-50%); padding: 12px; border-radius: 12px; margin: 0; font-size: 14px; }

.菜单分类分区 { display: flex ; align-items: center; padding: 1rem; flex-wrap: wrap; }

button.菜品分类按钮 { margin: .5rem; background: white; padding: .5rem; outline: none; border-radius: .5rem; border: .01rem solid #ff712b; }

ul.菜单菜品列表 { margin: 0; padding: 1rem; list-style: none; display: flex ; flex-wrap: wrap; }

li.菜单菜品项目 { width: 5rem; margin: 1%; background: white; display: flex ; flex-direction: column; border-radius: 1rem; box-shadow: 0 0 5px 1px rgb(0 0 0 / 20%); cursor: default; position: relative; }

.菜品图片分区 { width: 100%; aspect-ratio: 1; overflow: hidden; border-top-left-radius: 1rem; border-top-right-radius: 1rem; }

img.菜品图片 { width: 100%; aspect-ratio: 1; object-fit: cover; }

.菜品信息分区 { flex: 1; width: 90%; overflow: hidden; padding: 5%; }

footer.主页页脚 { display: none }


/* 小尺寸 */
@media (max-width:767.9px) {
    button.主菜单按钮 { margin-left: auto; text-align: left; background: url(主菜单打开图标.svg) no-repeat right / contain; border: none; outline: none; width: 70px; height: 30px; }
    ul.页眉列表 { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: white; margin: 0; padding: 0.5rem calc(10vw - 30px); border-bottom: solid 1px #bdbdbd; }
    li.页眉项目::before { background-color: #ddd; bottom: 0.125rem; content: ""; height: .01rem; left: 0; position: absolute; width: 100%; }
    .购物车分区 { flex: 1; }
    .菜单分区 { display: none; }
}

/* 大尺寸 */
@media (min-width:768px) {
    button.主菜单按钮 { display: none }
    ul.页眉列表 { align-items: center; margin: 0; padding: 0; flex: 1; }
    div.标识分区 { margin-right: 20px; }
    .购物车分区 { width: 18rem; }
    button.加菜按钮 { display: none; }
}