/* 版权所有 © 八艾云 (www.8a.hk) 保留所有权利 */
/* ============================================================
   site.css — 成品网站列表页 (/site)
   Hero、按钮、容器全部复用 product.css 的 .byc-phero 组件,
   这里只写"分类侧栏 + 模板网格 + 分页"三块本页独有的结构。
   详情页 /site/info 同样只加载本文件 (旧的 site_v2026.css 已无页面使用)。
   ============================================================ */

.site-main { padding: var(--byc-sec-y, 48px) 0 calc(var(--byc-sec-y, 48px) + 8px); }
@media (min-width: 1024px) {
  .site-main { padding: var(--byc-sec-y-desktop, 64px) 0 calc(var(--byc-sec-y-desktop, 64px) + 8px); }
}

.site-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---------- 行业分类 ---------- */
.site-side {
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
  box-shadow: var(--byc-sd-sm);
  overflow: hidden;
}
/* 标题条给一点底色, 与下面的列表分层; 不用实心蓝块那种重量 */
.site-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--byc-border);
  background: linear-gradient(180deg, var(--byc-primary-50) 0%, #fff 100%);
  color: var(--byc-text);
  font-size: 14px;
  font-weight: 700;
}
.site-side-head::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--byc-primary);
}
.site-side-reset { margin-left: auto; color: var(--byc-text-mut); font-size: 12px; font-weight: 400; }
.site-side-reset:hover { color: var(--byc-primary); }

.site-cats { padding: 6px; list-style: none; margin: 0; }
.site-cats a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 10px 13px;
  border-radius: var(--byc-r-md);
  color: var(--byc-text-sec);
  font-size: 13.5px;
  line-height: 1.5;
  transition: background-color .18s, color .18s, padding-left .18s;
}
/* 选中项左侧立一条色条, 一眼看出当前在哪个行业 */
.site-cats a::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--byc-primary);
  transform: translateY(-50%);
  transition: height .18s;
}
.site-cats a:hover { background: var(--byc-bg-light); color: var(--byc-text); padding-left: 14px; }
.site-cats a.is-on { background: var(--byc-primary-50); color: var(--byc-primary); font-weight: 700; }
.site-cats a.is-on::before { height: 16px; }

/* 条数做成灰底小胶囊, 与分类名拉开层级 */
.site-cats a b {
  flex: none;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: var(--byc-r-full);
  background: var(--byc-bg-light);
  color: var(--byc-text-mut);
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  transition: background-color .18s, color .18s;
}
.site-cats a:hover b { background: #fff; }
.site-cats a.is-on b { background: var(--byc-primary); color: #fff; font-weight: 700; }

/* ---------- 工具条 ---------- */
.site-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--byc-border);
}
.site-count { margin: 0; color: var(--byc-text); font-size: 14px; font-weight: 700; }
.site-count i { margin: 0 2px; color: var(--byc-border-strong); font-style: normal; }
.site-count b { color: var(--byc-primary); }
.site-pageat { margin: 0; color: var(--byc-text-mut); font-size: 12px; }

/* ---------- 模板网格 ---------- */
.site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.site-card {
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.site-card:hover { border-color: var(--byc-primary-100); box-shadow: var(--byc-sd-md); transform: translateY(-2px); }

/* 缩略图统一 4:3, 避免不同尺寸的截图把网格撑得参差 */
.site-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--byc-bg-light);
  overflow: hidden;
}
.site-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* 没有截图的模板给一个占位, 不要留一块纯白 */
.site-card-noimg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--byc-border-strong);
}
.site-card-noimg svg { width: 40px; height: 40px; }

.site-card-mask {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 31, 54, .48);
  opacity: 0;
  transition: opacity .2s;
}
.site-card-thumb:hover .site-card-mask,
.site-card-thumb:focus-visible .site-card-mask { opacity: 1; }
.site-card-view {
  padding: 8px 18px;
  border-radius: var(--byc-r-full);
  background: #fff;
  color: var(--byc-text);
  font-size: 13px;
  font-weight: 700;
}

