/* ============================================================
   MuyuGPT 共享商品卡片组件（v=pc20260723a）
   适用：四个产品页 #cl-plans 静态卡、首页/站内选购弹窗 #modalGrid、
        博客文章商品推荐卡（.bg-prodcard）。只管布局与对齐，
        颜色沿用品牌体系；数据一律来自 products 数据源。
   ============================================================ */

/* ============================================================
   v3（2026-07-23）：产品页 #cl-plans 卡片改 CSS Grid 行对齐（像素级三线一致）；
   弹窗 #modalGrid 保持 flex 方案（JS 生成结构统一，自然对齐）。
   每个作用域只用一种垂直对齐方案，互不混用。
   ============================================================ */
/* ---------- 成品号视觉体系（Part12）：蓝紫辅助色，代充维持品牌绿 ---------- */
:root{
  --finished-account-accent:#6554C0;
  --finished-account-bg:#F5F2FF;
  --finished-account-border:#CFC7FF;
  --finished-account-text:#5543B8;
}
.product-card--finished-account{
  border-color:var(--finished-account-border);
  background:linear-gradient(180deg,var(--finished-account-bg) 0,#ffffff 110px);
}
/* .product-card--recharge：代充卡占位类，绿色体系维持现状，无需覆写 */
.product-card__service-type--finished,
.product-card--finished-account .product-card__service-type{
  color:var(--finished-account-text);
  background:var(--finished-account-bg);
  border-color:var(--finished-account-border);
}
/* 《成品号》五字符（含书名号）为不可拆分整体：内部禁断行，空间不足整体下移 */
.product-card__finished-label{
  display:inline-block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;hyphens:none;
  color:var(--finished-account-text);font-weight:800;margin-left:.28em;
}
.product-card__title-main{overflow-wrap:normal;}
@media(max-width:767px){
  .product-card__finished-label{display:block;width:fit-content;margin-left:0;margin-top:5px;}
}

.pcard{height:100%;border-radius:18px;padding:20px 18px 18px;min-width:0;}
.pcard .p-brand{font-size:12px;letter-spacing:.4px;color:#8a8f8c;}
.pcard .p-name{line-height:1.4;display:flex;align-items:flex-start;}
.pcard .p-price{display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;line-height:1;}
.pcard .p-price .cur{flex:0 0 auto;font-weight:800;}
.pcard .p-price .amt{flex:0 0 auto;font-size:34px;font-weight:900;line-height:1;}
.pcard .p-price .unit{flex:0 1 auto;min-width:0;margin-left:4px;font-size:13px;color:#6b6b6b;white-space:nowrap;overflow:visible;}
.pcard .p-price .orig{margin-left:8px;font-size:13px;color:#b3b3b3;text-decoration:line-through;}
.pcard .product-service-notice{font-size:13px;line-height:1.5;white-space:normal;word-break:break-word;overflow:visible;margin:0;}
.pcard .p-notices{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;}
.pcard .p-notices .product-service-notice{min-height:0;}
.pcard .p-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;margin:0;}
.pcard .p-actions .p-buy{margin:0;}
.pcard .p-more{display:flex;align-items:center;padding:0 14px;border:1px solid #e2e5e3;border-radius:12px;font-size:13px;color:#3c403e;text-decoration:none;white-space:nowrap;}
.pcard .p-more:hover{border-color:#00a86b;color:#007a4f;}
.pcard .p-buy{min-height:46px;border-radius:12px;}

/* ---------- 产品页统一固定行模板（v5 / Part11：全部区域强制入固定 Grid 行） ----------
   四个产品页所有卡片同一 DOM 顺序：标签占位/品牌/标题/副题/价格/功能/红字/按钮。
   所有卡片恒输出 .product-card__badge-slot 节点（无标签时含隐形占位章，
   禁止 display:none / 不输出 / height:0 / absolute）。
   价格行固定 66px：不随标题行数/标签有无移动，同排像素级同线。 */
/* .pcard.cx-plan 双类：特异性压过历史页面规则（旧冲突规则已从各页删除）
   2026-07-25 layout-v2：品牌行隐藏（display:none 不参与 Grid 流），7 行紧凑模板：
   标签26 / 标题46 / 副题30 / 价格56 / 权益min100 / 红字44 / 按钮46，行距 6px。 */
#cl-plans .pcard.cx-plan{
  display:grid;min-height:0;row-gap:6px;
  grid-template-rows:26px 46px 30px 56px minmax(100px,1fr) 44px 46px;
  grid-auto-rows:auto; /* 兜底：若脚本注入额外红字行不至于挤坏按钮行 */
}
#cl-plans .pcard.cx-plan .p-brand{display:none;} /* 品牌旁白由页面/套餐名承担 */
.product-card__badge-slot{display:flex;align-items:center;height:26px;min-height:26px;max-height:26px;}
.product-card__badge--placeholder{visibility:hidden;}
.chip-slot{visibility:hidden;} /* 兼容旧占位类 */
#cl-plans .pcard.cx-plan .type-chip{margin-bottom:0;}
#cl-plans .pcard.cx-plan .p-name{height:46px;min-height:46px;max-height:46px;margin:0;display:flex;align-items:flex-start;line-height:1.35;font-size:15.5px;overflow:visible;}
#cl-plans .pcard.cx-plan .p-desc{height:30px;min-height:30px;max-height:30px;font-size:13px;color:#6b6b6b;overflow:visible;}
/* 价格：容器垂直居中；内容（¥/金额/周期/划线价）统一文字基线；无 margin-top/位移/绝对定位 */
#cl-plans .pcard.cx-plan .p-price{
  height:56px;min-height:56px;max-height:56px;margin:0;padding:0;
  display:grid;grid-auto-flow:column;justify-content:start;align-items:baseline;align-content:center;
}
#cl-plans .pcard.cx-plan .p-feat li{font-size:13.5px;line-height:1.45;margin-bottom:3px;}
#cl-plans .pcard.cx-plan .p-notices{height:44px;min-height:44px;max-height:44px;padding-bottom:2px;justify-content:flex-end;overflow:visible;}
#cl-plans .pcard.cx-plan > .product-service-notice{height:44px;min-height:44px;max-height:44px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:2px;overflow:visible;}
#cl-plans .pcard.cx-plan .product-service-notice{font-size:12px;line-height:1.45;}
/* 中和历史 margin-top:auto / padding-top:12 / margin-bottom:8（否则溢出固定 80px 行） */
#cl-plans .pcard.cx-plan .product-service-notice,#cl-plans .pcard.cx-plan .tier-footred{margin:0;padding-top:0;}
#cl-plans .pcard.cx-plan .p-feat{margin:0;align-self:start;overflow:visible;}
#cl-plans .pcard.cx-plan .p-buy{margin-top:0;min-height:44px;}
#cl-plans .pcard.cx-plan .p-buy,#cl-plans .pcard.cx-plan .p-actions{align-self:stretch;}
#cl-plans .pcard.cx-plan .p-actions{height:46px;min-height:46px;}

/* ---------- 弹窗固定高（同一渲染器结构，定高即同线） ---------- */
#modalGrid .pcard .p-name{height:56px;min-height:56px;max-height:56px;}
#modalGrid .pcard .p-desc{min-height:38px;}
#modalGrid .pcard .p-price{height:60px;min-height:60px;max-height:60px;padding:0;
  display:grid;grid-auto-flow:column;justify-content:start;align-items:baseline;align-content:center;}
#modalGrid .pcard .product-service-notice{height:64px;min-height:64px;max-height:64px;}

/* ---------- 方案区紧凑化（layout-v2：紧接首屏，装饰性 PLANS 隐藏，标题说明收紧） ---------- */
#cl-plans{margin-top:0;padding-top:20px;padding-bottom:32px;height:auto;min-height:0;overflow:visible;}
#cl-plans .sec-head{margin-bottom:14px;}
#cl-plans .sec-head .eyebrow{display:none;}
#cl-plans .sec-head h2{margin-top:0;margin-bottom:6px;font-size:clamp(26px,2vw,34px);line-height:1.15;}
#cl-plans .sec-head p{margin-top:0;margin-bottom:0;font-size:14.5px;line-height:1.45;}
#cl-plans .p-feat li{margin-bottom:4px;}
.pcard{padding:18px 16px 16px;}

/* ---------- 弹窗（flex 方案，JS 统一结构） ---------- */
#modalGrid .pcard{display:flex;flex-direction:column;}
#modalGrid .pcard .p-name{min-height:52px;}
#modalGrid .pcard .p-price{min-height:56px;}
#modalGrid .pcard .p-feat{flex:1 1 auto;}
#modalGrid .pcard .product-service-notice{min-height:56px;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:8px;}
#modalGrid .pcard .p-buy{margin-top:auto;}

/* ---------- Gemini / Grok 桌面单排四列商品网格 ---------- */
.product-grid--gemini,.product-grid--grok{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;
  width:min(100% - 40px,1320px);margin-inline:auto;
}
@media(max-width:1199px){.product-grid--gemini,.product-grid--grok{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:767px){.product-grid--gemini,.product-grid--grok{grid-template-columns:1fr;}}
/* (v4 移除：旧 72px 标题最小高会破坏固定 64px 行) */

/* ---------- 产品页套餐区：占据内容主宽度 ---------- */
#cl-plans .grp-grid{max-width:1160px;}
#cl-plans .tier-grid{max-width:1200px;margin-inline:auto;}
/* 锚点：导航高 ~70px + 余量；定位后标题完整可见，不再用负 top 位移 hack */
#cl-plans,#plans{scroll-margin-top:96px;}
#plans{display:block;}
.plans-note{max-width:1160px;margin:18px auto 0;text-align:center;color:#8a8f8c;font-size:13.5px;}

/* ---------- 选购弹窗四卡对齐（桌面4列/平板2列/手机1列） ---------- */
#modalGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch;}
#modalGrid .pcard{height:100%;}
.modal-card{max-width:min(1120px,94vw);}
@media(max-width:1024px){#modalGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){
  #modalGrid{grid-template-columns:1fr;}
  .modal-card{max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}

/* ---------- 平板/手机通用 ---------- */
@media(max-width:1024px){#cl-plans .grp-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:767px){
  #cl-plans .grp-grid{grid-template-columns:1fr;}
  /* 移动端：行高改自动，内容顺序不变，无桌面行高造成的大空白 */
  #cl-plans .pcard.cx-plan{grid-template-rows:none;grid-auto-rows:auto;}
  #cl-plans .pcard.cx-plan .p-name,#cl-plans .pcard.cx-plan .p-desc,#cl-plans .pcard.cx-plan .p-price,
  #cl-plans .pcard.cx-plan .p-notices,#cl-plans .pcard.cx-plan > .product-service-notice,
  #cl-plans .pcard.cx-plan .product-card__badge-slot{
    height:auto;min-height:0;max-height:none;
  }
  .pcard .p-price .amt{font-size:30px;}
  .pcard .product-service-notice{font-size:13px;}
}

/* ---------- 统一支付/发票说明条（商品卡片组下方，组级一次） ---------- */
.pay-notice-bar{max-width:1320px;margin:26px auto 0;padding:10px 16px;text-align:center;
  font-size:14px;color:#6b6b6b;background:#fafbfa;border:1px solid #ececec;border-radius:12px;
  line-height:1.7;white-space:normal;}
@media(max-width:640px){.pay-notice-bar{font-size:13.5px;margin-top:20px;}}

/* ---------- 博客文章商品推荐卡（共享组件 blog_product_cards 输出） ---------- */
.bg-prodcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:10px 0 4px;}
.bg-prodcard{display:flex;flex-direction:column;border:1px solid #e6e6e6;border-radius:16px;background:#fff;padding:18px 18px 16px;text-decoration:none;color:inherit;}
.bg-prodcard:hover{border-color:#00a86b;}
.bg-prodcard .t-chip{width:max-content;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;margin-bottom:8px;color:#007a4f;background:#eaf6f0;}
.bg-prodcard .t-chip--account{color:var(--finished-account-text);background:var(--finished-account-bg);border:1px solid var(--finished-account-border);}
.bg-prodcard.product-card--finished-account{border-color:var(--finished-account-border);background:linear-gradient(180deg,var(--finished-account-bg) 0,#ffffff 96px);}
.bg-prodcard .product-card__finished-label{font-size:14px;}
.bg-prodcard b{font-size:15px;color:#0d0d0d;line-height:1.45;}
.bg-prodcard .pc-price{margin:8px 0 4px;display:flex;align-items:baseline;}
.bg-prodcard .pc-price .amt{font-size:24px;font-weight:900;color:#0d0d0d;}
.bg-prodcard .pc-price .unit{margin-left:4px;font-size:12.5px;color:#6b6b6b;}
.bg-prodcard .pc-red{font-size:13px;color:#c0392b;line-height:1.5;margin:0 0 10px;}
.bg-prodcard .pc-go{margin-top:auto;font-size:13.5px;font-weight:700;color:#007a4f;}