/* ===========================================================================
   项目详情页 · 新版
   ---------------------------------------------------------------------------
   为什么是一个新文件、而且带 cd- 前缀：

   这一页线上加载的是 https://img.51aspx.com/style/codedetail.css —— **那份不在
   仓库里**。仓库里那份 wwwroot/Content/style/codedetail.css 最后一次改动是
   2023-06-09，跟线上早就对不上了。也就是说：改仓库里那份，线上不生效；
   而线上那份长什么样，从代码库里看不到。

   所以新版样式必须满足两条：
     一、自带命名空间（cd-），不跟老样式抢同一个类名；
     二、自给自足，不依赖老文件里的任何规则。
   这样无论 CDN 上那份是什么状态，新版的部分都长得对。

   老区块（文件树、项目介绍、评论）仍然吃 CDN 那份样式，这里只做轻微的
   外壳统一（卡片化、标题、间距），不动它们内部。
   =========================================================================== */

.cd-page { padding: 16px 0 60px; }

/* ---- 面包屑 ------------------------------------------------------------ */
.cd-crumb { font-size: 12px; color: #999; margin-bottom: 14px; line-height: 1.8; }
.cd-crumb a { color: #999; }
.cd-crumb a:hover { color: #40c641; }
.cd-crumb .cd-crumb-sep { margin: 0 6px; color: #ccc; }
.cd-crumb .cd-crumb-cur { color: #666; }

/* ---- 通用卡片 ---------------------------------------------------------- */
.cd-card { background: #fff; border: 1px solid #e6e8eb; border-radius: 4px; margin-bottom: 16px; }
.cd-card-hd { padding: 13px 20px; border-bottom: 1px solid #f0f2f4; font-size: 15px; font-weight: 700; color: #333; }
.cd-card-hd .cd-hd-extra { float: right; font-size: 12px; font-weight: 400; color: #999; }
.cd-card-bd { padding: 20px; }

/* ---- 首屏 -------------------------------------------------------------- */
.cd-hero { display: flex; gap: 24px; align-items: flex-start; }
.cd-hero-media { flex: 0 0 380px; width: 380px; }
.cd-cover { width: 380px; height: 285px; object-fit: cover; border-radius: 4px; background: #f2f4f6; display: block; }
.cd-shots { display: flex; gap: 8px; margin-top: 8px; }
.cd-shots a { flex: 1 1 0; min-width: 0; }
.cd-shots img { width: 100%; height: 62px; object-fit: cover; border-radius: 3px; background: #f2f4f6;
                border: 1px solid #eceef0; display: block; }
.cd-shots a:hover img { border-color: #40c641; }
.cd-shots-more { display: block; margin-top: 8px; font-size: 12px; color: #888; text-align: center; }
.cd-shots-more:hover { color: #40c641; }

.cd-hero-info { flex: 1 1 auto; min-width: 0; }
.cd-title { font-size: 24px; line-height: 1.35; font-weight: 700; color: #1a1a1a; margin: 0 0 10px;
            text-wrap: balance; }
.cd-badge { display: inline-block; vertical-align: 4px; margin-left: 8px; padding: 2px 9px; border-radius: 2px;
            font-size: 12px; font-weight: 400; color: #fff; letter-spacing: .5px; }
.cd-badge-free { background: #40c641; }
.cd-badge-share { background: #3ba3f5; }
.cd-badge-biz { background: #fb760a; }
.cd-badge-quality { background: #e8b100; }

.cd-sub { font-size: 14px; line-height: 1.8; color: #666; margin: 0 0 16px; }

/* 关键规格：两列的定义表，比原来一列小字好扫 */
.cd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px;
            margin: 0 0 16px; padding: 0; list-style: none; }
.cd-specs li { font-size: 13px; color: #888; line-height: 1.6; min-width: 0; }
.cd-specs li b { display: inline; font-weight: 400; color: #333; }
.cd-specs li .cd-spec-k { display: inline-block; min-width: 5em; color: #999; }

.cd-tags { margin: 0 0 16px; }
.cd-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 2px;
             background: #f4f6f8; color: #666; font-size: 12px; }
.cd-tags a:hover { background: #e9f7ec; color: #40c641; }

.cd-stats { display: flex; gap: 26px; padding-top: 14px; border-top: 1px dashed #eceef0; }
.cd-stats span { font-size: 13px; color: #999; }
.cd-stats span b { color: #333; font-weight: 700; font-family: Arial, sans-serif; }

.cd-hero-acts { position: absolute; right: 20px; top: 18px; }
.cd-fav { cursor: pointer; font-size: 20px; color: #dcdfe2; line-height: 1; margin: 0; }
.cd-fav.on, .cd-fav:hover { color: #fb4a4a; }

/* ---- 两栏 -------------------------------------------------------------- */
/* 宽度沿用老布局的 884 / 300：吸顶后的锚点条（.code_details_nav_fixed）在 CDN
   那份样式里是写死 884px 的，栏宽一改它就错位；而那份样式我改不到。
   用 flex-basis 而不是 width，这样即使 CDN 上的 .left_area 宽度被人改过，
   这一页也还是按这里说的排。 */
.cd-grid { display: flex; gap: 16px; align-items: flex-start; }
.cd-main { flex: 0 0 884px; min-width: 0; }
.cd-rail { flex: 0 0 300px; }

/* ---- 结算卡（右栏顶部，跟着滚） --------------------------------------- */
.cd-buy { position: sticky; top: 14px; z-index: 98; }
/* 吸顶的锚点条 z-index 是 99，结算卡比它低一档，滚动时不会盖住它 */
.cd-price-head { padding: 18px 20px; background: #fafbfc; border-bottom: 1px solid #f0f2f4; }
.cd-price-label { font-size: 12px; color: #999; margin-bottom: 2px; }
.cd-price { font-size: 32px; font-weight: 700; color: #fb760a; font-family: Arial, sans-serif; line-height: 1.1; }
.cd-price-unit { font-size: 14px; color: #fb760a; margin-left: 3px; }
.cd-price-free { font-size: 28px; font-weight: 700; color: #40c641; }
.cd-price-login { display: inline-block; font-size: 17px; font-weight: 700; color: #fb760a;
                  border-bottom: 1px dashed #fb760a; line-height: 1.5; }
.cd-price-login:hover { color: #e06800; border-color: #e06800; }
.cd-price-was { margin-top: 6px; font-size: 13px; color: #aaa; }
.cd-price-was s { margin-right: 8px; }
.cd-countdown { color: #fb760a; font-family: Arial, sans-serif; }

.cd-buy-bd { padding: 16px 20px 18px; }
.cd-line { font-size: 13px; color: #777; line-height: 1.9; }
.cd-line b { color: #333; font-weight: 400; }

.cd-give { margin: 0 0 14px; padding: 0; list-style: none; }
.cd-give li { position: relative; padding-left: 20px; font-size: 13px; color: #555; line-height: 2; }
.cd-give li:before { content: "✓"; position: absolute; left: 0; top: 0; color: #40c641; font-weight: 700; }

.cd-addon-hd { font-size: 13px; color: #999; margin: 4px 0 8px; }
.cd-btn-go { display: block; width: 100%; margin-top: 14px; padding: 12px 0; border: 0; border-radius: 3px;
             background: #40c641; color: #fff; font-size: 16px; text-align: center; cursor: pointer; }
.cd-btn-go:hover { background: #37b158; color: #fff; }
.cd-btn-sub { display: block; width: 100%; margin-top: 8px; padding: 9px 0; border: 1px solid #e2e5e8;
              border-radius: 3px; background: #fff; color: #666; font-size: 13px; text-align: center; cursor: pointer; }
.cd-btn-sub:hover { color: #40c641; border-color: #b9d9bf; }
.cd-btn-row { display: flex; gap: 8px; }
.cd-btn-row .cd-btn-sub { margin-top: 8px; }

/* ---- 卖家卡 ------------------------------------------------------------ */
.cd-seller-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cd-seller-top img.cd-avatar { width: 46px; height: 46px; border-radius: 50%; background: #f2f4f6; flex: 0 0 46px; }
.cd-seller-name { font-size: 15px; font-weight: 700; color: #222; line-height: 1.4; }
.cd-seller-name a { color: #222; }
.cd-seller-name a:hover { color: #40c641; }
.cd-verified { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 2px;
               background: #e9f7ec; color: #40c641; font-size: 11px; }
.cd-seller-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center;
                  padding: 12px 0; border-top: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }
.cd-seller-nums div { min-width: 0; }
.cd-seller-nums b { display: block; font-size: 17px; color: #333; font-family: Arial, sans-serif; line-height: 1.3; }
.cd-seller-nums span { font-size: 12px; color: #999; }
.cd-seller-foot { padding-top: 12px; font-size: 12px; color: #999; line-height: 1.9; }
.cd-seller-qr { margin-top: 12px; text-align: center; }
.cd-seller-qr img { max-width: 100%; }

/* ---- 右栏的推荐列表 ---------------------------------------------------- */
.cd-mini { margin: 0; padding: 0; list-style: none; }
.cd-mini li { padding: 10px 0; border-bottom: 1px dashed #f0f2f4; }
.cd-mini li:last-child { border-bottom: 0; }
.cd-mini li:first-child { padding-top: 0; }
.cd-mini a { display: flex; gap: 10px; align-items: flex-start; }
.cd-mini img { width: 66px; height: 50px; object-fit: cover; border-radius: 3px; background: #f2f4f6; flex: 0 0 66px; }
.cd-mini-t { font-size: 13px; color: #444; line-height: 1.5; max-height: 3em; overflow: hidden; }
.cd-mini a:hover .cd-mini-t { color: #40c641; }
.cd-mini-m { margin-top: 4px; font-size: 12px; color: #fb760a; }
.cd-mini-m .cd-mini-v { float: right; color: #bbb; }
.cd-mini-empty { font-size: 13px; color: #aaa; padding: 6px 0; }

/* ---- 锚点条 ------------------------------------------------------------ */
.cd-nav { display: flex; gap: 4px; background: #fff; border: 1px solid #e6e8eb; border-radius: 4px;
          margin-bottom: 16px; padding: 0 8px; }
.cd-nav a { display: block; padding: 13px 16px; font-size: 14px; color: #666; border-bottom: 2px solid transparent; }
.cd-nav a:hover { color: #40c641; }
.cd-nav li { list-style: none; }
.cd-nav li.active a { color: #222; font-weight: 700; border-bottom-color: #40c641; }

/* ---- 把老区块套进新外壳 ------------------------------------------------
   下面这些类名是老结构里的（CDN 那份样式也在管它们）。这里只统一外壳：
   卡片边框、标题字号、内边距。内部排版一概不动，免得跟看不见的那份打架。 */
.cd-main .border_box { background: #fff; border: 1px solid #e6e8eb; border-radius: 4px;
                       margin-bottom: 16px; box-shadow: none; }
.cd-main .border_box > div > h3,
.cd-main .border_box h3 { font-size: 15px; font-weight: 700; color: #333;
                          padding: 13px 20px; margin: 0; border-bottom: 1px solid #f0f2f4; }
.cd-main .left_area_con { padding: 20px; }

/* 项目参数：跟首屏那张规格表用同一种排法（两列的定义表），
   而不是一列句子。原来一屏参数里有一半是空的冒号，读起来像资料没填全。 */
.cd-main .details_parameter_con { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                                  gap: 9px 32px; margin: 0 0 20px; padding: 0; list-style: none; }
/* 这个 ul 上还挂着 clearfix，而 clearfix 的 :before/:after **在 grid 里是真的格子** ——
   于是第一格被一个空的伪元素占掉，整张表往后错一位（本地实测：第一行左边是空的）。
   浮动布局里它们是必需的，网格布局里它们是纯粹的破坏。 */
.cd-main .details_parameter_con:before,
.cd-main .details_parameter_con:after { content: none; display: none; }
.cd-main .details_parameter_con li { float: none; width: auto; margin: 0;
                                     font-size: 13px; color: #333; line-height: 1.7; min-width: 0; }
.cd-main .code_details h4 { font-size: 14px; font-weight: 700; color: #333; margin: 0 0 14px; padding: 0; }
.cd-main .code_details .left_area_con { padding: 20px; }
.cd-main .code_editor { padding: 14px 20px; border-top: 1px solid #f0f2f4; font-size: 13px; color: #888; }

@media (max-width: 1100px) {
    .cd-grid, .cd-hero { display: block; }
    .cd-rail, .cd-hero-media { width: auto; }
    .cd-hero-media { margin-bottom: 16px; }
    .cd-cover { width: 100%; height: auto; }
    .cd-buy { position: static; }
}

/* ===========================================================================
   接管几个「老类名」的样式
   ---------------------------------------------------------------------------
   下面这些类（.choose-serve / .serv-tag / .tip / .code_details_nav …）的样式
   本来在 CDN 那份 codedetail.css 里。问题是：那份文件仓库里看不到，而且它是按
   **首屏那个宽栏**排的 —— 落地服务搬进 300px 的右栏之后，那边的规则直接散架
   （本地实测：三段 hover 才该出现的说明文字全部展开，糊成一大坨盖住了购买按钮）。

   所以这里把用到的每一条都重新写一遍，不去猜 CDN 上那份是什么状态。
   全部限定在 .cd-rail / .cd-main 里，不影响别的页面。
   =========================================================================== */

/* ---- 可选加购（落地服务） ---------------------------------------------- */
.cd-rail .choose-serve { position: relative; padding: 0; margin-bottom: 4px; }
.cd-rail .choose-serve .serv-tag,
.cd-rail .choose-serve .reset-tag {
    display: block; position: relative; cursor: pointer;
    padding: 10px 34px 10px 13px; margin: 0 0 8px;
    border: 1px solid #e2e5e8; border-radius: 3px;
    font-size: 13px; color: #444; line-height: 1.5;
}
.cd-rail .choose-serve .serv-tag:hover,
.cd-rail .choose-serve .reset-tag:hover { border-color: #b9d9bf; }
.cd-rail .choose-serve .serv-tag em { float: right; font-style: normal; color: #fb760a; font-size: 13px; }
.cd-rail .choose-serve .active { border-color: #40c641; background: #f6fbf7; }
.cd-rail .choose-serve .active:after {
    content: "✓"; position: absolute; right: 12px; top: 50%; margin-top: -9px;
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    background: #40c641; color: #fff; border-radius: 50%; font-size: 11px;
}
/* 说明文字只在 title 提示里给。**不能让它显示成正文** —— 三段各二三十个字，
   在 300px 宽里能撑出十几行，把下面的购买按钮整个顶出屏幕。 */
.cd-rail .choose-serve span.tip { display: none !important; }
.cd-rail .choose-serve .unserv { text-decoration: line-through; color: #bbb; cursor: not-allowed; }
.cd-rail .choose-serve .unserv:hover { border-color: #e2e5e8; }
.cd-rail .uneedchoose {
    display: none; color: #e64545; font-style: normal; font-size: 12px; line-height: 1.8;
}

/* ---- 右栏里那几个老区块的标题 ------------------------------------------ */
.cd-rail .border_box { background: #fff; border: 1px solid #e6e8eb; border-radius: 4px; margin-bottom: 16px; }
.cd-rail .border_box h3,
.cd-rail .user_shop_title h3 {
    font-size: 15px; font-weight: 700; color: #333;
    padding: 13px 20px; margin: 0; border-bottom: 1px solid #f0f2f4;
}
.cd-rail .user_shop_title h3 span { font-size: 15px; }
.cd-rail .right_area_con { padding: 12px 20px; }
.cd-rail .code_list_con { margin: 0; padding: 0; list-style: none; }
.cd-rail .code_list_con li { padding: 10px 0; border-bottom: 1px dashed #f0f2f4; }
.cd-rail .code_list_con li:last-child { border-bottom: 0; }
.cd-rail .code_list_con .code_logo img { width: 66px; height: 50px; object-fit: cover;
                                         border-radius: 3px; background: #f2f4f6; }
.cd-rail .code_list_con .code_block_right { width: 178px; }
.cd-rail .code_list_con p { font-size: 13px; color: #444; line-height: 1.5; margin: 0 0 3px; }

/* ---- 锚点条：老结构是四个等宽格子，竖着堆在窄栏里很难看 ---------------- */
.cd-main .border_box_title { border: 1px solid #e6e8eb; border-radius: 4px; background: #fff;
                             margin-bottom: 16px; z-index: 99; }
.cd-main .code_details_nav { display: flex; padding: 0 8px; border-bottom: 0; margin: 0; }
.cd-main .code_details_nav li { float: none; width: auto; border-right: 0; text-align: left; list-style: none; }
.cd-main .code_details_nav li a { display: block; padding: 13px 18px; font-size: 14px; color: #666;
                                  border-bottom: 2px solid transparent; }
.cd-main .code_details_nav li a:hover { color: #40c641; }
.cd-main .code_details_nav li.active a,
.cd-main .code_details_nav li.active i { color: #222; }
.cd-main .code_details_nav li.active a { font-weight: 700; border-bottom-color: #40c641; }

/* 吸顶时跟着新栏宽走 */
.cd-main .code_details_nav_fixed { position: fixed; top: 45px; width: 884px; }