/* ============================================
   /portal/assets/css/category_page.css
   PC 端类目页布局样式
============================================ */

/* ============================
   顶部 Banner（容器）
============================ */
.category-banner {
    width: 100%;
    height: 320px;
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 0px;    /* 这里填0，否则会叠加Banner 与圆点之间的距离 */ 
}

/* Banner 文案区域 */
.banner-content {
    position: absolute;
    z-index: 10;
    top: 40px;
    left: 50px;
}

.banner-title {
    font-size: 36px;
    font-weight: 600;
    color: #111;
}

.banner-desc {
    font-size: 18px;
    color: #444;
    margin-top: 10px;
}

/* ============================
   顶部 Banner（淡入淡出轮播）
============================ */
.banner-images {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.banner-images img {
    position: absolute;
    width: 100%;
    height: 100%;     /* ← 关键：自动适配容器高度 */
    object-fit: cover; /* ← 自动裁剪，不会撑破容器 */
    opacity: 0;
    transition: opacity 1s ease;
}

.banner-images img.active {
    opacity: 1;
}

/* 小圆点指示器（放在 Banner 下方） */
.banner-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;       /* 圆点与 Banner 的距离 */
    margin-bottom: 25px;    /* 圆点与推荐栏之间的距离 */
    position: relative;   /* ← 关键 */
    z-index: 9999;   /* ← 永远在最上层 */
	margin: 10px 0;   /* 仅用于圆点自身的上下呼吸感，不影响整体间距 */
}

/* 默认灰色圆点（亚马逊风格） */
.banner-dots span {
    width: 10px;
    height: 10px;
    background: #d5d5d5;    /* ← 默认灰色（可见） */
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, opacity 0.3s;
}

/* 激活时变成黑色 */
.banner-dots span.active {
    background: #333;       /* ← 激活黑色 */
}

/* ============================
   横向滑动推荐栏
============================ */
.category-slider {
    margin-top: 30px;   /* ← 这是推荐栏与上方元素之间的距离 */
    padding: 20px 0;
    background: #ffe4ec;
    border-radius: 12px;
}

.slider-title {
    font-size: 22px;
    font-weight: 550;
    padding-left: 20px;
    margin-bottom: 10px;
}

.slider-scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 10px 20px;
}

.slider-item {
    width: 225px;      /* ← 商品框宽度（你想要的直接数值） */
    height: 348px;     /* ← 商品框高度（你想要的直接数值） */
    background: #fff;
    border-radius: 10px;
    padding: 0;        /* ← 取消 padding，避免撑高 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
	flex-shrink: 0;   /* ← 关键：禁止被压缩 */
}

/* ← 商品图片 */
.slider-img {
    width: 225px;        /* 图片宽度 */
    height: 217px;       /* 图片高度 */
    object-fit: cover;
    border-radius: 8px;

    /* 图片与白色框的上下左右间距（四方向分开） */
    margin-top: 0px;     /* 上间距 */
    margin-right: 0px;   /* 右间距 */
    margin-bottom: 10px;  /* 下间距 */
    margin-left: 0px;    /* 左间距 */
}

/* ← 商品名称 */
.slider-name {
    margin-top: 8px;     /* ← 名称与图片的距离 */
    font-size: 14px;
    color: #333;
    padding: 0 10px;   /* ← 左右各 10px，让文字不贴边 */	
}

/* ← 商品价格 */
.slider-price {
    margin-top: 4px;     /* ← 价格与名称的距离 */
    font-size: 16px;
    font-weight: 600;
    color: #e60023;
    padding: 0 10px;   /* ← 左右各 10px，让价格不贴边 */	
}

/* 隐藏滚动条 */
.slider-scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;         /* 商品推荐栏内：商品框之间的间距 */
    padding: 10px 0;   /* ⭐ 左右改成 0，左右间距只由 .slider-inner 控制，只保留上下10px */
    scrollbar-width: none;
}
.slider-scroll::-webkit-scrollbar {
    display: none;
}

/* 外层包裹容器（用于定位箭头） */
.slider-wrapper {
    position: relative;
}

/* 左右箭头的通用样式 */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;   /* 左右滑动箭头圆圈大小控制 */
    height: 60px;  /* 左右滑动箭头圆圈大小控制 */
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    /*box-shadow: 0 2px 6px rgba(0,0,0,0.15);*/
	box-shadow: 0 4px 12px rgba(0,0,0,0.30);     /* 想更有层次感就改成这个 */
    cursor: pointer;
    font-size: 30px;   /* 圆圈内箭头大小 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* 左箭头（初始隐藏） */
.left-arrow {
    left: 5px;
    display: none;
}

/* 右箭头（初始显示） */
.right-arrow {
    right: 5px;
}

.slider-inner {
    padding: 0 20px;   /* ⭐ 左右各留 20px 空白 */
    overflow: hidden;  /* ⭐ 必须隐藏溢出 */
}

/* ============================================
   底部商品列表（网格）
  ============================================ */

.product-list-container {
    padding: 0 -10px !important;   /* 与 slider-inner 一致 */
    max-width: none !important;   /* 关键：取消 1400px 限制 */
    width: 100% !important;       /* 关键：让它和推荐栏一样宽 */
    margin: 0 !important;         /* 关键：不要居中收窄 */
}

.product-list-grid {
    margin-top: 30px !important;
    display: grid !important;

    /* ⭐ 固定卡片宽度（你可以改成 200 / 220 / 240 / 260）这个对不起上面左侧 */
    grid-template-columns: repeat(auto-fill, 225px) !important;
	
	/* 新写法：自适应列宽，按网格分配 */
    /*grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));*/

    /* ⭐ 控制列间距（你想要调小间距就改这里） */
    column-gap: 16px !important;

    /* ⭐ 控制行间距 */
    row-gap: 24px !important;

    justify-content: flex-start !important; /* ⭐ 左对齐 */
}

