@charset "utf-8";

html { font-size: 12px; }

body { background: whitesmoke; }

body::-webkit-scrollbar { display: none; }

aside.功能侧边 { left: 0; right: 0; background: white; position: fixed; bottom: 0; box-shadow: 0 0 1rem 0.5rem rgb(0 0 0 / 10%); }

footer.卖场页脚 { min-height: 10rem; }

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; }

h2.货架标题 { font-size: 1.2rem; }

ul.货架列表 { padding: 0; list-style: none; display: flex; flex-wrap: wrap; }

li.商品项目 {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;}

span.商品上标行内 { position: absolute; top: -0.5rem; width: 100%; font-size: 0.8rem; text-align: center; background: #d92323; border-radius: 0.2rem; color: white; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

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

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

img.商品图片 { width: 100%; height: 100%; object-fit: cover; }

h4.商品小标题 {margin: 0;height: 1.5rem;line-height: 1.5rem;color: #333;font-size: 1rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; text-align: center; }

p.商品描述段落 {margin: 0;color: gray;font-size: 0.8rem;height: 1rem;line-height: 1rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; text-align: center; }

p.商品单价段落 { margin: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height: 1.5rem;line-height: 1.5rem; text-align: center; }

span.商品价格行内 { color: #db1515; font-size: 1rem; font-weight: bold; }

span.商品单位行内 { color: gray; font-size: 0.8rem; margin-left: 0.4rem; }

.模态分区 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 50%); display: none; }

section.功能内容部分 { padding: 1rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; position: absolute; left: 0; right: 0; bottom: calc(-60vh - 2rem); background: white; height: 60vh; box-shadow: rgba(0, 0, 0, 0.2) 0px -0.2rem 1rem -0.2rem; display: flex; flex-direction: column; }

section.功能内容部分::-webkit-scrollbar { display: none; }

section.功能导航部分 { display: flex; justify-content: space-around; background: white; position: relative; }

.功能分区 { flex: 1; display: flex; flex-direction: column; padding: 0.5rem; position: relative; justify-content: center; cursor: default; align-items: center; box-shadow: rgba(0, 0, 0, 0.2) 0px -0.2rem 0.2rem 0px; }

.功能分区:active { box-shadow: inset 0 0 2rem 0 rgb(0 0 0 / 10%); }

span.功能行内 {position: absolute;top: 0rem;left: calc(50% + 0.5rem);font-size: 0.8rem;padding: 0 .4rem;text-align: center;background: #d11919;border-radius: 1rem;color: white;}

img.功能图片 { width: 2rem; height: 2rem; object-fit: contain; }

h5.功能小标题 { margin: 0; font-weight: normal; }

.选择分区 {display: flex;align-items: center;justify-content: flex-end;padding: 0 calc(50% - 3rem);/* overflow: hidden; */}

span.已选数量 { width: 2rem; text-align: center; }

button.减少按钮 {height: 2rem;width: 2rem;border: none;background: url(减少图标.png) no-repeat center / contain;border-radius: 1rem;box-shadow: 0 0 0.5rem 0 #d7d7d7;}

button.减少按钮:active { box-shadow: none; }

button.增加按钮 {height: 2rem;width: 2rem;border: none;background: url(增加图标.png) no-repeat center / contain;border-radius: 1rem;box-shadow: 0 0 0.5rem 0 #d5c379;}

button.增加按钮:active { box-shadow: none; }

.模态背景分区 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; background-color: rgb(0 0 0 / 50%); }

.模态框分区 { width: 300px; height: 500px; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2000; }

h4.组件小标题 { margin: 0; }

ul.购物车列表 {flex: 1;padding: 0;list-style: none;display: flex;overflow: hidden scroll;align-items: flex-start;flex-wrap: wrap;}

ul.购物车列表::-webkit-scrollbar { display: none; }

.购物车统计分区 {width: 100%;background: white;display: flex;align-items: center;justify-content: space-between;}

p.收货段落 { display: flex; margin: 0; }

input.收货姓名输入 { width: 4rem; flex: 1; border: none; outline: none; border-bottom-style: ridge; }

input.收货电话输入 { margin-left: 1rem; width: 8rem; flex: 2; border: none; outline: none; border-bottom-style: ridge; }

input.收货地址输入 { width: 15rem; border: none; outline: none; border-bottom-style: ridge; }

div.购物车共计分区 { margin-left: auto; margin-right: 1rem; color: #db1515; font-size: 1.2rem; font-weight: bold; }

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; }

form.搜索表单 {
    position: relative;
}

input.搜索输入 {
    input.搜索输入 { width: calc(100% - 10px);
    border: none;
    outline: none;
    padding: 5px 5px 5px 25px;
    margin: 5px;
    border-radius: 10px;
    background: white url(文件夹/搜索.svg) no-repeat 5px / 15px;
    font-size: 12px;
    color: gray;
    -webkit-appearance: none; };
    input.搜索输入 { width: calc(100% - 10px);
    border: none;
    outline: none;
    padding: 5px 5px 5px 25px;
    margin: 5px;
    border-radius: 10px;
    background: white url(文件夹/搜索.svg) no-repeat 5px / 15px;
    font-size: 12px;
    color: gray;
    -webkit-appearance: none; };
    width: calc(100% - 10px);
    outline: none;
    padding: 5px 5px 5px 25px;
    margin: 5px;
    border-radius: 10px;
    background: white url(搜索图标.svg) no-repeat 5px / 15px;
    font-size: 12px;
    color: gray;
}

input.提交输入 { position: absolute; right: 10px; top: 50%; font-size: 12px; padding: 0 5px; transform: translateY(-50%); background: no-repeat; border: none; outline: none; border-radius: 10px; }

ul.搜索列表 {
    flex: 1;
    padding: 0;
    list-style: none;
    display: flex;
    overflow: hidden auto;
    align-items: flex-start;
    flex-wrap: wrap;
}



ul.我的订单列表 {
    flex: 1;
    padding: 0;
    list-style: none;
    display: flex;
    overflow: hidden auto;
    align-items: flex-start;
    flex-wrap: wrap;
}

ul.我的订单列表::-webkit-scrollbar { display: none; }

li.订单项目 {
    height: 10rem;
    overflow: hidden;
    margin: 0.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 5px 1px rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
}

.订单页眉分区 {
    width: calc(100% - 1rem);
    padding: 0.5rem;
    height: 1rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.订单页脚分区 {
    width: calc(100% - 1rem);
    padding: 0.5rem;
    height: 1rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul.订单主体列表 { flex: 1; width: 100%; padding: 0; display: flex; overflow: auto hidden; list-style: none; }

ul.订单主体列表::-webkit-scrollbar { display: none; }

h3.订单号标题 {
    margin: 0;
}

p.订单号状态 {
    margin: 0;
}

li.订单商品项目 { height: 100%; aspect-ratio: 0.8; text-align: center; }

img.订单商品图片 { height: calc(100% - 2rem); aspect-ratio: 1; object-fit: cover; }

p.订单商品段落 { margin: 0; font-size: 0.8rem; }

/* 超小尺寸 */
@media (max-width: 500px) {
  li.商品项目 { width: 23%; }
  li.订单项目 { width: calc(100% - 1rem) }
}

/* 小尺寸 */
@media (min-width: 501px) and (max-width: 767.99px) {
  li.商品项目 { width: 18%; }
  li.订单项目 { width: calc(50% - 1rem) }
}

/* 中尺寸 */
@media (min-width: 768px) and (max-width: 991.99px) {
  li.商品项目 { width: 14.66%; }
  li.订单项目 { width: calc(33.3% - 1rem) }
}

/* 大尺寸 */
@media (min-width: 992px) and (max-width: 1199.99px) {
  li.商品项目 { width: 10.5%; }
  li.订单项目 { width: calc(25% - 1rem) }
}

/* 超大尺寸 */
@media (min-width: 1200px) {
  li.商品项目 { width: 8%; }
  li.订单项目 { width: calc(20% - 1rem) }
}