/* ============================================
   /portal/assets/css/home_page.css
   PC 端首页布局样式（彻底隔离版）（升级版）
============================================ */
/* ============================
   首页顶部广告图轮播
   相关CSS抽离为banner.css了
============================ */

/* ============================
   首页推荐栏（横向滑动）
============================ */
.home-slider {
    margin-top: 30px;
    padding: 20px 0;   /* ⭐ 推荐栏顶部+底部留白：间距 */
    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;
    color: var(--slider-title-color, #111); /* 默认深灰色，可后台配置 */
}

/* 查看更多按钮样式（无论是 <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;
    align-items: center;   /* 图片和文字垂直居中 */
    gap: 16px;
    overflow-x: auto;
    padding: 10px 20px;   /* 上下，左右 ：推荐栏内--卡片容器顶部/底部间距空白 */
    scrollbar-width: none;
}

.slider-scroll::-webkit-scrollbar {
    display: none;
}

.slider-item {
    width: 245px;
    height: 360px;
    background: #fff;
    border-radius: 10px;
    padding: 0;
    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;
    height: 217px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* 广告图铺满整个框 */
.ad-img {
    height: 360px;
    margin-bottom: 0;
    border-radius: 10px;
}

/* 视频广告样式 */
.slider-video {
    width: 245px;       /* 和商品卡片宽度一致 */
    height: 360px;      /* 和广告图高度一致 */
    border-radius: 10px;
    object-fit: contain;  /* 保持原始比例，不拉伸 */
    background: #000;     /* 视频未加载时显示黑底 */
}

/* 商品名称 */
.slider-name {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    padding: 0 10px;
}

/* 商品价格 */
.slider-price {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #e60023;
    padding: 0 10px;
}

/* 电脑端：商品文字区域容器，撑满卡片并靠左 */
.slider-text-wrapper {
    width: 100%;                 /* 撑满 slider-item 宽度 */
    display: flex;               /* 让内部文字用 flex 布局 */
    flex-direction: column;
    align-items: flex-start;     /* 文字块整体靠左 */
}

/* 电脑端：商品文字本身的缩进与对齐 */
.slider-name,
.slider-price {
    width: 100%;                 /* 让文字块占满一行 */
    text-align: left;            /* 文本靠左 */
    padding: 0 10px;             /* 左右各 10px 间距 */
    box-sizing: border-box;
}

/* 推荐栏正文描述浮层 */
.slider-description-overlay {
    flex: 1;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.6;
    background: transparent;
    padding: 0 10px;    /* 推荐栏正文描述浮层 */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ==================================================
   首页推荐栏内正文内容行数显示限制 ：
 ================================================== */
/* =========================
   电脑端逻辑（宽度 ≥769px）
 ========================= */
/* ===============================
@media (min-width:769px){
  .slider-description-overlay {
    display: -webkit-box;           
    -webkit-box-orient: vertical;   
    -webkit-line-clamp: 12;         
    overflow: hidden;               
    text-overflow: ellipsis;        
    word-break: break-word;         
  }
}  这个写法会让推荐栏内不管是
否有列表卡片，文字内容都12行省略，
我换成了区分版，下面的写法。
 =============================== */
 
/* 推荐栏内有卡片时：正文最多显示 12 行 */
@media (min-width:769px){
  .home-slider:has(.slider-item) .slider-description-overlay {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;   /* 限制最多显示 12 行 */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
}

/* 推荐栏内只有正文时：正文完整显示，不省略 */
@media (min-width:769px){
  .home-slider:not(:has(.slider-item)) .slider-description-overlay {
    display: block;           /* 恢复正常块级显示 */
    -webkit-line-clamp: unset;/* 取消行数限制 */
    overflow: visible;        /* 不隐藏超出内容 */
    text-overflow: unset;     /* 不显示省略号 */
  }
}   /* ----结束---- */


/* 外层包裹容器（用于定位箭头） */
.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 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: 1px;
}

.slider-inner {
    padding: 0 5px;
    overflow: hidden;
}

/* ============================
   底部按钮（仅返回顶部）
============================ */
.bottom-btn-row {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.back-to-top-btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #e6e6e6;
    color: #333;
    border-radius: 8px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 15px;
}
.back-to-top-btn:hover {
    background: #dcdcdc;
}


/* ------------------电脑端：推荐栏内没有卡片时（纯正文模式），收紧上下间距--------------- */
.home-slider:not(:has(.slider-item)) {
    padding-top: 10px !important;      /* 去掉推荐栏外层的 20px 顶部空白 */
    padding-bottom: 10px !important;   /* 去掉推荐栏外层的 20px 底部空白 */
}

.home-slider:not(:has(.slider-item)) .slider-scroll {
    padding-top: 0 !important;      /* 去掉卡片容器默认的 10px 顶部空白 */
    padding-bottom: 0 !important;   /* 去掉卡片容器默认的 10px 底部空白 */
}    /* ---结束--- */


/* ============================
   页面容器
============================ */
.home-page {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =======================================================
   电脑端---- 视频封面样式（后台可上传封面）
  ======================================================= */
.slider-cover {
    width: 245px;
    height: 360px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
}

/* ========================================
   Banner 隐藏时的间距修正（放在末尾）
======================================== */
.home-page:not(:has(.home-banner)) .home-slider {
    margin-top: -20px; /* 或者 0，根据视觉效果调整 */
}


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

/* =======================================================
   手机端的覆盖规则：Banner容器与屏幕左右间距
  ======================================================= */
  
@media (max-width: 768px) {
  /* 顶层容器彻底清零 */
  html, body, .portal-root, .portal-container, .home-page, .category-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 推荐栏外层容器清零（只清左右，保留上下间距） */
  .home-slider,
  .category-slider {
    margin-left: 0 !important;   /* 清零左右 */
    margin-right: 0 !important;
    padding-left: 0 !important;  /* 清零左右 */
    padding-right: 0 !important;
    border-radius: 0 !important;
  }

  /* 推荐栏内部容器清零（只清左右，保留上下间距） */
  .slider-inner,
  .slider-scroll {
    margin-left: 0 !important;   /* 清零左右 */
    margin-right: 0 !important;
    padding-left: 0 !important;  /* 清零左右 */
    padding-right: 0 !important;
    gap: 0 !important;           /* 去掉卡片之间的 gap */
  }

  /* iOS 安全区覆盖 */
  .home-page,
  .category-page {
    padding-left: env(safe-area-inset-left, 0) !important;  /* iOS 左侧安全区 */
    padding-right: env(safe-area-inset-right, 0) !important;/* iOS 右侧安全区 */
  }
}

@media (max-width: 768px) {
  .portal-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width:768px){
  .slider-scroll {
    display: flex;
    flex-wrap: wrap;        /* ⭐ 允许换行 */
    gap: 8px !important;    /* ⭐ 卡片之间的间距 */
    overflow-x: hidden !important; /* ⭐ 不再横向滚动 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 隐藏左右箭头 */
@media (max-width:768px){
  .slider-arrow { display:none !important; }
}

/* -----让 Banner 真正贴死右侧，可以尝试以下覆盖----- */
@media (max-width:768px){
  html, body, .portal-root, .portal-container, .portal-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;       /* 用视口宽度撑满 */
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .home-page .home-banner img,
  .category-page .home-banner img {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block !important;
  }
}

@media (max-width:768px){
   /* Banner 外层容器：与手机屏幕两侧间距 + 高度 */
  .home-page .home-banner,
  .category-page .home-banner {
    width: calc(100vw - 16px) !important;   /* 容器宽度比视口少 16px */
    margin: 0 8px !important;               /* 左右各留 8px 间距 */
    height: 160px !important;               /* 手机端固定高度 */
    border-radius: 12px !important;         /* 圆角 */
    overflow: hidden !important;
    box-sizing: border-box !important;         /* 保证宽度计算包含 padding */
  }

  /* 轮播层必须同步宽高 */
  .banner-images {
    width: 100% !important;   /* 跟随外层容器 */
    height: 100% !important;  /* 跟随外层容器 */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 图片 */
  .home-page .home-banner img,
  .category-page .home-banner img,
  .banner-images img {
    width: 100% !important;               /* 图片撑满容器 */
    height: 100% !important;
    object-fit: cover !important;   /* 自动裁剪填满容器 */
    border-radius: 12px !important;       /* 图片也跟随容器圆角 */
    display: block !important;
  }
}

/* =======================================================
   手机端：推荐栏上下间距修复
   ======================================================= */
@media (max-width:768px){
  .home-slider,
  .category-slider {
    margin-top: 20px !important;   /* 设置推荐栏之间的上间距 */
    margin-bottom: 20px !important;/* 设置推荐栏之间的下间距 */
    margin-left: 0 !important;     /* 清零左右 */
    margin-right: 0 !important;
    padding-left: 0 !important;    /* 清零左右 */
    padding-right: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =======================================================
   手机端的覆盖规则：避免Banner位置被导航栏推开太大间距
  ======================================================= */

@media (max-width: 768px) {
  /* 有 Banner 时，推荐栏紧贴 Banner */
  .home-page:has(.home-banner) .home-slider {
    margin-top: 0 !important; /* 推荐栏紧贴 Banner */
  }

  /* 没有 Banner 时，推荐栏往上补齐 */
  .home-page:not(:has(.home-banner)) .home-slider {
    margin-top: -50px !important; /* 数值等于第二层导航高度 */
  }

  /* 首页整体 padding-top 只留第一层导航高度 */
  body.home-page {
    padding-top: var(--portal-nav-height) !important; /* 保留第一层导航高度 */
  }
}

@media (max-width: 768px) {
  .home-page .home-banner {
    margin-top: -50px !important; /* Banner 紧贴导航栏，数值等于第二层导航高度 */
  }
}

/* 手机端：首页Banner图与导航栏间距调整---结束----------- */

/* =======================================================
   手机端：Banner 标题与副标题字体缩放
   ======================================================= */
@media (max-width:768px){
  /* 标题区域宽度：放宽到 70% */
  .banner-content {
    max-width: 35% !important;   /* 手机端标题区域最多占 Banner 宽度的 80% */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
     
  /* 主标题缩放 */
  .banner-title {
    font-size: 3.8vw !important;   /* 主标题随屏幕宽度缩放----vw 是视口宽度单位，1vw = 视口宽度的 1%。 */
    line-height: 1.3 !important;   /* 控制文字行距，避免文字太挤或太松。数值越小，行距越紧凑 */
  }

   /* 副标题缩放 */
  .banner-desc {
    font-size: 2.8vw !important; /* 副标题随屏幕宽度缩放 */
    line-height: 1.4 !important;
  }
	
  /* 标题位置调整：靠近左上角，缩小偏移 */
  /* ⭐⭐ 标题位置真正靠左上角 */
  .banner-box .banner-content {
    position: absolute !important;   /* 必须覆盖 PC 端的定位 */
    top: 8px !important;             /* 贴顶部 */
    left: 8px !important;            /* 贴左侧 */
    padding: 6px 8px !important;     /* 给文字一点安全距离 */
  }
}

@media (max-width:768px){
  .banner-title {
    margin-bottom: 4px !important;   /* 主标题与副标题之间更紧凑 */
  }

  .banner-desc {
    margin-top: 0px !important;      /* 副标题不再往下推 */
  }
}

/* =======================================================
   手机端统一视觉规范：Banner + 推荐栏
   ======================================================= */
@media (max-width:768px){

  /* ====== 统一左右间距 ====== */
  .home-page .home-banner,
  .category-page .home-banner,
  .home-slider,
  .category-slider {
    width: calc(100vw - 16px) !important;   /* 左右各 8px */
    margin-left: 8px !important;
    margin-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* ====== 统一圆角 ====== */
  .home-page .home-banner,
  .category-page .home-banner,
  .banner-images,
  .banner-images img,
  .home-slider,
  .category-slider,
  .slider-item,
  .slider-img,
  .ad-img,
  .slider-video {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* ====== Banner 高度 ====== */
  .home-page .home-banner,
  .category-page .home-banner {
    height: 160px !important;
  }

  .banner-images {
    height: 160px !important;
  }

  .banner-images img {
    height: 160px !important;
    object-fit: cover !important;
  }

  /* ====== Banner 标题区域 ====== */
  .banner-content {
    max-width: 70% !important;   /* 手机端标题区域更宽 */
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    padding: 4px 6px !important;
  }

  .banner-title {
    font-size: 3.8vw !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  .banner-desc {
    font-size: 2.8vw !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
  }

  /* ====== 推荐栏内部卡片 ====== */
  .slider-scroll {
    gap: 8px !important; /* 卡片之间的间距统一 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 隐藏左右箭头 */
  .slider-arrow {
    display: none !important;
  }
}


@media (max-width:768px){

  /* ----广告图：也铺满整个卡片容器------- */

  /* 广告图卡片容器 */
  .slider-item.ad-item {
    position: relative;
    overflow: hidden;
    height: 220px !important;
    width: calc((100vw - 16px - 8px) / 2) !important;
  }

  /* 广告图专属样式：强制覆盖 slider-img 的 height:auto */
  .slider-item.ad-item .ad-img {
    width: 100% !important;
    height: 100% !important;   /* ⭐ 跟随容器高度 */
    object-fit: cover !important;
    display: block !important;
  }

}

/* =======================================================
   手机端 推荐栏 ：商品列表样式（上图片和商品名称PHP文件分区后）
  ======================================================= */
@media (max-width:768px){

  /* 商品卡片容器 */
  .slider-item {
    width: calc((100vw - 16px - 8px)/2) !important;
    height: 220px !important;
    display: flex;
    flex-direction: column; /* 上下分区 */
    overflow: hidden;
    border-radius: 12px;
  }

  /* 图片区域 */
  .slider-img-wrapper {
    flex: 0 0 215px; /* 固定高度 160px */
    width: 100%;
    overflow: hidden;
  }

  .slider-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 文字区域 */
  .slider-text-wrapper {
    flex: 1;
    padding: 6px 3px 0;      /* ⭐ （上，左右，下）顶部只留 6px，几乎贴着图片 */
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
	justify-content: flex-start;  /* ⭐ 从顶部开始排，不居中 */
  }

  .slider-name {
    font-size: 14px;
    margin: 0;
  }

  .slider-price {
    font-size: 16px;
    font-weight: 600;
    color: #e60023;
    margin: 2px 0 0;     /* 价格和标题之间留 4px */
  }
}   /* 结束 */


/* 手机端视频封面：完全复刻电脑端逻辑（不变形、不裁剪、自动加黑边） */
@media (max-width:768px){
/* =======================================================
  .slider-item {
    width: calc(50vw - 16px) !important;
    height: 220px !important;          
    padding: 0 !important;
  }

  .slider-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;      
    background: #000;
  }这样写会让视频封面铺满卡片容器，视频尺寸和容器尺寸不匹配，
  导致封面拉伸变形，所以改成下面写法，黑边填充视频里边外的区域，
======================================================= */
  /* 固定卡片容器尺寸（和电脑端一样是固定尺寸） */
  .slider-item {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    height: 345px !important;     /* 手机端卡片固定高度 */
    /*width: calc(50vw - 16px) !important;   （改成下面这个，解决卡片与推荐栏两侧间隙不对称） */
	width: calc((100vw - 16px - 8px) / 2) !important;      /* ⭐ 两个卡片平均分配容器宽度（如果像推荐栏内卡片与推荐栏两侧有间距，改成下面这个） */	
	/*width: calc((100vw - 16px - 8px - 16px) / 2) !important; */
/* 解释：
   100vw - 16px → 推荐栏容器宽度
   - 8px → 卡片之间的 gap
   - 16px → 左右各预留 8px 间距
   / 2 → 两个卡片平均分配
*/
  }

  /* 视频保持原始比例，不变形、不裁剪、自动加黑边 */
  .slider-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* ⭐ 和电脑端一样 */
    background: #000 !important;      /* ⭐ 自动加黑边 */
  }

  /* 全屏时保持原始比例（避免安卓裁剪字幕） */
  .slider-video:fullscreen {
    object-fit: contain !important;
  }
}

  /* 手机端 ---- 推荐栏正文内容单独一行 */
@media (max-width:768px){
  .slider-description-overlay {
    width: 100% !important;        /* ⭐ 单独占一整排 */
    flex-basis: 100% !important;   /* ⭐ 强制换行 */
    margin-top: 12px !important;   /* ⭐ 与上方卡片留间距 */
    padding: 0 20px !important;     /* ⭐ 左右留一点安全距离 */
    font-size: 14px !important;    /* ⭐ 手机端字体更协调 */
    line-height: 1.6 !important;
  }
}

/* =======================================================
   手机端---- 视频封面样式（后台可上传封面）
  ======================================================= */
@media (max-width:768px){
  .slider-cover {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
}  /* ---结束--- */

@media (max-width:768px){
  .slider-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =======================================================
 手机端：推荐栏正文上下间距收紧（这段覆盖前面其他）
 ======================================================= */
@media (max-width:768px){

  /* 推荐栏外层容器（粉色背景那一层）
     默认 PC 端有 padding: 20px 0；
     如果不清零，纯文字时上下会多出 20px 空白 */
  .home-slider,
  .category-slider {
    padding-top: 4px !important;      /* 去掉推荐栏顶部空白 */
    padding-bottom: 8px !important;   /* 去掉推荐栏底部空白，如果不贴死可以留一点距离 */
  }

  /* 推荐栏内部内容容器（卡片 + 正文所在的容器）
     默认 PC 端有 padding: 10px 20px；
     手机端只清左右，没有清上下 → 会保留 10px 上下空白 */
  .slider-scroll {
    padding-top: 0 !important;      /* 去掉内部内容顶部空白 */
    padding-bottom: 8px !important;   /* 去掉内部内容底部空白，如果不贴死可以留一点距离 */
  }

  /* 正文内容自身的间距
     默认手机端 margin-top: 12px；
     纯文字时会被往下推 12px，看起来离顶部很远 */
  .slider-description-overlay {
    margin-top: 0 !important;       /* 去掉正文顶部的额外 12px 间距 */
    margin-bottom: 0 !important;    /* 去掉正文底部的额外间距 */
    /* 如果你想让文字不要太贴边，可以改成 4px 或 6px */
  }
}

/* 手机端：推荐栏正文文字最多显示 5 行，超出省略 */
@media (max-width:768px){
  .slider-description-overlay {
    display: -webkit-box;           /* ⭐ 必须：让文字在盒子里按行排列 */
    -webkit-box-orient: vertical;   /* ⭐ 垂直方向排列 */
    -webkit-line-clamp: 5;          /* ⭐ 限制最多显示 4 行 */
    overflow: hidden;               /* ⭐ 超出部分隐藏 */
    text-overflow: ellipsis;        /* ⭐ 超出部分显示省略号 */
    word-break: break-word;         /* ⭐ 保证长词也能换行 */
  }
}