/* =========================================================
   详情页 & 列表通用修复样式  v2025-10-14
   - 右侧热门推荐
   - 两栏骨架（左主内容 / 右推荐）
   - 左列网格（大图/信息/缩略图）
   - 中线保护（左列不越界）
   - “免费下载 + 垂直轮播”
   - info-box 统一 & 品牌/数据库左对齐
   - 按钮与大图底对齐
   - 列表卡片：4:3、无圆角、两行摘要、虚线分隔
   ========================================================= */
/* 整页灰底（左右留白都会变灰） */
html, body { background:#f6f7fb; }

/* 内容区保持白底，更有层次（可选） */
.container.pages{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 18px rgba(0,0,0,.04);
  padding:16px;
}
@media (min-width:992px){
  .container.pages{ padding:24px 28px 36px; }
}
/* ---- 右侧推荐区 ---- */
.aside-hot{ margin-top:16px }
.aside-hot .card{ border:1px solid #eef2f6; border-radius:12px; overflow:hidden; background:#fff }
.aside-hot .card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eef2f6; font-weight:600
}
.aside-hot .list-group{ margin:0; padding:0; list-style:none }
.aside-hot .list-group-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-top:1px solid #f2f5f9
}
.aside-hot .list-group-item a{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.aside-hot .list-group-item .text-muted{ white-space:nowrap; margin-left:12px }

/* ---- 两栏骨架：左主内容 / 右热门 ---- */
@media (min-width:992px){
  .layout-detail{ --gap:24px; align-items:stretch }
  .layout-detail .main-col{ padding-right:var(--gap); overflow:hidden }  /* 左列不越中线 */
  .layout-detail .aside-col{
    padding-left:28px; border-left:1px solid #e9eef5; display:flex;   /* 中线在右列 */
  }
}
@media (max-width:991.98px){
  .layout-detail .aside-col{ padding-left:0; border-left:0; margin-top:16px }
}

/* ---- 左列内部网格（≥992px）：第1行=大图/信息，第2行=缩略图/空 ---- */
@media (min-width:992px){
  .main-inner{
    display:grid;
    grid-template-columns:minmax(0,56%) minmax(0,44%);
    grid-template-rows:auto auto;
    grid-template-areas:
      "gallery meta"
      "thumbs  .";
    column-gap:var(--gap);
    row-gap:16px;
    align-items:stretch;
  }
}
@media (max-width:991.98px){ .main-inner{ display:block } }

/* 网格区域绑定 */
.view{ grid-area:gallery; position:relative }
.preview{ grid-area:thumbs }
.meta{
  grid-area:meta; display:flex; flex-direction:column; min-height:100%;
}

/* 大图高度 & 导航箭头 */
#gallery{ height:300px }
#gallery .swiper-wrapper, #gallery .swiper-slide{ height:100% }
#gallery .swiper-slide img{ width:100%; height:100%; object-fit:cover; border-radius:12px }

.view .arrow-left,.view .arrow-right{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; z-index:5; user-select:none;
}
.view .arrow-left{ left:10px } .view .arrow-right{ right:10px }

/* 主图悬停提示（读取 data-tip） */
@media (hover:hover) and (pointer:fine){
  #gallery .swiper-wrapper .swiper-slide{ position:relative; cursor:zoom-in }
  #gallery .swiper-wrapper .swiper-slide::after{
    content: attr(data-tip);
    position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
    padding:6px 10px; font-size:12px; line-height:1.2;
    color:#fff; background:rgba(0,0,0,.8);
    border-radius:6px; white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity .12s ease, transform .12s ease; z-index:6;
  }
  #gallery .swiper-wrapper .swiper-slide:hover::after{ opacity:1; transform:translateX(-50%) translateY(-2px) }
}

