/* ================================================
   LDCMS 右侧悬浮导航 - 蓝湖设计稿 1:1 还原（保留四边投影）

   核心思路 (彻底解决左上/右下阴影外延裁切)：
   1. PNG = 226×770 (RGBA)
      - x<29 : 左侧投影区（6257个非纯白阴影像素）
      - y<29 : 顶部投影区（1366个非纯白阴影像素）
      - x=29..225 / y=29..769 : 白色卡片主体+内容区（宽197, 高741）
      - x>225 / y>769 : PNG无此像素（物理尺寸到这里为止），右下无外延阴影
   2. .ldcms-sidebar-section（内容容器）设置为：
      - width  = 197 + 29 (左留白放左投影)  = 226
      - height = 741 + 29 (上留白放上投影)  = 770
      - padding: 29 (上留白=放上投影+padding-top:0的内容起点之前) 0 0 29
        但content-box内容区原内边距 16/12/27/15 是蓝湖规定内容与卡片边缘距离，所以：
        padding-top    = 29(阴影) + 16(卡片内上距) = 45px
        padding-right  = 12px (卡片内右距)
        padding-bottom = 27px (卡片内下距)
        padding-left   = 29(阴影) + 15(卡片内左距) = 44px
        → section 总box大小 border-box: width = 197 + 12(right) + 44(left) = 253? 不对。
        反过来：我们要content-box的可见内容区域大小精确对应蓝湖卡片内容区，再给左上多加29的外延留白放阴影。
        → 简单：直接让 section width = 226(PNG宽), height = 770(PNG高), padding: 0 0 0 0，
          background-position 0 0（不偏移）。
          然后用个 wrapper(.ldcms-sidebar-content) 作为containing block，
          让它 margin: 29 (上) 0 0 29 (左)，width = 197，把所有绝对定位元素放进去。
   ================================================ */