.site-card-body { padding: 12px 14px; }
.site-card-name { margin: 0 0 6px; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.5; }
.site-card-name a {
  display: block;
  overflow: hidden;
  color: var(--byc-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-card-name a:hover { color: var(--byc-primary); }
.site-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.site-card-price { color: var(--byc-text-mut); font-size: 12px; }
.site-card-price b { color: var(--byc-accent); font-size: 17px; font-weight: 800; }
.site-card-price.is-none { color: var(--byc-text-mut); font-size: 12px; }
.site-card-no { flex: none; color: var(--byc-text-mut); font-size: 12px; }

/* ---------- 空状态 ---------- */
.site-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 56px 20px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
  text-align: center;
}
.site-empty svg { width: 40px; height: 40px; color: var(--byc-border-strong); }
.site-empty h3 { margin: 4px 0 0; color: var(--byc-text); font-size: 16px; font-weight: 700; }
.site-empty p { margin: 0 0 8px; color: var(--byc-text-sec); font-size: 13px; }

/* ---------- 分页 ---------- */
.site-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; }
.site-pg {
  min-width: 34px;
  padding: 7px 12px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md);
  background: #fff;
  color: var(--byc-text-sec);
  font-size: 13px;
  text-align: center;
  transition: border-color .18s, color .18s, background-color .18s;
}
.site-pg:hover { border-color: var(--byc-primary); color: var(--byc-primary); }
.site-pg.is-on { border-color: var(--byc-primary); background: var(--byc-primary); color: #fff; font-weight: 700; }
/* 已在首页/末页: 保留位置但不再是可用状态 */
.site-pg.is-off { color: var(--byc-text-mut); pointer-events: none; opacity: .55; }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .site-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .site-cats { max-height: 210px; overflow-y: auto; }   /* 窄屏才折叠, 免得列表把内容顶到一屏之外 */
  .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .site-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .site-toolbar { margin-bottom: 12px; }
}

/* ============================================================
   /site/info —— 模板详情
   详情页不用 Hero(见文件末尾的商品详情形制), 这里是列表页的卡片与筛选。
   ============================================================ */
/* ---------- 左：模板预览 ---------- */
/* ---------- 右：购买面板 ---------- */
.site-buy { display: flex; flex-direction: column; gap: 16px; }
.site-buy-card, .site-note-card {
  padding: 18px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
}
.site-buy-title { margin: 0 0 14px; color: var(--byc-text); font-size: 15px; font-weight: 700; }
.site-buy-none { margin: 0; color: var(--byc-text-mut); font-size: 13px; }

/* 单选圈 */
/* 已按会员身份核出的专属价 */
.site-pkg-price [data-package-price].is-quoted { color: var(--byc-accent); }

.site-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--byc-r-md);
  background: var(--byc-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s, opacity .18s;
}
.site-buy-btn:hover:not(:disabled) { background: var(--byc-primary-dark); }
.site-buy-btn:disabled { opacity: .55; cursor: not-allowed; }

