/* facs base shared styles */

/* 轮播图样式 */
#demo1 { position: relative; overflow: hidden; height: 200px; }
#demo1 ul { margin: 0; padding: 0; list-style: none; height: 200px; position: relative; }
#demo1 ul li { position: absolute; top: 0; left: 0; width: 100%; height: 200px; display: none; }
#demo1 ul li:first-child { display: block; }
#demo1 ul li a { display: block; width: 100%; height: 200px; }
#demo1 ul li a img { width: 100%; height: 200px; object-fit: cover; display: block; }
#demo1 .slideBar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 10; }
#demo1 .slideBar a { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px; background: rgba(255,255,255,0.8); cursor: pointer; }
#demo1 .slideBar a.active { background: #ff6600; }
#demo1 .slidePrev, #demo1 .slideNext { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 60px; background: rgba(0,0,0,0.3); z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#demo1 .slidePrev { left: 10px; }
#demo1 .slideNext { right: 10px; }
#demo1 .slidePrev span, #demo1 .slideNext span { width: 12px; height: 12px; border: 2px solid #fff; display: block; }
#demo1 .slidePrev span { border-right: none; border-top: none; transform: rotate(45deg); margin-left: 5px; }
#demo1 .slideNext span { border-left: none; border-bottom: none; transform: rotate(45deg); margin-right: 5px; }

/* 热门领域 hot 标签定位（主站同款） */
.allClassify .position-r { position: relative; }
.allClassify .hotIcon02 {
    position: absolute;
    top: -6px;
    left: 50px;
}

/*
 * 分类链接垂直对齐：shop.css 里 li 高 46px + line-height 46px，但 a 又有 padding:15px，
 * 总高度超过一行，文字会落在底部。改为左右留白 + 行高撑满一行（与主站视觉一致）。
 */
.allClassify .classifyHis_box > li > a {
    display: inline-block;
    padding: 0 20px;
    line-height: 46px;
    height: 46px;
    box-sizing: border-box;
    vertical-align: top;
}
.allClassify .title_oneText01 {
    padding: 0;
    line-height: 46px;
    height: 46px;
}

/* 排序区：链接与中间的 | 同一垂直中线 */
.allClassify .sortBtnAction > a {
    display: inline-block;
    padding: 0 20px;
    line-height: 46px;
    height: 46px;
    box-sizing: border-box;
    vertical-align: top;
}
.allClassify .sortBtnAction > span {
    display: inline-flex;
    align-items: center;
    height: 46px;
    line-height: 1;
    color: #555;
    font-size: 12px;
}

/* 推荐方案轮播按钮样式 */
#recommendSwiper {
    position: relative;
}
#recommendSwiper ~ .swiper-button-next:not(.arrowsNext),
#recommendSwiper ~ .swiper-button-prev:not(.arrowsPrev) {
    width: 40px;
    height: 80px;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
}
#recommendSwiper ~ .swiper-button-next:not(.arrowsNext):hover,
#recommendSwiper ~ .swiper-button-prev:not(.arrowsPrev):hover {
    background: rgba(0,0,0,0.4);
}
#recommendSwiper ~ .swiper-button-next:not(.arrowsNext)::after,
#recommendSwiper ~ .swiper-button-prev:not(.arrowsPrev)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
#recommendSwiper ~ .swiper-button-prev:not(.arrowsPrev)::after {
    transform: translate(-50%, -50%) rotate(-135deg);
    margin-left: -3px;
}
#recommendSwiper ~ .swiper-button-next:not(.arrowsNext)::after {
    transform: translate(-50%, -50%) rotate(45deg);
    margin-left: 3px;
}

/* 与主站一致的箭头（header.css 未引入 facs 时） */
#recommendSwiper ~ .swiper-button-prev.arrowsPrev,
#recommendSwiper ~ .swiper-button-next.arrowsNext {
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background-color: #050f23;
    border-radius: 3px;
    opacity: 0.8;
    text-align: center;
    cursor: pointer;
    background-image: none;
    z-index: 10;
}
#recommendSwiper ~ .swiper-button-prev.arrowsPrev {
    left: 0;
    top: 60%;
    opacity: 0.5;
}
#recommendSwiper ~ .swiper-button-next.arrowsNext {
    right: 0;
    top: 60%;
    opacity: 0.5;
}
#recommendSwiper ~ .arrowsPrev .line_1,
#recommendSwiper ~ .arrowsNext .line_1 {
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    height: 20px;
    width: 20px;
    border-radius: 3px;
    background-color: transparent;
    border: 2px solid #fff;
    border-color: #fff transparent transparent #fff;
    position: relative;
    top: 20px;
    left: 10px;
}
#recommendSwiper ~ .arrowsNext .line_1 {
    border-color: transparent #fff #fff transparent;
    left: 0;
}