.product-card {
    width: 225px !important;           /* ⭐ 必须与 grid-template-columns 一致 */
	/*width: auto !important;     /* ⭐ 不锁死宽度 */
	height: 348px !important;         /* 商品框高度 */
    background: #fff !important;
    border-radius: 10px !important;
    padding: 0 !important;     /* ⭐原来是12px，现在去掉 padding */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important; /* ⭐ 防止 padding 撑爆宽度 */
}

/* 底部商品列表← 商品图片 */
.product-img {
    /*width: 220px !important;*/        /* ⭐ 固定图片宽度（与推荐栏一致），这个设置具体数值的方法 */
	width: 100% !important;           /* ⭐ 让图片自动填满卡片 */
    height: 217px !important;       /* ⭐ 固定图片高度（与推荐栏一致） */
    object-fit: cover !important;
    border-radius: 8px !important;
	
    /* 图片与白色框的上下左右间距（四方向分开） */	
    margin-top: 0 !important;       /* 上间距 */
    margin-right: 0 !important;     /* 右间距 */
    margin-bottom: 10px !important;    /* 下间距 */
    margin-left: 0 !important;       /* 左间距 */
}

/* 底部商品列表← 商品名称 */
.product-title {
    margin-top: 8px !important;     /* ← 名称与图片的距离 */
    font-size: 14px !important;
    color: #333 !important;
    padding: 0 10px !important;   /* ← 左右各 10px，让文字不贴边 */	
}

/* 底部商品列表← 商品价格 */
.product-price {
    margin-top: 4px !important;     /* ← 价格与名称的距离 */
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #e60023 !important;
    padding: 0 10px !important;   /* ← 左右各 10px，让价格不贴边 */	
}

.portal-content {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.portal-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.category-page {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================
   骨架屏样式（Skeleton Screen）
============================ */

.skeleton {
    background: #f2f2f2;
    border-radius: 8px;
    padding: 12px;
    animation: skeleton-loading 1.2s infinite linear;
}

.skeleton-img {
    width: 100%;
    height: 180px;
    background: #e0e0e0;
    border-radius: 8px;
}

.skeleton-text {
    height: 16px;
    background: #e0e0e0;
    margin-top: 10px;
    border-radius: 4px;
}

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

@keyframes skeleton-loading {
    0% {
        background-color: #f0f0f0;
    }
    50% {
        background-color: #e6e6e6;
    }
    100% {
        background-color: #f0f0f0;
    }
}

/* ============================
   底部按钮横向排列（亚马逊风格）
============================ */

/* 结果统计（共显示多少条结果） */
.result-info {
    width: 100%;
    text-align: center;     /* ⭐ 强制居中 */
    font-size: 14px;
    color: #666;

    margin-top: 30px;       /* ⭐ 可调：与商品列表的距离 */
    margin-bottom: 10px;    /* ⭐ 可调：与按钮行的距离 */

    display: block;         /* ⭐ 防止 flex 影响它 */
}

/* ⭐ 两个按钮的 整体容器布局  */
.bottom-btn-row {
    display: flex;
    justify-content: center;
    gap: 15px;    /* ⭐ 就是它控制两个按钮的间距 */
    margin: 20px 0 0px 0;      /* ⭐ 距离上-左-下-右的间距  */
}

/* 两个按钮的基础样式 */
.back-to-top-btn,
.load-more-btn {
    width: 100px;    /* 按钮的宽度 */
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

/* 返回顶部按钮（浅灰背景） */
.back-to-top-btn {
    background: #e6e6e6;
    color: #333;
    border: 1px solid #ccc;   /* 浅灰边框 */
}
.back-to-top-btn:hover {
    background: #dcdcdc;
}

/* 加载更多按钮（深色边框，保留原来风格） */
.load-more-btn {
    background: #fff;               /* 白底 */
    color: #333;
    border: 2px solid #333;         /* ⭐ 深色边框（你原来的风格） */
}
.load-more-btn:hover {
    background: #f3f3f3;
}

/* ============================
   类目路径提示（Breadcrumb）
   → 白色卡片风格（与商品框一致）
============================ */

.category-breadcrumb {
    display: inline-block;
    margin: 0 0 15px 0;         /* 与 Banner 的距离 */

    background: #fff;           /* ⭐ 白色背景（与商品卡片一致） */
    padding: 10px 16px;         /* 稍微大一点的内边距，更像标题块 */
    border-radius: 8px;         /* ⭐ 与商品卡片一致的圆角 */
    color: #333;                /* ⭐ 黑色文字（与页面一致） */
	
    border: 2px solid #333;        /* ⭐ 加载更多按钮同款深色边框 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);  /* ⭐ 商品卡片同款阴影 */
	
    font-size: 16px;            /* 比原来更清晰 */
    font-weight: 550;           /* 与“热门推荐”标题一致 */
}

.category-breadcrumb .crumb-prefix {
    margin-right: 6px;
    opacity: 0.9;
}

.category-breadcrumb .crumb-item {
    font-weight: 550;           /* 与标题一致 */
}

.category-breadcrumb .crumb-arrow {
    margin: 0 6px;
    opacity: 0.6;
}

/* ⭐ 手机端隐藏（App 架构） */
@media (max-width: 768px) {
    .category-breadcrumb {
        display: none;
    }
}