/* ============================================================
   闪得 相关产品 - Elementor 适配（满宽灰色背景带）
   句柄: shande-related-elementor（依赖 shande-detail=detail.css）

   源码里 .detail-related 是通栏灰底区块（背景/padding/内层 padding:0 50px
   全部来自 detail.css，保持不变）。在 Elementor 里被限制在区块内容宽度中，
   这里用标准 full-bleed 把灰底带拉回整屏宽度，内层布局仍由源码控制。
   ============================================================ */

/* 小部件及各层容器不裁剪，允许灰底带溢出到内容宽度之外 */
.elementor-widget-shande_related,
.elementor-widget-shande_related > .elementor-widget-container,
.elementor-widget-shande_related .shande-related {
  overflow: visible;
}

/* full-bleed：让灰底带铺满整个视口宽度（内层 padding:0 50px 由源码保留） */
.shande-related .detail-related {
  width: 100vw;
  margin-left: calc( 50% - 50vw );
  margin-right: calc( 50% - 50vw );
  margin-top: 0;
}

/* ============================================================
   相关产品复用「分类产品网格」卡片时的横排布局
   视频/音频/图标卡片本体样式沿用 shande-cat-products-adapter.css，
   这里只把它们从网格改成横向滚动条（与图片卡的 .detail-related__grid 一致）。
   ============================================================ */

/* 覆盖 .cat-grid 的 grid/flex 竖排，统一改为横向滚动 */
.shande-related--reuse .detail-related__grid.cat-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start; /* 顶端对齐：避免单卡在灰底带里被拉伸/垂直居中而错位 */
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.shande-related--reuse .detail-related__grid.cat-grid::-webkit-scrollbar {
  display: none;
}

/* 图标卡：固定宽度横排，保留原图标卡视觉 */
.shande-related.shande-templates .detail-related__grid > .templates-col {
  flex: 0 0 260px;
  width: 260px;
}

.shande-related--icon .detail-related__grid .icon-card {
  flex: 0 0 120px;
  width: 120px;
}
/* 图标卡预览方格：分类页是「白底上的浅灰方卡」，相关产品这条是浅灰底带，
   方格与底带同为 #f5f7fa 会糊在一起、看不出卡片边界。这里改白底 + 细描边，
   让每个图标在灰底带里成为清晰、对齐的方卡，观感与分类页一致。 */
.shande-related--icon .detail-related__grid .icon-card__preview {
  background: #fff;
  border: 1px solid #eef0f3;
}

/* 视频卡：固定宽度横排 */
.shande-related--video .detail-related__grid .cat-video-card {
  flex: 0 0 260px;
  width: 260px;
}

/* 音频卡：固定宽度横排；波形在窄卡里也能完整显示 */
.shande-related--audio .detail-related__grid .music-track-item {
  flex: 0 0 340px;
  width: 340px;
  margin-bottom: 0;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   peek 模式：一排可见 N 个（N 可小数）。卡片宽度按容器宽度换算，
   露出小数张（如 4.5 → 右侧露半张），提示还能左右滑动。
   列数由内联 --related-per-view 控制；选择器叠加 --peek 提高优先级压过上面固定宽。
   公式：卡宽 = (100% - (N-1)*间距) / N，间距取 --related-gap（默认 16px，与横排 gap 一致）。
   ------------------------------------------------------------ */
.shande-related--peek .detail-related__grid.cat-grid {
  --related-gap: 16px;
}
.shande-related--peek.shande-related--icon .detail-related__grid .icon-card,
.shande-related--peek.shande-related--video .detail-related__grid .cat-video-card,
.shande-related--peek.shande-related--audio .detail-related__grid .music-track-item {
  flex: 0 0 calc( ( 100% - ( var(--related-per-view, 4) - 1 ) * var(--related-gap, 16px) ) / var(--related-per-view, 4) );
  width: calc( ( 100% - ( var(--related-per-view, 4) - 1 ) * var(--related-gap, 16px) ) / var(--related-per-view, 4) );
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shande-related--icon .detail-related__grid .icon-card {
    flex-basis: 96px;
    width: 96px;
  }
  .shande-related--video .detail-related__grid .cat-video-card {
    flex-basis: 220px;
    width: 220px;
  }
  .shande-related--audio .detail-related__grid .music-track-item {
    flex-basis: 300px;
    width: 300px;
  }

  /* peek 模式移动端：给卡片兜底最小宽，避免一排挤太多导致过窄（超出仍可横滑） */
  .shande-related--peek.shande-related--icon .detail-related__grid .icon-card {
    min-width: 88px;
  }
  .shande-related--peek.shande-related--video .detail-related__grid .cat-video-card {
    min-width: 200px;
  }
  .shande-related--peek.shande-related--audio .detail-related__grid .music-track-item {
    min-width: 280px;
  }
}