.site-buy-status { margin: 10px 0 0; color: var(--byc-text-mut); font-size: 12px; line-height: 1.6; }
.site-buy-status.is-error { color: #C2410C; }
.site-buy-status.is-success { color: #047857; }

.site-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.site-steps li {
  position: relative;
  padding: 0 0 14px 30px;
  counter-increment: s;
}
.site-steps li:last-child { padding-bottom: 0; }
/* 序号圆点 + 连接线 */
.site-steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--byc-primary-50);
  color: var(--byc-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.site-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9.5px; top: 24px; bottom: 4px;
  width: 1px;
  background: var(--byc-border);
}
.site-steps b { display: block; color: var(--byc-text); font-size: 13px; font-weight: 700; }
.site-steps span { display: block; margin-top: 2px; color: var(--byc-text-mut); font-size: 12px; line-height: 1.6; }

@media (max-width: 1023px) {
}

/* ============================================================
   /site/buy —— 成品网站购买页
   骨架与右侧订单栏来自 host-buy.css 的 .byc-bw-* / .byc-host-*,
   这里只补模板卡与套餐选择两块本页独有的结构。
   ============================================================ */
.sb-tpl { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.sb-tpl-shot {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md);
  background: var(--byc-bg-light);
  overflow: hidden;
}
.sb-tpl-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.sb-tpl-copy { min-width: 0; }
.sb-tpl-copy b { display: block; overflow: hidden; color: var(--byc-text); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sb-tpl-copy span { display: block; margin-top: 4px; color: var(--byc-text-mut); font-size: 12px; }
.sb-tpl-change {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md);
  color: var(--byc-text-sec);
  font-size: 13px;
  white-space: nowrap;
}
.sb-tpl-change:hover { border-color: var(--byc-primary); color: var(--byc-primary); }

.sb-pkgs { display: flex; flex-direction: column; gap: 10px; }
.sb-pkg {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.sb-pkg:hover { border-color: var(--byc-primary-100); }
.sb-pkg.is-on { border-color: var(--byc-primary); background: var(--byc-primary-50); box-shadow: 0 0 0 1px var(--byc-primary) inset; }
.sb-pkg-tick {
  width: 16px; height: 16px;
  border: 1.5px solid var(--byc-border-strong);
  border-radius: 50%;
  transition: border-color .18s, border-width .18s;
}
.sb-pkg.is-on .sb-pkg-tick { border-color: var(--byc-primary); border-width: 5px; }
.sb-pkg-copy { min-width: 0; }
.sb-pkg-copy b { display: block; color: var(--byc-text); font-size: 14px; font-weight: 700; }
.sb-pkg-copy span { display: block; margin-top: 3px; color: var(--byc-text-mut); font-size: 12px; }
.sb-pkg-price { display: flex; flex: none; align-items: baseline; gap: 4px; color: var(--byc-accent); font-size: 18px; font-weight: 800; white-space: nowrap; }
.sb-pkg-price small { color: var(--byc-text-mut); font-size: 11px; font-weight: 400; }

/* 订单栏状态行: 复用详情页的三态配色 */
.byc-host-order-note.is-error { color: #C2410C; }
.byc-host-order-note.is-success { color: #047857; }

@media (max-width: 767px) {
  .sb-tpl { grid-template-columns: 96px minmax(0, 1fr); }
  .sb-tpl-change { grid-column: 1 / -1; text-align: center; }
}

/* ============================================================
   成品网站详情页骨架:
     .detail-layout  display:flex; gap:30px; align-items:flex-start
     .detail-preview width:450px; flex-shrink:0; position:sticky; top:90px
     .detail-info    flex:1; min-width:0
     .info-card      border-radius:16px; padding:28px; margin-bottom:20px
     .package-list   flex column; gap:12px
     .package-option padding:16px 20px; border:2px solid transparent; radius:12px
     .features-grid  repeat(2,1fr); gap:16px
   右栏是若干张卡堆叠(信息+套餐 / 购买流程 / 服务保障 / 温馨提示),
   不是我之前那种"下面另开灰底大区"。
   ============================================================ */

.sd-page { padding: 26px 0 56px; background: var(--byc-bg-light); }
/* ---------- Hero: 与资讯页/关于我们那组同形制(浅蓝渐变 + 徽章 + 46px 标题 + 副标题) ---------- */
.sd-hero { position: relative; overflow: hidden; margin-top: -70px; padding-top: 70px; }
.sd-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 44% 58% at 82% 16%, rgba(43, 109, 232, .14) 0%, transparent 62%),
    radial-gradient(ellipse 40% 48% at 6% 88%, rgba(6, 182, 212, .1) 0%, transparent 60%),
    linear-gradient(180deg, #EAF0FE 0%, #F3F6FD 58%, var(--byc-bg-light) 100%);
}
.sd-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(43, 109, 232, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 109, 232, .04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.sd-hero .byc-container { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 46px; }
.sd-hero .sd-crumb { margin-bottom: 18px; }
.sd-hero-inner { display: flex; align-items: center; gap: 48px; }
.sd-hero-main { flex: 1; min-width: 0; }
.sd-hero-art { flex: none; width: 340px; }
.sd-hero-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 899px) { .sd-hero-art { display: none; } .sd-hero-inner { gap: 0; } }
.sd-hero-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 6px 16px;
  border: 1px solid var(--byc-primary-100);
  border-radius: var(--byc-r-full);
  background: var(--byc-primary-50);
  color: var(--byc-primary);
  font-size: 13px;
  font-weight: 600;
  transition: border-color .18s, background-color .18s;
}
.sd-hero-badge:hover { border-color: var(--byc-primary); background: #fff; }
.sd-hero-title { margin: 0 0 16px; color: var(--byc-text); font-size: 46px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.sd-hero-sub { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.sd-hero-sub span { display: inline-flex; align-items: baseline; gap: 7px; font-size: 14px; }
.sd-hero-sub i { color: var(--byc-text-mut); font-style: normal; }
.sd-hero-sub b { color: var(--byc-text); font-weight: 600; }
@media (max-width: 767px) {
  .sd-hero-title { font-size: 28px; }
  .sd-hero .byc-container { padding-top: 28px; padding-bottom: 32px; }
}
.sd-crumb { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; color: var(--byc-text-mut); font-size: 13px; }
.sd-crumb a { color: var(--byc-text-sec); }
.sd-crumb a:hover { color: var(--byc-primary); }
.sd-crumb .sep { color: var(--byc-border-strong); }

/* 左大右小: 固定宽度 + flex:1 在宽屏下会被右栏吃掉空间, 所以按比例分 */
.sd-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 1199px) { .sd-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 左: 预览, 跟随滚动 ---------- */
.sd-preview { min-width: 0; position: sticky; top: 90px; }
@media (max-width: 1199px) { .sd-preview { max-width: 620px; margin: 0 auto; position: static; } }
.sd-preview-card { overflow: hidden; border: 1px solid var(--byc-border); border-radius: var(--byc-r-xl); background: #fff; box-shadow: var(--byc-sd-md); }
.sd-preview-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--byc-border); background: var(--byc-bg-light); }
.sd-dot { width: 8px; height: 8px; border-radius: 50%; background: #D6DCE6; }
.sd-dot:nth-child(1) { background: #FCA5A5; }
.sd-dot:nth-child(2) { background: #FDE047; }
.sd-dot:nth-child(3) { background: #86EFAC; }
/* 地址栏撑满剩余宽度, 不然右边 470px 空着不像浏览器 */
.sd-preview-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  padding: 3px 12px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-full);
  background: #fff;
  color: var(--byc-text-mut);
  font-size: 11.5px;
  line-height: 1.7;
}
.sd-preview-url svg { width: 11px; height: 11px; flex: none; }
/* 视口: 网页铺满, 顶部对齐 —— 长图自然截成首屏, 各模板高度一致 */
.sd-preview-img {
  display: flex;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--byc-bg-light);
}
.sd-preview-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.sd-preview-noimg { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--byc-border-strong); }
.sd-preview-noimg svg { width: 48px; height: 48px; }
.sd-preview-note { padding: 13px 16px; border-top: 1px solid var(--byc-border); color: var(--byc-text-mut); font-size: 12.5px; text-align: center; }

/* ---------- 右: 卡片堆叠 ---------- */
.sd-info { min-width: 0; }
.sd-below { margin-top: 20px; }
.sd-card {
  padding: 24px;
  margin-bottom: 18px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-xl);
  background: #fff;
  box-shadow: var(--byc-sd-sm);
}
.sd-card:last-child { margin-bottom: 0; }
.sd-card-title { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--byc-text); font-size: 17px; font-weight: 700; }
.sd-card-title::before { content: ''; width: 3px; height: 16px; border-radius: 2px; background: var(--byc-primary); }

/* 模板名 + 标签 */
.sd-h1 { margin: 0 0 12px; color: var(--byc-text); font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
@media (max-width: 599px) { .sd-h1 { font-size: 21px; } }
.sd-meta { display: flex; flex-wrap: wrap; gap: 9px 24px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--byc-border); }

/* 套餐: 纵向 */
.sd-pick-label { margin: 0 0 12px; color: var(--byc-text); font-size: 15px; font-weight: 700; }
/* 两档左右并排 */
.sd-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 599px) { .sd-plans { grid-template-columns: minmax(0, 1fr); } }
.sd-plan {
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border: 2px solid transparent;
  border-radius: var(--byc-r-lg);
  background: var(--byc-bg-light);
  transition: border-color .18s, background-color .18s;
}
.sd-plan:hover { border-color: var(--byc-primary-100); }
.sd-plan.is-rec { border-color: var(--byc-primary); background: var(--byc-primary-50); }
.sd-plan-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; }
.sd-plan-name { color: var(--byc-text); font-size: 15px; font-weight: 700; }
.sd-plan-tag { padding: 1px 8px; border-radius: var(--byc-r-sm); background: var(--byc-primary); color: #fff; font-size: 11px; font-weight: 650; }
/* 两列: 左一项右一项, 每项内部标签左、值右 */
.sd-plan-specs {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  border-top: 1px solid var(--byc-border);
}

.sd-plan-specs > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--byc-border);
  font-size: 13px;
}
.sd-plan-specs > span:last-child { border-bottom: 0; }
.sd-plan-specs i { color: var(--byc-text-mut); font-style: normal; }
.sd-plan-specs b { min-width: 0; color: var(--byc-text); font-weight: 600; text-align: right; }
.sd-plan-specs .is-diff b { color: var(--byc-primary); font-weight: 700; }
.sd-plan-price { flex-basis: 100%; display: flex; align-items: baseline; gap: 4px; }
.sd-plan-price b { color: var(--byc-accent); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.sd-plan-price span { color: var(--byc-text-mut); font-size: 12px; }

.sd-plan-btn {
  display: block;
  margin-top: auto;
  padding: 11px;
  border: 1px solid var(--byc-primary);
  border-radius: var(--byc-r-md);
  background: #fff;
  color: var(--byc-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: background-color .18s, color .18s;
}
.sd-plan-btn:hover { background: var(--byc-primary); color: #fff; }
.sd-plan.is-rec .sd-plan-btn { background: var(--byc-primary); box-shadow: 0 4px 12px rgba(43, 109, 232, .28); color: #fff; }
.sd-plan.is-rec .sd-plan-btn:hover { background: var(--byc-primary-dark); }

.sd-buy-btn {
  display: block;
  padding: 14px;
  border-radius: var(--byc-r-md);
  background: var(--byc-primary);
  box-shadow: 0 4px 15px rgba(43, 109, 232, .3);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
  transition: background-color .18s;
}
.sd-buy-btn:hover { background: var(--byc-primary-dark); }
.sd-buy-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.sd-buy-note { margin: 0; color: var(--byc-text-mut); font-size: 12.5px; }
.sd-back { display: inline-flex; align-items: center; gap: 6px; color: var(--byc-text-sec); font-size: 13px; transition: color .18s; }
.sd-back:hover { color: var(--byc-primary); }
.sd-back svg { width: 14px; height: 14px; }

/* 两列网格: 购买流程 / 服务保障 都用它 */
/* 移到全宽之后铺 4 列; 之前挤在 552 的右栏里只能 2 列 */
.sd-grid2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1023px) { .sd-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sd-grid2 { grid-template-columns: minmax(0, 1fr); } }
.sd-item { display: flex; align-items: flex-start; gap: 13px; }
.sd-item-ico {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--byc-r-md);
}
.sd-item-ico.is-n { background: var(--byc-primary-50); color: var(--byc-primary); font-size: 14px; font-weight: 700; }
.sd-item-ico.is-g { background: linear-gradient(135deg, var(--byc-primary) 0%, #5B8DEF 100%); }
.sd-item .sd-item-ico.is-g { color: #fff; }
.sd-item-ico svg { width: 18px; height: 18px; }
.sd-item-txt { min-width: 0; }
.sd-item-txt b { display: block; margin-bottom: 4px; color: var(--byc-text); font-size: 14.5px; }
.sd-item-txt span { display: block; color: var(--byc-text-sec); font-size: 13px; line-height: 1.75; }

/* 温馨提示 */
.sd-note p { margin: 0 0 12px; color: var(--byc-text-sec); font-size: 14px; line-height: 1.9; }
.sd-note p:last-child { margin-bottom: 0; }
.sd-deny { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--byc-border); }
.sd-deny b { display: block; margin-bottom: 9px; color: var(--byc-text); font-size: 13.5px; }
.sd-deny ul { margin: 0; padding: 0; list-style: none; }
.sd-deny li { position: relative; padding-left: 17px; color: var(--byc-text-mut); font-size: 13px; line-height: 1.9; }
.sd-deny li::before { content: ''; position: absolute; top: 11px; left: 4px; width: 5px; height: 1.5px; border-radius: 1px; background: var(--byc-border-strong); }

/* 同类模板 */
.sd-rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 899px) { .sd-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-rel-card { display: block; overflow: hidden; border: 1px solid var(--byc-border); border-radius: var(--byc-r-lg); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sd-rel-card:hover { border-color: var(--byc-primary-100); box-shadow: var(--byc-sd-md); transform: translateY(-2px); }
.sd-rel-shot { display: flex; justify-content: center; height: 150px; padding: 12px; border-bottom: 1px solid var(--byc-border); background: var(--byc-bg-light); }
.sd-rel-shot img { display: block; width: auto; max-width: 100%; height: 100%; border-radius: 3px; object-fit: cover; object-position: top center; }
.sd-rel-name { display: block; overflow: hidden; padding: 11px 14px; color: var(--byc-text); font-size: 13px; font-weight: 600; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.sd-rel-card:hover .sd-rel-name { color: var(--byc-primary); }