/* ---- Lightbox（可选） ---- */
.lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); z-index:1050;
}
.lightbox.show{ display:flex }
.lb-img{ max-width:92vw; max-height:92vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4) }
.lb-close,.lb-prev,.lb-next{
  position:absolute; color:#fff; text-decoration:none; font-size:28px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.lb-close{ top:20px; right:20px } .lb-prev{ left:20px; top:50%; transform:translateY(-50%) }
.lb-next{ right:20px; top:50%; transform:translateY(-50%) }

/* ---- 详情页文案 & 下载栏 ---- */

/* 标题放在网格外（大图上方），左对齐 */
.product-title-over{
  margin:0 0 8px; text-align:left; font-size:28px; font-weight:800; line-height:1.15; letter-spacing:.3px;
}

/* “免费下载”紧凑条 */
.freebar{
  display:flex; align-items:center; gap:10px;
  background:#f6f8fb; border-radius:8px;
  padding:6px 10px; margin:4px 0 12px; max-width:100%;
}
.freebar .left{
  font-size:20px; font-weight:700; line-height:1.05;
  color:#ff6a00; letter-spacing:.5px; white-space:nowrap;
}

/* 垂直轮播固定在该栏最右侧，不越中线 */
:root{ --ticker-rows:8; --ticker-row-h:22px; }
.v-ticker{
  margin-left:auto; width:min(220px,45%);
  height:var(--ticker-row-h); overflow:hidden; text-align:right;
}
.v-ticker ul{ list-style:none; margin:0; padding:0 }
.v-ticker li{ height:var(--ticker-row-h); line-height:var(--ticker-row-h); color:#9aa0a6; white-space:nowrap }
.v-ticker .roll{ animation:vroll linear infinite; animation-duration:calc(var(--ticker-rows) * 1.4s) }
@keyframes vroll{ 0%{transform:translateY(0)} 100%{transform:translateY(calc(var(--ticker-rows) * var(--ticker-row-h) * -1))} }

/* info-box 统一 & 品牌/数据库左对齐 */
.info-box{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto;
  row-gap:14px; font-size:16px; line-height:2; padding-bottom:14px; border-bottom:1px dashed #e5e7eb;
}
.info-box .tl, .info-box .bl{ text-align:left !important }
.info-box .tr, .info-box .br{ text-align:left !important }  /* 需求：系统品牌/数据库左对齐 */

/* 警示文案与按钮区 */
.detail-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:auto } /* 与大图底对齐 */
.detail-actions .btn{ border-radius:10px }
.detail-actions .btn.btn-danger{ font-size:18px; padding:10px 20px }

/* ---- 列表卡片（首页/列表页） ---- */

/* 卡片图：4:3 无圆角（覆盖 bootstrap .card-img-top） */
.card-img-150{ position:relative; overflow:hidden; aspect-ratio:4 / 3 }
.card-img-150 .img-link{ display:block; position:relative; height:100% }
.card-img-150 img,
.card .card-img-top{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:0 !important;
}
/* 悬停轻微放大 */
.card-img-150 img{ transition:transform .25s ease }
.card-img-150:hover img{ transform:scale(1.04) }

/* 覆盖层（放大镜） */
.card-img-150 .hover-search{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0); opacity:0; transition:opacity .2s ease, background .2s ease; pointer-events:none;
}
.card-img-150:hover .hover-search{ background:rgba(0,0,0,.35); opacity:1 }
.card-img-150 .hover-search .ring{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.95);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.18);
  transform:scale(.92); transition:transform .2s ease;
}
.card-img-150:hover .hover-search .ring{ transform:scale(1) }
.card-img-150 .hover-search .ring svg{ width:26px; height:26px; color:#222 }

/* 兼容不支持 aspect-ratio 的环境 */
@supports not (aspect-ratio:1 / 1){
  .card-img-150::before{ content:""; display:block; padding-top:75% } /* 4:3 */
  .card-img-150 > .img-link{ position:absolute; inset:0 }
  .card-img-150 img{ position:absolute; inset:0; height:100% }
}

/* 两行摘要 + 徽章 + 虚线分隔统计 */
.clamp-2{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; line-height:1.6; min-height:calc(1.6em * 2);
}
.card-tags{ margin-top:2px; display:flex; gap:6px; flex-wrap:wrap }
.card-tags .badge{ font-size:12px }
.card-meta{ border-top:1px dashed #e2e8f0; padding-top:8px; margin-top:8px }
/* ——绝对关闭右栏吸顶（列表页/详情页通杀）—— */
@media (min-width:992px){
  /* 右栏容器与内部所有元素，都不允许 sticky/fixed */
  .aside-col,
  .aside-hot,
  .aside-col *, 
  .aside-hot *{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* 顺手把常见的吸顶类干掉 */
  .sticky-top{ position: static !important; top:auto !important; }
}