/*
 * 顶部导航 + 首页轮播（对应镜像站 header.ejs 里的行内 <style>）
 *
 * 【重要】本文件里的轮播规则一律加 `.banner` 前缀。
 *
 * `.swiper-container` 是 Swiper 的通用类名，产品详情页的图片画廊
 * （`.swiper-container.gallery-top` / `.swiper-container.gallery-thumbs`）
 * 也在用。而 `common.css`（镜像站原样式）给它们定的是**百分比高度**：
 *
 *     .gallery-top   { height: 80% }   /  .gallery-thumbs { height: 20% }
 *
 * 本文件在 `nuxt.config.ts` 里排在 `common.css` **之后**，两条规则特异性相同
 * （都是 0,1,0），所以这里一条不带前缀的 `.swiper-container{height:auto}`
 * 会把画廊的百分比高度覆盖成 auto —— 画廊内是空 div + background-image，
 * auto 高度就算出 0，产品图整块不显示（实测 400x0）。
 *
 * 收进 `.banner` 后：画廊恢复 400x320 / 400x80，首页轮播逐项不变。
 */

.banner .swiper-container {
    width: 100%;
    height: auto;
}
.banner .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
/* Custom pagination dots styling to look premium */
.banner .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.5;
    width: 10px;
    height: 10px;
    transition: all 0.3s ease;
}
.banner .swiper-pagination-bullet-active {
    opacity: 1;
    background: #00ccff;
    width: 24px;
    border-radius: 5px;
}
/* Custom navigation arrows styling */
.banner .swiper-button-prev, .banner .swiper-button-next {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.banner .swiper-button-prev:after, .banner .swiper-button-next:after {
    font-size: 18px;
    font-weight: bold;
}
.banner .swiper-button-prev:hover, .banner .swiper-button-next:hover {
    background: rgba(0, 204, 255, 0.8);
}

/*
 * 导航面板子列表的滚动容器 —— 与轮播无关，保持全局。
 * 收进 .banner 会让导航面板的溢出滚动失效。
 */
#list-content { height: auto !important; max-height: 400px; overflow-y: auto; }