.ldcms-sidebar {
    position: fixed !important;
    top: 110px;
    left: 0px !important;
    right: auto !important;
    width: 284px;
    height: 828px;
    z-index: 9990;
    user-select: none;
    font-family: "PingFangSC-Semibold", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    margin: 0 !important;
    transform: none !important;
    float: none !important;
    overflow: visible;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.ldcms-sidebar-section {
    /* 放在sidebar内部，左上各推29px（把外延阴影完整展示出来） */
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 226px;
    height: 770px;
    /* PNG 0,0完整绘制，不偏移不缩放 */
    background: url("/img/SketchPngd9cbd51e2e9d69f5965988ecf9a369d4b1ae620e3359b4f9515a908395f00073.png") 0 0 / auto no-repeat;
    background-color: transparent !important;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* wrapper = section 内部的 "蓝湖section_1内容坐标系" 起点
   PNG x=29, y=29 对应 wrapper (0,0)。蓝湖所有测量坐标就是相对这里。 */
.ldcms-sidebar-section::before {
    /* 只是逻辑说明，不需要伪元素实现 */
    content: none;
}

/* ======================================================
   所有子元素坐标直接用蓝湖测量值（相对 section_1 内容区左上角）。
   但由于 section 的 containing block 是 section border-box 本身(0,0)，
   而我们要求的"蓝湖坐标系起点(0,0)"在 PNG x=29,y=29，
   所以所有 absolute 的 left/top 都要 += (29,29)。
   ====================================================== */

/* 顶部标题：line-height=42px 控制行距，text-align 水平居中，padding-top 精确垂直居中 */
.ldcms-sidebar-title {
    position: absolute;
    left: 27px;
    top: 33px;
    width: 172px;
    height: 111px;
    margin: 0;
    padding: 13px 0 0 0;       /* (111 - 42*2) / 2 = 13.5 取13 */
    box-sizing: border-box;
    overflow-wrap: break-word;
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    line-height: 42px;
    display: block;
}

/* 9个品牌行 + 4个标准行：用静态流。起点位置由 title+margin决定，
   之前title margin 0 14 0 7，但现在title是绝对定位，静态流从section y=0开始。
   需要把所有9+4行也用 absolute 精准钉住。 */

/* 先测蓝湖原版 9品牌行 + 4标准行 的真实坐标 */
/* 通过之前的Playwright输出，蓝湖 section_1 里 title y=16..100
   row-1 (美国HAYNES) 在截图目测是：内容区 y≈42, x≈15 */

/* ---------- 13行（品牌+标准） ---------- */
.ldcms-sidebar-row {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    left: 44px;           /* 蓝湖 x=15 + 29 */
    height: 24px;
}
.ldcms-sidebar-text {
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
}
.ldcms-sidebar-img { display: block; object-fit: contain; flex-shrink: 0; }
.ldcms-sidebar-arrow { display: block; object-fit: contain; flex-shrink: 0; }

/* 蓝湖真实坐标(Brand 1-9: x=15, y依次126/157/187/218/249/279/310/340/371)
   → CSS内 absolute坐标 = 蓝湖 + (29,29)。left:44 高度24 在父类统一设置。*/
.ldcms-sidebar-row-1 { top: 155px; width: 101px; }
.ldcms-sidebar-row-1 .ldcms-sidebar-img { width: 63px; height: 18px; margin: 3px 0; }
.ldcms-sidebar-row-2 { top: 186px; width: 133px; }
.ldcms-sidebar-row-2 .ldcms-sidebar-img { width: 95px; height: 14px; margin: 5px 0; }
.ldcms-sidebar-row-3 { top: 216px; width: 86px; }
.ldcms-sidebar-row-3 .ldcms-sidebar-img { width: 48px; height: 22px; margin: 1px 0; }
.ldcms-sidebar-row-4 { top: 247px; width: 141px; }
.ldcms-sidebar-row-4 .ldcms-sidebar-img { width: 103px; height: 14px; margin: 5px 0; }
.ldcms-sidebar-row-5 { top: 278px; width: 139px; }
.ldcms-sidebar-row-5 .ldcms-sidebar-img { width: 101px; height: 13px; margin: 5px 0 6px; }
.ldcms-sidebar-row-6 { top: 308px; width: 124px; }
.ldcms-sidebar-row-6 .ldcms-sidebar-img { width: 86px; height: 22px; margin: 1px 0; }
.ldcms-sidebar-row-7 { top: 339px; width: 102px; }
.ldcms-sidebar-row-7 .ldcms-sidebar-img { width: 64px; height: 17px; margin: 4px 0 3px; }
.ldcms-sidebar-row-8 { top: 369px; width: 116px; }
.ldcms-sidebar-row-8 .ldcms-sidebar-img { width: 78px; height: 22px; margin: 1px 0; }
.ldcms-sidebar-row-9 { top: 400px; width: 129px; }
.ldcms-sidebar-row-9 .ldcms-sidebar-img { width: 91px; height: 17px; margin: 3px 0 4px; }

/* 4个标准行 蓝湖真实坐标 stdraw_0..3 y=403/431/459/487, w:97, h:20
   → CSS内坐标: left=44(=15+29), width=97, height=20, top依次 y+29
   不用nth-of-type(它只看tagName不看class，会把9个Brand一起数)，改用 + 相邻兄弟依次定位 */
.ldcms-sidebar-row-std {
    width: 97px;
    height: 20px;
    top: 440px;           /* Std_1: 403+29+8 */
}
.ldcms-sidebar-row-9 + .ldcms-sidebar-row-std { top: 440px; }  /* 紧跟Brand_9之后的那个std=Std_1 */
.ldcms-sidebar-row-9 + .ldcms-sidebar-row-std + .ldcms-sidebar-row-std { top: 468px; }  /* Std_2 */
.ldcms-sidebar-row-9 + .ldcms-sidebar-row-std + .ldcms-sidebar-row-std + .ldcms-sidebar-row-std { top: 496px; }  /* Std_3 */
.ldcms-sidebar-row-9 + .ldcms-sidebar-row-std + .ldcms-sidebar-row-std + .ldcms-sidebar-row-std + .ldcms-sidebar-row-std { top: 524px; }  /* Std_4 */
.ldcms-sidebar-row-std .ldcms-sidebar-text { font-size: 14px; line-height: 21px; }
.ldcms-sidebar-row-std .ldcms-sidebar-arrow { width: 6px; height: 9px; margin: 5px 0 4px; }
.ldcms-sidebar-row-link { cursor: pointer; transition: color 0.2s; }
.ldcms-sidebar-row-link:hover .ldcms-sidebar-text { color: rgba(10, 111, 170, 1); }
.ldcms-sidebar-row-link:hover .ldcms-sidebar-arrow { filter: brightness(0) saturate(100%) invert(38%) sepia(87%) saturate(450%) hue-rotate(167deg) brightness(98%) contrast(101%); }

/* ---------- CTA 按钮：蓝湖 x:20, y:526 → absolute section内 +29,+29 + 8偏移 ---------- */
.ldcms-sidebar-cta {
    position: absolute;
    left: 49px;      /* 20+29 */
    top: 563px;      /* 526+29+8 */
    width: 128px;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: rgba(10, 111, 170, 1);
    border-radius: 22px;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity 0.2s;
}
.ldcms-sidebar-cta:hover { opacity: 0.9; color: #ffffff !important; }
/* 文字：蓝湖 (40,536) → (40+29,536+29) = (69,565) → 相对cta内: left=69-49=20 top=565-555=10 */
.ldcms-sidebar-cta > span {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 68px;
    height: 24px;
    color: rgba(255, 255, 255, 1);
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
}
/* 箭头：蓝湖 (113,541) → (142,570) → 相对cta内 left=142-49=93, top=570-555=15 */
.ldcms-sidebar-cta > img {
    position: absolute;
    left: 93px;
    top: 15px;
    width: 15px;
    height: 14px;
    filter: brightness(0) invert(1);
}

/* ---------- 联系条 contact-box：蓝湖 x:16, y:590 → (45,627) section内 + 8偏移 ---------- */
.ldcms-sidebar-contact {
    position: absolute;
    left: 45px;       /* 16+29 */
    top: 627px;       /* 590+29+8 */
    width: 137px;
    height: 49px;
    margin: 0;
    padding: 0;
}
/* 电话图标：蓝湖 (41,593) → (70,622) → contact内 x:70-45=25, y:622-619=3 */
.ldcms-sidebar-contact > img {
    position: absolute;
    left: 25px;
    top: 3px;
    width: 17px;
    height: 17px;
}
/* 聯繫總機：蓝湖 (63,590) → (92,619) → contact内 x:92-45=47, y:0 */
.ldcms-sidebar-contact > span:nth-of-type(1) {
    position: absolute;
    left: 47px;
    top: 0;
    width: 64px;
    height: 22px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    line-height: 22px;
}
/* 电话号码：蓝湖 (16,610) → (45,639) → contact内 x:45-45=0, y:639-619=20 */
.ldcms-sidebar-phone {
    position: absolute;
    left: 0;
    top: 20px;
    width: 136px;
    height: 29px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    line-height: 29px;
    letter-spacing: -0.5px;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 底部装饰 deco：蓝湖 x:45, y:656 → (74,685) section内
   同时用作返回顶部：id=ldcmsSidebarBackTop，点击滚回页面顶部 ---------- */
.ldcms-sidebar-deco {
    position: absolute;
    left: 74px;       /* 45+29 */
    top: 685px;       /* 656+29 */
    width: 78px;
    height: 29px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}
.ldcms-sidebar-deco:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* 屏幕宽度 < 1200px 时隐藏右导航，避免遮挡中间产品区内容 */
@media (max-width: 1199.98px) {
    .ldcms-sidebar { display: none !important; }
}

@media (max-width: 768px) {
    .ldcms-sidebar { display: none !important; }
}

/* 右上角关闭按钮 —— 放在卡片内部右上角 */
.ldcms-sidebar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 111, 170, 0.85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    margin: 0;
    line-height: 1;
    transition: background 0.2s, transform 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.ldcms-sidebar-close svg {
    display: block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.ldcms-sidebar-close:hover {
    background: rgba(8, 90, 140, 1);
    transform: rotate(90deg);
}