@charset "UTF-8";
a,body,dd,div,dl,dt,em,form,h1,h2,h3,html,i,img,input,li,p,span,ul {margin: 0;padding: 0;}
:root {
  --main-color: #ff2e4d;
  --main-bg-color: #F4F4F4;
  --font-size: 16px;
}
input, button {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    background: none;
    padding: 0;
}
html{background: var(--main-bg-color);font-size: var(--font-size);}
a:hover{color:var(--main-color)}
.flex{display: flex}
.page{width:100%;min-width: 320px;}
.page-header{position: fixed;width: 100vw;min-width: 320px;border-bottom: 1px solid #eee;background: var(--main-bg-color);z-index: 3;}
.page-header-space{padding: 20px 0;margin: 0 auto;width: 90vw;min-width: 320px;align-items: center;}
.page-content{margin: 0 auto;width: 90vw;min-width: 320px;}
.search-mini{display: none;margin-left: auto;margin-right: 10px;}

.logo img{
  width: 20vw;
  max-width: 260px;
  min-width: 150px;
}

.search{margin-left: auto;}
.search input{
    padding: 0 84px 0 16px;
    width: 40vw;
    min-width: 360px;
    max-width: 800px;
    height: 40px;
    font-size: 16px;
    line-height: 50px;
    color: rgba(51,51,51,0.8);
    caret-color: var(--main-color);
    background: rgba(0,0,0,0.03);
    border-radius: 999px;
  }
.search button{
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: -50px;
    z-index: 1;
}
.search button img{width: 20px;height: 20px;}
.search-mini img{width: 20px;height: 20px;cursor: pointer;}
.her{margin-left: auto;}
.her-mini{display: none;}
.her-mini .menu img{width: 30px;height: 30px;cursor: pointer;}
.search .layui-input:focus{border-color: #fff!important;}
.search .layui-input-affix i{margin-left: -80px;}
.search-list{
    position: absolute;
    width: calc(40vw - 40px);
    overflow-y: auto;
    background: #fff;
    z-index: 3;
    transition: all .3s;
    display: none;
    padding: 20px;
    font-size: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.search-list li{margin: 5px 0;}
.search-list i{color:var(--main-color);font-size: 18px;font-weight: bold;}

.selectbox{position: fixed;width: 300px;font-weight: bold;z-index: 2}
.promotion {position: absolute;display:flex;top: 0;z-index: 2;background: var(--main-bg-color);}
.selectbox .layui-icon{display: none;}
.selectbox .layui-form-radioed{color: var(--main-color);}
.selectbox .layui-form-radio>*{font-size: var(--font-size);}
.selectbox .layui-form-radio>*:hover{color: var(--main-color);}
.product-list{margin-top: 40px;}
.itemListFlow{
  column-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.itemListFlow li {
    break-inside: avoid-column; /* 防止内容在列中断开 */
    margin-bottom: 10px; /* 底部外边距，模仿行间距 */
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.itemListFlow li:hover {
  transform: translateY(20px);
  box-shadow: 0 4px 12px rgba(255, 16, 16, 0.8);
  border:1px solid var(--main-color);
}

.itemListFlow li .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
}

.itemListFlow li img {
    width: 100%; /* 图片宽度占满父元素 */
    height: auto; /* 保持图片比例 */
    display: block; /* 确保图片是块级元素 */
    border-radius: 8px;
}



.iteminfo {align-items: center;flex-wrap: wrap;}
.iteminfo img{width: 16px!important;vertical-align: middle;}
.iteminfo span{color: var(--main-color);margin-right: 10px;}
.iteminfo p{
    display: block;
    padding: 0 12px;
    min-width: 40px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    color: #fff;
    background: url(/static/index/images/coupon-bg.png) center no-repeat;
    background-size: 100% 22px;
    text-align: center;
    -webkit-font-smoothing: auto;
    cursor: pointer;
  }

.itemleft{width: 69%;margin-top: 20px;}
.itemleft img{width: 100%;height: auto;}
.itemdetailinfo{background: #fff;margin-bottom: 20px;display: flex;}
.itemtitleimg{width: 60%;}
.iteminformation{padding: 20px;width: 40%;}
.iteminformation p{margin: 20px 0;}
.iteminformation i{color:var(--main-color);display: inline-block;}
.iteminformation i img{width: 30px;vertical-align: middle;margin-left: 10px;}
.itemtobuy a{background: var(--main-color);color: #fff;height: 50px;line-height: 50px;border-radius: 8px;font-size: 18px;}
.itemcontent{padding: 20px;background: #fff;font-size: 16px;}
.itemright{width: 29%;margin-left: auto;margin-top: 20px;}
.itemright .sideitemlist img{width: 100%;height: auto;}

.sideitemlist li {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.3s;
    box-sizing: border-box;
}

.sideitemlist li:hover {
  transform: translateY(20px);
  box-shadow: 0 4px 12px rgba(255, 16, 16, 0.8);
  border:1px solid var(--main-color);
}

.sideitemlist li .title {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}

.search-results-list {
  column-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results-list li {
    break-inside: avoid-column; /* 防止内容在列中断开 */
    margin-bottom: 10px; /* 底部外边距，模仿行间距 */
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
  }

.search-results-list li:hover {
  transform: translateY(20px);
  box-shadow: 0 4px 12px rgba(255, 16, 16, 0.8);
  border:1px solid var(--main-color);
}

.search-results-list li .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
}

.search-results-list li img {
    width: 100%; /* 图片宽度占满父元素 */
    height: auto; /* 保持图片比例 */
    display: block; /* 确保图片是块级元素 */
    border-radius: 8px;
}

.searchmini{margin-top: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.searchmini form{justify-content: center;}

.searchmini input{
    padding: 0 40px 0 16px;
    width: 90vw;
    min-width: 200px;
    height: 40px;
    font-size: 16px;
    line-height: 50px;
    color: rgba(51,51,51,0.8);
    caret-color: var(--main-color);
    background: rgba(0,0,0,0.03);
    border-radius: 20px;
  }
.searchmini button{
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: -50px;
    z-index: 1;
}
.searchmini button img{width: 20px;height: 20px;}
.searchnimilist {
    position: absolute;
    width: calc(100% - 40px);
    overflow-y: auto;
    background: #fff;
    z-index: 3;
    transition: all .3s;
    display: none;
    padding: 20px;
    font-size: 16px;
    margin-top: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.searchnimilist li{margin: 5px 0;}
.searchnimilist i{color:var(--main-color);font-size: 18px;font-weight: bold;}
.searchmini .layui-input:focus{border-color: #fff!important;}
.searchmini .layui-input-affix i{margin-left: -80px;}

.searchpagelist {
  margin-top: 20px;
}

.hotsearchsitemslist{
  column-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hotsearchsitemslist li {
    break-inside: avoid-column; /* 防止内容在列中断开 */
    margin-bottom: 10px; /* 底部外边距，模仿行间距 */
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.hotsearchsitemslist li:hover {
  transform: translateY(20px);
  box-shadow: 0 4px 12px rgba(255, 16, 16, 0.8);
  border:1px solid var(--main-color);
}

.hotsearchsitemslist li .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
}

.hotsearchsitemslist li img {
    width: 100%; /* 图片宽度占满父元素 */
    height: auto; /* 保持图片比例 */
    display: block; /* 确保图片是块级元素 */
    border-radius: 8px;
}

@media screen and (max-width: 1200px) {
  .itemright{display: none;}
  .itemleft{width: 100%;}
}

@media screen and (max-width: 768px) {
  html{font-size: 14px;}
  .search{display: none;}
  .search-mini{display: block;}
  .her{display: none;}
  .her-mini{display: block;}
  .page-header-space{width: 95vw;}
  .page-content{width: 95vw;}
  .selectbox{display: none;}
  .promotion{display: none;}
  .channel p{padding-left: 10px;}
  .product-list{margin-top: 0;}
  .itemdetailinfo{display: block;}
  .itemtitleimg{width: 100%;}
  .iteminformation{width: calc(100% - 40px);}
  .searchmini{display: block;}
  .itemListFlow li .title ,.hotsearchsitemslist li .title ,.search-results-list li .title {font-size: 14px;}
}