/*产品列表*/
.youquanyi-list-shop{
    margin: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 33px;
    margin-top: 6px;
}
.youquanyi-list-shop .box1{
    margin: 0 auto;
    width: 1360px;
    overflow: hidden;
    background-color: white;
    border-radius: 8px;
    /* padding: 2px 0; */
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); */
}


/*产品展示 方格模式 开始*/
.youquanyi-list-shop .box1 .productstyle {
    overflow: hidden;
    /* padding: 17px 10px 22px 10px; */
    background-color: #ffffff;
}
.youquanyi-list-shop .box1 .productstyle .left{
    overflow: hidden;
    float: left;
    /* width: 1308px; */
    /* min-width: 1174px; */
}
/*搜索*/
.youquanyi-list-shop .box1 .productstyle .left .search{
    width: 1360px;
    /* min-width: 1076px; */
    /* border-radius: 8px; */
    margin: 3px 0px 12px 0px;
    padding-bottom: 1px;
    border-bottom: 1px solid #dddddd;
}
/*筛选搜索*/
.youquanyi-list-shop .box1 .productstyle .left .search .sift{
    overflow: hidden;

    margin-bottom: 10px;
    /* border-radius: 10px; */
}



.youquanyi-list-shop .box1 .productstyle .right{
    overflow: hidden;
    float: right;
    width: 225px;
    /* min-width: 243px; */
    background-color: #f7f7f7;
    margin-top: 1px;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);;/* border-bottom: 2px solid #b8b9ba; */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-right: 3px;
    /* border-radius: 10px 10px 10px 10px; */
}

.youquanyi-list-shop .box1 .productstyle .titlebox1 {
    border-top:1px solid #a2e3fe;
}
.youquanyi-list-shop .box1 .productstyle .titlebox1 .toptitlebox {
    width:1000px;
    text-align:center;
    line-height:60px;
    color:#717171;
    font-size:18px;
    font-weight:bold;
    margin:20px;
    display:inline;
}
.youquanyi-list-shop .box1 .productstyle .shoptitlebox {
    float: left;
    overflow: hidden;
    width: 234px;
    min-width: 234px;
    max-height: 346px;
    min-height: 346px;
    margin: 9px 9px 8px 6px;
    background-color: #ffffff;
    cursor: pointer;
    border-radius: 10px;
    /* box-shadow: 0 2px 9px rgba(0, 0, 0, 0.07); */
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 10px;

}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox:hover {


    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.17);
}


