/* =========================
   Scoped Product Detail UI
   Primary: #0093e6
   ========================= */

.pd-wrap {
    --pd-primary: #0093e6;
    --pd-primary-600: #0082cc;
    --pd-ink: #0f172a;
    --pd-muted: #475569;
    --pd-line: #e6eef7;
    --pd-shadow: 0 14px 36px rgba(2, 48, 71, .10);
    --pd-shadow-soft: 0 8px 18px rgba(2, 48, 71, .06);
    --pd-radius: 18px;
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px 40px;
    color: var(--pd-ink);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Microsoft YaHei",sans-serif;
    line-height: 1.65;
}

    /* icons color */
    .pd-wrap .fa {
        color: var(--pd-primary);
    }

    /* ========== HERO ========== */
    .pd-wrap .pd-hero {
        position: relative;
        border: 1px solid var(--pd-line);
        border-radius: calc(var(--pd-radius) + 8px);
        overflow: hidden;
        background: #f8fbff;
        box-shadow: var(--pd-shadow);
    }

        .pd-wrap .pd-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(1200px 520px at 55% 10%, rgba(0,147,230,.16) 0%, rgba(0,147,230,.08) 35%, rgba(0,147,230,.03) 60%, rgba(255,255,255,1) 100%);
            pointer-events: none;
        }

        .pd-wrap .pd-hero::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 110px;
            background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
            pointer-events: none;
        }

    .pd-wrap .pd-hero-inner {
        position: relative;
        padding: 26px 26px 22px;
        max-width: 880px;
        margin: 0 auto;
    }

    .pd-wrap .pd-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--pd-muted);
        background: rgba(255,255,255,.75);
        border: 1px solid rgba(0,147,230,.18);
        padding: 7px 12px;
        border-radius: 999px;
        box-shadow: 0 6px 14px rgba(2,48,71,.06);
        backdrop-filter: blur(6px);
    }

    /* title is now h2 */
    .pd-wrap .pd-title {
        margin: 14px 0 12px;
        font-size: 30px;
        line-height: 1.22;
        letter-spacing: -.015em;
    }

    .pd-wrap .pd-sub {
        color: var(--pd-muted);
        font-size: 14px;
        background: rgba(255,255,255,.82);
        border: 1px solid rgba(230,238,247,.95);
        padding: 14px 16px;
        border-radius: 16px;
        box-shadow: var(--pd-shadow-soft);
    }

    .pd-wrap .pd-hero-cta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .pd-wrap .pd-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        border-radius: 12px;
        font-size: 14px;
        text-decoration: none;
        border: 1px solid transparent;
        transition: transform .08s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
        user-select: none;
        box-shadow: 0 10px 18px rgba(2,48,71,.06);
    }

        .pd-wrap .pd-btn:active {
            transform: translateY(1px);
        }

    .pd-wrap .pd-btn-primary {
        background: var(--pd-primary);
        color: #fff;
    }

        .pd-wrap .pd-btn-primary:hover {
            background: var(--pd-primary-600);
            box-shadow: 0 12px 22px rgba(0,147,230,.20);
        }

    .pd-wrap .pd-btn-ghost {
        background: rgba(255,255,255,.92);
        color: var(--pd-primary);
        border-color: rgba(0,147,230,.25);
    }

        .pd-wrap .pd-btn-ghost:hover {
            border-color: rgba(0,147,230,.45);
            background: rgba(0,147,230,.06);
        }

    .pd-wrap .pd-note {
        margin-top: 18px;
        font-size: 12.8px;
        color: var(--pd-muted);
        background: rgba(255,255,255,.78);
        border: 1px dashed rgba(0,147,230,.38);
        padding: 12px 14px;
        border-radius: 16px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
        box-shadow: 0 10px 18px rgba(2,48,71,.05);
    }

        .pd-wrap .pd-note .fa {
            margin-top: 2px;
        }

    /* ========== TOC ========== */
    .pd-wrap .pd-toc {
        margin: 14px 0 18px;
        position: sticky;
        top: 8px;
        z-index: 5;
    }

    .pd-wrap .pd-toc-inner {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 10px;
        background: rgba(255,255,255,.94);
        border: 1px solid var(--pd-line);
        border-radius: 14px;
        box-shadow: 0 10px 18px rgba(2,48,71,.05);
        backdrop-filter: blur(8px);
    }

        .pd-wrap .pd-toc-inner a {
            text-decoration: none;
            font-size: 13px;
            color: var(--pd-muted);
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid transparent;
            background: rgba(0,147,230,.04);
        }

            .pd-wrap .pd-toc-inner a:hover {
                color: var(--pd-primary);
                border-color: rgba(0,147,230,.25);
                background: rgba(0,147,230,.08);
            }

    /* ========== SECTIONS ========== */
    .pd-wrap .pd-section {
        margin-top: 18px;
        background: #fff;
        border: 1px solid var(--pd-line);
        border-radius: var(--pd-radius);
        box-shadow: 0 10px 20px rgba(2,48,71,.05);
    }

    .pd-wrap .pd-head {
        padding: 16px 18px 10px;
        border-bottom: 1px solid rgba(230,238,247,.9);
        display: flex;
        align-items: center;
        gap: 10px;
    }
        /* section titles are now h3 */
        .pd-wrap .pd-head h3 {
            margin: 0;
            font-size: 18px;
            letter-spacing: -.01em;
            color: var(--pd-ink);
        }

        .pd-wrap .pd-head .fa {
            font-size: 16px;
        }

    .pd-wrap .pd-body {
        padding: 14px 18px 18px;
        font-size: 14px;
    }

        .pd-wrap .pd-body p {
            margin: 0 0 10px;
            color: var(--pd-muted);
        }

    /* inline part tag */
    .pd-wrap .pd-k {
        font-weight: 700;
        color: var(--pd-ink);
        background: rgba(0,147,230,.06);
        border: 1px solid rgba(0,147,230,.18);
        padding: 2px 8px;
        border-radius: 999px;
    }

    /* grid cards */
    .pd-wrap .pd-grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pd-wrap .pd-mini {
        border: 1px solid var(--pd-line);
        border-radius: 14px;
        padding: 12px;
        background: linear-gradient(180deg, rgba(0,147,230,.04), #fff);
    }

    .pd-wrap .pd-mini-t {
        font-weight: 800;
        color: var(--pd-ink);
        margin-bottom: 6px;
    }

    .pd-wrap .pd-mini-d {
        margin: 0;
        color: var(--pd-muted);
        font-size: 13.5px;
    }

    /* callout */
    .pd-wrap .pd-callout {
        margin-top: 12px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(0,147,230,.06);
        border: 1px solid rgba(0,147,230,.18);
        color: var(--pd-muted);
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

        .pd-wrap .pd-callout .fa {
            margin-top: 2px;
        }

    /* placeholders */
    .pd-wrap .pd-mediaSlot {
        margin-top: 12px;
        border-radius: 16px;
        border: 1px dashed rgba(0,147,230,.35);
        background: rgba(0,147,230,.03);
        overflow: hidden;
    }

    .pd-wrap .pd-mediaSlot-inner {
        padding: 16px;
    }

    .pd-wrap .pd-mediaSlot-title {
        font-weight: 900;
        color: var(--pd-ink);
        margin-bottom: 4px;
    }

    .pd-wrap .pd-mediaSlot-sub {
        color: var(--pd-muted);
        font-size: 13px;
    }

    .pd-wrap .pd-muted {
        color: var(--pd-muted);
        font-size: 12.8px;
        margin-top: 10px;
    }

    /* ========== LIST (dot aligned to paragraph) ========== */
    /* 默认 ul 不显示浏览器 bullets */
    .pd-wrap .pd-ul {
        list-style: none;
        padding: 0;
        margin: 8px 0 0;
        color: var(--pd-muted);
    }

        .pd-wrap .pd-ul li {
            margin: 8px 0;
        }

    /* 关键：圆点右移 + 与正文左边缘对齐 */
    .pd-wrap .pd-ul-dot {
        margin-top: 10px;
    }

        .pd-wrap .pd-ul-dot li {
            position: relative;
            padding-left: 22px; /* 文本起点 */
        }

            .pd-wrap .pd-ul-dot li::before {
                content: "";
                position: absolute;
                left: 8px; /* ✅圆点往右一些，和段落左边缘更对齐 */
                top: 0.72em;
                width: 6px;
                height: 6px;
                border-radius: 999px;
                background: rgba(15,23,42,.65);
            }

    /* ========== TABLES ========== */
    .pd-wrap .pd-spec,
    .pd-wrap .pd-alt {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid var(--pd-line);
        border-radius: 14px;
        overflow: hidden;
    }

        .pd-wrap .pd-spec th,
        .pd-wrap .pd-spec td,
        .pd-wrap .pd-alt th,
        .pd-wrap .pd-alt td {
            padding: 10px 12px;
            border-bottom: 1px solid rgba(230,238,247,.9);
            font-size: 13.5px;
            vertical-align: top;
        }

        .pd-wrap .pd-spec th {
            width: 240px;
            color: var(--pd-ink);
            background: rgba(0,147,230,.05);
            text-align: left;
            white-space: nowrap;
        }

        .pd-wrap .pd-spec td {
            color: var(--pd-muted);
        }

        .pd-wrap .pd-alt thead th {
            color: var(--pd-ink);
            background: rgba(0,147,230,.05);
            text-align: left;
        }

        .pd-wrap .pd-alt tbody td {
            color: var(--pd-muted);
        }

        .pd-wrap .pd-spec tr:last-child th,
        .pd-wrap .pd-spec tr:last-child td,
        .pd-wrap .pd-alt tr:last-child td {
            border-bottom: none;
        }

    /* quality boxes */
    .pd-wrap .pd-box {
        border: 1px solid var(--pd-line);
        border-radius: 14px;
        padding: 12px;
        background: #fff;
    }

    .pd-wrap .pd-h3 {
        font-weight: 900;
        color: var(--pd-ink);
        margin-bottom: 6px;
    }

    .pd-wrap .pd-p {
        color: var(--pd-muted);
        font-size: 13.5px;
    }

    /* applications */
    .pd-wrap .pd-appGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 10px;
    }

    .pd-wrap .pd-appCard {
        border: 1px solid var(--pd-line);
        border-radius: 14px;
        padding: 12px;
        background: linear-gradient(180deg, rgba(0,147,230,.03), #fff);
    }

    .pd-wrap .pd-appT {
        font-weight: 900;
        color: var(--pd-ink);
        margin-bottom: 2px;
    }

    .pd-wrap .pd-appD {
        color: var(--pd-muted);
        font-size: 13.5px;
    }

    /* ========== FAQ with chevron toggle ========== */
    .pd-wrap .pd-faq {
        display: grid;
        gap: 10px;
    }

    .pd-wrap .pd-qa {
        border: 1px solid var(--pd-line);
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
    }

        .pd-wrap .pd-qa summary {
            cursor: pointer;
            padding: 12px 12px;
            font-weight: 800;
            color: var(--pd-ink);
            background: rgba(0,147,230,.04);
            list-style: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .pd-wrap .pd-qa summary::-webkit-details-marker {
                display: none;
            }

    .pd-wrap .pd-q {
        color: var(--pd-primary);
    }

    .pd-wrap .pd-qtext {
        flex: 1;
    }

    /* chevron: down when closed, rotates up when open */
    .pd-wrap .pd-chev {
        font-size: 14px;
        color: rgba(15,23,42,.55);
        transition: transform .18s ease, color .18s ease;
    }

    .pd-wrap details[open] .pd-chev {
        transform: rotate(180deg);
        color: var(--pd-primary);
    }

    .pd-wrap .pd-ans {
        padding: 12px;
        color: var(--pd-muted);
        border-top: 1px solid rgba(230,238,247,.9);
        background: rgba(255,255,255,.92);
    }

    /* Disclaimer noteBox */
    .pd-wrap .pd-noteBox {
        border: 1px solid rgba(0,147,230,.22);
        background: rgba(0,147,230,.06);
        border-radius: 14px;
        padding: 12px;
        color: var(--pd-muted);
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

        .pd-wrap .pd-noteBox .fa {
            margin-top: 2px;
        }

/* Responsive */
@media (max-width: 980px) {
    .pd-wrap .pd-hero-inner {
        padding: 22px 18px 18px;
        max-width: 100%;
    }

    .pd-wrap .pd-title {
        font-size: 26px;
    }

    .pd-wrap .pd-grid2 {
        grid-template-columns: 1fr;
    }

    .pd-wrap .pd-appGrid {
        grid-template-columns: 1fr;
    }

    .pd-wrap .pd-spec th {
        width: 40%;
        white-space: normal;
    }
}


/* ===== FIX: double bullets (default ul bullet + custom dot) ===== */
.pd-wrap ul.pd-ul,
.pd-wrap ul.pd-ul-dot{
  list-style: none !important;     /* 彻底关掉浏览器默认圆点 */
  margin: 10px 0 0 !important;     /* 清掉主题/全局的 ul margin */
  padding: 0 !important;           /* 清掉主题/全局的 ul padding */
}

/* 每一行的排版 */
.pd-wrap ul.pd-ul-dot > li{
  position: relative;
  margin: 10px 0 !important;
  padding-left: 26px !important;   /* 文本起点 */
  line-height: 1.7;
}

/* 自定义圆点（只保留这一个） */
.pd-wrap ul.pd-ul-dot > li::before{
  content: "";
  position: absolute;
  left: 10px;                      /* 圆点往右一点，更贴合你要的对齐 */
  top: 0.72em;                     /* 让圆点垂直居中到首行文字 */
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .55);
}

/* 防止某些全局样式给 li 加 marker（少数主题会这样） */
.pd-wrap ul.pd-ul-dot > li::marker{
  content: "" !important;
}