/* ============================================
   /portal/assets/css/category_page.css
   PC 端类目页布局样式
============================================ */
/* ============================
   顶部广告图轮播
   相关CSS抽离为banner.css了
============================ */
/* ============================
   横向滑动推荐栏
============================ */
.category-slider {
    margin-top: 30px;   /* ← 这是推荐栏与上方元素之间的距离 */
    padding: 20px 0;
    /*background: #ffe4ec; 改成下面变量版*/
	background: var(--slider-bg-color, #ffe4ec); /* 默认粉色 */
    border-radius: 12px;
	position: relative;   /* ⭐ 新增 */
}

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

/* 查看更多按钮样式 */
/* 查看更多按钮样式（无论是 <a> 还是 <span> 都统一风格） */
.more-link {
    font-size: 14px;
    margin-left: 10px;
    color: inherit;   /* ← 改成继承父元素颜色 */
    text-decoration: underline; /* 默认有下划线 */
    cursor: pointer;            /* 即使是 span 也显示手型光标 */
    transition: color 0.2s;
}
.more-link:hover {
    text-decoration: underline; /* 悬停时保持下划线 */
}

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

.slider-item {
    width: 245px;      /* ← 商品框宽度（改成和首页home_page.css一样的数值，因为生效的是首页这个CSS） */
    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: 245px;        /* 图片宽度（改成和首页home_page.css一样的数值，因为生效的是首页这个CSS） */
    height: 217px;       /* 图片高度 */
    object-fit: cover;
    border-radius: 8px;

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

/* 广告图铺满整个框（第一个格子） */
.ad-img {
    height: 348px;      /* 和 slider-item 一样高 */
    margin-bottom: 0;   /* 去掉底部间距 */
    border-radius: 10px;
}

/* 视频广告样式 */
.slider-video {
    width: 245px;       /* 和商品卡片宽度一致 */
    height: 348px;      /* 和广告图高度一致 */
    border-radius: 10px;
	/*object-fit: cover;      /* 改成下面这段，配合category_page.js添加的监听，实现视频等比例播放*/
    object-fit: contain;  /* 保持原始比例，不拉伸 */
    background: #000;     /* 视频未加载时显示黑底 */
}

/* ← 商品名称 */
.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-description-overlay {
    flex: 1;                  /* 文字自动占据剩余空间，跟随最后一张图片右侧（作为 .slider-scroll 的一个 Flex 子项） */
    /*max-width: 750px;         /* 控制文字区域的最大宽度 （可以和下面100%这两种根据需求切换）*/
	max-width: 100%;          /* 最大宽度等于推荐栏宽度，这是考虑推荐栏只有文字的情况 */
    font-size: 18px;         /* 设置文字大小为 16px */
    line-height: 1.6;        /* 设置行高为 1.6 倍，增加文字的行间距，让段落更舒适 */
    /*color: var(--slider-text-color, #111);           /* 使用推荐栏标题颜色变量，如果没有定义则默认黑色 (#111)不在用这个，改为后台单独设置颜色 */
    background: transparent;  /* 保持透明背景，融入推荐栏 */
    padding: 0 10px;          /* 给文字左右留点空隙，避免文字贴边 */
    word-wrap: break-word;    /* 当单词过长时自动换行，避免溢出容器 */
    overflow-wrap: break-word;    /* 同上，兼容不同浏览器，确保长词或长链接自动换行 */	
}

/* 隐藏滚动条 + Flex布局 */
.slider-scroll {
    display: flex;
    align-items: center;      /* 垂直居中对齐，保证文字和图片在同一水平线 ，会让文字在竖向居中*/
	/*align-items: flex-start;   /* 顶部对齐，文字第一行和图片上边框对齐 */
    gap: 16px;             /* 图片和文字之间的间距 */
    overflow-x: auto;
    padding: 10px 0;       /* 上下间距，左右由 .slider-inner 控制 */
    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 6px !important;   /* （上下，左右原20）与 slider-inner 一致 */
    max-width: none !important;   /* 关键：取消 1400px 限制 */
    width: 100% !important;       /* 关键：让它和推荐栏一样宽 */
    margin: 0 !important;         /* 关键：不要居中收窄 */
}

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

    /* ⭐ 固定卡片宽度（原245px，和推荐栏卡片一样宽）这个对不起上面左侧 */
    grid-template-columns: repeat(auto-fill, 226px) !important;
	
	/* 新写法：自适应列宽，按网格分配 */
    /*grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));*/

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

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

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

.product-card {
    width: 226px !important;           /* ⭐ 必须与 grid-template-columns 一致 ，原245px，和推荐栏卡片一样宽*/
	/*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: 245px !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;
}

/* Banner图上方页面标题与导航栏间距调整（放末尾，覆盖前面规则） */
.category-page .category-breadcrumb {
    margin-top: -20px;   /* 往上拉近，数值可调 */
}

/* 当 Banner 不显示时，标题和推荐栏之间的间距缩小 */
.category-page:not(:has(.home-banner)) .category-breadcrumb {
    margin-bottom: -10px; /* 或者 5px，根据视觉效果调整 */
}

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


/* ------------------------------分割线（下面是手机端样式）------------------------------------- */