/* 悬浮按钮区域 */
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .hover-action {
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    transition: bottom 0.3s ease;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox:hover .hover-action {
    bottom: 0; /* 悬停时滑上来 */
}

/* 按钮样式 */
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .hover-action .btn {
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;

    transition: transform 0.3s, box-shadow 0.3s;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .hover-action .buy {

    color: #fff;
    background: linear-gradient(239deg, #ff0000, #ff5353);
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .hover-action .buy:hover {
    /* background: #e4393c; */
    box-shadow: 0 10px 19px rgb(255 0 0 / 30%);
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .hover-action .info {
    background: #1e9fff;
    color: #ffffff;
    background: linear-gradient(239deg, #1e9fff, #69befe);
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .hover-action .info:hover {
    /* background: #006ec0; */
    box-shadow: 0 10px 19px rgba(0, 114, 255, 0.3);
}
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .titlebox {
    padding: 8px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    vertical-align: middle;
    max-height: calc(1.2em* 2);
}
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .hover-action .btn i {
    margin-right: 6px; /* 图标和文字留点间隔 */
}
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .imgbox {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease;
}
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .imgbox img {
    width: 234px;
    height: 234px;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 10px;
}


.advantage-wrapper
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .titlebox {
    padding: 5px 0px 0px;
    color: #525252;
    font-size: 16px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .infomsg {
    padding: 6px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .infomsg .span {
    font-size: 10px;
    color: #666666;
    padding: 2px 5px;
    border-radius: 4px;
    /* background-color: #e6e6e6; */
    /* border: none; */
    /* transition: all 0.2s ease; */
    /* box-shadow: 0 2px 4px rgb(159 159 159 / 20%); */
    /* height: 17px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 产品类型标签样式 */
.youquanyi-list-shop .box1 .productstyle .shoptitlebox .infomsg .span.type-card {
    color: #ffffff;
    background: linear-gradient(45deg, #ff9300, #ffa900);
    box-shadow: 0 2px 4px rgba(76,175,80,0.2);
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .infomsg .span.type-order {
    color: #ffffff;
    background: linear-gradient(45deg, #28c4ed, #e89dff);
    /* box-shadow: 0 2px 4px rgba(33,150,243,0.2); */
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .infomsg .span.type-product {
    color: #ffffff;
    background: linear-gradient(45deg, #b800ff, #E65100);
    box-shadow: 0 2px 4px rgba(255,152,0,0.2);
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .infomsg .span2 {
    font-size: 11px;
    color: #ffffff;
    padding: 2px 3px;
    height: 17px;
    border-radius: 4px;
    /* box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2); */
    min-width: 50px;
    max-width: 95px;          /* 设置最大宽度 */
    white-space: nowrap;       /* 不换行 */
    overflow: hidden;          /* 超出部分隐藏 */
    text-overflow: ellipsis;   /* 超出部分显示省略号 */
    /* display: inline-block; */     /* 确保宽度限制生效 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .infomsg .span3 {
    font-size: 10px;
    color: #5e5e5e;
    padding: 2px 3px;
    border-radius: 4px;
    /* box-shadow: 0 2px 4px rgb(185 185 185 / 20%); */
    min-width: 60px;
    max-width: 60px;          /* 设置最大宽度 */
    width: 60px;
    white-space: nowrap;       /* 不换行 */
    overflow: hidden;          /* 超出部分隐藏 */
    text-overflow: ellipsis;   /* 超出部分显示省略号 */
    /* display: inline-block; */     /* 确保宽度限制生效 */
    background: #ededed;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .shopbuybox {
    padding: 7px 0px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #f1f1f1;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .shopbuybox .moneybox {
    font-size: 22px;
    color: #ff0000;
    font-weight: 600;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .shopbuybox .moneybox span {
    font-size: 14px;
    margin-right: 2px;
}

.youquanyi-list-shop .box1 .productstyle .shoptitlebox .shopbuybox .buybox {
    font-size: 13px;
    color: #999999;
    padding: 0;
}

/*推荐标志*/
.recommend {
    position: absolute;
    width: 80px;
    height: 80px;
    top: -10px;
    left: -10px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    pointer-events: none;
    transform: translateZ(0);
}

/* 店长推荐标签样式 */
.shoptitlebox .recommend-text {
    position: absolute;
    top: 8px;
    left: 5px;
    background: linear-gradient(327deg, #cf00ff, #ff0000);
    color: white;
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 12px;

    z-index: 3;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: float 2s ease-in-out infinite, glow 3s ease-in-out infinite;
    pointer-events: none;
}

/* 漂浮动画 */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* 闪现光效果 */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px rgb(255 255 255 / 50%);
    }
    50% {
        box-shadow: 0 0 15px rgb(226 226 226 / 80%);
    }
    100% {
        box-shadow: 0 0 5px rgb(213 213 213 / 50%);
    }
}

/* 确保推荐图标在卡片悬停时保持位置 */
.youquanyi-list-shop .box1 .productstyle .shoptitlebox:hover .recommend {
    box-shadow: 0 1px 7px rgb(0 0 0 / 20%);
    transform: translateY(-1px);
}

/* 确保推荐文本在卡片悬停时保持位置 */
.youquanyi-list-shop .box1 .productstyle .shoptitlebox:hover .recommend-text {
    transform: translateY(6px);
}

/*帮助中心热门*/
.youquanyi-list-shop .box1 .productstyle .right .help-list{

}
.youquanyi-list-shop .box1 .productstyle .right .help-list h6 {
    font-size: 15px;
    color: #6c6c6c;
    border-bottom: 1px solid #ededed;
    font-weight: bold;
    margin: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 14px;
}
.youquanyi-list-shop .box1 .productstyle .right .help-list h6 i{
    color: #1e9fff;
    padding-right:5px;
}

.youquanyi-list-shop .box1 .productstyle .right .help-list .hot-help-title{

}
.youquanyi-list-shop .box1 .productstyle .right .help-list .font_black{
    color: #009128;
    margin: 7px 17px 11px 17px;
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: center;
}
.youquanyi-list-shop .box1 .productstyle .right .help-list .font_black i{
    color: #01c234;
    font-size: 19px;
    padding-right: 4px;
}
.youquanyi-list-shop .box1 .productstyle .right .help-list .hot-help-title div{
    color: #6a6a6b;
    line-height: 25px;
    margin: 7px 17px 7px 17px;
}
.youquanyi-list-shop .box1 .productstyle .right .help-list .hot-help-title div a:link{
    color: #6a6a6b;
}
.youquanyi-list-shop .box1 .productstyle .right .help-list .hot-help-title div a:hover{
    color: #dc0e18;
    text-decoration: underline;
}
.youquanyi-list-shop .box1 .productstyle .right .help-list .hot-help-title span{
    color: #00af9e;
    margin-left: 7px;
}

.youquanyi-list-shop .box1 .productstyle .right .help-list .download{
    margin-top: 30px;
}
.youquanyi-list-shop .box1 .productstyle .right .help-list .download .qrcode{
    display: flex;
    align-items: center;
    justify-content: center;
}

.youquanyi-list-shop .box1 .productstyle .right.help-list .download img{
    width: 150px;
    height: auto;
}

/*搜索排序*/
.youquanyi-list-shop .box1 .productstyle .left .search .short ul {
    display: inline-block;
    width: 1360px;
    border-bottom: 2px solid #dadada;
    /* background-color: #ffffff; */
    border-radius: 10px 10px 0 0;
    margin: 10px;
}

.youquanyi-list-shop .box1 .productstyle .left .search .short ul li {
    height: 100%;
    float: left;
    padding: 9px 15px;
    box-sizing: border-box;
    margin-top: 3px;
    font-size: 14px;
    cursor: pointer;
}
.youquanyi-list-shop .box1 .productstyle .left .search .short .active_back{
    background-color: #1e9fff;
    color: #000000;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(to top left, #dedede 53%, #e3e3e3 89%);
}
.youquanyi-list-shop .box1 .productstyle .left .search .short .active_back>a{
    color: white;
}

.layui-form-checked span, .layui-form-checked:hover span {
    background-color: #ff4c00 !important;
    border-radius: 2px 0 0 2px !important;
}
.layui-form-checked i, .layui-form-checked:hover i {
    color: #ff4a00 !important;
}

/*没有商品*/
.noshop{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:80px;
    padding-bottom:20px;
}
.noshop-msg{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom:50px;
    font-size: 18px;
    color: #6a6a6a;
}


.horizontal{
    overflow: hidden;
    margin: 20px 10px 16px 10px;
    /* border: 1px solid #e5e5e5; */
    transition: .3s;
    padding: 15px;
    border-radius: 10px;
    position: relative;
 
    border: 1px solid #dfdfdf;
}
.horizontal:hover{
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #ff0000;
}





.horizontal .imgx{
    overflow: hidden;
    float: left;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 横排列表中的店长推荐标签 */
.horizontal .recommend-text {
    position: absolute;
    top: 1px;
    left: 0px;
    background: linear-gradient(64deg, #ff0000, #ffc800);
    color: white;
    padding: 5px 10px;
    border-radius: 0 11px 56px 0;
    font-size: 12px;
    /* font-weight: bold; */
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: float 3s ease-in-out infinite, glow 2s ease-in-out infinite;
    pointer-events: none;
}

.horizontal .imgx img {
    width: 150px;
    /* padding: 5px; */
    height: 150px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}



.horizontal .boxto1{
    overflow: hidden;
    float: left;
    padding: 6px 0 7px 9px;
    width: 809px;
}

.horizontal .boxto1 .titles{
    padding-top: 1px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-left: 5px;
    letter-spacing: 0.5px;
    color: #373737;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    display: -webkit-box;
    font-size: 17px;
    font-weight: 500;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    word-break: break-all;
    transition: color 0.3s ease;
}

.horizontal .boxto1 .titles:hover{
    color: #ff0000;
}

.horizontal .boxto1 .infomsg2{
    padding-bottom: 9px;
    padding-left: 5px;
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.horizontal .boxto1 .infomsg2 .span{
    font-size: 10px;
    color: #666666;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #e6e6e6;
    border: none;
    transition: all 0.2s ease;
    /* box-shadow: 0 2px 4px rgba(159, 159, 159, 0.2); */
}

/* 列表视图中的产品类型标签 */
.horizontal .boxto1 .infomsg2 .span.type-card {
    color: #ffffff;
    background: linear-gradient(45deg, #ff9300, #ffa900);
    border: none;
    box-shadow: 0 2px 4px rgba(175, 133, 76, 0.2);
}

.horizontal .boxto1 .infomsg2 .span.type-order {
    color: #ffffff;
    /* background: linear-gradient(45deg, #21f360, #15b0c0); */
    background: linear-gradient(45deg, #28c4ed, #e89dff);
    border: none;
    /* box-shadow: 0 2px 4px rgba(33, 243, 96, 0.2); */
}

.horizontal .boxto1 .infomsg2 .span.type-product {
    color: #ffffff;
    background: linear-gradient(45deg, #b800ff, #E65100);
    border: none;
    box-shadow: 0 2px 4px rgba(184, 0, 255, 0.2);
}

.horizontal .boxto1 .infomsg2 .span2 {
    font-size: 10px;
    color: #ffffff;
    padding: 2px 4px;
    border-radius: 4px;
    /* box-shadow: 0 2px 4px rgba(33,150,243,0.2); */
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.horizontal .boxto1 .typename{
    margin: 0px 10px 4px 5px;
}

.horizontal .boxto1 .typename p{
    padding-top: 3px;
    font-size: 14px;
    vertical-align: baseline;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: #898989;
}

.horizontal .boxto2{
    margin: auto 0;
    overflow: hidden;
    /* padding: 10px; */
    display: flex;
    flex-direction: column;   /* 纵向排布 */
    justify-content: center;  /* 垂直居中 */
    align-items: center;      /* 水平居中 */
    height: 100%;             /* 拉满父容器高度 */
}

.horizontal .boxto2 .boxto2price{
    padding-top:20px;
    align-items: center;
    justify-content: center;
}

.horizontal .boxto2 .boxto2price .boxto2price1{
    font-size: 23px;
    vertical-align: baseline;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: rgb(220, 14, 24);
    text-align: center;
    font-weight: 600;
}

.horizontal .boxto2 .boxto2price .boxto2price2{
    font-size: 14px;
    vertical-align: baseline;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: rgb(154, 154, 154);
    text-align: center;
    padding:5px;
    text-decoration: line-through;
}

.horizontal .boxto2 .boxto2buy{
    margin: 0;
    text-align: center;
    padding-top: 24px;
}

.horizontal .boxto2 .boxto2buy .bottom{
    background-color: #ff5500;
    transition: .3s;
    border-radius: 20px 0 0 20px;
}
.horizontal .boxto2 .boxto2buy .bottom2{
    background-color: #1e9fff;

    border-radius: 0 20px 20px 0;

}



.ziti {
    font-family: "microsoft yahei";
}
.index-box1{
    overflow: hidden;
    height: auto;
    /* width: 1215px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 10px;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.06); */
}
.index-box1 .index-box1-title{
    overflow: hidden;
    padding: 11px;
    background-color: #EFF0F1;
    font-size: 18px;
    cursor: pointer;
    color: #006493;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
    width: 100%;
}
.index-box1 .index-box1-title span{
    float: right;
    overflow: hidden;
    font-size: 13px;
    color: #8d8d8d;
}
.index-box1 .index-box1-type{
    overflow: hidden;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    height: 53px;
    color: #6b6a6a;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #ededed;
    width: 100%;
    background-color: #f8f8f8;
    margin: 10px 10px 13px 2px;
}
.index-box1 .index-box1-type .index-box1-type1{
    padding: 10px;
    width: 62%;
    font-size: 15px;
}
.index-box1 .index-box1-type .index-box1-type2{
    padding: 10px;
    width: 10%;
    text-align: center;
    font-size: 15px;
}
.index-box1 .index-box1-type .index-box1-type4{
    padding: 10px;
    width: 10%;
    text-align: center;
    font-size: 15px;
}
.index-box1 .index-box1-type .index-box1-type5{
    padding: 10px;
    width: 11%;
    text-align: center;
    font-size: 15px;
}
.index-box1 .index-box1-shop{
    overflow: hidden;
    padding: 0px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    height: auto;
    margin: 0 0 4px 0;
    /* border-radius: 10px; */
    transition: .3s;
    width: 1392px;
}
.index-box1 .index-box1-shop:hover{
    background-color: rgb(234 234 234 / 45%);
}
.index-box1 .index-box1-shop:hover .index-box1-shop5 .layui-btn{
    transition: background-color 0.3s ease;
    background-color: #ff0000 !important;
}
.index-box1 .index-box1-shop .index-box1-shop1 {
    padding: 10px;
    text-align: left;
    font-size: 15px;
    color: #6f7070;
    height: auto;
    min-height: 20px;
    width: 61%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
}

.index-box1 .index-box1-shop .index-box1-shop1 .span {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 6px;
    color: #666666;
    background-color: #e6e6e6;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(159, 159, 159, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 极简视图中的产品类型标签 */
.index-box1 .index-box1-shop .index-box1-shop1 .span.type-card {
    color: #ffffff;
    background: linear-gradient(45deg, #ff9300, #ffa900);
    border: none;
    box-shadow: 0 2px 4px rgba(175, 133, 76, 0.2);
}

.index-box1 .index-box1-shop .index-box1-shop1 .span.type-order {
    color: #ffffff;
    background: linear-gradient(45deg, #28c4ed, #e89dff);
    /* background: linear-gradient(45deg, #21f360, #15b0c0); */
    border: none;
    box-shadow: 0 2px 4px rgba(33, 243, 96, 0.2);
}

.index-box1 .index-box1-shop .index-box1-shop1 .span.type-product {
    color: #ffffff;
    background: linear-gradient(45deg, #b800ff, #E65100);
    border: none;
    box-shadow: 0 2px 4px rgba(184, 0, 255, 0.2);
}

.index-box1 .index-box1-shop .index-box1-shop1 .biaoqian {
    width: auto;
    /* min-width: 80px; */
    font-size: 12px;
    color: #FFFFFF;
    padding: 4px 8px;
    margin-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(33,150,243,0.2);
    flex-shrink: 0;
    max-width: 120px;
}

.index-box1 .index-box1-shop .index-box1-shop1 a:link {
    color: #5b5b5b;
    text-decoration: none;
    transition: color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    position: relative;
    padding-right: 20px;
}

.index-box1 .index-box1-shop .index-box1-shop1 a:hover {
    color: #1e9fff;
}

/* 推荐标识样式 */
.index-box1 .index-box1-shop .index-box1-shop1 a.recommended:after {
    content: "推荐";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(64deg, #ff0000, #ffc800);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.3);
}

.index-box1 .index-box1-shop .index-box1-shop1 .tuijian {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
}

.index-box1 .index-box1-shop .index-box1-shop1 .tuijian span {
    white-space: nowrap;
    flex-shrink: 0;
}

.index-box1 .index-box1-shop .index-box1-shop2{
    padding: 10px;
    width: 7%;
    text-align: center;
    order: 4;
}

.index-box1 .index-box1-shop .index-box1-shop2 .money{
    font-size: 18px;
    color: #ef640b;
    font-weight: 600;
}

.index-box1 .index-box1-shop .index-box1-shop2 .money span{
    font-size: 12px;
}

.index-box1 .index-box1-shop .index-box1-shop2 .xiaoliang{
    font-size: 12px;
    color: #acacac;
    padding-top: 5px;
}

.index-box1 .index-box1-shop .index-box1-shop4{
    padding: 10px;
    width: 10%;
    text-align: center;
    font-size: 14px;
    color: #4CAF50;
    order: 2;
}

.index-box1 .index-box1-shop .index-box1-shop5{
    padding: 10px;
    width: 12%;
    text-align: center;
    order: 5;
}

.index-box1 .index-box1-shop .index-box1-shop5 .layui-btn {
    background-color: #1e9fff !important;
    transition: .3s;
    width: 87px;
    height: 33px;
    border-radius: 10px;
    font-size: 14px;
    border-radius: 40px;
    box-shadow: 0 2px 5px rgba(63, 181, 94, 0.3);
}

.index-box1 .index-box1-shop .index-box1-shop5 .layui-btn:hover {

    box-shadow: 0 4px 8px rgba(63, 181, 94, 0.4);
}

.biaoqian {
    /* width: 100px; */
    /* min-width: 100px; */
    /* font-size: 12px; */
    /* color: #FFFFFF; */
    /* padding: 5px; */
    /* margin-right: 4px; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    /* border-radius: 4px; */
}

.resource {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 5px 0;
}

.resource .resource-title {
    float: left;
    width: auto;
    min-width: 124px;
    max-width: 124px;
    color: #5a5a5a;
    padding: 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 3px 6px 3px 0;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* display: flex; */
    /* align-items: center; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent !important;
}

.resource .resource-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    /* padding-top: 2px; */
    margin-left: 5px;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* font-weight: normal; */
}

.resource .resource-title img {
    width: 20px;
    /* height: 20px; */
    border-radius: 50%;
    /* object-fit: cover; */
    /* flex-shrink: 0; */
}

/* 正确的选中状态的样式 */
.resource .resource-title.selected,
.resource .resource-title.selected a{
    color: #ff0000;
    font-weight: 600;
}

.resource .resource-title.selected{
    background-color: #fff4f1;
    border: 1px solid #f20000;!;
}
.resource .resource-title.selected:hover{
    background-color: #ffffff;
}


/* 分类筛选容器样式 */
.category-filter-container {
    padding: 0 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    border-bottom: 1px solid #e7e7e7;
}

.category-filter-container .layui-form-label {
    font-weight: normal;
    color: #333;
    padding: 15px 15px;
}

/* 资源包装器 */
.resource-wrapper {
    position: relative;
}

/* 资源容器折叠状态 */
.resource.collapsed {
    max-height: 115px; /* 3行的高度 */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* 资源容器展开状态 */
.resource.expanded {
    max-height: none;
    transition: max-height 0.3s ease;
}

/* 折叠按钮样式 - 右上角醒目设计 */
.category-toggle {
    position: absolute;
    top: 9px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    cursor: pointer;
    background: linear-gradient(135deg, #e6e6e6 0%, #efefef 100%);
    color: #7b7b7b;
    font-size: 13px;
    border-radius: 5px;
}

.category-toggle:hover {
    background: linear-gradient(135deg, #ff0000 0%, #8b00c3 100%);
    color: #ffffff;
    /* box-shadow: 0 5px 15px rgba(255, 129, 0, 0.5); */
}

.category-toggle:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 129, 0, 0.4);
}

.category-toggle .layui-icon {
    font-size: 16px;
    margin-right: 4px;
    transition: transform 0.3s ease;
    font-weight: bold;
}

.category-toggle .toggle-text {
    font-weight: 600;
    letter-spacing: 0.5px;
}



.resource .resource-title.click-animation {
    animation: click-pulse 0.3s ease;
}

/* 切换模版按钮样式 */
.stylelist {
    position: relative;
    overflow: hidden;
}

.stylelist:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    background-color: #f8f8f8 !important;
}

.stylelist:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* 添加点击波纹效果 */
.stylelist::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.stylelist:focus:not(:active)::after {
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* 第四个模板样式 - 一行两个商品 */
/* 使用特定的类名前缀避免冲突 */
.template-4-container {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* padding: 10px; */
}

.template-4-item {
    overflow: hidden;
    margin: 0 0 13px 11px;
    transition: .3s;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    /* width: 652px; */
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); */
    border: 1px solid #dfdfdf;
}

.template-4-item:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #ff0000;
}

.template-4-item:hover .boxto2 .boxto2buy .bottom {
    transition: background-color 0.3s ease;
    background-color: #ff0000 !important;

}

.template-4-item .imgx {
    overflow: hidden;
    /* padding: 15px; */
    position: relative;
    width: 120px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.template-4-item .recommend-text {
    position: absolute;
    top: 1px;
    left: -3px;
    background: linear-gradient(64deg, #ff0000, #ffc800);
    color: white;
    padding: 5px 10px;
    border-radius: 0 2px 17px 0;
    font-size: 12px;
    /* font-weight: bold; */
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: float 3s ease-in-out infinite, glow 2s ease-in-out infinite;
    pointer-events: none;
}

.template-4-item .recommend {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    pointer-events: none;
}

.template-4-item .imgbox {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 10px;
}

.template-4-item .imgbox img {
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    transition: transform 0.3s ease;
}



.template-4-item .boxto1 {
    overflow: hidden;
    padding: 0 0 0 5px;
    /* flex: 1; */
    /* min-width: 200px; */
}

.template-4-item .boxto1 .boxto1-1 .left1{
    float:left;
    overflow: hidden;
    width: 361px;
}
.template-4-item .boxto1 .boxto1-1 .right1{
    margin: 0 auto;
    float:right;
    overflow: hidden;
    /* padding: 10px; */
    width: 156px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 91px;
    flex-shrink: 0;
}
.template-4-item .boxto1 .boxto1-1 .right1 .bottom{
    background: linear-gradient(to right, #ff8100, #f57500);
    transition: .3s;
    border-radius: 20px 0 0 20px;
}
.template-4-item .boxto1 .boxto1-1 .right1 .bottom2{
    background: linear-gradient(to right, #1e9fff, #1e9fff);
    /* transition: .3s; */
    border-radius: 0 20px 20px 0;
}




.template-4-item .boxto1 .boxto1-1 .right1 .boxto2price {
    padding-top: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.template-4-item .boxto1 .boxto1-1 .right1 .boxto2price1 {
    font-size: 21px;
    vertical-align: baseline;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: rgb(255 0 0);
    text-align: center;
    font-weight: 600;
}

.template-4-item .boxto1 .boxto1-1 .right1 .boxto2price2 {
    font-size: 14px;
    vertical-align: baseline;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: rgb(154, 154, 154);
    text-align: center;
    /* padding: 5px 0 0 0; */
    text-decoration: line-through;
}

.template-4-item .boxto1 .boxto1-1 .right1 .boxto2buy {
    margin: 0;
    text-align: center;
    padding-top: 8px;
}

.template-4-item .boxto1 .boxto1-1 .right1 .boxto2buy .bottom {
    background-color: #35a2fd !important;
    transition: .3s;
    width: 87px;
    height: 39px;
    font-size: 14px;
    border-radius: 40px;
    box-shadow: 0 2px 5px rgba(63, 81, 181, 0.3);
}





.template-4-item .boxto1 .titles {
    padding-left: 3px;
    /* padding-right: 10px; */
    padding-bottom: 2px;
    /* padding-left: 5px; */
    /* letter-spacing: 0.5px; */
    color: #373737;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    display: -webkit-box;
    font-size: 16px;
    /* font-weight: 500; */
    /* line-height: 28px; */
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    word-break: break-all;
    transition: color 0.3s ease;
    max-width: 496px;
}

.template-4-item .boxto1 .titles:hover {
    color: #ff0000;
}

.template-4-item .boxto1 .infomsg2 {
    padding-bottom: 9px;
    padding-left: 5px;
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.template-4-item .boxto1 .infomsg2 .span {
    font-size: 10px;
    color: #666666;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #e6e6e6;
    border: none;
    transition: all 0.2s ease;
    /* box-shadow: 0 2px 4px rgba(159, 159, 159, 0.2); */
    /* height: 17px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 第四个模板中的产品类型标签 */
.template-4-item .boxto1 .infomsg2 .span.type-card {
    color: #ffffff;
    background: linear-gradient(45deg, #ff7c00, #ffa900);
    border: none;
    box-shadow: 0 2px 4px rgba(175, 133, 76, 0.2);
}

.template-4-item .boxto1 .infomsg2 .span.type-order {
    color: #ffffff;
    /* background: linear-gradient(45deg, #21f360, #15b0c0); */
    background: linear-gradient(45deg, #28c4ed, #e89dff);
    border: none;
    /* box-shadow: 0 2px 4px rgba(33, 243, 96, 0.2); */
}

.template-4-item .boxto1 .infomsg2 .span.type-product {
    color: #ffffff;
    background: linear-gradient(45deg, #b800ff, #E65100);
    border: none;
    box-shadow: 0 2px 4px rgba(184, 0, 255, 0.2);
}

.template-4-item .boxto1 .infomsg2 .span2 {
    font-size: 10px;
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 4px;
    /* box-shadow: 0 2px 4px rgba(33,150,243,0.2); */
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.template-4-item .boxto1 .typename {
    margin: 0px 10px 4px 5px;
}

.template-4-item .boxto1 .typename p {
    padding-top: 3px;
    font-size: 12px;
    vertical-align: baseline;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: #939393;
}



/* 模板切换图标样式 */
.style-icon {
    font-size: 20px;
    margin: 0 1px;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 5px;
    transition: all 0.1s ease;
    color: #cfcfcf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.style-icon:hover {
    /* background-color: #f5f5f5; */
    color: #5fb878;
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
}

.style-icon.active {
    /* background-color: #ff9244; */
    color: #ff5722;
    /* box-shadow: 0 4px 10px #a1e3b4; */
}

/* 确保图标容器样式正确 */
.layui-col-md3 > div:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

/* 帮助文档模块样式优化 */
.help-list {
    background-color: #ffffff;
    border-radius: 7px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.help-list:hover {
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
    /* transform: translateY(-3px); */
}

.hot-help-title {
    padding: 5px 0;
}

.hot-help-title h6 {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.hot-help-title h6:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 213px;
    background: linear-gradient(to right, #dedede, #ffffff);
}

.hot-help-title div {
    padding: 10px 0;
    border-bottom: 1px dashed #f0f0f0;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hot-help-title div:last-child {
    border-bottom: none;
}

.hot-help-title div a {
    color: #555;
    font-size: 14px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.hot-help-title div a:hover {
    color: #39bcb4;
    text-decoration: none;
    transform: translateX(5px);
}

.hot-help-title div span {
    color: #999;
    font-size: 12px;
    margin-left: 10px;
    flex-shrink: 0;
}

/* 下载二维码模块优化 */
.download {
    margin-top: 20px;
    /* padding: 15px; */
    background-color: #ffffff;
    border-radius: 10px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
    transition: all 0.3s ease;
}

.download:hover {
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
    /* transform: translateY(-3px); */
}

.download h6 {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    position: relative;
    text-align: center;
}

.download h6:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 77px;
    height: 2px;
    background: linear-gradient(to right, #39bcb4, #1e9fff);
}

.download .qrcode {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.download .qrcode #mobile_qrcode {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.download .qrcode #mobile_qrcode:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.download .scanning {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download .scanning i {
    margin-right: 5px;
    color: #39bcb4;
}

.shop_right_box{
    float: right;
    padding: 1px 6px;
    margin-top: 2px;
    margin-right: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.11);
    border-radius: 5px;
}

/* 列表视图过渡效果 */
#list-view {
    transition: opacity 0.3s ease;
    will-change: opacity; /* GPU加速 */
}

/* 商品卡片GPU加速 */
.shoptitlebox,
.horizontal,
.template-4-item,
.index-box1-shop {
    will-change: transform;

    transform: translateZ(0); /* 开启GPU加速 */
}

/* 商品图片懒加载样式 */
#list-view img.lazy {
    transition: opacity 0.3s ease;
    background-color: #f5f5f5; /* 浅灰色背景 */
}

#list-view img.lazy:not(.loaded) {
    opacity: 0.3;
}

#list-view img.lazy.loaded {
    opacity: 1;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 列表视图过渡效果 */
#list-view {
    transition: opacity 0.3s ease;
}

/* 骨架屏基础样式 */
.loading-skeleton {
    animation: fadeIn 0.3s ease-in;
}

/* 骨架屏动画 */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 通用骨架元素 */
.skeleton-title,
.skeleton-text,
.skeleton-price,
.skeleton-tag,
.skeleton-button,
.skeleton-button-small,
.skeleton-image,
.skeleton-image-small,
.skeleton-image-medium {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ========== 模板1：商品卡片骨架屏 ========== */
.skeleton-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 10px;
}

.skeleton-card {
    width: 225px;
    height: 384px;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.07);
}

.skeleton-card .skeleton-image {
    width: 100%;
    height: 242px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.skeleton-card .skeleton-title {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
}

.skeleton-card .skeleton-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.skeleton-card .skeleton-tag {
    width: 50px;
    height: 20px;
}

.skeleton-card .skeleton-price {
    width: 80px;
    height: 30px;
}

/* ========== 模板2：横排卡片骨架屏 ========== */
.skeleton-horizontal {
    padding: 20px 10px;
}

.skeleton-horizontal-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.06);
}

.skeleton-horizontal-item .skeleton-image-small {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    border-radius: 10px;
}

.skeleton-horizontal-item .skeleton-content-horizontal {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-horizontal-item .skeleton-title {
    width: 80%;
    height: 24px;
}

.skeleton-horizontal-item .skeleton-text {
    width: 60%;
    height: 16px;
}

.skeleton-horizontal-item .skeleton-text.short {
    width: 40%;
}

.skeleton-horizontal-item .skeleton-price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.skeleton-horizontal-item .skeleton-price {
    width: 100px;
    height: 30px;
}

.skeleton-horizontal-item .skeleton-button {
    width: 120px;
    height: 35px;
    border-radius: 20px;
}

/* ========== 模板3：精简风格骨架屏 ========== */
.skeleton-simple {
    padding: 20px 10px;
    background: #ffffff;
    border-radius: 10px;
}

.skeleton-simple-header {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 10px;
}

.skeleton-simple-header .skeleton-text {
    width: 20%;
    height: 20px;
}

.skeleton-simple-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.skeleton-simple-row .skeleton-text {
    width: 15%;
    height: 18px;
}

.skeleton-simple-row .skeleton-text.long {
    width: 50%;
}

.skeleton-simple-row .skeleton-button-small {
    width: 87px;
    height: 33px;
    border-radius: 40px;
}

/* ========== 模板4：横排列表骨架屏 ========== */
.skeleton-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
}

.skeleton-list-item {
    width: 649px;
    display: flex;
    gap: 15px;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.04);
}

.skeleton-list-item .skeleton-image-medium {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 10px;
}

.skeleton-list-item .skeleton-content-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-list-item .skeleton-title {
    width: 90%;
    height: 20px;
}

.skeleton-list-item .skeleton-text {
    width: 70%;
    height: 16px;
}

.skeleton-list-item .skeleton-tags {
    display: flex;
    gap: 6px;
}

.skeleton-list-item .skeleton-tag {
    width: 50px;
    height: 20px;
}

.skeleton-list-item .skeleton-price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.skeleton-list-item .skeleton-price {
    width: 100px;
    height: 28px;
}

.skeleton-list-item .skeleton-button {
    width: 120px;
    height: 35px;
    border-radius: 20px;
}

/* 旧的骨架屏样式（保留兼容） */
.skeleton-item {
    width: 242px;
    height: 384px;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
}

.skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-text.short {
    width: 60%;
}

/* 分类图标懒加载样式 */
.resource .resource-title img.category-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* 图片懒加载 - 加载中状态（骨架屏效果） */
.resource .resource-title img.lazy-load:not(.loaded) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border: 1px solid #e8e8e8;
}

/* 骨架屏闪烁动画 */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 图片加载完成后的淡入效果 */
.resource .resource-title img.loaded {
    animation: fadeIn 0.4s ease-in;
    border: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}